:root{--bg:#f4efe5;--ink:#282923;--muted:#8b887f;--line:#ded7c9;--accent:#a17b4e;--paper:#fffdf9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,.viewer:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.app{width:min(100%,1050px);margin:0 auto;padding:clamp(28px,5vw,58px) 22px 28px}
.header{text-align:center;margin-bottom:clamp(24px,3vw,37px)}
.eyebrow{display:block;font-size:11px;letter-spacing:.13em;line-height:1.6;color:var(--accent);font-weight:700}
h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.045em;font-weight:400;font-size:clamp(31px,5vw,52px);line-height:1.1;margin:14px 0 10px}
.period{color:var(--accent)}
.header p{font-size:14px;color:var(--muted);margin:0}
.catalog{max-width:800px;margin:auto}
.viewer{display:flex;gap:clamp(9px,2.4vw,24px);align-items:center;justify-content:center;touch-action:pan-y;user-select:none}
.paper{width:min(100%,640px);aspect-ratio:1/1;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 16px 50px #58452e1a,0 2px 8px #58452e14;border:1px solid #e8e1d6}
#pdfCanvas{display:block;width:100%;height:100%;object-fit:contain}
.loading{position:absolute;inset:0;display:flex;gap:12px;align-items:center;justify-content:center;flex-direction:column;background:var(--paper);color:var(--muted);font-size:13px;text-align:center;padding:22px}
.loading[hidden]{display:none}
.spinner{width:25px;height:25px;border:2px solid #ded7c9;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;background:transparent;border:1px solid #d8d0c3;border-radius:50%;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.nav:hover:not(:disabled){background:#e9e1d3;border-color:#bba98e;transform:scale(1.04)}
.nav:disabled{opacity:.27;cursor:default}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 66px 0}
.hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.hint svg{width:15px;height:15px}
.pagination{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}.slash{color:#b8ac9c}
.fullscreen{background:none;border:0;padding:5px;color:var(--muted);cursor:pointer}.fullscreen:hover{color:var(--ink)}
.footer{text-align:center;margin-top:26px}.actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap}
.button{min-height:48px;padding:13px 23px;display:inline-flex;justify-content:center;align-items:center;gap:11px;text-decoration:none;border:1px solid var(--ink);font-size:12px;letter-spacing:.035em;font-weight:650;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}.button svg{width:16px;height:16px}
.primary{background:var(--ink);color:#fff}.primary:hover{background:#44453d}
.secondary{background:transparent;color:var(--ink)}.secondary:hover{background:#ebe2d5}
.footnote{display:block;margin-top:29px;font-size:10px;color:#a8a093;letter-spacing:.04em}
/* Hem native fullscreen hem de iOS Safari CSS fullscreen modu. */
body.fullscreen-lock{overflow:hidden}
.catalog:fullscreen,.catalog.is-fullscreen{
 position:fixed;inset:0;z-index:9999;max-width:none;width:100%;height:100vh;height:100dvh;
 padding:calc(14px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
 background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
}
.catalog:fullscreen .viewer,.catalog.is-fullscreen .viewer{width:100%;min-height:0;flex:0 1 auto;gap:clamp(8px,2vw,28px)}
.catalog:fullscreen .paper,.catalog.is-fullscreen .paper{
 width:min(78vw,calc(100dvh - 130px),720px);max-width:none;flex:0 1 auto;
}
.catalog:fullscreen .toolbar,.catalog.is-fullscreen .toolbar{width:min(100%,850px);padding:2px 10px 0}
.catalog:fullscreen .fullscreen,.catalog.is-fullscreen .fullscreen{background:#e6dbca;border-radius:50%;padding:10px;display:grid;place-items:center;color:var(--ink)}
@media(max-width:600px){.app{padding:32px 14px 24px}.header{margin-bottom:27px}h1{font-size:35px}.header p{font-size:13px}.viewer{gap:0;position:relative}.paper{width:100%}.nav{position:absolute;z-index:2;bottom:12px;width:34px;height:34px;border-radius:50%;background:#f4efe5e8;border:1px solid #ddd4c5;box-shadow:0 2px 8px #0000000c}.nav svg{width:16px}.nav-prev{left:11px}.nav-next{right:11px}.toolbar{padding:15px 3px 0}.hint{font-size:11px}.footer{margin-top:24px}.actions{flex-direction:column;gap:9px}.button{width:100%}.footnote{margin-top:24px}.catalog:fullscreen,.catalog.is-fullscreen{gap:14px;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}.catalog:fullscreen .viewer,.catalog.is-fullscreen .viewer{width:100%}.catalog:fullscreen .paper,.catalog.is-fullscreen .paper{width:min(calc(100vw - 24px),calc(100dvh - 125px));max-width:none}.catalog:fullscreen .toolbar,.catalog.is-fullscreen .toolbar{width:100%;padding:0 4px}.catalog:fullscreen .nav,.catalog.is-fullscreen .nav{bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* PDF'den otomatik üretilen sayfa önizlemeleri */
.thumbs-section{margin:24px 66px 0;min-width:0}
.thumbs-section[hidden]{display:none}
.thumbs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.thumbs-head span:first-child{font-size:12px;font-weight:650;letter-spacing:.03em}
.thumbs-head span:last-child{font-size:11px;color:var(--muted)}
.thumbs-strip{display:flex;gap:11px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#cbb9a1 transparent;padding:3px 2px 12px;scroll-behavior:smooth}
.thumb{border:0;padding:0;background:none;color:var(--muted);display:flex;flex:0 0 74px;min-width:0;flex-direction:column;align-items:center;gap:7px;cursor:pointer;scroll-snap-align:center;font-size:10px;font-weight:650}
.thumb canvas{display:block;width:74px;height:74px;object-fit:contain;background:var(--paper);border:1px solid #ded7c9;box-shadow:0 2px 7px #554a3814;transition:border-color .2s,box-shadow .2s,transform .2s}
.thumb.is-active canvas{border:2px solid var(--accent);box-shadow:0 0 0 2px #a17b4e22,0 4px 12px #554a3820}
.thumb.is-active span{color:var(--ink)}
.thumb:hover canvas{transform:translateY(-2px)}
.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.catalog:fullscreen .thumbs-section,.catalog.is-fullscreen .thumbs-section{width:min(100%,850px);margin:0;flex:0 0 auto;padding:0 10px}
.catalog:fullscreen .thumbs-head,.catalog.is-fullscreen .thumbs-head{margin-bottom:5px}
.catalog:fullscreen .thumb,.catalog.is-fullscreen .thumb{flex-basis:54px;gap:3px}
.catalog:fullscreen .thumb canvas,.catalog.is-fullscreen .thumb canvas{width:54px;height:54px}
.catalog:fullscreen .paper,.catalog.is-fullscreen .paper{width:min(78vw,calc(100dvh - 235px),720px)}
@media(max-width:600px){
 .thumbs-section{margin:22px 0 0}
 .thumb{flex-basis:66px;gap:6px}
 .thumb canvas{width:66px;height:66px}
 .thumbs-strip{gap:10px}
 .thumbs-head span:last-child{font-size:10px}
 .catalog:fullscreen .thumbs-section,.catalog.is-fullscreen .thumbs-section{width:100%;padding:0}
 .catalog:fullscreen .paper,.catalog.is-fullscreen .paper{width:min(calc(100vw - 24px),calc(100dvh - 210px))}
}



.tasaroman-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 25px 12px 20px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .2px;
  color: #8b8175;
}

.tasaroman-footer svg {
  flex-shrink: 0;
}

.tasaroman-footer a {
  color: #51473d;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.tasaroman-footer a:hover {
  color: #E63946;
}


/* v4: küçük sayfa görselleri görünür ve belirgin */
.thumbs-section { display:block; }
.thumb canvas { min-height:74px; }
@media(max-width:600px){.thumb canvas{min-height:66px}}