/* ============================================================
   dasar.css  ·  fondasi seluruh situs (token, font, reset, tipografi,
   kabut ambient, butiran/grain, tautan cair, tarikan-magnet).
   Dipakai oleh SEMUA halaman. Jangan hapus.
   UBAH identitas (warna, font, jarak) HANYA di blok :root di bawah.
   ============================================================ */

/* ---------- FONT (self-hosted, file ada di /aksara) ---------- */
@font-face{ font-family:"Badan"; src:url("../aksara/hanken-300.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face{ font-family:"Badan"; src:url("../aksara/hanken-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Badan"; src:url("../aksara/hanken-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Badan"; src:url("../aksara/hanken-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Badan"; src:url("../aksara/hanken-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Judul"; src:url("../aksara/bricolage-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Judul"; src:url("../aksara/bricolage-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Judul"; src:url("../aksara/bricolage-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Judul"; src:url("../aksara/bricolage-800.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- TOKEN (satu-satunya tempat ubah identitas) ---------- */
:root{
  /* warna dasar (near-black dingin, teks tulang) */
  --dasar:      #0E0F10;
  --permukaan:  #17191B;
  --tulisan:    #ECEAE3;
  --kelabu:     #7E8486;
  --hijau:      #31DD8D;   /* aksen satu */
  --koral:      #EF584E;   /* aksen dua */

  /* cahaya ambient (kabut). TETAP setia palet: hijau, koral, slate dingin.
     TANPA ungu/emas/coklat di antarmuka; warna ungu datang dari karya. */
  --sinar-koral: 239,88,78;
  --sinar-hijau: 49,221,141;
  --sinar-slate: 70,84,110;

  /* font */
  --aksara-badan: "Badan", system-ui, sans-serif;
  --aksara-judul: "Judul", "Badan", system-ui, sans-serif;

  /* garis & lengkung (default TANPA garis; hairline kalau terpaksa) */
  --tebal-garis: 0.5px;
  --lengkung:    2px;

  /* jarak (skala ruang) */
  --ruang-xs: 0.5rem;
  --ruang-sm: 1rem;
  --ruang-md: 2rem;
  --ruang-lg: 4rem;
  --ruang-xl: 8rem;

  /* gerak */
  --lembut: cubic-bezier(.16,.84,.32,1);

  /* susun tumpuk (z-index) */
  --lapis-kabut:  -2;
  --lapis-latar:   0;
  --lapis-isi:     10;
  --lapis-menu:    900;
  --lapis-butir:   950;   /* grain di atas isi, di bawah menu-atas */
  --lapis-atas:    1000;
}

/* ---------- RESET ringan ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--dasar);
  color:var(--tulisan);
  font-family:var(--aksara-badan);
  font-weight:400; line-height:1.55;
  font-size:clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }

/* ---------- TIPOGRAFI ---------- */
h1,h2,h3,h4{ font-family:var(--aksara-judul); font-weight:700; line-height:1.04; letter-spacing:-0.02em; }
h1{ font-size:clamp(2.4rem, 1.4rem + 4.4vw, 5.4rem); }
h2{ font-size:clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); }
h3{ font-size:clamp(1.25rem, 1rem + 1.3vw, 1.9rem); }
p{ text-wrap:pretty; }
.mata-kecil{ font-family:var(--aksara-badan); font-weight:600; font-size:0.72rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--kelabu); }
::selection{ background:var(--hijau); color:var(--dasar); }

/* kata yang "berkilau" (aksen judul). Efek Shiny/Gradient Text ala react-bits. */
.warnai{ color:var(--hijau); }
.kilau{
  background:linear-gradient(100deg,var(--tulisan) 20%, var(--hijau) 42%, var(--koral) 58%, var(--tulisan) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:seret-kilau 7s linear infinite;
}
@keyframes seret-kilau{ to{ background-position:-220% 0; } }

/* ============================================================
   KABUT · latar ambient hidup (ala Aurora/Silk react-bits, tapi vanilla).
   Diisi <canvas id="kabut"> + gumpalan cahaya yang mengambang.
   Skrip: skrip/kabut.js. Mati saat prefers-reduced-motion / mode sentuh.
   ============================================================ */
.kabut{
  position:fixed; inset:0; z-index:var(--lapis-kabut);
  pointer-events:none; opacity:.9;
}
/* cadangan statis kalau canvas mati: dua noda cahaya lembut via CSS */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:var(--lapis-kabut);
  pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, rgba(var(--sinar-slate),.16), transparent 60%),
    radial-gradient(30vmax 30vmax at 82% 72%, rgba(var(--sinar-koral),.10), transparent 62%);
  filter:blur(10px);
}

