/* ReadHear — genel stil.
 *
 * Ölçüler tipografi raporundan geliyor; tahmin değil, ölçüm:
 *   · Literata'nın 11 dilde ortalama karakter genişliği 0,4833em.
 *     `ch` birimi KULLANILMIYOR — o "0" rakamının genişliğidir ve
 *     serif bir metinde gerçek ortalamayı yanıltır.
 *   · 33em ≈ 68 karakter. Mobilde 55 karakter hedefi kovalanmıyor:
 *     390px telefonda 19px Literata satır başına ~38 karakter verir,
 *     bu fiziksel bir sınır. Puntoyu küçültmek okunabilirliği bozar.
 *   · Türkçe metin İngilizce'den %16 uzun. Hiçbir kutuya sabit
 *     yükseklik verilmiyor.
 *
 * Vurgu K-024b: yüksek kroma, iki katman, tek ton. Kalınlık/alt çizgi/
 * punto DEĞİŞMİYOR — ölçüldü, wght 400→600 metni %3,9-4,6 genişletiyor.
 * Zaten ::highlight() yerleşimi etkileyen özellik kabul etmiyor.
 */

@font-face{
  font-family:'Literata';
  src:url(/assets/fonts/literata-body.woff2) format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url(/assets/fonts/literata-italic.woff2) format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap;
}
/* Yunanca · matematik · ok · IPA — korpusun %0,03'ü ama maddelerin %34'ü.
   Bir kelimenin ortasındaki tek bir π sistem fontuyla çizilirse o kelimenin
   genişliği bizim metriklerimizle uyuşmaz ve vurgu kutusu kayar. */
@font-face{
  font-family:'Literata';
  src:url(/assets/fonts/literata-extras.woff2) format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+0250-02AF,U+2070-209F,U+2100-214F,
                U+2190-21FF,U+2200-22FF,U+25A0-25FF;
}
/* Swap anında zıplama olmasın diye Georgia'ya metrik eşleme — hesaplandı. */
@font-face{
  font-family:'Literata Fallback';
  src:local('Georgia'),local('Times New Roman'),local('serif');
  size-adjust:108%; ascent-override:108.98%; descent-override:28.52%;
}

