:root{ --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --text:#e2e8f0; --accent:#22d3ee; --good:#4ade80; --warn:#fb7185; --shadow:0 10px 30px rgba(0,0,0,.35) }
[data-theme="light"]{ --bg:#f8fafc; --panel:#ffffff; --muted:#64748b; --text:#0f172a; --accent:#0ea5e9; --good:#16a34a; --warn:#e11d48 }
html,body{height:100%}
body{margin:0; background:radial-gradient(1200px 900px at 80% -10%, rgba(34,211,238,.15), transparent 55%), radial-gradient(900px 700px at -10% 100%, rgba(16,185,129,.12), transparent 50%), var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; overflow:hidden}
.container{max-width:1760px; margin:0 auto; padding:24px 36px; height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:18px}
header{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{width:56px; height:56px; background:linear-gradient(135deg, var(--accent), var(--good)); border-radius:14px; box-shadow:var(--shadow)}
.brand h1{font-size:38px; margin:0; letter-spacing:.2px}
.brand .subtitle{margin-top:2px; color:var(--muted); font-size:16px}
.clock{display:flex; align-items:center; gap:18px; padding:12px 18px; border-radius:14px; background:rgba(255,255,255,.04); box-shadow:var(--shadow)}
.clock .time{font-variant-numeric:tabular-nums; font-size:36px; font-weight:800}
.clock .date{color:var(--muted); font-size:16px}

.main{display:grid; grid-template-columns: 1fr 420px; gap:18px; min-height:0}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(148,163,184,.15); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:20px}
.muted{color:var(--muted)}
footer{background:linear-gradient(90deg, rgba(34,211,238,.10), rgba(34,211,238,0) 60%); border-top:1px solid rgba(148,163,184,.2); border-bottom-left-radius:18px; border-bottom-right-radius:18px}
.ticker{display:flex; gap:28px; white-space:nowrap; overflow:hidden; padding:12px 8px}
.ticker span{display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(15,23,42,.55); border:1px solid rgba(148,163,184,.2)}
.ticker .promo-pill{background:rgba(16,185,129,.22); border-color:rgba(16,185,129,.35); color:#d1fae5; font-weight:800}

/* Komponen menu */
.menu-board{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(148,163,184,.15); border-radius:18px; padding:18px; box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr; gap:8px; min-width:0}
.menu-head{display:flex; align-items:center; justify-content:space-between}
.menu-head h2{margin:0; font-size:22px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted)}
.menu-pages{position:relative; overflow:hidden; border-radius:12px}
.page{position:absolute; inset:0; padding:6px 8px 14px; opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.page.active{opacity:1; transform:none}
.category{break-inside:avoid; margin:8px 10px 14px}
.category .title{font-size:24px; font-weight:800; margin:0 0 8px; color:var(--accent); text-transform:uppercase; letter-spacing:.8px}
.items{columns:2; column-gap:22px}
.item{display:flex; align-items:center; gap:14px; padding:12px 14px; margin:0 0 8px; background:rgba(15,23,42,.35); border:1px solid rgba(148,163,184,.14); border-radius:12px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.18))}
.thumb{width:72px; height:72px; border-radius:10px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.04)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.item-name{font-size:22px; font-weight:700; line-height:1.2}
.item-desc{font-size:14px; color:var(--muted); margin-top:4px}
.dots{flex:1; height:1px; border-bottom:2px dotted rgba(148,163,184,.35); margin:0 8px}
.price{font-variant-numeric:tabular-nums; font-size:24px; font-weight:800}
.badge{margin-left:10px; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.3px}
.badge.new{background:rgba(34,211,238,.18); color:var(--accent); border:1px solid rgba(34,211,238,.35)}
.badge.soldout{background:rgba(251,113,133,.18); color:var(--warn); border:1px solid rgba(251,113,133,.35)}

/* Grid util */
.grid{display:grid; gap:10px}
.row{display:flex; align-items:center; justify-content:space-between; background:rgba(15,23,42,.35); border:1px solid rgba(148,163,184,.14); padding:10px 12px; border-radius:12px}
.value{font-weight:900}
.table{display:grid; gap:8px}
.thead, .tr{display:grid; grid-template-columns: repeat(5, 1fr); gap:8px}
.thead{font-weight:800; color:var(--accent)}
.tr > div, .thead > div{background:rgba(15,23,42,.35); border:1px solid rgba(148,163,184,.14); padding:10px 12px; border-radius:10px}
.counter{font-size:108px; font-weight:1000; text-align:center}
.counter-sub{display:flex; gap:8px; justify-content:center}

@media (max-width:1500px){ .item-name{font-size:20px} .price{font-size:22px} .brand h1{font-size:32px} }
@media (max-width:1200px){ .main{grid-template-columns:1fr} .items{columns:1} }