/* ==========================================================================
   AX RACING TECH — MAIN.CSS (Dark-Only, Neon, Checkered, Glass)
   Versi: 2025.10.18
   ========================================================================== */

/* =========================
   Design Tokens (Dark Only)
   ========================= */
:root{
  /* Base */
  --bg:#0a0a0a; --bg-2:#0c0c0d; --bg-elev:rgba(12,12,12,.6); --bg-section:#0f0f10;
  --fg:#e9eef1; --muted:#9aa0a6; --border:rgba(255,255,255,.08);
  --card:#121214; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px; --container:1200px;

  /* Brand / Accent */
  --brand:#ff2d55; --brand-2:#00e5ff; --ring:#7cfcff;
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));

  /* Effects */
  --glass:blur(14px) saturate(110%);
  --glow:0 10px 30px rgba(0,229,255,.22);
  --glow-2:0 14px 40px rgba(255,45,85,.18);

  /* Grid / Pattern */
  --grid-c:#141417; --grid-c2:#0f1013; --checker:#15151a;
}

/* Aksesibilitas gerak */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =========================
   Base & Elements
   ========================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{color-scheme:dark}
body{
  margin:0;
  font-family:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Noto Sans';
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6;
  /* Subtle background grid */
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),
    linear-gradient(90deg,var(--grid-c) 1px,transparent 1px),
    linear-gradient(0deg,var(--grid-c) 1px,transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
  background-position:0 0, 50% 50%, 50% 50%;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* Scrollbar (WebKit/Chromium) */
*::-webkit-scrollbar{height:12px;width:12px}
*::-webkit-scrollbar-track{background:#0e0f12}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:10px;border:3px solid #0e0f12}

/* =========================
   Header / Nav (Glass)
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass);
  background:color-mix(in srgb,var(--bg) 68%, transparent);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background-color .3s, border-color .3s;
}
.site-header.scrolled{
  box-shadow:var(--shadow);
  background:color-mix(in srgb,var(--bg) 86%, transparent);
  border-color:color-mix(in srgb,var(--border) 70%, transparent);
}

/* Header neon glow line */
.header-glow{
  position:sticky; top:89px; inset-inline:0; height:2px; z-index:999;
  background:linear-gradient(90deg,transparent, var(--brand-2), var(--brand), transparent);
  filter:blur(0.6px) drop-shadow(0 0 10px rgba(0,229,255,.25));
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:90px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:72px;width:auto;object-fit:contain}
@media (max-width:960px){ .brand img{height:60px} }

.menu{display:flex;align-items:center;gap:8px}
.menu a{
  padding:10px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--muted);position:relative;
  transition:color .2s, background .2s, transform .2s;
}
.menu a:hover,.menu a:focus-visible{color:var(--fg);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.menu a.active{color:var(--fg)}
.menu a.active::after{
  content:''; position:absolute; bottom:4px; left:14px; right:14px; height:2px;
  background:var(--grad); border-radius:2px; box-shadow:0 0 10px rgba(0,229,255,.35);
}

/* Burger & Drawer (pakai aria-hidden dari JS) */
.burger{width:44px;height:44px;display:none;place-items:center;border-radius:12px;border:1px solid var(--border);background:transparent;cursor:pointer}
.burger span,.burger::before,.burger::after{content:'';display:block;width:20px;height:2px;background:var(--fg);transition:transform .3s,opacity .3s}
.burger::before{transform:translateY(-6px)} .burger::after{transform:translateY(4px)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:translateY(1px) rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:translateY(-1px) rotate(-45deg)}
.drawer{
  position:fixed; inset:90px 0 auto 0; z-index:999;
  background:color-mix(in srgb,var(--card) 88%, transparent);
  border-bottom:1px solid var(--border);
  transform:translateY(-10px); opacity:0; pointer-events:none; transition:.3s;
  backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass);
}
.drawer[aria-hidden="false"]{transform:translateY(0); opacity:1; pointer-events:auto}
.drawer .menu{flex-direction:column;align-items:stretch;padding:12px 20px}
.drawer .menu a{padding:14px;font-size:1rem}
@media (max-width:960px){.menu{display:none}.burger{display:grid}.cta .btn--desktop{display:none}}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;border-radius:12px;font-weight:800;font-size:.92rem;
  background:var(--grad); color:#090909; border:0; cursor:pointer;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,229,255,.33), inset 0 1px 0 rgba(255,255,255,.3)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn--secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border); color:var(--fg); box-shadow:none;
}
.btn--secondary:hover{background:rgba(255,255,255,.06)}

/* =========================
   Sections & Layout
   ========================= */
section{scroll-margin-top:108px;padding:80px 0}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{margin:0 0 8px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.5px}
.section-header p{margin:0 auto;color:var(--muted);max-width:640px;font-size:1.05rem}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.align-center{align-items:center}
.gap-48{gap:48px}
.gap-16{gap:16px}
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:600px){section{padding:60px 0}.grid-3,.grid-2{grid-template-columns:1fr}}

/* =========================
   Cards (Neon border, glass)
   ========================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .35s, box-shadow .35s, border-color .35s, background .35s;
  position:relative; overflow:hidden; backdrop-filter:saturate(115%);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.25), var(--glow-2)}
/* Soft neon aura */
.card::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%,var(--brand-2) 0deg,var(--brand) 180deg,var(--brand-2) 360deg);
  filter:blur(26px) opacity(.18); transition:opacity .35s;
}
.card:hover::after{opacity:.45}

