/* =====================================================================
   CIVARI SAYFA DÜZENİ (GUNCELLEME-13) — mekan, durum, ekip, oy, 404, profil, e-posta doğrulama
   ---------------------------------------------------------------------
   Yalnız tasarim.css değişkenleriyle yazılır (yeni renk, gölge, yarıçap yok).
   Sırayla: ortak sayfa parçaları → mekan sayfası → durum sayfası → ekip/oy → 404 → genel kutu.
   ===================================================================== */

/* ---------- Ortak sayfa parçaları ---------- */
.sayfa-baslik { padding-block: var(--b8) var(--b4); }
.sayfa-baslik h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); max-width: 22ch; }
.sayfa-ozet { font-size: var(--y-orta); color: var(--ikincil); max-width: 60ch; }
.sayfa-durumozet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b3); margin-top: var(--b3); }
.sar--okuma { max-width: 760px; }
.kirinti { margin-bottom: var(--b4); font-size: var(--y-kucuk); }
.kirinti ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px var(--b2); }
.kirinti li { display: inline-flex; align-items: center; }
.kirinti li + li::before { content: "/"; margin-right: var(--b2); color: var(--cizgi-guclu); }
.kirinti a { display: inline-flex; align-items: center; min-height: var(--dokunma); color: var(--ikincil); text-decoration: none; }
.kirinti a:hover { color: var(--murekkep); text-decoration: underline; }
.kirinti [aria-current="page"] { color: var(--murekkep); font-weight: 600; }

.bilgi-kutu { background: var(--turuncu-zemin); border: 1px solid var(--turuncu); border-radius: var(--r-orta); padding: var(--b4) var(--b5); margin-bottom: var(--b5); }
.bilgi-kutu p { margin: 0; max-width: none; }
.bilgi-kutu a { font-weight: 700; }
.bilgi-kutu--hata { background: var(--hata-zemin); border-color: var(--hata); }
.bilgi-kutu--acik { background: var(--acik-zemin); border-color: var(--acik-nokta); }

.cta-kutu { display: flex; flex-wrap: wrap; gap: var(--b4); align-items: center; justify-content: space-between;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b6); box-shadow: var(--golge-1); }
.cta-kutu h2 { font-size: var(--y-orta); margin: 0 0 var(--b1); }
.cta-kutu p { margin: 0; color: var(--ikincil); }

.bos-panel { display: grid; justify-items: center; gap: var(--b3); text-align: center; padding: var(--b10) var(--b4);
  background: var(--yuzey); border: 1px dashed var(--cizgi-guclu); border-radius: var(--r-orta); }
.bos-panel svg { width: 120px; height: 120px; color: var(--turuncu); }
.bos-panel h2 { margin: 0; }
.bos-panel p { margin: 0; color: var(--ikincil); max-width: 52ch; }

/* ---------- Durum sayfası ---------- */
.yakinda-bas { margin-top: var(--b8); font-size: var(--y-orta); }
ul.cipler { list-style: none; margin: 0; padding: 0; }
.rehber-metin h2 { font-size: var(--y-buyuk); max-width: 24ch; }
.rehber-metin h3 { margin-top: var(--b6); }
.rehber-metin p { max-width: 68ch; line-height: 1.7; }

/* Reklam yuvası: sabit yükseklik (CLS yok), "Reklam" etiketi cerez.js tarafından konur; tasarım sistemindeki .reklam-yuva ölçüleri geçerli */
.reklam-yuva { margin-block: var(--b8); min-height: 280px; }

/* ---------- Mekan sayfası ---------- */
.m-kapak { position: relative; background: var(--kapak-zemin); overflow: hidden; }
.m-kapak-ic { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; aspect-ratio: 16 / 7; max-height: min(520px, 52vh); min-height: 220px; /* ad ve "şu an açık" şeridi ilk ekranda kalsın */ overflow: hidden; }
.m-kapak-ic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.m-kapak .tkapak { padding: var(--b8) var(--kenar); align-items: end; }
.m-kapak .tkapak-harf { font-size: clamp(11rem, 36vw, 22rem); right: 2%; top: -0.12em; }
.m-kapak .tkapak-semt { font-size: var(--y-govde); }
.m-kapak .tkapak-ikon { width: 56px; height: 56px; }
.m-kapak .tkapak-ikon .ikon { width: 28px; height: 28px; }
.m-kapak .rozet--temsili { position: absolute; left: var(--kenar); bottom: var(--b3); }

