:root{
  --bg:#f4f4f1; --bg2:#ffffff; --text:#1e1e22; --muted:#6c6c75; --border:#e0e0e4;
  --line:#c8c8ce; --line-on:#9a9aa4; --node:#7f7f89; --node-sel:#16161a; --lock:#dedee3;
  --accent:#7c3aed; --accent-soft:rgba(124,58,237,.10); --good:#16a34a; --bad:#dc2626; --btn:#ececf0;
  --deepgreen:#14532d;   /* okundu işareti: koyu yeşil çember (M.K. 22 Eyl 2026) */
  --center-fill:#000; --center-stroke:#fff;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1c1e; --bg2:#252528; --text:#e6e6ea; --muted:#8f8f98; --border:#35353a;
    --line:#4a4a51; --line-on:#6e6e78; --node:#a4a4ac; --node-sel:#ffffff; --lock:#333338;
    --accent:#8b5cf6; --accent-soft:rgba(139,92,246,.16); --good:#22c55e; --bad:#ef4444; --btn:#303035;
  }
}
:root[data-theme="dark"]{
  --bg:#1c1c1e; --bg2:#252528; --text:#e6e6ea; --muted:#8f8f98; --border:#35353a;
  --line:#4a4a51; --line-on:#6e6e78; --node:#a4a4ac; --node-sel:#ffffff; --lock:#333338;
  --accent:#8b5cf6; --accent-soft:rgba(139,92,246,.16); --good:#22c55e; --bad:#ef4444; --btn:#303035;
}
/* ---------- TEMA: Klasik İslami (M.K. 22 Eyl 2026) — koyu lacivert/siyah zemin,
   yeşil + altın vurgu, merkez daire koyu yeşil çerçeve, yan daireler orta ton yeşil ---------- */
