:root{
  --bg:#0b1310; --bg2:#0f1a15; --panel:#15231c; --line:#243a2e;
  --accent:#3ee08e; --accent2:#27b673; --gold:#f5c451; --text:#eaf2ec; --muted:#86a395;
  --paper:#faf9f3; --ink:#23211c; --hl:#ffe98a; --hl-soft:#fff7d6; --rec:#ff5566;
  --rail-w:9px; --dock:80px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none;background:var(--bg)}
body{color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- OKUMA ALANI (maksimize) ---------- */
#reader{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;padding:0 var(--rail-w);touch-action:pan-y;overscroll-behavior:none;scrollbar-width:none;-ms-overflow-style:none}
#reader::-webkit-scrollbar{width:0;height:0;display:none}
#paper{
  background:var(--paper);color:var(--ink);margin:0 auto;max-width:700px;border-radius:16px;
  box-shadow:0 6px 40px rgba(0,0,0,.45);min-height:60vh;overflow-x:hidden;
  font-size:17px;line-height:1.6;letter-spacing:.1px;
}
#paper.loading{padding:42vh 16px;text-align:center;color:var(--muted);background:transparent;box-shadow:none}
#top-spacer{height:calc(40px + var(--safe-t))}
#reader-end{height:calc(60vh + var(--dock) + var(--safe-b))}

/* rapor içeriği — mobil okunabilirlik, sıkı boşluklar */
#paper section[id],#paper .yr-section section{max-width:100%!important;padding:.95rem 1.05rem!important;margin:0!important}
#paper p{font-size:1.02rem!important;line-height:1.55!important;margin:0 0 .62rem!important;color:#2b2925!important}
#paper h1{font-size:1.42rem!important;line-height:1.22!important;margin:.1rem 0 .5rem!important;color:#0d3d2b!important}
#paper h2{font-size:1.16rem!important;margin:1.05rem 0 .42rem!important;color:#0d3d2b!important}
#paper h3{font-size:1.03rem!important;margin:.8rem 0 .32rem!important}
#paper li{font-size:1.0rem!important;line-height:1.5!important;margin:.18rem 0!important}
#paper hr{margin:1rem 0!important;border:none;border-top:1px solid #ece7da!important}
#paper a{color:#1c6b48;text-decoration:none;border-bottom:1px dashed #9cc7b3}
#paper img{max-width:100%;height:auto;border-radius:8px}
#paper table{display:block;overflow-x:auto;max-width:100%;font-size:.88rem!important;margin:.4rem 0!important}
#paper ul,#paper ol{padding-left:1.2rem!important;margin:.3rem 0 .55rem!important}
#paper blockquote{margin:.7rem 0!important;padding:.2rem 0 .2rem .85rem!important;border-left:3px solid #cfe3d8!important;color:#4a5a50!important}

/* ---------- KARAOKE ---------- */
.w{border-radius:5px;transition:background-color .14s ease,color .14s ease,box-shadow .14s ease;padding:0 .5px}
.w.read{background:rgba(62,224,142,.15);border-radius:4px}   /* okunan iz — nereyi okudun belli */
.sent-active{background:rgba(255,247,214,.7);border-radius:7px;box-shadow:0 0 0 3px rgba(255,247,214,.7)}
/* NOT: font-weight/size DEĞİŞTİRME — yoksa kelime genişler, satır kayar. Sadece renk/zemin. */
.w.active{background:linear-gradient(180deg,#ffe98a,#ffdf5e);color:#1a1a1a;
  box-shadow:0 1px 0 #e9c64a,0 0 0 1px rgba(233,198,74,.5);border-radius:5px}
.w.note-anchor{box-shadow:inset 0 -3px 0 var(--rec)}

/* sticky üst başlık: o an okunan alt başlık */
#sticky-header{position:fixed;top:0;left:0;right:0;z-index:18;pointer-events:none;
  height:calc(42px + var(--safe-t));padding:var(--safe-t) 18px 0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(11,19,16,.97) 30%,rgba(11,19,16,.65) 80%,transparent);
  font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- SAĞ ŞERİT ---------- */
#rail{position:absolute;top:0;right:0;width:var(--rail-w);bottom:0;background:rgba(255,255,255,.03);z-index:12;touch-action:none}
#rail-canvas{width:100%;height:100%;display:block}
#rail-thumb{display:none}   /* ayrı playhead yok — sadece canvas yeşil bar */

/* ---------- ALT DOCK: play = hız thumb'ı (tam genişlik track) ---------- */
#dock{
  position:relative;flex:0 0 auto;height:calc(var(--dock) + var(--safe-b));padding:0 12px var(--safe-b);
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(180deg,rgba(20,33,26,.9),rgba(9,15,12,.98));
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.07);box-shadow:0 -10px 30px rgba(0,0,0,.4);z-index:30;
}
/* köşe tuşları (minimal) */
.corner-btn{position:static;flex:0 0 auto;width:42px;height:42px;border:0;background:transparent;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.corner-btn svg{width:23px;height:23px;color:var(--muted);fill:var(--muted)}
#btn-menu:active svg{color:var(--text)}
.corner-btn.rec{flex:0 0 auto;width:44px;height:44px;border:1.5px solid #5a2730;background:#1f1316}
.corner-btn.rec svg{width:25px;height:25px;fill:var(--rec)}
.corner-btn.rec.recording{border-color:var(--rec);animation:recPulse 1.1s infinite}
.corner-btn.rec.recording svg{display:none}
.corner-btn.rec.recording::after{content:"";width:19px;height:19px;border-radius:4px;background:var(--rec)}
/* hız track'i: flex ile ortada genişler; içinde slider çizgisi + kayan thumb */
#speed-track{position:relative;flex:1 1 auto;height:46px;min-width:80px}
#speed-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:5px;background:rgba(255,255,255,.10)}
#speed-track::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;border-radius:5px;background:var(--accent);opacity:.5;width:var(--fill,14%)}
/* play = thumb: beyaz daire + koyu yeşil ikon */
.dock-play{position:absolute;top:50%;left:14%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:0;cursor:grab;
  background:#f4f7f5;box-shadow:0 3px 14px rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;touch-action:none;z-index:2}
.dock-play:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.94)}
.dock-play svg{width:22px;height:22px;fill:#13694a}
.dock-play .ic-play{margin-left:3px}
.dock-play .ic-pause{display:none}
.dock-play.playing .ic-play{display:none}
.dock-play.playing .ic-pause{display:block;margin:0}
/* UNIFIED: hız (sol) + kalan süre (sağ) — aynı tasarım (üstte etiket, altta değer) */
.dock-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;line-height:1.04;pointer-events:none;font-variant-numeric:tabular-nums}
.dock-meta b{font-size:8.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);opacity:.6}
.dock-meta .v{font-size:15px;font-weight:800;color:var(--text);margin-top:1px;transition:color .2s}
.dock-meta.adjusting .v{color:var(--accent)}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,85,102,.22)}50%{box-shadow:0 0 0 8px rgba(255,85,102,.06)}}

