:root{
  --tinta:#12293d; --tinta2:#5b7387; --aksen:#0e6f6b; --aksen2:#15a09a; --emas:#b0781f;
  --merah:#c0392b; --hijau:#1e7d4f; --biru:#1b5e86; --garis:#dfe7ed; --latar:#eef3f6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--latar); color:var(--tinta); min-height:100vh; display:flex; flex-direction:column;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:14.5px; line-height:1.55}
a{color:var(--aksen); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p,ul{margin:0}
ul{padding-left:20px}

.bar{background:linear-gradient(120deg,#0c2135,#123449 55%,#0e6f6b); color:#fff; box-shadow:0 2px 14px rgba(12,33,53,.25)}
.bar-dalam{max-width:1180px; margin:0 auto; padding:0 18px; min-height:62px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.merek{display:flex; align-items:center; gap:10px; color:#fff}
.merek:hover{text-decoration:none}
.merek-logo{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-weight:800}
.merek-teks{font-weight:600}
.merek-teks b{color:#7fe3dd}
.menu{display:flex; gap:6px; flex-wrap:wrap; margin-right:auto}
.menu a{color:#dbe9f2; padding:8px 11px; border-radius:8px; font-size:13.5px; font-weight:600}
.menu a:hover{background:rgba(255,255,255,.12); text-decoration:none}
.menu a.aktif{background:rgba(255,255,255,.2)}
.bar-kanan{display:flex; align-items:center; gap:10px; margin-left:auto}
.siapa{font-size:13px; line-height:1.2; text-align:right}
.siapa small{display:block; opacity:.75; font-size:11px}
.cek-verif{background:#15a09a; color:#fff; border-radius:999px; padding:1px 6px; font-size:11px; font-weight:800}

.isi{flex:1; width:100%; margin:0 auto; padding:26px 18px 50px}
.isi.sedang{max-width:900px}
.isi.lebar{max-width:1180px}
.isi.sempit{max-width:540px}
.judul-halaman{font-size:24px; letter-spacing:-.4px; margin-bottom:18px}
.kartu{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:20px; margin-bottom:18px}
.kartu > h2{font-size:15px; margin:-4px 0 14px; color:var(--aksen)}
.kaki{background:#0d1f30; color:#9fb6c6; font-size:12.5px}
.kaki-dalam{max-width:1180px; margin:0 auto; padding:16px 18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.garis-kecil{border-top:1px dashed var(--garis); margin:14px 0}

.tombol{display:inline-block; border:1px solid var(--garis); background:#fff; color:var(--tinta); border-radius:9px;
  padding:9px 15px; font-weight:700; font-size:13.5px; cursor:pointer; text-align:center; font-family:inherit}
.tombol:hover{border-color:var(--aksen2); text-decoration:none}
.tombol.utama{background:var(--aksen); border-color:var(--aksen); color:#fff}
.tombol.utama:hover{background:#0b5c58}
.tombol.putih{background:#fff; border-color:#fff; color:#0c2135}
.tombol.kecil{padding:6px 11px; font-size:12.5px}
.tombol[disabled]{opacity:.5; cursor:not-allowed}
.baris-tombol{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; align-items:center}

.bidang{margin-bottom:13px}
.bidang label{display:block; font-size:12.5px; font-weight:700; color:var(--tinta2); margin-bottom:5px}
.bidang input[type=text],.bidang input[type=email],.bidang input[type=password],.bidang input[type=number],
.bidang input[type=date],.bidang input[type=file],.bidang select,.bidang textarea{
  width:100%; border:1px solid var(--garis); border-radius:9px; padding:9px 11px; background:#fbfdfe;
  font-family:inherit; font-size:14px; color:inherit}
.bidang textarea{resize:vertical}
.bidang input:focus,.bidang select:focus,.bidang textarea:focus{outline:none;border-color:var(--aksen2);box-shadow:0 0 0 3px rgba(21,160,154,.15);background:#fff}
.bantu{font-size:11.5px; color:var(--tinta2); margin-top:4px}
.baris2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.baris3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.baris4{display:grid; grid-template-columns:1fr 2fr 1.2fr 1fr; gap:8px; margin-bottom:8px}
.cek{display:flex; gap:9px; align-items:flex-start; font-size:13px}
.jebakan{position:absolute; left:-9999px}
.ulang{border-left:3px solid var(--garis); padding-left:12px; margin-bottom:8px}

.tabel{width:100%; border-collapse:collapse; font-size:13.5px}
.tabel th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--tinta2);
  border-bottom:2px solid var(--garis); padding:9px 8px}
.tabel td{border-bottom:1px solid var(--garis); padding:9px 8px; vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel .angka{text-align:right; white-space:nowrap}
.kosong{padding:22px; text-align:center; color:var(--tinta2); font-style:italic; border:1px dashed var(--garis); border-radius:12px}

.lencana{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700}
.lencana.abu{background:#eef2f5; color:var(--tinta2)}
.lencana.hijau{background:#e2f4ea; color:var(--hijau)}
.lencana.kuning{background:#fbf0dc; color:var(--emas)}
.lencana.merah{background:#fae7e4; color:var(--merah)}
.lencana.biru{background:#e4eff7; color:var(--biru)}

.pesan{padding:11px 14px; border-radius:10px; margin-bottom:12px; font-size:13.5px; font-weight:600}
.pesan.sukses{background:#e2f4ea; color:var(--hijau); border:1px solid #bfe3ce}
.pesan.galat{background:#fae7e4; color:var(--merah); border:1px solid #edc9c3}
.pesan.info{background:#e4eff7; color:var(--biru); border:1px solid #c3dcef}
.pesan.demo{background:#fbf0dc; color:#7a5312; border:1px dashed var(--emas)}

.stat{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.stat > div{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:16px}
.stat b{display:block; font-size:22px; letter-spacing:-.6px}
.stat span{font-size:12px; color:var(--tinta2)}
.stat .hijau b{color:var(--hijau)}
.stat .kuning b{color:var(--emas)}

.sorot{background:linear-gradient(120deg,#0c2135,#123449 55%,#0e6f6b); color:#fff; border-radius:18px;
  padding:34px; margin-bottom:20px; display:grid; grid-template-columns:1.08fr .92fr; gap:30px; align-items:center}
.sorot h1{font-size:29px; letter-spacing:-.8px; margin-bottom:10px}
.sorot p{color:#cfe3ee; max-width:600px}
.sorot .tombol{margin-top:16px}
.sorot-gambar img{width:100%; height:auto; display:block; border-radius:16px}
.kat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kat{display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 10px;
  border:1px solid var(--garis); border-radius:14px; background:#fbfdfe; color:var(--tinta); text-align:center}
.kat:hover{border-color:var(--aksen2); background:#fff; text-decoration:none; transform:translateY(-2px)}
.kat svg{width:26px; height:26px; fill:none; stroke:var(--aksen); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kat b{font-size:12.5px}
.lowongan .lw-atas{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lw-logo{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px}
.langkah{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.langkah > div{border:1px solid var(--garis); border-radius:12px; padding:14px; background:#fbfdfe}
.langkah b{display:block; font-size:13.5px; margin-bottom:4px}
.langkah span{font-size:12.5px; color:var(--tinta2)}

.grid-lowongan{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.lowongan{border:1px solid var(--garis); border-radius:14px; padding:16px; background:#fbfdfe; display:flex; flex-direction:column}
.lowongan h3{font-size:16px; margin:8px 0 3px}
.lw-perusahaan{font-size:13.5px; font-weight:700; color:var(--aksen)}
.lw-info{font-size:12.5px; color:var(--tinta2); margin-top:5px}
.lw-gaji{font-size:13px; font-weight:700; color:var(--hijau); margin-top:5px}
.lowongan .tombol{margin-top:12px; align-self:flex-start}

.pratinjau{background:#fff; border:1px solid var(--garis); border-radius:12px; padding:26px; max-width:210mm; margin:0 auto}
.pratinjau h2{font-size:19px; border-bottom:2px solid var(--tinta); padding-bottom:6px; margin-bottom:12px}
.pratinjau h3{font-size:14px; margin:14px 0 5px; color:var(--aksen)}
.pratinjau table{width:100%; border-collapse:collapse; font-size:13.5px}
.pratinjau td{padding:3px 0; vertical-align:top}

/* ---------- ruang video wawancara ---------- */
.ruang-video{background:#0c2135; border-radius:14px; overflow:hidden; margin-bottom:16px}
.ruang-video iframe{display:block; width:100%; height:74vh; min-height:420px; border:0}

/* ---------- dashboard admin ---------- */
.dua-panel{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.dua-panel > .kartu{margin-bottom:18px}
.grafik{display:flex; align-items:flex-end; gap:10px; height:170px; padding:6px 0 0}
.batang{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.batang span{font-size:12px; font-weight:700; color:var(--aksen); margin-bottom:4px}
.batang i{width:70%; max-width:46px; display:block; border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#15a09a,#0e6f6b); min-height:4px}
.batang small{font-size:11px; color:var(--tinta2); margin-top:6px}
.dist{display:flex; flex-direction:column; gap:10px}
.dist > div{display:grid; grid-template-columns:96px 1fr 34px; gap:10px; align-items:center; font-size:12.5px}
.dist .jalur{background:#eef3f6; border-radius:6px; height:10px; overflow:hidden; display:block}
.dist .jalur i{display:block; height:100%; border-radius:6px}
.dist b{text-align:right}
.stat small{font-size:12px; font-weight:400}

/* ---------- bagian landing page ---------- */
.tiga{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.tiga > div{border:1px solid var(--garis); border-radius:12px; padding:15px; background:#fbfdfe}
.tiga b{display:block; font-size:13.5px; margin-bottom:5px}
.tiga span{font-size:12.5px; color:var(--tinta2); line-height:1.5}

.fitur-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.fitur{border:1px solid var(--garis); border-radius:14px; padding:16px; background:#fbfdfe}
.fitur svg{width:26px; height:26px; fill:none; stroke:var(--aksen); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px}
.fitur b{display:block; font-size:14px; margin-bottom:5px}
.fitur span{font-size:12.5px; color:var(--tinta2); line-height:1.5}

.dua-pihak{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pihak{border:1px solid var(--garis); border-radius:14px; padding:18px; background:#fbfdfe}
.pihak h3{font-size:16px; margin-bottom:10px; color:var(--aksen)}
.pihak ul{margin:0 0 14px; padding-left:18px; font-size:13.5px; color:var(--tinta2)}
.pihak li{margin-bottom:6px}

.kotak-demo{border:1px dashed var(--aksen2); background:#f2fafa; border-radius:12px; padding:16px}
.kotak-demo b{display:block; margin-bottom:6px}
.kotak-demo p{font-size:13px; color:var(--tinta2)}
.kotak-demo ul{margin:10px 0 0; padding-left:18px; font-size:13px; color:var(--tinta2)}
.kotak-demo li{margin-bottom:6px}
.kotak-demo code{background:#e6f4f3; color:#0b5c58; padding:2px 7px; border-radius:6px; font-size:13px; font-weight:700}

.faq-daftar{display:flex; flex-direction:column; gap:10px}
.faq{border:1px solid var(--garis); border-radius:12px; background:#fbfdfe; overflow:hidden}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer;
  padding:14px 16px; font-weight:700; font-size:14px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--tinta2);
  stroke-width:2; stroke-linecap:round; transition:transform .2s}
.faq[open] summary{color:var(--aksen)}
.faq[open] summary svg{transform:rotate(180deg); stroke:var(--aksen)}
.faq p{padding:0 16px 15px; font-size:13.5px; color:var(--tinta2)}

.ajakan{background:linear-gradient(120deg,#0c2135,#123449 55%,#0e6f6b); color:#fff; border-radius:18px;
  padding:34px; text-align:center; margin-bottom:18px}
.ajakan h2{font-size:24px; letter-spacing:-.6px; margin-bottom:8px}
.ajakan p{color:#cfe3ee; max-width:620px; margin:0 auto}
.ajakan .baris-tombol{justify-content:center}

@media print{
  .bar,.kaki,.no-cetak{display:none !important}
  .isi{padding:0; max-width:none}
  .judul-halaman{display:none}
  .pratinjau{border:0; padding:0}
  body{background:#fff}
}
@media (max-width:900px){
  .stat{grid-template-columns:repeat(2,1fr)}
  .langkah{grid-template-columns:repeat(2,1fr)}
  .grid-lowongan{grid-template-columns:repeat(2,1fr)}
  .sorot{grid-template-columns:1fr; gap:22px}
  .kat-grid{grid-template-columns:repeat(4,1fr)}
  .tiga,.fitur-grid{grid-template-columns:repeat(2,1fr)}
  .dua-pihak,.dua-panel{grid-template-columns:1fr}
}
@media (max-width:620px){
  .kat-grid{grid-template-columns:repeat(2,1fr)}
  .tiga,.fitur-grid{grid-template-columns:1fr}
  .ajakan{padding:24px}
  .ajakan h2{font-size:20px}
}
@media (max-width:700px){
  .baris2,.baris3,.baris4,.langkah,.grid-lowongan{grid-template-columns:1fr}
  .judul-halaman{font-size:20px}
  .sorot{padding:22px}
  .sorot h1{font-size:22px}
  .tabel{font-size:12.5px}
  .tabel th,.tabel td{padding:7px 5px}
}