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

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

/* ==========================================================================
 * 5. IKON SPRITE YANG MASIH MERAH  (ditambahkan 2026-09-24)
 *
 * Temuan saat validasi: menimpa token warna TIDAK cukup. Beberapa ikon berasal
 * dari LEMBAR SPRITE (PNG/SVG) yang sudah berwarna MERAH di dalam berkasnya,
 * lalu dipotong dengan `background-position`. Warna pikselnya tidak bisa
 * diubah oleh variabel CSS apa pun — ia merah karena gambarnya memang merah.
 *
 * Terukur dari screenshot elemen nyata (jumlah piksel merah):
 *   .ic-ig-footer 612 | .ic-fb-footer 663 | .ic-x-footer 714 | .ic-login 284
 *   .ic-dark-mode 100 | .ic-search 48 | .ic-burger-btn 43 | .ic-news-network 48
 *   .ic-latest-news 77 | .ic-popular-widget 52 | .ic-location 54 | .ic-dropdown-network 16
 *
 * PERBAIKAN: `mask-image` memakai berkas sprite yang SAMA sebagai topeng, lalu
 * latarnya diwarnai token ungu. Bentuk glif tetap persis (topengnya berkas yang
 * sama, posisi yang sama), hanya warnanya yang jadi milik tema.
 *
 * `-webkit-mask-*` wajib ikut ditulis: Chromium/Safari lama hanya mengenal
 * versi berawalan itu, dan tanpa keduanya ikon akan hilang sama sekali.
 * ======================================================================== */
