/* ==========================================================
   TECVİD — Kur'ân-ı Kerîm'i doğru ve güzel okuma kuralları
   Etkileşimli, animasyonlu HTML sunum (Değerler Eğitimi).
   İskelet sunumlar.html ile ORTAKTIR: kumanda · adımlar ·
   içindekiler (önizlemeli, Esc = şerit) · konu haritası ·
   çıkış onayı · 2rem yazı tabanı · kalın yazı yok.
   Sayfa kökte (tecvid.html), bu dosya degerler/ klasöründe:
   yazı tipi yolu bu yüzden "../arakom.ttf".
   Renk dili PDF ders notuyla (degerler/tecvid.pdf) aynı:
     Med = camgöbeği · Sâkin nûn = mor · Sâkin mîm = yeşil
     Diğer idgâmlar = mavi · Kalkale = turuncu
     kırmızı = kuralın harfi · yeşil = etkilenen harf
   ========================================================== */
@font-face{ font-family:'Arakom'; src:url('../arakom.ttf') format('truetype'); font-display:swap; }
@font-face{ font-family:'arakom'; src:url('../arakom.ttf') format('truetype'); font-display:swap; }

:root{
  --merfu:#00A651;
  --mansub:#0070C0;
  --mecrur:#E5007D;
  --kirmizi:#D81E05;
  --kahve:#8B6034;
  --mor:#6B3FA0;
  --murekkep:#1F2430;
  --gri:#6B7280;
  --acikgri:#EEF1F5;
  --zemin:#FBF8F1;
  --kart:#FFFFFF;
  --golge:0 10px 30px rgba(31,36,48,.10), 0 2px 6px rgba(31,36,48,.06);
  --golge2:0 18px 46px rgba(31,36,48,.16);
  --r:22px;

  /* bölüm renkleri (PDF ile aynı) */
  --med:#0F766E;  --med-k:#0B4F4A; --med-a:#E7F4F1; --med-o:#BFE3DB; --med-g:rgba(15,118,110,.30);
  --nun:#7E3A74;  --nun-k:#55204E; --nun-a:#F7ECF5; --nun-o:#E6C9E0; --nun-g:rgba(126,58,116,.30);
  --mim:#2E7D32;  --mim-k:#1B5620; --mim-a:#EAF5EA; --mim-o:#C8E6C9; --mim-g:rgba(46,125,50,.30);
  --idg:#2F5D8A;  --idg-k:#1C3C5E; --idg-a:#EAF1F8; --idg-o:#C9D9EA; --idg-g:rgba(47,93,138,.30);
  --kal:#B45309;  --kal-k:#7C3905; --kal-a:#FDF2E6; --kal-o:#F5D6B0; --kal-g:rgba(180,83,9,.30);
  --lac:#1F3A5F;  --lac-k:#0F1E33; --altin:#B8995A; --altin2:#E7CD8E;

  /* SVG sahnelerinin renkleri */
  --mur:#1F2430; --tk:#D7191F; --ty:#1E8C5A; --ts:#BAC2CC; --tb:#2F5D8A;
  /* varsayılan vurgu (bölümsüz slaytlar) */
  --vr:var(--lac); --vr-k:var(--lac-k); --vr-a:#EEF2F8; --vr-o:#CBD5E4; --vr-g:rgba(31,58,95,.28);
}
.b-med{--vr:var(--med);--vr-k:var(--med-k);--vr-a:var(--med-a);--vr-o:var(--med-o);--vr-g:var(--med-g)}
.b-nun{--vr:var(--nun);--vr-k:var(--nun-k);--vr-a:var(--nun-a);--vr-o:var(--nun-o);--vr-g:var(--nun-g)}
.b-mim{--vr:var(--mim);--vr-k:var(--mim-k);--vr-a:var(--mim-a);--vr-o:var(--mim-o);--vr-g:var(--mim-g)}
.b-idg{--vr:var(--idg);--vr-k:var(--idg-k);--vr-a:var(--idg-a);--vr-o:var(--idg-o);--vr-g:var(--idg-g)}
.b-kal{--vr:var(--kal);--vr-k:var(--kal-k);--vr-a:var(--kal-a);--vr-o:var(--kal-o);--vr-g:var(--kal-g)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  background:#1B2330;
  color:var(--murekkep);
  font-family:'Arakom','Segoe UI',system-ui,sans-serif;
  overflow:hidden;
}
button{font-family:inherit}

/* ---------- Sahne: 16:9 alanı ekrana sığdır ---------- */
#sahne{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#tuval{
  width:1280px;height:720px;position:relative;
  flex:0 0 auto;
  transform-origin:center center;
  background:var(--zemin);
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}

