/* ═══════════════════════════════════════════════════════════════════════════
   📌 LEPISTESEVI - MODALS.CSS
   ═══════════════════════════════════════════════════════════════════════════
   
   Bu dosya tüm modal (popup) stillerini içerir:
   - Ortak modal altyapısı
   - Ürün detay modalı
   - Login/Register modalları
   - Profil modalı
   - Adres modalı
   - Renk seçici modalı
   - Onay dialogları
   
   🔄 Modüler yapıya geçiş: Ocak 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   🎭 ORTAK MODAL ALTYAPISI
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-base,
.modal-print-info,
.modal-color,
.modal-product,
.modal-login,
.modal-register,
.modal-profile,
.modal-order,
.modal-color-picker {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-overlay);
    z-index: 999999;
}

.modal-base.hidden,
.modal-print-info.hidden,
.modal-color.hidden,
.modal-product.hidden,
.modal-login.hidden,
.modal-register.hidden,
.modal-profile.hidden,
.modal-order.hidden,
.modal-color-picker.hidden {
    display: none !important;
}

.modal-base .modal-content,
.modal-print-info .modal-content,
.modal-color .modal-content,
.modal-product .modal-content,
.modal-login .modal-content,
.modal-register .modal-content,
.modal-profile .modal-content,
.modal-order .modal-content,
.modal-color-picker .modal-content {
    background: var(--modal-bg);
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    color: var(--text-primary);
    border: 1px solid var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ MODAL ANİMASYONLARI
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes modalPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛍️ ÜRÜN DETAY MODALI - Modern Gri Glassmorphism
   ═══════════════════════════════════════════════════════════════════════════ */

#productModal .modal-content {
    /* Daha Koyu/Modern Arkaplan - Product ile aynı (#121212) -> SİPARİŞ İLE AYNI */
    background: var(--surface) !important;
    /* Çok daha koyu lacivert/siyah */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    border-radius: 20px !important;
    width: 95%;
    /* Ekranın %95'ini kaplasın */
    max-width: 1100px;
    /* Genişlik biraz daha arttı */
    max-height: 80vh;
    /* 95vh -> 80vh: Modal ile değerlendirme arasındaki boşluk azaltıldı */
    overflow-y: auto;
    /* Scroll gerekirse çalışsın */
    scrollbar-width: none;
    /* Firefox için gizle */
    -ms-overflow-style: none;
    /* IE için gizle */
    padding: 20px;
    /* 40px'ten düşürüldü - Daha geniş iç alan */
}

/* Scrollbar'ı Chrome/Safari için gizle */
#productModal .modal-content::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

/* Zoom Popup - KESİN çözüm (ID ile Hedefleme) */
#zoomPopup {
    z-index: 2147483647 !important;
    /* Max integer - Kesinlikle en üstte */
    background: rgba(0, 0, 0, 0.95) !important;
    /* Arkaplanı biraz daha kararttım */
}

/* Zoom Kontrol Butonları (Kapat, Zoom vs) */
#zoomPopup button {
    background: rgba(0, 0, 0, 0.8) !important;
    /* Koyu zemin */
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    /* Belirgin çerçeve */
    border-radius: 8px !important;
    opacity: 1 !important;
    width: 45px !important;
    /* Biraz daha büyük */
    height: 45px !important;
    font-size: 1.5rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
}

#zoomPopup button:hover {
    background: #4db8ff !important;
    /* Mavi hover */
    border-color: #4db8ff !important;
    transform: scale(1.1);
}

/* 🖥️ Masaüstü: İki Kolonlu Düzen */
@media (min-width: 768px) {
    #productModal .product-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* EQUAL WIDTHS */
        gap: 40px;
        align-items: center;
        align-content: center;
        /* VERTICAL CENTER FIX */
        /* DİKEY ORTALAMA */
        height: 100%;
        /* Konteyner yüksekliği */
        grid-template-areas:
            "gallery info";
    }

    /* Sol Taraf: Çerçeveli ve Ortalanmış */
    #productModal .product-gallery {
        grid-area: gallery;
        border: 2px solid var(--text-faintest);
        /* Sağ panel ile aynı belirgin gri kenar */
        background: var(--surface-light);
        /* Modern Dark Gray Surface - Order Match */
        padding: 20px 40px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible !important;
        position: relative;
        height: 100%;
        /* Konteyner yüksekliğine yayıl */
        min-height: 500px;
        /* REVERTED from 650px */
        /* Görsel denge ve ortalama için yeterli alan */
        gap: 20px;
        /* Use Gap instead of margins */
    }

    /* Sağ Taraf: Detaylar */
    #productModal .product-info {
        grid-area: info;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Dikey Ortala */
        align-items: center;
        padding-top: 0;
        height: 100%;
        /* Konteyner yüksekliği */
    }

    /* Butonları da sağ kolonun akışına dahil et veya ayrı tut */
    #productModal .content-wrapper-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    #productModal .product-actions,
    #productModal .action-row {
        /* grid-area: actions;  <-- REMOVED: Managed by flex parent (info) */
        justify-content: center !important;
        margin-top: 80px !important;
        /* INCREASED: Push buttons down as requested */
        align-self: center;
        /* Center in flex column */
        width: 100%;
    }

    /* Gözden kaçan başlık hizalaması */
    #productModal .image-title-overlay,
    .modal-product-title {
        text-align: center !important;
        /* Başlığı ORTALA */
        margin-top: 0 !important;
        margin-bottom: 20px;
        width: 100%;
    }

    /* Fiyat kutusu ORTALA */
    #productModal .price-box,
    #productModal .product-prices {
        justify-content: center !important;
        width: 100%;
    }

    /* Açıklama metni ORTALA */
    #productModal .desc,
    #productModal .product-desc {
        text-align: center !important;
        width: 100%;
    }
}

/* Ana Görsel */
/* Ana Görsel - Hem statik hem de dinamik yüklenen (product.html'den gelen) */

/* ❤️ Favori butonu için container pozisyonu */
#productModal .product-gallery .main-image {
    position: relative !important;
}

#productModal .main-img,
#productModal #mainProductImage,
#productModal .product-gallery .main-image img {
    max-width: 100%;
    max-height: 300px !important;
    /* REVERTED from 550px */
    /* Product sayfasındaki 400px'i ve doğal boyutu ezer */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border-medium);
    background: var(--surface-card);
    padding: 10px;
    margin: 0 auto 15px;
    display: block !important;
}

/* Thumbnail Satırı */
#productModal .thumb-row,
#productModal .thumbnail-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 10px;
    /* Padding artırıldı: Kenardaki glow efekti kesilmesin */
}

/* Fiyat Kutusu - JS'den gelen yapıyı da kapsa */
#productModal .price-box,
#productModal .product-prices,
#productModal .price-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    /* Alt boşluk artırıldı */
    margin-top: 20px;
    /* Üst boşluk eklendi */
}

/* Thumbnail Carousel Wrapper */
.thumb-carousel-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 300px;
    /* 4 resim (60px * 4) + boşluklar için sabit genişlik */
    max-width: 100%;
    margin-top: 25px;
    /* Üst boşluğu artırdım */
    margin-bottom: 5px;
    padding: 0 40px;
    /* Oklar için yanlardan yer ayır */
}

/* Navigasyon Okları - Wrapper'ın İÇİNDE ama kenarlarda */
.thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--hover-bg-light);
    color: var(--text-primary);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    z-index: 20;
    /* Z-index yükseltildi */
    opacity: 1 !important;
    /* HER ZAMAN GÖRÜNÜR */
}

.thumb-nav.left {
    left: 0;
    /* Padding alanının içinde */
}

.thumb-nav.right {
    right: 0;
}

.thumb-nav:hover {
    background: #4db8ff;
    color: #fff;
}

/* Scroll Edilebilir Alan - SCROLLBAR KESİN GİZLİ (Overflow Hidden) */
.thumb-track {
    display: flex;
    gap: 8px;
    overflow: hidden !important;
    /* Scrollbar ASLA görünmez */
    /* Kodla gizlemek daha güvenli */
    /* Scrollbar tamamen gizli, butonla kaydır */
    scroll-behavior: smooth;
    padding: 15px;
    /* 🔵 Mavi glow kenarlarda kesilmesin */
    margin: 0;
    width: 100%;
}

/* Webkit için de garanti olsun ama overflow:hidden yetmeli */
.thumb-track::-webkit-scrollbar {
    display: none !important;
}

