/* 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}
/* Mobilde arama kutusu TAMAMEN gizliydi (display:none). Bir madde
   okurken aklına bir konu gelen kullanıcının arama yapma yolu yoktu.
   Artık kutu daralıp simgeye dönüşüyor, odaklanınca açılıyor. */
@media(max-width:760px){
  .top nav{gap:.55rem;font-size:.8rem}
  .top form.q{margin-left:auto}
  .top form.q input{
    width:2.4rem;padding:.3rem;text-align:center;
    transition:width .18s ease,text-align 0s
  }
  .top form.q input:focus{width:min(60vw,14rem);text-align:start;padding:.3rem .5rem}
  .top form.q input::placeholder{color:transparent}
  .top form.q input:focus::placeholder{color:var(--ink-faint)}
}
@media(prefers-reduced-motion:reduce){.top form.q input{transition:none}}

/* ═══════════════════════════════════════════════════════════
   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}

/* ── sıradaki + benzerler ──
   Metin bitince sayfa boşluğa çıkıyordu: son satırdan sonra yalnız lisans
   bloğu ve ayak vardı. Okuma bittiği an, bir sonraki adım orada olmalı. */
.nextup{margin:2.6rem 0 1rem}
.nextup .eyebrow{
  font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin:0 0 .5rem
}
.nextcard{
  display:flex;gap:1rem;align-items:center;text-decoration:none;color:inherit;
  padding:.9rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--raised)
}
.nextcard:hover{border-color:var(--accent)}
.nextcard .cover{width:56px}
.nextcard .nbody{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.nextcard strong{font-size:1.02rem;line-height:1.3}
.nextcard .meta{
  font-family:system-ui,sans-serif;font-size:.76rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums
}

/* ── sadece dinle kipi ──
   Uzun dinlemede metin gereksiz; ekranı kapatıp cebe koyacak kullanıcı
   için kontroller büyüyor, metin gizleniyor. Metin DOM'dan silinmiyor —
   yalnız görünmez oluyor; kipten çıkınca vurgu kaldığı yerden sürüyor. */
body.listen-only #text,
body.listen-only .toc,
body.listen-only .attrib,
body.listen-only .nextup,
body.listen-only .shelf{display:none}
body.listen-only .detail{padding-bottom:2rem}
body.listen-only .player{
  top:auto;box-shadow:0 -8px 32px -16px rgba(0,0,0,.5)
}
body.listen-only .player .mini{height:5rem}
body.listen-only .icon{width:3.4rem;height:3.4rem;font-size:1.15rem}
body.listen-only .icon.big{width:4.2rem;height:4.2rem;font-size:1.5rem}
body.listen-only .player .title{font-size:1rem;white-space:normal}
#sleepLeft{color:var(--warn)}
#sleepLeft:not(:empty)::before{content:" · ⏻ "}

/* ── parlaklık ──
   Web sayfası cihaz parlaklığını değiştiremez. Gece okumada işletim
   sisteminin en düşük seviyesi bile fazla gelebiliyor; bunun için sayfanın
   üstüne ayarlanabilir bir karartma katmanı konuyor.
   `pointer-events:none` şart — yoksa katman bütün tıklamaları yutar. */
#dimLayer{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:#000;opacity:0;transition:opacity .18s linear
}
@media(prefers-reduced-motion:reduce){#dimLayer{transition:none}}
.aa-btns input[type="range"]{width:7rem;accent-color:var(--mark)}

/* ── sayfa numaraları ── */
.pnums{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.pn{
  min-width:2.2rem;height:2.2rem;display:grid;place-items:center;
  border-radius:6px;text-decoration:none;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;font-size:.82rem
}
a.pn:hover{background:var(--raised);color:var(--ink)}
.pn.on{background:var(--ink);color:var(--ground);font-weight:600}
.pnums .gap{color:var(--ink-faint);padding:0 .15rem}

/* Dinleme çubuğu vurgu renginde, okuma çubuğu nötr — hangi eksende
   ilerlendiği tek bakışta anlaşılsın. */
.progress i{background:var(--ink-faint)}
.progress.audio i{background:var(--mark)}

/* dil anahtarı */
.uilang{
  font-family:system-ui,sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:6px;padding:.28rem .45rem
}
.uilang:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   ÖLÇÜM DÜZELTMELERİ
   Gerçek tarayıcıda render edilip ölçüldü; aşağıdakiler tahmin değil.
   ═══════════════════════════════════════════════════════════ */

/* .rail bir flex kabı; .card.compact'a genişlik verilmiş ama flex-shrink
   sıfırlanmamıştı. Varsayılan 1 olduğu için 12 kartlık bir raf kutuya
   sığmaya çalışıp kartları eziyordu: 390px'te kart 132 → 24,3 px, kapak
   96×144 → 7,9×11,9 px. Tasarlanan genişlik HİÇBİR ekranda gerçekleşmiyordu. */
.card.compact{flex:0 0 132px}
@media(max-width:600px){.card.compact{flex:0 0 112px}}
.rail{gap:.5rem}

/* Raf başlığı kart başlığından ayrışmıyordu: 17,92 px'e karşı 14,08 px,
   aynı aile, aynı ağırlık, aynı renk. Üstelik genel h2 kuralını (22,4)
   aşağı çekiyordu — bölümü adlandıran başlık, madde başlığından küçüktü. */
.shelf-head h2{font-size:1.5rem;letter-spacing:-.01em}
.slide h2{font-size:clamp(1.15rem,2.6vw,1.5rem)}

/* Punto envanteri 18'di; 10,24–14,08 px arasına 9 ayırt edilemez değer
   sıkışmıştı. Aynı işi yapanlar tek değere indiriliyor. */
.badge,.eyebrow,.pill,.card .meta{font-size:11px}
.count,.shelf-head .more,.tile .tnum{font-size:12.5px}
.card h3,.tile,.card p{font-size:14px}
.card:not(.compact) h3{font-size:16px}

/* Oynatıcının GERÇEK yüksekliği 85 px (mini 60 + seek çubuğu 24 + kenarlık),
   ama hesaplar 60 px üzerinden yapılıyordu. Sonuç: içerik çubuğun 1 px
   altında kalıyor, "okunan yere dön" çipinin alt 9 px'i çubuğun arkasına
   giriyordu. */
:root{--player-h:85px}
body.has-player{
  padding-bottom:calc(var(--player-h) + 16px + env(safe-area-inset-bottom,0))
}
.backchip{bottom:calc(var(--player-h) + 12px + env(safe-area-inset-bottom,0))}

/* `--measure:33em` KAPSAYICININ punto'suna göre hesaplanıyordu; ayak
   12,8 px punto kullandığı için orada 660 px yerine 422,4 px'lik bir
   sütun çıkıyordu. rem tabanına alınıyor. */
:root{--measure:41.25rem}
@media(max-width:700px){:root{--measure:37.125rem}}

/* Madde sayfasında beş ayrı sol kenar vardı: kapak 290,4 · gövde 408,4 ·
   başlık 462,8 · ayak 508,8. Detay başlığı okuma sütunuyla aynı eksene
   alınıyor. */
.detail{
  max-width:var(--measure);margin:0 auto;
  gap:1.1rem;padding:1.6rem 1.15rem .9rem
}
.cover.lg{width:112px}
@media(max-width:600px){.cover.lg{width:92px}}

/* İçindekiler 53 maddeydi ve içine ikinci bir kaydırma alanı gömülüydü
   (%29'u görünür). Üst seviye başlıklar yeterli; alt seviyeler gizlenince
   iç kaydırma da gereksizleşiyor. */
.toc li.l3,.toc li.l4{display:none}
.toc ol{max-height:none}

/* Mobilde metin katlamanın 93 px ALTINDA başlıyordu — kullanıcı ilk
   kelimeyi görmek için bir ekrandan fazla kaydırmak zorundaydı. */
@media(max-width:700px){
  .blurb{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .chips{max-height:34px;overflow:hidden}
  .toc{margin:0 0 1rem}
}

/* Izgarada kartlar arası boşluk 3,2 px, kart içi padding 11,2 px'ti —
   yani kartlar birbirine kart içi boşluktan daha yakındı ve nerede
   bittikleri belirsizdi. */
.grid{gap:.75rem}
.card{padding:.75rem}

/* ── katalog kabı geniş ──
   `.wide` 56rem (896px) tavan yapıyordu; `.grid` minmax(19rem) ile
   3. sütun 918px isteyince 1440px ekranda bile 2 sütunda kalıyordu.
   48 kart 24 satıra yayılıyor, sayfa 4.096 px kaydırıyordu. */
.wide.cat{max-width:76rem}
.grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}

/* Dil karoları kart raflarının yerini aldı: 4 dil rafı 95 kartın
   yarısını ve 1.368 px'i yiyordu, üstelik 11 dilin yalnız 4'ü
   görünüyordu. Karo bloğu hepsini iki satırda gösteriyor. */
.tiles{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}

/* Boş sonuç artık tek çıkışlı bir cümle değil, filtreyi tek tek
   kaldıran kestirmeler sunuyor — kullanıcının kurduğu seçimi
   tamamen çöpe atmadan. */
.empty{padding:2.5rem 0;text-align:center;color:var(--ink-soft)}
.empty p{margin:0 0 .6rem}
.empty .chips{margin-top:1rem}

/* ── dil seçici ──
   İki dilde tek harflik bir anahtar yetiyordu; 38 dilde liste gerekiyor.
   Her dil KENDİ adıyla ve kendi yönüyle yazılıyor — kimse kendi dilini
   yabancı bir dilde aramaz. */
.langpick{position:relative}
#langBtn{
  font-family:system-ui,sans-serif;font-size:.76rem;padding:.3rem .5rem;
  max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.langmenu{
  position:absolute;inset-inline-end:0;top:calc(100% + .45rem);z-index:45;
  min-width:12rem;max-height:60vh;overflow-y:auto;
  background:var(--raised);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);padding:.35rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.1rem
}
.langmenu[hidden]{display:none}
.langmenu a{
  display:block;padding:.4rem .55rem;border-radius:6px;text-decoration:none;
  color:var(--ink-soft);font-family:system-ui,sans-serif;font-size:.8rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.langmenu a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.langmenu a[aria-selected="true"]{background:var(--ink);color:var(--ground);font-weight:600}
@media(max-width:560px){
  .langmenu{position:fixed;inset-inline:.6rem;top:auto;min-width:0}
}

/* ── sağdan sola ──
   Arapça ve İbranice. Sabit yönlü (left/right) kurallar mantıksal
   karşılıklarıyla değiştiriliyor; aksi halde oynatıcı, çipler ve
   içindekiler ters tarafta kalıyor. */
[dir="rtl"] .toc ol{padding-inline:1.6rem .9rem}
[dir="rtl"] .toc li.l3{padding-inline-start:.9rem}
[dir="rtl"] .toc li.l4{padding-inline-start:1.8rem}
[dir="rtl"] .crumb span[aria-hidden]{transform:scaleX(-1);display:inline-block}
[dir="rtl"] .shelf-head .more,
[dir="rtl"] .cta,
[dir="rtl"] .nudge a{unicode-bidi:isolate}
/* Zaman göstergesi ve süreler her zaman soldan sağa okunur */
[dir="rtl"] .time,[dir="rtl"] .meta,[dir="rtl"] .badge,
[dir="rtl"] .pnums,[dir="rtl"] .progress{direction:ltr;text-align:start}
/* İleri/geri sarma okları RTL'de yer değiştirmemeli — ses zamanı
   yönden bağımsız; simgeler zaten dairesel (↺ ↻). */
[dir="rtl"] .player .mini{flex-direction:row}

/* ═══════════════════════════════════════════════════════════
   DÜZEN AİLELERİ
   Ana sayfada 8 bölümün 6'sı birebir aynı yatay raftı; sayfa
   tek bir kalıbın tekrarı gibi okunuyordu. İki bölüm kendi
   ailesine taşındı.
   ═══════════════════════════════════════════════════════════ */

/* Öne çıkan ızgara — sesli metinler. Hücre sayısı içerik sayısına
   eşit; boş hücre bırakmıyor. */
.feature-grid{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))
}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}
.fcard{
  display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:start;
  padding:1rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--raised);text-decoration:none;color:inherit
}
.fcard:hover{border-color:var(--accent)}
.fcard .cover{width:88px}
.fbody{min-width:0}
.fbody h3{margin:0 0 .3rem;font-size:1.02rem;line-height:1.3}
.fbody p{
  margin:0 0 .5rem;font-size:.86rem;color:var(--ink-soft);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.fbody .meta{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint)
}

