/* Panduan Persyaratan Paspor — gaya khusus halaman.
 *
 * Dimuat SETELAH portal.css dan hanya menambah; token warna, latar aurora,
 * preloader, dan kaki halaman semuanya diwarisi dari sana agar halaman ini
 * terasa satu tubuh dengan portal, bukan halaman tempelan.
 */

/* ============================================================
   KERANGKA HALAMAN
   ============================================================ */
/* Halaman ini panjang, jadi isinya mengalir dari atas — tidak dipusatkan
   vertikal seperti beranda yang kartunya sedikit. */
.shell-doc{max-width:920px;display:block}

.back{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:clamp(18px,4vw,28px);
  padding:9px 16px 9px 12px;border-radius:99px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.back svg{width:16px;height:16px}
.back:hover{color:var(--gold-bright);border-color:var(--line-strong);transform:translateX(-3px)}

.head-doc{margin-bottom:clamp(20px,4vw,32px)}
.crest-sm img{height:clamp(78px,14vw,120px)}
.head-doc h1{font-size:clamp(1.6rem,5.4vw,2.6rem)}

/* ---------- Navigasi bagian ---------- */
.jump{
  position:sticky;top:0;z-index:20;
  display:flex;gap:6px;overflow-x:auto;
  margin:0 calc(-1 * clamp(16px,4vw,28px)) clamp(28px,5vw,44px);
  padding:10px clamp(16px,4vw,28px);
  scrollbar-width:none;
  background:linear-gradient(180deg,rgba(8,11,18,.94),rgba(8,11,18,.72) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.jump::-webkit-scrollbar{display:none}
.jump a{
  flex:0 0 auto;padding:8px 15px;border-radius:99px;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--faint);
  border:1px solid transparent;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.jump a:hover{color:var(--ink)}
.jump a.is-here{color:var(--gold-bright);background:rgba(217,180,91,.10);border-color:rgba(217,180,91,.30)}

/* ============================================================
   BAGIAN
   ============================================================ */
.sec{margin-bottom:clamp(44px,8vw,76px);scroll-margin-top:76px}
.sec-head{margin-bottom:clamp(18px,3.5vw,26px)}
.sec-num{
  display:block;margin-bottom:6px;
  font-size:.7rem;font-weight:800;letter-spacing:.22em;color:var(--gold);
}
.sec-head h2{
  margin:0;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 35%,#c3ccd8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-head p{margin:6px 0 0;font-size:.88rem;font-weight:300;color:var(--muted)}

/* Kartu kaca — dipakai ulang oleh hampir semua blok di halaman ini. */
.panel,.quiz,.warn,.note,.fees,.cta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* Muncul perlahan saat tergulir ke layar. Kelas .reveal dipasang oleh JS,
   sehingga tanpa JS tidak ada blok yang tertinggal transparan. */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* Kartu sederajat muncul berurutan, bukan serempak. */
.step.reveal,.case.reveal,.note.reveal{transition-delay:calc(var(--i,0) * 70ms)}

/* ============================================================
   01 — PROSEDUR
   ============================================================ */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.step{
  position:relative;display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
@media(hover:hover){.step:hover{border-color:var(--line-strong);background:var(--card-hover);transform:translateX(4px)}}
.step-num{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  font-size:.95rem;font-weight:800;color:#1a1206;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  box-shadow:0 6px 16px -6px rgba(217,180,91,.5);
}
.step-body h3{margin:0;font-size:1rem;font-weight:700;color:#fff;line-height:1.35}
.step-body p{margin:4px 0 0;font-size:.88rem;font-weight:300;color:var(--muted);line-height:1.6}
.step-body strong{color:var(--gold-bright);font-weight:700}

/* ============================================================
   02 — DOKUMEN
   ============================================================ */
.cases{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:16px}
@media(min-width:640px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}

.case{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;border-radius:18px;text-align:left;
  font:inherit;color:var(--ink);cursor:pointer;
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .28s var(--ease),background .28s var(--ease),
             border-color .28s var(--ease),box-shadow .28s var(--ease);
}
@media(hover:hover){.case:hover{transform:translateY(-3px);background:var(--card-hover);border-color:var(--line-strong)}}
.case:active{transform:scale(.985)}

.case-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;color:var(--gold);
  background:rgba(217,180,91,.10);border:1px solid rgba(217,180,91,.24);
  transition:color .28s var(--ease),background .28s var(--ease);
}
.case-icon svg{width:22px;height:22px}
.case-text{flex:1 1 auto;min-width:0;display:block}
.case-title{display:block;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.case-sub{display:block;margin-top:2px;font-size:.76rem;font-weight:300;color:var(--faint)}
.case-mark{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:#1a1206;
  background:var(--gold);opacity:0;transform:scale(.5);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.case-mark svg{width:13px;height:13px}

.case[aria-selected="true"]{
  background:var(--card-hover);border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(217,180,91,.22),0 16px 34px -18px rgba(217,180,91,.35);
}
.case[aria-selected="true"] .case-icon{
  color:#1a1206;background:linear-gradient(145deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
  border-color:rgba(255,255,255,.22);
}
.case[aria-selected="true"] .case-mark{opacity:1;transform:none}

/* ---------- Panel daftar dokumen ---------- */
.panel{padding:clamp(18px,3.5vw,26px)}
.panel[hidden]{display:none}
/* Berganti jenis permohonan terasa sebagai pergantian isi, bukan lompatan. */
.panel:not([hidden]){animation:panelIn .34s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-top{margin-bottom:16px}
.panel-title{margin:0;font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.panel-hint{margin:8px 0 0;font-size:.83rem;font-weight:300;color:var(--muted);line-height:1.6}

.choice{
  display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;
}
.choice-BELUM{color:#8fe0c0;background:rgba(80,200,160,.12);border:1px solid rgba(80,200,160,.34)}
.choice-SUDAH{color:var(--gold-bright);background:rgba(217,180,91,.12);border:1px solid rgba(217,180,91,.36)}

/* ---------- Pemilih varian (tahun terbit paspor lama) ---------- */
.variants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.variant{
  flex:1 1 220px;padding:11px 14px;border-radius:14px;
  font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);
  text-align:center;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.variant:hover{color:var(--ink)}
.variant[aria-pressed="true"]{
  color:var(--gold-bright);background:rgba(217,180,91,.12);border-color:rgba(217,180,91,.38);
}

.checklist[hidden]{display:none}
.checklist-cap{
  margin:0 0 12px;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}

/* ---------- Kemajuan ---------- */
.progress{margin-bottom:16px}
.progress-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.progress-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:width .45s var(--ease);
}
.progress-text{
  margin:8px 0 0;font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--faint);transition:color .3s var(--ease);
}
.checklist.is-done .progress-text{color:var(--gold-bright)}

/* ---------- Baris dokumen ---------- */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.doc-label{
  position:relative;display:flex;gap:13px;align-items:flex-start;
  padding:13px 15px;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.doc-label:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
/* Kotak centang asli disembunyikan namun tetap dapat difokus papan tik. */
.doc-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.doc-box{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:7px;
  display:grid;place-items:center;color:transparent;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.22);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.doc-box svg{width:13px;height:13px}
.doc-check:focus-visible + .doc-box{outline:2px solid var(--gold);outline-offset:2px}
.doc-check:checked + .doc-box{
  color:#1a1206;border-color:transparent;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
}

.doc-body{flex:1 1 auto;min-width:0}
.doc-name{display:block;font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.5;
  transition:color .25s var(--ease)}
.doc-check:checked ~ .doc-body .doc-name{color:var(--faint);text-decoration:line-through;
  text-decoration-color:rgba(217,180,91,.6)}
.doc-note{display:block;margin-top:4px;font-size:.75rem;font-weight:300;color:var(--faint);line-height:1.5}
.doc-options{margin:9px 0 0;padding:0 0 0 4px;list-style:none;display:grid;gap:6px}
.doc-options li{
  position:relative;padding-left:16px;
  font-size:.76rem;font-weight:300;color:var(--muted);line-height:1.5;
}
.doc-options li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:rgba(217,180,91,.55);
}

.done-note{
  display:none;margin:14px 0 0;padding:11px 14px;border-radius:13px;
  font-size:.8rem;font-weight:600;color:#8fe0c0;
  background:rgba(80,200,160,.09);border:1px solid rgba(80,200,160,.28);
}
.checklist.is-done .done-note{display:block}

/* ---------- Tombol bantu panel ---------- */
.panel-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tool{
  padding:9px 15px;border-radius:99px;
  font:inherit;font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tool:hover{color:var(--gold-bright);border-color:var(--line-strong)}

/* ============================================================
   03 — BELUM / SUDAH
   ============================================================ */
.quiz{padding:clamp(18px,3.5vw,26px);margin-bottom:14px}
.quiz-q{margin:0 0 16px;font-size:1rem;font-weight:700;color:#fff;line-height:1.45}
.quiz-answers{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:600px){.quiz-answers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiz-btn{
  padding:15px 18px;border-radius:16px;text-align:left;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
@media(hover:hover){.quiz-btn:hover{transform:translateY(-3px);background:var(--card-hover);border-color:var(--line-strong)}}
.quiz-btn[aria-expanded="true"]{background:rgba(217,180,91,.10);border-color:rgba(217,180,91,.4);color:var(--gold-bright)}

.verdict{margin-top:14px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.verdict[hidden]{display:none}
.verdict-lead{margin:0;font-size:.92rem;font-weight:600;color:var(--ink)}
.verdict-list{margin:11px 0 0;padding:0 0 0 4px;list-style:none;display:grid;gap:7px}
.verdict-list li{position:relative;padding-left:18px;font-size:.82rem;font-weight:300;
  color:var(--muted);line-height:1.55}
.verdict-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}

.quiz-again{
  display:none;margin-top:14px;padding:8px 0;
  font:inherit;font-size:.76rem;font-weight:600;color:var(--faint);
  background:none;border:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line);
}
.quiz-again:hover{color:var(--gold-bright)}
/* Tombol ulangi hanya berguna setelah ada jawaban yang dipilih. */
.quiz.is-answered .quiz-again{display:block}

/* ---------- Peringatan ---------- */
.warn{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  background:rgba(220,70,110,.07);border-color:rgba(220,70,110,.30);
}
.warn svg{flex:0 0 auto;width:22px;height:22px;color:#f0708f;margin-top:2px}
.warn p{margin:0;font-size:.85rem;font-weight:600;color:#ffd7e0;line-height:1.6}
.warn cite{display:block;margin-top:6px;font-size:.72rem;font-style:italic;
  font-weight:300;color:rgba(255,215,224,.6)}

/* ============================================================
   04 — BIAYA
   ============================================================ */
.fees{padding:clamp(18px,3.5vw,26px)}
.fee-pick{margin:0 0 10px;padding:0;border:0;display:grid;gap:8px}
.fee-pick legend{
  padding:0 0 10px;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.fee-opt{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.fee-opt:hover{background:rgba(255,255,255,.05)}
.fee-opt input{accent-color:var(--gold);width:17px;height:17px;flex:0 0 auto;margin:0}
.fee-name{flex:1 1 auto;font-size:.88rem;font-weight:600;color:var(--ink)}
.fee-name em{display:block;margin-top:3px;font-size:.72rem;font-weight:300;
  font-style:italic;color:var(--faint)}
.fee-amount{flex:0 0 auto;font-size:.95rem;font-weight:800;color:var(--gold-bright);
  font-variant-numeric:tabular-nums}
.fee-opt:has(input:checked){background:rgba(217,180,91,.09);border-color:rgba(217,180,91,.38)}
.fee-addon{margin-top:8px}

.fee-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);
}
.fee-total span{font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.fee-total output{
  font-size:clamp(1.35rem,5vw,1.8rem);font-weight:800;letter-spacing:-.02em;
  color:#fff;font-variant-numeric:tabular-nums;
}

/* ============================================================
   05 — CATATAN & AJAKAN
   ============================================================ */
.notes{display:grid;gap:12px;margin-bottom:clamp(28px,5vw,40px)}
.note{padding:16px 18px}
.note-label{
  display:inline-block;margin-bottom:9px;padding:3px 11px;border-radius:99px;
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);background:rgba(217,180,91,.12);
  border:1px solid rgba(217,180,91,.32);
}
.note p{margin:0;font-size:.85rem;font-weight:300;color:var(--muted);line-height:1.65}

.cta{padding:clamp(22px,4vw,30px);text-align:center}
.cta p{margin:0 0 16px;font-size:.9rem;font-weight:600;color:var(--ink)}
.cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:99px;
  font-size:.9rem;font-weight:800;color:#1a1206;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
  box-shadow:0 12px 26px -12px rgba(217,180,91,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.cta-btn svg{width:17px;height:17px}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(217,180,91,.7)}
.cta-alt{display:block;margin-top:14px;font-size:.78rem;font-weight:600;color:var(--faint)}
.cta-alt:hover{color:var(--gold-bright)}

/* ============================================================
   CETAK
   Yang dicetak hanya daftar dokumen yang sedang dipilih — pengunjung
   membawanya sebagai daftar periksa di atas kertas, tanpa latar gelap
   yang menghabiskan tinta.
   ============================================================ */
@media print{
  body{background:#fff;color:#000}
  .bg,#preloader,.jump,.back,.panel-tools,.cta,footer,.mido-widget,
  .cases,.sec:not(#dokumen),.progress,.done-note{display:none!important}
  .shell-doc{max-width:none;padding:0}
  .head-doc{margin-bottom:18px}
  .head-doc h1,.sec-head h2{color:#000!important;-webkit-text-fill-color:#000}
  .crest-sm img{height:60px;filter:none}
  .panel,.checklist,.doc-label{background:none!important;border-color:#bbb!important;
    box-shadow:none!important;backdrop-filter:none!important}
  .panel-title,.doc-name{color:#000!important;text-decoration:none!important}
  .panel-hint,.doc-note,.doc-options li,.checklist-cap{color:#333!important}
  .doc-box{border-color:#555!important;background:none!important;color:transparent!important}
  .choice{border-color:#555!important;color:#000!important;background:none!important}
}

/* ============================================================
   AKSESIBILITAS
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}