/* Thumbnail Görselleri - Carousel İçinde */
.thumb-track .thumb {
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.thumb-track .thumb:hover {
    opacity: 1;
    border-color: rgba(77, 184, 255, 0.5);
    transform: scale(1.05);
}

.thumb-track .thumb.active,
.thumb-track-flex .thumb.active {
    opacity: 1;
    border: 3px solid #4db8ff !important;
    box-shadow: 0 0 20px rgba(77, 184, 255, 0.9), 0 0 8px rgba(77, 184, 255, 1);
}

/* 🔵 Index Modal Thumbnail - Flex Track için de hover stili */
.thumb-track-flex .thumb {
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.thumb-track-flex .thumb:hover {
    opacity: 1;
    border-color: rgba(77, 184, 255, 0.5);
    transform: scale(1.05);
}

/* YENİ ÜRÜN BAŞLIĞI (Sağ Kolon - En Üst) */
.modal-product-title {
    color: #4db8ff !important;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    text-align: left;
    display: block;
}

#productModal .thumb-row .thumbnail:hover,
#productModal .thumbnail-row img:hover,
#productModal .thumb-row img:hover {
    opacity: 1;
    border-color: rgba(77, 184, 255, 0.5);
    transform: scale(1.05);
}

#productModal .thumb-row .thumbnail.active,
#productModal .thumbnail-row img.active,
#productModal .thumb-row img.active {
    opacity: 1;
    border-color: #4db8ff;
    box-shadow: 0 0 12px rgba(77, 184, 255, 0.6);
}

/* Açıklama Metni */
#productModal .desc {
    color: var(--text-secondary) !important;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Fiyat Kutusu */
#productModal .price-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
    /* 25px -> 5px */
    margin-top: 5px;
    /* Varsayılan veya önceki değerden düşürüldü */
}

#productModal .old-price {
    color: var(--old-price-color);
    text-decoration: line-through;
    font-size: 1.1rem;
}

#productModal .new-price {
    color: #4db8ff;
    font-size: 1.6rem;
    font-weight: 700;
}

/* Buton Satırı */
/* Buton Satırı */
#productModal .action-row,
#productModal .product-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 5px;
    /* Yukarı alındı (15px -> 5px) */
}

/* Ürün Başlığı (Resmin Altında) */
#productModal .image-title-overlay {
    display: block !important;
    position: static !important;
    text-align: center;
    color: #4db8ff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 15px;
    width: 100%;
}

/* Fiyat Kutusu - JS'den gelen yapıyı da kapsa */
#productModal .price-box,
#productModal .product-prices,
#productModal .price-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px !important;
    /* 48px product.css marginini ezer */
    margin-top: 20px !important;
}

#productModal .action-row,
#productModal .product-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
    /* Reset but allow override */
}

/* 📱 MOBİL ÖZEL: Butonları 2 satır aşağı kaydır */
@media (max-width: 768px) {

    #productModal .action-row,
    #productModal .product-actions {
        margin-top: 80px !important;
        /* ~4-5 lines spacing */
    }

    /* İç çerçeveleri genişlet */
    #productModal .product-info,
    #productModal .product-gallery,
    #productModal .content-wrapper-right {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

#productModal .btn.success,
#productModal .add-cart-btn {
    background: #4db8ff;
    border: 2px solid #4db8ff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    flex: 1;
    max-width: 280px;
    /* Genişletildi */
}

#productModal .btn.success:hover,
#productModal .add-cart-btn:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(77, 184, 255, 0.3);
    /* Synced with User Menu */
}

/* Kapat Butonu - Gri Pill */
#productModal .btn.close,
#productModal .close-btn {
    background: #6c757d;
    border: 2px solid #6c757d;
    color: var(--text-primary);
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    flex: 1;
    max-width: 280px;
    /* Genişletildi */
}

#productModal .btn.close:hover,
#productModal .close-btn:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    transform: translateY(-2px);
}

/* Sepete Ekle Butonu - Mavi Pill */
#productModal .btn.success {
    background: #4db8ff;
    border: 2px solid #4db8ff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    flex: 1;
    max-width: 200px;
}

#productModal .btn.success:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(77, 184, 255, 0.4);
}

#addressModal .btn-grayblue:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    border-color: #4db8ff;
    color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 184, 255, 0.25);
}

/* 
   🔥 ADDRESS MODAL Z-INDEX FIX - ABSOLUTE MAX 
   3D Baskı ve diğer tüm popupların üzerinde çıkması için
*/
#addressModal {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Kapat Butonu - Gri Pill */
#productModal .btn.close {
    background: #6c757d;
    border: 2px solid #6c757d;
    color: var(--text-primary);
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    flex: 1;
    max-width: 200px;
}

#productModal .btn.close:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🖨️ BASKI HİZMETLERİ VE SİPARİŞLER MODALI
   ═══════════════════════════════════════════════════════════════════════════ */

#ordersModal .modal-content,
#ordersModal .print-requests-content,
#printRequestsModal .modal-content,
#printRequestsModal .print-requests-content,
#myReviewsModal .modal-content,
#myReviewsModal .print-requests-content,
#favoritesModal .modal-content,
#favoritesModal .print-requests-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    /* 🔵 Sabit boyut - tüm modallar aynı */
    width: 90%;
    max-width: 500px !important;
    height: auto;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

#ordersModal .print-requests-header,
#printRequestsModal .print-requests-header,
#myReviewsModal .print-requests-header,
#favoritesModal .print-requests-header {
    padding: 20px 24px 10px;
    text-align: center;
    flex-shrink: 0;
}

#ordersModal .print-requests-header h2,
#printRequestsModal .print-requests-header h2,
#myReviewsModal .print-requests-header h2,
#favoritesModal .print-requests-header h2 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.3rem;
}

#ordersModal .print-requests-body,
#printRequestsModal .print-requests-body,
#myReviewsModal .print-requests-body,
#favoritesModal .print-requests-body {
    padding: 10px 24px;
    flex: 1;
    overflow-y: auto;
    color: var(--text-secondary);
}

#ordersModal .print-requests-footer,
#printRequestsModal .print-requests-footer,
#myReviewsModal .print-requests-footer,
#favoritesModal .print-requests-footer {
    padding: 16px 24px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

#ordersModal .print-btn,
#ordersModal #closeOrdersModal,
#printRequestsModal .print-btn,
#printRequestsModal #closePrintRequests,
#myReviewsModal .print-btn,
#myReviewsModal #closeMyReviewsModal,
#favoritesModal .print-btn,
#favoritesModal #closeFavoritesModal {
    background: var(--gray-btn);
    border: 2px solid var(--gray-btn);
    color: var(--text-primary);
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

#ordersModal .print-btn:hover,
#ordersModal #closeOrdersModal:hover,
#printRequestsModal .print-btn:hover,
#printRequestsModal #closePrintRequests:hover,
#myReviewsModal .print-btn:hover,
#myReviewsModal #closeMyReviewsModal:hover,
#favoritesModal .print-btn:hover,
#favoritesModal #closeFavoritesModal:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔘 DEĞERLENDİRMELERİM - TAB BUTONLARI
   ═══════════════════════════════════════════════════════════════════════════ */

.review-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 10px 0;
}

.review-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    white-space: nowrap;
}

.review-tab-btn:hover {
    background: rgba(77, 184, 255, 0.15);
    border-color: rgba(77, 184, 255, 0.4);
    color: #fff;
}

.review-tab-btn.active {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.4);
}

.review-tab-btn.active:hover {
    background: #3da8ef;
    border-color: #3da8ef;
}

/* Mobilde tab butonları */
@media (max-width: 480px) {
    .review-tabs {
        gap: 6px;
        padding: 8px 8px 0;
    }

    .review-tab-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ DEĞERLENDİRMELERİM - MODERN ÜRÜN KARTI STİLLERİ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kart Satırı */
#myReviewsModal .print-item,
#ordersModal .print-item,
#printRequestsModal .print-item,
#orderDetailModal .print-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#myReviewsModal .print-item:hover,
#ordersModal .print-item:hover,
#printRequestsModal .print-item:hover,
#orderDetailModal .print-item:hover {
    background: var(--hover-bg-subtle);
    border-color: rgba(77, 184, 255, 0.3);
    transform: translateX(4px);
}

/* Sol Taraf - Ürün Bilgisi */
#myReviewsModal .print-item-left,
#ordersModal .print-item-left,
#printRequestsModal .print-item-left,
#orderDetailModal .print-item-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ürün Başlığı */
#myReviewsModal .print-title,
#ordersModal .print-title,
#printRequestsModal .print-title,
#orderDetailModal .print-title {
    color: #4db8ff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

