/* ==========================================================
   Belajar Sains dan Teknologi AI — tema bersama (navy futuristik)
   Dipakai oleh index.html dan semua halaman artikel.
   Warna diatur lewat variabel di bagian :root.
   ========================================================== */

:root{
  /* Gelap (bawaan) */
  --bg:#050a1a; --bg-2:#0a1230;
  --surface:rgba(16,28,66,.66); --surface-solid:#0e1a42; --surface-2:rgba(24,40,92,.55);
  --line:rgba(125,155,255,.20); --line-strong:rgba(125,155,255,.38);
  --text:#e8eefc; --muted:#9fb1d9; --heading:#ffffff;
  --brand:#22d3ee;      /* cyan */
  --brand-2:#8b5cf6;    /* violet */
  --accent:#f472b6;     /* pink */
  --amber:#fbbf24; --green:#34d399;
  --brand-ink:#041320;
  --grad:linear-gradient(110deg,#22d3ee 0%,#8b5cf6 55%,#f472b6 100%);
  --glow-1:rgba(139,92,246,.30); --glow-2:rgba(34,211,238,.20); --grid:rgba(125,155,255,.07);
  --code-bg:#070f2b; --code-text:#d7e3ff;
  --ok:#6ee7b7; --ok-bg:rgba(16,185,129,.16);
  --run:#93c5fd; --run-bg:rgba(59,130,246,.20);
  --plan:#fcd34d; --plan-bg:rgba(245,158,11,.18);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(2,6,23,.45);
  --radius:16px;
}
:root[data-theme="light"]{
  --bg:#f2f5fc; --bg-2:#e6ecfa;
  --surface:rgba(255,255,255,.88); --surface-solid:#ffffff; --surface-2:#e9eefb;
  --line:rgba(11,26,74,.14); --line-strong:rgba(11,26,74,.28);
  --text:#0d1733; --muted:#48587f; --heading:#071033;
  --brand:#0e7490; --brand-2:#6d28d9; --accent:#be185d;
  --amber:#b45309; --green:#047857;
  --brand-ink:#ffffff;
  --grad:linear-gradient(110deg,#0e7490 0%,#6d28d9 55%,#be185d 100%);
  --glow-1:rgba(109,40,217,.12); --glow-2:rgba(14,116,144,.12); --grid:rgba(11,26,74,.06);
  --code-bg:#0b1740; --code-text:#e3ecff;
  --ok:#047857; --ok-bg:#d1fae5; --run:#1d4ed8; --run-bg:#dbeafe; --plan:#92400e; --plan-bg:#fef3c7;
  --shadow:0 1px 2px rgba(11,26,74,.06), 0 10px 28px rgba(11,26,74,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; background:var(--bg)}
body{
  margin:0; color:var(--text); min-height:100vh; background:transparent;
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* lapisan latar: cahaya gradien navy */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 560px at 85% -8%, var(--glow-1), transparent 62%),
    radial-gradient(900px 520px at -5% 8%, var(--glow-2), transparent 62%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
/* kisi halus futuristik */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 75%);
}
img,svg{max-width:100%}
a{color:var(--brand)}
h1,h2,h3,h4{color:var(--heading)}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.wrap{width:min(1120px,100% - 32px); margin-inline:auto}
.skip{position:absolute; left:-999px; top:8px; background:var(--brand); color:var(--brand-ink); padding:8px 14px; border-radius:8px; z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}
::selection{background:var(--brand-2); color:#fff}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
header.site::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--grad); opacity:.55;
}
.bar{display:flex; align-items:center; gap:14px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--heading); text-decoration:none; letter-spacing:-.01em}
.brand svg{width:30px; height:30px; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 55%,transparent))}
.brand{min-width:0}
.brand svg{flex:none}
.brand span{font-size:1rem; line-height:1.18; letter-spacing:-.005em; max-width:15.5em}
@media (max-width:1000px){.brand span{font-size:.92rem; max-width:11.5em}}
@media (max-width:560px){.brand span{font-size:.84rem; max-width:10.5em} .bar{gap:10px}}
nav.main{margin-left:auto}
nav.main ul{display:flex; gap:2px; list-style:none; margin:0; padding:0}
nav.main a{display:block; padding:8px 12px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.93rem}
nav.main a:hover,nav.main a[aria-current="page"]{background:var(--surface-2); color:var(--heading)}
.icon-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:1.05rem; display:grid; place-items:center;
}
.icon-btn:hover{border-color:var(--line-strong); background:var(--surface-2)}
#menuBtn{display:none}
@media (max-width:860px){
  #menuBtn{display:grid; margin-left:auto}
  nav.main{
    position:absolute; inset:64px 0 auto 0; margin:0; display:none; padding:8px 16px 16px;
    background:var(--surface-solid); border-bottom:1px solid var(--line);
  }
  nav.main.open{display:block}
  nav.main ul{flex-direction:column}
}

