.mcu-upsell-container {
    background: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); width: 100%; font-family: inherit; border: 1px solid #f0f0f0;
}

.mcu-upsell-header { display: flex; justify-content: space-between; align-items: center; }
.mcu-upsell-header h4 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.mcu-subtitle { font-size: 0.85rem; color: #666; margin: 6px 0 15px 0; }

/* Okların (İleri/Geri) Tasarımı */
.mcu-nav { display: flex; gap: 8px; }
.mcu-nav span {
    background: #f0f0f0; color: #333; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; font-weight: bold; transition: all 0.3s ease; user-select: none;
}
.mcu-nav span:hover { background: #FF6000; color: #fff; transform: scale(1.1); }

.mcu-product-card {
    display: flex; align-items: center; gap: 15px;
    background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0;
}
.mcu-img img { border-radius: 6px; width: 80px; height: auto; object-fit: cover; }
.mcu-details { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.mcu-title { font-size: 0.95rem; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.mcu-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.mcu-price-col { display: flex; flex-direction: column; }
.mcu-regular-price { font-size: 0.8rem; color: #999; display: flex; align-items: center; gap: 5px; }
.mcu-discount-badge { color: #d32f2f; font-weight: 700; }
.mcu-final-price { font-size: 1.15rem; font-weight: 700; color: #111; }

html body .woocommerce .mcu-upsell-container button.mcu-add-btn,
html body .mcu-upsell-container button.mcu-add-btn {
    padding: 8px 16px !important; border-radius: 30px !important;
    font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important;
    transition: all 0.3s ease !important; line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(255, 96, 0, 0.3) !important;
}
html body .woocommerce .mcu-upsell-container button.mcu-add-btn:hover,
html body .mcu-upsell-container button.mcu-add-btn:hover {
    transform: translateY(-2px) !important; box-shadow: 0 6px 14px rgba(255, 96, 0, 0.4) !important; opacity: 0.9 !important;
}

.mcu-dots { display: flex; justify-content: center; gap: 6px; margin-top: 15px; }
.mcu-dots span { width: 8px; height: 8px; background: #ddd; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.mcu-dots span.active { background: #FF6000; transform: scale(1.2); }

/* --- MOBİL UYUM (RESPONSIVE) --- */
@media screen and (max-width: 600px) {
    .mcu-upsell-container { padding: 15px; }
    .mcu-upsell-header h4 { font-size: 1rem; }
    .mcu-product-card { flex-direction: column; text-align: center; padding: 12px; gap: 10px; }
    .mcu-img img { width: 100px; margin: 0 auto; }
    .mcu-bottom-row { flex-direction: column; align-items: center; gap: 12px; }
    .mcu-price-col { align-items: center; }
    .mcu-add-btn { width: 100%; max-width: 250px; padding: 12px 16px !important; font-size: 0.95rem !important; }
}