*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-isi);color:var(--teks);background:var(--latar);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--utama)}
h1,h2,h3{font-family:var(--f-judul);line-height:1.15;margin:0 0 .6em;letter-spacing:-.02em;font-weight:800}h3{font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.2rem)}h2{font-size:clamp(1.6rem,4vw,2.3rem)}h3{font-size:1.15rem}
p{margin:0 0 1em;color:var(--redup)}
.wadah{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.sec{padding:clamp(48px,8vw,96px) 0}
.sec:nth-of-type(even){background:var(--permukaan)}
.kepala{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--latar) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--teks) 10%,transparent)}
.kepala .wadah{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.merek{font-family:var(--f-judul);font-weight:700;font-size:1.2rem;color:var(--teks);text-decoration:none}
.merek .logo{height:40px;width:auto}
.kepala nav{display:flex;gap:22px}
.kepala nav a{color:var(--teks);text-decoration:none;white-space:nowrap;font-size:.95rem}
.kepala nav a[aria-current]{color:var(--utama);font-weight:600}
.aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.tbl{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--sudut-tbl);font-weight:600;text-decoration:none;border:2px solid var(--utama);cursor:pointer;font:inherit;font-weight:600;min-height:48px}
.tbl-utama{background:var(--utama);color:var(--di-utama)}
.tbl-garis{background:transparent;color:var(--utama)}
.tbl-teks{border-color:transparent;background:transparent;color:var(--utama);padding-inline:0}
.ik{flex:none;vertical-align:middle}
.sec-hero .wadah{display:grid;gap:32px;align-items:center}
.sec-hero .hero-gambar img{border-radius:var(--sudut);width:100%;aspect-ratio:4/3;object-fit:cover}
.sec-hero.var-B .wadah{text-align:center;justify-items:center}.sec-hero.var-B .aksi{justify-content:center}
.sec-hero.var-C{background:var(--utama)!important}.sec-hero.var-C h1,.sec-hero.var-C h2,.sec-hero.var-C p,.sec-hero.var-C .label{color:var(--di-utama)}.sec-hero.var-C .tbl-utama{background:var(--di-utama);color:var(--utama);border-color:var(--di-utama)}.sec-hero.var-C .tbl-garis{color:var(--di-utama);border-color:var(--di-utama)}.sec-hero.var-C .poin,.sec-hero.var-C .poin .ik{color:var(--di-utama)}
.kisi{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kartu{background:var(--latar);border-radius:var(--sudut);padding:24px;border:1px solid color-mix(in srgb,var(--teks) 10%,transparent);text-decoration:none;color:inherit;margin:0}
.kartu img{border-radius:calc(var(--sudut)/2);margin-bottom:14px;aspect-ratio:16/10;object-fit:cover;width:100%}
.ikon-bulat{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--utama) 14%,transparent);color:var(--utama);margin-bottom:14px}
.sec-keunggulan.var-B .kartu{border:0;background:transparent;padding:0}
.dua-kolom{display:grid;gap:32px;align-items:start}
.dua-kolom img{border-radius:var(--sudut)}
.galeri{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.galeri figure{margin:0}.galeri img{aspect-ratio:1;object-fit:cover;border-radius:calc(var(--sudut)/2);width:100%}
blockquote{margin:0}
figcaption{display:flex;align-items:center;gap:10px;margin-top:12px}figcaption span{color:var(--redup);font-size:.9rem}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin:0!important;aspect-ratio:1!important}
.harga .nominal{font-size:2rem;font-weight:700;font-family:var(--f-judul);color:var(--teks)}
.harga ul{list-style:none;padding:0;margin:16px 0}.harga li{display:flex;gap:8px;padding:4px 0}.harga li .ik{color:var(--utama)}
.harga.unggulan{border:2px solid var(--utama)}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--teks) 12%,transparent);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--utama);font-size:1.5rem;line-height:1;flex:none}.faq details[open] summary::after{content:"\2212"}.faq details p{margin-top:10px}
.cta-kotak{background:var(--utama);color:var(--di-utama);border-radius:var(--sudut);padding:clamp(28px,5vw,56px);text-align:center}
.cta-kotak h2,.cta-kotak p{color:var(--di-utama)}.cta-kotak .aksi{justify-content:center}.cta-kotak .tbl-utama{background:var(--di-utama);color:var(--utama);border-color:var(--di-utama)}.cta-kotak .tbl-garis{color:var(--di-utama);border-color:var(--di-utama)}
.info{list-style:none;padding:0}.info li{display:flex;gap:10px;margin:8px 0}
.formulir{display:grid;gap:14px;background:var(--latar);padding:24px;border-radius:var(--sudut);border:1px solid color-mix(in srgb,var(--teks) 10%,transparent)}
.formulir label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.formulir input,.formulir textarea{font:inherit;padding:12px;border-radius:calc(var(--sudut)/2);border:1px solid color-mix(in srgb,var(--teks) 25%,transparent);background:var(--latar);color:var(--teks)}
.jebakan{position:absolute;left:-9999px}
.hasil-formulir{margin-top:12px;padding:10px 14px;border-radius:var(--sudut);font-size:.95rem}.hasil-formulir.ok{background:#e7f6ec;color:#14532d}.hasil-formulir.galat{background:#fdecec;color:#7f1d1d}
.kecil{font-size:.85rem}
.label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--utama);margin-bottom:12px}
.kartu:is(a):hover{border-color:var(--utama)}
.peta iframe{width:100%;height:380px;border:0;border-radius:var(--sudut)}
.kaki{padding:56px 0 28px;border-top:1px solid color-mix(in srgb,var(--teks) 10%,transparent);font-size:.92rem;color:var(--redup);background:var(--permukaan)}
.kaki a{color:var(--redup);text-decoration:none}.kaki a:hover{color:var(--utama)}
.kaki-kisi{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:40px}
.kaki-merek{grid-column:1/-1}.kaki-merek p{max-width:420px;margin-top:12px}
.kaki h4{font-family:var(--f-judul);color:var(--teks);font-size:.95rem;margin:0 0 14px}
.kaki ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.kaki .info li{display:flex;gap:10px;align-items:flex-start;margin:0}
.sosial{display:flex;gap:10px;margin-top:18px}.sosial a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--teks) 18%,transparent)}
.kaki-bawah{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--teks) 10%,transparent);font-size:.85rem}
@media (min-width:860px){.kaki-kisi{grid-template-columns:1.6fr repeat(3,1fr)}.kaki-merek{grid-column:auto}}
.kepala-sec{max-width:720px;margin-bottom:36px}.kepala-sec h2{margin-bottom:.4em}.pengantar{font-size:1.05rem}
.sec-langkah .kepala-sec,.sec-harga .kepala-sec,.sec-faq .kepala-sec{margin-inline:auto;text-align:center}
.poin{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.92rem;color:var(--redup)}.poin li{display:flex;align-items:center;gap:8px}.poin .ik{color:var(--utama);width:18px;height:18px}
.chip{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}.chip span{font-size:.78rem;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--utama) 12%,transparent);color:var(--utama);font-weight:600}
.kartu{display:flex;flex-direction:column}.kartu-aksi{margin-top:auto;padding-top:12px}
.kartu .label{margin-bottom:6px}
.langkah{list-style:none;padding:0;margin:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:l}
.langkah li{position:relative;padding:24px;border-radius:var(--sudut);background:var(--latar);border:1px solid color-mix(in srgb,var(--teks) 10%,transparent)}
.langkah .nomor{display:block;font-family:var(--f-judul);font-size:2rem;font-weight:700;color:var(--utama);line-height:1;margin-bottom:14px}
.teks-panjang{max-width:760px}.teks-panjang h3{margin-top:1.6em}.teks-panjang ul{color:var(--redup);padding-left:20px}
.sec-cta.var-B{padding:0}.sec-cta.var-B .wadah{max-width:none;padding:0}.sec-cta.var-B .cta-kotak{border-radius:0;padding:clamp(48px,7vw,80px) 16px}
.cta-kotak .label{color:var(--di-utama);opacity:.8}
.kepala nav a.tbl-utama{color:var(--di-utama)}.kaki .merek{color:var(--teks)}.harga .tbl{margin-top:auto;justify-content:center}
.kartu-kontak{padding:32px;background:var(--permukaan)}.kartu-kontak .aksi{margin-top:16px}
.buka-menu{display:none}.tombol-menu{display:none}
@media (max-width:859px){.tombol-menu{display:grid;place-items:center;width:44px;height:44px;cursor:pointer}.tombol-menu span,.tombol-menu span::before,.tombol-menu span::after{display:block;width:22px;height:2px;background:var(--teks);position:relative;content:""}.tombol-menu span::before{position:absolute;top:-7px}.tombol-menu span::after{position:absolute;top:7px}
.kepala nav{display:none;flex-basis:100%;flex-direction:column;gap:4px;padding:8px 0 16px}.kepala nav a{padding:10px 0}.kepala nav .tbl{justify-content:center;margin-top:8px}.buka-menu:checked~nav{display:flex}}
@media (min-width:860px){.kepala nav{align-items:center}.kepala nav .tbl{min-height:40px;padding:8px 18px;margin-left:8px}}
.wa-mengambang{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:20}
.wa-mengambang .ik{width:28px;height:28px}
.pita-pratinjau{background:#f59e0b;color:#111;text-align:center;padding:8px 16px;font-weight:600;font-size:.9rem;position:sticky;top:0;z-index:30}
.js .anim{opacity:0;transition:opacity .6s ease,transform .6s ease}.js .anim-geser-atas{transform:translateY(24px)}.js .anim-perbesar{transform:scale(.96)}.js .anim.tampil{opacity:1;transform:none}
.js .anim .kisi>*,.js .anim .langkah>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}.js .anim.tampil .kisi>*,.js .anim.tampil .langkah>*{opacity:1;transform:none}
/* Teks muncul bertahap: label, judul, paragraf, lalu tombol, sebelum kartu menyusul. */
.js .anim :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:is(.label,h1,h2,p,.pengantar,.aksi,.poin){opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .anim.tampil :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:is(.label,h1,h2,p,.pengantar,.aksi,.poin){opacity:1;transform:none}
.js .anim.tampil :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:nth-child(2){transition-delay:.12s}.js .anim.tampil :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:nth-child(3){transition-delay:.24s}.js .anim.tampil :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:nth-child(4){transition-delay:.36s}.js .anim.tampil :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:nth-child(n+5){transition-delay:.48s}
.js .anim.tampil :is(.kisi,.langkah)>*{transition-delay:.25s}.js .anim.tampil :is(.kisi,.langkah)>:nth-child(2){transition-delay:.35s}.js .anim.tampil :is(.kisi,.langkah)>:nth-child(3){transition-delay:.45s}.js .anim.tampil :is(.kisi,.langkah)>:nth-child(n+4){transition-delay:.55s}
.js .anim .hero-gambar{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .9s ease .35s,transform .9s cubic-bezier(.2,.7,.2,1) .35s}.js .anim.tampil .hero-gambar{opacity:1;transform:none}
/* Hero varian C: latar warna merek yang bergerak perlahan, dua cahaya melayang, dan gambar yang mengambang. */
.sec-hero.var-C{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,var(--utama),color-mix(in srgb,var(--utama) 55%,#000) 45%,color-mix(in srgb,var(--utama) 70%,#7c3aed) 75%,var(--utama))!important;background-size:300% 300%!important;animation:latar-gerak 16s ease-in-out infinite}
.sec-hero.var-C::before,.sec-hero.var-C::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.sec-hero.var-C::before{width:340px;height:340px;background:color-mix(in srgb,var(--di-utama) 60%,transparent);top:-120px;left:-80px;animation:cahaya-a 14s ease-in-out infinite}
.sec-hero.var-C::after{width:300px;height:300px;background:color-mix(in srgb,var(--utama) 40%,#22d3ee);bottom:-120px;right:-60px;animation:cahaya-b 18s ease-in-out infinite}
.sec-hero.var-C .hero-gambar img{aspect-ratio:auto;object-fit:contain;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:mengambang 6s ease-in-out infinite}
.js .sec-hero.anim{opacity:1;transform:none}
.sec-hero.var-C .wadah{position:relative;z-index:1}
.latar-kanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.latar-kode .latar-kanvas{opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.latar-grid .wadah::before{content:"";position:absolute;inset:-200px -50vw;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.55) 1.5px,transparent 2.5px);background-size:44px 44px,44px 44px,44px 44px;background-position:0 0,0 0,-22px -22px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);animation:grid-maju 6s linear infinite}
.latar-grid .wadah::after{content:"";position:absolute;left:-50vw;right:-50vw;top:0;height:2px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:pindai 5s ease-in-out infinite}
@keyframes grid-maju{to{background-position:44px 44px,44px 44px,22px 22px}}
@keyframes pindai{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
html,body{max-width:100%;overflow-x:hidden}@supports (overflow:clip){html,body{overflow-x:clip}}
.sec-hero.var-C{clip-path:inset(0)}
.sec-hero.var-C .poin{gap:8px}.sec-hero.var-C .poin li{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:99px;font-weight:500;font-size:.92rem;color:#fff}
@media (max-width:859px){.sec-hero{padding:28px 0 40px}.sec-hero .wadah{gap:24px}}
/* Teks hero memakai animasi CSS saat halaman dibuka, tanpa menunggu skrip, sehingga tetap terlihat walau skrip terlambat. */
.js .sec-hero.anim .hero-teks>*,.js .sec-hero.anim .hero-gambar{opacity:1;transform:none;transition:none;animation:naik .7s cubic-bezier(.2,.7,.2,1) both}
.js .sec-hero.anim .hero-teks>:nth-child(2){animation-delay:.1s}.js .sec-hero.anim .hero-teks>:nth-child(3){animation-delay:.2s}.js .sec-hero.anim .hero-teks>:nth-child(4){animation-delay:.3s}.js .sec-hero.anim .hero-teks>:nth-child(n+5){animation-delay:.4s}.js .sec-hero.anim .hero-gambar{animation-delay:.35s;animation-duration:.9s}
@keyframes naik{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Kartu berwarna bergantian: empat warna yang tenang, dipakai bergiliran. */
:is(.kartu-aksen,.kartu-pastel,.kartu-gelap) :is(.kisi,.langkah)>*{--w:#2563eb}
:is(.kartu-aksen,.kartu-pastel,.kartu-gelap) :is(.kisi,.langkah)>:nth-child(4n+2){--w:#0d9488}
:is(.kartu-aksen,.kartu-pastel,.kartu-gelap) :is(.kisi,.langkah)>:nth-child(4n+3){--w:#7c3aed}
:is(.kartu-aksen,.kartu-pastel,.kartu-gelap) :is(.kisi,.langkah)>:nth-child(4n+4){--w:#d97706}
.kartu-aksen .ikon-bulat,.kartu-aksen .nomor,.kartu-aksen .harga li .ik,.kartu-pastel .nomor,.kartu-pastel .harga li .ik{color:var(--w)}
:is(.kartu-aksen,.kartu-pastel) .ikon-bulat{background:color-mix(in srgb,var(--w) 14%,transparent)}
.kartu-aksen :is(.kartu,.langkah>li){border-top:4px solid var(--w);box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06)}
.kartu-aksen .harga.unggulan{border:2px solid var(--w);border-top-width:4px}
.kartu-pastel :is(.kartu,.langkah>li){background:color-mix(in srgb,var(--w) 7%,#fff);border:1px solid color-mix(in srgb,var(--w) 18%,transparent)}
.kartu-pastel .ikon-bulat{background:var(--w);color:#fff}
.kartu-pastel .harga.unggulan{border:2px solid var(--w)}
.kartu-gelap{background:#0f172a!important;color:#e2e8f0}.kartu-gelap :is(h2,h3,.nominal){color:#fff}.kartu-gelap :is(.label){color:color-mix(in srgb,var(--utama) 60%,#fff)}.kartu-gelap :is(p,small,.pengantar,li){color:#cbd5e1}
.kartu-gelap :is(.kartu,.langkah>li){background:linear-gradient(160deg,color-mix(in srgb,var(--w) 22%,#0f172a),#111c33 60%);border:1px solid color-mix(in srgb,var(--w) 35%,transparent)}
.kartu-gelap .ikon-bulat{background:color-mix(in srgb,var(--w) 25%,transparent);color:color-mix(in srgb,var(--w) 55%,#fff)}.kartu-gelap :is(.nomor,.harga li .ik){color:color-mix(in srgb,var(--w) 55%,#fff)}
.kartu-gelap .harga.unggulan{border:2px solid color-mix(in srgb,var(--w) 70%,#fff)}.kartu-gelap .tbl-garis{color:#fff;border-color:rgba(255,255,255,.55)}.kartu-gelap .ikon-bulat{color:color-mix(in srgb,var(--w) 40%,#fff)}.kartu-gelap a:not(.tbl){color:color-mix(in srgb,var(--w) 50%,#fff)}
@keyframes latar-gerak{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cahaya-a{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,80px)}}
@keyframes cahaya-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-110px,-70px)}}
@keyframes mengambang{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.js .anim,.js .anim .kisi>*,.js .anim .langkah>*,.js .anim :is(.hero-teks,.kepala-sec,.cta-kotak,.wadah)>:is(.label,h1,h2,p,.pengantar,.aksi,.poin),.js .anim .hero-gambar{opacity:1;transform:none;transition:none}.sec-hero.var-C,.sec-hero.var-C::before,.sec-hero.var-C::after,.sec-hero.var-C .hero-gambar img,.latar-grid .wadah::before,.latar-grid .wadah::after,.js .sec-hero.anim .hero-teks>*,.js .sec-hero.anim .hero-gambar{animation:none}}
@media (min-width:960px){.kisi.n-2,.kisi.n-4{grid-template-columns:repeat(2,1fr)}.kisi.n-3,.kisi.n-6,.kisi.n-9{grid-template-columns:repeat(3,1fr)}.sec-harga .kisi.n-4,.sec-keunggulan.var-B .kisi.n-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:860px){.sec-hero .wadah{grid-template-columns:1.1fr 1fr}.sec-hero.var-B .wadah{grid-template-columns:1fr;max-width:820px}.dua-kolom{grid-template-columns:1fr 1fr}.sec-hero.var-C .wadah{grid-template-columns:1fr 1fr}}
.artikel .wadah{max-width:760px}.artikel h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.3em 0 .2em}.meta-artikel,.remah{color:var(--redup)}.remah a{color:inherit}
.isi-artikel{font-size:1.08rem;line-height:1.75}.isi-artikel h2{font-size:1.45rem;margin:1.6em 0 .5em}.isi-artikel ul,.isi-artikel ol{padding-left:22px}.isi-artikel li{margin:.3em 0}
.artikel figure{margin:24px 0}.artikel figure img{width:100%;border-radius:var(--sudut)}.artikel figcaption{font-size:.88rem;color:var(--redup);margin-top:8px}
.artikel blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--utama);font-size:1.15rem}.artikel blockquote cite{display:block;font-size:.9rem;color:var(--redup);font-style:normal}
.video-yt{display:block;position:relative;aspect-ratio:16/9;margin:24px 0;border-radius:var(--sudut);overflow:hidden;background:#000;color:#fff;text-decoration:none}.video-yt iframe,.video-yt img{width:100%;height:100%;border:0;object-fit:cover}.video-yt span{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.7);padding:6px 12px;border-radius:99px}
.tag-artikel span{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:99px;background:var(--permukaan);font-size:.85rem}
.kategori-artikel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.kategori-artikel a{padding:6px 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--teks) 15%,transparent);text-decoration:none;color:inherit}.kategori-artikel a[aria-current]{background:var(--utama);color:var(--di-utama);border-color:var(--utama)}
@media (min-width:860px){.sec-artikel_terbaru .kisi{grid-template-columns:repeat(3,1fr)}}
/* Varian C dengan 5 kartu atau lebih yang tidak pas dalam kisi: digeser juga di laptop, tiga kartu sekaligus. */
@media (min-width:860px){.sec.var-C:not(.sec-hero) .kisi:is(.n-5,.n-7,.n-8,.n-10,.n-11,.n-12){grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 40px)/3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin}.sec.var-C:not(.sec-hero) .kisi:is(.n-5,.n-7,.n-8,.n-10,.n-11,.n-12)>*{scroll-snap-align:start}}
/* Varian C pada section berkartu: di ponsel kartu digeser ke samping agar halaman tidak memanjang. */
@media (max-width:859px){.sec.var-C:not(.sec-hero) .kisi,.sec.var-C .langkah{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,82%);overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:2px 2px 12px;margin-inline:-2px;scrollbar-width:thin}.sec.var-C:not(.sec-hero) .kisi>*,.sec.var-C .langkah>*{scroll-snap-align:start}}