/* Detay Bilgileri */
#myReviewsModal .print-date,
#ordersModal .print-date,
#printRequestsModal .print-date,
#orderDetailModal .print-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Sağ Taraf - Görsel ve Buton */
#myReviewsModal .print-item-right,
#ordersModal .print-item-right,
#printRequestsModal .print-item-right,
#orderDetailModal .print-item-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
}

/* Ürün Görseli */
#myReviewsModal .print-item-right img,
#ordersModal .print-item-right img,
#printRequestsModal .print-item-right img,
#orderDetailModal .print-item-right img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-medium);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Küçük Buton */
#myReviewsModal .print-item .print-btn,
#ordersModal .print-item .print-btn,
#printRequestsModal .print-item .print-btn {
    padding: 6px 14px;
    font-size: 0.75rem;
    border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ DEĞERLENDİRME BÖLÜMÜ - MODERN STİLLER (product-review-block)
   ═══════════════════════════════════════════════════════════════════════════ */

.product-review-block {
    background: var(--review-bg);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    padding: 16px 14px;
    margin: 8px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Üst Başlık Çubuğu */
.product-review-block .review-header {
    background: linear-gradient(135deg, #ffa04d 0%, #ffb800 100%);
    color: #1a1a24;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 8px;
    margin: -16px -14px 12px -14px;
    text-align: center !important;
    /* Ortalamayı zorla */
    display: flex;
    /* Flex ile de ortala */
    justify-content: center;
    align-items: center;
}

/* Kategori Grubu - Ortala */
.product-review-block .rating-category {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Flex childları ortala */
    text-align: center;
}

/* Kategori Etiketi */
.product-review-block .rating-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 4px;
    text-align: center !important;
    /* Ortalamayı zorla */
    width: 100%;
}

/* Yıldız Satırı */
.product-review-block .rating-stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 22px;
    margin: 0;
}

/* Varsayılan yıldız - mavi soluk */
.product-review-block .rating-stars span {
    color: #4db8ff;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.4;
}

/* Hover - sarı ile göster */
.product-review-block .rating-stars span:hover,
.product-review-block .rating-stars:hover span.hovered {
    color: #ffa04d;
    opacity: 1;
    transform: scale(1.1);
}

/* Seçili yıldızlar - sarı */
.product-review-block .rating-stars span.active {
    color: #ffa04d;
    opacity: 1;
}

/* Seçildikten sonra hover'da mavi göster (aktif olmayan yıldızlar) */
.product-review-block .rating-stars span.active~span:hover {
    color: #4db8ff;
    opacity: 0.8;
}

/* Görüş Alanı (Textarea) */
.product-review-block .review-comment {
    width: 100%;
    min-height: 100px;
    background: var(--hover-bg-subtle);
    border: 1px solid var(--border-stronger);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
    resize: vertical;
    margin: 10px 0 8px 0;
    outline: none;
    transition: border-color 0.2s ease;
}

.product-review-block .review-comment::placeholder {
    color: var(--text-fainter);
}

.product-review-block .review-comment:focus {
    border-color: #4db8ff;
}

/* Kaydet Butonu - Modern Pill Style */
.product-review-block .btn-save-review {
    background: #4db8ff;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 32px;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.3);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    margin: 8px auto 0 auto;
    /* YATAY ORTALAMA */
    display: block;
    cursor: pointer;
    font-size: 0.85rem;
}

.product-review-block .btn-save-review:hover {
    background: #fff;
    color: #4db8ff;
    border: 1px solid #4db8ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(77, 184, 255, 0.5);
}

/* Onaylanan (Düzenle/Görüntüle) Buton Stili (Kapat butonu gibi) */
.reviewed-btn {
    background: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
    transition: all 0.3s ease;
}

.reviewed-btn:hover {
    background: #4db8ff !important;
    border-color: #4db8ff !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.4) !important;
    transform: translateY(-2px);
}

.product-review-block .btn-edit-review {
    display: block;
    margin: 10px auto 0 auto !important;
    /* YATAY ORTALAMA */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 8px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.product-review-block .btn-edit-review:hover {
    background: rgba(77, 184, 255, 0.1);
    color: #4db8ff;
    border-color: #4db8ff;
    box-shadow: 0 0 12px rgba(77, 184, 255, 0.25);
}

/* Yorum Metni Gösterimi */
.existing-comment {
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left;
    max-width: 100%;
    width: 100%;
    margin: 10px auto;
    display: block;
    min-height: 20px;
    /* Boş gelse bile biraz yer kaplasın */
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Devam Et Butonu (İlk Sayfa) */
#printRequestsModal .continue-btn,
#printRequestsModal button[type="submit"],
.print-continue-btn {
    background: #4db8ff;
    border: 2px solid #4db8ff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
}

#printRequestsModal .continue-btn:hover,
#printRequestsModal button[type="submit"]:hover,
.print-continue-btn:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
}

/* 3D Baskı Popup Kapat Butonu (User Request: Sepet tuşu gibi olsun) */
/* 3D Baskı Popup Kapat Butonu (User Request: Sepet tuşu gibi olsun) */
#closeColorModal {
    background: var(--hover-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 50px;
    /* Pill shape */
    padding: 10px 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    margin: 15px auto 0;
    /* Ortalamak için auto margin */
    display: block;
    /* Blok yaparak margin auto çalışsın */
}

#closeColorModal:hover {
    background: #4db8ff;
    color: #fff;
    border-color: #4db8ff;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
}

/* 3D Baskı İkinci Ekran (Iframe Container) Dış Kenarlar */
/* ✅ z-index artırıldı - detay ekranı diğer modalların üstünde görünsün */
#colorModal {
    z-index: 9999999 !important;
}

#colorModal .modal-content {
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    padding: 20px;
    /* İç boşluk */
    text-align: center;
    /* İçerik ortalı */
}

/* ═══════════════════════════════════════════════════════════════════════════
   📋 BASKI TALEPLERİ LİSTESİ (Print Requests List) - Modern
   ═══════════════════════════════════════════════════════════════════════════ */

/* Liste Elemanı */
.print-request-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    /* margin-bottom: 12px; -- JS'den geliyor ama class ile yönetelim */
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px !important;
    transition: all 0.2s ease;
    cursor: default;
}

.print-request-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateX(5px);
}

/* Durum Rozetleri (Badges) */
#printRequestsModal .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#printRequestsModal .badge-blue {
    background: rgba(77, 184, 255, 0.15);
    color: #4db8ff;
    border: 1px solid rgba(77, 184, 255, 0.3);
}

#printRequestsModal .badge-purple {
    background: rgba(108, 92, 231, 0.15);
    color: #a29bfe;
    border: 1px solid rgba(108, 92, 231, 0.3);
}

#printRequestsModal .badge-orange {
    background: rgba(253, 203, 110, 0.15);
    color: #fdcb6e;
    border: 1px solid rgba(253, 203, 110, 0.3);
}

#printRequestsModal .badge-green {
    background: rgba(85, 239, 196, 0.15);
    color: #55efc4;
    border: 1px solid rgba(85, 239, 196, 0.3);
}

#printRequestsModal .badge-yellow {
    background: rgba(255, 234, 167, 0.15);
    color: #ffeaa7;
    border: 1px solid rgba(255, 234, 167, 0.3);
}

#printRequestsModal .badge-info {
    background: rgba(0, 206, 201, 0.15);
    color: #81ecec;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.badge-success {
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.3);
}

.badge-red {
    background: rgba(255, 71, 87, 0.15);
    color: #ff6b81;
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.badge-gray {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Detay Butonu (Liste içi) */
.btn.info.small {
    background: transparent;
    color: #4db8ff;
    border: 1px solid #4db8ff;
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.btn.info.small:hover {
    background: #4db8ff;
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ℹ️ BASKI BİLGİ POPUP (İLK AÇILAN) - Modern Gri
   ═══════════════════════════════════════════════════════════════════════════ */

#printInfoModal .modal-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    max-width: 600px;
    /* Biraz daha geniş */
}

#printInfoModal h2 {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

#printInfoModal h3 {
    color: #4db8ff !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
    font-size: 1.1rem;
}

#printInfoModal .modal-body {
    color: rgba(255, 255, 255, 0.85) !important;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
    text-align: left;
}

#printInfoModal .modal-body ul li {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
}

