/* Ana sayfa */
/* ---------- WebGL tuvali ve yedek ---------- */
/* Önceden pişirilmiş açılış karesi: ilk boyamada görünür; WebGL ilk gerçek kareyi çizince üstüne yumuşakça gelir */
.harita-zemin { position: fixed; inset: 0; z-index: 0; background: #0d0a0a; transition: opacity .6s; pointer-events: none; }
.harita-zemin picture, .harita-zemin img { display: block; width: 100%; height: 100%; }
.harita-zemin img { object-fit: cover; object-position: 50% 50%; }
html.gl-tam .harita-zemin { visibility: hidden; }
.harita-zemin.gizle { opacity: 0; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: transparent; opacity: 0; transition: opacity .8s var(--e-yumusak); }
#gl.gl-hazir { opacity: 1; }
#gl.gl-hazir.gizle { opacity: 0; }
html.no-webgl #gl { display: none; }
.yedek { position: fixed; inset: 0; z-index: 0; display: none; background: radial-gradient(120% 80% at 50% 30%, #3a2622 0%, #120d0c 70%); }
html.no-webgl .yedek { display: block; }
.yedek .svg-harita { position: absolute; inset: -6% -4% -14% -4%; width: 108%; height: 120%; transform: perspective(1800px) rotateX(24deg); transform-origin: 50% 40%; transition: filter .8s; --k: 1; }
@media (max-width: 900px) { .yedek .svg-harita { inset: 0; width: 100%; height: 100%; transform: none; } }
.yedek .sh-kara, .yedek .sh-gol, .yedek .sh-sinir, .yedek .sh-rota, .yedek .sh-nokta { vector-effect: non-scaling-stroke; }
.yedek .sh-rota { stroke-width: 3; }
.yedek .sh-nokta { r: calc(4px * var(--k)); stroke-width: 1.5; }
.yedek.yedek--giris .svg-harita { filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) brightness(.62) saturate(.9); }
.yedek .sh-yer text { font: 600 calc(7px * var(--k)) var(--f-etiket); letter-spacing: .08em; fill: var(--murekkep); paint-order: stroke; stroke: rgba(239,230,212,.9); stroke-width: calc(2.2px * var(--k)); opacity: 0; transition: opacity .5s; }
.yedek .sh-yer .sh-nokta { opacity: .45; transition: opacity .5s; }
.yedek .sh-yer.on text, .yedek .sh-yer.on .sh-nokta { opacity: 1; }
.yedek.gizle { opacity: 0; }
/* SVG harita (yedek ve küçük haritalar) */
.svg-harita .sh-deniz { fill: #1c2741; }
.svg-harita .sh-kara { fill: #d9c49d; stroke: #3a2318; stroke-width: .8; stroke-linejoin: round; }
.svg-harita .sh-gol { fill: #2a3a58; stroke: #3a2318; stroke-width: .5; }
.svg-harita .sh-sinir { fill: none; stroke: #6b4434; stroke-width: .6; stroke-dasharray: 3 2.5; opacity: .55; }
.svg-harita .sh-rota { fill: none; stroke: var(--kok); stroke-width: 3; stroke-linecap: round; }
.svg-harita .sh-rota--surgun { stroke: #e8edf6; stroke-dasharray: 8 6; }
.svg-harita .sh-nokta { fill: var(--zerdecal-acik); stroke: var(--kok-koyu); stroke-width: 1.5; }
/* ---------- İlerleme çizgisi (harita hazırlanırken girişin dibinde 2 px) ---------- */
.yukleme { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(239,230,212,.10); opacity: 0; transition: opacity .5s; pointer-events: none; z-index: 2; }
.yukleme i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--zerdecal) 0 10px, var(--kok) 10px 14px); transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s var(--e-cikis); }
.yukleme.calisiyor { opacity: 1; }
.yukleme.bitti { opacity: 0; transition-delay: .35s; }
/* ---------- Giriş ---------- */
.giris { position: relative; z-index: 2; min-height: 100svh; color: var(--kece); display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--ust-h) + 18px); pointer-events: none; }
.giris a, .giris button { pointer-events: auto; }
.giris::after { content: ''; position: absolute; inset: auto 0 0 0; height: 32vh; background: linear-gradient(to top, rgba(13,10,10,.62), transparent); pointer-events: none; z-index: -1; }
.giris-ic { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, 380px); grid-template-rows: auto auto; column-gap: 40px; align-items: start; }
.giris-ust { grid-column: 1 / -1; margin: 0 0 6px; color: var(--zerdecal-acik); }
.giris-baslik { grid-column: 1; grid-row: 2; margin: 0; font: 400 clamp(92px, 15.2vw, 280px)/.8 var(--f-baslik); letter-spacing: -.02em; }
.gb-satir { display: block; overflow: hidden; padding: .06em 0 .1em; margin-bottom: -.12em; }
.gb-satir--2 { padding-left: 1.05em; }
.gb-ic { display: inline-block; }
html.js:not(.rm) .gb-ic { animation: gbYuksel .6s var(--e-cikis) both; }
html.js:not(.rm) .gb-satir--2 .gb-ic { animation-delay: .06s; }
@keyframes gbYuksel { from { transform: translateY(102%); } to { transform: none; } }
.giris-alt { grid-column: 2; grid-row: 2; align-self: center; display: grid; gap: 22px; padding-top: 1.2vw; }
.giris-alt { position: relative; text-shadow: 0 1px 14px rgba(15, 9, 8, .55); }
.giris-alt::before { content: ''; position: absolute; inset: -70px -80px -60px -90px; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, rgba(13,10,10,.5), rgba(13,10,10,.3) 55%, rgba(13,10,10,0)); }
.giris-tanim { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(239,230,212,.82); max-width: 34ch; }
.giris-tanim b { font-weight: 600; color: var(--kece); }
.giris-soz { margin: 0; }
.giris-soz p { margin: 0; font: 400 clamp(21px, 1.75vw, 29px)/1.14 var(--f-baslik); color: var(--kece); }
.giris-soz cite { display: block; margin-top: 10px; font: 600 10px/1.3 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--zerdecal-acik); }
.giris-soz cite a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240,196,106,.5); }
.giris-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
.giris-dip { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 30px; color: rgba(239,230,212,.85); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.kaydir { display: inline-flex; align-items: center; gap: 12px; }
.kaydir i { width: 9px; height: 34px; position: relative; overflow: hidden; display: inline-block; }
.kaydir i::before { content: ''; position: absolute; left: 3px; top: -10px; width: 3px; height: 10px; background: var(--zerdecal); animation: damla 1.8s var(--e-yumusak) infinite; box-shadow: -3px 10px 0 var(--zerdecal), 3px 10px 0 var(--zerdecal); }
@keyframes damla { to { transform: translateY(44px); } }
html.js:not(.rm) .giris-ust, html.js:not(.rm) .giris-alt > *, html.js:not(.rm) .giris-dip > * { animation: girisBelir .5s ease-out both; }
html.js:not(.rm) .giris-alt > :nth-child(1) { animation-delay: .08s; }
html.js:not(.rm) .giris-alt > :nth-child(2) { animation-delay: .12s; }
html.js:not(.rm) .giris-alt > :nth-child(3) { animation-delay: .16s; }
@keyframes girisBelir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.giris-yerler a { transition: color .3s; }
.giris-yerler a:hover { color: var(--zerdecal-acik); }
/* ---------- Göç: yedi durak normal akan kartlar (yapışkan sahne yok, kaydırma ele geçirilmez) ---------- */
/* Masaüstü: kartlar sol sütunda akar, arkada sabit harita (WebGL ya da pişirilmiş kare). Telefon: kartın başında durağın kendi haritası. */
.goc { position: relative; z-index: 2; padding: 22vh 0 34vh; pointer-events: none; }
.goc a, .goc button, .goc .gb { pointer-events: auto; }
.harita-katman { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .4s; }
.harita-katman.gizle { opacity: 0; visibility: hidden; }
.yer-et { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 6px; transform: translate3d(-200px, -200px, 0); white-space: nowrap;
font: 600 9.5px/1 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--murekkep);
background: rgba(239, 230, 212, .9); box-shadow: 0 6px 18px rgba(20, 10, 8, .18); opacity: 0; transition: opacity .45s, background .3s, color .3s; will-change: transform; }
.yer-et::before { content: ''; width: 9px; height: 9px; flex: none; background: var(--kok); clip-path: polygon(50% 0, 66% 17%, 83% 33%, 100% 50%, 83% 67%, 66% 83%, 50% 100%, 34% 83%, 17% 67%, 0 50%, 17% 33%, 34% 17%); }
.yer-et b { font: 400 13px/1 var(--f-baslik); letter-spacing: 0; text-transform: none; color: var(--kok); }
.yer-et.on { opacity: 1; }
.yer-et.yari { opacity: .55; }
.yer-et:focus-visible { background: var(--murekkep); color: var(--kece); opacity: 1; z-index: 3; }
@media (hover: hover) { .yer-et:hover { background: var(--murekkep); color: var(--kece); opacity: 1; z-index: 3; } .yer-et:hover b { color: var(--zerdecal-acik); } }
.yer-et.disi { background: rgba(232,237,246,.92); }
.yer-et.disi::after { content: ''; width: 12px; height: 8px; background: currentColor; clip-path: polygon(0 40%, 60% 40%, 60% 0, 100% 50%, 60% 100%, 60% 60%, 0 60%); transform: rotate(-35deg); }
.goc-akis { display: grid; gap: 30vh; justify-items: start; }
.gb { position: relative; width: min(450px, 36vw); background: var(--kece); color: var(--murekkep); padding: 30px 30px 24px; box-shadow: 0 30px 80px rgba(10, 6, 5, .45); scroll-margin-top: calc(var(--ust-h) + 16px); transition: opacity .5s, transform .6s var(--e-cikis); }
.gb::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background:
repeating-linear-gradient(90deg, var(--kok) 0 10px, var(--zerdecal) 10px 14px, var(--kok) 14px 24px, var(--civit) 24px 28px); }
.gb::after { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
html.js .goc-sayfa .gb:not(.aktif) { opacity: .7; }
.gb-harita { display: none; margin: 0; }
.gb-sira { display: flex; gap: 10px; margin: 0 0 8px; color: var(--kok); }
.gb-sira span { color: var(--soluk); }
.gb .gb-yil { font: 800 clamp(46px, 5vw, 82px)/.9 var(--f-etiket); letter-spacing: -.035em; margin: 0 0 8px; color: var(--murekkep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb .gb-yil--k { font-size: clamp(38px, 4vw, 64px); }
.gb h3 { font: 400 clamp(26px, 2.3vw, 36px)/1.05 var(--f-baslik); margin: 0 0 12px; color: var(--kok); }
.gb p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; }
.gb .gb-not { font-size: 12.5px; color: var(--soluk); font-style: italic; }
.gb blockquote { margin: 14px 0 12px; padding: 12px 0 0 16px; border-left: 3px solid var(--kok); font: 400 19px/1.25 var(--f-baslik); }
.gb blockquote cite { display: block; margin-top: 8px; font: 500 11.5px/1.4 var(--f-govde); font-style: normal; color: var(--soluk); }
.gb .gb-kaynak { font: 600 9px/1.5 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); margin: 0 !important; }
.gb-kaynak a { color: var(--kok); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(163,40,28,.35); }
.gb-alt { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.gb-alt .gb-kaynak { flex: 1 1 100%; }
.gb-bag { font: 600 9px/1 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--kok); display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; }
.gb-bag::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.gb-bag.kopyalandi { color: var(--yosun); }
.goc-dizin { display: none; }
/* durak rayı: masaüstünde göç bölümünde ekranın altında sabit; bir durağa tıklayınca o karta gider */
.goc-ray { position: fixed; left: calc(var(--kenar) + min(450px, 36vw) + 36px); right: var(--kenar); bottom: 22px; list-style: none; margin: 0; padding: 6px 10px; display: flex; justify-content: space-between; gap: 0; z-index: 3; background: rgba(18, 13, 11, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .5s var(--e-cikis), visibility 0s .4s; }
body.goc-icinde .goc-ray { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .5s var(--e-cikis), visibility 0s; }
.goc-ray::before { content: ''; position: absolute; left: 24px; right: 24px; top: 21px; height: 2px; background: repeating-linear-gradient(90deg, rgba(239,230,212,.35) 0 4px, transparent 4px 8px); pointer-events: none; }
.goc-ray li { display: block; position: relative; }
.goc-ray a { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; padding: 8px 6px 6px; color: rgba(239,230,212,.66); font: 600 10px/1 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; transition: color .3s; white-space: nowrap; }
.goc-ray a i { width: 12px; height: 12px; flex: none; border: 2px solid currentColor; background: #1a1210; transform: rotate(45deg) scale(.7); transition: transform .4s var(--e-cikis), background .3s; }
.goc-ray a[aria-current] { color: var(--kece); }
.ray-kisa { display: none; }
.goc-ray a[aria-current] i { background: var(--zerdecal); border-color: var(--zerdecal); transform: rotate(45deg) scale(1.05); }
@media (hover: hover) { .goc-ray a:hover { color: var(--zerdecal-acik); } }
.goc-ipucu { position: fixed; right: var(--kenar); top: calc(var(--ust-h) + 14px); margin: 0; padding: 7px 10px 6px; color: rgba(239,230,212,.86); background: rgba(18,13,11,.62); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; z-index: 3; }
body.goc-icinde .goc-ipucu { opacity: 1; visibility: visible; transition: opacity .5s; }
html.no-webgl .goc-ipucu { display: none; }
/* telefon, dokunmatik tablet ve dar pencere: canlı harita yok; zemin karesi açılışla birlikte akar, kartlar düz okunur */
@media (max-width: 900px), (pointer: coarse) {
.harita-zemin { position: absolute; height: 100vh; height: 100svh; }
#gl, .harita-katman, .yedek { display: none !important; }
.goc { background: var(--murekkep); padding: 34px 0 56px; pointer-events: auto; }
.goc::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background: repeating-linear-gradient(90deg, var(--kok) 0 10px, var(--zerdecal) 10px 14px, var(--kok) 14px 24px, var(--civit) 24px 28px); }
.goc-dizin { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 22px; }
.goc-dizin a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 11px 8px; border: 1px solid rgba(239,230,212,.24); color: var(--kece); font: 600 10px/1 var(--f-etiket); letter-spacing: .1em; text-transform: uppercase; }
.goc-dizin a span { display: none; }
.goc-akis { gap: 22px; justify-items: stretch; }
.gb { width: auto; padding: 0 0 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35); scroll-margin-top: calc(var(--ust-h) + 8px); }
html.js .goc-sayfa .gb:not(.aktif) { opacity: 1; }
.gb::before { z-index: 1; }
.gb-harita { display: block; position: relative; aspect-ratio: 3 / 2; background: #1a1210; overflow: hidden; margin: 0 0 16px; }
.gb-harita img { width: 100%; height: 100%; object-fit: cover; }
.gb > :not(.gb-harita) { margin-left: 18px; margin-right: 18px; }
.gb .gb-yil { font-size: 44px; margin-bottom: 6px; }
.gb .gb-yil--k { font-size: 34px; }
.gb h3 { font-size: 25px; margin-bottom: 10px; }
.gb p { font-size: 15.5px; line-height: 1.6; }
.goc-ray, .goc-ipucu { display: none; }
.goc-son { padding-top: 64px; }
}
html.pisir #gl, html.pisir .harita-katman { display: block !important; }
/* ---------- Ana sayfa açılışı: amblem, başlık, kısa tanım, iki düğme ---------- */
.giris--ana .giris-ic { flex: 1; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: auto; align-items: center; align-content: center; column-gap: clamp(28px, 5vw, 90px); padding-bottom: 2vh; }
.giris--ana .giris-sol { grid-column: 1; grid-row: 1; display: grid; gap: 20px; justify-items: start; position: relative; text-shadow: 0 1px 14px rgba(15, 9, 8, .55); }
.giris--ana .giris-sol::before { content: ''; position: absolute; inset: -60px -80px -50px -90px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(13,10,10,.42), rgba(13,10,10,.2) 55%, rgba(13,10,10,0)); }
.giris--ana .giris-ust { margin: 0; }
.giris--ana .giris-baslik { font-size: clamp(88px, 12vw, 224px); }
.giris--ana .giris-tanim { max-width: 40ch; font-size: 16px; }
.giris-amblem { grid-column: 2; grid-row: 1; margin: 0; width: min(100%, 540px); justify-self: center; color: var(--kece); filter: drop-shadow(0 18px 36px rgba(0,0,0,.5)); }
.amblem-ciz { display: block; width: 100%; height: auto; overflow: visible; }
.amblem-ciz path { fill: currentColor; }
/* ince çizgi çizilme: her parça önce çizgisiyle çizilir, sonra dolar (yukarıdan aşağı sırayla) */
html.js:not(.rm) .amblem-ciz path { fill-opacity: 0; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
animation: amblemCiz 1.4s cubic-bezier(.45, .05, .3, 1) calc(.15s + var(--g) * .8s) forwards, amblemDol .7s ease-out calc(1.05s + var(--g) * .8s) forwards; }
@keyframes amblemCiz { to { stroke-dashoffset: 0; } }
@keyframes amblemDol { to { fill-opacity: 1; stroke-opacity: 0; } }
html.js:not(.rm) .giris--ana .giris-sol > *:not(.giris-baslik) { animation: girisBelir .5s ease-out both; }
html.js:not(.rm) .giris--ana .giris-tanim { animation-delay: .1s; }
html.js:not(.rm) .giris--ana .giris-dugmeler { animation-delay: .16s; }
.giris--ana .giris-dip { justify-content: flex-end; }
/* ---------- Ad: kara papak = siyah kalpak ---------- */
.ad { position: relative; z-index: 3; background: var(--kece); padding: 96px 0 90px; }
/* ekran dışındaki bölümlerin yerleşimi ilk boyamada ertelenir (telefonda açılışta 50 ms üstü görev olmasın); yükseklik tahmini kaydırma çubuğu için */
.ad { content-visibility: auto; contain-intrinsic-size: auto 860px; }
@media (max-width: 900px) { .ad { contain-intrinsic-size: auto 1110px; } }
.ad::before { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.ad-ic { position: relative; display: grid; grid-template-columns: minmax(150px, 290px) minmax(0, 1fr); gap: clamp(28px, 7vw, 120px); align-items: center; }
.ad-figur { margin: 0; color: var(--murekkep); --pk-oyma: var(--kece); --pk-vurgu: var(--zerdecal); }
.ad-figur svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.ad-figur figcaption { margin-top: 14px; color: var(--soluk); text-align: center; }
.ad-metin { display: grid; gap: 20px; justify-items: start; max-width: 62ch; }
.ad-metin > .etiket:first-child { color: var(--kok); margin: 0; }
.ad-metin .baslik-b { margin: 0; }
.ad-metin .giris-metni { margin: 0; color: var(--murekkep-2); }
.ad-soz { margin: 0; padding-left: 18px; border-left: 3px solid var(--kok); }
.ad-soz p { margin: 0; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--f-baslik); }
.ad-soz cite { display: block; margin-top: 10px; font: 600 10px/1.3 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--kok); }
.ad-soz cite a { text-decoration: underline; text-underline-offset: 3px; }
.ad-yerler { margin: 0; color: var(--soluk); line-height: 2; }
.ad-yerler a { color: var(--kok); }
@media (hover: hover) { .ad-yerler a:hover { text-decoration: underline; } }
/* ---------- Yurtlar ---------- */
.yurtlar, .kultur, .kahraman, .tarih, .dernek { position: relative; z-index: 3; }
.yurtlar { background: var(--kece); padding-bottom: 90px; }
.yurtlar::before, .kahraman::before, .dernek::before { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.serit--ust { position: relative; height: 16px; color: var(--kok); }
.yurt-bas { padding-top: 110px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 60px; align-items: end; }
.yurt-bas .etiket { grid-column: 1 / -1; color: var(--kok); }
.no { color: var(--soluk); margin-right: 8px; }
.yurt-giris { margin: 0; max-width: 44ch; }
.yurt-sayilar { grid-column: 1 / -1; display: flex; gap: clamp(24px, 5vw, 80px); margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(23,17,14,.15); }
.yurt-sayilar div { display: grid; gap: 6px; }
.yurt-sayilar dt { color: var(--soluk); order: 2; }
.yurt-sayilar dd { margin: 0; font: 800 clamp(40px, 4.6vw, 72px)/.9 var(--f-etiket); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yurt-izgara { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 60px; margin-top: 56px; align-items: start; }
.yurt-alt { margin: 36px 0 8px; color: var(--kok); }
.yurt-alt:first-child { margin-top: 0; }
.yurt-ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(23,17,14,.18); }
.yr { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 18px; align-items: center; gap: 18px; padding: 13px 4px 12px; border-bottom: 1px solid rgba(23,17,14,.12); isolation: isolate; transition: color .35s, padding .45s var(--e-cikis); }
.yr::before { content: ''; position: absolute; inset: 0; background: var(--murekkep); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--e-cikis); z-index: -1; }
.yr:focus-visible { color: var(--kece); padding-left: 16px; padding-right: 12px; }
.yr:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) {
.yr:hover { color: var(--kece); padding-left: 16px; padding-right: 12px; }
.yr:hover::before { transform: scaleY(1); }
}
.yr-ad { font: 400 clamp(24px, 2.2vw, 34px)/1 var(--f-baslik); }
.yr-ad small { display: block; font: 500 12.5px/1.3 var(--f-govde); color: var(--soluk); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr:hover .yr-ad small { color: var(--zerdecal); }
.yr-cetele { height: 12px; display: block; background: repeating-linear-gradient(90deg, var(--kok) 0 4px, transparent 4px 7px); width: calc(var(--n) * 7px); max-width: 100%; clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%); transition: clip-path .5s var(--e-cikis); }
.yr:hover .yr-cetele { background: repeating-linear-gradient(90deg, var(--zerdecal) 0 4px, transparent 4px 7px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.yr-cetele.cok { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.yr-sayi { font: 600 11px/1 var(--f-etiket); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yr-sayi.bos { color: var(--soluk); }
.yr-ok { width: 14px; height: 10px; }
.yurt-harita { position: sticky; top: calc(var(--ust-h) + 30px); }
.yh-ic { position: relative; aspect-ratio: 2 / 1.25; background: var(--civit); overflow: hidden; box-shadow: inset 0 0 0 6px var(--kece), inset 0 0 0 8px var(--kok); }
.yh-ic .svg-harita { position: absolute; inset: 0; width: 100%; height: 100%; }
.yh-ic .sh-nokta { fill: var(--zerdecal); stroke: var(--murekkep); stroke-width: 1; transition: r .4s var(--e-cikis); }
.yh-ic .sh-nokta.secili { fill: var(--kok); }
.yh-ic .sh-halka { fill: none; stroke: var(--kok); stroke-width: 2; opacity: 0; }
.yh-bilgi { padding: 18px 2px 0; min-height: 120px; }
.yh-ad { color: var(--kok); margin: 0 0 8px; }
.yh-koyler { margin: 0; font-size: 14px; line-height: 1.6; color: var(--murekkep-2); }
.yurt-not { margin: 40px auto 0; font-size: 14px; max-width: none; }
/* ---------- Kültür (yatay) ---------- */
.kultur { background: var(--civit); color: var(--kece); --zemin: var(--civit); }
.kultur::before { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: soft-light; opacity: .7; pointer-events: none; }
.kultur-iz { position: relative; display: block; }
.kultur-serit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--kenar) 70px; }
.kp { position: relative; padding: 46px 40px 44px 0; margin-right: 34px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(239,230,212,.14); }
.kp p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(239,230,212,.86); }
.kp b { color: var(--kece); font-weight: 600; }
.kp .baslik-o { color: var(--kece); font: 400 clamp(30px, 3vw, 48px)/1.02 var(--f-baslik); }
.kp:not(.kp--bas):not(.kp--son)::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 14px; opacity: .55;
background: url("data:image/svg+xml;utf8,") repeat-y center top / 14px 28px; }
.kp-ust { display: flex; justify-content: space-between; align-items: center; color: var(--zerdecal); }
.kp-motif { width: 44px; height: 44px; display: block; }
.kp-lead { font: 400 21px/1.3 var(--f-baslik) !important; color: var(--kece) !important; }
.kp--bas { grid-column: 1 / -1; justify-content: center; padding: calc(var(--ust-h) + 50px) 0 40px; margin-right: 0; border-top: 0; max-width: 760px; }
.kp--bas .etiket { color: var(--zerdecal); }
.kp--bas .giris-metni { color: rgba(239,230,212,.8); max-width: 34ch; }
.kp-bas-motif { width: 110px; margin-top: 18px; }
.kp-ipucu { color: rgba(239,230,212,.55); margin-top: 18px; }
.kp-foto { margin: 4px 0 0; }
.kp-foto img { width: 100%; height: auto; }
.kp-foto--k { width: 200px; }
.kp-foto figcaption { color: rgba(239,230,212,.6); }
.kp-liste { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-liste li { font: 600 9.5px/1 var(--f-etiket); letter-spacing: .12em; text-transform: uppercase; padding: 7px 9px; border: 1px solid rgba(239,230,212,.25); }
.kp-liste li:first-child { background: var(--zerdecal); color: var(--murekkep); border-color: var(--zerdecal); }
.kiyafet-sec { display: grid; grid-template-columns: 1fr 1fr 84px; gap: 14px; align-items: start; }
.kp-figur { grid-column: 3; grid-row: 1; margin: 0; color: var(--kece); --pk-oyma: var(--civit); --pk-vurgu: var(--zerdecal); }
.kp-figur svg { display: block; width: 100%; height: auto; }
.kp-figur [data-parca] { transition: color .3s; }
.kp-figur[data-sec="papak"] [data-parca="papak"], .kp-figur[data-sec="cuha"] [data-parca="cuha"], .kp-figur[data-sec="civeki"] [data-parca="civeki"] { color: var(--zerdecal); }
.kp-figur[data-sec="vezinlik"] [data-parca="vezinlik"], .kp-figur[data-sec="kemer"] [data-parca="kemer"], .kp-figur[data-sec="yele-atki"] [data-parca="yele-atki"] { --pk-oyma: var(--zerdecal-acik); --pk-vurgu: var(--kok); }
.kiyafet-sec .etiket { color: var(--zerdecal); margin-bottom: 8px; }
.kp-terim { display: block; font: 400 19px/1.2 var(--f-baslik); padding: 4px 0; color: rgba(239,230,212,.8); text-align: left; transition: color .25s, transform .35s var(--e-cikis); }
.kp-terim:focus-visible, .kp-terim.secili { color: var(--zerdecal-acik); transform: translateX(6px); }
@media (hover: hover) { .kp-terim:hover { color: var(--zerdecal-acik); transform: translateX(6px); } }
.kp-tanim { min-height: 4.8em; font-size: 14.5px !important; border-top: 1px dashed rgba(239,230,212,.25); padding-top: 10px; }
.kp-soz { margin: 0; font: 400 clamp(30px, 2.6vw, 40px)/1.05 var(--f-baslik); color: var(--zerdecal-acik); }
.kp-soz-kim { color: rgba(239,230,212,.6); }
.saz { height: 70px; margin: 2px -40px; }
.saz svg { width: 100%; height: 100%; overflow: visible; }
.saz .tel { fill: none; stroke: rgba(240,196,106,.7); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kp-foto-cift { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: end; }
.kp-foto-cift img { width: 100%; height: auto; }
.kp-foto-cift figcaption { color: rgba(239,230,212,.6); font-size: 11.5px; }
.sozluk { position: relative; margin-top: 10px; padding: 34px 26px; background: var(--kece); color: var(--murekkep); min-height: 210px; display: grid; align-content: center; gap: 10px; perspective: 800px; }
.sozluk::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(163,40,28,.35); pointer-events: none; }
.sz-kelime { font: 400 clamp(46px, 4.4vw, 68px)/1 var(--f-baslik) !important; color: var(--kok) !important; }
.sz-anlam { font: 500 17px/1.4 var(--f-govde) !important; color: var(--murekkep) !important; }
.sz-dugme { align-self: flex-start; margin-top: 6px; }
.sz-sayac { color: rgba(239,230,212,.55); }
.fikra { display: grid; gap: 10px; }
.fikra-ses { font: 400 22px/1.2 var(--f-baslik) !important; color: var(--zerdecal-acik) !important; }
.dugun { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; counter-reset: d; }
.dugun li { position: relative; display: grid; gap: 3px; padding: 10px 0 10px 34px; border-bottom: 1px solid rgba(239,230,212,.12); counter-increment: d; }
.dugun li::before { content: counter(d); position: absolute; left: 0; top: 11px; width: 22px; height: 22px; display: grid; place-items: center; font: 700 10px/1 var(--f-etiket); background: var(--kok); color: var(--kece); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dugun b { font: 400 19px/1.1 var(--f-baslik); }
.dugun span { font-size: 13.5px; line-height: 1.5; color: rgba(239,230,212,.78); }
.kp--son { grid-column: 1 / -1; justify-content: center; margin-right: 0; }
.kp-son-ic { display: grid; gap: 18px; justify-items: start; }
.kp-son-ic .etiket { color: var(--zerdecal); }
/* ---------- Kahramanlar ---------- */
.kahraman { background: var(--kece); padding: 110px 0 120px; overflow: hidden; }
.kah-bas .etiket { color: var(--kok); margin-bottom: 14px; }
.kah-liste { list-style: none; margin: 50px 0 0; padding-top: 0; padding-bottom: 0; }
.kah { border-top: 1px solid rgba(23,17,14,.2); }
.kah:last-child { border-bottom: 1px solid rgba(23,17,14,.2); }
.kah-ad { width: 100%; display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 20px; padding: 18px 0 14px; text-align: left; color: var(--murekkep); }
.kah-no { color: var(--kok); }
.kah-isim { font: 400 clamp(36px, 6.2vw, 108px)/.95 var(--f-baslik); letter-spacing: -.01em; transition: transform .6s var(--e-cikis), color .3s; }
.kah.acik .kah-isim { transform: translateX(14px); color: var(--kok); }
@media (hover: hover) { .kah-ad:hover .kah-isim { transform: translateX(14px); color: var(--kok); } }
.kah-yer { color: var(--soluk); text-align: right; }
.kah-detay { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 0 0 90px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--e-cikis), opacity .6s, padding .6s; }
.kah.acik .kah-detay { max-height: 520px; opacity: 1; padding: 6px 0 30px 90px; }
.kah-detay p { margin: 0; font-size: 16.5px; max-width: 52ch; }
.kah-detay blockquote { margin: 0; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--f-baslik); color: var(--kok); }
.kah-detay cite { display: block; margin-top: 10px; font: 500 12px/1.4 var(--f-govde); font-style: normal; color: var(--soluk); }
.kah-onizleme { position: fixed; left: 0; top: 0; z-index: 20; width: 240px; margin: 0; pointer-events: none; opacity: 0; transform: translate3d(-400px, -400px, 0); transition: opacity .35s; box-shadow: 0 30px 60px rgba(20,10,8,.35); background: var(--kece); padding: 8px; }
.kah-onizleme img { width: 100%; height: auto; filter: sepia(.5) contrast(1.05); }
.kah-onizleme.gorunur { opacity: 1; }
/* ---------- 1918 ---------- */
.tarih { background: var(--murekkep); color: var(--kece); padding-bottom: 110px; --zemin: var(--murekkep); }
.tarih .serit--ust { color: var(--zerdecal); }
.tarih-bas { padding-top: 110px; display: grid; gap: 22px; }
.tarih-bas .etiket { color: var(--zerdecal); }
.tarih-bas .baslik-b { max-width: 13ch; }
.tarih-bas .giris-metni { max-width: 56ch; margin: 0; color: rgba(239,230,212,.82); }
.tarih-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: 48px; margin-top: 70px; align-items: start; }
.zaman { list-style: none; margin: 0; padding: 0; position: relative; }
.zaman::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, var(--kok) 0 6px, transparent 6px 10px); }
.zaman li { position: relative; padding: 0 0 22px 32px; }
.zaman li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: var(--zerdecal); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.zaman time { font: 700 12px/1 var(--f-etiket); letter-spacing: .1em; text-transform: uppercase; color: var(--zerdecal); }
.zaman p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: rgba(239,230,212,.86); }
.anayasa-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.anayasa-bas .etiket { color: var(--zerdecal); }
/* İç kaydırma kutusu yok: maddeler sayfayla birlikte akar, parmak ya da tekerlek her zaman sayfayı indirir.
Yalnız fareli geniş ekranda (hareket açıkken) sabit yükseklikli pencerede kendiliğinden kayar; o pencere elle kaydırılamaz (overflow hidden), tekerlek sayfaya geçer.
Bu koşul bolum.js'teki KAYAN_MQ ile birebir aynı olmalı. */
.anayasa-pencere { position: relative; border-top: 1px solid rgba(239,230,212,.2); border-bottom: 1px solid rgba(239,230,212,.2); }
.madde-liste { list-style: none; margin: 0; padding: 30px 0; display: grid; gap: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
html.js .anayasa-pencere { height: 470px; overflow: hidden;
-webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
}
.anayasa-pencere.kisa .madde-liste { padding-bottom: 18px; }
.anayasa-pencere.kisa .madde-liste li:nth-child(n+7) { display: none; }
.madde-hepsi { display: block; width: 100%; margin-top: 14px; font: 600 11px/1 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase; color: var(--zerdecal); border: 1px solid rgba(217,152,42,.5); padding: 14px 12px 13px; text-align: center; }
.madde-hepsi:hover, .madde-hepsi:focus-visible { background: var(--zerdecal); color: var(--murekkep); }
.anayasa-pencere.kayan .madde-liste { animation: madde 70s linear infinite; }
.anayasa-pencere.kayan:hover .madde-liste, .anayasa-pencere.kayan:focus-within .madde-liste, .anayasa-pencere.durdu .madde-liste { animation-play-state: paused; }
.madde-dur { font: 600 10px/1 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase; color: var(--zerdecal); border: 1px solid rgba(217,152,42,.5); padding: 8px 10px 7px; }
.madde-dur:hover { background: var(--zerdecal); color: var(--murekkep); }
@keyframes madde { to { transform: translateY(-50%); } }
.madde-liste li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px dashed rgba(239,230,212,.14); font-size: 15px; line-height: 1.5; color: rgba(239,230,212,.72); }
.madde-liste li b { font: 800 22px/1 var(--f-etiket); color: rgba(239,230,212,.35); }
.madde-liste li.one { color: var(--kece); }
.madde-liste li.one b { color: var(--zerdecal); }
.madde-liste li.one { font: 400 20px/1.25 var(--f-baslik); }
.bayrak-kutu { margin: 0; }
.bayrak { position: relative; aspect-ratio: 3 / 2; width: 100%; display: flex; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.bayrak i { flex: 1; background-image: url("data:image/svg+xml;utf8,"); background-size: 2400% 100%; background-repeat: no-repeat; }
html.js:not(.rm) .bayrak i { animation: dalga 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.11s); }
@keyframes dalga { 0%, 100% { transform: translateY(-3%) ; filter: brightness(1.08); } 50% { transform: translateY(3%); filter: brightness(.82); } }
.bayrak-kutu figcaption { color: rgba(239,230,212,.6); margin-top: 18px; }
.tarih-son { margin-top: 50px; }
/* ---------- Dernek ---------- */
.dernek { background: var(--kece); padding: 120px 0 100px; overflow: hidden; }
.dernek-bas .etiket { color: var(--kok); margin-bottom: 20px; }
.dernek-soz { font: 400 clamp(34px, 4.8vw, 82px)/1.02 var(--f-baslik); margin: 0; max-width: 20ch; letter-spacing: -.005em; }
.dernek-metin { max-width: 52ch; margin: 30px 0 0; color: var(--murekkep-2); }
.albumler { margin: 70px 0 0; overflow: hidden; }
.album-iz { display: flex; gap: 22px; padding: 0 var(--kenar); width: max-content; will-change: transform; }
.album { margin: 0; width: clamp(240px, 26vw, 380px); flex: none; }
.album .foto { aspect-ratio: 4 / 3; }
.album figcaption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; color: var(--murekkep); }
.album figcaption b { font: 400 21px/1.1 var(--f-baslik); }
.album figcaption span { font: 600 9px/1 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; }
.iletisim { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; margin-top: 80px; padding-top: 30px; border-top: 1px solid rgba(23,17,14,.18); align-items: start; }
.il-kutu .etiket { color: var(--kok); margin: 0 0 10px; }
.il-kutu address, .il-kutu p { font-style: normal; font-size: 17px; line-height: 1.55; margin: 0; }
.il-kutu--dugme { align-self: center; }
/* ---------- açılma canlandırmaları ---------- */
[data-ac="yukari"] { transition: opacity 1s, transform 1.1s var(--e-cikis); }
html.js:not(.rm) [data-ac="yukari"] { transform: translateY(26px); }
html.js:not(.rm) [data-ac="yukari"].acildi { transform: none; }
html.js:not(.rm) [data-ac="dokuma"] { opacity: 1; }
.satir { display: block; }
.satir-ic { display: inline-block; }
html.js:not(.rm) [data-ac="dokuma"] .satir-ic { clip-path: inset(-0.1em 100% -0.2em 0); transition: clip-path 1.05s steps(11, end); transition-delay: calc(var(--i) * 110ms); }
html.js:not(.rm) [data-ac="dokuma"] .satir:nth-child(even) .satir-ic { clip-path: inset(-0.1em 0 -0.2em 100%); }
html.js:not(.rm) [data-ac="dokuma"].acildi .satir:nth-child(n) .satir-ic { clip-path: inset(-0.1em 0 -0.2em 0); }
/* ---------- duyarlı ---------- */
@media (max-width: 1240px) { .kultur-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
.tarih-izgara { grid-template-columns: 1fr 1fr; }
.bayrak-kutu { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 900px) {
.giris-ic { grid-template-columns: 1fr; }
.giris-alt { grid-column: 1; grid-row: 3; padding-top: 18px; }
.giris-baslik { font-size: clamp(84px, 25vw, 210px); }
.gb-satir--2 { padding-left: .42em; }
.yurt-bas { grid-template-columns: minmax(0, 1fr); }
.yurt-izgara { grid-template-columns: 1fr; gap: 30px; }
.yurt-harita { display: none; }
.kultur-serit { grid-template-columns: 1fr; padding: 0; }
.kp { padding: 56px var(--kenar) 50px; margin-right: 0; }
.kp--bas { padding-top: 100px; padding-left: var(--kenar); }
.kp-ipucu { display: none; }
.kp::after { display: none; }
.saz { margin: 2px calc(var(--kenar) * -1); }
.kah-ad { grid-template-columns: 34px 1fr; }
.kah-yer { grid-column: 2; text-align: left; }
.kah-detay { grid-template-columns: 1fr; gap: 18px; padding-left: 54px; }
.kah.acik .kah-detay { padding-left: 54px; }
.kah-onizleme { display: none; }
.tarih-izgara { grid-template-columns: minmax(0, 1fr); }
.iletisim { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 900px) {
.giris--ana .giris-ic { grid-template-columns: 1fr; row-gap: 16px; }
.giris-amblem { grid-column: 1; grid-row: 1; width: min(60vw, 300px); justify-self: start; }
.giris--ana .giris-sol { grid-row: 2; gap: 14px; }
.giris--ana .giris-baslik { font-size: clamp(74px, 22vw, 180px); }
.giris--ana .giris-tanim { font-size: 15px; }
.ad { padding: 64px 0 60px; }
.ad-ic { grid-template-columns: 1fr; gap: 26px; }
.ad-figur { width: min(46vw, 210px); justify-self: center; }
}
@media (max-width: 560px) {
.yurt-sayilar { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px; }
.yurt-sayilar dd { font-size: clamp(28px, 9vw, 40px); }
.yurt-sayilar dt { font-size: 10px; letter-spacing: .08em; overflow-wrap: break-word; }
.giris-dip .etiket:first-child { display: none; }
.yr { grid-template-columns: minmax(0, 1fr) auto 14px; gap: 12px; }
.yr-ad { min-width: 0; }
.yr-cetele { grid-column: 1 / -1; grid-row: 2; }
.kah-detay, .kah.acik .kah-detay { padding-left: 0; }
.kah-ad { grid-template-columns: 1fr; gap: 6px; }
.kah-no { display: none; }
.kah-yer { grid-column: 1; }
.album { width: 74vw; }
.yer-et { font-size: 8.5px; padding: 4px 7px 4px 5px; }
.yer-et b { font-size: 12px; }
}
.yer-et.gizli-et { opacity: 0 !important; pointer-events: none; }
.gb .gb-yil--k { font-size: clamp(36px, 3.6vw, 60px); letter-spacing: -.02em; }