/* ========================================================= EKONOMISIA — gaya utama ========================================================= */ :root{ --biru-tua:#06213d; --biru:#0f5daa; --biru-terang:#1975cc; --merah:#c0392b; --kuning:#e8a33d; --abu-bg:#f4f6f8; --abu-garis:#e2e6ea; --teks:#141b26; --teks-lembut:#5a6472; --putih:#ffffff; --font-judul:"Source Serif 4", Georgia, serif; --font-ui:"Inter", -apple-system, Segoe UI, sans-serif; --maks-lebar:1280px; } *{ box-sizing:border-box; } body{ margin:0; background:var(--abu-bg); color:var(--teks); font-family:var(--font-ui); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family:var(--font-judul); margin:0 0 .4em; line-height:1.2; } ul{ margin:0; padding:0; list-style:none; } .pembungkus{ max-width:var(--maks-lebar); margin:0 auto; padding:0 20px; } .gambar-bungkus{ display:block; position:relative; } .gambar-pos{ width:100%; height:100%; object-fit:cover; } .gambar-placeholder{ background:var(--biru); } /* ---------- Bilah iklan atas ---------- */ .bilah-iklan{ background:var(--biru-tua); color:#fff; text-align:center; font-size:12px; padding:8px 0; letter-spacing:.03em; } /* ---------- Header ---------- */ .site-header{ background:var(--putih); border-bottom:1px solid var(--abu-garis); } .header-atas{ display:flex; align-items:center; padding-top:16px; padding-bottom:16px; } .site-branding{ text-align:left; } .site-title{ font-family:var(--font-judul); font-size:26px; font-weight:700; letter-spacing:.02em; margin:0; } .site-title a{ color:var(--biru-tua); } /* Batasi ukuran logo custom agar tidak tampil sebesar file aslinya */ .site-branding .custom-logo-link{ display:inline-block; } .site-branding img.custom-logo{ height:48px; width:auto; max-width:100%; display:block; } /* Logo di bilah mobile (tengah) */ .bar-mobile-judul img.custom-logo{ height:32px; width:auto; } /* ---------- Logo Mode Malam ---------- Logo yang sama dipakai di kedua mode. Saat data-tema="gelap" aktif di (lihat assets/js/main.js), filter CSS mengubah logo jadi putih polos secara otomatis — tanpa perlu unggah gambar logo kedua. */ html[data-tema="gelap"] .site-branding img.custom-logo, html[data-tema="gelap"] .bar-mobile-judul img.custom-logo{ filter: brightness(0) invert(1); } .menu-utama-bar{ background:var(--biru); position:sticky; top:0; z-index:500; box-shadow:0 2px 6px rgba(0,0,0,.12); } .menu-utama-baris{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .menu-utama{ display:flex; gap:22px; overflow-x:auto; } .menu-utama li{ position:relative; } .menu-utama li a{ display:block; padding:11px 0; color:#fff; font-size:13px; font-weight:600; white-space:nowrap; } .menu-utama li.menu-item-has-children > a::after{ content:"▾"; font-size:9px; margin-left:5px; opacity:.8; } .menu-utama li a:hover{ color:var(--kuning); } .menu-utama-aksi{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .menu-utama-aksi .btn-tema{ background:var(--putih); border-color:var(--putih); } .menu-utama-aksi .btn-tema:hover{ border-color:var(--kuning); } .kotak-cari{ display:flex; align-items:center; gap:6px; cursor:text; background:var(--putih); border-radius:16px; overflow:hidden; width:220px; padding:0 4px 0 12px; } .kotak-cari-tombol{ border:none; background:none; padding:7px 2px; font-size:13px; cursor:pointer; color:var(--teks-lembut); line-height:1; } .kotak-cari-input{ flex:1; min-width:0; border:none; background:none; outline:none; font-size:13px; font-weight:600; color:var(--teks); padding:7px 10px 7px 0; font-family:var(--font-ui); } .kotak-cari-input::placeholder{ color:var(--teks-lembut); font-weight:500; } .kotak-cari:focus-within{ box-shadow:0 0 0 2px var(--kuning); } @media (max-width: 900px){ .kotak-cari{ width:170px; } } /* Submenu (dropdown) */ .menu-utama .sub-menu{ display:none; position:absolute; top:100%; left:0; min-width:210px; background:var(--putih); border:1px solid var(--abu-garis); border-radius:2px; box-shadow:0 10px 24px rgba(0,0,0,.15); padding:6px 0; z-index:600; list-style:none; } .menu-utama li.menu-item-has-children:hover > .sub-menu, .menu-utama li.menu-item-has-children:focus-within > .sub-menu{ display:block; } .menu-utama .sub-menu li{ position:relative; } .menu-utama .sub-menu a{ padding:9px 16px; color:var(--teks); font-size:13px; font-weight:500; } .menu-utama .sub-menu a::after{ content:none; } .menu-utama .sub-menu a:hover{ background:var(--abu-bg); color:var(--biru); } .menu-utama .sub-menu .sub-menu{ top:0; left:100%; } @media (min-width: 901px){ .menu-utama{ overflow:visible; } } /* ---------- Bilah atas mobile (hamburger — logo tengah — mode malam & cari) ---------- */ .bar-mobile{ display:none; } .bar-cari-mobile{ display:none; } .drawer-overlay{ position:fixed; inset:0; background:rgba(6,33,61,.55); z-index:900; } .tombol-tutup-drawer{ display:none; background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:6px; } @media (max-width: 760px){ /* Sembunyikan bilah iklan & baris logo desktop, ganti dengan bilah mobile ringkas. */ .bilah-iklan{ display:none; } .header-atas{ display:none; } /* Header (bar-mobile) menempel di atas saat digulir, sama seperti bilah menu di desktop. */ .site-header{ position:sticky; top:0; z-index:500; box-shadow:0 2px 6px rgba(0,0,0,.12); } .bar-mobile{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--biru-tua); color:#fff; padding:10px 14px; } .tombol-ikon-bar{ background:none; border:none; color:#fff; font-size:19px; line-height:1; padding:6px; cursor:pointer; flex:none; } .bar-mobile-judul{ margin:0; flex:1; min-width:0; text-align:center; font-family:var(--font-judul); font-size:16px; font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bar-mobile-judul a{ color:#fff; } .bar-mobile-judul img{ max-height:24px; width:auto; margin:0 auto; } .bar-mobile-aksi{ display:flex; align-items:center; gap:2px; flex:none; } .bar-mobile-aksi .tombol-ikon-bar{ font-size:17px; } .bar-cari-mobile.cari-terbuka{ display:block; background:var(--biru-tua); padding:0 14px 14px; } .bar-cari-mobile .kotak-cari{ width:100%; } /* Nav utama menjadi panel (drawer) yang meluncur dari kiri. */ .menu-utama-bar{ position:fixed; top:0; left:0; height:100%; width:min(300px,82vw); transform:translateX(-100%); transition:transform .28s ease; box-shadow:0 0 28px rgba(0,0,0,.3); z-index:950; overflow-y:auto; } .menu-utama-bar.drawer-terbuka{ transform:translateX(0); } body.drawer-aktif{ overflow:hidden; } .menu-utama-baris{ flex-direction:column; align-items:stretch; padding:14px 0 28px; } .tombol-tutup-drawer{ display:block; align-self:flex-end; margin:0 14px 6px auto; } .menu-utama{ flex-direction:column; width:100%; gap:0; overflow-x:visible; padding:0 16px; } .menu-utama li a{ padding:13px 0; border-bottom:1px solid rgba(255,255,255,.15); } .menu-utama li.menu-item-has-children > a::after{ float:right; } .menu-utama .sub-menu{ position:static; display:block; background:transparent; border:none; box-shadow:none; padding:0 0 0 14px; margin-top:2px; } .menu-utama .sub-menu a{ color:#e7eefb; padding:9px 0; } .menu-utama .sub-menu .sub-menu{ left:0; } /* Tombol mode malam & kotak cari SUDAH dipindah ke bar-mobile (header), jadi versi di dalam drawer disembunyikan supaya tidak dobel di tampilan seluler. */ .menu-utama-aksi{ display:none; } } /* ---------- Judul seksi ---------- */ .judul-seksi{ display:flex; align-items:center; gap:8px; margin:36px 0 16px; font-family:var(--font-ui); font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--biru-tua); } .judul-seksi::after{ content:""; flex:1; height:1px; background:var(--abu-garis); } .judul-seksi.warna-oranye{ color:#c8600a; } .judul-seksi .panah{ font-size:18px; font-weight:900; } .judul-seksi .lihat-semua{ font-size:12px; color:var(--biru); } /* ---------- Label kategori ---------- */ .label-kategori{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--biru); margin-bottom:4px; } .label-kategori.putih{ color:#fff; } .waktu-pos{ font-size:12px; color:var(--teks-lembut); margin-top:6px; } .waktu-pos.merah{ color:var(--merah); } /* ---------- Jumlah dilihat (views) ---------- */ .meta-kartu{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:6px; } .meta-kartu .waktu-pos{ margin-top:0; } .info-dilihat{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--teks-lembut); margin-top:6px; } .meta-kartu .info-dilihat{ margin-top:0; } .info-dilihat .ikon-mata{ flex-shrink:0; opacity:.8; } .info-dilihat.putih{ color:rgba(255,255,255,.75); } .meta-artikel .info-dilihat, .daftar-headline .info-dilihat, .daftar-terbaca .info-dilihat{ margin-left:8px; margin-top:0; } /* ---------- HERO ---------- */ .hero-seksi{ display:grid; grid-template-columns:2.3fr 1fr; gap:20px; margin-top:24px; align-items:start; } .hero-utama{ background:#fff; border:none; padding:0; display:grid; grid-template-columns:3fr 4fr; gap:22px; align-items:stretch; } .hero-utama > div{ padding:18px 0 18px 18px; } .hero-utama h2{ font-size:26px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .hero-utama .ringkasan{ color:var(--teks-lembut); font-size:14px; margin:8px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hero-utama .gambar-bungkus{ display:block; height:100%; min-height:320px; overflow:hidden; } .hero-utama .gambar-bungkus img{ width:100%; height:100%; object-fit:cover; display:block; } .sub-tautan{ margin:10px 0 0; } .sub-tautan li{ position:relative; padding-left:16px; font-size:13.5px; font-weight:600; color:var(--biru); margin-bottom:6px; transition:color .25s ease; } .sub-tautan li::before{ content:"▶"; position:absolute; left:0; top:1px; font-size:9px; color:var(--biru); transition:color .25s ease; } .sub-tautan li a{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } /* Navigasi slider hero: judul aktif berubah jadi merah */ .hero-slider .sub-tautan li{ cursor:pointer; } .hero-slider .sub-tautan li.aktif, .hero-slider .sub-tautan li.aktif::before{ color:var(--merah); } .hero-slider .sub-tautan li.aktif a{ color:var(--merah); } .hero-slider .gambar-bungkus img{ transition:opacity .3s ease; } .hero-slider .gambar-bungkus img.memudar{ opacity:0; } .hero-slider > div{ transition:opacity .2s ease; } .hero-slider > div.memudar{ opacity:0; } .kotak-samping{ display:flex; flex-direction:column; gap:16px; } .kotak-fitur{ background:#eaf2fb; color:var(--teks); padding:16px; border:1px solid #d7e7f8; } .kotak-fitur .label-kategori{ color:var(--biru); } .kotak-fitur h3{ font-size:18px; color:var(--teks); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kotak-fitur .gambar-bungkus{ aspect-ratio:16/9; overflow:hidden; margin-top:10px; } .kotak-fitur .keterangan{ font-size:12.5px; color:var(--teks-lembut); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kotak-opini{ background:#fdf3ec; border-left:4px solid #c8600a; padding:16px; } .kotak-opini h4{ font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .penulis-opini{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; font-weight:600; } .avatar-bulat{ width:28px; height:28px; border-radius:50%; background:var(--biru); } /* ---------- Grid kartu berita 3 kolom ---------- */ .grid-berita{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; } .grid-berita.kolom-4{ grid-template-columns:repeat(4,1fr); } .kartu-berita{ background:#fff; border:1px solid var(--abu-garis); display:flex; flex-direction:column; } .kartu-berita .gambar-bungkus{ aspect-ratio:16/10; overflow:hidden; } .kartu-berita .isi-kartu{ padding:12px 14px 16px; flex:1; } .kartu-berita h3{ font-size:15px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .kartu-berita.tanpa-gambar .isi-kartu{ padding:14px; } .kartu-promo{ background:var(--biru); color:#fff; padding:20px; display:flex; flex-direction:column; justify-content:space-between; } .kartu-promo h3{ color:#fff; font-size:18px; } .kartu-promo .btn-terang{ background:#fff; color:var(--biru); padding:9px 16px; font-weight:700; font-size:13px; text-align:center; margin-top:10px; } .kartu-promo .btn-garis{ border:1px solid #fff; color:#fff; padding:9px 16px; font-weight:700; font-size:13px; text-align:center; margin-top:8px; } /* ---------- Gambar utama halaman single pos ---------- */ /* Mengisi penuh lebar kolom konten, disamakan dengan .isi-artikel agar tidak ada celah kosong sebelum sidebar */ .gambar-utama-pos{ margin:18px 0; max-width:100%; } .gambar-utama-pos > img, .gambar-utama-pos .gambar-pos{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:4px; } .gambar-utama-pos figcaption{ font-size:12.5px; color:var(--teks-lembut); margin-top:8px; } /* ---------- Layout dua kolom (konten + sidebar) ---------- */ .tata-dua-kolom{ display:grid; grid-template-columns:2.3fr 1fr; gap:28px; align-items:start; margin-top:24px; } /* Kolom kiri: semua section konten tersusun vertikal berurutan. */ .kolom-konten{ min-width:0; } .kolom-konten .judul-seksi:first-child{ margin-top:0; } /* Kolom kanan: sticky, semua widget sidebar tersusun rapi dengan jarak seragam. */ .kolom-sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:56px; } .kotak-widget{ background:#fff; border:1px solid var(--abu-garis); padding:16px; } .judul-kotak{ font-family:var(--font-ui); font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--biru-tua); border-bottom:2px solid var(--biru-tua); padding-bottom:8px; margin-bottom:12px; } .daftar-headline li{ padding:10px 0; border-bottom:1px solid var(--abu-garis); font-size:13.5px; font-weight:600; } .daftar-headline li:last-child{ border-bottom:none; } .daftar-headline .waktu-pos{ display:block; margin-top:4px; font-weight:400; } .daftar-terbaca{ counter-reset:baca; } .daftar-terbaca li{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--abu-garis); font-size:13.5px; font-weight:600; } .daftar-terbaca li::before{ counter-increment:baca; content:counter(baca); background:var(--biru-tua); color:#fff; width:20px; height:20px; flex:none; border-radius:2px; font-size:12px; display:flex; align-items:center; justify-content:center; } /* ---------- Sorotan khusus (panel besar bertema) ---------- */ .panel-sorotan{ background:var(--biru); color:#fff; } .panel-sorotan-utama{ padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; } .panel-sorotan-utama > div:first-child{ padding:22px 0 22px 22px; align-self:center; } .panel-sorotan-utama h2{ color:#fff; font-size:24px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .panel-sorotan .gambar-bungkus{ display:block; height:100%; min-height:280px; overflow:hidden; } .panel-sorotan .gambar-bungkus img{ width:100%; height:100%; object-fit:cover; display:block; } .kotak-info-sorotan{ background:var(--biru-tua); color:#fff; padding:18px; display:flex; flex-direction:column; justify-content:center; gap:10px; } .kotak-info-sorotan .btn-terang{ background:#fff; color:var(--biru-tua); padding:9px 16px; font-weight:700; font-size:13px; align-self:flex-start; } /* ---------- Opini ---------- */ .kartu-opini-list{ background:#fff; border:1px solid var(--abu-garis); padding:16px; } .kartu-opini-list h4{ font-size:14.5px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .penulis-mini{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--teks-lembut); } /* ---------- Data pasar ---------- */ .tabel-pasar{ width:100%; border-collapse:collapse; font-size:12.5px; } .tabel-pasar td{ padding:8px 0; border-bottom:1px solid var(--abu-garis); } .tabel-pasar td:last-child{ text-align:right; font-weight:700; } .naik{ color:#1a8a4a; } .turun{ color:var(--merah); } /* ---------- Podcast bar ---------- */ .bar-podcast{ background:var(--biru-tua); color:#fff; padding:16px; display:flex; align-items:center; gap:16px; } .bar-podcast .tombol-putar{ width:40px; height:40px; border-radius:50%; background:#fff; color:var(--biru-tua); display:flex; align-items:center; justify-content:center; flex:none; } /* ---------- Banner event ---------- */ .banner-event{ background:linear-gradient(90deg,#3a1163,#0f5daa); color:#fff; padding:26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .banner-event h3{ color:#fff; font-size:20px; } /* ---------- Konten bersponsor ---------- */ .grid-sponsor{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } /* ---------- Baris promo/iklan ganda (2 kolom) ---------- */ .baris-promo-ganda{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; } .kotak-promo-konten{ background:var(--biru); color:#fff; padding:20px; display:flex; flex-direction:column; justify-content:center; gap:8px; } .kotak-promo-konten .label-kategori{ color:#cfe4fb; } .kotak-promo-konten h3{ color:#fff; font-size:19px; } .kotak-promo-konten .tautan-selengkapnya{ font-size:13px; font-weight:700; margin-top:4px; } .kotak-iklan-mitra{ background:#e9edf1; border:1px dashed #c3cbd3; color:var(--teks-lembut); display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; min-height:160px; } .grid-sponsor .kartu-berita h3{ font-size:12.5px; } /* ---------- Footer ---------- */ .site-footer{ background:var(--biru-tua); color:#c7d3e0; margin-top:40px; } .footer-berlangganan{ text-align:center; padding:36px 20px; border-bottom:1px solid rgba(255,255,255,.12); } .footer-berlangganan h3{ color:#fff; } .footer-sosial{ display:flex; justify-content:center; gap:16px; padding:20px 0; font-size:13px; } .footer-kolom{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; padding:30px 0; } .footer-kolom h4{ color:#fff; font-family:var(--font-ui); font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; } .footer-kolom li{ padding:5px 0; font-size:13px; } .footer-bawah{ text-align:center; font-size:12px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); } /* ---------- Responsif ---------- */ @media (max-width: 900px){ .hero-seksi, .hero-utama, .tata-dua-kolom, .panel-sorotan-utama{ grid-template-columns:1fr; } .grid-berita, .grid-berita.kolom-4, .grid-sponsor, .footer-kolom{ grid-template-columns:repeat(2,1fr); } .kolom-sidebar{ position:static; } /* Kartu "yatim" (sendirian di baris terakhir karena jumlah kartu ganjil) otomatis melebar full-width, alih-alih menyisakan ruang kosong di sebelahnya. */ .grid-berita > .kartu-berita:last-child:nth-child(odd){ grid-column:1 / -1; } .grid-berita > .kartu-berita:last-child:nth-child(odd) .gambar-bungkus{ aspect-ratio:16/8; } /* Saat hero & panel bertumpuk jadi satu kolom, gambar tampil DI ATAS teks, mengikuti pola kartu berita mobile pada umumnya (gambar → label → judul → waktu). */ .hero-utama .gambar-bungkus, .panel-sorotan-utama .gambar-bungkus{ order:-1; } .hero-utama .gambar-bungkus{ height:auto; min-height:0; aspect-ratio:16/10; } .hero-utama{ gap:14px; } .hero-utama > div{ padding:0 16px 18px; } .hero-utama h2{ font-size:20px; } .hero-utama .ringkasan{ font-size:14px; } /* ---------- Footer di tampilan mobile ---------- Kolom footer jadi 1 kolom bertumpuk; tiap blok diberi garis pemisah & jarak yang seragam supaya terlihat rapi, tidak menyatu jadi satu blok teks. */ .footer-berlangganan{ padding:28px 20px; } .footer-sosial{ flex-wrap:wrap; row-gap:10px; padding:18px 14px; } .footer-kolom{ padding:4px 0; } .footer-kolom > div{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); } .footer-kolom > div:last-child{ border-bottom:none; } .footer-kolom h4{ margin-bottom:10px; } .footer-kolom li{ padding:6px 0; } .footer-bawah{ padding:16px 20px; line-height:1.5; } /* ---------- Panel biru (Pilihan Editor, Berita Bisnis, Sorotan Khusus, Opini, Gaya Hidup & Seni) — dipakai berulang di banyak section beranda. Di mobile, gambar tampil FULL-BLEED (tanpa jarak) langsung menyatu dengan kotak biru di bawahnya, dan teks di dalam kotak biru rata TENGAH — mengikuti pola portal berita editorial di perangkat seluler. */ .panel-sorotan-utama{ padding:0; gap:0; } .panel-sorotan-utama > div:first-child{ padding:22px 24px 28px; text-align:center; align-self:auto; } .panel-sorotan-utama .gambar-bungkus{ height:auto; min-height:0; aspect-ratio:16/10; } .panel-sorotan-utama .label-kategori{ display:block; } .panel-sorotan-utama h2{ text-align:center; } } @media (max-width: 560px){ /* Grid kartu berita TETAP 2 kolom (bukan 1) di layar ponsel, sesuai referensi. */ .grid-sponsor, .footer-kolom{ grid-template-columns:1fr; } .header-atas{ padding-top:12px; padding-bottom:12px; } .pembungkus{ padding:0 14px; } .grid-berita, .grid-berita.kolom-4{ gap:12px; margin-top:14px; } .kartu-berita .isi-kartu{ padding:10px 10px 14px; } .kartu-berita h3{ font-size:13.5px; margin-bottom:5px; } .label-kategori{ font-size:10px; } .waktu-pos{ font-size:11px; margin-top:4px; } .hero-utama h2{ font-size:21px; -webkit-line-clamp:4; } .hero-utama .ringkasan{ font-size:13.5px; } .hero-utama > div{ padding:0 14px 16px; } .panel-sorotan-utama > div:first-child{ padding:18px 20px 24px; } .panel-sorotan-utama h2{ font-size:19px; } } /* ========================================================= ISI ARTIKEL (Single Post) — standar editorial portal media ========================================================= */ /* Varian pil biru KHUSUS judul halaman single pos & arsip kategori (dipakai bersama .label-kategori: class="label-kategori label-kategori-pos"). Kartu berita biasa tetap memakai .label-kategori polos (teks berwarna, tanpa latar). */ .label-kategori-pos{ display:inline-block; background:var(--biru); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:2px; } .judul-pos{ font-family:var(--font-judul); font-size:34px; line-height:1.25; margin:14px 0 0; max-width:760px; } @media (max-width: 560px){ .judul-pos{ font-size:26px; } } .waktu-pos{ display:block; margin-top:10px; font-size:13px; color:var(--teks-lembut); } .gambar-utama-pos{ margin:22px 0; } .gambar-utama-pos figcaption{ font-size:13px; color:var(--teks-lembut); padding-top:8px; line-height:1.5; border-bottom:1px solid var(--abu-garis); padding-bottom:16px; } /* Remah roti (breadcrumb) */ .remah-roti{ margin:0 0 14px; text-align:left; } .remah-roti ol{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px; margin:0; padding:0; list-style:none; } .remah-roti li{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--teks-lembut); } .remah-roti a{ color:var(--teks-lembut); } .remah-roti a:hover{ color:var(--biru); text-decoration:underline; } .remah-roti span[aria-current]{ color:var(--teks); font-weight:600; } .remah-roti .pemisah{ opacity:.6; } /* Meta artikel: penulis + tanggal + waktu baca, dan tombol bagikan */ .meta-artikel{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:14px; padding-bottom:16px; border-bottom:1px solid var(--abu-garis); } .penulis-mini{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--teks); } .penulis-mini strong{ display:block; font-size:13.5px; } .penulis-mini .waktu-pos{ display:block; margin-top:2px; font-size:12px; } .avatar-penulis{ border-radius:50%; width:36px; height:36px; } .bagikan-artikel{ display:flex; align-items:center; gap:8px; } .bagikan-label{ font-size:12.5px; color:var(--teks-lembut); font-weight:600; margin-right:2px; } .tombol-bagikan{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--abu-bg); color:var(--teks-lembut); font-size:13px; font-weight:700; border:1px solid var(--abu-garis); cursor:pointer; } .tombol-bagikan:hover{ background:var(--biru); color:#fff; border-color:var(--biru); } .tombol-bagikan.salin{ font-size:14px; } /* Tag artikel */ .tag-artikel{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:30px 0 20px; } .tag-label{ font-size:12.5px; color:var(--teks-lembut); font-weight:600; } .tag-pos, .tag-artikel a{ display:inline-block; background:var(--abu-bg); border:1px solid var(--abu-garis); color:var(--teks-lembut); font-size:12.5px; padding:5px 12px; border-radius:20px; } .tag-pos:hover, .tag-artikel a:hover{ background:var(--biru); color:#fff; border-color:var(--biru); } /* Kotak biodata penulis */ .kotak-penulis{ display:flex; gap:16px; margin:28px 0; padding:20px; background:var(--abu-bg); border:1px solid var(--abu-garis); border-radius:6px; } .avatar-penulis-besar{ border-radius:50%; flex-shrink:0; width:64px; height:64px; } .kotak-penulis-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--teks-lembut); font-weight:700; } .kotak-penulis h4{ margin:2px 0 6px; font-size:17px; } .kotak-penulis p{ margin:0; font-size:13.5px; color:var(--teks-lembut); line-height:1.6; } /* Navigasi pos sebelumnya/berikutnya */ .navigasi-pos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; } .navigasi-pos-item{ border:1px solid var(--abu-garis); border-radius:6px; padding:14px 16px; } .navigasi-berikutnya{ text-align:right; } .navigasi-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--teks-lembut); font-weight:700; margin-bottom:6px; } .navigasi-pos-item a{ font-size:14px; font-weight:600; color:var(--teks); line-height:1.4; display:block; } .navigasi-pos-item a:hover{ color:var(--biru); } /* Komentar */ .area-komentar{ margin-top:36px; padding-top:24px; border-top:1px solid var(--abu-garis); } .judul-komentar{ font-size:22px; margin-bottom:18px; } .daftar-komentar{ margin:0 0 24px; } .daftar-komentar .comment-body{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--abu-garis); } .daftar-komentar .avatar{ border-radius:50%; flex-shrink:0; } .daftar-komentar .comment-author .fn{ font-style:normal; font-weight:700; font-size:14px; } .daftar-komentar .comment-metadata{ font-size:12px; color:var(--teks-lembut); margin-bottom:6px; } .daftar-komentar .comment-metadata a{ color:var(--teks-lembut); } .daftar-komentar .comment-content p{ margin:0 0 10px; font-size:14.5px; line-height:1.65; } .daftar-komentar .reply a{ font-size:12.5px; font-weight:700; color:var(--biru); } .daftar-komentar ol.children{ margin-left:20px; padding-left:20px; border-left:2px solid var(--abu-garis); list-style:none; } .komentar-ditutup{ font-size:14px; color:var(--teks-lembut); } .comment-respond{ margin-top:20px; } .comment-respond .comment-reply-title{ font-size:19px; margin-bottom:14px; } .comment-respond p{ margin:0 0 14px; } .comment-respond label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--teks-lembut); } .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea{ width:100%; border:1px solid var(--abu-garis); border-radius:4px; padding:10px 12px; font-family:var(--font-ui); font-size:14px; background:#fff; color:var(--teks); } .comment-respond textarea{ min-height:120px; resize:vertical; } .comment-respond .form-submit{ margin-top:6px; } .comment-respond .btn-terang{ display:inline-block; background:var(--biru); color:#fff; border:none; padding:11px 22px; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; } .comment-respond .btn-terang:hover{ background:var(--biru-terang); } @media (max-width: 700px){ .meta-artikel{ flex-direction:column; align-items:flex-start; } .navigasi-pos{ grid-template-columns:1fr; } .navigasi-berikutnya{ text-align:left; } .kotak-penulis{ flex-direction:column; } } .isi-artikel{ font-family:var(--font-ui); font-size:18px; line-height:1.8; color:var(--teks); max-width:100%; } /* Paragraf */ .isi-artikel p{ margin:0 0 22px; } /* Heading di dalam konten (H1 dipakai judul pos, jadi konten mulai dari H2) */ .isi-artikel h2{ font-family:var(--font-judul); font-size:28px; line-height:1.3; margin:44px 0 18px; padding-top:4px; } .isi-artikel h3{ font-family:var(--font-judul); font-size:22px; line-height:1.35; margin:36px 0 14px; } .isi-artikel h4{ font-family:var(--font-ui); font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:28px 0 12px; color:var(--biru-tua); } .isi-artikel h2:first-child, .isi-artikel h3:first-child, .isi-artikel h4:first-child{ margin-top:0; } /* Tautan dalam teks */ .isi-artikel a{ color:var(--biru); text-decoration:underline; text-decoration-color:var(--abu-garis); text-underline-offset:2px; } .isi-artikel a:hover{ text-decoration-color:var(--biru); } /* Kutipan (blockquote) */ .isi-artikel blockquote{ margin:32px 0; padding:4px 0 4px 24px; border-left:3px solid var(--biru); font-family:var(--font-judul); font-style:italic; font-size:22px; line-height:1.5; color:var(--biru-tua); } .isi-artikel blockquote p{ margin:0 0 8px; } .isi-artikel blockquote cite{ display:block; font-family:var(--font-ui); font-style:normal; font-size:13px; font-weight:600; color:var(--teks-lembut); letter-spacing:.02em; } /* Kutipan pull-quote / pertanyaan (opsional dipakai editor) */ .isi-artikel .kutipan-tarik{ margin:36px 0; padding:20px 0; border-top:1px solid var(--abu-garis); border-bottom:1px solid var(--abu-garis); text-align:center; font-family:var(--font-judul); font-size:24px; font-style:italic; line-height:1.4; color:var(--biru-tua); } /* List (ul/ol) — list-style di-reset global, dikembalikan khusus di sini */ .isi-artikel ul, .isi-artikel ol{ margin:0 0 24px; padding-left:22px; } .isi-artikel ul{ list-style:disc; } .isi-artikel ol{ list-style:decimal; } .isi-artikel li{ margin-bottom:10px; padding-left:4px; } .isi-artikel li > ul, .isi-artikel li > ol{ margin-top:10px; margin-bottom:0; } /* Gambar & keterangan di dalam konten */ .isi-artikel figure{ margin:32px 0; max-width:100% !important; /* override inline style="width:...px" dari WordPress (wp-caption) */ width:auto !important; box-sizing:border-box; } .isi-artikel img{ border-radius:2px; max-width:100%; height:auto; display:block; } .isi-artikel figcaption{ font-size:13px; color:var(--teks-lembut); line-height:1.5; margin-top:8px; max-width:100%; } /* Garis pemisah antar-bagian */ .isi-artikel hr{ border:none; border-top:1px solid var(--abu-garis); margin:40px 0; } /* Tabel data */ .isi-artikel table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; } .isi-artikel th, .isi-artikel td{ padding:10px 12px; border:1px solid var(--abu-garis); text-align:left; } .isi-artikel th{ background:var(--abu-bg); font-weight:700; font-family:var(--font-ui); } /* Kode / embed */ .isi-artikel code{ background:var(--abu-bg); padding:2px 6px; border-radius:2px; font-size:15px; } .isi-artikel .wp-block-embed, .isi-artikel iframe{ margin:32px 0; max-width:100%; } .isi-artikel .iklan-inline-artikel{ margin:28px 0; } /* Kredit/sumber di akhir teks (dipakai manual oleh editor bila perlu) */ .isi-artikel .sumber-artikel{ margin-top:32px; padding-top:16px; border-top:1px solid var(--abu-garis); font-size:13px; color:var(--teks-lembut); font-style:italic; } /* Label kecil "IKLAN" di atas kotak iklan, biar jelas kontennya sponsor/iklan */ .kotak-iklan-mitra{ position:relative; } .kotak-iklan-mitra::before{ content:"Iklan"; position:absolute; top:6px; left:8px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--teks-lembut); opacity:.7; } @media (max-width: 560px){ .isi-artikel{ font-size:16.5px; } .isi-artikel h2{ font-size:23px; margin:34px 0 14px; } .isi-artikel h3{ font-size:19px; margin:28px 0 12px; } .isi-artikel blockquote{ font-size:19px; padding-left:18px; } .isi-artikel .kutipan-tarik{ font-size:20px; } } html[data-tema="gelap"] .isi-artikel blockquote, html[data-tema="gelap"] .isi-artikel h4, html[data-tema="gelap"] .isi-artikel .kutipan-tarik{ color:#eef3f9; } html[data-tema="gelap"] .isi-artikel a{ color:#5aa9ec; } html[data-tema="gelap"] .isi-artikel th{ background:#182230; } html[data-tema="gelap"] .isi-artikel th, html[data-tema="gelap"] .isi-artikel td, html[data-tema="gelap"] .isi-artikel hr, html[data-tema="gelap"] .isi-artikel .sumber-artikel{ border-color:#28374a; } /* ========================================================= MODE MALAM (Dark Mode) Diaktifkan lewat atribut data-tema="gelap" pada elemen (diatur oleh JS di assets/js/main.js, tersimpan di localStorage). ========================================================= */ html[data-tema="gelap"]{ --abu-bg:#10151c; --abu-garis:#2b333d; --teks:#e7ebf0; --teks-lembut:#98a3b0; --putih:#1a2029; } /* Transisi halus saat berpindah tema */ body, .site-header, .menu-utama-bar, .kartu-berita, .kotak-widget, .kotak-fitur, .kotak-opini, .kartu-opini-list, .kotak-iklan-mitra, .btn-tema, .bilah-iklan{ transition:background-color .2s ease, color .2s ease, border-color .2s ease; } html[data-tema="gelap"] .bilah-iklan{ background:#000; } html[data-tema="gelap"] .site-header{ background:var(--putih); border-color:var(--abu-garis); } html[data-tema="gelap"] .site-title a{ color:#eef3f9; } html[data-tema="gelap"] .kartu-berita, html[data-tema="gelap"] .kotak-widget, html[data-tema="gelap"] .kartu-opini-list{ background:var(--putih); border-color:var(--abu-garis); } html[data-tema="gelap"] .kartu-berita h3 a, html[data-tema="gelap"] .kotak-fitur h3{ color:var(--teks); } /* FIX: latar hero (slider judul utama) sebelumnya selalu putih (#fff) tanpa memandang mode, sementara teksnya ikut memakai var(--teks) yang di mode malam berubah jadi terang — akibatnya judul/ringkasan hero jadi tak terbaca (teks terang di atas latar putih). Samakan dengan kartu berita. */ html[data-tema="gelap"] .hero-utama{ background:var(--putih); } html[data-tema="gelap"] .kotak-fitur{ background:#182230; border-color:#28374a; } html[data-tema="gelap"] .kotak-opini{ background:#2a2015; border-left-color:#c8600a; } html[data-tema="gelap"] .kotak-iklan-mitra{ background:#171c23; border-color:#333d48; color:var(--teks-lembut); } html[data-tema="gelap"] .judul-kotak{ color:#eef3f9; border-bottom-color:#3a4451; } html[data-tema="gelap"] .daftar-terbaca li::before{ background:#28425f; } html[data-tema="gelap"] .naik{ color:#3fb673; } html[data-tema="gelap"] .turun{ color:#e2685a; } /* Dark mode: elemen baru single post (meta, bagikan, tag, kotak penulis, navigasi, komentar) */ html[data-tema="gelap"] .meta-artikel, html[data-tema="gelap"] .gambar-utama-pos figcaption{ border-color:#28374a; } html[data-tema="gelap"] .tombol-bagikan{ background:#182230; border-color:#28374a; color:var(--teks-lembut); } html[data-tema="gelap"] .tag-pos, html[data-tema="gelap"] .tag-artikel a{ background:#182230; border-color:#28374a; color:var(--teks-lembut); } html[data-tema="gelap"] .kotak-penulis{ background:#182230; border-color:#28374a; } html[data-tema="gelap"] .navigasi-pos-item{ border-color:#28374a; } html[data-tema="gelap"] .area-komentar{ border-color:#28374a; } html[data-tema="gelap"] .daftar-komentar .comment-body, html[data-tema="gelap"] .daftar-komentar ol.children{ border-color:#28374a; } html[data-tema="gelap"] .comment-respond input[type="text"], html[data-tema="gelap"] .comment-respond input[type="email"], html[data-tema="gelap"] .comment-respond input[type="url"], html[data-tema="gelap"] .comment-respond textarea{ background:#182230; border-color:#28374a; color:var(--teks); } html[data-tema="gelap"] .remah-roti a{ color:var(--teks-lembut); } html[data-tema="gelap"] .remah-roti span[aria-current]{ color:#eef3f9; } /* Tombol Mode Malam */ .btn-tema{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:transparent; border:1px solid var(--abu-garis); cursor:pointer; font-size:14px; padding:0; } .btn-tema:hover{ border-color:var(--biru); } html[data-tema="gelap"] .btn-tema{ border-color:#3a4451; } html[data-tema="gelap"] .btn-tema:hover{ border-color:var(--kuning); }