/* ============================================================
   AsFin — Kustomisasi tema landing (override Softland)
   Palet resmi Coretax DJP (mode terang & gelap)
   ============================================================ */

:root {
  --asfin-dark:   #131B44;
  --asfin-blue:   #212C5F;
  --asfin-mid:    #464F7A;
  --asfin-light:  #6B7294;
  --asfin-accent: #FFC91B;
  --asfin-accent-2: #FFD241;
  --asfin-bg:     #f5f4ef;
  --asfin-surface: #FFFFFF;
  --asfin-surface-2: #faf7ef;
  --asfin-muted:  #6B7294;
  --asfin-text-body: #5F6265;
  --asfin-border: rgba(33, 44, 95, .14);
  --asfin-line: rgba(33, 44, 95, .08);
  --asfin-shadow-card: 0 15px 30px rgba(33, 44, 95, .08);
  --asfin-shadow-lg: 0 25px 45px rgba(33, 44, 95, .12);
}

html[data-nui-mode="dark"] {
  --asfin-dark:   #f1f1f1;
  --asfin-blue:   #FFC91B;
  --asfin-mid:    #FFD241;
  --asfin-light:  #FFDB67;
  --asfin-accent: #FFC91B;
  --asfin-accent-2: #FFD241;
  --asfin-bg:     #0f0f0f;
  --asfin-surface: #212121;
  --asfin-surface-2: #272727;
  --asfin-muted:  #aaaaaa;
  --asfin-text-body: rgba(255, 255, 255, .62);
  --asfin-border: rgba(255, 255, 255, .12);
  --asfin-line: rgba(255, 255, 255, .08);
  --asfin-shadow-card: 0 15px 30px rgba(0, 0, 0, .35);
  --asfin-shadow-lg: 0 25px 45px rgba(0, 0, 0, .45);
}

