/* ==========================================================================
   cemevibul.com — Tasarim Sistemi
   Mobil oncelikli. Harici bagimlilik yok (font, framework, CDN). Tek dosya.

   Katman sirasi:
     1. Tokenlar (renk, tipografi, bosluk, golge)
     2. Sifirlama ve taban
     3. Yerlesim kabugu (ust cubuk + icerik + altbilgi + mobil alt menu)
     4. Bilesenler
     5. Yardimci siniflar

   NOT: Bu dosyada `!important` kullanilmaz. Ozgulluk dusuk ve duz tutulur;
   boylece "ezme mantigi" hic dogmaz.

   RENK SECIMI: yesil Alevilikte tasiyici renktir; marka olcegi oradan geliyor.
   Kehribar (cerag/mum sicakligi) yalniz vurgu icin, genis alanlarda degil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENLAR
   -------------------------------------------------------------------------- */

:root {
  /* --- ham basamaklar --- */
  --n-0:   #ffffff;
  --n-50:  #f8fafb;
  --n-100: #f1f4f6;
  --n-200: #e3e8ec;
  --n-300: #cbd4da;
  --n-400: #97a5af;
  --n-500: #6b7a85;
  --n-600: #4e5c67;
  --n-700: #3a464f;
  --n-800: #27313a;
  --n-900: #19222a;
  --n-950: #0e151b;

  --yesil-50:  #eef7f2;
  --yesil-100: #d6ecdf;
  --yesil-200: #aed9c1;
  --yesil-300: #7cc09e;
  --yesil-400: #4ba37c;
  --yesil-500: #2c8862;
  --yesil-600: #1e6e4e;
  --yesil-700: #185840;
  --yesil-800: #144534;
  --yesil-900: #0f3527;
  --yesil-950: #071f17;

  --kehribar-300: #f6cc64;
  --kehribar-400: #f0b429;
  --kehribar-500: #de9b0c;
  --kehribar-600: #b87a09;

  --kirmizi-400: #ef6b6b;
  --kirmizi-500: #dc3f3f;
  --kirmizi-600: #b92b2b;

  --mavi-400: #5aa6e8;
  --mavi-500: #2f85d0;

  /* --- anlamsal roller — TEMA ILE DEGISEN TEK YER BURASIDIR --- */
  --zemin:             var(--n-50);
  --zemin-yukseltilmis: var(--n-0);
  --zemin-batik:       var(--n-100);
  --zemin-ters:        var(--yesil-900);

  --metin:         var(--n-800);
  --metin-yumusak: var(--n-600);
  --metin-silik:   var(--n-500);
  --metin-ters:    var(--n-0);

  --kenar:        var(--n-200);
  --kenar-koyu:   var(--n-300);

  --vurgu:        var(--yesil-600);
  --vurgu-koyu:   var(--yesil-700);
  --vurgu-acik:   var(--yesil-50);
  --vurgu-metin:  var(--n-0);

  --altin:        var(--kehribar-500);
  --altin-acik:   #fdf6e4;

  --uyari:        var(--kehribar-600);
  --uyari-acik:   #fdf6e4;
  --kotu:         var(--kirmizi-600);
  --kotu-acik:    #fdeeee;
  --iyi:          var(--yesil-600);
  --iyi-acik:     var(--yesil-50);

  /* harita */
  --harita-il:         #dfe9ef;
  --harita-il-kenar:   #ffffff;
  --harita-il-veri-1:  var(--yesil-200);
  --harita-il-veri-2:  var(--yesil-400);
  --harita-il-veri-3:  var(--yesil-600);
  --harita-il-vurgu:   var(--kehribar-400);

  /* --- tipografi --- */
  --yazi-govde: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --yazi-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --olcek-xs:  0.75rem;
  --olcek-sm:  0.8125rem;
  --olcek-md:  0.9375rem;
  --olcek-lg:  1.0625rem;
  --olcek-xl:  1.25rem;
  --olcek-2xl: 1.5rem;
  --olcek-3xl: 1.875rem;
  --olcek-4xl: 2.375rem;

  /* --- bosluk (4px tabanli) --- */
  --bosluk-1:  0.25rem;
  --bosluk-2:  0.5rem;
  --bosluk-3:  0.75rem;
  --bosluk-4:  1rem;
  --bosluk-5:  1.25rem;
  --bosluk-6:  1.5rem;
  --bosluk-8:  2rem;
  --bosluk-10: 2.5rem;
  --bosluk-12: 3rem;
  --bosluk-16: 4rem;

  /* --- kose, golge, gecis --- */
  --kose-sm:  6px;
  --kose-md:  10px;
  --kose-lg:  16px;
  --kose-xl:  22px;
  --kose-tam: 999px;

  --golge-xs: 0 1px 2px rgba(14, 21, 27, .06);
  --golge-sm: 0 1px 3px rgba(14, 21, 27, .08), 0 1px 2px rgba(14, 21, 27, .04);
  --golge-md: 0 4px 12px rgba(14, 21, 27, .08), 0 2px 4px rgba(14, 21, 27, .04);
  --golge-lg: 0 12px 28px rgba(14, 21, 27, .12), 0 4px 8px rgba(14, 21, 27, .05);

  --gecis-hizli: 120ms cubic-bezier(.4, 0, .2, 1);
  --gecis-orta:  220ms cubic-bezier(.4, 0, .2, 1);

  /* --- olculer --- */
  --ust-cubuk-yukseklik: 60px;
  --alt-menu-yukseklik:  58px;
  --icerik-max:          1180px;
  --yan-bosluk:          16px;

  /* --- z sirasi --- */
  --z-harita:    10;
  --z-ust-cubuk: 60;
  --z-perde:     70;
  --z-panel:     80;
  --z-alt-menu:  90;
  --z-tost:      100;
}

