/* SIXTH PATH // ui_hukum.css :: MÜHÜR SONRASI · KARTIN ARKASI — js/sim/hukum_sahne.js çizer.
   2026-09-26 · D, PARŞÖMEN (sahibi: resim "telefonda çok belirsiz", "width full olsun ama kare olsun"): mühürlenen kart
   kaybolur; arka yüz ön yüzün parşömeninde — üstte konuşan · yer ve hüküm rozeti, ortada yankı plakası TAM GENİŞLİKTE
   KARE (640 px plaka kırpılmaz; eski C düzeninde kartın üst yüzünü kaplamak için kırpılıp büyütülüyordu), altta koyu
   mürekkeple sonuç cümlesi, gösterge çipleri, iz satırı ve « ⌃ YUKARI KAYDIR » ipucu. Yer sığmazsa kare küçülür, kare kalır.
   Okunurluk: koyu mürekkep parşömende (--kt-ink #3a2c12 / --kt-pale ≈ 11:1); gövde yazısı ≥15px.
   KURAL (Android WebView): sonsuz animasyon, kalıcı will-change, mask, blend, backdrop-filter, filter,
   büyük blur YOK. 2026-10-01 · KAYBOLUŞ ve SARMA (hukum_sahne.js): mühür iner, tablet kil tozuna dağılır (tek tuval,
   JS), kutu tek atımda solar ve arka yüz yükselir (yalnız opacity + translate/scale); ön/arka yüz geçişi visibility ile
   (katman açmaz). Bitince (hk-dondu) ön yüz display:none. Arka yüz yukarı kaydırılınca parşömen tomar gibi sarılır:
   yalnız üç öğenin transform'u; will-change yalnız jest + bitiş animasyonu boyunca (hk-surukle). */
/* balmumu mührün çizimi (eski fermanın mührü): arka yüzün plaka köşesi ve kayboluşta hapa inen mühür ortak kullanır.
   Ödül mühür taşı rengini odul.js muhurCss arka yüzdekine basar; hapa inen onu satır içi kopyalar (hukum_sahne.js) */
