:root {
  --page-w: 707.624;
  --page-h: 1000;
  --ui-blur: 18px;
  --bg: #11110f;
  --bg-2: #0c0c0b;
  --panel: rgba(20, 20, 18, .76);
  --panel-solid: rgba(20, 20, 18, .94);
  --text: #f3f0e9;
  --muted: #b0ab9f;
  --line: rgba(255,255,255,.095);
  --line-strong: rgba(255,255,255,.16);
  --accent: #d9b453;
  --accent-soft: rgba(217, 180, 83, .18);
  --accent-strong: rgba(217, 180, 83, .38);
  --paper-shadow: rgba(0,0,0,.26);
  --page-edge-left: rgba(0,0,0,.10);
  --page-edge-right: rgba(0,0,0,.09);
  --nav-bg: rgba(24,24,21,.62);
  --nav-text: rgba(255,255,255,.92);
  --thumb-bg: rgba(255,255,255,.02);
  --thumb-active: rgba(217, 180, 83, .14);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f2ede3;
  --bg-2: #ebe4d7;
  --panel: rgba(255,255,251,.78);
  --panel-solid: rgba(255,255,251,.96);
  --text: #181511;
  --muted: #5f584d;
  --line: rgba(24,21,17,.10);
  --line-strong: rgba(24,21,17,.18);
  --accent: #b08a2e;
  --accent-soft: rgba(176, 138, 46, .12);
  --accent-strong: rgba(176, 138, 46, .26);
  --paper-shadow: rgba(0,0,0,.18);
  --page-edge-left: rgba(0,0,0,.08);
  --page-edge-right: rgba(0,0,0,.07);
  --nav-bg: rgba(255,255,250,.72);
  --nav-text: #1c1711;
  --thumb-bg: rgba(24,21,17,.025);
  --thumb-active: rgba(176, 138, 46, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr) 132px;
  background:
    radial-gradient(circle at 50% -10%, var(--accent-soft) 0, transparent 35%),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.04), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.topbar,
