/* ==========================================================================
   Bimxyz — theme.css
   DARK GRAPHITE CORPORATE
   Single dark theme only. This file is the design system for every page:
   typography import, grain texture, glass/glow utilities, navbar +
   hamburger + mobile nav panel, and the shared footer. Each page still
   declares its own --bg-card / --text-main / etc. tokens in :root (now
   fixed to the dark palette below — no light branch, no toggle).
   ========================================================================== */

html { color-scheme: dark; }

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* --------------------------------------------------------------------------
   Core palette — Dark Graphite Corporate
   Every page's own :root should already point --bg-dark/--bg-card/etc at
   these same values; this block exists so pages that forget a token (or
   third-party/legacy markup) still fall back to the right color instead of
   a browser default.
   -------------------------------------------------------------------------- */
:root {
  --bg-black: #0a0a0a;
  --bg-graphite: #121212;
  --surface: #121212;
  --surface-2: #171717;
  --surface-border: rgba(255, 255, 255, 0.09);
  --accent: #4C7DFF;
  --accent-2: #6B93FF;
}

* {
  font-family: 'DM Sans', 'Manrope', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.nav-logo, .footer-brand-name, .footer-heading,
.btn-primary, .btn-secondary, .buy-btn, .checkout-btn, .qris-btn {
  font-family: 'Manrope', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   Subtle grain — a very fine sand-like noise over the black/graphite base.
   Fixed so it doesn't scroll or tile-shift, extremely low opacity so it
   reads as texture rather than pattern.
   -------------------------------------------------------------------------- */
body { position: relative; }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Ambient ultra-subtle blue/gray glow — opt-in via class="corp-glow" on a
   positioning wrapper (hero sections etc). */
.corp-glow { position: relative; overflow: hidden; }
.corp-glow::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 420px;
  max-width: 140vw;
  background: radial-gradient(circle, rgba(76, 125, 255, 0.10) 0%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* Subtle glass utility — reserved for select elevated surfaces only
   (mobile nav panel, modals). */
.corp-glass {
  background: rgba(23, 23, 23, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-border);
}

/* --------------------------------------------------------------------------
   Universal keyboard-focus fallback
   -------------------------------------------------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary, #4C7DFF);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hamburger button + mobile nav-links panel
   -------------------------------------------------------------------------- */
.mobile-menu-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary, #4C7DFF);
  outline-offset: 2px;
}

.nav-links { align-items: center; }

@media (min-width: 769px) {
  .nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: #f5f5f5;
  }

  .nav-links a.active {
    background: rgba(76, 125, 255, 0.12);
    color: var(--primary, #4C7DFF);
  }

  .nav-links a:focus-visible {
    outline: 2px solid var(--primary, #4C7DFF);
    outline-offset: -2px;
  }
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
    cursor: pointer;
  }

  .nav-links {
    display: none !important;
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border-radius: 14px;
    box-sizing: border-box;
    background: rgba(18, 18, 18, 0.98) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--surface-border) !important;
    position: absolute;
    top: calc(100% + 10px);
    right: 14px;
    z-index: 10000;
  }

  .nav-links.active { display: flex !important; }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    border-bottom: 0 !important;
    color: var(--text-muted, #a0a8b5);
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
  }

  .nav-links a.active {
    background: rgba(76, 125, 255, 0.14);
    color: var(--primary, #4C7DFF);
    font-weight: 600;
  }

  .nav-links a:focus-visible {
    outline: 2px solid var(--primary, #4C7DFF);
    outline-offset: -2px;
  }

  .nav-links::-webkit-scrollbar { width: 6px; }
  .nav-links::-webkit-scrollbar-thumb {
    background: var(--border-color, #2a2d35);
    border-radius: 999px;
  }
}

@media (min-width: 769px) {
  .nav-links { background: transparent !important; }
}

/* --------------------------------------------------------------------------
   Global dark surface
   -------------------------------------------------------------------------- */
html, body { background-color: #0a0a0a; }
body { color: #f0f0f0; }

a { color: inherit; }
a:not(.nav-logo):not(.btn-primary):not(.btn-secondary):not(.footer-links a):not(.button) { color: var(--primary, #4C7DFF); }
a:hover:not(.nav-logo):not(.btn-primary):not(.btn-secondary):not(.footer-links a):not(.button) { color: var(--secondary, #6B93FF); }

.navbar {
  background: rgba(10, 10, 10, 0.88) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--border-color, rgba(255,255,255,.09)) !important;
}

input, textarea, select {
  background-color: var(--surface-2, #171717);
  color: var(--text-main, #f0f0f0);
  border-color: var(--border-color, rgba(255,255,255,.09));
}

input::placeholder,
textarea::placeholder { color: #6b7280; }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary, #4C7DFF);
  outline-color: var(--primary, #4C7DFF);
}

/* Gradient-clip headline text: hero / page-header h1s clip a light gradient
   for a premium look on dark backgrounds. */
section.hero h1,
header:not(.header-section) h1 {
  color: #f0f0f0;
  background-image: linear-gradient(to right, #f8fafc, #b9c2cf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  section.hero h1,
  header:not(.header-section) h1 {
    color: #f0f0f0;
    background: none;
    -webkit-text-fill-color: initial;
  }
}

div.hero h1,
.container h1 { color: var(--text-main, #f0f0f0); }
div.hero .tagline { color: var(--text-muted, #a0a8b5); }

/* Scrollbar, site-wide */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark, #0a0a0a); }
::-webkit-scrollbar-thumb { background: var(--border-color, rgba(255,255,255,.09)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #a0a8b5); }

/* --------------------------------------------------------------------------
   Buttons — solid blue, clean, small radius, no neon.
   .buy-btn and .checkout-btn get the primary blue as their *default*, but
   NOT with !important — several pages intentionally override these inline
   per-instance (VIP purple gradient buttons in produk.html, the orange
   QRIS quick-pay button in beli-panel.html) and those accents must win.
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-load-more,
.buy-btn,
.checkout-btn,
.btn-close-qris,
.qris-discount-input-wrap button,
.qris-actions .btn-confirm,
.qris-btn,
.qris-resume-banner .btn-resume {
  background: var(--primary, #4C7DFF);
  color: #ffffff;
  border-radius: 10px;
  box-shadow: none;
}

.btn-primary:hover,
.btn-load-more:hover,
.buy-btn:hover,
.checkout-btn:hover,
.btn-close-qris:hover,
.qris-discount-input-wrap button:hover,
.qris-actions .btn-confirm:hover,
.qris-btn:hover,
.qris-resume-banner .btn-resume:hover {
  background: #3d68e0;
}

/* CTA banner: flatten the old saturated gradient into the graphite +
   soft-blue language — contrast over decoration. */
.cta-banner {
  background: linear-gradient(135deg, #16233d 0%, #101418 100%) !important;
  border: 1px solid var(--border-color, rgba(255,255,255,.09));
}
.cta-banner .btn-primary { background: #f8fafc !important; color: #16233d !important; }
.cta-banner .btn-primary:hover { background: #e5eaf2 !important; }

.hero-badge { border-color: rgba(76, 125, 255, 0.35) !important; }

/* VIP accent tuned to stay legible on graphite while keeping a distinct
   hue from the primary blue. */
:root { --vip-color: #b48cff; }

.vip-card .card-price,
.tier-card.tier-vip .tier-card-badge,
.summary-box.vip-summary { color: #b48cff !important; }

.tier-card.tier-vip .tier-card-badge {
  border-color: rgba(180, 140, 255, 0.4) !important;
  background: rgba(139, 92, 246, 0.14) !important;
}

.ref-banner { color: #7dd99a !important; }
.ref-code { color: #4ade80 !important; }
.qris-resume-banner { color: #93b6ff !important; }

.qris-discount-msg.success,
.qris-status-msg.success { color: #4ade80 !important; }

.qris-discount-msg.error,
.qris-status-msg.error { color: #f87171 !important; }

.qris-status-msg.warn { color: #fbbf24 !important; }
.qris-discount-optional { color: #8b93a1 !important; }

.qris-btn-green,
.qris-resume-banner .btn-cancel-transaction { color: #0f1115 !important; }

/* Footer stays dark by design already; keep the readable copyright color
   and blue-accent link hover consistent with the new palette. */
.site-footer .footer-bottom { color: #8b93a1 !important; }
.site-footer .footer-links a:hover { color: var(--secondary, #6B93FF) !important; }
.site-footer { background: linear-gradient(180deg, #101112 0%, #0a0a0a 100%) !important; border-top-color: var(--border-color, rgba(255,255,255,.09)) !important; }
.footer-social a { background: var(--surface-2, #171717) !important; border: 1px solid var(--border-color, rgba(255,255,255,.09)); }
.footer-social a:hover { background: var(--primary, #4C7DFF) !important; color: #fff !important; }