body.kartli { --hk-muhur-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 84'%3E%3Cdefs%3E%3CradialGradient id='m' cx='40%25' cy='35%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23c8503a'/%3E%3Cstop offset='.7' stop-color='%238f2f22'/%3E%3Cstop offset='1' stop-color='%235e1a10'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M30 0h6v46h-6zM38 0h6v46h-6z' fill='%238f2f22'/%3E%3Cpath d='M30 40l-6 44 12-8zM44 40l6 44-12-8z' fill='%237d2416'/%3E%3Ccircle cx='37' cy='52' r='27' fill='url(%23m)'/%3E%3Ccircle cx='37' cy='52' r='21' fill='none' stroke='%235e1a10' stroke-width='1.6'/%3E%3Ccircle cx='37' cy='52' r='17' fill='none' stroke='%235e1a10' stroke-width='.8' stroke-dasharray='2 2'/%3E%3Cg transform='translate(37 50) scale(.62)'%3E%3Cg fill='none' stroke='%234a130b' stroke-width='2.2' stroke-linejoin='round'%3E%3Ccircle r='5' fill='%234a130b'/%3E%3Cpath d='M-6 0h-16l-6 4 10-2-8 5 12-3-6 6 12-5'/%3E%3Cpath d='M6 0h16l6 4-10-2 8 5-12-3 6 6-12-5'/%3E%3Cpath d='M-3 6l-3 8M3 6l3 8M0 6v10' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3Cellipse cx='27' cy='38' rx='7' ry='4' fill='rgba(255,255,255,.22)' transform='rotate(-30 27 38)'/%3E%3C/svg%3E"); }

/* genişlik koşulu yok (2026-09-25): telefon tasarımı her genişlikte tek tasarım — geniş ekranda ortalı sütun */
/* yeni kart kurulurken hukumKaldir() zaten siler; bu yalnız sigorta */
body.kartli .dc-box:not(.muhurlu) #dc-hukum { display: none !important; }

/* ---- KAYBOLUŞ (2026-10-01; eski scaleX dönüşünün yerine) -------------------------------------
   Kutu 720 ms tek atım: 0–90 ms mühür vuruşuyla 3 px gömülür · 90–375 ms solar, hafifçe küçülüp yukarı kalkar
   (bu arada hukum_sahne.js tozSavur kil tozunu savurur) · 375 ms saydamken yüzler değişir · 380–720 ms arka yüz
   26 px aşağıdan yükselir. Yalnız opacity + translate/scale (bileşikleyicide). mj-sars'ın (sim.css) sarsıntısı kartlı
   kipte bu gömülmeye dahil: ayrı sarsıntı ve dönüş kalktı. */
html body.kartli .dc-box.muhurlu.hk-c,
html body.kartli .dc-box.muhurlu.hk-c.mj-sars { animation: hkKaybol 720ms linear 1 backwards; }
@keyframes hkKaybol {
  0% { opacity: 1; translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  12% { opacity: 1; translate: 0 3px; scale: .988; animation-timing-function: cubic-bezier(.35, 0, .65, 1); }
  52% { opacity: 0; translate: 0 -12px; scale: .95; animation-timing-function: step-end; }
  53% { opacity: 0; translate: 0 26px; scale: .985; animation-timing-function: cubic-bezier(.2, .75, .3, 1); }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
/* ön yüz kayboluşun ilk yarısında görünür, sonra gizli; arka yüz tersi */
html body.kartli .dc-box.muhurlu.hk-c > :not(#dc-hukum) { visibility: hidden; animation: hkOn 720ms linear backwards; }
@keyframes hkOn { 0%, 52% { visibility: visible; } 53%, 100% { visibility: hidden; } }
@keyframes hkArka { 0%, 52% { visibility: hidden; } 53%, 100% { visibility: visible; } }
/* MÜHÜR İNER: seçilen hapın sağ ucuna balmumu mühür (hukum_sahne.js muhurBas), 150 ms tek atım, kartla kaybolur */
html body.kartli #dc-options .dc-opt .kt-muhur {
  position: absolute; right: 9px; top: 50%; z-index: 3; width: 30px; height: 35px; margin-top: -20px; pointer-events: none;
  background: var(--hk-muhur-svg) center / contain no-repeat; rotate: -9deg;
  animation: ktMuhurIn 150ms cubic-bezier(.3, 1.5, .5, 1) 1 backwards;
}
@keyframes ktMuhurIn { from { opacity: 0; scale: 2.2; } }
/* kil tozu tuvali (hukum_sahne.js tozSavur): kartın üstünde, dokunuşa kapalı; ≤ 800 ms yaşar */
html body.kartli #decision > canvas.hk-toz { position: absolute; z-index: 60; pointer-events: none; }
/* ayar düğmesi iki yüzde de yerinde (sahnenin içinde; sahne gizlenince o görünür kalır) */
html body.kartli .dc-box.muhurlu.hk-c #dc-gear { visibility: visible; z-index: 7 !important; }
/* dönüş bitti: ön yüz tamamen kalkar (ayar düğmesi hariç) */
html body.kartli .dc-box.muhurlu.hk-dondu > :not(#dc-hukum):not(#dc-scene),
html body.kartli .dc-box.muhurlu.hk-dondu #dc-scene > :not(#dc-gear) { display: none !important; }
html body.kartli .dc-box.muhurlu.hk-dondu #dc-scene::before,
html body.kartli .dc-box.muhurlu.hk-dondu #dc-scene::after { display: none !important; }

/* ---- ARKA YÜZ ----------------------------------------------------------------------------
   #dc-hukum yer tutar ve jesti alır (touch-action none: dikey kaydırma tarayıcıya gitmez, işaretçi zinciri kesilmez);
   .hk-kirp alt kenarı kesen pencere (köşesiz dikdörtgen kırpma: bileşikleyicide maske katmanı açmaz), .hk-sayfa
   parşömen (kendi yuvarlak köşeleri ve zemini), .hk-rulo sarılan tomar (yalnız jestte görünür). */
html body.kartli .dc-box.muhurlu #dc-hukum.hk-c {
  position: absolute; inset: 7px; z-index: 5; box-sizing: border-box; margin: 0; padding: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  animation: hkArka 720ms linear backwards;
}
html body.kartli .dc-box.hk-dondu, html body.kartli .dc-box.muhurlu #dc-hukum.hk-c * { touch-action: none; }
/* tabletin yatağı: parşömen sarıldıkça altından görünen koyu kil (durağan; dururken parşömenin altında, görünmez) */
html body.kartli .dc-box.muhurlu #dc-hukum.hk-c { border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kt-dark) 55%, var(--kt-deep)) 0%, color-mix(in srgb, var(--kt-dark) 78%, var(--kt-deep)) 40%, color-mix(in srgb, var(--kt-dark) 70%, var(--kt-deep)) 100%);
  box-shadow: inset 0 2px 6px rgba(40, 26, 6, .45), inset 0 0 0 1px color-mix(in srgb, var(--kt-deep) 60%, #000); }
body.kartli #dc-hukum.hk-c .hk-kirp { position: absolute; inset: 0; overflow: hidden; }
body.kartli #dc-hukum.hk-c .hk-sayfa {
  position: absolute; inset: 0; box-sizing: border-box; margin: 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: linear-gradient(172deg, var(--kt-pale) 0%, var(--kt-mid) 62%, var(--kt-dark) 100%);
  color: var(--kt-ink); text-align: center; container-type: size;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kt-deep) 45%, transparent), inset 0 0 30px rgba(140, 106, 30, .18);
}
/* ÜST ŞERİT: rütbe şeridinin altında (kutunun tepesindeki PERDE · YIL şeridi arka yüzün üstünde kalır). Birinci sıra
   hüküm rozeti, sağda ayar düğmesine yer; ikinci sıra konuşan · yer tek satır (yer sığmazsa kısalır, ad kalır) */
body.kartli #dc-hukum.hk-c .hk-ust { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 29px 12px 9px; text-align: left; }
body.kartli #dc-hukum.hk-c .hk-kim { align-self: stretch; display: flex; align-items: baseline; justify-content: center; min-width: 0; }
body.kartli #dc-hukum.hk-c .hk-kim b { flex: none; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 700 12.5px/1.35 var(--pr-display); letter-spacing: .13em; color: var(--kt-title, var(--kt-ink)); }
body.kartli #dc-hukum.hk-c .hk-kim i { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: italic 500 14.5px/1.35 var(--pr-serif); color: var(--kt-ink2); }
body.kartli #dc-hukum.hk-c .hk-kim b + i::before { content: '·'; margin: 0 .5em; font-style: normal; color: var(--kt-deep); }
/* HÜKÜM ROZETİ: madalyon + ad, parşömende mürekkep hap (satır boyu harf üstü noktalara yer bırakır: İ, Ö) */
body.kartli #dc-hukum.hk-c .hk-rozet { flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 52px);
  padding: 3px 13px 3px 3px; border-radius: 20px; box-sizing: border-box;
  background: color-mix(in srgb, var(--kt-pale) 70%, #fffaf0);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kt-deep) 70%, transparent), 0 1px 0 rgba(255, 252, 240, .7), 0 2px 4px rgba(60, 40, 10, .18); }
body.kartli #dc-hukum.hk-c .hk-rozet b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px;
  font: 700 13px/1.4 var(--pr-display); letter-spacing: .11em; color: var(--kt-ink); }
body.kartli #dc-hukum.hk-c .hk-mad { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #83b8d8 0%, #22407a 55%, #0f2147 100%);
  box-shadow: 0 0 0 1.5px #f6e8bf, 0 0 0 2.5px #b08c40, inset 0 1px 1px rgba(255, 255, 255, .35); }
body.kartli #dc-hukum.hk-c .hk-mad svg { width: 15px; height: 15px; fill: none; stroke: #fff6dc; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
body.kartli #dc-hukum.hk-ok .hk-mad { background: radial-gradient(circle at 36% 30%, #7fcf9c 0%, #2f6b4f 56%, #143424 100%); }
body.kartli #dc-hukum.hk-fail .hk-mad { background: radial-gradient(circle at 36% 30%, #ec8f72 0%, #a3361c 56%, #561a0c 100%); }
body.kartli #dc-hukum.hk-soz .hk-mad { background: radial-gradient(circle at 36% 30%, #f5dc98 0%, #b58a36 56%, #5c4418 100%); }
body.kartli #dc-hukum.hk-soz .hk-mad svg { stroke: #2d220f; stroke-width: 2; }
body.kartli #dc-hukum.hk-ok .hk-rozet b { color: #245c33; }
body.kartli #dc-hukum.hk-fail .hk-rozet b { color: #8f2e18; }

/* KARE RESİM: taban boyu kartın genişliği (100cqw = kare), yer yoksa küçülür; içindeki resim kutunun kısa kenarı
   kadar kare, ortada. Üstte ve altta ince varak kakma: parşömene gömülü levha. */
body.kartli #dc-hukum.hk-c .hk-resim { position: relative; flex: 0 1 100cqw; min-height: 96px; container-type: size;
  display: flex; justify-content: center; }