/* Koyu tema — sistem tercihi, ama kullanici data-tema ile ezebilir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin:             var(--n-950);
    --zemin-yukseltilmis: var(--n-900);
    --zemin-batik:       #0a1016;
    --zemin-ters:        var(--yesil-950);

    --metin:         #e8edf1;
    --metin-yumusak: #b3bfc8;
    --metin-silik:   #8493a0;

    --kenar:      #26313a;
    --kenar-koyu: #35434e;

    --vurgu:       var(--yesil-400);
    --vurgu-koyu:  var(--yesil-300);
    --vurgu-acik:  #12281f;
    --vurgu-metin: var(--n-950);

    --altin:      var(--kehribar-400);
    --altin-acik: #2a2112;

    --uyari:      var(--kehribar-400);
    --uyari-acik: #2a2112;
    --kotu:       var(--kirmizi-400);
    --kotu-acik:  #2c1616;
    --iyi:        var(--yesil-400);
    --iyi-acik:   #12281f;

    --harita-il:        #1d2830;
    --harita-il-kenar:  #0e151b;
    --harita-il-veri-1: var(--yesil-800);
    --harita-il-veri-2: var(--yesil-600);
    --harita-il-veri-3: var(--yesil-400);

    --golge-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --golge-md: 0 4px 12px rgba(0, 0, 0, .5);
    --golge-lg: 0 12px 28px rgba(0, 0, 0, .55);
  }
}

:root[data-tema="koyu"] {
  --zemin:             var(--n-950);
  --zemin-yukseltilmis: var(--n-900);
  --zemin-batik:       #0a1016;
  --zemin-ters:        var(--yesil-950);

  --metin:         #e8edf1;
  --metin-yumusak: #b3bfc8;
  --metin-silik:   #8493a0;

  --kenar:      #26313a;
  --kenar-koyu: #35434e;

  --vurgu:       var(--yesil-400);
  --vurgu-koyu:  var(--yesil-300);
  --vurgu-acik:  #12281f;
  --vurgu-metin: var(--n-950);

  --altin:      var(--kehribar-400);
  --altin-acik: #2a2112;

  --uyari:      var(--kehribar-400);
  --uyari-acik: #2a2112;
  --kotu:       var(--kirmizi-400);
  --kotu-acik:  #2c1616;
  --iyi:        var(--yesil-400);
  --iyi-acik:   #12281f;

  --harita-il:        #1d2830;
  --harita-il-kenar:  #0e151b;
  --harita-il-veri-1: var(--yesil-800);
  --harita-il-veri-2: var(--yesil-600);
  --harita-il-veri-3: var(--yesil-400);

  --golge-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --golge-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --golge-md: 0 4px 12px rgba(0, 0, 0, .5);
  --golge-lg: 0 12px 28px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   2. SIFIRLAMA VE TABAN
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

body {
  font-family: var(--yazi-govde);
  font-size: var(--olcek-md);
  line-height: 1.6;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Mobilde alt menu icerigin ustune binmesin. */
  padding-bottom: calc(var(--alt-menu-yukseklik) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

a {
  color: var(--vurgu);
  text-decoration: none;
  transition: color var(--gecis-hizli);
}

a:hover { color: var(--vurgu-koyu); text-decoration: underline; }

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--metin);
}

