@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   1. PENGATURAN DASAR & RESET TOTAL
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
}



/* === FONDASI PAGE & STICKY FOOTER === */
.app-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8fafc;
}

/* === HEADER BANNER LOGIN === */
.app-header-banner-login {
    width: 100%;
    height: 430px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-img-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* === KUNCI UTAMA UNTUK MENGGESER GAMBAR === */
    /* Parameter pertama (70%) adalah horizontal. Makin besar angkanya, gambar bergeser ke kiri (fokus kanan naik). */
    /* Parameter kedua (center) menjaga posisi vertikal tetap di tengah. */
    object-position: 70% center; 
    
    transform: scale(1.05); /* Tetap pertahankan zoom tipis Anda jika diperlukan */
}

.banner-overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 217, 174, 0.404), rgba(255, 109, 11, 0.486));
    z-index: 5;
}

/* Tombol Kembali / Back */
.btn-back-portal {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    z-index: 20;
    transition: all 0.3s ease;
}
.btn-back-portal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-3px);
}

/* Area Judul Login */
.login-title-area {
    position: absolute;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    margin-top: -20px;
}

.login-badge-icon {
    width: 50px;
    height: 50px;
    background-color: #ffe8cc; /* Oranye pastel khas siswa */
    color: #f76707;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(247, 103, 7, 0.3);
}

.login-main-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.login-sub-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

/* === FORM LAYOUT === */
.login-form-direct {
    width: 100%;
    margin-top: 8px;
    
    /* Mengubah form menjadi flex agar kita bisa memainkan dorongan ruang otomatis */
    display: flex;
    flex-direction: column;
    flex: 1; 
}

/* === BODY FORM (Efek Lengkung Naik) === */
.app-content-body-login {
    /* Padding bawah diatur statis (misal 24px) untuk mengunci jarak ke pinggir layar */
    padding: 32px 24px 24px 24px;

    background-color: #f8fafc;
    border-radius: 32px 32px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 15;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* === DESAIN INPUT FIELD KREATIF === */
.input-group-custom {
    margin-bottom: 20px;
}

.input-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    padding-left: 4px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 46px; /* Jarak kiri dilebihkan untuk ikon */
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.92rem;
    color: #1e293b;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

/* Efek Fokus Input Berwarna Oranye Lembut */
.input-wrapper input:focus {
    outline: none;
    border-color: #ff922b;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 146, 43, 0.1);
}

.input-icon {
    position: absolute;
    left: 16px;
    color: #ca8e34;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* Mengubah warna ikon saat input aktif */
.input-wrapper input:focus ~ .input-icon {
    color: #ff922b;
}

/* Toggle Mata Password */
.toggle-password {
    position: absolute;
    right: 16px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
}
.toggle-password:hover {
    color: #64748b;
}

/* === OPTIONS (LUPA PASSWORD & CHECKBOX) === */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    font-size: 0.82rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    cursor: pointer;
}

.remember-me input {
    accent-color: #ff922b; /* Mengubah warna checkbox jadi oranye */
}

.link-forgot {
    color: #f76707;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.link-forgot:hover {
    color: #d9480f;
    text-decoration: underline;
}

/* === TOMBOL LOGIN SUBMIT === */
.btn-login-submit {
    width: 100%;
    padding: 16px;
    
    /* 1. PERBAIKAN WARNA: Menggunakan gradasi oranye solid yang tegas dan mewah */
    background: linear-gradient(135deg, #ffbc7d, #f8882d);
    
    /* 2. KONTRAS TEKS: Diubah menjadi putih bersih agar tulisan langsung menyala tajam */
    color: #ffffff !important;
    
    border: none;
    border-radius: 20px; /* Diubah ke 20px agar sudut tumpulnya serasi dengan lekukan body */
    font-size: 1rem;     /* Dinaikkan sedikit agar lebih terbaca */
    font-weight: 700;
    letter-spacing: 0.3px; /* Memberikan kelonggaran antar huruf agar elegan */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* 3. EFEK DIMENSI: Memberikan shadow oranye yang sangat lembut (soft glow) */
    box-shadow: 0 2px 2px rgba(255, 222, 151, 0.25);
    
    /* Efek transisi diperhalus dengan kurva bezier */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    
    /* Mempertahankan kunci dorongan posisi ke bawah */
    margin-top: auto; 
}

/* === EFEK INTERAKTIF PRESERVED (HOVER) === */
.btn-login-submit:hover {
    /* Tombol sedikit terangkat */
    transform: translateY(-3px);
    
    /* Bayangan melebar halus saat disentuh */
    box-shadow: 0 2px 2px rgba(255, 222, 151, 0.25);
    
    /* Gradasi bergeser sedikit lebih gelap/matang secara elegan */
    background: linear-gradient(135deg, #ffe079, #f8b12d);
}

/* Efek saat tombol benar-benar ditekan jari */
.btn-login-submit:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

/* === FOOTER LOCK AT BOTTOM === */
.app-footer-login {
    background-color: #111827;
    color: #ffffff;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    margin-top: auto; /* Dorong ke paling dasar layar */
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-footer-login .footer-copyright {
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

/* === PERBAIKAN UKURAN PLACEHOLDER === */
.input-wrapper input::placeholder {
    /* Mengubah ukuran font placeholder menjadi lebih kecil/proporsional */
    font-size: 0.85rem; 
    
    /* Anda juga bisa mengatur tingkat keburaman atau warnanya di sini */
    color: #94a3b8; 
    opacity: 1; /* Memastikan warna di browser Safari/iOS tidak pudar otomatis */
}

/* Dukungan untuk browser lama (Opsional tapi baik untuk kompatibilitas) */
.input-wrapper input::-webkit-input-placeholder { font-size: 0.85rem; }
.input-wrapper input::-moz-placeholder { font-size: 0.85rem; }
.input-wrapper input:-ms-input-placeholder { font-size: 0.85rem; }

/* Container teks melayang di atas gambar - DIKUNCI DI KIRI BAWAH */
.course-title-area-overlay-login {
    position: absolute !important;
    bottom: 65px;         /* Mengambang pas di atas lengkungan putih bawah */
    left: 24px;           /* Sejajar rapi dengan padding input di bawahnya */
    z-index: 10;
    text-align: left;     /* Memaksa semua teks di dalamnya rata kiri */
    width: auto;
    pointer-events: none;

    /* === AKTIFKAN ANIMASI MASUK DI SINI === */
    /* fadeSlideUp = nama animasi, 0.8s = durasi, ease-out = gerakan halus di akhir */
    animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

/* Judul Utama "Area Siswa" */
.course-main-title-overlay-login {
    color: #ffffff !important;
    font-size: 2.2rem;    /* Ukuran tegas dan mewah sama seperti Welcome */
    font-weight: 700;
    margin: 0 0 4px 0;    /* Jarak tipis ke sub-title bawah */
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;

    /* Animasi internal tambahan untuk judul */
    animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sub-deskripsi di bawahnya */
.login-sub-title-left {
    font-size: 0.84rem;
    color: #ffffff;
    margin: 0;
    
    /* Memicu animasi teks bawah dengan DELAY 0.15 detik setelah judul muncul */
    opacity: 0; /* Mulai dari tidak terlihat */
    animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.15s; 
}

/* === LOGIKA ATURAN GERAKAN ANIMASI (KEYFRAMES) === */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Memulai posisi teks dari 20px agak ke bawah */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Teks mendarat mulus di posisi asli */
    }
}