:root{
  /* ⚠️ TEK RENK DEĞİL, TEK AİLE (Cem, 31 Tem: "alanlar birbiriyle uyumlu olsun").
     Eski --bg #f4f4f4 NÖTR-SOĞUK griydi; marka aksanı taupe #c2b7ac ise SICAK.
     Yan yana gelince bantlar birbirine yabancı duruyordu. Aşağıdaki dört zemin
     de taupe'un renk ailesinden, sadece açıklıkları farklı:
        --krem  en açık sıcak  (hero)
        --kagit kırık beyaz    (.section.alt bantları)
        --bg    sıcak açık gri (temel bant + sayfa zemini)
        --kum   açık taupe     (Kütüphane bandı — eski tam taupe çok baskındı)
     Kartlar KASITLI olarak saf --white kalır ki sıcak bantların üstünde ayrışsın. */
  --bg:#f3efe9; --white:#fff; --krem:#faf7f2; --kagit:#fdfcfa; --kum:#e6dcd2;
  --ink:#262626; --ink-soft:#2b2c2d;
  --muted:rgba(43,44,45,.72); --dark:#1c2228; --dark-2:#323841;
  --taupe:#c2b7ac; --btn:#b7aca2; --btn-hover:#a89c90; --btn-ink:#262626;
  --line:#e8e3dc; --line-dark:rgba(255,255,255,.14);
  --radius:7px; --wrap:1500px; --pad:5rem;
  --font:"Outfit",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink-soft);font-family:var(--font);
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:400;color:var(--ink);letter-spacing:.2px;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
button{font-family:inherit}

/* ---------- announcement bar ---------- */
.topbar{background:var(--dark);color:#fff;text-align:center;font-size:.82rem;
  letter-spacing:.4px;padding:11px 16px;font-weight:300}

/* ---------- header ---------- */
.site-header{background:var(--dark);color:#fff;position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line-dark)}
.header-inner{display:flex;align-items:center;height:92px;gap:22px}
.header-left{display:flex;align-items:center;gap:18px}
.icon-btn{background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:inline-flex;
  align-items:center;justify-content:center;opacity:.92;transition:opacity .15s}
.icon-btn:hover{opacity:1}
.icon-btn svg{width:22px;height:22px;stroke:#fff;fill:none}
.header-logo{display:block;flex:0 0 auto}
.header-logo img{height:52px;width:auto}
/* ⚠️ margin-left:auto KOYMA — .main-nav'ın çift auto marjıyla yarışır, üç auto
   arasında bölüşülen boş alan menüyü sola kaydırır (Cem: "boşluklar ortalı değil"). */
.header-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* ---------- masaüstü yatay menü (açılır alt menülü) ---------- */
.menu-burger{display:none}
/* menü ortada dursun (logo solda, ikonlar sağda kalır) */
.main-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 auto}
.mn-link{display:inline-flex;align-items:center;gap:6px;color:#fff;background:none;border:none;
  cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:300;letter-spacing:.2px;
  padding:10px 12px;border-radius:6px;transition:color .15s,background .15s;white-space:nowrap}
.mn-link:hover,.mn-item:hover > .mn-link{color:var(--taupe)}
.mn-item{position:relative}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.8;margin-top:2px}
.mn-drop{position:absolute;top:100%;left:0;min-width:250px;background:var(--white);
  border-radius:var(--radius);box-shadow:0 18px 44px -18px rgba(0,0,0,.35);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s ease;z-index:90}
.mn-item:hover > .mn-drop,.mn-item.open > .mn-drop{opacity:1;visibility:visible;transform:translateY(0)}
.mn-drop a{display:block;padding:10px 20px;color:var(--ink);font-size:.94rem;font-weight:300;
  white-space:nowrap;transition:background .12s,color .12s}
.mn-drop a:hover{background:var(--bg);color:var(--btn)}
.mn-sub{color:var(--muted);font-size:.82rem}
/* Portal — menüde YAZILI rozet (sadece ikon fark edilmiyordu) */
.mn-portal{display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  color:#fff;font-size:.9rem;font-weight:300;letter-spacing:.2px;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s}
.mn-portal svg{width:17px;height:17px;stroke:currentColor;fill:none}
/* Lumba maskotu (Cem, 2 Ağu). 🔴 `stroke:currentColor;fill:none` ÜSTÜNE YAZILMALI:
   üstteki kural tüm svg'lere uygulanıyor, maskot da onu alsaydı gradyanlar
   kaybolur, karakter beyaz çizgi yumağına dönerdi. Boy 17→22: dolu bir karakter
   çizgi ikondan daha küçük görünür, aynı ölçüde ezik durur. */
.mn-portal .mn-lumba{width:22px;height:23px;stroke:none;fill:none;flex:0 0 auto;
  margin:-4px 0 -4px -2px}
.mn-portal:hover .mn-lumba{transform:translateY(-1px)}
.mn-lumba{transition:transform .2s ease}
.mn-portal .ext{font-size:.78rem;opacity:.75}
.mn-portal:hover{background:var(--taupe);border-color:var(--taupe);color:var(--dark)}

.cart-ind{position:relative}
.cart-count{position:absolute;top:-4px;right:-6px;background:var(--taupe);color:var(--dark);
  border-radius:999px;min-width:18px;height:18px;font-size:.68rem;font-weight:600;
  display:grid;place-items:center;padding:0 4px}

/* ---------- arama paneli (header'dan inen koyu bar) ---------- */
.search-panel{position:absolute;left:0;right:0;top:0;background:var(--dark);
  height:100%;display:flex;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:70}
.search-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.search-panel-inner{display:flex;align-items:center;gap:14px;width:100%}
.sp-field{flex:1;position:relative;display:flex;align-items:center}
.sp-field input{width:100%;height:46px;border-radius:26px;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;font-family:inherit;font-size:1rem;padding:0 50px 0 20px;
  transition:border-color .18s,box-shadow .18s}
.sp-field input::placeholder{color:rgba(255,255,255,.6)}
.sp-field input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.sp-go{position:absolute;right:6px;width:38px;height:38px;border:none;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;transition:background .15s}
.sp-go:hover{background:rgba(255,255,255,.12)}
.sp-go svg{width:20px;height:20px;stroke:#fff;fill:none}
.sp-close{background:none;border:none;color:#fff;font-size:1.35rem;cursor:pointer;
  width:42px;height:42px;border-radius:50%;transition:background .15s,transform .15s}
.sp-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}

/* ---------- ödeme yöntemleri + telif satırı ---------- */
.pay-methods{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pm-label{font-size:.78rem;color:rgba(255,255,255,.5)}
.pm-icons{display:flex;gap:6px}
.pm{font-size:.62rem;letter-spacing:.5px;padding:4px 7px;border-radius:4px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.copy-line small{font-size:.8rem;color:rgba(255,255,255,.55)}
.copy-line a{display:inline;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.3);padding:0}
.copy-line a:hover{color:#fff;border-color:#fff}

/* ---------- bölüm giriş animasyonu (canlıdaki gibi yumuşak beliriş) ---------- */
/* SADECE JS varken gizle — JS yoksa/hata verirse içerik normal görünür (kritik) */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- drawer menu ---------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;
  transition:.25s;z-index:70}
.drawer-overlay.open{opacity:1;visibility:visible}
/* ⚠️ SAĞDAN açılır: hamburger sağ üstte (Cem, 31 Tem), soldan gelen panel ters duruyordu */
.drawer{position:fixed;top:0;right:0;height:100%;width:340px;max-width:86vw;background:var(--white);
  transform:translateX(100%);transition:transform .28s ease;z-index:80;display:flex;flex-direction:column;padding:22px}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-head .x{font-size:1.6rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--ink)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink);font-weight:300}
.drawer nav a:hover{color:var(--btn)}
.drawer nav .grp{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  padding:20px 4px 6px;border:none;font-weight:500}

/* ---------- hero ---------- */
.hero{background:var(--kagit)}
.hero a{display:block}
.hero img{width:100%;height:auto;display:block}

/* ---------- İNTERAKTİF HERO (sabit görselin yerine) ---------- */
.hero-x{background:var(--krem);border-bottom:1px solid var(--line);
  padding:3.4rem 0 3.6rem}
.hx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hx-left .brand-kicker{margin-bottom:1rem}
.hx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.6rem}
.hx-tab{font-family:inherit;font-size:.9rem;font-weight:300;cursor:pointer;white-space:nowrap;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);transition:background .18s,border-color .18s,color .18s,transform .18s}
.hx-tab:hover{border-color:var(--btn);color:var(--ink)}
.hx-tab.active{background:var(--dark);border-color:var(--dark);color:#fff}
.hx-tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(183,172,162,.55)}

/* Paneller üst üste DEĞİL; yalnız etkin olan akışta durur → yükseklik zıplaması
   olur ama içerik boyları yakın tutulduğu için göze batmıyor. */
