/* ============================================================
   Noisy AM Premium - redesain total tema space
   Design: "SpaceEdu-inspired". Deep space #04101f, aksen cyan
   #79dce8, display serif Prata, body Hanken Grotesk, logo Poppins.
   Hero planet sinematik dengan sistem skala --u (design pixel).
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Sistem skala hero (design pixel). SEMUA ukuran hero memakai ini. */
  --dw: 1353;
  --dh: 1163;
  --gutter: 25;
  --u: max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
  --dh-px: calc(1163 * var(--u));
  --vshift: calc(max(0px, (100vh - var(--dh-px))) * .50);

  /* Ruang */
  --color-bg: #04101f;
  --color-bg-alt: #071530;
  --color-surface: #0a1d3d;
  --color-surface-2: #0d2247;
  --color-surface-3: #10294f;

  /* Garis */
  --color-line: rgba(255, 255, 255, 0.12);
  --color-line-soft: rgba(255, 255, 255, 0.07);
  --color-line-strong: rgba(255, 255, 255, 0.26);

  /* Teks */
  --color-text: #f4f7fb;
  --color-text-muted: #b6c4d8;
  --color-text-dim: #7e92ad;

  /* Aksen tunggal: cyan space */
  --color-brand-blue: #79dce8;
  --color-brand-blue-hover: #a7ecf4;
  --color-brand-blue-soft: #a7ecf4;
  --color-brand-blue-tint: rgba(121, 220, 232, 0.12);
  --color-brand-blue-glow: rgba(121, 220, 232, 0.3);
  --color-danger: #ff8f8f;

  /* Gradien hero: kedalaman ruang */
  --gradient-hero:
    radial-gradient(90% 65% at 50% -10%, rgba(10, 34, 64, 0.55) 0%, rgba(10, 34, 64, 0) 60%),
    radial-gradient(50% 40% at 90% 8%, rgba(121, 220, 232, 0.08) 0%, rgba(121, 220, 232, 0) 66%),
    radial-gradient(55% 45% at 2% 30%, rgba(20, 60, 100, 0.3) 0%, rgba(20, 60, 100, 0) 64%);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Tipografi: Prata serif display, Hanken body, Poppins logo, mono meta */
  --font-serif: 'Prata', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Poppins', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-caption: 13px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading-sm: clamp(24px, 3.2vw, 30px);
  --text-heading: clamp(28px, 4.4vw, 46px);
  --text-display: clamp(42px, 7.4vw, 84px);

  --leading-tight: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-meta: 0.14em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* Spasi (basis 4px) */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1200px;
  --header-h: calc(88 * var(--u));

  /* Bentuk: chip 8 / input 12 / core 14 / kartu 20 / pill */
  --radius-chip: 8px;
  --radius-inputs: 12px;
  --radius-core: 14px;
  --radius-cards: 20px;
  --radius-buttons: 9999px;

  /* Bayangan di-tint cyan */
  --shadow-card: 0 1px 2px rgba(2, 8, 20, 0.5), 0 14px 36px -18px rgba(2, 8, 20, 0.8);
  --shadow-lift: 0 2px 6px rgba(2, 8, 20, 0.5), 0 32px 64px -28px rgba(121, 220, 232, 0.35);
  --shadow-panel: 0 36px 88px -24px rgba(1, 4, 10, 0.9);

  /* Gerak */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --speed-hover: 140ms;
  --speed-fast: 200ms;
  --speed-med: 360ms;
}

@supports (height: 100dvh) {
  :root {
    --u: max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
    --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .50);
    --header-h: calc(88 * var(--u));
  }
}

/* ---------- Reset dasar ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: calc(var(--header-h) + 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Starfield: lapisan bintang di belakang seluruh halaman */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1px 1px at 34% 64%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(167, 236, 244, 0.8), transparent 100%),
    radial-gradient(1px 1px at 72% 72%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 86% 34%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.5px 1.5px at 26% 84%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 44% 42%, rgba(167, 236, 244, 0.6), transparent 100%),
    radial-gradient(1px 1px at 94% 12%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 8% 46%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 90%, rgba(167, 236, 244, 0.5), transparent 100%);
  background-size: 340px 340px, 280px 280px, 360px 360px, 300px 300px, 260px 260px, 380px 380px, 320px 320px, 240px 240px, 420px 420px, 400px 400px;
  background-repeat: repeat;
}

/* ---------- Scrollbar sesuai tema space (cyan) ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-blue) var(--color-surface);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--color-surface);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-brand-blue);
  border-radius: 9999px;
  border: 2px solid var(--color-surface);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-blue-soft);
}

/* Scrollbar tipis di dalam panel modal QRIS */
.modal__panel--qris::-webkit-scrollbar {
  width: 6px;
}

.modal__panel--qris::-webkit-scrollbar-thumb {
  border: 0;
}

/* ---------- Loading screen ----------
   Overlay penuh layar, tema space: planet ber-orbit + ring + progress.
   Hilang dengan fade lalu dibersihkan sendiri dari DOM oleh JS. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Starfield di dalam loader */
.loader__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 14% 20%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1px 1px at 82% 14%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 66%, rgba(167, 236, 244, 0.7), transparent 100%),
    radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 92% 42%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 8% 58%, rgba(167, 236, 244, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 46% 30%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 72% 86%, rgba(255, 255, 255, 0.45), transparent 100%);
  background-size: 320px 320px, 260px 260px, 360px 360px, 300px 300px, 240px 240px, 380px 380px, 280px 280px, 420px 420px;
  background-repeat: repeat;
  animation: loader-twinkle 3.2s ease-in-out infinite alternate;
}

@keyframes loader-twinkle {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.loader__scene {
  position: relative;
  text-align: center;
  padding: var(--spacing-24);
}

/* Planet ber-orbit: bola cyan + dua ring yang berputar */
.loader__planet {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 auto;
  animation: loader-float 3.4s ease-in-out infinite;
}

@keyframes loader-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.loader__planet-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.35), transparent 44%),
    radial-gradient(circle at 50% 50%, var(--color-brand-blue-hover) 0%, #2f86c9 48%, #0a2a4a 100%);
  box-shadow:
    inset -16px -18px 34px rgba(2, 8, 20, 0.7),
    0 0 60px var(--color-brand-blue-glow),
    0 0 120px rgba(121, 220, 232, 0.18);
  animation: loader-core 3.4s ease-in-out infinite;
}

@keyframes loader-core {
  0%, 100% { box-shadow: inset -16px -18px 34px rgba(2, 8, 20, 0.7), 0 0 50px var(--color-brand-blue-glow), 0 0 110px rgba(121, 220, 232, 0.14); }
  50% { box-shadow: inset -16px -18px 34px rgba(2, 8, 20, 0.7), 0 0 72px var(--color-brand-blue-glow), 0 0 140px rgba(121, 220, 232, 0.24); }
}

.loader__ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(121, 220, 232, 0.32);
  transform: rotate(16deg) scaleY(0.42);
}

.loader__ring--a {
  inset: -18px;
  border-color: rgba(121, 220, 232, 0.2);
  transform: rotate(64deg) scaleY(0.55);
}

/* Dot satelit: translateX mengikuti elips ring, counter-scaleY
   mengembalikan bentuk bundar supaya tidak ter-squash. */
.loader__ring i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--color-brand-blue-soft);
  box-shadow: 0 0 12px rgba(121, 220, 232, 0.9);
  animation: loader-orbit 2.6s linear infinite;
}

.loader__ring--a i {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: loader-orbit 4.2s linear infinite reverse;
}

@keyframes loader-orbit {
  from { transform: rotate(0deg) translateX(58px) rotate(0deg) scaleY(2.38); }
  to { transform: rotate(360deg) translateX(58px) rotate(-360deg) scaleY(2.38); }
}

.loader__ring--a i {
  animation-name: loader-orbit-a;
}

@keyframes loader-orbit-a {
  from { transform: rotate(0deg) translateX(66px) rotate(0deg) scaleY(1.82); }
  to { transform: rotate(-360deg) translateX(66px) rotate(360deg) scaleY(1.82); }
}

.loader__word {
  margin: var(--spacing-40) 0 0;
  font-family: var(--font-logo);
  font-weight: var(--weight-semi);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

.loader__word i {
  font-style: italic;
  color: var(--color-brand-blue-soft);
}

.loader__tag {
  margin: var(--spacing-12) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Progress: track hairline + bar cyan bercahaya */
.loader__track {
  position: relative;
  width: 220px;
  height: 3px;
  margin: var(--spacing-32) auto 0;
  border-radius: 99px;
  background: var(--color-line-strong);
  overflow: hidden;
}

.loader__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-blue-soft));
  box-shadow: 0 0 14px var(--color-brand-blue-glow);
  transition: width 0.2s var(--ease-out);
}

.loader__count {
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--color-brand-blue-soft);
  font-variant-numeric: tabular-nums;
}

/* Grain: elemen tetap, pointer-events none */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.03;
  background-image: var(--noise);
  background-size: 140px 140px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(121, 220, 232, 0.4);
  color: #04101f;
}

