/* GRAB4D r3 — gaya "etalase toko elektronik 2003". Jelek disengaja, terbaca diwajibkan. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#000;font:15px/1.35 Arial,Helvetica,sans-serif;overflow-x:clip}
a{color:#0000ee;text-decoration:underline;text-underline-offset:2px}
a:visited{color:#551a8b}
a:hover{background:#ffff00;color:#f00}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px dashed #ff00cc;outline-offset:2px}
img{max-width:100%;height:auto}
h1,h2,h3{margin:.4em 0 .3em;line-height:1.1}
h2{font-family:"Arial Black",Impact,sans-serif;color:#008000;text-decoration:underline double;font-size:1.45em;letter-spacing:-.5px}
h2:nth-of-type(3n+1){color:#d00000;font-family:"Times New Roman",Times,serif;font-style:italic}
h3{font-family:Verdana,sans-serif;color:#000080;text-decoration:underline dotted;font-size:1.05em}
p{margin:.35em 0 .55em}
.lompat{position:absolute;left:-999px;top:0;background:#ff0;padding:6px;z-index:9}
.lompat:focus{left:8px}
.kecil{font-size:.8em;font-family:Verdana,sans-serif}

/* font & warna acak */
.f-comic{font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",cursive}
.f-times{font-family:"Times New Roman",Times,serif}
.f-impact{font-family:Impact,"Arial Narrow Bold","Arial Black",sans-serif;letter-spacing:.3px}
.f-courier{font-family:"Courier New",Courier,monospace}
.f-verdana{font-family:Verdana,Geneva,sans-serif}
.f-georgia{font-family:Georgia,serif}
.f-arialb{font-family:"Arial Black",Arial,sans-serif}
.f-treb{font-family:"Trebuchet MS",sans-serif}
.w-merah,.w-merah a{color:#e00000}.w-biru,.w-biru a{color:#0000cc}.w-hijau,.w-hijau a{color:#007a00}
.w-ungu,.w-ungu a{color:#7a00a8}.w-navy,.w-navy a{color:#000080}.w-oranye,.w-oranye a{color:#c24e00}
.w-hitam,.w-hitam a{color:#000}.w-magenta,.w-magenta a{color:#c0007a}

/* stiker BARU! ala toko */
.baru{display:inline-block;background:#ff0;color:#f00;font:bold 13px/1 Arial,sans-serif;padding:3px 5px;border:1px solid #f00;transform:rotate(-8deg);text-decoration:none;margin:0 4px;white-space:nowrap}
.miring{transform:rotate(9deg)}
.goyang{animation:goyang 2.4s ease-in-out infinite alternate}
@keyframes goyang{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(7deg) scale(1.08)}}
.stabilo{background:#ffff00;color:#000;text-decoration:underline wavy #f00;padding:0 2px}
.harga{color:#f00;font-weight:bold;text-decoration:underline;font-family:Arial,sans-serif;white-space:nowrap}
.raksasa{font-size:2.6em;letter-spacing:1px;text-shadow:2px 2px 0 #ff0,4px 4px 0 #0f0}

/* HEADER */
.kop{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 10px 4px;border-bottom:4px double #f00;background:linear-gradient(90deg,#fff 60%,#ccffcc)}
.kop-logo{display:flex;align-items:center;text-decoration:none;gap:4px}
.logo-melar{width:210px;height:58px;object-fit:fill;border:2px outset #0c0}
.kop-teks{font:bold 30px/1 "Arial Black",Arial,sans-serif;color:#008000;text-decoration:underline;text-shadow:2px 2px 0 #ff0,-1px -1px 0 #f0f;margin-left:-40px;position:relative}
.kop-teks b{color:#e00000;font-size:1.3em}
.kop-slogan{color:#c0007a;font-size:15px;transform:rotate(-3deg);text-decoration:underline}
.kop-slogan small{font-size:9px;vertical-align:super;color:#000}
.logo-piksel{width:56px;height:56px;image-rendering:pixelated;image-rendering:crisp-edges;transform:rotate(12deg);border:3px ridge #ff0}
.kop-cta{display:inline-flex;align-items:center}
.kop-cari{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.kop-cari label{font-size:11px;color:#060}
input[type=search],input:not([type]),input[inputmode],select{font:14px Arial,sans-serif;padding:5px 6px;border:2px inset #999;background:#fffff0;min-height:34px;max-width:100%}
button{font:bold 13px Arial,sans-serif;padding:5px 9px;min-height:34px;border:2px outset #ccc;background:#e0e0e0;color:#000;cursor:pointer}
button:active{border-style:inset}
.tombol-waras{background:#fff;border:2px dashed #00f;color:#00f;font:11px "Courier New",monospace;min-height:30px}

/* CTA */
.cta{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;vertical-align:middle}
.cta a{display:inline-block;padding:7px 12px;font:bold 15px/1.1 Impact,"Arial Black",sans-serif;text-decoration:underline;min-height:34px;letter-spacing:.5px}
.cta-daftar{background:#f00;color:#ff0!important;border:3px outset #f66;transform:rotate(-2deg)}
.cta-login{background:#00f;color:#fff!important;border:3px outset #66f;transform:rotate(2deg)}
.cta a:hover{background:#ff0;color:#f00!important}
.cta-besar a{font-size:18px}

/* MENU */
.menu{display:flex;flex-wrap:wrap;gap:2px 12px;padding:5px 10px;background:#ff0;border-bottom:2px solid #000;align-items:baseline}
.menu a{font-weight:bold}
.m1{font:bold 20px Georgia,serif;color:#e00000!important}.m2{font:15px Verdana,sans-serif}.m3{font:bold 18px "Comic Sans MS",cursive;color:#007a00!important}
.m4{font:bold 16px Impact,sans-serif;color:#c0007a!important}.m5{font:13px "Courier New",monospace}.m6{font:italic bold 19px "Times New Roman",serif;color:#000080!important}
.m7{font:14px "Trebuchet MS",sans-serif}.m8{font:bold 12px Arial,sans-serif;text-transform:uppercase}

/* TICKER (gerak pelan, tanpa kedip) */
.ticker{overflow:hidden;white-space:nowrap;background:#000;color:#0f0;border-bottom:3px solid #f00;font:bold 13px "Courier New",monospace;padding:3px 0}
.ticker-isi{display:inline-block;padding-left:100%;animation:jalan 90s linear infinite}
.ticker a{color:#0f0}.ticker a b{color:#ff0}.ticker span{color:#f0f}
.ticker:hover .ticker-isi{animation-play-state:paused}
@keyframes jalan{to{transform:translateX(-100%)}}

/* RANGKA 3 kolom */
.rangka{display:grid;grid-template-columns:175px minmax(0,1fr) 235px;grid-template-areas:"kiri isi kanan";gap:0}
main{grid-area:isi;padding:8px 14px 20px;min-width:0}
.kiri{grid-area:kiri;background:#ccffcc;padding:8px 6px;border-right:1px solid #9c9;font-size:13px}
.kanan{grid-area:kanan;background:#ffff66;padding:8px 8px;border-left:3px ridge #f90;font-size:13px}

.kiri ul{list-style:none;margin:0 0 8px;padding:0}
.kiri li{margin:2px 0;line-height:1.2}
.kiri .s1 a:first-child{font:bold 15px Arial,sans-serif}
.kiri .s2 a:first-child{font:12px Verdana,sans-serif;color:#e00000}
.kiri .s3 a:first-child{font:bold 17px "Arial Black",sans-serif;color:#007a00}
.kiri .s4 a:first-child{font:italic 14px "Times New Roman",serif}
.kiri .s5 a:first-child{font:bold 13px "Comic Sans MS",cursive;color:#c0007a}
.kiri .s6 a:first-child{font:bold 16px Georgia,serif;color:#000080;text-decoration:underline double}
.kiri .mini{font-size:10px;color:#060}
.kiri-judul{font:bold 13px Impact,sans-serif;color:#f00;margin:0 0 4px;transform:rotate(-2deg)}
.kiri-judul2{font:bold 15px "Courier New",monospace;color:#000080;text-decoration:underline;margin:10px 0 3px}
.cari-kiri{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.cari-kiri label{font-size:11px}

.kuning-judul{font:bold 22px "Arial Black",sans-serif;color:#e00000;margin:0;text-decoration:underline}
.kanan-cta{font:bold 14px Georgia,serif;margin:6px 0 10px}
.kanan-cta .cta{margin-top:4px}
.kanan-kecil{font:11px Verdana,sans-serif}
.daftar-cd{margin:4px 0 8px;padding-left:20px}
.daftar-cd li{margin:3px 0;font-size:12px}
.daftar-cd .jam{font-weight:bold;color:#c24e00}
.daftar-cd .cd{display:block;font:11px "Courier New",monospace;color:#000}
.kanan-kecil2{font:italic 12px "Times New Roman",serif;border-top:1px dashed #f00;padding-top:4px}
.kanan-link a{display:block;margin:3px 0;font-weight:bold}
.kanan-link a:nth-child(2){font:bold 16px Impact,sans-serif;color:#007a00}

/* JUDUL H1 bertumpuk */
.judul-besar,.judul-pasaran{font-weight:normal;margin:4px 0 8px;line-height:1.02}
.j1{font:bold 2.1rem/1 "Arial Black",Arial,sans-serif;color:#007a00;text-decoration:underline;text-shadow:3px 3px 0 #ff0}
.j2{font:italic bold 1.55rem/1 "Times New Roman",serif;color:#e00000;text-decoration:underline double;position:relative;top:-6px;margin-left:-6px}
.j3{font:1.3rem/1 "Comic Sans MS",cursive;color:#0000cc;background:#ffff00;text-decoration:underline;display:inline-block;transform:rotate(-2deg)}
.j4{font:bold 1.15rem/1 "Courier New",monospace;color:#c0007a;text-decoration:underline wavy #0c0;display:inline-block;transform:rotate(1.5deg)}
.intro{font-size:15px;max-width:72ch}

/* BLOK acak */
.blok{margin:14px 0;padding:8px 10px;position:relative}
.b1{border:3px double #00f}
.b2{border-top:4px solid #f00;border-bottom:1px dotted #f00;background:#fffff0}
.b3{background:#e8ffe8;border:2px dashed #0a0;transform:rotate(-.4deg)}
.b4{background:#fff0ff;border:2px solid #c0007a;transform:rotate(.5deg)}
.b5{border-left:10px solid #ff0;padding-left:12px}
.b6{background:#f0f8ff;border:1px solid #000080;font-family:Verdana,sans-serif;font-size:14px}
.dua-kolom{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;align-items:start}
.dua-kolom .blok{margin:6px 0}

/* ETALASE kartu (kolom acak) */
.etalase{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));grid-auto-flow:dense;gap:12px 8px}
.kartu{position:relative;padding:4px 6px;border-bottom:1px dotted #999;min-width:0}
.kartu h3{margin:2px 0;font-size:17px;font-family:inherit;color:inherit;text-decoration:none}
.kartu h3 a{color:inherit}
.kartu .kel{margin:2px 0;font-size:15px}
.kartu .kel .harga{font-size:1.5em}
.kartu .baru{position:absolute;right:0;top:0;z-index:2}
.kartu p{margin:2px 0}
.kartu-link{font-size:12px}
.k-lebar{grid-column:span 2;background:#ffffcc}
.k-lebar h3{font-size:24px}
.k-lebar .kel .harga{font-size:2.3em}
.k-tinggi{grid-row:span 2;border:2px solid #f00;background:#fff}
.k-tinggi img{width:100%;max-width:150px}
.r1{transform:rotate(-1.2deg)}.r2{transform:rotate(1deg) translateY(6px)}.r3{transform:translateX(-4px)}.r4{transform:rotate(.6deg)}
.img-melar{width:130px;height:48px;object-fit:fill;float:right;margin:0 0 2px 4px}
.img-piksel{width:64px;height:64px;image-rendering:pixelated;float:left;margin:0 6px 2px 0;border:2px solid #0f0}
.img-gepeng{width:90px;height:34px;object-fit:fill;display:block}
.img-biasa{width:52px;height:52px;float:right;border-radius:50%;border:2px dotted #f0f}
.kartu:after{content:"";display:block;clear:both}

/* TABEL */
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabel{border-collapse:collapse;margin:6px 0;font-size:14px;min-width:100%}
.tabel caption{text-align:left;font:italic 13px "Times New Roman",serif;color:#555;padding:2px 0}
.tabel th,.tabel td{border:1px solid #666;padding:4px 6px;text-align:left}
.tabel thead th{background:#00f;color:#ff0;font-family:Verdana,sans-serif;text-decoration:underline}
.tabel thead th:nth-child(2n){background:#f00;color:#fff}
.tabel tbody tr:nth-child(odd){background:#ffffd8}
.tabel tbody tr:nth-child(4n){background:#e0ffe0}
.tabel .angka{font:bold 16px "Courier New",monospace;color:#e00000;text-decoration:underline}
.tabel .dg{text-align:center;font-weight:bold;font-family:Georgia,serif}
.tabel .salin{min-height:28px;padding:2px 7px;font-size:11px}
.tabel-frek td{text-align:center}
.tabel-frek .panas{background:#ff0;color:#f00;font-weight:bold;text-decoration:underline}
.tabel-frek .dingin{background:#ccc;color:#333}
.tabel tr[hidden]{display:none}

/* PAITO */
.paito td{text-align:center;font:bold 14px "Courier New",monospace;cursor:pointer;min-width:52px}
.paito .pk{color:#888;cursor:default}
.paito th[scope=row]{font:11px Verdana,sans-serif;white-space:nowrap}
.paito td.redup{opacity:.28}
.paito td.sorot{outline:3px solid #000;outline-offset:-3px;opacity:1}
.paito td[data-c="0"]{background:#ff9999!important}.paito td[data-c="1"]{background:#ffcc80!important}
.paito td[data-c="2"]{background:#ffff66!important}.paito td[data-c="3"]{background:#99ff99!important}
.paito td[data-c="4"]{background:#66ffff!important}.paito td[data-c="5"]{background:#99bbff!important}
.paito td[data-c="6"]{background:#dd99ff!important}.paito td[data-c="7"]{background:#ff99dd!important}
.paito td[data-c="8"]{background:#cccc99!important}.paito td[data-c="9"]{background:#bbbbbb!important}
.paito td[data-cat="1"]{background:#ff0!important;box-shadow:inset 0 0 0 3px #f00}
.paito td[data-cat="2"]{background:#ff66cc!important;box-shadow:inset 0 0 0 3px #000}
.paito td[data-cat="3"]{background:#3399ff!important;color:#fff;box-shadow:inset 0 0 0 3px #000}
.paito td[data-cat="4"]{background:#33cc33!important;box-shadow:inset 0 0 0 3px #000}
.paito-alat{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:#ffffcc;border:2px dashed #f00;padding:6px}
.paito-alat .kecil{flex-basis:100%;margin:0}
.dig-baris{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center}
.dig{min-width:34px;font-family:"Courier New",monospace}
.dig[aria-pressed=true]{background:#000;color:#ff0;border-style:inset}
.d0{color:#b00}.d1{color:#a50}.d2{color:#770}.d3{color:#070}.d4{color:#066}.d5{color:#00a}.d6{color:#609}.d7{color:#a06}.d8{color:#554}.d9{color:#333}

/* ALAT lain */
.salin{background:#ff0;border:2px outset #cc0;color:#000;font:bold 12px Verdana,sans-serif;padding:3px 8px;vertical-align:middle}
.salin.ok{background:#0c0;color:#fff}
.hero-pasaran{border:4px ridge #0c0;padding:8px;margin:6px 0 12px;background:#fff}
.hero-pasaran:after{content:"";display:block;clear:both}
.hasil-raksasa{margin:6px 0}
.saring{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0}
.saring-info,.mimpi-info,.shio-hasil{font:bold 14px "Courier New",monospace;color:#c0007a}
.shio-hasil{font-size:18px;color:#e00000;text-decoration:underline}
.alat-shio,.cari-mimpi,.b4 form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jenis-tombol{display:inline-flex;gap:3px}
.jenis-tombol button[aria-pressed=true]{background:#00f;color:#ff0}
.tabel-mimpi td:nth-child(2){font-family:Georgia,serif}
.racik{font-size:18px;line-height:2}
.racik .harga{margin-right:2px}
.tombol-acak{background:#f0f;color:#fff;border-color:#f6f;font-family:Impact,sans-serif;font-size:15px}
.harga-baris{font-size:17px}
.besar-cd{font:bold 18px Georgia,serif}
.besar-cd b{color:#e00000;text-decoration:underline}
.acak-list{padding-left:20px}
.acak-list li{margin:6px 0;font-size:16px}
.acak-list li:nth-child(odd){margin-left:18px}
.acak-list li:nth-child(3n){font-size:19px}
.link-sup{line-height:1.9}
.link-sup a{margin-right:10px;font-weight:bold}
.link-sup a:nth-child(odd){font-size:1.15em}
.remah{font:12px Verdana,sans-serif;background:#eee;border:1px dotted #999;padding:3px 6px;display:inline-block;max-width:100%}
.remah b{color:#f00}
.artikel{max-width:78ch}
.artikel p,.artikel li{font-size:16px;line-height:1.5}
.baca-lain{border-top:3px double #f00;padding-top:6px}
.cd{font-family:"Courier New",monospace}
.cd.dekat{color:#e00000;font-weight:bold;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%) rotate(-2deg);background:#ff0;color:#f00;border:3px solid #f00;font:bold 16px Impact,sans-serif;padding:8px 14px;margin:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .25s}
.toast.muncul{opacity:1}

/* FOOTER sup link */
.kaki{border-top:6px double #00f;background:#fff;padding:10px 12px 24px;font-size:12px}
.kaki-soup{line-height:1.75;font-family:Verdana,sans-serif}
.kaki-soup a{font-weight:bold}
.kaki-menu{font:bold 14px Georgia,serif;background:#ccffcc;padding:4px}
.kaki-legal{font:11px Verdana,sans-serif;color:#333;border-top:1px dashed #999;padding-top:6px}

/* HP */
@media (max-width:900px){
  .rangka{grid-template-columns:minmax(0,1fr);grid-template-areas:"isi" "kanan" "kiri"}
  .kanan,.kiri{border:0;border-top:4px double #f00}
  .kiri ul{columns:2;column-gap:14px}
  .kiri li{break-inside:avoid;margin:5px 0}
  .kiri .mini{display:inline-block;padding:2px 0}
  .daftar-cd{columns:2;column-gap:16px}
  .daftar-cd li{break-inside:avoid}
}
@media (max-width:620px){
  body{font-size:15px}
  main{padding:6px 10px 16px}
  .kop{padding:6px 8px}
  .logo-melar{width:150px;height:44px}
  .kop-teks{font-size:21px;margin-left:-30px}
  .logo-piksel{width:38px;height:38px}
  .kop-cari input{width:150px}
  .menu{gap:2px 10px}
  .menu a{padding:3px 0}
  .j1{font-size:1.6rem}.j2{font-size:1.25rem}.j3{font-size:1.1rem}.j4{font-size:1rem}
  .etalase{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px}
  .k-lebar{grid-column:span 2}
  .img-melar{width:90px;height:36px}
  .dua-kolom{grid-template-columns:minmax(0,1fr)}
  .raksasa{font-size:2em}
  .daftar-cd{columns:1}
  .kaki-soup{line-height:2.1}
}
@media (max-width:380px){
  .etalase{grid-template-columns:minmax(0,1fr)}
  .k-lebar{grid-column:auto}
  .kiri ul{columns:1}
}

@media (prefers-reduced-motion:reduce){
  .goyang,.ticker-isi{animation:none}
  .ticker{white-space:normal}
  .ticker-isi{padding-left:0}
}

/* MODE WARAS: kacamata */
html.waras body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
html.waras *{font-family:inherit!important;transform:none!important;text-shadow:none!important;animation:none!important}
html.waras .rangka{background:#fff}
html.waras .kiri,html.waras .kanan,html.waras .menu,html.waras .b2,html.waras .b3,html.waras .b4,html.waras .b6,html.waras .k-lebar,html.waras .kop{background:#f7f7f7!important}
html.waras h2,html.waras h3,html.waras .j1,html.waras .j2,html.waras .j3,html.waras .j4{color:#111!important;background:none!important;text-decoration:none!important}
html.waras .blok,html.waras .k-tinggi,html.waras .hero-pasaran{border:1px solid #ddd!important}
html.waras .ticker{background:#222}
html.waras .tabel thead th{background:#333!important;color:#fff!important}
html.waras .tabel tbody tr{background:#fff!important}
html.waras .baru{background:#eee;color:#333;border-color:#999}

/* HARGA BERTUMPUK */
.tumpukan{line-height:1.25;margin:8px 0 4px;padding:4px 0;border-top:1px dotted #f00;border-bottom:1px dotted #00f}
.tumpuk{display:inline-block;margin:2px 10px 2px -4px;text-decoration:none;vertical-align:middle}
.tumpuk span{text-decoration:underline}
.tumpuk:nth-child(3n) {margin-top:-6px}
.tumpuk:nth-child(4n+1){background:#ffff66}
.t-s{font-size:12px}.t-m{font-size:15px}.t-l{font-size:19px;font-weight:bold}.t-xl{font-size:24px;font-weight:bold;letter-spacing:-1px}
.t-r1{transform:rotate(-4deg)}.t-r2{transform:rotate(3deg) translateY(3px)}.t-r3{transform:skewX(-8deg)}
html.waras .tumpuk{font-size:14px!important;background:none!important;margin:2px 8px}
@media (max-width:620px){.t-xl{font-size:19px}.t-l{font-size:16px}}
.blok:has(.gulir){transform:none}

/* kontras & area sentuh: merah tetap merah, cuma digelapkan sedikit */
.harga,.baru,.remah b,.tabel .angka{color:#cc0000}
.cta-daftar{background:#c00000}
.tumpuk{padding:3px 0;min-height:26px}
.kiri li a,.kanan-link a,.kaki-menu a,.kartu-link a,.link-sup a{display:inline-block;min-height:24px;padding-top:3px}
.kiri .mini{font-size:11px;padding:4px 2px}
.tabel thead th:nth-child(2n){background:#c00000}
.kiri-judul{color:#c00000}
.kiri .s2 a:first-child{color:#b00000}
.tabel-frek .panas{color:#b00000}