/* ============================================
   THEME.CSS - PT. Surya Bangkit Cemerlang
   Default: LIGHT MODE
   ============================================ */

/* ─────────────────────────────────────────────
   LIGHT MODE
───────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg-body:           #ffffff;
  --bg-section-alt:    #f7f4f1;
  --bg-card:           #ffffff;
  --bg-navbar:         #ffffff;
  --bg-footer:         #f2ede8;
  --bg-overlay:        rgba(255,255,255,0.55);

  --text-heading:      #1a1208;
  --text-body:         #3b3026;
  --text-muted:        #7a6a58;
  --text-navbar:       #1a1208;
  --text-footer:       #4a3f30;

  --accent:            #c97a20;
  --accent-hover:      #e08f35;
  --accent-light:      #d98f38;
  --accent-bg:         rgba(201,122,32,0.10);
  --accent-border:     rgba(201,122,32,0.28);

  --border-soft:       #e5ddd5;
  --border-card:       rgba(201,122,32,0.18);
  --shadow-card:       rgba(0,0,0,0.08);
  --shadow-navbar:     rgba(0,0,0,0.07);

  --input-bg:          #f7f4f1;
  --input-border:      rgba(201,122,32,0.25);
  --input-text:        #1a1208;
  --input-placeholder: #a89a88;

  --dropdown-bg:       #ffffff;
  --dropdown-border:   #ece6df;

  --footer-heading:    #c97a20;
  --footer-text:       #4a3f30;
  --footer-muted:      #7a6a58;
  --footer-link:       #4a3f30;
  --footer-link-hover: #c97a20;
  --footer-border:     rgba(201,122,32,0.2);
  --footer-strong:     #1a1208;
  --footer-bottom:     #7a6a58;
}

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-body:           #15181b;
  --bg-section-alt:    #1e2227;
  --bg-card:           #23272b;
  --bg-navbar:         #181a1c;
  --bg-footer:         #1a1a1a;
  --bg-overlay:        rgba(20,20,20,0.47);

  --text-heading:      #ffffff;
  --text-body:         #d5d5d5;
  --text-muted:        #aaaaaa;
  --text-navbar:       #ffffff;
  --text-footer:       #c9c9c9;

  --accent:            #ffa726;
  --accent-hover:      #ffb855;
  --accent-light:      #ffb366;
  --accent-bg:         rgba(255,167,38,0.10);
  --accent-border:     rgba(255,167,38,0.28);

  --border-soft:       #222428;
  --border-card:       rgba(255,167,38,0.15);
  --shadow-card:       rgba(0,0,0,0.40);
  --shadow-navbar:     rgba(0,0,0,0.09);

  --input-bg:          rgba(255,255,255,0.05);
  --input-border:      rgba(255,167,38,0.22);
  --input-text:        #ffffff;
  --input-placeholder: #777777;

  --dropdown-bg:       #23272b;
  --dropdown-border:   #2a2d32;

  --footer-heading:    #ffa726;
  --footer-text:       #c9c9c9;
  --footer-muted:      #888888;
  --footer-link:       #c9c9c9;
  --footer-link-hover: #ffa726;
  --footer-border:     rgba(255,167,38,0.2);
  --footer-strong:     #dddddd;
  --footer-bottom:     #888888;
}

/* ─────────────────────────────────────────────
   TRANSISI HALUS
───────────────────────────────────────────── */
body, .navbar, .about-section, .product-section,
.gallery-section, .site-footer, .product-card,
.about-info, .stat-box, .vm-card, .stat-card,
.value-card, .highlight-card, .benefit-card,
.process-step-card, .event-card, .cert-card,
.contact-form-box, .cta-box, .component-card,
.dropdown-content, .faq-question, .faq-answer,
.video-cta, .cta-content {
  transition:
    background-color 0.30s ease,
    border-color      0.30s ease,
    color             0.25s ease,
    box-shadow        0.25s ease !important;
}

