/* Header styles extracted from pages/layanan.html */

/* =========================
       HEADER (glass)
    ========================= */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 14px 16px;
      background: linear-gradient(180deg, color-mix(in oklab, var(--bg0) 92%, transparent), color-mix(in oklab, var(--bg1) 88%, transparent));
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 32px rgba(0,0,0,.35);
      transition:
        background .2s var(--ease),
        border-color .2s var(--ease),
        box-shadow .2s var(--ease),
        backdrop-filter .2s var(--ease);
    }
    html[data-theme="light"] .site-header,
    html[data-theme="ivory"] .site-header{
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
      border-bottom: 1px solid rgba(15,23,42,.10);
    }

    .site-header.is-scrolled{
      background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg0) 72%, transparent),
        color-mix(in oklab, var(--bg1) 52%, transparent)
      );
      border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
      backdrop-filter: blur(16px) saturate(1.1);
      box-shadow: 0 10px 26px rgba(0,0,0,.28);
    }
    html[data-theme="light"] .site-header.is-scrolled,
    html[data-theme="ivory"] .site-header.is-scrolled{
      background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
      border-bottom: 1px solid rgba(15,23,42,.08);
      box-shadow: 0 10px 26px rgba(15,23,42,.18);
    }

    .site-header.is-scrolled .nav-links a{
      color: var(--text);
    }
    .site-header.is-scrolled .nav-links a:hover{
      background: rgba(255,255,255,.10);
    }
    html[data-theme="light"] .site-header.is-scrolled .nav-links a:hover,
    html[data-theme="ivory"] .site-header.is-scrolled .nav-links a:hover{
      background: rgba(15,23,42,.08);
    }

    .header-inner{
      max-width: var(--max);
      margin: 0 auto;
      display:flex;
      align-items:center;
      gap: 18px;
      min-height: 54px;
    }
    .container, .header-inner, .footer-inner{
      width: min(var(--max, 1200px), 100% - 2rem);
      margin-inline: auto;
    }

    .brand{ display:flex; align-items:center; gap: 10px; min-width: 170px; }

    .nav-links{
      flex: 1;
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      white-space: nowrap;
    }
    .mobile-nav{
      position: fixed;
      inset: 0;
      padding: 80px 24px 32px;
      background: color-mix(in oklab, var(--bg0) 92%, transparent);
      backdrop-filter: blur(20px);
      display:flex;
      flex-direction:column;
      gap: 18px;
      transform: translateY(-100%);
      opacity:0;
      pointer-events:none;
      transition: transform .3s var(--ease), opacity .3s var(--ease);
      z-index:55;
      overflow-y: auto;
    }
    .mobile-nav a{
      color: var(--text);
      text-decoration:none;
      font-size: 16px;
      font-weight: 700;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid transparent;
      transition: border-color .2s var(--ease);
    }
    .mobile-nav.open{
      transform: translateY(0);
      opacity:1;
      pointer-events:auto;
    }
    .mobile-nav a:hover{ border-color: rgba(255,255,255,0.2); }

    .nav-links a{
      color: var(--muted);
      text-decoration:none;
      font-size: 13px;
      font-weight: 850;
      padding: 10px 12px;
      border-radius: 999px;
      position: relative;
      transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
    }
    .nav-links a:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
    .nav-links a.active{ color: var(--text); background: rgba(255,255,255,.06); }
    .nav-links a.active::after{
      content:"";
      position:absolute;
      left: 18%; right: 18%;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
      box-shadow: 0 0 14px rgba(120,180,255,.35);
    }

    html[data-theme="light"] .nav-links a,
    html[data-theme="ivory"] .nav-links a{ color: rgba(15,23,42,.78); }
    html[data-theme="light"] .nav-links a:hover,
    html[data-theme="ivory"] .nav-links a:hover{ background: rgba(15,23,42,.06); }
    html[data-theme="light"] .nav-links a.active,
    html[data-theme="ivory"] .nav-links a.active{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }
    html[data-theme="light"] .nav-links a.active::after,
    html[data-theme="ivory"] .nav-links a.active::after{
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 92%, transparent), transparent);
      box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 26%, transparent);
    }

    .header-actions{ display:flex; align-items:center; gap: 10px; }
    .nav-toggle{
      display:none;
      border:none;
      background:rgba(255,255,255,0.08);
      color:var(--text);
      width: 48px;
      height: 48px;
      border-radius: 14px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      transition: background .2s var(--ease);
    }
    .nav-toggle:hover{ background: rgba(255,255,255,0.13); }
    .nav-toggle span{
      display:block;
      width: 22px;
      height: 2px;
      background:currentColor;
      border-radius: 999px;
      margin-bottom: 5px;
      transition: transform .3s var(--ease);
    }
    .nav-toggle span:last-child{ margin-bottom: 0; }
    .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity: 0; }
    .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===============================
   MOBILE NAV FIX (AMAN)
   =============================== */
.mobile-nav{
  padding-top: 110px !important; /* biar tidak nabrak header */
  gap: 22px !important;
}

/* tombol silang */
.mobile-close{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  color: var(--text);
  display: grid;
  place-items: center;
  z-index: 5;
}

.mobile-close:hover{
  background: rgba(255,255,255,.22);
}

/* menu lebih lega */
.mobile-nav a{
  padding: 14px 18px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}

/* ===============================
   HEADER LEFT SPACING ? LEBIH LEGA (AMAN)
   Tempel PALING BAWAH <style>
   Tidak mengubah struktur, hanya spacing
   =============================== */

/* jarak header keseluruhan sedikit lebih lega (mobile) */
@media (max-width: 900px){
  .site-header{ padding: 14px 14px !important; }
  .header-inner{
    gap: 14px !important;           /* jarak antar kolom header */
    min-height: 56px !important;
  }

  /* area logo + hamburger lebih rapih */
  .brand{
    gap: 12px !important;
    min-width: unset !important;
  }

  /* jarak hamburger dari logo (ini yang bikin ?lega?) */
  .nav-toggle{
    margin-left: 6px !important;
  }

  /* tombol di kanan biar gak sempit */
  .header-actions{ gap: 12px !important; }
  .header-actions .btn{
    height: 40px !important;
    padding: 0 14px !important;
  }
}

/* jika layar sangat kecil, rapihin lagi biar tidak mepet */
@media (max-width: 360px){
  .site-header{ padding: 12px 12px !important; }
  .header-actions{ gap: 10px !important; }
}

/* =========================================================
   HEADER MOBILE RAPiH & LEGA (430/412/390/360) ? AMAN
   - Hanya merapikan header agar tidak mepet
   - Desktop/tablet tidak berubah
========================================================= */

/* Base: pastikan header bisa bagi ruang dengan benar */
.header-inner{
  justify-content: space-between;
}

/* Actions fleksibel & boleh wrap saat sempit */
.header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap; /* KUNCI: supaya tidak nabrak di 430/390/360 */
}

/* Kelompok Daftar + Masuk selalu rapi */
.auth-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Brand tidak ikut terdorong */
.brand{
  flex: 0 0 auto;
  gap: 12px;
}

