/* ============================================================
   Katalog Viewer — tema
   Markanıza uyarlamak için sadece aşağıdaki değişkenleri değiştirin.
   ============================================================ */
:root{
  --accent:        #c8952f;   /* vurgu rengi (butonlar, aktif sayfa) */
  --accent-ink:    #1a1206;   /* vurgu üzerindeki yazı */
  --bar:           #17181c;   /* üst/alt çubuk */
  --bar-ink:       #e9eaee;   /* çubuk yazı/ikon */
  --bar-ink-dim:   #9aa0aa;
  --stage:         #24262c;   /* kitabın durduğu zemin */
  --stage-2:       #191b1f;   /* zemin gradyanı */
  --panel:         #1d1f24;   /* küçük resim paneli / menüler */
  --line:          #33363d;   /* ince çizgiler */
  --shadow:        0 18px 45px rgba(0,0,0,.55);
  --radius:        10px;
  --bar-h:         52px;
  --thumbs-w:      290px;   /* brand names in the table of contents need the room */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--stage-2);
  color:var(--bar-ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block }
.ico-play polygon,.ico-pause rect{ fill:currentColor; stroke:none }

.app{ display:flex; flex-direction:column; height:100dvh; height:100vh }
@supports (height:100dvh){ .app{ height:100dvh } }

