/* ──────────────────────────────────────────────────────────────
   Ortak giriş (auth) teması — Login, Şifremi Unuttum,
   Firma Kayıt ve Yeni Kullanıcı Talebi sayfaları bunu kullanır.
   Layout: Views/Shared/_AuthLayout.cshtml
   ────────────────────────────────────────────────────────────── */

:root {
	--navy:       #0A1B38;
	--navy-mid:   #12305E;
	--navy-light: #1E4A9E;
	--gold:       #C9A84C;
	--gold-light: #E2C46A;
	--surface:    #FFFFFF;
	--border:     #E3E8F0;
	--text-main:  #16233F;
	--text-muted: #7A879F;
}

body.auth-bg { background-color: #E8ECF3 !important; }

/* Kartı çevreleyen dış zemin — hafif dokulu, kartın altında zemin hissi verir */
.auth-root {
	min-height: 100vh;
	padding: 12px;
	background:
		radial-gradient(1200px 600px at 15% -10%, rgba(30,74,158,.06), transparent 60%),
		radial-gradient(1000px 700px at 100% 110%, rgba(10,27,56,.06), transparent 55%),
		#C9D1E0;
}

/* Yüzen kart: yuvarlatılmış köşeler + çok katmanlı yumuşak gölge */
.auth-split {
	min-height: calc(100vh - 24px);
	border-radius: 18px;
	overflow: hidden;
	background: var(--surface);
	box-shadow:
		0 0 16px rgba(16,35,63,.16),
		0 8px 30px rgba(16,35,63,.15),
		0 16px 50px rgba(16,35,63,.12),
		0 30px 80px rgba(16,35,63,.08);
}

@media (max-width: 991.98px) {
	.auth-root { padding: 8px; }
	.auth-split { border-radius: 14px; min-height: calc(100vh - 16px); }
}

/* ── Sol sütun ─────────────────────────────────── */
.auth-left {
	background-color: var(--surface);
	position: relative;
	overflow: hidden;
}

/* Dekoratif dalga deseni */
.auth-left::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	background-image:
		radial-gradient(120% 100% at 50% 100%, rgba(30,74,158,.05) 0%, transparent 60%),
		repeating-radial-gradient(circle at 12% 118%, transparent 0 38px, rgba(18,48,94,.045) 38px 39px);
	pointer-events: none;
	z-index: 0;
}

.auth-left > * { position: relative; z-index: 1; }

.auth-title {
	color: var(--navy);
	font-weight: 800;
	letter-spacing: -.01em;
	margin-bottom: .35rem;
}

.auth-title .auth-title-accent {
	color: var(--navy-light);
	font-weight: 700;
}

.auth-logo {
	height: 64px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: 6px;
}

.auth-title-rule {
	width: 132px;
	height: 3px;
	margin: 0 auto .9rem;
	background: var(--gold);
	border-radius: 2px;
}

.auth-subtitle {
	color: var(--text-muted);
	font-size: .95rem;
}

/* Başlık bloğu — tüm auth sayfalarında ortak */
.auth-heading h1,
.auth-heading .auth-heading-title {
	color: var(--navy) !important;
	font-weight: 800;
	letter-spacing: -.01em;
}

.auth-heading .auth-heading-desc {
	color: var(--text-muted);
	font-size: .95rem;
}

/* ── Form alanları ─────────────────────────────── */
.auth-label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--text-main);
	margin-bottom: 6px;
}

.auth-label .req { color: #EF4444; }

.auth-hint {
	font-size: .72rem;
	color: var(--text-muted);
	margin-top: 4px;
}

/* Alan içi ikonlu inputlar */
.auth-field { position: relative; }

.auth-field .auth-field-icon {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: .95rem;
	pointer-events: none;
}

.auth-field .form-control {
	height: 52px;
	padding-left: 46px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: #fff !important;
	color: var(--text-main);
}

/* İkonsuz alanlar da aynı görsel dili kullansın */
.auth-left .form-control,
.auth-left .form-select {
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: #fff !important;
	color: var(--text-main);
}

.auth-left textarea.form-control { height: auto; padding-left: 16px; }

.auth-left .form-control:focus,
.auth-left .form-select:focus,
.auth-field .form-control:focus {
	border-color: var(--navy-light) !important;
	box-shadow: 0 0 0 3px rgba(30,74,158,.10) !important;
}

.auth-left .form-control.is-invalid {
	border-color: #EF4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,.10) !important;
}

.auth-field .auth-pw-toggle {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--text-muted);
	padding: 4px;
	line-height: 1;
	cursor: pointer;
}

