/* =========================================================
   Sistem desain - Broadcast WhatsApp LP3I College Banda Aceh
   ========================================================= */
:root{
  --navy-900:#0A2342; --navy-800:#0F2E56; --navy-700:#123A6B; --navy-500:#2160AE;
  --teal:#0E7C86; --hijau:#25D366; --hijau-700:#128C4A;
  --emas:#C08A1E; --merah:#C6382C; --ungu:#6B46C1;
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --garis:#E4EBF3; --garis-2:#D5E0EC;
  --teks:#14212C; --teks-2:#3C5061; --redup:#7286969;
  --redup:#6F8497;
  --r-l:16px; --r-m:11px; --r-s:8px;
  --bayang-s:0 1px 2px rgba(16,38,64,.06), 0 1px 3px rgba(16,38,64,.05);
  --bayang-m:0 4px 12px rgba(16,38,64,.07), 0 1px 3px rgba(16,38,64,.05);
  --bayang-l:0 18px 48px rgba(10,35,66,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--teks);font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:24px;font-weight:750;letter-spacing:-.4px;line-height:1.25}
h2{font-size:19px;font-weight:700;letter-spacing:-.2px}
h3{font-size:15px;font-weight:700;letter-spacing:-.1px}
a{color:var(--navy-500);text-decoration:none}
a:hover{text-decoration:underline}
.ikon{flex-shrink:0;vertical-align:-3px}
code{background:#E9F0F8;color:var(--navy-700);padding:1.5px 6px;border-radius:5px;font-size:12.5px;font-family:ui-monospace,Consolas,monospace}
kbd{background:#fff;border:1px solid var(--garis-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--teks-2)}
.mono{font-family:ui-monospace,Consolas,monospace}
.redup{color:var(--redup)}
.kecil{font-size:12.2px;color:var(--redup);line-height:1.5}

/* ---------------- topbar ---------------- */
.bar{background:linear-gradient(100deg,var(--navy-900),var(--navy-700));color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.bar-isi{max-width:1240px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.merek{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.merek:hover{text-decoration:none}
.merek-tanda{background:#fff;color:var(--navy-900);font-weight:800;font-size:12px;letter-spacing:.5px;padding:5px 9px;border-radius:7px}
.merek-teks{font-weight:650;font-size:15px;letter-spacing:-.2px}
.bar-nav{display:flex;align-items:center;gap:6px}
.bar-nav>a{display:flex;align-items:center;gap:7px;color:#BFD4EC;padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:550}
.bar-nav>a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.bar-nav>a.kini{background:rgba(255,255,255,.15);color:#fff}
.bar-akun{display:flex;align-items:center;gap:10px;margin-left:10px;padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--hijau);color:#06331b;display:grid;place-items:center;font-weight:750;font-size:13px}
.bar-nama{font-size:13.2px;color:#DCE8F6;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-keluar{color:#FFB9B4;display:grid;place-items:center;width:32px;height:32px;border-radius:8px}
.bar-keluar:hover{background:rgba(255,255,255,.1)}

.laman{max-width:1240px;margin:0 auto;padding:26px 22px 70px}
.kaki{background:#fff;border-top:1px solid var(--garis);padding:20px}
.kaki-isi{max-width:1240px;margin:0 auto;text-align:center;font-size:12.3px;color:var(--redup)}
.pisah{margin:0 8px;opacity:.5}

/* ---------------- hero halaman ---------------- */
.hero{background:linear-gradient(105deg,var(--navy-800),var(--navy-700) 55%,var(--teal));border-radius:var(--r-l);
      padding:26px 30px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--bayang-m)}
.hero::after{content:"";position:absolute;right:-70px;top:-90px;width:290px;height:290px;border-radius:50%;
             background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)}
.hero-isi{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap}
.hero h1{color:#fff}
.hero .sub{color:#BFD8EA;font-size:13.4px;margin-top:3px}
.hero-lencana{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);
              padding:5px 13px;border-radius:20px;font-size:12.2px;margin-bottom:10px;font-weight:550}

/* ---------------- kartu ---------------- */
.kartu{background:var(--surface);border:1px solid var(--garis);border-radius:var(--r-l);padding:22px;box-shadow:var(--bayang-s)}
.kartu+.kartu{margin-top:16px}
.kartu-kepala{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.kartu-kepala .ikon{color:var(--navy-500)}
.kartu-ket{font-size:12.6px;color:var(--redup);margin-bottom:14px;line-height:1.6}

/* ---------------- statistik ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:13px;margin:18px 0}
.stat{background:var(--surface);border:1px solid var(--garis);border-radius:var(--r-m);padding:15px 17px;box-shadow:var(--bayang-s);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--navy-500)}
.stat.biru::before{background:#2160AE}.stat.hijau::before{background:var(--hijau-700)}
.stat.emas::before{background:var(--emas)}.stat.merah::before{background:var(--merah)}.stat.ungu::before{background:var(--ungu)}
.stat-atas{display:flex;align-items:center;gap:7px;color:var(--redup);font-size:11.8px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat b{display:block;font-size:27px;font-weight:750;letter-spacing:-1px;margin-top:5px;line-height:1}
.stat.biru b{color:#2160AE}.stat.hijau b{color:var(--hijau-700)}.stat.emas b{color:var(--emas)}.stat.merah b{color:var(--merah)}

/* ---------------- progres ---------------- */
.track{height:8px;background:#DFE8F1;border-radius:99px;overflow:hidden}
.track.tebal{height:11px}
.fill{height:100%;background:linear-gradient(90deg,var(--hijau-700),var(--hijau));border-radius:99px;transition:width .35s ease}
.progres-baris{display:flex;justify-content:space-between;font-size:12.4px;color:var(--redup);margin-top:8px;gap:12px;flex-wrap:wrap}
.tebal-teks{font-weight:700;color:var(--teks)}
.teks-kuning{color:var(--emas);font-weight:650}

/* ---------------- tombol ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:var(--r-s);
     padding:9px 16px;font-size:13.4px;font-weight:650;font-family:inherit;cursor:pointer;text-decoration:none;
     transition:background .15s,box-shadow .15s,transform .06s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.utama{background:var(--navy-700);color:#fff;box-shadow:var(--bayang-s)}
.btn.utama:hover{background:var(--navy-800)}
.btn.hijau{background:var(--hijau);color:#04331A;box-shadow:var(--bayang-s)}
.btn.hijau:hover{background:#1FC25E}
.btn.garis{background:#fff;border-color:var(--garis-2);color:var(--teks-2)}
.btn.garis:hover{background:var(--surface-2);border-color:#BECEDE}
.btn.halus{background:#EDF2F8;color:var(--teks-2)}
.btn.halus:hover{background:#E3EBF4}
.btn.mini{padding:5px 11px;font-size:12px;border-radius:7px}
.btn.penuh{width:100%}
.btn.sukses{background:var(--hijau-700)!important;color:#fff!important;border-color:transparent!important}

/* ---------------- notifikasi ---------------- */
.notif{display:flex;gap:11px;padding:13px 17px;border-radius:var(--r-m);margin:14px 0;font-size:13.4px;line-height:1.65;border:1px solid}
.notif .ikon{margin-top:2px;flex-shrink:0}
.notif.info{background:#EFF6FF;border-color:#CFE2F8;color:#1B4B82}
.notif.oke{background:#F0FBF4;border-color:#C3E9D2;color:#146C3A}
.notif.awas{background:#FFFAEC;border-color:#F7E3B0;color:#7A5600}
.notif.galat{background:#FEF3F2;border-color:#F8CFCB;color:#93221C}

/* ---------------- form ---------------- */
label.f{display:block;font-size:12.2px;font-weight:650;color:var(--teks-2);margin-bottom:5px}
input[type=text],input[type=search],input[type=date],input[type=number],input[type=password],select,textarea{
  font-family:inherit;font-size:13.6px;color:var(--teks);background:#fff;
  border:1px solid var(--garis-2);border-radius:var(--r-s);padding:9px 12px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(33,96,174,.13)}
textarea{resize:vertical;line-height:1.65}
.baris-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.baris-form>div{flex:1;min-width:150px}
.baris-form.kartu{margin-top:14px}

/* ---------------- LOGIN ---------------- */
.masuk-badan{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--bg)}
.masuk-kiri{background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 60%,var(--teal));
            color:#fff;padding:56px 58px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.masuk-kiri::before{content:"";position:absolute;right:-140px;bottom:-160px;width:440px;height:440px;border-radius:50%;
                    background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.masuk-kiri::after{content:"";position:absolute;left:-90px;top:-110px;width:300px;height:300px;border-radius:50%;
                   background:radial-gradient(circle,rgba(37,211,102,.18),transparent 70%)}
.mk-atas,.mk-tengah,.mk-bawah{position:relative;z-index:1}
.mk-logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.4px}
.mk-logo span{background:#fff;color:var(--navy-900);padding:6px 11px;border-radius:8px;font-size:13px}
.mk-tengah h1{font-size:33px;line-height:1.2;letter-spacing:-.8px;color:#fff;margin-bottom:14px}
.mk-tengah p{color:#C3DAEE;font-size:14.5px;max-width:400px;line-height:1.7}
.mk-poin{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:11px}
.mk-poin li{display:flex;gap:11px;align-items:flex-start;color:#DCEAF6;font-size:13.6px}
.mk-poin .ikon{color:var(--hijau);margin-top:3px}
.mk-bawah{color:#8FB2D2;font-size:12.2px}

.masuk-kanan{display:flex;align-items:center;justify-content:center;padding:40px 30px}
.masuk-kotak{width:100%;max-width:378px}
.masuk-kotak h2{margin-bottom:5px}
.masuk-kotak .sub{color:var(--redup);font-size:13.4px;margin-bottom:26px}
.masuk-kotak label.f{margin-top:16px}
.pin-baris{display:flex;gap:11px;margin-top:6px}
.pin-kotak{width:100%;aspect-ratio:1/1;max-height:66px;text-align:center;font-size:25px;font-weight:750;
           font-family:ui-monospace,Consolas,monospace;letter-spacing:0;padding:0;border-radius:var(--r-m);
           border:1.5px solid var(--garis-2);background:#fff;color:var(--navy-800)}
.pin-kotak:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(33,96,174,.15)}
.pin-kotak.terisi{border-color:var(--hijau-700);background:#F4FCF7}
.masuk-kotak .btn{margin-top:24px;padding:12px}
.masuk-bantuan{text-align:center;font-size:12.3px;color:var(--redup);margin-top:20px;line-height:1.7}
@media(max-width:900px){
  .masuk-badan{grid-template-columns:1fr}
  .masuk-kiri{padding:38px 30px}
  .mk-tengah h1{font-size:26px}
  .mk-poin{display:none}
}

/* ---------------- panel pesan + flyer ---------------- */
.dua-kolom{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:18px}
@media(max-width:920px){.dua-kolom{grid-template-columns:1fr}}
.aksi-baris{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pratinjau{margin-top:14px;background:#E9F7EF;border:1px solid #C6E9D4;border-left:3px solid var(--hijau-700);
           border-radius:var(--r-s);padding:14px 16px;font-size:13.1px;white-space:pre-wrap;line-height:1.7;color:#1A3B29;display:none;max-height:260px;overflow:auto}
.pratinjau.tampil{display:block}
.pratinjau-judul{font-size:11.4px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:#2C7A52;margin-bottom:7px}
.flyer-bingkai{border:1px solid var(--garis);border-radius:var(--r-m);overflow:hidden;background:var(--surface-2);margin-bottom:13px}
.flyer{width:100%;display:block}
.flyer-mini{max-width:132px;border-radius:var(--r-s);border:1px solid var(--garis);display:block;margin:10px 0}

/* ---------------- saring ---------------- */
.saring{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:24px 0 6px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:1px solid var(--garis-2);background:#fff;border-radius:99px;padding:7px 15px;font-size:12.6px;
      cursor:pointer;font-family:inherit;color:var(--teks-2);font-weight:550;transition:all .14s}
.chip:hover{border-color:#BECEDE;background:var(--surface-2)}
.chip.aktif{background:var(--navy-700);border-color:var(--navy-700);color:#fff;font-weight:650}
.cari-bungkus{position:relative;min-width:262px}
.cari-bungkus .ikon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--redup)}
.cari-bungkus input{padding-left:36px}

/* ---------------- daftar kontak ---------------- */
.batch{margin-top:16px;background:var(--surface);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--bayang-s)}
.batch-kepala{display:flex;justify-content:space-between;align-items:center;gap:12px;
              background:linear-gradient(90deg,#F4F8FC,#FBFCFE);padding:12px 18px;border-bottom:1px solid var(--garis)}
.batch-judul{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.batch-nomor{width:26px;height:26px;border-radius:8px;background:var(--navy-700);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:750}
.batch-kanan{display:flex;align-items:center;gap:12px;font-size:12.3px;color:var(--redup)}
.batch-track{width:74px}
.batch.tuntas .batch-nomor{background:var(--hijau-700)}

.kontak{border-bottom:1px solid #E7EFF7;transition:background .15s}
.kontak:last-child{border-bottom:0}
.kontak:hover{background:#FBFDFF}
.kontak.sudah{background:#F7FCF9}
.kontak.sudah:hover{background:#F2FAF6}
.baris-atas{display:flex;align-items:center;gap:14px;padding:13px 18px;flex-wrap:wrap}
.urut{font-family:ui-monospace,Consolas,monospace;font-size:11.4px;color:#A6B8C7;min-width:36px}
.ident{flex:1;min-width:180px}
.ident b{display:block;font-size:14.2px;font-weight:650;letter-spacing:-.1px}
.kontak.sudah .ident b{color:#8298A8}
.ident span{display:flex;align-items:center;gap:5px;font-size:12.1px;color:var(--redup);margin-top:1px}
.nomor{font-family:ui-monospace,Consolas,monospace;font-size:12.6px;color:var(--teks-2);min-width:118px}
.aksi-kontak{display:flex;gap:7px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.2px;padding:4px 11px;border-radius:99px;font-weight:650;white-space:nowrap;border:1px solid transparent}
.badge.abu{background:#EDF1F5;color:#5D7183;border-color:#E1E8EF}
.badge.biru{background:#E6F0FC;color:#1B5FA8;border-color:#CFE2F8}
.badge.ungu{background:#F0E9FC;color:#5B34AE;border-color:#E1D5F7}
.badge.hijau{background:#DFF6E8;color:#12703C;border-color:#C4E9D3}
.badge.kuning{background:#FEF5DA;color:#8A6100;border-color:#F7E3B0}
.badge.merah{background:#FDE9E7;color:#A93227;border-color:#F8CFCB}
.badge.emas{background:#FBEFCB;color:#8A6408;border-color:#F2DFA8}

/* baris yang sedang dibuka diberi penanda supaya tidak menyatu dengan baris lain */
.kontak.terbuka{background:#F4F8FE;box-shadow:inset 3px 0 0 var(--navy-500)}
.kontak.terbuka:hover{background:#F4F8FE}
.kontak.terbuka .baris-atas{padding-bottom:9px}
.btn.aktif{background:var(--navy-700);color:#fff}

.keterangan{margin:0 18px 16px;padding:16px 17px;background:#fff;border:1px solid var(--garis-2);
            border-radius:var(--r-m);box-shadow:var(--bayang-s);display:flex;gap:18px;flex-wrap:wrap}
.keterangan .kolom-status{flex:0 0 236px;max-width:100%}
.keterangan .lebar{flex:1;min-width:260px}
.kolom label{display:flex;align-items:center;gap:5px;font-size:11.4px;font-weight:650;color:#55697C;margin-bottom:5px}
.kolom label .ikon{color:#9BB0C2}
.simpan-info{width:100%;font-size:11.8px;color:var(--redup);display:flex;align-items:center;gap:6px;
             min-height:16px;padding-top:2px;border-top:1px solid #F0F4F8;margin-top:2px}
.simpan-info:empty{border-top:0;min-height:0}
.simpan-info.sukses{color:var(--hijau-700)}
@media(max-width:640px){.keterangan{margin:0 12px 14px;padding:14px}.keterangan .kolom-status{flex:1 1 100%}}

/* ---------------- tabel ---------------- */
.tabel-bungkus{background:var(--surface);border:1px solid var(--garis);border-radius:var(--r-l);overflow:auto;box-shadow:var(--bayang-s);margin-top:16px}
.tabel{width:100%;border-collapse:collapse;font-size:13.1px;min-width:640px}
.tabel th{background:var(--surface-2);text-align:left;padding:11px 15px;font-size:11.5px;font-weight:700;
          color:#5A7085;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--garis);white-space:nowrap}
.tabel td{padding:12px 15px;border-bottom:1px solid #F0F4F8;vertical-align:middle}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tbody tr:hover{background:#FBFDFF}
.tabel tr.nonaktif{opacity:.5}
.sel-catatan{max-width:250px;font-size:12.2px;color:var(--redup)}
.sel-tindakan{display:flex;gap:6px;flex-wrap:wrap}
.halaman{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap}
.halaman a{padding:6px 12px;background:#fff;border:1px solid var(--garis-2);border-radius:var(--r-s);font-size:12.6px;color:var(--teks-2)}
.halaman a:hover{background:var(--surface-2);text-decoration:none}
.halaman a.aktif{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* ---------------- tab ---------------- */
.tabs{display:flex;gap:5px;margin:22px 0 0;background:#E8EEF5;padding:5px;border-radius:var(--r-m);width:fit-content;max-width:100%;overflow:auto}
.tab{display:flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-s);color:var(--teks-2);
     font-size:13.2px;font-weight:600;white-space:nowrap}
.tab:hover{background:rgba(255,255,255,.65);text-decoration:none}
.tab.aktif{background:#fff;color:var(--navy-700);box-shadow:var(--bayang-s)}

/* ---------------- pemasangan (install/cek) ---------------- */
.pasang-badan{background:linear-gradient(160deg,#0A2342,#123A6B 55%,#0E7C86);min-height:100vh;padding:44px 20px}
.pasang-kotak{max-width:760px;margin:0 auto}
.pasang-merek{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;justify-content:center;margin-bottom:8px}
.pasang-merek span{background:#fff;color:var(--navy-900);padding:6px 11px;border-radius:8px;font-size:13px}
.pasang-sub{text-align:center;color:#B9D3E8;font-size:13.2px;margin-bottom:26px}
.papan{background:#fff;border-radius:20px;padding:32px 34px;box-shadow:var(--bayang-l)}
.papan h1{margin-bottom:5px}
.papan>.sub{color:var(--redup);font-size:13.4px;margin-bottom:22px}

.langkah{display:flex;gap:0;margin-bottom:26px}
.lk{flex:1;text-align:center;position:relative;font-size:11.8px;color:var(--redup)}
.lk::before{content:"";position:absolute;top:15px;left:0;right:0;height:2px;background:var(--garis)}
.lk:first-child::before{left:50%}.lk:last-child::before{right:50%}
.lk-bulat{position:relative;width:32px;height:32px;margin:0 auto 7px;border-radius:50%;background:#fff;
          border:2px solid var(--garis);display:grid;place-items:center;font-weight:750;font-size:12.5px;color:var(--redup)}
.lk.aktif .lk-bulat{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.lk.aktif{color:var(--navy-700);font-weight:650}
.lk.usai .lk-bulat{background:var(--hijau-700);border-color:var(--hijau-700);color:#fff}
.lk.usai::before{background:var(--hijau-700)}

.cek-daftar{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.cek-item{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:var(--r-m);border:1px solid transparent}
.cek-item.ya{background:#F4FCF7;border-color:#D5EFE0}
.cek-item.tidak{background:#FEF4F3;border-color:#F8D5D1}
.cek-tanda{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;margin-top:1px}
.cek-item.ya .cek-tanda{background:var(--hijau-700)}
.cek-item.tidak .cek-tanda{background:var(--merah)}
.cek-isi b{font-size:13.6px;display:block}
.cek-isi span{font-size:12.4px;color:var(--redup);line-height:1.55}

.kredensial{background:#FFFBF0;border:1px solid #F3E2B8;border-radius:var(--r-m);padding:4px;margin-top:6px}
.pin-teks{font-family:ui-monospace,Consolas,monospace;font-size:16px;font-weight:750;letter-spacing:3px;
          background:var(--navy-900);color:#7FE9AC;padding:4px 11px;border-radius:6px;display:inline-block}

/* ---------------- lain ---------------- */
.kosong{background:var(--surface);border:1.5px dashed var(--garis-2);padding:52px 24px;text-align:center;border-radius:var(--r-l);color:var(--redup)}
.kosong .ikon{color:#B9C9D8;margin-bottom:10px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(150px);
       background:var(--navy-900);color:#fff;padding:13px 22px;border-radius:11px;font-size:13.4px;
       box-shadow:var(--bayang-l);transition:transform .32s cubic-bezier(.2,.8,.3,1);z-index:99;max-width:90vw;
       display:flex;align-items:center;gap:9px}
.toast.tampil{transform:translateX(-50%) translateY(0)}
.toast .ikon{color:var(--hijau)}
.judul-blok{margin:26px 0 10px;display:flex;align-items:center;gap:8px}
.judul-blok .ikon{color:var(--navy-500)}
@media(max-width:640px){
  .laman{padding:18px 14px 60px}
  .hero{padding:20px}
  .bar-nama{display:none}
  .baris-atas{gap:9px}
  .nomor{min-width:auto}
}