/* Komponen bersama: navbar, liquid glass, chip, ikon app kaca, elemen 3D, header halaman, footer. */

html, body { margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:inherit; }
img { max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--text-primary); outline-offset:4px; border-radius:4px; }

.page { position:relative; overflow:hidden; isolation:isolate; padding:0 24px 160px; min-height:100vh; }
.bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.bg-glow { position:absolute; border-radius:50%; filter:blur(var(--glow-blur)); }
.wrap { max-width:var(--content-max); margin:0 auto; position:relative; }

/* ───────── navbar ───────── */
.navbar { position:relative; z-index:1; display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-36); padding-top:var(--space-36); font-size:14px; line-height:20px; }
.navbar a { color:var(--text-secondary); text-decoration:none; transition:color .2s; }
.navbar a:hover, .navbar a[aria-current="page"] { color:var(--text-primary); }
.navbar a[aria-current="page"] { position:relative; }
.navbar a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); }

/* ───────── header halaman ───────── */
.head { position:relative; text-align:center; margin:104px auto 64px; max-width:var(--content-max); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; font-size:13px; color:var(--text-secondary); border-radius:var(--radius-pill) !important; }
.eyebrow b { font-weight:600; font-size:12px; padding:4px 10px; border-radius:var(--radius-pill); color:var(--text-primary); background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); }
.title { margin:20px 0 0; font-size:64px; line-height:1.05; font-weight:700; letter-spacing:-.02em; }
.grad, .title span { background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead { max-width:640px; margin:20px auto 0; font-size:17px; line-height:28px; color:var(--text-secondary); }
.lead:empty { display:none; }

/* ───────── LIQUID GLASS ───────── */
.glass { position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(145deg, var(--glass-fill-strong) 0%, var(--glass-fill) 40%, var(--glass-tint) 100%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%); backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border); border-radius:var(--radius-card); box-shadow:var(--shadow-glass); }
.glass::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, var(--glass-sheen) 0%, transparent 38%); }
.glow-dots::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-45%; height:80%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, var(--dot) 0 1px, transparent 1.5px) 0 0 / 16px 16px, radial-gradient(ellipse at 50% 60%, var(--glow-violet), transparent 60%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); opacity:.7; }

.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-size:12.5px; line-height:16px; border-radius:var(--radius-pill);
  background:var(--glass-fill-strong); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-sheen); color:var(--text-primary); white-space:nowrap; }
.chip.now::before, .chip.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-500); box-shadow:0 0 10px 2px var(--blue-500); }
.chip.new { background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); border-color:rgba(245,245,247,.35); font-weight:600; }

/* ───────── IKON APP LIQUID GLASS (glif) ───────── */
.app { position:relative; flex:none; width:44px; height:44px; border-radius:var(--radius-icon); display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(245,245,247,.38) 0%, rgba(245,245,247,0) 52%), linear-gradient(150deg, var(--violet-500), var(--blue-500));
  border:1px solid rgba(245,245,247,.35);
  box-shadow:inset 0 1px 0 rgba(245,245,247,.65), inset 0 -6px 12px rgba(11,11,15,.28), 0 3px 0 -1px #4c2a9e, 0 10px 24px -8px var(--glow-violet); }
