/* ========================================================================= 🔒 GLOBAL LOCK FILE — DO NOT EDIT! Posisi Link diinject PALING TERAKHIR di sebelum Specificity TERTINGGI (html body) + !important SEMUA rule ============================================================== Mengunci 5 area agar TIDAK BERUBAH meskipun file CSS lain diedit: 1. HEADER MOBILE (≤420px + ≤375px) 2. BOTTOM NAV VISIBILITY (show 0-1023px, hide ≥1024px) 3. STICKY SIDEBAR (mobile drawer + desktop 230/80px) 4. CONTENT AREA desktop (KIRI TETAP 250px, KANAN LEGA 40px) 5. FOOTER PADDING SIMETRIS (hindari double padding) ========================================================================= */ /* ========================================================================= 1️⃣ HEADER MOBILE LOCK (≤420px + ≤375px) ========================================================================= */ /* ---------------- (A) ≤420px iPhone12/Fold kecil ---------------- */ html body @media (max-width: 420px) { html body .app-header .menu-toggle, html body .app-header #menu-toggle { display: none !important; opacity: 0 !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; position: absolute !important; left: -9999px !important; pointer-events: none !important; } html body .app-header .header-inner { height: 60px !important; padding-left: 6px !important; padding-right: 8px !important; gap: 6px !important; } html body .app-header .header-spacer { height: 60px !important; } html body .app-header .brand { margin-left: 3px !important; padding-left: 0 !important; transform: translateY(-1px) scale(1.04) !important; transform-origin: left center !important; max-width: 150px !important; flex-shrink: 9999 !important; overflow: hidden !important; } html body .app-header .brand-wordmark { font-size: 1.32rem !important; letter-spacing: -0.025em !important; white-space: nowrap !important; } html body .app-header .search-btn { margin-left: auto !important; margin-right: 2px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; padding: 0 !important; border-radius: 9px !important; color: var(--color-text-secondary) !important; background: transparent !important; border: 1px solid transparent !important; flex-shrink: 0 !important; } html body .app-header .search-btn svg { width: 17px !important; height: 17px !important; stroke-width: 2.1 !important; } html body .app-header .header-actions { gap: 5px !important; margin-left: 0 !important; flex-shrink: 0 !important; } html body .app-header #header-register-btn.btn-primary, html body .app-header #header-login-btn.btn-outline { height: 34px !important; min-height: 34px !important; padding: 0 10px !important; font-size: 0.78rem !important; border-radius: 11px !important; gap: 4px !important; line-height: 1 !important; } html body .app-header #header-register-btn.btn-primary svg, html body .app-header #header-login-btn.btn-outline svg { width: 12px !important; height: 12px !important; stroke-width: 2.2 !important; flex-shrink: 0 !important; } } /* ---------------- (B) ≤375px iPhone SE (PALING KECIL, PALING KRITIS!) ---------------- */ html body @media (max-width: 375px) { html body .app-header .header-inner { padding-left: 5px !important; padding-right: 6px !important; gap: 4px !important; height: 58px !important; } html body .app-header .brand { max-width: 125px !important; margin-left: 2px !important; transform: translateY(-1px) scale(1) !important; flex-shrink: 99999 !important; } html body .app-header .brand-wordmark { font-size: 1.2rem !important; letter-spacing: -0.028em !important; line-height: 1 !important; } /* HIDE logo icon kecil (hemat 15px!) */ html body .app-header .brand-logo-icon, html body .app-header .brand .logo-svg, html body .app-header .brand > svg:first-child, html body .app-header .brand > *:first-child:not(.brand-wordmark) { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } html body .app-header .search-btn { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; margin-right: 0 !important; border-radius: 8px !important; } html body .app-header .search-btn svg { width: 15px !important; height: 15px !important; } /* BUTTON TEXT ONLY (HIDE ICON, HEMAT 24px TOTAL!) */ html body .app-header .header-actions { gap: 4px !important; } html body .app-header #header-register-btn.btn-primary, html body .app-header #header-login-btn.btn-outline { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; font-size: 0.7rem !important; border-radius: 10px !important; font-weight: 700 !important; gap: 0 !important; } html body .app-header #header-register-btn.btn-primary svg, html body .app-header #header-login-btn.btn-outline svg { display: none !important; width: 0 !important; height: 0 !important; } } /* ========================================================================= 2️⃣ BOTTOM NAV + SPACER VISIBILITY LOCK (TIDAK BOLEH HIDE DI TABLET BESAR!) • 0–1023px → SELALU SHOW • ≥1024px desktop → HIDE SAJA (sidebar desktop active) ========================================================================= */ /* === SELALU SHOW MOBILE + TABLET BESAR === */ html body .mobile-bottom-nav { display: grid !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 999 !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2px !important; padding: 6px calc(env(safe-area-inset-bottom) + 4px) 10px !important; background: rgba(9, 7, 29, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-top: 1px solid rgba(148, 163, 184, 0.08) !important; } html body .mobile-bottom-spacer { display: block !important; height: calc(var(--mobile-bottom-height, 72px) + env(safe-area-inset-bottom, 0px)) !important; } /* Button style SAMA PERSIS anchor */ html body .mobile-bottom-nav a, html body .mobile-bottom-nav .mbn-item { display: flex !important; flex: 1 1 0% !important; min-width: 0 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0.35rem 0.25rem !important; border-radius: 10px !important; color: var(--color-text-secondary, #9ca3af) !important; font-size: 0.64rem !important; font-weight: 600 !important; text-align: center !important; background: transparent !important; border: 0 !important; cursor: pointer !important; outline: none !important; font-family: inherit !important; line-height: 1.35 !important; -webkit-tap-highlight-color: transparent !important; } html body .mobile-bottom-nav a:hover, html body .mobile-bottom-nav .mbn-item:hover { background: rgba(255,255,255,0.04) !important; color: #ffffff !important; text-decoration: none !important; } html body .mobile-bottom-nav a.active, html body .mobile-bottom-nav .mbn-item.active { color: #ffffff !important; background: rgba(124,92,255,0.14) !important; } html body .mobile-bottom-nav svg { width: 22px !important; height: 22px !important; margin: 0 auto !important; flex-shrink: 0 !important; } html body .mobile-bottom-nav a.active svg, html body .mobile-bottom-nav .mbn-item.active svg { color: var(--color-home-pink, #ec4899) !important; } /* === DESKTOP ≥1024px SAJA HIDE [FIX SYNTAX CSS: selector html body sebelum @media invalid sebelumnya!] === */ @media (min-width: 1024px) { html body .mobile-bottom-nav, html body nav.mobile-bottom-nav, html body .legacy-mobile-bottom, html body .mm-bottom-bar, html body nav.mm-bottom-bar { display: none !important; } html body .mobile-bottom-spacer, html body .mm-spacer { display: none !important; } html body .mm-drawer, html body .mm-drawer-overlay, html body .drawer-open { display: none !important; } } /* ========================================================================= 3️⃣ STICKY SIDEBAR LOCK — DESKTOP & MOBILE ========================================================================= */ /* --- DESKTOP NORMAL 230px (≥1024px SAJA! MOBILE ≤1023px TIDAK TERDAMPAK) --- */ @media (min-width: 1024px) { html body.home-page .home-sidebar-wrap, html body.home-page #home-sidebar-wrap, html body.home-page .home-sidebar:not(.sidebar-icononly) { position: fixed !important; top: var(--nav-header-height, 64px) !important; left: 0 !important; bottom: 0 !important; width: 230px !important; max-width: 230px !important; height: auto !important; z-index: var(--nav-sidebar-z, 95) !important; /* ===== LAYER 1 (ROOT): OVERFLOW VISIBLE = TIDAK ADA OVERFLOW CLIP SAMA SEKALI Mengatasi CSS Spec bug: visible + auto di axis berbeda → visible dipaksa auto jadi paint klip. Root 100% passthrough, scroll di-handle oleh PALING DALAM (.home-sidebar-cards). ===== */ overflow: visible !important; padding-top: 8px !important; padding-bottom: 24px !important; padding-left: 6px !important; padding-right: 6px !important; box-sizing: border-box !important; transform: none !important; visibility: visible !important; display: block !important; opacity: 1 !important; transition: width 300ms ease, transform 300ms ease !important; } /* ===== LAYER 2 (.sidebar-sticky): JUGA PASSTHROUGH VISIBLE, TIDAK ADA CLIP DI SINI ===== */ html body.home-page #home-sidebar-wrap.home-sidebar > .sidebar-sticky, html body.home-page .home-sidebar > .sidebar-sticky { height: 100% !important; max-height: 100% !important; overflow: visible !important; box-sizing: border-box !important; } /* ===== LAYER 3 (.home-sidebar-cards) — SCROLL CONTAINER SEBENARNYA (PALING DALAM) padding-right 16px GENAP = buffer LUAS agar sb-link margin-right 8px + border 1.5px JAUH di dalam batas clip. Rounded corner R14 + anti-alias pixel = 100% TERLIHAT, TIDAK TERKLIP. ===== */ html body.home-page #home-sidebar-wrap.home-sidebar .home-sidebar-cards, html body.home-page .home-sidebar .home-sidebar-cards { height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: visible !important; box-sizing: border-box !important; padding-right: 16px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } html body.home-page #home-sidebar-wrap.home-sidebar.sidebar-icononly .home-sidebar-cards, html body.home-page.sidebar-iconmode #home-sidebar-wrap .home-sidebar-cards { padding-right: 8px !important; } html body.home-page #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar, html body.home-page .home-sidebar .home-sidebar-cards::-webkit-scrollbar, html body.home-page #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar-track, html body.home-page .home-sidebar .home-sidebar-cards::-webkit-scrollbar-track, html body.home-page #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar-thumb, html body.home-page .home-sidebar .home-sidebar-cards::-webkit-scrollbar-thumb { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; } /* --- DESKTOP: SELURUH .home-sidebar (NORMAL + ICONONLY) WAJIB transform:none + VISIBLE (mencegah stuck translateX(-105%) ketika resize dari mobile → desktop) --- */ html body.home-page .home-sidebar, html body.home-page #home-sidebar-wrap.home-sidebar, html body.home-page .home-sidebar.sidebar-icononly { transform: none !important; visibility: visible !important; display: block !important; opacity: 1 !important; } /* --- DESKTOP ICON-ONLY MODE 64px (LEBIH KOMPAK, TIDAK TERLALU LEBAR) --- */ html body.home-page .home-sidebar.sidebar-icononly, html body.home-page.sidebar-iconmode .home-sidebar { width: 64px !important; max-width: 64px !important; overflow: visible !important; padding-left: 4px !important; padding-right: 4px !important; } html body.home-page.sidebar-iconmode #home-sidebar-wrap { width: 64px !important; overflow: visible !important; padding-left: 4px !important; padding-right: 4px !important; } /* --- DESKTOP: HIDE INDIKATOR SCROLLBAR VISUAL — SCROLL TETAP BISA NAIK TURUN (fungsi tidak hilang!) Targetkan SEMUA level, tapi prioritas utama di LAYER 3 (.home-sidebar-cards). ===== */ html body.home-page #home-sidebar-wrap.home-sidebar, html body.home-page .home-sidebar, html body.home-page #home-sidebar-wrap .home-sidebar-card, html body.home-page .home-sidebar .home-sidebar-card, html body.home-page #home-sidebar-wrap .home-sidebar-cards, html body.home-page .home-sidebar .home-sidebar-cards { scrollbar-width: none !important; -ms-overflow-style: none !important; } html body.home-page #home-sidebar-wrap.home-sidebar::-webkit-scrollbar, html body.home-page .home-sidebar::-webkit-scrollbar, html body.home-page #home-sidebar-wrap .home-sidebar-card::-webkit-scrollbar, html body.home-page .home-sidebar .home-sidebar-card::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; } html body.home-page #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-track, html body.home-page .home-sidebar::-webkit-scrollbar-track, html body.home-page #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-thumb, html body.home-page .home-sidebar::-webkit-scrollbar-thumb { background: transparent !important; width: 0 !important; height: 0 !important; display: none !important; } /* ============================================================ 🔓 GLOBAL — SEMUA HALAMAN (BUKAN HOME) SAMA PERSIS DENGAN HOME ============================================================ Rule di bawah ini COPAS PERSIS dari rule .home-page di atas, TAPI TANPA prefix .home-page agar BERLAKU ke blog / slots / slot-demos / post / page / single / CPT LAINNYA. Specificity: selector html body X setara dengan html body.home-page X (keduanya 0,1,1,1 — 1 class = 1 class). Home TETAP AMAN karena selector .home-page ada di RULE ATAS dengan aturan yang SAMA PERSIS, tidak konflik. Modul ini khusus DESKTOP ≥1024px. Mobile ≤1023px pakai menu-mobile. */ /* ROOT SIDEBAR */ html body .home-sidebar-wrap, html body #home-sidebar-wrap, html body .home-sidebar:not(.sidebar-icononly) { position: fixed !important; top: var(--nav-header-height, 64px) !important; left: 0 !important; bottom: 0 !important; width: 230px !important; max-width: 230px !important; height: auto !important; z-index: var(--nav-sidebar-z, 95) !important; overflow: visible !important; padding-top: 8px !important; padding-bottom: 24px !important; padding-left: 6px !important; padding-right: 6px !important; box-sizing: border-box !important; transform: none !important; visibility: visible !important; display: block !important; opacity: 1 !important; transition: width 300ms ease, transform 300ms ease !important; } /* LAYER 2 sticky passthrough */ html body #home-sidebar-wrap.home-sidebar > .sidebar-sticky, html body .home-sidebar > .sidebar-sticky { height: 100% !important; max-height: 100% !important; overflow: visible !important; box-sizing: border-box !important; } /* LAYER 3 scroll container + anti clip rounded 16px buffer */ html body #home-sidebar-wrap.home-sidebar .home-sidebar-cards, html body .home-sidebar .home-sidebar-cards { height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: visible !important; box-sizing: border-box !important; padding-right: 16px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } html body #home-sidebar-wrap.home-sidebar.sidebar-icononly .home-sidebar-cards, html body.sidebar-iconmode #home-sidebar-wrap .home-sidebar-cards { padding-right: 8px !important; } html body #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar, html body .home-sidebar .home-sidebar-cards::-webkit-scrollbar, html body #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar-track, html body .home-sidebar .home-sidebar-cards::-webkit-scrollbar-track, html body #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar-thumb, html body .home-sidebar .home-sidebar-cards::-webkit-scrollbar-thumb { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; } /* Transform reset + visible */ html body .home-sidebar, html body #home-sidebar-wrap.home-sidebar, html body .home-sidebar.sidebar-icononly { transform: none !important; visibility: visible !important; display: block !important; opacity: 1 !important; } /* ICON-ONLY 64px */ html body .home-sidebar.sidebar-icononly, html body.sidebar-iconmode .home-sidebar { width: 64px !important; max-width: 64px !important; overflow: visible !important; padding-left: 4px !important; padding-right: 4px !important; } html body.sidebar-iconmode #home-sidebar-wrap { width: 64px !important; overflow: visible !important; padding-left: 4px !important; padding-right: 4px !important; } /* Hide scrollbar indicator */ html body #home-sidebar-wrap.home-sidebar, html body .home-sidebar, html body #home-sidebar-wrap .home-sidebar-card, html body .home-sidebar .home-sidebar-card, html body #home-sidebar-wrap .home-sidebar-cards, html body .home-sidebar .home-sidebar-cards { scrollbar-width: none !important; -ms-overflow-style: none !important; } html body #home-sidebar-wrap.home-sidebar::-webkit-scrollbar, html body .home-sidebar::-webkit-scrollbar, html body #home-sidebar-wrap .home-sidebar-card::-webkit-scrollbar, html body .home-sidebar .home-sidebar-card::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; } html body #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-track, html body .home-sidebar::-webkit-scrollbar-track, html body #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-thumb, html body .home-sidebar::-webkit-scrollbar-thumb { background: transparent !important; width: 0 !important; height: 0 !important; display: none !important; } } /* --- MOBILE DRAWER (≤1023px) DEFAULT HIDDEN, TOGGLE KE 0 --- */ html body @media (max-width: 1023px) { html body.home-page .home-sidebar-wrap, html body.home-page #home-sidebar-wrap, html body.home-page .home-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; width: 250px !important; max-width: 250px !important; z-index: 199 !important; transform: translateX(-105%) !important; transition: transform 300ms cubic-bezier(.2,.9,.3,1) !important; padding-bottom: calc(var(--mobile-bottom-height, 72px) + 20px) !important; overflow-y: auto !important; } html body.home-page.drawer-open #home-sidebar-wrap, html body.home-page.drawer-open .home-sidebar, html body.home-page.sidebar-mobile-open #home-sidebar-wrap { transform: translateX(0) !important; } /* JANGAN sampe drawer menutupi bottom nav mobile! */ html body.home-page #home-sidebar-wrap .home-sidebar { padding-bottom: 92px !important; } } /* ========================================================================= 4️⃣ CONTENT AREA PADDING DESKTOP LOCK KIRI TETAP dorong sidebar 230px + 1.25rem = 250px KANAN LEGA 2.5rem = 40px KECUALIKAN INNER FOOTER (hindari DOUBLE PADDING!) ========================================================================= */ html body @media (min-width: 1024px) { /* ---- MAIN CONTENT + SECTION + OUTER FOOTER (dorong sidebar 230px) ---- */ html body.home-page .container:not(footer.app-footer .container), html body.home-page .container-home:not(footer.app-footer .container), html body.home-page main > .container:not(footer.app-footer .container), html body.home-page .home-layout:not(footer.app-footer .container), html body.home-page .home-content:not(footer.app-footer .container), html body.home-page #main-content-wrap > .container:not(footer.app-footer .container) { padding-left: calc(230px + 1.25rem) !important; padding-right: 2.5rem !important; } /* OUTER FOOTER (hanya dorong sidebar, PADDING KANAN = 0 agar tidak double dengan inner) */ html body.home-page footer.app-footer { padding-left: calc(230px + 1.25rem) !important; padding-right: 0 !important; } /* INNER FOOTER — SIMETRIS KIRI KANAN 2.5rem, TANPA DORONG SIDEBAR */ html body.home-page footer.app-footer > .container.footer-inner { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } /* ---- ICONONLY MODE 64px (GAP KANAN-KIRI LEBIH RAPI, TIDAK TERLALU LEBAR) ---- */ html body.home-page.sidebar-iconmode .container:not(footer.app-footer .container), html body.home-page.sidebar-iconmode .container-home:not(footer.app-footer .container) { padding-left: calc(64px + 0.75rem) !important; } html body.home-page.sidebar-iconmode footer.app-footer { padding-left: calc(64px + 0.75rem) !important; } html body.home-page.sidebar-iconmode footer.app-footer > .container.footer-inner { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } /* ============================================================ 🔓 GLOBAL CONTENT PADDING — SEMUA HALAMAN (BUKAN HOME) ============================================================ Copas persis dari rule .home-page, TANPA prefix .home-page. Dorong konten 230px + 1.25rem di desktop, agar tidak tertutup sidebar sticky. Footer outer/inner SIMETRIS persis home. ICON-ONLY 64px juga disesuaikan persis home. ⚠️ HANYA APPLY ke LAYOUT ROOT WRAPPER, BUKAN .container GENERIC (karena .container sering NESTED → double padding 2x lipat). ⚠️ JANGAN PAKAI :not(complex descendant) — browser sering salah evaluate. Layout wrappers jelas BUKAN footer, footer diatur SESUDAH rule ini dengan specificity sendiri. */ html body .container-home, html body .container.container-home, html body .home-layout, html body .container.home-layout, html body .home-content, html body .container.home-content, html body .post-layout-with-sidebar-left, html body .container.post-layout-with-sidebar-left, html body .container.post-layout.post-layout-with-sidebar-left, html body .slot-layout, html body .container.slot-layout, html body .container.slot-layout.post-layout, html body .container.slot-layout.post-layout.post-layout-with-sidebar-left, html body .post-layout, html body .container.post-layout { padding-left: calc(230px + 1.25rem) !important; padding-right: 2.5rem !important; } html body footer.app-footer { padding-left: calc(230px + 1.25rem) !important; padding-right: 0 !important; } html body footer.app-footer > .container.footer-inner { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } html body.sidebar-iconmode .container-home, html body.sidebar-iconmode .container.container-home, html body.sidebar-iconmode .home-layout, html body.sidebar-iconmode .container.home-layout, html body.sidebar-iconmode .home-content, html body.sidebar-iconmode .container.home-content, html body.sidebar-iconmode .post-layout-with-sidebar-left, html body.sidebar-iconmode .container.post-layout-with-sidebar-left, html body.sidebar-iconmode .container.post-layout.post-layout-with-sidebar-left, html body.sidebar-iconmode .slot-layout, html body.sidebar-iconmode .container.slot-layout, html body.sidebar-iconmode .container.slot-layout.post-layout, html body.sidebar-iconmode .container.slot-layout.post-layout.post-layout-with-sidebar-left, html body.sidebar-iconmode .post-layout, html body.sidebar-iconmode .container.post-layout { padding-left: calc(64px + 0.75rem) !important; } html body.sidebar-iconmode footer.app-footer { padding-left: calc(64px + 0.75rem) !important; } html body.sidebar-iconmode footer.app-footer > .container.footer-inner { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } } /* ========================================================================= 5️⃣ FOOTER STICKY / LAYOUT LOCK (agar tidak berubah posisi) ========================================================================= */ html body .app-footer { background: var(--color-footer-bg) !important; border-top: 1px solid rgba(255,255,255,0.04) !important; padding-top: 3rem !important; padding-bottom: 1.5rem !important; width: 100% !important; position: relative !important; clear: both !important; overflow: hidden !important; } /* ========================================================================= 🔐 CSSOM GUARD — GAGALKAN JAVASCRIPT APA PUN YANG MAU UBAH INLINE STYLE (via MutationObserver di file JS? Tidak, cukup di CSS) Specificity OVERRIDE INLINE STYLE dengan `#id:where(#id)` trick? TIDAK PERLU — !important di specificity html body class SUDAH LEBIH KUAT dari inline style REGULER (kecuali inline !important — langka). ========================================================================= */