:root{
  --ground:#F7F5F2; --raised:#FFFFFF; --sunken:#EFEBE4;
  --ink:#16181A; --ink-soft:#55585C; --ink-faint:#8A8D91;
  --rule:#E0DCD5; --accent:#1A5FB4;
  --ok:#1F7A4D; --warn:#9A5B00;
  --shadow:0 1px 2px rgba(22,24,26,.06),0 8px 24px -12px rgba(22,24,26,.16);
  /* K-024b · yüksek kroma, tek ton, iki katman */
  --sent:hsl(212 90% 50% / .13);
  --word:hsl(212 92% 46% / .38);
  --mark:hsl(212 92% 46%);
  --measure:33em;
  --bar-h:60px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#16181A; --raised:#1E2124; --sunken:#101214;
    --ink:#E8E6E1; --ink-soft:#A8ABAF; --ink-faint:#71757A;
    --rule:#2E3236; --accent:#7EB3F5; --ok:#5FC98D; --warn:#E0A34A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --sent:hsl(212 85% 60% / .18);
    --word:hsl(212 92% 66% / .36);
    --mark:hsl(212 92% 66%);
  }
}
:root[data-theme="light"]{
  --ground:#F7F5F2; --raised:#FFFFFF; --sunken:#EFEBE4;
  --ink:#16181A; --ink-soft:#55585C; --ink-faint:#8A8D91;
  --rule:#E0DCD5; --accent:#1A5FB4; --ok:#1F7A4D; --warn:#9A5B00;
  --shadow:0 1px 2px rgba(22,24,26,.06),0 8px 24px -12px rgba(22,24,26,.16);
  --sent:hsl(212 90% 50% / .13); --word:hsl(212 92% 46% / .38); --mark:hsl(212 92% 46%);
}
:root[data-theme="dark"]{
  --ground:#16181A; --raised:#1E2124; --sunken:#101214;
  --ink:#E8E6E1; --ink-soft:#A8ABAF; --ink-faint:#71757A;
  --rule:#2E3236; --accent:#7EB3F5; --ok:#5FC98D; --warn:#E0A34A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --sent:hsl(212 85% 60% / .18); --word:hsl(212 92% 66% / .36); --mark:hsl(212 92% 66%);
}
/* Sepya — okuma tercihi, tema değil; ikisi birlikte çalışır. */
:root[data-canvas="sepia"]{
  --ground:#F3EAD8; --raised:#FBF5E9; --sunken:#E8DCC4;
  --ink:#2B2318; --ink-soft:#5C5140; --ink-faint:#8B7F6B; --rule:#DDD0B6;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Literata','Literata Fallback',Georgia,serif;
  font-size:20px;line-height:1.60;
  font-variant-numeric:oldstyle-nums proportional-nums;
  overflow-wrap:break-word;
}
@media(max-width:700px){body{font-size:18px;line-height:1.65}}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.15rem}
.wide{max-width:56rem;margin:0 auto;padding:0 1.15rem}
a{color:var(--accent);text-underline-offset:.16em}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── üst şerit ── */
.top{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--rule);background:var(--ground);
  position:sticky;top:0;z-index:20
}
.top .brand{
  font-weight:700;font-size:1.02rem;text-decoration:none;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap
}
.top .sp{flex:1}
.top nav{display:flex;gap:.85rem;font-size:.84rem;font-family:system-ui,sans-serif}
.top nav a{color:var(--ink-soft);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* ── genel tipografi ── */
h1{font-size:clamp(1.85rem,4.6vw,2.5rem);line-height:1.16;font-weight:700;
   margin:0 0 .55rem;text-wrap:balance;letter-spacing:-.014em}
h2{font-size:1.4rem;line-height:1.28;font-weight:700;margin:2.2rem 0 .6rem;text-wrap:balance}
h3{font-size:1.06rem;font-weight:700;margin:1.6rem 0 .4rem}
p{margin:0 0 .9em}
small{font-size:.8rem;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.sans{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

.pill{
  display:inline-block;font-family:system-ui,sans-serif;font-size:.7rem;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  padding:.15rem .45rem;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft)
}
.pill.audio{background:color-mix(in srgb,var(--mark) 16%,transparent);color:var(--accent)}

button,select,input{font:inherit;font-family:system-ui,-apple-system,sans-serif}
button{
  font-size:.85rem;background:var(--raised);color:var(--ink);
  border:1px solid var(--rule);border-radius:7px;padding:.4rem .75rem;
  cursor:pointer;line-height:1.3
}
button:hover{border-color:var(--ink-faint)}
button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
button.primary{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:600}
button:disabled{opacity:.45;cursor:default}
select,input[type="search"]{
  font-size:.85rem;background:var(--raised);color:var(--ink);
  border:1px solid var(--rule);border-radius:7px;padding:.38rem .55rem
}

/* ── katalog ── */
.hero{padding:2.6rem 0 1.4rem}
.hero p.lede{font-size:1.1em;color:var(--ink-soft);margin:0;text-wrap:pretty}
.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--rule);margin-bottom:.4rem
}
.filters input[type="search"]{flex:1;min-width:11rem}
.count{font-family:system-ui,sans-serif;font-size:.78rem;color:var(--ink-faint);
  padding:.7rem 0;font-variant-numeric:tabular-nums}

/* (eski düz kart kuralları kaldırıldı — vitrin bölümündeki
   .card tanımı geçerli; ikisi aynı anda durunca çakışıyorlardı) */
.empty{padding:3rem 0;color:var(--ink-faint);text-align:center}

/* ── makale ── */
article{padding:2.2rem 0 0}
.byline{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  font-family:system-ui,sans-serif;font-size:.8rem;color:var(--ink-faint);
  margin:0 0 1.6rem;font-variant-numeric:tabular-nums
}
.blurb{font-size:1.05em;color:var(--ink-soft);margin:0 0 1.8rem;text-wrap:pretty}

