/* =============================================================================
 * brand-dcircle.css — TEMA UNGU untuk dcircle.id
 *
 * Dimuat PALING AKHIR (setelah main-layouts-v3.min.css + pub.css) sehingga
 * menang urutan tanpa perlu !important pada hampir semua aturan.
 *
 * CARA KERJA
 * ----------
 * Seluruh warna tema iNews berasal dari token di :root
 * (--color-red, --color-red-75, --color-3, ...). Semua komponen memakainya
 * lewat var(), jadi cukup MENIMPA NILAI TOKEN di sini: warna seluruh situs
 * ikut berganti tanpa menyentuh satu pun selector komponen.
 *
 * Yang ditimpa ada tiga lapis:
 *   1. token warna  (merah -> ungu)
 *   2. maskot/logo  (background-image .brand, sprite ikon header/footer)
 *   3. sisa merah keras yang di-inline pemasok CSS (tanpa var())
 * ========================================================================== */

/* ---------------------------------------------------------------- 1. token */
:root {
  /* ---- palet ungu utama ---- */
  --dc-50:  #f5f3ff;
  --dc-100: #ede9fe;
  --dc-200: #ddd6fe;
  --dc-300: #c4b5fd;
  --dc-400: #a78bfa;
  --dc-500: #8b5cf6;
  --dc-600: #7c3aed;
  --dc-700: #6d28d9;
  --dc-800: #5b21b6;
  --dc-900: #4c1d95;
  --dc-950: #2e1065;

  /* ---- token "red" iNews -> ungu (inilah inti tema) ---- */
  --color-red:        #7c3aed;   /* aksen utama / tombol / harga */
  --color-red-2:      #6d28d9;
  --color-red-100:    #5b21b6;
  --color-red-75:     #6d28d9;
  --color-red-50:     #8b5cf6;
  --color-red-25:     #c4b5fd;
  --color-red-0:      #ddd6fe;
  --color-red-light:  #f5f3ff;

  /* ---- token maroon (dipakai beberapa label & aksen) ---- */
  --color-maroon:     #4c1d95;
  --color-maroon-100: #2e1065;
  --color-maroon-75:  #3b1a7a;
  --color-maroon-50:  #4c1d95;
  --color-maroon-25:  #5b21b6;

  /* ---- token bernomor: --color-3/4/10 dst dipakai langsung oleh komponen ---- */
  --color-3:  #7c3aed;
  --color-4:  #6d28d9;
  --color-6:  #3f3d56;
  --color-14: #e3e3f5;

  --color-link: #6d28d9;
}

/* Mode gelap: aksen ungu dinaikkan satu tingkat supaya kontras teks tetap
   lolos WCAG di atas latar hitam (abu-ungu gelap terbaca, ungu pekat tidak). */
html.dark,
.dark {
  --color-red:       #a78bfa;
  --color-red-2:     #8b5cf6;
  --color-red-100:   #c4b5fd;
  --color-red-75:    #a78bfa;
  --color-red-50:    #8b5cf6;
  --color-red-25:    #7c3aed;
  --color-red-0:     #6d28d9;
  --color-red-light: #2e1065;
  --color-3:         #a78bfa;
  --color-4:         #8b5cf6;
  --color-link:      #c4b5fd;
}

/* ------------------------------------------------- 2. logo & ikon header --- */
/* Logo header iNews ada di .brand (background-image, 187x55). Diganti dengan
   logo dcircle.id. Semua varian kanal (.brand.news, .brand.finance, ...) ikut
   ditimpa supaya tidak ada logo iNews yang tersisa di halaman mana pun. */
header .header .brand,
header .header .brand.news,
header .header .brand.finance,
header .header .brand.lifestyle,
header .header .brand.otomotif,
header .header .brand.techno,
header .header .brand.sport,
header .header .brand.multimedia,
header .header .brand.daerah,
.brand {
  background-image: url(/brand/dcircle-logo.svg);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}
/* Mode gelap: versi logo berteks putih.
   PENTING soal kekhususan (specificity): stylesheet vendor memuat
   `.dark header .header .brand{background-image:url(/img/2025/logo-inews-dm.svg)!important}`
   yang berskor (0,3,1) + !important. Aturan kita HARUS menyamai atau melebihi
   itu, kalau tidak logo iNews kembali muncul begitu pengguna menekan tombol
   mode gelap — terukur di browser nyata sebelum perbaikan ini.
   Skor `.dark .brand` saja hanya (0,2,0), jadi kalah. Dipakai
   `html.dark header .header .brand` = (0,3,2) + !important. */
html.dark header .header .brand,
html.dark .brand,
.dark header .header .brand,
.dark .brand {
  background-image: url(/brand/dcircle-logo-dark.svg) !important;
}
/* Mode terang dikembalikan ke logo berteks gelap. Ditaruh SESUDAH aturan di
   atas supaya pada kekhususan yang sama ia yang menang saat <html class="light">. */
