*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--kain);color:var(--aspal);font:400 16px/24px var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--oranye-teks)}
h1,h2,h3,p{margin:0}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-4)}
.wrap-narrow{max-width:720px}
.skip{position:absolute;left:-999px;top:8px;background:var(--aspal);color:var(--kain);padding:8px 12px;border-radius:var(--radius-sm);z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--aspal);outline-offset:3px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;letter-spacing:-.02em;color:var(--aspal)}
.wordmark-accent{color:var(--oranye-teks)}
.logo-dark .wordmark{color:var(--kain)}
.logo-dark .wordmark-accent{color:var(--brand-oranye)}

/* Type */
.display{font:800 clamp(44px,8vw,72px)/.95 var(--font-display);letter-spacing:-.03em;margin:var(--space-4) 0 var(--space-6)}
.heading{font:800 clamp(28px,4.5vw,40px)/1.1 var(--font-display);letter-spacing:-.01em;margin:var(--space-2) 0 var(--space-6)}
.label{font:700 12px/16px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--abu-teks)}
.label-kuning{color:var(--aksen-kuning)}
.lead{font-size:18px;line-height:28px;max-width:34em}
.sub{color:var(--abu-teks);max-width:40em;margin-top:calc(-1 * var(--space-2));margin-bottom:var(--space-6)}
.sub-dark{color:var(--aspal)}
.hl{background:linear-gradient(transparent 62%,var(--aksen-kuning) 62%);padding:0 .05em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--brand-oranye);color:var(--aspal);border:var(--border-stiker) solid var(--aspal);border-radius:var(--radius-md);box-shadow:var(--shadow-stiker);font:700 16px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--aspal)}
.btn:active{transform:translate(3px,3px);box-shadow:var(--shadow-stiker-tekan)}
.btn-ghost{background:var(--putih)}
.btn-dark{background:var(--aspal);color:var(--kain);box-shadow:4px 4px 0 var(--putih)}
.btn-dark:hover{box-shadow:5px 5px 0 var(--putih)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-block{width:100%}

/* Badges / stickers */
.badge,.sticker{display:inline-block;font:700 12px/16px var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border:2px solid var(--aspal);border-radius:var(--radius-pill);box-shadow:3px 3px 0 var(--aspal)}
.badge-kuning,.sticker-kuning{background:var(--aksen-kuning)}
.sticker-pink{background:var(--pink-permen)}
.tilt-l{transform:rotate(-3deg)}
.tilt-r{transform:rotate(4deg)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis)}
.header-inner{display:flex;align-items:center;gap:var(--space-4);height:68px}
.menu{display:flex;align-items:center;gap:var(--space-4);margin-left:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--aspal);text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:999px}
.nav a:hover{background:rgba(23,24,28,.06)}
.nav a[aria-current="page"]{background:var(--aspal);color:var(--kain)}
.header-aksi{display:flex;align-items:center;gap:8px}
.header-aksi .masuk{color:var(--aspal);font-weight:700;font-size:15px;text-decoration:none;padding:8px 12px}
.header-aksi .masuk:hover{color:var(--oranye-teks)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:var(--border-stiker) solid var(--aspal);border-radius:var(--radius-md);background:var(--putih);cursor:pointer;place-items:center;padding:0}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--aspal);border-radius:2px;position:relative;transition:transform .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.header.buka .menu-btn span{background:transparent}
.header.buka .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.header.buka .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:grid}
  .menu{display:none}
  .header.buka .menu{display:flex;flex-direction:column;align-items:stretch;gap:12px;position:absolute;left:0;right:0;top:68px;margin:0;background:var(--kain);border-bottom:2px solid var(--aspal);padding:12px var(--space-4) 16px;box-shadow:0 12px 24px rgba(23,24,28,.12);max-height:calc(100dvh - 68px);overflow:auto}
  .header.buka .nav{flex-direction:column;align-items:stretch;gap:2px}
  .header.buka .nav a{padding:12px;font-size:17px;border-radius:var(--radius-md)}
  .header.buka .header-aksi{gap:8px}
  .header.buka .header-aksi>*{flex:1;justify-content:center;text-align:center;min-height:48px;display:inline-flex;align-items:center}
  .header.buka .header-aksi .masuk{border:var(--border-stiker) solid var(--aspal);border-radius:var(--radius-md);background:var(--putih)}
}