/* ---------- Tombol, lencana ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px; font:700 1rem inherit; font-family:inherit;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn.primary{background:var(--grad); color:var(--brand-ink); box-shadow:0 8px 24px -8px color-mix(in srgb,var(--brand-2) 70%,transparent)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--surface); color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line-strong); background:var(--surface-2)}
.btn.small{padding:8px 14px; font-size:.9rem; border-radius:10px}
.eyebrow{
  display:inline-flex; gap:8px; align-items:center; font:700 .78rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:999px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand)}
.tag{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text); width:fit-content}
.badge{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; width:fit-content}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.run{background:var(--run-bg); color:var(--run)}
.badge.plan{background:var(--plan-bg); color:var(--plan)}

/* ---------- Hero halaman utama ---------- */
.hero{padding:76px 0 56px; position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.03em; margin:18px 0}
h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.15rem; color:var(--muted); max-width:56ch; margin:0 0 28px}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.stats{display:flex; flex-wrap:wrap; gap:30px; margin-top:34px}
.stats strong{display:block; font-size:1.7rem; letter-spacing:-.02em; color:var(--heading)}
.stats span{color:var(--muted); font-size:.9rem}
.orbit{aspect-ratio:1; width:min(100%,420px); margin-inline:auto; filter:drop-shadow(0 0 40px color-mix(in srgb,var(--brand-2) 45%,transparent))}
.orbit svg{width:100%; height:100%}
.spin{transform-origin:200px 200px; animation:spin 24s linear infinite}
.spin.rev{animation-duration:36s; animation-direction:reverse}
.spin.slow{animation-duration:52s}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none} html{scroll-behavior:auto}}
@media (max-width:860px){.hero .grid{grid-template-columns:1fr} .orbit{width:min(70%,320px)} .hero{padding-top:44px}}

/* ---------- Bagian umum ---------- */
section{padding:64px 0}
section.alt{background:color-mix(in srgb,var(--bg-2) 70%,transparent); border-block:1px solid var(--line)}
.head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px}
h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.02em; margin:0 0 6px; line-height:1.2}
.sub{color:var(--muted); margin:0; max-width:62ch}
.note{font-size:.9rem; color:var(--muted); background:var(--surface); border:1px dashed var(--line-strong); padding:10px 14px; border-radius:12px; margin:0 0 20px}
code{background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; font-size:.88em}

.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; transition:transform .18s, border-color .18s, box-shadow .18s;
}
a.card{color:inherit; text-decoration:none}
.card:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow),0 0 0 1px var(--brand),0 10px 40px -12px color-mix(in srgb,var(--brand) 60%,transparent)}
.card h3{margin:0; font-size:1.1rem; line-height:1.3}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem; background:var(--surface-2); border:1px solid var(--line-strong)}
.meta{display:flex; flex-wrap:wrap; gap:8px 12px; color:var(--muted); font-size:.85rem; margin-top:auto; padding-top:6px}

.tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--text); padding:7px 14px; border-radius:999px; font:600 .9rem inherit; font-family:inherit; cursor:pointer}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--grad); color:var(--brand-ink); border-color:transparent}
.search{margin-left:auto; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:12px; padding:10px 14px; min-width:220px; font:inherit}
.search::placeholder{color:var(--muted)}
@media (max-width:640px){.search{margin-left:0; width:100%}}
.empty{color:var(--muted); padding:24px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); display:none}

.road{list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:step}
.road li{counter-increment:step; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.road li::before{content:counter(step); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--grad); color:var(--brand-ink); font-weight:800; margin-bottom:10px}
.road h3{margin:0 0 4px; font-size:1.05rem}
.road p{margin:0 0 10px; color:var(--muted); font-size:.95rem}

.two{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.panel h3{margin-top:0}
ul.ticks{padding-left:0; list-style:none; display:grid; gap:8px}
ul.ticks li{padding-left:28px; position:relative}
ul.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800}
label{display:block; font-weight:600; margin:12px 0 6px}
input[type=text],input[type=email],textarea{width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:12px; padding:11px 14px; font:inherit}
textarea{min-height:110px; resize:vertical}

footer.site{border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:.92rem}
footer .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}
footer a{color:var(--muted)}

/* ==========================================================
   HALAMAN ARTIKEL
   ========================================================== */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad); z-index:120; box-shadow:0 0 14px var(--brand)}

.a-hero{padding:48px 0 12px}
.crumbs{font-size:.88rem; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin:0 6px; opacity:.6}
.a-hero h1{font-size:clamp(2rem,4.6vw,3.2rem); max-width:22ch; margin:14px 0 14px}
.a-lede{font-size:1.2rem; color:var(--muted); max-width:62ch; margin:0 0 22px}
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; color:var(--muted); font-size:.92rem}
.who{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:var(--brand-ink); font-weight:800}
.dot{opacity:.5}

.a-cover{
  margin:30px 0 0; border-radius:20px; overflow:hidden; position:relative; width:100%; aspect-ratio:21/9;
  border:1px solid var(--line-strong);
  background:radial-gradient(600px 260px at 15% 20%,rgba(34,211,238,.28),transparent 60%),
             radial-gradient(600px 280px at 90% 80%,rgba(244,114,182,.26),transparent 60%),
             linear-gradient(135deg,#0a1a4d,#0b1236);
  box-shadow:0 30px 80px -30px color-mix(in srgb,var(--brand-2) 60%,transparent);
}
.a-cover svg,.a-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; border-radius:0}
@media (max-width:700px){.a-cover{aspect-ratio:16/9; border-radius:16px}}

.a-layout{display:grid; grid-template-columns:minmax(0,720px) 260px; gap:56px; justify-content:center; padding:36px 0 24px; align-items:start}
@media (max-width:1040px){.a-layout{grid-template-columns:minmax(0,720px)} .toc{order:-1; position:static !important}}

/* Daftar isi */
.toc{position:sticky; top:88px; font-size:.92rem}
.toc details{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.toc summary{cursor:pointer; font:700 .78rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; border-left:1px solid var(--line)}
.toc a{display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--muted); text-decoration:none; line-height:1.4}
.toc a:hover{color:var(--heading)}
.toc a.sub{padding-left:28px; font-size:.88rem}
.toc a.active{color:var(--heading); border-left-color:var(--brand); font-weight:600}

