/* ============================================================================
   Merter — Zeomart teması üzerine YALNIZCA renk override.
   İlke: Tema 1:1. Hiçbir ölçü/genişlik/font SABİTLENMEZ (responsive korunur).
   Tema zaten amber'i (var(--merter-amber)) kullanıyor → AYNEN kalır.
   Yalnız mor #443297 → #5a1e59 (+ tonları) çevrilir.
   ============================================================================ */

:root {
    --merter-purple: #5a1e59;     /* tema #443297 yerine */
    --merter-purple-d: #4a1648;   /* tema #3a298d yerine */
    --merter-purple-l: #6a3469;   /* tema #6668b2 yerine */
    /* Yumuşak mor tonları — STATİK fallback (eski tarayıcı). color-mix override @supports'ta (aşağıda).
       Statikler = color-mix(in srgb, mor X%, #fff) çıktısının birebir hex karşılığı (beyaz zeminde aynı). */
    --merter-purple-soft: #d1c0d1;   /* ≈ mor 28% + beyaz → açık mor border */
    --merter-purple-bg:   #f2edf2;   /* ≈ mor 8%  + beyaz → çok açık mor zemin */
    --merter-purple-bg-h: #e8e0e8;   /* ≈ mor 14% + beyaz → zemin hover */
    --merter-surface-muted: #f3f5f6; /* alt header + footer açık gri zemin */
    --merter-gutter: clamp(12px, 2.5vw, 48px);   /* site geneli kenar boşluğu (fluid, kısa) */
    --merter-container-max: 1600px;             /* içerik tavanı (sektör std; ötesi ortalanır) */
    --merter-drawer-w: clamp(240px, 80vw, 368px);/* mobil menü drawer genişliği (tema 80%/240-368px eşdeğeri) */
    /* Anasayfa mobil "ekranı slider+story doldursun" hesaplaması — CİHAZ boyuna göre
       değil, TASARIM boyuna göre sabit (header/story içeriği değişmedikçe geçerli;
       değişirse bu iki değer güncellenir). Slider yüksekliği 100dvh'den bunlar
       düşülerek hesaplanır → farklı ekran boylarına otomatik uyum sağlar. */
    --merter-mobile-header-h: 85px;   /* app-bar (quick-filter tabbar kaldırıldı, artık tek satır) */
    --merter-mobile-story-h: 168px;   /* kategori dairesi (104px) + başlık + section padding */

    /* Fluid spacing — TEK ramp; hepsi ~992'de max'a pinlenir ("desktop-pinned"):
       ≥992 masaüstü = max (px, AYNEN korunur), <992 oransal küçülür (mobil sıkışır).
       Kural: vw katsayısı ≈ max ÷ 992 × 100 → clamp max'ı 992'den hemen önce yakalanır. */
    --merter-space-xs:  clamp(6px,  1.2vw, 12px);
    --merter-space-sm:  clamp(10px, 1.6vw, 16px);
    --merter-space-md:  clamp(16px, 2.4vw, 24px);
    --merter-space-lg:  clamp(16px, 3.2vw, 32px);
    --merter-space-xl:  clamp(28px, 5.6vw, 56px);
    --merter-space-2xl: clamp(16px, 3vw, 30px); /* rezerv; anasayfa bölüm arası artık --merter-space-lg */
    /* İçerik → footer üst kenarı — TEK kaynak (sayfa pb40/50/60/70 karışmasın). */
    --merter-footer-gap: 60px;

    /* Fluid tipografi — TABAN vw (her tarayıcı); vi override @supports'ta (aşağıda).
       NEDEN @supports: var() içindeki vi'yi eski tarayıcı çözemezse "invalid at computed-value time"
       olur ve cascade'deki önceki değere DÜŞMEZ → token'ı vw ile kurup vi'yi koşullu ezmek tek doğru yol.
       min/max rem → zoom + kullanıcı font ayarı güvenli; 16px kökte eski sabitlerle BİREBİR.
       LTR sitede 1vi == 1vw → masaüstü görünüm değişmez; vi yalnız dikey yazımda fark eder (ileriye dönük).
       WCAG 1.4.4: max ≤ 2.5×min (hepsi güvenli). */
    --merter-fs-h1: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);     /* 28→44 */
    --merter-fs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);       /* 22→32 */
    --merter-fs-h3: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);      /* 19→24 */
    --merter-fs-h4: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);     /* 16→19 */
    --merter-fs-h5: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15→17 */
    --merter-fs-h6: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);/* 13→15 */
    --merter-fs-body: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);   /* 14→16 */
    --merter-fs-small: clamp(0.75rem, 0.8rem + 0.1vw, 0.875rem); /* 12→14 */

    /* Başlık ağırlığı/rengi — TEK kaynak; tüm h1-h6 + Merter title class'ları buradan besleniyor. */
    --merter-fw-heading: 600;   /* ana başlık ağırlığı */
    --merter-fw-label: 600;     /* isim/etiket tipi ikincil metin (ör. blog yazarı, sepet adı) */
    --merter-heading-color: #140202; /* kanonik başlık rengi (Figma) */

    /* Köşe yarıçapı — TEK ölçek; dağınık 6/7/8/10/12/14/16/20/26/30/999px değerleri bunlara toplanır.
       50% (daire/avatar) ve tekil dekoratif 2-4px kullanımları kasıtlı olarak DIŞINDA (token adayı değil). */
    --merter-radius-sm: 8px;    /* küçük kutu/görsel köşesi (thumbnail, kompakt buton/menü) */
    --merter-radius-md: 10px;   /* orta kutu (satır, not kutusu, adres kartı) */
    --merter-radius-lg: 12px;   /* büyük konteyner (vendor grup, özet kutusu, checkout bölümü) */
    --merter-radius-xl: 14px;   /* yüzey/modal (auth kart, modal, faq/newsletter yüzeyi) */
    --merter-radius-pill: 999px;/* tam yuvarlak — pill/chip/badge/switch (yükseklik/2'yi her zaman aşar) */

    /* Renk paleti — Adım 1: en sık tekrar eden yapısal hex'ler tek kaynağa toplandı.
       Değerler ESKİ sabitlerle BİREBİR aynı → görsel değişim yok, sadece tek noktadan
       yönetim (tema rengi artık burada değişir). Round-trip testiyle doğrulandı
       (tools/tokenize-colors.mjs). Yakın-ikiz griler (#9a9aa6/#9a9aa8/#8a8a98) ve
       çok sayıdaki açık yüzey tonu HENÜZ toplanmadı — onları birleştirmek pixel'i
       değiştirebilir (görsel etkili → ayrı adım/görsel kontrol gerekir). */
    --merter-ink:    #1a2238;  /* baskın koyu metin/başlık — en sık (137×) */
    --merter-navy:   #041e42;  /* lacivert — çip metni, amber üstü metin (17×) */
    --merter-text:   #4a4a57;  /* gövde metni grisi (17×) */
    --merter-line:   #ececf1;  /* birincil ince kenarlık (47×) */
    --merter-line-2: #e6e6ec;  /* ikincil kenarlık tonu (39×) */
    --merter-amber:  #f5c34b;  /* vurgu sarısı — önceden yalnız var() fallback'ıydı (20×) */
}

/* vi (logical inline) — yazma yönü/zoom'da vw'den sağlam. Destekleyen tarayıcıda tipografiyi vi'ye yükselt. */
@supports (width: 1vi) {
    :root {
        --merter-fs-h1: clamp(1.75rem, 1.4rem + 1.8vi, 2.75rem);
        --merter-fs-h2: clamp(1.375rem, 1.1rem + 1.1vi, 2rem);
        --merter-fs-h3: clamp(1.1875rem, 1rem + 0.6vi, 1.5rem);
        --merter-fs-h4: clamp(1rem, 0.95rem + 0.3vi, 1.1875rem);
        --merter-fs-h5: clamp(0.9375rem, 0.9rem + 0.2vi, 1.0625rem);
        --merter-fs-h6: clamp(0.8125rem, 0.78rem + 0.2vi, 0.9375rem);
        --merter-fs-body: clamp(0.875rem, 0.85rem + 0.15vi, 1rem);
        --merter-fs-small: clamp(0.75rem, 0.8rem + 0.1vi, 0.875rem);
    }
}

/* color-mix destekleyen tarayıcıda yumuşak mor tonlarını tek kaynaktan (--merter-purple) türet →
   mor değişince tonlar otomatik güncellenir. Desteklemeyende yukarıdaki statik hex'ler kalır. */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --merter-purple-soft: color-mix(in srgb, var(--merter-purple) 28%, #fff);
        --merter-purple-bg:   color-mix(in srgb, var(--merter-purple) 8%, #fff);
        --merter-purple-bg-h: color-mix(in srgb, var(--merter-purple) 14%, #fff);
    }
}

body { background: #fff; }

/* ---- #443297 → mor ---- */
.text-thm1 { color: var(--merter-purple) !important; }
.bgc-thm1 { background-color: var(--merter-purple) !important; }

/* Banner CTA butonları — tema mor'u yerine hep sarı (amber), diğer amber butonlarla aynı. */
.btn-thm2 { background-color: var(--merter-amber, #f5c34b); border-color: var(--merter-amber, #f5c34b); color: var(--merter-navy); }
.btn-thm2:before { background-color: #e8b336; }
.btn-thm2:hover, .btn-thm2:active, .btn-thm2:focus { color: var(--merter-navy); }

.header_middle { background-color: var(--merter-purple); }
.menu_style_home_one { background-color: var(--merter-purple); }

.advscrh_frm_btn .search-btn { color: var(--merter-purple); }

/* Header orta düzeni — logo | arama (sol hiza) | widget; alt nav aynı kolon yapısını paylaşır. */
.merter-header-row .header_middle_advnc_search { width: 100%; }
.merter-header-row .search_form_wrapper { max-width: 640px; margin: 0; }
/* Sol marka kolonu sabit → üst/alt orta kolon aynı X'ten başlar (search ↔ nav linkleri hizası). */
.merter-header-brand-col {
    flex: 0 0 148px;
    width: 148px;
    max-width: 148px;
}
.merter-header-brand-col .logo img { max-width: 130px; width: 100%; height: auto; display: block; }
.mobile-menu .mobile_menu_bar a.mobile_logo img { max-height: 42px; width: auto; }
.footer_logo img { max-width: 150px; height: auto; }
.merter-header-main-col { min-width: 0; }
.merter-nav-row { flex-wrap: nowrap; }
.merter-header-row .form-search > .row { flex-wrap: nowrap; align-items: stretch; margin: 0; }
.merter-header-row .form-search .top-search { width: 100%; }
.merter-header-row .form-search .box-search { width: 100%; }
.merter-header-row .form-search .box-search .form_control { width: 100%; }
/* Kategori seçici "Tüm Kategoriler" tam görünsün — selectpicker kesmesin */
.merter-header-row .actegory .bootstrap-select { width: auto !important; height: 100%; }
.merter-header-row .actegory .bootstrap-select > button { min-width: 165px; height: 100%; display: flex; align-items: center; }
.merter-header-row .actegory .filter-option-inner-inner { overflow: visible; white-space: nowrap; }
/* Sol başlık "Tüm Kategoriler" siyah + dikeyde ortalı (gri/yukarı-takılı görünümü düzelt) */
.merter-header-row .actegory .bootstrap-select > button,
.merter-header-row .actegory .filter-option-inner-inner { color: var(--merter-ink) !important; font-weight: 500; }
/* Buton (35px) beyaz kutudan (55px) kısa → col-auto içinde üste yapışıyordu.
   Kategori kolonunu dikeyde ortala → "Tüm Kategoriler" tam ortada. */
.merter-header-row .form-search > .row > .col-auto:first-child { display: flex; align-items: center; }
/* Sarı arama butonu beyaz kutuyu tam doldursun — altında beyaz şerit kalmasın (55px vs 50px) */
.merter-header-row .form-search > .row > .col-auto:last-child,
.merter-header-row .advscrh_frm_btn,
.merter-header-row .advscrh_frm_btn .search-btn { height: 100%; }
.merter-header-row .advscrh_frm_btn .search-btn { border-radius: 0 var(--merter-radius-sm) var(--merter-radius-sm) 0; }

#mega-menu ul.menu li:hover {
    border-left-color: var(--merter-purple);
    background-color: var(--merter-purple-bg);
}
#mega-menu ul.menu li:hover a,
#mega-menu ul.menu li:hover a span,
#mega-menu ul.menu li:hover a.dropdown:after,
#mega-menu ul.menu li:hover a .menu-icn,
#mega-menu ul.menu li .drop-menu .one-third ul li a:hover { color: var(--merter-purple); }
#mega-menu ul.menu li a .menu-icn { color: var(--merter-purple); }

.iconbox:hover .details .title { color: var(--merter-purple); }
.shop_item .details .title:hover a { color: var(--merter-purple); }

/* Ürün kartı renk varyasyonu rozeti (sağ alt köşe) — üst üste binen noktalar + toplam sayı.
   Gerçek link (detaya götürür). Köşeden hafifçe taşırılır (sağa + aşağı) — kartın kendi
   padding'i tampon bölge sağladığından .thumb overflow:visible ile taşma kırpılmaz. */
.shop_item .thumb { position: relative; }
.merter-card-colors {
    position: absolute; right: -8px; bottom: calc(var(--merter-card-pad, 0px) - 8px); z-index: 4;
    display: inline-flex; align-items: center; background: #fff; border-radius: var(--merter-radius-pill);
    padding: 4px 11px 4px 8px; box-shadow: 0 3px 12px rgba(20,20,43,.16);
    opacity: 1; transition: transform .3s ease;
}
.merter-card-color { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.10); }
.merter-card-color + .merter-card-color { margin-left: -8px; }
.merter-card-color-count { font-size: 13px; font-weight: 700; color: var(--merter-ink); margin-left: 8px; line-height: 1; }
/* Kart hover'ında sepete ekle belirir (aşağıdan yukarı kayarak) — rozet çakışmasın diye onun da
   üzerinde, sepete ekle'nin ÜST kısmına gelecek şekilde yukarı kayar. İkisi de aynı anda ekranda
   görünür kalır, rozet butonun arkasında kalmaz. */
.merter-product-card:hover .merter-card-colors { transform: translateY(-70px); }

.footer_qlink_widget li:hover a { color: var(--merter-purple); }
.footer_qlink_widget li a:before { background-color: var(--merter-purple); }

/* Footer — alt header ile aynı açık gri zemin (#f3f5f6).
   padding-top = içerik→footer mesafesi (--merter-footer-gap). Sayfa pbXX'leri
   buna EKLENMESİN diye hemen üstteki son içerik bloğunun alt padding'i sıfırlanır
   (form sarmalayıcılı checkout dahil). Mobil sticky clearance aşağıdaki
   istisna kurallarında !important ile korunur. */
.footer_one.home1 {
    background-color: var(--merter-surface-muted);
    padding-top: var(--merter-footer-gap) !important;
}
.body_content_wrapper > section:not(.footer_one):has(+ .footer_one),
.body_content_wrapper > form:has(+ .footer_one) > section {
    padding-bottom: 0 !important;
}

/* bootstrap-select — açık liste kutusu (tüm selectpicker'lar + data-container=body).
   Tek yerden radius/border/shadow; yeni selectpicker ekleyince ekstra CSS gerekmez.
   ÖNEMLİ: `>` (direct child) kullan — kütüphane iç listeyi de "dropdown-menu inner"
   diye adlandırıyor (2 seviye içeride); descendant selector iç ul'a da bindirip
   çift kutu/kenar boşluğu yaratıyordu (bkz. asorti dropdown gutter bug'ı). */
.bootstrap-select > .dropdown-menu,
.bs-container > .dropdown-menu {
    border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-md);
    box-shadow: 0 12px 28px rgba(20, 20, 43, 0.12);
    padding: 8px 0;
    margin-top: 2px !important;
    overflow: hidden;
}
/* Toggle hover: Bootstrap .btn-light koyulaştırmasın — beyaz kalsın */
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select.show > .dropdown-toggle {
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}
.bootstrap-select .dropdown-menu li a,
.bs-container .dropdown-menu li a {
    color: var(--merter-ink);
}
.bootstrap-select .dropdown-menu li:hover a,
.bs-container .dropdown-menu li:hover a,
.bootstrap-select .dropdown-menu li.active a,
.bs-container .dropdown-menu li.active a {
    color: var(--merter-purple);
    background-color: var(--merter-purple-bg) !important;
}

.owl-theme .owl-nav .owl-prev:hover,
.owl-theme .owl-nav .owl-next:hover { color: var(--merter-purple); }

/* ---- Mor tonları ---- */
.text-thm1-light { color: var(--merter-purple-l) !important; }
.btn-thm2-light { background-color: var(--merter-purple-l); border-color: var(--merter-purple-l); }
.btn-transparent { border-color: var(--merter-purple-l); color: var(--merter-purple-l); }
.btn-transparent:before { background-color: var(--merter-purple-l); }

/* ============================================================================
   Component stilleri (Merter'e özel öğeler — tema component'i değil).
   Yalnız görünüm; layout/responsive owl carousel + tema grid'ine bırakılır.
   ============================================================================ */

/* Kategori daireleri (mockup #2) — flex şerit 32px gap + sayfa bazlı custom dot */
.merter-cat-circles-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 36px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    cursor: grab;
}
.merter-cat-circles-track::-webkit-scrollbar { display: none; }
.merter-cat-circles-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}
.merter-cat-circles .item {
    flex: 0 0 104px;
    width: 104px;
    scroll-snap-align: start;
    text-align: center;
}
.merter-cat-circles-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    line-height: 1;
}
.merter-cat-circles-dots[hidden] { display: none !important; }
.merter-cat-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.merter-cat-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #112137;
    transition: all .25s ease;
}
.merter-cat-dot:hover::before { background: var(--merter-purple-l); }
.merter-cat-dot.is-active::before {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #112137;
}

.merter-cat-circles .iconbox {
    display: block;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}
.merter-cat-circles .iconbox .icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--merter-purple-bg);      /* çok açık mor zemin (mockup #7) */
    border: 1px solid var(--merter-purple-soft); /* açık mor border */
    border-radius: 50%;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
/* Görsel daireyi ~%68 doldurur: daha küçüğünde ikon zeminde kaybolur,
   daha büyüğünde mor halka kapanıp daire hissi gider. */
.merter-cat-circles .iconbox .icon img { max-width: 66px; max-height: 70px; height: auto; }
/* Emoji fallback — ikon yoksa/kırıksa */
.merter-cat-circles .iconbox .icon .merter-cat-emoji {
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; line-height: 1;
}
.merter-cat-circles .item a:hover .iconbox .icon {
    background: var(--merter-purple-bg-h);
}
.merter-cat-circles .iconbox .details .title {
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
}
.merter-cat-circles .item a:hover .iconbox .icon {
    border-color: var(--merter-purple);
    box-shadow: 0 6px 18px rgba(90, 30, 89, .12);
}
.merter-cat-circles .item a:hover .iconbox .details .title { color: var(--merter-purple); }

/* Filtre kısayolu rozetleri (Flaş İndirimler vb.) — dolu mor zemin, gerçek kategori fotoğraflarından ayrışsın. */
.merter-cat-circles .iconbox.merter-cat-highlight .icon { background: var(--merter-purple); border-color: var(--merter-purple); }
.merter-cat-circles .iconbox.merter-cat-highlight .icon .merter-cat-emoji { filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.merter-cat-circles .iconbox.merter-cat-highlight .details .title { color: var(--merter-purple); font-weight: 700; }


/* Hero slider (#1 banner) — görsel üzerindeki başlık/alt metin beyaz (home1_style varsayılanı koyu mavi). */
.merter-hero .home1_style .banner-style-one .banner-title,
.merter-hero .home1_style .banner-style-one .active .banner-title {
    color: #fff;
}
.merter-hero .home1_style .banner-style-one p,
.merter-hero .home1_style .banner-style-one .active p {
    color: #fff;
}
.merter-hero .home1_style .banner-style-one .tag {
    color: #fff;
}
/* Panelde "Slider Linki" girilmişse görselin tamamı tıklanabilir. Metin ve
   butonun üstünü kapatmaması için z-index'i onların altında kalır. */
.merter-hero .slide .merter-hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.merter-hero .slide > .container {
    position: relative;
    z-index: 2;
}

/* Anasayfa mobil — sıra: slider → story (category-circles) → kampanya/geri
   sayım kartı. Slider+kart normalde AYNI hero satırının iki kolonu; story'yi
   aralarına sokabilmek için hero'nun sarmalayıcıları (.merter-hero/.container/
   .row) `display:contents` ile "görünmez" yapılır (footer'daki
   .merter-footer-brand-col ile AYNI teknik) → kolonlar story ile AYNI flex
   bağlamında, `order` ile istenen sırada dizilir. DOM/masaüstü bozulmaz. */
@media (max-width: 992px) {
    .merter-home-top-flip { display: flex; flex-direction: column; }

    .merter-home-top-flip .merter-hero,
    .merter-home-top-flip .merter-hero > .container,
    .merter-home-top-flip .merter-hero .row {
        display: contents;
    }

    /* .merter-body-shell'in sabit 12px üst padding'i bu sarmalayıcıda iptal →
       slider header'ın hemen altına yapışır (diğer sayfalar etkilenmez). */
    .merter-body-shell > .merter-home-top-flip { margin-top: -12px; }

    /* 1) Slider — tam genişlik, header'a yapışık (hero'nun kendi padding'i
       display:contents ile geçersiz olduğundan üst boşluk doğrudan kolonda).
       Yükseklik dinamik: 100svh - header - story → ilk açılışta ekranı TAM
       slider+story doldurur, kart (3) bunun dışında normal akışta kalır.
       100dvh DEĞİL 100svh: dvh scroll sırasında mobil tarayıcı adres çubuğu
       gizlenip/görününce CANLI değişir → her değişimde bu height yeniden
       hesaplanıp slide'ın background-size:cover kırpma alanı kayıyor, bu da
       "scroll'da görsel zoom/scale oluyor" hissi yaratan asıl bugdu. svh
       (small viewport height) adres çubuğu açıkken bile SABİT — artık scroll
       sırasında yeniden boyutlanma/zoom olmuyor. */
    .merter-home-top-flip .merter-hero .col-xl-8 {
        order: -1;
        padding-inline: 0;
        display: flex;
        height: calc(100vh - var(--merter-mobile-header-h) - var(--merter-mobile-story-h));
        height: calc(100svh - var(--merter-mobile-header-h) - var(--merter-mobile-story-h));
    }
    .merter-home-top-flip .merter-hero .main-banner-wrapper,
    .merter-home-top-flip .merter-hero .banner-style-one,
    .merter-home-top-flip .merter-hero .owl-stage-outer,
    .merter-home-top-flip .merter-hero .owl-stage,
    .merter-home-top-flip .merter-hero .owl-item,
    .merter-home-top-flip .merter-hero .slide {
        height: 100% !important;
        border-radius: 0;
    }
    /* Slide yüksekliği artık viewport'a yakın (yukarıdaki height:100%) ama içerik
       (başlık+buton) tema'nın eşit üst/alt padding'i (responsive.css, 70px 0) ile
       akışa bırakılınca üstte kalıp altta boş görsel bırakıyordu. İçeriği görselin
       alt kısmına indir: slide flex-column + justify-content:flex-end. */
    .merter-home-top-flip .merter-hero .slide {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 0;
        padding-bottom: var(--merter-space-xl);
    }

    /* Slider ok butonları (prev/next) — tema bunları mobilde tamamen gizliyordu
       (responsive.css: 767px'de home1_style, 520px'de genel kural); burada geri
       açılıp dikeyde tam ortalanıp kenarlara yaslanıyor. JS zaten bağlı
       (script.js .banner-carousel-btn .left-btn/.right-btn → owl next/prev),
       burada yalnız görünürlük/konum.
       BUG (önceki deneme): .carousel-btn-block'u kendi top:50%+translateY(-50%) ile
       ortalamak yalnız BLOK'un (36px'lik ok içeriğine göre gereksiz yere yüksek,
       ~210px) kendi kutusunu ortalıyordu — ok'ların kendisi top:auto olduğundan
       (statik konum) bloğun ÜST kenarına yapışık kalıyor, blok ortalansa da ok
       gerçek merkezin çok üstünde duruyordu. Çözüm: blok tam yüksekliğe (top:0,
       height:100%) yayılır, HER OK kendi top:50%+translateY(-50%) ile bu tam
       yükseklik içinde bağımsız ortalanır — artık gerçekten GÖRSELİN merkezinde. */
    .merter-home-top-flip .merter-hero .carousel-btn-block {
        display: block !important;
        top: 0;
        height: 100%;
    }
    .merter-home-top-flip .merter-hero .carousel-btn-block .carousel-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px; line-height: 36px;
        font-size: 12px;
        position: absolute;
        top: 50% !important;
        transform: translateY(-50%);
        margin-top: 0;
    }
    /* !important: tema'nın responsive.css'i (≤992px) .left-btn'e `left:auto!important;
       right:90px` veriyor — bizim önceki unimportant override'ımızı eziyor, ok sola değil
       ortaya (CTA butonunun yanına) düşüp slider içeriğiyle çarpışıyordu (asıl bug). */
    .merter-home-top-flip .merter-hero .carousel-btn-block .carousel-btn.left-btn { left: 10px !important; right: auto !important; }
    .merter-home-top-flip .merter-hero .carousel-btn-block .carousel-btn.right-btn { right: 10px !important; left: auto !important; }

    /* 2) Story — slider'ın hemen altında. Kart küçülür + gap hafif azalır,
       şerit container gutter'ından taşıp tam ekrana yayılır (kendi padding'i
       ile) → ilk/son kart ekran kenarında yarım görünür (Instagram story
       tarzı kaydırma ipucu). Edge-to-edge scroll container'ın DOĞAL sonucu —
       ekran genişliği/kart sayısı değişse de otomatik çalışır (dinamik,
       cihaz başına ayrı hesap gerekmez). */
    .merter-home-top-flip .merter-cat-circles {
        order: 0;
        padding-top: var(--merter-space-md) !important;
    }
    .merter-home-top-flip .merter-cat-circles > .container,
    .merter-home-top-flip .merter-cat-circles .row,
    .merter-home-top-flip .merter-cat-circles .col-lg-12 {
        max-width: 100%;
        padding-inline: 0;
        margin-inline: 0;
    }
    .merter-home-top-flip .merter-cat-circles-track {
        gap: 20px;
        padding-inline: var(--merter-gutter);
        scroll-padding-inline: var(--merter-gutter);
    }
    .merter-home-top-flip .merter-cat-circles .item {
        flex-basis: 112px;
        width: 112px;
        scroll-snap-align: center;
    }
    .merter-home-top-flip .merter-cat-circles .iconbox .icon { width: 104px; height: 104px; }
    .merter-home-top-flip .merter-cat-circles .iconbox .icon img { max-width: 68px; max-height: 72px; }
    .merter-home-top-flip .merter-cat-circles .iconbox .icon .merter-cat-emoji { font-size: 50px; }
    /* Baş VE son kart kalıcı olarak yarım görünsün (overflow'a güvenmeden) —
       negatif margin ile item'ı scroll içeriğinin 0 sınırının dışına iter;
       scrollLeft 0'ın altına inemediği için o kısım hep kesik kalır (kaydırma
       ile "tamamlanmaz", salt görsel ipucu — ekran genişliği/kart sayısından
       bağımsız, her zaman çalışır). */
    .merter-home-top-flip .merter-cat-circles .item:first-child { margin-left: -56px; }
    .merter-home-top-flip .merter-cat-circles .item:last-child { margin-right: -56px; }

    /* 3) Kampanya/geri sayım kartı — en altta, normal gutter + üst boşluk. Kart artık
       buyer/seller ile aynı .merter-cta yapısı (bkz. hero.blade.php); masaüstünde
       h-100 ile slider'a eşit uzuyordu (~520px), mobilde ise "yarısı kadar" istendiği
       için burada kompakt (~yarım) yükseklik + daraltılmış boşluk/countdown veriliyor. */
    .merter-home-top-flip .merter-hero .col-xl-4 {
        order: 1;
        padding-inline: var(--merter-gutter);
        margin-top: var(--merter-space-md);
        margin-bottom: var(--merter-space-md);
    }
    .merter-home-top-flip .merter-hero .merter-cta-promo {
        min-height: 260px;
        padding: 28px 24px;
    }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-cta-title { font-size: var(--merter-fs-h3); margin-bottom: 6px; }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-cta-text { margin-bottom: 14px; }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-countdown { margin-bottom: 16px; gap: 6px; }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-countdown .cd-item { min-width: 44px; padding: 6px 4px; }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-countdown .cd-item span { font-size: 17px; }
    .merter-home-top-flip .merter-hero .merter-cta-promo .merter-countdown .cd-item small { font-size: 9px; }

    /* Dot'lar mobilde gizli (hem story hem slider). */
    .merter-home-top-flip .merter-cat-circles-dots { display: none !important; }
    .merter-home-top-flip .merter-hero .owl-dots { display: none !important; }
}

/* Güven şeridi (mockup #4) — anasayfada hero satırı genişliğinde (slider + promo kartı); dinamik boşluk. */
.merter-feature-strip-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px clamp(12px, 2.5vw, 32px);
}
.merter-feature-strip .merter-feature-item {
    flex: 0 1 calc(50% - 12px);
    min-width: 0;
    margin-bottom: 0;
}
@media (min-width: 1200px) {
    .merter-feature-strip-track {
        flex-wrap: nowrap;
    }
    .merter-feature-strip .merter-feature-item {
        flex: 0 1 auto;
    }
}
.merter-feature-strip .icon_boxes .details .title {
    font-size: 15px;
    line-height: 1.35;
}
.merter-feature-strip .icon_boxes .details .para {
    font-size: 13px;
    line-height: 1.4;
}

/* Güven şeridi — standalone kullanım (iletişim sayfası, bannerAligned=false).
   Bootstrap col-sm-6 mobilde (<576px) tek sütuna düşüyordu; anasayfadaki
   bannerAligned varyantıyla aynı görünüm için mobilde de 2x2 sabitlenir. */
