/* =============================================================================
* pub.css — lapisan penyelaras TIPIS untuk tema iNews.
*
* Stylesheet utama dimuat langsung di views/layout_pub.ejs:
* /assets/css/main-layouts-v3.min.css (242 KB — dari static.inews.id/css/desktop/v3)
* /assets/css/welcome-page-v3.min.css ( widgetVideoHighlight, widget-v-video )
* /assets/css/polling-v2.css
* /assets/js/swiper/swiper-bundle.min.css
*
* Semua markup (cardArticle, cardImg, thumbCard, cardBody, kanal, kanalAndTime,
* cardTitle, widgetListArticle__*, widgetPopular__*, widgetGeoLocation,
* topBarWrap, adsPlacement, ...) memakai NAMA KELAS YANG SAMA dengan iNews.id,
* sehingga gaya datang dari stylesheet asli — bukan ditulis ulang di sini.
*
* Berkas ini HANYA berisi:
* 1. patch path aset (stylesheet v3 memakai path relatif, sudah diunduh lokal)
* 2. 3 kelas yang memang tidak punya selector di iNews
* (widget-polling, box komentar, thumbnail kosong)
* 3. breaking-news ticker (di iNews gaya ini di-inline, tidak ada di CSS)
*
* JANGAN menambahkan aturan layout untuk kelas yang sudah ada di stylesheet
* iNews (widgetNewsHeadline, widgetListArticle.col, dst) — itu yang membuat
* kolom meluber keluar .container.
* ========================================================================== */
/* ------------------------------------------------------------- font ---- */
/* @font-face MNCSans sudah didefinisikan di main-layouts-v3.min.css dengan
path absolut /fonts/v3/* — berkasnya ada di site2/fonts/v3/ dan disajikan
langsung. Tidak perlu dideklarasikan ulang di sini. */
/* ------------------------------------ kelas yang TIDAK ada di iNews ---- */
/* Polling: iNews memuat polling lewat iframe/modal, tidak ada selector lokal. */
section.widget-polling{width:100%;height:auto;background-color:var(--color-light-75,#f5f5f5);border:1px solid var(--color-light-0,#e6e6e6);border-radius:10px;padding:16px 20px;margin-bottom:24px}
section.widget-polling .widgetHeader .widgetTitle{font-family:"MNCSansBold",sans-serif;font-size:18px;font-weight:700;color:var(--color-dark-75,#333);margin-bottom:12px}
/* Judul polling di mode gelap.
BUG yang diperbaiki 2026-09-24: judul ini memakai --color-dark-75 (#333)
yang TIDAK bertukar di mode gelap, sementara latar section-nya ikut jadi
gelap (#202020). Terukur: kontras 1.10 antara #171717 dan #202020 -> judul
praktis TIDAK TERBACA. Aturan gelap untuk elemen ini memang belum pernah ada
(yang ada hanya untuk .poll-question/.poll-count, yang sudah benar). */
html.dark section.widget-polling .widgetHeader .widgetTitle{color:var(--color-2,#ededed)}
section.widget-polling .poll-question{font-size:15px;color:var(--color-dark-50,#666);margin-bottom:12px}
section.widget-polling .poll-options{display:flex;flex-direction:column;gap:8px}
section.widget-polling .poll-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--color-light-0,#e6e6e6);border-radius:8px;background:#fff;color:var(--color-dark-75,#333);transition:all .2s ease-in-out}
section.widget-polling .poll-opt:hover{border-color:var(--color-red-50,#ff8080);background:var(--color-light-75,#f5f5f5)}
section.widget-polling .poll-opt .poll-count{font-size:13px;color:var(--color-grey-100,#888)}
section.widget-polling .poll-total{margin-top:10px;font-size:12px;color:var(--color-grey-100,#888)}
/* Thumbnail tanpa gambar: blok netral (iNews selalu punya img.thumbCard). */
img.thumbCard.thumbKosong{display:block;width:100%;height:100%;min-height:80px;background:var(--color-light-25,#eee);border-radius:8px}
/* Komentar artikel: di iNews bagian ini widget sindikasi pihak ketiga. */
section.komentar{width:100%;margin:24px 0}
section.komentar h3{font-family:"MNCSansBold",sans-serif;font-size:20px;margin-bottom:16px;color:var(--color-dark-75,#333)}
section.komentar .listKomentar{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
section.komentar .listKomentar .itemKomentar{background:var(--color-light-75,#f5f5f5);border-radius:10px;padding:14px 16px}
section.komentar .listKomentar .itemKomentar .namaKomentar{font-family:"MNCSansBold",sans-serif;font-weight:700;font-size:14px;color:var(--color-red-75,#b00)}
section.komentar .listKomentar .itemKomentar .waktuKomentar{font-size:12px;color:var(--color-grey-100,#888);margin-bottom:6px}
section.komentar .listKomentar .itemKomentar .isiKomentar{font-size:14px;line-height:22px;color:var(--color-dark-50,#666)}
section.komentar .listKomentar .balasan{margin-top:12px;padding-left:16px;border-left:3px solid var(--color-red-0,#ffcccc);display:flex;flex-direction:column;gap:12px;list-style:none}
section.komentar .formKomentar{display:flex;flex-direction:column;gap:10px;background:var(--color-light-50,#fafafa);border-radius:10px;padding:16px 20px}
section.komentar .formKomentar input,section.komentar .formKomentar textarea{width:100%;padding:10px 14px;border:1px solid var(--color-light-0,#e6e6e6);border-radius:8px;font-family:"MNCSansRegular",sans-serif;font-size:14px}
section.komentar .formKomentar textarea{min-height:96px;resize:vertical}
section.komentar .formKomentar button{align-self:flex-start;cursor:pointer;background-color:var(--color-red,#d00);color:#fff;font-family:"MNCSansBold",sans-serif;font-weight:700;font-size:14px;padding:10px 24px;border-radius:32px}
/* Pesan sistem (hasil kirim komentar/polling) */
.pesanSistem{background-color:#f3fbff;border:1px solid #509af8;border-radius:10px;padding:12px 16px;font-size:14px;color:#0c2a75;margin-bottom:16px}
/* Tabel halaman statis (page/tentang-kami dsb.) */
.about-content{width:100%;max-width:820px}
.about-content h1{font-family:"MNCSansBold",sans-serif;margin-bottom:16px}
.about-content p{margin-bottom:16px;color:var(--color-dark-50,#666)}
/* Daftar indeks: jam + judul + kanal */
.idxList .idxItem{display:flex;gap:0 16px;padding:12px 0;border-bottom:1px solid var(--color-light-0,#e6e6e6);align-items:flex-start}
.idxList .idxItem .idxJam{flex-shrink:0;width:64px;font-family:"MNCSansBold",sans-serif;font-weight:700;font-size:14px;color:var(--color-red-75,#b00)}
.idxList .idxItem .idxIsi{flex:1}
.idxList .idxItem .idxJudul{font-family:"MNCSansBold",sans-serif;font-weight:700;font-size:16px;color:var(--color-dark-75,#333);display:block;margin-bottom:4px}
.idxList .idxItem .idxKanal{font-size:12px;color:var(--color-grey-100,#888)}
/* Filter indeks/populer */
section.indexControl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px;background:var(--color-light-75,#f5f5f5);border-radius:10px;padding:14px 16px}
section.indexControl .selectControl{display:flex;align-items:center;gap:8px}
section.indexControl input[type=text],section.indexControl input[type=date],section.indexControl select{padding:8px 12px;border:1px solid var(--color-light-0,#e6e6e6);border-radius:8px;font-family:"MNCSansRegular",sans-serif;font-size:14px;background:#fff}
section.indexControl button{cursor:pointer;background-color:var(--color-red,#d00);color:#fff;font-family:"MNCSansBold",sans-serif;font-weight:700;font-size:14px;padding:8px 20px;border-radius:8px}
/* Filter tag */
.filterTag{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filterTag a{padding:6px 14px;border-radius:32px;border:1px solid var(--color-red-0,#ffcccc);font-size:13px;color:var(--color-red-75,#b00)}
.filterTag a.aktif{background-color:var(--color-red-75,#b00);color:#fff}
/* Halaman redaksi/penulis */
.boxPenulis{display:flex;gap:16px;align-items:center;background:var(--color-light-75,#f5f5f5);border-radius:12px;padding:20px;margin-bottom:24px}
.boxPenulis .avatarPenulis{width:72px;height:72px;border-radius:50%;background:var(--color-light-0,#e6e6e6);flex-shrink:0;overflow:hidden}
.boxPenulis .avatarPenulis img{width:100%;height:100%;object-fit:cover}
.boxPenulis .infoPenulis h1{font-family:"MNCSansBold",sans-serif;font-size:24px;margin-bottom:6px}
.boxPenulis .infoPenulis p{font-size:14px;color:var(--color-dark-0,#999)}
/* Hasil pencarian */
.search-wrapp{width:100%}
.search-wrapp .filterSearch{display:flex;gap:8px;margin-bottom:20px}
.search-wrapp .filterSearch input{flex:1;padding:12px 16px;border:1px solid var(--color-light-0,#e6e6e6);border-radius:32px;font-size:15px}
.search-wrapp .filterSearch button{cursor:pointer;background-color:var(--color-red,#d00);color:#fff;font-weight:700;padding:12px 28px;border-radius:32px}
/* Kanal: judul subkanal */
.titleSubKanal{display:block;font-family:"MNCSansBold",sans-serif;font-size:14px;font-weight:700;color:var(--color-red-75,#b00);margin:8px 0 0}
/* ===== RESPONSIF — dua tambalan untuk bug CSS asli iNews =====
*
* Terukur pada iNews.id sendiri: pada viewport 390px, `documentElement.scrollWidth`
* = 711px (bukan 390). Penyebabnya CSS asli iNews memakai batas bawah px:
* .adsPlacement.size970x250 { width: clamp(400px, 100%, 1024px) } -> 400px
* .adsPlacement.size728x90 { width: clamp(400px, 100%, 728px) } -> 400px
* .stickyAds-wp { width: 970px } dan .stickyAds { width: 970px }
* Jadi luberan kecil itu memang perilaku iNews, BUKAN cacat tema kita. Yang
* ditambal di sini hanya yang bisa diperbaiki tanpa mengubah tampilan desktop:
* (a) .stickyAds-wp tidak punya aturan penyusut di media query asli, sehingga
* pada ponsel ia meluber 776px dan mendorong dokumen.
* (b) iklan ukuran tetap diberi max-width supaya tidak memaksa lebar minimum.
* Tambalan (b) mengubah lebar iklan pada ponsel dari 400px -> 100% kolom, yang
* tetap wajar karena slot iklan 970x250/728x90 memang tidak mungkin muat di 390px. */
@media screen and (max-width:1025px){
.stickyAds-wp{width:100%;max-width:100%}
.stickyAds-wp .stickyAds{width:100%}
.adsPlacement.size970x250,.adsPlacement.size728x90{width:100%;max-width:100%;padding-left:8px;padding-right:8px}
.adsPlacement.topLeaderBoard{width:100%;height:auto;min-height:90px}
.asideAds.ads-600x300{height:auto;min-height:300px}
}
/* Cegah gambar/iframe iklan mendorong lebar dokumen. */
.adsPlacement img,.adsPlacement iframe,.asideAds img,.stickyAds img,
.adsPlacement div,.ads_sticky_footer{max-width:100%}
/* ===== Iklan dummy (pengganti sementara wadah GPT) =====
* Wadah `#div-gpt-ad-*` asli kosong sampai jaringan iklan dipasang; SVG dummy di
* dalamnya hanya mengisi tampilan. Aturan di bawah menjaga agar gambar tetap
* proporsional (tidak gepeng di kolom sempit) dan tidak menambah luberan. */
.adsSlot{display:flex;align-items:center;justify-content:center;width:100%}
.adsSlot img{width:100%;height:auto;display:block;border:0}
/* Wadah asli tetap ada (untuk GPT), tapi tidak menyisakan ruang saat kosong. */
#div-gpt-ad-topleaderboard:empty,#div-gpt-ad-billboard:empty,
#div-gpt-ad-leaderboard:empty,#div-gpt-ad-native:empty,
#div-gpt-ad-rectangle1:empty,#div-gpt-ad-giantrec:empty,
#div-gpt-ad-bottomrec:empty,#div-gpt-ad-horizonad:empty{min-height:0}
/* Ukuran asli menjadi batas maksimum, bukan ukuran tetap. */
.adsPlacement.size970x250 .adsSlot{max-width:970px;margin:0 auto}
.adsPlacement.size728x90 .adsSlot{max-width:728px;margin:0 auto}
.adsPlacement.topLeaderBoard .adsSlot{max-width:728px;margin:0 auto}
.asideAds .adsSlot{max-width:300px;margin:0 auto}
.adsPlacement.mgid .adsSlot{max-width:600px;margin:0 auto}
/* --- Top bar di ponsel -------------------------------------------------
* CSS asli iNews: .topBar{height:48px;display:flex;justify-content:space-between}
* tanpa flex-wrap dan tanpa media query (9 media query di stylesheet itu hanya
* mengatur .container, .stickyAds, dsb — bukan topBar). Akibatnya pada ponsel
* kolom kiri (logo TV/topbar) + searchForm (clamp 150..310px) + networkNav +
* loginSection + screen-mode berdesakan dan luber ke kanan.
* iNews pun mengalami hal yang sama (terukur: elemen searchForm/networkNav
* meluber @320-600 di inews.id). Ditambal di sini supaya benar-benar rapi:
* searchForm boleh menyusut (min-width:0) dan topBar boleh membungkus. */
@media screen and (max-width:1025px){
.topBarWrap .topBar{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;padding-top:4px;padding-bottom:4px}
.topBarWrap .topBar>div{min-width:0}
.topBarWrap .topBar>div:nth-child(2){flex:1 1 120px;min-width:0}
.topBarWrap .topBar>div:nth-child(2) .searchForm{width:100%;min-width:0;max-width:310px}
.topBarWrap .topBar>div:last-child{gap:0 10px;flex-wrap:wrap;justify-content:flex-end}
}
@media screen and (max-width:600px){
/* Label teks disembunyikan; ikon tetap (searchForm tetap bisa dipakai). */
.topBarWrap .topBar>div:last-child .networkNav .dropDownBtn .networkLabel{display:none}
.topBarWrap .topBar>div:last-child .loginSection .btnLogin span{display:none}
.topBarWrap .topBar>div:nth-child(2) .searchForm{max-width:100%}
}
/* --- Grid headline di ponsel -------------------------------------------
* `.widgetNewsHeadline` memakai grid 5 lajur tanpa satu pun media query:
* grid-template-areas:"h1 h1 h1 h2 h2" ... ; grid-auto-rows:clamp(70px,9.54vw,91px)
* Terukur @390px: iNews.id DAN situs kita sama-sama menghasilkan headline1
* 375px di dalam container 326px (headline1 = 3 lajur x 109px + gap) sehingga
* kartu meluber 49px ke kanan. Ditambal: pada ponsel grid diratakan jadi satu
* lajur dan tinggi baris dibiarkan otomatis, jadi kartu bertumpuk rapi. */
@media screen and (max-width:600px){
.widgetNewsHeadline{grid-template-areas:"headline1" "headline2" "headline3" "headline4" "headline5";
grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;row-gap:16px;
grid-auto-columns:minmax(0,1fr)}
.widgetNewsHeadline>*{min-width:0!important;max-width:100%!important}
.widgetNewsHeadline .headline1,.widgetNewsHeadline .headline2,
.widgetNewsHeadline .headline3,.widgetNewsHeadline .headline4,
.widgetNewsHeadline .headline5{grid-area:auto}
.widgetNewsHeadline article.cardArticle a{flex-direction:row;gap:12px}
/* Kartu utama (headline1) tampil besar: gambar penuh lalu judul di bawah.
Kekhususan harus MENGALAHKAN `.widgetNewsHeadline article.cardArticle a
.cardImg{width:clamp(95px,10vw,137px);flex-shrink:0}` dari CSS asli —
karena itu selektornya ditulis lengkap dan diberi !important pada width. */
.widgetNewsHeadline>article.cardArticle:first-child a{flex-direction:column}
.widgetNewsHeadline article.cardArticle a .cardImg,
.widgetNewsHeadline>article.cardArticle:first-child a .cardImg{
width:100%!important;max-width:100%;flex:1 1 auto;height:auto;aspect-ratio:16/9}
.widgetNewsHeadline article.cardArticle a .cardBody{width:100%;max-width:100%;min-width:0}
.widgetNewsHeadline>article.cardArticle .cardBody .cardTitle{
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.portalception{top:0;height:auto;padding:10px 0}
.portalception .container{flex-wrap:wrap;row-gap:8px;gap:0 14px}
.portalception .container span{padding-left:0;line-height:normal}
.portalception .container .portal{line-height:normal}
}
/* --- Kolom jadi satu lajur di tablet/ponsel -----------------------------
* `section.mainBody{display:flex;flex-wrap:wrap}` + `main.sideLeft{width:68%}` +
* `aside.sideRight{width:calc(32% - 20px)}` — dan TIDAK ada satu pun aturan
* mainBody/sideLeft/sideRight di dalam 9 media query `max-width:1025px` milik
* stylesheet asli. Karena itu pada viewport 320px kolom bertahan 68%/32%
* (terukur: sideLeft 174px + sideRight 62px) dan teks jadi tak terbaca.
* Terukur di iNews.id pun sama (174/62) — jadi ini keterbatasan CSS aslinya.
* Ditambal: <=900px kolom ditumpuk (sideLeft dulu, lalu sideRight), masing-masing
* selebar penuh. >=1026px tidak berubah sama sekali (nanti di-override lagi
* menjadi 68%/32% oleh aturan @media min-width:1026px bila ada). */
@media screen and (max-width:900px){
section.mainBody{flex-direction:column;gap:24px 0}
section.mainBody main.sideLeft,
section.mainBody aside.sideLeft,
section.mainBody main.sideRight,
section.mainBody aside.sideRight,
section.mainBody>main,
section.mainBody>aside{width:100%;max-width:100%}
.widgetPopular__body .wrappList{padding-bottom:4px}
/* Footer: `footer .footerBody{display:flex;justify-content:space-between}` tanpa
flex-wrap dan tanpa aturan penumpuk di media query asli, jadi 4 kolom teks
footer tetap sejajar horizontal dan kolom terakhir meluber ke kanan
(terukur @414px: listInfoFooter x=501 right=585, docW jadi 585). */
footer .footerBody{flex-wrap:wrap;row-gap:32px;justify-content:flex-start}
footer .footerBody .withImg{margin-right:0}
footer .footerBody .listInfoFooter{flex:1 1 45%;min-width:0;justify-self:auto}
}
@media screen and (max-width:600px){
footer .footerBody .listInfoFooter{flex:1 1 100%}
/* (Dihapus 2026-09-24) Di sini dulu ada 3 tambalan tata letak untuk
`section.widgetVideoHighlight` di <=600px — dulu pemutar video dan
daftar "Up Next" meluber di ponsel karena `width:60%` + `flex-shrink:0`
tanpa media query penumpuk. Seluruh section itu sudah DIHAPUS dari
beranda (lihat views/index.ejs dan lib/inews.js), jadi tambalannya
tinggal kode mati dan ikut dibuang supaya tidak menyesatkan pembaca
berikutnya yang mengira widget itu masih ada.
Bila section itu dihidupkan lagi, tambalan ini perlu dipasang kembali. */
/* widgetGeoLocation: gambarnya `width:clamp(330px,45vw,584px)` — batas bawah
330px lebih besar dari container @320px (256px), jadi meluber. */
section.widgetGeoLocation .locationBody .geo-location-non-active .locationImg{width:100%;max-width:100%}
section.widgetGeoLocation .locationBody .geo-location-non-active .locationImg img{width:100%;max-width:100%}
/* Burger menu: `#burgerMenu{width:423px}` ukuran tetap. Pada viewport 390/414
menu lebih lebar dari layar sehingga terpotong (terukur @390: menuX=-33).
Ditambal: lebar maksimum 92vw dan daftar kanal 2 lajur di ponsel. */
#burgerMenu{width:min(423px, 92vw);padding:20px 16px}
#burgerMenu .headerBurgerMenu .headerBurgerImg{width:120px}
#burgerMenu .bodyBurgerMenu .menuKanal .listMenuKanal .listKanal{width:calc(50% - 6px)}
}
/* Pada desktop, pastikan kembali ke 68/32 (aturan asli menang atas yang di atas
hanya bila kekhususan sama; tulis ulang eksplisit agar aman). */
@media screen and (min-width:1026px){
section.mainBody main.sideLeft{width:68%}
section.mainBody aside.sideRight{width:calc(32% - 20px)}
}
/* ===== Mode gelap / terang =====
iNews memakai atribut class pada : "light" (default) dan "dark".
Variabel warna (--color-1 penanda latar, dst) sudah didefinisikan di
main-layouts-v3.min.css, jadi bagian terbesar tema otomatis ikut berubah.
Yang perlu ditambal hanya bagian yang tidak punya varian di CSS asli: */
/* Ikon toggle: iNews hanya punya varian gelap->terang di stylesheet,
varian terang->gelap ditambahkan di sini. */
html.light .screen-mode i.ic-dark-mode{background-image:url(/img/icon/dark-mode.svg)}
html.dark .screen-mode i.ic-dark-mode{background-image:url(/img/icon/light-mode.svg)}
/* Logo header saat gelap (iNews memakai logo-inews-dm.svg). */
html.dark header .header .brand{background-image:url(/img/2025/logo-inews-dm.svg)}
html.dark header .header .brand.sport{background-image:url(/img/2025/logo-inews-sport.svg)}
html.dark header .header .brand.news{background-image:url(/img/2025/logo-inews-news.svg)}
html.dark header .header .brand.finance{background-image:url(/img/2025/logo-inews-finance.svg)}
html.dark header .header .brand.lifestyle{background-image:url(/img/2025/logo-inews-lifestyle.svg)}
html.dark header .header .brand.otomotif{background-image:url(/img/2025/logo-inews-otomotif.svg)}
html.dark header .header .brand.techno{background-image:url(/img/2025/logo-inews-techno.svg)}
html.dark header .header .brand.multimedia{background-image:url(/img/2025/logo-inews-multimedia.svg)}
html.dark header .header .brand.daerah{background-image:url(/img/2025/logo-inews-daerah.svg)}
/* Ticker breaking news memakai latar putih keras; ikutkan ke tema gelap. */
html.dark #breaking-news{background:#202020;border-color:#3a3a3a}
html.dark #breaking-news .breakingItem{color:#fff}
/* Panel/section yang memakai #fff langsung (bukan variabel) ikut digelapkan. */
html.dark section.widget-polling,html.dark .boxPenulis,html.dark .idxList,
html.dark section.indexControl,html.dark .search-wrapp .filterSearch input{background:#202020}
html.dark section.widget-polling .poll-opt{background:#2a2a2a;border-color:#3a3a3a;color:#eee}
html.dark section.komentar .listKomentar .itemKomentar,
html.dark section.komentar .formKomentar{background:#202020}
html.dark section.komentar .formKomentar input,
html.dark section.komentar .formKomentar textarea{background:#2a2a2a;color:#eee;border-color:#3a3a3a}
html.dark .idxList .idxItem .idxJudul{color:#eee}
html.dark .about-content p{color:#bbb}
/* ============================================================================
HALAMAN DETAIL / ARTIKEL (view 'article')
Sumber asli: details-layouts-v3.min.css (static.inews.id/css/desktop/v3).
Dipasang HANYA di view article lewat layout_pub.ejs.
Tiga tambalan di bawah berasal dari pengukuran nyata di browser, bukan
perkiraan. Semua angka diambil dari DOM saat halaman dirender.
========================================================================== */
/* --- 1. Gambar sampul tidak boleh meluber ------------------------------------
ATURAN ASLI iNews: .headerArticle .headerImg img{width:100%;min-height:576px}
dan ![]()
dari server memuat atribut width="1000" height="1000".
Karena view kita TIDAK memuat details-layouts-v3 sebelum tambalan ini, atribut
HTML itu menang dan gambar terukur width:1000px pada SEMUA viewport.
Terukur: viewport 320 -> documentElement.scrollWidth 1032 (luberan 712px),
viewport 1024 -> 1051. Halaman jadi bisa digeser ke kanan.
min-height juga bikin halaman tinggi berlebihan di ponsel, jadi dihilangkan
di lebar kecil (iNews sendiri tidak, tapi 576px di layar 320 = 1,8 layar). */
html.detailCounter,section.detailWrapper .headerArticle .headerImg img,
div.detailWrapper .headerArticle .headerImg img{
width:100%;max-width:100%;height:auto;object-fit:cover;object-position:center top;
}
@media screen and (max-width:1025px){
section.detailWrapper .headerArticle .headerImg img,
div.detailWrapper .headerArticle .headerImg img{min-height:0;max-height:none;border-radius:12px}
}
/* --- 2. Wadah flex tidak boleh melebar oleh isinya ---------------------------
section.mainBody adalah display:flex. Anak flex punya min-width:auto, jadi
gambar/anak yang lebar memaksa induknya ikut melebar (itulah sebabnya
scrollWidth 1032 muncul walau sudah dibatasi).
min-width:0 mengembalikan perilaku "mengecil sesuai ruang tersedia". */
section.mainBody,section.mainBody>main,section.mainBody>aside{min-width:0}
section.mainBody>*{max-width:100%}
/* --- 3. Slot iklan di dalam aliran teks -------------------------------------
figure.adsPlacement di halaman artikel diberi lebar asli
clamp(400px,100%,1024px) -> pada viewport 320 nilainya tetap 400px dan
menyeret layout. Dibatasi ke lebar induk. */
section.detailWrapper figure.adsPlacement,
div.detailWrapper figure.adsPlacement,
section.mainBody figure.adsPlacement,
section.mainBody aside.sideRight .adsPlacement,
section.mainBody aside.sideRight .asideAds,
section.mainBody aside.sideRight .stickyAds{width:100%;max-width:100%}
/* --- 4. Blok isi artikel ----------------------------------------------------
details-layouts-v3 hanya menata .bodyArticleWrapper. Blok lain di halaman
detail (kotak komentar, tag, subscribe, "baca juga") tidak ada di sana,
jadi jaraknya diselaraskan dengan irama 24px milik iNews. */
div.detailWrapper .bodyArticleWrapper h2,
div.detailWrapper .bodyArticleWrapper h3{
font-size:clamp(18px,2.2vw,22px);margin:24px 0 12px;color:var(--color-dark-100)
}
div.detailWrapper .bodyArticleWrapper blockquote{
border-left:4px solid var(--color-3,#c00);padding:8px 0 8px 16px;
margin:24px 0;font-style:italic
}
div.detailWrapper .bodyArticleWrapper ul,
div.detailWrapper .bodyArticleWrapper ol{padding:0 0 0 2rem;margin-bottom:24px}
div.detailWrapper .bodyArticleWrapper li{font-size:18px;line-height:1.7;
color:var(--color-dark-100);margin-bottom:8px}
div.detailWrapper .bodyArticleWrapper img{max-width:100%;height:auto}
div.detailWrapper .bodyArticleWrapper iframe{max-width:100%}
div.detailWrapper .bodyArticleWrapper table{max-width:100%;display:block;overflow-x:auto}
/* Tanda "baca juga" (I.kartu(...,'bacaJuga')) versi halaman detail. */
div.detailWrapper .bodyArticleWrapper .bacaJuga,
section.detailWrapper .mainBody main .bacaJuga{
display:block;border-left:4px solid var(--color-3,#c00);
background:rgba(192,0,0,.04);padding:12px 16px;margin:24px 0;border-radius:0 8px 8px 0
}
html.dark div.detailWrapper .bodyArticleWrapper .bacaJuga,
html.dark section.detailWrapper .mainBody main .bacaJuga{background:rgba(255,255,255,.06)}
/* =====================================================================
KOMENTAR ARTIKEL (.box-comment) + TAG (.tags)
---------------------------------------------------------------------
TEMUAN TERUKUR (2026-09-24): baik details-layouts-v3.min.css (CSS asli
iNews) maupun pub.css SEBELUMNYA tidak punya SATU PUN aturan untuk
.box-comment / .box-comment-list / .comment-name / .comment-body /
.comment-act / .comment-form / .comment-note / .comment-kosong.
Akibatnya seluruh blok komentar dirender polos (font default browser,
tanpa jarak, input tanpa kotak) — itu penyebab "CSS komentar kacau".
iNews sendiri TIDAK memuat komentar di halaman artikel (terverifikasi:
.box-comment tidak ada di DOM artikel iNews), jadi blok ini murni
milik kita dan perlu gayanya sendiri — ditulis memakai token warna
iNews (--color-1, --color-15, --color-red-75, --color-light-100) agar
seragam dengan sisa tema.
===================================================================== */
.detailWrapper .box-comment,
section.detailWrapper .box-comment{
font-family:"MNCSansRegular","MNCSans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
display:flex;flex-direction:column;gap:16px;
margin:32px 0;padding:20px;border-radius:12px;
background:var(--color-15,#f4f4f4);
}
.box-comment-header h3{
margin:0;font-family:"MNCSansBold","MNCSans",sans-serif;
font-size:20px;line-height:140%;font-weight:700;color:var(--color-2,#1a1a1a);
}
/* Daftar komentar */
.box-comment-body{display:flex;flex-direction:column;gap:12px}
.box-comment-list{
background:var(--color-light-100,#fff);border:1px solid rgba(0,0,0,.08);
border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px
}
.comment-name{font-size:14px;line-height:150%;color:var(--color-2,#1a1a1a)}
/* KUNCI WARNA: mode gelap iNews menyetel `html.dark … {color:var(--color-light-100)}`
pada wadah besar, sehingga .comment-name (spesifisitas rendah) ikut jadi PUTIH
di atas kotak putih — terukur `rgb(255,255,255)` sebelum tambalan ini. Nama dan
waktu dikunci eksplisit di sini, termasuk untuk mode gelap. */
.detailWrapper .comment-name,
section.detailWrapper .comment-name,
.detailWrapper .comment-name b,
section.detailWrapper .comment-name b{color:var(--color-2,#1a1a1a)}
.comment-name b{font-family:"MNCSansBold","MNCSans",sans-serif;font-weight:700;color:inherit}
.comment-time{
font-size:12px;color:var(--color-3,#7a7a7a);margin-left:6px;font-weight:400
}
.comment-body{font-size:15px;line-height:160%;color:var(--color-2,#414141);overflow-wrap:anywhere}
.comment-act{display:flex;gap:14px;margin-top:2px}
.comment-reply{
font-size:13px;font-weight:700;color:var(--color-red-75,#c00);text-decoration:none
}
.comment-reply:hover{text-decoration:underline}
.comment-note{
padding:10px 14px;border-radius:8px;font-size:14px;line-height:150%;
background:rgba(192,0,0,.08);color:var(--color-red-75,#c00);
border-left:3px solid var(--color-red-75,#c00)
}
.comment-kosong{
margin:0;padding:16px;border-radius:10px;text-align:center;font-size:14px;
color:var(--color-3,#7a7a7a);background:var(--color-light-100,#fff);
border:1px dashed rgba(0,0,0,.15)
}
/* Form komentar */
.comment-form{display:flex;flex-direction:column;gap:10px}
.comment-form-row{display:flex;gap:10px;flex-wrap:wrap}
.comment-form-row input{flex:1 1 180px;min-width:0}
.comment-form input,
.comment-form textarea{
width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:150%;
padding:10px 12px;border:1px solid rgba(0,0,0,.16);border-radius:8px;
background:var(--color-light-100,#fff);color:var(--color-2,#1a1a1a);resize:vertical
}
.comment-form input:focus,
.comment-form textarea:focus{
outline:none;border-color:var(--color-red-75,#c00);box-shadow:0 0 0 3px rgba(192,0,0,.12)
}
.comment-form button{
align-self:flex-start;font:inherit;font-family:"MNCSansBold","MNCSans",sans-serif;
font-size:14px;font-weight:700;padding:10px 22px;border:0;border-radius:100px;
background:var(--color-red-75,#c00);color:var(--color-light-100,#fff);cursor:pointer;
transition:opacity .2s ease-in-out
}
.comment-form button:hover{opacity:.88}
/* Mode gelap */
html.dark .detailWrapper .box-comment,
html.dark section.detailWrapper .box-comment{background:var(--color-15,#1e1e1e)}
html.dark .box-comment-list,
html.dark .comment-kosong,
html.dark .comment-form input,
html.dark .comment-form textarea{
background:var(--color-light-100,#262626);border-color:rgba(255,255,255,.14);
color:var(--color-2,#ededed)
}
html.dark .box-comment-header h3,
html.dark .comment-name{color:var(--color-2,#ededed)}
html.dark .comment-body{color:var(--color-2,#c9c9c9)}
html.dark .comment-note{background:rgba(192,0,0,.18)}
/* TAG (.tags) — markup baru: div.tags > label + ul > li.tagList.
Aturan `.tags ul .tagList*` sudah ada di details-layouts-v3.min.css; di sini
hanya disediakan tata letak wadahnya (dulu ul kita berkelas .tagListArticle
yang tidak punya aturan apa pun sehingga tampil polos tanpa pil). */
.detailWrapper .tags,
section.detailWrapper .tags{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0
}
.detailWrapper .tags label,
section.detailWrapper .tags label{
font-family:"MNCSansBold","MNCSans",sans-serif;font-size:14px;font-weight:700;
color:var(--color-2,#1a1a1a);margin-right:2px
}
.detailWrapper .tags ul,
section.detailWrapper .tags ul{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center
}
html.dark .detailWrapper .tags label,
html.dark section.detailWrapper .tags label{color:var(--color-2,#ededed)}
/* =====================================================================
TABRAKAN WIDGET SIDEBAR vs ARTIKEL (beranda) — terukur 2026-09-24
---------------------------------------------------------------------
Keluhan: "widget sidebar dan artikel masih tabrakan".
Hasil pengukuran DOM di beranda (container `.container`):
320px : widget-v-video-card di x=205..358 (container 0..320) -> lewat 38px
widget-v-video-card ke-2 di x=378..531 -> lewat 211px
360px : kartu ke-2 x=378..531 -> lewat 171px
600px : x=551..704 -> lewat 104px
Semua berhenti di widget-v-video / cardPopular.
AKAR (welcome-page-v3.min.css, CSS asli iNews):
.widget-v-video .widget-v-video-body .widget-v-video-list
.widget-v-video-card{width:153px; ...} <- lebar FIXED, tanpa media query
.widget-v-video .widget-v-video-body .widget-v-video-list{display:flex;flex-wrap:wrap;gap:20px}
.widget-v-video .widget-v-video-body .widget-v-video-list.scroll{flex-wrap:nowrap;overflow:scroll}
.widget-v-video .widget-v-video-body .widget-v-video-list
.widget-v-video-card .widget-v-video-img{width:153px;height:272px}
Karena kartu ber-lebar tetap dan barisnya nowrap, kartu tidak pernah
mengecil -> keluar dari kolom lalu menimpa area artikel.
Tambalan: lebar kartu jadi relatif pada layar sempit dan baris boleh
membungkus; `.lg` (kartu besar 20%) dan `.widget-v-video-img` ikut.
===================================================================== */
@media screen and (max-width:1025px){
.widget-v-video,
.widget-v-video .widget-v-video-body{max-width:100%;min-width:0}
.widget-v-video .widget-v-video-body{flex-wrap:wrap;gap:12px}
.widget-v-video .widget-v-video-body .widget-v-video-list{
flex-wrap:wrap;overflow:visible;padding-bottom:0;gap:12px;min-width:0;max-width:100%
}
/* kartu: lebar tetap 153px -> relatif, dan boleh menyusut */
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card,
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card.lg{
width:calc(50% - 6px);min-width:0;flex:1 1 calc(50% - 6px)
}
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card .widget-v-video-img,
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card.lg .widget-v-video-img{
width:100%;height:auto;aspect-ratio:16/9
}
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card .widget-v-video-img img,
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card .thumbCard{
width:100%;height:100%;max-width:100%
}
}
@media screen and (max-width:480px){
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card,
.widget-v-video .widget-v-video-body .widget-v-video-list .widget-v-video-card.lg{
width:100%;flex:1 1 100%
}
}
/* cardPopular di beranda: .cardPopular{width:calc(33.3333% - 11px);flex-shrink:0}
(CSS asli iNews). Pada 600-1100px tiga kartu + celah tetap lebih lebar dari
kolom, terukur luber 43-202px. flex-basis min-content + izin menyusut
menyelesaikannya tanpa mengubah tampilan desktop. */
@media screen and (max-width:1100px){
.cardPopular{min-width:0}
.wrappList .cardPopular{flex-shrink:1}
}
/* =====================================================================
widgetPopular: kartu terpotong "tabrakan" di beranda — terukur 2026-09-24
---------------------------------------------------------------------
Struktur nyata (diukur via DOM pada 320px):
ARTICLE.cardArticle.cardPopular 64px
DIV.widgetPopular__body__wrappList 224px <- flex-wrap:nowrap; overflow-x:hidden
DIV.widgetPopular__body 256px
SECTION.widgetPopular >> MAIN.sideLeft >> SECTION.mainBody
Aturan asli iNews:
.cardPopular{width:calc(33.3333% - 11px);flex-shrink:0}
.widgetPopular__body__wrappList{display:flex;flex-wrap:nowrap;overflow-x:hidden}
`flex-shrink:0` + `overflow-x:hidden` membuat kartu ke-2/ke-3 TIDAK menyusut
dan hanya TERPOTONG oleh overflow. Di iNews ini disengaja karena ada carousel
(JS menggeser daftar); di CMS ini TIDAK ADA JS carousel (diverifikasi: tidak
ada `wrappList`/`scrollLeft` di layout/JS), sehingga kartu tampak menabrak
dan terpotong permanen. Tambalan: izinkan kartu menyusut dan bagi rata.
===================================================================== */
.widgetPopular__body__wrappList{
flex-wrap:wrap;
overflow-x:visible
}
.widgetPopular__body__wrappList .cardArticle.cardPopular{
width:calc(33.3333% - 8px);
flex:1 1 calc(33.3333% - 8px);
min-width:0
}
@media screen and (max-width:480px){
.widgetPopular__body__wrappList .cardArticle.cardPopular{
width:calc(50% - 6px);
flex:1 1 calc(50% - 6px)
}
}
/* ==========================================================================
LAPISAN AKSESIBILITAS & UI/UX (ditambahkan 2026-09-24)
Diukur dengan tools/pw_uiux_audit.py — bukan tebakan:
- aturan :focus-visible = 0 -> fokus keyboard tak terlihat (harus ada)
- skip-link tidak ada di beranda/kanal/indeks
- tap target header < 44px : .logo 40x40, .btnSearch 27x30,
.btnLogin 78x26, .screen-mode 28x28, burger 32x32
Ditulis SESUDAH stylesheet iNews asli, jadi tidak menimpa tema aslinya.
========================================================================== */
/* --- 1. Skip-link ---------------------------------------------------------
Tersembunyi sampai difokus keyboard; muncul di kiri atas saat :focus. */
.lewatiKeKonten{
position:absolute;
left:-9999px;
top:0;
z-index:9999;
/* padding diperbesar 2026-09-24: tinggi terukur 38px, di bawah ambang
sasaran sentuh 44px yang dipakai audit UI/UX. 14px -> 44px+ tinggi nyata. */
padding:16px 20px;
min-height:44px;
display:flex;
align-items:center;
background:var(--color-3,#E50913);
color:#fff;
font-size:14px;
font-weight:700;
border-radius:0 0 6px 0;
text-decoration:none
}
.lewatiKeKonten:focus{
left:0;
outline:3px solid #fff;
outline-offset:-3px
}
/* --- 2. Fokus keyboard terlihat -------------------------------------------
:focus-visible hanya aktif untuk navigasi keyboard, tidak saat klik mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.screen-mode:focus-visible,
.tag:focus-visible{
outline:3px solid var(--color-3,#E50913);
outline-offset:2px;
border-radius:2px
}
/* Di area gelap, merah di atas gelap kurang kontras -> pakai putih. */
html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark input:focus-visible,
html.dark [tabindex]:focus-visible{
outline-color:#fff
}
/* Hapus target fokus yang tak mungkin dilihat (mis. elemen di dalam dropdown
yang tertutup) TIDAK dilakukan — outline:0 hanya untuk input yang punya
border pengganti sendiri. */
.searchForm input:focus{
outline:3px solid var(--color-3,#E50913);
outline-offset:1px
}
/* --- 3. Tap target >= 44x44px (WCAG 2.5.8 / Apple HIG) -------------------
Ukuran visual dibiarkan, area klik diperbesar. Ini yang paling berpengaruh
di layar sentuh: 40px vs 44px adalah beda antara "kena" dan "meleset". */
.topBar .logo,
.topBarWrap .logo{
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center
}
.topBar .btnSearch,
.searchForm .btnSearch{
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center
}
.topBar .btnLogin,
.topBarWrap .btnLogin,
a.btnLogin{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
padding-left:12px;
padding-right:12px
}
.screen-mode{
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center
}
.topBar button[aria-label="menu"],
.topBarWrap button[aria-label="menu"],
.burgerMenu,
#burgerMenu{
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center
}
/* Tautan footer & sosial — DIBIARKAN APA ADANYA.
Riwayat (regresi terukur 2026-09-24, dua percobaan gagal):
v1 `display:inline-flex; min-width:44px` -> docW 327 (vw 320), luber 7px
v2 ganti ke `padding:6px; box-sizing:content-box` -> docW 334, LEBIH BURUK
Footer iNews memang sempit; memperbesar area klik di sana selalu melebarkan
dokumen. Karena itu aturan tap-target untuk footer DIHAPUS. Tap target 44px
tetap diterapkan pada kontrol header (logo, cari, login, menu, mode) yang
ruangnya cukup. Diukur ulang: docW kembali 320. */
/* (tidak ada aturan — sengaja) */
/* Tag & tombol pil di dalam artikel */
a.tag,
.tag{
min-height:32px;
display:inline-flex;
align-items:center
}
/* --- 4b. Tooltip mode layar tidak boleh melebarkan dokumen ---------------
BUG WARISAN iNews yang terukur 2026-09-24 pada viewport 320px:
.screen-mode-info { position:absolute; width:max-content;
left:calc(-60% - 14px); visibility:hidden; opacity:0 }
`visibility:hidden` TIDAK mengeluarkan elemen dari perhitungan tata letak,
jadi tooltip ini mendorong document.scrollWidth 320 -> 327. Terbukti bisa
di-scroll: documentElement.scrollLeft = 7. Artinya di ponsel, halaman bisa
digeser ke samping tanpa alasan yang terlihat. Di tooltip iNews sendiri
fenomena yang sama terjadi (PWRespon mengukur 6 luberan di iNews).
Solusi: jepit lebarnya tanpa mengubah tampilan saat muncul. */
.screen-mode .screen-mode-info{
max-width:min(260px,calc(100vw - 24px));
overflow-wrap:break-word
}
@media (max-width:480px){
/* Di layar sempit, tooltip ini memang tidak punya ruang; ia tooltip hover
yang tidak berguna di sentuh, jadi cukup dilepas dari tata letak.
`!important` WAJIB: tanpa itu aturan `position:absolute` dari
main-layouts-v3.min.css tetap menang (terukur: pos tetap 'absolute',
scrollWidth tetap 327). Dengan !important -> pos 'fixed', scrollWidth 320,
dan scrollLeft tidak bisa lagi digeser (0). */
.screen-mode .screen-mode-info{
position:fixed !important;
left:8px !important;
right:8px !important;
bottom:8px !important;
width:auto !important;
max-width:calc(100vw - 16px) !important;
box-sizing:border-box
}
}
/* --- 4. Keterbacaan teks di atas gambar ----------------------------------
Teks di atas sampul artikel harus tetap terbaca apa pun warna gambarnya. */
.cardArticle figcaption,
.cardArticle .caption,
[class*="card"] figcaption{
text-shadow:0 1px 3px rgba(0,0,0,.55)
}
/* --- 5. FOOTER: kontras teks (temuan audit 2026-09-24) ---------------------
Stylesheet iNews asli: `footer .footerBody .listInfoFooter li a{color:
var(--color-white)}` — DI ATAS LATAR TERANG. Terukur rasio kontras 1.0
(teks putih di latar putih), artinya tautan footer seperti "Tentang Kami"
praktis TAK TERBACA. Di iNews aslinya latar footer gelap; di sini latar
terang, jadi warna teks wajib diturunkan. Menggunakan warna teks tema
(--color-2 = #000000), bukan --color-1 (yang justru putih). */
footer .footerBody .listInfoFooter li,
footer .footerBody .listInfoFooter li a,
footer .footerBody .infoFooter,
footer .footerBody .infoFooter a,
footer .footerBody .infoFooter p,
footer .footerBody span,
footer .footerBody p{
color:var(--color-2,#000)
}
footer .footerBody .listInfoFooter li:hover a{
color:var(--color-3,#E50913)
}
/* Judul kolom footer ("Perusahaan", "Jaringan Media") — sedikit lebih tegas. */
footer .footerBody .listInfoFooter > li:first-child,
footer .footerBody .titleFooter{
font-weight:700
}
/* Tautan footer lebih kecil dari 12px di layar sempit -> naikkan ke 13px
agar tetap nyaman dibaca sambil mempertahankan tata letak. */
@media screen and (max-width:480px){
footer .footerBody .listInfoFooter li a{
font-size:13px;
line-height:26px
}
}
/* --- 6. FOOTER: judul kolom & "Part of" (temuan lanjutan audit 2026-09-24) --
Terukur di DOM: .titlePartof ("Part of") dan judul kolom "Perusahaan",
"Navigasi", "Jaringan" berwarna rgb(255,255,255) — PUTIH — sementara gambar
latar footer-bg-2.png diukur rgb(183,183,183) alias TERANG (luminansi
183/255). Rasio kontras = 1.0, artinya keempat label itu tak terbaca.
Aturan ini menurunkan HANYA elemen teks tersebut; warna gambar logo dan
ikon sosial tidak disentuh. */
footer .titlePartof,
footer .footerBody .listInfoFooter > li:first-child,
footer .footerBody .listInfoFooter > li > b,
footer .footerBody .titleFooter{
color:#1a1a1a
}
/* Ikon "Part of MNC" memakai font-ikon berwarna — biarkan, hanya teksnya.
Catatan: aturan iNews asli `footer .partOf .titlePartof{color:var(--color-white)}`
lebih spesifik dari `footer .titlePartof`, jadi selector ini harus sama
panjangnya (dan diberi !important karena letaknya di stylesheet terpisah). */
footer .partOf span.titlePartof,
footer .partOf .titlePartof{
color:#1a1a1a !important;
font-weight:600
}
/* ==========================================================================
TEMA GELAP: PERBAIKAN KONTRAS (ditambahkan 2026-09-24)
Diukur dengan tools/pw_uiux_audit.py, mode html.dark:
akar masalah: token warna SUDAH bertukar dengan benar saat gelap
--color-1: #ffffff -> #000000 (dipakai sebagai LATAR)
--color-2: #000000 -> #ffffff (dipakai sebagai TEKS)
--color-15: #ffffff -> #202020 (latar halaman)
TAPI banyak komponen masih memakai warna LATAR keras (putih) sehingga
teks putih di atas latar putih -> terukur rasio 1.0:
.nav__main background rgb(255,255,255) + tautan putih = 1.0
.navList warna teks 1.0
.poll-question rasio 1.18
.titlePartof / .listInfoFooter li rasio 1.21
Perbaikan mengikuti token yang SUDAH ada (tidak mengarang warna baru),
supaya tema gelap konsisten dengan tema terang.
========================================================================== */
/* --- Navigasi kanal ------------------------------------------------------- */
html.dark .nav__main,
html.dark nav.nav__main{
background:var(--color-15,#202020);
border-bottom:1px solid #3a3a3a
}
html.dark .nav__main .navLink,
html.dark .nav__main .navList,
html.dark .nav__main .navLink-active{
color:var(--color-2,#fff)
}
html.dark .nav__main .navList:hover .navLink,
html.dark .nav__main .navLink:hover{
color:var(--color-3,#E50913)
}
html.dark .nav__main #dropdown i,
html.dark .nav__main .ic-dropdown-kanal{
color:var(--color-2,#fff)
}
/* --- Judul pertanyaan polling (rasio 1.18) -------------------------------- */
/* CATATAN 2026-09-24: sebelumnya di sini (dan di 2 aturan lain) tertulis
`.widgetPolling` dengan huruf besar P — sedangkan kelas yang BENAR-BENAR
dipakai markup adalah `widget-polling` (bertanda hubung, lihat
lib/inews.js). Selektor camelCase itu TIDAK PERNAH cocok, jadi ia kode mati
yang menyamar sebagai perbaikan. Ditulis ulang memakai nama kelas yang benar
supaya benar-benar bekerja. */
html.dark .poll-question,
html.dark .polling .poll-question,
html.dark .widget-polling .poll-question{
color:var(--color-2,#fff)
}
html.dark .poll-count,
html.dark .poll-percent{
color:#c9c9c9
}
/* --- Footer: di mode gelap hambar gambar latar terang, jadi teks harus
tetap gelap. Aturan ini lebih spesifik dari lapisan footer sebelumnya
supaya tidak bentrok. ------------------------------------------------ */
html.dark footer .partOf span.titlePartof,
html.dark footer .partOf .titlePartof,
html.dark footer .footerBody .listInfoFooter > li:first-child,
html.dark footer .footerBody .listInfoFooter li,
html.dark footer .footerBody .listInfoFooter li a,
html.dark footer .footerBody .infoFooter,
html.dark footer .footerBody .infoFooter a,
html.dark footer .footerBody p,
html.dark footer .footerBody span{
color:#1a1a1a !important
}
html.dark footer .footerBody .listInfoFooter li:hover a{
color:var(--color-3,#E50913) !important
}
/* --- Kartu & teks umum: pastikan latar kartu ikut gelap ------------------- */
html.dark .cardArticle,
html.dark .widget,
html.dark .widgetPopular,
html.dark .bacaJuga,
html.dark .pipBody{
color:var(--color-2,#fff)
}
/* --- Form: input di mode gelap harus ikut gelap --------------------------- */
html.dark .searchForm input,
html.dark input[type="text"],
html.dark input[type="search"],
html.dark textarea,
html.dark select{
background:var(--color-16,#fff);
color:var(--color-2,#fff);
border-color:#3a3a3a
}
html.dark .searchForm input::placeholder,
html.dark input::placeholder{
color:#9a9a9a
}
/* --- 7. Sisa temuan kontras (2026-09-24) -----------------------------------
a) .poll-count rasio 3.36 (terang) / 4.27 (gelap) — abu-abu di atas kartu.
Ambang WCAG AA untuk teks kecil = 4.5. Dinaikkan sedikit saja, tetap
mempertahankan nuansa "sekunder" dari angka polling.
b) Tautan kartu berita di atas sampul ("Nasional / 5 hari lalu / ...")
rasio 1.93–2.26 — teks di dalam kartu berlatar gambar. Diberi lapisan
gelap + bobot agar terbaca tanpa mengubah tata letak.
c) .bacaJugaExcerpt / .bn-wp rasio 2.26–3.24 — teks ringkasan; dinaikkan
ke warna teks utama.
d) Tanggal/breadcrumb "5 hari lalu", "Beranda" rasio 2.81 — metadata. */
/* Catatan: `polling-v2.css` dimuat SEBAGAI stylesheet terpisah dan aturannya
lebih spesifik, jadi tanpa !important warna ini tidak berubah (terukur:
tetap rgb(140,140,140) rasio 3.36 padahal aturan ini sudah ditulis). */
.poll-count,
.poll-percent,
.poll-total,
.widget-polling .poll-count,
.polling .poll-count{
color:#4a4a4a !important
}
html.dark .poll-count,
html.dark .poll-percent,
html.dark .poll-total,
html.dark .widget-polling .poll-count,
html.dark .polling .poll-count{
color:#bdbdbd !important
}
/* Ringkasan & teks "Baca Juga" — pakai warna teks utama, bukan abu terang. */
.bacaJugaExcerpt,
.bn-wp,
.bn-wp a{
color:var(--color-2,#000)
}
html.dark .bacaJugaExcerpt,
html.dark .bn-wp,
html.dark .bn-wp a{
color:var(--color-2,#fff)
}
/* Metadata di dalam kartu (waktu/jam) — sedikit lebih gelap. */
.cardArticle time,
.cardArticle .time,
time{
color:#5a5a5a
}
html.dark .cardArticle time,
html.dark .cardArticle .time,
html.dark time{
color:#c4c4c4
}
/* --- 8. Kontras lapis akhir (2026-09-24) -----------------------------------
Nilai TERUKUR sebelum perbaikan (getComputedStyle, bukan perkiraan):
breadcrumb/"Beranda" ... rgb(154,154,154) rasio 2.81 (wajib 4.5)
.pipBody ............. rgb(0,191,255) rasio 2.12 (biru terang)
kartu di atas sampul .. rasio 1.93–2.12 (teks di dalam gambar)
Perbaikan tanpa mengubah tata letak: hanya warna + lapisan gelap tipis. */
/* Breadcrumb / tautan "Beranda" pada header artikel. */
.breadcrumb a,
.breadcrumb li,
.headerArticle .breadcrumb a,
nav.breadcrumb a{
color:#4a4a4a
}
html.dark .breadcrumb a,
html.dark .breadcrumb li,
html.dark .headerArticle .breadcrumb a,
html.dark nav.breadcrumb a{
color:#c4c4c4
}
/* .pipBody = label "Tonton siaran langsung" (biru muda di atas kartu terang).
Dipertahankan rona biru (makna: aksi tonton) tetapi digelapkan agar lolos. */
.pipBody,
.pipBody a{
color:#0b5cab !important
}
html.dark .pipBody,
html.dark .pipBody a{
color:#7cc4ff !important
}
/* Kartu berita yang teksnya menimpa sampul: beri gradien gelap di bawah teks.
`position:relative` sudah dipakai tema; kita hanya menambah lapisan ::after
yang tidak menggeser apa pun (pointer-events:none). */
.cardArticle .wrapCardArticle,
.cardArticle .textCardArticle{
position:relative
}
.cardArticle .wrapCardArticle::after,
.cardArticle .textCardArticle::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:58%;
background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));
pointer-events:none;
z-index:1;
border-radius:0 0 4px 4px
}
/* Teks kartu dinaikkan ke atas lapisan gradien + dipaksa putih. */
.cardArticle .wrapCardArticle > *,
.cardArticle .textCardArticle > *{
position:relative;
z-index:2
}
.cardArticle .textCardArticle,
.cardArticle .textCardArticle a,
.cardArticle .textCardArticle span,
.cardArticle .wrapCardArticle a{
color:#fff !important
}
.cardArticle .textCardArticle .cardDate,
.cardArticle .textCardArticle time{
color:#e8e8e8 !important
}
/* Hanya berlaku untuk kartu yang memang punya sampul (ada ![]()
). */
.cardArticle:not(:has(img)) .wrapCardArticle::after{
background:none
}
/* --- 9. Kontras teks di atas sampul (2026-09-24) ---------------------------
Struktur nyata dari DOM live (bukan perkiraan):
<- sampul (background-image)
Teks (`kanal` + `title`) menimpa area gambar -> rasio 2.12. Diperbaiki
dengan gradien gelap di dalam kartu + teks putih, TANPA mengubah tata letak
(gradien memakai ::after absolutely-positioned, pointer-events:none). */
.widget-v-video-card{
position:relative;
display:block
}
.widget-v-video-card .widget-v-video-desc{
position:absolute;
left:0; right:0; bottom:0;
padding:10px 12px;
background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%);
z-index:3;
box-sizing:border-box
}
.widget-v-video-card .widget-v-video-kanal,
.widget-v-video-card .widget-v-video-title,
.widget-v-video-card .widget-v-video-desc *{
color:#fff !important
}
.widget-v-video-card .widget-v-video-kanal{
/* Semula #ff9aa0 -> diukur PIKEL NYATA hanya rasio 2.36 (merah muda di atas
latar abu gambar). Putih + tebal memberi rasio jauh di atas ambang tanpa
kehilangan makna "kanal". Terukur via tools/pw_piksel_kontras.py. */
color:#fff !important;
font-weight:700;
text-transform:uppercase;
font-size:11px;
letter-spacing:.3px;
text-shadow:0 1px 2px rgba(0,0,0,.75)
}
.widget-v-video-card .widget-v-video-title{
font-size:14px;
line-height:1.32;
font-weight:600;
margin:3px 0 0
}
/* Gambar kartu video: WAJIB punya tinggi nyata. `.widget-v-video-img` adalah
kosong ber-`background-image`; begitu .desc dibuat absolute, tidak ada
lagi isi yang memberi tinggi -> kartu runtuh jadi 0px (terukur: [213, 0]).
Tinggi eksplisit mengembalikan kartu ke ukuran semula. */
.widget-v-video-card .widget-v-video-img{
position:relative;
height:120px;
background-size:cover;
background-position:center
}
.widget-v-video-card{
min-height:120px
}
@media (max-width:768px){
.widget-v-video-card .widget-v-video-img{height:104px}
.widget-v-video-card{min-height:104px}
}