/* ==========================================================================
   sogut.info — Söğüt (Bilecik) tanıtım sitesi
   Tema: "kuruluş". Ertuğrul Gazi Türbesi + Kayı (IYI) damgası + söğüt yaprağı.
   Palet: derin orman yeşili, türbe taşı, Kayı altını. Tümü logodan örneklendi.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Logo amblemi piksel piksel örneklenerek türetildi.
     Koyu zemin = halkanın koyu yeşili; vurgu = Kayı damgasının altını;
     eylem rengi = aynı altının koyu bronz tonu.
     Tüm metin/zemin çiftleri WCAG AA (>=4.5) ölçülerek seçildi. */
  --lead:        #0E3B26;  /* derin orman — hero, koyu bölümler   (beyaz 12.6:1) */
  --lead-2:      #17492F;  /* koyu zemin üstü yüzey */
  --lead-3:      #275C3E;  /* koyu zemin kenarlık */
  --limestone:   #F1F5F1;  /* sayfa zemini */
  --limestone-2: #F8FAF6;  /* kart */
  --wheat:       #C9A86A;  /* Kayı altını — koyu üstünde vurgu, dolgu buton (5.6:1) */
  --wheat-soft:  #D9BE86;  /* açık altın — koyu üstünde ikincil metin  (7.0:1) */
  --oxide:       #7A5F28;  /* koyu bronz — etiket, bağlantı, eylem     (5.6:1) */
  --ink:         #14261C;
  --muted:       #4E5C53;

  /* Logo paleti — amblemden örneklendi */
  --marka-yesil:      #175036;  /* halka, ana yeşil */
  --marka-yesil-acik: #3E7A4D;  /* yaprak / tepe */
  --marka-yaprak:     #83AB7E;  /* açık yaprak */
  --marka-altin:      #A68D63;  /* IYI damgası */
  --marka-tas:        #C8CBB3;  /* türbe taşı */
  --marka-koyu:       #0F4B32;  /* logo yazı yeşili */

  --f-display: "Spectral", Georgia, serif;
  --f-body:    "Archivo", -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* Ortak eyebrow — küçük, geniş harf aralıklı üst etiket */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.eyebrow--light { color: var(--wheat-soft); }

/* Almaşık örgü: "bir sıra tuğla, bir sıra kesme taş" — Taşhan duvar tekniği */
.almasik {
  height: 3px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--oxide) 0 14px, transparent 14px 20px,
    var(--muted) 20px 34px, transparent 34px 40px);
  opacity: .5;
}

/* --- Skip link + focus -------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wheat); color: var(--lead);
  padding: .7rem 1.2rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; }

/* --- Site header: beyaz zemin, logo renkleri --------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #DFE7DE;
  box-shadow: 0 1px 0 rgba(88, 131, 55, .10);
}
.site-head__in {
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 1.2rem; min-height: 94px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; flex: none; }
.brand:has(img:only-child) { gap: 0; }
.brand img, .brand svg { height: 68px; width: auto; flex: none; display: block; }
.brand__name {
  font-family: var(--f-display); font-size: 1.25rem; color: var(--marka-koyu);
  letter-spacing: .01em; line-height: 1;
}
.brand__tld {
  font-family: var(--f-mono); font-size: .7rem; color: var(--marka-yesil);
  letter-spacing: .1em; font-weight: 500;
}

.nav { display: flex; gap: .1rem; flex-wrap: nowrap; }
.nav a {
  position: relative; font-size: .86rem; color: var(--marka-koyu);
  text-decoration: none; padding: .55rem .65rem; border-radius: 3px;
  transition: color .18s, background .18s;
  /* Menü öğeleri kelime ortasından bölünmesin. Yer yetmediğinde
     aşağıdaki ara adım devreye girer, sonra hamburger menüye düşer. */
  white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .28rem;
  height: 2px; background: var(--marka-yesil);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover { color: var(--marka-yesil); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--oxide); font-weight: 500; }
.nav a[aria-current="page"]::after { background: var(--oxide); transform: scaleX(1); }

.nav-toggle {
  display: none; background: #fff; border: 1px solid #D8DDD2;
  color: var(--marka-koyu); padding: .5rem .75rem; border-radius: 3px; cursor: pointer;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em;
}
.nav-toggle:hover { border-color: var(--marka-yesil); color: var(--marka-yesil); }

/* Ara adım — menü sığmaya başlayınca önce daraltılır */
@media (max-width: 1180px) {
  .site-head__in { gap: .9rem; min-height: 86px; }
  .brand img, .brand svg { height: 60px; }
  .nav { gap: 0; }
  .nav a { font-size: .82rem; padding: .5rem .5rem; }
  .nav a::after { left: .5rem; right: .5rem; }
  .dilsec { margin-left: .7rem; }
}

/* Sekiz menü öğesi + logo + dil seçici bu genişliğin altına sığmıyor;
   burada hamburger menüye geçiyoruz. Menüye öğe eklerseniz bu eşiği de
   yükseltmeniz gerekebilir. */
@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid #DFE7DE;
    padding: .5rem var(--gut) 1rem;
    box-shadow: 0 12px 24px rgba(32, 78, 113, .10);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid #EFF2EA;
           font-size: .95rem; white-space: normal; }
  .nav a::after { display: none; }
  .brand img, .brand svg { height: 60px; }
  .site-head__in { min-height: 84px; }
}

@media (max-width: 560px) {
  .brand img, .brand svg { height: 50px; }
  .site-head__in { min-height: 74px; }
}

/* --- Hero (koyu bant) --------------------------------------------------- */
.hero {
  background: var(--lead);
  color: #E4EAEA;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 0;
  position: relative; overflow: hidden;
}
/* Mazgal penceresi ışığı — Taşhan'ın güney duvarındaki dar pencereler */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(101deg, transparent 18%, rgba(196,146,47,.07) 19%, rgba(196,146,47,.07) 22%, transparent 23%),
    linear-gradient(101deg, transparent 44%, rgba(196,146,47,.05) 45%, rgba(196,146,47,.05) 47.5%, transparent 48.5%),
    linear-gradient(101deg, transparent 70%, rgba(196,146,47,.06) 71%, rgba(196,146,47,.06) 74%, transparent 75%);
}
.hero__in { position: relative; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wheat); margin-bottom: 1.75rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 5.5rem);
  color: #fff; max-width: 15ch; margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--wheat-soft); }
