/* YZ Şehri (/yz-sehri/) — Ada Cam eşlemesi (D116). Yalnız html[data-tema="ada"].canli altında; v2 yz-sehri.css değişmez
   (?tema=yok, ?kabuk=eski eski görünümü verir). Ortak dil: shared/styles/v3/ada-cam.css.
   Renk = mahalle (data-renk). Harita üstündeki etiketler opak beyaz kalır (AA, harita her renkte olabilir); yalnız konturları yumuşar.
   Etiket çakışması: boş mahalle ("Bu sınıfta oyun yok") etiketi küçük yuvarlak simgeye iner, yazısı ekran okuyucuda kalır. */

/* -- mahalle renkleri → Ada aileleri -- */
html[data-tema="ada"].canli :is(.ys-pin, .ys-panel) { --ra: #FFD24A; --rb: #FF9A1F; --rr: 255, 170, 40; --ri: #8A4B00; }
html[data-tema="ada"].canli :is(.ys-pin, .ys-panel)[data-renk="blue"]   { --ra: #38BDF8; --rb: #3B6CFF; --rr: 56, 140, 255; --ri: #1D4FC4; }
html[data-tema="ada"].canli :is(.ys-pin, .ys-panel)[data-renk="green"]  { --ra: #34D9B0; --rb: #14B8C8; --rr: 20, 190, 170; --ri: #0B6E66; }
html[data-tema="ada"].canli :is(.ys-pin, .ys-panel)[data-renk="tomato"] { --ra: #FF9A6B; --rb: #FF5C7A; --rr: 255, 110, 110; --ri: #B0302E; }
html[data-tema="ada"].canli :is(.ys-pin, .ys-panel)[data-renk="mor"]    { --ra: #C08BFF; --rb: #8A5CFF; --rr: 150, 100, 255; --ri: #5B2BB8; }

/* -- başlık ve sınıf seçici -- */
html[data-tema="ada"].canli .ys-ust__metin h1 { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.02em; }
html[data-tema="ada"].canli .ys-ust__lead { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-bant__etiket { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-bant__d {
  font-family: var(--ac-font-baslik); font-weight: 900; color: var(--ac-metin);
  border: 1px solid var(--ac-kenar); border-radius: 18px; background: rgba(255,255,255,.74);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 16px -12px rgba(var(--ac-golge-r), .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .2s, color .2s, transform .2s var(--ac-ease), box-shadow .2s;
}
html[data-tema="ada"].canli .ys-bant__d:hover { background: #FFFFFF; transform: translateY(-1px); }
html[data-tema="ada"].canli .ys-bant__d[aria-pressed="true"] {
  color: #FFFFFF; background: var(--ac-birincil); border-color: transparent; transform: none; box-shadow: 0 8px 18px -8px rgba(91,72,255,.7);
}
html[data-tema="ada"].canli :is(.ys-bant__d, .ys-gecis, .ys-genel):focus-visible { outline: none; box-shadow: var(--ac-odak); }

/* -- harita çerçevesi: kalın kontur yerine cam paspartu -- */
html[data-tema="ada"].canli .ys-sahne {
  border: 1px solid var(--ac-kenar); border-radius: 28px;
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .ys-sahne.is-harita {
  padding: 8px; background: var(--ac-cam); -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-harita { overflow: hidden; border-radius: 21px; background: #17407A; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-mahalleler { inset: 8px; }
html[data-tema="ada"].canli .ys-sahne.is-3b { border-radius: 28px; }

/* -- harita etiketleri: opak beyaz hap, ince çizgi, yumuşak gölge; simge degrade -- */
html[data-tema="ada"].canli .ys-sahne:is(.is-harita, .is-3b) .ys-pin {
  border: 0; color: var(--ac-metin); background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(27,24,70,.12), 0 8px 18px -8px rgba(15,30,80,.55);
}
html[data-tema="ada"].canli .ys-sahne:is(.is-harita, .is-3b) .ys-pin::after { border: 0; box-shadow: 2px 2px 3px -1px rgba(15,30,80,.25); }
html[data-tema="ada"].canli .ys-sahne:is(.is-harita, .is-3b) .ys-pin[aria-pressed="true"] {
  outline: none; background: #FFFFFF;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgb(var(--rr)), 0 12px 24px -8px rgba(15,30,80,.6);
}
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:focus-visible { outline: none; box-shadow: var(--ac-odak); }
html[data-tema="ada"].canli .ys-pin__ic {
  border: 0; background: linear-gradient(140deg, var(--ra), var(--rb));
  box-shadow: 0 6px 12px -6px rgba(var(--rr), .85), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli .ys-pin__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .ys-pin__ad { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .ys-pin__say { font-family: var(--v2-font-body); font-weight: 800; color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin__say { color: var(--ac-metin-2); }
/* Geniş ekran etiketi biraz daha derli toplu: daha az iç boşluk, kuyruk binaya daha yakın (komşu etiketle çakışma azalır) */
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin { min-height: 44px; padding: 4px 12px 4px 4px; gap: 7px; transform: translate(-50%, calc(-100% - 16px)); }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, calc(-100% - 19px)); }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin::after { bottom: -6px; width: 12px; height: 12px; margin-left: -6px; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin__ic { width: 36px; height: 36px; }
/* Boş mahalle: kesik çizgili gri hap yerine küçük, sakin, yarı saydam simge; "Bu sınıfta oyun yok" yalnız ekran okuyucuda */
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos { background: rgba(255,255,255,.86); border: 0; padding: 4px 12px 4px 4px; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ic { background: linear-gradient(140deg, #C9C5E6, #A8A3CF); box-shadow: none; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ad { font-size: var(--v2-text-xs); color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__say {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ic { width: 28px; height: 28px; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ic .v2-icon { width: 18px; height: 18px; }
html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos { min-height: 36px; }
/* Orta genişlikte (harita dar) yalnız seçili mahallenin sayısı görünür */
@media (min-width: 560px) and (max-width: 1279.98px) {
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:not([aria-pressed="true"]) .ys-pin__say {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
html[data-tema="ada"].canli :is(.ys-gecis, .ys-sahne.is-3b .ys-genel:not([hidden])) {
  border: 1px solid var(--ac-kenar); color: var(--ac-metin); background: rgba(255,255,255,.86);
  box-shadow: 0 0 0 1px rgba(27,24,70,.1), 0 8px 18px -8px rgba(15,30,80,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-tema="ada"].canli .ys-gecis:hover { background: #FFFFFF; }
html[data-tema="ada"].canli .ys-sahne.is-3b .ys-balon { border: 0; box-shadow: 0 0 0 1px rgba(27,24,70,.12), 0 8px 18px -8px rgba(15,30,80,.5); }
@media (max-width: 559.98px) {
  html[data-tema="ada"].canli .ys-sahne.is-harita { padding: 6px; border-radius: 22px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-harita { border-radius: 17px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-mahalleler { inset: 6px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin, html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, -50%); height: auto; padding: 3px; min-height: 0; border-width: 0; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos { padding: 3px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin__ic { width: 44px; height: 44px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin.is-bos .ys-pin__ic { width: 36px; height: 36px; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin[aria-pressed="true"] { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgb(var(--rr)), 0 10px 20px -8px rgba(15,30,80,.6); }
}

/* -- 2B yedek kartları (harita yüklenemezse) -- */
html[data-tema="ada"].canli .ys-sahne:not(.is-harita):not(.is-3b) .ys-pin {
  border: 1px solid var(--ac-kenar); border-radius: 22px; background: var(--ac-cam);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .ys-sahne:not(.is-harita):not(.is-3b) .ys-pin[aria-pressed="true"] { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px rgb(var(--rr)), var(--ac-golge-ust); }

/* -- sağ panel: cam, sakin -- */
html[data-tema="ada"].canli .ys-panel {
  position: relative; isolation: isolate; border: 1px solid var(--ac-kenar); border-radius: var(--ac-r); color: var(--ac-metin);
  background: var(--ac-cam); box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .ys-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 260px at 0% 0%, rgba(var(--rr), .16), transparent 70%);
}
html[data-tema="ada"].canli .ys-panel__ic {
  border: 0; border-radius: 20px; background: linear-gradient(140deg, var(--ra), var(--rb));
  box-shadow: 0 10px 20px -10px rgba(var(--rr), .85), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-tema="ada"].canli .ys-panel__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .ys-panel__metin h2 { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.015em; }
html[data-tema="ada"].canli .ys-panel__kisa, html[data-tema="ada"].canli .ys-bos { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-panel .v2-progress-label span:last-child { font-family: var(--v2-font-body); font-weight: 800; color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-panel .v2-progress__bar { background: linear-gradient(90deg, var(--ra), var(--rb)); }
html[data-tema="ada"].canli .ys-siradaki__in {
  border: 1px solid var(--ac-kenar); border-radius: 20px; background: rgba(255,255,255,.8);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 8px 20px -14px rgba(var(--ac-golge-r), .45);
}
html[data-tema="ada"].canli .ys-siradaki__ic { border: 0; background: linear-gradient(140deg, #9B7BFF, #4F6BFF); box-shadow: 0 8px 16px -8px rgba(91,72,255,.8); }
html[data-tema="ada"].canli .ys-siradaki__ic .v2-icon { color: #1B1846; --v2-icon-fill: rgba(255,255,255,.55); }
html[data-tema="ada"].canli .ys-siradaki__in.is-kilit .ys-siradaki__ic { background: rgba(123,92,255,.12); box-shadow: inset 0 0 0 1px rgba(91,72,200,.16); }
html[data-tema="ada"].canli .ys-siradaki__ad { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .ys-siradaki__etiket { color: #FFFFFF; background: var(--ac-birincil); }

/* -- kilitli oyun listesi: kesik çizgili kutular yerine sakin cam satırlar -- */
html[data-tema="ada"].canli .ys-yol::before { width: 6px; margin-left: -3px; background: repeating-linear-gradient(180deg, rgba(var(--rr), .45) 0 12px, transparent 12px 22px); opacity: 1; }
html[data-tema="ada"].canli .ys-durak__nokta {
  border: 1px solid var(--ac-kenar); background: rgba(255,255,255,.92); color: var(--ac-metin);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 14px -8px rgba(var(--ac-golge-r), .45); font-family: var(--ac-font-baslik); font-weight: 900;
}
html[data-tema="ada"].canli .ys-durak__govde {
  border: 1px solid var(--ac-kenar); border-radius: 16px; background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 14px -12px rgba(var(--ac-golge-r), .4);
}
html[data-tema="ada"].canli .ys-durak__a:hover .ys-durak__govde { background: #FFFFFF; }
html[data-tema="ada"].canli .ys-durak__a:focus-visible { outline: none; box-shadow: var(--ac-odak); }
html[data-tema="ada"].canli .ys-durak.is-done .ys-durak__nokta { border-color: transparent; color: #FFFFFF; background: linear-gradient(140deg, #34D9B0, #22B07D); }
html[data-tema="ada"].canli .ys-durak.is-done .ys-durak__nokta .v2-icon { color: #FFFFFF; }
html[data-tema="ada"].canli .ys-durak.is-locked .ys-durak__nokta { border-style: solid; background: rgba(255,255,255,.6); color: var(--ac-metin-3); box-shadow: 0 0 0 1px rgba(91,72,200,.1); }
html[data-tema="ada"].canli .ys-durak.is-locked .ys-durak__govde { border-style: solid; background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(91,72,200,.1); }
html[data-tema="ada"].canli .ys-durak.is-locked .ys-durak__ad { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ys-durak.is-locked .ys-durak__kilit { color: var(--ac-metin-2); font-weight: 700; }
html[data-tema="ada"].canli .ys-durak.is-next .ys-durak__nokta { border: 0; color: #FFFFFF; background: linear-gradient(140deg, #9B7BFF, #4F6BFF); box-shadow: 0 0 0 5px rgba(123,92,255,.28); }
html[data-tema="ada"].canli .ys-durak.is-next .ys-durak__govde { border-width: 1px; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(var(--rr), .3), var(--ac-golge); }
html[data-tema="ada"].canli .ys-durak__etiket { color: #FFFFFF; background: var(--ac-birincil); }

/* -- hareket azaltma ve zayıf cihaz -- */
@media (prefers-reduced-motion: reduce) {
  html[data-tema="ada"].canli .ys-bant__d { transition: none; }
  html[data-tema="ada"].canli .ys-bant__d:hover { transform: none; }
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, calc(-100% - 16px)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 559.98px) {
  html[data-tema="ada"].canli .ys-sahne.is-harita .ys-pin:hover { transform: translate(-50%, -50%); }
}
html:is(.efekt-az, .a11y-calm)[data-tema="ada"].canli :is(.ys-panel, .ys-sahne.is-harita, .ys-bant__d, .ys-gecis) {
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: none;
}

/* Geniş ekranda harita, uzun oyun listesi kayarken yerinde kalır (sol sütun boş görünmez) */
@media (min-width: 980px) {
  html[data-tema="ada"].canli .ys-sahne.is-harita { position: sticky; top: 16px; }
}