/* Fokus terlihat */
:focus-visible {
  outline: 2px solid var(--color-brand-blue-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Util ---------- */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.container--narrow {
  max-width: 760px;
}

.container--faq {
  max-width: 860px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 90;
  padding: 10px 18px;
  border-radius: var(--radius-core);
  background: var(--color-surface-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  transform: translateY(-200%);
  transition: transform var(--speed-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Navbar (gaya SpaceEdu) ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(4, 16, 31, 0.55), rgba(4, 16, 31, 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--speed-fast) var(--ease-out);
}

.navbar::after {
  content: "";
  position: absolute;
  left: calc(25 * var(--u));
  right: calc(49 * var(--u));
  top: calc(86 * var(--u));
  height: calc(2 * var(--u));
  background: var(--color-line);
  transition: background-color var(--speed-fast) var(--ease-out);
}

.navbar.is-scrolled {
  background: rgba(4, 16, 31, 0.82);
}

.navbar.is-scrolled::after {
  background: var(--color-line-strong);
}

.navrow {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: calc(25 * var(--u));
  max-width: 1440px;
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-logo);
  font-weight: var(--weight-semi);
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.logo i {
  font-style: italic;
  color: var(--color-brand-blue-soft);
}

.logo__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  padding: 4px 8px;
  transform: translateY(-1px);
}

.links {
  display: flex;
  align-items: center;
}

.links a {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 15px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--speed-hover) var(--ease-out);
}

.links a:hover,
.links a.is-current {
  color: var(--color-text);
}

.links a.is-current {
  color: var(--color-text);
}

.links a.is-current::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 8px;
  height: 3px;
  background: var(--color-brand-blue);
  border-radius: 2px;
}

.links a.is-current.is-anim::after {
  animation: ent-draw 0.42s var(--ease-out) both;
  transform-origin: center;
}

.links a.enroll {
  margin-left: 14px;
  width: auto;
  height: 38px;
  padding: 0 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-bg);
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #d8ecfe 9%, #dceefe 72%, #f4f9ff 100%);
  box-shadow: 0 3px 14px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
  transition: transform var(--speed-hover) var(--ease-out), box-shadow var(--speed-hover) var(--ease-out);
}

.links a.enroll:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(121, 220, 232, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.links a.enroll::after {
  content: none;
}

.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s linear;
}

.navrow[data-open="true"] .burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navrow[data-open="true"] .burger span:nth-child(2) {
  opacity: 0;
}

.navrow[data-open="true"] .burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============ Hero sinematik planet (gaya SpaceEdu) ============
   Tiga dunia: EARTH, VENUS, MARS. Satu featured (video latar +
   judul serif), dua di slot samping. Klik slot untuk ganti. ============ */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
}

/* Backdrop video: tumpuk 3 video, yang aktif opacity 1 */
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sky video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.22s linear;
}

.sky video.is-active {
  opacity: 1;
}

/* Overlay UI hero */
.ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--gradient-hero);
}

.copy {
  position: absolute;
  inset: 0;
  transform: translateY(var(--vshift));
  pointer-events: none;
}

.copy a {
  pointer-events: auto;
}

.col {
  position: absolute;
  left: 0;
  right: calc(var(--gutter) * var(--u));
  text-align: center;
}

/* Eyebrow mono */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-brand-blue-soft);
  margin: 0 0 var(--spacing-16);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--color-brand-blue);
}

/* Hero: eyebrow besar versi space */
.col.eyebrow {
  top: calc(188.8 * var(--u));
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(30.45 * var(--u));
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: calc(4 * var(--u));
  text-indent: calc(4 * var(--u));
  color: #fff;
  text-transform: uppercase;
  display: block;
}

.col.eyebrow::before {
  content: none;
}

/* Judul serif planet */
.col.title {
  top: calc(268 * var(--u));
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: calc(112.4 * var(--u));
  line-height: 1;
  letter-spacing: calc(2 * var(--u));
  text-indent: calc(2 * var(--u));
  color: #fff;
  margin: 0;
}

/* Mask untuk entrance reveal */
.ent-mask,
.ent-line {
  display: block;
}

.ent-mask {
  overflow: hidden;
  padding-top: 0.18em;
  margin-top: -0.18em;
}

/* Rule cyan */
.col.rule {
  top: calc(405.5 * var(--u));
  height: calc(5 * var(--u));
  font-size: 0;
  line-height: 0;
  padding-right: calc(2 * var(--u));
}

.col.rule span {
  display: inline-block;
  vertical-align: top;
  width: calc(100 * var(--u));
  height: 100%;
  border-radius: calc(2.5 * var(--u));
  background: var(--color-brand-blue);
}

/* Lede */
.col.lede {
  top: calc(433.2 * var(--u));
  margin: 0;
  font-size: calc(18.36 * var(--u));
  font-weight: var(--weight-regular);
  line-height: calc(30 * var(--u));
  color: rgba(255, 255, 255, 0.95);
  max-width: 60ch;
  margin-inline: auto;
  padding-inline: 24px;
}

/* CTA row: dua planet + pill glossy + label serif */
.col.cta {
  top: calc(597 * var(--u));
  height: calc(66 * var(--u));
  isolation: isolate;
}

.col.cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(216 * var(--u));
  height: calc(66 * var(--u));
  border-radius: calc(33 * var(--u));
  font-family: var(--font-body);
  font-size: calc(17 * var(--u));
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: var(--color-bg);
  text-decoration: none;
  padding-top: calc(2 * var(--u));
  background: linear-gradient(180deg, #ffffff 0%, #d6e8f8 4%, #d9ecfe 72%, #ffffff 100%);
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, 0.5),
    0 0 calc(26 * var(--u)) rgba(255, 255, 255, 0.18),
    inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.9);
  transition: transform var(--speed-hover) var(--ease-out), box-shadow var(--speed-hover) var(--ease-out);
}

.col.cta > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-8 * var(--u)) rgba(121, 220, 232, 0.4),
    0 0 calc(30 * var(--u)) rgba(121, 220, 232, 0.25),
    inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.9);
}

/* Planet cut-out di slot samping (seluruh img ada di kedua slot,
   switch hanya toggle kelas is-shown, tidak pernah ganti src) */
.planet {
  position: absolute;
  z-index: -1;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.planet img {
  display: none;
  width: 100%;
  height: auto;
}

.planet img.is-shown {
  display: block;
}

.planet:hover {
  transform: scale(1.045);
}

.planet:active {
  transform: scale(0.99);
}

.planet-l {
  width: calc(143 * var(--u));
  left: calc(-69.5 * var(--u));
  top: calc(-38.3 * var(--u));
}

.planet-r {
  width: calc(143 * var(--u));
  right: calc(-64.7 * var(--u));
  top: calc(-40.6 * var(--u));
}

/* Label serif mengapit pill */
.label {
  position: absolute;
  top: calc(33 * var(--u));
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: calc(17.8 * var(--u));
  letter-spacing: calc(4.6 * var(--u));
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.label.label-l {
  left: calc(111 * var(--u));
}

.label.label-r {
  right: calc(104 * var(--u));
}

/* Tombol scroll */
.scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  margin-left: calc((-48 - (var(--gutter) / 2)) * var(--u));
  bottom: calc(68 * var(--u));
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border-radius: 50%;
  background: rgba(11, 22, 40, 0.6);
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  backdrop-filter: blur(calc(6 * var(--u)));
  border: 1px solid var(--color-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease-out), background-color var(--speed-fast) var(--ease-out);
}

.scroll:hover {
  border-color: var(--color-brand-blue-soft);
  background: rgba(13, 34, 71, 0.7);
}

.scroll svg {
  width: calc(20 * var(--u));
  height: calc(25 * var(--u));
  display: block;
}

/* Fokus */
.scroll:focus-visible,
.links a:focus-visible,
.enroll:focus-visible,
.col.cta a:focus-visible,
.logo:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 3px;
}

.planet:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 6px;
  border-radius: 50%;
}

/* ---------- Entrance animation (sekali jalan, lalu bersih sendiri) ---------- */
@keyframes ent-reveal {
  from { transform: translateY(115%); }
  to { transform: translateY(0); }
}

@keyframes ent-rise {
  from { opacity: 0; transform: translateY(var(--rise, 10px)); }
  to { opacity: 1; transform: none; }
}

@keyframes ent-settle {
  from { opacity: 0; transform: translateY(var(--rise, 8px)) scale(0.965); }
  to { opacity: 1; transform: none; }
}

@keyframes ent-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.anim {
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --e-slow: cubic-bezier(0.4, 0, 0.2, 1);
}

.anim .navbar::after,
.anim .links a.is-current::after,
.anim .col.rule span {
  transform: scaleX(0);
}

.anim .logo,
.anim .links a,
.anim .burger,
.anim .col.lede,
.anim .label,
.anim .col.cta a,
.anim .scroll,
.anim .sky {
  opacity: 0;
}

.anim .sky {
  will-change: opacity;
}

.anim .col.eyebrow .ent-line,
.anim .col.title .ent-line {
  transform: translateY(115%);
  will-change: transform;
}

.anim.play .sky {
  animation: ent-fade 1.6s var(--e-slow) 0.25s both;
}

.anim.play .navbar::after {
  animation: ent-draw 0.9s var(--e-expo) 0.12s both;
  transform-origin: center;
}

.anim.play .logo {
  --rise: 8px;
  animation: ent-rise 0.6s var(--e-quint) 0.2s both;
}

.anim.play .links a {
  --rise: 8px;
  animation: ent-rise 0.55s var(--e-quint) both;
}

