html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--page-bg);
  color: var(--page-text);
}
.site-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(226, 232, 240, 0.7) !important;
}
.theme-card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}
.theme-panel {
  background-color: var(--panel-bg) !important;
  color: var(--panel-text) !important;
}
section[id] {
  scroll-margin-top: 5.5rem;
}
.shadow-soft {
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.08);
}
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
}
.hero-accent {
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 40%);
}
.animate-block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.enter-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Light Theme Variables & Overrides */
:root {
  color-scheme: light;
  --page-bg: #f8fafc;
  --page-text: #0f172a;
  --card-bg: rgba(255, 255, 255, 0.95);
  --card-border: rgba(226, 232, 240, 0.85);
  --panel-bg: rgba(236, 253, 245, 0.8);
  --panel-text: #0f172a;
}
html[data-theme="light"] .site-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(226, 232, 240, 0.7) !important;
}
html[data-theme="light"] .site-header a,
html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .site-header p,
html[data-theme="light"] .site-header span {
  color: #0f172a !important;
}
html[data-theme="light"] .site-header a:hover,
html[data-theme="light"] .site-header nav a:hover {
  color: #111827 !important;
}
html[data-theme="light"] #theme-toggle {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border-color: rgba(226, 232, 240, 0.7) !important;
}
html[data-theme="light"] #theme-toggle:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] #theme-toggle {
  background-color: #1e293b !important;
  color: #34d399 !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}
html[data-theme="dark"] #theme-toggle:hover {
  background-color: #334155 !important;
  color: #34d399 !important;
}
html[data-theme="light"] .theme-panel {
  background-color: rgba(236, 253, 245, 0.9) !important;
  color: #0f172a !important;
}
html[data-theme="light"] #layanan {
  background-color: #047857 !important;
}
html[data-theme="light"] #layanan .bg-emerald-600\/85 {
  background-color: rgba(16, 185, 129, 0.85) !important;
}
html[data-theme="light"] #layanan .bg-white {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html[data-theme="light"] #layanan .bg-white h3,
html[data-theme="light"] #layanan .bg-white h3 i,
html[data-theme="light"] #layanan .bg-white h4,
html[data-theme="light"] #layanan .bg-white p,
html[data-theme="light"] #layanan .bg-white i,
html[data-theme="light"] #layanan .service-card-title,
html[data-theme="light"] #layanan .service-card-title i,
html[data-theme="light"] #layanan .service-card-subtitle,
html[data-theme="light"] #layanan .service-card-desc,
html[data-theme="light"] #layanan .text-slate-100,
html[data-theme="light"] #layanan .text-slate-200,
html[data-theme="light"] #layanan .text-slate-950,
html[data-theme="light"] #layanan .text-slate-900,
html[data-theme="light"] #layanan .text-slate-700 {
  color: #000000 !important;
}
html[data-theme="light"] #latar-belakang-panel,
html[data-theme="light"] #pengalaman-panel {
  background-color: #047857 !important;
  color: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="light"] #latar-belakang-panel .bg-white,
html[data-theme="light"] #pengalaman-panel .bg-white {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] #latar-belakang-panel .bg-slate-50,
html[data-theme="light"] #pengalaman-panel .bg-slate-50 {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
html[data-theme="light"] #visi-misi .glass-card {
  background-color: #047857 !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
}
html[data-theme="light"] #visi-misi .glass-card p,
html[data-theme="light"] #visi-misi .glass-card h2,
html[data-theme="light"] #visi-misi .glass-card li,
html[data-theme="light"] #visi-misi .glass-card .text-emerald-700,
html[data-theme="light"] #visi-misi .glass-card .text-slate-700 {
  color: #ffffff !important;
}
html[data-theme="light"] #legalitas-card {
  background-color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="light"] #legalitas-card .bg-slate-50 {
  background-color: #ffffff !important;
}
html[data-theme="light"] #kontak-card {
  background-color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #ffffff !important;
}
html[data-theme="light"] #kontak-card h3,
html[data-theme="light"] #kontak-card p,
html[data-theme="light"] #kontak-card .text-emerald-700,
html[data-theme="light"] #kontak-card .text-slate-900 {
  color: #ffffff !important;
}
html[data-theme="light"] #kontak-card .bg-white {
  background-color: #047857 !important;
  color: #ffffff !important;
}

