/* =============================================================
   WIRATAN — sistem "Kelir"
   Dua permukaan dari satu tradisi:
     KELIR  — layar bayangan, gelap hangat. untuk cerita.
     LONTAR — daun lontar, terang hangat. untuk membaca & mengerjakan.
   Seluruh gaya di-scope ke #wiratan-root agar tidak bertabrakan
   dengan tema WordPress, dan sebaliknya.
   ============================================================= */

#wiratan-root{
  --kelir:#0d0a0c; --kelir-2:#171015; --kulit:#150e12;
  --blencong:#ffc46b; --api:#e8853a; --bara:#b8471c;
  --lontar:#e9dfc7; --lontar-2:#f3ecdd;
  --tinta:#2a2018; --tinta-2:#645843; --emas:#7d5511;
  --hijau:#3f9e6d; --hijau-t:#276b45; --merah:#a83a20;

  --f-d:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  /* "Segoe UI Variable Text" didahulukan karena ia font variabel: bobot 500
     benar-benar dirender sebagai 500. Tanpa itu, Segoe UI statis hanya punya
     400 lalu 600, sehingga permintaan bobot menengah dibulatkan balik ke 400
     dan teks di latar gelap tetap setipis semula. */
  --f-u:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-m:"Cascadia Mono","SF Mono",Consolas,"Roboto Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.33,1,.5,1);
  --pop:cubic-bezier(.34,1.56,.64,1);

  position:relative;
  background:var(--kelir);
  color:#ede2d0;
  font-family:var(--f-u);
  font-size:16px;
  line-height:1.6;
  overflow-x:clip;
}
/* =============================================================
   KETERBACAAN DI LATAR GELAP

   Teks terang di latar gelap mengalami halation: goresan huruf
   "mekar" ke arah latar sehingga bentuknya melebar dan bertemu
   satu sama lain. Mata lalu bekerja lebih keras untuk memisahkan
   huruf, dan membaca lama jadi melelahkan — persis keluhan yang
   muncul saat menguji situs ini.

   Halation TIDAK diperbaiki dengan menaikkan kontras; justru
   kebalikannya. Yang menolong ada empat, dan keempatnya dipakai
   di sini:

     1. bobot huruf dinaikkan — goresan lebih tebal tidak mudah
        termakan oleh mekaran cahaya;
     2. jarak antarhuruf sedikit dilonggarkan — memberi ruang bagi
        mekaran itu sebelum menyentuh huruf sebelahnya;
     3. selisih terang teks dan latar diredam sedikit, bukan
        dimaksimalkan (putih murni di hitam murni adalah kasus
        terburuk);
     4. teks bacaan panjang tidak duduk langsung di atas hitam
        pekat, melainkan di atas bidang yang sedikit terangkat.

   Aturan ini hanya untuk permukaan KELIR. Permukaan LONTAR yang
   terang memakai tinta gelap di latar terang — arah kontrasnya
   terbalik, tidak mengalami halation, dan menebalkannya justru
   akan terlihat kasar.
   ============================================================= */
#wiratan-root{
  font-weight:450;
  letter-spacing:.006em;
}
/* Permukaan terang dikembalikan ke bobot normal. */
#wiratan-root .wtn-terang,
#wiratan-root .wtn-lontar{
  font-weight:400;
  letter-spacing:normal;
}

/* Pemulihan dasar sengaja dibungkus :where() sehingga bobotnya NOL.
   Kalau ditulis sebagai `#wiratan-root button{color:inherit}`, selektor
   ber-ID itu (1,0,1) akan mengalahkan setiap kelas tombol (0,1,0) —
   akibatnya warna teks tombol tertimpa dan menjadi tak terbaca. */