.auth-field .auth-pw-toggle:hover { color: var(--navy-light); }

/* Giriş / gönder butonu */
.btn.btn-primary.auth-submit,
.auth-left .btn.btn-primary {
	height: 56px;
	border-radius: 10px;
	border: 0;
	background: linear-gradient(135deg, var(--navy-light), var(--navy-mid)) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 1rem;
	position: relative;
	box-shadow: 0 10px 24px -12px rgba(18,48,94,.75);
	transition: transform .15s ease, box-shadow .15s ease;
}

.btn.btn-primary.auth-submit:hover,
.auth-left .btn.btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -12px rgba(18,48,94,.85);
}

.auth-left .btn.btn-primary:disabled { opacity: .7; transform: none; }

.auth-submit-arrow {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
}

.link-primary, .link-gold {
	color: var(--gold) !important;
	text-decoration: none;
}

.link-primary:hover, .link-gold:hover { color: var(--gold-light) !important; }

.separator.separator-content { border-color: var(--border) !important; }
.separator.separator-content span { color: var(--text-muted) !important; }

/* ── Uyarı kutuları ────────────────────────────── */
.auth-alert {
	padding: 12px 16px;
	border-radius: 10px;
	font-size: .85rem;
	border: 1px solid transparent;
}

.auth-alert.success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.auth-alert.error   { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

/* ── Adım indikatörü (Şifremi Unuttum) ─────────── */
.step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
}

.step-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted);
	background: #fff;
	transition: all .25s;
}

.step-dot.active {
	border-color: var(--navy-light);
	background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(18,48,94,.9);
}

.step-dot.done { border-color: var(--gold); background: var(--gold); color: #fff; }

.step-line {
	flex: 1;
	max-width: 56px;
	height: 2px;
	background: var(--border);
	transition: background .25s;
}

.step-line.done { background: var(--gold); }

#verify_code {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 12px;
	text-align: center;
	padding: 14px 8px;
	height: 64px;
}

/* ── Güven kartları ────────────────────────────── */
.auth-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.auth-trust-card {
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #fff;
	padding: 16px 8px;
	text-align: center;
	transition: border-color .2s ease, transform .2s ease;
}

.auth-trust-card:hover {
	border-color: var(--navy-light);
	transform: translateY(-2px);
}

.auth-trust-icon {
	width: 38px;
	height: 38px;
	margin: 0 auto 8px;
	border-radius: 50%;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--navy-mid);
	font-size: .95rem;
}

.auth-trust-title {
	font-size: .78rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.25;
}

.auth-trust-desc {
	margin-top: 4px;
	font-size: .68rem;
	color: var(--text-muted);
	line-height: 1.3;
}

/* ── Alt bilgi ─────────────────────────────────── */
/* Türkçe en solda sabit; linkler tüm genişlik boyunca ortalanır */
.auth-lang {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.auth-footer-links {
	gap: 10px 22px;
	row-gap: 8px;
}

@media (max-width: 575.98px) {
	.auth-lang { position: static; transform: none; }
}

.auth-footer-links a {
	position: relative;
	color: var(--navy-mid) !important;
	text-decoration: none;
	transition: color .2s;
}

/* Linkler arası ince ayraç — orantılı, ortalanmış görünüm */
.auth-footer-links a:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: var(--border);
}

.auth-footer-links a:hover { color: var(--gold) !important; }

