/* ====================================================================
   MASAÜSTÜ VE GENEL ARAYÜZ (DESKTOP & GLOBAL)
   Mevcut yapın birebir korundu.
==================================================================== */

/* BREADCRUMB */
.nevi-breadcrumb {
    margin-top: 15px;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 1px solid var(--flora-border);
}

.nevi-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
}

.nevi-breadcrumb li {
    display: flex;
    align-items: center;
    color: #64748b;
}

.nevi-breadcrumb li a {
    color: #64748b;
    text-decoration: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nevi-breadcrumb li a:hover {
    color: var(--flora-green-primary);
}

.nevi-breadcrumb li.active {
    color: var(--flora-green-dark);
    font-weight: 600;
}

/* GENEL GRID VE SOL SÜTUN */
.urun-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
    box-sizing: border-box;
}

/* Görsel alan (Masaüstü için yapışkan) */
.product-gallery-sticky {
    position: sticky;
    top: 20px;
    z-index: 10;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: row-reverse;
    gap: 15px;
    align-items: flex-start;
}

.main-image-wrapper {
    width: 75%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #f8fafc;
    border: 1px solid var(--flora-border);
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
}

.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #1e293b;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 0.5px;
}

.thumbnails-grid {
    width: 15%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Eğer thumbnail yoksa (main-image-wrapper tek çocuksa) ana görsel tam genişlik kaplasın */
.product-gallery-sticky .main-image-wrapper:only-child {
    width: 100%;
}

.thumbnails-grid::-webkit-scrollbar {
    width: 4px;
}

.thumbnails-grid::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.thumb-item {
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
    background: #fff;
    flex-shrink: 0;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--flora-green-primary);
    opacity: 1;
}

/* SAĞ SÜTUN BİLGİLER */
.product-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--flora-green-dark);
    margin-bottom: 10px;
    line-height: 1.2;
}

.rating-box {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.rating-box .stars {
    color: #f59e0b;
    margin-right: 8px;
    font-size: 1.1rem;
}

.rating-box .rating-text {
    color: #64748b;
    font-weight: 500;
}

.price-container {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--flora-border);
}

.current-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--flora-green-primary);
    font-family: var(--font-heading);
}

.old-price {
    font-size: 1.2rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.coupon-alert {
    background: #fef2f2;
    border: 1px dashed #ef4444;
    color: #be123c;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* VARYANTLAR */
.variants-section {
    margin-bottom: 30px;
}

.variants-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.variant-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--flora-border);
    border-radius: 10px;
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
}

.variant-card:hover {
    border-color: var(--flora-green-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.variant-card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 12px;
    border: 1px solid #f1f5f9;
}

.v-info {
    display: flex;
    flex-direction: column;
}

.v-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
    margin-bottom: 3px;
}

.v-price {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--flora-green-primary);
}

/* BÖLGE VE UYARILAR */
#regionSelectorContainer>div {
    grid-template-columns: 1fr !important;
    display: block !important;
}

#regionSelectorContainer .bolge-guven-bar,
#regionSelectorContainer .sag-guven,
#regionSelectorContainer .trust-badges,
#regionSelectorContainer>div>div:nth-child(2) {
    display: none !important;
}