.anim.play .links a:nth-child(1) { animation-delay: 0.26s; }
.anim.play .links a:nth-child(2) { animation-delay: 0.31s; }
.anim.play .links a:nth-child(3) { animation-delay: 0.36s; }
.anim.play .links a:nth-child(4) { animation-delay: 0.41s; }
.anim.play .links a:nth-child(5) { animation-delay: 0.46s; }

.anim.play .links a.enroll,
.anim.play .burger {
  --rise: 8px;
  animation: ent-settle 0.6s var(--e-quint) 0.46s both;
}

.anim.play .links a.is-current::after {
  animation: ent-draw 0.55s var(--e-expo) 0.6s both;
  transform-origin: center;
}

.anim.play .col.eyebrow .ent-line {
  animation: ent-reveal 0.75s var(--e-expo) 0.3s both;
}

.anim.play .col.title .ent-line {
  animation: ent-reveal 0.95s var(--e-expo) 0.44s both;
}

.anim.play .col.rule span {
  animation: ent-draw 0.65s var(--e-expo) 0.78s both;
  transform-origin: center;
}

.anim.play .col.lede {
  --rise: 12px;
  animation: ent-rise 0.7s var(--e-quint) 0.86s both;
}

.anim.play .label.label-l {
  --rise: 8px;
  animation: ent-rise 0.6s var(--e-quint) 1.04s both;
}

.anim.play .label.label-r {
  --rise: 8px;
  animation: ent-rise 0.6s var(--e-quint) 1.1s both;
}

.anim.play .col.cta a {
  --rise: 8px;
  animation: ent-settle 0.7s var(--e-quint) 1.14s both;
}

.anim.play .scroll {
  animation: ent-settle 0.6s var(--e-quint) 1.42s both;
}

/* ---------- Responsif hero (enam tier, urutan ini wajib) ---------- */

/* Link "Masuk / Akun" khusus hamburger menu (mobile & tablet sempit).
   Base = tersembunyi di desktop; hanya tampil di dalam media query ≤1030px.
   SELECTOR: .links a.mobile-login (spesifisitas 0,2,0) menang atas .links a (0,1,1).
   Posisi: HARUS sebelum media query supaya rule flex di media query menang. */
.links a.mobile-login {
  display: none;
}

/* Tombol keluar: base tersembunyi di desktop. Ditulis DI SINI (sebelum
   media query) karena spesifisitasnya (.links .mobile-logout, 0,2,0) sama
   dengan rule di dalam @media; kalau diletakkan setelahnya, rule base akan
   menang dan tombol tak pernah muncul di mobile. */
.links .mobile-logout {
  display: none;
}

.mobile-logout {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--weight-semi);
  cursor: pointer;
  background: none;
}

.mobile-logout[hidden] {
  display: none !important;
}

.mobile-login i {
  font-size: 18px;
  color: var(--color-brand-blue-soft);
}

/* A) NAV COLLAPSE
   Hamburger hanya muncul di layar sempit (mobile/tablet).
   Di PC/laptop, menu tetap baris penuh apa pun tinggi viewport. */
@media (max-width: 1030px) {
  .navrow {
    padding-inline: calc(25 * var(--u));
  }

  .burger {
    display: flex;
  }

  .links {
    position: absolute;
    top: calc(96 * var(--u));
    right: calc(25 * var(--u));
    z-index: 5;
    width: min(calc(324 * var(--u)), calc(100vw - 50 * var(--u)));
    flex-direction: column;
    align-items: stretch;
    padding: calc(12 * var(--u));
    border-radius: 20px;
    background: rgba(7, 21, 48, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 44px rgba(2, 8, 20, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
  }

  .navrow[data-open="true"] .links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .links a {
    margin-left: 0 !important;
    height: auto;
    justify-content: flex-start;
    padding: 14px 16px;
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  .links a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .links a.is-current::after {
    top: auto;
    bottom: 9px;
    left: 16px;
    right: auto;
    width: 26px;
    height: 3px;
  }

  .links a.enroll {
    margin: 14px 0 2px !important;
    width: 100%;
    height: 46px;
    border-radius: 23px;
    justify-content: center;
    padding-top: 2px;
    font-size: 15px;
    letter-spacing: 0;
    border-top: 0;
  }

  .links a.enroll::after {
    content: none;
  }

  /* "Masuk" desktop disembunyikan di layar kecil; hanya lewat hamburger.
     Spesifisitas dinaikkan (.navbar .navbar__user) agar menang atas base
     display:flex di bagian bawah file. */
  .navbar .navbar__user {
    display: none;
  }

  /* Tombol "Aktivasi" tidak perlu di hamburger (sudah ada CTA di hero) */
  .links a.enroll {
    display: none;
  }

  .links a.mobile-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 0 2px;
    padding: 12px 16px;
    border-radius: var(--radius-buttons);
    border: 1px solid var(--color-line-strong);
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: var(--weight-semi);
    text-decoration: none;
  }

  .links a.mobile-login:hover {
    color: var(--color-text);
    border-color: var(--color-brand-blue-soft);
  }

  .links a.mobile-login.is-user {
    color: var(--color-text);
    border-color: var(--color-brand-blue-soft);
  }

  /* Tombol keluar: hanya tampil di hamburger, gaya danger yang lembut
     (hairline merah tipis + ikon), bukan tombol merah penuh. */
  .links .mobile-logout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 8px 0 2px;
    padding: 12px 16px;
    border-radius: var(--radius-buttons);
    border: 1px solid rgba(255, 143, 143, 0.3);
    color: var(--color-danger);
    text-decoration: none;
    transition:
      color var(--speed-hover) var(--ease-out),
      border-color var(--speed-hover) var(--ease-out),
      background-color var(--speed-hover) var(--ease-out);
  }

  .links .mobile-logout .nav__link-icon {
    display: inline-flex;
    color: var(--color-danger);
  }

  .links .mobile-logout i {
    font-size: 18px;
  }

  .links .mobile-logout:hover,
  .links .mobile-logout:focus-visible {
    color: #ffd3d3;
    border-color: var(--color-danger);
    background: rgba(255, 143, 143, 0.1);
  }

  .links .mobile-logout:hover .nav__link-icon {
    color: #ffd3d3;
  }
}

/* B) TABLET */
@media (min-width: 580px) and (max-width: 1030px) and (min-height: 621px) {
  :root {
    --gutter: 0;
    --u: min(max(min(.85px, calc(100vh / 780)), min(calc(100vw / 900), calc(100vh / 1163))), 1.15px);
    --dh-px: calc(1120 * var(--u));
    --vshift: calc(max(0px, (100vh - var(--dh-px))) * .38);
  }

  @supports (height: 100dvh) {
    :root {
      --u: min(max(min(.85px, calc(100dvh / 780)), min(calc(100vw / 900), calc(100dvh / 1163))), 1.15px);
      --dh-px: calc(1120 * var(--u));
      --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .38);
    }
  }

  .navbar::after {
    left: calc(25 * var(--u));
    right: calc(25 * var(--u));
  }

  .col.lede br {
    display: none;
  }

  .col.lede {
    max-width: calc(620 * var(--u));
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
  }

  .label.label-r {
    right: calc(116 * var(--u));
  }
}

/* C) PHONE */
@media (max-width: 579px), (max-height: 620px) {
  :root {
    --gutter: 0;
    --u: max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880)));
    --dh-px: calc(880 * var(--u));
    --vshift: calc(max(0px, (100vh - var(--dh-px))) * .34);
    --header-h: calc(76 * var(--u));
  }

  @supports (height: 100dvh) {
    :root {
      --u: max(min(.92px, calc(100dvh / 620)), min(calc(100vw / 430), calc(100dvh / 880)));
      --dh-px: calc(880 * var(--u));
      --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .34);
      --header-h: calc(76 * var(--u));
    }
  }

  .navbar {
    height: calc(76 * var(--u));
  }

  .navbar::after {
    left: calc(24 * var(--u));
    right: calc(24 * var(--u));
    top: calc(74 * var(--u));
  }

  .navrow {
    padding-inline: calc(24 * var(--u));
  }

  .links {
    top: calc(84 * var(--u));
    right: calc(24 * var(--u));
  }

  .copy {
    top: calc(76 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(56 * var(--u)) calc(26 * var(--u)) 0;
  }

  .col {
    position: static;
    width: 100%;
    right: auto;
  }

  .col.eyebrow {
    font-size: calc(20 * var(--u));
    letter-spacing: calc(5 * var(--u));
    text-indent: calc(5 * var(--u));
  }

  .col.title {
    font-size: calc(86 * var(--u));
    margin-top: calc(15 * var(--u));
  }

  .col.rule {
    margin-top: calc(20 * var(--u));
    height: calc(5 * var(--u));
    padding-right: 0;
  }

  .col.rule span {
    width: calc(84 * var(--u));
  }

  .col.lede {
    margin-top: calc(19 * var(--u));
    font-size: calc(15.5 * var(--u));
    line-height: calc(26 * var(--u));
    max-width: calc(400 * var(--u));
    text-wrap: balance;
  }

  .col.lede br {
    display: none;
  }

  .col.cta {
    top: auto;
    margin-top: calc(32 * var(--u));
    height: calc(60 * var(--u));
    position: relative;
  }

  .col.cta > a {
    width: calc(190 * var(--u));
    height: calc(60 * var(--u));
    border-radius: calc(30 * var(--u));
  }

  .label {
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(16 * var(--u));
    letter-spacing: calc(4 * var(--u));
  }

  .label.label-l {
    left: calc(56 * var(--u));
  }

  .label.label-r {
    right: calc(60 * var(--u));
  }

  .planet-l {
    width: calc(89 * var(--u));
    left: calc(-44.5 * var(--u));
    top: calc(-17 * var(--u));
  }

  .planet-r {
    width: calc(89 * var(--u));
    right: calc(-44.5 * var(--u));
    top: calc(-18.3 * var(--u));
  }

  .scroll {
    width: calc(74 * var(--u));
    height: calc(74 * var(--u));
    margin-left: calc(-37 * var(--u));
    bottom: calc(49 * var(--u));
  }

  .scroll svg {
    width: calc(15.5 * var(--u));
    height: calc(19.5 * var(--u));
  }
}

