:root{--gold:#d9930d;--gold-d:#a86e04;--gold-sub:rgba(217,147,13,.14);--ink:#17130b;--ink2:#241c10;
--paper:#faf7f0;--mut:#6f6least;--mut:#6f675a;--silver:#a39a89;--line:#e7dfcd;--teal:#0e5f56;--teal-sub:rgba(14,95,86,.12);
--shadow:0 4px 22px rgba(23,19,11,.06);--shadow-lg:0 18px 44px rgba(23,19,11,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
::selection{background:var(--gold);color:var(--ink)}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header.site{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.88);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-.5px}
.logo{display:inline-flex;align-items:center;gap:10px}.logo .mark{width:37px;height:37px;display:block}.logo .wm{color:var(--ink)}.logo .dot{color:var(--gold)}.author .av img{width:37px;height:37px;display:block}
.logo i{font-style:normal;background:var(--ink);color:var(--gold);border-radius:8px;padding:1px 7px;margin-right:8px;font-size:1rem}
.lang a{color:var(--mut);text-decoration:none;margin-left:6px;font-size:.88rem;font-weight:600;padding:6px 12px;border-radius:9999px}
.lang a.on{background:var(--ink);color:#fff}
.hero{position:relative;overflow:hidden;background:radial-gradient(760px 400px at 8% -10%,rgba(217,147,13,.28),transparent 60%),radial-gradient(620px 380px at 98% 10%,rgba(14,95,86,.14),transparent 55%),linear-gradient(rgba(23,19,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,11,.045) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;border-bottom:1px solid var(--line)}
.hero .wrap{padding:64px 22px 56px}
.pill{display:inline-block;background:var(--ink);color:#f5c86b;font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:7px 14px;border-radius:9999px}
.hero h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:2.9rem;line-height:1.12;letter-spacing:-1.2px;margin:.35em 0 .3em;max-width:740px}
.hero h1 em{font-style:normal;color:var(--gold-d);box-shadow:inset 0 -.32em 0 rgba(217,147,13,.35)}
.hero p.sub{color:var(--mut);font-size:1.13rem;max-width:640px;margin:.2em 0 1.4em}
.btn{display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;font-weight:700;padding:13px 22px;border-radius:12px;box-shadow:var(--shadow-lg);border:2px solid var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin-left:10px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.stat{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:14px 20px;box-shadow:5px 5px 0 rgba(23,19,11,.9);min-width:150px}
.stat b{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-size:1.5rem;letter-spacing:-.5px}.stat span{color:var(--mut);font-size:.85rem}
main .wrap{padding:44px 22px 70px}
h2.sec{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.7rem;letter-spacing:-.6px;margin:0 0 6px}
p.secsub{color:var(--mut);margin:0 0 24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.grid{grid-template-columns:1fr}.hero h1{font-size:2.1rem}}
.card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.card .num{position:absolute;top:6px;right:16px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3.2rem;color:rgba(23,19,11,.07);letter-spacing:-2px}
.card.feat{grid-column:1/-1;background:linear-gradient(120deg,#17130b,#2b2110 60%,#4a3507);color:#fdf9ef;border:1.5px solid var(--ink)}
.card.feat p{color:#ddd3ba}.card.feat a{color:#fff}.card.feat .badge{background:var(--gold);color:var(--ink)}
.card.feat .num{color:rgba(255,255,255,.10)}
.badge{display:inline-block;background:var(--teal-sub);color:var(--teal);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:6px}
.badge.p{background:var(--gold-sub);color:var(--gold-d)}
.card h3{font-family:'Space Grotesk','Inter',sans-serif;margin:.55em 0 .35em;font-size:1.28rem;line-height:1.3;letter-spacing:-.3px;max-width:88%}
.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{color:var(--gold-d)}
.card.feat h3 a:hover{color:#f5c86b}
.card p{color:var(--mut);margin:.2em 0 .8em}
.meta{color:var(--silver);font-size:.84rem;font-weight:500}
.readmore{font-weight:700;color:var(--gold-d);text-decoration:none;font-size:.93rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{border:1.5px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--gold);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-family:'Space Grotesk',sans-serif}
.step h4{font-family:'Space Grotesk','Inter',sans-serif;margin:.7em 0 .3em;font-size:1.05rem}.step p{color:var(--mut);margin:0;font-size:.95rem}
.cta{margin-top:54px;background:var(--ink);border-radius:20px;color:#fdf9ef;padding:38px 34px;box-shadow:var(--shadow-lg);border-bottom:6px solid var(--gold)}
.cta h3{font-family:'Space Grotesk','Inter',sans-serif;margin:.1em 0 .35em;font-size:1.55rem;letter-spacing:-.5px}.cta p{color:#d8cfb4;max-width:560px}
.cta .btn{background:var(--gold);color:var(--ink);box-shadow:none;border-color:var(--gold)}
.ahero{background:radial-gradient(700px 300px at 10% -20%,rgba(217,147,13,.25),transparent 60%),linear-gradient(180deg,#f3ecdb,#faf7f0);border-bottom:1px solid var(--line)}
.ahero .wrap{padding:52px 22px 30px;max-width:800px}
.ahero h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:2.35rem;line-height:1.18;letter-spacing:-.9px;margin:.35em 0 .3em}
article.wrap{max-width:800px;padding-top:30px}
article p{margin:.95em 0;font-size:1.06rem;line-height:1.78}
article h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.45rem;letter-spacing:-.4px;margin:1.7em 0 .4em;padding-left:14px;border-left:4px solid var(--gold)}
article li{margin:.4em 0}
.fig{margin:24px 0 28px}.card img.cardimg{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block;background:#fff}.fig img{width:100%;height:auto;display:block;border:1.5px solid var(--line);border-radius:18px;background:#fff}.fig figcaption{font-size:.86rem;color:var(--mut);margin-top:8px}.fig figcaption a{color:var(--gold-d);font-weight:700}
.warn{background:#fff6e0;border:1px solid #ecd28f;border-left:5px solid var(--gold);border-radius:12px;padding:14px 18px;margin:1.3em 0}
.warn p{margin:.2em 0}
.author{display:flex;gap:16px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin-top:44px}
.author .av{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none}
.author p{margin:.15em 0;color:var(--mut);font-size:.95rem}.author b{color:var(--ink)}
.backlink{display:inline-block;margin-top:26px;font-weight:700;color:var(--gold-d);text-decoration:none}
#progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:99}
footer.site{background:var(--ink);color:#cbbfa5;margin-top:0;border-top:6px solid var(--gold)}
footer.site .wrap{padding:34px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem}
footer.site b{color:#fff}
.tag{color:var(--gold-d);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
/* Compact pass (Ordi: kotak-kotak terlalu besar) */
.btn{padding:11px 18px;font-size:.95rem;border-radius:11px}
.btn.ghost{box-shadow:3px 3px 0 var(--ink);margin-left:8px}
.stats{gap:10px;margin-top:26px}
.stat{padding:10px 14px;min-width:0;flex:1 1 118px;max-width:176px;box-shadow:4px 4px 0 rgba(23,19,11,.9)}
.stat b{font-size:1.28rem}.stat span{font-size:.8rem}
.card{padding:20px}.card img.cardimg{height:132px}
.step{padding:18px}
.cta{padding:30px 28px}.cta h3{font-size:1.4rem}
@media(max-width:720px){.hero .wrap{padding:42px 20px 36px}.stats{display:grid;grid-template-columns:repeat(3,1fr)}.stat{max-width:none;padding:9px 10px;box-shadow:3px 3px 0 rgba(23,19,11,.9)}.stat b{font-size:1.12rem}.stat span{font-size:.72rem;line-height:1.3;display:block}article .stats{grid-template-columns:repeat(2,1fr)}.btn{padding:10px 15px;font-size:.92rem}.btn.ghost{margin-left:6px}.cta{padding:24px 20px}}