/* Hero */
.hero{position:relative;padding:var(--space-12) 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-12);align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-6) 0}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);color:var(--abu-teks);font-size:14px}
.hero-points li::before{content:"";display:inline-block;width:14px;height:6px;border-radius:3px;background:var(--brand-oranye);margin-right:8px;vertical-align:middle}
.hero-art{position:relative;min-height:380px}
.tee-card{position:absolute;inset:20px 30px 40px 0;background:var(--brand-oranye);border:3px solid var(--aspal);border-radius:var(--radius-lg);box-shadow:6px 6px 0 var(--aspal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);transform:rotate(-2deg)}
.tee{width:62%;animation:sway 4s ease-in-out infinite}
.tee-tag{font:800 14px/1 var(--font-display);letter-spacing:.06em;background:var(--kain);border:2px solid var(--aspal);border-radius:var(--radius-sm);padding:8px 12px}
.hero-art .sticker{position:absolute;top:0;right:0}
.stat-card{position:absolute;left:-12px;bottom:0;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-md);box-shadow:var(--shadow-stiker);padding:12px 16px;display:flex;flex-direction:column}
.angka{font:700 28px/32px var(--font-display)}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.marka{position:absolute;left:0;right:0;bottom:0;height:40px;background:var(--aspal)}
.marka::after{content:"";position:absolute;left:0;right:0;top:16px;height:8px;background:repeating-linear-gradient(90deg,var(--aksen-kuning) 0 48px,transparent 48px 72px);border-radius:4px;animation:jalan 2.4s linear infinite;background-size:72px 8px}
@keyframes jalan{to{background-position:-72px 0}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{min-height:320px;max-width:400px;width:100%;margin:0 auto}}

/* Sections */
.section{padding:80px 0}
.section-dark{background:var(--aspal);color:var(--kain)}
.section-putih{background:var(--putih)}
.section-oranye{background:var(--brand-oranye)}

/* Tabs */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-pill);margin-bottom:var(--space-6)}
.tabs button{font:700 15px/1 var(--font-body);color:var(--aspal);background:none;border:0;border-radius:var(--radius-pill);padding:12px 20px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--aspal);color:var(--kain)}
.panel-lead{font:800 22px/1.3 var(--font-display);margin-bottom:var(--space-6)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.steps li{background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-stiker)}
.steps h3{font:700 18px/26px var(--font-body);margin:var(--space-4) 0 var(--space-2)}
.steps p{color:var(--abu-teks);font-size:15px}
.step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--aksen-kuning);border:2px solid var(--aspal);font:800 18px/1 var(--font-display)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.why{border-top:2px dashed rgba(255,201,60,.6);padding-top:var(--space-4)}
.why h3{font:800 22px/1.2 var(--font-display);color:var(--brand-oranye);margin-bottom:var(--space-2)}
.why p{color:#C9C6BF;font-size:15px}
.metric{margin-top:var(--space-12);border:2px solid var(--aksen-kuning);border-radius:var(--radius-lg);padding:var(--space-6);max-width:640px}
.metric-big{font:800 clamp(28px,5vw,44px)/1.1 var(--font-display);margin:var(--space-2) 0}
.metric p:last-child{color:#C9C6BF}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.why-grid{grid-template-columns:1fr}}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-stiker)}
.plan-featured{background:var(--aksen-kuning);box-shadow:6px 6px 0 var(--aspal)}
.plan-featured .sticker{background:var(--putih)}
.plan-badge{position:absolute;top:-14px;right:16px}
.plan h3{font:800 28px/1 var(--font-display)}
.plan-meta{color:var(--abu-teks);font-size:14px;margin-top:var(--space-2)}
.plan-featured .plan-meta{color:var(--aspal)}
.price{font:700 28px/32px var(--font-display);margin:var(--space-4) 0}
.plan ul{padding-left:18px;margin:0 0 var(--space-6);flex:1;font-size:15px}
.plan li{margin-bottom:6px}
.addons{margin-top:var(--space-6);color:var(--abu-teks);font-size:14px}
/* Kartu custom: highlight untuk brand yang atur budget sendiri */
.custom-plan{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8,32px);background:var(--aspal);color:var(--kain);border:2px solid var(--aspal);border-radius:var(--radius-lg);padding:var(--space-8,32px);box-shadow:6px 6px 0 var(--brand-oranye);margin-bottom:var(--space-12)}
.custom-plan h3{font:800 32px/1 var(--font-display);color:var(--kain)}
.custom-plan .plan-meta{color:#C9C6BF}
.custom-plan .price{color:var(--aksen-kuning)}
.custom-plan ul{padding-left:18px;margin:0 0 var(--space-6);font-size:15px}
.custom-plan li{margin-bottom:8px}
.custom-plan .btn{box-shadow:4px 4px 0 var(--kain)}
.custom-hitung{align-self:center;background:var(--kain);color:var(--aspal);border-radius:var(--radius-md);padding:var(--space-6);transform:rotate(1deg)}
.custom-hitung dl{margin:12px 0}
.custom-hitung dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--garis)}
.custom-hitung dt{font-size:15px}
.custom-hitung dt small{display:block;color:var(--abu-teks);font-size:12px}
.custom-hitung dd{margin:0;font-weight:700;white-space:nowrap}
.custom-hitung .total{border-bottom:0;font:800 18px/1.2 var(--font-display)}
.custom-hitung .total dt{font-size:18px}
.custom-hitung p{font-size:13px;color:var(--abu-teks)}
.plans-head{margin-bottom:var(--space-6)}
.plans-head h3{font:800 24px/1.1 var(--font-display)}
.plans-head p{color:var(--abu-teks);max-width:40em;margin-top:6px}
@media (max-width:860px){.custom-plan{grid-template-columns:1fr;padding:var(--space-6);max-width:520px}.custom-hitung{transform:none}}
@media (max-width:860px){.plans{grid-template-columns:1fr;max-width:440px}}

