:root{--primary:#1B3A7B;--primary-light:#2B55A8;--accent:#F59E0B;--dark:#0F172A;--gray:#64748B;--white:#FFFFFF;--bg:#F8FAFC}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--dark);line-height:1.7;margin:0;padding:0}
.container{max-width:800px;margin:0 auto;padding:20px}
h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;color:var(--primary);margin-bottom:16px}
h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;color:var(--primary);margin:32px 0 16px}
p{margin-bottom:16px;color:#374151}
ul{margin:0 0 16px 24px}
li{margin-bottom:8px}
.tip{background:var(--white);border-left:4px solid var(--accent);padding:20px;margin:20px 0;border-radius:0 12px 12px 0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tip h3{color:var(--primary);margin:0 0 8px;font-size:18px}
.cta{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);padding:24px;text-align:center;border-radius:12px;margin:32px 0}
.cta a{display:inline-block;background:var(--accent);color:var(--dark);padding:14px 28px;border-radius:8px;text-decoration:none;font-weight:700}
.meta{color:var(--gray);font-size:14px;margin-bottom:24px}

/* ── Perbaikan luber di layar kecil ──────────────────────────────────────
   Grid kolom tetap yang ditulis langsung di atribut style tidak pernah
   menyusut: track 1fr bertumpu pada lebar min-content isinya, jadi kartu
   ber-padding tebal memaksa halaman melebar dan bisa digeser ke samping.
   min-width:0 melepas batas itu; jumlah kolom diturunkan bertahap supaya
   isinya tetap terbaca, bukan sekadar tidak luber. */
@media(max-width:768px){
  [style*="grid-template-columns:repeat("]>*{min-width:0}
  [style*="repeat(4,1fr)"],[style*="repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
  [style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:430px){
  [style*="repeat(2,1fr)"],[style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(5,1fr)"]{grid-template-columns:1fr!important}
}


/* Shared performance safeguards */
img{max-width:100%;height:auto}
img[loading="lazy"]{content-visibility:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.anim{opacity:1!important;transform:none!important}}