.m-bas { padding-block: var(--b6) var(--b4); }
.m-bas h1 { font-size: clamp(2rem, 1.3rem + 3.6vw, 3.75rem); display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap; margin-bottom: var(--b2); max-width: none; }
.m-bas h1 .rozet--onay { font-size: var(--y-kucuk); }
.m-meta { display: flex; flex-wrap: wrap; gap: var(--b1) var(--b3); color: var(--ikincil); margin: 0 0 var(--b4); max-width: none; }
.m-meta > span + span:not(.rozet)::before { content: "·"; margin-right: var(--b3); color: var(--cizgi-guclu); } /* rozet ayrı satıra kayarsa başında nokta kalmasın */

.m-durum { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b4) var(--b5); box-shadow: var(--golge-1); display: grid; gap: var(--b3); }
.m-durum .durum { font-size: var(--y-orta); margin: 0; }
.m-durum .serit { margin-block: var(--b1); }
.m-durum-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b2); font-size: var(--y-kucuk); color: var(--ikincil); margin: 0; max-width: none; }

.m-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); margin-top: var(--b4); }
.m-eylem .dugme { min-height: 48px; }
.m-eylem .dugme--ana { flex: 1 1 200px; }
.m-eylem .dugme[aria-pressed="true"] .ikon { fill: currentColor; color: var(--hata); }
.m-eylem .dugme[aria-pressed="true"] { border-color: var(--hata); }

.m-izgara { display: grid; gap: var(--b8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .m-izgara { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--b10); }
  .m-yan { position: sticky; top: calc(var(--ust-yukseklik) + var(--b4)); }
}
.m-ana > section + section { margin-top: var(--b10); }
.m-yan > section + section { margin-top: var(--b5); }
.m-ana h2, .m-yan h2 { font-size: var(--y-buyuk); }
.m-yan h2 { font-size: var(--y-orta); }
.m-aciklama { font-size: var(--y-orta); line-height: 1.65; max-width: 62ch; }
.m-aciklama-yok { color: var(--ikincil); }

.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b5); box-shadow: var(--golge-1); }
.panel h2 { margin-bottom: var(--b3); }

/* Bilgi listesi (dl) ve saat tablosu */
.bilgi-liste { margin: 0; display: grid; }
.bilgi-liste > div { display: flex; justify-content: space-between; gap: var(--b4); padding: var(--b3) 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-liste > div:last-child { border-bottom: 0; }
.bilgi-liste dt { color: var(--ikincil); }
.bilgi-liste dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.bilgi-liste a { display: inline-flex; align-items: center; min-height: var(--dokunma); margin-block: calc(-1 * var(--b3)); }
.saat-tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.saat-tablo th, .saat-tablo td { padding: var(--b2) 0; border-bottom: 1px solid var(--cizgi); text-align: left; font-weight: 400; }
.saat-tablo td { text-align: right; font-weight: 700; }
.saat-tablo tr:last-child > * { border-bottom: 0; }
.saat-tablo tr.bugun > * { font-weight: 800; background: var(--turuncu-zemin); }
.saat-tablo tr.bugun th { padding-left: var(--b2); border-radius: var(--r-kucuk) 0 0 var(--r-kucuk); }
.saat-tablo tr.bugun td { padding-right: var(--b2); border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0; }
.not { color: var(--ikincil); font-size: var(--y-kucuk); margin: var(--b3) 0 0; max-width: none; }

/* Güven paneli: zaman çizelgesi (neyi kim ne zaman doğruladı) */
.zaman { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--b5); }
.zaman::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--cizgi); }
.zaman li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--b3); align-items: start; }
.zaman-nokta { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yuzey-2); color: var(--ikincil); border: 2px solid var(--yuzey); }
.zaman-nokta--onay { background: var(--acik-zemin); color: var(--acik); }
.zaman-nokta--uyari { background: var(--hata-zemin); color: var(--hata); }
.zaman-nokta--bos { background: var(--yuzey); border: 2px dashed var(--cizgi-guclu); }
.zaman strong { display: block; line-height: 1.35; }
.zaman p { margin: 2px 0 0; color: var(--ikincil); font-size: .9375rem; max-width: none; }
.zaman .dugme { margin-top: var(--b2); }
.teyit-eylem { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b3); }

