/* PPTrans Ops - satu berkas gaya untuk seluruh aplikasi */

:root{
  --kertas:#EDF0F3; --permukaan:#FFFFFF; --permukaan2:#F5F7F9;
  --tinta:#121A22; --tinta2:#57646F; --tinta3:#7E8B96;
  --garis:#CFD7DE; --garis-halus:#DFE5EA;
  --aksen:#1E4E8C; --aksen-lembut:#DCE6F3; --aksen-teks:#FFFFFF;
  --bahaya:#A6382A; --bahaya-lembut:#F7E4E0;
  --baik:#2C6E52; --baik-lembut:#DFF0E7;
  --bayang:0 1px 2px rgba(18,26,34,.07);
}
@media (prefers-color-scheme:dark){
  :root{
    --kertas:#0E1319; --permukaan:#161D25; --permukaan2:#1B232C;
    --tinta:#E4E9EE; --tinta2:#9CA9B4; --tinta3:#78848F;
    --garis:#2A3540; --garis-halus:#222C36;
    --aksen:#7FB0EA; --aksen-lembut:#1B2C42; --aksen-teks:#0E1319;
    --bahaya:#E58A78; --bahaya-lembut:#3A231E;
    --baik:#6BC098; --baik-lembut:#172E24;
    --bayang:0 1px 2px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--kertas); color:var(--tinta);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--aksen)}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.25}
h1{font-size:1.45rem} h2{font-size:1.1rem} h3{font-size:.98rem}
p{margin:0}
:focus-visible{outline:2px solid var(--aksen); outline-offset:2px; border-radius:3px}

/* ------------------------------------------------------------- kerangka */
.atas{
  background:var(--permukaan); border-bottom:1px solid var(--garis);
  position:sticky; top:0; z-index:20;
}
.atas-isi{
  max-width:1080px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:20px; min-height:56px; flex-wrap:wrap;
}
.merek{font-weight:700; letter-spacing:-.02em; color:var(--tinta); text-decoration:none; font-size:1rem}
.menu{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.menu a{
  padding:7px 12px; border-radius:4px; text-decoration:none;
  color:var(--tinta2); font-size:.9rem; white-space:nowrap;
}
.menu a:hover{background:var(--permukaan2); color:var(--tinta)}
.menu a.kini{background:var(--aksen-lembut); color:var(--aksen); font-weight:600}
.aku{display:flex; align-items:center; gap:12px; font-size:.85rem; color:var(--tinta2)}

.isi{max-width:1080px; margin:0 auto; padding:26px 20px 156px}
.kepala{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.kepala p{color:var(--tinta2); font-size:.9rem; margin-top:3px}
.kepala .kanan{margin-left:auto}

/* ---------------------------------------------------------------- kabar */
.kabar{
  padding:11px 15px; border-radius:4px; margin-bottom:20px; font-size:.9rem;
  border:1px solid; display:flex; gap:9px; align-items:flex-start;
}
.kabar.baik{background:var(--baik-lembut); border-color:var(--baik); color:var(--baik)}
.kabar.buruk{background:var(--bahaya-lembut); border-color:var(--bahaya); color:var(--bahaya)}

/* --------------------------------------------------------------- tombol */
.tombol{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  border:1px solid var(--aksen); background:var(--aksen); color:var(--aksen-teks);
  border-radius:4px; font:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.tombol:hover{filter:brightness(1.08)}
.tombol.samar{background:transparent; color:var(--tinta2); border-color:var(--garis); font-weight:500}
.tombol.samar:hover{background:var(--permukaan2); color:var(--tinta)}

/* ---------------------------------------------------------------- kartu */
.kartu{
  background:var(--permukaan); border:1px solid var(--garis);
  border-radius:5px; box-shadow:var(--bayang);
}
.kartu-isi{padding:22px}

/* ---------------------------------------------------------------- angka */
.angka{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--garis); border:1px solid var(--garis); border-radius:5px; overflow:hidden}
.angka div{background:var(--permukaan); padding:16px 18px}
.angka b{display:block; font-size:1.7rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1}
.angka span{display:block; margin-top:3px; font-size:.8rem; color:var(--tinta2)}

/* ---------------------------------------------------------------- tabel */
.bungkus{overflow-x:auto; background:var(--permukaan); border:1px solid var(--garis);
  border-radius:5px; box-shadow:var(--bayang)}
table{border-collapse:collapse; width:100%; min-width:600px; font-size:.9rem}
th,td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--garis-halus);
  vertical-align:top}
th{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta3);
  font-weight:600; background:var(--permukaan2); border-bottom:1px solid var(--garis);
  white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--permukaan2)}
