/* ==========================================================
   Sistem Informasi Terminal Penumpang — gaya antarmuka
   ========================================================== */
:root{
  --utama:#0f766e; --utama-gelap:#0b5d56; --utama-muda:#e6f4f1;
  --biru:#0369a1; --biru-muda:#e0f2fe;
  --amber:#b45309; --amber-muda:#fef3c7;
  --teks:#0f172a; --teks-lembut:#64748b; --garis:#e2e8f0;
  --latar:#f8fafc; --kartu:#ffffff;
  --merah:#dc2626; --hijau:#059669;
  --bayang:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --bulat:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; color:var(--teks); background:var(--latar); line-height:1.55;
}
a{color:var(--utama); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------- tata letak aplikasi ---------------- */
.app{display:flex; min-height:100vh}
.sisi{
  width:250px; flex:0 0 250px; background:#0b1220; color:#cbd5e1;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.merek{display:flex; gap:10px; align-items:center; padding:18px 16px; border-bottom:1px solid #1e293b}
.merek-ikon{
  width:38px;height:38px;border-radius:9px;background:var(--utama);
  display:grid;place-items:center;font-size:20px;color:#fff
}
.merek strong{display:block;color:#fff;font-size:16px;letter-spacing:.5px}
.merek small{color:#94a3b8;font-size:11px}
.menu{padding:10px 0 30px}
.menu-grup{
  padding:14px 16px 6px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.9px; color:#64748b; font-weight:700
}
.menu a{
  display:flex; gap:10px; align-items:center; padding:8px 16px;
  color:#cbd5e1; font-size:13.5px; border-left:3px solid transparent
}
.menu a:hover{background:#131c2e; color:#fff; text-decoration:none}
.menu a.aktif{background:#131c2e; color:#fff; border-left-color:var(--utama); font-weight:600}
.menu a.keluar{color:#fca5a5}
.menu .ikon{width:18px; text-align:center; opacity:.9}

.utama{flex:1; display:flex; flex-direction:column; min-width:0}
.atas{
  background:var(--kartu); border-bottom:1px solid var(--garis);
  padding:12px 22px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:20
}
.atas h1{font-size:17px; margin:0; flex:1; font-weight:650}
.atas-kanan{display:flex; align-items:center; gap:12px}
.profil{text-align:right; line-height:1.25}
.profil strong{display:block; font-size:13px}
.profil small{color:var(--teks-lembut); font-size:11.5px}
.tombol-menu{display:none; background:none; border:0; font-size:20px; cursor:pointer}
.isi{padding:22px; flex:1}
.bawah{padding:14px 22px; color:var(--teks-lembut); font-size:12px; border-top:1px solid var(--garis)}

.lencana{
  padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700;
  background:var(--utama-muda); color:var(--utama-gelap)
}
.lencana-operator{background:var(--biru-muda); color:var(--biru)}
.lencana-pengawas{background:var(--amber-muda); color:var(--amber)}

/* ---------------- komponen ---------------- */
.kartu{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--bulat);
  box-shadow:var(--bayang); margin-bottom:18px
}
.kartu-kepala{
  padding:14px 18px; border-bottom:1px solid var(--garis);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap
}
.kartu-kepala h2{margin:0; font-size:15px; flex:1; font-weight:650}
.kartu-isi{padding:18px}
.kartu-isi.rapat{padding:0}

.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.statistik{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--bulat);
  padding:16px 18px; box-shadow:var(--bayang); border-top:3px solid var(--utama)
}
.statistik.biru{border-top-color:var(--biru)}
.statistik.amber{border-top-color:var(--amber)}
.statistik.hijau{border-top-color:var(--hijau)}
.statistik .label{font-size:11.5px; color:var(--teks-lembut); text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.statistik .nilai{font-size:26px; font-weight:700; line-height:1.25; margin-top:4px}
.statistik .catatan{font-size:12px; color:var(--teks-lembut)}

/* ---------------- tabel ---------------- */
.bungkus-tabel{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{
  background:var(--utama); color:#fff; text-align:left; padding:9px 11px;
  font-weight:600; font-size:12px; white-space:nowrap; position:sticky; top:0
}
table.data td{padding:8px 11px; border-bottom:1px solid var(--garis); vertical-align:top}
table.data tr:nth-child(even) td{background:#fcfdfe}
table.data tr:hover td{background:var(--utama-muda)}
table.data td.angka, table.data th.angka{text-align:right; font-variant-numeric:tabular-nums}
table.data td.tengah, table.data th.tengah{text-align:center}
table.data tfoot td{font-weight:700; background:var(--utama-muda); border-top:2px solid var(--utama)}
table.rapat td, table.rapat th{padding:5px 8px; font-size:12.5px}

/* ---------------- formulir ---------------- */
.baris-form{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:14px}
label.bidang{display:block}
label.bidang > span{display:block; font-size:12px; font-weight:600; color:var(--teks-lembut); margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],
input[type=email],input[type=url],select,textarea{
  width:100%; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px;
  font:inherit; background:#fff; color:var(--teks)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--utama-muda); border-color:var(--utama)}
textarea{min-height:80px; resize:vertical}
input[type=file]{
  width:100%; padding:10px; border:2px dashed #cbd5e1; border-radius:8px; background:#fff
}
.bantuan{font-size:11.5px; color:var(--teks-lembut); margin-top:3px}

.tombol{
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:8px;
  border:1px solid transparent; background:var(--utama); color:#fff; font:inherit;
  font-weight:600; cursor:pointer; font-size:13px
}
.tombol:hover{background:var(--utama-gelap); text-decoration:none; color:#fff}
.tombol.sekunder{background:#fff; color:var(--teks); border-color:#cbd5e1}
.tombol.sekunder:hover{background:#f1f5f9; color:var(--teks)}
.tombol.bahaya{background:var(--merah)}
.tombol.bahaya:hover{background:#b91c1c}
.tombol.kecil{padding:5px 10px; font-size:12px}
.tombol[disabled]{opacity:.5; cursor:not-allowed}

.pesan{padding:11px 15px; border-radius:8px; margin-bottom:16px; font-size:13.5px; border:1px solid}
.pesan-sukses{background:#ecfdf5; border-color:#a7f3d0; color:#065f46}
.pesan-galat{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.pesan-info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af}
.pesan-peringatan{background:#fffbeb; border-color:#fde68a; color:#92400e}

.tanda{padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap; display:inline-block}
.tanda-hijau{background:#d1fae5; color:#065f46}
.tanda-biru{background:var(--biru-muda); color:var(--biru)}
.tanda-amber{background:var(--amber-muda); color:var(--amber)}
.tanda-merah{background:#fee2e2; color:#991b1b}
.tanda-abu{background:#f1f5f9; color:var(--teks-lembut)}

.kosong{padding:36px 20px; text-align:center; color:var(--teks-lembut)}
.kosong .besar{font-size:40px; margin-bottom:8px; opacity:.4}

.saring{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.saring label.bidang{min-width:150px}

/* diagram batang sederhana untuk dashboard web */
.bar{height:9px; border-radius:99px; background:var(--utama); min-width:2px}
.bar-latar{background:#eef2f6; border-radius:99px; overflow:hidden; height:9px; margin-top:5px}

/* ---------------- halaman masuk ---------------- */
.masuk{
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:linear-gradient(135deg,#0b1220,#0f766e)
}
.masuk-kotak{
  background:#fff; border-radius:16px; padding:34px; width:100%; max-width:400px;
  box-shadow:0 20px 45px rgba(0,0,0,.28)
}
.masuk-kotak h1{margin:0 0 4px; font-size:21px}
.masuk-kotak p.sub{margin:0 0 22px; color:var(--teks-lembut); font-size:13px}
.masuk-kotak .tombol{width:100%; justify-content:center; padding:11px}
.akun-uji{margin-top:18px; font-size:12px; color:var(--teks-lembut); background:#f8fafc;
  padding:11px 13px; border-radius:8px; border:1px solid var(--garis)}

/* ---------------- halaman publik ---------------- */
.publik{background:#f1f5f9}
.publik-atas{background:var(--utama); color:#fff; padding:14px 0}
.wadah{max-width:1180px; margin:0 auto; padding:0 18px}
.publik-atas .wadah{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.publik-atas h1{font-size:18px; margin:0; flex:1}
.publik-atas nav a{color:#d1fae5; margin-left:16px; font-size:13.5px}
.publik-isi{padding:22px 0 50px}
.publik-tata{display:grid; grid-template-columns:1fr 310px; gap:20px; align-items:start}
@media(max-width:900px){.publik-tata{grid-template-columns:1fr}}

.iklan{
  background:#fff; border:1px solid var(--garis); border-radius:var(--bulat);
  padding:10px; margin-bottom:16px; text-align:center; position:relative; overflow:hidden
}
.iklan img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:6px}
.iklan-label{
  position:absolute; top:5px; right:7px; font-size:9px; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.7px
}
.iklan-kosong{
  border-style:dashed; color:var(--teks-lembut); font-size:12.5px;
  display:flex; flex-direction:column; gap:5px; padding:22px 12px
}
.afiliasi-kartu{
  background:#fff; border:1px solid var(--garis); border-radius:var(--bulat);
  padding:14px; margin-bottom:12px
}
.afiliasi-kartu h4{margin:0 0 5px; font-size:14px}
.afiliasi-kartu p{margin:0 0 9px; font-size:12.5px; color:var(--teks-lembut)}
.afiliasi-kartu .tombol{width:100%; justify-content:center}
.sponsor-nota{font-size:10.5px; color:#94a3b8; text-align:center; margin-top:6px}

/* ---------------- papan penunjuk arah (layar TV) ---------------- */
.papan{
  margin:0; background:#020617; color:#fff; min-height:100vh;
  font-family:"Segoe UI",Roboto,Arial,sans-serif; overflow:hidden
}
.papan-kepala{
  padding:22px 40px; display:flex; align-items:center; gap:22px;
  border-bottom:2px solid rgba(255,255,255,.12)
}
.papan-kepala h1{font-size:clamp(20px,2.4vw,34px); margin:0; flex:1; letter-spacing:1px}
.papan-jam{font-size:clamp(24px,3vw,44px); font-weight:700; font-variant-numeric:tabular-nums}
.papan-tanggal{font-size:clamp(12px,1.2vw,18px); opacity:.75; text-align:right}

.arah-wadah{display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:62vh}
.arah{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px; text-align:center; position:relative
}
.arah.domestik{background:linear-gradient(160deg,#0369a1,#075985)}
.arah.internasional{background:linear-gradient(160deg,#b45309,#92400e)}
.arah .panah{
  font-size:clamp(90px,17vw,240px); line-height:.85; font-weight:900;
  animation:geser 1.6s ease-in-out infinite
}
.arah.kiri .panah{animation-name:geserKiri}
.arah .nama{font-size:clamp(22px,3.4vw,52px); font-weight:800; letter-spacing:2px; margin-top:6px}
.arah .ket{font-size:clamp(13px,1.5vw,22px); opacity:.9; margin-top:10px; max-width:22ch}
.arah .tujuan{
  margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center
}
.arah .tujuan span{
  background:rgba(255,255,255,.18); padding:5px 14px; border-radius:99px;
  font-size:clamp(12px,1.3vw,18px); font-weight:600
}
@keyframes geser{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes geserKiri{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}

.papan-jadwal-mini{padding:16px 40px; background:rgba(255,255,255,.05)}
.papan-jadwal-mini table{width:100%; border-collapse:collapse; font-size:clamp(12px,1.3vw,19px)}
.papan-jadwal-mini th{text-align:left; padding:7px 10px; opacity:.65; font-weight:600; text-transform:uppercase; font-size:.8em}
.papan-jadwal-mini td{padding:8px 10px; border-top:1px solid rgba(255,255,255,.1)}
.papan-berjalan{
  background:#0f766e; padding:11px 0; overflow:hidden; white-space:nowrap;
  font-size:clamp(13px,1.4vw,20px)
}
.papan-berjalan span{display:inline-block; padding-left:100%; animation:jalan 26s linear infinite}
@keyframes jalan{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* papan jadwal publik layar penuh */
.papan-besar table{width:100%; border-collapse:collapse; font-size:clamp(13px,1.5vw,22px)}
.papan-besar th{background:rgba(255,255,255,.08); padding:12px; text-align:left; text-transform:uppercase; font-size:.75em; letter-spacing:1px}
.papan-besar td{padding:13px 12px; border-top:1px solid rgba(255,255,255,.1)}
.status-pil{padding:4px 14px; border-radius:99px; font-weight:700; font-size:.8em}
.st-rencana{background:#334155} .st-boarding{background:#059669}
.st-berangkat{background:#0369a1} .st-tiba{background:#7c3aed}
.st-tunda{background:#b45309} .st-batal{background:#dc2626}

/* ---------------- cetak ---------------- */
@media print{
  .sisi,.atas,.bawah,.tombol,.saring{display:none!important}
  .isi{padding:0}
  .kartu{box-shadow:none; border:0}
  body{background:#fff}
}

/* ---------------- layar kecil ---------------- */
@media(max-width:860px){
  .sisi{position:fixed; left:-260px; z-index:60; transition:left .2s}
  .sisi.buka{left:0}
  .tombol-menu{display:block}
  .isi{padding:14px}
  .arah-wadah{grid-template-columns:1fr}
}