/* ============================================================
   INARA THEME SYSTEM - ULTIMATE COMPLETE THEME ENGINE
   ============================================================ */

/* 1. LIGHT MODE (DEFAULT PRESET) */
:root, [data-theme="light"] {
  --color-primary: #002d62;
  --color-primary-light: #0284c7;
  --color-accent: #facc15;
  --color-dark: #0f172a;
  --color-light: #f8fafc;
  --color-white: #ffffff;
  
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.96);
  --bg-mobile-menu: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --nav-link-color: #1e293b;
  --nav-border-color: #f1f5f9;

  /* Cek Tagihan */
  --cek-bg: radial-gradient(circle at center, #f0f9ff 0%, #e0f2fe 100%);
  --cek-border: #bae6fd;
  --cek-badge-bg: rgba(2, 132, 199, 0.12);
  --cek-badge-text: #0284c7;
  --cek-title: #0f172a;
  --cek-subtext: #475569;
  --cek-input-bg: #ffffff;
  --cek-input-border: #cbd5e1;
  --cek-input-text: #0f172a;
  --cek-card-bg: #ffffff;
  --cek-card-border: #e2e8f0;
  --cek-box-bg: #f8fafc;
  --cek-box-border: #e2e8f0;
  --cek-box-title: #64748b;
  --cek-box-val: #0f172a;
  --cek-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.12);

  /* Banners */
  --banner-blue-bg: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --banner-blue-text: #ffffff;
  --banner-blue-sub: #e0f2fe;

  /* Cards */
  --pricing-card-bg: #ffffff;
  --pricing-card-border: #e2e8f0;
  --pricing-title: #0f172a;
  --pricing-price: #0f172a;
  --pricing-desc: #64748b;
  --pricing-features: #475569;
}