/* ─────────────────────────────────────────────
   BODY
───────────────────────────────────────────── */
body {
  background-color: var(--bg-body) !important;
  color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────── */
.navbar {
  background: var(--bg-navbar) !important;
  border-bottom: 2px solid var(--border-soft) !important;
  box-shadow: 0 2px 8px var(--shadow-navbar) !important;
}
.brand-title { color: var(--text-navbar) !important; }
.brand-tagline { color: var(--text-muted) !important; }
.navbar-menu > a,
.navbar-menu .dropdown > a { color: var(--text-navbar) !important; }
.navbar-menu > a:hover,
.navbar-menu .dropdown > a:hover {
  color: var(--accent) !important;
  background: var(--accent-bg) !important;
}
.dropdown-content {
  background: var(--dropdown-bg) !important;
  box-shadow: 0 6px 24px var(--shadow-card) !important;
}
.dropdown-content a {
  color: var(--text-navbar) !important;
  border-bottom-color: var(--dropdown-border) !important;
}
.dropdown-content a:hover {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────────
   ACCENT WARNA PER TEMA
   Light = orange tua gelap, Dark = orange terang
───────────────────────────────────────────── */
[data-theme="light"] {
  --accent:       #8a4e0f;
  --accent-light: #a0621a;
  --accent-hover: #b07020;
  --footer-heading: #8a4e0f;
  --footer-link-hover: #8a4e0f;
}
[data-theme="dark"] {
  --accent:       #ffa726;
  --accent-light: #ffb366;
  --accent-hover: #ffb855;
}

/* ─────────────────────────────────────────────
   TOMBOL TOGGLE
───────────────────────────────────────────── */
.theme-toggle {
  background: var(--accent-bg);
  border: 2px solid var(--accent-border);
  border-radius: 30px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-navbar);
  margin-left: 8px;
  user-select: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
}
.theme-toggle:hover {
  background: var(--accent-border);
  border-color: var(--accent);
  transform: scale(1.08);
}
@media (max-width: 950px) {
  .theme-toggle { margin-left: 0; }
}

/* ─────────────────────────────────────────────
   FOOTER - IKUT TEMA
───────────────────────────────────────────── */
.site-footer {
  background: var(--bg-footer) !important;
  border-top: 1px solid var(--footer-border) !important;
}
.footer-brand h3,
.footer-contact h3,
.footer-nav h3 { color: var(--footer-heading) !important; }

.footer-description { color: var(--footer-muted) !important; }
.footer-bottom p { color: var(--footer-bottom) !important; }

.contact-list li,
.contact-list li div { color: var(--footer-text) !important; }
.contact-list strong { color: var(--footer-strong) !important; }
.contact-icon { color: var(--footer-text) !important; }

.nav-list li a { color: var(--footer-link) !important; }
.nav-list li a:hover { color: var(--footer-link-hover) !important; }

.social-icon-footer {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
}

/* ─────────────────────────────────────────────
   ABOUT SECTION
───────────────────────────────────────────── */
.about-section { background: var(--bg-body) !important; }
.section-title { color: var(--accent) !important; }
.about-info {
  background: var(--bg-overlay) !important;
  color: var(--text-body) !important;
}
[data-theme="light"] .about-info h3 { 
  color: #c97a20 !important; 
  text-shadow: none !important; 
}
[data-theme="dark"]  .about-info h3 { color: #ffa726 !important; }
.about-tagline { color: var(--accent-light) !important; }
.about-description { color: var(--text-body) !important; }
.stat-box {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
}
.stat-number { color: var(--accent) !important; }
.stat-label  { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   PRODUCT SECTION
───────────────────────────────────────────── */
.product-section { background: var(--bg-section-alt) !important; }
.section-title-product { color: var(--accent) !important; }
.product-intro { color: var(--text-muted) !important; }
.product-card {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: 0 8px 32px var(--shadow-card) !important;
}
.product-info h3 { color: var(--accent) !important; }
.product-info p  { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   GALLERY SECTION
───────────────────────────────────────────── */
.gallery-section { background: var(--bg-body) !important; }
.section-title-gallery { color: var(--accent) !important; }
.gallery-intro { color: var(--text-muted) !important; }
.gallery-item { border-color: var(--border-card) !important; }

/* ─────────────────────────────────────────────
   SECTION BACKGROUNDS - SEMUA HALAMAN
───────────────────────────────────────────── */
.about-section.company-profile,
.cp-vision-mission, .cp-stats, .cp-values,
.cert-intro, .cert-grid-section, .cert-benefits, .cert-cta,
.cap-intro, .cap-category, .cap-stats, .cap-cta,
.process-intro, .process-timeline-visual,
.process-steps-section, .process-stats, .process-cta,
.events-intro, .events-section, .event-stats, .events-cta,
.contact-main-section, .contact-map-section,
.featured-video-section, .video-highlights,
.product-detail-simple, .product-components-section,
.core-values-section, .faq-section {
  background: var(--bg-section-alt) !important;
}

/* video-cta dan cta sections */
.video-cta, .cap-cta, .cert-cta,
.process-cta, .events-cta {
  background: var(--bg-body) !important;
}

/* cta-box di dalam cta section */
.cta-box {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: 0 6px 24px var(--shadow-card) !important;
}
.cta-box h2 { color: var(--text-heading) !important; }
.cta-box p  { color: var(--text-body) !important; }

/* cta-content (tanpa box, langsung di section) */
.cta-content h2 { color: var(--text-heading) !important; }
.cta-content p  { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   HEADING & TEXT UMUM
───────────────────────────────────────────── */
.cap-intro h2, .cert-intro h2, .events-intro h2,
.process-intro h2, .featured-video-section h2,
.video-highlights h2, .contact-info-box h2,
.event-stats h2, .product-components-section h2,
.about-section.company-profile .section-title,
.cp-stats h2, .core-title {
  color: var(--accent) !important;
}

.intro-text, .video-intro, .map-subtitle,
.contact-intro, .stats-intro, .components-intro,
.core-subtitle {
  color: var(--text-muted) !important;
}

.about-text p { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   CARDS - SEMUA JENIS
───────────────────────────────────────────── */
.vm-card, .stat-card, .value-card,
.highlight-card, .benefit-card,
.process-step-card, .event-card, .cert-card,
.contact-form-box, .video-info,
.component-card, .product-simple-specs {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: 0 6px 24px var(--shadow-card) !important;
}

/* Heading dalam card */
.vm-card h3, .value-card h4, .value-name,
.highlight-card h4, .benefit-card h4,
.step-info h3, .event-content h3,
.cert-info h3, .component-label h4,
.video-info h3, .product-simple-specs h3,
.contact-form-box h2, .contact-info-box h2 {
  color: var(--accent) !important;
}

/* Text dalam card */
.vm-card p, .vm-card ul li,
.value-card p, .value-text,
.highlight-card p, .benefit-card p,
.step-description, .step-details li,
.event-description, .cert-description,
.component-label p, .category-text p,
.capability-list li, .contact-text p,
.detail-item p, .detail-value,
.product-simple-specs li, .product-desc,
.product-desc p, .event-detail-item {
  color: var(--text-body) !important;
}

.detail-label, .cert-title,
.product-subtitle { color: var(--text-muted) !important; }

/* stat-card */
.stat-card .stat-number { color: var(--accent) !important; }
.stat-card .stat-label  { color: var(--text-body) !important; }

/* about stats grid */
.about-stats-grid .stat-box {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
}
.about-stats-grid .stat-number { color: var(--accent) !important; }
.about-stats-grid .stat-label  { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   COMPANY PROFILE SPESIFIK
───────────────────────────────────────────── */
.cp-vision-mission { background: var(--bg-body) !important; }
.vm-card ul li::before { color: var(--accent) !important; }
.category-subtitle { color: var(--accent) !important; }
.category-header h2 { color: var(--text-heading) !important; }
.step-details li strong { color: var(--accent) !important; }
.flow-label { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────── */
.contact-text h4 { color: var(--accent) !important; }
.contact-icon-box {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
}
.map-info {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
}
.map-note { color: var(--text-body) !important; }
.map-note strong { color: var(--accent) !important; }

/* ─────────────────────────────────────────────
   PRODUCT DETAIL
───────────────────────────────────────────── */
.product-simple-info h1 { color: var(--accent) !important; }
.product-subtitle { color: var(--text-muted) !important; }
.product-desc, .product-desc p { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */
.faq-question {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-card) !important;
}
.faq-answer {
  background: var(--bg-section-alt) !important;
  border-color: var(--border-card) !important;
}
.faq-answer p { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   FORM
───────────────────────────────────────────── */
.form-group label { color: var(--accent) !important; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--input-placeholder) !important;
}
select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
select option {
  background-color: var(--bg-card) !important;
  color: var(--input-text) !important;
}