h1 { font-size: var(--olcek-3xl); }
h2 { font-size: var(--olcek-2xl); }
h3 { font-size: var(--olcek-xl); }
h4 { font-size: var(--olcek-lg); }

@media (min-width: 720px) {
  h1 { font-size: var(--olcek-4xl); }
}

p { line-height: 1.7; }

:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: var(--kose-sm);
}

::selection { background: var(--vurgu); color: var(--vurgu-metin); }

/* Klavye kullanicisi icin ilk sekme hedefi. */
.atla {
  position: absolute;
  left: -9999px;
  top: var(--bosluk-2);
  z-index: var(--z-tost);
  padding: var(--bosluk-2) var(--bosluk-4);
  background: var(--vurgu);
  color: var(--vurgu-metin);
  border-radius: var(--kose-sm);
}

.atla:focus { left: var(--bosluk-2); }

/* --------------------------------------------------------------------------
   3. YERLESIM KABUGU
   -------------------------------------------------------------------------- */

.kap {
  width: 100%;
  max-width: var(--icerik-max);
  margin-inline: auto;
  padding-inline: var(--yan-bosluk);
}

.kap--genis { max-width: 1400px; }

/* --- ust cubuk --- */

.ust-cubuk {
  position: sticky;
  top: 0;
  z-index: var(--z-ust-cubuk);
  height: var(--ust-cubuk-yukseklik);
  display: flex;
  align-items: center;
  background: var(--zemin-yukseltilmis);
  border-bottom: 1px solid var(--kenar);
  backdrop-filter: saturate(180%) blur(8px);
}

.ust-cubuk__ic {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  width: 100%;
  max-width: var(--icerik-max);
  margin-inline: auto;
  padding-inline: var(--yan-bosluk);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-weight: 800;
  font-size: var(--olcek-lg);
  letter-spacing: -0.02em;
  color: var(--metin);
  white-space: nowrap;
}

.marka:hover { color: var(--vurgu); text-decoration: none; }

.marka__isaret {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--kose-md);
  background: linear-gradient(145deg, var(--yesil-500), var(--yesil-700));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--golge-sm);
}

.marka__isaret svg { width: 20px; height: 20px; }

.marka__ad small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--metin-silik);
  line-height: 1;
  margin-top: 2px;
}

/* --- ust cubuk gezinme (masaustu) --- */

.ust-gezinme {
  display: none;
  align-items: center;
  gap: var(--bosluk-1);
  margin-inline-start: auto;
}

@media (min-width: 900px) {
  .ust-gezinme { display: flex; }
}

.ust-gezinme__oge {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--kose-md);
  font-size: var(--olcek-md);
  font-weight: 600;
  color: var(--metin-yumusak);
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}

.ust-gezinme__oge:hover {
  background: var(--zemin-batik);
  color: var(--metin);
  text-decoration: none;
}

