/* ==========================================================================
   UNJ — Verifikasi Dokumen Elektronik
   Design system: gradient kuning -> hijau (identitas UNJ)
   ========================================================================== */

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

:root{
  --green-950:#04291B;
  --green-900:#063D28;
  --green-800:#08543A;
  --green-700:#0B5F3C;
  --green-600:#0E7A4C;
  --green-500:#12855A;
  --green-300:#5FBF92;
  --gold-600:#D99A05;
  --gold-500:#F2B705;
  --gold-400:#FFC53D;
  --gold-300:#FFD75E;
  --gold-100:#FFF1C2;
  --cream:#FFFCF3;
  --cream-2:#FFF8E6;
  --ink:#0D1B15;
  --ink-soft:#42574D;
  --ink-mute:#6E8378;
  --line:#E7E2D2;
  --white:#ffffff;
  --ok:#0E7A4C;
  --ok-bg:#E7F7EE;
  --warn:#B47600;
  --danger:#B3261E;

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-xs:0 1px 2px rgba(6,61,40,.06);
  --shadow-sm:0 2px 8px rgba(6,61,40,.07), 0 1px 2px rgba(6,61,40,.04);
  --shadow-md:0 10px 30px -12px rgba(6,61,40,.20), 0 2px 8px rgba(6,61,40,.06);
  --shadow-lg:0 30px 70px -30px rgba(6,61,40,.35), 0 8px 24px -12px rgba(6,61,40,.12);

  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Fraunces", "Plus Jakarta Sans", Georgia, serif;

  --nav-h:74px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(242,183,5,.20), transparent 65%),
    radial-gradient(800px 480px at 6% 4%, rgba(18,133,90,.14), transparent 62%),
    radial-gradient(900px 600px at 50% 108%, rgba(255,215,94,.18), transparent 65%);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0; line-height:1.2; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.01em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,252,243,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(6,61,40,.08);
}
.nav-in{height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(6,61,40,.16))}
.brand-txt{display:flex; flex-direction:column; min-width:0}
.brand-txt strong{font-size:15px; letter-spacing:-.01em; line-height:1.15; color:var(--green-900)}
.brand-txt span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-links a{
  padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:.18s ease; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.nav-links a:hover{color:var(--green-800); background:rgba(18,133,90,.09)}
.nav-links a.is-active{color:var(--green-800); background:rgba(242,183,5,.24)}
.nav-links a svg{width:15px; height:15px; opacity:.85}
.nav-cta{
  margin-left:6px; padding:11px 18px !important; color:#fff !important;
  background:linear-gradient(135deg,var(--green-600),var(--green-800)) !important;
  box-shadow:0 8px 20px -10px rgba(6,61,40,.7);
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(6,61,40,.75)}
.nav-burger{display:none; margin-left:auto; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; align-items:center; justify-content:center}
.nav-burger svg{width:20px;height:20px;color:var(--green-800)}

/* ---------- Hero ---------- */
.hero{padding:34px 0 0}
.hero-card{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:linear-gradient(125deg, var(--green-950) 0%, var(--green-800) 42%, var(--green-600) 74%, #1E9E6A 100%);
  box-shadow:var(--shadow-lg); padding:clamp(28px,4.4vw,58px);
  color:#fff; isolation:isolate;
}
.hero-card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.9;
  background:
    radial-gradient(620px 300px at 92% 6%, rgba(242,183,5,.42), transparent 62%),
    radial-gradient(520px 320px at 2% 96%, rgba(255,215,94,.24), transparent 65%);
}
.hero-card::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 78% 18%, #000 0%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 78% 18%, #000 0%, transparent 62%);
}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,52px); align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 9px;
  border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); color:#FFF6DA;
  backdrop-filter:blur(6px);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-400); box-shadow:0 0 0 4px rgba(242,183,5,.24)}
