/* ==========================================================================
   Nereden Gitsek — ana sayfa

   Brief: "highly clean, airy, editorial style with vast white space to let
   photography breathe. Elegant serif headers paired with crisp, highly
   legible sans-serif body. Earthy forest green primary, soft warm beige
   backgrounds, muted charcoal text."

   Bu dosya o dili uygular. Iki kural kendi kendini sinirliyor:

   1. FOTOGRAF DILDIR. Kartin uzerine yazi yazmiyoruz; fotograf dolu
      bir alan, uzerinde sadece ada ve tarih. Brief "vast white space"
      diyor -- bu, kartlarin bir kisminin bilerek bos birakilmasi demek,
      her seyin dolu olmasi degil.

   2. HAREKET SINIRLI. Parallax yalnizca hero'da (brief bunu istiyor ve
      tek yerde yapilir). Kart hover'unda hafif buyume. Bolum acilmalari
      YOK -- her sey kendi yerinde durur. Hareket, icerigi gostermek
      icin; sadece "canli" oldugu icin degil.

   Palet:
     --yesil   orman yesili, birincil marka rengi
     --deniz   derin deniz mavisi, ikincil vurgu
     --bej     sicak acik zemin
     --koks    muted charcoal metin
   ========================================================================== */

:root {
  --yesil: #2C4A3B;        /* orman yeşili — birincil */
  --yesel-koyu: #1E3529;
  --yesil-acik: #3E6552;
  --deniz: #1F4E5A;        /* derin deniz mavisi */
  --toprak: #8A6A4F;

  --bej: #F5F1EA;          /* sicak kâğıt */
  --bej-2: #EDE7DC;
  --beyaz: #FFFFFF;
  --koks: #2B2724;         /* muted charcoal */
  --koks-2: #5C554E;
  --koks-3: #8A8179;

  --r-s: 3px;
  --r-m: 6px;

  /* Serif yığın: sistemde kurulu olanlardan, webfont yok (CLAUDE.md §4
     sıfır dış bağımlılık kısıtı). Georgia/Charter gerçek serif'tir. */
  --serif: Charter, "Bitstream Charter", "Iowan Old Style",
           "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --egri: cubic-bezier(0.32, 0.72, 0, 1);
  --hiz: 200ms;
  --yavas: 520ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bej);
  color: var(--koks);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }

/* ============================================================ CAM NAV
   Brief: "sleek glassmorphism floating navigation bar". Sayfa koyu
   fotoğrafın üstünde başlar; cam panel içerik üstünden kayarken de
   okunur kalır. */

.cam {
  position: fixed; z-index: 80; top: 14px; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 28px));
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.65rem 0.9rem 0.65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.72);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 34px -18px rgba(28, 24, 20, 0.4);
  transition: background var(--hiz) var(--egri),
              border-color var(--hiz) var(--egri);
}
/* Sayfa aşağı inince cam opaklaşır: fotoğraf üstünde kayarken okunmaz
   olabiliyordu (olculdu: hero'nun açık gökyüzünde metin kayboluyordu). */
.cam[data-koyu="1"] {
  background: rgba(252, 250, 246, 0.93);
  border-color: rgba(28, 24, 20, 0.1);
}
.marka {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--koks); text-decoration: none; flex: none;
}
.marka svg { color: var(--yesil); }
.marka b { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; }
.cam-nav { display: flex; gap: 1.3rem; margin-left: auto; }
.cam-nav a {
  color: var(--koks-2); text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  transition: color var(--hiz) var(--egri);
}
.cam-nav a:hover { color: var(--yesil); }
.cam-cta {
  flex: none; padding: 0.5rem 1.1rem;
  border: 1px solid var(--yesil);
  border-radius: 999px;
  background: var(--yesil); color: #FFF;
  cursor: pointer; font-size: 0.87rem; font-weight: 600;
  transition: background var(--hiz) var(--egri);
}
.cam-cta:hover { background: var(--yesel-koyu); }

/* ============================================================ HERO
   Tam ekran fotoğraf + parallax. Fotoğraf veritabanından: Kapadokya
   (106 dilli) — gerçek bir yer, gerçek bir fotoğraf. */

/* Hero yüksekliği.

   SORUN (ölçüldü): `min-height: 100vh` + `align-items: center` ile
   1264x569 pencerede hero 768 px'e çıkıyordu ve arama kartı ekranın
   70 px altına taşıyordu. Sebep: içerik (başlık + arama + açıklama)
   544 px, padding 224 px — toplam 768 > 569. `min-height` bunu
   kısaltmaz, sadece taban belirler.

   ÇÖZÜM: hero içeriği ekrana göre küçülsün. `clamp()` ile başlık,
   açıklama ve arama arasındaki dikey ritmi ekrana bağlıyoruz; küçük
   ekranda hiçbir şey taşmıyor, büyük ekranda tam ekran kalıyor. */
.hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(4.75rem, 13vh, 7rem) clamp(1rem, 5vw, 5rem)
           clamp(3.5rem, 9vh, 5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-ic {
  position: relative; z-index: 2;
  width: min(52rem, 100%);
  color: #FFF;
  /* Yukari yaslanir: ortalarsak kisa ekranlarda alt bosluk acilir ve
     kaydirma gostergesi basliga biner. */
  margin-top: clamp(0.5rem, 3vh, 3rem);
}
.hero-gorsel {
  position: absolute; inset: -12% 0 0;      /* parallax için üstten pay */
  z-index: 0;
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  will-change: transform;
}
.hero-katman {
  position: absolute; inset: 0; z-index: 1;
  /* Fotoğrafın üstünde okunacak metin var: iki yönlü degrade.
     Üstte daha koyu (beyaz cam panel okunsun), ortada açık (metin
     okunsun), altta koyu (kaydırma göstergesi). */
  background:
    linear-gradient(180deg, rgba(18, 24, 20, 0.55) 0%,
                            rgba(18, 24, 20, 0.18) 28%,
                            rgba(18, 24, 20, 0.30) 62%,
                            rgba(18, 24, 20, 0.68) 100%);
}
/* Baslik: yuksekligin bir kismi kadar. Kucuk pencerede kuculur. */
.hero h1 {
  font-size: clamp(2.1rem, min(7.5vw, 9vh), 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  animation: yuk-ok 760ms var(--egri) both;
}
.hero h1 em {
  font-style: italic;
  /* "değerli yerler" — gazetede vurgulanan ifade. */
  animation: yuk-ok 760ms var(--egri) 110ms both;
}
.hero-alt {
  max-width: 40ch;
  margin: clamp(0.6rem, 2vh, 1.3rem) 0 0;
  font-size: clamp(0.95rem, 1.9vh, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
  animation: yuk-ok 760ms var(--egri) 200ms both;
}
@keyframes yuk-ok {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- ARAMA
   Brief: "intuitive search widget". Üç şehir/sayı alanı + tek düğme.
   Alanlar yarı saydam cam — fotoğrafın üstünde ama okunabilir. */
.arama {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.45rem 0.9rem;
  margin-top: clamp(0.9rem, 3vh, 2.2rem);
  padding: clamp(0.8rem, 2vh, 1.1rem);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  background: rgba(252, 250, 246, 0.16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  animation: yuk-ok 760ms var(--egri) 300ms both;
}
.arama-alan { position: relative; }
.arama-alan label {
  display: block; margin-bottom: 0.28rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.arama-alan input,
.sayi input {
  width: 100%; padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.92);
  color: var(--koks);
  outline: none;
  transition: border-color var(--hiz) var(--egri),
              box-shadow var(--hiz) var(--egri);
}
.arama-alan input { font-size: 1.05rem; font-weight: 560; }
.arama-alan input:focus,
.sayi input:focus {
  border-color: #FFF;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}
.arama-ok {
  padding-bottom: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  flex: none;
}
.arama-sayilar {
  grid-column: 1 / 3;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.sayi label, .sayi span {
  display: block; margin-bottom: 0.28rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.sayi input { text-align: center; font-variant-numeric: tabular-nums; }

.arama-git {
  grid-column: 3; grid-row: 2;
  padding: 0.62rem 1.2rem;
  border: 1px solid var(--yesil);
  border-radius: var(--r-m);
  background: var(--yesil); color: #FFF;
  cursor: pointer; font-weight: 620; font-size: 0.95rem;
  transition: background var(--hiz) var(--egri);
  align-self: end;
}
.arama-git:hover { background: var(--yesel-koyu); }
.arama-git[disabled] { opacity: 0.55; cursor: progress; }

.arama-not {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  min-height: 1.4em;
}
.arama-not hata { color: #FFC9C4; font-weight: 600; }

.oneri {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 250px; overflow-y: auto; padding: 4px;
  border: 1px solid rgba(28, 24, 20, 0.12);
  border-radius: var(--r-m);
  background: #FFF;
  box-shadow: 0 16px 40px -20px rgba(28, 24, 20, 0.4);
}
.oneri button {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--koks);
  text-align: left; cursor: pointer;
}
.oneri button:hover, .oneri button[aria-selected="true"] {
  background: rgba(44, 74, 59, 0.08);
}
.oneri-ad { flex: 1; font-weight: 550; }
.oneri-il { color: var(--koks-3); font-size: 0.8rem; white-space: nowrap; }
.oneri-bos { padding: 8px; color: var(--koks-3); font-size: 0.86rem; }

.hero-kaydirma {
  position: absolute; z-index: 2; bottom: clamp(0.8rem, 3vh, 2rem); left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.7));
}
.hero-kaydirma::after {
  content: ''; position: absolute; left: -2px; bottom: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #FFF;
  animation: kaysin 2.4s var(--egri) infinite;
}
@keyframes kaysin {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(-38px); opacity: 0.2; }
}

/* ============================================================ BOLUMLER
   Geniş kenar boşlukları: brief "vast white space". */

.bolum {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 3rem);
}
.bolum-ust { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.bolum-ust h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  margin-bottom: 0.7rem;
}
.bolum-ust p {
  margin: 0; color: var(--koks-2);
  font-size: 1.02rem; line-height: 1.65;
}

/* ---------------------------------------------------------- TEMALAR
   /api/interests'ten gelen gerçek temalar. Kart yükseklikleri
   farklı (valla / yatay) — brief'teki "masonry hissi" ama CSS sütun
   hack'i değil, grid-span ile. */
.tema-izgara {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.tema {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid rgba(28, 24, 20, 0.1);
  border-radius: var(--r-m);
  background: var(--beyaz);
  text-align: left; cursor: pointer;
  transition: border-color var(--hiz) var(--egri),
              transform var(--hiz) var(--egri),
              box-shadow var(--hiz) var(--egri);
}
.tema:nth-child(1), .tema:nth-child(4) { grid-column: span 3; }
.tema:hover {
  border-color: var(--yesil);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -22px rgba(28, 24, 20, 0.5);
}
.tema[aria-pressed="true"] {
  border-color: var(--yesil);
  background: rgba(44, 74, 59, 0.05);
}
.tema-ad {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.2;
}
.tema-kategoriler {
  color: var(--koks-3); font-size: 0.86rem; line-height: 1.55;
}
.tema-sayi {
  margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--yesil);
}

/* ---------------------------------------------------------- ROTALAR
   Brief: "each card must show an image, a mini route map graphic, trip
   duration, and tags". Dördü de var — mini harita kendi SVG'si. */

.rota-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
}
.rota {
  display: flex; flex-direction: column;
  border: 1px solid rgba(28, 24, 20, 0.1);
  border-radius: var(--r-m);
  background: var(--beyaz);
  overflow: hidden;
  transition: transform var(--hiz) var(--egri),
              box-shadow var(--hiz) var(--egri),
              border-color var(--hiz) var(--egri);
}
.rota:hover {
  transform: translateY(-4px);
  border-color: rgba(28, 24, 20, 0.2);
  box-shadow: 0 22px 48px -26px rgba(28, 24, 20, 0.45);
}

/* Fotoğraf: brief "hover-zoom micro-interaction". Yalnızca fotoğraf
   büyür; kartın kendisi yerinde kalır (taşma hissi vermesin). */
.rota-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bej-2);
}
.rota-foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 700ms var(--egri);
}
.rota:hover .rota-foto img { transform: scale(1.06); }
.rota-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(20, 16, 12, 0.5));
  pointer-events: none;
}
.rota-etiket {
  position: absolute; z-index: 2; left: 0.9rem; bottom: 0.8rem;
  display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.rozet {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
  color: var(--koks);
}
.rozet-yesil { background: var(--yesil); color: #FFF; }

/* Mini rota haritası: kartın içinde, fotoğrafın altında. Kendi
   SVG'si — dış harita/Leaflet yok, bu bir GÖRSEL. */
.rota-mini {
  height: 96px;
  border-bottom: 1px solid rgba(28, 24, 20, 0.08);
  background: linear-gradient(180deg, rgba(44,74,59,.04), transparent);
}
.rota-mini svg { width: 100%; height: 100%; display: block; }

.rota-govde { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.rota-yol {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.24;
}
.rota-yol .ok { color: var(--koks-3); font-size: 0.9em; }
.rota-olcu {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.83rem; color: var(--koks-2);
  font-variant-numeric: tabular-nums;
}
.rota-gunler { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid rgba(28,24,20,.08); }
.rota-gun {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.3rem 0; font-size: 0.85rem;
}
.rota-gun-no {
  flex: none; width: 1.5rem;
  font-family: var(--serif); font-size: 0.95rem;
  color: var(--yesil); font-weight: 600;
}
.rota-gun-ad { color: var(--koks-2); }
.rota-ac {
  margin-top: 0.7rem; padding: 0.55rem 0.9rem;
  border: 1px solid var(--yesil);
  border-radius: var(--r-m);
  background: transparent; color: var(--yesil);
  cursor: pointer; font-weight: 600; font-size: 0.87rem;
  transition: background var(--hiz) var(--egri), color var(--hiz) var(--egri);
}
.rota-ac:hover { background: var(--yesil); color: #FFF; }

/* ---------------------------------------------------------- HARITA */

.harita-duzen {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
}
@media (max-width: 900px) { .harita-duzen { grid-template-columns: 1fr; } }

.harita-kutu {
  border: 1px solid rgba(28, 24, 20, 0.12);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--beyaz);
}
#harita { height: clamp(380px, 56vh, 620px); }
.leaflet-container { background: #EAE4D8; font: inherit; }
.leaflet-control-attribution {
  background: rgba(245, 241, 234, 0.85) !important;
  color: var(--koks-3) !important; font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--koks-2) !important; }
.leaflet-bar a {
  background: #FFF !important; color: var(--koks) !important;
  border-color: rgba(28,24,20,.14) !important;
}

.harita-bilgi {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(28, 24, 20, 0.1);
  border-radius: var(--r-m);
  background: var(--beyaz);
  margin-bottom: 1rem;
}
.harita-bilgi h3 {
  font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.5rem;
}
.harita-bilgi p { margin: 0; color: var(--koks-2); font-size: 0.9rem; }

.harita-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.harita-liste button {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 0.7rem; align-items: baseline;
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1px solid rgba(28, 24, 20, 0.1);
  border-radius: var(--r-m);
  background: var(--beyaz);
  cursor: pointer; text-align: left;
  transition: border-color var(--hiz) var(--egri),
              background var(--hiz) var(--egri);
}
.harita-liste button:hover { border-color: var(--yesil); }
.harita-liste button[aria-selected="true"] {
  border-color: var(--yesil);
  background: rgba(44, 74, 59, 0.05);
}
.h-liste-gun {
  font-family: var(--serif); font-size: 0.95rem;
  color: var(--yesil); font-weight: 600; white-space: nowrap;
}
.h-liste-ad { font-size: 0.92rem; }
.h-liste-ad b { font-weight: 600; }
.h-liste-ad span { color: var(--koks-3); font-size: 0.83rem; }
.h-liste-sure {
  font-size: 0.78rem; color: var(--koks-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================ KAPANIS */

.kapanis {
  background: var(--yesil);
  color: #FFF;
  padding: clamp(3.4rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem);
}
.kapanis-ic { max-width: 44rem; margin: 0 auto; text-align: center; }
.kapanis h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.14; margin-bottom: 0.8rem;
}
.kapanis p { margin: 0 0 1.8rem; color: rgba(255,255,255,.86); font-size: 1.02rem; }

.bulten {
  display: grid; grid-template-columns: 1.6fr 1fr auto;
  gap: 0.7rem; align-items: start;
}
.bulten-alan { text-align: left; }
.bulten-alan label {
  display: block; margin-bottom: 0.25rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.bulten-alan label span { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.bulten input {
  width: 100%; padding: 0.62rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.1);
  color: #FFF; outline: none;
  transition: border-color var(--hiz) var(--egri),
              box-shadow var(--hiz) var(--egri);
}
.bulten input::placeholder { color: rgba(255, 255, 255, 0.55); }
.bulten input:focus {
  border-color: #FFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.bulten-git {
  align-self: end;
  padding: 0.62rem 1.3rem;
  border: 1px solid #FFF; border-radius: var(--r-m);
  background: #FFF; color: var(--yesil);
  cursor: pointer; font-weight: 620; white-space: nowrap;
  transition: background var(--hiz) var(--egri);
}
.bulten-git:hover { background: var(--bej); }
.bulten-durum {
  grid-column: 1 / -1; margin: 0.3rem 0 0;
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.9);
  min-height: 1.3em;
}

/* ============================================================ ALT */

.alt {
  padding: 2.2rem clamp(1rem, 5vw, 3rem);
  border-top: 1px solid rgba(28, 24, 20, 0.1);
  background: var(--bej);
}
.alt-ic {
  max-width: 1180px; margin: 0 auto;
  display: flex; gap: 1rem 2rem; flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.83rem; color: var(--koks-3);
}
.alt-kaynak { flex: 1; min-width: 16rem; }
.alt a { color: var(--koks-2); text-decoration: none; }
.alt a:hover { color: var(--yesil); text-decoration: underline; }

/* ============================================================ MODAL
   Rota kartı açılınca gün gün detay. */

.perde {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24, 20, 16, 0.55);
  backdrop-filter: blur(3px);
  animation: bel 240ms var(--egri) both;
}
@keyframes bel { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: fixed; z-index: 91; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--bej);
  border-radius: 10px;
  box-shadow: 0 40px 90px -40px rgba(24, 20, 16, 0.7);
  animation: yuk-ok 300ms var(--egri) both;
}
.modal-ust {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.3rem 1.5rem 1rem;
  background: var(--bej);
  border-bottom: 1px solid rgba(28, 24, 20, 0.1);
}
.modal-ust h2 { font-size: 1.7rem; line-height: 1.16; }
.modal-ust p { margin: 0.35rem 0 0; color: var(--koks-2); font-size: 0.9rem; }
.modal-kapat {
  flex: none; padding: 0.3rem; border: 0;
  border-radius: var(--r-s); background: transparent;
  color: var(--koks-2); cursor: pointer;
  display: grid; place-content: center;
}
.modal-kapat:hover { background: var(--bej-2); color: var(--koks); }

.modal-govde { padding: 1.3rem 1.5rem 2rem; }
.mg-gun { margin-bottom: 2rem; }
.mg-gun:last-child { margin-bottom: 0; }
.mg-bas {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  padding-bottom: 0.5rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(28, 24, 20, 0.16);
}
.mg-gun-no { font-family: var(--serif); font-size: 1.3rem; color: var(--yesil); }
.mg-bas span { font-size: 0.86rem; color: var(--koks-2); font-variant-numeric: tabular-nums; }
.mg-durak {
  display: grid; grid-template-columns: 108px 1fr; gap: 0.9rem;
  padding: 0.7rem 0;
}
.mg-durak + .mg-durak { border-top: 1px solid rgba(28, 24, 20, 0.07); }
.mg-durak img {
  width: 108px; height: 81px; object-fit: cover;
  border-radius: var(--r-s); background: var(--bej-2); display: block;
}
.mg-durak-ic { min-width: 0; }
.mg-durak h4 {
  margin: 0 0 0.2rem; font-family: var(--serif);
  font-size: 1.02rem; font-weight: 500;
}
.mg-durak-meta {
  font-size: 0.79rem; color: var(--koks-3);
  font-variant-numeric: tabular-nums;
}
.mg-anlati {
  margin: 0.35rem 0 0; font-size: 0.88rem;
  color: var(--koks-2); line-height: 1.6;
}
.mg-gece {
  margin-top: 0.6rem; padding: 0.55rem 0.8rem;
  border-left: 2px solid var(--yesil);
  background: var(--beyaz);
  font-size: 0.86rem; color: var(--koks-2);
}

/* ============================================================ MOBIL */

@media (max-width: 860px) {
  body { font-size: 16px; }
  .cam { gap: 0.8rem; padding-left: 0.9rem; }
  .cam-nav { display: none; }
  .tema-izgara { grid-template-columns: 1fr; }
  .tema, .tema:nth-child(1), .tema:nth-child(4) { grid-column: span 1; }
  .arama { grid-template-columns: 1fr; }
  .arama-ok { display: none; }
  .arama-sayilar { grid-column: 1; }
  .arama-git { grid-column: 1; grid-row: auto; }
  .bulten { grid-template-columns: 1fr; }
  .mg-durak { grid-template-columns: 76px 1fr; }
  .mg-durak img { width: 76px; height: 57px; }
}

/* Çok dar telefonlar (320–380 px): üç sayı alanı yan yana sıkışıyordu
   (olculdu: 390 px'te 105 px alan, 320 px'te ~85 px — etiket "Günde saat"
   iki satıra bölünüyordu). Alt alta düzeltildi. */
@media (max-width: 380px) {
  .arama-sayilar { grid-template-columns: 1fr 1fr; }
  .arama-sayilar .sayi:last-child { grid-column: 1 / -1; }
  .cam { top: 8px; width: calc(100vw - 16px); }
  .marka b { font-size: 0.95rem; }
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* Hareketi sevmeyen biri: parallax ve geçişler kapanır, içerik yerinde. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--yesil); outline-offset: 3px; }