/* SIXTH PATH // css/ui_erisim.css :: ERİŞİM (b1333 Paket B, js/sim/erisim.js) ve İLK ADIMLAR rehberi (Paket A, js/sim/ilkadim.js).
   Son yüklenen sayfa: kuralları öbür katmanların üstüne biner.
   KURAL (Android WebView): sonsuz animasyon, kalıcı will-change, mask, mix-blend, backdrop-filter, büyük bulanıklık YOK;
   tek atımlık girişler ≤ 600 ms, backwards dolgu. Renkler: obsidyen #121110, altın #D2AC52, fildişi #EEE6D4. */

/* =============================================================================
   1 · YAZI BOYU — tek değişken: html --yk (erisim.js: 1 · 1.12 · 1.25). Kartın yazısı (manşet, alıntı, açılan giriş),
   balon ve şıkların yazısı aynı katsayıyla büyür (zoom: satırlar yeni boyda yeniden kırılır, yerleşim gerçek boyu
   görür). Taşan kartı main.js metinSigdir önce kendi kademeleriyle sığdırır, yine taşarsa kart kaydırılır (.tasar).
   ============================================================================= */
html body.kartli .dc-box #dc-text,
html body.kartli #dc-scene #dc-balon .db-bt,
html body.kartli #dc-options .dc-opt .dc-label { zoom: var(--yk, 1); }

/* =============================================================================
   2 · AZ HAREKET — body.az-hareket (ayar ya da prefers-reduced-motion): bütün tek atımlık animasyonlar ve geçişler
   anında biter (son hâline oturur). Kartın kayboluşu ve parşömenin sarılışı JS'de atlanır (hukum_sahne.js azHareket).
   Basılı tutmanın dolgu çizgisi istisnadır: oyuncu tutmanın ne kadar sürdüğünü görmeli (süre --tut-ms).
   ============================================================================= */
html body.az-hareket *, html body.az-hareket *::before, html body.az-hareket *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html body.az-hareket.kartli #dc-options .dc-opt.kt-tut .dc-tut,
html body.az-hareket #dc-options .dc-opt.tut-dolu .dc-tut,
html body.az-hareket #dc-options .dc-opt.tut-iniyor .dc-tut,
html body.az-hareket .tut-dolu s i,
html body.az-hareket .tut-dolu .yo-dolgu,
html body.az-hareket #onay-modal.onay-tut .onay-yes.dolu .onay-dolgu { transition-duration: var(--tut-ms, 600ms) !important; }

/* =============================================================================
   3 · RENK YANINDA İŞARET — iyi/kötü ya da kademe yalnız renkle söylenmesin (body.isaret-yok kapatır).
   ============================================================================= */
/* zar kademesi: madalyonun kenar rengi + şıkkın sol üst kenarında taşlar ve söz (main.js .sans-soz, yazı attr ile) */
.sans-soz { display: none; }
html body.kartli #dc-options .dc-opt > .sans-soz {
  display: flex; align-items: center; position: absolute; top: -11px; left: 18px; z-index: 2; height: 15px; padding: 0 6px;
  border-radius: 999px; background: #f7ecd0; border: 1px solid #c9b07a; box-shadow: 0 1px 2px rgba(40, 26, 6, .22);
  pointer-events: none; white-space: nowrap;
}
html body.kartli #dc-options .dc-opt > .sans-soz::after {
  content: attr(data-soz); font: 700 8px/1 var(--pr-display, 'Cinzel', serif); letter-spacing: .06em; color: var(--kt-deep, #8c6a1e);
}
html body.kartli #dc-options .dc-opt > .sans-soz.sans-hi { border-color: #3f7f52; }
html body.kartli #dc-options .dc-opt > .sans-soz.sans-hi::after { color: #2c6236; }
html body.kartli #dc-options .dc-opt > .sans-soz.sans-lo { border-color: #a4502a; }
html body.kartli #dc-options .dc-opt > .sans-soz.sans-lo::after { color: #8f3420; }
/* madalyon öbeği hapın üst kenarına çıkıp sola geçtiyse (çip varken .ht-kose sol 16 px) söz onun sağına kayar */
html body.kartli #dc-options .dc-opt:has(> .pay):has(.ht-grup.ht-kose) > .sans-soz { left: 74px; }
html body.kartli .dc-box.muhurlu .sans-soz,
html body.isaret-yok .sans-soz { display: none !important; }
/* kritik okuma (tepe bant): kızıl halenin yanında köşede "!" mührü */
html body.kartli.mapless:not(.isaret-yok) #cmd-vitals #vt-group .vt.crit {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.6' fill='%23121110' stroke='%23ec603c' stroke-width='.9'/%3E%3Cpath d='M5 2.4v3.3' stroke='%23EEE6D4' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='7.4' r='.8' fill='%23EEE6D4'/%3E%3C/svg%3E") right 0 top 0 / 9px 9px no-repeat,
    radial-gradient(circle at 50% 42%, rgba(230, 72, 40, .34), rgba(230, 72, 40, 0) 72%) !important;
}
/* tehlikedeki okumayı düşüren şık: kızıl kılın yanında çipte "!" */
html body.kartli:not(.isaret-yok) #dc-options .dc-opt.pay-tehlike .pay i.teh b::after { content: '!'; margin-left: 1px; }

