/* ==========================================================================
   Yemmak B2B — Login sayfası (split-screen)
   theme.css'in CSS variables'ı üzerine inşa edilir.
   ========================================================================== */

.y-login-page {
	margin: 0;
	min-height: 100vh;
	background: var(--y-bg);
	font-family: var(--y-font);
	color: var(--y-text);
	-webkit-font-smoothing: antialiased;
}

.y-login {
	display: grid;
	grid-template-columns: minmax(540px, 640px) 1fr;
	min-height: 100vh;
}

/* ════════════════════ Sol panel — marka + slogan + kurumsal şerit ════════════════════ */
.y-login__brand-panel {
	position: relative;
	background:
		radial-gradient(ellipse at 110% 0%, rgba(247,148,29,.20) 0%, transparent 55%),
		radial-gradient(ellipse at -10% 110%, rgba(255,255,255,.07) 0%, transparent 55%),
		linear-gradient(135deg, #001a36 0%, #002b5c 45%, #003366 100%);
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}

/* Subtle dot-grid pattern — endüstriyel/teknik kurumsal his */
.y-login__brand-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 0;
}
/* Sağ üstte turuncu glow */
.y-login__brand-panel::after {
	content: '';
	position: absolute;
	top: -160px; right: -160px;
	width: 460px; height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(247,148,29,.22) 0%, transparent 70%);
	pointer-events: none;
}

.y-login__brand-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	padding: 56px 60px 44px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 32px;
}

/* Logo (gerçek görsel — koyu zeminde beyaz versiyona dönüştürüyoruz) */
.y-login__logo {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none !important;
	margin-bottom: auto;
}
.y-login__logo:hover { color: #fff; }
.y-login__logo-img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
	/* Logo orijinal renkleri koyu mavi/turuncu — koyu lacivert zeminde okunabilir olması için
	   beyaz versiyona çeviriyoruz. */
	filter: brightness(0) invert(1);
}
/* Mobile logo beyaz panel üzerinde → orijinal renklerini koru */
.y-login__logo-img--mobile { height: 32px; filter: none; }
.y-login__logo--mobile {
	margin-bottom: 28px;
}

/* Hero — dikeyde ortalanmış (grid 1fr satırı içinde) */
.y-login__hero {
	align-self: center;
	max-width: 540px;
}

/* Eyebrow — küçük üst etiket "1973'ten bu yana ..." */
.y-login__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 14px 6px 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.85);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .02em;
	border-radius: 999px;
	margin-bottom: 22px;
}
.y-login__eyebrow-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--y-accent);
	box-shadow: 0 0 0 4px rgba(247,148,29,.20);
	animation: y-pulse 2.4s ease-in-out infinite;
}
@keyframes y-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(247,148,29,.40); }
	50%      { box-shadow: 0 0 0 6px rgba(247,148,29,.05); }
}

.y-login__title {
	font-size: clamp(26px, 2.8vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 18px;
	letter-spacing: -.018em;
}
.y-login__title-accent {
	display: block;
	color: var(--y-accent);
	margin-top: 6px;
}
.y-login__lede {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255,255,255,.75);
	margin: 0;
	max-width: 500px;
}

/* Decorative thin divider */
.y-login__divider {
	height: 1px;
	width: 64px;
	background: linear-gradient(90deg, var(--y-accent) 0%, rgba(247,148,29,.15) 100%);
	margin: 32px 0 24px;
}

/* Trust strip — 3 mini-rakam */
.y-login__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.y-login__stat {
	border-left: 2px solid rgba(247,148,29,.50);
	padding-left: 14px;
}
.y-login__stat-num {
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.y-login__stat-num span {
	color: var(--y-accent);
	font-weight: 700;
	margin-left: 1px;
}
.y-login__stat-label {
	font-size: 11.5px;
	color: rgba(255,255,255,.65);
	margin-top: 6px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Brand footer — closed-platform rozeti + iletişim */
.y-login__brand-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: rgba(255,255,255,.55);
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.10);
	flex-wrap: wrap;
}
.y-login__brand-foot-left {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px 4px 9px;
	background: rgba(247,148,29,.10);
	border: 1px solid rgba(247,148,29,.28);
	color: #fdba74;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .04em;
	font-size: 11px;
	text-transform: uppercase;
}
.y-login__brand-foot-left i { font-size: 11px; }
.y-login__brand-foot-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.55);
}
.y-login__brand-foot-right a {
	color: rgba(255,255,255,.75);
	text-decoration: none;
	font-weight: 500;
}
.y-login__brand-foot-right a:hover { color: var(--y-accent); }
.y-login__brand-foot-sep { color: rgba(255,255,255,.30); }