/* ========== MOBILE UTAMA (<= 430px) ========== */
@media (max-width: 430px){
  .site-header{ padding: 14px 14px !important; }

  /* Header boleh 2 baris agar lega */
  .header-inner{
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-height: unset !important;
  }


  /* Actions jadi baris kedua full width, rapi rata kanan */
  .header-actions{
    width: 100%;
    justify-content: flex-end;
    gap: 10px !important;
  }

  /* Tombol diperkecil sedikit biar muat dan lega */
  .header-actions .btn{
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* Theme jangan kepanjangan */
  .theme-toggle{ min-width: 92px; }
}

/* ========== EXTRA COMPACT (<= 390px) ========== */
@media (max-width: 390px){

  .header-actions{ gap: 8px !important; }

  .header-actions .btn{
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .auth-actions{ gap: 8px !important; }
}

/* ========== SUPER KECIL (<= 360px) ========== */
@media (max-width: 360px){
  .site-header{ padding: 12px 12px !important; }

  /* jika sempit banget, biar tetap rapi menyebar */
  .header-actions{
    justify-content: space-between;
  }

  .theme-toggle{
    padding: 0 12px !important;
  }
}
/* ===== LOGO ANTI GEPENG (WAJIB) ===== */
@media (max-width: 900px){
}

/* ===== MOBILE HEADER HARUS MIRIP FOTO KANAN ===== */
@media (max-width: 900px){
  /* sembunyikan Daftar/Masuk di HEADER (agar tidak jadi seperti foto kiri) */
  .header-actions > a.btn{
    display: none !important;
  }
  /* pill tema biar enak */
  .theme-toggle{
    min-width: 120px !important;
    justify-content: center !important;
  }
}

/* ===== MOBILE NAV OVERLAY: DEFAULT TERTUTUP (ANTI "GAK BISA DIPENCET") ===== */
.mobile-nav{
  position: fixed !important;
  inset: 0 !important;
  z-index: 55 !important;

  /* default tertutup */
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;

  /* solid background */
  background: #071b3a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 18px 18px 28px !important;
  overflow-y: auto !important;

  transition: transform .28s var(--ease), opacity .28s var(--ease) !important;
}
.mobile-nav.open{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide floating WA button when mobile nav is open */
body.is-mobile-nav-open .float{
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   Layanan Page Layout
   =============================== */
.services-frame .services-head{
  text-align: center;
  margin-bottom: 24px;
}
.services-frame .services-head h1{
  margin: 0 0 8px;
}
.services-frame .services-head p{
  margin: 0;
  color: var(--muted);
}
.services-frame .services-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.services-frame .service-card{
  border-radius: 20px;
  padding: 20px;
  background: color-mix(in oklab, var(--bg1) 56%, transparent);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 120px;
}
.services-frame .service-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  flex: 0 0 auto;
}
.services-frame .service-icon svg{
  width: 22px;
  height: 22px;
}
.services-frame .service-body h3{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 950;
}
.services-frame .service-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services-frame .service-body p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.usage-frame .usage-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: center;
}
.usage-frame .usage-content h3{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 900;
}
.usage-frame .usage-content p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.usage-frame .usage-image img{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  background: color-mix(in oklab, var(--bg1) 56%, transparent);
}

/* Layanan page: text block top-aligned and cleaner spacing */
.layanan-page .usage-frame .usage-grid{
  align-items: start;
}
.layanan-page .usage-frame .usage-content h3{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.35;
}
.layanan-page .usage-frame .usage-content p{
  margin: 0;
  max-width: 54ch;
}
.layanan-page .usage-frame .usage-content{
  padding-top: 12px;
}

/* Page title sizing (non-hero) */
.services-head h1,
.cf-head h1,
.pk-title h1{
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-align: center;
}

html[data-theme="light"] .services-frame .service-card,
html[data-theme="ivory"] .services-frame .service-card{
  background: rgba(255,255,255,.76);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
}
html[data-theme="light"] .services-frame .service-body p,
html[data-theme="ivory"] .services-frame .service-body p{
  color: rgba(15,23,42,.70);
}
html[data-theme="light"] .services-frame .service-icon,
html[data-theme="ivory"] .services-frame .service-icon{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.12);
}
html[data-theme="light"] .usage-frame .usage-image img,
html[data-theme="ivory"] .usage-frame .usage-image img{
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
}

@media (max-width: 980px){
  .services-frame .services-grid{
    grid-template-columns: 1fr;
  }
  .usage-frame .usage-grid{
    grid-template-columns: 1fr;
  }
}

/* Contact FAQ gap at tablet */
@media (min-width: 721px) and (max-width: 1024px){
  .contact-faq-page .cf-grid{
    gap: 18px;
  }
}

/* Partner logo padding at tablet/mobile */
@media (max-width: 1024px){
  .partner-page .partner-logos img{
    padding: 18px;
  }
}
@media (max-width: 430px){
  .partner-page .partner-logos img{
    padding: 14px;
  }
}

/* topbar: X kiri, auth kanan */
.mobile-nav-top{
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 0 12px !important;
  background: #071b3a !important;
}

/* tombol X */
.mobile-close{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.mobile-close:hover{
  background: rgba(255,255,255,.16) !important;
}

/* auth kanan */
.mobile-auth{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mobile-auth .btn{
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* MASUK wajib berwarna */
.mobile-auth .btn-primary{
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

/* item menu */
.mobile-nav a{
  background: #0a234a !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/* small */
@media (max-width: 390px){
  .mobile-nav{ padding: 16px 14px 24px !important; }
  .mobile-auth{ gap: 8px !important; }
  .mobile-auth .btn{
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 360px){
  .mobile-auth .btn{
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}

/* ===== Header CTA + Primary Toggle ===== */
.nav-toggle-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 16px 42px color-mix(in oklab, var(--accent) 28%, transparent),
    0 10px 24px color-mix(in oklab, var(--accent2) 18%, transparent) !important;
  color: #fff !important;
}
.nav-toggle-primary:hover{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 88%, white),
    color-mix(in oklab, var(--accent2) 88%, white)
  ) !important;
}
.header-cta{
  margin-left: 8px;
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
}
@media (max-width: 900px){
  .header-cta{ display: none !important; }
}

/* =====================================================
   MOBILE HEADER POSITION LOCK (SUPER AKURAT)
   Target HP: Logo kiri | Tema | Hamburger (paling kanan)
   + Overlay Topbar: X kiri | Daftar+Masuk kanan
   Tempel PALING BAWAH <style>
===================================================== */

/* 0) Logo anti-gepeng (wajib) */
@media (max-width: 900px){
}

/* 1) Header mobile: hilangkan Daftar/Masuk di header (biar sama foto kanan) */
@media (max-width: 900px){
  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  /* 2) Paksa header-actions jadi 1 baris rapi (tanpa reverse) */
  header.site-header .header-actions{
    display: flex !important;
    flex-direction: row !important;         /* kunci: jangan row-reverse */
    flex-wrap: nowrap !important;           /* jangan turun baris */
    align-items: center !important;
    justify-content: flex-end !important;   /* semua ke kanan */
    gap: 12px !important;
  }

  /* 3) KUNCI URUTAN: Tema dulu, Hamburger terakhir */
  header.site-header .header-actions .theme-picker{
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  header.site-header .header-actions .nav-toggle{
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  /* 4) Ukuran pill Tema agar mirip foto */
  header.site-header .header-actions .theme-toggle{
    min-width: 124px !important;
    height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* 5) Hamburger jangan berubah gaya, hanya rapikan spacing */
  header.site-header .header-actions .nav-toggle{
    width: 48px !important;
    height: 48px !important;
  }
}

/* =====================================================
   OVERLAY TOPBAR POSITION LOCK (SUPER AKURAT)
   X kiri | Daftar+Masuk kanan (seperti foto)
===================================================== */
header.site-header .mobile-nav .mobile-nav-top{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Kunci X di kiri: matikan aturan absolute yang lama */
header.site-header .mobile-nav .mobile-close{
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* Kunci auth di kanan */
header.site-header .mobile-nav .mobile-auth{
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (max-width: 900px){

  /* 1) HEADER WRAPPER: rapihin spacing & center */
  header.site-header{
    padding: 12px 12px !important;
  }
  header.site-header .header-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 56px !important;
  }

  /* 2) LOGO: posisi rapi + anti-gepeng */
  header.site-header .brand{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  /* 3) NAV LINKS: desktop menu harus hilang di mobile */
  header.site-header .nav-links{
    display: none !important;
  }

  /* 4) HEADER ACTIONS: Tema + hamburger di kanan, rapi 1 baris */
  header.site-header .header-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  /* 5) SEMBUNYIKAN tombol desktop auth di mobile (biar lega) */
  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  /* 6) URUTAN: Tema dulu, hamburger paling kanan */
  header.site-header .header-actions .theme-picker{ order: 1 !important; }
  header.site-header .header-actions .nav-toggle{ order: 2 !important; }

  /* 7) PILL "Tema" rapi seperti contoh */
  header.site-header .theme-toggle{
    height: 44px !important;
    padding: 0 18px !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  /* 8) HAMBURGER (garis 3 putih) rapi & tegas */
  header.site-header .nav-toggle{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  }
  header.site-header .nav-toggle span{
    display: block !important;
    width: 24px !important;
    height: 2.5px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  /* animasi jadi X tetap rapi */
  header.site-header .nav-toggle.open span:nth-child(1){
    transform: translateY(9px) rotate(45deg) !important;
  }
  header.site-header .nav-toggle.open span:nth-child(2){
    opacity: 0 !important;
  }
  header.site-header .nav-toggle.open span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* 9) Mobile nav overlay: jangan mengganggu klik saat tertutup */
  header.site-header .mobile-nav{
    pointer-events: none !important;
  }
  header.site-header .mobile-nav.open{
    pointer-events: auto !important;
  }
}

/* DESKTOP TIDAK DIUBAH. JANGAN TAMBAH CSS DI LUAR MEDIA QUERY INI. */

@media (max-width: 900px){
  .header-inner{
    flex-wrap: nowrap !important;
  }
  .header-actions{
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .header-actions > a.btn{
    display: none !important;
  }
  .nav-toggle{
    display: inline-flex !important;
  }
  .theme-picker{
    order: 1 !important;
  }
  .nav-toggle{
    order: 2 !important;
  }
  .theme-toggle{
    min-width: 120px !important;
    height: 44px !important;
    justify-content: center !important;
  }
}
@media (max-width: 900px){

  header.site-header .header-inner{
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: 56px !important;
  }

  header.site-header .brand{
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  header.site-header .nav-links{ display: none !important; }

  header.site-header .header-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  header.site-header .theme-picker{ order: 1 !important; }
  header.site-header .nav-toggle{ order: 2 !important; }

  header.site-header .theme-toggle{
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  header.site-header .nav-toggle{
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
  }

  header.site-header .mobile-nav{
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;

    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 18px 18px 28px !important;
    overflow-y: auto !important;

    background: rgba(5,21,48,0.95) !important;
    backdrop-filter: blur(18px) !important;

    transition: transform .28s var(--ease), opacity .28s var(--ease) !important;
  }

  header.site-header .mobile-nav.open{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  header.site-header .mobile-nav-top{
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 12px !important;
    background: transparent !important;
  }

  header.site-header .mobile-close{
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
  }

  header.site-header .mobile-auth{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }

  header.site-header .mobile-auth .btn{
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html {
    overflow-y: scroll !important;
  }
}
  
  /* =========================================================
     LOCK FULLSCREEN (ANTI CROP) ? WAJIB
     Agar overlay tidak tampil setengah di pages
  ========================================================= */
  .mobile-nav{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9999 !important;
  }

  /* saat tertutup tidak boleh nangkep klik */
  .mobile-nav{
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .mobile-nav.open{
    pointer-events: auto !important;
    visibility: visible !important;
  }


    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    /* =========================
       HEADER (glass)
    ========================= */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 14px 16px;
      background: linear-gradient(180deg, rgba(8,22,52,.92), rgba(8,22,52,.62));
      border-bottom: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .site-header,
    html[data-theme="ivory"] .site-header{
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
      border-bottom: 1px solid rgba(15,23,42,.10);
    }

    .header-inner{
      max-width: var(--max);
      margin: 0 auto;
      display:flex;
      align-items:center;
      gap: 18px;
      min-height: 54px;
    }
    .container, .header-inner, .footer-inner{
      width: min(var(--max, 1200px), 100% - 2rem);
      margin-inline: auto;
    }

    .brand{ display:flex; align-items:center; gap: 10px; min-width: 170px; }

    .nav-links{
      flex: 1;
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      white-space: nowrap;
    }
    .mobile-nav{
      position: fixed;
      inset: 0;
      padding: 80px 24px 32px;
      background: rgba(5,21,48,0.95);
      backdrop-filter: blur(20px);
      display:flex;
      flex-direction:column;
      gap: 18px;
      transform: translateY(-100%);
      opacity:0;
      pointer-events:none;
      transition: transform .3s var(--ease), opacity .3s var(--ease);
      z-index:55;
      overflow-y: auto;
    }
    .mobile-nav a{
      color: var(--text);
      text-decoration:none;
      font-size: 16px;
      font-weight: 700;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid transparent;
      transition: border-color .2s var(--ease);
    }
    .mobile-nav.open{
      transform: translateY(0);
      opacity:1;
      pointer-events:auto;
    }
    .mobile-nav a:hover{ border-color: rgba(255,255,255,0.2); }

    .nav-links a{
      color: var(--muted);
      text-decoration:none;
      font-size: 13px;
      font-weight: 850;
      padding: 10px 12px;
      border-radius: 999px;
      position: relative;
      transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
    }
    .nav-links a:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
    .nav-links a.active{ color: var(--text); background: rgba(255,255,255,.06); }
    .nav-links a.active::after{
      content:"";
      position:absolute;
      left: 18%; right: 18%;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
      box-shadow: 0 0 14px rgba(120,180,255,.35);
    }

    html[data-theme="light"] .nav-links a,
    html[data-theme="ivory"] .nav-links a{ color: rgba(15,23,42,.78); }
    html[data-theme="light"] .nav-links a:hover,
    html[data-theme="ivory"] .nav-links a:hover{ background: rgba(15,23,42,.06); }
    html[data-theme="light"] .nav-links a.active,
    html[data-theme="ivory"] .nav-links a.active{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }
    html[data-theme="light"] .nav-links a.active::after,
    html[data-theme="ivory"] .nav-links a.active::after{
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 92%, transparent), transparent);
      box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 26%, transparent);
    }

    .header-actions{ display:flex; align-items:center; gap: 10px; }
    .nav-toggle{
      display:none;
      border:none;
      background:rgba(255,255,255,0.08);
      color:var(--text);
      width: 48px;
      height: 48px;
      border-radius: 14px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      transition: background .2s var(--ease);
    }
    .nav-toggle:hover{ background: rgba(255,255,255,0.13); }
    .nav-toggle span{
      display:block;
      width: 22px;
      height: 2px;
      background:currentColor;
      border-radius: 999px;
      margin-bottom: 5px;
      transition: transform .3s var(--ease);
    }
    .nav-toggle span:last-child{ margin-bottom: 0; }
    .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity: 0; }
    .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* =========================
       BUTTONS
    ========================= */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .1px;
      text-decoration:none;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
      cursor:pointer;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
      user-select: none;
    }
    .btn:hover{
      background: rgba(255,255,255,.10);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .btn-outline{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }

    .btn-primary{
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow:
        0 16px 42px color-mix(in oklab, var(--accent) 28%, transparent),
        0 10px 24px color-mix(in oklab, var(--accent2) 18%, transparent);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(220px 120px at 20% 30%, rgba(255,255,255,.40), transparent 60%);
      opacity:.22;
      pointer-events:none;
    }

    .btn-lg{ height: 56px; padding: 0 30px; font-size: 14px; }

    .caret{
      display:inline-flex;
      margin-left: 8px;
      font-size: 12px;
      opacity: .95;
      transform: translateY(1px);
      transition: transform .2s var(--ease);
    }
    .theme-toggle[aria-expanded="true"] .caret{ transform: translateY(1px) rotate(180deg); }

    /* light/ivory buttons */
    html[data-theme="light"] .btn,
    html[data-theme="ivory"] .btn{
      color: rgba(15,23,42,.92);
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.70);
      box-shadow: 0 12px 26px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .btn:hover,
    html[data-theme="ivory"] .btn:hover{
      background: rgba(255,255,255,.82);
      border-color: rgba(15,23,42,.14);
    }
    html[data-theme="light"] .btn-outline,
    html[data-theme="ivory"] .btn-outline{ background: rgba(255,255,255,.62); }

    /* =========================
       THEME MENU
    ========================= */
    .theme-picker{ position:relative; }
    .theme-menu{
      position:absolute;
      right: 0;
      top: calc(100% + 10px);
      width: 250px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(10,20,40,.96);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadowSoft);
      backdrop-filter: blur(10px);

      transform-origin: top right;
      transform: translateY(-4px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s var(--ease), opacity .18s var(--ease);
      max-height: 360px;
      overflow: auto;
    }
    .theme-menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
    html[data-theme="light"] .theme-menu,
    html[data-theme="ivory"] .theme-menu{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.12);
    }

    .theme-option{
      width:100%;
      text-align:left;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 14px;
      cursor:pointer;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
      display:flex;
      flex-direction:column;
      gap: 4px;
      align-items:flex-start;
    }
    .theme-option:last-child{ margin-bottom: 0; }
    .theme-option-label{ font-size: 13px; font-weight: 950; }
    .theme-option-meta{ font-size: 12px; color: var(--muted); }
    .theme-option:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); border-color: rgba(255,255,255,.20); }

    html[data-theme="light"] .theme-option,
    html[data-theme="ivory"] .theme-option{
      border-color: rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      color: rgba(15,23,42,.92);
    }
    html[data-theme="light"] .theme-option:hover,
    html[data-theme="ivory"] .theme-option:hover{
      background: rgba(15,23,42,.05);
      border-color: rgba(15,23,42,.14);
    }

    @media (max-width: 520px){
      .theme-menu{ right: auto; left: 0; transform-origin: top left; width: min(280px, calc(100vw - 48px)); }
    }

/* =========================
       THEME MENU
    ========================= */
    .theme-picker{ position:relative; }
    .theme-menu{
      position:absolute;
      right: 0;
      top: calc(100% + 10px);
      width: 250px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(10,20,40,.96);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadowSoft);
      backdrop-filter: blur(10px);

      transform-origin: top right;
      transform: translateY(-4px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s var(--ease), opacity .18s var(--ease);
      max-height: 360px;
      overflow: auto;
    }
    .theme-menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
    html[data-theme="light"] .theme-menu,
    html[data-theme="ivory"] .theme-menu{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.12);
    }

    .theme-option{
      width:100%;
      text-align:left;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 14px;
      cursor:pointer;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
      display:flex;
      flex-direction:column;
      gap: 4px;
      align-items:flex-start;
    }
    .theme-option:last-child{ margin-bottom: 0; }
    .theme-option-label{ font-size: 13px; font-weight: 950; }
    .theme-option-meta{ font-size: 12px; color: var(--muted); }
    .theme-option:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); border-color: rgba(255,255,255,.20); }

    html[data-theme="light"] .theme-option,
    html[data-theme="ivory"] .theme-option{
      border-color: rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      color: rgba(15,23,42,.92);
    }
    html[data-theme="light"] .theme-option:hover,
    html[data-theme="ivory"] .theme-option:hover{
      background: rgba(15,23,42,.05);
      border-color: rgba(15,23,42,.14);
    }

    @media (max-width: 520px){
      .theme-menu{ right: auto; left: 0; transform-origin: top left; width: min(280px, calc(100vw - 48px)); }
    }

    /* =========================
       FRAME / CARD BESAR (glass)
    ========================= */
    .frame{
      border-radius: var(--radius);
      padding: 44px;
      border: 1px solid var(--border);

      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));

      box-shadow:
        var(--shadow),
        0 0 52px color-mix(in oklab, var(--accent) 10%, transparent),
        0 0 58px color-mix(in oklab, var(--accent2) 8%, transparent);
      position:relative;
      overflow:hidden;
      backdrop-filter: blur(10px);
    }

    .frame::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.11),
        inset 0 0 26px rgba(120,180,255,.10);
    }

    html[data-theme="light"] .frame,
    html[data-theme="ivory"] .frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
      box-shadow: var(--shadow);
    }

    .hero-frame{ margin-top: 18px; }
    .section-frame{ margin-top: 28px; }

    /* =========================
       HERO GRID
    ========================= */
    .hero-grid{
      display:grid;
      grid-template-columns: 1.18fr 1fr;
      gap: 42px;
      align-items: start;
    }

    .hero-left h1{
      margin: 0 0 18px;
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
    }
    html[data-theme="light"] .hero-left h1,
    html[data-theme="ivory"] .hero-left h1{ text-shadow: 0 18px 40px rgba(15,23,42,.10); }

    .lead{
      margin: 0 0 30px;
      color: var(--muted);
      max-width: 660px;
      line-height: 1.65;
      font-size: 15px;
    }

    .hero-cta{ display:flex; gap: 14px; margin: 0 0 18px; }

    .chips{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
    .chip{
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.055);
      color: rgba(238,243,255,.92);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(0,0,0,.18);
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
    }
    .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.26); }

    html[data-theme="light"] .chip,
    html[data-theme="ivory"] .chip{
      border-color: rgba(15,23,42,.12);
      background: rgba(255,255,255,.70);
      color: rgba(15,23,42,.78);
      box-shadow: 0 12px 24px rgba(15,23,42,.10);
    }

    /* =========================
       RIGHT PANEL (KPI)
    ========================= */
    .panel-title h3{ margin: 6px 0 8px; font-size: 17px; font-weight: 950; }
    .panel-title p{ margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }

    .kpi-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px;
    }
    @media (min-width: 1240px){ .kpi-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

    .kpi-card{
      border-radius: 18px;
      padding: 16px 16px 14px;
      border: 1px solid rgba(255,255,255,.17);
      background: color-mix(in oklab, var(--bg1) 60%, transparent);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 18px 44px rgba(0,0,0,.24);

      display:flex;
      flex-direction: column;
      min-height: 126px;
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .kpi-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: color-mix(in oklab, var(--bg1) 70%, transparent); }

    html[data-theme="light"] .kpi-card,
    html[data-theme="ivory"] .kpi-card{
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.76);
      box-shadow: 0 18px 40px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .kpi-card:hover,
    html[data-theme="ivory"] .kpi-card:hover{ background: rgba(255,255,255,.86); }

    .kpi-label{ display:block; font-size: 11px; font-weight: 900; color: rgba(238,243,255,.74); margin-bottom: 8px; }
    .kpi-value{ font-size: 20px; font-weight: 950; letter-spacing: .2px; }

    .kpi-bar{
      height: 4px;
      margin: 12px 0 10px;
      background: rgba(255,255,255,.13);
      border-radius: 999px;
      overflow:hidden;
    }
    .kpi-bar i{
      display:block;
      height:100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 18%, transparent);
    }

    .kpi-meta{
      display:flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 900;
      color: rgba(238,243,255,.65);
      margin-top: auto;
    }

    html[data-theme="light"] .kpi-label,
    html[data-theme="ivory"] .kpi-label{ color: rgba(15,23,42,.64); }
    html[data-theme="light"] .kpi-meta,
    html[data-theme="ivory"] .kpi-meta{ color: rgba(15,23,42,.58); }
    html[data-theme="light"] .kpi-bar,
    html[data-theme="ivory"] .kpi-bar{ background: rgba(15,23,42,.10); }

    /* =========================
       SECTION BAWAH
    ========================= */
    .section-frame h2{
      margin: 0 0 22px;
      font-size: 38px;
      letter-spacing: -0.02em;
      text-shadow: 0 14px 38px rgba(0,0,0,.25);
    }
    html[data-theme="light"] .section-frame h2,
    html[data-theme="ivory"] .section-frame h2{ text-shadow: 0 14px 34px rgba(15,23,42,.10); }

    .feature-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
    .feature-card{
      border-radius: 20px;
      padding: 20px;
      background: color-mix(in oklab, var(--bg1) 56%, transparent);
      border: 1px solid rgba(255,255,255,.17);
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .feature-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: color-mix(in oklab, var(--bg1) 66%, transparent); }
    .feature-card h3{ margin: 0 0 10px; font-size: 15px; font-weight: 950; }
    .feature-card p{ margin: 0; color: rgba(238,243,255,.72); font-size: 13px; line-height: 1.65; }

    html[data-theme="light"] .feature-card,
    html[data-theme="ivory"] .feature-card{
      background: rgba(255,255,255,.76);
      border-color: rgba(15,23,42,.10);
      box-shadow: 0 18px 42px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .feature-card:hover,
    html[data-theme="ivory"] .feature-card:hover{ background: rgba(255,255,255,.86); }
    html[data-theme="light"] .feature-card p,
    html[data-theme="ivory"] .feature-card p{ color: rgba(15,23,42,.70); }

    /* =========================
       FOOTER (THEME-AGNOSTIC)
    ========================= */
    .footer-frame{
      margin-top: 36px;
      padding: 48px 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));
      box-shadow: var(--shadowSoft);
    }
    html[data-theme="light"] .footer-frame,
    html[data-theme="ivory"] .footer-frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
      box-shadow: 0 18px 40px rgba(15,23,42,.10);
    }

    .footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; align-items: flex-start; }
    .footer-brand{ grid-column: span 2; display:flex; flex-direction:column; gap: 20px; }
    .footer-brand p{ margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

    .footer-brand-logos{ display:flex; align-items:center; gap: 16px; }
    .footer-brand-logos img{ height: 48px; width:auto; }
    .footer-divider{ width: 1px; height: 52px; background: rgba(255,255,255,.28); }
    html[data-theme="light"] .footer-divider,
    html[data-theme="ivory"] .footer-divider{ background: rgba(15,23,42,.18); }

    .footer-socials{ display:flex; gap: 12px; }
    .footer-socials a{
      width: 36px; height: 36px;
      border-radius: 0;
      background: transparent;
      display:grid; place-items:center;
      color: inherit;
      border: none;
      box-shadow: none;
      transition: transform .2s ease, opacity .2s ease;
      text-decoration:none;
    }
    .footer-socials a:hover{ transform: translateY(-2px); opacity: .9; }
    .footer-socials a[aria-label="Facebook"]{ color:#1877F2; }
    .footer-socials a[aria-label="Twitter"]{ color:#1DA1F2; }
    .footer-socials a[aria-label="Instagram"]{ color:#E1306C; }
    .footer-socials a[aria-label="LinkedIn"]{ color:#0A66C2; }

    .footer-links h4{ margin: 0 0 12px; font-size: 18px; color: var(--text); }
    html[data-theme="light"] .footer-links h4,
    html[data-theme="ivory"] .footer-links h4{ color: rgba(15,23,42,.90); }

    .footer-links ul{ list-style:none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 6px; }
    .footer-links a{
      color: rgba(238,243,255,.86);
      text-decoration:none;
      font-size: 14px;
      transition: color .2s ease, opacity .2s ease;
      opacity: .92;
    }
    .footer-links a:hover{ color: var(--accent); opacity: 1; }
    html[data-theme="light"] .footer-links a,
    html[data-theme="ivory"] .footer-links a{ color: rgba(15,23,42,.76); }
    html[data-theme="light"] .footer-links a:hover,
    html[data-theme="ivory"] .footer-links a:hover{ color: rgba(14,165,233,1); }

    .footer-address p{ margin: 0; color: rgba(238,243,255,.82); font-size: 14px; line-height: 1.7; }
    html[data-theme="light"] .footer-address p,
    html[data-theme="ivory"] .footer-address p{ color: rgba(15,23,42,.72); }

    .footer-cradit{
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.16);
      text-align:center;
      font-size: 13px;
      color: rgba(238,243,255,.70);
    }
    html[data-theme="light"] .footer-cradit,
    html[data-theme="ivory"] .footer-cradit{ border-top-color: rgba(15,23,42,.10); color: rgba(15,23,42,.60); }
    .footer-cradit a{ color: var(--accent); text-decoration:none; }

       RESPONSIVE
    ========================= */
    @media (max-width: 1080px){
      .nav-links{ display:none; }
      .hero-grid{ grid-template-columns: 1fr; }
      .frame{ padding: 28px; }
      .hero-left h1{ font-size: 44px; }
    }
    @media (max-width: 900px){
      .kpi-grid{ grid-template-columns: 1fr; }
      .hero-left h1{ font-size: 36px; }
      .btn-lg{ width: 100%; }
      .hero-cta{ flex-direction: column; }
      .brand{ min-width: unset; }
    }
  @media (max-width: 960px){
    .footer-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .footer-brand{ grid-column: 1 / -1; text-align: center; }
    .footer-brand-logos{ justify-content: center; }
  }
  /* RESPONSIVE OVERRIDES (final) */
  h1{ font-size: clamp(2.4rem, 3vw, 4.6rem); line-height: 1.1; }
  h2{ font-size: clamp(1.9rem, 2.6vw, 2.8rem); line-height: 1.2; }
  p{ font-size: clamp(0.95rem, 2vw, 1.1rem); }
  .frame{ padding: clamp(24px, 3vw, 44px); }
  .hero-grid{ gap: clamp(28px, 4vw, 48px); }
  .hero-cta .btn{ width: auto; font-size: clamp(0.95rem, 2vw, 1rem); }
  .feature-grid{ gap: clamp(16px, 2vw, 20px); }
  .kpi-grid{ gap: clamp(12px, 2vw, 20px); }

  @media (max-width: 900px){
    .nav-toggle{ display:inline-flex; }
    .header-actions{ gap: 12px; justify-content:flex-end; }
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-cta{ flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-cta .btn{ width: 100%; }
    .feature-grid{ grid-template-columns: 1fr; }
    .kpi-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .mobile-nav{ padding-top: 90px; }
  }

  @media (min-width: 721px) and (max-width: 1024px){
    .nav-links{ display:flex; }
    .header-actions{ gap: 14px; }
    .hero-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-cta{ flex-wrap: wrap; }
    .hero-cta .btn{ flex:1 1 45%; }
  }

  @media (min-width: 1025px){
    .nav-toggle{ display:none; }
    .mobile-nav{ display:none; }
  }



    /* =========================
       LAYANAN SECTION (SESUAI GAMBAR)
    ========================= */
    .services-frame{
      margin-top: 18px;
      padding: 46px 46px 42px;
    }

    .services-head{
      text-align:center;
      margin-bottom: 26px;
    }
    .services-head h1{
      margin: 0 0 10px;
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
    }
    .services-head p{
      margin: 0;
      color: rgba(238,243,255,.70);
      font-size: 16px;
      line-height: 1.65;
    }

    .services-grid{
      margin-top: 26px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .service-card{
      border-radius: 18px;
      padding: 18px 18px;
      border: 1px solid rgba(255,255,255,.18);
      background: color-mix(in oklab, var(--bg1) 52%, transparent);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 18px 44px rgba(0,0,0,.20);
      display:flex;
      gap: 14px;
      min-height: 132px;
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .service-card:hover{
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.26);
      background: color-mix(in oklab, var(--bg1) 62%, transparent);
    }

    .service-icon{
      width: 56px;
      height: 56px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 14px 30px rgba(0,0,0,.18);
      flex: 0 0 auto;
      position: relative;
      overflow:hidden;
    }
    .service-icon::after{
      content:"";
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
      transform: rotate(18deg);
      pointer-events:none;
    }
    .service-icon svg{
      width: 26px;
      height: 26px;
      opacity: .95;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
    }

    .service-body h3{
      margin: 2px 0 8px;
      font-size: 20px;
      font-weight: 950;
      letter-spacing: .1px;
    }
    .service-body p{
      margin: 0;
      color: rgba(238,243,255,.70);
      font-size: 13px;
      line-height: 1.65;
      max-width: 520px;
    }

    .services-cta{
      display:flex;
      justify-content:center;
      margin-top: 26px;
    }

    .usage-frame{
      margin-top: 44px;
      padding: 40px;
    }

    .usage-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px;
      align-items:center;
    }

    .usage-content h3{
      margin:0 0 18px;
      font-size: 32px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      font-weight: 950;
      text-shadow: 0 14px 30px rgba(0,0,0,.45);
      color: var(--text);
    }

    .usage-content p{
      margin:0;
      color: rgba(238,243,255,.78);
      font-size: 16px;
      line-height: 1.8;
    }

    .usage-image img{
      width:100%;
      height:auto;
      border-radius: var(--radiusSm);
      box-shadow:
        0 26px 60px rgba(0,0,0,.45),
        0 10px 24px rgba(47,125,255,.25);
    }

    /* =========================
       RESPONSIVE
    ========================= */
    @media (max-width: 1080px){
      .nav-links{ display:none; }
      .frame{ padding: 28px; }
      .services-frame{ padding: 34px 28px 30px; }
      .services-head h1{ font-size: 44px; }
      .usage-frame{
        padding: 32px 26px;
      }
    }

    @media (max-width: 760px){
      .services-grid{ grid-template-columns: 1fr; }
      .services-head h1{ font-size: 36px; }
      .btn-lg{ width: 100%; }
      .services-cta{ margin-top: 20px; }
      .brand{ min-width: unset; }
      .usage-grid{
        grid-template-columns: 1fr;
      }
      .usage-content h3{
        font-size: 28px;
      }
    }
  
    .footer-frame{
      margin-top: 36px;
      padding: 48px 40px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.35);
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.8),
        0 26px 40px rgba(5,15,45,.18);
    }

    .footer-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 32px;
      align-items: flex-start;
    }
    .footer-brand{
      grid-column: span 2;
      display:flex;
      flex-direction:column;
      gap: 20px;
      color: rgba(37,63,100,.9);
    }
    .footer-brand-logos{
      display:flex;
      align-items:center;
      gap: 16px;
    }
    .footer-brand-logos img{
      height: 48px;
      width:auto;
    }
    .footer-divider{
      width: 1px;
      height: 52px;
      background: rgba(35,71,142,.35);
    }
    .footer-brand p{
      margin: 0;
      font-size: 14px;
      line-height: 1.7;
    }
    .footer-socials{
      display:flex;
      gap: 12px;
    }
    .footer-socials a{
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: #fff;
      display:grid;
      place-items:center;
      color: #1e2f6c;
      box-shadow: 0 14px 30px rgba(31,94,255,.18);
      transition: transform .2s ease;
    }
    .footer-socials a:hover{
      transform: translateY(-2px);
    }

    .footer-links h4{
      margin: 0 0 12px;
      font-size: 18px;
      color: #1c2a5e;
    }
    .footer-links ul{
      list-style:none;
      padding: 0;
      margin: 0;
      display:flex;
      flex-direction:column;
      gap: 6px;
    }
    .footer-links a{
      color: rgba(33,58,111,.9);
      text-decoration:none;
      font-size: 14px;
      transition: color .2s ease;
    }
    .footer-links a:hover{ color: #1f58ff; }

    .footer-address p{
      margin: 0;
      color: rgba(23,35,74,.85);
      font-size: 14px;
      line-height: 1.7;
    }

    .footer-cradit{
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.6);
      text-align:center;
      font-size: 13px;
      color: rgba(23,35,74,.7);
    }
    .footer-cradit a{ color: #1f58ff; text-decoration:none; }

    /* =========================
       RESPONSIVE
    ========================= */
    @media (max-width: 1080px){
      .nav-links{ display:none; }
      .hero-grid{ grid-template-columns: 1fr; }
      .frame{ padding: 28px; }
      .hero-left h1{ font-size: 44px; }
    }

    @media (max-width: 900px){
      .kpi-grid{ grid-template-columns: 1fr; }
      .hero-left h1{ font-size: 36px; }
      .btn-lg{ width: 100%; }
      .hero-cta{ flex-direction: column; }
      .brand{ min-width: unset; }
    }

    @media (max-width: 960px){
      .footer-grid{
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
      .footer-brand{
        grid-column: 1 / -1;
        text-align: center;
      }
      .footer-brand-logos{
        justify-content: center;
      }
    }

      /* =========================
       FOOTER ? THEME AWARE (FINAL)
    ========================= */
    .footer-frame{
      margin-top: 36px;
      padding: 48px 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);

      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));

      box-shadow: var(--shadowSoft);
      color: var(--text);
    }

    .footer-frame h4{ color: var(--text); }

    .footer-frame p,
    .footer-frame a{ color: var(--muted); }

    .footer-frame a:hover{ color: var(--accent); }

    /* ===== LIGHT THEME OVERRIDE ===== */
    html[data-theme="light"] .footer-frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));

      box-shadow: 0 18px 40px rgba(15,23,42,.10);
      color: var(--text);
    }

    /* ===== CREDIT ===== */
    .footer-cradit{
      border-top: 1px solid var(--border2);
      color: var(--muted);
    }

    .footer-cradit a{ color: var(--accent); }

    /* ===== SOCIAL ICON ===== */
    .footer-socials a{
      background: rgba(255,255,255,.10);
      border: 1px solid var(--border2);
      color: var(--text);
    }

    html[data-theme="light"] .footer-socials a{
      background: rgba(15,23,42,.04);
      border-color: rgba(15,23,42,.10);
      color: rgba(15,23,42,.82);
    }

    /* =========================================================
       SOLID PREMIUM THEMES (GLOBAL)
       - Default: TIDAK diubah
       - Non-default: FULL SOLID & PREMIUM
    ========================================================= */

    /* ---- Perkuat token global ---- */
    :root{
      --borderW: 1.5px;
      --surface1: color-mix(in oklab, var(--bg1) 92%, black);
      --surface2: color-mix(in oklab, var(--bg2) 92%, black);
      --surface3: color-mix(in oklab, var(--bg2) 84%, black);
    }

    /* ---- FULL SOLID THEME PALETTE ---- */
    html[data-theme="dark"]{
      --bg0:#000000; --bg1:#050505; --bg2:#0a0a0a;
      --text:#ffffff; --muted:rgba(255,255,255,.70);
      --accent:#6ea8ff; --accent2:#8b5cf6; --accent3:#22d3ee;
      --border:rgba(255,255,255,.26); --border2:rgba(255,255,255,.18);
      --shadow:0 46px 120px rgba(0,0,0,.78);
      --shadowSoft:0 22px 72px rgba(0,0,0,.55);
    }

    html[data-theme="light"]{
      --bg0:#ffffff; --bg1:#f3f6fb; --bg2:#e8eef7;
      --text:#0b1220; --muted:rgba(11,18,32,.70);
      --accent:#1d4ed8; --accent2:#4338ca; --accent3:#0284c7;
      --border:rgba(11,18,32,.18); --border2:rgba(11,18,32,.10);
      --shadow:0 34px 90px rgba(11,18,32,.18);
      --shadowSoft:0 18px 52px rgba(11,18,32,.14);
    }

    html[data-theme="merah"]{
      --bg0:#1a0507; --bg1:#3b0a0f; --bg2:#6b0f1a;
      --text:#fff7f8; --muted:rgba(255,247,248,.72);
      --accent:#ff3b3b; --accent2:#ff6b6b; --accent3:#ffd1d1;
      --border:rgba(255,255,255,.20); --border2:rgba(255,255,255,.14);
    }

    html[data-theme="kuning"]{
      --bg0:#fffbeb; --bg1:#fef3c7; --bg2:#fde68a;
      --text:#111827; --muted:rgba(17,24,39,.70);
      --accent:#f59e0b; --accent2:#d97706; --accent3:#92400e;
      --border:rgba(17,24,39,.20); --border2:rgba(17,24,39,.12);
    }

    html[data-theme="oren"]{
      --bg0:#1a0a04; --bg1:#3b1106; --bg2:#7c2d12;
      --text:#fff7ed; --muted:rgba(255,247,237,.72);
      --accent:#fb923c; --accent2:#f97316; --accent3:#fdba74;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="hijau-muda"]{
      --bg0:#04150d; --bg1:#052e1a; --bg2:#064e3b;
      --text:#f0fff6; --muted:rgba(240,255,246,.70);
      --accent:#22c55e; --accent2:#16a34a; --accent3:#a3e635;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="biru-muda"]{
      --bg0:#04101f; --bg1:#05243a; --bg2:#0c4a6e;
      --text:#eef9ff; --muted:rgba(238,249,255,.72);
      --accent:#38bdf8; --accent2:#0ea5e9; --accent3:#22d3ee;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="ungu"]{
      --bg0:#0b0615; --bg1:#1e0833; --bg2:#3b0764;
      --text:#fbf7ff; --muted:rgba(251,247,255,.72);
      --accent:#a78bfa; --accent2:#8b5cf6; --accent3:#22d3ee;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="pink"]{
      --bg0:#140511; --bg1:#3b0628; --bg2:#831843;
      --text:#fff4fb; --muted:rgba(255,244,251,.72);
      --accent:#f472b6; --accent2:#ec4899; --accent3:#ffd1ea;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    /* ---- Terapkan FULL SOLID ke semua komponen (NON-default) ---- */
    html:not([data-theme="default"]) body{
      background: linear-gradient(180deg, var(--bg0), var(--bg1) 52%, var(--bg2));
      background-attachment: fixed;
    }

    /* Matikan overlay transparan */
    html:not([data-theme="default"]) body::before,
    html:not([data-theme="default"]) body::after{ opacity:0 !important; }

    /* Header & mobile nav solid */
    html:not([data-theme="default"]) .site-header{
      background:var(--bg0) !important;
      border-bottom:var(--borderW) solid var(--border) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .mobile-nav{
      background:var(--bg0) !important; backdrop-filter:none !important;
    }

    /* Theme menu solid */
    html:not([data-theme="default"]) .theme-menu{
      background:var(--bg1) !important;
      border:var(--borderW) solid var(--border) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .theme-option{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
    }

    /* Frame, cards, footer solid */
    html:not([data-theme="default"]) .frame{
      background:linear-gradient(180deg, var(--surface1), var(--surface2)) !important;
      border:var(--borderW) solid var(--border) !important;
      box-shadow:var(--shadow) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .kpi-card,
    html:not([data-theme="default"]) .feature-card{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
      box-shadow:var(--shadowSoft) !important;
    }
    html:not([data-theme="default"]) .footer-frame{
      background:linear-gradient(180deg, var(--surface1), var(--surface2)) !important;
      border:var(--borderW) solid var(--border) !important;
      box-shadow:var(--shadow) !important;
    }

    /* Buttons & nav pills */
    html:not([data-theme="default"]) .btn{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
      box-shadow:var(--shadowSoft) !important;
    }
    html:not([data-theme="default"]) .btn-primary{
      background:linear-gradient(135deg, var(--accent), var(--accent2)) !important;
      border:1px solid color-mix(in oklab, var(--accent) 50%, transparent) !important;
    }
    html:not([data-theme="default"]) .nav-links a:hover{
      background:color-mix(in oklab, var(--text) 10%, transparent) !important;
    }
    html:not([data-theme="default"]) .nav-links a.active{
      background:color-mix(in oklab, var(--text) 12%, transparent) !important;
    }

    /* KPI bar */
    html:not([data-theme="default"]) .kpi-bar{
      background:color-mix(in oklab, var(--text) 12%, transparent) !important;
    }
    html:not([data-theme="default"]) .kpi-bar i{
      background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
    }
    html {
      overflow-y: scroll !important;
    }
/* =========================================================
      INDEX.html (Variant 04) ? RAPiH + MODERN + 8 TEMA TAMBAHAN
      Base dari file kamu, dirapihin:
      - footer sekarang theme-agnostic (nggak nge-lock ke light)
      - light theme: nav/text/card lebih kebaca
      - theme menu: 11 tema (3 lama + 8 tambahan)
      - caret, spacing, hover, ring dirapihin
      - background tambah layer "city" opsional (kalau asset ada)
    ========================================================= */

    /* =========================
       TOKENS (DEFAULT)
    ========================= */
    :root{
      --max: 1320px;
      --radius: 34px;
      --radiusSm: 18px;

      --text: #f8fbff;
      --muted: rgba(248,251,255,.72);

      --bg0:#020b1f;
      --bg1:#030f2e;
      --bg2:#061a3a;

      --accent:#2f7dff;
      --accent2:#9b5cff;
      --accent3:#00c8e6;

      --border: rgba(160,200,255,.38);
      --border2: rgba(255,255,255,.22);

      --shadow: 0 40px 110px rgba(0,0,0,.65);
      --shadowSoft: 0 22px 70px rgba(0,0,0,.45);

      --ease: cubic-bezier(.2,.8,.2,1);
      --ring: 0 0 0 3px rgba(47,125,255,.22);

      /* City background (opsional ??" kalau file ada akan muncul) */
            --city-img: none;
            --city-img-2: none;
            --city-img-3: none;
    }

    /* =========================
       THEMES (3 lama)
    ========================= */
    html[data-theme="dark"]{
      --bg0:#020202;
      --bg1:#060606;
      --bg2:#0b0b0b;

      --text:#ffffff;
      --muted: rgba(255,255,255,.68);

      --accent:#6ea8ff;
      --accent2:#8b5cf6;
      --accent3:#00d2ff;

      --border: rgba(255,255,255,.28);
      --border2: rgba(255,255,255,.18);
    }

    html[data-theme="light"]{
      --bg0:#ffffff;
      --bg1:#f4f7fb;
      --bg2:#e9eef5;

      --text:#0b1220;
      --muted: rgba(11,18,32,.68);

      --border: rgba(11,18,32,.18);
      --border2: rgba(11,18,32,.10);

      --shadow: 0 30px 80px rgba(11,18,32,.18);
      --ring: 0 0 0 3px rgba(37,99,235,.25);
    }

    /* =========================
       7 TEMA TAMBAHAN (WARNA)
       (total = 10 tema: default, dark, light + 7 warna)
    ========================= */
    html[data-theme="merah"]{
      --bg0:#3b0606; --bg1:#7f1d1d; --bg2:#991b1b;
      --accent:#ef4444; --accent2:#dc2626; --accent3:#ff7b7b;
      --border: rgba(255,255,255,.18); --border2: rgba(255,255,255,.12);
      --text:#fff6f6; --muted: rgba(255,246,246,.72);
      --ring: 0 0 0 3px rgba(255,59,59,.22);
    }

    html[data-theme="kuning"]{
      --bg0:#fffbeb; --bg1:#fef3c7; --bg2:#fde68a;
      --accent:#f59e0b; --accent2:#d97706; --accent3:#fbbf24;
      --border: rgba(146,64,14,.28); --border2: rgba(255,255,255,.12);
      --text:#0f172a; --muted: rgba(15,23,42,.62);
      --shadow: 0 28px 60px rgba(15,23,42,.10);
      --shadowSoft: 0 18px 35px rgba(15,23,42,.10);
      --ring: 0 0 0 3px rgba(234,179,8,.25);
    }

    html[data-theme="oren"]{
      --bg0:#2b0f04; --bg1:#7c2d12; --bg2:#9a3412;
      --accent:#fb923c; --accent2:#f97316; --accent3:#fbbf24;
      --border: rgba(251,146,60,.22); --border2: rgba(255,255,255,.12);
      --text:#fff7ed; --muted: rgba(255,247,237,.72);
      --ring: 0 0 0 3px rgba(251,146,60,.22);
    }

    html[data-theme="hijau-muda"]{
      --bg0:#052e1a; --bg1:#064e3b; --bg2:#065f46;
      --accent:#22c55e; --accent2:#16a34a; --accent3:#a3e635;
      --border: rgba(52,211,153,.22); --border2: rgba(255,255,255,.12);
      --text:#f0fff6; --muted: rgba(240,255,246,.70);
      --ring: 0 0 0 3px rgba(52,211,153,.22);
    }

    html[data-theme="biru-muda"]{
      --bg0:#041c2c; --bg1:#0c4a6e; --bg2:#075985;
      --accent:#38bdf8; --accent2:#0ea5e9; --accent3:#22d3ee;
      --border: rgba(56,189,248,.26); --border2: rgba(255,255,255,.14);
      --text:#eef9ff; --muted: rgba(238,249,255,.74);
      --ring: 0 0 0 3px rgba(56,189,248,.22);
    }

    html[data-theme="ungu"]{
      --bg0:#1e0833; --bg1:#3b0764; --bg2:#581c87;
      --accent:#a78bfa; --accent2:#8b5cf6; --accent3:#22d3ee;
      --border: rgba(167,139,250,.22); --border2: rgba(255,255,255,.12);
      --text:#f7f3ff; --muted: rgba(247,243,255,.72);
      --ring: 0 0 0 3px rgba(167,139,250,.22);
    }

    html[data-theme="pink"]{
      --bg0:#3b0628; --bg1:#831843; --bg2:#9d174d;
      --accent:#f472b6; --accent2:#ec4899; --accent3:#39d3ff;
      --border: rgba(255,130,226,.26); --border2: rgba(255,255,255,.14);
      --text:#fff4fb; --muted: rgba(255,244,251,.74);
      --ring: 0 0 0 3px rgba(255,79,216,.22);
    }

*{ box-sizing:border-box; }
    html,body{ min-height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;

      /* fallback gradient always works */
      background:
        radial-gradient(1300px 760px at 28% 0%, color-mix(in oklab, var(--accent) 44%, transparent), transparent 60%),
        radial-gradient(1050px 720px at 86% 36%, color-mix(in oklab, var(--accent2) 26%, transparent), transparent 64%),
        radial-gradient(900px 620px at 52% 85%, color-mix(in oklab, var(--accent3) 14%, transparent), transparent 65%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
      background-attachment: fixed, fixed, fixed, fixed;
    }

    /* City skyline layer (opsional) */
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      z-index: -3;
      background-image: var(--city-img), var(--city-img-2), var(--city-img-3);
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      opacity: .22;
      filter: saturate(1.05) contrast(1.05);
      pointer-events: none;
    }

    /* Overlay supaya tetap kontras */
    body::after{
      content:"";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(1200px 760px at 22% 8%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 62%),
        radial-gradient(980px 720px at 86% 30%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 66%),
        linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.26) 42%, rgba(0,0,0,.40));
    }
    html[data-theme="light"] body::after,
    html[data-theme="ivory"] body::after{
      background:
        radial-gradient(1100px 680px at 18% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 62%),
        radial-gradient(980px 640px at 84% 24%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 66%),
        linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.76) 42%, rgba(255,255,255,.62));
    }
    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    a, button { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible{ outline: none; box-shadow: var(--ring); }
    img, video, iframe{ max-width:100%; height:auto; display:block; }

    .page{ min-height:100vh; }
    .main{ max-width: var(--max); margin: 0 auto; padding: 22px 22px 90px; }

    /* =========================
       HEADER (glass)
    ========================= */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 14px 16px;
      background: linear-gradient(180deg, rgba(8,22,52,.92), rgba(8,22,52,.62));
      border-bottom: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .site-header,
    html[data-theme="ivory"] .site-header{
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
      border-bottom: 1px solid rgba(15,23,42,.10);
    }

    .header-inner{
      max-width: var(--max);
      margin: 0 auto;
      display:flex;
      align-items:center;
      gap: 18px;
      min-height: 54px;
    }
    .container, .header-inner, .footer-inner{
      width: min(var(--max, 1200px), 100% - 2rem);
      margin-inline: auto;
    }

    .brand{ display:flex; align-items:center; gap: 10px; min-width: 170px; }

    .nav-links{
      flex: 1;
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      white-space: nowrap;
    }
    .mobile-nav{
      position: fixed;
      inset: 0;
      padding: 80px 24px 32px;
      background: rgba(5,21,48,0.95);
      backdrop-filter: blur(20px);
      display:flex;
      flex-direction:column;
      gap: 18px;
      transform: translateY(-100%);
      opacity:0;
      pointer-events:none;
      transition: transform .3s var(--ease), opacity .3s var(--ease);
      z-index:55;
      overflow-y: auto;
    }
    .mobile-nav a{
      color: var(--text);
      text-decoration:none;
      font-size: 16px;
      font-weight: 700;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid transparent;
      transition: border-color .2s var(--ease);
    }
    .mobile-nav.open{
      transform: translateY(0);
      opacity:1;
      pointer-events:auto;
    }
    .mobile-nav a:hover{ border-color: rgba(255,255,255,0.2); }

    .nav-links a{
      color: var(--muted);
      text-decoration:none;
      font-size: 13px;
      font-weight: 850;
      padding: 10px 12px;
      border-radius: 999px;
      position: relative;
      transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
    }
    .nav-links a:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
    .nav-links a.active{ color: var(--text); background: rgba(255,255,255,.06); }
    .nav-links a.active::after{
      content:"";
      position:absolute;
      left: 18%; right: 18%;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
      box-shadow: 0 0 14px rgba(120,180,255,.35);
    }

    html[data-theme="light"] .nav-links a,
    html[data-theme="ivory"] .nav-links a{ color: rgba(15,23,42,.78); }
    html[data-theme="light"] .nav-links a:hover,
    html[data-theme="ivory"] .nav-links a:hover{ background: rgba(15,23,42,.06); }
    html[data-theme="light"] .nav-links a.active,
    html[data-theme="ivory"] .nav-links a.active{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }
    html[data-theme="light"] .nav-links a.active::after,
    html[data-theme="ivory"] .nav-links a.active::after{
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 92%, transparent), transparent);
      box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 26%, transparent);
    }

    .header-actions{ display:flex; align-items:center; gap: 10px; }
    .nav-toggle{
      display:none;
      border:none;
      background:rgba(255,255,255,0.08);
      color:var(--text);
      width: 48px;
      height: 48px;
      border-radius: 14px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      transition: background .2s var(--ease);
    }
    .nav-toggle:hover{ background: rgba(255,255,255,0.13); }
    .nav-toggle span{
      display:block;
      width: 22px;
      height: 2px;
      background:currentColor;
      border-radius: 999px;
      margin-bottom: 5px;
      transition: transform .3s var(--ease);
    }
    .nav-toggle span:last-child{ margin-bottom: 0; }
    .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity: 0; }
    .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* =========================
       BUTTONS
    ========================= */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .1px;
      text-decoration:none;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
      cursor:pointer;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
      user-select: none;
    }
    .btn:hover{
      background: rgba(255,255,255,.10);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .btn-outline{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }

    .btn-primary{
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow:
        0 16px 42px color-mix(in oklab, var(--accent) 28%, transparent),
        0 10px 24px color-mix(in oklab, var(--accent2) 18%, transparent);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(220px 120px at 20% 30%, rgba(255,255,255,.40), transparent 60%);
      opacity:.22;
      pointer-events:none;
    }

    .btn-lg{ height: 56px; padding: 0 30px; font-size: 14px; }

    .caret{
      display:inline-flex;
      margin-left: 8px;
      font-size: 12px;
      opacity: .95;
      transform: translateY(1px);
      transition: transform .2s var(--ease);
    }
    .theme-toggle[aria-expanded="true"] .caret{ transform: translateY(1px) rotate(180deg); }

    /* light/ivory buttons */
    html[data-theme="light"] .btn,
    html[data-theme="ivory"] .btn{
      color: rgba(15,23,42,.92);
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.70);
      box-shadow: 0 12px 26px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .btn:hover,
    html[data-theme="ivory"] .btn:hover{
      background: rgba(255,255,255,.82);
      border-color: rgba(15,23,42,.14);
    }
    html[data-theme="light"] .btn-outline,
    html[data-theme="ivory"] .btn-outline{ background: rgba(255,255,255,.62); }

    /* =========================
       THEME MENU
    ========================= */
    .theme-picker{ position:relative; }
    .theme-menu{
      position:absolute;
      right: 0;
      top: calc(100% + 10px);
      width: 250px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(10,20,40,.96);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadowSoft);
      backdrop-filter: blur(10px);

      transform-origin: top right;
      transform: translateY(-4px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s var(--ease), opacity .18s var(--ease);
      max-height: 360px;
      overflow: auto;
    }
    .theme-menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
    html[data-theme="light"] .theme-menu,
    html[data-theme="ivory"] .theme-menu{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.12);
    }

    .theme-option{
      width:100%;
      text-align:left;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 14px;
      cursor:pointer;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
      display:flex;
      flex-direction:column;
      gap: 4px;
      align-items:flex-start;
    }
    .theme-option:last-child{ margin-bottom: 0; }
    .theme-option-label{ font-size: 13px; font-weight: 950; }
    .theme-option-meta{ font-size: 12px; color: var(--muted); }
    .theme-option:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); border-color: rgba(255,255,255,.20); }

    html[data-theme="light"] .theme-option,
    html[data-theme="ivory"] .theme-option{
      border-color: rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      color: rgba(15,23,42,.92);
    }
    html[data-theme="light"] .theme-option:hover,
    html[data-theme="ivory"] .theme-option:hover{
      background: rgba(15,23,42,.05);
      border-color: rgba(15,23,42,.14);
    }

    @media (max-width: 520px){
      .theme-menu{ right: auto; left: 0; transform-origin: top left; width: min(280px, calc(100vw - 48px)); }
    }

    /* =========================
       FRAME / CARD BESAR (glass)
    ========================= */
    .frame{
      border-radius: var(--radius);
      padding: 44px;
      border: 1px solid var(--border);

      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));

      box-shadow:
        var(--shadow),
        0 0 52px color-mix(in oklab, var(--accent) 10%, transparent),
        0 0 58px color-mix(in oklab, var(--accent2) 8%, transparent);
      position:relative;
      overflow:hidden;
      backdrop-filter: blur(10px);
    }

    .frame::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.11),
        inset 0 0 26px rgba(120,180,255,.10);
    }

    html[data-theme="light"] .frame,
    html[data-theme="ivory"] .frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
      box-shadow: var(--shadow);
    }

    .hero-frame{ margin-top: 18px; }
    .section-frame{ margin-top: 28px; }

    /* =========================
       HERO GRID
    ========================= */
    .hero-grid{
      display:grid;
      grid-template-columns: 1.18fr 1fr;
      gap: 42px;
      align-items: start;
    }

    .hero-left h1{
      margin: 0 0 18px;
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
    }
    html[data-theme="light"] .hero-left h1,
    html[data-theme="ivory"] .hero-left h1{ text-shadow: 0 18px 40px rgba(15,23,42,.10); }

    .lead{
      margin: 0 0 30px;
      color: var(--muted);
      max-width: 660px;
      line-height: 1.65;
      font-size: 15px;
    }

    .hero-cta{ display:flex; gap: 14px; margin: 0 0 18px; }

    .chips{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
    .chip{
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.055);
      color: rgba(238,243,255,.92);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(0,0,0,.18);
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
    }
    .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.26); }

    html[data-theme="light"] .chip,
    html[data-theme="ivory"] .chip{
      border-color: rgba(15,23,42,.12);
      background: rgba(255,255,255,.70);
      color: rgba(15,23,42,.78);
      box-shadow: 0 12px 24px rgba(15,23,42,.10);
    }

    /* =========================
       RIGHT PANEL (KPI)
    ========================= */
    .panel-title h3{ margin: 6px 0 8px; font-size: 17px; font-weight: 950; }
    .panel-title p{ margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }

    .kpi-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px;
    }
    @media (min-width: 1240px){ .kpi-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

    .kpi-card{
      border-radius: 18px;
      padding: 16px 16px 14px;
      border: 1px solid rgba(255,255,255,.17);
      background: color-mix(in oklab, var(--bg1) 60%, transparent);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 18px 44px rgba(0,0,0,.24);

      display:flex;
      flex-direction: column;
      min-height: 126px;
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .kpi-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: color-mix(in oklab, var(--bg1) 70%, transparent); }

    html[data-theme="light"] .kpi-card,
    html[data-theme="ivory"] .kpi-card{
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.76);
      box-shadow: 0 18px 40px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .kpi-card:hover,
    html[data-theme="ivory"] .kpi-card:hover{ background: rgba(255,255,255,.86); }

    .kpi-label{ display:block; font-size: 11px; font-weight: 900; color: rgba(238,243,255,.74); margin-bottom: 8px; }
    .kpi-value{ font-size: 20px; font-weight: 950; letter-spacing: .2px; }

    .kpi-bar{
      height: 4px;
      margin: 12px 0 10px;
      background: rgba(255,255,255,.13);
      border-radius: 999px;
      overflow:hidden;
    }
    .kpi-bar i{
      display:block;
      height:100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 18%, transparent);
    }

    .kpi-meta{
      display:flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 900;
      color: rgba(238,243,255,.65);
      margin-top: auto;
    }

    html[data-theme="light"] .kpi-label,
    html[data-theme="ivory"] .kpi-label{ color: rgba(15,23,42,.64); }
    html[data-theme="light"] .kpi-meta,
    html[data-theme="ivory"] .kpi-meta{ color: rgba(15,23,42,.58); }
    html[data-theme="light"] .kpi-bar,
    html[data-theme="ivory"] .kpi-bar{ background: rgba(15,23,42,.10); }

    /* =========================
       SECTION BAWAH
    ========================= */
    .section-frame h2{
      margin: 0 0 22px;
      font-size: 38px;
      letter-spacing: -0.02em;
      text-shadow: 0 14px 38px rgba(0,0,0,.25);
    }
    html[data-theme="light"] .section-frame h2,
    html[data-theme="ivory"] .section-frame h2{ text-shadow: 0 14px 34px rgba(15,23,42,.10); }

    .feature-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
    .feature-card{
      border-radius: 20px;
      padding: 20px;
      background: color-mix(in oklab, var(--bg1) 56%, transparent);
      border: 1px solid rgba(255,255,255,.17);
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
      transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .feature-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: color-mix(in oklab, var(--bg1) 66%, transparent); }
    .feature-card h3{ margin: 0 0 10px; font-size: 15px; font-weight: 950; }
    .feature-card p{ margin: 0; color: rgba(238,243,255,.72); font-size: 13px; line-height: 1.65; }

    html[data-theme="light"] .feature-card,
    html[data-theme="ivory"] .feature-card{
      background: rgba(255,255,255,.76);
      border-color: rgba(15,23,42,.10);
      box-shadow: 0 18px 42px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .feature-card:hover,
    html[data-theme="ivory"] .feature-card:hover{ background: rgba(255,255,255,.86); }
    html[data-theme="light"] .feature-card p,
    html[data-theme="ivory"] .feature-card p{ color: rgba(15,23,42,.70); }

    /* =========================
       FOOTER (THEME-AGNOSTIC)
    ========================= */
    .footer-frame{
      margin-top: 36px;
      padding: 48px 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));
      box-shadow: var(--shadowSoft);
    }
    html[data-theme="light"] .footer-frame,
    html[data-theme="ivory"] .footer-frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
      box-shadow: 0 18px 40px rgba(15,23,42,.10);
    }

    .footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; align-items: flex-start; }
    .footer-brand{ grid-column: span 2; display:flex; flex-direction:column; gap: 20px; }
    .footer-brand p{ margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

    .footer-brand-logos{ display:flex; align-items:center; gap: 16px; }
    .footer-brand-logos img{ height: 48px; width:auto; }
    .footer-divider{ width: 1px; height: 52px; background: rgba(255,255,255,.28); }
    html[data-theme="light"] .footer-divider,
    html[data-theme="ivory"] .footer-divider{ background: rgba(15,23,42,.18); }

    .footer-socials{ display:flex; gap: 12px; }
    .footer-socials a{
      width: 42px; height: 42px; border-radius: 999px;
      background: rgba(255,255,255,.10);
      display:grid; place-items:center;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 14px 30px rgba(0,0,0,.16);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
      text-decoration:none;
    }
    .footer-socials a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
    html[data-theme="light"] .footer-socials a,
    html[data-theme="ivory"] .footer-socials a{
      background: rgba(15,23,42,.04);
      border-color: rgba(15,23,42,.10);
      color: rgba(15,23,42,.82);
      box-shadow: 0 12px 26px rgba(15,23,42,.08);
    }

    .footer-links h4{ margin: 0 0 12px; font-size: 18px; color: var(--text); }
    html[data-theme="light"] .footer-links h4,
    html[data-theme="ivory"] .footer-links h4{ color: rgba(15,23,42,.90); }

    .footer-links ul{ list-style:none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 6px; }
    .footer-links a{
      color: rgba(238,243,255,.86);
      text-decoration:none;
      font-size: 14px;
      transition: color .2s ease, opacity .2s ease;
      opacity: .92;
    }
    .footer-links a:hover{ color: var(--accent); opacity: 1; }
    html[data-theme="light"] .footer-links a,
    html[data-theme="ivory"] .footer-links a{ color: rgba(15,23,42,.76); }
    html[data-theme="light"] .footer-links a:hover,
    html[data-theme="ivory"] .footer-links a:hover{ color: rgba(14,165,233,1); }

    .footer-address p{ margin: 0; color: rgba(238,243,255,.82); font-size: 14px; line-height: 1.7; }
    html[data-theme="light"] .footer-address p,
    html[data-theme="ivory"] .footer-address p{ color: rgba(15,23,42,.72); }

    .footer-cradit{
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.16);
      text-align:center;
      font-size: 13px;
      color: rgba(238,243,255,.70);
    }
    html[data-theme="light"] .footer-cradit,
    html[data-theme="ivory"] .footer-cradit{ border-top-color: rgba(15,23,42,.10); color: rgba(15,23,42,.60); }
    .footer-cradit a{ color: var(--accent); text-decoration:none; }

    /* =========================
       FLOAT WHATSAPP
    ========================= */
    .float{
      position:fixed;
      width:60px; height:60px;
      right:24px; bottom:24px;
      background-color:#25d366;
      color:#fff;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 20px rgba(0,0,0,.25);
      cursor:pointer;
      z-index:60;
      text-decoration:none;
    }
    .float:hover{ box-shadow:0 14px 30px rgba(0,0,0,.35); }
    .float i{ font-size:28px; }

    /* =========================
       RESPONSIVE
    ========================= */
    @media (max-width: 1080px){
      .nav-links{ display:none; }
      .hero-grid{ grid-template-columns: 1fr; }
      .frame{ padding: 28px; }
      .hero-left h1{ font-size: 44px; }
    }
    @media (max-width: 900px){
      .kpi-grid{ grid-template-columns: 1fr; }
      .hero-left h1{ font-size: 36px; }
      .btn-lg{ width: 100%; }
      .hero-cta{ flex-direction: column; }
      .brand{ min-width: unset; }
    }
  @media (max-width: 960px){
    .footer-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .footer-brand{ grid-column: 1 / -1; text-align: center; }
    .footer-brand-logos{ justify-content: center; }
  }
  /* RESPONSIVE OVERRIDES (final) */
  h1{ font-size: clamp(2.4rem, 3vw, 4.6rem); line-height: 1.1; }
  h2{ font-size: clamp(1.9rem, 2.6vw, 2.8rem); line-height: 1.2; }
  p{ font-size: clamp(0.95rem, 2vw, 1.1rem); }
  .frame{ padding: clamp(24px, 3vw, 44px); }
  .hero-grid{ gap: clamp(28px, 4vw, 48px); }
  .hero-cta .btn{ width: auto; font-size: clamp(0.95rem, 2vw, 1rem); }
  .feature-grid{ gap: clamp(16px, 2vw, 20px); }
  .kpi-grid{ gap: clamp(12px, 2vw, 20px); }

  @media (max-width: 900px){
    .nav-toggle{ display:inline-flex; }
    .header-actions{ gap: 12px; justify-content:flex-end; }
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-cta{ flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-cta .btn{ width: 100%; }
    .feature-grid{ grid-template-columns: 1fr; }
    .kpi-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .mobile-nav{ padding-top: 90px; }
  }

  @media (min-width: 721px) and (max-width: 1024px){
    .nav-links{ display:flex; }
    .header-actions{ gap: 14px; }
    .hero-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-cta{ flex-wrap: wrap; }
    .hero-cta .btn{ flex:1 1 45%; }
  }

  @media (min-width: 1025px){
    .nav-toggle{ display:none; }
    .mobile-nav{ display:none; }
  }


    /* =========================
       FOOTER ? THEME AWARE (FINAL)
    ========================= */
    .footer-frame{
      margin-top: 36px;
      padding: 48px 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);

      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 70%),
        radial-gradient(900px 700px at 50% 120%, color-mix(in oklab, var(--accent3) 10%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.032));

      box-shadow: var(--shadowSoft);
      color: var(--text);
    }

    .footer-frame h4{ color: var(--text); }

    .footer-frame p,
    .footer-frame a{ color: var(--muted); }

    .footer-frame a:hover{ color: var(--accent); }

    /* ===== LIGHT THEME OVERRIDE ===== */
    html[data-theme="light"] .footer-frame{
      background:
        radial-gradient(980px 540px at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%),
        radial-gradient(860px 560px at 88% 30%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));

      box-shadow: 0 18px 40px rgba(15,23,42,.10);
      color: var(--text);
    }

    /* ===== CREDIT ===== */
    .footer-cradit{
      border-top: 1px solid var(--border2);
      color: var(--muted);
    }

    .footer-cradit a{ color: var(--accent); }

    /* ===== SOCIAL ICON ===== */
    .footer-socials a{
      background: rgba(255,255,255,.10);
      border: 1px solid var(--border2);
      color: var(--text);
    }

    html[data-theme="light"] .footer-socials a{
      background: rgba(15,23,42,.04);
      border-color: rgba(15,23,42,.10);
      color: rgba(15,23,42,.82);
    }

    /* =========================================================
       SOLID PREMIUM THEMES (GLOBAL)
       - Default: TIDAK diubah
       - Non-default: FULL SOLID & PREMIUM
    ========================================================= */

    /* ---- Perkuat token global ---- */
    :root{
      --borderW: 1.5px;
      --surface1: color-mix(in oklab, var(--bg1) 92%, black);
      --surface2: color-mix(in oklab, var(--bg2) 92%, black);
      --surface3: color-mix(in oklab, var(--bg2) 84%, black);
    }

    /* ---- FULL SOLID THEME PALETTE ---- */
    html[data-theme="dark"]{
      --bg0:#000000; --bg1:#050505; --bg2:#0a0a0a;
      --text:#ffffff; --muted:rgba(255,255,255,.70);
      --accent:#6ea8ff; --accent2:#8b5cf6; --accent3:#22d3ee;
      --border:rgba(255,255,255,.26); --border2:rgba(255,255,255,.18);
      --shadow:0 46px 120px rgba(0,0,0,.78);
      --shadowSoft:0 22px 72px rgba(0,0,0,.55);
    }

    html[data-theme="light"]{
      --bg0:#ffffff; --bg1:#f3f6fb; --bg2:#e8eef7;
      --text:#0b1220; --muted:rgba(11,18,32,.70);
      --accent:#1d4ed8; --accent2:#4338ca; --accent3:#0284c7;
      --border:rgba(11,18,32,.18); --border2:rgba(11,18,32,.10);
      --shadow:0 34px 90px rgba(11,18,32,.18);
      --shadowSoft:0 18px 52px rgba(11,18,32,.14);
    }

    html[data-theme="merah"]{
      --bg0:#1a0507; --bg1:#3b0a0f; --bg2:#6b0f1a;
      --text:#fff7f8; --muted:rgba(255,247,248,.72);
      --accent:#ff3b3b; --accent2:#ff6b6b; --accent3:#ffd1d1;
      --border:rgba(255,255,255,.20); --border2:rgba(255,255,255,.14);
    }

    html[data-theme="kuning"]{
      --bg0:#fffbeb; --bg1:#fef3c7; --bg2:#fde68a;
      --text:#111827; --muted:rgba(17,24,39,.70);
      --accent:#f59e0b; --accent2:#d97706; --accent3:#92400e;
      --border:rgba(17,24,39,.20); --border2:rgba(17,24,39,.12);
    }

    html[data-theme="oren"]{
      --bg0:#1a0a04; --bg1:#3b1106; --bg2:#7c2d12;
      --text:#fff7ed; --muted:rgba(255,247,237,.72);
      --accent:#fb923c; --accent2:#f97316; --accent3:#fdba74;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="hijau-muda"]{
      --bg0:#04150d; --bg1:#052e1a; --bg2:#064e3b;
      --text:#f0fff6; --muted:rgba(240,255,246,.70);
      --accent:#22c55e; --accent2:#16a34a; --accent3:#a3e635;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="biru-muda"]{
      --bg0:#04101f; --bg1:#05243a; --bg2:#0c4a6e;
      --text:#eef9ff; --muted:rgba(238,249,255,.72);
      --accent:#38bdf8; --accent2:#0ea5e9; --accent3:#22d3ee;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="ungu"]{
      --bg0:#0b0615; --bg1:#1e0833; --bg2:#3b0764;
      --text:#fbf7ff; --muted:rgba(251,247,255,.72);
      --accent:#a78bfa; --accent2:#8b5cf6; --accent3:#22d3ee;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    html[data-theme="pink"]{
      --bg0:#140511; --bg1:#3b0628; --bg2:#831843;
      --text:#fff4fb; --muted:rgba(255,244,251,.72);
      --accent:#f472b6; --accent2:#ec4899; --accent3:#ffd1ea;
      --border:rgba(255,255,255,.18); --border2:rgba(255,255,255,.12);
    }

    /* ---- Terapkan FULL SOLID ke semua komponen (NON-default) ---- */
    html:not([data-theme="default"]) body{
      background: linear-gradient(180deg, var(--bg0), var(--bg1) 52%, var(--bg2));
      background-attachment: fixed;
    }

    /* Matikan overlay transparan */
    html:not([data-theme="default"]) body::before,
    html:not([data-theme="default"]) body::after{ opacity:0 !important; }

    /* Header & mobile nav solid */
    html:not([data-theme="default"]) .site-header{
      background:var(--bg0) !important;
      border-bottom:var(--borderW) solid var(--border) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .mobile-nav{
      background:var(--bg0) !important; backdrop-filter:none !important;
    }

    /* Theme menu solid */
    html:not([data-theme="default"]) .theme-menu{
      background:var(--bg1) !important;
      border:var(--borderW) solid var(--border) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .theme-option{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
    }

    /* Frame, cards, footer solid */
    html:not([data-theme="default"]) .frame{
      background:linear-gradient(180deg, var(--surface1), var(--surface2)) !important;
      border:var(--borderW) solid var(--border) !important;
      box-shadow:var(--shadow) !important;
      backdrop-filter:none !important;
    }
    html:not([data-theme="default"]) .kpi-card,
    html:not([data-theme="default"]) .feature-card{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
      box-shadow:var(--shadowSoft) !important;
    }
    html:not([data-theme="default"]) .footer-frame{
      background:linear-gradient(180deg, var(--surface1), var(--surface2)) !important;
      border:var(--borderW) solid var(--border) !important;
      box-shadow:var(--shadow) !important;
    }

    /* Buttons & nav pills */
    html:not([data-theme="default"]) .btn{
      background:var(--surface3) !important;
      border:var(--borderW) solid var(--border2) !important;
      box-shadow:var(--shadowSoft) !important;
    }
    html:not([data-theme="default"]) .btn-primary{
      background:linear-gradient(135deg, var(--accent), var(--accent2)) !important;
      border:1px solid color-mix(in oklab, var(--accent) 50%, transparent) !important;
    }
    html:not([data-theme="default"]) .nav-links a:hover{
      background:color-mix(in oklab, var(--text) 10%, transparent) !important;
    }
    html:not([data-theme="default"]) .nav-links a.active{
      background:color-mix(in oklab, var(--text) 12%, transparent) !important;
    }

    /* KPI bar */
    html:not([data-theme="default"]) .kpi-bar{
      background:color-mix(in oklab, var(--text) 12%, transparent) !important;
    }
    html:not([data-theme="default"]) .kpi-bar i{
      background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
    }

/* =========================================================
   FINAL RESPONSIVE + PERFORMANCE OVERRIDE (SAFE)
   TEMPATKAN: PALING BAWAH <style> (sebelum </style)
   - TIDAK ubah struktur / TIDAK hapus elemen
   - Memperbaiki kerapihan semua device
   - Menutup bug breakpoint nav 1025?1080 (nav bisa hilang)
   - Mengurangi lag pada device kentang (mobile/reduced-motion)
========================================================= */

/* ---------- A) Global polish (semua device) ---------- */
:root{
  --padX: clamp(14px, 2.2vw, 22px);
  --padY: clamp(18px, 2.6vw, 28px);
}

.main{
  padding-left: var(--padX) !important;
  padding-right: var(--padX) !important;
  padding-bottom: clamp(70px, 8vw, 90px) !important;
}

.frame{
  padding: clamp(22px, 3vw, 44px) !important;
}

.hero-grid{
  gap: clamp(22px, 4vw, 48px) !important;
}

/* cegah kepotong/overflow halus */
.theme-menu{ max-height: min(360px, calc(100vh - 110px)) !important; }
.mobile-nav{ overscroll-behavior: contain !important; }
.nav-links a{ line-height: 1 !important; }


/* ---------- B) FIX NAV breakpoint 1025?1080 (anti ?nav hilang?) ---------- */
@media (min-width: 1025px) and (max-width: 1080px){
  .nav-links{ display:flex !important; }
  .nav-toggle{ display:none !important; }
  .mobile-nav{ display:none !important; }
}


/* ---------- C) Tablet (768?1024): rapi grid & spacing ---------- */
@media (min-width: 768px) and (max-width: 1024px){
  .header-inner{ gap: 14px !important; }
  .brand{ min-width: 150px !important; }

  .hero-grid{
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
  }

  .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ---------- D) Mobile (<=720): super rapi, nyaman dibaca ---------- */
@media (max-width: 900px){
  .site-header{ padding: 12px 12px !important; }
  .header-inner{ min-height: 52px !important; }

  .header-actions{ gap: 10px !important; }

  .header-actions .btn{
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }

  .hero-left h1{
    font-size: clamp(30px, 7.2vw, 38px) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  .lead{
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
  }

  .hero-cta{ gap: 12px !important; }
  .btn-lg{ height: 52px !important; }

  .chip{
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  .kpi-card{ min-height: unset !important; }
  .kpi-value{ font-size: 19px !important; }
  .kpi-label{ font-size: 11px !important; }

  .section-frame h2{
    font-size: clamp(24px, 6.2vw, 32px) !important;
    margin-bottom: 16px !important;
  }

  .footer-frame{ padding: 34px 22px !important; }
  .footer-brand-logos img{ height: 44px !important; }
  .footer-socials{ justify-content: center !important; flex-wrap: wrap !important; }
  .footer-socials a{ width: 40px !important; height: 40px !important; }

  /* Floating WA tidak nutup konten */
  .float{
    width: 54px !important;
    height: 54px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
  .float i{ font-size: 26px !important; }
}


/* ---------- E) Small mobile (<=360): safety biar tidak overflow ---------- */
@media (max-width: 360px){
  .header-actions .btn{
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  .theme-menu{
    width: min(280px, calc(100vw - 28px)) !important;
  }
}


/* ---------- F) Desktop besar: tetap premium & lega ---------- */
@media (min-width: 1240px){
  .hero-left h1{ font-size: 58px !important; }
  .section-frame h2{ font-size: 40px !important; }
}


/* =========================================================
   PERF LITE MODE (Kentang Friendly)
   - Efek mahal dimatikan hanya di mobile / reduced motion
========================================================= */

/* Mobile: matikan fixed multi-layer + blur + shadow berlebihan + anim */
@media (max-width: 900px){
  body{ background-attachment: scroll !important; }

  body::before{
    position: absolute !important;
    opacity: .12 !important;
    filter: none !important;
    will-change: auto !important;
  }
  body::after{
    filter: none !important;
    will-change: auto !important;
  }

  .site-header,
  .mobile-nav,
  .theme-menu,
  .frame{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .frame{ box-shadow: 0 18px 50px rgba(0,0,0,.35) !important; }
  .kpi-card, .feature-card, .footer-frame{ box-shadow: 0 12px 26px rgba(0,0,0,.22) !important; }

  .btn, .chip, .kpi-card, .feature-card, .nav-links a, .mobile-nav{
    transition: none !important;
    transform: none !important;
  }
}

/* Reduced motion: aman & halus */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .btn, .chip, .kpi-card, .feature-card, .nav-links a, .mobile-nav{
    transition: none !important;
    transform: none !important;
  }
  body{ background-attachment: scroll !important; }
  body::before, body::after{ filter:none !important; }
  .site-header, .mobile-nav, .theme-menu, .frame{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Browser lemah: jangan paksa blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header, .mobile-nav, .theme-menu, .frame{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Touch device: hover berat dimatikan */
@media (hover: none){
  .btn:hover, .chip:hover, .kpi-card:hover, .feature-card:hover, .nav-links a:hover{
    transform: none !important;
    box-shadow: inherit !important;
  }
}
/* ===============================
   MOBILE NAV FIX (AMAN)
   =============================== */
.mobile-nav{
  padding-top: 110px !important; /* biar tidak nabrak header */
  gap: 22px !important;
}

/* tombol silang */
.mobile-close{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  color: var(--text);
  display: grid;
  place-items: center;
  z-index: 5;
}

.mobile-close:hover{
  background: rgba(255,255,255,.22);
}

/* menu lebih lega */
.mobile-nav a{
  padding: 14px 18px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}
/* ===============================
   HEADER LEFT SPACING ? LEBIH LEGA (AMAN)
   Tempel PALING BAWAH <style>
   Tidak mengubah struktur, hanya spacing
   =============================== */

/* jarak header keseluruhan sedikit lebih lega (mobile) */
@media (max-width: 900px){
  .site-header{ padding: 14px 14px !important; }
  .header-inner{
    gap: 14px !important;           /* jarak antar kolom header */
    min-height: 56px !important;
  }

  /* area logo + hamburger lebih rapih */
  .brand{
    gap: 12px !important;
    min-width: unset !important;
  }

  /* jarak hamburger dari logo (ini yang bikin ?lega?) */
  .nav-toggle{
    margin-left: 6px !important;
  }

  /* tombol di kanan biar gak sempit */
  .header-actions{ gap: 12px !important; }
  .header-actions .btn{
    height: 40px !important;
    padding: 0 14px !important;
  }
}

/* jika layar sangat kecil, rapihin lagi biar tidak mepet */
@media (max-width: 360px){
  .site-header{ padding: 12px 12px !important; }
  .header-actions{ gap: 10px !important; }
}

/* =========================================================
   HEADER MOBILE RAPiH & LEGA (430/412/390/360) ? AMAN
   - Hanya merapikan header agar tidak mepet
   - Desktop/tablet tidak berubah
========================================================= */

/* Base: pastikan header bisa bagi ruang dengan benar */
.header-inner{
  justify-content: space-between;
}

/* Actions fleksibel & boleh wrap saat sempit */
.header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap; /* KUNCI: supaya tidak nabrak di 430/390/360 */
}

/* Kelompok Daftar + Masuk selalu rapi */
.auth-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Brand tidak ikut terdorong */
.brand{
  flex: 0 0 auto;
  gap: 12px;
}

/* ========== MOBILE UTAMA (<= 430px) ========== */
@media (max-width: 430px){
  .site-header{ padding: 14px 14px !important; }

  /* Header boleh 2 baris agar lega */
  .header-inner{
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-height: unset !important;
  }


  /* Actions jadi baris kedua full width, rapi rata kanan */
  .header-actions{
    width: 100%;
    justify-content: flex-end;
    gap: 10px !important;
  }

  /* Tombol diperkecil sedikit biar muat dan lega */
  .header-actions .btn{
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* Theme jangan kepanjangan */
  .theme-toggle{ min-width: 92px; }
}

/* ========== EXTRA COMPACT (<= 390px) ========== */
@media (max-width: 390px){

  .header-actions{ gap: 8px !important; }

  .header-actions .btn{
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .auth-actions{ gap: 8px !important; }
}

/* ========== SUPER KECIL (<= 360px) ========== */
@media (max-width: 360px){
  .site-header{ padding: 12px 12px !important; }

  /* jika sempit banget, biar tetap rapi menyebar */
  .header-actions{
    justify-content: space-between;
  }

  .theme-toggle{
    padding: 0 12px !important;
  }
}
/* ===== LOGO ANTI GEPENG (WAJIB) ===== */
@media (max-width: 900px){
}

/* ===== MOBILE HEADER HARUS MIRIP FOTO KANAN ===== */
@media (max-width: 900px){
  /* sembunyikan Daftar/Masuk di HEADER (agar tidak jadi seperti foto kiri) */
  .header-actions > a.btn{
    display: none !important;
  }
  /* pill tema biar enak */
  .theme-toggle{
    min-width: 120px !important;
    justify-content: center !important;
  }
}

/* ===== MOBILE NAV OVERLAY: DEFAULT TERTUTUP (ANTI "GAK BISA DIPENCET") ===== */
.mobile-nav{
  position: fixed !important;
  inset: 0 !important;
  z-index: 55 !important;

  /* default tertutup */
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;

  /* solid background */
  background: #071b3a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 18px 18px 28px !important;
  overflow-y: auto !important;

  transition: transform .28s var(--ease), opacity .28s var(--ease) !important;
}
.mobile-nav.open{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* topbar: X kiri, auth kanan */
.mobile-nav-top{
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 0 12px !important;
  background: #071b3a !important;
}

/* tombol X */
.mobile-close{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.mobile-close:hover{
  background: rgba(255,255,255,.16) !important;
}

/* auth kanan */
.mobile-auth{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mobile-auth .btn{
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* MASUK wajib berwarna */
.mobile-auth .btn-primary{
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

/* item menu */
.mobile-nav a{
  background: #0a234a !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/* small */
@media (max-width: 390px){
  .mobile-nav{ padding: 16px 14px 24px !important; }
  .mobile-auth{ gap: 8px !important; }
  .mobile-auth .btn{
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 360px){
  .mobile-auth .btn{
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   MOBILE HEADER POSITION LOCK (SUPER AKURAT)
   Target HP: Logo kiri | Tema | Hamburger (paling kanan)
   + Overlay Topbar: X kiri | Daftar+Masuk kanan
   Tempel PALING BAWAH <style>
===================================================== */

/* 0) Logo anti-gepeng (wajib) */
@media (max-width: 900px){
}

/* 1) Header mobile: hilangkan Daftar/Masuk di header (biar sama foto kanan) */
@media (max-width: 900px){
  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  /* 2) Paksa header-actions jadi 1 baris rapi (tanpa reverse) */
  header.site-header .header-actions{
    display: flex !important;
    flex-direction: row !important;         /* kunci: jangan row-reverse */
    flex-wrap: nowrap !important;           /* jangan turun baris */
    align-items: center !important;
    justify-content: flex-end !important;   /* semua ke kanan */
    gap: 12px !important;
  }

  /* 3) KUNCI URUTAN: Tema dulu, Hamburger terakhir */
  header.site-header .header-actions .theme-picker{
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  header.site-header .header-actions .nav-toggle{
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  /* 4) Ukuran pill Tema agar mirip foto */
  header.site-header .header-actions .theme-toggle{
    min-width: 124px !important;
    height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* 5) Hamburger jangan berubah gaya, hanya rapikan spacing */
  header.site-header .header-actions .nav-toggle{
    width: 48px !important;
    height: 48px !important;
  }
}

/* =====================================================
   OVERLAY TOPBAR POSITION LOCK (SUPER AKURAT)
   X kiri | Daftar+Masuk kanan (seperti foto)
===================================================== */
header.site-header .mobile-nav .mobile-nav-top{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Kunci X di kiri: matikan aturan absolute yang lama */
header.site-header .mobile-nav .mobile-close{
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* Kunci auth di kanan */
header.site-header .mobile-nav .mobile-auth{
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (max-width: 900px){

  /* 1) HEADER WRAPPER: rapihin spacing & center */
  header.site-header{
    padding: 12px 12px !important;
  }
  header.site-header .header-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 56px !important;
  }

  /* 2) LOGO: posisi rapi + anti-gepeng */
  header.site-header .brand{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  /* 3) NAV LINKS: desktop menu harus hilang di mobile */
  header.site-header .nav-links{
    display: none !important;
  }

  /* 4) HEADER ACTIONS: Tema + hamburger di kanan, rapi 1 baris */
  header.site-header .header-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  /* 5) SEMBUNYIKAN tombol desktop auth di mobile (biar lega) */
  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  /* 6) URUTAN: Tema dulu, hamburger paling kanan */
  header.site-header .header-actions .theme-picker{ order: 1 !important; }
  header.site-header .header-actions .nav-toggle{ order: 2 !important; }

  /* 7) PILL "Tema" rapi seperti contoh */
  header.site-header .theme-toggle{
    height: 44px !important;
    padding: 0 18px !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  /* 8) HAMBURGER (garis 3 putih) rapi & tegas */
  header.site-header .nav-toggle{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  }
  header.site-header .nav-toggle span{
    display: block !important;
    width: 24px !important;
    height: 2.5px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  /* animasi jadi X tetap rapi */
  header.site-header .nav-toggle.open span:nth-child(1){
    transform: translateY(9px) rotate(45deg) !important;
  }
  header.site-header .nav-toggle.open span:nth-child(2){
    opacity: 0 !important;
  }
  header.site-header .nav-toggle.open span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* 9) Mobile nav overlay: jangan mengganggu klik saat tertutup */
  header.site-header .mobile-nav{
    pointer-events: none !important;
  }
  header.site-header .mobile-nav.open{
    pointer-events: auto !important;
  }
}

/* DESKTOP TIDAK DIUBAH. JANGAN TAMBAH CSS DI LUAR MEDIA QUERY INI. */

@media (max-width: 900px){
  .header-inner{
    flex-wrap: nowrap !important;
  }
  .header-actions{
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .header-actions > a.btn{
    display: none !important;
  }
  .nav-toggle{
    display: inline-flex !important;
  }
  .theme-picker{
    order: 1 !important;
  }
  .nav-toggle{
    order: 2 !important;
  }
  .theme-toggle{
    min-width: 120px !important;
    height: 44px !important;
    justify-content: center !important;
  }
}
@media (max-width: 900px){

  header.site-header .header-inner{
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: 56px !important;
  }

  header.site-header .brand{
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  header.site-header .nav-links{ display: none !important; }

  header.site-header .header-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  header.site-header .header-actions > a.btn{
    display: none !important;
  }

  header.site-header .theme-picker{ order: 1 !important; }
  header.site-header .nav-toggle{ order: 2 !important; }

  header.site-header .theme-toggle{
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  header.site-header .nav-toggle{
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
  }

  header.site-header .mobile-nav{
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;

    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 18px 18px 28px !important;
    overflow-y: auto !important;

    background: rgba(5,21,48,0.95) !important;
    backdrop-filter: blur(18px) !important;

    transition: transform .28s var(--ease), opacity .28s var(--ease) !important;
  }

  header.site-header .mobile-nav.open{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  header.site-header .mobile-nav-top{
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 12px !important;
    background: transparent !important;
  }

  header.site-header .mobile-close{
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
  }

  header.site-header .mobile-auth{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }

  header.site-header .mobile-auth .btn{
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html {
    overflow-y: scroll !important;
  }
}
  
  /* =========================================================
     LOCK FULLSCREEN (ANTI CROP) ? WAJIB
     Agar overlay tidak tampil setengah di pages
  ========================================================= */
  .mobile-nav{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9999 !important;
  }

  /* saat tertutup tidak boleh nangkep klik */
  .mobile-nav{
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .mobile-nav.open{
    pointer-events: auto !important;
    visibility: visible !important;
  }


    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    /* =========================
       HEADER (glass)
    ========================= */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 14px 16px;
      background: linear-gradient(180deg, rgba(8,22,52,.92), rgba(8,22,52,.62));
      border-bottom: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .site-header,
    html[data-theme="ivory"] .site-header{
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
      border-bottom: 1px solid rgba(15,23,42,.10);
    }

    .header-inner{
      max-width: var(--max);
      margin: 0 auto;
      display:flex;
      align-items:center;
      gap: 18px;
      min-height: 54px;
    }
    .container, .header-inner, .footer-inner{
      width: min(var(--max, 1200px), 100% - 2rem);
      margin-inline: auto;
    }

    .brand{ display:flex; align-items:center; gap: 10px; min-width: 170px; }

    .nav-links{
      flex: 1;
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      white-space: nowrap;
    }
    .mobile-nav{
      position: fixed;
      inset: 0;
      padding: 80px 24px 32px;
      background: rgba(5,21,48,0.95);
      backdrop-filter: blur(20px);
      display:flex;
      flex-direction:column;
      gap: 18px;
      transform: translateY(-100%);
      opacity:0;
      pointer-events:none;
      transition: transform .3s var(--ease), opacity .3s var(--ease);
      z-index:55;
      overflow-y: auto;
    }
    .mobile-nav a{
      color: var(--text);
      text-decoration:none;
      font-size: 16px;
      font-weight: 700;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid transparent;
      transition: border-color .2s var(--ease);
    }
    .mobile-nav.open{
      transform: translateY(0);
      opacity:1;
      pointer-events:auto;
    }
    .mobile-nav a:hover{ border-color: rgba(255,255,255,0.2); }

    .nav-links a{
      color: var(--muted);
      text-decoration:none;
      font-size: 13px;
      font-weight: 850;
      padding: 10px 12px;
      border-radius: 999px;
      position: relative;
      transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
    }
    .nav-links a:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
    .nav-links a.active{ color: var(--text); background: rgba(255,255,255,.06); }
    .nav-links a.active::after{
      content:"";
      position:absolute;
      left: 18%; right: 18%;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
      box-shadow: 0 0 14px rgba(120,180,255,.35);
    }

    html[data-theme="light"] .nav-links a,
    html[data-theme="ivory"] .nav-links a{ color: rgba(15,23,42,.78); }
    html[data-theme="light"] .nav-links a:hover,
    html[data-theme="ivory"] .nav-links a:hover{ background: rgba(15,23,42,.06); }
    html[data-theme="light"] .nav-links a.active,
    html[data-theme="ivory"] .nav-links a.active{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }
    html[data-theme="light"] .nav-links a.active::after,
    html[data-theme="ivory"] .nav-links a.active::after{
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 92%, transparent), transparent);
      box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 26%, transparent);
    }

    .header-actions{ display:flex; align-items:center; gap: 10px; }
    .nav-toggle{
      display:none;
      border:none;
      background:rgba(255,255,255,0.08);
      color:var(--text);
      width: 48px;
      height: 48px;
      border-radius: 14px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      transition: background .2s var(--ease);
    }
    .nav-toggle:hover{ background: rgba(255,255,255,0.13); }
    .nav-toggle span{
      display:block;
      width: 22px;
      height: 2px;
      background:currentColor;
      border-radius: 999px;
      margin-bottom: 5px;
      transition: transform .3s var(--ease);
    }
    .nav-toggle span:last-child{ margin-bottom: 0; }
    .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity: 0; }
    .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* =========================
       BUTTONS
    ========================= */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .1px;
      text-decoration:none;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
      cursor:pointer;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
      user-select: none;
    }
    .btn:hover{
      background: rgba(255,255,255,.10);
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .btn-outline{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }

    .btn-primary{
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow:
        0 16px 42px color-mix(in oklab, var(--accent) 28%, transparent),
        0 10px 24px color-mix(in oklab, var(--accent2) 18%, transparent);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(220px 120px at 20% 30%, rgba(255,255,255,.40), transparent 60%);
      opacity:.22;
      pointer-events:none;
    }

    .btn-lg{ height: 56px; padding: 0 30px; font-size: 14px; }

    .caret{
      display:inline-flex;
      margin-left: 8px;
      font-size: 12px;
      opacity: .95;
      transform: translateY(1px);
      transition: transform .2s var(--ease);
    }
    .theme-toggle[aria-expanded="true"] .caret{ transform: translateY(1px) rotate(180deg); }

    /* light/ivory buttons */
    html[data-theme="light"] .btn,
    html[data-theme="ivory"] .btn{
      color: rgba(15,23,42,.92);
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.70);
      box-shadow: 0 12px 26px rgba(15,23,42,.10);
    }
    html[data-theme="light"] .btn:hover,
    html[data-theme="ivory"] .btn:hover{
      background: rgba(255,255,255,.82);
      border-color: rgba(15,23,42,.14);
    }
    html[data-theme="light"] .btn-outline,
    html[data-theme="ivory"] .btn-outline{ background: rgba(255,255,255,.62); }

    /* =========================
       THEME MENU
    ========================= */
    .theme-picker{ position:relative; }
    .theme-menu{
      position:absolute;
      right: 0;
      top: calc(100% + 10px);
      width: 250px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(10,20,40,.96);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadowSoft);
      backdrop-filter: blur(10px);

      transform-origin: top right;
      transform: translateY(-4px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s var(--ease), opacity .18s var(--ease);
      max-height: 360px;
      overflow: auto;
    }
    .theme-menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
    html[data-theme="light"] .theme-menu,
    html[data-theme="ivory"] .theme-menu{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.12);
    }

    .theme-option{
      width:100%;
      text-align:left;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 14px;
      cursor:pointer;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
      display:flex;
      flex-direction:column;
      gap: 4px;
      align-items:flex-start;
    }
    .theme-option:last-child{ margin-bottom: 0; }
    .theme-option-label{ font-size: 13px; font-weight: 950; }
    .theme-option-meta{ font-size: 12px; color: var(--muted); }
    .theme-option:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); border-color: rgba(255,255,255,.20); }

    html[data-theme="light"] .theme-option,
    html[data-theme="ivory"] .theme-option{
      border-color: rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      color: rgba(15,23,42,.92);
    }
    html[data-theme="light"] .theme-option:hover,
    html[data-theme="ivory"] .theme-option:hover{
      background: rgba(15,23,42,.05);
      border-color: rgba(15,23,42,.14);
    }

    @media (max-width: 520px){
      .theme-menu{ right: auto; left: 0; transform-origin: top left; width: min(280px, calc(100vw - 48px)); }
    }

/* ============================
       MOBILE NAV ALIGN FIX (ANTI GESER KANAN)
       ============================ */
@media (max-width: 900px){
  .mobile-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    transform: translate3d(0,-100%,0) !important;
  }
  .mobile-nav.open{
    transform: translate3d(0,0,0) !important;
  }
}

/* ===================== RESPONSIVE FINAL (HEADER) ===================== */
/* DESKTOP */
@media (min-width:1025px){
  .nav-links{ display:flex !important; }
  .nav-toggle, .mobile-nav{ display:none !important; }
}

/* TABLET & iPAD - SAMA SEPERTI BERANDA */
@media (min-width:721px) and (max-width:1024px){
  .nav-links{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    white-space:nowrap !important;
    flex:1 1 auto !important;
  }
  .nav-toggle, .mobile-nav{ display:none !important; }

  .nav-links a{
    font-size:12.5px !important;
    padding:9px 10px !important;
  }

  .header-inner{
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
  }

}

/* HP - HAMBURGER ONLY */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex !important; }
  .nav-links{ display:none !important; }

  header.site-header .mobile-nav{
    position:fixed !important;
    inset:0 !important;
    z-index:55 !important;
    transform:translateY(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    display:none !important;
    background:var(--bg0) !important;
    overflow-y:auto !important;
    padding:18px !important;
    transition:transform .28s var(--ease), opacity .28s var(--ease) !important;
  }
  header.site-header .mobile-nav.open{
    display:flex !important;
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* EXTRA KECIL */
@media (max-width:360px){
}

/* =========================
   HEADER ALWAYS VISIBLE (FIXED FALLBACK)
   - Sticky can fail if any parent has overflow/transform.
   - Use fixed to guarantee visibility on all pages/devices.
========================= */
:root{
  --site-header-offset: 92px;
}
header.site-header,
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9000 !important; /* below mobile-nav (9999) */
}
/* Push content so it doesn't slide under the fixed header */
.page{
  padding-top: var(--site-header-offset) !important;
}
@media (max-width:1024px){
  :root{ --site-header-offset: 84px; }
}
@media (max-width:720px){
  :root{ --site-header-offset: 76px; }
}
@media (max-width:360px){
  :root{ --site-header-offset: 72px; }
}

/* =========================
   HEADER COLOR OVERRIDE (FORCE)
   - Theme CSS loads after app-header.css, so use higher specificity.
========================= */
html header.site-header,
html .site-header,
html[data-theme="default"] header.site-header,
html[data-theme="light"] header.site-header,
html[data-theme="ivory"] header.site-header,
html[data-theme="ocean"] header.site-header,
html[data-theme="forest"] header.site-header,
html[data-theme="sunset"] header.site-header,
html[data-theme="midnight"] header.site-header,
html[data-theme="slate"] header.site-header,
html[data-theme="lavender"] header.site-header,
html[data-theme="emerald"] header.site-header,
html[data-theme="rose"] header.site-header{
  background: rgba(10, 28, 54, 0.88) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* Scroll state must override forced header colors */
html header.site-header.is-scrolled,
html[data-theme="default"] header.site-header.is-scrolled,
html[data-theme="light"] header.site-header.is-scrolled,
html[data-theme="ivory"] header.site-header.is-scrolled,
html[data-theme="ocean"] header.site-header.is-scrolled,
html[data-theme="forest"] header.site-header.is-scrolled,
html[data-theme="sunset"] header.site-header.is-scrolled,
html[data-theme="midnight"] header.site-header.is-scrolled,
html[data-theme="slate"] header.site-header.is-scrolled,
html[data-theme="lavender"] header.site-header.is-scrolled,
html[data-theme="emerald"] header.site-header.is-scrolled,
html[data-theme="rose"] header.site-header.is-scrolled{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg0) 72%, transparent),
    color-mix(in oklab, var(--bg1) 52%, transparent)
  ) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}
html[data-theme="light"] header.site-header.is-scrolled,
html[data-theme="ivory"] header.site-header.is-scrolled{
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46)) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.18) !important;
}

/* Header bar darker than page background (exclude light/ivory) */
html:not([data-theme="light"]):not([data-theme="ivory"]) .site-header{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg0) 60%, #0b1f43),
    color-mix(in oklab, var(--bg0) 50%, #0a1a38)
  ) !important;
}

/* ===== Header CTA size lock (match index) ===== */
.site-header .header-cta.btn-lg{
  margin-left: 8px !important;
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}
@media (max-width: 900px){
  .site-header .header-cta.btn-lg{ display: none !important; }
}

/* Logo size tuning */
.footer-brand-logos img{
  height: 84px !important;
}
@media (max-width: 900px){
  .footer-brand-logos img{ height: 64px !important; }
}

/* Header layout tighten */
header.site-header{
  padding: 10px 18px !important;
}
header.site-header .header-inner{
  min-height: 72px !important;
  align-items: center !important;
}
header.site-header .brand{
  align-items: center !important;
}
header.site-header .nav-links{
  align-items: center !important;
  gap: 18px !important;
}
header.site-header .nav-links a{
  line-height: 1 !important;
}
header.site-header .header-actions{
  align-items: center !important;
}
@media (max-width: 900px){
  header.site-header{
    padding: 8px 14px !important;
  }
  header.site-header .header-inner{
    min-height: 60px !important;
  }
}

/* Footer socials final override: no circles, brand colors */
.footer-socials a{
  width: 42px !important;
  height: 42px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
.footer-socials i{
  font-size: 18px !important;
  color: #fff !important;
}
.footer-socials a[aria-label="Facebook"]{ color:#fff !important; }
.footer-socials a[aria-label="Twitter"]{ color:#fff !important; }
.footer-socials a[aria-label="Instagram"]{ color:#fff !important; }
.footer-socials a[aria-label="LinkedIn"]{ color:#fff !important; }

/* =========================
   FINAL LOGO FIX — CRISP & CLEAR
   (HAPUS semua rule .brand img lama)
========================= */
header.site-header .brand img{
  height: clamp(30px, 3.2vw, 44px) !important;
  width: auto !important;
  max-height: 44px !important;
  object-fit: contain;
  transform: none !important;
  image-rendering: auto !important;
  filter: contrast(1.12) saturate(1.05)
          drop-shadow(0 0 0.35px rgba(255,255,255,.35)) !important;
}

header.site-header .header-inner{
  min-height: 66px !important;
  align-items: center !important;
}

/* =========================
   HEADER & LOGO SIZE FIX
   Aman, tanpa duplikat
========================= */

/* Desktop */

header.site-header .header-inner{
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Tablet */
@media (max-width:1024px){
  header.site-header .header-inner{
    min-height: 64px;
  }
}

/* Mobile */
@media (max-width:720px){
  header.site-header .header-inner{
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* =========================
   FOOTER BRAND = FOOTER LINKS (FINAL OVERRIDE)
   - Keep footer-brand as a single equal column
========================= */
.footer-brand{
  grid-column: auto !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.footer-brand h4{
  margin: 0 0 12px !important;
  font-size: 18px !important;
  color: var(--text) !important;
}
html[data-theme="light"] .footer-brand h4,
html[data-theme="ivory"] .footer-brand h4{
  color: rgba(15,23,42,.90) !important;
}
.footer-brand p{
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
}
html[data-theme="light"] .footer-brand p,
html[data-theme="ivory"] .footer-brand p{
  color: rgba(15,23,42,.76) !important;
}
.footer-brand .footer-socials{
  gap: 10px !important;
  margin-top: 8px !important;
}
.footer-brand .footer-socials a{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}
.footer-brand .footer-socials i{
  font-size: 16px !important;
}

/* Footer credit: Quantum link */
footer a[href*="quantum.intermatika.id"],
.footer-frame a[href*="quantum.intermatika.id"]{
  color: #fff !important;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-shadow .2s ease, color .2s ease;
}
footer a[href*="quantum.intermatika.id"]:hover,
.footer-frame a[href*="quantum.intermatika.id"]:hover{
  text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.35);
}

/* Footer links: button fallback for non-link items */
.footer-links .footer-link{
  appearance: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  text-align: left !important;
}
html[data-theme="light"] .footer-links .footer-link,
html[data-theme="ivory"] .footer-links .footer-link{
  color: rgba(15,23,42,.76) !important;
}
.footer-links .footer-link:hover{
  color: var(--accent) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .footer-links .footer-link:hover,
html[data-theme="ivory"] .footer-links .footer-link:hover{
  color: rgba(14,165,233,1) !important;
}

/* HP sangat kecil */
@media (max-width:360px){
}

/* ===== GLOBAL NAV SIZE (ALL PAGES) ===== */
@media (min-width: 721px){
  header.site-header .nav-links{
    display:flex !important;
    flex:1 1 auto !important;
    justify-content:center !important;
    align-items:center !important;
    gap: clamp(16px, 1.8vw, 30px) !important;
    max-width: min(1000px, 68vw) !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }

  header.site-header .nav-links a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }
}

/* 1) Desktop + Tablet: tampilkan menu (no hamburger) */
@media (min-width: 721px){
  header.site-header .nav-links{ display:flex !important; }
  header.site-header .nav-toggle,
  header.site-header .mobile-nav{ display:none !important; }
}

/* 2) Mobile saja: hamburger */
@media (max-width: 720px){
  header.site-header .nav-links{ display:none !important; }
  header.site-header .nav-toggle{ display:inline-flex !important; }
}

/* 3) Tablet/iPad sizing (lebih kecil dari desktop, tetap rapi) */
@media (min-width: 721px) and (max-width: 1024px){
  header.site-header .nav-links{ gap: 12px !important; max-width: 92vw !important; }
  header.site-header .nav-links a{
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }
}

/* 4) Desktop sizing */
@media (min-width: 1025px){
  header.site-header .nav-links a{
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
  }
}

@media (min-width:721px){
  header.site-header .nav-links{ display:flex !important; }
  header.site-header .nav-toggle,
  header.site-header .mobile-nav{ display:none !important; }
}
@media (max-width:720px){
  header.site-header .nav-links{ display:none !important; }
  header.site-header .nav-toggle{ display:inline-flex !important; }
}

@media (min-width:721px) and (max-width:1024px){
  header.site-header .nav-links{
    flex:1 1 auto !important;
    justify-content:center !important;
    gap:10px !important;
  }
  header.site-header .nav-links a{
    height:42px !important;
    padding:0 14px !important;
    font-size:12.5px !important;
  }
  header.site-header .header-cta{
    height:40px !important;
    padding:0 14px !important;
    font-size:12.5px !important;
  }
}

@media (min-width:721px) and (max-width:900px){
  /* HINDARI CTA DOBEL di tablet: pakai 1 tombol saja */
  header.site-header .header-cta-mobile{ display:none !important; }

  header.site-header .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  header.site-header .nav-links{
    flex:1 1 auto !important;
    min-width:0 !important;
    justify-content:center !important;
    gap:8px !important;
    white-space:nowrap !important;
  }

  header.site-header .nav-links a{
    height:40px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  /* item panjang diperkecil lagi biar tidak nabrak */
  header.site-header .nav-links a:nth-child(4),
  header.site-header .nav-links a:nth-child(5){
    padding:0 10px !important;
    font-size:11.5px !important;
  }

  header.site-header .header-cta{
    height:38px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }
}

/* =========================================
   PAGE HEADER DRAMATIC STYLE (NON-HOME)
   ========================================= */

.page-head{
  text-align: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 2vw, 20px) !important;
}

.page-head h1{
  margin: 0 0 14px;
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.page-head h1{ margin-top: 0 !important; }

.page-head p{
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  max-width: 70ch;
  line-height: 1.6;
  text-align: center;
}
.services-head.page-head p,
.cf-head.page-head p{
  margin: 0 auto;
  text-align: center;
}

/* =========================================
   VERTICAL BALANCE FOR SECTIONS
   ========================================= */

/* Pastikan grid tidak terlalu mepet ke atas */
.services-frame .services-grid,
.partner-page .partner-logos,
.contact-faq-page .cf-grid{
  margin-top: clamp(18px, 2vw, 28px);
}



/* Footer typography & spacing overrides */
.footer-grid h4{
  font-size:16px !important;
  font-weight:700 !important;
  margin:0 0 12px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.footer-grid p,
.footer-grid a,
.footer-grid button,
.footer-links .footer-link{
  font-size:13px !important;
  line-height:1.7 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.footer-links ul{ gap:8px !important; }
.footer-links li{ margin:0 !important; }
.footer-address p{ margin:0 !important; }
.footer-links a,
.footer-links button{
  background:none !important;
  border:0 !important;
  padding:0 !important;
  text-align:left !important;
}


/* =========================================================
   PRODUK PAGE — STABLE POLISH (SCOPED)
   Target: #produk.product-frame .services-card
   Notes: no changes to slider mechanics/interactions
========================================================= */

#produk.product-frame .services-card{
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
}

@media (max-width: 1024px){
  #produk.product-frame .services-card{
    grid-template-columns: 1fr;
  }
}

#produk.product-frame .services-content{
  max-width: 64ch;
  align-self: start;
}


#produk.product-frame .services-content h3{
  margin: 0 0 12px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  font-weight: 900;
}

#produk.product-frame .services-content p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}

#produk.product-frame .hero-cta-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#produk.product-frame .hero-cta-chips .tag{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1px;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

html[data-theme="light"] #produk.product-frame .hero-cta-chips .tag,
html[data-theme="ivory"] #produk.product-frame .hero-cta-chips .tag{
  color: rgba(15,23,42,.92);
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
}

/* Wrapper visual only (no overflow/z-index/pointer-events changes) */
#produk.product-frame .services-visual{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  padding: clamp(12px, 1.6vw, 18px);
}

html[data-theme="light"] #produk.product-frame .services-visual,
html[data-theme="ivory"] #produk.product-frame .services-visual{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* === Produk: Samakan jarak seperti Layanan === */
#produk.product-frame > .services-head.page-head{
  margin-bottom: 0 !important; /* reset agar tidak dobel */
}

#produk.product-frame > .services-card{
  margin-top: 0 !important;    /* pastikan tidak ada margin lain */
  padding-top: 28px;           /* sumber jarak tunggal */
}

/* =========================================================
   LAYANAN PAGE — USAGE FRAME BALANCE FIX
   Target: .usage-frame
   Tujuan:
   - Konten kiri & gambar kanan benar-benar center
   - Judul tidak kebesaran
   - Gambar kanan sedikit lebih dominan
   - Aman desktop / tablet / mobile
   ========================================================= */

/* GRID UTAMA */
.usage-frame .usage-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* kanan sedikit lebih besar */
  gap: clamp(18px, 3vw, 42px);
  align-items: center; /* FIX: supaya tidak naik ke atas */
}

/* JUDUL */
.usage-frame .usage-content h3{
  margin: 0 0 14px;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(22px, 2.1vw, 34px);
  text-transform: uppercase;
}

/* PARAGRAF */
.usage-frame .usage-content p{
  margin: 0;
  max-width: 58ch;
  line-height: 1.7;
  color: var(--muted);
  font-size: clamp(14px, 1.2vw, 16px);
}

/* AREA GAMBAR */
.usage-frame .usage-image{
  display: flex;
  justify-content: center;
  align-items: center;
}

.usage-frame .usage-image img{
  width: min(640px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));
}

/* DESKTOP — sedikit lebih besar agar balance */
@media (min-width: 1081px){
  .usage-frame .usage-image img{
    width: min(720px, 100%);
  }
}

/* TABLET */
@media (max-width: 1024px){
  .usage-frame .usage-grid{
    grid-template-columns: 1fr;
  }

  .usage-frame .usage-image{
    margin-top: 12px;
  }

  .usage-frame .usage-content p{
    max-width: 70ch;
  }
}

/* =========================================
   HEADER CTA MOBILE – CONSISTENT SIZE
   Berlaku semua pages (mobile only)
========================================= */

@media (max-width: 900px){

  header.site-header .header-cta,
  header.site-header .header-cta-mobile{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 900 !important;

    border-radius: 999px !important;
    white-space: nowrap !important;
    width: auto !important;
  }

}