/* ─────────────────────────────────────────────────────────────────────────────
   KİTANDA TELEFON DEMOSU — uygulamanın Oku / Dinle / Spritz ekranlarının
   tarayıcıda çalışan birebir kopyası (2026-09-05).

   Ölçüler ve renkler Flutter kaynağından alındı:
   · Kâğıt temaları      lib/theme/reader_paper_themes.dart
   · Oku ekranı          lib/screens/reader/reader_screen.dart
   · Dinle ekranı        lib/screens/reader/audio_book_landing_screen.dart
   · Spritz              lib/screens/reader/spritz_screen.dart
   · Cam paneller        lib/widgets/kitanda_cam_panel.dart (blur 34 · tint 0,74)
   · Üst bildirim        lib/widgets/top_notice_banner.dart (#15151B camı)
   Telefon ekranı her zaman 440×956 mantıksal pikseldir; cihaz bir bütün olarak
   ölçeklenir (--phone-scale), iç düzen hiçbir kırılım noktasında değişmez.
   ───────────────────────────────────────────────────────────────────────────── */

.iphone-screen {
  --accent: #8B5CF6;
  --accent-deep: #7C3AED;
  --favori: #FFD700;
  --acikla: #FF6B6B;
  --ozetle: #60A5FA;
  --p-bg: #F8F4EC; --p-bg2: #EFE9DD; --p-ink: #1F1A14; --p-grain: .45;
  --reader-font: Georgia, 'Times New Roman', serif;
  --reader-size: 17px;
  --reader-line: 1.6;
  position: relative; width: 440px; height: 956px; overflow: hidden; border-radius: 62px;
  color: var(--p-ink); background: var(--p-bg);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  text-align: left; touch-action: none;
}
.rd-pages { touch-action: none; }   /* dikey kaydırma JS'te (Flutter gibi): uzun basma seçimi ve iki parmak modu tarayıcıya kaptırılmaz */
.iphone-screen[data-paper="vellum"]    { --p-bg:#F0E2C0; --p-bg2:#E8D8B0; --p-ink:#2A2014; --p-grain:.70; }
.iphone-screen[data-paper="linen"]     { --p-bg:#F8F4EC; --p-bg2:#EFE9DD; --p-ink:#1F1A14; --p-grain:.45; }
.iphone-screen[data-paper="parchment"] { --p-bg:#E2D2A8; --p-bg2:#D6C390; --p-ink:#3A2615; --p-grain:.95; }
.iphone-screen[data-paper="midnight"]  { --p-bg:#1A1612; --p-bg2:#221C16; --p-ink:#E8DCC4; --p-grain:.40; }
.iphone-screen .mi { font-family: 'Material Icons Round'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.iphone-screen button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iphone-screen button:focus-visible { outline: 2px solid rgba(139,92,246,.7); outline-offset: 2px; }

/* Kâğıt dokusu: PaperGrainLayer karşılığı (feTurbulence, çarpımsal). */
.paper-grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: calc(var(--p-grain) * .16); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.iphone-screen[data-paper="midnight"] .paper-grain { mix-blend-mode: screen; opacity: .05; }
.iphone-screen[data-paper="linen"] .paper-grain { opacity: 1; mix-blend-mode: normal; background-image: repeating-linear-gradient(0deg, rgba(31,26,20,.045) 0 1px, transparent 1px 11px), repeating-linear-gradient(90deg, rgba(31,26,20,.045) 0 1px, transparent 1px 11px); }

/* ── DURUM ÇUBUĞU (Dynamic Island) ─────────────────────────────────────────── */
.statusbar { position: absolute; z-index: 60; left: 0; right: 0; top: 0; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; font-size: 15.5px; font-weight: 700; color: var(--p-ink); pointer-events: none; transition: color .25s ease; }
.iphone-screen[data-mode="listen"] .statusbar { color: #fff; }
.dynamic-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.status-right { display: flex; align-items: center; gap: 7px; }
.cell-dots { width: 19px; height: 7px; background: radial-gradient(circle, currentColor 2px, transparent 2.6px) 0 50%/6px 7px repeat-x; opacity: .7; }
.status-right .mi { font-size: 18px; }
.battery { position: relative; width: 26px; height: 12px; border: 2px solid currentColor; border-radius: 4px; opacity: .85; }
.battery::before { content: ""; position: absolute; inset: 2px; right: 3px; background: currentColor; border-radius: 1px; }
.battery::after { content: ""; position: absolute; right: -5px; top: 3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; opacity: .6; }
.home-indicator { position: absolute; z-index: 61; left: 50%; bottom: 8px; transform: translateX(-50%); width: 140px; height: 5px; border-radius: 4px; background: var(--p-ink); opacity: .72; pointer-events: none; transition: background .25s; }
.iphone-screen[data-mode="listen"] .home-indicator { background: #fff; }

/* ── EKRANLAR + MOD GEÇİŞİ (switchReadingMode: 300 ms, kayma %16 + solma) ── */
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.scr.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Uygulama (reading_mode_switch.dart): yeni ekran eski ekranın ÜSTÜNE 300 ms easeOutCubic ile %16 kayarak + solarak gelir;
   eski ekran hareketsiz altta durur, geçiş bitince kaldırılır (pushReplacement). Eski ekran ayrıca solmaz. */
.scr.mode-enter-fwd { z-index: 2; animation: modeEnterFwd .3s cubic-bezier(.215,.61,.355,1) both; }
.scr.mode-enter-back { z-index: 2; animation: modeEnterBack .3s cubic-bezier(.215,.61,.355,1) both; }
.scr.mode-exit { visibility: visible; opacity: 1; z-index: 1; pointer-events: none; }
@keyframes modeEnterFwd { from { opacity: 0; transform: translateX(16%); } to { opacity: 1; transform: none; } }
@keyframes modeEnterBack { from { opacity: 0; transform: translateX(-16%); } to { opacity: 1; transform: none; } }
@keyframes modeExit { from { opacity: 1; } to { opacity: 0; } }

/* Mod şeridi göstergesi: iki parmak kaydırırken kısacık görünen etiket. */
.mode-strip { position: absolute; z-index: 58; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.94); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(21,21,27,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(22px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.mode-strip.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.mode-strip span { padding: 8px 14px; border-radius: 999px; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 700; }
.mode-strip span.is-on { color: #fff; background: rgba(139,92,246,.42); }

/* ═══ OKU (ReaderScreen) ═══════════════════════════════════════════════════ */
.scr-read { background: var(--p-bg); }
.rd-topbar { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 110px; display: flex; align-items: center; gap: 4px; padding: 58px 16px 0; background: color-mix(in srgb, var(--p-bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--p-ink) 8%, transparent); transition: opacity .25s ease, visibility .25s; }
.rd-back { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--p-ink); margin-left: -8px; }
.rd-back .mi { font-size: 20px; }
.rd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rd-title strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.2; }
.rd-title span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--p-ink) 62%, transparent); }

/* Günlük hedef halkası (GunlukHedefHalkasi, 30 px, mor yay). */
.goal-ring { --g: .15; position: relative; flex: none; width: 30px; height: 30px; margin: 0 10px 0 4px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--g) * 360deg), color-mix(in srgb, var(--p-ink) 14%, transparent) 0); cursor: pointer; }
.goal-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px)); }
.goal-ring { background: none !important; }
.goal-ring::before { background: conic-gradient(var(--accent) calc(var(--g) * 360deg), color-mix(in srgb, var(--p-ink) 14%, transparent) 0); }
.scr-listen .goal-ring::before { background: conic-gradient(var(--accent) calc(var(--g) * 360deg), rgba(255,255,255,.16) 0); }
.goal-ring i { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: var(--p-ink); font-size: 9.5px; font-weight: 800; font-style: normal; }
.scr-listen .goal-ring i { color: #fff; }

/* Cam ⋯ pili: köşe 16, beyaz %7,5 zemin, blur 18. Açık kâğıtta mürekkep camı. */
.glass-pill { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 16px; color: var(--p-ink); background: color-mix(in srgb, var(--p-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--p-ink) 12%, transparent); backdrop-filter: blur(18px); }
.glass-pill .mi { font-size: 22px; }
.scr-listen .glass-pill, .glass-pill.on-dark { color: #fff; background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.12); }

.rd-pages { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.rd-page { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; cursor: default; padding: 136px 24px 100px; transform-origin: left center; }
.rd-page::-webkit-scrollbar { display: none; }
.iphone-screen.is-read-along .rd-page { padding-bottom: 210px; }
.rd-page.turn-fwd { animation: pageTurnFwd .46s cubic-bezier(.22,.72,.22,1) both; }
.rd-page.turn-back { animation: pageTurnBack .46s cubic-bezier(.22,.72,.22,1) both; }
.rd-page.turn-out-fwd { animation: pageOutFwd .46s cubic-bezier(.4,0,.6,1) both; z-index: 2; pointer-events: none; }
.rd-page.turn-out-back { animation: pageOutBack .46s cubic-bezier(.4,0,.6,1) both; z-index: 2; pointer-events: none; }
@keyframes pageTurnFwd { from { opacity: .55; transform: perspective(1100px) rotateY(-14deg) translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes pageTurnBack { from { opacity: .55; transform: perspective(1100px) rotateY(14deg) translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes pageOutFwd { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1100px) rotateY(24deg) translateX(-30px); } }
@keyframes pageOutBack { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1100px) rotateY(-24deg) translateX(30px); } }
.rd-text { font-family: var(--reader-font); font-size: var(--reader-size); line-height: var(--reader-line); color: var(--p-ink); }
.rd-text p { margin: 0 0 1em; }
.rd-text p:last-child { margin-bottom: 0; }
.w { position: relative; }
.wc { position: relative; border-radius: 3px; transition: color .16s ease; }

/* Favori sarı kalem (HighlightMarkerPainter): çarpımsal renk, kelimeyi
   biraz aşan yumuşak uçlar, alta çöken boya. */
.w.hl .wc { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 2px 2px; margin: -1px -2px -2px; border-radius: 3px 5px 4px 6px / 6px 3px 5px 4px; mix-blend-mode: multiply;
  background: linear-gradient(180deg, transparent 10%, var(--hl-c) 10%, var(--hl-c) 78%, color-mix(in srgb, var(--hl-c) 100%, #000 14%) 92%, transparent 92%); }
.w.hl-favori { --hl-c: rgba(255,215,0,.62); }
.w.hl-favori.hl-saved { --hl-c: rgba(255,205,0,.72); }
.w.hl-acikla { --hl-c: rgba(255,107,107,.55); }
.w.hl-ozetle { --hl-c: rgba(96,165,250,.55); }
.w.hl-active .wc { --hl-c: rgba(255,215,0,.8); }
.iphone-screen[data-paper="midnight"] .w.hl .wc { mix-blend-mode: screen; }
.iphone-screen[data-paper="midnight"] .w.hl-favori { --hl-c: rgba(255,215,0,.34); }
.iphone-screen[data-paper="midnight"] .w.hl-acikla { --hl-c: rgba(255,107,107,.36); }
.iphone-screen[data-paper="midnight"] .w.hl-ozetle { --hl-c: rgba(96,165,250,.38); }

/* Kaldığın yer (çift dokunma): mavi altı çizgi + tek nabız. */
.w.anchor .wc { color: #0A5F8A; text-decoration: underline; text-decoration-color: rgba(10,95,138,.9); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.w.anchor-range .wc { color: rgba(10,95,138,.8); text-decoration: underline; text-decoration-color: rgba(10,95,138,.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.iphone-screen[data-paper="midnight"] .w.anchor .wc { color: #9BE1FF; text-decoration-color: rgba(155,225,255,.9); }
.iphone-screen[data-paper="midnight"] .w.anchor-range .wc { color: rgba(155,225,255,.8); text-decoration-color: rgba(155,225,255,.35); }
.w.anchor-pulse .wc { animation: anchorPulse .86s ease both; }
@keyframes anchorPulse { 0%,100% { background: transparent; } 45% { background: rgba(10,95,138,.26); box-shadow: 0 0 0 4px rgba(10,95,138,.1); } }

/* Eşlik hapı (ReadAlongPillPainter): mavi %45, yuvarlak, sözcük başına ayrı hap. */
.w.ra .wc { background: rgba(56,189,248,.45); border-radius: 6px; padding: 1px 3px; margin: -1px -3px; transition: background .12s ease; }
.w.ra-intro .wc { background: rgba(255,215,0,.55); }

/* Akıllı referanslar (reader_screen: %4,5 büyük, kalın, türe göre renk ve ince altçizgi). */
.w.ent .wc { --sc: #6F4E1E; font-size: 1.045em; font-weight: 700; color: var(--sc); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sc) 46%, transparent); text-decoration-thickness: 1.05px; text-underline-offset: 2px; cursor: pointer; }
.w.ent-Y .wc, .w.ent-L .wc { --sc: #6F4E1E; }
.w.ent-K .wc { --sc: #3F7A55; }
.w.ent-T .wc { --sc: #466E9D; }
.w.ent-D .wc, .w.ent-O .wc { --sc: #6D5B91; }
.iphone-screen[data-paper="midnight"] .w.ent-Y .wc, .iphone-screen[data-paper="midnight"] .w.ent-L .wc { --sc: #EACD92; }
.iphone-screen[data-paper="midnight"] .w.ent-K .wc { --sc: #A7D7B5; }
.iphone-screen[data-paper="midnight"] .w.ent-T .wc { --sc: #AFC7E8; }
.iphone-screen[data-paper="midnight"] .w.ent-D .wc, .iphone-screen[data-paper="midnight"] .w.ent-O .wc { --sc: #D4C2F0; }
.w.ent.anchor .wc, .w.ent.anchor-range .wc { color: #0A5F8A; text-decoration-color: rgba(10,95,138,.9); }
/* Ara bölüm (@@A I): ortalı, kalın, 1,16 kat büyük. */
.rd-interlude { text-align: center; font-weight: 700; font-size: calc(var(--reader-size) * 1.16); letter-spacing: .8px; padding: calc(var(--reader-size) * .45) 0; }

/* Tanıtım sayfası: yalnız ilk sayfa gerçek; sonrası uygulamaya davet. */
.rd-teaser { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 12px; }
.rd-teaser .ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rd-teaser .ic .mi { font-size: 32px; }
.rd-teaser h3 { margin: 20px 0 0; font: 700 22px/1.2 var(--reader-font); color: var(--p-ink); }
.rd-teaser p { margin: 12px 0 0; max-width: 300px; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--p-ink) 70%, transparent); }
.rd-teaser a { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 16px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; background: linear-gradient(180deg, rgba(139,92,246,.95), rgba(124,58,237,.8)); box-shadow: 0 8px 22px rgba(124,58,237,.28); }
.rd-teaser small { margin-top: 26px; font-size: 12px; color: color-mix(in srgb, var(--p-ink) 45%, transparent); }

/* Alt bar: liquid glass (blur 18, kâğıt %55), solda Sayfa, sağda Eşlik pili. */
.rd-bottombar { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 42px; background: color-mix(in srgb, var(--p-bg) 55%, transparent); border-top: 1px solid color-mix(in srgb, var(--p-ink) 10%, transparent); backdrop-filter: blur(18px); transition: opacity .22s ease, visibility .22s; }
.rd-pagebtn { display: flex; align-items: center; gap: 4px; padding: 12px 0; border: 0; background: transparent; color: color-mix(in srgb, var(--p-ink) 65%, transparent); font-size: 12.5px; font-weight: 600; }
.rd-pagebtn .mi { font-size: 15px; color: color-mix(in srgb, var(--p-ink) 45%, transparent); }
.rd-follow { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 24px; color: #fff; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(30,41,59,.82), rgba(15,23,42,.62)); backdrop-filter: blur(16px); font-size: 13.5px; font-weight: 700; transition: transform .16s ease, opacity .2s ease; }
.rd-follow .mi { font-size: 18px; }
.rd-follow:active { transform: scale(.96); }
.iphone-screen.is-read-along .rd-follow { display: none; }

/* Tam ekran: çubuklar VE durum çubuğu çekilir (immersiveSticky), metin kalır (220 ms). */
.iphone-screen.is-immersive .rd-topbar, .iphone-screen.is-immersive .rd-bottombar { opacity: 0; visibility: hidden; pointer-events: none; }
.statusbar > span:not(.dynamic-island) { transition: opacity .22s ease; }
.iphone-screen.is-immersive[data-mode="read"] .statusbar > span:not(.dynamic-island), .iphone-screen.is-immersive[data-mode="read"] .home-indicator { opacity: 0; }
.iphone-screen ::selection { background: transparent; }
.iphone-screen *::selection { background: transparent; }

/* Seçim rozeti (favori cümle sürerken): kaç kelime alındı. */
.sel-badge { position: absolute; z-index: 40; left: 50%; top: 122px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(21,21,27,.92), rgba(21,21,27,.74)); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(22px); box-shadow: 0 10px 26px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transform: translate(-50%,-8px); transition: .18s ease; pointer-events: none; }
.sel-badge.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.sel-badge i { width: 18px; height: 8px; border-radius: 3px; background: rgba(255,215,0,.92); }
.sel-badge b { font-size: 12px; white-space: nowrap; }

/* Jest ipucu kartı (ilk açılış): çift dokun / basılı tut. */
.hint-card { position: absolute; z-index: 30; left: 50%; top: 122px; bottom: auto; transform: translate(-50%,0); padding: 11px 18px 11px 12px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, rgba(21,21,27,.74), rgba(21,21,27,.54)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(20px); box-shadow: 0 9px 24px -4px rgba(0,0,0,.28); transition: opacity .3s ease, transform .3s ease, visibility .3s; cursor: pointer; }
.hint-card[hidden] { display: none; }
.hint-card.is-leaving { opacity: 0; transform: translate(-50%,-14px); visibility: hidden; }
.hint-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
.hint-row .mi { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; }
.hint-row b { font-size: 13px; }
.hint-row small { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.62); }
.hint-sep { height: 1px; margin: 8px 0 8px 40px; width: 190px; background: rgba(255,255,255,.1); }

/* Eşlik barı (_buildReadAlongBar): #0A0C12 %82, köşe 24, blur 26. */
.ra-bar { position: absolute; z-index: 25; left: 14px; right: 14px; bottom: 42px; padding: 4px 18px 8px; color: #fff; border-radius: 24px; background: rgba(10,12,18,.82); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(26px); box-shadow: 0 14px 30px -6px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(70px); transition: opacity .34s cubic-bezier(.22,.61,.36,1), transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s, left .36s cubic-bezier(.22,.61,.36,1), right .36s cubic-bezier(.22,.61,.36,1), padding .36s ease; }
.iphone-screen.is-read-along .ra-bar { opacity: 1; visibility: visible; transform: none; }
.iphone-screen.is-read-along.is-immersive .ra-bar, .ra-bar.is-idle { left: 52px; right: 52px; padding: 6px 14px; opacity: .62; }
/* ── Ray (_PrecisionScrubBar ile eşitlendi, 2026-09-22) ──────────────────
   Kutu 28 (mobil SizedBox(height: 28)), ray 3.5 → sürüklerken 6, boş ray
   beyaz %16. Süre etiketleri artık MUTLAK DEĞİL: mobildeki gibi rayla aynı
   satırda akıyorlar (Row: etiket · 10 · Expanded(ray) · 10 · etiket).
   Eskiden `.ra-times` absolute + `.ra-scrub` margin:0 40px idi; "2:13:05"
   yedi hane 40px'lik oluğa sığmayıp rayın üstüne biniyordu, üstelik bar
   sönükken padding değişince etiketler yerinde kalıp kayıyordu. */
.ra-times { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-times > span { flex: none; pointer-events: none; }
/* İki etiket AYNI ağırlıkta değil (mobil _sideLabel): sol anlık konum ve
   daha parlak, sağ toplam süre ve kısık. İkisi de aynı solgunlukta olunca
   hangisinin canlı değer olduğu anlaşılmıyordu. */
#ra-time { color: rgba(255,255,255,.85); }
#ra-total { color: rgba(255,255,255,.55); }
.ra-times.is-scrubbing #ra-time { color: #fff; }
.ra-scrub { position: relative; flex: 1; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.ra-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3.5px; transform: translateY(-50%); border-radius: 99px; background: rgba(255,255,255,.16); transition: height .16s ease; }
.ra-scrub i { position: absolute; left: 0; top: 50%; width: 0; height: 3.5px; transform: translateY(-50%); border-radius: 99px; background: linear-gradient(90deg, #38BDF8, #8B5CF6); transition: height .16s ease; }
/* Topuzda KALICI mor halka vardı (box-shadow 0 0 0 3px): topuz her an
   "sürükleniyor" gibi duruyor, görsel çapı 13 yerine 19'a çıkıyordu.
   Mobilde duruk topuz DÜZ BEYAZ; halka yalnız hassas moda ait. */
.ra-scrub b { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: none; transition: width .16s ease, height .16s ease, box-shadow .16s ease; }
.ra-scrub.is-dragging::before, .ra-scrub.is-dragging i { height: 6px; }
.ra-scrub.is-dragging b { width: 16px; height: 16px; box-shadow: 0 0 10px rgba(139,92,246,.4); }
/* Sütunlar mobildeki gerçek genişlikler: hız 48 · ⤺15 50 · oynat 58 ·
   15⤻ 50 · kapat 44. İlk sütun 62 iken oynat düğmesi merkezden 9px sağa
   kaçıyordu. margin-top da 0: mobilde scrub ile kontrol arası boşluk yok. */
.ra-controls { height: 58px; display: grid; grid-template-columns: 48px 50px 58px 50px 44px; align-items: center; justify-content: space-between; margin-top: 0; overflow: hidden; transition: height .36s cubic-bezier(.22,.61,.36,1), opacity .36s ease; }
.ra-bar.is-idle .ra-controls, .iphone-screen.is-read-along.is-immersive .ra-controls { height: 0; opacity: 0; }
/* ÖZGÜLLÜK ARIZASI (2026-09-22): bu kural `.ra-controls button` (0,1,1)
   iken oynat düğmesi `.ra-play` (0,1,0) idi — yani `.ra-play`in beyaz
   zemini kaynak sırasından bağımsız olarak HİÇ uygulanmıyordu. Duraklatılmış
   düğme koyu cam zeminde koyu ikonla neredeyse görünmez oluyordu; renk
   ancak iki `!important` ile tutturulabilmişti. Çocuk seçicisi ikisini eşit
   özgüllüğe getiriyor, `!important`lar da gereksizleşiyor. */
.ra-controls > button { color: #fff; border: 0; background: transparent; padding: 0; }
/* Hız: mobil _readAlongSpeedButton — 48×44 kutu, sola dayalı, 17px/w500. */
.ra-controls > .ra-speed { width: 48px; height: 44px; display: flex; align-items: center; justify-content: flex-start; font-size: 17px; font-weight: 500; line-height: 1; }
/* Oynat: mobil RoundPlayButton(size: 58) — duruk beyaz daire + siyah ikon,
   çalarken mor daire + beyaz ikon + mor hale. İkon 58×0.57 ≈ 33. */
.ra-controls > .ra-play { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #000; background: #fff; box-shadow: none; transition: background .22s cubic-bezier(.22,.61,.36,1), color .22s ease, box-shadow .22s ease, transform .16s ease; }
.ra-play .mi { font-size: 33px; }
.iphone-screen[data-audio="playing"] .ra-controls > .ra-play { color: #fff; background: var(--accent-deep); box-shadow: 0 8px 26px rgba(124,58,237,.45); }
/* Basma geri bildirimi yoktu: transition listesinde transform vardı ama
   onu değiştiren hiçbir kural yoktu. Kardeşi .seek zaten böyle davranıyor. */
.ra-play:active { transform: scale(.96); }
.ra-controls > .ra-close { width: 44px; height: 44px; display: grid; place-items: center; color: rgba(255,255,255,.55); }
.ra-close .mi { font-size: 22px; }
.ra-undo { position: absolute; z-index: 26; left: 50%; bottom: 170px; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #fff; background: rgba(21,21,27,.9); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; opacity: 0; visibility: hidden; transition: .2s ease; }
.ra-undo.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.ra-undo .mi { font-size: 17px; color: #C4B5FD; }

/* ⤺15 / 15⤻ (SeekStepButton): 50×54, ok 30, sayı 11,5. */
.seek { position: relative; width: 50px; height: 54px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; transition: transform .14s ease; }
.seek svg { width: 30px; height: 30px; display: block; opacity: .92; }   /* mobil: ok %92, rakam %100 */
.seek svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.seek.fwd svg { transform: scaleX(-1); }
.seek b { position: absolute; left: 7px; bottom: 13px; font-size: 11.5px; font-weight: 500; line-height: 1; }
.seek.fwd b { left: auto; right: 7px; }
.seek:active { transform: scale(.88); }

/* ═══ PANELLER (showModalBottomSheet · kitandaPanelAnimasyonu 320/220 ms) ═══ */
.sheet { position: absolute; z-index: 50; inset: 0; visibility: hidden; pointer-events: none; }
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.38); opacity: 0; transition: opacity .32s ease; cursor: default; }
.sheet.is-open .sheet-backdrop { opacity: 1; }
.sheet.dim-strong .sheet-backdrop { background: rgba(0,0,0,.46); }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; box-sizing: border-box; overflow-y: auto; scrollbar-width: none; transform: translateY(104%); transition: transform .22s cubic-bezier(.4,0,1,1); }
.sheet-panel::-webkit-scrollbar { display: none; }
.sheet.is-open .sheet-panel { transform: none; transition: transform .32s cubic-bezier(.22,.61,.36,1); }
/* Kitanda cam paneli: blur 34 · #17172A %74 · köşe 34 · üst kenar beyaz %12 · üst parlama. */
.panel-glass { padding: 12px 18px 40px; color: #F4F1FA; border-radius: 34px 34px 0 0; border-top: 1.1px solid rgba(255,255,255,.12); background: rgba(23,23,42,.74); backdrop-filter: blur(34px); box-shadow: 0 -18px 42px rgba(0,0,0,.36); }
.panel-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 50%, rgba(0,0,0,.10)); }
.panel-glass > * { position: relative; }
.handle { display: block; width: 48px; height: 5px; margin: 0 auto 18px; border-radius: 99px; background: rgba(255,255,255,.34); box-shadow: 0 0 12px rgba(255,255,255,.1); }
.sheet-title { margin: 0 0 18px; text-align: center; font-size: 16px; font-weight: 900; }
/* Liquid glass eylem grubu: beyaz %7,5 kart, köşe 24, satırlar 66 px girintili ayraç. */
.lg-group { border-radius: 24px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); overflow: hidden; }
.lg-row { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; align-items: center; padding: 13px 14px; color: #F4F1FA; text-align: left; border: 0; background: transparent; }
.lg-row + .lg-row { border-top: 1px solid rgba(255,255,255,.07); }
.lg-row:active { background: rgba(255,255,255,.05); }
.lg-row .lg-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--ic, #9F7AEA) 20%, transparent); }
.lg-row .lg-ic .mi { font-size: 22px; }
.lg-row b { display: block; font-size: 15px; font-weight: 700; }
.lg-row small { display: block; margin-top: 2px; font-size: 12px; color: rgba(244,241,250,.58); }
.lg-row > .mi:last-child { display: none; }

/* Kâğıt renkli panel (okuma ayarları, sayfa seçici, favori onayı, Lada sonucu). */
.panel-paper { color: var(--p-ink); background: var(--p-bg); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
.panel-paper .handle { background: color-mix(in srgb, var(--p-ink) 20%, transparent); box-shadow: none; }

/* Favori Cümle onayı (_showHighlightConfirmSheet): beyaz / #1C1C1E, köşe 24. */
.panel-confirm { padding: 16px 20px 40px; color: #1a1a1a; background: #fff; border-radius: 24px 24px 0 0; }
.iphone-screen[data-paper="midnight"] .panel-confirm { color: #fff; background: #1C1C1E; }
.panel-confirm .handle { width: 40px; height: 4px; margin-bottom: 16px; background: rgba(128,128,128,.4); box-shadow: none; }
.panel-confirm h4 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.quote-box { width: fit-content; max-width: 100%; box-sizing: border-box; max-height: 180px; overflow-y: auto; padding: 14px 16px; border-radius: 12px; background: rgba(255,215,0,.18); border: 1px solid rgba(255,215,0,.5); font: italic 14px/1.6 Georgia, serif; scrollbar-width: none; }
.quote-box::-webkit-scrollbar { display: none; }
.gbtn-row { display: flex; gap: 8px; margin-top: 8px; }
.gbtn-row .gbtn { flex: 1; height: 50px; }
/* _glassSheetBtn: renkli cam düğme, üstte dolu altta hafif, kenar 1,1. */
.gbtn { --c: #8B5CF6; width: 100%; height: 54px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border-radius: 16px; color: var(--c); font-size: 14.5px; font-weight: 700; border: 1.1px solid color-mix(in srgb, var(--c) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 20%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); backdrop-filter: blur(18px); transition: transform .12s ease, filter .12s ease; }
.gbtn.prominent { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, transparent), color-mix(in srgb, var(--c) 13%, transparent)); }
.gbtn:first-of-type { margin-top: 0; }
.gbtn .mi { font-size: 19px; }
.gbtn:active { transform: scale(.98); filter: brightness(1.08); }
.gbtn.ink { --c: color-mix(in srgb, #1a1a1a 85%, transparent); }
.iphone-screen[data-paper="midnight"] .gbtn.ink { --c: rgba(255,255,255,.85); }
.sheet-cancel { display: block; width: 100%; margin-top: 14px; padding: 10px; border: 0; background: transparent; color: rgba(60,60,67,.6); font-size: 15px; font-weight: 700; }
.iphone-screen[data-paper="midnight"] .sheet-cancel { color: rgba(255,255,255,.55); }

/* Lada sonucu (_showNoteResultSheet): kâğıt + üstte vurgu tonu, köşe 30, kenar vurgu %18. */
.panel-lada { --c: #B6414C; padding: 12px 0 34px; color: var(--p-ink); border-radius: 30px 30px 0 0; border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); border-bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--p-bg)) 0%, var(--p-bg) 23%); box-shadow: 0 -8px 32px -8px rgba(0,0,0,.22); }
.panel-lada .handle { width: 40px; height: 4px; }
.lada-head { display: flex; gap: 13px; align-items: flex-start; padding: 2px 10px 18px 22px; }
.lada-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 20%, transparent); }
.lada-ic .mi { font-size: 22px; }
.lada-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.15px; color: var(--c); }
.lada-headline { margin-top: 6px; font-size: 22px; line-height: 1.12; font-weight: 800; }
.lada-support { margin-top: 5px; font-size: 12.5px; color: color-mix(in srgb, var(--p-ink) 62%, transparent); }
.lada-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: color-mix(in srgb, var(--p-ink) 60%, transparent); background: color-mix(in srgb, var(--p-ink) 6%, transparent); }
.lada-close .mi { font-size: 20px; }
.lada-quote { margin: 0 22px; padding: 12px 14px; max-height: 150px; overflow-y: auto; scrollbar-width: none; border-left: 3px solid var(--c); border-radius: 6px 12px 12px 6px; background: color-mix(in srgb, var(--p-ink) 4%, transparent); font: italic 13.5px/1.55 Georgia, serif; color: color-mix(in srgb, var(--p-ink) 80%, transparent); }
.lada-body { margin: 16px 22px 0; font-size: 15px; line-height: 1.62; white-space: pre-line; }
.lada-body.is-thinking { display: flex; gap: 5px; align-items: center; min-height: 48px; }
.lada-body.is-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: ladaDot .8s ease-in-out infinite alternate; }
.lada-body.is-thinking i:nth-child(2) { animation-delay: .15s; } .lada-body.is-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes ladaDot { to { transform: translateY(-5px); opacity: .4; } }
.lada-foot { display: flex; align-items: center; gap: 6px; margin: 18px 22px 0; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--p-ink) 55%, transparent); }
.lada-foot .mi { font-size: 16px; color: #22C55E; }

/* Okuma Ayarları (ReaderSettingsPanel). */
.panel-settings { max-height: 78%; padding: 10px 20px 34px; }
.panel-settings .handle { margin: 4px auto 18px; }
.set-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .4px; color: color-mix(in srgb, var(--p-ink) 78%, transparent); }
.set-block { margin-bottom: 22px; transition: opacity .18s ease; }
.paper-row { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.paper-row::-webkit-scrollbar { display: none; }
.swatch { flex: 0 0 78px; height: 96px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; border: 1.6px solid transparent; background: transparent; color: color-mix(in srgb, var(--p-ink) 70%, transparent); transition: border-color .16s; }
.swatch.is-on { border-color: var(--p-ink); color: var(--p-ink); }
.swatch i { flex: 1; display: grid; place-items: center; border-radius: 8px; font-size: 18px; font-weight: 800; font-style: normal; box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.swatch b { font-size: 10.5px; font-weight: 700; }
.swatch[data-paper="vellum"] i { background: linear-gradient(135deg,#F0E2C0,#E8D8B0); color: #2A2014; }
.swatch[data-paper="linen"] i { background: linear-gradient(135deg,#F8F4EC,#EFE9DD); color: #1F1A14; }
.swatch[data-paper="parchment"] i { background: linear-gradient(135deg,#E2D2A8,#D6C390); color: #3A2615; }
.swatch[data-paper="midnight"] i { background: linear-gradient(135deg,#1A1612,#221C16); color: #E8DCC4; }
.range-icons { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: color-mix(in srgb, var(--p-ink) 78%, transparent); }
.range-icons .mi.sm { font-size: 14px; } .range-icons .mi.lg { font-size: 22px; } .range-icons .mi.md { font-size: 18px; }
.set-range { width: 100%; height: 36px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; }
.set-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--p-ink) var(--fill, 40%), color-mix(in srgb, var(--p-ink) 16%, transparent) var(--fill, 40%)); }
.set-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--p-ink); box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.set-range::-moz-range-track { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--p-ink) 16%, transparent); }
.set-range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--p-ink); }
.set-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--p-ink); }
.font-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; }
.font-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; border-radius: 14px; color: var(--p-ink); border: 1px solid color-mix(in srgb, var(--p-ink) 14%, transparent); background: color-mix(in srgb, var(--p-ink) 5%, transparent); transition: .18s ease; }
.font-btn i { font-size: 20px; line-height: 1; font-style: normal; font-weight: 600; }
.font-btn b { font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--p-ink) 62%, transparent); }
.font-btn[data-font="serif"] i { font-family: Georgia, serif; } .font-btn[data-font="mono"] i { font-family: Courier, monospace; }
.font-btn.is-on { color: var(--accent); border: 1.6px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 4px 12px rgba(139,92,246,.22); }
.font-btn.is-on b { color: var(--accent); font-weight: 700; }
.toggle-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 46px; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--p-ink) 10%, transparent); background: color-mix(in srgb, var(--p-ink) 5%, transparent); }
.toggle-row > .mi { font-size: 20px; color: color-mix(in srgb, var(--p-ink) 85%, transparent); }
.toggle-row b { display: block; font-size: 14px; }
.toggle-row small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: color-mix(in srgb, var(--p-ink) 65%, transparent); }
.switch { position: relative; width: 46px; height: 27px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--p-ink) 18%, transparent); transition: background .22s; }
.switch i { position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: left .22s cubic-bezier(.22,.61,.36,1); }
.switch.is-on { background: #34C759; }
.switch.is-on i { left: 22px; }
.set-info { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--p-ink) 10%, transparent); background: color-mix(in srgb, var(--p-ink) 5%, transparent); font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--p-ink) 78%, transparent); }
.set-info .mi { font-size: 16px; }
/* Hayalet mod: sürüklerken panel şeffaflaşır, yalnız aktif blok altta kalır. */
.sheet.is-ghost .sheet-backdrop { opacity: 0; }
.sheet.is-ghost .panel-settings { background: transparent; box-shadow: none; overflow: visible; }
.sheet.is-ghost .panel-settings > *:not(.is-ghost-active) { opacity: 0; pointer-events: none; }
.sheet.is-ghost .set-block.is-ghost-active { position: absolute; left: 12px; right: 12px; bottom: 26px; margin: 0; padding: 12px 14px 8px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--p-ink) 16%, transparent); background: color-mix(in srgb, var(--p-bg) 78%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* Sayfaya Git (_PagePickerSheet): kâğıt %72 + blur 22, köşe 26. */
.panel-pages { padding: 10px 22px 36px; text-align: center; border-radius: 26px 26px 0 0; background: color-mix(in srgb, var(--p-bg) 72%, transparent); backdrop-filter: blur(22px); border-top: 1px solid color-mix(in srgb, var(--p-ink) 14%, transparent); box-shadow: none; }
.panel-pages .handle { width: 40px; height: 4px; margin: 2px auto 16px; }
.panel-pages h4 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.panel-pages p { margin: 4px 0 18px; font-size: 12.5px; font-weight: 500; color: color-mix(in srgb, var(--p-ink) 55%, transparent); }
.page-num { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 26px; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); backdrop-filter: blur(14px); }
.page-num strong { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.page-num span { font-size: 16px; font-weight: 700; color: color-mix(in srgb, var(--p-ink) 45%, transparent); }
.page-ctrl { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; margin-top: 16px; }
.page-ctrl button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--p-ink); border: 1px solid color-mix(in srgb, var(--p-ink) 13%, transparent); background: rgba(255,255,255,.36); }
.iphone-screen[data-paper="midnight"] .page-ctrl button { background: rgba(255,255,255,.08); }
.page-ctrl button .mi { font-size: 22px; }
.page-go { width: 100%; height: 52px; margin-top: 14px; color: #fff; border-radius: 16px; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(180deg, rgba(139,92,246,.92), rgba(124,58,237,.76)); box-shadow: 0 6px 18px rgba(124,58,237,.28); font-size: 15px; font-weight: 800; }

/* Hız paneli (playback_speed_sheet): cam, ön ayarlar radyo, özel kaydırıcı. */
.speed-opt { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; padding: 11px 0; color: #fff; text-align: left; border: 0; background: transparent; }
.speed-opt + .speed-opt { border-top: 1px solid rgba(255,255,255,.06); }
.speed-opt b { font-size: 15px; font-weight: 500; }
.speed-opt small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.52); }
.speed-opt i { position: relative; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }
.speed-opt.is-on i { border: 2px solid var(--accent-deep); }
.speed-opt.is-on i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.speed-custom { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.speed-custom label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.speed-custom label span { color: #C4B5FD; }
.speed-custom input { width: 100%; margin: 10px 0 0; accent-color: var(--accent); }
.speed-apply { width: 100%; height: 46px; margin-top: 10px; color: #fff; border: 1px solid rgba(177,147,255,.28); border-radius: 13px; background: linear-gradient(135deg,#7654E8,#9A5EEA); font-size: 14px; font-weight: 800; }

/* Uyku zamanlayıcısı. */
.sleep-fade { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.sleep-fade b { display: block; font-size: 14px; } .sleep-fade small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.52); }
.sleep-fade .switch { background: rgba(255,255,255,.16); }
.sleep-list { margin-top: 12px; }

/* Paylaşım paneli (kitanda_share_sheet). */
.share-head { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; align-items: center; }
.share-head img { width: 52px; height: 74px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.34); }
.share-head strong { display: block; font-size: 16px; font-weight: 800; }
.share-head span { display: block; margin-top: 3px; font-size: 13px; color: rgba(244,241,250,.6); }
.share-head small { display: block; margin-top: 7px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #C4B5FD; }
.share-quote { margin-top: 14px; padding: 12px 14px; max-height: 118px; overflow-y: auto; scrollbar-width: none; border-radius: 14px; border: 1px solid rgba(167,135,255,.16); background: rgba(139,92,246,.08); font: italic 13px/1.5 Georgia, serif; color: rgba(255,255,255,.82); }
.share-primary { width: 100%; height: 52px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: linear-gradient(135deg, #7C3AED, #9F7AEA); box-shadow: 0 10px 24px rgba(124,58,237,.3); font-size: 15px; font-weight: 800; }
.share-secondary { width: 100%; height: 50px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.06); font-size: 14.5px; font-weight: 700; }
.share-targets { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 18px; }
.share-target { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; color: rgba(255,255,255,.78); border: 0; background: transparent; font-size: 11px; font-weight: 600; }
.share-target i { width: 56px; height: 56px; display: grid; place-items: center; color: #fff; border-radius: 50%; font-size: 24px; font-style: normal; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 7px 17px rgba(0,0,0,.18); }
.share-target .mi { font-size: 24px; }
.t-wa i { background: linear-gradient(145deg,#25D366,#128C7E); }
.t-sms i { background: linear-gradient(145deg,#34C759,#248A3D); }
.t-ig i { background: linear-gradient(145deg,#F58529,#DD2A7B 56%,#8134AF); }
.t-copy i, .t-more i { background: linear-gradient(145deg,#46465D,#29293A); }
.share-target:active i { transform: scale(.94); }

/* Instagram hikâye önizlemesi: favori cümle kartı kâğıt sayfada. */
.story { position: absolute; z-index: 70; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: scale(1.03); pointer-events: none; transition: opacity .3s ease, transform .36s cubic-bezier(.22,.61,.36,1), visibility .3s; background: #000; }
.story.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.story-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 64px 18px 0; color: #fff; }
.story-avatar { width: 34px; height: 34px; padding: 2px; border-radius: 50%; background: linear-gradient(145deg,#F9CE34,#EE2A7B,#6228D7); }
.story-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #2c1745; box-sizing: border-box; }
.story-head b { font-size: 13px; } .story-head small { color: rgba(255,255,255,.62); font-size: 12px; }
.story-head button { margin-left: auto; width: 36px; height: 36px; padding: 0; border: 0; color: #fff; background: transparent; }
.story-head button .mi { font-size: 26px; }
.story-link { position: relative; z-index: 2; width: max-content; max-width: 86%; display: flex; align-items: center; gap: 7px; margin: 22px auto 0; padding: 9px 13px; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(20,10,31,.32); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; }
.story-link .mi { font-size: 16px; }
.story-done { position: absolute; z-index: 2; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 12px 18px; color: #1D1425; border: 0; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.story-done .mi { font-size: 18px; color: #34A853; }

/* ── DIŞ UYGULAMAYA DEVİR (WhatsApp · Mesaj) ──
   Kitanda burada devreden çıkar. Tam ekran alır çünkü uygulamada da öyle olur. */
.handoff { position: absolute; z-index: 72; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .26s; display: flex; flex-direction: column; background: #0B141A; color: #fff; }
.handoff.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.handoff[data-app="sms"] { background: #000; }
.ho-return { position: absolute; z-index: 5; left: 12px; top: 15px; display: inline-flex; align-items: center; gap: 1px; padding: 3px 11px 3px 6px; border: 0; border-radius: 999px; background: rgba(124,58,237,.94); color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.34); }
.ho-return .mi { font-size: 13px; }
.ho-app { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 42px; }
.ho-head { flex: none; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 14px 12px; background: #1F2C34; }
.handoff[data-app="sms"] .ho-head { background: rgba(28,28,30,.96); border-bottom: 1px solid rgba(255,255,255,.08); }
.ho-head b { font-size: 15.5px; font-weight: 700; }
.ho-head small { display: block; margin-top: 1px; font-size: 11.5px; color: rgba(255,255,255,.52); }
.ho-head > .mi { font-size: 20px; color: rgba(255,255,255,.6); }
.ho-cancel { padding: 0; border: 0; background: transparent; color: #8696A0; font-size: 13.5px; font-weight: 700; }
.handoff[data-app="sms"] .ho-cancel { color: #0A84FF; }
.ho-cancel .mi { font-size: 20px; }
.ho-ava { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 800; color: #0B141A; background: linear-gradient(135deg,#25D366,#128C7E); }
.ho-search { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 4px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.45); font-size: 13px; }
.ho-search .mi { font-size: 18px; }
.ho-list { flex: 1; min-height: 0; overflow: hidden; padding: 4px 6px; }
.ho-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: #fff; text-align: left; }
.ho-row:active { background: rgba(255,255,255,.07); }
.ho-row i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 15px; font-weight: 800; color: #0B141A; background: linear-gradient(135deg,#25D366,#128C7E); }
.ho-row b { display: block; font-size: 15px; font-weight: 600; }
.ho-row small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.42); }
.ho-to { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.ho-to > span:first-child { color: rgba(255,255,255,.42); }
.ho-to em { width: 1.5px; height: 17px; background: #0A84FF; animation: hoCaret 1.05s steps(1) infinite; }
.ho-plus { margin-left: auto; color: #0A84FF; font-size: 21px; }
@keyframes hoCaret { 50% { opacity: 0; } }
.ho-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 12px 4px; background: #0B141A url(../assets/chat_bg_dark.png) center / 300px repeat; }
.handoff[data-app="sms"] .ho-thread { background: #000; }
.ho-bubble { max-width: 85%; align-self: flex-end; padding: 7px 9px 5px; border-radius: 12px 12px 4px 12px; background: #005C4B; font-size: 13.5px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.26); }
.ho-prev { display: block; margin: 0 0 6px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.26); }
.ho-prev img { display: block; width: 100%; height: 84px; object-fit: cover; }
.ho-prev > span { display: block; padding: 6px 8px; }
.ho-prev b { display: block; font-size: 12.5px; font-weight: 700; }
.ho-prev small { display: block; margin-top: 1px; font-size: 11px; color: rgba(255,255,255,.55); }
.ho-time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; font-size: 10px; color: rgba(255,255,255,.55); }
.ho-time .mi { font-size: 13px; color: #53BDEB; }
.ho-input { flex: none; display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 8px; align-items: end; padding: 8px 10px 10px; }
.ho-field { max-height: 140px; overflow: hidden; padding: 9px 12px; border-radius: 18px; background: #1F2C34; color: #E9EDEF; font-size: 13.5px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; }
.handoff[data-app="sms"] .ho-field { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ho-send { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #0B141A; background: #00A884; }
.handoff[data-app="sms"] .ho-send { width: 34px; height: 34px; margin-bottom: 4px; justify-self: end; color: #fff; background: #0A84FF; }
.ho-send .mi { font-size: 22px; }
.ho-note { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px 34px; background: rgba(10,8,16,.94); border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; line-height: 1.45; }
.ho-note .mi { flex: none; font-size: 14px; color: #C4B5FD; }

/* ── ÜST BİLDİRİM (showTopNoticeBanner) + Instagram tarzı uygulama içi banner ── */
.notice { position: absolute; z-index: 80; left: 12px; right: 12px; top: 66px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; color: #fff; --nb: #15151B; background: linear-gradient(135deg, color-mix(in srgb, var(--nb) 72%, transparent), color-mix(in srgb, var(--nb) 52%, transparent)); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(22px); box-shadow: 0 10px 26px -2px rgba(0,0,0,.3); transform: translateY(calc(-100% - 90px)); transition: transform .32s cubic-bezier(.22,.61,.36,1); will-change: transform; touch-action: none; }
.notice.is-visible { transform: none; }
.notice.is-leaving { transform: translateY(calc(-100% - 90px)); transition-duration: .17s; transition-timing-function: ease-in; }
.notice.has-title { align-items: flex-start; }
.notice > .mi { flex: none; font-size: 20px; margin-top: 1px; }
.notice-text { flex: 1; min-width: 0; }
.notice b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.notice p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.notice.has-title p { margin-top: 2px; font-weight: 500; color: rgba(255,255,255,.78); }
.notice-action { flex: none; padding: 4px; border: 0; background: transparent; color: #C4B5FD; font-size: 13px; font-weight: 800; }
.inapp { position: absolute; z-index: 80; left: 10px; right: 10px; top: 66px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, rgba(21,21,27,.72), rgba(21,21,27,.52)); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(22px); box-shadow: 0 10px 26px -2px rgba(0,0,0,.3); transform: translateY(calc(-100% - 90px)); transition: transform .32s cubic-bezier(.22,.61,.36,1); touch-action: none; }
.inapp.is-visible { transform: none; }
.inapp.is-leaving { transform: translateY(calc(-100% - 90px)); transition-duration: .17s; transition-timing-function: ease-in; }
.inapp-avatar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,58,237,.22); color: #A78BFA; overflow: hidden; }
.inapp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inapp-avatar .mi { font-size: 22px; }
.inapp b { display: block; font-size: 14px; font-weight: 800; }
.inapp p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.78); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inapp small { margin-left: auto; flex: none; align-self: flex-start; font-size: 11px; color: rgba(255,255,255,.5); }

/* ═══ DİNLE (AudioBookLandingScreen) ══════════════════════════════════════ */
.scr-listen { --cov: #6B4A2E; --cov-accent: #B07A4A; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--cov) 22%, #000) 0%, color-mix(in srgb, var(--cov) 10%, #000) 45%, #050406 100%); transition: background .55s ease; }   /* uygulama: neredeyse simsiyah zemin, kapak renginden çok hafif ton */
.ls-aura { position: absolute; left: 50%; top: 8%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cov-accent) 9%, transparent), transparent 62%); pointer-events: none; }   /* uygulama: zemin simsiyah, kapak çevresinde çok hafif parıltı */
.ls-dim { position: absolute; inset: 0; background: rgba(0,0,0,.78); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.scr-listen.is-scrubbing .ls-dim { opacity: 1; }
.ls-body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 72px 22px 48px; box-sizing: border-box; }
.ls-top { display: flex; align-items: center; gap: 10px; height: 48px; }
.glass-circle { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); box-shadow: 0 10px 18px rgba(0,0,0,.22); }
.glass-circle .mi { font-size: 30px; }
.glass-icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 16px; color: #fff; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.glass-icon .mi { font-size: 24px; }
.glass-icon.is-saved { color: #FB7185; }
.ls-cover-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 0; overflow: hidden; }
.ls-cover { position: relative; height: 100%; max-height: 420px; width: auto; max-width: 100%; }
.ls-cover::before { content: ""; position: absolute; inset: 30% 4% -4%; border-radius: 40%; background: color-mix(in srgb, var(--cov-accent) 14%, transparent); filter: blur(22px); }
.ls-cover img { position: relative; display: block; height: 100%; width: auto; max-width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 44px rgba(0,0,0,.48); }
.ls-title-row { display: grid; grid-template-columns: minmax(0,1fr) 48px 48px; gap: 14px; align-items: end; margin-top: 6px; }
.ls-title strong { display: block; font-size: 28px; font-weight: 600; line-height: 1.08; }
.ls-title span { display: block; margin-top: 7px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.64); }
.ls-dimmable { transition: opacity .22s ease; }
.scr-listen.is-scrubbing .ls-dimmable { opacity: .18; }
/* AudioProgressBar: ray 6, dolgu 38BDF8→8B5CF6 + parıltı, topuz 20 beyaz. */
/* Kısmi sesli kitap bandı (AudioBookLandingScreen). */
.ls-progress { position: relative; height: 30px; display: flex; align-items: center; margin-top: 18px; cursor: pointer; touch-action: none; }
.ls-progress::before { content: ""; position: absolute; left: 0; right: 0; height: var(--tr, 6px); border-radius: 99px; background: rgba(255,255,255,.12); transition: height .16s ease, box-shadow .16s ease; }
.ls-progress.lvl-1::before { box-shadow: 0 0 0 1px rgba(139,92,246,.3); background: rgba(255,255,255,.18); }
.ls-progress.lvl-2::before { box-shadow: 0 0 0 1px rgba(139,92,246,.55); background: rgba(255,255,255,.18); }
.ls-buffer { position: absolute; left: 0; width: 80%; height: var(--tr, 6px); border-radius: 99px; background: rgba(255,255,255,.2); transition: height .16s ease; }
.ls-fill { position: absolute; left: 0; width: 0; height: var(--tr, 6px); border-radius: 99px; background: linear-gradient(90deg, #38BDF8, #8B5CF6); box-shadow: 0 0 14px rgba(56,189,248,.26); transition: height .16s ease; }
.ls-progress.is-dragging .ls-fill { box-shadow: 0 0 22px 1px rgba(139,92,246,.45); }
.ls-thumb { position: absolute; left: 0; width: var(--th, 20px); height: var(--th, 20px); transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.34); transition: width .16s, height .16s, box-shadow .16s; }
.ls-progress.is-dragging .ls-thumb { box-shadow: 0 4px 14px rgba(139,92,246,.45); }
.ls-progress.lvl-1 .ls-thumb { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(139,92,246,.45); }
.ls-progress.lvl-2 .ls-thumb { box-shadow: 0 0 0 3.5px var(--accent), 0 4px 14px rgba(139,92,246,.45); }
.ls-times { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-times span:last-child { color: rgba(255,255,255,.72); }
.ls-controls { height: 98px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.ls-speed { width: 54px; height: 54px; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; font-size: 18px; font-weight: 500; }
.ls-sleep { width: 54px; height: 54px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.94); text-align: right; position: relative; }
.ls-sleep .mi { font-size: 29px; }
.ls-sleep.is-on::after { content: "✓"; position: absolute; right: 2px; bottom: 10px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 99px; background: #070910; color: #fff; font-size: 10px; font-weight: 900; }
/* RoundPlayButton 98: beyaz; çalarken 7C3AED + mor gölge. */
.round-play { width: 98px; height: 98px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #000; background: #fff; transition: background .22s cubic-bezier(.22,.61,.36,1), color .22s, box-shadow .22s, transform .16s; }
.round-play .mi { font-size: 56px; }
.round-play.is-playing { color: #fff; background: var(--accent-deep); box-shadow: 0 8px 26px rgba(124,58,237,.45); }
.round-play:active { transform: scale(.96); }
.ls-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; height: 44px; }
.ls-mini { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 16px; color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); transition: .2s ease; }
.ls-mini .mi { font-size: 24px; }
.ls-mini.is-on { color: rgba(34,197,94,.9); background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.42); }
.airplay { position: relative; width: 26px; height: 26px; display: block; }
.airplay::before { content: ""; position: absolute; left: 3px; top: 1px; width: 20px; height: 15px; border: 2px solid #fff; border-radius: 4px; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 76% 100%, 50% 62%, 24% 100%, 0 100%); }
.airplay::after { content: ""; position: absolute; left: 6px; bottom: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #fff; }
/* Sürükleme panosu: büyük süre + kademe. */
.ls-scrub-overlay { position: absolute; z-index: 5; left: 0; right: 0; top: 30%; text-align: center; color: #fff; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.scr-listen.is-scrubbing .ls-scrub-overlay { opacity: 1; }
.ls-scrub-overlay small { display: block; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.62); }

/* ═══ SPRITZ (SpritzScreen) ═══════════════════════════════════════════════ */
.scr-spritz { background: var(--p-bg); }
.sp-head { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: 58px 16px 0; transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1); }
.sp-head .rd-topbar { position: static; height: auto; padding: 8px 0 8px; background: transparent; border: 0; }
.sp-progress { height: 2px; background: color-mix(in srgb, var(--p-ink) 8%, transparent); }
.sp-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s linear; }
.scr-spritz.is-focus .sp-head { opacity: 0; transform: translateY(-22px); pointer-events: none; }
.sp-stage { position: absolute; left: 0; right: 0; top: 120px; bottom: 290px; z-index: 2; display: grid; place-items: center; cursor: pointer; transition: top .42s cubic-bezier(.22,.61,.36,1), bottom .42s cubic-bezier(.22,.61,.36,1); }   /* uygulama: kelime üst bar ile alt panel ARASINDA ortalanır */
.scr-spritz.is-focus .sp-stage { top: 0; bottom: 250px; }   /* odakta üst bar/alt panel kalkar, kelime yukarı kayar */
.orp { position: relative; width: 100%; height: 80px; transition: transform .42s cubic-bezier(.22,.61,.36,1); font-family: var(--reader-font); font-size: 46px; font-weight: 700; letter-spacing: -.5px; line-height: 1; white-space: nowrap; }
.scr-spritz.is-focus .orp { transform: scale(1.075); }
.orp span { position: absolute; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--p-ink) 80%, transparent); }
.orp .orp-f { color: #FF3B30; }
.orp .orp-f::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -8px; height: 3px; border-radius: 2px; background: #FF3B30; }
.orp .orp-b { text-align: right; }
.sp-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1); }
.scr-spritz.is-focus .sp-foot { opacity: 0; transform: translateY(28px); pointer-events: none; }
.scr-spritz.is-focus ~ .statusbar > span:not(.dynamic-island), .scr-spritz.is-focus ~ .home-indicator { opacity: 0; }
.sp-panel { padding: 8px 24px; }
.wpm-bar { position: relative; height: 44px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--p-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--p-ink) 18%, transparent); cursor: pointer; touch-action: none; transition: border-color .16s, box-shadow .16s; }
.wpm-bar.is-dragging { border-color: rgba(139,92,246,.55); box-shadow: 0 4px 24px rgba(139,92,246,.38); }
.wpm-fill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 40%; border-radius: 999px; background: linear-gradient(90deg, rgba(139,92,246,.56), rgba(51,192,255,.46)); transition: width .16s cubic-bezier(.22,.61,.36,1); }
.wpm-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.96); font-size: 13px; font-weight: 800; letter-spacing: .15px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wpm-label .mi { font-size: 18px; }
.chip-row { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; color: color-mix(in srgb, var(--p-ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--p-ink) 14%, transparent); background: color-mix(in srgb, var(--p-ink) 4%, transparent); font-size: 12.5px; font-weight: 700; transition: .16s ease; }
.chip .mi { font-size: 16px; }
.chip.is-on { color: var(--p-ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chip.is-on .mi { color: var(--accent); }
.sp-controls { padding: 10px 18px 42px; background: color-mix(in srgb, var(--p-bg) 96%, transparent); border-top: 1px solid color-mix(in srgb, var(--p-ink) 8%, transparent); box-shadow: 0 -8px 18px rgba(0,0,0,.1); }
.sp-pagerow { display: flex; align-items: center; gap: 5px; padding-bottom: 6px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--p-ink) 65%, transparent); }
.sp-pagerow .mi { font-size: 13px; color: color-mix(in srgb, var(--p-ink) 45%, transparent); }
.sp-pagerow.is-pausing { color: var(--accent); font-weight: 800; }
.sp-pagerow.is-pausing .mi { color: var(--accent); }
.sp-row { display: flex; align-items: center; justify-content: center; gap: 34px; }
.scr-spritz .seek { color: var(--p-ink); }
.round-play.sp-main { width: 84px; height: 84px; }
.round-play.sp-main .mi { font-size: 48px; }
.round-play.is-holding { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 26px rgba(124,58,237,.45); animation: holdPulse .9s ease-in-out infinite; }
@keyframes holdPulse { 50% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--accent) 6%, transparent), 0 8px 26px rgba(124,58,237,.45); } }
/* Odak modu kompakt kontrolü (hap): 146×54. */
.sp-compact { position: absolute; z-index: 6; left: 50%; bottom: 44px; transform: translate(-50%, 24px) scale(.92); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .42s cubic-bezier(.22,.61,.36,1); }
.scr-spritz.is-focus .sp-compact { opacity: 1; transform: translate(-50%,0) scale(1); pointer-events: auto; }
.sp-compact button { width: 146px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border-radius: 999px; color: #fff; border: 0; background: linear-gradient(90deg, #7C3AED, #38BDF8); font-size: 15px; font-weight: 800; box-shadow: 0 10px 26px rgba(124,58,237,.35); }
.sp-compact button.is-playing { background: linear-gradient(90deg, #7C3AED, #33C0FF); box-shadow: 0 10px 28px rgba(124,58,237,.34); }
.sp-compact button .mi { font-size: 22px; }
/* WPM sürükleme karartması + panosu. */
.sp-dim { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.scr-spritz.is-wpm-drag .sp-dim { opacity: 1; }
.sp-wpm-overlay { position: absolute; z-index: 7; left: 0; right: 0; top: 60%; text-align: center; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .24s ease, transform .24s ease; pointer-events: none; }
.scr-spritz.is-wpm-drag .sp-wpm-overlay { opacity: 1; transform: none; }
.sp-wpm-overlay strong { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-wpm-overlay strong span { font-size: 16px; color: var(--accent); }
.sp-wpm-overlay strong small { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.62); margin-left: 10px; }
.sp-wpm-overlay p { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }

/* ── OTOMATİK DEMO: parmak + rehber kartı ─────────────────────────────────── */
.finger { --fx: 50%; --fy: 50%; position: absolute; z-index: 90; left: var(--fx); top: var(--fy); width: 34px; height: 105px; border-radius: 22px 22px 16px 16px; pointer-events: none; opacity: 0; transform: translate(-14px,10px) rotate(-24deg) scale(.78); transform-origin: 17px 5px; background: linear-gradient(90deg,#BB7958 0%,#E8AA83 38%,#F4BD95 68%,#C78562 100%); border: 1px solid rgba(255,232,214,.5); box-shadow: 8px 13px 24px rgba(0,0,0,.34), inset -5px 0 8px rgba(117,58,38,.16); transition: left .62s cubic-bezier(.22,.61,.36,1), top .62s cubic-bezier(.22,.61,.36,1), opacity .25s ease, transform .22s ease; }
.finger.is-visible { opacity: .92; transform: translate(-14px,10px) rotate(-24deg) scale(1); }
.finger.is-tapping { transform: translate(-14px,5px) rotate(-24deg) scale(.96); }
.finger.is-pressing { transform: translate(-14px,3px) rotate(-24deg) scale(.94); }
.finger-nail { position: absolute; left: 8px; top: 5px; width: 17px; height: 25px; border-radius: 12px 12px 9px 9px; background: linear-gradient(155deg,#F7D1BD,#EEB79D); box-shadow: inset 0 0 0 1px rgba(142,81,62,.2); }
.finger-ring { position: absolute; left: 9px; top: -7px; width: 16px; height: 16px; border: 2px solid rgba(199,172,255,.92); border-radius: 50%; opacity: 0; }
.finger.is-tapping .finger-ring { animation: fingerTap .6s ease-out; }
.finger.is-pressing .finger-ring { opacity: .9; animation: fingerHold .76s ease-in-out both; }
@keyframes fingerTap { 0% { opacity: .95; transform: scale(.55); } 100% { opacity: 0; transform: scale(2.5); } }
@keyframes fingerHold { 0% { transform: scale(.6); } 55%,100% { transform: scale(2.1); opacity: .12; } }
.finger.is-swiping-left { transform: translate(-14px,10px) rotate(-35deg) scale(1); }
.finger.is-swiping-right { transform: translate(-14px,10px) rotate(-13deg) scale(1); }
.finger-second { position: absolute; z-index: -1; left: 20px; top: 11px; width: 31px; height: 96px; display: none; border: 1px solid rgba(255,232,214,.45); border-radius: 20px 20px 15px 15px; background: linear-gradient(90deg,#AE6F51,#DEA07A 44%,#EFB68D 72%,#BF7B5D); box-shadow: 8px 13px 20px rgba(0,0,0,.26); }
.finger-second i { position: absolute; left: 7px; top: 5px; width: 16px; height: 23px; border-radius: 11px 11px 8px 8px; background: linear-gradient(155deg,#F4CBB7,#E8AD91); }
.finger.is-two .finger-second { display: block; }
/* height:auto (2026-09-23, telefonda "saçmalıyor"un asıl sebebi): max-content
   Safari'de bu mutlak kutuda uygulanmıyor, yükseklik telefonun tamamı (956px)
   hesaplanıyor ve kart ekranın %80'ini kaplayan koyu bir panele dönüşüyordu.
   Kart her durumda TEK kenara bağlı (bottom ya da is-top'ta top), auto yeter. */
.coach { position: absolute; z-index: 85; left: 50%; bottom: 118px; width: max-content; max-width: calc(100% - 44px); height: auto; display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; gap: 10px; align-items: center; padding: 10px 10px 10px 13px; color: #fff; text-align: left; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(21,21,27,.9); box-shadow: 0 14px 34px rgba(0,0,0,.36); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translate(-50%,8px) scale(.96); transition: opacity .28s ease, transform .38s cubic-bezier(.22,.61,.36,1), visibility .28s; }
.coach.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0) scale(1); }
.coach > .mi { width: 36px; height: 36px; display: grid; place-items: center; color: #D7C7FF; border-radius: 11px; background: rgba(139,92,246,.18); font-size: 20px; }
.coach-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.coach b { font-size: 12.5px; line-height: 1.2; }
.coach small { color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.35; white-space: normal; }
.coach > button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.06); }
.coach > button .mi { font-size: 16px; }
.iphone-screen[data-mode="listen"] .coach { top: 132px; bottom: auto; }
/* `:not(.is-top)` ŞART (2026-09-22 arızası): bu iki kural (0,3,0 ve 0,4,0)
   aşağıdaki `.coach.is-top { top:112px; bottom:auto }` kuralından (0,2,0) daha
   özgüldü. Panel açılınca placeCoach() karta `is-top` ekliyor, `top:112px`
   tutuyor ama `bottom:auto` UYGULANMIYORDU. Absolute bir kutuya hem top hem
   bottom verilip yüksekliği auto kalınca kutu GERİLİR: 956-112-200 = 644px.
   Ekranda görülen "boş koyu dikdörtgen" bu gerilmiş kartın zemini, "ortada
   asılı kart" da align-items:center yüzünden onun içeriğiydi; z-index 85 ile
   alttaki hız panelini (z-index 50) örttüğü için panel de taşmış görünüyordu.
   Üç belirti tek kutudan çıkıyordu. 607'deki listen kuralı kendi bottom:auto
   değerini taşıdığı için ona dokunulmadı. */
.iphone-screen[data-mode="spritz"] .coach:not(.is-top) { bottom: 318px; }
.iphone-screen.is-read-along[data-mode="read"] .coach:not(.is-top) { bottom: 200px; }

@media (prefers-reduced-motion: reduce) {
  .scr, .sheet-panel, .notice, .inapp, .finger, .rd-page, .orp { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Panel başlığı (uygulama: ikon + başlık sola, X sağa) ── */
.sheet-head { display: flex; align-items: center; gap: 10px; margin: 2px 2px 10px; }
.sheet-head > .mi { font-size: 20px; color: rgba(255,255,255,.76); }
.sheet-head h5 { flex: 1; margin: 0; font-size: 18px; font-weight: 400; color: #fff; }
.sheet-head h5.is-bold { font-size: 16px; font-weight: 800; }
.sheet-head .sheet-count { flex: 1; margin-left: -4px; font-size: 15px; color: rgba(255,255,255,.5); }
.sheet-head h5 + .sheet-count ~ .sheet-x, .sheet-head .sheet-x { flex: none; }
.sheet-head h5:has(+ .sheet-count) { flex: none; }
.sheet-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.78); display: grid; place-items: center; }
.sheet-x .mi { font-size: 22px; }
/* ── Dinleme hızı ── */
.speed-sep { height: 1px; margin: 6px 0; background: rgba(255,255,255,.1); }
.speed-expander { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 0 6px; border: 0; background: transparent; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 600; text-align: left; }
.speed-expander .mi { font-size: 19px; color: rgba(255,255,255,.7); }
.speed-expander .mi:last-child { margin-left: auto; transition: transform .2s; }
.speed-expander.is-open .mi:last-child { transform: rotate(180deg); }
.speed-custom[hidden] { display: none; }
/* ── Uyku ── */
.sleep-fade .switch.is-on { background: #8B5CF6; }
.sleep-list { margin-top: 6px; }
.sleep-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 2px; border: 0; background: transparent; color: #fff; text-align: left; }
.sleep-row + .sleep-row { border-top: 1px solid rgba(255,255,255,.06); }
.sleep-row > span:first-child { flex: 1; }
.sleep-row b { display: block; font-size: 15px; font-weight: 500; }
.sleep-row small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.52); }
.sleep-row .mi { font-size: 20px; color: rgba(255,255,255,.4); }
/* ── Sesli kitap menüsü: tek renk ikonlar ── */
.lg-mono .lg-ic { background: rgba(255,255,255,.1); }
.lg-mono .lg-ic .mi { color: rgba(255,255,255,.85); font-size: 20px; }
/* ── Bölümler görünümü: kapağın yerine kartlar; etkin kart = bölümün zaman çizgisi ── */
.ch-cards { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0 6px; scrollbar-width: none; }
.ch-cards::-webkit-scrollbar { display: none; }
.scr-listen.is-chapters .ls-cover-wrap { display: none; }
.scr-listen.is-chapters .ch-cards { display: block; }
.ch-card { position: relative; overflow: hidden; margin-bottom: 6px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); color: #fff; cursor: pointer; user-select: none; }
.ch-card.is-on { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.18); cursor: ew-resize; touch-action: none; }
.ch-card b { display: block; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-card small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.ch-mark { position: absolute; top: 0; bottom: 0; left: 0; width: 2.5px; background: #E7BD52; pointer-events: none; }   /* referans turuncu değil, Kitanda kalem altını */
.ch-mark::after { content: ""; position: absolute; left: -2.75px; bottom: -4px; width: 8px; height: 8px; background: #E7BD52; transform: rotate(45deg); }
.glass-icon.is-on { color: #fff; background: rgba(255,255,255,.22); }
/* ── Hassas sarma panosu (uygulama: büyük delta, hedef, kademe noktaları, ipucu) ── */
.so-delta { display: block; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.so-delta i { font-style: normal; color: var(--cov-accent, #F59E0B); }
.so-target { display: block; margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.62); }
.so-dots { display: inline-flex; gap: 6px; margin-top: 16px; }
.so-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .15s; }
.so-dots i.is-on { background: var(--cov-accent, #F59E0B); }
.so-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13px; color: color-mix(in srgb, var(--cov-accent, #F59E0B) 72%, #fff); }
.so-hint .mi { font-size: 17px; color: var(--cov-accent, #F59E0B); }
/* ── Atlama sonrası geri al / ileri al panosu ── */
.ls-undo { position: absolute; z-index: 6; left: 0; right: 0; top: 0; bottom: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
.scr-listen.is-undo .ls-undo { opacity: 1; transform: none; pointer-events: auto; }
.scr-listen.is-undo .ls-dim { opacity: 1; }
.scr-listen.is-undo .ls-dimmable { opacity: .18; }
.lu-label { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.55); }
.lu-delta { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.lu-delta i { font-style: normal; color: var(--cov-accent, #F59E0B); }
.lu-btn { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); backdrop-filter: blur(20px); color: #fff; font-size: 14.5px; font-weight: 800; letter-spacing: .2px; box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 34px color-mix(in srgb, var(--cov-accent, #F59E0B) 16%, transparent); transition: transform .12s; }
.lu-btn:active { transform: scale(.95); }
.lu-ic { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #10131A; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.lu-ic .mi { font-size: 18px; }


/* ── Paylaşım paneli (uygulama: alıntı önce, sonra 30×42 kapak + kitap satırı) ── */
.share-quote { margin: 4px 0 0; padding: 0; max-height: none; border: 0; background: transparent; color: #F4F1FA; font: italic 15.5px/1.45 Georgia, serif; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.share-quote + .share-head { margin-top: 12px; }
.share-head { grid-template-columns: 30px minmax(0,1fr); gap: 10px; }
.share-head img { width: 30px; height: 42px; border-radius: 6px; box-shadow: none; }
.share-head strong { font-size: 13.5px; font-weight: 700; }
.share-head span { margin-top: 2px; font-size: 12px; }
.share-target i .mi { font-size: 26px; }
/* ── Nasıl paylaşalım? (kimlik / anonim) ── */
.si-title { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: #fff; }
.si-sub { margin: 6px 0 14px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.62); }
.si-opt { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px 14px; margin-top: 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; text-align: left; }
.si-opt:active { background: rgba(255,255,255,.1); }
.si-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,58,237,.2); color: #C4B5FD; }
.si-ic .mi { font-size: 24px; }
.si-opt b { display: block; font-size: 14.5px; font-weight: 700; }
.si-opt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.6); }
/* ── Instagram hikâye görseli: uygulamanın ürettiği kitap sayfası (360×640 ölçek 1,222) ── */
.story-page { position: absolute; inset: 0; --pg: 1.222; --ink: #342D24; --pad: 39.6px; font-family: 'EB Garamond', Baskerville, 'Hoefler Text', Palatino, 'Times New Roman', Georgia, serif; color: var(--ink); overflow: hidden; }
.pg-paper { position: absolute; inset: 0; background: url(../assets/paper/sayfa.jpg) center / cover no-repeat; }
.pg-paper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,248,228,.08), transparent 52%, rgba(108,77,32,.045)); }
.pg-paper::after { content: ""; position: absolute; inset: 0; border: .86px solid rgba(110,84,48,.10); pointer-events: none; }
.pg-head { position: absolute; left: var(--pad); right: var(--pad); top: 14.5%; text-align: center; }
.pg-head b { display: block; font-size: 12.2px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(52,45,36,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-head span { display: block; margin-top: 4.3px; font-size: 13.2px; line-height: 1.12; font-weight: 600; letter-spacing: .1px; }
.pg-body { position: absolute; left: var(--pad); right: var(--pad); top: 24%; bottom: 22%; overflow: hidden; }
.pg-body p { margin: 0; font-size: 20.4px; line-height: 1.47; letter-spacing: 0; text-align: left; }
.pg-body p.is-center { text-align: center; }
.pg-body mark { color: inherit; padding: 0 2px; margin: 0 -2px; background: linear-gradient(180deg, rgba(231,189,82,.62), rgba(231,189,82,1) 42%, rgba(231,189,82,.94) 70%, rgba(231,189,82,.55)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pg-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 5.4%; }
.pg-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 17px; }
.pg-foot-row span { flex: 1; min-width: 0; font-size: 11.1px; font-weight: 600; letter-spacing: .88px; text-transform: uppercase; color: rgba(52,45,36,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-foot-row b { font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: rgba(52,45,36,.94); }
.pg-rule { height: .73px; margin: 6.7px 0 9.2px; background: rgba(52,45,36,.22); }
.pg-brand { display: flex; align-items: center; justify-content: space-between; }
.pg-identity { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .1px; }
.pg-identity[hidden] { display: none; }
.pg-identity i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11.2px; font-weight: 700; background: rgba(90,71,46,.12); border: 1px solid rgba(52,45,36,.48); box-sizing: border-box; }
.pg-logo { margin-left: auto; display: inline-flex; align-items: center; gap: 6.7px; font-size: 11.4px; font-weight: 600; letter-spacing: .8px; color: rgba(52,45,36,.94); }
.pg-logo img { width: 22px; height: 22px; object-fit: contain; opacity: .94; }
/* ── Koç kartı adım sayacı ── */
/* .coach-text flex-column; varsayılan align-items:stretch rozeti kartın TAM
   genişliğine yayıyor, başlıkla açıklama arasında geniş bir şerit çıkıyordu.
   Bloklaştığı için margin-left/vertical-align da işlemiyordu. */
.coach-step { align-self: flex-start; display: inline-block; margin-left: 0; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .4px; color: #C4B5FD; background: rgba(139,92,246,.18); vertical-align: middle; }
.coach-step[hidden] { display: none; }

.scr-listen.is-chapters .ls-title strong { font-size: 22px; }
.scr-listen.is-chapters .ls-title span { font-size: 14px; margin-top: 5px; }

/* ── YAZAR PROFİLİ (uygulama: koyu kanvas, altın vurgu, portre + YAZAR PORTRESİ rozeti, Hakkında/Temalar/Kitanda'da bu yazardan) ── */
.scr-author { position: absolute; inset: 0; z-index: 40; background: #0E0C0A; color: #fff; visibility: hidden; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s; }
.scr-author.is-open { visibility: visible; transform: none; }
.au-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
.au-scroll::-webkit-scrollbar { display: none; }
.au-hero { position: relative; height: 470px; background: radial-gradient(70% 55% at 50% 30%, rgba(233,201,122,.16), transparent 70%), linear-gradient(180deg, #1E1508, #0E0C0A 62%, #070501); overflow: hidden; }
/* Uygulama: portre tam genişlik, yüz üstte (hizalama 0,-0.30), altta koyu gradyan */
.au-hero.has-photo { background: var(--au-photo) center 22% / cover no-repeat, #0E0C0A; }
.au-hero.has-photo .au-portrait { display: none; }
.au-hero.has-photo::after { background: linear-gradient(180deg, rgba(8,8,8,.25), rgba(8,8,8,0) 35%, rgba(8,8,8,.72)); }
.au-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0) 45%, #0E0C0A 100%); }
.au-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.25), rgba(8,8,8,0) 35%, rgba(8,8,8,.72)); }
.au-portrait { position: absolute; left: 50%; top: 96px; width: 176px; height: 220px; transform: translateX(-50%); border-radius: 18px; background: url(../assets/paper/sayfa.jpg) center / cover; box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(233,201,122,.35); display: grid; place-items: center; }
.au-portrait::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(160deg, rgba(30,21,8,.18), rgba(30,21,8,.55)); }
.au-portrait span { position: relative; font: 700 118px/1 Georgia, 'Times New Roman', serif; color: #E9C97A; text-shadow: 0 6px 22px rgba(0,0,0,.45); }
.au-badge { position: absolute; left: 22px; top: 62px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.45); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.au-hero-text { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 26px; }
.au-role { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #E9C97A; }
.au-role i { width: 4px; height: 4px; border-radius: 50%; background: #E9C97A; }
.au-hero-text h2 { margin: 9px 0 0; font: 800 36px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.4px; }
.au-years { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.7); }
.au-body { padding: 22px 22px 130px; }
.au-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
.au-facts > span { display: grid; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.au-facts .mi { grid-row: 1 / span 2; align-self: center; font-size: 20px; color: #E9C97A; }
.au-facts b { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.au-facts em { font-style: normal; font-size: 14px; font-weight: 600; color: #fff; }
.au-sec { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(233,201,122,.85); }
.au-about { margin: 0; font-size: 14px; line-height: 1.72; color: #D9D3C6; white-space: pre-line; }
.au-about.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.au-more { margin: 10px 0 34px; padding: 0; border: 0; background: transparent; color: #E9C97A; font-size: 13.5px; font-weight: 700; }
.au-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.au-themes span { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.86); }
.au-books-h { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 19px; font-weight: 700; }
.au-count { padding: 3px 9px; border-radius: 999px; background: rgba(233,201,122,.16); color: #E9C97A; font-size: 12px; font-weight: 700; }
.au-empty { margin: 0 0 34px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.55); }
.au-book { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: #fff; text-align: left; }
.au-book img { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; }
.au-book b { display: block; font-size: 15px; font-weight: 700; }
.au-book small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
.au-book .mi { color: rgba(255,255,255,.4); }
.au-top { position: absolute; z-index: 3; left: 22px; right: 22px; top: 58px; display: flex; align-items: center; justify-content: space-between; }
.au-top-r { display: inline-flex; gap: 10px; }
.au-top .glass-icon.is-on { color: #E9C97A; }

/* ── KİTAP DETAYI (uygulama: bulanık kapak zemini, kapak, başlık, yazar çipi, rozetler, puan, türler, ilerleme kartı, Oku/Dinle/Özet/Spritz) ── */
.scr-detail { position: absolute; inset: 0; z-index: 38; background: #0B0B10; color: #fff; visibility: hidden; transform: translateX(-100%); transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s; }
.scr-detail.is-open { visibility: visible; transform: none; }
.bd-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
.bd-scroll::-webkit-scrollbar { display: none; }
.bd-hero { position: relative; height: 420px; overflow: hidden; }
.bd-hero-bg { position: absolute; inset: -40px; background: url(../assets/covers/ilk-ask.jpg) center / cover; filter: blur(42px) brightness(.55) saturate(.9); }
.bd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,16,.15), rgba(11,11,16,.05) 40%, #0B0B10 100%); }
.bd-cover { position: absolute; left: 50%; top: 116px; width: 230px; height: 330px; transform: translateX(-50%); object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.6); z-index: 1; }
.bd-body { padding: 0 22px 120px; }
.bd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bd-title-row h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.bd-save { border-radius: 18px; }
.bd-author { margin-top: 10px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; font-weight: 600; }
.bd-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.bd-author .mi { font-size: 18px; color: rgba(255,255,255,.55); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; }
.bd-chip .mi { font-size: 16px; }
.bd-chip.is-fav { color: #C4B5FD; border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.08); }
.bd-chip.is-lib { color: #86EFAC; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.07); }
.bd-chip.is-gift { color: #C4B5FD; border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.12); }
.bd-rating { display: flex; align-items: center; gap: 3px; margin-top: 16px; color: #FFD400; font-size: 20px; }
.bd-rating .mi { font-size: 20px; }
.bd-rating b { margin-left: 8px; font-size: 15px; font-weight: 700; color: #FFD400; }
.bd-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bd-genres span { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(139,92,246,.4); background: rgba(139,92,246,.08); color: #C4B5FD; font-size: 13.5px; font-weight: 600; }
.bd-genres .bd-more { display: inline-flex; align-items: center; gap: 4px; }
.bd-genres .bd-more .mi { font-size: 16px; }
.bd-now { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 22px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(139,92,246,.22); background: rgba(139,92,246,.06); }
.bd-now-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(139,92,246,.18); color: #C4B5FD; }
.bd-now b { display: block; font-size: 15px; font-weight: 800; }
.bd-now small { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.55); }
.bd-actions { display: grid; grid-template-columns: minmax(0,1fr) 62px; gap: 10px; margin-top: 18px; }
.bd-read { height: 62px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 18px; color: #fff; font-size: 17px; font-weight: 800; background: linear-gradient(90deg, #B06CE0, #8B7CF6 55%, #7EA6F7); box-shadow: 0 14px 30px rgba(139,92,246,.3); }
.bd-read .mi { font-size: 22px; }
.bd-gift { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(139,92,246,.45); border-radius: 16px; background: rgba(139,92,246,.18); color: #C4B5FD; font-size: 10.5px; font-weight: 700; }
.bd-gift .mi { font-size: 22px; }
.bd-listen { width: 100%; height: 58px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(96,165,250,.35); border-radius: 18px; background: rgba(23,26,44,.9); color: #93C5FD; font-size: 17px; font-weight: 800; }
.bd-listen .mi { font-size: 22px; }
.bd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bd-row2 button { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: rgba(255,255,255,.03); font-size: 16px; font-weight: 800; }
.bd-row2 .mi { font-size: 20px; }
.bd-summary { border: 1px solid rgba(212,175,55,.55); color: #E7C463; }
.bd-spritz { border: 1px solid rgba(56,189,248,.5); color: #7DD3FC; }
.bd-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 4px 0; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.5); }
.bd-note .mi { font-size: 16px; margin-top: 1px; }
.bd-epigraph { width: 100%; height: 52px; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(139,92,246,.45); border-radius: 16px; background: rgba(139,92,246,.06); color: #C4B5FD; font-size: 15px; font-weight: 800; }
.bd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.bd-tabs span { padding: 11px 0; border-radius: 12px; text-align: center; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.55); }
.bd-tabs span.is-on { background: rgba(139,92,246,.35); color: #fff; }
.bd-h { margin: 26px 0 10px; font-size: 20px; font-weight: 800; }
.bd-about { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.bd-about.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bd-more-btn { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #C4B5FD; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.bd-more-btn .mi { font-size: 18px; }
.bd-rate-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.bd-rate-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); margin-bottom: 12px; }
.bd-rate-card b { font-size: 15.5px; font-weight: 800; }
.bd-rate-card small { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.55); }
.bd-rate-stars { display: flex; gap: 6px; margin-top: 14px; color: rgba(255,255,255,.3); }
.bd-rate-stars .mi { font-size: 26px; }
.bd-pub { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.bd-pub dl { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 12px 14px; margin: 0; font-size: 14px; }
.bd-pub dt { color: rgba(255,255,255,.5); }
.bd-pub dd { margin: 0; color: rgba(255,255,255,.9); line-height: 1.45; }
.bd-link { width: 100%; height: 48px; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(139,92,246,.45); border-radius: 14px; background: transparent; color: #C4B5FD; font-size: 14.5px; font-weight: 700; }
.bd-real { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.bd-real-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(139,92,246,.18); color: #C4B5FD; }
.bd-real b { display: block; font-size: 14.5px; font-weight: 800; }
.bd-real small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.55); }
.bd-top { position: absolute; z-index: 3; left: 22px; right: 22px; top: 58px; display: flex; align-items: center; justify-content: space-between; }
.bd-top-r { display: inline-flex; gap: 10px; }
/* Yazar ekranı: Kitanda'daki eserler */
.au-works { display: flex; flex-direction: column; gap: 8px; margin-bottom: 34px; }
.au-works .au-book { margin: 0; }
/* Hikâye gönderimi */
.story-done.is-sending { pointer-events: none; opacity: .85; }
.story-done.is-sending .mi { animation: spin-slow 1s linear infinite; }
.story-done.is-sent .mi { color: #34A853; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Anlatıcı kartı: panel/hikâye açıkken üstte (bildirim alanı), aksi halde altta; içeriği örtmez. */
.coach { transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .25s ease, top .32s cubic-bezier(.22,.61,.36,1), bottom .32s cubic-bezier(.22,.61,.36,1); }
.coach.is-top { top: 112px; bottom: auto; }

/* ── KİTABI HEDİYE ET (uygulama: alıcı seç → onayla → hazırlanıyor → ulaştı) ── */
.panel-gift { max-height: 78%; overflow-y: auto; scrollbar-width: none; }
.gf-item { display: grid; grid-template-columns: 34px minmax(0,1fr) 24px; gap: 12px; align-items: center; padding: 10px 12px; margin-top: 4px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.gf-item img { width: 34px; height: 48px; object-fit: cover; border-radius: 6px; }
.gf-item b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; }
.gf-item small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.6); }
.gf-item .mi { color: #C4B5FD; font-size: 22px; }
.gf-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 12px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.gf-search .mi { font-size: 19px; }
.gf-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 14.5px; outline: none; }
.gf-search input::placeholder { color: rgba(255,255,255,.4); }
.gf-list { margin-top: 10px; }
.gf-sec { margin: 12px 4px 4px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.gf-row { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 8px; border: 0; border-radius: 14px; background: transparent; color: #fff; text-align: left; }
.gf-row:active { background: rgba(255,255,255,.06); }
.gf-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7C3AED, #A855F7); }
.gf-row b { display: block; font-size: 15px; font-weight: 700; }
.gf-row small { display: block; margin-top: 1px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.gf-row .gf-tag { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #C4B5FD; background: rgba(139,92,246,.16); }
.gf-hint { display: flex; align-items: flex-start; gap: 8px; margin: 12px 4px 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.5); }
.gf-hint .mi { font-size: 16px; margin-top: 1px; }
.gf-empty { padding: 26px 12px; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; }
.gf-who { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.gf-who b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.gf-who small { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); }
.gf-terms { margin: 14px 2px 16px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); }
.gf-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.gf-actions .gbtn { margin: 0; }
.gf-go { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; background: linear-gradient(90deg, #B06CE0, #8B7CF6); color: #fff; font-size: 15px; font-weight: 800; }
.gf-go .mi { font-size: 20px; }
#gf-progress { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 8px 6px; }
#gf-progress[hidden] { display: none; }
.gf-spinner { position: relative; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: rgba(139,92,246,.16); color: #C4B5FD; margin-bottom: 14px; }
.gf-spinner::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #A78BFA; animation: spin-slow 1s linear infinite; }
.gf-spinner.is-done::after { animation: none; border-color: #34C759; }
.gf-spinner.is-done { color: #34C759; background: rgba(52,199,89,.14); }
.gf-spinner .mi { font-size: 30px; }
.gf-ptitle { font-size: 16px; font-weight: 800; color: #fff; }
.gf-psub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.6); }
.gf-done { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 800; }
.gf-done[hidden] { display: none; }
/* ── AÇILIŞ SÖZÜ (uygulama: kâğıt doku, yazar küçük serif, söz büyük serif, kitap adı italik, altta KİTANDA, "Oku ile devam et") ── */
.scr-epigraph { position: absolute; inset: 0; z-index: 39; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s; background: url(../assets/paper/sayfa.jpg) center / cover; color: #342D24; font-family: 'EB Garamond', Baskerville, 'Hoefler Text', Palatino, Georgia, serif; }
.scr-epigraph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,248,228,.08), transparent 52%, rgba(108,77,32,.06)); }
.scr-epigraph.is-open { visibility: visible; opacity: 1; }
.ep-top { position: absolute; z-index: 2; left: 14px; right: 14px; top: 56px; display: flex; justify-content: space-between; }
.ep-top .rd-back { color: #342D24; }
.ep-body { position: absolute; z-index: 2; left: 40px; right: 40px; top: 34%; text-align: center; }
.ep-source { display: block; font-size: 14.5px; letter-spacing: .3px; color: rgba(52,45,36,.9); }
.ep-text { margin: 30px 0 0; font-size: 21px; line-height: 1.42; }
.ep-closing { display: block; margin-top: 26px; font-size: 15px; font-style: italic; color: rgba(52,45,36,.85); }
.ep-brand { position: absolute; z-index: 2; left: 0; right: 0; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(52,45,36,.85); }
.ep-brand img { width: 28px; height: 28px; opacity: .9; }
.ep-continue { position: absolute; z-index: 2; left: 50%; bottom: 66px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border: 0; border-radius: 999px; background: rgba(52,45,36,.86); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.ep-continue .mi { font-size: 20px; }
/* ── Detay sekmeleri: Bölümler / Notlar ── */
.bd-tab[hidden] { display: none; }
.bd-ch-head { display: flex; align-items: baseline; justify-content: space-between; }
.bd-ch-head span { font-size: 13px; color: rgba(255,255,255,.5); }
.bd-ch-list { display: flex; flex-direction: column; gap: 8px; }
.bd-ch { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #fff; text-align: left; }
.bd-ch.is-on { border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.1); }
.bd-ch i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-style: normal; font-weight: 800; font-size: 14px; background: rgba(139,92,246,.18); color: #C4B5FD; }
.bd-ch b { display: block; font-size: 15px; font-weight: 700; }
.bd-ch small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
.bd-ch .mi { color: rgba(255,255,255,.35); }
.bd-notes { display: flex; flex-direction: column; gap: 10px; }
.bd-note { padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #fff; text-align: left; }
.bd-note .bd-note-k { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.bd-note .bd-note-k.acikla { color: #FF8F96; } .bd-note .bd-note-k.ozetle { color: #9CCAFF; } .bd-note .bd-note-k.favori { color: #FFD700; }
.bd-note q { display: block; margin: 6px 0 4px; font: italic 13.5px/1.45 Georgia, serif; color: rgba(255,255,255,.85); quotes: '“' '”'; }
.bd-note small { display: block; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-notes-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.bd-notes-empty .mi { font-size: 30px; color: rgba(255,255,255,.4); margin-bottom: 10px; }
.bd-notes-empty b { font-size: 15px; font-weight: 800; }
.bd-notes-empty small { margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.55); }