/* ==========================================================================
   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 {
  /* Tanker 7 Eyl 2026'da listeden çıkarıldı: yarışı Red Hat Display kazandı
     ve dosyası boşuna iniyordu. Archivo yalnız binder ekranında yüklenir. */
  --display: "Red Hat Display", 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; }
/* Altbilgi ekrana girince hap yukarı çekilir (bkz. altbilgi.js gerekçesi).
   Dönüşüm kullanılıyor: düzen kaymıyor, geri gelirken de yumuşak. */
.topbar { transition: transform .24s ease; }
:root[data-altbilgide] .topbar { transform: translateY(-140%); }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.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; }
/* Eşik 760 → 830 (8 Eyl 2026 QA). 768 px (iPad dikey) bu sorgunun DIŞINDA
   kalıyordu ve masaüstü üç sütunu sığmıyordu: `.topbar-right` sağ kenarı 781,
   belge 781 px'e kayıyor, "Giriş yap" 59 px'e sıkışıp iki satıra sarıyor ve
   kesiliyordu. Eşik önce 830 denendi, 834 px'te "Giriş yap" hâlâ iki satıra
   sarıyordu (yükseklik 33 → 53); 900'de üç sütun rahat sığıyor. */
@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: minmax(0, auto) minmax(0, 1fr); row-gap: 10px; }
  /* 7 Eyl 2026 QA (B1/B2): hap `width: max-content` ile 481 px kalıp 390 px
     ekranı 497 px'e genişletiyordu (arama kutusu ve kart paneli kapatma
     düğmesi ekran dışında). Artık sütuna sığar, içi yatay kaydırılır. */
  .topbar-inner > .navpill { grid-column: 1 / -1; justify-self: stretch;
    width: auto; max-width: 100%; }
  /* Hap içi öğeler iki satıra kırılır: arama kutusu dahil hepsi görünür
     (yatay kaydırma denendi, arama kutusu gizli kalıyordu). */
  .topbar-inner > .navpill, .topbar-inner > .navpill > nav, #modeTabs { flex-wrap: wrap; row-gap: 6px; }
  #modeTabs { max-width: 100%; }
  /* ÜÇ SATIR → İKİ SATIR (8 Eyl 2026 QA). Otomatik yerleşimde hap iki sütunu
     birden kapladığı için kendi satırını açıyor, kimlik/dil kümesi de üçüncü
     satıra düşüyor ve SOLA yaslanıyordu: 375 px'te üst çubuk 178 px (ekranın
     %22'si), 768 px'te 191 px. Marka ile sağ küme aynı satıra alınınca 49 px
     geri kazanılıyor ve sağ küme yine sağda duruyor. */
  .topbar-inner > .brand { grid-row: 1; grid-column: 1; }
  .topbar-inner > .topbar-right { grid-row: 1; grid-column: 2; justify-self: end; }
  .topbar-inner > .navpill { grid-row: 2; }
}


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 ---------------- */
/* Altbilgiden önceki nefes payı. 72 → 200 px (9 Eyl 2026, kullanıcı:
   "3D binder ile footer arasına biraz daha mesafe koy"). Bu boşluk aynı
   zamanda erimeye yer açıyor: altbilgi metni artık zemin tamamen
   siyahlaştıktan sonra başlıyor. Dar ekranda 120 px (aşağıda). */
main { padding-bottom: 200px; }

.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); }
/* Arama sonucu başlığında setin İngilizce karşılığı (8 Eyl 2026 QA):
   Japonca/Çince katalogda "ニンジャスピナー · 4 kart" tek başına bir şey
   söylemiyordu. Kenar çubuğundaki .ym-en ile aynı ton. */