#text{position:relative}
#text p{margin:0 0 .9em;text-wrap:pretty}
/* Odak modu — Apple "Line Guide" karşılığı. Bant dışı metin kararır. */
#text.focus p{color:var(--ink-faint);transition:color .28s}
#text.focus p.near{color:var(--ink)}
@media(prefers-reduced-motion:reduce){#text.focus p{transition:none}}

/* İki katman. Kelime, cümlenin İÇİNDE gezindiği için algısal olarak
   "yanıp sönme" değil "kayan işaretçi" okunuyor — WCAG 2.3.1 riski düşer.
   ::highlight() yalnız boyama özellikleri kabul eder; bu bir kısıt değil,
   yerleşim kaymasını imkânsız kılan bir güvence. */
::highlight(rh-sent){background-color:var(--sent)}
::highlight(rh-word){background-color:var(--word)}

/* Yedek: Custom Highlight API yoksa (Safari<17.2, Firefox<149) yalnız
   görünür paragraf kelimelere bölünür. Ölçüldü: 4,4 ms/paragraf, 0 px kayma. */
#text w.on{background-color:var(--word)}
#text s.on{background-color:var(--sent);text-decoration:none}

/* ── lisans / atıf — CC BY-SA hukuki yükümlülük, gizlenemez ── */
.attrib{
  margin:2.6rem 0 0;padding:1.1rem 1.1rem;border:1px solid var(--rule);
  border-radius:9px;background:var(--raised);
  font-family:system-ui,sans-serif;font-size:.82rem;line-height:1.6;
  color:var(--ink-soft)
}
.attrib h2{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 .55rem;color:var(--ink-faint);font-family:system-ui,sans-serif}
.attrib p{margin:0 0 .45rem}
.attrib p:last-child{margin:0}
.attrib a{color:var(--accent)}

/* ── oynatıcı ── */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:color-mix(in srgb,var(--raised) 94%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--rule);box-shadow:var(--shadow);
  transform:translateY(0);transition:transform .22s ease
}
.player[hidden]{display:none}
.player.tucked{transform:translateY(calc(100% - 3px))}
@media(prefers-reduced-motion:reduce){.player{transition:none}}
.player .mini{
  display:flex;align-items:center;gap:.6rem;height:var(--bar-h);
  padding:0 .8rem;max-width:56rem;margin:0 auto
}
.player .title{
  flex:1;min-width:0;font-family:system-ui,sans-serif;font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)
}
.player .time{
  font-family:system-ui,sans-serif;font-size:.74rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.icon{
  width:2.35rem;height:2.35rem;border-radius:50%;display:grid;place-items:center;
  padding:0;flex:0 0 auto;font-size:.95rem
}
.icon.big{width:2.8rem;height:2.8rem;font-size:1.1rem}
.panel{
  display:none;border-top:1px solid var(--rule);padding:.9rem .8rem 1.1rem;
  max-width:56rem;margin:0 auto
}
.player.open .panel{display:block}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.row:last-child{margin-bottom:0}
.row label{font-family:system-ui,sans-serif;font-size:.76rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:.35rem}
input[type="range"]{accent-color:var(--mark)}
.seek{width:100%;margin:0}
.parts{display:flex;flex-wrap:wrap;gap:.35rem}
.parts button[aria-current="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.backchip{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--bar-h) + 1rem);z-index:29;
  background:var(--ink);color:var(--ground);border:none;border-radius:999px;
  padding:.5rem 1rem;font-size:.82rem;box-shadow:var(--shadow);display:none
}
.backchip.on{display:block}

/* Oynatıcı açıkken metnin altı kapanmasın */
body.has-player{padding-bottom:calc(var(--bar-h) + 1.5rem)}

/* ── ayak ── */
footer{
  margin-top:3.5rem;padding:2rem 0 3rem;border-top:1px solid var(--rule);
  font-family:system-ui,sans-serif;font-size:.8rem;color:var(--ink-faint)
}
footer a{color:var(--ink-soft)}
footer .fl{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:.7rem}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip{position:absolute;left:-999px}
.skip:focus{left:.5rem;top:.5rem;z-index:99;background:var(--raised);
  padding:.5rem .8rem;border-radius:6px;border:1px solid var(--rule)}

/* ═══════════════════════════════════════════════════════════
   VİTRİN — kapaklar, raflar, kartlar
   Kapak yer tutucusu satır içi SVG: tema rengini miras alıyor,
   açık/koyu için ayrı dosya gerekmiyor. `coverUrl` gelince
   aynı kutu gerçek görseli gösterecek.
   ═══════════════════════════════════════════════════════════ */

.cover{
  position:relative;aspect-ratio:2/3;border-radius:7px;overflow:hidden;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--mark) 9%,var(--sunken)),
    var(--sunken));
  border:1px solid var(--rule);color:var(--ink-faint);
  display:grid;place-items:center;flex:0 0 auto
}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover svg{width:58%;height:58%;fill:currentColor}
.cover.lg{width:150px}
@media(max-width:600px){.cover.lg{width:104px}}