.bottom-panel {
  backdrop-filter: blur(var(--ui-blur));
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-home {
  border: 0;
  /* Hover'da beliren arka plan logoya ve yaziya yapismasin diye ic bosluk.
     Negatif margin ayni miktarda: buton buyuyor ama logo, yazilar ve
     ust cubugun yuksekligi oldugu yerde kaliyor. */
  padding: 6px 12px;
  margin: -6px -12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 18px;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.brand-home:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.brand-home:active { transform: scale(.985); }
.brand-logo-wrap {
  position: relative;
  width: 164px;
  height: 52px;
  flex: 0 0 auto;
}
.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .18s ease;
}
.brand-logo-dark { opacity: 0; }
.brand-logo-light { opacity: 1; }
:root[data-theme="light"] .brand-logo-dark { opacity: 1; }
:root[data-theme="light"] .brand-logo-light { opacity: 0; }
.brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.brand-eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 800;
}
.brand-copy strong {
  font-size: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand-copy small:last-child {
  color: var(--muted);
  font-size: 11px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 5px;
}
.icon-btn,
.zoom-label,
.mobile-tools {
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.zoom-label {
  min-width: 58px;
  height: 38px;
  border-radius: 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.share-btn {
  height: 40px;
  border-radius: 12px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  color: var(--text);
  background: color-mix(in srgb, var(--thumb-bg) 60%, transparent);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.share-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-btn span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.icon-btn:hover,
.zoom-label:hover,
.mobile-tools:hover,
.mobile-zoom-sheet button:hover,
.share-btn:hover {
  background: var(--accent-soft);
}
.icon-btn:active,
.mobile-tools:active,
.mobile-zoom-sheet button:active,
.share-btn:active {
  transform: scale(.96);
}
.icon-btn svg,
.mobile-tools svg,
.mobile-zoom-sheet svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-btn .theme-sun { display: none; }
:root[data-theme="light"] .theme-btn .theme-sun { display: block; }
:root[data-theme="light"] .theme-btn .theme-moon { display: none; }
.fs-close { display: none; }
:fullscreen .fs-open { display: none; }
:fullscreen .fs-close { display: block; }

.reader {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 48%, var(--reader-glow, rgba(217,180,83,.105)) 0%, rgba(217,180,83,.035) 26%, transparent 57%),
    radial-gradient(ellipse at 50% 105%, rgba(255,255,255,.035), transparent 45%),
    linear-gradient(115deg, rgba(255,255,255,.018), transparent 33%, rgba(217,180,83,.025) 70%, transparent);
}
.reader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.009) 0 1px, transparent 1px 5px);
  opacity: .76;
}
:root[data-theme="light"] .reader {
  --reader-glow: rgba(176,138,46,.12);
  background:
    radial-gradient(ellipse at 50% 48%, var(--reader-glow) 0%, rgba(176,138,46,.04) 26%, transparent 58%),
    radial-gradient(ellipse at 50% 105%, rgba(255,255,255,.7), transparent 48%),
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 38%, rgba(176,138,46,.045) 72%, transparent);
}
:root[data-theme="light"] .reader::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(92,71,31,.065) 100%),
    repeating-linear-gradient(135deg, rgba(88,67,29,.012) 0 1px, transparent 1px 5px);
  opacity: .7;
}
.reader-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .50;
  background: radial-gradient(circle, rgba(217,180,83,.21), rgba(217,180,83,0) 68%);
}
.halo-a { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; left: -12vw; top: 9%; }
.halo-b { width: 28vw; height: 28vw; max-width: 430px; max-height: 430px; right: -9vw; bottom: 3%; opacity: .22; }
.butterfly {
  position: absolute;
  width: 92px;
  height: auto;
  fill: rgba(217,180,83,.10);
  stroke: rgba(217,180,83,.14);
  stroke-width: 1.1;
  overflow: visible;
  filter: blur(.1px);
  transform-origin: 50% 50%;
  animation: butterflyDrift 13s ease-in-out infinite alternate;
}
.butterfly-body { fill: none; stroke: rgba(217,180,83,.18); stroke-width: 2.2; stroke-linecap: round; }
.butterfly-a { right: 7%; top: 10%; width: 98px; transform: rotate(14deg); animation-duration: 15s; }
.butterfly-b { left: 5%; bottom: 9%; width: 66px; transform: rotate(-18deg); opacity: .72; animation-duration: 18s; animation-delay: -7s; }
.butterfly-c { left: 10%; top: 18%; width: 34px; transform: rotate(22deg); opacity: .46; animation-duration: 20s; animation-delay: -4s; }
.butterfly-d { right: 13%; bottom: 16%; width: 42px; transform: rotate(-26deg); opacity: .52; animation-duration: 17s; animation-delay: -9s; }
:root[data-theme="light"] .butterfly {
  fill: rgba(176,138,46,.075);
  stroke: rgba(176,138,46,.10);
}
:root[data-theme="light"] .butterfly-body { stroke: rgba(176,138,46,.12); }
@keyframes butterflyDrift {
  from { translate: 0 0; }
  to { translate: 8px -10px; }
}
.viewport {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  outline: none;
  touch-action: none;
  cursor: default;
}
.viewport.zoomed { cursor: grab; }
.viewport.zoomed.dragging { cursor: grabbing; }
.scene-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.scene-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0, rgba(255,255,255,.035) 18%, transparent 42%),
    radial-gradient(circle at 18% 22%, rgba(217,180,83,.06) 0, transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.035) 0, transparent 24%);
  opacity: .85;
}
.scene-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  opacity: .22;
  mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
}
.ambient-glow {
  position: absolute;
  width: 52vw;
  height: 52vw;
  max-width: 760px;
  max-height: 760px;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .52;
  mix-blend-mode: screen;
}
.glow-a {
  left: -8%;
  top: 10%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0, rgba(217,180,83,.09) 22%, rgba(217,180,83,.045) 42%, transparent 70%);
  animation: lumosGlowA 18s ease-in-out infinite alternate;
}
.glow-b {
  right: -10%;
  bottom: -4%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0, rgba(217,180,83,.06) 24%, rgba(255,255,255,.028) 46%, transparent 72%);
  animation: lumosGlowB 24s ease-in-out infinite alternate;
}
.glow-c {
  left: 34%;
  top: 22%;
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle, rgba(255,255,255,.11) 0, rgba(255,255,255,.03) 34%, transparent 72%);
  animation: lumosGlowC 21s ease-in-out infinite alternate;
}
@keyframes lumosGlowA {
  0% { transform: translate3d(-2%, -2%, 0) scale(.94); opacity: .42; }
  50% { transform: translate3d(10%, 7%, 0) scale(1.04); opacity: .62; }
  100% { transform: translate3d(16%, 12%, 0) scale(1.10); opacity: .50; }
}
@keyframes lumosGlowB {
  0% { transform: translate3d(0, 0, 0) scale(.9); opacity: .30; }
  50% { transform: translate3d(-10%, -8%, 0) scale(1.02); opacity: .52; }
  100% { transform: translate3d(-18%, -14%, 0) scale(1.08); opacity: .38; }
}
@keyframes lumosGlowC {
  0% { transform: translate3d(-5%, 4%, 0) scale(.92); opacity: .34; }
  50% { transform: translate3d(3%, -6%, 0) scale(1.06); opacity: .34; }
  100% { transform: translate3d(11%, -10%, 0) scale(1.02); opacity: .28; }
}
.butterfly-field {
  position: absolute;
  inset: 0;
}
.butterfly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 36px);
  height: var(--size, 36px);
  color: var(--butterfly-color, rgba(255,255,255,.06));
  opacity: var(--butterfly-opacity, .06);
  transform: translate3d(var(--start-x, 0px), var(--start-y, 0px), 0);
  animation:
    butterflyDrift var(--drift-duration, 24s) linear infinite var(--drift-delay, 0s),
    butterflyFlutter var(--flutter-duration, 4.5s) ease-in-out infinite var(--flutter-delay, 0s);
  will-change: transform, opacity;
}
.butterfly svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.05));
}
.butterfly .wing {
  transform-origin: center;
  animation: butterflyWing var(--wing-duration, 1.8s) ease-in-out infinite alternate;
}
@keyframes butterflyDrift {
  0% { transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, -8deg)) scale(var(--scale, 1)); }
  50% { transform: translate3d(calc(var(--start-x) + var(--mid-x)), calc(var(--start-y) + var(--mid-y)), 0) rotate(var(--rot-mid, 2deg)) scale(calc(var(--scale, 1) * 1.03)); }
  100% { transform: translate3d(calc(var(--start-x) + var(--end-x)), calc(var(--start-y) + var(--end-y)), 0) rotate(var(--rot-end, 8deg)) scale(var(--scale, 1)); }
}
@keyframes butterflyFlutter {
  0%, 100% { opacity: calc(var(--butterfly-opacity, .06) * .85); }
  50% { opacity: var(--butterfly-opacity, .06); }
}
@keyframes butterflyWing {
  from { transform: scaleX(1) scaleY(1); }
  to { transform: scaleX(.88) scaleY(1.03); }
}
:root[data-theme="light"] .scene-decor::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0, rgba(255,255,255,.06) 18%, rgba(176,138,46,.05) 30%, transparent 52%),
    radial-gradient(circle at 18% 22%, rgba(176,138,46,.065) 0, transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.085) 0, transparent 24%);
}
:root[data-theme="light"] .scene-decor::after {
  background-image:
    linear-gradient(rgba(24,21,17,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,21,17,.014) 1px, transparent 1px);
  opacity: .14;
}
:root[data-theme="light"] .ambient-glow {
  mix-blend-mode: multiply;
  opacity: .34;
}
:root[data-theme="light"] .butterfly svg {
  filter: drop-shadow(0 0 12px rgba(255,255,255,.08));
}
.stage {
  position: absolute;
  z-index: 1;
  width: calc(var(--page-w) * 2px);
  height: calc(var(--page-h) * 1px);
  transform-origin: 0 0;
  will-change: transform;
  perspective: 1500px;   /* daha yakin bakis: donus derinlik kazaniyor */
  contain: layout style;
}
.spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Tek sayfa (telefon) modunda serit yine iki sutuna bolunuyor, sayfa
   yalnizca birini kaplayip yarim genislikte kaliyordu. Tek yuva varsa
   sutun da tek olmali. */
