/* ==========================================================================
   PARLAB — ShopPHP teması · Tasarım Sistemi  (ParçaBayim)
   Marka: grafit + turuncu (premium) · Font: Lexend (self-host)
   Bootstrap/Tailwind YOK · Modüler CSS (cascade @layer) · tek istek (hızlı)
   Katmanlar: tokens → base → layout → components → utilities
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- TOKENS -- */
@layer tokens {
  :root {
    /* Marka renkleri — ParçaBayim (grafit + turuncu premium) */
    --brand:        #FB6514;   /* turuncu — marka / vurgu / arama / rozet (ParçaBayim kimliği) */
    --brand-600:    #E85D0F;
    --brand-050:    #FFF1E8;
    --cta:          #FB6514;   /* büyük CTA (Sepete ekle) — marka turuncusu */
    --cta-600:      #E85D0F;
    --green:        #12B76A;   /* fiyat, stok, sepet ekle, telefon/whatsapp */
    --green-600:    #0E9355;
    --green-050:    #E7F7EF;

    /* Nötrler — grafit / slate (premium) */
    --ink:          #0A0A0A;   /* başlık + koyu buton (siyah) */
    --ink-2:        #1E232E;
    --text:         #111111;   /* genel metin (siyah) */
    --muted:        #6B7280;
    --muted-2:      #9AA1AC;
    --line:         #EDEFF2;
    --line-2:       #E2E5EA;
    --bg:           #FFFFFF;
    --bg-soft:      #F6F7F9;   /* section konteyner zemini */
    --bg-soft-2:    #FAFBFC;

    /* Aksesuar */
    --coupon-bg:    #FFF1E8;
    --coupon-fg:    #C2540A;
    --countdown:    #EF4444;
    --star:         #F5A623;

    /* Tipografi */
    --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
    --fs-xs: .75rem;    /* 12 */
    --fs-sm: .8125rem;  /* 13 */
    --fs-base: .875rem; /* 14 */
    --fs-md: 1rem;      /* 16 */
    --fs-lg: 1.125rem;  /* 18 */
    --fs-xl: 1.375rem;  /* 22 */
    --fs-2xl: 1.75rem;  /* 28 */

    /* Şekil */
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Gölge */
    --sh-sm: 0 2px 8px rgba(29,35,51,.05);
    --sh:    0 6px 24px rgba(29,35,51,.07);
    --sh-lg: 0 12px 32px rgba(29,35,51,.10);

    /* Ölçü */
    --container: 1360px;
    --gap: 16px;
    --header-h: 64px;

    /* Geçiş */
    --t: .2s ease;
  }
}

/* ------------------------------------------------------------------ BASE -- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip; /* yatay taşmayı engelle (mobil) — sticky'yi bozmaz */
  }

  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }

  /* genel ikon boyutu (bağlam ezebilir) */
  .ico { width: 20px; height: 20px; flex: none; }
  .ico-xs { width: 14px; height: 14px; }

  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--brand); }

  button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

  ul, ol { list-style: none; padding: 0; }

  input, select, textarea { font: inherit; color: inherit; }

  h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--ink); }

  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Erişilebilirlik: içeriğe atla */
  .skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
    font-weight: 600; transition: top .2s;
  }
  .skip-link:focus { top: 8px; color: #fff; }

  ::selection { background: var(--brand); color: #fff; }
}

/* ---------------------------------------------------------------- LAYOUT -- */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 16px;
  }

  .section { margin-top: 48px; }
  .section--tight { margin-top: 32px; }

  /* Ürün grid — responsive auto-fill */
  .grid { display: grid; gap: 16px; }
  /* modifier'sız (grid--N olmayan) bir .grid asla tek sütun kalmasın → devasa kart olmaz
     (sepet "Sepetiniz ile İlgili Ürünler" çekirdek ızgarası buraya düşüyor) */
  .grid:not([class*="grid--"]) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }

  @media (max-width: 991px) {
    .grid--5, .grid--4 { grid-template-columns: repeat(3, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 575px) {
    .grid--5, .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, 1fr); }
  }
}

