/**
 * CF Teknologi — dark mode overrides for ALL landing pages.
 * Loaded AFTER page-specific styles so hardcoded #fff surfaces still flip.
 */
.theme-dark {
    color-scheme: dark;
}

/* ---------- Global text on body ---------- */
.theme-dark body,
.theme-dark p,
.theme-dark li,
.theme-dark span:not(.badge):not(.harga-save-pill):not(.price-card__badge) {
    /* keep default from theme-dark; don't force every span */
}

/* ---------- Bootstrap / generic light surfaces ---------- */
.theme-dark .bg-white,
.theme-dark .bg-light,
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .list-group-item,
.theme-dark .accordion-item,
.theme-dark .accordion-button,
.theme-dark .accordion-body,
.theme-dark .table,
.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .input-group-text {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .accordion-button:not(.collapsed) {
    background-color: #111827 !important;
    color: #a7f3d0 !important;
    box-shadow: none !important;
}

.theme-dark .accordion-button::after {
    filter: invert(1) brightness(1.5);
}

.theme-dark .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .table thead th,
.theme-dark .table > thead {
    background-color: #111827 !important;
    color: #6ee7b7 !important;
}

.theme-dark .text-muted,
.theme-dark .text-secondary,
.theme-dark .form-text {
    color: #94a3b8 !important;
}

.theme-dark .text-dark,
.theme-dark .text-black {
    color: #f8fafc !important;
}

.theme-dark .border,
.theme-dark .border-top,
.theme-dark .border-bottom,
.theme-dark .border-start,
.theme-dark .border-end {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .shadow-sm,
.theme-dark .shadow,
.theme-dark .shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- Section titles ---------- */
.theme-dark .section-title h2,
.theme-dark .section-title h3,
.theme-dark .section-title p {
    color: #f8fafc !important;
}

.theme-dark .section-title span,
.theme-dark .section-title .sub-title {
    color: #6ee7b7 !important;
}

/* ---------- Template cards used site-wide ---------- */
.theme-dark .service-card,
.theme-dark .blog-card,
.theme-dark .blog-card .blog-content,
.theme-dark .member-card,
.theme-dark .contact-card,
.theme-dark .client-item,
.theme-dark .single-price,
.theme-dark .faq-accordion .accordion .accordion-item {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.theme-dark .service-card h3,
.theme-dark .service-card h3 a,
.theme-dark .blog-card h3,
.theme-dark .blog-card h3 a,
.theme-dark .member-card h3,
.theme-dark .member-card h3 a {
    color: #ffffff !important;
}

.theme-dark .service-card p,
.theme-dark .blog-card p,
.theme-dark .member-card p {
    color: #94a3b8 !important;
}

.theme-dark .service-area .service-card .service-icon-wrap {
    background: linear-gradient(145deg, #03532c 0%, #1f2937 100%) !important;
    color: #6ee7b7 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .service-area .service-card:hover .service-icon-wrap {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* ---------- Home landing custom blocks ---------- */
.theme-dark .stats-landing {
    background: linear-gradient(135deg, #0f172a 0%, #03532c 100%) !important;
}

.theme-dark .stat-card-landing,
.theme-dark .how-step-card {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.theme-dark .stat-card-landing .stat-number,
.theme-dark .how-step-card h3 {
    color: #f8fafc !important;
}

.theme-dark .stat-card-landing .stat-label,
.theme-dark .how-step-card p {
    color: #94a3b8 !important;
}

.theme-dark .how-step-card .step-num {
    color: #6ee7b7 !important;
}

.theme-dark .how-step-card .step-icon {
    background: #03532c !important;
    color: #a7f3d0 !important;
}

.theme-dark .brand-area,
.theme-dark .brand-bg {
    background-color: #111827 !important;
}

.theme-dark .brand-title span {
    color: #6ee7b7 !important;
}

.theme-dark .brand-title h2 {
    color: #ffffff !important;
}

/* ---------- Produk ---------- */
.theme-dark .produk-card,
.theme-dark .product-card,
.theme-dark [class*="produk-"][class*="card"],
.theme-dark .plan-card,
.theme-dark .feature-card {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.theme-dark .produk-card h3,
.theme-dark .produk-card h4,
.theme-dark .produk-card h5,
.theme-dark .product-card h3,
.theme-dark .product-card h4,
.theme-dark .plan-card h3,
.theme-dark .feature-card h3 {
    color: #ffffff !important;
}

.theme-dark .produk-card p,
.theme-dark .product-card p,
.theme-dark .plan-card p,
.theme-dark .feature-card p {
    color: #94a3b8 !important;
}

/* Catch common light gray page wrappers from produk/about */
.theme-dark [style*="background: #fff"],
.theme-dark [style*="background:#fff"],
.theme-dark [style*="background: #ffffff"],
.theme-dark [style*="background:#ffffff"],
.theme-dark [style*="background-color: #fff"],
.theme-dark [style*="background-color:#fff"] {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

/* ---------- Harga (backup if page CSS order flips) ---------- */
.theme-dark .pricing-page .price-card,
.theme-dark .price-card {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .pricing-page .price-card h3,
.theme-dark .price-card h3 {
    color: #6ee7b7 !important;
}

.theme-dark .pricing-page .price-card .amount,
.theme-dark .price-card .amount {
    color: #f8fafc !important;
}

.theme-dark .pricing-page .price-card .tier-note,
.theme-dark .pricing-page .price-card .audience,
.theme-dark .pricing-page .price-card ul li,
.theme-dark .price-card .tier-note,
.theme-dark .price-card .audience,
.theme-dark .price-card ul li {
    color: #cbd5e1 !important;
}

.theme-dark .harga-table-wrap {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .harga-table-wrap thead th {
    background: #111827 !important;
    color: #6ee7b7 !important;
}

.theme-dark .harga-table-wrap tbody th,
.theme-dark .harga-table-wrap td {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .harga-table-wrap .section-head th {
    background: #03532c !important;
    color: #d1fae5 !important;
}

.theme-dark .harga-footnote {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

.theme-dark .harga-cta-secondary {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .harga-cta-secondary-copy h4 {
    color: #6ee7b7 !important;
}

.theme-dark .harga-cta-secondary-copy p {
    color: #94a3b8 !important;
}

.theme-dark .harga-filters select {
    background: #1f2937 !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.theme-dark .optional-btn {
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #6ee7b7 !important;
    background: transparent !important;
}

/* ---------- Blog / portfolio ---------- */
.theme-dark .blog-area,
.theme-dark .portfolio-area {
    background-color: transparent !important;
}

.theme-dark .blog-dtls-content,
.theme-dark .widget-area .widget,
.theme-dark .comment-area,
.theme-dark .comment-respond {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

.theme-dark .blog-dtls-content h2,
.theme-dark .blog-dtls-content h3,
.theme-dark .widget-area .widget .widget-title {
    color: #ffffff !important;
}

.theme-dark .portfolio-item,
.theme-dark .project-card,
.theme-dark .work-card {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .portfolio-item h3,
.theme-dark .portfolio-item h4,
.theme-dark .project-card h3,
.theme-dark .work-card h3 {
    color: #ffffff !important;
}

/* ---------- About pages (company / mission / press / team / award / karir) ---------- */
.theme-dark .cp-card,
.theme-dark .mission-card,
.theme-dark .press-card,
.theme-dark .media-logo-card,
.theme-dark .award-card,
.theme-dark .award-partner-logo,
.theme-dark .team-card,
.theme-dark .team-card-inner,
.theme-dark .team-front,
.theme-dark .team-back,
.theme-dark .member-profile,
.theme-dark .career-card,
.theme-dark .job-card,
.theme-dark .job-detail-panel,
.theme-dark .filter-chip,
.theme-dark .value-card,
.theme-dark .timeline-card,
.theme-dark .stat-box {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.theme-dark .cp-card h3,
.theme-dark .cp-card h4,
.theme-dark .mission-card h3,
.theme-dark .mission-card h4,
.theme-dark .press-card h3,
.theme-dark .award-card h3,
.theme-dark .career-card h3,
.theme-dark .job-card h3,
.theme-dark .value-card h3,
.theme-dark .team-card h3,
.theme-dark .team-front h4,
.theme-dark .team-back h5 {
    color: #ffffff !important;
}

.theme-dark .cp-card p,
.theme-dark .mission-card p,
.theme-dark .press-card p,
.theme-dark .award-card p,
.theme-dark .career-card p,
.theme-dark .job-card p,
.theme-dark .value-card p {
    color: #94a3b8 !important;
}

/* Common light gray section wraps used in about pages */
.theme-dark .mission-section,
.theme-dark .press-section,
.theme-dark .award-section,
.theme-dark .career-section,
.theme-dark .company-section,
.theme-dark .cp-section {
    background-color: #0f172a !important;
}

/* Soft pastel backgrounds used inline in about pages */
.theme-dark [class*="-area"],
.theme-dark section {
    /* don't blanket override all sections — heroes keep green */
}

/* ---------- Layanan forms / create pages ---------- */
.theme-dark .contact-wrap-form,
.theme-dark .service-form,
.theme-dark .request-form,
.theme-dark form.card,
.theme-dark .form-box {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.theme-dark .contact-wrap-form label,
.theme-dark .service-form label,
.theme-dark .request-form label {
    color: #cbd5e1 !important;
}

.theme-dark .form-control::placeholder {
    color: #64748b !important;
}

/* ---------- Checkout / newsletter / static page ---------- */
.theme-dark .checkout-card,
.theme-dark .newsletter-box,
.theme-dark .static-page-content,
.theme-dark .page-content,
.theme-dark .verify-notice,
.theme-dark .alert-light {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.theme-dark .checkout-card h1,
.theme-dark .checkout-card h2,
.theme-dark .checkout-card h3,
.theme-dark .static-page-content h1,
.theme-dark .static-page-content h2,
.theme-dark .page-content h1,
.theme-dark .page-content h2 {
    color: #ffffff !important;
}

/* ---------- Catch-all: common class fragments for white cards ---------- */
.theme-dark [class*="card"]:not(.banner-card):not(.credit-card):not(.service-icon):not(.cf-nav-cta),
.theme-dark [class*="panel"],
.theme-dark [class*="box"]:not(.switch-box):not(.search-box),
.theme-dark [class*="tile"],
.theme-dark [class*="chip"] {
    /* Too aggressive if applied to everything — use softer rule for bg only via attribute substring below */
}

/* Soft tint backgrounds (#f7/#f8/#f0/#faf5) → dark surface when they appear as class backgrounds:
   handled via repeating patterns in page CSS using !important here on known utility-ish classes */

.theme-dark .bg-soft,
.theme-dark .soft-bg,
.theme-dark .surface,
.theme-dark .surface-light,
.theme-dark .content-box,
.theme-dark .info-box,
.theme-dark .white-box {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

/* Force readable headings inside ANY remaining light-looking bootstrap wrappers */
.theme-dark .bg-white h1,
.theme-dark .bg-white h2,
.theme-dark .bg-white h3,
.theme-dark .bg-white h4,
.theme-dark .bg-white h5,
.theme-dark .bg-white h6,
.theme-dark .bg-light h1,
.theme-dark .bg-light h2,
.theme-dark .bg-light h3,
.theme-dark .bg-light h4,
.theme-dark .bg-light h5,
.theme-dark .bg-light h6,
.theme-dark .card h1,
.theme-dark .card h2,
.theme-dark .card h3,
.theme-dark .card h4,
.theme-dark .card h5,
.theme-dark .card h6 {
    color: #ffffff !important;
}

.theme-dark .bg-white p,
.theme-dark .bg-light p,
.theme-dark .card p {
    color: #94a3b8 !important;
}

/* ---------- Banner / hero text stays white on green (already OK) ---------- */
.theme-dark .harga-hero h1,
.theme-dark .harga-hero .lead,
.theme-dark .career-hero h1,
.theme-dark .award-hero h1,
.theme-dark .inner-banner .inner-title h3,
.theme-dark .banner-text h1,
.theme-dark .banner-text p {
    color: #ffffff !important;
}

/* CF logo: use light wordmark on dark sticky surfaces when needed */
.theme-dark .navbar-area.is-sticky .cf-brand-logo,
.theme-dark .footer-single-content .cf-brand-logo,
.theme-dark .cf-footer__logo .cf-brand-logo {
    /* SVG already swapped via brand settings on footer; sticky remains readable */
    filter: none;
}

/* Keep brand footer green in dark mode (do not flatten to slate) */
.theme-dark .footer-area-bg,
.theme-dark .cf-footer {
    background: transparent !important;
}

.theme-dark .footer-area-bg {
    background:
        radial-gradient(ellipse 80% 60% at 10% -10%, rgba(255, 255, 255, 0.08), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 100%, rgba(0, 0, 0, 0.22), transparent 50%),
        linear-gradient(165deg, #046338 0%, #03532c 42%, #024526 100%) !important;
}

.theme-dark .cf-footer__heading,
.theme-dark .cf-footer__tagline,
.theme-dark .cf-footer__copy,
.theme-dark .cf-footer__contact strong,
.theme-dark .cf-footer__links a {
    color: inherit;
}

/* ---------- Pagination ---------- */
.theme-dark .page-link {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.theme-dark .page-item.active .page-link {
    background-color: #03532c !important;
    border-color: #03532c !important;
    color: #fff !important;
}

/* ---------- Preserve CTAs / brand greens that must stay intentional ---------- */
.theme-dark .harga-cta-band,
.theme-dark .cms-section--cta,
.theme-dark .submission-area,
.theme-dark .cf-hero,
.theme-dark .inner-banner,
.theme-dark .harga-hero,
.theme-dark .career-hero,
.theme-dark .award-hero {
    /* keep brand green heroes; do not flatten */
}

.theme-dark .harga-cta-band .default-btn,
.theme-dark .cms-section--cta .default-btn,
.theme-dark .cms-section--cta .cms-cta-btn {
    background: #fff !important;
    color: #03532c !important;
    border-color: #fff !important;
}

.theme-dark .article-category-badge,
.theme-dark .job-detail-chip,
.theme-dark .produk-card-cat,
.theme-dark .badge-item {
    color: #a7f3d0 !important;
    background-color: rgba(3, 83, 44, 0.35) !important;
}

.theme-dark .cp-icon,
.theme-dark .value-card .value-icon,
.theme-dark .commitment-icon {
    color: #fff !important;
}

/* Produk ecosystem CTA — full dark surface + readable buttons */
.theme-dark .produk-ecosystem-note {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

.theme-dark .produk-ecosystem-note h3 {
    color: #6ee7b7 !important;
}

.theme-dark .produk-ecosystem-note p {
    color: #94a3b8 !important;
}

.theme-dark .produk-ecosystem-actions {
    background: transparent !important;
    border-color: transparent !important;
}

.theme-dark .produk-ecosystem-actions .default-btn {
    background-color: #03532c !important;
    border-color: #03532c !important;
    color: #ffffff !important;
}

.theme-dark .produk-ecosystem-actions .default-btn:hover {
    background-color: #024526 !important;
    border-color: #024526 !important;
    color: #ffffff !important;
}

.theme-dark .produk-ecosystem-actions .default-btn.active {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.theme-dark .produk-ecosystem-actions .default-btn.active:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #6ee7b7 !important;
    color: #a7f3d0 !important;
}

.theme-dark .produk-ecosystem-actions .default-btn iconify-icon {
    color: inherit !important;
}

/* Produk detail — gallery & related surfaces */
.theme-dark .produk-gallery-section {
    background: linear-gradient(180deg, #111827 0%, #0f172a 55%) !important;
}

.theme-dark .produk-gallery-intro .section-kicker {
    background: rgba(110, 231, 183, 0.1) !important;
    border-color: rgba(110, 231, 183, 0.22) !important;
    color: #6ee7b7 !important;
}

.theme-dark .produk-gallery-intro h2 {
    color: #ffffff !important;
}

.theme-dark .produk-gallery-intro p,
.theme-dark .produk-gallery-hint {
    color: #94a3b8 !important;
}

.theme-dark .produk-gallery-hint iconify-icon {
    color: #6ee7b7 !important;
}

.theme-dark .produk-gallery-main {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important;
}

.theme-dark .produk-gallery-nav {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #e2e8f0 !important;
}

.theme-dark .produk-gallery-nav:hover {
    background: #03532c !important;
    border-color: #03532c !important;
    color: #fff !important;
}

.theme-dark .produk-gallery-thumb.is-active {
    border-color: #6ee7b7 !important;
}

.theme-dark .produk-detail-page {
    background-color: #0f172a !important;
}

.theme-dark .produk-pricing-section {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .produk-pricing-header .section-title span,
.theme-dark .produk-detail-page .service-area .section-title span {
    color: #6ee7b7 !important;
}

.theme-dark .produk-pricing-header .section-title h2,
.theme-dark .produk-detail-page .service-area .section-title h2 {
    color: #ffffff !important;
}

.theme-dark .produk-pricing-lead,
.theme-dark .produk-pricing-footnote {
    color: #94a3b8 !important;
}

.theme-dark .produk-pricing-footnote a {
    color: #6ee7b7 !important;
}

.theme-dark .produk-billing-switch {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}