/* YZ Şehri (/yz-sehri/) — ada haritası (varsayılan) / 3B şehir + mahalle paneli. v2 tasarım dili (docs/urun/TASARIM_SISTEMI.md), site kabuğu
   docs/urun/SITE_KABUGU.md. Az yazı, büyük görsel, büyük dokunma hedefi; metin her zaman --v2-ink üstünde (AA).
   Mahalle düğmeleri iki görünümde aynı öğe: 3B'de binanın üstünde iğne (konum betikten, transform), 2B'de büyük kart. */
[id] { scroll-margin-top: 16px; }

/* ---- mahalle renkleri (v2 token'ları; "mor" bu sayfaya özgü, açık/koyu) ---- */
.ys-pin, .ys-panel { --_c: var(--v2-yellow); --_t: var(--v2-yellow-tint); }
[data-renk="blue"] { --_c: var(--v2-blue); --_t: var(--v2-blue-tint); }
[data-renk="green"] { --_c: var(--v2-green); --_t: var(--v2-green-tint); }
[data-renk="tomato"] { --_c: var(--v2-tomato); --_t: var(--v2-tomato-tint); }
[data-renk="mor"] { --_c: #9B7BFF; --_t: #EDE6FF; }
[data-theme="dark"] [data-renk="mor"] { --_t: #2E2650; }

/* ---- Başlık + sınıf bandı ---- */
.ys-ust__in { display: grid; gap: var(--v2-space-4); padding-block: var(--v2-space-5) var(--v2-space-4); align-items: end; }
@media (min-width: 860px) { .ys-ust__in { grid-template-columns: minmax(0, 1fr) auto; } }
.ys-ust__metin { display: grid; gap: var(--v2-space-2); }
.ys-ust__metin h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.02; margin: 0; }
.ys-ust__lead { margin: 0; font-size: var(--v2-text-lg); font-weight: var(--v2-weight-strong); color: var(--v2-ink-2); }
.ys-geri {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: var(--v2-tap-min, 44px);
  font-weight: var(--v2-weight-heavy); color: var(--v2-link);
}
.ys-geri .v2-icon { width: 20px; height: 20px; }
.ys-bant { display: grid; gap: 6px; }
.ys-bant__etiket { font-weight: var(--v2-weight-heavy); font-size: var(--v2-text-sm); color: var(--v2-ink-2); }
.ys-bant__dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ys-bant__d {
  min-width: 72px; min-height: 56px; padding: 0 16px; font: inherit; font-family: var(--v2-font-mono); font-weight: 800; font-size: var(--v2-text-lg);
  color: var(--v2-ink); background: var(--v2-surface); border: var(--v2-stroke) solid var(--v2-ink); border-radius: 16px; cursor: pointer;
  box-shadow: 0 var(--v2-offset) 0 var(--v2-shadow-color);
  transition: transform var(--v2-dur-fast) var(--v2-ease), box-shadow var(--v2-dur-fast) var(--v2-ease);
}
.ys-bant__d:hover { transform: translateY(-2px); }
.ys-bant__d[aria-pressed="true"] { background: var(--v2-yellow); color: #1F1D3D; transform: translateY(var(--v2-offset)); box-shadow: 0 0 0 var(--v2-shadow-color); }
.ys-bant__d:focus-visible, .ys-pin:focus-visible, .ys-genel:focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 3px; }

/* ---- Şehir yerleşimi ---- */
.ys-sehir { padding-block: var(--v2-space-3) var(--v2-space-8); }
.ys-not { margin-bottom: var(--v2-space-4); font-size: var(--v2-text-md); }
.ys-not p { margin: 0; }
.ys-sehir__in { display: grid; gap: var(--v2-space-5); align-items: start; }
@media (min-width: 980px) { .ys-sehir__in { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); } }

