/* ==========================================================================
   DESIGN TOKENS — satu-satunya tempat untuk mengubah warna, font, dan ukuran.

   TEMA OTOMATIS: mengikuti pengaturan perangkat (Dark Mode on/off).
     • :root                               → tema TERANG (default)
     • @media (prefers-color-scheme: dark) → tema GELAP
   Untuk uji manual tanpa mengubah setelan perangkat, beri atribut pada <html>:
     <html data-theme="light">  atau  <html data-theme="dark">
   ========================================================================== */

/* ---------- Token yang sama di kedua tema ---------- */
:root {
  color-scheme: light dark;

  --sky: #38b6ff;           /* biru langit */
  --navy: #071f5c;          /* biru paling gelap */
  --on-blue: #fff;          /* teks di atas biru */

  /* Tipografi */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --wrap: 1240px;
  --gutter: 4vw;
  --radius: 30px;
  --radius-sm: 20px;
  --header-h: 84px;
  --section-y: clamp(70px, 10vw, 130px);

  /* Efek kaca */
  --glass-blur: blur(22px) saturate(170%);

  /* Posisi cahaya mengikuti kursor (diatur oleh js/glow.js) */
  --mx: 70%;
  --my: 20%;
}

/* ==========================================================================
   TEMA TERANG (biru langit + biru gelap)
   ========================================================================== */
