@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Palet warna diambil dari logo UNIBA */
  --navy-950:#050F22;
  --navy-900:#071E3E;
  --navy-800:#0E2C55;
  --navy-700:#173B6B;
  --navy-100:#E8ECF5;
  --navy-050:#F3F5FA;

  --gold-700:#9C7A17;
  --gold-600:#C9A227;
  --gold-500:#D9B94E;
  --gold-100:#F7EFD6;

  --cream:#FAF8F3;
  --surface:#FFFFFF;
  --ink:#1B2130;
  --ink-soft:#5A6270;
  --line:#E4E1D5;

  --brick-600:#A8412B;
  --brick-100:#F1DAD3;
  --green-600:#2F7A3B;
  --green-100:#DCEBD9;

  --shadow-sm: 0 1px 2px rgba(7,30,62,0.06), 0 1px 1px rgba(7,30,62,0.04);
  --shadow-md: 0 10px 30px -10px rgba(7,30,62,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(7,30,62,0.28);
  --radius: 14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Playfair Display',serif;font-weight:600;letter-spacing:-0.01em;color:var(--navy-900);}
a{color:var(--navy-800);}
p{margin:0 0 12px;}

/* ---------------- Masthead ---------------- */
.masthead{
  background:linear-gradient(135deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
  border-bottom:3px solid var(--gold-600);
  position:relative;
}
.masthead::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--gold-700),var(--gold-500) 50%,var(--gold-700));
}
.masthead-inner{
  max-width:1080px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand .mark{
  width:52px;height:52px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
}
.brand .mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));}
.brand h1{font-size:20px;margin:0;color:#fff;line-height:1.2;letter-spacing:0.01em;}
.brand h1 .accent{color:var(--gold-500);}
.tagline{color:#C9D2E4;font-size:12.5px;margin-top:3px;font-family:'Inter',sans-serif;letter-spacing:0.01em;}

.nav-links{display:flex;gap:6px;font-size:13.5px;align-items:center;}
.nav-links a{
  color:#E7ECF5;text-decoration:none;padding:9px 16px;border-radius:999px;
  transition:background 0.18s ease,color 0.18s ease;font-weight:500;
}
.nav-links a:hover{background:rgba(255,255,255,0.10);color:#fff;}
.nav-links a.cta{background:var(--gold-600);color:var(--navy-950);font-weight:700;}
.nav-links a.cta:hover{background:var(--gold-500);}

.nav-toggle{display:none;background:none;border:1.5px solid rgba(255,255,255,0.35);color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;}

/* ---------------- Layout ---------------- */
.wrap{max-width:720px;margin:0 auto;padding:44px 24px 70px;}
.wrap.wide{max-width:1100px;}

.hero-strip{
  background:var(--navy-900);
  color:#fff;
  padding:2px 0 0;
}
.hero-inner{
  max-width:720px;margin:0 auto;padding:40px 24px 46px;text-align:left;
}
.hero-inner.wide{max-width:1100px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,162,39,0.16);border:1px solid rgba(217,185,78,0.45);
  color:var(--gold-500);font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.hero-inner h2{color:#fff;font-size:30px;margin:0 0 10px;}
.hero-inner p{color:#C9D2E4;font-size:14.5px;max-width:560px;margin:0;}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:34px 32px;
  margin-top:-30px;
  position:relative;
}

.section-title{font-size:22px;margin:0 0 8px;}
.section-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:26px;}

/* ---------------- Forms ---------------- */
.field{margin-bottom:22px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy-900);margin-bottom:7px;}
.field .hint{font-size:12.5px;color:var(--ink-soft);margin-top:5px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}

input[type=text],input[type=password],input[type=date],input[type=email],textarea,select{
  width:100%;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--navy-050);border:1.5px solid var(--line);border-radius:9px;
  padding:11px 13px;outline:none;transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--navy-700);background:#fff;
  box-shadow:0 0 0 3px rgba(23,59,107,0.12);
}
textarea{resize:vertical;min-height:96px;line-height:1.55;}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235A6270'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}

.checkrow{display:flex;flex-wrap:wrap;gap:10px 22px;}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;}
.chk input{width:16px;height:16px;accent-color:var(--navy-800);}

.radiogroup{display:flex;flex-wrap:wrap;gap:8px;}
.radiogroup label{border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;cursor:pointer;color:var(--ink-soft);transition:all 0.15s ease;}
.radiogroup input{display:none;}
.radiogroup label:has(input:checked){border-color:var(--navy-800);background:var(--navy-900);color:#fff;font-weight:600;}

.toggle-line{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--gold-100);border-left:3px solid var(--gold-600);border-radius:8px;margin-bottom:24px;font-size:13.5px;
}

