/* ==========================================================================
   TEMA TERANG SITUS — PPS Physics  (v1)
   --------------------------------------------------------------------------
   Seluruh situs jadi berlatar putih dengan tulisan gelap.

   YANG TETAP HITAM (sengaja):
     - Bilah navigasi ............ .nav-content
     - Kaki halaman .............. .pps-footer
     - SEMUA kartu ............... .card, .member-card, .lead-card, .bod-card,
                                   .aps-founder-card, .value-pillar, .vm-card,
                                   .origin-glass-card, .activity-gallery
     - Panel saringan topik ...... .topic-dropdown-panel + tombolnya
     - Pita newsletter ........... latarnya foto, dibiarkan gelap

   CARA KEMBALI KE TEMA GELAP
     Hapus satu baris pemuatan berkas ini di templates/tpl_pps/index.php.
     Tidak ada berkas lain yang perlu disentuh.

   CATATAN PENTING soal warna teks:
     body mendapat warna teks gelap secara global. Itu aman karena SETIAP
     permukaan gelap di tema ini sudah menetapkan warna teksnya sendiri
     (.card-title #fff, .member-card h4 #ddd, .vm-desc #fff, dst. — lihat
     Style.css). Jadi teks di dalam kartu tidak ikut menjadi gelap.

   LATAR BELAKANG — susunannya dari belakang ke depan:
     html ...................... putih polos
     body::before / ::after .... dua lapis cahaya hangat yang mengambang
     #starfield (kanvas) ....... debu halus berparalaks (dulu bintang putih)
     .cosmic-grid .............. kisi 60px, garisnya dibalik jadi gelap
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LATAR: putih, cahaya mengambang, kisi halus, debu
   -------------------------------------------------------------------------- */

/* Style.css menaruh latar gelap di <html>. Berkas ini dimuat SESUDAHnya, jadi
   aturan dengan kekhususan sama menang lewat urutan sumber.

   PENTING: latar putih HANYA di <html>, jangan di <body>.
   Latar <body> dilukis pada urutan tumpukan yang lebih akhir daripada
   keturunan ber-z-index negatif, sehingga latar putih di situ MENUTUPI
   lapisan cahaya (z -3), kisi (z -1), dan debu (z -2) — semuanya jadi tak
   terlihat dan halaman kembali rata. Latar <html> disebarkan ke kanvas pada
   urutan paling awal, jadi aman dan tetap menutupi seluruh layar. */
html {
  background-color: #ffffff !important;
}

body.tema-terang {
  background-color: transparent !important;
  color: #14161a;
}

/* Dua lapis cahaya hangat yang bergerak lambat. Gradien radial dipakai —
   bukan filter blur — supaya lembut tanpa biaya compositing yang mahal.
   Animasi hanya menyentuh transform, jadi dikerjakan GPU.

   Ukuran sisipan penting. Sempat dipakai inset -20vmax, dan akibatnya pusat
   gradien (16% 10%) terdorong jauh di atas layar; setelah ditinjau dari
   tangkapan layar, sapuan warnanya hampir tak terlihat sama sekali. Dengan
   -6vmax pusatnya jatuh di dalam pandangan, dan sisipan kecil ini tetap
   mencegah tepi lapisan terlihat saat animasi menggeser elemen. */
body.tema-terang::before,
body.tema-terang::after {
  content: "";
  position: fixed;
  inset: -6vmax;
  z-index: -3;
  pointer-events: none;
  will-change: transform;
}

body.tema-terang::before {
  background:
    radial-gradient(46vmax 38vmax at 16% 12%,
      rgba(255, 153, 0, 0.14), rgba(255, 153, 0, 0.045) 45%, transparent 72%),
    radial-gradient(52vmax 44vmax at 88% 84%,
      rgba(96, 132, 178, 0.10), rgba(96, 132, 178, 0.035) 45%, transparent 74%);
  animation: tt-aurora-a 74s ease-in-out infinite alternate;
}

