/* =====================================================================
   THEME-DARK-TECH.CSS
   Redesign sesuai template Figma "CV. FR-SYSTEM" — Dark Tech
   Palet   : Background #080C18 · Surface #0E1426 · Surface-2 #111827
             Border #1E2D45 · Accent Cyan #00C8F0 · Accent Violet #6366F1
   Tipografi: Outfit (display) + Inter (body) + JetBrains Mono (label kecil)
   Cara pakai: file ini di-load SETELAH custom.css di header.php, sehingga
   override di sini menang tanpa perlu mengubah/menghapus custom.css asli.
   ===================================================================== */

/* Font Outfit/Inter/JetBrains Mono di-load lewat <link> di includes/header.php
   (bukan @import di sini) -- @import di dalam CSS membuat browser baru mulai
   download font SETELAH file CSS ini selesai diunduh & diparse (berurutan,
   bukan paralel), jadi lebih lambat. Lihat includes/header.php. */

:root{
  /* Token baru */
  --bg:          #080c18;
  --surface:     #0e1426;
  --surface-2:   #111827;
  --border-c:    #1e2d45;
  --fg:          #e8edf8;
  --fg-muted:    #94a3b8;
  --fg-dim:      #64748b;
  --accent:      #00c8f0;
  --accent-2:    #67e8f9;
  --accent-violet:#6366f1;

  /* Repoint token lama (dipakai ratusan tempat di custom.css) supaya ikut gelap otomatis */
  --ink:      var(--bg);
  --navy:     var(--surface);
  --steel:    var(--surface-2);
  --brass:    var(--accent);
  --brass-lt: var(--accent-2);
  --mist:     var(--surface-2);
  --white:    var(--bg);
  --slate:    var(--fg-muted);
  --line:     var(--border-c);

  /* --brand-blue & --text-dark dipakai LANGSUNG sebagai warna TEKS inline
     (mis. harga produk, nama item terkait) di beberapa halaman — kalau ikut
     alias --navy/--ink di atas (yang sekarang jadi warna gelap utk
     background) teksnya jadi tak terlihat. Jadi keduanya di-override
     terpisah ke warna terang/aksen supaya tetap kebaca di atas kartu gelap. */
  --brand-blue: var(--accent);
  --text-dark:  var(--fg);

  --shadow-soft:  0 10px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 20px 50px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------
   DASAR: teks & heading (custom.css memakai var(--ink) utk teks,
   yang sekarang jadi warna background gelap — jadi harus di-fix manual)
--------------------------------------------------------------- */
body{ color: var(--fg); background: var(--bg); font-family:'Inter', sans-serif; }
h1,h2,h3,h4,h5,h6,.display-heading{
  font-family: 'Outfit', sans-serif;
  color: var(--fg);
  letter-spacing: -0.01em;
}
label{ color: var(--fg); }
.article-content{ color: var(--fg); }
.article-content blockquote{ background: var(--surface); color: var(--fg-muted); border-left-color: var(--accent); }
::selection{ background: var(--accent); color: var(--bg); }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--border-c); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

/* ---------------------------------------------------------------
   NAVBAR
--------------------------------------------------------------- */
.navbar-custom{
  background: rgba(8,12,24,.85) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  text-transform: none;
}
.navbar-brand{ font-family:'Outfit', sans-serif; text-transform:none; color: var(--fg) !important; display:flex; align-items:center; gap:.6rem; }
.navbar-brand span{ color: var(--accent); }
.navbar-logo-img{
  height:32px; width:auto; max-width:32px;
  object-fit: contain;
  flex: 0 0 auto;
  background: none; border: none; border-radius: 0;
}
.navbar-custom .nav-link, .nav-link-item{ color: var(--fg-muted) !important; font-weight:500; text-transform:none; }
.navbar-custom .nav-link:hover, .nav-link-item:hover,
.navbar-custom .nav-link.active, .nav-link-item.active{ color: var(--accent) !important; }
.navbar-custom .nav-link::after, .nav-link-item::after{ background: var(--accent); }
.nav-caret-btn{ color: var(--fg-dim); }
.nav-caret-btn:hover{ color: var(--accent); }
.nav-submenu{ background: rgba(14,20,38,.98); border-color: var(--border-c); backdrop-filter: blur(12px); }
.nav-submenu .nav-link-row:hover,
.nav-submenu > .nav-node > .nav-link-item:hover{ background: rgba(0,200,240,.08); color: var(--accent); }
@media (max-width: 991.98px){
  .navbar-collapse{ background: var(--surface); }
  .nav-submenu{ background: rgba(255,255,255,.03); }
}
.navbar-toggler-icon{ filter: invert(1) grayscale(1) brightness(2); }

