/*
 * AKSI — Premium Bright Visual System (token reka bentuk).
 * Satu sumber warna, tipografi, radius, bayang dan gerakan untuk landing page DAN aplikasi
 * (portal, login, daftar, dashboard, email). Jangan hardcode warna dalam komponen.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Permukaan — pearl / ivory / blue-white */
  --aksi-bg: #f6f7fb;
  --aksi-bg-2: #eef2fa;
  --aksi-pearl: #fbfbfd;
  --aksi-surface: #ffffff;
  --aksi-text: #0f1633;
  --aksi-text-2: #2a3358;
  --aksi-muted: #5b6484;
  --aksi-line: rgba(28, 42, 92, 0.1);

  /* Keluarga warna AKSI (saturasi konsisten) */
  --aksi-blue: #3b7bff;
  --aksi-blue-deep: #2152de;
  --aksi-aqua: #20bfc7;
  --aksi-violet: #8a6cff;
  --aksi-violet-deep: #6247e6;
  --aksi-coral: #ff8a6b;
  --aksi-gold: #d8b46a;
  --aksi-green: #1db287;

  /* Warna fungsi */
  --aksi-ok: #0f8a63;
  --aksi-danger: #c8372d;
  --aksi-focus: #ffb547;

  /* Gradient */
  --aksi-gradient-primary: linear-gradient(115deg, var(--aksi-blue-deep) 0%, var(--aksi-violet-deep) 100%);
  --aksi-gradient-spectrum: linear-gradient(115deg, #3b7bff 0%, #20bfc7 30%, #8a6cff 62%, #ff8a6b 100%);
  --aksi-gradient-uniform: linear-gradient(135deg, #2f5bea 0%, #20bfc7 100%);
  --aksi-gradient-club: linear-gradient(135deg, #8a6cff 0%, #f29ac6 100%);
  --aksi-gradient-sport: linear-gradient(135deg, #ff8a6b 0%, #ffc56e 100%);
  --aksi-gradient-house: linear-gradient(135deg, #1db287 0%, #3b7bff 100%);
  --aksi-gradient-gold: linear-gradient(135deg, #f3dca6 0%, #d8b46a 100%);
  /* Tona gelap premium (bab penutup, footer, topbar aplikasi) */
  --aksi-deep: #0b1233;
  --aksi-deep-2: #161b55;
  --aksi-deep-3: #2a1c6b;
  --aksi-gradient-deep:
    radial-gradient(1100px 760px at 18% 8%, rgba(59, 123, 255, 0.38), transparent 60%),
    radial-gradient(900px 700px at 88% 30%, rgba(138, 108, 255, 0.36), transparent 60%),
    radial-gradient(900px 640px at 50% 105%, rgba(32, 191, 199, 0.26), transparent 62%),
    linear-gradient(160deg, #0b1233 0%, #161b55 48%, #2a1c6b 100%);
  --aksi-gradient-deep-bar: linear-gradient(115deg, #0b1233 0%, #1c2372 55%, #3a2a8f 100%);
  --aksi-gradient-sky:
    radial-gradient(1200px 700px at 12% -10%, rgba(59, 123, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 95% 8%, rgba(138, 108, 255, 0.14), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(32, 191, 199, 0.12), transparent 60%),
    linear-gradient(180deg, #fbfbfd 0%, #f2f5fb 100%);

  /* Kaca / translucent */
  --aksi-glass: rgba(255, 255, 255, 0.64);
  --aksi-glass-strong: rgba(255, 255, 255, 0.82);
  --aksi-glass-blur: blur(18px) saturate(1.5);
  --aksi-border: rgba(255, 255, 255, 0.75);
  --aksi-border-soft: rgba(28, 42, 92, 0.08);

  /* Bayang lembut berlapis */
  --aksi-shadow-soft: 0 1px 2px rgba(20, 30, 70, 0.05), 0 10px 30px -12px rgba(34, 56, 140, 0.18);
  --aksi-shadow-lift: 0 2px 6px rgba(20, 30, 70, 0.06), 0 28px 60px -24px rgba(34, 56, 140, 0.32);
  --aksi-shadow-glow: 0 18px 50px -16px rgba(98, 71, 230, 0.45);

  /* Tipografi */
  --aksi-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --aksi-fs-display: clamp(2.6rem, 1.2rem + 6vw, 6.2rem);
  --aksi-fs-h1: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --aksi-fs-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  --aksi-fs-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --aksi-tracking-tight: -0.035em;

  /* Bentuk */
  --aksi-radius-sm: 10px;
  --aksi-radius-md: 16px;
  --aksi-radius-lg: 24px;
  --aksi-radius-xl: 36px;
  --aksi-radius-pill: 999px;

  /* Gerakan */
  --aksi-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --aksi-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --aksi-dur-fast: 180ms;
  --aksi-dur: 420ms;
  --aksi-dur-slow: 900ms;

  color-scheme: light;
}

/* Peralihan antara halaman (landing → daftar): logo AKSI "mengecil" ke borang. */
@view-transition {
  navigation: auto;
}
.aksi-mark {
  view-transition-name: aksi-mark;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Komponen asas yang dikongsi */
.aksi-btn {
  --btn-bg: var(--aksi-gradient-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.8em 1.5em;
  border: 0;
  border-radius: var(--aksi-radius-pill);
  background: var(--btn-bg);
  color: #fff;
  font: 700 1rem/1.1 var(--aksi-font);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--aksi-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--aksi-dur-fast) var(--aksi-ease), box-shadow var(--aksi-dur) var(--aksi-ease);
}
.aksi-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px -14px rgba(98, 71, 230, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.aksi-btn:active {
  transform: translateY(0);
}
.aksi-btn--ghost {
  background: var(--aksi-glass-strong);
  color: var(--aksi-text);
  box-shadow: var(--aksi-shadow-soft), inset 0 0 0 1px var(--aksi-border-soft);
}
.aksi-glass {
  background: var(--aksi-glass);
  -webkit-backdrop-filter: var(--aksi-glass-blur);
  backdrop-filter: var(--aksi-glass-blur);
  border: 1px solid var(--aksi-border);
  box-shadow: var(--aksi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.aksi-gradient-text {
  background: var(--aksi-gradient-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}