/**
 * SI-REMBES Responsive (responsive.css)
 */

@media (max-width: 1024px) {
    .faucet-wrapper {
        width: 300px;
        top: 15vh;
        left: 0;
    }
    
    .login-card {
        width: 420px;
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        /* Pengaturan koordinat jatuhnya air KHUSUS untuk layar HP (Mobile) */
        /* Berbeda dengan desktop, karena gambar background terpotong di HP */
        --faucet-x: 30%; 
        --faucet-y: 40%;
    }

    .ui-layer {
        align-items: center;
        padding-bottom: 2rem;
        padding-right: 0; /* Reset padding kanan dari desktop */
        justify-content: center;
    }

    /* Move faucet above card on mobile */
    .faucet-wrapper {
        position: relative;
        top: auto;
        left: auto;
        margin: 2rem auto;
        width: 250px;
    }

    .faucet-layer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .login-card {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
    }
    
    .app-title {
        font-size: 1.5rem;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}