body.kartli #dc-hukum.hk-c .hk-resim::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; pointer-events: none;
  border-top: 2px solid var(--kt-gold); border-bottom: 2px solid var(--kt-gold);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--kt-deep) 70%, transparent), 0 1px 0 color-mix(in srgb, var(--kt-deep) 70%, transparent); }
body.kartli #dc-hukum.hk-c .hk-foto { display: block; flex: none; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  object-fit: cover; object-position: 50% 50%; background: var(--kt-dark);
  box-shadow: inset 0 0 0 1px rgba(58, 44, 18, .35); }
/* plakasız mühür (hukum_sahne.js resimSec): yerin fotoğrafı ortadan, konuşanın portresi yüzden kırpılır; hiçbiri yoksa
   koyu kil zemin + soluk kanatlı güneş */
body.kartli #dc-hukum.hk-c .hk-resim.portre .hk-foto { object-position: 50% 18%; }
body.kartli #dc-hukum.hk-c .hk-resim.bos::after { content: ''; flex: none; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26'%3E%3Cg fill='%23c9973f' stroke='%236b4c14' stroke-width='.5' stroke-linejoin='round'%3E%3Cpath d='M74 9.6L36 7.4 42 10.6 74 12.4Z'/%3E%3Cpath d='M74 12.6L43 11.6 49 14.6 74 15Z'/%3E%3Cpath d='M74 15.2L51 15.4 57 18 74 17.2Z'/%3E%3Cg transform='matrix(-1 0 0 1 160 0)'%3E%3Cpath d='M74 9.6L36 7.4 42 10.6 74 12.4Z'/%3E%3Cpath d='M74 12.6L43 11.6 49 14.6 74 15Z'/%3E%3Cpath d='M74 15.2L51 15.4 57 18 74 17.2Z'/%3E%3C/g%3E%3Ccircle cx='80' cy='12' r='6'/%3E%3C/g%3E%3C/svg%3E") 50% 45% / 46% auto no-repeat,
    radial-gradient(70% 55% at 50% 42%, rgba(201, 151, 63, .2) 0, rgba(201, 151, 63, 0) 70%),
    radial-gradient(120% 90% at 50% 30%, #2a1d0e 0, #150e06 72%); }
/* çizilmiş plaka (fotoğrafsız): bütün görünür, ortada */
body.kartli #dc-hukum.hk-c .hk-resim.cizim .ce-on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
body.kartli #dc-hukum.hk-c .hk-resim.cizim .ce-on > svg { display: block; width: auto !important; height: 100% !important; max-width: 100%; }

/* YAZI BLOĞU: parşömende koyu mürekkep; artan boy burada, içerik ortada, YUKARI KAYDIR en altta */
body.kartli #dc-hukum.hk-c .hk-alt { flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; padding: 12px 16px 10px; }
body.kartli #dc-hukum.hk-c .hk-alt > :first-child { margin-top: auto; }
body.kartli #dc-hukum.hk-c .hk-cumle { margin: 0 0 10px; font: italic 600 20px/1.28 var(--pr-serif); color: var(--kt-ink); text-wrap: pretty; }
/* ÇİPLER: gösterge (ikon · ad · ▲ +n) ve defter (kasa, can …) */
body.kartli #dc-hukum.hk-c .hk-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
body.kartli #dc-hukum.hk-c .hk-cipler s { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap;
  padding: 5px 10px 4px 7px; border-radius: 14px; background: rgba(255, 250, 235, .55);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kt-deep) 45%, transparent);
  font: 700 12.5px/1 var(--pr-display); letter-spacing: .05em; color: var(--kt-ink); }
