/* SIXTH PATH // css/ui_cag.css :: Sürüm 1 "Çağ Kapısı" — Çağ töreni (cagAcilis) + Merkez Genelgesi + çağ kapanışı (cagKapanis).
   WP-A · js/sim/cag_kapi.js · r1_plan/SPEC.md §2.3–2.4.
   Dil (sahibi, A · OBSİDYEN VE ALTIN): düz obsidyen zemin #121110, tek vurgu düz altın #D2AC52, fildişi #EEE6D4 levha,
   Cinzel (başlık, etiket, düğme) + Alegreya (gövde). Degrade, parıltı, bulanık gölge yok. Basma = katı 4 px kenar
   (premium.css .pr-btn); tutarken altın düğmenin içinde mürekkep çizgisi soldan sağa 600 ms dolar (tut.js .tut-dolu).
   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). Sahne bitince .bitti bütün animasyonları
   söker (boşta çalışan animasyon kalmaz); katman kapanınca DOM'dan silinir. 360×640'ta kaydırmasız. */

/* ---- KÖK ------------------------------------------------------------------------------------------------------ */
#ck-tore {
  --ck-zemin: #121110; --ck-altin: #d2ac52; --ck-fildisi: #eee6d4; --ck-murekkep: #1c1506; --ck-murekkep2: #4a3a1c;
  --ck-kenar: #8c6a1e; --ck-soluk: #a79f8f; --ck-kizil: #8f2e18; --ck-yesil: #2c6236;
  position: fixed; inset: 0; z-index: 9710; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--ck-zemin); color: var(--ck-fildisi); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  animation: ckGir 300ms ease-out backwards;
}
/* KATMAN BÜTÇESİ: tören açıkken altındaki tam ekran katmanlar boyanmaz (cag_kapi.js ortuIzle → body.ck-acik) */
body.ck-acik #sefer, body.ck-acik #signal, body.ck-acik #rejim, body.ck-acik #rite { visibility: hidden !important;
  transition: visibility 0s 320ms; }  /* girişin 300 ms sönmesi bitince — tören üstlerinde belirir, sonra onlar söner */
/* çağın zemini: obsidyenin çok az tonlanmışı, düz renk */
#ck-tore[data-perde="1"] { --ck-zemin: #15110c; }
#ck-tore[data-perde="2"] { --ck-zemin: #16120b; }
#ck-tore[data-perde="3"] { --ck-zemin: #111113; }
#ck-tore[data-perde="4"] { --ck-zemin: #121212; }
#ck-tore[data-perde="5"] { --ck-zemin: #0e1114; }
#ck-tore.ck-kovan { --ck-zemin: #120f16; }
/* sönerken de dokunuş tutar (pointer-events açık): main.js perdeMesgul onu perde sayar, 200 ms'lik boşlukta dağıtıcı
   masayı boş sanıp yol ekranını açmaz; sıradaki (taş seçimi / tören / kart) katman silinirken açılır */
#ck-tore.cik { animation: ckCik 200ms ease-in both; }
#ck-tore * { box-sizing: border-box; }

/* ---- TÖREN: plaka, perde adı, kehanet (üstte; kalan yüksekliğe sığar — cag_kapi boyutla) ----------------------- */
#ck-tore .ck-sahne {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; overflow: hidden;
}
#ck-tore .ck-plaka {
  display: block; flex: none; width: min(78vw, 340px); height: min(78vw, 340px); object-fit: cover; border-radius: 4px;
  border: 1px solid var(--ck-altin); box-shadow: 0 0 0 4px var(--ck-zemin), 0 0 0 5px #3a3226;
  animation: ckPlaka 600ms 300ms ease-out backwards;
}
#ck-tore .ck-baslik { margin: 4px 0 0; font: 700 16px/1.2 var(--a-baslik, 'Cinzel', Georgia, serif); letter-spacing: .12em; color: var(--ck-fildisi);
  animation: ckDamga 200ms 1000ms ease-out backwards; }
#ck-tore .ck-baslik b { color: var(--ck-altin); font-weight: 700; }
#ck-tore .ck-alt { margin: -4px 0 0; font: 700 10px/1 var(--a-baslik, 'Cinzel', Georgia, serif); letter-spacing: .32em; text-indent: .32em; color: var(--ck-soluk);
  animation: ckDamga 200ms 1000ms ease-out backwards; }
#ck-tore .ck-kehanet { margin: 2px 0 0; max-width: 32em; font: italic 500 15px/1.38 var(--a-govde, 'Alegreya', Georgia, serif); color: var(--ck-fildisi);
  animation: ckSol 400ms 1800ms ease-out backwards; }

