/* Handling-in — bahasa visual: papan informasi bandara.
   Angka & kode pakai huruf monospace supaya mudah dibaca sekilas. */

:root{
  --ink:#14232C; --ink-2:#1E323E; --ink-3:#2C4453;
  --paper:#EFF2F1; --card:#FFFFFF; --line:#DBE2E0;
  --text:#14232C; --muted:#5E7080;
  --signal:#B36A0F; --signal-bg:#FBF0DE;
  --verify:#15694F; --verify-bg:#E3F1EB;
  --alert:#A0342A; --alert-bg:#F9E8E5;
  --info:#1F5A87; --info-bg:#E4EEF6;
  --r:6px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.6;
}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--info); outline-offset:2px}

.mono{font-family:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- Rangka ---------- */
.topbar{background:var(--ink); color:#fff; padding:0 20px}
.topbar-in{max-width:1180px; margin:0 auto; display:flex; align-items:center;
  gap:24px; min-height:56px; flex-wrap:wrap}
.merek{font-family:"Barlow Condensed",Impact,sans-serif; font-size:24px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff}
.merek span{color:#E8A33D}
.nav{display:flex; gap:2px; flex-wrap:wrap; flex:1}
.nav a{color:#B9C9D2; padding:8px 12px; border-radius:var(--r); font-size:14px}
.nav a:hover{background:var(--ink-2); color:#fff; text-decoration:none}
.nav a.aktif{background:var(--ink-3); color:#fff}
.akun{font-size:13px; color:#93A8B3; display:flex; align-items:center; gap:12px}
.akun a{color:#93A8B3}

.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 64px}

/* ---------- Judul halaman ---------- */
.kepala{display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-bottom:20px}
h1{font-family:"Barlow Condensed",sans-serif; font-size:32px; font-weight:600;
  letter-spacing:.02em; margin:0; text-transform:uppercase}
h2{font-family:"Barlow Condensed",sans-serif; font-size:20px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px}
.sub{color:var(--muted); font-size:14px; margin:4px 0 0}

/* ---------- Kartu ---------- */
.kartu{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:20px; margin-bottom:20px}
.kartu-pad0{padding:0}
.kartu-kepala{padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px}

/* ---------- Tiga panel alarm ---------- */
.alarm{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px}
.alarm-kartu{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; border-top:3px solid var(--muted)}
.alarm-kartu.merah{border-top-color:var(--alert)}
.alarm-kartu.kuning{border-top-color:var(--signal)}
.alarm-kartu.biru{border-top-color:var(--info)}
.alarm-label{font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:500}
.alarm-angka{font-family:"Barlow Condensed",sans-serif; font-size:44px;
  font-weight:600; line-height:1.05; margin:6px 0 2px}
.alarm-ket{font-size:13px; color:var(--muted)}

/* ---------- Papan operasional (elemen khas) ---------- */
.papan{background:var(--ink); border-radius:var(--r); overflow:hidden; margin-bottom:24px}
.papan-kepala{display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--ink-3); flex-wrap:wrap; gap:8px}
.papan-judul{font-family:"Barlow Condensed",sans-serif; color:#fff; font-size:20px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.papan-jam{color:#E8A33D; font-size:13px}
.papan table{width:100%; border-collapse:collapse}
.papan th{color:#7E96A3; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  text-align:left; padding:10px 20px; font-weight:500; border-bottom:1px solid var(--ink-3)}
.papan td{color:#DCE6EB; padding:12px 20px; border-bottom:1px solid var(--ink-2); font-size:14px}
.papan tr:last-child td{border-bottom:none}
.papan a{color:#fff}
.papan .kode{color:#E8A33D}
.papan-kosong{color:#7E96A3; padding:28px 20px; text-align:center; font-size:14px}

/* ---------- Tabel biasa ---------- */
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th{text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); font-weight:500;
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
table.data td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:#F7F9F8}
.tabel-gulir{overflow-x:auto}

/* ---------- Lencana status ---------- */
.lencana{display:inline-block; padding:3px 9px; border-radius:99px; font-size:12px;
  font-weight:500; white-space:nowrap; line-height:1.5}
.l-aman{background:var(--verify-bg); color:var(--verify)}
.l-peringatan{background:var(--signal-bg); color:var(--signal)}
.l-bermasalah{background:var(--alert-bg); color:var(--alert)}
.l-netral{background:#E8EDEB; color:#44585F}
.l-info{background:var(--info-bg); color:var(--info)}

/* ---------- Formulir ---------- */
.baris{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px}
.baris-3{grid-template-columns:repeat(3,1fr)}
label{display:block; font-size:13px; font-weight:500; margin-bottom:5px; color:#33444E}
input[type=text],input[type=date],input[type=datetime-local],input[type=number],
input[type=email],input[type=password],input[type=file],select,textarea{
  width:100%; padding:9px 11px; border:1px solid #C8D2CF; border-radius:var(--r);
  font-family:inherit; font-size:14px; background:#fff; color:var(--text)}
textarea{min-height:80px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--info); outline:none;
  box-shadow:0 0 0 3px rgba(31,90,135,.12)}
.bantuan{font-size:12px; color:var(--muted); margin-top:4px}

/* ---------- Tombol ---------- */
.tbl{display:inline-block; padding:9px 16px; border-radius:var(--r); border:1px solid transparent;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none}
.tbl:hover{text-decoration:none}
.tbl-utama{background:var(--ink); color:#fff}
.tbl-utama:hover{background:var(--ink-2)}
.tbl-garis{background:#fff; border-color:#C8D2CF; color:var(--text)}
.tbl-garis:hover{border-color:var(--ink); background:#F7F9F8}
.tbl-kecil{padding:5px 10px; font-size:13px}
.tbl-bahaya{background:var(--alert); color:#fff}

/* ---------- Pemberitahuan ---------- */
.kilat{padding:12px 16px; border-radius:var(--r); margin-bottom:20px; font-size:14px}
.kilat-sukses{background:var(--verify-bg); color:var(--verify); border:1px solid #B9DDD0}
.kilat-galat{background:var(--alert-bg); color:var(--alert); border:1px solid #EFC9C3}
.kilat-info{background:var(--info-bg); color:var(--info); border:1px solid #C4DAEA}

/* ---------- Halaman masuk ---------- */
.masuk-latar{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink); padding:24px}
.masuk-kotak{background:#fff; border-radius:8px; padding:32px; width:100%; max-width:380px}
.masuk-merek{font-family:"Barlow Condensed",sans-serif; font-size:30px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px}
.masuk-merek span{color:#B36A0F}

.kosong{padding:40px 20px; text-align:center; color:var(--muted); font-size:14px}
.kisi-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.rinci{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; font-size:14px}
.rinci dt{color:var(--muted)}
.rinci dd{margin:0}

@media (max-width:820px){
  .alarm,.kisi-2,.baris,.baris-3{grid-template-columns:1fr}
  h1{font-size:26px}
  .wrap{padding:20px 14px 48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}