/* Devam Et Butonu - Ana Sayfa Popup */
#continueToPrint {
    background: #4db8ff;
    border: 2px solid #4db8ff;
    color: #fff;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    margin: 25px auto 10px !important;
    display: block;
    width: fit-content;
}

#continueToPrint:hover {
    background: #fff !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ BASKI BİLGİ POPUP - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #printInfoModal .modal-content {
    background: #fff !important;
    border: 3px solid #555 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #printInfoModal h2 {
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #printInfoModal h3 {
    color: #2196F3 !important;
}

[data-theme="light"] #printInfoModal .modal-body {
    color: #333 !important;
}

[data-theme="light"] #printInfoModal .modal-body p {
    color: #444 !important;
}

[data-theme="light"] #printInfoModal .modal-body ul li {
    color: #444 !important;
}

[data-theme="light"] #printInfoModal .modal-body strong {
    color: #1a1a2e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ RENK SEÇİM / IFRAME MODALI - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #colorModal .modal-content {
    background: #fff !important;
    border: 3px solid #555 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #colorModal h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] #colorModal .cancel-btn {
    background-color: #555 !important;
    border: 2px solid #555 !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 700;
    transition: all 0.3s ease;
    color: #fff !important;
    /* ENFORCE WHITE TEXT */
}

[data-theme="light"] #colorModal .cancel-btn:hover {
    background-color: #4db8ff !important;
    color: #fff !important;
    border-color: #4db8ff !important;
    transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ BASKI TALEPLERİ LİSTESİ - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #printRequestsModal .modal-content {
    background: #fff !important;
    border: 3px solid #555 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #printRequestsModal h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] .print-request-item {
    background: #f8f9fb !important;
    border: 3px solid #555 !important;
}

[data-theme="light"] .print-request-item:hover {
    background: #f0f2f5 !important;
    border-color: #4db8ff !important;
}

[data-theme="light"] .print-request-item .title {
    color: #1a1a2e !important;
}

[data-theme="light"] .print-request-item .meta {
    color: #666 !important;
}

[data-theme="light"] .print-requests-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .print-requests-footer {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Genel modal borders - light theme */
[data-theme="light"] .modal-base .modal-content,
[data-theme="light"] .modal-color .modal-content,
[data-theme="light"] .modal-login .modal-content,
[data-theme="light"] .modal-register .modal-content,
[data-theme="light"] .modal-profile .modal-content,
[data-theme="light"] .modal-order .modal-content {
    border: 3px solid #555 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ ÜRÜN / SEPETE EKLE MODALI - LIGHT THEME (Tam Beyaz)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .modal-product .modal-content {
    background: #fff !important;
    border: 3px solid #555 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .modal-product h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] .modal-product .price-tag {
    color: #2196F3 !important;
    font-weight: 700;
}

[data-theme="light"] .modal-product p {
    color: #444 !important;
}

[data-theme="light"] .modal-product label {
    color: #333 !important;
}

[data-theme="light"] .modal-product select,
[data-theme="light"] .modal-product input {
    background: #fff !important;
    border: 3px solid #555 !important;
    color: #333 !important;
}

[data-theme="light"] .modal-product .qty-btn {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 3px solid #555 !important;
}

[data-theme="light"] .modal-product .qty-btn:hover {
    background: #e0e0e0 !important;
}

/* Sepete Ekle Modalı - KAPAT Butonu */
[data-theme="light"] .modal-product .btn.close {
    background-color: #555 !important;
    /* Screenshot Match: Dark Grey */
    border: 2px solid #555 !important;
    border-radius: 50px !important;
    /* Pill Shape */
    padding: 10px 20px !important;
    /* Match .btn.success */
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    /* ENFORCE WHITE TEXT */
}

[data-theme="light"] .modal-product .btn.close:hover {
    background-color: #4db8ff !important;
    /* Hover Mavi */
    color: #fff !important;
    border-color: #4db8ff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(77, 184, 255, 0.4) !important;
}

/* 🛑 GLOBAL CLOSE BUTTON OVERRIDE (CRITICAL FIX) 🛑 */
[data-theme="light"] #closeColorModal,
[data-theme="light"] #closeProductDetail,
[data-theme="light"] #closePrintRequests,
[data-theme="light"] #closeOrdersModal,
[data-theme="light"] #closeFavoritesModal,
[data-theme="light"] #colorModal .cancel-btn,
[data-theme="light"] .modal-product .btn.close {
    background-color: #555 !important;
    color: #fff !important;
    /* Forces White Text */
    border: 2px solid #555 !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
}

[data-theme="light"] #closeColorModal:hover,
[data-theme="light"] #closeProductDetail:hover,
[data-theme="light"] #closePrintRequests:hover,
[data-theme="light"] #closeOrdersModal:hover,
[data-theme="light"] #closeFavoritesModal:hover,
[data-theme="light"] #colorModal .cancel-btn:hover,
[data-theme="light"] .modal-product .btn.close:hover {
    background-color: #4db8ff !important;
    color: #fff !important;
    border-color: #4db8ff !important;
    transform: translateY(-3px) !important;
}

[data-theme="light"] #printInfoModal h2 {
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #printInfoModal h3 {
    color: #2196F3 !important;
}

[data-theme="light"] #printInfoModal .modal-body {
    color: #333 !important;
}

[data-theme="light"] #printInfoModal .modal-body p {
    color: #444 !important;
}

[data-theme="light"] #printInfoModal .modal-body ul li {
    color: #444 !important;
}

[data-theme="light"] #printInfoModal .modal-body strong {
    color: #1a1a2e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ RENK SEÇİM / IFRAME MODALI - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #colorModal .modal-content {
    background: #fff !important;
    border: 2px solid #ccc !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #colorModal h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] #colorModal .cancel-btn {
    color: #333 !important;
    border-color: #ccc !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ BASKI TALEPLERİ LİSTESİ - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #printRequestsModal .modal-content {
    background: #fff !important;
    border: 2px solid #ccc !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #printRequestsModal h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] .print-request-item {
    background: #f8f9fb !important;
    border: 2px solid #ddd !important;
}

[data-theme="light"] .print-request-item:hover {
    background: #f0f2f5 !important;
    border-color: #4db8ff !important;
}

[data-theme="light"] .print-request-item .title {
    color: #1a1a2e !important;
}

[data-theme="light"] .print-request-item .meta {
    color: #666 !important;
}

[data-theme="light"] .print-requests-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .print-requests-footer {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Genel modal borders - light theme */
[data-theme="light"] .modal-base .modal-content,
[data-theme="light"] .modal-color .modal-content,
[data-theme="light"] .modal-login .modal-content,
[data-theme="light"] .modal-register .modal-content,
[data-theme="light"] .modal-profile .modal-content,
[data-theme="light"] .modal-order .modal-content {
    border: 2px solid #ddd !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ ÜRÜN / SEPETE EKLE MODALI - LIGHT THEME (Tam Beyaz)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .modal-product .modal-content {
    background: #fff !important;
    border: 2px solid #ddd !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .modal-product h2 {
    color: #1a1a2e !important;
}

[data-theme="light"] .modal-product .price-tag {
    color: #2196F3 !important;
    font-weight: 700;
}

[data-theme="light"] .modal-product p {
    color: #444 !important;
}

[data-theme="light"] .modal-product label {
    color: #333 !important;
}

[data-theme="light"] .modal-product select,
[data-theme="light"] .modal-product input {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

[data-theme="light"] .modal-product .qty-btn {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

[data-theme="light"] .modal-product .qty-btn:hover {
    background: #e0e0e0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   🔐 LOGIN / REGISTER MODALLARI
   ═══════════════════════════════════════════════════════════════════════════ */

#loginModal .modal-content,
#registerModal .modal-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    max-width: 400px;
}

#loginModal input,
#registerModal input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Modern Glass Input */
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(4px);
}

#loginModal input:focus,
#registerModal input:focus {
    border-color: #4db8ff;
    outline: none;
    background: rgba(0, 0, 0, 0.5);
}

#loginModal input.filled,
#registerModal input.filled {
    background: #fff;
    color: #000;
    border-color: #4db8ff;
}

