:root {
  color-scheme: dark;
  --ink: #e9e4d8;
  --muted: #948f84;
  --gold: #d5ad62;
  --gold-bright: #f0cf8b;
  --green: #0d2b24;
  --deep: #050b0a;
  --panel: rgba(13, 24, 21, .76);
  --line: rgba(223, 198, 143, .16);
  --paper-width: min(72vw, 1080px);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, #183c31 0, transparent 43%),
    linear-gradient(135deg, #07100e 0%, #050a09 48%, #0a1512 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.aura { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .18; }
.aura-one { width: 42vw; height: 42vw; background: #1b6c50; left: -20vw; top: 24vh; }
.aura-two { width: 34vw; height: 34vw; background: #7f5d25; right: -17vw; bottom: -12vw; opacity: .13; }

.topbar {
  height: 86px; padding: 0 34px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(5, 12, 10, .62); backdrop-filter: blur(24px); position: relative; z-index: 20;
}
.brand { display: inline-flex; gap: 13px; align-items: center; color: inherit; text-decoration: none; width: max-content; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; font-size: 23px; }
.brand strong { display: block; font-family: "Iowan Old Style", Georgia, serif; font-size: 18px; letter-spacing: .02em; font-weight: 500; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; margin-top: 2px; }
.top-meta { display: flex; align-items: center; gap: 12px; color: #b7b2a7; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.meta-separator { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .65; }
.topbar > .icon-button { justify-self: end; }

.experience { width: min(1600px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 48px; padding: 40px 0 58px; }
.reader-column { min-width: 0; }
.reader-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 8px 22px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 10px; letter-spacing: .24em; font-weight: 700; }
h1, h2 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 400; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 54px); line-height: .98; }

.quiet-button, .icon-button {
  border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 999px;
  cursor: pointer; transition: .25s ease; color: #c9c3b7;
}
.quiet-button { padding: 10px 15px; display: flex; gap: 9px; align-items: center; font-size: 12px; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; font-size: 12px; }
.quiet-button:hover, .icon-button:hover { border-color: rgba(213,173,98,.46); color: var(--gold-bright); background: rgba(213,173,98,.08); }

.reader-stage {
  position: relative; border-radius: var(--radius); min-height: 260px;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(4,8,7,.2), rgba(4,8,7,.72));
  border: 1px solid rgba(240,207,139,.11);
  box-shadow: 0 40px 100px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04);
  perspective: 2200px;
}
.page-halo { position: absolute; width: 60%; height: 80%; border-radius: 50%; background: rgba(213,173,98,.11); filter: blur(80px); }
.reader-window { position: relative; width: var(--paper-width); height: min(70vh, 720px); overflow: hidden; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.paper { position: absolute; inset: 0; width: 100%; }
.mushaf-page { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; will-change: transform, opacity; filter: sepia(.035) saturate(.92) contrast(1.025); }
.page-turner { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; }
.page-ghost { z-index: 1; opacity: 1; pointer-events: none; backface-visibility: hidden; }
#pageImage { z-index: 1; }
.page-verso { position: absolute; inset: 0; z-index: 2; opacity: 0; backface-visibility: hidden; transform: rotateY(180deg); background: linear-gradient(90deg, #d9cfb8, #f5f0e5 28%, #e8dfcb 100%); box-shadow: inset 22px 0 38px rgba(64,45,20,.13); }
.page-fold { position: absolute; inset: 0; z-index: 3; opacity: 0; background: linear-gradient(90deg, transparent 45%, rgba(255,255,255,.4) 67%, rgba(50,34,13,.26) 98%); mix-blend-mode: multiply; pointer-events: none; }
.page-turner.is-forward { opacity: 1; transform-origin: 100% 50%; animation: turnForward .92s cubic-bezier(.34,.02,.14,1) both; }
.page-turner.is-backward { opacity: 1; transform-origin: 0 50%; animation: turnBackward .92s cubic-bezier(.34,.02,.14,1) both; }
.page-turner:is(.is-forward,.is-backward) .page-fold { animation: foldLight .92s ease-in-out both; }
#pageImage.is-entering { animation: pageReveal .72s ease-out both; }
@keyframes turnForward {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  38% { filter: brightness(.93); }
  100% { transform: rotateY(178deg); filter: brightness(.82); }
}
@keyframes turnBackward {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  38% { filter: brightness(.93); }
  100% { transform: rotateY(-178deg); filter: brightness(.82); }
}
@keyframes foldLight { 0%,100% { opacity: 0; } 44% { opacity: .76; } }
@keyframes pageReveal { from { filter: sepia(.035) saturate(.92) contrast(1.025) brightness(.83); } to { filter: sepia(.035) saturate(.92) contrast(1.025) brightness(1); } }

/* Cüze ait olmayan ayetlerin (sayfayı paylaşan önceki/sonraki cüz) üstündeki kâğıt renkli örtü. Görsele dokunulmaz. */
.page-masks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.page-mask { position: absolute; background: #fff; filter: sepia(.035) saturate(.92); box-shadow: 0 0 6px 3px #fff; }
.line-glow { position: absolute; z-index: 2; border-radius: 14px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(226,188,111,.11) 12%, rgba(226,188,111,.13) 88%, transparent); border-block: 1px solid rgba(226,188,111,.13); box-shadow: 0 0 28px rgba(226,188,111,.07); transition: opacity .25s ease, top .38s cubic-bezier(.2,.8,.2,1), height .35s ease; }
.word-arrow { position: absolute; z-index: 3; width: 28px; height: 22px; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: left .22s cubic-bezier(.2,.8,.2,1), top .22s cubic-bezier(.2,.8,.2,1), opacity .2s; filter: drop-shadow(0 4px 8px rgba(117,70,4,.38)); }
.word-arrow::before { content: ""; position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 5px rgba(213,173,98,.18), 0 0 18px rgba(240,207,139,.6); }
.word-arrow i { position: absolute; left: 10px; top: -2px; width: 8px; height: 8px; border-left: 2px solid var(--gold-bright); border-top: 2px solid var(--gold-bright); transform: rotate(45deg); }
.word-arrow.is-repeat::before { background: #d97b62; box-shadow: 0 0 0 5px rgba(217,123,98,.18), 0 0 18px rgba(217,123,98,.6); }
.stage-edge { position: absolute; z-index: 5; pointer-events: none; left: 0; right: 0; height: 17%; }
.stage-edge-top { top: 0; background: linear-gradient(#07100e, transparent); }
.stage-edge-bottom { bottom: 0; background: linear-gradient(transparent, #07100e); }

.player { padding: 18px 8px 0; }
.progress-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 13px; align-items: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { width: 100%; height: 3px; appearance: none; background: linear-gradient(90deg, var(--gold) var(--progress, 0%), rgba(255,255,255,.12) var(--progress, 0%)); border-radius: 99px; cursor: pointer; }
.progress::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(213,173,98,.13); }
.transport-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 12px; }
.transport-side { display: flex; gap: 8px; justify-content: flex-end; }
.transport-side-right { justify-content: flex-start; }
.speed-control { position: relative; }
.speed-button { min-width: 54px; height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: #c9c3b7; font-size: 10px; font-variant-numeric: tabular-nums; cursor: pointer; transition: .25s ease; }
.speed-button:hover, .speed-button[aria-expanded="true"] { border-color: rgba(213,173,98,.46); color: var(--gold-bright); background: rgba(213,173,98,.08); }
.speed-menu { position: absolute; z-index: 35; left: 50%; bottom: calc(100% + 12px); width: 154px; max-height: min(360px, 60vh); overflow-y: auto; transform: translateX(-50%); padding: 7px; border: 1px solid rgba(223,198,143,.2); border-radius: 16px; background: rgba(8,17,15,.97); backdrop-filter: blur(26px); box-shadow: 0 20px 55px rgba(0,0,0,.52); }
.speed-menu::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); border-right: 1px solid rgba(223,198,143,.2); border-bottom: 1px solid rgba(223,198,143,.2); background: #08110f; }
.speed-menu button { position: relative; width: 100%; min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 8px 30px 8px 12px; border: 0; border-radius: 10px; background: transparent; color: #aaa69c; text-align: left; font-size: 11px; cursor: pointer; }
.speed-menu button:hover { color: #eee6d7; background: rgba(255,255,255,.055); }
.speed-menu button[aria-checked="true"] { color: var(--gold-bright); background: rgba(213,173,98,.1); }
.speed-menu button[aria-checked="true"]::after { content: "✓"; position: absolute; right: 11px; color: var(--gold); font-size: 11px; }
.speed-menu small { color: #77736b; font-size: 9px; }
.play-button { margin: 0 28px; width: 64px; height: 64px; border: 0; border-radius: 50%; color: #182018; background: linear-gradient(145deg, #f0d498, #ba8b3e); cursor: pointer; box-shadow: 0 12px 32px rgba(190,139,54,.25), inset 0 1px rgba(255,255,255,.6); transition: transform .25s, box-shadow .25s; }
.play-button:hover { transform: scale(1.04); box-shadow: 0 16px 38px rgba(190,139,54,.34), inset 0 1px rgba(255,255,255,.6); }
.reciter { text-align: center; margin: 10px 0 0; color: #aaa499; font-family: "Iowan Old Style", Georgia, serif; font-size: 13px; letter-spacing: .035em; }
.reciter span { color: var(--gold); padding: 0 4px; }

.meaning-panel { align-self: start; position: sticky; top: 102px; min-width: 0; max-height: calc(100vh - 122px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(213,173,98,.32) transparent; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(26px); box-shadow: 0 28px 90px rgba(0,0,0,.24); }
.meaning-panel::-webkit-scrollbar { width: 5px; }
.meaning-panel::-webkit-scrollbar-thumb { background: rgba(213,173,98,.3); border-radius: 99px; }
.meaning-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.meaning-header h2 { margin: 0; font-size: 27px; }
.meaning-status { padding: 7px 9px; border-radius: 999px; background: rgba(213,173,98,.08); color: #c5a66c; font-size: 9px; white-space: nowrap; }
.meaning-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.meaning-langs { display: inline-flex; padding: 3px; border: 1px solid rgba(240,207,139,.16); border-radius: 999px; background: rgba(255,255,255,.03); }
.meaning-langs[hidden] { display: none !important; }
.meaning-lang { min-width: 34px; padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: #a99f8c; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.meaning-lang:hover { color: #e1dbce; }
.meaning-lang[aria-pressed="true"] { background: rgba(213,173,98,.18); color: #f0cf8b; }
.meaning-lang:focus-visible { outline: 2px solid #f0cf8b; outline-offset: 1px; }
.meaning-notes { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(240,207,139,.12); color: #a9a293; font-size: 12.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: break-word; }
.meaning-notes[hidden] { display: none !important; }
.meaning-status.is-ready { color: #8fd5b4; background: rgba(61,157,111,.12); }
.meaning-card { width: 100%; text-align: left; margin: 24px 0 14px; padding: 22px; border: 1px solid rgba(240,207,139,.15); border-radius: 20px; color: inherit; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.meaning-card.is-locked { opacity: .72; }
.verse-reference { display: block; color: var(--gold); font-size: 11px; letter-spacing: .14em; margin-bottom: 13px; }
.meaning-text { display: block; max-width: 100%; overflow-wrap: break-word; hyphens: auto; font-family: "Iowan Old Style", Georgia, serif; font-size: 19px; line-height: 1.58; color: #e1dbce; }
.meaning-empty { display: flex; gap: 14px; padding: 16px 3px; color: #9e998f; }
.meaning-empty[hidden] { display: none !important; }
.meaning-empty strong { display: block; color: #cbc5b9; font-size: 13px; }
.meaning-empty p { margin: 5px 0 0; font-size: 11px; line-height: 1.55; }
.empty-icon { color: var(--gold); font-size: 21px; }
.import-button { display: block; text-align: center; padding: 12px; border: 1px dashed rgba(213,173,98,.35); border-radius: 12px; color: #d4ba85; font-size: 11px; cursor: pointer; transition: .25s; }
.import-button:hover { background: rgba(213,173,98,.08); }
.rights-note { color: #716e67; font-size: 9px; line-height: 1.55; margin: 13px 2px 22px; }
.session-card { border-top: 1px solid rgba(255,255,255,.07); padding-top: 20px; }
.session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.session-grid div { display: grid; gap: 4px; }
.session-grid strong { font-family: "Iowan Old Style", Georgia, serif; font-size: 20px; font-weight: 400; }
.session-grid span { color: #77746d; font-size: 9px; }

.page-drawer { position: fixed; z-index: 40; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: rgba(8,16,14,.94); backdrop-filter: blur(30px); box-shadow: 0 26px 90px rgba(0,0,0,.55); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 12px; color: #b7b2a7; font-size: 12px; }
.juz-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 4px 14px; }
.juz-row:empty { display: none; }
.juz-chip { min-width: 74px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.03); color: #aaa49a; font: inherit; font-size: 11px; cursor: pointer; transition: .2s; }
.juz-chip:hover, .juz-chip[aria-current="true"] { border-color: rgba(213,173,98,.55); background: rgba(213,173,98,.13); color: var(--gold-bright); }
.juz-row-welcome { justify-content: center; margin: 0 0 22px; padding: 0; }
.welcome.is-opening .juz-row-welcome { opacity: 0; transition: opacity .45s; }
.page-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 7px; }
.page-chip { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); color: #aaa49a; cursor: pointer; font-size: 11px; }
.page-chip:hover, .page-chip.is-current { border-color: rgba(213,173,98,.5); background: rgba(213,173,98,.12); color: var(--gold-bright); }

.about-dialog { width: min(580px, calc(100% - 34px)); color: var(--ink); border: 1px solid var(--line); border-radius: 28px; background: #0b1714; padding: 38px; box-shadow: 0 40px 120px #000; }
.about-dialog::backdrop { background: rgba(2,6,5,.75); backdrop-filter: blur(9px); }
.about-dialog h2 { font-size: 38px; margin: 0 0 18px; }
.about-dialog > p:not(.eyebrow) { color: #aaa49a; line-height: 1.7; }
.dialog-close { position: absolute; right: 18px; top: 16px; background: none; border: 0; color: #aaa; font-size: 28px; cursor: pointer; }
.about-dialog dl { margin: 26px 0 0; border-top: 1px solid var(--line); }
.about-dialog dl div { display: grid; grid-template-columns: 125px 1fr; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.about-dialog dt { color: #77746d; }.about-dialog dd { margin: 0; color: #d2ccc0; }

.welcome { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; background: radial-gradient(circle at 50% 35%, #16392f, #07110f 48%, #030706 100%); transition: opacity .8s, visibility .8s; }
.welcome.is-hidden { opacity: 0; visibility: hidden; }
.book-intro { width: 152px; height: 190px; margin-bottom: 30px; perspective: 1300px; transition: transform .8s ease, margin .8s ease; }
.book-body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(5deg) rotateY(-8deg); transition: transform 1.25s cubic-bezier(.18,.7,.12,1); }
.book-shadow { position: absolute; left: 8%; right: -8%; bottom: -15px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.58); filter: blur(15px); transition: .9s; }
.book-back, .book-page-stack, .book-first-page, .book-cover { position: absolute; inset: 0; border-radius: 5px 13px 13px 5px; }
.book-back { transform: translateZ(-9px); background: #153f32; box-shadow: 9px 12px 28px rgba(0,0,0,.56); }
.book-page-stack { inset: 4px -5px 4px 5px; transform: translateZ(-3px); background: repeating-linear-gradient(0deg, #e6ddc8 0 2px, #cfc3a9 2px 3px); box-shadow: 5px 5px 0 #8b7449, 8px 7px 14px rgba(0,0,0,.36); }
.book-first-page { z-index: 1; overflow: hidden; background: #f4efe3; box-shadow: inset 8px 0 20px rgba(60,41,14,.13); }
.book-first-page img { width: 100%; height: 100%; object-fit: cover; object-position: center 33%; filter: sepia(.06) saturate(.85); }
.book-cover { z-index: 3; transform-origin: 100% 50%; transform-style: preserve-3d; overflow: hidden; background:
  radial-gradient(circle at 50% 38%, rgba(214,177,96,.14), transparent 31%),
  linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
  #0c3a2e;
  border: 1px solid #b9954d; box-shadow: inset 0 0 0 5px #082a22, inset 0 0 0 6px rgba(213,173,98,.48), inset 0 0 35px rgba(0,0,0,.5), 8px 10px 28px rgba(0,0,0,.5);
  transition: transform 1.35s cubic-bezier(.22,.72,.08,1), box-shadow 1.1s;
}
.book-cover::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: repeating-radial-gradient(circle at 0 0, transparent 0 8px, rgba(240,207,139,.32) 9px 10px); }
.cover-frame { position: absolute; pointer-events: none; border: 1px solid rgba(230,192,112,.66); }
.cover-frame-outer { inset: 10px; border-radius: 3px 10px 10px 3px; }
.cover-frame-inner { inset: 17px; border-radius: 2px 8px 8px 2px; border-style: double; border-width: 3px; }
.cover-medallion { position: absolute; z-index: 2; left: 50%; top: 50%; width: 86px; height: 104px; transform: translate(-50%,-50%) rotate(45deg); display: grid; place-content: center; border: 2px solid #d5ad62; box-shadow: 0 0 0 5px #0c3a2e, 0 0 0 6px rgba(213,173,98,.7), inset 0 0 22px rgba(213,173,98,.17); }
.cover-medallion::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(213,173,98,.6); }
.cover-medallion span, .cover-medallion small { transform: rotate(-45deg); color: #e4c47f; font-family: "Geeza Pro", "Noto Naskh Arabic", serif; line-height: 1; text-shadow: 0 2px 5px #000; }
.cover-medallion span { font-size: 22px; }.cover-medallion small { font-size: 14px; margin-top: 7px; }
.cover-rule { position: absolute; top: 10px; bottom: 10px; right: 7px; width: 2px; background: linear-gradient(transparent,#d5ad62 12%,#d5ad62 88%,transparent); opacity: .68; }
.cover-corner { position: absolute; z-index: 2; color: #d5ad62; font-size: 10px; }.cover-corner-one { left: 20px; top: 19px; }.cover-corner-two { right: 20px; top: 19px; }.cover-corner-three { left: 20px; bottom: 19px; }.cover-corner-four { right: 20px; bottom: 19px; }
.book-intro.is-opening { transform: scale(1.32) translateY(5px); margin-bottom: 38px; }
.book-intro.is-opening .book-body { transform: rotateX(2deg) rotateY(0); }
.book-intro.is-opening .book-cover { transform: rotateY(158deg); box-shadow: inset 0 0 35px rgba(0,0,0,.45), -13px 10px 30px rgba(0,0,0,.42); }
.book-intro.is-opening .book-shadow { left: -28%; right: -28%; opacity: .72; }
.welcome.is-opening .eyebrow, .welcome.is-opening h2, .welcome.is-opening > p, .welcome.is-opening .enter-button, .welcome.is-opening > small { opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; }
.welcome h2 { margin: 0; max-width: 760px; font-size: clamp(50px, 7vw, 92px); line-height: .98; letter-spacing: -.035em; }
.welcome h2 em { color: var(--gold-bright); font-weight: 400; }
.welcome > p:not(.eyebrow) { max-width: 520px; margin: 24px auto; color: #aaa69c; line-height: 1.65; }
.enter-button { width: 190px; padding: 15px 17px 15px 23px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(240,207,139,.4); border-radius: 999px; background: rgba(213,173,98,.12); color: #f0e6d2; cursor: pointer; }
.enter-button i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #152019; font-style: normal; transition: transform .25s; }
.enter-button:hover i { transform: translateX(3px); }
.welcome small { margin-top: 15px; color: #625f58; font-size: 10px; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 22px; transform: translate(-50%, 20px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: #101d19; color: #d3cdc2; font-size: 11px; opacity: 0; pointer-events: none; transition: .3s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1320px) {
  :root { --paper-width: min(88vw, 940px); }
  .experience { grid-template-columns: 1fr; width: min(100% - 30px, 980px); }
  .meaning-panel { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .meaning-header, .session-card, .rights-note { grid-column: 1 / -1; }
  .meaning-card { margin: 0; }.meaning-empty { padding-top: 0; }
}
@media (max-width: 680px) {
  :root { --paper-width: 96vw; --radius: 20px; }
  .topbar { height: 70px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .top-meta { display: none; }.brand small { display: none; }
  .experience { width: 100%; padding: 24px 0 34px; gap: 24px; }
  .reader-heading { margin-inline: 18px; }.reader-heading h1 { font-size: 36px; }
  .reader-stage { border-radius: 0; border-inline: 0; }
  .player { padding-inline: 18px; }.meaning-panel { margin: 0 12px; display: block; padding: 20px; }
  .play-button { margin-inline: 14px; }
  .transport-side { gap: 5px; }
  .speed-button { min-width: 48px; padding-inline: 6px; }
  .speed-menu { left: auto; right: -42px; transform: none; }
  .speed-menu::after { left: auto; right: 57px; }
  .meaning-card { margin: 20px 0 12px; }.page-grid { grid-template-columns: repeat(7, 1fr); }
  .welcome h2 { font-size: 50px; }.welcome > p:not(.eyebrow) { font-size: 13px; }
  .book-intro { width: 126px; height: 158px; margin-bottom: 24px; }
  .book-intro.is-opening { transform: scale(1.18); }
}
@media (min-width: 1321px) and (max-width: 1540px) {
  .experience { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr) 320px; gap: 26px; }
  .meaning-panel { padding: 20px; }
  .meaning-header h2 { font-size: 24px; }
  .meaning-text { font-size: 17px; }
}
@media (max-height: 760px) {
  .topbar { height: 68px; }
  .experience { padding-top: 24px; }
  .meaning-panel { top: 82px; max-height: calc(100vh - 94px); }
  .book-intro { width: 112px; height: 140px; margin-bottom: 17px; }
  .welcome h2 { font-size: clamp(43px,6vw,68px); }
  .welcome > p:not(.eyebrow) { margin: 15px auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* PWA: çevrimdışı indirme ve telefon düzeni */
.offline-button { display: grid; gap: 3px; width: 100%; margin-top: 18px; padding: 13px 16px; text-align: left; border: 1px solid rgba(240,207,139,.22); border-radius: 16px; background: rgba(213,173,98,.07); color: #e9dcc0; font: inherit; cursor: pointer; }
.offline-button[hidden] { display: none !important; }
.offline-button span { font-size: 14px; font-weight: 600; }
.offline-button small { color: #9e998f; font-size: 11px; }
.offline-button:hover { background: rgba(213,173,98,.12); }
.offline-button[data-state="ready"] { border-color: rgba(61,157,111,.35); background: rgba(61,157,111,.1); }
.offline-button[data-state="ready"] span { color: #8fd5b4; }
.offline-button[data-state="busy"] { cursor: progress; }
.offline-button:focus-visible { outline: 2px solid #f0cf8b; outline-offset: 2px; }
.juz-chip.is-offline::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #8fd5b4; vertical-align: middle; }
#fullscreenButton[hidden] { display: none !important; }
@media (max-width: 680px) {
  .meaning-header h2 { font-size: 22px; line-height: 1.2; }
  .meaning-text { font-size: 17px; }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(70px + env(safe-area-inset-top)); }
  .experience { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}