body.kartli #dc-hukum.hk-c .hk-cipler s b { font: 700 15px/1 var(--pr-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
body.kartli #dc-hukum.hk-c .hk-g.art b { color: #245c33; }
body.kartli #dc-hukum.hk-c .hk-g.eks b { color: #8f2e18; }
body.kartli #dc-hukum.hk-c .hk-ic { display: grid; place-items: center; width: 16px; height: 16px; color: #7a5a14; }
body.kartli #dc-hukum.hk-c .hk-ic svg { width: 16px; height: 16px; display: block; fill: currentColor; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=protocol] .hk-ic { color: #a8541a; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=authority] .hk-ic, body.kartli #dc-hukum.hk-c .hk-g[data-v=favor] .hk-ic { color: #8a6a0c; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=quota] .hk-ic { color: #16766a; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=sky] .hk-ic, body.kartli #dc-hukum.hk-c .hk-g[data-v=insight] .hk-ic { color: #2c5f9c; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=anomaly] .hk-ic { color: #634a9e; }
body.kartli #dc-hukum.hk-c .hk-g[data-v=denge] .hk-ic { color: #6b5a33; }
body.kartli #dc-hukum.hk-c .hk-cipler s.hk-df { padding: 5px 10px 4px; font: 700 14.5px/1 var(--pr-serif); letter-spacing: .01em; }
body.kartli #dc-hukum.hk-c .hk-cipler s.hk-df.g { color: #245c33; }
body.kartli #dc-hukum.hk-c .hk-cipler s.hk-df.b { color: #8f2e18; }
/* İZ SATIRI: izler esnek sarılır (sığmayan iz bütün olarak alt satıra iner), aralarında boşluk */
body.kartli #dc-hukum.hk-c .hk-iz { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 16px; margin-top: 10px;
  font: 700 11.5px/1.35 var(--pr-display); letter-spacing: .1em; color: var(--kt-deep); }