/* FAQ */
.faq details{border-bottom:1px solid var(--garis);padding:var(--space-4) 0}
.faq summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 24px/1 var(--font-display);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--abu-teks);margin-top:var(--space-2)}

/* Form */
.form{background:var(--kain);border:2px solid var(--aspal);border-radius:var(--radius-lg);box-shadow:6px 6px 0 var(--aspal);padding:var(--space-6);display:grid;gap:var(--space-4)}
.role-pick{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.role-pick legend{margin-bottom:var(--space-2)}
.role-pick label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:2px solid var(--aspal);border-radius:var(--radius-pill);background:var(--putih);font-weight:700;cursor:pointer}
.role-pick label:has(input:checked){background:var(--aspal);color:var(--kain)}
.role-pick input{accent-color:var(--brand-oranye)}
.field{display:grid;gap:6px}
.field[hidden]{display:none}
.field label{font-weight:700;font-size:14px}
.field input,.field select{font:400 16px/24px var(--font-body);min-height:48px;padding:10px 14px;border:2px solid var(--abu-teks);border-radius:var(--radius-sm);background:var(--putih);color:var(--aspal)}
.field input:focus,.field select:focus{border-color:var(--aspal);outline:none;box-shadow:3px 3px 0 var(--aspal)}
.field input[aria-invalid="true"]{border-color:var(--bahaya)}
.form-msg{font-weight:700;min-height:0}
.form-msg.error{color:var(--bahaya)}
.form-msg.ok{color:var(--sukses)}