.spread:has(> .page-slot.single) { grid-template-columns: 1fr; }
.page-slot {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
.page-curl {
  display: none;   /* sabit ucgen: kagit gibi durmuyordu, yerini isik animasyonu aldi */
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
  opacity: .36;
  background:
    linear-gradient(135deg, rgba(0,0,0,0) 0 48%, rgba(0,0,0,.055) 49% 56%, rgba(255,255,255,.92) 57% 100%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  filter: drop-shadow(-3px -2px 4px rgba(0,0,0,.08));
}
.page-slot.left .page-curl {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}
.page-slot.single .page-curl { opacity: .3; }
:root[data-theme="light"] .page-curl {
  background:
    linear-gradient(135deg, rgba(0,0,0,0) 0 48%, rgba(0,0,0,.045) 49% 56%, rgba(255,255,255,.98) 57% 100%);
}
.page-slot.empty { background: transparent; pointer-events: none; }
.page-slot.left {
  box-shadow: -14px 18px 32px var(--paper-shadow), inset -12px 0 18px rgba(0,0,0,.035);
}
.page-slot.right {
  box-shadow: 14px 18px 32px var(--paper-shadow), inset 12px 0 18px rgba(0,0,0,.025);
}
.page-slot.left:not(.empty)::after,
.page-slot.right:not(.empty)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4.5%;
  z-index: 2;
  pointer-events: none;
}
.page-slot.left::after { right: 0; background: linear-gradient(90deg, transparent, var(--page-edge-left)); }
.page-slot.right::before { left: 0; background: linear-gradient(90deg, var(--page-edge-right), transparent); }
.page-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  pointer-events: none;
}
.page-slot.loading .page-img { opacity: 0; }
.page-slot.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f0eee7 18%, #faf9f5 35%, #f0eee7 52%);
  background-size: 200% 100%;
  animation: shimmer 1.05s linear infinite;
}
@keyframes shimmer { to { background-position-x: -200%; } }