/* Özellik kartları + güven çubuğu */
.oz-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.oz-kart { display: grid; gap: var(--b2); padding: var(--b4); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); }
.oz-kart-bas { display: flex; align-items: center; gap: var(--b2); font-weight: 700; }
.oz-kart-bas .ikon { color: var(--ikincil); }
.oz-kart--dogrulandi { border-color: var(--acik-nokta); }
.oz-kart--dogrulandi .oz-kart-bas .ikon { color: var(--acik); }
.oz-durum { font-size: var(--y-kucuk); font-weight: 700; margin: 0; }
.oz-durum--dogrulandi { color: var(--acik); }
.oz-durum--hayir { color: var(--kapali); }
.oz-durum--tek, .oz-durum--celiskili { color: var(--turuncu-yazi); }
.oz-durum--bos { color: var(--ikincil); font-weight: 600; }
.guven-cubuk { display: flex; height: 8px; border-radius: var(--r-tam); overflow: hidden; background: var(--kapali-zemin); }
.guven-cubuk-evet { background: var(--acik-nokta); }
.guven-cubuk-hayir { background: var(--cizgi-guclu); }
.guven-say { display: flex; justify-content: space-between; font-size: var(--y-kucuk); color: var(--ikincil); margin: 0; font-variant-numeric: tabular-nums; max-width: none; }
.oz-oy { display: flex; gap: var(--b2); }
.oz-oy .dugme { flex: 1; min-height: var(--dokunma); padding-inline: var(--b2); }
.oz-oy .dugme[aria-pressed="true"] { background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }

/* Galeri (yalnız gerçek fotoğraflar) */
.galeri { display: grid; gap: var(--b3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.galeri button { padding: 0; border: 0; background: var(--kapak-zemin); border-radius: var(--r-orta); overflow: hidden; display: block; aspect-ratio: 4 / 3; }
.galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sure-uzun) var(--egri); }
.galeri button:hover img { transform: scale(1.04); }
.buyut { width: min(1100px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.buyut .pencere-icerik { display: grid; place-items: center; padding: var(--b3); }
.buyut img { max-height: calc(100dvh - 160px); width: auto; max-width: 100%; border-radius: var(--r-kucuk); }
.buyut p { margin: var(--b2) 0 0; color: var(--ikincil); text-align: center; max-width: none; }

/* Harita (tembel yüklenir; sabit yükseklik) */
.harita { position: relative; min-height: 340px; border-radius: var(--r-orta); border: 1px solid var(--cizgi); overflow: hidden; background: var(--yuzey-2); z-index: 0; }
.harita-yedek { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--b3); align-content: center; text-align: center; padding: var(--b4); color: var(--ikincil); }
.harita .leaflet-container { height: 100%; min-height: 340px; background: var(--yuzey-2); font-family: var(--yazi-govde); }
.harita .leaflet-tile-pane { filter: grayscale(.85) contrast(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .harita .leaflet-tile-pane { filter: grayscale(.9) invert(.92) hue-rotate(180deg) brightness(.9) contrast(.9); } }
:root[data-tema="koyu"] .harita .leaflet-tile-pane { filter: grayscale(.9) invert(.92) hue-rotate(180deg) brightness(.9) contrast(.9); }

/* Yorumlar */
.yorum-ozet { display: flex; align-items: center; gap: var(--b2); color: var(--ikincil); font-size: var(--y-govde); margin: 0 0 var(--b4); max-width: none; }
.yorum-ozet strong { color: var(--murekkep); font-size: var(--y-orta); }
.yorum-ozet .ikon { color: var(--turuncu-yazi); fill: currentColor; }
.yorum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3); }
.yorum { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b4) var(--b5); }
.yorum-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--b2); }
.yorum-ad { font-weight: 700; }
.yorum-yildiz { display: inline-flex; align-items: center; gap: 2px; color: var(--turuncu-yazi); font-weight: 700; font-variant-numeric: tabular-nums; }
.yorum-yildiz .ikon { fill: currentColor; width: 16px; height: 16px; }
.yorum p { margin: var(--b2) 0 0; max-width: 68ch; overflow-wrap: anywhere; }
.yorum-alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--b2); margin-top: var(--b2); color: var(--ikincil); font-size: var(--y-kucuk); }
.yorum-alt .dugme { color: var(--ikincil); }
.yorum-form-kutu { margin-top: var(--b6); }
.yorum-form-kutu h3 { margin-bottom: var(--b3); }
.yorum-giris { display: grid; justify-items: start; gap: var(--b3); background: var(--yuzey-2); border-radius: var(--r-orta); padding: var(--b5); }
.yorum-giris p { margin: 0; }
.yildizlar { position: relative; }
.yildizlar + .hata-yazi { margin-top: var(--b1); }
.yorum-form .alan { margin-bottom: var(--b3); }
.yorum-form .dugme--ana { min-width: 180px; }

