/* ==========================================================================
   Halaman PUBLIK MasterOlimp — beranda, /olympiads, /info, FAQ & hukum.
   Rombak 3 Nov 2026 (pemilik: "rombak total … agar tampil lebih fresh"):
   kanvas TERANG senada aplikasi siswa, pita navy untuk hero/CTA/footer,
   aksen emas dari logo. Fraunces untuk judul, Plus Jakarta Sans untuk teks.

   Nama token SENGAJA sama dengan versi gelap lama (--ink, --muted, --line,
   --card, --gold-100 …): gaya per halaman (olympiads/_styles, info, legal)
   memakainya, jadi cukup nilainya yang dibalik. Bagian berlatar navy
   (.band-navy, footer) memasang ulang token gelapnya sendiri secara lokal.
   ========================================================================== */
:root {
    --navy-950:#03101f; --navy-900:#071a34; --navy-850:#0b2243; --navy-800:#0e2c5a;
    --navy-700:#123c86; --navy-600:#1c54ae; --blue-500:#2a68c4; --blue-200:#a8c6ee;
    --gold-300:#c9930f; --gold-400:#d7a31d; --gold-500:#d7a31d; --gold-700:#96700f;
    /* Aksen emas sebagai TEKS di latar terang harus lebih tua supaya terbaca. */
    --gold-100:#8a5f00; --gold-200:#9a6b05;

    --canvas:#f4f6fb;
    --ink:#0f1d33; --muted:#4b5a74; --faint:#7a869c;
    --line:#dde3ee; --card:#ffffff; --card-2:#f7f9fd;
    --shadow:0 18px 40px -26px rgba(11,34,67,.35);

    --grad-gold:linear-gradient(135deg,#fbeab0 0%,#ebbd50 42%,#d7a31d 100%);
    --grad-gold-ink:linear-gradient(135deg,#d7a31d 0%,#b07a05 100%);
    --grad-navy:linear-gradient(135deg,#123c86 0%,#0b2243 60%,#071a34 100%);
}
/* Token gelap lokal untuk pita navy. */
.band-navy, footer.pub-foot {
    --ink:#eaf1fb; --muted:#a9bcd8; --faint:#7d93b4;
    --line:rgba(168,198,238,.16); --card:rgba(255,255,255,.05); --card-2:rgba(255,255,255,.08);
    --gold-100:#fbeab0; --gold-200:#f2d276;
    color:var(--ink);
}

* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior:smooth; }
body {
    margin:0; font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--ink); line-height:1.7; background:var(--canvas);
}
h1, h2, h3, h4 { font-family:'Fraunces',Georgia,serif; letter-spacing:-.01em; color:var(--navy-850); font-weight:600; text-wrap:balance; }
.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4, footer.pub-foot h6 { color:#fff; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
:focus-visible { outline:2px solid var(--blue-500); outline-offset:3px; border-radius:6px; }
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
/* Teks emas: gradasi tua di latar terang, gradasi muda di pita navy. */
.gold-text { background:var(--grad-gold-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.band-navy .gold-text { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; }

/* reveal — aman tanpa JS: hanya aktif saat html.js */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1 !important; transform:none !important; transition:none; } }

/* ---------- Tombol ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:100px; border:1.5px solid transparent;
       transition:transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; font-size:.95rem; line-height:1; cursor:pointer; font-family:inherit; }
.btn-gold { background:var(--grad-gold); color:#241a00; padding:.85rem 1.6rem; box-shadow:0 10px 24px -14px rgba(215,163,29,.9); }
.btn-gold:hover { transform:translateY(-2px); }
.btn-navy { background:var(--navy-850); color:#fff; padding:.85rem 1.6rem; }
.btn-navy:hover { background:var(--navy-700); transform:translateY(-2px); }
.btn-line { background:var(--card); color:var(--ink); border-color:var(--line); padding:.85rem 1.5rem; }
.btn-line:hover { border-color:var(--navy-600); color:var(--navy-700); }
.band-navy .btn-line { background:transparent; }
.band-navy .btn-line:hover { border-color:#ebbd50; color:#fbeab0; }
.btn-gold-line { background:transparent; color:var(--gold-100); border-color:var(--gold-300); }
.btn-gold-line:hover { background:rgba(215,163,29,.1); transform:translateY(-2px); }
.btn-sm { padding:.6rem 1.1rem; font-size:.85rem; }

.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
           color:var(--gold-200); border:1px solid color-mix(in srgb, var(--gold-300) 40%, transparent); background:rgba(215,163,29,.08); padding:.4rem .9rem; border-radius:100px; }

/* ---------- Navigasi (putih kaca, lekat di atas) ---------- */
.nav { position:sticky; top:0; z-index:50; padding:.75rem 0; background:rgba(255,255,255,.86);
       -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); }
.nav .row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav .logo img { height:34px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.nav-links a.link { color:var(--muted); font-weight:600; font-size:.92rem; padding:.5rem .8rem; border-radius:10px; }
.nav-links a.link:hover { color:var(--navy-700); background:var(--card-2); }
.nav-links a.link.on { color:var(--navy-850); background:#eaf0fa; }
/* Masuk = tombol emas utama, Daftar = garis — keduanya DI LUAR menu lipat (pemilik 30 Okt). */
.nav-auth { display:flex; align-items:center; gap:.45rem; margin-left:.35rem; }
.nav-toggle { display:none; background:var(--card); border:1px solid var(--line); color:var(--ink); width:44px; height:44px; border-radius:12px; font-size:1.3rem; align-items:center; justify-content:center; cursor:pointer; }
@media (max-width:900px) {
    .nav-toggle { display:inline-flex; }
    .nav-links { position:fixed; inset:66px 12px auto 12px; flex-direction:column; align-items:stretch; gap:.2rem; background:#fff; border:1px solid var(--line);
                 border-radius:18px; padding:.7rem; box-shadow:0 30px 60px -24px rgba(11,34,67,.45); display:none; }
    .nav-links.open { display:flex; }
    .nav-links a.link { padding:.75rem .9rem; font-size:1rem; }
    .nav .row { gap:.5rem; }
    .nav-auth { margin-left:auto; }
    .nav-gratis { display:none; }
    .nav-auth .btn-sm { padding:.55rem .85rem; font-size:.82rem; }
}
@media (max-width:400px) {
    .nav .container { padding:0 14px; }
    .nav .row { gap:.4rem; }
    .nav .logo img { height:26px; }
    .nav-auth { gap:.3rem; }
    .nav-auth .btn-sm { padding:.5rem .65rem; }
    .nav-auth .btn i { display:none; }
    .nav-toggle { width:40px; height:40px; }
}

/* ---------- Footer (pita navy) ---------- */
footer.pub-foot { background:var(--grad-navy); padding:3.2rem 0 2.4rem; margin-top:4.5rem; position:relative; }
footer.pub-foot::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-gold); }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; }
.foot-grid .logo img { height:32px; }
.foot-grid .about { color:var(--muted); font-size:.9rem; margin:.9rem 0 0; max-width:34ch; }
.foot-grid h6 { font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .8rem; }
.foot-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.foot-grid a.fl { color:var(--muted); font-size:.9rem; font-weight:600; }
.foot-grid a.fl:hover { color:#fbeab0; }
.foot-grid a.fl i { margin-right:.35rem; }
.foot-bottom { margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--line); color:var(--faint); font-size:.82rem;
               display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.35rem 1.5rem; }
.foot-id strong { color:var(--muted); font-weight:700; }
.foot-id a { color:var(--muted); }
.foot-id a:hover { color:#fbeab0; }
.foot-id .sep { margin:0 .5rem; opacity:.55; }
@media (max-width:860px) { .foot-grid { grid-template-columns:1fr 1fr; } .fcol-brand { grid-column:1 / -1; } }
@media (max-width:640px) {
    .foot-id .sep { display:none; }
    .foot-id strong, .foot-id a { display:block; }
}

/* ---------- Remah roti & kepala halaman turunan ---------- */
.crumb { padding:2rem 0 0; font-size:.86rem; color:var(--faint); display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.crumb a { color:var(--muted); font-weight:600; }
.crumb a:hover { color:var(--navy-700); }
.lede { color:var(--muted); }