/* Isi artikel */
.prose{font-size:1.09rem; line-height:1.85; color:var(--text)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.25em}
.prose h2{font-size:1.75rem; letter-spacing:-.02em; margin:2.3em 0 .6em; line-height:1.25; position:relative}
.prose h2::before{content:""; position:absolute; left:-18px; top:.28em; bottom:.28em; width:4px; border-radius:4px; background:var(--grad)}
.prose h3{font-size:1.25rem; margin:1.8em 0 .5em}
.prose a{text-underline-offset:3px}
.prose strong{color:var(--heading)}
.prose ul,.prose ol{padding-left:1.4em; margin:0 0 1.25em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--brand)}
.anchor{margin-left:8px; opacity:0; text-decoration:none; color:var(--brand); font-weight:400}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}
@media (max-width:700px){.prose h2::before{display:none}}

.takeaways{
  border:1px solid transparent; border-radius:16px; padding:18px 22px; margin:0 0 2em;
  background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--grad) border-box;
}
.takeaways h2{font-size:.8rem; font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0 0 10px}
.takeaways h2::before{display:none}
.takeaways ul{margin:0; padding-left:1.2em}

blockquote.pull{
  margin:2em 0; padding:6px 0 6px 22px; border-left:4px solid transparent; border-image:var(--grad) 1;
  font-size:1.35rem; line-height:1.5; font-weight:600; color:var(--heading); letter-spacing:-.01em;
}
blockquote.pull cite{display:block; margin-top:10px; font-size:.9rem; font-weight:500; font-style:normal; color:var(--muted)}

.callout{
  --c:var(--brand); margin:1.8em 0; padding:16px 20px 16px 18px; border-radius:14px;
  background:color-mix(in srgb,var(--c) 11%,var(--surface-solid)); border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  border-left:4px solid var(--c);
}
.callout > strong:first-child{display:block; color:var(--c); font:700 .78rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px}
.callout p{margin:0 0 .6em} .callout p:last-child{margin:0}
.callout.tip{--c:var(--green)} .callout.warn{--c:var(--amber)} .callout.fact{--c:var(--brand-2)}
:root:not([data-theme="light"]) .callout.fact{--c:#b69bff}

figure{margin:2em 0}
figure img,figure svg{display:block; width:100%; border-radius:14px; border:1px solid var(--line)}
figcaption{margin-top:10px; font-size:.88rem; color:var(--muted); text-align:center}

.code{margin:1.6em 0; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); background:var(--code-bg)}
.code-head{display:flex; justify-content:space-between; align-items:center; padding:8px 12px 8px 16px; background:rgba(125,155,255,.10); border-bottom:1px solid var(--line); color:#9fb1d9; font:600 .78rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase}
.copy{border:1px solid rgba(159,177,217,.35); background:transparent; color:#d7e3ff; padding:4px 10px; border-radius:8px; cursor:pointer; font:600 .78rem inherit; font-family:inherit}
.copy:hover{background:rgba(159,177,217,.18)}
.code pre{margin:0; padding:16px; overflow:auto; color:var(--code-text); font-size:.92rem; line-height:1.65; tab-size:4}
.code code{background:none; border:0; padding:0; font-size:inherit; color:inherit}
.k{color:#c4a7ff} .s{color:#7ee0b0} .c{color:#6f84b5; font-style:italic} .n{color:#ffb86b} .f{color:#67e8f9}

.table-wrap{position:relative; overflow-x:auto; margin:1.8em 0; border:1px solid var(--line); border-radius:14px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.97rem}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); color:var(--heading); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase}
tr:last-child td{border-bottom:0}

.math{margin:1.6em 0; padding:16px; text-align:center; border:1px dashed var(--line-strong); border-radius:14px; font:1.15rem ui-monospace,Menlo,Consolas,monospace; background:var(--surface); overflow-x:auto}

.refs{font-size:.95rem; color:var(--muted)}
.refs li{margin:.5em 0}

.a-foot{display:grid; gap:28px; padding-bottom:40px}
.tagrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.share{display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); font-size:.92rem}
.author-box{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.author-box .avatar{width:56px; height:56px; font-size:1.3rem; flex:none}
.author-box h3{margin:0 0 4px; font-size:1.05rem}
.author-box p{margin:0; color:var(--muted); font-size:.95rem}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.pn{grid-template-columns:1fr}}
.pn a{display:block; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:var(--text)}
.pn a:hover{border-color:var(--brand)}
.pn small{display:block; color:var(--muted); font:600 .75rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px}
.pn .next{text-align:right}
.related{border-top:1px solid var(--line); padding-top:40px}
.related h2{margin-bottom:18px}