.pad-24{padding:24px}
.pad-18{padding:18px}
.pad-responsive{padding:clamp(24px,5vw,48px)}
.v-col{display:flex;flex-direction:column}
.stretch{display:flex;flex-direction:column;height:100%}
.row-gap{display:flex;gap:10px;flex-wrap:wrap}
.w-50{flex:1}
.radius{border-radius:var(--radius)}
.small{font-size:.92rem}
.hint{margin-left:4px}

/* =========================
   Hero (image overlay + gradient text)
   ========================= */
#home{display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(0,229,255,.18), transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.65)),
    url('/images/axbanner.png') center/cover no-repeat;
  filter:saturate(105%);
}
.hero-grid{display:grid;place-items:center}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(0,229,255,.18)}
.hero-badges{margin-top:48px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:#b6bcc2;font-weight:700;font-size:.95rem}

/* Scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  color:var(--fg); font-weight:700; font-size:.95rem;
  backdrop-filter: blur(8px);
  transition:transform .2s, background .2s, border-color .2s;
}
.scroll-cue:hover{ transform:translateX(-50%) translateY(-2px); background:rgba(255,255,255,.12) }
.scroll-cue svg{ width:18px; height:18px }
@media (max-width:600px){ .scroll-cue{ bottom:16px; padding:8px 12px; font-size:.9rem } }

/* =========================
   Media & Skeleton
   ========================= */
.media16x9{aspect-ratio:16/9;overflow:hidden;border-radius:calc(var(--radius) - 2px)}
.media16x9 img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .media16x9 img{transform:scale(1.05)}
.skeleton{
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12),rgba(255,255,255,.04));
  background-size:200% 100%; animation:shimmer 1.2s infinite linear;
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* =========================
   Teks & Utilities
   ========================= */
.muted{color:var(--muted)}
.h2{margin:0 0 14px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.5px}
.h3{margin:0 0 8px;font-size:1.2rem}
.h4{margin:6px 0 10px;font-size:1.08rem}
.list{margin:0;padding:0;line-height:1.8;list-style:none}
.underline{text-decoration:underline}

/* Link highlight on hover */
a.underline:hover{
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) bottom/100% 1px no-repeat;
  text-shadow:0 0 18px rgba(0,229,255,.25);
}

/* =========================
   Stats
   ========================= */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{
  padding:22px;text-align:center;border:1px dashed var(--border);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.stat .num{font-size:clamp(24px,4vw,40px);font-weight:800}
.stat .label{color:var(--muted)}
@media (max-width:960px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================
   Portfolio / Blog Checkered strip
   ========================= */
.bg-section{
  position:relative; background:
    linear-gradient(180deg,var(--bg-section), var(--bg-2));
  isolation:isolate;
}
.bg-section::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.06;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--checker) 18px 36px);
}
.bg-section > .container{position:relative; z-index:1}

/* =========================
   Modal (service)
   ========================= */
.modal[aria-hidden="true"]{display:none}
.modal{position:fixed; inset:0; z-index:1200; display:grid; place-items:center}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px)}
.modal__dialog{
  position:relative; z-index:1; width:min(720px, calc(100% - 32px));
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 30px 60px rgba(0,0,0,.5); padding:18px; animation:modalIn .2s ease-out;
}
.modal__close{
  position:absolute; top:8px; right:10px; width:36px; height:36px;
  border:1px solid var(--border); border-radius:10px; background:transparent;
  color:var(--fg); cursor:pointer; font-size:20px; line-height:1;
}
.modal__media{aspect-ratio:16/9; overflow:hidden; border-radius:12px; margin-bottom:14px}
.modal__media img{width:100%; height:100%; object-fit:cover}
@keyframes modalIn{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}

/* =========================
   Footer
   ========================= */
.site-footer{border-top:1px solid var(--border);padding:24px 0;background:var(--bg)}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand-mini{display:flex;align-items:center;gap:12px}
.footer-nav{display:flex;gap:16px}
.rounded{border-radius:4px}

/* =========================
   Floating WhatsApp
   ========================= */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:990}
.wa-float a{
  display:inline-flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-radius:26px;
  background:#25D366;color:#fff;font-weight:800;
  box-shadow:0 10px 24px rgba(37,211,102,.35); transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.wa-float a:hover{transform:translateY(-2px)}

/* =========================
   Scroll-in Animation (JS adds .in)
   ========================= */
[data-animate]{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}
[data-animate].in{opacity:1;transform:translateY(0)}

/* =========================
   Forms
   ========================= */
.form-grid{display:grid;gap:14px}
.form-input{
  border-radius:12px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 50%,transparent);
  color:var(--fg); padding:12px 14px; transition:border-color .25s, box-shadow .25s, background .25s; font:inherit;
}
.form-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent);
  background:color-mix(in srgb,var(--bg) 35%, transparent);
}

/* =========================
   Helper: Neon Divider
   ========================= */
.hr-neon{
  height:2px; border:0; margin:24px 0;
  background:linear-gradient(90deg,transparent,var(--brand-2),var(--brand),transparent);
  filter:drop-shadow(0 0 8px rgba(0,229,255,.25));
}

/* =========================
   Helper: Subtle Tilt on hover
   ========================= */
.tilt:hover{transform:translateY(-6px) rotate3d(.5,1,0, .6deg)}

/* =========================
   Mobile Tweaks
   ========================= */
@media (max-width:480px){
  .btn{width:100%}
  .stat{padding:18px}
}

/* =========================
   Accessibility Contrast Fix
   ========================= */
::selection{background:color-mix(in srgb, var(--brand-2) 35%, transparent); color:#000}