/*
 * KlikNTER - WHMCS custom.css (folder css/ utama)
 * File ini ter-load setelah theme.css - override semua warna
 * ============================================================
 */

/* ============================================================
   ROOT VARIABLES - KlikNTER colors
   ============================================================ */
:root {
  --primary:        #00c896;
  --primary-dark:   #00a878;
  --primary-darker: #0a0f1e;
  --kn-bg:          #0a0f1e;
  --kn-card:        #111827;
  --kn-footer:      #060b16;
  --kn-green:       #00c896;
  --kn-blue:        #3b82f6;
  --kn-purple:      #7c3aed;
  --kn-muted:       #94a3b8;
  --kn-border:      rgba(0, 200, 150, 0.18);
}

/* ============================================================
   BODY
   ============================================================ */
body {
  background-color: #f0fdf9 !important;
}

/* ============================================================
   PAGE HEADER BANNER (Shopping Cart, dll)
   ============================================================ */
.tt-page-header,
section.tt-page-header,
.tt-page-header.bg-gradient {
  background:
    radial-gradient(ellipse 80% 120% at 0% 50%, rgba(0,200,150,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(59,130,246,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #060d1a 0%, #0a1628 50%, #060d1a 100%) !important;
  border-bottom: 1px solid rgba(0,200,150,0.15) !important;
}

/* Breadcrumb */
.tt-breadcrumb {
  background: rgba(10,15,30,0.75) !important;
}
.tt-triangle-right {
  border-bottom-color: rgba(10,15,30,0.75) !important;
}
.tt-breadcrumb ol li a,
.tt-breadcrumb ol li.active { color: rgba(255,255,255,0.65) !important; }
.tt-breadcrumb ol li a:hover { color: #00c896 !important; }

/* ============================================================
   HEADING GRADIENT
   Span/teks berwarna di h1/h2/h3 jadi gradien hijau-biru
   ============================================================ */
.text-primary { color: #00c896 !important; }
a.text-primary:hover { color: #00a878 !important; }

h1 .text-primary, h2 .text-primary, h3 .text-primary,
h1 span.text-primary, h2 span.text-primary, h3 span.text-primary,
.tt-section-heading h2 span, .tt-section-heading h3 span,
.tt-hero h1 span {
  background: linear-gradient(90deg, #00c896 0%, #22d3ee 50%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline !important;
}

/* ============================================================
   BUTTONS - Solid teal persis web utama
   ============================================================ */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #00c896 !important;
  background-image: none !important;
  border-color: #00c896 !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0,200,150,0.35) !important;
  transition: all 0.25s ease !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #00b386 !important;
  background-image: none !important;
  border-color: #00b386 !important;
  box-shadow: 0 6px 20px rgba(0,200,150,0.50) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 3px rgba(0,200,150,0.30) !important;
}

/* Default/outline button */
.btn-default {
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid #00c896 !important;
  color: #00c896 !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
  background-color: #00c896 !important;
  border-color: #00c896 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,200,150,0.35) !important;
}

.btn-outline-primary {
  border-color: #00c896 !important;
  color: #00c896 !important;
}
.btn-outline-primary:hover {
  background-color: #00c896 !important;
  border-color: #00c896 !important;
  color: #fff !important;
}

/* ============================================================
   PRICING CARD BORDER GLOW - seperti web utama KlikNTER
   ============================================================ */
.tt-price-single {
  border: 1.5px solid rgba(0,200,150,0.25) !important;
  border-radius: .75rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.tt-price-single:hover {
  border-color: rgba(0,200,150,0.70) !important;
  box-shadow:
    0 0 0 1px rgba(0,200,150,0.15),
    0 0 20px rgba(0,200,150,0.22),
    0 20px 40px -4px rgba(0,200,150,0.10) !important;
  transform: translateY(-4px) !important;
}

/* Service card glow */
.tt-service-single:before,
.tt-service-single:after {
  background: linear-gradient(45deg,
    rgba(0,200,150,0),
    rgba(0,200,150,0.85) 32%,
    rgba(34,211,238,0.60) 67%,
    rgba(59,130,246,0)
  ) !important;
}

/* ============================================================
   FOOTER - dark dengan glow hijau + ungu
   ============================================================ */
footer.footer,
.footer.tt-footer,
footer {
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(0,200,150,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(124,58,237,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f1e 0%, #060b16 100%) !important;
  border-top: 1px solid rgba(0,200,150,0.12) !important;
  color: #94a3b8 !important;
}

/* Semua teks footer terang */
footer.footer p, footer.footer span, footer.footer li, footer.footer address,
.tt-footer p, .tt-footer span, .tt-footer li { color: #94a3b8 !important; }

/* Heading footer putih */
footer.footer h1, footer.footer h2, footer.footer h3,
footer.footer h4, footer.footer h5, footer.footer h6,
footer.footer strong, footer.footer b,
.tt-footer h1, .tt-footer h2, .tt-footer h3,
.tt-footer h4, .tt-footer h5, .tt-footer h6,
.tt-footer strong, .tt-footer b { color: #fff !important; }

/* Footer links */
.tt-footer-menu li a, footer.footer a, .tt-footer a, footer a {
  color: #94a3b8 !important; opacity: 1 !important;
}
.tt-footer-menu li a:hover, footer.footer a:hover,
.tt-footer a:hover, footer a:hover {
  color: #00c896 !important; text-decoration: none !important;
}
.tt-footer-bottom { border-top: 1px solid rgba(0,200,150,0.10) !important; }

footer.footer .btn, .tt-footer .btn {
  background-color: rgba(0,200,150,0.08) !important;
  border: 1px solid rgba(0,200,150,0.20) !important;
  color: #94a3b8 !important;
}
footer.footer .btn:hover, .tt-footer .btn:hover {
  background-color: rgba(0,200,150,0.15) !important;
  color: #00c896 !important;
}

/* ============================================================
   BG OVERRIDES
   ============================================================ */
.bg-primary { background-color: #00c896 !important; }
.bg-dark    { background-color: #0a0f1e !important; }
.bg-gradient {
  background:
    radial-gradient(ellipse 80% 120% at 0% 50%, rgba(0,200,150,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(59,130,246,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #060d1a 0%, #0a1628 50%, #060d1a 100%) !important;
}

/* ============================================================
   DARK MODE  [data-bs-theme="dark"]
   ============================================================ */
[data-bs-theme="dark"] body {
  background-color: #0a0f1e !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(0,200,150,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(59,130,246,0.06) 0%, transparent 55%) !important;
}

/* Dark navbar */
[data-bs-theme="dark"] header.header,
[data-bs-theme="dark"] .tt-header {
  background-color: rgba(10,15,30,0.97) !important;
  border-bottom: 1px solid rgba(0,200,150,0.12) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,0.45) !important;
}
[data-bs-theme="dark"] .tt-header .tt-main-header ul li a,
[data-bs-theme="dark"] .tt-custom-navbar li a:not(.btn) { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tt-header .tt-main-header ul li a:hover,
[data-bs-theme="dark"] .tt-custom-navbar li a:not(.btn):hover { color: #00c896 !important; }

/* Dark pricing cards */
[data-bs-theme="dark"] .tt-price-single,
[data-bs-theme="dark"] .bg-white.tt-price-single {
  background-color: #111827 !important;
  border: 1.5px solid rgba(0,200,150,0.28) !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .tt-price-single:hover {
  border-color: rgba(0,200,150,0.75) !important;
  box-shadow:
    0 0 0 1px rgba(0,200,150,0.15),
    0 0 28px rgba(0,200,150,0.25),
    0 20px 40px -4px rgba(0,0,0,0.4) !important;
}

/* Dark heading gradient */
[data-bs-theme="dark"] h1 .text-primary,
[data-bs-theme="dark"] h2 .text-primary,
[data-bs-theme="dark"] h3 .text-primary,
[data-bs-theme="dark"] h1 span.text-primary,
[data-bs-theme="dark"] h2 span.text-primary,
[data-bs-theme="dark"] h3 span.text-primary,
[data-bs-theme="dark"] .tt-section-heading h2 span,
[data-bs-theme="dark"] .tt-section-heading h3 span {
  background: linear-gradient(90deg, #00c896 0%, #22d3ee 50%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Dark cards */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .mc-promo-manage,
[data-bs-theme="dark"] .mc-promo-login,
[data-bs-theme="dark"] .bg-white.tt-promo,
[data-bs-theme="dark"] .bg-white.tt-testimonial-item,
[data-bs-theme="dark"] .bg-white.tt-account,
[data-bs-theme="dark"] .tt-announcement-single {
  background-color: #111827 !important;
  border-color: rgba(0,200,150,0.14) !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .panel .card-header {
  background-color: rgba(0,200,150,0.05) !important;
  border-bottom: 1px solid rgba(0,200,150,0.10) !important;
}

/* Dark forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] #order-standard_cart .form-control,
[data-bs-theme="dark"] #registration .form-control {
  background-color: #1e293b !important;
  border: 1px solid rgba(0,200,150,0.18) !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #00c896 !important;
  box-shadow: 0 0 0 3px rgba(0,200,150,0.12) !important;
}

/* Dark dropdown */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #131c2e !important;
  border: 1px solid rgba(0,200,150,0.12) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: #94a3b8 !important; }
[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: rgba(0,200,150,0.08) !important;
  color: #00c896 !important;
}

/* Dark table */
[data-bs-theme="dark"] .table { color: #94a3b8 !important; }
[data-bs-theme="dark"] .table thead th {
  background-color: rgba(0,200,150,0.06) !important;
  border-bottom: 2px solid rgba(0,200,150,0.12) !important;
  color: #00c896 !important;
}
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th { border-color: rgba(0,200,150,0.07) !important; }
[data-bs-theme="dark"] .table-list > tbody > tr > td { background-color: #111827 !important; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(0,200,150,0.06) !important; }

/* Dark list group */
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .sidebar .list-group-item,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item {
  background-color: #111827 !important;
  border-color: rgba(0,200,150,0.10) !important;
  color: #94a3b8 !important;
}

/* Dark pagination */
[data-bs-theme="dark"] .pagination .page-link {
  background-color: #111827 !important;
  border-color: rgba(0,200,150,0.15) !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: #00c896 !important;
  border-color: #00c896 !important;
  color: #fff !important;
}

/* Dark modal */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-localisation .modal-content {
  background-color: #111827 !important;
  border: 1px solid rgba(0,200,150,0.12) !important;
}

/* Dark text */
[data-bs-theme="dark"] .text-dark { color: #f1f5f9 !important; }
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6 { color: #f8fafc !important; }

/* Dark footer */
[data-bs-theme="dark"] footer.footer,
[data-bs-theme="dark"] .footer.tt-footer,
[data-bs-theme="dark"] footer { color: #94a3b8 !important; }
[data-bs-theme="dark"] footer p,[data-bs-theme="dark"] footer span,
[data-bs-theme="dark"] footer li { color: #94a3b8 !important; }
[data-bs-theme="dark"] footer h1,[data-bs-theme="dark"] footer h2,
[data-bs-theme="dark"] footer h3,[data-bs-theme="dark"] footer h4,
[data-bs-theme="dark"] footer h5,[data-bs-theme="dark"] footer h6,
[data-bs-theme="dark"] footer strong,[data-bs-theme="dark"] footer b { color: #fff !important; }
[data-bs-theme="dark"] footer a { color: #94a3b8 !important; }
[data-bs-theme="dark"] footer a:hover,
[data-bs-theme="dark"] .tt-footer-menu li a:hover { color: #00c896 !important; }

/* Dark WHMCS specific */
[data-bs-theme="dark"] .tt-login-testimonial,
[data-bs-theme="dark"] .tt-group-head,
[data-bs-theme="dark"] #order-standard_cart .summary-container,
[data-bs-theme="dark"] .domain-checker-container .input-group-box,
[data-bs-theme="dark"] .home-domain-search .input-group-wrapper,
[data-bs-theme="dark"] .promo-container .header {
  background-color: #0f172a !important;
}
[data-bs-theme="dark"] #order-standard_cart .field,
[data-bs-theme="dark"] #registration .field { background-color: #1e293b !important; }
[data-bs-theme="dark"] .tt-triangle-right {
  border-bottom-color: rgba(10,15,30,0.75) !important;
}

/* ============================================================
   MISC
   ============================================================ */
hr { border-top-color: rgba(0,200,150,0.12) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0f1e; }
::-webkit-scrollbar-thumb { background: rgba(0,200,150,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00c896; }

/* ============================================================
   FOOTER KLIKNTER - tt-footer-kliknter
   ============================================================ */

.tt-footer-kliknter {
  position: relative;
  background: #0d1117 !important;
  border-top: 1px solid rgba(0,200,150,0.15) !important;
  color: #94a3b8 !important;
  overflow: hidden;
}

/* Green glow bottom-left */
.tt-footer-kliknter::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse at bottom left, rgba(0,200,150,0.13) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Purple glow top-right */
.tt-footer-kliknter::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse at top right, rgba(124,58,237,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.tt-footer-kliknter > * { position: relative; z-index: 1; }
.tt-footer-kliknter .container { position: relative; z-index: 1; }

/* Padding top area */
.tt-footer-kliknter .tt-footer-top {
  padding: 68px 0 52px;
}

/* Logo text fallback */
.tt-footer-logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
}

/* Description text */
.tt-footer-kliknter .tt-footer-desc {
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
  max-width: 280px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Horizontal divider line (below desc, above social) */
.tt-footer-kliknter .tt-footer-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(255,255,255,0.07) !important;
  margin: 24px 0 0 !important;
  border: none !important;
}

/* Small accent line below headings */
.tt-footer-kliknter .tt-footer-divider-sm {
  display: block !important;
  width: 28px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #00c896 0%, transparent 100%) !important;
  margin: 10px 0 20px !important;
  border-radius: 2px !important;
}

/* Column headings */
.tt-footer-kliknter .tt-footer-heading {
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0 !important;
}

/* Menu links */
.tt-footer-kliknter .tt-footer-menu { margin: 0; padding: 0; }
.tt-footer-kliknter .tt-footer-menu li { margin-bottom: 11px; }
.tt-footer-kliknter .tt-footer-menu li a {
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  opacity: 1 !important;
}
.tt-footer-kliknter .tt-footer-menu li a:hover { color: #00c896 !important; }

/* ── SOCIAL ICONS ──
   WHMCS social-accounts.tpl outputs:
   <li class="list-inline-item"><a href="..." class="btn-social btn-facebook"><i class="fab fa-facebook-f"></i></a></li>
*/
.tt-footer-kliknter .tt-footer-social { margin-top: 20px; }
.tt-footer-kliknter .tt-footer-social ul { margin: 0; padding: 0; }

.tt-footer-kliknter .tt-footer-social .list-inline-item { margin: 0 6px 6px 0 !important; }

.tt-footer-kliknter .tt-footer-social .list-inline-item a,
.tt-footer-kliknter .tt-footer-social a[class*="btn-social"],
.tt-footer-kliknter .tt-footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #6b7280 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}
.tt-footer-kliknter .tt-footer-social .list-inline-item a:hover,
.tt-footer-kliknter .tt-footer-social a[class*="btn-social"]:hover,
.tt-footer-kliknter .tt-footer-social a:hover {
  background: rgba(0,200,150,0.12) !important;
  border-color: rgba(0,200,150,0.35) !important;
  color: #00c896 !important;
  transform: translateY(-2px) !important;
}

/* Footer bottom bar */
.tt-footer-kliknter .tt-footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 18px 0 !important;
  background: rgba(0,0,0,0.22) !important;
}

/* Copyright */
.tt-footer-kliknter .tt-footer-copy {
  color: #374151 !important;
  font-size: 0.83rem !important;
  margin: 0 !important;
}
.tt-footer-kliknter .tt-footer-copy-link {
  color: #00c896 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.tt-footer-kliknter .tt-footer-copy-link:hover { color: #00daa6 !important; }

/* Language button */
.tt-footer-kliknter .tt-footer-lang-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #4b5563 !important;
  font-size: 0.82rem !important;
  padding: 5px 14px !important;
  border-radius: 7px !important;
  transition: all 0.2s ease !important;
  line-height: 1.6 !important;
}
.tt-footer-kliknter .tt-footer-lang-btn:hover {
  background: rgba(0,200,150,0.08) !important;
  border-color: rgba(0,200,150,0.25) !important;
  color: #00c896 !important;
}

/* Payment image */
.tt-footer-kliknter .tt-footer-widget img {
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.tt-footer-kliknter .tt-footer-widget img:hover { opacity: 1; }

/* ============================================================
   HEADER SHRINK ON SCROLL
   ============================================================ */

/* Default state - header normal */
header.header.tt-header,
.tt-header:not(.tt-double-header) {
  transition: padding 0.35s ease, background-color 0.35s ease,
              box-shadow 0.35s ease, backdrop-filter 0.35s ease !important;
}

/* Logo normal size */
.tt-header .logo-img {
  transition: max-height 0.35s ease, transform 0.35s ease !important;
  max-height: 48px !important;
}

/* Nav links normal */
.tt-header .tt-main-header ul li a,
.tt-custom-navbar li a:not(.btn) {
  transition: font-size 0.3s ease, padding 0.3s ease !important;
}

/* ── SCROLLED STATE  (class "scrolled" ditambah via JS) ── */

header.header.tt-header.scrolled,
.tt-header.scrolled {
  padding: 0.2rem 0 !important;
  background-color: rgba(10, 15, 30, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40),
              0 1px 0 rgba(0, 200, 150, 0.12) !important;
  border-bottom: 1px solid rgba(0, 200, 150, 0.12) !important;
}

/* Logo mengecil */
.tt-header.scrolled .logo-img {
  max-height: 28px !important;
  transform: scale(0.92) !important;
}

/* Nav links sedikit mengecil */
.tt-header.scrolled .tt-main-header ul li a,
.tt-header.scrolled .tt-custom-navbar li a:not(.btn) {
  font-size: 13px !important;
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
}

/* Padding container mengecil */
.tt-header.scrolled:not(.tt-double-header) {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

/* Toolbar icons mengecil */
.tt-header.scrolled .toolbar .nav-link {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8rem !important;
}

/* Dark mode scrolled */
[data-bs-theme="dark"] header.header.tt-header.scrolled,
[data-bs-theme="dark"] .tt-header.scrolled {
  background-color: rgba(6, 10, 22, 0.98) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.60),
              0 1px 0 rgba(0, 200, 150, 0.12) !important;
}

/* Also support existing .affix class from WHMCS jQuery affix */
.tt-header.affix {
  padding: 0.2rem 0 !important;
  background-color: rgba(10, 15, 30, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40),
              0 1px 0 rgba(0, 200, 150, 0.12) !important;
  border-bottom: 1px solid rgba(0, 200, 150, 0.12) !important;
}
.tt-header.affix .logo-img {
  max-height: 28px !important;
}
[data-bs-theme="dark"] .tt-header.affix {
  background-color: rgba(6, 10, 22, 0.98) !important;
  border-color: rgba(0, 200, 150, 0.12) !important;
}

/* ============================================================
   HEADER SCROLLED - teks menu jadi terang (light & dark mode)
   ============================================================ */

/* Saat scrolled - semua nav link jadi terang */
header.header.tt-header.scrolled .tt-main-header ul li a,
header.header.tt-header.scrolled .tt-custom-navbar li a:not(.btn),
header.header.tt-header.scrolled .navbar-nav .nav-link,
.tt-header.scrolled .tt-main-header ul li a,
.tt-header.scrolled .tt-custom-navbar li a:not(.btn),
.tt-header.scrolled .navbar-nav .nav-link,
.tt-header.affix .tt-main-header ul li a,
.tt-header.affix .tt-custom-navbar li a:not(.btn),
.tt-header.affix .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Hover jadi hijau */
header.header.tt-header.scrolled .tt-main-header ul li a:hover,
header.header.tt-header.scrolled .tt-custom-navbar li a:not(.btn):hover,
.tt-header.scrolled .tt-main-header ul li a:hover,
.tt-header.scrolled .tt-custom-navbar li a:not(.btn):hover,
.tt-header.affix .tt-main-header ul li a:hover,
.tt-header.affix .tt-custom-navbar li a:not(.btn):hover {
  color: #00c896 !important;
}

/* Active/current menu item */
header.header.tt-header.scrolled .tt-main-header ul li a.active,
.tt-header.scrolled .tt-main-header ul li a.active,
.tt-header.affix .tt-main-header ul li a.active {
  color: #00c896 !important;
}

/* Icon toolbar (search, user, cart) */
header.header.tt-header.scrolled .toolbar .nav-link,
.tt-header.scrolled .toolbar .nav-link,
.tt-header.affix .toolbar .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
header.header.tt-header.scrolled .toolbar .nav-link:hover,
.tt-header.scrolled .toolbar .nav-link:hover,
.tt-header.affix .toolbar .nav-link:hover {
  color: #00c896 !important;
  border-color: rgba(0, 200, 150, 0.35) !important;
  background: rgba(0, 200, 150, 0.08) !important;
}

/* Search input saat scrolled */
header.header.tt-header.scrolled .search,
.tt-header.scrolled .search,
.tt-header.affix .search {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
header.header.tt-header.scrolled .search .form-control,
.tt-header.scrolled .search .form-control,
.tt-header.affix .search .form-control {
  color: #ffffff !important;
  background: transparent !important;
}
header.header.tt-header.scrolled .search .form-control::placeholder,
.tt-header.scrolled .search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

/* Dropdown saat scrolled */
header.header.tt-header.scrolled .dropdown-menu,
.tt-header.scrolled .dropdown-menu,
.tt-header.affix .dropdown-menu {
  background-color: #131c2e !important;
  border: 1px solid rgba(0, 200, 150, 0.12) !important;
}
header.header.tt-header.scrolled .dropdown-item,
.tt-header.scrolled .dropdown-item,
.tt-header.affix .dropdown-item {
  color: #94a3b8 !important;
}
header.header.tt-header.scrolled .dropdown-item:hover,
.tt-header.scrolled .dropdown-item:hover,
.tt-header.affix .dropdown-item:hover {
  background-color: rgba(0, 200, 150, 0.08) !important;
  color: #00c896 !important;
}