td.angka-sel{text-align:right; font-variant-numeric:tabular-nums}
.kosong{padding:44px 22px; text-align:center; color:var(--tinta2); font-size:.92rem}

.label{display:inline-block; padding:2px 8px; border-radius:99px; font-size:.72rem;
  font-weight:600; white-space:nowrap; border:1px solid}
.label.hidup{background:var(--baik-lembut); color:var(--baik); border-color:transparent}
.label.mati{background:var(--permukaan2); color:var(--tinta3); border-color:var(--garis)}
.label.tenang{background:var(--aksen-lembut); color:var(--aksen); border-color:transparent}

/* -------------------------------------------------------------- formulir */
.borang{display:flex; flex-direction:column; gap:22px}
.kelompok{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.kelompok legend{
  padding:0 0 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--tinta3); font-weight:600; width:100%; border-bottom:1px solid var(--garis);
  margin-bottom:4px;
}
.baris{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.isian{display:flex; flex-direction:column; gap:5px}
.isian label{font-size:.85rem; font-weight:600}
.isian .bantu{font-size:.78rem; color:var(--tinta2); line-height:1.4}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  font:inherit; font-size:.92rem; padding:9px 11px; border:1px solid var(--garis);
  border-radius:4px; background:var(--permukaan); color:var(--tinta); width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--aksen); outline:none;
  box-shadow:0 0 0 3px var(--aksen-lembut)}
textarea{resize:vertical; min-height:70px}
.centang{display:flex; gap:9px; align-items:flex-start; font-size:.88rem}
.centang input{margin:3px 0 0; flex:none; width:16px; height:16px; accent-color:var(--aksen)}
.centang span{color:var(--tinta2); font-size:.8rem; display:block; margin-top:2px}
.aksi{display:flex; gap:10px; align-items:center; padding-top:4px; flex-wrap:wrap}

/* -------------------------------------------------------------- halaman masuk */
.gerbang{min-height:100vh; display:grid; place-items:center; padding:24px}
.gerbang .kotak{width:100%; max-width:23rem}
.gerbang .judul{text-align:center; margin-bottom:24px}
.gerbang .judul p{color:var(--tinta2); font-size:.88rem; margin-top:5px}
.gerbang .tombol{width:100%; justify-content:center; margin-top:4px}

/* ------------------------------------------------ kolom kata sandi + mata */
.sandi-kotak{position:relative; display:block}
.sandi-kotak input{padding-right:44px}
.sandi-kotak .lihat{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  background:transparent; border:0; border-radius:4px; cursor:pointer;
  color:var(--tinta3); line-height:0;
}
.sandi-kotak .lihat:hover{color:var(--tinta); background:var(--permukaan2)}
.sandi-kotak .lihat:focus-visible{outline:2px solid var(--aksen); outline-offset:0}
.sandi-kotak .lihat .ikon-tutup{display:none}
.sandi-kotak .lihat.tampil{color:var(--aksen)}
.sandi-kotak .lihat.tampil .ikon-buka{display:none}
.sandi-kotak .lihat.tampil .ikon-tutup{display:block}

/* Tombol bawaan peramban dihilangkan supaya tidak ada dua mata bersebelahan */
.sandi-kotak input::-ms-reveal,
.sandi-kotak input::-ms-clear{display:none}