/* Yakındaki mekanlar */
.yakin-kartlar { min-height: 120px; }

/* ---------- Ekip arama (ekip-ara.php) ---------- */
.ekip-sar { max-width: 640px; }
.ekip-sar h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); }
.ekip-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b4); margin-bottom: var(--b3); box-shadow: var(--golge-1); }
.ekip-kart--benim { border-color: var(--murekkep); }
.ekip-kart--herkes { background: var(--turuncu-zemin); border: 2px solid var(--murekkep); }
.ekip-kisi { display: flex; gap: var(--b3); align-items: flex-start; }
.ekip-harf { width: 36px; height: 36px; border-radius: 50%; background: var(--turuncu-zemin); color: var(--turuncu-yazi); font: 800 1rem/1 var(--yazi-baslik); display: grid; place-items: center; flex: none; border: 1px solid var(--turuncu); }
.ekip-kisi b { display: block; }
.ekip-kisi small { display: block; color: var(--ikincil); font-size: var(--y-kucuk); }
.ekip-kisi small.hata { color: var(--hata); font-weight: 600; }
.ekip-mekan-ust { display: flex; justify-content: space-between; gap: var(--b3); align-items: baseline; }
.ekip-mekan-ad { font: 800 1.1875rem/1.2 var(--yazi-baslik); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--dokunma); }
.ekip-mekan-ad:hover { text-decoration: underline; }
.ekip-say { font-weight: 800; color: var(--ikincil); font-variant-numeric: tabular-nums; }
.ekip-meta { font-size: var(--y-kucuk); color: var(--ikincil); margin: 0; max-width: none; }
.ekip-etiketler { list-style: none; margin: var(--b3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--b2); }
.ekip-etiket { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-tam); border: 1px solid var(--cizgi); background: var(--zemin); font: 700 var(--y-kucuk)/1.3 var(--yazi-govde); }
.ekip-etiket--var { color: var(--acik); }
.ekip-etiket--yok { color: var(--kapali); }
.ekip-sar .dugme--genis { margin-top: var(--b3); }
.ekip-sar .hata-yazi { min-height: 1.2em; margin-top: var(--b2); }
.ekip-not { font-size: var(--y-kucuk); color: var(--ikincil); text-align: center; margin-top: var(--b5); max-width: none; }

/* ---------- Oy sayfası (oy.php) ---------- */
.oy-sar { max-width: 720px; }
.oy-sar h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
.oy-liste { list-style: none; margin: var(--b5) 0; padding: 0; display: grid; gap: var(--b3); }
.oy-secenek { position: relative; background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: var(--r-orta); padding: var(--b4); overflow: hidden; box-shadow: var(--golge-1); }
.oy-secenek--benim { border-color: var(--murekkep); }
.oy-secenek--kazanan { border-color: var(--turuncu); border-width: 2px; background: var(--turuncu-zemin); }
.oy-ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b2) var(--b3); align-items: baseline; }
.oy-ad { font: 800 1.25rem/1.2 var(--yazi-baslik); margin: 0; }
.oy-ad a { text-decoration: none; }
.oy-ad a:hover { text-decoration: underline; }
.oy-sayi { font-weight: 800; font-variant-numeric: tabular-nums; }
.oy-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b1) var(--b3); color: var(--ikincil); font-size: var(--y-kucuk); margin: var(--b1) 0 0; max-width: none; }
.oy-cubuk { height: 10px; border-radius: var(--r-tam); background: var(--kapali-zemin); overflow: hidden; margin: var(--b3) 0; }
.oy-cubuk > span { display: block; height: 100%; width: calc(var(--yuzde, 0) * 1%); background: var(--cizgi-guclu); border-radius: var(--r-tam); transition: width var(--sure-uzun) var(--egri); }
.oy-secenek--kazanan .oy-cubuk > span, .oy-secenek--benim .oy-cubuk > span { background: var(--turuncu); }
.oy-eylem { display: flex; flex-wrap: wrap; gap: var(--b2); }
.oy-eylem .dugme { flex: 1 1 160px; }
.oy-eylem .dugme[aria-pressed="true"] { background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }
.oy-kazanan { background: var(--yuzey); border: 2px solid var(--turuncu); border-radius: var(--r-orta); padding: var(--b6); margin: var(--b5) 0; text-align: center; display: grid; gap: var(--b3); justify-items: center; box-shadow: var(--golge-2); }
.oy-kazanan h2 { margin: 0; font-size: var(--y-buyuk); }
.oy-kazanan p { margin: 0; color: var(--ikincil); }
.oy-kazanan .dugme { min-height: 56px; font-size: 1.0625rem; padding-inline: var(--b8); }
.oy-paylas { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b4); }
.oy-paylas .dugme { flex: 1 1 200px; }
.oy-ozet { color: var(--ikincil); margin: 0 0 var(--b2); max-width: none; }

