
/* ===== GRAB4D gaya "arngren" — jelek disengaja, terbatabaca tetap wajib ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding:0;font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-size:16px;line-height:1.5;color:#000;
 background:#ffe600;
 background-image:repeating-linear-gradient(45deg,#ffe600 0,#ffe600 26px,#fff6a8 26px,#fff6a8 52px)}
.wrap{max-width:1240px;margin:0 auto;padding:8px}
a{color:#0007ee;text-decoration:underline}
a:visited{color:#7a1fa2}
a:hover{background:#ff0}
mark{background:#ff0;padding:0 3px}
img{border:0}
h1,h2,h3{line-height:1.2;margin:.35em 0}
.f1{font-family:Impact,'Arial Black',sans-serif;letter-spacing:.5px}
.f2{font-family:'Comic Sans MS','Comic Neue',cursive}
.f3{font-family:'Times New Roman',Times,serif;font-size:1.05em}
.f4{font-family:'Courier New',Courier,monospace}
.f5{font-family:Verdana,Geneva,sans-serif;font-size:.92em}
.f6{font-family:Georgia,'Times New Roman',serif}
.f7{font-family:'Trebuchet MS',sans-serif}
.f8{font-family:'Arial Black',Arial,sans-serif}
.miring1{transform:rotate(-.7deg)}
.miring2{transform:rotate(.6deg)}
.miring3{transform:rotate(-1.4deg)}
.miring4{transform:rotate(1.2deg)}
.bx{padding:10px 12px;margin:10px 0;overflow-wrap:break-word}
.b1{background:#c8ffff;border:4px dashed #e91e8c}
.b2{background:#ffff9e;border:4px double #d00}
.b3{background:#fff;border:5px inset #0a0}
.b4{background:#e2ffdd;border:5px ridge #ff8000}
.b5{background:#ffe9cf;border:6px groove #4b0082}
.b6{background:#d0f;border:4px dotted #ff0;color:#fff}
.b6 a{color:#ff0}
.b6 mark{color:#000}
.b7{background:#000;border:6px double #0ff;color:#0f0}
.b7 a{color:#ff0}
.b7 h2 a{color:#ff0}
.b8{background:#fff0f5;border:5px solid #00c}
.b9{background:#ffdcb9;border:5px outset #007}
.kecil{font-size:.85em}
.mono{font-family:'Courier New',monospace;font-size:1.15em;letter-spacing:1px}
.status{color:#0a0;font-weight:bold}
/* header */
.kepala{background:#4b0082;border-bottom:6px ridge #ff0;padding:4px 0 2px}
.pita{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.merek{display:inline-flex;align-items:center;text-decoration:none}
.merek-teks{font-size:2.4em;color:#ff0;text-shadow:3px 3px 0 #d00;margin-left:6px}
.k4{color:#0ff}
.pita-cta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tombol{display:inline-block;padding:6px 14px;border:4px outset #ff0;font-family:Impact,'Arial Black',sans-serif;font-size:1.05em;text-decoration:underline;background:#d00;color:#ff0}
.t-daftar{background:#d00;color:#ff0}
.t-masuk{background:#0057d8;color:#fff}
.tombol:active{border-style:inset}
.tombol.besar{font-size:1.4em;padding:10px 22px}
.t-salin{background:#0a0;color:#fff;cursor:pointer}
.jalur{background:#000;color:#0f0;font-family:'Courier New',monospace;font-size:.9em;border:2px inset #0f0;padding:2px 0;margin:4px 0}
.nav1{background:#c00;color:#fff;padding:5px 8px;font-family:Verdana,sans-serif;font-size:.9em;border-top:2px solid #ff0}
.nav1 a{color:#fff;font-weight:bold}
.nav2{background:#0ff;padding:4px 8px;font-family:'Times New Roman',serif;border-top:2px dotted #000}
.nav2 b{color:#c00}
.hitung-pengunjung{text-align:center;color:#ff0;font-size:.85em;margin:4px 0}
.hit{font-family:'Courier New',monospace;background:#000;color:#0f0;border:2px inset #0f0;padding:1px 8px;letter-spacing:2px}
/* badge */
.baru{display:inline-block;background:#f00;color:#fff;font-family:Impact,sans-serif;padding:0 8px;border:3px outset #ff0;transform:rotate(-7deg);text-transform:uppercase;font-size:.85em}
.panas{display:inline-block;background:#ff7f00;color:#000;font-family:Impact,sans-serif;padding:0 7px;border:3px dashed #000;transform:rotate(4deg);text-transform:uppercase;font-size:.8em}
.denyut{animation:denyut 2.6s ease-in-out infinite}
@keyframes denyut{50%{opacity:.45}}
/* breadcrumb */
.roti{font-family:Verdana,sans-serif;font-size:.85em;background:#fff;border:2px groove #999;padding:3px 8px;margin:8px 0}
.roti ol{margin:0;padding:0;list-style:none;display:inline}
.roti li{display:inline}
/* hero */
.hero{display:flex;flex-wrap:wrap;gap:14px}
.hero-kiri{flex:2 1 340px}
.hero-kanan{flex:1 1 220px}
.hero-judul{font-size:2em;color:#b30000;background:#fff8b0;display:inline-block;padding:2px 8px;border:3px solid #000}
.hero-sub{font-size:1.15em}
.cap{font-size:.8em}
/* grid hasil */
.hasil-judul{color:#c00;text-decoration:underline}
.hasil-grid{display:flex;flex-wrap:wrap;gap:10px}
.kartu{flex:1 1 190px;min-width:170px;text-align:center}
.kartu-judul{font-family:'Trebuchet MS',sans-serif;font-size:1em}
.kartu-judul a{color:#0007ee}
.angka-besar{font-size:2.1em;margin:.2em 0}
.angka-besar-xl{font-size:3.2em;margin:.15em 0}
.angka-besar-xl .angka-full{font-size:.45em;color:#000}
.angka-wrap{text-align:center;background:#fff;border:3px solid #000;padding:6px}
.besar-hitung{font-family:'Courier New',monospace;font-size:1.2em;background:#000;color:#0f0;padding:1px 8px}
.kartu-tgl{font-size:.8em;margin:.2em 0}
.kartu-jam{font-size:.78em;margin:.2em 0}
.kartu-link{font-size:.85em;margin:.3em 0}
/* digit warna (paito) */
.pd{display:inline-block;min-width:1.35em;text-align:center;padding:0 .12em;font-weight:bold;font-family:Impact,'Arial Black',sans-serif}
.d0{background:#e33;color:#fff}
.d1{background:#f80;color:#000}
.d2{background:#fd0;color:#000}
.d3{background:#6c3;color:#000}
.d4{background:#0bb;color:#000}
.d5{background:#39f;color:#fff}
.d6{background:#36f;color:#fff}
.d7{background:#93f;color:#fff}
.d8{background:#f6c;color:#000}
.d9{background:#ccc;color:#000}
.tebal{outline:3px solid #000}
.legend{background:#fff;border:2px solid #000;padding:4px;display:inline-block}
/* tabel */
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;margin:8px 0;background:#fff}
.tabel th{background:#000;color:#ff0;border:3px ridge #e91e8c;padding:5px 8px;font-family:Impact,sans-serif;font-size:.9em;text-align:left}
.tabel td{border:2px solid #000;padding:4px 8px;vertical-align:top}
.tabel tbody tr:nth-child(odd) td{background:#fff}
.tabel tbody tr:nth-child(even) td{background:#e9ffce}
.tabel tbody tr:hover td{background:#ffd}
.paito-tabel td{font-family:Impact,sans-serif;font-size:1.05em;text-align:center}
.paito-tabel td:first-child,.paito-tabel td:nth-child(2){font-family:'Courier New',monospace;text-align:left}
.pred-tabel .besar2{font-size:1.6em;letter-spacing:2px}
.besar2{font-size:1.5em;letter-spacing:1px}
/* galeri */
.galeri-baris{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.galeri-baris figure{margin:0;text-align:center;background:#fff;border:3px groove #e91e8c;padding:4px}
.galeri-baris figcaption{font-size:.8em}
/* struktur */
.kolom2{columns:2 300px;column-gap:22px}
.kolom3{columns:3 240px;column-gap:20px}
.kolom2 p,.kolom3 p{break-inside:avoid;margin:.4em 0}
.paito-list{columns:2 300px;column-gap:20px;padding-left:22px}
.paito-list li{break-inside:avoid;margin:.3em 0}
.artikel-list{padding-left:22px}
.artikel-list li{margin:.5em 0}
.angka-panas{background:#fff;border:3px solid #000;padding:6px;display:inline-block}
.cta-strip{font-size:1.05em;text-align:center}
.artikel .lead{font-size:1.12em}
.faq dt{margin-top:.9em}
.faq dd{margin:0 0 .5em 0;border-left:4px solid #e91e8c;padding-left:10px}
.cari-box{background:#fff;border:4px double #000;padding:8px;margin:8px 0}
.cari-box input{font-size:1.1em;padding:6px;border:3px inset #00c;width:min(340px,70%)}
/* footer */
.kaki{background:#000;color:#fff;border-top:6px ridge #e91e8c;margin-top:16px;padding:10px 0 20px}
.kaki a{color:#ff0}
.kaki-kolom{display:flex;flex-wrap:wrap;gap:14px}
.kaki-kol{flex:1 1 160px;min-width:150px;font-size:.82em}
.kaki-kol .kaki-judul{font-family:Impact,sans-serif;font-size:.95em;border-bottom:2px dashed #ff0;padding-bottom:3px;margin:6px 0 4px}
.kk1 .kaki-judul{color:#0ff}.kk2 .kaki-judul{color:#6f6}.kk3 .kaki-judul{color:#f6c}.kk4 .kaki-judul{color:#fd0}.kk5 .kaki-judul{color:#f80}
.kaki-kol a{display:inline-block;margin:2px 0}
.kaki-bawah{border-top:2px dotted #666;margin-top:10px;padding-top:8px;text-align:center;font-size:.85em}
.ke-atas{font-family:Impact,sans-serif;font-size:1.1em}
@media (max-width:480px){
 .merek-teks{font-size:1.7em}
 .hero-judul{font-size:1.5em}
 .tombol.besar{font-size:1.15em}
 .miring1,.miring2,.miring3,.miring4{transform:none}
}
@media (prefers-reduced-motion:reduce){
 .denyut{animation:none}
 marquee{display:none}
}
