/* ==========================================================================
   RS Emlak — giriş ekranı (/panelgiris)
   main.css değişkenlerini kullanır. Mobil: üstte küçük logo + kart.
   Masaüstü: solda lacivert marka paneli (tam logo), sağda form kartı.
   ========================================================================== */

.rs-auth-body { padding-bottom: 0; background: var(--mist); min-height: 100vh; min-height: 100dvh; }
.rs-auth-body .cookie-bar, .rs-auth-body .wa-float, .rs-auth-body .bottom-nav { display: none !important; }

.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- Marka paneli (yalnızca geniş ekran) ---------- */
.auth-brand { display: none; }

/* ---------- Form tarafı ---------- */
.auth-main {
	flex: 1;
	display: flex; flex-direction: column; align-items: center;
	padding: max(18px, env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom));
	background:
		radial-gradient(90% 150px at 50% 0, rgba(214, 179, 106, .22), transparent 70%) no-repeat,
		linear-gradient(170deg, #1b2738 0%, var(--ink) 55%, var(--ink-2) 100%) top / 100% 168px no-repeat,
		var(--mist);
}

/* Mobil üst logo */
.auth-mhead {
	display: flex; align-items: center; gap: 12px;
	margin: 8px 0 22px; text-decoration: none; color: #fff;
}
.auth-mhead img { width: 54px; height: 54px; border-radius: 13px; box-shadow: 0 0 0 1.5px rgba(214, 179, 106, .7), 0 8px 22px rgba(0, 0, 0, .35); }
.auth-mhead-text { display: flex; flex-direction: column; line-height: 1.1; }
.auth-mhead-name { font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.auth-mhead-name b { color: var(--gold-2); font-weight: 700; }
.auth-mhead-motto { margin-top: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); opacity: .9; }
.auth-mhead-motto i { font-style: normal; opacity: .55; margin: 0 .15em; }

/* Kart */
.auth-card {
	width: 100%; max-width: 440px;
	background: #fff; border-radius: var(--r-l);
	box-shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 14px 44px rgba(22, 32, 46, .12);
	padding: 24px 20px 24px;
	position: relative; overflow: hidden;
}
.auth-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--gold-ink), var(--gold-2) 50%, var(--gold));
}

/* Sekmeler */
.auth-tabs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	padding: 4px; margin: 4px 0 20px;
	background: var(--mist); border-radius: 12px;
}
.auth-tabs a {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; border-radius: 9px;
	font-weight: 700; font-size: .95rem; color: var(--muted); text-decoration: none;
	transition: background .15s, color .15s, box-shadow .15s;
	-webkit-tap-highlight-color: transparent;
}
.auth-tabs a:hover { color: var(--ink); }
.auth-tabs a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22, 32, 46, .12); }

.auth-title {
	font-family: var(--f-display); font-weight: 600; letter-spacing: .02em;
	font-size: 1.55rem; margin: 0 0 4px; color: var(--ink);
}
.auth-sub { color: var(--muted); font-size: .95rem; margin: 0 0 18px; line-height: 1.5; }

.auth-msg { margin: 0 0 16px; line-height: 1.45; }
.auth-msg:empty { display: none; }

/* Alanlar */
.auth-form .field { margin-bottom: 14px; }
.auth-form .input { min-height: 50px; font-size: 16px; }
.auth-field.is-invalid .input { border-color: var(--red); }
.auth-field.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }
.auth-opt { font-weight: 500; font-style: normal; color: var(--muted); font-size: .8rem; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.auth-label-row label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.auth-label-row + .auth-field { margin-top: 0; }
.auth-link { font-size: .875rem; font-weight: 700; color: var(--gold-ink); text-decoration: none; padding: 6px 0; }
.auth-link:hover { text-decoration: underline; color: var(--ink); }

/* Şifre göster/gizle */
.auth-pass { position: relative; }
.auth-pass .input { padding-right: 54px; }
.auth-eye {
	position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: var(--ink); }
.auth-eye[aria-pressed="true"] .rs-i { opacity: .55; }
.no-js .auth-eye { display: none; }

/* Şifre gücü */
.auth-meter { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.auth-meter span { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.auth-meter span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c, var(--red)); border-radius: 3px; transition: width .2s, background .2s; }
.auth-meter em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--muted); min-width: 64px; text-align: right; }

/* Onay kutuları */
.auth-remember { margin: 2px 0 14px; min-height: 28px; align-items: center; }
.auth-remember input { margin: 0; }
.auth-check { margin: 0 0 12px; font-size: .88rem; color: var(--text); }
.auth-check a { color: var(--ink); font-weight: 700; }
.auth-check.is-invalid { color: var(--red); }
.auth-check.is-invalid input { outline: 2px solid var(--red); outline-offset: 1px; }
.auth-form .check input { width: 22px; height: 22px; }