/* ── kart ── */
.card{
  display:grid;grid-template-columns:74px 1fr;gap:.85rem;
  text-decoration:none;color:inherit;padding:.7rem;
  border-radius:10px;border:1px solid transparent;align-items:start
}
.card:hover{background:var(--raised);border-color:var(--rule)}
.card .cbody{min-width:0}
.card h3{margin:0 0 .25rem;font-size:1rem;line-height:1.32;text-wrap:pretty}
.card p{
  margin:0 0 .4rem;font-size:.86rem;color:var(--ink-soft);line-height:1.48;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card .meta{
  display:flex;flex-wrap:wrap;gap:.15rem .55rem;
  font-family:system-ui,sans-serif;font-size:.72rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums
}
.badges{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap}
.badge{
  font-family:system-ui,sans-serif;font-size:.64rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.14rem .38rem;
  border-radius:4px;font-variant-numeric:tabular-nums
}
.badge.new{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.badge.audio{background:color-mix(in srgb,var(--mark) 18%,transparent);color:var(--accent)}

/* Raf içindeki dar kart: kapak üstte, yazı altta */
.card.compact{
  grid-template-columns:1fr;width:132px;gap:.5rem;padding:.45rem;scroll-snap-align:start
}
.card.compact h3{font-size:.88rem;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.compact .meta{font-size:.68rem}
@media(max-width:600px){.card.compact{width:118px}}

/* ── raf ── */
.shelf{margin:2.4rem 0}
.shelf-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.6rem}
.shelf-head h2{margin:0;font-size:1.12rem;letter-spacing:-.008em}
.shelf-head .more{
  font-family:system-ui,sans-serif;font-size:.78rem;text-decoration:none;
  color:var(--ink-faint);white-space:nowrap;margin-left:auto
}
.shelf-head .more:hover{color:var(--accent)}
.rail{
  display:flex;gap:.35rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 .45rem .4rem;margin:0 -.45rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch
}

/* ── ızgaralar ── */
.grid{
  display:grid;gap:.2rem;padding-bottom:2rem;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))
}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.tiles{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.tile{
  display:flex;align-items:baseline;gap:.4rem;text-decoration:none;color:inherit;
  padding:.6rem .75rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--raised);font-family:system-ui,sans-serif;font-size:.84rem
}
.tile:hover{border-color:var(--accent)}
.tile .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .tnum{color:var(--ink-faint);font-size:.74rem;font-variant-numeric:tabular-nums}

/* ── detay başlığı ── */
.detail{display:flex;gap:1.4rem;align-items:flex-start;padding:2.2rem 0 1.2rem}
@media(max-width:600px){.detail{gap:1rem;padding-top:1.5rem}}
.detail .dinfo{flex:1;min-width:0}
.detail h1{margin-bottom:.5rem}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center}
.btn{
  display:inline-block;font-family:system-ui,sans-serif;font-size:.85rem;
  padding:.45rem .8rem;border:1px solid var(--rule);border-radius:7px;
  background:var(--raised);color:var(--ink);text-decoration:none;cursor:pointer
}
.btn:hover{border-color:var(--ink-faint)}
button.primary.big{font-size:.95rem;padding:.55rem 1.1rem;border-radius:8px}
.noaudio{font-family:system-ui,sans-serif;font-size:.82rem;color:var(--ink-faint)}
.resume-note{
  font-family:system-ui,sans-serif;font-size:.8rem;color:var(--accent);margin:.7rem 0 0
}
.resume-note button{margin-left:.4rem;font-size:.78rem;padding:.2rem .5rem}