:root {
  --bg: #85bcf2;
  --blue: #1f6bff;
  --blue-deep: #0b2a7a;     /* biru gelap identitas */
  --ice: #1a74d8;           /* aksen label / teks kecil */
  --text: #0a1f4d;
  --text-soft: #3d5280;
  --muted: #6a7ba0;
  --line: rgba(20, 70, 170, .16);

  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .46));
  --glass-shadow: 0 24px 60px -26px rgba(20, 60, 160, .38), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4);
  --glass-fill: rgba(255, 255, 255, .6);          /* isi kaca untuk chip / tombol kecil */

  --mesh-bg:
    radial-gradient(38% 38% at var(--mx) var(--my), rgba(56, 182, 255, .38), transparent 70%),
    radial-gradient(35% 35% at 8% 88%, rgba(31, 107, 255, .2), transparent 70%),
    radial-gradient(30% 30% at 96% 78%, rgba(120, 200, 255, .3), transparent 70%),
    linear-gradient(180deg, #f6faff, var(--bg) 40%, #e3f0ff);

  --grad: linear-gradient(100deg, var(--blue-deep) 5%, var(--blue) 55%, var(--sky));
  --btn-shadow: 0 10px 28px -8px rgba(31, 107, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
  --btn-shadow-hover: 0 16px 38px -8px rgba(31, 107, 255, .85);
  --btn-ghost-hover: #fff;
  --arrow-shadow: 0 10px 26px -6px rgba(31, 107, 255, .7);

  /* header & menu */
  --logo-filter: brightness(.78) contrast(1.12);
  --overlay-bg: rgba(238, 246, 255, .9);
  --menu-link: #8ea3cc;
  --menu-link-hover: var(--blue-deep);

  /* hero */
  --hero-img-filter: grayscale(.35) contrast(1.02) brightness(1.08) saturate(.9);
  --hero-tint: var(--sky); --hero-tint-blend: soft-light; --hero-tint-opacity: .6;
  --hero-fade:
    radial-gradient(45% 55% at 100% 22%, rgba(56, 182, 255, .35), transparent 70%),
    linear-gradient(90deg, var(--bg) 4%, rgba(238, 246, 255, .8) 40%, rgba(238, 246, 255, .12) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%),
    linear-gradient(180deg, rgba(246, 250, 255, .85) 0%, transparent 25%);
  --hero-outline: var(--blue-deep);
  --hero-accent: linear-gradient(95deg, var(--sky), var(--blue) 55%, var(--blue-deep));
  --hero-text: var(--text-soft);

  /* foto (overlay gelap agar teks putih terbaca) */
  --shade: 7, 31, 92;
  --fig-tint: rgba(56, 182, 255, .18);

  /* komponen kecil */
  --pivot-bg: rgba(56, 182, 255, .22); --pivot-border: rgba(31, 107, 255, .35); --pivot-text: var(--blue-deep);
  --hq-bg: var(--blue-deep); --hq-text: #fff; --hq-hover: var(--blue);
  --hover-border: rgba(31, 107, 255, .5);
  --pill-hover-text: var(--blue-deep);
  --trail-blend: multiply;
  --trail: #3d8bff;          /* warna jejak cahaya kursor (js/glow.js) */

  /* peta Area Coverage */
  --map-line: rgba(11, 42, 122, .5);
  --pin: #1f6bff;            /* semua titik (idle) */
  --pin-active: #0b2a7a;     /* titik terpilih: biru tua */

  /* panel biru gelap: band "Keunggulan" + kartu kontak */
  --band-bg:
    radial-gradient(50% 45% at 85% 0%, rgba(56, 182, 255, .35), transparent 70%),
    radial-gradient(45% 40% at 5% 100%, rgba(31, 107, 255, .45), transparent 70%),
    linear-gradient(180deg, var(--navy), var(--blue-deep) 70%, #0f3a9e);
  --contact-bg: linear-gradient(135deg, var(--navy), var(--blue-deep) 55%, #1c5fd6);
  --contact-border: rgba(255, 255, 255, .18);
  --contact-glow: rgba(56, 182, 255, .55);
  /* nilai teks/kaca di dalam panel gelap (.on-dark) */
  --p-text: #f1f6ff; --p-soft: #c4d4f7; --p-muted: #9db3e0; --p-line: rgba(255, 255, 255, .2); --p-ice: #8fd3ff;
  --p-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  --p-glass-shadow: 0 30px 80px -30px rgba(0, 10, 50, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  --p-glass-fill: rgba(255, 255, 255, .1);
  --p-grad: linear-gradient(100deg, #fff 10%, #a6defd 60%, var(--sky));
  --p-btn-bg: #fff; --p-btn-text: var(--blue-deep); --p-btn-shadow: 0 12px 30px -10px rgba(0, 10, 50, .6);
  --p-btn-ghost-hover: rgba(255, 255, 255, .2);
}

/* ==========================================================================
   TEMA GELAP (hitam + biru) — mengikuti Dark Mode perangkat
   (blok yang sama ditulis dua kali: untuk media query dan untuk data-theme="dark")
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #02030a;
    --blue: #2f6bff;
    --blue-deep: #1747c9;
    --ice: #9ed8ff;
    --text: #f1f5ff;
    --text-soft: #aab6d3;
    --muted: #8996b5;
    --line: rgba(255, 255, 255, .14);

    --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    --glass-shadow: 0 30px 80px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
    --glass-fill: rgba(255, 255, 255, .06);
    --glass-blur: blur(26px) saturate(180%);

    --mesh-bg:
      radial-gradient(40% 40% at var(--mx) var(--my), rgba(47, 107, 255, .5), transparent 70%),
      radial-gradient(35% 35% at 10% 90%, rgba(20, 60, 200, .35), transparent 70%),
      radial-gradient(30% 30% at 95% 80%, rgba(158, 216, 255, .16), transparent 70%),
      var(--bg);

    --grad: linear-gradient(100deg, #fff 10%, var(--ice) 55%, var(--blue));
    --btn-shadow: 0 8px 30px -6px rgba(47, 107, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
    --btn-shadow-hover: 0 14px 40px -6px rgba(47, 107, 255, 1);
    --btn-ghost-hover: rgba(255, 255, 255, .12);
    --arrow-shadow: 0 0 30px rgba(47, 107, 255, .7);

    --logo-filter: brightness(1.9) saturate(1.25);
    --overlay-bg: rgba(2, 3, 10, .86);
    --menu-link: var(--muted);
    --menu-link-hover: #fff;

    --hero-img-filter: grayscale(.55) contrast(1.1) brightness(.62);
    --hero-tint: var(--blue); --hero-tint-blend: color; --hero-tint-opacity: .55;
    --hero-fade:
      radial-gradient(45% 55% at 100% 22%, rgba(38, 80, 220, .45), transparent 70%),
      linear-gradient(90deg, var(--bg) 4%, rgba(2, 3, 10, .55) 45%, rgba(2, 3, 10, .1) 100%),
      linear-gradient(0deg, var(--bg) 0%, transparent 38%),
      linear-gradient(180deg, rgba(2, 3, 10, .7) 0%, transparent 25%);
    --hero-outline: rgba(255, 255, 255, .6);
    --hero-accent: linear-gradient(95deg, var(--ice), var(--blue) 70%);
    --hero-text: #b9c5e0;

    --shade: 2, 3, 10;
    --fig-tint: rgba(47, 107, 255, .25);

    --pivot-bg: rgba(47, 107, 255, .35); --pivot-border: rgba(158, 216, 255, .4); --pivot-text: var(--text);
    --hq-bg: #fff; --hq-text: var(--bg); --hq-hover: var(--ice);
    --hover-border: rgba(158, 216, 255, .5);
    --pill-hover-text: #fff;
    --trail-blend: screen;
    --trail: #3d7bff;

    /* peta Area Coverage */
    --map-line: rgba(158, 216, 255, .5);
    --pin: #4aa8ff;
    --pin-active: #2f6bff;

    /* di tema gelap tidak ada band biru: section & kartu kontak memakai kaca hitam */
    --band-bg: transparent;
    --contact-bg: var(--glass-bg);
    --contact-border: var(--line);
    --contact-glow: rgba(47, 107, 255, .6);
    --p-text: var(--text); --p-soft: var(--text-soft); --p-muted: var(--muted); --p-line: var(--line); --p-ice: var(--ice);
    --p-glass-bg: var(--glass-bg); --p-glass-shadow: var(--glass-shadow); --p-glass-fill: var(--glass-fill);
    --p-grad: var(--grad);
    --p-btn-bg: linear-gradient(135deg, var(--blue), var(--blue-deep)); --p-btn-text: #fff; --p-btn-shadow: var(--btn-shadow);
    --p-btn-ghost-hover: var(--btn-ghost-hover);
  }
}

:root[data-theme="dark"] {
  --bg: #02030a;
  --blue: #2f6bff;
  --blue-deep: #1747c9;
  --ice: #9ed8ff;
  --text: #f1f5ff;
  --text-soft: #aab6d3;
  --muted: #8996b5;
  --line: rgba(255, 255, 255, .14);

  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  --glass-shadow: 0 30px 80px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --glass-fill: rgba(255, 255, 255, .06);
  --glass-blur: blur(26px) saturate(180%);

  --mesh-bg:
    radial-gradient(40% 40% at var(--mx) var(--my), rgba(47, 107, 255, .5), transparent 70%),
    radial-gradient(35% 35% at 10% 90%, rgba(20, 60, 200, .35), transparent 70%),
    radial-gradient(30% 30% at 95% 80%, rgba(158, 216, 255, .16), transparent 70%),
    var(--bg);

  --grad: linear-gradient(100deg, #fff 10%, var(--ice) 55%, var(--blue));
  --btn-shadow: 0 8px 30px -6px rgba(47, 107, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
  --btn-shadow-hover: 0 14px 40px -6px rgba(47, 107, 255, 1);
  --btn-ghost-hover: rgba(255, 255, 255, .12);
  --arrow-shadow: 0 0 30px rgba(47, 107, 255, .7);

  --logo-filter: brightness(1.9) saturate(1.25);
  --overlay-bg: rgba(2, 3, 10, .86);
  --menu-link: var(--muted);
  --menu-link-hover: #fff;

  --hero-img-filter: grayscale(.55) contrast(1.1) brightness(.62);
  --hero-tint: var(--blue); --hero-tint-blend: color; --hero-tint-opacity: .55;
  --hero-fade:
    radial-gradient(45% 55% at 100% 22%, rgba(38, 80, 220, .45), transparent 70%),
    linear-gradient(90deg, var(--bg) 4%, rgba(2, 3, 10, .55) 45%, rgba(2, 3, 10, .1) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%),
    linear-gradient(180deg, rgba(2, 3, 10, .7) 0%, transparent 25%);
  --hero-outline: rgba(255, 255, 255, .6);
  --hero-accent: linear-gradient(95deg, var(--ice), var(--blue) 70%);
  --hero-text: #b9c5e0;

  --shade: 2, 3, 10;
  --fig-tint: rgba(47, 107, 255, .25);

  --pivot-bg: rgba(47, 107, 255, .35); --pivot-border: rgba(158, 216, 255, .4); --pivot-text: var(--text);
  --hq-bg: #fff; --hq-text: var(--bg); --hq-hover: var(--ice);
  --hover-border: rgba(158, 216, 255, .5);
  --pill-hover-text: #fff;
    --trail-blend: screen;
    --trail: #3d7bff;

    /* peta Area Coverage */
    --map-line: rgba(158, 216, 255, .5);
    --pin: #4aa8ff;
    --pin-active: #2f6bff;

  --band-bg: transparent;
  --contact-bg: var(--glass-bg);
  --contact-border: var(--line);
  --contact-glow: rgba(47, 107, 255, .6);
  --p-text: var(--text); --p-soft: var(--text-soft); --p-muted: var(--muted); --p-line: var(--line); --p-ice: var(--ice);
  --p-glass-bg: var(--glass-bg); --p-glass-shadow: var(--glass-shadow); --p-glass-fill: var(--glass-fill);
  --p-grad: var(--grad);
  --p-btn-bg: linear-gradient(135deg, var(--blue), var(--blue-deep)); --p-btn-text: #fff; --p-btn-shadow: var(--btn-shadow);
  --p-btn-ghost-hover: var(--btn-ghost-hover);
}