/* ---- MERKEZ GENELGESİ: fildişi levha, altın kıl (alta yaslı) -------------------------------------------------- */
#ck-tore .ck-genelge {
  position: relative; flex: none; width: 100%; max-width: 440px; margin: 0 auto; padding: 12px 14px 14px;
  border-radius: 14px; background: var(--ck-fildisi); color: var(--ck-murekkep);
  border: 1px solid var(--ck-altin); box-shadow: inset 0 0 0 3px var(--ck-fildisi), inset 0 0 0 4px rgba(140, 106, 30, .35);
  pointer-events: none; animation: ckYuksel 400ms 2800ms ease-out backwards;
}
#ck-tore.ck-hazir .ck-genelge { pointer-events: auto; }
#ck-tore .ck-damga { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 9.5px/1.2 var(--a-baslik, 'Cinzel', serif);
  letter-spacing: .2em; color: var(--ck-kenar); text-align: center; white-space: nowrap; }
#ck-tore .ck-damga::before, #ck-tore .ck-damga::after { content: ''; flex: 1 1 0; min-width: 8px; height: 1px; background: #c9a452; }
#ck-tore .ck-kural { margin: 8px 0 0; font: 700 11px/1.3 var(--a-baslik, 'Cinzel', serif); letter-spacing: .08em; color: var(--ck-kizil); text-align: center; }
#ck-tore .ck-g-baslik { margin: 7px 0 3px; font: 700 19px/1.12 var(--a-baslik, 'Cinzel', serif); letter-spacing: .06em; color: var(--ck-murekkep); text-align: center; }
#ck-tore .ck-g-cumle { margin: 0; font: 500 14px/1.32 var(--a-govde, 'Alegreya', serif); color: var(--ck-murekkep2); text-align: center; }
#ck-tore .ck-satirlar { list-style: none; margin: 9px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(140, 106, 30, .35);
  display: flex; flex-direction: column; gap: 6px; text-align: left; }
#ck-tore .ck-satirlar li { display: flex; align-items: center; gap: 9px; min-height: 26px; font: 500 13px/1.25 var(--a-govde, 'Alegreya', serif); color: var(--ck-murekkep2); }
#ck-tore .ck-satirlar li > span { flex: 1 1 auto; min-width: 0; }
#ck-tore .ck-satirlar img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ck-kenar); background: #d9ccae; }
#ck-tore .ck-satirlar b { font: 700 12px/1.2 var(--a-baslik, 'Cinzel', serif); letter-spacing: .04em; color: var(--ck-murekkep); }
#ck-tore .ck-kriz b { color: var(--ck-kizil); }
#ck-tore .ck-ikon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ck-kizil); color: var(--ck-kizil); }
#ck-tore .ck-ikon svg { display: block; width: 17px; height: 17px; }
#ck-tore .ck-kriz span { font: 700 12px/1.2 var(--a-baslik, 'Cinzel', serif); letter-spacing: .04em; color: var(--ck-kizil); }
#ck-tore .ck-hazirlik u { text-decoration: none; margin-right: 2px; font: 700 9.5px/1 var(--a-baslik, 'Cinzel', serif); letter-spacing: .14em; color: var(--ck-kenar); }
#ck-tore .ck-hazirlik em { flex: none; align-self: center; min-width: 40px; padding: 4px 7px; border-radius: 999px; text-align: center; font: 700 12px/1 var(--a-baslik, 'Cinzel', serif);
  font-style: normal; letter-spacing: .06em; color: var(--ck-fildisi); background: var(--ck-murekkep); }
#ck-tore .ck-hazirlik em.nokta { letter-spacing: .14em; color: var(--ck-altin); }
#ck-tore .ck-hedef > i { flex: none; width: 28px; text-align: center; font: 700 17px/1 var(--a-baslik, 'Cinzel', serif); font-style: normal; color: var(--ck-kenar); }

/* ---- BASILI TUT: altın düğme, katı kenar; tutarken iner, mürekkep çizgisi dolar -------------------------------- */
#ck-tore .ck-tut:is(#pr-k, *) { position: relative; display: flex; width: 100%; max-width: 440px; min-height: 52px; margin: 12px auto 4px; padding: 0 14px 4px;
  font-size: 13px; letter-spacing: .14em; overflow: hidden; }
