:root { --seyhan-red: #dd042b; --seyhan-orange: #f28c28; --seyhan-navy: #1c3156; --datta-text: #111; --datta-muted: #666; }
* { box-sizing: border-box; }
body.auth-body { min-height: 100vh; margin: 0; color: var(--datta-text); background: #f4f7fa; font-family: "Open Sans", "Segoe UI", Arial, sans-serif; }
.auth-shell, .datta-login-page { min-height: 100vh; }
.datta-login-page { position: relative; display: grid; overflow: hidden; padding: 32px 20px; place-items: center; }
.datta-shape { position: fixed; z-index: 0; display: block; border-radius: 50%; }
.datta-shape-mint { top: -85px; left: calc(50% + 20px); width: 300px; height: 300px; background: var(--seyhan-red); }
.datta-shape-purple { bottom: -105px; left: calc(50% - 380px); width: 310px; height: 310px; background: var(--seyhan-orange); }
.datta-shape-blue { top: 26%; left: calc(50% + 300px); width: 140px; height: 140px; background: var(--seyhan-navy); }
.datta-login-card { position: relative; z-index: 2; width: min(360px, 100%); min-height: 458px; padding: 30px 25px 26px; background: #fff; box-shadow: 0 10px 30px rgba(46,61,73,.08); text-align: center; }
.datta-login-icon { color: var(--seyhan-red); font-size: 31px; line-height: 1; }
.datta-login-brand { margin: 10px 0 20px; line-height: 1; }
.datta-login-brand img { display: block; width: 128px; height: auto; margin: 0 auto; }
.datta-login-card h1 { margin: 0 0 24px; font-size: 30px; font-weight: 400; }
.datta-login-card form { text-align: left; }
.datta-login-input { height: 48px; border: 1px solid #ccd2db; border-radius: 3px; color: #363b44; background: #f4f7fa; font-size: 15px; box-shadow: none !important; }
.datta-login-input:focus { border-color: var(--seyhan-red); background: #fff; }
.datta-login-input::placeholder { color: #a7adb6; }
.datta-password-wrap { position: relative; }
.datta-password-wrap .datta-login-input { padding-right: 58px; }
.datta-password-wrap button { position: absolute; top: 0; right: 0; height: 48px; padding: 0 14px; border: 0; color: var(--seyhan-red); background: transparent; font-size: 12px; font-weight: 600; }
.datta-field-error { display: block; min-height: 17px; margin-top: 3px; font-size: 11px; }
.datta-login-alert { display: flex; align-items: flex-start; gap: 7px; padding: 10px 12px; font-size: 12px; text-align: left; }
.datta-login-alert i { font-size: 15px; }
.datta-login-button { display: block; min-width: 92px; height: 46px; margin: 19px auto 0; border: 0; border-radius: 3px; color: #fff; background: var(--seyhan-red); box-shadow: 0 10px 22px rgba(221,4,43,.22); font-size: 14px; font-weight: 600; }
.datta-login-button:hover { color: #fff; background: #bd0325; }
.datta-login-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 28px 0 0; color: var(--datta-muted); font-size: 12px; }
.datta-login-note i { color: var(--seyhan-red); font-size: 14px; }
.error-card { width: min(680px, calc(100% - 32px)); margin: 12vh auto; padding: 30px; background: #fff; box-shadow: 0 10px 30px rgba(46,61,73,.08); }

@media (max-width: 560px) {
    .datta-login-page { padding: 20px; }
    .datta-login-card { min-height: 445px; padding: 28px 22px 24px; }
    .datta-shape-mint { top: -130px; left: 50%; width: 260px; height: 260px; }
    .datta-shape-purple { bottom: -145px; left: -110px; width: 280px; height: 280px; }
    .datta-shape-blue { top: 18%; right: -40px; left: auto; width: 100px; height: 100px; }
}