/* Tema bersama: warna almamater UPN (navy + kuning emas + aksen merah api), ornamen batik kawung */
:root{
  --navy:#0f2347; --navy-2:#1a3a6e; --gold:#f2b705; --gold-ink:#9a7300; --gold-soft:#fbefc7; --red:#c8261e;
  --bg:#f5f6f9; --surface:#ffffff; --fg:#14203a; --muted:#5a6680; --line:#dde2ec;
  --ok:#1f7a4d; --ok-bg:#e3f4ea; --bad:#b42318; --bad-bg:#fde8e6; --hl:#fff4cc;
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --kawung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23f2b705' stroke-width='1.3'%3E%3Cellipse cx='11' cy='11' rx='9' ry='5' transform='rotate(45 11 11)'/%3E%3Cellipse cx='33' cy='11' rx='9' ry='5' transform='rotate(-45 33 11)'/%3E%3Cellipse cx='11' cy='33' rx='9' ry='5' transform='rotate(-45 11 33)'/%3E%3Cellipse cx='33' cy='33' rx='9' ry='5' transform='rotate(45 33 33)'/%3E%3Ccircle cx='22' cy='22' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --navy:#0a1730; --navy-2:#173263; --gold:#f5c52e; --gold-ink:#f5c52e; --gold-soft:#3a3214; --red:#e0574f;
  --bg:#0b1220; --surface:#131c2e; --fg:#e6ebf5; --muted:#9aa6bf; --line:#26324a;
  --ok:#5fd29a; --ok-bg:#14301f; --bad:#ff8a80; --bad-bg:#3a1714; --hl:#3a3216; color-scheme:dark}}
:root[data-theme="dark"]{
  --navy:#0a1730; --navy-2:#173263; --gold:#f5c52e; --gold-ink:#f5c52e; --gold-soft:#3a3214; --red:#e0574f;
  --bg:#0b1220; --surface:#131c2e; --fg:#e6ebf5; --muted:#9aa6bf; --line:#26324a;
  --ok:#5fd29a; --ok-bg:#14301f; --bad:#ff8a80; --bad-bg:#3a1714; --hl:#3a3216; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.65}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* strip atas */
.topbar{background:var(--navy) var(--kawung);background-size:44px;color:#cdd7ea;font-size:12.5px;position:relative}
.topbar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 30%,rgba(15,35,71,.82));pointer-events:none}
.topbar .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:6px}
.topbar span{white-space:nowrap}

/* masthead + garis emas ganda */
.mast{background:var(--surface);position:relative;border-bottom:3px solid var(--gold)}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--red);opacity:.85}
.mast .wrap{display:flex;align-items:center;gap:16px;padding-block:14px;flex-wrap:wrap}
.crest{width:60px;height:60px;flex:none;object-fit:contain}
.inst{min-width:0;flex:1 1 280px}
.inst b{display:block;font-family:var(--f-display);font-size:1.22rem;color:var(--navy-2);line-height:1.25}
.inst small{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.inst i{display:block;font-style:normal;font-size:12px;color:var(--gold-ink);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
:root[data-theme="dark"] .inst b{color:var(--fg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .inst b{color:var(--fg)}}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:14px;padding:10px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#1d1606}
.btn-gold:hover{filter:brightness(1.05)}
.btn-navy{background:var(--navy-2);color:#fff}
.btn-navy:hover{background:var(--navy)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ornamen pembatas: garis – belah ketupat – garis */
.orn{display:flex;align-items:center;gap:10px;color:var(--gold)}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}
.orn::after{background:linear-gradient(90deg,var(--gold),transparent)}
.orn span{width:9px;height:9px;transform:rotate(45deg);background:var(--gold);box-shadow:14px -14px 0 -2px var(--red),-14px 14px 0 -2px var(--red)}

/* sudut ornamen emas pada kartu */
.cornered{position:relative}
.cornered::before,.cornered::after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--gold);pointer-events:none}
.cornered::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cornered::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* pita kawung (footer/hero) */
.kawung-band{height:14px;background:var(--navy-2) var(--kawung);background-size:28px;border-block:2px solid var(--gold)}

footer{background:var(--navy);color:#c4cee3;font-size:13.5px}
footer b{color:#fff;display:block;margin-bottom:6px}
footer .fine{border-top:1px solid rgba(255,255,255,.12);padding-block:14px;font-size:12px;color:#8e9bb8}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}