.region-error {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.region-error p {
    color: #ef4444;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.region-error a {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    transition: 0.2s;
}

.region-error a:hover {
    background: #dc2626;
}

.status-alert {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    border: 1px solid transparent;
    font-size: 1.1rem;
}

.status-alert i {
    font-size: 2.5rem;
}

.alert-warning {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}

.alert-danger {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}

/* KİŞİSELLEŞTİRME */
.custom-note-input {
    border-radius: 12px;
    padding: 15px;
    border-color: var(--flora-border);
    background: #f8fafc;
    font-weight: 500;
}

.custom-note-input:focus {
    background: #fff;
    border-color: var(--flora-green-primary);
    outline: none;
}

/* TARİH VE SAAT SEÇİCİ */
.section-label {
    font-weight: 800;
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 12px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-selector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.ds-item {
    background: #fff;
    border: 1px solid var(--flora-border);
    border-radius: 12px;
    padding: 12px 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 85px;
    position: relative;
    overflow: hidden;
}

.ds-item:hover {
    border-color: var(--flora-green-primary);
    background: #f0fdf4;
}

.ds-item.active {
    border-color: var(--flora-green-primary);
    background: #ecfdf5;
    box-shadow: 0 0 0 2px var(--flora-green-primary) inset;
}

.ds-top {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 700;
}

.ds-day {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 2px 0;
}

.ds-month {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.date-icon {
    font-size: 1.8rem;
    color: #2563eb;
    margin-bottom: 5px;
}

.date-text {
    font-weight: 700;
    font-size: 0.8rem;
    color: #2563eb;
}

#customDateInput {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    display: none;
    margin-bottom: 25px;
}

.time-btn {
    background: #fff;
    border: 1px solid var(--flora-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.time-btn:hover:not(.disabled) {
    border-color: var(--flora-green-primary);
}

.time-btn.active {
    background: #ecfdf5;
    border-color: var(--flora-green-primary);
    color: var(--flora-green-dark);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
}

.time-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: #f1f5f9;
    text-decoration: line-through;
    color: #94a3b8;
}

/* AKSİYONLAR VE GÜVENLİK */
.btn-siparis {
    background: #2563eb;
    color: #fff;
    border: none;
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.btn-siparis:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
}

.trust-badges {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #10b981;
    font-weight: 600;
    margin: 25px 0;
    padding: 0 10px;
}

.trust-badges i {
    margin-right: 5px;
    font-size: 1.1rem;
}

.visual-approval-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 15px 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.visual-approval-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--flora-green-primary);
}

.va-header {
    font-weight: 800;
    font-size: 1rem;
    color: #166534;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.va-text {
    font-size: 0.85rem;
    color: #15803d;
    line-height: 1.5;
    margin: 0;
}

.delivery-disclaimer {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}

.info-icon {
    font-size: 1.4rem;
    color: #94a3b8;
    flex-shrink: 0;
    margin-top: 2px;
}

.payment-footer-img {
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0.8;
}

/* ALT SEKMELER (TABS) */
.product-tabs-container {
    margin-top: 50px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--flora-border);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--flora-border);
    background: #f8fafc;
}

.tab-btn {
    flex: 1;
    padding: 18px 15px;
    background: transparent;
    border: none;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.95rem;
}

.tab-btn.active {
    color: var(--flora-green-primary);
    background: #fff;
    border-bottom: 3px solid var(--flora-green-primary);
}

.tab-btn:hover:not(.active) {
    color: #334155;
}

.tab-content {
    padding: 30px;
    display: none;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.8;
}

.tab-content.active {
    display: block;
}