.hx-panel,.hx-cards{display:none}
.hx-panel.active{display:block;animation:hxIn .32s cubic-bezier(.16,1,.3,1)}
.hx-cards.active{display:grid;animation:hxIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes hxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hx-title{font-size:2.5rem;font-weight:400;line-height:1.18;letter-spacing:.2px;margin:0 0 .9rem}
.hx-desc{color:var(--ink-soft);font-weight:300;line-height:1.8;margin:0 0 1.7rem;max-width:46ch}
.hx-cta{display:flex;gap:10px;flex-wrap:wrap}

.hx-cards{grid-template-columns:repeat(3,1fr);gap:14px}
.hx-card{display:flex;flex-direction:column;gap:.45rem;color:var(--ink);
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.hx-card:hover{transform:translateY(-4px)}
.hx-img{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--bg);
  border:1px solid var(--line)}
.hx-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hx-card:hover .hx-img img{transform:scale(1.05)}
.hx-name{font-size:.9rem;font-weight:400;line-height:1.35}
.hx-card:hover .hx-name{text-decoration:underline;text-underline-offset:3px}
.hx-price{font-size:.86rem;color:var(--muted)}

@media(max-width:980px){
  .hx-grid{grid-template-columns:1fr;gap:28px}
  .hx-title{font-size:1.9rem}
  .hero-x{padding:2.4rem 0 2.6rem}
}
@media(max-width:560px){
  .hx-cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .hx-name,.hx-price{font-size:.78rem}
  .hx-tab{font-size:.83rem;padding:8px 12px}
}

/* ---------- sections ---------- */
/* ⚠️ SİMETRİK dolgu: üst 2.4 / alt 3.4 iken renkli bantlar dengesiz görünüyordu
   (Cem, 31 Tem: "bölümlerin arka planlarını orantılı hale getir"). Her bant
   aynı nefes payını alır; bölüme özel override EKLEME. */
.section{padding:3.2rem 0}
.section.alt{background:var(--kagit)}
.section.taupe{background:var(--taupe)}
.section.dark{background:var(--dark)}          /* Kategorilerimize Göz Atın */
.section.beige{background:var(--kum)}          /* Müzik Kütüphanesi */
.section-head{text-align:center;margin-bottom:2.6rem}
/* canlıda başlıklar SOLA hizalı; büyük 42px, küçük 25px */
.section-title{font-size:2.1rem;font-weight:400;letter-spacing:.4px;text-align:left;margin-bottom:1.8rem}
.section-title.big{font-size:2.6rem}
.section-title.sm{font-size:1.58rem}
.section-title.center{text-align:center}
.section-title.on-dark{color:#fff}
.section-sub{color:var(--muted);margin-top:.5rem}
.section-cta{text-align:center;margin-top:2.4rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--btn);color:var(--btn-ink);
  border:1px solid transparent;cursor:pointer;
  padding:15px 34px;border-radius:var(--radius);font-size:.98rem;font-weight:400;letter-spacing:.3px;
  transition:background .18s ease,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(38,38,38,.55)}
.btn:active{transform:translateY(0);box-shadow:0 4px 10px -8px rgba(38,38,38,.5)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(183,172,162,.55)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.full{width:100%;text-align:center}
.btn.dark{background:var(--dark);color:#fff}
.btn.dark:hover{background:var(--dark-2)}

/* ---------- ürün ızgarası + kart (canlı lumbadore.com ile birebir) ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 24px}
.grid.grid-5{grid-template-columns:repeat(5,1fr);gap:26px 14px}   /* canlıdaki 5 kolon */
/* Ürün sayısı kolon sayısından AZSA satır ortalansın (Cem, 2 Ağu).
   `repeat(5,1fr)` sabit 5 iz üretiyor; 4 ürün ilk 4 ize oturup sağda boş bir iz
   bırakıyordu → satır sola yaslı görünüyordu. `auto-fit` + `justify-content:center`
   yalnız DOLU izleri üretir ve ortalar. Kart genişliği 5'liyken neyse o kalsın
   diye üst sınır 1200px/5 ≈ 224px. Şablon, ürün sayısı 5'ten azsa bu sınıfı ekler. */
.grid.grid-5.grid-orta{grid-template-columns:repeat(auto-fit,minmax(0,224px));
  justify-content:center}
/* ============================================================================
   ÜRÜN ŞERİDİ — ana sayfa "Öne Çıkanlar" / "Yeni Çıkanlar" (Cem, 9 Ağu)
   "6'lı yapalım ama SAYFA TAŞMASIN, sağa kaydır devamını gör olsun."
   Izgara yerine tek satır + kendi içinde yatay kaydırma.
   🔑 Kritik: kaydırma ŞERİTTE olmalı, sayfada değil. `overflow-x:auto` burada;
   `.wrap` genişliğini aşan kart dışarı taşmaz, şeridin içinde kalır.
   `scroll-snap` ile kartlar hizada durur — yarım kart bırakıp bırakmaması
   kullanıcının parmağına kalmaz.
   ⚠️ `.pcard` yüksekliği `height:100%` — grid'de satır yüksekliği veriyordu,
   flex şeritte vermiyor; `align-items:stretch` (flex varsayılanı) kartları
   yine eşitliyor, o yüzden kart yüksekliği bozulmuyor. */
.urun-serit{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  /* Kart gölgesi/hover'daki -5px kalkma ÜSTTEN KIRPILMASIN diye dikey pay */
  padding:6px 0 18px;margin:0;
  scrollbar-width:thin;scroll-padding-left:0}
/* 🔑 GÖZ UCU (--goz): kartlar şeridi TAM doldurursa kaydırılabildiği hiçbir
   yerden anlaşılmaz — ölçtüm, 1440px'te "Devamını gör"den görünen 0px'ti.
   Kartları biraz daraltıp bir sonrakinden bir dilim bırakıyoruz; kullanıcı
   yarım kalan şeyi görünce kaydırıyor. Ok/nokta göstergesi eklemekten daha
   güvenilir ve JS gerektirmiyor. */
.urun-serit{--goz:52px;--ara:14px}
.urun-serit > *{flex:0 0 calc((100% - 5 * var(--ara) - var(--goz)) / 6);
  scroll-snap-align:start;min-width:0}
.urun-serit::-webkit-scrollbar{height:6px}
.urun-serit::-webkit-scrollbar-thumb{background:var(--kum);border-radius:99px}
.urun-serit::-webkit-scrollbar-track{background:transparent}
/* Klavye ile gezenler için: şerit odaklanabilir (tabindex=0) → görünür halka */
.urun-serit:focus-visible{outline:2px solid var(--btn);outline-offset:3px}

/* "Devamını gör" — şeridin SONUNDA bir kart yerine geçer. Sonda olması önemli:
   kullanıcı 6 ürünü kaydırıp bitirdiğinde doğal olarak buraya varır. */
.serit-devam{flex:0 0 clamp(128px,14vw,170px);scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--kagit);border:1px dashed var(--kum);border-radius:8px;
  color:var(--ink);font-size:.95rem;text-align:center;padding:16px;
  transition:background .2s,border-color .2s}
.serit-devam:hover{background:var(--krem);border-color:var(--btn)}
.serit-devam .ok{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  background:var(--kum);font-size:1.1rem;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.serit-devam:hover .ok{transform:translateX(4px)}

/* Dar ekranlarda 6 kart sığmaz — kart genişliği sabitlenir, kaydırma zaten var.
   Kartın okunur kalması kaç tane göründüğünden önemli. */
@media(max-width:1100px){ .urun-serit > *{flex:0 0 calc((100% - 3 * var(--ara) - var(--goz)) / 4)} }
@media(max-width:820px){  .urun-serit > *{flex:0 0 calc((100% - 2 * var(--ara) - var(--goz)) / 3)} }
@media(max-width:620px){  .urun-serit > *{flex:0 0 calc((100% - var(--ara) - 44px) / 2)} }
/* Çok dar ekranda 2 kart okunmaz kadar küçülür → 1 kart + göz ucu */
@media(max-width:420px){  .urun-serit > *{flex:0 0 78%} }

.card-wrapper{display:block}
.pcard{background:var(--white);border-radius:8px;overflow:hidden;height:100%;
  display:flex;flex-direction:column;border:1px solid rgba(38,38,38,.07);
  transition:box-shadow .25s ease,transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.pcard:hover{box-shadow:0 18px 40px -24px rgba(0,0,0,.38);transform:translateY(-4px);
  border-color:rgba(38,38,38,.12)}
.pcard-media{position:relative;display:block;aspect-ratio:1/1;background:var(--kum);
  display:grid;place-items:center;overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-media .ph{font-size:2.6rem;opacity:.4}

/* Hover'da İKİNCİ görsel (Cem, 2 Ağu) — ürüne girmeden içeriği görmek için.
   `.has-alt` sınıfı YALNIZ 2. görseli olan kartta var (bkz. _macros.html):
   tek görselli kartta bu kurallar hiç devreye girmez, davranış eskisi gibi.
   Alt görsel üst üste bindirilir; opacity ile geçilir — `display:none`
   kullanılsaydı geçiş animasyonu olmaz, ani zıplardı. */
/* ⚠️ Tetikleyici `.pcard:hover` — `.pcard-media:hover` DEĞİL. Bu dosyadaki
   çalışan kalıp bu (bkz. bir üstteki scale kuralı); kartın yazı/fiyat alanına
   gelince de görsel değişir, kullanıcı için daha bağışlayıcı. */
.pcard-media.has-alt .pc-img-alt{position:absolute;inset:0;opacity:0;
  transition:opacity .35s ease,transform .55s ease;pointer-events:none}
.pcard-media.has-alt .pc-img{transition:opacity .35s ease,transform .55s ease}
.pcard:hover .pcard-media.has-alt .pc-img-alt,
.pcard:focus-within .pcard-media.has-alt .pc-img-alt{opacity:1}
.pcard:hover .pcard-media.has-alt .pc-img,
.pcard:focus-within .pcard-media.has-alt .pc-img{opacity:0}
/* 🔴 Dokunmatikte hover YOKTUR — parmakla gezen kullanıcıda ikinci görsel
   takılı kalabilirdi. Orada tamamen devre dışı: ilk görsel her zaman görünür. */
@media (hover:none){
  .pcard-media.has-alt .pc-img-alt{display:none}
  .pcard:hover .pcard-media.has-alt .pc-img{opacity:1}
}
/* rozet: canlıdaki gibi SOL ALT */
.pcard-badges{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
.pbadge{font-size:.72rem;font-weight:400;padding:5px 12px;border-radius:999px;letter-spacing:.3px}
.pbadge.sale{background:var(--dark);color:#fff}
.pbadge.oos{background:var(--taupe);color:var(--ink)}
.pcard-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
/* Kart başlığı iki katmanlı (Cem, 9 Ağu). Kısa ad OKUNUR ağırlıkta ve en fazla
   2 satır; SEO açıklaması altında sönük, en fazla 2 satır. Böylece her kart
   aynı yükseklikte metin taşıyor ve göz önce görsele, sonra ada, en son
   açıklamaya gidiyor — eskiden 4 satırlık tek blok hepsini bastırıyordu. */
.pcard-title{font-size:1rem;font-weight:500;line-height:1.35;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-title a{color:inherit}
.pcard-title a:hover{color:var(--btn)}
.pcard-alt{margin:-4px 0 0;font-size:.82rem;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Dar ekranda açıklama tek satır — mobilde kart zaten kısa, iki satır
   fiyatı ekranın dışına itiyordu. */
@media(max-width:620px){ .pcard-alt{-webkit-line-clamp:1} }
.pcard-price{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.pcard-price .old{color:var(--muted);font-size:.9rem;text-decoration:line-through}
.pcard-price .now{color:var(--ink);font-weight:500;font-size:1.06rem}
.pcard-price .now.sale{color:var(--ink)}

/* adet kutusu = sepete ekleme (canlıdaki quick-add davranışı) */
.qadd{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:var(--radius);height:46px;margin-top:4px;
  overflow:hidden;transition:border-color .2s,background .2s,box-shadow .2s}
.qadd:hover{border-color:var(--btn);box-shadow:0 4px 12px -8px rgba(38,38,38,.4)}
.qadd.has-items{border-color:var(--btn);background:#fbfaf9}
.q-btn{flex:0 0 46px;height:100%;background:none;border:none;cursor:pointer;
  font-size:1.2rem;color:var(--ink);line-height:1;transition:color .15s,background .15s}
.q-btn:hover:not(:disabled){color:var(--btn-ink);background:rgba(183,172,162,.22)}
.q-btn:active:not(:disabled){background:rgba(183,172,162,.4)}
.q-btn:focus-visible{outline:none;background:rgba(183,172,162,.3)}
.q-btn:disabled{opacity:.28;cursor:default}
.q-val{transition:transform .18s cubic-bezier(.16,1,.3,1)}
.qadd.has-items .q-val{font-weight:500}
.q-val{flex:1;text-align:center;font-size:1rem;color:var(--ink)}
.qadd-out{height:46px;margin-top:4px;width:100%;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);color:#797572;
  font-size:.94rem;font-family:inherit;cursor:not-allowed}

/* ---------- marka + portal tanıtım bölümleri (kurumsal duruş) ---------- */
.brand-inner,.portal-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.brand-kicker{display:inline-block;font-size:.74rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--btn-hover);margin-bottom:.9rem}
.brand-sec .section-title,.portal-sec .section-title{margin-bottom:1.1rem;font-size:2.05rem;line-height:1.25}
.brand-text p,.portal-text p{color:var(--ink-soft);font-weight:300;line-height:1.8;margin:0 0 1.5rem}
.brand-media,.portal-media{border-radius:8px;overflow:hidden;background:var(--bg)}
.brand-media img,.portal-media img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block}
.brand-stats{display:flex;gap:38px;flex-wrap:wrap;margin:0 0 1.8rem;padding:1.2rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-stats div{display:flex;flex-direction:column}
.brand-stats strong{font-size:1.7rem;font-weight:500;color:var(--ink);line-height:1.1}
.brand-stats span{font-size:.84rem;color:var(--muted);margin-top:.25rem}
.portal-list{list-style:none;padding:0;margin:0 0 1.7rem;display:flex;flex-direction:column;gap:.6rem}
.portal-list li{position:relative;padding-left:1.6rem;color:var(--ink-soft);font-weight:300}
.portal-list li::before{content:"♪";position:absolute;left:0;color:var(--btn-hover)}
@media(max-width:900px){
  .brand-inner,.portal-inner{grid-template-columns:1fr;gap:26px}
  .portal-media{order:2}
  .portal-text{order:1}
  .brand-sec .section-title,.portal-sec .section-title{font-size:1.6rem}
  .brand-stats{gap:24px}
}

/* ---------- Lumbadore Vizyonu — ufak, ortalı açıklama bandı ---------- */
.vision-inner{max-width:780px;margin:0 auto;text-align:center}
.vision-title{font-size:1.75rem;font-weight:400;line-height:1.35;margin:.2rem 0 1rem;letter-spacing:.2px}
.vision-inner p{color:var(--ink-soft);font-weight:300;line-height:1.8;margin:0 0 1.7rem}
.vision-stats{display:flex;justify-content:center;gap:52px;flex-wrap:wrap;margin:0 0 1.8rem;
  padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vision-stats div{display:flex;flex-direction:column}
.vision-stats strong{font-size:1.7rem;font-weight:500;color:var(--ink);line-height:1.1}
.vision-stats span{font-size:.84rem;color:var(--muted);margin-top:.25rem}
@media(max-width:720px){
  .vision-title{font-size:1.4rem}
  .vision-stats{gap:28px}
}

/* ---------- kategori kutuları (koyu bölüm içinde beyaz kartlar) ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}  /* 6 kategori + Kökten Sese + Portal */
.cat-tile{display:block;background:var(--white);border-radius:8px;overflow:hidden;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.cat-tile:hover{transform:translateY(-5px);box-shadow:0 18px 36px -22px rgba(0,0,0,.6)}
.cat-tile .arw{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.cat-tile:hover .arw{transform:translateX(4px)}
.cat-tile .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--bg)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile .lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 14px 16px;font-size:1rem;font-weight:400;color:var(--ink);line-height:1.3}
.cat-tile .arw{color:var(--btn);flex:0 0 auto}
/* Portal kutusu: ürün kategorisi DEĞİL, dış bağlantı → taupe zemin + ikon */
/* 🔴 9 Ağu (Cem): "portal içeriğinin önündeki animasyon arkadaki krem renkle
   kayboluyor, kırık beyaz yapalım". Doğru teşhis: zemin --taupe (#c2b7ac,
   sıcak bej) idi, maskot ise turuncu (#F7B45C→#D97B0C) — ikisi de aynı sıcak
   aralıkta, kontrast neredeyse yok. Kırık beyaz (--kagit #fdfcfa) turuncuyu
   ayırıyor. Hover'da da açık kalmalı, yoksa üstüne gelince yine kayboluyor. */
.cat-portal .thumb{display:grid;place-items:center;background:var(--kagit)}
.cat-portal .thumb svg{width:44%;height:44%;stroke:var(--dark);fill:none;stroke-width:1.4}
/* Lumba maskotu (Cem, 3 Ağu). 🔴 Üstteki kural TÜM svg'lere `stroke`/`fill:none`
   dayatıyor — maskot da alsaydı gradyanlar kaybolur, karakter beyaz çizgiye
   dönerdi. Bu yüzden AÇIKÇA sıfırlanıyor. */
.cat-portal .thumb svg.cat-lumba{width:64%;height:64%;stroke:none;fill:none;stroke-width:0}
/* Süzülme + el sallama — portaldaki maskotun aynısı. */
.cat-lumba-g{animation:lumba-suz 3.2s ease-in-out infinite}
.cat-lumba-kol{transform-origin:26px 92px;animation:lumba-salla 2.4s ease-in-out infinite}
@keyframes lumba-suz{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lumba-salla{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-16deg)}85%{transform:rotate(8deg)}}
/* Hareket hassasiyeti olan kullanıcıda animasyon DURUR (erişilebilirlik). */
@media (prefers-reduced-motion:reduce){
  .cat-lumba-g,.cat-lumba-kol{animation:none}
}
.cat-portal:hover .thumb{background:var(--krem)}
.cat-portal .lbl{font-weight:400}

/* Kökten Sese: henüz ürünü olmayan koleksiyon (Cem, 9 Ağu).
   Portal kutusuyla aynı "kategori değil" dilini kullanıyor ama farklı bir şey
   söylüyor → ok yerine "Yakında" rozeti. Rozet olmasaydı müşteri satın
   alınabilir bir kategori sanır, tıklar, boş sayfa bulurdu. */
.cat-yakinda .thumb{display:grid;place-items:center;background:var(--kagit);color:var(--btn-hover)}
.cat-yakinda .thumb svg{width:46%;height:46%}
.cat-yakinda:hover .thumb{background:var(--krem)}
.cat-yakinda .lbl{font-weight:400}
.cat-yakinda .yak{flex:0 0 auto;font-size:.68rem;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--kum);color:var(--ink)}
@media(max-width:1200px){ .cat-tiles{grid-template-columns:repeat(4,1fr)} }
@media(max-width:820px){ .cat-tiles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .cat-tiles{grid-template-columns:repeat(2,1fr)} }

/* ---------- Müzik Kütüphanesi (bej bölüm, görselsiz metin kartları) ---------- */
.lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lib-card{background:transparent;display:flex;flex-direction:column;gap:.7rem;padding:4px 10px 4px 0;color:var(--ink)}
.lib-card h3{font-size:1.16rem;font-weight:500;line-height:1.35;margin:0}
.lib-card p{color:rgba(38,38,38,.72);font-size:.93rem;font-weight:300;line-height:1.62;margin:0}
.lib-card .more{font-size:.9rem;color:var(--ink);margin-top:auto;padding-top:.4rem;
  display:inline-flex;align-items:center;gap:5px}
.lib-card{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.lib-card:hover{transform:translateY(-3px)}
.lib-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.lib-card .arw{margin-left:2px;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lib-card:hover .arw{transform:translateX(5px)}

/* ---------- blog cards ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.blog-card{background:var(--white);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.blog-card .bc-media{aspect-ratio:16/10;background:linear-gradient(135deg,#e9e4de,#d8cec3);display:grid;place-items:center;font-size:2rem;opacity:.9}
.blog-card .bc-body{padding:20px}
.blog-card h3{font-size:1.12rem;margin-bottom:10px;line-height:1.35}
.blog-card p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.blog-card .more{font-size:.85rem;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ---------- bülten (ürün bölümüyle aynı zemin, ortalı) ---------- */
.newsletter{text-align:center}
.newsletter p{color:var(--ink-soft);margin:0 auto 1.6rem;max-width:560px;font-weight:300}
.newsletter p strong{font-weight:600}
.news-form{display:flex;align-items:center;max-width:360px;margin:0 auto;
  border:1px solid rgba(38,38,38,.3);border-radius:var(--radius);background:transparent;overflow:hidden}
.news-form input{flex:1;padding:14px 16px;border:none;background:transparent;
  font-family:inherit;font-size:.95rem;color:var(--ink)}
.news-form input:focus{outline:none}
.news-form button{flex:0 0 48px;height:48px;background:none;border:none;cursor:pointer;
  font-size:1.15rem;color:var(--ink);transition:color .15s}
.news-form button:hover{color:var(--btn)}

/* ---------- breadcrumb ---------- */
.breadcrumb{padding:26px 24px 0;font-size:.85rem;color:var(--muted);max-width:var(--wrap);margin:0 auto}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{margin:0 7px;opacity:.5}

/* ---------- kategori sayfası (canlı: sadece ortalı başlık + 5 kolon ızgara) ---------- */
.coll-title{text-align:center;font-size:2.6rem;font-weight:400;letter-spacing:.3px;
  margin:1.6rem 0 2.6rem;line-height:1.2}
.coll-head{text-align:center;padding:3rem 0 2.4rem}
.coll-head h1{font-size:2.3rem}
.coll-head .count{color:var(--muted);margin-top:.5rem}
.coll-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:2.4rem}
.chip{border:1px solid var(--line);background:var(--white);padding:9px 17px;border-radius:999px;
  font-size:.9rem;color:var(--ink-soft);transition:.15s}
.chip:hover{border-color:var(--btn)}
.chip.active{background:var(--dark);color:#fff;border-color:var(--dark)}

/* ---------- ürün detay (canlı düzen: sol galeri + YAPIŞKAN sağ sütun) ---------- */
/* canlıdaki oran: SOL bilgi %55 · SAĞ galeri %45, ikisi de yapışkan */
/* Cem (2 Ağu): "solda metinler çok kalabalık, sağda görsellerin altı boş kalıyor".
   Sebep İKİ TANEYDİ:
   1) İKİ sütun da `position:sticky` idi. Sol sütun ekrandan uzun olduğu için
      yapışkanlığı hiçbir işe yaramıyor, sağdaki galeri de kendi kısa boyunda
      takılıp kalıyordu → uzun açıklama boyunca sağ taraf koca bir boşluk.
      Artık YALNIZ galeri yapışkan: okuyucu metni kaydırırken görsel yanında kalır.
   2) Sütun ayrımı `gap:0` + sol sütuna 50px `padding-right` ile taklit ediliyordu;
      gerçek `gap` yok, nefes yok. Artık 64px gerçek boşluk.
   Ayrıca açıklama metnine ölçü sınırı geldi (bkz. `.pd-desc`) — satırlar
   sayfa boyunca uzayıp "kalabalık" görünmesin. */
.product-detail{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:0 64px;padding:34px 0 56px;align-items:start;max-width:1200px}
.product-detail > .pd-info{padding-right:0}
.pd-gallery{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.pd-media{aspect-ratio:1/1;background:var(--white);border-radius:8px;overflow:hidden;
  display:grid;place-items:center;border:1px solid rgba(38,38,38,.06)}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-media .ph{font-size:4.5rem;opacity:.4}
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pd-thumb{width:78px;height:78px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:#fff;cursor:pointer;padding:0;flex:0 0 auto;transition:border-color .18s,transform .18s}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{transform:translateY(-2px);border-color:var(--btn)}
.pd-thumb.active{border-color:var(--ink)}

/* ⚠️ `position:sticky` KALDIRILDI — yukarıdaki nota bak. Sol sütun sayfanın
   uzun tarafı; yapışkan olması hem işe yaramıyor hem galeriyi kilitliyordu. */
.pd-info{position:static}
.pd-title{font-size:2.05rem;line-height:1.3;margin:0 0 1rem;font-weight:400;letter-spacing:.2px}
.pd-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.5rem}
.pd-price .old{color:var(--muted);font-size:1.1rem}
.pd-price .now{font-size:1.75rem;font-weight:500;color:var(--ink)}
.pd-tax{font-size:.88rem;color:var(--muted);margin:0 0 1.8rem}
.pd-tax a{color:var(--muted);border-bottom:1px solid var(--muted)}
.pd-tax a:hover{color:var(--ink);border-color:var(--ink)}
/* "Kalabalık" hissinin asıl sebebi satır uzunluğu değil DİKEY SIKIŞIKLIKTI:
   başlık→fiyat→vergi notu→uzun açıklama→3 akordeon→paylaş hepsi üst üste
   biniyordu. Satır yüksekliği ve paragraf araları açıldı (Cem, 2 Ağu).
   `max-width` bir emniyet: sütun ileride genişlerse satır 68 karakteri aşmasın
   (bugünkü ~540px sütunda zaten bağlamaz). */
.pd-desc{margin:30px 0;color:var(--ink-soft);line-height:1.85;font-weight:400;font-size:1rem;
  max-width:68ch}
.pd-desc > *:first-child{margin-top:0}
.pd-desc img{border-radius:var(--radius);margin:1rem 0}
.pd-desc h2,.pd-desc h3{margin:1.4rem 0 .5rem;font-weight:500;font-size:1.15rem}
.pd-desc p{margin:0 0 1rem}
.pd-desc ul,.pd-desc ol{margin:0 0 1rem;padding-left:1.3rem}
.pd-desc li{margin:.35rem 0}
.pd-desc strong{font-weight:600;color:var(--ink)}

/* akordeonlar */
.pd-acc{margin-top:2.4rem;border-top:1px solid var(--line)}
.pd-acc details{border-bottom:1px solid var(--line)}
.pd-acc summary{list-style:none;cursor:pointer;padding:17px 0;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;transition:color .15s}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary::after{content:"+";font-size:1.3rem;color:var(--muted);transition:transform .22s,color .15s}
.pd-acc details[open] summary::after{content:"−"}
.pd-acc summary:hover{color:var(--btn-hover)}
.pd-acc summary:hover::after{color:var(--ink)}
.acc-body{padding:0 0 18px;color:var(--ink-soft);font-weight:300;line-height:1.75;font-size:.95rem}
.acc-ic{display:inline-block;width:20px;color:var(--muted);font-size:.9rem}
.pd-share{border-top:1px solid var(--line);margin-top:15px}
.pd-share summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;align-items:center}
.pd-share summary::-webkit-details-marker{display:none}
.share-row{display:flex;gap:10px;flex-wrap:wrap}
.share-row input{flex:1;min-width:180px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--radius);font-family:inherit;font-size:.9rem;background:#fff;color:var(--muted)}
.share-row .btn{padding:12px 20px;font-size:.9rem}

/* ---------- hızlı sipariş tablosu (ürün bloğunun altı, tam genişlik BEYAZ) ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.quick-order{background:var(--white);padding:26px 0 30px}
.qo-table{max-width:1200px;margin:0 auto}
.qo-head,.qo-row{display:grid;grid-template-columns:1fr 266px 186px 241px;gap:16px;align-items:center}
.qo-head{padding-bottom:12px;border-bottom:1px solid var(--line);
  font-size:.72rem;letter-spacing:1.1px;color:var(--muted)}
.qo-row{padding:18px 0}
.qo-name strong{display:block;font-weight:400;font-size:.98rem;color:var(--ink);line-height:1.4}
.qo-sku{display:block;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.qo-qty label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.quick-order .qadd{max-width:150px;margin-top:0}
.qo-out{color:#a4443f;font-size:.9rem}
.qo-price s{display:block;color:var(--muted);font-size:.85rem}
.qo-price span{color:var(--ink)}
.qo-price small{color:var(--muted);font-size:.8rem}
.qo-sub{text-align:right;font-weight:500;color:var(--ink)}
.qo-head .qo-sub{font-weight:400}

@media(max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:26px}
  .product-detail > .pd-info{padding-right:0;order:2}
  .pd-gallery{order:1;position:static}
  .pd-info{position:static}
  .pd-title{font-size:1.65rem}
  .pd-price .now{font-size:1.5rem}
  .qo-head{display:none}
  .qo-row{grid-template-columns:1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
  .qo-sub{text-align:left}
}

/* ---------- sepet (canlı Dawn düzeni) ---------- */
.cart-empty-sec{padding:5rem 0 5rem;text-align:center}
.cart-empty-title{font-size:2.6rem;font-weight:400;margin:0 0 1.8rem}
.cart-account{margin-top:3rem}
.cart-account h2{font-size:1.1rem;font-weight:500;margin-bottom:.4rem}
.cart-account a{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px}
.cart-empty-sec .section-title{text-align:left}

.cart-page{min-height:46vh;padding:2.4rem 0 4.5rem}
.cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:2rem}
.cart-title{font-size:2.6rem;font-weight:400;margin:0}
.cart-cont{font-size:.92rem;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px}
.cart-thead{display:grid;grid-template-columns:1fr 170px 120px;gap:16px;padding:0 0 12px;
  border-bottom:1px solid var(--line);font-size:.74rem;letter-spacing:1.2px;color:var(--muted)}
.cart-thead .c-qty{text-align:center}
.cart-thead .c-tot{text-align:right}
.cart-row{display:grid;grid-template-columns:1fr 170px 120px;gap:16px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)}
.ci-main{display:flex;align-items:center;gap:18px;min-width:0}
.ci-thumb{width:88px;height:88px;flex:0 0 auto;border-radius:var(--radius);overflow:hidden;
  background:var(--white);border:1px solid var(--line)}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-info{min-width:0}
.ci-name{display:block;font-size:.98rem;color:var(--ink);line-height:1.4;margin-bottom:.3rem}
.ci-name:hover{color:var(--btn)}
.ci-unit{font-size:.9rem;color:var(--muted)}
.ci-qty{display:flex;flex-direction:column;align-items:center;gap:8px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);
  height:44px;transition:border-color .18s}
.qty:hover{border-color:var(--btn)}
.qty button{width:40px;height:100%;border:none;background:none;cursor:pointer;font-size:1.1rem;
  color:var(--ink);transition:background .15s}
.qty button:hover{background:rgba(183,172,162,.22)}
.qty span{min-width:34px;text-align:center}
.ci-remove{color:var(--muted);cursor:pointer;background:none;border:none;font-size:.82rem;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.ci-remove:hover{color:var(--ink);border-color:var(--ink)}
.ci-price{text-align:right;color:var(--ink);font-weight:500;white-space:nowrap}
.cart-foot{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;margin-top:2.4rem}
.cart-note label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:.5rem}
.cart-note textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:.95rem;background:#fff;transition:border-color .18s,box-shadow .18s}
.cart-note textarea:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 3px rgba(183,172,162,.25)}
.cart-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.cart-summary .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:1.15rem}
.tax-note{font-size:.85rem;color:var(--muted);margin:.2rem 0 1.2rem;line-height:1.55}
.tax-note a{color:var(--muted);border-bottom:1px solid var(--muted)}
.tax-note a:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:860px){
  .cart-thead{display:none}
  .cart-row{grid-template-columns:1fr;gap:14px}
  .ci-qty{align-items:flex-start}
  .ci-price{text-align:left}
  .cart-foot{grid-template-columns:1fr;gap:24px}
  .cart-head{flex-direction:column;align-items:flex-start;gap:8px}
}
.empty{text-align:center;padding:44px 0;color:var(--muted)}
.empty a{color:var(--ink);border-bottom:1px solid var(--ink)}

/* sepet: ücretsiz kargo eşiği çubuğu + adet rozeti (Cem, 30 Tem "güzelleştirelim") */
.cart-count-label{font-size:.95rem;color:var(--muted);font-weight:300;margin-left:.5rem;
  vertical-align:middle}
.ship-bar{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:1.6rem}
.sb-track{height:6px;border-radius:99px;background:rgba(38,38,38,.09);overflow:hidden}
.sb-fill{display:block;height:100%;width:0;border-radius:99px;background:var(--btn);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.ship-bar.tamam .sb-fill{background:#4a7c59}
.sb-text{margin:.7rem 0 0;font-size:.9rem;color:var(--muted);font-weight:300}
.sb-text strong{color:var(--ink);font-weight:500}
.ship-bar.tamam .sb-text strong{color:#4a7c59}
.cart-row{transition:background .18s}
.cart-row:hover{background:rgba(255,255,255,.55)}
/* ⚠️ contain: kitap/kutu görselleri kare kutuda KIRPILMASIN — ürün tam görünsün */
.ci-thumb{padding:6px}
.ci-thumb img{object-fit:contain}
.pd-author{margin:-.2rem 0 1rem;color:var(--muted);font-size:.95rem;font-weight:300;
  letter-spacing:.2px}

/* sepet: "Bunları da beğenebilirsiniz" — uygun fiyatlı çapraz satış şeridi */
.xsell{margin-top:3.4rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.xsell-title{font-size:1.45rem;font-weight:400;margin:0 0 .3rem}
.xsell-note{color:var(--muted);font-weight:300;font-size:.93rem;margin:0 0 1.6rem}
.xsell-list{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.xsell-card{display:flex;flex-direction:column;gap:.4rem}
.xsell-card[hidden]{display:none}
.xs-img{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);padding:6px}
.xs-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
.xsell-card:hover .xs-img img{transform:scale(1.05)}
.xs-name{font-size:.86rem;line-height:1.35;color:var(--ink)}
.xsell-card:hover .xs-name{text-decoration:underline;text-underline-offset:3px}
.xs-price{font-size:.86rem;color:var(--muted);margin-bottom:.2rem}
.xs-add{margin-top:auto}
@media(max-width:1100px){ .xsell-list{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .xsell-list{grid-template-columns:repeat(2,1fr)} }

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.72);padding:78px 0 26px;margin-top:0}
/* canlıdaki gibi 2 sütun: solda ortalı logo, sağda sola hizalı slogan */
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:center}
.f-col-logo{display:flex;justify-content:center}
.site-footer .f-logo img{height:66px;width:auto}
.f-slogan{color:rgba(255,255,255,.75);font-weight:400;margin:0;font-size:1rem;
  line-height:1.8;letter-spacing:.6px}
/* ---------- Koleksiyon hikâyesi (Cem, 2 Ağu — Telden Ezgiye) ---------- */
/* 🔑 `align-items:stretch` (varsayılan) + görselde `height:100%` = İKİ SÜTUN AYNI
   YERDE BİTER. Önce `align-items:start` + `position:sticky` vardı: 4:3 görsel
   kendi boyunda kalıyor, 7 paragraflık metin yanında iki katı uzuyordu → Cem
   (2 Ağu): "görsel ile metin eş olmalı". Görsel artık sütunu dolduruyor,
   `object-fit:cover` ile kırpılıyor; `object-position` yüzleri ortada tutar. */
.koleksiyon-hikaye{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0 54px;max-width:1100px;margin:0 auto 58px;padding:34px 0 46px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kh-gorsel{margin:0;border-radius:12px;overflow:hidden;background:var(--bg);
  min-height:340px;box-shadow:0 14px 34px rgba(38,38,38,.09)}
.kh-gorsel img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.kh-metin{color:var(--ink-soft);font-weight:300;line-height:1.9;font-size:1rem;
  display:flex;flex-direction:column;justify-content:center}
.kh-metin p{margin:0 0 1.05rem}
/* Açılış cümlesi tek başına duruyor — hikâyeye giriş gibi okunsun */
.kh-metin p:first-of-type{font-size:1.24rem;line-height:1.55;color:var(--ink);
  font-weight:400;margin-bottom:1.25rem}
/* İmza satırı */
.kh-metin p:last-child{margin-bottom:0;font-style:italic;color:var(--ink);
  padding-top:1.1rem;border-top:1px solid var(--line)}
.kh-metin strong{font-weight:500;color:var(--ink)}
.kh-baslik{display:block;font-size:.74rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--btn-hover);margin-bottom:.9rem}
@media(max-width:900px){
  .koleksiyon-hikaye{grid-template-columns:1fr;gap:26px;margin-bottom:38px;padding:26px 0 32px}
  .kh-gorsel{min-height:0;aspect-ratio:4/3}
  .kh-metin p:first-of-type{font-size:1.1rem}
}

/* Portal bölümündeki EKRAN GÖRÜNTÜSÜ — ürün fotoğrafı değil arayüz görüntüsü
   olduğu için ince çerçeve + hafif gölge ile "ekran" gibi dursun (Cem, 2 Ağu). */
/* 🔴 Görsel DİKEY (1122×1290) ve kaynak yalnız 1122px geniş.
   Önce `.portal-media img{max-height:420px;object-fit:cover}` kuralına giriyordu:
   dikey görselin yarısı kırpılıyor, üstelik 1600px'e BÜYÜTÜLDÜĞÜ için bulanıklaşıyordu
   (Cem, 2 Ağu: "kalite bozulmuş, ya artır ya o kadar kesme").
   Çözüm: kırpma yok (`contain` + doğal oran), yükseklik sınırı kalktı, en geniş
   türev kaynak genişliğini AŞMIYOR. Büyütme = bulanıklık; asla kaynaktan büyük üretme. */
.portal-shot{border:1px solid var(--line);box-shadow:0 10px 30px rgba(38,38,38,.07);
  background:var(--white)}
.portal-media.portal-shot img{max-height:none;height:auto;object-fit:contain}
@media(min-width:901px){
  /* Dikey görsel yanındaki metin ortalansın, sütun uzayıp boş kalmasın */
  .portal-sec .portal-inner{align-items:center}
  .portal-shot{max-height:520px;overflow:hidden}
  .portal-media.portal-shot img{object-fit:cover;object-position:center top}
}
/* alt satır: ORTALANMIŞ tek satır, politikaların önünde "·"
   ⚠️ Telif yazısı ile politika linkleri AYNI boy/renkte olmalı (Cem, 30 Tem:
   "yazılar eşitlensin"). <small> tarayıcı varsayılanıyla küçülüyordu → boyut
   burada AÇIKÇA veriliyor; iki satırda da .8rem. */
.site-footer .copy-line{display:inline;font-size:.8rem;color:rgba(255,255,255,.6)}
.copy-line .sep{margin:0 4px;opacity:.6}
.site-footer .copy-line a{display:inline;font-size:inherit;color:rgba(255,255,255,.6);padding:0;
  border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.site-footer .copy-line a:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.site-footer .foot-policies{display:inline;gap:0}
.site-footer .foot-policies a{display:inline;font-size:.8rem;color:rgba(255,255,255,.6);
  padding:0;margin-left:.5rem}
.site-footer .foot-policies a:hover{color:#fff}
.site-footer .foot-policies a::before{content:"· ";opacity:.55}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.site-footer a{display:block;color:rgba(255,255,255,.72);font-size:.92rem;padding:5px 0;transition:.15s;font-weight:300}
.site-footer a:hover{color:#fff}
.social{display:flex;gap:18px;margin-top:20px;justify-content:center}
.social a{padding:0}
.social svg{width:20px;height:20px;fill:rgba(255,255,255,.72);transition:.15s}
.social a:hover svg{fill:#fff}
.copyright{margin-top:34px;padding-top:22px;font-size:.8rem;color:rgba(255,255,255,.55);
  border-top:1px solid var(--line-dark);text-align:center;line-height:2}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  :root{--pad:3.4rem}
  .grid,.grid.grid-5,.blog-grid,.lib-grid{grid-template-columns:repeat(3,1fr)}
  .cat-tiles{grid-template-columns:repeat(3,1fr)}
  .product-detail{grid-template-columns:1fr;gap:28px}
}
@media(max-width:720px){
  .header-inner{height:76px}
  .header-logo img{height:44px}
  .grid,.grid.grid-5,.blog-grid,.lib-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .cat-tiles{grid-template-columns:repeat(2,1fr)}
  /* Burada eskiden `.footer-grid` yaziyordu - o sinif HICBIR sablonda YOK,
     kural sessizce bosa gidiyordu ve footer mobilde de 2 kolonda kaliyordu
     (159+159px: logo sutunu dolduruyor, slogan 4 satira boluniyordu).
     Sablondaki gercek sinif `.footer-top` (base.html:252). */
  .footer-top{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .f-col-slogan{max-width:34ch}
  .site-footer .f-logo img{height:56px}
  /* 78px ust dolgu masaustu olcusu; bulten bandinin 51px alt dolgusuyla
     ust uste binip ~129px olu koyu alan birakiyordu. */
  .site-footer{padding:48px 0 22px}
  .copyright{margin-top:26px}
  /* 🔴 Portal rozeti telefonda sigmiyor: logo 117 + gutter 48 + gap 14 +
     sag blok 297 = 452px -> 390px ekranda 62px YATAY TASMA, hamburger
     tamamen ekran disinda kaliyor ve mobil menuye ULASILAMIYOR. Ayni
     tasma acilan cekmeceyi de sagdan tasirip kapatma butonunu gizliyor.
     Portal girisi mobilde cekmece menusunde, hero butonunda, kategori
     karosunda ve portal bolumunde zaten var - hicbir yol kapanmiyor.
     Dort denetim ajani da bu tasmayi bagimsiz olarak olctu. */
  .mn-portal{display:none}
  .section-title,.section-title.big{font-size:1.7rem}
  .section-title.sm{font-size:1.35rem}
  .copyright{justify-content:center;text-align:center}
  .foot-policies{justify-content:center}
  .header-right .icon-lbl{display:none}
}

/* ============ KOPYALANAN İÇERİK SAYFALARI + BLOG ============ */
.breadcrumb{max-width:var(--wrap);margin:0 auto;padding:1.3rem 24px .3rem;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{margin:0 .35rem}

.page-wrap{max-width:860px;margin:0 auto;padding:1rem 24px 5rem}
.page-wrap.narrow{max-width:680px}
.page-title{font-size:2.4rem;font-weight:400;letter-spacing:.4px;margin:.4rem 0 1.8rem;line-height:1.2}
.page-body{color:var(--ink-soft);font-weight:300;line-height:1.78;font-size:1.02rem;
  overflow-wrap:break-word}
.page-body a{overflow-wrap:anywhere}
.page-body h2{font-size:1.55rem;font-weight:400;color:var(--ink);margin:2.2rem 0 .8rem;line-height:1.3}
.page-body h3{font-size:1.28rem;font-weight:500;color:var(--ink);margin:1.8rem 0 .55rem;line-height:1.32}
.page-body h4{font-size:1.08rem;font-weight:600;color:var(--ink);margin:1.4rem 0 .45rem;line-height:1.35}
.page-body p{margin:0 0 1.1rem}
.page-body ul,.page-body ol{margin:0 0 1.2rem;padding-left:1.4rem}
.page-body li{margin:.4rem 0}
.page-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.page-body a:hover{color:var(--btn)}
.page-body img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.4rem 0}
.page-body strong,.page-body b{font-weight:600;color:var(--ink)}
/* Politika sayfalari DB'den <h2><strong>BASLIK</strong></h2> olarak geliyor
   (25/25 ve 14/14 sayildi) -> ara baslik 600 agirlikta cikip sayfa H1'inden
   (400) daha baskin okunuyordu. Govde metnindeki vurgu aynen kaliyor. */
.page-body h2 strong,.page-body h3 strong,.page-body h4 strong{font-weight:inherit}
/* 24 adet <hr> tarayici varsayilanindaydi: gri, 2px, asimetrik marj. */
.page-body hr{border:0;border-top:1px solid var(--line);height:0;margin:2.4rem 0 0}
.page-body blockquote{border-left:3px solid var(--taupe);padding:.2rem 0 .2rem 1.2rem;margin:1.4rem 0;color:var(--muted)}
.page-body iframe{max-width:100%;border-radius:var(--radius);margin:1.4rem 0}
.page-body table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.page-body td,.page-body th{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-bottom:5rem}
.blog-card{display:block;background:var(--white);border-radius:var(--radius);overflow:hidden;color:var(--ink);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25)}
.bc-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.bc-img img{width:100%;height:100%;object-fit:cover}
.bc-body{padding:1.3rem 1.4rem 1.6rem}
.bc-date{font-size:.76rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.bc-title{font-size:1.2rem;font-weight:500;line-height:1.35;margin:0 0 .6rem}
.bc-excerpt{color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.6;margin:0 0 1rem}
.bc-more{font-size:.9rem;color:var(--btn);font-weight:500}
/* ---------- S.S.S / İş Birliği: akordeon listesi (canlıdaki dar ortalı kap) ---------- */
.faq-intro,.ib-intro{max-width:760px;margin:0 auto;text-align:center}
.faq-intro p,.ib-intro p{color:var(--ink-soft);font-weight:300;font-size:1.05rem;margin:.4rem 0 0}
.faq-sec{padding:2.4rem 0}
.faq-wrap{max-width:734px;margin:0 auto;padding:0 15px}
.faq-group-title{text-align:center;font-size:1.5rem;font-weight:500;margin:0 0 1.6rem;letter-spacing:.2px}
.acc-list details{border-bottom:1px solid var(--line)}
.acc-list details:first-child{border-top:1px solid var(--line)}
.acc-list summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-size:1rem;color:var(--ink);line-height:1.5;transition:color .15s}
.acc-list summary::-webkit-details-marker{display:none}
.acc-list summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s,border-color .15s}
.acc-list details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.acc-list summary:hover{color:var(--btn-hover)}
.acc-list summary:hover::after{border-color:var(--ink)}
.acc-list .acc-body{padding:0 34px 20px 0;color:var(--ink-soft);font-weight:300;
  line-height:1.75;font-size:.96rem}
.faq-cta{text-align:center}
.faq-cta p{color:var(--muted);margin:0 0 1rem}

/* İş Birliği 3 kart */
/* ---------- İş Birliği: kurumsal toplu alım sayfası ---------- */
.ib-hero{background:var(--dark);color:#fff;padding:4.6rem 0 4.2rem}
.ib-hero-in{max-width:920px;text-align:center}
.ib-hero .brand-kicker{color:var(--taupe)}
/* color ŞART: genel h1 kuralı koyu metin veriyor, koyu zeminde okunmuyordu */
.ib-h1{color:#fff;font-size:3rem;font-weight:400;line-height:1.15;letter-spacing:.3px;margin:0 0 1.2rem}
.ib-lead{color:rgba(255,255,255,.78);font-weight:300;line-height:1.85;font-size:1.05rem;
  margin:0 auto 2rem;max-width:720px}
.ib-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ib-cta .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}
.ib-cta .btn.ghost:hover{background:#fff;color:var(--dark)}
.ib-tags{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:2.2rem 0 0;padding:0}
.ib-tags li{font-size:.83rem;font-weight:300;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 15px}
.brand-kicker.on-dark{color:var(--taupe)}

/* toplu alımda ne sağlıyoruz — numaralı iki kolon */
.ib-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem;max-width:1100px;margin:0 auto}
.ib-feat-item{display:flex;gap:1.1rem;align-items:flex-start}
.ib-num{flex:0 0 auto;font-size:.85rem;letter-spacing:1px;color:#6f6154;
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;margin-top:2px}
.ib-feat-item h3{font-size:1.06rem;font-weight:500;margin:0 0 .45rem}
.ib-feat-item p{color:var(--ink-soft);font-weight:300;line-height:1.75;margin:0;font-size:.95rem}

/* süreç — koyu bant, 4 adım */
.section.ib-dark{background:var(--dark);color:#fff;padding:3.6rem 0 4rem}
.ib-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1200px;margin:0 auto}
.ib-step{border-top:1px solid rgba(255,255,255,.2);padding-top:1.2rem}
.st-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--taupe);color:var(--dark);font-size:.9rem;margin-bottom:.9rem}
.ib-step h3{font-size:1.04rem;font-weight:500;margin:0 0 .5rem;color:#fff}
.ib-step p{color:rgba(255,255,255,.72);font-weight:300;line-height:1.7;margin:0;font-size:.92rem}
/* 🔴 `.ib-step*` renkleri KOYU banda göre yazılmış (İş Birliği sayfasındaki süreç
   şeridi). Orbitix hediye sayfasında aynı kalıp AÇIK zeminde kullanılıyor ve
   `.ob-steps` sınıfının CSS'i HİÇ YOKTU → beyaz yazı krem zeminde okunmuyordu
   (Cem, 2 Ağu). Açık zemin sürümü:
   🪤 İKİ KEZ yandım, ikisi de SESSİZ bozuyor — dosya geçerli görünüyor,
   sayfa eski hâlinde kalıyor, hata yok:
     1) yorumu Jinja söz dizimiyle (diyez + süslü parantez) kapatmak,
     2) yorumun İÇİNDE yorum-kapatma dizisini örnek diye yazmak — orada
        kapanır, kalan metin CSS sanılır ve altındaki İLK kural yutulur.
   CSS yorumu içine o diziyi ASLA yazma. */
.ob-steps{grid-template-columns:repeat(3,1fr)}
.ob-steps .ib-step{border-top-color:var(--line)}
.ob-steps .ib-step h3{color:var(--ink)}
.ob-steps .ib-step p{color:var(--ink-soft)}
.ob-steps .st-no{background:var(--ink);color:#fff}
@media(max-width:900px){ .ob-steps{grid-template-columns:1fr} }

/* kuruma özel — metin + mini kart listesi */
.ib-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ib-split-txt p{color:var(--ink-soft);font-weight:300;line-height:1.85;margin:0 0 1.6rem}
.ib-split-txt .section-title{margin-bottom:1rem}
.ib-split-list{display:grid;gap:12px}
.ib-mini{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:1.15rem 1.3rem}
.ib-mini h3{font-size:1rem;font-weight:500;margin:0 0 .35rem}
.ib-mini p{color:var(--muted);font-weight:300;line-height:1.7;margin:0;font-size:.92rem}

/* teklif formu — sol anlatı, sağ form */
.ib-form-wrap{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:start}
.ib-form-side .section-title{margin-bottom:1rem}
.ib-form-side > p{color:var(--ink-soft);font-weight:300;line-height:1.85;margin:0 0 1.6rem}
.ib-side-info{display:grid;gap:.9rem;padding:1.2rem 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.ib-side-info div{display:flex;flex-direction:column;gap:.15rem}
.ib-side-info span{font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.ib-side-info a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.3);align-self:flex-start}
.ib-side-info a:hover{border-color:var(--ink)}
.ib-side-note{color:var(--muted);font-weight:300;font-size:.9rem;line-height:1.7;margin:1.2rem 0 0}
.ib-form{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:2rem}
.ib-form .cf-actions{text-align:left}
.field select{width:100%;font-family:inherit;font-size:.95rem;font-weight:300;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--btn)}

.faq-cta-alt{margin:1rem 0 0;color:var(--muted);font-weight:300;font-size:.92rem}
.faq-cta-alt a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.35)}
.faq-cta-alt a:hover{border-color:var(--ink)}
.faq-more{text-align:center;color:var(--muted);font-weight:300;font-size:.93rem;margin:1.8rem 0 0}
.faq-more a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.35)}
.faq-more a:hover{border-color:var(--ink)}

@media(max-width:1100px){
  .ib-steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .ib-form-wrap{grid-template-columns:1fr;gap:26px}
  .ib-split{grid-template-columns:1fr;gap:26px}
}
@media(max-width:760px){
  .ib-h1{font-size:2rem}
  .ib-hero{padding:3rem 0 2.8rem}
  .ib-feat{grid-template-columns:1fr;gap:1.5rem}
  .ib-steps{grid-template-columns:1fr}
  .ib-form{padding:1.4rem}
}

.ib-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ib-card p.muted{color:var(--muted);font-size:.92rem}
.ib-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:1.8rem;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.ib-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(0,0,0,.35)}
.ib-card h3{font-size:1.14rem;font-weight:500;margin:0 0 .9rem;display:flex;gap:.5rem;align-items:baseline}
.ib-card h3 .arw{color:var(--btn-hover);transition:transform .22s}
.ib-card:hover h3 .arw{transform:translateX(4px)}
.ib-card p{color:var(--ink-soft);font-weight:300;line-height:1.75;margin:0 0 .9rem;font-size:.96rem}
.ib-card p:last-child{margin-bottom:0}
@media(max-width:1100px){ .ib-cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .ib-cards{grid-template-columns:1fr;gap:16px} }

/* ---------- politika sayfasındaki vurgulu uyarı ---------- */
.policy-callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--btn);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin:0 0 1.8rem;
  font-weight:300;line-height:1.7;color:var(--ink-soft)}
.policy-callout strong{font-weight:600;color:var(--ink)}

/* ---------- Müzik Kütüphanesi listesi ---------- */
.lib-title{text-align:center;font-size:2.6rem;font-weight:400;letter-spacing:.3px;
  margin:1.4rem 0 2.6rem;line-height:1.2}
.lib-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.li-img{display:block;margin:-1.6rem -1.5rem .9rem;border-radius:8px 8px 0 0;overflow:hidden;
  aspect-ratio:1200/630;background:var(--bg)}
.li-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lib-item:hover .li-img img{transform:scale(1.04)}
.blog-cover{margin:1.4rem 0 2rem;border-radius:8px;overflow:hidden}
.blog-cover img{width:100%;height:auto;display:block}
.lib-item{background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;color:var(--ink);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s}
.lib-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(0,0,0,.35);
  border-color:rgba(38,38,38,.14)}