/* ---- Sahne (2B yedek varsayılan: kartlar; 3B: kanvas + iğneler) ---- */
.ys-sahne {
  position: relative; overflow: hidden; border: var(--v2-stroke) solid var(--v2-ink); border-radius: var(--v2-radius-lg);
  box-shadow: 0 var(--v2-offset) 0 var(--v2-shadow-color);
  background: linear-gradient(180deg, rgba(255, 253, 248, .55), rgba(255, 253, 248, .82)), url("../../assets/v4/dunya/kasaba-960.webp") center / cover no-repeat, var(--v2-surface);
  padding: var(--v2-space-4);
}
[data-theme="dark"] .ys-sahne { background: linear-gradient(180deg, rgba(23, 22, 43, .7), rgba(23, 22, 43, .9)), url("../../assets/v4/dunya/kasaba-960.webp") center / cover no-repeat, var(--v2-surface); }
.ys-mahalleler { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .ys-mahalleler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ys-pin {
  width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 14px 16px; min-height: 96px; text-align: left; font: inherit; color: var(--v2-ink); cursor: pointer;
  background: linear-gradient(160deg, var(--_t), var(--v2-surface) 75%);
  border: var(--v2-stroke) solid var(--v2-ink); border-radius: 20px; box-shadow: 0 var(--v2-offset) 0 var(--v2-shadow-color);
  transition: transform var(--v2-dur-fast) var(--v2-ease), box-shadow var(--v2-dur-fast) var(--v2-ease);
}
.ys-pin:hover { transform: translateY(-2px); }
.ys-pin[aria-pressed="true"] { background: var(--_t); outline: 4px solid var(--_c); outline-offset: 0; }
.ys-pin__ic {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px;
  background: var(--_c); border: var(--v2-stroke) solid var(--v2-ink);
}
.ys-pin__ic .v2-icon { width: 38px; height: 38px; color: #1F1D3D; --v2-icon-fill: #FFFFFF; }
.ys-pin__metin { display: grid; gap: 2px; min-width: 0; }
.ys-pin__ad { font-family: var(--v2-font-display); font-weight: var(--v2-weight-heavy); font-size: var(--v2-text-xl); line-height: 1.1; }
.ys-pin__kisa { font-size: var(--v2-text-sm); color: var(--v2-ink-2); }
.ys-pin__say { display: inline-flex; align-items: center; gap: 4px; font-family: var(--v2-font-mono); font-weight: 800; font-size: var(--v2-text-sm); }
.ys-pin__say .v2-icon { width: 18px; height: 18px; --v2-icon-fill: var(--v2-green); }
.ys-pin.is-bos { opacity: .72; }
.ys-pin.is-bos .ys-pin__say { font-family: var(--v2-font-body); color: var(--v2-ink-2); }
.ys-balon, .ys-genel { display: none; }

/* 3B görünüm */
.ys-sahne.is-3b { padding: 0; aspect-ratio: 16 / 11; min-height: 340px; max-height: 78vh; background: #DDF1E6; }
@media (max-width: 559.98px) { .ys-sahne.is-3b { aspect-ratio: 4 / 5; } }
.ys-sahne.is-3b .ys-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.ys-sahne.is-3b .ys-mahalleler { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; }
.ys-sahne.is-3b .ys-pin-li { position: absolute; left: 0; top: 0; will-change: transform; }
.ys-sahne.is-3b .ys-pin {
  pointer-events: auto; position: absolute; left: 0; bottom: 6px; transform: translateX(-50%);
  width: max-content; max-width: 200px; min-height: 48px; padding: 6px 12px 6px 6px; gap: 8px; border-radius: 999px;
  grid-template-columns: auto auto; box-shadow: 0 3px 0 var(--v2-shadow-color); background: var(--v2-surface);
}
.ys-sahne.is-3b .ys-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: inherit; border-right: var(--v2-stroke) solid var(--v2-ink); border-bottom: var(--v2-stroke) solid var(--v2-ink);
}
.ys-sahne.is-3b .ys-pin:hover, .ys-sahne.is-3b .is-hover .ys-pin { transform: translateX(-50%) translateY(-3px); }
.ys-sahne.is-3b .ys-pin[aria-pressed="true"] { background: var(--_t); outline: 3px solid var(--_c); outline-offset: 2px; z-index: 2; }
.ys-sahne.is-3b .ys-pin-li:has([aria-pressed="true"]) { z-index: 2; }
.ys-sahne.is-3b .ys-pin__ic { width: 36px; height: 36px; border-radius: 50%; }
.ys-sahne.is-3b .ys-pin__ic .v2-icon { width: 22px; height: 22px; }
.ys-sahne.is-3b .ys-pin__ad { font-size: var(--v2-text-sm); white-space: nowrap; }
.ys-sahne.is-3b .ys-pin__kisa { display: none; }
.ys-sahne.is-3b .ys-pin__say { font-size: var(--v2-text-xs); }
@media (max-width: 559.98px) {
  .ys-sahne.is-3b .ys-pin { padding: 4px; gap: 0; grid-template-columns: auto; }
  .ys-sahne.is-3b .ys-pin__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ys-sahne.is-3b .ys-pin[aria-pressed="true"] { padding: 4px 12px 4px 4px; gap: 8px; grid-template-columns: auto auto; }
  .ys-sahne.is-3b .ys-pin[aria-pressed="true"] .ys-pin__metin { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.ys-sahne.is-3b .ys-balon {
  display: block; position: absolute; left: 0; top: 0; z-index: 1; translate: -50% -100%; pointer-events: none; margin: 0;
  max-width: 220px; padding: 8px 14px; font-weight: 800; font-size: var(--v2-text-sm); line-height: 1.25; text-align: center;
  color: #1F1D3D; background: #FFFFFF; border: var(--v2-stroke) solid #1F1D3D; border-radius: 16px; box-shadow: 0 3px 0 rgba(31, 29, 61, .25);
}
.ys-sahne.is-3b .ys-balon[hidden] { display: none; }
.ys-sahne.is-3b .ys-genel:not([hidden]) {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 12px; bottom: 12px; z-index: 3;
  min-height: 48px; padding: 0 16px; font: inherit; font-weight: 800; color: #1F1D3D; cursor: pointer;
  background: #FFFFFF; border: var(--v2-stroke) solid #1F1D3D; border-radius: 999px; box-shadow: 0 3px 0 rgba(31, 29, 61, .3);
}
.ys-genel .v2-icon { width: 22px; height: 22px; }

/* ---- Harita görünümü (varsayılan): ada-sehir diorama + yapıların üstünde sıcak noktalar ----
   Konum betikte (yüzde, yapının ortası; li.style.left/top). Geniş ekranda iğne (simge + ad + sayı) yapının ÜSTÜNDE durur ve
   kuyruğu yapıyı gösterir (3B iğnesiyle aynı dil); dar ekranda yapının üstünde yuvarlak simge (ad ekran okuyucuda ve
   hemen alttaki panel başlığında).
   Harita üstündeki etiketler temadan bağımsız opak beyaz + koyu mürekkep (AA). */
.ys-sahne.is-harita { padding: 0; background: #17407A; }
.ys-harita { position: relative; aspect-ratio: 1344 / 752; }
.ys-harita img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ys-sahne.is-harita .ys-mahalleler { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; }
.ys-sahne.is-harita .ys-pin-li { position: absolute; width: 0; height: 0; }
.ys-sahne.is-harita .ys-pin-li:has([aria-pressed="true"]), .ys-sahne.is-harita .ys-pin-li:focus-within { z-index: 2; }
.ys-sahne.is-harita .ys-pin {
  pointer-events: auto; position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 22px));
  width: max-content; max-width: 210px; min-height: 48px; padding: 5px 14px 5px 5px; gap: 8px; grid-template-columns: auto auto;
  color: #1F1D3D; background: #FFFFFF; border-color: #1F1D3D; border-radius: 999px; box-shadow: 0 4px 0 rgba(31, 29, 61, .45);
}
.ys-sahne.is-harita .ys-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: inherit; border-right: var(--v2-stroke) solid #1F1D3D; border-bottom: var(--v2-stroke) solid #1F1D3D;
}
.ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, calc(-100% - 25px)); }
.ys-sahne.is-harita .ys-pin[aria-pressed="true"] {
  background: #FFFFFF; outline: 4px solid var(--_c); outline-offset: 2px; box-shadow: 0 0 0 9px rgba(255, 255, 255, .55), 0 4px 0 rgba(31, 29, 61, .45);
}
.ys-sahne.is-harita .ys-pin:focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 4px; }
.ys-sahne.is-harita .ys-pin__ic { width: 38px; height: 38px; border-radius: 50%; border-color: #1F1D3D; }
.ys-sahne.is-harita .ys-pin__ic .v2-icon { width: 22px; height: 22px; }
.ys-sahne.is-harita .ys-pin__ad { font-size: var(--v2-text-sm); white-space: nowrap; }
.ys-sahne.is-harita .ys-pin__kisa { display: none; }
.ys-sahne.is-harita .ys-pin__say { font-size: var(--v2-text-xs); color: #1F1D3D; }
.ys-sahne.is-harita .ys-pin.is-bos { opacity: 1; background: #F1F0F6; border-style: dashed; }
.ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ic { background: #E4E2EE; }
.ys-sahne.is-harita .ys-pin.is-bos .ys-pin__say { color: #4A4766; }
.ys-gecis {
  position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px; font-weight: 800; color: #1F1D3D; text-decoration: none;
  background: #FFFFFF; border: var(--v2-stroke) solid #1F1D3D; border-radius: 999px; box-shadow: 0 3px 0 rgba(31, 29, 61, .3);
}
.ys-gecis[data-hedef="3b"] { top: auto; bottom: 12px; }
.ys-gecis:hover { text-decoration: none; transform: translateY(-2px); }
.ys-gecis:focus-visible { outline: 3px solid var(--v2-focus); outline-offset: 3px; }
.ys-gecis .v2-icon { width: 22px; height: 22px; }
@media (max-width: 559.98px) {
  .ys-sahne.is-harita .ys-pin, .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, -50%); padding: 0; gap: 0; grid-template-columns: auto; border-width: 3px; }
  .ys-sahne.is-harita .ys-pin::after { display: none; }
  .ys-sahne.is-harita .ys-pin__ic { width: 44px; height: 44px; border: 0; }
  .ys-sahne.is-harita .ys-pin__ic .v2-icon { width: 26px; height: 26px; }
  .ys-sahne.is-harita .ys-pin[aria-pressed="true"] { outline-width: 3px; box-shadow: 0 0 0 6px #FFFFFF, 0 4px 0 6px rgba(31, 29, 61, .4); }
  .ys-sahne.is-harita .ys-pin__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ys-gecis { top: 8px; right: 8px; min-height: 44px; padding: 0 12px; font-size: var(--v2-text-sm); }
  .ys-gecis[data-hedef="3b"] { top: auto; bottom: 8px; }
}

/* ---- Panel: seçili mahallenin yolu ---- */
.ys-panel {
  display: grid; gap: var(--v2-space-4); padding: var(--v2-space-4);
  background: linear-gradient(180deg, var(--_t), var(--v2-surface) 140px); border: var(--v2-stroke) solid var(--v2-ink);
  border-radius: var(--v2-radius-lg); box-shadow: 0 var(--v2-offset) 0 var(--v2-shadow-color);
}
@media (min-width: 980px) { .ys-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; } }
.ys-panel__bas { display: flex; align-items: center; gap: 14px; }
.ys-panel__ic { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--_c); border: var(--v2-stroke) solid var(--v2-ink); }
.ys-panel__ic .v2-icon { width: 38px; height: 38px; color: #1F1D3D; --v2-icon-fill: #FFFFFF; }
.ys-panel__metin { display: grid; gap: 2px; min-width: 0; }
.ys-panel__metin h2 { margin: 0; font-size: var(--v2-text-2xl, 2rem); line-height: 1.05; }
.ys-panel__metin h2:focus { outline: none; }
.ys-panel__kisa { margin: 0; font-weight: var(--v2-weight-strong); color: var(--v2-ink-2); }
.ys-bos { margin: 0; font-size: var(--v2-text-md); color: var(--v2-ink-2); }
.ys-bos[hidden] { display: none; }

.ys-siradaki:empty { display: none; }
.ys-siradaki__in {
  display: grid; gap: 12px; padding: 14px; background: var(--v2-surface);
  border: var(--v2-stroke) solid var(--v2-ink); border-radius: 18px;
}
.ys-siradaki__in.is-bitti, .ys-siradaki__in.is-kilit { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.ys-siradaki__in.is-kilit .ys-basla { grid-column: 1 / -1; }
.ys-siradaki__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--v2-yellow); border: var(--v2-stroke) solid var(--v2-ink); }
.ys-siradaki__ic .v2-icon { width: 28px; height: 28px; color: #1F1D3D; --v2-icon-fill: #FFFFFF; }
.ys-siradaki__in.is-kilit .ys-siradaki__ic { background: var(--v2-sunken); }
.ys-siradaki__in.is-kilit .ys-siradaki__ic .v2-icon { color: var(--v2-ink); }
.ys-siradaki__metin { display: grid; gap: 2px; min-width: 0; }
.ys-siradaki__etiket { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--v2-ink); color: var(--v2-on-ink); font-size: var(--v2-text-xs); font-weight: 800; }
.ys-siradaki__ad { font-size: var(--v2-text-lg); line-height: 1.2; overflow-wrap: anywhere; }
.ys-siradaki__metin small { color: var(--v2-ink-2); font-weight: var(--v2-weight-strong); }
.ys-basla { justify-content: center; width: 100%; }
.ys-basla .v2-icon { width: 24px; height: 24px; }

.ys-yol { position: relative; list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 12px; }
.ys-yol:empty { display: none; }
.ys-yol::before {
  content: ""; position: absolute; left: 26px; top: 28px; bottom: 28px; width: 8px; margin-left: -4px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--_c) 0 14px, transparent 14px 24px); opacity: .7;
}
.ys-durak__a {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 56px; color: var(--v2-ink); text-decoration: none; border-radius: 999px 16px 16px 999px;
}
.ys-durak__a:hover { text-decoration: none; }
.ys-durak__a:hover .ys-durak__govde { transform: translateX(4px); }
.ys-durak__nokta {
  position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--v2-paper); border: var(--v2-stroke) solid var(--v2-ink); font-family: var(--v2-font-mono); font-weight: 800; font-size: var(--v2-text-md);
}
.ys-durak__nokta .v2-icon { width: 26px; height: 26px; }
.ys-durak__govde {
  display: grid; gap: 4px; min-width: 0; padding: 8px 14px; min-height: 52px; align-content: center;
  background: var(--v2-surface); border: var(--v2-stroke-soft) solid var(--v2-ink); border-radius: 14px;
  transition: transform var(--v2-dur-fast) var(--v2-ease);
}
.ys-durak__ad { font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ys-durak__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--v2-text-xs); font-weight: 800; color: var(--v2-ink-2); }
.ys-durak__yildizlar { display: inline-flex; gap: 2px; }
.ys-durak__yildiz { width: 18px; height: 18px; color: var(--v2-ink); --v2-icon-fill: var(--v2-yellow); }
.ys-durak__etiket { padding: 2px 10px; border-radius: 999px; background: var(--v2-ink); color: var(--v2-on-ink); }
.ys-durak.is-done .ys-durak__nokta { background: var(--v2-green); color: #1F1D3D; }
.ys-durak.is-done .ys-durak__nokta .v2-icon { color: #1F1D3D; }
.ys-durak.is-locked .ys-durak__nokta { border-style: dashed; color: var(--v2-ink-2); }
.ys-durak.is-locked .ys-durak__govde { background: transparent; border-style: dashed; }
.ys-durak.is-locked .ys-durak__kilit { color: var(--v2-tomato-ink); }
.ys-durak.is-next .ys-durak__nokta { background: var(--v2-yellow); color: #1F1D3D; box-shadow: 0 0 0 6px color-mix(in srgb, var(--v2-yellow) 35%, transparent); }
.ys-durak.is-next .ys-durak__govde { border-width: var(--v2-stroke); background: var(--_t); }

@media (prefers-reduced-motion: reduce) {
  .ys-bant__d, .ys-pin, .ys-durak__govde { transition: none; }
  .ys-bant__d:hover, .ys-pin:hover, .ys-durak__a:hover .ys-durak__govde { transform: none; }
  .ys-sahne.is-3b .ys-pin:hover, .ys-sahne.is-3b .is-hover .ys-pin { transform: translateX(-50%); }
  .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, calc(-100% - 22px)); }
  .ys-gecis:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 559.98px) {
  .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, -50%); }
}