/* ==========================================================================
   0xnLabs // FLAME ACCENT LAYER (#FE5101) — KONTOUR STUDIO INSPIRED
   Komposisi Murni Tri-Kromatik: HITAM (#000000), PUTIH (#FFFFFF) & FLAME ORANGE (#FE5101).
   Hanya dimuat oleh index.html (0xnlabs.engineer) melalui body.theme-flame.
   Halaman RaceCore (racecore.html, support.html, privacy.html) tetap monokrom murni.
   ========================================================================== */

.theme-flame {
  --flame: #FE5101;
  --flame-bright: #FF6A1A;
  --flame-deep: #C83200;
  --flame-hover: #E54800;
  --flame-dim: rgba(254, 81, 1, 0.14);
  --flame-line: rgba(254, 81, 1, 0.45);
  --flame-glow: rgba(254, 81, 1, 0.65);
  
  /* Override warna warisan menjadi Hitam / Putih / Flame */
  --cyan: var(--flame);
  --emerald: var(--flame);
  --amber: var(--flame);
}

.theme-flame ::selection {
  background: var(--flame);
  color: #000000;
}

/* --------------------------------------------------------------------------
   1. NAVBAR: 100% Transparan permanen (tanpa background hitam saat scroll)
   -------------------------------------------------------------------------- */
.theme-flame .navbar,
.theme-flame .navbar.scrolled {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* ==========================================================================
   NIMBUS UI LIQUID GLASS "WATERLINE" NAVBAR CAPSULE & DROPLET GLIDER
   ========================================================================== */
.theme-flame .nav-switch-well {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 999px !important;
  background: rgba(14, 15, 20, 0.62) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.25) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 32px -12px rgba(0, 0, 0, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
  isolation: isolate;
}

.theme-flame .nav-links {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.theme-flame .nav-glider {
  position: absolute;
  top: 5px !important;
  height: calc(100% - 10px) !important;
  border-radius: 999px !important;
  background: 
    radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.08) 55%), 
    linear-gradient(135deg, rgba(254, 81, 1, 0.32), rgba(254, 81, 1, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95), 
    inset 0 -2px 6px rgba(254, 81, 1, 0.35), 
    inset 0 0 0 1px rgba(255, 255, 255, 0.35), 
    0 6px 18px -4px rgba(254, 81, 1, 0.45) !important;
  transition: transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none;
  z-index: 0;
  will-change: transform, width;
}

.theme-flame .nav-link {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  color: rgba(240, 243, 248, 0.72) !important;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  z-index: 2;
  user-select: none;
}

.theme-flame .nav-link:hover {
  color: #ffffff !important;
}

.theme-flame .nav-link:active {
  transform: scale(0.95);
}

.theme-flame .nav-link.active {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.25);
}

.theme-flame .nav-actions .btn-primary {
  border-radius: 999px;
  padding: 10px 22px;
  background: #ffffff;
  color: #000000 !important;
  border-color: #ffffff;
}

.theme-flame .nav-actions .btn-primary:hover {
  background: var(--flame);
  border-color: var(--flame);
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(254, 81, 1, 0.5);
}

/* --------------------------------------------------------------------------
   2. HERO: Pendaran Flame Orange Menembus Penuh ke Header (Top 0, Left 0)
   -------------------------------------------------------------------------- */
.theme-flame .hero {
  background: #000000;
  position: relative;
  overflow: hidden;
}

.theme-flame .hero-ambient {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Core flame intense di sudut paling kiri-atas layar menembus header tanpa jeda */
    radial-gradient(circle 720px at 0% 0%, rgba(254, 81, 1, 0.98) 0%, rgba(254, 81, 1, 0.62) 28%, rgba(210, 45, 0, 0.18) 54%, transparent 74%),
    /* Ambient glow sekunder di belakang judul teks kiri */
    radial-gradient(ellipse 52% 58% at 14% 36%, rgba(254, 81, 1, 0.36) 0%, rgba(254, 81, 1, 0.08) 50%, transparent 74%);
}

/* Vignette bawah halus agar transisi ke section berikutnya tetap hitam pekat */
.theme-flame .hero-ambient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, #000000);
}

.theme-flame .hero-slider-container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFI HERO: 1 WARNA PUTIH SOLID MURNI (#FFFFFF) — TANPA GRADASI
   -------------------------------------------------------------------------- */
.theme-flame .soft-hero-title,
.theme-flame .soft-hero-title span {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.65) !important;
}

.theme-flame .soft-hero-desc {
  color: rgba(244, 244, 245, 0.84);
}

/* --------------------------------------------------------------------------
   4. PURE TITANIUM SILVER RACECORE HARDWARE (BORDERLESS, NO FLAME ORANGE)
   -------------------------------------------------------------------------- */
