/* ============================================================
   SMANOR PERFORMANCE CENTER — DESIGN SYSTEM (styles.css)
   Gaya: atletik / sporty, biru kobalt, tipografi tebal-condensed.
   Ubah warna brand cukup di --blue.
   ============================================================ */
:root{
  --blue:#1B40D8;          /* warna utama (kobalt) */
  --blue-dark:#1430A8;
  --blue-bright:#5B8CFF;   /* aksen terang untuk gradien */
  --accent:#1B40D8;        /* alias supaya kode lama tetap jalan */
  --ink:#0B1220;
  --muted:#5A6577;
  --line:#E6E8EE;
  --bg:#FFFFFF;
  --bg-soft:#F4F6FA;
  --card:#FFFFFF;
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--bg); }

.font-display{
  font-family:'Barlow Condensed','Inter',sans-serif;
  text-transform:uppercase; font-weight:800; letter-spacing:.005em; line-height:.95;
}
.eyebrow{ letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; font-weight:800; }
section[id]{ scroll-margin-top:90px; }

/* ---------- WRAP ---------- */
.wrap{ max-width:80rem; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }
@media(min-width:1024px){ .wrap{ padding-left:2rem; padding-right:2rem; } }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.875rem; border-radius:9999px; padding:.7rem 1.4rem;
  transition:transform .12s ease, background .15s ease, opacity .15s; cursor:pointer; border:0; }
.btn:active{ transform:scale(.97); }
.btn-solid{ background:var(--blue); color:#fff; }
.btn-solid:hover{ background:var(--blue-dark); }
.btn-line{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-line:hover{ background:var(--bg-soft); }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ background:#eef1f7; }
.btn-outline-white{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.btn-outline-white:hover{ background:rgba(255,255,255,.12); }

/* ---------- CARD / FIELD / BADGE ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:1.1rem; }
.field{ border:1px solid var(--line); background:#fff; border-radius:.65rem; padding:.65rem .85rem; font-size:.875rem; width:100%; }
.field:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,64,216,.12); }
.field:disabled{ background:#F3F5F9; color:var(--muted); }
.badge{ display:inline-flex; align-items:center; font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:9999px; background:rgba(27,64,216,.08); color:var(--blue); }
.chip{ display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; padding:.2rem .55rem; border-radius:.5rem; border:1px solid var(--line); color:var(--muted); }

/* ---------- HEADER / NAVBAR (diinjeksi layout.js) ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner{ height:66px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); }
.logo-box{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--blue); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.25rem; }
.brand-name{ font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1rem; line-height:1; }
.brand-sub{ font-size:11px; color:var(--muted); letter-spacing:.04em; }
.navlinks{ display:none; align-items:center; gap:2rem; }
@media(min-width:1024px){ .navlinks{ display:flex; } }
.navlink{ position:relative; font-size:.875rem; font-weight:600; color:var(--muted); text-decoration:none; padding:.25rem 0; }
.navlink:hover{ color:var(--ink); }
.navlink.active{ color:var(--ink); }
.navlink.active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:2px; background:var(--blue); }
.nav-cta{ display:none; align-items:center; gap:.6rem; }
@media(min-width:1024px){ .nav-cta{ display:flex; } }
.burger{ display:grid; place-items:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; }
@media(min-width:1024px){ .burger{ display:none; } }
.mobile-menu{ display:none; border-top:1px solid var(--line); background:#fff; }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:.7rem 0; font-weight:600; color:var(--ink); text-decoration:none; }

/* ---------- HERO ATLETIK ---------- */
.hero{ position:relative; overflow:hidden; border-radius:24px; color:#fff;
  background:
    radial-gradient(120% 140% at 85% 0%, var(--blue-bright) 0%, transparent 45%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); }
.hero::after{ content:''; position:absolute; right:-10%; bottom:-40%; width:70%; height:160%;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent); transform:skewX(-12deg); }
.hero-title{ font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase;
  font-style:italic; line-height:.92; letter-spacing:.005em;
  background:linear-gradient(180deg,#ffffff 35%, #b9ccff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- FOOTER (diinjeksi layout.js) ---------- */
.site-footer{ margin-top:5rem; border-top:1px solid var(--line); background:var(--bg-soft); }
.dev-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.dev-logos img{ height:42px; width:auto; object-fit:contain; }
.foot-chip{ padding:.5rem .9rem; border-radius:.6rem; border:1px solid var(--line); background:#fff; font-size:.8rem; font-weight:700; }

/* ---------- UTIL ---------- */
.section-soft{ background:var(--bg-soft); }
.lift{ transition:transform .15s ease, box-shadow .15s ease; }
.lift:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(11,18,32,.45); }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }