/* =====================================================================
   TEMA TERANG / GELAP — Farify Digital
   Tema gelap aktif saat <html> punya class "dark" (diatur oleh tema.js).
   Bagian yang memang sudah gelap (Harga, footer, form konsultasi) tidak diubah.
   ===================================================================== */

/* ---------- Tombol ganti tema (matahari / bulan) ---------- */
.theme-toggle {
  position: relative; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px;
  display: grid; place-items: center; overflow: hidden; color: #0B2545; background: rgba(11,37,69,.06);
  border: 1px solid rgba(11,37,69,.08); cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.theme-toggle:hover { background: rgba(37,99,235,.12); color: #1D4ED8; transform: rotate(-12deg) scale(1.06); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }
.theme-toggle svg { position: absolute; width: 1.2rem; height: 1.2rem; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.theme-toggle .ti-sun  { opacity: 0; transform: rotate(-120deg) scale(.3); }
.theme-toggle .ti-moon { opacity: 1; transform: none; }
html.dark .theme-toggle { color: #FDE68A; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
html.dark .theme-toggle:hover { background: rgba(253,230,138,.14); color: #FEF3C7; }
html.dark .theme-toggle .ti-sun  { opacity: 1; transform: none; }
html.dark .theme-toggle .ti-moon { opacity: 0; transform: rotate(120deg) scale(.3); }

/* ---------- Animasi pindah tema ----------
   Browser modern: lingkaran tema baru melebar dari tombol (View Transitions, lihat tema.js).
   Browser lama: semua warna memudar halus. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, box-shadow .5s ease !important;
}

/* ---------- Warna dasar tema gelap ---------- */
html.dark {
  color-scheme: dark;
  --d-bg: #08121F; --d-surface: #0E1B2E; --d-surface-2: #0B1727; --d-raised: #13233A;
  --d-border: #1D2C44; --d-text: #E6EDF7; --d-body: #A8B6CC; --d-muted: #7F91AB; --d-accent: #60A5FA;
}
html.dark body { background-color: var(--d-bg) !important; color: var(--d-body); }

/* Permukaan terang → gelap (kecuali bagian yang sudah gelap) */
html.dark .bg-white:not(#harga *):not(footer *):not(#paketModal *) { background-color: var(--d-surface); }
html.dark .bg-white\/85 { background-color: rgba(14,27,46,.82); }
html.dark .bg-slate-50:not(body) { background-color: var(--d-surface-2); }
html.dark .bg-slate-100 { background-color: var(--d-raised); }
html.dark .bg-navy-50, html.dark .bg-navy-50\/60 { background-color: var(--d-surface-2); }
html.dark .bg-accent-50, html.dark .hover\:bg-accent-50:hover { background-color: rgba(37,99,235,.15); }
html.dark .bg-accent-100 { background-color: rgba(37,99,235,.18); }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,.15); }
html.dark .text-amber-900 { color: #FDE68A; }
html.dark .hover\:bg-navy-50:hover { background-color: var(--d-raised); }
html.dark .focus\:bg-white:focus { background-color: var(--d-surface); }
html.dark .from-white {
  --tw-gradient-from: var(--d-bg) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 18 31 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .to-navy-50\/60 { --tw-gradient-to: var(--d-surface-2) var(--tw-gradient-to-position); }

/* Teks gelap → terang */
html.dark .text-navy-900:not(#harga *):not(footer *):not(#paketModal *),
html.dark .text-navy-800:not(#harga *):not(footer *):not(#paketModal *) { color: var(--d-text); }
html.dark .text-navy-900\/80 { color: rgba(230,237,247,.85); }
html.dark .text-slate-700 { color: #C3CEDF; }
html.dark .text-slate-600 { color: var(--d-body); }
html.dark .text-slate-500 { color: var(--d-muted); }
html.dark .text-accent-500:not(#harga *):not(footer *):not(#paketModal *),
html.dark .text-accent-600:not(#harga *):not(footer *):not(#paketModal *) { color: var(--d-accent); }
html.dark .hover\:text-accent-500:hover, html.dark .group:hover .group-hover\:text-accent-600 { color: #93C5FD; }

/* Garis tepi */
html.dark .border-slate-200, html.dark .border-slate-100, html.dark .border-navy-100,
html.dark .border-accent-100, html.dark .md\:border-slate-200 { border-color: var(--d-border); }
html.dark .border-white:not(#harga *):not(footer *) { border-color: rgba(255,255,255,.06); }
html.dark .hover\:border-navy-900:hover { border-color: var(--d-accent); }
html.dark .focus\:ring-accent-100:focus { --tw-ring-color: rgba(37,99,235,.35); }

/* ---------- Komponen khusus (index.html) ---------- */
html.dark .dots { background-image: radial-gradient(rgba(148,163,184,.12) 1px, transparent 1px); }
html.dark .grid-bg { background-image: linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px); }
html.dark .chip { background: rgba(37,99,235,.14); border-color: rgba(96,165,250,.28); color: #93C5FD; }
html.dark .nav-link.active { background: rgba(37,99,235,.18); color: #93C5FD; }
html.dark .svc-card { background: rgba(14,27,46,.85); border-color: var(--d-border); box-shadow: 0 12px 32px -18px rgba(0,0,0,.6); }
html.dark .svc-eyebrow { color: #93C5FD; }
html.dark .line-h, html.dark .line-v { background: var(--d-border); }
html.dark .ceo-card, html.dark .meet-card, html.dark .meet-chip, html.dark .meet-photo { background: var(--d-surface); border-color: var(--d-border); }
html.dark .ceo-mark { color: rgba(96,165,250,.22); }
html.dark .meet-badge { background: rgba(37,99,235,.15); color: #93C5FD; }
html.dark .team-pill.is-ceo { box-shadow: 0 0 0 3px var(--d-bg), 0 0 0 5px #3B82F6, 0 25px 50px -25px rgba(0,0,0,.7); }
html.dark .reel-item { border-color: var(--d-raised); }
html.dark .chat-nav, html.dark .reel-nav { background: var(--d-raised); color: var(--d-text); }
html.dark .chat-nav:hover, html.dark .reel-nav:hover { background: #2563EB; color: #fff; }
html.dark .chat-dots button { background: #334155; }
html.dark .pf-logo, html.dark .contact-icon { background: var(--d-surface); border-color: var(--d-border); }
html.dark .contact-card { background: var(--d-surface-2); border-color: var(--d-border); }
html.dark a.contact-card[href]:hover { background: var(--d-surface); border-color: rgba(96,165,250,.45); }
html.dark .client-logo { filter: grayscale(1) brightness(1.8); opacity: .5; }
html.dark .client-logo:hover { filter: none; opacity: 1; }

/* ---------- Isi artikel (artikel.php) ---------- */
html.dark .prose-article { color: #C3CEDF; }
html.dark .prose-article h2, html.dark .prose-article h3, html.dark .prose-article h4,
html.dark .prose-article strong, html.dark .prose-article th { color: var(--d-text); }
html.dark .prose-article a, html.dark .prose-article li::marker { color: var(--d-accent); }
html.dark .prose-article blockquote { background: rgba(37,99,235,.12); color: #BFDBFE; }
html.dark .prose-article th { background: rgba(37,99,235,.12); }
html.dark .prose-article .table-wrap, html.dark .prose-article td, html.dark .prose-article hr { border-color: var(--d-border); }
html.dark .prose-article code { background: var(--d-raised); }
html.dark .prose-article figcaption { color: var(--d-muted); }