/* ============================================================
   SAA — Aston Cirebon | Tema: navy + emas
   ============================================================ */
:root{
  --navy:#00205B; --navy-2:#0d3475; --gold:#c9a227; --gold-2:#e2bb45;
  --bg:#f4f6fa; --card:#ffffff; --line:#e3e8f0;
  --tx:#152136; --tx-2:#5a6b85; --tx-3:#8a99b0;
  --ok:#127a4b; --ok-bg:#e6f6ee;
  --warn:#9a6100; --warn-bg:#fff4e0;
  --bad:#b3261e; --bad-bg:#fdeceb;
  --info:#1b4f9c; --info-bg:#e8f0fd;
  --r:14px; --sh:0 1px 2px rgba(15,39,68,.06), 0 8px 24px rgba(15,39,68,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* PENTING: elemen ber-atribut [hidden] wajib benar-benar tersembunyi.
   Tanpa baris ini, .modal (display:grid) tetap tampil walau sudah di-hidden. */
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--tx);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
}
a{color:var(--info); text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:18px 16px 56px}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:var(--navy); color:#fff;
  box-shadow:0 2px 14px rgba(15,39,68,.25)}
.topbar-in{max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand-logo{display:grid; place-items:center; height:38px; flex:none}
.brand-logo img{height:30px; width:auto; display:block}
.brand-text b{display:block; font-size:14px; line-height:1.2}
.brand-text small{display:block; font-size:11px; color:#b9c7dc}
.topbar-right{display:flex; align-items:center; gap:10px}
/* lonceng jumlah tugas menunggu */
.bel{position:relative; background:rgba(255,255,255,.12); border:none; border-radius:11px;
  width:38px; height:38px; cursor:pointer; font-size:17px; line-height:1; flex:none;
  display:grid; place-items:center; transition:.15s; padding:0; font-family:inherit}
.bel:hover{background:rgba(255,255,255,.22)}
.bel-num{position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:#d93025; color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--navy); box-sizing:content-box}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.bel-num{animation:denyut 1.8s ease-in-out 3}

/* angka merah kecil di dalam tab */
.pil{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  margin-left:7px; border-radius:999px; background:#d93025; color:#fff;
  font-size:11px; font-weight:800; vertical-align:middle}
.tab.on .pil{background:#fff; color:#d93025}

/* tombol pengingat di dalam daftar */
.item-aksi{display:flex; gap:8px; align-items:center; flex:none}
.btn-ingat{padding:7px 11px; min-height:34px; font-size:13px; border-radius:9px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; color:var(--tx-2)}
.btn-ingat:hover:not(:disabled){background:#fff4e0; border-color:#f0d3a0; color:var(--warn)}
.btn-ingat:disabled{opacity:.5; cursor:not-allowed}

.who{font-size:12px; text-align:right; color:#cdd8e8; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who b{display:block; color:#fff; font-size:13px}
@media(max-width:560px){ .brand-text small{display:none} .who{display:none} }

/* ---------- Kartu & teks ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:18px; margin-bottom:16px}
h1{font-size:22px; margin:6px 0 4px}
h2{font-size:17px; margin:0 0 12px}
h3{font-size:15px; margin:0 0 8px}
.muted{color:var(--tx-2); font-size:13px; margin:0 0 12px}
.tiny{font-size:12px; color:var(--tx-3)}
.sect-title{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--navy); margin:18px 0 10px}
.sect-title:before{content:""; width:4px; height:15px; border-radius:3px; background:var(--gold)}
.sect-title:first-child{margin-top:0}

/* ---------- Tombol ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border-radius:11px; border:1px solid transparent; padding:11px 17px; font-size:14px; font-weight:600;
  font-family:inherit; transition:.15s; min-height:44px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover:not(:disabled){background:var(--navy-2)}
.btn-gold{background:linear-gradient(145deg,var(--gold),var(--gold-2)); color:var(--navy)}
.btn-gold:hover:not(:disabled){filter:brightness(1.06)}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--tx)}
.btn-ghost:hover:not(:disabled){background:#f7f9fc}
.btn-bad{background:var(--bad-bg); color:var(--bad); border-color:#f4c7c4}
.btn-bad:hover:not(:disabled){background:#fbdedc}
.btn-sm{padding:7px 12px; font-size:13px; min-height:36px}
.btn-block{width:100%}
.row-btn{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.row-btn .btn{flex:1 1 auto}

/* ---------- Form ---------- */
.grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){ .grid{grid-template-columns:1fr} }
.f{display:flex; flex-direction:column; gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:13px; font-weight:600; color:var(--tx)}
.f label .req{color:var(--bad)}
input[type=text],input[type=date],input[type=tel],input[type=email],input[type=datetime-local],textarea,select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font-size:15px;
  font-family:inherit; color:var(--tx); background:#fff}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(23,57,98,.12)}
input:disabled,textarea:disabled{background:#f5f7fa; color:var(--tx-2)}
textarea{resize:vertical; min-height:88px}
.hint{font-size:12px; color:var(--tx-3)}

/* pilihan kotak (radio/checkbox) */
.opts{display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.opt{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line);
  border-radius:11px; background:#fff; cursor:pointer; font-size:14px}
.opt:hover{border-color:#c6d2e4; background:#fafbfe}
.opt input{width:18px; height:18px; accent-color:var(--navy); flex:none; margin:0}
.opt.on{border-color:var(--navy); background:#eef3fb}

/* ---------- Menu kartu beranda ---------- */
.menu{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){ .menu{grid-template-columns:1fr} }
.mcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:18px; color:var(--tx); transition:.16s; border-top:3px solid var(--gold)}
.mcard:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,39,68,.13)}
.mcard b{display:block; font-size:16px; margin-bottom:4px}
.mcard span{font-size:13px; color:var(--tx-2)}
.mcard .ico{font-size:22px; margin-bottom:8px; display:block}

/* ---------- Daftar pengajuan ---------- */
.list{display:flex; flex-direction:column; gap:10px}
.item{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:.14s}
.item:hover{border-color:#c6d2e4; background:#fafbfe}
.item-main b{display:block; font-size:14px}
.item-main span{font-size:12px; color:var(--tx-2)}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap}
.b-wait{background:var(--warn-bg); color:var(--warn)}
.b-ok{background:var(--ok-bg); color:var(--ok)}
.b-bad{background:var(--bad-bg); color:var(--bad)}
.b-info{background:var(--info-bg); color:var(--info)}
.b-ov{background:#fff4e0; color:#9a6100; border:1px solid #f0d3a0}
.tag{display:inline-block; padding:2px 8px; border-radius:6px; background:#eef2f8; color:var(--tx-2);
  font-size:11px; font-weight:600; margin-right:6px}
.empty{padding:26px; text-align:center; color:var(--tx-3); font-size:14px;
  border:1px dashed var(--line); border-radius:12px; background:#fbfcfe}

/* ---------- Tab ---------- */
.tabs{display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px}
.tab{padding:9px 15px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; color:var(--tx-2); font-family:inherit}
.tab.on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ---------- Detail & timeline ---------- */
.kv{display:grid; grid-template-columns:170px 1fr; gap:8px 14px; font-size:14px}
@media(max-width:560px){ .kv{grid-template-columns:1fr; gap:2px 0} .kv dt{margin-top:8px} }
.kv dt{color:var(--tx-2); font-size:13px}
.kv dd{margin:0; font-weight:600; word-break:break-word}
.steps{display:flex; flex-direction:column; gap:0; margin:4px 0 0}
.step{display:flex; gap:12px; padding-bottom:16px; position:relative}
.step:not(:last-child):before{content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--line)}
.step .dot{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:#eef2f8; color:var(--tx-3); border:2px solid #fff; box-shadow:0 0 0 1px var(--line)}
.step.done .dot{background:var(--ok-bg); color:var(--ok); box-shadow:0 0 0 1px #b6e3cd}
.step.now .dot{background:var(--gold); color:var(--navy); box-shadow:0 0 0 1px var(--gold)}
.step.bad .dot{background:var(--bad-bg); color:var(--bad); box-shadow:0 0 0 1px #f4c7c4}
.step.skip .dot{background:var(--warn-bg); color:var(--warn); box-shadow:0 0 0 1px #f0d3a0}
.step.skip .step-body b{color:var(--tx-2); text-decoration:line-through}
.step-body b{display:block; font-size:14px}
.step-body span{font-size:12.5px; color:var(--tx-2)}
.sig-prev{margin-top:6px; height:46px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:3px}

.note{padding:12px 14px; border-radius:11px; font-size:13.5px; margin-bottom:14px}
.note-info{background:var(--info-bg); color:#153f80}
.note-warn{background:var(--warn-bg); color:var(--warn)}
.note-bad{background:var(--bad-bg); color:var(--bad)}

/* ---------- Login ---------- */
.login{max-width:430px; margin:8vh auto; text-align:center}
.login .logo-img{width:215px; max-width:74%; height:auto; display:block; margin:0 auto 20px}
.login h1{font-size:20px}

/* ---------- Modal tanda tangan ---------- */
.modal{position:fixed; inset:0; background:rgba(10,22,40,.55); display:grid; place-items:center; z-index:80; padding:16px}
.modal-box{background:#fff; border-radius:16px; padding:20px; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.padwrap{border:2px dashed #c6d2e4; border-radius:12px; background:#fff; padding:5px}
.pad{width:100%; height:190px; display:block; touch-action:none; border-radius:8px; background:#fff; cursor:crosshair}

/* ---------- Lain-lain ---------- */
.loader{display:flex; align-items:center; gap:10px; justify-content:center; padding:50px 0; color:var(--tx-2); font-size:14px}
.spinner{width:20px; height:20px; border:2.5px solid var(--line); border-top-color:var(--navy); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; max-width:90vw;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.28)}
.toast.bad{background:var(--bad)}
.toast.ok{background:var(--ok)}
.foot{text-align:center; font-size:12px; color:var(--tx-3); padding:0 16px 26px}
.back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--tx-2); margin-bottom:10px; cursor:pointer}
.back:hover{color:var(--navy)}