/* Perdele Müşteri Paneli - v1.11.0: Google ile Giriş Yap butonu.
 *
 * Artık "yedek" değil - Google Site Kit'in kendi native butonu (küçük,
 * beyaz/çerçeveli, tam genişlik olmayan) her zaman gizlenir; görünen TEK
 * Google butonu budur (bkz. assets/google-signin.js). Facebook butonuyla
 * (bkz. assets/register.css'teki .perdele-fb-button-wrap) aynı
 * boy/çizgi/ayraç düzenini ve aynı 400px genişlik sınırını kullanır. */

/* Google Client ID girildiyse (bu dosya o zaman yüklenir), Site Kit'in
 * kendi butonu her zaman gizlenir - iki Google butonu birden görünmesin. */
.googlesitekit-sign-in-with-google__frontend-output-button {
	display: none !important;
}

/* v1.11.0: Facebook butonuyla (bkz. assets/register.css'teki
 * .perdele-fb-button-wrap) birebir aynı genişlikte olması için aynı 400px
 * sınırı burada da (iç buton kutusuyla aynı değer) uygulanıyor. */
.perdele-google-fallback {
	margin-bottom: 14px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* Facebook etkin değilse bu buton SON sosyal giriş butonu olur - "VEYA"
 * ayracı buraya taşınır (bkz. body.perdele-fb-enabled -
 * maybe_add_fb_body_class(), aynı mantık .perdele-fb-button-wrap için de
 * geçerli). Facebook etkinken ayracı zaten o taşıyor, burada tekrar
 * basılmaz. */
body:not(.perdele-fb-enabled) .perdele-google-fallback {
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 22px;
}

body:not(.perdele-fb-enabled) .perdele-google-fallback::after {
	content: 'veya';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX( -50% );
	background: #fff;
	padding: 0 12px;
	font-size: 12px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

body:not(.perdele-fb-enabled) .perdele-google-fallback::before {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	height: 1px;
	background: #e2e2e2;
	z-index: 0;
}

/* Google'ın resmi butonu (bir iframe içinde render edilir) en fazla ~400px
 * genişlikte çizilebiliyor (Google'ın kendi kütüphane kısıtı, CSS ile
 * aşılamaz) - Facebook butonu gibi tam boydan boya uzayamadığı için
 * kutunun izin verdiği azami genişlikte ortalanır. */
.perdele-google-fallback-btn {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.perdele-google-fallback-error {
	color: #b32d2e;
	margin-top: 8px;
	font-size: 13px;
	text-align: center;
}