@import url('fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body {
    height: 100vh;
    display: flex;
    background-color: #f4f7f6;
}

.left-panel {
    flex: 1;
    background: linear-gradient(#0f2027, #203a43, #2c5364);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 40px;
    text-align: center;
}

.left-panel h1 { font-size: 3rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.left-panel p { font-size: 1.1rem; font-weight: 300; opacity: 0.9; max-width: 400px; line-height: 1.6; }

.right-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    position: relative;
}

.login-box {
    width: 100%;
    max-width: 420px;
    padding: 40px;
}

.login-box h2 { font-size: 1.8rem; color: #1a202c; margin-bottom: 8px; font-weight: 600; }
.login-box p.subtitle { color: #718096; font-size: 0.95rem; margin-bottom: 35px; }

.input-group { margin-bottom: 25px; position: relative; }
.input-group label { display: block; font-size: 0.85rem; color: #4a5568; margin-bottom: 8px; font-weight: 500; }
.input-group input, .input-group select {
    width: 100%; padding: 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 1rem; 
    transition: all 0.3s ease; background-color: #fdfdfd;
}
.input-group input:focus, .input-group select:focus {
    border-color: #2b6cb0; background-color: #ffffff; outline: none;
    box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.1);
}

.login-btn {
    width: 100%; padding: 15px; background-color: #2b6cb0; color: white; border: none; 
    border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; 
    transition: all 0.3s ease; margin-top: 10px;
    box-shadow: 0 4px 6px rgba(43, 108, 176, 0.2);
}
.login-btn:hover { background-color: #1a365d; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(26, 54, 93, 0.2); }
.login-btn:disabled { background-color: #cbd5e0; cursor: not-allowed; transform: none; box-shadow: none; }

.sayfa-gosterilemiyor { margin: auto; padding: 40px 20px; text-align: center; color: #475569; font-size: 1.1rem; }

.alert-msg { padding: 12px 15px; border-radius: 8px; font-size: 0.9rem; margin-top: 20px; display: none; font-weight: 500; }
.alert-error { background-color: #fff5f5; color: #c53030; border: 1px solid #feb2b2; }
.alert-success { background-color: #f0fff4; color: #2f855a; border: 1px solid #9ae6b4; }

#roleSelectionContainer, #passwordResetContainer { display: none; animation: fadeIn 0.5s ease; }
#loginForm { animation: fadeIn 0.5s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    body { flex-direction: column; }
    .left-panel { flex: none; height: 250px; padding: 20px; }
    .left-panel h1 { font-size: 2rem; }
    .right-panel { flex: 1; align-items: flex-start; padding-top: 40px; }
}