/* Buton Satırı - Equal Width */
.modal-buttons-row {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.modal-buttons-row .btn {
    flex: 1 1 0px !important;
    /* Eşit genişlik zorla */
    min-width: 0 !important;
    margin: 0 !important;
    /* Margin sıfır */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* Glass Background Close Buttons */
#closeLoginModal,
#closeRegisterModal {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* BLUE HOVER - Kullanıcı isteği */
#closeLoginModal:hover,
#closeRegisterModal:hover {
    background: #4db8ff !important;
    /* MAVI */
    color: #fff !important;
    border-color: #4db8ff !important;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    transform: translateY(-2px);
}

/* Google Button - Checkout Style (Blue Pill) */
.google-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #4db8ff !important;
    color: #fff !important;
    border: 2px solid #4db8ff !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 320px !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.3) !important;
}

/* FANCY CHECKOUT BUTTON (Sepete Ekle - 3 Bölümlü) */
.fancy-checkout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 20px !important;
    /* Dikey padding azaltıldı, içerik sığsın */
    background: #4db8ff !important;
    color: #fff !important;
    border: 2px solid #4db8ff !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.3) !important;
    min-height: 50px;
    /* Yükseklik garantile */
}

.fancy-checkout-btn:hover {
    background: #fff !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(77, 184, 255, 0.5) !important;
}

/* Sol Kısım: İkon + Yazı */
.fancy-checkout-btn .fc-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* Orta Kısım: Eylem */
.fancy-checkout-btn .fc-center {
    font-weight: 600;
    font-size: 1rem;
    opacity: 0.95;
    flex: 1;
    /* Ortayı doldursun */
    text-align: center;
}

/* Sağ Kısım: 2 Satır Bilgi */
.fancy-checkout-btn .fc-right {
    text-align: center;
    /* Ortalanmış dedi kullanıcı */
    font-size: 0.75rem;
    line-height: 1.1;
    opacity: 0.9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 10px;
    margin-left: 5px;
}

.fancy-checkout-btn:hover .fc-right {
    border-left-color: rgba(77, 184, 255, 0.3);
    /* Hoverda çizgi rengi */
}

/* SVG ikonu için beyaz background (opsiyonel) veya direkt kullanım */
.google-btn svg {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.google-btn:hover {
    background: #fff !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(77, 184, 255, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   👤 PROFİL MODALI - Modern Gri Tonları
   ═══════════════════════════════════════════════════════════════════════════ */

#profileModal .modal-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff !important;
    width: 420px !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#profileModal h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

#profileModal input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
    padding: 8px 14px;
    transition: all 0.3s ease;
}

#profileModal input:focus {
    border-color: #4db8ff;
    outline: none;
}

#profileModal input.filled {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #d1d5db !important;
}

#profileModal input[disabled] {
    background-color: rgba(100, 100, 100, 0.3) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Profil modalındaki disabled input (E-posta) */
#profileModal input:disabled.filled {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #333 !important;
}

#profileModal input:disabled::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

/* Buton Container - Satır Düzeni */
#profileModal .button-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* İlk satır - Güncelle ve Şifre Değiştir yan yana */
#profileModal .button-row-top {
    display: flex;
    gap: 10px;
    width: 100%;
}

#profileModal .button-row-top .btn {
    flex: 1;
}

/* Pill Style Butonlar */
#profileModal .btn {
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Güncelle ve Şifre Değiştir - Mavi/Beyaz */
#profileModal #saveProfileBtn,
#profileModal #changePasswordBtn,
#profileModal .btn.success {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
}

#profileModal #saveProfileBtn:hover,
#profileModal #changePasswordBtn:hover,
#profileModal .btn.success:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
}

/* Kapat - Gri/Beyaz, Hover: Mavi/Beyaz */
#profileModal #closeProfileModal {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    width: 100%;
}

#profileModal #closeProfileModal:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📍 ADRES MODALI - Modern Gri Tonları
   ═══════════════════════════════════════════════════════════════════════════ */

#addressModal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999999;
}

#addressModal.hidden {
    display: none !important;
}

#addressModal>div {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff !important;
    max-width: 420px;
    width: 90%;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    animation: modalPop 0.25s ease-out;
    max-height: 85vh;
    overflow-y: auto;
}

#addressModal h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

#addressModal input,
#addressModal select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

#addressModal input:focus,
#addressModal select:focus {
    border-color: #4db8ff;
    outline: none;
}

#addressModal input.filled,
#addressModal select.filled {
    background: #fff !important;
    color: #000 !important;
    border-color: #4db8ff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modern Toggle Switch - Varsayılan Adres
   ═══════════════════════════════════════════════════════════════════════════ */

#addressModal .default-address-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Checkbox'ı gizle, switch görünsün */
#addressModal .default-address-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Modern Toggle Switch Container */
#addressModal .default-address-row label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

/* Toggle Track */
#addressModal .default-address-row label::before {
    content: '';
    width: 44px;
    height: 24px;
    background: rgba(100, 100, 110, 0.6);
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

/* Toggle Knob */
#addressModal .default-address-row label::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    left: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Label için position relative */
#addressModal .default-address-row label {
    position: relative;
}

/* Checked State - Track */
#addressModal .default-address-row input[type="checkbox"]:checked+label::before {
    background: linear-gradient(135deg, #4db8ff 0%, #00a2ff 100%);
    box-shadow: 0 0 10px rgba(77, 184, 255, 0.4);
}

/* Checked State - Knob */
#addressModal .default-address-row input[type="checkbox"]:checked+label::after {
    left: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hover Menu - Varsayılan Yap Butonu
   ═══════════════════════════════════════════════════════════════════════════ */

.hover-default-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 100;
}

.hover-default-menu.show {
    opacity: 1;
    visibility: visible;
}

.hover-default-menu .tooltip-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(40, 40, 50, 0.95);
}

.hover-default-menu .tooltip-btn {
    background: linear-gradient(135deg, #4db8ff 0%, #00a2ff 100%);
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.4);
    transition: all 0.3s ease;
}

.hover-default-menu .tooltip-btn:hover {
    background: linear-gradient(135deg, #5cc5ff 0%, #1ab3ff 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(77, 184, 255, 0.5);
}

/* Butonlar Container */
#addressModal .modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
}

/* Pill Style Butonlar */
#addressModal .modal-buttons button,
#addressModal button {
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Yeni ve Kaydet - Mavi/Beyaz */
#addressModal #newAddressBtn,
#addressModal #saveAddressBtn,
#addressModal .btn-blue {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    box-shadow: 0 4px 10px rgba(77, 184, 255, 0.3);
    flex: 1;
}

#addressModal #newAddressBtn:hover,
#addressModal #saveAddressBtn:hover,
#addressModal .btn-blue:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
}

/* Kapat - Gri/Beyaz, Hover: Mavi/Beyaz */
#addressModal #closeAddressModal,
#addressModal .btn-grayblue {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
    flex: 1;
}

#addressModal #closeAddressModal:hover,
#addressModal .btn-grayblue:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
}

/* Adres Listesi Container */
#addressModal #addressList {
    margin-top: 16px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

/* Adres Kartları - Birbirinden Ayrı */
#addressModal .address-item {
    background: var(--surface-light);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#addressModal .address-item:last-child {
    margin-bottom: 0;
}

#addressModal .address-item:hover {
    background: rgba(50, 50, 65, 0.9);
    border-color: rgba(77, 184, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Varsayılan Adres Kartı */
#addressModal .address-item.default {
    border-color: rgba(255, 210, 77, 0.4);
    background: rgba(40, 40, 55, 0.9);
}

/* Adres Başlık Satırı */
#addressModal .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#addressModal .address-header strong {
    color: #fff;
    font-size: 0.95rem;
}

/* Varsayılan Badge */
#addressModal .default-badge {
    background: linear-gradient(135deg, rgba(255, 210, 77, 0.2) 0%, rgba(255, 180, 50, 0.15) 100%);
    border: 1px solid rgba(255, 210, 77, 0.4);
    color: #ffa04d;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Sil Butonu - Çöp Kutusu İkonu */
#addressModal .deleteAddressBtn {
    background: #dc3545;
    border: none;
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#addressModal .deleteAddressBtn svg {
    width: 16px;
    height: 16px;
}

#addressModal .deleteAddressBtn:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* Adres Satırı */
#addressModal .address-line {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* Varsayılan Yap Butonu - Kartın Altında */
#addressModal .setDefaultBtn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #4db8ff 0%, #00a2ff 100%);
    border: none;
    color: #fff;
    padding: 10px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    transition: all 0.3s ease;
    margin-top: 8px;
}

#addressModal .setDefaultBtn:hover {
    background: linear-gradient(135deg, #5cc5ff 0%, #1ab3ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(77, 184, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⚠️ ONAY DİALOGLARI - Modern Gri Tonları
   ═══════════════════════════════════════════════════════════════════════════ */

#confirmDeleteModal {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1000000 !important;
    inset: 0;
}

