/* Identitas bersama dengan repo toko, acuan 7bc1c9c / 714d02a.
   CSS ini dimuat sesudah CSS halaman. Semua aset berasal dari origin dev. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('assets/fonts/plusjakartasans.ttf') format('truetype')}
:root{
 --page:#f3f6fb;--surface:#fff;--ink:#182b50;--muted:#5e6c84;--blue:#3b63dc;
 --button:#3b63dc;--button-hover:#2e50bc;--line:#dce4ef;--pale-blue:#e8efff;
 --accent:#b7eddd;--shadow:0 8px 28px rgba(24,43,80,.07);
 --shared-body-font:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
 --shared-heading-font:'Plus Jakarta Sans',system-ui,sans-serif;
 --pola:url('assets/pola-jalur-a.svg');
 --campur-a:rgba(59,99,220,.22);--campur-b:rgba(120,220,190,.34);--campur-c:rgba(128,162,255,.20);
}
html[data-theme="dark"]{
 --page:#0d1629;--surface:#16223a;--ink:#edf2ff;--muted:#acb9d0;--blue:#80a2ff;
 --button:#4167d8;--button-hover:#355acb;--line:#30405c;--pale-blue:#1c2b4a;
 --accent:#2c5b52;--on-accent:#d0f5e8;--shadow:0 8px 28px rgba(0,0,0,.28);
 --pola:url('assets/pola-jalur-a-gelap.svg');
 --campur-a:rgba(74,112,230,.36);--campur-b:rgba(64,180,150,.20);--campur-c:rgba(128,162,255,.16);
}
html{background-color:var(--page)}
body{
 min-height:100vh;font-family:var(--shared-body-font)!important;background-color:var(--page);
 background-image:radial-gradient(1100px 560px at 4% -8%,var(--campur-a),transparent 62%),radial-gradient(980px 540px at 100% 6%,var(--campur-b),transparent 58%),radial-gradient(1200px 620px at 50% 112%,var(--campur-c),transparent 62%),var(--pola)!important;
 background-size:auto,auto,auto,120px 190px;background-repeat:no-repeat,no-repeat,no-repeat,repeat;
}
html[data-theme="dark"] body{
 background-image:radial-gradient(1200px 560px at 4% -10%,var(--campur-a),transparent 62%),radial-gradient(980px 540px at 100% 6%,var(--campur-b),transparent 58%),radial-gradient(1200px 620px at 50% 112%,var(--campur-c),transparent 62%),var(--pola),linear-gradient(180deg,#111e3a 0,#0d1629 520px,#0a1222 100%)!important;
 background-size:auto,auto,auto,120px 190px,auto;background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
}
@media(min-width:900px){body{background-attachment:fixed,fixed,fixed,scroll}html[data-theme="dark"] body{background-attachment:fixed,fixed,fixed,scroll,scroll}}
h1,h2,h3,h4,.intro h1,.tool-heading h1{font-family:var(--shared-heading-font)}
.header{background:color-mix(in srgb,var(--page) 92%,transparent);backdrop-filter:blur(12px)}
.footer{background:var(--surface)}
body>.footer{display:block;padding:0}
body>.footer .footer-inner{align-items:start}
.footer-links{display:grid;gap:20px;width:100%}
.footer .footer-heading{font-size:12px;font-weight:700;color:var(--ink);margin:0 0 6px}
.footer .footer-legal nav{display:flex;flex-direction:column;gap:0;align-items:start}
@media(min-width:768px){.footer-links{grid-template-columns:minmax(0,1fr) auto;gap:30px;width:auto;max-width:65%}.footer-inner>div:first-child{max-width:340px}}
.intro .local{align-self:start}
.frame-nav,.tool-nav{display:flex;flex-wrap:wrap;gap:8px}
.frame-nav a,.tool-nav a{min-height:44px;display:inline-flex;align-items:center;padding:9px 12px;font-size:13px}
html[data-theme="dark"] .header{background:color-mix(in srgb,#0d1629 82%,transparent)}
html[data-theme="dark"] .footer{background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--blue)),#0b1322)}
html[data-theme="dark"] :is(.kat-card,.tool-card,.tool-page .site-card){background-image:linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,var(--blue)),var(--surface) 58%)}
.main-nav a:not([aria-current="page"])::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .18s;border-radius:3px 3px 0 0}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
/* Transisi berlaku pada perpindahan halaman dev dalam satu origin. */
@view-transition{navigation:auto}
body>.header{view-transition-name:situs-header}
@keyframes halaman-keluar{to{opacity:0;transform:translateY(-6px)}}
@keyframes halaman-masuk{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:halaman-keluar .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:halaman-masuk .28s cubic-bezier(0,0,.2,1) .04s both}
::view-transition-group(situs-header){animation-duration:0s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.main-nav a::after{transition:none}}