/* Rani Web — Kenali Layanan BKJTK
   Dua tata letak dari satu berkas:
   - Layar lebar (>=1024px): gaya kiosk. Rani besar, tombol melingkar di atas
     kepalanya, slide memenuhi latar. Halaman tidak menggulung.
   - Layar sempit (<1024px): gaya daftar. Video di atas, slide dan daftar topik
     di bawahnya, halaman menggulung seperti halaman web biasa.
   Warna latar panggung disamakan dengan warna latar video Rani, lalu tepi video
   di-feather dengan mask agar menyatu tanpa garis batas. */

:root {
  --pu-blue: #0b4ea2;
  --pu-blue-dark: #0c447c;
  --pu-blue-deep: #042c53;
  --pu-yellow: #ffd200;
  --teks: #16324f;
  --teks-lembut: #4a6180;
  --rani-bg-terang: #bbb5b0;
  --rani-bg: #b1aba7;
  --rani-bg-gelap: #a49e99;
  --radius: 16px;
  /* diisi app.js dari tinggi bar caption, dipakai agar tombol kanan-bawah
     selalu duduk DI ATAS caption dan tidak pernah tertutup */
  --tinggi-caption: 0px;
  --rani-rasio: 57.7vw;                /* tinggi video Rani di layar sempit */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 17px sebagai dasar (rem dihitung dari sini) agar teks tetap nyaman dibaca di ponsel */
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
body {
  font-family: "Segoe UI", -apple-system, system-ui, Roboto, sans-serif;
  color: var(--teks);
  background: #eef2f7;
  font-size: 1rem;
  line-height: 1.55;
}
.hidden { display: none !important; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--pu-yellow); outline-offset: 3px; border-radius: 6px; }

/* ---------- Panggung Rani ---------- */
.rani-wrap {
  position: relative; width: 100%; aspect-ratio: 832 / 480; overflow: hidden;
  background: linear-gradient(100deg, var(--rani-bg-terang) 0%, var(--rani-bg) 45%, var(--rani-bg-gelap) 100%);
}
.rani-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
  mask-composite: intersect;
  transition: filter 1.1s ease;
}
.rani-poster { z-index: 1; }
.rani-wrap.hasvideo .rani-poster { opacity: 0; }
.rani-video { z-index: 2; opacity: 0; }
.rani-video.on { opacity: 1; }
.rani-halo { display: none; }
/* Rani tidur: meredup, sekitarnya ikut gelap (pola kiosk) */
.panggung[data-layar="mulai"] .rani-media { filter: brightness(.6) saturate(.72); }
.remang {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse 52vw 62vh at 50% 58%,
              rgba(22,18,16,0) 24%, rgba(22,18,16,.5) 62%, rgba(22,18,16,.88) 100%);
  opacity: 0; transition: opacity 1.1s ease;
}
.panggung[data-layar="mulai"] .remang { opacity: 1; }

.memuat {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  background: rgba(4,44,83,.86); color: #fff; font-size: .85rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
}

/* ---------- Caption ---------- */
.subtitle {
  background: rgba(12,68,124,.94); color: #fff;
  font-size: 1.12rem; line-height: 1.5; padding: 13px 16px;
}
.subtitle:empty { display: none; }
.panggung[data-caption="mati"] .subtitle { display: none; }
.panggung[data-layar="mulai"] .subtitle { display: none; }

/* ---------- Tombol bulat kanan bawah: suara, caption, versi teks ---------- */
.kendali {
  position: fixed; right: 16px; z-index: 75;
  bottom: calc(var(--tinggi-caption) + 14px);
  display: flex; flex-direction: column; gap: 10px;
  transition: bottom .2s ease;
}
.tombol-bulat {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--pu-blue-dark); background: rgba(255,255,255,.94);
  border: 1.5px solid rgba(11,78,162,.22); cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 18px rgba(20,16,12,.28);
  -webkit-tap-highlight-color: transparent;
}
.tombol-bulat:hover { border-color: var(--pu-blue); }
/* keadaan mati: ikon diberi garis coret, warna tetap terbaca */
.tombol-bulat .ik-silang { display: none; }
.tombol-bulat[aria-pressed="false"] { color: #4a5560; background: rgba(236,239,243,.96); }
.tombol-bulat[aria-pressed="false"] .ik-silang { display: block; }
.tombol-bulat[aria-pressed="false"] .ik-gelombang { display: none; }

.tombol-kembali {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 12px 16px; font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--pu-blue-dark); background: #f6f9fd; border: none;
  border-bottom: 1px solid #dde5ef; cursor: pointer;
}