/* ---------- Butonlar ---------- */
.btn{
  appearance:none; border:0; background:transparent; color:var(--bar-ink);
  cursor:pointer; border-radius:8px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, opacity .15s;
}
.btn-icon{ width:38px; height:38px; flex:0 0 auto }
.btn-sm{ width:32px; height:32px }
.btn-sm svg{ width:17px; height:17px }
.btn:hover{ background:rgba(255,255,255,.09) }
.btn:active{ background:rgba(255,255,255,.15) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn[disabled]{ opacity:.3; pointer-events:none }
.btn.is-on{ background:var(--accent); color:var(--accent-ink) }

/* ---------- Üst çubuk ---------- */
.topbar{
  flex:0 0 auto; height:var(--bar-h);
  display:flex; align-items:center; gap:4px; padding:0 8px;
  background:var(--bar); border-bottom:1px solid var(--line);
  position:relative; z-index:40;
}
.brand{ flex:1 1 auto; min-width:0; padding:0 8px }
.brand-title{
  display:block; font-size:15px; font-weight:600; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-actions{ display:flex; align-items:center; gap:2px; flex:0 0 auto }

/* ---------- Arama ---------- */
.search-wrap{ position:relative }
.search-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:calc(100vw - 24px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:8px; z-index:60;
}
.search-panel input{
  width:100%; padding:9px 11px; border-radius:7px; border:1px solid var(--line);
  background:#121317; color:var(--bar-ink); font-size:14px;
}
.search-panel input:focus{ outline:none; border-color:var(--accent) }
.search-results{ max-height:min(52vh,340px); overflow:auto; margin-top:6px }
.search-results:empty{ margin:0 }
.sr-item{
  display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  color:var(--bar-ink); padding:8px 10px; border-radius:7px; font-size:13px; line-height:1.4;
}
.sr-item:hover{ background:rgba(255,255,255,.07) }
.sr-item b{ color:var(--accent) }
.sr-page{ display:block; font-size:11px; color:var(--bar-ink-dim); margin-bottom:2px; letter-spacing:.3px }
.sr-empty{ padding:10px; font-size:13px; color:var(--bar-ink-dim) }

/* ---------- Paylaş ---------- */
.share-wrap{ position:relative }
.share-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:190px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; z-index:60;
}
.share-item{
  display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  color:var(--bar-ink); text-decoration:none; padding:9px 11px; border-radius:7px; font-size:14px;
}
.share-item:hover{ background:rgba(255,255,255,.07) }

/* ---------- Sahne ---------- */
.stage{
  flex:1 1 auto; min-height:0; display:flex; position:relative;
  background:radial-gradient(120% 90% at 50% 0%, var(--stage) 0%, var(--stage-2) 100%);
}
.stage-main{
  flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:stretch;
}
.book-area{ position:relative; flex:1 1 auto; min-width:0; overflow:hidden }
.book-scaler{
  position:absolute; inset:14px 10px;
  transform-origin:50% 50%;
  transition:transform .22s ease;
  will-change:transform;
  /* centers the aspect-sized book block (viewer.js -> sizeBlock) */
  display:flex; align-items:center; justify-content:center;
}
.book-scaler.dragging{ transition:none }

.flipbook{ width:100%; height:100% }
.flipbook .stf__wrapper{ height:100% }

/* Kapak / arka kapak tek sayfa kaldığında kitap ortaya ötelenir (viewer.js →
   centerSpread). Geçiş, sayfa açılırken kitabın ortaya kaymasını yumuşatır.
   will-change: kayma boyunca sayfalar tek bir GPU katmanında kalsın —
   ayrı ayrı rasterlenirlerse aralarında dikiş görünüyor. */
.flipbook{
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion:reduce){ .flipbook{ transition:none } }

/* sayfa öğeleri */
.page{
  background:#fff;
  background-size:100% 100%;
  background-repeat:no-repeat;
  overflow:hidden;
}
.page img{ width:100%; height:100%; display:block; object-fit:fill; user-select:none; -webkit-user-drag:none }
/* Invisible fillers that pair the covers into two-page spreads (viewer.js). */
.page.page--blank{ background:transparent; box-shadow:none }
.page.--loading::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#f2f2f2 30%,#e6e6e6 45%,#f2f2f2 60%);
  background-size:250% 100%; animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{ from{background-position:180% 0} to{background-position:-80% 0} }
/* pan katmanı (yakınlaştırma açıkken) */
.pan-layer{ position:absolute; inset:0; z-index:15; cursor:grab; touch-action:none }
.pan-layer.grabbing{ cursor:grabbing }

/* ---------- Yan oklar ---------- */
.nav-arrow{
  flex:0 0 auto; width:46px; align-self:stretch;
  background:transparent; border:0; color:var(--bar-ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.nav-arrow svg{ width:26px; height:26px; stroke-width:2 }
.nav-arrow:hover{ color:var(--bar-ink); background:rgba(255,255,255,.05) }
.nav-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px }
.nav-arrow[disabled]{ opacity:.22; pointer-events:none }

/* ---------- Küçük resim paneli ---------- */
.thumbs{
  flex:0 0 auto; width:0; overflow:hidden;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:width .22s ease;
}
.thumbs.open{ width:var(--thumbs-w) }
.thumbs-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:10px 8px 10px 14px; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--bar-ink-dim); border-bottom:1px solid var(--line);
}
.thumbs-grid{
  flex:1 1 auto; overflow-y:auto; padding:10px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; align-content:start;
}
.thumb{
  position:relative; padding:0; border:2px solid transparent; border-radius:5px;
  background:#0d0e11; cursor:pointer; overflow:hidden; line-height:0;
  transition:border-color .15s, transform .15s;
}
.thumb img{ width:100%; height:auto; display:block; opacity:.82; transition:opacity .15s }
.thumb:hover img{ opacity:1 }
.thumb:hover{ transform:translateY(-1px) }
.thumb.active{ border-color:var(--accent) }
.thumb.active img{ opacity:1 }
.thumb span{
  position:absolute; right:3px; bottom:3px; font-size:10px; line-height:1;
  padding:2px 4px; border-radius:3px; background:rgba(0,0,0,.68); color:#fff;
}

