/* SIXTH PATH // css/ui_metin.css :: Sürüm 1 "Çağ Kapısı" — Metin hiyerarşisi: çağ yüzünde manşet, balonda repliğin tamamı, ton işareti, konuşan sesi, bedel satırı.
   WP-C · metin_katman.js · main.js metinKatmanCiz / metinSigdir / balonGoster · SPEC §2.9.
   Kart kipinde (WebView) yalnız tek atımlık transform/opacity, ≤ 600 ms; bitiş hali doğal hal olduğundan dolgu
   yalnız "backwards" (bitmiş animasyon belgede asılı kalmaz: getAnimations() boşalır). Sonsuz animasyon, kalıcı
   will-change, mask, blend, backdrop-filter, filter YOK (SPEC §4).
   Okunurluk (sahibinin şikâyeti): yazı kilin üstünde koyu mürekkep (--kt-ink), en küçük sığdırma kademesinde bile
   balon ≥ 12.5 px, manşet ≥ 13 px. */

/* =============================================================================
   0 · SIĞDIRMA KADEMELERİ (main.js metinSigdir): taşan kartta önce balon bir boy küçülür (.db-s1), sonra SON HÜKMÜN
   İZİ çekilir, sonra .mk-s1…s3.
   Ölçek tek değişkende; balon, manşet, alıntı ve açılan giriş aynı katsayıyla küçülür, portre kısalır (balona
   genişlik kalır, satır sayısı düşer).
   ============================================================================= */
html body.kartli .dc-box { --mk-k: 1; --db-k: 1; --db-fs: 15px; --portre-h: clamp(112px, 21dvh, 196px); }
/* balonun kendi kademesi (repliğin tamamı, 2026-10-04): ilk taşmada yalnız balon küçülür */
html body.kartli .dc-box.db-s1 { --db-k: .92; }
html body.kartli .dc-box.mk-s1 { --mk-k: .95; --portre-h: clamp(106px, 19dvh, 180px); }
html body.kartli .dc-box.mk-s2 { --mk-k: .9; --portre-h: clamp(100px, 17dvh, 164px); }
html body.kartli .dc-box.mk-s3 { --mk-k: .86; --portre-h: clamp(94px, 15.5dvh, 150px); }
@media (max-height: 700px) { html body.kartli .dc-box { --db-fs: 14.5px; } }
@media (min-height: 820px) { html body.kartli .dc-box { --db-fs: 16.5px; } }
html body.kartli .dc-box[class*="mk-s"] #dc-art:has(> img.dk-portre) > img.dk-portre { height: var(--portre-h) !important; }

/* =============================================================================
   1 · MANŞET — #dc-text içinde, çağın yüzünde (yeni yazı tipi yok: Cinzel, Alegreya, Cormorant, Plex Sans).
   Büyük harf dönüşümü öğenin lang özniteliğiyle: Türkçede i→İ, ı→I.
   ============================================================================= */
html body.kartli .dc-box #dc-text .mk {
  display: block; margin: 0 auto; max-width: 30em; text-align: center; color: var(--kt-ink);
  text-wrap: balance; overflow-wrap: anywhere;
}
html body.kartli .dc-box #dc-text .dc-hukum + .mk { margin-top: 4px; }
/* I · İlk Çağ — oyulmuş taş: Cinzel 700, büyük harf */
html body.kartli .dc-box #dc-text .mk-p1 { font: 700 calc(15px * var(--mk-k))/1.24 var(--pr-display); letter-spacing: .03em; text-transform: uppercase; }
/* II · Tunç — papirüs eli: Alegreya italik */
html body.kartli .dc-box #dc-text .mk-p2 { font: italic 500 calc(18px * var(--mk-k))/1.2 var(--pr-metin); letter-spacing: 0; }
/* III · Klasik — yazıt: Cinzel 500, geniş aralık */
html body.kartli .dc-box #dc-text .mk-p3 { font: 500 calc(14.5px * var(--mk-k))/1.3 var(--pr-display); letter-spacing: .14em; text-transform: uppercase; }
/* IV · Sanayi — gazete manşeti: Cormorant Garamond 600, büyük harf */
html body.kartli .dc-box #dc-text .mk-p4 { font: 600 calc(17px * var(--mk-k))/1.14 var(--pr-serif); letter-spacing: .03em; text-transform: uppercase; }
/* V · Bilgi — kayıt satırı: IBM Plex Sans, büyük harf, aralıklı */
html body.kartli .dc-box #dc-text .mk-p5 { font: 400 calc(14px * var(--mk-k))/1.28 var(--pr-ui); letter-spacing: .08em; text-transform: uppercase; }
/* sözcük öbekleri: 120 ms'lik tek atım, 120 ms arayla (inline style animation-delay) */
html body.kartli .dc-box #dc-text .mk-g { animation: mkGel 120ms ease-out backwards; }
@keyframes mkGel { from { opacity: 0; } }

