/* JAM TERBANG — wizard kursus (kandidat 5 Okt 2026). Tema gelap aviasi, aksen cyan,
   karakter papan split-flap kuning gading, hijau merek CCS. Tanpa build, tanpa font eksternal. */
:root{
  --page:#05070a; --page2:#0a0e14; --panel:#0d1117; --panel2:#111823; --garis:rgba(255,255,255,.08);
  --ink:#eae3d0; --mut:#9a9483; --char:#f3e7c4; --cyan:#22d3ee; --cyan2:#67e8f9; --cyan-redup:rgba(34,211,238,.14);
  --hijau:#0aa353; --hijau2:#41e07a; --amber:#ffcf4a; --merah:#ff7a6b; --oranye:#ff9a2e;
  --r:14px; --r2:10px; --bayang:0 18px 40px -18px rgba(0,0,0,.8);
  --mono:ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#0d2230 0,transparent 60%),linear-gradient(180deg,var(--page),var(--page2));
  color:var(--ink);font:16px/1.6 var(--sans);min-height:100vh;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
a{color:var(--cyan2)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#000;padding:8px;z-index:9}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Bar atas */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px max(16px,env(safe-area-inset-left));background:rgba(5,7,10,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand-ikon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cyan-redup);color:var(--cyan);flex:none}
.brand-teks{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-teks b{font-family:var(--mono);letter-spacing:.14em;color:var(--char);font-size:15px}
.brand-teks small{color:var(--mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-kanan{display:flex;align-items:center;gap:8px;flex:none}
.btn-kecil{border:1px solid var(--garis);background:var(--panel);border-radius:999px;padding:7px 12px;font-size:13px;min-height:36px}
.pill{font-family:var(--mono);font-size:12px;color:var(--cyan2);border:1px solid rgba(34,211,238,.35);border-radius:999px;padding:5px 10px}

main{max-width:880px;margin:0 auto;padding:18px 16px 24px}
.kecil{font-size:13px;color:var(--mut)}

/* Papan split-flap */
.flap{display:inline-flex;gap:3px;flex-wrap:wrap}
.flap span{font-family:var(--mono);font-weight:700;background:linear-gradient(180deg,#1b1b19 50%,#121210 50%);color:var(--char);
  border-radius:4px;padding:2px 6px;min-width:1.2em;text-align:center;box-shadow:inset 0 -1px 0 rgba(0,0,0,.7);font-size:clamp(14px,3.6vw,20px)}

/* Kartu umum */
.kartu{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--garis);border-radius:var(--r);padding:18px;box-shadow:var(--bayang)}
.kartu + .kartu{margin-top:14px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
h1{font-size:clamp(26px,6vw,38px);line-height:1.15;margin:.3em 0 .35em}
h2{font-size:clamp(20px,4.6vw,26px);line-height:1.25;margin:.2em 0 .5em}
h3{font-size:17px;margin:1.1em 0 .4em}

/* Beranda */
.hero{padding:22px 18px}
.hero p.lead{font-size:17px;color:#d7d0bd;margin:.2em 0 1em}
.fakta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.fakta div{background:rgba(255,255,255,.03);border:1px solid var(--garis);border-radius:var(--r2);padding:10px}
.fakta b{display:block;font-family:var(--mono);color:var(--char);font-size:18px}
.fakta span{font-size:12.5px;color:var(--mut)}

/* Tombol besar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 18px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:16px;text-decoration:none}
.btn-utama{background:linear-gradient(180deg,#0bb85c,#08924a);color:#fff;box-shadow:0 10px 24px -10px rgba(10,163,83,.8)}
.btn-cyan{background:var(--cyan-redup);border-color:rgba(34,211,238,.45);color:var(--cyan2)}
.btn-hantu{background:transparent;border-color:var(--garis);color:var(--ink)}
.btn-peringatan{background:rgba(255,154,46,.12);border-color:rgba(255,154,46,.5);color:#ffc078}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Peta rute */
.peta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rute-kartu{position:relative;text-align:left;width:100%;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--garis);
  border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.rute-kartu:hover{border-color:rgba(34,211,238,.45)}
.rute-kartu .no{font-family:var(--mono);color:var(--char);font-size:13px;letter-spacing:.1em}
.rute-kartu b{font-size:17px;line-height:1.25}
.rute-kartu .meta{font-size:12.5px;color:var(--mut)}
.rute-kartu .tag{position:absolute;top:12px;right:12px;font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:999px;border:1px solid var(--garis);color:var(--mut)}
.tag.gratis{color:var(--hijau2);border-color:rgba(65,224,122,.35)}
.tag.biaya{color:var(--amber);border-color:rgba(255,207,74,.35)}
.batang{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-top:auto}
.batang i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--hijau2));border-radius:99px}

/* Daftar tahap dalam rute */
.daftar-tahap{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.daftar-tahap button{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:rgba(255,255,255,.025);border:1px solid var(--garis);
  border-radius:var(--r2);padding:10px 12px;min-height:48px}
.st{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;flex:none;border:1px solid var(--garis);font-family:var(--mono)}
.st.lolos{background:rgba(65,224,122,.16);border-color:rgba(65,224,122,.5);color:var(--hijau2)}
.st.bukti{background:var(--cyan-redup);border-color:rgba(34,211,238,.5);color:var(--cyan2)}
.st.dilewati{color:var(--amber);border-color:rgba(255,207,74,.4)}
.st.jalan{border-color:var(--cyan);color:var(--cyan)}
.daftar-tahap .mnt{margin-left:auto;font-size:12px;color:var(--mut);white-space:nowrap}

/* Kartu tahap */
.jejak{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.titik{display:flex;gap:5px;flex-wrap:wrap}
.titik i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
.titik i.lolos{background:var(--hijau2)}.titik i.bukti{background:var(--cyan)}.titik i.dilewati{background:var(--amber)}
.titik i.ini{outline:2px solid var(--char);outline-offset:1px}
.kartu-tahap.bersuara{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 3px rgba(34,211,238,.12),var(--bayang)}
.isi p{margin:.6em 0}
.isi ul,.isi ol{padding-left:1.3em;margin:.5em 0}
.isi li{margin:.35em 0}
.isi code{font-family:var(--mono);font-size:.92em;background:rgba(255,255,255,.07);padding:.08em .35em;border-radius:5px;color:#ffe9b3;word-break:break-word}
.isi strong{color:#fff}
.kode{position:relative;margin:.8em 0;border:1px solid rgba(34,211,238,.25);border-radius:var(--r2);background:#070b10;overflow:hidden}
.kode-kepala{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;background:rgba(34,211,238,.07);font-family:var(--mono);font-size:12px;color:var(--cyan2)}
.kode pre{margin:0;padding:12px;overflow:auto;font:13.5px/1.5 var(--mono);color:#e6f6ff;white-space:pre;-webkit-overflow-scrolling:touch}
.salin{border:1px solid rgba(34,211,238,.45);background:transparent;color:var(--cyan2);border-radius:8px;padding:6px 12px;font-size:13px;min-height:34px}
.salin.ok{color:var(--hijau2);border-color:rgba(65,224,122,.5)}

.blok-cek{margin-top:16px;border-top:1px dashed var(--garis);padding-top:12px}
.cek{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-radius:8px;min-height:44px}
.cek input{width:22px;height:22px;margin-top:2px;accent-color:var(--hijau);flex:none}
.bukti-box textarea{width:100%;min-height:120px;resize:vertical;background:#070b10;color:var(--ink);border:1px solid var(--garis);border-radius:var(--r2);padding:10px;font:14px/1.5 var(--mono)}
.hasil-cek{margin-top:8px;padding:10px 12px;border-radius:var(--r2);font-size:14px}
.hasil-cek.ok{background:rgba(65,224,122,.1);border:1px solid rgba(65,224,122,.4)}
.hasil-cek.kurang{background:rgba(255,207,74,.08);border:1px solid rgba(255,207,74,.35)}
.hasil-cek.bahaya{background:rgba(255,122,107,.12);border:1px solid rgba(255,122,107,.55)}

details.faq{border:1px solid var(--garis);border-radius:var(--r2);padding:0 12px;margin:8px 0;background:rgba(255,255,255,.02)}
details.faq summary{cursor:pointer;padding:11px 0;font-weight:600;min-height:44px;list-style-position:outside}
details.faq[open]{padding-bottom:10px}

/* Navigasi tahap: tombol besar, lengket di bawah pada HP */
.navtahap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.navtahap .btn{width:100%}
.navtahap .lanjut{grid-column:1/-1}
@media(min-width:700px){.navtahap{grid-template-columns:auto auto auto 1fr}.navtahap .lanjut{grid-column:auto}}

/* Pemutar */
.pemutar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(9,13,19,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(34,211,238,.3);
  padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom))}
.pemutar-dalam{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:8px}
.pm-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(34,211,238,.5);background:var(--cyan-redup);color:var(--cyan2);font-size:18px;flex:none}
.pm-main{width:52px;height:52px;background:var(--cyan);color:#001318;border:0;font-size:20px}
.pm-info{flex:1;min-width:0}
.pm-judul{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-bar{height:5px;background:rgba(255,255,255,.1);border-radius:9px;margin-top:6px;overflow:hidden}
.pm-isi{height:100%;width:0;background:var(--cyan)}
.pm-kec{display:flex;border:1px solid var(--garis);border-radius:10px;overflow:hidden;flex:none}
.pm-kec button{background:transparent;border:0;padding:0 8px;min-height:40px;font-size:12.5px;color:var(--mut)}
.pm-kec button.on{background:var(--cyan-redup);color:var(--cyan2)}
.pm-cadangan{max-width:880px;margin:6px auto 0;font-size:13px;color:var(--mut);max-height:30vh;overflow:auto}
.pm-cadangan details summary{cursor:pointer;color:var(--cyan2)}
@media(max-width:420px){.pm-kec button{padding:0 6px;font-size:12px}.pm-btn{width:42px;height:42px}}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.66);padding:16px;overflow:auto}
.modal[hidden]{display:none}
.modal-kotak{width:100%;max-width:520px;background:linear-gradient(180deg,#101822,#0b1017);border:1px solid rgba(34,211,238,.35);border-radius:18px;padding:20px;box-shadow:0 30px 80px -20px #000;max-height:calc(100dvh - 32px);overflow:auto}
.modal-kepala p{margin:.2em 0 .8em;color:#d4cdb9}
.tiket{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--char);border:1px dashed rgba(243,231,196,.4);border-radius:6px;padding:3px 8px}
.fld{display:block;margin:10px 0;border:0;padding:0}
.fld span,.fld legend{display:block;font-size:13.5px;color:#cfc8b4;margin-bottom:5px}
.fld input{width:100%;min-height:48px;border-radius:10px;border:1px solid var(--garis);background:#070b10;color:var(--ink);padding:10px 12px;font-size:16px}
.fld input:focus{border-color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--garis);border-radius:999px;padding:8px 12px;min-height:42px;font-size:14px;cursor:pointer;background:rgba(255,255,255,.02)}
.chips input{accent-color:var(--cyan)}
.chips label:has(input:checked){border-color:var(--cyan);background:var(--cyan-redup);color:var(--cyan2)}
.setuju{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#cfc8b4;margin:12px 0}
.setuju input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--hijau)}
.modal-aksi{display:grid;gap:8px;margin-top:10px}
.gb-galat{color:var(--merah);font-size:14px}
.hp-trap{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;background:#0e1a24;border:1px solid rgba(34,211,238,.45);
  border-radius:12px;padding:10px 14px;font-size:14px;max-width:calc(100vw - 32px)}
.noscript{padding:16px}
@media(prefers-reduced-motion:no-preference){.kartu,.rute-kartu{transition:border-color .2s}}
@media(max-width:560px){.fakta{grid-template-columns:1fr 1fr 1fr}.fakta b{font-size:16px}.kartu{padding:14px}.brand-teks small{display:none}}

/* Gelembung widget Cicis dinaikkan di atas pemutar (kalau tidak, menutupi tombol kecepatan di HP) */
body.ada-pemutar .ccsc-launch{bottom:calc(86px + env(safe-area-inset-bottom)) !important}
body.ada-pemutar .ccsc-panel{bottom:calc(86px + env(safe-area-inset-bottom)) !important;max-height:calc(100dvh - 110px) !important}
@media(max-width:480px){body.ada-pemutar .ccsc-panel{bottom:0 !important;max-height:none !important}}
.chips input{width:18px;height:18px;min-height:0;margin:0;flex:none}
.kode pre code{background:none;padding:0;border-radius:0;color:inherit;font-size:inherit;word-break:normal}
/* modal & toast di atas widget Cicis (z-index widget 99998-99999) */
.modal{z-index:100000}.toast{z-index:100001}

/* 13 Okt: gerbang "coba dulu, daftar kemudian" — ramah HP / browser in-app Instagram */
.gb-manfaat { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 8px; }
.gb-manfaat li { position: relative; padding-left: 28px; line-height: 1.4; }
.gb-manfaat li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #16c784; color: #04130b; }
.gb-alasan { margin-top: 6px; opacity: .85; }
#gerbang .fld input { font-size: 16px; min-height: 48px; }            /* 16px: iOS tidak zoom saat fokus */
#gerbang .chips label { min-height: 44px; display: inline-flex; align-items: center; }
#gerbang .setuju { min-height: 44px; }
#gerbang .setuju input { width: 22px; height: 22px; flex: none; }
#gerbang .modal-aksi .btn { min-height: 52px; font-size: 17px; }
.coba-dulu { margin-top: 8px; text-align: center; opacity: .8; }
/* 13 Okt: gelembung sapaan widget Cicis ("Pakai HP? Mulai dari kursus gratis…") muncul ±3,8 dtk setelah buka
   dan MENUTUPI tombol utama (Lanjut / Mulai) di layar HP. Di halaman kursus sapaan itu tak berguna -> sembunyikan.
   Tombol chat Cicis tetap tampil. Hanya berlaku di /kursus/ (widget situs lain tidak berubah). */
.ccsc-sig { display: none !important; }