.ust-gezinme__oge[aria-current="page"] {
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.ust-gezinme__oge svg { width: 18px; height: 18px; flex: none; }

/* --- icerik --- */

.icerik { padding-block: var(--bosluk-6) var(--bosluk-12); }

@media (min-width: 720px) {
  .icerik { padding-block: var(--bosluk-8) var(--bosluk-16); }
}

/* --- altbilgi --- */

.altbilgi {
  border-top: 1px solid var(--kenar);
  background: var(--zemin-yukseltilmis);
  padding-block: var(--bosluk-10) var(--bosluk-8);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.altbilgi__izgara {
  display: grid;
  gap: var(--bosluk-8);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .altbilgi__izgara { grid-template-columns: 1.4fr 1fr 1fr; }
}

.altbilgi h4 {
  font-size: var(--olcek-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--metin-silik);
  margin-bottom: var(--bosluk-3);
}

.altbilgi ul { list-style: none; padding: 0; display: grid; gap: var(--bosluk-2); }

.altbilgi a { color: var(--metin-yumusak); }
.altbilgi a:hover { color: var(--vurgu); }

.altbilgi__alt {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--kenar);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  justify-content: space-between;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
}

/* --- mobil sabit alt menu ("uygulama gibi") --- */

.alt-menu {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-alt-menu);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--zemin-yukseltilmis);
  border-top: 1px solid var(--kenar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(14, 21, 27, .06);
}

@media (min-width: 900px) {
  .alt-menu { display: none; }
}

.alt-menu__oge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Dokunma hedefi en az 44px — parmakla isabet icin. */
  min-height: var(--alt-menu-yukseklik);
  padding: var(--bosluk-1);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--metin-silik);
  text-align: center;
  transition: color var(--gecis-hizli);
  -webkit-tap-highlight-color: transparent;
}

.alt-menu__oge:hover { text-decoration: none; color: var(--metin-yumusak); }

.alt-menu__oge svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
  transition: transform var(--gecis-hizli);
}

.alt-menu__oge[aria-current="page"] { color: var(--vurgu); }

.alt-menu__oge[aria-current="page"] svg { transform: translateY(-1px) scale(1.06); }

.alt-menu__oge[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--vurgu);
}

.alt-menu__oge { position: relative; }

/* --------------------------------------------------------------------------
   4. BILESENLER
   -------------------------------------------------------------------------- */

/* --- dugme --- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 44px;
  padding: var(--bosluk-2) var(--bosluk-5);
  border: 1px solid transparent;
  border-radius: var(--kose-md);
  font-size: var(--olcek-md);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli),
              color var(--gecis-hizli), transform var(--gecis-hizli);
}

.dugme:hover { text-decoration: none; }
.dugme:active { transform: translateY(1px); }

.dugme svg { width: 18px; height: 18px; flex: none; }

.dugme--birincil {
  background: var(--vurgu);
  color: var(--vurgu-metin);
  box-shadow: var(--golge-sm);
}

.dugme--birincil:hover { background: var(--vurgu-koyu); color: var(--vurgu-metin); }

.dugme--ikincil {
  background: var(--zemin-yukseltilmis);
  border-color: var(--kenar-koyu);
  color: var(--metin);
}

.dugme--ikincil:hover { background: var(--zemin-batik); color: var(--metin); }

.dugme--hayalet {
  background: transparent;
  color: var(--metin-yumusak);
}

.dugme--hayalet:hover { background: var(--zemin-batik); color: var(--metin); }

.dugme--kucuk {
  min-height: 36px;
  padding: var(--bosluk-1) var(--bosluk-3);
  font-size: var(--olcek-sm);
}

.dugme--tam { width: 100%; }

/* --- arama --- */

.arama {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.arama__ikon {
  position: absolute;
  inset-inline-start: 14px;
  width: 20px;
  height: 20px;
  color: var(--metin-silik);
  pointer-events: none;
}

.arama__girdi {
  width: 100%;
  min-height: 52px;
  padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-3) 44px;
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar-koyu);
  border-radius: var(--kose-tam);
  font-size: var(--olcek-lg);
  color: var(--metin);
  box-shadow: var(--golge-sm);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.arama__girdi::placeholder { color: var(--metin-silik); }

.arama__girdi:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 4px var(--vurgu-acik), var(--golge-sm);
}

.arama__dugme {
  position: absolute;
  inset-inline-end: 6px;
  min-height: 40px;
  padding-inline: var(--bosluk-4);
  border: 0;
  border-radius: var(--kose-tam);
  background: var(--vurgu);
  color: var(--vurgu-metin);
  font-weight: 600;
  font-size: var(--olcek-sm);
}

.arama__dugme:hover { background: var(--vurgu-koyu); }

/* Oneri listesi */
.arama__oneriler {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: var(--z-panel);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  box-shadow: var(--golge-lg);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}

.arama__oneriler:empty { display: none; }

