:root{
  --bg:#07111d;--line:rgba(255,255,255,.13);--text:#f7fbff;--muted:#a9b7c8;
  --blue:#0b8dcc;--blue2:#78bf43;--red:#78bf43;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Arial,Helvetica,sans-serif;color:var(--text);overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(11,141,204,.24),transparent 34%),
    radial-gradient(circle at 35% 88%,rgba(120,191,67,.14),transparent 28%),
    linear-gradient(135deg,#03111b,#0b2232 52%,#02070a);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;
  background:radial-gradient(circle at 50% 100%,rgba(255,255,255,.16),transparent 30%),
             linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.045) 48%,transparent 49% 100%);
}
.app{height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
.topbar{
  height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(5,25,39,.98),rgba(5,25,39,.78));backdrop-filter:blur(14px)
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{width:76px;height:42px;border-radius:12px;background:linear-gradient(135deg,#fff,#dbe9ff);color:#073f86;
  display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:.14em;border:1px solid rgba(255,255,255,.2)}
.brand h1{margin:0;font-size:18px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  color:#fff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  border-radius:12px;padding:10px 14px;cursor:pointer;text-decoration:none;transition:.16s ease;white-space:nowrap;user-select:none
}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:rgba(10,108,197,.8);box-shadow:0 10px 26px rgba(10,108,197,.22)}
.layout{height:calc(100% - 74px);display:flex;min-height:0}
.sidebar{
  width:226px;min-width:226px;border-right:1px solid var(--line);background:rgba(4,9,16,.84);
  display:flex;flex-direction:column;transition:margin-left .22s ease;backdrop-filter:blur(14px);z-index:20
}
.sidebar.closed{margin-left:-226px}
.sideHead{height:52px;padding:0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sideHead button{border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.toc{padding:10px 12px;border-bottom:1px solid var(--line);display:grid;gap:6px;flex-shrink:0}
.toc button{width:100%;text-align:left;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#fff;border-radius:9px;padding:8px 9px;cursor:pointer;font-size:12px}
.toc button:hover{border-color:rgba(10,108,197,.75);background:rgba(10,108,197,.18)}
.thumbs{padding:12px;display:grid;gap:12px;overflow:auto}
.thumb{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:12px;padding:7px;cursor:pointer;color:#fff;text-align:left}
.thumb:hover,.thumb.active{border-color:rgba(10,108,197,.95);background:rgba(10,108,197,.18)}
.thumb img{display:block;width:100%;border-radius:7px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.thumb span{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:6px}
.viewer{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:14px 16px 12px;gap:10px;overflow:hidden}
.viewerTop{height:36px;display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0}
.status{font-weight:800;letter-spacing:.02em}
.hint{color:var(--muted);font-size:13px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.05)}
.stage{
  flex:1;min-height:0;position:relative;border:1px solid rgba(255,255,255,.13);border-radius:24px;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.13),transparent 38%),
             linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  overflow:auto;display:flex;align-items:center;justify-content:center;padding:22px;box-shadow:inset 0 0 80px rgba(0,0,0,.22)
}
.bookWrap{
  position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center;
  transition:transform .18s ease;will-change:transform;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.52));
}
#book{display:block}
.stf__wrapper{
  margin:0 auto!important;
}
.stf__canvas{
  display:block!important;
  background:#fff!important;
  border-radius:8px;
}
.hit{position:absolute;top:0;bottom:0;width:23%;border:0;background:transparent;cursor:pointer;z-index:8}
.hitPrev{left:0}.hitNext{right:0}
.controls{
  min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(4,9,16,.56);backdrop-filter:blur(14px);flex-shrink:0
}
.sep{width:1px;height:30px;background:rgba(255,255,255,.15);margin:0 2px}
.zoom{min-width:52px;color:var(--muted);font-variant-numeric:tabular-nums}
.jump{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.jump input{width:72px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;padding:9px 10px;outline:none}
.jump input:focus{border-color:rgba(10,108,197,.9)}
@media(max-width:900px){
  body{overflow:auto}
  .topbar{height:auto;padding:10px 12px;align-items:flex-start}
  .mark{width:64px;height:38px;font-size:18px}
  .brand h1{font-size:14px}.brand p{font-size:12px}
  .actions .primary,.actions #fullscreenBtn{display:none}
  .layout{height:auto;min-height:calc(100vh - 64px)}
  .sidebar{position:fixed;left:0;top:0;height:100vh;box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
  .sidebar.closed{box-shadow:none}
  .viewer{padding:10px}
  .stage{padding:10px;border-radius:18px;min-height:62vh}
  .hint{display:none}
  .controls .btn{padding:9px 10px}
  .sep{display:none}
}
@media(max-width:680px){
  .viewerTop{height:auto}.status{font-size:13px}
  .jump,.zoom{display:none}
  .hit{width:18%}
}


/* KAPAK / ARKA KAPAK TEK SAYFA DÜZELTMESİ
   PageFlip canvas kapaklarda solda/sağda beyaz boş sayfa bırakabiliyor.
   İlk ve son sayfada canvas gizlenip aynı ölçüde tek sayfa overlay gösterilir. */
.bookWrap.single-cover-mode #book{
  opacity:0;
  pointer-events:none;
}
.singleCoverView{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  z-index:5;
}
.singleCoverView.show{
  display:flex;
}
.singleCoverView img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  box-shadow:0 28px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.18);
  cursor:pointer;
}
.bookWrap.single-cover-mode{
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.52));
}

