/* Visbody E-Kitap okuyucu — vanilla CSS (StPageFlip ile) */
:root{--ek-bg1:#0a1330;--ek-bg2:#050a1a;--ek-bar:rgba(8,14,34,.92);--ek-line:rgba(255,255,255,.10);--ek-acc:#34d3ff;--ek-text:#e9edf7;--ek-mut:#9aa6c4;--ek-bar-h:52px;--ek-tool-h:56px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ek-bg2);color:var(--ek-text);font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ek{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(1200px 800px at 50% 40%,var(--ek-bg1),var(--ek-bg2))}
.ek.ek-fs-fallback{z-index:9999}
/* üst çubuk */
.ek-top{height:var(--ek-bar-h);flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--ek-bar);border-bottom:1px solid var(--ek-line);z-index:30}
.ek-top img{height:22px;width:auto;flex:none}
.ek-title{flex:1;min-width:0;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dfe6f5}
.ek-close{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:20px;line-height:1}
.ek-close:hover{background:rgba(255,255,255,.08)}
/* orta alan */
.ek-main{flex:1;min-height:0;display:flex;position:relative}
.ek-side{width:0;flex:none;overflow:hidden;background:rgba(6,11,28,.96);border-right:1px solid var(--ek-line);transition:width .25s ease;z-index:20}
.ek.side-open .ek-side{width:min(260px,78vw)}
.ek-side-in{width:min(260px,78vw);height:100%;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.ek-tabs{display:flex;gap:6px;position:sticky;top:-12px;background:rgba(6,11,28,.98);padding:2px 0 8px;z-index:2}
.ek-tabs button{flex:1;font-size:12.5px;font-weight:650;padding:8px 6px;border-radius:9px;color:var(--ek-mut);border:1px solid var(--ek-line)}
.ek-tabs button.on{background:rgba(52,211,255,.14);color:#fff;border-color:rgba(52,211,255,.5)}
.ek-side h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ek-mut);font-weight:700;padding:2px 2px 0}
.ek-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ek-th{position:relative;border-radius:6px;overflow:hidden;border:2px solid transparent;background:#111a33;aspect-ratio:var(--ek-ratio,.707);cursor:pointer;padding:0}
.ek-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .2s}
.ek-th img.ok{opacity:1}
.ek-th span{position:absolute;right:4px;bottom:4px;font-size:11px;font-weight:700;background:rgba(0,0,0,.65);padding:1px 6px;border-radius:99px}
.ek-th.on{border-color:var(--ek-acc)}
.ek-toc{display:flex;flex-direction:column;gap:2px}
.ek-toc button{text-align:left;font-size:13.5px;padding:7px 8px;border-radius:8px;color:#d3dbef;display:flex;justify-content:space-between;gap:10px}
.ek-toc button:hover{background:rgba(255,255,255,.07)}
.ek-toc button.sub{padding-left:20px;color:var(--ek-mut);font-size:13px}
.ek-toc button b{font-weight:600;color:var(--ek-mut);flex:none}
.ek-stage{flex:1;min-width:0;position:relative;overflow:hidden;touch-action:none}
.ek-zoomwrap{position:absolute;inset:14px 14px 10px;transform-origin:50% 50%;will-change:transform}
.ek-book{position:absolute;inset:0}
.ek-book{transition:transform .45s ease}
.ek-book .stf__parent{margin:0 auto;}
.ek-page{background:#fff;overflow:hidden}
.ek-page img{width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none;background:#fff}
.ek-page.blank img{visibility:hidden}
.ek-pan{position:absolute;inset:0;z-index:5;cursor:grab;display:none}
.ek.zoomed .ek-pan{display:block}
.ek-pan.drag{cursor:grabbing}
.ek-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:68px;display:grid;place-items:center;font-size:30px;color:#fff;background:rgba(8,14,34,.55);border-radius:12px;z-index:8;opacity:.85}
.ek-nav:hover{background:rgba(52,211,255,.28);opacity:1}
.ek-nav[disabled]{opacity:.2;pointer-events:none}
.ek-nav.prev{left:8px}.ek-nav.next{right:8px}
.ek.zoomed .ek-nav{display:none}
.ek-load{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--ek-mut);z-index:3;pointer-events:none}
.ek-load.hide{display:none}
/* alt araç çubuğu */
.ek-tools{height:var(--ek-tool-h);flex:none;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;background:var(--ek-bar);border-top:1px solid var(--ek-line);z-index:30;position:relative}
.ek-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;position:relative;color:#dfe6f5}
.ek-btn:hover,.ek-btn.on{background:rgba(255,255,255,.09);color:#fff}
.ek-btn.on{color:var(--ek-acc)}
.ek-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ek-btn[disabled]{opacity:.3;pointer-events:none}
.ek-sep{width:1px;height:24px;background:var(--ek-line);margin:0 6px}
.ek-pg{white-space:nowrap;flex:none;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ek-mut);font-variant-numeric:tabular-nums}
.ek-pg input{width:52px;height:32px;text-align:center;border-radius:8px;border:1px solid var(--ek-line);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px}
.ek-pg input:focus{outline:2px solid var(--ek-acc);outline-offset:1px}
.ek-btn[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;background:#000;color:#fff;padding:4px 8px;border-radius:6px;pointer-events:none}
/* paylaş menüsü */
.ek-share{position:absolute;bottom:calc(var(--ek-tool-h) + 8px);right:12px;width:min(280px,calc(100vw - 24px));background:#0d1630;border:1px solid var(--ek-line);border-radius:14px;padding:12px;display:none;flex-direction:column;gap:8px;z-index:40;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.ek-share.open{display:flex}
.ek-share h3{font-size:13px;color:var(--ek-mut);font-weight:650}
.ek-share a,.ek-share button.row{display:flex;align-items:center;gap:10px;font-size:14px;color:#e9edf7;text-decoration:none;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.04);text-align:left}
.ek-share a:hover,.ek-share button.row:hover{background:rgba(52,211,255,.14)}
.ek-share input{width:100%;height:34px;border-radius:8px;border:1px solid var(--ek-line);background:rgba(255,255,255,.05);color:#cfd8ee;padding:0 10px;font-size:12.5px}
.ek-toast{position:absolute;left:50%;bottom:calc(var(--ek-tool-h) + 14px);transform:translateX(-50%) translateY(8px);background:#000;color:#fff;font-size:13px;padding:8px 14px;border-radius:99px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.ek-toast.show{opacity:1;transform:translateX(-50%)}
/* mobil */
@media (max-width:760px){
 .ek-hide-m{display:none}
 .ek-tools{gap:0;padding:0 4px}
 .ek-btn{width:38px}
 .ek-sep{margin:0 2px}
 .ek-nav{display:none}
 .ek-zoomwrap{inset:8px 6px 6px}
 .ek.side-open .ek-side{position:absolute;inset:0 auto 0 0;box-shadow:12px 0 40px rgba(0,0,0,.5)}
}
@media (max-width:420px){.ek-pg input{width:42px}.ek-top img{display:none}}
@media print{body{display:none}}
.ek-nav svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}