/* ── çipler ── */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0}
a.chip,.chip{
  display:inline-block;font-family:system-ui,sans-serif;font-size:.76rem;
  padding:.24rem .55rem;border-radius:999px;text-decoration:none;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-soft);
  border:1px solid transparent
}
a.chip:hover{border-color:var(--rule);color:var(--ink)}
.chip.clear{background:transparent;border-color:var(--rule)}

/* ── filtreler / sayfalama ── */
.hero.tight{padding:2rem 0 .8rem}
.cta{
  display:inline-block;font-family:system-ui,sans-serif;font-weight:600;
  font-size:.9rem;text-decoration:none;margin-top:.3rem
}
.chk{
  display:flex;align-items:center;gap:.35rem;
  font-family:system-ui,sans-serif;font-size:.82rem;color:var(--ink-soft);white-space:nowrap
}
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem 0 3rem;font-family:system-ui,sans-serif;font-size:.85rem
}
.pager .pnum{color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* ── kitaplığım ── */
.libnote{
  border:1px solid var(--rule);border-radius:9px;background:var(--raised);
  padding:1rem 1.1rem;margin:1.2rem 0;font-family:system-ui,sans-serif;
  font-size:.85rem;color:var(--ink-soft);line-height:1.6
}
.progress{
  height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  margin-top:.45rem;overflow:hidden
}
.progress i{display:block;height:100%;background:var(--mark)}

/* ── giriş ── */
.btn.signin{
  padding:.65rem 1rem;font-size:.92rem;text-align:center;margin-bottom:.5rem;
  font-weight:600
}
.btn.signin:hover{border-color:var(--accent)}
.top nav .who{
  font-family:system-ui,sans-serif;font-size:.8rem;color:var(--ink-faint);
  max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* ═══════════════════════════════════════════════════════════
   OKUMA TERCİHLERİ
   Tipografi raporu punto ve satır aralığını kullanıcıya bırakmayı
   şart koşuyordu: WCAG 1.4.12 (metin aralığı) ve British Dyslexia
   Association 2023 rehberi. Tek hamlede ikisi de karşılanıyor.
   Zemin ayrı bir eksen: tema (açık/koyu) sistemden gelir, sepya
   bir OKUMA tercihidir; ikisi birbirine karışmadan çalışır.
   ═══════════════════════════════════════════════════════════ */

#text{font-size:var(--rsize,1em);line-height:var(--rlh,1.62)}

.readbar{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.6rem 0;border-bottom:1px solid var(--rule);margin-bottom:1.4rem
}
.readbar .grp{
  display:flex;align-items:center;gap:.3rem;
  font-family:system-ui,sans-serif;font-size:.76rem;color:var(--ink-faint)
}
.readbar button{padding:.3rem .55rem;font-size:.82rem;min-width:2rem}
.readbar .sp{flex:1}
.swatch{
  width:1.6rem;height:1.6rem;border-radius:50%;padding:0;border:1px solid var(--rule)
}
.swatch.light{background:#F7F5F2}
.swatch.sepia{background:#F3EAD8}
.swatch.dark{background:#16181A}
.swatch[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}

/* üst şeritteki arama */
.top form.q{display:flex;gap:.3rem;align-items:center;margin-left:auto}
.top form.q input{
  width:9.5rem;font-size:.8rem;padding:.3rem .5rem;
  background:var(--raised);border:1px solid var(--rule);border-radius:7px;color:var(--ink)
}
.top form.q input:focus{width:13rem}
@media(max-width:760px){
  .top form.q{display:none}
  .top nav{gap:.6rem;font-size:.8rem}
}

/* ═══════════════════════════════════════════════════════════
   VİTRİN KARUSELİ
   Temeli CSS scroll-snap: JavaScript kapalıyken de yana kaydırılabilen
   bir şerit olarak çalışıyor, bütün slaytlar DOM'da ve indekslenebilir.
   JavaScript yalnız nokta göstergesi, oklar ve otomatik geçiş ekliyor.
   Otomatik geçiş WCAG 2.2.2 gereği durdurulabilir; prefers-reduced-motion
   altında ve kullanıcı dokunduğunda kendiliğinden duruyor.
   ═══════════════════════════════════════════════════════════ */

.hero-c{position:relative;margin:1.4rem 0 2.4rem}
.htrack{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;gap:0
}
.htrack::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.htrack{scroll-behavior:auto}}

.slide{
  flex:0 0 100%;scroll-snap-align:center;
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;
  padding:1.6rem;border:1px solid var(--rule);border-radius:12px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--mark) 7%,var(--raised)), var(--raised));
  min-height:14rem
}
@media(max-width:640px){
  .slide{grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem;min-height:0}
}
.slide .cover{width:132px}
@media(max-width:640px){.slide .cover{width:88px}}
.slide .sbody{min-width:0}
.slide .eyebrow{
  font-family:system-ui,sans-serif;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 .4rem
}
.slide h2{
  margin:0 0 .45rem;font-size:clamp(1.2rem,3.2vw,1.7rem);line-height:1.2;
  letter-spacing:-.012em;text-wrap:balance
}
.slide h2 a{color:inherit;text-decoration:none}
.slide h2 a:hover{color:var(--accent)}
.slide p.sdesc{
  margin:0 0 .7rem;font-size:.92rem;color:var(--ink-soft);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
@media(max-width:640px){.slide p.sdesc{-webkit-line-clamp:2;font-size:.86rem}}
.slide .smeta{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.8rem
}

.hnav{display:flex;align-items:center;gap:.5rem;margin-top:.7rem}
.dots{display:flex;gap:.35rem;flex:1}
.dot{
  width:.5rem;height:.5rem;border-radius:50%;padding:0;border:0;
  background:color-mix(in srgb,var(--ink) 20%,transparent);cursor:pointer
}
.dot[aria-current="true"]{background:var(--mark);width:1.4rem;border-radius:999px}
.harrow{padding:.25rem .55rem;font-size:.85rem;line-height:1}
.hpause{padding:.25rem .55rem;font-size:.75rem}
.hero-c[data-js="1"] .htrack{scrollbar-width:none}

/* ── header'daki "Aa" paneli ──
   Şeridi doğrudan header'a koymak orayı taşırıyordu ve mobilde hiç
   sığmıyordu. Tek düğme + açılır panel: okuma uygulamalarının standardı,
   her sayfada aynı yerde ve metnin akışını bölmüyor. */
.aa-wrap{position:relative}
#aaBtn{font-weight:700;letter-spacing:.02em;padding:.3rem .6rem}
.aa-panel{
  position:absolute;right:0;top:calc(100% + .45rem);z-index:40;
  min-width:15rem;padding:.75rem .85rem;
  background:var(--raised);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);font-family:system-ui,sans-serif
}
.aa-panel[hidden]{display:none}
.aa-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.35rem 0;font-size:.8rem;color:var(--ink-soft)
}
.aa-btns{display:flex;gap:.3rem;align-items:center}
.aa-btns button{padding:.25rem .5rem;font-size:.8rem;min-width:2.1rem}
.aa-reset{
  width:100%;margin-top:.5rem;font-size:.76rem;padding:.3rem;
  color:var(--ink-faint);background:transparent;border-color:var(--rule)
}
@media(max-width:520px){
  .aa-panel{position:fixed;left:.6rem;right:.6rem;top:auto;min-width:0}
}