.arama__oneri {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: 1px solid var(--kenar);
  color: var(--metin);
}

.arama__oneri:last-child { border-bottom: 0; }
.arama__oneri:hover,
.arama__oneri[aria-selected="true"] { background: var(--vurgu-acik); text-decoration: none; }

.arama__oneri strong { font-weight: 600; display: block; }
.arama__oneri small { color: var(--metin-silik); font-size: var(--olcek-xs); }

/* --- kahraman bolum --- */

.kahraman {
  position: relative;
  padding-block: var(--bosluk-10) var(--bosluk-8);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--vurgu-acik) 0%, transparent 62%),
    var(--zemin);
  border-bottom: 1px solid var(--kenar);
  text-align: center;
}

.kahraman__baslik {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--bosluk-3);
  text-wrap: balance;
}

.kahraman__aciklama {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--bosluk-6);
  color: var(--metin-yumusak);
  font-size: var(--olcek-lg);
  text-wrap: pretty;
}

.kahraman__arama { max-width: 580px; margin-inline: auto; }

.kahraman__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  justify-content: center;
  margin-top: var(--bosluk-5);
}

/* --- olcum seridi --- */

.olcum-serit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-8);
}

@media (min-width: 640px) {
  .olcum-serit { grid-template-columns: repeat(4, 1fr); }
}

.olcum {
  padding: var(--bosluk-4);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  text-align: center;
}

.olcum__deger {
  font-size: var(--olcek-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vurgu);
  line-height: 1.1;
}

.olcum__etiket {
  margin-top: 2px;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- kart --- */

.kart {
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  overflow: hidden;
}

.kart__baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4) var(--bosluk-5);
  border-bottom: 1px solid var(--kenar);
}

.kart__baslik h2,
.kart__baslik h3 { font-size: var(--olcek-lg); }

.kart__govde { padding: var(--bosluk-5); }

/* --- bolum basligi --- */

.bolum-basligi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-4);
  margin-bottom: var(--bosluk-5);
}

.bolum-basligi p {
  margin-top: var(--bosluk-1);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

/* --- cemevi kart listesi --- */

.kart-izgara {
  display: grid;
  gap: var(--bosluk-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .kart-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kart-izgara { grid-template-columns: repeat(3, 1fr); } }

.yer-kart {
  display: flex;
  flex-direction: column;
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  overflow: hidden;
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-orta),
              transform var(--gecis-orta);
}

.yer-kart:hover {
  border-color: var(--yesil-300);
  box-shadow: var(--golge-md);
  transform: translateY(-2px);
}

.yer-kart__gorsel {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--zemin-batik);
  overflow: hidden;
}

.yer-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Gorseli olmayan kayit cok — bos gri kutu yerine desenli bir yer tutucu. */
.yer-kart__bos {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--yesil-300);
  background:
    linear-gradient(135deg, var(--vurgu-acik) 0%, transparent 70%),
    var(--zemin-batik);
}

.yer-kart__bos svg { width: 46px; height: 46px; opacity: .55; }

.yer-kart__govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  padding: var(--bosluk-4);
  flex: 1;
}

.yer-kart__ad {
  font-size: var(--olcek-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.yer-kart__ad a { color: var(--metin); }
.yer-kart__ad a:hover { color: var(--vurgu); text-decoration: none; }

.yer-kart__konum {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.yer-kart__konum svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--metin-silik); }

.yer-kart__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
  margin-top: auto;
  padding-top: var(--bosluk-3);
}

/* --- rozet --- */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--kose-tam);
  font-size: var(--olcek-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--zemin-batik);
  color: var(--metin-yumusak);
  white-space: nowrap;
}

.rozet svg { width: 13px; height: 13px; }

.rozet--vurgu   { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet--altin   { background: var(--altin-acik); color: var(--uyari); }
.rozet--uyari   { background: var(--uyari-acik); color: var(--uyari); }
.rozet--kotu    { background: var(--kotu-acik);  color: var(--kotu); }
.rozet--mesafe  { background: var(--vurgu); color: var(--vurgu-metin); }

/* --- Turkiye haritasi --- */

.harita-bolum {
  padding-block: var(--bosluk-8);
}

.harita-sarmal {
  position: relative;
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-xl);
  padding: var(--bosluk-4);
  box-shadow: var(--golge-sm);
}

