/* ── PWA & Responsive Styles ──────────────────────────────────────────── */ /* ── Hamburger toggle (hidden on desktop) ─────────────────────────────── */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; border-radius: var(--radius-md); font-size: 1.125rem; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s, color 0.15s; } .menu-toggle:hover, .menu-toggle:focus-visible { background-color: var(--color-surface-muted); color: var(--color-text-main); outline: none; } /* ── Sidebar overlay (mobile) ─────────────────────────────────────────── */ /* Drawer dikendalikan app.js via class `drawer-open` pada . */ .drawer-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 150; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; } /* ── PWA standalone: account for status bar on iOS ───────────────────── */ @media (display-mode: standalone) { .side-drawer { padding-top: env(safe-area-inset-top, 0px); } .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); } .content-wrapper { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ── Window Controls Overlay (desktop PWA installed) ─────────────────── */ @media (display-mode: window-controls-overlay) { .app-header { padding-left: max(env(titlebar-area-x, 0px), var(--spacing-xl)); padding-top: 0; height: calc(var(--header-height) + env(titlebar-area-height, 0px)); padding-top: env(titlebar-area-height, 0px); } } /* ── Drawer mode: di bawah desktop (< 1024px) ─────────────────────────── */ /* Selaras dengan app.js: desktopNavQuery = (min-width: 1024px). */ @media (max-width: 1023.98px) { /* Tampilkan hamburger */ .menu-toggle { display: flex; } /* Sidebar menjadi slide-in drawer, dikontrol body.drawer-open */ .side-drawer { transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease; z-index: 200; box-shadow: none; padding-top: env(safe-area-inset-top, 0px); } body.drawer-open .side-drawer { transform: translateX(0); box-shadow: var(--shadow-xl); } /* Konten melebar penuh */ .content-wrapper { margin-left: 0; width: 100%; } /* Header menyesuaikan safe-area */ .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); } /* Target sentuh ramah (min 44×44px) */ .btn { min-height: 44px; padding: 0.625rem 1rem; } .drawer-link { min-height: 44px; padding: var(--spacing-sm) var(--spacing-lg); } .notification-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } } /* ── Tablet (769px – 1023px): sidebar drawer + search ringkas ─────────── */ @media (min-width: 769px) and (max-width: 1023.98px) { .content-area { padding: var(--spacing-lg); } .header-search { width: 280px; } } /* ── Phone (≤ 768px) ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .app-header { padding: 0 var(--spacing-md); gap: var(--spacing-sm); padding-top: env(safe-area-inset-top, 0px); height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); } /* Sembunyikan kolom pencarian di layar kecil */ .header-search { display: none; } /* Sembunyikan teks nama di samping avatar (avatar tetap) */ .profile-menu-summary-text { display: none; } .content-area { padding: var(--spacing-md); padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px)); } .card { padding: var(--spacing-md); } .screen-heading { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } } /* ── Small phones (≤ 390px) ───────────────────────────────────────────── */ @media (max-width: 390px) { .content-area { padding: var(--spacing-sm); padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px)); } } /* ── Desktop refinements (≥ 1024px) ──────────────────────────────────── */ @media (min-width: 1024px) { .side-drawer { transition: none; } /* Overlay tidak pernah tampil di desktop */ .drawer-overlay { display: none; } } /* ── PWA Install Banner ───────────────────────────────────────────────── */ #pwa-install-banner { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); background: rgba(10, 20, 40, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } #pwa-install-banner.is-open { opacity: 1; pointer-events: auto; } #pwa-install-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--spacing-xl); width: 100%; max-width: 400px; box-shadow: 0 20px 60px -10px rgba(10, 20, 60, 0.35), 0 8px 20px -4px rgba(10, 20, 60, 0.2); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-md); transform: scale(0.94) translateY(12px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #pwa-install-banner.is-open #pwa-install-card { transform: scale(1) translateY(0); } @media (max-width: 480px) { #pwa-install-banner { padding: var(--spacing-md); padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px)); align-items: flex-end; } #pwa-install-card { max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); transform: translateY(24px); } #pwa-install-banner.is-open #pwa-install-card { transform: translateY(0); } } .pwa-install-header { display: flex; align-items: center; gap: var(--spacing-md); } .pwa-install-icon { width: 52px; height: 52px; border-radius: var(--radius-md); object-fit: contain; flex-shrink: 0; } .pwa-install-title { font-weight: 700; font-size: 0.9375rem; color: var(--color-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-install-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-close-btn { background: none; border: none; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); font-size: 1rem; line-height: 1; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .pwa-close-btn:hover { background: var(--color-hover); color: var(--color-text-main); } .pwa-install-perks { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .pwa-install-perks span { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; color: var(--color-primary); background: var(--color-primary-light, rgba(37,99,235,0.08)); border-radius: var(--radius-sm); padding: 3px 8px; } .pwa-install-perks span i { font-size: 0.7rem; } .pwa-ios-steps { background: var(--color-primary-light, rgba(37,99,235,0.08)); color: var(--color-text-main); border-radius: var(--radius-md); padding: var(--spacing-md); font-size: 0.8125rem; line-height: 1.6; } .pwa-ios-steps i { color: var(--color-primary); } .pwa-install-actions { display: flex; gap: var(--spacing-sm); } .pwa-install-actions .btn { flex: 1; } .pwa-install-actions .btn[hidden] { display: none; }