/* ---------- Slayt ---------- */
.slayt{
  position:absolute;inset:0;
  padding:22px 46px 58px;
  display:none;
  flex-direction:column;
  background-color:var(--zemin);
}
.slayt.aktif{display:flex;animation:gir .5s cubic-bezier(.22,.9,.3,1) both}
@keyframes gir{from{opacity:0;transform:translateX(34px) scale(.985)}to{opacity:1;transform:none}}
.slayt.geri.aktif{animation:girGeri .5s cubic-bezier(.22,.9,.3,1) both}
@keyframes girGeri{from{opacity:0;transform:translateX(-34px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Adımlar ---------- */
.adim{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s ease, transform .5s cubic-bezier(.22,.9,.3,1)}
.adim.gor{opacity:1;transform:none}

h1,h2,h3,h4,p{margin:0}

/* ---------- Arapça ---------- */
.ar{direction:rtl;unicode-bidi:isolate;line-height:1.6;font-family:'Arakom',serif}

/* ---------- Genel kart ---------- */
.kart{background:var(--kart);border-radius:var(--r);box-shadow:var(--golge);padding:18px 20px}

/* ---------- Yazdırma ---------- */
@media print{
  @page{size:landscape;margin:0}
  body{background:#fff;overflow:visible}
  #sahne{position:static;display:block}
  #tuval{transform:none!important;width:100%;height:auto;box-shadow:none}
  #liste{display:none!important}
  .sunum{display:block!important}
  .slayt{display:flex!important;position:relative;height:720px;page-break-after:always;box-shadow:none;animation:none!important}
  .adim{opacity:1!important;transform:none!important}
  #kumanda,#dCikis,#icindekiler,#yardim,#ustSerit,#onay,.tekrar{display:none!important}
}

/* ==========================================================
   CANLI KONU HARİTASI (hx) — "Bu konu Arapçanın neresinde?"
   TÜM AĞAÇ hep açıktır: soldan sağa dallanan tek bir şema.
   Bir kutuya basınca kamera o dala YAKLAŞIR (çevresi soluklaşır),
   aynı kutuya ya da boşluğa basınca UZAKLAŞIR ve harita yine
   bütün olarak görünür — tamlamavecumleler'deki büyütme mantığı.
   Dersin konusu 📍 ile işaretlidir; öğretmen istediği dala basıp
   başka nelerin olduğunu gezebilir.
   ========================================================== */
/* Harita yalnız slaytın kenar boşluğunu değil, tuvalin dışına taşarak EKRANIN
   TAMAMINI kullanır: 16:9'dan geniş ekranlarda yanlarda kalan boşluklar da
   haritaya katılır (--hxTas JS'ten ölçülür). */
.hxKutu{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:6px;
  margin-inline:calc(-46px - var(--hxTas, 0px))}
#tuval.tasmali{overflow:visible}
/* Taşan alanın zemini de sürsün: geniş ekranda kenarlarda koyu bant kalmasın */
#tuval.tasmali::before{content:'';position:absolute;top:0;bottom:0;z-index:0;
  left:calc(-1 * var(--hxTas, 0px));right:calc(-1 * var(--hxTas, 0px));background:var(--zemin)}
#tuval.tasmali #ustSerit{left:calc(-1 * var(--hxTas, 0px));right:calc(-1 * var(--hxTas, 0px))}
/* Sunum listesi de (harita gorunumu de liste gorunumu de) tuvalin
   disina tasar: 4K / ultra genis ekranda sagda solda koyu bant kalmaz. */
#liste.acik{left:calc(-1 * var(--hxTas, 0px));right:calc(-1 * var(--hxTas, 0px))}
.hxadim{display:none}
/* min-width:0 şart: satır yönlü esnek kapsayıcıda (sunum listesindeki harita)
   .hx içeriğine göre büyüyüp kaydırma yerine kutuyu şişiriyordu. */
.hx{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}

/* --- üst şerit: başlık + kumanda --- */
/* Tuşlar akışta değil: haritanın SOL ALT köşesinde durur; üst kenar tamamen
   haritaya kalır, sunumun kendi yardım şeridiyle de çakışmaz. */
.hx-serit{position:absolute;left:4px;bottom:4px;z-index:6;display:flex;align-items:center;gap:8px}
.hx-tus{font-family:inherit;font-size:15px;font-weight:900;color:#8A6412;
  box-shadow:0 6px 16px rgba(31,36,48,.10);
  background:#FFF1D6;border:1px solid #F3DDB4;border-radius:999px;padding:5px 13px;cursor:pointer;transition:.16s;
  display:inline-flex;align-items:center;gap:6px}
.hx-tus:hover{background:#FBE7C2;transform:translateY(-1px)}
.hx-tus.gizli{display:none}

/* --- kamera penceresi --- */
.hx-pencere{position:relative;flex:1 1 auto;min-height:0;min-width:0;overflow:auto;cursor:grab;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#E0D5C2 #F6F2EA;
  touch-action:none;-webkit-user-select:none;user-select:none}
.hx-pencere.suruklu{cursor:grabbing}
.hx-pencere::-webkit-scrollbar{width:10px;height:10px}
.hx-pencere::-webkit-scrollbar-thumb{background:#E0D5C2;border-radius:8px}
.hx-pencere::-webkit-scrollbar-track{background:#F6F2EA;border-radius:8px}
.hx-olcu{position:relative}
.hx-tuval{position:absolute;left:0;top:0;transform-origin:0 0;width:max-content}

/* --- ağaç: her düğüm = kutu + sağındaki dallar --- */
.hxn{display:flex;align-items:center}
/* Kutu boyu KAPSADIĞI KADAR: altında ne kadar konu varsa o kadar iri.
   s1 = yaprak … s6 = kök. Boyut hem yazıda hem simgede hem iç boşlukta. */
.hxb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  background:#fff;border:1px solid #EFE7DA;border-radius:13px;cursor:pointer;
  font-weight:800;color:#4B5563;line-height:1.25;position:relative;
  transition:opacity 1.15s ease, box-shadow .35s, border-color .35s, background .35s}
.hxb.s1{font-size:16px;padding:6px 9px;max-width:212px}
.hxb.s2{font-size:18px;padding:7px 11px;max-width:230px}
.hxb.s3{font-size:21px;padding:8px 13px;max-width:252px}
.hxb.s4{font-size:24px;padding:10px 15px;max-width:274px}
.hxb.s5{font-size:28px;padding:11px 18px;max-width:300px}
.hxb.s6{font-size:32px;padding:13px 21px;max-width:330px;border-radius:17px}
.hxb.s1 .hxs{width:18px;height:18px;flex:0 0 18px}
.hxb.s2 .hxs{width:20px;height:20px;flex:0 0 20px}
.hxb.s3 .hxs{width:23px;height:23px;flex:0 0 23px}
.hxb.s4 .hxs{width:26px;height:26px;flex:0 0 26px}
.hxb.s5 .hxs{width:30px;height:30px;flex:0 0 30px}
.hxb.s6 .hxs{width:34px;height:34px;flex:0 0 34px}
.hxb.s4 .hxar,.hxb.s5 .hxar,.hxb.s6 .hxar{font-size:22px}
.hxb:hover{border-color:var(--kahve);box-shadow:0 6px 16px rgba(139,96,52,.18)}
.hxb .hxs{color:#A9B2BE}
.hxb:hover .hxs{color:var(--kahve)}
.hxar{font-size:18px;font-weight:900;direction:rtl;color:#A08256;font-style:normal;flex:0 0 auto;white-space:nowrap}
.hxbag{margin-inline-start:auto;display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
  color:#fff;background:var(--kahve);border-radius:7px;text-decoration:none}
.hxbag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.hxbag:hover{filter:brightness(1.14)}
.hxmini{flex-basis:100%;display:flex;flex-wrap:wrap;gap:3px 5px;padding-top:3px;
  border-top:1px dashed #EDE4D6;margin-top:2px}
.hxm{font-size:13px;font-weight:700;color:#93A0AE;background:#F7F4EF;border-radius:7px;padding:2px 6px}
.hxm em{font-style:normal;color:#BCA98C}
.hxm{cursor:pointer;transition:background .16s, color .16s}
.hxm:hover{background:#F0E7D8;color:#6B5133}
.hxm.hxburada{background:#FFF1D6;color:#8A6412;box-shadow:0 0 0 1.5px #F0DCB4;
  display:inline-flex;align-items:center;gap:4px}
.hxm.hxburada .hxpin svg{width:11px;height:14px}
.hxm.sec{background:var(--kahve);color:#fff}
.hxm.sec em{color:#F3E3CB}

/* kök ve dersin yeri */
.hxn.d0>.hxb{background:var(--murekkep);border-color:var(--murekkep);color:#fff}
.hxn.d0>.hxb .hxs{color:#fff}
.hxn.d1>.hxb{background:#F7F1E7;border-color:#E6D8C2;color:#6B5133}
.hxn.burada>.hxb{background:#FFF8EA;border-color:#E9CE95;box-shadow:0 0 0 3px #FBEDD2}
/* --- KONUM İĞNESİ: emoji değil, kendi animasyonlu SVG'miz --- */
.hxpin{display:inline-block;flex:0 0 auto;line-height:0}
.hxpin svg{width:15px;height:19px;overflow:visible;display:block}
.hxpin .pb{fill:var(--kirmizi)}
.hxpin .pi{fill:#fff}
.hxpin .pg{fill:rgba(31,36,48,.20)}
.hxpin .pk{transform-box:fill-box;transform-origin:50% 100%;animation:hxZipla 1.9s ease-in-out infinite}
.hxpin .pg{transform-box:fill-box;transform-origin:50% 50%;animation:hxGolge 1.9s ease-in-out infinite}
.hxpin .ph{fill:none;stroke:var(--kirmizi);stroke-width:1.6;opacity:0;transform-box:fill-box;
  transform-origin:50% 50%;animation:hxHalka 1.9s ease-out infinite}
@keyframes hxZipla{0%,100%{transform:translateY(0)}45%{transform:translateY(-3.6px)}}
@keyframes hxGolge{0%,100%{transform:scale(1);opacity:.85}45%{transform:scale(.7);opacity:.45}}
@keyframes hxHalka{0%{transform:scale(.5);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}}
.hxn.burada>.hxb .hxpin{position:absolute;top:-9px;right:-7px}

/* --- dal sütunları --- */
.hxgs{display:flex;align-items:center;gap:9px;position:relative;padding-left:20px}
.hxgs::before{content:'';position:absolute;left:0;top:50%;width:20px;height:2px;background:#DDD3C3}
/* Grup kutuları kaldırıldı: yerine ince bir ray + başlık. Ekranda kutu
   içinde kutu yığılmıyor; çerçeve yalnız odaklanınca beliriyor. */
.hxg{display:flex;flex-direction:column;gap:6px;background:transparent;border:0;
  border-left:2px solid #EBE1CE;border-radius:0;padding:4px 0 4px 13px;
  transition:opacity 1.15s ease, background .35s, box-shadow .35s, border-color .35s}
/* Satır, sütunun en genişine göre yayılmasın; yoksa Fiil/Harf gibi dar dallar
   İsim kadar geniş ölçülüp kamera bomboş alanı çerçeveliyordu. */
.hxg>.hxn{align-self:flex-start}
/* --- YATAY AYIRICI ---
   Kendi dalı olan kardeş düğümlerin (Kelime · Tamlama · Cümle ve
   İsim · Fiil · Harf) arasına ince bir çizgi girer; şema bantlara
   ayrılır. Yaprak listelerde (Marife/Nekra gibi) dal olmadığı için
   çizgi de çıkmaz — orada gereksiz kalabalık olurdu.
   Çizgi AYRI BİR ÖGE: .hxn'in genişliğine karışmaz. (Düğüme border/
   stretch vermek, yukarıdaki uyarıdaki hatayı geri getiriyordu —
   dar dallar İsim kadar geniş ölçülüp kamera boş alanı çerçeveliyor.)
   İçeriği olmadığı için sütunu genişletmez, yalnız sütun kadar uzar. */
.hxay{flex:0 0 auto;align-self:stretch;height:0;min-width:0;
  border-top:2px dashed #E2D6C2;margin:10px 0 4px}
.hxgad{align-self:flex-start;font-size:15px;font-weight:900;color:#B49468;
  letter-spacing:.4px;white-space:nowrap;padding-inline-start:1px}

/* --- yakınken çevre soluklaşsın --- */
.hx.yakin .hxb,.hx.yakin .hxg{opacity:.14}
.hx.yakin .odakli .hxb,.hx.yakin .odakli .hxg,.hx.yakin .odakli>.hxb{opacity:1}
.hx.yakin .hxg.ata,.hx.yakin .hxg.odakli{opacity:1}
.hx.yakin .hxg.odakli{border-left-color:var(--kahve);background:#FBF7F1;border-radius:0 16px 16px 0;
  box-shadow:0 0 0 3.5px rgba(139,96,52,.35), 0 14px 32px rgba(139,96,52,.18)}
/* asıl konu: vurgu normal (işaretli kutunun kendi yumuşak çerçevesi) */
.hx.yakin.asilKonu .odakli>.hxb{border-color:#E9CE95;box-shadow:0 0 0 3px #FBEDD2}
.hx.yakin.asilKonu .hxg.odakli{border-left-color:#EBE1CE;box-shadow:none;background:transparent}
/* Yaklaşma kademelerinde vurgu çizgisi KALIN ve belirgin: sınıf, kameranın
   hangi bölgede olduğunu uzaktan da görsün. Asıl konuya varılınca (aşağıdaki
   .asilKonu) çizgi normale döner — konu zaten ekranın ortasında ve iğnesi var. */
.hx.yakin .odakli>.hxb{border-color:var(--kahve);
  box-shadow:0 0 0 3.5px rgba(139,96,52,.55), 0 14px 32px rgba(139,96,52,.26)}

.hxs{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.hxs .dolu{fill:currentColor;stroke:none}

@media (prefers-reduced-motion:reduce){
  .hxn.burada>.hxb::after{animation:none}
}


/* ==========================================================
   ARAYÜZ — üst şerit, alt kumanda, içindekiler
   ========================================================== */
#ustSerit{
  position:absolute;top:0;left:0;right:0;height:5px;background:rgba(0,0,0,.06);z-index:40;
}
#ilerleme{height:100%;width:0;background:linear-gradient(90deg,var(--mansub),var(--kirmizi),var(--merfu));transition:width .3s ease}

#kumanda{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;z-index:45;
  background:rgba(255,255,255,.86);backdrop-filter:blur(9px);
  border-radius:999px;padding:6px 8px;box-shadow:var(--golge);
  opacity:.30;transition:opacity .22s, transform .24s ease;
}
#kumanda:hover,#kumanda.gorunur{opacity:1}
/* Şerit açıkken kumanda şeridin ÜSTÜNE çıkar (arkasında kaybolmasın) */
body.seritli #kumanda{transform:translateX(-50%) translateY(calc(-1 * var(--seritY, 182px)))}
body.tamekran.seritli #dCikis{transform:translateY(calc(-1 * var(--seritY, 182px)))}
.kdug{
  border:0;background:transparent;cursor:pointer;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#4B5563;transition:.15s;font-family:inherit;
}
.kdug:hover{background:#EDF1F6;color:#111}
.kdug svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#sayac{font-size:13px;font-weight:800;color:#4B5563;padding:0 9px;min-width:56px;text-align:center;letter-spacing:.3px}

#icindekiler{
  position:absolute;inset:0;z-index:60;background:rgba(24,28,36,.93);
  display:none;padding:38px 46px;overflow:auto;
}
#icindekiler.acik{display:block;animation:gir .25s ease both}
#icindekiler h3{color:#fff;font-size:24px;font-weight:900;margin-bottom:18px}
#icListe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.icOge{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:15px;padding:13px 15px;color:#E7EAF0;cursor:pointer;transition:.16s;
  font-size:15px;font-weight:700;line-height:1.35;text-align:left;font-family:inherit;
}
.icOge:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.icOge.simdi{background:#fff;color:#1F2430;border-color:#fff}
.icOge .icNo{display:block;font-size:12px;font-weight:900;opacity:.6;margin-bottom:3px}

#yardim{
  position:absolute;top:14px;right:16px;z-index:44;
  background:rgba(255,255,255,.8);border-radius:12px;padding:6px 12px;
  font-size:12.5px;font-weight:700;color:#6B7280;opacity:0;transition:opacity .3s;pointer-events:none;
}
#yardim.gor{opacity:1}

/* ---------- Yazdırma ---------- */
@media print{
  @page{size:landscape;margin:0}
  body{background:#fff;overflow:visible}
  #sahne{position:static;display:block}
  #tuval{transform:none!important;width:100%;height:auto;box-shadow:none}
  .slayt{display:flex!important;position:relative;height:720px;page-break-after:always;box-shadow:none}
  .adim{opacity:1!important;transform:none!important}
  .soru .cevapAlan{max-height:none!important;opacity:1!important}
  .soru .ipucu{visibility:hidden}
  #kumanda,#dCikis,#icindekiler,#yardim,#ustSerit,.dugmeler{display:none!important}
}


/* ==========================================================
   SUNUM MERKEZİ — tek dosyada tüm sunumlar
   ----------------------------------------------------------
   · Açılışta LİSTE ekranı (bütün sunumların kartları).
   · Bir karta basınca o sunum açılır; adres çubuğunda #harfitarif.
   · ÇIKIŞ (✕) düğmesi onay ister; nereye döneceği nereden
     gelindiğine bağlıdır:
       ?don=indeks  → siteye (indeks.html#sunumPerde)
       ?don=liste   → bu dosyadaki LİSTE ekranına
     Öğretmen kategorisindeki "Sunumlar" kartı "liste" ile,
     indeksteki tek tek sunum kartları "indeks" ile gelir.
   ========================================================== */
#liste{position:absolute;inset:0;z-index:70;background:
  radial-gradient(1200px 700px at 50% -10%, #FFF3DF 0%, rgba(255,243,223,0) 60%), var(--zemin);
  /* Yan dolgu DEĞİŞKENDE: başlık şeridi onu ters işaretle geri alıp
     kenarlara yapışıyor (aşağıya bak). İki yerde ayrı sayı tutmayalım. */
  --lpad:44px; --lust:18px;
  /* Kaydırma İÇERDE (.lizgara): başlık şeridi tepede sabit kalsın. */
  display:none;flex-direction:column;padding:var(--lust) var(--lpad) 18px;overflow:hidden}
#liste.acik{display:flex;animation:gir .32s ease both}
/* Başlık satırı: dönüş tuşu · başlık · Liste/Harita anahtarı — hepsi tek satır.
   DİKEY OLARAK İNCE: başlık ile alt yazı yan yana durur, şerit ancak bir
   satır boyunda kalır; kartlara ve haritaya kalan yer bir o kadar artar. */
#liste .lbas{display:flex;align-items:center;gap:14px;margin-bottom:10px}
#liste .lbast{min-width:0;display:flex;align-items:center}
.lsite{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;
  color:#fff;background:var(--kahve);border:0;border-radius:14px;width:56px;height:56px;padding:0;cursor:pointer;
  box-shadow:var(--golge);transition:.16s}
.lsite:hover{filter:brightness(1.08);transform:translateY(-2px)}
.lsite svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#liste h2{font-size:24px;font-weight:900;color:var(--kahve);margin:0;line-height:1.25;white-space:nowrap}
/* --- Liste / Harita görünüm anahtarı (başlık satırının sağ ucunda) --- */
.lsekme{display:flex;gap:8px;margin:0;margin-inline-start:auto;flex:0 0 auto}
.lsek{font-family:inherit;font-size:15px;font-weight:900;color:#8A6412;background:#fff;
  border:1px solid #EFE3D2;border-radius:999px;padding:6px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.16s}
.lsek:hover{background:#FFF6E6;transform:translateY(-1px)}
.lsek.etkin{background:var(--kahve);border-color:var(--kahve);color:#fff}
.lsek svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.lharita{flex:1 1 auto;min-height:0;min-width:0;display:flex;margin:0 -44px -8px}
.lharita .hx{flex:1 1 auto}
#liste.harita{overflow:hidden}
#liste.harita .lizgara{display:none}
#liste:not(.harita) .lharita{display:none}

/* --- Harita üzerindeki "Sunum" düğmesi --- */
.hxsun{font-family:inherit;display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;
  background:var(--merfu);color:#fff;border:0;border-radius:9px;padding:4px 9px;cursor:pointer;
  font-size:14px;font-weight:900;box-shadow:0 4px 12px rgba(0,166,81,.28);transition:.16s}
.hxsun:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hxsun svg{width:12px;height:12px;fill:currentColor;stroke:none;flex:0 0 12px}
.hxsun.mini{padding:2px 5px;font-size:12px;margin-inline-start:5px;border-radius:7px}
/* Kutunun GENİŞLİĞİNİ belirlemesin: düğme akıştan çıkarılır (mutlak konumlu
   öge içeriğin doğal genişliğine sayılmaz), altta kendisi için ayrılan
   şeride oturur. Kutu böylece yalnız başlık kadar geniş kalır. */
.hxb.sunumlu{padding-bottom:36px}
.hxb.sunumlu > .hxsun{position:absolute;left:50%;bottom:7px;margin:0;transform:translateX(-50%)}
/* .hxsun:hover kendi transform'unu yazdığı için ortalama burada korunur */
.hxb.sunumlu > .hxsun:hover{transform:translate(-50%,-1px)}
.hxm.hxsunlu{background:#E9F8EF;color:#0A6B41;display:inline-flex;align-items:center;gap:3px}
/* ================= KÖK KUTUSU DİKEY =================
   "Temel Arapça" adı AŞAĞIDAN YUKARIYA okunur — kitap sırtı gibi.
   Yatayken kutu haritanın sol ucunda 180px'lik bir blok tutuyordu ve
   dar ekranda kenardan taşıyordu; dikeyken bir şerit kadar yer kaplıyor,
   haritanın kendisine o kadar yer kalıyor.
   rotate(180deg) şart: yalnız vertical-rl yazıyı YUKARIDAN AŞAĞIYA
   çevirir; istenen yön onun tersi. */
.hxn.d0 > .hxb{
  flex-direction:column; flex-wrap:nowrap; align-items:center; gap:12px;
  max-width:none; width:max-content; padding:18px 13px;
}
.hxn.d0 > .hxb .hxad{
  writing-mode:vertical-rl; transform:rotate(180deg);
  line-height:1.55; letter-spacing:.02em;
}
/* Kök kutusunda düğme akışta durur: kutu artık dar ve uzun, altındaki
   mutlak şerit orada yerine oturmuyordu. Yazısı da dikey ki şerit
   düğme yüzünden genişlemesin. */
.hxn.d0 > .hxb.sunumlu{ padding-bottom:18px; }
.hxn.d0 > .hxb.sunumlu > .hxsun,
.hxn.d0 > .hxb.sunumlu > .hxsun:hover{
  position:static; left:auto; bottom:auto; margin:0; transform:none;
}
.hxn.d0 > .hxb .hxsun span{ writing-mode:vertical-rl; transform:rotate(180deg); }
.hxn.d0 > .hxb .hxsun{ flex-direction:column; padding:9px 5px; gap:4px; }
/* ==========================================================
   KART LİSTESİ — KATEGORİLİ, DİKEY AKAN IZGARA
   ----------------------------------------------------------
   Eskiden bütün kartlar TEK SATIRDA dururdu ve dördüncüden
   sonrası yana kaydırılarak görülürdü; yeni bir sunum eklenince
   sağda gizli kalıyordu. Artık:
     · kartlar kategori bloklarına ayrılır (.lkume),
     · her blok kendi içinde satır satır sarar (auto-fill ızgara),
     · sığmayan kart ALT SATIRA geçer, sayfa DİKEY kaydırılır.
   Kaydırma çubuğu #liste'de değil .lizgara'da: böylece turuncu
   başlık şeridi tepede sabit kalır, yalnız kartlar kayar.
   YENİ KATEGORİ: <section class="lkume"> kopyala, başlığını yaz.
   Kart sayıları elle yazılmaz — JS her blokta .lkart sayıp
   .lksay'a yazar (aşağıda kumeSayilariniYaz).
   NOT: scrollbar-width KULLANILMAZ — o yazıldığında Chrome kendi ince
   çubuğunu koyup aşağıdaki ::-webkit kurallarını yok sayıyor ve çubuk
   neredeyse görünmez oluyordu. Kahverengi çubuk, kaydırmanın işareti.
   ========================================================== */
#liste .lizgara{display:block;flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;padding:2px 2px 14px}
#liste .lizgara::-webkit-scrollbar{width:9px}
#liste .lizgara::-webkit-scrollbar-thumb{background:#D9C9AE;border-radius:9px}
#liste .lizgara::-webkit-scrollbar-track{background:#F1EAE0;border-radius:9px}

/* AŞAĞIDA DAHA VAR işareti: kaydırma çubuğu hem macOS'ta hem dokunmatik
   tahtada ancak parmak/fare kımıldayınca görünür — liste bittiği izlenimi
   vermesin diye alt kenara yumuşak bir perde konur. Sona gelince silinir
   (JS .dahaVar sınıfını alır/atar), haritada hiç çıkmaz. */
#liste::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;z-index:3;
  background:linear-gradient(180deg,rgba(247,249,252,0),#F7F9FC 76%);
  pointer-events:none;opacity:0;transition:opacity .22s}
#liste.dahaVar::after{opacity:1}
#liste.harita::after{opacity:0}

.lkume{margin:0 0 20px}
.lkume:last-child{margin-bottom:2px}
/* Kategori başlığı: simge · ad · kısa not · ince çizgi · kart sayısı */
.lkbas{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.lkbas .lkim{font-size:19px;line-height:1;flex:0 0 auto}
.lkbas h3{font-size:17px;font-weight:900;color:var(--kahve);margin:0;
  line-height:1.2;white-space:nowrap}
.lkbas .lknot{font-size:13px;font-weight:800;color:#A99C88;white-space:nowrap}
.lkbas .lcizgi{flex:1 1 auto;min-width:12px;height:1px;background:#E9DFCE}
.lkbas .lksay{font-size:13px;font-weight:800;color:#AEB6C0;white-space:nowrap}
/* Kartlar: en az 268px, kalan yeri paylaşırlar; sığmayan alta iner. */
.lkizgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:14px;align-items:stretch}
/* Henüz sunumu olmayan kategori: kesik çizgili, tıklanmayan yer tutucu */
.lbosk{border:2px dashed #DCCFB8;border-radius:18px;background:rgba(255,255,255,.45);
  min-height:150px;padding:16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center}
.lbosk .lbi{font-size:26px;line-height:1}
.lbosk b{font-size:15px;font-weight:900;color:#9C8A6E}
.lbosk span{font-size:13px;font-weight:700;color:#B3A794;line-height:1.5}
.lkart{background:#fff;border-radius:18px;box-shadow:var(--golge);padding:12px 14px 12px;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;text-align:left;border:0;font-family:inherit;
  transition:transform .18s, box-shadow .18s}
.lkart:hover{transform:translateY(-5px);box-shadow:var(--golge2)}
.lkart .lust{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lkart .lrozet{font-size:14px;color:#8A6412;background:#FDF1D9;border-radius:999px;padding:5px 11px}
.lkart .lar{font-size:40px;font-weight:900;direction:rtl;color:var(--kahve)}
.lkart h3{font-size:19px;font-weight:900;color:var(--murekkep);line-height:1.35}
.lkart p{font-size:15px;font-weight:600;color:var(--gri);line-height:1.5}
.lkart .lalt2{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px dashed #E3E7ED}
.lkart .ladet{font-size:13px;font-weight:800;color:#AEB6C0}
.lkart .lac{font-size:15px;color:#fff;background:var(--kahve);border-radius:10px;padding:7px 14px}
/* Kartlar tek satırda yan yana değil artık alt alta diziliyor; dikey yer
   kıymetlendi. Önizleme ve yazılar bir tık toplandı ki bir ekranda bir
   kategori değil, ikincisinin kartları da yarı yarıya görünsün — kaydırma
   olduğu böylece kendiliğinden anlaşılır. */
#liste .lkart{padding:10px 13px 11px;gap:5px}
#liste .lsvg{margin:0 0 3px}
#liste .lsvg svg{width:66%}
#liste .lkart h3{font-size:18px;line-height:1.3}
#liste .lkart p{font-size:14.5px;line-height:1.45}
#liste .lkart .lalt2{padding-top:10px}

/* ==========================================================
   SİTE DOKUNUŞLARI — kidefarapca.com'un rengi ve dili
   Sunum listesi artık siteyle aynı görünür:
     · zemin  : #F7F9FC + sitenin ince mavi ızgara deseni
     · başlık : sitenin sarı→turuncu→kırmızı şeridi, altında #E53935
     · tuşlar : şeridin üstünde saydam beyaz, seçili olan dolu beyaz
   Slaytların kendi renk kodu (şemsî mavi · kamerî kırmızı · marife
   yeşil) DEĞİŞMEZ — burada yalnız kabuk siteye benzetildi.
   ========================================================== */
#liste{background:#F7F9FC;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%234D96FF" fill-opacity="0.05"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h4V0h1v5h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-5v4h5v1h-4v5h-1v-5h-4v5h-1v-5h-4v5h-1v-5h-4v5h-1v-5h-4v5H6v-1h4v-4H6v-1h4v-4H6v-1h4v-4H6v-1h4v-4H6V5z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')}
/* BAŞLIK ŞERİDİ TEPEYE YAPIŞIK, TAM GENİŞLİK.
   Eskiden 14px yuvarlatılmış, dört yanında dolgu boşluğu olan bir kutu
   gibi duruyordu — üstünde ve sağında kalan krem şerit onu "yüzen bir
   kutu" gösteriyordu. Kabın dolgusu ters marjla geri alınıp aynı ölçü
   kendi dolgusuna veriliyor: şerit kenarlara değiyor, içindekiler ise
   alttaki kartlarla aynı hizada kalıyor. */
#liste .lbas{
  background:linear-gradient(90deg,#FFC107 0%,#F39C12 50%,#EF5350 100%);
  border-bottom:2px solid #E53935;border-radius:0;
  margin:calc(-1 * var(--lust)) calc(-1 * var(--lpad)) 14px;
  padding:12px var(--lpad);
  box-shadow:0 5px 14px rgba(229,57,53,.18);
}
#liste h2{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.lsite{background:rgba(255,255,255,.22);box-shadow:none;width:38px;height:38px;border-radius:11px}
.lsite:hover{background:rgba(255,255,255,.40);filter:none}
.lsite svg{width:22px;height:22px}
.lsek{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.45);color:#fff}
.lsek:hover{background:rgba(255,255,255,.34)}
.lsek.etkin{background:#fff;border-color:#fff;color:#D84315}
/* Kartlardaki "Aç" tuşu da sitenin şeridinden renk alsın */
.lkart .lac{background:linear-gradient(90deg,#F39C12,#EF5350);box-shadow:0 4px 12px rgba(239,83,80,.28)}
.lkart:hover .lac{filter:brightness(1.06)}
.lkart:hover .lp-ekran{stroke:#F39C12}

/* Çıkış düğmesi ve onay penceresi */
/* Çıkış kumandanın içinde değil: tam ekranın SAĞ kenarında, kumandayla aynı
   hizada durur; fare kımıldayınca kumandayla birlikte belirginleşir. */
#dCikis{
  position:absolute;bottom:12px;right:14px;z-index:46;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--kahve);
  background:rgba(255,255,255,.86);backdrop-filter:blur(9px);
  box-shadow:var(--golge);opacity:.34;transition:opacity .22s, background .15s, transform .15s;
}
#dCikis:hover,#dCikis.gorunur{opacity:1}
/* Sunum listesi açıkken çıkış düğmesi yok (listenin kendi dönüş tuşu var) */
#liste.acik ~ #dCikis{display:none}
#dCikis:hover{background:#FDF1D9;transform:translateY(-2px)}
#dCikis svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
/* TAM EKRAN DEĞİLKEN (pencere modu): çıkış/geri tuşu her zaman SOL ÜSTTE ve
   tam görünür durur — dönüş yolu aranmasın, fare kımıldatmak gerekmesin.
   TAM EKRANDA (sunum başlayınca): tuş görünmez, slaytın önünü kapatmaz;
   fare kımıldayınca kumandayla birlikte sağ altta belirir. */
body:not(.tamekran) #dCikis{top:14px;left:16px;right:auto;bottom:auto;opacity:1}
body:not(.tamekran) #dCikis svg{transform:scaleX(-1)}   /* geri oku sola baksın */
body.tamekran #dCikis{opacity:0;pointer-events:none}
body.tamekran #dCikis.gorunur,body.tamekran #dCikis:hover{opacity:1;pointer-events:auto}
#onay{position:absolute;inset:0;z-index:80;background:rgba(24,28,36,.62);display:none;
  align-items:center;justify-content:center;padding:30px}
#onay.acik{display:flex;animation:gir .2s ease both}
#onay .okutu{background:#fff;border-radius:26px;box-shadow:var(--golge2);padding:34px 38px;max-width:620px;text-align:center}
#onay h3{font-size:34px;font-weight:900;color:var(--murekkep);margin-bottom:10px}
#onay p{font-size:22px;font-weight:700;color:var(--gri);line-height:1.6;margin-bottom:22px}
#onay .odug{display:flex;gap:12px;justify-content:center}
#onay button{font-family:inherit;font-size:22px;font-weight:900;border:0;border-radius:14px;
  padding:13px 30px;cursor:pointer;transition:.16s}
#onay .vaz{background:#E9EDF3;color:#414B59}
#onay .vaz:hover{background:#DCE2EA}
#onay .cik{background:var(--kirmizi);color:#fff}
#onay .cik:hover{filter:brightness(.93)}

/* --- HİÇBİR YAZI 2rem'DEN (32px) KÜÇÜK OLMASIN (Geylani) ---
   Slayt görünür olduğunda JS her ögenin hesaplanan boyunu ölçer,
   32px altındakileri 32px'e çıkarır (satır aralığı da toparlanır). */
.buyutuldu{line-height:1.45}

/* --- İÇİNDEKİLER: metin listesi değil, SLAYT ÖNİZLEMELERİ --- */
#icListe{grid-template-columns:repeat(3,1fr);gap:18px}
.icOge.onizleme{padding:0;background:rgba(255,255,255,.06);overflow:hidden;display:flex;flex-direction:column}
.onizKutu{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--zemin);border-radius:14px 14px 0 0}
.onizKutu .slayt{position:absolute;top:0;left:0;width:1280px;height:720px;transform:scale(.276);
  transform-origin:top left;display:flex!important;animation:none!important;pointer-events:none}
.onizAd{display:block;padding:10px 12px;font-size:19px;font-weight:800;color:#E7EAF0;line-height:1.35}
.onizAd b{display:inline-block;min-width:26px;color:#FFD9A0}
.icOge.simdi .onizAd{color:#1F2430}
@media (max-width:1100px){ #icListe{grid-template-columns:repeat(2,1fr)} .onizKutu .slayt{transform:scale(.36)} }

/* ==========================================================
   SUNUM KABUĞUNA DA SİTE RENGİ
   Slaytın İÇİ değişmez (şemsî mavi · kamerî kırmızı · marife
   yeşil · nekra turuncu kodu aynen durur); yalnız çevresindeki
   kumanda takımı kidefarapca.com'un dilini konuşur:
     · ilerleme çubuğu sitenin sarı→turuncu→kırmızı şeridi
     · kumandadaki her tuşun kendi rengi (siteki renkli SVG'ler gibi)
     · çıkış kırmızı, içindekiler mavi, tam ekran yeşil
   ========================================================== */
#ustSerit{background:rgba(31,36,48,.07);height:6px}
#ilerleme{
  background:linear-gradient(90deg,#FFC107 0%,#F39C12 38%,#EF5350 72%,#E53935 100%);
  box-shadow:0 0 10px rgba(239,83,80,.45);
  transition:width .45s cubic-bezier(.33,1,.68,1);
}
#kumanda{border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 26px rgba(31,36,48,.18)}
/* Her tuş kendi renginde — sitedeki renkli simge dili */
.kdug{color:#5A6472}
#dOnce{color:#F39C12} #dOnce:hover{background:#FFF3DC;color:#D9820A}
#dSonra{color:#EF5350} #dSonra:hover{background:#FFECEB;color:#D8342F}
#dIcindekiler{color:#2E86DE} #dIcindekiler:hover{background:#E7F1FD;color:#1B6FC4}
#dTam{color:#16A085} #dTam:hover{background:#E4F6F2;color:#0E7D67}
#sayac{
  color:#8A4B12;background:linear-gradient(90deg,#FFF3DC,#FFE7E5);
  border-radius:999px;padding:4px 12px;margin:0 3px;font-weight:800;
}
/* Çıkış: sitenin kırmızısı */
#dCikis{color:#E53935}
#dCikis:hover{background:#FFEBEE;color:#C62828}
/* Onay penceresindeki tuşlar da site şeridinden */
#onay .cik{background:linear-gradient(90deg,#F39C12,#EF5350)}
#onay .cik:hover{filter:brightness(1.06)}
/* Yardım ipucu ve içindekiler başlığı */
#yardim{background:rgba(255,255,255,.9);color:#7A5A2E;box-shadow:0 4px 12px rgba(31,36,48,.10)}
#yardim b{color:#EF5350}
#icindekiler h3{color:#FFD9A0}
.onizAd b{color:#FFC107}
.icOge.simdi{background:#fff;color:#1F2430;border-color:#F39C12;box-shadow:0 0 0 2px rgba(243,156,18,.55)}
.icOge.simdi .onizAd b{color:#EF5350}
#icindekiler.serit .icOge.simdi{box-shadow:0 0 0 2px rgba(243,156,18,.75)}

/* --- ESC → SLAYT ŞERİDİ: sayfalar altta yatay dizilir ---
   Esc'e basınca içindekiler ekranı kaplamaz; slaytlar küçük küçük
   ekranın altında yan yana sıralanır (sunum arkada görünmeye devam
   eder), istenen sayfaya oradan atlanır. Esc yeniden basılınca kapanır. */
#icindekiler.serit{
  inset:auto 0 0 0;padding:8px 14px 10px;overflow:visible;
  background:rgba(24,28,36,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:22px 22px 0 0;box-shadow:0 -16px 44px rgba(0,0,0,.34);
  animation:seritGir .24s ease both;
}
@keyframes seritGir{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
#icindekiler.serit h3{font-size:15px;margin:0 0 7px;opacity:.7;padding-inline-end:36px}
#icindekiler.serit #icListe{
  display:flex;grid-template-columns:none;gap:10px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.30) transparent;
}
#icindekiler.serit #icListe::-webkit-scrollbar{height:7px}
#icindekiler.serit #icListe::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
#icindekiler.serit .icOge{flex:0 0 182px;scroll-snap-align:center}
#icindekiler.serit .onizKutu{border-radius:11px 11px 0 0}
#icindekiler.serit .onizKutu .slayt{transform:scale(.140625)}   /* 180 / 1280 */
#icindekiler.serit .onizAd{padding:5px 8px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#icindekiler.serit .onizAd b{min-width:16px}
#seritKapat{display:none}
#icindekiler.serit #seritKapat{
  display:grid;place-items:center;position:absolute;top:8px;right:12px;z-index:2;
  width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.12);color:#E7EAF0;transition:.15s;
}
#icindekiler.serit #seritKapat:hover{background:rgba(255,255,255,.24)}
#seritKapat svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* --- DÜŞÜK GÜÇ / HAREKET AZALTMA: sunum kartlarındaki SVG donar ama boş kalmaz ---
   Animasyon dursa bile kart boş görünmesin diye SVG'nin SABİT hâli
   gösterilir: ilk slayt yerinde, imleç yerinde, projeksiyon ışığı açık. */
html.dusuk-guc .lp-slayt,
html.dusuk-guc .lp-imlec circle,
html.dusuk-guc .lp-isik path{animation:none!important}
html.dusuk-guc .lp-slayt.s1{opacity:1;transform:none}
html.dusuk-guc .lp-slayt.s2{opacity:0}
html.dusuk-guc .lp-imlec circle{transform:none;opacity:.9}
html.dusuk-guc .lp-isik path{opacity:.14}
html.dusuk-guc .hxn.burada>.hxb::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .lp-slayt,.lp-imlec circle,.lp-isik path{animation:none!important}
  .lp-slayt.s1{opacity:1;transform:none}
  .lp-slayt.s2{opacity:0}
  .lp-imlec circle{transform:none;opacity:.9}
  .lp-isik path{opacity:.14}
}

/* ==========================================================
   KALIN YAZI YOK (Geylani)
   Bütün metin normal ağırlıkta; ayrıca font-synthesis:none ile
   tarayıcının kendi "sahte kalın"ını üretmesi de engellendi
   (Arakom'un kalın kesimi olmadığında tarayıcı harfleri kendi
   şişiriyordu — bu satır onu kapatır).
   ========================================================== */
html, body, #tuval, #tuval *, #liste, #liste *, #onay, #onay *,
#kumanda, #kumanda *, #icindekiler, #icindekiler *, b, strong, h1, h2, h3, h4, th {
  font-weight: 400 !important;
  font-synthesis: none !important;
  -webkit-font-synthesis: none !important;
  font-synthesis-weight: none !important;
}

/* --- Liste kartlarındaki ANİMASYONLU SUNUM SVG'si --- */
.lsvg{display:block;margin:2px 0 6px}
.lsvg svg{width:82%;height:auto;display:block;margin:0 auto;overflow:visible}
.lp-ekran{fill:#fff;stroke:#D9E1EA;stroke-width:2}
.lp-golge{fill:rgba(31,36,48,.10);transform:translate(0,4px)}
.lp-ayak,.lp-taban{fill:#C9D3DE}
.lp-ar{font-family:'Arakom',serif;font-size:26px;text-anchor:end;direction:rtl}
.lp-ar2{font-family:'Arakom',serif;font-size:17px;text-anchor:middle;direction:rtl}
.lp-slayt{opacity:0}
.lp-slayt.s1{animation:lpS1 6s ease-in-out infinite}
.lp-slayt.s2{animation:lpS2 6s ease-in-out infinite}
@keyframes lpS1{0%,42%{opacity:1;transform:translateX(0)}50%,92%{opacity:0;transform:translateX(-16px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lpS2{0%,42%{opacity:0;transform:translateX(16px)}50%,92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(16px)}}
.lp-imlec circle{fill:#F39C12;animation:lpTik 6s ease-in-out infinite}
@keyframes lpTik{0%,38%{transform:translate(0,0);opacity:.9}44%{transform:translate(-4px,-3px);opacity:1}
  48%,88%{transform:translate(-42px,-16px);opacity:.9}94%,100%{transform:translate(0,0);opacity:.9}}
.lp-isik path{fill:#F39C12;opacity:.10;animation:lpIsik 6s ease-in-out infinite}
@keyframes lpIsik{0%,100%{opacity:.10}50%{opacity:.20}}
.lkart:hover .lp-ekran{stroke:var(--kahve)}


/* ==========================================================
   TECVİD — KONUYA ÖZEL GÖRÜNÜM
   (ortak kabuk yukarıda; burası yalnız bu sunumun parçaları)
   ========================================================== */

/* --- içerik slaytlarının zemini: soluk sekiz köşeli yıldız ağı --- */
.slayt:not(.koyu){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23B8995A' stroke-opacity='.13' stroke-width='1.3'%3E%3Crect x='34' y='34' width='28' height='28'/%3E%3Crect x='34' y='34' width='28' height='28' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 48h14M82 48h14M48 0v14M48 82v14'/%3E%3C/g%3E%3Cg fill='%23B8995A' fill-opacity='.16'%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='96' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='96' r='2.2'/%3E%3Ccircle cx='96' cy='96' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 96px;
}
/* üst kenarda bölüm renginde ince şerit */
.slayt:not(.koyu)::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,var(--vr) 0%,var(--vr-o) 60%,transparent 100%);opacity:.9}

/* ================= BAŞLIK (kural adı) ================= */
.kb{display:flex;align-items:center;gap:20px;margin:4px 0 12px;flex:0 0 auto}
.kb-no{flex:0 0 64px;height:64px;border-radius:20px;display:grid;place-items:center;position:relative;
  font-size:40px;line-height:1;color:#fff;background:linear-gradient(150deg,var(--vr),var(--vr-k));
  box-shadow:0 12px 24px var(--vr-g)}
.kb-no::after{content:'';position:absolute;inset:-6px;border-radius:26px;border:2px dashed var(--vr-o)}
.kb-no svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kb.gor .kb-no{animation:rozetGel .8s cubic-bezier(.3,1.6,.45,1) both}
.kb.gor .kb-no::after{animation:donHalka 14s linear infinite}
@keyframes rozetGel{from{transform:scale(.3) rotate(-140deg);opacity:0}to{transform:none;opacity:1}}
@keyframes donHalka{to{transform:rotate(360deg)}}
.kb-ad{min-width:0;display:flex;flex-direction:column}
.kb h2{font-size:48px;line-height:1.1;color:var(--vr);white-space:nowrap}
.kb-an{font-size:32px;line-height:1.2;color:#6B7280;margin-top:2px}
.kb-bolum{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font-size:32px;line-height:1.2;color:var(--vr);background:rgba(255,255,255,.75);
  border:2px solid var(--vr-o);border-radius:999px;padding:5px 22px 5px 16px}
.kb-bolum i{width:14px;height:14px;border-radius:50%;background:var(--vr);box-shadow:0 0 0 4px var(--vr-o);flex:0 0 14px}

/* ================= METİN KUTULARI ================= */
.govde{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px}
.govde.ortala{justify-content:center}
.kosul{font-size:34px;line-height:1.4;color:#2B3340;background:#fff;border-radius:22px;padding:9px 24px;
  box-shadow:var(--golge);border-left:10px solid var(--vr)}
.hukum{display:flex;align-items:center;gap:26px;font-size:34px;line-height:1.42;color:var(--vr-k);
  background:var(--vr-a);border:2px solid var(--vr-o);border-radius:22px;padding:10px 26px}
.hukum .hk{flex:1 1 auto;min-width:0}
.hukum .olcerler{flex:0 0 auto}
.tanim{font-size:32px;line-height:1.42;color:#374151;background:#FFFDF6;border:2px dashed #E4D6B4;border-radius:20px;padding:10px 24px}
.tanim .t{color:var(--vr-k)}
.t{color:var(--vr)}
.tk{color:var(--tk)} .ty{color:var(--ty)} .ts{color:#9AA4B1}
.ar.i{font-size:1.18em;line-height:1;vertical-align:-.08em;margin:0 .12em}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ucsutun{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* "MİSÂL" etiketi */
.misal{display:inline-flex;align-items:center;gap:12px;font-size:32px;line-height:1;letter-spacing:4px;color:var(--vr);
  margin:0 0 4px 6px}
.misal::before{content:'';width:14px;height:14px;background:var(--vr);transform:rotate(45deg);border-radius:3px}

/* ================= HARF ÇİPLERİ ================= */
.cipler{display:flex;flex-direction:row-reverse;justify-content:center;flex-wrap:wrap;gap:12px}
.cip{min-width:74px;height:74px;padding:0 10px;border-radius:20px;display:grid;place-items:center;
  font-size:48px;line-height:1;color:var(--vr-k);background:#fff;border:3px solid var(--vr-o);
  box-shadow:0 6px 14px var(--vr-g);direction:rtl}
.cip.daire{border-radius:50%;min-width:66px;height:66px;font-size:40px}
.cip.kucuk{min-width:60px;height:60px;font-size:38px;border-radius:16px}
.adim.gor .cip, .cipler.hep .cip{animation:cipGel .6s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes cipGel{from{transform:scale(.2) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.cipler.nabizli .cip{animation:cipGel .6s cubic-bezier(.3,1.7,.5,1) both, cipNabiz 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 70ms), calc(.8s + var(--i,0) * 180ms)}
@keyframes cipNabiz{0%,70%,100%{transform:none;box-shadow:0 6px 14px var(--vr-g)}80%{transform:translateY(-6px) scale(1.06);box-shadow:0 14px 24px var(--vr-g)}}

/* ================= UZATMA ÖLÇER (elif) =================
   Her dilim bir ELİF: dikey bir çubuk, alttan dolar. Sağdan sola
   (Arapça okuma yönünde) sırayla dolar, dolu bekler, yeniden başlar. */
.olcerler{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.olcer{display:flex;align-items:center;gap:14px;font-size:32px;line-height:1.1;color:var(--vr-k);white-space:nowrap}
.olcer .ol-ad{min-width:108px;text-align:right;color:#6B7280}
.olcer .ol-say{min-width:120px}
.ol-ray{display:inline-flex;flex-direction:row-reverse;gap:9px;align-items:flex-end;padding:4px 10px;
  background:rgba(255,255,255,.7);border-radius:14px;border:2px solid var(--vr-o)}
.ol-ray i{position:relative;display:block;width:15px;height:44px;border-radius:8px;background:var(--vr-o);overflow:hidden}
.ol-ray i::before{content:'';position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(180deg,var(--vr) 0%,var(--vr-k) 100%);transform:scaleY(0);transform-origin:50% 100%}
.ol-ray i.yarim::after{content:'';position:absolute;left:0;right:0;top:50%;border-top:2px dashed #fff;opacity:.9}
.olcer.caiz .ol-ray i::before{background:repeating-linear-gradient(135deg,var(--vr) 0 6px,var(--vr-k) 6px 12px)}
.olcer.caiz .ol-ad{color:#8A95A3}
/* tetik: yalnız görünürken ve baştan başlasın */
.adim.gor .ol-ray i::before, .ol-hep .ol-ray i::before{animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.olcer.n1 .ol-ray i:nth-child(1)::before{animation-name:o1a;animation-duration:2s}
.olcer.n2 .ol-ray i:nth-child(1)::before{animation-name:o2a;animation-duration:2.6s}
.olcer.n2 .ol-ray i:nth-child(2)::before{animation-name:o2b;animation-duration:2.6s}
.olcer.n4 .ol-ray i:nth-child(1)::before{animation-name:o4a;animation-duration:3.8s}
.olcer.n4 .ol-ray i:nth-child(2)::before{animation-name:o4b;animation-duration:3.8s}
.olcer.n4 .ol-ray i:nth-child(3)::before{animation-name:o4c;animation-duration:3.8s}
.olcer.n4 .ol-ray i:nth-child(4)::before{animation-name:o4d;animation-duration:3.8s}
.olcer.ng .ol-ray i:nth-child(1)::before{animation-name:oga;animation-duration:2.3s}
.olcer.ng .ol-ray i:nth-child(2)::before{animation-name:ogb;animation-duration:2.3s}
.adim:not(.gor) .ol-ray i::before{animation:none!important}
@keyframes o1a{0%{transform:scaleY(0)}30%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o2a{0%{transform:scaleY(0)}23%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o2b{0%,23%{transform:scaleY(0)}46%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o4a{0%{transform:scaleY(0)}15.8%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o4b{0%,15.8%{transform:scaleY(0)}31.6%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o4c{0%,31.6%{transform:scaleY(0)}47.4%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes o4d{0%,47.4%{transform:scaleY(0)}63.2%,94%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes oga{0%{transform:scaleY(0)}26%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes ogb{0%,26%{transform:scaleY(0)}39%,92%{transform:scaleY(.5)}100%{transform:scaleY(0)}}

/* ================= MORPH SAHNESİ =================
   Glifler durumdan duruma kayar; eşi olmayanlar söner/belirir. */
.sahne{position:relative;background:#fff;border-radius:26px;box-shadow:var(--golge);padding:8px 18px 10px;
  cursor:pointer;border:2px solid transparent;transition:border-color .3s}
.sahne:hover{border-color:var(--vr-o)}
.sahne-svg{display:block;width:100%;height:auto;overflow:visible}
.glifler{position:absolute;width:0;height:0;overflow:hidden}
.iz{transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .75s ease,fill .6s ease,filter .6s ease}
.iz use{transform-box:fill-box;transform-origin:50% 62%}
.iz.v use{animation:nabiz 1s ease-in-out infinite}
.iz.h{filter:blur(2.5px)}
.iz.z use{animation:zipla .9s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes nabiz{0%,100%{transform:none}50%{transform:scale(1.22)}}
@keyframes zipla{0%,55%,100%{transform:none}15%{transform:translateY(-16%) rotate(-4deg)}30%{transform:translateY(3%) rotate(3deg)}42%{transform:translateY(-5%)}}
.et{font-family:'Arakom',serif;fill:#4B5563}
.et-cizgi{stroke:var(--tk);stroke-width:2.6;stroke-dasharray:7 6;fill:none;stroke-linecap:round}
.et-uc{fill:var(--tk)}
.etiket,.efekt{opacity:0;transition:opacity .55s ease}
.etiket.gor,.efekt.gor{opacity:1}
.etiket.gor .et-cizgi{animation:cizgiAk 1.4s linear infinite}
@keyframes cizgiAk{to{stroke-dashoffset:-26}}
/* gunne: genizden gelen ses halkaları */
.gunne .gh{fill:none;stroke:var(--vr);stroke-width:4.5;transform-box:fill-box;transform-origin:center;opacity:0}
.gunne.gor .gh{animation:gh 1.9s ease-out infinite}
.gunne.gor .g1{animation-delay:.63s} .gunne.gor .g2{animation-delay:1.26s}
@keyframes gh{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.85);opacity:0}}
.carpi circle{fill:rgba(215,25,31,.07);stroke:var(--tk);stroke-width:5}
.carpi path{stroke:var(--tk);stroke-width:8;stroke-linecap:round;fill:none}
.carpi{transform-box:fill-box;transform-origin:center}
.carpi.gor{animation:damga .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes damga{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
.isik circle{fill:var(--vr-g);opacity:.45;transform-box:fill-box;transform-origin:center}
.isik.gor circle{animation:isik 1.6s ease-in-out infinite}
@keyframes isik{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.08);opacity:1}}
.kilit rect{fill:var(--vr)} .kilit .kb{fill:none;stroke:var(--vr);stroke-width:6;stroke-linecap:round} .kilit .kd{fill:#fff}
.kilit.gor{animation:kilitGel .7s cubic-bezier(.3,1.7,.5,1) both}
@keyframes kilitGel{from{transform:translateY(-30px);opacity:0}to{opacity:1}}
.dalga path{fill:none;stroke:var(--vr);stroke-width:5;stroke-linecap:round;opacity:.2}
.dalga.gor path{animation:dalga 1.4s ease-in-out infinite}
.dalga.gor .d1{animation-delay:.2s} .dalga.gor .d2{animation-delay:.4s}
@keyframes dalga{0%,100%{opacity:.15}50%{opacity:1}}
.ayrac path{fill:none;stroke:var(--vr);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ayrac text{fill:var(--vr)}
.dur rect{fill:var(--tk)} .dur text{fill:#fff}
.dur.gor{animation:damga .5s cubic-bezier(.3,1.7,.5,1) both}
.dur{transform-box:fill-box;transform-origin:center}
.kutu-g rect{fill:var(--vr-a);stroke:var(--vr-o);stroke-width:3}
.kutu-g text{fill:var(--vr-k)}

/* durum yazısı (sahnenin altında, duruma göre değişir) */
.sahne-notlar{display:grid;justify-items:center;align-items:center;min-height:50px}
.snot{grid-area:1/1;font-size:32px;line-height:1.25;color:var(--vr-k);opacity:0;transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;text-align:center;white-space:nowrap}
.snot.gor{opacity:1;transform:none}
.snot b{color:var(--tk)}
.snot .ar{font-size:1.2em;line-height:1}
.tekrar{position:absolute;top:10px;right:12px;z-index:3;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--vr-a);color:var(--vr);display:grid;place-items:center;opacity:.6;transition:.2s}
.tekrar:hover{opacity:1;transform:rotate(-40deg)}
.tekrar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sahne .sh-bas{position:absolute;top:10px;left:18px;z-index:2}

/* ================= KELİME KARTLARI (sabit SVG) ================= */
.kel{display:block;overflow:visible}
.kel .gl{transform-box:fill-box;transform-origin:50% 62%}
.kel .zipla{animation:zipla 1.1s cubic-bezier(.3,1.6,.5,1) infinite}
.kel .nabiz{animation:nabiz 1.3s ease-in-out infinite}
.kel .hayalet{opacity:.3;filter:blur(2.5px)}
.kkart{background:#fff;border-radius:22px;box-shadow:var(--golge);padding:10px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.kkart .kk-ad{font-size:32px;color:var(--vr);line-height:1.2;text-align:center}
.kkart .kk-alt{font-size:32px;color:#6B7280;line-height:1.2;text-align:center}
.kelimeler{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
.nokta{width:12px;height:12px;border-radius:50%;background:var(--altin);flex:0 0 12px}

/* ================= DURAK TABLOSU (geçildiğinde → durulduğunda) ================= */
.dtablo{display:grid;grid-template-columns:1fr 110px 1fr;gap:9px 8px;align-items:stretch}
.dt-bas{font-size:32px;line-height:1.2;color:#fff;background:linear-gradient(150deg,var(--vr),var(--vr-k));
  border-radius:16px;text-align:center;padding:3px 10px;display:flex;align-items:center;justify-content:center;gap:12px}
.dt-bas.acik{background:var(--vr-o);color:var(--vr-k)}
.dt-bas svg{width:34px;height:34px}
.dt-h{background:#fff;border:2px solid var(--vr-o);border-radius:18px;display:grid;place-items:center;min-height:78px;padding:2px 10px}
.dt-h.son{background:var(--vr-a)}
.dt-ok{display:grid;place-items:center}
.dt-ok svg{width:96px;height:40px;overflow:visible}
.dt-ok path{fill:none;stroke:var(--vr);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120}
.adim.gor .dt-ok path{animation:okCiz .7s .25s ease forwards}
@keyframes okCiz{to{stroke-dashoffset:0}}
.adim.gor .dt-h.son .kel{animation:sonGel .6s .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes sonGel{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.dur-isaret{display:inline-grid;place-items:center;width:44px;height:44px;flex:0 0 44px}
.dur-isaret svg{width:44px;height:44px}
.dt-bas .dur-isaret{animation:durNabiz 1.8s ease-in-out infinite}
@keyframes durNabiz{0%,100%{transform:none}50%{transform:scale(1.14)}}

/* ================= OKUNUŞ / YAZILIŞ (PDF şeması) ================= */
.oy{display:grid;gap:10px}
.oy-satir{display:grid;grid-template-columns:1fr 70px 1fr 1.25fr;gap:10px;align-items:stretch}
.oy-bas{font-size:32px;line-height:1.2;text-align:center;color:#fff;border-radius:14px;padding:4px 8px}
.oy-bas.o{background:linear-gradient(150deg,var(--vr),var(--vr-k))}
.oy-bas.y{background:#5F7896}
.oy-h{border-radius:18px;display:grid;place-items:center;min-height:88px;padding:2px 8px}
.oy-h.o{background:var(--vr-a);border:2px solid var(--vr-o)}
.oy-h.y{background:#EEF3F9;border:2px solid #CFDBEA}
.oy-ok{display:grid;place-items:center;font-size:40px;color:var(--vr)}
.oy-ok svg{width:60px;height:34px;overflow:visible}
.oy-ok path{fill:none;stroke:var(--vr);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90}
.adim.gor .oy-ok path{animation:okCiz .6s .35s ease forwards}

/* ================= BÖLÜM KAPAKLARI ================= */
.slayt.koyu{color:#fff}
.slayt.bolum{padding:0;overflow:hidden;
  background:radial-gradient(1000px 640px at 80% 22%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%),
             linear-gradient(135deg,var(--vr) 0%,var(--vr-k) 100%)}
.slayt.bolum.aktif{animation:perde 1s cubic-bezier(.7,0,.2,1) both}
@keyframes perde{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(150% at 50% 55%)}}
.bl-desen{position:absolute;right:-170px;top:-150px;width:760px;height:760px;opacity:.14;animation:yavasDon 90s linear infinite}
.bl-desen2{position:absolute;left:-120px;bottom:-190px;width:460px;height:460px;opacity:.10;animation:yavasDon 70s linear infinite reverse}
.bl-desen path,.bl-desen2 path,.bl-desen circle,.bl-desen2 circle{fill:none;stroke:#fff;stroke-width:1.6}
@keyframes yavasDon{to{transform:rotate(360deg)}}
.bl-ic{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;
  padding:30px 70px 176px;gap:30px}
.bl-ust{font-size:32px;letter-spacing:6px;color:rgba(255,255,255,.78)}
.bl-ust b{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-right:14px;
  background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.45);letter-spacing:0;color:#fff;font-size:32px}
.bl-ad{font-size:76px;line-height:1.05;margin:14px 0 12px;text-shadow:0 4px 18px rgba(0,0,0,.18)}
.bl-alt{font-size:34px;line-height:1.35;color:rgba(255,255,255,.88);max-width:640px}
.bl-cipler{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bl-cipler span{font-size:32px;line-height:1.2;padding:5px 18px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.35);color:#fff}
.adim.gor .bl-cipler span{animation:cipGel .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.25s + var(--i,0) * 90ms)}
.bl-sag{display:grid;place-items:center;position:relative}
.bl-terim{width:100%;max-height:330px}
.bl-terim .kel{width:100%;height:auto;max-height:330px}
.bl-halka{position:absolute;width:380px;height:380px;border-radius:50%;border:2px dashed rgba(255,255,255,.28);animation:yavasDon 40s linear infinite}
/* kaligrafi: önce kontur çizilir, sonra altınla dolar */
.ciz use{fill:var(--altin2)!important;fill-opacity:0;stroke:#FFF3D6;stroke-width:1.1;stroke-dasharray:100;stroke-dashoffset:100}
.slayt.aktif .ciz use{animation:konturCiz 2.2s ease forwards, altinDol 1s 1.7s ease forwards}
@keyframes konturCiz{to{stroke-dashoffset:0}}
@keyframes altinDol{to{fill-opacity:1;stroke-opacity:.35}}

/* bölümler şeridi: 5 durak, bulunduğumuz yerde iğne */
.bl-yol{position:absolute;left:70px;right:70px;bottom:78px;z-index:3;height:86px}
.bl-yol .yol-cizgi{position:absolute;left:30px;right:30px;top:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.bl-yol .yol-dolu{position:absolute;left:30px;top:28px;height:4px;border-radius:2px;background:#fff;width:0;transition:width 1.2s .4s ease}
.slayt.aktif .bl-yol .yol-dolu{width:var(--dolu)}
.bl-yol .duraklar{position:absolute;inset:0;display:flex;justify-content:space-between}
.durak{display:flex;flex-direction:column;align-items:center;gap:8px;width:170px;position:relative}
.durak i{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:32px;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(2px)}
.durak.gecti i{background:rgba(255,255,255,.3)}
.durak.burada i{background:#fff;color:var(--vr);border-color:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.22)}
.durak span{font-size:32px;line-height:1;white-space:nowrap;color:rgba(255,255,255,.8);display:none}
.durak.burada span{display:block;color:#fff}
.durak .hxpin{position:absolute;top:-34px;left:50%;transform:translateX(-50%)}
.durak .hxpin svg{width:26px;height:33px}

/* ================= KAPAK ================= */
.slayt.kapak{padding:0;overflow:hidden;
  background:radial-gradient(900px 560px at 50% 38%, #2C4E7A 0%, rgba(44,78,122,0) 70%),
             linear-gradient(160deg,#15263F 0%,#0C1728 100%)}
.kp-desen{position:absolute;inset:-40px;opacity:.2;animation:kaydir 60s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E7CD8E' stroke-width='1.2'%3E%3Crect x='42' y='42' width='36' height='36'/%3E%3Crect x='42' y='42' width='36' height='36' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3Cpath d='M0 60h24M96 60h24M60 0v24M60 96v24'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px}
@keyframes kaydir{to{background-position:240px 120px}}
.kp-yildiz{position:absolute;width:640px;height:640px;left:50%;top:44%;margin:-320px 0 0 -320px;opacity:.16;animation:yavasDon 120s linear infinite}
.kp-yildiz path,.kp-yildiz circle{fill:none;stroke:#E7CD8E;stroke-width:1.2}
.kp-ic{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 60px 40px}
.kp-terim{width:520px;height:230px;display:flex;align-items:center;justify-content:center}
.kp-terim .kel{max-width:100%;height:100%;width:auto}
.kp-ad{font-size:92px;letter-spacing:22px;margin:4px 0 0 22px;color:#fff;line-height:1.1;
  background:linear-gradient(90deg,#fff 0%,#FFE9B0 45%,#fff 55%,#fff 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:parilti 5s ease-in-out infinite}
@keyframes parilti{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.kp-alt{font-size:34px;color:rgba(255,255,255,.85);margin-top:6px}
.kp-susleme{width:420px;height:30px;margin:14px auto 10px;display:block}
.kp-susleme path,.kp-susleme circle{stroke:#E7CD8E;fill:none;stroke-width:1.6}
.kp-susleme .dolu{fill:#E7CD8E;stroke:none}
.kp-cipler{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.kp-cipler span{font-size:32px;line-height:1.2;padding:6px 20px;border-radius:999px;color:#fff;border:1.5px solid rgba(231,205,142,.55);background:rgba(231,205,142,.10)}
.adim.gor .kp-cipler span{animation:cipGel .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.5s + var(--i,0) * 110ms)}
.kp-basla{margin-top:18px;text-align:center;font-size:32px;color:rgba(255,255,255,.62)}
.kp-basla b{color:#E7CD8E}
.kp-imza{position:absolute;bottom:26px;left:34px;font-size:32px;color:#E7CD8E;z-index:3;opacity:.9}
.pdf-dug{display:inline-flex;align-items:center;gap:12px;font-size:32px;line-height:1;text-decoration:none;
  color:#1F2430;background:linear-gradient(90deg,#FFE7A8,#E7CD8E);border-radius:999px;padding:12px 26px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);transition:.2s;white-space:nowrap}
.pdf-dug:hover{transform:translateY(-3px);filter:brightness(1.05)}
.pdf-dug svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kp-pdf{position:absolute;bottom:24px;right:30px;z-index:4}
/* yıldız tozu */
.toz{position:absolute;inset:0;pointer-events:none;z-index:1}
.toz i{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE7A8;box-shadow:0 0 10px 2px rgba(255,231,168,.7);
  opacity:0;animation:toz 5s ease-in-out infinite}
@keyframes toz{0%{opacity:0;transform:translateY(20px) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1)}}

/* ================= KAPANIŞ ================= */
.slayt.son .kp-terim{width:560px;height:250px}
.son-dua{font-size:34px;color:rgba(255,255,255,.88);margin-top:4px}
.son-marka{font-size:40px;color:#E7CD8E;margin-top:14px}
.son-site{font-size:32px;color:rgba(255,255,255,.7)}
.son-dug{margin-top:20px}

/* ================= 28 HARF → 5 KURAL ================= */
.harf-sahne .kutu-g rect{fill:var(--vr-a);stroke:var(--vr-o);stroke-width:3}
.harf-sahne .kutu-g .kad{fill:var(--vr-k);font-family:'Arakom',serif}
.harf-sahne .kutu-g.k1{--vr:#7E3A74;--vr-a:#F7ECF5;--vr-o:#E6C9E0;--vr-k:#55204E}
.harf-sahne .kutu-g.k2{--vr:#2F5D8A;--vr-a:#EAF1F8;--vr-o:#C9D9EA;--vr-k:#1C3C5E}
.harf-sahne .kutu-g.k3{--vr:#B45309;--vr-a:#FDF2E6;--vr-o:#F5D6B0;--vr-k:#7C3905}
.harf-sahne .kutu-g.k4{--vr:#2E7D32;--vr-a:#EAF5EA;--vr-o:#C8E6C9;--vr-k:#1B5620}
.harf-sahne .kutu-g.k5{--vr:#0F766E;--vr-a:#E7F4F1;--vr-o:#BFE3DB;--vr-k:#0B4F4A}
.harf-sahne .kutu-g{transition:opacity .6s ease}

/* ================= AKIŞ (sâkin mîm: sonra ne geliyor?) ================= */
.akis{position:relative;flex:1 1 auto;min-height:0}
.akis svg.akis-ciz{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.akis-ciz path{fill:none;stroke:var(--vr);stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.akis-ciz path.gor{animation:okCiz 1s ease forwards}
.akis-kok{position:absolute;left:50%;top:0;transform:translateX(-50%);width:230px;height:130px;border-radius:30px;
  background:linear-gradient(150deg,var(--vr),var(--vr-k));color:#fff;display:grid;place-items:center;box-shadow:0 16px 30px var(--vr-g)}
.akis-kok .kel{height:92px;width:auto}
.akis-dal{position:absolute;top:220px;width:360px;background:#fff;border-radius:24px;box-shadow:var(--golge);
  border-top:10px solid var(--vr);padding:12px 18px 14px;text-align:center}
.akis-dal .ad-kal{font-size:34px;line-height:1.2;color:var(--vr-k)}
.akis-dal .gelen{display:flex;justify-content:center;align-items:center;gap:10px;font-size:32px;color:#6B7280;margin:8px 0}
.akis-dal .gelen .cip{min-width:62px;height:62px;font-size:40px}
.akis-dal .kel{margin:0 auto;height:64px;width:auto}

/* ================= BİL BAKALIM (çevrilen kartlar) ================= */
.soru-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;flex:1 1 auto;min-height:0}
.soru{perspective:1200px;cursor:pointer;min-height:0}
.soru .s-ic{position:relative;height:100%;transition:transform .8s cubic-bezier(.3,1.25,.45,1);transform-style:preserve-3d}
.soru.acik .s-ic{transform:rotateY(180deg)}
.soru .s-on,.soru .s-arka{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 10px;text-align:center}
.soru .s-on{background:#fff;box-shadow:var(--golge);border:2px solid #EFE7D6}
.soru .s-on .no{position:absolute;top:10px;left:14px;font-size:32px;line-height:1;color:#B8995A}
.soru .s-on .kel{height:74px;width:auto;max-width:100%}
.soru .s-on .ipucu{font-size:32px;color:#B7BFCA;line-height:1}
.soru .s-arka{transform:rotateY(180deg);color:#fff;background:linear-gradient(150deg,var(--sr,#7E3A74),var(--sr2,#55204E));box-shadow:var(--golge2)}
.soru .s-arka .cvp{font-size:34px;line-height:1.15}
.soru .s-arka .neden{font-size:32px;line-height:1.1;opacity:.9;direction:rtl}
.soru:hover .s-on{border-color:#E4D2A8;transform:translateY(-3px)}
.soru-ust{display:flex;align-items:center;gap:14px;margin:-4px 0 12px}
.soru-ust .yonerge{font-size:32px;color:#4B5563;flex:1 1 auto}
.mdug{border:0;cursor:pointer;font-size:32px;line-height:1;padding:10px 22px;border-radius:999px;background:#EDE7DA;color:#4B5563;transition:.16s}
.mdug:hover{background:#E2D9C6}
.mdug.ana{background:var(--lac);color:#fff}

/* ================= ÖZET ================= */
.ozet-tablo{display:grid;grid-template-columns:1.05fr 1.5fr 1.35fr;gap:8px;font-size:32px;line-height:1.2}
.ozet-tablo .ob{background:linear-gradient(150deg,var(--vr),var(--vr-k));color:#fff;padding:8px 14px;border-radius:14px}
.ozet-tablo .oh{background:#fff;padding:8px 14px;border-radius:14px;box-shadow:0 3px 10px rgba(31,36,48,.06);display:flex;align-items:center;gap:12px}
.ozet-tablo .oh.ad{color:var(--vr-k);background:var(--vr-a)}
.ozet-tablo .oh .mini{display:inline-flex;flex-direction:row-reverse;gap:4px;margin-left:auto}
.ozet-tablo .oh .mini i{width:9px;height:26px;border-radius:5px;background:var(--vr)}
.ozet-tablo .oh .mini i.c{background:repeating-linear-gradient(135deg,var(--vr) 0 4px,var(--vr-o) 4px 8px)}
.ozet-tablo .oh .mini i.y{height:13px;align-self:flex-end}
.ozet-tablo .satir{display:contents}
.ozet5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;flex:1 1 auto;min-height:0}
.oz{background:#fff;border-radius:22px;box-shadow:var(--golge);overflow:hidden;display:flex;flex-direction:column}
.oz .oz-bas{padding:10px 8px;text-align:center;color:#fff;font-size:32px;line-height:1.15;background:linear-gradient(150deg,var(--oz),var(--oz2));min-height:92px;display:grid;place-items:center}
.oz .oz-harf{font-size:40px;line-height:1.5;text-align:center;color:var(--oz);direction:rtl;padding:10px 8px 4px;flex:1 1 auto;display:grid;place-items:center}
.oz .oz-harf.cok{font-size:32px;line-height:1.35}
.oz .oz-sonuc{margin:0 10px 12px;padding:8px 8px;border-radius:14px;background:var(--oz-a);color:var(--oz2);font-size:32px;line-height:1.15;text-align:center}
.oz.o1{--oz:#7E3A74;--oz2:#55204E;--oz-a:#F7ECF5}
.oz.o2{--oz:#2F5D8A;--oz2:#1C3C5E;--oz-a:#EAF1F8}
.oz.o3{--oz:#B45309;--oz2:#7C3905;--oz-a:#FDF2E6}
.oz.o4{--oz:#2E7D32;--oz2:#1B5620;--oz-a:#EAF5EA}
.oz.o5{--oz:#0F766E;--oz2:#0B4F4A;--oz-a:#E7F4F1}

/* ================= AĞIZ / MAHREÇ ÇİZİMİ ================= */
.agiz{display:block;width:100%;height:auto;overflow:visible}
.agiz .ten{fill:#FFF6EA;stroke:#C9A77A;stroke-width:3}
.agiz .ic{fill:#F9D9D2;stroke:#D59C8F;stroke-width:2.5}
.agiz .dil{fill:#EE9A9A;stroke:#C86B6B;stroke-width:2.5}
.agiz .dis{fill:#fff;stroke:#C9C2B6;stroke-width:2}
.agiz .burun-yol{fill:#FBE9E4;stroke:#D8B0A5;stroke-width:2}
.agiz .bolge{fill:var(--vr);opacity:0;transform-box:fill-box;transform-origin:center}
.agiz .bolge.gor{animation:bolge 1.6s ease-in-out infinite}
@keyframes bolge{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.75;transform:scale(1.15)}}
.agiz .ses path{fill:none;stroke:var(--vr);stroke-width:4;stroke-linecap:round;opacity:0}
.agiz .ses.gor path{animation:dalga 1.3s ease-in-out infinite}
.agiz .ses.gor path:nth-child(2){animation-delay:.18s} .agiz .ses.gor path:nth-child(3){animation-delay:.36s}
.agiz .etk{font-family:'Arakom',serif;fill:var(--vr-k)}
.agiz .ucan{font-family:'Arakom',serif;fill:var(--vr);opacity:0}
.agiz .ucan.gor{animation:ucan 3.6s ease-out infinite}
@keyframes ucan{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-150px,-40px) scale(1.1)}}

/* ================= HARİTA SLAYTI ================= */
.hxKutu .hx-pencere{border-radius:18px;background:rgba(255,255,255,.55)}

/* ================= DÜŞÜK GÜÇ / HAREKET AZALTMA =================
   Süsleme durur, şekil tamamlanmış hâliyle sabit kalır; slayt ve
   sahne geçişleri anlık olur (durum değişikliği yine çalışır). */
html.dusuk-guc .slayt.aktif,html.dusuk-guc .slayt.bolum.aktif{animation:none}
html.dusuk-guc .iz{transition:none!important}
html.dusuk-guc .iz use,html.dusuk-guc .kel .gl,html.dusuk-guc .gh,html.dusuk-guc .isik circle,
html.dusuk-guc .dalga path,html.dusuk-guc .bl-desen,html.dusuk-guc .bl-desen2,html.dusuk-guc .bl-halka,
html.dusuk-guc .kp-desen,html.dusuk-guc .kp-yildiz,html.dusuk-guc .kp-ad,html.dusuk-guc .toz i,
html.dusuk-guc .kb-no,html.dusuk-guc .kb-no::after,html.dusuk-guc .cip,html.dusuk-guc .dur-isaret,
html.dusuk-guc .agiz .bolge,html.dusuk-guc .agiz .ses path,html.dusuk-guc .agiz .ucan,
html.dusuk-guc .etiket .et-cizgi,html.dusuk-guc .carpi,html.dusuk-guc .kilit,html.dusuk-guc .dur,
html.dusuk-guc .bl-cipler span,html.dusuk-guc .kp-cipler span{animation:none!important}
html.dusuk-guc .ol-ray i::before{animation:none!important;transform:scaleY(1)}
html.dusuk-guc .ol-ray i.yarim::before{transform:scaleY(.5)}
html.dusuk-guc .ciz use{animation:none!important;fill-opacity:1;stroke-opacity:.35;stroke-dashoffset:0}
html.dusuk-guc .gunne .gh{opacity:.5}
html.dusuk-guc .gunne .g1{transform:scale(1.3);opacity:.3} html.dusuk-guc .gunne .g2{opacity:0}
html.dusuk-guc .dalga path,html.dusuk-guc .agiz .ses path{opacity:.8}
html.dusuk-guc .agiz .bolge{opacity:.55}
html.dusuk-guc .agiz .ucan{opacity:0}
html.dusuk-guc .dt-ok path,html.dusuk-guc .oy-ok path,html.dusuk-guc .akis-ciz path{animation:none!important;stroke-dashoffset:0}
html.dusuk-guc .adim.gor .dt-h.son .kel{animation:none}
html.dusuk-guc .soru .s-ic{transition:none}
html.dusuk-guc .bl-yol .yol-dolu{transition:none}
html.dusuk-guc .toz{display:none}
html.dusuk-guc .hxpin *{animation:none!important}

/* ================= SLAYT DÜZENLERİ ================= */
:root{--h1:#7E3A74;--h2:#2F5D8A;--h3:#B45309;--h4:#2E7D32;--h5:#0F766E}
.k2{display:grid;grid-template-columns:520px 1fr;gap:18px;flex:1 1 auto;min-height:0;align-items:stretch}
.k2-sol{display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0}
.k2-sag{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0}
.k2-sag > .adim{min-width:0}
.hukum.dikey{flex-direction:column;align-items:flex-start;gap:14px;padding:14px 24px}
.hukum.kucuk{font-size:32px;line-height:1.36}
.hukum .ikinci{color:#4B5563}
.not{font-size:32px;line-height:1.35;color:#374151;padding:0 8px}
.not.ortada{text-align:center}
.lejant{display:flex;align-items:center;gap:18px;justify-content:center;font-size:32px;color:#6B7280;flex-wrap:wrap}
.lejant .olcer{gap:0}
.lejant .ol-say{display:none}

/* sahne boyları */
.sahne.buyuk{padding:10px 18px 12px}
.sahne.genis{padding:14px 18px 10px}
.sahne.mini{padding:4px 10px 6px;box-shadow:0 4px 12px rgba(31,36,48,.07);border-radius:18px}
.sahne.mini .tekrar{width:36px;height:36px;top:6px;right:6px}
.sahne.mini .tekrar svg{width:19px;height:19px}
.sahne.mini .sahne-notlar{min-height:40px}
.sahne-svg.sabit .etiket,.sahne-svg.sabit .efekt{opacity:1}

/* harf-i med kartları */
.medler{flex:1 1 auto;min-height:0}
.medkart{padding:10px 16px 14px;gap:2px;border-bottom:8px solid var(--vr-o)}
.medkart .kel{height:150px;width:auto}
.medkart .uzama{display:block;width:70%;height:10px;border-radius:5px;margin:-4px 0 6px;
  background:linear-gradient(270deg,var(--vr) 0%,var(--vr-o) 70%,rgba(255,255,255,0) 100%);transform-origin:100% 50%;transform:scaleX(0)}
.adim.gor .medkart .uzama{animation:uzama 2.2s ease-in-out infinite}
@keyframes uzama{0%{transform:scaleX(0);opacity:1}55%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
html.dusuk-guc .medkart .uzama{animation:none!important;transform:none}

/* sebeb-i med */
.sebepler{flex:1 1 auto;min-height:0}
.sebep{flex-direction:row;gap:26px;justify-content:flex-start;padding:18px 26px;border-left:10px solid var(--vr-o);height:100%}
.sb-harf{display:flex;gap:4px;flex:0 0 auto}
.sb-harf .kel{height:190px;width:auto}
.sb-yazi{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.sb-yazi .kk-ad{font-size:40px;text-align:left}
.sb-yazi .kk-alt{text-align:left;color:#374151}

/* misal kartı */
.misal-kart{padding:14px 20px}
.misal-kart .kelimeler .kel{height:auto;max-height:170px;width:auto}
.misal-kart.satir{flex-direction:row;justify-content:space-between;gap:20px}
.seddeler{gap:10px}
.kalkaleler{gap:22px 26px}

/* tanım kartları (sâkin nûn / tenvinli nûn) */
.tanimkart{background:#fff;border-radius:22px;box-shadow:var(--golge);padding:10px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;border-top:8px solid var(--vr)}
.tanimkart .kk-ad{font-size:40px;color:var(--vr);line-height:1.15}
.tanimkart .kk-alt{font-size:32px;color:#374151;line-height:1.3}
.tanimkart .kel{height:120px;width:auto}
.tenvinler{display:flex;gap:26px;justify-content:center}
.tenvinler .kel{height:110px;width:auto}

.alt-serit{display:flex;align-items:center;justify-content:center;gap:30px;font-size:32px;color:#6B7280;margin-top:4px}

/* gunne yok işareti */
.gunnesiz{display:inline-flex;align-items:center;gap:12px;font-size:32px;color:var(--tk);background:#FFF1F0;border:2px solid #F7C6C3;border-radius:999px;padding:4px 18px 4px 12px}
.gunnesiz::before{content:'';width:34px;height:34px;flex:0 0 34px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23D7191F' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 12q-4 5 0 10M14 9q-6 8 0 16M19 7q-8 10 0 20'/%3E%3Cpath d='M4 30L30 4'/%3E%3C/g%3E%3C/svg%3E")}

/* grup kartları (mütecâniseyn / mütekâribeyn) */
.gruplar{flex:1 1 auto;min-height:0;align-items:stretch}
.grup{background:#fff;border-radius:22px;box-shadow:var(--golge);padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;height:100%}
.grup-bas{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--vr-a);border:2px solid var(--vr-o);border-radius:16px;padding:2px 12px}
.grup-bas b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--vr);color:#fff;font-size:32px;flex:0 0 44px}
.grup-bas .ar{font-size:44px;color:var(--vr-k);line-height:1.4}
.grup-misal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1 1 auto;
  border:2px dashed var(--vr-o);border-radius:18px;padding:6px}
.grup-misal span{font-size:32px;color:var(--vr);letter-spacing:3px}
.grup-misal .kel{height:auto;max-height:100px;width:auto;max-width:100%}

/* kalkale harfleri: sarsılır, yankı halkası yayılır */
.kalkale-harfler{display:flex;flex-direction:row-reverse;justify-content:center;gap:34px;margin:4px 0 6px}
.kh{position:relative;width:140px;height:140px;border-radius:32px;background:#fff;box-shadow:var(--golge);display:grid;place-items:center;
  border:3px solid var(--vr-o)}
.kh .kel{height:118px;width:auto}
.kh .yanki{position:absolute;inset:-4px;border-radius:34px;border:4px solid var(--vr);opacity:0}
.adim.gor .kh{animation:khSars 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * .26s)}
.adim.gor .kh .yanki{animation:yanki 2.6s ease-out infinite;animation-delay:calc(var(--i) * .26s)}
@keyframes khSars{0%,62%,100%{transform:none}66%{transform:translateY(-10px) rotate(-5deg)}72%{transform:translateY(3px) rotate(4deg)}78%{transform:translateY(-4px) rotate(-2deg)}84%{transform:none}}
@keyframes yanki{0%,64%{opacity:0;transform:scale(.9)}70%{opacity:.9}100%{opacity:0;transform:scale(1.35)}}
html.dusuk-guc .kh,html.dusuk-guc .kh .yanki{animation:none!important}

/* akış (sâkin mîm) */
.akis-ciz path.adim{opacity:1;transform:none;transition:none}
.akis-ciz path.adim.gor{animation:okCiz 1s ease forwards}
.akis-kok{top:0}
.akis-dal .sonuc{font-size:32px;line-height:1.2;color:#fff;background:var(--vr);border-radius:14px;padding:4px 10px;margin-top:8px}
.akis-dal .gelen .ar{font-size:48px;color:var(--vr);line-height:1}
.akis-dal .gelen .cip{min-width:60px;height:60px}
.cip.kucuk.genis{min-width:auto;padding:0 18px;font-size:32px}
.akis-dal{top:214px}
.akis-dal.adim{transform:translateY(24px) scale(.96)}
.akis-dal.adim.gor{transform:none}

/* izhâr: boğaz çizimi */
.izhar-k2{grid-template-columns:430px 1fr}
.agiz-kutu{background:#fff;border-radius:26px;box-shadow:var(--golge);padding:8px 10px;height:100%;display:grid;place-items:center}
.agiz-kutu .agiz{max-height:400px}
.adim.gor .agiz .bolge{animation:bolge 1.6s ease-in-out infinite}
.adim.gor .agiz .bolge.b1{animation-delay:.3s} .adim.gor .agiz .bolge.b2{animation-delay:.6s}
.adim.gor .agiz .ucan{animation:ucanSag 3.6s ease-out infinite}
@keyframes ucanSag{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(150px,-60px) scale(1.15)}}
.adim.gor .agiz .ses path{animation:dalga 1.3s ease-in-out infinite}
.adim.gor .agiz .ses path:nth-child(2){animation-delay:.18s} .adim.gor .agiz .ses path:nth-child(3){animation-delay:.36s}
.agiz .ucan{transform-box:fill-box;transform-origin:center}

/* özet kartlarının dış adımı tam boy */
.ozet5 > .oz-dis{display:flex;min-height:0}
.ozet5 > .oz-dis > .oz{flex:1 1 auto}

/* kapak ve bölümlerde metin gölgesi */
.slayt.koyu .kp-alt,.slayt.koyu .bl-alt{text-shadow:0 2px 10px rgba(0,0,0,.18)}

/* ================= TECVİD HARİTASI (2. slayt) ================= */
.rm{position:relative;flex:1 1 auto;min-height:0}
.rm-ciz{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rm-yol{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;opacity:.85}
.adim.gor .rm-yol{animation:okCiz 1.1s ease forwards;animation-delay:calc(.45s + var(--i) * .28s)}
.rm-merkez{position:absolute;left:50%;top:6px;margin-left:-95px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2C4E7A,#13233B);display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 18px 40px rgba(19,35,59,.35),0 0 0 8px rgba(231,205,142,.22)}
.rm-halka{position:absolute;inset:-18px;border-radius:50%;border:2px dashed rgba(184,153,90,.7);animation:yavasDon 30s linear infinite}
.rm-merkez .kel{height:78px;width:auto}
.altin use{fill:#E7CD8E!important}
.rm-merkez-ad{font-size:32px;line-height:1;letter-spacing:6px;color:#fff;margin:4px 0 0 6px}
.rm-dugum{position:absolute;width:250px;margin-left:-125px;margin-top:-62px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit}
.rm-daire{width:124px;height:124px;border-radius:50%;background:linear-gradient(150deg,var(--vr),var(--vr-k));display:grid;place-items:center;
  position:relative;box-shadow:0 14px 28px var(--vr-g);transition:transform .25s}
.rm-daire::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--vr-o);opacity:0;
  animation:halkaYay 2.8s ease-out infinite;animation-delay:calc(1.8s + var(--i) * .45s)}
@keyframes halkaYay{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.28)}}
.rm-daire .kel{max-width:96px;max-height:86px;width:auto;height:auto}
.rm-daire .kel use{fill:#fff!important}
.rm-daire b{position:absolute;top:-6px;right:-8px;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--vr);
  display:grid;place-items:center;font-size:32px;line-height:1;box-shadow:0 6px 14px rgba(31,36,48,.18);border:2px solid var(--vr-o)}
.rm-dugum:hover .rm-daire{transform:scale(1.08)}
.rm-ad{font-size:32px;line-height:1.15;color:var(--vr-k);text-align:center}
.adim.gor .rm-dugum{animation:cipGel .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.9s + var(--i) * .28s)}
html.dusuk-guc .rm-yol{animation:none!important;stroke-dashoffset:0}
html.dusuk-guc .rm-halka,html.dusuk-guc .rm-daire::after,html.dusuk-guc .rm-dugum{animation:none!important}

/* akış (sâkin mîm) — kök kutusu ve kartlar */
.akis-kok{display:flex;align-items:center;justify-content:center;gap:14px;width:280px;height:122px;margin-left:0;transform:translateX(-50%)}
.akis-kok.adim{transform:translateX(-50%) translateY(16px)}
.akis-kok.adim.gor{transform:translateX(-50%)}
.akis-kok span{font-size:36px;color:#fff}
.akis-kok .kel{height:92px;width:auto}
.akis-kok .kel use{fill:#fff!important}
.akis-dal{top:188px;width:372px;padding:12px 18px 16px}
.akis-dal .kel{height:auto;max-height:118px;width:auto;max-width:100%}
.akis-dal .arti{font-size:34px;color:#9AA4B1}
.akis-dal .ad-kal{min-height:82px;display:grid;place-items:center}

/* mini sahnede köşe yazısı */
.kose{font-family:'Arakom',serif;fill:var(--vr);opacity:0;transition:opacity .4s}
.kose.gor{opacity:1}

/* misleyn meal gunne satırı */
.misal-satir{display:flex;gap:16px;align-items:stretch}
.misal-satir > .kkart{flex:1 1 auto;min-width:0}
.misal-satir > .olcerler{justify-content:center;background:var(--vr-a);border:2px solid var(--vr-o);border-radius:22px;padding:10px 18px}
.kkart .not{margin:0 0 2px;text-align:center}
.grup-not{font-size:32px;line-height:1.3;color:#4B5563;text-align:center;padding:8px 12px;background:var(--vr-a);border-radius:16px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.grup-not p{margin:0}
.iklab2{flex:1 1 auto;min-height:0}
.iklab2 > .adim{display:flex;flex-direction:column;min-width:0}
.iklab2 .not{margin:-2px 0 6px}

/* ================= TECVİD SAYFASI: LİSTE EKRANI EKLERİ ================= */
#liste .lbast{gap:14px;align-items:baseline}
#liste .lbast .lalt{font-size:16px;color:rgba(255,255,255,.92);white-space:nowrap}
/* Bölüm kartları: küçük, renkli, sunumu o bölümden açar */
.lbolumler{grid-template-columns:repeat(5,1fr)!important}
.lkart.lbolum{position:relative;align-items:center;text-align:center;padding:14px 12px 14px!important;gap:4px!important;
  border-top:6px solid var(--bk)}
.lkart.lbolum .lb-no{position:absolute;top:10px;left:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bk);color:#fff;font-size:14px}
.lkart.lbolum .lb-ar{font-family:'Arakom',serif;font-size:40px;line-height:1.5;color:var(--bk);direction:rtl}
#liste .lkart.lbolum h3{font-size:17px;color:var(--bk)}
#liste .lkart.lbolum p{font-size:13.5px}
.lkart .lindir{font-size:14px;color:#0F766E;background:#E7F4F1;border:1px solid #BFE3DB;border-radius:10px;padding:6px 12px;text-decoration:none}
.lkart .lindir:hover{background:#D5EEE8}
/* yardım ipucu sol altta: sağ üstteki bölüm etiketinin üstüne binmesin */
#yardim{top:auto;right:auto;bottom:18px;left:18px}
/* tecvid haritası: bölüm kutuları geniş, kurallar içinde etiket (mini Sunum düğmeli) */
#liste .hxn.d1 > .hxb{max-width:620px;font-size:24px}
#liste .hxn.d1 > .hxb .hxmini{gap:6px 7px;padding-top:6px}
#liste .hxm{font-size:16px;padding:4px 9px;border-radius:9px}
#liste .hxm .hxsun.mini{font-size:13px}