/* Footer */
.footer{background:var(--aspal);color:var(--kain);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--space-12) var(--space-6)}
.footer-brand p{color:#B8B5AE;font-size:14px;line-height:22px;margin:var(--space-4) 0;max-width:28em}
.footer-social{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.footer a{color:var(--kain);text-decoration:none}
.footer a:hover{color:var(--aksen-kuning);text-decoration:underline}
.footer-col h2{font:700 12px/16px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--aksen-kuning);margin:0 0 var(--space-4)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14px}
.footer-col a{color:#D9D6CF}
.footer-social a{font-size:14px;font-weight:700}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid #33343A;font-size:13px;color:#9A9890}
.footer-bottom a{color:#9A9890}
.footer-bottom span:first-child{margin-right:auto}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:1/-1}}

/* Halaman konten (legal, panduan, blog, dll) */
.doc-hero{padding:56px 0 32px;border-bottom:2px solid var(--aspal);background:var(--putih)}
.doc-hero h1{font:800 clamp(34px,5vw,52px)/1.05 var(--font-display);letter-spacing:-.02em;margin:var(--space-2) 0 var(--space-4)}
.doc-hero p{color:var(--abu-teks);max-width:44em;font-size:17px;line-height:27px}
.doc-meta{font-size:14px;color:var(--abu-teks);margin-top:var(--space-4)}
.doc-wrap{display:grid;grid-template-columns:220px 1fr;gap:var(--space-12);padding:48px var(--space-4) 80px;max-width:1120px;margin:0 auto}
.toc{position:sticky;top:96px;align-self:start;font-size:14px}
.toc ol{list-style:none;padding:0;margin:var(--space-2) 0 0;display:grid;gap:8px;border-left:2px solid var(--garis)}
.toc a{color:var(--abu-teks);text-decoration:none;display:block;padding-left:12px;margin-left:-2px;border-left:2px solid transparent}
.toc a:hover{color:var(--aspal);border-left-color:var(--brand-oranye)}
.prose{max-width:720px;font-size:16px;line-height:27px;min-width:0}
.doc-wrap > *{min-width:0}
.prose table{display:block;overflow-x:auto;max-width:100%}
.prose h2{font:800 26px/1.2 var(--font-display);margin:48px 0 12px;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 18px/1.4 var(--font-body);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--garis);vertical-align:top}
.prose th{border-bottom:2px solid var(--aspal);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--abu-teks)}
.prose code{background:var(--putih);border:1px solid var(--garis);border-radius:6px;padding:1px 6px;font-size:14px}
.callout{background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-md);box-shadow:var(--shadow-stiker);padding:var(--space-4) var(--space-6);margin:0 0 24px}
.callout-kuning{background:var(--aksen-kuning)}
.callout p:last-child{margin:0}
.doc-form{display:grid;gap:var(--space-4);background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-lg);box-shadow:var(--shadow-stiker);padding:var(--space-6);margin-bottom:24px}
.doc-form .field input,.doc-form .field select,.doc-form .field textarea{font:400 16px/24px var(--font-body);min-height:48px;padding:10px 14px;border:2px solid var(--abu-teks);border-radius:var(--radius-sm);background:var(--putih);color:var(--aspal);width:100%}
.doc-form textarea{min-height:120px;resize:vertical}
.doc-form .field input:focus,.doc-form .field select:focus,.doc-form .field textarea:focus{border-color:var(--aspal);outline:none;box-shadow:3px 3px 0 var(--aspal)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6)}
.post{display:flex;flex-direction:column;gap:10px;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-lg);box-shadow:var(--shadow-stiker);padding:var(--space-6);text-decoration:none;color:inherit}
.post h3{font:800 22px/1.2 var(--font-display);margin:0}
.post p{color:var(--abu-teks);font-size:15px;margin:0}
.post .meta{font-size:13px;color:var(--abu-teks);margin-top:auto}
.log{border-left:2px solid var(--aspal);padding-left:var(--space-6);margin-bottom:var(--space-12);position:relative}
.log::before{content:"";position:absolute;left:-9px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--brand-oranye);border:2px solid var(--aspal)}
.tag{display:inline-block;font:700 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-pill);border:1.5px solid var(--aspal);margin-right:6px;vertical-align:middle}
.tag-baru{background:var(--aksen-kuning)}.tag-ubah{background:var(--putih)}.tag-fix{background:var(--pink-permen)}
@media (max-width:860px){.doc-wrap{grid-template-columns:1fr;gap:var(--space-6)}.toc{position:static}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Models */
.models{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.model{display:flex;flex-direction:column;gap:var(--space-4);background:var(--kain);border:2px solid var(--aspal);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-stiker)}
.model .badge{align-self:flex-start}
.model h3{font:800 30px/1 var(--font-display)}
.model-lead{font-size:17px}
.model-facts{margin:0;display:grid;gap:10px;flex:1}
.model-facts div{display:grid;grid-template-columns:120px 1fr;gap:var(--space-4);padding-top:10px;border-top:1px solid var(--garis)}
.model-facts dt{font-weight:700;font-size:14px}
.model-facts dd{margin:0;color:var(--abu-teks);font-size:15px}
.subheading{font:800 24px/1.2 var(--font-display);margin:var(--space-12) 0 var(--space-4)}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.prod{border:2px dashed var(--aspal);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6)}
.prod h4{margin:0 0 6px;font-size:17px}
.prod p{color:var(--abu-teks);font-size:15px}
.example{margin-top:var(--space-6);max-width:640px}
.example table{width:100%;border-collapse:collapse;margin-top:var(--space-2);font-size:15px;font-variant-numeric:tabular-nums}
.example th,.example td{text-align:right;padding:8px 0;border-bottom:1px solid var(--garis)}
.example th:first-child,.example td:first-child{text-align:left}
.example th{font-size:13px;color:var(--abu-teks)}
.example .total td{font-weight:700;border-bottom:2px solid var(--aspal)}
.small-note{font-size:14px;color:var(--abu-teks);margin-top:var(--space-2)}
@media (max-width:760px){.models,.prod-grid{grid-template-columns:1fr}.model-facts div{grid-template-columns:1fr;gap:2px}}