html.light header .header .brand,
html.light .brand,
header .header .brand,
.brand {
  background-image: url(/brand/dcircle-logo.svg) !important;
}

/* Logo mungil di topbar (kiri atas). iNews memakai posisi sprite di
   img-sprite-header.svg; di sini diganti logo dcircle sendiri. */
.topBar .logo .ic-inews-topbar,
.ic-inews-topbar {
  background-image: url(/brand/dcircle-mark.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.topBar .logo .ic-inews-topbar:hover {
  background-position: center;  /* matikan efek geser sprite iNews */
}

/* Logo footer iNews (185x67, sprite img-sprite-footer.png) -> logo dcircle. */
.logoInews__footer .logo-inews-footer,
.logo-inews-footer {
  background-image: url(/brand/dcircle-logo-footer.svg);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------- footer logo */
/* Footer sekarang memakai <img> nyata (bukan sprite iNews) supaya:
   - tidak perlu lcah koordinat sprite yang bisa bergeser,
   - alt-tex-nya terbaca screen reader sebagai nama situs,
   - warnanya benar-benar milik logo dcircle, bukan pewarnaan sprite.
   Kelas .logoInews__footer dipertahankan karena di sanalah style vendor
   mengatur jarak (margin-bottom) — mengganti kelasnya bikin layout bergeser. */
footer .footerBody .withImg .logoDcircle__footer,
footer .footerBody .withImg .logoInews__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
footer .footerBody .withImg .logoDcircle__footer img {
  display: block;
  width: 185px;
  height: 67px;
  max-width: 100%;
  /* Logo footer sudah berwarna; di mode gelap teksnya di dalam SVG ikut
     mengikuti isian logo, jadi tidak ada filter yang perlu diubah. */
}

/* --------------------------------------------------- ikon media sosial ---- */
/* BUG yang diperbaiki: ikon medsos memakai sprite `img-sprite-footer.png`
   milik iNews. Dua masalah nyata:
     1. Sprite itu BERWARNA MERAH, jadi di footer dcircle yang gelap ikon
        merah clashes dan terlihat seperti milik situs lain.
     2. Ikon email TIDAK ADA di sprite sama sekali, jadi tidak mungkin
        tampil tanpa berkas baru.
   Sekarang tiap ikon adalah SVG sendiri (public/brand-socmed/*.svg) dengan
   path hitam. `filter: invert(1)` mengubahnya jadi putih supaya cocok dengan
   footer gelap, dan hover memberi ungu tema. Kalau nanti ikon dipakai di
   latar terang, cukup turunkan filter di bawah. */
footer .footerBody .withImg .socmed a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: background-color .2s ease, transform .2s ease;
}
footer .footerBody .withImg .socmed a:hover,
footer .footerBody .withImg .socmed a:focus-visible {
  background-color: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}
footer .footerBody .withImg .socmed .icSocmed {
  display: block;
  width: 22px;
  height: 22px;
  /* Path SVG-nya hitam; di footer yang gelap dibalik jadi putih.
     Filter ini murah dan tidak butuh berkas terpisah per warna. */
  filter: invert(1) brightness(1.15);
  opacity: .92;
  transition: filter .2s ease, opacity .2s ease;
}
footer .footerBody .withImg .socmed a:hover .icSocmed,
footer .footerBody .withImg .socmed a:focus-visible .icSocmed {
  /* Ikon putih dinaikkan brightness + saturate supaya terasa hidup
     saat hover di atas footer gelap. */
  filter: invert(1) brightness(1.35) saturate(1.6);
  opacity: 1;
}
/* Ikon email juga bisa berupa <img>; aturan di atas sudah menanganinya.
   Yang ini khusus varian SVG inline (dipakai bila markup berubah). */
footer .footerBody .withImg .socmed svg.icSocmed {
  fill: currentColor;
  color: #ffffff;
  filter: none;
}
footer .footerBody .withImg .socmed a:hover svg.icSocmed,
footer .footerBody .withImg .socmed a:focus-visible svg.icSocmed {
  color: #c4b5fd;
  filter: none;
}

/* Alamat email redaksi ditulis sebagai teks (bukan cuma ikon) supaya bisa
   dibaca & disalin. Sengaja kecil dan redup supaya tidak bersaing dengan
   logo, tapi tetap lolos kontras. */
footer .footerBody .withImg .kontakEmail {
  display: inline-block;
  margin-top: -14px;
  margin-bottom: 22px;
  color: #d8d8e0;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  word-break: break-all;
}
footer .footerBody .withImg .kontakEmail:hover,
footer .footerBody .withImg .kontakEmail:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

/* Lambang "Part of MNC" milik iNews dibuang dari markup layout. Sisanya di
   sini hanya jaring pengaman kalau markup itu muncul kembali dari cache. */
.logo-mnc-partof { display: none !important; }
.partOf { display: none !important; }

/* Ikone "iNews TV" di topbar beranimasi antara dua berkas iNews. Diganti
   tanda putar dcircle supaya tidak ada lagi ikon iNews yang tampil. */
.topBarWrap .topBar > div:first-child a .ic-inews-tv,
.ic-inews-tv {
  animation: none !important;
  background-image: url(/brand/dcircle-tv.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* -------------------------------------------------- 3. sisa merah keras ---- */
/* Beberapa bagian pemasok CSS menulis warna merah literal (tanpa var()).
   Hanya bagian yang benar-benar terpakai tema ini yang ditimpa di sini. */

/* Tautan "kanal" kecil di atas judul artikel */
.titleSubKanal { color: #6d28d9; }
html.dark .titleSubKanal, .dark .titleSubKanal { color: #c4b5fd; }

/* Garis aksen atas kartu headline */
.widgetNewsHeadline .headlineMain .cardArticle { border-top-color: var(--color-red); }

/* Badge/label kanal di kartu artikel */
.cardArticle .kanal,
.cardArticle .kanalAndTime .kanal { color: #6d28d9; }
html.dark .cardArticle .kanal, .dark .cardArticle .kanalAndTime .kanal { color: #c4b5fd; }

/* Tombol & tautan aksi buatan sendiri (pub.css memakai var(), tapi beberapa
   memakai warna cadangan merah keras di dalam var(--color-red, #d00)). */
section.komentar .formKomentar button,
section.indexControl button,
.search-wrapp .filterSearch button,
.btnDcPrimary { background-color: #7c3aed; border-color: #7c3aed; }
section.komentar .formKomentar button:hover,
section.indexControl button:hover,
.search-wrapp .filterSearch button:hover { background-color: #6d28d9; }

/* Filter tag aktif */
.filterTag a { border-color: #ddd6fe; color: #6d28d9; }
.filterTag a.aktif { background-color: #6d28d9; border-color: #6d28d9; }
html.dark .filterTag a, .dark .filterTag a { border-color: #6d28d9; color: #c4b5fd; }

/* Kotak komentar dcircle (nama komentator, aksen kutipan balasan) */
section.komentar .listKomentar .itemKomentar .namaKomentar { color: #6d28d9; }
section.detailWrapper .comment-quote {
  background: rgba(124, 58, 237, .08);
  border-left-color: #7c3aed;
}
html.dark section.komentar .listKomentar .itemKomentar .namaKomentar,
.dark section.komentar .listKomentar .itemKomentar .namaKomentar { color: #c4b5fd; }

/* ------------------------------------------- 4. aksen khas dcircle.id ------ */
/* Bilah tipis ungu di paling atas supaya identitas baru langsung terlihat. */
.topBarWrap { border-top: 3px solid #6d28d9; }

/* ------------------------- 5. kontras pil "Watch More"/"See All" ---------- */
/* Di mode gelap `--color-red` dinaikkan ke #a78bfa (ungu TERANG) supaya teks
   ungu di atas latar hitam tetap terbaca. Tapi tiga tombol pil ini memakai
   `background-color: var(--color-red)` + `color: var(--color-white)`, jadi
   teks putih di atas ungu terang justru GAGAL kontras.
   Terukur (audit UI/UX, mode gelap): rasio 2.72, wajib 4.5.
     .widgetVideoHighlight .widgetHeader .action        'Watch More'
     .widgetListArticle__header__action                 'See All'
     .widget-v-video-btn                                'See All'
   Diperbaiki dengan menggelapkan LATAR pil saja (tetap keluarga ungu yang
   sama, #6d28d9 sudah dipakai tema ini sebagai --color-link) -> rasio 7.10.
   Teks tetap putih, jadi tampilan terang tidak berubah sama sekali. */
html.dark .widgetVideoHighlight .container .widgetHeader .action,
.dark     .widgetVideoHighlight .container .widgetHeader .action,
html.dark .widgetListArticle__header__action,
.dark     .widgetListArticle__header__action,
html.dark .widget-v-video .widget-v-video-header .widget-v-video-btn,
.dark     .widget-v-video .widget-v-video-header .widget-v-video-btn,
html.dark .widget-v-video-btn,
.dark     .widget-v-video-btn {
  background-color: #6d28d9;
}
html.dark .widget-v-video .widget-v-video-header .widget-v-video-btn:hover,
.dark     .widget-v-video .widget-v-video-header .widget-v-video-btn:hover,
html.dark .widgetVideoHighlight .container .widgetHeader .action:hover,
.dark     .widgetVideoHighlight .container .widgetHeader .action:hover,
html.dark .widgetListArticle__header__action:hover,
.dark     .widgetListArticle__header__action:hover,
html.dark .widget-v-video-btn:hover,
.dark     .widget-v-video-btn:hover {
  background-color: #5b21b6;
}

/* Sorotan hover menu kanal memakai token -> otomatis ungu, tapi garis bawah
   aktif dibuat eksplisit supaya konsisten di semua kanal. */
.nav__main ul#navbar-nav li.navList a.navLink-active { border-bottom-color: #7c3aed; }