/* ---------- Genel kutu (e-posta doğrulama, profil yan sayfaları vb.) ---------- */
.sayfa-kutu { max-width: 560px; margin: var(--b12) auto; padding: var(--b8) var(--b6); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); box-shadow: var(--golge-1); text-align: center; display: grid; gap: var(--b3); justify-items: center; }
.sayfa-kutu h1 { font-size: var(--y-buyuk); margin: 0; }
.sayfa-kutu p { margin: 0; color: var(--ikincil); }
.sayfa-kutu .ikon-buyuk { width: 56px; height: 56px; color: var(--turuncu); }
.sayfa-kutu--hata .ikon-buyuk { color: var(--hata); }
.sayfa-kutu--basari .ikon-buyuk { color: var(--acik-nokta); }

/* ---------- Dar ekran ---------- */
@media (max-width: 640px) {
  .sayfa-baslik { padding-block: var(--b5) var(--b3); }
  .m-kapak-ic { aspect-ratio: 4 / 3; max-height: none; }
  .m-durum { padding: var(--b4); }
  .panel { padding: var(--b4); }
  .m-eylem .dugme { flex: 1 1 calc(50% - var(--b3)); }
  .m-eylem .dugme--ana { flex-basis: 100%; }
  .oy-kazanan .dugme { padding-inline: var(--b5); width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .galeri button:hover img { transform: none; }
}
@media (forced-colors: active) {
  .guven-cubuk, .oy-cubuk { border: 1px solid CanvasText; }
  .guven-cubuk-evet, .oy-cubuk > span { background: Highlight; forced-color-adjust: none; }
  .saat-tablo tr.bugun > * { outline: 1px solid Highlight; }
}
@media print { .m-eylem, .harita, .yorum-form-kutu, .oz-oy { display: none !important; } }

/* =====================================================================
   GUNCELLEME-14 — İKİNCİL SAYFALAR: eski ruh (fotoğraf, sıcaklık) + derinlik
   Durum rehberi kahramanı, durum karoları, 404, ekip arama. Yalnız tasarim.css belirteçleri;
   fotoğraf üstü yazı için tek yerel ayar: koyu "kömür" örtüsü (iki temada da aynı).
   ===================================================================== */
.dk, .durum-kart { --foto-kar: 28, 20, 14; --foto-sicak: 138, 76, 20; --dk-yazi: #FFF8EE; --dk-ikincil: rgba(255, 248, 238, .86); --dk-cam: rgba(255, 248, 238, .16); }

/* ---------- Durum rehberi kahramanı ---------- */
.dk { padding-block: var(--b4) var(--b6); }
.dk-kutu { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(380px, 58vh, 520px);
  border-radius: calc(var(--r-orta) * 1.75); background: var(--kapak-zemin); box-shadow: var(--golge-2); color: var(--dk-yazi); }
.dk-foto { position: absolute; inset: 0; z-index: -2; }
.dk-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); animation: dk-yakin 26s ease-out both; }
@keyframes dk-yakin { to { transform: scale(1.1); } }
.dk-kutu::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 90% at 0% 100%, rgba(var(--foto-sicak), .38), transparent 70%),
    linear-gradient(to top, rgba(var(--foto-kar), .92) 0%, rgba(var(--foto-kar), .6) 46%, rgba(var(--foto-kar), .22) 100%),
    linear-gradient(100deg, rgba(var(--foto-kar), .5), transparent 62%); }