/* ── Sağ panel ─────────────────────────────────── */
.auth-aside {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Uzun formlarda (kayıt) panel sayfa boyu uzayıp görseli kırpmasın:
   ekran yüksekliğinde sabit kalır, form kaydırılırken yerinde durur. */
@media (min-width: 992px) {
	.auth-split { overflow: clip; } /* hidden sticky'yi bozar; clip bozmaz */
	.auth-aside {
		position: sticky;
		top: 12px;
		align-self: flex-start;
		height: calc(100vh - 24px);
	}
}

@media (max-width: 991.98px) {
	.auth-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ── Belge yükleme alanları ─────────────────────────
   Firma Kayıt formunda kullanılır. Dosya inputu görsel olarak gizlenir
   (ekran okuyucu için erişilebilir kalır), tıklama hedefi label'dır. */
.auth-upload { position: relative; }

.auth-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.auth-upload-drop {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: #FBFCFE;
	color: var(--text-muted);
	font-size: .85rem;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.auth-upload-drop:hover,
.auth-upload input[type="file"]:focus-visible + .auth-upload-drop {
	border-color: var(--navy-light);
	background: #F5F8FD;
	color: var(--text-main);
}

.auth-upload input[type="file"]:focus-visible + .auth-upload-drop {
	box-shadow: 0 0 0 3px rgba(30,74,158,.10);
}

.auth-upload-drop i { font-size: 1.05rem; color: var(--navy-light); }

/* Dosya seçilmiş durum — kesikli çerçeve dolu çerçeveye döner */
.auth-upload.has-file .auth-upload-drop {
	border-style: solid;
	border-color: var(--navy-light);
	background: #fff;
	color: var(--text-main);
}

.auth-upload-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.auth-upload-size {
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 600;
	color: var(--navy-light);
	background: rgba(30,74,158,.08);
	border-radius: 999px;
	padding: 3px 9px;
}

.auth-upload-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--text-muted);
	/* 44px dokunma hedefi: görsel ikon küçük, tıklama alanı geniş */
	width: 44px;
	height: 44px;
	border-radius: 8px;
	cursor: pointer;
	line-height: 1;
}

/* Dosya adı, kaldır düğmesinin altına kaymasın */
.auth-upload.has-file .auth-upload-drop { padding-right: 52px; }

.auth-upload-clear:hover { color: #EF4444; background: rgba(239,68,68,.08); }

/* Firma görselleri önizleme ızgarası */
.auth-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.auth-thumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: #F2F5FA;
}

.auth-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.auth-thumb-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: rgba(10,27,56,.72);
	color: #fff;
	font-size: .7rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-thumb-remove:hover { background: #EF4444; }

/* Sıkıştırma sırasında gösterilen durum satırı */
.auth-upload-status {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: var(--text-muted);
	margin-top: 10px;
}

.auth-upload-status.is-busy { display: flex; }

/* ── SMS doğrulama (Account/Verify) ────────────────
   Kayıtlı numara kartı, 6 haneli kod alanı, sayaçlı
   "Tekrar gönder" düğmesi ve destek satırı. */
.auth-phone-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #F7F9FC;
}

.auth-phone-card-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(30,74,158,.08);
	color: var(--navy-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
}

.auth-phone-card-body { flex: 1 1 auto; min-width: 0; }

.auth-phone-card-label {
	font-size: .72rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.auth-phone-card-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.auth-phone-card-edit {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--navy-light);
	font-size: .82rem;
	font-weight: 600;
	/* 44px dokunma hedefi */
	min-height: 44px;
	padding: 0 8px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
}

.auth-phone-card-edit:hover { background: rgba(30,74,158,.08); }
.auth-phone-card-edit:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }

@media (max-width: 420px) {
	.auth-phone-card { flex-wrap: wrap; }
	.auth-phone-card-edit { flex-basis: 100%; text-align: left; padding-left: 58px; min-height: 40px; }
}

/* 6 haneli kod alanı: geniş harf aralığı, ortalı, tabular rakam */
.auth-left .form-control.auth-otp-input {
	height: 64px;
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: .45em;
	/* letter-spacing son karakterden sonra da boşluk bırakır; sola kaydırarak ortala */
	padding-left: calc(16px + .45em);
	padding-right: 16px;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
	caret-color: var(--navy-light);
}

.auth-left .form-control.auth-otp-input::placeholder {
	color: #C5CCDA;
	font-weight: 500;
}

.auth-verify-reason {
	display: inline-flex;
	align-items: center;
	font-size: .8rem;
	font-weight: 600;
	color: var(--navy-light);
	background: rgba(30,74,158,.08);
	border-radius: 999px;
	padding: 6px 14px;
}

.auth-alert.info { background: #EFF6FF; color: #1E3A8A; border-color: #BFDBFE; }

/* "Tekrar gönder (59)" — disabled attribute yerine aria-disabled: sayaç bitince odak alabilsin */
.auth-resend-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

.auth-resend {
	border: 0;
	background: transparent;
	color: var(--gold);
	font-size: .9rem;
	font-weight: 600;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 8px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.auth-resend:hover { color: var(--gold-light); }
.auth-resend:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }
.auth-resend[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.auth-resend[aria-disabled="true"]:hover { color: var(--text-muted); }
.auth-resend-sep { color: var(--border); font-weight: 700; }

.auth-contact {
	text-align: center;
	font-size: .82rem;
	color: var(--text-muted);
	padding-top: 14px;
	border-top: 1px dashed var(--border);
}

.auth-contact a {
	color: var(--navy-light);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.auth-contact a:hover { color: var(--gold); }

.auth-back-link {
	font-size: .82rem;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
}

.auth-back-link:hover { color: var(--navy-light); }