/* Dark Theme Variables & Overrides */
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0f172a;
  --page-text: #f8fafc;
  --card-bg: rgba(15, 23, 42, 0.8);
  --card-border: rgba(71, 85, 105, 0.2);
  --panel-bg: rgba(30, 41, 59, 0.75);
  --panel-text: #e2e8f0;
}
html[data-theme="dark"] .site-header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}
html[data-theme="dark"] .theme-card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}
html[data-theme="dark"] .theme-card .rounded-3xl {
  background-color: rgba(16, 185, 129, 0.08);
}
html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-900 {
  color: #f8fafc !important;
}
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .text-slate-300 {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .text-slate-200,
html[data-theme="dark"] .text-slate-100 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .text-slate-50 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .theme-card .theme-panel {
  background-color: rgba(16, 185, 129, 0.08);
}
html[data-theme="dark"] footer {
  background-color: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}
html[data-theme="dark"] footer .text-slate-600 {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] footer .text-slate-700 {
  color: #e2e8f0 !important;
}

/* Custom text-dark class definition for reliable theme colors */
.text-dark {
  color: #0f172a !important;
}
html[data-theme="dark"] .text-dark {
  color: #f8fafc !important;
}

/* Dark Theme Panel, Card & Modal Overrides */
html[data-theme="dark"] #latar-belakang-panel,
html[data-theme="dark"] #pengalaman-panel {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html[data-theme="dark"] #latar-belakang-panel .bg-white,
html[data-theme="dark"] #latar-belakang-panel .rounded-3xl,
html[data-theme="dark"] #legalitas-card .bg-slate-50,
html[data-theme="dark"] #legalitas-card .rounded-3xl,
html[data-theme="dark"] #pengalaman-panel .bg-white {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.2) !important;
}

html[data-theme="dark"] #legalitas-card {
  background-color: #0f172a !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html[data-theme="dark"] #visi-misi .glass-card {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #visi-misi .glass-card p,
html[data-theme="dark"] #visi-misi .glass-card h2,
html[data-theme="dark"] #visi-misi .glass-card li,
html[data-theme="dark"] #visi-misi .glass-card span {
  color: #ffffff !important;
}

html[data-theme="dark"] #visi-misi .glass-card .text-emerald-700 {
  color: #34d399 !important;
}

html[data-theme="dark"] #layanan .service-card {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: rgba(71, 85, 105, 0.2) !important;
}

html[data-theme="dark"] #layanan .service-card h3,
html[data-theme="dark"] #layanan .service-card h4,
html[data-theme="dark"] #layanan .service-card p,
html[data-theme="dark"] #layanan .service-card i {
  color: #ffffff !important;
}

html[data-theme="dark"] #layanan .service-card h3 {
  color: #10b981 !important;
}

html[data-theme="dark"] #kontak-card {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: rgba(71, 85, 105, 0.2) !important;
}

html[data-theme="dark"] #kontak-card h3,
html[data-theme="dark"] #kontak-card p,
html[data-theme="dark"] #kontak-card span,
html[data-theme="dark"] #kontak-card a {
  color: #ffffff !important;
}

html[data-theme="dark"] #kontak-card .text-emerald-700 {
  color: #34d399 !important;
}

html[data-theme="dark"] #kontak-card a[href^="tel:"] {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html[data-theme="dark"] #kontak-card a[href^="tel:"] i {
  color: #ffffff !important;
}

html[data-theme="dark"] #pdfModalContent {
  background-color: #0f172a !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html[data-theme="dark"] #pdfModalContent h3 {
  color: #ffffff !important;
}

/* Custom outline button for Lihat Layanan */
.btn-outline-dark {
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
}
.btn-outline-dark:hover {
  color: #ffffff !important;
  border-color: #10b981 !important;
  background-color: #10b981 !important;
}
html[data-theme="dark"] .btn-outline-dark {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .btn-outline-dark:hover {
  color: #ffffff !important;
  border-color: #10b981 !important;
  background-color: #10b981 !important;
}

#hero-description {
  color: #0f172a !important;
}
html[data-theme="dark"] #hero-description {
  color: #f8fafc !important;
}