@media (max-width: 767.98px) {
    .features:not(.merter-feature-strip) .row.ovh > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

.merter-countdown { display: flex; gap: 10px; margin-bottom: 26px; }
.merter-countdown .cd-item { min-width: 56px; padding: 10px 6px; text-align: center; background: #f6f3f7; border-radius: var(--merter-radius-sm); }
.merter-countdown .cd-item span { display: block; font-size: 22px; font-weight: 700; color: var(--merter-purple); line-height: 1.1; }
.merter-countdown .cd-item small { font-size: 11px; color: #888; }

/* Flash İndirimler — başlık yanı küçük geri sayım (mockup #7) */
.merter-countdown-inline { margin-bottom: 0; gap: 6px; flex-shrink: 0; }
.merter-countdown-inline .cd-item { min-width: 44px; padding: 6px 4px; }
.merter-countdown-inline .cd-item span { font-size: 17px; }
.merter-countdown-inline .cd-item small { font-size: 9px; }

/* Başlık + timer: mobilde yan yana (sol/sağ), alta düşmesin; dar ekranda timer küçülür.
   Web'de h2 flex:1 KAPALI — aksi halde başlık şişer, timer yine sağa yapışır. */
.merter-section-title-with-timer > h2 {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .merter-section-title-with-timer > h2 {
        flex: 0 0 auto;
    }
}
@media (max-width: 767.98px) {
    .merter-section-title-with-timer .merter-countdown-inline { gap: 4px; }
    .merter-section-title-with-timer .merter-countdown-inline .cd-item {
        min-width: 34px;
        padding: 4px 2px;
    }
    .merter-section-title-with-timer .merter-countdown-inline .cd-item span { font-size: 14px; }
    .merter-section-title-with-timer .merter-countdown-inline .cd-item small { font-size: 8px; }
}

/* 2 CTA banner — alıcı/satıcı (mockup #6) */
.merter-cta-section .row > [class*="col-"] { display: flex; }
.merter-cta {
    position: relative; display: flex; align-items: center; flex: 1; width: 100%; min-height: 280px;
    padding: 45px 40px; border-radius: var(--merter-radius-sm); overflow: hidden;
    background-size: cover; background-position: center;
}
.merter-cta:before { content: ""; position: absolute; inset: 0; }
.merter-cta-buyer:before { background: linear-gradient(100deg, var(--merter-purple-d) 18%, rgba(90,30,89,.72) 100%); }
.merter-cta-seller:before { background: linear-gradient(100deg, var(--merter-ink) 18%, rgba(26,34,56,.72) 100%); }
/* 3. varyant — hero'daki geri sayımlı kampanya kartı (bkz. hero.blade.php); buyer/seller ile
   AYNI kart yapısı, yalnız kendi rengi (amber/bronz — kampanya/indirim hissi) + countdown. */
.merter-cta-promo:before { background: linear-gradient(100deg, #7a4a12 18%, rgba(122,74,18,.72) 100%); }
.merter-cta-promo .merter-countdown .cd-item { background: rgba(255,255,255,.15); }
.merter-cta-promo .merter-countdown .cd-item span { color: #fff; }
.merter-cta-promo .merter-countdown .cd-item small { color: rgba(255,255,255,.75); }
.merter-cta-body { position: relative; z-index: 2; max-width: 80%; color: #fff; }
.merter-cta-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 5px 14px; border-radius: var(--merter-radius-pill); background: rgba(255,255,255,.16); margin-bottom: 16px; }
.merter-cta-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: #fff; line-height: 1.25; margin-bottom: 12px; }
.merter-cta-text { color: rgba(255,255,255,.85); margin-bottom: 24px; }

/* Kampanya banner grid (mockup #8) */
.merter-campaign-card {
    position: relative; display: flex; align-items: flex-end; min-height: 300px;
    padding: 34px; border-radius: var(--merter-radius-sm); overflow: hidden;
    background-size: cover; background-position: center;
}
.merter-campaign-card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,30,.05) 30%, rgba(20,20,30,.78) 100%); }
.merter-campaign-wide { min-height: 300px; align-items: center; }
.merter-campaign-body { position: relative; z-index: 2; color: #fff; max-width: 85%; }
.merter-campaign-off { display: inline-block; font-size: 14px; font-weight: 700; color: var(--merter-ink); background: var(--merter-amber, #f5c34b); padding: 5px 14px; border-radius: 4px; margin-bottom: 14px; }
.merter-campaign-title { font-size: var(--merter-fs-h3); font-weight: var(--merter-fw-heading); color: #fff; line-height: 1.25; margin-bottom: 8px; }
.merter-campaign-sub { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.merter-campaign-link { color: #fff; font-weight: 600; }
.merter-campaign-link i { font-size: 12px; margin-left: 6px; transition: margin-left .25s ease; }
.merter-campaign-link:hover { color: var(--merter-amber, #f5c34b); }
.merter-campaign-link:hover i { margin-left: 12px; }

/* Avantajlı Ürünler — filtre sekmeleri + sol dikey banner (mockup #9/#10) */
/* Filtre sekmeleri = MERKEZİ "altı çizili yapı" (title_more_btn / sort-toggle ile aynı desen:
   :before çubuk, var(--merter-navy), 2px, 0→100% animasyon). Aktif = koyu + kalın + tam alt çizgi; pasif = gri. */
.merter-filter-tabs { display: flex; flex-wrap: wrap; gap: 26px; padding: 0; list-style: none; }
@media (max-width: 767.98px) {
    .merter-filter-tabs { gap: 14px; }
}
.merter-filter-tabs li a { position: relative; display: inline-block; padding: 4px 2px; font-family: Jost, sans-serif; font-size: 15px; font-weight: 500; color: #8a909c; transition: color .25s ease; }
.merter-filter-tabs li a:before { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--merter-navy); transition: width .3s ease; }
.merter-filter-tabs li a:hover { color: var(--merter-navy); }
.merter-filter-tabs li a:hover:before { width: 100%; }
.merter-filter-tabs li a.active { color: var(--merter-navy); font-weight: 700; }
.merter-filter-tabs li a.active:before { width: 100%; }

/* Banner'lı bölüm: sekmeler + özel carousel okları yan yana (sağ üst).
   Owl'un kendi yan okları gizlenir; header'daki butonlar prev/next tetikler. */
.merter-section-header-actions { row-gap: 10px; }
.merter-section-nav { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.merter-section-nav-btn {
    width: 36px; height: 36px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #eaeaea; border-radius: 50%;
    color: var(--merter-navy); font-size: 14px; line-height: 1; cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}
.merter-section-nav-btn:hover { color: var(--merter-purple); border-color: #d8d8e4; }
/* Bannerlı bölüm sağ üst ← → okları mobilde gizli (carousel swipe/dots yeterli). */
@media (max-width: 767.98px) {
    .merter-section-nav { display: none !important; }
}
/* Owl'un absolute yan oklarını banner'lı bölümde tamamen gizle */
.merter-advantage .merter-carousel .owl-nav { display: none !important; }

/* Yatay ürün carousel okları (Çok Satanlar/Flash İndirimler vb.) — mobilde tamamen
   gizli (dokunmatik kaydırma yeterli); masaüstünde app.js (alignMerterCarouselArrows)
   dikey konumu karttaki GÖRSELİN kendi merkezine göre inline `top` ile ayarlar. */
@media (max-width: 992px) {
    .merter-carousel.owl-carousel .owl-nav { display: none !important; }
}

.merter-advantage-banner {
    position: relative; display: flex; align-items: flex-end; min-height: 420px;
    padding: 34px 28px; border-radius: var(--merter-radius-sm); overflow: hidden;
    background-size: cover; background-position: center;
}
.merter-advantage-banner:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(90,30,89,.35) 0%, var(--merter-purple-d) 100%); }
.merter-advantage-banner-body { position: relative; z-index: 2; color: #fff; }
.merter-advantage-tag { display: block; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.merter-advantage-title { font-size: var(--merter-fs-h3); font-weight: var(--merter-fw-heading); color: #fff; line-height: 1.3; margin-bottom: 22px; }

/* ============================================================
   MERKEZİ KART SİSTEMİ — tek constant (--merter-card-img-ratio, 2:3 portre —
   Nebim ürün görselleri gerçekte 1200x1800/800x1200 yani 2:3 geliyor; container
   bu orana eşit olunca object-fit:contain yanlarda letterbox bırakmaz).
   Tüm listeleme kartları (.merter-product-card = x-product.card) görseli bu orana sabitler →
   görseller her yerde aynı güzel oranda. Kart yüksekliği görselden doğar; aynı bölümdeki
   (aynı genişlikteki) tüm kartlar eşit olur. Bölümler arası genişlik farkı → boy farkı normaldir.
   (Detay & sepet bu class'ı kullanmaz → etkilenmez.)
   Başlık 2 satıra sabitlenir (kısa ad da 2 satır yer kaplar) → detay alanı her kartta eşit.
   ============================================================ */
:root {
    --merter-card-img-ratio: 2 / 3;     /* ürün görseli oranı (portre) — gerçek foto oranıyla eşleşir */
    --merter-card-pad: 16px;             /* kart içi padding — dört yana EŞİT (top=yatay=alt) */
    --merter-card-action-pad: 12px;      /* kart hover aksiyon butonları — üst/sağ/ara boşluk */
    --merter-grid-border: 1px solid #eaeaea; /* kart + grid kapanış border'ı, tek kaynak (bdrtrb1 ile uyumlu) */
}

/* Kart içi padding dört yana eşit → içerik birleşmiş border çizgilerinden her yönde aynı oranda içeride.
   Kartlar arası boşluk owl margin:0 ile yok edilir (app.js initMerterGrids) → bdrtrb1 border'ları birleşir. */
/* container-type: inline-size → kart KENDİ genişliğini sorgular (cqi); descendant'lar kaba uyarlanır.
   inline-size (size DEĞİL) → yükseklik akışta kalır, banner=kart eşitliği bozulmaz. */
.merter-product-card { display: flex; flex-direction: column; padding: var(--merter-card-pad); container-type: inline-size; }
/* overflow: visible — renk rozeti görselin sağ/alt kenarından hafifçe taşabilsin diye (kartın
   kendi 16px padding'i tampon bölge sağlıyor, .item.ovh dış sınırına değmiyor). */
.merter-product-card .thumb { padding-bottom: var(--merter-card-pad); margin-bottom: 0; overflow: visible; }
.merter-product-card .thumb > a:first-child {
    display: block; aspect-ratio: var(--merter-card-img-ratio); overflow: hidden;
    border-radius: var(--merter-radius-sm); background: #f5f4f7;
}
/* contain: ürün baş–ayak tam görünsün (cover üst/altı kesiyordu; fotoğraflarda
   zaten sağ/sol boşluk var → contain yanlarda hafif letterbox bırakabilir). */
.merter-product-card .thumb > a:first-child img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
    border-radius: var(--merter-radius-sm);
}
/* Fav/hızlı-bakış aksiyon barı: görselin ÜST kenarına kitlenir — vendor'ın hover'da uyguladığı
   translateY(-10px) barı kartın (.item.ovh) overflow:hidden sınırının dışına taşırıp kırpıyordu.
   Üst/sağ ve butonlar arası boşluk tek değer (--merter-card-pad) → görsel olarak eşit. */
.merter-product-card .thumb_info { top: var(--merter-card-action-pad); right: var(--merter-card-action-pad); }
.merter-product-card .thumb_info ul { margin: 0; padding: 0; list-style: none; }
/* Fav / hızlı bakış daireleri — hafif transparan beyaz (ürün görseli arkadan süzülür); hover amber vendor'da. */
.merter-product-card .thumb_info ul li {
    margin-bottom: var(--merter-card-action-pad);
    background-color: rgba(255, 255, 255, 0.72);
}
.merter-product-card .thumb_info ul li:last-child { margin-bottom: 0; }
.merter-product-card:hover .thumb_info { transform: none; }
/* Sepete ekle: alt kenarı görselin alt kenarıyla 0 boşluklu hizalanır, taşma olmaz — vendor'ın
   varsayılan bottom:0'ı .thumb'ın (görsel + rezerv pad) toplam kutusuna göredir, görsele değil. */
.merter-product-card .shop_item_cart_btn { bottom: var(--merter-card-pad); }
.merter-product-card:hover .shop_item_cart_btn { transform: none; }
.merter-product-card .shop_item_cart_btn a.btn {
    display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Kart üzerindeki fav ikonu (FontAwesome fas/far fa-heart) — varsayılan hafif silik;
   beğenilince dolu kalp + vurgu rengi (opacity tam). */
.merter-product-card .thumb_info ul li a:has(.fa-heart):not(.is-liked) { color: rgba(4, 30, 66, .38); }
.merter-product-card .thumb_info ul li a.is-liked { color: var(--merter-purple); }

/* Mobil sepete ekle ikonu — masaüstünde gizli; favori ile aynı daire, amber zemin. */
.merter-product-card .merter-card-addtocart { display: none; }
.merter-product-card .thumb_info ul li.merter-card-addtocart,
.merter-product-card .thumb_info ul li.merter-card-addtocart:hover {
    background-color: var(--merter-amber, #f5c34b);
}
.merter-product-card .merter-card-addtocart a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; line-height: 1;
}
.merter-product-card .merter-card-addtocart img {
    display: block; width: 16px; height: 14px; object-fit: contain;
}

/* Mobilde hover yok → aksiyonlar SABİT görünür; hızlı bakış (göz) + alt metin
   "Sepete ekle" barı gizlenir; yerine favorinin altında sepet ikonu gösterilir. */
@media (max-width: 992px) {
    .merter-product-card .thumb_info {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .merter-product-card .shop_item_cart_btn { display: none !important; }
    .merter-product-card .merter-card-quickview { display: none; }
    .merter-product-card .merter-card-addtocart { display: list-item; margin-bottom: 0; }
    /* Alt sepete ekle barı yok → renk rozetinin hover'da yukarı kaymasına gerek yok. */
    .merter-product-card:hover .merter-card-colors { transform: none; }
}
.merter-product-card .details { flex: 0 0 auto; }
/* Marka/satıcı adı satırı: solda marka (uppercase gri), sağda puan/yorum rozeti
   (referans kart düzeni — bkz. Product::getCommentScore()/getScoreCount()). */
.merter-product-card .details .sub_title {
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.3;
}
.merter-product-card .details .merter-card-brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.merter-product-card .details .merter-card-rating {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--merter-ink);
}
.merter-product-card .details .merter-card-rating i { font-size: 11px; color: var(--merter-amber, #f5c34b); }
.merter-product-card .details .merter-card-rating-count { font-weight: 400; color: #8a8a8a; }
/* Başlık 2 satıra SABİTLENİR (clamp + sabit yükseklik aynı elemanda) → her kart birebir eşit boy.
   font-size title div'inde → height:em ile birlikte ölçeklenir (alt satır kesilmez).
   Mobil 2 sütun (~150–180px kart): min 13px → iki satırda daha fazla karakter sığar.
   ÖNEMLİ: style.css `.shop_item .details .title a { line-height: 28px }` ezerse 2. satır
   kesilir — a'ya da aynı line-height verilmeli. */
.merter-product-card .details .title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.25; height: 2.5em;
    overflow-wrap: anywhere;
    /* Kaba göre ölçek: masaüstü kart (~306px) → 18px; dar 2 sütun → ~13–14px. */
    font-size: clamp(13px, 2.8cqi + 8px, 18px); margin-bottom: 0;
}
.merter-product-card .details .title a {
    font-weight: 600;
    line-height: 1.25;
    font-size: inherit;
}
/* style.css `.shop_item .details .title, ... .title a { transition: all 0.5s ease }`
   font-size'ı da kapsıyor → font-size cqi (container-query birimi) tabanlı clamp()
   kullandığından, kart DOM'u yeniden takıldığında (owl carousel reinit, resize)
   tarayıcı container boyutunu bir an yanlış ölçüp clamp uçlarına (13px/18px) sıçrıyor;
   "all" transition bu anlık sıçramayı 0.5s'lik görünür bir büyüme/küçülme animasyonuna
   çeviriyordu. Sadece renk geçişini koru, font-size'ı animasyonun dışında bırak. */
.merter-product-card .details .title,
.merter-product-card .details .title a {
    transition: color .2s ease;
}
/* Başlık ile fiyat bloğu arasını daralt. */
.merter-product-card .si_footer { margin-top: 4px; }

/* Avantajlı Ürünler: sol banner sağdaki carousel kolonuyla AYNI boya uzar.
   Banner kolonu flex → banner flex:1 ile kolonu doldurur. Owl'un fazla yüksekliğini
   (nav'ın margin-top'u + item inline-block boşluğu) sıfırla → kolon yüksekliği = kart yüksekliği. */
.merter-advantage .owl-nav { margin-top: 0; }
.merter-advantage .owl-item { vertical-align: top; }
@media (min-width: 992px) {
    .merter-advantage-banner-col { display: flex; }
    .merter-advantage-banner-col .merter-advantage-banner { flex: 1 1 auto; min-height: 0; }
    /* Dot'lar kolon yüksekliğini şişirmesin → carousel kolonu = SADECE kart yüksekliği,
       banner buna eşitlenir (banner = kart hücresi). Dot'lar kartların altında absolute durur.
       Satır altına margin: absolute dot (+ aktif ring box-shadow) sonraki section'ın
       ::before ayırıcısıyla örtüşüp ring'in altını kesmesin diye tampon (diğer
       listelerde dot normal akışta → bu sorun yok). Banner kolonunu etkilemez. */
    .merter-advantage .col-lg-9 .owl-carousel { position: relative; overflow: visible; }
    .merter-advantage .col-lg-9 .owl-dots { position: absolute; left: 0; right: 0; bottom: -34px; margin-top: 0; }
    .merter-advantage .row.align-items-stretch { margin-bottom: 40px; }
}
/* Bannerlı bölümler (#9 Avantajlı, #10 Günün Fırsatları) — mobilde banner
   hücresi tamamen gizlenir, carousel bannersız listeyle (#5/#7) aynı tam
   genişlikte görünür (1:1 aynı görünüm). */
@media (max-width: 992px) {
    .merter-advantage-banner-col { display: none !important; }
    .merter-advantage .row > .col-lg-9 { flex: 0 0 100%; max-width: 100%; width: 100%; }
}

/* Section ayraç çizgisi kaldırıldı — bölümler arası yalnız ortak padding kalır
   (önceki ::before hem çizgi hem ekstra dikey boşluk üretiyordu). */

/* Anasayfa section boşlukları → TEK ortak fluid token (--merter-space-md), TÜM
   bölümlerde üstten ve alttan EŞİT. Önceki lg (32px) + ::before şeridi component
   aralarını şişiriyordu; md (masaüstü 24px) ile sıkılaştırıldı. */
.merter-cat-circles,
.merter-hero,
.merter-feature-strip,
.featured-product,
.merter-cta-section,
.merter-campaign-section,
.merter-faq-section,
.merter-newsletter-section,
.our-blog,
section.merter-reviews {
    padding-top: var(--merter-space-md) !important;
    padding-bottom: var(--merter-space-md);
}

/* Yorumlar + Günün Fırsat Ürünleri: düz beyaz yerine hafif kırık beyaz zemin. */
section.merter-reviews,
.merter-daily-deals { background-color: #FBFAFA; }

/* ============================================================
   MERKEZİ FLUID CONTAINER (tek kaynak — tüm site).
   Bootstrap'in sabit breakpoint max-width'leri yerine: içerik tavana (1600px)
   kadar tarayıcıyla büyür; kenar boşluğu fluid (--merter-gutter, vw orantılı, kısa).
   Tavanı aşan ekranlarda ortalanır (sektör std; okunabilirlik). ============================================================ */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    width: 100%;
    max-width: var(--merter-container-max);
    margin-inline: auto;
    padding-inline: var(--merter-gutter);
}

/* ============================================================
   MERKEZİ FLUID TİPOGRAFİ — tema sabit px başlıklarını ez (ekranla orantılı).
   Ağırlık/renk de tek kaynaktan (--merter-fw-heading / --merter-heading-color);
   component-scoped h5/h6 seçicileri (ör. .merter-section-head h5) daha yüksek
   specificity'de olduğu için burada ezilmez, kendi değerlerini korur.
   ============================================================ */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--merter-fw-heading);
    color: var(--merter-heading-color);
}
h1, .h1 { font-size: var(--merter-fs-h1); line-height: 1.2; }
h2, .h2 { font-size: var(--merter-fs-h2); line-height: 1.25; }
h3, .h3 { font-size: var(--merter-fs-h3); line-height: 1.3; }
h4, .h4 { font-size: var(--merter-fs-h4); line-height: 1.35; }
h5, .h5 { font-size: var(--merter-fs-h5); line-height: 1.4; }
h6, .h6 { font-size: var(--merter-fs-h6); line-height: 1.4; }
.main-title h2 { font-size: var(--merter-fs-h2); line-height: 1.25; }

/* ============================================================
   MERKEZİ CAROUSEL — border birleşmesi + dot'lar (tek yapı).
   .merter-grid    → ürün kartı carousel'i: kartlar yapışık (owl margin:0, app.js),
                     bdrtrb1 sağ/üst/alt border'lar birleşir; en sol kart için sol border
                     stage-outer'dan gelir (tema dod_slider deseni) → grid kapanır.
                     Sağ kenar de AYNI şekilde stage-outer'dan (kart değil) verilir:
                     owl'un item genişliğini böldüğü subpixel yuvarlama en sağdaki
                     görünür kartın kendi border-right'ını 1px'in altında overflow:hidden
                     tarafından kırpabiliyor; container'ın kendi border'ı clip'lenmez.
   .merter-carousel → tüm yatay owl listeleri: ortak dot stili (mor pill aktif).
   ============================================================ */
.merter-grid .owl-stage-outer {
    border-left: var(--merter-grid-border);
    border-right: var(--merter-grid-border);
}

/* Katalog ürün grid'i (listing) — anasayfa .merter-grid ile aynı birleşik görünüm,
   ama owl yerine Bootstrap row. Gutter sıfırlanır → kartlar yatayda yapışır (kart bdrtrb1:
   sağ border komşuyla tek çizgi olur). En sol kenar kartta yok → container border-left'ten gelir.
   Satır arası alt+üst border çakışmasını -1px ile teke indir (tek kaynak: --merter-grid-border). */
.merter-listing-grid { border-left: var(--merter-grid-border); }
.merter-listing-grid > [class*="col-"] { padding-left: 0; padding-right: 0; margin-top: -1px; }

/* Mobilde ürün listeleme grid'i 2'li (2x2 satır) gösterilir — bootstrap
   col-sm-6/col-xl-4 breakpoint'lerini ezer, tek satırda hep 2 kart olur. */
@media (max-width: 992px) {
    .merter-listing-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
    /* Dar 2x2 kartta turuncu % indirim etiketi sıkışıyor — yalnız mobilde gizle. */
    .merter-listing-grid .merter-card-discount-pct,
    .merter-account-cards-grid .merter-card-discount-pct {
        display: none;
    }
}

/* Sepet keşfet 2x2 vitrin (yalnız mobil carousel) — indirim etiketi yok. */
.merter-suggest-vitrine .merter-card-discount-pct { display: none; }

.merter-carousel .owl-dots { text-align: center; margin-top: 12px; line-height: 1; }
.merter-carousel .owl-dots .owl-dot { display: inline-flex; vertical-align: middle; }
/* NOT: Selector'lar `.merter-carousel.owl-theme` ile yazılır → tema style.css'indeki
   `.shop_item_Ngrid_slider.owl-theme .owl-dots .owl-dot span` (margin:0 auto; bg:#112137)
   kuralıyla AYNI specificity (0,4,1); app.css en son yüklendiği için kazanır. Yoksa pasif
   dot'lar lacivert + margin:0 olup sıkışık koyu küme gibi görünür (Avantajlı Ürünler bug'ı). */
.merter-carousel.owl-theme .owl-dots .owl-dot span {
    width: 8px; height: 8px; margin: 6px; background: #112137;
    border-radius: 50%; transition: all .25s ease;
}
.merter-carousel.owl-theme .owl-dots .owl-dot:hover span { background: var(--merter-purple-l); }
/* Aktif dot: lacivert nokta + çevresinde gap'li LACİVERT ÇEMBER (ring) — istenen görünüm.
   box-shadow: beyaz gap halkası + lacivert dış halka (gerçek border yerine, boyut sabit kalsın). */
.merter-carousel.owl-theme .owl-dots .owl-dot.active span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #112137;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #112137;
}
/* Tek dot (tek sayfa) → pagination'ı gizle. Owl, loop modunda bazı carousel'lerde
   (ör. "Çok Satanlar", 8 ürün) tek dot üretir; tek başına aktif ring (◉) bozuk durur ve
   tek sayfa için gösterge anlamsızdır. Çok dotlu carousel'ler etkilenmez. (:has + :only-child fallback) */
.merter-carousel .owl-dots:has(.owl-dot:only-child) { display: none; }
.merter-carousel .owl-dots .owl-dot:only-child { display: none; }

/* Kart fiyatı: gri fon kutusu içinde iki kolon — indirim varsa "İndirimli Fiyat" (sol, vurgulu) +
   "Fiyat" (sağ, eski/liste fiyatı); indirim yoksa tek kolon "Birim Fiyatı".
   Dar kartta (mobil 2 sütun) font/padding cqi ile ~1–2px küçülür; nowrap → ₺ alta kaçmaz. */
.merter-card-price-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(4px, 1.5cqi, 10px);
    background: rgba(124, 127, 132, .08); border-radius: var(--merter-radius-sm);
    /* Üst padding sıkı — başlık 2. satırı ile kutu arası boşa yer yemesin. */
    padding: clamp(4px, 1.2cqi, 6px) clamp(8px, 2.5cqi, 14px) clamp(6px, 1.6cqi, 8px);
}
.merter-card-price-col { display: flex; flex-direction: column; min-width: 0; }
.merter-card-price-col-old { align-items: flex-end; text-align: right; }
.merter-card-price-label {
    display: block; font-size: clamp(9px, 1.2cqi + 7px, 11px); font-weight: 500;
    letter-spacing: .4px; color: #6e6e7a; margin-bottom: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merter-card-price-old-row {
    display: inline-flex; align-items: center; justify-content: flex-end;
    gap: clamp(4px, 1.2cqi, 6px); min-width: 0; flex-wrap: nowrap;
}
.merter-card-price-old {
    font-size: clamp(11px, 2.2cqi + 8px, 15px); font-weight: 600; color: #8a909c;
    text-decoration: line-through; white-space: nowrap; line-height: 1.2;
}
.merter-card-price-now {
    font-size: clamp(13px, 2.5cqi + 10px, 18px); font-weight: 700; color: var(--merter-purple);
    white-space: nowrap; line-height: 1.2;
}

/* Yorumlar (mockup #12) */
.merter-review-card { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm); padding: 30px 26px; text-align: center; margin: 6px; }
.merter-review-thumb { width: 150px; height: 190px; margin: 0 auto 18px; border-radius: var(--merter-radius-sm); overflow: hidden; }
.merter-review-thumb a { display: block; width: 100%; height: 100%; }
/* !important: tema '.owl-carousel .owl-item img{width:auto}' kuralı (style.css) daha yüksek
   specificity'de (3 sınıf) olduğu için ezer — carousel içindeki görsel oranını koruyarak
   daralır, sağda boşluk kalır ("kesik" görünüm). !important ile kazandırılır. */
.merter-review-thumb img { width: 100% !important; height: 100%; object-fit: cover; }
.merter-review-store { color: #888; font-size: 14px; margin-bottom: 6px; }
.merter-review-store span,
.merter-review-store a { color: var(--merter-purple); font-weight: 500; text-decoration: none; }
.merter-review-store a:hover { text-decoration: underline; }
/* Anasayfa kartı — satıcı detaydaki ürün satırı (ortalanmış). */
.merter-review-card .merter-review-product {
    justify-content: center; margin: 0 0 10px; font-size: 13px;
}
.merter-review-card .merter-review-user { font-weight: 600; color: var(--merter-ink); letter-spacing: 1px; margin-bottom: 12px; }
.merter-review-card .merter-review-text { color: #777; font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.merter-review-stars li { display: inline-block; color: var(--merter-amber, #f5c34b); font-size: 13px; }

/* SSS — açık mor kutu + accordion (mockup #13) */
.merter-faq { background: #ece9f7; border-radius: var(--merter-radius-xl); padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px); }
.merter-faq .main-title h2 { color: var(--merter-ink); font-size: var(--merter-fs-h2); }
.merter-faq .accordion .card { background: transparent; border: 0; border-bottom: 1px solid rgba(26,34,56,.14); border-radius: 0; }
.merter-faq .card-header { background: transparent; border: 0; padding: 0; }
.merter-faq .btn-link { position: relative; width: 100%; padding: 16px 36px 16px 0; font-size: var(--merter-fs-h4); font-weight: 600; color: var(--merter-ink); text-decoration: none; }
.merter-faq .btn-link span { color: var(--merter-purple); font-weight: 700; margin-right: 12px; }
/* Aç/kapa ikonu — sade +/− karakteri, arkasında rozet/çember yok (mockup #13). Kapalı: +, açık: −. */
.merter-faq .btn-link:after {
    content: "+";
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 600; line-height: 1; color: var(--merter-ink);
}
.merter-faq .btn-link:not(.collapsed):after { content: "\2212"; }
.merter-faq .card-body { padding: 0 36px 16px 0; color: #5a6072; line-height: 1.7; font-size: var(--merter-fs-body); }
.merter-faq .btn-thm { padding: 14px 52px; }

/* SSS sayfası — CTA satırı (İletişim / Destek Taleplerim). */
.merter-faq-cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.merter-faq-cta-row-start { justify-content: flex-start; }
/* SSS — mobil: breadcrumb gizle (listeleme/blog ile aynı desen) */
@media (max-width: 991.98px) {
    .merter-faq-page .merter-breadcrumb-desktop { display: none; }
}

/* Bülten — açık mor kutu + form + görsel (mockup #14) */
.merter-newsletter { position: relative; background: #ece9f7; border-radius: var(--merter-radius-xl); padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px); overflow: hidden; }
.merter-newsletter-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); line-height: 1.3; margin-bottom: 14px; }
.merter-newsletter-sub { color: #5a6072; margin-bottom: 26px; max-width: 90%; }
.merter-newsletter-form { display: flex; max-width: 460px; }
.merter-newsletter-form .form-control { height: 52px; border: 0; border-radius: var(--merter-radius-sm) 0 0 var(--merter-radius-sm); padding: 0 18px; }
.merter-newsletter-form .btn { border-radius: 0 var(--merter-radius-sm) var(--merter-radius-sm) 0; padding: 0 30px; }
.merter-newsletter-thumb { text-align: right; }
.merter-newsletter-thumb img { max-width: 100%; height: 280px; object-fit: cover; border-radius: var(--merter-radius-md); }

/* Header sağ widget — mockup: mor zemin, dikey ayraç, kenarlıksız ikon, iki satır tipografi */
.header_middle .merter-header-widget .wrapper > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
}
.header_middle .merter-header-widget .wrapper > ul > li.list-inline-item {
    margin: 0;
    padding-right: 22px;
    margin-right: 22px;
    border-right: 2px solid rgba(255, 255, 255, .85);
}
.header_middle .merter-header-widget .wrapper > ul > li.list-inline-item:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}
.header_middle .merter-widget-item {
    white-space: nowrap;
    text-decoration: none;
}
.header_middle .merter-widget-item .icon {
    border: none;
    height: auto;
    width: auto;
    line-height: 1;
    margin-right: 12px;
    background: transparent;
}
.header_middle .merter-widget-item:hover .icon {
    background: transparent;
}
.header_middle .merter-widget-item .icon span {
    font-size: 22px;
    color: #fff;
}
.header_middle .merter-widget-item .icon img {
    width: 22px;
    height: auto;
}
.header_middle .merter-widget-item .icon span.badge {
    background-color: #fff;
    color: var(--merter-purple);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    width: 18px;
    line-height: 18px;
    padding: 0;
    text-align: center;
    right: -8px;
    top: -4px;
}
.header_middle .merter-widget-item .details .subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .88);
    line-height: 1.25;
    margin-bottom: 0;
}
.header_middle .merter-widget-item .details .title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0;
}

/* Alt nav bar — açık gri şerit; orta linkler koyu, sağda buton/chip grubu.
   z-index: listing sticky bar'ın üstünde kalsın (mega menü hover flyout).
   ::before: mega-menü overlay (z-index 40) şeridi karartmasın diye
   opak kalkan (link/aksiyon z-index 41 ile aynı seviye) — zemin rengiyle
   AYNI değişkeni kullanır, ikisi birlikte değişir. */
header.header-nav.menu_style_home_one.main-menu {
    background-color: var(--merter-surface-muted);
    padding: 0; /* tema 30px yatay padding kaldır — üst header container ile aynı gutter */
    position: relative;
    z-index: 200;
}
header.header-nav.menu_style_home_one.main-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--merter-surface-muted);
    z-index: 41;
    pointer-events: none;
}
.header_middle.dn-992 {
    position: relative;
    z-index: 201;
    padding-top: 13px;
    padding-bottom: 13px;
}
header.header-nav.menu_style_home_one.main-menu .menu_bdrt1 {
    border-top-color: rgba(0, 0, 0, .06);
}
header.header-nav.menu_style_home_one.main-menu #respMenu.ace-responsive-menu > li > a,
header.header-nav.menu_style_home_one.main-menu #respMenu.ace-responsive-menu > li > a .title {
    color: #2b2e38; /* mockup 03: koyu antrasit (mor değil) */
    font-weight: 500;
}
header.header-nav.menu_style_home_one.main-menu #respMenu.ace-responsive-menu > li > a:hover,
header.header-nav.menu_style_home_one.main-menu #respMenu.ace-responsive-menu > li > a:hover .title {
    color: var(--merter-purple);
}
header.header-nav.menu_style_home_one.main-menu #respMenu .merter-nav-sep .title {
    color: #c5c9d2;
    font-weight: 400;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2.ace-responsive-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2.ace-responsive-menu > li {
    margin: 0;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-sep span {
    color: #c5c9d2;
    padding: 0 4px;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-link,
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-seller,
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--merter-radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-link:before,
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-seller:before,
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-select:before {
    display: none;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-link {
    color: var(--merter-ink);
    background: transparent; /* içi şeffaf — alt nav gri zeminini alsın */
    border: 1px solid #dfe3ea;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-link:hover {
    color: var(--merter-purple);
    background: transparent;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-link-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-seller-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-seller {
    color: #fff;
    background: var(--merter-purple);
    border: 1px solid var(--merter-purple);
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-seller:hover {
    color: #fff;
    background: var(--merter-purple-d);
    border-color: var(--merter-purple-d);
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-select {
    color: #561e5a;
    background: #fff;
    border: 1px solid #dfe3ea;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-select:hover {
    color: #561e5a;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-nav-select.dropdown-toggle::after {
    display: none; /* Bootstrap caret gizle — fa-angle-down kullanıyoruz */
}

/* Dil seçici dropdown menü — style.css'teki ace-responsive-menu li a { color:#fff }
   daha yüksek spesifiteye sahip; hover sonrası metin beyaz zemin üzerinde kayboluyordu. */
.merter-lang-menu {
    min-width: 150px;
    border: 1px solid #dfe3ea;
    border-radius: var(--merter-radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    padding: 4px 0;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--merter-ink);
    padding: 8px 16px;
    border-radius: 0;
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-lang-menu li:hover .dropdown-item {
    color: var(--merter-ink);
}
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-lang-menu .dropdown-item:hover,
header.header-nav.menu_style_home_one.main-menu #respMenu2 .merter-lang-menu .dropdown-item:focus {
    color: var(--merter-purple);
    background-color: var(--merter-purple-bg);
}
/* Para birimi form submit butonu — dropdown-item görünümü */
.merter-lang-menu button.dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Footer dil/para — header merter-nav-select ile aynı mantık.
   ÖNEMLİ: yalnız doğrudan çocuk ul — nested .dropdown-menu'ya display:flex
   basılırsa menüler tıklanmadan açık görünür. */
.merter-footer-lc > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; list-style: none; padding: 0; }
.merter-footer-lc .merter-footer-lc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--merter-radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: #561e5a;
    background: #fff;
    border: 1px solid #dfe3ea;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.merter-footer-lc a.merter-footer-lc-btn:hover { color: var(--merter-purple); border-color: #cfc7d2; }
.merter-footer-lc .merter-footer-lc-btn.dropdown-toggle::after { display: none; }
.merter-footer-lc .dropdown-menu { display: none; }
.merter-footer-lc .dropdown-menu.show { display: block; }
.merter-footer-lc .merter-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--merter-ink);
    padding: 8px 16px;
}
.merter-footer-lc .merter-lang-menu .dropdown-item:hover,
.merter-footer-lc .merter-lang-menu .dropdown-item:focus {
    color: var(--merter-purple);
    background-color: var(--merter-purple-bg);
}
@media (max-width: 991.98px) {
    .merter-footer-lc > ul { justify-content: center; }
}


/* Header iki şerit dengeleme — mor şerit padding (z-index yukarıda). */

/* ============================================================
   ALT NAV — kategori linkleri (sol) + sağ aksiyonlar (merter-nav-row).
   [Ürünler]  [orta linkler — search bar ile aynı sol hiza]  [sağ grup]
   ============================================================ */
header.header-nav.menu_style_home_one.main-menu nav > .container {
    display: block;
}
header.header-nav.menu_style_home_one.main-menu .logo1.home1_style { position: static; }
header.header-nav.menu_style_home_one.main-menu #mega-menu {
    position: relative; top: 0; height: auto; width: auto; max-width: none;
}
/* Kategori dropdown'ı (ul.menu) tema'da position:relative → akışta yer kaplıyor; #mega-menu artık
   flex item olduğu için onu 420px şişiriyordu. Absolute yap → akıştan çık, butonun altına çapalan. */
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu {
    position: absolute; top: 100%; left: 0;
    z-index: 210;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li .drop-menu {
    z-index: 211;
}
/* Mega menü flyout — saf CSS :hover yerine JS .is-mega-open (tema li:hover .drop-menu visibility
   override + transition hayalet panel bırakıyordu). Kapalıyken display:none → child override imkânsız. */
header.header-nav.menu_style_home_one.main-menu #mega-menu.is-mega-open ul.menu {
    display: block;
    position: absolute; top: 100%; left: 0;
    opacity: 1; visibility: visible; width: 270px;
    pointer-events: auto;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu:not(.is-mega-open) ul.menu,
header.header-nav.menu_style_home_one.main-menu #mega-menu:hover:not(.is-mega-open) ul.menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu:not(.is-mega-open) ul.menu li .drop-menu,
header.header-nav.menu_style_home_one.main-menu #mega-menu:not(.is-mega-open) ul.menu li:hover .drop-menu,
header.header-nav.menu_style_home_one.main-menu #mega-menu:hover:not(.is-mega-open) ul.menu li:hover .drop-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu.is-mega-open ul.menu li:hover .drop-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* Orta linkler: boşluğu yut; sığmazsa yatay kayar (scrollbar gizli) → asla sağ gruba binmez */
header.header-nav.menu_style_home_one.main-menu #respMenu.merter-nav-center {
    width: 100%; min-width: 0; padding-left: 0;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
}
header.header-nav.menu_style_home_one.main-menu #respMenu.merter-nav-center::-webkit-scrollbar { display: none; }
header.header-nav.menu_style_home_one.main-menu #respMenu.merter-nav-center > li { flex: 0 0 auto; }
/* Sağ grup: akışa gir, sabit genişlik */
header.header-nav.menu_style_home_one.main-menu #respMenu2.merter-nav-right {
    position: static; flex: 0 0 auto; top: auto; transform: none; right: auto;
}
/* Orta link dikey padding (bar yüksekliği/dikey ortalama) korunur */
header.header-nav.menu_style_home_one.main-menu #respMenu.ace-responsive-menu > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* "Ürünler" butonu (mockup 02) — kenarlıklı kutu, ikon+metin siyah, içi şeffaf */
header.header-nav.menu_style_home_one.main-menu #mega-menu .btn-mega {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dfe3ea;
    border-radius: var(--merter-radius-sm);
    background: transparent;
    padding: 9px 18px;
    line-height: 1.2;
    color: var(--merter-ink);
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .btn-mega span {
    color: var(--merter-ink);
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .btn-mega img {
    filter: brightness(0); /* ikon tam siyah */
}
/* kutu kenarlığı varken eski dikey ayraç çizgisini gizle */
header.header-nav.menu_style_home_one.main-menu #mega-menu .btn-mega:after {
    display: none;
}

/* "Ürünler" panosu — tema'nın orijinal 1140px'lik 4 kolonlu (.one-third x4) mega-menü grid'ine
   geri döndürüldü (bkz. style.css:9354). Sidebar (270px, kategori listesi) korunur; sağındaki
   panel geniş: solda alt kategoriler (4 kolon), sağda panel → menü yönetimi → kategori mega
   menü'den gelen banner kartları (drop-menu-banners, header.blade.php). 1030px genişlik 1366px
   ekranlarda taşmayacak şekilde ölçüldü (bkz. sidebar 270px + container gutter). */
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li .drop-menu {
    left: 270px;
    top: -1px;
    width: 1030px;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    border-radius: 0 var(--merter-radius-sm) var(--merter-radius-sm) 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li:hover .drop-menu,
header.header-nav.menu_style_home_one.main-menu #mega-menu.is-mega-open ul.menu li:hover .drop-menu {
    background-color: #fff;
    transform: none;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li .drop-menu .drop-menu-cats {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li .drop-menu .one-third {
    float: none;
    width: auto;
    padding-left: 0;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu ul.menu li .drop-menu .drop-menu-banners {
    flex: 0 0 260px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--merter-radius-sm);
    overflow: hidden;
    background: var(--merter-purple-bg);
    text-decoration: none;
    flex: 1;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__content {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--merter-purple);
    width: fit-content;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--merter-ink);
    margin: 0;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__desc {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card__link {
    font-size: 11px;
    font-weight: 600;
    color: var(--merter-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}
header.header-nav.menu_style_home_one.main-menu #mega-menu .merter-mega-banner-card:hover .merter-mega-banner-card__img {
    filter: brightness(0.95);
}

/* Header artık global merkezi container kuralını kullanır (max-width:1600 + --merter-gutter) →
   logo/nav içerikle hizalı, kenara yakın. Özel padding override'ı kaldırıldı. */

/* ============================================================
   MOBİL HEADER (≤992) — app-bar + inline arama.
   Tema 140px sabit + absolute düzenini temiz flex-column app-bar'a çevirir (tema atılacak).
   ============================================================ */
@media (max-width: 992px) {
    /* App-bar: üst satır + (gizli) arama paneli; mor zemin; sticky.
       Tema `.header,.footer{padding:0 20px!important}` (menu.css) burada da uygulanıyordu
       ve alttaki .menu_and_widgets kendi gutter'ını EKLİYORDU → çift
       kenar boşluğu (sayfa içeriği .container'dan daha az sola girik görünüyordu).
       Tek kaynak: iç satırlar var(--merter-gutter) kullanır, dış header sıfırlanır. */
    .mobile-menu .header.stylehome1 {
        height: auto;
        padding: 0 !important;
        background-color: var(--merter-purple);
        display: flex; flex-direction: column;
        position: sticky; top: 0; z-index: 1000;
    }
    .mobile-menu .header.stylehome1 .menu_and_widgets {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 14px var(--merter-gutter);
        min-height: 42px;
    }
    /* Hamburger + logo (absolute → akış); hamburger sağdaki action ikonlarla (arama/profil/
       sepet, .cart_btn) AYNI 42px kutu görünümünde (border+radius) → tutarlı "container" hissi. */
    .mobile-menu .mobile_menu_bar { float: none; display: flex; align-items: center; gap: 12px; }
    .mobile-menu .mobile_menu_bar a.menubar {
        position: static; margin: 0; padding: 0; width: 42px; height: 42px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--merter-radius-sm, 6px);
        background: rgba(255, 255, 255, .06); flex-shrink: 0;
        /* Tema .menubar{padding-top:15px;line-height:40px} optik kaymayı önle */
        line-height: 1; box-sizing: border-box;
    }
    .mobile-menu .mobile_menu_bar a.mobile_logo {
        margin: 0 !important; /* tema margin-top:17px / margin-left:35px */
        line-height: 1; display: flex; align-items: center; height: 42px;
    }
    /* Sağ ikonlar (absolute → akış): dil + arama + profil + sepet — sol hamburger ile aynı dikey merkez */
    .mobile-menu .mobile_menu_widget_icons { position: static; display: flex; align-items: center; }
    .mobile-menu .mobile_menu_widget_icons ul {
        margin: 0 !important; /* .mt15{margin-top:15px!important} kalıntısını da ez */
        padding: 0; display: flex; align-items: center; gap: 8px;
    }
    .mobile-menu .mobile_menu_widget_icons li { margin: 0; display: flex; align-items: center; }
    .mobile-menu .mobile_menu_widget_icons a.cart_btn {
        margin: 0; width: 42px; height: 42px; line-height: 1; box-sizing: border-box;
        display: inline-flex; align-items: center; justify-content: center;
        /* Hamburger ile aynı kutu: tema 50px + line-height centering yerine flex */
        flex-shrink: 0;
    }
    .mobile-menu .mobile_menu_widget_icons a.cart_btn .icon {
        display: inline-flex; align-items: center; justify-content: center;
        line-height: 1;
    }
    .mobile-menu .mobile_menu_widget_icons a.cart_btn .icon,
    .mobile-menu .mobile_menu_widget_icons a.cart_btn .icon span { color: #fff; font-size: 18px; }
    .mobile-menu .mobile_menu_widget_icons a.cart_btn .icon img {
        display: block; width: 18px; height: 18px; object-fit: contain;
    }
    /* Inline arama paneli — tema absolute konumunu ezer; akışta ikon satırının altında açılır */
    .mobile-menu .header.stylehome1 .mobile_menu_search_widget.merter-msearch-panel {
        position: static !important;
        inset: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        margin: 0 !important;
        display: none;
        padding: 0 var(--merter-gutter) 12px;
    }
    .mobile-menu.merter-msearch-open .header.stylehome1 .mobile_menu_search_widget.merter-msearch-panel { display: block; }
    /* Ürün listeleme — arama paneli daima açık (sonuç placeholder'ı burada).
       Sticky başlangıç = header kayması: header sticky DEĞİL, kayınca .merter-listing-bar
       is-stuck ile mini-header olur (bkz. setupStickyBar mobil dalı). Diğer sayfalarda
       header sticky kalır (yukarıdaki .mobile-menu .header.stylehome1). */
    body:has(.merter-listing-page) .mobile-menu .header.stylehome1 {
        position: relative;
    }
    .mobile-menu .header.stylehome1 .mobile_menu_search_widget.merter-msearch-panel.merter-msearch-inline { display: block; }
    .mobile-menu .header.stylehome1 .menu_and_widgets { position: relative; z-index: 2; }
    /* Arama ikonu açıkken X'e döner (kapatma niyetini netleştirir).
       Specificity: .cart_btn .icon { display:inline-flex } (0,4,1) ezmesin diye
       aynı zinciri kullanıyoruz — aksi halde search + X yan yana görünür. */
    .mobile-menu .mobile_menu_widget_icons a.cart_btn.merter-msearch-btn .merter-msearch-icon-close { display: none; }
    .mobile-menu.merter-msearch-open .mobile_menu_widget_icons a.cart_btn.merter-msearch-btn .merter-msearch-icon-open { display: none; }
    .mobile-menu .merter-msearch-panel .container { padding: 0; max-width: 100%; }
    /* Tema .search_form_wrapper beyaz zemin verir → kapatma ikonu kaybolur; mobilde şeffaf bırak */
    .mobile-menu .merter-msearch-panel .search_form_wrapper {
        background: transparent; border-radius: 0; padding: 0;
    }
    .mobile-menu .merter-msearch-form { margin: 0; flex: 1 1 auto; min-width: 0; }
    .mobile-menu .merter-msearch-row {
        display: flex; align-items: center; gap: 8px;
    }
    .mobile-menu .merter-msearch-fields {
        display: flex; align-items: stretch; gap: 8px; width: 100%;
    }
    .mobile-menu .merter-msearch-fields .box-search { flex: 1 1 auto; min-width: 0; }
    .mobile-menu .merter-msearch-fields .box-search .form_control {
        width: 100%; height: 42px; border: 0; border-radius: var(--merter-radius-sm);
        padding: 0 14px; background: #fff; color: #222;
    }
    /* Listeleme: breadcrumb search solunda — yalnız son 2 seviye, uzun metin ellipsis. */
    .mobile-menu .merter-header-crumb {
        flex: 0 1 auto; max-width: 42%; min-width: 0;
        display: flex; align-items: center; gap: 4px;
        font-size: 11px; line-height: 1.2; font-weight: 500;
        color: rgba(255, 255, 255, .85); white-space: nowrap;
    }
    .mobile-menu .merter-header-crumb-sep { flex: none; opacity: .55; margin: 0 1px; }
    .mobile-menu .merter-header-crumb-link,
    .mobile-menu .merter-header-crumb-current {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 7.5em;
    }
    .mobile-menu .merter-header-crumb-link { color: rgba(255, 255, 255, .85); }
    .mobile-menu .merter-header-crumb-link:hover { color: #fff; }
    .mobile-menu .merter-header-crumb-current { color: #fff; font-weight: 600; }
    .mobile-menu .merter-msearch-submit,
    .mobile-menu .merter-msearch-close {
        flex: 0 0 42px; width: 42px; height: 42px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--merter-radius-sm); border: 0;
    }
    .mobile-menu .merter-msearch-submit {
        background: var(--merter-amber, #f5c34b); color: var(--merter-purple);
    }
    .mobile-menu .merter-msearch-submit .flaticon-search:before { color: var(--merter-purple); }
    .mobile-menu .merter-msearch-close {
        background: #fff; color: var(--merter-purple); cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    }
    .mobile-menu .merter-msearch-close i { font-size: 16px; line-height: 1; color: var(--merter-purple); }
    .mobile-menu.merter-msearch-open .mobile_menu_widget_icons a.cart_btn.merter-msearch-btn .merter-msearch-icon-close {
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mobile-menu.merter-msearch-open .mobile_menu_widget_icons a.cart_btn.merter-msearch-btn .merter-msearch-icon-close i {
        font-size: 16px; color: #fff;
    }
    /* ----------------------------------------------------------------------
       Mobil menü drawer — tema PUSH efektini (sayfa kayıyormuş gibi sağa
       ötelenip menüyü arkada açığa çıkarma) sepet drawer'ıyla tutarlı bir
       OVERLAY drawer'a çeviriyor: sayfa yerinde kalır, panel kendisi soldan
       sağa kayarak üstüne açılır + koyu overlay ile kararır.
       ---------------------------------------------------------------------- */
    /* Tema push'u iptal — sayfa artık ötelenmiyor. */
    .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout {
        transform: none !important;
    }
    /* Panelin kendisi: sabit + tam yükseklik + soldan kayan drawer. */
    .mm-menu_offcanvas {
        display: block !important;
        top: 0; left: 0; bottom: 0; right: auto;
        height: 100%;
        width: var(--merter-drawer-w);
        min-width: 0; max-width: none;
        z-index: 1050;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .16);
        transform: translate3d(-100%, 0, 0);
        transition: transform .3s ease;
    }
    .mm-menu_offcanvas.mm-menu_opened { transform: translate3d(0, 0, 0); }
    /* Overlay — sepet drawer'ıyla aynı opaklık/geçiş; tema display toggle'ı yerine opacity kullanılır. */
    .mm-wrapper__blocker {
        display: block !important;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 1040;
    }
    .mm-wrapper_blocking .mm-wrapper__blocker {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Kök panelin "Menu" yazan navbar'ı — mor alan büyütüldü + logo büyüdü
       (alt panellerin geri-tuşlu navbar'ı — kategori/sayfa adı — dokunulmadan kalır).
       padding-right: sağda sabit X kapatma butonuna (.merter-menu-close-btn) yer açar,
       yoksa ortalanan logo geniş drawer'larda butonla çakışabilir. */
    .stylehome1 .mm-panels > .mm-panel:first-child > .mm-navbar {
        --mm-navbar-size: 72px;
        background: var(--merter-purple);
        border-bottom-color: var(--merter-purple);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 64px;
    }
    .stylehome1 .mm-panels > .mm-panel:first-child > .mm-navbar .mm-navbar__title {
        flex: none;
        width: 190px;
        height: 46px;
        padding: 0; /* .mm-navbar>* içinde --mm-navbar-size'a bağlı calc() padding'i geçersiz kıl
                       (72px'e büyüyünce sabit logo kutusuyla çakışır) */
        text-indent: -9999px;
        overflow: hidden;
        background: url('../images/merter-logo-beyaz.png') no-repeat center / contain;
    }

    /* Kapatma (X) — #menu'nün (.mm-menu_offcanvas) İÇİNDE, position:absolute; panel
       kendisi position:fixed + transform ile kaydığı için (bkz. .mm-menu_offcanvas
       aşağıda) buton da panelin transform'unu miras alıp ONUNLA BİRLİKTE kayar (eskiden
       ayrı bir position:fixed elemandı, panel kayarken sabit kalıp drawer'a ait değilmiş
       gibi duruyordu). Sadece menü açıkken görünür (mmenu açılışta <html>'e
       mm-wrapper_opened ekler) — kapalıyken tab/click hedefi olmasın diye. Tema'nın kendi
       `.mobile_menu_close_btn{opacity:0}` kuralı (menu.css) yalnız PUSH/slideout
       düzeninde (`~ .mm-slideout`, min-width:550px) opacity:1'e dönüyordu; bizim OVERLAY
       drawer'ımızda o koşul hiç gerçekleşmediği için opacity burada açıkça 1'e sabitleniyor. */
    .merter-menu-close-btn {
        display: none;
        position: absolute;
        top: 16px;
        right: 16px;
        left: auto; /* tema'nın .mobile_menu_close_btn{left:-15px} kuralını geçersiz kıl
                       (left+right+width birlikte over-constrained olunca right yok sayılıyordu) */
        width: 30px; height: 30px;
        padding: 0; /* tema .mobile_menu_close_btn padding/line-height ile X kayıyordu */
        margin: 0;
        align-items: center; justify-content: center;
        background: var(--merter-amber, #f5c34b);
        color: var(--merter-purple);
        border: 0; border-radius: 50%;
        font-size: 14px;
        line-height: 1; /* tema'nın line-height:40px'i flex ortalamayı bozuyordu */
        text-align: center;
        z-index: 2;
        opacity: 1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
        cursor: pointer;
    }
    .merter-menu-close-btn .flaticon-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
        line-height: 1;
    }
    .merter-menu-close-btn .flaticon-close:before {
        display: block;
        line-height: 1;
    }
    html.mm-wrapper_opened .merter-menu-close-btn { display: flex; }

    /* İlk kategori ile mor navbar arası — tema style.css'teki margin-top:30px fazla boşluk bırakıyordu. */
    .stylehome1 .mm-panel ul.mm-listview > li:first-child.mm-listitem {
        margin-top: 8px;
    }

    /* Root panel: liste paneli doldursun → Hesabım/sosyal altta kalsın.
       Kısa menüde margin-top:auto alta iter; uzun menüde sticky ile alt kenara yapışır. */
    .stylehome1 .mm-panels > .mm-panel:first-child {
        display: flex;
        flex-direction: column;
    }
    .stylehome1 .mm-panels > .mm-panel:first-child:after {
        display: none; /* mmenu'nün 20px alt spacer'ı sticky foot ile çift boşluk yapmasın */
    }
    .stylehome1 .mm-panels > .mm-panel:first-child > .mm-listview {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    /* Drawer kategori ikonu — panelden yüklenen görsel (categories.icon).
       Ölçü/hiza gömülü flaticon ile aynı: 16px kutu, metinle dikey ortalı. */
    .stylehome1 .mm-listitem .merter-mmenu-cat-icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: inline-block;
        vertical-align: -2px;
    }

    /* Kurumsal akordeon başlığı — kategori öğeleriyle aynı satır düzeni, yalnız
       metin daha belirgin (listenin son bölümü olduğunu netleştirir). */
    .stylehome1 .mm-listitem > span.merter-mmenu-corporate-title {
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--merter-purple);
    }

    /* Kurumsal (Vertical) açılınca başlık ↔ ilk link arası: tema first-child
       margin-top:30px + vertical panel padding-top:10px fazla boşluk bırakıyordu. */
    .stylehome1 .mm-listitem_vertical > .mm-panel {
        padding-top: 0;
        padding-bottom: 4px;
    }
    .stylehome1 .mm-listitem_vertical > .mm-panel.mm-listview > li:first-child.mm-listitem,
    .stylehome1 .mm-listitem_vertical > .mm-panel > .mm-listview > li:first-child.mm-listitem {
        margin-top: 0;
    }

    /* En alt blok (üye ol/satıcı ol + sosyal/telefon/e-posta) — drawer altına yapışık.
       .mm-listitem varsayılan flex-row'unu dikey akışa çeviriyor. */
    .stylehome1 .mm-listitem.merter-mmenu-foot-item {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: auto;
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: var(--merter-space-lg) 20px calc(var(--merter-space-lg) + env(safe-area-inset-bottom, 0px));
        gap: var(--merter-space-md);
        background: #fff;
        box-shadow: 0 -8px 20px rgba(20, 20, 43, .06);
    }
    .merter-mmenu-actions { display: flex; gap: 10px; }
    .merter-mmenu-btn {
        flex: 1 1 0;
        display: inline-flex; align-items: center; justify-content: center;
        height: 44px; padding: 0 12px;
        border-radius: var(--merter-radius-sm);
        font-size: 13px; font-weight: 600; text-align: center; text-decoration: none;
        background: var(--merter-amber, #f5c34b); color: var(--merter-purple);
        border: 1px solid var(--merter-amber, #f5c34b);
    }
    .merter-mmenu-btn-outline {
        background: #fff; color: var(--merter-purple); border-color: var(--merter-purple-soft);
    }
    .merter-mmenu-social {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding-top: var(--merter-space-md);
        border-top: 1px solid var(--merter-line);
    }
    .merter-mmenu-social a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        padding: 0; margin: 0;
        background: var(--merter-purple-bg);
        color: var(--merter-purple);
        font-size: 18px;
        line-height: 1;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;
    }
    .merter-mmenu-social a:hover,
    .merter-mmenu-social a:focus-visible {
        background: var(--merter-purple-bg-h);
        color: var(--merter-purple-d);
    }
    .merter-mmenu-social a i,
    .merter-mmenu-social a span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
        line-height: 1;
        font-size: inherit;
    }
    .merter-mmenu-social a span:before {
        display: block;
        line-height: 1;
    }

    /* Hamburger drawer — menü hover + ikon renkleri Merter mora uyumlu
       (tema style.css hâlâ #443297 / gri #f3f5f6 kullanıyor). */
    .stylehome1 a.mm-listitem__text,
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text,
    .stylehome1 span.mm-listitem__text {
        color: var(--merter-ink);
        border-left: 2px solid transparent;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    /* Kategori flaticon ikonları — varsayılan mor, hover'da koyu mor */
    .stylehome1 .mm-listitem__text i[class*="flaticon"],
    .stylehome1 .mm-listitem__text [class*="flaticon"]:before {
        color: var(--merter-purple);
        transition: color .2s ease;
    }
    .stylehome1 a.mm-listitem__text:hover,
    .stylehome1 a.mm-listitem__text:focus-visible,
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text:hover,
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text:focus-visible {
        background-color: var(--merter-purple-bg);
        border-left-color: var(--merter-purple);
        color: var(--merter-purple);
    }
    .stylehome1 a.mm-listitem__text:hover i[class*="flaticon"],
    .stylehome1 a.mm-listitem__text:hover [class*="flaticon"]:before,
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text:hover i[class*="flaticon"],
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text:hover [class*="flaticon"]:before {
        color: var(--merter-purple-d);
    }
    /* Tema'nın li:hover { color:#fff } kuralı açık zeminde ikonu beyazlatmasın */
    .stylehome1 li.mm-listitem:hover,
    .stylehome1 li.mm-listitem:active,
    .stylehome1 li.mm-listitem:focus {
        color: var(--merter-purple);
    }
    /* Açık akordeon / seçili satır — yumuşak lila zemin */
    .stylehome1 .mm-listitem_opened > .mm-listitem__btn,
    .stylehome1 .mm-listitem_opened > .mm-panel,
    .stylehome1 .mm-listitem_selected > .mm-listitem__text {
        background: var(--merter-purple-bg);
        color: var(--merter-purple);
    }
    /* İleri / geri okları + alt navbar */
    .stylehome1 .mm-btn_next:after,
    .stylehome1 .mm-btn_prev:before {
        color: var(--merter-purple);
    }
    .stylehome1 a.mm-listitem__text:hover.mm-btn_next:after,
    .stylehome1 a.mm-btn.mm-btn_next.mm-listitem__btn.mm-listitem__text:hover:after {
        color: var(--merter-purple-d);
    }
    .stylehome1 .mm-navbar {
        color: var(--merter-purple);
    }
    .merter-mmenu-btn-outline:hover,
    .merter-mmenu-btn-outline:focus-visible {
        background: var(--merter-purple-bg);
        border-color: var(--merter-purple);
        color: var(--merter-purple-d);
    }
    .merter-mmenu-btn:hover,
    .merter-mmenu-btn:focus-visible {
        filter: brightness(.97);
        color: var(--merter-purple-d);
    }
}

/* ----------------------------------------------------------------------------
   Üyelik / giriş (mockup 02) — sol görsel + sağ form kartı
   ---------------------------------------------------------------------------- */
.merter-auth-card { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-xl); overflow: hidden; box-shadow: 0 12px 45px rgba(20, 20, 40, .06); }
.merter-auth-thumb { height: 100%; min-height: 580px; background-size: cover; background-position: center; }
.merter-auth-body { padding: 50px 55px; }
.merter-auth-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin-bottom: 8px; }
.merter-auth-sub { color: #888; }
.merter-auth-form .form-group { margin-bottom: 18px; }
.merter-auth-form .form-label { font-weight: 500; color: #3a3f4a; margin-bottom: 7px; }
.merter-auth-form .form-control { height: 50px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); }
.merter-auth-form select.form-control { padding-right: 30px; }
/* Textarea — sabit 50px height'ı ez; varsayılan = min (küçültülemez, sadece büyütülür). */
.merter-auth-form textarea.form-control { height: 120px; min-height: 120px; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
.merter-auth-form textarea.merter-support-message { height: 200px; min-height: 200px; }
/* Checkbox — Bootstrap mavi focus/checked yerine global mor */
.merter-auth-check .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.15em;
    border: 1px solid #cfc7d2;
    border-radius: 3px;
    background-color: #fff;
    accent-color: var(--merter-purple);
    cursor: pointer;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.merter-auth-check .form-check-input:hover {
    border-color: var(--merter-purple-soft);
}
.merter-auth-check .form-check-input:focus,
.merter-auth-check .form-check-input:focus-visible {
    border-color: var(--merter-purple);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--merter-purple-bg);
}
.merter-auth-check .form-check-input:checked {
    background-color: var(--merter-purple);
    border-color: var(--merter-purple);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.merter-auth-check .form-check-input:checked:focus,
.merter-auth-check .form-check-input:checked:focus-visible {
    border-color: var(--merter-purple);
    box-shadow: 0 0 0 0.2rem var(--merter-purple-bg);
}
.merter-auth-check .form-check-label { font-size: 13px; color: #666; cursor: pointer; }
/* Çoktan seçmeli açılır liste (satıcı başvurusunda ürün kategorileri) —
   native <select multiple> mobilde kullanılamıyor, checkbox'lar menüde. */
.merter-multi { position: relative; }
.merter-multi-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: start; background: #fff; color: #8b8b96; cursor: pointer; }
.merter-multi-toggle.has-selection { color: var(--merter-text); }
.merter-multi-toggle::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #8b8b96; border-bottom: 2px solid #8b8b96; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.merter-multi-toggle[aria-expanded="true"] { border-color: var(--merter-purple); }
.merter-multi-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-4px, -4px); }
.merter-multi-menu { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 5; max-height: 220px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.merter-multi-option { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--merter-text); cursor: pointer; margin: 0; }
.merter-multi-option:hover { background: var(--merter-purple-bg); }
.merter-multi-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--merter-purple); cursor: pointer; }
.merter-form-note { color: #666; font-size: 13px; }
.merter-kvkk-link { color: var(--merter-purple); font-weight: 600; font-size: 13px; text-decoration: underline; white-space: nowrap; }
.merter-auth-alt { color: #666; font-size: 14px; }
.merter-auth-alt a { color: var(--merter-purple); font-weight: 600; }
.merter-auth-form .btn-signup { min-width: 220px; }
@media (max-width: 991px) { .merter-auth-body { padding: 35px 25px; } }

/* ----------------------------------------------------------------------------
   Sepet & Ödeme (mockup 06)
   ---------------------------------------------------------------------------- */
/* Tema section { padding: 100px 0 } inner page'lerde breadcrumb üst boşluğunu şişirir.
   Üst boşluk yalnız merter-body-shell; alt (footer) mesafesi --merter-footer-gap.
   Ödeme formu section'ı form içinde olduğu için form > section da sıfırlanır. */
.body_content_wrapper > section,
.body_content_wrapper form > section { padding-top: 0; }

/* Header nav ile breadcrumb arası — site geneli sabit mesafe (container hizası korunur). */
.body_content_wrapper.merter-body-shell { padding-top: 12px !important; }

/* Breadcrumb — alt içerikten sabit mesafe. Masaüstünde tam trail; mobilde listelemede
   header search soluna taşınır (yalnız son 2 seviye) → sayfa crumb gizlenir. */
.merter-breadcrumb { font-size: 14px; color: #888; margin: 0 0 15px; }
.merter-breadcrumb a { color: #888; }
.merter-breadcrumb a:hover { color: var(--merter-purple); }
.merter-breadcrumb span { margin: 0 6px; }
@media (max-width: 991.98px) {
    .merter-listing-page .merter-breadcrumb-desktop { display: none; }
}
.merter-back-link { display: inline-block; color: var(--merter-ink); font-weight: 500; margin-bottom: 20px; }
.merter-back-link:hover { color: var(--merter-purple); }
.merter-btn-outline { border: 1px solid #e0e0e6; color: #555; background: #fff; }
/* Kural: butonlarda hover'da mor border/stroke YOK (kararlaştırıldı) — yalnız metin/ikon rengi değişir. */
.merter-btn-outline:hover { color: var(--merter-purple); }
.merter-btn-purple { color: var(--merter-purple); border-color: #e3d6e3; }

/* Araç çubuğu */
.merter-cart-toolbar { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 12px; }
.merter-cart-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.merter-cart-toolbar-actions .btn { padding: 9px 18px; }
.merter-cart-toolbar-tools { display: flex; gap: 10px; align-items: center; margin-left: 6px; }
.merter-cart-search { position: relative; }
.merter-cart-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 13px; pointer-events: none; }
.merter-cart-search input {
    height: 42px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm);
    padding: 0 14px 0 36px; background: #fff; color: var(--merter-ink);
    outline: none; box-shadow: none; transition: border-color .2s ease;
}
.merter-cart-search input:hover { border-color: #d8d8e0; }
.merter-cart-search input:focus {
    border-color: var(--merter-purple);
    outline: none;
    box-shadow: none;
}
.merter-cart-search input::placeholder { color: #9a9aa8; }
/* Sırala — bootstrap-select (asort/QnA ile aynı dikey hiza + global liste stili). */
.merter-cart-sort-wrap { position: relative; min-width: 140px; }
.merter-cart-sort-wrap .bootstrap-select { width: auto !important; vertical-align: middle; }
.merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle {
    height: 42px !important; min-height: 42px; min-width: 140px;
    padding: 0 36px 0 14px !important;
    border: 1px solid var(--merter-line-2) !important; border-radius: var(--merter-radius-sm);
    background: #fff !important; color: var(--merter-ink) !important;
    font-size: 14px; font-weight: 500; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; justify-content: space-between;
    box-shadow: none !important; outline: 0 !important;
}
.merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle:hover,
.merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle:focus,
.merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle:active,
.merter-cart-sort-wrap .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--merter-purple) !important;
    background: #fff !important; color: var(--merter-ink) !important;
    box-shadow: none !important;
}
.merter-cart-sort-wrap .bootstrap-select .filter-option,
.merter-cart-sort-wrap .bootstrap-select .filter-option-inner {
    display: flex !important; align-items: center; height: 100%;
    overflow: visible; max-width: none; position: static !important;
    text-align: left; float: none; padding: 0; margin: 0;
}
.merter-cart-sort-wrap .bootstrap-select .filter-option-inner-inner {
    overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none;
    line-height: 1.2; display: block; padding: 0; margin: 0;
}
.merter-cart-sort-wrap .bootstrap-select.bs-placeholder .filter-option-inner-inner { color: #9a9aa8; }
.merter-cart-sort-wrap .bootstrap-select .dropdown-toggle::after {
    border: 0; width: 8px; height: 8px; margin: 0 !important;
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--merter-text); border-bottom: 2px solid var(--merter-text);
}
/* Native fallback (selectpicker yoksa) */
.merter-cart-sort-wrap > select.merter-cart-sort {
    height: 42px; min-width: 140px; border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-sm); padding: 0 14px; background: #fff;
    outline: none;
}
.merter-cart-sort-wrap > select.merter-cart-sort:focus { border-color: var(--merter-purple); }

/* Sepet araç çubuğu — mobil: 2 satır × 3 sütun
   (Kaydet | Çağır | Sil) / (Excel | Ara | Sırala). tools sarmalayıcısı
   display:contents ile grid çocuğu olur; masaüstü düzeni değişmez. */
@media (max-width: 767.98px) {
    .merter-cart-toolbar { gap: 8px; }
    .merter-cart-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        align-items: stretch;
    }
    .merter-cart-toolbar-tools { display: contents; }
    .merter-cart-toolbar-actions > .btn {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 6px 6px;
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
    }
    .merter-cart-toolbar-actions > .btn i { margin-right: 0 !important; font-size: 12px; flex-shrink: 0; }
    /* width:100% yalnız sepet toolbar'ında — hesap paneli (favoriler vb.) yan yana kalsın. */
    .merter-cart-toolbar .merter-cart-search { min-width: 0; width: 100%; }
    .merter-cart-toolbar .merter-cart-search input {
        width: 100%;
        height: 42px;
        padding: 0 8px 0 30px;
        font-size: 12px;
    }
    .merter-cart-toolbar .merter-cart-search i { left: 10px; font-size: 12px; }
    .merter-cart-toolbar .merter-cart-sort-wrap { min-width: 0; width: 100%; }
    .merter-cart-toolbar .merter-cart-sort-wrap .bootstrap-select { width: 100% !important; }
    .merter-cart-toolbar .merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 0 28px 0 8px !important;
        font-size: 12px !important;
    }
    .merter-cart-toolbar .merter-cart-sort-wrap .bootstrap-select .dropdown-toggle::after { right: 10px; }
    .merter-cart-toolbar .merter-cart-sort-wrap > select.merter-cart-sort { width: 100%; min-width: 0; }
}

/* Mağaza grubu */
.merter-vendor-group { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; }
.merter-vendor-head { display: flex; align-items: center; gap: 18px; padding: 16px 22px; background: #faf8fb; border-bottom: 1px solid #f0eef2; cursor: pointer; user-select: none; }
.merter-vendor-head.collapsed { border-bottom-color: transparent; }
.merter-vendor-name { color: #555; font-size: 14px; }
.merter-vendor-name-label { color: var(--merter-purple); }
.merter-vendor-name b { color: var(--merter-ink); font-weight: 700; }
.merter-vendor-badges { display: flex; gap: 16px; }
.merter-vendor-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #4a4a55; }
.merter-vendor-stat i { color: #9a9aa5; font-size: 12px; }
.merter-vendor-stat img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.merter-vendor-stat-text { display: inline; line-height: 1.3; }
.merter-vendor-stat-val { font-weight: 700; color: var(--merter-ink); }
.merter-vendor-stat-lbl { color: #4a4a55; }
.merter-vendor-stat-val::after { content: "\00a0"; }
.merter-vendor-total { margin-left: auto; font-weight: 700; color: var(--merter-ink); white-space: nowrap; }
/* Sepet satıcı başlığı — mobil: üst satır ad+fiyat, alt satır YATAY istatistik
   rozetleri (icon+sayı+başlık tek satırda, 3 öğe eşit genişlikte, aralarında
   dikey çizgi ayraç) — dikey (icon üstte/sayı ortada/başlık altta) İSTENMİYOR. */
@media (max-width: 767.98px) {
    .merter-vendor-head { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; }
    .merter-vendor-head .merter-vendor-name { flex: 1 1 0; min-width: 0; order: 1; }
    .merter-vendor-head .merter-vendor-total { margin-left: auto; order: 2; font-size: 14px; }
    .merter-vendor-head .merter-vendor-chevron { order: 3; flex-shrink: 0; }
    /* Yalnız .merter-vendor-head altında — drawer'daki .merter-vendor-badges'e sızmasın. */
    .merter-vendor-head .merter-vendor-badges { flex: 1 1 100%; order: 4; gap: 0; margin-top: 2px; }
    .merter-vendor-head .merter-vendor-stat { flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
    .merter-vendor-head .merter-vendor-stat + .merter-vendor-stat { border-left: 1px solid #e6e2e8; }
    .merter-vendor-head .merter-vendor-stat img { width: 16px; height: 16px; }
    .merter-vendor-head .merter-vendor-stat-text { display: inline-flex; align-items: baseline; gap: 4px; }
    .merter-vendor-head .merter-vendor-stat-val { font-size: 14px; line-height: 1.2; }
    .merter-vendor-head .merter-vendor-stat-lbl { font-size: 12px; line-height: 1.2; color: #6a6a75; }
    .merter-vendor-head .merter-vendor-stat-val::after { content: none; }
}
.merter-vendor-chevron { color: #aaa; transition: transform .25s ease; }
.merter-vendor-head.collapsed .merter-vendor-chevron { transform: rotate(180deg); }
/* Sepet tablosu — masaüstü: ürün sola, diğer sütunlar başlık+içerik ortalı.
   (vendor style.css tbody.table_body bekliyor; Merter o class'ı kullanmıyor →
   hizayı burada netleştiriyoruz.) */
.merter-cart-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.merter-cart-table table { margin: 0; width: 100%; table-layout: fixed; }
.merter-cart-table thead { background: transparent; }
.merter-cart-table thead th {
    font-size: 14px; color: #666; font-weight: 400;
    padding: 14px 16px; border-bottom: 1px solid #f0eef2;
    background: transparent; white-space: nowrap;
}
.merter-cart-table thead th:first-child,
.merter-cart-table tbody th[scope="row"] {
    width: 44%;
    text-align: left;
    white-space: normal;
}
.merter-cart-table thead th:nth-child(2),
.merter-cart-table tbody td:nth-child(2) { width: 16%; text-align: center; }
.merter-cart-table thead th:nth-child(3),
.merter-cart-table tbody td:nth-child(3) { width: 16%; text-align: center; }
.merter-cart-table thead th:nth-child(4),
.merter-cart-table tbody td:nth-child(4) { width: 14%; text-align: center; }
.merter-cart-table thead th:nth-child(5),
.merter-cart-table tbody td:nth-child(5) { width: 10%; text-align: center; }
.merter-cart-table tbody td,
.merter-cart-table tbody th {
    padding: 16px 16px; vertical-align: middle; border-bottom: 1px solid #f5f4f7;
}
.merter-cart-table .cart_list { min-width: 0; }
.merter-cart-table .cart_list > li:first-child { flex-shrink: 0; }
.merter-cart-table .merter-qty { margin: 0 auto; }
.merter-cart-thumb { width: 64px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--merter-radius-sm); flex-shrink: 0; display: block; }
.merter-cart-thumb-link { display: block; flex-shrink: 0; line-height: 0; width: 64px; }
.merter-cart-name { display: block; font-weight: 600; color: var(--merter-ink); margin-bottom: 4px; white-space: normal; word-break: break-word; line-height: 1.35; text-decoration: none; }
a.merter-cart-name:hover { color: var(--merter-purple); }
.merter-cart-meta { display: block; font-size: 13px; color: #999; white-space: normal; word-break: break-word; line-height: 1.35; }
.merter-cart-unit { color: #666; font-size: 14px; }
.merter-cart-price-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.35; }
.merter-cart-total { color: var(--merter-ink); }
.merter-cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: var(--merter-radius-sm); color: #5a5a66; transition: color .2s ease, background .2s ease; }
.merter-cart-remove:hover { color: #c44; background: #fbeceb; }

/* Sepet tablosu — mobilde yatay scroll'lu masaüstü satırı yerine tek-ekran kart
   satırı gösterilir (aynı .merter-cart-name/meta/unit/total class'ları → renk/font
   birebir aynı kalır, sadece dizilim mobile özel): görsel + 4 satır (ad, asorti,
   birim/seri fiyat, adet+toplam+sil). */
.merter-cart-row-mobile { display: none; }
@media (max-width: 767.98px) {
    .merter-cart-table { overflow-x: visible; }
    .merter-cart-table table { width: 100%; min-width: 0; }
    .merter-cart-table thead { display: none; }
    .merter-cart-row-desktop { display: none; }
    .merter-cart-row-mobile { display: table-row; }
    .merter-cart-table tbody td[colspan] { padding: 0; border-bottom: 1px solid #f5f4f7; }
    .merter-cart-mcard { display: flex; gap: 14px; padding: 14px 16px; align-items: flex-start; }
    .merter-cart-mcard-thumb { width: 104px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--merter-radius-sm); flex-shrink: 0; display: block; }
    .merter-cart-mcard .merter-cart-thumb-link { width: 104px; }
    .merter-cart-mcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
    /* Ürün adı tek satır (kart yüksekliği görsele göre sabit kalsın, uzun ad
       kartı büyütmesin) — fazlası "..." ile kırpılır. */
    .merter-cart-mcard-body .merter-cart-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .merter-cart-mcard-row { display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; }
    .merter-cart-mcard-row:last-child { justify-content: space-between; }
    .merter-cart-mcard-row .merter-cart-total { margin-left: auto; }
}
@media (max-width: 420px) {
    .merter-cart-mcard-thumb { width: 84px; }
    .merter-cart-mcard .merter-cart-thumb-link { width: 84px; }
}

/* Ödeme ekranı — mobil sabit alt bar (sepet drawer'ının alt bölümüyle aynı
   .merter-cart-drawer-* class'ları, sadece konumlandırma bu iki kural). */
.merter-checkout-sticky-bar { display: none; }
@media (max-width: 992px) {
    /* Sticky bar yüksekliği — pb70'i de ezer; footer mobilde gizli olduğu için
       sözleşmeler ile sayfa sonu arasında ekstra boşluk kalmaz. */
    .merter-checkout-page {
        padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Ödeme ekranında mobil footer gizle — sabit alt bar CTA; aradaki boşluk kalkar. */
    body:has(.merter-checkout-page) .footer_one { display: none !important; }
    .merter-checkout-sticky-bar {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        margin: 0; border-radius: 0;
        box-shadow: 0 -8px 24px rgba(20, 20, 43, .08);
        /* Açılınca detail yukarı büyüsün (bottom sabit); uzun içerikte scroll. */
        max-height: min(85vh, 720px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    /* Sözleşmeler — bilgilendirme ile yapışmasın; alt boşluk sticky clearance'a bırakılır. */
    .merter-checkout-contracts { margin-top: 20px; margin-bottom: 0; }
    /* Sayfadaki (sağ özet kutusu) Ürün Toplamları + Sipariş Özeti + Genel Toplam
       mobilde gizlenir — aynı bilgi sticky bar collapse detail'inde. Kupon /
       sipariş notu / bilgilendirme ekranda kalır. */
    .merter-checkout-page .merter-summary-box,
    .merter-checkout-page .merter-grand-total { display: none; }
    /* Sayfadaki (sağ özet kutusu) Ödeme Yap butonu mobilde gizlenir — aksiyon
       artık sabit alt barda, aynı buton iki kez görünmesin. */
    .merter-checkout-page .merter-summary-cta { display: none; }

    /* Mobil sıra: form alanları → kupon/sipariş notu → sözleşmeler (en alt).
       col-lg-8 display:contents ile çocukları row flex'ine çıkarır; masaüstü
       düzeni (sözleşmeler sol sütunda) değişmez. */
    .merter-checkout-layout { display: flex; flex-direction: column; }
    .merter-checkout-layout > .col-lg-8 { display: contents; }
    .merter-checkout-main-stack { order: 1; }
    .merter-checkout-aside { order: 2; }
    .merter-checkout-contracts { order: 3; }
    /* display:contents col gutter kaybını telafi et (aside ile hizalı kalsın). */
    .merter-checkout-main-stack,
    .merter-checkout-contracts {
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    }

    /* Sticky collapse detail — ekrandaki özet kartlarıyla aynı dil (başlık + satırlar).
       Header'daki `.merter-cart-drawer-summary-body > div` flex satır kuralını
       kart/grand çocuklarında override ederiz. */
    .merter-checkout-sticky-detail {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 4px;
    }
    .merter-checkout-sticky-detail > .merter-checkout-sticky-detail-card {
        display: block;
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: inherit;
        color: inherit;
        font-weight: inherit;
    }
    .merter-checkout-sticky-detail-title {
        font-size: 13px;
        font-weight: 700;
        color: #15294d;
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eef0f3;
    }
    .merter-checkout-sticky-detail-card > div:not(.merter-checkout-sticky-detail-title) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #777;
        padding: 6px 0;
        border-bottom: 1px solid #f3f2f5;
    }
    .merter-checkout-sticky-detail-card > div:not(.merter-checkout-sticky-detail-title):last-child { border-bottom: 0; }
    .merter-checkout-sticky-detail-card > div b { color: var(--merter-ink); font-weight: 600; }
    .merter-checkout-sticky-detail > .merter-checkout-sticky-detail-grand {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f5f3f7;
        border-radius: 8px;
        padding: 12px 14px;
        color: #555;
        font-size: 13px;
        font-weight: 500;
        border: 0;
    }
    .merter-checkout-sticky-detail-grand b { font-size: 16px; color: var(--merter-ink); font-weight: 700; }
}

.merter-qty { display: inline-flex; align-items: center; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); overflow: hidden; }
.merter-qty button { width: 34px; height: 38px; background: #f7f6f9; border: 0; color: #555; }
.merter-qty input { width: 44px; height: 38px; border: 0; text-align: center; -moz-appearance: textfield; }
.merter-qty input::-webkit-outer-spin-button, .merter-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Yan sepet drawer ile aynı kompakt miktar seçici (merter-qty-sm) */
.merter-qty-btn { border: 0; color: #555; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.merter-qty-input { font-size: 14px; color: var(--merter-ink); line-height: 1; }
.merter-qty-sm .merter-qty-btn { width: 26px; height: 26px; font-size: 11px; background: transparent; flex-shrink: 0; }
.merter-qty-sm .merter-qty-input { flex: 1; min-width: 28px; text-align: center; font-size: 13px; }
.merter-cart-note { background: #f4eef5; border-radius: var(--merter-radius-md); padding: 16px 20px; color: #6a3469; font-size: 14px; }

/* Sepetim altı "Keşfet" şeridi — sekmeli öneri/favori/sipariş carousel'i (merter-account-tabs
   ile aynı alt-çizgi sekme deseni; kart .merter-product-card ile aynı görsel dil). */
.merter-suggest-empty { text-align: center; padding: 50px 20px; color: #8a8a98; font-size: 14px; }
/* Yan oklar: shop_item_4grid_slider ile aynı — sol/sağda absolute, dot'lar altta (dot üstünde değil). */
.merter-suggest-carousel { position: relative; }
.merter-suggest-carousel.owl-loaded .owl-nav { margin-top: 0; }
.merter-suggest-carousel.owl-theme.owl-loaded .owl-prev,
.merter-suggest-carousel.owl-theme.owl-loaded .owl-next {
    position: absolute;
    top: 200px;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    color: #112137;
    margin: 0;
    transition: all .3s ease;
}
.merter-suggest-carousel.owl-theme.owl-loaded .owl-prev { left: -30px; }
.merter-suggest-carousel.owl-theme.owl-loaded .owl-next { right: -30px; }
.merter-suggest-carousel.owl-theme.owl-loaded .owl-prev:hover,
.merter-suggest-carousel.owl-theme.owl-loaded .owl-next:hover { border-color: #112137; }
@media (max-width: 400px) {
    .merter-suggest-carousel.nav_none_400.owl-theme .owl-nav { display: none !important; }
}
/* Tek sayfa: ok yok, tek dot görünür (genel .merter-carousel kuralı tek dot'u gizliyordu). */
.merter-suggest-carousel.is-single-page .owl-nav { display: none !important; }
.merter-suggest-section .merter-suggest-carousel.is-single-page .owl-dots { display: block !important; }
.merter-suggest-section .merter-suggest-carousel.is-single-page .owl-dots .owl-dot:only-child { display: inline-flex !important; }

/* 2x2 vitrin: yalnız mobil (Önerilen). Web'de --desktop yatay sıra gösterilir. */
.merter-suggest-carousel--mobile { display: none; }
.merter-suggest-carousel--desktop { display: block; }
@media (max-width: 767.98px) {
    .merter-suggest-carousel--desktop { display: none !important; }
    .merter-suggest-carousel--mobile { display: block !important; }
}
.merter-suggest-vitrine-page { width: 100%; }
.merter-suggest-vitrine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: var(--merter-grid-border);
}
.merter-suggest-vitrine-grid > .item {
    width: 100%;
    margin-top: -1px; /* satır arası border birleşmesi (listing grid ile aynı) */
}
/* Vitrin daha yüksek → okları dikey ortala (tek sıra top:200px yerine). */
.merter-suggest-vitrine.owl-theme.owl-loaded .owl-prev,
.merter-suggest-vitrine.owl-theme.owl-loaded .owl-next {
    top: 50%;
    transform: translateY(-50%);
}
/* Owl stage-outer zaten sol/sağ border veriyor; vitrin grid'in kendi left border'ı çift çizgi yapmasın. */
.merter-suggest-vitrine.owl-loaded .merter-suggest-vitrine-grid { border-left: 0; }

/* Sağ özet sidebar */
.merter-cart-promo { position: relative; border-radius: var(--merter-radius-lg); overflow: hidden; padding: 26px 22px; min-height: 180px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.merter-cart-promo:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(90,30,89,.25), var(--merter-purple-d)); }
.merter-cart-promo-body { position: relative; z-index: 2; color: #fff; }
.merter-cart-promo-body h4 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.merter-cart-promo-body p { color: rgba(255,255,255,.85); font-size: 13px; margin-bottom: 14px; }
.merter-summary-box { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 22px 24px; }
.merter-summary-title { font-size: var(--merter-fs-h4); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin-bottom: 16px; }
.merter-summary-list { list-style: none; padding: 0; }
.merter-summary-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #f3f2f5; color: #777; }
.merter-summary-list li:last-child { border-bottom: 0; }
.merter-summary-list li b { color: var(--merter-ink); font-weight: 600; }
.merter-grand-total { display: flex; justify-content: space-between; align-items: center; background: #f5f3f7; border-radius: var(--merter-radius-md); padding: 16px 24px; }
.merter-grand-total span { color: #555; font-weight: 500; }
.merter-grand-total b { font-size: 18px; color: var(--merter-ink); }
.merter-coupon { display: flex; gap: 10px; }
.merter-coupon .form-control { height: 46px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); color: var(--merter-ink); font-size: 14px; }
.merter-coupon .form-control::placeholder { color: #9a9aa8; font-weight: 400; opacity: 1; }
.merter-coupon .btn { height: 46px; padding: 0 22px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.merter-coupon-applied { flex: 1; display: flex; align-items: center; height: 46px; padding: 0 16px; border: 1px solid #d8ecd9; background: #f3faf4; border-radius: var(--merter-radius-sm); color: #1e7e34; font-size: 14px; font-weight: 600; }
/* İndirim kodu — sepet + ödeme özetinde geçici gizli (markup/JS korunur). */
.merter-coupon,
.merter-form-msg[data-coupon-msg] { display: none !important; }
.merter-form-msg.is-success { color: #1e7e34; }
.merter-form-msg.is-error { color: #c0392b; }
.btn-block { width: 100%; }
/* Sepet/ödeme özeti ana CTA — kupon satırı ve toolbar butonlarıyla aynı 46px yükseklik (mobil+web). */
.merter-summary-cta {
    height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
}

/* Ödeme sayfası bölümleri */
.merter-checkout-section { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; }
.merter-section-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; }
.merter-section-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #f4eef5; color: var(--merter-purple); border-radius: var(--merter-radius-sm); }
.merter-section-head h5 { margin: 0; font-size: 16px; font-weight: 600; color: var(--merter-ink); }
.merter-section-chevron { margin-left: auto; color: #aaa; transition: transform .25s ease; }
.merter-section-head.collapsed .merter-section-chevron { transform: rotate(180deg); }
.merter-section-body { padding: 0 22px 24px; }
.merter-section-label { color: #777; font-weight: 500; margin-bottom: 14px; }
/* Checkout adres seçimi — kartlar sabit yükseklikte (satırlar hizalı); uzun adres
   metni "…" ile kısaltılır. Masaüstü de mobil gibi: 2 sütun; 1. item her zaman
   "Yeni Adres Ekle". */
.merter-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.merter-address-grid > .merter-address-grid-full { grid-column: 1 / -1; }
.merter-address-card { position: relative; display: block; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); padding: 14px 16px; margin: 0; transition: all .2s ease; }
.merter-address-grid .merter-address-card { height: 94px; overflow: hidden; }
.merter-address-card.active { border-color: var(--merter-purple); background: #faf6fa; }
.merter-address-card-select { display: block; margin: 0; padding-right: 34px; cursor: pointer; }
.merter-address-card-select b,
.merter-order-address-card > b { display: block; color: var(--merter-ink); margin-bottom: 4px; font-size: 14px; line-height: 1.35; }
.merter-address-card-select span,
.merter-order-address-card > span { display: block; font-size: 13px; color: #888; line-height: 1.45; }
.merter-address-grid .merter-address-card-select b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merter-address-grid .merter-address-card-select span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.merter-address-card-edit { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; font-size: 12px; z-index: 1; }
.merter-address-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 94px; padding: 14px 16px; border: 1px dashed #cfc7d2; border-radius: var(--merter-radius-md); background: #fff; color: var(--merter-purple); cursor: pointer; order: -1; }
.merter-address-add:hover { background: #faf6fa; color: var(--merter-purple); }
/* Ödeme > Havale/EFT — banka dropdown (bootstrap-select) + seçili hesabın kopyalanabilir detayları */
.merter-bank-transfer .form-label { color: #555; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.merter-bank-select { position: relative; }
.merter-bank-select .bootstrap-select { width: 100% !important; }
.merter-bank-select .bootstrap-select > .dropdown-toggle {
  height: 46px !important; min-height: 46px; padding: 0 40px 0 14px !important;
  border: 1px solid var(--merter-line-2) !important; border-radius: var(--merter-radius-sm);
  background: #fff !important; color: var(--merter-ink) !important;
  font-size: 14px; font-weight: 500; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important;
  box-shadow: none !important; outline: 0 !important;
}
.merter-bank-select .bootstrap-select > .dropdown-toggle:hover,
.merter-bank-select .bootstrap-select > .dropdown-toggle:focus,
.merter-bank-select .bootstrap-select > .dropdown-toggle:active,
.merter-bank-select .bootstrap-select.show > .dropdown-toggle {
  border-color: var(--merter-purple) !important;
  background: #fff !important; color: var(--merter-ink) !important;
  box-shadow: none !important; outline: 0 !important;
}
.merter-bank-select .bootstrap-select .filter-option,
.merter-bank-select .bootstrap-select .filter-option-inner {
  display: flex !important; align-items: center; height: 100%;
  overflow: hidden; max-width: none; position: static !important;
  text-align: left; float: none; padding: 0; margin: 0;
}
.merter-bank-select .bootstrap-select .filter-option-inner-inner {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  line-height: 1.3; display: block; padding: 0; margin: 0; color: var(--merter-ink);
}
.merter-bank-select .bootstrap-select .dropdown-toggle::after {
  border: 0; width: 8px; height: 8px; margin: 0 !important;
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid var(--merter-text); border-bottom: 2px solid var(--merter-text);
}
/* Native fallback (selectpicker yoksa) */
.merter-bank-select > select.js-bank-select {
  height: 46px; width: 100%; border: 1px solid var(--merter-line-2);
  border-radius: var(--merter-radius-sm); padding: 0 14px; background: #fff;
  color: var(--merter-ink); font-size: 14px; outline: none; box-shadow: none;
}
.merter-bank-select > select.js-bank-select:focus { border-color: var(--merter-purple); }
.merter-bank-details-wrap { margin-top: 4px; }
.merter-bank-details { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); padding: 16px 18px; background: #faf6fa; }
.merter-bank-details[hidden] { display: none !important; }
.merter-bank-details-logo { margin-bottom: 14px; }
.merter-bank-details-logo img { height: 40px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
/* Label kolonu en uzun field name'e göre; tüm değerler aynı soldan başlar (web + mobil).
   .merter-bank-details altında scope'lu — bank-accounts sayfasındaki .merter-bank-row flex kuralı ezmesin. */
.merter-bank-details .merter-bank-details-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
}
.merter-bank-details .merter-bank-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  column-gap: 16px;
  justify-content: unset;
  padding: 0;
  border-bottom: 0;
  font-size: inherit;
}
.merter-bank-details .merter-bank-row > span {
  font-size: 12px; color: #888; font-weight: 500;
  text-align: left; white-space: nowrap;
}
.merter-bank-details .merter-bank-row > b {
  font-size: 14px; color: var(--merter-ink); font-weight: 600;
  word-break: break-word; line-height: 1.4; min-width: 0;
  text-align: left; justify-self: start;
}
.merter-bank-details .merter-bank-row-iban > b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}
.merter-bank-details .merter-bank-copy {
  width: 32px; height: 32px; border: 1px solid var(--merter-line-2);
  border-radius: var(--merter-radius-sm); background: #fff; color: #666;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: 0 0 auto; font-size: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.merter-bank-details .merter-bank-copy:hover { color: var(--merter-purple); border-color: var(--merter-purple); background: #fff; }
.merter-bank-details .merter-bank-copy.is-copied { color: #1e7e34; border-color: #1e7e34; }
@media (max-width: 575.98px) {
  .merter-bank-details .merter-bank-details-rows { column-gap: 12px; }
  .merter-bank-details .merter-bank-row { column-gap: 12px; }
  .merter-bank-details .merter-bank-row > span { font-size: 11px; }
  .merter-bank-details .merter-bank-row > b { font-size: 13px; }
}
.merter-ship-option { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); padding: 14px 18px; margin-bottom: 10px; cursor: pointer; }
.merter-ship-option input { accent-color: var(--merter-purple); cursor: pointer; }
.merter-ship-option.active { border-color: var(--merter-purple); background: #faf6fa; }
.merter-ship-option b { color: var(--merter-ink); }
.merter-own-cargo-fields { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); padding: 14px 18px; margin: -4px 0 10px; background: #faf6fa; }
.merter-own-cargo-fields .form-label { color: #555; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.merter-own-cargo-fields .form-control { height: 46px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); color: var(--merter-ink); }
.merter-own-cargo-fields textarea.form-control { height: auto; }
/* Fatura tipi (Bireysel/Kurumsal) + Kimlik/Vergi No — ortak partial (inc.billing_invoice_type_fields)
   merter'e kendi form kutusu diliyle (own-cargo-fields ile aynı tonda) giydiriliyor. */
.merter-invoice-fields { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); padding: 14px 18px; background: #faf6fa; }
.merter-invoice-fields label { color: #555; font-size: 13px; font-weight: 500; margin-bottom: 6px; display: block; }
.merter-invoice-fields .radio-default { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-bottom: 0; cursor: pointer; }
.merter-invoice-fields .radio-default input { accent-color: var(--merter-purple); cursor: pointer; }
.merter-invoice-fields .form-control { height: 46px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); color: var(--merter-ink); margin-bottom: 12px; }
.merter-invoice-fields .col-md-12:last-child .form-control,
.merter-invoice-fields > .form-control:last-child { margin-bottom: 0; }
.merter-invoice-fields .required { color: #e74c3c; }
.merter-pay-tabs { margin-top: 4px; }
.merter-pay-tabnav { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--merter-line); margin: 0 0 22px; padding: 0; list-style: none; }
.merter-pay-tabnav li { margin: 0; }
.merter-pay-tab { background: none; border: 0; padding: 12px 2px 14px; color: #777; font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.merter-pay-tab.active { color: var(--merter-ink); font-weight: 600; border-bottom-color: var(--merter-ink); }
.merter-pay-panels { min-height: 120px; }
.merter-pay-panel { display: none; }
.merter-pay-panel.active { display: block; }
.merter-card-form .form-label { color: #555; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.merter-card-form .form-control { height: 46px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); color: var(--merter-ink); }
.merter-card-form .form-control::placeholder { color: #bbb; }
.merter-card-form .form-control:disabled { background: #fafafa; cursor: not-allowed; }
.merter-free { color: #2e9e5b !important; font-weight: 700; font-size: 13px; }
.merter-installments { background: #f7f6f9; border-radius: var(--merter-radius-md); padding: 18px; height: 100%; }
.merter-installments h6 { font-weight: 600; color: var(--merter-ink); margin-bottom: 8px; }
.merter-installments p { font-size: 13px; color: #888; margin: 0; }
.merter-contract-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid #f3f2f5; color: #555; }
.merter-contract-row:last-child { border-bottom: 0; padding-bottom: 0; }
.merter-contract-row a { color: var(--merter-purple); font-weight: 500; font-size: 13px; white-space: nowrap; margin-top: 2px; text-decoration: none; }
.merter-contract-row a:hover { text-decoration: underline; }
.merter-contract-check { margin-bottom: 0; }
.merter-contract-check .form-check-label { color: #555; font-size: 13px; line-height: 1.45; }
.merter-contract-title-caps { text-transform: uppercase; font-weight: 600; }
/* Checkout sözleşme modalı — CMS içerik tipografisi. */
.merter-checkout-contract-body p { color: #777; line-height: 1.8; margin-bottom: 12px; }
.merter-checkout-contract-body h1,
.merter-checkout-contract-body h2,
.merter-checkout-contract-body h3,
.merter-checkout-contract-body h4 { font-size: 18px; font-weight: 700; color: var(--merter-ink); margin: 18px 0 10px; }
.merter-order-note-box { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 18px 20px; }
.merter-order-note-box .form-label { color: var(--merter-ink); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.merter-order-note-box textarea.form-control { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); min-height: 96px; resize: vertical; color: var(--merter-ink); font-size: 14px; padding: 12px 14px; }
.merter-order-note-box textarea.form-control::placeholder { color: #9a9aa8; font-weight: 400; opacity: 1; }
.merter-info-note { background: #f4eef5; border-radius: var(--merter-radius-md); padding: 16px 18px; }
.merter-info-note b { display: block; color: #6a3469; margin-bottom: 6px; }
.merter-info-note p { font-size: 13px; color: #888; }

/* Ödeme — Sepetimdeki Ürünler özet satırı (collapsed bölüm) */
.merter-checkout-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f3f2f5; }
.merter-checkout-line:last-child { border-bottom: 0; }
.merter-checkout-line img { width: 52px; height: 66px; object-fit: cover; border-radius: var(--merter-radius-sm); flex-shrink: 0; }
.merter-checkout-line-info { flex: 1; min-width: 0; }
.merter-checkout-line-info b { display: block; color: var(--merter-ink); font-size: 14px; font-weight: 600; }
.merter-checkout-line-info span { font-size: 12px; color: #999; }
.merter-checkout-line-qty { font-size: 13px; color: #777; white-space: nowrap; }
.merter-checkout-line-total { color: var(--merter-ink); white-space: nowrap; }

/* Modal backdrop (overlay) — TÜM modallar için varsayılan davranış.
   Şablonun style.css'i `.modal-backdrop { display: none }` ile Bootstrap
   overlay'ini kapatıyordu; sepet drawer kendi overlay'ini kullandığı için
   etkilenmiyordu ama Bootstrap modalları overlay'siz açılıyordu. app.css en son
   yüklendiği için burada geri açıyoruz — sepet drawer overlay'iyle aynı tonda
   (rgba(0,0,0,.45)) karartma tüm modallarda default olur. */
.modal-backdrop { display: block; }
.modal-backdrop.show { opacity: .45; }

/* Adres modal */
.merter-address-modal .modal-content { border: 0; border-radius: var(--merter-radius-xl); }
.merter-address-modal .modal-header { padding: 26px 28px 0; }
.merter-address-modal .modal-title { font-weight: 700; color: var(--merter-ink); }
.merter-modal-sub { color: #888; font-size: 14px; margin-top: 4px; }
.merter-address-modal .modal-body { padding: 22px 28px 28px; }
/* Mobil — yan yana sütunlarda taşmayı önle; telefon ülke kodunu daralt. */
@media (max-width: 767.98px) {
    .merter-address-modal .modal-header { padding: 18px 16px 0; }
    .merter-address-modal .modal-body { padding: 14px 16px 20px; }
    .merter-address-modal .row > [class*="col-"] { min-width: 0; }
    .merter-address-modal .form-control,
    .merter-address-modal .form-select { font-size: 13px; }
    .merter-address-modal .merter-phone-field .input-group { flex-wrap: nowrap; }
    .merter-address-modal .merter-phone-country {
        flex: 0 0 72px !important; max-width: 72px !important;
        padding-left: 6px; padding-right: 18px; font-size: 12px;
    }
    .merter-address-modal .merter-phone-number { min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* Mobil header — dil/para birimi modalı (selectpicker = global tema select) */
.merter-lc-modal .modal-content { border: 0; border-radius: var(--merter-radius-xl); }
.merter-lc-modal .modal-header { padding: 22px 24px 0; border: 0; }
.merter-lc-modal .modal-title { font-weight: 700; color: var(--merter-ink); font-size: 17px; }
.merter-lc-modal .modal-body { padding: 18px 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.merter-lc-field label { display: block; font-weight: 600; color: var(--merter-ink); font-size: 13px; margin-bottom: 8px; }
.merter-lc-select { position: relative; width: 100%; }
.merter-lc-select .bootstrap-select { width: 100% !important; }
.merter-lc-select .bootstrap-select > .dropdown-toggle {
    height: 48px !important; min-height: 48px; padding: 0 40px 0 16px !important;
    border: 1px solid var(--merter-line-2) !important; border-radius: var(--merter-radius-sm);
    background: #fff !important; color: var(--merter-ink) !important;
    font-size: 15px; font-weight: 500; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important;
    box-shadow: none !important; outline: 0 !important;
}
.merter-lc-select .bootstrap-select > .dropdown-toggle:hover,
.merter-lc-select .bootstrap-select > .dropdown-toggle:focus,
.merter-lc-select .bootstrap-select > .dropdown-toggle:active,
.merter-lc-select .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--merter-purple) !important;
    background: #fff !important; color: var(--merter-ink) !important;
    box-shadow: none !important; outline: 0 !important;
}
.merter-lc-select .bootstrap-select .filter-option,
.merter-lc-select .bootstrap-select .filter-option-inner {
    display: flex !important; align-items: center; height: 100%;
    overflow: hidden; max-width: none; position: static !important;
    text-align: left; float: none; padding: 0; margin: 0;
}
.merter-lc-select .bootstrap-select .filter-option-inner-inner {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
    line-height: 1.3; display: block; padding: 0; margin: 0; color: var(--merter-ink);
}
.merter-lc-select .bootstrap-select .dropdown-toggle::after {
    border: 0; width: 8px; height: 8px; margin: 0 !important;
    position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--merter-text); border-bottom: 2px solid var(--merter-text);
}
/* Native fallback (selectpicker yoksa) */
.merter-lc-select > select {
    height: 48px; width: 100%; border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-sm); padding: 0 16px; background: #fff;
    color: var(--merter-ink); font-size: 15px; outline: none; box-shadow: none;
}
.merter-lc-select > select:focus { border-color: var(--merter-purple); }
/* Modal üstünde açılsın — menü body'ye taşındığı için z-index şart */
.bs-container.merter-lc-picker { z-index: 1100 !important; }

/* Kayıtlı Sepeti Çağır modalı */
.merter-saved-cart-modal .modal-content { border: 0; border-radius: var(--merter-radius-xl); }
.merter-saved-cart-modal .modal-header { padding: 24px 28px 0; }
.merter-saved-cart-modal .modal-title { font-weight: 700; color: var(--merter-ink); }
.merter-saved-cart-modal .modal-body { padding: 18px 28px 28px; }
/* Outline (btn-white): tema sarı :before fill → mor. */
.merter-saved-cart-modal .btn.btn-white:before { background-color: var(--merter-purple); }
.merter-saved-cart-modal .btn.btn-white:hover,
.merter-saved-cart-modal .btn.btn-white:focus,
.merter-saved-cart-modal .btn.btn-white:active { border-color: var(--merter-purple); color: #fff; }
.merter-saved-cart-msg { font-size: 14px; margin: 0 0 15px; }
.merter-saved-cart-msg:empty { display: none; }
.merter-saved-cart-msg.is-success { color: #1e7e34; }
.merter-saved-cart-msg.is-error { color: #c0392b; }
.merter-saved-cart-list { list-style: none; margin: 0; padding: 0; }
/* Düz satır (Sepeti Kaydet modalı) */
.merter-saved-cart-list > .merter-saved-cart-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); margin-bottom: 10px;
}
.merter-saved-cart-list > .merter-saved-cart-row:last-child { margin-bottom: 0; }
/* Collapse accordion (Kayıtlı Sepeti Çağır) */
.merter-saved-cart-accordion { margin-bottom: 10px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); overflow: hidden; background: #fff; }
.merter-saved-cart-accordion:last-child { margin-bottom: 0; }
.merter-saved-cart-accordion > .merter-saved-cart-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px;
}
.merter-saved-cart-toggle {
    display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0;
    padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.merter-saved-cart-chevron {
    flex: none; width: 18px; margin-top: 4px; color: #9a9aa6; font-size: 12px;
    transition: transform .2s ease;
}
.merter-saved-cart-toggle:not(.collapsed) .merter-saved-cart-chevron { transform: rotate(180deg); color: var(--merter-purple); }
.merter-saved-cart-info { display: flex; flex-direction: column; min-width: 0; }
.merter-saved-cart-name { font-weight: var(--merter-fw-label); color: var(--merter-heading-color); font-size: var(--merter-fs-h5); }
.merter-saved-cart-meta { font-size: 12.5px; color: #9a9aa6; margin-top: 2px; }
.merter-saved-cart-add { flex: none; white-space: nowrap; }
.merter-saved-cart-collapse { border-top: 1px solid #f0f0f4; }
/* Ürün listesi scroll'u collapse içinde — çok görsel modalı şişirmez. */
.merter-saved-cart-products {
    padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; background: #fafafb;
    max-height: 240px; overflow-y: auto;
}
.merter-saved-cart-products::-webkit-scrollbar { width: 5px; }
.merter-saved-cart-products::-webkit-scrollbar-track { background: transparent; }
.merter-saved-cart-products::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.merter-saved-cart-products-status { margin: 0; font-size: 13px; color: #9a9aa6; padding: 6px 2px; }
.merter-saved-cart-products-status.is-error { color: #c0392b; }
.merter-saved-cart-product {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    background: #fff; border: 1px solid #f0f0f4; border-radius: var(--merter-radius-sm); flex-shrink: 0;
}
.merter-saved-cart-product-thumb {
    width: 44px; height: 56px; flex-shrink: 0; border-radius: var(--merter-radius-sm);
    overflow: hidden; background: #f7f7fa;
}
.merter-saved-cart-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merter-saved-cart-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.merter-saved-cart-product-name {
    color: var(--merter-ink); font-weight: 600; font-size: 13.5px; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merter-saved-cart-product-name:hover { color: var(--merter-purple); }
.merter-saved-cart-product-meta { color: #8a8a98; font-size: 12px; }

/* ----------------------------------------------------------------------------
   Ürün Listeleme (mockup 04) — sol filtre sidebar + sağ grid
   ---------------------------------------------------------------------------- */
.merter-listing-banner { min-height: 150px; align-items: center; }
.merter-listing-banner .merter-campaign-title { font-size: var(--merter-fs-h4); }
/* Tek tam-genişlik sayfa banner'ı — ortalı başlık, sayfa başlığı yüksekliği. */
.merter-listing-banner-full { min-height: 200px; justify-content: center; text-align: center; }
.merter-listing-banner-full .merter-campaign-body { max-width: 100%; }
.merter-listing-banner-full .merter-campaign-title { font-size: var(--merter-fs-h2); margin-bottom: 0; text-transform: uppercase; letter-spacing: .5px; }

/* Sol filtre paneli altı reklam banner'ı — campaign-card'ın dikey (portrait) varyantı. */
.merter-sidebar-ad { display: flex; min-height: 360px; text-decoration: none; }
/* Ajansın dikey banner'ı (1788x3450) kullanılırken oranı korunur; panelden
   yatay bir görsel yüklenirse bu sınıf düşer ve min-height'e geri dönülür. */
.merter-sidebar-ad.is-portrait { aspect-ratio: 1788 / 3450; min-height: 0; }
.merter-sidebar-ad .merter-campaign-body { max-width: 100%; }
.merter-sidebar-ad .merter-campaign-title { font-size: var(--merter-fs-h3); margin-bottom: 0; }
/* Blog liste: mobilde dikey banner ~1/3 yükseklik (360→120) — yatay şerit. */
@media (max-width: 991.98px) {
    .merter-blog-page .merter-sidebar-ad {
        min-height: 100px;
        padding: 16px 18px;
        align-items: flex-end;
    }
    .merter-blog-page .merter-sidebar-ad .merter-campaign-title { font-size: var(--merter-fs-h5); }
    .merter-blog-page .merter-sidebar-ad .merter-campaign-off { margin-bottom: 6px; padding: 3px 10px; font-size: 12px; }
}

/* PJAX: filtre uygulanırken kabuğu soluklaştır + tıklamayı kilitle (anlık geri bildirim). */
#merter-catalog-shell { transition: opacity .15s ease; }
#merter-catalog-shell.is-loading { opacity: .55; pointer-events: none; }
.merter-listing-load-more.is-busy { opacity: .6; pointer-events: none; }

.merter-filter-sidebar { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 6px 20px; }
@media (min-width: 992px) { .merter-filter-sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5d5df transparent; } }
.merter-filter-sidebar::-webkit-scrollbar { width: 6px; }
.merter-filter-sidebar::-webkit-scrollbar-thumb { background: #d5d5df; border-radius: 6px; }
.merter-filter-group { border-bottom: 1px solid #f0eef2; padding: 18px 0; }
.merter-filter-group:last-child { border-bottom: 0; }
.merter-filter-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.merter-filter-head h6 { margin: 0; font-size: 15px; font-weight: 600; color: var(--merter-ink); }
.merter-filter-toggle { color: #aaa; font-size: 18px; line-height: 1; width: 18px; text-align: center; }
.merter-filter-toggle::after { content: "–"; }
.merter-filter-group.is-collapsed .merter-filter-toggle::after { content: "+"; }
.merter-filter-group.is-collapsed .merter-filter-body { display: none; }
.merter-filter-search { position: relative; margin: 14px 0 10px; }
.merter-filter-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 12px; }
.merter-filter-search input { width: 100%; height: 38px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm); padding: 0 12px 0 32px; font-size: 13px; }
.merter-filter-list { list-style: none; padding: 0; }
/* 10'dan fazla item → liste view: yaklaşık 10 satır görünür, kalanı scroll'da. */
.merter-filter-list--scroll { max-height: 300px; overflow-y: auto; padding-right: 6px; }
.merter-filter-list--scroll::-webkit-scrollbar { width: 5px; }
.merter-filter-list--scroll::-webkit-scrollbar-track { background: #fff; }
.merter-filter-list--scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.merter-filter-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.merter-filter-check { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; font-size: 14px; color: #555; }
.merter-filter-check input { width: 17px; height: 17px; accent-color: var(--merter-purple); }
/* Linkli filtre satırında kutu tıklaması parent <a>'ya düşsün (mobil sheet + masaüstü PJAX).
   label.merter-filter-check native davranışını bozmamak için yalnız a > input. */
a.merter-filter-check input { pointer-events: none; }
.merter-filter-count { font-size: 13px; color: #b3b3bb; }
/* Fiyat aralığı filtresi — min/max yan yana, uygula butonu tam genişlik. */
.merter-filter-price-inputs { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; }
.merter-filter-price-input { flex: 1 1 0; min-width: 0; height: 38px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm); padding: 0 10px; font-size: 13px; }
.merter-filter-price-input:focus { outline: none; border-color: var(--merter-purple); }
.merter-filter-price-sep { color: #b3b3bb; font-size: 13px; flex-shrink: 0; }
.merter-filter-price-apply { margin-top: 4px; }

/* Mobil filtre/sıralama araç çubuğu — sidebar mobilde gizli (bkz. list.blade.php d-none d-lg-block),
   yerine bu 2 icon-button + bottom-sheet modaller (.merter-sheet-modal, aşağıda). */
.merter-mobile-toolbar { display: flex; gap: 10px; margin-bottom: 10px; }
/* Katalog mobilde: Filtrele/Sırala → banner → liste arası dikey boşluğu sıkılaştır
   (masaüstü mb25/bar padding korunur; çipler toolbar altında → bar boşken çökert). */
@media (max-width: 991.98px) {
    .merter-listing-page .merter-listing-banner.mb25 {
        margin-bottom: 10px !important;
    }
    .merter-listing-page .merter-listing-bar.mb25 {
        margin-bottom: 10px !important;
    }
    .merter-listing-page .merter-listing-bar:not(.is-stuck) {
        padding: 0;
        margin-bottom: 8px !important;
        min-height: 0;
    }
}
.merter-mobile-toolbar-btn {
    position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    gap: 8px; height: 46px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm);
    background: #fff; color: var(--merter-ink); font-size: 14px; font-weight: 600;
}
.merter-mobile-toolbar-btn i { color: var(--merter-purple); font-size: 14px; }
.merter-mobile-toolbar-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--merter-amber, #f5c34b); color: var(--merter-navy);
    font-size: 11px; font-weight: 700; line-height: 1;
}

/* Bottom-sheet modal — Filtrele/Sırala (mobil). Bootstrap modal'ı ekranın ALTINA sabitler,
   üst köşeleri yuvarlar, içerik uzunsa gövde kendi içinde scroll olur (footer sabit kalır). */
.merter-sheet-modal .merter-sheet-dialog {
    margin: 0; max-width: 100%; display: flex; align-items: flex-end; min-height: 100%;
}
.merter-sheet-modal .merter-sheet-content {
    width: 100%; max-height: 85dvh; border: 0; border-radius: var(--merter-radius-xl) var(--merter-radius-xl) 0 0;
    overflow: hidden; display: flex; flex-direction: column;
}
.merter-sheet-modal.fade .merter-sheet-dialog { transform: translateY(100%); transition: transform .3s ease; }
.merter-sheet-modal.show .merter-sheet-dialog { transform: translateY(0); }
.merter-sheet-header { padding: 18px 20px 0; border: 0; }
.merter-sheet-header .modal-title { font-weight: 700; color: var(--merter-ink); font-size: 16px; }
/* Seçili filtre çipleri — header ile scroll body arasında pinli (body scroll olsa da yerinde kalır). */
.merter-sheet-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 20px 14px; flex-shrink: 0;
    border-bottom: 1px solid #f3f2f5; background: #fff;
}
.merter-sheet-body { padding: 14px 20px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.merter-sheet-body .merter-filter-sidebar-like,
.merter-sheet-body .merter-filter-group:last-child { margin-bottom: 0; }
.merter-sheet-footer {
    display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--merter-line);
    background: #fff; flex-shrink: 0;
}
.merter-sheet-footer .btn { flex: 1 1 0; height: 46px; border-radius: var(--merter-radius-sm); font-weight: 600; }
.merter-sheet-clear { border-color: var(--merter-line); color: #5a6072; }
.merter-sheet-clear:hover { border-color: #d8d8e4; color: var(--merter-ink); }
.merter-sheet-sort-list { list-style: none; padding: 0; margin: 0; }
.merter-sheet-sort-option {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 4px;
    border-bottom: 1px solid #f3f2f5; color: var(--merter-ink); font-size: 15px;
}
.merter-sheet-sort-list li:last-child .merter-sheet-sort-option { border-bottom: 0; }
.merter-sheet-sort-option.is-active { color: var(--merter-purple); font-weight: 700; }
.merter-sheet-sort-option i { color: var(--merter-purple); font-size: 13px; }

/* Sağ araç çubuğu + grid */
.merter-listing-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.merter-listing-result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.merter-listing-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.merter-listing-chips:not(:has(.merter-listing-chip)) { display: none; }

/* Mobil yatay filtre şeridi — toolbar altı (statik) + sticky bar ortak dil. */
.merter-listing-chips--top { display: none; }
@media (max-width: 991.98px) {
    .merter-listing-chips--top {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 0 10px;
        padding: 0 0 2px;
        overscroll-behavior-x: contain;
    }
    .merter-listing-chips--top::-webkit-scrollbar { display: none; }
    .merter-listing-chips--top .merter-listing-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* Sticky pinlenince üst şerit tamamen çöker — opacity:0 yer tutup
       chip↔banner arasında boşluk bırakıyordu. */
    body:has(.merter-listing-bar.is-stuck) .merter-listing-chips--top {
        display: none !important;
    }
    body:has(.merter-listing-bar.is-stuck) .merter-mobile-toolbar {
        display: none !important;
    }
    /* Bar içi çipler mobilde yalnız pinliyken; masaüstü her zaman (aşağıdaki min-width kuralı). */
    .merter-listing-bar:not(.is-stuck) > .merter-listing-chips {
        display: none;
    }
}

/* Araç çubuğu — banner'ın altında; scroll'da SliverAppBar gibi pinlenir (JS: fixed + container genişliği),
   pinlenince sola Merter logosu belirir. Spacer, bar akıştan çıkınca yüksekliği koruyup zıplamayı önler. */
.merter-listing-bar-sentinel { height: 1px; }
.merter-listing-bar-spacer { height: 0; }
.merter-listing-bar { position: relative; z-index: 10; background: #fff; padding: 12px 0; transition: box-shadow .25s ease; }
/* Header hover karartması — bar z-index overlay üstünde kaldığı için kendi ::after katmanı;
   body_content_wrapper:before ile aynı renk/süre (0.5s) → hover'dan çıkınca anlık parlamaz. */
.merter-listing-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 30, 66, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 2;
}
.body_content_wrapper.before_active .merter-listing-bar::after {
    opacity: 1;
}
/* Pinlenince kenardan kenara (tam genişlik); scroll'da içeriğin üstünde kalır. */
.merter-listing-bar.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px clamp(16px, 4vw, 48px); box-shadow: 0 10px 26px rgba(20,20,43,.10); }
.merter-listing-bar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.merter-listing-brand { display: none; align-items: center; text-decoration: none; white-space: nowrap; }
.merter-listing-bar.is-stuck .merter-listing-brand { display: inline-flex; }
.merter-listing-brand-logo { height: 30px; width: auto; flex: none; }
.merter-listing-result b { color: var(--merter-ink); font-weight: 600; }
.merter-listing-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; color: var(--merter-navy); background: #F2F2F2; border-radius: var(--merter-radius-pill); padding: 5px 12px; }
.merter-listing-chip i { cursor: pointer; font-size: 9px; color: var(--merter-navy); }

/* Mobil arama — bar pinlenince (.is-stuck) görünür; header'daki arama scroll'da yukarıda kaldığından
   yedek erişim sağlar. Yalnız mobilde; masaüstünde header araması zaten daima açık (d-lg-none zaten
   gizler, ama .is-stuck kuralları da masaüstünü etkilememesi için aynı breakpoint'e alınır). */
.merter-listing-msearch { display: none; flex: 1 1 auto; min-width: 0; align-items: stretch; gap: 8px; }
.merter-listing-msearch input {
    flex: 1 1 auto; min-width: 0; height: 36px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm);
    padding: 0 12px; font-size: 13px; color: var(--merter-ink); background: #f7f7f9;
}
.merter-listing-msearch button {
    flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: var(--merter-radius-sm);
    background: var(--merter-amber, #f5c34b); color: var(--merter-navy); display: inline-flex; align-items: center; justify-content: center;
}
/* Sticky mobil filtre ikonu — arama yanında; yalnız pinlenince (aşağıdaki media). */
.merter-listing-mfilter {
    display: none; position: relative; flex: 0 0 36px; width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--merter-line); border-radius: var(--merter-radius-sm);
    background: #fff; color: var(--merter-purple); font-size: 14px; line-height: 1;
}
.merter-listing-mfilter-badge {
    position: absolute; top: -5px; right: -5px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--merter-amber, #f5c34b); color: var(--merter-navy);
    font-size: 10px; font-weight: 700; line-height: 1;
}
@media (max-width: 992px) {
    /* Sonuç metni mobilde header search placeholder'ında — body'de tekrar gösterme. */
    .merter-listing-result > b { display: none; }
    .merter-listing-bar.is-stuck .merter-listing-msearch { display: flex; }
    .merter-listing-bar.is-stuck .merter-listing-mfilter { display: inline-flex; }
    .merter-listing-bar.is-stuck .merter-listing-result { display: none; }

    /* Sticky mini-header: logo + dar arama + filtre + menü; aktif filtreler altta yatay şerit. */
    .merter-listing-bar.is-stuck {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 12px;
        padding: 10px 16px 12px;
    }
    .merter-listing-bar.is-stuck .merter-listing-bar-left {
        flex: 1 1 0;
        min-width: 0;
        order: 1;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .merter-listing-bar.is-stuck .merter-listing-msearch {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
    .merter-listing-bar.is-stuck .merter-listing-brand { flex: 0 0 auto; }
    .merter-listing-bar.is-stuck .merter-listing-mfilter { flex: 0 0 36px; }
    .merter-listing-bar.is-stuck .merter-listing-tools {
        flex: 0 0 auto;
        order: 2;
        align-self: flex-start;
        padding-top: 2px;
    }
    .merter-listing-bar.is-stuck .merter-listing-chips {
        flex: 1 1 100%;
        order: 3;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px 2px;
        overscroll-behavior-x: contain;
    }
    .merter-listing-bar.is-stuck .merter-listing-chips::-webkit-scrollbar { display: none; }
    .merter-listing-bar.is-stuck .merter-listing-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
.merter-listing-tools { display: flex; align-items: center; gap: 10px; }

/* Sıralama dropdown — anasayfa "Tümünü Gör" (title_more_btn) altı çizili metin stili + tıklanır menü.
   Mobilde gizli: sıralama artık üstteki merter-mobile-toolbar'ın "Sırala" butonuyla yapılıyor. */
.merter-sort-dd { position: relative; }
@media (max-width: 992px) {
    .merter-listing-tools .merter-sort-dd { display: none; }
}
.merter-sort-toggle { position: relative; border: 0; background: transparent; padding: 4px 2px; font-family: Jost, sans-serif; font-size: 15px; font-weight: 500; color: var(--merter-navy); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.merter-sort-toggle:before { content: ""; position: absolute; left: 0; bottom: -2px; width: 32%; height: 2px; background: var(--merter-navy); transition: width .3s ease; }
.merter-sort-toggle:hover:before, .merter-sort-dd.is-open .merter-sort-toggle:before { width: 100%; }
.merter-sort-toggle i { font-size: 13px; transition: transform .2s ease; }
.merter-sort-dd.is-open .merter-sort-toggle i { transform: rotate(180deg); }
.merter-sort-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); box-shadow: 0 14px 34px rgba(20,20,43,.12); z-index: 30; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.merter-sort-dd.is-open .merter-sort-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.merter-sort-option { display: block; padding: 9px 12px; border-radius: var(--merter-radius-sm); font-size: 14px; color: #555; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.merter-sort-option:hover { background: #f5f1f6; color: var(--merter-purple); }
.merter-sort-option.is-active { background: var(--merter-purple); color: #fff; }

/* Hesap menüsü — yalnız bar pinliyken sağ uçta görünür (brand gibi). Hamburger → açıkken X; dropdown sort-menu deseni. */
.merter-listing-menu { display: none; position: relative; }
.merter-listing-bar.is-stuck .merter-listing-menu { display: inline-flex; }
.merter-listing-menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; padding: 6px 3px; border: 0; background: transparent; cursor: pointer; }
.merter-listing-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--merter-navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.merter-listing-menu.is-open .merter-listing-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.merter-listing-menu.is-open .merter-listing-menu-toggle span:nth-child(2) { opacity: 0; }
.merter-listing-menu.is-open .merter-listing-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.merter-listing-menu-list { position: absolute; top: calc(100% + 12px); right: 0; min-width: 180px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); box-shadow: 0 14px 34px rgba(20,20,43,.12); z-index: 55; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.merter-listing-menu.is-open .merter-listing-menu-list { opacity: 1; visibility: visible; transform: translateY(0); }
.merter-listing-menu-list a { display: block; padding: 9px 14px; border-radius: var(--merter-radius-sm); font-size: 14px; color: var(--merter-navy); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.merter-listing-menu-list a:hover { background: #f5f1f6; color: var(--merter-purple); }

/* Masaüstü araç çubuğu düzeni — TEMEL .merter-listing-* kurallarının ALTINDA olmalı
   (aynı specificity → sonra gelen kazanır; erken konulursa base flex-wrap:wrap ezer).
   Sonuç metni solda sabit + sıralama sağda sabit (aynı satır, üstte), çipler aradaki
   boşlukta akar. Çipler kendi kapsayıcısında olduğu için satır atladığında sonuç
   metninin altına düşmez — ilk çipin sol hizasından devam eder (dikdörtgen blok).
   Stuck/pinli durumda da aynı düzen: nowrap → logo + sonuç metni aynı satırda.
   Katalog sticky bar'da çipler bar kökünde (DOM: left → tools → chips); order ile
   görsel sıra left → chips → tools. Mağaza listesinde çipler hâlâ result içinde. */
@media (min-width: 992px) {
    .merter-listing-toolbar { flex-wrap: nowrap; align-items: flex-start; }
    .merter-listing-bar-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; align-items: flex-start; }
    .merter-listing-result { flex: 1 1 auto; min-width: 0; align-items: flex-start; flex-wrap: nowrap; }
    .merter-listing-result > b { flex: 0 0 auto; white-space: nowrap; line-height: 24px; }
    .merter-listing-chips { flex: 1 1 auto; min-width: 0; }
    .merter-listing-bar .merter-listing-bar-left { flex: 0 0 auto; order: 1; }
    .merter-listing-bar .merter-listing-result { flex: 0 0 auto; }
    .merter-listing-bar .merter-listing-chips { order: 2; }
    .merter-listing-bar .merter-listing-tools { order: 3; }
    .merter-listing-tools { flex: 0 0 auto; align-items: flex-start; }
    .merter-listing-tools .merter-sort-toggle { line-height: 24px; }
}

/* Katalog SEO/tanıtım bloğu — bej kart + büyük başlık + aç/kapa (+/−). Native <details>/<summary> (JS yok). */
.merter-listing-seo { background: #f5f3ee; border: 1px solid #ece9e1; border-radius: var(--merter-radius-xl); padding: 40px 46px; }
.merter-listing-seo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.merter-listing-seo > summary::-webkit-details-marker { display: none; }
.merter-seo-title { font-size: 26px; font-weight: 500; color: var(--merter-navy); line-height: 1.2; margin: 0; }
/* Toggle simgesi: yatay çubuk daima görünür (−), dikey çubuk yalnız kapalıyken (+). */
.merter-seo-toggle { position: relative; width: 24px; height: 24px; flex: none; }
.merter-seo-toggle::before, .merter-seo-toggle::after { content: ""; position: absolute; background: var(--merter-ink); }
.merter-seo-toggle::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.merter-seo-toggle::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.merter-listing-seo[open] .merter-seo-toggle::after { opacity: 0; }
.merter-seo-body { margin-top: 28px; }
.merter-seo-subtitle { font-size: 20px; font-weight: 600; color: var(--merter-heading-color); line-height: 1.4; margin: 0 0 12px; }
.merter-seo-body p { color: #5b5b66; line-height: 1.8; font-size: 16px; font-weight: 400; margin: 0 0 28px; }
.merter-seo-body p:last-child { margin-bottom: 0; }
.merter-seo-body .merter-seo-subtitle + p + .merter-seo-subtitle { margin-top: 4px; }

/* ----------------------------------------------------------------------------
   Ürün Detay (mockup 05)
   ---------------------------------------------------------------------------- */
.merter-pd-gallery {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
/* Masaüstü sticky galeri — tema .wrapper.ovh overflow:hidden CSS sticky'yi öldürdüğü için
   konum JS ile (fixed/absolute) verilir; burada yalnız kolon bağlamı + durum stilleri. */
@media (min-width: 992px) {
    [data-merter-pd-gallery-col] {
        position: relative;
    }
    .merter-pd-gallery.is-pd-fixed {
        position: fixed;
        z-index: 5;
        margin: 0;
    }
    /* left/right JS'ten kolonun gerçek padding'iyle verilir — buradaki 0'lar
       yalnız yedektir. Absolute öğe kolonun PADDING kutusuna göre yerleştiği
       için sıfır bırakılırsa galeri 2×padding kadar geniş çıkar. */
    .merter-pd-gallery.is-pd-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 5;
        width: auto !important;
    }
}
/* Sol thumb şeridi — ana görsel yüksekliğine kilitli; fazla görsel dikey scroll.
   height:0 + min-height:100% → grid satırını şişirmez, boyutu .merter-pd-main verir. */
.merter-pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 124px;
    height: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d5d5df transparent;
    padding-right: 12px;
}
.merter-pd-thumbs::-webkit-scrollbar { width: 4px; }
.merter-pd-thumbs::-webkit-scrollbar-track { background: transparent; }
.merter-pd-thumbs::-webkit-scrollbar-thumb { background: #d5d5df; border-radius: 4px; }
.merter-pd-thumb { width: 112px; height: 168px; flex: none; border: 2px solid var(--merter-line); border-radius: var(--merter-radius-md); overflow: hidden; padding: 0; background: #fff; cursor: pointer; transition: border-color .15s ease; }
.merter-pd-thumb:hover { border-color: #cbbcd0; }
.merter-pd-thumb.active { border-color: var(--merter-purple); }
.merter-pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Ana görsel — kartlarla aynı 2:3 portre oranı (--merter-card-img-ratio); sabit px yükseklik
   orantıyı bozuyordu. contain: Nebim 2:3 fotoğraflarda kırpma/letterbox yok. */
.merter-pd-main { position: relative; flex: 1; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; aspect-ratio: var(--merter-card-img-ratio); background: #f5f4f7; }
.merter-pd-main img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; cursor: zoom-in; }

/* Ürün görseli lightbox (tam ekran galeri) — ana görsele tıklayınca açılır. */
body.merter-lightbox-open { overflow: hidden; }
.merter-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(20,12,22,.92); opacity: 0; transition: opacity .2s ease; }
.merter-lightbox.is-open { display: flex; opacity: 1; }
.merter-lightbox-stage { margin: 0; display: flex; flex-direction: column; align-items: center; }
.merter-lightbox-stage img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: var(--merter-radius-sm); box-shadow: 0 12px 44px rgba(0,0,0,.55); }
.merter-lightbox-counter { margin-top: 14px; color: #fff; font-size: 14px; letter-spacing: .5px; }
.merter-lightbox-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.merter-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 21px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.merter-lightbox-close:hover, .merter-lightbox-nav:hover { background: var(--merter-purple); }
.merter-lightbox-prev { left: 24px; }
.merter-lightbox-next { right: 24px; }
@media (max-width: 575px) {
    .merter-lightbox-nav { width: 44px; height: 44px; font-size: 17px; }
    .merter-lightbox-prev { left: 10px; }
    .merter-lightbox-next { right: 10px; }
    .merter-lightbox-close { top: 12px; right: 12px; }
}

/* Ana görsel üzerindeki dikey araç çubuğu (UI). */
.merter-pd-tools { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; flex-direction: column; gap: 12px; }
.merter-pd-tool { width: 46px; height: 46px; border: 0; border-radius: var(--merter-radius-lg); background: var(--merter-purple); color: #fff; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 14px rgba(90,30,89,.32); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.merter-pd-tool:hover { background: var(--merter-purple-d); transform: translateY(-1px); }
/* Dar masaüstü / tablet — thumbs yatay şeride döner; ana görsel aspect-ratio ile
   orantılı kalır (sabit px yükseklik yok). Araç çubuğu orantılı küçülür.
   Not: ≤992px'te .merter-pd-gallery gizlenir, mobil swipe galeri devreye girer. */
@media (max-width: 767.98px) {
    .merter-pd-gallery { display: flex; flex-direction: column; }
    .merter-pd-thumbs {
        flex-direction: row; overflow-x: auto; overflow-y: hidden;
        order: 2; padding-bottom: 2px; width: auto; height: auto; min-height: 0;
    }
    .merter-pd-thumb { width: 76px; height: 114px; }
    .merter-pd-tools { top: 10px; left: 10px; gap: 8px; }
    .merter-pd-tool { width: 38px; height: 38px; font-size: 14px; }
}
@media (max-width: 575px) {
    .merter-pd-thumb { width: 64px; height: 96px; }
}

/* Mobil galeri — masaüstü galerisinin (thumb şeridi + tek görsel + dikey araç çubuğu)
   yerini alır; header'a yapışık tam genişlik, oran bozulmadan (object-fit:contain),
   yatay scroll-snap ile diğer görsellere geçilir. Masaüstünde tamamen gizli. */
.merter-pd-gallery-mobile { display: none; }
@media (max-width: 992px) {
    .merter-pd-gallery { display: none; }
    .merter-pd-gallery-mobile { display: block; position: relative; }
    .merter-pd-gallery-mobile-track {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .merter-pd-gallery-mobile-track::-webkit-scrollbar { display: none; }
    .merter-pd-gallery-mobile-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--merter-card-img-ratio); background: #f5f4f7; }
    .merter-pd-gallery-mobile-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .merter-pd-gallery-mobile-tools { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
    .merter-pd-gallery-mobile-tools .merter-pd-tool { width: 38px; height: 38px; font-size: 14px; }
}

/* Ürün detay — mobilde breadcrumb kaldırılır; görsel header'a yapışır
   (body shell üst padding sıfırlanır). Masaüstünde shell + breadcrumb aynen kalır. */
@media (max-width: 992px) {
    .body_content_wrapper.merter-body-shell:has(.merter-pd-page) {
        padding-top: 0 !important;
    }
    .merter-pd-page .merter-breadcrumb { display: none; }
}

.merter-pd-info { border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 26px; }
.merter-pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.merter-pd-title { font-size: var(--merter-fs-h3); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); line-height: 1.3; margin: 0; }
.merter-pd-stock { flex-shrink: 0; font-size: 13px; color: #555; background: #f2f1f5; border-radius: var(--merter-radius-pill); padding: 7px 14px; white-space: nowrap; }
/* Sosyal kanıt sayaçları (Sepette / Favori) — rozet satırının altında, ikincil
   ton. Rozetlerle yarışmasın diye çerçevesiz ve küçük punto. */
.merter-pd-social-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; }
.merter-pd-social-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #777; }
.merter-pd-social-item i { font-size: 12px; color: var(--merter-purple); }
.merter-pd-vendor { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #f0eef2; border-bottom: 1px solid #f0eef2; }
.merter-pd-vendor span { color: #777; }
.merter-pd-vendor b { color: var(--merter-purple); }
.merter-pd-vendor a { text-decoration: none; }
.merter-pd-vendor a:hover { text-decoration: underline; }
/* Satıcı puanı — adın yanında; kart puanı (merter-card-rating) ile aynı görsel dil. */
.merter-pd-vendor-rating { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--merter-ink); vertical-align: middle; white-space: nowrap; }
.merter-pd-vendor-rating i { font-size: 12px; color: var(--merter-amber); }
.merter-pd-vendor-rating-count { font-weight: 400; color: #8a8a8a; }
/* Ürün puanı — satıcı satırının sağında, "Satıcıya Sor" butonunun hemen
   solunda. Satıcı puanıyla aynı görsel dil; ayrımı title/ikon konumu veriyor. */
.merter-pd-vendor-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.merter-pd-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--merter-ink); white-space: nowrap; }
.merter-pd-rating i { font-size: 12px; color: var(--merter-amber); }
.merter-pd-rating-count { font-weight: 400; color: #8a8a8a; }
.merter-pd-ask { background: #fff; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); padding: 8px 16px; color: var(--merter-ink); font-weight: 500; }
.merter-pd-ask:hover { color: var(--merter-purple); }

.merter-pd-price { border: 1px solid #f0eef2; border-radius: var(--merter-radius-md); padding: 18px; margin: 18px 0; }
.merter-pd-price-label { font-size: 14px; color: #999; }
/* Güncel fiyat + üstü çizili eski fiyat yan yana (eski fiyat sağda). */
.merter-pd-price-values { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
.text-end .merter-pd-price-values { justify-content: flex-end; }
.merter-pd-price-old { color: #b3b3bb; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.merter-pd-price-now { font-size: 24px; font-weight: 700; color: var(--merter-purple); white-space: nowrap; flex-shrink: 0; }
.merter-pd-price-chips { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.merter-pd-badge-green { font-size: 12px; font-weight: 600; color: #2e9e5b; background: #e6f5ec; border-radius: var(--merter-radius-pill); padding: 4px 11px; }
.merter-pd-badge-amber { font-size: 12px; font-weight: 700; color: #9a6b00; background: #fdf0d2; border-radius: var(--merter-radius-pill); padding: 4px 11px; }

/* Fiyat düşüş oranı — fiyatın yanında TURUNCU pill (yeşil değil). Kart + detay ortak. */
.merter-discount-pct { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: #f4631b; border-radius: var(--merter-radius-pill); padding: 4px 9px; white-space: nowrap; vertical-align: middle; }
.merter-discount-pct i { font-size: 10px; }
.merter-card-discount-pct { flex-shrink: 0; font-size: clamp(9px, 1.5cqi + 6px, 11px); padding: 3px 7px; }

/* Ürün etiketleri (ProductRibbon) — ürün detay; arka plan color_code (yoksa mor). */
/* Ürün rozetleri (x-merter.product.badges) — kart, ürün detayı ve mağaza grid'i
   aynı stili paylaşır. Hesaplanmış "En" serisi etiketler sabit renkli; panelden
   atanan bantlar kendi color_code'unu --merter-badge-bg ile geçirir.
   Renkler beyaz metinle >=4.5:1 kontrast verecek şekilde koyu tondan seçildi. */
.merter-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.merter-badges-detail { margin: -4px 0 16px; }
.merter-badges-card { position: absolute; top: 10px; left: 10px; z-index: 2; max-width: calc(100% - 20px); pointer-events: none; }
.merter-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: var(--merter-badge-bg, var(--merter-purple)); border-radius: var(--merter-radius-pill); padding: 5px 11px; }
.merter-badges-card .merter-badge { font-size: 11px; padding: 4px 9px; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.merter-badge-img { height: 14px; width: auto; display: block; }
.merter-badge-leader { background: var(--merter-badge-bg, #6d28d9); }
.merter-badge-bestseller { background: var(--merter-badge-bg, #c2410c); }
.merter-badge-popular { background: var(--merter-badge-bg, #b45309); }
.merter-badge-new { background: var(--merter-badge-bg, #15803d); }

.merter-pd-ribbons { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.merter-pd-ribbon { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: var(--merter-ribbon-bg, var(--merter-purple)); border-radius: var(--merter-radius-pill); padding: 5px 11px; }
.merter-pd-ribbon-img { height: 14px; width: auto; display: block; }
@media (max-width: 575px) {
    .merter-pd-info { padding: 18px; }
    .merter-pd-price { padding: 14px; }
    .merter-pd-price-now { font-size: 20px; }
}

.merter-pd-box { border: 1px solid #f0eef2; border-radius: var(--merter-radius-md); padding: 18px; margin-bottom: 16px; }
.merter-pd-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.merter-pd-box-head h5 { margin: 0; font-size: 17px; font-weight: 700; color: var(--merter-ink); }
.merter-pd-color-name { color: #999; font-weight: 400; }
.merter-pd-count-badge { font-size: 12px; color: #555; background: #f2f1f5; border-radius: var(--merter-radius-pill); padding: 4px 12px; }
/* Ortak select-toggle reçetesi — asorti + soru-cevap/değerlendirme dropdown'ları
   burada birleşiyor. İkisi görsel olarak FARKLI stiller (asort: köşeli + mor
   ring-hover; qna: pill + sade) olduğu için tek class'a indirilmedi — yalnız
   context'ler arasında BYTE-BYTE aynı olan deklarasyonlar buraya taşındı
   (kopyala-yapıştırı azaltmak için). Yeni bir dropdown eklerken bu üçünü
   (.dropdown-toggle taban / .filter-option / ::after ok şekli) tekrar yazma,
   context sınıfını bu selector listesine ekleyip kendi farklarını alttaki
   bloğa yaz. */
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker > .dropdown-toggle,
.merter-qna-select .bootstrap-select > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    background: #fff !important;
    color: var(--merter-ink) !important;
    font-weight: 500;
    box-shadow: none !important;
    outline: 0 !important;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .filter-option,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .filter-option-inner,
.merter-qna-select .bootstrap-select .filter-option,
.merter-qna-select .bootstrap-select .filter-option-inner {
    display: flex;
    align-items: center;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .dropdown-toggle::after,
.merter-qna-select .bootstrap-select .dropdown-toggle::after {
    border: 0; width: 8px; height: 8px; margin: 0;
    position: absolute; top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.merter-pd-asort-select,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker {
    width: max-content; max-width: 100%; min-width: 0;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker > .dropdown-toggle {
    height: auto; min-height: 40px; padding: 8px 26px 8px 8px;
    border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm);
    font-size: 14px; line-height: 1.3;
    justify-content: space-between;
    white-space: normal; max-width: 100%;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker > .dropdown-toggle:hover,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker > .dropdown-toggle:focus,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker > .dropdown-toggle:active,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker.show > .dropdown-toggle {
    border-color: var(--merter-purple) !important;
    color: var(--merter-purple) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--merter-purple-bg) !important;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .filter-option,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .filter-option-inner {
    height: auto; min-height: 100%;
    overflow: hidden; max-width: 100%; position: static;
}
/* Uzun asorti adı sığmazsa alt satıra kır — yatay sayfa kaymasını önler */
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .filter-option-inner-inner {
    overflow: hidden; text-overflow: clip; white-space: normal; word-break: break-word;
    max-width: 100%; line-height: 1.3; display: block;
}
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .dropdown-toggle::after {
    right: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
/* data-container=body → liste sticky/overflow üstünde kalsın; uzun seçenekler viewport dışına taşmasın */
.bs-container.merter-pd-asort-picker {
    z-index: 1080 !important;
    max-width: calc(100vw - 24px) !important;
}
.bs-container.merter-pd-asort-picker .dropdown-menu {
    max-width: 100%;
    width: 100%;
}
/* li kutusunun kendi margin/padding'i olmasın — seçili öğenin mor highlight'ı
   kenarlara kadar (full width) uzansın, boşluk bırakmasın (bkz. merter-ask-select
   ile aynı desen). Metin girintisi tamamen a/.dropdown-item padding'inden gelir. */
.bs-container.merter-pd-asort-picker .dropdown-menu li,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .dropdown-menu li {
    margin: 0;
    padding: 0;
}
.bs-container.merter-pd-asort-picker .dropdown-menu li a,
.bs-container.merter-pd-asort-picker .dropdown-menu .dropdown-item,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .dropdown-menu li a,
.merter-pd-box-head .bootstrap-select.merter-pd-asort-picker .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    padding: 8px 12px;
}
/* Eski native select fallback (selectpicker yoksa) */
select.merter-pd-asort-select:not(.bs-select-hidden) {
    height: 40px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm);
    color: var(--merter-ink); font-weight: 500; cursor: pointer; outline: none;
    field-sizing: content;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
select.merter-pd-asort-select:not(.bs-select-hidden):hover { border-color: var(--merter-purple-soft); color: var(--merter-purple); }
select.merter-pd-asort-select:not(.bs-select-hidden):focus,
select.merter-pd-asort-select:not(.bs-select-hidden):active {
    border-color: var(--merter-purple); color: var(--merter-purple); box-shadow: 0 0 0 3px var(--merter-purple-bg);
}
.merter-pd-sizes { --merter-asort-count: 1; display: grid; grid-template-columns: repeat(min(var(--merter-asort-count), 10), minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.merter-pd-size { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); text-align: center; padding: 6px 4px; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.merter-pd-size b { display: block; font-size: 12px; font-weight: 700; color: var(--merter-ink); line-height: 1.15; }
.merter-pd-size span { color: #999; font-size: 11px; line-height: 1.15; }
.merter-pd-asort-total { display: inline-block; font-size: 13px; color: #555; background: #f2f1f5; border-radius: var(--merter-radius-pill); padding: 5px 14px; }
/* Renk şeridi — tek satır; >5 renkte .has-nav ile sol/sağ ok (carousel ile aynı ikon).
   Touch + mouse drag swipe (app.js); scrollbar gizli. */
.merter-pd-colors-slider { position: relative; }
.merter-pd-colors-slider.has-nav { padding: 0 34px; margin: 0 -8px; }
.merter-pd-colors-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #eaeaea; border-radius: 50%;
    color: var(--merter-navy); font-size: 14px; line-height: 1; cursor: pointer;
    transition: color .25s ease, border-color .25s ease, opacity .2s ease;
}
.merter-pd-colors-nav:hover:not(:disabled) { color: var(--merter-purple); border-color: #d8d8e4; }
.merter-pd-colors-nav:disabled { opacity: .35; cursor: default; }
.merter-pd-colors-prev { left: 0; }
.merter-pd-colors-next { right: 0; }
.merter-pd-colors {
    display: flex; gap: 10px; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    cursor: grab;
}
.merter-pd-colors::-webkit-scrollbar { display: none; }
.merter-pd-colors.is-dragging {
    cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
}
/* Renk swatch görseli — liste/galeri ile aynı 2:3 portre (--merter-card-img-ratio). */
.merter-pd-color {
    position: relative; flex: 0 0 112px; width: 112px; aspect-ratio: var(--merter-card-img-ratio);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid transparent; border-radius: var(--merter-radius-md); padding: 0;
    background: #fff; cursor: pointer; scroll-snap-align: start;
    transition: border-color .15s ease;
}
.merter-pd-color:hover { border-color: #cbbcd0; }
.merter-pd-color.active { border-color: var(--merter-purple); }
.merter-pd-color-link { display: block; width: 100%; height: 100%; }
/* Görsel kutuyu doldurur (contain yerine cover) → çevredeki beyaz boşluk gider. */
.merter-pd-color-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.merter-pd-color-dot { display: block; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
/* Swatch üstü hızlı sepete-ekle — sağ altta amber daire; masaüstünde hover'da,
   dokunmatikte daima görünür (mobil ürün kartındaki ikonla aynı görsel). */
.merter-pd-color-cart {
    position: absolute; right: 5px; bottom: 5px; z-index: 2;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: var(--merter-amber); color: var(--merter-navy);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.22);
    opacity: 0; transform: translateY(5px);
    transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}
.merter-pd-color:hover .merter-pd-color-cart { opacity: 1; transform: none; }
.merter-pd-color-cart:hover { filter: brightness(.94); }
.merter-pd-color-cart:active { transform: scale(.92); }
.merter-pd-color-cart.is-busy { opacity: .6; pointer-events: none; }
.merter-pd-color-cart img { display: block; }
@media (hover: none) {
    .merter-pd-color-cart { opacity: 1; transform: none; }
}
/* Bağlı ürün swatch — sepete-ekle yok; yalnızca ürüne geçiş. */
.merter-pd-linked { cursor: default; }
.merter-pd-linked .merter-pd-color-link { cursor: pointer; }
@media (max-width: 575px) {
    .merter-pd-colors-slider.has-nav { padding: 0 30px; margin: 0 -6px; }
    .merter-pd-colors-nav { width: 32px; height: 32px; font-size: 12px; }
    .merter-pd-color { flex-basis: 88px; width: 88px; }
    .merter-pd-color-dot { width: 44px; height: 44px; }
}

.comment-stars { color: #f0a500; letter-spacing: 1px; font-size: 15px; }
/* Ürün detay değerlendirme sekmesi — ana sayfa yorum bölümü stillerinden izole. */
.merter-pd-tabcontent .merter-reviews-summary {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 14px 16px;
    padding: 16px 18px; margin: 0 0 20px;
    background: #f7f7f9; border-radius: var(--merter-radius-md); border-bottom: none;
}
.merter-pd-tabcontent .merter-reviews-score { flex: 0 0 auto; }
.merter-pd-tabcontent .merter-reviews-summary-meta { flex: 0 0 auto; min-width: 0; }
/* Sağ aksiyon grubu — arama + sıralama (+ Yorum Yaz); webde puanla aynı satırda. */
.merter-reviews-actions {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
    gap: 10px; margin-left: auto; flex: 1 1 auto; min-width: 0;
}
.merter-reviews-search {
    position: relative; flex: 1 1 180px; min-width: 140px; max-width: 420px; order: 0;
}
.merter-reviews-search > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9a9aa8; font-size: 14px; pointer-events: none;
}
.merter-reviews-search input {
    width: 100%; height: 44px; border: 1px solid #e7e7ee; border-radius: var(--merter-radius-lg);
    padding: 0 14px 0 40px; font-size: 14px; color: var(--merter-ink); background: #fff;
    outline: none; transition: border-color .2s ease;
}
.merter-reviews-search input:focus { border-color: var(--merter-purple); }
.merter-reviews-search input::placeholder { color: #9a9aa8; }
.merter-reviews-sort { min-width: 150px; width: 168px; flex: 0 0 auto; }
.merter-reviews-sort .bootstrap-select > .dropdown-toggle,
.merter-reviews-sort select.merter-qna-picker:not(.bs-select-hidden) { height: 44px; }
.merter-pd-tabcontent .merter-reviews-write,
.merter-pd-tabcontent .merter-reviews-login { margin-left: 0; flex: 0 0 auto; }
.merter-pd-tabcontent .merter-reviews-list { display: flex; flex-direction: column; gap: 14px; }
.merter-pd-tabcontent .merter-review-item { background: #f7f7f9; border-radius: var(--merter-radius-md); padding: 18px 20px; border-bottom: none; }
.merter-pd-tabcontent .merter-review-item:last-child { padding-bottom: 18px; }
.merter-pd-tabcontent .merter-review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.merter-pd-tabcontent .merter-review-user { font-weight: 700; color: var(--merter-ink); font-size: 14px; margin: 0; letter-spacing: 0; }
.merter-pd-tabcontent .merter-review-text { color: #555; font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.merter-pd-tabcontent .merter-review-date { color: #aaa; font-size: 12px; }
.merter-pd-tabcontent .merter-reviews-empty { color: #999; text-align: center; padding: 24px 0; margin: 0; }
.merter-reviews-summary { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #f0eef2; }
.merter-reviews-score { font-size: 34px; font-weight: 700; color: var(--merter-ink); line-height: 1; }
.merter-reviews-summary-meta { display: flex; flex-direction: column; gap: 4px; }
.merter-reviews-count { font-size: 13px; color: #999; }
.merter-reviews-list { display: flex; flex-direction: column; gap: 18px; }
.merter-review-item { border-bottom: 1px solid #f0eef2; padding-bottom: 16px; }
.merter-review-item:last-child { border-bottom: none; padding-bottom: 0; }
.merter-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.merter-review-user { font-weight: 700; color: var(--merter-ink); font-size: 14px; }
.merter-review-text { color: #555; font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.merter-review-date { color: #aaa; font-size: 12px; }
.merter-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.merter-review-like { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: #9a9aa8; font-size: 13px; cursor: pointer; transition: color .15s ease; }
.merter-review-like i { font-size: 15px; }
.merter-review-like:hover,
.merter-review-like.is-liked { color: var(--merter-purple); }
.merter-reviews-empty { color: #999; text-align: center; padding: 24px 0; }
.merter-reviews-write { height: 44px; padding: 0 22px; border: 0; border-radius: var(--merter-radius-lg); background: var(--merter-purple); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .2s ease; }
.merter-reviews-write:hover { background: var(--merter-purple-d); }
.merter-reviews-login { font-size: 13.5px; color: #999; text-align: right; }
.merter-reviews-login a { color: var(--merter-purple); font-weight: 600; }

/* Yorum görselleri — tarihin altında kompakt thumbnail şeridi. */
.merter-review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.merter-review-photo {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-sm);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.merter-review-photo:hover {
    border-color: var(--merter-purple);
    transform: translateY(-1px);
}
.merter-review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Yorum görsel galerisi modalı — sol yorum + sağ görsel, oklarla gezilir. */
.merter-review-gallery-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--merter-radius-lg);
    overflow: hidden;
}
.merter-review-gallery-modal .merter-rg-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 50%;
    padding: 8px;
    opacity: 1;
}
.merter-rg-body {
    display: flex;
    min-height: 420px;
}
.merter-rg-info {
    flex: 0 0 38%;
    max-width: 38%;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f7f7f9;
    overflow-y: auto;
    max-height: 78vh;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}
.merter-rg-info.is-changing { opacity: 0; transform: translateY(6px); }
.merter-rg-user { font-size: 15px; font-weight: 700; color: var(--merter-ink); }
.merter-rg-stars { color: var(--merter-amber); font-size: 14px; letter-spacing: 1px; }
.merter-rg-date { font-size: 13px; color: #999; }
.merter-rg-text { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: #555; }
.merter-rg-stage {
    flex: 1 1 62%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    min-width: 0;
}
.merter-rg-imgwrap {
    width: 100%;
    height: 100%;
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.merter-rg-imgwrap img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    opacity: 1;
    transform: scale(1);
    transition: opacity .18s ease, transform .18s ease;
}
.merter-rg-imgwrap.is-changing img { opacity: 0; transform: scale(.97); }
.merter-rg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #222;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}
.merter-rg-nav:hover { background: #fff; }
.merter-rg-prev { left: 14px; }
.merter-rg-next { right: 14px; }
.merter-rg-counter {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--merter-radius-pill);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
}
@media (max-width: 767px) {
    .merter-rg-body { flex-direction: column; min-height: 0; }
    .merter-rg-info {
        flex: none; max-width: 100%; order: 2;
        max-height: none; padding: 18px 18px;
    }
    .merter-rg-stage { order: 1; min-height: 300px; }
    .merter-rg-imgwrap, .merter-rg-imgwrap img { max-height: 52vh; }
    .merter-rg-nav { width: 38px; height: 38px; font-size: 14px; }
}
@media (max-width: 991px) {
    .merter-pd-tabcontent .merter-reviews-summary { flex-wrap: wrap; }
    .merter-reviews-actions { width: 100%; margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 575px) {
    .merter-pd-tabcontent .merter-reviews-summary {
        padding: 14px 14px; gap: 10px 12px;
        flex-wrap: wrap; align-items: center;
    }
    /* Puan + yıldız + sayı tek kısa satırda yan yana kalsın. */
    .merter-pd-tabcontent .merter-reviews-score {
        font-size: 26px; line-height: 1; flex: 0 0 auto;
    }
    .merter-pd-tabcontent .merter-reviews-summary-meta {
        flex: 1 1 auto; min-width: 0; width: auto;
        flex-direction: row; align-items: center; flex-wrap: nowrap;
        gap: 8px;
    }
    .merter-pd-tabcontent .merter-reviews-summary-meta .comment-stars {
        font-size: 12px; letter-spacing: .5px; white-space: nowrap; line-height: 1;
    }
    .merter-pd-tabcontent .merter-reviews-count {
        font-size: 12px; white-space: nowrap; color: #8a8a98;
    }
    /* Arama + sıralama aynı satır; Yorum Yaz / giriş notu alta kayabilir. */
    .merter-reviews-actions { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 8px; }
    .merter-reviews-actions .merter-reviews-search {
        flex: 1 1 0; max-width: none; min-width: 0; order: 0;
    }
    .merter-reviews-actions .merter-reviews-search > i { left: 12px; font-size: 13px; }
    .merter-reviews-actions .merter-reviews-search input {
        height: 40px; font-size: 13px; padding: 0 12px 0 36px;
        border-radius: var(--merter-radius-md);
    }
    .merter-reviews-actions .merter-reviews-sort {
        flex: 0 1 auto; min-width: 0; width: auto; max-width: 48%; order: 0;
    }
    .merter-reviews-actions .merter-reviews-sort .bootstrap-select > .dropdown-toggle,
    .merter-reviews-actions .merter-reviews-sort select.merter-qna-picker:not(.bs-select-hidden) {
        height: 40px; font-size: 13px; border-radius: var(--merter-radius-md);
    }
    .merter-pd-tabcontent .merter-reviews-write {
        height: 40px; padding: 0 14px; font-size: 13px;
        width: auto; flex: 1 1 100%;
    }
    .merter-pd-tabcontent .merter-reviews-login { width: 100%; text-align: left; }
    .merter-pd-tabcontent .merter-review-item { padding: 16px; }
}

.merter-pd-attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.merter-pd-attr { background: #f2f2f2; border-radius: 6px; padding: 14px 16px; }
.merter-pd-attr span { display: block; font-size: 13px; color: #666; margin-bottom: 6px; line-height: 1.3; }
.merter-pd-attr b { display: block; color: var(--merter-ink); font-size: 15px; font-weight: 700; line-height: 1.35; }

.merter-pd-ship { border: 1px solid #f0eef2; border-radius: var(--merter-radius-md); padding: 16px 18px; margin-bottom: 18px; }
.merter-pd-ship-row { color: #555; padding: 6px 0; }
.merter-pd-ship-row b { color: var(--merter-ink); }
.merter-pd-ship-row i { color: var(--merter-purple); }
.merter-pd-ship-deliver { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f3f2f5; margin-top: 6px; padding-top: 12px; flex-wrap: wrap; gap: 8px; }
.merter-pd-loc { color: var(--merter-purple); font-weight: 600; font-size: 14px; }

.merter-pd-buy { display: flex; gap: 14px; align-items: stretch; margin-bottom: 16px; }
.merter-pd-buy .merter-qty button { height: 52px; }
.merter-pd-buy .merter-qty input { height: 52px; }
.merter-pd-buy-btn { flex: 1; font-size: 16px; }
.merter-pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.merter-pd-actions a { display: inline-flex; flex: 1 1 0; justify-content: center; align-items: center; gap: 7px; color: #6b7280; font-size: 13.5px; line-height: 1; padding: 2px 15px; border-right: 1px solid #ececec; transition: color .15s; white-space: nowrap; }
.merter-pd-actions a:first-child { padding-left: 0; }
.merter-pd-actions a:last-child { border-right: 0; padding-right: 0; }
.merter-pd-actions a i { font-size: 15px; }
.merter-pd-actions a:hover { color: var(--merter-purple); }
.merter-pd-actions a.is-liked { color: var(--merter-purple); }
.merter-pd-actions a.is-liked i { color: var(--merter-purple); }
/* Mobilde aksiyon barı — 3 sütun x 2 satır grid; dikey ayraçlar satırlar arasında hizalı kalır. */
@media (max-width: 767.98px) {
    .merter-pd-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 0; align-items: center; }
    .merter-pd-actions a { flex: none; justify-content: center; padding: 6px 8px; border-right: 1px solid #ececec; }
    .merter-pd-actions a:nth-child(3n) { border-right: 0; }
    .merter-pd-actions a:first-child, .merter-pd-actions a:last-child { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 575px) {
    .merter-pd-actions a { font-size: 12px; gap: 5px; padding: 6px 4px; }
    .merter-pd-actions a i { font-size: 14px; }
}

/* Ürün detay — .merter-pd-info flex-column'a çevrilir; TÜM çocuklara orijinal
   DOM sırasını koruyan `order` verilir. Bu sayede .merter-pd-sticky-bar wrapper'ı
   masaüstünde `display:contents` ile kutu üretmez (fiyat + satın al kendi eski
   sırasında, ayrı ayrı görünür — masaüstü DEĞİŞMEZ); mobilde ise wrapper gerçek
   kutuya dönüp position:fixed ile TEK parça sabit alt bar olur (aşağıda). */
.merter-pd-info { display: flex; flex-direction: column; }
.merter-pd-info > .merter-pd-head { order: 1; }
.merter-pd-info > .merter-pd-ribbons,
.merter-pd-info > .merter-badges-detail { order: 1; }
.merter-pd-info > .merter-pd-vendor { order: 2; }
.merter-pd-sticky-bar { display: contents; }
.merter-pd-sticky-bar > .merter-pd-sticky-meta { display: none; } /* masaüstü: sticky meta yok */
.merter-pd-sticky-bar > .merter-pd-price { order: 3; }
.merter-pd-info > .merter-pd-box { order: 4; }
.merter-pd-info > .merter-pd-ship { order: 7; }
.merter-pd-sticky-bar > .merter-pd-buy,
.merter-pd-sticky-bar > .merter-form-msg { order: 8; }
.merter-pd-info > .merter-pd-actions { order: 9; }

/* Ürün detay — mobilde fiyat + satın al TEK container'da (.merter-pd-sticky-bar),
   "bottom navigation bar" tarzı sabit alt bar olur — tam genişlik, tek arka
   plan/gölge. AYNI elemanlar (klonlanmadı), sadece wrapper contents'ten gerçek
   flex kutusuna döner → asorti seti değişince JS'in tekil querySelector ile
   güncellediği fiyat burada da senkron kalır. Bu blok BİLEREK base
   .merter-pd-price/.merter-pd-buy kurallarından SONRA tanımlanır — aynı
   specificity'de kaynak sırası kazanır, önce gelseydi base tarafından ezilirdi. */
@media (max-width: 992px) {
    /* Sticky bar clearance — meta kapalıyken fiyat/satın al; açılınca ekstra satır. */
    .merter-pd-page { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
    .merter-pd-page.is-pd-meta-visible { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }

    .merter-pd-sticky-bar {
        display: flex; flex-wrap: wrap;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: #fff; border-top: 1px solid var(--merter-line);
        box-shadow: 0 -6px 18px rgba(20, 20, 43, .05);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Üst şerit: başta gizli; ürün başlığı viewport'tan çıkınca .is-meta-visible ile açılır. */
    .merter-pd-sticky-bar > .merter-pd-sticky-meta {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; flex: 1 0 100%; min-width: 0;
        max-height: 0; opacity: 0; overflow: hidden;
        padding: 0 12px; border-bottom: 0 solid var(--merter-line);
        pointer-events: none;
        transition: max-height .22s ease, opacity .18s ease, padding .22s ease, border-width .22s ease;
    }
    .merter-pd-sticky-bar.is-meta-visible > .merter-pd-sticky-meta {
        max-height: 40px; opacity: 1;
        padding: 8px 12px 6px; border-bottom-width: 1px;
        pointer-events: auto;
    }
    .merter-pd-sticky-meta-name {
        flex: 1 1 0; min-width: 0;
        font-size: 13px; font-weight: 600; color: var(--merter-ink); line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .merter-pd-sticky-meta-brand {
        flex: 0 0 auto; max-width: 40%;
        font-size: 12px; font-weight: 500; color: #6b7280; line-height: 1.3; text-align: right;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Sol kolon: fiyatlar — max-width ile sağ kolonla yan yana kilitlenir. */
    .merter-pd-sticky-bar > .merter-pd-price {
        flex: 1 1 56%; max-width: 56%; min-width: 0;
        margin: 0; border: 0; border-radius: 0; border-right: 1px solid var(--merter-line);
        padding: 6px 10px; background: transparent; box-shadow: none;
    }
    .merter-pd-price .row { flex-direction: column; gap: 1px; margin: 0; }
    .merter-pd-price .row > [class*="col-"] { padding: 0; max-width: 100%; flex: 0 0 100%; text-align: left !important; }
    .merter-pd-price-label { font-size: 11px; }
    /* text-end kolonundaki flex-end mobilde taşırıp sola kaydırıyordu — her iki satır da soldan hizalı.
       NOT: masaüstü kuralı `.text-end .merter-pd-price-values { justify-content: flex-end }` (2 class,
       satır 2709) bu bloktaki bare `.merter-pd-price-values` (1 class) tek başına YENEMEZ — specificity
       kaynak sırasından üstündür. `.text-end` ile birlikte de hedeflemek şart. */
    .merter-pd-price-values,
    .text-end .merter-pd-price-values { gap: 4px; justify-content: flex-start; }
    .merter-pd-price-now { font-size: 13px; line-height: 1.25; }
    .merter-pd-price-old { font-size: 10px; }
    /* Sezon fırsatı / indirim rozetleri sabit barda gösterilmez (yer kısıtlı, indirim
       zaten üstü çizili fiyatla anlatılıyor). */
    .merter-pd-price-chips { display: none; }

    /* Sağ kolon: Satın Al + miktar — miktar butonla aynı genişlikte. */
    .merter-pd-sticky-bar > .merter-pd-buy {
        flex: 1 1 44%; max-width: 44%; min-width: 0;
        flex-direction: column-reverse; gap: 4px;
        margin: 0; padding: 6px 10px; align-items: stretch;
    }
    .merter-pd-sticky-bar .merter-pd-buy .merter-qty {
        display: flex; width: 100%; flex: none; align-self: stretch;
    }
    .merter-pd-sticky-bar .merter-pd-buy .merter-qty button {
        flex: 1; width: auto; height: 30px; font-size: 11px;
    }
    .merter-pd-sticky-bar .merter-pd-buy .merter-qty input {
        flex: 1.2; width: auto; min-width: 0; height: 30px; font-size: 12px;
    }
    .merter-pd-sticky-bar .merter-pd-buy-btn {
        flex: none; width: 100%; font-size: 12px; padding: 0 10px; height: 30px;
    }
    .merter-pd-sticky-bar > .merter-form-msg { flex: 1 0 100%; margin: 0; padding: 0 10px 4px; font-size: 11px; text-align: center; }
}

.merter-pd-feedback-reasons { display: flex; flex-direction: column; gap: 8px; }
.merter-pd-lists { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; margin-bottom: 16px; }
.merter-pd-list-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: var(--merter-radius-sm); cursor: pointer; margin: 0; }
.merter-pd-list-row:hover { background: #f7f7f9; }
.merter-pd-list-row input { width: 17px; height: 17px; accent-color: var(--merter-purple); cursor: pointer; }
.merter-pd-list-name { flex: 1; font-size: 14px; color: #333; }
.merter-pd-list-count { font-size: 12px; color: #999; white-space: nowrap; }
.merter-pd-list-empty { font-size: 13px; color: #999; text-align: center; padding: 10px 0; }
.merter-pd-list-create { display: flex; gap: 10px; }
.merter-pd-list-create .form-control { flex: 1; }
.merter-order-back { display: inline-block; color: #6b7280; font-size: 13.5px; }
.merter-order-back:hover { color: var(--merter-purple); }
.merter-order-head { display: flex; flex-wrap: wrap; gap: 14px 32px; padding: 16px 18px; background: #f7f7f9; border-radius: var(--merter-radius-md); }
.merter-order-head > div { display: flex; flex-direction: column; gap: 3px; }
.merter-order-head span { font-size: 12px; color: #999; }
.merter-order-head b { font-size: 14px; color: #333; }

/* Sipariş detayı v2 — aksiyon barı, istatistik kartları, bilgi kutusu, satıcı grupları */
.merter-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.merter-order-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
  line-height: 1;
  box-sizing: border-box;
}
.merter-order-actions .btn:disabled { opacity: .55; cursor: not-allowed; }
.merter-order-action-icons { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Mobil: Yazdır + Fatura ikon-only, sağda yan yana; tüm aksiyonlar tek satır */
@media (max-width: 575.98px) {
  .merter-order-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .merter-order-actions > .btn {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 10px;
    gap: 6px;
    font-size: 12.5px;
    min-width: 0;
  }
  .merter-order-action-icons {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
  }
  .merter-order-actions .merter-order-action-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
  }
  .merter-order-actions .merter-order-action-icon .merter-order-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.merter-order-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.merter-order-stat-card { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); padding: 16px 18px; text-align: center; }
.merter-order-stat-card span { display: block; font-size: 12.5px; color: #999; margin-bottom: 6px; }
.merter-order-stat-card b { font-size: 18px; color: var(--merter-ink); }
.merter-order-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.merter-order-section-head .merter-order-section-title { margin-bottom: 0; }
.merter-order-section-head .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; flex-shrink: 0; }
.merter-order-section-title { font-size: 15px; font-weight: 600; color: var(--merter-ink); margin-bottom: 12px; }
.merter-order-info-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--merter-line);
  border-radius: var(--merter-radius-md);
  background: #f7f7f9;
  color: var(--merter-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.merter-order-info-chevron { color: #aaa; font-size: 12px; transition: transform .25s ease; }
.merter-order-info-toggle:not(.collapsed) .merter-order-info-chevron { transform: rotate(180deg); color: var(--merter-purple); }
.merter-order-info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; background: #f7f7f9; border-radius: var(--merter-radius-md); padding: 18px 20px; }
.merter-order-info-col { display: flex; flex-direction: column; gap: 12px; }
.merter-order-info-col > div { display: flex; flex-direction: column; gap: 3px; }
.merter-order-info-col span { font-size: 12px; color: #999; }
.merter-order-info-col b { font-size: 14px; color: #333; }
.merter-order-address-card { display: block; cursor: default; }
.merter-order-address-card span { color: #555; line-height: 1.6; }
.merter-order-vendor { border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 16px 18px; }
.merter-order-vendor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.merter-order-vendor-name { font-weight: 600; color: var(--merter-ink); font-size: 14px; }
.merter-order-vendor-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: #777; font-size: 13px; }
.merter-order-vendor-stats img { width: 14px; height: 14px; object-fit: contain; margin-right: 4px; vertical-align: -2px; }
.merter-order-vendor-stats b { color: var(--merter-ink); font-size: 14px; }

/* Sipariş detayı — mobil sabit alt bar SADECE Sepet Özeti collapse'i (checkout'takiyle
   aynı .merter-checkout-sticky-bar konumlandırması, ama mağaza rozetleri/ödeme butonu
   yok). Ekrandaki özet kutuları mobilde bunun yerine gizlenir, çift görünmesin. */
@media (max-width: 992px) {
  /* Sticky özet bar clearance — footer-gap sıfırlamasını ezer. */
  .merter-order-detail-page { padding-bottom: 100px !important; }
  .merter-order-detail-page .merter-summary-totals,
  .merter-order-detail-page .merter-grand-total { display: none; }
}

/* Sipariş kalemleri — masaüstünde klasik tablo, mobilde sepet ekranındaki
   kompakt kart (bkz. x-merter.product.mobile-row-card). 5 kalemden fazlaysa
   mobilde ~5 kart yükseklikte sabitlenip fazlası scroll olur (sepetten TEK
   farkı budur — sepette limit yok). */
.merter-order-items-mobile { display: none; }
@media (max-width: 767.98px) {
  .merter-order-items-desktop { display: none; }
  .merter-order-items-mobile { display: block; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; }
  .merter-order-items-mobile .merter-cart-mcard {
    border-bottom: 1px solid #f5f4f7;
    gap: 10px;
    padding: 12px 10px;
  }
  .merter-order-items-mobile .merter-cart-mcard:last-child { border-bottom: 0; }
  /* Miktar + tutar tek satırda kalsın */
  .merter-order-items-mobile .merter-cart-mcard-row:last-child {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .merter-order-items-mobile .merter-cart-mcard-row:last-child .merter-cart-unit {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .merter-order-items-mobile .merter-cart-mcard-row:last-child .merter-cart-total {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .merter-order-items-mobile--scroll { max-height: calc(5 * 186px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767.98px) {
  .merter-order-stats { grid-template-columns: repeat(2, 1fr); }
  /* Sipariş detayları — mobil collapse (varsayılan kapalı) */
  .merter-order-info-toggle { display: flex; }
  .merter-order-info-toggle:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .merter-order-info-collapse.show .merter-order-info-box {
    border-radius: 0 0 var(--merter-radius-md) var(--merter-radius-md);
  }
  .merter-order-info-box { grid-template-columns: 1fr; margin-top: 0; }
  /* Fatura + Teslimat — 2 sütun, sabit yükseklik */
  .merter-order-address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
  }
  .merter-order-address-row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0 !important;
  }
  .merter-order-address-card {
    height: 112px;
    overflow: hidden;
    padding: 12px;
  }
  .merter-order-address-card > b {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .merter-order-address-card > span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
  }
}
@media (min-width: 768px) {
  /* Masaüstü: collapse her zaman açık, toggle gizli */
  .merter-order-info-collapse.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}
.merter-support-thread { display: flex; flex-direction: column; gap: 12px; }
.merter-support-msg { max-width: 78%; padding: 12px 15px; border-radius: var(--merter-radius-lg); }
.merter-support-msg.is-customer { align-self: flex-end; background: #efe7f0; }
.merter-support-msg.is-staff { align-self: flex-start; background: #f4f5f6; }
.merter-support-msg-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.merter-support-msg-head b { font-size: 13px; color: var(--merter-purple); }
.merter-support-msg-head span { font-size: 11.5px; color: #999; }
.merter-support-msg p { margin: 0; font-size: 14px; color: #333; white-space: pre-wrap; }

/* Sekmeler */
/* Sekme bloğu çevresine kart border'ı; alt ayraç kutu kenarından kenara (tabnav full-width). */
.merter-pd-tabs { border: 1px solid #e7e7ee; border-radius: var(--merter-radius-xl); overflow: hidden; }
.merter-pd-tabnav { display: flex; gap: 8px; border-bottom: 1px solid var(--merter-line); flex-wrap: wrap; padding: 0 26px; margin: 0; list-style: none; }
.merter-pd-tabnav > li { flex: 0 0 auto; margin: 0; }
.merter-pd-tabnav button { background: none; border: 0; padding: 16px 18px; color: #777; font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.merter-pd-tabnav button.active { color: var(--merter-purple); border-bottom-color: var(--merter-purple); }
/* Mobilde sekmeler tek satırda yatay kaydırılır (alt alta kırılma yok). */
@media (max-width: 767.98px) {
    .merter-pd-tabnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px;
    }
    .merter-pd-tabnav::-webkit-scrollbar { display: none; }
    .merter-pd-tabnav button { padding: 14px 14px; font-size: 14px; }
    .merter-pd-tabcontent { padding: 22px 16px 28px; }
    .merter-pd-spec, .merter-pd-extra { margin: 0 -16px; }
    .merter-pd-spec-item, .merter-pd-extra-item { padding: 14px 16px; }
}
/* Tanıtım/içerik — daha büyük, koyu ve okunaklı metin (satır arası bol, paragraf boşluklu). */
.merter-pd-tabcontent { padding: 32px 30px 36px; color: #3c3f4a; line-height: 1.85; font-size: 16px; }
.merter-pd-tabcontent p { margin: 0 0 22px; }
.merter-pd-tabcontent p:last-child { margin-bottom: 0; }
/* Ürün Özellikleri & Ek Bilgiler — 2 sütun grid (her satırda 2 alan); satır bazlı zebra şerit (kart kenarından kenara). */
.merter-pd-spec, .merter-pd-extra { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -30px; }
.merter-pd-spec-item, .merter-pd-extra-item { padding: 16px 30px; }
.merter-pd-spec-item:nth-child(even), .merter-pd-extra-item:nth-child(even) { text-align: right; }
.merter-pd-spec-item:nth-child(4n+1), .merter-pd-spec-item:nth-child(4n+2),
.merter-pd-extra-item:nth-child(4n+1), .merter-pd-extra-item:nth-child(4n+2) { background: #f7f7f9; }
.merter-pd-spec-item b { color: var(--merter-ink); font-weight: 700; }
.merter-pd-spec-item span { color: #3c3f4a; }
/* Ek Bilgiler — dt/dd satır içi: "Etiket: değer" */
.merter-pd-extra dt, .merter-pd-extra dd { display: inline; margin: 0; }
.merter-pd-extra dt { color: var(--merter-ink); font-weight: 700; }
.merter-pd-extra dd { color: #3c3f4a; }
/* Mobil: tek sütun, satır bazlı zebra (4n şerit yerine çift-satır şerit), sola hizalı.
   Ürün Özellikleri (spec) sekmesi de Ek Bilgiler (extra) ile AYNI grid'i paylaştığı için
   ikisi de aynı mobil kurala tabi — yalnız extra'yı kapsayan eski kural spec'i unutmuştu. */
@media (max-width: 575px) {
    .merter-pd-spec, .merter-pd-extra { grid-template-columns: 1fr; }
    .merter-pd-spec-item:nth-child(even), .merter-pd-extra-item:nth-child(even) { text-align: left; }
    .merter-pd-spec-item:nth-child(4n+1), .merter-pd-spec-item:nth-child(4n+2),
    .merter-pd-extra-item:nth-child(4n+1), .merter-pd-extra-item:nth-child(4n+2) { background: transparent; }
    .merter-pd-spec-item:nth-child(even), .merter-pd-extra-item:nth-child(even) { background: #f7f7f9; }
}
/* CMS sekmeleri — panelde "Ürün Bilgilendirme" tipli sayfaların Quill HTML'i.
   İçerik editörden geldiği için sınıf veremiyoruz; eleman bazlı stil şart. */
.merter-pd-cms > :first-child { margin-top: 0; }
.merter-pd-cms > :last-child { margin-bottom: 0; }
.merter-pd-cms h1, .merter-pd-cms h2, .merter-pd-cms h3,
.merter-pd-cms h4, .merter-pd-cms h5, .merter-pd-cms h6 {
    color: var(--merter-ink); font-weight: 700; line-height: 1.35;
    margin: 28px 0 12px;
}
.merter-pd-cms h1, .merter-pd-cms h2 { font-size: 20px; }
.merter-pd-cms h3, .merter-pd-cms h4 { font-size: 17px; }
.merter-pd-cms h5, .merter-pd-cms h6 { font-size: 16px; }
.merter-pd-cms ul, .merter-pd-cms ol { margin: 0 0 22px; padding-left: 22px; }
.merter-pd-cms li { margin-bottom: 8px; }
.merter-pd-cms strong, .merter-pd-cms b { color: var(--merter-ink); font-weight: 700; }
.merter-pd-cms a { color: var(--merter-purple); text-decoration: underline; }
.merter-pd-cms img { max-width: 100%; height: auto; border-radius: var(--merter-radius-md); }
.merter-pd-cms table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.merter-pd-cms th, .merter-pd-cms td { padding: 10px 12px; border: 1px solid #eceaf0; text-align: left; }
.merter-pd-cms th { background: #f7f7f9; color: var(--merter-ink); font-weight: 700; }
.merter-pd-cms blockquote {
    margin: 0 0 22px; padding: 12px 18px; background: #f7f7f9;
    border-left: 3px solid var(--merter-purple); border-radius: 0 var(--merter-radius-md) var(--merter-radius-md) 0;
}
/* Tablolar dar ekranda taşmasın — sayfa gövdesi yatay kaymamalı. */
@media (max-width: 575px) {
    .merter-pd-cms { overflow-x: auto; }
}
/* Teslimat — statik bilgilendirme (başlık + kalın süreli giriş + ikonlu maddeler). */
.merter-pd-ship-title { font-size: var(--merter-fs-h4); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0 0 16px; line-height: 1.4; }
.merter-pd-ship-title span { font-size: var(--merter-fs-h4); }
.merter-pd-ship-lead { font-size: 16px; color: #3c3f4a; line-height: 1.7; margin: 0 0 24px; }
.merter-pd-ship-lead strong { color: var(--merter-ink); font-weight: 700; }
.merter-pd-ship-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.merter-pd-ship-list li { display: flex; align-items: flex-start; gap: 12px; color: #5b6472; font-size: 15px; line-height: 1.55; }
/* Outline çanta ikonu Pro-regular setinde (Free regular'da yok) → Pro ailesini zorla. */
.merter-pd-ship-list li i { color: #9a9aa8; font-size: 16px; margin-top: 1px; flex-shrink: 0; font-family: "Font Awesome 6 Pro"; font-weight: 400; }
/* İade & Değişim — bag-liste sonrası ayraç + "Değişim Süreci" kartı (circle-check maddeler). */
.merter-pd-return-divider { border: 0; border-top: 1px solid var(--merter-line); margin: 28px 0; }
.merter-pd-return-card { border: 1px solid #e7e7ee; border-radius: var(--merter-radius-lg); padding: 22px 24px; }
.merter-pd-return-card-title { display: flex; align-items: center; gap: 10px; font-size: var(--merter-fs-h5); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0 0 16px; }
.merter-pd-return-card-title i { color: var(--merter-ink); font-size: 16px; font-family: "Font Awesome 6 Pro"; font-weight: 400; }
.merter-pd-return-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.merter-pd-return-steps li { display: flex; align-items: flex-start; gap: 12px; color: #5b6472; font-size: 15px; line-height: 1.55; }
.merter-pd-return-steps li i { color: var(--merter-purple); font-size: 16px; margin-top: 1px; flex-shrink: 0; font-family: "Font Awesome 6 Pro"; font-weight: 400; }
/* Soru & Cevap — arama/durum/sıralama bar + soru kartları (veri DB'den, panelden yanıtlanır). */
.merter-qna-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.merter-qna-bar-main { display: contents; }
.merter-qna-bar-filters { display: contents; }
.merter-qna-search { position: relative; flex: 1 1 240px; order: 1; }
.merter-qna-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #9a9aa8; font-size: 15px; pointer-events: none; }
.merter-qna-search input { width: 100%; height: 52px; border: 1px solid #e7e7ee; border-radius: var(--merter-radius-lg); padding: 0 18px 0 44px; font-size: 15px; color: var(--merter-ink); background: #fff; outline: none; transition: border-color .2s ease; }
.merter-qna-search input:focus { border-color: var(--merter-purple); }
.merter-qna-search input::placeholder { color: #9a9aa8; }
.merter-qna-select { position: relative; flex: 0 0 auto; min-width: 168px; order: 2; }
.merter-qna-select > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; color: #6b6b7a; font-size: 14px; pointer-events: none; }
/* bootstrap-select — sol ikon + sağ chevron; native OS menüsü yok */
.merter-qna-select .bootstrap-select { width: 100% !important; }
.merter-qna-select .bootstrap-select > .dropdown-toggle {
    height: 52px; padding: 0 40px 0 40px;
    border: 1px solid #e7e7ee; border-radius: var(--merter-radius-lg);
    font-size: 15px; line-height: 1;
}
.merter-qna-select .bootstrap-select > .dropdown-toggle:hover,
.merter-qna-select .bootstrap-select > .dropdown-toggle:focus,
.merter-qna-select .bootstrap-select > .dropdown-toggle:active,
.merter-qna-select .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--merter-purple) !important;
    background: #fff !important; color: var(--merter-ink) !important;
    box-shadow: none !important;
}
.merter-qna-select .bootstrap-select .filter-option,
.merter-qna-select .bootstrap-select .filter-option-inner {
    height: 100%;
}
.merter-qna-select .bootstrap-select .dropdown-toggle::after {
    right: 16px;
    border-right: 2px solid #9a9aa8; border-bottom: 2px solid #9a9aa8;
}
.bs-container.merter-qna-picker { z-index: 1080 !important; }
/* li kutusunun kendi margin/padding'i olmasın — seçili öğenin mor highlight'ı
   kenarlara kadar (full width) uzansın (asorti ile aynı desen, bkz. yukarıda). */
.bs-container.merter-qna-picker .dropdown-menu li {
    margin: 0;
    padding: 0;
}
.bs-container.merter-qna-picker .dropdown-menu li a,
.bs-container.merter-qna-picker .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
}
/* Native fallback (selectpicker yoksa) */
.merter-qna-select select.merter-qna-picker:not(.bs-select-hidden) {
    height: 52px; min-width: 168px; width: 100%;
    border: 1px solid #e7e7ee; border-radius: var(--merter-radius-lg);
    padding: 0 40px; font-size: 15px; font-weight: 500; color: var(--merter-ink);
    background: #fff; outline: none; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.merter-qna-select select.merter-qna-picker:not(.bs-select-hidden):focus { border-color: var(--merter-purple); }
.merter-qna-ask { flex: 0 0 auto; order: 3; height: 52px; padding: 0 30px; border: 0; border-radius: var(--merter-radius-lg); background: var(--merter-amber, #f5c34b); color: var(--merter-ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .2s ease; }
.merter-qna-ask:hover { filter: brightness(.95); }
/* Mobil: üstte arama + kompakt Soru Sor; altta filtre + sıralama yan yana */
@media (max-width: 575px) {
    .merter-qna-bar { gap: 8px; flex-direction: column; align-items: stretch; }
    .merter-qna-bar-main {
        display: flex; align-items: center; gap: 8px; width: 100%; order: 1;
    }
    .merter-qna-bar-filters {
        display: flex; align-items: center; gap: 8px; width: 100%; order: 2;
    }
    .merter-qna-search { flex: 1 1 0; min-width: 0; order: 0; }
    .merter-qna-search > i { left: 14px; font-size: 13px; }
    .merter-qna-search input {
        height: 40px; font-size: 14px; padding: 0 12px 0 38px;
        border-radius: var(--merter-radius-md);
    }
    .merter-qna-ask {
        flex: 0 0 auto; order: 0;
        height: 40px; padding: 0 12px;
        font-size: 12px; font-weight: 700;
        border-radius: var(--merter-radius-md);
        white-space: nowrap;
    }
    .merter-qna-select { flex: 1 1 0; min-width: 0; order: 0; }
    .merter-qna-select .bootstrap-select > .dropdown-toggle,
    .merter-qna-select select.merter-qna-picker:not(.bs-select-hidden) {
        height: 40px; font-size: 13px; border-radius: var(--merter-radius-md);
        min-width: 0;
    }
}
.merter-qna-title { font-size: var(--merter-fs-h3); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0 0 18px; }
.merter-qna-list { display: flex; flex-direction: column; gap: 16px; }
.merter-qna-item { background: #f6f6f8; border-radius: var(--merter-radius-lg); padding: 22px 26px; }
.merter-qna-item[hidden] { display: none !important; }
.merter-qna:not(.is-expanded) .merter-qna-item[data-qna-extra] { display: none; }
.merter-qna-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.merter-qna-user { font-size: 17px; font-weight: 700; color: var(--merter-ink); }
.merter-qna-user em { font-style: italic; font-weight: 400; font-size: 14px; color: #8a8a98; }
.merter-qna-acts { display: inline-flex; align-items: center; gap: 14px; color: #9a9aa8; font-size: 15px; flex: 0 0 auto; padding-top: 3px; }
.merter-qna-acts button { border: 0; background: none; padding: 0; color: inherit; font-size: inherit; line-height: 1; cursor: pointer; transition: color .15s ease; }
.merter-qna-acts .js-question-like { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.merter-qna-acts .js-question-like i { font-size: 15px; }
.merter-qna-acts button:hover,
.merter-qna-acts button.is-liked { color: var(--merter-purple); }
.merter-qna-q { margin: 16px 0 0; font-size: 16px; color: #2b2e3a; line-height: 1.6; }
.merter-qna-q b { font-weight: 700; color: var(--merter-ink); }
.merter-qna-product { margin: 10px 0 0; font-size: 13px; color: #6b6f7b; display: flex; align-items: center; gap: 6px; }
.merter-qna-product i { font-size: 11px; color: var(--merter-amber); }
.merter-qna-product a { color: var(--merter-ink); font-weight: 600; text-decoration: none; }
.merter-qna-product a:hover { color: var(--merter-amber); }
.merter-review-product { margin: 0 0 8px; font-size: 13px; color: #6b6f7b; display: flex; align-items: center; gap: 6px; }
.merter-review-product i { font-size: 11px; color: var(--merter-amber); }
.merter-review-product a { color: var(--merter-ink); font-weight: 600; text-decoration: none; }
.merter-review-product a:hover { color: var(--merter-amber); }
.merter-qna-a { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7e7ec; }
.merter-qna-seller { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8a98; }
.merter-qna-seller i { color: var(--merter-purple); font-size: 13px; }
.merter-qna-a p { margin: 10px 0 0; font-size: 16px; color: #2b2e3a; line-height: 1.6; }
.merter-qna-a p b { font-weight: 700; color: var(--merter-ink); }
.merter-qna-a .is-pending i { color: #9a9aa8; }
.merter-qna-empty { color: #8a8a98; font-size: 16px; margin: 6px 0; }
.merter-qna-more { text-align: center; margin-top: 26px; }
.merter-qna-showall { height: 52px; padding: 0 40px; border: 0; border-radius: var(--merter-radius-lg); background: var(--merter-amber, #f5c34b); color: var(--merter-ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .2s ease; }
.merter-qna-showall:hover { filter: brightness(.95); }

/* Pop-up'lar — ortak boşluk: header 28/32, subtitle altı → body 12px, alan aralığı 18px.
   Alan başlıkları (.merter-note-label) kutu dışında; "Puanınız" ile aynı sol hizada. */
.merter-pd-modal .modal-content { border: 0; border-radius: var(--merter-radius-xl); }
.merter-pd-modal .modal-title { font-weight: 700; color: var(--merter-ink); }
.merter-pd-modal .modal-header,
.merter-pd-modal .modal-body { padding-left: 32px; padding-right: 32px; }
.merter-pd-modal .modal-header { padding-top: 28px; padding-bottom: 12px; }
.merter-pd-modal .modal-body { padding-top: 4px; padding-bottom: 28px; }
.merter-pd-modal .merter-modal-sub { margin-top: 6px; margin-bottom: 0; }
.merter-pd-share-list { display: flex; gap: 12px; justify-content: center; list-style: none; padding: 0; margin-bottom: 22px; }
.merter-pd-share-list a { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f4eef5; color: var(--merter-purple); font-size: 18px; }
.merter-pd-share-list a:hover { background: var(--merter-purple); color: #fff; }
.merter-pd-cart-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: #e6f5ec; color: #2e9e5b; border-radius: 50%; font-size: 28px; }
/* Form alanı — başlık kutu dışında, kutu yalnız input/textarea. */
.merter-modal-field { margin-bottom: 18px; }
.merter-note-box { border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-lg); padding: 16px 18px; }
.merter-note-label { display: block; font-weight: 700; color: var(--merter-ink); font-size: 15px; margin: 0 0 8px; padding: 0; }
.merter-note-box .form-control {
    height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0;
    box-shadow: none; background: transparent; color: var(--merter-ink); font-size: 15px;
}
.merter-note-box .form-control:focus { box-shadow: none; border: 0; outline: 0; }
.merter-note-area { width: 100%; min-height: 320px; border: 0; outline: 0; resize: vertical; padding: 0; background: transparent; color: var(--merter-ink); font-size: 15px; line-height: 1.6; }
.merter-note-area::placeholder { color: #9a9aa8; }
.merter-note-submit { width: 100%; margin-top: 22px; padding: 15px; font-weight: 600; border-radius: var(--merter-radius-sm); }
/* Satıcıya Soru Sor modalı — "Konu Seç" (bootstrap-select) + bordürlü soru kutusu + Vazgeç/Gönder.
   Liste kutusu radius/border → global .bootstrap-select/.bs-container kuralları (yukarıda).
   data-container=body → açık menü modal dışında; z-index burada. */
.merter-ask-select { position: relative; }
.merter-ask-select .bootstrap-select { width: 100% !important; }
.merter-ask-select .bootstrap-select > .dropdown-toggle {
    height: auto; min-height: 54px; padding: 16px 46px 16px 20px;
    border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-lg);
    background: #fff !important; color: var(--merter-ink) !important;
    font-size: 15px; font-weight: 500; box-shadow: none !important;
    outline: 0 !important;
}
.merter-ask-select .bootstrap-select > .dropdown-toggle:hover,
.merter-ask-select .bootstrap-select > .dropdown-toggle:focus,
.merter-ask-select .bootstrap-select > .dropdown-toggle:active,
.merter-ask-select .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--merter-purple) !important;
    background: #fff !important; color: var(--merter-ink) !important;
    box-shadow: none !important; outline: 0 !important;
}
.merter-ask-select .bootstrap-select .dropdown-toggle .filter-option { color: var(--merter-ink); }
.merter-ask-select .bootstrap-select .dropdown-toggle .filter-option-inner-inner { line-height: 1.4; }
.merter-ask-select .bootstrap-select.bs-placeholder .filter-option-inner-inner { color: #9a9aa8; }
.merter-ask-select .bootstrap-select .dropdown-toggle::after {
    border: 0; width: 10px; height: 10px; margin: 0;
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-60%) rotate(45deg);
    border-right: 2px solid var(--merter-text); border-bottom: 2px solid var(--merter-text);
}
/* Modal (≈1055) üstünde açılsın — menü body'ye taşındığı için z-index şart */
.bs-container.merter-ask-picker { z-index: 1100 !important; }
.merter-ask-select .bootstrap-select .dropdown-menu .inner,
.bs-container.merter-ask-picker .dropdown-menu .inner { max-height: 260px; }
.merter-ask-select .bootstrap-select .dropdown-menu li,
.bs-container.merter-ask-picker .dropdown-menu li { margin: 0; padding: 0; }
.merter-ask-select .bootstrap-select .dropdown-menu li a,
.merter-ask-select .bootstrap-select .dropdown-menu .dropdown-item,
.bs-container.merter-ask-picker .dropdown-menu li a,
.bs-container.merter-ask-picker .dropdown-menu .dropdown-item {
    padding: 10px 20px; font-size: 15px; color: var(--merter-ink); line-height: 1.4;
    background: transparent !important;
}
.merter-ask-select .bootstrap-select .dropdown-menu li a:hover,
.merter-ask-select .bootstrap-select .dropdown-menu li.active a,
.merter-ask-select .bootstrap-select .dropdown-menu .dropdown-item:hover,
.merter-ask-select .bootstrap-select .dropdown-menu .dropdown-item.active,
.bs-container.merter-ask-picker .dropdown-menu li a:hover,
.bs-container.merter-ask-picker .dropdown-menu li.active a,
.bs-container.merter-ask-picker .dropdown-menu .dropdown-item:hover,
.bs-container.merter-ask-picker .dropdown-menu .dropdown-item.active {
    color: var(--merter-purple) !important; background: #f6f4fb !important;
}
.merter-req { color: #e23744; font-weight: 700; }
.merter-ask-box .merter-note-area { min-height: 240px; }
.merter-ask-actions { display: flex; gap: 16px; margin-top: 22px; }
.merter-ask-actions .btn { flex: 1; padding: 16px; font-weight: 600; border-radius: var(--merter-radius-md); }
/* Vazgeç (btn-white): tema sarı :before fill → mor; border da sarıya dönmesin. */
.merter-ask-modal .btn.btn-white:before { background-color: var(--merter-purple); }
.merter-ask-modal .btn.btn-white:hover,
.merter-ask-modal .btn.btn-white:focus,
.merter-ask-modal .btn.btn-white:active { border-color: var(--merter-purple); color: #fff; }
/* Ürünü Değerlendir — CSS-only yıldız (radio 5→1, row-reverse ile görsel 1→5). */
.merter-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-top: 0; }
.merter-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.merter-star-input label { font-size: 30px; line-height: 1; color: #e0e0e6; cursor: pointer; transition: color .15s ease; margin: 0; }
.merter-star-input label:hover,
.merter-star-input label:hover ~ label,
.merter-star-input input:checked ~ label { color: #f0a500; }
.merter-review-box .merter-note-area { min-height: 180px; }
.merter-review-images input[type="file"] { width: 100%; font-size: 14px; color: #555; padding: 0; border: 0; background: transparent; }
/* Geri Bildirim modalı (geniş) — tam-genişlik sebep kartları + Not kutusu + sarı Tamam.
   Hover'da koyu/gri zemin yok: beyaz kalır, yalnız mor border + metin. Seçilince soft lila. */
.merter-fb-reasons { display: flex; flex-direction: column; gap: 12px; }
.merter-fb-reason {
    display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px;
    border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md);
    background: #fff; color: var(--merter-ink); cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.merter-fb-reason:hover {
    border-color: var(--merter-purple);
    background: #fff;
    color: var(--merter-purple);
}
.merter-fb-reason:has(input:checked) {
    border-color: var(--merter-purple);
    background: var(--merter-purple-bg);
    color: var(--merter-purple);
}
.merter-fb-reason input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--merter-purple); }
.merter-fb-reason-text { color: inherit; font-size: 15px; }
.merter-feedback-modal .modal-dialog { max-height: calc(100dvh - 2rem); margin: 1rem auto; }
.merter-feedback-modal .modal-content { max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; }
.merter-feedback-modal .modal-body { overflow-y: auto; flex: 1 1 auto; }
.merter-fb-note .merter-note-area { min-height: 96px; max-height: 140px; }
.merter-fb-submit { width: 100%; margin-top: 18px; padding: 15px; font-weight: 600; border-radius: var(--merter-radius-sm); }
/* Paylaş modalı — ortalı başlık + URL + kopya ikonu + sosyal kartlar + tam-genişlik Kapat.
   Ortak pd-modal padding'i ezilir (merkezî kompozisyon). */
.merter-share-modal .modal-header { padding: 16px 24px 0; }
.merter-share-modal .modal-body { padding: 0 40px 32px; }
.merter-share-title { font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); font-size: var(--merter-fs-h3); }
.merter-share-sub { color: #888; font-size: 14px; margin: 8px 0 0; }
.merter-share-url { display: block; margin: 34px 0 12px; color: var(--merter-ink); font-weight: 600; font-size: 16px; word-break: break-all; text-decoration: none; }
.merter-share-url:hover { color: var(--merter-purple); }
.merter-share-copy { display: inline-flex; background: none; border: 0; color: var(--merter-ink); font-size: 22px; padding: 6px; cursor: pointer; }
.merter-share-copy i { font-family: "Font Awesome 6 Pro"; font-weight: 400; }
.merter-share-copy:hover { color: var(--merter-purple); }
.merter-share-copied { display: block; height: 16px; margin-top: 4px; color: var(--merter-purple); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s ease; }
.merter-share-copied.is-visible { opacity: 1; }
.merter-share-social-label { color: #9a9aa8; font-size: 15px; margin: 12px 0 18px; }
.merter-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.merter-share-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md); background: #fff; color: var(--merter-ink); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.merter-share-card i { font-size: 22px; }
.merter-share-card:hover { border-color: var(--merter-purple); color: var(--merter-purple); background: #faf6fa; }
.merter-share-close { width: 100%; padding: 15px; font-weight: 600; border-radius: var(--merter-radius-sm); }
@media (max-width: 575px) {
    .merter-share-grid { grid-template-columns: repeat(2, 1fr); }
    .merter-share-modal .modal-body { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 575px) {
    .merter-pd-attrs { grid-template-columns: repeat(2, 1fr); }
    .merter-pd-sizes { gap: 4px; }
    .merter-pd-size { padding: 5px 3px; min-height: 36px; }
    .merter-pd-size b { font-size: 10px; }
    .merter-pd-size span { font-size: 9px; }
}

/* ----------------------------------------------------------------------------
   CMS (mockup 03) — Hakkımızda / İletişim / Blog
   ---------------------------------------------------------------------------- */
.merter-cms-sidebar { background: #F3F5F6; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 22px 24px; }
.merter-cms-sidebar-title { font-size: var(--merter-fs-h4); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); }
/* Mobilde açılır/kapanır başlık: buton varsayılan stilini sıfırla + chevron ikonu.
   Masaüstünde (992px+) liste her zaman açık, buton pasif — bkz. medya sorgusu altta. */
.merter-cms-sidebar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.merter-cms-sidebar-toggle:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; transition: transform .25s ease; }
.merter-cms-sidebar-toggle[aria-expanded="true"]:after { transform: rotate(180deg); }
.merter-cms-nav { list-style: none; padding: 0; margin-top: 14px; }
.merter-cms-nav li a { display: block; padding: 11px 0; color: #666; border-bottom: 1px solid #f3f2f5; }
.merter-cms-nav li:last-child a { border-bottom: 0; }
.merter-cms-nav li a:hover, .merter-cms-nav li a.active { color: var(--merter-purple); font-weight: 600; }
@media (min-width: 992px) {
    .merter-cms-nav { display: block !important; }
    .merter-cms-sidebar-toggle { cursor: default; pointer-events: none; }
    .merter-cms-sidebar-toggle:after { display: none; }
}
.merter-cms-banner { border-radius: var(--merter-radius-lg); overflow: hidden; }
.merter-cms-banner img { width: 100%; height: 240px; object-fit: cover; }
.merter-about-hero { border-radius: var(--merter-radius-lg); overflow: hidden; margin-bottom: 28px; }
.merter-about-hero img { width: 100%; height: auto; display: block; }
.merter-cms-content .merter-cms-h, .merter-cms-h { font-size: 20px; font-weight: 700; color: var(--merter-ink); margin: 22px 0 12px; }
.merter-cms-content p { color: #777; line-height: 1.8; }
.merter-cms-list { list-style: none; padding: 0; }
.merter-cms-list li { position: relative; padding: 8px 0 8px 28px; color: #666; }
.merter-cms-list li i { position: absolute; left: 0; top: 12px; color: #2e9e5b; font-size: 13px; }
.merter-value-card { text-align: center; height: 100%; padding: 12px; }
.merter-value-icon { width: 90px; height: 90px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: #f2f2f4; color: var(--merter-purple); border-radius: 50%; font-size: 22px; }
.merter-value-icon img { width: 38px; height: 38px; object-fit: contain; }
.merter-value-card p { color: var(--merter-ink); font-weight: 500; font-size: 14px; }

/* Banka Hesaplarımız */
.merter-bank-card { display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid #eaeaea; border-radius: var(--merter-radius-lg); background: #fff; }
.merter-bank-card-body { flex: 1 1 auto; min-width: 0; width: 100%; }
/* Başlık satırı — banka adı solda, logo sağda (mobil + web) */
.merter-bank-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.merter-bank-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--merter-fs-h5);
    font-weight: var(--merter-fw-heading);
    color: var(--merter-heading-color);
    margin: 0;
    line-height: 1.3;
}
.merter-bank-card-logo {
    flex: 0 0 auto;
    width: 64px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.merter-bank-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: right center; }
/* Sadece banka hesapları sayfası kartları — checkout .merter-bank-details satırlarını ezmesin. */
.merter-bank-card .merter-bank-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f2f2f4; font-size: var(--merter-fs-small); }
.merter-bank-card .merter-bank-row:last-child { border-bottom: 0; }
.merter-bank-card .merter-bank-row-label { color: #888; }
.merter-bank-card .merter-bank-row-value { color: var(--merter-ink); font-weight: 500; text-align: right; display: flex; align-items: center; gap: 6px; }
.merter-bank-card .merter-bank-copy { width: 26px; height: 26px; font-size: 11px; flex: 0 0 auto; }
.merter-bank-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border: 1px solid var(--merter-purple-soft); background: var(--merter-purple-bg); border-radius: var(--merter-radius-lg); color: #3a3f4a; }

/* İletişim */
.merter-contact-map { height: 340px; overflow: hidden; }
.merter-contact-map + .merter-cms-page { padding-top: 40px; }
.merter-contact-map img { width: 100%; height: 100%; object-fit: cover; }
.merter-contact-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin-bottom: 12px; }
.merter-contact-sub { color: #888; line-height: 1.7; margin-bottom: 24px; }
.merter-contact-info { margin-bottom: 18px; }
.merter-contact-label { display: block; color: #999; font-size: 14px; margin-bottom: 4px; }
.merter-contact-value { color: var(--merter-ink); font-weight: 600; font-size: 17px; }
.merter-contact-social { margin-top: 24px; }
.merter-contact-social ul { display: flex; gap: 10px; list-style: none; padding: 0; margin-top: 10px; }
.merter-contact-social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f4eef5; color: var(--merter-purple); font-size: 20px; line-height: 1; }
.merter-contact-social a i { font-size: inherit; line-height: 1; }
.merter-contact-social a:hover { background: var(--merter-purple); color: #fff; }
/* Gönder — FAQ "Tümünü Gör" (.merter-faq .btn-thm) ile aynı yükseklik. */
#merterContactForm > .btn-thm { padding: 14px 52px; }

/* Blog — listeleme: ortada başlık, sıralama sağ kolonda, sidebar grid görselleriyle hizalı. */
.merter-blog-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); }
/* Masaüstü: eski ".text-center" davranışı (başlık tek başına, ortalı) — mobil sıralama widget'ı d-lg-none. */
.merter-blog-header { text-align: center; }
.merter-blog-sort-row { --bs-gutter-x: 1.5rem; }
@media (max-width: 991.98px) {
    .merter-blog-sort-row .col-lg-9 { width: 100%; }
    /* Mobil: başlık solda, sıralama aynı satırda en sağda. */
    .merter-blog-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }
}
/* Sol filtre+banner kolonu blog kartları kadar geniş durmasın — Bootstrap'in
   col-lg-3/9 (%25/%75) oranı yerine hafif daha dar bir oran. */
@media (min-width: 992px) {
    .merter-blog-side-col { flex: 0 0 21%; max-width: 21%; }
    .merter-blog-main-col { flex: 0 0 79%; max-width: 79%; }
}
.merter-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; height: 100%; }
/* Oran: 3:2 — önceki 4:5 fazla uzundu; yatay ama yayvan olmayan denge. */
.merter-blog-thumb { aspect-ratio: 3 / 2; height: auto; overflow: hidden; flex-shrink: 0; }
/* !important: tema '.owl-carousel .owl-item img{width:auto}' kuralı (style.css) daha yüksek
   specificity'de (3 sınıf) olduğu için ezer — carousel içindeki görsel oranını koruyarak
   daralır, sağda boşluk kalır ("kesik" görünüm). !important ile kazandırılır. */
.merter-blog-thumb img { width: 100% !important; height: 100%; object-fit: cover; transition: transform .4s ease; }
.merter-blog-card:hover .merter-blog-thumb img { transform: scale(1.05); }
.merter-blog-body { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; }
.merter-blog-cat { display: inline-block; font-size: 12px; font-weight: 600; color: var(--merter-purple); margin-bottom: 4px; min-height: 1.2em; }
.merter-blog-name {
    font-size: var(--merter-fs-h5);
    font-weight: var(--merter-fw-label);
    color: var(--merter-heading-color);
    line-height: 1.35;
    margin-bottom: 6px;
    /* 1 satırlık başlıkta da 2 satır yer ayır → tarih/buton hizası sabit kalsın. */
    min-height: calc(1.35em * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.merter-blog-card:hover .merter-blog-name { color: var(--merter-purple); }
.merter-blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.merter-blog-date { font-size: 12px; color: #aaa; }
.merter-blog-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    background: var(--merter-amber, #f5c34b);
    color: var(--merter-purple);
    transition: background .2s ease, color .2s ease;
}
.merter-blog-card:hover .merter-blog-arrow { background: var(--merter-purple); color: #fff; }
/* Anasayfa blog carousel — kartlar eşit yükseklik, footer hizası listeyle aynı.
   Slot içinde ~%90 genişlik: 3:2 oran bozulmadan biraz küçülür (liste sayfası etkilenmez).
   Owl margin (script.js: 30) inline stil → !important ile yatay gap sıkılaştırılır. */
.our-blog .owl-item { margin-right: 12px !important; }
.our-blog .owl-item .item { height: 100%; }
.our-blog .merter-blog-card {
    height: 100%;
    width: 90%;
    margin-inline: auto;
}
.our-blog .merter-blog-body { padding: 10px 12px 12px; }
.our-blog .merter-blog-name { font-size: calc(var(--merter-fs-h5) * 0.92); }

/* Blog — mobil: breadcrumb kaldırılır (listeleme sayfalarındaki
   .merter-breadcrumb-desktop deseniyle aynı), kategori/konu accordion kutusu
   yerine yatay kaydırılabilir pill şeridi (chip UX — tek yönlü nav linki,
   çoklu seçim filtresi değil). */
@media (max-width: 991.98px) {
    .merter-blog-page .merter-breadcrumb-desktop { display: none; }
}
.merter-blog-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.merter-blog-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.merter-blog-chip-row::-webkit-scrollbar { display: none; }
.merter-blog-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--merter-heading-color);
    background: #f7f7fa;
    border: 1px solid var(--merter-line);
    border-radius: var(--merter-radius-pill);
    padding: 8px 16px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.merter-blog-chip--tag { color: #666; }
.merter-blog-chip.is-active,
.merter-blog-chip:hover { background: #f4eaf4; border-color: #f4eaf4; color: var(--merter-purple); }
.our-blog .merter-blog-arrow { width: 24px; height: 24px; font-size: 11px; }
/* buildBootstrapPagination() (AccountController) Bootstrap sınıf ADLARINI (page-item,
   page-link) taşıyan HTML üretiyor ama gerçek Bootstrap CSS'i (.page-item.active
   .page-link, 3 sınıf = (0,3,0) özgüllük) yüklü olduğu için aktif sayfa eskiden hep
   MAVİ kalıyordu — eski `.merter-pagination a.active` kuralı hem yanlış etikete
   (aktif sayfa <a> değil <span>) hem de daha DÜŞÜK özgüllüğe sahipti. Burada kendi
   `pagination-link` sınıfımızı (Bootstrap'te karşılığı yok) kullanarak özgüllüğü
   Bootstrap'inkiyle eşitliyoruz (3 sınıf) — app.css sonra yüklendiği için eşitlikte
   kazanan o oluyor (bkz. components/merter/layouts/app.blade.php üstteki yorum).
   Ayrıca Bootstrap'in bitişik pagination (margin-left:-1px, first/last radius) ve
   mavi hover'ı resetlenir; her kutu bağımsız rounded buton olur. */
.merter-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
    list-style: none;
}
.merter-pagination > .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.merter-pagination .page-item {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.merter-pagination .page-item::marker { content: none; }
/* Blog vb. — doğrudan <a> çocukları (ul/li yok). */
.merter-pagination > a {
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-sm);
    background: #fff;
    color: #555;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}
.merter-pagination > a:hover,
.merter-pagination > a.active {
    background: var(--merter-purple);
    border-color: var(--merter-purple);
    color: #fff;
}
/* Bootstrap .page-link reset + Merter kutu stili (tek kaynak). */
.merter-pagination .page-link.pagination-link {
    position: relative;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--merter-line-2);
    border-radius: var(--merter-radius-sm) !important;
    background: #fff;
    color: #555;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.merter-pagination .page-item:not(:first-child) .page-link { margin-left: 0 !important; }
.merter-pagination .page-link.pagination-link:hover {
    background: var(--merter-purple);
    border-color: var(--merter-purple);
    color: #fff;
    z-index: 1;
}
.merter-pagination .page-link.pagination-link:focus {
    box-shadow: none;
    outline: 0;
    background: var(--merter-purple);
    border-color: var(--merter-purple);
    color: #fff;
}
.merter-pagination .page-item.active .page-link.pagination-link,
.merter-pagination .page-link.pagination-link.active {
    background: var(--merter-purple);
    border-color: var(--merter-purple);
    color: #fff;
    z-index: 1;
}
.merter-pagination .page-item.disabled .page-link.pagination-link,
.merter-pagination .page-item.disabled .page-link.pagination-link:hover,
.merter-pagination .page-item.disabled .page-link.pagination-link:focus {
    opacity: .45;
    cursor: default;
    pointer-events: none;
    background: #fff;
    border-color: var(--merter-line-2);
    color: #555;
}
/* Prev/next ok (double-arrow.svg) — prev CSS ile çevrilir (inline style yok). */
.merter-pagination .page-arrow {
    width: 14px;
    height: 14px;
    display: block;
    flex: none;
    object-fit: contain;
}
.merter-pagination .page-arrow--prev { transform: rotate(180deg); }
.merter-pagination .page-item.disabled .page-arrow { opacity: .45; }

/* Client-side liste sayfalayıcı (Değerlendirmeler + Soru-Cevap ortak) —
   JS ile üretilir, blog pagination'ının <a> varyantını kullanır. */
.merter-list-pager { margin-top: 24px; }
.merter-pagination > a.is-disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}
.merter-pagination > a.is-disabled:hover {
    background: #fff;
    border-color: var(--merter-line-2);
    color: #555;
}
.merter-pagination > .merter-pager-gap {
    min-width: 24px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    user-select: none;
}

@media (max-width: 575px) {
  .merter-pagination { gap: 6px; }
  .merter-pagination > .pagination { gap: 6px; }
  .merter-pagination > a,
  .merter-pagination .page-link.pagination-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
  .merter-pagination .page-arrow { width: 12px; height: 12px; }
}

/* Blog detay */
.merter-blogpost-hero { border-radius: var(--merter-radius-lg); overflow: hidden; margin-bottom: 18px; }
.merter-blogpost-hero img { width: 100%; height: 380px; object-fit: cover; }
.merter-blogpost-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); line-height: 1.3; margin: 8px 0 12px; }
.merter-blogpost-meta { color: #999; font-size: 14px; margin-bottom: 22px; }
.merter-blogpost-body p { color: #777; line-height: 1.9; margin-bottom: 16px; }
.merter-blogpost-body h3 { font-size: 19px; font-weight: 700; color: var(--merter-ink); margin: 24px 0 10px; }
.merter-blogpost-share { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #f0eef2; }
.merter-blogpost-share span { color: var(--merter-ink); font-weight: 600; }
.merter-blogpost-share ul { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.merter-blogpost-share a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f4eef5; color: var(--merter-purple); }
.merter-blogpost-share a:hover { background: var(--merter-purple); color: #fff; }
.merter-blog-search { position: relative; }
.merter-blog-search input {
    width: 100%; height: 50px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-md);
    padding: 0 50px 0 16px; outline: none; box-shadow: none; transition: border-color .2s ease;
}
.merter-blog-search input:focus {
    border-color: var(--merter-purple);
    outline: none;
    box-shadow: none;
}
.merter-blog-search button { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border: 0; background: var(--merter-amber, #f5c34b); color: var(--merter-purple); border-radius: var(--merter-radius-sm); }
.merter-blog-recent { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f3f2f5; }
.merter-blog-recent:last-child { border-bottom: 0; }
.merter-blog-recent img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--merter-radius-sm); flex-shrink: 0; }
.merter-blog-recent b { display: block; font-size: 14px; color: var(--merter-ink); line-height: 1.4; }
.merter-blog-recent:hover b { color: var(--merter-purple); }
.merter-blog-recent span { font-size: 12px; color: #aaa; }

/* ----------------------------------------------------------------------------
   Tedarikçi / Satıcı (mockup 07) — mağaza kartı + mağaza header
   ---------------------------------------------------------------------------- */
.merter-vendor-card { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); overflow: hidden; height: 100%; }
.merter-vendor-logo { height: 130px; display: flex; align-items: center; justify-content: center; background: #f7f6f9; border-bottom: 1px solid #f0eef2; overflow: hidden; padding: 14px; }
/* contain: kutu ~2.4:1, logo kare yüklenir — cover olsaydı logonun yalnız orta
   şeridi görünürdü. Mağaza detay header'ı da kare kutu; tek oran (1:1) yeter. */
.merter-vendor-logo img { width: 100%; height: 100%; object-fit: contain; }
.merter-vendor-logo span { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--merter-ink); text-transform: uppercase; }
.merter-vendor-card-body { padding: 18px 20px; }
.merter-vendor-card-name { font-size: var(--merter-fs-h5); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0 0 8px; }
/* Logo ve isim de detay linki — kart görünümü değişmesin diye link stili nötr,
   yalnız hover'da geri bildirim verir. */
.merter-vendor-card-name a { color: inherit; text-decoration: none; }
.merter-vendor-card-name a:hover { color: var(--merter-primary); }
a.merter-vendor-logo { text-decoration: none; }
.merter-vendor-desc { color: #999; font-size: 13px; margin-bottom: 10px; }
.merter-vendor-meta { font-size: 13px; color: #777; padding: 2px 0; }
.merter-vendor-meta b { color: var(--merter-ink); }
.merter-vendor-btn { width: 100%; margin-top: 14px; }

.merter-vendor-header { position: relative; min-height: 220px; border-radius: var(--merter-radius-xl); overflow: hidden; background-size: cover; background-position: center; }
.merter-vendor-header:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,30,.7), rgba(20,20,30,.35)); }
.merter-vendor-header-overlay { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; height: 100%; min-height: 220px; padding: 30px 34px; }
.merter-vendor-header-logo { width: 120px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--merter-radius-lg); padding: 10px; text-align: center; }
.merter-vendor-header-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.merter-vendor-header-logo span { font-size: 16px; font-weight: 800; color: var(--merter-ink); text-transform: uppercase; line-height: 1.2; }
.merter-vendor-header-info { flex: 1; color: #fff; }
.merter-vendor-header-info h2 { color: #fff; font-weight: 700; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.merter-vendor-header-info p { color: rgba(255,255,255,.85); margin: 0; }
.merter-vendor-header-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; vertical-align: middle; }
.merter-vendor-header-rating i { font-size: 13px; color: var(--merter-amber); }
.merter-vendor-header-rating-count { font-weight: 400; color: rgba(255,255,255,.75); }
/* Takip Et / Takip Ediliyor — banner sağında dikeyde ortalı (overlay flex çocuğu). */
.merter-vendor-header-follow { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.merter-follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; padding: 11px 22px; border: 1px solid #fff; border-radius: var(--merter-radius-md); background: #fff; color: var(--merter-ink); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.merter-follow-btn i { font-size: 14px; }
.merter-follow-btn:hover { background: var(--merter-purple); border-color: var(--merter-purple); color: #fff; }
.merter-follow-btn.is-following { background: transparent; border-color: rgba(255,255,255,.8); color: #fff; }
.merter-follow-btn.is-following:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.merter-follow-btn[data-busy] { opacity: .6; pointer-events: none; }
.merter-vendor-header-followers { font-size: 13px; color: rgba(255,255,255,.8); white-space: nowrap; }
@media (max-width: 575px) { .merter-vendor-header-overlay { flex-direction: column; align-items: flex-start; text-align: left; } .merter-vendor-header-follow { align-items: flex-start; width: 100%; } .merter-follow-btn { width: 100%; } }

/* Firma Profili sekmesi — sol künye + sağ tanıtım metni (mağaza detayı).
   Künyede tek alan bile doluysa iki sütun; hiçbiri yoksa .is-textonly ile
   metin tam genişliğe yayılır. */
.merter-vendor-profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.merter-vendor-profile.is-textonly { grid-template-columns: minmax(0, 1fr); }
.merter-vendor-facts { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 20px; position: sticky; top: 20px; }
.merter-vendor-facts-title { font-size: 16px; font-weight: 700; color: var(--merter-ink); padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--merter-line); }
.merter-vendor-fact { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f4f4f7; }
.merter-vendor-fact:last-of-type { border-bottom: 0; }
/* İkon uzun metinde küçülüp kaymasın (şablon notu: flex-shrink-0 + üstten hizala). */
.merter-vendor-fact > i { flex-shrink: 0; width: 16px; margin-top: 3px; font-size: 14px; color: var(--merter-purple); text-align: center; }
.merter-vendor-fact-label { display: block; font-size: 12px; color: #8a8a95; margin-bottom: 2px; }
.merter-vendor-fact-value { display: block; font-size: 14px; font-weight: 600; color: var(--merter-ink); line-height: 1.45; word-break: break-word; }
a.merter-vendor-fact-value:hover { color: var(--merter-purple); }
.merter-vendor-map { padding-top: 14px; border-top: 1px solid #f4f4f7; }
.merter-vendor-map-frame { margin-top: 8px; border-radius: var(--merter-radius-md); overflow: hidden; border: 1px solid var(--merter-line); aspect-ratio: 2 / 1; background: #f2f2f5; }
.merter-vendor-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.merter-vendor-map-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
.merter-vendor-story { min-width: 0; }
@media (max-width: 991.98px) {
  .merter-vendor-profile { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .merter-vendor-facts { position: static; }
}

/* ============================================================
   08 HESABIM PANELİ (mockup 08-Hesabım)
   Sol kullanıcı kartı + nav menü, sağ beyaz panel + tablolar.
   ============================================================ */

/* Ortak buton yardımcıları (hesap + modallarda) */
.merter-btn-thm { background: var(--merter-purple); border: 1px solid var(--merter-purple); color: #fff; font-weight: 600; border-radius: var(--merter-radius-sm); padding: 9px 18px; }
.merter-btn-thm:hover { background: var(--merter-purple-d); color: #fff; }
.merter-btn-amber { background: var(--merter-amber, #f5c34b); border: 1px solid var(--merter-amber, #f5c34b); color: var(--merter-ink); font-weight: 700; border-radius: var(--merter-radius-sm); padding: 9px 18px; }
.merter-btn-amber:hover { filter: brightness(.96); color: var(--merter-ink); }

/* Sol sidebar */
.merter-account-sidebar { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 22px 16px; }
.merter-account-user { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #f0f0f4; margin-bottom: 12px; }
.merter-account-avatar-wrap { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.merter-account-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.merter-account-avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: var(--merter-purple, #7b3f8f);
  color: #fff; display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; font-size: 10px; line-height: 1;
  transition: background .15s, transform .15s;
}
.merter-account-avatar-edit:hover { background: var(--merter-purple-d, #6a3579); transform: scale(1.05); }
.merter-account-avatar-edit:disabled { opacity: .6; cursor: wait; }
.merter-account-user-info h5 { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: #1d1d2b; }
.merter-account-user-info span { font-size: 12px; color: #8a8a98; }

.merter-account-nav { display: flex; flex-direction: column; }
.merter-account-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--merter-radius-sm); color: var(--merter-text); font-size: 14px; font-weight: 400; transition: all .15s; }
.merter-account-nav-link i { width: 18px; text-align: center; font-size: 14px; color: #9a9aa6; }
.merter-account-nav-link i.far { font-weight: 400; }
/* Nav ikonları: SVG mask + background-color → hover/active'te mor boyanır.
   SVG tek renk (siyah/koyu fill veya stroke) olmalı; çok renkli SVG mask ile bozulur. */
.merter-account-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
  background-color: #9a9aa6;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
/* FA Free'de regular karşılığı olmayan ikonlar: solid + stroke ile outline */
.merter-account-nav-link .merter-nav-icon-stroke {
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.1px #9a9aa6;
}
.merter-account-nav-link:hover { background: #faf5fa; color: var(--merter-purple); }
.merter-account-nav-link:hover i { color: var(--merter-purple); }
.merter-account-nav-link:hover .merter-account-nav-icon { background-color: var(--merter-purple); }
.merter-account-nav-link:hover .merter-nav-icon-stroke { color: transparent; -webkit-text-stroke-color: var(--merter-purple); }
.merter-account-nav-link.is-active { background: #f4eaf4; color: var(--merter-purple); font-weight: 400; }
.merter-account-nav-link.is-active i { color: var(--merter-purple); }
.merter-account-nav-link.is-active .merter-account-nav-icon { background-color: var(--merter-purple); }
.merter-account-nav-link.is-active .merter-nav-icon-stroke { color: transparent; -webkit-text-stroke-color: var(--merter-purple); }
.merter-account-logout { margin-top: 6px; }
/* Mobil-only çıkış butonu (profil satırının sağı) — masaüstünde gizli, nav'daki
   klasik satır (yukarıdaki .merter-account-logout) orada kalır. */
.merter-account-logout-form-mobile { display: none; }
/* Çıkış ikonu her zaman hafif kırmızı (hover'a özel değil) — diğer .is-danger
   butonlar (silme vb.) etkilenmesin diye scoped, sadece bu buton. */
.merter-account-logout-form-mobile .merter-icon-btn {
  background: #fdeef0;
  border-color: #f6c9d0;
  color: #e0556a;
}
.merter-account-logout-form-mobile .merter-icon-btn .merter-account-nav-icon {
  background-color: #e0556a;
}
.merter-account-logout-form-mobile .merter-icon-btn:hover {
  background: #fbdde3;
  border-color: #e0556a;
}
.merter-account-logout-form-mobile .merter-icon-btn:hover .merter-account-nav-icon {
  background-color: #e0556a;
}

/* Hesabım mobil menü — dikey liste yerine yatay kaydırılabilir chip şeridi.
   Header'da zaten hamburger menü var; ikinci bir hamburger yerine app benzeri
   sekme şeridi (Trendyol/Hepsiburada hesabım ekranlarındaki desen): tek satır,
   kenardan taşan chip "daha var" ipucu verir, tıkla/kaydır ile her sekmeye tek
   adımda erişilir. */
@media (max-width: 991.98px) {
  /* Mobilde breadcrumb gizli → body-shell 24px üst boşluğu da gereksiz;
     profil kartı header'a yaklaşsın (ürün detay .merter-pd-page ile aynı desen). */
  .body_content_wrapper.merter-body-shell:has(.merter-account-page) {
    padding-top: 8px !important;
  }
  /* Mobilde hesabım sayfasında breadcrumb gereksiz yer kaplıyor — kaldırıldı
     (yalnızca bu sayfaya özel; site geneli .merter-breadcrumb etkilenmez). */
  .merter-account-page .merter-breadcrumb { display: none; }
  /* Chip şeridi + içerik için container yatay padding'i daralt */
  .merter-account-page > .container { padding-inline: 8px; }
  /* Kart üst/alt padding eşit; chip üstü (divider sonrası) ile altı aynı nefes. */
  .merter-account-sidebar { padding: 12px 0; }
  .merter-account-user { padding: 0 12px 12px; margin-bottom: 10px; }
  .merter-account-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 6px;
    padding: 0 12px;
    scrollbar-width: none;
  }
  .merter-account-nav::-webkit-scrollbar { display: none; }
  .merter-account-nav-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--merter-line);
    border-radius: var(--merter-radius-pill);
    background: #f7f7fa;
  }
  .merter-account-nav-icon { width: 15px; height: 15px; }
  .merter-account-nav-link.is-active { background: #f4eaf4; border-color: #f4eaf4; }
  /* Nav'daki klasik çıkış satırı mobilde gizlenir; yerine profil satırındaki
     mobil-only buton gösterilir (aşağıda). */
  .merter-account-nav > .merter-account-logout-form { display: none; }
  .merter-account-logout-form-mobile { display: block; margin-left: auto; flex-shrink: 0; }
}

/* Sağ panel */
.merter-account-panel { background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 24px 26px; }
.merter-account-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f4; margin-bottom: 20px; flex-wrap: wrap; }
.merter-account-panel-title { font-size: 20px; font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0; }
.merter-account-panel-action { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 auto; min-width: 0; }
.merter-account-panel-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; width: 100%; max-width: 460px; margin-left: auto; }
.merter-account-panel-tools .merter-cart-search { flex: 1 1 180px; min-width: 140px; }
.merter-account-panel-tools .merter-cart-search input { width: 100%; }
.merter-account-panel-tools .merter-cart-sort-wrap { flex: 0 0 auto; }
.merter-account-panel-tools .merter-cart-sort-wrap .bootstrap-select,
.merter-account-panel-tools .merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle {
  width: auto !important;
}
/* Adreslerim — mobilde bölüm başlığı + ekle butonu aynı satır; tablo thead gizlenir */
.merter-address-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.merter-address-section-head .btn { flex-shrink: 0; }
.merter-address-section-label { display: none; }
.merter-address-title { display: block; font-weight: 700; color: var(--merter-ink); }
.merter-address-line { display: block; font-size: 12.5px; color: #8a8a98; margin-top: 2px; }
@media (max-width: 767.98px) {
  .merter-address-section-label { display: block; min-width: 0; }
  .merter-address-section-head .btn { white-space: nowrap; font-size: 13px; padding: 8px 14px; }
  /* Tablo ekrana tam sığsın; aksiyon sütunu dar, adres tek satır + ellipsis */
  .merter-address-section .merter-account-table-wrap {
    margin-top: 0;
    overflow-x: hidden;
  }
  .merter-address-section .merter-account-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .merter-address-section .merter-account-table thead { display: none; }
  .merter-address-section .merter-account-table tbody td.merter-address-cell {
    width: auto;
    text-align: left;
    padding: 12px 8px 12px 10px;
    overflow: hidden;
  }
  .merter-address-section .merter-account-table tbody td.merter-account-actions {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding: 12px 10px;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .merter-address-section .merter-account-actions .merter-icon-btn {
    width: 32px;
    height: 32px;
    margin: 0 2px;
  }
  .merter-address-title,
  .merter-address-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 768px) {
  .merter-address-section-head { justify-content: flex-start; }
}
.merter-account-section-title { font-size: var(--merter-fs-h6); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin: 0 0 14px; }
.merter-account-divider { border: 0; border-top: 1px solid #f0f0f4; margin: 26px 0; }
.merter-account-narrow { max-width: 620px; }

/* Sekmeler */
.merter-account-tabs { border-bottom: 1px solid #f0f0f4; gap: 26px; }
.merter-account-tabs .nav-link { border: 0; padding: 0 0 12px; color: #626974; font-size: 14px; font-weight: 500; position: relative; }
.merter-account-tabs .nav-link.active { color: var(--merter-purple); background: transparent; }
.merter-account-tabs .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--merter-purple); }

/* Tablolar — dar ekranda yatay kaydırma (overflow: hidden overflow-x'i eziyordu) */
.merter-account-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 8px;
  border: 1px solid var(--merter-line);
  border-radius: var(--merter-radius-md);
  -webkit-overflow-scrolling: touch;
}
.merter-account-table { width: max-content; min-width: 100%; border-collapse: collapse; }
.merter-account-table thead th { background: #f7f7fa; color: #6a6a78; font-size: 12.5px; font-weight: 600; text-align: center; padding: 13px 14px; white-space: nowrap; border-bottom: 1px solid var(--merter-line); border-right: 1px solid var(--merter-line); }
.merter-account-table thead th:last-child { border-right: 0; }
.merter-account-table tbody td { text-align: center; padding: 14px; font-size: 13.5px; color: var(--merter-text); border-bottom: 1px solid var(--merter-line); border-right: 1px solid var(--merter-line); vertical-align: middle; }
.merter-account-table tbody td:last-child { border-right: 0; }
.merter-account-table tbody tr:last-child td { border-bottom: 0; }
.merter-account-empty { color: #9a9aa6; font-size: 13.5px; padding: 28px 14px !important; }
.merter-account-thumb { width: 56px; height: 70px; object-fit: cover; border-radius: var(--merter-radius-sm); }
.merter-account-thumb-link { display: inline-block; line-height: 0; }
.merter-account-thumb-link:hover .merter-account-thumb { opacity: .85; }

/* Ürün adı — en fazla 2 satır, kolon genişlemesin */
.merter-account-cell-name { max-width: 200px; min-width: 120px; }
.merter-account-name-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-width: 100%;
  margin: 0 auto;
  word-break: break-word;
  text-align: center;
}
.merter-account-name-text a { color: inherit; text-decoration: none; }
.merter-account-name-text a:hover { color: var(--merter-purple); }

/* Tablo aksiyon ikonları — td üzerinde flex kullanılmaz (satır yüksekliği/border hizası bozulur) */
.merter-account-actions { text-align: center; vertical-align: middle; white-space: nowrap; }
.merter-account-actions .merter-icon-btn { margin: 0 4px; vertical-align: middle; }
.merter-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #eeeeee; background: #fff; border-radius: var(--merter-radius-pill); color: #374957; font-size: 13px; line-height: 1; margin: 0; padding: 0; cursor: pointer; text-decoration: none; transition: all .15s; box-sizing: border-box; }
.merter-icon-btn img { width: 14px; height: 14px; object-fit: contain; display: block; }
.merter-icon-btn:hover { color: var(--merter-purple); }
.merter-icon-btn.is-danger { color: #e0556a; }
.merter-icon-btn.is-danger:hover { border-color: #e0556a; background: #fdeef0; color: #e0556a; }

/* Kaydedilmiş sepet detay modalı — isim düzenleme + ürün listesi */
.merter-saved-cart-modal-name-edit { display: flex; align-items: center; gap: 8px; flex: 1; margin-right: 14px; }
.merter-saved-cart-modal-name-edit .form-control { height: 42px; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); font-weight: 700; color: var(--merter-ink); }
/* Liste maks. 4 satır; fazlası scroll (thumb 70 + padding 20 + border 2 + gap 12). */
.merter-saved-cart-modal-list {
    display: flex; flex-direction: column; gap: 12px;
    max-height: calc(4 * (70px + 20px + 2px) + 3 * 12px);
    overflow-y: auto;
}
.merter-saved-cart-modal-list::-webkit-scrollbar { width: 5px; }
.merter-saved-cart-modal-list::-webkit-scrollbar-track { background: transparent; }
.merter-saved-cart-modal-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.merter-saved-cart-modal-item { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid #f0f0f4; border-radius: var(--merter-radius-sm); flex-shrink: 0; }
.merter-saved-cart-modal-thumb { width: 56px; height: 70px; flex-shrink: 0; border-radius: var(--merter-radius-sm); overflow: hidden; background: #f7f7fa; }
.merter-saved-cart-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merter-saved-cart-modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.merter-saved-cart-modal-name { color: var(--merter-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.merter-saved-cart-modal-name:hover { color: var(--merter-purple); }
.merter-saved-cart-modal-size,
.merter-saved-cart-modal-qty { color: #8a8a98; font-size: 12.5px; }

/* Siparişlerim — mobilde tarih sütunu sipariş no altına iner, eye butonu kalkar */
.merter-order-date-mobile { display: none; }
@media (max-width: 767.98px) {
  .merter-orders-table .merter-account-table-wrap { overflow-x: hidden; }
  .merter-orders-table .merter-account-table { width: 100%; min-width: 0; }
  .merter-orders-table .merter-account-table thead th:nth-child(3),
  .merter-orders-table .merter-account-table tbody td:nth-child(3),
  .merter-orders-table .merter-account-table thead th:nth-child(5),
  .merter-orders-table .merter-account-table tbody td:nth-child(5) {
    display: none;
  }
  /* Sipariş detay — durum geçmişi: mobilde "İşlem Yapan" + tarih sütunu kalkar;
     tarih durum badge altına iner (.merter-order-date-mobile).
     Görünen 2 sütun: durum 1fr, mesaj 2fr. */
  .merter-order-status-history .merter-account-table-wrap { overflow-x: hidden; }
  .merter-order-status-history .merter-account-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .merter-order-status-history .merter-account-table thead th {
    text-align: center;
    vertical-align: middle;
  }
  .merter-order-status-history .merter-account-table thead th:nth-child(1),
  .merter-order-status-history .merter-account-table tbody td:nth-child(1) {
    width: 33.333%;
  }
  .merter-order-status-history .merter-account-table thead th:nth-child(2),
  .merter-order-status-history .merter-account-table tbody td:nth-child(2) {
    width: 66.666%;
    white-space: normal;
    word-break: break-word;
  }
  .merter-order-status-history .merter-account-table tbody td:nth-child(2) {
    text-align: left;
  }
  .merter-order-status-history .merter-account-table thead th:nth-child(3),
  .merter-order-status-history .merter-account-table tbody td:nth-child(3),
  .merter-order-status-history .merter-account-table thead th:nth-child(4),
  .merter-order-status-history .merter-account-table tbody td:nth-child(4) {
    display: none;
  }
  .merter-order-date-mobile {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #9a9aa6;
  }
  .merter-order-row { cursor: pointer; }
}

/* Favorilerim / Gelince Haber Ver — mobilde tablo yerine katalog listeleme kartıyla
   aynı görsel dilde (merter-listing-grid) 2x2 ürün kartı grid'i gösterilir. */
.merter-account-cards-grid { display: none; }
.merter-account-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.merter-account-card-date { font-size: 11px; color: #9a9aa6; white-space: nowrap; }
@media (max-width: 992px) {
  .merter-favorites-table,
  .merter-stock-alerts-table {
    display: none;
  }
  .merter-account-cards-grid {
    display: flex;
  }
}

/* Kaydedilmiş Sepetler — mobilde tarih sütunu kalkar, toplam tutar altına iner. */
.merter-saved-cart-item-count { color: #9a9aa6; font-weight: 400; font-size: 0.92em; }
.merter-saved-cart-date-mobile { display: none; }
@media (max-width: 767.98px) {
  .merter-saved-carts-table .merter-account-table-wrap { overflow-x: hidden; }
  .merter-saved-carts-table .merter-account-table { width: 100%; min-width: 0; }
  .merter-saved-carts-table .merter-account-table thead th:nth-child(3),
  .merter-saved-carts-table .merter-account-table tbody td:nth-child(3) {
    display: none;
  }
  .merter-saved-cart-date-mobile {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #9a9aa6;
  }
}

/* Notlarım — mobilde ürün kodu ve tarih sütunları kalkar, ürün adı kutusunda
   kodun altına, not başlığı kutusunda tarihin altına iner (3 sütun). */
.merter-note-code-mobile,
.merter-note-date-mobile { display: none; }
@media (max-width: 767.98px) {
  .merter-notes-table .merter-account-table-wrap { overflow-x: hidden; }
  .merter-notes-table .merter-account-table { width: 100%; min-width: 0; }
  .merter-notes-table .merter-account-table thead th:nth-child(2),
  .merter-notes-table .merter-account-table tbody td:nth-child(2),
  .merter-notes-table .merter-account-table thead th:nth-child(4),
  .merter-notes-table .merter-account-table tbody td:nth-child(4) {
    display: none;
  }
  .merter-note-code-mobile,
  .merter-note-date-mobile {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #9a9aa6;
  }
}

/* Notlarım detay modalı — opsiyonel ürün meta bloğu (ad/kod/tarih), not gövdesinin üstünde. */
.merter-account-detail-meta { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f4; }
.merter-account-detail-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--merter-text); }
.merter-account-detail-meta-row + .merter-account-detail-meta-row { margin-top: 6px; }
.merter-account-detail-meta-label { font-size: 12px; font-weight: 600; color: #9a9aa6; }

/* Destek Taleplerim — konu sütunu geniş; diğerleri dar.
   Mobilde tarih sütunu kalkar, ticket no altına iner. */
.merter-support-date-mobile { display: none; }
.merter-support-table .merter-account-table {
  table-layout: fixed;
  width: 100%;
}
.merter-support-table .merter-account-table thead th:nth-child(1),
.merter-support-table .merter-account-table tbody td:nth-child(1) {
  width: 15%;
}
.merter-support-table .merter-account-table thead th:nth-child(2),
.merter-support-table .merter-account-table tbody td:nth-child(2) {
  width: 34%;
  text-align: left;
  word-break: break-word;
}
.merter-support-table .merter-account-table thead th:nth-child(3),
.merter-support-table .merter-account-table tbody td:nth-child(3) {
  width: 17%;
}
.merter-support-table .merter-account-table thead th:nth-child(4),
.merter-support-table .merter-account-table tbody td:nth-child(4) {
  width: 17%;
}
.merter-support-table .merter-account-table thead th:nth-child(5),
.merter-support-table .merter-account-table tbody td:nth-child(5) {
  width: 17%;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .merter-support-table .merter-account-table-wrap { overflow-x: hidden; }
  .merter-support-table .merter-account-table { width: 100%; min-width: 0; }
  .merter-support-table .merter-account-table thead th:nth-child(3),
  .merter-support-table .merter-account-table tbody td:nth-child(3) {
    display: none;
  }
  .merter-support-table .merter-account-table thead th:nth-child(1),
  .merter-support-table .merter-account-table tbody td:nth-child(1) {
    width: 24%;
  }
  .merter-support-table .merter-account-table thead th:nth-child(2),
  .merter-support-table .merter-account-table tbody td:nth-child(2) {
    width: 40%;
    text-align: left;
  }
  .merter-support-table .merter-account-table thead th:nth-child(4),
  .merter-support-table .merter-account-table tbody td:nth-child(4) {
    width: 20%;
  }
  .merter-support-table .merter-account-table thead th:nth-child(5),
  .merter-support-table .merter-account-table tbody td:nth-child(5) {
    width: 16%;
    white-space: nowrap;
  }
  .merter-support-date-mobile {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #9a9aa6;
  }
}

/* Destek Talebi Detayı — mobil-first chat:
   Sayfa scroll etmez. Shell viewport'a sabitlenir; thread kalan yüksekliği
   doldurur (iç scroll); yanıt satırı flex ile alta yapışır (position:fixed değil). */
.merter-support-send-icon { display: none; }
@media (max-width: 991.98px) {
  body:has(.merter-support-detail-page) {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
  }
  body:has(.merter-support-detail-page) .footer_one,
  body:has(.merter-support-detail-page) .scrollToHome {
    display: none !important;
  }
  /* Shell boşluğu kaydırma yaratmasın (fixed çocuk akıştan çıkar) */
  .body_content_wrapper.merter-body-shell:has(.merter-support-detail-page) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }

  /* Header altı → ekran altı: kesin yükseklik (önceki flex zinciri çökmesin diye fixed) */
  .merter-account-page:has(.merter-support-detail-page) {
    position: fixed;
    top: var(--merter-mobile-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    margin: 0;
    padding: 8px 8px 0;
    background: #f3f5f6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  .merter-account-page:has(.merter-support-detail-page) > .container {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
  }
  .merter-account-page:has(.merter-support-detail-page) > .container > .row {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .merter-account-page:has(.merter-support-detail-page) > .container > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Chat'te profil kartı yer yemesin; yatay nav kalsın */
  .merter-account-page:has(.merter-support-detail-page) .merter-account-user {
    display: none;
  }
  .merter-account-page:has(.merter-support-detail-page) > .container > .row > .col-lg-3 {
    flex: 0 0 auto;
    margin-bottom: 8px !important;
  }
  .merter-account-page:has(.merter-support-detail-page) .merter-account-sidebar {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .merter-account-page:has(.merter-support-detail-page) .merter-account-nav {
    padding: 0;
  }
  .merter-account-page:has(.merter-support-detail-page) > .container > .row > .col-lg-9 {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Panel: kalan yüksekliğin tamamı */
  .merter-support-detail-page {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 12px 12px 0;
    border-radius: var(--merter-radius-lg) var(--merter-radius-lg) 0 0;
  }
  .merter-support-detail-page .merter-account-panel-head {
    flex: 0 0 auto;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .merter-support-detail-page .merter-account-panel-title {
    font-size: 16px;
  }
  .merter-support-detail-page .merter-account-panel-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .merter-support-detail-page .merter-order-back {
    flex: 0 0 auto;
    margin-bottom: 8px !important;
  }
  .merter-support-detail-page .merter-order-head {
    flex: 0 0 auto;
    margin-bottom: 8px !important;
    padding: 8px 10px;
    gap: 6px 12px;
  }
  .merter-support-detail-page .merter-order-head span { font-size: 11px; }
  .merter-support-detail-page .merter-order-head b { font-size: 12.5px; }

  /* Mesajlar: kalan alanı doldur, yalnız burası scroll */
  .merter-support-detail-page .merter-support-thread {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 0 !important;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: #d5d5df transparent;
  }
  .merter-support-detail-page .merter-support-thread::-webkit-scrollbar { width: 4px; }
  .merter-support-detail-page .merter-support-thread::-webkit-scrollbar-thumb {
    background: #d5d5df;
    border-radius: 4px;
  }

  /* Yanıt satırı: panel dibine yapışık (sticky input) — fixed değil */
  .merter-support-reply-form {
    flex: 0 0 auto;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 -12px 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--merter-line);
    box-shadow: 0 -6px 18px rgba(20, 20, 43, .05);
  }
  .merter-support-reply-form .form-group { flex: 1 1 auto; min-width: 0; margin: 0; order: 1; }
  .merter-support-reply-form .form-label { display: none; }
  .merter-support-reply-form textarea.form-control {
    min-height: 40px;
    height: 40px;
    padding: 9px 12px;
    resize: none;
  }
  .merter-support-reply-form .text-end { order: 2; flex: 0 0 auto; }
  .merter-support-reply-form [data-form-msg] { order: 3; flex: 1 0 100%; margin: 0; }
  .merter-support-reply-form [data-form-msg]:empty { display: none; }
  .merter-support-send-btn {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
  }
  .merter-support-send-text { display: none; }
  .merter-support-send-icon { display: inline; }
}

/* Rozetler */
.merter-badge-success { display: inline-block; font-size: 12px; font-weight: 600; color: #1f9d63; background: #e7f7ee; border-radius: var(--merter-radius-pill); padding: 4px 12px; }
.merter-badge-danger { display: inline-block; font-size: 12px; font-weight: 600; color: #c0392b; background: #fde8e8; border-radius: var(--merter-radius-pill); padding: 4px 12px; }
.merter-badge-soft { display: inline-block; font-size: 12px; font-weight: 600; color: #9a6b00; background: #fdf3da; border-radius: var(--merter-radius-pill); padding: 4px 12px; }

/* Sosyal medya bölüm başlığı — başlık solda, ekle butonu sağda */
.merter-social-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.merter-social-section-head .merter-account-section-title { margin: 0; }
.merter-social-section-head .btn { flex-shrink: 0; white-space: nowrap; }

/* Sosyal medya satırı — sil butonu input yüksekliğinde ortalanır */
.merter-social-row { margin-bottom: 4px; }
.merter-social-row-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
/* Mobilde: platform tam genişlik; bağlantı URL + sil ikonu aynı satırda (URL solda, sil sağda). */
@media (max-width: 767.98px) {
  .merter-social-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 0;
    margin-bottom: 14px;
    margin-left: 0;
    margin-right: 0;
  }
  .merter-social-row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }
  .merter-social-row > .col-md-5 { grid-column: 1 / -1; }
  .merter-social-row > .col-md-6 { grid-column: 1; min-width: 0; }
  .merter-social-row > .merter-social-row-action {
    grid-column: 2;
    align-self: end;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding-left: 0;
  }
  .merter-social-row-action .form-label.invisible { display: none; }
  .merter-social-row-action-btn { width: 50px; flex-shrink: 0; }
}

/* Şifre alanı (göz ikonu) */
.merter-password-field { position: relative; }
.merter-password-field .form-control { padding-right: 44px; }
.merter-password-eye { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; color: #9a9aa6; }
.merter-password-eye:hover { color: var(--merter-purple); }

/* Bildirim tercihleri (toggle) */
.merter-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid #f2f2f6; }
.merter-notify-row:last-child { border-bottom: 0; }
.merter-notify-text h6 { font-size: 14px; font-weight: 600; color: #1d1d2b; margin: 0 0 4px; }
.merter-notify-text p { font-size: 13px; color: #8a8a98; margin: 0; max-width: 560px; }
.merter-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.merter-switch input { display: none; }
.merter-switch-slider { position: absolute; inset: 0; background: #d8d8e0; border-radius: var(--merter-radius-pill); cursor: pointer; transition: .2s; }
.merter-switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.merter-switch input:checked + .merter-switch-slider { background: var(--merter-purple); }
.merter-switch input:checked + .merter-switch-slider::before { transform: translateX(20px); }

/* Filtre satırı (siparişler, iade talepleri) — seçimle otomatik filtre, buton opsiyonel */
.merter-account-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.merter-account-filter-row--dual {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.merter-account-filter-row--status {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.merter-account-filter-row--date-only {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 767.98px) {
  .merter-account-filter-row,
  .merter-account-filter-row--dual,
  .merter-account-filter-row--status,
  .merter-account-filter-row--date-only {
    grid-template-columns: 1fr;
  }
}
.merter-account-filter-field { min-width: 0; }
.merter-account-filter .form-label { margin-bottom: 7px; }
.merter-account-filter .form-control,
.merter-account-filter .form-select,
.merter-account-filter .btn {
  height: 44px;
  max-width: 100%;
}
.merter-date-range { display: flex; align-items: center; gap: 6px; min-width: 0; }
.merter-date-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.merter-date-field .form-control {
  width: 100%;
  padding-left: 34px;
  padding-right: 6px;
  font-size: 13px;
  text-align: center;
}
.merter-date-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
}
.merter-date-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.merter-date-range span { color: #9a9aa6; flex-shrink: 0; }
/* Hesabım filtre — durum vb. selectpicker (global liste stili). */
.merter-account-select { position: relative; width: 100%; }
.merter-account-select .bootstrap-select { width: 100% !important; }
.merter-account-select .bootstrap-select > .dropdown-toggle {
  height: 44px !important; min-height: 44px; padding: 0 40px 0 14px !important;
  border: 1px solid var(--merter-line-2) !important; border-radius: var(--merter-radius-sm);
  background: #fff !important; color: var(--merter-ink) !important;
  font-size: 14px; font-weight: 500; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important;
  box-shadow: none !important; outline: 0 !important;
}
.merter-account-select .bootstrap-select > .dropdown-toggle:hover,
.merter-account-select .bootstrap-select > .dropdown-toggle:focus,
.merter-account-select .bootstrap-select > .dropdown-toggle:active,
.merter-account-select .bootstrap-select.show > .dropdown-toggle {
  border-color: var(--merter-purple) !important;
  background: #fff !important; color: var(--merter-ink) !important;
  box-shadow: none !important; outline: 0 !important;
}
.merter-account-select .bootstrap-select .filter-option,
.merter-account-select .bootstrap-select .filter-option-inner {
  display: flex !important; align-items: center; height: 100%;
  overflow: hidden; max-width: none; position: static !important;
  text-align: left; float: none; padding: 0; margin: 0;
}
.merter-account-select .bootstrap-select .filter-option-inner-inner {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  line-height: 1.3; display: block; padding: 0; margin: 0; color: var(--merter-ink);
}
.merter-account-select .bootstrap-select.bs-placeholder .filter-option-inner-inner { color: #9a9aa8; }
.merter-account-select .bootstrap-select .dropdown-toggle::after {
  border: 0; width: 8px; height: 8px; margin: 0 !important;
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid var(--merter-text); border-bottom: 2px solid var(--merter-text);
}
/* Native fallback (selectpicker yoksa) */
.merter-account-select > select {
  height: 44px; width: 100%; border: 1px solid var(--merter-line-2);
  border-radius: var(--merter-radius-sm); padding: 0 14px; background: #fff;
  color: var(--merter-ink); font-size: 14px; outline: none; box-shadow: none;
}
.merter-account-select > select:focus { border-color: var(--merter-purple); }
.merter-account-filter-extra select.form-control { width: 100%; }

/* Arama kutusu (favoriler) */
.merter-account-search { position: relative; }
.merter-account-search .form-control { padding-left: 40px; }
.merter-account-search i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #9a9aa6; font-size: 13px; }

/* İade modal: dosya seç + aksiyonlar */
.merter-file-input { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid #e0e0e6; border-radius: var(--merter-radius-sm); padding: 11px 14px; color: #9a9aa6; font-size: 14px; cursor: pointer; }
.merter-file-input i { color: #6a6a78; }
.merter-return-photo-strip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.merter-return-photo-strip:not(:empty) { margin-top: 10px; }
.merter-return-photo-thumb { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--merter-radius-sm); overflow: hidden; border: 1px solid #e0e0e6; }
.merter-return-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merter-return-photo-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 30, .65); color: #fff; border: 0; border-radius: 50%;
  font-size: 10px; line-height: 1; cursor: pointer;
}
.merter-return-photo-remove:hover { background: #e0556a; }
.merter-return-modal-actions { display: flex; gap: 12px; margin-top: 8px; }
.merter-return-modal-actions .btn { flex: 1; }
.merter-return-item { background: #f9fafb; border: 1px solid #eee; border-radius: var(--merter-radius-sm); padding: 12px 16px; margin-bottom: 14px; }
.merter-return-item .form-group:last-child { margin-bottom: 0; }
.merter-return-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merter-return-item-toggle {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    padding: 4px 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.merter-return-item-chevron {
    flex: none; width: 16px; color: #9a9aa6; font-size: 12px;
    transition: transform .2s ease;
}
.merter-return-item-toggle.collapsed .merter-return-item-chevron { transform: rotate(-90deg); }
.merter-return-item-toggle:not(.collapsed) .merter-return-item-chevron { color: var(--merter-purple); }
.merter-return-item-title {
    font-weight: 600; color: #3a3f4a; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.merter-return-item-body { padding-top: 12px; }
.merter-return-item-body.collapse:not(.show) { padding-top: 0; }
.merter-return-add-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; }

@media (max-width: 767.98px) {
  .merter-account-panel { padding: 18px 14px; }
  .merter-notify-row { flex-direction: row; }
  /* Başlık + Geri Dön gibi tek buton aynı satırda kalsın */
  .merter-account-panel-head { flex-wrap: nowrap; gap: 10px; }
  .merter-account-panel-title { flex: 1 1 auto; min-width: 0; font-size: 17px; }
  .merter-account-panel-action { flex: 0 0 auto; }
  .merter-account-panel-action .btn { white-space: nowrap; font-size: 13px; padding: 8px 12px; }

  /*
   Favoriler / Gelince Haber Ver (mobil):
   Sol: section title — Sağ: Ara + Sırala kompakt, aynı satırda yan yana
   */
  .merter-account-panel-head:has(.merter-cart-search) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .merter-account-panel-head:has(.merter-cart-search) .merter-account-panel-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .merter-account-panel-action:has(.merter-cart-search) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
  }
  .merter-account-panel-tools:has(.merter-cart-search) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-search {
    flex: 0 1 108px;
    width: 108px;
    min-width: 88px;
    max-width: 120px;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-search input {
    width: 100%;
    height: 36px;
    padding: 0 6px 0 28px;
    font-size: 12px;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-search i {
    left: 9px;
    font-size: 11px;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap {
    flex: 0 0 96px;
    width: 96px;
    min-width: 0;
    max-width: 96px;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap .bootstrap-select,
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 96px;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap .bootstrap-select > .dropdown-toggle {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 24px 0 8px !important;
    font-size: 12px !important;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap .bootstrap-select .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .merter-account-panel-tools:has(.merter-cart-search) .merter-cart-sort-wrap .bootstrap-select .dropdown-toggle::after {
    right: 8px;
  }
}

@media (max-width: 575px) {
  .merter-account-panel { padding: 18px 10px; }
}

/* ----------------------------------------------------------------------------
   Sepet drawer (sağdan açılır) — header sepet ikonuyla açılır; mağaza grupli,
   açılır Sepet Özeti, mobil uyumlu. Tema .cart-hidden-sbar genişlik/kayma kuralları
   menu.css'ten gelir; burada yalnız iç düzen + override.
   ---------------------------------------------------------------------------- */
.merter-cdrawer { display: flex; flex-direction: column; overflow: hidden; }
.merter-cdrawer .hsidebar-header { flex: 0 0 auto; }
.merter-cdrawer.is-busy #merter-cdrawer-content { opacity: .55; pointer-events: none; }
#merter-cdrawer-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Kaydırılabilir ürün listesi */
.merter-cdrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.merter-cdrawer-group { margin-bottom: 18px; }
.merter-cdrawer-group:last-child { margin-bottom: 0; }
.merter-cdrawer-vendor { background: #f3f4f7; color: var(--merter-ink); font-weight: 700; font-size: 15px; padding: 12px 16px; border-radius: var(--merter-radius-sm); margin-bottom: 12px; }

.merter-cdrawer-item { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); margin-bottom: 12px; }
.merter-cdrawer-item:last-child { margin-bottom: 0; }
.merter-cdrawer-thumb { width: 78px; height: 100px; object-fit: cover; border-radius: var(--merter-radius-sm); flex: 0 0 auto; }
.merter-cdrawer-info { flex: 1 1 auto; min-width: 0; }
.merter-cdrawer-name { display: block; font-weight: var(--merter-fw-label); color: var(--merter-heading-color); font-size: var(--merter-fs-h6); line-height: 1.35; margin-bottom: 5px; }
.merter-cdrawer-name:hover { color: var(--merter-purple); }
.merter-cdrawer-meta { display: block; font-size: 12.5px; color: #9a9aa6; line-height: 1.5; }

/* Birim/Seri fiyat kutusu */
.merter-cdrawer-pricebox { display: flex; justify-content: space-between; gap: 10px; background: #faf8fb; border-radius: var(--merter-radius-sm); padding: 9px 12px; margin: 10px 0; }
.merter-cdrawer-pricebox span { display: block; font-size: 11px; color: #9a9aa6; margin-bottom: 2px; }
.merter-cdrawer-pricebox b { font-size: 14px; color: var(--merter-ink); }

/* Adet stepper + sil */
.merter-cdrawer-actions { display: flex; align-items: center; gap: 10px; }
.merter-cdrawer-qtylabel { font-size: 12.5px; color: #777; }
.merter-cdrawer-qty { display: inline-flex; align-items: center; border: 1px solid var(--merter-line-2); border-radius: var(--merter-radius-sm); overflow: hidden; margin: 0; }
.merter-cdrawer-qty-btn { width: 32px; height: 34px; background: #f7f6f9; border: 0; color: #555; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.merter-cdrawer-qty-btn:hover { background: var(--merter-purple-bg); color: var(--merter-purple); }
.merter-cdrawer-qty-input { width: 42px; height: 34px; border: 0; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.merter-cdrawer-qty-input::-webkit-outer-spin-button,
.merter-cdrawer-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.merter-cdrawer-removeform { margin: 0 0 0 auto; }
.merter-cdrawer-remove { width: 34px; height: 34px; border: 1px solid #eee; background: #fff; border-radius: var(--merter-radius-sm); color: #c0392b; }
.merter-cdrawer-remove:hover { background: #fdecea; border-color: #f5c6c0; }

/* Boş sepet */
.merter-cdrawer-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; }
.merter-cdrawer-empty i { font-size: 42px; color: #d7d3dc; margin-bottom: 16px; }
.merter-cdrawer-empty p { color: #777; margin-bottom: 20px; }

/* Footer: adet kutusu + Sepet Özeti + aksiyonlar */
.merter-cdrawer-footer { flex: 0 0 auto; border-top: 1px solid #eaeaea; padding: 16px 20px; background: #fff; }
.merter-cdrawer-counts { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: space-between; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); padding: 12px 6px; margin-bottom: 12px; }
.merter-cdrawer-counts span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--merter-ink); padding: 0 8px; }
.merter-cdrawer-counts i { color: var(--merter-purple); font-size: 13px; }

/* Açılır/kapanır Sepet Özeti */
.merter-cdrawer-summary { border: 1px solid var(--merter-line); border-radius: var(--merter-radius-md); margin-bottom: 14px; overflow: hidden; }
.merter-cdrawer-summary-head { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border: 0; padding: 14px 16px; cursor: pointer; }
.merter-cdrawer-summary-head .ttl { font-weight: 700; color: var(--merter-ink); font-size: 15px; }
.merter-cdrawer-summary-head .amt { color: var(--merter-ink); font-weight: 600; }
.merter-cdrawer-summary-head .chev { margin-left: auto; color: #9a9aa6; transition: transform .25s ease; }
.merter-cdrawer-summary:not(.is-collapsed) .merter-cdrawer-summary-head .chev { transform: rotate(180deg); }
.merter-cdrawer-summary-body { padding: 0 16px 14px; }
.merter-cdrawer-summary.is-collapsed .merter-cdrawer-summary-body { display: none; }
.merter-cdrawer-summary-body ul { list-style: none; padding: 12px 0 0; margin: 0; border-top: 1px solid #f3f2f5; }
.merter-cdrawer-summary-body li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; color: #777; font-size: 14px; }
.merter-cdrawer-summary-body li b { color: var(--merter-ink); font-weight: 600; }
.merter-cdrawer-summary-body li.total { margin-top: 4px; padding-top: 12px; border-top: 1px solid #f3f2f5; }
.merter-cdrawer-summary-body li.total span { color: var(--merter-ink); font-weight: 700; }
.merter-cdrawer-summary-body li.total b { font-size: 16px; }
.merter-cdrawer-footer .btn { margin-bottom: 10px; }
.merter-cdrawer-footer .btn:last-child { margin-bottom: 0; }

/* Mobil: drawer tam genişlik */
@media (max-width: 575px) {
  .cart-hidden-sbar.merter-cdrawer { width: 100% !important; right: -100%; }
}

/* shared.helpers (swalSuccess/swalError/swalConfirm/showLoading) — sticky mobil app-bar'ın (z-index:1000)
   üstünde kalsın diye default temayla aynı yüksek z-index override'ı. */
.swal-high-zindex,
.swal-loading-backdrop {
    z-index: 99999999 !important;
}

/* Sipariş Başarılı (checkout_completed) — hero kartı; alttaki özet/havale/mağaza blokları
   merter-order-* ve merter-bank-details ile aynı bileşenleri yeniden kullanır. */
.merter-success-hero { text-align: center; background: #fff; border: 1px solid var(--merter-line); border-radius: var(--merter-radius-lg); padding: 48px 24px 40px; }
.merter-success-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--merter-purple-bg); color: var(--merter-purple); font-size: 26px; display: flex; align-items: center; justify-content: center; }
.merter-success-title { font-size: var(--merter-fs-h2); font-weight: var(--merter-fw-heading); color: var(--merter-heading-color); margin-bottom: 10px; }
.merter-success-sub { color: #777; font-size: var(--merter-fs-body); max-width: 520px; margin: 0 auto 18px; }
.merter-success-code { display: inline-flex; align-items: center; gap: 8px; background: #f7f7f9; border-radius: var(--merter-radius-pill); padding: 8px 20px; font-size: 14px; color: #666; }
.merter-success-code b { color: var(--merter-ink); font-weight: 700; }
/* Başarı ekranı — banka hesapları 2 sütun (compact ama okunabilir); checkout ödeme paneline dokunmaz. */
.merter-success-banks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
  align-items: stretch;
}
.merter-success-banks .merter-bank-details {
  margin: 0;
  padding: 12px 14px;
  height: 100%;
  min-width: 0;
}
.merter-success-banks .merter-bank-details-logo { margin-bottom: 10px; }
.merter-success-banks .merter-bank-details-logo img { height: 32px; max-width: 120px; }
.merter-success-banks .merter-bank-details-rows { row-gap: 8px; column-gap: 10px; }
.merter-success-banks .merter-bank-row { column-gap: 10px; }
.merter-success-banks .merter-bank-row > span { font-size: 11px; }
.merter-success-banks .merter-bank-row > b { font-size: 13px; }
.merter-success-banks .merter-bank-copy { width: 28px; height: 28px; }
@media (max-width: 767.98px) {
  .merter-success-banks { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================
   MERTER MEGA MENU — kategori hover paneli
   Containing block: header (position:relative).
   nav/container .posr override → panel header altına full-width.
   Nav item dikey stretch → link→panel hover kopmaz.
   Tailwind YOK — tüm layout burada.
   ========================================== */
header.header-nav.menu_style_home_one.main-menu > nav.posr,
header.header-nav.menu_style_home_one.main-menu > nav > .container.posr {
  position: static;
}
header.header-nav.menu_style_home_one.main-menu .merter-nav-row {
  align-items: stretch;
}
header.header-nav.menu_style_home_one.main-menu .merter-header-actions-col {
  display: flex;
  align-items: center;
  /* merter-menu-overlay (z-index 40, fixed) header ile AYNI stacking context'te
     (header position:relative;z-index:200) → z-index'siz kardeşlerin (bu kolon
     dahil) üstünde kalıp para birimi/dil/satıcı-ol vb. şeridini karartıyordu. */
  position: relative;
  z-index: 41;
}
/* Kadın/Erkek/... sekmeleri logo ile hizalı başlasın (solda boş marka kolonu yok). */
header.header-nav.menu_style_home_one.main-menu .merter-nav-row .merter-header-brand-col {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  padding: 0;
}
header.header-nav.menu_style_home_one.main-menu .merter-nav-center {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
header.header-nav.menu_style_home_one.main-menu .merter-nav-center::-webkit-scrollbar { display: none; }

.merter-mega-nav-item {
  position: static; /* absolute panel → header'a çapalanır */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.merter-mega-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 18px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2b2e38;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  /* merter-menu-overlay ile aynı gerekçe: sekme linki overlay'in altında
     kalıp flu/karanlık görünüyordu (bkz. yukarı .merter-header-actions-col). */
  position: relative;
  z-index: 41;
}
.merter-mega-nav-item:hover .merter-mega-nav-link {
  color: var(--merter-purple);
  border-bottom-color: var(--merter-purple);
}

/* Kategorilerin sağındaki | ayracı + sabit hızlı linkler (panel → Header Menü).
   Kategori sekmeleriyle AYNI tipografiyi (.merter-mega-nav-link) kullanır;
   fark yalnız mega panel açmamaları. z-index 41: kategori linkleriyle aynı
   gerekçe (mega menü overlay'inin altında kalıp flulaşmasınlar). */
.merter-nav-quick-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  z-index: 41;
}
.merter-nav-quick-item:hover .merter-mega-nav-link {
  color: var(--merter-purple);
  border-bottom-color: var(--merter-purple);
}
.merter-nav-quick-item .merter-mega-nav-link.dropdown-toggle::after {
  display: none; /* Bootstrap caret gizle — fa-angle-down kullanıyoruz */
}
.merter-nav-center-sep {
  position: relative;
  z-index: 41;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-inline: -8px; /* .merter-nav-center gap'ini (24px) ayraç etrafında kıs */
  color: #c5c9d2;
  font-size: 13px;
  font-weight: 400;
  user-select: none;
}

.merter-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 40;
  pointer-events: none;
}
.merter-mega-nav-item:hover .merter-menu-overlay { display: block; }

/* Panel: header'ın altına, tam genişlik */
.merter-mega-container {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  height: 540px;
  background: #fff;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12);
  border-top: 1px solid var(--merter-line, #e2e8f0);
  z-index: 50;
  font-family: 'Jost', sans-serif;
}
.merter-mega-nav-item:hover .merter-mega-container { display: block; }

/* İç satır — full-bleed panel içinde site container hizası.
   Sabit 1320px/15px (eski Bootstrap xxl) DEĞİL: merkezi fluid container ile
   AYNI token'lar → sekme kartı "KADIN" ile, banner sağ aksiyon grubuyla
   birebir hizalanır (her ekran genişliğinde; öncesinde geniş ekranda
   iki yandan ~110px içeride kalıyordu). Tek kaynak: bkz. .container kuralı. */
.merter-mega-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;
  max-width: var(--merter-container-max);
  margin: 0 auto;
  padding-inline: var(--merter-gutter);
  padding-block: 0;
  min-width: 0;
  box-sizing: border-box;
}

.merter-mega-tabs-side {
  flex: 0 0 240px;
  width: 240px;
  border-right: 1px solid #f1f5f9;
  padding: 20px 12px 20px 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.merter-mega-tabs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.merter-mega-tab-btn {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #64748b;
  border-radius: var(--merter-radius-sm, 6px);
  transition: background-color .2s ease, color .2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}
.merter-mega-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.merter-mega-tab-btn .tab-icon,
.merter-mega-tab-btn .right-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.merter-mega-tab-btn:hover,
.merter-mega-tab-btn.active {
  color: var(--merter-purple);
  background-color: var(--merter-purple-bg);
  font-weight: 600;
}
.merter-mega-tab-btn .tab-icon { color: var(--merter-purple-l); }
.merter-mega-tab-btn:hover .tab-icon,
.merter-mega-tab-btn.active .tab-icon { color: var(--merter-purple); }
/* Panelden yüklenen kategori görseli (categories.icon) — SVG ikonla aynı kutuda
   durur; currentColor geçerli olmadığı için renk kuralları burada etkisiz. */
.merter-mega-tab-btn .tab-icon-img { object-fit: contain; }
.merter-mega-tab-btn .right-arrow { display: none; color: var(--merter-purple); }
.merter-mega-tab-btn.active .right-arrow { display: block; }

.merter-mega-content-side {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 28px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.merter-mega-tab-content {
  width: 100%;
  height: 100%;
}
.merter-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  align-content: start;
  width: 100%;
}
/* Bir sütuna panelden birden çok kolon atanabilir; alt alta dizilirler. */
.merter-mega-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.merter-mega-col-block {
  min-width: 0;
}
.merter-mega-col-title {
  font-weight: 600;
  color: var(--merter-ink);
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: -0.2px;
}
.merter-mega-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.merter-mega-col-list li a {
  font-size: 13px;
  color: #64748b;
  font-weight: 400;
  transition: color 0.15s ease;
  text-decoration: none;
}
.merter-mega-col-list li a:hover {
  color: var(--merter-purple);
  font-weight: 500;
}

.merter-mega-banner-side {
  flex: 0 0 260px;
  width: 260px;
  padding: 20px 0 20px 20px;
  border-left: 1px solid #f1f5f9;
  height: 100%;
  min-width: 0;
}
/* 1 / 2 / 3 banner — dikey stack, eşit paylaşım */
.merter-mega-banner-group {
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 10px;
}
.merter-mega-banner-group.d-flex .merter-mega-banner-card {
  flex: 1 1 0;
  min-height: 0;
}
.merter-mega-banner-card {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--merter-radius-md, 8px);
  background-color: #94a3b8;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.merter-mega-banner-card:nth-child(2) { background-color: #64748b; }
.merter-mega-banner-card:nth-child(3) { background-color: #475569; }
.merter-mega-banner-card.has-image { background-color: #1e293b; }
.merter-mega-banner-card .banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  color: #fff;
  z-index: 10;
  transition: transform 0.3s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
}
.merter-mega-banner-card:hover .banner-overlay { transform: scale(1.03); }
/* Fotoğraflı kart: ajans görselleri açık tonlu (pudra, krem) — ortalanmış
   beyaz yazı bu zeminde okunmuyordu. Metin alta çekilip gradient orada
   koyulaştırıldı: fotoğrafın üst yarısı açık kalıyor, yazı kontrastı geçiyor.
   Görselsiz kart eski (ortalanmış) düzeninde kalır. */
.merter-mega-banner-card.has-image .banner-overlay {
  justify-content: flex-end;
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.82) 100%);
}
.merter-mega-banner-card.has-image .merter-mega-banner-title { font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.merter-mega-banner-card.has-image .merter-mega-banner-cta { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.merter-mega-banner-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.25;
}
/* Rozet + açıklama — panelden (Mega Menü Banner Kartları) doldurulduğunda
   çıkar, boşsa hiç render edilmez. 260px'lik dar kartta taşmasın diye
   açıklama 2 satırla sınırlı. */
.merter-mega-banner-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.merter-mega-banner-desc {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.merter-mega-banner-cta {
  font-size: 12px;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
}
.merter-mega-banner-group[data-count="2"] .merter-mega-banner-title { font-size: 15px; }
.merter-mega-banner-group[data-count="3"] .merter-mega-banner-title { font-size: 13px; }
.merter-mega-banner-group[data-count="2"] .merter-mega-banner-cta,
.merter-mega-banner-group[data-count="3"] .merter-mega-banner-cta { font-size: 11px; }

@media (max-width: 1199.98px) {
  .merter-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .merter-mega-banner-side { flex-basis: 220px; width: 220px; }
}
@media (max-width: 991.98px) {
  /* Masaüstü mega menü — mobil drawer ayrı; tablet/mobilde gizle */
  .merter-mega-container,
  .merter-menu-overlay { display: none !important; }
}