/* Tarihden — harita, canlandırma, savaş sahnesi ve bölüm sayfaları */

/* ——— Harita motoru ——— */
.amap-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #3a2a1a; touch-action: none; user-select: none; }
.amap-stage > .amap { transform-origin: 0 0; }   /* yakınlaştırma sırasındaki transform için (map-engine applyView) */
.amap.moving { will-change: transform; }
.amap { width: 100%; height: 100%; display: block; }
.amap-stage.ia .amap { cursor: grab; }
.amap-stage.drag .amap { cursor: grabbing; }
.amap .place .fx, .amap .pin .fx, .amap .arrow-head .fx, .amap .peak .fx, .amap .zlab .fx { transform: scale(var(--ik, 1)); }
.amap .pdot { fill: #3b2410; stroke: #f3e5bb; stroke-width: 1.4; }
.amap .plabel { font: italic 600 13.5px var(--font-body); fill: #2b1b10; paint-order: stroke; stroke: rgba(246, 232, 190, .9); stroke-width: 3.4px; stroke-linejoin: round; }
.amap .place.t1 .plabel { font: 700 14.5px var(--font-head); font-style: normal; letter-spacing: .03em; }
.amap .place.foreign .plabel { fill: #6d5230; font-weight: 500; }
.amap .place.foreign .pdot { fill: #7c6238; }
/* Harita birimindeki adlar: --lk ile yakınlaştıkça yavaş büyür (mapengine apply). */
.amap .sea-name { font: italic 500 calc(var(--sc, 1) * 36px * var(--lk, 1)) var(--font-body); fill: #1f4c54; opacity: .62; letter-spacing: .08em; pointer-events: none; }
.amap .reg-name { font: 700 calc(var(--sc, 1) * 46px * var(--lk, 1)) var(--font-head); fill: #5a3d1b; opacity: .24; letter-spacing: .22em; pointer-events: none; }
.amap .cty-name { font: 700 calc(22px * var(--lk, 1)) var(--font-head); fill: #5a3d1b; opacity: .4; letter-spacing: .1em; pointer-events: none; }
.amap .riv-name { font: italic 600 calc(13px * var(--lk, 1)) var(--font-body); fill: #24575d; paint-order: stroke; stroke: rgba(246, 232, 190, .8); stroke-width: calc(2.6px * var(--lk, 1)); pointer-events: none; }
.amap .lake-name { font: italic 600 calc(11.5px * var(--lk, 1)) var(--font-body); fill: #1f4c54; paint-order: stroke; stroke: rgba(246, 232, 190, .55); stroke-width: calc(2px * var(--lk, 1)); pointer-events: none; }
.amap .rng-name { font: italic 600 calc(var(--sc, 1) * 19px * var(--lk, 1)) var(--font-body); fill: #4a3016; opacity: .62; letter-spacing: .06em; pointer-events: none; paint-order: stroke; stroke: rgba(240, 222, 176, .55); stroke-width: calc(2px * var(--lk, 1)); }
.amap .peak .pk { fill: #e9d6a4; stroke: #4a3016; stroke-width: 1; stroke-linejoin: round; }
.amap .peak .pk-sh { fill: #4a3016; opacity: .55; }
.amap .peak .pk-name { font: italic 600 11px var(--font-body); fill: #4a3016; paint-order: stroke; stroke: rgba(246, 232, 190, .9); stroke-width: 2.8px; stroke-linejoin: round; }
.amap .prov-name { font: 600 calc(8.6px * var(--lk, 1)) var(--font-head); fill: #5a3d1b; opacity: .5; letter-spacing: .12em; pointer-events: none; }
.amap .zone { transition: opacity .9s ease; }
.amap .zone:hover { stroke-width: 3.2; }
/* İşgal bölgesi adı: taraf rengiyle, açık hale üstünde */
.amap .zlab { pointer-events: none; transition: opacity .9s ease; }
.amap .zlab text { font: 700 12.5px var(--font-head); letter-spacing: .14em; fill: var(--zc); paint-order: stroke; stroke: rgba(246, 236, 204, .92); stroke-width: 4px; stroke-linejoin: round; }
.amap.cine .zlab text { font-size: 17px; stroke-width: 5px; }
/* Harekât okları: hale + renkli çizgi; canlandırmada daha kalın */
.amap .arrow .al-h { stroke-width: 8px; }
.amap .arrow .al { stroke-width: 4.4px; }
.amap .arrow .al.mk { stroke-width: 3.6px; }
.amap.cine .arrow .al-h { stroke-width: 12px; }
.amap.cine .arrow .al { stroke-width: 6.6px; }
.amap.cine .arrow .al.mk { stroke-width: 5.4px; }
.amap.cine .arrow-head .fx { transform: scale(calc(var(--ik, 1) * 1.55)); }
.amap .alabel { font: italic 700 calc(var(--ik, 1) * 14px) var(--font-body); fill: #2b1b10; paint-order: stroke; stroke: rgba(246, 232, 190, .95); stroke-width: calc(var(--ik, 1) * 3.6px); stroke-linejoin: round; text-anchor: middle; pointer-events: none; transition: opacity .4s; }
.amap.cine .alabel { font: 700 calc(var(--ik, 1) * 19px) var(--font-head); letter-spacing: .02em; fill: var(--ac, #2b1b10); stroke-width: calc(var(--ik, 1) * 5px); }
.amap.cine .alabel.act { fill: #2b1b10; }
.amap.cine .plabel { font-size: 16px; stroke-width: 4px; }
.amap.cine .place.t1 .plabel { font-size: 18px; }
.amap.cine .plabel.act { font: 700 19px var(--font-head); }
.amap.cine .lake-name, .amap.cine .rng-name, .amap.cine .riv-name { opacity: .85; }
.amap .pin { cursor: pointer; }
.amap .pin .core { stroke: #f7ecc8; stroke-width: 2; transition: transform .2s; }
.amap .pin:hover .core, .amap .pin:focus-visible .core { transform: scale(1.25); }
.amap .pin .ring { fill: none; stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.amap .pin.cur .ring { animation: pulse 1.8s ease-out infinite; }
.amap .pin.sel .core { stroke: #fff; stroke-width: 3; }
.amap .pin:focus-visible { outline: none; }
.amap .pin:focus-visible .core { stroke: #fff; stroke-width: 3.4; }
@keyframes pulse { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.amap.off-prov .lyr-prov, .amap.off-rivers .lyr-rivers, .amap.off-mount .lyr-mount, .amap.off-names .lyr-names, .amap.off-misak .lyr-misak, .amap.off-zones .lyr-zones, .amap.off-arrows .lyr-arrows, .amap.off-events .lyr-events { display: none; }
.amap .actor { pointer-events: none; }
.amap .actor .fx { transform: scale(var(--ik, 1)); }

.amap-frame { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 9px #3a2410, inset 0 0 0 11px var(--gold-3), inset 0 0 90px rgba(40, 16, 4, .55); }
.amap-frame::after { content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(106, 74, 34, .7); }
.amap-title { position: absolute; left: 24px; top: 24px; z-index: 3; padding: 10px 26px 8px; background: linear-gradient(rgba(244, 232, 196, .6), rgba(244, 232, 196, .6)), #e8d6a6 url("../assets/img/parch.webp") center / cover; background-blend-mode: normal, multiply; border: 2px solid #5a3d1b; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); color: #3b2410; text-align: center; }
.amap-title::before, .amap-title::after { content: ""; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #8a1d28; box-shadow: inset 0 0 0 2px #5a1018; }
.amap-title::before { left: 7px; } .amap-title::after { right: 7px; }
.amap-title b { display: block; font: 700 1.15rem var(--font-head); letter-spacing: .06em; }
.amap-title small { font: italic 500 .82rem var(--font-body); color: #6a5034; }
.amap-compass { position: absolute; right: 24px; bottom: 24px; z-index: 3; opacity: .9; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); pointer-events: none; }
.amap-scale { position: absolute; left: 26px; bottom: 26px; z-index: 3; font: italic 600 .9rem var(--font-body); color: #3b2410; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 0 6px #ead9ad; pointer-events: none; }
.amap-scale i { display: block; height: 8px; border: 2px solid #3b2410; border-top: 0; min-width: 20px; }
.amap-zoom { position: absolute; right: 24px; top: 24px; z-index: 4; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.amap-zoom button { width: 40px; height: 40px; border: 2px solid #5a3d1b; background: #ead9ad; color: #3b2410; font: 700 1.3rem var(--font-head); cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.amap-zoom button:hover { background: #f4e6bd; }
.amap-zoom .zl { text-align: center; font: 700 .75rem var(--font-head); color: #3b2410; background: rgba(234, 217, 173, .85); border: 1px solid #5a3d1b; padding: 2px 0; }
.amap-layers { position: absolute; right: 74px; top: 24px; z-index: 4; }
.amap-layers .lbtn { padding: 9px 14px; border: 2px solid #5a3d1b; background: #ead9ad; color: #3b2410; font: 700 .75rem var(--font-head); letter-spacing: .1em; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); height: 40px; }
.amap-layers .lbody { display: none; margin-top: 6px; background: #ead9ad; border: 2px solid #5a3d1b; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); color: #2b1b10; font-size: .95rem; }
.amap-layers.open .lbody { display: grid; gap: 4px; }
.amap-layers label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.amap-layers input { accent-color: #8a1d28; width: 16px; height: 16px; }
.amap-legend { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; padding: 6px 14px; background: rgba(234, 217, 173, .88); border: 1px solid #5a3d1b; font: 600 .78rem var(--font-head); letter-spacing: .04em; color: #3b2410; max-width: 60%; pointer-events: none; }
.amap-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; opacity: .8; }
.amap-legend i.ln { width: 18px; height: 0; border-top: 3px dashed; background: none; vertical-align: 3px; }
.amap-tip { position: absolute; z-index: 6; max-width: 280px; padding: 6px 12px; background: rgba(18, 6, 10, .94); color: var(--on-dark); border: 1px solid var(--gold); font: 500 .92rem var(--font-body); pointer-events: none; }
.amap-tip[hidden] { display: none; }

/* ——— Atlas sayfası ——— */
.atlas-stage { height: clamp(480px, 76vh, 820px); border: 1px solid var(--gold-3); box-shadow: 0 14px 44px rgba(0, 0, 0, .6); }
.atlas-ctl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: center; margin: 14px 0; padding: 14px 20px; background: rgba(43, 16, 22, .85); border: 1px solid rgba(201, 162, 75, .45); }
.atlas-date { font: 700 1.5rem var(--font-head); color: var(--gold-2); min-width: 12ch; letter-spacing: .04em; }
.atlas-ctl .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.atlas-ctl input[type="range"] { flex: 1; min-width: 180px; accent-color: var(--gold); height: 30px; }
.atlas-ctl .dbtn { padding: 8px 16px; border: 1px solid var(--gold); background: rgba(0, 0, 0, .3); color: var(--gold-2); font: 700 .78rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 3px; }
.atlas-ctl .dbtn:hover { background: rgba(201, 162, 75, .18); }
.atlas-ctl .dbtn.go { background: var(--gold-grad); color: #2a1406; border-color: #6d521b; }
.atlas-ctl .jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-ctl .jump button { padding: 5px 12px; border: 1px solid rgba(201, 162, 75, .5); background: transparent; color: var(--on-dark); font: 600 .75rem var(--font-head); letter-spacing: .06em; cursor: pointer; border-radius: 3px; }
.atlas-ctl .jump button:hover { background: rgba(201, 162, 75, .15); color: var(--gold-2); }
.atlas-info { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 6px; }
.atlas-info .sheet { padding: 22px 26px; }
.atlas-info h3, .atlas-info .side-h { margin: 4px 0 6px; font-size: 1.45rem; }
.atlas-info .meta { font: 700 .78rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.atlas-info .why { background: rgba(122, 84, 30, .14); border-left: 4px solid var(--red); padding: 8px 14px; margin: 10px 0; font-weight: 600; }
.atlas-info .why small { display: block; font: 700 .75rem var(--font-head); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.zlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .98rem; }
.zlist li { display: flex; gap: 8px; align-items: baseline; }
.zlist i { width: 12px; height: 12px; border-radius: 2px; flex: none; opacity: .85; }

/* ——— Canlandırma (tiyatro) ——— */
.th-view { position: absolute; inset: 0; }
.bs-cv { position: absolute; inset: 0; }
.th-stage { position: relative; aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; border: 1px solid var(--gold-3); box-shadow: 0 14px 44px rgba(0, 0, 0, .65); background: #2a1810; overflow: hidden; }
.th-stage .amap-stage { position: absolute; inset: 0; }
.th-head { position: absolute; left: 22px; top: 22px; z-index: 5; max-width: min(46%, 560px); padding: 10px 22px 8px; background: rgba(18, 6, 10, .9); border: 1px solid var(--gold); }
.th-head small { font: 700 .75rem var(--font-head); letter-spacing: .18em; color: var(--gold-2); display: block; text-transform: uppercase; }
.th-head h2 { margin: 2px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: #f6e5b4; }
.th-head .dt { font: 600 .95rem var(--font-head); color: var(--on-dark-2); letter-spacing: .08em; }
.th-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 54px clamp(18px, 4vw, 54px) 20px; background: linear-gradient(180deg, transparent, rgba(12, 4, 6, .86) 38%, rgba(12, 4, 6, .96)); }
.th-cap .tag { display: inline-block; font: 700 .76rem var(--font-head); letter-spacing: .18em; color: #2a1406; background: var(--gold-grad); padding: 2px 10px; margin-bottom: 8px; text-transform: uppercase; }
.th-cap p { margin: 0; max-width: 88ch; font: 400 clamp(1.02rem, 1.9vw, 1.4rem)/1.55 var(--font-body); color: #f2e4bc; text-shadow: 0 2px 8px #000; min-height: 4.6em; }
.th-cap p .w { opacity: 0; transition: opacity .5s; }
.th-cap p .w.on { opacity: 1; }
.th-cap .fact { margin-top: 8px; font: 500 .9rem var(--font-body); color: var(--on-dark-2); border-top: 1px solid rgba(201, 162, 75, .3); padding-top: 6px; }
.th-cap .fact b { color: var(--gold-2); }
.th-ctl { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; margin: 14px 0 8px; padding: 12px 18px; background: rgba(43, 16, 22, .88); border: 1px solid rgba(201, 162, 75, .45); }
.th-ctl .cb { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(0, 0, 0, .35); color: var(--gold-2); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.th-ctl .cb:hover { background: rgba(201, 162, 75, .2); }
.th-ctl .cb.go { width: 56px; height: 56px; background: var(--gold-grad); color: #2a1406; font-size: 1.4rem; border-color: #6d521b; }
/* Sahne noktaları: 24 px düğme (dokunma alanı), içinde 14 px görünen nokta */
.th-dots { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; flex: 1; min-width: 220px; }
.th-dots button { position: relative; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; cursor: pointer; padding: 0; }
.th-dots button::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; transition: background-color var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), transform var(--d-press) var(--ease-out); }
.th-dots button:hover::before { transform: scale(1.2); }
.th-dots button.done::before { background: rgba(201, 162, 75, .5); }
.th-dots button.on::before { background: var(--gold-2); box-shadow: 0 0 0 3px rgba(201, 162, 75, .35); }
.th-opts { display: flex; gap: 8px; align-items: center; color: var(--on-dark-2); font: 600 .78rem var(--font-head); letter-spacing: .06em; }
/* Etiketin tamamı tıklanabilir; en az 44 px yükseklik */
.th-opts label { display: flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.th-opts input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.th-opts select { min-height: 36px; background: #1d0a0e; color: var(--gold-2); border: 1px solid var(--gold-3); border-radius: 4px; padding: 4px 8px; font: inherit; transition: border-color var(--d-ui) var(--ease-out); }
.th-opts select:hover { border-color: var(--gold); }
.th-bar { height: 4px; background: rgba(201, 162, 75, .2); margin-top: 2px; }
.th-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold); }
.th-list { margin-top: 20px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.th-list button { text-align: left; padding: 10px 14px; background: rgba(43, 16, 22, .75); border: 1px solid rgba(201, 162, 75, .35); color: var(--on-dark); cursor: pointer; font: 500 1rem var(--font-body); display: flex; gap: 10px; align-items: baseline; }
.th-list button:hover, .th-list button.on { background: rgba(77, 27, 38, .9); border-color: var(--gold); }
.th-list b { font: 700 .78rem var(--font-head); color: var(--gold-2); min-width: 2.2em; }
.th-list small { display: block; color: var(--on-dark-2); }
.th-start { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(18, 6, 10, .55), rgba(18, 6, 10, .86)); }
.th-start[hidden] { display: none; }
.th-start h2 { font-size: clamp(1.6rem, 4vw, 3rem); color: var(--gold-2); margin: 0 0 6px; }
.th-start p { max-width: 50ch; margin: 0 auto 20px; color: var(--on-dark); }

/* ——— Savaş sahnesi ——— */
.bs-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); align-items: start; }
.bs-stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--gold-3); box-shadow: 0 14px 44px rgba(0, 0, 0, .6); background: #cdb27a; overflow: hidden; }
.bs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bs-step { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 8px 16px; background: rgba(18, 6, 10, .82); border: 1px solid var(--gold); color: var(--gold-2); font: 700 .95rem var(--font-head); letter-spacing: .05em; max-width: 58%; }
.bs-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 22px 14px; background: linear-gradient(180deg, transparent, rgba(12, 4, 6, .88)); color: #f2e4bc; font: 400 clamp(.95rem, 1.6vw, 1.2rem)/1.5 var(--font-body); }
.bs-ctl { margin-top: 12px; padding: 12px 16px; background: rgba(43, 16, 22, .88); border: 1px solid rgba(201, 162, 75, .45); display: grid; gap: 10px; }
.bs-ctl .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bs-ctl .cb { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(0, 0, 0, .35); color: var(--gold-2); cursor: pointer; font-size: 1rem; }
.bs-ctl .cb.go { background: var(--gold-grad); color: #2a1406; border-color: #6d521b; }
.bs-ctl input[type="range"] { flex: 1; min-width: 160px; height: 30px; accent-color: var(--gold); }
.bs-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-steps button { padding: 6px 12px; border: 1px solid rgba(201, 162, 75, .5); background: rgba(0, 0, 0, .25); color: var(--on-dark); font: 600 .78rem var(--font-body); cursor: pointer; border-radius: 3px; }
.bs-steps button.on { background: var(--gold-grad); color: #2a1406; border-color: #6d521b; font-weight: 700; }
.bs-side { display: grid; gap: 14px; }
.bs-side .sheet { padding: 18px 20px; }
/* Yan sütun kutu başlıkları: belge yapısında h2 (ana içeriğin kardeş bölümleri), görünüşte küçük başlık. */
.bs-side .side-h { margin: 0 0 8px; font-size: 1.15rem; }
.bs-side .bars { display: grid; gap: 10px; }
.bs-side .bar-row .top { display: flex; justify-content: space-between; font: 700 .85rem var(--font-head); }
.bs-side .pair { display: grid; gap: 3px; }
.bs-side .pair div { height: 17px; background: rgba(0, 0, 0, .12); border-radius: 3px; overflow: hidden; }
.bs-side .pair i { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; height: 100%; font: 700 .76rem var(--font-body); font-style: normal; color: #fff; width: 0; transition: width .8s; }
.bs-side .pair .t i { background: #b3151f; } .bs-side .pair .g i { background: #2b5aa8; }
.vsline { display: flex; align-items: center; gap: 10px; font: 700 .9rem var(--font-head); }
.vsline svg { width: 36px; height: 24px; border: 1px solid rgba(0, 0, 0, .3); }

/* ——— Bölüm sayfası ——— */
.ch-hero { position: relative; margin-top: 4px; min-height: clamp(260px, 42vh, 460px); display: grid; align-items: end; border: 1px solid var(--gold-3); overflow: hidden; box-shadow: 0 14px 44px rgba(0, 0, 0, .6); background: #2a1014; }
.ch-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12); }
.ch-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 6, 10, .25), rgba(18, 6, 10, .9)); }
.ch-hero .in { position: relative; z-index: 2; padding: 28px clamp(18px, 4vw, 48px) 26px; }
.ch-hero small { font: 700 .82rem var(--font-head); letter-spacing: .24em; color: var(--gold-2); text-transform: uppercase; }
.ch-hero h1 { margin: 4px 0 4px; font-size: clamp(1.9rem, 5.2vw, 3.6rem); color: #f6e5b4; text-shadow: 0 3px 14px #000; }
.ch-hero .tagline { max-width: 60ch; color: var(--on-dark); font-size: 1.12rem; }
.ch-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); margin-top: 22px; align-items: start; }
.story { padding: clamp(22px, 4vw, 46px); }
.story h2 { font-size: 1.5rem; margin: 0 0 14px; }
.story h2::after { content: ""; display: block; width: 90px; height: 3px; background: var(--gold-grad); margin-top: 8px; }
.story p { font-size: 1.14rem; line-height: 1.78; margin: 0 0 1em; color: #2b1b10; text-align: justify; hyphens: auto; }
.story p.first::first-letter { float: left; font: 900 4.1rem/.82 var(--font-head); padding: 6px 10px 0 0; color: #8a1d28; }
.story .scene { font-style: italic; color: #4a3220; border-left: 3px solid #b79a62; padding-left: 16px; }
.story .quote { margin: 1.4em 0; padding: 14px 22px; background: rgba(122, 84, 30, .13); border-left: 5px solid #8a1d28; font: italic 500 1.25rem/1.55 var(--font-body); color: #3b2410; }
.story .quote cite { display: block; margin-top: 6px; font: 600 .82rem var(--font-head); font-style: normal; letter-spacing: .08em; color: var(--muted); }
/* Anlatı blokları: ▪ olay anlatımı, ◆ kaynağın yazdığı duygu ya da ruh hâli. İşaret sol boşlukta durur, metin akışını bozmaz. */
.story p.op, .story p.ic { position: relative; padding-left: 22px; }
.story p.op::before, .story p.ic::before { position: absolute; left: 0; top: .1em; font: 700 .95rem/1.78 var(--font-head); }
.story p.op::before { content: "▪"; color: #8a6a3a; }
.story p.ic::before { content: "◆"; color: #8a1d28; }
.story p.ic { color: #4a2a18; background: linear-gradient(90deg, rgba(138, 29, 40, .07), transparent 70%); padding-top: 4px; padding-bottom: 4px; }
.story-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 .8rem/1.6 var(--font-head) !important; letter-spacing: .04em; color: var(--muted) !important; text-align: left !important; margin: -4px 0 18px !important; }
.story-key .mk { font-style: normal; margin-right: 4px; }
.mk-p { color: #8a6a3a; } .mk-ic { color: #8a1d28; } .mk-qt { color: #8a1d28; font-weight: 900; }
/* Kaynak bağlantıları sade metindir: vurgu yapmaz, yer kaplamaz. */
.cites { display: inline; }
.cite { display: inline; color: #6a5034; font-size: inherit; text-decoration: underline dotted rgba(106, 80, 52, .6); text-underline-offset: 2px; }
.cite:hover, .cite:focus-visible { color: #8a1d28; text-decoration-style: solid; }
.cites .cite + .cite::before { content: " · "; display: inline; color: var(--muted); }
.cites-inline { color: var(--muted); font-size: inherit; }
/* Dipnot numarası: paragraf sonunda küçük üst simge. */
sup.fn { font: 600 .75rem/0 var(--font-body); margin-left: 2px; color: #6a5034; white-space: nowrap; }
sup.fn a { color: #6a5034; text-decoration: none; padding: 0 1px; }
sup.fn a:hover, sup.fn a:focus-visible { color: #8a1d28; text-decoration: underline; }
.story .quote cite sup.fn { font-size: .75rem; }
.fnotes { margin-top: 26px; padding-top: 12px; border-top: 1px solid rgba(122, 84, 30, .35); }
.fnotes h3 { font-size: 1rem; letter-spacing: .06em; margin: 0 0 8px; }
.fnotes ol { margin: 0; padding-left: 26px; columns: 2 220px; column-gap: 28px; font-size: .9rem; line-height: 1.6; }
.fnotes li { break-inside: avoid; color: var(--muted); }
.fnotes .cite { font-size: 1em; }
.story .note-lit { font-size: .86rem; color: var(--muted); border-top: 1px dashed #b79a62; padding-top: 10px; margin-top: 18px; }
.ch-side { display: grid; gap: 16px; }
.ch-side .sheet { padding: 20px 22px; }
.ch-side .side-h { margin: 0 0 10px; font-size: 1.1rem; letter-spacing: .06em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { padding: 8px 10px; border-left: 4px solid var(--fc, #8a1d28); background: rgba(255, 249, 229, .45); }
.facts b { display: block; font: 700 .76rem var(--font-head); letter-spacing: .08em; color: var(--muted); }
.facts span { display: block; line-height: 1.35; }
.facts .src { font-size: .78rem; color: var(--muted); }
.ch-map { height: 340px; border: 1px solid var(--gold-3); position: relative; }
.ch-nav { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 6px; flex-wrap: wrap; }
.mq { margin-top: 6px; }
.mq-item { margin-bottom: 14px; }
.mq h4, .mq-q { margin: 0 0 6px; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; }
.mq .opt { padding: 9px 12px; font-size: .98rem; }
.mq .reveal { margin-top: 8px; font-size: .95rem; }

@media (max-width: 960px) {
  .atlas-info, .bs-grid, .ch-grid { grid-template-columns: 1fr; }
    .th-head { max-width: 58%; }
}
@media (max-width: 640px) {
  .th-stage { aspect-ratio: auto; max-height: none; display: flex; flex-direction: column; }
  .th-view { position: relative; height: 54vh; min-height: 330px; flex: none; }
    .th-head { left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 6px 12px; }
  .th-head h2 { font-size: 1.05rem; }
  .th-cap { position: static; padding: 14px 16px 16px; background: #12060a; }
  .th-cap p { font-size: 1.02rem; min-height: 7em; }
  .bs-stage { aspect-ratio: auto; }
  .bs-cv { position: relative; aspect-ratio: 4 / 3; }
  .bs-cap { position: static; background: #12060a; padding: 12px 14px; }
  .amap-title { left: 12px; top: 12px; }
  .atlas-stage { height: 440px; }
  .amap-title small { display: none; }
  .amap-title { max-width: 46%; padding: 6px 10px; }
  .amap-title b { font-size: .86rem; }
  .amap-legend { display: none; }
  .atlas-ctl { grid-template-columns: 1fr; }
    .amap-zoom { right: 12px; top: 12px; }
  .amap-layers { right: 60px; top: 12px; }
  .amap-legend { max-width: 92%; bottom: 10px; font-size: .75rem; }
  .amap-compass, .amap-scale { display: none; }
    .bs-step { max-width: 52%; font-size: .78rem; }
  .story p { text-align: left; }
}
@media (max-width: 480px) { .amap-title { display: none; } }
/* Test sonu gözden geçirme */
.review { margin-top: 28px; border-top: 1px solid #b79a62; padding-top: 18px; }
.review h3 { margin: 0 0 12px; font-size: 1.2rem; }
.rv { padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 250, 232, .5); border-left: 3px solid #9c1f23; border-radius: 2px; }
.rv > b { display: block; font-size: 1.02rem; }
.rv-a { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0; font-weight: 700; font-size: .95rem; }
.rv-a .no { color: #9c1f23; text-decoration: line-through; text-decoration-thickness: 1px; }
.rv-a .yes { color: #2c5f43; }
.rv p { margin: 4px 0; font-size: .95rem; }

/* ——— Savaş sahnesi: muharebe akışı ve strateji ——— */
.bs-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: fl; }
.bs-flow li { position: relative; padding-left: 22px; }
.bs-flow li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: rgba(90, 61, 27, .25); }
.bs-flow li::after { content: ""; position: absolute; left: 1px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: #e9d8aa; border: 2px solid #8a6420; box-sizing: border-box; transition: background .3s, transform .3s; }
.bs-flow li.done::after { background: #8a6420; }
.bs-flow li.on::after { background: var(--red); border-color: var(--red); transform: scale(1.25); }
.bs-flow button { display: grid; gap: 1px; width: 100%; text-align: left; padding: 7px 8px; background: none; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer; font: inherit; }
.bs-flow button:hover, .bs-flow li.on button { background: rgba(138, 100, 32, .12); }
.bs-flow button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.bs-flow time { font: 700 .75rem var(--font-head); letter-spacing: .06em; color: #8a1d28; }
.bs-flow b { font: 700 .98rem var(--font-body); }
.bs-flow span { font: italic .86rem var(--font-body); color: #5a4430; }
.bs-side .strat p { margin: 0 0 10px; font-size: 1rem; line-height: 1.55; }

/* ——— Olay örgüsü zaman şeridi ——— */
.tlr-wrap { margin: 0 0 18px; }
.tlr-hint { margin: 0 0 6px; font: italic .9rem var(--font-body); color: #5a4430; }
.tlr-scroll { overflow-x: auto; padding-bottom: 6px; scrollbar-color: #8a6420 transparent; }
.tlr { position: relative; min-width: 1040px; height: 222px; border: 1px solid rgba(90, 61, 27, .35); border-radius: 6px; background: rgba(255, 248, 228, .45); }
.tlr-phase { position: absolute; top: 0; bottom: 0; border-right: 1px dashed rgba(90, 61, 27, .35); }
.tlr-phase.p1, .tlr-phase.p3 { background: rgba(138, 100, 32, .07); }
.tlr-area { position: absolute; top: 0; bottom: 0; left: 124px; right: 10px; }
.tlr-phase span { position: absolute; left: 6px; right: 4px; top: 8px; font: 700 .75rem var(--font-head); letter-spacing: .06em; color: #6a4a22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlr-year { position: absolute; bottom: 0; top: 30px; border-left: 1px solid rgba(90, 61, 27, .22); }
.tlr-year span { position: absolute; bottom: 4px; left: 4px; font: 700 .78rem var(--font-head); color: #6a4a22; }
.tlr-lane { position: absolute; left: 0; right: 0; height: 34px; border-top: 1px solid rgba(90, 61, 27, .1); }
.tlr-lane span { position: absolute; left: 8px; top: 9px; width: 110px; font: 700 .76rem var(--font-body); color: var(--lc); }
/* Süre çubuğu: görünen kalınlık 16 px, uzunluk tarihî süreyi gösterir; görünmez dolgu dokunma alanını en az 24x24 px yapar. */
.tlr-span { position: absolute; box-sizing: content-box; height: 16px; min-width: 10px; padding: 4px 7px; margin: -4px 0 0 -7px; border: 0; border-radius: 12px; background: var(--lc); background-clip: content-box; opacity: .32; cursor: pointer; transition: opacity var(--d-ui) var(--ease-out); }
/* Olay noktası: 24 px düğme, içinde 14 px görünen nokta */
.tlr-dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.tlr-dot::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid #fbf2d8; background: var(--lc); box-shadow: 0 1px 3px rgba(40, 20, 6, .45); transition: transform var(--d-ui) var(--ease-out); }
.tlr-span:hover, .tlr-span:focus-visible { opacity: .6; }
.tlr-dot:hover, .tlr-dot:focus-visible { z-index: 2; }
.tlr-dot:hover::before, .tlr-dot:focus-visible::before { transform: scale(1.45); }
.tlr-dot:focus-visible, .tlr-span:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tlr-tip { position: absolute; z-index: 3; width: 260px; padding: 5px 9px; background: #2a1810; color: #f3e5bb; font: 600 .82rem var(--font-body); border-radius: 4px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tlr-tip.on { opacity: 1; transform: none; }

/* ——— Hakkında / SSS ——— */
.prose { max-width: 75ch; margin-inline: auto; }
.prose h2 { margin: 28px 0 10px; font-size: 1.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { line-height: 1.65; }
.prose details { border-bottom: 1px solid rgba(90, 61, 27, .25); padding: 4px 0; }
.prose summary { cursor: pointer; padding: 10px 4px; min-height: 44px; display: flex; align-items: center; font: 700 1.05rem var(--font-body); }
.prose summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.prose details p { margin: 0 4px 12px; }


/* ——— Yükleme göstergeleri ——— */
.amap-load { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(42, 24, 14, .55); color: #f3e5bb; font: 700 .95rem var(--font-head); letter-spacing: .06em; transition: opacity .4s ease; pointer-events: none; }
.amap-stage:not(.loading) .amap-load { opacity: 0; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(243, 229, 187, .25); border-top-color: #e6c677; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
/* Sayfa ya da kutu içi yükleme: harita verisi inerken */
.page-load { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 220px; padding: 24px; color: var(--on-dark); font: 700 .95rem var(--font-head); letter-spacing: .06em; text-align: center; flex-wrap: wrap; }
.ch-map .page-load { min-height: 0; aspect-ratio: 4 / 3; background: rgba(42, 24, 14, .55); border-radius: 6px; }
.page-load.err { color: #f3c9a0; }
img.fade { opacity: 0; transition: opacity .5s ease; }
img.fade.ld { opacity: 1; }
.fcard .pic, .ch-hero { background: #3a2418; }

/* ——— Teşekkürler ——— */
.thanks-card { max-width: 720px; margin-inline: auto; }
.thanks-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.thanks-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(90, 61, 27, .3); border-radius: 8px; background: rgba(255, 248, 228, .5); }
.thanks-list li.ok b { color: #2c5f43; }
.thanks-list b { font-family: var(--font-head); }
.thanks-card h2 { margin: 22px 0 10px; font-size: 1.3rem; }

/* ——— Yasal sayfalar ——— */
.toc { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(90, 61, 27, .25); font: 700 .8rem var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.toc a { display: inline-flex; align-items: center; min-height: 32px; }
.prose h3 { margin: 18px 0 6px; font-size: 1.08rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0 0 .5em; }
.prose code { font: .88em ui-monospace, Consolas, monospace; background: rgba(122, 84, 30, .12); padding: 1px 5px; border-radius: 3px; }
.lead-box { background: rgba(122, 84, 30, .12); border-left: 4px solid var(--red); padding: 10px 16px; }
.steps li::marker { font-weight: 700; color: var(--red); }
.table-wrap { overflow-x: auto; margin: 10px 0 16px; border: 1px solid #b79a62; border-radius: 6px; background: rgba(255, 250, 232, .5); }
.table-wrap:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.prose.wide { max-width: 980px; }
/* Tablo masaüstünde sığar; dar ekranda kendi kutusunda yatay kaydırılır (sayfa taşmaz). */
.ltable { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.ltable th, .ltable td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(90, 61, 27, .2); }
.ltable thead th { font: 700 .78rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; background: rgba(122, 84, 30, .12); }
.ltable tbody th { font-weight: 700; }
.ltable tr:last-child > * { border-bottom: 0; }

/* ——— İletişim formu ——— */
.contact-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.cform .f-row { margin-bottom: 16px; }
.cform label { display: block; font-weight: 700; margin-bottom: 6px; }
.cform .field { max-width: none; border-radius: 6px; }
.cform textarea.field { resize: vertical; min-height: 160px; line-height: 1.5; }
.cform select.field { appearance: auto; }
.cform .field[aria-invalid="true"] { border-color: #9c1f23; box-shadow: 0 0 0 2px rgba(156, 31, 35, .25); }
.f-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.f-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--red); }
.f-check label { font-weight: 400; margin: 0; }
.f-check .f-err { grid-column: 2; }
.f-hint { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.f-hint .warn, #cfCount.warn { color: #9c1f23; font-weight: 700; }
.f-err { color: #9c1f23; font-weight: 700; font-size: .9rem; margin: 6px 0 0; min-height: 0; }
.f-err:empty { display: none; }
.f-err.ok { color: #2c5f43; }
.opt-l { font-weight: 400; color: var(--muted); }
.req { color: #9c1f23; }
.f-summary { border: 2px solid #9c1f23; background: rgba(156, 31, 35, .08); padding: 12px 16px; margin-bottom: 18px; border-radius: 6px; }
.f-summary:focus { outline: 3px solid rgba(156, 31, 35, .4); outline-offset: 2px; }
.f-summary ul { margin: 4px 0 0; padding-left: 1.2em; }
.f-status { min-height: 1.5em; margin: 10px 0 0; font-weight: 700; }
.f-status.err { color: #9c1f23; } .f-status.warn { color: #7a5718; }
/* Bal küpü alanı: görünmez, ekran okuyucuda da yok (aria-hidden), klavyeyle odaklanmaz */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Gönderiliyor durumu: düğmede dönen gösterge */
.spin.sm { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 243, 214, .35); border-top-color: #fff3d6; display: none; }
.btn.busy { cursor: progress; opacity: .85; }
.btn.busy .spin.sm { display: inline-block; }
.cinfo p { font-size: .98rem; }
.cinfo .side-h { font-size: 1.1rem; margin: 0 0 10px; }
.cinfo .side-h:not(:first-child) { margin-top: 20px; }

/* ——— İzin şeridi ——— */
.consent { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 85; width: min(760px, calc(100% - 24px)); transform: translateX(-50%); display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; padding: 14px 18px; color: var(--on-dark); background: linear-gradient(180deg, var(--mar-6), var(--mar-8)); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 18px 48px rgba(0, 0, 0, .65); animation: popIn var(--d-ui) var(--ease-out); }
.consent p { margin: 0; flex: 1 1 320px; font-size: .95rem; }
.consent-act { display: flex; gap: 8px; flex-wrap: wrap; }
.consent.out { opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s var(--ease-in), transform .2s var(--ease-in); }
.cns-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.cns-row input { width: 24px; height: 24px; accent-color: var(--red); }
.dlg-t { font-size: 1.4rem; padding-right: 46px; }

/* ——— Mobil sabit eylem çubuğu ——— */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(18, 6, 10, .9), rgba(18, 6, 10, .98)); border-top: 1px solid rgba(201, 162, 75, .45); box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); animation: mctaIn var(--d-ui) var(--ease-out); }
.mcta[hidden] { display: none; }
.mcta .btn { flex: 1; justify-content: center; min-height: 48px; padding: 10px 12px; text-align: center; }
.mcta .btn.ghost { flex: 0 0 auto; }
@keyframes mctaIn { from { transform: translateY(100%); } }
body.has-mcta .site-foot { padding-bottom: 150px; }
body.has-mcta .toast { bottom: 90px; }
body.has-mcta .consent { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ——— Altbilgi gezinmesi ——— */
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 12px; font: 600 .8rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 32px; }
.site-foot a { text-underline-offset: 3px; }

/* ——— Küçük yardımcılar (satır içi stil yerine) ——— */
.hero-cta.center { justify-content: center; }
.mt16 { margin-top: 16px; }
.svgdefs-in { position: absolute; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; background: none; }
  .ltable { min-width: 0; }
  .ltable thead { display: none; }
  .ltable, .ltable tbody, .ltable tr, .ltable th, .ltable td { display: block; width: 100%; }
  .ltable tr { margin-bottom: 12px; border: 1px solid #b79a62; border-radius: 6px; background: rgba(255, 250, 232, .55); }
  .ltable tbody th { background: rgba(122, 84, 30, .12); border-bottom: 1px solid rgba(90, 61, 27, .2); }
  .ltable td::before { content: attr(data-l); display: block; font: 700 .75rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .ltable tr:last-child > * { border-bottom: 1px solid rgba(90, 61, 27, .2); }
  .ltable tr > :last-child { border-bottom: 0; }
}

/* ——— Kaynaklar (#/kaynaklar, #/kaynak/<id>) ——— */
.src-rules { max-width: 860px; margin: 0 auto 22px; padding: 20px 26px; }
.src-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; line-height: 1.5; }
.src-rules .mk { font-style: normal; display: inline-block; width: 1.1em; text-align: center; }
.src-tabs .chip[aria-pressed="true"] { background: var(--gold-grad); color: #2a1406; border-color: #6d521b; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.src-card { display: flex; flex-direction: column; padding: 18px 20px 14px; }
.src-main { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink) !important; flex: 1; }
.src-main:hover .src-kisa, .src-main:focus-visible .src-kisa { color: #8a1d28; text-decoration: underline; text-underline-offset: 3px; }
.src-kind { font: 700 .72rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.src-kisa { font: 700 1.3rem/1.2 var(--font-head); }
.src-title { font-style: italic; line-height: 1.35; }
.src-by { font-size: .86rem; color: var(--muted); }
.src-sum { font-size: .92rem; line-height: 1.45; margin-top: 6px; }
.src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8rem; }
.src-count { font: 700 .8rem var(--font-head); color: #5a3d1c; }
.src-warn { color: #7a5718; }
.src-grid > * { min-width: 0; }
.src-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
.src-info, .src-used { padding: 22px 26px; }
.src-kunye { font-size: 1.02rem; line-height: 1.55; }
.src-grp { margin: 16px 0 6px; font-size: 1.05rem; }
.src-grp small { color: var(--muted); font-weight: 600; }
.src-items { margin: 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.45; }
.src-pages { font: 600 .74rem var(--font-head); color: var(--muted); overflow-wrap: anywhere; }
.src-items li { min-width: 0; }
.linklike { display: inline; white-space: normal; overflow-wrap: anywhere; background: none; border: 0; padding: 0; font: inherit; color: #7a1c26; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
@media (max-width: 860px) { .src-grid { grid-template-columns: 1fr; } }

/* ——— Bölüm yan sütunu ——— */
.ch-toolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid rgba(122, 84, 30, .45); border-radius: 6px; background: rgba(255, 249, 229, .55); color: var(--ink) !important; text-decoration: none; font: inherit; cursor: pointer; min-height: 52px; }
.tool:hover, .tool:focus-visible { border-color: #8a1d28; background: rgba(255, 249, 229, .85); }
.tool i { grid-row: 1 / 3; font-style: normal; font-size: 1.25rem; color: #8a1d28; }
.tool b { font: 700 .9rem/1.2 var(--font-head); letter-spacing: .03em; }
.tool small { font-size: .78rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ch-battles { margin-top: 10px; font-size: .9rem; line-height: 1.7; }
.ch-battles small { color: var(--muted); margin-right: 6px; }
.ch-battles .linklike { margin-right: 10px; }
.ch-fig { margin: 0 0 16px; }
.figbtn { display: block; width: 100%; padding: 0; border: 1px solid rgba(122, 84, 30, .5); background: #2b1b10; cursor: zoom-in; line-height: 0; }
.figbtn img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; filter: sepia(.08); }
.figbtn:hover img, .figbtn:focus-visible img { filter: none; }
.ch-fig figcaption { font-size: .9rem; line-height: 1.45; margin-top: 6px; }
.fig-note { display: block; font-size: .78rem; color: #7a5718; margin-top: 2px; }
.ch-nums ul, .ch-people ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-nums li { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid #8a1d28; }
.ch-nums b { font: 700 1.35rem/1.15 var(--font-head); color: #5a1a1f; }
.ch-nums span { font-size: .9rem; line-height: 1.4; }
.ch-people li { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px dashed rgba(122, 84, 30, .35); }
.ch-people li:last-child { border-bottom: 0; padding-bottom: 0; }
.ch-people b { font-size: .98rem; }
.ch-people span { font-size: .88rem; line-height: 1.4; color: #4a3220; }
.ch-tl ol { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid rgba(122, 84, 30, .45); display: grid; gap: 10px; }
.ch-tl li { position: relative; display: grid; gap: 1px; }
.ch-tl li::before { content: ""; position: absolute; left: -22px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--dotc, #8a1d28); box-shadow: 0 0 0 2px #ead9ad; }
.ch-tl .d { font: 600 .76rem var(--font-head); letter-spacing: .06em; color: var(--muted); }
.ch-tl .linklike { font-size: .95rem; line-height: 1.35; min-height: 24px; text-align: left; justify-self: start; }
dialog.ch-dlg.wide { max-width: min(1000px, 96vw); }
.ch-dlg .ch-map { height: min(62vh, 560px); }
.ch-figbig { margin: 0; }
.ch-figbig img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #2b1b10; }
.ch-figbig figcaption { margin-top: 8px; font-size: .95rem; }
@media (max-width: 420px) { .ch-toolgrid { grid-template-columns: 1fr; } }

/* ——— Savaş sahnesi: işaret açıklaması, hız ve ses ayarı ——— */
.bs-legend { list-style: none; margin: 8px 0 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; background: rgba(43, 16, 22, .88); border: 1px solid rgba(201, 162, 75, .35); color: var(--on-dark-2, #d8c79a); font: 600 .78rem var(--font-body); }
.bs-legend li { display: flex; align-items: center; gap: 7px; }
.bs-legend .lg { display: inline-block; width: 26px; height: 0; border-top: 3px solid; flex: none; }
.bs-legend .lg.tr { border-color: #e0525c; } .bs-legend .lg.gr { border-color: #5b8bd6; }
.bs-legend .lg.arrow { height: 9px; border: 0; background: linear-gradient(90deg, rgba(224, 82, 92, .8), rgba(224, 82, 92, .8)); clip-path: polygon(0 25%, 70% 25%, 70% 0, 100% 50%, 70% 100%, 70% 75%, 0 75%); }
.bs-legend .lg.trail { border-top-style: dotted; border-color: rgba(224, 82, 92, .7); }
.bs-legend .lg.guide { border-top-style: dashed; border-width: 2px; border-color: #d8c79a; }
.bs-legend .lg.chip { height: 12px; border: 1px solid #e0525c; background: #f6eac6; }
.bs-ctl .row.opts { gap: 22px; }
.bs-opt { display: flex; align-items: center; gap: 8px; color: var(--gold-2); font: 700 .8rem var(--font-head); letter-spacing: .04em; }
.bs-opt select { background: #1d0a0e; color: var(--gold-2); border: 1px solid var(--gold-3); padding: 4px 8px; font: inherit; }
.bs-opt input[type="range"] { flex: none; width: 150px; min-width: 0; }
.bs-opt output { min-width: 3.2em; color: var(--on-dark); font: 600 .8rem var(--font-body); }
@media (max-width: 640px) { .bs-opt input[type="range"] { width: 110px; } .bs-ctl .row.opts { gap: 12px; } }

/* ——— Atlas: işaret kutusu ——— */
.amap-pop { position: absolute; z-index: 7; width: min(292px, calc(100% - 16px)); padding: 12px 16px 14px 14px; background: #f6ebc8; color: #2b1b10; border: 1px solid var(--pc, #8a1d28); border-left: 5px solid var(--pc, #8a1d28); box-shadow: 0 12px 30px rgba(20, 8, 2, .5); font: 400 .92rem/1.45 var(--font-body); }
.amap-pop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.amap-pop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -8px; width: 13px; height: 13px; margin-left: -7px; background: #f6ebc8; border: solid var(--pc, #8a1d28); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.amap-pop.below::after { bottom: auto; top: -8px; border-width: 1px 0 0 1px; }
.amap-pop.away { visibility: hidden; }
.amap-pop .pm { margin: 0 22px 3px 0; color: var(--pc, #8a1d28); font: 700 .74rem var(--font-head); letter-spacing: .05em; }
.amap-pop h3 { margin: 0 22px 6px 0; font: 700 1.02rem/1.25 var(--font-head); color: #24120a; }
.amap-pop p { margin: 0 0 8px; }
.amap-pop .srcline { margin: 4px 0 0; font-size: .8rem; }
.amap-pop .pa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.amap-pop-x { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; background: none; color: #5a3d1b; font: 400 1.5rem/1 var(--font-body); cursor: pointer; border-radius: 50%; }
.amap-pop-x:hover { background: rgba(90, 61, 27, .14); }
@media (prefers-reduced-motion: no-preference) { .amap-pop { animation: popIn .16s var(--ease-out, ease-out); } @keyframes popIn { from { opacity: 0; transform: translateY(4px) scale(.97); } } }

/* ——— Canlandırma: altyazı düğmesi, tam ekran, mobil ——— */
.th-tools { position: absolute; right: 12px; top: 12px; z-index: 7; display: flex; gap: 8px; }
.th-tool { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(18, 6, 10, .85); color: var(--gold-2); font: 700 .86rem var(--font-head); letter-spacing: .06em; cursor: pointer; }
.th-tool:hover { background: rgba(77, 27, 38, .95); }
.th-tool:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.th-tool.off { opacity: .6; text-decoration: line-through; }
.th-stage.nocap .th-cap { display: none; }
.th-head { max-width: min(46%, 560px); }
.th-cap p { min-height: 0; max-height: 36vh; overflow-y: auto; }
.th-shell.th-full { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #12060a; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.th-shell.th-full .th-stage { flex: 1 1 auto; min-height: 0; max-height: none; aspect-ratio: auto; border: 0; box-shadow: none; }
.th-shell.th-full .th-bar, .th-shell.th-full .th-ctl { flex: none; }
.th-shell.th-full .th-ctl { margin: 0; padding: 8px 12px; border-radius: 0; }
html.th-noscroll { overflow: hidden; }
@media (max-width: 640px) {
  .th-head { max-width: calc(100% - 130px); }
  .th-cap p { max-height: none; min-height: 6em; }
  .th-shell.th-full .th-view { flex: 1 1 auto; height: auto; min-height: 0; }
  .th-shell.th-full .th-cap { max-height: 38vh; overflow-y: auto; }
  .th-shell.th-full .th-dots { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .th-shell.th-full .th-dots, .th-shell.th-full .th-head small { display: none; }
  .th-shell.th-full .th-cap { padding: 26px 22px 8px; }
  .th-shell.th-full .th-cap p { font-size: .98rem; max-height: 30vh; }
  .th-shell.th-full .th-cap .tag { display: none; }
}