.theme-flame .soft-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.theme-flame .hero-floating-hardware {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Unit Fisik Murni Titanium Silver - Bayangan Natural Studio Hitam Pekat */
.theme-flame .floating-hardware-unit {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 390px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 56px rgba(0, 0, 0, 0.98))
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.85));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Efek Hover Interaktif: Elevasi Halus */
.theme-flame .hero-floating-hardware:hover .floating-hardware-unit {
  transform: translateY(-6px) scale(1.02);
  filter:
    drop-shadow(0 36px 72px rgba(0, 0, 0, 1.0))
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.92));
}

/* --------------------------------------------------------------------------
   5. TOMBOL KAPSUL (PILL BUTTON ALA KONTOUR STUDIOS)
   -------------------------------------------------------------------------- */
.theme-flame .soft-btn-primary {
  border-radius: 999px;
  padding: 8px 10px 8px 26px;
  background: #ffffff;
  color: #000000 !important;
  border: 1px solid #ffffff;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.theme-flame .soft-btn-primary svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 10px;
  margin-right: -2px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #ffffff;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.theme-flame .soft-btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.theme-flame .soft-btn-primary:hover svg {
  background: var(--flame);
  color: #ffffff;
  transform: rotate(-45deg);
  box-shadow: 0 0 18px rgba(254, 81, 1, 0.7);
}

.theme-flame .soft-btn-secondary {
  border-radius: 999px;
  padding: 14px 28px;
  background: rgba(18, 18, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}

.theme-flame .soft-btn-secondary:hover {
  border-color: var(--flame);
  background: rgba(254, 81, 1, 0.12);
  color: #ffffff;
}

.theme-flame .soft-btn-ghost:hover {
  color: var(--flame);
}

.theme-flame .btn-primary:hover {
  background: var(--flame);
  border-color: var(--flame);
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(254, 81, 1, 0.4);
}

.theme-flame .btn-outline:hover {
  border-color: var(--flame);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. STATISTIK HERO: PUTIH BERSIH DENGAN INDIKATOR ATAS FLAME ORANGE
   -------------------------------------------------------------------------- */
.theme-flame .soft-stat-box {
  position: relative;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.theme-flame .soft-stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--flame);
  box-shadow: 0 0 12px var(--flame);
}

.theme-flame .soft-stat-val,
.theme-flame .soft-stat-val.cyan,
.theme-flame .soft-stat-val.emerald {
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

.theme-flame .slider-dot.active {
  background: #ffffff;
  border-color: #ffffff;
}

.theme-flame .slider-dot.active .dot-fill {
  background: var(--flame);
  box-shadow: 0 0 8px var(--flame);
}

.theme-flame .slider-dot:hover {
  border-color: var(--flame-line);
}

/* --------------------------------------------------------------------------
   7. SECTION HEADERS, KARTU, BADGE & ELEMEN GLOBAL
   -------------------------------------------------------------------------- */
.theme-flame .section-tag {
  color: var(--flame) !important;
}

.theme-flame .badge-cyan,
.theme-flame .badge-purple,
.theme-flame .badge-emerald,
.theme-flame .badge-amber {
  background: var(--flame-dim) !important;
  color: var(--flame) !important;
  border-color: var(--flame-line) !important;
}

.theme-flame .project-card:hover,
.theme-flame .domain-card:hover,
.theme-flame .pricing-pill-box:hover {
  border-color: var(--flame);
  box-shadow: 0 20px 50px -24px rgba(254, 81, 1, 0.35);
}

.theme-flame .pricing-pill-box.highlight {
  border-color: var(--flame);
  background: linear-gradient(145deg, rgba(254, 81, 1, 0.14) 0%, rgba(17, 17, 17, 0.95) 65%);
}

.theme-flame .tech-item-dot {
  background: var(--flame);
  box-shadow: 0 0 8px var(--flame);
}

.theme-flame .domain-icon {
  color: var(--flame);
}

.theme-flame .footer-link:hover {
  color: var(--flame);
}

/* Pendaran ambient halus di section Flagship & Contact */
.theme-flame #flagship,
.theme-flame #contact {
  position: relative;
  overflow: hidden;
}

.theme-flame #flagship::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(254, 81, 1, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.theme-flame #contact::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(254, 81, 1, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   8. RESPONSIF
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .theme-flame .hero-ambient {
    background:
      radial-gradient(circle 500px at 0% 0%, rgba(254, 81, 1, 0.92) 0%, rgba(254, 81, 1, 0.45) 36%, transparent 74%),
      radial-gradient(ellipse 80% 45% at 60% 78%, rgba(254, 81, 1, 0.28) 0%, transparent 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-flame .soft-btn-primary:hover svg {
    transform: none;
  }
}