:root{
  --bg:#0f0f0f; --fg:#f2f2f2; --muted:#cfcfcf; --accent:#ffd166; --accent-ink:#1a1a1a;
  --card-bg:#121212; --card-border:#2a2a2a; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --link:#bfe2ff; /* link kontras-tinggi di atas card gelap */
}
*{ box-sizing:border-box }
html{
  color-scheme: dark;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html,body{
  background:var(--bg); color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h1,h2,h3,.display-1,.display-2,.display-3{ font-family:'Playfair Display', serif; }
a{ color:#61dafb; text-decoration:none; }
@media (hover:hover){ a:hover{ text-decoration:underline; } }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== NAVBAR ===== */
.navbar{ background:rgba(0,0,0,.90) !important; }
@supports (backdrop-filter:blur(6px)){
  .navbar{ background:rgba(0,0,0,.55) !important; backdrop-filter: blur(6px); }
}

/* ===== HERO (pakai bg fallback jika tidak gunakan <picture>) ===== */
.hero{
  position:relative; min-height:75vh; display:flex; align-items:center; overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.05)),
    image-set(url('/assets/img/hero.webp') type('image/webp'),
              url('/assets/img/hero.jpg') type('image/jpeg'));
  background-repeat:no-repeat, no-repeat;
  background-size:auto, cover;
  background-position:0 0, center;
}
.hero--face-right{ background-position:0 0, 72% center; }
.hero--face-left { background-position:0 0, 28% center; }

.hero__panel{
  background:transparent; border:0; box-shadow:none; max-width:640px;
  margin-left:clamp(0rem, 6vw, 5rem); color:#fff;
}
.hero__panel--ghost{ padding:clamp(1.25rem, 2vw, 2rem); }
@supports (backdrop-filter:blur(8px)){
  .hero__panel--ghost.blurred{
    background:rgba(0,0,0,.28); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
  }
}
.hero .display-4,.hero .lead{
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}

/* ===== BUTTONS ===== */
.btn-accent{
  background:var(--accent); border:none; color:#000; font-weight:800;
  border-radius:calc(var(--radius) - 6px);
}
@media (hover:hover){ .btn-accent:hover{ filter:brightness(1.05); color:#000; } }
.btn-outline-light{ color:#fff; border-color:rgba(255,255,255,.9); }
.btn-outline-light:hover{ background:#fff; color:#000; }

/* Tombol kontras-tinggi untuk latar gelap (mis. Apple Music) */
.btn-on-dark{
  background:#ffffff; color:#111 !important; border-color:#fff !important;
}
.btn-on-dark:hover{ filter:brightness(.95); }

/* ===== CARDS & LAYOUT (kontras tinggi) ===== */
.card{
  border-radius:var(--radius); overflow:hidden; background:var(--card-bg);
  border:1px solid var(--card-border); box-shadow:var(--shadow);
  color:var(--fg);
}
.card h1,.card h2,.card h3,.card h4,.card p,.card li,.card .section-title{ color:var(--fg) !important; }
.card .text-muted{ color:var(--muted) !important; }
.card a{ color:var(--link); }
.card a:hover{ text-decoration:underline; }

/* Perbaiki tombol outline gelap di dalam card agar lolos kontras */
.card .btn-outline-dark{
  color:#fff; border-color:#fff;
}
.card .btn-outline-dark:hover{
  background:#fff; color:#111;
}

.section-title{ letter-spacing:.3px; font-weight:800; }
.container-narrow{ max-width:880px; }
body{ padding-top:64px; } /* space utk navbar fixed */

/* ===== MEDIA / IMAGES ===== */
img{ height:auto; }
.media-cover{ aspect-ratio:16/9; object-fit:cover; width:100%; background:#101010; }
.content-auto{ content-visibility:auto; contain-intrinsic-size: 1px 600px; } /* boost render */

/* ===== RESPONSIVE TWEAKS ===== */
@media (min-width:1200px){ .hero__panel{ max-width:560px; } }
@media (max-width:575.98px){
  .hero{ min-height:68vh; }
  .hero__panel{ margin-left:clamp(0rem, 3vw, 1.25rem); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}