/* ==================================================================
   AREA AMAN (safe area) -- 1.131.0

   Aplikasi Android (Capacitor 8, targetSdk 36) berjalan EDGE-TO-EDGE:
   sejak Android 15 halaman web digambar sampai ke bawah status bar dan
   lubang kamera, juga ke bawah bilah navigasi/gestur. Header tetap
   (header.glass-header, top: 0) jadi tertutup kamera.

   Capacitor menyuntikkan tinggi area itu sebagai variabel CSS
   --safe-area-inset-top/-bottom (plugin SystemBars, dalam dp) -- HANYA bila
   halaman memakai <meta viewport ... viewport-fit=cover>. env() saja tidak
   cukup: WebView Android lama mengembalikan 0.

   Urutannya: variabel Capacitor -> env() (iOS/Chrome) -> 0. Di peramban
   biasa keduanya 0, jadi tampilan desktop/web tidak berubah.
   ================================================================== */

:root {
    --aman-atas: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --aman-bawah: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

/* Header tetap: tambahkan tinggi status bar di ATAS isinya. Border
   warnanya sama dengan latar header (dan ikut blur), jadi status bar
   tampak menyatu dengan header -- padding asli header tidak disentuh. */
html body header.glass-header {
    border-top: var(--aman-atas) solid rgba(255, 255, 255, 0.85);
}

/* Isi halaman ikut turun setinggi header + status bar. Hanya pada halaman
   yang memang punya header tetap. */
html body:has(header.glass-header) {
    padding-top: calc(75px + var(--aman-atas)) !important;
}

@media (max-width: 768px) {
    html body:has(header.glass-header) {
        padding-top: calc(70px + var(--aman-atas)) !important;
    }
}