body.kartli #dc-hukum.hk-c .hk-iz .bedel { color: #8f2e18; }
body.kartli #dc-hukum.hk-c .hk-iz .sicil { color: #2c4f86; }
body.kartli #dc-hukum.hk-c .hk-iz .seri { color: #245c33; }

/* YUKARI KAYDIR (2026-10-01, main.js kartKur): arka yüz yukarı kaydırılınca parşömen sarılır; durağan ipucu — küçük
   yukarı ok ve söz, animasyonsuz (eski BASILI TUT çizgisinin yerinde) */
body.kartli #dc-hukum.hk-c .hk-kaydir { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto;
  padding-top: 11px; color: var(--kt-deep); }
body.kartli #dc-hukum.hk-c .hk-kaydir svg { display: block; width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
body.kartli #dc-hukum.hk-c .hk-kaydir span { font: 700 10.5px/1 var(--pr-display); letter-spacing: .3em; text-indent: .3em; }
/* balmumu mühür plakanın sağ alt köşesine basılı: belge mühürlendi (ödül mühür taşı rengini odul.js muhurCss değiştirir) */
body.kartli #dc-hukum.hk-c .hk-resim .hk-muhur { position: absolute; right: 12px; bottom: -11px; z-index: 2; width: 25px; height: 30px;
  background: var(--hk-muhur-svg) center / contain no-repeat; rotate: -8deg; pointer-events: none; }

/* ---- SARMA (hukum_sahne.js ruloYaz / ruloGeri / ruloSar) ------------------------------------------------------
   TOMAR: parşömenin kesik kenarında yatan silindir. Tek küçük öğe, durağan gradyanlar: dikeyde silindirin ışığı
   (koyu kenar → parlak sırt → gölgeli alt), uçlarda sarılı katların koyuluğu, sırtta kâğıdın sarılan dudağı (::after),
   üstte parşömene düşen gölge şeridi (::before). Kalınlık sarıldıkça scaleY ile büyür. Yalnız jestte görünür. */