.rsec-en { font-weight: 500; font-size: .86em; 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 videonun KENDİ siyahına eşit olmalı, yoksa sahnenin kenarında
     ton farkı çizgi gibi görünür. 9 Eyl 2026'da sahne değişti (mor/pembe
     alevli yeni video); üst şeridin 5 kareden ortalaması #020811 ölçüldü. */
  --foot-bg: #020811; --foot-tx: #EDE9E3; --foot-mt: #9A948C;
  --foot-bg-rgb: 2 8 17;          /* --foot-bg'nin bileşenleri (erime için) */
  /* Erime mesafesi ÜSTTEKİ ZEMİNE göre değişir (aşağıda body.shader-acik):
     ana sayfada arkada WebGL kırmızısı var ve uzun eğri gerekiyor; katalog
     gibi sayfalarda shader kapalı ve açık temada üst taraf BEYAZ, orada uzun
     eğri yazıyı okunmaz yapar. Ölçüldü 9 Eyl 2026: /katalog açık temada
     altbilginin 120. pikselinde zemin #B0B2B4. */
  --erime: 130px;         /* erimenin altbilgi İÇİNDE kalan kısmı */
  --erime-ust: 90px;      /* altbilginin ÜSTÜNDE, sayfanın boşluğunda kalan */
  --foot-hair: rgba(255, 255, 255, .10);
  /* overflow ARTIK GİZLİ DEĞİL: erimenin ilk yarısı ::before ile altbilginin
     DIŞINA, sayfanın alt boşluğuna taşıyor (aşağıdaki açıklama). Videoyu
     kırpma işi .foot-sahne'ye taşındı, orası zaten videonun kabı. */
  position: relative; margin-top: 0;
  /* TAM BİR EKRAN (9 Eyl 2026, kullanıcı isteği). Altbilgi bir ekrandan kısa
     olmaz; içerik sabit yüksekliğini korur, ARTAN boşluğu sahne yutar. Bu
     yüzden `height` değil `min-height`: içerik uzarsa (dar ekranda sütunlar
     alt alta düşünce) altbilgi büyür, kırpılmaz.
     svh: mobil tarayıcıda adres çubuğu açıkken de sığsın diye küçük görünen
     alan ölçüsü; desteklemeyen tarayıcı üstteki vh satırında kalır. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  /* Ü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.
     ⚠ ERİME YAZIDAN ÖNCE BİTMELİ. 8 Eyl 2026'da erime 220 pikselde bitiyor
     ama içerik 88. pikselde başlıyordu; açık temada 16 metnin 9'u 4,5:1
     eşiğinin altındaydı, en kötüsü 1,58:1 (pratikte görünmez). Bugün erime
     iki parça (bkz. .foot::before) ve yazı zemin tam siyahlaştıktan sonra
     başlıyor. */
  /* ERİME EĞRİSİ — neden S biçiminde (9 Eyl 2026, kullanıcı: "hâlâ smooth
     bir renk geçişi yok").
     ÖLÇÜLEN ASIL SEBEP: göze çizgi gibi gelen şey renk SIÇRAMASI değil,
     EĞİM TERSİNMESİ. Ana sayfanın WebGL zemini aşağı indikçe kırmızıyı
     ARTIRIYOR (y=120'de #4E0C18 → y=330'da #7C1224, yani +0,22 değer/piksel)
     ve tam altbilginin başladığı yerde erime onu düşürmeye başlıyor. Artan
     bir eğri bir anda azalmaya dönünce tepe noktası oluşuyor; insan gözü
     tepe noktasını kenar olarak okuyor. Piksel düzeyinde basamak YOK
     (280 pikselde yalnız 7 tane 4+ piksellik düz basamak sayıldı), yani
     8-bit bantlama değil.
     ÇÖZÜM: eğri iki ucundan da düzleştirildi (smoothstep). Başlangıçta
     neredeyse yatay olduğu için zeminin kendi yükselişi kesilmeden yumuşakça
     devrilir; sonda da yataylaştığı için bitiş kenarı oluşmaz.
     Aşağıdaki durak listesi eğrinin İKİNCİ yarısıdır (%62'den %100'e);
     ilk yarısı .foot::before içinde, altbilginin dışında. */
  background: linear-gradient(to bottom,
    rgb(var(--foot-bg-rgb) / .62)   0,
    rgb(var(--foot-bg-rgb) / .78)   calc(var(--erime) * .20),
    rgb(var(--foot-bg-rgb) / .90)   calc(var(--erime) * .40),
    rgb(var(--foot-bg-rgb) / .965)  calc(var(--erime) * .60),
    rgb(var(--foot-bg-rgb) / .993)  calc(var(--erime) * .80),
    rgb(var(--foot-bg-rgb) / 1)     var(--erime));
  color: var(--foot-mt); font-size: 13px; line-height: 1.5;
}