/* ------------------------------------------------------------ COMPONENTS -- */
@layer components {

  /* ---- Duyuru şeridi ---- */
  .promo-bar {
    background: var(--brand);
    color: #fff;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .3px;
    padding: 8px 12px;
  }

  /* ---- Üst mini bar ---- */
  .topbar {
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--muted);
  }
  .topbar .container { display: flex; justify-content: flex-end; gap: 20px; padding-block: 9px; }
  .topbar a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
  .topbar a:hover { color: var(--brand); }
  .topbar .ico { width: 15px; height: 15px; }

  /* ---- Header (logo · arama · aksiyon) ---- */
  /* header'ı KESİN olarak her şeyin (slider, kategori çubuğu) üstüne al → arama sonuçları önde */
  .header { position: relative; z-index: 1000; isolation: isolate; background: #fff; }
  .search { position: relative; z-index: 5; }
  .header .container {
    display: flex; align-items: center; gap: 28px;
    padding-block: 18px;
  }
  .logo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; color: var(--ink); white-space: nowrap; }
  .logo b { color: var(--ink); }
  .logo span { color: var(--brand); font-weight: 700; }
  .logo img { height: 52px; width: auto; max-width: 220px; object-fit: contain; }

  .search { flex: 1; position: relative; max-width: 620px; }
  .search input {
    width: 100%;
    height: 52px;
    padding: 0 60px 0 22px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--bg-soft-2);
    transition: border-color var(--t), background var(--t);
  }
  .search input::placeholder { color: var(--muted-2); }
  .search input:focus { outline: none; border-color: var(--brand); background: #fff; }
  .search button {
    position: absolute; right: 6px; top: 6px;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: var(--r-pill);
    transition: background var(--t);
  }
  .search button:hover { background: var(--brand-600); }
  .search .ico { width: 18px; height: 18px; }

  /* canlı arama sonuçları */
  .pl-search-results-wrap { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); overflow: hidden; display: none; max-height: 70vh; overflow-y: auto; }
  .pl-search-results-wrap.open { display: block; }
  .pl-search-results li a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text); }
  .pl-search-results li a:hover { background: var(--bg-soft); color: var(--brand); }
  .pl-search-results img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r-sm); background: var(--bg-soft); flex: none; }
  .pl-sr-name { font-size: var(--fs-sm); line-height: 1.35; flex: 1; }
  .pl-sr-kod { flex: none; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; }
  .pl-sr-all a { justify-content: center; font-weight: 700; color: var(--brand); border-top: 1px solid var(--line); }
  .pl-sr-empty { padding: 14px; color: var(--muted); text-align: center; font-size: var(--fs-sm); }

  .header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
  .haction { display: flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; }
  .haction .ico { width: 22px; height: 22px; color: var(--ink); }
  .haction small { display: block; font-size: 11px; color: var(--muted); line-height: 1.2; }
  .haction b { font-size: var(--fs-base); font-weight: 600; }
  .haction:hover { color: var(--brand); }
  .haction:hover .ico { color: var(--brand); }
  .cart-ico { position: relative; }
  .cart-badge {
    position: absolute; top: -6px; right: -8px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--r-pill);
  }

  /* ---- Kategori mega-menü çubuğu (sticky) ---- */
  .catnav {
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px);
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow var(--t);
  }
  .catnav.stuck { box-shadow: var(--sh-sm); }
  .catnav .container { display: flex; align-items: center; gap: 24px; height: 48px; }
  .catnav-toggle {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--ink);
  }
  .catnav-toggle .ico { width: 18px; height: 18px; }
  .badge-new {
    background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: var(--r-pill);
  }
  .catnav-menu { display: flex; align-items: center; gap: 22px; }
  .catnav-menu > a, .catnav-item > a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text); white-space: nowrap; padding-block: 14px; }
  .catnav-menu > a:hover, .catnav-item > a:hover { color: var(--brand); }

  /* mega dropdown */
  .catnav-item { position: relative; }
  .catnav-item .mega {
    position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh);
    padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .catnav-item:hover .mega, .catnav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .mega-in { display: grid; gap: 2px; }
  .mega-in a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text); font-weight: 500; }
  .mega-in a:hover { background: var(--bg-soft); color: var(--brand); }
  .mega-in img, .mega-ph { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
  .mega-ph { display: grid; place-items: center; background: var(--bg-soft); color: var(--muted-2); }

  @media (max-width: 991px) {
    .catnav .container { gap: 14px; }
    .catnav-menu { overflow-x: auto; scrollbar-width: none; }
    .catnav-menu::-webkit-scrollbar { display: none; }
    .catnav-item .mega { display: none; }
  }

  /* ---- Mobil kategori drawer ---- */
  .pl-drawer {
    position: fixed; inset: 0 auto 0 0; z-index: 1300; width: 320px; max-width: 86vw;
    background: #fff; transform: translateX(-100%); transition: transform .25s ease;
    overflow-y: auto; box-shadow: var(--sh-lg);
  }
  .pl-drawer.open { transform: none; }
  .pl-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: .2s; z-index: 1250; }
  .pl-drawer-backdrop.open { opacity: 1; visibility: visible; }
  .pl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
  .pl-drawer-close { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--bg-soft); display: grid; place-items: center; }
  .pl-drawer-list { padding: 8px; }
  .pl-drawer-list a, .pl-drawer-list summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); color: var(--text); font-weight: 600; cursor: pointer; }
  .pl-drawer-list a:hover, .pl-drawer-list summary:hover { background: var(--bg-soft); color: var(--brand); }
  .pl-drawer-list summary { list-style: none; }
  .pl-drawer-list summary::-webkit-details-marker { display: none; }
  .pl-drawer-txt { flex: 1; }
  .pl-drawer-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
  .pl-drawer-ph { display: grid; place-items: center; background: var(--bg-soft); color: var(--muted-2); }
  .pl-drawer-chev { flex: none; color: var(--muted); transition: transform .2s; }
  .pl-drawer-list details[open] > summary .pl-drawer-chev { transform: rotate(180deg); }
  .pl-drawer-sub { padding-left: 12px; border-left: 2px solid var(--line); margin: 2px 0 6px 14px; }
  .pl-drawer-sub a { font-weight: 500; font-size: var(--fs-sm); padding: 9px 12px; }
  .pl-drawer-sub .pl-drawer-img { width: 28px; height: 28px; }

  /* ---- Kayan yazı ---- */
  .pl-marquee { overflow: hidden; white-space: nowrap; }
  .pl-marquee-track { display: inline-flex; gap: 48px; padding: 8px 0; animation: pl-marq 26s linear infinite; }
  .pl-marquee-track span { font-size: var(--fs-sm); font-weight: 600; }
  @keyframes pl-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .pl-marquee-track { animation: none; } }

  /* ---- Hero slider ---- */
  .hero { margin-top: 20px; }
  .hero-slider { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
  .hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .hero-track::-webkit-scrollbar { display: none; }
  .hero-slide {
    position: relative; flex: 0 0 100%; scroll-snap-align: start;
    height: clamp(200px, 32vw, 380px);
    display: flex; align-items: center;
    padding: clamp(24px, 6vw, 72px);
    color: #fff; overflow: hidden;
  }
  /* premium degrade zeminler (görsel gelene kadar) */
  .hero-slide.s1 { background: radial-gradient(120% 140% at 85% 20%, #2A3140 0%, var(--ink) 55%), var(--ink); }
  .hero-slide.s2 { background: linear-gradient(120deg, #7A2E06 0%, var(--brand) 100%); }
  .hero-slide.s3 { background: linear-gradient(120deg, #0B5E3A 0%, var(--green) 100%); }
  .hero-slide::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255,255,255,.06);
  }
  .hero-content { position: relative; z-index: 1; max-width: 560px; }
  .hero-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .85; margin-bottom: 12px; }
  .hero-title { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
  .hero-sub { margin-top: 12px; font-size: var(--fs-md); opacity: .9; max-width: 440px; }
  .hero-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
  .hero .btn-ghost { background: rgba(255,255,255,.14); color: #fff; }
  .hero .btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }

  .hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.9); color: var(--ink);
    display: grid; place-items: center; box-shadow: var(--sh-sm);
    opacity: 0; transition: opacity var(--t), background var(--t);
  }
  .hero-slider:hover .hero-arrow { opacity: 1; }
  .hero-arrow:hover { background: #fff; }
  .hero-arrow.prev { left: 14px; }
  .hero-arrow.next { right: 14px; }
  .hero-arrow .ico { width: 20px; height: 20px; }
  .hero-arrow.prev .ico { transform: rotate(90deg); }
  .hero-arrow.next .ico { transform: rotate(-90deg); }
  @media (max-width: 767px) { .hero-arrow { display: none; } }

  .hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 7px; }
  .hero-dots button { width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.5); transition: all var(--t); }
  .hero-dots button.on { width: 24px; background: #fff; }

  /* ---- Anasayfa tanıtım/SEO (başlık + Devamını oku) ---- */
  .home-seo { background: var(--bg-soft); border-radius: var(--r-lg); padding: 28px 32px; }
  .home-seo--titleonly { background: none; padding: 0; text-align: center; }
  .home-seo-title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -.2px; margin-bottom: 14px; }
  .home-seo--titleonly .home-seo-title { margin-bottom: 0; }
  .home-seo-body { color: var(--muted); line-height: 1.75; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .home-seo-body :where(h2, h3) { color: var(--text); margin: 16px 0 8px; }
  .home-seo-body :where(p, ul, ol) { margin-bottom: 10px; }
  .home-seo.open .home-seo-body { display: block; -webkit-line-clamp: none; }
  .home-seo-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; color: var(--brand); }
  .home-seo-more .ico { transition: transform var(--t); }
  .home-seo.open .home-seo-more .ico { transform: rotate(180deg); }
  @media (max-width: 575px) { .home-seo { padding: 20px; } }

  /* ---- Güven rozetleri ---- */
  .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .feature {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border: 1px solid var(--line); border-radius: var(--r);
    background: #fff;
  }
  .feature-ico {
    flex: none; width: 46px; height: 46px; border-radius: var(--r-pill);
    display: grid; place-items: center;
    border: 1.5px solid var(--brand-050); background: var(--brand-050); color: var(--brand);
  }
  .feature-ico .ico { width: 22px; height: 22px; }
  .feature b { display: block; font-size: var(--fs-base); color: var(--ink); }
  .feature small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
  @media (max-width: 767px) { .features { grid-template-columns: repeat(2, 1fr); } }

  /* ---- Kategori daireleri (story) ---- */
  /* not: otomatik akış (data-auto) için snap KAPALI — mandatory snap 0.5px akışı geri çeker */
  .cat-circles { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .cat-circles::-webkit-scrollbar { display: none; }
  .cat-circle { flex: none; width: 84px; text-align: center; }
  .cat-circle .ring {
    width: 76px; height: 76px; margin: 0 auto 8px;
    border-radius: var(--r-lg);
    padding: 3px; border: 2px solid var(--green);
    display: grid; place-items: center;
    transition: transform var(--t), box-shadow var(--t);
  }
  .cat-circle:nth-child(odd) .ring { border-color: var(--brand); }
  .cat-circle .ring > span {
    width: 100%; height: 100%; border-radius: calc(var(--r-lg) - 4px); overflow: hidden;
    background: var(--bg-soft); display: grid; place-items: center; color: var(--muted-2);
  }
  .cat-circle .ring > span img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-lg) - 4px); }
  .cat-circle:hover .ring { transform: translateY(-4px) scale(1.05); box-shadow: var(--sh); }
  .cat-circle small { font-size: var(--fs-xs); color: var(--text); font-weight: 500; display: block; line-height: 1.3; transition: color var(--t); }
  .cat-circle:hover small { color: var(--brand); }
  .cat-strip { display: flex; align-items: center; gap: 8px; }
  .cat-strip .cat-circles { flex: 1; cursor: grab; }
  .cat-strip .cat-circles.dragging { cursor: grabbing; }
  @media (max-width: 767px) { .cat-strip > .slider-arrow { display: none; } }

  /* ---- Bölüm başlığı ---- */
  .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .sec-title { font-size: var(--fs-xl); display: flex; align-items: center; gap: 10px; }
  .sec-title .ico { width: 22px; height: 22px; color: var(--brand); }
  .sec-link { font-size: var(--fs-base); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
  .sec-link:hover { color: var(--brand); }

  /* ---- Yatay ürün slider (ilgili ürünler vb.) ---- */
  .slider-nav { display: flex; gap: 8px; }
  .slider-arrow { width: 38px; height: 38px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; color: var(--ink); transition: all var(--t); }
  .slider-arrow:hover { border-color: var(--brand); color: var(--brand); }
  .slider-arrow:disabled { opacity: .35; cursor: default; }
  .slider-arrow.prev .ico { transform: rotate(90deg); }
  .slider-arrow.next .ico { transform: rotate(-90deg); }
  .product-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; cursor: grab; }
  .product-slider::-webkit-scrollbar { display: none; }
  .product-slider.dragging { cursor: grabbing; }
  .product-slider .card { flex: 0 0 clamp(180px, 45vw, 230px); scroll-snap-align: start; max-width: 230px; }
  @media (max-width: 767px) { .slider-nav { display: none; } }

  /* ---- Trend markalar (pill) ---- */
  .brand-pills { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-bottom: 4px; }
  .brand-pills::-webkit-scrollbar { display: none; }
  .brand-pills.dragging { cursor: grabbing; }
  .brand-pill {
    flex: none; padding: 9px 20px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
    font-weight: 500; color: var(--text); background: #fff; white-space: nowrap; transition: all var(--t);
  }
  .brand-pill:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-sm); }

  /* ---- Konteyner panel (Popüler / Özel Karışımlar) ---- */
  .panel { background: var(--bg-soft); border-radius: var(--r-lg); padding: 24px; }

  /* ---- Panel banner/blok alanları (insertBannerv5) ---- */
  .banner-grid { display: grid; gap: 20px; }
  .banner-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .banner-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .banner-slot { border-radius: var(--r-lg); overflow: hidden; line-height: 0; }
  .banner-slot img { width: 100%; height: auto; object-fit: cover; border-radius: var(--r-lg); transition: transform var(--t); }
  .banner-slot a { display: block; }
  .banner-slot a:hover img { transform: scale(1.02); }
  .banner-slot--wide img { width: 100%; }
  @media (max-width: 767px) {
    .banner-grid--2, .banner-grid--3 { grid-template-columns: 1fr; }
  }

  /* ---- Ürün kartı ---- */
  .card {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow var(--t), transform var(--t);
  }
  .card:hover { box-shadow: var(--sh); transform: translateY(-3px); }

  .card-media { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; color: var(--muted-2); overflow: hidden; }
  /* ürünü kesmeden tam göster (contain), beyaz zemin — referanstaki gibi */
  .card-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
  .card-media > a { display: block; width: 100%; height: 100%; }
  .card-hover-img { padding: 10px; }
  /* fotoğrafı olmayan ürün placeholder'ı (Fix 5) */
  .card-media.no-img::after { content: "Görsel yok"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); font-size: var(--fs-xs); }
  /* hover görsel katmanları 1-2-3 (Fix 3) */
  .card-hover-imgs { position: absolute; inset: 0; pointer-events: none; }
  .card-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .15s ease; background: var(--bg-soft); }
  .card-hover-img.on { opacity: 1; }
  .card-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 4px; justify-content: center; opacity: 0; transition: opacity .2s; }
  .card:hover .card-dots { opacity: 1; }
  .card-dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.16); display: block; }
  .card-dots i.on { background: var(--brand); }

  .card-fav {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    width: 34px; height: 34px; border-radius: var(--r-pill);
    background: #fff; box-shadow: var(--sh-sm);
    display: grid; place-items: center; color: var(--muted);
    transition: color var(--t);
  }
  /* marka logosu — görselin sağ üst köşesi (saydam arka plan, hepsi eşit boyda) */
  .brand-logo { position: absolute; top: 8px; right: 8px; z-index: 3; background: transparent; border: 0; box-shadow: none; border-radius: 0; width: 58px; height: 30px; display: grid; place-items: center; padding: 0; }
  .brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
  /* kart alt şeridi — marka (beyaz) + ürün kodu (siyah) */
  .card-serit { display: flex; align-items: stretch; border-top: 1px solid var(--line); font-size: var(--fs-xs); min-height: 30px; }
  .cs-marka { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 8px; background: #fff; color: var(--ink); font-weight: 700; min-width: 0; }
  .cs-marka img { max-height: 22px; max-width: 100%; object-fit: contain; }
  .cs-marka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-kod { display: flex; align-items: center; padding: 4px 10px; background: var(--ink); color: #fff; font-weight: 600; white-space: nowrap; }
  .card-fav:hover, .card-fav.on { color: var(--brand); }
  .card-fav .ico { width: 17px; height: 17px; }

  .card-badge {
    position: absolute; bottom: 10px; left: 10px; z-index: 3;
    background: var(--countdown); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    padding: 4px 9px; border-radius: var(--r-sm);
  }

  .card-coupon {
    background: var(--coupon-bg); color: var(--coupon-fg);
    font-size: var(--fs-xs); font-weight: 600; text-align: center;
    padding: 6px; border-top: 1px solid #fbe6d3;
  }

  /* geri sayım */
  .card-timer { display: flex; gap: 4px; justify-content: center; padding: 8px 8px 0; }
  .card-timer span {
    background: var(--countdown); color: #fff; border-radius: 5px;
    min-width: 34px; padding: 3px 0; text-align: center; line-height: 1.1;
  }
  .card-timer b { font-size: var(--fs-sm); display: block; }
  .card-timer small { font-size: 8px; opacity: .85; text-transform: uppercase; }

  .card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .card-brand { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
  .card-name {
    font-size: var(--fs-base); font-weight: 500; color: var(--text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
  }
  .card-name:hover { color: var(--brand); }

  .stars { display: flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--muted); }
  .stars .ico { width: 13px; height: 13px; color: var(--star); }

  /* kart marka + ürün kodu satırı (yıldız satırının yerinde) */
  .card-mk { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); min-height: 22px; }
  .card-mk .mk-marka { color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-mk .mk-kod { flex: none; background: var(--ink); color: #fff; font-weight: 700; padding: 3px 9px; border-radius: 5px; letter-spacing: .3px; }

  .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .price-wrap { display: flex; align-items: baseline; gap: 8px; }
  .price-old { font-size: var(--fs-xs); color: var(--muted-2); text-decoration: line-through; }
  .price {
    color: var(--green); font-weight: 800; font-size: var(--fs-md); white-space: nowrap;
    display: flex; flex-direction: column; line-height: 1.05;
  }
  .price small { font-size: 9px; font-weight: 600; color: var(--green-600); text-transform: none; }
  .btn-cart {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
    background: var(--green-050); color: var(--green);
    display: grid; place-items: center; transition: all var(--t);
  }
  .btn-cart:hover { background: var(--green); color: #fff; }
  .btn-cart .ico { width: 18px; height: 18px; }

  /* ---- Butonlar ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border-radius: var(--r-sm);
    font-weight: 700; transition: background var(--t), color var(--t), transform var(--t);
  }
  .btn:active { transform: translateY(1px); }
  .btn-cta { background: var(--cta); color: #fff; }
  .btn-cta:hover { background: var(--cta-600); color: #fff; }
  .btn-brand { background: var(--brand); color: #fff; }
  .btn-brand:hover { background: var(--brand-600); color: #fff; }
  .btn-block { width: 100%; }

  /* ---- Keşfet (SEO içerik) ---- */
  .discover { display: grid; grid-template-columns: 280px 1fr; gap: 40px; background: #fff; }
  .discover ol { counter-reset: d; display: flex; flex-direction: column; gap: 16px; }
  .discover ol li { counter-increment: d; display: flex; gap: 12px; color: var(--text); }
  .discover ol li::before {
    content: counter(d); flex: none;
    width: 26px; height: 26px; border-radius: var(--r-pill);
    background: var(--brand-050); color: var(--brand);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs);
  }
  .discover-body h3 { font-size: var(--fs-lg); margin: 22px 0 10px; }
  .discover-body h3:first-child { margin-top: 0; }
  .discover-body p { color: var(--muted); margin-bottom: 12px; line-height: 1.7; }
  .discover-body ul { display: flex; flex-direction: column; gap: 8px; }
  .discover-body ul li { position: relative; padding-left: 18px; color: var(--muted); }
  .discover-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
  .discover-body ul li b { color: var(--text); }
  @media (max-width: 767px) { .discover { grid-template-columns: 1fr; gap: 24px; } }

  /* kategori SEO metni (ürünlerin altında) */
  .cat-seo { background: var(--bg-soft); border-radius: var(--r-lg); padding: 28px 32px; }
  .cat-seo :where(h1, h2, h3) { margin: 20px 0 10px; }
  .cat-seo :where(h1, h2, h3):first-child { margin-top: 0; }
  @media (max-width: 575px) { .cat-seo { padding: 20px; } }

  /* ---- Breadcrumb ---- */
  .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--muted); padding: 16px 0; }
  .breadcrumb a:hover { color: var(--brand); }
  .breadcrumb .sep { color: var(--muted-2); }
  .breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

  /* ---- Kategori sayfa düzeni ---- */
  .catpage { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; }

  /* filtre sidebar */
  .filters { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; position: sticky; top: 72px; }
  .filters-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .filters-close { display: none; }
  .filter-group + .filter-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .filter-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
  .filter-list { display: flex; flex-direction: column; gap: 11px; }
  .filter-list a { color: var(--text); }
  .filter-list a:hover { color: var(--brand); }
  .check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); }
  .check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
  /* generateFilter('FilterLists') çıktısı */
  .filter-subtitle { font-weight: 700; color: var(--text); font-size: var(--fs-sm); margin: 6px 0; }
  .filter-item { padding: 5px 0; color: var(--text); }
  .filter-item a { color: var(--text); }
  .filter-item a:hover { color: var(--brand); }
  .filter-item input { accent-color: var(--brand); margin-right: 8px; }
  /* mini ürün kartı (UrunListLiteShow) */
  .card--mini .card-name { font-size: var(--fs-sm); min-height: 2.4em; }
  .card--mini .card-body { padding: 10px; gap: 6px; }

  /* araç çubuğu (başlık + sıralama) */
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
  .toolbar h1 { font-size: var(--fs-xl); }
  .toolbar h1 span { color: var(--muted); font-weight: 500; font-size: var(--fs-base); }
  .sort { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: #fff; font-weight: 600; color: var(--text); }
  .sort select { border: 0; background: none; font-weight: 600; color: var(--text); cursor: pointer; padding-right: 4px; }
  .sort .ico { width: 16px; height: 16px; color: var(--muted); }

  /* çekirdek listeleme kontrolleri (Sırala / adet) — Parlab stili (Fix 6) */
  .catpage select, .kategori-listeleri select, .cat-listing select {
    height: 42px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
    background: #fff; font-weight: 600; color: var(--text); cursor: pointer;
  }
  .catpage select:focus, .kategori-listeleri select:focus { outline: none; border-color: var(--brand); }
  /* boş çekirdek konteynerlerini sadeleştir */
  .kategori-listeleri > div:empty, .cat-listing > div:empty { display: none; }

  /* mobil filtre çubuğu */
  .filter-bar { display: none; }

  /* aktif filtreler */
  .active-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; }
  .af-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-050); color: var(--brand); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-sm); font-weight: 600; }
  .chip button { color: var(--brand); display: grid; place-items: center; line-height: 1; font-size: 15px; }

  /* sayfalama */
  .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
  .pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-weight: 600; color: var(--text); background: #fff; }
  .pagination a:hover { border-color: var(--brand); color: var(--brand); }
  .pagination .on { background: var(--cta); border-color: var(--cta); color: #fff; }
  .pagination .nav-btn { color: var(--muted); }

  @media (max-width: 991px) {
    .catpage { grid-template-columns: 1fr; }
    .filter-bar { display: flex; gap: 10px; margin-bottom: 16px; }
    .filter-bar button { flex: 1; height: 46px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; }
    .filter-bar .ico { width: 18px; height: 18px; }
    .filters {
      position: fixed; inset: 0 auto 0 0; z-index: 1300; width: 300px; max-width: 85vw;
      border: 0; border-radius: 0; transform: translateX(-100%); transition: transform .25s ease;
      overflow-y: auto; background: #fff;
    }
    .filters.open { transform: none; }
    .filters-head { display: flex; }
    .filters-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--bg-soft); }
    .filter-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: .2s; z-index: 1250; }
    .filter-backdrop.open { opacity: 1; visibility: visible; }
  }

  /* ---- İçerik sayfaları (bloklar) ---- */
  .pl-page { padding-block: 32px; }
  .page-title { font-size: var(--fs-2xl); margin-bottom: 20px; }
  .page-content { line-height: 1.7; color: var(--text); }
  .page-content h2, .page-content h3 { margin: 24px 0 12px; }
  .page-content p { margin-bottom: 14px; }
  .page-content a { color: var(--brand); }

  /* ---- Blog ---- */
  /* çoklu blog kartı → otomatik grid (wrapper class gerekmeden) */
  .page-content:has(.blog-card) { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
  .blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  @media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 575px) { .blog-grid { grid-template-columns: 1fr; } }
  .blog-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--t), transform var(--t); }
  .blog-card:hover { box-shadow: var(--sh); transform: translateY(-3px); }
  .blog-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-soft); }
  .blog-media img { width: 100%; height: 100%; object-fit: cover; }
  .blog-date { position: absolute; left: 10px; bottom: 10px; background: rgba(20,24,31,.82); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
  .blog-body { padding: 14px 16px 18px; }
  .blog-title { font-size: var(--fs-md); line-height: 1.4; margin-bottom: 10px; }
  .blog-title a { color: var(--ink); }
  .blog-title a:hover { color: var(--brand); }
  .blog-more { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }

  /* tek makale — ortalı, dengeli yan boşluk, taşma korumalı */
  .pl-article { max-width: 1000px; margin-inline: auto; padding: 32px 16px; }
  .article-title { font-size: var(--fs-2xl); line-height: 1.2; }
  .article-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); margin: 14px 0 20px; }
  .article-meta a { color: var(--brand); font-weight: 600; }
  .article-image { width: 100%; border-radius: var(--r-lg); margin-bottom: 24px; object-fit: cover; }
  .pl-article .article-content { overflow-wrap: break-word; }
  .pl-article .article-content img,
  .pl-article .article-content iframe,
  .pl-article .article-content video { max-width: 100%; height: auto; border-radius: var(--r); }
  .pl-article .article-content table { display: block; max-width: 100%; overflow-x: auto; }

  /* hesap / profil */
  .pl-profile { display: flex; gap: 28px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; flex-wrap: wrap; }
  .pl-profile-avatar img { width: 120px; height: 120px; border-radius: var(--r-pill); object-fit: cover; border: 1px solid var(--line); }
  .pl-profile-info h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
  .pl-profile-dl { display: grid; gap: 10px; margin-bottom: 20px; }
  .pl-profile-dl > div { display: flex; gap: 10px; }
  .pl-profile-dl dt { min-width: 90px; color: var(--muted); font-weight: 600; }
  .pl-profile-dl dd { color: var(--text); }

  /* kategori listeleme (UrunBlock) — kartlar grid, pager tam genişlik */
  .cat-title { font-size: var(--fs-xl); }
  .cat-listing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cat-listing > *:not(.card) { grid-column: 1 / -1; }
  /* çekirdek listeleme başlığı çok büyük geliyordu → küçült + boşluğu topla */
  .kategori-listeleri h1, .kategori-listeleri > h2, .cat-listing h1, .cat-listing > h2,
  .kategori-listeleri .anasBaslik, .cat-listing .anasBaslik { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); margin: 0 0 12px; line-height: 1.25; }
  .kategori-listeleri .anasBaslik h1, .kategori-listeleri .anasBaslik h2 { font-size: inherit; margin: 0; }
  .kategori-listeleri > br, .cat-listing > br { display: none; }
  .kategori-listeleri > div:empty, .cat-listing > div:empty { display: none; margin: 0; }
  .kategori-listeleri .temizle, .cat-listing .temizle { clear: both; height: 0; margin: 0; }
  @media (max-width: 1100px) { .cat-listing { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 767px) { .cat-listing { grid-template-columns: repeat(2, 1fr); } }

  /* Ürün kartları bir .grid/.slider dışına düşerse (ör. sepet "Sepetiniz ile İlgili Ürünler",
     bilgi sayfaları) — :has'e güvenmeden, satır içi akıtarak KESİN küçült + yan yana diz.
     Bu kapsam yalnız "diğer sayfalar" (theme-container) ve DefaultBlock (page-content) içindir;
     anasayfa/kategori/ürün-detay ızgaraları etkilenmez. */
  .theme-container .card,
  .page-content .card,
  .pl-cart .card {
    display: inline-flex; vertical-align: top;
    width: 200px; max-width: 200px;
    margin: 0 12px 16px 0;
  }
  @media (max-width: 575px) {
    .theme-container .card, .page-content .card, .pl-cart .card { width: 46%; max-width: 46%; margin-right: 4%; }
  }
  /* ama gerçek bir ızgara/slider içindeyse normale dön */
  .theme-container :is(.grid, .cat-listing, .product-slider, [data-slider]) .card,
  .page-content :is(.grid, .cat-listing, .product-slider, [data-slider]) .card,
  .pl-cart :is(.grid, .cat-listing, .product-slider, [data-slider]) .card {
    display: flex; width: auto; max-width: none; margin: 0;
  }

  /* ==== Sepet "Sepetiniz ile İlgili Ürünler" — çekirdek .list-view yapısı ====
     Bu ürünler .card DEĞİL; çekirdek .list-view-product-container basıyor ve
     temada stili yoktu → dev, stilsiz bloklar geliyordu. Kompakt kart ızgarası: */
  .pl-page .page-content:has(.list-view-product-container) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px; align-items: start;
  }
  .list-view-product-container {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: #fff; padding: 12px; overflow: hidden;
    transition: box-shadow var(--t), transform var(--t);
  }
  .list-view-product-container:hover { box-shadow: var(--sh); transform: translateY(-3px); }
  .list-view-left-block .imgLink { display: grid; place-items: center; aspect-ratio: 1; background: #fff; }
  .list-view-left-block img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .list-view-right-block { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .list-view-product-name { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .list-view-product-name a { color: var(--ink); }
  .list-view-product-name a:hover { color: var(--brand); }
  .list-view-content_price { margin-top: auto; }
  .list-view-content_price br { display: none; }
  .list-view-old-price { color: var(--muted); text-decoration: line-through; font-size: var(--fs-xs); margin-right: 6px; }
  .list-view-old-price:empty, .list-view-old-price[data-oldprice="0"] { display: none; }
  .list-view-product-price { color: var(--green); font-weight: 800; font-size: var(--fs-md); }
  /* :has desteklenmeyen çok eski tarayıcıda satır içi kart olarak akıt (güvence) */
  @supports not (selector(:has(*))) {
    .pl-page .page-content .list-view-product-container {
      display: inline-flex; width: 180px; vertical-align: top; margin: 0 14px 16px 0;
    }
  }

  /* Alt Kategoriler (filtre) + Üst Kategoriler (kategoriListele bloğu) link listesi */
  .filter-list li { min-width: 0; }
  .filter-list > li > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); font-weight: 600; color: var(--text); }
  .filter-list > li > a:hover { background: var(--bg-soft); color: var(--brand); }
  .filter-list ul { padding-left: 12px; margin: 4px 0 6px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
  .filter-list ul a { display: block; padding: 5px 10px; border-radius: var(--r-sm); font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
  .filter-list ul a:hover { background: var(--bg-soft); color: var(--brand); }
  .filter-list .on > a, .filter-list a.active, .filter-list a.on { color: var(--brand); font-weight: 700; }

  .icerikListele { margin-bottom: 20px; }
  .icerikListele .anasBaslik h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
  .icerikListele .temizle { clear: both; }
  .icerikListele ul { display: flex; flex-wrap: wrap; gap: 10px; }
  .icerikListele ul li a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); font-weight: 600; color: var(--text); background: #fff; transition: all var(--t); }
  .icerikListele ul li a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-sm); }

  /* ---- Ürün detay (PDP) ---- */
  .pdp { display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: 40px; align-items: start; }

  /* sabit: sayfa kaydırılınca görsel aşağı-yukarı oynamasın (sticky kaldırıldı) */
  .gallery { position: relative; }
  .gallery-main { position: relative; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--muted-2); overflow: hidden; }
  .gallery-main .card-badge { top: 14px; bottom: auto; left: 14px; }
  /* thumbnail şeridi — orange gibi: yanlarda oklar + kaydırmalı şerit */
  .gallery-thumbs-wrap { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .gallery-thumbs-wrap .thumb-nav { flex: none; width: 32px; height: 32px; }
  .gallery-thumbs-wrap .thumb-nav .ico { width: 15px; height: 15px; }
  .gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; flex: 1; min-width: 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  @media (max-width: 767px) { .gallery-thumbs-wrap .thumb-nav { display: none; } }
  .gallery-thumbs::-webkit-scrollbar { height: 6px; }
  .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
  .gallery-thumb { width: 64px; height: 64px; flex: none; scroll-snap-align: start; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted-2); background: #fff; cursor: pointer; transition: border-color var(--t); overflow: hidden; }
  .gallery-thumb.on, .gallery-thumb:hover { border-color: var(--brand); }
  .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

  /* sürüklenebilir galeri track — mutlak konumla tam doldur (büyük görsel kesilmesin) */
  .gallery-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; touch-action: pan-y; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track.dragging { cursor: grabbing; scroll-snap-type: none; }
  .gallery-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 16px; }
  .gallery-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
  .gallery-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted-2); }
  .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); box-shadow: var(--sh-sm); display: grid; place-items: center; z-index: 2; color: var(--ink); }
  .gallery-arrow:hover { background: #fff; }
  .gallery-arrow.prev { left: 10px; }
  .gallery-arrow.next { right: 10px; }
  .gallery-arrow.prev .ico { transform: rotate(90deg); }
  .gallery-arrow.next .ico { transform: rotate(-90deg); }
  @media (max-width: 767px) { .gallery-arrow { display: none; } }

  .pdp-info > * + * { margin-top: 16px; }
  .pdp-title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.25; }
  .pdp-rating { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
  .pdp-rating .stars .ico { width: 15px; height: 15px; }
  .pdp-review-jump { color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline dotted; padding: 0; }
  .pdp-review-jump:hover { color: var(--brand); }
  .pdp-seller { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
  .pdp-seller b { color: var(--text); }
  .pdp-marka-lbl { color: var(--muted); }
  .pdp-marka { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; }
  .pdp-marka:hover { border-color: var(--brand); }
  .pdp-marka-logo { height: 26px; width: auto; max-width: 90px; object-fit: contain; }
  .pdp-marka b { color: var(--ink); font-weight: 700; }
  .seller-score { background: var(--green); color: #fff; font-weight: 700; font-size: var(--fs-xs); padding: 2px 7px; border-radius: 6px; }
  .pdp-seller a { color: var(--brand); font-weight: 600; }

  /* çekirdek "telefonunuzu bırakın" kutusu + whatsapp tabelası — Parlab'da kullanılmıyor */
  #tel-birakin, .telbirak, .whatsapp_tabela { display: none !important; }

  /* ürün ön detay (kısa açıklama) */
  .pdp-ondetay { color: var(--muted); line-height: 1.7; font-size: var(--fs-base); }
  .pdp-ondetay:empty { display: none; }
  .pdp-ondetay :where(p, ul, ol) { margin-bottom: 8px; }
  .pdp-ondetay :where(ul, ol) { padding-left: 18px; list-style: revert; }

  .pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .pdp-price .now { color: var(--green); font-size: 2rem; font-weight: 800; line-height: 1; }
  .badge-discount { background: var(--green-050); color: var(--green-600); font-weight: 700; font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--r-pill); }
  .pdp-old { color: var(--muted); font-size: var(--fs-sm); }
  .pdp-old s { color: var(--muted-2); }
  .pdp-lowest { color: var(--brand); font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 6px; }

  .pdp-actions { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
  .pdp-btns { flex: 1 1 260px; display: flex; gap: 12px; }
  .pdp-btns .btn { flex: 1 1 0; height: 52px; font-size: var(--fs-md); min-width: 0; }
  .btn-fav { flex: none !important; width: 52px; height: 52px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); transition: all var(--t); }
  .btn-fav:hover, .btn-fav.on { color: var(--brand); border-color: var(--brand); }
  .btn-fav .ico { width: 22px; height: 22px; }

  /* adet artır/azalt */
  .qty { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); height: 52px; flex: none; overflow: hidden; }
  .qty-btn { width: 42px; height: 100%; font-size: 20px; font-weight: 700; color: var(--ink); display: grid; place-items: center; background: var(--bg-soft-2); }
  .qty-btn:hover { color: var(--brand); }
  .qty-input { width: 44px; height: 100%; text-align: center; border: 0; border-left: 1.5px solid var(--line-2); border-right: 1.5px solid var(--line-2); font-weight: 700; background: #fff; }
  /* hemen satın al — sepete ekle ile aynı boyda */
  .btn-buynow { background: var(--ink); color: #fff; }
  .btn-buynow:hover { background: var(--ink-2); color: #fff; }
  /* galeri marka logosu — orange gibi ~90px genişlik, sabit */
  .gallery-main .brand-logo { top: 14px; right: 14px; width: auto; height: auto; padding: 6px 9px; }
  .gallery-main .brand-logo img { width: 90px; max-width: 90px; max-height: 48px; }
  /* 4'lü ürün bilgi tablosu */
  .pdp-table--4 { grid-template-columns: repeat(4, 1fr); }

  .info-box { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
  .info-box .row { display: flex; align-items: center; gap: 10px; }
  .info-box .row + .row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .badge-fast { margin-left: auto; background: var(--brand-050); color: var(--brand); font-weight: 700; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); }

  .order-box { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .order-box summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
  .order-box summary::-webkit-details-marker { display: none; }
  .order-box .ic { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--green-050); color: var(--green); display: grid; place-items: center; }
  .order-box-title { display: flex; flex-direction: column; }
  .order-box small { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
  .order-box-title b { font-size: var(--fs-md); color: var(--ink); }
  .order-box-chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
  .order-box[open] .order-box-chev { transform: rotate(180deg); }
  .order-box-body { padding: 0 16px 14px 74px; }
  .order-num { font-size: var(--fs-lg); font-weight: 800; color: var(--green); display: block; }
  .order-box-body p { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

  .pdp-links { display: flex; flex-direction: column; gap: 8px; }
  .pdp-links a { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--fs-sm); }
  .pdp-links a:hover { color: var(--brand); }
  .pdp-links .ico { width: 16px; height: 16px; color: var(--brand); }

  .pdp-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .pdp-table div { background: #fff; padding: 12px; }
  .pdp-table small { color: var(--muted); font-size: var(--fs-xs); display: block; }
  .pdp-table b { font-size: var(--fs-base); }
  .pdp-table .pdp-havale { color: var(--green); font-weight: 800; }
  /* stok durumu — dikkat çekici yeşil rozet + yanıp sönen nokta */
  .pdp-table .pdp-stok { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 800; }
  .pdp-table .pdp-stok .stok-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(18,183,106,.5); animation: stokPulse 1.6s ease-out infinite; flex: none; }
  @keyframes stokPulse { 0% { box-shadow: 0 0 0 0 rgba(18,183,106,.5); } 70% { box-shadow: 0 0 0 7px rgba(18,183,106,0); } 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); } }
  @media (prefers-reduced-motion: reduce) { .pdp-table .pdp-stok .stok-dot { animation: none; } }

  .coupon-box { display: flex; align-items: center; gap: 14px; background: var(--coupon-bg); border: 1px dashed #f2c79e; border-radius: var(--r); padding: 14px 16px; }
  .coupon-box .amt { font-size: var(--fs-xl); font-weight: 800; color: var(--coupon-fg); }
  .coupon-box small { color: var(--coupon-fg); }
  .coupon-box .btn { margin-left: auto; height: 38px; }

  /* ---- Ürün detay SSS (açılır) ---- */
  .pdp-faq { margin-top: 40px; }
  .pdp-faq-title { font-size: var(--fs-xl); margin-bottom: 16px; }
  .faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; background: #fff; }
  .faq-item summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-chev { margin-left: auto; flex: none; color: var(--muted); transition: transform .2s; }
  .faq-item[open] .faq-chev { transform: rotate(180deg); }
  .faq-item[open] summary { color: var(--brand); }
  .faq-body { padding: 0 18px 16px; color: var(--muted); line-height: 1.7; }

  /* sekmeler */
  .tabs { margin-top: 48px; }
  .tab-nav { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav button { padding: 14px 2px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .tab-nav button.on { color: var(--ink); border-color: var(--cta); }
  .tab-panel { padding: 24px 0; color: var(--muted); line-height: 1.75; }
  .tab-panel[hidden] { display: none; }
  .tab-panel b { color: var(--text); }
  /* ürün açıklaması — çerçeve içinde */
  #tab-desc { margin-top: 20px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); }
  #tab-desc img { max-width: 100%; height: auto; border-radius: var(--r); }
  #tab-desc .etikets { padding-top: 16px; border-top: 1px solid var(--line); }

  @media (max-width: 900px) {
    .pdp { grid-template-columns: 1fr; gap: 24px; }
    .gallery { position: static; }
    .pdp-table { grid-template-columns: 1fr 1fr; }
  }

  /* ---- Footer ---- */
  .footer { margin-top: 56px; background: var(--ink); color: #fff; }
  .footer-main { padding: 56px 0 40px; }
  .footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 32px; }
  .footer h4 { color: #fff; font-size: var(--fs-md); margin-bottom: 20px; position: relative; padding-left: 12px; }
  .footer h4::before { content: ""; position: absolute; left: 0; top: 2px; width: 3px; height: 15px; background: var(--brand); border-radius: 2px; }
  .footer-links { display: flex; flex-direction: column; gap: 12px; }
  .footer-links a { color: #b7bcc7; font-size: var(--fs-base); }
  .footer-links a:hover { color: #fff; }
  .footer-news p { color: #b7bcc7; margin-bottom: 16px; line-height: 1.6; }
  .footer-news form { display: flex; background: #fff; border-radius: var(--r-sm); overflow: hidden; }
  .footer-news input { flex: 1; border: 0; padding: 0 14px; height: 44px; background: #fff; color: var(--ink); }
  .footer-news input:focus { outline: none; }
  .footer-news button { background: var(--brand); color: #fff; padding: 0 18px; font-weight: 700; white-space: nowrap; }
  .footer-news button:hover { background: var(--brand-600); }
  .socials { display: flex; gap: 12px; margin-top: 22px; }
  .socials a { width: 38px; height: 38px; border-radius: var(--r-pill); background: #2b3245; display: grid; place-items: center; color: #fff; transition: background var(--t); }
  .socials a:hover { background: var(--brand); }
  .socials .ico { width: 17px; height: 17px; }

  /* footer alt kart */
  .footer-band { padding: 0 0 32px; }
  .footer-band-in { background: #171c29; border-radius: var(--r-lg); padding: 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; align-items: center; }
  .footer-band .logo { color: #fff; }
  .footer-band p { color: #9aa0ad; font-size: var(--fs-sm); margin-top: 10px; line-height: 1.6; }
  .fb-phone { display: flex; align-items: center; gap: 14px; }
  .fb-phone .ic { width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--brand); display: grid; place-items: center; color: #fff; }
  .fb-phone b { font-size: var(--fs-lg); color: #fff; display: block; }
  .fb-phone small { color: #9aa0ad; }
  .fb-apps { display: flex; flex-direction: column; gap: 10px; }
  .fb-app { display: flex; align-items: center; gap: 10px; border: 1px solid #333a4d; border-radius: var(--r-sm); padding: 8px 14px; color: #fff; }
  .fb-pay { display: flex; gap: 8px; align-items: center; }
  .fb-pay span { background: #fff; color: var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 700; }

  .copyright { border-top: 1px solid #2b3145; }
  .copyright .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; font-size: var(--fs-sm); color: #9aa0ad; }
  .copyright a { color: #9aa0ad; }
  .copyright a:hover { color: #fff; }

  /* ---- Footer mobil (bozuk düzeni düzelt, tam genişlik) ---- */
  @media (max-width: 991px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-news { grid-column: 1 / -1; }
    .footer-band-in { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .footer-band .fb-phone, .footer-band .fb-pay { justify-content: center; }
  }
  @media (max-width: 575px) {
    .footer-main { padding: 40px 0 32px; }
    .footer-cols { grid-template-columns: 1fr; gap: 26px; }
    .footer-band-in { padding: 20px; }
    .fb-pay { flex-wrap: wrap; }
    .copyright .container { flex-direction: column; text-align: center; gap: 6px; }
  }

  /* ---- Blog/Makaleler listeleme sayfası — kartlar tam genişlik ızgara ---- */
  .theme-container:has(.blog-card) > :where(div, section, ul):has(> .blog-card),
  .theme-container:where(:has(> .blog-card)) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
  }
  .theme-container:has(.blog-card) > :where(div, section, ul):has(> .blog-card) > :not(.blog-card) { grid-column: 1 / -1; }

  /* ---- WhatsApp float ---- */
  .wa-float {
    position: fixed; right: 20px; bottom: 24px; z-index: 999;
    width: 56px; height: 56px; border-radius: var(--r-pill);
    background: #25D366; color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 24px rgba(37,211,102,.35);
  }
  .wa-float .ico { width: 30px; height: 30px; }

  /* ---- Mobil alt menü (bottom-nav) ---- */
  .bottom-nav { display: none; }
  .pdp-sticky { display: none; }
  @media (max-width: 991px) {
    body { padding-bottom: 66px; }
    .bottom-nav {
      position: fixed; inset: auto 0 0 0; z-index: 90;
      height: 64px; background: #fff; border-top: 1px solid var(--line);
      display: flex; box-shadow: 0 -4px 16px rgba(0,0,0,.05);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .bottom-nav a {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600;
    }
    .bottom-nav a .ico { width: 22px; height: 22px; }
    .bottom-nav a.on, .bottom-nav a:active { color: var(--brand); }
    .bottom-nav .bn-cart { position: relative; }
    .bottom-nav .bn-badge {
      position: absolute; top: 7px; right: 24px;
      min-width: 16px; height: 16px; padding: 0 4px;
      background: var(--brand); color: #fff; font-size: 10px; font-weight: 700;
      border-radius: var(--r-pill); display: grid; place-items: center;
    }
    .wa-float { bottom: 80px; right: 16px; }

    /* Mobil sabit "Sepete Ekle" barı — alt navigasyonun hemen üstünde */
    .pdp-sticky {
      position: fixed; left: 0; right: 0;
      bottom: calc(64px + env(safe-area-inset-bottom));
      z-index: 88;
      display: flex; align-items: stretch; gap: 8px;
      padding: 8px 12px;
      background: #fff; border-top: 1px solid var(--line);
      box-shadow: 0 -4px 16px rgba(0,0,0,.08);
      transform: translateY(130%); transition: transform .28s ease;
    }
    .pdp-sticky.show { transform: translateY(0); }
    .pdp-sticky .btn { flex: 1; height: 46px; font-size: var(--fs-sm); padding: 0 8px; }
    .pdp-sticky-qty {
      display: flex; align-items: center; flex: none;
      border: 1.5px solid var(--line-2); border-radius: var(--r-sm); height: 46px; overflow: hidden;
    }
    .pdp-sticky-q { width: 34px; height: 100%; font-size: 18px; font-weight: 700; color: var(--ink); display: grid; place-items: center; background: var(--bg-soft-2); }
    .pdp-sticky-adet { min-width: 30px; text-align: center; font-weight: 700; font-size: var(--fs-sm); }
    /* bar açıkken WhatsApp butonunu yukarı it (çakışmasın) */
    body.pdp-sticky-on .wa-float { bottom: 138px; }
  }
}

/* ------------------------------------------------------------- UTILITIES -- */
@layer utilities {
  .mt-0 { margin-top: 0 !important; }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (max-width: 991px) {
    .hide-mobile { display: none !important; }
  }
  @media (min-width: 992px) {
    .show-mobile { display: none !important; }
  }
}