/* =============================================================================
   4 · İLK ADIMLAR (ilkadim.js) — işaretli öğenin çevresinde altın halka, dışı düz koyu örtü (dört dikdörtgen);
   obsidyen balon, altın kıl, fildişi yazı. Kipli adımda örtü basışı yutar; eylem adımında (mühürle, yol) basış geçer.
   ============================================================================= */
#ilk-adim { position: fixed; inset: 0; z-index: 9300; pointer-events: none; }
#ilk-adim.hidden { display: none; }
#ilk-adim .ia-perde { position: absolute; inset: 0; pointer-events: none; }
#ilk-adim.kipli .ia-perde { pointer-events: auto; touch-action: none; }
/* örtü: halkanın çevresinde dört düz dikdörtgen (ilkadim.js yerlestir) — ekran boyunu aşan katman yok */
#ilk-adim .ia-ort { position: absolute; display: block; background: rgba(18, 17, 16, .66); pointer-events: none; }
#ilk-adim:not(.kipli) .ia-ort { background: rgba(18, 17, 16, .5); }
#ilk-adim .ia-halka {
  position: absolute; box-sizing: border-box; border: 2px solid #D2AC52; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, .9);
}
#ilk-adim .ia-balon {
  position: absolute; box-sizing: border-box; pointer-events: auto; padding: 10px 14px 12px;
  background: #121110; color: #EEE6D4; border: 1px solid #D2AC52; border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55); font: 400 calc(15px * var(--yk, 1))/1.34 var(--pr-metin, 'Alegreya', Georgia, serif);
  max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
}
/* ok: balonun işaretli öğeye bakan kenarında küçük altın baklava */
#ilk-adim .ia-balon::after {
  content: ''; position: absolute; left: var(--ia-ok, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: #121110; border-right: 1px solid #D2AC52; border-bottom: 1px solid #D2AC52; transform: rotate(45deg);
}
#ilk-adim .ia-balon.alt::after { bottom: auto; top: -6px; transform: rotate(225deg); }
#ilk-adim.gel .ia-balon { animation: iaGel 200ms ease-out backwards; }
@keyframes iaGel { from { opacity: 0; transform: translateY(6px); } }
#ilk-adim .ia-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#ilk-adim .ia-no { font: 700 9px/1 var(--pr-display, 'Cinzel', serif); letter-spacing: .16em; color: #D2AC52; }
#ilk-adim .ia-gec {
  appearance: none; background: none; border: 0; padding: 13px 0 13px 14px; margin: -13px 0; cursor: pointer;   /* dokunma yüksekliği ~36 px */
  font: 700 9.5px/1 var(--pr-display, 'Cinzel', serif); letter-spacing: .12em; color: rgba(238, 230, 212, .72);
  text-decoration: underline; text-decoration-color: rgba(210, 172, 82, .6); text-underline-offset: 3px;
}
#ilk-adim h4 { margin: 2px 0 4px; font: 700 calc(14px * var(--yk, 1))/1.2 var(--pr-display, 'Cinzel', serif); letter-spacing: .08em; color: #D2AC52; }
#ilk-adim p { margin: 0 0 6px; }
#ilk-adim .ia-not { font-style: italic; color: rgba(238, 230, 212, .78); font-size: calc(13.5px * var(--yk, 1)); }
#ilk-adim .ia-eylem { margin: 6px 0 0; font: 700 10px/1 var(--pr-display, 'Cinzel', serif); letter-spacing: .16em; color: #D2AC52; text-align: center; }
#ilk-adim .ia-ileri { display: block; width: 100%; margin-top: 8px; min-height: 40px; }
#ilk-adim .ia-lejant { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 5px; }
#ilk-adim .ia-lejant li { display: flex; align-items: flex-start; gap: 8px; font-size: calc(13.5px * var(--yk, 1)); line-height: 1.3; }
#ilk-adim .ia-lejant em { font: 700 calc(10.5px * var(--yk, 1))/1.3 var(--pr-display, 'Cinzel', serif); font-style: normal; letter-spacing: .06em; color: #EEE6D4; }
#ilk-adim .ia-lejant b { color: #EEE6D4; font-weight: 700; }
/* lejantın madalyonları kartın madalyonlarıyla aynı çizim (hukum_tur.js turSvg), düz bronz zeminde */
#ilk-adim .ia-ik {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: #e9d9a8; border: 1px solid #8c6a1e; color: #3a2c12; margin-top: 1px;
}
#ilk-adim .ia-ik svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
#ilk-adim .ia-ik svg .d { fill: currentColor; stroke: none; }
#ilk-adim .ia-ik.ia-cip { width: auto; padding: 0 5px; border-radius: 999px; gap: 2px; font: 700 9px/1 var(--pr-display, 'Cinzel', serif); background: #f7ecd0; }
#ilk-adim .ia-ik.ia-cip .art { color: #2c6236; }
#ilk-adim .ia-ik.ia-cip .eks { color: #8f3420; }
/* isabet ölçümü sırasında rehber dokunuş hedefi değildir (ilkadim.js acikMi) */
#ilk-adim.ia-olc, #ilk-adim.ia-olc * { pointer-events: none !important; }