/* =====================================================
   Özelleştirilmiş Üye Giriş Ekranı (Eklenti) — posenda.com
   Light varsayılan + Dark mod desteği
   ===================================================== */

:root {
	--oug-vurgu:      #4F6BFF;
	--oug-vurgu-2:    #14B8A6;
	--oug-zemin-acik: #F2F5FC;
	--oug-zemin-koyu: #0A0F24;
	--oug-govde:      "Inter", system-ui, -apple-system, sans-serif;
	--oug-baslik-f:   "Space Grotesk", var(--oug-govde);
}

/* ---------- Tema paletleri ---------- */
.oug-kapsul[data-oug-tema="acik"] {
	--oug-zemin:      var(--oug-zemin-acik);
	--oug-metin:      #1B2340;
	--oug-soluk:      rgba(27, 35, 64, .62);
	--oug-kart-zemin: rgba(255, 255, 255, .78);
	--oug-cizgi:      rgba(27, 35, 64, .12);
	--oug-alan-zemin: rgba(27, 35, 64, .045);
	--oug-alan-odak:  #FFFFFF;
	--oug-golge:      0 24px 60px rgba(27, 35, 64, .14), 0 2px 8px rgba(27, 35, 64, .06);
	--oug-aurora-op:  .38;
	--oug-nokta:      rgba(27, 35, 64, .16);
	--oug-hata-metin: #C2273B;
	--oug-hata-zemin: rgba(220, 60, 80, .09);
	--oug-hata-cizgi: rgba(220, 60, 80, .3);
}

.oug-kapsul[data-oug-tema="koyu"] {
	--oug-zemin:      var(--oug-zemin-koyu);
	--oug-metin:      #EDF0FF;
	--oug-soluk:      rgba(237, 240, 255, .62);
	--oug-kart-zemin: rgba(255, 255, 255, .06);
	--oug-cizgi:      rgba(255, 255, 255, .12);
	--oug-alan-zemin: rgba(255, 255, 255, .05);
	--oug-alan-odak:  rgba(255, 255, 255, .07);
	--oug-golge:      0 24px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
	--oug-aurora-op:  .5;
	--oug-nokta:      rgba(255, 255, 255, .10);
	--oug-hata-metin: #FF6B7A;
	--oug-hata-zemin: rgba(255, 107, 122, .12);
	--oug-hata-cizgi: rgba(255, 107, 122, .35);
}

/* ---------- Kapsül ---------- */
.oug-kapsul {
	font-family: var(--oug-govde);
	color: var(--oug-metin);
	transition: background-color .4s ease, color .4s ease;
}

.oug-kapsul * { box-sizing: border-box; }

/* Tam ekran modu */
.oug-kapsul.oug-tam {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--oug-zemin);
	overflow: hidden;
}

body.oug-tam-ekran {
	margin: 0;
	padding: 0;
}

/* Gömülü (kısa kod) modu */
.oug-kapsul.oug-gomulu {
	position: relative;
	padding: 56px 16px;
	border-radius: 24px;
	background: var(--oug-zemin);
	overflow: hidden;
	display: flex;
	justify-content: center;
}

/* ---------- Aurora arka plan ---------- */
.oug-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.oug-kure {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: var(--oug-aurora-op);
	will-change: transform;
	transition: opacity .4s ease;
}

.oug-kure-1 {
	width: 55vmax; height: 55vmax;
	left: -18vmax; top: -22vmax;
	background: radial-gradient(circle at 30% 30%, var(--oug-vurgu), transparent 65%);
	animation: oug-suzul-1 26s ease-in-out infinite alternate;
}

.oug-kure-2 {
	width: 48vmax; height: 48vmax;
	right: -16vmax; bottom: -20vmax;
	background: radial-gradient(circle at 60% 60%, var(--oug-vurgu-2), transparent 65%);
	animation: oug-suzul-2 32s ease-in-out infinite alternate;
}

