@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --maroon:        #7A1F2B;
  --maroon-deep:    #4E1119;
  --maroon-light:   #9C2E3D;
  --gold:           #E8A324;
  --gold-light:     #F3C868;
  --navy:           #0F2C59;
  --navy-deep:      #081A38;
  --paper:          #FAF7F2;
  --paper-deep:     #F0E9DD;
  --ink:            #221316;
  --ink-soft:       #6B5B5E;
  --white:          #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}
a{ text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ================= NAVBAR ================= */
.navbar{
  background: linear-gradient(120deg, var(--maroon-deep), var(--maroon) 60%, var(--maroon-light));
  padding-top:.65rem; padding-bottom:.65rem;
  box-shadow: 0 4px 18px -8px rgba(78,17,25,.45);
}
.navbar-brand{ padding:0; }
.brand-logos{ display:flex; align-items:center; gap:.65rem; }
.brand-logos img{ height:42px; width:42px; object-fit:contain; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; color:#fff; }
.brand-text .fw-bold{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; }
.brand-text small{ font-size:.7rem; opacity:.75; letter-spacing:.02em; }
@media (max-width: 575.98px){
  .brand-logos img{ height:32px; width:32px; }
  .brand-text .fw-bold{ font-size:.9rem; }
  .brand-text small{ display:none; }
}
.navbar .nav-link{ color:rgba(255,255,255,.85); font-weight:500; font-size:.92rem; padding:.5rem .9rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active{ color:var(--gold-light); }
.navbar-toggler{ border-color: rgba(255,255,255,.4); }
.navbar-toggler-icon{ filter: invert(1); }

/* ================= HERO ================= */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(120% 140% at 12% -10%, var(--navy) 0%, var(--navy-deep) 60%, #051022 100%);
  padding: 4.5rem 1.5rem 7.5rem;
  color:#fff;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-light);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(232,163,36,.35);
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1.6rem;
}
.hero .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(232,163,36,.25); }
.hero h1{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height:1.14;
  max-width: 20ch; margin:0 auto 1.1rem; letter-spacing:-.01em;
}
.hero h1 em{ font-style:normal; color:var(--gold-light); }
.hero p.lead{ max-width:48ch; margin:0 auto 2.2rem; color:rgba(255,255,255,.82); font-size:1.02rem; line-height:1.6; }
.hero-terrace{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.hero-terrace svg{ width:100%; height:auto; display:block; }

.btn-uniba-primary{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:12px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#3A2604; box-shadow:0 10px 24px -8px rgba(232,163,36,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-uniba-primary:hover{ transform:translateY(-2px); color:#3A2604; box-shadow:0 14px 28px -8px rgba(232,163,36,.6); }
.btn-uniba-outline{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:12px;
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);
  transition: transform .18s ease, background .18s ease;
}
.btn-uniba-outline:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); color:#fff; }

/* ================= SECTION ================= */
.section{ padding: 4.5rem 1.5rem; }
.section-head{ text-align:center; max-width:42rem; margin:0 auto 2.75rem; }
.section-eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--maroon); display:block; margin-bottom:.7rem;
}
.section-head h2{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:clamp(1.5rem, 3vw, 2.1rem); margin-bottom:.5rem; }
.section-head p{ color:var(--ink-soft); font-size:.98rem; }