.btn{
  font-family:'Inter',sans-serif;font-weight:700;font-size:14px;border:none;cursor:pointer;
  padding:13px 28px;background:var(--navy-800);color:#fff;display:inline-block;text-decoration:none;
  border-radius:9px;transition:background 0.18s ease, transform 0.1s ease;
}
.btn:hover{background:var(--navy-900);}
.btn:active{transform:translateY(1px);}
.btn.gold{background:var(--gold-600);color:var(--navy-950);}
.btn.gold:hover{background:var(--gold-500);}
.btn.secondary{background:none;border:1.5px solid var(--navy-800);color:var(--navy-800);padding:11.5px 26px;}
.btn.secondary:hover{background:var(--navy-100);}
.btn.small{padding:8px 16px;font-size:13px;}
.btn.danger{background:var(--brick-600);}
.btn.danger:hover{background:#7f2f1e;}

.notice{padding:13px 16px;font-size:13.5px;margin-bottom:20px;border-radius:9px;}
.notice.warn{background:var(--brick-100);border-left:3px solid var(--brick-600);color:#5a2013;}
.notice.info{background:var(--gold-100);border-left:3px solid var(--gold-600);color:#5c3a0d;}
.notice.ok{background:var(--green-100);border-left:3px solid var(--green-600);color:#1f4a24;}

.ticket{
  border:1.5px dashed var(--gold-600);border-radius:12px;padding:26px;margin-top:20px;
  background:linear-gradient(135deg,var(--gold-100),var(--surface));
}
.ticket .code{font-family:'Playfair Display',serif;font-size:28px;color:var(--navy-900);letter-spacing:0.02em;}
.ticket .label{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);}

.status-steps{list-style:none;padding:0;margin:26px 0;border-left:2px solid var(--line);}
.status-steps li{position:relative;padding:0 0 22px 22px;font-size:14px;color:var(--ink-soft);}
.status-steps li::before{content:'';position:absolute;left:-6.5px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--line);}
.status-steps li.done{color:var(--navy-900);font-weight:600;}
.status-steps li.done::before{background:var(--gold-600);border-color:var(--gold-600);}
.status-steps li .when{font-weight:400;color:var(--ink-soft);font-size:12.5px;display:block;margin-top:2px;}

.log-note{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-top:10px;font-size:13.5px;background:var(--surface);}
.log-note .meta{font-size:11.5px;color:var(--ink-soft);margin-bottom:4px;}

.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 28px;}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;min-width:130px;
  box-shadow:var(--shadow-sm);
}
.stat .n{font-family:'Playfair Display',serif;font-size:28px;color:var(--navy-900);}
.stat .l{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.stat.alert{border-color:var(--brick-600);background:#FDF6F4;}
.stat.alert .n{color:var(--brick-600);}
.stat.gold{border-color:var(--gold-600);}
.stat.gold .n{color:var(--gold-700);}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center;}
.filters select{border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;width:auto;min-width:160px;background:var(--surface);}
.filters form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

.table-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface);}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
th{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);font-weight:700;background:var(--navy-050);}
tr.row td a{color:var(--ink);text-decoration:none;display:block;}
tr.row:hover{background:var(--navy-050);}
tr.row:last-child td{border-bottom:none;}

.badge{padding:3px 11px;font-size:11.5px;font-weight:700;display:inline-block;border-radius:999px;letter-spacing:0.01em;}
.badge.diterima{background:var(--gold-100);color:#7a4d10;}
.badge.diproses{background:var(--navy-100);color:var(--navy-900);}
.badge.selesai{background:var(--green-100);color:#1f4a24;}
.badge.ditolak{background:var(--brick-100);color:var(--brick-600);}
.badge.darurat{background:var(--brick-600);color:#fff;}
.badge.tinggi{background:var(--brick-100);color:var(--brick-600);}
.badge.sedang{background:var(--gold-100);color:#7a4d10;}
.badge.rendah{background:#E7E9E5;color:var(--ink-soft);}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin:20px 0;font-size:13.5px;}
.detail-grid .k{color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:0.04em;}
.detail-grid .v{margin-top:3px;}

.empty{color:var(--ink-soft);font-size:13.5px;padding:36px 0;text-align:center;}
.pin-box{max-width:360px;margin-top:20px;}

.footer-note{max-width:1100px;margin:0 auto;padding:26px 24px 40px;color:var(--ink-soft);font-size:12.5px;text-align:center;}

@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-900);
    flex-direction:column;gap:2px;padding:12px;border-bottom:3px solid var(--gold-600);z-index:20;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 16px;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .masthead-inner{position:relative;}
  .card{padding:26px 20px;}
  .hero-inner h2{font-size:24px;}
}