/* =========================================================
   LegalCraft — Light & Dark Mode
   ---------------------------------------------------------
   LIGHT (warna dasar)          DARK (turunan dari brand #17517E)
   Primary    #17517E           Primary (teks/ikon) #5AAEE0
   Accent     #2C83B8           Accent              #7FC3EA
   Background #F8FAFC           Background          #0B1622  (deep navy)
   Surface    #FFFFFF           Surface / kartu     #122131
   Surface 2  #F8FAFC           Surface 2           #0F1C2A
   Tint       #F1F7FC           Tint biru           #16304A
   Text       #0F172A           Text                #E6EEF6
   Muted      #475569           Muted               #9AB0C4
   Border     #E2E8F0           Border              #223A50
   Hero       #17517E→#6FB4DD   Hero                #0B2540→#1F6A99
   Footer     #17517E           Footer              #081320
   ========================================================= */

:root {
  --surface-2: #F8FAFC;
  --tint: #F1F7FC;
  --track: #E2E8F0;
  --header-bg: rgba(248, 250, 252, .85);
  --header-bg-scrolled: rgba(255, 255, 255, .95);
  --input-bg: #F8FAFC;
  --footer-bg: #17517E;
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #5AAEE0;
  --primary-600: #4A9BCB;
  --primary-700: #3A86B4;
  --accent: #7FC3EA;
  --accent-light: #A5D6F2;
  --bg: #0B1622;
  --surface: #122131;
  --surface-2: #0F1C2A;
  --tint: #16304A;
  --track: #223A50;
  --text: #E6EEF6;
  --muted: #9AB0C4;
  --border: #223A50;
  --danger: #F87171;
  --success: #34D399;
  --header-bg: rgba(11, 22, 34, .82);
  --header-bg-scrolled: rgba(14, 27, 41, .96);
  --input-bg: #0F1C2A;
  --footer-bg: #081320;

  --grad-hero: linear-gradient(135deg, #0B2540 0%, #134467 55%, #1F6A99 100%);
  --grad-btn: linear-gradient(135deg, #1D6299 0%, #2C83B8 100%);
  --grad-cta: linear-gradient(135deg, #0A1F33 0%, #134467 50%, #1F6A99 100%);
  --grad-soft: linear-gradient(180deg, #0E1B29 0%, #0B1622 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
}

/* Transisi halus saat ganti tema (hanya ketika toggle diklik) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .25s ease, fill .25s ease !important;
}

/* =========================================================
   Tombol toggle tema
   ========================================================= */
.theme-toggle {
  position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--primary);
  display: inline-grid; place-items: center; cursor: pointer; overflow: hidden;
  transition: transform .2s ease, background .2s, border-color .2s, box-shadow .2s;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.theme-toggle i { position: absolute; font-size: 1.05rem; transition: transform .45s cubic-bezier(.4, 1.6, .5, 1), opacity .3s; }
.theme-toggle .fa-moon { transform: translateY(0) rotate(0); opacity: 1; }
.theme-toggle .fa-sun { transform: translateY(26px) rotate(-90deg); opacity: 0; color: #FBBF24; }
html[data-theme="dark"] .theme-toggle .fa-moon { transform: translateY(-26px) rotate(90deg); opacity: 0; }
html[data-theme="dark"] .theme-toggle .fa-sun { transform: translateY(0) rotate(0); opacity: 1; }
.theme-toggle.sm { width: 38px; height: 38px; border-radius: 10px; }
/* varian di atas latar gradasi (splash) */
.theme-toggle.on-dark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
/* tombol melayang (login / register) */
.theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 60; box-shadow: var(--shadow); }

/* =========================================================
   Override komponen untuk DARK MODE
   ========================================================= */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .site-header { background: var(--header-bg); }
html[data-theme="dark"] .site-header.scrolled { background: var(--header-bg-scrolled); }
html[data-theme="dark"] .hamburger { background: var(--surface); }
html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { background: rgba(90, 174, 224, .12); }
html[data-theme="dark"] .brand-name { color: #E6EEF6; }
html[data-theme="dark"] .brand-name span { color: var(--primary); }
html[data-theme="dark"] .eyebrow { background: rgba(90, 174, 224, .14); }
html[data-theme="dark"] .eyebrow-light { color: #fff; background: rgba(255, 255, 255, .12); }

/* Hero */
html[data-theme="dark"] .hero::after { background: linear-gradient(180deg, rgba(11, 22, 34, 0) 0%, var(--bg) 100%); }
html[data-theme="dark"] .blob-1, html[data-theme="dark"] .blob-cta { background: #1F6A99; opacity: .45; }
html[data-theme="dark"] .blob-2 { background: #050D16; }
html[data-theme="dark"] .doc-main, html[data-theme="dark"] .float-card { background: var(--surface); }
html[data-theme="dark"] .doc-back { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .doc-lines span { background: linear-gradient(90deg, #1E3A55, #172C40); }
html[data-theme="dark"] .doc-progress-bar { background: var(--track); }
html[data-theme="dark"] .float-card small { color: var(--primary); }
html[data-theme="dark"] .fc-icon, html[data-theme="dark"] .step-icon, html[data-theme="dark"] .price-badge { background: rgba(90, 174, 224, .14); }

/* Kartu & section */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .why-item,
html[data-theme="dark"] .price-card:not(.price-card-featured),
html[data-theme="dark"] .t-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .benefit-toggle { background: var(--surface); }
html[data-theme="dark"] .benefit-toggle:hover, html[data-theme="dark"] .benefit-toggle[aria-expanded="true"] { background: var(--tint); }
html[data-theme="dark"] .step-num { color: rgba(90, 174, 224, .16); }
html[data-theme="dark"] .service-price, html[data-theme="dark"] .faq-prices li { background: var(--tint); }
html[data-theme="dark"] .faq-question i { background: rgba(90, 174, 224, .14); }
html[data-theme="dark"] .faq-item.open .faq-question i { background: var(--primary); color: #0B1622; }
html[data-theme="dark"] .price-card-featured { border: 1px solid rgba(90, 174, 224, .35); }
html[data-theme="dark"] .price-old { color: #6B8199; }
html[data-theme="dark"] .t-quote { color: rgba(90, 174, 224, .3); }
html[data-theme="dark"] .promo-strip { background: rgba(239, 68, 68, .12); color: #FCA5A5; border-color: rgba(239, 68, 68, .35); }
html[data-theme="dark"] .price-lock { background: rgba(18, 33, 49, .96) !important; }
html[data-theme="dark"] .price-lock-icon { background: rgba(90, 174, 224, .14); }
html[data-theme="dark"] .final-cta { border: 1px solid rgba(90, 174, 224, .2); }
html[data-theme="dark"] .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); }

/* Tombol */
html[data-theme="dark"] .btn-outline:hover { color: #0B1622; }
html[data-theme="dark"] .btn-white { background: #F1F7FC; color: #17517E; }
html[data-theme="dark"] .btn-white:hover { background: #fff; }

/* Modal & form */
html[data-theme="dark"] .modal-dialog { background: var(--surface); }
html[data-theme="dark"] .modal-overlay { background: rgba(2, 8, 15, .7); }
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea { background-color: var(--input-bg); color: var(--text); }
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group select:focus,
html[data-theme="dark"] .form-group textarea:focus { background-color: var(--surface-2); box-shadow: 0 0 0 4px rgba(90, 174, 224, .18); }
html[data-theme="dark"] .form-group input::placeholder, html[data-theme="dark"] .form-group textarea::placeholder { color: #5F7489; }
html[data-theme="dark"] .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235AAEE0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .form-group.has-error input, html[data-theme="dark"] .form-group.has-error select { background-color: rgba(248, 113, 113, .08); }
html[data-theme="dark"] .service-summary { background: var(--tint); }
html[data-theme="dark"] .gate-close { background: var(--surface-2); }
html[data-theme="dark"] .gate-close:hover { background: var(--tint); }
html[data-theme="dark"] .gate-benefits { background: var(--surface-2); }
html[data-theme="dark"] .gate-dialog h2 { color: var(--text); }

@media (max-width: 860px) {
  html[data-theme="dark"] .nav-menu { background: var(--surface); }
}

/* ---------- Auth (login / register / splash) ---------- */
html[data-theme="dark"] .google-fallback { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .g-profile { background: var(--surface-2); }
html[data-theme="dark"] .auth-alert.err { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }
html[data-theme="dark"] .auth-alert.info { background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35); color: #93C5FD; }
html[data-theme="dark"] .auth-success .box { background: var(--surface); }
html[data-theme="dark"] .auth-success circle { fill: rgba(52, 211, 153, .15); }
html[data-theme="dark"] .slide-art .art-icon { background: #F1F7FC; color: #17517E; }

/* ---------- Pembayaran ---------- */
html[data-theme="dark"] .pay-stepper li,
html[data-theme="dark"] .pay-panel,
html[data-theme="dark"] .pay-summary,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .copy-btn,
html[data-theme="dark"] .howto-q,
html[data-theme="dark"] .pop-dialog { background: var(--surface); }
html[data-theme="dark"] .pay-stepper li span, html[data-theme="dark"] .wait-steps li i { background: var(--track); color: var(--muted); }
html[data-theme="dark"] .pay-stepper li.active span, html[data-theme="dark"] .pay-stepper li.done span, html[data-theme="dark"] .wait-steps li.done i { color: #fff; }
html[data-theme="dark"] .method-logo { background: #F8FAFC; }
html[data-theme="dark"] .method-card:has(input:checked) { background: var(--tint); }
html[data-theme="dark"] .va-head, html[data-theme="dark"] .sum-order, html[data-theme="dark"] .failed-meta, html[data-theme="dark"] .wait-card { background: var(--surface-2); }
html[data-theme="dark"] .howto-item.open .howto-q, html[data-theme="dark"] .sum-service { background: var(--tint); }
html[data-theme="dark"] .copy-btn:hover { color: #0B1622; }
html[data-theme="dark"] .va-warn { background: rgba(245, 158, 11, .1); color: #FCD34D; }
html[data-theme="dark"] .code-hl { background: rgba(245, 158, 11, .2); color: #FCD34D; }
html[data-theme="dark"] .timer-box { background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .06)); border-color: rgba(245, 158, 11, .4); }
html[data-theme="dark"] .timer-box small { color: #FCD34D; }
html[data-theme="dark"] .timer-box strong, html[data-theme="dark"] .timer-ring i { color: #FBBF24; }
html[data-theme="dark"] .timer-box.urgent { background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(239, 68, 68, .06)); border-color: rgba(239, 68, 68, .45); }
html[data-theme="dark"] .form-error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }
html[data-theme="dark"] .wait-badge { background: rgba(59, 130, 246, .16); color: #93C5FD; }
html[data-theme="dark"] .wait-hint { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .waiting-box { background: rgba(59, 130, 246, .1); border-color: rgba(59, 130, 246, .35); }
html[data-theme="dark"] #p-service:disabled { background-color: var(--surface-2); opacity: .8; }
html[data-theme="dark"] .receipt-instruction { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .35); color: #6EE7B7; }
html[data-theme="dark"] .x-circle { fill: rgba(248, 113, 113, .14); }
html[data-theme="dark"] .toast { background: #E6EEF6; color: #0B1622; }
/* Struk tetap seperti kertas putih agar mudah dibaca & diunduh */
.receipt { --text: #0F172A; --muted: #475569; --border: #E2E8F0; --success: #16A34A; color: #0F172A; }
html[data-theme="dark"] .receipt-tear { filter: none; }