.hero h1{
  font-family:var(--font-display); font-weight:700; margin:18px 0 0;
  font-size:clamp(30px,4.4vw,54px); line-height:1.06; letter-spacing:-.03em;
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--gold-300),var(--gold-500) 52%,#FFE9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{margin-top:16px; max-width:56ch; color:#E4F2E9; font-size:clamp(14.5px,1.35vw,16.5px); line-height:1.68}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.hbadge{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#EAF6EE;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); padding:8px 12px; border-radius:999px;
}
.hbadge svg{width:15px;height:15px;color:var(--gold-300)}

/* hero side card */
.hero-side{
  position:relative; border-radius:22px; padding:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(10px);
}
.hero-side h3{font-size:14px; letter-spacing:.02em; color:#FFF7E3; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.hero-side h3 svg{width:17px;height:17px;color:var(--gold-300)}
.side-list li{display:flex; gap:11px; padding:9px 0; font-size:13.5px; color:#E9F5EE; border-top:1px dashed rgba(255,255,255,.18)}
.side-list li:first-child{border-top:0}
.side-list .tick{flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:rgba(242,183,5,.22); display:grid; place-items:center; margin-top:2px}
.side-list .tick svg{width:12px;height:12px;color:var(--gold-300)}

/* ---------- Search / verify form ---------- */
.search-shell{
  position:relative; margin-top:-34px; z-index:20;
}
.search-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px;
}
.search-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.search-head h2{font-size:16.5px; font-weight:800; letter-spacing:-.01em}
.search-head .hint{font-size:12.5px; color:var(--ink-mute); font-weight:500}
.search-grid{display:grid; grid-template-columns:1fr 304px; gap:16px; align-items:stretch}
.field-main{display:flex; flex-direction:column; gap:9px}
.input-wrap{position:relative; display:flex; align-items:center}
.input-wrap .ic{position:absolute; left:16px; width:19px; height:19px; color:var(--green-600); pointer-events:none}
.input-wrap input{
  width:100%; height:56px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--cream-2); padding:0 16px 0 46px; font-size:15.5px; font-weight:600;
  color:var(--ink); font-family:inherit; transition:.18s ease; letter-spacing:.01em;
}
.input-wrap input::placeholder{font-weight:500; color:#9AA9A1; letter-spacing:0}
.input-wrap input:focus{outline:none; border-color:var(--green-500); background:#fff; box-shadow:0 0 0 4px rgba(18,133,90,.13)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  border:0; border-radius:14px; font-weight:700; font-size:15px; height:56px; padding:0 26px;
  transition:.18s ease; white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{color:#08281B; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); box-shadow:0 12px 26px -14px rgba(217,154,5,.85)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 30px -14px rgba(217,154,5,.95); filter:brightness(1.03)}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn-green{color:#fff; background:linear-gradient(135deg,var(--green-600),var(--green-800)); box-shadow:0 12px 26px -14px rgba(6,61,40,.9)}
.btn-green:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn-ghost{background:#fff; border:1.5px solid var(--line); color:var(--ink-soft); height:46px; font-size:14px; padding:0 18px; border-radius:12px}
.btn-ghost:hover{border-color:var(--green-300); color:var(--green-800); background:rgba(18,133,90,.05)}
.btn-sm{height:40px; font-size:13.5px; padding:0 15px; border-radius:11px}
.btn-danger{background:#FDECEA; color:var(--danger); border:1.5px solid #F6C9C4; height:40px; font-size:13.5px; padding:0 15px; border-radius:11px}
.btn-danger:hover{background:#FBDDD9}

/* reCAPTCHA (mock / slot) */
.recaptcha{
  width:100%; max-width:304px; height:78px; border-radius:3px;
  background:#F9F9F9; border:1px solid #D3D3D3; box-shadow:0 0 4px 1px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:12px; padding:0 12px; position:relative; overflow:hidden;
}
.recaptcha .rc-box{
  width:28px; height:28px; border-radius:2px; border:2px solid #C1C1C1; background:#fff;
  display:grid; place-items:center; cursor:pointer; flex:0 0 auto; transition:.15s ease;
}
.recaptcha .rc-box:hover{border-color:#9AA0A6}
.recaptcha .rc-box svg{width:20px; height:20px; color:#0E7A4C; opacity:0; transform:scale(.4); transition:.18s cubic-bezier(.2,1.4,.5,1)}
.recaptcha.checked .rc-box svg{opacity:1; transform:scale(1)}
.recaptcha .rc-label{font-size:14px; color:#222; font-family:Roboto, var(--font); flex:1; cursor:pointer; user-select:none}
.recaptcha .rc-brand{display:flex; flex-direction:column; align-items:center; gap:2px; opacity:.9}
.recaptcha .rc-brand img{width:30px;height:30px;object-fit:contain}
.recaptcha .rc-brand span{font-size:8px; color:#555; letter-spacing:.02em; font-family:Roboto, var(--font)}
.recaptcha.checked{border-color:#37B36B}
.recaptcha .rc-spin{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px;height:22px; border:2.5px solid #E5E5E5; border-top-color:#4285F4; border-radius:50%; animation:spin .8s linear infinite; display:none}
.recaptcha.loading .rc-spin{display:block}
.recaptcha.loading .rc-brand{visibility:hidden}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

.form-msg{margin-top:12px; font-size:13.5px; font-weight:600; display:none; align-items:center; gap:8px; padding:11px 14px; border-radius:12px}
.form-msg.show{display:flex}
.form-msg.err{background:#FDECEA; color:var(--danger); border:1px solid #F6C9C4}
.form-msg.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #C5E9D6}

/* ---------- Sections ---------- */
.section{padding:clamp(46px,6vw,80px) 0 0}
.sec-head{max-width:640px; margin-bottom:30px}
.sec-kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green-700); margin-bottom:12px;
}
.sec-kicker::before{content:""; width:24px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--gold-500),var(--green-500))}
.sec-head h2{font-family:var(--font-display); font-size:clamp(23px,2.7vw,34px); font-weight:700; letter-spacing:-.025em; color:var(--green-950)}
.sec-head p{margin-top:10px; color:var(--ink-mute); font-size:15px}

.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px 24px; box-shadow:var(--shadow-sm); overflow:hidden; transition:.22s ease;
}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#DCEBD9}
.step .num{
  position:absolute; right:16px; top:10px; font-family:var(--font-display); font-size:56px; font-weight:700;
  color:rgba(6,61,40,.055); line-height:1; letter-spacing:-.05em;
}
.step .ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg,var(--gold-100),#E9F7EF); border:1px solid #E2EEDD;
}
.step .ico svg{width:23px;height:23px;color:var(--green-700)}
.step h3{font-size:16px; font-weight:800; margin-bottom:7px; letter-spacing:-.015em}
.step p{font-size:13.5px; color:var(--ink-mute); line-height:1.62}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft);
  box-shadow:var(--shadow-xs); transition:.18s ease;
}
.chip:hover{border-color:var(--green-300); color:var(--green-800); transform:translateY(-1px)}
.chip svg{width:15px;height:15px;color:var(--green-600)}

.strip{
  margin-top:clamp(46px,6vw,72px); border-radius:var(--radius-xl); overflow:hidden; position:relative;
  background:linear-gradient(120deg,var(--green-900),var(--green-700) 55%,#14996A);
  color:#fff; padding:clamp(26px,3.6vw,42px); box-shadow:var(--shadow-md);
}
.strip::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px 240px at 88% 0%, rgba(242,183,5,.36), transparent 60%);
}
.strip-in{position:relative; z-index:2; display:flex; align-items:center; gap:26px; justify-content:space-between; flex-wrap:wrap}
.strip h3{font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); font-weight:700}
.strip p{margin-top:6px; color:#DDF0E5; font-size:14px; max-width:56ch}
.strip-stats{display:flex; gap:26px; flex-wrap:wrap}
.stat b{display:block; font-size:clamp(24px,3vw,34px); font-family:var(--font-display); color:var(--gold-300); line-height:1}
.stat span{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#CDE7DA; font-weight:700}

/* ---------- Footer ---------- */
.footer{margin-top:clamp(50px,7vw,90px); background:var(--green-950); color:#CFE6D9; padding:52px 0 26px}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1.1fr; gap:34px}
.footer h4{color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.footer .brand-txt strong{color:#fff}
.footer .brand-txt span{color:#8FB8A3}
.footer p{font-size:13.5px; color:#A9C9B8; line-height:1.7}
.footer ul li{margin-bottom:9px}
.footer ul a{font-size:13.5px; color:#C6DFD1; transition:.15s}
.footer ul a:hover{color:var(--gold-300)}
.socials{display:flex; gap:10px; margin-top:16px}
.socials a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#DCEFE4; transition:.18s ease;
}
.socials a:hover{background:var(--gold-500); color:#0A2A1D; border-color:var(--gold-500); transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.footer-bot{
  margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#8FB8A3;
}
.bse-note{display:flex; align-items:center; gap:9px; font-size:12px; color:#8FB8A3}
.bse-note svg{width:15px;height:15px;color:var(--green-300)}

/* ---------- Verify result page ---------- */
.page-head{padding:26px 0 0}
.crumbs{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-mute); font-weight:600; margin-bottom:16px; flex-wrap:wrap}
.crumbs a:hover{color:var(--green-700)}
.crumbs svg{width:13px;height:13px; opacity:.6}
.v-hero{
  border-radius:var(--radius-xl); padding:clamp(22px,3.2vw,34px); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--green-950),var(--green-800) 55%,#14996A); box-shadow:var(--shadow-md);
}
.v-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(520px 220px at 90% -20%, rgba(242,183,5,.38), transparent 62%)}
.v-hero-in{position:relative; z-index:2; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.v-hero .logo-badge{
  width:62px;height:62px;border-radius:18px; background:rgba(255,255,255,.95); display:grid; place-items:center;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5); flex:0 0 auto;
}
.v-hero .logo-badge img{width:44px;height:44px;object-fit:contain}
.v-hero h1{font-family:var(--font-display); font-size:clamp(20px,2.6vw,30px); font-weight:700; letter-spacing:-.02em}
.v-hero .sub{font-size:13px; color:#CDE7DA; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.v-hero .stamp{margin-left:auto; text-align:right}
.badge-valid{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(122,224,171,.5); color:#EFFDF4;
  font-weight:800; font-size:14px; letter-spacing:.02em;
}
.badge-valid .pulse{position:relative; width:10px;height:10px;border-radius:50%; background:#5FE39B; box-shadow:0 0 0 0 rgba(95,227,155,.7); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,227,155,.65)}70%{box-shadow:0 0 0 12px rgba(95,227,155,0)}100%{box-shadow:0 0 0 0 rgba(95,227,155,0)}}
.stamp small{display:block; margin-top:8px; font-size:11.5px; color:#BFDDCD; letter-spacing:.06em}

.mini-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
.mini{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px;
}
.mini .mi{width:42px;height:42px;border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:linear-gradient(140deg,#FFF6D9,#E8F7EE); border:1px solid #E3EFDD}
.mini .mi svg{width:20px;height:20px;color:var(--green-700)}
.mini .mt{min-width:0}
.mini .mt span{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); font-weight:800; margin-bottom:3px}
.mini .mt b{font-size:14.5px; font-weight:800; color:var(--green-900); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini .mt em{font-style:normal; font-size:12px; color:var(--ok); font-weight:700}
.mini .mt em.lock{color:var(--warn)}

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); padding:clamp(20px,3vw,32px); margin-top:18px;
}
.panel-head{display:flex; align-items:center; gap:11px; padding-bottom:16px; border-bottom:1px dashed var(--line); margin-bottom:20px}
.panel-head .ph-ic{width:36px;height:36px;border-radius:11px; display:grid; place-items:center; background:linear-gradient(140deg,var(--gold-100),#E9F7EF); border:1px solid #E4EFDE}
.panel-head .ph-ic svg{width:18px;height:18px;color:var(--green-700)}
.panel-head h2{font-size:15px; font-weight:800; letter-spacing:-.01em}
.panel-head .ph-note{margin-left:auto; font-size:12px; color:var(--ink-mute); font-weight:600}

.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px}
.field{padding:14px 0; border-bottom:1px solid #F1EDE0; min-width:0}
.field:last-child,.field:nth-last-child(2):nth-child(odd){border-bottom:0}
.field dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:800; margin-bottom:5px}
.field dd{margin:0; font-size:15px; font-weight:700; color:var(--ink); word-break:break-word; line-height:1.45}
.field dd .tag{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; padding:5px 11px; border-radius:8px;
  background:var(--ok-bg); color:var(--ok); border:1px solid #CBEBD9;
}
.field dd .tag.lock{background:#FFF6E0; color:var(--warn); border-color:#F4E0B0}
.field dd .tag.neutral{background:#EFF3F0; color:var(--ink-soft); border-color:#E1E8E2}
.field.tt{font-variant-numeric:tabular-nums; letter-spacing:.02em}

.akreditasi-list{display:grid; gap:10px}
.akreditasi-list li{
  display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:14px;
  background:linear-gradient(120deg,#FFFBF0,#F3FAF5); border:1px solid #EBF1E3; font-size:13.5px; color:var(--ink-soft);
}
.akreditasi-list li b{color:var(--green-900)}
.akreditasi-list .ai{width:26px;height:26px;border-radius:8px; display:grid; place-items:center; background:#fff; border:1px solid #E4EDDD; flex:0 0 auto}
.akreditasi-list .ai svg{width:14px;height:14px;color:var(--gold-600)}

.signers{display:grid; gap:12px}
.signer{display:flex; gap:13px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-xs)}
.signer .av{width:42px;height:42px;border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg,var(--green-700),var(--green-500)); color:#fff; font-weight:800; font-size:14px; flex:0 0 auto}
.signer .si b{display:block; font-size:14.5px; color:var(--ink)}
.signer .si span{font-size:12.5px; color:var(--ink-mute); display:block}
.signer .si em{font-style:normal; font-size:12px; color:var(--green-700); font-weight:700}
.signer .ok-ic{margin-left:auto; color:var(--ok); display:grid; place-items:center}
.signer .ok-ic svg{width:19px;height:19px}

.two-col{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start}

/* PDF viewer */
.viewer{position:relative}
.viewer-bar{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px 14px 0 0;
  background:linear-gradient(120deg,var(--green-900),var(--green-700)); color:#DFF1E6; font-size:12.5px; font-weight:700;
}
.viewer-bar svg{width:15px;height:15px;color:var(--gold-300)}
.viewer-bar .lock{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); color:#FFF0C9}
.viewer-stage{
  position:relative; background:#0C1F18; border:1px solid #123B2A; border-top:0; border-radius:0 0 14px 14px;
  padding:14px; min-height:300px; display:grid; place-items:center; overflow:hidden;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.viewer-stage canvas{max-width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 18px 40px -20px rgba(0,0,0,.8); pointer-events:none}
.viewer-shield{position:absolute; inset:0; z-index:3}
.viewer-loading{position:absolute; inset:0; display:grid; place-items:center; color:#8FBEAA; font-size:13px; font-weight:600; gap:12px; z-index:2}
.spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.15); border-top-color:var(--gold-400); border-radius:50%; animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.viewer-foot{
  display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:12px;
  background:#FFF8E4; border:1px solid #F3E3B6; font-size:12.5px; color:#6C5410; line-height:1.6;
}
.viewer-foot svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:var(--gold-600)}
.zoom-controls{display:flex; gap:6px; margin-left:auto}
.zoom-controls button{
  width:26px;height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12);
  color:#EAFAF1; cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; transition:.15s;
}
.zoom-controls button:hover{background:rgba(255,255,255,.24)}

.doc-meta-panel{margin-top:18px}
.pengesahan-note{
  margin-top:16px; display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg,#F4FAF6,#FFFBF0); border:1px solid #E3EDDD; font-size:12.8px; color:var(--ink-soft); line-height:1.65;
}
.pengesahan-note .bsre{
  width:52px;height:52px;border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(140deg,#0E5AA7,#1B7FD1); color:#fff; box-shadow:0 10px 22px -12px rgba(14,90,167,.8);
}
.pengesahan-note .bsre svg{width:26px;height:26px}
.pengesahan-note b{color:var(--green-900)}

.notfound{
  text-align:center; padding:clamp(40px,7vw,80px) 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
}
.notfound .nf-ic{width:74px;height:74px;border-radius:22px; margin:0 auto 20px; display:grid; place-items:center; background:#FFF4E5; border:1px solid #F7E2BD}
.notfound .nf-ic svg{width:34px;height:34px;color:var(--warn)}
.notfound h2{font-family:var(--font-display); font-size:clamp(22px,3vw,30px); margin-bottom:10px}
.notfound p{color:var(--ink-mute); max-width:52ch; margin:0 auto 22px; font-size:14.5px}

/* ---------- Dashboard ---------- */
.dash-wrap{display:grid; grid-template-columns:250px 1fr; gap:22px; padding-top:26px; align-items:start}
.dash-side{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm);
  position:sticky; top:calc(var(--nav-h) + 18px);
}
.dash-side .who{display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:12px}
.dash-side .who .av{width:40px;height:40px;border-radius:12px; background:linear-gradient(140deg,var(--green-700),var(--green-500)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px}
.dash-side .who b{display:block; font-size:13.5px}
.dash-side .who span{font-size:11.5px; color:var(--ink-mute); font-weight:600}
.dash-nav{display:flex; flex-direction:column; gap:4px}
.dash-nav button{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px; border:0; background:transparent;
  font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; text-align:left; transition:.16s;
}
.dash-nav button svg{width:16px;height:16px;opacity:.8}
.dash-nav button:hover{background:rgba(18,133,90,.07); color:var(--green-800)}
.dash-nav button.active{background:linear-gradient(120deg,rgba(242,183,5,.22),rgba(18,133,90,.12)); color:var(--green-900)}
.dash-main{min-width:0}
.dash-top{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.dash-top h1{font-family:var(--font-display); font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-.02em}
.dash-top p{font-size:13px; color:var(--ink-mute); margin-top:3px}
.dash-top .actions{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap}

.login-shell{display:grid; place-items:center; padding:clamp(30px,6vw,70px) 0}
.login-card{
  width:100%; max-width:430px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:clamp(24px,3.4vw,38px); box-shadow:var(--shadow-lg); text-align:center;
}
.login-card .lg-logo{width:66px;height:66px;border-radius:20px; margin:0 auto 16px; display:grid; place-items:center; background:linear-gradient(140deg,#FFF3CE,#E6F6EC); border:1px solid #E7EFDD}
.login-card .lg-logo img{width:48px;height:48px;object-fit:contain}
.login-card h1{font-family:var(--font-display); font-size:23px; margin-bottom:7px}
.login-card p{font-size:13.5px; color:var(--ink-mute); margin-bottom:22px}
.login-card form{text-align:left; display:flex; flex-direction:column; gap:12px}
.lbl{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
.inp{
  width:100%; height:50px; border-radius:12px; border:1.5px solid var(--line); background:var(--cream-2);
  padding:0 14px; font-size:14.5px; font-weight:600; font-family:inherit; color:var(--ink); transition:.16s;
}
.inp:focus{outline:none; border-color:var(--green-500); background:#fff; box-shadow:0 0 0 4px rgba(18,133,90,.13)}
textarea.inp{height:auto; min-height:88px; padding:12px 14px; line-height:1.6; resize:vertical; font-weight:500}
.login-note{margin-top:18px; font-size:12px; color:var(--ink-mute); line-height:1.6; padding-top:16px; border-top:1px dashed var(--line)}
.login-note code{background:#F3F6F1; padding:2px 6px; border-radius:5px; font-size:11.5px; color:var(--green-800)}

.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.form-grid .full{grid-column:1/-1}
.fgroup{display:flex; flex-direction:column; gap:7px; min-width:0}
.fgroup .hint{font-size:11.5px; color:var(--ink-mute)}
.drop{
  border:1.8px dashed #CBDCCB; border-radius:14px; background:linear-gradient(120deg,#FFFDF4,#F5FBF6);
  padding:22px; text-align:center; cursor:pointer; transition:.18s;
}
.drop:hover,.drop.over{border-color:var(--green-500); background:#F2FBF5}
.drop svg{width:26px;height:26px;color:var(--green-600); margin:0 auto 8px}
.drop b{display:block; font-size:13.5px; color:var(--green-900)}
.drop span{font-size:12px; color:var(--ink-mute)}
.file-selected{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px; background:#EFF8F2; border:1px solid #CFE7D8; font-size:12.5px; color:var(--green-800); font-weight:700}
.file-selected svg{width:15px;height:15px}
.form-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; align-items:center}
.form-actions .btn{height:48px; font-size:14px}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm)}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px}
table.tbl th{
  text-align:left; padding:13px 15px; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute); background:#FAFBF7; border-bottom:1px solid var(--line); font-weight:800; white-space:nowrap;
}
table.tbl td{padding:13px 15px; border-bottom:1px solid #F3F0E4; vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:#FDFDF7}
table.tbl .nm{font-weight:700; color:var(--ink)}
table.tbl .no{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink-soft); font-weight:700}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--ok-bg); color:var(--ok); border:1px solid #CBEBD9}
.pill.lock{background:#FFF6E0; color:var(--warn); border-color:#F4E0B0}
.row-actions{display:flex; gap:6px}
.icon-btn{width:32px;height:32px;border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); transition:.15s}
.icon-btn:hover{border-color:var(--green-300); color:var(--green-800); background:#F4FBF6}
.icon-btn.del:hover{border-color:#F0C7C2; color:var(--danger); background:#FDF1EF}
.icon-btn svg{width:15px;height:15px}

.empty{padding:44px 20px; text-align:center; color:var(--ink-mute); font-size:13.5px}
.empty svg{width:34px;height:34px;color:#C9D8CD;margin:0 auto 10px}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%,120%); z-index:200;
  background:var(--green-900); color:#fff; padding:13px 20px; border-radius:14px; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-lg); transition:transform .35s cubic-bezier(.2,1.2,.4,1); display:flex; align-items:center; gap:10px; max-width:92vw;
}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:var(--gold-300)}

/* reveal animation */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:26px}
  .hero-side{max-width:100%}
  .two-col{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .search-grid{grid-template-columns:1fr}
  .recaptcha{margin-inline:auto}
  .dash-wrap{grid-template-columns:1fr}
  .dash-side{position:static}
  .dash-nav{flex-direction:row; flex-wrap:wrap}
}
@media (max-width:820px){
  :root{--nav-h:66px}
  .nav-links{
    position:fixed; inset:var(--nav-h) 12px auto 12px; flex-direction:column; align-items:stretch; gap:6px;
    background:#fff; border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 15px; border-radius:12px; font-size:14.5px}
  .nav-cta{margin-left:0 !important; text-align:center; justify-content:center}
  .nav-burger{display:flex}
  .mini-cards{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr; gap:0}
  .field:nth-last-child(2):nth-child(odd){border-bottom:1px solid #F1EDE0}
  .field:last-child{border-bottom:0}
  .form-grid{grid-template-columns:1fr}
  .strip-in{flex-direction:column; align-items:flex-start}
  .v-hero .stamp{margin-left:0; text-align:left; width:100%}
  .search-shell{margin-top:-20px}
  .search-card{padding:18px}
  .field-main{gap:10px}
  .input-wrap input{height:52px; font-size:15px}
  .btn{height:52px}
  .recaptcha{max-width:100%}
  .table-wrap table.tbl{min-width:640px}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .cards-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-card{border-radius:22px}
  .hero h1{font-size:29px}
  .brand-txt strong{font-size:13.5px}
  .brand-txt span{font-size:9.5px; letter-spacing:.1em}
  .brand img{width:36px;height:36px}
  .strip-stats{gap:18px}
  .panel{padding:18px; border-radius:18px}
  .mini{padding:15px}
  .login-card{padding:22px}
  .viewer-stage{padding:10px}
  .footer{padding:40px 0 22px}
}

/* print: dokumen tidak boleh dicetak dari viewer */
@media print{
  .nav,.footer,.search-shell,.viewer,.zoom-controls,.dash-side,.dash-top .actions{display:none !important}
  body{background:#fff}
  .print-lock{display:block !important; padding:24px; border:2px dashed #B3261E; color:#B3261E; font-weight:700; text-align:center; border-radius:12px}
}
.print-lock{display:none}

/* ---------- Modal QR ---------- */
.modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,41,27,.55); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.modal.open{opacity:1; pointer-events:auto}
.modal-card{
  width:100%; max-width:430px; background:#fff; border-radius:24px; padding:22px;
  box-shadow:0 40px 80px -30px rgba(4,41,27,.6); border:1px solid var(--line);
  transform:translateY(14px) scale(.98); transition:transform .26s cubic-bezier(.2,1.1,.4,1);
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.modal.open .modal-card{transform:none}
.modal-head{display:flex; align-items:center; gap:11px; margin-bottom:4px}
.modal-head .ph-ic{width:36px;height:36px;border-radius:11px; display:grid; place-items:center; background:linear-gradient(140deg,var(--gold-100),#E9F7EF); border:1px solid #E4EFDE}
.modal-head .ph-ic svg{width:18px;height:18px;color:var(--green-700)}
.modal-head h3{font-size:15.5px; font-weight:800; letter-spacing:-.01em}
.modal-head .x{margin-left:auto; width:32px;height:32px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--ink-soft)}
.modal-head .x:hover{background:#F6F3E7; color:var(--danger)}
.modal-head .x svg{width:15px;height:15px}
.qr-box{
  margin:16px 0 14px; padding:14px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(150deg,#FFFDF5,#F4FBF6); display:grid; place-items:center;
}
.qr-box img{width:100%; max-width:250px; height:auto; border-radius:10px; box-shadow:0 8px 20px -14px rgba(6,61,40,.5)}
.qr-meta{font-size:12.5px; color:var(--ink-mute); line-height:1.55; margin-bottom:14px}
.qr-meta b{display:block; color:var(--ink); font-size:14px; margin-bottom:2px}
.qr-link{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; background:#F6F8F3;
  border:1px dashed #D9E4D6; font-size:11px; color:var(--ink-soft); word-break:break-all; margin-bottom:14px;
  font-family:ui-monospace, monospace; line-height:1.45;
}
.modal-actions{display:flex; gap:9px; flex-wrap:wrap}
.modal-actions .btn{height:46px; font-size:13.5px; flex:1; min-width:130px}

/* ---------- pilihan warna QR di dashboard ---------- */
.qr-pal{margin-bottom:15px}
.qr-pal-label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin-bottom:9px}
.qr-pal-row{display:flex; gap:8px; flex-wrap:wrap}
.qr-sw{
  display:inline-flex; align-items:center; gap:8px; height:35px; padding:0 13px;
  border-radius:999px; border:1px solid var(--line); background:var(--white);
  font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.qr-sw i{width:14px; height:14px; border-radius:4px; background:var(--d); box-shadow:inset 0 0 0 2.5px var(--l); border:1px solid rgba(0,0,0,.16)}
.qr-sw:hover{border-color:var(--green-300); transform:translateY(-1px)}
.qr-sw[aria-checked="true"]{border-color:var(--green-600); background:var(--ok-bg); box-shadow:0 0 0 2px rgba(6,61,40,.09); font-weight:700}