/* ⌄ — tam giriş (eski DEVAMI düğmesi). Manşetin son satırının sonunda, satır harcamaz; dokunma alanı ::after ile
   yanlara genişler. Dikeyde yalnız 3 px: #dc-text taşma denetimi (kaydırılabilir yükseklik) ona takılmasın.
   2026-10-01: giriş sığan ekranda AÇIK başlar (main.js metinSigdir ölçer; sığmazsa kapalı) — o zaman ⌄ ters döner. */
html body.kartli .dc-box #dc-text .dc-devam {
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: -.1em;
  width: 28px; height: 20px; margin: 0 0 0 5px; padding: 0; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--kt-deep) 70%, transparent); background: var(--b-kagit, #f7ecd0);
  color: var(--kt-bronz, #5a3d0e); box-shadow: 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(90, 61, 14, .15);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html body.kartli .dc-box #dc-text .dc-devam svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
html body.kartli .dc-box #dc-text .dc-devam::after { content: ''; position: absolute; inset: -3px -12px; }
html body.kartli .dc-box #dc-text .dc-devam[aria-expanded="true"] svg { transform: rotate(180deg); }
html body.kartli .dc-box #dc-text .mk-giris {
  display: block; margin: 6px 2px 0; text-align: left; color: var(--kt-ink);
  font: 500 calc(15px * var(--mk-k))/1.3 var(--pr-metin); letter-spacing: 0; text-transform: none;
}
/* yalnız elle açılınca tek atımda belirir; kart girişle geldiğinde (otomatik açık) kartın kendi girişiyle birlikte gelir */
html body.kartli .dc-box #dc-text .mk-giris.elle { animation: mkGel 200ms ease-out backwards; }
/* alıntılanan hüküm (sonraki adım) sığdırmayla birlikte küçülür */
html body.kartli .dc-box #dc-text .dc-hukum { font-size: calc(16px * var(--mk-k)); line-height: 1.22; }

/* =============================================================================
   2 · BALON — repliğin tamamı (r1 + r2) tek paragrafta, yazı makinesi ve ▾ yok (sahibi, 2026-10-04: "aşağı ok
   olmasın"). Balonun girişi sim.css dbGel tek atımı. Boy: --db-fs × çağ kademesi × balon kademesi, en az 12.5 px.
   ============================================================================= */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt { font-size: max(12.5px, calc(var(--db-fs) * var(--mk-k) * var(--db-k))) !important; line-height: 1.26 !important; }

/* =============================================================================
   3 · KONUŞANIN SESİ — balon ve ad plakası (#dc-kimlik.ses-*, #dc-balon.ses-*)
   ============================================================================= */
/* Enlil'in adamları: dik (italik değil), sıkı satır — emir dili. Küçük büyük harf (small-caps) denendi: Alegreya'da
   gerçek küçük büyük harf yok, tarayıcının sentezi Türkçe i'yi noktasız I yapıyordu ("sayılabIlIr") — kaldırıldı */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon.ses-enlil .db-bt { font-style: normal !important; line-height: 1.18 !important; }
/* Enki'ninkiler: italik (balonun olağan hali) */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon.ses-enki .db-bt { font-style: italic !important; }
/* Reptilyen: yeşil mürekkep */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon.ses-rep .db-bt,
html body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik.ses-rep b { color: #2f5a3a !important; }
/* Kovan (Böceksi, Sessiz Elçi): seyrek harf */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon.ses-kovan .db-bt { letter-spacing: .06em; }
/* Griler: soğuk gri mürekkep */
html body.kartli #dc-scene:has(img.dk-portre) #dc-balon.ses-gri .db-bt,
html body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik.ses-gri b { color: #4a5566 !important; }

/* ton işareti: adın önünde, adın renginde */
#dc-kimlik b .ton { display: inline-block; width: 13px; height: 13px; margin: 0 6px 0 0; vertical-align: -1px; text-decoration: none; }
#dc-kimlik b .ton svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================================
   4 · BEDEL SATIRI — şık plakasının üst kenarında (kartta yükseklik harcamaz). Ölümcül okuma ikonu + ▲/▼;
   etki büyükse (|Δ| ≥ 6) iri. Kâhin taşıyla işaretli sayı. Tehlikedeki okumayı düşüren şıkta kızıl kıl.
   ============================================================================= */
/* satır sağ üst kenarda: hüküm türü madalyonları da kenara çıkmışsa (.ht-kose, hukumTurSigdir) sola geçer — eski
   Kâhin rozetinin kaydırma kuralının yerine (alt kenar denenmedi: 2. şıkta sağa yaslı uzun yazıya biniyordu) */
body.kartli.mapless #dc-options .dc-opt:has(> .pay) .ht-grup.ht-kose { right: auto; left: 16px; }
/* tek kapsül: işaretler yan yana, aralarında ince çizgi. Kenarın 11 px üstünde, plakaya yalnız ~4 px girer: iki
   satırlık şık yazısının ilk satırına binmez (plakanın üst dolgusu 5 px) */
html body.kartli #dc-options .dc-opt .pay {
  position: absolute; top: -11px; right: 18px; z-index: 2; display: flex; align-items: center; height: 15px; padding: 0 2px;
  border-radius: 999px; background: #f7ecd0; border: 1px solid #c9b07a; box-shadow: 0 1px 2px rgba(40, 26, 6, .22);
  pointer-events: none;
}
html body.kartli #dc-options .dc-opt .pay:has(i.iri) { top: -12px; height: 17px; }
html body.kartli #dc-options .dc-opt .pay i {
  display: flex; align-items: center; gap: 1px; height: 100%; padding: 0 3px; font-style: normal; color: var(--kt-deep);
}
html body.kartli #dc-options .dc-opt .pay i + i { border-left: 1px solid rgba(140, 106, 30, .35); }
html body.kartli #dc-options .dc-opt .pay i svg { width: 10px; height: 10px; fill: currentColor; }
html body.kartli #dc-options .dc-opt .pay i b { font: 700 8px/1 var(--pr-display); }
html body.kartli #dc-options .dc-opt .pay i.iri svg { width: 13px; height: 13px; }
html body.kartli #dc-options .dc-opt .pay i.iri b { font-size: 10px; }
html body.kartli #dc-options .dc-opt .pay i.art { color: #2c6236; }
html body.kartli #dc-options .dc-opt .pay i.eks { color: #8f3420; }
html body.kartli #dc-options .dc-opt .pay i.eks.teh { background: #f3d2c2; border-radius: 999px; }
html body.kartli #dc-options .dc-opt .pay i em { font: 700 9.5px/1 var(--pr-display); font-style: normal; margin-left: 2px; }
html body.kartli #dc-options .dc-opt.pay-tehlike { outline: 1px solid #b4533f; outline-offset: -1px; }
html body.kartli .dc-box.muhurlu .pay { display: none; }
/* yaralı okuma: ikonun üstünde durağan çatlak (tepe şeridin .vt.yarali çatlağıyla aynı çizgi; animasyon yok, katman yok) */
html body.kartli #dc-options .dc-opt .pay i.yara { position: relative; }
html body.kartli #dc-options .dc-opt .pay i.yara::after {
  content: ''; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none;
  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='%23f7ecd0' stroke-width='5' 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='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html body.kartli #dc-options .dc-opt .pay i.yara.iri::after { width: 15px; height: 15px; margin-top: -7.5px; }