/* ============================================
   PUBLIC BASE — dipakai bersama di semua halaman publik
   ============================================ */
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Kunci tinggi ke viewport perangkat & matikan scroll sepenuhnya */
html, body {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

/* ============================================
   HALAMAN: absensi.php (di-scope dengan .page-absensi)
   ============================================ */
.page-absensi #video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .page-absensi #canvas { display: none; }

        /* Ukuran mengikuti tinggi layar (dvh) supaya selalu pas tanpa scroll */
        .page-absensi .fluid-title { font-size: clamp(18px, 3.2dvh, 26px); line-height: 1.15; }
        .page-absensi .fluid-sub { font-size: clamp(11px, 1.8dvh, 14px); }
        .page-absensi .fluid-banner { font-size: clamp(10px, 1.6dvh, 12px); padding-top: clamp(4px, 0.9dvh, 8px); padding-bottom: clamp(4px, 0.9dvh, 8px); }
        .page-absensi .fluid-btn { height: clamp(44px, 7.2dvh, 60px); font-size: clamp(14px, 2.2dvh, 18px); }
        .page-absensi .fluid-result { padding-top: clamp(6px, 1.1dvh, 14px); padding-bottom: clamp(6px, 1.1dvh, 14px); font-size: clamp(11px, 1.8dvh, 14px); }
        .page-absensi .fluid-gap { gap: clamp(6px, 1.3dvh, 14px); }

/* ============================================
   HALAMAN: index.php (di-scope dengan .page-index)
   ============================================ */
.page-index .fluid-logo { width: clamp(48px, 9dvh, 80px); height: clamp(48px, 9dvh, 80px); }
        .page-index .fluid-title { font-size: clamp(18px, 3.4dvh, 28px); line-height: 1.15; }
        .page-index .fluid-sub { font-size: clamp(11px, 1.8dvh, 14px); }
        .page-index .fluid-banner { font-size: clamp(10px, 1.6dvh, 12px); padding-top: clamp(4px, 0.9dvh, 8px); padding-bottom: clamp(4px, 0.9dvh, 8px); }
        .page-index .fluid-clock-label { font-size: clamp(9px, 1.4dvh, 11px); }
        .page-index .fluid-clock-time { font-size: clamp(24px, 5.2dvh, 40px); }
        .page-index .fluid-stat-num { font-size: clamp(16px, 2.6dvh, 22px); }
        .page-index .fluid-stat-label { font-size: clamp(9px, 1.4dvh, 11px); }
        .page-index .fluid-btn { height: clamp(44px, 7.5dvh, 60px); font-size: clamp(14px, 2.2dvh, 18px); }
        .page-index .fluid-note { font-size: clamp(9px, 1.4dvh, 11px); }
        .page-index .fluid-gap { gap: clamp(6px, 1.4dvh, 16px); }

/* ============================================
   HALAMAN: registrasi.php (di-scope dengan .page-registrasi)
   ============================================ */
/* dipakai bareng .hidden (bukan selector ID) supaya toggle sembunyikan video/canvas tetap jalan */
        .page-registrasi .fluid-media { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* Ukuran mengikuti tinggi layar (dvh) supaya semua tahap selalu pas tanpa scroll */
        .page-registrasi .fluid-title { font-size: clamp(17px, 3dvh, 24px); line-height: 1.15; }
        .page-registrasi .fluid-sub { font-size: clamp(10.5px, 1.7dvh, 13px); }
        .page-registrasi .fluid-banner { font-size: clamp(10px, 1.6dvh, 12.5px); padding-top: clamp(6px, 1.1dvh, 14px); padding-bottom: clamp(6px, 1.1dvh, 14px); }
        .page-registrasi .fluid-btn { height: clamp(42px, 7dvh, 58px); font-size: clamp(13px, 2.1dvh, 17px); }
        .page-registrasi .fluid-btn-sm { height: clamp(36px, 5.8dvh, 48px); font-size: clamp(12px, 1.8dvh, 14px); }
        .page-registrasi .fluid-input { height: clamp(40px, 6.4dvh, 52px); font-size: clamp(13px, 2dvh, 16px); }
        .page-registrasi .fluid-stepper { padding-bottom: clamp(4px, 0.8dvh, 8px); }
        .page-registrasi .fluid-stepper-text { font-size: clamp(9.5px, 1.4dvh, 12px); }
        .page-registrasi .fluid-tip { font-size: clamp(10px, 1.5dvh, 12px); }
        .page-registrasi .fluid-name { font-size: clamp(14px, 2.4dvh, 19px); }
        .page-registrasi .fluid-gap { gap: clamp(6px, 1.1dvh, 14px); }