/* =====================================================================
   BASE.CSS — dipakai SEMUA bagian (warna, font, tombol, judul).
   ⚠️ File ini wajib ada. Ubah warna tema di :root.
   ===================================================================== */
:root{
  --bg:        #0b0a12;   /* latar belakang utama */
  --bg-2:      #14121f;   /* latar section/kartu */
  --bg-3:      #1d1a2c;   /* latar elemen lebih terang */
  --text:      #f4f2fb;   /* teks utama */
  --muted:     #a7a2bd;   /* teks sekunder */
  --primary:   #ff3d7f;   /* aksen utama (pink) */
  --secondary: #7b5cff;   /* aksen kedua (ungu) */
  --accent:    #2ee6c5;   /* aksen ketiga (tosca) */
  --gold:      #ffc94d;   /* warna bonus */
  --radius:    18px;
  --maxw:      1180px;
  --font-head: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:90px 0;position:relative}

/* Judul section */
.section-head{text-align:center;margin-bottom:48px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-title{font-family:var(--font-head);font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:.03em;line-height:1}
.section-sub{color:var(--muted);max-width:560px;margin:14px auto 0}
.grad-text{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{font-family:var(--font-head);font-size:1.8rem;letter-spacing:.05em}
.logo span{color:var(--primary)}

/* Tombol */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:.98rem;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:0;white-space:nowrap;
}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 30px -10px var(--primary)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px -10px var(--primary)}
.btn-outline{background:transparent;color:var(--text);border:2px solid rgba(255,255,255,.18)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:#1a1300;box-shadow:0 10px 30px -10px var(--gold)}
.btn-gold:hover{transform:translateY(-3px)}

/* Placeholder jika foto belum ada */
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;text-align:center;
  font-family:var(--font-head);font-size:2.4rem;letter-spacing:.05em;
}
.ph small{font-family:var(--font-body);font-size:.75rem;opacity:.8;letter-spacing:0}

/* Animasi muncul saat scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:820px){ section{padding:70px 0} }
@media (max-width:560px){ .container{padding:0 16px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}