/* ERGÜN MAG — flipbook okuyucu
   Bağımlılık yok, tek statik dosya seti. */

:root{
  --bg:      #0c0d10;
  --bg-far:  #16181e;
  --fg:      #eceef2;
  --muted:   #9aa1ad;
  --glass:   rgba(22,24,30,.72);
  --glass-b: rgba(255,255,255,.10);
  --accent:  #4f7ce8;
  --pad:     14px;
  --bar-h:   46px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--fg);
  font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

body{
  position:fixed; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, var(--bg-far) 0%, var(--bg) 62%, #07080a 100%);
}

/* ---------------------------------------------------------------- sahne */

#stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:
    calc(var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
  touch-action:none;
}

#viewport{
  position:relative;
  transform-origin:50% 50%;
  transition:transform .22s var(--ease);
}
#viewport.is-dragging{ transition:none; }

/* JS'in ürettiği kitap kabı */
.book{ position:relative; }
.book .stf__wrapper{ height:100%; }

/* ---------------------------------------------------------- kitap sayfası */

.pg{
  position:relative;
  background:#fff;
  overflow:hidden;
}
.pg > img{
  display:block;
  width:100%; height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none; -webkit-user-drag:none;
}
.pg > .lo{ position:absolute; inset:0; filter:blur(1px); transform:scale(1.01); }
.pg > .hd{ position:absolute; inset:0; opacity:0; transition:opacity .2s linear; }
.pg > .hd.on{ opacity:1; }

/* açık kitap ortasındaki cilt gölgesi */
#spine{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:64px; margin-left:-32px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s var(--ease);
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.30) 49%,
    rgba(0,0,0,.30) 51%, rgba(0,0,0,.10) 66%, rgba(0,0,0,0) 100%);
  z-index:60;
}
body.is-spread.is-resting #spine{ opacity:1; }

/* kitap altı gölgesi — .book'a JS'ten filter vermek yerine ::after */
#viewport::after{
  content:"";
  position:absolute; left:var(--shl,4%); right:var(--shr,4%); bottom:-26px; height:34px;
  transition:left .25s var(--ease), right .25s var(--ease);
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  pointer-events:none;
  z-index:-1;
}

/* --------------------------------------------------------- zoom pan katmanı */

#pan{
  position:fixed; inset:0;
  display:none;
  cursor:grab;
  touch-action:none;
  z-index:70;
}
body.is-zoomed #pan{ display:block; }
#pan.is-grabbing{ cursor:grabbing; }

/* ------------------------------------------------------------- yan oklar */

.side{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:80;
  width:46px; height:46px;
  display:none;
  place-items:center;
  border:1px solid var(--glass-b);
  border-radius:50%;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  color:var(--fg);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.side--prev{ left:calc(14px + env(safe-area-inset-left)); }
.side--next{ right:calc(14px + env(safe-area-inset-right)); }
.side svg{ width:22px; height:22px; }
.side:hover{ background:rgba(38,42,52,.85); }
.side[disabled]{ opacity:0 !important; pointer-events:none; }

@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .side{ display:grid; }
  body.ui-on .side{ opacity:1; }
}

/* --------------------------------------------------------------- kontroller */

#chrome{
  position:fixed;
  left:0; right:0;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:90;
  display:flex; justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
body.ui-on #chrome{ opacity:1; transform:none; }

.bar{
  pointer-events:auto;
  display:flex; align-items:center; gap:2px;
  height:var(--bar-h);
  padding:0 7px;
  border:1px solid var(--glass-b);
  border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  max-width:calc(100vw - 24px);
}

.bar button{
  appearance:none;
  display:grid; place-items:center;
  min-width:34px; height:34px;
  padding:0 8px;
  border:0; border-radius:999px;
  background:transparent;
  color:var(--fg);
  font:inherit; font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
}
.bar button:hover{ background:rgba(255,255,255,.09); }
.bar button:active{ background:rgba(255,255,255,.14); }
.bar button[disabled]{ opacity:.28; pointer-events:none; }
.bar button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.bar button svg{ width:19px; height:19px; }

.bar .counter{
  padding:0 10px;
  min-width:78px;
  text-align:center;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  white-space:nowrap;
}
.bar .sep{
  width:1px; height:20px; margin:0 5px;
  background:rgba(255,255,255,.12);
  flex:0 0 auto;
}

svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* dar ekranda yüzde etiketini gizle, bar taşmasın */
@media (max-width:430px){
  .bar #zoomLabel{ display:none; }
  .bar .counter{ min-width:66px; padding:0 6px; }
}

/* ------------------------------------------------------------ küçük resimler */

#thumbs{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:85;
  padding:12px 0 calc(var(--bar-h) + 26px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(8,9,12,0) 0%, rgba(8,9,12,.86) 42%, rgba(8,9,12,.96) 100%);
  transform:translateY(102%);
  transition:transform .3s var(--ease);
}
body.thumbs-on #thumbs{ transform:none; }

.strip{
  display:flex; gap:8px;
  padding:0 max(14px, env(safe-area-inset-left)) 2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{ height:6px; }
.strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }

.th{
  flex:0 0 auto;
  position:relative;
  padding:0; border:0;
  background:none;
  cursor:pointer;
  line-height:0;
}
.th img{
  display:block;
  width:auto; height:96px;
  border-radius:3px;
  outline:1px solid rgba(255,255,255,.14);
  outline-offset:-1px;
  opacity:.62;
  transition:opacity .16s var(--ease), outline-color .16s var(--ease), transform .16s var(--ease);
}
.th:hover img{ opacity:.9; }
.th.is-current img{ opacity:1; outline:2px solid var(--accent); transform:translateY(-2px); }
.th b{
  display:block;
  margin-top:5px;
  font-size:10px; font-weight:600;
  color:var(--muted);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.th.is-current b{ color:var(--fg); }

/* ------------------------------------------------------------------ ipucu */

#hint{
  position:fixed;
  left:50%;
  bottom:calc(var(--bar-h) + 34px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:88;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--glass-b);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease);
}
#hint.on{ opacity:1; }

/* --------------------------------------------------------------- yükleniyor */

body.is-booting #stage,
body.is-booting #chrome,
body.is-booting .side{ opacity:0; }

#stage{ transition:opacity .4s var(--ease); }

.noscript{
  position:fixed; inset:auto 0 50% 0;
  text-align:center; color:var(--muted); font-size:14px;
}

@media (prefers-reduced-motion:reduce){
  #viewport,#chrome,#thumbs,.side,#hint{ transition-duration:.01ms !important; }
}