.review-item {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.review-item:last-child {
    border: none;
    margin: 0;
    padding: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    align-items: center;
}

.review-header strong {
    color: #334155;
}

.review-header .stars {
    color: #f59e0b;
    font-size: 0.9rem;
}

.review-text {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
}


/* ====================================================================
   MOBİL ÖZEL ARAYÜZ (NATIVE APP UI) - SIFIRDAN KUSURSUZ YAPI
   Buradaki kodlar masaüstünü ezerek yepyeni bir mobil deneyim oluşturur.
==================================================================== */

@media (max-width: 992px) {

    /* Yatay taşmaları kökten engelleyen body güvenlik kilidi */
    html, body { max-width: 100vw; overflow-x: hidden; }

    /* Sayfa sonu boşluğu: Sabit buton yerine organik buton kullandığımız için boşluğu daralttık */
    .urun-detail-grid { padding-bottom: 20px; display: block !important; margin-bottom: 20px; }

    /* =======================================================
       1. GALERİ: TAM EKRAN (EDGE-TO-EDGE) VE KATI 3:4 ORAN
       ======================================================= */
    .product-gallery-sticky {
        position: relative !important; top: 0 !important; display: flex; flex-direction: column;
        margin-left: -15px !important; margin-right: -15px !important; width: calc(100% + 30px) !important;
        margin-bottom: 20px; gap: 10px; z-index: 1;
    }

    .main-image-wrapper {
        width: 100% !important; max-width: 100% !important; border-radius: 0 !important;
        border: none !important; aspect-ratio: 3 / 4 !important; height: auto !important; max-height: none !important; margin: 0 !important;
    }
    .main-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

    .thumbnails-grid {
        width: 100% !important; flex-direction: row !important; padding: 0 15px !important;
        box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; justify-content: flex-start;
    }

    .thumb-item { width: 75px !important; height: auto !important; aspect-ratio: 3 / 4 !important; flex-shrink: 0; border-radius: 8px; }

    /* =======================================================
       2. BİLGİLER, TİPOGRAFİ VE SEÇİCİLER (MOBİL ERGONOMİSİ)
       ======================================================= */
    .product-details { padding: 0; }
    .product-title { font-size: 1.4rem; margin-bottom: 8px; }
    .price-container { padding: 12px 15px; margin-bottom: 15px; gap: 8px; }
    .current-price { font-size: 1.6rem; }
    .old-price { font-size: 1.1rem; }

    /* Dokunmatik hedefler (Touch Targets) - Parmakla rahat basılması için */
    .date-selector-grid { gap: 8px; }
    .ds-item { height: 75px; padding: 8px 2px; }
    .ds-day { font-size: 1.3rem; }
    .time-grid { gap: 10px; }
    .time-btn { padding: 14px 8px; font-size: 0.95rem; }

    .tab-buttons { flex-wrap: wrap; }
    .tab-btn { font-size: 0.85rem; padding: 12px 5px; flex: 1 1 33%; text-align: center; }
    .tab-content { padding: 15px; font-size: 0.9rem; }
    .nevi-breadcrumb { margin-top: 5px; margin-bottom: 15px; padding: 10px 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .nevi-breadcrumb ol { flex-wrap: nowrap; }

    /* =======================================================
       3. BÖLGE SEÇİMİ AÇILIR KUTUSU (MÜKEMMEL ÇÖZÜM)
       Açılan liste her şeyin üzerinde, tam ekran hissiyatı verir.
       ======================================================= */
    #regionSelectorContainer {
        position: relative !important;
        z-index: 999999 !important; /* Tüm sayfanın efendisi */
        margin-bottom: 25px;
    }
    
    /* Select2 (veya kendi özel bölge seçicin) açıldığında ekranı kaplaması ve üstte durması */
    .select2-container--open, 
    .custom-select-list, 
    #bolgeList {
        z-index: 9999999 !important;
        position: absolute !important;
        max-height: 40vh; /* Mobilde klavye açılınca ekrana sığsın diye */
        overflow-y: auto !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
        border-radius: 12px !important;
    }

    /* =======================================================
       4. ORGANİK SİPARİŞ BUTONU (YAPIŞKAN DEĞİL, FORMA ENTEGRE)
       Sabit butonu iptal ettik, çünkü mobilde klavye ve dropdownlarla her zaman savaşır.
       Yerine kocaman, göz alıcı ve formun hemen altında (akışın içinde) duran bir buton tasarladık.
       ======================================================= */
    #submitOrderBtn {
        position: relative !important; /* Fixed yerine Relative yaptık, ekrana yapışmaz! */
        width: 100% !important;
        border-radius: 16px !important; /* Yuvarlak, estetik hatlar */
        z-index: 10 !important; /* Bölge seçicinin ÇOK ALTINDA kalır, asla çakışmaz */
        padding: 18px !important;
        font-size: 1.15rem !important;
        margin-top: 25px !important; /* Saat seçiminin hemen altına boşluk bırakarak yerleşir */
        margin-bottom: 15px !important;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
        background-color: var(--primary-color, #2563eb) !important; /* Marka rengin */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* Formun kendisine ekstra alt boşluk (Nefes payı) */
    #addToCartForm {
        padding-bottom: 10px !important;
    }
}