.flip-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  transform-style: preserve-3d;
}
.flipper {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.flipper.next { left: 50%; transform-origin: left center; animation: flipNext .34s cubic-bezier(.45,.04,.2,1) both; }
.flipper.prev { left: 0; transform-origin: right center; animation: flipPrev .34s cubic-bezier(.45,.04,.2,1) both; }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.flip-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flip-face.back { transform: rotateY(180deg); }
/* Cevrilen yaprakta isik.
   Onceki halde sabit bir karartma vardi; sayfa donerken isik hic
   degismedigi icin kagit degil, donen bir resim gibi duruyordu.
   Gercekte yaprak dikleserken (90 derece) isigi en az alir, karsi
   yuze gecerken yeniden aydinlanir. Asagidaki iki animasyon bunu
   yapiyor: on yuz kararirken arka yuz aciliyor. */
.flip-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 38%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.22) 100%);
  opacity: 0;
}
.flipper.next .flip-face.front::after { animation: yaprakOnYuz .34s cubic-bezier(.45,.04,.2,1) both; }
.flipper.next .flip-face.back::after  { animation: yaprakArkaYuz .34s cubic-bezier(.45,.04,.2,1) both; }
.flipper.prev .flip-face.front::after { animation: yaprakOnYuz .34s cubic-bezier(.45,.04,.2,1) both; }
.flipper.prev .flip-face.back::after  { animation: yaprakArkaYuz .34s cubic-bezier(.45,.04,.2,1) both; }

@keyframes yaprakOnYuz {
  0%   { opacity: .10; }
  48%  { opacity: .80; }
  100% { opacity: .90; }
}
@keyframes yaprakArkaYuz {
  0%   { opacity: .90; }
  52%  { opacity: .62; }
  100% { opacity: .04; }
}

/* Donen yaprak sahneden kalkarken golgesi buyuyup yumusuyor. */
.flipper.next .flip-face,
.flipper.prev .flip-face { animation: yaprakGolge .34s cubic-bezier(.45,.04,.2,1) both; }
@keyframes yaprakGolge {
  0%   { box-shadow: 0 6px 14px rgba(0,0,0,.14); }
  50%  { box-shadow: 0 26px 60px rgba(0,0,0,.42); }
  100% { box-shadow: 0 8px 20px rgba(0,0,0,.16); }
}

/* Donus egrisi: basta hizlanip sonda yavaslayan tek bir donus yerine,
   yaprak once hafifce kalkiyor, sonra devriliyor. */