/* ── taksonomi sayfaları ── */
.crumb{
  font-family:system-ui,sans-serif;font-size:.78rem;color:var(--ink-faint);
  padding:1rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center
}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.sortbar{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 0 1rem}
.sortbar .chip.on{background:var(--ink);color:var(--ground)}

/* ── sessiz maddede çıkış yolu ── */
.nudge{
  margin-top:1rem;padding:.85rem 1rem;border-radius:9px;
  border:1px solid var(--rule);background:var(--sunken);
  font-family:system-ui,sans-serif;font-size:.84rem;color:var(--ink-soft)
}
.nudge p{margin:0 0 .4rem}
.nudge p:last-child{margin:0}

/* ── oynatıcı: seek artık mini çubuğun hemen altında,
   ayar panelinin arkasında değil ── */
.seekrow{padding:0 .8rem .5rem;max-width:56rem;margin:0 auto}
.seekrow .seek{width:100%;margin:0;display:block}
#rem{color:var(--ink-faint)}
#rem:not(:empty)::before{content:" · "}
.voice{
  font-family:system-ui,sans-serif;font-size:.76rem;color:var(--ink-faint);
  align-self:center
}

/* ── dokunma hedefleri: WCAG 2.5.8 en az 24px, pratikte 44px hedefleniyor.
   Önceki değerler .icon 37,6px ve genel düğme ~30px idi. ── */