.li-date{font-size:.74rem;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.li-title{font-size:1.12rem;font-weight:500;line-height:1.4;margin:0}
.li-excerpt{color:var(--muted);font-weight:300;font-size:.93rem;line-height:1.65;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.li-more{margin-top:auto;padding-top:.5rem;font-size:.88rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:5px}
.li-more .arw{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lib-item:hover .li-more .arw{transform:translateX(5px)}
@media(max-width:1000px){ .lib-list{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .lib-list{grid-template-columns:1fr} .lib-title{font-size:1.8rem} }

/* ---------- sayfalama ---------- */
/* üst marj ŞART: liste kartlarına yapışınca sayfa numaraları tasarıma karışıyor */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin:3.6rem 0 5rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.pg{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);color:var(--ink);font-size:.92rem;
  transition:border-color .15s,background .15s,transform .15s}
.pg:hover{border-color:var(--btn);transform:translateY(-2px)}
.pg.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.pg.dots{border:none;background:none;min-width:20px;padding:0;color:var(--muted)}
.pg.dots:hover{transform:none}

.blog-article{padding-top:.5rem}
.blog-cover{margin:0 0 2rem;border-radius:var(--radius);overflow:hidden}
.blog-cover img{width:100%;height:auto;display:block}

@media(max-width:600px){
  .page-title{font-size:1.9rem}
  .blog-grid{grid-template-columns:1fr;gap:1.4rem}
}

/* ---------- menü: mobilde hamburger, masaüstünde yatay ---------- */
@media(max-width:1180px){
  .main-nav{display:none}
  .menu-burger{display:inline-flex}
  .header-inner{gap:14px}
  .header-logo{margin-right:auto}
}
@media(max-width:1320px){
  .mn-link{font-size:.9rem;padding:10px 8px}
  .header-inner{gap:14px}
}

/* ---------- arama ---------- */
.search-form{display:flex;gap:10px;max-width:520px;margin:0 auto 1.6rem}
.search-form input{flex:1;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.search-form input:focus{outline:none;border-color:var(--btn)}

/* ---------- hesap ---------- */
.account-box{max-width:640px;margin:0 auto 5rem;text-align:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:2.6rem 2rem}
.account-box p{margin:0 0 1rem}
.account-box .btn{margin-top:.8rem}

/* ---------- içerik sayfası: görsel + yazı (dönüşümlü) ---------- */
.page-title.center{text-align:center;margin:2.6rem 0 .6rem}
.iwt{padding:3.2rem 0}
.iwt.alt{background:var(--white)}
.iwt-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1180px}
.iwt.alt .iwt-media{order:2}      /* tek/çift satırlarda taraf değişir */
.iwt.alt .iwt-text{order:1}
.iwt-media{border-radius:var(--radius);overflow:hidden;background:var(--bg);
  aspect-ratio:16/10}
.iwt-media img{width:100%;height:100%;max-height:520px;object-fit:cover;display:block}
.iwt-text{color:var(--ink-soft);font-weight:300;line-height:1.8;font-size:1.02rem}
.iwt-text h2{font-size:1.6rem;font-weight:400;color:var(--ink);margin:0 0 1rem;line-height:1.3}
.iwt-text h2 strong{font-weight:400}
.iwt-text h3{font-size:1.24rem;font-weight:500;margin:1.4rem 0 .5rem}
.iwt-text p{margin:0 0 1rem}
.iwt-text ul,.iwt-text ol{margin:0 0 1rem;padding-left:1.3rem}
.iwt-text li{margin:.4rem 0}
.iwt-text strong{font-weight:600;color:var(--ink)}
.iwt-text img{display:none}       /* metin içine kaçan görsel olursa gizle */
.iwt-intro{padding:2rem 0 .5rem}
.iwt-intro .rte{max-width:820px;margin:0 auto;text-align:center;font-weight:300;line-height:1.8}

@media(max-width:900px){
  .iwt{padding:2.2rem 0}
  .iwt-inner{grid-template-columns:1fr;gap:24px}
  .iwt.alt .iwt-media,.iwt.alt .iwt-text{order:initial}
  .iwt-media img{max-height:340px}
}

/* ---------- iletişim sayfası (canlı düzen) ---------- */
/* ---------- İletişim (kurumsal düzen: bilgi sütunu + form) ---------- */
.ct-head{max-width:760px;margin:0 auto;text-align:center}
.ct-head p{color:var(--ink-soft);font-weight:300;line-height:1.8;margin:.4rem 0 0}
.ct-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.ct-info{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:1.9rem}
.ct-block{padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.ct-block h3{font-size:.76rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin:0 0 .4rem}
.ct-block p{margin:0;color:var(--ink);font-weight:300}
.ct-block a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.3);transition:border-color .15s}
.ct-block a:hover{border-color:var(--ink)}
.ct-links{padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.ct-links-title{font-size:.76rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.ct-links a{display:block;padding:.32rem 0;color:var(--ink-soft);font-weight:300;font-size:.94rem;
  transition:color .15s,transform .15s}
.ct-links a:hover{color:var(--btn-hover);transform:translateX(3px)}
.ct-social{display:flex;gap:14px;flex-wrap:wrap}
.ct-social a{font-size:.85rem;color:var(--muted);border-bottom:1px solid transparent;transition:.15s}
.ct-social a:hover{color:var(--ink);border-color:var(--ink)}
.ct-form-wrap{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:2.2rem}
.ct-form-title{font-size:1.5rem;font-weight:400;line-height:1.35;margin:0 0 .5rem}
.ct-form-note{color:var(--muted);font-weight:300;margin:0 0 1.6rem;font-size:.95rem}
.ct-form-wrap .cf-actions{text-align:left}
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr;gap:22px}
  .ct-form-title{font-size:1.25rem}
}

.rich-intro{text-align:center;max-width:860px;margin:0 auto}
.rich-title{font-size:2.3rem;font-weight:400;line-height:1.25;margin:0 0 1rem}
.rich-intro p{color:var(--ink-soft);font-weight:300;line-height:1.8;font-size:1.05rem;margin:0}
.mcol{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center}
.mcol-card h3{font-size:1.15rem;font-weight:500;margin:0 0 .4rem}
.mcol-card p{margin:0;color:var(--ink-soft);font-weight:300}
.mcol-card a{color:var(--ink-soft);border-bottom:1px solid rgba(38,38,38,.35);transition:color .15s,border-color .15s}
.mcol-card a:hover{color:var(--ink);border-color:var(--ink)}
.contact-narrow{max-width:620px;margin:0 auto;padding:0 24px}
.contact-title{font-size:1.9rem;font-weight:400;line-height:1.3;text-align:center;margin:0 0 2rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .field label{font-size:.86rem}
.req{color:#a4443f}
.cf-actions{text-align:center;margin-top:1.4rem}
.cf-actions .btn{min-width:190px}
.cf-ok{text-align:center;margin-top:1.2rem;color:#3f7a52}
@media(max-width:760px){
  .mcol{grid-template-columns:1fr;gap:26px}
  .cf-row{grid-template-columns:1fr}
  .rich-title{font-size:1.75rem}
  .contact-title{font-size:1.5rem}
}

/* ---------- checkout ---------- */
.checkout{padding-bottom:5rem}
.checkout-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:44px;align-items:start}
.co-h{font-size:1.15rem;font-weight:500;margin:0 0 1.2rem}
.checkout-form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:.4rem}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius);font-family:inherit;font-size:.98rem;background:#fff;color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--btn);
  box-shadow:0 0 0 3px rgba(183,172,162,.25)}
.field input:hover,.field textarea:hover{border-color:#d8d4cd}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:1.2rem 0 1.6rem;line-height:1.5}
.consent input{margin-top:3px;flex:0 0 auto}
.consent a{color:var(--ink);text-decoration:underline}
.co-secure{text-align:center;font-size:.84rem;color:var(--muted);margin:.9rem 0 0}
.checkout-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;position:sticky;top:120px}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.co-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;font-size:1rem}
.co-row.total{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.9rem;font-size:1.15rem}
.form-error{background:#fdecec;border:1px solid #f0b8b8;color:#a4443f;padding:.9rem 1.1rem;
  border-radius:var(--radius);margin-bottom:1.4rem;font-size:.94rem}
.pay-breakdown{max-width:440px;margin:0 auto 1.6rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.5rem}
.paytr-wrap{max-width:900px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem;min-height:520px}
.paytr-wrap iframe{min-height:500px;border:0}

/* ---------- sipariş sonucu ---------- */
.order-result{text-align:center;max-width:640px;margin:0 auto;padding:4rem 1rem 6rem}
.or-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;margin:0 auto 1.4rem}
.or-ic.ok{background:#e6f4ec;color:#3f7a52}
.or-ic.fail{background:#fdecec;color:#a4443f}
.order-result h1{font-size:2rem;font-weight:400;margin-bottom:.7rem}
.or-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.downloads{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.downloads h3{font-size:1.1rem;font-weight:500;margin-bottom:1rem}
.downloads .btn{margin:.35rem}

@media(max-width:900px){
  .checkout-grid{grid-template-columns:1fr;gap:24px}
  .checkout-summary{position:static;order:-1}
}

/* ---------- 404 ---------- */
.notfound{text-align:center;max-width:640px;margin:0 auto;padding:5rem 1rem 6rem}
.nf-code{font-size:5rem;font-weight:500;color:var(--taupe);line-height:1;letter-spacing:2px}
.notfound h1{font-size:2rem;margin:1rem 0 .6rem;font-weight:400}
.notfound p{margin:0 0 2rem}
.nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- MOBİL DOKUNMA HEDEFLERİ (31 Tem testi) ----------
   Ölçümde parmakla zor vurulan öğeler çıktı: footer sosyal ikonları 20x27,
   çekmece kapatma × 26x28, footer politika linkleri 17px yükseklikte.
   Görünüm aynı kalsın diye KUTU BÜYÜTÜLMÜYOR, sadece dokunma alanı açılıyor. */
@media(max-width:900px){
  .social a{padding:10px;margin:-10px}          /* 20x27 → ~40x47 dokunma alanı */
  .drawer-head .x{padding:10px;margin:-10px;min-width:44px;min-height:44px}
  .site-footer .foot-policies a{display:inline-block;padding:8px 0}
  .site-footer .copy-line a{display:inline-block;padding:4px 0}
  .drawer nav .grp{padding:22px 4px 10px}       /* artık link — rahat vurulsun */
  .ci-remove{padding:8px 0}                     /* sepette "Kaldır" */
  .pg{min-width:46px;height:46px}               /* sayfalama rakamları */
  /* TEK BAŞINA duran linkler (telefon, e-posta, sosyal, ürün adı) — cümle
     İÇİNDEKİ linklere dokunmuyoruz, satır aralığını bozar. */
  .ct-block a,.ib-side-info a{display:inline-block;padding:7px 0}
  .ct-links a{padding:9px 0}
  .ct-social a{display:inline-block;padding:8px 2px}
  .cart-cont,.faq-more a,.xs-name{display:inline-block;padding:6px 0}
}

/* ---------- MOBİL KUTU UYUMU (Cem, 31 Tem: "kutuları uyumlu hale getir") ----------
   Ölçümde her ızgara başka türlü çıkıyordu: hero 3 kolon/8px boşluk/çerçevesiz,
   kategoriler 2 kolon/14px/çerçevesiz, çapraz satış 2 kolon/16px/çerçevesiz,
   ürün ızgarası 2 kolon/12px/BEYAZ+çerçeveli. Hepsi tek sisteme alındı:
   2 kolon · 14/12px boşluk · beyaz zemin · 8px köşe · 1px çerçeve. */
@media(max-width:680px){
  .grid,.grid.grid-5,.blog-grid,.lib-grid,.cat-tiles,.xsell-list,.hx-cards{
    grid-template-columns:repeat(2,1fr);gap:14px 12px}
  /* 3 hero ürünü 2 kolonda tek başına satır açıyordu → mobilde 2 gösterilir,
     tamamı zaten "Tüm materyaller" butonunun arkasında. */
  .hx-cards .hx-card:nth-child(3){display:none}
  .hx-card,.xsell-card{background:var(--white);border:1px solid var(--line);
    border-radius:8px;padding:10px}
  /* iç görselin KENDİ çerçevesi kalkar — iç içe iki çerçeve kötü duruyor */
  .hx-card .hx-img,.xsell-card .xs-img{border:none;border-radius:6px;background:var(--bg);padding:0}
  .cat-tile{border:1px solid var(--line)}
  .hx-name,.xs-name{font-size:.85rem}
}

/* ---------- ödeme sayfası: yeni özet + kupon (31 Tem) ---------- */
.co-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:1.8rem}
.co-title{font-size:2.4rem;font-weight:400;margin:0}
.co-back{font-size:.92rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.co-back:hover{border-color:var(--ink)}
.co-hint{font-size:.86rem;color:var(--muted);margin:-.4rem 0 1.4rem;line-height:1.5}
.checkout-form .co-h:not(:first-of-type){margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}

/* sepet satırları — görselli */
.co-lines{margin-bottom:1.2rem}
.co-line{display:flex;align-items:center;gap:12px;font-size:.9rem;padding:.7rem 0;
  border-bottom:1px solid var(--line)}
.co-img{flex:0 0 auto;width:48px;height:48px;border-radius:6px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);padding:3px}
.co-img img{width:100%;height:100%;object-fit:contain}
.co-nm{flex:1 1 auto;min-width:0;line-height:1.35}
.co-nm em{display:block;font-style:normal;color:var(--muted);font-size:.84rem;margin-top:2px}
.co-line b{flex:0 0 auto;white-space:nowrap;font-weight:500}

/* kupon */
.co-kupon{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.co-kupon label{display:block;font-size:.84rem;color:var(--muted);margin-bottom:.45rem}
.ck-row{display:flex;gap:8px}
.ck-row input{flex:1 1 auto;min-width:0;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius);font-family:inherit;font-size:.92rem;background:#fff;
  text-transform:uppercase}
.ck-row input:focus{outline:none;border-color:var(--btn)}
.ck-row .btn{flex:0 0 auto;padding:11px 16px;font-size:.9rem}
.ck-msg{margin:.5rem 0 0;font-size:.85rem;min-height:1em}
.ck-msg.ok{color:#4a7c59}
.ck-msg.no{color:#a4443f}

/* toplamlar */
.co-totals{padding-top:.6rem}
.co-row{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;font-size:.95rem;
  color:var(--ink-soft)}
/* 🪤 `display:flex`, hidden ÖZNİTELİĞİNİ EZER (UA'nın display:none'ı yazar kuralına yenilir).
   Bu satır olmadan indirim yokken bile "İndirim −0,00 TL" görünüyordu. */
.co-row[hidden],#teslimat-blok[hidden],.co-uyari[hidden]{display:none}
.co-row.co-grand{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.9rem;
  font-size:1.2rem;color:var(--ink)}
.co-row.co-grand strong{font-weight:500}
.co-ship-note{font-size:.85rem;color:var(--muted);margin:.7rem 0 0;line-height:1.5}
.co-uyari{margin-top:1rem;background:#fdf6e7;border:1px solid #ecd9a8;border-radius:var(--radius);
  padding:.8rem 1rem;font-size:.86rem;color:#7a5c1e}
.co-uyari p{margin:.2rem 0}
#pay-total{opacity:.85;font-weight:400}

@media(max-width:760px){
  .co-title{font-size:1.8rem}
  .co-head{flex-direction:column;align-items:flex-start;gap:6px}
  .checkout-form{padding:1.3rem}
  .checkout-summary{padding:1.3rem}
}

/* ---------- sipariş sonrası sayfaları (31 Tem) ---------- */
.or-ic.wait{background:#fdf6e7;color:#8a6d2f}
.dl-grup{font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  margin:1.2rem 0 .3rem}
.or-ozet,.or-next{max-width:460px;margin:2.2rem auto 0;padding-top:1.6rem;
  border-top:1px solid var(--line);text-align:left}
.or-ozet h3,.or-next h3{font-size:1.05rem;font-weight:500;margin:0 0 .9rem;text-align:center}
.or-line{display:flex;justify-content:space-between;gap:14px;padding:.42rem 0;font-size:.93rem;
  color:var(--ink-soft)}
.or-line em{font-style:normal;color:var(--muted)}
.or-line b{white-space:nowrap;font-weight:500}
.or-line.or-grand{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.8rem;
  font-size:1.1rem;color:var(--ink)}
.or-next ul{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-weight:300;line-height:1.85}
.or-next li{margin-bottom:.3rem}
.or-next a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.35)}
.or-next .small{margin-top:.9rem}
.or-actions{margin-top:2.2rem;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* KDV satırı — tutara EKLENMEZ, fiyatın içindeki vergiyi gösterir (bilgi) */
.co-kdv{font-size:.84rem;color:var(--muted);padding-top:.15rem}
.co-kdv b,.co-kdv span{font-weight:400}

/* ---------- blog: konu kümeleri (SEO topic cluster) ---------- */
.lib-giris{text-align:center;max-width:720px;margin:-1.6rem auto 2rem;color:var(--ink-soft);
  font-weight:300;line-height:1.8}
.lib-konular{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 2.4rem}
.lk{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--ink-soft);font-size:.88rem;
  font-weight:300;transition:border-color .18s,background .18s,color .18s}
.lk span{font-size:.76rem;color:var(--muted)}
.lk:hover{border-color:var(--btn);color:var(--ink)}
.lk.active{background:var(--dark);border-color:var(--dark);color:#fff}
.lk.active span{color:rgba(255,255,255,.6)}

/* blog yazısı üst bilgi + hub bağlantısı */
.bc-ust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 .6rem}
.bc-konu{font-size:.76rem;letter-spacing:1.2px;text-transform:uppercase;color:#6f6154;
  border-bottom:1px solid transparent;transition:border-color .15s}
.bc-konu:hover{color:var(--ink);border-color:var(--ink)}
.bc-ust .bc-date{font-size:.82rem;color:var(--muted)}
.blog-ozet{font-size:1.08rem;line-height:1.8;color:var(--ink-soft);font-weight:300;
  margin:0 0 1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.blog-hub{margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--muted);font-weight:300}
.blog-hub a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.35)}
/* gövde içi bağlantılar görünür olsun — iç link SEO'nun temeli */
.page-body a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.32);
  transition:border-color .15s,color .15s}
.page-body a:hover{color:var(--btn-hover);border-color:var(--btn-hover)}
.grid.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px}
@media(max-width:680px){ .grid.grid-3{grid-template-columns:repeat(2,1fr);gap:14px 12px} }

/* ---------- Ürün tanıtım videosu (Yaren, 30 Ağu 2026) ----------
   Kapak + oynat düğmesi; iframe tıklanınca geliyor (bkz. product.html).
   16:9 kutu: YouTube'un `hqdefault` kapağı 4:3 olduğu için `cover` ile
   kırpılıyor — `contain` bırakılsaydı üstte altta siyah bantlar kalırdı. */
.pd-video{margin:14px 0 0}
.pd-video iframe,.pdv-kapak{display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:10px;background:#000}
.pdv-kapak{position:relative;padding:0;cursor:pointer;overflow:hidden}
.pdv-kapak img{width:100%;height:100%;object-fit:cover;display:block}
.pdv-kapak::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.pdv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);
  color:#1C2228;font-size:22px;line-height:60px;text-align:center;padding-left:4px;
  transition:transform .18s ease}
.pdv-kapak:hover .pdv-play{transform:translate(-50%,-50%) scale(1.08)}
.pdv-yazi{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;
  font-size:.86rem;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.pdv-kapak:hover .pdv-play{transform:translate(-50%,-50%)}}

/* ---------- Orbitix iş birliği — indirimli teklif (Cem, 30 Ağu 2026) ----------
   Sınıf adları `orb-hediye`/`orb-kod` TARİHSEL: teklif 30 Ağu'da ücretsizden
   indirimliye döndü, sınıflar değiştirilmedi çünkü üç şablon birden onlara
   bağlı ve ad değişikliği kutuyu STİLSİZ bırakır (sessiz düzen bozulması). */
.orb-hediye{max-width:460px;margin:2.2rem auto 0;padding:1.6rem;text-align:center;
  background:var(--krem);border:1px solid var(--line);border-radius:8px}
.orb-kicker{display:block;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.orb-hediye h3{font-size:1.15rem;font-weight:500;margin:0 0 .6rem}
.orb-hediye p{color:var(--ink-soft);font-weight:300;line-height:1.75;margin:0 0 1.1rem;
  font-size:.94rem}
.orb-kod{font-size:1.5rem;font-weight:600;letter-spacing:.18em;background:var(--white);
  border:1px dashed var(--btn);border-radius:var(--radius);padding:.9rem;margin:0 0 1.1rem;
  cursor:pointer;user-select:all}
/* İki kod yan yana: Özel Ders + Kurs. Tek kodluyken 1.5rem punto sığıyordu;
   "LUMBADOREKURS" 13 karakter ve .18em harf aralığıyla 460px kutuyu taşırıyor,
   bu yüzden ikili düzende punto ve aralık küçültülür. */
.orb-ikili{display:grid;gap:.85rem;margin:0 0 1.1rem}
.orb-etiket{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.orb-etiket b{color:var(--ink);font-weight:600}
.orb-ikili .orb-kod{font-size:1.1rem;letter-spacing:.12em;margin:0;padding:.7rem}
.orb-not{font-size:.85rem;color:var(--muted);margin:1rem 0 0}
.orb-not a{color:var(--ink);border-bottom:1px solid rgba(38,38,38,.35)}


/* ==================================================================
   MOBİL DENETİM DÜZELTMELERİ — 4 Ağustos 2026
   Dört paralel ajan gerçek 390/375 px viewport'ta ölçtü (CDP
   setDeviceMetricsOverride). Not: headless Chrome pencereyi 500 px
   altına indirmediği için `--window-size=390` ile alınan ölçümler
   YANILTICIDIR; buradaki her değer gerçek viewport ölçümüdür.
   ================================================================== */

/* ---------- 900px: dokunma hedefleri + ürün detay yan boşluğu ---------- */
@media(max-width:900px){
  /* Rozet gidince açılan yer ikonları 44x44 dokunma hedefine yetiyor:
     4x44 + 3x4 + logo 117 + gutter 48 + gap 14 = 367px (390 ve 375'te sığar). */
  .header-right{gap:4px}
  .header-right .icon-btn{padding:11px}

  /* `.product-detail` hem `.wrap` hem kendi sınıfını taşıyor (product.html:10).
     Satır 447'deki `padding:34px 0 56px` KISAYOLU `.wrap`ın `0 24px` yan
     boşluğunu siliyordu: başlık, fiyat, açıklama, akordeon ikonları ve küçük
     görsel şeridi ekran kenarına yapışıyor, akordeon ikonları ortadan
     kesiliyordu. Hemen altındaki `.quick-order` bandı `.wrap`ı doğru
     kullandığı için iki bölümün sol kenarı da hizasızdı. Yalnız YAN boşluk
     geri veriliyor, dikey ölçüye dokunulmuyor. */
  .product-detail{padding-left:24px;padding-right:24px}

  /* Başlık satırı mobilde gizli olduğu için alt toplam etiketsiz kalıyor,
     "0,00 TL" havada duruyordu. */
  .qo-row .qo-sub::before{content:"Ürün alt toplamı: ";color:var(--muted);font-weight:400}

  /* `space-between` summary içindeki ÜÇ kutuyu birden dağıtıyor, başlık
     ortaya kaçıyordu. */
  .pd-acc summary,.pd-share summary{justify-content:flex-start;gap:4px}
  .pd-acc summary::after{margin-left:auto}

  /* Atlanan dokunma hedefleri (41/39/37px ölçüldü). */
  .lk{min-height:44px}
  .ct-social a{padding:11px 4px}
  .faq-more a{padding:11px 0}
  .social{gap:26px}

  /* 🪤 Sayfada yatay taşma varsa `position:fixed;right:0` çekmeceyi belge sağ
     kenarına yaslıyor, ekranın sağına değil. Genişliği ekrana bağlamak,
     ileride başka bir taşma çıksa bile çekmeceyi korur. */
  .drawer{width:min(340px,86vw)}

  /* 🔴 Ödeme: özet formun ÜSTÜNDEYDİ (`order:-1`). 3 ürünlü sepette özet
     795px, ilk yazılabilir alan y=1097 — müşteri 1,3 ekran kaydırmadan
     hiçbir şey yazamıyordu. Toplam kaybolmuyor: "Ödemeye geç" butonu
     `#pay-total` ile tutarı zaten taşıyor, özet de hemen altında. */
  .checkout-summary{order:1}
  .checkout-form{order:0}
}

/* ---------- 760px: iOS zoom + form ritmi + dar kaplar ---------- */
@media(max-width:760px){
  /* 🔴 iOS Safari 16px ALTINDA bir alana odaklanınca sayfayı ZORLA
     yakınlaştırır ve odak kalkınca geri döndürmez. Ölçüm: ödeme formu
     15,68px · fatura tipi 15,20px · indirim kodu 14,72px · sepet notu
     15,20px. Görünüm neredeyse aynı kalır, zıplama biter. */
  .field input,.field textarea,.field select,
  .cart-note textarea,.ck-row input{font-size:16px}

  /* `.cf-row` tek sütuna inince grid gap 16px + `.field` marjı 1,1rem
     toplanıp 34px yapıyordu; diğer alanlar arası 18px. */
  .cf-row{row-gap:0}

  /* KVKK/mesafeli satış onayı ödemenin son kapısı; 13x13px varsayılandı. */
  .consent input[type=checkbox]{width:20px;height:20px;margin-top:1px;
    accent-color:var(--btn-hover)}

  /* SSS kenar payı 15px, sayfanın kalanı 24px idi: aynı sayfada iki sol hiza. */
  .faq-wrap{padding:0 24px}

  /* İletişim formu masaüstü dolgusunu koruyordu (alanlar 255px). Kurumsal
     teklif formu zaten 1.4rem'e iniyor — iki form eşleşsin. */
  .ct-form-wrap,.ct-info{padding:1.4rem}
  .ct-form-wrap .cf-actions .btn{width:100%;min-width:0}

  .acc-list .acc-body{font-size:1rem;line-height:1.72}

  /* Kart formuna tam genişlik: 1rem dolgu iframe'e yalnız 310px bırakıyordu. */
  .paytr-wrap{padding:.35rem;border-radius:0}
  .coll-head{padding:1.4rem 0 1rem}
  .coll-head h1{font-size:1.7rem}
}

/* ---------- 680px: ızgaralar, ritim, okunabilirlik ---------- */
@media(max-width:680px){
  /* 🔴 `.grid-orta` (0,3,0) mobil `.grid.grid-5` kuralını (0,2,0) yeniyordu;
     medya sorgusu özgüllüğü YÜKSELTMEZ. `auto-fit,minmax(0,224px)` 342px
     kaba TEK iz sığdırıyordu → ürünü 5'ten az olan 4 kategori
     (dijital-kitaplar, dijital-materyaller, posterler, telden-ezgiye)
     mobilde tek sıra hâlinde iniyordu. Ortalama masaüstünde anlamlı,
     mobilde 2 kolon zaten kabı dolduruyor. */
  .grid.grid-5.grid-orta{grid-template-columns:repeat(2,1fr);justify-content:normal}

  /* 🔴 Kütüphane kartları GÖRSELSİZ, yalnız yazı: 165px sütunda başlık 5
     satıra, özet satır başına 3 kelimeye düşüyordu. Blog listesindeki kardeş
     ızgara (.lib-list) zaten 680'de tek kolona iniyor — ana sayfa da öyle. */
  .lib-grid{grid-template-columns:1fr;gap:26px}
  .lib-card{padding:0 0 20px;border-bottom:1px solid rgba(38,38,38,.12)}
  .lib-card:last-child{border-bottom:none;padding-bottom:0}

  /* 2 kolonda tek ürünle biten satır sola yaslı kalıyordu (masaüstünde aynı
     sorun `.grid-orta` ile çözülmüştü). `:last-child:nth-child(odd)` yalnız
     TEK SAYIDA öğe varken devreye girer. */
  .grid.grid-5 > *:last-child:nth-child(odd),
  .cat-tiles > *:last-child:nth-child(odd){
    grid-column:1 / -1;max-width:calc(50% - 6px);justify-self:center}

  /* Izgara satırdaki iki karoyu eşit yüksekliğe çekiyor ama karo
     `display:block` olduğu için fazlalık etiketin ALTINDA boş kalıyordu. */
  .cat-tile{display:flex;flex-direction:column}
  .cat-tile .thumb{flex:0 0 auto}
  .cat-tile .lbl{flex:1 1 auto}

  /* Kütüphane kartlarında 14,88px light çok ince kalıyordu. */
  .li-excerpt{font-size:.97rem;line-height:1.7}
  .field label{font-size:.92rem}

  /* Kurumsal: 01-06 hapı metnin solunda 46px yiyordu, metin sayfanın
     kalanıyla hizasız kalıyordu. */
  .ib-feat-item{flex-direction:column;gap:.6rem}
  .ib-num{align-self:flex-start;margin-top:0}

  /* Sayfanın ticari olarak en önemli iki düğmesi alt alta düşünce
     205x55 ve 224x57 ile hizasız kalıyordu. */
  .ib-cta{flex-direction:column;align-items:stretch;gap:10px}
  .ib-cta .btn{width:100%;text-align:center}

  /* `.pager` 80px alt marj + bölümün 51px dolgusu = 131px ölü boşluk. */
  .pager{margin:2rem 0 1.6rem;padding-top:1.6rem}

  /* Konu çipleri 11 tane, her biri kendi satırına düşüp 477px yer kaplıyordu:
     390px'te ilk yazı y=803'te başlıyor, katlama üstünde TEK yazı yok.
     Tek satır yatay şerit ~50px'e indiriyor; aktif çip başta durduğu için
     nerede olduğun kaybolmuyor. */
  .lib-konular{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;margin:0 -24px 1.8rem;padding:2px 24px 10px}
  .lib-konular::-webkit-scrollbar{display:none}
  .lk{flex:0 0 auto;scroll-snap-align:start;padding:10px 16px}
}

/* ---------- 560px: hero, kupon, özet satırı, indirmeler ---------- */
@media(max-width:560px){
  /* İki eşdeğer aksiyon 390'da yan yana (343px, alan 342px), 375'te alt alta
     ve FARKLI genişlikte (160/155px) kalıyordu. */
  .hx-cta .btn{flex:1 1 150px;text-align:center;padding-left:18px;padding-right:18px}
  /* ⚠️ YALNIZ dikey dolgu artıyor: yatay dolguya dokunulursa üç sekmenin
     toplamı 342px'i aşar ve sekmeler iki satıra bölünür (90+101+120+16=327). */
  .hx-tab{padding-top:12px;padding-bottom:12px}

  /* Kupon kodu 24px yazı + 0,18em aralıkla 3 satıra bölünüyordu (kutu 146px). */
  .orb-kod{font-size:1.05rem;letter-spacing:.10em;padding:.8rem .5rem;
    overflow-wrap:anywhere;cursor:text}

  /* Özet satırında ürün adına yalnız 149px kalıyordu, uzun adlar 5 satıra
     bölünüyor, 48px görsel bu 5 satırın ortasında yalnız kalıyordu. */
  .co-line{flex-wrap:wrap;align-items:flex-start;row-gap:4px}
  .co-img{width:40px;height:40px}
  .co-nm{flex:1 1 60%}
  .co-line b{flex:1 1 100%;text-align:right;padding-left:52px}

  /* `.btn` inline-block olduğu için indirme düğmesinin genişliği dosya adının
     uzunluğuna göre değişiyordu (299px'ten 160px'e), uzun adlar iki satıra
     taşıyordu. Dijital ürün satan bir mağazada bu ekran asıl iştir. */
  .downloads .btn{display:block;width:100%;margin:.45rem 0;padding:14px 12px;
    text-align:left}
}

/* ---------- 860px: sepet satırı ---------- */
@media(max-width:860px){
  /* Mobilde `.cart-thead` gizli olduğu için "TOPLAM" başlığı kayboluyor ve
     satır toplamı, birim fiyattan ayırt edilemeyen ikinci bir rakama
     dönüşüyordu. Kaldır 35x34, adet tuşları 40x42 — ikisi de 44px altında. */
  .ci-price{text-align:right;font-size:1.05rem}
  .ci-price::before{content:"Toplam";float:left;font-size:.85rem;font-weight:400;
    color:var(--muted)}
  .ci-qty{flex-direction:row;align-items:center;gap:18px}
  .qty button{width:46px}
  .ci-remove{min-height:44px;padding:8px 4px}
}

/* ---------- 400px: dar telefonlar ---------- */
@media(max-width:400px){
  .header-logo img{height:40px}
}

/* ---------- dokunmatik: yapışkan hover ---------- */
@media (hover:none){
  /* Dokunmatikte `:hover` bir dokunuşla YAPIŞIR ve başka yere dokunulana dek
     kalır: kart havada, görsel yakınlaşmış öylece durur. İkinci görsel zaten
     kapatılmıştı (style.css:273), kalkma/gölge/zoom kuralları unutulmuştu. */
  .pcard:hover{transform:none;box-shadow:none;border-color:rgba(38,38,38,.07)}
  .pcard:hover .pcard-media img{transform:none}
  .qadd:hover{border-color:var(--line);box-shadow:none}
}

/* ---------- her ölçüde: uzun kırılmaz jetonlar ---------- */
/* Sipariş adları LMB + 26 karakter; 390px'te 256px yer kaplıyor, pay yok. */
.order-result p.muted strong,.or-line span{overflow-wrap:anywhere}
.or-line span{min-width:0}


/* ==================================================================
   MOBİL ÇEKMECE — kaydırılabilir + akordeon gruplar (Cem, 4 Ağu)
   🔴 Sorun: 16 bağlantının hepsi açık geliyordu ve `nav`da `overflow-y`
   olmadığı için çekmece ekrandan uzun olduğunda alttaki maddelere
   (Kütüphane, Portal, İletişim) HİÇ erişilemiyordu. Cem: "aşağı
   kaydırılmıyor, tüm menüler açılarak geliyor; kategori ismi olsa
   tıkla açılıp gelse".
   Çözüm: gruplar `<details>` ile KAPALI başlar, `nav` kendi içinde kayar.
   🔑 `min-height:0` ŞART — flex çocuğunun varsayılan `min-height:auto`
   değeri içeriğe göre büyür ve `overflow-y:auto` hiç devreye girmez.
   ================================================================== */
.drawer nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:16px}
.dgrp{border-bottom:1px solid var(--line)}
.dgrp summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:15px 4px;min-height:44px;
  font-size:1.05rem;color:var(--ink);font-weight:400}