@keyframes flipNext {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes flipPrev {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* Cevrilen yapragin serbest kosesindeki kivrim.
   Onceki hali sabit bir ucgendi ve donus boyunca hic degismiyordu.
   Simdi donusle birlikte aciliyor: yaprak kalkarken kose kabariyor,
   yaprak dikleyken kivrim en belirgin, kapanirken siliniyor.
   Kivrimin genisligi --kivrim degiskeni ile suruklemeye de baglanabiliyor. */
.flip-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  pointer-events: none;
  transform-origin: 100% 100%;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background:
    linear-gradient(135deg,
      rgba(0,0,0,0) 0 40%,
      rgba(0,0,0,.16) 43% 48%,
      rgba(252,250,245,.99) 51% 78%,
      rgba(226,219,205,.95) 100%);
  filter: drop-shadow(-6px -5px 8px rgba(0,0,0,.20));
  opacity: 0;
}
.flipper.prev .flip-curl {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}
.flipper.next .flip-face.front .flip-curl,
.flipper.prev .flip-face.front .flip-curl {
  animation: kivrimAc .34s cubic-bezier(.45,.04,.2,1) both;
}
/* Arka yuzde kivrim ters yonde: yaprak kapanirken kose yerine oturuyor. */
.flipper.next .flip-face.back .flip-curl,
.flipper.prev .flip-face.back .flip-curl {
  animation: kivrimKapan .34s cubic-bezier(.45,.04,.2,1) both;
}
@keyframes kivrimAc {
  0%   { opacity: 0;   transform: scale(.35); }
  30%  { opacity: .78; transform: scale(.92); }
  60%  { opacity: .92; transform: scale(1.06); }
  100% { opacity: 0;   transform: scale(.5); }
}
@keyframes kivrimKapan {
  0%   { opacity: 0;   transform: scaleX(-1) scale(.5); }
  45%  { opacity: .55; transform: scaleX(-1) scale(.95); }
  100% { opacity: 0;   transform: scaleX(-1) scale(.4); }
}
.nav-btn {
  position: absolute;
  z-index: 15;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 66px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--nav-text);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity .16s ease, background .16s ease, transform .16s ease, border-color .16s ease;
}
.nav-btn:hover {
  background: color-mix(in srgb, var(--nav-bg) 70%, var(--accent-soft));
  border-color: var(--accent-strong);
}
.nav-btn:active { transform: translateY(-50%) scale(.96); }
.nav-btn:disabled { opacity: .50; pointer-events: none; }
.nav-btn.prev { left: 18px; }
.nav-btn.next { right: 18px; }
.nav-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading-pill,
.gesture-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  border-radius: 999px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  color: var(--text);
  backdrop-filter: blur(16px);
}
.loading-pill {
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.loading-pill.show { opacity: 1; }
.loading-pill span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: pulse 1.1s ease infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-strong); }
  100% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
}
.gesture-hint {
  bottom: 18px;
  padding: 10px 15px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.gesture-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.bottom-panel {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.bottom-panel::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
}
.page-control-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
}
.page-meta {
  display: grid;
  gap: 3px;
  min-width: 110px;
}
.page-readout {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-meta small {
  color: var(--muted);
  font-size: 11px;
}
.page-slider {
  width: 100%;
  appearance: none;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-strong), var(--line-strong));
  border-radius: 999px;
  outline: none;
}
.page-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-solid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.page-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-solid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mobile-tools {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--thumb-bg);
}
.mobile-tools span { font-size: 12px; font-weight: 700; }