.logoMark{
  width:170px !important;
  height:48px !important;
  padding:7px 12px;
  background:linear-gradient(135deg,#ffffff,#eef8ff) !important;
  letter-spacing:0 !important;
}
.logoMark img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}
.brand h1{color:#ffffff}
.primary{background:linear-gradient(135deg,#0b8dcc,#78bf43) !important;border-color:rgba(120,191,67,.75) !important}
.thumb:hover,.thumb.active{border-color:rgba(120,191,67,.95) !important;background:rgba(120,191,67,.18) !important}
.toc button:hover{border-color:rgba(120,191,67,.75) !important;background:rgba(120,191,67,.18) !important}
@media(max-width:900px){
  .logoMark{width:130px !important;height:40px !important}
}


/* MOBİL STABİLİTE DÜZELTMESİ
   Sayfalar paneli layout genişliğini değiştirmez; overlay olarak açılır.
   Böylece PageFlip canvas ölçüsü bozulup kaybolmaz. */
.bookWrap{
  min-width:1px;
  min-height:1px;
}
#book,
.stf__wrapper,
.stf__block,
.stf__canvas{
  visibility:visible !important;
}
.fallbackPage{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 24px 54px rgba(0,0,0,.42);
}
.fallbackPage img{
  display:block;
  max-width:100%;
  max-height:70vh;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
}
@media(max-width:900px){
  body{
    overflow:hidden !important;
  }
  .layout{
    height:calc(100vh - 64px) !important;
    min-height:0 !important;
  }
  .viewer{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .stage{
    min-height:0 !important;
    height:auto !important;
    overflow:auto !important;
  }
  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    height:100vh !important;
    width:240px !important;
    min-width:240px !important;
    margin-left:0 !important;
    transform:translateX(-100%);
    transition:transform .22s ease !important;
    z-index:1000 !important;
    box-shadow:none !important;
  }
  .sidebar:not(.closed){
    transform:translateX(0);
    box-shadow:0 0 0 9999px rgba(0,0,0,.42) !important;
  }
  .sidebar.closed{
    margin-left:0 !important;
    transform:translateX(-100%);
  }
  .toc{
    max-height:none;
  }
  .thumbs{
    padding-bottom:40px;
  }
  .bookWrap{
    max-width:100%;
    max-height:100%;
  }
  .singleCoverView{
    display:none !important;
  }
}
@media(max-width:680px){
  .topbar{
    gap:8px;
  }
  .brand{
    gap:8px;
  }
  .brand h1{
    font-size:12px !important;
  }
  .brand p{
    display:none;
  }
  .logoMark{
    width:112px !important;
    height:34px !important;
  }
  .actions{
    gap:6px;
  }
  .actions .btn{
    padding:8px 9px;
    font-size:12px;
  }
  .viewerTop{
    gap:6px;
  }
  .controls{
    min-height:48px;
    gap:5px;
    padding:7px;
  }
  .controls .btn{
    padding:8px 8px;
    font-size:12px;
  }
  #soundBtn,
  #firstBtn,
  #lastBtn{
    display:none;
  }
}