#ck-tore.ck-kapanis > .ck-tut:is(#pr-k, *) { margin: 0 auto 4px; flex: none; }
#ck-tore .ck-tut span { position: relative; }
#ck-tore .ck-tut s { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(28, 21, 6, .2); text-decoration: none; pointer-events: none; }
#ck-tore .ck-tut s i { position: absolute; inset: 0; border-radius: inherit; background: var(--ck-murekkep); transform: scaleX(0); transform-origin: 0 50%; }
#ck-tore .ck-tut.tut-dolu s i { transform: scaleX(1); transition: transform 600ms linear; }
#ck-tore .ck-tut.tut-dolu:is(#pr-k, *) { transform: translateY(4px); box-shadow: 0 0 0 var(--a-altin-kenar, #8c6a1e); }
#ck-tore .ck-muhur { flex: none; display: inline-block; width: 16px; height: 19px; margin: -2px 9px 0 0; background: center / contain no-repeat; }
/* mühür basıldı: levhanın köşesine balmumu iner (tek atım) */
#ck-tore .ck-dusen { position: absolute; right: 12px; top: -26px; width: 56px; height: 66px; margin: 0; pointer-events: none;
  animation: ckMuhurDus 220ms ease-in backwards; }
#ck-tore.muhurlu .ck-tut { pointer-events: none; }

/* yalnız Genelge (Sürüm 1 öncesi kayıt): levha ortada */
#ck-tore.ck-sade { justify-content: center; }

/* ---- ÇAĞ KAPANIŞI: tek parşömen, üç pano ------------------------------------------------------------------------ */
#ck-tore.ck-kapanis { justify-content: center; }
#ck-tore .ck-parsomen {
  flex: 0 1 auto; min-height: 0; width: 100%; max-width: 440px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; border-radius: 14px;
  background: var(--ck-fildisi); color: var(--ck-murekkep); border: 1px solid var(--ck-altin);
  box-shadow: inset 0 0 0 3px var(--ck-fildisi), inset 0 0 0 4px rgba(140, 106, 30, .35);
  -webkit-user-select: text; user-select: text;
}
#ck-tore .ck-k-baslik { margin: 0; font: 700 11px/1.3 var(--a-baslik, 'Cinzel', serif); letter-spacing: .16em; color: var(--ck-kenar); text-align: center; }
#ck-tore .ck-k-satir { margin: -4px 0 0; font: 500 11.5px/1.3 var(--a-govde, 'Alegreya', serif); color: #6b5a3a; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ck-tore .ck-panel { display: flex; flex-direction: column; gap: 6px; }
#ck-tore .ck-panel h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 9.5px/1.2 var(--a-baslik, 'Cinzel', serif); letter-spacing: .2em;
  color: var(--ck-kenar); white-space: nowrap; }
#ck-tore .ck-panel h4::before, #ck-tore .ck-panel h4::after { content: ''; flex: 1 1 0; min-width: 8px; height: 1px; background: #c9a452; }
/* 1 · NE KURDUN: üç kare */
#ck-tore .ck-uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#ck-tore .ck-uc figure { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ck-tore .ck-uc img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid #c9a452; background: #d9ccae; }
#ck-tore .ck-uc figcaption { font: 500 11px/1.2 var(--a-govde, 'Alegreya', serif); color: var(--ck-murekkep); min-width: 0; }
/* alıntı en çok üç satır; yıl satırı kırpılmaz */
#ck-tore .ck-uc figcaption span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#ck-tore .ck-uc small { display: block; margin-top: 1px; font: 700 8.5px/1.1 var(--a-baslik, 'Cinzel', serif); letter-spacing: .1em; color: var(--ck-kenar); text-transform: uppercase; font-style: normal; }
/* çağın yazı yüzü (SPEC §2.9 ile aynı dil; yeni yazı tipi yok) */
#ck-tore.ck-p1 .ck-uc figcaption { font: 700 9.5px/1.25 var(--a-baslik, 'Cinzel', serif); text-transform: uppercase; }
#ck-tore.ck-p2 .ck-uc figcaption { font: italic 500 12px/1.18 var(--a-govde, 'Alegreya', serif); }
#ck-tore.ck-p3 .ck-uc figcaption { font: 500 9.5px/1.25 var(--a-baslik, 'Cinzel', serif); letter-spacing: .08em; text-transform: uppercase; }
#ck-tore.ck-p4 .ck-uc figcaption { font: 600 11.5px/1.15 var(--pr-serif, 'Cormorant Garamond', serif); text-transform: uppercase; }
#ck-tore.ck-p5 .ck-uc figcaption { font: 500 9.5px/1.25 var(--pr-ui, 'IBM Plex Sans', sans-serif); letter-spacing: .06em; text-transform: uppercase; }
#ck-tore .ck-bos { margin: 0; font: italic 500 13px/1.3 var(--a-govde, 'Alegreya', serif); color: #6b5a3a; text-align: center; }
/* 2 · OCAK DEFTERİ */
#ck-tore .ck-defter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#ck-tore .ck-defter li { position: relative; padding-left: 14px; font: 500 13px/1.28 var(--a-govde, 'Alegreya', serif); color: var(--ck-murekkep); }
#ck-tore .ck-defter li::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--ck-kizil); }
/* 3 · YÜZLER · HEDEF · KRİZ · EMANET */
#ck-tore .ck-yuzler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#ck-tore .ck-yuzler figure { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
#ck-tore .ck-yuzler img, #ck-tore .ck-yuzler figure > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--ck-kenar); background: #d9ccae; font: 700 15px/1 var(--a-baslik, 'Cinzel', serif); font-style: normal; color: var(--ck-kenar); }
#ck-tore .ck-yuzler b { max-width: 100%; font: 700 8.5px/1.15 var(--a-baslik, 'Cinzel', serif); letter-spacing: .04em; color: var(--ck-murekkep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ck-tore .ck-yuzler q { font: italic 500 10.5px/1.15 var(--a-govde, 'Alegreya', serif); color: #5a4a28; quotes: '“' '”';
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ck-tore .ck-panel p { margin: 0; font: 500 12.5px/1.28 var(--a-govde, 'Alegreya', serif); color: var(--ck-murekkep2); }
#ck-tore .ck-panel p > b { font: 700 11px/1.2 var(--a-baslik, 'Cinzel', serif); letter-spacing: .06em; margin-right: 3px; }
#ck-tore .ck-s-hedef.ok b, #ck-tore .ck-s-kriz.zafer b { color: var(--ck-yesil); }
#ck-tore .ck-s-hedef.yok b, #ck-tore .ck-s-kriz.yara b { color: var(--ck-kizil); }
#ck-tore .ck-s-kriz.atlatildi b { color: var(--ck-kenar); }
#ck-tore .ck-emanet { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ck-tore .ck-emanet > span { font: 700 9.5px/1 var(--a-baslik, 'Cinzel', serif); letter-spacing: .16em; color: var(--ck-kenar); white-space: nowrap; }
#ck-tore .ck-emanet .em-yuva.em-yeni { animation-delay: 400ms; }
/* KANON: hedefi tutan çağda bölüm ödülü de hapa girer — iki satıra sarabilir, köşe ona göre */
#ck-tore .ck-kazanc { align-self: center; max-width: 100%; margin: 2px 0 0 !important; padding: 4px 12px; border-radius: 12px; background: var(--ck-murekkep); text-align: center;
  font: 700 11px/1.4 var(--a-baslik, 'Cinzel', serif) !important; letter-spacing: .12em; color: var(--ck-altin) !important; }