/* ---------- Slide pendukung ----------
   Slide adalah PNG dengan zona transparan di kanan-bawah (tempat Rani berdiri),
   sama seperti kiosk. Latarnya memakai warna latar video Rani, bukan warna gelap,
   supaya zona transparan itu menyatu dan tidak tampak seperti lubang. */
.layanan { background: linear-gradient(100deg, var(--rani-bg-terang) 0%, var(--rani-bg) 45%, var(--rani-bg-gelap) 100%); }
.slide-panel { position: relative; width: 100%; }
.slide-panel .gambar-slide { display: block; width: 100%; height: auto; }
.slide-panel .slide-teks { padding: 18px 16px; background: #fff; color: var(--teks); font-size: 1rem; }
.slide-panel .slide-teks h2 { font-size: 1.15rem; color: var(--pu-blue-deep); margin-bottom: 6px; }

/* ---------- Daftar topik (layar sempit) ---------- */
.panel-daftar { padding: 16px 16px 8px; }
.daftar-judul { font-size: 1.1rem; font-weight: 800; color: var(--pu-blue-deep); margin-bottom: 4px; }
.daftar-sub { color: var(--teks-lembut); font-size: .92rem; margin-bottom: 14px; }
.kat { border: 1.5px solid #dbe4ef; border-radius: var(--radius); margin-bottom: 12px;
  background: #fff; overflow: hidden; }
.kat-kepala {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 14px; min-height: 44px;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: var(--pu-blue-deep);
  background: #fff; border: none; cursor: pointer; text-align: left;
}
.kat-kepala img { height: 40px; width: 40px; object-fit: contain; flex: 0 0 auto; }
.kat-kepala .ik { font-size: 1.6rem; width: 40px; text-align: center; }
.kat-kepala .jml { margin-left: auto; font-size: .94rem; font-weight: 600; color: var(--teks-lembut); }
.kat-kepala .panah { margin-left: 8px; color: var(--pu-blue); transition: transform .2s; }
.kat[data-buka="ya"] .kat-kepala .panah { transform: rotate(90deg); }
.kat-isi { display: none; border-top: 1px solid #e6ecf4; padding: 6px 8px 10px; }
.kat[data-buka="ya"] .kat-isi { display: block; }
.tanya {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 11px 12px; margin-top: 4px;
  font: inherit; font-size: .96rem; color: var(--teks); text-align: left;
  background: #f7fafd; border: 1.5px solid transparent; border-radius: 12px; cursor: pointer;
}
.tanya:hover { border-color: #cdd9ea; }
.tanya[aria-current="true"] { background: var(--pu-blue); color: #fff; }
.tanya .no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #e4ecf7; color: var(--pu-blue-dark); font-size: .94rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.tanya[aria-current="true"] .no { background: rgba(255,255,255,.24); color: #fff; }
.taut-kat { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 4px 2px;
  padding: 8px 14px; font-size: .9rem; font-weight: 700; color: #fff; background: var(--pu-blue);
  border-radius: 999px; text-decoration: none; }

/* ---------- Kaki ---------- */
.kaki { padding: 20px 16px 84px; color: var(--teks-lembut); font-size: .85rem; }
.kaki p + p { margin-top: 6px; }
.kaki a { color: var(--pu-blue); }

/* ---------- Layar awal: hanya Rani tidur + dua tombol ---------- */
.mulai { position: fixed; left: 0; right: 0; z-index: 90;
  display: none; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 16px; }
.panggung[data-layar="mulai"] .mulai { display: flex; }
.panggung[data-layar="mulai"] .panel-daftar,
.panggung[data-layar="mulai"] .kaki,
.panggung[data-layar="mulai"] .kendali { display: none; }
.tombol-besar {
  min-height: 54px; padding: 15px 28px; font: inherit; font-size: 1.05rem; font-weight: 700;
  color: var(--pu-blue-deep); background: var(--pu-yellow); border: none; border-radius: 14px;
  cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.tombol-besar.hantu { background: rgba(255,255,255,.94); color: var(--pu-blue-deep); }

/* ================================================================
   LAYAR LEBAR (>=1024px) — gaya kiosk
   ================================================================ */
@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }
  .panggung { position: fixed; inset: 0;
    background: linear-gradient(100deg, var(--rani-bg-terang) 0%, var(--rani-bg) 45%, var(--rani-bg-gelap) 100%); }

  /* Rani: besar di dasar layar, digerakkan lewat --tx (geser) & --ts (skala) */
  .rani-wrap {
    position: fixed; left: 50vw; bottom: 0; width: auto;
    height: 86vh; aspect-ratio: 832 / 480;
    transform: translateX(calc(-50% + var(--tx, 0vw))) scale(var(--ts, 1));
    transform-origin: 50% 100%;
    transition: transform .85s cubic-bezier(.65,0,.35,1);
    z-index: 10; pointer-events: none; background: none; overflow: visible;
  }
  .rani-wrap[data-pos="slide"] { z-index: 4; }
  .rani-halo {
    display: block; position: absolute; inset: -18%;
    background: radial-gradient(ellipse 62% 78% at 50% 62%,
                var(--rani-bg) 38%,
                color-mix(in srgb, var(--rani-bg) 55%, transparent) 58%,
                color-mix(in srgb, var(--rani-bg) 0%, transparent) 76%);
    opacity: 0; transition: opacity .85s ease;
  }
  .rani-wrap[data-pos="slide"] .rani-halo { opacity: 1; }

  /* slide memenuhi layar; Rani (z4 saat mengecil) tampak menembus zona
     transparan slide — susunan lapisan persis seperti kiosk */
  .layanan { position: fixed; inset: 0; z-index: 5; background: none; }
  .slide-panel { position: absolute; inset: 0; animation: naik .5s cubic-bezier(.4,0,.2,1); }
  .slide-panel .gambar-slide { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; }
  .slide-panel .slide-teks { position: absolute; top: 8vh; left: 3.5vw; width: 54vw;
    background: rgba(255,255,255,.9); border-radius: var(--radius); padding: 2.4vh 2vw;
    font-size: clamp(15px, 2.1vh, 21px); }
  .slide-panel .slide-teks h2 { font-size: clamp(20px, 3.2vh, 34px); }
  @keyframes naik { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* menu melingkar */
  .radial { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
  .bulat {
    position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
    width: clamp(96px, 8.6vw, 132px); height: clamp(96px, 8.6vw, 132px);
    border-radius: 50%; border: 3px solid rgba(11,78,162,.18);
    background: rgba(255,255,255,.95); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 10px 28px rgba(40,34,30,.24);
    transition: transform .25s, border-color .25s, box-shadow .25s;
    animation: munculPop .45s cubic-bezier(.34,1.4,.64,1) backwards;
    font: inherit;
  }
  .bulat:nth-child(1){animation-delay:.05s} .bulat:nth-child(2){animation-delay:.12s}
  .bulat:nth-child(3){animation-delay:.19s} .bulat:nth-child(4){animation-delay:.26s}
  .bulat:nth-child(5){animation-delay:.33s}
  @keyframes munculPop { from { transform: translate(-50%,-50%) scale(.4); opacity: 0; } }
  .bulat.keluar { animation: hilangPop .24s cubic-bezier(.4,0,.7,1) forwards; pointer-events: none; }
  @keyframes hilangPop { to { transform: translate(-50%,-50%) scale(.2); opacity: 0; } }
  .bulat:hover, .bulat:focus-visible {
    transform: translate(-50%, -50%) scale(1.12);
    border-color: var(--pu-yellow); box-shadow: 0 14px 36px rgba(11,78,162,.3); z-index: 5; }
  .bulat img { width: 42%; height: 42%; object-fit: contain; pointer-events: none; }
  .bulat .ik { font-size: clamp(22px, 4.4vh, 40px); }
  .bulat .lb { font-size: clamp(11px, 1.5vh, 15px); font-weight: 700; color: var(--pu-blue-dark);
    text-align: center; line-height: 1.15; padding: 0 8px; }

  /* tombol mini sub-pertanyaan */
  .sub-btns { display: none; position: fixed; inset: 0; z-index: 45; pointer-events: none; }
  .sub-btns.show { display: block; }
  .mini {
    position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
    width: clamp(74px, 5.8vw, 98px); height: clamp(74px, 5.8vw, 98px);
    border-radius: 50%; background: rgba(255,255,255,.97);
    border: 2.5px solid rgba(11,78,162,.3); cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px; box-shadow: 0 10px 26px rgba(40,34,30,.26);
    transition: transform .22s, border-color .22s, background .22s;
    animation: munculPop .4s cubic-bezier(.34,1.4,.64,1) backwards;
    text-decoration: none;
  }
  .mini:hover, .mini:focus-visible { transform: translate(-50%, -50%) scale(1.13);
    border-color: var(--pu-yellow); z-index: 46; }
  .mini[aria-current="true"] { background: var(--pu-blue); border-color: var(--pu-blue); }
  .mini[aria-current="true"] .mb-lb { color: #fff; }
  .mini .mb-ik { font-size: clamp(15px, 2vh, 20px); }
  .mini .mb-lb { font-size: clamp(9px, 1.25vh, 11px); font-weight: 700; color: var(--pu-blue-deep);
    text-align: center; line-height: 1.15; padding: 0 4px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* tombol tautan situs resmi di cincin: biru, beda jelas dari tombol pertanyaan */
  .mini.web { background: var(--pu-blue); border-color: var(--pu-blue-dark); }
  .mini.web .mb-lb { color: #fff; }

  /* caption: bar penuh di dasar layar */
  .subtitle { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    text-align: center; padding: 1.1vh 6vw; max-height: 20vh; overflow: auto;
    font-size: clamp(15px, 2.05vh, 22px); pointer-events: none; }

  .tombol-kembali { position: fixed; top: 18px; left: 18px; z-index: 66;
    width: auto; background: rgba(255,255,255,.92); border: 1.5px solid #cdd9ea;
    border-radius: 999px; padding: 10px 20px; }

  /* dua tombol layar awal: di dasar layar, di bawah Rani */
  .mulai { bottom: 7vh; }

  /* daftar & kaki tidak dipakai di layar lebar */
  .panel-daftar, .kaki { display: none; }
}

/* ================================================================
   LAYAR SEMPIT (<1024px) — gaya daftar
   ================================================================ */
@media (max-width: 1023px) {
  /* menu melingkar & tombol mini hanya untuk layar lebar */
  .radial, .sub-btns { display: none !important; }
  /* zona transparan slide diisi warna latar Rani agar tak tampak sebagai lubang */
  .slide-panel .gambar-slide { background: linear-gradient(100deg,
    var(--rani-bg-terang) 0%, var(--rani-bg) 45%, var(--rani-bg-gelap) 100%); }
  /* tombol kanan-bawah menempel layar; caption di layar sempit ikut mengalir
     di bawah video sehingga tidak pernah menutupi tombol. Disusun mendatar agar
     tidak menimpa terlalu banyak isi daftar di belakangnya. */
  .kendali { bottom: 14px; flex-direction: row; }
  .tombol-bulat { width: 48px; height: 48px; }
  .panel-daftar { padding-bottom: 76px; }
  /* caption dibatasi tingginya (bisa digulung di dalamnya) supaya daftar topik
     tetap terlihat tanpa menggulung jauh, dan tombol kanan-bawah tidak duduk
     di atas tulisan caption */
  .subtitle { max-height: 34vh; overflow-y: auto; }
  /* dua tombol layar awal: tepat di bawah video Rani */
  .mulai { top: calc(var(--rani-rasio) + 22px); }
}

/* ================================================================
   HALAMAN VERSI TEKS (teks.html)
   ================================================================ */
.halaman-teks { background: #fff; }
.halaman-teks .bar-atas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #dde5ef;
  position: sticky; top: 0; z-index: 70;
}
.halaman-teks .merek { display: flex; align-items: center; gap: 10px; min-height: 44px;
  text-decoration: none; color: inherit; }
.halaman-teks .merek img { height: 38px; width: auto; }
.halaman-teks .merek-teks { display: flex; flex-direction: column; line-height: 1.15; }
.halaman-teks .merek-teks b { font-size: 1.05rem; color: var(--pu-blue-deep); }
.halaman-teks .merek-teks small { font-size: .78rem; color: var(--teks-lembut); }
.halaman-teks .tombol-kendali {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  font-size: .95rem; font-weight: 600; color: var(--pu-blue-dark);
  background: #fff; border: 1.5px solid #cdd9ea; border-radius: 999px; text-decoration: none;
}
.artikel { max-width: 760px; margin: 0 auto; padding: 24px 18px 8px; }
.artikel h1 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--pu-blue-deep); margin-bottom: 14px; }
.artikel .pengantar { margin-bottom: 12px; color: var(--teks); }
.artikel .daftar-isi { background: #f4f8fd; border: 1.5px solid #dbe4ef; border-radius: var(--radius);
  padding: 16px 20px; margin: 20px 0 28px; }
.artikel .daftar-isi h2 { font-size: 1rem; color: var(--pu-blue-deep); margin-bottom: 8px; }
.artikel .daftar-isi ol { padding-left: 20px; }
.artikel .daftar-isi li { margin: 4px 0; }
.artikel .bagian { margin-bottom: 34px; }
.artikel h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--pu-blue-deep);
  border-bottom: 3px solid var(--pu-yellow); padding-bottom: 6px; margin: 26px 0 12px; }
.artikel h3 { font-size: 1.06rem; color: var(--pu-blue-dark); margin: 20px 0 6px; }
.artikel p { margin-bottom: 8px; }
.artikel .klip { font-size: .88rem; }
.artikel a { color: var(--pu-blue); }
.halaman-teks .kaki { max-width: 760px; margin: 0 auto; padding-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}