@media (min-width: 720px) {
  .harita-sarmal { padding: var(--bosluk-6); }
}

.tr-harita {
  width: 100%;
  height: auto;
  overflow: visible;
}

.tr-harita__il {
  fill: var(--harita-il);
  stroke: var(--harita-il-kenar);
  stroke-width: 0.9;
  stroke-linejoin: round;
  transition: fill var(--gecis-hizli), filter var(--gecis-hizli);
  cursor: pointer;
}

/* Yogunluk basamaklari — sayi arttikca koyulasir. */
.tr-harita__il--v1 { fill: var(--harita-il-veri-1); }
.tr-harita__il--v2 { fill: var(--harita-il-veri-2); }
.tr-harita__il--v3 { fill: var(--harita-il-veri-3); }

.tr-harita a:hover .tr-harita__il,
.tr-harita a:focus-visible .tr-harita__il {
  fill: var(--harita-il-vurgu);
  filter: drop-shadow(0 2px 5px rgba(14, 21, 27, .28));
}

.tr-harita a:focus-visible { outline: none; }

.tr-harita a:focus-visible .tr-harita__il {
  stroke: var(--metin);
  stroke-width: 2;
}

/* Haritada veri yoksa (cemevi sayisi 0) tiklanabilir ama soluk. */
.tr-harita__il--bos { cursor: default; opacity: .55; }

.harita-balon {
  position: absolute;
  z-index: var(--z-panel);
  padding: var(--bosluk-2) var(--bosluk-3);
  background: var(--n-900);
  color: #fff;
  border-radius: var(--kose-md);
  font-size: var(--olcek-sm);
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity var(--gecis-hizli);
  white-space: nowrap;
  box-shadow: var(--golge-md);
}

.harita-balon[data-gorunur="1"] { opacity: 1; }

.harita-balon small {
  display: block;
  font-weight: 500;
  opacity: .75;
  font-size: var(--olcek-xs);
}

.harita-aciklama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-4);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--kenar);
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
}

.harita-aciklama__kutu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.harita-aciklama__ornek {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--kenar);
}

/* Aciklama ornekleri — satir ici style CSP tarafindan engellendigi icin sinif. */
.harita-aciklama__ornek--0 { background: var(--harita-il); }
.harita-aciklama__ornek--1 { background: var(--harita-il-veri-1); }
.harita-aciklama__ornek--2 { background: var(--harita-il-veri-2); }
.harita-aciklama__ornek--3 { background: var(--harita-il-veri-3); }

/* --- il listesi (haritanin metin karsiligi; mobil + SEO) --- */

.il-listesi {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--bosluk-1);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) { .il-listesi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .il-listesi { grid-template-columns: repeat(4, 1fr); } }

.il-listesi a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--kose-sm);
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
}

.il-listesi a:hover {
  background: var(--vurgu-acik);
  color: var(--vurgu);
  text-decoration: none;
}

.il-listesi b { font-weight: 600; color: var(--metin); }
.il-listesi a:hover b { color: var(--vurgu); }

.il-listesi span {
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
  font-variant-numeric: tabular-nums;
}

/* --- kirilma yolu --- */

.kirilma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-1);
  margin-bottom: var(--bosluk-4);
  font-size: var(--olcek-sm);
  color: var(--metin-silik);
  list-style: none;
  padding: 0;
}

.kirilma li { display: flex; align-items: center; gap: var(--bosluk-1); }
.kirilma li + li::before { content: "/"; color: var(--kenar-koyu); }
.kirilma a { color: var(--metin-yumusak); }

/* --- bos durum --- */

.bos-durum {
  padding: var(--bosluk-12) var(--bosluk-4);
  text-align: center;
  color: var(--metin-yumusak);
}

.bos-durum svg {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  margin-bottom: var(--bosluk-4);
  color: var(--kenar-koyu);
}

.bos-durum h3 { margin-bottom: var(--bosluk-2); }

/* --- uyari kutusu --- */

.uyari-kutu {
  display: flex;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  border-radius: var(--kose-md);
  border: 1px solid var(--kenar);
  background: var(--zemin-batik);
  font-size: var(--olcek-sm);
}

