@font-face { font-family: 'CG Sans'; src: url('/fonts/CafeGlassSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'CG Sans'; src: url('/fonts/CafeGlassSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'CG Text'; src: url('/fonts/CafeGlassText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CG Text'; src: url('/fonts/CafeGlassText-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'CG Text'; src: url('/fonts/CafeGlassText-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'CG Script'; src: url('/fonts/CafeGlassScript-Regular.ttf') format('truetype'); font-display: swap; }
:root { --biru1: #229ADF; --biru2: #2055DF; --merah: #E3191F; --tinta: #252525; --abu: #6b6f76; --garis: #e7e9ee; --kartu: #fff; --latar: #f5f8fc; --hijau: #0f6e56; --hijau-bg: #e1f5ee; --kuning: #854f0b; --kuning-bg: #faeeda; --r: 20px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--latar); color: var(--tinta); font: 16px/1.6 'CG Text', system-ui, sans-serif; }
h1, h2, h3 { font-family: 'CG Sans', system-ui, sans-serif; font-weight: 800; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(24px, 5vw, 32px); background: linear-gradient(90deg, var(--biru1), var(--biru2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.script { font-family: 'CG Script', cursive; color: var(--merah); font-weight: 400; }
.wadah { max-width: 960px; margin: 0 auto; padding: 16px 16px 64px; }
.kepala { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 5; }
.kepala img { height: 28px; }
.kepala nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.kepala a { color: var(--tinta); text-decoration: none; padding: 6px 12px; border-radius: 99px; white-space: nowrap; font-weight: 500; }
.kepala a.aktif, .kepala a:hover { background: #e9f3fc; color: var(--biru2); }
.lencana { background: var(--merah); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 7px; margin-left: 4px; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 18px 20px; animation: muncul .45s ease both; }
.kisi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tombol { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 11px 20px; font: 700 15px 'CG Text', sans-serif; cursor: pointer; background: var(--biru2); color: #fff; transition: transform .15s ease, background-color .15s ease; text-decoration: none; }
.tombol:hover { transform: translateY(-1px); background: #1a47c2; }
.tombol:focus-visible { outline: 3px solid #9cc9f2; outline-offset: 2px; }
.tombol:active { transform: scale(.97); }
.tombol.kedua { background: #fff; color: var(--biru2); border: 1px solid #cfe1f7; }
.tombol.kedua:hover { background: #eef5fd; }
.tombol.bahaya { background: #fff; color: var(--merah); border: 1px solid #f5c4c4; }
.tombol.bahaya:hover { background: #fdf0f0; }
input, select { font: inherit; padding: 10px 14px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; width: 100%; }
input:focus, select:focus { outline: 2px solid #9cc9f2; border-color: transparent; }
.petak-menu { display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .2s ease; }
.petak-menu:hover { transform: translateY(-3px) rotate(-.4deg); }
.petak-menu p { color: var(--abu); margin: 0; }
.zona { display: block; border: 2px dashed #b9d6f3; border-radius: 28px; padding: 36px 20px; text-align: center; background: #fbfdff; transition: transform .2s ease, background .2s ease, border-color .2s ease; cursor: pointer; }
.zona.dekat { background: #eef6fe; border-color: var(--biru1); transform: scale(1.02); animation: goyang .5s ease-in-out infinite; }
.maskot { width: 120px; height: auto; display: block; margin: 0 auto 8px; animation: melayang 3s ease-in-out infinite; }
.maskot[data-keadaan="baca"] { animation: angguk .8s ease-in-out infinite; }
.maskot[data-keadaan="senang"] { animation: lompat .6s ease 2; }
.angka { font: 800 34px 'CG Sans', sans-serif; }
.hasil { border-radius: 16px; padding: 12px 14px; cursor: pointer; }
.hasil.ok { background: var(--hijau-bg); color: var(--hijau); }
.hasil.cek { background: var(--kuning-bg); color: var(--kuning); }
.hasil.biasa { background: #f1f3f6; }
.batang { height: 10px; border-radius: 99px; background: #e8eef6; overflow: hidden; }
.batang > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--biru1), var(--biru2)); transition: width .3s ease; }
.redup { color: var(--abu); }
.baris-daftar { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--garis); }
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); bottom: 24px; background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 99px; z-index: 20; animation: muncul .3s ease both; }
.toast.salah { background: var(--merah); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; padding: 8px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.keluar { animation: hilang .35s ease forwards; }
@keyframes muncul { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hilang { to { opacity: 0; transform: translateX(40px); height: 0; padding: 0; margin: 0; } }
@keyframes goyang { 0%, 100% { rotate: 0deg; } 25% { rotate: -1deg; } 75% { rotate: 1deg; } }
@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes angguk { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes lompat { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 560px) { .kepala { flex-wrap: wrap; gap: 6px; padding: 10px 12px 6px; } .kepala img { height: 24px; } .kepala nav { margin-left: 0; width: 100%; padding-bottom: 4px; } .kepala nav a { padding: 6px 10px; font-size: 14px; } .kepala nav a[href="/"] { display: none; } .maskot { width: 96px; } }