.thumb-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-strong) transparent;
}
.thumb-strip::-webkit-scrollbar { height: 8px; }
.thumb-strip::-webkit-scrollbar-thumb { background: var(--accent-strong); border-radius: 999px; }
.thumb {
  flex: 0 0 auto;
  width: 64px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 7px;
  background: var(--thumb-bg);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.thumb:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong);
}
.thumb.active {
  border-color: var(--accent);
  background: var(--thumb-active);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.thumb img {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}
.thumb-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(152px + env(safe-area-inset-bottom));
  transform: translate(-50%, 10px);
  z-index: 60;
  min-width: 180px;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--text);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.share-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.mobile-zoom-sheet {
  position: fixed;
  right: 16px;
  bottom: calc(124px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(8px) scale(.96);
  pointer-events:none;
  transition:.15s ease;
}
.mobile-zoom-sheet.open { opacity:1; transform:none; pointer-events:auto; }
.mobile-zoom-sheet button {
  width:42px;
  height:40px;
  border:0;
  border-radius:10px;
  color:var(--text);
  background:transparent;
  display:grid;
  place-items:center;
  font-size:20px;
}
.mobile-zoom-sheet .zoom-sheet-value { font-size:10px; }

@media (max-width: 1080px) {
  .brand-copy strong { font-size: 15px; }
}

@media (max-width: 839px) {
  .ambient-glow { filter: blur(46px); }
  .glow-c { display: none; }
  .app { grid-template-rows: 72px minmax(0,1fr) 132px; }
  .brand { gap: 12px; }
  .brand-logo-wrap { width: 132px; height: 46px; }
  .brand-eyebrow { font-size: 9px; letter-spacing: .14em; }
  .brand-copy strong { font-size: 14px; }
  .page-control-row { grid-template-columns: minmax(0,1fr) auto; }
  .page-meta small { display: none; }
  .mobile-tools { display: inline-flex; }
}

@media (max-width: 680px) {
  .share-btn { padding: 0 11px; }
  .share-btn span { display: none; }
  .app { grid-template-rows: 66px minmax(0,1fr) 118px; }
  .topbar {
    padding-inline: 12px;
  }
  .bottom-panel {
    padding-inline: 12px;
    gap: 10px;
  }
  .topbar::after,
  .bottom-panel::before { left: 12px; right: 12px; }
  .brand-logo-wrap { width: 118px; height: 42px; }
  /* Ust cubuk yan bosluu burada 12px'e dusuyor; marjin de kuculmezse
     hover arka plani ekranin kenarina dayanirdi. */
  .brand-home { padding: 5px 8px; margin: -5px -8px; }
  .brand-copy { gap: 1px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small:last-child,
  .brand-eyebrow { display: none; }
  .nav-btn {
    width: 42px;
    height: 56px;
    border-radius: 14px;
  }
  .nav-btn.prev { left: 10px; }
  .nav-btn.next { right: 10px; }
  .thumb {
    width: 56px;
    padding: 6px;
    border-radius: 12px;
  }
  .thumb img { height: 68px; }
  .page-readout { font-size: 13px; }
}

@media (max-width: 480px) {
  .top-actions .toolbar-sep:first-of-type { display: none; }
  .theme-btn { display: none; }
  .zoom-label { min-width: 52px; }
  .reader .nav-btn { top: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .ambient-glow, .butterfly, .butterfly .wing { animation: none !important; }
}

@media (max-width: 680px) {
  .share-btn { padding: 0 11px; }
  .share-btn span { display: none; }
  .butterfly-a { right: -1%; top: 8%; width: 70px; }
  .butterfly-b { left: -2%; bottom: 10%; width: 50px; }
  .butterfly-c { display: none; }
  .butterfly-d { right: 5%; bottom: 18%; width: 32px; }
  .halo-a { left: -28vw; }
  .halo-b { right: -24vw; }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly { animation: none !important; }
}


/* ------------------------------------------------------------------
   Telefon duzeni
   Sorun: ust cubuktaki yakinlastirma kontrolleri dar ekrana sigmiyor,
   basligi tasirip sayfayi yatayda genisletiyordu. Okuyucu, sigdirma
   hesabini tasmis genislige gore yapinca sayfa kucuk kaliyor, altinda
   ustunde genis bosluk olusuyordu. Ayrica kucuk resim seridi 118px
   yer kapliyordu.
   Cozum: ust cubugu sadelestir, seridi kaldir, kalan alani sayfaya ver.
   ------------------------------------------------------------------ */
@media (max-width: 680px) {
  html, body { overflow-x: hidden; }

  /* Yakinlastirma alt paneldeki mobil aracta zaten var; ust cubukta
     yer kaplamasin. Ayiraclar da gitsin. */
  .top-actions #zoomOutBtn,
  .top-actions #zoomInBtn,
  .top-actions #zoomResetBtn,
  .top-actions .toolbar-sep { display: none; }

  /* Flex ogeleri varsayilan olarak kuculmuyor (min-width:auto);
     bu olmadan uzun baslik cubugu yine tasirir. */
  .topbar { gap: 10px; }
  .brand, .brand-copy, .top-actions { min-width: 0; }
  .brand-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Kucuk resim seridi telefonda sayfadan yer caliyordu; gezinme icin
     alttaki kaydirici yeterli. */
  .thumb-strip { display: none; }
  .app { grid-template-rows: 56px minmax(0, 1fr) 58px; }
  .bottom-panel { padding-block: 8px; }

  /* Sayfa cevirme oklari parmakla rahat basilacak olcude */
  .nav-btn { width: 48px; height: 72px; border-radius: 16px; }
  .nav-btn.prev { left: 8px; }
  .nav-btn.next { right: 8px; }
}


/* ---- Suruklemeli cevirme ----
   Surukleme sirasinda yaprak bir animasyonu degil eli takip ediyor;
   bu yuzden butun animasyonlar kapatilip aci, isik ve kivrim dogrudan
   JS'ten (--on / --arka / --kivrim) veriliyor. Birakildiginda
   "yerlesiyor" sinifi kisa bir gecisle yapragi tamamliyor ya da
   geri kapatiyor. */
.flipper.suruklu,
.flipper.suruklu .flip-face,
.flipper.suruklu .flip-face::after,
.flipper.suruklu .flip-curl { animation: none !important; }

.flipper.suruklu .flip-face.front::after { opacity: var(--on, .10); }
.flipper.suruklu .flip-face.back::after  { opacity: var(--arka, .90); }
.flipper.suruklu .flip-face.front .flip-curl { opacity: var(--kivrim, 0); }
.flipper.suruklu .flip-face.back  .flip-curl { opacity: 0; }
.flipper.suruklu .flip-face { box-shadow: 0 20px 48px rgba(0,0,0,.34); }

.flipper.suruklu.yerlesiyor { transition: transform .26s cubic-bezier(.25,.85,.35,1); }
.flipper.suruklu.yerlesiyor .flip-face::after,
.flipper.suruklu.yerlesiyor .flip-curl { transition: opacity .26s ease; }

/* Surukleme sirasinda metin secilmesin, sayfa kaymasin */
.viewport { touch-action: pan-y; -webkit-user-select: none; user-select: none; }

/* Tek sayfa (telefon) modunda cevrilen yaprak.
   .flipper genisligi cift sayfa duzenine gore %50 sabitti; tek sayfada
   sahne zaten bir sayfa genisliginde oldugu icin yaprak yarim boyda
   goruluyor, ancak birakildiginda tam sayfa beliriyordu. */
@media (max-width: 839px) {
  .flipper { width: 100%; }
  .flipper.next,
  .flipper.prev { left: 0; }
}

/* Ipucu kaybolurken belirmesinden daha yavas: goz aliciligi azalsin,
   okuma akisini bolmeden ceklisin. */
.gesture-hint:not(.show) {
  transition: opacity 1.1s ease, transform 1.1s ease;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
}

/* ---- Fon muzigi dugmesi ----
   Tema dugmesiyle ayni olcude. Muzik kapaliyken uzeri cizili nota,
   acikken sade nota gosteriliyor; calarken hafifce nabiz atiyor. */
.muzik-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.muzik-btn .muzik-nota { display: none; }
.muzik-btn .muzik-kapali { display: block; }
.muzik-btn.caliyor .muzik-nota { display: block; }
.muzik-btn.caliyor .muzik-kapali { display: none; }
.muzik-btn.caliyor { color: var(--accent); border-color: var(--accent); }
.muzik-btn.caliyor .muzik-nota { animation: muzikNabiz 2.4s ease-in-out infinite; }
@keyframes muzikNabiz {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: .72; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .muzik-btn.caliyor .muzik-nota { animation: none; }
}

/* ------------------------------------------------------------------
   Sahne arka plani -- sayfalarin durdugu alan
   Onceki isiklar neredeyse beyazdi ve %3-12 opakliktaydi; zemin duz
   gorunuyordu. Renkler artik derginin kendi paletinden: altin, lila ve
   acik mavi (kapaktaki kelebeklerin renkleri). Hareket yavas ve genis
   tutuldu -- goz yormadan yasayan bir zemin.
   ------------------------------------------------------------------ */
.glow-a {
  background: radial-gradient(circle,
    rgba(255,236,190,.34) 0,
    rgba(226,186,86,.18) 26%,
    rgba(226,186,86,.07) 48%,
    transparent 72%);
}
.glow-b {
  background: radial-gradient(circle,
    rgba(201,175,238,.30) 0,
    rgba(162,132,212,.15) 28%,
    rgba(162,132,212,.055) 50%,
    transparent 74%);
}
.glow-c {
  background: radial-gradient(circle,
    rgba(152,216,240,.28) 0,
    rgba(108,186,218,.13) 30%,
    rgba(108,186,218,.04) 52%,
    transparent 72%);
}

/* Aydinlik temada zemin krem; renkler biraz daha doygun olmali ki
   silinip gitmesinler. */
:root[data-theme="light"] .glow-a {
  background: radial-gradient(circle,
    rgba(238,196,96,.40) 0,
    rgba(206,160,54,.20) 26%,
    rgba(206,160,54,.07) 48%,
    transparent 72%);
}
:root[data-theme="light"] .glow-b {
  background: radial-gradient(circle,
    rgba(178,146,222,.34) 0,
    rgba(146,112,200,.17) 28%,
    rgba(146,112,200,.06) 50%,
    transparent 74%);
}
:root[data-theme="light"] .glow-c {
  background: radial-gradient(circle,
    rgba(120,192,224,.32) 0,
    rgba(84,164,200,.15) 30%,
    rgba(84,164,200,.05) 52%,
    transparent 72%);
}

/* Kelebekler: JS'ten gelen renk kullanildigi icin buradaki sabit
   dolgular yalnizca yedek. Hafif parilti derinlik veriyor. */
.butterfly-field .butterfly svg {
  filter: drop-shadow(0 0 10px rgba(255,236,190,.22));
}
:root[data-theme="light"] .butterfly-field .butterfly svg {
  filter: drop-shadow(0 0 8px rgba(190,150,70,.18));
}

/* ------------------------------------------------------------------
   Kelebek ucusu
   Onceki animasyon "alternate" idi: kelebek bir miktar ilerleyip
   ayni yoldan geri sariyor, sahnede zipliyor gibi duruyordu. Artik
   tek yonlu bir dongu: asagidan belirip yukari suzuluyor, ara
   noktalari JS'te rastgele uretildigi icin duz bir cizgi degil
   salinimli bir egri izliyor, iki ucta da yumusakca soluyor.
   ------------------------------------------------------------------ */
.butterfly-field .butterfly {
  animation:
    kelebekUcus var(--ucus-suresi, 30s) linear var(--ucus-gecikme, 0s) infinite;
}
.butterfly-field .butterfly .wing {
  animation: butterflyWing var(--wing-duration, 1.8s) ease-in-out infinite alternate;
}

@keyframes kelebekUcus {
  0% {
    transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--r0)) scale(var(--scale, 1));
    opacity: 0;
  }
  9% {
    opacity: var(--butterfly-opacity, .5);
  }
  25% {
    transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(var(--scale, 1));
  }
  50% {
    transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(var(--scale, 1));
  }
  75% {
    transform: translate3d(var(--x3), var(--y3), 0) rotate(var(--r3)) scale(var(--scale, 1));
  }
  88% {
    opacity: var(--butterfly-opacity, .5);
  }
  100% {
    transform: translate3d(var(--x4), var(--y4), 0) rotate(var(--r4)) scale(var(--scale, 1));
    opacity: 0;
  }
}

/* ------------------------------------------------------------------
   Telefon duzeni -- ikinci tur duzeltmeler
   ------------------------------------------------------------------ */
@media (max-width: 680px) {
  /* Logonun yaninda ayrica "Lumos" yazmasina gerek yok: logo zaten
     ayni seyi soyluyor ve dar cubukta yer kapliyor. */
  .brand-copy { display: none; }

  /* Alt satirdaki uc oge (sayfa no, kaydirici, yakinlastirma) iki
     sutunlu izgaraya sigmayip alt satira tasiyor, panelin disinda
     kalip kirpiliyordu. Ucu de tek sirada. */
  .page-control-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  .page-meta small { display: none; }
  .page-readout { white-space: nowrap; }
  .mobile-tools { flex: 0 0 auto; }
}


/* ---- Yayinda sayi yokken gosterilen ekran ---- */
.bos-durum{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:40px 24px;text-align:center}
.bos-logo{position:relative;width:min(280px,62vw);aspect-ratio:280/86}
.bos-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bos-logo-dark{opacity:1}
.bos-logo-light{opacity:0}
:root[data-theme="dark"] .bos-logo-dark{opacity:0}
:root[data-theme="dark"] .bos-logo-light{opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bos-logo-dark{opacity:0}
  :root:not([data-theme="light"]) .bos-logo-light{opacity:1}
}
.bos-baslik{margin:6px 0 0;font-size:clamp(19px,3.4vw,25px);font-weight:800}
.bos-alt{margin:0;max-width:34ch;font-size:15px;line-height:1.6;opacity:.72}


/* ---- Dokunmatikte cevirme oklarinin solmasi ----
   Oklar sayfanin uzerinde durdugu icin dar ekranda metni kapatiyorlardi.
   Bos birakilinca yari saydamlasiyor, ekrana dokununca tam gorunurluge
   donuyorlar. Tamamen kaybolmuyorlar: solgun halde de basilabiliyorlar,
   boylece cevirmek icin once uyandirmak gerekmiyor. Arkasindaki bulaniklik
   da azaliyor ki altta kalan yazi okunabilsin. */
@media (hover: none) {
  .nav-btn { transition: opacity .35s ease, backdrop-filter .35s ease,
                         background .16s ease, transform .16s ease,
                         border-color .16s ease; }
  .oklar-uykuda .nav-btn {
    opacity: .3;
    backdrop-filter: blur(3px);
  }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .nav-btn { transition: none; }
}