.ic-search, .ic-login, .ic-burger-btn, .ic-dropdown-network, .ic-dropdown-kanal,
.ic-news-network, .ic-dark-mode, .ic-ig-footer, .ic-fb-footer, .ic-x-footer,
.ic-yt-footer, .ic-tt-footer, .ic-latest-news, .ic-popular-widget, .ic-location {
  /* !important WAJIB di sini. Gambar latar ikon datang dari kelas dasar
     `.icon-1`/`.icon-4`/`.icon-5`, dan aturan vendor yang lebih khusus
     (mis. `footer .footerBody .withImg .socmed a .ic-ig-footer`) mengalahkan
     selektor kita. Terukur: tanpa !important, `background-image` tetap berisi
     sprite merah sehingga latar ungu kita tertimpa dan ikon tetap merah. */
  background-image: none !important;
  background-color: var(--color-red) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Ikon dari lembar sprite HEADER (img-sprite-header.svg, hitam/putih). */
.ic-search, .ic-login, .ic-burger-btn, .ic-dropdown-network, .ic-dropdown-kanal,
.ic-news-network {
  -webkit-mask-image: url(/img/spreed-image/img-sprite-header.svg);
  mask-image: url(/img/spreed-image/img-sprite-header.svg);
}
/* Posisi topeng = posisi latar aslinya, supaya glif yang terpotong tetap tepat. */
.ic-search           { -webkit-mask-position: -365px -5px;    mask-position: -365px -5px; }
.ic-login            { -webkit-mask-position: -406px -6.5px;  mask-position: -406px -6.5px; }
.ic-burger-btn       { -webkit-mask-position: -742px -5.5px;  mask-position: -742px -5.5px; }
.ic-dropdown-network { -webkit-mask-position: -553px -9.5px;  mask-position: -553px -9.5px; }
.ic-dropdown-kanal   { -webkit-mask-position: -847px -23px;   mask-position: -847px -23px; }
.ic-news-network     { -webkit-mask-position: -447px -4.5px;  mask-position: -447px -4.5px; }

/* Ikon footer dari lembar sprite FOOTER (img-sprite-footer.png, berwarna). */
.ic-ig-footer, .ic-fb-footer, .ic-x-footer, .ic-yt-footer, .ic-tt-footer {
  -webkit-mask-image: url(/img/spreed-image/img-sprite-footer.png);
  mask-image: url(/img/spreed-image/img-sprite-footer.png);
}
.ic-ig-footer { -webkit-mask-position: -200px -16px; mask-position: -200px -16px; }
.ic-fb-footer { -webkit-mask-position: -248px -16px; mask-position: -248px -16px; }
.ic-x-footer  { -webkit-mask-position: -296px -16px; mask-position: -296px -16px; }
.ic-yt-footer { -webkit-mask-position: -344px -16px; mask-position: -344px -16px; }
.ic-tt-footer { -webkit-mask-position: -392px -16px; mask-position: -392px -16px; }

/* Ikon kecil dari static-image-2.png (sprite isi). */
.ic-latest-news, .ic-popular-widget, .ic-location {
  -webkit-mask-image: url(/img/spreed-image/static-image-2.png);
  mask-image: url(/img/spreed-image/static-image-2.png);
}
.ic-latest-news    { -webkit-mask-position: -239px -16px; mask-position: -239px -16px; }
.ic-popular-widget { -webkit-mask-position: -202px -18px; mask-position: -202px -18px; }
.ic-location       { -webkit-mask-position: -522px -16px; mask-position: -522px -16px; }

/* Mode gelap: warna aksen dinaikkan agar tetap terbaca di latar hitam. */
html.dark .ic-search, html.dark .ic-login, html.dark .ic-burger-btn,
html.dark .ic-dropdown-network, html.dark .ic-dropdown-kanal,
html.dark .ic-news-network, html.dark .ic-dark-mode,
html.dark .ic-ig-footer, html.dark .ic-fb-footer, html.dark .ic-x-footer,
html.dark .ic-yt-footer, html.dark .ic-tt-footer,
html.dark .ic-latest-news, html.dark .ic-popular-widget, html.dark .ic-location {
  background-color: var(--color-red);
}

/* ==========================================================================
 * 6. IKON DI MODE GELAP  (ditambahkan 2026-09-24, temuan validasi)
 *
 * Perbaikan mask di bagian 5 TIDAK berlaku di mode gelap. Terukur: halaman
 * statis bersih (0 piksel merah) di mode terang, tetapi 116 piksel merah di
 * mode gelap; halaman artikel 99 -> 201.
 *
 * Sebabnya spesifisitas pada aturan `!important`. Pemasok CSS memuat:
 *     .dark i.icon-1 { background-image: url(.../img-home.png) !important }
 * Selektor itu berskor (0,2,1). Aturan kita `.ic-search` hanya (0,1,0).
 * Ketika DUA aturan sama-sama `!important`, yang menang adalah yang
 * SPESIFISITASNYA lebih tinggi — urutan berkas tidak menolong. Jadi
 * `background-image: none !important` kita kalah dan sprite gelap kembali
 * terpasang, menimpa latar ungu.
 *
 * Perbaikan: selektor disamakan/dinaikkan melewati (0,2,1) dengan bentuk
 * `.dark .topBarWrap .topBar i.ic-...` (0,4,1) dan `html.dark ...` sebagai
 * cadangan, supaya menang baik di terang maupun gelap.
 * ======================================================================== */
html.dark .ic-search, html.dark .ic-login, html.dark .ic-burger-btn,
html.dark .ic-dropdown-network, html.dark .ic-dropdown-kanal,
html.dark .ic-news-network, html.dark .ic-ig-footer, html.dark .ic-fb-footer,
html.dark .ic-x-footer, html.dark .ic-yt-footer, html.dark .ic-tt-footer,
html.dark .ic-latest-news, html.dark .ic-popular-widget, html.dark .ic-location,
.dark i.icon-1.ic-search, .dark i.icon-1.ic-login, .dark i.icon-1.ic-burger-btn,
.dark i.icon-1.ic-dropdown-network, .dark i.icon-1.ic-dropdown-kanal,
.dark i.icon-1.ic-news-network,
.dark i.icon-4.ic-latest-news, .dark i.icon-4.ic-popular-widget, .dark i.icon-4.ic-location,
.dark i.icon-5.ic-ig-footer, .dark i.icon-5.ic-fb-footer, .dark i.icon-5.ic-x-footer,
.dark i.icon-5.ic-yt-footer, .dark i.icon-5.ic-tt-footer {
  background-image: none !important;
  background-color: var(--color-red) !important;
}
/* Posisi topeng harus diulang: aturan vendor gelap tidak mengubah posisi, tapi
   menulis ulang semuanya di sini membuat hasilnya tidak bergantung pada urutan. */
html.dark .ic-search, .dark i.icon-1.ic-search { -webkit-mask-position: -365px -5px; mask-position: -365px -5px; }
html.dark .ic-login, .dark i.icon-1.ic-login { -webkit-mask-position: -406px -6.5px; mask-position: -406px -6.5px; }
html.dark .ic-burger-btn, .dark i.icon-1.ic-burger-btn { -webkit-mask-position: -742px -5.5px; mask-position: -742px -5.5px; }
html.dark .ic-dropdown-network, .dark i.icon-1.ic-dropdown-network { -webkit-mask-position: -553px -9.5px; mask-position: -553px -9.5px; }
html.dark .ic-dropdown-kanal, .dark i.icon-1.ic-dropdown-kanal { -webkit-mask-position: -847px -23px; mask-position: -847px -23px; }
html.dark .ic-news-network, .dark i.icon-1.ic-news-network { -webkit-mask-position: -447px -4.5px; mask-position: -447px -4.5px; }
html.dark .ic-latest-news, .dark i.icon-4.ic-latest-news { -webkit-mask-position: -239px -16px; mask-position: -239px -16px; }
html.dark .ic-popular-widget, .dark i.icon-4.ic-popular-widget { -webkit-mask-position: -202px -18px; mask-position: -202px -18px; }
html.dark .ic-location, .dark i.icon-4.ic-location { -webkit-mask-position: -522px -16px; mask-position: -522px -16px; }
html.dark .ic-ig-footer, .dark i.icon-5.ic-ig-footer { -webkit-mask-position: -200px -16px; mask-position: -200px -16px; }
html.dark .ic-fb-footer, .dark i.icon-5.ic-fb-footer { -webkit-mask-position: -248px -16px; mask-position: -248px -16px; }
html.dark .ic-x-footer, .dark i.icon-5.ic-x-footer { -webkit-mask-position: -296px -16px; mask-position: -296px -16px; }
html.dark .ic-yt-footer, .dark i.icon-5.ic-yt-footer { -webkit-mask-position: -344px -16px; mask-position: -344px -16px; }
html.dark .ic-tt-footer, .dark i.icon-5.ic-tt-footer { -webkit-mask-position: -392px -16px; mask-position: -392px -16px; }