/* ============================================================ HEADER-NEW.CSS - Header Media Positif Dibangun ulang 17 Juli 2026 Berpasangan dengan header-new.php - jangan pakai salah satu saja. ============================================================ >>> ATURAN NAMA <<< SEMUA nama kelas di file ini berawalan "mp-". Ini bukan hiasan. Versi lama memakai nama umum (.topbar, .nav-menu, .btn-action) yang ternyata juga dipakai file CSS lain di situs ini - itu sebabnya tombol Cari jadi biru dan Daftar/ Masuk hilang, padahal tidak ada aturan di sini yang menyuruhnya. Dengan awalan mp-, tidak ada file lama yang bisa menyentuh header. JANGAN tambahkan nama tanpa awalan mp- ke file ini. JANGAN pakai awalan mp- di file lain. ------------------------------------------------------------ >>> BREAKPOINT FILE INI <<< @media (min-width: 1200px) menu horizontal tampil, hamburger hilang @media (max-width: 1199px) hamburger tampil, menu horizontal hilang @media (max-width: 767px) menu akun jadi bottom sheet @media (max-width: 480px) pengetatan jarak di HP kecil Angka 1200 diukur, bukan disalin: logo + 5 menu + tombol butuh ~1190px. Di bawah itu menu horizontal pasti meluber keluar layar. Kebetulan sama dengan --container-max di global-new.css - memang sengaja, kalau layar lebih sempit dari konten, header juga tidak punya ruang. Angka 767 WAJIB sama dengan MP_HP di header-new.php. ------------------------------------------------------------ >>> KENAPA TIDAK PERNAH MELUBER LAGI <<< Tiga lapis pengaman: 1. Kolom logo & aksi pakai minmax(0, 1fr) - boleh menyusut. 2. Logo pakai max-width:100% - ikut mengecil kalau ruang sempit, TIDAK memaksa halaman melebar. 3. Menu horizontal hanya hidup di atas 1200px. Jadi walau tebakan lebar saya meleset, yang terjadi paling buruk logonya sedikit mengecil - bukan scrollbar horizontal. ============================================================ */ /* ====== [0] TOKEN KHUSUS HEADER ============================== --brand & --brand-dark diwarisi dari global-new.css [0]. Yang di bawah ini khusus header saja. ⚠️ KENAPA DI :root, BUKAN DI .mp-header? Karena drawer, bottom sheet, dan popup pencarian letaknya DI LUAR .mp-header di dalam HTML - mereka elemen sejajar, bukan anak. Variabel CSS hanya menurun ke ANAK. Kalau token ditaruh di .mp-header, drawer tidak kebagian --mp-teks, lalu mewarisi warna dari body - yang saat ini PUTIH. Drawer berlatar putih. Hasilnya: semua tulisan di drawer hilang. Di :root, token sampai ke seluruh halaman. Aman. ============================================================ */ :root { --mp-tinggi-logo: 2.75rem; /* 44px - dinaikkan 19 Juli, logo lebih hadir spt PT */ --mp-teks: #1a1a1a; --mp-teks-lembut: #5a6472; --mp-garis: #e6e8ec; --mp-hover: #f2f6fb; --mp-radius: 0.5rem; } /* Jaring pengaman kedua: warna teks dipaksa gelap di ketiga panel ini, tidak bergantung pada body. Selama body masih "color: #ffffff" (lihat catatan di global-new.css), ini yang menahan tulisan drawer agar tetap terlihat. */ .mp-drawer, .mp-sheet, .mp-search-box { color: var(--mp-teks); } /* ============================================================ [1] KERANGKA TOPBAR ============================================================ */ /* ============================================================ HEADER STICKY (tertahan saat scroll) - diperbaiki 18 Juli 2026 ------------------------------------------------------------ .mp-header SUDAH sticky sejak awal. Tapi di index.php & kategori.php dia dibungkus

. Elemen sticky menempel relatif terhadap INDUKNYA - dan .site-header itu pendek (setinggi header saja). Jadi begitu scroll melewati .site-header, header ikut hilang. Sticky-nya benar, penjaranya yang salah. Perbaikan: .site-header dibuat "display: contents" - kotaknya menghilang, .mp-header naik jadi anak langsung /.page-wrapper, jadi sticky-nya menempel ke seluruh halaman. Tidak perlu ubah HTML. Kalau suatu halaman TIDAK membungkus dengan .site-header, aturan di bawah tidak berpengaruh apa-apa - aman. */ .site-header { display: contents; } .mp-header { position: sticky; top: 0; z-index: 900; } .mp-topbar { background: #fff; border-bottom: 1px solid var(--mp-garis); } /* Bagian dalam dibatasi selebar konten & ditengahkan, supaya logo sejajar dengan tepi kiri slider dan kolom artikel di bawahnya. Bar putihnya sendiri tetap selebar layar penuh. */ .mp-topbar-inner { max-width: var(--container-max, 1200px); margin: 0 auto; /* Padding atas-bawah: 0.625 -> 1 -> 1.5rem (19 Juli). Dinaikkan lagi karena header masih terasa sempit. PT punya ruang putih lega di atas-bawah logo; ini menyamainya. */ padding: 1.5rem 1.5rem; /* Tampilan dasar = mode hamburger (dipakai di bawah 1200px). Mode desktop menimpanya di bagian [9]. */ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .mp-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; /* izinkan menyusut - kunci anti-meluber */ } .mp-brand { display: block; min-width: 0; line-height: 0; } /* Logo boleh mengecil kalau ruang sempit, tapi tidak boleh melebihi --mp-tinggi-logo. Inilah yang membuat header tidak pernah memaksa halaman melebar. */ .mp-brand img { max-height: var(--mp-tinggi-logo); max-width: 100%; width: auto; height: auto; } /* ============================================================ [2] HAMBURGER (KIRI, ala Psychology Today) ============================================================ */ .mp-burger { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--mp-radius); background: transparent; color: var(--mp-teks); font-size: 1.25rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .mp-burger:hover { background: var(--mp-hover); color: var(--brand, #006cd8); } /* ============================================================ [3] MENU HORIZONTAL (hanya hidup di >= 1200px, lihat [9]) ============================================================ */ .mp-nav { display: none; /* dinyalakan di bagian [9] */ align-items: center; gap: 0.125rem; } .mp-nav-item { position: relative; } /* Ukuran huruf 0.9375rem (15px), bukan 16px. Diturunkan sesuai permintaanmu supaya kelima menu tidak berdesakan saat di tengah. */ .mp-nav-link { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem; color: var(--mp-teks); text-decoration: none; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; transition: color 0.2s ease; } .mp-nav-link:hover { color: var(--brand, #006cd8); } .mp-nav-link i { font-size: 0.8125rem; color: #02b0aa; } /* --- Dropdown desktop --- */ .mp-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 12.5rem; padding: 0.5rem 0; background: #fff; border: 1px solid var(--mp-garis); border-radius: var(--mp-radius); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); z-index: 910; } .mp-nav-item:hover .mp-dropdown, .mp-nav-item:focus-within .mp-dropdown { display: block; } .mp-dropdown a { display: block; padding: 0.625rem 1.25rem; color: #333; font-size: 0.9375rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .mp-dropdown a:hover { background: var(--mp-hover); color: var(--brand, #006cd8); } /* ============================================================ [4] AKSI KANAN - Daftar / Masuk / Cari Tidak ada satu pun aturan display:none di sini, di breakpoint mana pun. Daftar & Masuk tampil di SEMUA ukuran layar. ============================================================ */ .mp-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .mp-auth-link { color: var(--brand, #006cd8); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 0.25rem 0.125rem; transition: color 0.2s ease; } .mp-auth-link:hover { color: var(--brand-dark, #005bb5); text-decoration: underline; } .mp-sep { color: #cbd5e0; font-weight: 300; user-select: none; } .mp-search-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.375rem; height: 2.375rem; border: 1px solid var(--mp-garis); border-radius: var(--mp-radius); background: transparent; /* BUKAN biru. Kalau tampil biru, berarti file ini belum termuat. */ color: var(--mp-teks-lembut); font-size: 0.9375rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .mp-search-btn:hover { border-color: var(--brand, #006cd8); color: var(--brand, #006cd8); } /* ============================================================ [5] AVATAR & MENU AKUN (kalau sudah login) ============================================================ */ .mp-avatar-wrap { position: relative; } .mp-avatar { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand, #006cd8), var(--brand-dark, #005bb5)); color: #fff; font-size: 0.8125rem; font-weight: 700; cursor: pointer; user-select: none; } .mp-usermenu { display: none; position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 13.75rem; background: #fff; border: 1px solid var(--mp-garis); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12); overflow: hidden; z-index: 920; } .mp-usermenu.is-open { display: block; } .mp-usermenu-head { padding: 1rem; background: linear-gradient(135deg, var(--brand, #006cd8), var(--brand-dark, #005bb5)); color: #fff; } .mp-usermenu-name { font-weight: 600; font-size: 0.9375rem; word-break: break-word; } .mp-usermenu-email { font-size: 0.8125rem; opacity: 0.9; word-break: break-all; } .mp-usermenu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: #333; text-decoration: none; border-bottom: 1px solid #f2f2f2; transition: background 0.15s ease; } .mp-usermenu-item:last-child { border-bottom: none; } .mp-usermenu-item:hover { background: var(--mp-hover); } .mp-usermenu-item i { width: 1.25rem; color: var(--brand, #006cd8); } .mp-usermenu-out, .mp-usermenu-out i { color: #dc3545; } /* ============================================================ [6] DRAWER - panel geser dari kiri (ala Psychology Today) ============================================================ */ .mp-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.25s ease; z-index: 1000; } .mp-drawer-overlay.is-open { opacity: 1; } .mp-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(23.75rem, 85vw); /* 380px, tapi tidak lebih dari 85% layar */ background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); /* parkir di luar layar kiri */ transition: transform 0.28s ease; z-index: 1001; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15); } /* ====== [10b] Daftar/Masuk di drawer - BAWAAN SEMBUNYI ======== DIPINDAH KE SINI 20 Juli (sebelumnya salah taruh SETELAH @media 767, sehingga menimpa aturan HP dan bikin Daftar/Masuk hilang - komplain bos). Di tablet & desktop, Daftar/Masuk sudah tampil di header, jadi yang di dalam drawer disembunyikan. Dinyalakan HANYA di HP lewat @media (max-width: 767px) di bawah - dan karena aturan itu datang SETELAH baris ini, dia menang di layar HP. Urutan = kuncinya. */ .mp-drawer-auth { display: none; border-bottom: 1px solid var(--mp-garis); margin-bottom: 0.25rem; padding-bottom: 0.25rem; } .mp-drawer.is-open { transform: translateX(0); } /* --- Kepala drawer: tombol kembali + logo --- */ .mp-drawer-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mp-garis); flex: 0 0 auto; } .mp-drawer-back { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: none; border-radius: 50%; background: transparent; color: var(--mp-teks); font-size: 1rem; cursor: pointer; transition: background 0.2s ease; } .mp-drawer-back:hover { background: var(--mp-hover); } .mp-drawer-logo { max-height: 2.25rem; max-width: 100%; width: auto; height: auto; } /* --- Badan drawer: tempat panel-panel bertumpuk --- */ .mp-drawer-body { position: relative; flex: 1; overflow: hidden; } /* Semua panel menumpuk di posisi sama. Panel submenu diparkir di kanan (translateX 100%), lalu menggeser masuk menutupi panel akar saat dibuka. Panel akar sendiri diam di tempat. */ .mp-drawer-panel { position: absolute; inset: 0; overflow-y: auto; padding: 0.75rem 0; background: #fff; transform: translateX(100%); transition: transform 0.28s ease; z-index: 2; } .mp-drawer-root { transform: translateX(0); z-index: 1; /* selalu di bawah panel submenu */ } .mp-drawer-panel.is-open { transform: translateX(0); } /* --- Baris menu di dalam drawer --- */ .mp-row { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.9375rem 1.25rem; border: none; border-bottom: 1px solid #f2f2f2; background: transparent; color: var(--mp-teks); font-family: inherit; font-size: 1rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .mp-row:hover { background: var(--mp-hover); } .mp-row-icon { width: 1.375rem; flex: 0 0 auto; font-size: 1rem; color: var(--brand, #006cd8); text-align: center; } .mp-row-label { flex: 1; min-width: 0; } .mp-row-arrow { flex: 0 0 auto; font-size: 0.8125rem; color: #9aa4b2; } .mp-row-all { color: var(--brand, #006cd8); } /* Submenu tanpa ikon -> beri jarak masuk agar hirarkinya terbaca */ .mp-row-sub { padding-left: 3.5rem; font-weight: 400; } .mp-row-out, .mp-row-out .mp-row-icon { color: #dc3545; } /* Kunci gulir halaman selagi drawer / bottom sheet terbuka. Tanpa ini, halaman di belakang ikut tergulir saat jari digeser. */ body.mp-no-scroll { overflow: hidden; } /* ============================================================ [7] BOTTOM SHEET - menu akun di HP ============================================================ */ .mp-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; } .mp-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -0.25rem 1.5rem rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform 0.28s ease; z-index: 1001; } .mp-sheet.is-open { transform: translateY(0); } .mp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid var(--mp-garis); } .mp-sheet-title { font-weight: 600; font-size: 1rem; } .mp-sheet-close { width: 2rem; height: 2rem; border: none; border-radius: 50%; background: #f0f0f0; font-size: 1.25rem; line-height: 1; cursor: pointer; } .mp-sheet-body { padding: 0.5rem 0 1.25rem; } .mp-sheet-user { margin: 0 1.25rem 0.75rem; padding: 0.75rem; background: #f8f9fa; border-radius: var(--mp-radius); } .mp-sheet-name { font-weight: 600; color: #333; word-break: break-word; } .mp-sheet-email { font-size: 0.8125rem; color: #666; word-break: break-all; } /* ============================================================ [8] POPUP PENCARIAN ============================================================ */ .mp-search-modal { position: fixed; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 5rem 1rem 1rem; background: rgba(0, 0, 0, 0.45); z-index: 1100; } /* Atribut hidden bawaan HTML kalah dari display:flex di atas. Baris ini yang membuatnya benar-benar tersembunyi. */ .mp-search-modal[hidden] { display: none; } .mp-search-box { width: 100%; max-width: 31.25rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); overflow: hidden; } .mp-search-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mp-garis); } .mp-search-head h3 { margin: 0; font-size: 1rem; color: var(--mp-teks); } .mp-search-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: #666; cursor: pointer; } .mp-search-input { width: 100%; padding: 0.75rem 1.25rem; border: none; border-bottom: 1px solid var(--mp-garis); font-family: inherit; font-size: 0.9375rem; color: var(--mp-teks); outline: none; } .mp-search-results { max-height: 18.75rem; overflow-y: auto; padding: 0.5rem 1.25rem 1rem; } .mp-search-item { display: block; padding: 0.625rem 0; border-bottom: 1px solid #f2f2f2; color: #333; text-decoration: none; } .mp-search-item:hover { background: #f8f9fa; } .mp-search-item-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; } .mp-search-item-date { font-size: 0.75rem; color: #666; } .mp-search-note { padding: 1.25rem; text-align: center; font-size: 0.875rem; color: #666; } /* ============================================================ RESPONSIVE ============================================================ */ /* ====== [9] DESKTOP (min-width: 1200px) ====================== Menu horizontal tampil DI TENGAH, hamburger disembunyikan. Rahasianya di grid 3 kolom: 1fr | auto | 1fr. Kolom kiri & kanan mendapat sisa ruang SAMA BESAR, jadi kolom tengah (menu) jatuh persis di titik tengah layar. Kalau pakai flex biasa, menu cuma akan "di tengah sisa ruang" - kelihatan geser ke kanan karena logo lebih lebar dari tombol. minmax(0, 1fr) - bukan 1fr - supaya kolom BOLEH menyusut di bawah lebar isinya. Itu yang mencegah logo memaksa halaman melebar seperti kejadian kemarin. ============================================================== */ @media (min-width: 1200px) { .mp-topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } .mp-burger { display: none; } .mp-nav { display: flex; justify-self: center; } .mp-actions { justify-self: end; } } /* ====== [10] MODE HAMBURGER (max-width: 1199px) ============== Tidak ada aturan apa pun di sini - dan itu disengaja. Tampilan dasar di bagian [1]-[5] MEMANG sudah mode hamburger: .mp-nav bawaannya display:none, .mp-burger bawaannya tampil. Bagian [9] yang menimpanya jadi mode desktop. Cara ini lebih aman daripada tulis dua blok yang saling membatalkan - itu persis penyakit versi lama, di mana zona 900-991px kena dua aturan sekaligus dan tombol Cari jadi beda sendiri. Kalau cuma satu blok yang bicara, tidak ada yang bisa bertengkar. ============================================================== */ /* ====== [11] HP (max-width: 767px) =========================== Angka ini WAJIB sama dengan MP_HP di header-new.php. ============================================================== */ @media (max-width: 767px) { /* ============================================================ LOGO DI TENGAH (KHUSUS HP) - ditambah 18 Juli 2026 ------------------------------------------------------------ Permintaan: di HP, logo di tengah seperti Psychology Today. Cara: ubah baris header jadi grid 3 kolom -> [kiri] [logo] [kanan]. Kolom kiri (hamburger) & kanan (Cari) dibuat SAMA LEBAR dengan "1fr" masing-masing, jadi kolom tengah (logo) jatuh persis di titik tengah LAYAR - bukan sekadar "tengah sisa ruang". Kenapa grid, bukan "margin: auto" biasa? Karena hamburger dan ikon Cari tidak sama lebar. Kalau pakai margin auto, logo akan geser sedikit ke arah sisi yang lebih kosong. Grid dengan dua "1fr" memaksa kedua sisi punya lebar cadangan yang sama, jadi logo benar-benar center. Trik yang sama dipakai menu-tengah di desktop (bagian [9]). Berlaku HANYA di HP. Di tablet & desktop, header tetap seperti semula (logo kiri). --> ============================================================ */ .mp-topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* padding atas-bawah dinaikkan 0.5 -> 0.875rem: header lebih tinggi, logo punya ruang napas. Kiri-kanan tetap 1rem. */ padding: 0.875rem 1rem; } /* .mp-left "menghilang" sebagai kotak - hamburger & logo di dalamnya naik jadi item grid LANGSUNG. Dengan begitu HTML tidak perlu diubah sama sekali (aman untuk desktop), tapi ketiga elemen tetap bisa ditata di grid 3 kolom. display:contents = "jangan gambar kotak ini, tapi tampilkan isinya seolah anak langsung dari induk grid". */ .mp-left { display: contents; } /* Hamburger: kolom kiri, rata kiri. */ .mp-burger { grid-column: 1; justify-self: start; } /* Logo: kolom TENGAH, benar-benar di titik tengah layar. */ .mp-brand { grid-column: 2; justify-self: center; } /* Ikon Cari / avatar: kolom kanan, rata kanan. */ .mp-actions { grid-column: 3; justify-self: end; } :root { /* Dinaikkan 18 Juli: 2rem -> 2.5rem. Bos minta logo sedikit lebih besar & header lebih lapang, meniru Psychology Today. */ --mp-tinggi-logo: 2.5rem; /* 40px */ } /* Menu akun pindah ke bottom sheet, dropdown dimatikan. ".is-open" WAJIB ikut disebut: tanpa itu, ".mp-usermenu.is-open" (2 nama kelas) lebih kuat dari ".mp-usermenu" (1 nama kelas) dan dropdown tetap nongol di HP. */ .mp-usermenu, .mp-usermenu.is-open { display: none; } /* ⚠️ PERMINTAAN BOS: di HP, Daftar & Masuk pindah ke hamburger. */ .mp-auth-link, .mp-sep { display: none; } .mp-drawer-auth { display: block; } .mp-search-modal { padding-top: 3rem; } } /* ====== [11b] Daftar/Masuk di drawer - detail gaya ========== CATATAN 20 Juli: aturan "display: none" bawaan DIPINDAH ke ATAS (sebelum @media 767), lihat blok [10b]. Dulu ada di SINI - setelah @media 767 - sehingga menimpa "display: block" milik HP dan bikin Daftar/Masuk hilang dari hamburger. Ini yang dikomplain bos. Sekarang di sini tinggal detail warna ikonnya saja. */ .mp-drawer-auth .mp-row-icon { color: var(--brand, #006cd8); } /* ====== [12] HP KECIL (max-width: 480px) ====================== */ @media (max-width: 480px) { .mp-topbar-inner { padding: 0.5rem 0.75rem; gap: 0.5rem; } .mp-actions { gap: 0.375rem; } /* Sedikit dirapatkan supaya Daftar & Masuk tetap muat berdampingan dengan logo dan hamburger di layar 320px. Mereka TIDAK disembunyikan - itu permintaanmu. */ .mp-auth-link { font-size: 0.875rem; } .mp-search-btn, .mp-avatar { width: 2.125rem; height: 2.125rem; } .mp-burger { width: 2.125rem; height: 2.125rem; } }