/* ══════════════════════════════════════════════════


   AUTH LOGIN — Modern Mobil Tasarım v3


══════════════════════════════════════════════════ */





*, *::before, *::after { box-sizing: border-box; }





body.auth-page {


  min-height: 100dvh;


  background: #0A0C12 !important;


  display: flex;


  align-items: center;


  justify-content: center;


  overflow-y: auto;


  position: relative;


}





.auth-bg-orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; opacity: .55; }


.auth-bg-orb-1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(129,140,248,.35) 0%, transparent 70%); top: -100px; right: -80px; }


.auth-bg-orb-2 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(165,180,252,.2) 0%, transparent 70%); bottom: -80px; left: -60px; }





.auth-page-wrap {


  width: 100%; min-height: 100dvh;


  display: flex; align-items: center; justify-content: center;


  padding: 32px 16px 48px;


  position: relative; z-index: 1;


}


.auth-card-wrap { width: 100%; max-width: 420px; }





.auth-card {


  background: rgba(21,24,32,.92) !important;


  border: 1px solid rgba(129,140,248,.18) !important;


  border-radius: 24px !important;


  padding: 40px 36px 36px !important;


  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important;


  backdrop-filter: blur(20px) !important;


  -webkit-backdrop-filter: blur(20px) !important;


  animation: authCardIn .4s cubic-bezier(.4,0,.2,1);


}


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





.auth-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }


.auth-logo-img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 12px rgba(129,140,248,.3); }