/* D) Layar pendek: tanpa tombol scroll */
@media (max-height: 660px) {
  .scroll {
    display: none;
  }
}

/* E) SHORT */
@media (max-height: 620px) {
  :root {
    --u: max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560)));
    --dh-px: calc(560 * var(--u));
    --vshift: 0px;
    --header-h: calc(76 * var(--u));
  }

  .copy {
    padding-top: calc(26 * var(--u));
  }

  .col.title {
    font-size: calc(64 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .col.rule {
    margin-top: calc(12 * var(--u));
  }

  .col.lede {
    margin-top: calc(12 * var(--u));
  }

  .col.cta {
    margin-top: calc(20 * var(--u));
  }

  .label {
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(15 * var(--u));
  }

  .label.label-l {
    left: calc(58 * var(--u));
  }

  .label.label-r {
    right: calc(58 * var(--u));
  }
}

@media (min-width: 821px) and (max-height: 660px) {
  .copy {
    transform: none;
  }
}

/* F) NARROW PHONE */
@media (max-width: 500px) {
  .label {
    top: calc(100% + 34 * var(--u));
    transform: none;
    font-size: calc(15 * var(--u));
  }

  .label.label-l {
    left: calc(6 * var(--u));
  }

  .label.label-r {
    right: calc(6 * var(--u));
  }
}

/* ---------- Marquee (satu-satunya di halaman) ---------- */
.marquee {
  border-block: 1px solid var(--color-line);
  background: rgba(7, 21, 48, 0.6);
  overflow: hidden;
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.marquee__track span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.marquee__track i {
  font-size: 14px;
  color: var(--color-brand-blue);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Tipografi seksi ---------- */
.section {
  padding-block: clamp(72px, 9vw, 128px);
  position: relative;
}

.section--tint {
  background: rgba(7, 21, 48, 0.55);
  border-block: 1px solid var(--color-line);
}

.section__head {
  max-width: 640px;
  margin-bottom: var(--spacing-48);
}

.section__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-24);
}

.section__title {
  font-family: var(--font-serif);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-regular);
  margin: 0;
}

.section__sub {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: var(--spacing-16) 0 0;
  max-width: 56ch;
}

.section__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-buttons);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.section__count i {
  font-size: 15px;
  color: var(--color-brand-blue-soft);
}

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-buttons);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--speed-hover) var(--ease-out),
    border-color var(--speed-hover) var(--ease-out),
    color var(--speed-hover) var(--ease-out),
    transform var(--speed-hover) var(--ease-out),
    box-shadow var(--speed-hover) var(--ease-out);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn--gloss {
  background: linear-gradient(180deg, #ffffff 0%, #d8ecfe 9%, #dceefe 72%, #f4f9ff 100%);
  color: var(--color-bg);
  box-shadow: 0 3px 14px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.btn--gloss:hover {
  box-shadow: 0 8px 26px rgba(121, 220, 232, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
}

.btn--ghost:hover {
  border-color: var(--color-brand-blue-soft);
  color: var(--color-brand-blue-soft);
}

.btn--outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-line-strong);
}

.btn--outline:hover {
  color: var(--color-text);
  border-color: var(--color-brand-blue-soft);
}

.btn--lg {
  padding: 16px 32px;
  font-size: 16px;
}

.btn--sm {
  padding: 9px 18px;
  font-size: 14px;
}

/* ---------- Input ---------- */
.input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  transition: border-color var(--speed-fast) var(--ease-out), box-shadow var(--speed-fast) var(--ease-out);
}

.input::placeholder {
  color: var(--color-text-dim);
}

.input:focus-visible {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px var(--color-brand-blue-tint);
}

.input--area {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-8);
}

.form-error {
  margin: var(--spacing-12) 0 0;
  font-size: 14px;
  color: var(--color-danger);
}

/* ---------- Cara pakai: baris langkah ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
}

.steps__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--spacing-24);
  padding-block: var(--spacing-40);
  border-top: 1px solid var(--color-line);
}

.steps__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.steps__num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: var(--weight-medium);
  color: var(--color-brand-blue);
  letter-spacing: -0.02em;
  line-height: 1;
  padding-top: 6px;
}

.steps__item h3 {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  line-height: var(--leading-heading);
}

.steps__item p {
  margin: var(--spacing-8) 0 0;
  color: var(--color-text-muted);
  max-width: 54ch;
}

/* ---------- Koleksi preset ---------- */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.preset-card {
  position: relative;
  border-radius: var(--radius-cards);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-line);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--speed-med) var(--ease-out), border-color var(--speed-med) var(--ease-out), box-shadow var(--speed-med) var(--ease-out);
}

.preset-card:hover {
  transform: translateY(-4px);
  border-color: rgba(121, 220, 232, 0.45);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(121, 220, 232, 0.12);
}

/* Spotlight: cahaya mengikuti kursor (variabel dari JS) */
.preset-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--color-brand-blue-glow), transparent 62%);
  transition: opacity var(--speed-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .preset-card:hover::before {
    opacity: 1;
  }
}

.preset-card--wide {
  grid-column: span 2;
}

@media (min-width: 901px) {
  .preset-card--wide .preset-card__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto;
  }

  .preset-card--wide .preset-card__thumb {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
    border-right: 1px solid var(--color-line);
    border-bottom: none;
  }

  .preset-card--wide .preset-card__body {
    border-bottom: 1px solid var(--color-line);
  }

  .preset-card--wide .preset-card__thumb-icon {
    width: 72px;
    height: 72px;
  }

  .preset-card--wide .preset-card__thumb-icon i {
    font-size: 34px;
  }
}

/* Thumbnail: planet buatan CSS di atas starfield */
.preset-card__thumb {
  position: relative;
  aspect-ratio: 16 / 7.5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background:
    radial-gradient(120% 160% at 80% 0%, rgba(121, 220, 232, 0.08), transparent 55%),
    radial-gradient(100% 120% at 10% 100%, rgba(20, 60, 100, 0.35), transparent 60%),
    #061224;
}

.preset-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(167, 236, 244, 0.5), transparent 100%),
    radial-gradient(1px 1px at 85% 65%, rgba(255, 255, 255, 0.4), transparent 100%);
  opacity: 0.8;
}

/* Bola planet dekoratif */
.orb {
  position: absolute;
  right: -4%;
  bottom: -30%;
  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 42%),
    radial-gradient(circle at 50% 50%, var(--orb-hi) 0%, var(--orb-mid) 55%, var(--orb-low) 100%);
  box-shadow:
    inset -18px -22px 40px rgba(2, 8, 20, 0.7),
    0 0 60px var(--orb-glow);
}

.orb i {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(-14deg) scaleX(0.6);
}

.orb--comet i {
  border: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(167, 236, 244, 0.5));
}

.preset-card__thumb--earth { --orb-hi: #7dd3a8; --orb-mid: #1e6f6a; --orb-low: #06283c; --orb-glow: rgba(94, 224, 184, 0.35); }
.preset-card__thumb--venus { --orb-hi: #ffe2b0; --orb-mid: #c98a3d; --orb-low: #5a2c14; --orb-glow: rgba(255, 190, 120, 0.3); }
.preset-card__thumb--mars  { --orb-hi: #ffb3a0; --orb-mid: #c25a3a; --orb-low: #4a1420; --orb-glow: rgba(255, 120, 110, 0.3); }
.preset-card__thumb--void  { --orb-hi: #c9c8ff; --orb-mid: #6a5acd; --orb-low: #1c1238; --orb-glow: rgba(160, 140, 255, 0.35); }

.preset-card__thumb-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 16, 31, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.preset-card__thumb-icon i {
  font-size: 30px;
  color: var(--color-brand-blue-soft);
}

.preset-card__watermark {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(167, 236, 244, 0.4);
  transition: color var(--speed-fast) var(--ease-out);
}

.preset-card:hover .preset-card__watermark {
  color: rgba(167, 236, 244, 0.75);
}

.preset-card__body {
  position: relative;
  z-index: 2;
  padding: var(--spacing-24);
}

.preset-card__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-brand-blue-soft);
  margin-bottom: var(--spacing-12);
}

.preset-card__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  margin-right: 8px;
  flex-shrink: 0;
}

.preset-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--weight-semi);
  letter-spacing: -0.015em;
  line-height: var(--leading-heading);
}