/* ════════════════════ Sağ panel — form ════════════════════ */
.y-login__form-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: var(--y-surface);
}
.y-login__form-inner {
	width: 100%;
	max-width: 440px;
}

.y-login__logo--mobile {
	margin-bottom: 32px;
}
.y-login__logo--mobile .y-brand__mark { width: 44px; height: 44px; font-size: 22px; }
.y-login__logo--mobile .y-brand__text strong { color: var(--y-navy); font-size: 16px; }
.y-login__logo--mobile .y-brand__text small  { color: var(--y-muted); }

.y-login__form-head {
	margin-bottom: 28px;
}
.y-login__form-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: var(--y-navy-tint);
	color: var(--y-navy);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	margin-bottom: 14px;
}
.y-login__form-eyebrow i { font-size: 12px; }

.y-login__form-head h2 {
	font-size: 28px;
	font-weight: 800;
	color: var(--y-text);
	margin: 0 0 8px;
	letter-spacing: -.01em;
}
.y-login__form-head p {
	font-size: 14px;
	color: var(--y-muted);
	margin: 0;
	line-height: 1.55;
}

/* Field */
.y-field { display: block; }
.y-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--y-text);
	margin-bottom: 7px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.y-field__label i { color: var(--y-navy); font-size: 13px; }

.y-field__input {
	border: 1px solid var(--y-border);
	border-radius: var(--y-radius-sm);
	background: var(--y-input-bg);
	padding: 12px 14px;
	font-size: 14.5px;
	transition: border-color .15s, box-shadow .15s, background .15s;
	font-family: inherit;
}
.y-field__input:focus {
	border-color: var(--y-navy);
	background: #fff;
	box-shadow: 0 0 0 4px var(--y-navy-soft);
}

.y-field__pwd {
	position: relative;
}
.y-field__pwd .y-field__input { padding-right: 44px; }
.y-field__pwd-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	border: 0;
	background: transparent;
	color: var(--y-muted);
	border-radius: 7px;
	cursor: pointer;
	display: grid; place-items: center;
	transition: background .15s, color .15s;
}
.y-field__pwd-toggle:hover { background: var(--y-input-bg); color: var(--y-navy); }


/* Submit */
.y-login__submit {
	background: linear-gradient(135deg, var(--y-navy) 0%, var(--y-navy-light) 100%);
	border: 0;
	color: #fff;
	font-weight: 600;
	padding: 14px 22px;
	border-radius: var(--y-radius-sm);
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: transform .12s, box-shadow .2s, background .2s;
	box-shadow: 0 4px 14px rgba(0,51,102,.30);
	font-size: 15px;
}
.y-login__submit:hover {
	background: linear-gradient(135deg, var(--y-navy-dark) 0%, var(--y-navy) 100%);
	color: #fff;
	box-shadow: 0 8px 22px rgba(0,51,102,.40);
	transform: translateY(-1px);
}
.y-login__submit:active { transform: translateY(0); }
.y-login__submit i { font-size: 17px; }


/* Hint */
.y-login__hint {
	margin-top: 22px;
	padding: 14px 16px;
	background: var(--y-navy-tint);
	border-radius: var(--y-radius-sm);
	border-left: 3px solid var(--y-navy);
	font-size: 12.5px;
	color: var(--y-muted);
	line-height: 1.55;
	display: flex;
	gap: 9px;
}
.y-login__hint i { color: var(--y-navy); flex-shrink: 0; margin-top: 2px; }
.y-login__hint a {
	color: var(--y-navy);
	font-weight: 600;
	text-decoration: none;
}
.y-login__hint a:hover { color: var(--y-accent); text-decoration: none; }


/* Form footer */
.y-login__form-foot {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--y-border);
	font-size: 13px;
}
.y-login__form-foot a {
	color: var(--y-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.y-login__form-foot a:hover { color: var(--y-navy); }


/* ════════════════════ Mobile ════════════════════ */
@media (max-width: 991px) {
	.y-login {
		grid-template-columns: 1fr;
	}
	.y-login__brand-panel { display: none; }
	.y-login__form-panel { padding: 32px 20px; }
}
@media (max-width: 480px) {
	.y-login__form-head h2 { font-size: 24px; }
}