/* ERİMENİN İLK YARISI ALTBİLGİNİN DIŞINDA (9 Eyl 2026, kullanıcı: "3D binder
   ile footer arasına biraz daha mesafe koy, yazılar tam siyah olunca
   başlasın").
   Neden dışarıda: yazı zemin tam siyahlaşınca başlasın istiyorsak erime
   TAMAMEN yazının üstünde bitmeli. Erimenin tamamı altbilginin içinde olsaydı
   üst boşluk 390 px'e çıkıyor ve alev sahnesi 256 px'e düşüp yazının arkasına
   giriyordu (ölçüldü). Erimenin ilk parçası `main`in alt boşluğuna taşınınca
   altbilgi içindeki pay 130 px'e iniyor ve sahne boyunu koruyor.
   ⚠ Bu katman sayfanın SON `--erime-ust` pikselini karartıyor. Orası
   `main { padding-bottom }` ile açılmış BOŞ alan; içerik oraya girmiyor.
   Boşluğu küçültürsen bu katmanı da küçült. */
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--erime-ust); pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--foot-bg-rgb) / 0)    0,
    rgb(var(--foot-bg-rgb) / .03)  20%,
    rgb(var(--foot-bg-rgb) / .13)  40%,
    rgb(var(--foot-bg-rgb) / .31)  60%,
    rgb(var(--foot-bg-rgb) / .48)  80%,
    rgb(var(--foot-bg-rgb) / .62)  100%);
}
/* Üst boşluk `--erime`nin ~%92'si: yazı, zemin PRATİKTE TAM SİYAH olduktan
   sonra başlıyor (kullanıcı: "yazılar tam siyah olunca başlasın").
   Ölçülen zemin #020710; saf zeminden (#020811) ayırt edilemiyor. */
.foot-ust { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 0;
  flex: 0 0 auto; }

/* WebGL zemini açıkken (ana sayfa) kırmızının inişi daha uzun sürüyor:
   erime toplam 440 px (240 dışarıda + 200 içeride). Shader kapalıyken üstteki
   zemin zaten sakin, 220 px yetiyor. */
body.shader-acik .foot { --erime: 200px; --erime-ust: 240px; }
body.shader-acik .foot-ust { padding-top: 190px; }
.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. */
/* Sahne ARTAN yüksekliği alır (bkz. .foot min-height açıklaması): altbilgi
   tam bir ekran, üst blok kendi boyunda, kalanı sahne. Alt sınır dar ve kısa
   ekranlarda sahnenin şeride inmesini engelliyor. */