/* ---------- Warna dasar & tipografi ---------- */
body {
  background-color: var(--asfin-bg);
  color: var(--asfin-dark);
}
h1, h2, h3, h4, h5, h6 { color: var(--asfin-dark); }
p { color: var(--asfin-text-body); }
.text-primary { color: var(--asfin-blue) !important; }
.text-muted { color: var(--asfin-muted) !important; }
.text-success { color: #16A34A !important; }
.bg-primary { background-color: var(--asfin-blue) !important; }
.bg-light { background-color: var(--asfin-surface-2) !important; }

/* ---------- Tombol ---------- */
.btn { border-radius: 30px; letter-spacing: .4px; }
.btn-primary {
  background-color: var(--asfin-blue) !important;
  border-color: var(--asfin-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px -6px rgba(33, 44, 95, .55);
}
html[data-nui-mode="dark"] .btn-primary {
  background-color: var(--asfin-blue) !important;
  border-color: var(--asfin-blue) !important;
  color: #131B44 !important;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--asfin-brand-hover, #161D3F) !important;
  border-color: var(--asfin-brand-hover, #161D3F) !important;
  box-shadow: 0 10px 24px -6px rgba(33, 44, 95, .7);
  transform: translateY(-3px);
}
html[data-nui-mode="dark"] .btn-primary:hover,
html[data-nui-mode="dark"] .btn-primary:focus {
  background-color: #E0AE0F !important;
  border-color: #E0AE0F !important;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .7);
}
.btn-outline-primary {
  color: var(--asfin-blue) !important;
  border-color: var(--asfin-blue) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--asfin-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -6px rgba(33, 44, 95, .5);
  transform: translateY(-3px);
}
html[data-nui-mode="dark"] .btn-outline-primary:hover,
html[data-nui-mode="dark"] .btn-outline-primary:focus {
  color: #131B44 !important;
}
/* CTA utama pakai aksen kuning (hero & pricing PRO) */
.btn-accent {
  background-color: var(--asfin-accent) !important;
  border-color: var(--asfin-accent) !important;
  color: #131B44 !important;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(255, 201, 27, .55);
}
.btn-accent:hover, .btn-accent:focus {
  background-color: var(--asfin-accent-2) !important;
  border-color: var(--asfin-accent-2) !important;
  color: #131B44 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(255, 201, 27, .7);
}

/* ---------- Navbar ---------- */
.navbar-custom { padding: 14px 0; }
.navbar-custom.navbar-white .navbar-nav li a { color: var(--asfin-dark) !important; font-weight: 500; }
.navbar-custom.navbar-white .navbar-nav li.active a,
.navbar-custom.navbar-white .navbar-nav li a:hover,
.navbar-custom.navbar-white .navbar-nav li a:focus,
.navbar-custom.navbar-white .navbar-nav li a:active { color: var(--asfin-blue) !important; }
/* Latar navbar translusen agar tetap terbaca di atas hero */
.navbar-custom.navbar-white { background: rgba(255, 255, 255, .94) !important; backdrop-filter: blur(8px); }
.is-sticky.navbar-custom { background: var(--asfin-surface) !important; box-shadow: 0 3px 12px rgba(33, 44, 95, .12); }
/* Tombol di navbar tidak ikut aturan link biasa */
.navbar-custom .btn,
.navbar-custom .btn a { color: inherit !important; }
.navbar-custom .btn-outline-primary {
  color: var(--asfin-blue) !important;
  border-color: var(--asfin-blue) !important;
  background: transparent !important;
}
.navbar-custom .btn-outline-primary:hover {
  background: var(--asfin-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -6px rgba(33, 44, 95, .5);
  transform: translateY(-2px);
}
html[data-nui-mode="dark"] .navbar-custom .btn-outline-primary:hover {
  color: #131B44 !important;
}
.navbar-custom .btn-accent { color: #131B44 !important; }
/* Tombol navbar ghost: tanpa border & tanpa background */
.navbar-custom .btn-ghost {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--asfin-blue) !important;
  font-weight: 500;
  padding: 8px 14px;
}
.navbar-custom .btn-ghost:hover,
.navbar-custom .btn-ghost:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--asfin-mid) !important;
  text-decoration: underline;
  transform: none;
}
.navbar-custom .btn-ghost-strong { font-weight: 700; color: var(--asfin-dark) !important; }
.navbar-custom .btn-ghost-strong:hover { color: var(--asfin-blue) !important; }

/* Tombol toggle tema di navbar */
[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--asfin-border);
  border-radius: 50%;
  background: var(--asfin-surface);
  color: var(--asfin-dark);
  line-height: 1;
}
[data-theme-toggle]:hover { background: var(--asfin-surface-2); color: var(--asfin-blue); }

/* ---------- Hero ---------- */
.bg-home {
  background: linear-gradient(150deg, #161D3F 0%, var(--asfin-blue) 55%, var(--asfin-mid) 100%);
}
html[data-nui-mode="dark"] .bg-home {
  background: linear-gradient(150deg, #0f0f0f 0%, #1C254F 55%, #212121 100%);
}
.bg-overlay {
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08) 0, transparent 45%),
                    radial-gradient(circle at 80% 75%, rgba(255, 201, 27, .12) 0, transparent 40%);
  opacity: 1;
  animation: none;
}
.home-title h1 { color: #ffffff !important; }
.home-title p { color: rgba(255, 255, 255, .82) !important; }
.home-title .text-primary { color: var(--asfin-accent) !important; }
/* Kartu dashboard di hero */
.home-title .card,
.home-img .card { border: 0; border-radius: 16px; box-shadow: 0 14px 34px rgba(12, 24, 48, .25) !important; }
.home-img .display-3 { color: var(--asfin-mid) !important; }

/* ---------- Judul section & fitur ---------- */
.section { background-color: var(--asfin-bg); }
.section .title { font-weight: 600; color: var(--asfin-dark); }
.section .subtitle { color: var(--asfin-text-body); }
.features { transition: all .3s ease; }
.features:hover { transform: translateY(-6px); }
.features i {
  font-size: 2.2rem;
  color: var(--asfin-blue);
  display: inline-block;
  width: 70px; height: 70px; line-height: 70px;
  background: rgba(33, 44, 95, .10);
  border-radius: 16px;
}
html[data-nui-mode="dark"] .features i {
  background: rgba(255, 201, 27, .12);
}
.feature-primary i { color: var(--asfin-blue) !important; }
.features h6 { color: var(--asfin-dark); font-weight: 600; }
.features p { color: var(--asfin-text-body); }

/* ---------- Pricing ---------- */
.price-item {
  border: 1px solid var(--asfin-border) !important;
  border-radius: 18px;
  transition: all .3s ease;
  background: var(--asfin-surface);
}
.price-item:hover { transform: translateY(-6px); box-shadow: var(--asfin-shadow-card) !important; }
.price-item.active {
  border: 2px solid var(--asfin-blue) !important;
  box-shadow: var(--asfin-shadow-lg) !important;
  background: linear-gradient(180deg, var(--asfin-surface), var(--asfin-surface-2));
}
.price-item.active .pricing-title,
.price-item .pricing-title { color: var(--asfin-dark); }
.price-item h5 { font-weight: 700; }
.price-item h2 { color: var(--asfin-blue); font-weight: 700; }
.price-item.active h5 { color: var(--asfin-blue); }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item {
  border: 1px solid var(--asfin-border) !important;
  border-radius: 12px !important;
  margin-bottom: .75rem;
  overflow: hidden;
  background-color: var(--asfin-surface);
}
.faq-accordion .accordion-button {
  color: var(--asfin-dark);
  font-weight: 600;
  background: var(--asfin-surface);
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--asfin-blue);
  background: rgba(33, 44, 95, .06);
  box-shadow: none;
}
html[data-nui-mode="dark"] .faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 201, 27, .08);
}
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after { filter: hue-rotate(200deg) saturate(1.4); }
.faq-accordion .accordion-body { color: var(--asfin-text-body); }

/* ---------- Form kontak ---------- */
.form-control {
  border-radius: 30px;
  border: 1px solid var(--asfin-border);
  color: var(--asfin-dark);
  background-color: var(--asfin-surface);
}
.form-control:focus {
  border-color: var(--asfin-blue);
  box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35) !important;
  background-color: var(--asfin-surface);
  color: var(--asfin-dark);
}
.form-control::placeholder { color: var(--asfin-muted); }

/* ---------- Footer ---------- */
.footer {
  background: var(--asfin-blue);
  color: rgba(255,255,255,.75);
  padding: 22px 0;
}
html[data-nui-mode="dark"] .footer {
  background: #212121;
  color: rgba(255,255,255,.62);
  border-top: 1px solid var(--asfin-border);
}
.footer p { color: rgba(255,255,255,.75); }
html[data-nui-mode="dark"] .footer p { color: rgba(255,255,255,.62); }
.footer .social-icon {
  display: inline-block; width: 36px; height: 36px; line-height: 36px;
  background: rgba(255,255,255,.08); color: #fff !important;
  border-radius: 50%; text-align: center; transition: all .3s;
}
.footer .social-icon:hover { background: var(--asfin-accent); color: #131B44 !important; transform: translateY(-3px); }

/* ---------- Service / section alternatif ---------- */
.services, .how-it-works, .testimonial, .client-images {
  background-color: var(--asfin-bg);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--asfin-bg); }
::-webkit-scrollbar-thumb { background: var(--asfin-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--asfin-mid); }