/* ============ Yıldız Tozu – resimli kitap teması ============
   Koyu mor-lacivert masa, altın vurgular, sıcak parşömen sayfalar, boyanmış çizimler. */
:root {
  --paper: #ecdcb8;
  --paper-2: #e3cfa6;
  --ink: #4a3b2e;
  --ink-2: #6b5640;
  --ink-3: #93795a;
  --rule: #c7ad83;
  --gold: #dcb974;
  --gold-2: #c9a25c;
  --rust: #a8563f;
  --serif: Georgia, 'Times New Roman', serif;
  --sc: Georgia, 'Times New Roman', serif;
  --ui: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
html { background: #211f2c; }
body {
  font-family: var(--serif);
  background: radial-gradient(ellipse at 50% 44%, #514250 0, #322c3d 43%, #1c1d29 100%) fixed;
  color: #e7d3b4;
}
body::before { /* yıldız tozu */
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 0;
  background-image: radial-gradient(#e2bc78 1px, transparent 1px), radial-gradient(#f0d3a6 .7px, transparent 1px);
  background-size: 171px 157px, 293px 227px; background-position: 23px 61px, 101px 13px;
}

/* ---------- Üst çubuk ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 28px; font-family: var(--ui); color: #c7b69f; }
.wordmark { display: flex; align-items: center; gap: 10px; color: #cba968; text-decoration: none; }
.wm-star { font-size: 26px; }
.wordmark > span:last-child { font-family: var(--serif); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #ead5ad; line-height: 1.25; }
.wordmark small { display: block; font-family: var(--ui); font-size: 8px; letter-spacing: 2.6px; color: #978d89; }
.topnav { display: flex; gap: 22px; font-size: 13px; }
.topnav button { padding: 8px 2px; border-bottom: 1px solid transparent; color: #c7b69f; }
.topnav button:hover { color: #f0d49e; border-color: #a68b5a; }
.toptools { display: flex; gap: 8px; align-items: center; }
.toptools .pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #d9c5a740; border-radius: 999px; color: #e2cfae; font-size: 13px; }
.toptools .pill.on { background: #dcb974; color: #2d2a33; border-color: #dcb974; }
.toptools .round { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d9c5a740; color: #d7c1a2; font-size: 13px; }
.toptools button:hover { background: #d9c5a715; }

#desk { padding: 70px 16px 12px; gap: 12px; z-index: 1; }

/* ---------- Kapak ---------- */
.cover-stage { display: flex; align-items: center; justify-content: center; gap: 64px; perspective: 1600px; }
.closed-book {
  position: relative; width: min(420px, calc((100vh - 150px) * .70), 82vw); aspect-ratio: .70; cursor: pointer;
  background: #354342; border-radius: 3px 16px 16px 3px; transform: rotate(-3deg);
  box-shadow: 19px 20px 50px #0008, -9px 7px 0 #b39870, -14px 9px 0 #6a5248; isolation: isolate;
  transform-origin: left center; transition: transform .9s cubic-bezier(.5,.05,.3,1), opacity .4s .6s;
}
.closed-book:hover { transform: rotate(-2deg) translateY(-4px); }
.closed-book.opening { transform: perspective(1600px) rotateY(-120deg) rotate(-3deg); opacity: 0; }
.closed-book::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 19px; z-index: 3; background: linear-gradient(90deg, #171f24b0, #fff2 42%, #0003 60%, transparent); border-right: 1px solid #d4b67d60; }
.closed-book::after { content: ''; position: absolute; inset: 13px 12px 13px 26px; border: 1px solid #dfc28c99; border-radius: 0 8px 8px 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 5px #182d3450, inset 0 0 0 6px #dcbf7840; }
.cover-painting { position: absolute; inset: 0; overflow: hidden; border-radius: 3px 16px 16px 3px; }
.cover-painting img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; filter: brightness(.88) saturate(.9); }
.cover-painting::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #112e3ee6 0%, #15374185 30%, transparent 54%, #162b3160 76%, #142a31f5 100%); }
.cover-lettering { position: absolute; inset: 30px 28px 24px 42px; text-align: center; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.cover-edition { font-family: var(--ui); font-size: 9px; letter-spacing: 3.4px; text-transform: uppercase; color: #e3c58d; }
.cover-orn { color: #e7cc94; font-size: 20px; margin-top: 10px; }
.cover-lettering h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vh, 66px); line-height: .98; letter-spacing: -1.5px; color: #f7e8c5; text-shadow: 0 2px 12px #081c29; margin: 12px 0; }
.cover-subtitle { font-style: italic; color: #ecddb7; font-size: 17px; line-height: 1.4; margin: 0; }
.cover-bottom { margin-top: auto; width: 100%; }
.cover-bottom p { font-family: var(--ui); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #e2cca5; margin: 0 0 14px; }
.cover-open { background: #e0bd7b; color: #2d3433; border: 1px solid #ecd5a4; padding: 11px 30px; font-size: 15px; border-radius: 3px; box-shadow: 0 3px 10px #10272b40; display: inline-flex; align-items: center; gap: 24px; transition: background .2s, transform .2s; }
.closed-book:hover .cover-open { background: #f0d59f; transform: translateY(-2px); }
.cover-ribbon { position: absolute; right: 30px; bottom: -36px; width: 26px; height: 55px; background: #a76750; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); z-index: -1; }
.cover-side { max-width: 240px; }
.cover-side > span { font-size: 24px; color: #d0aa68; }
.cover-side p { font-size: 24px; line-height: 1.55; color: #d0c0aa; margin: 18px 0; }
.cover-side small { font-family: var(--ui); font-size: 11px; color: #978c87; line-height: 1.8; display: block; }

/* ---------- Kitap ---------- */
.book::before { inset: 5px -7px -9px -7px; background: repeating-linear-gradient(0deg, #cdb88d 0 1px, #e3d1aa 1px 3px); box-shadow: 0 30px 60px rgba(0,0,0,.55); border-radius: 8px; }
.page { background: linear-gradient(90deg, #e9d6ae, var(--paper) 12%, #efe1c1 60%, #e8d5ae); color: var(--ink); }
.page.verso { background: linear-gradient(270deg, #e3cea3, var(--paper) 12%, #efe1c1 60%, #e8d5ae); }
.page::before { opacity: .55; }
.runhead { font-family: var(--ui); font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; color: #a08560; border-bottom: 1px solid #bca37c66; padding-bottom: 8px; }
.folio { font-family: var(--ui); font-size: 11px; color: #a08560; }
.folio::before { content: '✧  '; } .folio::after { content: '  ✧'; }
.content p { line-height: 1.75; color: #45372a; }
.content p.dropcap::first-letter { font-family: var(--serif); font-weight: 400; color: #8a5a36; }
.leaf .face.blank { background: #e6d3ac; }

/* Resimli bölüm açılışı: tam sayfa çizim */
.page.art-page { padding: 0; }
.page.art-page .runhead, .page.art-page .folio { display: none; }
.art-open { position: absolute; inset: 0; overflow: hidden; color: #f6e8c8; text-align: center; }
.art-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-open::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(25,35,40,.78) 0%, rgba(25,35,40,.25) 32%, transparent 50%, rgba(20,24,30,.25) 70%, rgba(20,22,28,.85) 100%); }
.art-open .top, .art-open .bot { position: absolute; left: 24px; right: 24px; z-index: 2; }
.art-open .top { top: 30px; }
.art-open .bot { bottom: 26px; }
.art-open .num { font-family: var(--ui); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #e8c98c; }
.art-open h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw + 10px, 36px); line-height: 1.12; margin: 10px 0 4px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.art-open h4 { font-weight: 400; font-style: italic; font-size: 16px; margin: 0; color: #eadbb8; }
.art-open blockquote { margin: 0; font-style: italic; font-size: 17px; line-height: 1.5; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.art-open .meta { font-family: var(--ui); font-size: 11px; color: #d7c6a6; margin-top: 10px; }
.filler { height: 100%; display: grid; place-items: center; color: #b0956a; font-size: 26px; letter-spacing: 12px; }

/* ---------- Alt kontroller ---------- */
.toolbar { width: calc(var(--pw) * 2); max-width: 100%; background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #d8c4a3; font-family: var(--ui); }
.book.single ~ .toolbar { width: var(--pw); }
.ctl { min-height: 38px; min-width: 92px; padding: 6px 16px; border: 1px solid #b79c6555; border-radius: 6px; background: #b79c650f; color: #e3d0ad; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ctl:hover { background: #b79c6524; }
.ctl.next { background: #dcb974; color: #2d2a33; border-color: #e9cf96; }
.ctl.next:hover { background: #ecd09a; }
.ctl[disabled] { opacity: .3; pointer-events: none; }
.ctl.next.pulse { animation: none; box-shadow: 0 0 0 0 #dcb97488; animation: ring 2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 #dcb97488; } 100% { box-shadow: 0 0 0 12px #dcb97400; } }
.progress { flex: 1; max-width: 240px; text-align: center; font-size: 11px; color: #b6a487; }
.progress i { display: block; height: 3px; border-radius: 2px; background: #ffffff1a; margin-top: 6px; overflow: hidden; }
.progress b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a25c, #f0d49e); transition: width .5s; }
#note { background: #f3e5c4; color: var(--ink); border-color: #8a6a42; box-shadow: 3px 3px 0 #8a6a42; font-family: var(--serif); top: 74px; }

/* ---------- Boyanmış çizim + dokunma noktaları ---------- */
.field.pic-field { container-type: size; display: grid; place-items: center; }
.pic { position: relative; width: min(100cqw, calc(100cqh * var(--r))); height: min(100cqh, calc(100cqw / var(--r))); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px -8px rgba(40,25,10,.55), 0 0 0 1px rgba(74,59,46,.4); transition: filter 1.4s ease; }
.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transition: opacity 1.2s ease, filter 1.4s ease; }
.pic > img.alt { opacity: 0; }
.pic.swap > img.alt { opacity: 1; }
.pic.sepia > img { filter: sepia(.85) saturate(.55) brightness(.92); }
.pic svg.over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.spot {
  position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; z-index: 4;
  border: 1.5px solid #fff3c4cc; background: radial-gradient(circle, #fff5c860 0, #f5d16c40 45%, transparent 70%);
  box-shadow: 0 0 14px #ffe27a99; animation: invite 2.6s ease-in-out infinite; padding: 0;
}
.spot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed #fff0b380; animation: spin 14s linear infinite; }
.spot.small { width: 34px; height: 34px; }
.spot.found { animation: none; background: #6f8f4ecc; border-color: #e6f2c8; box-shadow: 0 0 0 4px #6f8f4e40; }
.spot.found::after { display: none; }
.spot.found::before { content: '✓'; color: #fffde8; font-size: 18px; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ui); }
.spot.hide { opacity: 0; pointer-events: none; transition: opacity .4s; }
.spot.drop-target { width: 70px; height: 70px; }
.spot.over { background: #f5d16c88; }
@keyframes invite { 50% { box-shadow: 0 0 0 12px #ffe29e18, 0 0 30px 12px #f4c84a77; } }
@keyframes spin { to { transform: rotate(360deg); } }
.pic-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 12px 9px; text-align: center; color: #fbf0d6; font-size: 14px; font-style: italic; background: linear-gradient(transparent, rgba(20,20,26,.72)); }
.pic .name-card { z-index: 5; background: #f3e5c4ee; border-color: #6b5640; border-radius: 6px; bottom: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.pic .name-card.top { top: 10px; bottom: auto; }
.talisman-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(80,30,10,.45)); }
.rise { position: absolute; left: 50%; top: 18%; width: 22%; transform: translate(-50%, 40%) scale(.3); opacity: 0; z-index: 5; transition: all 1.2s cubic-bezier(.2,1.3,.4,1) .5s; }
.pic.swap .rise { transform: translate(-50%, -10%) scale(1); opacity: 1; }
.token { position: absolute; z-index: 6; width: 62px; height: 62px; }
.leafs { position: absolute; left: 27%; right: 50%; top: 38%; bottom: 12%; perspective: 700px; z-index: 3; }

/* sahne çerçevesi artık resimleri saran sade bir alan */
.scene.framed.imgscene { border: 0; box-shadow: none; background: none; margin: 4px 0; }
.scene.framed.imgscene::after { display: none; }
.say .bubble { background: #f6ead0; }
.say.done .bubble { background: #e6edd2; }
.say .avatar { background: #ead6ac; }
.ribbon span { background: #8a5a36; }
.task h3 { font-weight: 400; color: #4a3b2e; }
.vignette.pic-v { height: 120px; }
.vignette.pic-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }

@media (max-width: 860px) {
  .topbar { height: 52px; padding: 6px 12px; }
  .topnav { display: none; }
  .wordmark small { display: none; }
  .toptools .pill .lbl { display: none; }
  #desk { padding-top: 56px; }
  .cover-stage { flex-direction: column; gap: 40px; }
  .cover-side { display: none; }
  .ctl span { display: none; }
  .ctl { min-width: 54px; }
}
.token img { pointer-events: none; }
.exlibris .plate { border-color: #6b5640; outline-color: #6b5640; }
.title-page h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -1px; }
.pic > img { left: 0; width: 100%; }
.pic > img[style*="left"] { max-width: none; }
.token { width: 15% !important; height: auto !important; aspect-ratio: 1; }
.token svg { width: 70%; height: 70%; }
.field.pic-field { inset: 0; }
.leafs { left: 32%; right: 50%; }

/* Kapak: baştan başla */
.cover-restart { display: block; width: max-content; margin: 10px auto 0; padding: 4px 2px; color: #ecdcb8; font-family: Georgia, serif; font-size: 13px; border-bottom: 1px solid #e0bd7b80; cursor: pointer; }
.cover-restart:hover { color: #fff3d0; border-color: #f0d59f; }
.cover-restart[hidden] { display: none; }