body.tema-terang::after {
  background:
    radial-gradient(50vmax 42vmax at 82% 14%,
      rgba(255, 183, 94, 0.11), rgba(255, 183, 94, 0.035) 44%, transparent 72%),
    radial-gradient(44vmax 40vmax at 14% 88%,
      rgba(255, 153, 0, 0.10), rgba(255, 153, 0, 0.03) 45%, transparent 74%);
  animation: tt-aurora-b 98s ease-in-out infinite alternate;
}

@keyframes tt-aurora-a {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.03); }
}

@keyframes tt-aurora-b {
  0%   { transform: translate3d(3%, 2%, 0) scale(1.05); }
  50%  { transform: translate3d(-5%, -3%, 0) scale(1); }
  100% { transform: translate3d(2%, -4%, 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  body.tema-terang::before,
  body.tema-terang::after { animation: none; }
}

/* Kisi 60px bawaan tema memakai garis putih 4%; di atas putih itu tak terlihat.
   Dibalik jadi garis gelap, dan sedikit lebih rapat supaya terasa seperti kertas
   berpetak halus, bukan sekadar ruang kosong. */
body.tema-terang .cosmic-grid {
  background-image:
    linear-gradient(rgba(15, 15, 15, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 15, 0.042) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
}

/* Kanvas bintang: TIDAK dimatikan. Isi gambarnya dibalik menjadi debu gelap
   oleh js/main.js (warna dibaca dari atribut data-warna pada <canvas>), jadi
   gerak paralaksnya tetap ada — hanya saja di atas putih ia terbaca sebagai
   zarah halus yang melayang, bukan bintang. */
body.tema-terang #starfield {
  opacity: 0.66;
}

/* --------------------------------------------------------------------------
   2. BILAH PEMUATAN
   Aslinya #0a0a0a. Di situs putih, layar pembuka hitam lalu halaman putih
   terasa seperti kedipan; dibalik supaya transisinya mulus.
   -------------------------------------------------------------------------- */
body.tema-terang #loading-screen {
  background: #ffffff;
}

body.tema-terang .loader-ring {
  border-color: rgba(15, 15, 15, 0.08);
  border-top-color: var(--orange);
}

/* --------------------------------------------------------------------------
   3. BILAH NAVIGASI — tetap hitam
   .nav-content aslinya rgba(20,20,20,.8). Di atas halaman gelap itu terbaca
   hitam, tetapi begitu latarnya putih campurannya memudar jadi abu. Latar
   dipadatkan, bentuk pilnya (border-radius: 50px) dipertahankan, dan diberi
   bayangan lembut supaya mengambang di atas putih.

   JANGAN memberi latar pada .navbar-floating: elemen <nav> itu tidak punya
   lengkung, jadi latar di situ menghasilkan kotak persegi di belakang pilnya.
   -------------------------------------------------------------------------- */
body.tema-terang .nav-content {
  background: #0f0f0f !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 34px rgba(10, 10, 10, 0.18),
    0 2px 8px rgba(10, 10, 10, 0.10);
}

/* --------------------------------------------------------------------------
   4. KAKI HALAMAN — tetap hitam, hanya diberi pemisah halus
   -------------------------------------------------------------------------- */
body.tema-terang .pps-footer {
  box-shadow: 0 -1px 0 rgba(15, 15, 15, 0.06);
}

/* Pita newsletter tetap gelap (latarnya foto). Gaya `background:` singkat
   yang dipakai tema mengosongkan background-color, jadi bila fotonya gagal
   dimuat pita itu akan tembus ke putih. Warna dasar gelap dipasang di
   belakang foto sebagai jaring pengaman. */
body.tema-terang .newsletter {
  background-color: #111111;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFI DI ATAS PUTIH
   .hero-text h1 mewarisi warna teks body, jadi cukup diatur sekali di sini.
   -------------------------------------------------------------------------- */
/* .hero-text h1 dan .page-hero h1 sebenarnya sudah mewarisi warna gelap dari
   body, tetapi keduanya dinyatakan tegas supaya tidak bergantung pada warisan.

   JANGAN menulis aturan h1/h2/h3 secara global di sini. Pernah dicoba, dan
   hasilnya judul "BERLANGGANAN PPS" di pita newsletter (yang memang harus
   putih di atas foto gelap) ikut menjadi hitam — kontrasnya jatuh ke 1,05:1.
   Judul di dalam kartu gelap (.vm-title, .card-title) juga bernasib sama,
   karena aturan global lebih khusus daripada kelas tunggal. */
body.tema-terang .hero-text h1,
body.tema-terang .page-hero h1 { color: #0a0a0a; }

body.tema-terang .hero-desc { color: #3f3f45; }

/* #ff9900 hanya berkontras 2,1:1 di atas putih — gagal ambang keterbacaan,
   termasuk untuk teks besar. Aksennya digelapkan, bukan dihilangkan. */
body.tema-terang .orange-text,
body.tema-terang .section-title { color: #b35c00; }

/* Lencana ini kecil (16 px tebal), jadi ambangnya 4,5:1, bukan 3:1 seperti
   judul besar. Di atas sapuan cahaya hangat, #b35c00 tinggal ~4,1:1 — maka
   untuk teks kecil aksennya digelapkan satu tingkat lagi. */
body.tema-terang .badge-pill {
  color: #9c4f00;
  border-color: rgba(156, 79, 0, 0.45);
}

body.tema-terang .section-title { letter-spacing: 0.5px; }

/* --------------------------------------------------------------------------
   6. TOMBOL & KENDALI
   Ini perbaikan kontras yang paling terasa. Putih di atas #FF9900 hanya
   berkontras 2,1:1; hitam di atasnya 8,8:1. Jadi bidang oranye TETAP oranye
   (warna merek tidak berubah), hanya tulisannya yang jadi gelap. Pola ini
   sudah dipakai tema sendiri: .btn-apply dan .page-btn.is-active memang
   menuliskan color:#111 di atas oranye.
   -------------------------------------------------------------------------- */
body.tema-terang .btn-main,
body.tema-terang .pill-title,
body.tema-terang .newsletter button {
  color: #14140f;
}

body.tema-terang .btn-main {
  box-shadow: 0 8px 22px rgba(255, 153, 0, 0.32);
}

body.tema-terang .btn-main:hover {
  background: #ffae2e;
  box-shadow: 0 12px 28px rgba(255, 153, 0, 0.42);
}

body.tema-terang .pill-title { box-shadow: 0 8px 20px rgba(255, 153, 0, 0.28); }

body.tema-terang .newsletter button:hover { background: #ffae2e; }

/* Ikon sosial di hero: aslinya putih di atas putih transparan — hilang total. */
body.tema-terang .social-hero a {
  color: #1a1a1a;
  background: rgba(15, 15, 15, 0.05);
  border: 1px solid rgba(15, 15, 15, 0.10);
}

body.tema-terang .social-hero a:hover {
  color: #14140f;
  background: var(--orange);
  border-color: var(--orange);
}

body.tema-terang .ig-link { color: #1a1a1a; }
body.tema-terang .ig-link:hover { color: #b35c00; }

/* Tombol "kembali" di halaman artikel. Berada DI LUAR .article-shell, jadi
   sebelumnya lolos dari aturan isi artikel dan nyaris tak terbaca. */
body.tema-terang .back-link {
  color: rgba(0, 0, 0, 0.78);
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.04);
}

body.tema-terang .back-link:hover {
  color: #b35c00;
  border-color: #b35c00;
  background: rgba(255, 153, 0, 0.08);
}

/* Tombol halaman (paginasi): putih 6% di atas putih = tak terlihat. Karena
   tema ini memakai bahasa "permukaan gelap", tombolnya dipadatkan, bukan
   dibalik jadi terang. */
body.tema-terang .page-btn {
  background: #151515;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
}

body.tema-terang .page-btn:hover {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body.tema-terang .page-btn.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #111;
}

/* --------------------------------------------------------------------------
   7. KARTU — tetap hitam
   .card sudah pekat (var(--card-bg) #1A1A1A), jadi tidak perlu diubah
   latarnya. Yang ditambahkan hanya bayangan lembut supaya kartunya mengambang
   di atas putih, dan bayangan oranye saat hover diganti bayangan gelap —
   pendar oranye di atas putih terbaca seperti halo, bukan kedalaman.
   -------------------------------------------------------------------------- */
body.tema-terang .card {
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 26px rgba(15, 15, 15, 0.10);
  /* Isi kartu yang tidak punya warna sendiri harus tetap terang. Ini bukan
     kelebihan hati-hati: Joomla memakai kelas .card untuk kotak tips di
     halaman pencarian (com-finder__tips card card-outline-secondary), dan
     tanpa baris ini seluruh teksnya mewarisi warna gelap body sehingga
     hilang di atas kartu hitam — terukur 1,04:1. */
  color: rgba(255, 255, 255, 0.84);
}

body.tema-terang .card-body,
body.tema-terang .card-header,
body.tema-terang .card-footer { color: rgba(255, 255, 255, 0.84); }

body.tema-terang .card:hover {
  border-color: rgba(255, 153, 0, 0.75);
  box-shadow: 0 20px 40px rgba(15, 15, 15, 0.18);
}

body.tema-terang .card-thumb { background: #202020; }

/* --------------------------------------------------------------------------
   8. PERBAIKAN KONTRAK TEKS KECIL
   Semua di bawah ini adalah teks 11-13 px. Ambang AA untuk teks sekecil itu
   adalah 4,5:1; nilai aslinya ada yang jauh di bawahnya.
   -------------------------------------------------------------------------- */
body.tema-terang .card-meta { color: rgba(255, 255, 255, 0.60); }
body.tema-terang .card-excerpt { color: rgba(255, 255, 255, 0.68); }

body.tema-terang .dropdown-header h4 { color: rgba(255, 255, 255, 0.62); }
body.tema-terang .dropdown-search input::placeholder { color: rgba(255, 255, 255, 0.44); }
body.tema-terang .topic-article-count { color: rgba(255, 255, 255, 0.58); }
body.tema-terang .topic-label { color: rgba(255, 255, 255, 0.80); }

/* --------------------------------------------------------------------------
   9. PANEL SARINGAN TOPIK — tetap gelap
   Tombolnya aslinya putih 6% di atas putih, praktis tak terlihat; dipadatkan
   agar sejalan dengan panel gelap di bawahnya.
   -------------------------------------------------------------------------- */
body.tema-terang .topic-dropdown-btn {
  background: #151515;
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 18px rgba(15, 15, 15, 0.10);
}

body.tema-terang .topic-dropdown-btn:hover {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. HALAMAN ARTIKEL TUNGGAL  (body.halaman-artikel)
   Blok asli dari artikel-terang.css, dipertahankan apa adanya — tampilan ini
   sudah disetujui. Hanya warna abu-abu kecilnya yang dinaikkan kontrasnya.
   -------------------------------------------------------------------------- */
body.tema-terang.halaman-artikel .article-shell { color: #1a1a1a; }

body.tema-terang.halaman-artikel .article-header h1,
body.tema-terang.halaman-artikel .article-content h2,
body.tema-terang.halaman-artikel .article-content h3,
body.tema-terang.halaman-artikel .article-content h4,
body.tema-terang.halaman-artikel .article-related-title { color: #0a0a0a; }

body.tema-terang.halaman-artikel .article-content,
body.tema-terang.halaman-artikel .article-content p,
body.tema-terang.halaman-artikel .article-content li { color: #1f1f1f; }

body.tema-terang.halaman-artikel .article-content strong { color: #000000; }
body.tema-terang.halaman-artikel .article-content em { color: #383838; }

/* Editor Joomla menuliskan warna teks langsung pada elemen (mis.
   <span style="color:#ffffff"> pada keterangan gambar). Gaya inline
   mengalahkan stylesheet, jadi hanya !important yang bisa menimpanya. */
body.tema-terang.halaman-artikel .article-content [style*="color: #fff"],
body.tema-terang.halaman-artikel .article-content [style*="color:#fff"],
body.tema-terang.halaman-artikel .article-content [style*="color: #FFF"],
body.tema-terang.halaman-artikel .article-content [style*="color:#FFF"],
body.tema-terang.halaman-artikel .article-content [style*="color: #ffffff"],
body.tema-terang.halaman-artikel .article-content [style*="color: #FFFFFF"],
body.tema-terang.halaman-artikel .article-content [style*="color:#ffffff"],
body.tema-terang.halaman-artikel .article-content [style*="color:#FFFFFF"],
body.tema-terang.halaman-artikel .article-content [style*="color: white"],
body.tema-terang.halaman-artikel .article-content [style*="rgb(255, 255, 255)"],
body.tema-terang.halaman-artikel .article-content [style*="rgb(255,255,255)"] {
  color: rgba(0, 0, 0, 0.66) !important;
}

body.tema-terang.halaman-artikel .article-meta-bar,
body.tema-terang.halaman-artikel .article-share,
body.tema-terang.halaman-artikel .article-related { border-color: rgba(0, 0, 0, 0.10); }

body.tema-terang.halaman-artikel .article-content hr { border-top-color: rgba(0, 0, 0, 0.10); }
body.tema-terang.halaman-artikel .article-content h2 { border-bottom-color: rgba(255, 153, 0, 0.35); }

body.tema-terang.halaman-artikel .article-meta-item { color: rgba(0, 0, 0, 0.66); }
body.tema-terang.halaman-artikel .article-meta-item strong { color: rgba(0, 0, 0, 0.88); }
body.tema-terang.halaman-artikel .article-stat-label { color: rgba(0, 0, 0, 0.60); }
body.tema-terang.halaman-artikel .article-author-name { color: rgba(0, 0, 0, 0.92); }
body.tema-terang.halaman-artikel .article-author-role { color: rgba(0, 0, 0, 0.58); }
body.tema-terang.halaman-artikel .article-author-bio { color: rgba(0, 0, 0, 0.68); }
body.tema-terang.halaman-artikel .article-share-label { color: rgba(0, 0, 0, 0.58); }
body.tema-terang.halaman-artikel .article-related-subtitle { color: rgba(0, 0, 0, 0.58); }
body.tema-terang.halaman-artikel .article-related-title-text { color: rgba(0, 0, 0, 0.88); }
body.tema-terang.halaman-artikel .article-related-meta { color: rgba(0, 0, 0, 0.56); }

body.tema-terang.halaman-artikel .article-content figure figcaption,
body.tema-terang.halaman-artikel .article-content .img_caption p.img_caption { color: rgba(0, 0, 0, 0.64); }

body.tema-terang.halaman-artikel .article-stat-item,
body.tema-terang.halaman-artikel .article-author-card,
body.tema-terang.halaman-artikel .article-share-btn,
body.tema-terang.halaman-artikel .article-related-card {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.10);
}

body.tema-terang.halaman-artikel .article-stat-item:hover,
body.tema-terang.halaman-artikel .article-author-card:hover,
body.tema-terang.halaman-artikel .article-related-card:hover {
  background: rgba(255, 153, 0, 0.08);
  border-color: rgba(255, 153, 0, 0.35);
}

body.tema-terang.halaman-artikel .article-share-btn { color: rgba(0, 0, 0, 0.78); }

body.tema-terang.halaman-artikel .article-share-btn:hover {
  color: #b35c00;
  background: rgba(255, 153, 0, 0.10);
  border-color: rgba(255, 153, 0, 0.45);
}

body.tema-terang.halaman-artikel .article-related-thumb { background: #e9e9e9; }

body.tema-terang.halaman-artikel .article-content a,
body.tema-terang.halaman-artikel a.article-related-card { color: #b35c00; }

body.tema-terang.halaman-artikel .article-content a { text-decoration-color: rgba(179, 92, 0, 0.40); }
body.tema-terang.halaman-artikel .article-content a:hover { text-decoration-color: #b35c00; }

body.tema-terang.halaman-artikel .article-tag,
body.tema-terang.halaman-artikel .article-views-badge,
body.tema-terang.halaman-artikel .article-related-topic { color: #a35400; }

body.tema-terang.halaman-artikel .article-stat-value { color: #b35c00; }
body.tema-terang.halaman-artikel .article-content li::marker { color: #b35c00; }

body.tema-terang.halaman-artikel .article-content code {
  background: rgba(255, 153, 0, 0.14);
  border-color: rgba(255, 153, 0, 0.30);
  color: #8a4400;
}

body.tema-terang.halaman-artikel .article-content pre { background: #f4f4f5; border-color: rgba(0, 0, 0, 0.10); }
body.tema-terang.halaman-artikel .article-content pre code { background: transparent; border: none; color: #1a1a1a; }
body.tema-terang.halaman-artikel .article-content blockquote { background: #f4f4f5; color: #2a2a2a; }
body.tema-terang.halaman-artikel .article-content th,
body.tema-terang.halaman-artikel .article-content td { border-bottom-color: rgba(0, 0, 0, 0.10); }
body.tema-terang.halaman-artikel .article-content th { background: rgba(255, 153, 0, 0.12); color: #0a0a0a; }
body.tema-terang.halaman-artikel .article-content tr:hover { background: rgba(0, 0, 0, 0.03); }

/* --------------------------------------------------------------------------
   11. HALAMAN ABOUT & ACTIVITY  (body.halaman-putih)
   Blok asli dari halaman-putih.css, dipertahankan. Kartu tetap hitam, dan
   latarnya dipadatkan dari semi-transparan supaya tidak memutih di atas putih.
   -------------------------------------------------------------------------- */

/* Logo PPS tersusun dari oranye dan abu terang — tidak ada satu pun piksel
   gelap, jadi di atas putih ia lenyap. Filter akan merusak warnanya, jadi
   bagian belakangnya yang diberi cakram gelap. Cincin oranye putus-putus yang
   sudah ada tetap berputar di luarnya. */
body.tema-terang.halaman-putih .about-logo-wrapper {
  background: radial-gradient(circle at 34% 28%, #262626 0%, #141414 48%, #070707 100%);
  border-radius: 50%;
  box-shadow:
    0 22px 48px rgba(15, 15, 15, 0.20),
    0 0 0 1px rgba(15, 15, 15, 0.05);
}

body.tema-terang.halaman-putih .tier-title { color: #5f5f5f; }

/* .gradient-text bawaan tema memakai gradien putih->oranye yang dipotong ke
   bentuk huruf; bagian putihnya tak terlihat di atas putih. Yang ada di dalam
   kartu gelap sengaja dibiarkan. */
body.tema-terang.halaman-putih .about-intro-text .gradient-text {
  background-image: linear-gradient(90deg, #0a0a0a, #b35c00) !important;
}

body.tema-terang.halaman-putih .about-intro-text p {
  color: #242424;
  background: #f6f6f7;
  border-left-color: var(--orange);
}

body.tema-terang.halaman-putih .activity-text h3 { color: #0a0a0a; }
body.tema-terang.halaman-putih .activity-text p { color: #3f3f45; }

/* Judul "Founders" bergaris bawah lewat gaya inline (putih 10%), dan keterangan
   lencana di bawah daftar anggota bertulisan inline #888. Gaya inline
   mengalahkan stylesheet, jadi keduanya perlu !important. */
body.tema-terang.halaman-putih .section-title { border-bottom-color: rgba(0, 0, 0, 0.10) !important; }
body.tema-terang.halaman-putih .members-section [style*="color: #888"] { color: #5f5f5f !important; }

body.tema-terang.halaman-putih .member-card {
  background: #151515;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(15, 15, 15, 0.10);
}

body.tema-terang.halaman-putih .member-card:hover {
  background: #1d1a14;
  border-color: rgba(255, 153, 0, 0.35);
}

body.tema-terang.halaman-putih .lead-card {
  background: #1a1408;
  border-color: var(--orange);
  box-shadow: 0 12px 28px rgba(15, 15, 15, 0.14);
}

body.tema-terang.halaman-putih .lead-card:hover { background: #231a0b; }

body.tema-terang.halaman-putih .bod-card {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.14);
}

body.tema-terang.halaman-putih .bod-card:hover { background: #1e1e1e; }

body.tema-terang.halaman-putih .aps-founder-card {
  background: #151515;
  box-shadow: 0 10px 24px rgba(15, 15, 15, 0.10);
}

body.tema-terang.halaman-putih .aps-founder-card:hover {
  background: #202020;
  box-shadow: 0 16px 30px rgba(15, 15, 15, 0.18);
}

body.tema-terang.halaman-putih .value-pillar { background: #151515; }
body.tema-terang.halaman-putih .value-pillar:hover { background: #1e1e1e; }

body.tema-terang.halaman-putih .origin-glass-card {
  background: linear-gradient(135deg, #191919, #0d0d0d);
  box-shadow: 0 18px 44px rgba(15, 15, 15, 0.16);
}

body.tema-terang.halaman-putih .activity-gallery { background: #141414; }

body.tema-terang.halaman-putih .activity-img {
  border-color: rgba(15, 15, 15, 0.08);
  box-shadow: 0 14px 34px rgba(15, 15, 15, 0.16);
}

/* --------------------------------------------------------------------------
   11b. GAYA INLINE YANG TIDAK TERBACA LAGI
   Tiga elemen membawa `color: white` langsung di atribut style: tombol
   "About Us" di beranda (di dalam .btn-main oranye) dan dua kotak kosong —
   "Belum Ada Berita" (beranda) serta "Tidak ada artikel untuk topik ini"
   (daftar artikel). Gaya inline mengalahkan stylesheet, jadi hanya
   !important yang bisa menimpanya. Saya sudah menyisir keempat halaman:
   tidak satu pun di antaranya berada di dalam kartu gelap.

   Kotak kosongnya juga membawa latar putih 3% yang tak terlihat di atas
   putih, jadi sekalian diberi latar abu muda supaya terbaca sebagai kotak.
   -------------------------------------------------------------------------- */
body.tema-terang [style*="color: white"],
body.tema-terang [style*="color:white"],
body.tema-terang [style*="color: #fff"],
body.tema-terang [style*="color:#fff"],
body.tema-terang [style*="color: #ffffff"],
body.tema-terang [style*="color:#ffffff"] {
  color: #0a0a0a !important;
}

body.tema-terang [style*="background: rgba(255,255,255,0.03)"],
body.tema-terang [style*="background: rgba(255, 255, 255, 0.03)"],
body.tema-terang [style*="background:rgba(255,255,255,0.03)"] {
  background: #f4f4f6 !important;
}

/* --------------------------------------------------------------------------
   12. SENTUHAN AKHIR
   -------------------------------------------------------------------------- */
body.tema-terang ::selection {
  background: rgba(255, 153, 0, 0.30);
  color: #0a0a0a;
}

/* Hanya untuk pengguna papan ketik — tidak mengganggu tampilan normal. */
body.tema-terang :focus-visible {
  outline: 2px solid #b35c00;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.tema-terang .card,
  body.tema-terang .btn-main,
  body.tema-terang .topic-dropdown-btn { transition: none; }
}