.preset-card__desc {
  margin: var(--spacing-8) 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 56ch;
}

.preset-card__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: var(--spacing-20) 0 0;
  padding: 0;
}

.preset-card__meta li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  background: rgba(4, 16, 31, 0.5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-chip);
  padding: 5px 10px;
}

.preset-card__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  border-top: 1px solid var(--color-line);
  padding: var(--spacing-16) var(--spacing-24);
}

.preset-card__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--speed-fast) var(--ease-out);
}

.preset-card:hover .preset-card__hint {
  color: var(--color-brand-blue-soft);
}

.preset-card__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--color-brand-blue-soft);
  cursor: pointer;
  transition: color var(--speed-hover) var(--ease-out);
}

.preset-card__action:hover {
  color: var(--color-text);
}

.preset-card__action-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-brand-blue-tint);
  color: var(--color-brand-blue-soft);
  transition: background-color var(--speed-hover) var(--ease-out), transform var(--speed-hover) var(--ease-out);
}

.preset-card__action:hover .preset-card__action-icon {
  background: rgba(121, 220, 232, 0.28);
  transform: translateX(2px);
}

/* ---------- Keunggulan: split asimetris ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.split__media {
  position: relative;
}

.split__media img {
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.split__media::before {
  content: '';
  position: absolute;
  inset: -18px 18px 18px -18px;
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-line-strong);
  background: linear-gradient(135deg, var(--color-brand-blue-tint), transparent 60%);
  z-index: -1;
}

.checklist {
  list-style: none;
  margin: var(--spacing-32) 0 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-16);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.checklist i {
  font-size: 22px;
  color: var(--color-brand-blue-soft);
  flex-shrink: 0;
  margin-top: 2px;
}

.split .btn {
  margin-top: var(--spacing-32);
}

/* ---------- Harga (pricing) ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-cards);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: transform var(--speed-med) var(--ease-out), border-color var(--speed-med) var(--ease-out), box-shadow var(--speed-med) var(--ease-out);
}

.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-card);
}

.price-card--premium {
  border-color: rgba(121, 220, 232, 0.4);
  box-shadow: 0 0 0 1px rgba(121, 220, 232, 0.12), var(--shadow-card);
}

.price-card--premium:hover {
  border-color: rgba(121, 220, 232, 0.6);
  box-shadow: 0 0 0 1px rgba(121, 220, 232, 0.2), var(--shadow-lift);
}

.price-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 90% 0%, rgba(121, 220, 232, 0.08), transparent 55%);
  pointer-events: none;
}

.price-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-buttons);
  background: var(--color-brand-blue-tint);
  border: 1px solid rgba(121, 220, 232, 0.35);
  color: var(--color-brand-blue-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}

.price-card__badge i {
  font-size: 13px;
}

.price-card__name {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-brand-blue-soft);
  margin-bottom: var(--spacing-16);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--spacing-16);
}

.price-card__amount {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: var(--weight-regular);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
}

.price-card--premium .price-card__amount {
  color: var(--color-brand-blue-soft);
}

.price-card__period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.price-card__desc {
  margin: 0 0 var(--spacing-24);
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.price-card__features {
  list-style: none;
  margin: 0 0 var(--spacing-32);
  padding: 0;
  display: grid;
  gap: var(--spacing-14, 14px);
}

.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.price-card__features li i {
  font-size: 20px;
  color: var(--color-brand-blue-soft);
  flex-shrink: 0;
  margin-top: 1px;
}

.price-card__cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.price-card__cta i {
  font-size: 18px;
}

.price-card__cta-sub {
  margin-top: var(--spacing-12);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.price-card__cta-sub i {
  font-size: 18px;
}

.price-card__cta[hidden],
.price-card__cta-sub[hidden] {
  display: none;
}

.pricing__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--spacing-32) 0 0;
  font-size: 13.5px;
  color: var(--color-text-dim);
  text-align: center;
  flex-wrap: wrap;
}

.pricing__note i {
  font-size: 15px;
  color: var(--color-brand-blue-soft);
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  gap: var(--spacing-12);
}

.faq__item {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-core);
  overflow: hidden;
  transition:
    border-color var(--speed-fast) var(--ease-out),
    background-color var(--speed-fast) var(--ease-out),
    box-shadow var(--speed-fast) var(--ease-out);
}

.faq__item:hover {
  border-color: var(--color-line-strong);
}

.faq__item.is-open {
  border-color: rgba(121, 220, 232, 0.4);
  box-shadow: inset 3px 0 0 var(--color-brand-blue);
}

.faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: 22px 28px;
  font-size: 17px;
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary i {
  font-size: 18px;
  color: var(--color-text-dim);
  flex-shrink: 0;
  transition: transform var(--speed-med) var(--ease-out), color var(--speed-fast) var(--ease-out);
}

.faq__item:hover summary i,
.faq__item.is-open summary i {
  color: var(--color-brand-blue-soft);
}

.faq__item.is-open summary i {
  transform: rotate(180deg);
}

.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--speed-med) var(--ease-out);
}

.faq__item.is-open .faq__body {
  grid-template-rows: 1fr;
}

.faq__body-inner {
  overflow: hidden;
  min-height: 0;
}

.faq__body-inner p {
  margin: 0;
  padding: 0 28px 24px;
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ---------- Developer ---------- */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

@media (max-width: 900px) {
  .dev-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dev-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--radius-cards);
  background: linear-gradient(150deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.dev-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 90% 0%, var(--color-brand-blue-glow), transparent 60%);
  pointer-events: none;
}

.dev-card__avatar {
  width: clamp(72px, 10vw, 104px);
  height: clamp(72px, 10vw, 104px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-line-strong);
  flex-shrink: 0;
  box-shadow: 0 0 40px rgba(121, 220, 232, 0.18);
}

.dev-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--spacing-8);
}

.dev-card__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}

.dev-card__role {
  margin: var(--spacing-8) 0 0;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.dev-card__socials {
  display: flex;
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
  flex-wrap: wrap;
}

.dev-card__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--speed-hover) var(--ease-out), border-color var(--speed-hover) var(--ease-out), transform var(--speed-hover) var(--ease-out);
}

.dev-card__social:hover {
  color: var(--color-text);
  border-color: var(--color-brand-blue-soft);
  transform: translateY(-1px);
}

.dev-card__social i {
  font-size: 18px;
  color: var(--color-brand-blue-soft);
}

/* ---------- Aktivasi ---------- */
.cta-panel {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cta-panel__title {
  font-family: var(--font-serif);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-regular);
  margin: 0;
}

.cta-panel__sub {
  margin: var(--spacing-16) auto 0;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.activate {
  position: relative;
  margin-top: var(--spacing-40);
  background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 52%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-cards);
  padding: clamp(24px, 4vw, 40px);
  text-align: left;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color var(--speed-fast) var(--ease-out);
}

.activate:focus-within {
  border-color: var(--color-line-strong);
}

.activate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
}

.activate__form {
  display: grid;
  gap: var(--spacing-8);
}

.activate__row {
  display: flex;
  gap: var(--spacing-12);
  align-items: stretch;
}

.activate__row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.activate__row .btn {
  flex: 0 0 auto;
}

.quota-chip {
  margin: var(--spacing-24) auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-brand-blue-tint);
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.quota-chip i {
  font-size: 16px;
  color: var(--color-brand-blue-soft);
}

.quota-chip__value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semi);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.quota-chip--empty {
  border-color: rgba(255, 143, 143, 0.35);
}

.quota-chip--empty .quota-chip__value,
.quota-chip--empty i {
  color: var(--color-danger);
}

.quota-chip[hidden] {
  display: none;
}

.activate__note {
  display: flex;
  /* flex-start: ikon tetap di baris pertama meski teks membungkus di HP. */
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: var(--spacing-20) 0 0;
  font-size: 13.5px;
  color: var(--color-text-dim);
}

.activate__note i {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--color-brand-blue-soft);
  /* Tengahkan ikon pada baris teks pertama (line box ~21.6px). */
  transform: translateY(3px);
}

.activate-success {
  margin-top: var(--spacing-40);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-blue-tint);
  border-radius: var(--radius-cards);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}

.activate-success__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-buttons);
  background: var(--color-brand-blue-tint);
  color: var(--color-brand-blue-soft);
  font-weight: var(--weight-semi);
  font-size: 14px;
}

.activate-success__badge i {
  font-size: 18px;
}

.activate-success p {
  color: var(--color-text-muted);
  margin: var(--spacing-20) 0 0;
}

.activate-success .btn {
  margin-top: var(--spacing-24);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  padding: var(--spacing-24);
}

.modal[hidden] {
  display: none;
}

.modal:not([hidden]) .modal__backdrop {
  animation: modal-fade-in 0.28s var(--ease-out);
}

.modal:not([hidden]) .modal__panel {
  animation: modal-panel-in 0.32s var(--ease-out);
}

.modal.is-closing .modal__backdrop {
  animation: modal-fade-out 0.22s var(--ease-out) forwards;
}

.modal.is-closing .modal__panel {
  animation: modal-panel-out 0.22s var(--ease-out) forwards;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modal-panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  padding: clamp(24px, 5vw, 40px);
  box-shadow: var(--shadow-panel);
}

.modal__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: color var(--speed-hover) var(--ease-out), border-color var(--speed-hover) var(--ease-out);
}