.oug-kure-3 {
	width: 34vmax; height: 34vmax;
	left: 52%; top: 58%;
	background: radial-gradient(circle at 50% 40%, #8B5CF6, transparent 62%);
	opacity: calc(var(--oug-aurora-op) * .6);
	animation: oug-suzul-3 38s ease-in-out infinite alternate;
}

@keyframes oug-suzul-1 { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes oug-suzul-2 { to { transform: translate(-8vmax, -6vmax) scale(1.08); } }
@keyframes oug-suzul-3 { to { transform: translate(-6vmax, -9vmax) rotate(12deg); } }

.oug-izgara {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--oug-nokta) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 100%);
}

/* ---------- Tema geçiş düğmesi ---------- */
.oug-tema-dugme {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 5;
	width: 46px;
	height: 46px;
	appearance: none;
	border: 1px solid var(--oug-cizgi);
	border-radius: 50%;
	background: var(--oug-kart-zemin);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	transition: transform .2s ease, box-shadow .2s ease;
}

.oug-tema-dugme:hover {
	transform: rotate(18deg) scale(1.08);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}

.oug-tema-dugme:active { transform: scale(.95); }

/* ---------- Sahne & kart ---------- */
.oug-sahne {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	gap: 20px;
}

.oug-kart {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: var(--oug-kart-zemin);
	border: 1px solid var(--oug-cizgi);
	border-radius: 22px;
	padding: 40px 36px 34px;
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	box-shadow: var(--oug-golge);
	animation: oug-kart-gelis .7s cubic-bezier(.22, 1, .36, 1) both;
	transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

@keyframes oug-kart-gelis {
	from { opacity: 0; transform: translateY(26px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.oug-logo {
	text-align: center;
	margin-bottom: 22px;
	animation: oug-yumusak-gelis .8s .1s cubic-bezier(.22,1,.36,1) both;
}

.oug-logo img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

@keyframes oug-yumusak-gelis {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.oug-baslik {
	font-family: var(--oug-baslik-f);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -.02em;
	text-align: center;
	color: var(--oug-metin);
	margin: 0 0 8px;
}

.oug-alt-baslik {
	text-align: center;
	color: var(--oug-soluk);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0 0 24px;
}

/* ---------- Hata kutusu ---------- */
.oug-hata {
	background: var(--oug-hata-zemin);
	border: 1px solid var(--oug-hata-cizgi);
	color: var(--oug-hata-metin);
	font-size: 13.5px;
	padding: 11px 14px;
	border-radius: 12px;
	margin-bottom: 18px;
	animation: oug-sars .4s ease;
}

@keyframes oug-sars {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* ---------- Sekmeler ---------- */
.oug-sekmeler {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--oug-alan-zemin);
	border: 1px solid var(--oug-cizgi);
	border-radius: 14px;
	padding: 5px;
	margin-bottom: 24px;
}

.oug-sekme {
	position: relative;
	z-index: 1;
	appearance: none;
	background: none;
	border: 0;
	color: var(--oug-soluk);
	font-family: var(--oug-govde);
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 0;
	border-radius: 10px;
	cursor: pointer;
	transition: color .25s ease;
}

.oug-sekme[aria-selected="true"] { color: #fff; }

.oug-sekme-isaret {
	position: absolute;
	top: 5px; bottom: 5px; left: 5px;
	width: calc(50% - 5px);
	border-radius: 10px;
	background: linear-gradient(135deg, var(--oug-vurgu), color-mix(in srgb, var(--oug-vurgu) 60%, var(--oug-vurgu-2)));
	box-shadow: 0 6px 18px color-mix(in srgb, var(--oug-vurgu) 45%, transparent);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.oug-sekmeler[data-aktif="kayit"] .oug-sekme-isaret {
	transform: translateX(100%);
}

/* ---------- Panolar ---------- */
.oug-panolar { position: relative; }

.oug-pano {
	display: none;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.oug-pano.oug-acik {
	display: flex;
	animation: oug-pano-gecis .35s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes oug-pano-gecis {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Form alanları ---------- */
.oug-alan { display: block; }

.oug-alan > span {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--oug-soluk);
	margin-bottom: 7px;
}

.oug-kapsul .oug-alan input[type="text"],
.oug-kapsul .oug-alan input[type="email"],
.oug-kapsul .oug-alan input[type="password"] {
	width: 100%;
	font-family: var(--oug-govde);
	font-size: 15px;
	color: var(--oug-metin);
	background: var(--oug-alan-zemin);
	border: 1px solid var(--oug-cizgi);
	border-radius: 12px;
	padding: 13px 15px;
	outline: none;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.oug-kapsul .oug-alan input:focus {
	border-color: var(--oug-vurgu);
	background: var(--oug-alan-odak);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--oug-vurgu) 20%, transparent);
}

.oug-sifre-sar {
	position: relative;
	display: block;
}

.oug-kapsul .oug-sifre-sar input { padding-right: 46px; }

.oug-sifre-goster {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	background: none;
	border: 0;
	font-size: 16px;
	line-height: 1;
	padding: 8px;
	cursor: pointer;
	color: var(--oug-soluk);
	border-radius: 8px;
	transition: color .2s ease;
}

.oug-sifre-goster:hover { color: var(--oug-metin); }

.oug-ikili {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.oug-satir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
}

.oug-onay {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--oug-soluk);
	cursor: pointer;
	user-select: none;
}

.oug-onay input {
	width: 16px; height: 16px;
	accent-color: var(--oug-vurgu);
}

.oug-baglanti {
	color: var(--oug-vurgu);
	text-decoration: none;
	font-weight: 500;
	transition: opacity .2s ease;
}

.oug-baglanti:hover { opacity: .8; text-decoration: underline; }

.oug-ipucu {
	font-size: 12.5px;
	color: var(--oug-soluk);
	margin: -6px 0 0;
}

/* ---------- Butonlar ---------- */
.oug-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--oug-govde);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--oug-vurgu), color-mix(in srgb, var(--oug-vurgu) 55%, var(--oug-vurgu-2)));
	border: 0;
	border-radius: 12px;
	padding: 14px 26px;
	cursor: pointer;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--oug-vurgu) 35%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.oug-buton:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	color: #fff;
	box-shadow: 0 14px 32px color-mix(in srgb, var(--oug-vurgu) 45%, transparent);
}

.oug-buton:active { transform: translateY(0); }

.oug-buton-tam { width: 100%; margin-top: 4px; }

.oug-buton-sade {
	background: var(--oug-alan-zemin);
	border: 1px solid var(--oug-cizgi);
	color: var(--oug-metin);
	box-shadow: none;
}

.oug-buton-sade:hover { color: var(--oug-metin); }

/* ---------- Hoş geldin ---------- */
.oug-hosgeldin { text-align: center; }

.oug-hosgeldin-butonlar {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

/* ---------- Alt bilgi ---------- */
.oug-alt-bilgi {
	position: relative;
	z-index: 1;
	color: var(--oug-soluk);
	font-size: 12.5px;
	margin: 0;
	text-align: center;
	animation: oug-yumusak-gelis 1s .25s both;
}

/* ---------- Gizli bal küpü ---------- */
.oug-gizli {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

/* ---------- Duyarlılık ---------- */
@media (max-width: 480px) {
	.oug-kart { padding: 30px 22px 26px; border-radius: 18px; }
	.oug-baslik { font-size: 22px; }
	.oug-ikili { grid-template-columns: 1fr; }
	.oug-tema-dugme { top: 14px; right: 14px; width: 42px; height: 42px; }
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
	.oug-kapsul *,
	.oug-kapsul *::before,
	.oug-kapsul *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}