/* ============================================================
   Arapça 6 — ek stiller (sağdan sola kitap, SVG düğmeler,
   ses çalar, kaynak listesi, indirme)
   ============================================================ */

/* --- sağdan sola kitap (flip.js rtl): yapraklar sol yarıda, sağa çevrilir.
       İçerikte hiçbir dönüşüm YOK — aynalama Safari'de düğmeleri ters gösteriyordu. --- */
.ayna{position:absolute;inset:0;display:grid;place-items:center}
.kitap.rtl .yaprak{left:0;transform-origin:right center}
.kitap.rtl .yaprak.cevrildi{transform:rotateY(180deg)}
.kitap.rtl .yuz.on::after{left:auto;right:0;background:linear-gradient(270deg,rgba(0,0,0,.16),transparent)}
.kitap.rtl .yuz.arka::after{right:auto;left:0;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent)}
.yuz .no{display:none}

/* --- sayfa üstündeki SVG düğmeler (QR kodların yerine) --- */
:root{--sayfaEn:500px}
.nokta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  border-radius:clamp(6px,calc(var(--sayfaEn) * .016),14px);
  border:clamp(1.5px,calc(var(--sayfaEn) * .004),3px) solid var(--renk);
  background:#fff;color:var(--renk);
  box-shadow:0 2px 8px rgba(18,32,64,.18);padding:0;overflow:visible;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .15s,box-shadow .15s,background .15s}
.nokta::after{display:none}
.nokta svg{width:58%;height:auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}
.nokta b{font-size:calc(var(--sayfaEn) * .0148);font-weight:800;line-height:1;white-space:nowrap;
  letter-spacing:-.01em;color:var(--ink);pointer-events:none}