.modal__close:hover {
  color: var(--color-text);
  border-color: var(--color-line-strong);
}

.modal__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  padding-right: var(--spacing-32);
}

.modal__sub {
  margin: var(--spacing-12) 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.modal__sub strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.modal__step form {
  margin-top: var(--spacing-24);
  display: grid;
  gap: var(--spacing-12);
}

.modal__action {
  margin-top: var(--spacing-4);
}

.modal__resend {
  margin-top: var(--spacing-12);
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-brand-blue-soft);
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: center;
  justify-self: center;
}

.modal__resend:hover {
  text-decoration: underline;
}

.modal__done-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-brand-blue-tint);
  color: var(--color-brand-blue-soft);
  font-size: 32px;
  box-shadow: 0 0 40px var(--color-brand-blue-glow);
}

.modal__features {
  list-style: none;
  margin: var(--spacing-24) 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-12);
}

.modal__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.modal__features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  flex-shrink: 0;
}

.modal__spinner {
  text-align: center;
  padding: var(--spacing-32) 0;
}

.modal__spinner p {
  color: var(--color-text-muted);
  margin: var(--spacing-16) 0 0;
  font-size: 14px;
}

.spinner {
  width: 38px;
  height: 38px;
  margin-inline: auto;
  border-radius: 50%;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-brand-blue);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Modal QRIS (bayar paket Premium) ---------- */
.modal--qris .modal__panel--qris {
  max-width: 440px;
}

/* Strip nominal: selalu tampil, termasuk saat metode dinamis dipakai,
   supaya jumlah yang harus dibayar tidak pernah hilang dari layar. */
.pay-total {
  margin-top: var(--spacing-20);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: 12px 16px;
  border: 1px solid var(--color-brand-blue-tint);
  border-radius: var(--radius-inputs);
  background: rgba(121, 220, 232, 0.06);
}

.pay-total__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.pay-total__value {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Daftar metode pembayaran dinamis (dari panel admin) */
.pay-methods {
  margin-top: var(--spacing-12);
  display: grid;
  gap: 12px;
}

/* Satu metode = satu kartu, memakai radius kartu situs. Radius pill
   (9999px) yang lama membuat kartu tinggi tampak seperti stadium dan
   memotong sudut kontennya. */
.pay-method {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-core);
  background: var(--color-surface-2);
}

.pay-method__head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-method__name {
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.pay-method__detail {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-dim);
  overflow-wrap: anywhere;
}

/* Kotak putih di sekeliling QR: kontras QR tetap tinggi di tema gelap.
   Foto QRIS asli memuat area kosong di tepinya; object-fit cover dengan
   object-position center memotong area itu sehingga hanya kode QR yang
   tampil, dan kotak sedikit diperbesar supaya QR mudah dipindai. */
.pay-method__img {
  justify-self: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  padding: 8px;
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: 0 0 24px var(--color-brand-blue-tint);
  overflow: hidden;
}

.pay-method__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* Metode QRIS dinamis memakai foto QRIS utuh (assets/qris-82419b.jpg).
   Kotak persegi + contain menjaga seluruh QR tetap utuh dan mudah dipindai
   tanpa terpotong. */
.pay-method__img--qris {
  aspect-ratio: 1;
}

.pay-method__img--qris img {
  object-fit: contain;
}

/* Nilai teks (nomor rekening / instruksi): teks kiri, tombol salin kanan.
   Teks panjang boleh turun baris tanpa mendorong tombol keluar kartu. */
.pay-method__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-inputs);
  background: rgba(4, 16, 31, 0.5);
}

.pay-method__value-text {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.pay-method__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-buttons);
  background: var(--color-surface-3);
  color: var(--color-brand-blue-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semi);
  cursor: pointer;
  transition:
    color var(--speed-hover) var(--ease-out),
    border-color var(--speed-hover) var(--ease-out),
    background-color var(--speed-hover) var(--ease-out);
}

.pay-method__copy:hover {
  color: var(--color-text);
  border-color: var(--color-brand-blue-soft);
  background: var(--color-surface);
}

.pay-method__copy i {
  font-size: 14px;
}

.pay-method__link {
  width: 100%;
}

.pay-method__open {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-brand-blue-soft);
  text-decoration: none;
}

.pay-method__open:hover {
  text-decoration: underline;
}

.pay-method__open i {
  font-size: 15px;
}

/* Elemen di atas memakai display:grid/flex yang menimpa [hidden] bawaan
   browser. Paksa tetap tersembunyi saat atribut hidden dipasang JS. */
.pay-methods[hidden],
.qris-card[hidden],
#qrisImage[hidden],
#qrisOpenLink[hidden],
.qris-steps[hidden] {
  display: none;
}

/* Kartu QRIS: gambar QR (di-crop presisi) di atas, meta di bawah */
.qris-card {
  margin-top: var(--spacing-24);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--spacing-16);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-cards);
  background: var(--color-surface-2);
}

/* Kotak QRIS: gambar sudah berupa crop persegi dengan margin putih.
   Tampilkan utuh (object-fit: contain) + sedikit padding supaya QR tidak
   terlihat terlalu nge-zoom, tapi tetap nyaman dipindai. */
.qris-card__img-wrap {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  padding: 10px;
  border-radius: var(--radius-inputs);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 0 24px var(--color-brand-blue-tint);
}

.qris-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Jika fallback pakai link asli (landscape), biarkan width 100%
   height auto dan jangan paksa kotak */
.qris-img--full {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}

/* Meta di bawah gambar: label monospace kiri, nilai rata kanan,
   dipisah hairline tipis agar rapi dan mudah dipindai. */
.qris-card__meta {
  display: grid;
  width: 100%;
  margin-top: var(--spacing-4);
  text-align: left;
}

.qris-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-line);
}

.qris-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.qris-row__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.qris-row__value {
  margin: 0;
  font-size: 15px;
  color: var(--color-text);
  text-align: right;
  overflow-wrap: anywhere;
}

.qris-row__value--name {
  font-weight: var(--weight-medium);
}

.qris-row__value--amount {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

.qris-row__value--email {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Tautan buka gambar penuh (ukuran asli) di tab baru */
.qris-open-link {
  justify-self: center;
  margin-top: var(--spacing-12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-brand-blue-soft);
  text-decoration: none;
}

.qris-open-link:hover {
  text-decoration: underline;
}

.qris-open-link i {
  font-size: 15px;
}

/* Countdown masa berlaku invoice */
.qris-countdown {
  margin: var(--spacing-12) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Status pembayaran real-time (loading / menunggu / error / kedaluwarsa) */
.qris-pay-status {
  margin: var(--spacing-8) 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-dim);
}

.qris-pay-status--waiting {
  color: var(--color-brand-blue-soft);
}

.qris-pay-status--error,
.qris-pay-status--expired {
  color: var(--color-danger);
}

/* Daftar langkah */
.qris-steps {
  margin: var(--spacing-20) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qris-step;
  display: grid;
  gap: var(--spacing-8);
}

.qris-steps li {
  counter-increment: qris-step;
  position: relative;
  padding-left: 32px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.qris-steps li::before {
  content: counter(qris-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-brand-blue);
}

/* Beri ruang napas sebelum tombol aksi di dalam modal QRIS + rata tengah */
#qrisStepPay .modal__action,
#qrisStepDone .modal__action {
  margin-top: var(--spacing-32);
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* Kotak pesan verifikasi */
.qris-msg-box {
  margin: var(--spacing-20) 0;
  padding: var(--spacing-16);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-core);
  background: var(--color-surface-2);
  position: relative;
}

.qris-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: pre-line;
}

.qris-msg-fallback {
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: var(--spacing-12);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-inputs);
  resize: none;
  outline: none;
}

/* Aksi verifikasi */
.qris-actions {
  display: grid;
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
}

.qris-actions__copy {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qris-actions__copy i {
  font-size: 16px;
}

.qris-actions__tg {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qris-actions__tg i {
  font-size: 18px;
}

/* Tautan kembali */
.modal__back-link {
  margin-top: var(--spacing-16);
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-text-dim);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--speed-hover) var(--ease-out);
}

.modal__back-link:hover {
  color: var(--color-text-muted);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 480px);
  padding: 14px 22px;
  border-radius: var(--radius-buttons);
  background: rgba(16, 41, 79, 0.92);
  border: 1px solid var(--color-line-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lift);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--speed-med) var(--ease-out), opacity var(--speed-med) var(--ease-out);
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast i {
  font-size: 20px;
  color: var(--color-brand-blue-soft);
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-line);
  background: rgba(5, 18, 36, 0.6);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--spacing-40);
  padding-block: var(--spacing-64);
}

.footer__brand p {
  color: var(--color-text-dim);
  font-size: 14px;
  max-width: 34ch;
  margin: var(--spacing-16) 0 0;
}

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--spacing-20);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__col a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 15px;
  padding-block: 6px;
  transition:
    color var(--speed-hover) var(--ease-out),
    text-decoration-color var(--speed-hover) var(--ease-out);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--color-brand-blue-soft);
  text-decoration-color: currentColor;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  padding-block: var(--spacing-24);
  border-top: 1px solid var(--color-line);
}

.footer__bottom p {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 14px;
}

.footer__legal {
  color: var(--color-text-dim);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--speed-hover) var(--ease-out);
}