.icon{width:2.75rem;height:2.75rem}
.icon.big{width:3rem;height:3rem}
.player button,.readbar button,.aa-btns button{min-height:2.75rem}
.aa-btns button{min-width:2.75rem}
.swatch{width:2rem;height:2rem}

/* iOS Safari, 16px altındaki alanlara odaklanınca sayfayı yakınlaştırıyor.
   Arama ve select'ler .85rem idi — mobilde her dokunuşta zoom oluyordu. */
@media(max-width:820px){
  select,input[type="search"],input[type="text"],.top form.q input{font-size:16px}
}

/* Home indicator'lı iPhone: viewport-fit=cover kullanılıyordu ama
   safe-area hiç hesaba katılmamıştı; sabit oynatıcı çubuğun altına giriyordu. */
.player{padding-bottom:env(safe-area-inset-bottom,0)}
body.has-player{
  padding-bottom:calc(var(--bar-h) + 1.5rem + env(safe-area-inset-bottom,0))
}
.backchip{bottom:calc(var(--bar-h) + 1rem + env(safe-area-inset-bottom,0))}

/* ── bölüm başlıkları ──
   Başlıklar metinde düz paragraf olarak duruyordu; 16.000 kelimelik bir
   maddede gövdeyle aynı görünüyor ve gezinme sıfırdı. Konumları ayrı bir
   dizide tutulduğu için metin değişmedi — ses offset'leri sağlam kaldı. */
#text h2.sec,#text h3.sec,#text h4.sec{
  margin:2rem 0 .6rem;line-height:1.25;text-wrap:balance;
  scroll-margin-top:4.5rem
}
#text h2.sec{
  font-size:1.32em;font-weight:700;
  padding-bottom:.3rem;border-bottom:1px solid var(--rule)
}
#text h3.sec{font-size:1.12em;font-weight:700}
#text h4.sec{font-size:1em;font-weight:700;color:var(--ink-soft)}
#text.focus h2.sec,#text.focus h3.sec,#text.focus h4.sec{color:var(--ink-faint)}
#text.focus .near{color:var(--ink)}

/* ── içindekiler ── */
.toc{
  margin:0 0 1.8rem;border:1px solid var(--rule);border-radius:9px;
  background:var(--raised);font-family:system-ui,sans-serif
}
.toc summary{
  cursor:pointer;padding:.7rem .9rem;font-size:.84rem;font-weight:600;
  list-style:none
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▸ ";color:var(--ink-faint)}
.toc details[open] summary::before{content:"▾ "}
.toc ol{
  margin:0;padding:0 .9rem .8rem 1.6rem;font-size:.83rem;
  max-height:22rem;overflow-y:auto;list-style:decimal
}
.toc li{margin:.18rem 0;color:var(--ink-faint)}
.toc li.l3{padding-left:.9rem;list-style:circle}
.toc li.l4{padding-left:1.8rem;list-style:square}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}