.app svg { width:56%; height:56%; fill:none; stroke:var(--text-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(11,11,15,.35)); }
.app.clear { background:linear-gradient(180deg, rgba(245,245,247,.28) 0%, rgba(245,245,247,.04) 60%), rgba(139,92,246,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(245,245,247,.55), 0 3px 0 -1px rgba(139,92,246,.6), 0 10px 24px -8px var(--glow-violet); }
.app.sm { width:36px; height:36px; border-radius:11px; }
.app.lg { width:64px; height:64px; border-radius:19px; }
.app.xl { width:128px; height:128px; border-radius:36px; box-shadow:inset 0 2px 0 rgba(245,245,247,.7), inset 0 -14px 26px rgba(11,11,15,.3), 7px 8px 0 -2px #4c2a9e, 0 40px 70px -20px var(--glow-violet); }
.app.xl svg { stroke-width:1.5; }
.apps { display:flex; flex-wrap:wrap; gap:14px 12px; }
.app-item { display:flex; flex-direction:column; align-items:center; gap:7px; width:60px; font-size:11px; line-height:14px; color:var(--text-secondary); text-align:center; }

/* ───────── ELEMEN 3D LIQUID GLASS ───────── */
.orb { position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(245,245,247,.95) 0 3%, rgba(245,245,247,.35) 9%, transparent 20%),
    radial-gradient(circle at 70% 80%, rgba(59,130,246,.55), transparent 45%),
    radial-gradient(circle at 45% 45%, rgba(139,92,246,.35), rgba(139,92,246,.65) 60%, rgba(11,11,15,.4) 100%);
  box-shadow:inset -18px -28px 50px rgba(11,11,15,.55), inset 12px 14px 30px rgba(245,245,247,.22), inset 0 0 0 1px rgba(245,245,247,.18), 0 30px 80px -10px var(--glow-violet); }
.ring { position:absolute; border-radius:50%;
  background:conic-gradient(from 200deg, rgba(245,245,247,.85), var(--violet-500), rgba(59,130,246,.9), rgba(139,92,246,.4), rgba(245,245,247,.85));
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55.5%, #000 69%, transparent 70.5%); mask:radial-gradient(circle, transparent 54%, #000 55.5%, #000 69%, transparent 70.5%);
  filter:drop-shadow(0 0 22px rgba(139,92,246,.6)); }
.float { animation:none; }
@media (prefers-reduced-motion:no-preference) {
  .float { animation:bob 7s ease-in-out infinite alternate; }
  .float.d2 { animation-duration:9s; animation-delay:-3s; }
  .float.d3 { animation-duration:11s; animation-delay:-6s; }
  @keyframes bob { to { translate:0 -14px; } }
}

/* ───────── tombol ───────── */
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border:0; border-radius:var(--radius-pill); font:inherit; font-weight:600; font-size:14.5px; color:var(--text-primary); text-decoration:none; cursor:pointer;
  background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); box-shadow:inset 0 1px 0 rgba(245,245,247,.5), 0 14px 30px -10px var(--glow-violet); transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(245,245,247,.5), 0 18px 36px -10px var(--glow-violet); }
.btn:disabled { opacity:.6; cursor:default; transform:none; }
.btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ───────── footer ───────── */
.site-foot { position:relative; z-index:1; max-width:var(--content-max); margin:0 auto; padding:28px 24px 40px; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--text-secondary); border-top:1px solid rgba(245,245,247,.08); }
.site-foot a { text-decoration:none; }
.site-foot a:hover { color:var(--text-primary); }
.site-foot .brand { font-weight:700; font-size:15px; }
.site-foot nav { display:flex; flex-wrap:wrap; gap:18px; }

/* status muat & live */
.loading { text-align:center; padding:80px 0; color:var(--text-secondary); font-size:14px; }
.live-dot { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-secondary); }
.live-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-500); box-shadow:0 0 8px 2px var(--blue-500); }

@media (max-width:860px) {
  .page { padding:0 16px 120px; }
  .navbar { gap:14px; font-size:12px; }
  .head { margin:72px auto 40px; }
  .title { font-size:42px; }
  .site-foot { padding:24px 16px 32px; }
}

/* 5 menu tetap satu baris di ponsel */
@media (max-width:420px) {
  .navbar, body .hero-section .navbar { gap:9px; font-size:11px; padding-left:8px; padding-right:8px; }
  .page > .navbar { margin:0 -16px; }
}

/* ───────── scroll antar halaman ───────── */
.page-hint { position:fixed; left:50%; bottom:24px; z-index:50; display:grid; gap:8px; min-width:220px; padding:12px 18px 14px; text-align:center; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--text-primary); border-radius:18px;
  background:linear-gradient(145deg, rgba(245,245,247,.14), rgba(139,92,246,.18)); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%); backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  box-shadow:var(--shadow-glass); opacity:0; pointer-events:none; transform:translate(-50%, 12px); transition:opacity .2s, transform .2s; }
.page-hint.up { top:24px; bottom:auto; transform:translate(-50%, -12px); }
.page-hint.show { opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
.page-hint-bar { display:block; height:3px; border-radius:3px; background:rgba(245,245,247,.18); overflow:hidden; }
.page-hint-bar i { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--violet-500), var(--blue-500)); transition:width .12s linear; }

body { transition:opacity .25s ease, transform .25s ease; }
body.page-leave-up { opacity:0; transform:translateY(-24px); }
body.page-leave-down { opacity:0; transform:translateY(24px); }
@media (prefers-reduced-motion:reduce) {
  body, .page-hint, .page-hint-bar i { transition:none; }
  body.page-leave-up, body.page-leave-down { transform:none; }
}