/* SIXTH PATH // css/ui_kriz.css :: Sürüm 1 "Çağ Kapısı" — Kriz kartı (Altın çerçeve), şerit geri sayım çipi, yara çatlağı, emanet yuvaları, Lacivert Sinek işareti,
   KANON bela kartının plaka kılı ve damgası.
   WP-B · kriz.js / emanet.js · SPEC §2.5–2.7. WP-0 dosyayı boş kurar (index.html bağlantısı sabit kalsın diye).
   Kart kipinde (WebView) yalnız tek atımlık transform/opacity, ≤ 600 ms, fill-mode both; sonsuz animasyon,
   kalıcı will-change, mask, blend, backdrop-filter, filter YOK (SPEC §4). Renkler düz: obsidyen #121110, altın
   #D2AC52, fildişi #EEE6D4; yazı Cinzel (--pr-display) + Alegreya (--pr-metin). Süsler öğenin kendi zemininde ya da
   kutu gölgesinde — ayrı katman açan öğe yok. */

:root { --kz-obs: #121110; --kz-altin: #D2AC52; --kz-fil: #EEE6D4; --kz-kan: #8f2a1a; --kz-altin-koyu: #8a6a22; }

/* =============================================================================
   1 · KRİZ KARTI — Altın çerçeve (SPEC §2.5, §2.8 "Altın = kriz kartı")
   Kil tabletin varak kenarının dışına düz iki halka: obsidyen kıl + altın bant; plaka altın kıllı, üstünde obsidyen
   "ÇAĞ KRİZİ" damgası. Başlık bir kez damgalanır (250 ms), plaka bir kez oturur (450 ms). Hepsi kutunun gölgesinde.
   ============================================================================= */
html body.kartli #decision .dc-box.kz-kart {
  box-shadow: 0 0 0 2px var(--kz-obs), 0 0 0 4.5px var(--kz-altin), 0 0 0 5.5px var(--kz-obs),
    inset 0 0 0 1px color-mix(in srgb, var(--kt-deep) 55%, #1a1004), inset 0 2px 0 1px rgba(255, 249, 228, .5),
    inset 0 0 30px color-mix(in srgb, var(--kz-altin) 22%, transparent), 0 16px 34px rgba(0, 0, 0, .7) !important;
}
/* plaka: altın kıl, obsidyen iç kıl — resmin kendi kutusunda (kz-art), fotoğrafın üstünde ayrı öğe yok */
html body.kartli #decision .dc-box.kz-kart #dc-art.kz-art { position: relative; }
html body.kartli #decision .dc-box.kz-kart #dc-art > img.kz-plaka {
  box-shadow: inset 0 0 0 1px var(--kz-obs);
  outline: 2px solid var(--kz-altin); outline-offset: -2px;
}
html body.kartli #decision .dc-box.kz-kart.kz-giris #dc-art > img.kz-plaka { animation: kzPlaka 450ms ease-out backwards; }
@keyframes kzPlaka { from { transform: scale(1.05); opacity: .55; } to { transform: scale(1); opacity: 1; } }
/* ÇAĞ KRİZİ damgası: plakanın sol üst köşesinde obsidyen bant, altın yazı + krizin ikonu + perde rakamı */
html body.kartli #decision .dc-box.kz-kart .kz-damga {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px 0 8px; border-radius: 0 0 4px 4px; pointer-events: none;
  background: var(--kz-obs); color: var(--kz-altin); box-shadow: inset 0 -1px 0 var(--kz-altin), inset 1px 0 0 var(--kz-altin), inset -1px 0 0 var(--kz-altin);
  font: 700 10px/1 var(--pr-display); letter-spacing: .16em; font-style: normal; white-space: nowrap;
}
html body.kartli #decision .dc-box.kz-kart .kz-damga .kz-ik { width: 14px; height: 14px; flex: none; }
html body.kartli #decision .dc-box.kz-kart .kz-damga b { font-weight: 700; color: var(--kz-fil); }
html body.kartli #decision .dc-box.kz-kart .kz-damga s { text-decoration: none; color: var(--kz-altin); padding-left: 5px; border-left: 1px solid color-mix(in srgb, var(--kz-altin) 55%, transparent); }
html body.kartli #decision .dc-box.kz-kart.kz-giris .kz-damga { animation: kzDamgaGir 300ms 120ms ease-out backwards; }
@keyframes kzDamgaGir { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
/* balonun giriş kıpırtısı (sim.css dbGel, fill both) bitince katmanda kalmasın: dolgu yalnız geriye — ölçüldü, kriz
   kartında balon + kutu + köşe dizini üç ayrı katmanda kalıyordu (DSF3 boşta 38 MB → 19 MB) */
html body.kartli #decision .dc-box.kz-kart #dc-balon { animation-fill-mode: backwards; }
/* ad plakası balonun altında kalmasın: balon sahnenin sağ %42'sinde (sim.css #dc-balon left 58%) — ad ve yer solda sarar */
html body.kartli #decision .dc-box.kz-kart #dc-kimlik { padding-right: calc(43% + 4px); }
html body.kartli #decision .dc-box.kz-kart #dc-kimlik b, html body.kartli #decision .dc-box.kz-kart #dc-kimlik i { white-space: normal; }
/* başlık: krizin adı, altın varak yerine koyu kan-kahve; girişte bir kez damga */
html body.kartli #decision .dc-box.kz-kart > h2#dc-title {
  color: var(--kz-kan) !important; font-size: 19px !important; letter-spacing: .14em !important;
}
html body.kartli #decision .dc-box.kz-kart.kz-giris > h2#dc-title { animation: kzBaslik 250ms ease-out backwards; }
@keyframes kzBaslik { from { transform: scale(1.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-height: 700px) { html body.kartli #decision .dc-box.kz-kart > h2#dc-title { font-size: 17px !important; } }
@media (prefers-reduced-motion: reduce) {
  html body.kartli #decision .dc-box.kz-kart.kz-giris #dc-art > img.kz-plaka,
  html body.kartli #decision .dc-box.kz-kart.kz-giris .kz-damga,
  html body.kartli #decision .dc-box.kz-kart.kz-giris > h2#dc-title { animation: none; }
}
/* kartın arkası: sonucun izleri */
html body.kartli #dc-hukum.kz-arka .hk-resim { outline: 2px solid var(--kz-altin); outline-offset: -2px; }
html body.kartli #dc-hukum .hk-iz .kz-iz-emanet { color: #7a5a10; font-weight: 700; }
html body.kartli #dc-hukum .hk-iz .kz-iz-yara { color: var(--kz-kan); font-weight: 700; }
html body.kartli #dc-hukum .hk-iz .kz-iz-atla { color: #5a4a30; }
html body.kartli #dc-hukum .hk-iz .kz-iz-feda { color: #2f5a4a; font-style: italic; letter-spacing: .02em; text-transform: none; }
html body.kartli #dc-hukum .hk-iz .em-iz-kolye { color: #22418F; font-weight: 700; }
html body.kartli #dc-hukum .hk-iz .em-iz-balta { color: #4f5a3a; }

/* =============================================================================
   2 · RÜTBE ŞERİDİ — geri sayım çipi (ikon + kalan kart; Usturlap'la hazırlık benekleri), Telgraf anahtarı
   Çip yalnız eşiği geçerken (3 ve 0) bir kez atar: tek 300 ms ölçek, sonsuz yok.
   ============================================================================= */
html body.kartli #od-serit .od-ek { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 16px; }
html body.kartli #od-serit .kz-cip { padding: 0 5px 0 3px; border-radius: 999px; background: var(--kz-obs); color: var(--kz-altin);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kz-altin) 70%, transparent); }
html body.kartli #od-serit .kz-cip .kz-ik { width: 11px; height: 11px; flex: none; }
html body.kartli #od-serit .kz-cip b { all: unset; font: 700 10px/1 var(--pr-display); color: var(--kz-fil); letter-spacing: 0; min-width: 7px; text-align: center; }
html body.kartli #od-serit .kz-cip.kz-yakin { background: var(--kz-kan); box-shadow: inset 0 0 0 1px #e8b48a; color: #ffd9b0; }
html body.kartli #od-serit .kz-cip .kz-pip { text-decoration: none; font: 700 7px/1 var(--pr-metin); letter-spacing: .5px; color: var(--kz-altin); margin-left: 1px; }
html body.kartli #od-serit .kz-cip.kz-nabiz { animation: kzNabiz 300ms ease-out 1; }
@keyframes kzNabiz { 50% { transform: scale(1.15); } }
html body.kartli #od-serit.kriz em { color: var(--kz-kan); }
/* kriz yaklaşınca (≤ 3 hüküm) şeridin yazısı (⚠ KRİZİN ADI) yer açsın: rütbe çubuğu o kısa süre gizlenir — 360 px'de
   çip + "KÜTÜPHANE YANGINI" ancak böyle sığıyor (ölçüldü, 4 kriz × TR/EN) */
html body.kartli #od-serit.kriz .od-cub { display: none; }
html body.kartli #od-serit.kriz em { font-size: 9.5px; letter-spacing: .02em; }
html body.kartli #od-serit .em-tel-ek { height: 18px; }
html body.kartli #od-serit .em-tel-anahtar { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--kz-obs); box-shadow: inset 0 0 0 1px var(--kz-altin); }
html body.kartli #od-serit .em-tel-anahtar svg { width: 12px; height: 12px; stroke: var(--kz-altin); }
html body.kartli #od-serit .em-tel-anahtar:active { transform: translateY(1px); background: #2a2418; }
@media (prefers-reduced-motion: reduce) { html body.kartli #od-serit .kz-cip.kz-nabiz { animation: none; } }

/* =============================================================================
   3 · YARA ÇATLAĞI — tepe şeridin beşinci yuvası (.vt.yarali), yol kadranı (zamanyolu.js .zy-yara)
   Durağan satır içi SVG, ikon katının ::after'ında; eğilim oku (.up/.down) ve öngörü (.proj) aynı katı kullanır,
   o anlarda çatlak çekilir. Animasyon yok, mask yok.
   ============================================================================= */
html body.mapless #cmd-vitals .vt.yarali:not(.up):not(.down):not(.proj):not(.proj-loss) .vt-ic::after {
  content: ''; position: absolute; inset: -3px; z-index: 3; pointer-events: none; animation: none; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M19 1l-4.5 7.5 3.2 3-5.4 8.2 2.4 2.6-4.2 6.7' fill='none' stroke='%23fff0dc' stroke-opacity='.75' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M19 1l-4.5 7.5 3.2 3-5.4 8.2 2.4 2.6-4.2 6.7' fill='none' stroke='%232a0c05' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html body.mapless #cmd-vitals .vt.yarali.yarali-2:not(.up):not(.down):not(.proj):not(.proj-loss) .vt-ic::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M19 1l-4.5 7.5 3.2 3-5.4 8.2 2.4 2.6-4.2 6.7M14.5 8.5L8 10.5 6 15M17.7 11.5l6 2 2.5 5' stroke='%23fff0dc' stroke-opacity='.75' stroke-width='3.2'/%3E%3Cpath d='M19 1l-4.5 7.5 3.2 3-5.4 8.2 2.4 2.6-4.2 6.7M14.5 8.5L8 10.5 6 15M17.7 11.5l6 2 2.5 5' stroke='%232a0c05' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html body.mapless #cmd-vitals .vt.yarali .vt-ic { position: relative; }
/* yol kadranı: kapanan tavan taralı, sınırında kırık çizgi, çubuğa inen çatlak */
.zy-kd .zy-tarama { fill: #b8452a; fill-opacity: .7; }
.zy-kd .zy-kapali { stroke: #b8452a; stroke-width: .5; stroke-opacity: .8; }
.zy-kd .zy-tavan { stroke: #e0633f; stroke-width: 1.1; stroke-dasharray: 2.2 1.1; fill: none; }
.zy-kd .zy-catlak { stroke: #2a0c05; stroke-width: .9; fill: none; stroke-linejoin: round; stroke-linecap: round; }

/* =============================================================================
   4 · EMANET YUVALARI (emanet.js emanetSira) — rütbe sayfası, kapanış ekranı, Genelge ödül satırı
   5 yuvarlak yuva: hazır = renkli resim, harcanmış = önceden gri basılmış <id>_bos.webp, yok = boş halka.
   Yeni gelen yuvasına bir kez iner (300 ms).
   ============================================================================= */
.em-sira { --em-boy: 28px; display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.em-yuva { width: var(--em-boy); height: var(--em-boy); flex: none; border-radius: 50%; display: block; overflow: hidden;
  background: var(--kz-obs); box-shadow: 0 0 0 1.5px var(--kz-altin), 0 1px 2px rgba(0, 0, 0, .45); }
.em-yuva img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-yuva.bos { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kz-altin) 55%, transparent); }
.em-yuva.harcandi { box-shadow: 0 0 0 1.5px #6d6352, 0 1px 2px rgba(0, 0, 0, .45); }
.em-yuva.em-yeni { animation: emIn 300ms ease-out backwards; }
@keyframes emIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .em-yuva.em-yeni { animation: none; } }
/* rütbe sayfası: EMANETLER n/5 başlığının altında yuvalar, YARALAR satırı */
.kz-rutbe-em { margin: 4px 0 6px; }
.kz-rutbe-em .em-sira { --em-boy: 34px; gap: 9px; }
.kz-yaralar b { color: var(--kz-kan); letter-spacing: .08em; margin-right: 4px; }
.kz-yaralar .kz-yara-ad { color: var(--kz-kan); font-weight: 700; }

/* =============================================================================
   5 · LACİVERT SİNEK (emanet.js, KANON: Sürüm 1'in Tunç Mühür'ü) — pencere satırı ve KESİN'e çevrilen plakanın
   küçük lacivert boncuk işareti (altın kıl, ortada altın sinek gövdesi: iki düz renk, katman açan öğe yok)
   ============================================================================= */
#ht-pen .ht-ek .em-kolye-ik { overflow: hidden; border-radius: 50%; background: var(--kz-obs) !important; box-shadow: 0 0 0 1.5px #D2AC52 !important; }
#ht-pen .ht-ek .em-kolye-ik img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body.kartli #dc-options .dc-opt .em-kolye {
  position: absolute; z-index: 2; left: -5px; top: -6px; width: 17px; height: 17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #4f6fc0, #1a2f6e 70%); box-shadow: 0 0 0 1px #D2AC52, 0 0 0 2px #0F1E4A, 0 1px 2px rgba(0, 0, 0, .5);
}
html body.kartli #dc-options .dc-opt .em-kolye::after { content: ''; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 10px; border-radius: 2px;
  background: #D2AC52; box-shadow: -3px 1.5px 0 -1px #e8d9a8, 3px 1.5px 0 -1px #e8d9a8; }

/* =============================================================================
   5b · BELA KARTI (KANON gurultu.js: .dc-box.bl-kart) — Altın çerçeve krizindir; bela nadir Tunç çerçeveyi giyer
   (nadir.js'in durağan .nadir-tunc'u, süpürmesiz). Plaka koyu kıllı, üstünde obsidyen "ENLİL'İN BELASI" damgası —
   kriz damgasının aynısı, kan-kahve yerine tunç. Hepsi durağan: animasyon, will-change, filter yok.
   ============================================================================= */
html body.kartli #decision .dc-box.bl-kart #dc-art.kz-art { position: relative; }
html body.kartli #decision .dc-box.bl-kart #dc-art > img.kz-plaka { box-shadow: inset 0 0 0 1px var(--kz-obs); outline: 2px solid #8E4F22; outline-offset: -2px; }
html body.kartli #decision .dc-box.bl-kart .kz-damga {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px 0 8px; border-radius: 0 0 4px 4px; pointer-events: none;
  background: var(--kz-obs); color: #C98A4E; box-shadow: inset 0 -1px 0 #C98A4E, inset 1px 0 0 #C98A4E, inset -1px 0 0 #C98A4E;
  font: 700 10px/1 var(--pr-display); letter-spacing: .16em; font-style: normal; white-space: nowrap;
}
html body.kartli #decision .dc-box.bl-kart .kz-damga .kz-ik { width: 14px; height: 14px; flex: none; }
html body.kartli #decision .dc-box.bl-kart .kz-damga b { font-weight: 700; color: var(--kz-fil); }
html body.kartli #decision .dc-box.bl-kart .kz-damga s { text-decoration: none; color: #C98A4E; padding-left: 5px; border-left: 1px solid color-mix(in srgb, #C98A4E 55%, transparent); }
/* ad plakası balonun altında kalmasın (kriz kartıyla aynı) */
html body.kartli #decision .dc-box.bl-kart #dc-balon { animation-fill-mode: backwards; }
html body.kartli #decision .dc-box.bl-kart #dc-kimlik { padding-right: calc(43% + 4px); }
html body.kartli #decision .dc-box.bl-kart #dc-kimlik b, html body.kartli #decision .dc-box.bl-kart #dc-kimlik i { white-space: normal; }
html body.kartli #decision .dc-box.bl-kart > h2#dc-title { color: #7A4A20 !important; letter-spacing: .12em !important; }

/* =============================================================================
   6 · TELGRAF ANAHTARI (emanet.js) — her şıkta kart arkasının önizlemesi: gösterge farkları + sonuç cümlesinin başı
   Plaka bir satır büyür; kart taşarsa cümle düşer (.em-tel-dar), sayılar kalır.
   ============================================================================= */
html body.kartli #dc-options.em-tel-acik .dc-opt { flex-wrap: wrap; }
html body.kartli #dc-options .dc-opt .em-tel { order: 3; flex: 1 0 100%; display: block; margin: 1px 0 0; position: relative; z-index: 1;
  font: 500 11.5px/1.2 var(--pr-metin); color: var(--kt-ink); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.kartli #dc-options .dc-opt .em-tel .em-tel-s { display: inline-flex; gap: 6px; margin-right: 6px; }
html body.kartli #dc-options .dc-opt .em-tel b { font: 700 10px/1 var(--pr-display); letter-spacing: .04em; }
html body.kartli #dc-options .dc-opt .em-tel b.art { color: #2f6b3f; }
html body.kartli #dc-options .dc-opt .em-tel b.eks { color: #9a3520; }
html body.kartli #dc-options .dc-opt .em-tel i { font-style: italic; opacity: .85; }
html body.kartli #dc-options .dc-opt .em-tel.bos { font-style: italic; opacity: .7; }
html body.kartli #dc-options.em-tel-dar .dc-opt .em-tel i { display: none; }