.hero__lede {
  max-width: 52ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #C6D3C2; margin: 0 0 2.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: clamp(3rem, 7vw, 5rem); }

.btn {
  display: inline-block; text-decoration: none;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  padding: .8rem 1.5rem; border-radius: 2px;
  transition: transform .18s, background .18s, color .18s;
}
.btn--solid { background: var(--wheat); color: var(--lead); }
.btn--solid:hover { background: var(--wheat-soft); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--lead-3); color: #DCE5E6; }
.btn--ghost:hover { border-color: var(--wheat); color: var(--wheat); transform: translateY(-2px); }

/* --- İMZA: Yol şeridi (Roma hacıyolu P.1) ------------------------------- */
.route {
  border-top: 1px solid var(--lead-3);
  padding: 1.6rem 0 2.4rem;
}
.route__label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8A9C86; margin-bottom: 1.5rem;
}
.route__scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: .5rem; scrollbar-width: thin; }
.route__track {
  display: flex; align-items: flex-start; min-width: 760px;
  position: relative; padding: 20px 0 0; margin: 0;
  list-style: none;
}
/* yolun kendisi */
.route__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px;
  /* padding alanına taşmasın diye kutu içine hizalanır */
  background: var(--lead-3);
  transform-origin: left center;
  animation: road 1.5s cubic-bezier(.22,1,.36,1) .25s both;
}
@keyframes road { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.stop {
  flex: 1; position: relative; padding-top: 1.3rem; text-align: center;
  animation: stopIn .5s ease both;
}
@keyframes stopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stop::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lead); border: 2px solid var(--lead-3);
}
.stop__no { font-family: var(--f-mono); font-size: .65rem; color: #7C8F77; display: block; }
.stop__name { font-size: .78rem; color: #AFC2AA; display: block; line-height: 1.3; }

.stop--here { flex: 1.5; }
.stop--here::before {
  width: 15px; height: 15px; top: -7px;
  background: var(--wheat); border-color: var(--wheat-soft);
  box-shadow: 0 0 0 5px rgba(196,146,47,.18);
}
.stop--here .stop__no { color: var(--wheat); }
.stop--here .stop__name {
  font-family: var(--f-display); font-size: 1.05rem; color: #fff; letter-spacing: .01em;
}
.stop--here .stop__sub {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
  color: var(--wheat-soft); text-transform: uppercase;
}
.route__foot {
  margin-top: 1.4rem; font-size: .8rem; color: #8A9C86; max-width: 70ch;
}
.route__foot code { font-family: var(--f-mono); color: var(--wheat-soft); font-size: .95em; }

/* --- Künye şeridi ------------------------------------------------------- */
.facts { background: var(--limestone-2); border-bottom: 1px solid #D8D8CF; }
.facts__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.fact { padding: 1.6rem 1.2rem; border-right: 1px solid #E0E5D9; }
.fact:last-child { border-right: 0; }
.fact__num {
  font-family: var(--f-display); font-size: 1.85rem; line-height: 1;
  display: block; margin-bottom: .35rem;
}
.fact__num small { font-size: .55em; color: var(--muted); }
.fact__lbl {
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}

/* --- Genel bölüm -------------------------------------------------------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.section--dark { background: var(--lead); color: #C9D5D7; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: .9rem; }
.section__head p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.section--dark .section__head p { color: #9DB09A; }

/* --- Mil taşı kayıtları (gezilecek yerler) ------------------------------ */
.milestones { display: grid; gap: 0; }
.ms {
  display: grid; grid-template-columns: 96px 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid #DDE2D6;
}
.ms:last-child { border-bottom: 1px solid #DDE2D6; }

/* mil taşı görseli — yuvarlak başlı beyaz mermer sütun */
.ms__stone { position: relative; }
.ms__stone svg { width: 46px; height: auto; display: block; }
.ms__stone span {
  display: block; margin-top: .5rem;
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.ms__body h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: .3rem; }
.ms__date {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--oxide); text-transform: uppercase; display: block; margin-bottom: .9rem;
}
.ms__body p { margin: 0 0 .9rem; max-width: 66ch; }
.ms__body p:last-child { margin-bottom: 0; }

/* kitabe alıntısı */
.kitabe {
  margin: 1.25rem 0; padding: 1.1rem 1.3rem;
  background: var(--limestone-2); border-left: 3px solid var(--wheat);
  font-family: var(--f-display); font-style: italic; font-size: 1.02rem;
  color: #26332A; max-width: 62ch;
}
.kitabe cite {
  display: block; margin-top: .6rem; font-family: var(--f-mono); font-style: normal;
  font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase;
}

.meta-list {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
.meta-list li {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--muted); border: 1px solid #D6DCCE; padding: .3rem .6rem; border-radius: 2px;
}

/* --- Kartlar ------------------------------------------------------------ */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  padding: 1.6rem; border-radius: 3px;
  transition: transform .2s, border-color .2s;
}
.card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-3px); border-color: var(--wheat); }
.card__more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oxide);
}
.section--dark .card { background: var(--lead-2); border-color: var(--lead-3); }
.section--dark .card p { color: #9DB09A; }

/* --- Zaman çizelgesi ---------------------------------------------------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--lead-3); opacity: .35;
}
.section--dark .tl::before { opacity: 1; }
.tl li { position: relative; padding: 0 0 1.9rem 2.6rem; }
.tl li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--limestone); border: 2px solid var(--muted);
}
.section--dark .tl li::before { background: var(--lead); border-color: var(--lead-3); }
.tl li.is-key::before { background: var(--wheat); border-color: var(--wheat); }
.tl__yr {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--wheat); display: block; margin-bottom: .25rem;
}
.section:not(.section--dark) .tl__yr { color: var(--oxide); }
.tl__t { font-family: var(--f-display); font-size: 1.2rem; display: block; margin-bottom: .3rem; }
.tl p { margin: 0; font-size: .95rem; color: var(--muted); max-width: 60ch; }
.section--dark .tl p { color: #9DB09A; }

/* --- Köy ızgarası ------------------------------------------------------- */
.villages {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.villages li {
  font-size: .92rem; padding: .5rem .25rem;
  border-bottom: 1px solid #DDE3D5; display: flex; gap: .55rem; align-items: baseline;
}
.villages b { font-family: var(--f-mono); font-size: .65rem; color: #A0A69F; font-weight: 400; }
.villages .tag {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em;
  color: var(--oxide); text-transform: uppercase; margin-left: auto;
}

/* --- Yazı bloğu (tarihçe sayfası) --------------------------------------- */
/* .wrap ve .prose AYNI öğedir (<div class="wrap prose">).
   METİN VE FOTOĞRAF AYNI GENİŞLİKTE. Daha önce kapsayıcı sayfa genişliğinde
   (1180px) bırakılıp metin 72ch (768px) ile sınırlanmıştı; fotoğraflar 1084px
   olduğu için metnin sağında ~316px boş bir şerit kalıyordu. Şimdi kapsayıcı
   okuma ölçüsüne göre daraltıldı: içerik kutusu 840px ≈ 79ch. Metin de,
   fotoğraf da, galeri de tam olarak bu genişlikte — hiçbir yerde boşluk yok. */
.prose { max-width: calc(840px + 2 * var(--gut)); }
.prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 2.75rem 0 .9rem; }
.prose h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.prose p { margin: 0 0 1.1rem; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { font-weight: 600; }
.lede { font-size: 1.2rem; line-height: 1.55; color: #333B39; }

/* --- Sayfa başlığı (iç sayfalar) ---------------------------------------- */
.pagehead {
  background: var(--lead); color: #C9D5D7;
  padding: clamp(2.75rem, 7vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.25rem);
}
.pagehead h1 { color: #fff; font-size: clamp(2.1rem, 6vw, 3.6rem); margin-bottom: 1rem; max-width: 18ch; }
.pagehead p { max-width: 58ch; margin: 0; color: #9DB09A; }
.crumbs { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: #7C8F77; margin-bottom: 1.25rem; }
.crumbs a { color: var(--wheat); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --- Bilgi kutusu ------------------------------------------------------- */
.note {
  border: 1px solid #D6DCCE; border-left: 3px solid var(--muted);
  background: var(--limestone-2); padding: 1.1rem 1.3rem;
  font-size: .92rem; color: var(--muted); border-radius: 2px;
}
.note strong { color: var(--ink); }

/* --- Ulaşım tablosu ----------------------------------------------------- */
.dist { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dist th, .dist td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid #DDE3D5; }
.dist th {
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.dist td:last-child { font-family: var(--f-mono); text-align: right; white-space: nowrap; }

/* --- Footer: açık zemin, logo renkleri --------------------------------- */
.site-foot {
  background: #fff;
  border-top: 3px solid var(--marka-yesil);
  color: #4A5550;
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 1.75rem;
  font-size: .9rem;
}
.foot__logo { margin-bottom: 1.75rem; }
.foot__logo img { height: 92px; width: auto; display: block; }

.foot__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 2.25rem;
}
.foot__grid h4 {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marka-yesil);
  margin-bottom: .9rem; font-weight: 500;
}
.foot__grid ul { list-style: none; margin: 0; padding: 0; }
.foot__grid li { margin-bottom: .5rem; }
.foot__grid a {
  color: var(--marka-koyu); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .18s, color .18s;
}
.foot__grid a:hover { color: var(--oxide); border-bottom-color: var(--oxide); }

.foot__bar {
  border-top: 1px solid #E6EADF; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; color: #7C857E;
}

@media (max-width: 640px) { .foot__logo img { height: 66px; } }

/* --- Scroll reveal ------------------------------------------------------ */
/* JS yoksa hiçbir şey gizlenmez — .js sınıfını head'deki satır içi script ekler */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 640px) {
  .ms { grid-template-columns: 1fr; gap: 1rem; }
  .ms__stone { display: flex; align-items: center; gap: .75rem; }
  .ms__stone span { margin-top: 0; }
  .ms__stone svg { width: 30px; }
  .fact { border-right: 0; border-bottom: 1px solid #E0E5D9; padding: 1.2rem; }
}

/* --- İletişim formu ----------------------------------------------------- */
.gp-form label {
  display: block; margin: 1.1rem 0 .35rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.gp-form input, .gp-form textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem;
  background: var(--limestone-2); border: 1px solid #D6DCCE; border-radius: 2px;
  font: inherit; color: var(--ink);
}
.gp-form textarea { resize: vertical; min-height: 8rem; }
.gp-form input:focus, .gp-form textarea:focus { border-color: var(--wheat); }

/* --- Fotoğraflı hero ---------------------------------------------------- */
.hero--photo { background-image: var(--hero-img); background-size: cover; background-position: center; }
/* Fotoğrafın üstüne kurşun rengi perde: metin kontrastı garanti altına alınır */
.hero--photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23,48,31,.55) 0%, rgba(23,48,31,.80) 55%, var(--lead) 100%),
    rgba(23,48,31, var(--hero-dim, .62));
}
.hero--photo .hero__in, .hero--photo .route { position: relative; z-index: 2; }
.hero--photo::before { z-index: 1; }

.hero__credit {
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .08em;
  color: #8A9C86; margin: -1.5rem 0 1.75rem;
}
.hero__credit a { color: #9DB09A; }
.hero__credit a:hover { color: var(--wheat); }

/* --- Kredili görsel ----------------------------------------------------- */
.fig { margin: 0 0 1.5rem; }
.fig img { width: 100%; height: auto; border-radius: 3px; background: #E0E5D9; }
.fig figcaption {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between;
  margin-top: .5rem; font-size: .8rem; color: var(--muted);
}
.fig__cr { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .06em; color: #889183; }
.fig__cr a { color: #889183; }
.fig__cr a:hover { color: var(--oxide); }
.fig--lead { margin-bottom: 2rem; }
.fig--inline { max-width: 520px; }

/* --- Galeri ------------------------------------------------------------- */
.gal { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gal .fig { margin: 0; }
.gal .fig img { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 640px) { .fig--inline { max-width: 100%; } }

/* --- Mimari çizimler ---------------------------------------------------- */
.cizim {
  margin: 1.75rem 0; padding: 1.25rem 1.25rem 1rem;
  background: var(--limestone-2); border: 1px solid #E1E6DA; border-radius: 3px;
}
.cizim img { width: 100%; height: auto; display: block; }
.cizim figcaption {
  margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #E4E9DD;
  font-size: .82rem; line-height: 1.5; color: var(--muted); max-width: 62ch;
}
/* Koyu bölümlerde de okunur kalsın */
.section--dark .cizim { background: var(--lead-2); border-color: var(--lead-3); }
.section--dark .cizim figcaption { color: #9DB09A; border-top-color: var(--lead-3); }

/* --- Gömülü içerik ------------------------------------------------------ */
.embed { margin: 1.75rem 0; max-width: 540px; }
.embed iframe {
  width: 100%; aspect-ratio: var(--ar, 1 / 1); display: block;
  border: 1px solid #E1E6DA; border-radius: 3px; background: var(--limestone-2);
}
.embed figcaption {
  margin-top: .6rem; font-family: var(--f-mono); font-size: .65rem;
  letter-spacing: .06em; color: #889183;
}
.embed figcaption a { color: var(--oxide); }
.section--dark .embed iframe { border-color: var(--lead-3); background: var(--lead-2); }

/* --- Video -------------------------------------------------------------- */
.video { margin: 1.75rem 0; }
.video video {
  width: 100%; height: auto; display: block; border-radius: 3px;
  background: var(--lead); aspect-ratio: 16 / 9;
}
.video figcaption {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between;
  margin-top: .5rem; font-size: .8rem; color: var(--muted);
}

/* --- Gezilecek yerler listesi: özet kart -------------------------------- */
.ms__link { text-decoration: none; }
.ms__link:hover { color: var(--oxide); }

/* Kapak küçük resmi — tıklanabilir, sabit oranlı */
.ms__thumb {
  position: relative; display: block; margin: 0 0 1rem;
  max-width: 460px; border-radius: 3px; overflow: hidden;
  background: #E0E5D9; line-height: 0;
}
.ms__thumb img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .35s ease;
}
.ms__thumb:hover img { transform: scale(1.03); }

/* Video rozeti */
.ms__play {
  position: absolute; left: .6rem; bottom: .6rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem .28rem .45rem; border-radius: 2px;
  background: rgba(23,48,31,.86); color: #fff;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1;
}
.ms__play svg { width: 13px; height: 13px; }

.ms__ozet { margin: 0 0 .9rem; max-width: 62ch; color: #2C3830; }

.ms__more { margin: 1.1rem 0 0; }

/* Ok biçimli "Devamını oku" butonu.
   Şekil iç span'de; odak halkası <a> üzerinde kalsın diye ayrıldı,
   çünkü clip-path outline'ı da kırpar. */
.more-link { display: inline-block; text-decoration: none; border-radius: 2px; }

.more-link__arrow {
  display: inline-block;
  background: var(--wheat);
  color: var(--lead);
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: .85rem 2.6rem .85rem 1.35rem;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  transition: background .2s ease, transform .2s ease, padding .2s ease;
}
.more-link:hover .more-link__arrow,
.more-link:focus-visible .more-link__arrow {
  background: var(--wheat);
  transform: translateX(4px);
  padding-right: 2.9rem;
}
.more-link:active .more-link__arrow { transform: translateX(1px); }

/* Koyu bölümlerde de aynı vurgu */
.section--dark .more-link__arrow { color: var(--lead); }

/* Ekran okuyucuya özel metin */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) { .ms__thumb { max-width: 100%; } }

/* Geniş ekranda görsel metnin yanına gelsin — dikeyde yer kazanır */
@media (min-width: 900px) {
  .ms__body--img {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "baslik baslik" "tarih tarih" "gorsel metin";
    column-gap: 1.6rem;
  }
  .ms__body--img > h3        { grid-area: baslik; }
  .ms__body--img > .ms__date { grid-area: tarih; }
  .ms__body--img > .ms__thumb{ grid-area: gorsel; margin: 0; max-width: none; }
  .ms__body--img > .ms__text { grid-area: metin; }
  .ms__body--img .ms__thumb img { aspect-ratio: 4 / 3; }
  .ms__body--img .ms__more   { margin-top: .9rem; }
}

/* --- Işık kutusu -------------------------------------------------------- */
/* Tıklanabilir görsel sarmalayıcı — buton görünmez, imleç büyüteç olur */
.fig__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; line-height: 0; border-radius: 3px; overflow: hidden;
}
.fig__zoom img { transition: transform .35s ease; }
.fig__zoom:hover img { transform: scale(1.03); }
.cizim .fig__zoom:hover img { transform: none; }   /* çizimlerde büyütme yok */

body.lb-open { overflow: hidden; }

/* display:flex, [hidden] özniteliğinin display:none'unu ezer — açıkça geri al */
.lb[hidden] { display: none; }

.lb {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 24, 29, .94);
  backdrop-filter: blur(3px);
}
.lb.is-in { animation: lbIn .22s ease both; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

.lb__box {
  margin: 0; max-width: 1100px; max-height: 100%;
  display: flex; flex-direction: column; gap: .9rem;
}
.lb__img {
  max-width: 100%; max-height: calc(100vh - 9rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px; background: var(--lead-2);
}
.lb__cap {
  display: flex; flex-wrap: wrap; gap: .3rem 1.25rem;
  justify-content: space-between; align-items: baseline;
  color: #C6D3C2; font-size: .88rem; line-height: 1.45;
}
.lb__text { max-width: 70ch; }
.lb__no {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--wheat); white-space: nowrap;
}

.lb__x, .lb__nav {
  position: absolute; background: rgba(34, 54, 64, .8);
  color: #E4EAEA; border: 1px solid var(--lead-3);
  cursor: pointer; border-radius: 3px; line-height: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.lb__x:hover, .lb__nav:hover { background: var(--wheat); color: var(--lead); border-color: var(--wheat); }
.lb__x { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.6rem; }
.lb__nav {
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 68px; font-size: 2rem;
}
.lb__nav--prev { left: .75rem; }
.lb__nav--next { right: .75rem; }

@media (max-width: 640px) {
  .lb__nav { width: 40px; height: 56px; font-size: 1.6rem; }
  .lb__img { max-height: calc(100vh - 11rem); }
  .lb__cap { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fig__zoom img, .fig__zoom:hover img { transition: none; transform: none; }
}

/* --- Protokol: üçlü kart ızgarası --------------------------------------- */
.protokol-grid {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pk {
  display: block; text-decoration: none; color: inherit;
  transition: transform .22s ease;
}
.pk:hover { transform: translateY(-4px); }

.pk__foto {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 3px;
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  margin-bottom: 1rem;
}
.pk__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .4s ease; display: block;
}
.pk:hover .pk__foto img { transform: scale(1.04); }
.pk__bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 4rem; color: #C3C0B0;
}

.pk__gorev {
  display: block; margin-bottom: .25rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxide);
}
.pk__ad {
  display: block; font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2;
}
.pk:hover .pk__ad { color: var(--oxide); }
.pk__kurum { display: block; margin-top: .2rem; font-size: .88rem; color: var(--muted); }

/* Koyu bölümdeki küçük sürüm */
.protokol-grid--kucuk { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 720px; }
.pk--koyu .pk__foto { background: var(--lead-2); border-color: var(--lead-3); }
.pk--koyu .pk__gorev { color: var(--wheat); }
.pk--koyu .pk__ad { color: #fff; }
.pk--koyu:hover .pk__ad { color: var(--wheat-soft); }

/* --- Protokol: tek kişi sayfası ----------------------------------------- */
.protokol { display: grid; gap: 0; }
.kisi {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid #DDE2D6;
}
.kisi:last-child { border-bottom: 1px solid #DDE2D6; }

.kisi__foto {
  position: relative; border-radius: 3px; overflow: hidden;
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  aspect-ratio: 3 / 4;
}
.kisi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.kisi__bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 3.5rem; color: #C3C0B0;
}

.kisi__gorev {
  margin: 0 0 .3rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxide);
}
.kisi__ad {
  font-family: var(--f-display); font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  font-weight: 400; line-height: 1.15; margin: 0 0 .35rem;
}
.kisi__kurum { margin: 0 0 .2rem; color: var(--muted); font-size: .95rem; }
.kisi__tarih {
  margin: 0 0 1rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: #889183;
}
.kisi__bio { max-width: 66ch; }
.kisi__bio p { margin: 0 0 .8rem; }
.kisi__bio p:last-child { margin-bottom: 0; }
.kisi__kaynak { margin: 1rem 0 0; }
.kisi__kaynak a {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oxide); text-decoration: none;
  border-bottom: 1px solid #D6DCCE; padding-bottom: 2px;
}
.kisi__kaynak a:hover { border-color: var(--wheat); }

@media (max-width: 640px) {
  .kisi { grid-template-columns: 1fr; }
  .kisi__foto { max-width: 200px; }
}

/* --- İletişim sayfası --------------------------------------------------- */
.iletisim {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

/* Sol sütun */
.ilt-bilgi {
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  border-radius: 3px; padding: clamp(1.25rem, 3vw, 1.9rem);
}
.ilt-bilgi__kurum {
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 400;
  margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid #E4E9DD;
}
.ilt-liste { margin: 0; }
.ilt-liste dt {
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.1rem;
}
.ilt-liste dt:first-child { margin-top: 0; }
.ilt-liste dd { margin: .3rem 0 0; line-height: 1.55; }
.ilt-liste a { color: var(--oxide); text-decoration: none; border-bottom: 1px solid #D6DCCE; }
.ilt-liste a:hover { border-color: var(--wheat); }

.ilt-ek { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #E4E9DD;
          font-size: .92rem; color: var(--muted); }
.ilt-ek p { margin: 0 0 .6rem; }
.ilt-ek p:last-child { margin: 0; }

.ilt-harita { margin-top: 1.5rem; }
.ilt-harita iframe {
  width: 100%; aspect-ratio: 4 / 3; border: 1px solid #E1E6DA;
  border-radius: 3px; display: block; background: #E4E9DD;
}
.ilt-harita__buyut {
  display: inline-block; margin-top: .5rem;
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oxide); text-decoration: none;
}
.ilt-harita__buyut:hover { text-decoration: underline; }

/* Sağ sütun */
.ilt-form__baslik {
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400; margin: 0 0 .5rem;
}
.ilt-form__not { margin: 0 0 1.25rem; color: var(--muted); max-width: 58ch; }
.gp-form__ikili { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.gp-form__ikili label { margin-top: 1.1rem; }

@media (max-width: 800px) {
  .iletisim { grid-template-columns: 1fr; }
  .gp-form__ikili { grid-template-columns: 1fr; }
}

/* --- Yol şeridi: kaydırma ipucu ----------------------------------------- */
.route__scroll { position: relative; scroll-behavior: auto; }

/* Dolu kenarda içerik soluyor — devamı olduğu anlaşılsın */
.route__scroll.sag-var {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}
.route__scroll.sol-var {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}
.route__scroll.sol-var.sag-var {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px,
                       #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px,
                       #000 calc(100% - 46px), transparent 100%);
}

/* Mobilde şerit üst etiketi tek satıra sığmıyordu */
@media (max-width: 700px) {
  .route__label { flex-direction: column; gap: .25rem; line-height: 1.5; }
  .route__track { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) { .route__scroll { scroll-behavior: auto; } }

/* =======================================================================
   MOBİL DÜZELTMELERİ
   Ekran kaydından tespit edilenler.
   ======================================================================= */

/* 1) Protokol kartları mobilde tek sütuna düşüyordu; her kişi neredeyse
      tam ekran kaplıyor, üç kişiyi görmek için uzun uzun kaydırmak
      gerekiyordu. Dar ekranda iki sütun. */
@media (max-width: 640px) {
  .protokol-grid,
  .protokol-grid--kucuk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .9rem;
  }
  .pk__foto { margin-bottom: .6rem; }
  .pk__gorev { font-size: .58rem; letter-spacing: .12em; }
  .pk__ad { font-size: 1rem; line-height: 1.25; }
  .pk__kurum { font-size: .78rem; line-height: 1.35; }
}

/* Çok dar ekranda (küçük telefon) tek sütuna dönsün ama fotoğraf sınırlı */
@media (max-width: 360px) {
  .protokol-grid, .protokol-grid--kucuk { grid-template-columns: 1fr; }
  .pk__foto { max-width: 220px; }
}

/* 2) Künye şeridi 5 öğeli; iki sütunda sonuncusu tek başına kalıp
      yetim görünüyordu. Son öğe iki sütuna yayılsın. */
@media (max-width: 640px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: .6rem;
  }
  .fact:nth-child(odd):last-child .fact__num { margin-bottom: 0; }
}

/* 3) İletişim formu: etiketler ile alanlar arası fazla açıktı,
      mesaj kutusu gereğinden uzundu. */
@media (max-width: 640px) {
  .gp-form label { margin-top: .95rem; }
  .gp-form textarea { min-height: 6.5rem; }
  .gp-form__ikili label { margin-top: .95rem; }
}

/* 4) Kişi detayında fotoğraf mobilde tam genişlik kaplıyordu */
@media (max-width: 640px) {
  .kisi__foto { max-width: 240px; }
}

/* --- Dil seçici: açılır menü (Osmaneli deseni) --------------------------- */
.dilsec { position: relative; margin-left: 1.1rem; flex: none; }

.dilsec__dugme {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; background: transparent; cursor: pointer;
  border: 1px solid #DDE2D6; border-radius: 3px;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--marka-koyu); white-space: nowrap;
  transition: border-color .18s, color .18s;
}
.dilsec__dugme:hover { border-color: var(--marka-yesil); color: var(--marka-yesil); }
.dilsec__ok { font-size: .7em; opacity: .6; }

/* Bayrak kutusu — hem düğmede hem listede */
.bayrak {
  display: inline-flex; width: 20px; height: 14px; flex: none;
  border-radius: 1px; overflow: hidden; line-height: 0;
  border: 1px solid rgba(22, 33, 26, .18);
}
.bayrak svg { width: 100%; height: 100%; display: block; }

.dilsec__liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  min-width: 168px; margin: 0; padding: 5px 0; list-style: none;
  background: #fff; border: 1px solid #DDE2D6; border-radius: 3px;
  box-shadow: 0 14px 30px -18px rgba(22, 33, 26, .5);
}
.dilsec__liste[hidden] { display: none; }
.dilsec__liste li { margin: 0; }
.dilsec__liste a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; text-decoration: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marka-koyu);
  transition: background .15s, color .15s;
}
.dilsec__liste a:hover { background: var(--limestone-2); color: var(--marka-yesil); }
.dilsec__liste a.on { color: var(--oxide); background: #F3F7F1; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Mobil: menü butonunun solunda */
@media (max-width: 820px) {
  .dilsec { order: 2; margin-left: auto; margin-right: .7rem; }
  .nav-toggle { order: 3; }
  .nav { order: 4; }
  .dilsec__dugme { padding: 6px 9px; }
}

/* --- Protokol: üçlü kart ızgarası --------------------------------------- */
.protokol-grid {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pk {
  display: block; text-decoration: none; color: inherit;
  transition: transform .22s ease;
}
.pk:hover { transform: translateY(-4px); }

.pk__foto {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 3px;
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  margin-bottom: 1rem;
}
.pk__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .4s ease; display: block;
}
.pk:hover .pk__foto img { transform: scale(1.04); }
.pk__bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 4rem; color: #C3C0B0;
}

.pk__gorev {
  display: block; margin-bottom: .25rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxide);
}
.pk__ad {
  display: block; font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2;
}
.pk:hover .pk__ad { color: var(--oxide); }
.pk__kurum { display: block; margin-top: .2rem; font-size: .88rem; color: var(--muted); }

/* Koyu bölümdeki küçük sürüm */
.protokol-grid--kucuk { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 720px; }
.pk--koyu .pk__foto { background: var(--lead-2); border-color: var(--lead-3); }
.pk--koyu .pk__gorev { color: var(--wheat); }
.pk--koyu .pk__ad { color: #fff; }
.pk--koyu:hover .pk__ad { color: var(--wheat-soft); }

/* --- Protokol: tek kişi sayfası ----------------------------------------- */
.protokol { display: grid; gap: 0; }
.kisi {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid #DDE2D6;
}
.kisi:last-child { border-bottom: 1px solid #DDE2D6; }

.kisi__foto {
  position: relative; border-radius: 3px; overflow: hidden;
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  aspect-ratio: 3 / 4;
}
.kisi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.kisi__bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 3.5rem; color: #C3C0B0;
}

.kisi__gorev {
  margin: 0 0 .3rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxide);
}
.kisi__ad {
  font-family: var(--f-display); font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  font-weight: 400; line-height: 1.15; margin: 0 0 .35rem;
}
.kisi__kurum { margin: 0 0 .2rem; color: var(--muted); font-size: .95rem; }
.kisi__tarih {
  margin: 0 0 1rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: #889183;
}
.kisi__bio { max-width: 66ch; }
.kisi__bio p { margin: 0 0 .8rem; }
.kisi__bio p:last-child { margin-bottom: 0; }
.kisi__kaynak { margin: 1rem 0 0; }
.kisi__kaynak a {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oxide); text-decoration: none;
  border-bottom: 1px solid #D6DCCE; padding-bottom: 2px;
}
.kisi__kaynak a:hover { border-color: var(--wheat); }

@media (max-width: 640px) {
  .kisi { grid-template-columns: 1fr; }
  .kisi__foto { max-width: 200px; }
}

/* --- İletişim sayfası --------------------------------------------------- */
.iletisim {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

/* Sol sütun */
.ilt-bilgi {
  background: var(--limestone-2); border: 1px solid #E1E6DA;
  border-radius: 3px; padding: clamp(1.25rem, 3vw, 1.9rem);
}
.ilt-bilgi__kurum {
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 400;
  margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid #E4E9DD;
}
.ilt-liste { margin: 0; }
.ilt-liste dt {
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.1rem;
}
.ilt-liste dt:first-child { margin-top: 0; }
.ilt-liste dd { margin: .3rem 0 0; line-height: 1.55; }
.ilt-liste a { color: var(--oxide); text-decoration: none; border-bottom: 1px solid #D6DCCE; }
.ilt-liste a:hover { border-color: var(--wheat); }

.ilt-ek { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #E4E9DD;
          font-size: .92rem; color: var(--muted); }
.ilt-ek p { margin: 0 0 .6rem; }
.ilt-ek p:last-child { margin: 0; }

.ilt-harita { margin-top: 1.5rem; }
.ilt-harita iframe {
  width: 100%; aspect-ratio: 4 / 3; border: 1px solid #E1E6DA;
  border-radius: 3px; display: block; background: #E4E9DD;
}
.ilt-harita__buyut {
  display: inline-block; margin-top: .5rem;
  font-family: var(--f-mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oxide); text-decoration: none;
}
.ilt-harita__buyut:hover { text-decoration: underline; }

/* Sağ sütun */
.ilt-form__baslik {
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400; margin: 0 0 .5rem;
}
.ilt-form__not { margin: 0 0 1.25rem; color: var(--muted); max-width: 58ch; }
.gp-form__ikili { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.gp-form__ikili label { margin-top: 1.1rem; }

@media (max-width: 800px) {
  .iletisim { grid-template-columns: 1fr; }
  .gp-form__ikili { grid-template-columns: 1fr; }
}

/* --- Yol şeridi: kaydırma ipucu ----------------------------------------- */
.route__scroll { position: relative; scroll-behavior: auto; }

/* Dolu kenarda içerik soluyor — devamı olduğu anlaşılsın */
.route__scroll.sag-var {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}
.route__scroll.sol-var {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}
.route__scroll.sol-var.sag-var {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px,
                       #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 46px,
                       #000 calc(100% - 46px), transparent 100%);
}

/* Mobilde şerit üst etiketi tek satıra sığmıyordu */
@media (max-width: 700px) {
  .route__label { flex-direction: column; gap: .25rem; line-height: 1.5; }
  .route__track { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) { .route__scroll { scroll-behavior: auto; } }

/* =======================================================================
   MOBİL DÜZELTMELERİ
   Ekran kaydından tespit edilenler.
   ======================================================================= */

/* 1) Protokol kartları mobilde tek sütuna düşüyordu; her kişi neredeyse
      tam ekran kaplıyor, üç kişiyi görmek için uzun uzun kaydırmak
      gerekiyordu. Dar ekranda iki sütun. */
@media (max-width: 640px) {
  .protokol-grid,
  .protokol-grid--kucuk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .9rem;
  }
  .pk__foto { margin-bottom: .6rem; }
  .pk__gorev { font-size: .58rem; letter-spacing: .12em; }
  .pk__ad { font-size: 1rem; line-height: 1.25; }
  .pk__kurum { font-size: .78rem; line-height: 1.35; }
}

/* Çok dar ekranda (küçük telefon) tek sütuna dönsün ama fotoğraf sınırlı */
@media (max-width: 360px) {
  .protokol-grid, .protokol-grid--kucuk { grid-template-columns: 1fr; }
  .pk__foto { max-width: 220px; }
}

/* 2) Künye şeridi 5 öğeli; iki sütunda sonuncusu tek başına kalıp
      yetim görünüyordu. Son öğe iki sütuna yayılsın. */
@media (max-width: 640px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: .6rem;
  }
  .fact:nth-child(odd):last-child .fact__num { margin-bottom: 0; }
}

/* 3) İletişim formu: etiketler ile alanlar arası fazla açıktı,
      mesaj kutusu gereğinden uzundu. */
@media (max-width: 640px) {
  .gp-form label { margin-top: .95rem; }
  .gp-form textarea { min-height: 6.5rem; }
  .gp-form__ikili label { margin-top: .95rem; }
}

/* 4) Kişi detayında fotoğraf mobilde tam genişlik kaplıyordu */
@media (max-width: 640px) {
  .kisi__foto { max-width: 240px; }
}

/* --- Dil seçici: bayraklar (menünün sağında) ----------------------------- */
.diller {
  display: flex; gap: .4rem; align-items: center;
  margin-left: 1.25rem; padding-left: 1.25rem;
  border-left: 1px solid #DFE7DE;      /* menüden ince çizgiyle ayrılır */
}
.diller a {
  display: inline-flex; width: 27px; height: 18px; border-radius: 2px;
  overflow: hidden; opacity: .55; transition: opacity .18s, transform .18s;
  border: 1px solid rgba(0,0,0,.12); line-height: 0;
}
.diller a svg { width: 100%; height: 100%; display: block; }
.diller a:hover { opacity: 1; transform: translateY(-1px); }
.diller a.on { opacity: 1; outline: 2px solid var(--marka-yesil); outline-offset: 1px; }
.diller .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Mobil: menü butonunun solunda kalsın, çizgi olmasın */
@media (max-width: 820px) {
  .diller {
    order: 2; margin-left: auto; margin-right: .8rem;
    padding-left: 0; border-left: 0;
  }
  .nav-toggle { order: 3; }
  .nav { order: 4; }
}

/* --- Japonca: yazı tipi ve satır düzeni ---------------------------------
   Spectral ve Source Sans Japonca karakter taşımıyor; sistem yazı tipleri
   devreye girmezse kutucuk (tofu) görünür. Ayrıca Japonca'da sözcük arası
   boşluk yok, satır sonu her karakterde olabilir ve satır aralığı biraz
   daha açık olmalı.                                                        */
:lang(ja) {
  /* Spectral ve Archivo BAŞTA kalmalı: yazı tipi seçimi karakter karakter
     yapılır, yani Latin harfler yine Spectral/Archivo ile çizilir, yalnızca
     kana ve kanji Japonca yazı tipine düşer. CJK fontunu başa alırsak
     "Bir devlet" gibi Latin metin de o fontun tam genişlikli glifleriyle
     çizilir ve daktilo yazısı gibi görünür. */
  --f-display: "Spectral", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
               "Noto Serif JP", "MS PMincho", Georgia, serif;
  --f-body:    "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  line-height: 1.85;
  letter-spacing: .02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 {
  line-height: 1.4; letter-spacing: .01em;
}
/* Tek tırnaklı/mono etiketlerde harf aralığı Japonca'da fazla açık kalıyor */
:lang(ja) .eyebrow, :lang(ja) .crumbs, :lang(ja) .fact__lbl,
:lang(ja) .pk__gorev, :lang(ja) .stop__name {
  letter-spacing: .06em;
}
/* Dil seçicide "日本語" latin kodlardan geniş; kutuyu taşırmasın */
:lang(ja) .dilsec__liste a { letter-spacing: .02em; }

/* --- Çince: yazı tipi ve satır düzeni ------------------------------------ */
:lang(zh) {
  /* Latin fontu başta — gerekçe için yukarıdaki Japonca notuna bakın. */
  --f-display: "Spectral", "Songti SC", "SimSun", "Noto Serif SC",
               "Source Han Serif SC", Georgia, serif;
  --f-body:    "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", sans-serif;
  line-height: 1.8;
  letter-spacing: .01em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { line-height: 1.4; }
:lang(zh) .eyebrow, :lang(zh) .crumbs, :lang(zh) .fact__lbl,
:lang(zh) .pk__gorev, :lang(zh) .stop__name { letter-spacing: .05em; }

/* --- Rusça: Kiril yedeği ------------------------------------------------
   Spectral ve Archivo Kiril alfabesini taşır; yine de yüklenemezse
   düzgün bir sistem yazı tipine düşsün.                                   */
:lang(ru) {
  --f-display: "Spectral", Georgia, "Times New Roman", serif;
  --f-body:    "Archivo", "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   PADİŞAHLAR — liste ızgarası ve künye
   ========================================================================== */
.pd-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.5rem 1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  counter-reset:none;
}
.pd__a{
  display:flex; flex-direction:column; height:100%; position:relative;
  text-decoration:none; color:inherit;
  background:var(--limestone-2); border:1px solid #DDE2D6;
  border-radius:2px; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pd__a:hover,.pd__a:focus-visible{
  border-color:var(--marka-yesil); transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(14,59,38,.13);
}
.pd__no{
  position:absolute; z-index:2; top:0; left:0;
  min-width:2.05rem; padding:.3rem .45rem;
  font-family:var(--f-mono); font-size:.7rem; line-height:1;
  text-align:center; color:var(--lead); background:var(--wheat);
}
.pd__gorsel{
  display:block; aspect-ratio:3/3.8; background:#E4E9DD; overflow:hidden;
}
.pd__gorsel img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; transition:transform .35s ease;
}
.pd__a:hover .pd__gorsel img{ transform:scale(1.035); }
/* Portre yoksa: Kayı damgası filigranı */
.pd__bos{
  display:grid; place-items:center; width:100%; height:100%;
  color:var(--marka-yesil);
  background:linear-gradient(160deg,#E8EFE6,#D6DCCE);
}
.pd__bos svg{ width:42%; height:auto; }
.pd__ad{
  display:block; padding:.75rem .8rem 0;
  font-family:var(--f-display); font-size:1.02rem; line-height:1.25;
  color:var(--ink); text-wrap:balance;
}
.pd__lakap{
  display:block; padding:.2rem .8rem 0;
  font-size:.8rem; color:var(--oxide);
}
.pd__donem{
  display:block; margin-top:auto; padding:.5rem .8rem .8rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em;
  color:var(--muted);
}
@media (max-width:520px){
  .pd-grid{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:1rem .85rem; }
  .pd__ad{ font-size:.92rem; }
}

/* Detay sayfası künyesi */
.pd-kunye{ margin:1.1rem 0 1.4rem; display:flex; flex-wrap:wrap; gap:0 2.2rem; }
.pd-kunye>div{ padding:.15rem 0; }
.pd-kunye dt{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.pd-kunye dd{ margin:.15rem 0 0; font-size:1rem; color:var(--ink); }

/* Önceki / sonraki */
.pd-gezin{
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid #DDE2D6; border-bottom:1px solid #DDE2D6;
  padding:1.1rem 0; margin-bottom:1.4rem;
}
.pd-gezin__a{
  display:flex; flex-direction:column; gap:.2rem;
  text-decoration:none; color:inherit; max-width:48%;
}
.pd-gezin__a--ileri{ text-align:right; margin-left:auto; }
.pd-gezin__yon{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--oxide);
}
.pd-gezin__ad{ font-family:var(--f-display); font-size:1.02rem; color:var(--ink); }
.pd-gezin__a:hover .pd-gezin__ad{ text-decoration:underline; }
.pd-geri{ margin:0; }
@media (max-width:520px){ .pd-gezin__ad{ font-size:.9rem; } }

/* Biyografi metinlerinin sonundaki kaynak satırı */
.kisi__bio .kaynak{
  margin-top:1.6rem; padding-top:.9rem;
  border-top:1px solid #DDE2D6; color:var(--muted);
}
.kisi__bio .kaynak small{ font-size:.82rem; line-height:1.5; }

/* ==========================================================================
   ŞENLİK GALERİSİ — sayfa içi fotoğraf ızgarası

   DİKKAT: seçiciler `ul.gal` ile sınırlı. Sitede zaten bir `.gal` sınıfı var
   (views/place.php, <div class="gal">); sınırlamazsak onun düzenini de ezeriz.
   ========================================================================== */
/* Gövdeye doğrudan konan tekil fotoğraf. Tarayıcının <figure> için verdiği
   varsayılan `margin: 1em 40px` kaldırılmazsa görsel metinden 40px dar kalır. */
.prose > figure{ margin:2.25rem 0; }
.prose > figure > img{ width:100%; height:auto; border-radius:3px; display:block; }
.prose > figure > figcaption{
  margin-top:.45rem; font-size:.82rem; line-height:1.45; color:var(--muted);
}

ul.gal{
  list-style:none; margin:2.25rem 0; padding:0;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(2, 1fr);   /* 840px içerikte ikili sıra ≈ 411px kart */
}
ul.gal li{ margin:0; }
ul.gal figure{ margin:0; height:100%; }
ul.gal img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:3px; display:block; background:var(--limestone-2);
}
ul.gal figcaption{
  margin-top:.45rem; font-size:.82rem; line-height:1.45; color:var(--muted);
}
/* Öne çıkan kare iki sütun kaplar. Tek sayıda kartı olan galerinin son karesi
   de yayılır, böylece son satır hiç yarım kalmaz. */
ul.gal > li.gal--buyuk,
ul.gal > li:last-child:nth-child(odd){ grid-column:span 2; }
ul.gal > li:last-child:nth-child(odd) img{ aspect-ratio:2.4/1; }

@media (max-width:700px){
  ul.gal{ grid-template-columns:1fr; }
  ul.gal > li.gal--buyuk,
  ul.gal > li:last-child:nth-child(odd){ grid-column:auto; }
  ul.gal > li:last-child:nth-child(odd) img{ aspect-ratio:16/9; }
}

/* Program listesi — şenlik günleri */
.prg{ list-style:none; margin:1.5rem 0; padding:0; }
.prg li{
  margin:0; padding:.85rem 0 .85rem 1.5rem;
  border-bottom:1px solid #E1E6DA; position:relative;
}
.prg li:last-child{ border-bottom:0; }
.prg li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:7px; height:7px; border-radius:50%; background:var(--wheat);
}
.prg__ad{ font-weight:500; color:var(--marka-koyu); }
.prg__ac{ display:block; font-size:.9rem; color:var(--muted); margin-top:.15rem; }

/* ==========================================================================
   GEZİLECEK YERLER — kategori filtresi + kart ızgarası
   ========================================================================== */
.filtre{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem; }
.filtre a{
  font-size:.73rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:.5rem .95rem; border:1px solid #DDE3D5; color:var(--muted);
  background:#fff; text-decoration:none; border-radius:2px;
  transition:border-color .18s, color .18s, background .18s;
}
.filtre a:hover{ border-color:var(--marka-yesil); color:var(--marka-yesil); }
.filtre a.secili{ background:var(--marka-yesil); border-color:var(--marka-yesil); color:#fff; }

.izgara{ display:grid; gap:1.6rem; }
.izgara--3{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }

.kart{
  background:#fff; border:1px solid #DDE3D5; border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.kart:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(20,40,25,.55); }
.kart > a{ text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }

.kart__gorsel{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone-2); position:relative; }
.kart__gorsel img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.kart:hover .kart__gorsel img{ transform:scale(1.04); }

/* Kapağı olmayan kayıt: boş kutu yerine damga. Kaza değil, tasarım. */
.kart__gorsel--bos{
  background:linear-gradient(160deg, #E8EDE1 0%, #DCE4D3 100%);
  display:flex; align-items:center; justify-content:center;
}
.kart__gorsel--bos .kart__damga{
  width:34%; height:auto; object-fit:contain; opacity:.34;
}
.kart:hover .kart__gorsel--bos .kart__damga{ transform:none; }

.kart__play{
  position:absolute; right:.7rem; bottom:.7rem; width:2rem; height:2rem;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(14,59,38,.82); color:#fff;
}
.kart__play svg{ width:1rem; height:1rem; margin-left:2px; }

.kart__govde{ padding:1.25rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.kart__etiket{
  font-size:.63rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--marka-altin); margin-bottom:.55rem;
}
.kart__govde h3{ font-size:1.2rem; line-height:1.3; margin:0 0 .45rem; color:var(--marka-koyu); }
.kart__ozet{ font-size:.92rem; line-height:1.55; color:var(--muted); margin:0 0 1rem; }
.kart__alt{
  margin-top:auto; padding-top:.8rem; border-top:1px solid #E7EBE0;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marka-yesil);
}
.kart:hover .kart__alt{ color:var(--marka-altin); }

@media (max-width:520px){
  .izgara--3{ grid-template-columns:1fr; }
  .filtre a{ font-size:.7rem; padding:.45rem .8rem; }
}