/* alt kenardan en çok 7 px taşar (#dc-hukum kutudan 7 px içeride): fazlası kutuyu kaydırılabilir yapıp .tasar açtırıyordu */
body.kartli #dc-hukum.hk-c .hk-rulo { position: absolute; left: -4px; right: -4px; bottom: -7px; height: 20px; z-index: 2;
  visibility: hidden; pointer-events: none; border-radius: 9px / 50%;
  background:
    /* uçlar: sarılı katların helezonu (koyu göbek, açık kat, koyu kenar) */
    radial-gradient(5px 50% at 5px 50%, color-mix(in srgb, var(--kt-deep) 85%, #000) 0 30%, var(--kt-mid) 42%, color-mix(in srgb, var(--kt-deep) 60%, var(--kt-dark)) 58%, var(--kt-pale) 70%, transparent 74%),
    radial-gradient(5px 50% at calc(100% - 5px) 50%, color-mix(in srgb, var(--kt-deep) 85%, #000) 0 30%, var(--kt-mid) 42%, color-mix(in srgb, var(--kt-deep) 60%, var(--kt-dark)) 58%, var(--kt-pale) 70%, transparent 74%),
    /* gövde: parşömen silindir — üstte gölgeli kenar, sırtta mat ışık, altta koyulaşan yuvarlak */
    linear-gradient(180deg, color-mix(in srgb, var(--kt-deep) 70%, #000) 0%, color-mix(in srgb, var(--kt-dark) 70%, var(--kt-deep)) 12%, var(--kt-mid) 26%,
      color-mix(in srgb, var(--kt-pale) 80%, #fff) 40%, var(--kt-pale) 50%, var(--kt-mid) 64%, var(--kt-dark) 76%, color-mix(in srgb, var(--kt-deep) 65%, var(--kt-dark)) 90%, color-mix(in srgb, var(--kt-deep) 75%, #000) 100%);
  box-shadow: 0 2px 0 rgba(30, 20, 4, .3); }
body.kartli #dc-hukum.hk-c .hk-rulo::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 100%; height: 14px;
  background: linear-gradient(180deg, rgba(60, 40, 10, 0), rgba(60, 40, 10, .26)); }
/* kâğıdın tomara giren dudağı: sırtın üstünde ince, düzensiz parşömen kenarı */
body.kartli #dc-hukum.hk-c .hk-rulo::after { content: ''; position: absolute; left: 11px; right: 11px; top: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kt-deep) 55%, transparent) 8%, color-mix(in srgb, var(--kt-deep) 35%, transparent) 50%, color-mix(in srgb, var(--kt-deep) 55%, transparent) 92%, transparent); }
/* jest + bitiş/geri dönüş boyunca: üç öğe kendi katmanında, tomar görünür (kalıcı will-change yok) */
html body.kartli .dc-box.hk-surukle #dc-hukum .hk-kirp,
html body.kartli .dc-box.hk-surukle #dc-hukum .hk-sayfa,
html body.kartli .dc-box.hk-surukle #dc-hukum .hk-rulo { will-change: transform; }
html body.kartli .dc-box.hk-surukle #dc-hukum .hk-rulo { visibility: visible; }
/* kutu da jestin başında kendi katmanına çıkar: bitişteki solma (hk-sarar, opacity) bırakış karesinde 12 MB'lık kutuyu
   ilk kez taratmasın (4x CPU izi: bırakışta 180 ms'lik GPU işi) — tarama basışta, hiçbir şey kıpırdamazken olur */
html body.kartli .dc-box.hk-surukle { will-change: opacity; }
/* eşik aşılmadı: 260 ms yaylanarak açılır (parşömen ve pencere birlikte: yazı kıpırdamaz) */
html body.kartli .dc-box.hk-geri #dc-hukum .hk-kirp,
html body.kartli .dc-box.hk-geri #dc-hukum .hk-sayfa,
html body.kartli .dc-box.hk-geri #dc-hukum .hk-rulo { transition: transform 260ms cubic-bezier(.3, 1.3, .5, 1); }
/* eşik aşıldı: kalan boy --sar-ms'de (150–360 ms) sarılır, tomar tepeye varırken kart 120 ms'de solar */
html body.kartli .dc-box.hk-sarar #dc-hukum .hk-kirp,
html body.kartli .dc-box.hk-sarar #dc-hukum .hk-sayfa,
html body.kartli .dc-box.hk-sarar #dc-hukum .hk-rulo { transition: transform var(--sar-ms, 300ms) cubic-bezier(.3, .5, .3, 1); }
html body.kartli .dc-box.hk-sarar { opacity: 0; pointer-events: none;
  transition: opacity 120ms linear calc(var(--sar-ms, 300ms) - 90ms) !important; }
/* köşe dizini ve rütbe şeridi (kartın dışındaki #decision çocukları) kartla birlikte söner, sıradaki kart gelene dek gizli */
html body.kartli #decision.kart-gider > .dc-indeks,
html body.kartli #decision.kart-gider > #od-serit { opacity: 0; transition: opacity 120ms linear calc(var(--sar-ms, 300ms) - 90ms); }
/* sarıldı, sıradaki kart gelmedi (Çağ Kapısı bekletiyor): kutu saydam ve katmansız bekler (main.js hk-sarildi). Harcanmış
   kartın .55 donukluğu (sim.css .dc-don) bu boş tableti geri getirmesin */
html body.kartli .decision .dc-box.hk-sarildi { opacity: 0 !important; transition: none !important; pointer-events: none; }
/* SIRADAKİ KART (main.js kartGelis): sarılan kartın yerinde aşağıdan yükselir (opacity + translate/scale, 260 ms tek atım) */
html body.kartli .dc-box.hk-gel { transition: none !important; animation: hkGel 260ms cubic-bezier(.2, .8, .3, 1) 1 !important; }
@keyframes hkGel { from { opacity: 0; translate: 0 16px; scale: .975; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---- SIĞMA KADEMELERİ (hukum_sahne.js sigdir) ---------------------------------------- */
body.kartli .dc-box.hk-sik1 #dc-hukum .hk-cipler s[data-df] { display: none; }
/* uzun cümle (>140 harf, hukum_sahne.js uzunMu) bir boy küçük başlar */
body.kartli #dc-hukum.hk-c.uzun .hk-cumle { font-size: 18px; line-height: 1.26; }
body.kartli .dc-box.hk-sik2 #dc-hukum.hk-c .hk-cumle { font-size: 18px; line-height: 1.26; }
body.kartli .dc-box.hk-sik3 #dc-hukum.hk-c .hk-kim i { display: none; }
body.kartli .dc-box.hk-sik4 #dc-hukum.hk-c .hk-iz { display: none; }
body.kartli .dc-box.hk-sik5 #dc-hukum.hk-c .hk-cumle { font-size: 16.5px; margin-bottom: 8px; }
body.kartli .dc-box.hk-sik5 #dc-hukum.hk-c .hk-alt { padding: 9px 12px 8px; }
body.kartli .dc-box.hk-sik5 #dc-hukum.hk-c .hk-cipler { gap: 4px; }
body.kartli .dc-box.hk-sik5 #dc-hukum.hk-c .hk-cipler s { padding: 4px 8px 3px 6px; }
body.kartli .dc-box.hk-sik5 #dc-hukum.hk-c .hk-kaydir { padding-top: 8px; gap: 3px; }
body.kartli .dc-box.hk-sik6 #dc-hukum.hk-c .hk-cipler s:nth-child(n+3) { display: none; }
/* uzun ekran: cümle bir boy büyür (412×915, 430×932, masaüstü sütunu) */
@media (min-height: 760px) {
  body.kartli #dc-hukum.hk-c .hk-cumle { font-size: 21.5px; }
  body.kartli #dc-hukum.hk-c.uzun .hk-cumle { font-size: 19.5px; }
}
/* kısa ekranda tepe payı 11 px (ui_kart.css §10): üst şerit ayar düğmesiyle yine aynı hizada */
@media (max-height: 700px) { body.kartli #dc-hukum.hk-c .hk-ust { padding-top: 25px; } }
@media (prefers-reduced-motion: reduce) {
  html body.kartli .dc-box.muhurlu.hk-c, html body.kartli .dc-box.muhurlu.hk-c.mj-sars,
  html body.kartli .dc-box.muhurlu.hk-c > * { animation: none !important; }
  /* yüzler kutu tam saydamken (130 ms) değişir: önce ön yüz söner, sonra arka yüz belirir */
  html body.kartli .dc-box.muhurlu.hk-c > :not(#dc-hukum) { animation: hkOn 260ms linear backwards !important; }
  html body.kartli .dc-box.muhurlu #dc-hukum.hk-c { animation: hkArka 260ms linear backwards !important; }
  /* kayboluş: toz ve gömülme yok, kutu yalnız solar ve geri gelir (260 ms); sarma: tomar yok, bırakınca kart solar (180 ms) */
  html body.kartli .dc-box.muhurlu.hk-c, html body.kartli .dc-box.muhurlu.hk-c.mj-sars { animation: hkSolar 260ms linear 1 backwards !important; }
  html body.kartli .dc-box #dc-hukum.hk-c .hk-rulo { display: none; }
  html body.kartli .dc-box.hk-sarar { transition: opacity 180ms linear !important; }
  html body.kartli #decision.kart-gider > .dc-indeks, html body.kartli #decision.kart-gider > #od-serit { transition: none; }
  html body.kartli .dc-box.hk-gel { animation: hkBelir 200ms linear 1 !important; }
}
@keyframes hkSolar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hkBelir { from { opacity: 0; } }