:where(#wiratan-root) *,
:where(#wiratan-root) *::before,
:where(#wiratan-root) *::after{box-sizing:border-box}
:where(#wiratan-root) :where(h1,h2,h3,h4){
  font-family:var(--f-d);font-weight:700;line-height:1.13;text-wrap:balance;margin:0;color:inherit}
:where(#wiratan-root) :where(p){margin:0}
:where(#wiratan-root) :where(button){font:inherit;cursor:pointer;color:inherit}
:where(#wiratan-root) :where(svg){max-width:100%}
:where(#wiratan-root) :where(img){max-width:100%;height:auto;display:block}

.wtn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wtn-lompat{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blencong);color:#20140a;padding:.7rem 1.1rem;text-decoration:none}
.wtn-lompat:focus{left:1rem;top:1rem}

#wiratan-root :where(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--blencong);outline-offset:3px}

/* ---------------- kepala ---------------- */
.wtn-bar{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(13,10,12,.96),rgba(13,10,12,.5) 72%,transparent);
  padding:.6rem clamp(.9rem,4vw,2rem) 1.2rem}
.wtn-bar-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;gap:.8rem}
.wtn-logo{display:flex;align-items:center;gap:.5rem;background:none;border:0;padding:.3rem 0;
  min-height:44px;font-family:var(--f-d);font-size:.95rem;letter-spacing:.15em;color:#f6e8d2}
.wtn-logo svg{width:13px;height:19px;fill:var(--blencong);flex:none}
.wtn-peta-btn{margin-left:auto;display:flex;align-items:center;gap:.45rem;background:transparent;
  border:1px solid rgba(255,196,107,.3);color:#e2cfb2;border-radius:2px 11px 2px 11px;
  padding:.5rem .8rem;min-height:44px;font-size:.8rem;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.wtn-peta-btn:hover{border-color:var(--blencong);color:var(--blencong);background:rgba(255,196,107,.08)}
.wtn-peta-btn svg{width:15px;height:15px;flex:none}

/* ---------- navigasi babak yang selalu terlihat ---------- */
.wtn-langkah{display:none;flex:1;min-width:0;align-items:center;gap:.15rem;
  justify-content:center;overflow-x:auto;scrollbar-width:none}
.wtn-langkah::-webkit-scrollbar{display:none}
@media(min-width:1080px){.wtn-langkah{display:flex}}
.wtn-lk{display:flex;align-items:center;gap:.4rem;background:transparent;border:0;
  padding:.4rem .5rem;min-height:44px;border-radius:2px 10px 2px 10px;white-space:nowrap;
  transition:background .2s var(--ease)}
.wtn-lk .ttk{display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;
  border-radius:50%;border:1px solid rgba(255,196,107,.3);
  font-family:var(--f-m);font-size:.75rem;color:#9d8a6e}
.wtn-lk .nm{font-size:.78rem;color:#9d8a6e;max-width:0;overflow:hidden;
  transition:max-width .3s var(--ease),color .2s var(--ease)}
.wtn-lk.usai .ttk{border-color:rgba(63,158,109,.6);color:var(--hijau)}
.wtn-lk.kini .ttk{border-color:var(--blencong);background:var(--blencong);color:#160d04;font-weight:700}
.wtn-lk.di-sini{background:rgba(255,196,107,.1)}
.wtn-lk.di-sini .ttk{border-color:var(--blencong);color:var(--blencong)}
.wtn-lk.di-sini .nm,.wtn-lk.kini .nm{max-width:11rem;color:#ecdcc2}
.wtn-lk:hover .nm{max-width:11rem;color:#ecdcc2}
.wtn-lk.kunci{cursor:not-allowed}
.wtn-lk.kunci .ttk{opacity:.45}

/* ringkasan ponsel — satu baris yang langsung menjawab "saya di mana" */
.wtn-langkah-hp{display:flex;align-items:center;gap:.7rem;
  max-width:1240px;margin:.5rem auto 0;padding-inline:clamp(.9rem,4vw,2rem)}
@media(min-width:1080px){.wtn-langkah-hp{display:none}}
.wtn-langkah-hp .lbl{font-family:var(--f-m);font-size:.75rem;letter-spacing:.05em;
  color:#c2ae90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtn-langkah-hp .lacak{flex:1;min-width:40px;height:4px;border-radius:2px;
  background:rgba(255,196,107,.16);overflow:hidden}
.wtn-langkah-hp .lacak i{display:block;height:100%;
  background:linear-gradient(90deg,var(--bara),var(--blencong));transition:width .5s var(--ease)}

/* ---------- penanda sesi ---------- */
.wtn-sesi-bung{position:relative;flex:none}
.wtn-sesi{display:flex;align-items:center;gap:.45rem;background:rgba(63,158,109,.14);
  border:1px solid rgba(63,158,109,.45);color:#a8dcc0;border-radius:2px 11px 2px 11px;
  padding:.45rem .7rem;min-height:44px;font-family:var(--f-m);font-size:.78rem;
  letter-spacing:.04em;transition:border-color .2s var(--ease),background .2s var(--ease)}
.wtn-sesi:hover{border-color:var(--hijau);background:rgba(63,158,109,.22)}
.wtn-sesi svg{width:13px;height:13px;flex:none;opacity:.7}
.wtn-sesi-titik{width:8px;height:8px;border-radius:50%;background:var(--hijau);flex:none;
  box-shadow:0 0 0 3px rgba(63,158,109,.22);animation:wtnNyala 2.4s var(--ease) infinite}
@keyframes wtnNyala{0%,100%{box-shadow:0 0 0 3px rgba(63,158,109,.22)}
  50%{box-shadow:0 0 0 6px rgba(63,158,109,.08)}}
.wtn-sesi-bung.tamu .wtn-sesi{background:rgba(255,196,107,.12);border-color:rgba(255,196,107,.4);color:#e8d3b2}
.wtn-sesi-bung.tamu .wtn-sesi-titik{background:var(--blencong);box-shadow:0 0 0 3px rgba(255,196,107,.2)}

/* chevron ikut berputar supaya keadaannya terbaca */
.wtn-sesi[aria-expanded="true"] svg{transform:rotate(180deg)}
.wtn-sesi svg{transition:transform .2s var(--ease)}
.wtn-sesi-tutup{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;
  display:grid;place-items:center;background:transparent;border:1px solid rgba(255,196,107,.24);
  color:#c9b193;border-radius:2px 9px 2px 9px;font-size:.9rem;line-height:1}
.wtn-sesi-tutup:hover{border-color:var(--blencong);color:var(--blencong);
  background:rgba(255,196,107,.1)}

/* Lapisan latar: penjamin bahwa panel selalu bisa ditutup dengan satu klik
   di mana pun, tanpa bergantung pada perambatan peristiwa. */
.wtn-sesi-latar{position:fixed;inset:0;z-index:88;background:rgba(6,4,6,.45)}
.wtn-sesi-latar[hidden]{display:none}

/* Panel berada di tingkat teratas (position:fixed), bukan di dalam bilah
   kepala — sehingga tidak bisa terpotong oleh pemotongan overflow. */
.wtn-sesi-panel{position:fixed;right:clamp(.9rem,4vw,2rem);top:4.6rem;z-index:89;
  width:min(21rem,92vw);max-height:calc(100dvh - 6rem);overflow-y:auto;
  background:#1a1219;border:1px solid rgba(255,196,107,.32);border-radius:3px 18px 3px 18px;
  padding:1.1rem;display:grid;gap:.85rem;box-shadow:0 28px 70px rgba(0,0,0,.75)}
.wtn-sesi-panel[hidden]{display:none}
/* di layar sempit jadi panel bawah — lebih mudah dijangkau ibu jari */
@media(max-width:640px){
  .wtn-sesi-panel{right:0;left:0;top:auto;bottom:0;width:auto;
    border-radius:18px 18px 0 0;max-height:82dvh;padding:1.2rem 1.1rem 1.6rem}
  .wtn-sesi-panel::before{content:"";position:absolute;top:.5rem;left:50%;
    translate:-50% 0;width:44px;height:4px;border-radius:2px;background:rgba(255,196,107,.35)}
}
.wtn-sesi-kep{display:grid;gap:.2rem}
.wtn-sesi-mode{font-family:var(--f-m);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blencong)}
.wtn-sesi-kep b{font-family:var(--f-d);font-size:1.5rem;color:#f6e8d2;line-height:1.1}
.wtn-sesi-det{font-size:.85rem;color:#b09a7d;line-height:1.5}
.wtn-sesi-kode{font-family:var(--f-m);font-size:.82rem;letter-spacing:.06em;
  color:var(--blencong);background:rgba(255,196,107,.1);
  border:1px solid rgba(255,196,107,.2);border-radius:3px;
  padding:.2rem .5rem;margin-top:.35rem;align-self:start}
.wtn-sesi-maju{display:grid;gap:.3rem;padding-top:.75rem;border-top:1px solid rgba(255,196,107,.16)}
.wtn-sesi-maju span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#9d8a6e}
.wtn-sesi-maju b{font-size:.95rem;color:#ecdcc2;font-weight:600}
.wtn-sesi-maju .lacak{height:5px;border-radius:3px;background:rgba(255,196,107,.16);
  overflow:hidden;margin-top:.2rem}
.wtn-sesi-maju .lacak i{display:block;height:100%;
  background:linear-gradient(90deg,var(--bara),var(--blencong))}
.wtn-sesi-aksi{display:grid;gap:.45rem}
.wtn-sesi-btn{background:transparent;border:1px solid rgba(255,196,107,.3);color:#e2cfb2;
  padding:.6rem .85rem;min-height:44px;border-radius:2px 12px 2px 12px;font-size:.88rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.wtn-sesi-btn:hover{border-color:var(--blencong);background:rgba(255,196,107,.1)}
/* langkah merusak dibedakan warnanya dan dipisah dari aksi biasa */
.wtn-sesi-btn.bahaya{border-color:rgba(224,82,82,.45);color:#f0a89e}
.wtn-sesi-btn.bahaya:hover{border-color:#e05252;background:rgba(224,82,82,.16);color:#ffd9d2}
.wtn-sesi-catatan{font-size:.8rem;color:#9d8a6e;line-height:1.55}
.wtn-sesi-konfirm{display:grid;gap:.6rem}
.wtn-sesi-konfirm b{font-family:var(--f-d);font-size:1.1rem;color:#ffd9d2}
.wtn-sesi-konfirm p{font-size:.86rem;color:#c2ae90;line-height:1.6}

.wtn-pita{position:sticky;top:0;z-index:61;height:2px;background:rgba(255,196,107,.1);margin-bottom:-2px}
.wtn-pita i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bara),var(--blencong))}

/* ---------------- layar ---------------- */
.wtn-layar{display:none}
.wtn-layar.wtn-aktif{display:block;animation:wtnMasuk .5s var(--ease) both}
@keyframes wtnMasuk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wtn-tengah{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,5vw,2rem)}

/* ---------------- tipografi umum ---------------- */
/* Ukuran label naik dari 0,6rem (±9,6px — terlalu kecil untuk dibaca)
   ke 0,78rem, dan warna sekundernya dinaikkan kontrasnya. */
.wtn-eb{font-family:var(--f-m);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blencong);display:flex;align-items:center;gap:.55rem}
.wtn-eb::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.wtn-kepala{display:grid;gap:.6rem;margin-bottom:1.8rem;max-width:60ch}
.wtn-kepala h2{font-size:clamp(1.8rem,4.5vw,2.7rem);color:#fdf3e2}
.wtn-kepala p{color:#d5c4a8;max-width:56ch;font-size:1.04rem;line-height:1.72}

/* ---------------- tombol ---------------- */
.wtn-utama{border:0;background:var(--blencong);color:#160d04;font-weight:750;font-size:1.02rem;
  letter-spacing:.01em;text-shadow:none;
  padding:.95rem 1.7rem;min-height:52px;border-radius:2px 16px 2px 16px;
  display:inline-flex;align-items:center;gap:.6rem;
  box-shadow:0 8px 30px rgba(255,150,40,.3);
  transition:transform .25s var(--pop),box-shadow .25s var(--ease),background .2s var(--ease)}
.wtn-utama:hover{transform:translateY(-3px) scale(1.02);background:#ffd28a;
  box-shadow:0 14px 40px rgba(255,150,40,.42)}
.wtn-utama:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wtn-utama svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}
.wtn-kedua{background:transparent;border:1px solid rgba(255,196,107,.26);color:#c9b193;
  padding:.85rem 1.3rem;min-height:52px;border-radius:2px 14px 2px 14px;font-size:.9rem;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.wtn-kedua:hover{border-color:rgba(255,196,107,.55);color:#e8d3b2}
.wtn-aksi{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}

/* ---------------- gerbang ---------------- */
/* Konten dimulai lebih tinggi supaya tidak menyisakan ruang kosong
   menganga di atas layar lebar. */
.wtn-gerbang{position:relative;min-height:auto;display:grid;align-content:start;
  padding:clamp(3rem,9vh,5.5rem) 0 clamp(2.5rem,7vh,4rem);overflow:hidden}
.wtn-gbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* sama seperti lapisan lakon — pusatkan lewat transform, bukan translate */
.wtn-gbg .wtn-lyr{position:absolute;left:50%;bottom:0;width:max(1400px,180vw);
  transform:translateX(-50%);will-change:transform}
.wtn-gbg svg{width:100%;height:auto;display:block;fill:var(--kulit)}
.wtn-gbg .d1{filter:blur(2.4px);opacity:.5}
.wtn-gbg .d2{filter:blur(1px);opacity:.75}
.wtn-gbg .d3{opacity:1}

/* Hero dua kolom: teks kiri, foto monumen kanan. Sebelumnya satu kolom
   sempit di tengah, menyisakan ruang kosong lebar di kanan dan kiri. */
.wtn-hero{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:980px){
  .wtn-hero{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)}
}
/* Irama tegak dirapikan: judul rapat, lalu jarak lebih lega antar kelompok,
   sehingga isinya terbaca sebagai blok-blok jelas, bukan tumpukan acak. */
.wtn-gisi{position:relative;z-index:2;display:grid;gap:.85rem;max-width:min(56ch,100%)}
.wtn-gisi h1{margin-bottom:-.15rem}
.wtn-gisi .wtn-kait{margin-top:.35rem;margin-bottom:.25rem}
.wtn-gisi .wtn-apa{margin-bottom:.2rem}
.wtn-gisi .wtn-aksi{margin-top:.35rem}
.wtn-gisi .wtn-aksi .wtn-durasi{margin-left:.2rem;align-self:center;white-space:nowrap}
.wtn-gisi .wtn-alur{margin-top:.6rem}

.wtn-hero-gbr{position:relative;z-index:2;margin:0}
.wtn-hero-bingkai{position:relative;display:block;width:100%;padding:0;border:0;
  aspect-ratio:4/5;overflow:hidden;border-radius:3px 30px 3px 30px;background:#150e12;
  box-shadow:inset 0 0 0 1px rgba(255,196,107,.24),0 26px 64px rgba(0,0,0,.6);
  transition:transform .3s var(--ease)}
.wtn-hero-bingkai:hover{transform:translateY(-4px)}
.wtn-hero-bingkai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Monumen itu tinggi dan figurnya ada di bagian ATAS bingkai. Nilai lama
     (62%) mendorong potongan ke bawah sehingga kepalanya terpotong. */
  object-position:center 30%;filter:saturate(.5) contrast(1.06) brightness(.78) sepia(.16);
  transition:transform .6s var(--ease),filter .4s var(--ease)}
.wtn-hero-bingkai:hover img{transform:scale(1.04);filter:saturate(.6) contrast(1.08) brightness(.8) sepia(.14)}
.wtn-hero-bingkai::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,9,.35),transparent 38%,rgba(10,6,9,.72))}
.wtn-hero-lup{position:absolute;left:.8rem;bottom:.8rem;z-index:2;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;color:#f0dcbb;
  background:rgba(12,8,11,.84);border:1px solid rgba(255,196,107,.3);
  padding:.36rem .65rem;border-radius:2px 9px 2px 9px}
.wtn-hero-bingkai:hover .wtn-hero-lup{border-color:var(--blencong);color:var(--blencong)}
@media(max-width:979px){.wtn-hero-bingkai{aspect-ratio:16/10}}
.wtn-tanda{display:inline-flex;align-items:center;gap:.5rem;align-self:start;
  font-family:var(--f-m);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:#d6bd94;border:1px solid rgba(255,196,107,.3);padding:.38rem .8rem;
  border-radius:2px 9px 2px 9px}
.wtn-gisi h1{font-size:clamp(3rem,10vw,5.8rem);color:#fdf3e2;letter-spacing:.02em;
  text-shadow:0 4px 50px rgba(0,0,0,.9)}
.wtn-tag{font-family:var(--f-d);font-size:clamp(1.1rem,3vw,1.55rem);color:var(--blencong);
  line-height:1.35;margin-top:-.35rem}
.wtn-apa{font-size:clamp(1.04rem,2.4vw,1.16rem);color:#ddcdb3;line-height:1.78;max-width:52ch;
  text-shadow:0 2px 20px rgba(0,0,0,.9)}
.wtn-apa b{color:#ffd9a0;font-weight:600}
/* Kisi rapi, bukan pembungkus bebas — enam chip yang membungkus sendiri
   menghasilkan baris timpang 4+2 yang terlihat berantakan. */
.wtn-ringkas{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
@media(min-width:520px){.wtn-ringkas{grid-template-columns:repeat(3,1fr)}}
/* tinggi seragam supaya baris kedua tidak terlihat lebih pendek
   saat label panjang membungkus di baris pertama */
.wtn-chip{display:flex;align-items:baseline;gap:.4rem;background:rgba(28,20,26,.88);
  border:1px solid rgba(255,196,107,.22);border-radius:2px 11px 2px 11px;
  padding:.55rem .7rem;font-size:.82rem;color:#cdbb9f;line-height:1.3;
  min-width:0;min-height:3.1rem}
.wtn-chip b{font-family:var(--f-d);color:var(--blencong);font-size:1.15rem;line-height:1;flex:none}
.wtn-durasi{font-family:var(--f-m);font-size:.78rem;letter-spacing:.1em;color:#b09a7d}

/* kalimat kait */
.wtn-kait{font-family:var(--f-d);font-size:clamp(1.25rem,3.4vw,1.75rem);line-height:1.35;
  color:#f3e3c6;font-style:italic;margin:.2rem 0 .1rem;
  padding-left:1rem;border-left:2px solid var(--blencong);max-width:24ch}
.wtn-kait em{color:var(--blencong);font-style:italic}

/* pratinjau perjalanan di halaman muka */
.wtn-alur{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.wtn-alur-l{display:flex;gap:.6rem;align-items:center;flex:1;min-width:150px;
  background:rgba(28,20,26,.7);border:1px solid rgba(255,196,107,.18);
  border-radius:2px 13px 2px 13px;padding:.6rem .8rem}
.wtn-alur-l .no{display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:none;
  border-radius:50%;border:1px solid rgba(255,196,107,.45);
  font-family:var(--f-d);font-size:.88rem;color:var(--blencong)}
.wtn-alur-l .tt{display:grid;gap:.08rem;min-width:0}
.wtn-alur-l .tt b{font-size:.9rem;color:#ecdcc2;font-weight:650}
.wtn-alur-l .tt span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.03em;color:#9d8a6e}
.wtn-alur-panah{display:grid;place-items:center;color:var(--api);font-size:1.1rem;flex:none}
@media(max-width:560px){.wtn-alur-panah{display:none}}

/* ---------------- pilar ---------------- */
.wtn-pilar-sec{padding:clamp(3rem,8vw,5rem) 0;
  background:linear-gradient(180deg,transparent,rgba(23,16,21,.6))}
.wtn-pilar{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:620px){.wtn-pilar{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.wtn-pilar{grid-template-columns:repeat(4,1fr)}}
/* kartu keterangan, bukan tombol — tanpa kursor tunjuk dan tanpa efek sorot
   yang menyiratkan bisa diklik */
.wtn-pcard{background:var(--kelir-2);border:1px solid rgba(255,196,107,.14);
  border-radius:2px 18px 2px 18px;padding:1.3rem;display:grid;gap:.5rem;text-align:left;
  align-content:start;cursor:default}
.wtn-pcard svg{width:34px;height:34px;stroke:var(--blencong);fill:none;stroke-width:1.4}
.wtn-pcard b{font-family:var(--f-d);font-size:1.14rem;color:#f6e8d2}
.wtn-pcard .jml{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;color:var(--api)}
.wtn-pcard span{font-size:.94rem;color:#c9b79a;line-height:1.7}

/* ---------------- peta perjalanan ---------------- */
.wtn-busur{position:relative;margin:2.2rem 0 1.4rem;padding-bottom:3.5rem}
.wtn-busur svg.jalur{width:100%;height:auto;display:block;overflow:visible}
.wtn-busur .rel{fill:none;stroke:rgba(255,196,107,.16);stroke-width:2;stroke-dasharray:5 7}
.wtn-busur .maju{fill:none;stroke:url(#wtnFajar);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--ease)}
.wtn-simpul{position:absolute;translate:-50% -50%;display:grid;gap:.4rem;justify-items:center;
  background:none;border:0;padding:0;width:clamp(78px,11vw,116px);text-align:center}
.wtn-bulat{width:clamp(42px,6vw,56px);height:clamp(42px,6vw,56px);border-radius:50%;
  display:grid;place-items:center;border:2px solid rgba(255,196,107,.24);
  background:#120c10;color:#6f6154;font-family:var(--f-d);font-size:1.05rem;
  transition:transform .3s var(--pop),border-color .3s var(--ease),
             background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.wtn-simpul:hover .wtn-bulat,.wtn-simpul:focus-visible .wtn-bulat{transform:scale(1.12)}
.wtn-simpul .nm{font-size:.85rem;color:#b3a48c;line-height:1.3}
.wtn-simpul .st{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8a7b68}
.wtn-simpul.kini .wtn-bulat{border-color:var(--blencong);background:var(--blencong);color:#20140a;
  box-shadow:0 0 0 6px rgba(255,196,107,.14),0 0 34px rgba(255,150,40,.6);
  animation:wtnDenyut 2.6s var(--ease) infinite}
@keyframes wtnDenyut{
  0%,100%{box-shadow:0 0 0 6px rgba(255,196,107,.14),0 0 34px rgba(255,150,40,.55)}
  50%{box-shadow:0 0 0 12px rgba(255,196,107,.06),0 0 46px rgba(255,150,40,.8)}}
.wtn-simpul.kini .nm{color:#fff0d6;font-weight:600}
.wtn-simpul.kini .st{color:var(--blencong)}
.wtn-simpul.usai .wtn-bulat{border-color:var(--hijau);background:rgba(63,158,109,.16);color:var(--hijau)}
.wtn-simpul.usai .nm{color:#9fbfa9}
.wtn-simpul.usai .st{color:var(--hijau)}
.wtn-bulat svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
.wtn-simpul.kunci{cursor:not-allowed}

/* Penanda babak alat ukur — membedakannya dari Tantangan yang boleh diulang.
   Dipakai di simpul busur, baris tegak, dan kotak langkah berikutnya, yang
   ketiganya berlatar gelap. Warnanya bara supaya terbaca sebagai peringatan
   tanpa berteriak; huruf tetap tegak agar tidak melebur pada layar kecil. */
/* Kekhususan sengaja disamakan atau dilebihkan terhadap `.wtn-trow .isi span`
   dan `.wtn-lanjut .txt span` — keduanya sudah memaksa huruf kapital, ukuran,
   dan warna sendiri. Tanpa itu penandanya ikut tercetak kapital dan menyatu
   dengan label status di sebelahnya. */
/* Sengaja memakai --f-u, bukan --f-m seperti label status di sebelahnya.
   Dua alasan: monospace di sini statis, sehingga permintaan bobot menengah
   dibulatkan balik ke 400 dan teks sekecil ini kembali menipis di latar
   gelap — persis keluhan yang sudah diperbaiki di tempat lain. Kedua, ini
   kalimat untuk dibaca manusia, bukan label mesin seperti "TERKUNCI". */
.wtn-simpul .wtn-sekali,
.wtn-trow .isi .wtn-sekali,
.wtn-lanjut .txt .wtn-sekali{display:block;font-family:var(--f-u);font-size:.75rem;
  letter-spacing:.012em;line-height:1.45;color:#e2915f;text-transform:none;font-weight:550}
.wtn-simpul .wtn-sekali{margin-top:-.14rem;font-size:.72rem}
.wtn-trow .isi .wtn-sekali,
.wtn-lanjut .txt .wtn-sekali{margin-top:.2rem}

.wtn-tegak{display:grid;gap:.6rem}
.wtn-trow{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  background:var(--kelir-2);border:1px solid rgba(255,196,107,.13);
  border-radius:2px 15px 2px 15px;padding:.85rem 1rem;text-align:left;min-height:60px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.wtn-trow:hover{border-color:rgba(255,196,107,.4);background:#1d141a}
.wtn-trow .wtn-bulat{width:42px;height:42px;font-size:1rem}
.wtn-trow .isi{display:grid;gap:.15rem;min-width:0}
.wtn-trow .isi b{font-size:.95rem;color:#e8d3b2;font-weight:650}
.wtn-trow .isi span{font-size:.85rem;color:#b09d84}
.wtn-trow .pn{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8a7b68;white-space:nowrap}
.wtn-trow.kini{border-color:var(--blencong);background:rgba(255,196,107,.07)}
.wtn-trow.kini .isi b{color:#fff0d6}
.wtn-trow.kini .pn{color:var(--blencong)}
.wtn-trow.usai .isi b{color:#9fbfa9}
.wtn-trow.usai .pn{color:var(--hijau)}

/* PENTING: media query harus SETELAH .wtn-tegak, kalau tidak
   aturan display:grid di atas akan menimpanya dan keduanya tampil. */
@media(max-width:900px){.wtn-busur{display:none}}
@media(min-width:901px){.wtn-tegak{display:none}}

.wtn-lanjut{margin-top:1.6rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  background:var(--kelir-2);border:1px solid rgba(255,196,107,.2);
  border-radius:2px 18px 2px 18px;padding:1.1rem 1.3rem}
.wtn-lanjut .txt{display:grid;gap:.1rem;flex:1;min-width:170px}
.wtn-lanjut .txt span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8a7a66}
.wtn-lanjut .txt b{font-family:var(--f-d);font-size:1.2rem;color:#f6e8d2}

/* ---------------- lontar ---------------- */
.wtn-terang{padding:clamp(2.2rem,7vw,4.5rem) 0 4rem}
.wtn-lontar{background:
    repeating-linear-gradient(0deg,rgba(140,115,70,.05) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,var(--lontar-2),var(--lontar));
  color:var(--tinta);border-radius:3px 22px 3px 22px;padding:clamp(1.4rem,4.5vw,2.6rem);
  position:relative;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(120,95,55,.18)}
.wtn-lontar::before{content:"";position:absolute;left:0;right:0;top:9px;height:5px;
  pointer-events:none;opacity:.5;
  background:radial-gradient(circle,rgba(120,95,55,.34) 40%,transparent 42%) 0 0/13px 5px repeat-x}
.wtn-lontar h2{font-size:clamp(1.6rem,4vw,2.2rem);color:var(--tinta)}
.wtn-lontar h3{font-family:var(--f-u);font-size:1.1rem;font-weight:650;color:var(--tinta)}
.wtn-lontar p{color:#493c2c;max-width:64ch;line-height:1.75}
.wtn-sub{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emas)}
.wtn-judul{display:grid;gap:.45rem;margin-bottom:1.2rem}
.wtn-pisah{height:1px;background:linear-gradient(90deg,rgba(120,95,55,.32),transparent);
  margin-block:1.2rem}
.wtn-gelap-btn{background:var(--tinta);color:var(--lontar-2);border:0;
  border-radius:2px 14px 2px 14px;padding:.85rem 1.4rem;min-height:48px;font-weight:650;
  font-size:.92rem;transition:transform .22s var(--pop),background .2s var(--ease)}
.wtn-gelap-btn:hover{transform:translateY(-2px);background:#3b2d20}
.wtn-gelap-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* di permukaan lontar, #645843 hanya ~4,3:1 — dinaikkan ke tinta penuh */
.wtn-kedua-terang{background:rgba(42,32,24,.06);border:1px solid rgba(120,95,55,.55);
  color:var(--tinta);font-weight:600;
  padding:.85rem 1.3rem;min-height:48px;border-radius:2px 14px 2px 14px;font-size:.92rem}
.wtn-kedua-terang:hover{border-color:var(--emas);background:rgba(138,95,20,.12)}

/* kartu tokoh */
.wtn-pilih{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.wtn-pilih button{background:transparent;border:1px solid rgba(120,95,55,.32);color:var(--tinta-2);
  padding:.55rem .9rem;min-height:44px;border-radius:2px 10px 2px 10px;font-size:.82rem;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.wtn-pilih button:hover{border-color:var(--emas);color:var(--tinta)}
.wtn-pilih button[aria-pressed="true"]{background:var(--tinta);color:var(--lontar-2);
  border-color:var(--tinta);font-weight:600}
.wtn-jajar{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:.65rem}
.wtn-kartu{background:rgba(255,255,255,.42);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 12px 2px 12px;padding:.8rem;display:grid;gap:.25rem;text-align:left;
  min-height:44px;color:var(--tinta);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.wtn-kartu:hover{transform:translateY(-3px);border-color:var(--emas);
  box-shadow:0 8px 20px rgba(80,60,25,.18)}
.wtn-kartu b{font-size:.93rem;font-weight:650}
.wtn-kartu .peran{font-size:.85rem;color:var(--tinta-2);line-height:1.45}
.wtn-cap{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.14rem .4rem;justify-self:start;border-radius:2px;margin-top:.15rem}
.wtn-cap.artefak{background:rgba(23,110,100,.14);color:#186860}
.wtn-cap.primer{background:rgba(138,95,20,.16);color:#7a5310}
.wtn-cap.sekunder{background:rgba(120,95,55,.16);color:#6b5b38}
.wtn-cap.lisan{background:rgba(184,71,28,.14);color:#963d17}

/* uji / kuis */
.wtn-opsi{display:grid;gap:.5rem}
.wtn-jwb{display:flex;gap:.8rem;align-items:flex-start;text-align:left;width:100%;
  background:rgba(255,255,255,.42);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 12px 2px 12px;padding:.85rem 1rem;min-height:48px;
  color:var(--tinta);font-size:.94rem;line-height:1.5;
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.wtn-jwb:hover:not(:disabled){transform:translateX(3px);border-color:var(--emas)}
.wtn-jwb[aria-pressed="true"]{background:rgba(138,95,20,.14);border-color:var(--emas)}
.wtn-jwb .h{font-family:var(--f-m);font-size:.75rem;color:var(--emas);flex:none;
  padding-top:.13rem;font-weight:700}
/* ---- uji bergaya slide ---- */
.wtn-titik{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.wtn-titik-b{width:34px;height:34px;padding:0;flex:none;
  border:1px solid rgba(120,95,55,.34);border-radius:2px 9px 2px 9px;
  background:transparent;color:var(--tinta-2);
  font-family:var(--f-m);font-size:.78rem;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.wtn-titik-b:hover{border-color:var(--emas)}
.wtn-titik-b.terjawab{background:rgba(63,158,109,.18);border-color:rgba(63,158,109,.5);color:#1d6b42}
.wtn-titik-b.kini{border-color:var(--tinta);border-width:2px;color:var(--tinta);font-weight:700}
.wtn-titik-b.kini.terjawab{background:rgba(63,158,109,.28)}

.wtn-slide{min-height:19rem}
.wtn-slide-kartu{background:rgba(255,255,255,.4);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 18px 2px 18px;padding:clamp(1rem,3vw,1.6rem)}
.wtn-slide{opacity:0;transform:translateX(14px);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.wtn-slide.masuk{opacity:1;transform:none}
.wtn-slide-nav{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.wtn-slide-hitung{font-family:var(--f-m);font-size:.78rem;color:var(--tinta-2);
  flex:1;min-width:150px;text-align:center}
.wtn-slide-nav .kirim{background:var(--hijau);color:#08210f}
.wtn-slide-nav .kirim:hover:not(:disabled){background:#4fb37e}
.wtn-slide-nav button:disabled{opacity:.45;cursor:not-allowed;transform:none}
@media(prefers-reduced-motion:reduce){.wtn-slide{opacity:1;transform:none}}

.wtn-maju-uji{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:1.2rem}
.wtn-lacak{height:6px;background:rgba(120,95,55,.16);border-radius:3px;overflow:hidden;
  flex:1;min-width:120px}
.wtn-lacak i{display:block;height:100%;background:linear-gradient(90deg,var(--bara),var(--api));
  transition:width .4s var(--ease)}

/* formulir kode peserta */
.wtn-form{display:grid;gap:.9rem;max-width:34rem}
.wtn-baris{display:grid;gap:.3rem}
.wtn-baris label{font-size:.85rem;font-weight:600;color:var(--tinta)}
.wtn-baris .bantu{font-size:.78rem;color:var(--tinta-2)}
.wtn-baris input,.wtn-baris select{font:inherit;font-size:1rem;padding:.7rem .8rem;
  min-height:48px;border:1px solid rgba(120,95,55,.4);border-radius:2px 10px 2px 10px;
  background:rgba(255,255,255,.55);color:var(--tinta);width:100%}
.wtn-baris input:focus,.wtn-baris select:focus{outline:2px solid var(--emas);outline-offset:1px}
.wtn-galat{color:var(--merah);font-size:.85rem;font-weight:600}

/* ---------------- bisik & gunungan ---------------- */
.wtn-bisik{position:fixed;left:50%;bottom:1.6rem;translate:-50% 0;z-index:96;
  background:rgba(23,16,21,.97);border:1px solid rgba(255,196,107,.4);color:#e8d3b2;
  border-radius:2px 14px 2px 14px;padding:.75rem 1.1rem;font-size:.86rem;max-width:88vw;
  opacity:0;transform:translateY(10px);pointer-events:none;text-align:center;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wtn-bisik.on{opacity:1;transform:none}
.wtn-gunungan{position:fixed;inset:0;z-index:95;pointer-events:none;display:grid;
  place-items:center;opacity:0}
.wtn-gunungan.jalan{opacity:1}
.wtn-gunungan svg{height:120vh;width:auto;fill:#0a0609;
  filter:drop-shadow(0 0 70px rgba(255,150,40,.55))}
.wtn-gunungan.jalan svg{animation:wtnSabet 1s cubic-bezier(.5,0,.2,1) both}
@keyframes wtnSabet{0%{transform:translateX(-125vw) rotate(-9deg)}
  50%{transform:translateX(0) rotate(0)}100%{transform:translateX(125vw) rotate(9deg)}}

.wtn-noscript{padding:2rem;background:var(--kelir-2);border:1px solid rgba(255,196,107,.3)}
.wtn-noscript h2{color:#f6e8d2;margin-bottom:.5rem}
.wtn-noscript p{color:#b8a68e}

/* ============ LAKON — panel berbingkai ============
   Tiap adegan satu panel rapat: teks di satu sisi, foto berbingkai di
   sisi lain. Parallax terjadi DI DALAM bingkai, jadi gerakannya jelas
   dan berbatas — bukan latar penuh layar yang terbaca sebagai noda. */
.wtn-lakon{position:relative;max-width:1180px;margin-inline:auto;
  padding:clamp(2rem,6vw,3.5rem) clamp(1rem,5vw,2rem) 4rem}
.wtn-suasana{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wtn-lamp{position:absolute;left:50%;top:0;width:170vmax;aspect-ratio:1;
  transform:translate3d(-50%,-52%,0);opacity:.3;filter:blur(6px);
  background:radial-gradient(circle,rgba(255,206,140,.5) 0%,rgba(214,120,30,.22) 16%,
    rgba(120,44,10,.14) 34%,transparent 62%)}
.wtn-kanvas{position:absolute;inset:0;width:100%;height:100%}

.wtn-lakon-kep{position:relative;z-index:1;display:grid;gap:.6rem;
  max-width:56ch;margin-bottom:clamp(2rem,5vw,3rem)}
.wtn-lakon-kep h2{font-size:clamp(1.9rem,4.6vw,2.8rem);color:#fdf3e2}
.wtn-lakon-kep p{color:#cdbb9f;font-size:1.02rem}

/* Pengantar dari Konten Wiratan.pdf — kartu bertajuk, beberapa kolom */
.wtn-pengantar{position:relative;z-index:1;display:grid;gap:1.1rem;
  margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.wtn-pengantar-kep{display:grid;gap:.5rem}
.wtn-pengantar-kep h3{font-family:var(--f-d);font-size:clamp(1.4rem,3.4vw,1.9rem);color:#fdf3e2}
.wtn-pengantar-grid{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:640px){.wtn-pengantar-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.wtn-pengantar-grid{grid-template-columns:repeat(3,1fr)}}
.wtn-pkartu{position:relative;display:grid;gap:.5rem;align-content:start;
  background:linear-gradient(150deg,rgba(30,21,28,.82),rgba(16,11,15,.62));
  border:1px solid rgba(255,196,107,.16);border-radius:2px 18px 2px 18px;
  padding:1.1rem 1.2rem 1.2rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.wtn-pkartu:hover{border-color:rgba(255,196,107,.4);transform:translateY(-3px)}
.wtn-pnum{font-family:var(--f-d);font-size:.9rem;color:var(--blencong);
  width:1.7rem;height:1.7rem;display:grid;place-items:center;
  border:1px solid rgba(255,196,107,.4);border-radius:50%}
.wtn-pkartu h4{font-family:var(--f-d);font-size:1.14rem;color:#f6e8d2;line-height:1.25}
.wtn-pkartu p{color:#d5c4a8;font-size:.96rem;line-height:1.75}
.wtn-pkartu ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem}
.wtn-pkartu li{position:relative;padding-left:1rem;font-family:var(--f-m);
  font-size:.75rem;letter-spacing:.02em;color:#a8967c}
.wtn-pkartu li::before{content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;background:var(--api);border-radius:50%}

.wtn-panel-daftar{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.wtn-panel{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wtn-panel.tampak{opacity:1;transform:none}
.wtn-panel-in{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:center;
  background:linear-gradient(150deg,rgba(30,21,28,.86),rgba(16,11,15,.7));
  border:1px solid rgba(255,196,107,.16);border-radius:3px 26px 3px 26px;
  padding:clamp(1.2rem,3.2vw,2rem);
  box-shadow:0 22px 60px rgba(0,0,0,.5)}
@media(min-width:860px){
  .wtn-panel-in{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr)}
  .wtn-panel:nth-child(even) .wtn-panel-in{grid-template-columns:minmax(300px,.82fr) minmax(0,1fr)}
  .wtn-panel:nth-child(even) .wtn-panel-teks{order:2}
  .wtn-panel:nth-child(even) .wtn-panel-gbr{order:1}
}
.wtn-panel-teks{display:grid;gap:.75rem;align-content:start;min-width:0}
.wtn-panel-teks h3{font-family:var(--f-d);font-size:clamp(1.5rem,3.6vw,2.1rem);
  color:#fdf3e2;line-height:1.15}
/* Blok bacaan terpanjang di situs. Diberi bidang yang sedikit terangkat
   supaya huruf tidak duduk langsung di atas hitam pekat — sekaligus masuk
   akal dalam kiasan wayang: inilah bagian kelir yang sedang tersorot. */
.wtn-panel-teks p{color:#d6c4a6;font-size:1.06rem;line-height:1.8;max-width:46ch;
  font-weight:450;letter-spacing:.008em}
.wtn-panel-teks p b{color:#ffd9a0;font-weight:650}
.wtn-panel-teks{background:linear-gradient(180deg,rgba(255,212,150,.045),rgba(255,196,107,.015));
  border-left:2px solid rgba(255,196,107,.22);
  border-radius:2px 14px 14px 2px;
  padding:1.1rem 1.3rem 1.2rem}
.wtn-babak{display:flex;align-items:center;gap:.6rem;font-family:var(--f-m);
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blencong)}
.wtn-no{display:grid;place-items:center;width:1.8rem;height:1.8rem;flex:none;
  border:1px solid rgba(255,196,107,.5);border-radius:50%;
  font-family:var(--f-d);font-size:.9rem;color:var(--blencong)}

/* butir kunci per panel — supaya bisa dibaca cepat maupun mendalam */
.wtn-poin{margin:.3rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.wtn-poin li{position:relative;padding-left:1.15rem;font-size:.94rem;line-height:1.7;
  color:#d0bd9e;font-weight:450}
.wtn-poin li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--api);border-radius:50%}

.wtn-angka{display:flex;flex-wrap:wrap;gap:1.4rem;margin:.35rem 0 0;
  padding-top:.9rem;border-top:1px solid rgba(255,196,107,.14)}
.wtn-angka div{display:grid;gap:.15rem}
.wtn-angka dt{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#a8967c}
.wtn-angka dd{margin:0;font-family:var(--f-d);font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--blencong);line-height:1;font-variant-numeric:tabular-nums}

.wtn-panel-gbr{margin:0;display:grid;gap:.6rem;min-width:0}
.wtn-bingkai{position:relative;display:block;width:100%;padding:0;border:0;
  aspect-ratio:4/3;overflow:hidden;border-radius:2px 20px 2px 20px;
  background:#150e12;box-shadow:inset 0 0 0 1px rgba(255,196,107,.22),0 14px 34px rgba(0,0,0,.5)}
/* Bidikan dicondongkan ke bawah — bagian atas foto lapangan hampir selalu
   langit kosong, sedangkan objeknya ada di bawah. Warnanya diredam dan
   dihangatkan supaya menyatu dengan palet kelir, bukan menabraknya. */
.wtn-bingkai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 72%;
  transform:scale(1.16);will-change:transform;
  filter:saturate(.42) contrast(1.1) brightness(.72) sepia(.22)}
.wtn-bingkai::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,9,.5),transparent 40%,rgba(10,6,9,.55))}
/* penanda perbesar — muncul jelas, tidak perlu ditebak */
.wtn-bingkai-lup{position:absolute;right:.6rem;bottom:.6rem;z-index:2;
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;color:#f0dcbb;
  background:rgba(12,8,11,.86);border:1px solid rgba(255,196,107,.32);
  padding:.34rem .6rem;border-radius:2px 8px 2px 8px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.wtn-bingkai-lup svg{width:14px;height:14px;flex:none}
.wtn-bingkai:hover .wtn-bingkai-lup,.wtn-bingkai:focus-visible .wtn-bingkai-lup{
  border-color:var(--blencong);color:#160d04;background:var(--blencong)}
.wtn-panel-gbr figcaption{font-size:.9rem;color:#c2b094;line-height:1.6}

/* deretan pilihan foto — inilah tanda bahwa fotonya lebih dari satu */
.wtn-strip-kep{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em}
.wtn-strip-jml{color:var(--blencong)}
.wtn-strip-tip{color:#9d8a6e}
.wtn-strip{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:rgba(255,196,107,.4) transparent}
.wtn-strip::-webkit-scrollbar{height:6px}
.wtn-strip::-webkit-scrollbar-thumb{background:rgba(255,196,107,.4);border-radius:3px}
.wtn-strip::-webkit-scrollbar-track{background:rgba(255,196,107,.08)}
.wtn-strip-item{flex:0 0 62px;height:62px;padding:0;overflow:hidden;scroll-snap-align:start;
  border:1px solid rgba(255,196,107,.2);border-radius:2px 9px 2px 9px;background:#150e12;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.wtn-strip-item img{width:100%;height:100%;object-fit:cover;object-position:center 70%;
  filter:saturate(.45) brightness(.8)}
.wtn-strip-item:hover{transform:translateY(-2px);border-color:rgba(255,196,107,.6)}
.wtn-strip-item[aria-current="true"]{border-color:var(--blencong);border-width:2px}
.wtn-strip-item[aria-current="true"] img{filter:saturate(.7) brightness(1)}

.wtn-lakon-tutup{position:relative;z-index:1;display:grid;justify-items:center;gap:1rem;
  text-align:center;margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:clamp(2rem,5vw,3rem);border-top:1px solid rgba(255,196,107,.14)}
.wtn-lakon-tutup p{color:#cdbb9f;max-width:44ch}

/* ============ BUKTI FOTO DI DALAM CERITA ============
   Siluet menuturkan, foto membuktikan. Cetakan arsip ditampilkan
   seolah disematkan di atas kelir — sedikit miring, bertepi hangat. */
.wtn-bukti{display:grid;gap:.5rem;margin-top:.4rem;max-width:22rem;justify-self:start}
.wtn-adegan:nth-child(even) .wtn-bukti{justify-self:end}
.wtn-bukti-bingkai{position:relative;background:#efe6d2;padding:.55rem .55rem 0;
  border-radius:2px;box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,196,107,.18);
  transform:rotate(-1.2deg);transition:transform .4s var(--ease)}
.wtn-adegan:nth-child(even) .wtn-bukti-bingkai{transform:rotate(1.2deg)}
.wtn-bukti-bingkai:hover{transform:rotate(0) scale(1.02)}
.wtn-bukti-bingkai img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.82) contrast(1.06)}
.wtn-bukti-bingkai figcaption{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;
  color:#6b5b38;padding:.45rem .15rem .5rem;text-align:left;line-height:1.5}
.wtn-bukti-ket{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8a7a66}

/* ============ KARTU BERFOTO (lokasi & tokoh) ============ */
.wtn-lok{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:680px){.wtn-lok{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.wtn-lok{grid-template-columns:repeat(3,1fr)}}
.wtn-lkart{background:rgba(255,255,255,.42);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 16px 2px 16px;overflow:hidden;text-align:left;color:var(--tinta);
  display:grid;grid-template-rows:auto 1fr;padding:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.wtn-lkart:hover{transform:translateY(-4px);border-color:var(--emas);
  box-shadow:0 12px 28px rgba(80,60,25,.22)}
.wtn-lkart .gbr{position:relative;aspect-ratio:16/10;overflow:hidden;background:#d8ccb0}
.wtn-lkart .gbr img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.wtn-lkart:hover .gbr img{transform:scale(1.06)}
.wtn-lkart .gbr .jml{position:absolute;right:.5rem;bottom:.5rem;
  background:rgba(20,14,10,.82);color:#f0e2c8;font-family:var(--f-m);font-size:.75rem;
  letter-spacing:.08em;padding:.22rem .45rem;border-radius:2px}
.wtn-lkart .gbr.kosong{display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#ddd0b4 0 8px,#d6c8aa 8px 16px)}
.wtn-lkart .gbr.kosong span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.12em;
  color:#7a6a4e;text-transform:uppercase}
.wtn-lkart .isi{padding:.8rem .85rem .9rem;display:grid;gap:.28rem;align-content:start}
.wtn-lkart .isi b{font-family:var(--f-d);font-size:1.02rem}
.wtn-lkart .isi .alm{font-size:.78rem;color:var(--tinta-2);line-height:1.5}
.wtn-lkart .isi .prn{font-size:.79rem;color:#5a4c39;line-height:1.55}

/* tokoh berfoto */
.wtn-kartu.berfoto{padding:0;overflow:hidden;grid-template-rows:auto 1fr}
.wtn-kartu .potret{aspect-ratio:4/3;overflow:hidden;background:#d8ccb0}
.wtn-kartu .potret img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.wtn-kartu.berfoto:hover .potret img{transform:scale(1.06)}
/* Kartu tanpa potret.
   Blok polos setinggi foto terbaca seperti gambar yang gagal dimuat.
   Dibuat lebih pendek dan diberi medali berukir supaya terbaca sebagai
   pilihan — kami memang tidak punya potretnya, bukan gambarnya rusak. */
.wtn-kartu .potret.simbol{aspect-ratio:auto;min-height:5.2rem;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(138,95,20,.05) 0 6px,transparent 6px 12px),
    linear-gradient(140deg,#e6dcc4,#d6c9ab)}
.wtn-kartu .potret.simbol span{font-family:var(--f-d);font-size:1.5rem;line-height:1;
  color:#6b5a38;width:2.7rem;height:2.7rem;display:grid;place-items:center;
  border:1px solid rgba(138,95,20,.4);border-radius:50%;
  background:rgba(255,255,255,.42)}
.wtn-kartu .badan{padding:.75rem .8rem .85rem;display:grid;gap:.25rem}
.wtn-kartu .sbr-foto{font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;
  color:#5c4f38;line-height:1.45}

/* detail lokasi */
.wtn-detail{display:grid;gap:1rem}
.wtn-detail .utama{position:relative;display:block;width:100%;padding:0;
  border:1px solid rgba(120,95,55,.28);border-radius:2px 16px 2px 16px;
  overflow:hidden;background:#d8ccb0;cursor:zoom-in}
.wtn-detail .utama img{width:100%;height:auto;display:block;max-height:52svh;object-fit:cover}
.wtn-detail .utama .wtn-perbesar{position:absolute;right:.6rem;bottom:.6rem;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;
  background:rgba(20,14,10,.84);color:#f0e2c8;padding:.3rem .6rem;border-radius:2px}
.wtn-detail .utama:hover .wtn-perbesar{background:rgba(20,14,10,.95)}
.wtn-detail .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.4rem}
.wtn-detail .strip button{aspect-ratio:1;overflow:hidden;padding:0;border-radius:2px 8px 2px 8px;
  border:1px solid rgba(120,95,55,.28);background:#d8ccb0}
.wtn-detail .strip button[aria-current="true"]{border-color:var(--emas);border-width:2px}
.wtn-detail .strip img{width:100%;height:100%;object-fit:cover}
.wtn-peta-sisip{border:1px solid rgba(120,95,55,.28);border-radius:2px 14px 2px 14px;
  overflow:hidden;aspect-ratio:16/9;background:#ddd0b4}
.wtn-peta-sisip iframe{width:100%;height:100%;border:0;display:block}

/* ============ DOKUMENTASI ============ */
.wtn-tab{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.1rem}
.wtn-tab button{background:transparent;border:1px solid rgba(255,196,107,.24);color:#c9b193;
  padding:.55rem .9rem;min-height:44px;border-radius:2px 10px 2px 10px;font-size:.82rem;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.wtn-tab button:hover{border-color:var(--blencong);color:var(--blencong)}
.wtn-tab button[aria-pressed="true"]{background:var(--blencong);color:#20140a;
  border-color:var(--blencong);font-weight:650}
.wtn-galeri{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.wtn-foto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--kelir-2);
  border:1px solid rgba(255,196,107,.14);border-radius:2px 14px 2px 14px;padding:0;
  transition:transform .24s var(--ease),border-color .24s var(--ease)}
.wtn-foto:hover{transform:translateY(-3px);border-color:var(--blencong)}
.wtn-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);
  transition:filter .3s var(--ease),transform .5s var(--ease)}
.wtn-foto:hover img{filter:none;transform:scale(1.05)}
.wtn-foto figcaption{position:absolute;inset-inline:0;bottom:0;padding:.5rem .6rem;
  background:linear-gradient(0deg,rgba(8,5,8,.94),transparent);
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;color:#e8d3b2;text-align:left}

.wtn-lightbox{position:fixed;inset:0;z-index:97;background:rgba(6,4,6,.96);
  display:grid;grid-template-rows:auto 1fr auto;gap:.8rem;padding:1rem;backdrop-filter:blur(6px)}
.wtn-lightbox[hidden]{display:none}
.wtn-lightbox img{max-width:100%;max-height:100%;object-fit:contain;margin:auto;
  border-radius:2px 14px 2px 14px}
.wtn-lb-atas{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.wtn-lb-tutup{background:transparent;border:1px solid rgba(255,196,107,.4);color:#e8d3b2;
  border-radius:2px 12px 2px 12px;padding:.5rem .9rem;min-height:44px;font-size:.85rem}
.wtn-lb-bawah{text-align:center;display:grid;gap:.35rem;justify-items:center;
  max-width:70ch;margin-inline:auto;width:100%}
.wtn-lb-babak{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blencong)}
.wtn-lb-bawah b{font-family:var(--f-d);font-size:1.25rem;color:#f6e8d2}
.wtn-lb-lokasi{font-family:var(--f-m);font-size:.75rem;color:#b09a7d;letter-spacing:.05em}
/* penjelasan foto — inilah yang dulu hilang saat foto diklik */
.wtn-lb-ket{font-size:.97rem;color:#d6c4a6;line-height:1.72;max-width:62ch;
  padding:.7rem .9rem;background:rgba(28,20,26,.8);
  border-left:2px solid var(--blencong);border-radius:0 10px 10px 0;text-align:left}
.wtn-lb-nav{display:flex;gap:.6rem;justify-content:center;align-items:center;
  margin-top:.5rem;width:100%;max-width:100%}
.wtn-lb-arah{background:transparent;border:1px solid rgba(255,196,107,.34);color:#e2cfb2;
  min-height:44px;padding:0 .9rem;border-radius:2px 12px 2px 12px;font-size:.85rem;flex:none}
.wtn-lb-arah:hover{border-color:var(--blencong);color:var(--blencong)}
.wtn-lb-strip{display:flex;gap:.35rem;overflow-x:auto;padding:.2rem;flex:1;
  justify-content:flex-start;scrollbar-width:thin}
.wtn-lb-strip button{flex:0 0 46px;height:46px;padding:0;overflow:hidden;
  border:1px solid rgba(255,196,107,.22);border-radius:2px 8px 2px 8px;background:#150e12}
.wtn-lb-strip img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.wtn-lb-strip button[aria-current="true"]{border-color:var(--blencong);border-width:2px}
.wtn-lb-strip button[aria-current="true"] img{filter:none}
.wtn-lb-bantu{font-family:var(--f-m);font-size:.75rem;color:#8a7a66;letter-spacing:.05em}
@media(max-width:640px){
  .wtn-lb-arah{padding:0 .6rem;font-size:0}
  .wtn-lb-arah::after{content:"‹";font-size:1.3rem}
  .wtn-lb-arah[data-lb-maju]::after{content:"›"}
  .wtn-lb-bantu{display:none}
}

/* ============ TANTANGAN ============ */
.wtn-mode{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:640px){.wtn-mode{grid-template-columns:1fr 1fr}}
.wtn-mcard{background:rgba(255,255,255,.42);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 16px 2px 16px;padding:1.1rem;display:grid;gap:.4rem;text-align:left;
  color:var(--tinta);min-height:44px;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.wtn-mcard:hover{transform:translateY(-3px);border-color:var(--emas);
  box-shadow:0 10px 24px rgba(80,60,25,.2)}
.wtn-mcard svg{width:28px;height:28px;stroke:var(--emas);fill:none;stroke-width:1.5}
.wtn-mcard b{font-family:var(--f-d);font-size:1.1rem}
.wtn-mcard span{font-size:.83rem;color:var(--tinta-2);line-height:1.55}
.wtn-mcard .nilai{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;color:var(--hijau-t)}
.wtn-mcard{position:relative;padding-top:2.4rem}
.wtn-mcard.tuntas{border-color:rgba(63,158,109,.55);background:rgba(63,158,109,.08)}
.wtn-mcard.dicoba{border-color:rgba(138,95,20,.45)}
/* penanda status di tiap kartu modul */
.wtn-mstatus{position:absolute;top:.75rem;right:.85rem;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.06em;
  padding:.22rem .5rem;border-radius:2px 8px 2px 8px;border:1px solid}
.wtn-mstatus.tuntas{color:#13492d;border-color:rgba(29,107,66,.5);background:rgba(63,158,109,.16)}
.wtn-mstatus.dicoba{color:#7a5310;border-color:rgba(138,95,20,.45);background:rgba(138,95,20,.12)}
.wtn-mstatus.belum{color:#5c4f38;border-color:rgba(120,95,55,.35);background:rgba(120,95,55,.08)}
.wtn-mrek{font-family:var(--f-m);font-size:.75rem;color:var(--tinta-2);letter-spacing:.04em}

/* bilah kemajuan modul tantangan */
.wtn-tant-maju{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem;
  background:rgba(42,32,24,.06);border:1px solid rgba(120,95,55,.3);
  border-radius:2px 16px 2px 16px;padding:.9rem 1.1rem}
.wtn-tant-maju .txt{display:grid;gap:.15rem;flex:1;min-width:190px}
.wtn-tant-maju .txt b{font-family:var(--f-d);font-size:1.1rem;color:var(--tinta)}
.wtn-tant-maju .txt span{font-size:.85rem;color:var(--tinta-2)}
.wtn-tant-maju .lacak{position:relative;flex:1;min-width:110px;height:7px;border-radius:4px;
  background:rgba(120,95,55,.18);overflow:hidden}
/* Lapis bawah = sudah dimainkan; lapis atas = sudah berlencana.
   Dua ukuran pada satu bilah, bukan dua bilah yang bersaing. */
.wtn-tant-maju .lacak i{position:absolute;left:0;top:0;display:block;height:100%;
  border-radius:4px;transition:width .6s var(--ease);
  background:rgba(138,95,20,.42)}
.wtn-tant-maju .lacak i.lencana{background:linear-gradient(90deg,var(--emas),var(--hijau-t))}

.wtn-urut{display:grid;gap:.5rem;margin-block:.8rem}
.wtn-urut button,.wtn-slot button{display:flex;gap:.7rem;align-items:center;text-align:left;
  background:rgba(255,255,255,.42);border:1px solid rgba(120,95,55,.24);
  border-radius:2px 12px 2px 12px;padding:.75rem .9rem;min-height:48px;color:var(--tinta);
  font-size:.9rem}
.wtn-urut button:hover,.wtn-slot button:not(.terkunci):not(:disabled):hover{border-color:var(--emas)}
.wtn-urut .no,.wtn-slot .no{font-family:var(--f-m);font-size:.75rem;color:var(--emas);flex:none;
  width:1.6rem;height:1.6rem;display:grid;place-items:center;
  border:1px solid rgba(138,95,20,.4);border-radius:50%}
.wtn-slot{min-height:3rem;border:1px dashed rgba(120,95,55,.4);border-radius:2px 12px 2px 12px;
  padding:.5rem;display:grid;gap:.4rem}

/* ============ HASIL ============ */
.wtn-batang{display:grid;gap:.5rem;margin-block:1rem}
.wtn-brs{display:grid;grid-template-columns:92px 1fr 3.6ch;gap:.8rem;align-items:center}
.wtn-brs .nm{font-size:.8rem;color:var(--tinta-2)}
.wtn-jalur{height:22px;background:rgba(120,95,55,.13);border-radius:2px;overflow:hidden;
  position:relative}
.wtn-isi{position:absolute;inset-block:0;left:0;width:0;transition:width 1s var(--ease);
  border-radius:2px}
.wtn-isi.aw{background:rgba(120,95,55,.45)}
.wtn-isi.ak{background:linear-gradient(90deg,var(--bara),var(--api))}
.wtn-brs .ag{font-family:var(--f-m);font-size:.78rem;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--tinta)}
.wtn-lencana{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.7rem}
.wtn-lenc{border:1px solid rgba(120,95,55,.28);background:rgba(255,255,255,.35);
  border-radius:2px 14px 2px 14px;padding:1rem;display:grid;gap:.45rem;justify-items:center;
  text-align:center}
.wtn-lenc.mati{opacity:.4}
.wtn-lenc svg{width:30px;height:30px;stroke:var(--emas);fill:none;stroke-width:1.5}
.wtn-lenc.mati svg{stroke:var(--tinta-2)}
.wtn-lenc b{font-size:.85rem;color:var(--tinta)}
.wtn-lenc span{font-family:var(--f-m);font-size:.75rem;color:var(--tinta-2);letter-spacing:.06em}

/* Baris penutup baku di setiap babak — bentuknya sama di mana pun */
.wtn-lanjut-babak{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  background:var(--kelir-2);border:1px solid rgba(255,196,107,.22);
  border-radius:2px 18px 2px 18px;padding:1rem 1.2rem}
.wtn-lanjut-babak .txt{display:grid;gap:.1rem;flex:1;min-width:180px}
.wtn-lanjut-babak .txt span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8a7a66}
.wtn-lanjut-babak .txt b{font-family:var(--f-d);font-size:1.15rem;color:#f6e8d2}
.wtn-lanjut-babak.terang{background:rgba(42,32,24,.06);border-color:rgba(120,95,55,.32)}
.wtn-lanjut-babak.terang .txt span{color:var(--tinta-2)}
.wtn-lanjut-babak.terang .txt b{color:var(--tinta)}

/* kode peserta otomatis */
.wtn-kode-otomatis{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:rgba(138,95,20,.1);border:1px solid rgba(138,95,20,.35);
  border-radius:2px 16px 2px 16px;padding:1rem 1.2rem}
.wtn-kode-otomatis .txt{display:grid;gap:.15rem;flex:1;min-width:180px}
.wtn-kode-otomatis .txt span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-2)}
.wtn-kode-otomatis .txt b{font-family:var(--f-m);font-size:1.3rem;letter-spacing:.06em;
  color:var(--tinta);font-weight:700}
.wtn-kode-ket{font-size:.86rem;color:var(--tinta-2);line-height:1.6;margin-top:.6rem}

/* daftar gugur Tugu Pasekan */
.wtn-pasekan-ket{font-size:.9rem;color:var(--tinta-2);line-height:1.65;
  grid-column:1 / -1;max-width:64ch}
.wtn-scroll-x{overflow-x:auto;border:1px solid rgba(120,95,55,.28);
  border-radius:2px 14px 2px 14px;margin-top:.9rem}
.wtn-tabel{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.wtn-tabel th{text-align:left;padding:.6rem .8rem;background:rgba(42,32,24,.1);
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:#5f400b;font-weight:400;border-bottom:1px solid rgba(120,95,55,.3);
  position:sticky;top:0}
.wtn-tabel td{padding:.55rem .8rem;border-bottom:1px solid rgba(120,95,55,.16);
  color:#493c2c;vertical-align:top}
.wtn-tabel tr:last-child td{border-bottom:0}
.wtn-tabel tbody tr:nth-child(even){background:rgba(42,32,24,.035)}
.wtn-tabel td.num{font-family:var(--f-m);font-size:.82rem;font-variant-numeric:tabular-nums;
  color:var(--tinta-2);white-space:nowrap}
.wtn-tabel td b{font-weight:650;color:var(--tinta);display:block}
.wtn-tabel td .cat{display:block;font-size:.78rem;color:#5c4f38;line-height:1.45;margin-top:.15rem}

/* layar nilai uji */
.wtn-nilai{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:rgba(42,32,24,.06);border:1px solid rgba(120,95,55,.32);
  border-radius:2px 20px 2px 20px;padding:1.3rem 1.5rem;margin-top:.4rem}
.wtn-nilai .angka{display:flex;align-items:baseline;gap:.15rem;flex:none}
.wtn-nilai .angka b{font-family:var(--f-d);font-size:clamp(3rem,9vw,4.4rem);
  line-height:1;color:var(--emas);font-variant-numeric:tabular-nums}
.wtn-nilai .angka span{font-family:var(--f-d);font-size:1.6rem;color:var(--tinta-2)}
.wtn-nilai .rinci{display:grid;gap:.25rem;flex:1;min-width:210px}
.wtn-nilai .rinci b{font-size:1.05rem;color:var(--tinta)}
.wtn-nilai .rinci span{font-size:.9rem;color:var(--tinta-2);line-height:1.6}

.wtn-tutup-sesi{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:rgba(42,32,24,.07);border:1px solid rgba(120,95,55,.32);
  border-radius:2px 16px 2px 16px;padding:1rem 1.15rem}
.wtn-tutup-sesi .txt{display:grid;gap:.2rem;flex:1;min-width:200px}
.wtn-tutup-sesi .txt b{font-family:var(--f-d);font-size:1.15rem;color:var(--tinta)}
.wtn-tutup-sesi .txt span{font-size:.87rem;color:var(--tinta-2);line-height:1.55}

/* daftar pustaka */
.wtn-pustaka{display:grid;gap:.7rem;margin-top:.5rem}
.wtn-pustaka li{font-size:.88rem;color:#493c2c;line-height:1.65;
  padding-left:1.1rem;text-indent:-1.1rem;list-style:none}

/* ---------------- gerak dikurangi ---------------- */
@media(prefers-reduced-motion:reduce){
  #wiratan-root .wtn-panggung{position:relative;height:60svh}
  #wiratan-root .wtn-naskah{margin-top:0}
  #wiratan-root .wtn-adegan{min-height:auto;padding-block:2.2rem}
  #wiratan-root .wtn-kotak{opacity:1;transform:none;
    background:rgba(13,10,12,.85);padding:1.15rem;border-radius:2px 14px 2px 14px}
  #wiratan-root .wtn-adegan h2,#wiratan-root .wtn-adegan p{text-shadow:none}
  #wiratan-root .wtn-sc{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  #wiratan-root *,#wiratan-root *::before,#wiratan-root *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .wtn-pcard:hover,.wtn-kartu:hover,.wtn-utama:hover,.wtn-jwb:hover{transform:none}
}

/* Catatan konfirmasi pada kartu tokoh — sengaja tidak disembunyikan.
   Situs ini menakar dirinya pada kejujuran tingkat sumber. */
.wtn-perlu{display:block;margin-top:.45rem;font-size:.78rem;line-height:1.55;
  color:#71552d;background:rgba(184,71,28,.08);border-left:2px solid rgba(184,71,28,.45);
  padding:.4rem .55rem;border-radius:0 3px 3px 0;text-align:left}

/* Peringatan pindah-dari-tamu pada layar pendaftaran. Sengaja mencolok:
   satu baris pretest yang keliru mencemari pasangan pra/pasca. */
.wtn-ingat{display:grid;gap:.3rem;background:rgba(184,71,28,.09);
  border:1px solid rgba(184,71,28,.35);border-left:4px solid var(--bara);
  border-radius:0 10px 10px 0;padding:.9rem 1.05rem;margin-bottom:1.1rem}
.wtn-ingat b{font-family:var(--f-u);font-size:.95rem;font-weight:700;color:#7a2f10}
.wtn-ingat span{font-size:.88rem;line-height:1.6;color:#5c4f38}
.wtn-ingat button{justify-self:start}

/* Susun Kronologi — posisi yang sudah terbukti benar dikunci hijau.
   Warnanya sengaja tegas: inilah satu-satunya umpan balik yang dipunyai
   siswa untuk tahu bagian mana dari urutannya yang sudah betul. */
.wtn-slot button.terkunci{
  background:rgba(39,107,69,.14);
  border-color:rgba(39,107,69,.55);
  color:#1d5c3a;
  cursor:default}
.wtn-slot button.terkunci .no{background:#276b45;color:#f3ecdd;border-color:#276b45}
.wtn-slot button.terkunci .tanda{margin-left:auto;font-weight:700;color:#276b45}
.wtn-slot button:disabled{opacity:.55;cursor:default}