/* ------------------------------------------------------- kotak perintah */
.tersembunyi{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.perintah-alas{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  background:linear-gradient(to top, var(--kertas) 58%, transparent);
  padding:24px 20px 12px; pointer-events:none;
}
.perintah{max-width:1080px; margin:0 auto; pointer-events:auto}
.perintah-kotak{
  background:var(--permukaan); border:1px solid var(--garis); border-radius:10px;
  box-shadow:0 3px 14px rgba(18,26,34,.10); padding:8px 8px 8px 6px;
  transition:border-color .12s, box-shadow .12s;
}
@media (prefers-color-scheme:dark){
  .perintah-kotak{box-shadow:0 3px 16px rgba(0,0,0,.45)}
}
.perintah-kotak:focus-within{border-color:var(--aksen); box-shadow:0 0 0 3px var(--aksen-lembut)}
.perintah-kotak.ditarik{border-color:var(--aksen); border-style:dashed; background:var(--aksen-lembut)}
.perintah-kotak.bekerja{opacity:.6; pointer-events:none}

.perintah-baris{display:flex; align-items:flex-end; gap:8px}
.perintah-baris textarea{
  flex:1; border:0; background:transparent; resize:none; padding:8px 2px;
  min-height:0; height:38px;
  font:inherit; font-size:.95rem; line-height:1.5; color:var(--tinta);
  max-height:160px; overflow-y:auto;
}
.perintah-baris textarea:focus{outline:none; box-shadow:none}
.perintah-baris textarea::placeholder{color:var(--tinta3)}
.perintah-baris .tombol{padding:8px 15px; align-self:flex-end}

.jepit{
  flex:none; width:36px; height:36px; display:grid; place-items:center;
  border-radius:6px; cursor:pointer; color:var(--tinta3); align-self:flex-end;
}
.jepit:hover{background:var(--permukaan2); color:var(--tinta)}
.jepit:focus-within{outline:2px solid var(--aksen); outline-offset:1px}

.lampiran{display:flex; flex-wrap:wrap; gap:8px; padding:4px 4px 10px 6px}
.lampiran[hidden]{display:none}
.lampiran .keping{position:relative; width:58px; height:58px}
.lampiran .keping img{
  width:100%; height:100%; object-fit:cover; border-radius:6px;
  border:1px solid var(--garis); display:block;
}
.lampiran .buang{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; padding:0;
  border-radius:50%; border:1px solid var(--garis); background:var(--permukaan);
  color:var(--tinta2); font-size:14px; line-height:1; cursor:pointer;
}
.lampiran .buang:hover{background:var(--bahaya); color:#fff; border-color:var(--bahaya)}

.perintah-bantu{
  font-size:.76rem; color:var(--tinta3); text-align:center;
  margin-top:7px; line-height:1.45;
}
.perintah-bantu em{font-style:normal; color:var(--tinta2); font-weight:600}

@media (max-width:560px){
  .perintah-alas{padding:14px 12px 10px}
  .perintah-bantu{display:none}
}

/* Penanda di formulir yang isinya berasal dari kotak perintah */
.draf{
  background:var(--aksen-lembut); border:1px solid var(--aksen);
  color:var(--aksen); border-radius:5px; padding:13px 16px; margin-bottom:20px;
  font-size:.89rem; line-height:1.5;
}
.draf strong{display:block; margin-bottom:3px}
.draf ul{margin:7px 0 0; padding-left:19px}
.draf li{margin-top:3px}

/* ------------------------------------------------------------------ logo */
.merek{display:flex; align-items:center; gap:8px}
.merek img{height:24px; width:auto; display:block}
.logo-besar{height:38px; width:auto; margin:0 auto 16px; display:block}
.gerbang .judul h1{font-size:1.15rem; font-weight:600}

/* Logo memakai tinta biru tua. Di tema gelap ia diberi alas terang supaya
   warna mereknya tetap benar dan tetap terbaca. */
@media (prefers-color-scheme:dark){
  .merek img, .logo-besar{
    background:#fff; padding:4px 8px; border-radius:5px;
  }
  .merek img{height:22px; box-sizing:content-box}
  .logo-besar{padding:8px 14px}
}

/* -------------------------------------------------------- kotak pencarian */
.saring{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  background:var(--permukaan); border:1px solid var(--garis); border-radius:5px;
  padding:11px 14px;
}
.saring input[type=text]{width:auto; flex:1; min-width:150px}
.saring .centang{flex:none; font-size:.85rem; white-space:nowrap}

/* ---------------------------------------------------- termin bayar mitra */
.termin{
  display:grid; grid-template-columns:26px 1fr 1.6fr 1fr 1fr; gap:12px;
  align-items:end; padding:12px 0; border-top:1px solid var(--garis-halus);
}
.termin:first-of-type{border-top:0; padding-top:4px}
.termin-no{
  font-family:ui-monospace,monospace; font-size:.8rem; color:var(--tinta3);
  padding-bottom:11px; text-align:center;
}
@media (max-width:640px){
  .termin{grid-template-columns:26px 1fr 1fr; gap:10px}
  .termin .isian:nth-of-type(2){grid-column:2 / -1}
}

/* --------------------------------------- riwayat perintah (ketik garis miring) */
.riwayat{
  display:flex; flex-direction:column; max-height:270px; overflow-y:auto;
  border-bottom:1px solid var(--garis); margin:-8px -8px 8px -6px;
  padding:6px; gap:1px;
}
.riwayat[hidden]{display:none}
.riwayat-baris{
  text-align:left; background:transparent; border:0; border-radius:5px;
  padding:8px 11px; font:inherit; font-size:.88rem; color:var(--tinta2);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.riwayat-baris:hover, .riwayat-baris.sorot{background:var(--aksen-lembut); color:var(--aksen)}
.riwayat-kosong{padding:12px; font-size:.85rem; color:var(--tinta3); text-align:center}