.auth-logo-name { font-size: 1.05rem; font-weight: 700; color: #EEF1F6 !important; letter-spacing: -.03em; }





.auth-head { margin-bottom: 28px; }


.auth-head-title { font-size: 1.55rem; font-weight: 800; color: #EEF1F6 !important; letter-spacing: -.04em; margin-bottom: 6px; line-height: 1.2; }


.auth-head-sub { font-size: .88rem; color: #6B7A92 !important; line-height: 1.5; }





.auth-alert { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 12px; font-size: .84rem; margin-bottom: 16px; border: 1px solid; animation: authFadeIn .25s ease; }


.auth-alert.error { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; color: #FCA5A5 !important; }


.auth-alert.success { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; color: #86EFAC !important; }


@keyframes authFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }





.btn-social {


  display: flex !important; align-items: center !important; justify-content: center !important;


  gap: 10px !important; width: 100% !important; padding: 13px 16px !important;


  border-radius: 12px !important; background: #1D212B !important; border: 1px solid #303744 !important;


  color: #EEF1F6 !important; font-size: .9rem !important; font-weight: 600 !important;


  text-decoration: none !important; margin-bottom: 10px !important; cursor: pointer !important;


  transition: background .15s, border-color .15s, transform .1s !important;


}


.btn-social:hover { background: #252B36 !important; border-color: rgba(129,140,248,.4) !important; transform: translateY(-1px) !important; color: #EEF1F6 !important; }


.btn-social:active { transform: translateY(0) !important; }





.auth-sep { display: flex; align-items: center; gap: 12px; color: #4A5568 !important; font-size: .78rem; margin: 18px 0; letter-spacing: .02em; text-transform: uppercase; }


.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: #1E2330; }





.auth-form { display: flex; flex-direction: column; gap: 16px; }


.auth-field { display: flex; flex-direction: column; gap: 6px; }


.auth-field label { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 600; color: #ADB6C5 !important; }


.auth-field label a { font-size: .78rem; color: #818CF8 !important; text-decoration: none; font-weight: 500; }


.auth-field label a:hover { color: #A5B4FC !important; text-decoration: underline; }





.input-wrap { position: relative; }


.auth-input {


  width: 100% !important; padding: 13px 16px !important;


  background: var(--bg-input, #0F1115) !important; border: 1.5px solid var(--border-default, #303744) !important;


  border-radius: 12px !important; color: var(--text-primary, #EEF1F6) !important;


  font-size: .95rem !important; font-family: inherit !important; outline: none !important;


  -webkit-text-fill-color: var(--text-primary, #EEF1F6) !important;


  transition: border-color .2s, box-shadow .2s !important;


}


.auth-input.has-icon { padding-right: 46px !important; }


.auth-input::placeholder { color: var(--text-muted, #4A5568) !important; -webkit-text-fill-color: var(--text-muted, #4A5568) !important; opacity: 1 !important; }


.auth-input:focus { border-color: var(--accent, #818CF8) !important; box-shadow: 0 0 0 3px var(--accent-soft, rgba(129,140,248,.18)) !important; }


.auth-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--bg-input, #0F1115) inset !important; -webkit-text-fill-color: var(--text-primary, #EEF1F6) !important; border-color: var(--accent, rgba(129,140,248,.4)) !important; }





.eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #4A5568; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; transition: color .15s; }


.eye-btn:hover { color: #818CF8; }





.auth-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .84rem; color: #6B7A92 !important; user-select: none; }


.auth-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #818CF8; cursor: pointer; flex-shrink: 0; }





.btn-submit {


  display: flex !important; align-items: center !important; justify-content: center !important;


  gap: 8px !important; width: 100% !important; padding: 14px 20px !important;


  background: linear-gradient(135deg, #818CF8, #A5B4FC) !important;


  border: none !important; border-radius: 12px !important;


  color: #FFFFFF !important; font-size: .95rem !important; font-weight: 700 !important;


  font-family: inherit !important; cursor: pointer !important; letter-spacing: .01em !important;


  transition: opacity .2s, transform .15s, box-shadow .2s !important;


  box-shadow: 0 4px 20px rgba(129,140,248,.35) !important; margin-top: 4px !important;


}


.btn-submit:hover { opacity: .9 !important; transform: translateY(-1px) !important; box-shadow: 0 8px 28px rgba(129,140,248,.45) !important; }


.btn-submit:active { transform: translateY(0) !important; }


.btn-submit:disabled { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; }





.auth-footer { text-align: center; margin-top: 24px; font-size: .84rem; color: #6B7A92 !important; }


.auth-footer a { color: #818CF8 !important; text-decoration: none; font-weight: 600; }


.auth-footer a:hover { color: #A5B4FC !important; text-decoration: underline; }





.auth-trust { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; flex-wrap: wrap; }


.auth-trust-item { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: #4A5568 !important; }





.main-content--auth { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 100dvh !important; width: 100% !important; padding: 0 !important; background: #0A0C12 !important; }


.main-content--auth .auth-page-wrap { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px 16px !important; width: 100% !important; min-height: 100dvh !important; }


.app-with-sidebar:has(.sidebar--auth) { flex-direction: column !important; }


.app-with-sidebar:has(.sidebar--auth) .main-content--auth { width: 100% !important; flex: 1 !important; }





@media (max-width: 480px) {


  .auth-card { padding: 28px 20px 24px !important; border-radius: 20px !important; }


  .auth-head-title { font-size: 1.35rem !important; }


  .auth-page-wrap { padding: 20px 12px 40px !important; align-items: flex-start; }


  .auth-bg-orb-1 { width: 280px; height: 280px; opacity: .4; }


  .auth-bg-orb-2 { width: 220px; height: 220px; opacity: .3; }


  .auth-logo-img { width: 32px; height: 32px; }


  .auth-sep { margin: 14px 0; }


  .auth-trust { gap: 14px; }


}





@media (max-width: 360px) {


  .auth-card { padding: 22px 14px 20px !important; border-radius: 16px !important; }


  .auth-head-title { font-size: 1.2rem !important; }


  .btn-submit { padding: 13px 16px !important; font-size: .9rem !important; }


  .auth-input { padding: 12px 14px !important; font-size: .9rem !important; }


}





@supports (padding: max(0px)) {


  .auth-page-wrap { padding-bottom: max(48px, env(safe-area-inset-bottom)) !important; }


}





@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }