/* ==========================================================================
   Set Kataloğu — stil
   Renkler geçici: iki tema da nötr kuruldu, marka rengi yok.
   Tema değişkenleri tek yerde; renk ayarı yapılacağı zaman sadece burası
   değiştirilecek, bileşenler doğrudan hex kullanmıyor.
   ========================================================================== */

:root {
  /* Belge tuvali + tarayici arayuzu (kaydirma cubugu, form ogeleri) bu
     bildirimle temaya uyar; bildirilmezse koyu temada acik kalirlar. */
  color-scheme: light;
  --pg: #FFFFFF;
  --sf: #F4F4F5;
  --sf2: #EAEAEC;
  --bd: #E3E3E6;
  --hair: #EEEEF0;
  --tx: #17191A;
  --mt: #646C77;
  --chip: rgba(255, 255, 255, .94);
  --chip-tx: #17191A;
  --own: #1D6E4F;
  --own-tx: #FFFFFF;
  --btn: #17191A;
  --btn-tx: #FFFFFF;
  --slot: #EDEDEF;
  --fav: #D9A400;   /* favori yıldızı; koyu temada parlak sarıya döner */
  --focus: #17191A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06);
  --navpill-bg: rgba(0, 0, 0, .04);
  --navpill-ring: rgba(0, 0, 0, .08);
  --chart: #14A08C;
  --chart2: #C2711B;
  /* Üst çubuk hapı: açık temada sayfa renginde erir */
  --hap-bg: var(--pg); --hap-tx: var(--tx); --hap-mt: var(--mt);
  --hap-kenar: var(--hair);
  --hap-arama-bg: var(--sf); --hap-arama-bd: var(--bd);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --pg: #14110F; --sf: #1C1815; --sf2: #262019; --bd: #2E2822; --hair: #221D18;
    --tx: #F3EFE9; --mt: #A79E90;
    --chip: rgba(18, 15, 12, .85); --chip-tx: #F3EFE9;
    --own: #6FBF95; --own-tx: #14110F;
    --btn: #F3EFE9; --btn-tx: #14110F;
    --slot: #221D18; --focus: #F3EFE9;
    --fav: #F5C542;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --navpill-bg: rgba(255, 255, 255, .05);
    --navpill-ring: rgba(255, 255, 255, .10);
    --chart: #3EDBC4;
    --chart2: #F0A94A;
    /* Hap koyu temada BEYAZ (17 Ağu, kullanıcı kararı) — sayfayla zıtlaşan
       parlak bir ada; yazılar koyuya döner, aktif sekme kırmızı kalır. */
    --hap-bg: #FFFFFF; --hap-tx: #14110F; --hap-mt: #6E675E;
    --hap-kenar: #FFFFFF;
    --hap-arama-bg: #F0EDE7; --hap-arama-bd: #E2DDD5;
  }
}

:root[data-theme="dark"] {
  /* SICAK KOYU (16 Ağu 2026): saf siyah-gri mavi-nötrdü; krem raf ve kırmızı
     vurgu sıcak eksende olduğu için zemin soğuk kalıyordu. Acı-kahve kömür
     tonu hepsini aynı odaya koyuyor. */
  color-scheme: dark;
  --pg: #14110F; --sf: #1C1815; --sf2: #262019; --bd: #2E2822; --hair: #221D18;
  --tx: #F3EFE9; --mt: #A79E90;
  --chip: rgba(18, 15, 12, .85); --chip-tx: #F3EFE9;
  --own: #6FBF95; --own-tx: #14110F;
  --btn: #F3EFE9; --btn-tx: #14110F;
  --slot: #221D18; --focus: #F3EFE9;
  --fav: #F5C542;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --navpill-bg: rgba(255, 255, 255, .05);
  --navpill-ring: rgba(255, 255, 255, .10);
  --hap-bg: #FFFFFF; --hap-tx: #14110F; --hap-mt: #6E675E;
  --hap-kenar: #FFFFFF;
  --hap-arama-bg: #F0EDE7; --hap-arama-bd: #E2DDD5;
  --chart: #3EDBC4;
  --chart2: #F0A94A;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` niteliği her zaman kazansın: aşağıdaki display:flex/grid kuralları
   tarayıcının varsayılan [hidden]{display:none} kuralını eziyordu. */
[hidden] { display: none !important; }

/* ==========================================================================
   BELGE TUVALİ (document canvas) — 26 Ağu 2026
   Sorun: html ve body'nin İKİSİ de saydam kaldığında (ana sayfada
   `body.shader-acik` gövdeyi saydamlaştırıyordu) sayfanın ardındaki tuval
   tarayıcının varsayılan rengine düşüyordu. macOS'ta yukarı/aşağı esnetince
   (rubber band) ve mobil adres çubuğu altında BEYAZ bir şerit çıkıyor,
   koyu sayfayla çakışıyordu.
   Çözüm: tuvali her zaman `html` boyar. Rengi `--tuval`; varsayılanı sayfa
   rengi, ana sayfada (shader açıkken) shader'ın taban rengi — bkz. app.js
   AS_RENK.bg. Gövde saydamlaşsa bile tuval boyalı kalır.
   ========================================================================== */
:root { --tuval: var(--pg); }
:root.shader-acik { --tuval: #0B0908; }   /* = AS_RENK.bg (app.js) */
html { background: var(--tuval); }

body {
  margin: 0;
  background: var(--pg);
  color: var(--tx);
  font-family: "Avenir Next", "Seravek", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; }
.muted { color: var(--mt); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Sayfa genişliği: içerik ortada, iki yanda gerçek boşluk kalsın.
   Tek yerden ayarlanır; tüm bölümler bu ölçüyü kullanır. */
:root { --wrap: 1360px; --gut: 48px; }

/* DISPLAY KESİMİ — TEK ANAHTAR (25 Ağu 2026).
   Hero'daki dev yazı, marka, set başlığı ve binder spread başlığı bu üç
   değeri kullanır; font denemek için yalnız burası değişir.
   Aday 1: "Tanker" 400 · izleme .012em (tıknaz, tek kesim, küçük harfi yok)
   Aday 2: "Red Hat Display" 800 · izleme -.02em (geniş aile, gerçek küçük harf)
   (Hero'daki kayan yazı makarası ve onun punto ölçümü 25 Ağu'da kaldırıldı;
   display kesimi artık sabit puntolu başlıklarda kullanılıyor.) */
:root {
  --display: "Red Hat Display", "Tanker", Archivo, system-ui, sans-serif;
  --display-w: 800;
  --display-ls: -.02em;
}
@media (max-width: 1100px) { :root { --gut: 28px; } }
@media (max-width: 640px)  { :root { --gut: 16px; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ---------------- üst çubuk ---------------- */
/* Çizgi tam genişlikte, içerik .wrap ölçüsünde ortada. */
.topbar {
  /* Şerit YOK (17 Ağu 2026, kullanıcı): navpill her sayfada TEK BAŞINA
     süzülür — arkasında çubuk arka planı yok, içerik altından akar.
     pointer-events: none → boş alanlar tıklamayı içeriğe geçirir;
     çocuklar auto ile tekrar tıklanabilir olur. */
  position: sticky; top: 0; background: transparent; z-index: 10;
  pointer-events: none;
}
.topbar-inner > * { pointer-events: auto; }
.navpill { width: max-content; }
/* Üç sütun: marka SOLDA sabit, nav hapı GERÇEKTEN ORTADA, tema sağda.
   Eskiden marka sol + geri kalan hep birlikte sağa yaslıydı; hap ortada
   görünmüyordu. Yan sütunlar eşit genişlikte olduğu için orta sütun
   ekranın tam ortasına oturur. */
.topbar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.crumb { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--mt); }
.crumb .sep { opacity: .45; margin: 0 6px; }

/* Seçiciler kutu değil METİN gibi durur (Magnific deseni): şeffaf zemin,
   ince özel ok, hover'da hafif dolgu. Set adı satırın vurgusu. */
.crumb select {
  -webkit-appearance: none; appearance: none;
  background-color: transparent; border: 0; border-radius: 7px;
  color: var(--mt); font-size: 13px; font-weight: 500;
  padding: 6px 24px 6px 9px; cursor: pointer;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23808892' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.crumb select:hover { background-color: var(--sf); color: var(--tx); }
.crumb #setPicker {
  background-color: transparent;
  color: var(--tx); font-weight: 650; font-size: 13.5px;
}
.crumb #setPicker:hover { background-color: var(--sf); }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.topbar-inner > .navpill { justify-self: center; }
@media (max-width: 760px) {
  .topbar-inner { grid-template-columns: auto 1fr; row-gap: 10px; }
  .topbar-inner > .navpill { grid-column: 1 / -1; justify-self: stretch; }
}

input[type="search"], select {
  font: inherit; font-size: 13px; color: var(--tx);
  background: var(--sf); border: 1px solid transparent; border-radius: 6px;
  padding: 6px 11px;
}
input[type="search"]::placeholder { color: var(--mt); }

/* Deel tarzı kompakt arama hapı: büyüteç + giriş + ⌘K rozeti */
.searchpill {
  display: flex; align-items: center; gap: 8px; cursor: text;
  background: var(--sf); border: 1px solid transparent; border-radius: 999px;
  padding: 6px 9px 6px 13px; color: var(--mt);
}
.searchpill:focus-within { border-color: var(--bd); }
.searchpill input[type="search"] {
  background: none; border: none; border-radius: 0; padding: 0;
  width: 110px; outline: none; transition: width .18s ease;
}
.searchpill input[type="search"]:focus { width: 220px; }
.searchpill kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  color: var(--mt); background: var(--pg);
  border: 1px solid var(--bd); border-radius: 5px; padding: 2px 6px;
}
select { cursor: pointer; }

.ghost {
  font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--mt); background: transparent;
  border: 1px solid var(--bd); border-radius: 6px; padding: 6px 12px;
}
.ghost:hover { color: var(--tx); }

/* ---------------- set künyesi ---------------- */
main { padding-bottom: 72px; }

.sethead {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 30px 0 0;
}
.sethead-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.setlogo { height: 54px; width: auto; max-width: 150px; object-fit: contain; }
.sethead h1 {
  font-family: var(--display);   /* display kesimi */
  font-size: 31px; font-weight: var(--display-w);
  letter-spacing: var(--display-ls); margin: 0 0 3px;
}
.sethead p { margin: 0; font-size: 13px; }

.status {
  margin: 26px 0 0; padding: 14px 16px; border-radius: 8px;
  background: var(--sf); color: var(--mt); font-size: 13.5px;
}
.noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; color: var(--mt);
}

.tally { margin-left: auto; display: flex; gap: 26px; text-align: right; }
.tally .v { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.tally .l { font-size: 11.5px; color: var(--mt); }

/* ---------------- Kartlar / Desteler geçişi ---------------- */
.viewswitch { display: flex; gap: 22px; margin-top: 24px;
  border-bottom: 1px solid var(--hair); }
.vsw {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--mt);
  background: transparent; border: 0; padding: 0 0 10px;
}
.vsw b { font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.vsw:hover { color: var(--tx); }
.vsw.on { color: var(--tx); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tx); }

/* Deste karoları: kutu/paket görselleri kart oranında değil, kareye yakın.
   KUTU ORANI ÖLÇÜLDÜ (30 Ağu 2026): 41 gerçek sealed görselinde en/boy
   medyan 1,00 · ortalama 0,94 · aralık 0,50–2,08. Tür bazında deste 0,70,
   tin 0,75, booster pack 0,79, ETB 1,00. Yani ürünlerin çoğu KARE ya da
   DİKEY. Kutu 4/3 (1,333) idi, bu dağılımın %90'lık dilimi — ürünler yanlarda
   boşluk bırakıp küçük duruyordu (kullanıcı 30 Ağu'da bildirdi).
   `contain` ile kutunun ortalama doluluğu: 4/3 → %68,2, 1/1 → %77,2.
   Tarama: 0,70'ten 1,50'ye kadar denendi, en iyisi 1/1 çıktı. */
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 26px 22px;
}
.ptile .pshot {
  aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  background: var(--slot); display: grid; place-items: center;
}
/* GÖRSEL KUTUYU AŞIYORDU (30 Ağu 2026). `.pshot` bir grid ve `place-items:
   center`; merkezleme öğeyi GERMEDİĞİ için `height: 100%` yüzdesi belirsiz
   yüksekliğe çözümleniyor ve düşüyordu. Görsel yalnız `width: 100%` alıp
   yüksekliğini kendi oranından hesaplıyor, dikey ürünlerde kutuyu taşıyor,
   `overflow: hidden` de ALTINI KESİYORDU.
   Ölçüldü: 180×180 kutuda booster bundle 180×264, booster pack 180×329.
   Yani dikey görsellerin tamamı kırpıktı — kullanıcı bunu bildirdi.
   Çözüm: görseli mutlak konumla kutuya sabitle. `.noimg` yedeği grid
   merkezlemesinde kalsın diye `place-items` değiştirilmedi. */
.ptile .pshot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.ptile .pname { font-size: 12.5px; font-weight: 600; margin-top: 8px; line-height: 1.3; }
.ptile .pmeta { font-size: 11.5px; color: var(--mt); }

/* Deste karosu: rozetler, sahiplik sayacı, ⋯ menü düğmesi */
.ptile { position: relative; }
.ptile .pshot { position: relative; }
.pbadge {
  position: absolute; right: 8px; top: 8px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--pg); color: var(--tx); border: 1px solid var(--bd);
  border-radius: 999px; padding: 2px 8px;
}
.pbadge.pw { right: auto; left: 8px; font-weight: 600; }
.pown { font-size: 11.5px; color: var(--tx); margin-top: 3px; }
.pmore {
  position: absolute; right: 4px; bottom: 30px;
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mt);
}
.ptile:hover .pmore { background: var(--sf); color: var(--tx); }

.disttoggle { padding: 10px 0 2px; font-size: 13px; color: var(--mt); }
.disttoggle label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.disttoggle b { color: var(--tx); }

.mkthead {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--hair);
}

/* Sağ tık / ⋯ menüsü */
.pctx {
  position: fixed; z-index: 300; min-width: 200px;
  background: var(--pg); border: 1px solid var(--bd); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid;
}
.pctx button {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  border: 0; border-radius: 6px; padding: 8px 10px;
  background: transparent; color: var(--tx);
}
.pctx button:hover { background: var(--sf); }

/* Küçük diyalog (koleksiyona ekle / paket aç) */
.pop { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px; }
.pop[hidden] { display: none; }
.pop-backdrop { position: absolute; inset: 0; background: rgba(8, 9, 10, .62); }
.pop-panel {
  position: relative; z-index: 1; width: min(440px, 100%);
  max-height: 86vh; overflow: auto;
  background: var(--pg); border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}
.pop-panel h3 { margin: 0 0 4px; font-size: 17px; }
.pop-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--mt); }
.pop-f { display: block; font-size: 13px; color: var(--mt); margin: 10px 0; }
.pop-f input, .pop-f select {
  display: block; width: 100%; margin-top: 4px;
  font: inherit; font-size: 13px; color: var(--tx);
  background: var(--sf); border: 1px solid transparent; border-radius: 6px;
  padding: 7px 10px;
}
.pop-err { color: #d33; font-size: 12.5px; }
/* Kimlik diyaloğu (25 Ağu 2026): bilgi notu ve mod değiştirme satırı. */
.pop-not {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--own); 
}
.pop-alt {
  margin: 14px 0 0; font-size: 12.5px; color: var(--mt);
  border-top: 1px solid var(--hair); padding-top: 12px;
}
/* Karşılama sihirbazı (25 Ağu 2026): adım göstergesi + seçim çipleri. */
.kadim {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vurgu); margin-bottom: 6px;
}
.kseckut { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.kseckut.dikey { flex-direction: column; }
.ksec {
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  background: var(--sf); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 10px; padding: 9px 14px;
  transition: border-color .14s ease, background-color .14s ease;
}
.ksec i { display: block; font-style: normal; font-size: 11.5px; color: var(--mt); margin-top: 2px; }
.ksec:hover { border-color: color-mix(in srgb, var(--tx) 30%, var(--bd)); }
.ksec.on {
  background: color-mix(in srgb, var(--vurgu) 14%, var(--sf));
  border-color: var(--vurgu); font-weight: 600;
}
.ksec.on i { color: var(--tx); opacity: .75; }
.kalt-soru { margin: 16px 0 6px; font-size: 13px; font-weight: 600; }
.kalt-soru:first-child { margin-top: 4px; }

/* Dereceli kartı olmayan kullanıcıda derece girişi gizlenir. */
body.derece-gizli .vderece, body.derece-gizli [data-sheet="derece"] { display: none; }

.pop-alt button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--vurgu);
  text-decoration: underline; text-underline-offset: 2px;
}
.pop-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pop-acts button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 6px; padding: 8px 14px;
  background: var(--btn); color: var(--btn-tx);
}
.pop-acts button.sec { background: var(--sf); color: var(--tx); font-weight: 500; }

/* ---------------- binder görünümü ----------------
   "Kasa" paleti binder'a kapsamlı: koyu yeşil zemin, cepler #15241F,
   KENARLIK YOK (ayrım ton farkıyla), altın yalnız ilerleme dolgusu ve
   "+ Ekle" düğmesinde. Kart görselleri tam doygun; olmayanlar silik. */
.binder {
  --b-bg: #0C1613; --b-page: #101C18; --b-sf: #15241F; --b-sf2: #1B2E27;
  --b-hover: #22382F; --b-gold: #A8842C; --b-on-gold: #1C1608;
  --b-tx: #EAF1EE; --b-mt: #8FA79C;
  /* Kap artık GÖRÜNMEZ (16 Ağu 2026): bu yeşil zemin çok eski binder
     tasarımından kalmaydı ve Binder Wall'un üstünde yeşilimsi bir bant
     olarak sızıyordu. --b-* tokenları eski alt bileşenler için duruyor. */
  background: transparent; color: var(--tx);
  border-radius: 0; padding: 0; margin-top: 0;
}
.bhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.blogo { height: 44px; width: auto; }
.bhead-tx h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.bhead-tx p { margin: 2px 0 0; font-size: 13px; color: var(--b-mt); }
.bbar {
  flex: 1 1 160px; height: 3px; border-radius: 2px;
  background: var(--b-sf2); min-width: 120px;
}
.bbar i { display: block; height: 100%; border-radius: 2px; background: var(--b-gold); }

.bspread {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1), opacity 200ms cubic-bezier(.2, .7, .3, 1);
}
.bspread.iki { grid-template-columns: 1fr 1fr; }
.bspread.enter-r { transform: translateX(26px); opacity: 0; }
.bspread.enter-l { transform: translateX(-26px); opacity: 0; }

.bpage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  background: var(--b-page); border-radius: 10px; padding: 14px;
}
.bpocket {
  aspect-ratio: 63 / 88; background: var(--b-sf); border-radius: 6px;
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 180ms cubic-bezier(.2, .7, .3, 1), box-shadow 180ms cubic-bezier(.2, .7, .3, 1);
}
.bpocket img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bpocket:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.bpocket.bos { cursor: default; }
.bpocket.bos:hover { transform: none; box-shadow: none; }
.bpocket.miss img { filter: grayscale(1); opacity: .35; }
.bno {
  position: absolute; right: 7px; bottom: 6px;
  font-size: 11px; color: var(--b-mt);
}
.bekle {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--b-gold); color: var(--b-on-gold);
  border: 0; border-radius: 6px; padding: 4px 11px;
  opacity: 0; pointer-events: none; transition: opacity 150ms;
}
.bpocket:hover .bekle { opacity: 1; pointer-events: auto; }
.bpocket.bos .bekle { display: none; }

.bpager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 0 4px; font-size: 13px; color: var(--b-mt);
}
.bpager button {
  font: inherit; font-size: 15px; cursor: pointer;
  width: 34px; height: 30px; border: 0; border-radius: 7px;
  background: var(--b-sf); color: var(--b-tx);
}
.bpager button:hover:not(:disabled) { background: var(--b-hover); }
.bpager button:disabled { opacity: .35; cursor: default; }

/* Raf: Shopify Editions raf bölümü uyarlaması — kapaklar gerçek bir raf
   pervazının ÜSTÜNDE durur; hover'da kapak kalkar ve "Aç / Düzenle"
   hapları belirir; altta mono dizin listesi. */
.shelfstage {
  background: var(--b-page); border-radius: 12px;
  padding: 10px 8px 26px;
}
.shelfrow {
  position: relative; display: flex; align-items: flex-end; gap: 34px;
  padding: 38px 34px 0;
}
.shelfrow::after {
  /* raf pervazı: kapaklar bunun üstüne basar */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -12px;
  height: 12px; border-radius: 2px 2px 4px 4px; background: var(--b-sf2);
  box-shadow: 0 16px 26px rgba(0, 0, 0, .5);
}
.shelfrow + .shelfrow { margin-top: 46px; }
.scover { position: relative; width: 148px; flex: none; cursor: pointer; }
.scover-face {
  aspect-ratio: 3 / 4; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 12px;
  /* kapak rafa basar: temas gölgesi altta ve dar */
  box-shadow: 0 14px 16px -10px rgba(0, 0, 0, .65), 0 2px 0 rgba(0, 0, 0, .35);
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 220ms cubic-bezier(.2, .7, .3, 1);
}
.scover:hover .scover-face {
  transform: translateY(-8px);
  box-shadow: 0 26px 26px -12px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .35);
}
.scover-ad {
  font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3;
  color: var(--b-tx); word-break: break-word;
}
.bmono {
  font-size: 26px; font-weight: 700; color: var(--b-gold);
  border: 1.5px solid var(--b-gold); border-radius: 50%;
  width: 52px; height: 52px; display: grid; place-items: center; flex: none;
}
.scover-face.bos-kapak {
  background: transparent; box-shadow: none;
  border: 1.5px dashed var(--b-mt); color: var(--b-mt); font-size: 30px;
  justify-content: center;
}
.scover.yeni:hover .scover-face { transform: translateY(-8px); box-shadow: none; }
.scover-acts {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 6px; opacity: 0; pointer-events: none;
  transition: opacity 180ms;
}
.scover:hover .scover-acts { opacity: 1; pointer-events: auto; }
.scover-acts button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 999px; padding: 6px 13px;
  background: #EAF1EE; color: #10221C;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.scover-acts button:hover { background: #fff; }

/* Raf altı dizin (Shopify'daki sezon listesi karşılığı) */
.shelfindex {
  display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 20px 6px 0;
}
.sindex {
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
  border: 0; background: transparent; color: var(--b-tx);
  display: grid; gap: 1px; padding: 4px 6px; border-radius: 6px;
}
.sindex:hover { background: var(--b-sf); }
.sindex .mono { color: var(--b-mt); font-size: 11px; }

/* Düzenle diyaloğu: renk seçimi + tehlikeli sil */
.ebrenkler { display: flex; gap: 8px; margin: 4px 0 8px; }
.ebrenk {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
}
.ebrenk.on { border-color: var(--tx); }
.pop-acts button.tehlike { color: #d33; margin-right: auto; }

/* Özel binder: boş cep + kapak/başlık düğmeleri */
.bpocket.cbos { display: grid; place-items: center; }
.cbos-arti { font-size: 26px; color: var(--b-mt); }
.bpocket.cbos:hover .cbos-arti { color: var(--b-tx); }
.bgeri {
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 0; border-radius: 7px; padding: 7px 12px;
  background: var(--b-sf); color: var(--b-tx);
}
.bgeri:hover { background: var(--b-hover); }
.ppvars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ppvar {
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--bd); border-radius: 999px; padding: 5px 12px;
  background: var(--sf); color: var(--tx);
}
.ppvar:hover { background: var(--sf2); }

/* Omi tarzı header: solda marka, sağda buzlu cam hap kümesi.
   Küme içinde nav linkleri (metin), sonda dolgulu arama hapı (CTA rolü). */
/* MARKA İŞARETİ (25 Ağu 2026, kullanıcı logosu). "Koleksiyon." yazısının
   yerine geçti. Şekil logo.png'nin alfa kanalından MASKE ile alınır, rengi
   background-color verir — renk kaydırmayla akıcı biçimde değişir.
   Kaydırma davranışı (app.js, marka*): --p 0→1 ilerledikçe işaret ortadaki
   nav hapının İÇİNE süzülür (hap sol ucunda ona yuva açar, aşağıda),
   60px → 34px küçülür ve beyazdan marka kırmızısına döner. --p hap da
   okusun diye .topbar'a yazılır; --kayma hap konumundan hesaplanır. */
.brand {
  --kayma: 0px;
  display: block; width: 60px; height: 60px; flex: none;
  /* RENK AYRI İLERLEMEDE (--pr): konum/ölçek yol boyunca akarken renk
     yalnız SON %20'de döner — logo yuvaya girerken kırmızılaşır, yolda
     değil (25 Ağu, kullanıcı: "yolda kırmızıya dönmesin"). */
  background-color: color-mix(in srgb, var(--vurgu) calc(var(--pr, 0) * 100%), var(--tx));
  -webkit-mask: url("/assets/logo.png") left center / contain no-repeat;
  mask: url("/assets/logo.png") left center / contain no-repeat;
  /* 34/60 ≈ 0.567 → bitişte hap içi yüksekliğe (≈40px) rahat sığar */
  transform: translateX(calc(var(--kayma) * var(--p, 0)))
             scale(calc(1 - 0.433 * var(--p, 0)));
  transform-origin: left center;
  position: relative; z-index: 3;     /* hap zemininin ÜSTÜNDE süzülsün */
  text-decoration: none;
}

.navpill {
  display: flex; align-items: center; gap: 2px;
  border-radius: 999px;
  /* Sol dolgu marka yuvası: --p (kaydırma ilerlemesi, .topbar'da) 1'e
     giderken 4 → 48px açılır; logo bu boşluğa oturur, "Ana sayfa"nın
     üstüne binmez. Hap ortalı olduğu için büyüme iki yana eşit dağılır —
     app.js'teki hedef hesabı bu kaymayı (yuva/2) düşer. */
  padding: 4px 4px 4px calc(4px + 44px * var(--p, 0));
  /* Sayfa rengiyle aynı — hap üst çubuktan ayrı bir katman gibi durmasın
     (15 Ağu 2026). Eskiden buzlu cam + açık dolguydu ve koyu sayfada
     kendini ayrı bir kutu olarak gösteriyordu. */
  background: var(--hap-bg); border: 1px solid var(--hap-kenar);
}
.mtab {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  border: 0; border-radius: 999px; padding: 8px 13px;
  background: transparent; color: var(--hap-mt);
  transition: color .15s, background-color .15s;
}
/* Hover NÖTR: yalnız yazı belirginleşir. Kırmızı zemin BULUNULAN sayfanın
   işareti; hover'a da verilince ikisi ayırt edilemiyordu (15-16 Ağu). */
.mtab:hover { color: var(--hap-tx); }
/* Bulunulan sayfanın sekmesi KALICI olarak kırmızı — hangi sayfada olduğun
   bir bakışta okunsun (15 Ağu 2026). Hover'la aynı görünüm; yani üstüne
   geldiğinde de değişmiyor, zaten kırmızı. */
.mtab.on { background: var(--vurgu); color: var(--vurgu-metin); font-weight: 600; }

/* Kümenin sonundaki dolgulu hap: arama (referanstaki beyaz CTA'nın rolü) */
/* Arama: normal yüzey rengi; TIKLANINCA marka kırmızısına döner. */
.navpill .searchpill {
  background: var(--hap-arama-bg); color: var(--hap-mt);
  border: 1px solid var(--hap-arama-bd); margin-left: 4px; padding: 7px 10px 7px 13px;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.navpill .searchpill input[type="search"] { color: var(--hap-tx); width: 84px; }
.navpill .searchpill input[type="search"]:focus { width: 190px; }
.navpill .searchpill input[type="search"]::placeholder { color: var(--hap-mt); opacity: .8; }
.navpill .searchpill kbd {
  color: var(--hap-mt); background: transparent;
  border-color: var(--hap-arama-bd); opacity: .8;
  transition: color .16s ease, border-color .16s ease;
}

/* Odakta: hap komple kırmızı, içindeki her şey okunur kalsın */
.navpill .searchpill:focus-within {
  background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin);
}
.navpill .searchpill:focus-within input[type="search"],
.navpill .searchpill:focus-within svg { color: var(--vurgu-metin); }
.navpill .searchpill:focus-within input[type="search"]::placeholder {
  color: var(--vurgu-metin); opacity: .7;
}
.navpill .searchpill:focus-within kbd { color: var(--vurgu-metin); border-color: currentColor; opacity: .6; }

.crumbrow { padding-top: 2px; padding-bottom: 12px; }

@media (max-width: 640px) {
  .brand { display: none; }
  .navpill { flex: 1; justify-content: space-between; }
}

@media (max-width: 640px) {
  .binder { padding: 14px 12px 10px; }
  .bpage { gap: 8px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bspread, .bpocket { transition: none !important; }
}

/* Fiyat Geçmişi kartı — kullanıcının referansı: koyu yuvarlak kart,
   başlıkta turkuaz geçmiş ikonu, sağda aralık hapları, noktalı dolgulu
   pürüzsüz çizgi + uç nokta. Vurgu rengi tek değişkende (--chart). */
.vprice { font-size: 12.5px; color: var(--tx); font-variant-numeric: tabular-nums; }
.tprice { font-variant-numeric: tabular-nums; }
.pyok-not { font-size: 12.5px; color: var(--mt); margin: 18px 4px; }

.pcard {
  background: var(--sf); border-radius: 16px; padding: 16px 18px 10px;
}
.pcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pcard-head h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 700; margin: 0 !important;
}
.pcard-head h3 svg { color: var(--chart); flex: none; }
.pcard-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.pnow { font-size: 17px; font-weight: 700; }

.pills {
  display: flex; gap: 2px; border-radius: 999px; padding: 3px;
  background: var(--pg);
}
.pills button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 999px; padding: 5px 12px;
  background: transparent; color: var(--mt);
}
.pills button:hover { color: var(--tx); }
.pills button.on { background: var(--btn); color: var(--btn-tx); }
.pills.kucuk button { font-size: 11.5px; padding: 4px 10px; }

.pchart { margin-top: 8px; }
.psvg { width: 100%; height: auto; display: block; }
.pgrid { stroke: var(--hair); stroke-width: 1; }
.pgrid.dikey { opacity: .5; }
.ptik {
  fill: var(--mt); font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.parea { fill: var(--chart); opacity: .07; stroke: none; }
.pline {
  fill: none; stroke: var(--chart); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.pson { fill: var(--chart); stroke: var(--sf); stroke-width: 2.5; }
.pgun { fill: var(--sf); stroke: var(--chart); stroke-width: 1.6; }

/* İKİNCİ SERİ (İkisi görünümü) — Cardmarket.
   Kullanıcı kararı: iki serinin ÇİZGİ STİLİ AYNI, yalnızca rengi farklı.
   Dolgu çift görünümde ikisinde de kapalı (aşağıda .psvg.ikili) — iki alan
   üst üste binince ikisini de okunmaz yapıyordu. */
.pline.iki { stroke: var(--chart2); }
.pson.iki { fill: var(--chart2); }
.ptik.iki { fill: var(--chart2); opacity: .85; }
.plej {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 2px; font-size: 11.5px; color: var(--mt);
}
.plej span { display: inline-flex; align-items: center; gap: 6px; }
.plej span::before {
  content: ""; width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--chart);
}
.plej span.iki::before { background: var(--chart2); }
/* Çift seride her iki dolgu da kapalı — simetrik ve okunur kalsın. */
.psvg.ikili .parea { display: none; }
.plej b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
.plej b.arti { color: var(--own); }
.plej b.eksi { color: #C4564B; }
.pdegisim.bos { display: none; }
.puc {
  fill: var(--mt); font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.piz { stroke: var(--mt); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.pdegisim {
  font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; margin-left: 6px;
}
.pdegisim.arti { color: var(--own); background: color-mix(in srgb, var(--own) 14%, transparent); }
.pdegisim.eksi { color: #C4554D; background: rgba(196, 85, 77, .14); }
.pchart { position: relative; }
.ptip {
  position: absolute; top: 2px; transform: translateX(-50%);
  font-size: 11px; color: var(--tx); background: var(--pg);
  border: 1px solid var(--bd); border-radius: 6px; padding: 3px 8px;
  pointer-events: none; white-space: nowrap;
}

/* Ürün paneli (karoya tıklayınca). Görsel burada karodan BÜYÜK olmalı —
   panelin işi ürünü göstermek. Oran karoyla aynı gerekçeyle 1/1. */
.pdet-shot {
  position: relative;                    /* içteki görsel mutlak konumlanıyor */
  aspect-ratio: 1 / 1; max-height: 46vh; border-radius: 8px; overflow: hidden;
  background: var(--slot); display: grid; place-items: center; margin-bottom: 14px;
}
.pdet-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.pdet .pown { margin: 0 0 8px; }
.pdet-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Açılış: çıkan kart seçimi */
.pop-panel #pullQ {
  width: 100%; font: inherit; font-size: 13px; color: var(--tx);
  background: var(--sf); border: 1px solid transparent; border-radius: 6px;
  padding: 7px 10px; margin: 6px 0;
}
.pull-res { display: grid; gap: 2px; max-height: 180px; overflow: auto; }
.pull-hit {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  border: 0; border-radius: 6px; padding: 7px 9px;
  background: transparent; color: var(--tx);
}
.pull-hit:hover { background: var(--sf); }
.pull-chosen { margin-top: 10px; display: grid; gap: 6px; }
.pull-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: var(--sf); border-radius: 8px; padding: 7px 9px;
}
.pull-row select, .pull-row input {
  font: inherit; font-size: 12.5px; color: var(--tx);
  background: var(--pg); border: 1px solid var(--bd); border-radius: 6px;
  padding: 3px 6px;
}
.pull-row input { width: 56px; }
.pull-row .pull-del {
  margin-left: auto; cursor: pointer; border: 0; background: transparent;
  color: var(--mt); font-size: 13px;
}
.pull-row .pull-del:hover { color: var(--tx); }

/* ---------------- filtre çipleri ---------------- */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 22px 0 4px; }
.chip {
  font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--mt); background: var(--sf);
  border: 0; border-radius: 999px; padding: 6px 14px;
}
.chip b { font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--tx); }
.chip.on { background: var(--btn); color: var(--btn-tx); font-weight: 600; }
.chips-spacer { flex: 1; }
.sortwrap { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* ---------------- katalog ---------------- */
.catalog { padding-top: 8px; }

.rsec { padding-top: 30px; }
.rsec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.rsec-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.rsec-head .ct { font-size: 12.5px; color: var(--mt); }
.rsec-head .own { margin-left: auto; font-size: 12.5px; color: var(--mt); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 26px 22px;
}

.tile { position: relative; }
.tile .shot { cursor: pointer; }
.shot {
  position: relative; aspect-ratio: 63 / 88; border-radius: 6px;
  overflow: hidden; background: var(--slot);
}
.shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .18s ease, filter .18s ease;
}
.tile.missing .shot img { filter: grayscale(1); opacity: .45; }
.tile.missing:hover .shot img { opacity: .62; }

/* köşe rozeti: sahip olunanda adet, eksikte ekle düğmesi */
.corner {
  position: absolute; right: 6px; top: 6px;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; padding: 3px 8px; min-width: 22px;
  line-height: 1.35; box-shadow: var(--shadow);
}
.corner.have { background: var(--own); color: var(--own-tx); }
.corner.add { background: var(--chip); color: var(--chip-tx); font-weight: 600; }
.corner:hover { filter: brightness(1.06); }

.minus {
  position: absolute; left: 6px; top: 6px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--chip); color: var(--chip-tx);
  border: 0; border-radius: 999px; width: 22px; height: 22px; line-height: 1;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .15s ease;
}
.tile:hover .minus, .minus:focus-visible { opacity: 1; }

.watch {
  position: absolute; right: 6px; bottom: 6px;
  font: inherit; font-size: 11px; cursor: pointer;
  background: var(--chip); color: var(--chip-tx);
  border: 0; border-radius: 999px; padding: 3px 8px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .15s ease;
}
.tile:hover .watch, .watch:focus-visible, .watch.on { opacity: 1; }
.watch.on { font-weight: 700; }


.tname { font-size: 12.5px; font-weight: 600; margin-top: 7px; line-height: 1.3; }
.tno { font-size: 11.5px; color: var(--mt); }
.tile.missing .tname { color: var(--mt); }

/* ---------------- boş durum / alt bilgi ---------------- */
.empty { padding: 60px 0; text-align: center; color: var(--mt); font-size: 14px; }
.ara-ozet { margin: 2px 0 10px; color: var(--mt); font-size: 12.5px; }

/* ==========================================================================
   Kart detayı — aynı sayfada açılan panel
   Düzen kaynağı: Reddit koleksiyon modalı (görsel solda, künye sağda),
   HelloFresh (modal içi bilgi tabloları), mymind (koyu fon + iki sütun).
   ========================================================================== */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(8, 9, 10, .62); }

.sheet-panel {
  position: relative; z-index: 1;
  width: min(1020px, 100%); max-height: min(88vh, 820px);
  background: var(--pg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
}
.sheet-x {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border: 0; border-radius: 999px;
  background: var(--sf); color: var(--tx);
}
.sheet-x:hover { background: var(--sf2); }
/* min-height:0 şart: flex sütunda taşan gövde paneli uzatıp merkezden
   kaydırıyordu; böylece panel ekranda ortalı kalır, gövde içinde kayar. */
.sheet-body { overflow: auto; min-height: 0; }

/* Büyük kart görseli: tıklayınca tam ekran büyütme */
.lightbox {
  position: fixed; inset: 0; z-index: 200; cursor: zoom-out;
  background: rgba(8, 9, 10, .82); display: grid; place-items: center;
  padding: 32px;
}
.lightbox img {
  max-width: min(92vw, 640px); max-height: 92vh;
  border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.cd { display: grid; grid-template-columns: 420px 1fr; gap: 0; }
@media (max-width: 760px) { .cd { grid-template-columns: 1fr; } }

.cd-art { background: var(--sf); padding: 26px; display: flex; align-items: flex-start; justify-content: center; }
.cd-art img { width: 100%; max-width: 370px; height: auto; border-radius: 10px; display: block; cursor: zoom-in; }
/* Geniş ekranda görsel yapışkan ve DİKEYDE ORTALI: sol kutu panelin görünür
   yüksekliğini tamamen kaplar (sheet-panel max-height ile aynı değer), görsel
   flex ile ortalanır. Kutu tam yüksekliği boyadığı için kaydırma sırasında
   üstte/altta boşluk görünmez. */
@media (min-width: 761px) {
  .cd-art {
    position: sticky; top: 0; align-self: start;
    height: min(88vh, 820px);
    align-items: center;
  }
}

.cd-info { padding: 26px 28px 28px; min-width: 0; }
.cd-info h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; padding-right: 34px; }
.cd-sub { font-size: 13px; color: var(--mt); margin: 0 0 18px; }

.cd-acts { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.cd-acts button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 6px; padding: 8px 14px;
  background: var(--btn); color: var(--btn-tx);
}
.cd-acts button.sec { background: var(--sf); color: var(--tx); font-weight: 500; }
.cd-acts button.sec:hover { background: var(--sf2); }
.cd-acts button.sec.fav.on { color: var(--fav); background: color-mix(in srgb, var(--fav) 16%, var(--sf)); }
.cd-qty { display: inline-flex; align-items: center; gap: 0; background: var(--sf); border-radius: 6px; overflow: hidden; }
.cd-qty button { background: transparent; color: var(--tx); padding: 8px 12px; font-weight: 700; }
.cd-qty span { padding: 0 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cd-sec { border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 16px; }
.cd-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.cd-sec h3 {
  font-size: 11.5px; font-weight: 700; color: var(--mt);
  letter-spacing: .04em; margin: 0 0 10px; text-transform: none;
}

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px; }
.kv div .k { font-size: 11.5px; color: var(--mt); display: block; }
.kv div .v { font-size: 14px; font-weight: 600; }

.mv { display: flex; flex-direction: column; gap: 10px; }
.mv-row { display: flex; align-items: baseline; gap: 10px; }
.mv-row .cost { font-size: 11.5px; color: var(--mt); white-space: nowrap; }
.mv-row .nm { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.mv-row .dmg { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-eff { font-size: 13px; color: var(--mt); margin: 2px 0 0; }
.mv-kind { font-size: 11px; color: var(--mt); border: 1px solid var(--bd); border-radius: 999px; padding: 1px 7px; }

/* Varyant satırları: koleksiyona ekleme burada, varyant bazında yapılır. */
.vrows { display: flex; flex-direction: column; gap: 6px; }
.vrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--sf); border-radius: 7px; padding: 7px 8px 7px 12px;
}
.vrow.has { background: var(--sf2); }
.vname { font-size: 13.5px; font-weight: 600; }

/* DERECELİ (slab) KOPYALAR
   Supabase modeliyle aynı: her derece ayrı bir kayıttır, ham adetten bağımsız.
   Sarmalayıcı satırın zeminini taşır ki dereceli satırlar da vurguya dahil olsun. */
.vrowwrap { background: var(--sf); border-radius: 7px; }
.vrowwrap.has { background: var(--sf2); }
.vrowwrap .vrow { background: none; }
.gtogg {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  color: var(--mt); background: transparent;
  border: 1px solid var(--bd); border-radius: 999px; padding: 4px 8px;
}
.gtogg:hover { color: var(--tx); border-color: var(--mt); }
.gwrap:empty { display: none; }
.grow {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 46px;
}
.gtag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--own-tx); background: var(--own);
  border-radius: 999px; padding: 2px 9px;
}
.gctl { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.gctl button {
  font: inherit; font-size: 13px; cursor: pointer; width: 24px; height: 24px;
  color: var(--tx); background: transparent; border: 0; border-radius: 5px;
}
.gctl button:hover { background: var(--sf); }
.gform {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 8px 46px;
}
.gform select {
  -webkit-appearance: none; appearance: none;
  background: var(--pg); border: 1px solid var(--bd); border-radius: 6px;
  color: var(--tx); font-size: 11.5px; padding: 4px 9px; cursor: pointer;
}
.gekle {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--btn-tx); background: var(--btn);
  border: 0; border-radius: 6px; padding: 5px 12px;
}
.vlang { font-size: 11px; color: var(--mt); }
.vctl { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.vctl button {
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: var(--pg); color: var(--tx);
}
.vctl button:hover:not(:disabled) { background: var(--bd); }
.vctl button:disabled { opacity: .35; cursor: default; }
.vqty { min-width: 26px; text-align: center; font-size: 13.5px; font-weight: 700; }

.cd-none { font-size: 13px; color: var(--mt); }

/* ==========================================================================
   ALTBİLGİ (3 Eyl 2026, ikinci düzen) — yazılar üstte, sahne altta, sayfa
   sahnenin alt kenarıyla biter. Sahnenin önünde duran dev marka yazısı
   3 Eyl'de kullanıcı kararıyla kaldırıldı.
   VİDEO OLDUĞU GİBİ (kullanıcı kararı): siyah zemin SİLİNMEDİ. Alfa denendi
   ve bırakıldı — sanattaki dumanlar neredeyse siyah çizildiği için anahtar
   alevlerin çevresinde kirli bir çerçeve bırakıyordu. Bunun yerine footer'ın
   zemini videonun kendi siyahına eşitlendi (#03080C, ilk karenin üst bant
   medyanı) ve videonun üst kenarı 90 px eritildi; kodek siyahı bir tık
   kaydırsa bile dikiş görünmez. Zemin iki temada da aynı: sanat siyah
   üstüne çizilmiş, açık zeminde duramaz.
   Dosyalar assets/footer: ates.mp4 (görüntü akışı kaynaktan aynen kopya,
   sessiz ses akışı atıldı) · ates_720.mp4 (dar ekran) · poster.webp (ilk kare).
   Üst kenar her sayfada arkadaki zemine erir (gradyan .foot üstünde).
   ========================================================================== */
.foot {
  --foot-bg: #03080C; --foot-tx: #EDE9E3; --foot-mt: #9A948C;
  --foot-hair: rgba(255, 255, 255, .10);
  position: relative; overflow: hidden; margin-top: 0;
  /* Üst kenar HER sayfada erir: ana sayfada kırmızı gradyandan, katalog ve
     binderda sayfanın sıcak kömür zemininden (#14110F) footer'ın mavi-siyahına
     geçiyor. Sert sınır iki rengi de yanlış gösteriyordu. */
  background: linear-gradient(to bottom, transparent 0, var(--foot-bg) 220px);
  color: var(--foot-mt); font-size: 13px; line-height: 1.5;
}
.foot-ust { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 0; }
.foot-govde {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
}
.foot-marka { max-width: 42ch; }
.foot-logo {
  display: block; width: 36px; height: 36px; margin-bottom: 14px;
  background: var(--foot-tx);
  -webkit-mask: url("/assets/logo.png") left center / contain no-repeat;
  mask: url("/assets/logo.png") left center / contain no-repeat;
}
.foot-ad {
  margin: 0 0 8px; color: var(--foot-tx); font-size: 19px;
  font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls);
}
.foot-slogan { margin: 0; }
.foot-sutun h3 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--foot-tx);
}
.foot-sutun a {
  display: block; width: fit-content; padding: 3px 0;
  color: var(--foot-mt); text-decoration: none; transition: color .15s ease;
}
.foot-sutun a:hover { color: var(--foot-tx); }
.foot-sutun a:focus-visible, .foot-dil:focus-visible {
  outline: 2px solid var(--foot-tx); outline-offset: 3px; border-radius: 4px;
}
.foot-sutun p { margin: 0 0 8px; }
.foot-dil {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
  color: var(--foot-tx); font-family: inherit; font-size: 12px; font-weight: 600;
  line-height: 1; letter-spacing: .04em;
  transition: background .18s ease, border-color .18s ease;
}
.foot-dil:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
/* Yasal satır .foot-alt'in DIŞINDA, düz bir blok. Esnek kutu ya da ızgara
   öğesi yapıldığında dar ekranda içerik genişliğine büyüyüp kadrajı aşıyordu;
   düz blok her motorda kapsayıcı genişliğinde sarar. */
.foot-alt {
  display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline;
  padding-top: 64px; font-size: 12px;
}
.foot-telif { margin: 0; color: var(--foot-tx); white-space: nowrap; }
.foot-sayim { margin: 0; }
.foot-yasal { margin: 10px 0 0; max-width: 92ch; font-size: 12px; }
/* Sahne: yüksekliği görüntü oranını izler (538/1276 ≈ .42), 640'ta durur.
   Geniş ekranda cover ÜSTTEN kırpar (alev uçları), yanlardan değil: bulutlar
   çerçeveden taştığı için yan kesik bir kutu gibi görünürdü. Sahne telif
   satırının hemen altından başlar, alevler yazının arkasına doğru yükselir. */
.foot-sahne { position: relative; height: clamp(240px, 42vw, 640px); margin-top: -28px; }
.foot-video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 100%; background: var(--foot-bg);
  /* Üst kenar eritilir: videonun siyahı ile footer'ın zemini aynı değerde,
     ama kodek sınırlı/tam aralık farkı bir tık kaydırabiliyor. Videonun üst
     şeridi zaten boş siyah, eritmenin görsel bedeli yok. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
}
@media (max-width: 900px) {
  .foot-govde { grid-template-columns: 1fr 1fr; }
  .foot-marka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-ust { padding-top: 56px; }
  .foot-govde { grid-template-columns: 1fr; gap: 22px; }
  .foot-alt { padding-top: 40px; }
  .foot-sahne { height: clamp(220px, 72vw, 340px); margin-top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 640px) {
  .searchpill kbd { display: none; }
  .searchpill input[type="search"]:focus { width: 150px; }
  .tally { margin-left: 0; gap: 18px; }
}

/* Setin diğer dillerdeki adı (equivalence_key ile bağlı kayıtlardan) */
.setalts { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.setalts span i { font-style: normal; color: var(--mt); margin-right: 5px; }

/* ---------------- detaylı filtre paneli ---------------- */
.filters {
  margin-top: 14px; background: var(--sf); border-radius: 10px;
  padding: 18px 20px 14px;
}
.fgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 28px; }
.fgroup h3 {
  font-size: 11.5px; font-weight: 700; color: var(--mt);
  margin: 0 0 9px; letter-spacing: .03em;
}
.fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.fopt {
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: var(--pg); color: var(--tx);
  border: 0; border-radius: 999px; padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.fopt:hover { background: var(--bd); }
.fopt.on { background: var(--btn); color: var(--btn-tx); font-weight: 600; }
.fopt .n { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }

.fsearch {
  font: inherit; font-size: 13px; width: 100%;
  background: var(--pg); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 6px; padding: 7px 11px;
}
.fnames { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 118px; overflow: auto; }

.fbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bd);
  font-size: 13px;
}
.fbar .ghost { margin-left: auto; }
#filterBtn b { font-weight: 700; }

/* Varyant satırında küçük görsel: varyantın KENDİ görseli (damga vb. görünür).
   Tıklanınca soldaki büyük görsel o varyanta geçer. */
.vthumb {
  width: 34px; height: 47px; border-radius: 3px; object-fit: cover;
  cursor: pointer; flex-shrink: 0; background: var(--slot);
  display: block;
}
.vthumb:hover { outline: 2px solid var(--mt); outline-offset: 1px; }
.vthumb.on { outline: 2px solid var(--tx); outline-offset: 1px; }
.vthumb-bos { cursor: default; }
.vthumb-bos:hover { outline: none; }

/* Çeviri görünümünde EN'e düşen alanların rozeti */
.enfall { font-style: normal; font-size: 11px; color: var(--mt);
  border: 1px solid var(--bd); border-radius: 4px; padding: 0 4px; }

/* Izgara varyant açılımı: kart adının yanındaki varyant rozeti */
.tvar {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  color: var(--mt); background: var(--sf); border-radius: 5px;
  padding: 1px 6px; vertical-align: 1px; white-space: nowrap;
}

/* ==========================================================================
   KART TAM SAYFASI  /kart/{id}
   Düzen kaynağı: Collectr ürün sayfası — solda yapışkan görsel, ortada
   künye + fiyat, sağda koleksiyon. Panel "hızlı bakış", bu sayfa "inceleme".
   ========================================================================== */
.kartsayfa { padding: 26px 0 60px; }

.kbaslik { border-bottom: 1px solid var(--hair); padding-bottom: 18px; margin-bottom: 24px; }
.kyol { font-size: 12px; color: var(--mt); margin-bottom: 10px; }
.kyol .sep { opacity: .45; margin: 0 6px; }
.kbaslik-ic { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.kbaslik h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 4px; }
.kalt { font-size: 13px; color: var(--mt); margin: 0; }
.kfiyat { margin-left: auto; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }

/* Üç sütun: görsel · ana içerik · yan kutu. Dar ekranda tek sütuna iner. */
.kduzen { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 24px; }
@media (max-width: 1180px) { .kduzen { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 820px)  { .kduzen { grid-template-columns: 1fr; } }

.kgorsel { position: sticky; top: 96px; align-self: start; }
.kgorsel img { width: 100%; border-radius: 12px; display: block; }
.knogorsel {
  aspect-ratio: 63 / 88; border-radius: 12px; background: var(--sf);
  display: grid; place-items: center; color: var(--mt); font-size: 12px;
}
.kgeri {
  margin-top: 12px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--mt); background: transparent;
  border: 1px solid var(--bd); border-radius: 999px; padding: 7px 14px; width: 100%;
}
.kgeri:hover { color: var(--tx); border-color: var(--mt); }
.kfav {
  margin-top: 8px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--mt); background: transparent;
  border: 1px solid var(--bd); border-radius: 999px; padding: 7px 14px; width: 100%;
}
.kfav:hover { color: var(--tx); border-color: var(--mt); }
.kfav.on { color: var(--fav); border-color: color-mix(in srgb, var(--fav) 55%, var(--bd)); }

.korta, .ksag { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kbox { background: var(--sf); border-radius: 12px; padding: 18px 20px; }
.kbox h3 {
  font-size: 12px; font-weight: 700; color: var(--mt);
  letter-spacing: .04em; margin: 0 0 14px;
}
.kbox .kv { gap: 14px 20px; }
.kbox .vrows { gap: 6px; }
.kbox .vrowwrap { background: var(--pg); }
.kbox .vrowwrap.has { background: var(--sf2); }

/* Kart sayfasında fiyat kutusu da diğer kutularla aynı zemini kullanır */
.kartsayfa .pcard { background: var(--sf); border-radius: 12px; padding: 18px 20px; }

.kpazar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--hair);
}
.kpazar:first-child { border-top: 0; }
.kpazar-ad { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.kpazar a { font-size: 12px; color: var(--mt); text-decoration: none;
  border: 1px solid var(--bd); border-radius: 999px; padding: 3px 10px; }
.kpazar a:hover { color: var(--tx); border-color: var(--mt); }

/* Fiyat ölçü kırılımı: büyük rakamın hangi ölçü olduğunu ve elimizdeki diğer
   ölçüleri (en düşük / ortalama) yazar. İki pazar farklı ölçüler yayımlıyor;
   etiketsiz tek sayı "fiyat yanlış" izlenimi veriyordu. */
.pkirilim {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 11.5px; color: var(--mt); margin: -2px 0 10px;
}
.pkir-grup { white-space: nowrap; }
.pkir-grup b { color: var(--tx); font-weight: 600; }

/* Fiyatı olmayan varyant: gizlenmez, kaynağın susduğu açıkça yazılır.
   ("Asla tahminle veri üretme · eksik veri gizlenmez" kuralı.) */
.vprice-yok {
  font-size: 11px; color: var(--mt); opacity: .75;
  font-style: italic; white-space: nowrap;
}

/* ==========================================================================
   YAN MENÜ (13 Ağu 2026) — katalog gezinme
   Üstteki üç açılır kutu (oyun › dil › set) yerini soldaki panele bıraktı.
   Panel sayfanın soluna YAPIŞIK DEĞİL: .wrap boşluğunun içinde durur,
   köşeleri yuvarlak, kendi zeminine oturur.
   Eski seçiciler DOM'da kalır (gizli) — yan menü onları sürer, böylece
   mevcut yükleme mantığı hiç değişmedi.
   ========================================================================== */

#crumbrow { display: none; }

/* Üst çubuk sticky (top:0, ~68px). Panel onun altına YAPIŞMASIN diye
   sticky durağı çubuk boyu + nefes payı kadar aşağıda. */
:root { --ustcubuk: 72px; }

.sayfaduzen {
  display: grid;
  grid-template-columns: 221px minmax(0, 1fr);
  gap: 88px;
  align-items: start;
  /* Panel sayfa kenarına daha yakın dursun (yapışık değil). İçeriğin yeri
     değişmesin diye kısılan sol boşluk `gap`ten geri veriliyor. */
  padding-left: 9px;
}

.icerik { min-width: 0; }        /* ızgara taşmasını engeller */

.yanmenu {
  /* Üstten hizalı ve sticky. DİKEY ORTALAMA KALDIRILDI (14 Ağu 2026): set
     künyesi tam genişlikte üst banda taşınınca ortalama panelin ekranın
     141px altına taşmasına ve katalogdan 88px aşağıda başlamasına yol açtı.
     Bant üstteyken doğru hizalama katalogla aynı çizgide başlamaktır. */
  position: sticky;
  top: calc(var(--ustcubuk) + 18px);
  /* Katalogla tam aynı çizgide başlayınca üste fazla yakın duruyordu;
     biraz aşağıdan başlasın (14 Ağu 2026). */
  margin-top: 26px;
  display: flex;
  align-items: stretch;
}

.ym-kart {
  width: 100%;
  /* Ekran boyunca uzayıp "ray" gibi görünmesin — sınırlı bir kart gibi dursun,
     içi kendi kayar. Küçük ekranda yine ekrana göre kısalır. */
  max-height: min(calc(100vh - var(--ustcubuk) - 40px), 660px);
  display: flex;
  flex-direction: column;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ym-govde {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  scrollbar-width: thin;
}
.ym-govde::-webkit-scrollbar { width: 8px; }
.ym-govde::-webkit-scrollbar-thumb {
  background: var(--bd); border-radius: 8px; border: 2px solid var(--sf);
}

/* --- oyun grubu: tıklanamaz küçük etiket --- */
.ym-oyungrup + .ym-oyungrup { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hair); }
.ym-oyunad {
  padding: 1px 9px 4px;
  color: var(--mt); font-size: 9.5px; font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase;
}

/* --- dil = ANA BAŞLIK (1. seviye) --- */
.ym-dilblok + .ym-dilblok { margin-top: 1px; }

.ym-bas {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  background: none; border: 0; border-radius: 10px;
  color: var(--tx); font: inherit; font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.ym-bas:hover { background: var(--sf2); }
.ym-dilblok.acik > .ym-bas { background: var(--sf2); }
/* Çeviri diline geçildiyse kaynağı olan İngilizce başlığı hafifçe imlensin. */
.ym-bas.yakin { color: var(--mt); }
.ym-bas.yakin::after { content: "·"; margin-left: 6px; opacity: .6; }

.ym-ok {
  margin-left: auto; flex: none;
  transition: transform .16s ease;
  opacity: .5;
}
.ym-dilblok.acik > .ym-bas .ym-ok,
.ym-seri.acik > .ym-seribas .ym-ok { transform: rotate(180deg); }

.ym-ic { padding: 2px 0 5px 5px; }

/* --- çeviri satırı: ana başlık DEĞİL, İngilizce setlerin dil görünümü --- */
.ym-ceviri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 2px 4px 10px;
}
.ym-cevirilbl {
  width: 100%; padding: 2px 6px 3px;
  color: var(--mt); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}
.ym-dil {
  padding: 4px 9px;
  border: 1px solid var(--bd); border-radius: 999px;
  background: var(--pg); color: var(--mt);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.ym-dil:hover { color: var(--tx); border-color: var(--mt); }
.ym-dil.on { background: var(--btn); color: var(--btn-tx); border-color: var(--btn); }

/* --- seri (2. seviye) --- */
.ym-seribas {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 4.5px 9px;
  background: none; border: 0; border-radius: 8px;
  color: var(--mt); font: inherit; font-size: 11.5px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.ym-seribas:hover { background: var(--sf2); color: var(--tx); }
.ym-seri.acik > .ym-seribas { color: var(--tx); font-weight: 600; }
.ym-sayi { font-size: 10px; opacity: .55; font-variant-numeric: tabular-nums; }

/* --- set (3. seviye) --- */
.ym-setler { padding: 0 0 3px 8px; margin-left: 3px; border-left: 1px solid var(--hair); }

.ym-set {
  width: 100%;
  display: block;
  padding: 3.5px 9px;
  background: none; border: 0; border-radius: 7px;
  color: var(--mt); font: inherit; font-size: 11.5px;
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ym-set:hover { background: var(--sf2); color: var(--tx); }
.ym-set.on { background: var(--btn); color: var(--btn-tx); font-weight: 600; }
.ym-set .ym-adet { float: right; opacity: .55; font-size: 10px; margin-left: 8px; }
.ym-set.on .ym-adet { opacity: .75; }

.ym-bos { padding: 14px 12px; color: var(--mt); font-size: 12.5px; }

/* --- mobil: panel çekmeceye dönüşür --- */
.ym-ac { display: none; }
.ym-perde { display: none; }

@media (max-width: 900px) {
  .sayfaduzen { grid-template-columns: minmax(0, 1fr); }

  .ym-ac {
    display: inline-flex; align-items: center; gap: 7px;
    position: sticky; top: 8px; z-index: 30;
    margin: 8px 0 0 var(--gut);
    padding: 8px 14px;
    background: var(--sf); color: var(--tx);
    border: 1px solid var(--bd); border-radius: 999px;
    font: inherit; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow); cursor: pointer;
  }

  .yanmenu {
    position: fixed; z-index: 60;
    top: 12px; bottom: 12px; left: 12px;
    height: auto; width: min(300px, 86vw);
    align-items: stretch;
    transform: translateX(calc(-100% - 16px));
    transition: transform .22s ease;
  }
  .yanmenu.acik { transform: none; }
  .ym-kart { max-height: none; height: 100%; }

  .ym-perde {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, .42);
  }
  .ym-perde[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .yanmenu, .ym-ok { transition: none; }
}

/* (Çeviri dili rozeti kaldırıldı — o diller artık menüde hiç görünmüyor.) */

/* Üst bant: set künyesi + sekmeler + filtreler. Yan menünün sağında değil,
   sayfanın tam genişliğinde ve sol kenara hizalı durur (14 Ağu 2026 —
   içerik sütununa konduğunda sol üstte boş alan kalıp sayfa kırık görünüyordu).
   Katalog dışı görünümlerde (binder/kart) içindekiler gizlenir ve bant
   kendiliğinden yok olur; boş kalıp yer kaplamasın diye alt boşluk sıfırlanır. */
.ustband { padding-top: 22px; }
.ustband:not(:has(> :not([hidden]))) { padding: 0; }

/* Bant ayrıldığı için üst dolgu artık orada; ızgara üstten yapışmasın diye
   küçük bir pay bırakılır. */
.sayfaduzen { padding-top: 6px; }

/* Kart detay sayfası (/kart/{id}): yan menü gizli, içerik tam genişlik ve
   sayfa gutter'ına hizalı. Aksi hâlde detay sayfası menü kadar sağa itiliyordu
   (14 Ağu 2026). */
.sayfaduzen.yalnizicerik {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-left: var(--gut);
}
/* ==========================================================================
   YÖN A — "FOLYO"  (14 Ağu 2026)
   Tez: kart zaten en renkli nesne; arayüz onunla yarışmaz, onu çerçeveler.
   RENK SÜS DEĞİL KODLAMADIR — tek kaynağı NADİRLİK ve FİYAT HAREKETİ.

   Bu dosya `style.css`'in SONUNA eklenir. Hiçbir mevcut kural silinmez;
   yalnız token'lar yeniden tanımlanır. Geri dönüş = bu bloğu silmek.
   ========================================================================== */

/* ---- 1) marka + durum renkleri (iki temada da tanımlı) ---- */
:root {
  /* Marka kırmızısı: Ferrari (#FF2800) turuncuya çalar; bu ton daha KIZIL,
     hafif kızılcık tarafında — benzer canlılık, ayrı kimlik. */
  --vurgu:      #D6122E;   /* açık temada okunur kalsın diye koyu */
  --vurgu-metin:#FFFFFF;
  --artis:      #0E8F5E;
  /* ⚠️ Düşüş rengi vurguyla ÇAKIŞMAMALI: marka kırmızısı parlak ve doygun,
     düşüş kırmızısı mat ve koyu. İkisi yan yana ayırt edilebilir. */
  --azalis:     #9E3540;

  /* Nadirlik ramp'i — kademeler AYIRT EDİLEBİLİR kalmalı, hepsi turkuaz olamaz.
     Vurgu rengi (tuşlar, seçili öğe) ayrı bir eksendir ve yalnız turkuazdır. */
  --n0: #6B7280;  /* sınıflandırılmamış */
  --n1: #6B7280;  /* common      */
  --n2: #3F8F70;  /* uncommon    */
  --n3: #2F6FBA;  /* rare        */
  --n4: #7C4DD6;  /* ultra / illustration */
  --n5: #D6122E;  /* secret / hyper — en üst kademe, marka kırmızısı */
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --vurgu: #FF2A45; --vurgu-metin: #FFFFFF;
    --artis: #35D6C4; --azalis: #C9707C;
    --n1: #7C8494; --n2: #4EB58C; --n3: #4E93E0;
    --n4: #A47BFF; --n5: #FF2A45;
  }
}
:root[data-theme="dark"] {
  --vurgu: #FF2A45; --vurgu-metin: #FFFFFF;
  --artis: #35D6C4; --azalis: #C9707C;
  --n1: #7C8494; --n2: #4EB58C; --n3: #4E93E0;
  --n4: #A47BFF; --n5: #FF2A45;
}

/* Grafik renkleri marka diline bağlanır (eskiden bağımsız turkuaz/turuncuydu) */
:root, :root[data-theme="dark"], :root[data-theme="auto"] {
  --chart: var(--vurgu);
  --chart2: #F0A94A;      /* ikinci seri — Cardmarket; ayırt edici kalsın */
}

/* ---- 2) NADİRLİK grup başlığı ---- */
/* Başlığın solundaki renk şeridi 29 Ağu 2026'da kullanıcı isteğiyle
   KALDIRILDI. Nadirlik kademesi zaten başlık metninin kendisinde yazıyor;
   şerit ikinci bir gösterge olarak yer kaplıyordu. Şeridi geri istersen
   `.rsec-head h2::before` kuralı git geçmişinde (c0a4a94 öncesi) duruyor.
   --n0..--n5 değişkenleri artık HİÇBİR yerde kullanılmıyor; geri dönmek
   kolay olsun diye bırakıldı. Nadirlik rengine bir daha ihtiyaç olmazsa
   onlar da silinebilir. */
.rsec-head h2 {
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---- 3) SENDE / EKSİK: durum forma da girsin, yalnız sayıya değil ---- */
.tile { position: relative; }

/* Sende olan kartın kenarında ince folyo çizgisi */
.tile:not(.missing)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--own);
}
/* Eksik kart geri çekilir — ızgarada göz sende olanlara gider */
.tile.missing .shot img { opacity: .82; }
.tile.missing:hover .shot img { opacity: 1; }

/* ---- 4) FİYAT HAREKETİ ---- */
.yuk, .price-up   { color: var(--artis); }
.dus, .price-down { color: var(--azalis); }

/* ---- 5) Vurgu rengi etkileşimli yerlerde ---- */
:focus-visible { outline-color: var(--vurgu); }

/* ---- 6) BEKLEYEN HİZA DÜZELTMESİ ----
   Yan menü markayla ve üst bantla aynı çizgide başlamalı. Daha önce sabit
   49px verilmişti (Collectr ölçüsü) ama o onların SAYFA gutter'ıydı; bizimki
   88px olduğu için panel 39px sola taşıyıp hizayı bozuyordu. */
.sayfaduzen { padding-left: var(--gut); gap: 44px; }

/* ---- 7) TUŞ ANIMASYONLARI (14 Ağu 2026) ------------------------------------
   Ölçülü tutuldu: yalnız hover kalkışı + basış çökmesi + yumuşak renk geçişi.
   Süre kısa (120-160ms) — arayüz "yavaş" hissettirmemeli. Hareketi azalt
   tercihi açıksa hepsi kapanır. */

.chip, .vsw, .mtab, .ghost, .ym-bas, .ym-seribas, .ym-set, .ym-dil,
button.corner, .sortwrap select, #themeBtn {
  transition:
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .18s cubic-bezier(.34, 1.56, .48, 1);   /* hafif yaylanma */
}

/* Üstüne gelince bir tık kalkar (pushable OLMAYAN öğeler) */
.vsw:hover, .mtab:hover { transform: translateY(-1.5px); }
.vsw:active, .mtab:active, .ym-set:active, .ym-bas:active, .ym-seribas:active {
  transform: translateY(0) scale(.95);
}

/* Yan menüdeki satırlar kalkmaz (liste titremesin), yalnız içeri kayar */
.ym-set:hover, .ym-seribas:hover, .ym-bas:hover { transform: translateX(4px); }

.vsw.on { box-shadow: inset 0 -3px 0 var(--vurgu); }

/* Akordeon oku zaten dönüyordu; süresini tuşlarla aynı ritme getir */
.ym-ok { transition: transform .16s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .chip, .vsw, .mtab, .ghost, .ym-bas, .ym-seribas, .ym-set, .ym-dil,
  button.corner, .sortwrap select, #themeBtn, .ym-ok { transition: none; }
  .vsw:hover, .mtab:hover, .ym-set:hover, .ym-seribas:hover, .ym-bas:hover,
  .vsw:active, .mtab:active { transform: none; }
  .chip, .ghost, #themeBtn, button.corner {
    transform: none !important; box-shadow: 0 2px 0 var(--kenar) !important;
  }
}

/* ---- 8) "PUSHABLE" TUŞLAR (14 Ağu 2026) -----------------------------------
   Kullanıcının istediği 3B basılabilir düğme. Kaynak kalıp üç iç katman
   kullanıyor (.shadow / .edge / .front); bizim tuşlar tek <button> olduğu için
   aynı etki TEK ÖĞEDE kuruldu:
     • yüzey  = elemanın kendi background'u  (.front)
     • kenar  = düz (bulanıksız) box-shadow  (.edge) ← kırmızı alt parça budur
     • hareket= translateY
   Basış 34ms — kasıtlı olarak çok kısa; dokunsal his oradan geliyor. */

.chip, .ghost, #themeBtn, button.corner {
  --yuz:   var(--sf);
  --kenar: var(--bd);
  background: var(--yuz);
  box-shadow: 0 3px 0 var(--kenar);
  transform: translateY(-1px);
  transition:
    transform 250ms cubic-bezier(.3, .7, .4, 1),
    box-shadow 250ms cubic-bezier(.3, .7, .4, 1),
    background-color .16s ease, color .16s ease;
}

.chip:hover, .ghost:hover, #themeBtn:hover, button.corner:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--kenar);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5),
              box-shadow 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.chip:active, .ghost:active, #themeBtn:active, button.corner:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--kenar);
  transition: transform 34ms, box-shadow 34ms;
}

/* Seçili hap: yüzey beyaz kalır, KENAR marka kırmızısı olur —
   istenen "altından çıkan kırmızı parça" tam olarak bu katman. */
.chip.on {
  --yuz:   var(--btn);
  --kenar: var(--vurgu);
  color: var(--btn-tx);
}

/* Kart üstündeki "+ Ekle" düğmesi de aynı dili konuşur */
button.corner { --yuz: var(--chip); --kenar: rgba(0, 0, 0, .45); }
button.corner:hover { --kenar: var(--vurgu); }

/* ---- 9) YAN MENÜ HİYERARŞİSİ (14 Ağu 2026) --------------------------------
   Sorun: üç seviye (dil › seri › set) neredeyse aynı ağırlıkta görünüyordu;
   hangisinin kapsayıcı hangisinin yaprak olduğu okunmuyordu. Ayrıca yuvarlak
   köşeli dil başlığına konan `inset` gölge, sol kenarda kırmızı bir yay
   artefaktı üretiyordu.

   Çözüm — her seviye AYRI BİR SİNYAL taşır:
     dil  → en kalın, açıkken kendi zeminine oturur (kapsamı görünür olur)
     seri → daha küçük, harf aralıklı, sessiz renk
     set  → en küçük, sol kılavuz çizgisiyle bağlı; seçili olan kırmızı çubuk
   Sayılar hep sağda ve hizalı — göz tek sütunda tarıyor. */

/* --- seviye 1: DİL — açıkken kapsayıcı bir kutuya dönüşür --- */
.ym-dilblok { border-radius: 10px; }
/* AÇIK DİL BLOĞU (29 Ağu 2026 düzeltmesi)
   Eskiden dolu, karttan KOYU bir paneldi. Sorun ölçüldü: kart 791px ve
   `overflow:hidden`, açık blok ise 845px — yani kartın 89px dışına taşıyor
   ve DÜZ kesiliyordu. Yuvarlak alt köşeleri hiç çizilmiyor, kartın 18px'lik
   yuvarlak köşesinin hemen yanında düz bir kesik kalıyordu; üstelik koyu
   dolgu kartta delik açılmış gibi okunuyordu.
   Kaptan uzun olan DOLU bir panel her zaman böyle kesilir — dolgu kaldırıldı.
   Grup artık başlığın vurgusu ve listenin sol kılavuz çizgisiyle belli
   oluyor; kesilecek bir yüzey kalmadığı için köşe sorunu da kalmadı. */
.ym-dilblok.acik {
  background: none;
  box-shadow: none;
  padding-bottom: 2px;
  margin: 3px 0 6px;
}
/* Listenin sol kılavuzu — hiyerarşiyi dolgusuz taşır */
.ym-dilblok.acik > .ym-ic {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--hair);
}
.ym-bas {
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: var(--tx); padding: 8px 10px;
}
/* Açık dilin başlığı grubun TEPESİ; dolgulu panel kaldırıldığı için
   hiyerarşiyi artık bu satır taşıyor (29 Ağu 2026). */
.ym-dilblok.acik > .ym-bas {
  background: var(--sf2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ym-dilblok:not(.acik) > .ym-bas { color: var(--mt); font-weight: 600; }
.ym-dilblok:not(.acik) > .ym-bas:hover { color: var(--tx); }

/* --- seviye 2: SERİ — harf aralığı ve küçük punto ile ayrışır --- */
.ym-seribas {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mt);
  padding: 6px 9px 5px;
}
.ym-seri.acik > .ym-seribas { color: var(--tx); }
.ym-seri + .ym-seri { margin-top: 1px; }

/* --- seviye 3: SET — kılavuz çizgisine bağlı --- */
.ym-setler {
  padding: 1px 0 4px 0; margin-left: 15px;
  border-left: 1px solid var(--bd);
}
.ym-set {
  font-size: 12px; padding: 5px 9px 5px 11px;
  border-radius: 0 7px 7px 0; position: relative;
}
/* Seçili set: dolu kırmızı blok yerine kırmızı çubuk + hafif zemin.
   Blok hâli menüyü bastırıyordu; çubuk aynı bilgiyi daha sessiz veriyor. */
.ym-set.on {
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  color: var(--tx); font-weight: 600;
}
.ym-set.on::before {
  content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--vurgu);
}

/* --- sayılar: tek sütunda, hizalı, sessiz --- */
.ym-sayi, .ym-set .ym-adet {
  margin-left: auto; font-size: 10px; opacity: .5;
  font-variant-numeric: tabular-nums; font-family: var(--mono, ui-monospace, monospace);
}
.ym-set { display: flex; align-items: center; gap: 8px; }
.ym-set .ym-adet { float: none; order: 2; }
.ym-set.on .ym-adet { opacity: .7; }
.ym-bas .ym-ok, .ym-seribas .ym-ok { margin-left: 6px; }

/* Grup etiketi biraz daha nefes alsın */
.ym-oyunad { padding: 2px 10px 6px; opacity: .75; }

/* Ana sayfa — şimdilik boş iskelet (15 Ağu 2026). İçerik sonra. */
/* (Eski ana sayfa yer tutucu stilleri kaldırıldı — hero kendi bloğunda.) */

/* ==========================================================================
   ANA SAYFA HERO — döner kart yörüngesi (16 Ağu 2026, FOLLOW.ART referansı)
   Zemin SİTE TEMASI (--pg), dev yazı MARKA KIRMIZISI. Yazı 3B dünyanın
   içinde z=0 düzleminde durur; kartlar ±R'de döndüğü için ön yay yazının
   önünden, arka yay arkasından geçer — harflerin içinden akış buradan.
   Kartlar çift yüzlü: ön = DB görseli, arka = CSS ile çizilmiş kart sırtı.
   ========================================================================== */
.anasayfa { margin: 0; }
.as-hero {
  position: relative; overflow: hidden;
  margin: 12px calc(-1 * var(--gut)) 0;
  height: calc(100vh - 140px); min-height: 540px;
  background: var(--pg);   /* shader açıkken .shader-acik saydamlaştırır */
  color: var(--tx);
}

/* Sayfa geneli WebGL zemini. fixed + z-index -1 → tüm içeriğin altında,
   kaydırmadan etkilenmez. Görünür olması için gövde/üst çubuk/alt bilgi
   zeminlerinin saydamlaşması gerekir (.shader-acik). */
.as-shader {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: -1;
}
/* Katalog/binder ESKİ zeminde kalır: shader sınıfı yokken canvas gizli */
body:not(.shader-acik) .as-shader { display: none; }
body.shader-acik { background: transparent; }
body.shader-acik .as-hero { background: transparent; }

.as-golge {
  position: absolute; left: 50%; top: 62%;
  width: 46%; height: 26%;
  transform: translate(-50%, -50%) rotate(-9deg);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent 70%);
  pointer-events: none;
}

.as-sahne {
  position: absolute; inset: 0;
  /* Bakış noktası ORTAYA (25 Ağu): %42'de ön yay aşağı itiliyor, kartlar
     yazının altında toplanıyordu. %50'de ön ve arka yay dikeyde dengeli. */
  perspective: 1600px; perspective-origin: 50% 50%;
}
.as-dunya { position: absolute; inset: 0; transform-style: preserve-3d; }

/* ==========================================================================
   METİN KATMANI (25 Ağu 2026, Oryzo referansı) — kayan yazı makarasının
   yerine üç sütunlu düzen: SOLDA iki satırlık başlık, ORTADA dönen halkaya
   ayrılmış boşluk, SAĞDA açıklama. Metinler sahnenin üstünde ama tıklamayı
   yutmaz (pointer-events:none) — halkanın kartları hover alabilsin.
   Orta sütun 1.15fr: halka yandaki metinlere değmesin diye yanlardan geniş.
   ========================================================================== */
.as-metin {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  /* Kenar boşluğu daraldı (25 Ağu): başlık ve halka birlikte büyütülünce
     sol boşluk 27px'e düşmüştü — metin bloğunu dışarı iterek yer açıldı. */
  padding: 0 clamp(20px, 3.2vw, 64px);
  pointer-events: none;
}
.as-baslik {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  /* Punto 2.9vw → 3.6vw (kullanıcı: "soldaki yazıyı da büyüt"). Bunun
     mümkün olması için başlık ÜÇ SATIRA bölündü: en uzun satır 12 → 9
     karaktere inince aynı genişlikte %24 daha büyük punto sığıyor. */
  font-size: clamp(30px, 3.6vw, 64px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--tx);
}
.as-not {
  margin: 0; justify-self: end; max-width: 30ch;
  font-size: clamp(14px, 1.15vw, 19px); line-height: 1.5;
  color: color-mix(in srgb, var(--tx) 88%, transparent);
}
/* Dar ekran: üç sütun alt alta gelir, halka ortada kalır. */
@media (max-width: 900px) {
  .as-metin {
    grid-template-columns: 1fr; align-content: space-between;
    padding: clamp(24px, 6vw, 56px) clamp(20px, 6vw, 44px);
  }
  .as-not { justify-self: start; max-width: 36ch; }
}

/* Eğim ayrı katmanda — yazı düz kalır, yalnız halka yatar */
.as-egik {
  /* Halka kadrajın ORTASINDA (25 Ağu): yazı makarası kalkınca hizalanacak
     harf bandı da kalktı; artık yandaki metinlerle aynı dikey eksende. */
  position: absolute; left: 50%; top: 50%;
  transform: rotateZ(-9deg) rotateX(-5deg);
  transform-style: preserve-3d;
}
.as-halka {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  animation: asDon 48s linear infinite;
}
@keyframes asDon {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Kart: çift yüzlü ince levha */
.as-kart {
  /* DÖRDÜNCÜ AYAR (25 Ağu, kullanıcı: "biraz daha büyüt"): 96×134 → 120×168.
     Yarıçap da 195 → 245 çıktı (app.js) — halkanın ekrandaki genişliği
     kabaca 2R olduğu için kartı tek başına büyütmek fanı sıkıştırırdı.
     Çevre 2πR ≈ 1539px, 12 kartta kart başına 128px → 8px nefes payı. */
  position: absolute; left: -60px; top: -84px;
  width: 120px; height: 168px;
  transform-style: preserve-3d;
}
.as-kart .as-on {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 11px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
  background: #12244E;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* KART SIRTI — gerçek görsel (app/assets/kart-sirti.png).
   Not: resmî kart sırtı sanatı Nintendo/Creatures/GAME FREAK'e ait.
   Yerel geliştirmede sorun yok; siteyi halka açarken lisans sorulmalı. */
.as-kart .as-arka {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 11px; overflow: hidden;
  background: #12244E url("/assets/kart-sirti.png") center / cover no-repeat;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
/* One Piece kartlarının sırtı farklı (resmî lacivert pusula deseni) */
.as-kart .as-arka.op {
  background-image: url("/assets/kart-sirti-op.jpg");
  background-color: #232457;
}


@media (max-width: 760px) {
  .as-hero { height: 72vh; min-height: 460px; }
  .as-kart { width: 96px; height: 134px; left: -48px; top: -67px; }
}
@media (prefers-reduced-motion: reduce) {
  .as-halka { animation: none; transform: rotateY(18deg); }
}

/* KART SÜZÜLMESİ bölümü 29 Ağu 2026'da kullanıcı isteğiyle KALDIRILDI
   ("kartların kaydığı kısmı kaldıralım"). Kaydırmaya bağlı dört kartlık
   uçuş düzlemiydi; HTML, JS ölçümü ve CSS'i birlikte silindi.
   Geri istenirse git geçmişinde duruyor (bu commit'ten önceki hâl). */

/* Çeviri dili uyarı şeridi: dürüstlük etiketi (18 Ağu 2026) */
.dil-uyari {
  margin: 8px 0 0; padding: 8px 12px; max-width: 70ch;
  background: color-mix(in srgb, var(--vurgu) 9%, var(--sf));
  border: 1px solid color-mix(in srgb, var(--vurgu) 35%, var(--bd));
  border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--tx);
}

/* ==========================================================================
   ANİMASYONLU İKONLAR — bakai.me/lab tekniği (22 Ağu 2026):
   ikon SVG'si anlamlı PARÇALARA bölünür, her parça kademeli gecikme ve özel
   easing'le ayrı keyframe oynatır. Tetik ya durum sözde-sınıfı (:focus-within,
   :hover) ya da JS'in taktığı [data-go] niteliğidir (bkz. app.js ikonOynat).
   Süre/easing değerleri transitions.dev ölçeğine yakın tutuldu.
   ========================================================================== */

/* --- Arama büyüteci: odaklanınca mercek "tarama" turu atar --- */
.searchpill .ik-ara { overflow: visible; }
.searchpill .ik-lens { transform-box: view-box; }
.searchpill:focus-within .ik-lens {
  animation: ik-ara-tara .85s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes ik-ara-tara {
  0%   { transform: translate(0, 0) rotate(0deg); }
  28%  { transform: translate(-2.6px, -1.8px) rotate(-8deg); }
  58%  { transform: translate(2px, 2.2px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- Tema güneşi: tıklamada ışınlar savrulur, çekirdek "pop" yapar --- */
#themeBtn { display: inline-flex; align-items: center; gap: 7px; }
#themeBtn .ik-tema { overflow: visible; }
#themeBtn .ik-isinlar,
#themeBtn .ik-cekirdek { transform-box: view-box; transform-origin: 12px 12px; }
.ik-tema[data-go] .ik-isinlar {
  animation: ik-tema-savrul .7s cubic-bezier(.34, 1.4, .44, 1) both;
}
.ik-tema[data-go] .ik-cekirdek {
  animation: ik-tema-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes ik-tema-savrul {
  0%   { transform: rotate(0deg)  scale(1); }
  45%  { transform: rotate(65deg) scale(.55); }
  100% { transform: rotate(90deg) scale(1); }
}
@keyframes ik-tema-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(.68); }
  70%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* --- Fiyat Geçmişi çubukları: panel açılınca kademeli yükselir,
       başlığa gelince yeniden dans eder (çift keyframe adı hilesi) --- */
.ik-grafik .ik-c1, .ik-grafik .ik-c2, .ik-grafik .ik-c3 {
  transform-box: fill-box; transform-origin: center bottom;
}
.ik-grafik .ik-c1 { animation: ik-bar-a .7s .05s cubic-bezier(.22, 1, .36, 1) both; }
.ik-grafik .ik-c2 { animation: ik-bar-a .7s .16s cubic-bezier(.22, 1, .36, 1) both; }
.ik-grafik .ik-c3 { animation: ik-bar-a .7s .27s cubic-bezier(.22, 1, .36, 1) both; }
h3:hover .ik-grafik .ik-c1 { animation: ik-bar-b .7s .0s  cubic-bezier(.22, 1, .36, 1) both; }
h3:hover .ik-grafik .ik-c2 { animation: ik-bar-b .7s .11s cubic-bezier(.22, 1, .36, 1) both; }
h3:hover .ik-grafik .ik-c3 { animation: ik-bar-b .7s .22s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ik-bar-a { 0% { transform: scaleY(.08); } 100% { transform: scaleY(1); } }
@keyframes ik-bar-b {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  30% { transform: scaleY(.12); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .searchpill:focus-within .ik-lens,
  .ik-tema[data-go] .ik-isinlar,
  .ik-tema[data-go] .ik-cekirdek,
  .ik-grafik .ik-c1, .ik-grafik .ik-c2, .ik-grafik .ik-c3,
  h3:hover .ik-grafik .ik-c1, h3:hover .ik-grafik .ik-c2, h3:hover .ik-grafik .ik-c3 {
    animation: none;
  }
}


/* ==========================================================================
   GİRİŞ / KAYIT EKRANI (25 Ağu 2026) — tam sayfa, iki sütun.
   Sol: marka + form. Sağ: ana sayfadaki dönen 3B kart halkasının aynısı
   (aynı .as-kart / .as-halka bileşenleri — ikinci bir kart sistemi yok).
   Dar ekranda sağ sütun gizlenir, form tek sütuna oturur.
   ========================================================================== */
body.kimlik-acik { overflow: hidden; }

.kekran {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--pg);
}
.kekran-sol {
  display: grid; place-items: center;
  padding: 40px clamp(24px, 5vw, 72px); overflow-y: auto;
}
/* ORTALI HİZA (25 Ağu 2026, kullanıcı): logo ve metinler ortada.
   Form ALANLARI sola hizalı kalır — etiket/girdi ortalanınca okuma
   çizgisi kırılıyor ve form dağınık görünüyor. */
.kekran-kutu { width: min(380px, 100%); text-align: center; }

/* Marka işareti: üst çubuktakiyle aynı maske. 52 → 88px (kullanıcı:
   "daha büyük kullan"); ortalamak için maske de merkeze alındı. */
.kekran-marka {
  display: block; width: 88px; height: 88px; margin: 0 auto 30px;
  background-color: var(--tx);
  -webkit-mask: url("/assets/logo.png") center / contain no-repeat;
  mask: url("/assets/logo.png") center / contain no-repeat;
}
.kekran-kutu h1 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.05;
}
.kekran-alt { margin: 0 0 26px; font-size: 14px; line-height: 1.5; color: var(--mt); }

.kekran-f { display: block; margin-bottom: 14px; text-align: left; }
.kekran-f > span { display: block; font-size: 12.5px; color: var(--mt); margin-bottom: 5px; }
.kekran-f input {
  display: block; width: 100%; font: inherit; font-size: 14px; color: var(--tx);
  background: var(--sf); border: 1px solid var(--bd); border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .15s ease, background-color .15s ease;
}
.kekran-f input:focus {
  outline: none; border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 5%, var(--sf));
}
/* Şifre alanı + göster/gizle: düğme alanın İÇİNDE, sağ kenarda. */
.kekran-sifre { position: relative; display: block; }
.kekran-sifre input { padding-right: 74px; }
.kekran-goz {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: 0; color: var(--mt); padding: 6px 8px;
}
.kekran-goz:hover { color: var(--tx); }

.kekran-ana {
  width: 100%; margin-top: 8px; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 0; border-radius: 10px; padding: 12px;
  background: var(--vurgu); color: var(--vurgu-metin);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--vurgu) 62%, #000);
  transform: translateY(-1px);
  transition: transform .2s cubic-bezier(.3,.7,.4,1), box-shadow .2s cubic-bezier(.3,.7,.4,1);
}
.kekran-ana:hover { transform: translateY(-3px); box-shadow: 0 5px 0 color-mix(in srgb, var(--vurgu) 62%, #000); }
.kekran-ana:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--vurgu) 62%, #000); }
.kekran-ana[disabled] { opacity: .55; cursor: default; transform: none; }

/* "ya da" ayracı: iki yanı çizgi */
.kekran-ayrac {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px; font-size: 12px; color: var(--mt);
}
.kekran-ayrac::before, .kekran-ayrac::after {
  content: ""; flex: 1; height: 1px; background: var(--bd);
}
.kekran-ikinci {
  width: 100%; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: var(--sf); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 10px; padding: 11px;
  transition: border-color .15s ease;
}
.kekran-ikinci:hover { border-color: color-mix(in srgb, var(--tx) 32%, var(--bd)); }

.kekran-kutu .pop-err, .kekran-kutu .pop-not { text-align: left; }
.kekran-gecis { margin: 22px 0 0; font-size: 13px; color: var(--mt); }
.kekran-gecis button, .kekran-misafir {
  font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--vurgu); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.kekran-misafir {
  display: block; margin: 26px auto 0; color: var(--mt);
  font-weight: 500; text-decoration: none;
}
.kekran-misafir:hover { color: var(--tx); text-decoration: underline; }

/* --- Sağ sütun: kinetik tipografi (beyaz kâğıt) ---
   Koyu form paneliyle beyaz kâğıt arasındaki sert bölünme bilinçli:
   riso baskı estetiği beyaz zemin üzerine kurulu, koyulaştırılırsa
   bütün renk sistemi yeniden ayarlanmak zorunda kalırdı. */
.kekran-sag { position: relative; overflow: hidden; background: #fdfdfd; }
.kekran-kanvas { display: block; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .kekran { grid-template-columns: 1fr; }
  .kekran-sag { display: none; }
}

/* Sihirbaz kayıt ekranının SOL SÜTUNUNDA (25 Ağu 2026): diyalog kutusu
   yerine tam ekranın içinde akar. Kutu ortalı hizayı korur ama seçim
   çipleri ve düğme satırı burada daha geniş nefes alır. */
.kekran-sihirbaz .kadim { margin-bottom: 10px; }
.kekran-sihirbaz h3 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1;
}
.kekran-sihirbaz .pop-sub { margin-bottom: 20px; }
.kekran-sihirbaz .kseckut { justify-content: center; }
.kekran-sihirbaz .kseckut.dikey { align-items: stretch; }
.kekran-sihirbaz .pop-acts { justify-content: center; margin-top: 24px; }
.kekran-sihirbaz .pop-f { text-align: left; }
.kekran-sihirbaz .kalt-soru { text-align: center; }

/* ==========================================================================
   VARYANT BALONU (25 Ağu 2026) — karonun DIŞINA açılan varyant paneli.

   Malzeme: "liquid glass" HİSSİ, cam GÖRÜNÜŞÜ değil. Yani saydamlık +
   arka plan bulanıklığı + yumuşak kenar ışığı + havada durma; ama parlama,
   yansıma, kalın çerçeve yok. Koyu paletin üstünde sakin durması için
   doygunluk hafif artırılıyor, tepeye ince bir iç ışık konuyor.
   ========================================================================== */
.vbalon {
  position: fixed; z-index: 400;
  min-width: 208px; max-width: 260px;
  padding: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--sf) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--tx) 10%, transparent);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .5),
    0 2px 8px rgba(0, 0, 0, .3),
    inset 0 1px 0 color-mix(in srgb, var(--tx) 9%, transparent);
  opacity: 0; transform: translateY(4px) scale(.97);
  transform-origin: left center;
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
  pointer-events: auto;
}
.vbalon.acik { opacity: 1; transform: translateY(0) scale(1); }
.vbalon[hidden] { display: none; }

.vb-bas {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mt);
  padding: 4px 8px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 10px;
  transition: background-color .14s ease;
}
.vb-satir:hover { background: color-mix(in srgb, var(--tx) 7%, transparent); }
/* Sende olan varyant: solunda ince vurgu çizgisi */
.vb-satir.var { background: color-mix(in srgb, var(--own) 12%, transparent); }

.vb-ad {
  font-size: 12.5px; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.vb-ctl button {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1;
  color: var(--tx); background: color-mix(in srgb, var(--tx) 9%, transparent);
  border: 0; border-radius: 7px;
  transition: background-color .14s ease;
}
.vb-ctl button:hover { background: color-mix(in srgb, var(--tx) 18%, transparent); }
.vb-arti:hover { background: var(--vurgu); color: var(--vurgu-metin); }
.vb-ctl button[disabled] { opacity: .3; cursor: default; }
.vb-adet { min-width: 18px; text-align: center; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .vbalon { transition: none; }
}

/* Binder seçim listesi: set adı sağda soluk, seçili satır vurgulu
   (25 Ağu 2026 — "Binder'a ekle" ve cebe kart arama akışları). */
.pull-hit em { float: right; color: var(--soluk, #8f8b8b); font-style: normal; font-size: 11px; }
.pull-hit.secili { background: rgba(236, 48, 19, .16); box-shadow: inset 2px 0 0 var(--vurgu); }

/* ── Telefonla kart tarama (26 Ağu 2026) ──────────────────────────────── */
.mtab-tara { display: inline-flex; align-items: center; gap: 6px; }
.tara-qr { display: grid; place-items: center; padding: 10px 0 4px; }
.tara-qr svg { width: 210px; height: 210px; border-radius: 10px; background: #fff; }
.tara-url { font-size: 11px; color: var(--soluk, #8f8b8b); text-align: center;
            word-break: break-all; margin: 6px 0 0; }
.tara-not { font-size: 12.5px; color: var(--soluk, #8f8b8b); text-align: center; margin: 8px 0; }
.tara-sonuc { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.tara-hit {
  display: flex; align-items: center; gap: 10px;
  background: var(--sf); border-radius: 10px; padding: 8px 10px;
  border: 1px solid transparent;
}
.tara-hit.kesin { border-color: rgba(46, 204, 113, .4); }
.tara-hit img { width: 42px; border-radius: 4px; display: block; }
.tara-hit .b { flex: 1; min-width: 0; }
.tara-hit .ad { font-weight: 700; font-size: 13.5px; }
.tara-hit .alt { font-size: 11.5px; color: var(--soluk, #8f8b8b); }
.tara-grup { display: grid; gap: 4px; }
.tara-grup + .tara-grup { margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, .08); }
.tara-hit.ikincil { opacity: .62; }
.tara-hit.ikincil:hover { opacity: 1; }
.tara-pc { text-align: center; margin: 2px 0 10px; font-size: 12.5px; }
.tara-pc a { color: var(--vurgu); text-decoration: none; }
.tara-pc a:hover { text-decoration: underline; }

/* ==========================================================================
   SAYILAR — TABULAR RAKAM (26 Ağu 2026)
   Orantılı rakamlarda her hane farklı genişliktedir: "1" dar, "0" geniş.
   Değişen bir sayıda (sayaç, adet, fiyat, yüzde) bu, her güncellemede
   metnin sağa sola oynamasına; alt alta dizilen sayılarda ise sütunun
   kaymasına yol açar. Tabular rakam hepsini eşit genişliğe sabitler.
   KURAL: arayüzün varsayılanı TABULAR; düz metinde (paragraf, açıklama,
   kart efekti) orantılıya dönülür — orada tabular seyrek ve yapay durur.
   ========================================================================== */
body { font-variant-numeric: tabular-nums; }

/* Düz metin: orantılı rakam (okuma akışı için doğru olan) */
p, li, .mv-eff, .as-not, .tara-not, .tara-url, .kb-metin, .oz-metin,
blockquote, .cd-metin, .mv-kind {
  font-variant-numeric: proportional-nums;
}
/* …ama paragraf içine gömülü sayı bloğu yine hizada kalsın */
p .tnum, li .tnum { font-variant-numeric: tabular-nums; }

/* Yardımcı sınıflar — yeni bileşenlerde tek kelimeyle uygulanır */
.tnum { font-variant-numeric: tabular-nums; }
.pnum { font-variant-numeric: proportional-nums; }

/* Font ailesinin `tnum` tablosu yoksa font-variant-numeric sessizce
   çalışmaz; sayı taşıyan kritik bölgelerde özelliği doğrudan da isteriz. */
.tally, .kv .v, .mv-row, .vb-adet, .bw-sp-filed, .bw-bar .l,
.tara-hit .alt, .vqty, .cd-qty span, .ym-sayi, .ym-adet,
.vprice, .tprice, .chip b, .fopt .n, .vsw b,
table, input[type="number"], output, time, progress + .l {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.tara-grupbas { font-size: 12px; font-weight: 700; color: #f0c419; padding: 2px 2px 4px; }
/* Kilit dışına düşüş: uyarı değil bilgi — sarı yerine nötr mavi. */
.tara-grupbas.disari { color: #7fb6e8; font-weight: 600; }
.tara-kilitnot { margin: 2px 0 0 22px; font-size: 11px; color: var(--mt); }

/* ── Element sembolleri (26 Ağu 2026) ──────────────────────────────────
   Kartlarda enerji türü her dilde aynı SEMBOLle gösterilir; arayüz de
   yazı yerine sembol basar. Dosya yoksa eleYok() yazıya döndürür. */
.ele {
  width: 20px; height: 20px; display: inline-block; vertical-align: -4px;
  margin-right: 2px;
}
.ele.kucuk { width: 15px; height: 15px; vertical-align: -3px; }
.ele.buyuk { width: 24px; height: 24px; vertical-align: -6px; }
.ele-yazi {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 99px; margin-right: 3px;
  background: var(--sf); color: var(--soluk, #8f8b8b); vertical-align: 1px;
}
.ele-carpan { font-weight: 700; margin-left: 2px; }
/* Atak maliyeti: semboller bitişik dizilir, satır kaymasın */
.mv-row .cost { display: inline-flex; align-items: center; gap: 1px; }
.mv-row .cost .ele { margin-right: 0; }

/* ==========================================================================
   HESABIM — 27 Ağustos 2026
   İki yüzey, ortak parçalar:
     · PANEL  (.hs-mnu)  — üst sağdaki fotoğraftan aşağı açılan kısayol menüsü
     · SAYFA  (.hesap / .hp-*) — MyAnimeList/Letterboxd tarzı tam profil
   Kapak (.hs-kapak), fotoğraf (.hs-avatar), haplar (.hs-hap) ve sayı şeridi
   (.hs-say) İKİSİNDE DE kullanılır; ölçüler --hs-kapak / --hs-av ile her
   yüzeyde ayrı verilir.
   ========================================================================== */

/* ---- üst çubuk tetikleyicisi: ad değil, FOTOĞRAF ---- */
.hs-tetik {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--bd); background: var(--sf);
  display: grid; place-items: center;
}
.hs-tetik:hover { border-color: var(--mt); }
.hs-tetik img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-tetik .hs-basharf { font-size: 12.5px; }

/* ---- ortak: kapak ---- */
.hs-kapak {
  height: var(--hs-kapak);
  /* Görsel yokken: sıcak eksende bir gradyan (projenin kırmızısı içinde) */
  background:
    radial-gradient(85% 120% at 18% 8%, rgba(255, 255, 255, .34), transparent 58%),
    linear-gradient(125deg, #6E56F8 0%, #4E7BFF 34%, #D6122E 72%, #FF8A3D 100%);
}
.hs-kapak.dolu { background-size: cover; background-position: center; }

/* ---- ortak: yuvarlak fotoğraf ---- */
.hs-avatar {
  width: var(--hs-av); height: var(--hs-av); overflow: hidden;
  border-radius: 50%;
  /* Halka zemin renginde: fotoğraf kapağın üstüne bindiğinde ayrık dursun */
  border: 4px solid var(--pg);
  background: var(--sf);
  display: grid; place-items: center;
}
.hs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-basharf {
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls); color: var(--mt); font-size: 25px;
}

/* ---- ortak: tercih hapları ---- */
.hs-rozet { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-hap {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--tx);
  background: var(--sf); border: 1px solid var(--bd);
  border-radius: 99px; padding: 4px 12px 4px 4px;
}
.hs-hap:not(:has(.hs-mark)) { padding-left: 12px; }
.hs-mark {
  width: 23px; height: 23px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; font-style: normal; color: #fff;
}
button.hs-hap { font-family: inherit; cursor: pointer; padding: 4px 12px; }
button.hs-hap:hover { border-color: var(--mt); }
.hs-hap-artik { color: var(--mt); }

/* ---- ortak: sayı şeridi (eşit sütunlar, aralarında ince çizgi) ---- */
.hs-say { display: grid; grid-template-columns: repeat(4, 1fr); }
.hs-say-h { text-align: center; padding: 2px 4px; }
.hs-say-h + .hs-say-h { border-left: 1px solid var(--bd); }
.hs-say-h b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.hs-say-h span { display: block; font-size: 12px; color: var(--mt); margin-top: 1px; }

/* ---- ortak: tam genişlik düğme ---- */
.hs-cta {
  display: block; width: 100%;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--btn-tx); background: var(--btn);
  border: 0; border-radius: 99px; padding: 13px 18px;
}
.hs-cta:hover { opacity: .9; }
.hs-not { margin: 10px 0 0; font-size: 12px; color: var(--vurgu); }

/* ==========================================================================
   PANEL — gövdeye eklenir, konumu JS'te tetikleyiciye göre verilir.
   ========================================================================== */
.hs-mnu {
  position: fixed; top: 0; right: 8px; z-index: 120;
  width: min(340px, calc(100vw - 16px));
  --hs-kapak: 112px; --hs-av: 72px;
}
.hs-mnu .hs-kart {
  position: relative;
  background: var(--pg); border: 1px solid var(--bd);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}
.hs-mnu .hs-avatar {
  position: absolute; left: 18px;
  top: calc(var(--hs-kapak) - var(--hs-av) / 2);
}
/* Üst boşluk fotoğrafın panel içine sarkan yarısını + nefes payını bırakır */
.hs-mnu .hs-govde { padding: calc(var(--hs-av) / 2 + 12px) 18px 16px; }
.hs-kimlik { min-width: 0; }
.hs-kimlik h2 {
  margin: 0; font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls); font-size: 21px; line-height: 1.12;
  overflow-wrap: anywhere;
}
.hs-kimlik p { margin: 2px 0 0; font-size: 12.5px; color: var(--mt); overflow-wrap: anywhere; }
.hs-mnu .hs-rozet { margin: 12px 0 0; }
.hs-mnu .hs-say { margin: 14px 0 0; }
.hs-mnu .hs-cta { margin: 14px 0 0; }

.hs-liste { border-top: 1px solid var(--hair); padding: 6px; display: grid; }
.hs-liste button {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  border: 0; border-radius: 8px; padding: 9px 12px;
  background: transparent; color: var(--tx);
}
.hs-liste button:hover { background: var(--sf); }
.hs-liste .hs-cikis { color: var(--vurgu); }

/* Alçak pencerede panel ekranın altını taşmasın. Kaydırma yalnız BURADA
   açılıyor — `overflow` kartın gölgesini de kırpıyor, normal boyda gereksiz. */
@media (max-height: 660px) {
  .hs-mnu {
    --hs-kapak: 88px; --hs-av: 62px;
    max-height: calc(100vh - 76px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/* ==========================================================================
   SAYFA (/hesap) — kapak + fotoğraf + kimlik, sayı şeridi, koleksiyon vitrini
   ========================================================================== */
.hesap { padding: 22px 0 80px; }
.hp { --hs-kapak: 230px; --hs-av: 118px; }

.hp-ust { position: relative; }
.hp-ust .hs-kapak { border-radius: 22px; overflow: hidden; }
/* Fotoğraf kapağın alt kenarına biner: yarısı yukarı çekilir */
.hp-kimlik {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 0 24px; margin-top: calc(var(--hs-av) / -2);
}
/* Fotoğraf kapağın ÜSTÜNDE kalmalı: konumlandırılmış bir kutu, akıştaki
   kardeşlerinden sonra boyanır (27 Ağu 2026 — kapak `position: relative`
   iken fotoğrafın üst yarısı altında kalıyordu). */
.hp-kimlik .hs-avatar { position: relative; z-index: 1; flex: none; border-width: 5px; }
.hp-kimlik .hs-basharf { font-size: 38px; }

.hp-ad, .hp-form { flex: 1; min-width: 0; padding-top: calc(var(--hs-av) / 2 + 10px); }
.hp-ad h1 {
  margin: 0; font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls); font-size: 34px; line-height: 1.1;
  overflow-wrap: anywhere;
}
.hp-el { margin: 5px 0 0; font-size: 13px; color: var(--mt); overflow-wrap: anywhere; }
.hp-bio { margin: 10px 0 0; font-size: 14px; max-width: 62ch; }
.hp-bio.bos { color: var(--mt); font-style: italic; }
.hp-ad .hs-rozet { margin: 14px 0 0; }
.hp-duzenle { flex: none; align-self: flex-end; margin-bottom: 4px; }

/* düzenleme formu */
.hp-form .pop-f { margin: 0 0 10px; }
.hp-form textarea {
  display: block; width: 100%; margin-top: 4px; resize: vertical;
  font: inherit; font-size: 13px; color: var(--tx);
  background: var(--sf); border: 1px solid transparent; border-radius: 6px;
  padding: 7px 10px;
}
.hp-gorsel-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.hp-form-act { display: flex; gap: 8px; margin: 14px 0 0; }
.hp-kaydet {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 99px; padding: 8px 20px;
  background: var(--btn); color: var(--btn-tx);
}
.hp-kaydet:disabled { opacity: .55; cursor: default; }

/* sayı şeridi: kendi kutusunda */
.hp-say {
  margin: 26px 0 0; padding: 14px 8px;
  background: var(--sf); border: 1px solid var(--hair); border-radius: 16px;
}
.hp-say .hs-say-h b { font-size: 23px; }

/* koleksiyon vitrini */
.hp-bolum { margin: 34px 0 0; }
.hp-bas { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.hp-bas h2 {
  margin: 0; font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls); font-size: 22px;
}
.hp-bas-say { font-size: 12.5px; color: var(--mt); }
.hp-bas .ghost { margin-left: auto; align-self: center; }

.hp-karolar {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.hp-karo {
  position: relative; display: block; width: 100%; text-align: left;
  font: inherit; cursor: pointer; color: var(--tx);
  background: transparent; border: 0; padding: 0;
}
.hp-karo img, .hp-karo .hp-karo-yok {
  display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: 10px; background: var(--slot);
  transition: transform .16s ease;
}
.hp-karo .hp-karo-yok {
  display: grid; place-items: center; font-size: 11px; color: var(--mt);
}
.hp-karo:hover img { transform: translateY(-3px); }
.hp-karo-ad {
  display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-karo-alt { display: block; font-size: 11.5px; color: var(--mt); }
.hp-karo-adet {
  position: absolute; top: 6px; right: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .62); border-radius: 99px; padding: 2px 7px;
}
.hp-kirpik { margin: 16px 0 0; font-size: 12.5px; color: var(--mt); }

/* favori bölümleri: binder listesi + karo yıldızı.
   Yıldız karonun DIŞINDA (.hp-karo-sar / .hp-bind-sar içinde) duruyor,
   çünkü iç içe <button> geçersiz HTML. */
.hp-binderlar {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.hp-bind-sar, .hp-karo-sar { position: relative; }
.hp-bind {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font: inherit; color: var(--tx); cursor: pointer; padding: 12px 44px 12px 12px;
  background: var(--sf); border: 1px solid var(--hair); border-radius: 14px;
  transition: border-color .16s ease, transform .16s ease;
}
.hp-bind:hover { border-color: var(--mt); transform: translateY(-2px); }
.hp-bind-sirt {
  flex: none; width: 42px; height: 60px; border-radius: 5px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.hp-bind-ic { flex: 1; min-width: 0; }
.hp-bind-ad {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-bind-alt { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mt); }
.hp-bind-ray {
  display: block; margin-top: 8px; height: 6px; border-radius: 99px;
  background: var(--slot); overflow: hidden;
}
.hp-bind-ray i { display: block; height: 100%; background: var(--vurgu); border-radius: 99px; }

.hp-yildiz {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .62);
  border: 0; border-radius: 99px; padding: 4px 7px;
  opacity: 0; transition: opacity .16s ease, color .16s ease;
}
/* Dokunmatikte hover yok: işaretli yıldız her zaman görünür kalır. */
.hp-karo-sar:hover .hp-yildiz, .hp-yildiz:focus-visible, .hp-yildiz.on { opacity: 1; }
.hp-yildiz.on { color: var(--fav); }
.hp-bind-sar .hp-yildiz {
  top: 50%; left: auto; right: 10px; transform: translateY(-50%);
  background: transparent; color: var(--fav); font-size: 17px; opacity: 1;
}

/* giriş yapılmamış hâl */
.hp-bos {
  max-width: 420px; margin: 40px auto; text-align: center;
  background: var(--sf); border: 1px solid var(--hair);
  border-radius: 20px; padding: 30px 26px 26px;
}
.hp-bos h2 {
  margin: 0 0 8px; font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls); font-size: 24px;
}
.hp-bos p { margin: 0 0 18px; font-size: 13.5px; color: var(--mt); }

@media (max-width: 640px) {
  .hp { --hs-kapak: 150px; --hs-av: 88px; }
  .hp-kimlik { flex-wrap: wrap; gap: 14px; }
  .hp-ad, .hp-form { flex-basis: 100%; padding-top: 10px; }
  .hp-binderlar { grid-template-columns: 1fr; }
  .hp-ad h1 { font-size: 27px; }
  .hp-duzenle { align-self: flex-start; margin: 0 0 0 auto; }
  .hs-say { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .hs-say-h:nth-child(3) { border-left: 0; }
}

/* ==========================================================================
   transitions.dev — menu dropdown (05-menu-dropdown.md)
   Tetikleyiciden büyüyen açılış; kapanış daha hızlı ve daha az ölçekli.
   ========================================================================== */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}
.tara-kilit { display: flex; align-items: center; gap: 7px; justify-content: center;
  font-size: 12.5px; color: var(--soluk, #8f8b8b); margin: 4px 0 8px; cursor: pointer; }
.tara-kilit input { accent-color: var(--vurgu); }
/* Tarama sonucunda varyant rozetleri (26 Ağu 2026).
   Tek varyantlı kartta soru yok; çoklu ise katalog sırasında listelenir —
   görüntüden varyant TAHMİN EDİLMEZ, seçim kullanıcının. */
.tara-var { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.tara-var.tek { font-size: 11px; color: #57d68d; }
.tara-var .vet { font-size: 10px; padding: 2px 6px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); color: var(--soluk, #8f8b8b); }
.tara-var .vet.ilk { background: rgba(236, 48, 19, .16); color: #ff9c86; }


/* ══════════════════════════════════════════════════════════════════════════
   GÖREVLER (/gorevler) — 29 Ağu 2026
   ⚠ 30 Ağu düzeltmesi: bu bölüm ve /ekle bölümü TANIMSIZ değişkenler
   kullanıyordu (--card, --line, --muted). Tanımsız özel değişken bildirimi
   geçersiz kılıyor, yani kutuların arka planı ve çerçevesi HİÇ ÇİZİLMİYORDU
   ve soluk metinler soluk değildi. Projenin gerçek adları: --sf, --bd, --mt.
   İçerik GOREVLER.md'den gelir. Okuma sayfası: dar ölçü, net hiyerarşi.
   ══════════════════════════════════════════════════════════════════════════ */
.gorevler { padding: 28px 0 80px; }
.gv-sar { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.gv-yukleniyor { text-align: center; color: var(--mt); padding: 40px 0; }
.gv-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; margin-bottom: 22px;
  border-bottom: 1px solid var(--bd);
}
.gv-sayac { font-size: 13px; color: var(--mt); font-variant-numeric: tabular-nums; }
.gv-kaynak { font-size: 11px; color: var(--mt); opacity: .7; }
.gv-sar h1 { font-family: var(--display); font-size: 34px; margin: 0 0 6px; }
.gv-sar h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--mt); margin: 34px 0 12px; font-weight: 700;
}
.gv-sar h2:first-of-type { margin-top: 18px; }
.gv-sar > p { color: var(--mt); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.gv-sar code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: rgba(127,127,127,.14);
  padding: 1px 5px; border-radius: 3px;
}
/* Madde: tıklanabilir tüm satır. Kutucuk sola hizalı, metin akar. */
.gv-madde {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start; padding: 13px 14px; margin-bottom: 8px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 8px;
  cursor: pointer; line-height: 1.58; font-size: 14.5px;
  transition: border-color .15s ease, background .15s ease;
}
.gv-madde:hover { border-color: rgba(127,127,127,.45); }
.gv-madde input { margin-top: 4px; width: 16px; height: 16px; cursor: pointer; accent-color: #d64545; }
.gv-madde.bitti { opacity: .5; }
.gv-madde.bitti > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.gv-madde strong { font-weight: 700; }
.gv-dip {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--bd);
  font-size: 12px; color: var(--mt);
}
@media (max-width: 640px) {
  .gv-sar { padding: 0 14px; }
  .gv-sar h1 { font-size: 26px; }
  .gv-madde { font-size: 14px; padding: 11px 12px; }
}

/* Üst çubuktaki görev bağlantısı — sessiz dursun, kimlik düğmesiyle yarışmasın */
.gorev-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--mt); opacity: .72; transition: opacity .15s ease, color .15s ease;
}
/* --fg diye bir değişken YOK; ana metin rengi --tx. Tanımsız değişken
   bildirimi geçersiz kıldığı için ikon üstüne gelince RENK DEĞİŞMİYORDU. */
.gorev-link:hover { opacity: 1; color: var(--tx); background: rgba(127,127,127,.14); }

/* ==========================================================================
   ACILIS (intro) — 29 Ağu 2026
   Video: Remotion ile üretilir (intro/ klasörü), 1920x1080 · 3 sn · 30 fps.

   NEDEN video + CSS melezi: Remotion bir VİDEO üretir; video sitenin
   üstünde saydam olamaz, dolayısıyla "logonun beyaz kısımları silinip
   arkadan site görünsün" adımı videoda YAPILAMAZ. O yüzden iş ikiye
   bölündü — paket yırtılması ve yıldırım videoda, saydam yakınlaşma burada.

   DEVRALMA SÖZLEŞMESİ (intro/src/Intro.tsx ile birebir aynı olmalı):
     zemin  ANA SAYFANIN kırmızı ailesinden ışıklı gradyan —
            merkez #9B1024 (0%→24% DÜZ disk) · köşe #2A0710
            (ikisi de app.js AS_RENK paletinden: #5E0F1E · #A81026 · #2A0710)
     logo rengi #F3EFE9 · logo kutusu 420px (1920x1080 tuvalinde), ölçek 1.0
   Videonun SON KARESİ ile aşağıdaki katmanın İLK hâli aynı pikseldir;
   geçiş bu yüzden görünmez. Sözleşmenin bir ucu değişirse öbürü de değişmeli.

   ⚠️ GRADYAN NEDEN İKİ UÇTAN ÖRNEKLENİYOR: h264 doymuş kırmızıyı bir-iki
   birim kaydırabiliyor. Bu yüzden --ac-merkez ve --ac-kenar videodan
   ÖRNEKLENİR (acilis.js/zeminiOrnekle) ve aşağıdaki gradyan o iki renkle
   çizilir. Merkez örneği 24% halkasının İÇİNDEN alınır; gradyanın ilk
   durağı bilerek DÜZ (0% ve 24% aynı renk), yoksa tek pikselden merkez
   rengi çıkarılamazdı. Gradyanın KUTUSU videonun contain ile kapladığı
   dikdörtgen (--ac-vg × --ac-vy, JS hesaplar) — yoksa perde ile video
   aynı yerde aynı rengi vermez.

   object-fit:contain — kırpma YOK. Letterbox şeritleri gradyanın KÖŞE
   rengini alır (videonun köşeleri de o renkte bittiği için şerit görünmez);
   buna karşılık telefonda paket küçülür ama hiçbir şey kesilmez (cover
   olsaydı dar ekranda paketin yanları kırpılırdı).
   ========================================================================== */
.acilis { display: none; }
:root[data-acilis="1"] .acilis {
  display: block;
  position: fixed; inset: 0; z-index: 9999;
  /* JS bunları videodan örnekleyip üzerine yazar; buradakiler yedek. */
  --ac-merkez: #9B1024;
  --ac-kenar:  #2A0710;
  background: var(--ac-kenar);
}
/* Devir anından sonra katmanın KENDİ zemini kalkar — yoksa perdedeki
   delikten site değil, bu zemin görünür ve yakınlaşma hiçbir şey açmaz.
   ⚠️ Seçici :root[data-acilis="1"] .acilis ile AYNI özgüllükte olmak
   ZORUNDA (0,3,0): sade `.acilis.devir` (0,2,0) yukarıdaki kuralı
   yenemiyordu ve delik hep zeminle doluydu. (29 Ağu 2026, ölçüldü) */
:root[data-acilis="1"] .acilis.devir { background: transparent; }

.acilis-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--ac-kenar, #2A0710);
  transition: opacity .12s linear;
}
.acilis.devir .acilis-video { opacity: 0; }

/* --- Devralma katmanı: video bittiği yerden devam eder --- */
.acilis-devral {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1); transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.acilis.devir .acilis-devral { opacity: 1; }

/* PERDE: zemin gradyanı, ORTASINDA delik.

   ⚠️ DELİK MASKESİ logo.png DEĞİL, logo_yildirimsiz.png (tek parça siluet).
   Ölçüldü (29 Ağu 2026): logo.png ile delik İKİ ayrı parça ve aralarındaki
   yıldırım bandı perdenin dışıyla BİRLEŞİK — üstelik ekranın tam merkezi
   (transform-origin) o bandın İÇİNDE kalıyor. Yani yakınlaşma deliğe değil
   BANDA dalıyordu: delik Z≈12'de en çok açılıp sonra geri KAPANIYOR ve
   scale(25)'te ekranın %82'si hâlâ kırmızı kalıyordu. Hiçbir scale değeri
   bunu kurtarmıyor, çünkü perde tek parça bağlı bir bölge.
   Siluetle delik tek parça, merkez deliğin İÇİNDE ve perde payı her ekranda
   %0'a iniyor; gereken en büyük zoom dar telefonda 16,9 → scale(25) rahat.

   Boyut 120vmax: perde .acilis-devral içinde olduğu için zoom'la birlikte
   zaten büyüyor, ölçek 1'de viewport'u kapatması yeterli. (300vmax bazı
   GPU'ların 4096px doku sınırını aşıyordu.) */
.acilis-perde {
  position: absolute; left: 50%; top: 50%;
  width: 120vmax; height: 120vmax; margin-left: -60vmax; margin-top: -60vmax;
  -webkit-mask-image: linear-gradient(#000, #000), url("/assets/logo_yildirimsiz.png");
  -webkit-mask-size: 100% 100%, var(--ac-boy, 420px) var(--ac-boy, 420px);
  -webkit-mask-position: center center, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;          /* eski WebKit sözdizimi */
  mask-image: linear-gradient(#000, #000), url("/assets/logo_yildirimsiz.png");
  mask-size: 100% 100%, var(--ac-boy, 420px) var(--ac-boy, 420px);
  mask-position: center center, center center;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;              /* standart */
  transition: opacity .28s linear;
}

/* BANT: siluet deliğinin logo DIŞINDA kalan kısmını zeminle kapatır —
   yani yıldırım bandını ve siluetin dış kenar çukurlarını.

   Ne işe yarıyor: perdenin deliği tek parça SİLUET (zoom'un ekranı
   yutabilmesi için şart), ama devralma karesinde ve saydamlaşma anında
   görünmesi gereken şey GERÇEK LOGO. Bant o farkı kapatınca:
     · devralma karesi  = zemin gradyanı + krem logo (videoyla birebir)
     · .sil sonrası     = delik LOGO biçiminde, yıldırımıyla birlikte
     · .yakin sırasında = bant erir, delik siluete döner ve ekranı yutar
   Kullanıcı "logo silinip büyürken garip görünüyor" dedi (29 Ağu): sebebi
   deliğin baştan siluet olması, yani yıldırımın hiç görünmemesiydi.

   Maske logo_bant.png = siluet EKSİ logo, 2px genişletilmiş. Genişletme
   şart: logo.png'nin yumuşatılmış kenarıyla örtüşmezse konturda yarı
   saydam 1px hâle kalıyor (a + (1-a)² < 1). Sadece yıldırımı almak da
   YETMEZ — siluetin iki dış çukuru (7184 + 6603 px) boşta kalır. */
.acilis-bant {
  position: absolute; left: 50%; top: 50%;
  width: var(--ac-boy, 420px); height: var(--ac-boy, 420px);
  margin-left: calc(var(--ac-boy, 420px) / -2);
  margin-top: calc(var(--ac-boy, 420px) / -2);
}

/* LOGO: bandın üstündeki krem şekil — videonun son karesinin aynısı. */
.acilis-logo {
  position: absolute; left: 50%; top: 50%;
  width: var(--ac-boy, 420px); height: var(--ac-boy, 420px);
  margin-left: calc(var(--ac-boy, 420px) / -2);
  margin-top: calc(var(--ac-boy, 420px) / -2);
  background-color: #F3EFE9;
}
/* Perde ve bant AYNI gradyanı AYNI yerde çizer: ikisi de ekran merkezine
   ortalı ve gradyanın kutusu videonun dikdörtgeni olduğu için, bant deliğin
   içinde perdeyle kusursuz devam eder. Kutunun dışında kalan letterbox payı
   background-color ile köşe rengine düşer — videodaki bandın aynısı. */
.acilis-perde, .acilis-bant {
  background-color: var(--ac-kenar, #2A0710);
  background-image: radial-gradient(circle farthest-corner at 50% 50%,
      var(--ac-merkez, #9B1024) 0%, var(--ac-merkez, #9B1024) 24%,
      var(--ac-kenar, #2A0710) 100%);
  background-size: var(--ac-vg, 100vw) var(--ac-vy, 100vh);
  background-position: center center;
  background-repeat: no-repeat;
}

.acilis-bant, .acilis-logo { transition: opacity .14s ease-out; }
.acilis-bant { -webkit-mask: url("/assets/logo_bant.png") center center / contain no-repeat;
                       mask: url("/assets/logo_bant.png") center center / contain no-repeat; }
.acilis-logo { -webkit-mask: url("/assets/logo.png") center center / contain no-repeat;
                       mask: url("/assets/logo.png") center center / contain no-repeat; }

/* Yalnız LOGO silinir — bant durur, böylece açılan delik logo biçiminde. */
.acilis.sil .acilis-logo { opacity: 0; }
/* Yakınlaşma başlayınca bant erir: delik logodan siluete genişler ve
   yıldırım bandı büyürken ekranı yeniden kapatamaz. */
.acilis.yakin .acilis-bant { opacity: 0; transition: opacity .26s linear; }

/* mask-composite YOKSA delik hiç açılmaz ve bildirim sessizce düşer —
   hata çıkmaz, kullanıcı sadece istediği efekti göremez, açılış tam ekran
   kırmızı bir solmaya iner. O hâlde perdeyi tamamen kaldır: geriye
   yakınlaşan krem logo + sitenin açılması kalır. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .acilis-perde, .acilis-dolgu { display: none; }
  .acilis.sil .acilis-devral { opacity: 0; transition: opacity .5s ease-in; }
}

/* YAKINLAŞMA: delik büyür, ekranı yer. Perde sonda tamamen erir —
   yoksa ortada yıldırım biçiminde koyu bir bant asılı kalırdı. */
.acilis.yakin .acilis-devral {
  transform: scale(25);
  transition: transform .7s cubic-bezier(.55, .06, .78, .34);
}
/* Perdenin solması artık yalnız EMNİYET: delik siluetle ekranı gerçekten
   yutuyor, o yüzden solma en sona itildi. Erken başlarsa site kırmızı bir
   tülün altında kalıyor ("zoom ile sayfa açılması" yerine "perde solması"). */
.acilis.yakin .acilis-perde { opacity: 0; transition-delay: .48s; }

/* Geç düğmesi — süslü değil, yolun dışında */
.acilis-gec {
  position: absolute; right: 22px; bottom: 20px; z-index: 2;
  font: inherit; font-size: 12.5px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .82); background: rgba(120, 0, 14, .18);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  padding: 7px 15px; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.acilis-gec:hover { color: #FFFFFF; background: rgba(120, 0, 14, .34); }
.acilis.devir .acilis-gec { opacity: 0; pointer-events: none; }


/* ══════════════════════════════════════════════════════════════════════════
   SET RENGİ (29 Ağu 2026) — sayfa vurgusu setin LOGOSUNDAN gelir
   Sunucu yalnız TONU (0-360) veriyor; doygunluk ve parlaklığı her tema
   kendi belirliyor. Ham logo rengi kullanılsaydı bazı setler okunmaz, bazısı
   çiğ çıkardı (16 sette ölçüldü: ham parlaklık 0,12-0,94 arası savruluyor).
   --set-h yoksa marka kırmızısının tonunda (8°) kalır, yani hiçbir şey
   değişmez — logosuz setler bugünkü görünümünü korur.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --set-h: 8;                                  /* marka kırmızısı tonu */
  --set-vurgu:  hsl(var(--set-h) 62% 42%);     /* açık tema: koyu, okunur */
  --set-yumusak: hsl(var(--set-h) 62% 42% / .10);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --set-vurgu:  hsl(var(--set-h) 62% 62%);
    --set-yumusak: hsl(var(--set-h) 62% 62% / .14);
  }
}
:root[data-theme="dark"] {
  --set-vurgu:  hsl(var(--set-h) 62% 62%);
  --set-yumusak: hsl(var(--set-h) 62% 62% / .14);
}
/* Set değişince renk ANİDEN değil, süzülerek geçsin — sekme değiştirmek
   gibi hissettirir, sayfa yeniden boyanmış gibi değil. */
:root { transition: none; }
.sethead, .vsw, .chip { transition: color .28s ease, box-shadow .28s ease; }

/* 1) KÜNYE PERDESİ DENENDİ VE KALDIRILDI (29 Ağu 2026, kullanıcı: "çok garip
      duruyor, hata var gibi"). Blok bir eleman üzerine konan geniş radyal
      gradyan kutusunun ALT KENARINDA sert bir kesik bırakıyordu: .ustband
      393px, gradyan 366px'te bitiyordu, yani renk sınıra 27px kala hâlâ
      görünürdü ve ambiyans ışığı değil dikdörtgen bir leke gibi okunuyordu.
      Ayrıca altın/zeytin tonlar koyu sıcak zeminde kirli duruyordu.
      Ders: geniş yüzey boyaması setin rengini taşımak için yanlış araç —
      renk, KENARI OLMAYAN öğelere (çizgi, alt çizgi, sayı) bindiğinde
      kasıtlı, yüzeye yayıldığında hata gibi görünüyor.

      Yerine: sekme satırının alt çizgisi setin renginde başlayıp sönüyor.
      Çizginin kendi kenarı zaten var, dolayısıyla "kesik" izlenimi olmuyor. */
.viewswitch {
  /* Çizgi TAM GENİŞLİKTE kalır, yalnız solda setin rengiyle başlar ve
     olağan saç çizgisine oturur. Renk şeffaflığa sönseydi sağ yarıda
     ayırıcı hiç kalmıyordu ve bu sefer de "eksik" görünüyordu. */
  border-bottom-color: transparent;
  background-image: linear-gradient(to right,
                    var(--set-vurgu) 0%,
                    color-mix(in srgb, var(--set-vurgu) 45%, var(--hair)) 22%,
                    var(--hair) 52%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-image .32s ease;
}
/* 2) Açık sekme (Kartlar / Desteler) alt çizgisi setin rengine döner */
.vsw.on { box-shadow: inset 0 -2px 0 var(--set-vurgu); }
/* 3) Seçili hap kenarı — marka kırmızısı yerine setin rengi */
.chip.on { --kenar: var(--set-vurgu); }
/* 4) Nadirlik başlığı: şerit YOK ama sayı setin renginde okunur */
.rsec-head .ct { color: var(--set-vurgu); opacity: .85; }


/* ══════════════════════════════════════════════════════════════════════════
   HALKA GİRİŞİ (29 Ağu 2026, kullanıcı isteği: "aşağıdan yukarıya doğru
   dönerek gelsin"). Görseller küçültülüp istek öne alınsa bile ilk kareyi
   beklemek gerekiyor; halkanın birden belirmesi yerine yükselerek gelmesi
   o bekleyişi kesinti değil GİRİŞ hâline getiriyor.
   Dönüş animasyonu (asDon) halkanın KENDİSİNDE; giriş bu yüzden ayrı bir
   sarmalayıcıya kondu — aynı elemana iki transform animasyonu verilemez.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes asHalkaGir {
  from { opacity: 0; transform: translateY(64px) rotateX(14deg) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.as-sahne.girdi {
  animation: asHalkaGir 1.15s cubic-bezier(.22, .68, .32, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .as-sahne.girdi { animation: none; opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ANA SAYFA: EYLEM DÜĞMELERİ + ARŞİV RAKAMLARI (29 Ağu 2026)
   Sayfada hiçbir giriş kapısı yoktu; ilk gelen ziyaretçi ne yapacağını
   bilmiyordu. Arşivin büyüklüğü de hiçbir yerde geçmiyordu — oysa asıl
   iddia o. İkisi de eklendi, süsleme değil işlev olarak.
   ══════════════════════════════════════════════════════════════════════════ */
.as-sol { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); }
.as-eylem {
  display: flex; flex-wrap: wrap; gap: 10px;
  pointer-events: auto;            /* .as-metin genelinde kapalı */
}
.as-btn {
  font: inherit; font-size: clamp(13px, 1.05vw, 15px); font-weight: 600;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff; backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.as-btn:hover { background: color-mix(in srgb, #fff 18%, transparent);
                border-color: color-mix(in srgb, #fff 45%, transparent);
                transform: translateY(-1.5px); }
.as-btn:active { transform: translateY(0); }
.as-btn.birincil {
  background: #fff; color: #14110F; border-color: #fff; font-weight: 700;
}
.as-btn.birincil:hover { background: #fff; transform: translateY(-1.5px);
                         box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }

/* Rakam şeridi — hero'nun kendi renk dünyasının içinde, ayrı bir kutu değil.
   Sayılar display kesimiyle ve TABULAR rakamla dizilir ki hizalı dursunlar. */
.as-sayilar {
  padding: clamp(26px, 4vw, 54px) clamp(20px, 3.2vw, 64px);
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
}
.as-sayilar-ic {
  display: grid; gap: clamp(18px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  max-width: 1180px; margin: 0 auto;
}
.as-sayi { display: flex; flex-direction: column; gap: 4px; }
.as-sayi b {
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(26px, 2.9vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
}
/* "+" işareti sayının bir parçası ama onun kadar baskın değil */
.as-sayi .ozet-arti {
  font-size: .62em; margin-left: .06em; vertical-align: baseline;
  color: color-mix(in srgb, #fff 55%, transparent);
}
.as-sayi > span {
  font-size: clamp(11px, .82vw, 13px); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, #fff 62%, transparent);
}
@media (max-width: 720px) {
  .as-sayilar-ic { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   KART EKLEME SAYFASI (/ekle) — 29 Ağu 2026
   Açılır pencerenin sayfa hâli. Pencerede QR, yükleme ve sonuçlar üst üste
   sıkışıyordu; burada solda araçlar, sağda sonuçlar.
   ══════════════════════════════════════════════════════════════════════════ */
.ekle { padding: 26px 0 80px; }
.ek-sar { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.ek-bas { margin-bottom: 26px; }
.ek-bas h1 { font-family: var(--display); font-size: 34px; margin: 0 0 6px; }
.ek-bas p { margin: 0; color: var(--mt); font-size: 14px; max-width: 62ch; }

/* İKİ EŞİT YOL. Eskiden 320px'lik sol sütuna üç bölüm sıkışıyor, sağ sütun
   sonuç gelene kadar boş duruyordu. Artık telefon ve bilgisayar eşit ağırlıkta
   yan yana, sonuçlar aşağıda tam genişlikte. */
.ek-yollar {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}
.ek-yol {
  display: flex; flex-direction: column;
  background: var(--sf); border: 1px solid var(--bd);
  border-radius: 14px; padding: 18px;
}
/* Başlıklar artık küçük büyük-harf etiket DEĞİL. Dört bölümün de aynı
   etikete sahip olması hiyerarşiyi siliyordu. */
.ek-yol-bas {
  margin: 0 0 6px; font-family: var(--display);
  font-size: 17px; font-weight: 700; color: var(--tx);
}
.ek-ipucu {
  margin: 0 0 14px; font-size: 12.5px; color: var(--mt);
  line-height: 1.55; max-width: 46ch;
}
/* Eylem bölgesi alta yaslanır; iki kartın metni farklı uzunlukta olsa da
   QR ile bırakma alanı aynı hizada durur. */
.ek-qr, .ek-alan { margin-top: auto; }

/* Beyaz kutu QR'ı SARAR, karta yayılmaz. `width: fit-content` olmadan
   473px'e uzayıp 190px'lik kodun etrafında koca beyaz alan bırakıyordu. */
.ek-qr {
  background: #fff; border-radius: 10px; padding: 10px;
  display: flex; justify-content: center; align-items: center;
  min-height: 120px; width: fit-content; max-width: 100%;
}
.ek-qr svg { display: block; width: 100%; height: auto; max-width: 190px; }
.ek-qr-bekle { margin: 0; color: #555; font-size: 12.5px; }

/* Ham adres artık görünür değil. Hata ayıklama çıktısı gibi duruyordu;
   yalnız kodu okutamayan kullanıcı için açılıp geliyor. */
.ek-bag { margin-top: 12px; }
.ek-bag summary {
  cursor: pointer; font-size: 12.5px; color: var(--mt);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.ek-bag summary::-webkit-details-marker { display: none; }
.ek-bag summary::before { content: "+"; font-weight: 700; }
.ek-bag[open] summary::before { content: "−"; }
.ek-bag summary:hover { color: var(--tx); }
.ek-url {
  margin: 8px 0 0; font-size: 11.5px; color: var(--mt);
  word-break: break-all; line-height: 1.5;
  background: var(--slot); border-radius: 8px; padding: 8px 10px;
  user-select: all;
}
.ek-durum { margin: 10px 0 0; font-size: 12.5px; color: var(--mt); }

/* Kesikli çerçeve kartın DIŞ kenarından iç panele taşındı. Dışarıda kart
   sınırıydı, içeride "buraya bırakılabilir" demek oluyor. */
.ek-alan {
  border: 1px dashed var(--bd); border-radius: 10px;
  padding: 22px 16px; text-align: center;
  display: grid; gap: 12px; justify-items: center;
  transition: border-color .16s ease, background .16s ease;
}
.ek-alan-yazi { margin: 0; font-size: 13px; color: var(--mt); }
.ek-birak.uzerinde .ek-alan {
  border-color: var(--set-vurgu);
  background: color-mix(in srgb, var(--set-vurgu) 10%, transparent);
}

/* Arama alanı artık bir BÖLÜM değil, bir ayar. Görsel ağırlığı en düşük öğe. */
.ek-ayar {
  margin: 16px 0 26px; padding: 12px 16px;
  background: var(--slot); border-radius: 10px;
  display: grid; gap: 4px;
}
/* Genel .tara-kilit kuralı `justify-content: center` taşıyor (dar sütun için
   yazılmıştı). Tam genişlikteki ayar şeridinde satırı ortalıyor ve altındaki
   sola yaslı notla uyumsuz düşüyordu. */
.ek-ayar .tara-kilit { font-size: 13px; justify-content: flex-start; }
.ek-ayar .tara-kilitnot { margin: 0; font-size: 12px; color: var(--mt); }

/* Sonuçlar tam genişlikte ve sayfayı ikiye bölen bir çizginin altında. */
.ek-sonuc { border-top: 1px solid var(--bd); padding-top: 20px; }
.ek-sonuc-bas {
  margin: 0 0 14px; font-family: var(--display);
  font-size: 20px; font-weight: 700; color: var(--tx);
}
/* Genel .tara-sonuc kuralı 260px'te kesiyor ve kendi içinde kaydırıyor.
   Dar sütun için yazılmıştı; tam genişlikte sayfanın kendisi kaydırmalı. */
.ek-sonuc .tara-sonuc {
  max-height: none; overflow: visible;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ek-bos { margin: 0; color: var(--mt); font-size: 13px; }
.ek-sonuc .tara-sonuc:not(:empty) + .ek-bos { display: none; }

@media (max-width: 640px) {
  .ek-bas h1 { font-size: 28px; }
  .ek-yol { padding: 16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   DİL DUVARI (1 Eylül 2026) — kaydırmayla taranan koreografi.
   Sahne sırası (--dwp 0..1, app.js yazar):
     0,00–0,16  yazı belirir, kartlar üst üste tek kart gibi durur
     0,16–0,34  yazı okunur (bekleme)
     0,34–0,46  yazı kaybolur
     0,46–0,95  kartlar SOLDAN SAĞA açılır, kart başına gecikmeli
     üstüne gelince  o kart ekrana döner (rotateY 0) ve öne çıkar
   Tarama hilesi binder sahnesindekiyle aynı: animasyonlar `paused`,
   gecikme = −(ilerleme). Böylece koreografi tamamen CSS'te kalıyor.
   Kartın kendi dönüşü DIŞ katmanda (.dw-kart) değil İÇ katmanda (.dw-ic):
   dış katman kaydırma taramasının transformunu taşıyor, ikisi aynı özelliğe
   yazsaydı biri diğerini ezerdi.
   ══════════════════════════════════════════════════════════════════════════ */
.dw { height: 260vh; position: relative; --dwp: 0; }
.dw-yapis {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-rows: auto 1fr auto; align-content: center;
  /* minmax(0,1fr) ŞART: kolon `auto` kalınca satırın min-content'i (yedi kart)
     kapsayıcıdan genişse kolon ona göre KABARIYOR ve başlık/künye o geniş
     kolonda ortalanıp ekranın sağına kayıyordu (çürütme incelemesi, 2 Eyl:
     390px'te başlık merkezi x=414, ekran merkezi 195). */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px; padding: 88px var(--gut, 28px) 40px; box-sizing: border-box;
  overflow: hidden;
}

/* ── yazı: belirir, okunur, kaybolur ── */
.dw-metin {
  max-width: 62ch; margin: 0 auto; text-align: center;
  animation: dwYazi 1s linear paused both;
  animation-delay: calc(var(--dwp) * -1s);
}
.dw-metin h2 {
  margin: 0 0 10px; font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(24px, 3.4vw, 40px); color: #fff;
}
.dw-metin p { margin: 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; }
@keyframes dwYazi {
  0%          { opacity: 0; transform: translateY(16px); }
  16%, 34%    { opacity: 1; transform: none; }
  46%, 100%   { opacity: 0; transform: translateY(-10px); }
}

/* ── sahne ── */
/* Sahne düzeyinde perspektif YOK. Perspektif her kartın kendi dönüşümünde
   (.dw-ic, perspective() işlevi), böylece kaçış noktası kartın KENDİ
   merkezinde olur ve kenarlar dikey kalır. Sahne perspektifiyle kart
   sahnenin solunda durunca kenarları çarpılıyordu. */
.dw-sahne {
  display: grid; place-items: center; min-height: 0; min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.dw-sira {
  display: flex; justify-content: center; align-items: center;
  /* width: 100% ŞART. Bindirme formülü `100%` kullanıyor; satır içeriğine
     göre boyutlanırken yüzde marj döngüsel olur ve 0 sayılır → bindirme
     −7w/6'ya düşüp satırı SIFIR genişliğe çökertiyordu (ölçüldü 2 Eyl:
     satır sol=sağ=700). Kesin genişlikle yüzde kapsayıcıya göre çözülür;
     yelpaze yine `justify-content: center` ile ortalanır. */
  width: 100%; min-width: 0;
  /* Kart genişliği tek yerde; aşağıdaki sığdırma formülü de bunu okuyor. */
  --dw-w: clamp(124px, 15vw, 208px);
}

/* DIŞ katman: kaydırmayla açılma. --dx kartı yığının ortasına çeken piksel
   uzaklığı, JS düzenden sonra ölçüp yazıyor (transformdan bağımsız olsun
   diye offsetLeft üzerinden). --gec kart sırasına göre gecikme. */
.dw-kart {
  margin: 0; position: relative; flex: none;
  animation: dwAcil 1s linear paused both;
  /* ÇARPAN ŞART. Her kartın açılma penceresi ~0,167 ilerleme; bunu 1 sn'lik
     zaman çizgisine yaymak için 1/0,167 ≈ 6 ile çarpılıyor. Çarpansız
     bırakılınca kart penceresinin ancak yarısını kat ediyor ve son karede
     bile açılma bitmiyordu (1 Eyl'de ölçüldü: p=1'de ilk kart 185px'te
     takılı kalıyordu, 0 olmalıydı). */
  animation-delay: calc((var(--dwp) - var(--gec, 0)) * -6s);
}
/* DÜZ SIRA (2 Eyl akşamı): önce her kart 9px aşağı iniyordu, kullanıcı
   "alta doğru gitmemeli, üst çizgi ile alt çizgi aynı perspektifte olmalı"
   dedi. Dikey kayma kaldırıldı; yedi kartın üst kenarları tek çizgide.
   Ölçek büyükten küçüğe: tek kart iri durur, açıldıkça yedi kart küçülür.

   Z SIRASI KEYFRAME'DE (2 Eyl akşamı). Kullanıcı: "kaydırdıkça kart bir
   öncekinin ÜSTÜNDEN çıkmalı". Eskiden z sabit (sağdaki önde) olduğu için
   yeni çıkan kart yığının ALTINDAN kayıyordu. Şimdi üç kademe:
       0%      yığında bekliyor         z 10
       1–99%   hareket hâlinde          z 40  (her şeyin üstünde → üstten çıkar)
       100%    yerine oturdu            z 20+i (sağdaki önde, mockup 2)
   Yığındakiler eşit z'de (10) → DOM sırası → görünen yüz son kart; çizim
   yedisinde de aynı olduğu için yığın tek kart gibi okunuyor ve her seferinde
   "üstteki kart" desteden alınıyormuş gibi görünüyor. */
@keyframes dwAcil {
  /* Opaklık hep 1. Eskiden .4'ten başlıyordu; yedi kart aynı noktada
     üst üste durduğu için bu yalnız yığının üstünü anlık soldurup titretiyordu
     (çürütme incelemesi S4, 2 Eyl). Kart zaten yığının içinden çıkıyor,
     belirmesine gerek yok. */
  0%   { transform: translate3d(var(--dx, 0px), 0, 0) scale(1.34); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
/* Z SIRASI SINIFLARLA, KEYFRAME'LE DEĞİL (2 Eyl akşamı, üçüncü deneme).
   Keyframe'de z-index + satır içi --z denendi: hover'da --z'yi yükseltmek
   satır içi stile yenildi (ölçüldü: hover'daki kart 23'te kalıp sağ
   komşusunun altında çizildi). JS her kaydırma karesinde ilerlemeyi zaten
   biliyor; hangi kartın beklediğini / hareket ettiğini sınıfla işaretliyor.
   Böylece z sıradan kaskattan gelir ve :hover normal çalışır.
       .dw-bekle    yığında, henüz çıkmadı      z 10
       .dw-hareket  yığından çıkıyor            z 40  (her şeyin üstünde)
       (sınıfsız)   yerine oturdu               z 20+i (sağdaki önde)
       :hover       üstüne gelinen              z 60  */
.dw-kart { z-index: calc(20 + var(--i, 0)); }
.dw-kart.dw-bekle { z-index: 10; }
.dw-kart.dw-hareket { z-index: 40; }

/* ORTA katman: bir karta gelince komşular yana kaçar. Kendi transformu var
   çünkü .dw-kart'ta kaydırma animasyonu, .dw-ic'de dönme oturuyor; üçü aynı
   özelliğe yazsaydı biri diğerini ezerdi.
   Seçiciler: `:hover ~` sonraki kardeşleri, `:has(~ :hover)` ÖNCEKİ
   kardeşleri yakalıyor. Yani kaçış yönü kartın konumuna göre kendiliğinden
   belirleniyor, JS gerekmiyor. */
.dw-it { transition: transform .42s cubic-bezier(.2,.75,.3,1); }
/* Yalnız OTURMUŞ kartlar iter ve itilir. Yığındaki (.dw-bekle) ya da yoldaki
   (.dw-hareket) kart hover'a tepki verirse yığın yana zıplıyordu (çürütme
   incelemesi, 2 Eyl: p≈0,5'te ilk karta gelince altı kartlık yığın 43-86px
   sağa kayıyordu). :not() ile ikisi de dışarıda. */
.dw-sira .dw-kart:not(.dw-bekle):not(.dw-hareket):hover ~ .dw-kart:not(.dw-bekle):not(.dw-hareket) .dw-it,
.dw-sira .dw-kart:not(.dw-bekle):not(.dw-hareket):focus-within ~ .dw-kart:not(.dw-bekle):not(.dw-hareket) .dw-it {
  transform: translateX(clamp(32px, 3.8vw, 64px));
}
.dw-sira .dw-kart:not(.dw-bekle):not(.dw-hareket):has(~ .dw-kart:not(.dw-bekle):not(.dw-hareket):hover) .dw-it,
.dw-sira .dw-kart:not(.dw-bekle):not(.dw-hareket):has(~ .dw-kart:not(.dw-bekle):not(.dw-hareket):focus-within) .dw-it {
  transform: translateX(calc(clamp(32px, 3.8vw, 64px) * -1));
}

/* İÇ katman: duruşta yana dönük, üstüne gelince ekrana döner. */
/* MOCKUP'TAN ÖLÇÜLDÜ (2 Eyl 2026). Kullanıcının verdiği örnekte kartın
   köşeleri okundu: sol kenar 950px, sağ kenar 820px (uzak/yakın 0,863),
   görünen genişlik 570px. Dikey eksen etrafında dönüş modeliyle çözülünce:
     dönüş açısı    25°
     perspektif     kart genişliğinin 2,9 katı
     kaçış noktası  kartın kendi merkezi (iki kenar da dikey)
   Önceki ayar 24° / sahne düzeyinde 1000px'ti: açı doğruydu ama perspektif
   190px kart için genişliğin 5,3 katıydı, yani 1,8 kat fazla uzak. Kart
   bu yüzden mockup'tan çok daha düz görünüyordu.
   --dw-p = 2,9 × kart genişliği (.dw-gorsel ile aynı clamp'in 2,9 katı). */
.dw-ic {
  /* 2 Eyl akşamı: kullanıcı "biraz daha perspektif" istedi. 25° / 2,9× →
     28° / 2,5×. Mockup ölçümünün bir tık üstü, bilinçli. */
  --dw-p: clamp(310px, 37.5vw, 520px);
  transform: perspective(var(--dw-p)) rotateY(28deg);
  transform-origin: 50% 50%;
  transition: transform .42s cubic-bezier(.2,.75,.3,1), filter .42s ease;
  filter: brightness(.86);
  will-change: transform;
}
.dw-kart:not(.dw-bekle):not(.dw-hareket):hover .dw-ic,
.dw-kart:not(.dw-bekle):not(.dw-hareket):focus-within .dw-ic {
  transform: perspective(var(--dw-p)) rotateY(0deg) translateZ(70px) scale(1.07);
  filter: brightness(1.06);
}
/* z-index artık keyframe'de değil (bkz. .dw-bekle/.dw-hareket), o yüzden
   hover kuralı sıradan kaskatla çalışıyor. */
.dw-kart:not(.dw-bekle):not(.dw-hareket):hover,
.dw-kart:not(.dw-bekle):not(.dw-hareket):focus-within { z-index: 60; }
/* Klavye: kartın içinde odaklanabilir öğe yoktu, :focus-within hiç
   eşleşmiyordu (çürütme S5). .dw-ic tabindex="0" alıyor (app.js). */
.dw-ic:focus { outline: none; }
.dw-ic:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 12px; }

.dw-gorsel {
  width: var(--dw-w); aspect-ratio: 245 / 342;
  border-radius: 9px; overflow: hidden; position: relative;
  background: rgba(255,255,255,.05);
  /* Mockup'taki gibi belirgin, sağ-alta düşen gölge. Kart eğik durduğu için
     gölge de eğik okunuyor ve derinliği o taşıyor. */
  box-shadow: 14px 20px 40px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.5);
}
.dw-gorsel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Ad ve dil: kart açıldıktan sonra görünsün, kalabalık yapmasın. */
.dw-kart figcaption {
  margin: 12px 0 0; text-align: center;
  animation: dwAd 1s linear paused both;
  animation-delay: calc((var(--dwp) - var(--gec, 0)) * -6s);
}
@keyframes dwAd {
  0%, 30%   { opacity: 0; transform: translateY(6px); }
  60%, 100% { opacity: 1; transform: none; }
}
.dw-dil {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.48);
}
/* Bölümün esprisi bu satır: aynı çizim, değişen ad. */
.dw-ad { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }

.dw-dip {
  margin: 0; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
  animation: dwYaziTers 1s linear paused both;
  animation-delay: calc(var(--dwp) * -1s);
}
@keyframes dwYaziTers { 0%, 55% { opacity: 0; } 80%, 100% { opacity: .75; } }

/* Kartlar üst üste binsin: yığın hissi ve fan görüntüsü.
   SIĞDIRMA (2 Eyl, çürütme incelemesi): ~814px altında 7×124px kart −18px
   bindirmeyle 760px ediyor ve telefona sığmıyordu. Bindirme artık iki
   değerin daha NEGATİF olanı: tasarım değeri ya da satırı kapsayıcıya tam
   sığdıran (100% − 7w) / 6. Geniş ekranda ikisi zaten yakın (1400px'te −48
   ile −48), dar ekranda yelpaze kendiliğinden sıkışıyor: 390px'te bindirme
   −91px, yani her kart 33px gösteriyor. Aynı çizim olduğu için bu "elde
   tutulan deste" gibi okunuyor, kırık değil. */
.dw-kart + .dw-kart {
  margin-left: min(clamp(-56px, -3.4vw, -18px), calc((100% - 7 * var(--dw-w)) / 6));
}

/* Dil listesi künyede yalnız dar ekranda görünür (aşağıdaki sorgu açar).
   Temel kural sorgudan ÖNCE durmalı: ikisi aynı özgüllükte, sonra gelen
   kazanır; ters sırada yazılınca dar ekranda da gizli kalıyordu (2 Eyl). */
.dw-diller { display: none; margin-top: 6px; color: rgba(255,255,255,.62); }
@media (max-width: 760px) {
  .dw { height: 230vh; }
  .dw-yapis { padding: 76px 18px 32px; }
  /* Kartlar 33-60px gösterirken altlarındaki ad ve dil üst üste biniyor;
     altyazı gizlenir, diller künyede tek satır olarak sıralanır (#dwDiller). */
  .dw-kart figcaption { display: none; }
  .dw-diller { display: block; }
}
/* Hareket azaltma: sahne son hâlinde durur, tarama yok. */
@media (prefers-reduced-motion: reduce) {
  .dw { height: auto; }
  .dw-yapis { position: static; height: auto; }
  .dw-metin, .dw-kart, .dw-kart figcaption, .dw-dip { animation: none; opacity: 1; transform: none; }
  .dw-ic { transform: none; filter: none; }
  /* Hover pop ve komşu itmesi de geçişsiz olsun; hareket azaltma tam olsun
     (çürütme incelemesi, 2 Eyl). Durum değişir ama süzülmez. */
  .dw-it, .dw-ic { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BİNDER SAHNESİ v3 (29 Ağu 2026) — kaydırmayla taranan animasyon.

   GEOMETRİ DERSLERİ (v1→v3, hepsi kullanıcı ekran görüntüleriyle yakalandı):
   · v1: kapaklar kalınlıksızdı → dönüşte kâğıt gibi okundu.
   · v2: kalınlık 10+ ayrı parçayla dikildi (kapak başına 3 kenar şeridi +
     3 gövde bandı + sırt + cilt). Sığ açılarda her parça ayrı "kanat" gibi
     fırladı, köşelerde zemin sızdı. Parçalı kenar YANLIŞ mimari.
   · v3: kutunun DÖRT SÜREKLİ yüzü var (üst, alt, sağ, sırt) ve kapaklar
     ince düzlem. Gövde yüzleri kapak siluetinden 3px İÇERİDE durur —
     silueti her zaman yuvarlak köşeli kapaklar çizer, taşacak parça yok.
   · Döndürme işaret kuralı (CSS): rotateY(+90) +x→−z · rotateY(−90) +x→+z
     · rotateX(+90) +y→+z · rotateX(−90) +y→−z. Sırt bir kez bu yüzden
     koptu; şerit zincirleri hep `translateZ(−yarım) rotate(±90)` kalıbında.

   GÖRSEL DİL: yumuşak (cel-shading DENENDİ ve kullanıcı vazgeçti; sırt
   yazısı da kaldırıldı — binder yüzeyinde yazı YOK).

   Kurgu tek zaman çizgisinde (0→%100 = kaydırma ilerlemesi --b3p):
     %0–26 dönerek geliş · %28–56 kapak açılır · %56–100 kartlar ceplere.
   Tarama hilesi: animasyonlar `paused`, delay = −p (kartlarda bas−p).
   ══════════════════════════════════════════════════════════════════════════ */
/* Dil düğmesi (30 Ağu 2026) — üst çubuğun sağında, görev ikonundan önce.
   dil.js tarafından çizilir; kendi metni çevrilmesin diye data-dil-atla var. */
.dil-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: inherit;
  font: 600 11.5px/1 var(--ui, inherit); letter-spacing: .06em;
  padding: 6px 9px; border-radius: 999px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.dil-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.dil-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 340vh → 420vh: kartlar oturduktan sonra sahnenin durduğu bir pay olsun
   diye uzatıldı. Kaydırma yolu 240vh'ten 320vh'e çıkıyor, kare başına düşen
   kaydırma da 17,4px'ten 18,4px'e çıktığı için akıcılık biraz artıyor. */
.b3 { height: 420vh; position: relative; --b3p: 0; --b3c: 0; }
.b3-yapis {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden;
}
/* Metin bloğu üst çubuğun ALTINDAN başlar. Eskiden 6.5vh'taydı ve yüzen
   üst çubuğun arkasında kalıyordu (30 Ağu'da bildirildi). Kanvas 56vh'a
   indirilip %54'e kaydırıldığı için burada 24vh'a kadar yer var. */
.b3-metin {
  position: absolute; top: clamp(88px, 12vh, 132px); left: 0; right: 0;
  display: grid; gap: 10px; justify-items: center; padding: 0 20px;
  animation: b3Soz 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
}
.b3-soz {
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(20px, 2.6vw, 34px); color: #fff;
}
.b3-alt {
  /* 46ch'te paragraf 5 satıra sarıyor ve kanvasın üstüne biniyordu
     (30 Ağu: metin 270px'te bitiyor, kanvas 234'te başlıyordu). */
  margin: 0; text-align: center; max-width: 64ch;
  font-size: clamp(13px, 1.15vw, 15.5px); line-height: 1.5;
  color: rgba(255,255,255,.72);
}
.b3-soz b { color: #FF4B2B; }
@keyframes b3Soz {
  0%       { opacity: 0; transform: translateY(18px); }
  14%, 88% { opacity: 1; transform: none; }
  100%     { opacity: .5; transform: translateY(-6px); }
}

/* KARE DİZİSİ KANVASI (30 Ağu 2026): kaydırmayla sarılan 97 WebP kare,
   alfa kanallı, toplam 1,34 MB. Video (7,8 MB) yerine bu seçildi — hem
   küçük hem iOS'ta kare-hassas sarma garantili (video seek değil).
   En/boy 1,3006 KARELERDEN ölçüldü (900×692); kaynak video değişirse burası
   da değişmeli, yoksa kanvas görüntüyü esnetir.
   Kareler hazır olunca JS .kareli sınıfını koyar ve CSS binder gizlenir;
   yüklenemezse CSS sahnesi yedek olarak görünür kalır. */
.b3-kanvas {
  position: absolute; left: 50%; top: 57%;
  transform: translate(-50%, -50%);
  /* calc() ŞART: `56vh * 1.3006` calc dışında geçersizdir, bildirim
     düşer ve kanvas 0 genişlikte kalır (30 Ağu'da yaşandı).
     62vh → 56vh ve merkez %50 → %54: üstte açıklama metnine yer açmak için. */
  width: min(74vw, calc(56vh * 1.3006)); height: auto;
  display: block; opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.b3-yapis.kareli .b3-kanvas { opacity: 1; }

/* KARE MODUNDA AKIŞ DÜZENİ (30 Ağu 2026). Metin ve kanvas önce mutlak
   konumlandırılmıştı; metin px yüksekliğinde sabit, kanvas ise vh ile
   ölçeklendiği için kısa ekranda üst üste biniyorlardı (1280×680'de 37px
   çakışma ölçüldü). Kare modunda ikisi de akışa alınıyor, dikey paylaşımı
   tarayıcı yapıyor. Yedek CSS sahnesi (.kareli YOKKEN) eski ızgara
   düzeninde kalıyor — orada .b3-sahne akışta ve merkezleniyor. */
.b3-yapis.kareli {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(12px, 2.4vh, 30px);
  padding: clamp(72px, 10vh, 120px) 20px clamp(20px, 4vh, 48px);
  box-sizing: border-box;
}
.b3-yapis.kareli .b3-metin { position: static; width: 100%; }
/* Kanvas değiştirilmiş (replaced) öge gibi davranır: width/height auto +
   max-* verilince kendi en/boyunu koruyarak sığar. Kart katmanı ölçüyü
   kanvasın kutusundan okuduğu için kendiliğinden takip eder. */
.b3-yapis.kareli .b3-kanvas {
  position: static; transform: none; left: auto; top: auto;
  width: auto; height: auto; max-width: 74vw; max-height: 56vh;
  min-height: 0;
}

/* ── KARTLARIN CEPLERE OTURMASI ────────────────────────────────────────
   Katman kanvasla AYNI kutuya JS tarafından yerleştirilir (`b3KartHiza`),
   sonra matrix3d ile son karedeki cep dörtgenine oturtulur. İçerideki 3×3
   ızgara sıradan CSS — perspektifi tek dönüşüm taşıyor, kart başına matris
   yok. Yerel ölçü 290×400 (gerçek cep alanı oranı 0,725: 3 kart + 2 boşluk).
   Kartlar `--b3c` ile sarılır: kareler kaydırmanın %78'inde biter, kalan
   %22'de kartlar uçar (video sonunda hareketsiz DEĞİL, o yüzden son kare
   tutuluyor). */
.b3-kartlar {
  position: absolute; left: 0; top: 0;
  width: 290px; height: 400px;
  transform-origin: 0 0; opacity: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); gap: 6px;
  pointer-events: none;
}
.b3-yapis.kareli .b3-kartlar { opacity: 1; }
.b3-yuva { position: relative; }
.b3-k {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  animation: b3KartGel 1s linear paused both;
  /* Her kart --bas'ta başlar ve toplam sürenin 1/3'ünde biter:
     ilerleme = (c − bas) × 3  →  gecikme = −(c − bas) × 3s.
     --bas satır içi stille JS'ten geliyor; yedek şart, yoksa değer
     gelmediğinde calc geçersiz olur ve gecikme sessizce 0'a düşer. */
  animation-delay: calc((var(--b3c) - var(--bas, 0)) * -3s);
}
@keyframes b3KartGel {
  0%   { opacity: 0; transform: translate(55%, -150%) rotate(7deg) scale(1.12); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.b3-yapis.kareli .b3-sahne,
.b3-yapis.kareli .b3-golge { display: none; }

.b3-sahne {
  /* Dokular DÖŞENEBİLİR üretildi (importers değil, tek seferlik script):
     örgü = 2×2 sepet dokuma (ballistic nylon araştırması), kadife = ince
     hav + dikey tüy. İkisi de birkaç KB, app/assets/doku/. */
  --orgu: url("/assets/doku/orgu.png");
  --kadife: url("/assets/doku/kadife.png");
  --bw: clamp(270px, 34vw, 430px);      /* kapak genişliği — her ölçü bundan */
  --bh: calc(var(--bw) * 1.3);
  --bt: calc(var(--bw) * .12);          /* gövde kalınlığı (+%40, kullanıcı) */
  perspective: 1400px;
  width: var(--bw); height: var(--bh);
  position: relative;
}
.b3-golge {
  position: absolute; left: 50%; bottom: calc(var(--bh) * -0.14);
  width: 140%; height: 40px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  animation: b3Golge 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
}
@keyframes b3Golge {
  0%   { transform: translateX(-50%) scale(.5); opacity: .25; }
  26%  { transform: translateX(-50%) scale(.95); opacity: .85; }
  100% { transform: translateX(-50%) scale(1.4); opacity: .7; }
}

.b3-binder {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: b3Binder 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
}
@keyframes b3Binder {
  0%   { transform: translateY(6vh) rotateY(152deg) rotateX(9deg) scale(.8); }
  13%  { transform: translateY(2.5vh) rotateY(66deg) rotateX(8deg) scale(.94); }
  26%  { transform: rotateY(0deg)   rotateX(7deg)  scale(1.06); }
  42%  { transform: rotateX(24deg)  rotateY(-11deg) scale(.99) translateX(calc(var(--bw) * .2)); }
  100% { transform: rotateX(27deg)  rotateY(-14deg) scale(.97) translateX(calc(var(--bw) * .22)); }
}

/* ---- kapak düzlemleri (ince — kalınlık gövdeden gelir) ---- */
.b3-yuz {
  position: absolute; inset: 0;
  /* Köşeler 29 Ağu'da belirginleştirildi (kullanıcı: "köşeler kıvrımlı
     değil"). Sırt tarafı küçük (cilt menteşesi), dış taraf geniş yay. */
  border-radius: 6px 20px 20px 6px;
  backface-visibility: hidden;
}
.b3-arka { position: absolute; inset: 0; transform-style: preserve-3d; }
.b3-arka-dis {
  transform: rotateY(180deg) translateZ(calc(var(--bt) * .5));
  background:
    var(--orgu) repeat 0 0 / 13px 13px,
    linear-gradient(210deg, #23262d, #14161b 60%);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.05);
}
.b3-arka-dis::before {
  content: ""; position: absolute; inset: 10px;
  border-radius: 15px 4px 4px 15px;
  border: 1.5px dashed rgba(255,255,255,.11);
}
.b3-arka-ic {
  transform: translateZ(calc(var(--bt) * -.5));
  background:
    var(--kadife) repeat 0 0 / 90px 90px,
    linear-gradient(150deg, #1e1a22, #131016);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.04);
  transform-style: preserve-3d;
}
.b3-kapak {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: b3Kapak 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
}
/* MENTEŞE SİLİNDİRİN ÖN TEĞETİNDE (x=0, z=+bt/2) — gerçek binder mekaniği
   (Meshy referansı). v3'te eksen z=0'daydı (silindir merkezi) ve kapağın
   yüzleri grubun İKİ zıt yanındaydı: açılırken yüzler ayrı yay çizip
   İKİYE AYRILIYOR, kapak da dönüş ortasında silindirin içinden geçiyordu
   (kullanıcının "kapak açılırken hata" dediği kare). Grup önce ön düzleme
   taşınır SONRA döner; yüzler grup düzleminde durur. Ön teğetten dönen
   kapak z ≥ bt/2 yarı-uzayında kalır — silindire değmesi geometrik olarak
   imkânsız (silindir yüzeyi ≤ .966·bt/2). */
@keyframes b3Kapak {
  0%, 28% { transform: translateZ(calc(var(--bt) * .5)) rotateY(0deg); }
  50%     { transform: translateZ(calc(var(--bt) * .5)) rotateY(-176deg); }
  58%,100%{ transform: translateZ(calc(var(--bt) * .5)) rotateY(-167deg); }
}
.b3-dis {
  background:
    var(--orgu) repeat 0 0 / 13px 13px,
    linear-gradient(150deg, #272b33 0%, #181b21 55%, #14161b 100%);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),
              inset 0 0 0 1.5px rgba(255,255,255,.05);
}
.b3-dis::before {
  content: ""; position: absolute; inset: 10px;
  border-radius: 4px 15px 15px 4px;
  border: 1.5px dashed rgba(255,255,255,.13);
}
.b3-dis::after {                        /* dönüşte süpürülen yumuşak parlama */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 32%, rgba(255,255,255,.15) 46%,
    rgba(255,255,255,.05) 52%, transparent 64%) no-repeat;
  background-size: 260% 100%;
  animation: b3Parla 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
  pointer-events: none;
}
/* Parlama 29 Ağu'da yeniden yazıldı: eskiden %26'da tam opak bitip %34'e
   kadar sönüyordu — kullanıcı "köşede parlama sonra bir anda yok oluyor"
   dedi. Sebep: konum %26'da duruyordu ama opaklık ayrı sönüyordu, yani
   duran bir ışık lekesi kayboluyordu. Artık ışık HAREKET EDEREK sönüyor
   ve girişte de yumuşak açılıyor — hiçbir anda duran leke yok. */
@keyframes b3Parla {
  0%       { background-position: 145% 0; opacity: 0; }
  7%       { opacity: .85; }
  20%      { opacity: .85; }
  30%      { background-position: -75% 0; opacity: 0; }
  100%     { background-position: -75% 0; opacity: 0; }
}
.b3-ic {
  /* Dış yüzün 1px arkasında, içeri bakar — kapak İNCE tek levha. */
  transform: translateZ(-1px) rotateY(180deg);
  background:
    var(--kadife) repeat 0 0 / 90px 90px,
    linear-gradient(150deg, #1e1a22, #131016);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.04);
}

/* ---- gövde: dört SÜREKLİ yüz ----
   Hepsi kapak siluetinden 3px içeride (top/bottom/left/right insetleri) —
   silueti her zaman kapaklar çizer, gövde asla taşamaz. Kapak açılınca
   görünen gövde = içerideki sayfa bloğu; fiziksel olarak da doğru. */
.b3-govde {
  position: absolute; inset: 0; transform-style: preserve-3d;
  pointer-events: none;          /* saydam kapsayıcı — ışın testini yanıltmasın */
}
.b3-g { position: absolute; background: linear-gradient(180deg, #191c22, #101216); }
.b3-g-sag {
  top: 14px; bottom: 14px; right: 3px; width: var(--bt);
  transform-origin: right center;
  animation: b3KalinlikX 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
  border-radius: 3px;
  /* Ön kenar (fore-edge): düz bant değil, yaprak ağızları — kalınlığın
     içinde sayfalar olduğunu dışarıdan da söyler. */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #22262e, #14161b 70%);
}
.b3-g-ust {
  /* Sola R kadar uzar ve sol ucu tam yuvarlanır: silindirin ÜST KAPAĞI
     bu D-biçimli yüzün ucudur. Sağ uç köşe yayının İÇİNDE kalsın diye
     14px içeri çekildi — yoksa yuvarlak köşeden dışarı sivri uç taşar. */
  left: calc(var(--bt) * -.5 + 2px); right: 14px; top: 2px; height: var(--bt);
  transform-origin: top center;
  animation: b3KalinlikY 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
  background: linear-gradient(90deg, #1d2027, #14161b);
  border-radius: 999px 3px 3px 999px;
}
.b3-g-alt {
  left: calc(var(--bt) * -.5 + 2px); right: 14px; bottom: 2px; height: var(--bt);
  transform-origin: bottom center;
  animation: b3KalinlikYa 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
  background: #0e1013;
  border-radius: 999px 3px 3px 999px;
}
/* ---- sırt: 6 parçalı YARIM SİLİNDİR (fıçı tekniği) ----
   Her parça dikey tam boy bir şerit; kendi açısında döndürülüp apotem
   kadar dışarı itilir (rotateY(θ) translateZ(A)). Normaller 180°→360°
   yayını tarar: yarım fıçı sola (dışa) şişer, düz tarafı gövdeye bakar.
   Parça uçları DÜZ — silindirin üst/alt kapağını D-biçimli üst/alt
   yüzler kapatır (aşağıda). Yuvarlak uçlu tek şerit "kulak" hatasının
   kaynağıydı, bir daha denenmesin.
   Ölçüler: R = bt/2 · kiriş = 2R·sin15° ≈ .518R · apotem = R·cos15° ≈ .966R */
.b3-sirtk {
  pointer-events: none;
  --sr: calc(var(--bt) * .5);
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 0;
  transform-style: preserve-3d;
}
.b3-sirtk i {
  position: absolute; top: 0; bottom: 0;
  /* 12 parça × 15° (6 parça KÖŞELİ duruyordu — kullanıcı). Kiriş
     2R·sin7,5° = .261R; +%5 bindirme payıyla dikiş görünmez. */
  width: calc(var(--sr) * .274);
  left: calc(var(--sr) * -.137);
  /* backface GİZLENMEZ (29 Ağu dersi): fıçı içi boş bir kabuk; arka yüzler
     gizlenince menteşe aralığından bakan göz kabuğun karşı duvarını DELİP
     zemini görüyordu (dikey kırmızı şerit). elementFromPoint gizli arka
     yüzleri de "dolu" saydığı için ışın testi bu delik türüne KÖRDÜR —
     kural: içi görünebilecek her kabuk iki yüzden de boyalı olacak. */
}
/* Işık ön-soldan: kameraya/ışığa bakan orta parçalar açık, uçlar koyu */
/* Fıçının düz tarafı (çap duvarı): menteşe hattını kapatan opak levha.
   İki yüzü de görünür — kabuğun içine hangi açıdan bakılırsa bakılsın
   arkasında zemin değil bu duvar var. */
.b3-sirtk::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--sr) * -1); width: calc(var(--sr) * 2);
  transform: rotateY(90deg);
  background: #14161b;
}
.b3-sirtk i:nth-child(1) { transform: rotateY(187.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #0e1014, #0e1014 50%, #0e1014); }
.b3-sirtk i:nth-child(2) { transform: rotateY(202.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #0e1014, #0e1014 50%, #0e1014); }
.b3-sirtk i:nth-child(3) { transform: rotateY(217.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #0e1014, #15171d 50%, #1a1d24); }
.b3-sirtk i:nth-child(4) { transform: rotateY(232.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #1a1d24, #1f232a 50%, #242830); }
.b3-sirtk i:nth-child(5) { transform: rotateY(247.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #242830, #282c36 50%, #2b303a); }
.b3-sirtk i:nth-child(6) { transform: rotateY(262.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #2b303a, #2e343e 50%, #313642); }
.b3-sirtk i:nth-child(7) { transform: rotateY(277.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #313642, #333944 50%, #343a46); }
.b3-sirtk i:nth-child(8) { transform: rotateY(292.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #343a46, #353b47 50%, #363c48); }
.b3-sirtk i:nth-child(9) { transform: rotateY(307.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #363c48, #353b47 50%, #343a46); }
.b3-sirtk i:nth-child(10) { transform: rotateY(322.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #343a46, #333944 50%, #313642); }
.b3-sirtk i:nth-child(11) { transform: rotateY(337.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #313642, #2e343e 50%, #2b303a); }
.b3-sirtk i:nth-child(12) { transform: rotateY(352.5deg) translateZ(calc(var(--sr) * .9914)); background: linear-gradient(90deg, #2b303a, #282c36 50%, #242830); }

/* GÖVDE KALINLIĞI KAPAKLA BİRLİKTE İNCELİR (29 Ağu).
   Kapalıyken gövde tam kalınlıkta (iki kapak + sayfalar). Kapak açılınca
   geriye YALNIZ sayfa bloğu kalır; gövde kutusu eski kalınlığını korursa
   arka kapağın üstünden taşıyor ve üstte ince bir dilim olarak görünüyordu
   (ölçüm: +16px, altta yok — asimetrik, kullanıcı ekran görüntüsüyle
   yakaladı). Ölçek yüzeyin KENDİ ekseninde: 90° döndürülmüş şeritte
   yükseklik/genişlik derinliğe karşılık gelir, origin arka kapak tarafında
   olduğu için incelme oraya doğru olur. */
@keyframes b3KalinlikY {
  0%, 28%   { transform: translateZ(calc(var(--bt) * -.5)) rotateX(90deg) scaleY(1); }
  50%, 100% { transform: translateZ(calc(var(--bt) * -.5)) rotateX(90deg) scaleY(.2); }
}
@keyframes b3KalinlikYa {
  0%, 28%   { transform: translateZ(calc(var(--bt) * -.5)) rotateX(-90deg) scaleY(1); }
  50%, 100% { transform: translateZ(calc(var(--bt) * -.5)) rotateX(-90deg) scaleY(.2); }
}
@keyframes b3KalinlikX {
  0%, 28%   { transform: translateZ(calc(var(--bt) * -.5)) rotateY(90deg) scaleX(1); }
  50%, 100% { transform: translateZ(calc(var(--bt) * -.5)) rotateY(90deg) scaleX(.2); }
}

/* ---- iç sayfa: 3×3 cep ---- */
/* ---- yaprak yığını: aktif sayfanın altındaki cep yaprakları ----
   Her yaprak biraz daha küçük ve derinde; sağ kenarda uçları çıkar.
   Binder böylece "içi boş kutu" değil, dolu bir cilt gibi okunur. */
.b3-yapraklar {
  position: absolute; inset: 0; transform-style: preserve-3d;
  pointer-events: none;
}
.b3-yapraklar span {
  position: absolute; inset: 3.5% 3% 3.5% 4%;
  border-radius: 3px 9px 9px 3px;
  background: linear-gradient(100deg, #22262f, #191c23 55%, #15181e);
  box-shadow: 0 1px 2px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.05);
}
/* 7 yaprak: her biri biraz daha derin ve sağa kayık → açık binder'da
   altta gerçek bir sayfa bloğu görünür (kullanıcı: "içi boş kutu gibi"). */
.b3-yapraklar span:nth-child(1) { transform: translateZ(3.5px) translateX(2.1%); }
.b3-yapraklar span:nth-child(2) { transform: translateZ(3px)   translateX(1.8%); }
.b3-yapraklar span:nth-child(3) { transform: translateZ(2.5px) translateX(1.5%); }
.b3-yapraklar span:nth-child(4) { transform: translateZ(2px)   translateX(1.2%); }
.b3-yapraklar span:nth-child(5) { transform: translateZ(1.5px) translateX(.9%); }
.b3-yapraklar span:nth-child(6) { transform: translateZ(1px)   translateX(.6%); }
.b3-yapraklar span:nth-child(7) { transform: translateZ(.5px)  translateX(.3%); }

.b3-sayfa {
  /* Yatay iç boşluk dikeyden geniş: cepler böylece tam KART ORANINDA
     (63×88) kalıyor — eskiden hücreler ızgarayı doldurup yamuluyordu
     (kullanıcı: "folyolar tam kart boyutunda olmalı"). */
  position: absolute; inset: 5% 7.5%;
  /* z=6: yaprak yığınının (0,5–3,5) ÜSTÜNDE. z=2'ydi ve yapraklar kartları
     örtüyordu — kart uçarken z=130'da görünüp cebine oturunca kayboluyordu
     (29 Ağu, kullanıcı: "kartlar bir yerden sonra yok oluyor"). Aktif sayfa
     her zaman yığının önünde olmalı. */
  transform: translateZ(6px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 4.5%; row-gap: 3.5%;
  align-content: center; justify-items: stretch;
  transform-style: preserve-3d;
  animation: b3SayfaGoster 1s linear paused both;
  animation-delay: calc(var(--b3p) * -1s);
}
@keyframes b3SayfaGoster {
  0%, 31%  { opacity: 0; }
  40%, 100%{ opacity: 1; }
}
.b3-cep {
  position: relative; border-radius: 7px;
  aspect-ratio: 63 / 88;                 /* gerçek kart oranı */
  /* TEK PARÇA folyo (29 Ağu, üçüncü deneme — kullanıcı: "folyo hâlâ
     yarım"): cebi bölen HİÇBİR yatay öğe yok. Ağız şeridi tümden
     kaldırıldı; ara duraklı gradyan da bant gibi okunabildiği için tek
     pürüzsüz geçişe indirildi. Folyo = kart boyunda tek parlak kılıf. */
  background: linear-gradient(170deg,
    rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.11);
  transform-style: preserve-3d;
}
/* Cep ağzı şeridi KALDIRILDI (29 Ağu): "kart içeride" hissi için
   konmuştu ama cebi ikiye bölüyor, boş folyo yarım boy okunuyordu —
   kullanıcı üç kez işaret etti. Bir daha eklenmesin. */
.b3-kart {
  /* Cep artık kart oranında → kart cebi TAM doldurur (folyo=kart). */
  position: absolute; inset: 1.5%;
  border-radius: 5px; object-fit: cover; width: 97%; height: 97%;
  box-shadow: 0 5px 14px rgba(0,0,0,.5);
  animation: b3Kart .16s linear paused both;
  animation-delay: calc((var(--bas, .6) - var(--b3p)) * 1s);
}
@keyframes b3Kart {
  0%   { transform: translate(150%, -90%) translateZ(130px) rotateZ(20deg) scale(1.12);
         opacity: 0; }
  12%  { opacity: 1; }
  76%  { transform: translate(-4%, 3%) translateZ(10px) rotateZ(-3deg); }
  100% { transform: none; }
}

@media (max-width: 700px) {
  /* Masaüstündeki 420vh ile aynı orana çekildi (eskiden 340 → 300 idi).
     Kartlar oturduktan sonraki duruş payı burada da olsun diye. */
  .b3 { height: 370vh; }
  .b3-sahne { --bw: min(72vw, 300px); }
}
/* Hareket azaltma: JS --b3p'yi 1'e sabitler — sahne son hâlinde durur. */