.uyari-kutu svg { width: 20px; height: 20px; flex: none; }
.uyari-kutu--bilgi { background: var(--vurgu-acik); border-color: var(--yesil-200); color: var(--yesil-800); }
.uyari-kutu--uyari { background: var(--uyari-acik); border-color: var(--kehribar-300); color: var(--kehribar-600); }

/* --- sayfalama --- */

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-8);
}

.sayfalama__bilgi { font-size: var(--olcek-sm); color: var(--metin-silik); }

/* --------------------------------------------------------------------------
   5. YARDIMCI SINIFLAR
   -------------------------------------------------------------------------- */

.metin-silik  { color: var(--metin-silik); }
.metin-yumusak { color: var(--metin-yumusak); }
.metin-sm     { font-size: var(--olcek-sm); }
.metin-xs     { font-size: var(--olcek-xs); }
.metin-orta   { text-align: center; }
.tek-satir    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iki-satir {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mt-2 { margin-top: var(--bosluk-2); }
.mt-4 { margin-top: var(--bosluk-4); }
.mt-6 { margin-top: var(--bosluk-6); }
.mt-8 { margin-top: var(--bosluk-8); }
.mb-2 { margin-bottom: var(--bosluk-2); }
.mb-4 { margin-bottom: var(--bosluk-4); }
.mb-6 { margin-bottom: var(--bosluk-6); }
.mb-8 { margin-bottom: var(--bosluk-8); }

.gizle { display: none; }

@media (max-width: 619px) { .mobilde-gizle { display: none; } }
@media (min-width: 900px) { .masaustunde-gizle { display: none; } }

/* Ekran okuyucuya acik, gozle gorunmez. */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. DETAY SAYFASI
   -------------------------------------------------------------------------- */

.detay {
  display: grid;
  gap: var(--bosluk-6);
  grid-template-columns: 1fr;
}

/* Yan sutun once mobilde ALTA duser; masaustunde saga gecer. Yol tarifi ve
   telefon en cok kullanilan eylemler oldugu icin mobilde de yukari almak
   istedik — bu yuzden yan sutun DOM'da ana govdeden sonra ama gorsel olarak
   mobilde ustte duruyor. */
.detay__yan { order: -1; }

@media (min-width: 900px) {
  .detay { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .detay__yan { order: 0; position: sticky; top: calc(var(--ust-cubuk-yukseklik) + var(--bosluk-4)); }
}

.detay__baslik { margin-bottom: var(--bosluk-5); }

.detay__rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
}

.detay__konum {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-2);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

.detay__konum svg { color: var(--metin-silik); flex: none; }

/* --- galeri --- */

.galeri {
  display: grid;
  gap: var(--bosluk-2);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) { .galeri { grid-template-columns: repeat(4, 1fr); } }

.galeri__oge {
  margin: 0;
  border-radius: var(--kose-md);
  overflow: hidden;
  background: var(--zemin-batik);
  aspect-ratio: 1 / 1;
}

.galeri__oge--buyuk { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }

.galeri__oge img { width: 100%; height: 100%; object-fit: cover; }

/* --- bilgi listesi --- */

.bilgi-listesi { list-style: none; padding: 0; display: grid; gap: var(--bosluk-4); }

.bilgi-listesi li { display: flex; gap: var(--bosluk-3); align-items: flex-start; }

.bilgi-listesi svg { flex: none; margin-top: 2px; color: var(--metin-silik); }

.bilgi-listesi__etiket {
  display: block;
  font-size: var(--olcek-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--metin-silik);
  font-weight: 600;
  margin-bottom: 1px;
}

/* --- kisi (dede) listesi --- */

.kisi-listesi { list-style: none; padding: 0; display: grid; gap: var(--bosluk-4); }

.kisi {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
}

.kisi__resim {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: var(--kose-tam);
  background: var(--vurgu-acik);
  color: var(--vurgu);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.kisi__resim img { width: 100%; height: 100%; object-fit: cover; }

.kisi__govde { flex: 1; min-width: 0; }
.kisi__govde strong { display: block; }

/* --- etiket seridi --- */

.etiket-serit { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }

/* --- harita bilesenleri --- */

.mini-harita {
  height: 240px;
  background: var(--zemin-batik);
  position: relative;
  z-index: var(--z-harita);
}

/* Harita sayfasi tam ekran calisir: basligi sabit tutup haritayi kalan
   alana yayiyoruz. Sabit yukseklik vermek yerine esnek kutu kullanildi;
   baslik satiri mobilde iki satira dustugunde harita kendi kendine kisalsin.

   dvh: mobil tarayicilarda adres cubugu kayarken 100vh degismez ve harita
   ekrandan tasar. dvh gercek gorunur yuksekligi verir; desteklemeyen
   tarayici icin ustteki vh satiri yedek kalir. */
.harita-sayfa {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--ust-cubuk-yukseklik) - var(--alt-menu-yukseklik));
  height: calc(100dvh - var(--ust-cubuk-yukseklik) - var(--alt-menu-yukseklik));
}