/* Safari kendi üçgen işaretini basıyor — iki işaret üst üste gelmesin */
.dgrp summary::-webkit-details-marker{display:none}
.dgrp summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--muted)}
.dgrp[open] summary::after{content:"−"}
.dgrp summary:hover{color:var(--btn)}
.dgrp-ic{display:flex;flex-direction:column;padding:0 0 10px 12px}
/* Grup içi bağlantılarda ayraç YOK — grubun kendi alt çizgisi zaten var,
   ikisi birden olunca liste kafesli görünüyordu. */
.dgrp-ic a{border-bottom:none;padding:12px 4px;font-size:.98rem;color:var(--ink-soft)}
/* Grubun KENDİ sayfasına giden satır koyu — diğerleri alt bağlantı.
   ⚠️ Eskiden `:first-child`ti, yani vurgu KONUMA bağlıydı. 9 Ağu'da
   "Kurumsal — tümü" satırı kaldırılınca vurgu sebepsizce "Hikayemiz"e
   geçiyordu. Artık anlamdan geliyor: sınıfı olan satır vurgulanır. */
.dgrp-ic a.dgrp-ana{color:var(--ink)}

/* ==========================================================================
   MOBİL ÜRÜN KARTI — "FOTOĞRAF ÖNDE, GÖVDE SESSİZ"
   Cem, 9 Ağu: "ürünler sayfası mobilde hâlâ çok kaba, çok fazla metin var,
   mobile özel bir kurgu yapalım, daha minimal bir görünüm olsun."

   ÖLÇÜM (390px, gerçek tarayıcı — tahmin değil):
     ÖNCE  kart 165x342,7 · görsel 163 (%47,6) · GÖVDE 177,7 (%51,9)
           gövdenin 114px'i içerik, 64px'i SAF BOŞLUK (16+18 dolgu + 3x10 gap)
     SONRA kart 165x240,1 · görsel 163 (%67,9) · gövde 75,1 (%31,3)
     (2 satır adlı kart 260,9 · 2 satır ad + indirimli fiyat 278,2)

   ÜÇ HAMLE — hepsi SİLME, hiçbiri küçültme değil:
     1) SEO açıklaması ekrandan çıkar (DOM'da kalır)   −25px
     2) "− 0 +" kutusu akıştan çıkar, görselin üstüne  −50px
     3) pasif "Tükendi" düğmesi gider (rozet zaten var) −50px
        + gövde dolgusu/aralığı 64px ölü alandan 34px'e iner

   🔒 HİÇBİR PUNTO KÜÇÜLTÜLMEDİ. Ad 16px kalıyor, fiyat 16,96px kalıyor.
      Hiyerarşi punto değil AĞIRLIK ile kuruldu: ad 500→400, fiyat 500'de
      kaldı. Böylece 30-55 yaş ebeveyn/öğretmen için okunurluk düşmedi.

   🔒 MASAÜSTÜ BİREBİR AYNI — 1280px ve 721px'te kurallı/kuralsız geometri
      ÖZDEŞ ölçüldü (kart 478,6 ve 458,4px, iki durumda da).

   ⚠️ YERLEŞTİRME: bu blok style.css'in EN SONUNA eklenir (şu an 1617. satır).
      Çakışan taban kuralların hepsi bilerek daha YÜKSEK özgüllükle ezildi
      (aşağıda tek tek yazılı), yani sıra değişse de kural düşmez — ama yine
      de sona koyun.

   ⚠️ KIRILIM 720px: ürün ızgarası TAM BURADA 2 kolona iniyor
      (style.css:798-801). 680'e kursaydık 681-720 bandında 2 kolonlu ama
      ESKİ kaba gövdeli bir ara bölge kalırdı. 721px'te hiçbir şey değişmiyor
      (3 kolon + eski kart) — ölçüldü.

   ⚠️ KAPSAM: `product_card` makrosu 6 şablonda, 7 yerde kullanılıyor:
      grid_page.html:23 · category.html:31 · product.html:159 (ilgili ürünler)
      · cart.html:20 (sepet önerileri) · blog_post.html:34 (blog önerileri)
      · index.html:70 ve :103 (.urun-serit şeritleri).
      Seçiciler `.pcard` ile kapsüllendiği için bu YEDİSİ DE değişir —
      tutarlılık açısından istenen sonuç, ama Cem yalnız ürünler sayfasını
      sordu; şeridi ve sepet önerilerini de görüp onaylaması iyi olur.
      `.quick-order .qadd` (product.html:110) ve `.xsell-card` (cart.html:74)
      `.pcard` DIŞINDA → ETKİLENMEZ.
   ========================================================================== */