/* fareyle üstüne gelme yalnız fare olan ekranlarda (dokunmatikte "yapışık hover" olmasın) */
@media (hover:hover){
  .nokta:hover{transform:scale(1.07);background:var(--renk);color:#fff;
    border-color:var(--renk);box-shadow:0 6px 18px rgba(18,32,64,.28)}
  .nokta:hover b{color:#fff}
}
.nokta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* basılınca: anında küçülür ve renklenir */
.nokta:active,.nokta.basili{transform:scale(.9);background:var(--renk);color:#fff;
  box-shadow:0 1px 3px rgba(18,32,64,.25);transition-duration:.05s}
.nokta:active b,.nokta.basili b{color:#fff}
.nokta.calan{background:var(--renk);color:#fff;animation:calan 1.6s ease-in-out infinite}
.nokta.calan b{color:#fff}
@keyframes calan{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--renk) 55%,transparent)}
  50%{box-shadow:0 0 0 calc(var(--sayfaEn) * .018) color-mix(in srgb,var(--renk) 0%,transparent)}}
/* dokunma halkası */
.halka{position:fixed;z-index:95;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:3px solid var(--gold);pointer-events:none;animation:halka .45s ease-out forwards}
@keyframes halka{from{transform:scale(.4);opacity:.95}to{transform:scale(4.2);opacity:0}}
/* bir şey yükleniyor (etkinlik/video) */
.yukleniyor{position:absolute;inset:0;display:grid;place-items:center;background:#fff;z-index:2;
  color:var(--ink2);font-weight:700;font-size:14px;gap:12px;align-content:center}
.yukleniyor::before{content:'';width:42px;height:42px;border-radius:50%;margin:0 auto;
  border:4px solid #E7ECF5;border-top-color:var(--gold);animation:don 0.8s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}
.n-ses{--renk:#17817E}
.n-etkinlik{--renk:#6B4BB4}
.n-video{--renk:#E0533B}
.n-sarki{--renk:#C9861B}
.n-eba{--renk:#2A3C63}
.n-eba svg{width:46%}
body.ipuclari-kapali .nokta{opacity:0}
body.ipuclari-kapali .nokta:hover,body.ipuclari-kapali .nokta:active{opacity:1}

/* --- dokunmatik ekran / akıllı tahta (parmak, kalem) --- */
button,a,input{touch-action:manipulation}
.tus:active,.ok:active,.dg:active,.kapat:active,.ksatir button:active,.tunite:active,
.indir-liste button:active,.sekmeler button:active{transform:scale(.93);transition:transform .05s}
.ok:active{transform:translateY(-50%) scale(.93);background:var(--gold);color:#221503}
@media (hover:none){
  /* dokunduktan sonra kalan hover rengini kaldır */
  .tus:hover{background:none;color:#D6DEEC}
  .tus.aktif:hover{background:var(--gold);color:#221503}
  .tus.etiketli:hover{background:rgba(255,255,255,.07)}
  .ok:hover{background:rgba(16,26,46,.62);color:#fff}
  .ksatir:hover{background:none}
  .nokta:not(:active):not(.basili):not(.calan):hover{border-color:var(--renk);background:#fff;color:var(--renk);
    box-shadow:0 2px 8px rgba(18,32,64,.18)}
  .nokta:not(:active):not(.basili):not(.calan):hover b{color:var(--ink)}
}
@media (pointer:coarse){
  :root{--cubuk:68px}
  .tus{width:50px;height:50px;border-radius:13px}
  .tus svg{width:23px;height:23px}
  .tus.etiketli{font-size:14px;padding:0 14px 0 12px}
  .kapat{width:48px;height:48px;font-size:28px}
  .alt{height:76px}
  .sahne{bottom:76px}
  input[type=range]{height:10px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
  input[type=range]::-moz-range-thumb{width:28px;height:28px}
  .git input{width:76px;padding:11px;font-size:16px}
  .ksatir{padding:10px 8px}
  .ksatir .dgm button,.ksatir .dgm a{height:42px;padding:0 14px;font-size:13px}
  .sekmeler button{padding:11px 16px;font-size:14px}
  .tunite{padding:16px}
  .calar{bottom:90px;padding:10px 12px;gap:14px}
  .calar audio{height:48px}
  .dg.kucuk{padding:10px 16px;font-size:14px}
  /* sayfa düğmeleri parmakla rahat basılsın: dokunma alanı görünenden geniş */
  .nokta::before{content:'';position:absolute;inset:-8px}
}
/* --- ses çalar --- */
.calar{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border-radius:16px;
  background:#fff;color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.45);
  width:min(560px,calc(100vw - 24px))}
.calar .ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:#DDF0EF;color:#0C5554;flex-shrink:0}
.calar .ci svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.calar .cm{min-width:0;flex-shrink:0}
.calar .cm b{display:block;font-size:13.5px;font-weight:800}
.calar .cm small{font-size:11px;color:var(--muted);font-weight:600}
.calar audio{flex:1;min-width:0;height:38px}

/* --- panel ekleri --- */
.panel.orta.dar{width:min(620px,95vw);height:auto;max-height:90vh}
.dg.kucuk{padding:6px 12px;font-size:12px;text-decoration:none;white-space:nowrap}
.sekmeler{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sekmeler button{padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:700;
  border:1.5px solid var(--line);color:var(--ink2)}
.sekmeler button.secili{background:var(--ink);border-color:var(--ink);color:#fff}
.kgrup>h3{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:14px 4px 7px;display:flex;gap:8px;align-items:baseline}
.kgrup>h3 span{font-family:'Amiri',serif;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink2)}
.ksatir{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:10px}
.ksatir:hover{background:#F4F7FB}
.ksatir .ik{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.ksatir .ik svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ksatir .ad{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.ksatir .ad small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.ksatir .dgm{display:flex;gap:4px}
.ksatir .dgm button,.ksatir .dgm a{height:30px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:700;
  border:1.5px solid var(--line);color:var(--ink2);display:inline-flex;align-items:center;text-decoration:none;background:#fff}
.ksatir .dgm button:hover,.ksatir .dgm a:hover{border-color:var(--gold);color:var(--ink)}
.i-ses{background:#DDF0EF;color:#0C5554}
.i-etkinlik{background:#EDE7FA;color:#432C7C}
.i-video{background:#FBE3DF;color:#8C2A17}
.i-sarki{background:#FBEFD6;color:#7A5405}
.i-eba{background:#E7ECF5;color:#2A3C63}

/* içindekiler */
.tunite{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;text-align:left;
  border:1.5px solid var(--line);margin-bottom:8px;transition:border-color .15s,background .15s}
.tunite:hover{border-color:var(--gold);background:#FFFCF4}
.tunite.simdi{border-color:var(--gold);background:#FBEFD6}
.tunite .nu{width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;flex-shrink:0}
.tunite .nu.bos{background:#E7ECF5;color:var(--ink2)}
.tunite .mt{flex:1;min-width:0}
.tunite .mt b{display:block;font-size:14px;font-weight:800}
.tunite .mt span{font-family:'Amiri',serif;font-size:16px;color:var(--ink2)}
.tunite .mt small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.tunite .sy{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}

/* indir */
.aciklama{font-size:13.5px;line-height:1.6;color:var(--ink2);margin-bottom:14px}
.indir-liste{display:grid;gap:8px}
.indir-liste button{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;text-align:left;
  border:1.5px solid var(--line);width:100%;transition:border-color .15s,background .15s}
.indir-liste button:hover{border-color:var(--gold);background:#FFFCF4}
.indir-liste button:disabled{opacity:.5;pointer-events:none}
.indir-liste button.ana{background:var(--ink);border-color:var(--ink);color:#fff}
.indir-liste button.ana small{color:#B9C4DA}
.indir-liste b{display:block;font-size:14px;font-weight:800}
.indir-liste small{font-size:11.5px;color:var(--muted);font-weight:600}
.indir-liste svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.indir-liste .mt{flex:1}
.ilerleme{margin-top:14px}
.ilerleme>div{height:8px;border-radius:99px;background:#EEF1F6;overflow:hidden}
.ilerleme span{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.ilerleme small{display:block;margin-top:6px;font-size:12px;color:var(--ink2);font-weight:600}

/* kapakta sayfa düğmesi yok; zoomda sürükleme imleci */
.sahne.yakin{cursor:grab}
.sahne.yakin:active{cursor:grabbing}

@media (max-width:820px){
  .calar{bottom:66px}
  .calar .cm{display:none}
}
@media (max-width:520px){
  .ksatir .dgm .gizle-kucuk{display:none}
}

/* sağdan sola kaydıraç: dolgu sağdan başlar */
input[type=range][dir=rtl]{background:linear-gradient(270deg,var(--gold) var(--dolu,0%),rgba(255,255,255,.16) var(--dolu,0%))}
#pIndir .pgovde{padding:18px 20px 20px}

/* akıllı tahta / tablet (geniş dokunmatik ekran): büyük çevirme okları */
@media (pointer:coarse) and (min-width:900px){
  .ok{width:64px;height:120px;border-radius:18px}
  .ok svg{width:30px;height:30px}
}


/* ============================================================
   GÖRÜNMEYEN YÜZÜN DÜĞMELERİ ÖNE SIZMASIN   (02.10.2026, Safari)
   ------------------------------------------------------------
   .yuz'daki backface-visibility:hidden yalnız yüzün KENDİ boyamasını
   durduruyor. İçindeki .katman (SVG düğmeler) WebKit'te ayrı bir
   kompozisyon katmanı olarak çizildiği için o kurala uymuyor: çevrilmiş
   yaprağın arkasında kalan düğmeler, öndeki sayfanın üstünde ve
   AYNALANMIŞ olarak görünüyor. Tıklanmıyorlar (hit-test zaten
   pointer-events ile kapalı), yalnız görüntü sızıyor.
   Çare: görünmeyen yüzün katmanını açıkça gizle.
   Yüzler yaprak 90°'ye geldiğinde el değiştirsin diye visibility
   geçişi yarı süre gecikmeli (--gecis .78s → .36s).
   Aynı hata ve aynı çözüm: Kidef flipbook sayfa-html.css "SIZMASIN".
   ============================================================ */
.yaprak .katman{transition:visibility 0s linear .36s}
.yaprak.cevrildi > .yuz.on .katman,
.yaprak:not(.cevrildi) > .yuz.arka .katman{visibility:hidden}

/* Parmakla sürüklerken gecikme işe yaramaz: yaprağın 90°'yi ne zaman
   geçeceği belli değil. flip.js o anda yaprağa .yari ekliyor. */
.yaprak.suruklenen .katman{transition:none}
.yaprak.suruklenen:not(.yari) > .yuz.on .katman,
.yaprak.suruklenen.yari   > .yuz.arka .katman{visibility:visible}
.yaprak.suruklenen.yari   > .yuz.on .katman,
.yaprak.suruklenen:not(.yari) > .yuz.arka .katman{visibility:hidden}

/* Sayfaya atlarken (git) yapraklar anında yerine oturuyor; katmanlar
   yarım saniye beklemesin. */
.kitap.atla .katman{transition:none !important}