/* ---- DAR EKRAN (360×640): levha ve parşömen sıkışır, kaydırmasız ------------------------------------------------ */
@media (max-height: 700px) {
  #ck-tore { gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #ck-tore .ck-kehanet { font-size: 14px; line-height: 1.3; }
  #ck-tore .ck-genelge { padding: 10px 12px 10px; }
  #ck-tore .ck-g-baslik { font-size: 17px; margin: 5px 0 2px; }
  #ck-tore .ck-g-cumle { font-size: 13px; line-height: 1.28; }
  #ck-tore .ck-satirlar { margin-top: 7px; padding-top: 6px; gap: 4px; }
  #ck-tore .ck-satirlar li { font-size: 12.5px; }
  #ck-tore .ck-tut:is(#pr-k, *) { min-height: 48px; margin-top: 9px; }
  #ck-tore .ck-parsomen { gap: 6px; padding: 10px 12px; }
  #ck-tore .ck-defter li { font-size: 12.5px; line-height: 1.24; }
  #ck-tore .ck-yuzler img, #ck-tore .ck-yuzler figure > i { width: 34px; height: 34px; }
  /* uzun İngilizce alıntı üç satıra çıkıp parşömeni 5 px taşırıyordu (360×640 EN, ölçüldü): dar ekranda iki satır */
  #ck-tore .ck-uc figcaption span { -webkit-line-clamp: 2; }
  #ck-tore .ck-defter { gap: 3px; }
}

/* ---- TEK ATIMLIK HAREKETLER (≤ 600 ms, yalnız transform/opacity) ------------------------------------------------ */
@keyframes ckGir { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckCik { from { opacity: 1; } to { opacity: 0; } }
@keyframes ckPlaka { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes ckDamga { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ckSol { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckYuksel { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ckMuhurDus { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
/* dokunuş süsü atladı (.atla) ya da sahne bitti (.bitti): her öğe son hâlinde, animasyon kalmaz */
#ck-tore.atla :is(.ck-plaka, .ck-baslik, .ck-alt, .ck-kehanet, .ck-genelge),
#ck-tore.bitti :is(.ck-plaka, .ck-baslik, .ck-alt, .ck-kehanet, .ck-genelge, .ck-emanet .em-yuva) { animation: none; }
#ck-tore.bitti:not(.cik) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #ck-tore, #ck-tore * { animation: none !important; transition: none !important; }
}