:root {
  --bg: oklch(26% 0.026 245);
  --surface: oklch(32% 0.026 245);
  --surface-2: oklch(38% 0.03 245);
  --solid: oklch(24% 0.018 245);
  --solid-2: oklch(28% 0.018 245);
  --shell: oklch(15% 0.02 245);
  --fg: oklch(94% 0.006 245);
  --muted: oklch(75% 0.016 245);
  --border: rgb(214 236 255 / 16%);
  --accent: oklch(72% 0.16 205);
  --accent-2: oklch(70% 0.14 145);
  --success: oklch(70% 0.14 150);
  --warn: oklch(80% 0.14 82);
  --font-display: "SF Pro Display", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: "SF Pro Text", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --radius: 8px;
  --max: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.product-page {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(circle at 72% -6%, rgb(42 210 245 / 30%), transparent 36rem),
    radial-gradient(circle at 10% 20%, rgb(98 139 190 / 24%), transparent 32rem),
    radial-gradient(circle at 92% 68%, rgb(60 214 150 / 12%), transparent 28rem),
    linear-gradient(135deg, oklch(32% 0.034 242) 0%, var(--bg) 48%, oklch(23% 0.03 252) 100%);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.product-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 12%), transparent 30%, rgb(36 202 236 / 8%) 64%, transparent),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 3.5%) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 98%), rgb(0 0 0 / 82%) 42%, rgb(0 0 0 / 62%));
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.footer-logo { display: block; width: 180px; max-width: 100%; height: 31px; }

.product-page footer { border-top: 1px solid var(--border); padding: 28px 24px 42px; color: var(--muted); }
.product-page footer .wrap,
.product-page .footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.product-page footer .wrap { align-items: center; font-size: 13px; }
.product-page .footer-inner { max-width: var(--max); margin: 0 auto; font-size: 14px; }
.absen-indoor-page footer { padding-block: 30px; }

.btn {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--fg);
  background: rgb(255 255 255 / 7%);
  cursor: pointer;
  font-weight: 640;
  letter-spacing: .02em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover { transform: translateY(-1px); border-color: rgb(255 255 255 / 26%); }
.btn.primary { color: oklch(12% 0.018 238); background: var(--accent); border-color: transparent; }

.absen-indoor-page { --warn: oklch(78% 0.14 80); }
.absen-indoor-page .btn { font-weight: 600; }
.absen-indoor-page .btn:hover { border-color: rgb(255 255 255 / 22%); }
.absen-indoor-page .btn.primary { color: oklch(11% 0.018 245); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}