@media (max-width:720px){

  /* --- 1) Konumlandırma bağlamı -----------------------------------------
     Hap `.pcard`ın padding kutusuna çapalanır (görselin yüksekliğini hiç
     hesaplamamız gerekmez; kare oran değişse bile kurgu bozulmaz).
     `.pcard{overflow:hidden}` hapı KIRPMAZ: top/right 8px ile kartın içinde
     kalıyor, ::after'ın 2px taşması bile 8px payın içinde. */
  .pcard{position:relative}

  /* --- 2) Gövde: 64px ölü alan 34px'e ------------------------------------
     16/16/18 + 3x10 gap = 64px'ti. Şimdi 12/12/14 + 1x8 = 34px.
     Sıfırlamadım BİLEREK: marka dili "sade, sıcak, BOL BEYAZ ALAN" — Cem
     "çok fazla metin" dedi, "çok fazla boşluk" DEMEDİ. 10px'e kadar kısmak
     kartı sakinleştirmez, yoğunlaştırır; sıkışık görünüm "minimal"in değil
     "kaba"nın komşusudur.
     🔑 flex `gap`, akıştan çıkmış (position:absolute) çocuk için boşluk
     AYIRMAZ → gizlenen açıklama ve hap gövdeye 0px ekliyor. */
  .pcard .pcard-body{padding:12px 12px 14px;gap:8px}

  /* --- 3) SEO açıklaması ekrandan çıkar, DOM'da KALIR --------------------
     `.pcard-alt`, ürün adının ayraçtan sonraki arama yarısı. Mobilde zaten
     TEK satıra kırpılıyordu (style.css:345): "Müzik Sembolleri Eşleştirme
     Oyunu (40 Ka…". Yarım cümle bilgi taşımıyor, 25px yiyordu (19px + gap).
     `display:none` DEĞİL sr-only: metin DOM'da ve erişilebilirlik ağacında
     kalıyor → SEO ve ekran okuyucu kaybı YOK. Tam ad ayrıca `title`
     özniteliğinde, `alt` metninde ve ürün sayfasında duruyor.
     🔁 GERİ ALMAK tek satır: bu kuralı silip yerine
        `.pcard .pcard-alt{margin:0;font-size:.78rem;-webkit-line-clamp:1}`
        yazın — kart 240,1 yerine ~262px olur, kazancın %78'i durur. */
  .pcard .pcard-alt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* --- 4) Hiyerarşi: punto değil AĞIRLIK ---------------------------------
     Açıklama gidince kartta iki metin kaldı ve ikisi de 500 ağırlıkta,
     neredeyse aynı puntodaydı — göz hangisinin lider olduğunu seçemiyordu.
     Ad 400'e iniyor (kimlik, sakin), fiyat 500'de kalıyor (karar çapası).
     Punto DEĞİŞMİYOR: ad 16px, fiyat 16,96px.
     `-webkit-line-clamp:2` taban kuraldan miras — ad KIRPILMIYOR (kısıt 4).
     Satır aralığı 1.35→1.3: 2 satırlık ad 43,2 yerine 41,6px. */
  .pcard .pcard-title{font-weight:400;line-height:1.3}

  /* --- 5) Fiyat: alt alta değil yan yana ---------------------------------
     Taban kural `flex-direction:column` (style.css:346) — indirimli üründe
     eski ve yeni fiyat alt alta, 52,2px. Yan yana + sarma ile 37,6px.
     ⚠️ DÜRÜST OLALIM: 139px'lik metin sütununa iki dört haneli fiyat
     SIĞMIYOR, `flex-wrap` ile eski fiyat alt satıra iniyor. Yani çoğu
     indirimli üründe görsel sonuç yine iki satır — kazanç satır
     aralıklarından geliyor (52,2 → 37,6), tek satıra inmekten değil.
     🔴 Kısıt 3: eski fiyat GİZLENMİYOR, hiçbir koşulda.
     `margin-top:auto` (taban) BİLEREK korundu → aynı satırdaki iki kartın
     fiyatı aynı kotta bitiyor, ızgara taranabilir kalıyor. */
  .pcard .pcard-price{flex-direction:row;align-items:baseline;flex-wrap:wrap;
    column-gap:8px;row-gap:0;line-height:1.2}
  /* "1.290,00 TL" rakamın ortasından bölünmesin */
  .pcard .pcard-price .old,
  .pcard .pcard-price .now{white-space:nowrap}

  /* --- 6) Sepet hapı: akıştan çıkar, görselin sağ üstüne ------------------
     🔴 DOM'A TEK KARAKTER DOKUNULMADI (kısıt 1): `.qadd` ve
     data-mid/id/slug/name/price/img öznitelikleri, `.q-minus`/`.q-val`/
     `.q-plus` yerinde. Meta AddToCart olayı `q-plus` tıklamasından
     besleniyor (cart.js:193) ve `box.dataset.mid` okuyor — ikisi de sağlam.
     O düğme KÜÇÜLMEDİ, 46x46'lık daireye BÜYÜDÜ.

     🔑 ZEMİN KOYU (--dark), beyaz değil. İki sebep:
       (a) ürün fotoğraflarının çoğu krem/beyaz — beyaz hap üstünde kaybolur;
       (b) çıplak "+" e-ticarette "favori/karşılaştır" da demek olabiliyor,
           koyu dolgu onu bir EYLEM düğmesi gibi okutuyor.
     Renk `.pbadge.sale` ile aynı (--dark) → kartta yabancı bir dil doğmuyor.

     🔑 `overflow:visible` ŞART — taban kuralda `overflow:hidden` var
     (style.css:354) ve ::after dokunma alanını kırpardı.
     🔑 Box-model: kutu 46px, `*{box-sizing:border-box}` (style.css:19) +
     1px çerçeve → İÇ kutu tam 44px, düğme tam sığıyor, taşma YOK.
     46 yerine 44 yazılsaydı iç kutu 42'ye düşer ve 44px'lik düğme her iki
     eksende 2px taşardı. */
  .pcard .qadd{position:absolute;top:8px;right:8px;z-index:3;
    width:46px;height:46px;margin:0;padding:0;overflow:visible;
    justify-content:flex-end;border-radius:999px;
    background:var(--dark);border:1px solid var(--dark);
    box-shadow:0 2px 10px -4px rgba(28,34,40,.55);
    transition:width .18s cubic-bezier(.16,1,.3,1),background .18s,border-color .18s}

  /* 🪤 Dokunmatikte `:hover` YAPIŞIR. `.qadd:hover` HEM style.css:355 HEM
     1578 (@media hover:none) içinde var ve ikisi de (0,2,0) — yani benim
     `.pcard .qadd` kuralımla ÖZGÜLLÜĞÜ EŞİT olsaydı sıra karar verirdi.
     (0,3,0) ile ikisini de kesin olarak sabitliyorum: parmak değince hap
     çerçeve/gölge değiştirip zıplamıyor. */
  .pcard .qadd:hover{border-color:var(--dark);
    box-shadow:0 2px 10px -4px rgba(28,34,40,.55)}

  /* Düğmeler — dokunma hedefi burada kuruluyor. */
  .pcard .qadd .q-btn{position:relative;flex:0 0 44px;width:44px;height:44px;
    color:#fff;font-size:1.35rem;line-height:1;border-radius:999px}
  /* 🪤 YUVARLAK DÜĞMENİN KÖŞELERİ TIKLANMAZ: `border-radius` isabet testini
     de kırpar — 44x44 dairenin köşe pikselleri `elementFromPoint`te alttaki
     karta düşer, yani parmağın köşeye denk gelmesi sepete eklemez.
     Görünmez, DİKDÖRTGEN ::after gerçek isabet alanını büyütüyor; görüntü
     hiç değişmiyor. `inset:-2px` KISAYOLU KULLANILMADI — Safari <14.1 /
     eski Android WebView'da `inset` desteklenmez, pseudo 0 boyuta çöker ve
     düzeltme sessizce no-op olurdu. Uzun yazımın maliyeti sıfır.
     🔑 Olay hedefi pseudo değil DÜĞMENİN KENDİSİDİR → cart.js:187'deki
     `e.target.closest(".q-btn")` aynen çalışır.
     ÖLÇÜLDÜ (elementFromPoint, 0,5px adım): "+" 47,5x47,5 · "−" 47,5x47,5
     · dolu haptaki "+" 47,5x47,5 — 390 / 360 / 320px'te aynı. */
  .pcard .qadd .q-btn::after{content:"";position:absolute;
    top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:10px}

  /* SEPET BOŞKEN — yalnız "+" görünür.
     🔴 Kısıt 1'in harfine uygun: `display:none` DEĞİL, genişlik+visibility.
     "−" zaten pasif (cart.js:155 `minus.disabled = n===0`); pasif bir
     kontrolü gizlemek erişilebilirlik kaybı değil. */
  .pcard .qadd:not(.has-items) .q-minus{flex:0 0 0;width:0;min-width:0;
    padding:0;overflow:hidden;visibility:hidden}
  /* 🔑 "0" rakamı sr-only ile gizleniyor, `display:none`/`visibility:hidden`
     ile DEĞİL. Sebep: `.q-val`de `aria-live="polite"` var (_macros.html:57);
     öğe erişilebilirlik ağacından ÇIKARILIRSA ilk eklemedeki "1" duyurusu
     ekran okuyucularda kaybolabilir. sr-only ağaçta bırakır, canlı bölge
     çalışmaya devam eder. Konumu absolute olduğu için hapta yer kaplamaz. */
  .pcard .qadd:not(.has-items) .q-val{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}

  /* SEPETTE VARKEN — hap SOLA açılır, "−" ve adet geri gelir.
     🔴 Kısıt 1: azaltma yolu her zaman açık. `has-items` UYDURMA DEĞİL:
     cart.js:153 `q.classList.toggle("has-items", n > 0)` ile basılıyor ve
     `render()` sayfa açılışında koşuyor → ilk boyamadan itibaren doğru.
     🔑 `right:8px` sabit olduğu ve hap akış dışı olduğu için genişlerken
     ızgara YENİDEN AKMIYOR: sepete eklerken tek piksel kayma yok.
     🔑 `background` burada TEKRAR yazıldı: taban `.qadd.has-items{background:
     #fbfaf9}` (style.css:356) ile (0,2,0) beraberliğe girmesin diye (0,3,0).
     Ölçüldü: 112x46px (44 + 22 + 44 + 2 çerçeve). */
  .pcard .qadd.has-items{width:112px;background:var(--dark);border-color:var(--btn)}
  .pcard .qadd.has-items .q-val{flex:1 1 auto;min-width:22px;padding:0;
    font-size:.95rem;font-weight:500;color:#fff}

  /* 🔴 KOYU HAPTA TABAN DURUM KURALLARI OKUNMAZ KILIYORDU:
     `.q-btn:hover:not(:disabled){color:var(--btn-ink)}` (style.css:359) =
     #262626, yani KOYU zemin üstünde KOYU yazı → dokunmatikte yapışkan
     hover yüzünden "+" görünmez oluyordu. (0,5,0) ile beyaza sabitlendi.
     `:focus-visible` de tek odak göstergesiydi (taban `outline:none`) —
     koyu zeminde beyaz halka eklendi. */
  .pcard .qadd .q-btn:hover:not(:disabled),
  .pcard .qadd .q-btn:active:not(:disabled){color:#fff;background:rgba(255,255,255,.18)}
  .pcard .qadd .q-btn:focus-visible{background:rgba(255,255,255,.22);
    outline:2px solid #fff;outline-offset:-4px}
  .pcard .qadd .q-btn:disabled{opacity:.4}

  /* --- 7) "Tükendi" düğmesi gider, rozet TEK sinyal olarak güçlendirilir --
     Pasif düğme 50px yiyordu ve aynı bilgiyi görselin sol altındaki rozet
     ZATEN veriyor (_macros.html:22-24 — stokta yoksa rozet GARANTİ basılır).
     Ama düğme kalkınca tükenmiş kart satılabilir karttan neredeyse
     ayırt edilemez hâle geliyordu; iki telafi:
       (a) rozet açık fotoğrafta soluk kalan taupe yerine koyu zemin,
       (b) görsel soluklaştırılır → "bu ürün şu an alınamıyor" bir bakışta.
     ⚠️ (b) `:has()` istiyor (Safari 15.4+ / Chrome 105+). Desteklenmeyen
     tarayıcıda kural sessizce düşer, rozet yine yerinde — düzen bozulmaz. */
  .pcard .qadd-out{display:none}
  .pcard .pbadge.oos{background:var(--dark);color:#fff}
  .pcard:has(.qadd-out) .pcard-media img{opacity:.55}
}

/* ---------- ≤380px: dar telefonlar --------------------------------------
   Dolu hap 112px, 320px ekranda 128px'lik görselin %88'ini kaplıyordu.
   Düğmeler 40px'e iniyor AMA ::after payı -2'den -4'e çıktığı için gerçek
   isabet alanı 47,5x47,5px KALIYOR (ölçüldü) — kısıt 2 hâlâ sağlanıyor.
   Hap 100px'e iniyor: 320px'te görselin %78'i, 360px'te %68'i.
   -------------------------------------------------------------------- */
@media (max-width:380px){
  .pcard .qadd{width:42px;height:42px}
  .pcard .qadd .q-btn{flex:0 0 40px;width:40px;height:40px;font-size:1.25rem}
  .pcard .qadd .q-btn::after{top:-4px;right:-4px;bottom:-4px;left:-4px}
  .pcard .qadd.has-items{width:100px}
  .pcard .qadd.has-items .q-val{min-width:18px}
}

/* Hareket azaltma tercihi: hapın açılma animasyonu kapanır, işlev aynı. */
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .pcard .qadd{transition:none}
}
/* ==========================================================================
   ÜRÜN SAYFASI — MOBİL "KARAR ÇUBUĞU"  (≤720px)
   Cem (11 Ağu): "ürün sayfa tasarımları hâlâ güzel değil mobilde".

   SORUN (denetim ölçümü, 390x844): sepete ekleme kutusu y=2318 — 2,7 ekran
   aşağıda. Sebebi kutunun yeri DEĞİL, önündeki 1.049px'lik açıklama.
   ÇÖZÜM: okuma akışı aynen korunur, `.quick-order` bölümünün KENDİSİ
   mobilde ekranın altına yapışır.
   🔑 KOPYALANMADI, TAŞINDI: ikinci bir `.qadd` üretilseydi
      product.html:186 `document.querySelector(".quick-order .qadd")`
      yalnız ilkini görür, alt toplam yanlış senkronlanırdı.
   🔴 KISIT 1: `.qadd` DOM'una ve data-* özniteliklerine TEK KARAKTER
      dokunulmadı. cart.js:187 `closest(".q-btn")`, :199 AddToCart,
      :153 `has-items` ve product.html:186/196 aynen çalışır.
      (Not: brifingdeki "cart.js:186/196" aslında product.html:186/196'dır;
       bu sayfanın AddToCart'ı cart.js:199-202'den çıkar. Üçü de sağlam.)

   YERLEŞTİRME: style.css'in EN SONUNA. ⚠️ Dosya 1841 satır + kapatan `}`
   ile biter ve SONUNDA SATIR SONU YOKTUR; 1841. satırdan sonra eklerseniz
   blok `@media (prefers-reduced-motion:reduce)` içine hapsolur ve SESSİZCE
   çalışmaz. Doğrusu: EOF'taki `}`dan sonra, başına bir satır sonu koyarak.
   Ardından app/config.py:42 ASSET_V "68" → "69".

   MASAÜSTÜ (≥721px) BİREBİR AYNI — A/B ile ölçüldü (1280px, `.pd-title`
   579x128, `.qo-row` 109px, doc 1422px: yeni/eski FARK YOK).
   DOĞRULANDI (yerel kopya, gerçek style.css, 300→720px 1px adımlarla):
   yatay taşma HER genişlikte 0px · çubuk yüksekliği = ayrılan gövde
   dolgusu (boş ve dolu sepette) HER genişlikte BİREBİR eşit.
   ========================================================================== */

/* 🔴 MEDYA SORGUSUNUN DIŞINDA — şablona eklenen "Sepete git" bağlantısı
   masaüstünde HİÇ var olmamalı. `.qo-row` orada 4 kolonlu bir ızgara;
   5. çocuk örtük bir kolon açar ve masaüstü düzeni bozulur. Bu satır
   atlanırsa kısıt 5 kırılır. */
.qo-git{display:none}

@media (max-width:720px){

  /* --- 0) Çubuk yüksekliği TEK YERDE -------------------------------------
     Ölçüldü: boş sepet 86px · dolu sepet 138px (alt toplam + "Sepete git"
     satırı açılıyor). `min-height` sayesinde çubuk HER ZAMAN tam bu kadar
     olur — içerik kısa kalırsa fark çubuğun İÇİNDE nefes olarak durur,
     footer ile çubuk arasında krem şerit AÇILMAZ. */
  :root{--qo-bar:86px}
  body:has(.quick-order){padding-bottom:var(--qo-bar)}
  body:has(.quick-order .qadd.has-items){--qo-bar:138px}

  /* --- 1) 🔴 YATAY TAŞMA KAPISI (önce ölçülüp doğrulandı) ----------------
     style.css:604 ≤900px'te `grid-template-columns:1fr` yazıyor; `1fr` =
     `minmax(AUTO,1fr)`, yani track içeriğin min-content'inin altına İNEMEZ.
     Aşağıdaki kaydırılabilir küçük resim şeridi (6x62 + boşluklar + taşma
     payı = 390px) bu yüzden 390px'in altındaki TÜM telefonlara sayfa
     düzeyinde taşma dayatırdı (320px'te 70px, 375px'te 15px).
     `minmax(0,1fr)` + `min-width:0` bunu kapatır: 300-720px arası her
     genişlikte ölçülen taşma 0px. `overflow-x:auto` TEK BAŞINA KURTARMAZ —
     blowout ızgara track'inde. */
  .product-detail{grid-template-columns:minmax(0,1fr);padding:18px 24px 26px;gap:20px}
  .pd-gallery{min-width:0;gap:14px}

  /* --- 2) Görsel: aynı ölçek, KIRPMA YOK ---------------------------------
     Görsel 342x342 kalıyor (denetimdeki "700px / ekranın %83'ü" rakamı
     yanlıştı; gerçek değer ekranın %40'ı ve satılan şey o fotoğraf).
     🔑 `cover` → `contain`: kataloğun 6 ürününde kapak 1760x2390 (dikey);
     `cover` bunların %26'sını üstten/alttan KESİYOR — kitap kapağındaki
     yazı kırpılıyor. `contain` kırpmaz, kare fotoğrafta hiçbir fark yok.
     8px dolgu, letterbox'lı görselin çerçeveye yapışmasını engeller. */
  .pd-media{padding:8px}
  .pd-media img{object-fit:contain}

  /* Şerit `flex-wrap:wrap` idi: 4+ görselli üründe İKİ SIRA olup 166px
     yiyordu. Tek sıra + yatay kaydırma; `margin:0 -24px` ile şerit
     kenardan başlar, sağdaki görselin yarısı görünür = kaydırılabilirlik
     sezdirilir.
     🪤 `scroll-padding-*` OLMADAN snap, ilk küçük resmi kaydırma kabının
     dış kenarına hizalıyor ve 24px'lik sol dolguyu YİYOR (ölçüldü:
     scrollLeft=24, ilk kare x=0). Bu iki satırla ilk kare x=24'te durur.
     🔑 Kısıt 7: `data-src` ve product.html:169-175'teki tıklama
     dinleyicisi hiç değişmedi. Kareler 62px ≥ 44px (kısıt 2). */
  .pd-thumbs{min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;
    scroll-padding-left:24px;scroll-padding-right:24px;
    margin:0 -24px;padding:2px 24px;gap:8px}
  .pd-thumbs::-webkit-scrollbar{display:none}
  .pd-thumb{width:62px;height:62px;scroll-snap-align:start}

  /* --- 3) Başlık: 4 satırlık metin duvarı → 1 satır ad + 2 satır SEO -----
     🔴 KISIT 3: AD KISALTILMIYOR, KIRPILMIYOR. `<h1>`in metni
     `p.name.strip()` ile BİREBİR aynı kalıyor — veritabanındaki 30 ürünün
     30'unda gerçek Jinja ile derlenip doğrulandı, 0 sapma.
     `line-clamp` KULLANILMADI (o görsel bir kırpmadır, kısıtın verdiği
     izin "ikiye bölmek"ti). Ayraç ekrandan kalkar ama DOM'da ve
     erişilebilirlik ağacında KALIR — `display:none` olsaydı ekran okuyucu
     iki parçayı bitişik okurdu. Ölçüldü: başlık 137px → 81px.
     ⚠️ 30 üründen 13'ünün KISA adı 28 karakterden uzun (en uzunu 56) →
     o ürünlerde kısa ad 2 satıra çıkar, başlık ~111px olur. Sorun değil:
     satın alma çubuğu artık başlık uzunluğundan BAĞIMSIZ. */
  .pd-title{font-size:1.5rem;line-height:1.25;margin:0 0 .7rem}
  .pd-title .pd-t-ad{display:block}
  .pd-title .pd-t-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .pd-title .pd-t-alt{display:block;margin-top:.35rem;font-size:.95rem;line-height:1.5;
    font-weight:400;letter-spacing:0;color:var(--muted)}

  /* --- 4) Fiyat ----------------------------------------------------------
     🔴 KISIT 4: indirimli üründe eski fiyat GİZLENMİYOR.
     🔴 KISIT 6: `.pbadge` 11,52 → 14px BÜYÜTÜLÜYOR. Seçici `.pd-price` ile
     KAPSANDI: `.pbadge` ayrıca `_macros.html`teki ürün kartında da var ve
     o makro 6 şablonda 7 yerde kullanılıyor (style.css:1653-1656) —
     kapsamsız yazılsaydı kategori, ızgara, sepet önerileri, blog önerileri
     ve ana sayfa şeritlerindeki rozetler de sessizce değişirdi. */
  .pd-price{gap:10px;margin-bottom:.7rem}
  .pd-price .now{font-size:1.6rem;line-height:1.2}
  .pd-price .old{font-size:1.05rem}
  .pd-price .pbadge{font-size:.875rem}

  /* --- 5) KDV + kargo notu: kararın diğer yarısı -------------------------
     14,08 → 15,20px (kısıt 6: gövde ≥15px). İçinde kargo tutarı ve
     ücretsiz kargo eşiği var; ikisi de `config.SHIPPING_FLAT/FREE_OVER`
     üzerinden geliyor (product.html:30-39) — CSS'e elle rakam YAZILMADI.
     🪤 DOKUNMA HEDEFİ: bu paragraftaki bağlantı 38x19px ölçülmüştü.
     `inline-block` + dikey dolgu isabet alanını 44px'e çıkarır; NEGATİF
     margin aynı miktarı geri alır, böylece satır kutusu BÜYÜMEZ (düzen
     birebir korunur). Ölçüldü: 45x51px. `border-bottom` iptal edilip
     `text-decoration`a geçildi: dolgu eklenince çerçeve çizgisi 12px aşağı
     kayıp ALTTAKİ satırın ortasından geçiyordu (önceki turda ekran
     görüntüsüyle yakalanmıştı).
     🔒 KAPSAM: `.pd-tax` içinde TAM OLARAK BİR bağlantı var — dijital
     dalda product.html:34, fiziksel dalda :36 (koddan doğrulandı). Yani
     44px'lik bant komşu bir bağlantının dokunuşunu ÇALAMAZ. `.pd-desc` ve
     `.acc-body` içinde ürün kataloğunda hiç bağlantı YOK (30 ürünün
     açıklaması veritabanından tarandı: 0 anchor) — oralara kural
     yazılmadı, gereksiz risk alınmadı. */
  .pd-tax{font-size:.95rem;line-height:1.75;margin:0 0 1.2rem}
  .pd-tax a{display:inline-block;padding:12px 2px;margin:-12px -2px;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:3px}

  /* Açıklama KISALTILMADI/KATLANMADI: bu üründe metin satışın kendisi
     ("ayrı ayrı 3.390 yerine sette 1.950"), düşük impulse alıcı okuyarak
     karar veriyor. Yalnız dikey ritim biraz sıkıldı. */
  .pd-desc{margin:24px 0}
  .pd-acc{margin-top:2rem}
  /* 🪤 iOS Safari 16px ALTINDA odaklanılan alana ZORLA yakınlaşır ve geri
     dönmez. style.css:1436 bloğu form alanlarını düzeltmiş ama paylaş
     kutusunu (readonly input, .9rem) atlamış — readonly alan da odaklanır. */
  .share-row input{font-size:16px}

  /* ======================= 6) KARAR ÇUBUĞU ============================== */
  /* z-index 55: başlık 60 / çekmece örtüsü 70 / çekmece 80'in ALTINDA →
     menü açılınca çubuk örtünün arkasına düşer. Sitede başka `position:
     fixed` alt eleman YOK (grep: yalnız .drawer ve .drawer-overlay). */
  .quick-order{position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:flex;flex-direction:column;justify-content:center;min-height:var(--qo-bar);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -10px 28px -20px rgba(28,34,40,.6)}
  /* İçerik çubuğun arkasından SERT kenarla geçmesin; 18px'lik yumuşama
     metnin "aşağıda devamı var" demesini sağlıyor. Renk `--bg` ile birebir
     aynı; `transparent` yazılsaydı eski Safari siyaha interpolasyon yapıp
     gri bant bırakırdı. */
  .quick-order::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(243,239,233,0),var(--bg))}
  /* 🪤 `.wrap`ta `margin:0 auto` var (style.css:26). Flex kapta YATAY auto
     margin `stretch`i İPTAL EDER: `.wrap` 390 yerine içeriğine göre 335px
     olup ortalanıyordu (ölçüldü). Genişlik elle geri veriliyor. */
  .quick-order > .wrap{width:100%;margin:0}
  .quick-order .qo-table{max-width:none;margin:0}

  /* İki satırlık ızgara. Ezilen taban kurallar: style.css:588
     (`grid-template-columns:1fr 266px 186px 241px;gap:16px`) ve :611
     (≤900px `1fr` + `border-bottom`) — ikisi de (0,1,0), buradaki
     `.quick-order .qo-row` (0,2,0) ile kesin olarak eziliyor. */
  .quick-order .qo-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"fiyat hap" "toplam git";align-items:center;
    column-gap:14px;row-gap:8px;padding:0;border-bottom:0;min-height:52px}

  /* Ürün adı + SKU ve "Adet" etiketi: ad zaten 200px yukarıdaki `<h1>`de;
     `<label for="qo-q">` ise bir `<span>`i işaret ediyor (product.html:108
     ↔ :113), yani tıklanınca hiçbir şey yapmayan ölü bir etiket.
     `display:none` DEĞİL sr-only — ikisi de DOM'da ve erişilebilirlik
     ağacında kalıyor. */
  .quick-order .qo-name,.quick-order .qo-qty label{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}

  /* 🔴 KISIT 6 — hiçbir punto TABAN değerinin ALTINA inmiyor:
     `s` .85rem(13,6) → .95rem(15,2) · `small` .8rem(12,8) → .875rem(14) ·
     `.qo-sub` 16px'te BIRAKILDI (küçültülmedi, yalnız ağırlık/renk). */
  .quick-order .qo-price{grid-area:fiyat;display:block;min-width:0}
  .quick-order .qo-price s{display:block;font-size:.95rem;line-height:1.3;white-space:nowrap}
  .quick-order .qo-price span{display:block;font-size:1.25rem;font-weight:500;line-height:1.3}
  .quick-order .qo-price small{font-size:.875rem;font-weight:400;margin-left:3px}
  .quick-order .qo-sub{grid-area:toplam;text-align:left;font-weight:400;color:var(--muted);
    line-height:1.3}
  /* style.css:1409'daki "Ürün alt toplamı: " öneki çubukta çok uzun.
     Orası (0,2,0), burası (0,3,0) → sıradan bağımsız kazanır. */
  .quick-order .qo-row .qo-sub::before{content:"Sepette ";color:var(--muted);font-weight:400}
  .quick-order .qo-qty{grid-area:hap;align-self:center}

  /* --- 7) İLERİ YOL: "Sepete git" ---------------------------------------
     Önceki turların en büyük dönüşüm açığı buydu: sepete eklendikten sonra
     ödemeye giden tek yol koyu başlıktaki küçük sepet ikonuydu.
     🔑 Bu DÜZ BİR <a>, ikinci bir sepete-ekleme yolu DEĞİL: cart.js hiçbir
     olayı buradan almıyor, Meta AddToCart sinyali şişmiyor.
     Genişlik hapla aynı (152px) → ızgaranın `auto` kolonu tek ölçüde kalır. */
  .quick-order .qo-git{grid-area:git;display:flex;align-items:center;justify-content:center;
    gap:8px;width:152px;min-height:44px;padding:0 14px;border:1px solid var(--btn);
    border-radius:999px;background:var(--white);color:var(--ink);
    font-size:.95rem;font-weight:500}
  .quick-order .qo-git:hover{border-color:var(--ink)}
  /* Sepet boşken "Sepette 0,00 TL" ve "Sepete git" bilgi taşımaz, gürültü
     yapar. `:has()` desteklenmezse ikisi de görünür kalır — çirkin, ÇALIŞIR. */
  .quick-order .qo-row:not(:has(.qadd.has-items)) .qo-sub,
  .quick-order .qo-row:not(:has(.qadd.has-items)) .qo-git{display:none}

  /* --- 8) Hap ------------------------------------------------------------
     `max-width:none` style.css:595'teki `max-width:150px`i eziyor — aynı
     özgüllük (0,2,0), DAHA SONRA geldiği için kazanıyor; bu yüzden blok
     dosya sonuna konmalı. Zemin `--dark`, kart hapıyla (style.css:1739)
     aynı dil. `overflow:visible` ŞART: taban `overflow:hidden` (:354)
     aşağıdaki ::after dokunma alanını kırpardı.
     `transition`a `box-shadow` GERİ EKLENDİ (taban :354'te vardı,
     kısayolla ezilirse gölge yumuşamak yerine zıplar). */
  .quick-order .qadd{position:relative;width:auto;max-width:none;height:52px;margin:0;padding:0;
    overflow:visible;border-radius:999px;background:var(--dark);border:1px solid var(--dark);
    box-shadow:0 2px 12px -6px rgba(28,34,40,.6);
    transition:width .18s cubic-bezier(.16,1,.3,1),background .18s,border-color .18s,box-shadow .18s}
  /* 🪤 `.qadd:hover` HEM :355 HEM :1578'de ve ikisi de (0,2,0). (0,3,0) ile
     sabitleniyor: dokunmatikte yapışan hover hapı zıplatmıyor. */
  .quick-order .qadd:hover{border-color:var(--dark);box-shadow:0 2px 12px -6px rgba(28,34,40,.6)}

  .quick-order .qadd .q-btn{position:relative;flex:0 0 52px;width:52px;height:52px;color:#fff;
    font-size:1.3rem;line-height:1;border-radius:999px;background:none}
  /* 🪤 YUVARLAK DÜĞMENİN KÖŞELERİ TIKLANMAZ: `border-radius` isabet testini
     de kırpar. Görünmez DİKDÖRTGEN ::after gerçek alanı geri verir.
     `inset` KISAYOLU KULLANILMADI (eski WebView'da pseudo 0'a çöker) —
     style.css:1761'deki ev kuralının aynısı.
     🔑 Olay hedefi pseudo değil DÜĞMENİN KENDİSİ → cart.js:187 çalışır.
     ÖLÇÜLDÜ (elementFromPoint, 320/375/390px): boş hapta köşeler dâhil
     `q-plus`; dolu hapta "−" ve "+" 52x52, köşeler dâhil doğru düğme. */
  .quick-order .qadd .q-btn::after{content:"";position:absolute;
    top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:8px}
  /* Taban `:focus-visible{outline:none}` (:361) koyu zeminde tek odak
     göstergesini yok ediyordu. */
  .quick-order .qadd .q-btn:focus-visible{background:rgba(255,255,255,.22);
    outline:2px solid #fff;outline-offset:-4px}
  .quick-order .qadd .q-btn:disabled{opacity:.4}

  /* SEPET BOŞKEN: "Sepete ekle" yazan tam boy koyu düğme.
     🔑 Bugüne kadar ürün sayfasında "Sepete ekle" diye BİR ŞEY YOKTU —
     müşteri "− 0 +" görüp ne yapacağını kendi çıkarmak zorundaydı.
     🔴 KISIT 1 + WCAG 2.5.3 ÇATIŞMASI BÖYLE ÇÖZÜLDÜ: etiket düğmenin
     DEĞİL, kapsayıcının `::before`ıyla üretiliyor ve `pointer-events:none`
     ile dokunuşu altındaki `.q-plus`a geçiriyor. Böylece düğmenin
     erişilebilir adı bugünkü hâliyle ("Artır") kalıyor — yani DOM'a
     dokunmadan, mevcut duruma göre HİÇBİR erişilebilirlik gerilemesi
     yaratmadan görünür etiket kazanıyoruz. (Adı "Sepete ekle" yapan tek
     satırlık iyileştirme şablon notunda AYRI ve ONAYA BAĞLI madde olarak
     duruyor; kısıt 1 korunan alt ağaca dokunmayı yasakladığı için
     kendiliğinden uygulanmadı.)
     `.q-val` `display:none` DEĞİL sr-only: `aria-live="polite"` var,
     ağaçtan çıkarılırsa ilk eklemedeki "1" duyurusu kaybolabilir. */
  .quick-order .qadd:not(.has-items){min-width:168px;justify-content:center}
  .quick-order .qadd:not(.has-items) .q-minus{flex:0 0 0;width:0;min-width:0;padding:0;
    overflow:hidden;visibility:hidden}
  .quick-order .qadd:not(.has-items) .q-val{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .quick-order .qadd:not(.has-items) .q-plus{flex:1 1 auto;width:auto;color:transparent}
  .quick-order .qadd:not(.has-items)::before{content:"Sepete ekle";position:absolute;
    top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.02rem;font-weight:500;letter-spacing:.2px;pointer-events:none}
  /* Taban `.q-btn:hover{color:var(--btn-ink)}` (:359) koyu zeminde KOYU
     yazı üretiyor; burada glif zaten şeffaf, hover'da geri gelmemeli.
     Vurgu `.q-plus`ın kendi 999px köşesiyle çiziliyor → `overflow:visible`
     olmasına rağmen hapın yuvarlak uçlarından TAŞMIYOR. */
  .quick-order .qadd:not(.has-items) .q-plus:hover:not(:disabled),
  .quick-order .qadd:not(.has-items) .q-plus:active:not(:disabled){color:transparent;
    background:rgba(255,255,255,.16)}

  /* SEPETTE VARKEN: hap [− n +] olur, azaltma yolu her zaman açık. */
  .quick-order .qadd.has-items{width:152px;background:var(--dark);border-color:var(--dark)}
  .quick-order .qadd.has-items .q-val{flex:1 1 auto;min-width:32px;color:#fff;
    font-size:1.05rem;font-weight:500}
  .quick-order .qadd.has-items .q-btn:hover:not(:disabled),
  .quick-order .qadd.has-items .q-btn:active:not(:disabled){color:#fff;
    background:rgba(255,255,255,.16)}

  /* Tükendi: çıplak kırmızı yazı (14,4px) yerine aynı ölçüde pasif hap,
     16px (kısıt 6). Stokta olmayan üründe `.qadd` hiç basılmaz, dolayısıyla
     `has-items` de yok → alt toplam ve "Sepete git" gizli kalır. */
  .quick-order .qo-out{display:flex;align-items:center;justify-content:center;min-width:168px;
    height:52px;border-radius:999px;background:var(--kum);color:#7a3f3b;font-size:1rem}

  /* Opsiyonel güven şeridi (şablon notu [4] uygulanırsa kullanılır;
     uygulanmazsa bu kural hiçbir şeyi etkilemez). */
  .pd-guven{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-.4rem 0 1.2rem;padding:0;
    list-style:none;font-size:.95rem;color:var(--muted)}

  /* --- 9) `:has()` yoksa hiç riske girme --------------------------------
     Desteklemeyen tarayıcıda gövde dolgusu uygulanmaz ve çubuk footer'ın
     son satırını örterdi. Orada çubuğu HİÇ sabitlemiyoruz: kullanıcı
     bugünkü davranışı görür, hiçbir şey bozulmaz. (Chrome 105+,
     Safari 15.4+, Firefox 121+ zaten destekliyor.) */
  @supports not selector(:has(*)){
    .quick-order{position:static;min-height:0;padding:26px 0 30px;border-top:0;box-shadow:none}
    .quick-order::before{display:none}
    .quick-order .qo-row{min-height:0}
  }
}

/* Dokunmatikte `:hover` YAPIŞIR. style.css:1572 bloğu `.pcard` ve `.qadd`ı
   düzeltmiş ama küçük resimleri (`.pd-thumb:hover{transform:translateY(-2px)}`,
   :535) ATLAMIŞ: parmak değen küçük resim havada asılı kalıyordu.
   Ayrı `(hover:none)` sorgusu — dar pencerede FARE kullanan masaüstü
   kullanıcısı hover geri bildirimini kaybetmesin. */
@media (max-width:720px) and (hover:none){
  .pd-thumb:hover{transform:none;border-color:var(--line)}
  .pd-thumb.active:hover{border-color:var(--ink)}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .quick-order .qadd{transition:none}
}

/* ---------- ≤380px: dar telefonlar (320/360/375) -------------------------
   Ölçüldü: bu genişliklerde fiyat sütunu daralıp "1.950,00 TL /adet" üç
   satıra çıkıyor ve çubuk 100px'e büyüyor. Bütçe de birlikte büyütülüyor
   ki ayrılan gövde dolgusu ile çubuk yüksekliği EŞİT kalsın (footer'ın son
   satırı çubuğun altında kaybolmasın).
   🔴 Hiçbir punto TABAN değerinin altına inmiyor: `.qo-price span` burada
   1,1rem = 17,6px, tabanı 1rem = 16px. Düğmeler 46px + ::after payı -4px
   → gerçek isabet alanı 54x54, kısıt 2 hâlâ sağlanıyor. */
@media (max-width:380px){
  :root{--qo-bar:100px}
  body:has(.quick-order .qadd.has-items){--qo-bar:152px}
  .quick-order > .wrap{padding:0 16px}
  .quick-order .qadd .q-btn{flex:0 0 46px;width:46px}
  .quick-order .qadd .q-btn::after{top:-4px;right:-4px;bottom:-4px;left:-4px}
  .quick-order .qadd:not(.has-items){min-width:158px}
  .quick-order .qadd:not(.has-items)::before{font-size:.96rem}
  .quick-order .qadd.has-items{width:140px}
  .quick-order .qo-git{width:140px;font-size:.92rem}
  .quick-order .qo-price span{font-size:1.1rem}
  .quick-order .qo-out{min-width:158px}
}

/* ---------- KAPSAM DIŞI ama denetimin ikinci bulgusu --------------------
   Denetim 40px altında İKİ bağlantı ölçmüştü (h19 ve h20). Birincisi
   `.pd-tax a` (yukarıda kapatıldı). İkincisi ürün şablonunda DEĞİL:
   product.html'de başka satır içi bağlantı yok ve 30 ürünün açıklamasında
   0 anchor var (veritabanından tarandı) — geriye base.html:320/324'teki
   künye satırı kalıyor (`.copy-line a`, bugün style.css:1228'de yalnız
   `padding:4px 0`).
   ⚠️ Bu kural TÜM sayfaların mobil footer'ını etkiler. Düzen nötrdür
   (dolgu +24, margin -16 → satır kutusu net +8px), ama canlı ölçümle
   doğrulamadım: h20'nin gerçekten bu bağlantı olduğu benim tespitim.
   İstemezseniz bu üç satırı çıkarın, geri kalan blok etkilenmez. */
@media (max-width:720px){
  .site-footer .copy-line a{padding:12px 0;margin:-8px 0}
}
/* ==========================================================================
   ÇOK DAR EKRAN BAŞLIK TAŞMASI  (≤360px)  — 11 Ağu, ölçümle bulundu
   320px'te SİTE GENELİNDE 12px yatay taşma vardı (ana sayfa, ürünler, ürün
   detay — hepsinde). Ürün sayfası çalışması sırasında ortaya çıktı ama
   SEBEBİ O DEĞİL; başlık şeridinden geliyor ve çok önceden beri var:
       içerik alanı = 320 − 2×24 dolgu       = 272px
       gereken      = logo 106 + boşluk 14 + ikonlar 188 = 308px
   Fark 36px → sağdaki ikon 332'ye taşıyor.
   Dolgu ve boşluk daraltılıyor; logo KÜÇÜLTÜLMÜYOR, ikonlar 44px dokunma
   hedefini KORUYOR (erişilebilirlik pazarlık konusu değil):
       12 + 106 + 8 + 188 = 314 ≤ 320 ✓
   `.search-panel form.wrap` da aynı sınıfı kullanıyor, o da hizada kalsın. */
@media (max-width:360px){
  .site-header > .wrap,
  .site-header .search-panel form.wrap{padding-left:12px;padding-right:12px;gap:8px}
}

/* ==========================================================================
   TESLİMAT ADRESİ — alan alan (Cem, 12 Ağu)
   Adres tek serbest metindi ve "İl / İlçe" zorunlu değildi; 123 siparişin
   medyanı 56 karakter, %30'u 40 karakterin altındaydı. Artık İl · İlçe ·
   Mahalle · Sokak · Bina · Daire ayrı ayrı ve zorunlu.
   ========================================================================== */
/* Izgara MOBİL-ÖNCE kurulu: varsayılan tek sütun, yalnız `.adr-yarim`
   (Bina No / Daire No) yan yana. Onlar 1-3 haneli sayılar — tam satır vermek
   formu gereksiz uzatıyordu; İl/İlçe ise dar ekranda alt alta kalmalı,
   "Afyonkarahisar" gibi adlar yarım sütuna sığmıyor. */
.adr-izgara{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.adr-izgara > .field{grid-column:1 / -1}
.adr-izgara > .adr-yarim{grid-column:span 1}
/* 421px ve üstü: İl/İlçe de yan yana sığar */
@media(min-width:421px){ .adr-izgara > .adr-ikili{grid-column:span 1} }
.field .ipucu{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
/* "Müstakil ev" kutusu: 44px dokunma hedefi (etiketin tamamı tıklanabilir) */
.mustakil{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);
  margin:-2px 0 14px;padding:10px 0;cursor:pointer;min-height:44px}
.mustakil input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--dark)}
/* Kilitli daire alanı: tıklanamaz olduğu GÖRÜNSÜN, yoksa müşteri yazmayı dener */
.field input:disabled{background:#f4f2ee;color:#9a9490;cursor:not-allowed}

/* ── "Çok Yakında" tonlaması (18 Ağu) ──────────────────────────────────────
   Stok-dışı etiketler bilerek "alınamaz" tonunda: kart rozeti KOYU zemin,
   ürün sayfasındaki hap kırmızımsı kahve (#7a3f3b). "Çok Yakında" için bu
   yanlış sinyal — ürün geri geliyor, kapanmış değil. Aynı BİÇİM korunur
   (boyut/şekil/erişilebilirlik değişmez), yalnız renk nötr-sıcağa çekilir. */
.pbadge.oos.yakinda{background:var(--taupe);color:var(--ink)}
.pcard .pbadge.oos.yakinda{background:var(--taupe);color:var(--ink)}
.quick-order .qo-out.yakinda{background:var(--kum);color:#5a5148}
.qo-out.yakinda{color:#5a5148}


/* ==========================================================================
   "YENİ" ROZETİ (Cem, 21 Ağu)
   Renk AİLESİ bilerek yeni bir ton getirmiyor: `.pbadge.sale` ile aynı --dark.
   Palet sıcak-nötr; kartın üstüne yeşil/turuncu bir aksan koymak kartta
   yabancı bir dil doğururdu. İkisi aynı kartta ASLA birlikte çıkmaz
   (`_macros.html` elif zinciri), o yüzden aynı görünüm karışıklık yapmaz.
   ========================================================================== */
.pbadge.yeni{background:var(--dark);color:#fff}

/* Masaüstü menüsünde "Tüm Materyaller" — altındaki kategorilerden ayrılsın.
   Mobildeki `.dgrp-ana` karşılığı; orada renkle ayrılıyor ama burada TÜM
   satırlar zaten --ink, o yüzden ayrım kalınlık + ince ayraç ile. */
.mn-drop a.mn-ana{font-weight:400;padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}

/* Ödeme ekranında teslimat süresi — bilgi satırı, uyarı değil (Cem, 25 Ağu). */
.co-teslim-not{margin:-4px 0 18px;font-size:.9rem;color:var(--muted);line-height:1.6}