/* ============================================================
   BUTIRAN / GRAIN · lapisan film halus di atas segalanya (dreamcore).
   <div class="butiran"></div>. Tekstur dibikin murni CSS (SVG data-uri).
   ============================================================ */
.butiran{
  position:fixed; inset:0; z-index:var(--lapis-butir);
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image: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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TAUTAN CAIR · pengganti tombol kotak. Teks + garis yang tumbuh.
   .tautan            = tautan biasa (garis muncul dari kiri saat hover)
   .tautan--utama     = ajakan utama, ada panah yang menggeser
   Bungkus dengan <span class="magnet"> untuk tarikan ke kursor.
   ============================================================ */
.tautan{
  position:relative; display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--aksara-judul); font-weight:600; font-size:1rem;
  color:var(--tulisan); padding:.15em 0;
  transition:color .25s ease;
}
.tautan::after{
  content:""; position:absolute; left:0; right:100%; bottom:-.05em; height:1.5px;
  background:linear-gradient(90deg,var(--hijau),var(--koral));
  transition:right .4s var(--lembut);
}
.tautan:hover{ color:var(--tulisan); }
.tautan:hover::after{ right:0; }
.tautan--utama{ font-size:1.05rem; }
.tautan--utama .panah{ transition:transform .3s var(--lembut); }
.tautan--utama:hover .panah{ transform:translateX(.35em); }
.tautan--redup{ color:var(--kelabu); font-weight:500; }
.tautan--redup:hover{ color:var(--tulisan); }

/* pembungkus magnet (skrip/magnet.js menggeser child ke arah kursor) */
.magnet{ display:inline-block; will-change:transform; }

/* ---------- menu-pojok (nav tetap halaman-dalam) ---------- */
.menu-pojok{
  position:fixed; top:var(--ruang-md); left:clamp(1.2rem,5vw,4rem);
  z-index:var(--lapis-menu);
  display:flex; flex-direction:column; gap:.35rem;
  mix-blend-mode:difference;
}
.menu-pojok a{
  font-family:var(--aksara-judul); font-weight:600; font-size:.92rem;
  letter-spacing:.01em; color:#fff; opacity:.5;
  transition:opacity .2s ease, letter-spacing .3s var(--lembut);
}
.menu-pojok a:hover{ opacity:1; letter-spacing:.06em; }
.menu-pojok a[aria-current="page"]{ opacity:1; }
.menu-pojok a[aria-current="page"]::before{ content:""; display:inline-block;
  width:.5em; height:.5em; margin-right:.5em; border-radius:50%;
  background:var(--hijau); vertical-align:middle; }

/* tanda-nama pojok kanan bawah */
.tanda-nama{
  position:fixed; bottom:var(--ruang-md); right:clamp(1.2rem,5vw,4rem);
  z-index:var(--lapis-menu);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kelabu); mix-blend-mode:difference;
}

/* ---------- percikan klik & cahaya kursor (skrip/percik.js) ---------- */
.percik{ position:fixed; width:6px; height:6px; border-radius:50%;
  pointer-events:none; z-index:var(--lapis-atas); background:var(--hijau);
  mix-blend-mode:screen; }
.cahaya-kursor{
  position:fixed; top:0; left:0; width:26rem; height:26rem; margin:-13rem 0 0 -13rem;
  pointer-events:none; z-index:var(--lapis-kabut);
  background:radial-gradient(circle, rgba(var(--sinar-koral),.10), transparent 60%);
  opacity:0; transition:opacity .4s ease; will-change:transform;
}

/* ---------- aksesibilitas ---------- */
:focus-visible{ outline:2px solid var(--hijau); outline-offset:3px; border-radius:1px; }
.sembunyi-mata{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .kilau{ background:none; -webkit-text-fill-color:var(--hijau); color:var(--hijau); }
  .kabut,.cahaya-kursor{ display:none; }
}