.footer__legal:hover {
  color: var(--color-brand-blue-soft);
}

/* ---------- Reveal on scroll ----------
   Animasi hanya hidup jika JS menambahkan kelas has-js di <html>. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease-out) var(--reveal-delay, 0ms);
}

.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsif halaman ---------- */
@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split__media {
    order: -1;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--spacing-20);
  }

  .section__head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
  }

  .section {
    padding-block: var(--spacing-64);
  }

  .preset-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-card__badge {
    position: static;
    margin-bottom: var(--spacing-16);
    align-self: flex-start;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }

  .cta-panel__title {
    font-size: clamp(26px, 7vw, 34px);
  }

  .activate__row {
    flex-direction: column;
  }

  .activate__row .btn {
    width: 100%;
  }

  .faq__item summary {
    padding: 18px 20px;
    font-size: 16px;
  }

  .faq__body-inner p {
    padding: 0 20px 20px;
  }

  .steps__item {
    grid-template-columns: 60px 1fr;
    gap: var(--spacing-16);
  }

  .steps__num {
    font-size: 24px;
  }
}

@media (max-width: 900px) {
  .preset-card--wide {
    grid-column: span 1;
  }

  .preset-card__thumb {
    aspect-ratio: 16 / 8.5;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sky video {
    display: none;
  }

  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }

  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .planet,
  .planet:hover,
  .planet:active,
  .col.cta a:hover {
    transform: none;
    transition: none;
  }

  .burger span {
    transition: none;
  }

  .loader__stars,
  .loader__planet,
  .loader__planet-core,
  .loader__ring i {
    animation: none;
  }
}

/* ---------- Halaman privasi ---------- */
.privacy {
  padding-top: clamp(120px, 14vw, 160px);
  padding-bottom: var(--spacing-64);
}

.privacy__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-brand-blue-soft);
  text-decoration: none;
  margin-bottom: var(--spacing-32);
  transition: color var(--speed-fast) var(--ease-out);
}

.navrow .privacy__back {
  margin-bottom: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-buttons);
}

.privacy__back:hover {
  color: var(--color-text);
}

.privacy__back i {
  font-size: 18px;
}

.privacy__article {
  max-width: 720px;
  margin-inline: auto;
}

.privacy__article h1,
.privacy__article h2 {
  text-align: center;
}

.privacy__article h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--spacing-32);
}

.privacy__article h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-16);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.privacy__article p,
.privacy__article li {
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-16);
}

.privacy__article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-16) 0;
  display: grid;
  gap: var(--spacing-12);
}

.privacy__article li {
  position: relative;
  padding-left: 22px;
  text-align: left;
}

.privacy__article li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand-blue);
}

.privacy__article a {
  color: var(--color-brand-blue-soft);
  text-decoration: underline;
  text-decoration-color: rgba(167, 236, 244, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--speed-fast) var(--ease-out);
}

.privacy__article a:hover {
  text-decoration-color: var(--color-brand-blue-soft);
}

.privacy__updated {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

/* ---------- Auth: chip user di navbar ---------- */
.navbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-semi);
  text-decoration: none;
  transition: color var(--speed-hover) var(--ease-out), border-color var(--speed-hover) var(--ease-out);
}

.nav-login:hover {
  color: var(--color-brand-blue-soft);
  border-color: var(--color-brand-blue-soft);
}

.nav-login[hidden] {
  display: none;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-line-strong);
  background: rgba(13, 34, 71, 0.6);
  cursor: pointer;
  color: var(--color-text);
  transition: border-color var(--speed-hover) var(--ease-out);
}

.user-chip[hidden] {
  display: none;
}

.user-chip:hover {
  border-color: var(--color-brand-blue-soft);
}

.user-chip__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-line-strong);
}

.user-chip__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.user-chip__name {
  font-size: 13px;
  font-weight: var(--weight-semi);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-brand-blue-soft);
  text-transform: uppercase;
}

.user-chip__out {
  font-size: 18px;
  color: var(--color-text-dim);
  padding: 6px;
  border-radius: 50%;
  transition: color var(--speed-hover) var(--ease-out), background-color var(--speed-hover) var(--ease-out);
}

.user-chip__out:hover {
  color: var(--color-danger);
  background: rgba(255, 143, 143, 0.12);
}

/* ---------- Halaman login ---------- */
.page--auth {
  min-height: 100vh;
  min-height: 100dvh;
}

.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 12vh, 120px);
}

.auth::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(121, 220, 232, 0.08), transparent 60%),
    radial-gradient(50% 60% at 90% 80%, rgba(20, 60, 100, 0.3), transparent 60%);
  pointer-events: none;
}

.auth__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* Tombol kembali ke halaman utama:
   elemen alur normal di baris grid penuh, di atas kedua kartu.
   (Bukan absolute supaya tidak ketutupan kartu yang di-center.) */
.auth__back {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-line-strong);
  background: rgba(10, 29, 61, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--speed-hover) var(--ease-out), border-color var(--speed-hover) var(--ease-out), transform var(--speed-hover) var(--ease-out);
}

.auth__back:hover {
  color: var(--color-brand-blue-soft);
  border-color: var(--color-brand-blue-soft);
  transform: translateX(-2px);
}

.auth__back i {
  font-size: 18px;
}

/* Kartu kiri: nilai layanan */
.auth__panel {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-cards);
  background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.auth__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 90% 0%, var(--color-brand-blue-glow), transparent 60%);
  pointer-events: none;
}

.auth__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-brand-blue-soft);
  margin: var(--spacing-24) 0 0;
}

.auth__title {
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.auth__sub {
  margin: var(--spacing-16) 0 0;
  color: var(--color-text-muted);
  max-width: 46ch;
  line-height: 1.7;
}

.auth__roles {
  list-style: none;
  margin: var(--spacing-32) 0 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-20);
}

.auth__role {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.auth__role-orb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset -6px -8px 14px rgba(2, 8, 20, 0.6);
}

.auth__role-orb--free {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.3), transparent 44%), radial-gradient(circle at 50% 50%, #7fd8c9 0%, #1e6f68 60%, #06283c 100%);
}

.auth__role-orb--pro {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.32), transparent 44%), radial-gradient(circle at 50% 50%, #8fe6f0 0%, #2f86c9 55%, #0a2a4a 100%);
}

.auth__role-orb--admin {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.35), transparent 44%), radial-gradient(circle at 50% 50%, #c9c8ff 0%, #6a5acd 55%, #1c1238 100%);
}

.auth__role h3 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
}

.auth__role p {
  margin: var(--spacing-4) 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Kartu kanan: form login Google */
.auth__card {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-cards);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  text-align: center;
  box-shadow: var(--shadow-panel);
}

.auth__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
}

.auth__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--spacing-16);
}

.auth__card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  line-height: var(--leading-heading);
}

.auth__card-sub {
  margin: var(--spacing-12) 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 40ch;
  margin-inline: auto;
}

/* Tombol Google.
   GIS merender tombolnya sendiri di dalam iframe, dan opsi `theme` hanya
   menerima outline / filled_blue / filled_black / outline_dark — tidak ada
   varian biru gelap yang cocok dengan tema situs. Karena itu tombol tampilan
   dibuat sendiri di login.html, lalu tombol asli Google ditumpuk transparan
   di atasnya hanya untuk menangkap klik. */
.auth__google {
  position: relative;
  margin: var(--spacing-32) 0 0;
  max-width: 100%;
}

.auth__google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: var(--radius-buttons);
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, #ffffff 0%, #d8ecfe 9%, #dceefe 72%, #f4f9ff 100%);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.01em;
  box-shadow: 0 3px 14px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
  cursor: pointer;
  /* Klik diteruskan ke tombol asli Google di lapisan atas. */
  pointer-events: none;
  transition: border-color var(--speed-hover) var(--ease-fluid),
    background-color var(--speed-hover) var(--ease-fluid),
    box-shadow var(--speed-hover) var(--ease-fluid),
    transform var(--speed-hover) var(--ease-fluid);
}

.auth__google-logo {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* Lapisan tombol asli Google: tak terlihat, tapi menutupi seluruh tombol
   tampilan supaya klik dan fokus tetap ditangani Google. */
.auth__google-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-buttons);
  opacity: 0;
  /* Slot menutupi tombol tampilan, jadi kursor pointer harus dipasang di
     sini: lapisan ini yang menerima klik, bukan tombol tampilan. */
  cursor: pointer;
}

/* GIS menulis lebar/tinggi iframe sebagai inline style; paksa agar mengisi
   seluruh lapisan supaya area klik sepadan dengan tombol tampilan. */
