/* ======================================================
   EMU AUTH TEMPLATE
   Login • Register • Verify • Forgot Password

====================================================== */
        
         :root {
            --emu-red: #9d0b03;
            --emu-red-dark: #7b0702;
            --emu-light: #f8f9fa;
            --emu-border: #e8e8e8;
            --emu-text: #2d2d2d;
            --emu-input-bg: #f9f9fb;
        }
        
        body.auth-page {
            background: #f6f7fb;
            color: var(--emu-text);
        }
        
        .auth-wrapper {
            overflow-x: hidden;
            min-height: 100vh;
        }
        /* ===================================
   Split Layout (Branding & Form)
=================================== */
        
        .auth-brand {
            background: linear-gradient(135deg, var(--emu-red) 0%, var(--emu-red-dark) 100%);
            position: relative;
            overflow: hidden;
        }
        
        .brand-decor {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.03);
            white-space: nowrap;
            user-select: none;
            z-index: 0;
        }
        
        .brand-content {
            z-index: 1;
        }
        
        .auth-form-section {
            background-color: #f6f7fb;
        }
        /* ===================================
   Card & Logo
=================================== */
        
        .auth-card {
            width: 100%;
            max-width: 480px;
            border-radius: 24px !important;
            border: 1px solid var(--emu-border) !important;
            box-shadow: 0 10px 35px rgba(0, 0, 0, .05) !important;
            padding: 40px 35px !important;
            background: #fff;
            margin: 0 auto;
        }
        
        .auth-logo {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px auto;
            border: 3px solid rgba(157, 11, 3, .12);
        }
        /* ===================================
   Inputs (Custom ber-icon)
=================================== */
        
        .input-icon-wrapper {
            position: relative;
        }
        
        .input-icon-wrapper .icon-left {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 1.1rem;
            z-index: 4;
        }
        /* Menggabungkan form-control bootstrap dengan auth-input kita */
        
        .auth-input,
        .auth-card .form-control {
            height: 56px;
            border-radius: 14px;
            border: 1px solid #dcdcdc;
            background-color: var(--emu-input-bg);
            padding-left: 48px;
            /* Memberi ruang untuk icon di kiri */
            padding-right: 18px;
            font-size: 15px;
            color: var(--emu-text);
            transition: .25s;
            box-shadow: none;
        }
        /* Kondisi jika input tidak butuh padding kiri berlebih (misal Register) */
        
        .auth-input.no-icon,
        .auth-card .form-control:not(.auth-input) {
            padding-left: 18px;
        }
        
        .auth-input:focus,
        .auth-card .form-control:focus {
            background-color: #fff;
            border-color: var(--emu-red);
            box-shadow: 0 0 0 .2rem rgba(157, 11, 3, .15);
        }
        
        .auth-card .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--emu-text);
        }
        /* ===================================
   Password Toggle (Mata)
=================================== */
        
        .btn-password {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: #999;
            padding: 4px;
            z-index: 4;
            transition: color 0.2s;
        }
        
        .btn-password:hover {
            color: var(--emu-text);
        }
        
        .custom-check:checked {
            background-color: var(--emu-red);
            border-color: var(--emu-red);
        }
        /* ===================================
   Buttons
=================================== */
        
        .btn-emu-primary,
        .auth-btn-submit {
            height: 56px;
            border-radius: 16px !important;
            background: linear-gradient(to right, var(--emu-red), var(--emu-red-dark)) !important;
            border: none !important;
            color: #fff !important;
            font-weight: 600;
            font-size: 16px;
            transition: .25s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-emu-primary:hover,
        .auth-btn-submit:hover,
        .auth-btn-submit:active {
            background: linear-gradient(to right, var(--emu-red-dark), #6e0802) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(157, 11, 3, 0.25);
            color: #fff !important;
        }
        
        .btn-google {
            height: 54px;
            border-radius: 16px;
            border: 1px solid #ddd;
            background: #fff;
            font-weight: 600;
            color: var(--emu-text);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: .25s;
        }
        
        .btn-google:hover {
            background: #fafafa;
            color: var(--emu-text);
        }
        /* ===================================
   Links & Divider
=================================== */
        
        .auth-link {
            color: var(--emu-red);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .auth-link:hover {
            color: var(--emu-red-dark);
            text-decoration: underline !important;
        }
        
        .auth-divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
        }
        
        .auth-divider::before,
        .auth-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #ddd;
        }
        
        .auth-divider span {
            padding: 0 14px;
            color: #999;
            font-size: 13px;
        }
        /* ===================================
   OTP & Alerts
=================================== */
        
        .otp-group {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .otp-input {
            width: 55px;
            height: 60px;
            border-radius: 12px;
            border: 1px solid #ddd;
            background-color: var(--emu-input-bg);
            text-align: center;
            font-size: 22px;
            font-weight: 700;
            transition: .25s;
        }
        
        .otp-input:focus {
            background-color: #fff;
            border-color: var(--emu-red);
            box-shadow: 0 0 0 .2rem rgba(157, 11, 3, .15);
            outline: none;
        }
        
        .auth-card .alert {
            border-radius: 14px;
        }
        /* Penyesuaian Kotak Input OTP agar Pas di Berbagai Layar */
        
        .otp-container .otp-input {
            height: 55px;
            padding: 0;
            font-size: 1.25rem;
        }
        
        @media (max-width: 380px) {
            .otp-container {
                gap: 4px !important;
            }
            .otp-container .otp-input {
                height: 48px;
                font-size: 1rem;
            }
            /* ===================================
   Responsive
=================================== */
            @media(max-width: 991px) {
                .auth-wrapper {
                    justify-content: center;
                    align-items: center;
                }
            }
            @media(max-width:576px) {
                .auth-card {
                    border-radius: 18px !important;
                    padding: 30px 25px !important;
                }
            }
        }