#confirmDeleteModal.hidden {
    display: none !important;
}

#confirmDeleteModal .modal-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    max-width: 400px !important;
    width: 90% !important;
}

#confirmDeleteModal .modal-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 8px;
}

#confirmDeleteModal .modal-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Pill Style Butonlar */
#confirmDeleteModal .btn-yes,
#confirmDeleteModal .btn-no {
    flex: 1;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Evet - Mavi/Beyaz, Hover: Beyaz/Mavi */
#confirmDeleteModal .btn-yes {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
}

#confirmDeleteModal .btn-yes:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
}

/* Hayır - Kırmızı/Beyaz, Hover: Gri/Beyaz */
#confirmDeleteModal .btn-no {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

#confirmDeleteModal .btn-no:hover {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* === GLOBAL: Pill Button Styles (for Confirm Modals) === */
.btn-download,
.btn-delete {
    padding: 10px 20px;
    min-width: 100px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-download {
    background: #4db8ff;
    color: #fff;
    border-color: #4db8ff;
    box-shadow: 0 4px 10px rgba(77, 184, 255, 0.3);
}

.btn-download:hover {
    background: #fff;
    color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(77, 184, 255, 0.4);
}

.btn-delete {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.btn-delete:hover {
    background: #fff;
    color: #dc3545;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔒 ŞİFRE DEĞİŞTİRME MODALI - Modern Gri Tonları
   ═══════════════════════════════════════════════════════════════════════════ */

#passwordModal .modal-content {
    /* Modern Gri Glassmorphism */
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-width: 400px;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

#passwordModal h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

#passwordModal input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.25s ease;
}

#passwordModal input:focus {
    border-color: #4db8ff;
    outline: none;
}

#passwordModal input.filled {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #4db8ff !important;
}

.password-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Buton Satırı - Yatay Tam Genişlik */
.password-button-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

/* Pill Style Butonlar */
#passwordModal .btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.3s ease;
    text-align: center;
}

/* Kaydet - Mavi/Beyaz */
#passwordModal #saveNewPassword,
#passwordModal .btn.success {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
}

#passwordModal #saveNewPassword:hover,
#passwordModal .btn.success:hover {
    background: #fff;
    border-color: #4db8ff;
    color: #4db8ff;
}

/* Kapat - Gri/Beyaz, Hover: Mavi/Beyaz */
#passwordModal #closePasswordModal,
#passwordModal .btn-cancel {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

#passwordModal #closePasswordModal:hover,
#passwordModal .btn-cancel:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL DÜZENLEMELER (Index Modal)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* 1. Sağdaki Başlığı Gizle (Resim altındaki görünecek) */
    .modal-product-title {
        display: none !important;
    }

    /* 2. Thumbnail Carousel: Daha çok resim sığsın (5-6 tane) */
    .thumb-carousel-wrapper {
        width: 100% !important;
        max-width: 380px;
        /* Genişliği genişlet (320->380) */
        padding: 0 25px;
        /* Oklar için payı biraz azalt */
    }

    .thumb-track {
        gap: 5px !important;
        /* Aralığı daralt */
    }

    .thumb-track .thumb {
        min-width: 45px !important;
        /* 50px -> 45px */
        max-width: 45px !important;
        height: 45px !important;
    }

    /* Okları biraz ufal */
    .thumb-nav {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }

    /* Wrapper margin ayarı */
    .thumb-carousel-wrapper {
        margin-top: 15px;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   🔐 PROFİL MODAL BUTONLARI (Global: Desktop + Mobile)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buton kapsayıcılarını bul ve dikey yap */
#profileModal .modal-buttons,
#profileModal .action-row,
#profileModal .password-button-row,
#profileModal div:has(> .btn),
#profileModal div:has(> button) {
    flex-direction: column !important;
    gap: 10px !important;
    display: flex !important;
    width: 100% !important;
}

/* Butonların kendilerini tam genişlik yap */
#profileModal .btn,
#profileModal button,
#saveProfileBtn,
#changePasswordBtn,
#closeProfileModal {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    /* Gap ile hallediyoruz */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛍️ MODERN SİPARİŞ KARTI (My Orders)
   ═══════════════════════════════════════════════════════════════════════════ */

/* MODAL GENİŞLETME (3/1 Oranında / Daha Geniş) */
#ordersModal .modal-content,
#printRequestsModal .modal-content {
    max-width: 1000px !important;
    width: 95% !important;
    background: var(--surface) !important;
    /* Updated to match Product Modal */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    max-height: 85vh;
    /* Allow scrolling on mobile */
    overflow-y: auto;
}

.modern-order-card {
    background: var(--surface-light);
    /* Updated to match Product Gallery */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modern-order-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* --- HEADER --- */
.moc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.moc-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

/* --- BODY (5 Column Grid) --- */
.moc-body {
    display: grid;
    /* Date | Time | Name | Phone | Price */
    grid-template-columns: 0.8fr 0.5fr 1.3fr 1fr 0.8fr;
    gap: 15px;
    align-items: center;
}

.moc-info-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.address-group {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    margin-top: 5px;
}

.moc-value.small {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.moc-info-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.moc-value {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
}

.moc-value.mono {
    font-family: 'Inter', monospace;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}

.moc-value.price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4db8ff;
}

.price-group {
    text-align: right;
}

/* --- FOOTER (Buttons) --- */
.moc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

.moc-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.moc-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.moc-btn.secondary {
    background: rgba(77, 184, 255, 0.1);
    color: #4db8ff;
    border-color: rgba(77, 184, 255, 0.2);
}

.moc-btn.secondary:hover {
    background: rgba(77, 184, 255, 0.2);
    box-shadow: 0 0 12px rgba(77, 184, 255, 0.15);
}

.moc-btn.warning {
    background: rgba(255, 153, 0, 0.1);
    color: #ff9900;
    border-color: rgba(255, 153, 0, 0.2);
}

.moc-btn.warning:hover {
    background: rgba(255, 153, 0, 0.2);
}

.moc-btn.danger {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.2);
}

.moc-btn.danger:hover {
    background: rgba(255, 59, 48, 0.2);
}

/* --- UPDATED BUTTONS (Override) --- */
.moc-btn {
    width: 140px !important;
    height: 42px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-transform: capitalize;
    /* Changed from uppercase to Title Case */
    letter-spacing: 0.5px;
    padding: 0;
}

/* Detayları Gör: Mavi -> Hover: Beyaz */
.moc-btn.secondary {
    background: #4db8ff;
    color: #fff;
    border: 1px solid #4db8ff;
}

.moc-btn.secondary:hover {
    /* Match User Menu Hover */
    background: #fff;
    color: #4db8ff;
    border-color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(77, 184, 255, 0.3);
}

/* İptal Et: Kırmızı -> Hover: Gri */
.moc-btn.warning {
    background: #ff3b30;
    color: #fff;
    border: 1px solid #ff3b30;
}

.moc-btn.warning:hover {
    background: #fff;
    border-color: #ff3b30;
    color: #ff3b30;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3);
}

/* Sil: Danger Default */
/* Sil: Danger Default (Sepetteki Boşalt Gibi) */
.moc-btn.danger {
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
}

.moc-btn.danger:hover {
    background: #fff;
    border-color: #dc3545;
    color: #dc3545;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4);
}

/* --- STATUS PILLS --- */
.status-pill {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    /* Flex to center content easier if needed */
    justify-content: center;
    align-items: center;
    width: 160px;
    /* Fixed width for consistency */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: capitalize;
    /* 1. Capitalize first letter */
}

/* 2. COLORS RESTORED (Glassy) & EXPANDED */

/* 🔵 TALEPLER / BEKLEYEN (Sipariş Verildi) */
.status-pending,
.status-requested {
    background: rgba(77, 184, 255, 0.15);
    /* Blue */
    color: #4db8ff;
    border: 1px solid rgba(77, 184, 255, 0.3);
}

/* 🟠 TEKLİF AŞAMASI (3D - Teklif Gönderildi) */
.status-offer_sent {
    background: rgba(253, 126, 20, 0.15);
    /* Orange */
    color: #fd7e14;
    border: 1px solid rgba(253, 126, 20, 0.3);
}