.harita-sayfa__ust { flex: none; }

.tam-harita {
  flex: 1;
  min-height: 300px;
  background: var(--zemin-batik);
  position: relative;
  z-index: var(--z-harita);
}

@media (min-width: 900px) {
  .harita-sayfa {
    height: calc(100vh - var(--ust-cubuk-yukseklik));
    height: calc(100dvh - var(--ust-cubuk-yukseklik));
  }
}

/* Leaflet balonunu site diline uydur. */
.leaflet-popup-content-wrapper {
  border-radius: var(--kose-md);
  box-shadow: var(--golge-lg);
}

.harita-balon-icerik strong { display: block; margin-bottom: 2px; }
.harita-balon-icerik small { color: var(--metin-silik); }
.harita-balon-icerik a { display: inline-block; margin-top: 6px; font-weight: 600; }

/* --- konum izni / yukleniyor --- */

.durum-kutu {
  display: grid;
  place-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-12) var(--bosluk-4);
  text-align: center;
  color: var(--metin-yumusak);
}

.donen {
  width: 28px;
  height: 28px;
  border: 3px solid var(--kenar);
  border-top-color: var(--vurgu);
  border-radius: var(--kose-tam);
  animation: don 700ms linear infinite;
}

@keyframes don { to { transform: rotate(360deg); } }

/* --- form --- */

.alan { display: grid; gap: var(--bosluk-1); margin-bottom: var(--bosluk-4); }

.etiket { font-size: var(--olcek-sm); font-weight: 600; color: var(--metin-yumusak); }
.etiket__zorunlu { color: var(--kotu); }

.girdi, .secim, .cok-satir {
  width: 100%;
  min-height: 46px;
  padding: var(--bosluk-2) var(--bosluk-3);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar-koyu);
  border-radius: var(--kose-md);
  color: var(--metin);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.cok-satir { min-height: 110px; resize: vertical; }

.girdi:focus, .secim:focus, .cok-satir:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-acik);
}

.alan__yardim { font-size: var(--olcek-xs); color: var(--metin-silik); }

.form-izgara { display: grid; gap: var(--bosluk-4); grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .form-izgara { grid-template-columns: repeat(2, 1fr); }
  .form-izgara__tam { grid-column: 1 / -1; }
}

/* Bal kupu: gercek kullanici gormez, bot doldurur. */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mt-12 { margin-top: var(--bosluk-12); }
.mb-12 { margin-bottom: var(--bosluk-12); }

/* --------------------------------------------------------------------------
   7. HARITA SAYFASI VE FORM HATALARI
   -------------------------------------------------------------------------- */

.harita-sayfa__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-4);
}

.harita-sayfa__ust h1 { font-size: var(--olcek-xl); }

/* Hatali alan: renk TEK BASINA bilgi tasimaz — metin de var. */
.alan__yardim--hata { color: var(--kotu); font-weight: 600; }

.girdi[aria-invalid="true"],
.secim[aria-invalid="true"],
.cok-satir[aria-invalid="true"] { border-color: var(--kotu); }

/* Leaflet kendi zemini beyaz; koyu temada cerceve uyumsuz kalmasin. */
.leaflet-container { background: var(--zemin-batik); font: inherit; }

.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .8);
}

.leaflet-popup-content { margin: 12px 14px; font-size: var(--olcek-sm); }