.auth__google-slot iframe {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Fallback: bila GIS gagal menaruh iframe (origin belum terdaftar, script
   diblokir, Client ID salah), slot tetap kosong sehingga tombol tampilan
   yang pointer-events: none menjadi tidak bisa diklik sama sekali. Saat itu
   terjadi, js/auth.js menandai pembungkus dengan .is-fallback dan tombol
   diaktifkan kembali sebagai pemicu prompt Google. */
.auth__google.is-fallback .auth__google-btn {
  pointer-events: auto;
}

.auth__google:hover .auth__google-btn,
.auth__google:focus-within .auth__google-btn {
  border-color: var(--color-brand-blue);
  box-shadow: 0 8px 26px rgba(121, 220, 232, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

/* Guard reduced-motion ditaruh setelah aturan di atas supaya menang urutan. */
@media (prefers-reduced-motion: reduce) {
  .auth__google-btn,
  .auth__google:hover .auth__google-btn,
  .auth__google:focus-within .auth__google-btn {
    transform: none;
    transition: none;
  }
}

/* Modal QRIS responsif untuk layar sempit */
@media (max-width: 480px) {
  .modal--qris .modal__panel--qris {
    padding: var(--spacing-20);
    max-height: 92dvh;
  }

  /* Kotak QR mengecil */
  .qris-card {
    padding: var(--spacing-16) var(--spacing-12);
  }

  .qris-card__img-wrap {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
  }

  .qris-row__label {
    white-space: normal;
  }

  .qris-open-link {
    margin-top: var(--spacing-8);
  }

  .qris-steps li {
    padding-left: 28px;
  }

  .qris-actions {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .qris-actions__copy,
  .qris-actions__tg {
    width: 100%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-host {
  position: fixed;
  width: 200px;
  height: 200px;
  overflow: hidden;
  clip-path: inset(100%);
  pointer-events: none;
}

.music-status {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + 136px);
  z-index: 91;
  width: min(280px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-input, 12px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.5;
}

.chat-fab.music-fab {
  bottom: calc(clamp(16px, 3vw, 28px) + 68px);
}

.music-status[hidden] { display: none; }

.page--user #panel { padding-top: 130px; }
.page--user .panel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* ---------- Aktivasi: demo magic link + CTA panel pengguna ---------- */
/* Panel rata tengah: eyebrow mengapit garis di kiri-kanan agar seimbang. */
.cta-panel .eyebrow {
  justify-content: center;
}
.cta-panel .eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--color-brand-blue);
}

/* Demo magic link: wadah kartu tersendiri, tanpa marker segitiga bawaan.
   Padding kartu hanya di sumbu horizontal; padding atas/bawah dari body
   supaya animasi 0fr -> 1fr tidak menahan sisa tinggi. */
.activation-demo {
  max-width: 560px;
  margin: var(--spacing-24) auto 0;
  padding: var(--spacing-16) var(--spacing-20);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-cards);
  background: var(--color-surface);
  text-align: left;
}
.activation-demo.is-open,
.activation-demo[open] { padding-bottom: var(--spacing-16); }
.activation-demo summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-brand-blue-soft);
}
.activation-demo summary::-webkit-details-marker { display: none; }
.activation-demo summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--speed-med) var(--ease-out);
}
.activation-demo.is-open summary::after { transform: rotate(225deg); }
.activation-demo summary:hover { color: var(--color-text); }
/* Buka/tutup smooth: pola akordeon FAQ (grid-template-rows 0fr -> 1fr).
   details[open] hanya fallback tanpa JS: konten langsung tampil. */
.activation-demo__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--speed-med) var(--ease-out);
}
.activation-demo.is-open .activation-demo__wrap { grid-template-rows: 1fr; }
.activation-demo__body {
  overflow: hidden;
  min-height: 0;
}
.activation-demo__body > :first-child { margin-top: var(--spacing-16); }
.activation-demo.is-open .activation-demo__body > :last-child { margin-bottom: var(--spacing-16); }
.activation-demo__body > * {
  opacity: 0;
  transition: opacity var(--speed-med) var(--ease-out) 60ms;
}
.activation-demo.is-open .activation-demo__body > * { opacity: 1; }
.activation-demo .form-label { margin-bottom: var(--spacing-8); }
.activation-demo .input { width: 100%; margin: 0 0 var(--spacing-12); }
.activation-demo p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }

/* CTA panel: tombol dan catatan ikut rata tengah dengan ritme vertikal. */
.cta-panel .activate__row {
  justify-content: center;
  margin-top: var(--spacing-24);
}
/* Target tautan nav #demo: jarak agar tidak tertutup navbar fixed. */
.cta-panel[id="demo"] { scroll-margin-top: 96px; }
.cta-panel .activate__note + .activate__note {
  margin-top: var(--spacing-8);
}

@media (max-width: 767px) {
  .page--user #panel { padding-top: 110px; }
  .cta-panel .activate__row .btn { width: 100%; }
  .activation-demo { padding: var(--spacing-16); }
  /* Catatan dua baris di HP: rata kiri agar ikon dan teks rapi. */
  .cta-panel .activate__note {
    justify-content: flex-start;
    text-align: left;
  }
}

.music-fab span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.chat-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-brand-blue-soft);
  font-size: 26px;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--speed-hover) var(--ease-out),
    border-color var(--speed-hover) var(--ease-out),
    box-shadow var(--speed-hover) var(--ease-out);
}

.chat-fab:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand-blue-soft);
  box-shadow: 0 12px 32px rgba(121, 220, 232, 0.28);
}

.chat-fab__dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  box-shadow: 0 0 0 3px var(--color-surface-3);
  transition: opacity var(--speed-hover) var(--ease-out);
}

.chat-fab.is-open .chat-fab__dot {
  opacity: 0;
}

.chat-panel {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + 68px);
  z-index: 91;
  width: min(92vw, 380px);
  max-height: min(74vh, 560px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  background: rgba(7, 21, 48, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(2, 8, 20, 0.6);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity var(--speed-med) var(--ease-out),
    transform var(--speed-med) var(--ease-out);
}

.chat-panel.is-open {
  opacity: 1;
  transform: none;
}

/* display:flex di atas menimpa [hidden] bawaan browser; kembalikan. */
.chat-panel[hidden] {
  display: none;
}

.chat-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
}

.chat-panel__avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-brand-blue-tint);
  color: var(--color-brand-blue-soft);
  font-size: 19px;
}

.chat-panel__ident {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.chat-panel__ident strong {
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--color-text);
}

.chat-panel__ident small {
  font-size: 12px;
  color: var(--color-text-dim);
}

.chat-panel__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: color var(--speed-hover) var(--ease-out), background-color var(--speed-hover) var(--ease-out);
}

.chat-panel__close:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.chat-log {
  flex: 1;
  min-height: 180px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

.chat-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--radius-core);
  font-size: 14px;
  line-height: 1.55;
}

.chat-msg p {
  margin: 0;
}

.chat-msg--bot {
  align-self: flex-start;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  color: var(--color-text-muted);
  border-bottom-left-radius: 6px;
}

.chat-msg--user {
  align-self: flex-end;
  background: var(--color-brand-blue-tint);
  border: 1px solid var(--color-brand-blue-tint);
  color: var(--color-text);
  border-bottom-right-radius: 6px;
}

.chat-msg--typing .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--color-text-dim);
  animation: chat-blink 1.2s infinite ease-in-out;
}

.chat-msg--typing .dot:nth-child(2) { animation-delay: 0.18s; }
.chat-msg--typing .dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.chat-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chat-hint {
  padding: 8px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-buttons);
  background: none;
  color: var(--color-brand-blue-soft);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    color var(--speed-hover) var(--ease-out),
    border-color var(--speed-hover) var(--ease-out),
    background-color var(--speed-hover) var(--ease-out);
}

.chat-hint:hover {
  color: var(--color-text);
  border-color: var(--color-brand-blue-soft);
  background: var(--color-surface-2);
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 8px;
  border-top: 1px solid var(--color-line);
}

.chat-input {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-inputs);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color var(--speed-hover) var(--ease-out);
}

.chat-input::placeholder {
  color: var(--color-text-dim);
}

.chat-input:focus-visible {
  border-color: var(--color-brand-blue-soft);
}

.chat-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #d8ecfe 9%, #dceefe 72%, #f4f9ff 100%);
  color: var(--color-bg);
  font-size: 19px;
  cursor: pointer;
  transition: transform var(--speed-hover) var(--ease-out), box-shadow var(--speed-hover) var(--ease-out);
}

.chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(121, 220, 232, 0.35);
}

.chat-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 11px;
  color: var(--color-text-dim);
}

@media (max-width: 500px) {
  .chat-panel {
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 78vh;
  }
}

.auth__error {
  margin: var(--spacing-20) 0 0;
  font-size: 14px;
  color: var(--color-danger);
}

.auth__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--spacing-32) 0 0;
  color: var(--color-text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth__sep span {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.auth__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--spacing-24) 0 0;
  font-size: 13px;
  color: var(--color-text-dim);
  text-align: left;
  line-height: 1.6;
}

.auth__note i {
  font-size: 16px;
  color: var(--color-brand-blue-soft);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Responsive halaman login */
@media (max-width: 900px) {
  .auth__inner {
    grid-template-columns: 1fr;
  }

  .auth__panel {
    order: 2;
  }

  .auth__card {
    order: 1;
  }
}

@media (max-width: 640px) {
  .auth {
    padding-block: var(--spacing-64);
  }
}

/* Tombol "Kembali ke Beranda" di layar kecil: rapatkan agar tidak
   mendominasi layar dan tetap sejajar kiri. */
@media (max-width: 640px) {
  .auth__back,
  .privacy__back {
    font-size: 13px;
    padding: 7px 12px;
    gap: 6px;
    margin-bottom: var(--spacing-20);
  }

  .auth__back i,
  .privacy__back i {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .auth__back,
  .privacy__back {
    font-size: 12px;
    padding: 6px 10px;
  }
}