.auth-form .rs-turnstile { margin: 4px 0 14px; }
.auth-submit { min-height: 52px; font-size: 1rem; margin-top: 4px; }
.auth-submit + .btn { margin-top: 10px; min-height: 48px; }

.auth-alt { margin: 18px 0 0; text-align: center; font-size: .92rem; color: var(--muted); }
.auth-alt a { font-weight: 700; color: var(--ink); }

.auth-backlink {
	display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -4px; padding: 6px 4px;
	font-size: .9rem; font-weight: 700; color: var(--muted); text-decoration: none;
}
.auth-backlink:hover { color: var(--ink); }

.auth-center { text-align: center; }
.auth-ico {
	display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center;
	margin: 6px auto 12px; border-radius: 50%; background: var(--gold-wash); color: var(--gold-ink);
}

/* Siteye dön */
.auth-home {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; padding: 10px 14px; min-height: 44px;
	font-size: .92rem; font-weight: 700; color: var(--muted); text-decoration: none; border-radius: var(--r-s);
}
.auth-home:hover { color: var(--ink); background: rgba(22, 32, 46, .04); }

/* Bal küpü gizli */
.auth .rs-hp { position: absolute !important; left: -9999px !important; }

/* ---------- Küçük ekran ince ayar ---------- */
@media (max-width: 380px) {
	.auth-card { padding: 20px 16px 22px; }
	.auth-title { font-size: 1.4rem; }
}

/* ---------- Tablet ve üstü ---------- */
@media (min-width: 640px) {
	.auth-main { padding-top: 28px; padding-bottom: 32px; background-size: auto, 100% 186px, auto; }
	.auth-mhead { margin-bottom: 26px; }
	.auth-card { padding: 32px 32px 32px; }
}

/* ---------- Masaüstü: iki sütun ---------- */
@media (min-width: 960px) {
	.auth { flex-direction: row; }
	.auth-brand {
		position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
		flex: 0 0 46%; max-width: 680px; min-height: 100vh; padding: 48px 48px 84px;
		background:
			radial-gradient(90% 70% at 50% 38%, rgba(214, 179, 106, .16), transparent 62%),
			linear-gradient(160deg, #1b2738 0%, var(--ink) 48%, var(--ink-2) 100%);
		color: #c9d1db; overflow: hidden;
	}
	.auth-brand::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px;
		background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold-2) 70%, transparent);
		opacity: .65;
	}
	.auth-brand-in { width: 100%; max-width: 400px; text-align: center; }
	.auth-logo {
		display: block; width: min(100%, 340px); margin: 0 auto;
		border-radius: 22px; overflow: hidden;
		box-shadow: 0 0 0 1px rgba(214, 179, 106, .45), 0 0 0 7px rgba(214, 179, 106, .08), 0 28px 60px rgba(0, 0, 0, .45);
		transition: transform .3s var(--ease);
	}
	.auth-logo:hover { transform: translateY(-2px); }
	.auth-logo img { width: 100%; height: auto; display: block; }
	.auth-motto {
		display: flex; align-items: center; justify-content: center; gap: .9em;
		margin: 30px 0 12px; font-family: var(--f-display); font-weight: 600;
		font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2);
	}
	.auth-motto i { font-style: normal; color: rgba(214, 179, 106, .45); letter-spacing: 0; margin-left: -.3em; }
	.auth-lead { margin: 0 auto; max-width: 34ch; font-size: .98rem; line-height: 1.65; color: #b7c1cd; }
	.auth-brand-foot {
		position: absolute; left: 0; right: 0; bottom: 28px; margin: 0;
		display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
		font-size: .85rem; color: #8b97a6;
	}
	.auth-brand-foot a { display: inline-flex; align-items: center; gap: 6px; color: #c9d1db; text-decoration: none; font-weight: 600; }
	.auth-brand-foot a:hover { color: var(--gold-2); }
	.auth-brand-foot span::before { content: "•"; margin-right: 18px; color: rgba(214, 179, 106, .5); }

	.auth-main { justify-content: center; padding: 40px 32px; background: radial-gradient(80% 50% at 60% 0%, rgba(214, 179, 106, .10), transparent 60%), var(--mist); }
	.auth-mhead { display: none; }
	.auth-card { max-width: 460px; }
}

@media (min-width: 960px) and (max-height: 760px) {
	.auth-logo { width: min(100%, 260px); }
	.auth-motto { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.auth-logo { transition: none; }
}
