/* =================================================================== ayrı sayfalar (alt adresler): göç sayfası, vitrin, bölüm sayfaları */
/* Göç sayfası: üst çubuk koyu yarı saydam (kilim şeridi ve harita üstünde logo/menü okunur) */
.goc-sayfa .ust.ust--acik { color: var(--kece); background: rgba(18,13,11,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(239,230,212,.1); }
.goc-sayfa .ust.ust--acik .dugme { --c: var(--kece); --y: var(--murekkep); }
.goc-sayfa .ust.ust--acik .dugme::before { background: var(--kece); }
@media (pointer: coarse), (hover: none) { .goc-sayfa .ust.ust--acik { background: rgba(18,13,11,.95); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.giris--goc .giris-baslik { font-size: clamp(80px, 12.6vw, 230px); }
.giris--goc .gb-satir--2 { padding-left: .6em; }
.giris-ust .kirinti { margin: 0; color: rgba(239,230,212,.7); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.giris-ust .kirinti a { color: var(--zerdecal-acik); }
.giris-ust .kirinti i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); display: inline-block; opacity: .6; }
.goc-son { position: relative; z-index: 3; background: var(--kece); padding-top: 90px; padding-bottom: 100px; }
.goc-son::before { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.goc-son h2 { position: relative; margin: 0 0 24px; }
.goc-son-dugme { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
/* Ana sayfa vitrini: her bölüme giden kısa kapılar */
.vitrin { position: relative; z-index: 3; background: var(--kece); padding-bottom: 110px; }
.vitrin { content-visibility: auto; contain-intrinsic-size: auto 1520px; }
@media (max-width: 900px) { .vitrin { contain-intrinsic-size: auto 2240px; } }
.vitrin::before { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.vitrin .serit--ust { color: var(--kok); }
.vitrin-bas { position: relative; padding-top: 96px; display: grid; grid-template-columns: 1fr minmax(0, 46ch); gap: 18px 60px; align-items: end; }
.vitrin-bas .etiket { grid-column: 1 / -1; color: var(--kok); }
.vitrin-bas .giris-metni { margin: 0; color: var(--murekkep-2); }
.vt-liste { position: relative; list-style: none; margin: 50px 0 0; }
.vt { position: relative; border-top: 1px solid rgba(23,17,14,.2); }
.vt:last-child { border-bottom: 1px solid rgba(23,17,14,.2); }
.vt-ana { position: relative; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1.05fr) 22px; gap: 22px; align-items: center; padding: 20px 6px 14px; isolation: isolate; transition: color .35s, padding .5s var(--e-cikis); }
.vt-ana::before { content: ''; position: absolute; inset: 0; background: var(--murekkep); z-index: -1; clip-path: inset(0 100% 0 0); transition: clip-path .55s steps(12, end); }
.vt-no { color: var(--kok); }
.vt-motif { width: 40px; height: 40px; color: var(--kok); display: block; }
.vt-ad { font: 400 clamp(36px, 5.2vw, 88px)/.95 var(--f-baslik); letter-spacing: -.01em; }
.vt-ozet { font-size: 15.5px; line-height: 1.5; color: var(--murekkep-2); max-width: 48ch; }
.vt-ana .ok { width: 18px; height: 12px; }
.vt-alt { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 20px 116px; }
.vt-alt a { font: 600 10px/1 var(--f-etiket); letter-spacing: .12em; text-transform: uppercase; padding: 9px 11px 8px; border: 1px solid rgba(23,17,14,.22); transition: background .3s, color .3s, border-color .3s; }
.vt-ana:focus-visible { color: var(--kece); }
.vt-ana:focus-visible::before { clip-path: inset(0 0 0 0); }
@media (hover: hover) {
.vt-ana:hover { color: var(--kece); padding-left: 18px; }
.vt-ana:hover::before { clip-path: inset(0 0 0 0); }
.vt-ana:hover .vt-no, .vt-ana:hover .vt-motif { color: var(--zerdecal); }
.vt-ana:hover .vt-ozet { color: rgba(239,230,212,.8); }
.vt-alt a:hover { background: var(--kok); border-color: var(--kok); color: var(--kece); }
}
@media (max-width: 900px) {
.vitrin-bas { grid-template-columns: 1fr; padding-top: 70px; }
.vt-ana { grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 6px 12px; padding: 18px 2px 10px; }
.vt-motif { display: none; }
.vt-ad { grid-column: 2; }
.vt-ozet { grid-column: 2; grid-row: 2; font-size: 14.5px; }
.vt-ana .ok { grid-column: 3; grid-row: 1; }
.vt-alt { padding: 0 2px 18px 42px; }
.vt-alt a { font-size: 9.5px; padding: 9px 9px 8px; }
}
/* Bölüm sayfaları: açık zeminli sayfada üst çubuk koyu yazılı başlar */
.bolum-sayfa:not(.koyu-bas) .ust { color: var(--murekkep); }
.bolum-sayfa:not(.koyu-bas) .ust::before { display: none; }
.bolum-sayfa:not(.koyu-bas) .ust .dugme { --c: var(--murekkep); --y: var(--murekkep); }
.bolum-sayfa:not(.koyu-bas) .ust .dugme::before { background: var(--kece); }
@media (hover: hover) { .bolum-sayfa:not(.koyu-bas) .ust .dugme:hover { color: var(--kece); } }
.bolum-sayfa .kirinti { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; color: var(--soluk); }
.bolum-sayfa .kirinti a { color: var(--kok); }
.bolum-sayfa .kirinti i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); display: inline-block; opacity: .5; }
.bolum-sayfa .kultur .kirinti, .bolum-sayfa .tarih .kirinti { color: rgba(239,230,212,.6); }
.bolum-sayfa .kultur .kirinti a, .bolum-sayfa .tarih .kirinti a { color: var(--zerdecal-acik); }
.yurt-bas .kirinti { grid-column: 1 / -1; }
.yurt-bekleyen { grid-column: 1 / -1; margin: -6px 0 0; color: var(--soluk); }
.yurt-bekleyen:empty { display: none; }
.yr--bos .yr-ad { color: var(--soluk); }
.kp-yazilar { margin: -4px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kp-yazilar:empty { display: none; }
.kp-yazi { color: var(--zerdecal-acik); display: inline-flex; align-items: center; gap: 8px; }
.kp-yazi .ok { width: 12px; height: 9px; }
.kp-bag { color: var(--zerdecal); }
.kp-bag.kopyalandi { color: var(--kece); }
@media (hover: hover) { .kp-yazi:hover, .kp-bag:hover { color: var(--kece); } }
.kp.hedef .baslik-o { text-decoration: underline; text-decoration-color: var(--zerdecal); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.kah-ek { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; justify-content: space-between; border-top: 1px dashed rgba(23,17,14,.2); padding-top: 14px; }
.kah-yazilar { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 15px; }
.kah-yazilar .etiket { color: var(--soluk); }
.kah-yazilar a { color: var(--kok); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(163,40,28,.35); }
.kah-bag { color: var(--kok); display: inline-flex; gap: 8px; align-items: center; }
.kah-bag::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.kah.acik .kah-detay { max-height: 760px; }
.il-tel { font: 400 26px/1.1 var(--f-baslik); color: var(--kok); }
.il-kutu--dugme { display: flex; flex-wrap: wrap; gap: 10px; }
/* atlama bağlantısı (klavye) */
.atla { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--murekkep); color: var(--kece); padding: 10px 14px; font: 600 11px/1 var(--f-etiket); letter-spacing: .14em; text-transform: uppercase; transition: top .2s; }
.atla:focus { top: 12px; }
/* açılış karesi pişirme modu (geliştirme) */
html.pisir .ust, html.pisir main, html.pisir footer, html.pisir .cekmece, html.pisir .harita-zemin, html.pisir .imlec, html.pisir .imlec-yazi, html.pisir .atla { visibility: hidden !important; }
.giris { overflow-x: clip; }
.goc-ray button { white-space: nowrap; }
svg.ok { width: 14px; height: 10px; flex: none; display: inline-block; }
/* bölüm adresinden açılan göç sayfası: sahne konumlanana kadar giriş görünmez (JS çalışmazsa 4 sn sonra görünür) */
html.js body.goc-sayfa:not([data-bolum="-1"]):not(.konumlandi) .giris { visibility: hidden; animation: girisGoster 0s 4s forwards; }
@keyframes girisGoster { to { visibility: visible; } }
/* dernek amblemi kartı */
.dernek-amblem { position: relative; margin: 56px 0 0; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px 48px; align-items: start; max-width: 1000px; padding: 34px 36px; background: var(--murekkep); color: var(--kece); }
.dernek-amblem::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); }
.da-amblem { grid-row: 1 / span 2; width: 100%; height: auto; }
.da-logotip { display: block; width: min(100%, 340px); height: auto; align-self: end; }
.dernek-amblem figcaption { font-size: 15.5px; line-height: 1.6; color: rgba(239,230,212,.82); max-width: 46ch; }
.dernek-amblem figcaption b { color: var(--zerdecal-acik); font-weight: 600; }
@media (max-width: 700px) { .dernek-amblem { grid-template-columns: 1fr; padding: 28px 20px; } .da-amblem { grid-row: auto; max-width: 300px; } }
/* =================================================================== HAREKET: sitenin ortak hareket dili (dokuma)
Görünen şey dokunarak gelir: kilim şeritleri ve büyük adlar basamak basamak (steps) açılır, motifler ortadan ilmek ilmek büyür,
sayılar sayaç gibi döner, sayfalar kilimin dişli kenarıyla değişir. Telefonda aynı anlar bir kez, öğe görünür olunca oynar;
kaydırmaya bağlı ya da yapışkan hiçbir şey yoktur. Hepsi yalnız kırpma, saydamlık ve dönüşümle çalışır (yerleşim hesaplatmaz).
Betik yoksa ya da hareket azaltılmışsa (html.rm) her şey son hâlinde durur. */
@keyframes dokuSag { from { clip-path: inset(-.15em 100% -.25em 0); } to { clip-path: inset(-.15em 0 -.25em 0); } }
@keyframes ilmekBuyu { from { clip-path: inset(50%); } to { clip-path: inset(0); } }
@keyframes ilmekGir { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes cizgiIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ceteleCiz { from { clip-path: polygon(0 25%, 0 25%, 0 75%, 0 75%); } to { clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%); } }
/* ---- sayfalar arası geçiş: yeni sayfa aşağıdan, kilimin dişli (kurt ağzı) kenarıyla açılır; üst çubuk yerinde kalır.
Desteklemeyen tarayıcıda düz geçiş olur. ---- */
@view-transition { navigation: auto; }
.ust { view-transition-name: ust; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: gecEski .6s cubic-bezier(.7, 0, .2, 1) both; }
::view-transition-new(root) { animation: gecYeni .6s cubic-bezier(.7, 0, .2, 1) both;
-webkit-mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(black, black);
mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(black, black);
-webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat; -webkit-mask-size: 44px 22px, 100% 130vh; mask-size: 44px 22px, 100% 130vh; }
::view-transition-group(ust) { animation-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@keyframes gecEski { to { transform: translate3d(0, -6vh, 0); filter: brightness(.5); } }
@keyframes gecYeni { from { -webkit-mask-position: 0 104vh, 0 calc(104vh + 20px); mask-position: 0 104vh, 0 calc(104vh + 20px); } to { -webkit-mask-position: 0 -24px, 0 -4px; mask-position: 0 -24px, 0 -4px; } }
/* ---- kilim şeritleri: görünür olunca soldan sağa ilmek ilmek dokunur ---- */
html.js:not(.rm) .serit { clip-path: inset(0 100% 0 0); }
html.js:not(.rm) .serit.dokundu { clip-path: inset(0 0 0 0); transition: clip-path 1.4s steps(28, end); }
/* ---- "kapı": ana sayfa vitrin satırı. Ad basamak basamak açılır, motif ortadan büyür, alt bağlantılar sırayla gelir ---- */
html.js:not(.rm) [data-ac="kapi"] { opacity: 1; }
html.js:not(.rm) [data-ac="kapi"]:not(.acildi) :is(.vt-ad, .vt-motif, .vt-no, .vt-ozet, .ok, .vt-alt a) { opacity: 0; }
html.js:not(.rm) [data-ac="kapi"].acildi .vt-ad { animation: dokuSag .85s steps(14, end) both; }
html.js:not(.rm) [data-ac="kapi"].acildi .vt-motif { animation: ilmekBuyu .7s steps(7, end) .12s both; }
html.js:not(.rm) [data-ac="kapi"].acildi :is(.vt-no, .vt-ozet, .ok) { animation: belir .7s ease-out .3s both; }
html.js:not(.rm) [data-ac="kapi"].acildi .vt-alt a { animation: ilmekGir .5s var(--e-cikis) both; animation-delay: calc(.4s + var(--j, 0) * 45ms); }
.vt-alt a:nth-child(2) { --j: 1; } .vt-alt a:nth-child(3) { --j: 2; } .vt-alt a:nth-child(4) { --j: 3; } .vt-alt a:nth-child(5) { --j: 4; }
.vt-alt a:nth-child(6) { --j: 5; } .vt-alt a:nth-child(7) { --j: 6; } .vt-alt a:nth-child(8) { --j: 7; } .vt-alt a:nth-child(n+9) { --j: 8; }
/* ---- "ilmek": genel blok (kültür ilmekleri, albümler). Blok hafifçe yükselir, başlığı dokunur, motifi büyür ---- */
html.js:not(.rm) [data-ac="ilmek"].acildi { animation: ilmekGir .8s var(--e-cikis) both; }
html.js:not(.rm) [data-ac="ilmek"].acildi .baslik-o { animation: dokuSag .8s steps(12, end) .1s both; }
html.js:not(.rm) [data-ac="ilmek"].acildi [data-motif] { animation: ilmekBuyu .7s steps(7, end) .2s both; }
/* ---- "çetele": yurt satırı. Satır hep görünür; köy sayısı kadar çentik soldan sağa tek tek atılır ---- */
html.js:not(.rm) [data-ac="cetele"] { opacity: 1; }
html.js:not(.rm) [data-ac="cetele"]:not(.acildi) .yr-cetele { clip-path: polygon(0 25%, 0 25%, 0 75%, 0 75%); }
html.js:not(.rm) [data-ac="cetele"].acildi .yr-cetele { animation: ceteleCiz 1s steps(24, end) backwards; }
/* ---- sayfa açılışında (betik beklemeden) sırayla gelenler: kahraman adları, 1918 zaman çizelgesi ---- */
html.js:not(.rm) .kah .kah-isim { animation: dokuSag .9s steps(16, end) both; animation-delay: calc(.12s + var(--s, 0) * 90ms); }
html.js:not(.rm) .kah :is(.kah-no, .kah-yer) { animation: belir .7s ease-out both; animation-delay: calc(.45s + var(--s, 0) * 90ms); }
.kah:nth-child(2) { --s: 1; } .kah:nth-child(3) { --s: 2; } .kah:nth-child(4) { --s: 3; } .kah:nth-child(5) { --s: 4; } .kah:nth-child(n+6) { --s: 5; }
html.js:not(.rm) .zaman::before { animation: cizgiIn 1.6s steps(24, end) .2s both; }
html.js:not(.rm) .zaman li { animation: ilmekGir .7s var(--e-cikis) both; animation-delay: calc(.3s + var(--s, 0) * 110ms); }
.zaman li:nth-child(2) { --s: 1; } .zaman li:nth-child(3) { --s: 2; } .zaman li:nth-child(4) { --s: 3; } .zaman li:nth-child(5) { --s: 4; } .zaman li:nth-child(6) { --s: 5; } .zaman li:nth-child(n+7) { --s: 6; }
/* ---- "figür": ana sayfadaki papaklı figür aşağıdan yukarı ilmek ilmek örülür ---- */
@keyframes figurOr { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
html.js:not(.rm) [data-ac="figur"].acildi { animation: figurOr 1.5s steps(26, end) both, belir .3s ease-out both; }
/* ---- yazı dizini ve ilgili yazı kartları: sayfa açılışında ilk satırlar sırayla gelir (betik beklemez; bitince iz bırakmaz) ---- */
html.js:not(.rm) .dizin .dz:nth-child(-n+12) { animation: ilmekGir .6s var(--e-cikis) backwards; animation-delay: calc(.12s + var(--s, 0) * 45ms); }
.dz:nth-child(2) { --s: 1; } .dz:nth-child(3) { --s: 2; } .dz:nth-child(4) { --s: 3; } .dz:nth-child(5) { --s: 4; } .dz:nth-child(6) { --s: 5; }
.dz:nth-child(7) { --s: 6; } .dz:nth-child(8) { --s: 7; } .dz:nth-child(9) { --s: 8; } .dz:nth-child(10) { --s: 9; } .dz:nth-child(11) { --s: 10; } .dz:nth-child(12) { --s: 11; }
/* ---- sayfa geçişiyle gelindiyse (html.gecisli) açılış hareketleri dişli kenar yukarı çıkana kadar bekler: iki perde üst üste oynamaz ---- */
html.gecisli { --gb: .4s; }
html.gecisli.js:not(.rm) .gb-ic { animation-delay: var(--gb); }
html.gecisli.js:not(.rm) .gb-satir--2 .gb-ic { animation-delay: calc(var(--gb) + .06s); }
html.gecisli.js:not(.rm) :is(.giris-ust, .giris-alt > *, .giris-dip > *, .giris--ana .giris-sol > *:not(.giris-baslik)) { animation-delay: calc(var(--gb) + .1s); }
html.js:not(.rm) .kah .kah-isim { animation-delay: calc(var(--gb, 0s) + .12s + var(--s, 0) * 90ms); }
html.js:not(.rm) .kah :is(.kah-no, .kah-yer) { animation-delay: calc(var(--gb, 0s) + .45s + var(--s, 0) * 90ms); }
html.js:not(.rm) .zaman::before { animation-delay: calc(var(--gb, 0s) + .2s); }
html.js:not(.rm) .zaman li { animation-delay: calc(var(--gb, 0s) + .3s + var(--s, 0) * 110ms); }
html.js:not(.rm) .dizin .dz:nth-child(-n+12) { animation-delay: calc(var(--gb, 0s) + .12s + var(--s, 0) * 45ms); }
/* ---- figür yukarıdan aşağı örülür (ekrana önce giren baş kısmı önce görünür); vitrin satırında bekleme kısa ---- */
@keyframes figurOr { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
html.js:not(.rm) [data-ac="kapi"].acildi :is(.vt-no, .vt-ozet, .ok) { animation-delay: .12s; }
html.js:not(.rm) [data-ac="kapi"].acildi .vt-alt a { animation-delay: calc(.18s + var(--j, 0) * 35ms); }
/* ---- iletişim kartları sayfa açılışında sırayla gelir ---- */
html.js:not(.rm) .il-kart { animation: ilmekGir .7s var(--e-cikis) backwards; animation-delay: calc(var(--gb, 0s) + .15s + var(--s, 0) * 90ms); }
.il-kart:nth-child(2) { --s: 1; } .il-kart:nth-child(3) { --s: 2; }