/* Panduan Repository NHI — shared design system ("naskah")
   Fonts: Newsreader (judul), Inter (isi/antarmuka), mono (kode/label).
   Motion: satu kurva (--out); --spring hanya untuk benda fisik. Hover 150–250 ms. */
@view-transition { navigation: auto; }
:root {
  --paper:#ececeb; --sheet:#fbfaf6; --ink:#1a2036; --muted:#5b6070; --hair:rgba(26,32,54,.16);
  --navy:#1c3a73; --emerald:#17554e; --maroon:#7d2335; --stamp:#b3261e; --gold:#d9ae4b;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.45,.64,1);
  --pad:clamp(18px,4.5vw,64px); --max:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; line-height:1.6; overflow-x:clip; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:url("https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/5c3ec08f-2dbf-4c0a-8588-f6106a789443.webp") center/cover no-repeat; opacity:.55; }
a { color:inherit; } button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--navy); outline-offset:3px; border-radius:3px; }
.wrap { width:min(100% - 2*var(--pad), var(--max)); margin-inline:auto; }
em.it { font-style:italic; }

/* nav — kaca, karena melayang di atas isi halaman */
.nav { position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(236,236,234,.62); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); }
.nav::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--navy); transform:scaleX(var(--sp,0)); transform-origin:left; }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:15px; }
.brand i { width:26px; height:26px; display:grid; place-items:center; background:var(--navy); border-radius:4px; }
.brand i svg { width:15px; height:15px; }
.nav ul { display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.nav ul a { position:relative; text-decoration:none; font-size:14px; color:var(--muted); padding:6px 0; transition:color .2s ease; }
.nav ul a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--out); }
.nav ul a.on { color:var(--ink); } .nav ul a.on::after { transform:scaleX(1); }
@media (hover:hover) and (pointer:fine) { .nav ul a:hover::after { transform:scaleX(1); } }
.lvsw { display:flex; gap:4px; }
.lvsw a { text-decoration:none; font:600 12px/1 var(--mono); letter-spacing:.08em; padding:9px 12px; border-radius:4px; color:var(--muted); box-shadow:inset 0 0 0 1px var(--hair); transition:background .2s ease, color .2s ease; }
.lvsw a[aria-current="page"] { background:var(--c); color:#fff; box-shadow:none; }
@media (hover:hover) and (pointer:fine) { .lvsw a:not([aria-current]):hover { background:rgba(26,32,54,.07); color:var(--ink); } }

.btn { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:14px; padding:11px 18px; border-radius:6px; color:#fff; background:var(--navy); transition:transform .2s var(--out), background .2s ease; }
.btn svg { width:16px; height:16px; transition:transform .25s var(--out); }
.btn:active { transform:scale(.96); }
@media (hover:hover) and (pointer:fine) { .btn:hover { background:#142c58; } .btn:hover svg { transform:translateX(4px); } }
.tlink { position:relative; display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:14px; padding:4px 0; }
.tlink::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right; }
@media (hover:hover) and (pointer:fine) { .tlink:hover::after { animation:redraw .5s var(--out); } }
@keyframes redraw { 0% { transform:scaleX(1); transform-origin:right; } 45% { transform:scaleX(0); transform-origin:right; } 46% { transform:scaleX(0); transform-origin:left; } 100% { transform:scaleX(1); transform-origin:left; } }

/* kerangka bagian */
.sec { padding:clamp(72px,11vw,150px) 0 0; }
.lbl { display:flex; align-items:center; gap:14px; margin:0 0 18px; font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lbl::after { content:""; flex:0 0 56px; height:1px; background:var(--hair); }
h2.h { margin:0; font:500 clamp(34px,5vw,64px)/1.02 var(--serif); letter-spacing:-.02em; font-variation-settings:"opsz" 72; }
h2.h em { font-style:italic; color:#8a2433; }
.rv { opacity:0; translate:0 14px; transition:opacity .7s var(--out), translate .7s var(--out); transition-delay:calc(var(--i,0)*80ms); }
.rv.in { opacity:1; translate:none; }

/* kartu katalog: dipakai di Home (pilihan jenjang) dan header halaman jenjang */
.kc { --c:var(--navy); position:relative; display:block; text-decoration:none; padding:28px 24px 24px; background-color:var(--sheet); border-radius:2px 2px 6px 6px; box-shadow:0 1px 2px rgba(20,30,60,.12), 0 26px 40px -30px rgba(20,30,60,.55);
  background-image:repeating-linear-gradient(180deg, transparent 0 33px, rgba(60,90,160,.16) 33px 34px); background-position:0 62px;
  transform-origin:50% 100%; transition:transform .25s var(--out), box-shadow .25s var(--out), opacity .25s ease; }
.kc[data-lv="s2"] { --c:var(--navy); } .kc[data-lv="s1"] { --c:var(--emerald); } .kc[data-lv="d3"] { --c:var(--maroon); }
.kc::before { content:""; position:absolute; left:0; right:0; top:58px; height:1px; background:rgba(179,38,30,.55); }
.kc .tab { position:absolute; top:-26px; left:8%; height:27px; padding:0 16px; display:flex; align-items:center; color:#fff; font:600 13px/1 var(--mono); letter-spacing:.08em; background:var(--c); border-radius:4px 4px 0 0; }
.kc h3 { margin:0 0 30px; font:500 26px/1.1 var(--serif); letter-spacing:-.01em; }
.kc dl { margin:0; }
.kc dl div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; height:34px; }
.kc dt { font-size:13px; color:var(--muted); } .kc dd { margin:0; font:500 14px/1 var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
.kc dd b { font-size:30px; font-weight:500; letter-spacing:-.04em; color:var(--c); }
.kc .go { display:flex; align-items:center; justify-content:space-between; margin-top:22px; font-weight:600; font-size:14px; color:var(--c); }
.kc .go svg { width:18px; height:18px; transition:transform .25s var(--out); }
.kc:active { transform:scale(.985); }
@media (hover:hover) and (pointer:fine) {
  .drawer:has(.kc:hover) .kc:not(:hover) { opacity:.55; }
  .kc[href]:hover { transform:translateY(-12px) rotate(-.6deg); box-shadow:0 1px 2px rgba(20,30,60,.12), 0 40px 50px -30px rgba(20,30,60,.6); }
  .kc[href]:hover .go svg { transform:translateX(5px); }
}

/* daftar tautan */
.links { margin-top:34px; border-top:1px solid var(--ink); }
.lk { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px 4px; text-decoration:none; border-bottom:1px solid var(--hair); overflow:hidden; isolation:isolate; }
.lk::before { content:""; position:absolute; inset:0; background:var(--navy); transform:scaleY(0); transform-origin:bottom; transition:transform .25s var(--out); z-index:-1; }
.lk b { display:block; font:500 clamp(22px,2.6vw,34px)/1.15 var(--serif); letter-spacing:-.01em; transition:color .2s ease, translate .25s var(--out); }
.lk small { color:var(--muted); font-size:14px; transition:color .2s ease; }
.lk svg { width:26px; height:26px; transition:transform .25s var(--out), color .2s ease; }
@media (hover:hover) and (pointer:fine) { .lk:hover::before { transform:scaleY(1); } .lk:hover b, .lk:hover small, .lk:hover svg { color:#fff; } .lk:hover b { translate:14px 0; } .lk:hover svg { transform:translate(4px,-4px) rotate(45deg); } }

footer.end { margin-top:clamp(72px,10vw,130px); padding:22px 0 30px; border-top:1px solid var(--hair); font-size:13px; color:var(--muted); }
footer.end .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

@media (max-width:860px) { .nav ul { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .rv { opacity:1; translate:none; }
}