/* ---------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------- */
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: 0 8px 24px rgba(0,200,240,.22);
}
.btn-primary:hover{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  color: var(--bg) !important;
  box-shadow: 0 14px 32px rgba(0,200,240,.32);
}
.btn-outline-primary{ border-color: var(--accent); color: var(--accent); }
.btn-outline-primary:hover{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-light-soft{ background: rgba(255,255,255,.06); color: var(--fg); border:1px solid var(--border-c); }
.btn-light-soft:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* ---------------------------------------------------------------
   HERO
--------------------------------------------------------------- */
.hero-section-v2{
  background:
    radial-gradient(circle at 88% 8%, rgba(0,200,240,.12) 0%, transparent 42%),
    linear-gradient(180deg, #080c18 0%, #0b1224 100%);
  color: var(--fg);
}
.hero-section-v2:not(.has-photo){
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 88% 8%, rgba(0,200,240,.20) 0%, transparent 45%),
    linear-gradient(160deg, #080c18 0%, #0e1426 55%, #131b2e 100%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
}
.hero-badge{ background: rgba(0,200,240,.08); color: var(--accent); border-color: rgba(0,200,240,.28); border-left-color: var(--accent); }
.hero-title .accent{
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.hero-stats-bar{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.hero-stat-number{
  background: linear-gradient(135deg, #fff, var(--accent-2));
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.hero-dot{ background: rgba(255,255,255,.25); }
.hero-dot.active{ background: var(--accent); }

/* ---------------------------------------------------------------
   SECTION HEADER
--------------------------------------------------------------- */
.section-alt{ background: var(--surface); }
.section-eyebrow{ color: var(--accent); }
.section-eyebrow::before,.section-eyebrow::after{ background: var(--accent); opacity:.5; }
.section-title::after{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.section-subtitle{ color: var(--fg-muted); }

/* ---------------------------------------------------------------
   CARDS
--------------------------------------------------------------- */
.icon-box{
  background: linear-gradient(135deg, rgba(0,200,240,.16), rgba(99,102,241,.12));
  color: var(--accent);
}
.service-card{ background: var(--surface); border-color: var(--border-c); }
.service-card:hover{ box-shadow: 0 0 0 1px rgba(0,200,240,.3), 0 20px 50px rgba(0,200,240,.08); border-color: transparent; }

.content-card{ background: var(--surface); border-color: var(--border-c); }
.content-card:hover{ box-shadow: 0 0 0 1px rgba(0,200,240,.3), 0 20px 50px rgba(0,200,240,.08); }
.content-card:hover::before,.content-card:hover::after{ border-color: var(--accent); }
.content-card .card-img-wrap{ background: var(--surface-2); }
.card-category-badge{ background: var(--accent); color: var(--bg); }
.content-card .card-title-custom{ color: var(--fg); }
.content-card .card-title-custom a:hover{ color: var(--accent); }
.card-meta{ color: var(--fg-muted); }

/* ---------------------------------------------------------------
   TESTIMONI
--------------------------------------------------------------- */
.testi-card{ background: var(--surface); border-color: var(--border-c); }
.testi-card:hover{ border-color: var(--accent); }
.testi-quote{ color: var(--accent); opacity:.8; }
.testi-avatar{ background: var(--surface-2); }
.testi-carousel-btn{ background: var(--surface); color: var(--accent); border-color: var(--border-c); }
.testi-carousel-btn:hover{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.testi-carousel-dots button{ background: var(--border-c); }
.testi-carousel-dots button.active{ background: var(--accent); }

/* ---------------------------------------------------------------
   CLIENT MARQUEE
--------------------------------------------------------------- */
.client-marquee-section{ background: var(--bg); }
.client-logo-item img{ filter: grayscale(100%) brightness(2.2); opacity:.45; }
.client-logo-item:hover img{ filter: grayscale(0%) brightness(1); opacity:1; }

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.footer-custom{ border-top-color: var(--accent); }
.footer-custom a:hover{ color: var(--accent); }
.footer-social a:hover{ background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------------------------------------------------------------
   FORMS
--------------------------------------------------------------- */
.form-control, .form-select{ background: var(--surface); border-color: var(--border-c); color: var(--fg); }
.form-control:focus, .form-select:focus{ background: var(--surface); color: var(--fg); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(0,200,240,.15); }
.form-control::placeholder{ color: var(--fg-dim); }

/* ---------------------------------------------------------------
   PAGE HEADER / PAGINATION / FILTER / TABS / GALLERY / CTA
--------------------------------------------------------------- */
.page-header{ border-bottom-color: var(--accent); }
.pagination .page-link{ color: var(--accent); background: var(--surface); }
.pagination .page-item.active .page-link{ background: var(--accent); color: var(--bg); }

.filter-pill{ background: var(--surface); color: var(--fg); border-color: var(--border-c); }
.filter-pill:hover, .filter-pill.active{ background: var(--accent); border-color: var(--accent); color: var(--bg); }

.product-tabs{ border-bottom-color: var(--border-c); }
.product-tabs .nav-link{ color: var(--fg-muted); }
.product-tabs .nav-link:hover{ color: var(--accent); border-color: var(--border-c); }
.product-tabs .nav-link.active{ color: var(--accent); border-bottom-color: var(--accent); }

.gallery-nav-btn:hover{ background: var(--accent); color: var(--bg); }

.cta-box{ background: linear-gradient(135deg, #080c18 0%, #0e1426 50%, #131b2e 100%); box-shadow: 0 20px 50px rgba(0,200,240,.08); }
.cta-box::before{ background: radial-gradient(circle, rgba(0,200,240,.12) 0%, transparent 70%); }
.cta-box::after{ background: radial-gradient(circle, rgba(99,102,241,.10) 0%, transparent 70%); }
.cta-box .btn-light{ background: var(--accent); color: var(--bg); }
.cta-box .btn-light:hover{ background: var(--accent-2); color: var(--bg); }

.stat-number{ color: var(--accent); }
.stat-label{ color: var(--fg-muted); }

/* ---------------------------------------------------------------
   PAKET HARGA BERTINGKAT (product_packages)
--------------------------------------------------------------- */
.pkg-card{
  background: var(--surface);
  border: 1px solid var(--border-c);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
}
.pkg-card:hover{ border-color: rgba(0,200,240,.4); box-shadow: 0 20px 50px rgba(0,200,240,.08); }
.pkg-card-highlight{
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0,200,240,.06), var(--surface) 40%);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(0,200,240,.12);
}
.pkg-badge{
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--bg); font-size: .72rem; font-weight: 700;
  padding: .3rem .9rem; border-radius: 999px; white-space: nowrap;
}
.pkg-price{ color: var(--accent); font-size: 1.4rem; font-weight: 800; }
.pkg-specs li{ color: var(--fg-muted); padding: .35rem 0; font-size: .92rem; border-bottom: 1px dashed var(--border-c); }
.pkg-specs li:last-child{ border-bottom: none; }
.pkg-specs li i{ color: var(--accent); }
.pkg-card .btn{ margin-top: auto; }