:root[data-theme="klasik"]{
  --bg:#080d1a; --bg2:#0f1a2e; --text:#eae4d4; --muted:#8f9aae; --border:#1e2c46;
  --line:#2a3d5c; --line-on:#3f5d8a; --node:#8095b4; --node-sel:#ffffff; --lock:#152238;
  --accent:#1f7a4d; --accent-soft:rgba(31,122,77,.18); --good:#22c55e; --bad:#e05252; --btn:#152238;
  --center-fill:#04120c; --center-stroke:#1e7a4a;
}
:root[data-theme="klasik"] .node.center .lat{fill:#e8c766}
:root[data-theme="klasik"] .node.center .ar{fill:#f0d27a}
/* Klasik temada infografik kart: koyu yeşil-siyah zemin + yeşil/altın çerçeve */
:root[data-theme="klasik"] .infog{background:#08130f;border-color:#1e7a4a;box-shadow:0 6px 22px rgba(0,0,0,.6)}
:root[data-theme="klasik"] .infog::before{border-color:rgba(201,168,76,.42)}
:root[data-theme="klasik"] .infog .ih{border-bottom-color:#1e7a4a;color:#eae4d4}
:root[data-theme="klasik"] .infog .ibox{border-color:rgba(31,122,77,.55)}
:root[data-theme="klasik"] .infog .ibox h4{border-bottom-color:rgba(201,168,76,.4);color:#eae4d4}
:root[data-theme="klasik"] .infog .inum{border-color:#1e7a4a;background:rgba(31,122,77,.28);color:#e8d9a8}
:root[data-theme="klasik"] .infog .duabox{border-color:#1e7a4a;background:rgba(31,122,77,.14)}
:root[data-theme="klasik"] .infog .intro{background:rgba(31,122,77,.12);border-color:rgba(201,168,76,.55);color:#ecd9a0}
:root[data-theme="klasik"] .infog .ayet{background:rgba(31,122,77,.1);border-color:rgba(201,168,76,.5)}
:root[data-theme="klasik"] .infog .ayet .ref{color:#c9a227}
:root[data-theme="klasik"] .infog .ifoot{border-top-color:rgba(31,122,77,.4)}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--text);overflow:hidden;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.55}
button{font:inherit;color:inherit}
#app{height:100%;position:relative;overflow:hidden}
#stage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}   /* inset yerine uzun yazım: eski Android Chrome (inset <87) desteklemiyordu → siyah/boş ekran */
#graph{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#graph:active{cursor:grabbing}

/* HUD */
#hud{position:absolute;left:16px;top:14px;pointer-events:none}
#hud .title{font-weight:600;font-size:16px}
#hud .stat{color:var(--muted);font-size:13px;margin-top:2px}
/* Sol alt araç sütunu: Tema · Sıfırla · (zoom satırı) — üçü de sola dayalı (M.K. 22 Eyl 2026) */
#side{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#tools{display:flex;gap:6px}
.chip{background:var(--bg2);border:1px solid var(--border);border-radius:8px;min-width:36px;height:36px;padding:0 12px;cursor:pointer;font-size:14px}
.chip:hover{border-color:var(--accent)}
.chip:focus-visible,.btn:focus-visible,.opt:focus-visible,.subrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;padding:9px 14px;font-size:13.5px;max-width:86%;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s}
#toast.show{opacity:1}

/* graph */
.edge{stroke:var(--line);stroke-width:1;opacity:.35}
.edge.on{stroke:var(--line-on);opacity:.85}
.edge.sub{stroke:var(--accent);opacity:.75;stroke-width:1.3}
.node{cursor:pointer;outline:none}
.node circle{fill:var(--node);stroke:transparent;stroke-width:3;transition:fill .35s}
.node text{fill:var(--text);font-size:11px;text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.node.name.lock{cursor:not-allowed}
.node.name.lock circle{fill:var(--lock)}
.node.name.lock text{display:none}
.node.name.part circle{stroke:var(--accent)}
.node.name.done circle{fill:var(--good)}
.node.name.sel circle{fill:var(--node-sel);stroke:var(--accent);stroke-width:3.5}
.node.name.sel text{font-size:14px;font-weight:600}
.node:focus-visible circle{stroke:var(--accent);stroke-width:4}
.node.center circle{fill:var(--center-fill);stroke:var(--center-stroke);stroke-width:3}   /* M.K. 22 Eyl 2026: iç siyah/çerçeve beyaz (klasik temada koyu yeşil) */
.node.center.sel circle{stroke-width:5}
.node.center text{stroke:none;fill:#ffc600;font-weight:600}
.node.center .ar{font-family:Amiri,"Traditional Arabic","Geeza Pro",serif;font-size:27px;font-weight:400}
.node.center .lat{font-size:13px}
.node.sub circle{fill:none;stroke:transparent;stroke-width:3;pointer-events:all}   /* tıklama/sürükleme için şart: fill:none iken varsayılan hit-test boş kalır */
.node.sub.read circle{stroke:var(--deepgreen);stroke-width:5}      /* okundu: koyu yeşil çember */
/* Seçili baloncuk: çember rengini EZMEZ (okundu çemberi/madalya görünür kalsın) —
   ışıma + tam opaklık ile belli eder. */
.node.sub.cur image{opacity:1;filter:drop-shadow(0 0 6px var(--node-sel))}
/* alt daire ikon görselleri (M.K. 22 Eyl 2026): PNG kare + şeffaf DEĞİL,
   daire biçimi JS'teki objectBoundingBox clipPath ile verilir.
   Okunmamış baloncuk SOLUK, okunmuş tam renk + koyu yeşil çember + altın madalya. */
.node.sub image{pointer-events:none;opacity:.42}
.node.sub.read image{opacity:1}
.node.sub .rozet{display:none;pointer-events:none}
.node.sub.read .rozet{display:block}
/* madalya görseli: altın yıldız (şeffaf PNG, daire kırpması yok) — hafif gölge ile iliştirilmiş görünür */
.rozet .mz-img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.sublabel{fill:var(--text);font-size:12px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
/* NOT: text-anchor burada TANIMLANMAZ — CSS kuralı, JS'in attribute'unu ezer ve etiket
   dairenin üstüne biner (22 Eyl 2026'da yaşandı). Hizalama JS'te inline style ile verilir. */
.node .ar-in{font-family:Amiri,"Traditional Arabic",serif;text-anchor:middle;pointer-events:none;fill:#ffc600}
.node.name.goldar circle{fill:var(--bg2);stroke:var(--accent);stroke-width:2.5}
.node.name.goldar .ar-in{fill:#ffc600;font-weight:700}
.node.name.done .ar-in{fill:#ffc600}
.node.fresh circle{animation:pulse 1.1s ease-in-out 4}
@keyframes pulse{0%,100%{stroke:var(--accent);stroke-width:2;stroke-opacity:1}50%{stroke:var(--accent);stroke-width:11;stroke-opacity:.3}}
@media (prefers-reduced-motion:reduce){.node.fresh circle{animation:none;stroke:var(--accent);stroke-width:5}}

/* panel — KAYAR PENCERE (M.K. 22 Eyl 2026): normalde gizli, seçim yapılınca sağdan kayar.
   Ağaçta boşluğa tıklayınca / ✕ ile / Esc ile kapanır. Mobilde alttan kayar. */
#panel{position:absolute;top:0;right:0;bottom:0;width:430px;max-width:92vw;z-index:20;box-sizing:border-box;
  background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;padding:22px 22px 30px;
  transform:translateX(104%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  box-shadow:-16px 0 44px rgba(0,0,0,.4)}
#panel.open{transform:translateX(0)}
/* Panel başlığı: sticky şerit. Mobilde tutma çubuğu (aşağı sürükleyip kapatma), sağda ✕. */
#panel .phead{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;
  gap:10px;background:var(--bg2);padding:0 0 6px}
#panel .pgrab{display:none}                    /* tutma çubuğu yalnız telefonda */
#panel .pgrab i{display:block;width:46px;height:4px;border-radius:3px;background:var(--border)}
#panel .pclose{display:block;width:34px;height:34px;flex:none;
  border:1px solid var(--border);border-radius:9px;background:var(--bg);cursor:pointer;font-size:15px;line-height:1}
#panel .pclose:hover{border-color:var(--accent)}
#panel.drag{transition:none}                   /* parmakla sürüklerken animasyon kapalı */
@media (prefers-reduced-motion:reduce){#panel{transition:none}}
#panel h2{font-size:22px;margin:4px 0 2px;line-height:1.25}
#panel h3{font-size:17px;margin:10px 0 12px;line-height:1.4;font-weight:600}
#panel p{margin:0 0 12px}
.crumb{color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.ar{font-family:Amiri,"Traditional Arabic","Geeza Pro","Noto Naskh Arabic",serif;direction:rtl;text-align:center;font-size:50px;line-height:1.5;margin:6px 0 0}
.ar.sm{font-size:40px}
.big{font-size:19px;font-weight:600;line-height:1.4}
.btn{display:block;width:100%;border:1px solid var(--border);background:var(--btn);border-radius:10px;padding:11px 14px;cursor:pointer;text-align:center;margin-top:10px}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row2{display:flex;gap:8px}.row2 .btn{margin-top:10px}
/* ---------- Alt ders kartları: 2×2 "yarı yarıya" düzen (M.K. 23 Eyl 2026)
   Eskiden 4 satır tam genişlikteydi ve telefonda kartın boyunu şişiriyordu.
   Artık iki sütun: ikon (baloncuktaki aynı görsel) + ad + durum. */
.subs{margin:16px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.subrow{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;
  align-items:center;border:1px solid var(--border);background:transparent;border-radius:10px;
  padding:9px 11px;cursor:pointer;text-align:left;width:100%;min-height:58px}
.subrow:hover{border-color:var(--accent)}
/* İkon: alt dairelerdeki dosyaların aynısı. Okunmamış soluk, okunmuş tam renk + koyu yeşil çember
   (baloncuklardaki okundu kuralıyla aynı mantık). Kare PNG'ler border-radius ile daireye kırpılır. */
.subrow::before{content:"";grid-row:1/3;width:32px;height:32px;border-radius:50%;flex:none;
  background-color:var(--btn);background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.45;box-shadow:inset 0 0 0 1px var(--border);transition:opacity .3s,box-shadow .3s}
.subrow[data-j="anlam"]::before{background-image:url(img/sub-anlam.png)}
.subrow[data-j="ayetler"]::before{background-image:url(img/sub-ayetler.png)}
.subrow[data-j="tezahur"]::before{background-image:url(img/sub-tezahur.png)}
.subrow[data-j="dua"]::before{background-image:url(img/sub-dua.png)}
.subrow.read::before{opacity:1;box-shadow:inset 0 0 0 2px var(--deepgreen)}
.subrow .dot{display:none}                     /* okundu göstergesi artık ikon çerçevesinde */
.subrow .lbl{flex:1;font-size:13.5px;line-height:1.25;font-weight:500}
.subrow .st{color:var(--muted);font-size:11.5px;grid-column:2}
.subrow.read .st{color:var(--good)}
.note{font-size:13.5px;color:var(--muted)}
.callout{background:var(--accent-soft);border-radius:10px;padding:11px 14px;font-size:14px;margin:14px 0 4px}
.bar{height:6px;background:var(--btn);border-radius:6px;overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.legend{display:grid;gap:9px;margin:16px 0}
.legend div{display:flex;gap:11px;align-items:flex-start}
.legend b{flex:none;width:12px;height:12px;border-radius:50%;margin-top:5px;background:var(--node)}
.legend b.l{background:var(--lock)}.legend b.a{background:var(--accent)}.legend b.g{background:var(--good)}
.dots{display:flex;gap:6px;margin:8px 0 4px}
.dots i{width:26px;height:5px;border-radius:4px;background:var(--btn)}
.dots i.d{background:var(--accent)}.dots i.c{background:var(--muted)}
.opts{display:grid;gap:8px;margin-top:10px}
.opt{border:1px solid var(--border);background:transparent;border-radius:10px;padding:12px 14px;text-align:left;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default;color:var(--text)}
.opt.ok{border-color:var(--good);background:rgba(22,163,74,.16);background:color-mix(in srgb,var(--good) 16%,transparent)}
.opt.bad{border-color:var(--bad);background:rgba(220,38,38,.14);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.fb{margin:14px 0 2px;font-weight:600}.fb.ok{color:var(--good)}.fb.bad{color:var(--bad)}
.score{font-size:40px;font-weight:600;line-height:1.1;margin:6px 0}
.newlist{display:grid;gap:6px;margin:8px 0 4px}
.newlist div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px 14px}
.newlist .a{font-family:Amiri,"Traditional Arabic",serif;font-size:22px;direction:rtl}

@media (max-width:760px){
  /* mobil: panel alttan kayar (alt sayfa / bottom-sheet).
     Kart EN FAZLA EKRANIN YARISI (M.K. 23 Eyl 2026): yükseklik sabit değil, içerik kadar (≤50vh),
     uzun içerik panelin İÇİNDE kayar. Kart iki durakta durur:
       • açık  → yükselmiş hâl (translateY(0))
       • park  → aşağı kayar, ekranda yalnız tutma çubuğu + ✕ şeridi (52px) kalır
     ✕ kartı tamamen kapatır; aşağı çekmek kapatmaz, park eder. */
  #panel{top:auto;left:0;right:0;width:auto;max-width:none;height:auto;max-height:50vh;border-left:0;
    border-top:1px solid var(--border);border-radius:16px 16px 0 0;padding:10px 16px 22px;
    transform:translateY(104%);box-shadow:0 -16px 44px rgba(0,0,0,.45)}
  #panel.open{transform:translateY(0)}
  #panel.park{transform:translateY(calc(100% - 52px))}   /* PARK: yalnız başlık şeridi görünür */
  #panel.tam{max-height:100vh;border-radius:0}            /* TAM: okumak için yukarı kadar açılır */
  #panel.buyu{max-height:100vh}                           /* sürükleyerek büyütme sırasında geçici tavan */
  /* tutma şeridi: parmağın altında kalacak geniş hedef (çubuğun kendisi 46×4) */
  #panel .pgrab{display:flex;flex:1;align-items:center;justify-content:center;height:34px;
    touch-action:none;cursor:grab}
  #panel .pgrab:active{cursor:grabbing}
  #panel .phead{padding:0 0 4px}
  #panel .pclose{width:38px;height:38px;font-size:17px}
  /* panel açıkken HUD ve üst butonlar gizlenir — baloncuklar başlıkla çakışmasın (M.K. 22 Eyl 2026) */
  body.panel-open #hud,body.panel-open #side{display:none}
  .ar{font-size:42px}
  #hud{left:12px;top:10px}
}
/* bizim içerik stilleri */
.ayet{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:11px 13px;margin-bottom:10px;background:var(--accent-soft)}
.ayet .ref{color:var(--accent);font-size:12.5px;font-weight:600;margin-bottom:4px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mcol{display:grid;gap:7px}
.mitem{border:1px solid var(--border);background:transparent;border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;font-size:14px}
.mitem:hover{border-color:var(--accent)}
.mitem.sel{border-color:var(--accent);background:var(--accent-soft)}
.mitem.ok{border-color:var(--good);background:rgba(22,163,74,.14);background:color-mix(in srgb,var(--good) 14%,transparent);cursor:default}
.mitem.err{border-color:var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mhint{margin-top:8px}
/* ---------- infografik kart tipografisi — PREMIUM SERİF (M.K. 22 Eyl 2026)
   Başlık: Cormorant Garamond · Gövde: Literata · Vurgu terimleri altın #C9A227
   Zemin koyu "gece defteri": metin #E8E3D8 ---------- */
.infog{background:#191a17;color:#e6e0cf;border:2px solid #c9a84c;border-radius:8px;padding:14px 16px 16px;position:relative;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.infog::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border:1px solid rgba(201,168,76,.4);border-radius:5px;pointer-events:none}
.infog .ih{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;text-align:center;font-size:31px;letter-spacing:.5px;color:#E8E3D8;border-bottom:3px solid #c9a84c;display:block;margin:4px 18px 6px;padding-bottom:2px;line-height:1.15}
.infog .iar{font-family:Amiri,serif;direction:rtl;text-align:center;font-size:40px;color:#e8c766;margin:2px 0 0;line-height:1.4}
.infog .ikaynak{font-family:'Literata',Georgia,serif;font-weight:400;font-size:12.5px;color:#a49b84;text-align:center;letter-spacing:.2px}
.infog .ibox{border:1.6px solid rgba(201,168,76,.4);border-radius:10px;background:rgba(255,255,255,.045);padding:10px 13px;margin:10px 0;position:relative}
.infog .ibox h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:22px;line-height:1.2;color:#E8E3D8;border-bottom:1.4px solid rgba(201,168,76,.35);padding-bottom:4px;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.infog .inum{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1.6px solid #c9a84c;border-radius:50%;font-family:'Literata',Georgia,serif;font-size:13px;font-weight:600;background:rgba(201,168,76,.18);color:#f0e4c2;flex:none}
.infog p{font-family:'Literata',Georgia,serif;font-size:16px;line-height:1.72;margin:0 0 6px;color:#E8E3D8}
.infog p b,.infog .vurgu{color:#C9A227;font-weight:600}
.infog .intro{font-family:'Literata',Georgia,serif;font-size:17px;line-height:1.6;text-align:center;font-style:italic;color:#ecd9a0;background:rgba(201,168,76,.09);border:1.4px dashed rgba(201,168,76,.55);border-radius:8px;padding:9px 13px;margin:10px 0}
.infog .ayet{border:1.4px dashed rgba(201,168,76,.55);border-radius:8px;background:rgba(201,168,76,.07);padding:9px 12px;margin:8px 0}
.infog .ayet .ref{font-family:'Literata',Georgia,serif;color:#c9a84c;font-size:12.5px;font-weight:600;letter-spacing:.3px;margin-bottom:4px;text-transform:none}
.infog .ayet .meal{font-family:'Literata',Georgia,serif;font-size:16px;line-height:1.72;color:#E8E3D8}
.infog .duabox{border:1.6px solid #c9a84c;border-radius:10px;background:rgba(201,168,76,.08);padding:11px 14px;font-family:'Literata',Georgia,serif;font-size:17px;line-height:1.7;color:#f0e4c2}
.infog .ifoot{font-family:'Literata',Georgia,serif;font-size:11.5px;color:#a49b84;text-align:center;margin-top:10px;border-top:1px solid rgba(201,168,76,.3);padding-top:6px;letter-spacing:.2px}

/* ---------- ESKİ ANDROID CHROME GERİYE DÖNÜK UYUMLULUK (23 Eyl 2026) ----------
   Flex `gap` Chrome 84+; eski sürümlerde boşluk kaybolur → margin fallback.
   Ayrıca `inset` ve `color-mix` kullanımları yukarıda uzun yazım/fallback'e çevrildi. */
@supports not (gap: 1px){
  #side > * + *{margin-top:8px}
  #tools .chip + .chip{margin-left:6px}
  .row2 .btn + .btn{margin-left:8px}
  .legend div > * + *{margin-left:9px}
  .dots .dot + .dot{margin-left:6px}
  .subs{grid-gap:8px}          /* eski Chrome'da grid gap için uzun yazım */
}