/* =============================================================================
 * 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;
}

/* 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; }