@media print{
  header.site,.toc,.progress,.share,footer.site,.pn,.related{display:none !important}
  body{background:#fff; color:#000} body::before{display:none}
  .a-layout{display:block} .prose,.prose strong,h1,h2,h3{color:#000}
}

/* ==========================================================
   KALKULATOR INTERAKTIF (dipakai di dalam artikel)
   ========================================================== */
.calc{margin:2em 0; border:1px solid var(--line-strong); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.calc-block{padding:20px 22px; border-bottom:1px solid var(--line)}
.calc-block:last-child{border-bottom:0}
.calc-title{margin:0 0 12px; font:700 .78rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--brand)}
.calc input[type=number],.calc input[type=text]{
  width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:10px; padding:8px 10px; font:inherit; font-size:.95rem;
}
.calc .table-wrap{margin:0 0 12px}
.calc-table{min-width:620px}
.calc-table th,.calc-table td{padding:8px 10px}
.calc-table td:first-child input{min-width:150px}
.calc-table td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-table tfoot td{font-weight:700; color:var(--heading); background:var(--surface-2)}
.del{border:1px solid var(--line); background:transparent; color:var(--muted); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:1rem}
.del:hover{color:var(--accent); border-color:var(--accent)}
.calc-grid{display:grid; gap:12px 16px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.field{display:block; margin:0; font-weight:600; font-size:.86rem; color:var(--muted)}
.field span{display:block; margin-bottom:5px}
.field small{display:block; margin-top:4px; font-weight:400; font-size:.76rem; opacity:.85}
.res-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.res{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.res small{display:block; color:var(--muted); font-size:.8rem; margin-bottom:4px}
.res strong{display:block; font-size:1.35rem; letter-spacing:-.01em; color:var(--heading); font-variant-numeric:tabular-nums}
.res.hl{border-color:transparent; background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--grad) border-box}
.res em{display:block; font-style:normal; font-size:.78rem; color:var(--muted); margin-top:4px}
.calc-note{margin:14px 0 0; font-size:.88rem; color:var(--muted)}
.calc-note.warn{color:var(--amber)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ==========================================================
   ARSIP & PENCARIAN
   ========================================================== */
a.tag{text-decoration:none; color:var(--text)}
a.tag:hover{border-color:var(--brand); color:var(--heading)}
a.icon-btn{text-decoration:none; color:var(--text)}
.icon-btn svg{display:block}

.searchbar{
  display:flex; align-items:center; gap:10px; margin:26px 0 14px; padding:0 8px 0 18px; max-width:760px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow);
}
.searchbar:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent), var(--shadow)}
.searchbar svg{flex:none; color:var(--muted)}
.searchbar input{flex:1; min-width:0; border:0; background:transparent; color:var(--text); font:inherit; font-size:1.1rem; padding:16px 0; outline:0}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar button{border:0; background:var(--surface-2); color:var(--muted); width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1.2rem; line-height:1}
.searchbar button:hover{color:var(--heading)}
.searchbar button[hidden]{display:none}

.filters{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0 0 8px; min-width:0}
.filter-row{min-width:0}
.filter-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filter-row > .lbl{font:700 .74rem ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); min-width:54px}
.chip small{opacity:.7; margin-left:4px; font-weight:600}
.chip.tagchip{font-size:.84rem; padding:5px 12px}
select.sort{border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:12px; padding:8px 12px; font:inherit; font-size:.92rem}
.count{margin:18px 0 14px; color:var(--muted); font-size:.95rem}
.count button{border:0; background:transparent; color:var(--brand); font:inherit; cursor:pointer; text-decoration:underline; padding:0 0 0 8px}
.result{gap:8px}
.result .snip{font-size:.9rem; color:var(--muted); border-left:3px solid var(--line-strong); padding-left:10px}
.result .meta .t{color:var(--brand)}
mark{background:color-mix(in srgb,var(--amber) 38%,transparent); color:inherit; border-radius:4px; padding:0 2px}
.notfound{text-align:center; padding:72px 0 40px}
.notfound .code404{font:800 clamp(4rem,14vw,8rem)/1 system-ui,sans-serif; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.notfound .searchbar{margin-inline:auto}
.notfound .cta{justify-content:center; margin-top:22px}

.chip.more{border-style:dashed; color:var(--brand)}
@media (max-width:700px){
  .filter-row{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:6px}
  .filter-row .chips{flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
  .filter-row .chips .chip{flex:none; white-space:nowrap}
  .searchbar{margin-top:20px}
  .count{margin-top:10px}
}

/* ==========================================================
   NEWSLETTER & HALAMAN KEBIJAKAN
   ========================================================== */
[hidden]{display:none !important}
.nl{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start}
@media (max-width:860px){.nl{grid-template-columns:1fr}}
.nl-card{background:var(--surface); border:1px solid var(--line-strong); border-radius:18px; padding:14px; box-shadow:var(--shadow); overflow:hidden}
.nl-card iframe{display:block; width:100%; min-height:560px; border:0; border-radius:12px; background:#fff}
.nl-note{font-size:.88rem; color:var(--muted); margin:12px 6px 4px}
.nl-fallback{margin:10px 6px 4px; font-size:.9rem}
.nl-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:0; padding:18px 20px;
  border:1px solid transparent; border-radius:16px; background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--grad) border-box}
.nl-cta strong{display:block; color:var(--heading); font-size:1.05rem}
.nl-cta span{color:var(--muted); font-size:.93rem}
.policy{max-width:760px; margin-inline:auto}
.policy h2{margin-top:1.8em}
.policy ul{padding-left:1.3em}
.policy li{margin:.4em 0}
footer .links{display:flex; flex-wrap:wrap; gap:6px 18px}

/* ==========================================================
   VIDEO PADA ARTIKEL (menggantikan gambar sampul)
   ========================================================== */
.a-videofig{margin:30px auto 0; max-width:var(--vw,900px)}
.a-cover.a-video{aspect-ratio:auto; margin:0 auto; max-width:none; background:#000; border-radius:20px}
.a-video video{display:block; width:100%; height:auto; aspect-ratio:var(--vr,16/9); background:#000; object-fit:contain}
.a-video .vid-play{
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; z-index:2;
  display:grid; place-items:center; background:linear-gradient(180deg,rgba(5,10,26,.05),rgba(5,10,26,.45)); color:#fff;
}
.a-video .vid-play span{
  display:grid; place-items:center; width:84px; height:84px; border-radius:50%;
  background:var(--grad); color:var(--brand-ink); box-shadow:0 10px 40px -8px color-mix(in srgb,var(--brand-2) 75%,transparent); transition:transform .15s;
}
.a-video .vid-play:hover span,.a-video .vid-play:focus-visible span{transform:scale(1.08)}
.a-video .vid-play svg{position:static; inset:auto; width:34px; height:34px; margin-left:4px; border:0; border-radius:0}
.a-video .vid-play small{
  position:absolute; left:0; right:0; bottom:16px; text-align:center; font:600 .85rem system-ui,sans-serif; color:#e8eefc; text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.a-video .vid-play[hidden]{display:none !important}
@media (max-width:700px){
  .a-cover.a-video{aspect-ratio:auto; border-radius:16px}
  .a-video .vid-play span{width:68px; height:68px}
}