/* 2. DARK MODE PRESET */
[data-theme="dark"] {
  --color-primary: #38bdf8;
  --color-primary-light: #0284c7;
  --color-accent: #facc15;
  --color-dark: #f8fafc;
  --color-light: #0b1120;
  --color-white: #111827;

  --bg-page: #090d16;
  --bg-card: #111827;
  --bg-header: rgba(15, 23, 42, 0.96);
  --bg-mobile-menu: #0f172a;
  --border-color: #1f2937;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --nav-link-color: #f8fafc;
  --nav-border-color: rgba(255, 255, 255, 0.08);

  /* Cek Tagihan */
  --cek-bg: radial-gradient(circle at center, #0f172a 0%, #090d16 100%);
  --cek-border: rgba(56, 189, 248, 0.25);
  --cek-badge-bg: rgba(2, 132, 199, 0.2);
  --cek-badge-text: #38bdf8;
  --cek-title: #ffffff;
  --cek-subtext: #94a3b8;
  --cek-input-bg: #111827;
  --cek-input-border: #334155;
  --cek-input-text: #ffffff;
  --cek-card-bg: #111827;
  --cek-card-border: #1f2937;
  --cek-box-bg: #0f172a;
  --cek-box-border: #1e293b;
  --cek-box-title: #94a3b8;
  --cek-box-val: #38bdf8;
  --cek-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* Banners */
  --banner-blue-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --banner-blue-text: #38bdf8;
  --banner-blue-sub: #cbd5e1;

  /* Cards */
  --pricing-card-bg: #111827;
  --pricing-card-border: #1f2937;
  --pricing-title: #ffffff;
  --pricing-price: #ffffff;
  --pricing-desc: #cbd5e1;
  --pricing-features: #e2e8f0;
}

/* ================= DARK MODE STRICT OVERRIDES ================= */
[data-theme="dark"] body {
  background-color: var(--bg-page) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] header,
[data-theme="dark"] .header {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* MOBILE DROPDOWN NAVIGATION IN DARK MODE */
[data-theme="dark"] .nav-menu {
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .nav-menu a:not(.btn-client-area) {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .nav-menu a:not(.btn-client-area):hover {
  color: #38bdf8 !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* HEADINGS & TEXTS IN DARK MODE */
[data-theme="dark"] .logo-title,
[data-theme="dark"] .logo-subtitle,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .info-text h4,
[data-theme="dark"] .contact-heading,
[data-theme="dark"] .feature-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .contact-desc,
[data-theme="dark"] .info-text p,
[data-theme="dark"] .brand-desc,
[data-theme="dark"] .feature-desc {
  color: #cbd5e1 !important;
}

/* SECTION BACKGROUNDS */
[data-theme="dark"] .section.bg-light,
[data-theme="dark"] .bg-light {
  background-color: #0b1120 !important;
}

/* CARDS (FEATURE & INFO) */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .info-item,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* PRICING CARDS (SILVER, GOLD, PLATINUM, PREMIUM) */
[data-theme="dark"] .pricing-card {
  background: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .pkg-name {
  color: #ffffff !important;
}
[data-theme="dark"] .pkg-desc {
  color: #94a3b8 !important;
}
[data-theme="dark"] .pricing-card .amount {
  color: #ffffff !important;
}
[data-theme="dark"] .pricing-card .currency,
[data-theme="dark"] .pricing-card .period {
  color: #94a3b8 !important;
}
[data-theme="dark"] .pricing-card .features-list li,
[data-theme="dark"] .pricing-card .features-list li span {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .pricing-card .install-label,
[data-theme="dark"] .pricing-card .speed-upto {
  color: #94a3b8 !important;
}

/* BANNER: INTERNET TANPA BATAS */
[data-theme="dark"] .banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .banner-text h3 {
  color: #38bdf8 !important;
}
[data-theme="dark"] .banner-text p {
  color: #cbd5e1 !important;
}

/* CTA BANNER: UCAPKAN SELAMAT TINGGAL PADA INTERNET LEMOT */
[data-theme="dark"] .cta-section {
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .cta-bg {
  background: linear-gradient(135deg, #0c1527 0%, #030712 100%) !important;
}
[data-theme="dark"] .cta-content h2 {
  color: #38bdf8 !important;
}
[data-theme="dark"] .cta-content p {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .cta-perks span {
  color: #f8fafc !important;
}

/* FOOTER */
[data-theme="dark"] .footer {
  background-color: #060911 !important;
  border-top: 1px solid #1f2937 !important;
}

/* THEME TOGGLE BUTTON */
.theme-toggle-btn {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.25s ease;
  outline: none;
}
.theme-toggle-btn:hover {
  background: var(--color-primary-light);
  color: #ffffff;
  border-color: var(--color-primary-light);
  transform: scale(1.06);
}

/* CEK TAGIHAN SECTION */
#cektagihan {
  background: var(--cek-bg) !important;
  border-top: 1px solid var(--cek-border) !important;
  border-bottom: 1px solid var(--cek-border) !important;
  transition: all 0.3s ease;
}
#cektagihan .badge-cek {
  background: var(--cek-badge-bg) !important;
  border: 1px solid var(--cek-border) !important;
  color: var(--cek-badge-text) !important;
}
#cektagihan .title-cek {
  color: var(--cek-title) !important;
}
#cektagihan .subtext-cek {
  color: var(--cek-subtext) !important;
}
#cektagihan .search-box-wrap {
  background: var(--cek-input-bg) !important;
  border: 1px solid var(--cek-input-border) !important;
  box-shadow: var(--cek-shadow) !important;
}
#cektagihan .input-field {
  color: var(--cek-input-text) !important;
}
#quickResultBox {
  background: var(--cek-card-bg) !important;
  border: 1px solid var(--cek-card-border) !important;
  box-shadow: var(--cek-shadow) !important;
}
#quickResultBox .res-box {
  background: var(--cek-box-bg) !important;
  border: 1px solid var(--cek-box-border) !important;
}
#quickResultBox .res-box-title {
  color: var(--cek-box-title) !important;
}
#quickResultBox .res-box-val {
  color: var(--cek-box-val) !important;
}

/* ============================================================
   INARA THEME TRANSITION ANIMATIONS & CIRCULAR RIPPLE
   ============================================================ */

/* Global Smooth Color Transitions */
body, header, section, .card, .pricing-card, .contact-card, .footer,
.btn, .input-field, .badge, .nav-menu, #cektagihan, #quickResultBox,
.res-box, .theme-toggle-btn, .hero, .hero-layout, .contact-grid {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Theme Toggle Button Hover & Spin */
.theme-toggle-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease, 
              background-color 0.25s ease !important;
}
.theme-toggle-btn:hover {
  transform: scale(1.1) rotate(8deg) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.4) !important;
}
.theme-toggle-btn:active {
  transform: scale(0.92) !important;
}

#themeIconHeader, #themeIcon, .theme-icon-indicator {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
              color 0.3s ease, 
              opacity 0.25s ease;
}

.theme-icon-spin {
  animation: inaraThemeIconSpin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes inaraThemeIconSpin {
  0% {
    transform: rotate(0deg) scale(0.5);
    opacity: 0.2;
  }
  50% {
    transform: rotate(180deg) scale(1.35);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Circular Expanding Ripple Overlay for Browsers */
.theme-ripple-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  clip-path: circle(0% at var(--ripple-x, 50%) var(--ripple-y, 50%));
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-ripple-overlay.active {
  clip-path: circle(150% at var(--ripple-x, 50%) var(--ripple-y, 50%));
}

/* Native View Transitions API support (Chrome 111+, Edge, Safari 18+) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 9999;
}