/* Sıralı liste — sırası anlam taşıyan bölümler. Kart yok: yükseklik
   burada hiyerarşi anlatmıyor, ince çizgi yetiyor. */
.ranked{list-style:none;margin:0;padding:0;counter-reset:none}
.ranked li+li{border-top:1px solid var(--rule)}
.ranked a{
  display:grid;grid-template-columns:2.2rem 1fr auto;gap:.9rem;align-items:center;
  padding:.7rem .4rem;text-decoration:none;color:inherit;border-radius:8px
}
.ranked a:hover{background:var(--raised)}
.ranked .rank{
  font-family:system-ui,sans-serif;font-size:1.05rem;font-weight:700;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;text-align:end
}
.ranked .rbody{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.ranked .rtitle{
  font-size:1rem;line-height:1.32;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ranked .meta{font-family:system-ui,sans-serif;font-size:11px;color:var(--ink-faint)}
@media(max-width:520px){
  .ranked a{grid-template-columns:1.8rem 1fr;gap:.7rem}
  .ranked .badge{grid-column:2;justify-self:start}
}

/* ── hız kaydırağı ──
   Açılır liste yerine kaydırak: dinlerken sürekli ince ayar yapılan bir
   kontrol, seçilip bırakılan bir değer değil. Değer göstergesi aynı
   zamanda 1x'e dönüş düğmesi. */
.rate-row{
  display:flex;align-items:center;gap:.6rem;flex:1;min-width:12rem;
  font-family:system-ui,sans-serif;font-size:.76rem;color:var(--ink-soft)
}
.rate-row label{white-space:nowrap}
#rate{
  flex:1;min-width:6rem;accent-color:var(--mark);
  height:2.75rem;                    /* dokunma hedefi; iz ince kalıyor */
  background:transparent;cursor:pointer
}
#rateVal{
  font-variant-numeric:tabular-nums;min-width:3.2rem;
  font-size:.82rem;font-weight:600;padding:.35rem .5rem
}

/* Mini çubuktaki gösterge: hızı görmek için paneli açmak gerekmesin.
   1x'te sessiz duruyor — kullanıcı bir şey değiştirmediyse dikkat
   çekmesinin anlamı yok. */
.ratechip{
  font-family:system-ui,sans-serif;font-size:.74rem;font-weight:600;
  font-variant-numeric:tabular-nums;padding:.3rem .45rem;min-width:2.6rem;
  color:var(--ink-faint);border-color:transparent;background:transparent
}
.ratechip.on{
  color:var(--accent);border-color:var(--rule);
  background:color-mix(in srgb,var(--mark) 10%,transparent)
}
.ratechip:hover{border-color:var(--rule);color:var(--ink)}
@media(max-width:420px){.ratechip{display:none}}