/* ==========================================================================
   Portal design system
   Warna datang daripada brand.php (pemboleh ubah --p, --bg, ... dijana dalam <head>).
   ========================================================================== */
:root {
  --p:#4F46E5; --p-rgb:79,70,229; --p2:#7C3AED; --onp:#fff;
  --ok:#16A34A; --ok-rgb:22,163,74; --warn:#D97706; --warn-rgb:217,119,6; --bad:#DC2626; --bad-rgb:220,38,38;
  --bg:#F4F5F9; --bg-rgb:244,245,249; --card:#fff; --card-rgb:255,255,255; --text:#0F172A; --text-rgb:15,23,42;
  --muted:#64748B; --faint:#94A3B8; --fill:#EEF0F5; --line:rgba(15,23,42,.09);
  --r-sm:12px; --r:18px; --r-lg:26px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.05);
  --shadow-lg:0 2px 6px rgba(16,24,40,.04),0 24px 60px rgba(16,24,40,.12);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sa-b:env(safe-area-inset-bottom,0px); --sa-t:env(safe-area-inset-top,0px);
  --side:264px;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.015em; font-weight:700; }
p { margin:0; }
a { color:var(--p); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
img { max-width:100%; display:block; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
code,.mono { font-family:var(--mono); font-size:.92em; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:14px; } .tiny { font-size:12.5px; }
.center { text-align:center; } .num { font-variant-numeric:tabular-nums; }
.i { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i.lg { width:28px; height:28px; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--card); padding:10px 14px; border-radius:10px; }
.skip:focus { left:8px; }
:focus-visible { outline:3px solid rgba(var(--p-rgb),.45); outline-offset:2px; border-radius:8px; }
.hidden { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- logo ---------- */
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:750; font-size:18px; letter-spacing:-.02em; text-decoration:none !important; }
.logo { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; background:linear-gradient(140deg,var(--p),var(--p2)); color:var(--onp); font-weight:750; font-size:17px; box-shadow:0 6px 16px rgba(var(--p-rgb),.3); overflow:hidden; }
.logo svg { width:62%; height:62%; }
.logo.logo-img { background:none; box-shadow:none; }
.logo.logo-img img { width:100%; height:100%; object-fit:contain; }
.logo.sm { width:32px; height:32px; border-radius:10px; font-size:15px; }
.logo.xl { width:64px; height:64px; border-radius:20px; font-size:28px; }

/* ---------- butang ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:14px; border:0; font-weight:650; font-size:15.5px; line-height:1; white-space:nowrap; text-decoration:none !important; transition:transform .12s ease, background .2s, box-shadow .2s, opacity .2s; user-select:none; color:var(--text); background:var(--fill); }
.btn:active { transform:scale(.97); }
.btn[disabled],.btn.disabled { opacity:.5; pointer-events:none; }
.btn.primary { background:var(--p); color:var(--onp); box-shadow:0 6px 18px rgba(var(--p-rgb),.28); }
.btn.primary:hover { box-shadow:0 8px 24px rgba(var(--p-rgb),.38); }
.btn.grad { background:linear-gradient(135deg,var(--p),var(--p2)); color:var(--onp); box-shadow:0 10px 28px rgba(var(--p-rgb),.35); }
.btn.soft { background:rgba(var(--p-rgb),.1); color:var(--p); }
.btn.ghost { background:var(--fill); color:var(--text); }
.btn.ghost:hover { background:rgba(var(--text-rgb),.09); }
.btn.outline { background:transparent; box-shadow:inset 0 0 0 1.5px var(--line); }
.btn.danger { background:rgba(var(--bad-rgb),.1); color:var(--bad); }
.btn.danger.solid { background:var(--bad); color:#fff; }
.btn.sm { min-height:38px; padding:0 14px; border-radius:11px; font-size:14px; }
.btn.lg { min-height:54px; padding:0 26px; border-radius:16px; font-size:17px; }
.btn.block { display:flex; width:100%; }
.btn .i { width:18px; height:18px; }
.icon-btn { width:40px; height:40px; border-radius:12px; display:inline-grid; place-items:center; border:0; background:var(--fill); color:var(--text); flex:none; text-decoration:none !important; }
.icon-btn:hover { background:rgba(var(--text-rgb),.09); }
.row-btns { display:flex; gap:10px; flex-wrap:wrap; }
.row-btns > * { flex:1; }
form.inline { display:inline; margin:0; }

/* ---------- lencana ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:13px; font-size:12.5px; font-weight:650; white-space:nowrap; background:var(--fill); color:var(--muted); }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.ok { background:rgba(var(--ok-rgb),.12); color:var(--ok); }
.pill.ok::before { box-shadow:0 0 0 0 rgba(var(--ok-rgb),.5); animation:ping 2s infinite; }
.pill.warn { background:rgba(var(--warn-rgb),.13); color:var(--warn); }
.pill.bad { background:rgba(var(--bad-rgb),.1); color:var(--bad); }
.badge { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; background:var(--fill); color:var(--muted); white-space:nowrap; }
.badge.ok { background:rgba(var(--ok-rgb),.12); color:var(--ok); }
.badge.info { background:rgba(var(--p-rgb),.1); color:var(--p); }
.badge.proto { background:rgba(var(--warn-rgb),.14); color:var(--warn); }
.badge.warn { background:rgba(var(--warn-rgb),.14); color:var(--warn); }
.badge.bad { background:rgba(var(--bad-rgb),.1); color:var(--bad); }
.count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--bad); color:#fff; font-size:11.5px; display:grid; place-items:center; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(var(--ok-rgb),.55); } 70%,100% { box-shadow:0 0 0 6px rgba(var(--ok-rgb),0); } }

/* ---------- kad & senarai ---------- */
.card { background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px; }
.card.pad-lg { padding:28px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.card-head h2,.card-head h3 { font-size:17px; }
.card-head p { color:var(--muted); font-size:14px; margin-top:2px; }
.stack > * + * { margin-top:16px; }
.stack-sm > * + * { margin-top:10px; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.section-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:28px 4px 10px; }
.list { background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; padding:14px 18px; min-height:62px; position:relative; color:var(--text); text-decoration:none !important; width:100%; background:none; border:0; text-align:left; }
.row + .row::before { content:""; position:absolute; top:0; left:66px; right:0; height:1px; background:var(--line); }
.row.plain + .row.plain::before { left:18px; }
a.row:hover,button.row:hover { background:rgba(var(--text-rgb),.025); }
.row .ico { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; background:rgba(var(--p-rgb),.1); color:var(--p); }
.row .ico .i { width:19px; height:19px; }
.row .ico.red { background:rgba(var(--bad-rgb),.1); color:var(--bad); }
.row .ico.green { background:rgba(var(--ok-rgb),.12); color:var(--ok); }
.row .ico.amber { background:rgba(var(--warn-rgb),.13); color:var(--warn); }
.row .ico.gray { background:var(--fill); color:var(--muted); }
.row .txt { flex:1; min-width:0; }
.row .txt b { display:block; font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .txt small { display:block; color:var(--muted); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .val { color:var(--muted); font-size:14.5px; white-space:nowrap; }
.row .chev { color:var(--faint); width:18px; height:18px; }
.row.danger .txt b { color:var(--bad); }
.kv { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.kv:last-child { border-bottom:0; }
.kv span { color:var(--muted); }
.kv b { font-weight:600; text-align:right; word-break:break-word; }

/* ---------- borang ---------- */
.field { display:block; }
.field + .field,.field + .grid,.grid + .field { margin-top:16px; }
.field > span,.label { display:block; font-size:13.5px; font-weight:650; color:var(--muted); margin:0 4px 7px; }
.field .hint,.hint { display:block; font-size:13px; color:var(--muted); margin:7px 4px 0; }
.input,select.input,textarea.input { width:100%; min-height:50px; border-radius:14px; border:1.5px solid transparent; background:var(--fill); padding:12px 16px; font-size:16px; outline:none; transition:border .15s, background .15s, box-shadow .15s; }
textarea.input { min-height:110px; resize:vertical; line-height:1.5; }
.input:focus { border-color:var(--p); background:var(--card); box-shadow:0 0 0 4px rgba(var(--p-rgb),.12); }
.input::placeholder { color:var(--faint); }
select.input { appearance:none; -webkit-appearance:none; padding-right:42px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px; background-size:6px 6px; background-repeat:no-repeat; }
.input-wrap { position:relative; }
.input-wrap .input { padding-right:54px; }
.input-wrap > button { position:absolute; right:6px; top:5px; width:40px; height:40px; border:0; border-radius:11px; background:none; color:var(--muted); display:grid; place-items:center; }
.check { display:flex; gap:12px; align-items:flex-start; padding:12px 0; cursor:pointer; }
.check input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--p); flex:none; }
.check b { display:block; font-weight:600; font-size:15px; }
.check small { color:var(--muted); font-size:13.5px; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap; }
.err-text { color:var(--bad); font-size:14px; font-weight:550; margin-top:8px; }
.switch { position:relative; width:51px; height:31px; flex:none; display:inline-block; }
.switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.switch span { position:absolute; inset:0; border-radius:31px; background:rgba(var(--text-rgb),.14); transition:background .2s; }
.switch span::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .22s cubic-bezier(.3,1.4,.6,1); }
.switch input:checked + span { background:var(--ok); }
.switch input:checked + span::after { transform:translateX(20px); }
.switch input:focus-visible + span { outline:3px solid rgba(var(--p-rgb),.45); outline-offset:2px; }
.seg { display:flex; background:var(--fill); border-radius:13px; padding:3px; gap:3px; }
.seg label,.seg a,.seg button { flex:1; position:relative; text-align:center; border:0; background:none; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span,.seg a,.seg button { display:block; padding:9px 10px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--muted); transition:all .2s; text-decoration:none !important; }
.seg input:checked + span,.seg a.on,.seg button.on { background:var(--card); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day { position:relative; }
.day input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.day span { display:grid; place-items:center; height:42px; border-radius:12px; background:var(--fill); color:var(--muted); font-weight:650; font-size:13.5px; transition:all .15s; }
.day input:checked + span { background:var(--p); color:var(--onp); }
.day input:focus-visible + span { outline:3px solid rgba(var(--p-rgb),.45); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { height:36px; padding:0 14px; border-radius:18px; border:0; background:var(--fill); font-weight:600; font-size:14px; color:var(--muted); }
.chip.on { background:var(--p); color:var(--onp); }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:32px; background:transparent; --v:50%; }
input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:6px; background:linear-gradient(90deg,var(--p) var(--v),var(--fill) var(--v)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; margin-top:-10px; box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04); }
input[type=range]::-moz-range-track { height:6px; border-radius:6px; background:var(--fill); }
input[type=range]::-moz-range-progress { height:6px; border-radius:6px; background:var(--p); }
input[type=range]::-moz-range-thumb { width:26px; height:26px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.file-drop { display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; border:2px dashed var(--line); background:rgba(var(--text-rgb),.015); cursor:pointer; }
.file-drop input { flex:1; min-width:0; font-size:14px; }

/* ---------- dialog (sheet bawah di mudah alih, modal di desktop) ---------- */
dialog { border:0; padding:0; background:transparent; color:var(--text); max-width:100vw; max-height:100dvh; }
dialog::backdrop { background:rgba(8,10,16,.45); backdrop-filter:blur(2px); }
dialog.sheet[open] { animation:sheet-up .32s cubic-bezier(.2,.9,.25,1); }
.sheet { width:100%; margin:auto auto 0; }
.sheet-panel { background:var(--bg); border-radius:26px 26px 0 0; padding:8px 20px calc(22px + var(--sa-b)); max-height:92dvh; overflow:auto; }
.sheet-grab { width:40px; height:5px; border-radius:3px; background:var(--faint); opacity:.45; margin:4px auto 12px; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sheet-head h3 { font-size:19px; }
.sheet-head .icon-btn { width:34px; height:34px; border-radius:50%; }
@media (min-width:720px) {
  .sheet { width:min(560px,calc(100vw - 48px)); margin:auto; }
  .sheet-panel { border-radius:26px; padding:20px 26px 26px; box-shadow:var(--shadow-lg); }
  .sheet-grab { display:none; }
  dialog.sheet[open] { animation:pop .25s cubic-bezier(.2,1.2,.4,1); }
}
dialog.confirm { width:min(360px,calc(100vw - 40px)); margin:auto; }
dialog.confirm form { background:var(--card); border-radius:24px; padding:26px 22px 18px; text-align:center; box-shadow:var(--shadow-lg); }
dialog.confirm[open] { animation:pop .22s cubic-bezier(.2,1.2,.4,1); }
.confirm-icon { width:52px; height:52px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:rgba(var(--bad-rgb),.1); color:var(--bad); }
dialog.confirm h3 { font-size:18px; margin-bottom:8px; }
dialog.confirm p { color:var(--muted); font-size:15px; margin-bottom:20px; }
@keyframes sheet-up { from { transform:translateY(100%); } to { transform:none; } }
@keyframes pop { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; top:calc(14px + var(--sa-t)); transform:translate(-50%,-160%); z-index:90; max-width:calc(100% - 32px); padding:12px 18px; border-radius:16px; background:var(--text); color:var(--bg); font-weight:600; font-size:14.5px; box-shadow:0 12px 32px rgba(0,0,0,.25); transition:transform .4s cubic-bezier(.2,1.2,.3,1); display:flex; gap:10px; align-items:center; pointer-events:none; }
.toast.show { transform:translate(-50%,0); }
.toast .i { width:18px; height:18px; }
.toast.ok .i { color:#4ade80; } .toast.error .i { color:#f87171; }

/* ---------- keadaan kosong ---------- */
.empty { text-align:center; padding:44px 20px; color:var(--muted); }
.empty-ico { width:72px; height:72px; border-radius:24px; margin:0 auto 16px; display:grid; place-items:center; background:rgba(var(--p-rgb),.1); color:var(--p); }
.empty-ico .i { width:34px; height:34px; }
.empty h3 { color:var(--text); font-size:18px; margin-bottom:6px; }
.empty p { max-width:360px; margin:0 auto 20px; font-size:15px; }

/* ==========================================================================
   LAMAN AWAM
   ========================================================================== */
.wrap { width:min(1160px,100% - 40px); margin:0 auto; }
.announce { display:flex; justify-content:center; align-items:center; gap:8px; padding:9px 16px; background:linear-gradient(90deg,var(--p),var(--p2)); color:var(--onp); font-size:14px; font-weight:600; text-align:center; }
.announce .i { width:16px; height:16px; }
.site-nav { position:sticky; top:0; z-index:40; background:rgba(var(--bg-rgb),.78); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid transparent; transition:border-color .2s; }
.site-nav.scrolled { border-bottom-color:var(--line); }
.nav-inner { display:flex; align-items:center; gap:24px; height:68px; }
.nav-links { display:flex; gap:4px; margin-left:12px; }
.nav-links a { color:var(--muted); font-weight:600; font-size:15px; padding:8px 12px; border-radius:10px; text-decoration:none; }
.nav-links a:hover { color:var(--text); background:var(--fill); }
.nav-actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
.lang-switch { display:inline-flex; background:var(--fill); padding:3px; border-radius:11px; }
.lang-switch a { padding:5px 10px; border-radius:8px; font-size:13px; font-weight:700; color:var(--muted); text-decoration:none !important; letter-spacing:.02em; }
.lang-switch a.on { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.public main { display:block; }
.hero { padding:72px 0 56px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; width:900px; height:900px; right:-260px; top:-420px; background:radial-gradient(closest-side,rgba(var(--p-rgb),.16),transparent); pointer-events:none; }
.hero::after { content:""; position:absolute; width:600px; height:600px; left:-300px; bottom:-380px; background:radial-gradient(closest-side,rgba(var(--p-rgb),.08),transparent); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:20px; background:rgba(var(--p-rgb),.1); color:var(--p); font-weight:700; font-size:13px; letter-spacing:.02em; }
.eyebrow .dot { width:18px; height:18px; border-radius:50%; background:var(--p); color:var(--onp); display:grid; place-items:center; }
.eyebrow .dot .i { width:12px; height:12px; stroke-width:2.4; }
.hero h1 { font-size:clamp(38px,5.6vw,64px); line-height:1.04; letter-spacing:-.035em; margin:20px 0 18px; font-weight:800; }
.hero h1 .grad-text { background:linear-gradient(120deg,var(--p),var(--p2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { font-size:clamp(17px,1.6vw,19.5px); color:var(--muted); max-width:540px; line-height:1.6; }
.hero-cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero-note { display:flex; gap:18px; margin-top:26px; flex-wrap:wrap; color:var(--muted); font-size:14px; font-weight:550; }
.hero-note span { display:inline-flex; align-items:center; gap:6px; }
.hero-note .i { width:17px; height:17px; color:var(--ok); }
.hero-visual { position:relative; display:flex; justify-content:center; min-height:500px; }
.phone { width:290px; aspect-ratio:9/19; border-radius:46px; background:#0b0c10; padding:11px; box-shadow:0 40px 80px rgba(var(--p-rgb),.25),0 20px 40px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.08); position:relative; z-index:2; transform:rotate(-3deg); }
.phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:90px; height:26px; border-radius:14px; background:#0b0c10; z-index:3; }
.phone-screen { height:100%; border-radius:36px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; padding:52px 16px 16px; }
.ps-top { display:flex; align-items:center; gap:9px; }
.ps-top b { font-size:14px; display:block; } .ps-top small { font-size:11px; color:var(--muted); display:block; }
.ps-top .pill { margin-left:auto; height:22px; font-size:10.5px; padding:0 8px; }
.ps-hero { margin-top:16px; background:var(--card); border-radius:22px; padding:22px 14px 18px; text-align:center; box-shadow:var(--shadow); }
.ps-btn { width:112px; height:112px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(150deg,var(--p),var(--p2)); display:grid; place-items:center; color:var(--onp); box-shadow:0 14px 30px rgba(var(--p-rgb),.4),0 0 0 10px rgba(var(--p-rgb),.08),0 0 0 22px rgba(var(--p-rgb),.04); animation:breathe 3.2s ease-in-out infinite; }
.ps-btn .i { width:38px; height:38px; stroke-width:2.2; }
.ps-hero b { font-size:15px; } .ps-hero small { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.ps-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.ps-tiles div { background:var(--card); border-radius:16px; padding:11px; box-shadow:var(--shadow); }
.ps-tiles .i { width:15px; height:15px; color:var(--p); }
.ps-tiles b { display:block; font-size:12.5px; margin-top:6px; } .ps-tiles small { font-size:10.5px; color:var(--muted); }
.ps-tab { margin-top:auto; display:flex; justify-content:space-around; padding-top:10px; color:var(--faint); }
.ps-tab .i { width:19px; height:19px; } .ps-tab .on { color:var(--p); }
.float-card { position:absolute; z-index:3; background:rgba(var(--card-rgb),.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:18px; padding:12px 14px; box-shadow:var(--shadow-lg); display:flex; gap:10px; align-items:center; font-size:13.5px; animation:float 6s ease-in-out infinite; }
.float-card .ico { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--ok-rgb),.14); color:var(--ok); }
.float-card b { display:block; font-size:13.5px; } .float-card small { color:var(--muted); font-size:12px; }
.float-card.f1 { left:2%; top:16%; } .float-card.f2 { right:0; bottom:18%; animation-delay:-3s; }
.float-card.f2 .ico { background:rgba(var(--p-rgb),.12); color:var(--p); }
@keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

.sec { padding:84px 0; }
.sec.alt { background:linear-gradient(180deg,transparent,rgba(var(--p-rgb),.035),transparent); }
.sec-head { max-width:640px; margin:0 auto 44px; text-align:center; }
.sec-head .kicker { color:var(--p); font-weight:700; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; }
.sec-head h2 { font-size:clamp(28px,3.6vw,42px); letter-spacing:-.03em; margin:10px 0 12px; font-weight:800; }
.sec-head p { color:var(--muted); font-size:17px; }
.products-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.product-card { background:var(--card); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; color:var(--text); text-decoration:none !important; transition:transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-media { aspect-ratio:4/3; background:radial-gradient(120% 90% at 50% 10%,rgba(var(--p-rgb),.12),rgba(var(--p-rgb),.02)); display:grid; place-items:center; position:relative; overflow:hidden; }
.product-media img { width:100%; height:100%; object-fit:cover; }
.product-media .device-art { width:82%; }
.product-media .badge { position:absolute; left:16px; top:16px; }
.product-body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.product-body h3 { font-size:22px; }
.product-body .tag { color:var(--muted); font-size:15px; margin-top:6px; }
.product-body .more { margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:6px; font-weight:650; color:var(--p); }
.product-body .more .i { width:17px; height:17px; transition:transform .2s; }
.product-card:hover .more .i { transform:translateX(4px); }
.steps-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); counter-reset:s; }
.step { background:var(--card); border-radius:26px; padding:28px 24px; box-shadow:var(--shadow); position:relative; }
.step .num-badge { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,var(--p),var(--p2)); color:var(--onp); font-weight:800; font-size:18px; margin-bottom:18px; }
.step h3 { font-size:19px; margin-bottom:8px; }
.step p { color:var(--muted); font-size:15.5px; }
.feat-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.feat { padding:24px; border-radius:24px; background:var(--card); box-shadow:var(--shadow); }
.feat .ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(var(--p-rgb),.1); color:var(--p); margin-bottom:16px; }
.feat .ico .i { width:23px; height:23px; }
.feat h3 { font-size:17.5px; margin-bottom:6px; }
.feat p { color:var(--muted); font-size:15px; }
.proto-band { border-radius:32px; padding:44px; background:linear-gradient(135deg,rgba(var(--warn-rgb),.12),rgba(var(--p-rgb),.08)); display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.proto-band .ico { width:72px; height:72px; border-radius:22px; display:grid; place-items:center; background:var(--card); color:var(--warn); box-shadow:var(--shadow); }
.proto-band .ico .i { width:34px; height:34px; }
.proto-band h3 { font-size:24px; margin-bottom:8px; letter-spacing:-.02em; }
.proto-band p { color:var(--muted); font-size:16px; max-width:720px; }
.interest-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start; }
.interest-grid h2 { font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; margin:10px 0 14px; font-weight:800; }
.interest-grid .lead { color:var(--muted); font-size:17px; }
.perks { margin:24px 0 0; padding:0; list-style:none; }
.perks li { display:flex; gap:12px; align-items:flex-start; margin-top:14px; font-size:15.5px; }
.perks .i { color:var(--ok); margin-top:2px; }
.faq { max-width:780px; margin:0 auto; }
.faq details { background:var(--card); border-radius:20px; box-shadow:var(--shadow); margin-bottom:12px; }
.faq summary { list-style:none; cursor:pointer; padding:20px 22px; font-weight:650; font-size:16.5px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .i { transition:transform .25s; color:var(--muted); }
.faq details[open] summary .i { transform:rotate(180deg); }
.faq details p { padding:0 22px 20px; color:var(--muted); font-size:15.5px; }
.cta-band { border-radius:34px; padding:56px 40px; text-align:center; background:linear-gradient(135deg,var(--p),var(--p2)); color:var(--onp); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:-50% -20% auto auto; width:500px; height:500px; border-radius:50%; background:rgba(255,255,255,.08); }
.cta-band h2 { font-size:clamp(26px,3.4vw,38px); letter-spacing:-.03em; font-weight:800; position:relative; }
.cta-band p { opacity:.86; font-size:17px; margin:12px auto 26px; max-width:520px; position:relative; }
.cta-band .btn { background:var(--onp); color:var(--p); position:relative; }
.site-foot { border-top:1px solid var(--line); padding:56px 0 28px; margin-top:40px; }
.foot-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; }
.foot-grid h4 { font-size:13.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:14px; }
.foot-grid a,.foot-grid span { display:block; color:var(--text); font-size:15px; margin-bottom:9px; }
.foot-brand p { margin-top:12px; font-size:15px; max-width:300px; }
.social { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.social a { font-size:14px; color:var(--muted); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; flex-wrap:wrap; }
/* produk */
.pdp { padding:40px 0 60px; }
.crumbs { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; margin-bottom:24px; }
.crumbs .i { width:15px; height:15px; }
.pdp-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.pdp-media { border-radius:32px; overflow:hidden; aspect-ratio:1/1; background:radial-gradient(120% 90% at 50% 10%,rgba(var(--p-rgb),.14),rgba(var(--p-rgb),.02)); display:grid; place-items:center; position:sticky; top:96px; }
.pdp-media img { width:100%; height:100%; object-fit:cover; }
.pdp-media .device-art { width:84%; }
.pdp-info h1 { font-size:clamp(32px,4.4vw,48px); letter-spacing:-.03em; margin:14px 0 10px; font-weight:800; }
.pdp-info .tag { font-size:19px; color:var(--muted); }
.pdp-info .desc { margin-top:20px; font-size:16.5px; line-height:1.7; white-space:pre-line; }
.highlights { list-style:none; padding:0; margin:24px 0; display:grid; gap:12px; }
.highlights li { display:flex; gap:12px; align-items:flex-start; background:var(--card); padding:14px 16px; border-radius:16px; box-shadow:var(--shadow); font-size:15.5px; }
.highlights .i { color:var(--p); margin-top:2px; }
.release { padding:16px 0; border-bottom:1px solid var(--line); }
.release:last-child { border:0; }
.release p { white-space:pre-line; color:var(--muted); font-size:14.5px; margin-top:6px; }
/* auth */
.auth { min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }
.auth-art { background:linear-gradient(150deg,var(--p),var(--p2)); color:var(--onp); padding:48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-art::before { content:""; position:absolute; width:620px; height:620px; border-radius:50%; right:-220px; bottom:-220px; background:rgba(255,255,255,.08); }
.auth-art::after { content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:60px; bottom:80px; background:rgba(255,255,255,.07); }
.auth-art .brand { color:var(--onp); }
.auth-art .brand .logo { background:rgba(255,255,255,.18); box-shadow:none; }
.auth-art h2 { font-size:38px; letter-spacing:-.03em; line-height:1.1; max-width:420px; position:relative; z-index:1; font-weight:800; }
.auth-art p { opacity:.85; font-size:17px; max-width:420px; margin-top:14px; position:relative; z-index:1; }
.auth-main { display:flex; flex-direction:column; padding:28px; }
.auth-top { display:flex; justify-content:space-between; align-items:center; }
.auth-form { width:min(400px,100%); margin:auto; padding:40px 0; }
.auth-form h1 { font-size:30px; letter-spacing:-.025em; margin-bottom:8px; font-weight:800; }
.auth-form > p { color:var(--muted); margin-bottom:28px; }
.auth-alt { text-align:center; color:var(--muted); margin-top:22px; font-size:15px; }
.alert { padding:13px 16px; border-radius:14px; font-size:14.5px; font-weight:550; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start; }
.alert .i { width:18px; height:18px; margin-top:1px; }
.alert.error { background:rgba(var(--bad-rgb),.1); color:var(--bad); }
.alert.ok { background:rgba(var(--ok-rgb),.12); color:var(--ok); }
.alert.info { background:rgba(var(--p-rgb),.08); color:var(--p); }
.alert.warn { background:rgba(var(--warn-rgb),.12); color:var(--warn); }
.prose { max-width:760px; margin:0 auto; padding:56px 0; }
.prose h1 { font-size:38px; letter-spacing:-.03em; margin-bottom:12px; }
.prose h2 { font-size:21px; margin:30px 0 10px; }
.prose p,.prose li { color:var(--muted); font-size:16.5px; line-height:1.75; }
.error-page { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:40px 20px; }
.error-code { font-size:110px; font-weight:800; letter-spacing:-.05em; background:linear-gradient(130deg,var(--p),var(--p2)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.error-page h1 { font-size:28px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.shell { display:flex; min-height:100dvh; }
.side { width:var(--side); flex:none; position:sticky; top:0; height:100dvh; padding:22px 16px 18px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(var(--card-rgb),.5); }
.side > .brand { padding:4px 10px 22px; }
.side-nav { display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.side-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--muted); font-weight:600; font-size:15px; text-decoration:none !important; transition:background .15s,color .15s; }
.side-nav a:hover { background:var(--fill); color:var(--text); }
.side-nav a.on { background:rgba(var(--p-rgb),.1); color:var(--p); }
.side-nav .i { width:20px; height:20px; }
.side-label { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding:22px 12px 8px; }
.side-foot { border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:4px; }
.me { display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; color:var(--text); text-decoration:none !important; }
.me:hover { background:var(--fill); }
.me b { display:block; font-size:14.5px; } .me small { display:block; color:var(--muted); font-size:12.5px; }
.avatar { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(var(--p-rgb),.2),rgba(var(--p-rgb),.08)); color:var(--p); font-weight:750; flex:none; }
.side-site { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; color:var(--muted); font-size:14px; font-weight:600; text-decoration:none !important; }
.side-site:hover { background:var(--fill); }
.main-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; padding:20px 32px 16px; background:rgba(var(--bg-rgb),.82); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); }
.topbar-title { flex:1; min-width:0; }
.topbar h1 { font-size:26px; letter-spacing:-.025em; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-title p { color:var(--muted); font-size:14px; margin-top:2px; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.mobile-only { display:none; }
.content { padding:8px 32px 40px; width:100%; max-width:1180px; animation:fade .35s ease; }
.powered { text-align:center; color:var(--faint); font-size:12.5px; margin-top:40px; }
.tabbar { display:none; }

/* stat */
.stats { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.stat { background:var(--card); border-radius:22px; box-shadow:var(--shadow); padding:18px 18px 16px; }
.stat .ico { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--p-rgb),.1); color:var(--p); margin-bottom:14px; }
.stat .ico .i { width:19px; height:19px; }
.stat .ico.green { background:rgba(var(--ok-rgb),.12); color:var(--ok); } .stat .ico.amber { background:rgba(var(--warn-rgb),.13); color:var(--warn); }
.stat strong { display:block; font-size:28px; letter-spacing:-.02em; font-weight:800; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:14px; }

/* kad peranti */
.devices { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.dcard { background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:16px; position:relative; transition:box-shadow .2s, transform .2s; }
.dcard:hover { box-shadow:var(--shadow-lg); }
.dcard-top { display:flex; align-items:flex-start; gap:12px; }
.dcard-top .dico { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:rgba(var(--p-rgb),.1); color:var(--p); flex:none; }
.dcard-top .dico .i { width:23px; height:23px; }
.dcard-top .t { flex:1; min-width:0; }
.dcard-top .t a { color:var(--text); font-weight:700; font-size:17px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.dcard-top .t small { color:var(--muted); font-size:13.5px; }
.dcard-mid { display:flex; align-items:center; gap:16px; }
.dcard-mid .meta { flex:1; min-width:0; font-size:13.5px; color:var(--muted); display:grid; gap:4px; }
.dcard-mid .meta span { display:flex; gap:6px; align-items:center; }
.dcard-mid .meta .i { width:15px; height:15px; }
.dcard-foot { display:flex; gap:8px; }
.dcard-foot .btn { flex:1; }
.mini-press { width:68px; height:68px; border-radius:50%; border:0; flex:none; background:linear-gradient(150deg,var(--p),var(--p2)); color:var(--onp); display:grid; place-items:center; box-shadow:0 10px 24px rgba(var(--p-rgb),.35),0 0 0 6px rgba(var(--p-rgb),.08); transition:transform .15s; }
.mini-press .i { width:28px; height:28px; stroke-width:2.2; }
.mini-press:active { transform:scale(.93); }
.mini-press[disabled] { background:var(--fill); color:var(--faint); box-shadow:none; cursor:not-allowed; }
.press-state { font-size:13px; font-weight:600; color:var(--muted); min-height:18px; }
.press-state.ok { color:var(--ok); } .press-state.bad { color:var(--bad); } .press-state.busy { color:var(--p); }
.is-busy .mini-press,.is-busy .big-press { animation:pressed 1.1s ease-in-out infinite; }
.is-done .mini-press,.is-done .big-press { background:linear-gradient(150deg,var(--ok),rgba(var(--ok-rgb),.8)); box-shadow:0 10px 24px rgba(var(--ok-rgb),.35); }
@keyframes pressed { 0%,100% { transform:scale(1); } 50% { transform:scale(.93); } }
.add-card { border:2px dashed var(--line); background:transparent; box-shadow:none; align-items:center; justify-content:center; text-align:center; color:var(--muted); min-height:200px; text-decoration:none !important; }
.add-card:hover { border-color:rgba(var(--p-rgb),.4); color:var(--p); background:rgba(var(--p-rgb),.03); }
.add-card .ico { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--p-rgb),.1); color:var(--p); }

/* butiran peranti */
.device-layout { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:20px; align-items:start; }
.press-card { text-align:center; padding:30px 22px 24px; position:relative; overflow:hidden; }
.press-card::before { content:""; position:absolute; inset:-40% -20% auto; height:300px; background:radial-gradient(closest-side,rgba(var(--p-rgb),.15),transparent); pointer-events:none; }
.press-wrap { position:relative; width:196px; height:196px; margin:6px auto 20px; }
.press-wrap .ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(var(--p-rgb),.16); }
.press-wrap .ring.r2 { inset:-14px; border-color:rgba(var(--p-rgb),.07); }
.is-busy .press-wrap .ring { animation:wave 1.3s ease-out infinite; }
.is-busy .press-wrap .ring.r2 { animation-delay:.45s; }
.big-press { position:absolute; inset:16px; border-radius:50%; border:0; background:linear-gradient(150deg,var(--p),var(--p2)); color:var(--onp); display:grid; place-items:center; box-shadow:0 20px 44px rgba(var(--p-rgb),.42),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -6px 14px rgba(0,0,0,.12); transition:transform .15s; }
.big-press .i { width:60px; height:60px; stroke-width:2.1; }
.big-press:active { transform:scale(.95); }
.big-press[disabled] { background:var(--fill); color:var(--faint); box-shadow:none; }
.press-card h2 { font-size:22px; position:relative; }
.press-card .press-state { font-size:14.5px; margin-top:6px; position:relative; }
@keyframes wave { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(1.45); opacity:0; } }
.gauge-wrap { text-align:center; }
.gauge { width:220px; height:124px; display:block; margin:0 auto; }
.bigval { font-size:40px; font-weight:300; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-align:center; line-height:1; }
.setting-block + .setting-block { border-top:1px solid var(--line); margin-top:22px; padding-top:22px; }
.setting-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.setting-head b { font-size:15.5px; } .setting-head span { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.state-line { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-top:16px; }
.state-line .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); }
.state-line.pending .dot { background:var(--warn); animation:ping-w 1.6s infinite; }
@keyframes ping-w { 0% { box-shadow:0 0 0 0 rgba(var(--warn-rgb),.5); } 70%,100% { box-shadow:0 0 0 6px rgba(var(--warn-rgb),0); } }

/* jadual & aktiviti */
.sched-time { font-size:28px; font-weight:300; letter-spacing:-.02em; font-variant-numeric:tabular-nums; min-width:84px; }
.sched-time.off { color:var(--faint); }
.timeline .row { align-items:flex-start; }
.timeline .row .ico { margin-top:2px; }
.timeline time { color:var(--faint); font-size:12.5px; white-space:nowrap; }
.filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filter-bar .input { min-height:42px; padding:8px 14px; width:auto; min-width:180px; }
.filter-bar select.input { background-position:calc(100% - 20px) 18px,calc(100% - 14px) 18px; }

/* jadual data (admin) */
.table-wrap { background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
table.data { width:100%; border-collapse:collapse; font-size:14.5px; }
table.data th { text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(var(--text-rgb),.015); }
table.data td { padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data tr:hover td { background:rgba(var(--text-rgb),.015); }
table.data td b { font-weight:600; }
table.data td small { display:block; color:var(--muted); font-size:12.5px; }
table.data .actions { text-align:right; white-space:nowrap; }
.chart { width:100%; height:auto; display:block; }
.chart .bar { fill:url(#bar-g); }
.chart text { fill:var(--muted); font-size:11px; font-family:var(--font); }
.chart .grid-line { stroke:var(--line); }
.secret-box { display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-radius:14px; background:var(--fill); }
.secret-box .mono { flex:1; word-break:break-all; font-size:14px; font-weight:600; }
pre.code { background:#0f1117; color:#e2e8f0; border-radius:16px; padding:18px; overflow:auto; font-size:13.5px; line-height:1.6; margin:0; }
pre.code .c { color:#94a3b8; }
.tabs { display:flex; gap:6px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.tabs a { padding:9px 15px; border-radius:12px; font-weight:600; font-size:14.5px; color:var(--muted); background:var(--card); box-shadow:var(--shadow); white-space:nowrap; text-decoration:none !important; }
.tabs a.on { background:var(--p); color:var(--onp); }
.admin-hub { display:none; }
.prod-thumb { width:52px; height:52px; border-radius:14px; overflow:hidden; background:rgba(var(--p-rgb),.08); display:grid; place-items:center; flex:none; }
.prod-thumb img { width:100%; height:100%; object-fit:cover; }
.prod-thumb .device-art { width:120%; }
.pager { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:20px; color:var(--muted); font-size:14px; }
.notice-card { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:18px; background:rgba(var(--p-rgb),.07); margin-bottom:16px; font-size:14.5px; }
.notice-card .i { color:var(--p); margin-top:2px; }
.notice-card.warn { background:rgba(var(--warn-rgb),.1); } .notice-card.warn .i { color:var(--warn); }
.steps-list { counter-reset:n; list-style:none; padding:0; margin:0; }
.steps-list li { counter-increment:n; display:flex; gap:14px; margin-top:14px; font-size:15px; }
.steps-list li::before { content:counter(n); flex:none; width:28px; height:28px; border-radius:50%; background:rgba(var(--p-rgb),.12); color:var(--p); font-weight:700; font-size:14px; display:grid; place-items:center; }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width:1100px) {
  .device-layout { grid-template-columns:1fr; }
  .hero-grid { gap:32px; }
}
@media (max-width:980px) {
  .hero-grid,.pdp-grid,.interest-grid { grid-template-columns:1fr; }
  .hero { padding:44px 0 30px; text-align:center; }
  .hero .lead { margin:0 auto; }
  .hero-cta,.hero-note { justify-content:center; }
  .hero-visual { min-height:auto; padding:20px 0; }
  .nav-links { display:none; }
  .pdp-media { position:static; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-brand { grid-column:1/-1; }
  .auth { grid-template-columns:1fr; }
  .auth-art { display:none; }
}
@media (max-width:1023px) {
  .side { display:none; }
  .topbar { padding:calc(12px + var(--sa-t)) 16px 12px; gap:12px; }
  .topbar h1 { font-size:21px; }
  .mobile-only { display:inline-flex; }
  .content { padding:4px 16px calc(100px + var(--sa-b)); margin:0 auto; max-width:760px; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:6px 6px calc(6px + var(--sa-b)); background:rgba(var(--card-rgb),.88); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--line); }
  .tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; color:var(--faint); font-size:11px; font-weight:650; text-decoration:none !important; border-radius:12px; }
  .tabbar a .i { width:24px; height:24px; }
  .tabbar a.on { color:var(--p); }
  .admin-hub { display:block; }
  .hide-mobile { display:none !important; }
  table.data thead { display:none; }
  table.data,table.data tbody,table.data tr,table.data td { display:block; width:100%; }
  table.data tr { padding:12px 16px; border-bottom:1px solid var(--line); }
  table.data tr:last-child { border-bottom:0; }
  table.data td { border:0; padding:3px 0; }
  table.data td[data-label]::before { content:attr(data-label); display:inline-block; min-width:96px; color:var(--muted); font-size:12.5px; font-weight:600; }
  table.data .actions { text-align:left; padding-top:10px; }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 32px); }
  .nav-inner { gap:10px; height:62px; }
  .hide-sm { display:none !important; }
  .sec { padding:60px 0; }
  .proto-band { grid-template-columns:1fr; padding:28px 24px; text-align:center; }
  .proto-band .ico { margin:0 auto; }
  .cta-band { padding:40px 24px; border-radius:28px; }
  .foot-grid { grid-template-columns:1fr; }
  .card { padding:18px; border-radius:22px; }
  .phone { width:250px; }
  .float-card.f1 { left:-4px; top:8%; }
  .float-card.f2 { right:-4px; }
  .auth-main { padding:18px 20px; }
  .lang-switch a { padding:5px 8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }
@media print { .side,.tabbar,.topbar-actions,.site-nav { display:none; } }

/* --- pembaikan selepas ujian visual --- */
.grid > *,.device-layout > *,.stack > * { min-width:0; }
.row .txt small,.kv b { overflow-wrap:anywhere; }
.row-btns.compact { justify-content:flex-start; }
.row-btns.compact > * { flex:none; }
.products-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),380px)); justify-content:center; }
@media (max-width:1023px) {
  .stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat { padding:14px; border-radius:18px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; }
  .stat .ico { margin:0; grid-row:span 2; }
  .stat strong { font-size:22px; line-height:1.1; }
  .stat span { font-size:13px; }
}