/* 🟢 ONAY / KABUL (Sipariş Onaylandı / Teklif Kabul) */
/* TEAL kullanıyoruz ki Teslim Edildi (Yeşil) ile karışmasın */
.status-approved,
.status-offer_accepted {
    background: rgba(32, 201, 151, 0.15);
    /* Teal */
    color: #20c997;
    border: 1px solid rgba(32, 201, 151, 0.3);
}

/* 🟣 HAZIRLIK (Hazırlanıyor) */
.status-preparing {
    background: rgba(111, 66, 193, 0.15);
    /* Purple */
    color: #a29bfe;
    border: 1px solid rgba(111, 66, 193, 0.3);
}

/* 💎 KARGO (Kargoya Verildi) */
.status-shipped {
    background: rgba(0, 188, 212, 0.15);
    /* Cyan */
    color: #4dd0e1;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

/* 🏆 TESLİMAT (Teslim Edildi - Final Yeşil) */
.status-delivered {
    background: rgba(40, 167, 69, 0.15);
    /* Green */
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* 🔴 İPTAL (Sipariş İptal) */
.status-cancelled {
    background: rgba(255, 59, 48, 0.15);
    /* Red */
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.3);
}


/* --- Responsive Mobile --- */
@media (max-width: 600px) {
    .moc-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    .moc-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .moc-info-group {
        text-align: center;
        align-items: center;
    }

    .moc-info-group.price-group {
        text-align: center;
        margin-top: 5px;
    }

    .moc-value.price {
        font-size: 1.2rem;
    }

    .moc-footer {
        flex-direction: column;
        align-items: center;
        /* Ortala */
    }

    .moc-btn {
        width: auto !important;
        min-width: 200px;
        /* Çok dar olmasın */
        text-align: center;
        padding: 12px;
    }

    /* 🔄 Değerlendirmelerim Mobil Düzeltme */
    #myReviewsModal .print-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    #myReviewsModal .print-item-left {
        width: 100% !important;
        min-width: 0 !important;
    }

    #myReviewsModal .print-title {
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }

    #myReviewsModal .print-date {
        font-size: 0.8rem !important;
    }

    #myReviewsModal .print-item-right {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-left: 0 !important;
    }

    #myReviewsModal .print-item-right img {
        width: 50px !important;
        height: 50px !important;
    }

    #myReviewsModal .print-item .print-btn {
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
        min-width: 90px !important;
    }
}

/* FIX: Sepete Ekle - Hover Border Blue */
.btn.success:hover,
#addToCartFromPage:hover,
#productModal .btn.success:hover {
    border: 1px solid #4db8ff !important;
    background: #fff !important;
    color: #4db8ff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛒 SİPARİŞ DETAY MODALI (Modern Gray Grid)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ✅ SİPARİŞ DETAY MODALI GENİŞLİK AYARI (Index & Product) */
#orderDetailModal .modal-content {
    max-width: 900px !important;
    width: 95% !important;
}

/* ✅ ORDER ITEM TITLE HOVER (Shared) */
.admin-product-title {
    transition: color 0.2s ease;
}

.admin-product-title:hover {
    color: #4db8ff !important;
}

.order-detail-grid {
    display: grid;
    /* Left is larger for products */
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: stretch;
    /* EQUAL HEIGHT */
}

@media (max-width: 900px) {
    .order-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* KARTLAR (Sol & Sağ) */
.detail-left,
.detail-right {
    background: var(--surface);
    /* Checkout Card Style Match */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    /* FLEX FILL HEIGHT */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* SOL: Ürünler Listesi Scrollable */
.order-items-scrollable {
    max-height: 400px;
    /* Yaklaşık 3 ürün */
    overflow-y: auto;
    padding-right: 8px;
    /* Scrollbar payı */
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Webkit Scrollbar */
.order-items-scrollable::-webkit-scrollbar {
    width: 6px;
}

.order-items-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.order-items-scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

/* Başlık ve Metinler */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .detail-header {
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Başlık ve alt başlığı içeren wrapper div */
    .detail-header>div {
        width: 100%;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center !important;
    }

    .detail-title {
        text-align: center !important;
        width: 100%;
    }

    .detail-subtitle {
        display: block;
        margin-top: 4px;
        text-align: center !important;
        width: 100%;
    }

    .status-badge,
    .status-pill {
        margin: 5px auto 0 auto !important;
        text-align: center !important;
    }

    /* Modal başlığını da ortala */
    .modal-color h2,
    .modal-order h2,
    #popupTitle {
        text-align: center !important;
        width: 100%;
        display: block;
    }
}

.detail-title {
    font-weight: 800;
    color: #4db8ff;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.detail-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Bilgi Kutucukları (Sağ Taraf) */
.detail-info-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.info-label {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

/* Bilgi kutularının içeriği - Admin notuyla aynı stil */
.detail-info-box>div:not(.info-label),
.detail-info-box>span:not(.info-label) {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #fff;
}

/* Toplam Alanı */
.detail-total-area {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛒 SİPARİŞ DETAY MODALI - ÖZEL GÖRÜNÜM (FIX)
   ═══════════════════════════════════════════════════════════════════════════ */

#orderDetailModal .modal-content,
#orderDetailModal .print-requests-content {
    /* 1. Genişlik: 2 katına çıkar (500px -> 1000px) */
    max-width: 1000px !important;
    width: 95% !important;

    /* 2. Arkaplan: Modern Gri (Purple #221b33 yerine) */
    background: var(--surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    border-radius: 20px !important;

    /* 3. Scroll & Yükseklik */
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
}

#orderDetailModal .print-requests-footer {
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px;
    width: 100%;
}

/* Force Left Align for texts */
#orderDetailModal .detail-left,
#orderDetailModal .detail-right,
#orderDetailModal .detail-info-box,
#orderDetailModal .info-label,
#orderDetailModal div {
    text-align: left !important;
}

/* Close Button Style (Gray Pill) */
#orderDetailModal #closeOrderDetailModal {
    background: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: #fff !important;
    padding: 12px 50px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
    width: auto !important;
    min-width: 150px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#orderDetailModal #closeOrderDetailModal:hover {
    background: #4db8ff !important;
    border-color: #4db8ff !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 SİPARİŞ DETAY - MOBİL ÜRÜN KARTI DÜZENİ
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Ana kart yapısı - dikey düzen */
    .order-item-frame {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    /* ÜST KISIM: Resim + Fiyat yan yana */
    .order-item-frame .order-item-right {
        order: -1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 12px !important;
        text-align: left !important;
        min-width: unset !important;
    }

    /* Resim - daha büyük */
    .order-item-frame .order-item-right img {
        width: 80px !important;
        height: 80px !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Fiyat - Ürün adıyla aynı boyutta, beyaz, sağa hizalı */
    .order-item-frame .order-item-right>div:last-child {
        font-size: 0.95rem !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-align: right !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* ALT KISIM: Ürün Bilgileri (mevcut bilgiler korunuyor) */
    .order-item-frame .order-item-info {
        width: 100% !important;
        order: 1 !important;
    }

    /* BAŞLIK: Mobilde "Teslimat ve İletişim" göster */
    .detail-right .title-desktop {
        display: none !important;
    }

    .detail-right .title-mobile {
        display: inline !important;
    }
}

/* Web (Desktop): Başlık görünürlüğü */
.detail-right .title-desktop {
    display: inline;
}

.detail-right .title-mobile {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL - TUTAR ALANI HIZALAMA (TL alt satıra geçmesin)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Toplam satırlarını daralt ve değerlerin sarmasını engelle */
    .detail-total-area .order-total-row {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .detail-total-area .order-total-row span:last-child,
    .detail-total-area .order-total-amount {
        white-space: nowrap !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    /* Sol etiketleri biraz daralt */
    .detail-total-area .order-total-row span:first-child {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 0.85rem !important;
    }

    /* Değerlendirme başlığı yatay ortala - AGGRESSIVE FIX */
    .product-review-block .review-header {
        display: flex !important;
        width: auto !important;
        margin: -16px -50px 12px -50px !important;
        /* Force overflow, parent will clip */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        background-size: cover;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        /* Let parent radius clip it */
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   🏠 ADRES MODAL STİLLERİ - KULLANICI ODAKLI (FIX V3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal Container */
#addressModal .bg-white {
    background: var(--surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

#addressModal h2 {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* 1️⃣ EMPTY STATE (Boş Durum): Koyu Zemin / Beyaz Yazı */
#addressModal input,
#addressModal select {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    transition: none;
    /* Flicker olmaması için transition kapalı */
}

/* 2️⃣ FILLED STATE (Dolu Durum): Beyaz Zemin / Siyah Yazı */
/* !important ile her durumu (focus dahil) ezmesi garanti altına alınır */
#addressModal input.filled {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500;
}

/* Select dolu olsa bile koyu kalsın (Dropdown okunabilirliği için) */
#addressModal select.filled {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500;
}

/* 3️⃣ FOCUS STATE */
/* Sadece border rengini değiştirir, arkaplan rengi .filled sınıfına göre belirlenir */
#addressModal input:focus,
#addressModal select:focus {
    border-color: #4db8ff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(77, 184, 255, 0.2) !important;
}

/* 4️⃣ PLACEHOLDERS */
#addressModal input::placeholder,
#addressModal select::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 5️⃣ DROPDOWN OPTIONS */
#addressModal select option {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
}

/* 6️⃣ AUTOFILL FIX */
#addressModal input:-webkit-autofill,
#addressModal input:-webkit-autofill:hover,
#addressModal input:-webkit-autofill:focus,
#addressModal input:-webkit-autofill:active {
    /* Autofill olduğunda da koyu başlat, ama JS .filled eklerse o kazanır */
    -webkit-box-shadow: 0 0 0 30px #1a1625 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Autofill + Filled durumu için (JS .filled eklediğinde) */
#addressModal input.filled:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: black !important;
}

/* 7️⃣ BUTTONS */
#addressModal .btn-blue {
    background: #4db8ff !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
}

#addressModal .btn-blue:hover {
    background: #3badf8 !important;
}

#addressModal .btn-grayblue {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

#addressModal .btn-grayblue:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* 8️⃣ TEXT OVERRIDES */
#addressList p {
    color: #a1a1aa !important;
}

#addressModal .text-gray-800,
#addressList .text-gray-800 {
    color: #e4e4e7 !important;
}

#addressModal .border-gray-200,
#addressList .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 9️⃣ ADDRESS LIST HOVER */
.address-item {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Standart kenarlık */
}

/* Hover olduğunda arka plan hafif açılsın */
.address-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(77, 184, 255, 0.3) !important;
}