/* ---------- Section list (table of contents mode) ---------- */
.thumbs-grid.sections{ display:flex; flex-direction:column; gap:4px; padding:8px }
.sec-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:6px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--bar-ink); text-align:left;
  transition:background .15s;
}
.sec-item:hover{ background:rgba(255,255,255,.07) }
.sec-item img{
  width:40px; height:auto; flex:0 0 auto; border-radius:3px;
  border:2px solid transparent; opacity:.85; transition:opacity .15s, border-color .15s;
}
.sec-item:hover img{ opacity:1 }
.sec-item.active{ background:rgba(255,255,255,.05) }
.sec-item.active img{ border-color:var(--accent); opacity:1 }
.sec-item.active .sec-title{ color:var(--accent) }
.sec-text{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sec-title{ font-size:13px; line-height:1.3; font-weight:500 }
.sec-page{ font-size:11px; color:var(--bar-ink-dim) }

/* Two-level table of contents: brand rows expand into product groups. */
.sec-group .sec-text{ flex:1 1 auto }
.sec-chev{
  width:14px; height:14px; flex:0 0 auto; margin-left:2px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.5; transition:transform .18s ease, opacity .15s;
}
.sec-group.expanded .sec-chev{ transform:rotate(90deg); opacity:.9 }
.sec-kids{
  display:none; flex-direction:column; gap:1px;
  margin:2px 0 6px 22px; padding-left:9px;
  border-left:1px solid rgba(255,255,255,.13);
}
.sec-kids.open{ display:flex }
.sec-child{ padding:4px 6px; gap:6px }
.sec-child .sec-text{ flex-direction:row; align-items:baseline; gap:6px; flex:1 1 auto }
.sec-child .sec-title{ font-size:12px; font-weight:400; flex:1 1 auto }
.sec-child .sec-page{ font-size:10px; flex:0 0 auto }

/* ---------- Alt çubuk ---------- */
.bottombar{
  flex:0 0 auto; height:var(--bar-h);
  display:flex; align-items:center; gap:4px; padding:0 12px;
  background:var(--bar); border-top:1px solid var(--line);
  position:relative; z-index:30;
}
.pager{ display:flex; align-items:center; gap:5px; font-size:13px; color:var(--bar-ink-dim); margin:0 4px }
.pager input{
  width:46px; text-align:center; padding:5px 4px; font-size:13px;
  border-radius:6px; border:1px solid var(--line); background:#121317; color:var(--bar-ink);
}
.pager input:focus{ outline:none; border-color:var(--accent) }
.pager-sep{ opacity:.5 }

#pageSlider{
  flex:1 1 auto; min-width:60px; margin-left:10px; appearance:none; height:22px; background:transparent; cursor:pointer;
}
#pageSlider::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:var(--line) }
#pageSlider::-webkit-slider-thumb{
  appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--accent); border:0;
}
#pageSlider::-moz-range-track{ height:4px; border-radius:2px; background:var(--line) }
#pageSlider::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:var(--accent) }
#pageSlider:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* ---------- Yükleniyor ---------- */
.loader{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  background:var(--stage-2); color:var(--bar-ink-dim); font-size:14px;
  transition:opacity .35s;
}
.loader.hide{ opacity:0; pointer-events:none }
.loader p{ margin:0 }
.loader-book{ position:relative; width:64px; height:46px; perspective:400px }
.loader-book span{
  position:absolute; top:0; left:0; width:32px; height:46px; border-radius:2px 4px 4px 2px;
  background:#3a3d45;
}
.loader-book span:last-child{
  left:32px; border-radius:4px 2px 2px 4px; background:var(--accent);
  transform-origin:left center; animation:flip 1.25s ease-in-out infinite;
}
@keyframes flip{
  0%,15%{ transform:rotateY(0deg) } 60%,100%{ transform:rotateY(-170deg) }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--bar-h) + 18px); transform:translateX(-50%);
  background:#0e0f12; color:#fff; border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; font-size:13px; z-index:150;
  box-shadow:var(--shadow); animation:toastIn .2s ease;
}
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)} }

/* ---------- Tam ekran ikon durumu ---------- */
.ico-collapse{ display:none }
.is-full .ico-expand{ display:none }
.is-full .ico-collapse{ display:block }
.ico-pause{ display:none }
.is-playing .ico-play{ display:none }
.is-playing .ico-pause{ display:block }

/* ---------- Mobil ---------- */
@media (max-width:860px){
  :root{ --bar-h:48px }
  .brand-title{ font-size:13px }
  .nav-arrow{ width:34px }
  .nav-arrow svg{ width:20px; height:20px }
  .thumbs{
    position:absolute; left:0; top:0; bottom:0; z-index:50;
    box-shadow:var(--shadow); transition:transform .22s ease, width 0s;
    width:var(--thumbs-w); transform:translateX(-100%);
  }
  .thumbs.open{ transform:translateX(0) }
  .book-scaler{ inset:8px 4px }
  #pageSlider{ display:none }
  .dl-btn,#btnPrint{ display:none }
}
@media (max-width:520px){
  #btnAuto{ display:none }
  .brand-title{ font-size:12px }
}

/* dokunmatik cihazda oklar biraz daha görünür */
@media (hover:none){
  .nav-arrow{ color:var(--bar-ink) }
}

/* ---------- Yazdırma ---------- */
#printSheet{ display:none }
@media print{
  body{ overflow:visible; background:#fff }
  .app{ display:none !important }
  #printSheet{ display:block }
  #printSheet img{ display:block; width:100%; page-break-after:always; break-after:page }
  #printSheet img:last-child{ page-break-after:auto; break-after:auto }
  @page{ margin:0 }
}