/* ================= KARTU LAYANAN ================= */
.card-layanan{
  background:var(--white); border:1px solid var(--paper-deep); border-radius:18px;
  padding:2rem 1.75rem; height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-layanan::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.card-layanan:hover{ transform:translateY(-6px); box-shadow:0 20px 36px -18px rgba(15,44,89,.28); border-color:transparent; }
.card-layanan:hover::before{ transform:scaleX(1); }
.card-layanan .icon{
  width:52px; height:52px; border-radius:14px; background:#EFF3F9; color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.1rem;
}
.card-layanan h5{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; margin-bottom:.4rem; }
.card-layanan p{ color:var(--ink-soft); font-size:.88rem; line-height:1.55; flex-grow:1; }
.card-layanan .meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.card-layanan .meta span{
  font-size:.72rem; font-weight:600; color:var(--maroon); background:#FBEFE9;
  padding:.28rem .6rem; border-radius:999px;
}
.card-layanan .btn{ margin-top:auto; }

/* ================= BADGE STATUS ================= */
.badge-status{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.8rem;
  padding:.4rem .8rem; border-radius:999px;
}
.badge-diajukan{ background:#EAF0FB; color:#2C5CC5; }
.badge-diverifikasi{ background:#F3E9FB; color:#7A3FC2; }
.badge-diproses{ background:#FFF3DA; color:#B8790C; }
.badge-selesai{ background:#E4F6EA; color:#1E8A4C; }
.badge-ditolak{ background:#FBE7E7; color:#C22C2C; }

/* ================= FORM ================= */
.form-uniba label{ font-weight:600; font-size:.88rem; color:var(--ink); margin-bottom:.35rem; }
.form-uniba .form-control, .form-uniba .form-select{
  border-radius:10px; border:1.5px solid #E4DCD0; padding:.6rem .9rem; font-size:.92rem;
}
.form-uniba .form-control:focus, .form-uniba .form-select:focus{
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,44,89,.12);
}
.form-uniba .form-text{ font-size:.78rem; }
.card-form{
  background:var(--white); border:1px solid var(--paper-deep); border-radius:20px;
  padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: 0 20px 50px -30px rgba(34,19,22,.4);
}

/* ================= TIMELINE STATUS ================= */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{ content:''; position:absolute; left:.6rem; top:.4rem; bottom:.4rem; width:2px; background:var(--paper-deep); }
.timeline-item{ position:relative; padding-bottom:1.6rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item .dot{
  position:absolute; left:-2.2rem; top:.15rem; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--white); border:2px solid var(--navy); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:.65rem;
}
.timeline-item.active .dot{ background:var(--navy); color:#fff; }
.timeline-item h6{ font-weight:700; font-size:.92rem; margin-bottom:.1rem; }
.timeline-item p{ font-size:.82rem; color:var(--ink-soft); margin-bottom:0; }

/* ================= WA FLOAT ================= */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:1050;
  display:flex; align-items:center; gap:.6rem; background:#25D366; color:#fff; text-decoration:none;
  padding:.8rem 1rem; border-radius:999px; box-shadow:0 10px 24px -6px rgba(0,0,0,.35);
  font-weight:600; font-size:.9rem; transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float i{ font-size:1.4rem; line-height:1; }
.wa-float:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 14px 28px -6px rgba(0,0,0,.4); }
@media (max-width: 575.98px){
  .wa-float{ right:14px; bottom:14px; padding:.85rem; border-radius:50%; }
  .wa-float span{ display:none; }
  .wa-float i{ font-size:1.6rem; }
}

/* ================= FOOTER ================= */
.footer{
  position:relative;
  background: radial-gradient(120% 160% at 85% 110%, var(--navy) 0%, var(--navy-deep) 55%, #051022 100%);
  color: rgba(255,255,255,.82); padding-top:3.25rem; padding-bottom:2rem; margin-top:4rem;
}
.footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon)); }
.footer-brand{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#fff; margin-bottom:.25rem; }
.footer-sub{ color:rgba(255,255,255,.6); font-size:.85rem; }
.footer-logos{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:clamp(1.1rem,4vw,2rem); margin-bottom:1.75rem; }
.footer-logos img{
  height: clamp(26px, 6vw, 46px); width:auto; max-width:100%; object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); opacity:.95;
  transition: transform .18s ease, opacity .18s ease;
}
.footer-logos img:hover{ transform:translateY(-3px); opacity:1; }
@media (max-width:480px){ .footer-logos{ gap:1.1rem 1.4rem; } .footer-logos img{ height:24px; } }
.footer-social{ display:flex; justify-content:center; align-items:center; gap:.6rem; margin:0 0 1.75rem; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.85);
  text-decoration:none; font-size:.95rem; transition: transform .18s ease, background .18s ease, color .18s ease;
}
.footer-social a:hover{ transform:translateY(-3px); background:linear-gradient(135deg, var(--gold-light), var(--gold)); border-color:transparent; color:var(--navy-deep); }
.footer-divider{ border:none; border-top:1px solid rgba(255,255,255,.12); max-width:22rem; margin:1.5rem auto; }
.footer p{ margin-bottom:.35rem; font-size:.9rem; }
.footer i{ color: var(--gold-light); margin-right:.3rem; }
.footer .text-muted{ color: rgba(255,255,255,.5) !important; }
.footer .credit{ color: var(--gold-light); font-weight:600; }

/* ================= ADMIN LAYOUT ================= */
.admin-body{ background: var(--paper); font-family: var(--font-body); min-height:100vh; }
.admin-sidebar{
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  min-height:100vh; color:#fff; width:250px; flex-shrink:0;
  position:fixed; top:0; left:0; bottom:0; z-index:1040; overflow-y:auto;
  transition: transform .2s ease;
}
.admin-sidebar .brand{ display:flex; align-items:center; gap:.65rem; padding:1.3rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-sidebar .brand img{ height:36px; width:36px; object-fit:contain; }
.admin-sidebar .brand span{ font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.2; }
.admin-sidebar nav{ padding:1rem .75rem; }
.admin-sidebar .nav-link{
  color:rgba(255,255,255,.72); font-size:.88rem; font-weight:500; padding:.7rem .9rem; border-radius:10px;
  display:flex; align-items:center; gap:.7rem; margin-bottom:.2rem; transition: background .15s ease, color .15s ease;
}
.admin-sidebar .nav-link i{ width:18px; text-align:center; }
.admin-sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-sidebar .nav-link.active{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#3A2604; font-weight:700; }
.admin-main{ margin-left:250px; padding:1.75rem 1.75rem 3rem; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--paper-deep);
  border-radius:14px; padding:.85rem 1.25rem; margin-bottom:1.75rem;
}
.admin-topbar h4{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:0; }
.sidebar-toggle-btn{ display:none; }
@media (max-width: 991.98px){
  .admin-sidebar{ transform: translateX(-100%); }
  .admin-sidebar.show{ transform: translateX(0); }
  .admin-main{ margin-left:0; }
  .sidebar-toggle-btn{ display:inline-flex; }
}

.stat-card{
  background:#fff; border:1px solid var(--paper-deep); border-radius:16px; padding:1.4rem 1.5rem;
  display:flex; align-items:center; gap:1rem; height:100%;
}
.stat-card .icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.stat-card .value{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1; margin-bottom:.2rem; }
.stat-card .label{ font-size:.8rem; color:var(--ink-soft); }

.table-uniba{ background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--paper-deep); }
.table-uniba thead th{
  background: var(--paper-deep); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); font-weight:700; border:none; padding:.85rem 1rem;
}
.table-uniba tbody td{ padding:.85rem 1rem; vertical-align:middle; font-size:.88rem; border-color:var(--paper-deep); }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 140% at 15% -10%, var(--navy) 0%, var(--navy-deep) 55%, #051022 100%);
  padding:1.5rem;
}
.login-card{ background:#fff; border-radius:20px; padding:2.5rem; width:100%; max-width:24rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); }
.login-card .brand{ text-align:center; margin-bottom:1.75rem; }
.login-card .brand img{ height:64px; margin-bottom:.75rem; }
.login-card .brand h5{ font-family:var(--font-display); font-weight:600; margin-bottom:.15rem; }
.login-card .brand p{ font-size:.82rem; color:var(--ink-soft); margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}