/* 🔟 BUTTON UPDATES (User Request: "Yeni" butonu gibi olsun) */
/* 🔟 BUTTON UPDATES (User Request: "Yeni" butonu gibi olsun) */
#addressModal #saveAddressBtn {
    background: #4db8ff !important;
    /* Mavi */
    color: #fff !important;
    font-weight: 600;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    /* Tam Yuvarlak (Pill) */
    transition: all 0.2s ease;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.3);
}

#addressModal #saveAddressBtn:hover {
    background: #ffffff !important;
    /* Hover da beyaz */
    color: #4db8ff !important;
    /* Yazı mavi */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 184, 255, 0.4);
}

/* Kapat Butonu - User Request: "Maviye Dönmeli" */
#addressModal #closeAddressModal {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    /* Tam Yuvarlak (Pill) */
    font-weight: 600;
}

#addressModal #closeAddressModal:hover {
    background: #4db8ff !important;
    /* Mavi arkaplan */
    color: #fff !important;
    /* Beyaz yazı */
    border-color: #4db8ff !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.3);
}

/* Admin Product Title Styling */
.admin-product-title {
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.admin-product-title:hover {
    color: #4db8ff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ PUBLIC REVIEW CARD - Ürün sayfasındaki değerlendirme kartı
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ana Kart Konteyneri */
.public-review-card {
    background: var(--surface-light);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 0;
    margin-top: 8px;
    overflow: hidden;
}

/* Kutu Elemanları */
.public-review-box {
    padding: 18px 22px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.public-review-box:first-child {
    background: rgba(255, 255, 255, 0.02);
}

.public-review-box:last-child {
    border-bottom: none;
    background: rgba(255, 255, 255, 0.01);
}

/* Üst Bar - Skor ve Tümü Butonu */
.public-review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.public-review-score {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffa04d;
    font-size: 1rem;
}

.public-review-score .avg {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.public-review-score .count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* Butonlar */
.public-review-btn {
    background: rgba(77, 184, 255, 0.15);
    border: 1px solid rgba(77, 184, 255, 0.3);
    color: #4db8ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.public-review-btn:hover {
    background: #4db8ff;
    color: #fff;
    border-color: #4db8ff;
}

/* Meta Bilgi - Kullanıcı ve Tarih */
.public-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.public-review-meta .review-user {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.public-review-meta .review-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* Yorum Metni */
.public-review-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}

.public-review-text .comment-short,
.public-review-text .comment-full {
    margin: 0;
}

/* Detay Satırları */
.public-review-expand {
    background: rgba(0, 0, 0, 0.2);
}

.public-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.public-review-row:last-child {
    border-bottom: none;
}

.public-review-row .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.public-review-row .val {
    color: #ffa04d;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ☀️ Light Theme Overrides for Public Review Card */
[data-theme="light"] .public-review-card {
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .public-review-box {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .public-review-score .avg {
    color: #1a1a2e;
}

[data-theme="light"] .public-review-score .count {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .public-review-meta .review-user {
    color: #1a1a2e;
}

[data-theme="light"] .public-review-meta .review-date {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .public-review-text {
    color: #334155;
}

[data-theme="light"] .public-review-expand {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .public-review-box:first-child {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .public-review-row {
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-bottom-width: 2px;
}

[data-theme="light"] .public-review-box {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .public-review-row .label {
    color: rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📋 PUBLIC REVIEWS OVERLAY - Tüm Değerlendirmeler Modalı
   ═══════════════════════════════════════════════════════════════════════════ */

.public-reviews-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

.public-reviews-overlay.hidden {
    display: none !important;
}

.public-reviews-panel {
    background: rgba(35, 35, 45, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.public-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.public-reviews-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.public-reviews-close {
    background: #6c757d;
    border: 2px solid #6c757d;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.public-reviews-close:hover {
    background: #4db8ff;
    border-color: #4db8ff;
    color: #fff;
    transform: translateY(-2px);
}

.public-reviews-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Liste Elemanları */
.public-reviews-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.public-reviews-item:last-child {
    margin-bottom: 0;
}

.public-reviews-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.public-reviews-item-top .review-user {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.public-reviews-item-top .review-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.public-reviews-item-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.public-reviews-item-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.public-reviews-subrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.public-reviews-subrow .label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.public-reviews-subrow .val {
    color: #ffa04d;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Navigasyon */
.public-reviews-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 16px;
}

.public-reviews-btn {
    background: #4db8ff;
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-reviews-btn:hover:not(:disabled) {
    background: #ffffff;
    color: #4db8ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(77, 184, 255, 0.4);
}

.public-reviews-btn:active:not(:disabled) {
    transform: translateY(0);
}

.public-reviews-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.public-reviews-index {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ☀️ Light Theme Overrides for Overlay */
[data-theme="light"] .public-reviews-panel {
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .public-reviews-head {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .public-reviews-title {
    color: #1a1a2e;
}

[data-theme="light"] .public-reviews-item {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
}

[data-theme="light"] .public-reviews-item-top .review-user {
    color: #1a1a2e;
}

[data-theme="light"] .public-reviews-item-top .review-date {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .public-reviews-item-text {
    color: #334155;
}

[data-theme="light"] .public-reviews-subrow .label {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .public-reviews-index {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .public-reviews-nav {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎭 HB ALL REVIEWS MODAL - Alternatif Modal Stili
   ═══════════════════════════════════════════════════════════════════════════ */

.hb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

.hb-modal {
    background: rgba(35, 35, 45, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 550px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hb-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hb-modal-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.hb-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.hb-modal-close:hover {
    background: #ff6b6b;
}

.hb-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.hb-all-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hb-all-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
}

.hb-all-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hb-all-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.hb-all-stars {
    color: #ffa04d;
    font-weight: 600;
}

.hb-all-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ☀️ Light Theme Overrides for HB Alternative Modal */
[data-theme="light"] .hb-modal {
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .hb-modal-head {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hb-modal-title {
    color: #1a1a2e;
}

[data-theme="light"] .hb-all-item {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
}

[data-theme="light"] .hb-all-name {
    color: #1a1a2e;
}

[data-theme="light"] .hb-all-text {
    color: #334155;
}

[data-theme="light"] .hb-all-sub {
    color: rgba(0, 0, 0, 0.5) !important;
}


/* 🔧 Fix: Ensure Product Description is NOT truncated in Modals */
#productDescription,
#productDescription p,
#productDescription div {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: vertical !important;
    height: auto !important;
    max-height: none !important;
}