.dk-icerik { position: relative; width: 100%; max-width: 640px; padding: var(--b8) var(--b6) var(--b8); }
.dk h1 { font-size: clamp(2.125rem, 1.3rem + 3.8vw, 3.75rem); line-height: 1.04; max-width: 17ch; margin: 0 0 var(--b3); color: var(--dk-yazi); text-shadow: 0 2px 18px rgba(var(--foto-kar), .45); }
.dk .sayfa-ozet { color: var(--dk-ikincil); max-width: 54ch; margin: 0; }
.dk .kirinti { margin-bottom: var(--b3); }
.dk .kirinti a { color: var(--dk-ikincil); }
.dk .kirinti a:hover, .dk .kirinti [aria-current="page"] { color: var(--dk-yazi); }
.dk .kirinti li + li::before { color: var(--dk-ikincil); opacity: .6; }
.dk-etiket { display: inline-flex; align-items: center; gap: var(--b2); margin: 0 0 var(--b3); padding: 5px 14px 5px 10px; border-radius: var(--r-tam);
  background: var(--dk-cam); border: 1px solid rgba(255, 248, 238, .28); backdrop-filter: blur(8px); font: 700 .8125rem/1.2 var(--yazi-govde); letter-spacing: .02em; }
.dk .sayfa-durumozet { margin-top: var(--b4); }
.dk .durum { color: var(--dk-yazi); }
.dk .soluk { color: var(--dk-ikincil); }

.dk-temsili { position: absolute; right: var(--b4); top: var(--b4); }

/* Cam efektli "listenin başındaki mekan" kartı */
.dk-chip { display: inline-grid; gap: 2px; margin-top: var(--b5); min-height: var(--dokunma); max-width: 100%; padding: var(--b3) var(--b5) var(--b3) var(--b4);
  border-radius: var(--r-orta); background: rgba(var(--foto-kar), .5); border: 1px solid rgba(255, 248, 238, .24); backdrop-filter: blur(12px);
  color: var(--dk-yazi); text-decoration: none; box-shadow: 0 10px 28px rgba(var(--foto-kar), .35); transition: transform var(--sure-orta) var(--egri), background-color var(--sure-orta) var(--egri); }
.dk-chip:hover { transform: translateY(-2px); background: rgba(var(--foto-kar), .66); }
.dk-chip-et { font: 700 .6875rem/1.2 var(--yazi-govde); letter-spacing: .08em; text-transform: uppercase; color: var(--dk-ikincil); }
.dk-chip strong { font: 700 1.125rem/1.2 var(--yazi-baslik); overflow-wrap: anywhere; }
.dk-chip-alt { font-size: var(--y-kucuk); color: var(--dk-ikincil); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.dk-chip-durum { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dk-yazi); }
.dk-chip-durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kapali-zemin); flex: none; }
.dk-chip-durum--acik::before { background: var(--acik-nokta); }
.dk-chip-durum--kapaniyor::before { background: var(--turuncu); }

/* Eğik "polaroid" fotoğraflar (yalnız geniş ekranda; aynı mekanlar chip ve karttan da bulunur) */
.dk-polaroidler { display: none; }
@media (min-width: 1040px) {
  .dk-polaroidler { display: block; position: absolute; right: clamp(28px, 6vw, 88px); top: 50%; transform: translateY(-50%); z-index: 1; width: 234px; }
  .dk-icerik { max-width: 600px; }
}
.dk-pol { display: block; width: 200px; padding: 8px 8px 0; background: var(--yuzey); border-radius: var(--r-kucuk); box-shadow: var(--golge-2);
  color: var(--murekkep); text-decoration: none; transition: transform var(--sure-uzun) var(--egri); }