.foot-sahne {
  position: relative; margin-top: -28px; overflow: hidden;
  flex: 1 1 auto; min-height: clamp(200px, 26vh, 420px);
}
.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) {
  /* Telefonda altbilgi TAM BİR EKRANA sığsın diye ölçülerek kısıldı
     (9 Eyl 2026). 375x812'de önce 938 px'di, yani 1,16 ekran. Nereden
     kısıldığı: üst boşluk 56→36, sütun aralığı 22→16, yasal blok öncesi
     40→26, ve gezinme bağlantıları TEK sütun yerine İKİ sütun (5 bağlantı
     5 satır yerine 3 satır). Yazı boyutlarına dokunulmadı. */
  /* Dar ekranda içerik zaten tam ekranı dolduruyor, üst boşluk uzatılamaz.
     Bu yüzden erime de kısalıyor ki yazı yine eğrinin %50'sine denk gelsin
     (56 px / 112 px) ve açık temada örtme %78'de kalsın. */
  main { padding-bottom: 120px; }
  .foot { --erime: 80px; --erime-ust: 60px; }
  .foot-ust { padding-top: 74px; }
  /* Telefonda da shader açıkken daha uzun erime; boşluk sahnenin alt
     sınırından alınıyor, toplam yükseklik bir ekranda kalıyor. */
  body.shader-acik .foot { --erime: 110px; --erime-ust: 110px; }
  body.shader-acik .foot-ust { padding-top: 102px; }
  .foot-govde { grid-template-columns: 1fr; gap: 16px; }
  .foot-alt { padding-top: 26px; }
  nav.foot-sutun { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  nav.foot-sutun h3 { grid-column: 1 / -1; }
  .foot-sahne { min-height: clamp(160px, 46vw, 320px); 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; }

/* Atak/yetenek adının ve metninin İngilizcesi, yerelin yanında.
   Kullanıcı isteği (7 Eyl 2026): "japoncasını çıkart ama ing de kalsın".
   Rozet DEĞİL — bu bir düşüş uyarısı değil, ikinci dil. */
.mv-en { font-style: normal; font-size: .84em; color: var(--mt); font-weight: 500; }
.mv-eff-en { color: var(--mt); opacity: .78; font-size: .92em; margin-top: 2px; }

/* 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); }

/* ---------- ÖN KAYIT KAPISI (5 Eyl 2026) ----------
   Sunucu kapıyı kapattığında <html data-onkayit="1"> geliyor. Gizleme
   İLK ÇİZİMDE olsun diye CSS ile yapılıyor: JavaScript beklenseydi gezinme
   hapı ve eylem düğmeleri bir kare görünüp kaybolurdu.
   Kapı asıl SUNUCUDA — buradaki gizleme yalnızca görünüş. */
.as-onkayit { display: none; pointer-events: auto; max-width: 480px; }
html[data-onkayit] .as-onkayit { display: block; }
html[data-onkayit] .as-eylem { display: none; }
/* Üst çubuk KALIR (kullanıcı kararı, 5 Eyl): ziyaretçi katalog ve bindera
   girip içeriği bulanık görebiliyor. Giriş düğmesi kendiliğinden çizilmiyor,
   çünkü /api/kimlik kapalı. */

.ok-satir { display: flex; flex-wrap: wrap; gap: 10px; }
.as-onkayit .ok-alan {
  flex: 1 1 240px; min-width: 0;
  font: inherit; font-size: clamp(13px, 1.05vw, 15px);
  padding: 11px 20px; border-radius: 999px;
  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;
}
.as-onkayit .ok-alan::placeholder { color: color-mix(in srgb, #fff 62%, transparent); }
.as-onkayit .ok-alan:hover { border-color: color-mix(in srgb, #fff 45%, transparent); }
.as-onkayit .ok-alan:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.as-onkayit .ok-not {
  margin: 12px 0 0; max-width: 46ch;
  font-size: clamp(12px, .9vw, 13px); line-height: 1.5;
  color: color-mix(in srgb, #fff 76%, transparent);
}
/* Gönderim başarılı: alan satırı kalkar, yerinde yalnız teşekkür kalır. */
.ok-form.tamam .ok-satir { display: none; }
.as-onkayit.tamam .ok-not { color: #fff; font-weight: 600; }
.as-onkayit.hata .ok-not { color: #FFD3D3; }

/* ---------- ÖN KAYIT PERDESİ (5 Eyl 2026) ----------
   Karar: katalog, binder ve hesap sayfaları GERÇEK içerikle çizilsin, üstüne
   bulanık perde ve ön kayıt kutusu insin. Boş kabuk göstermek yerine sitenin
   dolu olduğu görünüyor.
   z-index 9: üst çubuk (10) perdenin ÜSTÜNDE kalır, gezinme çalışmaya devam
   eder. backdrop-filter arkadaki gerçek içeriği bulandırır.
   Görünürlük iki işarete bağlı: data-onkayit sunucudan (kapı kapalı),
   data-kapi app.js applyMode'dan (ana sayfada değiliz). */
.kapi-perde { display: none; }
html[data-onkayit][data-kapi] .kapi-perde {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9;
  padding: 96px 20px 40px;
  background: color-mix(in srgb, var(--pg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(.85);
  backdrop-filter: blur(14px) saturate(.85);
  animation: kapiGir .32s ease both;
}
@keyframes kapiGir { from { opacity: 0 } to { opacity: 1 } }
.kapi-kutu {
  width: min(520px, 100%); text-align: center;
  background: var(--sf); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 20px;
  padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}
.kapi-etiket {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mt);
}
.kapi-baslik {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15;
}
.kapi-metin {
  margin: 0 auto 22px; max-width: 40ch;
  color: var(--mt); font-size: 14px; line-height: 1.55;
}
.kapi-kutu .ok-satir { justify-content: center; }
.kapi-kutu .ok-alan {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 14px;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--bd); background: var(--pg); color: var(--tx);
}
.kapi-kutu .ok-alan:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kapi-kutu .ok-gonder {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid var(--btn); background: var(--btn); color: var(--btn-tx);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kapi-kutu .ok-gonder:hover { transform: translateY(-1.5px); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.kapi-kutu .ok-gonder:disabled { opacity: .55; cursor: default; transform: none; }
.kapi-kutu .ok-not { margin: 14px 0 0; font-size: 12.5px; color: var(--mt); }
.kapi-kutu .ok-form.hata .ok-not { color: #C8102E; }
.kapi-kutu .ok-form.tamam .ok-not { color: var(--tx); font-weight: 600; }
.kapi-geri {
  display: inline-block; margin-top: 18px; font-size: 13px;
  color: var(--mt); text-decoration: none; border-bottom: 1px solid var(--bd);
}
.kapi-geri:hover { color: var(--tx); }
/* Perde açıkken arkadaki metin seçilmesin. */
html[data-onkayit][data-kapi] main { user-select: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-onkayit][data-kapi] .kapi-perde { animation: none; }
}

/* 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 {
  /* KAYBOLMA KALDIRILDI (5 Eyl 2026, kullanıcı: "ilkte çıkan yazı kalmaya
     devam etsin"). Eskiden %46'da silinip sahneyi kartlara bırakıyordu;
     artık bir kez beliriyor ve bölüm boyunca duruyor. */
  0%          { opacity: 0; transform: translateY(16px); }
  16%, 100%   { opacity: 1; transform: none; }
}

/* ── 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 KART BAŞINA (5 Eyl 2026). Deste modelinde her kart aynı anda
     (--gec) kaymaya başlar ama farklı durakta iner: kart i, i durak sonra.
     --carp = 1 / (i * durak) kartın zaman çizgisini kendi iniş anına yayar.
     Sabit çarpan (eski -6s) burada yanlış olurdu: hepsi aynı sürede
     duracağı için lokstep bozulur, kartlar farklı hızlarda uçardı. */
  animation-delay: calc((var(--dwp) - var(--gec, 0)) * var(--carp, 6) * -1s);
}
/* 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 YOK (5 Eyl 2026, kullanıcı): kartlar önce büyük çıkıp sonra
   küçülüyordu. "Normal boyutu nasılsa öyle sıralansın" — tek boyut, yalnız
   yatay kayma var.

   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); }
  100% { transform: translate3d(0, 0, 0); }
}
/* 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.
       (her zaman)  z 20+i — sağdaki önde
       :hover       üstüne gelinen  z 60

   DESTE MODELİNDE (5 Eyl 2026) z kademesine gerek kalmadı: kartlar üst üste
   dururken de sağdaki önde olduğu için deste tek kart gibi okunuyor ve her
   durakta geride kalan kart doğal biçimde arkada kalıyor. Eski üç kademeli
   kurgu (bekle 10 / hareket 40) kaldırıldı. */
.dw-kart { z-index: calc(20 + var(--i, 0)); }


/* 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 YERİNE OTURUNCA görünür (5 Eyl 2026).
   Deste modelinde hepsi aynı anda (--gec) kaymaya başlıyor; etiket sabit
   çarpanla sürülürse yedisi birden beliriyor ve hareket eden destenin
   üstünde üst üste biniyorlar ("Mega-Da…Mega-Darkrai-ex"). Kartla AYNI
   çarpanı (--carp) kullanınca her etiket kendi kartının inişinde çıkıyor.
   Not: opacity'yi düz bildirimle kapatmak İŞE YARAMAZ — animasyon normal
   bildirimi ezer; bu yüzden zamanlama keyframe'in içinde. */
.dw-kart figcaption {
  margin: 12px 0 0; text-align: center;
  animation: dwAd 1s linear paused both;
  animation-delay: calc((var(--dwp) - var(--gec, 0)) * var(--carp, 6) * -1s);
}
@keyframes dwAd {
  /* %85'e kadar gizli: kart yoldayken etiketi görünmesin.
     İKİNCİ DURAK 100 OLMALI: eskiden 60%'tı ve %85 durağıyla çelişiyordu
     (opaklık önce 1'e çıkıp sonra 0'a dönüyor, sonra tekrar 1 oluyordu). */
  0%, 85%   { opacity: 0; transform: translateY(6px); }
  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. */

/* Kenar çubuğu: Japonca/Çince setin altında İngilizce karşılığı (7 Eyl 2026).
   İngilizce ad varken düğme iki satırlı esnek düzene geçer:
     1. satır: yerel ad (tek satır, taşarsa …) + sağda kart sayısı
     2. satır: İngilizce ad, tam genişlik, kırpılmaz.
   Kullanıcı: "İngilizceleri burada tam gözükmüyor" — sağa sıkışıp kesiliyordu. */
/* 7 Eyl 2026 QA (B4): esnek düzen ARTIK HER set düğmesinde — İngilizce
   karşılığı olmayan Japonca/Çince setlerde ad üç noktasız kesiliyor, kart
   sayısı düğmenin dışına taşıyordu. */
.ym-set { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; white-space: normal; }
/* Ad TEK SATIR yerine EN ÇOK İKİ SATIR (8 Eyl 2026 QA): uzun Çince adlarda
   ayırt edici son ek üç noktanın arkasında kalıyordu — "擴充包「眾星雲集組合篇」SET A"
   ile "…SET B" kenar çubuğunda birbirinin aynısı görünüyordu. */
.ym-set .ym-ad {
  flex: 1 1 0; min-width: 0; order: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
.ym-set .ym-adet { float: none; margin-left: 0; order: 2; flex: 0 0 auto; }
.ym-set .ym-en {
  order: 3; flex: 0 0 100%; display: block; white-space: normal; overflow-wrap: anywhere;
  font-size: 10px; line-height: 1.25; opacity: .62; margin-top: 1px; letter-spacing: .01em;
}
.ym-set.on .ym-en { opacity: .8; }

/* Kart karosu: Japonca/Çince kartın altında İngilizce adı (7 Eyl 2026) */
.tile .ten { font-size: .8em; opacity: .62; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Binder duvarı: WebGL yoksa düz liste + her zaman görünen "Yeni binder"
   düğmesi (7 Eyl 2026 QA — sahne çizilmeyince sayfa çıkmaz sokaktı). */
.bw-hero .bw-yeni { margin-right: 8px; }
.bw-duz { padding: 32px 24px; }
.bw-duz-liste { display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bw-duz-b { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bd);
  background: var(--sf); color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.bw-duz-b:hover { background: var(--sf2); }
.bw-duz-ad { font-weight: 600; }
.bw-duz-alt { font-size: 11px; opacity: .6; }

/* Kenar çubuğu: yalnız aynı adı paylaşan setlerde kod rozeti (7 Eyl 2026 QA) */
.ym-set .ym-kod { opacity: .55; font-size: 10px; margin-left: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   DOKUNMA HEDEFLERİ — mobil (7 Eyl 2026 QA, B11)
   390 px'te katalogda 145 tıklanabilir öğenin 135'i 32 px'in altındaydı
   ("+ Ekle" 48×21, arama kutusu 84×20, görev kutuları 16×16). Parmak için
   alt sınır 36 px; ızgara sıkışmasın diye YALNIZ dokunmatik/dar ekranda
   uygulanır.
   8 Eyl 2026: koşula `pointer: coarse` eklendi. Ölçüt yalnız GENİŞLİK'ti ve
   tablet (768-1024) dışarıda kalıyordu: iPad'de karo başına iki düğme
   ("+ Ekle", "İzle") ve 306 tıklanabilirden 283'ü hâlâ 32 px'in altındaydı.
   Fare kullanan masaüstünde ızgara olduğu gibi kalır.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px), (pointer: coarse) {
  .tile .corner, .tile .watch { min-height: 36px; padding-inline: 12px; }
  .searchpill input[type="search"], input[type="search"] { min-height: 36px; }
  .chip, .mtab, .ghost, .bw-btn { min-height: 36px; }
  .gv-madde { padding-block: 10px; }
  .gv-madde input { width: 22px; height: 22px; margin-top: 2px; }
  /* Varyant satırındaki +/− ve göz düğmeleri */
  .vrow button, .vqty, .cd-sec button { min-height: 34px; min-width: 34px; }
  /* Kare ikon düğmeleri (görevler kısayolu, görünüm anahtarı) */
  .gorev-link, #sheetClose { min-width: 36px; min-height: 36px; }
  .vsw, .vsw button { min-height: 36px; }
  /* Geniş satırlar zaten kolay hedef (263 px), yalnız biraz nefes */
  .ym-seribas, .ym-set { min-height: 34px; }
  /* Altbilgi bağlantıları 26 px yüksekliğindeydi (8 Eyl 2026 QA).
     ⚠ `inline-flex` KULLANILMAZ: .foot-sutun a normalde `display: block` ve
     sütun alt alta diziliyor; inline yapınca bağlantılar tek satıra yan yana
     akıyordu (9 Eyl 2026, telefon ekran görüntüsünde görüldü). Blok seviyesi
     `flex` hem dizilimi korur hem yüksekliği verir. */
  .foot-sutun a { min-height: 34px; display: flex; align-items: center; }
  .foot-dil { min-height: 34px; display: inline-flex; align-items: center; }
  /* Tarama sayfasındaki set kilidi kutucuğu 13×13'tü */
  #ekle input[type="checkbox"] { width: 20px; height: 20px; }
  #ekle label { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; }
  /* Açılır başlıklar ("Kodu okutamıyorum") 19 px yüksekliğindeydi */
  #ekle summary, .foot summary { min-height: 34px; display: flex; align-items: center; }
}

/* Dokunmatikte "Kart ekle" tek yola iner (QR yolu çizilmiyor); kalan kart
   tüm genişliği alsın. */
.ek-yollar.ek-tek { grid-template-columns: 1fr; }

/* Dar ekranda hap TEK SATIRA insin (8 Eyl 2026 QA).
   375 px'te hap iki satıra sarıyordu (105 px) ve yapışkan üst çubuk ekranın
   %22'sini kalıcı olarak yiyordu. İki tasarruf, ikisi de bilgi kaybetmeden:
     · "Kart ekle" yalnız ikonla görünür (metin düğümü DURUYOR — ekran
       okuyucu ve dil sözlüğü onu görmeye devam ediyor, yalnız çizilmiyor)
     · arama kutusu kapalı başlar, dokununca açılır; ⌘K rozeti telefonda
       zaten anlamsız
   Böylece dört sekme + arama tek satıra sığıyor. */
@media (max-width: 560px) {
  .navpill .mtab-tara { font-size: 0; gap: 0; padding-inline: 12px; }
  .navpill .mtab-tara svg { width: 16px; height: 16px; }
  .navpill .searchpill { padding-inline: 11px; }
  .navpill .searchpill kbd { display: none; }
  .navpill .searchpill input[type="search"] { width: 0; padding: 0; }
  .navpill .searchpill:focus-within input[type="search"] { width: 132px; }
}