/* ============================================================ GLOBAL-NEW.CSS - Reset, Token, & Dasar Halaman Media Positif | direvisi 17 Juli 2026 ============================================================ >>> STANDAR BREAKPOINT SITUS <<< Hanya 4 angka ini yang boleh dipakai di seluruh situs. Setiap angka punya ALASAN, bukan asal pilih: 1200px Lebar minimum yang dibutuhkan menu horizontal penuh (logo + 5 menu + tombol = ~1190px). Di bawah ini, header wajib pakai hamburger - kalau tidak, dia meluber keluar layar dan bikin scrollbar horizontal. Dipakai di: header-new.css [10] & [11] 991px Titik di mana sidebar 360px tidak lagi nyaman berdampingan dengan kolom artikel. Di bawah ini sidebar turun ke bawah konten. Dipakai di: index-new.css [7], slidernews-new.css [9] 767px Batas HP. Menu akun berubah jadi bottom sheet, overlay slider jadi selebar layar. Dipakai di: global-new.css [10], header-new.css [12], slidernews-new.css [10] & [12] 480px HP kecil. Dipakai di: global-new.css [11], slidernews-new.css [11] PENTING: tidak semua file pakai semua angka. Header pakai 1200 & 767 tapi TIDAK pakai 991. Itu disengaja - kendala header adalah lebar teks menu, kendala grid adalah lebar sidebar. Beda soal, beda angka. Yang salah bukan "punya angka berbeda", tapi "punya angka acak tanpa alasan" - itu penyakit lama kita. Kalau butuh titik baru, tulis alasannya di sini dulu. ------------------------------------------------------------ CATATAN PERUBAHAN 17 Juli 2026: [A] .container sekarang HANYA didefinisikan di file ini. Definisi kembar di index-new.css sudah dihapus. [B] Angka lebar dipindah ke variabel --container-max di :root supaya bisa diubah dari satu tempat saja. [C] Breakpoint 768px -> 767px (ikut standar). [D] Padding container di HP kecil dipindah ke sini dari index-new.css (perilaku tetap sama). ============================================================ */ /* ====== [0] TOKEN - Nilai yang dipakai berulang ============== Ini "variabel" CSS. Ubah di sini, semua file ikut berubah. Cara pakai: var(--nama-token) ============================================================ */ :root { /* Lebar maksimal konten. SLIDER JUGA IKUT ANGKA INI. */ --container-max: 1200px; /* Jarak aman kiri-kanan konten */ --container-pad: 1.5rem; --container-pad-hp: 1rem; --container-pad-hp-kecil: 0.75rem; /* Warna merek */ --brand: #006cd8; --brand-dark: #005bb5; /* ============================================================ FONT SITUS - SATU SUMBER UNTUK SEMUA (ditambah 18 Juli 2026) ------------------------------------------------------------ Ini jawaban keluhan "font berubah-ubah tiap layar/halaman". Dulu tiap file CSS menulis font sendiri (detailberita pakai Inter, slide_kategori pakai Georgia, sisanya Trebuchet) - jadi tiap halaman tampil beda. Sekarang SEMUA file memakai var(--mp-font). Tidak mungkin lagi ada yang beda sendiri. Onest = pengganti gratis Proxima Nova (font Psychology Today). 'Trebuchet MS' jadi cadangan kalau Onest gagal dimuat. >> GANTI FONT SELURUH SITUS = ubah SATU baris ini saja. >> Onest harus dimuat di tiap halaman. header-new.php sudah mengurusnya. ============================================================ */ --mp-font: 'Onest', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ====== [1] RESET CSS ====== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ====== [2] BODY - Dasar Halaman ====== */ body { font-family: var(--mp-font); font-size: 1rem; line-height: 1.4; /* ⚠️⚠️ MASALAH BELUM DIPERBAIKI - JANGAN LUPA ⚠️⚠️ color putih + background putih = teks tak terlihat. Semua teks yang tidak menyetel warnanya sendiri akan hilang. BELUM diubah karena perlu cek dulu footer.php, trending-new.php, kesehatan-new.php, dan kategori-new.css - takut ada komponen berlatar gelap yang mengandalkan warna putih warisan dari sini. Rencana: ganti jadi color: #1a1a1a setelah pengecekan. */ color: #ffffff; background-color: #ffffff; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ====== [3] TYPOGRAPHY ====== */ h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; } h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; } h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; } h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; } p { margin-bottom: 1rem; } /* ====== [4] LINK ====== */ a { color: var(--brand); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--brand-dark); } /* ====== [5] CONTAINER - Pembatas Lebar Konten ================= >>> INI SATU-SATUNYA DEFINISI .container DI SELURUH SITUS <<< Jangan tulis ulang .container di file CSS lain. Kalau ditulis ulang, dua-duanya akan berebut dan hasilnya tergantung urutan pemuatan file - persis penyakit yang baru kita sembuhkan. ============================================================== */ .container { width: 100%; /* Angka 1200px di belakang koma itu NILAI CADANGAN. Dipakai kalau --container-max entah kenapa tidak sampai (misalnya blok :root di atas hilang, atau file ini tertimpa isi file lain). Tanpa cadangan ini, var() yang kosong membuat SELURUH baris max-width dibuang browser -> .container melebar penuh selayar, dan kamu bingung kenapa kontennya melar. Kejadian nyata 17 Juli 2026: file index-new.css ternyata berisi isi header-new.css. Sejak itu setiap var() penting diberi cadangan. */ max-width: var(--container-max, 1200px); margin: 0 auto; /* auto = otomatis di tengah */ padding: 0 var(--container-pad, 1.5rem); } /* ====== [6] GAMBAR RESPONSIF ====== */ img { max-width: 100%; height: auto; display: block; } /* ====== [7] BUTTON GLOBAL ====== */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 400; cursor: pointer; transition: all 0.3s ease; border: none; font-family: var(--mp-font); } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 108, 216, 0.3); } /* ====== [8] SECTION SPACING ================================== ⚠️ CATATAN: ".section" itu nama yang sangat umum. Nama ini juga dipakai di dalam menu hamburger (header-new.php). Untungnya header-new.css memakai ".menu-popup .section" yang lebih spesifik, jadi tidak bentrok. Tapi hati-hati kalau menambah ".section" baru. ============================================================== */ .section { margin-bottom: 3rem; } /* ============================================================ RESPONSIVE - mengikuti standar breakpoint di atas ============================================================ */ /* ====== [9] TABLET KE BAWAH (max-width: 991px) ====== */ /* Sengaja dikosongkan. Tipografi dasar masih nyaman dibaca di tablet. Kalau nanti perlu, tulis di sini - JANGAN bikin media query dengan angka lain. */ /* ====== [10] HP KE BAWAH (max-width: 767px) ====== */ @media (max-width: 767px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } .container { padding: 0 var(--container-pad-hp); } } /* ====== [11] HP KECIL (max-width: 480px) ====== */ @media (max-width: 480px) { .container { padding: 0 var(--container-pad-hp-kecil); } }