:root {
  --background: #050b1a;
  --navy: #08112a;
  --navy-light: #172746;
  --gold: #c8ad7c;
  --gold-light: #f2e2bd;
  --text: #f0f2f6;
  --muted: #8c98af;
  --line: #c8ad7c38;
  --sans: Calibri, 'Segoe UI', Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: var(--background); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .2; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Tam ekran okuyucu. Kitabın ölçüsünü mevcut StPageFlip sistemi hesaplar. */
.reader { width: 100%; height: 100dvh; min-height: 300px; display: grid; grid-template-rows: 74px minmax(0, 1fr) 63px 26px; padding: 0 38px; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #172746 0, #0b152c 42%, #050b1a 80%); }
.reader-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c8ad7c20; }
.reader-identity, .header-actions { display: flex; align-items: center; }
.reader-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.reader-logo > img { display: block; width: 138px; height: auto; max-height: 35px; object-fit: contain; }
.header-rule { height: 18px; width: 1px; background: var(--line); margin: 0 19px; }
.header-description, .issue-label { font-size: 8px; letter-spacing: 2px; color: #b9c1d1; }
.demo-label { color: #66758e; margin-left: 7px; }
.issue-label { color: #8c98ae; margin-right: 28px; }
.icon-button { display: grid; place-items: center; border: 1px solid #c8ad7c40; border-radius: 7px; background: #c8ad7c06; width: 35px; height: 35px; color: #c8ad7c; }
.icon-button:hover { background: #c8ad7c13; border-color: #c8ad7c80; }
.icon-button .icon { width: 16px; height: 16px; }
.reading-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 22px 50px 15px; }
.book-frame { position: relative; flex: none; --page-width: 480px; filter: drop-shadow(0 20px 28px #0009); }
#book { width: 100%; height: 100%; transition: transform .65s cubic-bezier(.2,.75,.25,1); }
.book-frame.is-front:not(.is-single) #book { transform: translateX(calc(var(--page-width) * -.5)); }
.book-frame.is-back:not(.is-single) #book { transform: translateX(calc(var(--page-width) * .5)); }
.book-frame.is-open:not(.is-single)::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 28px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #0002 30%, #0006 48%, #f2e2bd0c 51%, transparent); z-index: 2; pointer-events: none; }
.turn-button { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #c8ad7c3d; background: #08112a75; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; z-index: 5; color: var(--gold); transition: background .2s, border-color .2s; }
.turn-button:hover:not(:disabled) { background: #c8ad7c18; border-color: #c8ad7c90; }
.turn-previous { left: 0; }
.turn-previous .icon { transform: rotate(180deg); }
.turn-next { right: 0; }
.turn-button .icon { width: 18px; height: 18px; }
.loading-message { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 13px; letter-spacing: 1px; pointer-events: none; }
.loading-message[hidden] { display: none; }

/* Sayfa tasarımı. cqw birimleri sayfanın gerçek genişliğine göre ölçeklenir. */
.page, .thumbnail { --metal: #c8ad7c; --metal-light: #f2e2bd; --metal-glow: #c8ad7c1a; }
.tone-silver { --metal: #a9bed6; --metal-light: #eaf3ff; --metal-glow: #a9bed61a; }
.tone-pearl { --metal: #c1b8d9; --metal-light: #f3edff; --metal-glow: #c1b8d91a; }
.tone-blue { --metal: #72b7e8; --metal-light: #d1f0ff; --metal-glow: #72b7e81a; }
.page { color: var(--text); overflow: hidden; container-type: inline-size; background: #0a142d; }
.page.--left { box-shadow: inset -7px 0 12px -8px #000; }
.page.--right { box-shadow: inset 7px 0 12px -8px #000; }
.page-content { width: 100%; height: 100%; position: relative; padding: 7.4% 8%; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 85% 25%, var(--metal-glow), transparent 55%), linear-gradient(145deg, #152341, #09132d 55%, #070f24); }
.page-content::before { content: ''; position: absolute; inset: 2.4cqw; border: 1px solid #c8ad7c26; pointer-events: none; z-index: 5; }
.page-content::after { content: ''; position: absolute; inset: 3.2cqw; border: 1px solid #d9e7ff06; pointer-events: none; z-index: 5; }
.page-geometry { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-geometry::before { content: ''; position: absolute; width: 110cqw; height: 110cqw; top: -48cqw; right: -58cqw; transform: rotate(35deg); border: 1px solid #9aafd019; box-shadow: 0 0 0 7cqw #6e8fb405, 0 0 0 7.2cqw #9aafd00c, 0 0 0 27cqw #456b9503; background: linear-gradient(120deg, #32496513, transparent); }
.page-geometry::after { content: ''; position: absolute; left: -30cqw; bottom: -70cqw; width: 140cqw; height: 120cqw; border: 1px solid #c8ad7c0d; transform: rotate(-28deg); background: linear-gradient(135deg, #c8ad7c04, transparent); }
.page-header, .page-footer { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; flex-shrink: 0; }
.page-header { border-bottom: 1px solid #c8ad7c30; padding-bottom: 3.2cqw; color: #8391a9; font-size: 1.65cqw; letter-spacing: .22cqw; }
.page-brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.page-brand > img { display: block; width: 20cqw; height: auto; object-fit: contain; }
.page-footer { margin-top: auto; padding-top: 4cqw; color: #78859f; font-size: 1.45cqw; letter-spacing: .16cqw; }
.page-number { font-size: 2cqw; color: var(--metal); letter-spacing: .1cqw; }
.page-kicker { display: flex; align-items: center; gap: 2cqw; font-size: 1.9cqw; letter-spacing: .37cqw; color: var(--metal); margin: 0 0 4cqw; font-weight: 500; }
.page-kicker > span { width: 5cqw; height: 1px; background: var(--metal); }
.page h2 { font-family: var(--sans); font-size: 9.5cqw; font-weight: 650; line-height: 1.04; letter-spacing: -.35cqw; margin: 0 0 4cqw; white-space: pre-line; color: #eef2fb; }
.page-description { font-size: 2.65cqw; line-height: 1.8; color: #98a6bf; margin: 0; max-width: 70cqw; white-space: pre-line; }
.page-note { border-left: 2px solid #c8ad7c65; padding-left: 2.6cqw; font-size: 1.9cqw; color: #7f8da6; line-height: 1.6; margin: 4cqw 0 0; }
.page-contents .page-content, .page-details .page-content { background: radial-gradient(ellipse at 110% 10%, var(--metal-glow), transparent 60%), linear-gradient(155deg, #111e39, #09132b); }

/* Soyut, özgün metalik mühür. Tüm çizimler SVG'dir; harici varlık gerekmez. */
.medallion { color: var(--metal); position: relative; width: 48cqw; aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 0 6cqw var(--metal-glow)); }
.medallion::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--metal-glow), transparent 70%); }
.medallion svg { display: block; width: 100%; height: 100%; overflow: visible; }
.medallion-halo { fill: none; stroke: currentColor; opacity: .12; stroke-width: .7; }
.medallion-dashes { fill: none; stroke: currentColor; opacity: .65; stroke-width: 2; stroke-dasharray: 13 11; transform: rotate(-12deg); transform-origin: center; }
.medallion-ring { fill: #08112a60; stroke: currentColor; opacity: .6; stroke-width: .7; }
.medallion-facet { fill: #ffffff03; stroke: currentColor; stroke-width: 1.4; }
.medallion-inner { fill: #08112a; stroke: currentColor; stroke-width: .6; opacity: .8; }
.medallion-lines { fill: none; stroke: currentColor; opacity: .45; stroke-width: .7; }
.medallion text { font-family: var(--serif); font-size: 49px; font-weight: 400; fill: var(--metal-light); letter-spacing: -2px; }
.medallion-star { fill: currentColor; opacity: .8; }

/* Kapak. */
.page-cover .page-content { text-align: center; background: radial-gradient(ellipse at 50% 42%, #c8ad7c15, transparent 40%), linear-gradient(145deg, #1c2c4a, #09132b 55%, #060c1c); }
.cover-identity { margin-top: 3cqw; }
.cover-wordmark, .back-wordmark { font-size: 22cqw; font-weight: 800; letter-spacing: 1.7cqw; line-height: 1; background: linear-gradient(155deg, #f8ebcf 5%, #d0b57e 37%, #a38753 52%, #f4e5c3 73%, #b59960); color: #dfc79a; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cover-subtitle { font-size: 3.2cqw; letter-spacing: 2.1cqw; color: #bca77f; margin: 1.3cqw -2.1cqw 0 0; }
.page-cover .medallion { width: 30cqw; margin: 3cqw auto; }
.cover-copy { margin-top: auto; }
.cover-copy .page-kicker { justify-content: center; font-size: 4.7cqw; margin-bottom: 3cqw; }
.cover-copy h2 { font-size: 5.2cqw; letter-spacing: -.1cqw; line-height: 1.1; font-weight: 550; color: #ead7b1; }
.cover-copy .page-description { font-size: 2.4cqw; max-width: 60cqw; margin: 0 auto; }
.cover-topics { border-top: 1px solid #c8ad7c40; display: flex; justify-content: space-between; gap: 1cqw; padding-top: 3.6cqw; margin-top: 5cqw; font-size: 1.55cqw; letter-spacing: .2cqw; color: #a99571; }

/* İçindekiler ve bölüm kapakları. */
.contents-intro { margin-top: 6cqw; }
.contents-intro h2 { font-size: 8.3cqw; }
.contents-list { margin-top: 5cqw; border-top: 1px solid #c8ad7c40; }
.contents-list button { width: 100%; display: flex; align-items: center; text-align: left; gap: 4cqw; background: none; border: 0; border-bottom: 1px solid #c8ad7c2c; padding: 2.5cqw 1cqw; }
.contents-list button:hover { background: #c8ad7c08; }
.contents-number { font-family: var(--serif); font-size: 4cqw; color: #a78d5f; font-style: italic; }
.contents-copy { display: flex; flex-direction: column; gap: 1.2cqw; }
.contents-copy strong { font-size: 3.5cqw; font-weight: 500; color: #ddd5c5; }
.contents-copy small { font-size: 2.15cqw; color: #6e7f9e; }
.contents-arrow { margin-left: auto; color: #b59a69; font-size: 4cqw; font-weight: 200; }
.page-contents .page-note { margin-top: 4.5cqw; }
.section-art { position: relative; margin-top: 7cqw; height: 49cqw; flex-shrink: 0; display: grid; place-items: center; }
.section-art .medallion { width: 47cqw; z-index: 1; }
.section-watermark { position: absolute; top: -4cqw; right: -13cqw; font-size: 54cqw; line-height: 1; letter-spacing: -5cqw; font-weight: 700; color: var(--metal); opacity: .035; }
.section-copy { margin-top: 6cqw; }
.section-copy h2 { font-size: 11cqw; color: var(--metal-light); }
.section-copy .page-description { max-width: 65cqw; }
.section-caption { display: flex; align-items: center; gap: 3cqw; color: var(--metal); font-size: 1.65cqw; letter-spacing: .25cqw; margin-top: 6cqw; }
.section-caption > span { width: 8cqw; height: 1px; background: var(--metal); opacity: .7; }

/* Her bölüm için düzenlenebilir bilgi satırları. */
.details-intro { margin-top: 5cqw; }
.chapter-chip { display: inline-block; color: var(--metal); border: 1px solid var(--metal); background: var(--metal-glow); border-radius: 2px; padding: .7cqw 2cqw; font-size: 1.6cqw; letter-spacing: .2cqw; margin-bottom: 3cqw; }
.details-intro .page-kicker { font-size: 1.65cqw; margin-bottom: 3cqw; }
.details-intro h2 { font-size: 7.2cqw; margin-bottom: 3cqw; }
.details-intro .page-description { font-size: 2.3cqw; }
.detail-list { margin-top: 4cqw; border-top: 1px solid #b9c5dd24; }
.detail-row { display: flex; gap: 3.3cqw; align-items: center; border-bottom: 1px solid #b9c5dd1c; padding: 2.6cqw 0; }
.detail-index { width: 5.5cqw; height: 5.5cqw; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--metal); color: var(--metal); font-size: 1.8cqw; border-radius: 50%; opacity: .7; }
.detail-row h3 { font-size: 3cqw; color: #d8dfed; font-weight: 500; margin: 0 0 1cqw; }
.detail-row p { font-size: 2.2cqw; line-height: 1.6; color: #7486a4; margin: 0; }
.detail-mark { color: var(--metal); font-size: 3.4cqw; margin-left: auto; opacity: .65; }
.page-details .page-note { margin-top: 3cqw; }

/* Kapanış ve arka kapak. */
.closing-copy { margin: auto 0; }
.closing-copy .medallion { width: 30cqw; margin: 0 0 9cqw; }
.closing-copy h2 { color: var(--gold-light); font-size: 11cqw; }
.closing-copy .page-description { max-width: 65cqw; font-size: 3cqw; }
.closing-copy .section-caption { margin-top: 9cqw; }
.page-back .page-content { background: radial-gradient(ellipse at center, #172747, #08112a 70%); }
.back-copy { margin: auto 0; text-align: center; }
.back-copy .medallion { width: 32cqw; margin: 0 auto 8cqw; }
.back-wordmark { font-size: 19cqw; }
.back-copy h2 { font-size: 2.6cqw; font-weight: 400; letter-spacing: 1.9cqw; color: var(--gold); margin: 2cqw -1.9cqw 0 0; }
.back-copy .page-description { font-size: 2.4cqw; margin: 7cqw auto 0; }
.back-note { color: #6d7f9c; font-size: 1.8cqw; letter-spacing: .2cqw; margin-top: 5cqw; }
.restart-button { border: 1px solid #c8ad7c70; background: #c8ad7c0a; color: #d7bf94; display: inline-flex; align-items: center; gap: 6cqw; padding: 2.7cqw 4.5cqw; border-radius: 3px; font-size: 2.3cqw; margin-top: 6cqw; }
.restart-button:hover { background: #c8ad7c1a; }

.tone-platinum { --metal: #bac4e3; --metal-light: #f0f3ff; --metal-glow: #bac4e31a; }
.tone-diamond { --metal: #79d5ee; --metal-light: #e1faff; --metal-glow: #79d5ee20; }

/* İç sayfa 1–2: görselin kenardan taştığı, metinleri kısa tutulan slogan sayfaları. */
.hero-composition { flex: 1; min-height: 0; position: relative; margin: 0 -8cqw; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; padding: 0 8cqw; margin-top: 10cqw; }
.hero-copy .page-kicker { font-size: 1.8cqw; margin-bottom: 5cqw; }
.hero-copy h2 { font-size: 12cqw; line-height: 1.04; max-width: 72cqw; margin-bottom: 5cqw; }
.hero-copy .page-description { font-size: 3cqw; line-height: 1.7; max-width: 49cqw; }
.hero-media { position: absolute; width: 94cqw; height: 96cqw; right: -32cqw; bottom: -9cqw; z-index: -1; }
.hero-image { width: 100%; height: 100%; display: block; object-fit: contain; object-position: bottom center; }
.hero-image.fit-cover { object-fit: cover; }
.hero-media:not(.is-unfilled)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #09132d, transparent 18%), linear-gradient(90deg, #09132d45, transparent 35%); }
.hero-image-guide { position: absolute; inset: 0; border: 1px solid #c8ad7c25; border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, #c8ad7c0d, #15244308 65%, transparent 75%); display: grid; place-items: center; }
.hero-image-guide > span { position: relative; z-index: 1; font-size: 1.7cqw; letter-spacing: .5cqw; color: #637393; transform: rotate(-35deg); }
.hero-image-guide i { position: absolute; inset: 12%; border: 1px solid #c8ad7c1c; transform: rotate(30deg); }
.hero-image-guide i:nth-of-type(2) { inset: 23%; transform: rotate(45deg); border-color: #a9bed621; }
.hero-image-guide i:nth-of-type(3) { inset: 34%; transform: rotate(60deg); border-color: #c8ad7c23; }
.hero-ornament { position: absolute; bottom: 7cqw; left: 8cqw; display: flex; align-items: center; gap: 3cqw; font-size: 2cqw; color: #c8ad7c70; }
.hero-ornament > span { width: 6cqw; height: 1px; background: #c8ad7c45; }
.image-top .hero-media { top: 3cqw; bottom: auto; right: -24cqw; }
.image-top .hero-ornament { top: 8cqw; bottom: auto; }
.page-hero .page-content { background: radial-gradient(ellipse at 100% 70%, #263b601f, transparent 65%), linear-gradient(145deg, #152341, #09132d 60%, #070f24); }

/* İç sayfa 3–6: tek sayfalık, bağımsız metalik kimliklere sahip liste düzeni. */
.page-membership .page-content::before { border-color: var(--metal); opacity: .3; }
.page-membership .page-header { border-color: color-mix(in srgb, var(--metal) 28%, transparent); }
.membership-heading { margin-top: 4cqw; }
.membership-identity { display: flex; align-items: center; gap: 5cqw; margin-bottom: 3cqw; }
.membership-emblem { display: block; width: 20cqw; height: 20cqw; flex-shrink: 0; fill: var(--metal-glow); stroke: var(--metal); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4cqw var(--metal-glow)); }
.membership-rule { height: 1px; flex: 1; background: linear-gradient(90deg, var(--metal), transparent); opacity: .4; }
.membership-heading .page-kicker { font-size: 1.6cqw; margin-bottom: 2cqw; }
.page h2.membership-title { font-size: 10.5cqw; line-height: 1.06; font-weight: 650; letter-spacing: .3cqw; margin-bottom: 1cqw; background: linear-gradient(145deg, var(--metal-light), var(--metal) 55%, var(--metal-light)); color: var(--metal-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.membership-heading .page-description { font-size: 2.3cqw; line-height: 1.65; }
.membership-list { margin-top: 1cqw; border-top: 1px solid color-mix(in srgb, var(--metal) 28%, transparent); }
.membership-row { display: flex; align-items: center; gap: 3.4cqw; padding: 1.8cqw 0; border-bottom: 1px solid #a9bed621; }
.membership-row-mark { width: 4.5cqw; flex-shrink: 0; font-family: var(--serif); font-size: 2.5cqw; font-style: italic; color: var(--metal); opacity: .7; }
.membership-row-title { margin: 0 0 .7cqw; font-size: 3cqw; line-height: 1.2; font-weight: 500; color: #dbe3f0; }
.membership-row-description { margin: 0; font-size: 2.2cqw; line-height: 1.6; color: #8494b0; }
.membership-row-star { margin-left: auto; font-size: 3cqw; color: var(--metal); opacity: .5; }
.membership-note { margin-top: 3cqw; font-size: 1.7cqw; border-left-color: var(--metal); }
.tone-diamond .membership-emblem { filter: drop-shadow(0 0 3cqw #79d5ee35); }
.tone-platinum .membership-emblem { stroke-width: .8; }

/* İç sayfa 7–8: her sayfada iki adet başlık + açıklama kutusu. */
.services-intro { margin-top: 7cqw; }
.services-intro .page-kicker { margin-bottom: 3cqw; }
.page h2.services-title { font-size: 8.2cqw; margin-bottom: 3cqw; }
.services-intro .page-description { font-size: 2.5cqw; }
.service-cards { display: grid; grid-template-rows: repeat(2, minmax(30cqw, auto)); gap: 4cqw; margin-top: 6cqw; }
.service-card { position: relative; padding: 3.8cqw; border: 1px solid #c8ad7c42; background: linear-gradient(135deg, #c8ad7c09, #15264535); overflow: hidden; }
.service-card::after { content: ''; position: absolute; width: 24cqw; height: 24cqw; right: -14cqw; top: -14cqw; transform: rotate(45deg); border: 1px solid #c8ad7c22; pointer-events: none; }
.service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3cqw; }
.service-card-top > span { font-family: var(--serif); font-size: 2.3cqw; color: #c8ad7c70; }
.service-icon { display: block; width: 4.5cqw; height: 4.5cqw; fill: none; stroke: #c8ad7c; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.service-card-title { font-size: 4cqw; line-height: 1.2; font-weight: 500; color: #e4d5b8; margin: 0 0 1.6cqw; }
.service-card-description { font-size: 2.4cqw; line-height: 1.6; color: #8c9cb8; margin: 0; white-space: pre-line; }

/* İç sayfa 9 ve sonrası: bağımsız SSS akordeonları. */
.faq-intro { margin-top: 3cqw; }
.page h2.faq-title { font-size: 8.5cqw; }
.faq-intro .page-description { font-size: 2.6cqw; }
.faq-list { margin-top: 2cqw; border-top: 1px solid #c8ad7c40; }
.faq-item { border-bottom: 1px solid #c8ad7c30; }
.faq-item summary { display: flex; align-items: center; gap: 3cqw; padding: 3.5cqw 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.faq-number { font-size: 2.3cqw; font-family: var(--serif); font-style: italic; color: #ad956a; flex-shrink: 0; }
.faq-question { font-size: 3.2cqw; line-height: 1.4; font-weight: 500; color: #dce3f0; }
.faq-toggle { position: relative; width: 2.5cqw; height: 2.5cqw; margin-left: auto; color: #c8ad7c; flex-shrink: 0; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background: currentColor; }
.faq-toggle::before { width: 100%; height: 1px; top: 50%; left: 0; }
.faq-toggle::after { width: 1px; height: 100%; left: 50%; top: 0; }
.faq-item[open] .faq-toggle::after { display: none; }
.faq-answer { padding: 0 1cqw 1cqw 2cqw; max-height: 40cqw; overflow: auto; scrollbar-width: thin; scrollbar-color: #c8ad7c50 transparent; }
.faq-answer-text { margin: 0; font-size: 2.6cqw; line-height: 1.8; color: #90a0bb; white-space: pre-line; }
.faq-answer-list { list-style: none; display: grid; gap: 1.5cqw; margin: 0; padding: 0; font-size: 2.6cqw; line-height: 1.7; color: #a8b5cb; }
.faq-answer-list > li { position: relative; padding: 1.1cqw 1cqw 1cqw 6cqw; border: 1px solid #c8ad7c24; border-radius: 1cqw; background: linear-gradient(110deg, #c8ad7c0c, #c8ad7c02); overflow-wrap: anywhere; }
.faq-answer-list > li::before { content: ''; position: absolute; top: 2.6cqw; left: 2.5cqw; width: 1cqw; height: 1cqw; border: 1px solid #c8ad7c; transform: rotate(45deg); background: #c8ad7c18; }

/* Gezinme kontrolleri. */
.reader-footer { border-top: 1px solid #c8ad7c20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.pages-button { display: flex; align-items: center; gap: 9px; width: max-content; border: 0; background: none; padding: 8px 0; font-size: 11px; color: #bca77e; }
.pages-button .icon { width: 15px; height: 15px; }
.pages-button:hover { color: var(--gold-light); }
.page-navigation { display: flex; align-items: center; gap: 15px; }
.page-position { min-width: 62px; font-size: 10px; text-align: right; color: #d7c7a5; font-variant-numeric: tabular-nums; }
#page-range { width: clamp(100px, 15vw, 240px); accent-color: var(--gold); height: 2px; cursor: pointer; appearance: none; background: #c8ad7c32; border-radius: 2px; }
#page-range::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 8px #c8ad7c40; }
#page-range::-moz-range-thumb { width: 8px; height: 8px; border: 0; background: var(--gold); border-radius: 50%; }
.total-pages { font-size: 9px; color: #6d7b94; }
.gesture-hint { display: flex; align-items: center; justify-self: end; gap: 10px; color: #72829e; font-size: 10px; }
.gesture-hint .icon { width: 15px; height: 15px; color: #aa936b; }
.reader-credit { display: flex; justify-content: space-between; font-size: 6px; letter-spacing: 1.6px; color: #536481; }

/* Erişilebilir sayfa seçici. */
dialog { background: #0b162f; color: #e3e7ee; border: 1px solid #c8ad7c60; border-radius: 8px; width: min(980px, 92vw); max-height: 86dvh; padding: 28px; box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #020711d6; backdrop-filter: blur(7px); }
.dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.eyebrow { font-size: 8px; letter-spacing: 2px; color: #b9a171; }
.dialog-header h1 { font-size: 29px; font-weight: 400; letter-spacing: -.6px; margin: 8px 0 0; }
.page-thumbnails { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
.thumbnail { padding: 0; border: 0; background: none; text-align: left; color: #9da9bc; }
.thumbnail-paper { position: relative; aspect-ratio: 52 / 70; border: 1px solid #c8ad7c30; padding: 14px; background: radial-gradient(ellipse at top right, var(--metal-glow), transparent 70%), #09132b; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.thumbnail-paper::after { content: ''; position: absolute; inset: 5px; border: 1px solid #c8ad7c14; pointer-events: none; }
.thumbnail:hover .thumbnail-paper, .thumbnail[aria-current=true] .thumbnail-paper { outline: 1px solid var(--metal); outline-offset: 3px; }
.thumbnail-chapter { font-size: 23px; font-family: var(--serif); font-style: italic; color: var(--metal); margin-bottom: auto; }
.thumbnail-title { font-size: 15px; font-weight: 500; line-height: 1.15; white-space: pre-line; color: var(--metal-light); margin: 18px 0; }
.thumbnail-edition { font-size: 5px; letter-spacing: 1.3px; color: #697c9b; margin-top: auto; }
.thumbnail-label { display: flex; gap: 7px; margin-top: 10px; font-size: 9px; line-height: 1.5; }
.thumbnail-label > span { color: #bba171; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
noscript { position: fixed; inset: 40% 10% auto; text-align: center; color: var(--gold-light); }

@media (max-width: 750px) {
  .reader { padding: 0 18px; grid-template-rows: 63px minmax(0, 1fr) 62px 23px; }
  .reader-logo > img { width: 110px; max-height: 28px; }
  .header-rule { margin: 0 12px; }
  .header-description { font-size: 7px; letter-spacing: 1px; }
  .issue-label { display: none; }
  .reading-stage { padding: 18px 15px; }
  .turn-button { width: 29px; height: 29px; background: #08112ab0; }
  .turn-previous { left: -12px; }
  .turn-next { right: -12px; }
  .turn-button .icon { width: 14px; height: 14px; }
  .reader-footer { grid-template-columns: auto 1fr; gap: 16px; }
  .page-navigation { justify-self: end; gap: 11px; }
  #page-range { width: clamp(80px, 23vw, 200px); }
  .gesture-hint { display: none; }
  .reader-credit { font-size: 5px; letter-spacing: 1px; }
  .page-thumbnails { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
  .thumbnail-title { font-size: 14px; }
  dialog { padding: 20px; }
}
@media (max-height: 520px) {
  .reader { grid-template-rows: 45px minmax(0, 1fr) 40px 17px; padding: 0 22px; }
  .reading-stage { padding-top: 8px; padding-bottom: 8px; }
  .reader-logo > img { width: 110px; max-height: 28px; }
  .gesture-hint { display: none; }
  .icon-button { width: 29px; height: 29px; }
}
.book-frame.is-loading { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #book, .turn-button { transition: none; } }