/* Section mulai: kartu peran di atas oranye */
@media (min-width:761px){.roles .model-facts div{grid-template-columns:140px 1fr}}
.roles-masuk{margin-top:var(--space-6);text-align:center}
.roles-masuk a{color:var(--aspal);font-weight:700}

/* Blog: breadcrumb, jawaban singkat, CTA, artikel terkait */
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--aspal);text-decoration:underline}
.prose .answer .label,.prose .callout>.label{margin-bottom:6px}
.prose .callout ul{margin:0;padding-left:20px}
.prose .faq{margin-bottom:32px}
.prose .faq p{margin:var(--space-2) 0 0}
.prose .cta{margin-top:40px}
.prose .cta .btn{text-decoration:none}
.prose .related{margin-bottom:8px}
.prose .related .post{color:inherit;text-decoration:none}
.prose .related .post h3{font-size:19px}

/* Tombol loading untuk form kontak & lapor bug */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--aspal);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mode halaman utama: brand / duta */
html:not([data-mode="duta"]) [data-untuk="duta"],html[data-mode="duta"] [data-untuk="brand"]{display:none !important}
html[data-mode="duta"] [data-urut-duta]{order:-1}
.mode-toggle{display:inline-flex;gap:4px;padding:4px;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-pill);box-shadow:3px 3px 0 var(--aspal);margin-bottom:var(--space-6)}
.mode-toggle button{font:700 15px/1 var(--font-body);color:var(--aspal);background:none;border:0;border-radius:var(--radius-pill);padding:11px 18px;cursor:pointer;transition:background .15s,color .15s}
.mode-toggle button[aria-pressed="true"]{background:var(--aspal);color:var(--kain)}
.mode-toggle button:not([aria-pressed="true"]):hover{background:rgba(23,24,28,.06)}
.hero-copy .badge{margin-bottom:var(--space-4)}
.angka small{font:600 13px/1 var(--font-body);color:var(--abu-teks);margin-left:4px}
.cuan-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-6);align-items:stretch}
.cuan{display:flex;flex-direction:column;gap:12px;background:var(--putih);border:2px solid var(--aspal);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-stiker)}
.cuan .badge{align-self:flex-start}
.cuan h3{font:800 24px/1.15 var(--font-display)}
.cuan p{font-size:15px}
.cuan-utama{background:var(--aksen-kuning);box-shadow:6px 6px 0 var(--aspal)}
.cuan-utama .badge{background:var(--putih)}
.cuan dl{margin:0}
.cuan dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(23,24,28,.3)}
.cuan dd{margin:0;font-weight:700;white-space:nowrap}
.cuan .total{border-bottom:0;font:800 20px/1.2 var(--font-display)}
.cuan-note{margin-top:auto;color:var(--abu-teks);font-size:13px !important}
.level-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.lv{border:2px solid var(--aspal);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--putih)}
.lv strong{font:800 20px/1 var(--font-display)}
.lv span{font-size:13px;color:var(--abu-teks)}
.lv-bronze{border-top:8px solid #B87333}.lv-silver{border-top:8px solid #A8A9AD}.lv-gold{border-top:8px solid var(--aksen-kuning)}.lv-platinum{border-top:8px solid #7FD3E0}
@media (max-width:900px){.cuan-grid{grid-template-columns:1fr;max-width:520px}.level-row{grid-template-columns:repeat(2,1fr)}}