/* ============================================================
   store.css — Altunakar Mağaza · Premium Açık Tema (Light)
   Modern, ferah, profesyonel e-ticaret arayüzü. Self-contained.
   ============================================================ */

:root {
    --c-bg: #f3f5f9;
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-ink: #101828;
    --c-ink-2: #475467;
    --c-muted: #667085;
    --c-line: #e7eaef;
    --c-line-2: #f0f2f5;

    --primary: #1f5aa6;
    --primary-d: #184a8c;
    --primary-dd: #133a6e;
    --primary-soft: #eef4fb;
    --primary-ring: rgba(31, 90, 166, 0.16);

    --success: #0d8a52;
    --success-soft: #e7f7ef;
    --danger: #f04438;
    --danger-soft: #fef3f2;
    --warning: #b54708;
    --warning-soft: #fffaeb;
    --star: #fdb022;

    --price: #0b1324;
    --r: 16px;
    --r-2: 12px;
    --r-3: 9px;

    --sh-xs: 0 1px 2px rgba(16,24,40,0.05);
    --sh-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
    --sh-md: 0 6px 16px rgba(16,24,40,0.08);
    --sh-lg: 0 16px 40px rgba(16,24,40,0.12);

    --nav-h: 72px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-disp: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

* { box-sizing: border-box; }

.magaza-body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* :where() ozgullugu sifirlar; boylece kendi rengini tanimlayan link siniflari
   (.btn-p gibi) bu genel kurala yenilmez — mavi buton uzerinde koyu yazi sorunu. */
:where(.magaza-body) a { color: inherit; }
.magaza-body a { text-decoration: none; }
.magaza-body img { max-width: 100%; display: block; }
.magaza-body .container { width: 100%; max-width: var(--kap-en, 1240px); margin: 0 auto; padding: 0 24px; }

/* ---------- EKRAN ÖLÇEĞİ — her monitörde otomatik uyum ----------
   Stil dosyası baştan sona px tabanlı. Bu yüzden 27"+ / 2K / 4K monitörlerde
   sabit 1240px'lik kolon ekranın ortasında ince bir şerit gibi kalıyor, site
   "küçücük" görünüyordu. İki katmanlı kalıcı çözüm:
     1) Kapsayıcı genişliği ekranla birlikte kademeli büyür.
     2) Gerçekten geniş ekranlarda `zoom` ile TÜM px değerleri (yazı, ikon,
        boşluk, kart) orantılı büyür. 1600 satırlık px stilini rem'e çevirmeden
        aynı sonucu verir; medya sorguları gerçek viewport'u okuduğu için
        katmanlar birbirini bozmaz.
   Not: dar ekranlarda hiçbir şey değişmez — zoom yalnızca 1800px üstünde açılır. */
@media (min-width: 1500px) { :root { --kap-en: 1360px; } }
@media (min-width: 1700px) { :root { --kap-en: 1460px; } }
@media (min-width: 1800px) { .magaza-body { zoom: 1.08; } }
@media (min-width: 2100px) { .magaza-body { zoom: 1.18; } }
@media (min-width: 2500px) { .magaza-body { zoom: 1.30; } }
@media (min-width: 3000px) { .magaza-body { zoom: 1.45; } }

/* Yatay taşma kalkanı: grid/flex çocukları varsayılan olarak min-content'ten
   küçülemez; boşluksuz uzun bir ürün adı veya kod tüm sayfayı sağa kaydırıp
   tam genişlikteki başlık şeritlerinin içerikten önce bitmesine yol açıyordu. */
.magaza-body .shop-layout > *,
.magaza-body .shop-grid > *,
.magaza-body .bw-home-top > * { min-width: 0; }
.magaza-body .pcard-title,
.magaza-body .pcard-marka { overflow-wrap: anywhere; }
h1,h2,h3,h4,h5 { font-family: var(--font-disp); color: var(--c-ink); letter-spacing: -0.02em; }
p { color: var(--c-ink-2); }

/* ---------- KLAVYE ODAĞI ----------
   Tarayıcının varsayılan outline'ı yuvarlatılmış butonlarda köşeleri kesiyordu,
   bu yüzden birçok yerde kapatılmıştı; sonuç: klavyeyle gezen kullanıcı nerede
   olduğunu göremiyordu. :focus-visible yalnızca klavye/AT odağında devreye
   girer — fareyle tıklamada halka çıkmaz, o yüzden görsel kirlilik yaratmaz. */
.magaza-body :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-3);
}
/* Koyu zeminli şeritlerde lacivert halka görünmüyor; beyaza çevriliyor. */
.magaza-topbar :focus-visible,
.magaza-catnav :focus-visible,
.magaza-footer :focus-visible { outline-color: #fff; }
/* Fare tıklamasında kalan iç odak izleri (butonlarda) temizleniyor. */
.magaza-body button:focus:not(:focus-visible),
.magaza-body a:focus:not(:focus-visible),
.magaza-body select:focus:not(:focus-visible) { outline: none; }

/* ---------- ÜST DUYURU ŞERİDİ ---------- */
.magaza-topbar {
    background: #0b1324; color: #cbd5e1; font-size: 12.5px; font-weight: 500;
}
.magaza-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; }
.magaza-topbar .sol { display: flex; align-items: center; gap: 8px; }
.magaza-topbar .sag { display: flex; align-items: center; gap: 20px; }
.magaza-topbar .sag a { color: #cbd5e1; display: inline-flex; align-items: center; gap: 6px; transition: .2s; }
.magaza-topbar .sag a:hover { color: #fff; }
.magaza-topbar b { color: #fff; }
.magaza-topbar i { color: #60a5fa; }
.magaza-topbar .tb-doviz { display: inline-flex; align-items: center; gap: 14px; padding-right: 4px; }
.magaza-topbar .tb-kur { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.magaza-topbar .tb-kur b { color: #60a5fa; font-weight: 700; font-size: 11.5px; letter-spacing: .02em; }
.magaza-topbar .tb-kur + .tb-kur { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }

/* ---------- MAĞAZA DUYURU BANNER'I ---------- */
.magaza-banner { font-size: 13.5px; font-weight: 600; }
.magaza-banner .container { padding-top: 9px; padding-bottom: 9px; display: flex; justify-content: center; }
.magaza-banner a, .magaza-banner span { display: inline-flex; align-items: center; gap: 8px; }
.magaza-banner a:hover { text-decoration: underline; }
.magaza-banner.tip-bilgi { background: var(--primary-soft); color: var(--primary-dd); }
.magaza-banner.tip-kampanya { background: var(--success-soft); color: #067647; }
.magaza-banner.tip-uyari { background: var(--warning-soft); color: #b54708; }

/* ---------- ANA HEADER ---------- */
.magaza-header {
    background: var(--c-surface); border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0; z-index: 900; box-shadow: var(--sh-xs);
}
.magaza-header .container { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.magaza-brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
/* Gerçek Altunakar logosu: siyah zemin, kırmızı A + altın B (kurumsal sitedeki
   .brand-mark ile birebir aynı renkler). Mağaza başlığında jenerik çip ikonu
   duruyordu; marka kimliği artık her iki sitede tek. */
.magaza-brand .logo-mark {
    width: 42px; height: 42px; border-radius: 11px;
    background: #0b0b0b;
    display: flex; align-items: center; justify-content: center; gap: 1px;
    font-family: var(--font-disp); font-size: 20px; font-weight: 900; letter-spacing: -1px; line-height: 1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .22);
}
.magaza-brand .logo-mark i { font-style: normal; color: #e31e24; }
.magaza-brand .logo-mark b { font-weight: 900; color: #f5c518; }
.magaza-brand .logo-txt { line-height: 1.05; }
.magaza-brand .logo-txt b { font-family: var(--font-disp); font-weight: 800; font-size: 18px; color: var(--c-ink); letter-spacing: -0.03em; display: block; }
.magaza-brand .logo-txt span { font-size: 11px; color: var(--c-muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.magaza-search { flex: 1 1 auto; max-width: 680px; min-width: 300px; position: relative; }
.magaza-search input {
    width: 100%; height: 46px; padding: 0 52px 0 46px;
    background: var(--c-surface-2); border: 1.5px solid var(--c-line);
    border-radius: 12px; color: var(--c-ink); font-size: 14.5px; font-family: inherit; outline: none; transition: .18s;
}
.magaza-search input::placeholder { color: var(--c-muted); }
.magaza-search input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.magaza-search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: 15px; }
.magaza-search .git {
    position: absolute; right: 6px; top: 6px; height: 34px; width: 40px; border: none; border-radius: 9px;
    background: var(--primary); color: #fff; cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center;
}
.magaza-search .git:hover { background: var(--primary-d); }

.magaza-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr-btn {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 11px;
    color: var(--c-ink-2); transition: .18s; font-weight: 600; font-size: 13px;
    white-space: nowrap; flex-shrink: 0;
}
.hdr-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.hdr-btn .ic { font-size: 19px; color: var(--c-ink-2); }
.hdr-btn .tx { white-space: nowrap; }
.hdr-btn .tx small { display: block; font-size: 11px; color: var(--c-muted); font-weight: 500; white-space: nowrap; }
.hdr-btn .tx b { font-size: 13.5px; color: var(--c-ink); font-weight: 700; white-space: nowrap; }
.hdr-cart { position: relative; }
.hdr-cart .badge-c {
    position: absolute; top: 2px; left: 26px; background: var(--danger); color: #fff;
    font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.hdr-cart .badge-c.bos { display: none; }

/* Tema düğmesi: yalnızca ikon, metin yok — başlıkta yer dar. */
.tema-btn { padding: 8px 11px; background: none; border: 0; cursor: pointer; }

/* ---------- SEPET ÖN İZLEME ----------
   Sarmalın altındaki 10px'lik boşluk, ikondan panele giderken fare araya
   düşüp panelin kapanmasını engelliyor (padding-top ile köprü kuruluyor). */
.hdr-cart-sarmal { position: relative; }
.sepet-onizleme {
    position: absolute; top: 100%; right: 0; margin-top: 10px; width: 340px; z-index: 900;
    background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--sh-lg);
    padding: 12px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .16s;
}
.sepet-onizleme::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.sepet-onizleme[hidden] { display: none; }
.sepet-onizleme.acik { opacity: 1; transform: none; pointer-events: auto; }
.so-liste { display: flex; flex-direction: column; gap: 4px; }
.so-satir { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 10px; transition: .15s; }
.so-satir:hover { background: var(--c-surface-2); }
.so-satir img, .so-ph {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; object-fit: contain;
    background: #fff; border: 1px solid var(--c-line-2);
}
.so-ph { display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 17px; }
.so-bilgi { min-width: 0; flex: 1; }
.so-ad { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.so-adet { font-size: 11.5px; color: var(--c-muted); }
.so-fiyat { font-size: 13px; font-weight: 800; color: var(--price); white-space: nowrap; }
.so-kalan { display: block; padding: 6px; text-align: center; font-size: 12px; color: var(--c-muted); }
.so-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line-2); }
.so-alt b { font-size: 15px; color: var(--price); }
.so-alt span { font-size: 12px; color: var(--c-muted); }
.so-btn {
    display: block; margin-top: 8px; padding: 10px; border-radius: 10px; text-align: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px; transition: .18s;
}
.so-btn:hover { background: var(--primary-d); color: #fff; }
.so-bos { padding: 26px 10px; text-align: center; color: var(--c-muted); font-size: 13px; }
.so-bos i { display: block; font-size: 26px; margin-bottom: 8px; opacity: .5; }
@media (max-width: 900px) { .sepet-onizleme { display: none !important; } }

/* Header döviz kurları (bayiweb tarzı) */
.hdr-doviz { display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin-right: 4px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 11px; }
.hdr-doviz .kur { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1; }
.hdr-doviz .kur b { color: var(--c-muted); font-weight: 700; font-size: 11px; }
.hdr-doviz .kur span { color: var(--c-ink); font-weight: 800; }
.hdr-doviz .kur + .kur { padding-left: 8px; border-left: 1px solid var(--c-line); }

/* ---------- KATEGORİ NAV (bayiweb tarzı) ---------- */
.magaza-catnav { background: var(--primary); position: relative; z-index: 850; }
.magaza-catnav .container { display: flex; align-items: stretch; gap: 0; height: 52px; position: relative; flex-wrap: nowrap; }

/* Sol: Tüm Kategoriler açılır menü */
.bw-katbtn { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.bw-katbtn-lbl {
    display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px 0 4px;
    color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; min-width: 250px;
}
.bw-katbtn-lbl i { font-size: 16px; }
.bw-katmenu {
    position: absolute; top: 100%; left: 0; width: 280px; background: #fff;
    border: 1px solid var(--c-line); border-top: none; border-radius: 0 0 10px 10px;
    box-shadow: var(--sh-md); padding: 6px; z-index: 860;
    /* Burada bilerek transform YOK. En küçük transform bile (translateY(0) dahil)
       bu kutuyu, içindeki position:fixed mega menü için kapsayıcı bloğa çevirir;
       mega menü de kutuya hapsolup yanlış yerde belirir. Açılış efekti sadece
       opaklıkla veriliyor. */
    opacity: 0; visibility: hidden; transition: opacity .16s, visibility .16s;
    max-height: 70vh; overflow-y: auto;
}
.bw-katbtn:hover .bw-katmenu { opacity: 1; visibility: visible; }
.bw-katmenu-item {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: var(--c-ink-2); transition: .14s;
}
.bw-katmenu-item i:first-child { width: 18px; text-align: center; color: var(--primary); font-size: 14px; }
.bw-katmenu-item .ok { margin-left: auto; font-size: 11px; color: var(--c-muted); }
.bw-katmenu-item:hover { background: var(--primary-soft); color: var(--primary-d); }
.bw-katmenu-item.aktif { background: var(--primary-soft); color: var(--primary-d); }

/* Mega menü (kategori → marka) */
/* Burada eskiden "overflow: visible" vardı; mega menü yana taşabilsin diyeydi.
   Ama aynı satır üstteki "overflow-y: auto" kuralını da iptal ettiği için 20+
   kategorili liste max-height'i aşıp sayfanın üstüne taşıyordu (beyaz kutu
   bitiyor, satırlar ürünlerin üzerine yazılıyordu). Liste artık kendi içinde
   kayıyor; mega menü ise magaza_alt.php'deki betikle ekrana sabitlenip
   satırın hizasına konumlandığı için kutudan bağımsız çalışıyor. */
.bw-katmenu { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* İnce, panelin diliyle uyumlu kaydırma çubuğu — listenin devamı olduğu belli olsun. */
.bw-katmenu { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.22) transparent; }
.bw-katmenu::-webkit-scrollbar { width: 9px; }
.bw-katmenu::-webkit-scrollbar-track { background: transparent; }
.bw-katmenu::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.bw-katmenu::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.34); background-clip: content-box; }
.bw-katmenu-row { position: relative; }
.bw-katmenu-row.has-mega:hover > .bw-katmenu-item { background: var(--primary-soft); color: var(--primary-d); }
/* Mega menü "fixed": mutlak konumluyken kayan listenin kaydırma alanına dahil
   oluyordu, bu yüzden son kategorinin altında bir mega menü boyu kadar boşluk
   kalıyordu. Sabit konumlu eleman hiçbir atanın kaydırma alanını büyütmez.
   Gerçek koordinatı magaza_alt.php satır üzerine gelindiğinde hesaplar; betik
   çalışmazsa ekran dışında kalır (yanlış yerde belirmesindense görünmesin). */
.bw-mega {
    position: fixed; top: 0; left: -9999px; width: 460px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--sh-md);
    padding: 16px; z-index: 870; opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .16s, transform .16s, visibility .16s;
}
/* Liste ile mega menü arasındaki 6px boşlukta imleç "hover"ı kaybediyordu; bu
   görünmez köprü satırın üzerinde kalmayı sürdürüyor. */
.bw-mega::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }
.bw-katmenu-row.has-mega:hover > .bw-mega { opacity: 1; visibility: visible; transform: translateX(0); }
.bw-mega-head { font-size: 14px; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--c-line); }
.bw-mega-head i { color: var(--primary); }
.bw-mega-head span { font-weight: 600; color: var(--c-muted); font-size: 12px; }
/* Kategori vitrini — bw-mega-head'in görselli hâli. */
.bw-mega-vitrin {
    display: flex; align-items: center; gap: 12px; padding: 8px; margin: -4px -4px 10px;
    border-radius: 10px; border-bottom: 1px solid var(--c-line); transition: .15s;
}
.bw-mega-vitrin:hover { background: var(--primary-soft); }
.bw-mega-vitrin img {
    width: 54px; height: 54px; flex-shrink: 0; object-fit: contain;
    background: #fff; border: 1px solid var(--c-line-2); border-radius: 9px; padding: 3px;
}
.bw-mega-vitrin .mv-tx { min-width: 0; }
.bw-mega-vitrin b { display: block; font-size: 14px; font-weight: 800; color: var(--c-ink); }
.bw-mega-vitrin small { display: block; font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.bw-mega-markalar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.bw-mega-markalar a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); transition: .13s; }
.bw-mega-markalar a:hover { background: var(--primary-soft); color: var(--primary-d); }
.bw-mega-markalar a .s { font-size: 11px; color: var(--c-muted); background: var(--c-surface); padding: 1px 7px; border-radius: 10px; }
.bw-mega-tumu { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--primary); }
.bw-mega-tumu:hover { gap: 12px; }
/* Dar ekranda mega menü kapalı, kategori listesi kendi içinde kayar. Sınır sadece
   70vh iken viewport uzadığında liste 20+ satırla sayfanın üstüne taşıyordu;
   bu yüzden piksel tavanı da kondu ve menü ekrana sabitlendi. */
@media (max-width: 992px) {
    .bw-mega { display: none; }
    .bw-katmenu {
        position: fixed; top: auto; bottom: 0; bottom: var(--kvkk-h, 0px);
        left: 0; right: 0; width: auto;
        max-height: 420px; max-height: min(70vh, 420px);
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        z-index: 9000; border: none; border-radius: 16px 16px 0 0;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -16px 44px rgba(15, 23, 42, .28);
    }
}

/* Sağ: yatay menü linkleri */
.bw-menu { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.bw-menu::-webkit-scrollbar { display: none; }
.bw-menu-link {
    display: inline-flex; align-items: center; height: 52px; padding: 0 16px;
    color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: .14s;
    border-bottom: 3px solid transparent;
}
.bw-menu-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.bw-menu-link.aktif { background: rgba(255,255,255,.16); border-bottom-color: #fff; color: #fff; }

/* Nav sağ: sipariş takip + destek (bayiweb tarzı) */
.bw-nav-sag { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; padding-left: 6px; }
.bw-nav-link {
    display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 13px;
    color: rgba(255,255,255,.9); font-weight: 700; font-size: 13.5px; white-space: nowrap; transition: .14s;
}
.bw-nav-link i { font-size: 14px; }
.bw-nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.bw-nav-tel { font-size: 14.5px; font-weight: 800; }
/* 2026-08-18 — SEPET BUTONU EKRAN DIŞINA TAŞIYORDU
   Ölçüm (1440px ekran, tarayıcıda): marka 157 + arama 300 (zaten asgari) +
   butonlar 959 + boşluklar 48 = 1464px, oysa .container 1240px. Yani başlık
   kendi kapsayıcısını 224px aşıyordu; tema düğmesi ve SEPET sağdan kesiliyordu.
   Kapsayıcı en geniş ekranda bile 1460px olduğu için bu blok hiçbir masaüstü
   genişliğinde sığmıyor — o yüzden "gizle-mobil" iki buton artık her boyutta
   gizli. İkisi de kayıp değil: "Sipariş Sorgula" mavi menüde "Sipariş Takip",
   "Destek Hattı" hem mavi menüde hem en üst şeritte duruyor.
   GERİ ALMA: aşağıdaki tek satırlık .hdr-btn.gizle-mobil kuralını sil. */
.hdr-btn.gizle-mobil { display: none; }

/* Dar masaüstünde menü sığmazsa: telefon numarası metnini gizle, ikon kalsın (taşma/binme önlenir) */
@media (max-width: 1300px) {
    .magaza-header .container { gap: 14px; }
    .magaza-header-actions { gap: 4px; }
    .hdr-btn { padding: 8px 9px; gap: 7px; }
    .magaza-search { min-width: 260px; max-width: 560px; }
}
@media (max-width: 1150px) {
    .hdr-doviz { display: none; }        /* döviz kutusu — dar ekranda gizle, arama öne çıksın */
    .hdr-btn .tx { display: none; }      /* butonlar ikon-only (Sepet rozeti kalır) */
    .hdr-btn { padding: 9px; }
    .magaza-search { min-width: 240px; }
}
@media (max-width: 1180px) {
    .magaza-catnav .bw-nav-tel .tel-no { display: none; }
    .bw-menu-link { padding: 0 12px; }
    .bw-nav-link { padding: 0 11px; }
}

/* ---------- ANA SAYFA ÜST: kategori listesi + hero ---------- */
.bw-home-top { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; margin-bottom: 30px; }
.bw-home-katlist {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
    box-shadow: var(--sh-xs); overflow: hidden auto; align-self: start; max-height: 420px;
}
.bw-katlist-head {
    display: flex; align-items: center; gap: 9px; padding: 13px 16px; font-weight: 800; font-size: 14px;
    color: #fff; background: var(--primary);
}
.bw-katlist-item {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
    font-size: 13.7px; font-weight: 600; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line-2); transition: .14s;
}
.bw-katlist-item:last-child { border-bottom: none; }
.bw-katlist-item span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.bw-katlist-item span i { width: 18px; flex: 0 0 18px; text-align: center; color: var(--primary); font-size: 13px; }
.bw-katlist-item span .kat-ad { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bw-katlist-item .ok { flex: 0 0 auto; font-size: 11px; color: var(--c-muted); transition: .14s; }
.bw-katlist-item:hover { background: var(--primary-soft); color: var(--primary-d); padding-left: 20px; }
.bw-katlist-item:hover .ok { color: var(--primary); }

/* Hero slider */
.bw-hero { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-xs); height: 420px; background: var(--primary); }
.bw-slides { position: relative; width: 100%; height: 100%; }
.bw-slide {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
    gap: 20px; padding: 46px 54px; opacity: 0; visibility: hidden; transition: opacity .5s; color: #fff;
    background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.bw-slide.aktif { opacity: 1; visibility: visible; }
/* Sol taraftaki yazı için okunabilirlik kaplaması */
.bw-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(8,20,44,0.94) 0%, rgba(8,20,44,0.82) 40%, rgba(8,20,44,0.45) 62%, rgba(8,20,44,0) 84%);
}
/* ?v= parametresi: görseller aynı isimle güncellendi ve sunucu 30 gün cache veriyor.
   Sürüm artırılmazsa eski ziyaretçiler bir ay boyunca eski görseli görür. */
.bw-slide.s1 { background-color: #0a1a36; background-image: url("../img/hero-donanim.jpg?v=2"); }
.bw-slide.s2 { background-color: #0f2b52; background-image: url("../img/hero-kampanya.jpg?v=2"); }
.bw-slide.s3 { background-color: #14375f; background-image: url("../img/hero-kargo.jpg?v=2"); }
.bw-slide-txt { max-width: 56%; z-index: 2; position: relative; }
.bw-slide-kick { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #dbe6ff; margin-bottom: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bw-slide-txt h2 { font-family: var(--font-disp); font-size: 33px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.bw-slide-txt p { font-size: 15px; margin-bottom: 22px; max-width: 420px; line-height: 1.5; color: #eaf0fb; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.bw-slide-btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--primary-d); font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px; transition: .18s; }
.bw-slide:hover .bw-slide-btn { gap: 13px; }
.bw-slide-ico { font-size: 150px; opacity: .16; color: #fff; line-height: 1; margin-right: 10px; }
.bw-hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.25); border: none; color: #fff; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center; font-size: 15px; transition: .16s;
}
.bw-hero-nav:hover { background: rgba(255,255,255,.45); }
.bw-hero-nav.prev { left: 16px; }
.bw-hero-nav.next { right: 16px; }
.bw-hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.bw-hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: .16s; }
.bw-hero-dots button.aktif { background: #fff; width: 26px; border-radius: 5px; }

.shop-layout.no-side { grid-template-columns: 1fr; }

@media (max-width: 900px) {
    .bw-home-top { grid-template-columns: 1fr; }
    .bw-home-katlist { display: none; }
    .bw-katbtn-lbl { min-width: auto; padding-right: 18px; }
    .bw-slide { padding: 32px 30px; }
    .bw-slide-txt { max-width: 100%; }
    .bw-slide-txt h2 { font-size: 25px; }
    .bw-slide-ico { display: none; }
}

/* ---------- MAIN ---------- */
.magaza-main { padding: 26px 0 60px; min-height: 60vh; }
.magaza-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-muted); margin-bottom: 18px; }
.magaza-breadcrumb a:hover { color: var(--primary); }
.magaza-breadcrumb .sep { opacity: .5; }
.magaza-breadcrumb .cur { color: var(--c-ink-2); font-weight: 600; }

/* ---------- SAYFA DÜZENİ (sidebar + grid) ---------- */
.shop-layout { display: grid; grid-template-columns: 258px 1fr; gap: 26px; align-items: start; }

/* Filtre menüsü: 17 gruba kadar çıkabiliyor, sticky olduğu için alt gruplara
   ulaşmanın tek yolu sayfayı sonuna kadar kaydırmaktı. Kendi içinde kaydırılır
   yapıldı — fare tekerleği menü üzerindeyken listeyi gezdirir.
   overscroll-behavior: liste bitince tekerlek arkadaki sayfaya sıçramasın. */
.shop-side {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
    padding: 6px; position: sticky; top: calc(var(--nav-h) + 14px); box-shadow: var(--sh-xs);
    max-height: calc(100vh - var(--nav-h) - 28px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--c-line-2, #cbd5e1) transparent;
}
.shop-side::-webkit-scrollbar { width: 8px; }
.shop-side::-webkit-scrollbar-track { background: transparent; }
.shop-side::-webkit-scrollbar-thumb { background: #d7dee8; border-radius: 8px; border: 2px solid var(--c-surface); }
.shop-side::-webkit-scrollbar-thumb:hover { background: #b9c4d3; }
/* Üstteki "Filtreler / Temizle" satırı kaydırırken sabit kalsın. */
.shop-side .side-ust { position: sticky; top: 0; z-index: 2; background: var(--c-surface); }
.shop-side .side-baslik { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); padding: 14px 14px 8px; }
.side-kat {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--c-ink-2); transition: .15s;
}
.side-kat:hover { background: var(--c-surface-2); color: var(--c-ink); }
.side-kat.aktif { background: var(--primary-soft); color: var(--primary-d); }
.side-kat > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-kat .say { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; background: var(--c-surface-2); color: var(--c-muted); border-radius: 20px; padding: 2px 9px; min-width: 26px; text-align: center; margin-left: 8px; }
.side-kat.aktif .say { background: #fff; color: var(--primary-d); }
.side-ayrac { height: 1px; background: var(--c-line); margin: 8px 10px; }
.side-switch { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; }
.side-switch label { font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); cursor: pointer; }
.switch { position: relative; width: 40px; height: 22px; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: #d0d5dd; border-radius: 20px; transition: .2s; cursor: pointer; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: var(--sh-sm); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(18px); }
.side-yardim { margin: 10px; padding: 16px; border-radius: var(--r-2); background: linear-gradient(135deg, #0b1324, #1e293b); color: #fff; }
.side-yardim .ust { font-size: 12px; color: #93c5fd; font-weight: 600; }
.side-yardim b { display: block; font-size: 16px; font-weight: 800; margin: 4px 0 2px; font-family: var(--font-disp); }
.side-yardim a { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: #fff; color: #0b1324; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9px; transition: .2s; }
.side-yardim a:hover { background: #e2e8f0; }

/* ---------- TOOLBAR ---------- */
.shop-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2);
    padding: 12px 18px; margin-bottom: 18px; box-shadow: var(--sh-xs);
}
.shop-toolbar .baslik { font-size: 18px; font-weight: 800; color: var(--c-ink); font-family: var(--font-disp); }
.shop-toolbar .baslik span { color: var(--c-muted); font-weight: 600; font-size: 13.5px; margin-left: 8px; }
.shop-sort { display: flex; align-items: center; gap: 8px; }
.shop-sort label { font-size: 13px; color: var(--c-muted); font-weight: 600; }
.shop-sort select {
    height: 40px; border: 1.5px solid var(--c-line); border-radius: 10px; background: #fff; padding: 0 34px 0 14px;
    font-size: 13.5px; font-weight: 600; color: var(--c-ink); font-family: inherit; cursor: pointer; outline: none;
    appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.shop-sort select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }

/* Araç çubuğu sağ bloğu: sıralama + sayfa boyutu + görünüm tek satırda,
   dar ekranda kendiliğinden alt satıra sarar. */
.tb-sag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-sayfa-boyut { display: flex; align-items: center; gap: 8px; }
.shop-sayfa-boyut label { font-size: 13px; color: var(--c-muted); font-weight: 600; }
.shop-sayfa-boyut select { height: 40px; border: 1.5px solid var(--c-line); border-radius: 10px; background: #fff; padding: 0 30px 0 12px;
    font-size: 13.5px; font-weight: 600; color: var(--c-ink); font-family: inherit; cursor: pointer; outline: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }
.shop-sayfa-boyut select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }

/* Kart / liste görünüm anahtarı */
.gorunum-secim { display: flex; border: 1.5px solid var(--c-line); border-radius: 10px; overflow: hidden; }
.gs-btn { width: 40px; height: 40px; background: #fff; border: 0; color: var(--c-muted); font-size: 15px; cursor: pointer; transition: .15s; }
.gs-btn + .gs-btn { border-left: 1.5px solid var(--c-line); }
.gs-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.gs-btn.aktif { background: var(--primary); color: #fff; }
@media (max-width: 640px) { .gorunum-secim, .shop-sayfa-boyut { display: none; } }

/* ---------- ÜRÜN GRID ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }

/* ---------- LİSTE GÖRÜNÜMÜ ----------
   Teknik üründe uzun başlık kart içinde 2 satıra kırpılıyor; liste görünümünde
   tam başlık + geniş fiyat alanı görünür, yan yana karşılaştırma kolaylaşır.
   Tercih localStorage'da; sunucuya ek istek yok. */
html.gorunum-liste .shop-grid { grid-template-columns: 1fr; gap: 12px; }
html.gorunum-liste .pcard { flex-direction: row; align-items: stretch; }
html.gorunum-liste .pcard-media { width: 190px; height: auto; min-height: 150px; flex: 0 0 190px; border-bottom: 0; border-right: 1px solid var(--c-line-2); }
html.gorunum-liste .pcard-body {
    display: grid; grid-template-columns: 1fr 210px; column-gap: 22px;
    align-content: start; padding: 16px 18px;
}
html.gorunum-liste .pcard-body > * { grid-column: 1; }
/* Fiyat + sepet bloğu sağda, sola akan içeriğin tüm satırları boyunca ortalanır. */
html.gorunum-liste .pcard-foot { grid-column: 2; grid-row: 1 / 100; align-self: center; flex-direction: column; align-items: stretch; gap: 10px; border: 0; padding: 0; }
html.gorunum-liste .pcard-title { -webkit-line-clamp: 3; min-height: 0; font-size: 15px; }
@media (max-width: 860px) {
    html.gorunum-liste .pcard { flex-direction: column; }
    html.gorunum-liste .pcard-media { width: 100%; flex: none; height: 210px; border-right: 0; border-bottom: 1px solid var(--c-line-2); }
    html.gorunum-liste .pcard-body { display: flex; flex-direction: column; }
}

/* ---- Ürün kartı: B2B katalog stili (bayiweb) ---- */
.pcard {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden; transition: .18s; position: relative;
}
.pcard:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(31,90,166,0.14); }
.pcard-media { display: block; height: 210px; background: #fff; position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line-2); }
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .3s; }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-media .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #cdd5e0; font-size: 3.2rem; }
.pcard-tag {
    position: absolute; bottom: 10px; left: 10px; background: var(--primary-soft);
    color: var(--primary-d); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
    max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard-ribbon {
    position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
}
.pcard-ribbon.stok { background: var(--success-soft); color: var(--success); }
.pcard-ribbon.az { background: var(--warning-soft); color: var(--warning); }
.pcard-ribbon.yok { background: var(--danger-soft); color: var(--danger); }

.pcard-body { padding: 12px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.pcard-title { font-size: 13.5px; font-weight: 600; color: var(--primary-d); line-height: 1.38; margin-bottom: 8px; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: .15s;
    overflow-wrap: break-word; word-break: break-word; }
.pcard-title:hover { color: var(--primary); text-decoration: underline; }
.pcard-stokline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--c-line); }
.pcard-stokline::before { content: "Stok:"; color: var(--c-muted); font-weight: 600; margin-right: 2px; }
.pcard-stokline.var { color: var(--success); }
.pcard-stokline.az { color: var(--warning); }
.pcard-stokline.yok { color: var(--danger); }
.pcard-stokline .dot { display: none; }

/* Teslimat satırı: stok satırının hemen altında, ondan daha sakin bir tonda —
   asıl kararı stok bilgisi verdiriyor, bu satır onu destekliyor. */
.pcard-teslimat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin: -4px 0 10px; }
.pcard-teslimat i { font-size: 11.5px; }
.pcard-teslimat.hizli { color: var(--success); }
.pcard-teslimat.tedarik { color: var(--c-muted); }

/* Servis vaadi satırı. Teslimat satırından farklı olarak DOLGULU rozet: pazaryerinde
   olmayan tek şey bu, katalogda göz ona takılsın diye kasten daha yüksek kontrast. */
.pcard-hizmet { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
                padding: 3px 8px; border-radius: 6px; margin: 0 0 10px; align-self: flex-start; line-height: 1.35; }
.pcard-hizmet i { font-size: 11px; }
.pcard-hizmet.montaj  { background: #e7f6ec; color: #0f7b3d; }
.pcard-hizmet.os      { background: #e8f0fb; color: #1f5aa6; }
.pcard-hizmet.kurulum { background: #fdf0e3; color: #b45309; }

.pcard-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pcard-fiyat { display: flex; flex-direction: column; }
/* "KDV Dahil" ibaresi — Fiyat Etiketi Yönetmeliği gereği tüketiciye gösterilen fiyatın
   tüm vergiler dahil son satış fiyatı olduğu belirtilmek zorundadır. Kart fiyat kutusu
   column flex olduğu için order:3 ile fiyatın ALTINDA gösterilir. */
.pcard-fiyat .lbl { display: block; order: 3; margin-top: 1px; font-size: 10.5px; font-weight: 600; color: var(--c-muted); }
.pcard-fiyat .val { font-size: 21px; font-weight: 800; color: var(--primary-d); letter-spacing: -0.02em; font-family: var(--font-disp); }
.pcard-btn {
    width: 100%; height: 40px; border-radius: 7px; border: none; cursor: pointer;
    background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; transition: .16s;
}
.pcard-btn::after { content: "Sepete Ekle"; }
.pcard-btn:hover { background: var(--primary-d); }
.pcard-btn.ara { background: var(--warning-soft); color: var(--warning); }
.pcard-btn.ara::after { content: "Stok için Ara"; }
.pcard-btn.ara:hover { background: var(--warning); color: #fff; }
.pcard-foot form { width: 100%; }

/* ---------- BUTONLAR ---------- */
.btn-p {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
    background: var(--primary); color: #fff; border: none; padding: 13px 26px; border-radius: 12px;
    font-weight: 700; font-size: 14.5px; font-family: inherit; transition: .18s; box-shadow: 0 4px 12px var(--primary-ring);
}
.btn-p:hover { background: var(--primary-d); box-shadow: 0 6px 18px var(--primary-ring); color: #fff; }
.btn-p.tam { width: 100%; }
.btn-p:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; }
.btn-o {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
    background: #fff; color: var(--c-ink); border: 1.5px solid var(--c-line); padding: 12px 22px; border-radius: 12px;
    font-weight: 600; font-size: 14px; font-family: inherit; transition: .18s;
}
.btn-o:hover { border-color: var(--primary); color: var(--primary-d); background: var(--primary-soft); }
.btn-o.tam { width: 100%; }
.btn-ara {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
    background: var(--warning); color: #fff; border: none; padding: 13px 26px; border-radius: 12px;
    font-weight: 700; font-size: 14.5px; font-family: inherit; transition: .18s;
}
.btn-ara:hover { background: #e07a00; color: #fff; }

/* ---------- ÜRÜN DETAY ---------- */
.pd-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; }
/* 2026-08-18 — SÜTUN DENGESİ. Sol sütun görselden sonra erken bitiyor, sağ sütun
   satın alma bloklarıyla çok daha uzun sürüyordu (1440px'te 942px ölü alan).
   .pd-yan-ek grid'in 3. öğesi: geniş ekranda 2. satırın SOL hücresine, yani
   görselin altına oturur; sağ sütun iki satır boyunca uzar. Dar ekranda
   (≤1024px, tek sütun) doğal akışta EN SONA düşer — fiyat ve "Sepete Ekle"
   aşağı itilmez. GERİ ALMA: bu bloğu ve urun.php'deki .pd-yan-ek sarmalayıcısını sil. */
/* auto-fit: sütun dar olduğunda (≤1440px, ~590px) alt alta; çok geniş ekranda
   (≥1700px, ~760px) yan yana geçer ve sol sütun ~250px kısalır. Eşik ekran
   genişliğine değil, sütunun gerçek genişliğine bağlı — ara boylarda da doğru. */
.pd-yan-ek { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; min-width: 0; }
@media (min-width: 1025px) {
    .pd-media-wrap { grid-column: 1; grid-row: 1; }
    .pd-info       { grid-column: 2; grid-row: 1 / span 2; }
    .pd-yan-ek     { grid-column: 1; grid-row: 2; }
}
.pd-media {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
    min-height: 440px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--sh-xs);
}
.pd-media img { width: 100%; height: 100%; object-fit: contain; padding: 34px; }
.pd-media .ph { font-size: 7rem; color: #cdd5e0; }
.pd-info h1 { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 6px 0 12px; }
.pd-kat { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-d); background: var(--primary-soft); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; }
.pd-kod { color: var(--c-muted); font-size: 12.5px; margin-left: 10px; }
/* Ürün no: müşteri telefonda ürünü tarif edemiyor, numarayla arıyor.
   Başlığın hemen altında, gözden kaçmayacak kadar belirgin durmalı. */
.pd-urunno { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 7px 8px 7px 12px; border: 1px solid var(--border, #e3e8ef); border-radius: 10px; background: var(--primary-soft); }
.pd-urunno .uno-et { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--c-muted); }
.pd-urunno b { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--primary-d); font-variant-numeric: tabular-nums; }
.uno-kopya { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #e3e8ef); background: #fff; color: var(--c-muted); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: color .2s, border-color .2s; }
.uno-kopya:hover { color: var(--primary-d); border-color: var(--primary); }
.pd-fiyat-kutu { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.pd-fiyat { font-size: 34px; font-weight: 800; color: var(--price); letter-spacing: -0.03em; font-family: var(--font-disp); }
.pd-kdv { color: var(--c-muted); font-size: 12.5px; }
/* Fiyat Etiketi Yönetmeliği m.13 — indirimden önceki 30 günün en düşük fiyatı. */
.pd-en-dusuk { display: flex; align-items: center; gap: 7px; margin: -8px 0 18px; color: var(--c-muted); font-size: 12.5px; }
.pd-en-dusuk b { color: var(--c-ink, inherit); font-weight: 700; }
.pd-stok-box { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-2); font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.pd-stok-box.var { background: var(--success-soft); color: var(--success); }
.pd-stok-box.yok { background: var(--danger-soft); color: var(--danger); }
.pd-stok-box b { font-weight: 800; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--c-line); border-radius: 12px; overflow: hidden; background: #fff; }
.qty button { width: 44px; height: 52px; border: none; background: #fff; color: var(--c-ink); font-size: 18px; cursor: pointer; transition: .15s; }
.qty button:hover { background: var(--c-surface-2); color: var(--primary); }
.qty input { width: 56px; height: 52px; text-align: center; border: none; border-left: 1.5px solid var(--c-line); border-right: 1.5px solid var(--c-line); font-size: 16px; font-weight: 700; color: var(--c-ink); outline: none; font-family: inherit; }

.pd-guven { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.pd-guven .g { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); }
.pd-guven .g .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-d); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pd-guven .g b { font-size: 13px; color: var(--c-ink); display: block; }
.pd-guven .g small { font-size: 11.5px; color: var(--c-muted); }
/* İade rozeti politika sayfasına link — görünüm diğer rozetlerle aynı kalsın */
.pd-guven a.g { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.pd-guven a.g:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }


/* Stok gelince haber ver */
.pd-haberver { margin-top: 14px; padding: 16px; background: var(--primary-soft); border: 1px solid var(--c-line); border-radius: var(--r-2); }
.pd-haberver-head { font-size: 14px; font-weight: 800; color: var(--primary-d); display: flex; align-items: center; gap: 8px; }
.pd-haberver p { font-size: 12.5px; color: var(--c-ink-2); margin: 6px 0 12px; }
.pd-haberver-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-haberver-form input[type=email] { flex: 1; min-width: 180px; height: 46px; padding: 0 14px; border: 1.5px solid var(--c-line); border-radius: 12px; font-size: 14px; font-family: inherit; outline: none; }
.pd-haberver-form input[type=email]:focus { border-color: var(--primary); }
.pd-haberver-msg { font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pd-haberver-msg.ok { background: var(--success-soft); color: var(--success); }
.pd-haberver-msg.err { background: var(--danger-soft); color: var(--danger); }

.pd-ozellik { margin-top: 26px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.pd-ozellik .ph { padding: 14px 18px; border-bottom: 1px solid var(--c-line); font-weight: 700; font-size: 14px; color: var(--c-ink); font-family: var(--font-disp); }
.pd-ozellik .satir { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 13.5px; border-bottom: 1px solid var(--c-line-2); }
.pd-ozellik .satir:last-child { border-bottom: none; }
.pd-ozellik .satir span:first-child { color: var(--c-muted); }
.pd-ozellik .satir span:last-child { color: var(--c-ink); font-weight: 600; }

/* ---------- ÜRÜN DETAY (AÇIKLAMA + TEKNİK ÖZELLİKLER) ---------- */
.pd-detay-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 2px solid var(--c-line); }
.pd-tab {
    background: none; border: none; padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--c-muted);
    cursor: pointer; font-family: var(--font-disp); display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 3px solid transparent; margin-bottom: -2px; transition: .15s;
}
.pd-tab:hover { color: var(--c-ink); }
.pd-tab.aktif { color: var(--primary-d); border-bottom-color: var(--primary-d); }
.pd-detay-icerik { display: none; }
.pd-detay-icerik.aktif { display: block; animation: pdFade .25s ease; }
@keyframes pdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pd-aciklama-metin { font-size: 14.5px; line-height: 1.75; color: var(--c-ink); white-space: normal; word-break: break-word; }

/* 2026-08-18 — UZUN AÇIKLAMA KISALTMA (urun.php'deki .pd-uzun işareti ile çalışır)
   Neden: bazı üreticiler 4000px'i aşan tanıtım metni gönderiyor, sayfa kolon gibi
   uzuyor ve ziyaretçi yorumlara ulaşamıyor. Kırpma, arka plan rengine boyanmış bir
   perde yerine mask-image ile yapılıyor: içeriğin kendisi şeffaflaşır, bu yüzden
   açık/koyu modda ve hangi arka plan olursa olsun dikiş izi çıkmaz. mask-image
   desteklenmezse içerik düz kesilir, düzen yine bozulmaz.
   GERİ ALMA: bu yorumdan ".pd-teknik-tablo" satırına kadarki .pd-uzun / .pd-kisalt /
   .pd-devam-* kurallarını sil, ayrıca urun.php'de $ack_uzun'u false yap. */
.pd-uzun .pd-kisalt {
    max-height: 520px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
}
/* Üreticinin ilk görseli çoğu üründe galeridekinin aynısı ve 400px+ geliyor;
   kırpılmış önizlemeyi tek başına dolduruyordu. Önizlemede boy sınırlı, açınca
   görsel tam boyuna döner. */
.pd-uzun .pd-kisalt img { max-height: 200px; width: auto; margin: 12px auto; }
.pd-devam-kutu { position: absolute; width: 0; height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pd-devam-kutu:checked ~ .pd-kisalt { max-height: none; -webkit-mask-image: none; mask-image: none; }
.pd-devam-kutu:checked ~ .pd-kisalt img { max-height: none; margin: 16px auto; }
.pd-devam-btn {
    display: flex; width: fit-content; margin: 18px auto 0; align-items: center; gap: 9px;
    padding: 11px 22px; border: 1.5px solid var(--c-line); border-radius: 11px;
    background: var(--c-surface); color: var(--primary-d); font-weight: 700; font-size: 14px;
    cursor: pointer; user-select: none; transition: .16s;
}
.pd-devam-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.pd-devam-btn i { font-size: 12px; transition: transform .2s; }
.pd-devam-btn .kapa { display: none; }
.pd-devam-kutu:checked ~ .pd-devam-btn .ac { display: none; }
.pd-devam-kutu:checked ~ .pd-devam-btn .kapa { display: inline; }
.pd-devam-kutu:checked ~ .pd-devam-btn i { transform: rotate(180deg); }
.pd-devam-kutu:focus-visible ~ .pd-devam-btn { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
@media (max-width: 640px) { .pd-uzun .pd-kisalt { max-height: 340px; } }

/* Zengin (HTML) açıklama — bayiweb'in başlık/liste/görsel yapısı korunur */
.pd-aciklama-html { font-size: 14.5px; line-height: 1.7; color: var(--c-ink); max-width: 900px; margin: 0 auto; }
.pd-aciklama-html h2, .pd-aciklama-html h3, .pd-aciklama-html h4, .pd-aciklama-html h5, .pd-aciklama-html h6 {
    font-family: var(--font-disp); color: var(--c-ink); font-weight: 800; line-height: 1.3;
    margin: 26px 0 12px; letter-spacing: -.01em;
}
.pd-aciklama-html h2 { font-size: 22px; } .pd-aciklama-html h3 { font-size: 18px; }
.pd-aciklama-html h4 { font-size: 16px; } .pd-aciklama-html h5, .pd-aciklama-html h6 { font-size: 14.5px; }
.pd-aciklama-html h2:first-child, .pd-aciklama-html h3:first-child, .pd-aciklama-html div:first-child > h3:first-child { margin-top: 0; }
.pd-aciklama-html p { margin: 0 0 14px; }
.pd-aciklama-html strong, .pd-aciklama-html b { color: var(--c-ink); font-weight: 700; }
.pd-aciklama-html img {
    max-width: 100%; height: auto; display: block; margin: 16px auto; border-radius: var(--r-2);
    box-shadow: var(--sh-xs); background: var(--c-surface-2);
}
.pd-aciklama-html ul, .pd-aciklama-html ol { margin: 0 0 16px; padding-left: 20px; }
.pd-aciklama-html li { margin: 0 0 8px; padding-left: 4px; position: relative; }
.pd-aciklama-html ul { list-style: none; padding-left: 4px; }
.pd-aciklama-html ul > li { padding-left: 26px; }
.pd-aciklama-html ul > li::before {
    content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--primary-d);
    position: absolute; left: 0; top: 1px; font-size: 13px;
}
.pd-aciklama-html a { color: var(--primary-d); text-decoration: underline; }
.pd-aciklama-html table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; }
.pd-aciklama-html td, .pd-aciklama-html th { border: 1px solid var(--c-line-2); padding: 9px 12px; text-align: left; }
.pd-aciklama-html tr:nth-child(even) { background: var(--c-surface-2); }
.pd-aciklama-html > div { margin-bottom: 8px; }
.pd-teknik-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-teknik-tablo tr { border-bottom: 1px solid var(--c-line-2); }
.pd-teknik-tablo tr:nth-child(even) { background: var(--c-surface-2); }
.pd-teknik-tablo th {
    text-align: left; padding: 11px 16px; width: 40%; color: var(--c-muted); font-weight: 600;
    vertical-align: top; border-right: 1px solid var(--c-line-2);
}
.pd-teknik-tablo td { padding: 11px 16px; color: var(--c-ink); font-weight: 600; vertical-align: top; }
@media (max-width: 560px) { .pd-teknik-tablo th { width: 45%; } .pd-tab { padding: 10px 12px; font-size: 13px; } }

/* ---------- SEPET ---------- */
.cart-wrap { display: grid; grid-template-columns: 1fr 350px; gap: 26px; align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-row {
    display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 14px; box-shadow: var(--sh-xs);
}
.cart-row-media { width: 96px; height: 96px; border-radius: var(--r-2); overflow: hidden; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; }
.cart-row-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-row-media .ph { font-size: 1.8rem; color: #cdd5e0; }
.cart-row-info .kat { color: var(--primary-d); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cart-row-info h5 { font-size: 15px; font-weight: 700; margin: 3px 0 4px; color: var(--c-ink); }
.cart-row-info .birim { color: var(--c-muted); font-size: 13px; }
.cart-row-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-row-tutar { font-size: 18px; font-weight: 800; color: var(--price); font-family: var(--font-disp); }
.cart-sil { background: none; border: none; color: var(--c-muted); font-size: 12.5px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: .15s; }
.cart-sil:hover { color: var(--danger); }
.qty.mini { border-radius: 10px; }
.qty.mini button { width: 34px; height: 36px; font-size: 15px; }
.qty.mini input { width: 42px; height: 36px; font-size: 14px; }

.cart-ozet { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 22px; position: sticky; top: calc(var(--nav-h) + 14px); box-shadow: var(--sh-sm); }
.cart-ozet h4 { font-size: 16px; font-weight: 800; margin: 0 0 18px; }
.ozet-satir { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; color: var(--c-ink-2); }
.ozet-satir .yesil { color: var(--success); font-weight: 700; }
.ozet-toplam { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px dashed var(--c-line); margin-top: 12px; padding-top: 16px; }
.ozet-toplam .e { font-size: 15px; font-weight: 700; }
.ozet-toplam .d { font-size: 26px; font-weight: 800; color: var(--price); font-family: var(--font-disp); }
.ozet-guven { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ozet-guven span { font-size: 12px; color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.ozet-guven i { color: var(--success); }
.ozet-satir .amber { color: #b45309; font-weight: 700; }
.kargo-not { font-size: 12px; color: var(--c-muted); margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; }
.kargo-not i { color: #b45309; }
.kargo-tesvik { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid #fcd9a5; }
.kargo-tesvik.ulasti { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #a7f3d0; }
.kargo-tesvik .kt-ust { font-size: 13.5px; font-weight: 700; color: #92400e; display: flex; align-items: center; gap: 8px; }
.kargo-tesvik.ulasti .kt-ust { color: #047857; }
.kargo-tesvik .kt-ust b { font-weight: 800; }
.kargo-tesvik .kt-bar { height: 8px; border-radius: 99px; background: #fde4c0; overflow: hidden; margin: 9px 0 6px; }
.kargo-tesvik.ulasti .kt-bar { background: #b6f0d3; }
.kargo-tesvik .kt-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #ea580c); transition: width .4s ease; }
.kargo-tesvik.ulasti .kt-bar span { background: linear-gradient(90deg, #10b981, #059669); }
.kargo-tesvik .kt-alt { font-size: 11.5px; color: #a16207; }

/* ---------- CHECKOUT ---------- */
.co-wrap { display: grid; grid-template-columns: 1fr 370px; gap: 26px; align-items: start; }
.co-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 24px; margin-bottom: 18px; box-shadow: var(--sh-xs); }
.co-box h4 { font-size: 16px; font-weight: 800; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.co-box h4 .num { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.fg { margin-bottom: 15px; }
.fg label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 7px; }
.fg input, .fg textarea, .fg select {
    width: 100%; padding: 12px 14px; background: #fff; border: 1.5px solid var(--c-line); border-radius: 11px;
    color: var(--c-ink); font-size: 14.5px; font-family: inherit; outline: none; transition: .16s;
}
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--c-muted); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Fatura bilgileri (2026-08-14) — bireysel/kurumsal seçimi. Blok silinirse
   alanlar üst üste düz form olarak görünür, sayfa bozulmaz. */
.fatura-tip { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fatura-tip .check-opt { align-items: center; gap: 8px; padding: 11px 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-2); transition: .16s; font-weight: 600; }
.fatura-tip .check-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.fatura-tip .check-opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; flex-shrink: 0; }
.fatura-tip .check-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.fatura-alan .fg:last-child { margin-bottom: 0; }
.fg-not { display: block; margin-top: 6px; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.pay-list { display: flex; flex-direction: column; gap: 12px; }
.pay-opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-2); cursor: pointer; transition: .16s; }
.pay-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.pay-opt input { width: 20px; height: 20px; accent-color: var(--primary); }
.pay-opt .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--c-ink-2); }
.pay-opt .baslik { font-weight: 700; color: var(--c-ink); font-size: 14.5px; }
.pay-opt .aciklama { color: var(--c-muted); font-size: 12.5px; }
.co-not { background: var(--warning-soft); border: 1px solid #fde9c8; color: #b54708; padding: 13px 16px; border-radius: 11px; font-size: 13px; margin-top: 14px; }
.co-mini { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13.5px; }
.co-mini:last-of-type { border-bottom: none; }
.co-mini .ad { flex: 1; color: var(--c-ink); }
.co-mini .adet { color: var(--c-muted); font-weight: 600; }
.co-mini .tutar { font-weight: 700; color: var(--c-ink); }
.hata-box { background: var(--danger-soft); border: 1px solid #fecdca; color: #b42318; padding: 14px 18px; border-radius: 12px; font-size: 14px; margin-bottom: 20px; font-weight: 500; }

/* ---------- SİPARİŞ TAMAM ---------- */
.done { max-width: 620px; margin: 20px auto; text-align: center; }
.done .ikon { width: 92px; height: 92px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; margin: 0 auto 22px; }
.done h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.done .no-kutu { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 22px; margin: 24px 0; font-size: 14px; color: var(--c-muted); box-shadow: var(--sh-xs); }
.done .no-kutu strong { display: block; font-size: 22px; color: var(--primary-d); margin-top: 6px; letter-spacing: 1px; font-family: var(--font-disp); }

/* ---------- BOŞ DURUM ---------- */
.bos-durum { text-align: center; padding: 70px 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); }
.bos-durum .ic { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #cdd5e0; }
.bos-durum h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.bos-durum p { color: var(--c-muted); margin-bottom: 20px; }
/* Boş sonuç çıkış yolları: yazım önerisi, aksiyon butonları, popüler kategoriler.
   Müşteri "ürün yok" ekranında yalnız bırakılmasın. */
.bos-oneri { margin-bottom: 18px !important; font-size: 14.5px; }
.bos-oneri a { color: var(--primary); font-weight: 700; text-decoration: underline; }
.bos-aksiyon { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* "Bunu mu demek istediniz?" ürün önerileri. Boş sonuç ekranının en değerli
   parçası olduğu için aksiyon butonlarının ÜSTÜNDE, sola hizalı kartlar hâlinde. */
.bos-urunler { margin: 4px 0 26px; text-align: left; }
.bos-urunler .bu-bas { display: block; text-align: center; font-size: 15px; font-weight: 800; color: var(--c-ink); margin-bottom: 4px; }
.bos-urunler .bu-alt { text-align: center; font-size: 13px; color: var(--c-muted); margin-bottom: 16px !important; }
.bos-urunler .bu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bos-urunler .bu-kart {
    display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px;
    background: var(--c-surface-2); border: 1px solid var(--c-line); transition: .15s;
}
.bos-urunler .bu-kart:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); }
.bos-urunler .bu-gorsel {
    flex: 0 0 62px; width: 62px; height: 62px; border-radius: 9px; background: #fff;
    border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: #cdd5e0; font-size: 1.4rem;
}
.bos-urunler .bu-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.bos-urunler .bu-bilgi { display: block; min-width: 0; }
.bos-urunler .bu-ad {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.8px; font-weight: 600; line-height: 1.35; color: var(--c-ink); margin-bottom: 4px;
}
.bos-urunler .bu-fiyat { font-size: 14px; font-weight: 800; color: var(--primary-d); }
.bos-urunler .bu-stok { font-size: 11.5px; font-weight: 600; color: var(--c-muted); margin-left: 6px; }
.bos-kategoriler { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.bos-kategoriler .bk-bas { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.bos-kategoriler .bk-liste { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.bos-kategoriler .bk-liste a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 20px;
    background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: 13px; font-weight: 600;
    color: var(--c-ink); transition: .15s;
}
.bos-kategoriler .bk-liste a:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.bos-kategoriler .bk-liste b { font-size: 11.5px; font-weight: 700; color: var(--c-muted); }
.bos-kategoriler .bk-liste a:hover b { color: var(--primary-d); }

/* ---------- FOOTER ----------
   Metin rengi #94a3b8 idi; #0b1324 zemininde kontrast ~4.2:1, yani küçük punto
   için WCAG AA sınırının altında kalıyordu. #b8c4d6 ile ~10:1'e çıkıyor. */
.magaza-footer { background: #0b1324; color: #b8c4d6; padding: 52px 0 26px; margin-top: 50px; }
.magaza-footer .container > .row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.mf-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.mf-brand .lm { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dd)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.mf-brand b { font-family: var(--font-disp); font-size: 18px; color: #fff; font-weight: 800; }
.magaza-footer p { color: #b8c4d6; font-size: 13.5px; line-height: 1.7; }
.magaza-footer h6 { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.magaza-footer a { display: flex; align-items: center; gap: 9px; color: #b8c4d6; font-size: 13.5px; padding: 6px 0; transition: .16s; }
.magaza-footer a:hover { color: #fff; }
.magaza-footer .mf-ico { color: #60a5fa; width: 16px; }
.mf-trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mf-trust .t { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 9px; font-size: 12px; color: #cbd5e1; font-weight: 600; }
.mf-trust .t i { color: var(--success); }
.mf-trust a.t:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff; }
.mf-kunye { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 32px; padding-top: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mf-kunye .mfk-bilgi { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; color: #b8c4d6; line-height: 1.7; }
.mf-kunye .mfk-bilgi b { color: #cbd5e1; font-weight: 700; }
.mf-kunye .mfk-etbis img { max-height: 54px; width: auto; display: block; }
.mf-kunye .mfk-etbis a { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
    color: #cbd5e1; text-decoration: none; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
    padding: 8px 14px; white-space: nowrap; transition: border-color .15s, color .15s; }
.mf-kunye .mfk-etbis a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.mf-kunye .mfk-etbis a i { color: var(--success); }
.mf-alt { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 20px; padding-top: 20px; text-align: center; color: #64748b; font-size: 12.5px; }

/* ---------- KATEGORİ KAROLARI (üst showcase) ---------- */
.kat-tiles-wrap { margin-bottom: 26px; }
.kat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    text-align: center; padding: 18px 12px; background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 14px; transition: .18s; min-height: 118px;
}
.kat-tile:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(31,90,166,.14); transform: translateY(-3px); }
.kat-tile .kt-ic {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); color: var(--primary); font-size: 20px;
}
.kat-tile.tumu .kt-ic { background: var(--primary); color: #fff; }
.kat-tile .kt-ad { font-size: 13.5px; font-weight: 700; color: var(--c-ink); line-height: 1.25; }
.kat-tile .kt-say { font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
@media (max-width: 640px) {
    .kat-tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; }
    .kat-tile { padding: 14px 8px; min-height: 96px; }
    .kat-tile .kt-ic { width: 40px; height: 40px; font-size: 17px; }
    .kat-tile .kt-ad { font-size: 12px; }
}

/* ---------- SECTION BLOCKS ---------- */
.section-block { margin-top: 48px; }
.section-title { font-size: 20px; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.section-title i { color: var(--primary); font-size: 18px; }

/* Kategori/marka liste sayfasının H1 bloğu. Vitrin dışındaki sayfalarda
   breadcrumb'ın hemen altında durduğu için üst boşluk kısaltıldı. */
.liste-bas { margin-top: 18px; }
.liste-bas .section-title { margin-bottom: 8px; }
.liste-ozet {
    font-size: 13.5px; line-height: 1.7; color: var(--c-ink-2);
    max-width: 900px; margin: 0 0 4px;
}
.liste-ozet strong { color: var(--c-ink); font-weight: 700; }

/* ---------- SAYFALAMA ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.pg-btn {
    min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c-ink-2);
    background: var(--c-surface); border: 1px solid var(--c-line); transition: .18s; padding: 0 6px;
}
.pg-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pg-btn.aktif { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px var(--primary-ring); pointer-events: none; }
.pg-dots { color: var(--c-muted); font-size: 14px; padding: 0 4px; }
.pg-info { font-size: 12.5px; color: var(--c-muted); margin-left: 10px; }

/* ---------- MOBİL FİLTRE BUTONU ---------- */
.mobil-filtre-btn {
    display: none; width: 100%; padding: 12px 16px; border-radius: 12px;
    background: var(--c-surface); border: 1.5px solid var(--c-line); color: var(--c-ink);
    font-size: 14px; font-weight: 700; cursor: pointer; transition: .16s;
    font-family: inherit; margin-bottom: 12px; order: -1;
}
.mobil-filtre-btn i { margin-right: 8px; color: var(--primary); }
.mobil-filtre-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.mobil-filtre-btn.aktif { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float {
    position: fixed; bottom: 28px; right: 28px; z-index: 999;
    width: 60px; height: 60px; border-radius: 50%;
    background: #25d366; color: #fff; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4); transition: .22s;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,0.5); color: #fff; }
.wa-pulse {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid #25d366; animation: waPulse 2s ease-out infinite; opacity: 0;
}
@keyframes waPulse {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- BACK TO TOP ---------- */
.btt {
    position: fixed; bottom: 100px; right: 30px; z-index: 998;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--sh-md);
    color: var(--c-ink-2); font-size: 16px; cursor: pointer; transition: .2s;
    display: flex; align-items: center; justify-content: center;
}
.btt:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- TOAST BİLDİRİM ---------- */
.toast-box { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast-item {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 13px;
    background: #fff; color: var(--c-ink); box-shadow: 0 10px 40px rgba(16,24,40,0.18);
    font-size: 14px; font-weight: 600; pointer-events: auto;
    transform: translateX(120%); transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s; opacity: 0;
    border-left: 4px solid var(--success);
}
.toast-item.error { border-left-color: var(--danger); }
.toast-item.show { transform: translateX(0); opacity: 1; }
.toast-item i { font-size: 18px; }
.toast-item.success i { color: var(--success); }
.toast-item.error i { color: var(--danger); }
.toast-item a { color: var(--primary); font-weight: 700; margin-left: auto; white-space: nowrap; font-size: 13px; }
.toast-item a:hover { text-decoration: underline; }

/* ---------- KVKK COOKIE CONSENT ---------- */
.kvkk-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: #0b1324; color: #cbd5e1; padding: 16px 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.2); font-size: 13px;
}
.kvkk-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kvkk-in p { flex: 1; margin: 0; min-width: 280px; line-height: 1.6; }
.kvkk-in p i { color: var(--warning); margin-right: 6px; }
.kvkk-in p a { color: #93c5fd; text-decoration: underline; }
.kvkk-btn {
    background: var(--primary); color: #fff; border: none; padding: 10px 24px; border-radius: 10px;
    font-weight: 700; font-size: 13.5px; cursor: pointer; transition: .18s; white-space: nowrap;
}
.kvkk-btn:hover { background: var(--primary-d); }
.kvkk-btnlar { display: flex; gap: 9px; flex-shrink: 0; }
.kvkk-btn.red { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #cbd5e1; }
.kvkk-btn.red:hover { background: rgba(255,255,255,0.08); color: #fff; }
@media (max-width: 560px) { .kvkk-btnlar { width: 100%; } .kvkk-btnlar .kvkk-btn { flex: 1; padding: 11px 12px; } }

/* ---------- LIGHTBOX (Ürün Detay Resim Zoom) ---------- */
.pd-media { cursor: pointer; position: relative; }
.pd-zoom-hint {
    position: absolute; bottom: 14px; right: 14px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 11.5px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px; opacity: 0; transition: .2s; pointer-events: none;
}
.pd-media:hover .pd-zoom-hint { opacity: 1; }
/* İmleçle yakınlaştırma — "büyüteç" yöntemi.
   Görselin kendisini scale() ile büyütmek kadrajı bozuyordu: müşteri neye
   baktığını kaybediyordu. Onun yerine görselin üzerinde imleci takip eden bir
   seçim karesi (lens) ve HEMEN YANINDA o bölgeyi gösteren ayrı bir pencere
   var; böylece ürünün tamamı görünür kalırken detay ayrı yerde büyüyor. */
.pd-media-wrap { position: relative; }
.pd-lens {
    position: absolute; z-index: 3; pointer-events: none; display: none;
    border: 2px solid var(--primary); background: rgba(37,99,235,0.12);
    border-radius: 6px; box-shadow: 0 0 0 9999px rgba(15,23,42,0.10);
}
.pd-zoom-panel {
    position: absolute; z-index: 60; display: none;
    left: calc(100% + 18px); top: 0; width: 420px; height: 420px;
    background: #fff no-repeat; background-size: 200%;
    border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--sh-lg);
}
.pd-media.zoomlu .pd-lens,
.pd-media.zoomlu ~ .pd-zoom-panel { display: block; }
.pd-media.zoomlu { cursor: crosshair; }
/* Sağda yer kalmayan dar ekranlarda pencere görselin üstüne kayar; yoksa
   sayfanın dışına taşıp yatay kaydırma oluşturuyordu. */
@media (max-width: 1200px) {
    .pd-zoom-panel { left: auto; right: 0; width: 340px; height: 340px; }
}
@media (max-width: 900px) {
    .pd-lens, .pd-zoom-panel { display: none !important; }
}
/* Galeri okları ve sayaç yalnızca alanın üzerindeyken belirir. */
.pd-gal-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line);
    background: rgba(255,255,255,0.92); color: var(--c-ink); font-size: 15px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; transition: .18s; box-shadow: var(--sh-sm);
}
.pd-gal-ok.prev { left: 12px; }
.pd-gal-ok.next { right: 12px; }
.pd-media:hover .pd-gal-ok { opacity: 1; }
.pd-gal-ok:hover { background: #fff; color: var(--primary); }
.pd-gal-sayac {
    position: absolute; bottom: 14px; left: 14px; z-index: 2;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 4px 10px; border-radius: 8px; pointer-events: none;
}
/* Dokunmatikte hover yok; oklar sürekli görünür, zoom ipucu gizlenir. */
@media (hover: none) {
    .pd-gal-ok { opacity: 1; }
    .pd-zoom-hint { display: none; }
}
.lightbox {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s; cursor: zoom-out;
}
.lightbox.aktif { opacity: 1; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); object-fit: contain; }
.lb-close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15);
    color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .2s;
}
.lb-close:hover { background: rgba(255,255,255,0.3); }
.lb-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.15);
    color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .2s;
}
.lb-ok.prev { left: 24px; }
.lb-ok.next { right: 24px; }
.lb-ok:hover { background: rgba(255,255,255,0.32); }
.lb-sayac {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.15); color: #fff; font-size: 13px; font-weight: 700;
    padding: 6px 14px; border-radius: 20px; pointer-events: none;
}
@media (max-width: 560px) { .lb-ok { width: 40px; height: 40px; font-size: 16px; } .lb-ok.prev { left: 8px; } .lb-ok.next { right: 8px; } }

/* ---------- FOOTER ÖDEME İKONLARI ---------- */
.mf-pay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.mf-pay .mfp-t { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 34px; padding: 0 10px; background: #fff; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.28); font-size: 24px; color: #475569; transition: .2s; }
.mf-pay .mfp-t:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0,0,0,.34); }
.mf-pay .mfp-t.visa { color: #1a1f71; }
.mf-pay .mfp-t.mc   { color: #eb001b; }
.mf-pay .mfp-t.iyz  { padding: 0 12px; }
.mf-pay .mfp-t.iyz img { display: block; height: 20px; width: auto; }
.mf-pay .mfp-t.iyz-txt { font-size: 15px; font-weight: 800; color: #1e64ff; letter-spacing: -.2px; }
.mf-pay .mfp-t.iyz-txt b { font-weight: 600; color: #475569; margin-left: 4px; }
/* 2026-08-12: iyzico resmî logo bandı (429x32) — beyaz kutu içinde, oranı bozulmadan.
   GERİ ALMA: bu üç satırı silmek yeterli. */
.mf-pay .mfp-t.iyz-band { padding: 0 14px; height: 38px; }
.mf-pay .mfp-t.iyz-band img { display: block; height: 22px; width: auto; max-width: 100%; }
/* 2026-08-18 — footer ödeme notu #64748b idi, #08080a zeminde kontrast 4.1 (sınırda,
   gri okunmuyordu). Bir kademe açıldı: 7.8 kontrast. */
.mf-pay-not { text-align: center; font-size: 12px; color: #94a3b8; margin-top: 12px; line-height: 1.6; }
.mf-pay-not b { color: #cbd5e1; }
@media (max-width: 480px) { .mf-pay { gap: 8px; } .mf-pay .mfp-t { min-width: 46px; height: 30px; font-size: 20px; } .mf-pay .mfp-t.iyz-band { height: 34px; padding: 0 10px; } .mf-pay .mfp-t.iyz-band img { height: 18px; } }

/* ---------- FADE-IN ANİMASYON ---------- */
.pcard, .cart-row, .co-box { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.pcard.gorunur, .cart-row.gorunur, .co-box.gorunur { opacity: 1; transform: translateY(0); }

/* ---------- AUTOCOMPLETE DROPDOWN ---------- */
.ac-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 950;
    background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
    box-shadow: var(--sh-lg); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.ac-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--c-line-2); transition: .12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--primary-soft); }
/* Görsel kutusu sabit ölçüde: satırlar farklı en-boy oranlı fotoğraflarda
   birbirine göre kaymasın, liste taranabilir kalsın. */
.ac-img {
    width: 46px; height: 46px; flex-shrink: 0; object-fit: contain;
    background: #fff; border: 1px solid var(--c-line-2); border-radius: 8px; padding: 3px;
}
.ac-img-ph { display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 18px; }
.ac-bilgi { min-width: 0; flex: 1; }
.ac-ad { display: block; font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.ac-alt { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 4px; }
.ac-kat { color: var(--primary-d); font-weight: 600; }
.ac-fiyat { font-weight: 800; color: var(--price); margin-left: auto; }

/* Son aramalar — arama kutusu boşken aynı açılır panelde gösterilir. */
.ac-gecmis-bas {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px 8px; font-size: 11.5px; font-weight: 700; color: var(--c-muted);
    border-bottom: 1px solid var(--c-line-2);
}
.ac-gecmis-bas span { display: inline-flex; align-items: center; gap: 7px; }
.ac-gecmis-temizle { border: 0; background: none; color: var(--primary); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.ac-gecmis-temizle:hover { text-decoration: underline; }
.ac-gecmis-satir { display: flex; align-items: center; transition: .12s; }
.ac-gecmis-satir:hover { background: var(--primary-soft); }
.ac-gecmis-satir a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--c-ink); min-width: 0; }
.ac-gecmis-satir a i { color: var(--c-muted); font-size: 12px; }
.ac-gecmis-sil { border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: 10px 14px; font-size: 13px; }
.ac-gecmis-sil:hover { color: var(--danger); }

/* ---------- FAVORİ BUTONU ---------- */
.fav-btn {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
    color: #98a2b3; font-size: 14px; cursor: pointer; transition: .2s;
    display: flex; align-items: center; justify-content: center;
}
.fav-btn:hover { color: var(--danger); transform: scale(1.15); }
.fav-btn.aktif { color: var(--danger); background: var(--danger-soft); }
/* Ürün detay sayfasında favori */
.pd-actions .fav-btn { position: static; width: auto; height: auto; padding: 12px 22px; border-radius: 12px; background: #fff; border: 1.5px solid var(--c-line); gap: 8px; color: var(--c-ink-2); }
.pd-actions .fav-btn.aktif { border-color: var(--danger); background: var(--danger-soft); }
.pd-actions .fav-btn span { font-size: 14px; font-weight: 600; }

/* ---------- FAVORİ MODAL ---------- */
.fav-modal {
    position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
}
.fav-modal-in {
    background: #fff; border-radius: 18px; width: 100%; max-width: 480px; max-height: 80vh;
    box-shadow: var(--sh-lg); overflow: hidden; display: flex; flex-direction: column;
}
.fav-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--c-line); }
.fav-modal-head h3 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; }
.fav-modal-head h3 i { color: var(--danger); }
.fav-kapat { background: none; border: none; font-size: 20px; color: var(--c-muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.fav-kapat:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fav-modal-body { padding: 10px 22px 22px; overflow-y: auto; flex: 1; }
.fav-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-line-2); }
.fav-item:last-child { border-bottom: none; }
.fav-item a { font-size: 14px; font-weight: 600; color: var(--c-ink); flex: 1; }
.fav-item a:hover { color: var(--primary); }
.fav-sil { background: none; border: none; color: var(--c-muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fav-sil:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- KUPON ALANI ---------- */
.kupon-alan { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-line); }
.kupon-form { display: flex; gap: 8px; }
.kupon-form input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: 10px; font-size: 13.5px; font-family: inherit; text-transform: uppercase; font-weight: 600; outline: none; }
.kupon-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.kupon-form button { background: var(--c-ink); color: #fff; border: none; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: .15s; }
.kupon-form button:hover { background: var(--primary); }
.kupon-msg { margin-top: 8px; font-size: 13px; font-weight: 600; }
.kupon-msg .basari { color: var(--success); }
.kupon-msg .hata { color: var(--danger); }
.kupon-aktif { margin-top: 14px; padding: 12px 14px; background: var(--success-soft); border: 1px solid #a3e4c4; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: var(--success); }
.kupon-aktif i { margin-right: 6px; }
.kupon-sil { background: none; border: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.kupon-sil:hover { background: var(--danger-soft); }

/* ---------- SÖZLEŞME ONAY ---------- */
.sozlesme-onay { display: flex; flex-direction: column; gap: 12px; }
.check-opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--c-ink-2); line-height: 1.5; }
.check-opt input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.check-opt a { color: var(--primary-d); font-weight: 700; text-decoration: underline; }
.check-opt a:hover { color: var(--primary); }

/* ---------- YASAL SAYFALAR ---------- */
.yasal-sayfa { max-width: 820px; margin: 0 auto 60px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 40px 48px; box-shadow: var(--sh-sm); }
.yasal-sayfa h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.yasal-sayfa .guncelleme { color: var(--c-muted); font-size: 12.5px; margin-bottom: 28px; }
.yasal-sayfa h2 { font-size: 17px; font-weight: 800; margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--c-line-2); display: flex; align-items: center; gap: 8px; }
.yasal-sayfa h2:first-of-type { border-top: none; padding-top: 0; }
.yasal-sayfa h2 i { color: var(--primary); font-size: 16px; }
.yasal-sayfa p, .yasal-sayfa li { font-size: 14.5px; color: var(--c-ink-2); line-height: 1.75; }
.yasal-sayfa ul, .yasal-sayfa ol { padding-left: 22px; margin: 10px 0; }
.yasal-sayfa li { margin-bottom: 6px; }
.yasal-box { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 12px; margin: 18px 0; font-size: 14px; }
.yasal-box.bilgi { background: var(--primary-soft); border: 1px solid #c7d8ff; color: var(--primary-dd); }
.yasal-box.bilgi i { color: var(--primary); font-size: 20px; margin-top: 2px; }
.yasal-box.uyari { background: var(--warning-soft); border: 1px solid #fde9c8; color: #93370d; }
.yasal-box.uyari i { color: var(--warning); font-size: 22px; margin-top: 2px; }
.yasal-box p { margin: 0; }
.yasal-box a { color: var(--primary-d); font-weight: 700; }
.yasal-sayfa h3 { font-size: 15px; font-weight: 800; margin: 20px 0 8px; }
.yasal-sayfa h3 small { font-weight: 600; color: var(--c-muted); font-size: 12.5px; }
.yasal-tablo-sar { overflow-x: auto; margin: 12px 0 18px; }
.yasal-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.yasal-tablo th, .yasal-tablo td { text-align: left; padding: 10px 12px; border: 1px solid var(--c-line); vertical-align: top; }
.yasal-tablo th { background: var(--c-bg, #f6f7f9); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.yasal-tablo td { color: var(--c-ink-2); line-height: 1.6; }
.btn-cerez-sifirla { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: .16s; }
.btn-cerez-sifirla:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-d); }
.cerez-sonuc { display: inline-block; margin-left: 12px; color: var(--success, #157347); font-size: 13px; font-weight: 600; }

/* ---------- SİPARİŞ SORGULAMA ---------- */
.sorgula-hero { max-width: 600px; margin: 40px auto 60px; text-align: center; }
.sorgula-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.sorgula-hero p { color: var(--c-ink-2); margin-bottom: 24px; }
.sh-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 20px; }
.sh-icon.hata { background: var(--danger-soft); color: var(--danger); }
.sorgula-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.sf-input-wrap { flex: 1; position: relative; }
.sf-input-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.sf-input-wrap input { width: 100%; padding: 14px 16px 14px 42px; border: 1.5px solid var(--c-line); border-radius: 12px; font-size: 15px; font-weight: 600; font-family: inherit; outline: none; color: var(--c-ink); }
.sf-input-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.sf-alt { color: var(--c-muted); font-size: 12.5px; margin-top: 14px; }

.sip-sorgula-wrap { max-width: 900px; margin: 0 auto 60px; }
.ss-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.ss-baslik h1 { font-size: 24px; font-weight: 800; margin: 0; }
.ss-baslik p { color: var(--c-muted); font-size: 13px; margin: 4px 0 0; }

.ss-timeline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 30px; padding: 28px 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-xs); position: relative; }
.ss-timeline::before { content: ''; position: absolute; top: 50px; left: 60px; right: 60px; height: 3px; background: var(--c-line); z-index: 0; }
.ss-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; flex: 1; }
.ss-dot { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c-line); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--c-muted); margin-bottom: 10px; transition: .3s; }
.ss-step.aktif .ss-dot { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 4px 14px var(--primary-ring); }
.ss-step.tamam .ss-dot { border-color: var(--success); background: var(--success); color: #fff; }
.ss-txt strong { font-size: 13px; color: var(--c-ink); display: block; }
.ss-txt span { font-size: 11.5px; color: var(--c-muted); }
.ss-step.aktif .ss-txt strong { color: var(--primary); }
.ss-step.tamam .ss-txt strong { color: var(--success); }

.ss-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.ss-info-satir { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--c-line-2); font-size: 14px; }
.ss-info-satir:last-child { border-bottom: none; }
.ss-info-satir span:first-child { color: var(--c-muted); }
.ss-info-satir span:last-child { color: var(--c-ink); font-weight: 600; }
.sip-badge-m { display: inline-flex; padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.sip-badge-m.yeni { background: var(--primary-soft); color: var(--primary-d); }
.sip-badge-m.hazirlaniyor { background: var(--warning-soft); color: var(--warning); }
.sip-badge-m.kargoda { background: var(--primary-soft); color: var(--primary); }
.sip-badge-m.teslim-edildi { background: var(--success-soft); color: var(--success); }
.sip-badge-m.iptal { background: var(--danger-soft); color: var(--danger); }

/* ---------- BREADCRUMB EV İKONU ---------- */
.magaza-breadcrumb .bc-home { color: var(--c-muted); display: inline-flex; align-items: center; transition: .15s; }
.magaza-breadcrumb .bc-home:hover { color: var(--primary); }

/* ---------- ÜRÜN GALERİSİ (küçük resimler) ---------- */
.pd-media-wrap { display: flex; flex-direction: column; gap: 12px; }
.pd-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-thumb { width: 64px; height: 64px; border-radius: 10px; border: 1.5px solid var(--c-line); background: #fff; padding: 6px; cursor: pointer; transition: .15s; overflow: hidden; }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb:hover { border-color: var(--primary); }
.pd-thumb.aktif { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---------- İNDİRİM ROZETİ / FİYAT ---------- */
.pd-indirim-rozet {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: var(--danger); color: #fff; font-weight: 800; font-size: 13px;
    padding: 6px 14px; border-radius: 9px; box-shadow: 0 4px 12px rgba(240,68,56,0.35);
}
.pd-eski-fiyat { font-size: 18px; color: var(--c-muted); text-decoration: line-through; font-weight: 600; }
.pd-indirim-badge { background: var(--danger-soft); color: var(--danger); font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; }

/* Mağaza kartlarında indirim rozeti */
.pcard-indirim {
    position: absolute; bottom: 10px; right: 10px; z-index: 3;
    background: var(--danger); color: #fff; font-weight: 800; font-size: 11px;
    padding: 4px 9px; border-radius: 7px;
}
.pcard-eski-fiyat { font-size: 11.5px; color: var(--c-muted); text-decoration: line-through; font-weight: 600; display: block; }

/* ---------- YILDIZ / PUAN ÖZETİ ---------- */
.pd-yildiz-ozet { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; color: var(--c-ink-2); }
.pd-yildiz-ozet .yildizlar i { color: var(--star); font-size: 13px; }
.pd-yildiz-ozet b { color: var(--c-ink); font-weight: 800; }
.pd-yildiz-ozet .say { color: var(--c-muted); }
.pd-yildiz-ozet:hover { text-decoration: underline; }

/* ---------- STOK ACİLİYET ÇUBUĞU ---------- */
.pd-aciliyet { margin-bottom: 14px; }
.pd-aciliyet-ust { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pd-aciliyet-bar { height: 8px; border-radius: 20px; background: var(--c-line-2); overflow: hidden; }
.pd-aciliyet-fill { height: 100%; background: linear-gradient(90deg, var(--warning), var(--danger)); border-radius: 20px; transition: width .3s; }

/* ---------- SOSYAL KANIT / TESLİMAT TAHMİNİ ---------- */
.pd-sosyal-kanit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-d); background: var(--primary-soft); padding: 9px 14px; border-radius: 10px; margin-bottom: 12px; }
.pd-sosyal-kanit i { color: var(--warning); }
.pd-teslimat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-ink-2); margin-bottom: 16px; }
.pd-teslimat i { color: var(--success); }
.pd-teslimat b { color: var(--c-ink); }

/* ---------- DEĞERLENDİRME / YORUM BÖLÜMÜ ---------- */
.yorum-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.yorum-liste { display: flex; flex-direction: column; gap: 14px; }
.yorum-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: 16px 18px; }
.yorum-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.yorum-isim { font-weight: 700; font-size: 14px; color: var(--c-ink); }
.yorum-tarih { font-size: 12px; color: var(--c-muted); }
.yorum-yildiz { margin-bottom: 8px; }
.yorum-yildiz i { color: var(--star); font-size: 13px; margin-right: 1px; }
.yorum-metin { font-size: 13.5px; color: var(--c-ink-2); line-height: 1.6; margin: 0; }
.yorum-yanit { margin-top: 12px; padding: 12px 14px; background: var(--primary-soft); border-radius: var(--r-3); border-left: 3px solid var(--primary); }
.yorum-yanit-ust { font-size: 12px; font-weight: 800; color: var(--primary-d); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.yorum-yanit p { font-size: 13px; color: var(--c-ink-2); line-height: 1.55; margin: 0; }
.yorum-bos { padding: 30px 20px; text-align: center; color: var(--c-muted); background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: var(--r-2); font-size: 14px; }
/* 2026-08-18 (rev.2) — BOŞ DURUM DÜZENİ
   Sorun: hiç yorum/soru yokken "1fr + 360px" düzeni solda 640px ölü alan
   bırakıyordu. İlk çözüm (640px'lik sütunu ortalamak) sorunu yer değiştirdi:
   1192px'lik kapsayıcının içinde sağda ve solda 276'şar px boşluk kaldı.
   Çözüm: kutu tam genişlikte kalır, bölünme kutunun İÇİNE taşınır —
     · Değerlendirme: solda form alanları (ad + puan yan yana), sağda zaten
       formun içinde duran hediye kupon kutusu tam boy yan panel olur.
     · Soru & Cevap: solda ad + e-posta yan yana, soru tam genişlik; sağda
       zaten kutunun altında ince bir şerit olan "Acele mi?" iletişim bloğu
       kart hâline gelir.
   Yeni içerik UYDURULMADI; yalnızca sayfada hâlihazırda var olan bloklar
   yeniden konumlandırıldı. :has() desteklenmezse alanlar tam genişliğe
   döner, düzen bozulmaz. <900px'te her şey eski tek sütun akışında kalır.
   GERİ ALMA: bu yorumdan aşağıdaki @media blokunun sonuna kadar olan kuralları
   sil, yerine ".yorum-wrap.bos { grid-template-columns: 1fr; gap: 16px; }
   .yorum-wrap.bos .yorum-form-box { position: static; }" yaz. */
.yorum-wrap.bos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.yorum-wrap.bos .yorum-form-box { position: static; padding: 22px 24px; }
.yorum-wrap.bos .yorum-bos { display: flex; align-items: center; gap: 10px; text-align: left; padding: 15px 20px; }

@media (min-width: 900px) {
    /* Değerlendirme formu: alanlar solda, kupon kutusu sağda tam boy */
    #yorumlar .yorum-wrap.bos .yorum-form-box form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 340px);
        gap: 0 24px; align-items: start;
    }
    #yorumlar .yorum-wrap.bos .yorum-form-box form > * { grid-column: 1 / 3; }
    #yorumlar .yorum-wrap.bos .yorum-form-box form > .fg:has(input[name="isim"]) { grid-column: 1; }
    #yorumlar .yorum-wrap.bos .yorum-form-box form > .fg:has(.yorum-puan-sec) { grid-column: 2; }
    #yorumlar .yorum-wrap.bos .yorum-form-box form > .yorum-kupon {
        grid-column: 3; grid-row: 1 / span 99; margin: 0; align-self: stretch;
    }
    #yorumlar .yorum-wrap.bos .yorum-kupon .yk-alanlar { grid-template-columns: 1fr; }
    #yorumlar .yorum-wrap.bos .yorum-form-box form > .btn-p.tam { width: auto; min-width: 220px; justify-self: start; }

    /* Soru formu: alanlar solda, hızlı iletişim sağda kart olarak */
    #sorular .yorum-wrap.bos .yorum-form-box {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
        gap: 0 24px; align-items: start;
    }
    #sorular .yorum-wrap.bos .yorum-form-box > * { grid-column: 1; }
    #sorular .yorum-wrap.bos .yorum-form-box > .soru-hizli {
        grid-column: 2; grid-row: 1 / span 99; margin: 0;
        flex-direction: column; align-items: flex-start; gap: 11px;
        padding: 16px 18px; border: 1px dashed var(--c-line);
        border-radius: var(--r-2); background: var(--c-bg);
    }
    #sorular .yorum-wrap.bos .yorum-form-box > .soru-hizli span { font-weight: 700; color: var(--c-ink-2); }
    #sorular .yorum-wrap.bos .yorum-form-box > .soru-hizli a {
        width: 100%; justify-content: flex-start; padding: 11px 14px; font-size: 14px;
        background: #fff; border: 1.5px solid var(--c-line); border-radius: 11px; transition: .16s;
    }
    #sorular .yorum-wrap.bos .yorum-form-box > .soru-hizli a:hover { border-color: var(--primary); text-decoration: none; }
    #sorular .yorum-wrap.bos .yorum-form-box form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
    #sorular .yorum-wrap.bos .yorum-form-box form > * { grid-column: 1 / -1; }
    #sorular .yorum-wrap.bos .yorum-form-box form > .fg:has(input[name="isim"]) { grid-column: 1; }
    #sorular .yorum-wrap.bos .yorum-form-box form > .fg:has(input[name="email"]) { grid-column: 2; }
    #sorular .yorum-wrap.bos .yorum-form-box form > .btn-p.tam { width: auto; min-width: 220px; justify-self: start; }
}
.yorum-form-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 20px; box-shadow: var(--sh-xs); position: sticky; top: calc(var(--nav-h) + 14px); }
.yorum-form-box h4 { font-size: 15px; font-weight: 800; margin: 0 0 14px; }
.yorum-mesaj { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.yorum-mesaj.basari { background: var(--success-soft); color: var(--success); }
.yorum-mesaj.hata { background: var(--danger-soft); color: var(--danger); }
.yorum-puan-sec { display: flex; gap: 6px; font-size: 22px; }
.yorum-puan-sec i { color: var(--c-line); cursor: pointer; transition: .15s; }
.yorum-puan-sec i.aktif { color: var(--star); }

/* ---------- STICKY SEPETE EKLE ÇUBUĞU ---------- */
.sticky-cart-bar {
    position: fixed; left: 0; right: 0; bottom: -100px; z-index: 940;
    background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -8px 30px rgba(16,24,40,0.12);
    transition: bottom .3s ease;
}
.sticky-cart-bar.goster { bottom: 0; }
.sticky-cart-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.sc-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-info img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--c-surface-2); padding: 4px; flex-shrink: 0; }
.sc-txt { display: flex; flex-direction: column; min-width: 0; }
.sc-txt .ad { font-size: 13.5px; font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.sc-txt .fiyat { font-size: 16px; font-weight: 800; color: var(--price); font-family: var(--font-disp); }
/* Çubuktaki adet seçici sağdaki butonun soluna yapışır; dar ekranda ürün
   adı zaten kısalıyor, adet kutusu sepete ekle butonundan önce gelir. */
.sticky-cart-in .sc-qty { margin-left: auto; flex-shrink: 0; }
.sticky-cart-in .sc-qty input { width: 48px; }
@media (max-width: 560px) { .sticky-cart-in .sc-qty { display: none; } }

/* ---------- VİTRİN (ÇOK SATANLAR / YENİ GELENLER) ---------- */
.vitrin-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.vitrin-scroll .vitrin-card { flex: 0 0 230px; }
.pcard-tag.cok-satan { background: rgba(240,68,56,0.92); color: #fff; }
.pcard-tag.yeni-gelen { background: rgba(31,90,166,0.92); color: #fff; }
.pcard-tag.one-cikan { background: rgba(181,71,8,0.95); color: #fff; }
.pcard-tag.firsat { background: rgba(217,45,32,0.94); color: #fff; }
.pcard-tag.hazir { background: rgba(16,24,40,0.9); color: #fff; }

/* Vitrin ok butonları + sürükleme */
.vitrin-wrap { position: relative; }
.vitrin-wrap .vitrin-scroll { scroll-behavior: smooth; cursor: grab; }
.vitrin-wrap .vitrin-scroll.suruklu { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.vitrin-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-size: 15px; cursor: pointer; box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; transition: .18s; }
.vitrin-ok:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.vitrin-ok.prev { left: -6px; }
.vitrin-ok.next { right: -6px; }
.vitrin-ok.gizli { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .vitrin-ok { display: none; } }

/* Marka şeridi */
.marka-serit { margin: 0 0 22px; padding: 16px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); }
.marka-serit-head { font-size: 14px; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.marka-serit-head i { color: var(--primary); }
.marka-serit-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.marka-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px; padding: 12px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; text-decoration: none; transition: .16s; }
.marka-chip:hover { border-color: var(--primary); box-shadow: var(--sh-xs); transform: translateY(-2px); }
.marka-chip-ad { font-size: 14px; font-weight: 800; color: var(--c-ink); text-transform: uppercase; letter-spacing: .02em; }
.marka-chip-say { font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }

/* Fırsat / Hazır sistem rozetleri (başlık) */
.firsat-rozet, .hazir-rozet { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; margin-left: 8px; vertical-align: middle; letter-spacing: .02em; }
.firsat-rozet { background: var(--danger-soft); color: var(--danger); }
.hazir-rozet { background: var(--primary-soft); color: var(--primary-d); }

/* ── Teknik özellik filtreleri (facet) ─────────────────────────────────
   Sol kolondaki kategori listesinin yerini aldı: kategoriler breadcrumb
   açılır menüsüne taşındı, sol kolon tamamen filtreye ayrıldı. */
.side-ust { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; border-bottom: 1px solid var(--c-line); }
.side-ust > span { font-size: 13px; font-weight: 800; color: var(--c-ink); letter-spacing: .01em; }
.side-ust > span i { color: var(--primary); margin-right: 6px; }
.side-temizle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--danger); }

.side-rozetler { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--c-line); }
.side-rozet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 20px; background: var(--primary-soft); color: var(--primary-d); border: 1px solid transparent; transition: border-color .15s; }
.side-rozet:hover { border-color: var(--primary); }
.side-rozet i { font-size: 10px; opacity: .7; }

.oz-grup { border-bottom: 1px solid var(--c-line); }
.oz-grup-bas { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 12px 14px; background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--c-ink); text-align: left; cursor: pointer; }
.oz-grup-bas i { flex: 0 0 auto; font-size: 11px; color: var(--c-muted); transition: transform .25s; }
.oz-grup.acik .oz-grup-bas i { transform: rotate(180deg); }
.oz-grup-bas:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
/* Kapalı grup: yükseklik 0 ama DOM'da kalır — açılınca yeniden sayfa isteği
   gerekmesin ve arama motoru tüm filtre bağlantılarını görebilsin. */
.oz-grup-govde { display: none; padding: 0 13px 11px; }
.oz-grup.acik .oz-grup-govde { display: block; }

.oz-secim { display: flex; align-items: center; gap: 9px; padding: 5px 2px; font-size: 13px; color: var(--c-ink); border-radius: 6px; }
.oz-secim:hover { background: var(--c-surface-2); }
.oz-secim.fazla { display: none; }
.oz-grup-govde.hepsi .oz-secim.fazla { display: flex; }
/* Arama yazılıyken tüm seçenekler değerlendirilir, sadece eşleşmeyen gizlenir. */
.oz-grup-govde.aramada .oz-secim.fazla { display: flex; }
.oz-grup-govde .oz-secim.suzuldu { display: none; }
.oz-ara { position: relative; margin: 2px 0 8px; }
.oz-ara i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--c-muted); pointer-events: none; }
.oz-ara input {
    width: 100%; padding: 7px 9px 7px 27px; font-family: inherit; font-size: 12.5px; color: var(--c-ink);
    background: var(--c-surface-2, #f8fafc); border: 1px solid var(--c-line); border-radius: 8px; outline: none;
}
.oz-ara input:focus { border-color: var(--primary); background: #fff; }
.oz-ara input::-webkit-search-cancel-button { cursor: pointer; }
.oz-bos { padding: 6px 2px; font-size: 12px; color: var(--c-muted); }
.oz-kutu { flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--c-line-2, #cbd5e1); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: #fff; transition: .15s; }
.oz-kutu i { font-size: 9px; color: #fff; opacity: 0; }
.oz-secim.aktif .oz-kutu { background: var(--primary); border-color: var(--primary); }
.oz-secim.aktif .oz-kutu i { opacity: 1; }
.oz-secim.aktif .oz-ad { font-weight: 700; color: var(--primary-d); }
.oz-ad { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oz-say { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--c-muted); background: var(--c-surface); padding: 1px 7px; border-radius: 10px; }
.oz-daha { margin-top: 6px; background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; padding: 4px 2px; }
.oz-daha:hover { text-decoration: underline; }

/* ── Breadcrumb kategori açılır menüsü ───────────────────────────────── */
.bc-drop { position: relative; display: inline-flex; }
.bc-drop-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.bc-drop-btn:hover { background: var(--c-surface-2); color: var(--primary-d); }
.bc-drop-btn i { font-size: 9px; opacity: .6; transition: transform .2s; }
.bc-drop.acik .bc-drop-btn i { transform: rotate(180deg); }
.bc-drop-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 250px; max-height: 62vh; overflow-y: auto; padding: 6px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(15,23,42,.16);
}
.bc-drop.acik .bc-drop-menu { display: block; }
.bc-drop-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--c-ink); }
.bc-drop-menu a:hover { background: var(--c-surface-2); }
.bc-drop-menu a.aktif { background: var(--primary-soft); color: var(--primary-d); font-weight: 700; }
.bc-drop-menu a .say { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--c-muted); background: var(--c-surface); padding: 1px 8px; border-radius: 10px; }
.bc-drop-menu a i { width: 16px; text-align: center; opacity: .65; }
@media (max-width: 560px) { .bc-drop-menu { position: fixed; left: 12px; right: 12px; min-width: 0; top: auto; } }

/* Bülten (newsletter) bandı */
.bulten-band { background: linear-gradient(135deg, var(--primary), var(--primary-d)); color: #fff; padding: 30px 0; margin-top: 40px; }
.bulten-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bulten-txt h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.bulten-txt p { font-size: 13.5px; opacity: .9; margin: 0; }
.bulten-form { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 280px; max-width: 460px; }
.bulten-izin { flex-basis: 100%; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.bulten-izin a { color: #fff; text-decoration: underline; }
.bulten-form input { flex: 1; height: 48px; padding: 0 16px; border: none; border-radius: 12px; font-size: 14px; font-family: inherit; outline: none; }
.bulten-form button { height: 48px; padding: 0 22px; border: none; border-radius: 12px; background: #fff; color: var(--primary-d); font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; transition: .16s; display: inline-flex; align-items: center; gap: 8px; }
.bulten-form button:hover { background: #f0f6ff; }
.bulten-form button:disabled { opacity: .7; cursor: default; }

/* 2026-08-18 — KOYU/RENKLİ ZEMİNDE OKUNMAYAN YAZI
   Bu dosyanın başındaki iki genel kural — satır 89 `h1,h2,h3,h4,h5 { color: var(--c-ink) }`
   ve satır 90 `p { color: var(--c-ink-2) }` — kendi açık yazı rengini kuran koyu/renkli
   bantların İÇİNDE de geçerli oluyordu. Kalıtım her zaman eşleşen bir kurala yenildiği
   için bant `color: #fff` dese bile başlık siyah, paragraf gri kalıyordu.
   Tarayıcıda ölçüldü (1440px, açık tema):
     .bulten-band h3  #101014 / mavi gradyan -> kontrast 1.2  (görünmüyor)
     .bulten-band p   #5f6169 / mavi gradyan -> kontrast 1.4  (görünmüyor)
     .kvkk-bar    p   #5f6169 / #0b1324      -> kontrast 1.9  (okunmuyor)
   Çözüm: bu iki yüzeyin içinde başlık/paragraf rengi yeniden kalıtıma bırakılır.
   Yeni renk uydurulmadı — kapsayıcının zaten tanımlı rengi kullanılır, böylece bant
   rengi ileride değişirse yazı kendiliğinden uyar. Bağlantılar (.kvkk-in p a) daha
   yüksek özgüllükte olduğu için mavi kalır. Ölçüm sonrası: 7.09 / 7.09 / 12.49.
   GERİ ALMA: aşağıdaki tek kuralı sil. */
.bulten-band :is(h1, h2, h3, h4, h5, p),
.kvkk-bar :is(h1, h2, h3, h4, h5, p) { color: inherit; }

/* Footer güven damgası barı */
.mf-guven-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mfg { display: flex; align-items: center; gap: 11px; }
.mfg i { font-size: 22px; color: #7fb2f0; flex-shrink: 0; }
.mfg b { display: block; font-size: 13px; color: #fff; }
.mfg small { font-size: 11px; color: rgba(255,255,255,0.55); }
@media (max-width: 900px) { .mf-guven-bar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mf-guven-bar { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; } .bulten-in { flex-direction: column; align-items: stretch; text-align: center; } .bulten-txt h3 { justify-content: center; } .bulten-form { max-width: none; } }

/* ---------- FİYAT ARALIĞI FİLTRESİ ---------- */
.side-fiyat { padding: 8px 13px 14px; }
.fiyat-inputs { display: flex; align-items: center; gap: 8px; }
.fiyat-inputs input { width: 0; flex: 1; padding: 9px 10px; border: 1.5px solid var(--c-line); border-radius: 9px; font-size: 13px; font-family: inherit; outline: none; }
.fiyat-inputs input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.fiyat-inputs span { color: var(--c-muted); font-size: 12px; }
.fiyat-uygula { width: 100%; margin-top: 10px; background: var(--primary); color: #fff; border: none; padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: .15s; font-family: inherit; }
.fiyat-uygula:hover { background: var(--primary-d); }
.fiyat-temizle { display: block; text-align: center; margin-top: 8px; font-size: 12px; color: var(--c-muted); text-decoration: underline; }
.fiyat-temizle:hover { color: var(--danger); }

/* ---------- SİPARİŞ ADIM GÖSTERGESİ (sepet → ödeme → onay) ----------
   Tek sayfalık ödeme formunda müşteri "daha kaç adım var?" sorusunun cevabını
   göremiyordu. Üç sayfada da aynı çubuk çıkar; aradaki çizgi tamamlanan adıma
   kadar dolar. Yatay çizgi ::before ile çiziliyor, son adımda kesiliyor. */
.siparis-adim { display: flex; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: sa; }
.siparis-adim li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.siparis-adim li::before {
    content: ''; position: absolute; top: 17px; left: 50%; width: 100%; height: 3px;
    background: var(--c-line); border-radius: 3px; z-index: 0;
}
.siparis-adim li:last-child::before { display: none; }
.siparis-adim li.tamam::before { background: var(--success); }
.siparis-adim .sa-yuvarlak {
    position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--c-surface); border: 3px solid var(--c-line); color: var(--c-muted);
    transition: .22s;
}
.siparis-adim .sa-ad { font-size: 12.5px; font-weight: 700; color: var(--c-muted); text-align: center; line-height: 1.3; }
.siparis-adim li.tamam .sa-yuvarlak { background: var(--success); border-color: var(--success); color: #fff; }
.siparis-adim li.tamam .sa-ad { color: var(--success); }
.siparis-adim li.aktif .sa-yuvarlak { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 5px var(--primary-ring); }
.siparis-adim li.aktif .sa-ad { color: var(--c-ink); }
@media (max-width: 480px) { .siparis-adim .sa-ad { font-size: 11px; } }

/* ---------- CHECKOUT GÜVEN ROZETLERİ ---------- */
.co-guven-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.co-guven-bar span { display: flex; align-items: center; gap: 7px; background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: 9px; }
.co-guven-bar span i { font-size: 13px; }

/* ---------- MİSAFİR (ÜYELİKSİZ) ALIŞVERİŞ BİLGİ ÇUBUĞU ---------- */
.misafir-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: #f0f7ff; border: 1px solid #cfe3ff; border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; }
.misafir-bar .mb-sol { display: flex; align-items: center; gap: 12px; }
.misafir-bar .mb-sol > i { font-size: 20px; color: var(--primary); flex-shrink: 0; }
.misafir-bar .mb-sol b { display: block; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.misafir-bar .mb-sol span { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; line-height: 1.5; }
.misafir-bar .mb-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--primary);
    color: var(--primary-d); font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: .18s; }
.misafir-bar .mb-btn:hover { background: var(--primary); color: #fff; }
.fg-not { display: block; font-size: 11.5px; color: var(--c-muted); margin-top: 5px; line-height: 1.5; }
.misafir-devam { display: block; text-align: center; background: #fff; border: 1.5px dashed var(--c-line); border-radius: 11px;
    padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); text-decoration: none; transition: .18s; }
.misafir-devam:hover { border-color: var(--primary); background: #f7fbff; }
.misafir-devam span { display: block; font-size: 12px; font-weight: 500; color: var(--c-muted); margin-top: 3px; }
@media (max-width: 560px) { .misafir-bar { flex-direction: column; align-items: stretch; } .misafir-bar .mb-btn { justify-content: center; } }

/* ---------- ÜRÜN PAYLAŞ BUTONLARI ---------- */
.pd-paylas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.pd-paylas .pp-etiket { font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); margin-right: 4px; }
.pd-paylas .pp-etiket i { color: var(--primary); margin-right: 4px; }
.pd-paylas .pp-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); text-decoration: none;
    cursor: pointer; font-family: inherit; transition: .16s; }
.pd-paylas .pp-btn i { font-size: 14px; }
.pd-paylas .pp-btn:hover { color: #fff; border-color: transparent; }
.pd-paylas .pp-btn.wa:hover { background: #25d366; }
.pd-paylas .pp-btn.fb:hover { background: #1877f2; }
.pd-paylas .pp-btn.x:hover { background: #0f1419; }
.pd-paylas .pp-btn.tg:hover { background: #229ed9; }
.pd-paylas .pp-btn.kopya:hover { background: var(--primary); }
.pd-paylas .pp-btn.ok { background: var(--success); color: #fff; border-color: transparent; }
@media (max-width: 560px) { .pd-paylas .pp-btn span { display: none; } .pd-paylas .pp-btn { padding: 9px 12px; } }

/* ---------- İLETİŞİM & SSS SAYFALARI ---------- */
.ilt-head { text-align: center; max-width: 640px; margin: 6px auto 26px; }
.ilt-head h1 { font-size: 27px; font-weight: 800; margin: 0 0 8px; color: var(--c-ink); }
.ilt-head p { font-size: 14px; color: var(--c-ink-2); line-height: 1.7; margin: 0; }
.ilt-head a { color: var(--primary-d); font-weight: 700; }

.ilt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ilt-kart { display: block; text-align: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
    padding: 22px 16px; text-decoration: none; transition: .18s; }
.ilt-kart:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 10px 26px rgba(15,23,42,.08); }
.ilt-kart .ik { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px;
    font-size: 20px; margin-bottom: 12px; }
.ilt-kart .ik.tel { background: #eff6ff; color: #2563eb; }
.ilt-kart .ik.wa { background: #ecfdf5; color: #16a34a; }
.ilt-kart .ik.mail { background: #fef3c7; color: #b45309; }
.ilt-kart .ik.adres { background: #fae8ff; color: #a21caf; }
.ilt-kart b { display: block; font-size: 13px; font-weight: 800; color: var(--c-ink); }
.ilt-kart .deger { display: block; font-size: 14.5px; font-weight: 700; color: var(--primary-d); margin: 5px 0 6px; }
.ilt-kart .not { display: block; font-size: 12px; color: var(--c-ink-2); line-height: 1.5; }

.ilt-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ilt-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 20px 22px; }
.ilt-box h2 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 800; color: var(--c-ink); margin: 0 0 14px; }
.ilt-box h2 i { color: var(--primary); font-size: 15px; }
.ilt-saat .satir, .ilt-kunye .satir { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--c-line); font-size: 13.5px; }
.ilt-saat .satir:last-child, .ilt-kunye .satir:last-child { border-bottom: none; }
.ilt-saat span, .ilt-kunye span { color: var(--c-ink-2); }
.ilt-saat b, .ilt-kunye b { color: var(--c-ink); font-weight: 700; text-align: right; }
.ilt-saat b.kapali { color: var(--danger); }
.ilt-ipucu { margin: 14px 0 0; font-size: 12.5px; color: var(--c-muted); line-height: 1.6; background: #f8fafc; border-radius: 9px; padding: 10px 12px; }
.ilt-ipucu i { color: var(--primary); margin-right: 5px; }

.ilt-harita { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; margin-bottom: 22px; line-height: 0; }

.ilt-yonlendir { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.ilt-yonlendir a { display: inline-flex; align-items: center; gap: 8px; background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); text-decoration: none; transition: .18s; }
.ilt-yonlendir a:hover { border-color: var(--primary); color: var(--primary-d); }
.ilt-yonlendir a i { color: var(--primary); }

/* Başlık atlama şeridi — sayfa 20 sorudan 36'ya çıkınca eklendi (2026-08-17).
   scroll-margin-top olmazsa çıpaya atlandığında başlık yapışkan menünün altında kalıyor. */
.sss-atla { max-width: 860px; margin: 0 auto 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.sss-atla a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--c-line);
    border-radius: 999px; background: var(--c-surface); font-size: 13px; font-weight: 700; color: var(--c-ink-2); transition: .15s; }
.sss-atla a:hover { border-color: var(--primary); color: var(--primary-d); }
.sss-atla a b { font-size: 11px; font-weight: 800; color: var(--c-muted); }
.sss-atla a:hover b { color: var(--primary); }

.sss-wrap { max-width: 860px; margin: 0 auto 26px; }
.sss-grup { margin-bottom: 26px; scroll-margin-top: 90px; }
.sss-grup h2 { font-size: 16px; font-weight: 800; color: var(--c-ink); margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--primary); }
.sss-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; margin-bottom: 9px; overflow: hidden; }
.sss-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none;
    padding: 15px 18px; font-size: 14px; font-weight: 700; color: var(--c-ink); transition: .15s; }
.sss-item summary::-webkit-details-marker { display: none; }
.sss-item summary:hover { background: #f8fafc; }
.sss-item summary i { color: var(--c-muted); font-size: 12px; transition: transform .2s; flex-shrink: 0; }
.sss-item[open] summary { background: #f8fafc; border-bottom: 1px solid var(--c-line); }
.sss-item[open] summary i { transform: rotate(180deg); color: var(--primary); }
.sss-cevap { padding: 15px 18px; font-size: 13.5px; color: var(--c-ink-2); line-height: 1.8; }
.sss-cevap a { color: var(--primary-d); font-weight: 700; }
.sss-cevap b { color: var(--c-ink); }

/* ---------- SKELETON / GÖRSEL YÜKLEME EFEKTİ ---------- */
.pcard-media, .pd-media {
    background: linear-gradient(100deg, #eef1f5 25%, #f7f9fc 45%, #eef1f5 65%);
    background-size: 200% 100%; animation: skShimmer 1.4s ease-in-out infinite;
}
.pcard-media.img-yuklendi, .pd-media.img-yuklendi { animation: none; background: var(--c-surface-2); }
.pcard-media img, .pd-media img { opacity: 1; transition: opacity .35s ease; }
@keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- MOBİL ALT NAVİGASYON ---------- */
.mobil-alt-nav { display: none; }
.mobil-alt-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--c-muted); font-size: 10.5px; font-weight: 600; position: relative; transition: .15s; }
.mobil-alt-nav a i { font-size: 18px; }
.mobil-alt-nav a.aktif { color: var(--primary); }
.mobil-alt-nav .man-cart { position: relative; }
.man-badge { position: absolute; top: -2px; right: 18%; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 20px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.man-badge.bos { display: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .pd-wrap { grid-template-columns: 1fr; gap: 24px; }
    .cart-wrap, .co-wrap { grid-template-columns: 1fr; }
    .cart-ozet { position: static; }
    .magaza-footer .container > .row { grid-template-columns: 1fr 1fr; }
    .ss-grid { grid-template-columns: 1fr; }
    .ss-timeline { flex-wrap: wrap; gap: 14px; }
    .ss-timeline::before { display: none; }
}
@media (max-width: 860px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-side { position: static; display: none; }
    .shop-side.mobil-acik { display: block; margin-bottom: 14px; }
    .mobil-filtre-btn { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
    :root { --nav-h: 64px; }
    .magaza-header .container { gap: 12px; }
    .magaza-brand .logo-txt { display: none; }
    .hdr-btn .tx { display: none; }
    .magaza-search { order: 3; flex-basis: 100%; max-width: 100%; min-width: 0; }
    .magaza-header .container { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
    .magaza-topbar .sag .gizle-mobil { display: none; }
    .magaza-topbar .tb-doviz { display: none; }
    .fg-row { grid-template-columns: 1fr; }
    .pd-guven { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 72px 1fr; }
    .cart-row-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .magaza-footer .container > .row { grid-template-columns: 1fr; }
    .done h1 { font-size: 23px; }
    body { padding-bottom: 64px; }
    .mobil-alt-nav { display: flex; }
    .wa-float { bottom: 78px; right: 18px; width: 52px; height: 52px; font-size: 24px; }
    .btt { bottom: 140px; right: 20px; width: 38px; height: 38px; }
    .toast-box { top: auto; bottom: 140px; right: 12px; left: 12px; }
    .toast-item { font-size: 13px; padding: 12px 14px; }
    .kvkk-in { flex-direction: column; text-align: center; }
    .yasal-sayfa { padding: 24px 20px; }
    .yasal-sayfa h1 { font-size: 22px; }
    .sorgula-form { flex-direction: column; }
    .fav-modal-in { margin: 12px; max-height: 90vh; }
    .hdr-btn.gizle-mobil { display: none; }
    .hdr-doviz { display: none; }
    .bw-nav-sag { display: none; }
    .ss-step { flex: none; width: 48%; }
    .sticky-cart-bar.goster { bottom: 64px; }
}

/* ============================================================
   B2B YENİLEMELERİ — Döviz kuru, marka filtresi, karşılaştırma
   ============================================================ */

/* ---------- Topbar döviz kurları ---------- */
.topbar-doviz { display: flex; align-items: center; gap: 14px; }
.topbar-doviz .kur { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.topbar-doviz .kur i { color: #34d399; font-size: 11px; }

/* ---------- Header karşılaştır butonu ---------- */
.hdr-btn.hdr-compare .ic { color: var(--primary); }

/* ---------- Ürün detay marka rozeti + karşılaştır butonu ---------- */
.pd-marka { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--primary-d); background: var(--primary-soft); border-radius: 6px; padding: 3px 9px; margin-left: 6px; }
.pd-marka:hover { background: var(--primary); color: #fff; }
.btn-o.cmp-btn.aktif { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-d); }
.btn-o.cmp-btn.aktif i { color: var(--primary); }

/* ---------- Sidebar marka filtresi ---------- */
.side-marka-list { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.side-marka { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); transition: .16s; }
.side-marka:hover { background: var(--c-surface-2); color: var(--c-ink); }
.side-marka.aktif { background: var(--primary-soft); color: var(--primary-d); }
.side-marka .say { font-size: 11.5px; font-weight: 700; color: var(--c-muted); background: var(--c-surface-2); border-radius: 20px; padding: 1px 8px; min-width: 24px; text-align: center; }
.side-marka.aktif .say { background: #fff; color: var(--primary-d); }

/* ---------- Ürün kartı: No / Marka satırı ---------- */
.pcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pcard-meta .pno { font-size: 11px; font-weight: 700; color: var(--c-muted); letter-spacing: .01em; }
.pcard-meta .pmarka { font-size: 11px; font-weight: 800; color: var(--primary-d); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Ürün kartı: Karşılaştır kutusu (kart gövdesinde, satır) ---------- */
.pcard-cmp { margin-bottom: 10px; }
.cmp-lbl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--c-ink-2); transition: .14s; }
.cmp-lbl:hover { color: var(--primary-d); }
.cmp-lbl input { accent-color: var(--primary); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.cmp-lbl span i { font-size: 11px; color: var(--c-muted); }
.cmp-lbl:has(input:checked) { color: var(--primary-d); }
.cmp-lbl:has(input:checked) span i { color: var(--primary); }

/* ---------- Karşılaştırma çubuğu (floating) ---------- */
.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--c-surface); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 24px rgba(16,24,40,0.10); padding: 12px 0; }
.cmp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmp-bar-items { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.cmp-chip { display: flex; align-items: center; gap: 8px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 10px; padding: 5px 8px 5px 5px; max-width: 210px; }
.cmp-chip img, .cmp-chip .ph { width: 34px; height: 34px; border-radius: 7px; object-fit: contain; background: #fff; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; color: #cdd5e0; flex: 0 0 auto; }
.cmp-chip .ad { font-size: 12px; font-weight: 600; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip button { border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cmp-chip button:hover { color: var(--danger); background: var(--danger-soft); }
.cmp-bar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cmp-temizle { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-2); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmp-temizle:hover { border-color: var(--danger); color: var(--danger); }
.cmp-git { background: var(--primary); color: #fff; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.cmp-git:hover { background: var(--primary-d); }

/* ---------- Karşılaştırma sayfası ---------- */
.cmp-page { padding: 8px 0 40px; }
.cmp-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cmp-page-head h1 { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; }
.cmp-page-head h1 i { color: var(--primary); }
.cmp-hepsini-temizle { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-2); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmp-hepsini-temizle:hover { border-color: var(--danger); color: var(--danger); }
.cmp-bos { text-align: center; padding: 60px 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); }
.cmp-bos .ic { font-size: 52px; color: #cdd5e0; margin-bottom: 14px; }
.cmp-bos h3 { margin: 0 0 8px; font-size: 20px; }
.cmp-bos p { max-width: 460px; margin: 0 auto 20px; }
.cmp-bos .btn-p { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; border-radius: 10px; padding: 11px 20px; font-weight: 700; }
.cmp-tablo-wrap { overflow-x: auto; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); }
.cmp-tablo { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-tablo th, .cmp-tablo td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--c-line); vertical-align: middle; font-size: 14px; color: var(--c-ink); }
.cmp-tablo tbody tr:last-child td { border-bottom: 0; }
.cmp-etiket { text-align: left !important; font-weight: 700; color: var(--c-ink-2); background: var(--c-surface-2); font-size: 13px; width: 150px; white-space: nowrap; }
.cmp-urun-col { position: relative; width: 220px; padding-top: 20px !important; }
.cmp-col-sil { position: absolute; top: 8px; right: 8px; border: 0; background: var(--c-surface-2); color: var(--c-muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.cmp-col-sil:hover { background: var(--danger-soft); color: var(--danger); }
.cmp-gorsel { display: block; height: 120px; margin-bottom: 10px; }
.cmp-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.cmp-gorsel .ph { display: flex; align-items: center; justify-content: center; height: 100%; color: #cdd5e0; font-size: 2.6rem; }
.cmp-ad { font-size: 13.5px; font-weight: 600; color: var(--c-ink); display: block; line-height: 1.4; }
.cmp-ad:hover { color: var(--primary); }
.cmp-fiyat .eski { display: block; font-size: 12px; color: var(--c-muted); text-decoration: line-through; }
.cmp-fiyat .val { font-size: 18px; font-weight: 800; color: var(--price); font-family: var(--font-disp); }
.cmp-yok { color: var(--c-muted); }
.cmp-stok { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.cmp-stok.var { background: var(--success-soft); color: var(--success); }
.cmp-stok.az { background: var(--warning-soft); color: var(--warning); }
.cmp-stok.yok { background: var(--danger-soft); color: var(--danger); }
.cmp-sepet { display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: #fff; border: 0; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cmp-sepet:hover { background: var(--primary-d); }
.cmp-sepet.ara { background: var(--warning-soft); color: var(--warning); }
.cmp-sepet.ara:hover { background: var(--warning); color: #fff; }

@media (max-width: 640px) {
    .topbar-doviz { display: none; }
    .cmp-bar { bottom: 64px; }
    .cmp-bar-in { flex-direction: column; align-items: stretch; gap: 10px; }
    .cmp-bar-items { max-height: 74px; overflow-y: auto; }
    .cmp-bar-actions { justify-content: space-between; }
    .cmp-page-head { flex-direction: column; align-items: flex-start; }
}

/* ============ ÜYE / AUTH SAYFALARI ============ */
.auth-wrap { max-width: 560px; margin: 30px auto 60px; }
.auth-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-md); padding: 34px 34px 30px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); font-size: 24px; margin-bottom: 14px; }
.auth-ico.ok { background: #e7f6ee; color: #12b76a; }
.auth-ico.err { background: #fdeceb; color: var(--danger); }
.auth-head h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: var(--c-ink); }
.auth-head p { color: var(--c-ink-2); font-size: 14px; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form .fg { display: flex; flex-direction: column; gap: 6px; }
.auth-form .fg label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.auth-form .fg input { width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 11px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.auth-form .fg input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.auth-form .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-satir { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth-satir a, .auth-alt a, .auth-bilgi a, .auth-basari a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-satir a:hover, .auth-alt a:hover { text-decoration: underline; }
.auth-alt { text-align: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-ink-2); }
.auth-bilgi { background: var(--primary-soft); border: 1px solid #cfe0f3; color: #184a8c; border-radius: 11px; padding: 12px 15px; font-size: 14px; margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; }
.auth-basari { background: #e7f6ee; border: 1px solid #b6e7cc; color: #0a7a45; border-radius: 11px; padding: 14px 16px; font-size: 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.auth-basari i, .auth-bilgi i { font-size: 18px; margin-top: 1px; }
.auth-ayrac { display: flex; align-items: center; text-align: center; margin: 20px 0 16px; color: var(--c-ink-2); font-size: 13px; }
.auth-ayrac::before, .auth-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.auth-ayrac span { padding: 0 14px; }
.auth-sosyal { display: flex; flex-direction: column; gap: 10px; }
.sosyal-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 11px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid var(--c-line); transition: background .15s, box-shadow .15s, border-color .15s; }
.sosyal-btn svg { flex-shrink: 0; }
.sosyal-btn.google { background: #fff; color: #3c4043; }
.sosyal-btn.google:hover { background: #f7f8fa; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.sosyal-btn.apple { background: #000; color: #fff; border-color: #000; }
.sosyal-btn.apple:hover { background: #1a1a1a; }
.auth-sonuc { text-align: center; }
.auth-sonuc h1 { font-size: 23px; font-weight: 800; margin: 6px 0 8px; color: var(--c-ink); }
.auth-sonuc p { color: var(--c-ink-2); font-size: 15px; margin: 0; line-height: 1.6; }

/* ============ HESABIM PANELİ ============ */
.hesap-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin: 22px 0 60px; align-items: start; }
.hesap-yan { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-xs); overflow: hidden; position: sticky; top: 16px; }
.hesap-kart-user { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--primary-soft); border-bottom: 1px solid var(--c-line); }
.hesap-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.hesap-user-bilgi { min-width: 0; }
.hesap-user-bilgi b { display: block; font-size: 15px; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hesap-user-bilgi small { color: var(--c-ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hesap-nav { display: flex; flex-direction: column; padding: 8px; }
.hesap-nav a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px; color: var(--c-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background .12s, color .12s; }
.hesap-nav a i { width: 18px; text-align: center; }
.hesap-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.hesap-nav a.aktif { background: var(--primary); color: #fff; }
.hesap-nav a .say { margin-left: auto; background: var(--c-line); color: var(--c-ink-2); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.hesap-nav a.aktif .say { background: rgba(255,255,255,.25); color: #fff; }
.hesap-nav a.cikis { color: var(--danger); margin-top: 4px; border-top: 1px solid var(--c-line); border-radius: 0 0 10px 10px; }
.hesap-nav a.cikis:hover { background: #fdeceb; color: var(--danger); }
.hesap-icerik { min-width: 0; }
.hesap-baslik { font-size: 21px; font-weight: 800; color: var(--c-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.hesap-baslik i { color: var(--primary); }
.hesap-form { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.hesap-form-dar { max-width: 420px; }
.hesap-form .fg { display: flex; flex-direction: column; gap: 6px; }
.hesap-form .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hesap-form label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.hesap-form input, .hesap-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--c-line); border-radius: 10px; font-size: 14.5px; font-family: inherit; }
.hesap-form input:focus, .hesap-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.hesap-form input:disabled { background: #f5f6f8; color: var(--c-muted); }
.hesap-form button { align-self: flex-start; }
/* Gizlilik & Verilerim sekmesi (KVKK m.11 hakları) */
.kvkk-giris { font-size: 14px; color: var(--c-ink-2); line-height: 1.7; margin: 0 0 18px; max-width: 720px; }
.kvkk-kart { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 22px 24px; margin-bottom: 18px; max-width: 720px; }
.kvkk-kart h2 { font-size: 16.5px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.kvkk-kart h2 i { color: var(--primary); }
.kvkk-kart p { font-size: 13.5px; color: var(--c-ink-2); line-height: 1.7; margin: 0 0 14px; }
.kvkk-kart.tehlike { border-color: #f3c9c9; }
.kvkk-kart.tehlike h2 i { color: #c0392b; }
.kvkk-not { display: flex; gap: 10px; background: #fff8e6; border: 1px solid #f0dfae; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.65; color: #6b5a2a; margin-bottom: 16px; }
.kvkk-not i { color: #b8860b; margin-top: 2px; flex-shrink: 0; }
.kvkk-form { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.kvkk-form .fg { display: flex; flex-direction: column; gap: 6px; }
.kvkk-form label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.kvkk-form input { width: 100%; padding: 11px 13px; border: 1px solid var(--c-line); border-radius: 10px; font-size: 14.5px; font-family: inherit; }
.kvkk-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.kvkk-form button { align-self: flex-start; }
.btn-teh { background: #c0392b; color: #fff; border: 0; padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; }
.btn-teh:hover { background: #a5301f; }
.hesap-bos { text-align: center; background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: var(--r); padding: 48px 24px; }
.hesap-bos i { font-size: 42px; color: var(--c-muted); margin-bottom: 14px; }
.hesap-bos h3 { font-size: 18px; color: var(--c-ink); margin: 0 0 6px; }
.hesap-bos p { color: var(--c-ink-2); margin: 0 0 20px; }
.hesap-siparis-list { display: flex; flex-direction: column; gap: 14px; }
.hesap-siparis { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 13px; box-shadow: var(--sh-xs); overflow: hidden; }
.hs-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; background: #fafbfc; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.hs-no { font-weight: 800; color: var(--c-ink); font-size: 14.5px; }
.hs-no i { color: var(--primary); margin-right: 3px; }
.hs-tarih { color: var(--c-muted); font-size: 12.5px; margin-left: 14px; }
.hs-durum { font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.hs-durum.d-yeni { background: var(--primary-soft); color: var(--primary); }
.hs-durum.d-hazir { background: #fff3e0; color: #c77700; }
.hs-durum.d-kargo { background: #e8f0fe; color: #1a56c4; }
.hs-durum.d-teslim { background: #e7f6ee; color: #0a7a45; }
.hs-durum.d-iptal { background: #fdeceb; color: var(--danger); }
.hs-urunler { padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.hs-satir { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--c-ink); }
.hs-satir small { color: var(--c-muted); }
.hs-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--c-line); background: #fafbfc; flex-wrap: wrap; }
.hs-kargo, .hs-odeme { font-size: 13px; color: var(--c-ink-2); }
.hs-kargo i { color: var(--primary); }
.hs-toplam { font-size: 14px; color: var(--c-ink-2); }
.hs-toplam b { color: var(--c-ink); font-size: 15.5px; }
@media (max-width: 820px) {
    .hesap-wrap { grid-template-columns: 1fr; }
    .hesap-yan { position: static; }
    .hesap-nav { flex-direction: row; flex-wrap: wrap; }
    .hesap-nav a { flex: 1 1 auto; justify-content: center; }
    .hesap-nav a.cikis { border-top: none; }
    .auth-form .fg-row, .hesap-form .fg-row { grid-template-columns: 1fr; }
}

/* ===== ÖDEME GÜVEN ROZETLERİ ===== */
.odeme-guven{margin-top:14px;padding-top:14px;border-top:1px dashed var(--c-line);}
.og-rozet{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.og-rozet span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#12805c;background:#e7f7f0;border:1px solid #bfe9d8;padding:5px 9px;border-radius:999px;}
.og-kart{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:12px;font-size:28px;color:var(--c-ink-2);}
.og-kart i{opacity:.72;}
.og-not{font-size:11px;color:var(--c-muted);text-align:center;margin:11px 0 0;line-height:1.5;}

/* ===== HESAP DASHBOARD (bayiweb tarzı) ===== */
.hesap-hos{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.hesap-hos-alt{margin:5px 0 0;font-size:13px;color:var(--c-muted);}
.hesap-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.hstat{display:flex;align-items:center;gap:13px;padding:16px;border-radius:var(--r);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-xs);position:relative;overflow:hidden;}
.hstat::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;opacity:.10;background:currentColor;}
.hstat-ico{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;}
.hstat-tx{display:flex;flex-direction:column;line-height:1.2;}
.hstat-tx b{font-size:21px;font-weight:800;color:var(--c-ink);}
.hstat-tx small{font-size:12px;color:var(--c-muted);margin-top:2px;}
.hstat-1{color:#1f5aa6;}.hstat-1 .hstat-ico{background:linear-gradient(135deg,#1f5aa6,#3d7cc9);}
.hstat-2{color:#c9820a;}.hstat-2 .hstat-ico{background:linear-gradient(135deg,#e0980f,#f5b944);}
.hstat-3{color:#12805c;}.hstat-3 .hstat-ico{background:linear-gradient(135deg,#12805c,#22b07d);}
.hstat-4{color:#d23f57;}.hstat-4 .hstat-ico{background:linear-gradient(135deg,#e0455f,#f56e85);}
.hesap-profil-uyari{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:var(--r);background:var(--primary-soft);border:1px solid #cfe0f4;margin-bottom:22px;}
.hpu-tx b{display:block;font-size:14px;color:var(--primary);}
.hpu-tx small{display:block;font-size:12.5px;color:var(--c-ink-2);margin:3px 0 8px;}
.hpu-bar{height:7px;border-radius:99px;background:#d8e6f6;overflow:hidden;max-width:280px;}
.hpu-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),#4f8fd6);}
.hesap-son-siparis-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;}
.hesap-son-siparis-head h2{font-size:17px;font-weight:800;color:var(--c-ink);margin:0;display:flex;align-items:center;gap:8px;}
.hesap-son-siparis-head h2 i{color:var(--primary);}
.hesap-son-siparis-head a{font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;}
.hesap-siparis.mini .hs-ust{margin-bottom:0;}
@media (max-width:820px){.hesap-stat{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.hesap-stat{grid-template-columns:1fr;}}

/* ParçaAğı B2B nav girişi */
.bw-nav-pa{font-weight:700}
.bw-nav-pa i{color:#1f5aa6}
.bw-pa-rozet{display:inline-block;margin-left:4px;padding:1px 6px;font-size:10px;font-weight:800;line-height:1.4;color:#fff;background:linear-gradient(135deg,#1f5aa6,#0ea5a4);border-radius:20px;vertical-align:middle}

/* Sihirbaz nav girişleri (üst menü + header kısayolu) */
.bw-menu-wz { gap: 7px; }
.bw-menu-wz i { font-size: 13px; color: #ffd166; }
.bw-menu-wz::before { content: ''; width: 1px; height: 20px; background: rgba(255,255,255,.22); margin-right: 12px; }
.hdr-btn.hdr-wz .ic { color: #7c3aed; }
.hdr-btn.hdr-wz { background: linear-gradient(135deg, #f5f3ff, #eef4fb); }
.hdr-btn.hdr-wz:hover { background: linear-gradient(135deg, #ede9fe, #e0ecfa); }
@media (max-width: 900px) { .hdr-btn.hdr-wz { display: none; } }

/* =====================================================================
   VİTRİN EK ÖZELLİKLERİ (magaza_ozellik.php)
   Kargo kesim sayacı · Ankara aynı gün · Uyumluluk · Kurumsal · Video
   Soru-Cevap · Yorum kuponu · Ek hizmetler · Kategori ağacı · Arama düzeltme
   ===================================================================== */

/* --- Kargo kesim geri sayımı --- */
.pd-kesim{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--c-ink-2);background:#f4f6f9;border:1px solid var(--c-line);}
.pd-kesim i{margin-top:2px;color:var(--c-muted);}
.pd-kesim.aktif{color:#0f5c43;background:#e7f7f0;border-color:#bfe9d8;}
.pd-kesim.aktif i{color:#12805c;}
.pd-kesim b{font-weight:800;}
#pdKesimSayac b{font-variant-numeric:tabular-nums;}

/* --- Ankara içi aynı gün / mağazadan teslim --- */
.pd-ankara{margin-top:12px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#fff7e6,#fffdf7);border:1px solid #f0d9a8;}
.pd-ankara .pa-ust{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#a86a06;text-transform:uppercase;letter-spacing:.4px;}
.pd-ankara p{margin:7px 0 11px;font-size:13.5px;line-height:1.55;color:var(--c-ink-2);}
.pd-ankara .pa-kunye{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid #f0e2c2;}
.pd-ankara .pa-satir{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--c-ink-2);}
.pd-ankara .pa-satir i{flex:none;margin-top:2px;width:14px;text-align:center;color:#a86a06;}
.pd-ankara .pa-satir b{color:var(--c-ink);}
.pd-ankara .pa-acik{color:#0f7b3d;}
.pd-ankara .pa-kapali{color:#b45309;}
.pd-ankara .pa-btn{display:flex;gap:9px;flex-wrap:wrap;}
.pd-ankara .pa-btn .btn-p,.pd-ankara .pa-btn .btn-o{padding:9px 15px;font-size:13px;}

/* --- Galeri altı mağaza künyesi (yalnızca iki sütunlu düzende) --- */
.pd-magaza-kart{display:none;}
@media (min-width:1025px){
    .pd-magaza-kart{display:block;margin-top:6px;padding:16px 18px;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-xs);}
    .pd-magaza-kart .pmk-ust{display:flex;gap:12px;align-items:flex-start;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--c-line);}
    .pd-magaza-kart .pmk-ikon{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary);font-size:16px;}
    .pd-magaza-kart .pmk-ust b{display:block;font-size:14px;color:var(--c-ink);}
    .pd-magaza-kart .pmk-ust span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--c-muted);}
    .pd-magaza-kart .pmk-satir{display:flex;gap:10px;font-size:12.5px;line-height:1.55;color:var(--c-ink-2);margin-bottom:9px;}
    .pd-magaza-kart .pmk-satir i{flex:none;margin-top:2px;width:15px;text-align:center;color:var(--primary);}
    .pd-magaza-kart .pmk-acik{color:#0f7b3d;}
    .pd-magaza-kart .pmk-kapali{color:#b45309;}
    .pd-magaza-kart .pmk-harita{margin:13px 0;border-radius:12px;overflow:hidden;border:1px solid var(--c-line);line-height:0;}
    .pd-magaza-kart .pmk-harita iframe{width:100%;height:170px;border:0;}
    .pd-magaza-kart .pmk-btn{display:flex;gap:9px;flex-wrap:wrap;}
    .pd-magaza-kart .pmk-btn .btn-o{flex:1;justify-content:center;padding:9px 12px;font-size:13px;}
}

/* --- Uyumluluk özeti --- */
.pd-uyum{margin-top:14px;padding:15px 17px;border-radius:14px;background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-xs);}
.pd-uyum .pu-baslik{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--c-ink);margin-bottom:11px;}
.pd-uyum .pu-baslik i{color:var(--primary);}
.pd-uyum .pu-rozetler{display:flex;flex-wrap:wrap;gap:8px;}
.pu-rozet{display:inline-flex;flex-direction:column;line-height:1.25;padding:6px 12px;border-radius:10px;background:var(--primary-soft);border:1px solid #cfe0f4;}
.pu-rozet em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--primary);}
.pu-rozet b{font-size:13px;font-weight:800;color:var(--c-ink);}
.pd-uyum .pu-notlar{margin:11px 0 0;padding-left:18px;}
.pd-uyum .pu-notlar li{font-size:12.8px;line-height:1.6;color:var(--c-ink-2);margin-bottom:4px;}
.pd-uyum .pu-link{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--primary);text-decoration:none;}
.pd-uyum .pu-link:hover{text-decoration:underline;}

/* --- Sepetle uyum çelişkisi uyarısı --- */
.pd-uyum-uyari{margin-top:12px;padding:13px 15px;border-radius:12px;background:#fdf0f2;border:1px solid #f3c9d1;}
.pd-uyum-uyari .pu-ust{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#b3213b;}
.pd-uyum-uyari ul{margin:8px 0 6px;padding-left:18px;}
.pd-uyum-uyari li{font-size:12.8px;line-height:1.55;color:var(--c-ink-2);margin-bottom:4px;}
.pd-uyum-uyari small{font-size:11.5px;color:var(--c-muted);}

/* --- Kurumsal / toplu alım --- */
.pd-kurumsal{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;padding:13px 16px;border-radius:14px;background:linear-gradient(135deg,#0f172a,#1e3a5f);}
.pd-kurumsal .pk-ic{display:flex;align-items:center;gap:12px;}
.pd-kurumsal .pk-ikon{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;background:rgba(255,255,255,.14);}
.pd-kurumsal .pk-metin b{display:block;font-size:14px;font-weight:800;color:#fff;}
.pd-kurumsal .pk-metin small{display:block;font-size:12.3px;color:rgba(255,255,255,.72);margin-top:2px;}
.pd-kurumsal .pk-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:800;color:#0f172a;background:#ffd166;text-decoration:none;white-space:nowrap;transition:.18s;}
.pd-kurumsal .pk-btn:hover{background:#ffdd8c;transform:translateY(-1px);}

/* --- Ürün videosu --- */
.pd-video{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#0f172a;}
.pd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pd-video-not{margin:9px 0 0;font-size:11.5px;color:var(--c-muted);}

/* --- Soru & Cevap --- */
.soru-item{padding:16px 18px;border-radius:14px;background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-xs);margin-bottom:12px;}
.soru-ust,.cevap-ust{display:flex;gap:11px;align-items:flex-start;}
.cevap-ust{margin-top:12px;padding-top:12px;border-top:1px dashed var(--c-line);}
.soru-rozet,.cevap-rozet{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;}
.soru-rozet{background:var(--c-ink-2);}
.cevap-rozet{background:var(--primary);}
.soru-metin{margin:0;font-size:14px;font-weight:700;line-height:1.55;color:var(--c-ink);}
.cevap-metin{margin:0;font-size:13.5px;line-height:1.65;color:var(--c-ink-2);}
.soru-meta{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--c-muted);}
.soru-hizli{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px dashed var(--c-line);font-size:12.5px;color:var(--c-muted);}
.soru-hizli a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--primary);text-decoration:none;}
.soru-hizli a:hover{text-decoration:underline;}

/* --- Yorum karşılığı kupon alanı --- */
.yorum-kupon{margin:14px 0;padding:13px 15px;border-radius:12px;background:#fffaf0;border:1px dashed #e5c07b;}
.yorum-kupon .yk-ust{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#9a6b06;}
.yorum-kupon .yk-ust b{font-weight:800;}
.yorum-kupon p{margin:7px 0 10px;font-size:12.5px;line-height:1.55;color:var(--c-ink-2);}
.yorum-kupon .yk-alanlar{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.yorum-kupon small{display:block;margin-top:8px;font-size:11.2px;line-height:1.5;color:var(--c-muted);}
@media (max-width:560px){.yorum-kupon .yk-alanlar{grid-template-columns:1fr;}}

/* --- Sepet / ödeme ek hizmetleri --- */
.ek-hizmet{margin-top:16px;padding:16px 18px;border-radius:var(--r);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-xs);}
.ek-hizmet-baslik{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--c-ink);margin-bottom:4px;}
.ek-hizmet-baslik i{color:var(--primary);}
.ek-hizmet-alt{margin:0 0 13px;font-size:12.5px;color:var(--c-muted);}
.eh-secenek{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:12px;border:1.5px solid var(--c-line);cursor:pointer;transition:.16s;margin-bottom:10px;}
.eh-secenek:hover{border-color:#bcd3ee;background:#fafcff;}
.eh-secenek.secili{border-color:var(--primary);background:var(--primary-soft);}
.eh-secenek input{margin-top:3px;width:17px;height:17px;accent-color:var(--primary);flex:none;cursor:pointer;}
.eh-ic{flex:1;min-width:0;}
.eh-ust{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.eh-ad{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--c-ink);}
.eh-ad i{color:var(--primary);}
.eh-tutar{font-size:14.5px;font-weight:800;color:var(--primary);white-space:nowrap;}
.eh-ozet{margin:4px 0 0;font-size:12.8px;color:var(--c-ink-2);}
.eh-aciklama{margin:6px 0 0;font-size:11.8px;line-height:1.55;color:var(--c-muted);}
.eh-kaydet{margin-top:4px;}

/* İşletim sistemi seçimi — hizmet işaretlenmeden görünmez. */
.eh-secim{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 12px;padding:10px 14px;
          border-radius:0 0 12px 12px;background:var(--primary-soft);border:1.5px solid var(--primary);border-top:0;}
.eh-secim.gizli{display:none;}
.eh-secim label{font-size:12.5px;font-weight:700;color:var(--c-ink);}
.eh-secim select{flex:1;min-width:180px;padding:8px 10px;border-radius:8px;border:1.5px solid var(--c-line);
                 background:#fff;font-size:13px;font-weight:600;color:var(--c-ink);cursor:pointer;}

/* Ürün sayfası servis vaadi — sepete ekle butonunun hemen üstündeki karar kutusu. */
.pd-hizmet{margin:0 0 16px;padding:14px 16px;border-radius:14px;border:1.5px solid;background:#fff;}
.pd-hizmet .ph-ust{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;margin-bottom:6px;}
.pd-hizmet p{margin:0;font-size:12.8px;line-height:1.65;color:var(--c-ink-2);}
.pd-hizmet .ph-fiyat{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
                     margin-top:10px;padding-top:10px;border-top:1px dashed var(--c-line);font-size:12.5px;font-weight:700;}
.pd-hizmet .ph-fiyat b{font-size:15px;}
.pd-hizmet.montaj {border-color:#b7e2c6;background:#f4fbf6;}
.pd-hizmet.montaj  .ph-ust,.pd-hizmet.montaj  .ph-fiyat b{color:#0f7b3d;}
.pd-hizmet.os     {border-color:#bcd3ee;background:#f6f9fd;}
.pd-hizmet.os      .ph-ust,.pd-hizmet.os      .ph-fiyat b{color:#1f5aa6;}
.pd-hizmet.kurulum{border-color:#f0d3ae;background:#fffaf3;}
.pd-hizmet.kurulum .ph-ust,.pd-hizmet.kurulum .ph-fiyat b{color:#b45309;}

/* --- Kategori ağacı --- */
.kat-agac{margin:0;padding:0;list-style:none;}
.kat-agac>li{border-bottom:1px solid var(--c-line);}
.kat-agac>li:last-child{border-bottom:0;}
.ka-ust{display:flex;align-items:center;gap:9px;width:100%;padding:11px 4px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--c-ink);cursor:pointer;text-align:left;}
.ka-ust .ka-ok{margin-left:auto;font-size:11px;color:var(--c-muted);transition:transform .2s;}
.ka-ust[aria-expanded="true"] .ka-ok{transform:rotate(90deg);}
.ka-ust .ka-adet{font-size:11.5px;font-weight:700;color:var(--c-muted);}
.ka-alt{display:none;margin:0 0 9px;padding:0 0 0 8px;list-style:none;border-left:2px solid var(--c-line);}
.ka-alt.acik{display:block;}
.ka-alt a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;font-size:12.8px;color:var(--c-ink-2);text-decoration:none;transition:.14s;}
.ka-alt a:hover{background:var(--primary-soft);color:var(--primary);}
.ka-alt a.aktif{background:var(--primary);color:#fff;font-weight:700;}
.ka-alt a span{font-size:11.2px;opacity:.7;}

/* --- Arama yazım düzeltmesi --- */
.arama-duzelt{margin:0 0 16px;padding:11px 15px;border-radius:12px;background:#fffaf0;border:1px solid #f0d9a8;font-size:13.5px;color:var(--c-ink-2);}
.arama-duzelt i{color:#c9820a;margin-right:7px;}
.arama-duzelt a{font-weight:800;color:var(--primary);text-decoration:none;}
.arama-duzelt a:hover{text-decoration:underline;}

/* Breadcrumb kategori menüsünde grup başlıkları */
.bc-drop-grup{padding:9px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted);}
.bc-drop-menu .bc-drop-grup:first-child{padding-top:4px;}
/* Ana sayfa kategori ağacı, kutunun kendi çerçevesi içinde */
.bw-home-katlist .kat-agac{padding:0 12px 8px;}
.bw-home-katlist .ka-ust{padding:10px 2px;}
.bw-home-katlist .ka-ust>i:first-child{width:17px;text-align:center;color:var(--primary);}

/* --- Kenar çubuğundaki kategori ağacı (2026-08-12) -----------------------
   Listeleme sayfalarında filtrelerin ÜSTÜNDE duruyor: ziyaretçi önce
   "neredeyim / nereye gidebilirim", sonra "nasıl daraltırım" sorusunu
   görüyor. Ağacın kendi görünümü yukarıdaki genel .kat-agac kurallarından
   geliyor; burada yalnızca kenar çubuğuna oturması için boşluk/çerçeve var.
   GERİ ALMA: bu bloğu ve magaza.php'deki .side-kategoriler div'ini sil. */
.side-kategoriler{border-bottom:1px solid var(--c-line);padding-bottom:6px;}
.side-kat-ust{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 9px;}
.side-kat-ust>span{font-size:13px;font-weight:800;color:var(--c-ink);letter-spacing:.01em;}
.side-kat-ust>span i{color:var(--primary);margin-right:6px;}
.side-kat-tum{font-size:12px;font-weight:700;color:var(--primary);}
.side-kat-tum:hover{text-decoration:underline;}
/* Ağaç kendi içinde kayar: 11 üst grup + açık alt liste yan yana ~590px
   tutuyordu ve "Filtreler" başlığını ekranın altına itiyordu. Kapak yüksekliği
   ile hem kategoriler hem filtreler ilk bakışta görünür kalıyor. */
.side-kategoriler .kat-agac{padding:0 12px;max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;}
.side-kategoriler .kat-agac::-webkit-scrollbar{width:6px;}
.side-kategoriler .kat-agac::-webkit-scrollbar-track{background:transparent;}
.side-kategoriler .kat-agac::-webkit-scrollbar-thumb{background:#d7dee8;border-radius:6px;}
.side-kategoriler .ka-ust{padding:10px 2px;}
.side-kategoriler .ka-ust>i:first-child{width:17px;text-align:center;color:var(--primary);}

/* --- Kurumsal güven kutusu — ürün sayfası ve sepet (2026-08-12) ----------
   ETBİS / MERSİS / fiziki mağaza / sertifika / Google puanı artık kararın
   verildiği ekranda. Çerçeve dili .pd-uyum ve .cart-ozet ile aynı: yüzey
   rengi, 1px çizgi, 12px köşe. Renkler değişken üzerinden geliyor, koyu
   temada ayrıca bir şey yazmaya gerek yok. */
.gk-kutu{margin-top:14px;background:var(--c-surface);border:1px solid var(--c-line);
    border-radius:var(--r-2);overflow:hidden;}
.gk-bas{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:12.5px;font-weight:800;
    color:var(--c-ink);border-bottom:1px solid var(--c-line);}
.gk-bas i{color:var(--primary);}
.gk-satir{display:flex;align-items:center;gap:11px;padding:10px 14px;text-decoration:none;
    border-bottom:1px solid var(--c-line);transition:background .15s;}
.gk-satir:hover{background:var(--primary-soft);}
.gk-ik{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;
    justify-content:center;font-size:13px;color:#fff;}
.gk-ik-mavi{background:var(--primary);}
.gk-ik-kirmizi{background:#ea4335;}
.gk-ik-yesil{background:#0f9d58;}
.gk-ik-google{background:#fff;border:1px solid var(--c-line);}
.gk-metin{display:flex;flex-direction:column;gap:2px;min-width:0;}
.gk-metin b{font-size:12.8px;font-weight:700;color:var(--c-ink);}
.gk-metin small{font-size:11.4px;line-height:1.4;color:var(--c-muted);}
.gk-ok{margin-left:auto;font-size:10.5px;color:var(--c-muted);flex:0 0 auto;}
.gk-satir:hover .gk-ok{color:var(--primary);}
.gk-kunye{padding:9px 14px;font-size:10.8px;line-height:1.5;color:var(--c-muted);}
/* Sepet sütunu dar: ikinci satırlar ve künye kısalıyor, kutu daha sıkı. */
.gk-sepet{margin-top:14px;}
.gk-sepet .gk-satir{padding:9px 12px;gap:9px;}
.gk-sepet .gk-ik{width:27px;height:27px;border-radius:8px;font-size:12px;}
.gk-sepet .gk-metin small{display:none;}
.gk-sepet .gk-kunye{display:none;}
@media (max-width:560px){
    .gk-metin small{font-size:11px;}
    .gk-kunye{font-size:10.2px;}
}