.dk-pol-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--kapak-zemin); }
.dk-pol-foto img { width: 100%; height: 100%; object-fit: cover; }
.dk-pol-foto .rozet { position: absolute; left: 6px; bottom: 6px; font-size: .6875rem; padding: 2px 7px; }
.dk-pol-ad { display: block; padding: 9px 2px 11px; font: 700 .8125rem/1.2 var(--yazi-baslik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pol--1 { transform: rotate(-5deg); }
.dk-pol--2 { margin: 4px 0 0 34px; transform: rotate(4deg); }
.dk-pol--1:hover { transform: rotate(-2deg) translateY(-4px); }
.dk-pol--2:hover { transform: rotate(2deg) translateY(-4px); }

/* Hiç fotoğraf yoksa: sıcak ışıklı düz kutu */
.dk--fotosuz .dk-kutu { --dk-yazi: var(--murekkep); --dk-ikincil: var(--ikincil); --dk-cam: var(--turuncu-zemin); min-height: 0; border: 1px solid var(--cizgi); box-shadow: var(--golge-1);
  background: radial-gradient(90% 140% at 100% 0%, var(--turuncu-zemin), transparent 62%), var(--yuzey); }
.dk--fotosuz .dk-kutu::before { display: none; }
.dk--fotosuz h1 { text-shadow: none; }
.dk--fotosuz .dk-etiket { border-color: var(--turuncu); }

/* ---------- Durum karoları (ana rehber sayfası) ---------- */
.durum-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.durum-kart { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 168px; padding: var(--b4);
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); text-decoration: none; box-shadow: var(--golge-1);
  transition: transform var(--sure-orta) var(--egri), box-shadow var(--sure-orta) var(--egri); }
.durum-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.dkart-ic { position: relative; display: grid; gap: 2px; width: 100%; }
.dkart-ikon { width: 24px; height: 24px; margin-bottom: var(--b2); color: var(--turuncu-yazi); }
.durum-kart strong { font: 700 1.1875rem/1.2 var(--yazi-baslik); }
.dkart-say { font-size: var(--y-kucuk); color: var(--ikincil); }
.durum-kart--foto { border: 0; background: var(--kapak-zemin); color: var(--dk-yazi); }
.dkart-foto { position: absolute; inset: 0; z-index: -2; }
.dkart-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sure-uzun) var(--egri); }
.durum-kart--foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 80% at 0% 100%, rgba(var(--foto-sicak), .3), transparent 70%), linear-gradient(to top, rgba(var(--foto-kar), .88) 0%, rgba(var(--foto-kar), .4) 55%, rgba(var(--foto-kar), .12) 100%); }
.durum-kart--foto:hover .dkart-foto img { transform: scale(1.06); }
.durum-kart--foto .dkart-ikon { color: var(--dk-yazi); }
.durum-kart--foto .dkart-say { color: var(--dk-ikincil); }
.dkart-temsili { position: absolute; top: var(--b3); right: var(--b3); }

/* Kartlar kademeli belirir (başlangıç karesi gizli, bitiş doğal hal: animasyon hiç çalışmasa da içerik görünür) */
@keyframes d-yuksel { from { opacity: 0; transform: translateY(14px); } }
.sayfa-durum .kartlar > .kart, .sayfa-404 .kartlar > .kart { animation: d-yuksel .5s var(--egri) both; }
.sayfa-durum .kartlar > .kart:nth-child(2), .sayfa-404 .kartlar > .kart:nth-child(2) { animation-delay: .06s; }
.sayfa-durum .kartlar > .kart:nth-child(3), .sayfa-404 .kartlar > .kart:nth-child(3) { animation-delay: .12s; }
.sayfa-durum .kartlar > .kart:nth-child(n+4) { animation-delay: .16s; }