/* başlatma ipucu */
#start-hint{position:absolute;left:50%;bottom:calc(var(--dock) + 22px + var(--safe-b));transform:translateX(-50%);
  background:rgba(62,224,142,.96);color:#06231a;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;
  z-index:24;pointer-events:none;box-shadow:0 8px 30px rgba(62,224,142,.5);animation:hintPulse 1.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}

/* ---------- KAYIT OVERLAY ---------- */
#rec-overlay{position:absolute;inset:0;background:rgba(6,12,9,.5);backdrop-filter:blur(2px);z-index:45;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--dock) + 16px + var(--safe-b))}
.rec-card{width:min(440px,92vw);background:rgba(18,32,26,.97);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 14px 50px rgba(0,0,0,.6)}
#wave-canvas{width:100%;height:88px;display:block;background:#0a130f;border-radius:12px}
.rec-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:13px}
#rec-timer{color:var(--rec);font-weight:700;font-variant-numeric:tabular-nums}
#rec-where{color:var(--muted);max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-hint{margin-top:8px;font-size:11px;color:var(--muted);text-align:center}

/* ---------- BOTTOM SHEET'LER ---------- */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;background:var(--panel);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:8px 16px calc(20px + var(--safe-b));box-shadow:0 -10px 50px rgba(0,0,0,.55);
  max-height:82vh;overflow-y:auto;animation:slideUp .26s cubic-bezier(.2,.8,.2,1)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grip{width:40px;height:4px;border-radius:3px;background:#3a4f44;margin:6px auto 14px}
.sheet h2{margin:0 0 12px;font-size:16px}
.menu-grid{display:flex;flex-direction:column;gap:9px;padding-bottom:4px}
.m-btn{display:flex;align-items:center;gap:10px;justify-content:flex-start;background:#0e1814;border:1px solid var(--line);
  color:var(--text);font-size:15px;font-weight:600;padding:16px;border-radius:14px;cursor:pointer;text-align:left}
.m-btn:active{background:rgba(255,255,255,.05);transform:scale(.99)}

#toc-list{margin:0;padding-left:0;list-style:none;counter-reset:s}
#toc-list li{counter-increment:s;display:flex;gap:12px;align-items:center;padding:12px 8px;border-radius:11px;cursor:pointer}
#toc-list li:active{background:rgba(255,255,255,.05)}
#toc-list li::before{content:counter(s,decimal-leading-zero);color:var(--accent);font-weight:700;font-size:13px;min-width:22px}
#toc-list .toc-t{flex:1;font-size:14px}
#toc-list .toc-cov{font-size:11px;color:var(--muted)}
.toc-bar{height:4px;border-radius:3px;background:#21342a;flex:0 0 54px;overflow:hidden}
.toc-bar i{display:block;height:100%;background:var(--accent)}

.stars{display:flex;gap:6px;margin:4px 0 12px;font-size:30px;color:#3a4f44}
.stars.small{font-size:22px;margin:4px 0 8px}
.stars .st{cursor:pointer;transition:transform .1s}
.stars .st.on{color:var(--gold)}
.stars .st:active{transform:scale(1.2)}
textarea{width:100%;background:#0e1814;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:11px;font-size:14px;font-family:inherit;resize:none;-webkit-user-select:text;user-select:text}
.notes-list{margin:10px 0;display:flex;flex-direction:column;gap:8px}
.note-item{display:flex;align-items:center;gap:10px;background:#0e1814;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.note-item button.np{background:var(--accent);border:0;color:#06231a;width:30px;height:30px;border-radius:50%;font-size:13px;cursor:pointer}
.note-item .nlabel{flex:1;font-size:12px;color:var(--muted)}
.note-item .ndel{background:transparent;border:0;color:#7d4a50;font-size:16px;cursor:pointer}
.sheet-actions,.tour-actions{display:flex;gap:10px;margin-top:8px}
.btn{flex:1;padding:13px;border-radius:12px;border:0;font-size:14px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);color:#06231a}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn:active{transform:scale(.97)}

/* ---------- TUR ---------- */
#tour{position:absolute;inset:0;z-index:60}
#tour::before{content:"";position:absolute;inset:0;background:rgba(4,9,6,.74)}
#tour-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(4,9,6,.74);transition:all .35s cubic-bezier(.3,.9,.3,1);pointer-events:none}
#tour-card{position:absolute;left:14px;right:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 14px 50px rgba(0,0,0,.6)}
#tour-step{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:1px}
#tour-card h3{margin:4px 0 6px;font-size:17px}
#tour-card p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.5}

#done-burst{position:absolute;inset:0;z-index:70;background:rgba(4,9,6,.82);display:flex;align-items:center;justify-content:center}
.burst-card{text-align:center;font-size:18px;line-height:1.6;background:var(--panel);border:1px solid var(--accent);border-radius:18px;padding:28px 26px;box-shadow:0 0 60px rgba(62,224,142,.3)}
#toast{position:absolute;left:50%;bottom:calc(var(--dock) + 18px + var(--safe-b));transform:translateX(-50%);background:rgba(8,16,12,.96);border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:12px;font-size:13px;z-index:80;max-width:82vw;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* İSİM KAPISI */
#name-gate{position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 80% at 50% 0%,#143226,#0a130f 70%)}
.ng-card{width:min(420px,100%);text-align:center}
.ng-logo{font-size:46px;margin-bottom:6px}
.ng-card h2{margin:0 0 10px;font-size:22px;line-height:1.25;font-weight:800}
.ng-card h2 span{color:var(--accent);font-weight:800}
.ng-card p{margin:0 0 20px;font-size:14px;color:var(--muted);line-height:1.6}
#ng-name{width:100%;background:#0e1814;border:1px solid var(--line);border-radius:14px;color:var(--text);
  padding:15px 16px;font-size:16px;text-align:center;margin-bottom:12px;-webkit-user-select:text;user-select:text}
#ng-name:focus{outline:none;border-color:var(--accent)}
#ng-go{width:100%;padding:15px;font-size:16px}

/* ELİF TANITIM */
#onboarding{position:absolute;inset:0;z-index:75}
#onboarding::before{content:"";position:absolute;inset:0;background:rgba(4,9,6,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#onb-spot{position:absolute;border-radius:16px;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(4,9,6,.8);transition:all .4s cubic-bezier(.3,.9,.3,1);pointer-events:none}
#onb-card{position:absolute;left:16px;right:16px;bottom:calc(28px + var(--safe-b));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 16px 50px rgba(0,0,0,.6)}
#onb-elif{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.5px;margin-bottom:10px}
.onb-wave{width:3px;height:12px;background:var(--accent);border-radius:2px;display:inline-block;animation:onbw 1s ease-in-out infinite}
.onb-wave:nth-child(2){animation-delay:.15s}.onb-wave:nth-child(3){animation-delay:.3s}
@keyframes onbw{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
#onboarding.paused .onb-wave{animation-play-state:paused}
#onb-dots{display:flex;gap:6px;margin-bottom:11px}
#onb-dots i{width:7px;height:7px;border-radius:50%;background:#2a3f34;transition:all .3s}
#onb-dots i.on{background:var(--accent);width:18px}
#onb-card h3{margin:0 0 7px;font-size:18px}
#onb-card p{margin:0 0 15px;font-size:14px;color:var(--text);line-height:1.6}
.onb-actions{display:flex;gap:10px}
.onb-actions .ghost{flex:0 0 auto;min-width:78px}
.onb-actions .primary{flex:1}

.hidden,[hidden]{display:none!important}
@media (min-width:760px){
  #paper{margin:0 auto;max-width:720px}
  #top-spacer{height:calc(48px + var(--safe-t))}
}