:root{--primary:#1B3A7B;--accent:#F59E0B;--dark:#0F172A;--white:#FFFFFF;--bg:#F8FAFC;--gray:#F1F5F9}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--dark);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)}
h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;color:var(--primary);margin:24px 0 12px}
p{line-height:1.7;font-size:15px}
ul{padding-left:20px;line-height:1.8}
.card{background:var(--white);padding:20px;border-radius:12px;margin:16px 0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
table{width:100%;border-collapse:collapse;margin:20px 0;background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
th{background:var(--primary);color:var(--white);padding:14px;text-align:left;font-size:14px}
td{padding:14px;border-bottom:1px solid var(--gray);font-size:14px}
.highlight{background:var(--accent);color:var(--dark);padding:2px 8px;border-radius:4px;font-weight:600}
.cta{background:linear-gradient(135deg,var(--primary),#2B55A8);color:var(--white);padding:24px;text-align:center;border-radius:12px;margin:24px 0}
.cta a{display:inline-block;background:var(--accent);color:var(--dark);padding:14px 28px;border-radius:8px;text-decoration:none;font-weight:700}

/* ── 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}
}

/* Tabel tidak bisa menyusut di bawah lebar isinya. Di layar kecil tabel
   digulir di dalam kotaknya sendiri, supaya halaman tidak ikut bergeser. */
@media(max-width:768px){
  table{display:block;width:100%;max-width:100%;overflow-x:auto}
}


/* 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}}