/* ---------- 404: "Bu sokak Ankara'da yok" ---------- */
.e404 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b8); align-items: center; padding-block: var(--b10) var(--b8); }
.e404-metin { display: grid; gap: var(--b4); justify-items: start; }
.e404-metin > * { margin: 0; }
/* Sayı: yanık turuncu metin (krem üstünde 6:1, koyu modda açık turuncu) + altında ince turuncu "sokak çizgisi" */
.e404-sayi { position: relative; display: inline-block; font: 800 clamp(3.5rem, 2rem + 8vw, 7rem)/.9 var(--yazi-baslik); color: var(--turuncu-yazi); letter-spacing: -.05em; padding-bottom: .08em; }
.e404-sayi::after { content: ""; position: absolute; left: .04em; right: .1em; bottom: 0; height: .06em; border-radius: var(--r-tam); background: var(--turuncu); }
.e404 h1 { font-size: clamp(2.25rem, 1.5rem + 4vw, 4rem); max-width: 14ch; }
.e404-ozet { color: var(--ikincil); font-size: var(--y-orta); max-width: 46ch; }
.e404-ara { display: flex; gap: var(--b2); width: min(520px, 100%); }
.e404-ara .girdi { flex: 1; min-width: 0; }
.e404-ara .dugme { flex: none; }
.e404-yollar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--b2); }
.e404-tabela svg { display: block; width: min(100%, 320px); height: auto; margin-inline: auto; filter: drop-shadow(0 14px 18px rgba(30, 27, 24, .16)); }
.e404-golge { fill: var(--murekkep); opacity: .12; }
.e404-direk { fill: var(--cizgi-guclu); }
.e404-levha text { font: 800 30px var(--yazi-baslik); letter-spacing: -.01em; }
.e404-levha--1 rect:first-child { fill: var(--murekkep); }
.e404-levha--1 text { fill: var(--zemin); font-size: 34px; }
.e404-cerceve { fill: none; stroke: var(--zemin); stroke-width: 2; opacity: .55; }
.e404-levha--2 path { fill: var(--turuncu); }
.e404-levha--2 text { fill: #1E1B18; font-size: 32px; }
.e404-levha--3 rect { fill: var(--yuzey); stroke: var(--murekkep); stroke-width: 2.5; }
.e404-levha--3 text { fill: var(--murekkep); font-size: 21px; }
@media (min-width: 900px) {
  .e404 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--b12); padding-block: var(--b16) var(--b12); }
}

/* ---------- Ekip arama ---------- */
.ekip-kahraman { padding: var(--b6); margin-bottom: var(--b5); border-radius: calc(var(--r-orta) * 1.5); border: 1px solid var(--cizgi); box-shadow: var(--golge-2);
  background: radial-gradient(90% 140% at 100% 0%, var(--turuncu-zemin), transparent 62%), var(--yuzey); }
.ekip-kahraman h1 { margin: 0; }
.ekip-kahraman .ust-yazi { margin: 0 0 var(--b1); }
.ekip-madalyon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--b3); border-radius: 50%; background: var(--turuncu); color: #1E1B18; box-shadow: var(--golge-1); }
.ekip-madalyon .ikon { width: 26px; height: 26px; }
.ekip-kart--mekan { padding: 0; overflow: hidden; }
.ekip-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--kapak-zemin); overflow: hidden; }
.ekip-foto img { width: 100%; height: 100%; object-fit: cover; }
.ekip-foto .rozet { position: absolute; left: var(--b3); bottom: var(--b3); }
.ekip-foto-yedek { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kapak-yazi);
  background: radial-gradient(120% 90% at 100% 0%, var(--turuncu-zemin), transparent 60%), var(--kapak-zemin); }
.ekip-foto-yedek .ikon { width: 44px; height: 44px; }
.ekip-mekan-govde { padding: var(--b4); }

/* ---------- G14 dar ekran ve hareket ---------- */
@media (max-width: 640px) {
  .dk { padding-block: var(--b3) var(--b5); }
  .dk-kutu { min-height: 440px; border-radius: calc(var(--r-orta) * 1.5); }
  .dk-icerik { padding: var(--b6) var(--b4) 56px; }
  .dk-temsili { top: auto; bottom: var(--b4); right: var(--b4); }
  .e404 { padding-block: var(--b6) var(--b4); }
  .e404-ara { flex-direction: column; }
  .e404-ara .dugme { width: 100%; }
  .ekip-kahraman { padding: var(--b5) var(--b4); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-foto img { animation: none; transform: none; }
  .dk-chip:hover, .durum-kart:hover { transform: none; }
  .dk-pol--1:hover { transform: rotate(-5deg); }
  .dk-pol--2:hover { transform: rotate(4deg); }
  .durum-kart--foto:hover .dkart-foto img { transform: none; }
  .sayfa-durum .kartlar > .kart, .sayfa-404 .kartlar > .kart { animation: none; }
}
@media (forced-colors: active) {
  .dk-kutu::before, .durum-kart--foto::before { background: Canvas; opacity: .7; }
}