/**
 * Akıllı Yem E-Bülten — ön yüz
 * Author: Adem YÜCEYURT
 *
 * Tüm görünüm, panelden gelen ve sunucuda doğrulanan CSS değişkenleriyle
 * yönetilir. Sınıflar "ayeb-" önekiyle yalıtılmıştır.
 */

.ayeb {
	--ayeb-maks: none;
	--ayeb-dis: 0;
	--ayeb-ic: 0;
	--ayeb-zemin: transparent;
	--ayeb-kenar: 0;
	--ayeb-kose: 0;
	--ayeb-golge: none;
	--ayeb-font: inherit;
	--ayeb-anim-sure: 700ms;
	--ayeb-anim-gecikme: 0ms;
	--ayeb-anim-mesafe: 28px;

	box-sizing: border-box;
	width: 100%;
	max-width: var(--ayeb-maks);
	margin: var(--ayeb-dis);
	padding: var(--ayeb-ic);
	background: var(--ayeb-zemin);
	border: var(--ayeb-kenar);
	border-radius: var(--ayeb-kose);
	box-shadow: var(--ayeb-golge);
	font-family: var(--ayeb-font);
	line-height: 1.5;
}
.ayeb *,
.ayeb *::before,
.ayeb *::after { box-sizing: border-box; }

/* Kutu hizası (en fazla genişlik verildiğinde anlamlıdır) */
.ayeb--kutu-orta { margin-left: auto !important; margin-right: auto !important; }
.ayeb--kutu-sag { margin-left: auto !important; }

/* Yazı hizası */
.ayeb--metin-sol { text-align: left; }
.ayeb--metin-orta { text-align: center; }
.ayeb--metin-sag { text-align: right; }

/* ---------- Başlık ve açıklama ---------- */
.ayeb .ayeb-simge {
	display: inline-flex;
	width: 46px;
	height: 46px;
	margin: 0 0 12px;
	padding: 11px;
	border-radius: 50%;
	color: var(--ayeb-simge-renk, #8A2379);
	background: color-mix(in srgb, var(--ayeb-simge-renk, #8A2379) 12%, transparent);
}
.ayeb .ayeb-simge[hidden] { display: none; }
.ayeb .ayeb-simge svg { width: 100%; height: 100%; display: block; }

.ayeb .ayeb-baslik {
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: var(--ayeb-baslik-boyut, 22px);
	font-weight: var(--ayeb-baslik-kalin, 800);
	line-height: 1.25;
	color: var(--ayeb-baslik-renk, inherit);
	letter-spacing: normal;
	text-transform: none;
}
.ayeb .ayeb-aciklama {
	margin: 0 0 14px;
	font-size: var(--ayeb-aciklama-boyut, 14px);
	line-height: 1.55;
	color: var(--ayeb-aciklama-renk, inherit);
	opacity: .88;
}

/* ---------- Form ---------- */
.ayeb .ayeb-form { margin: 0; }
.ayeb .ayeb-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ayeb--metin-orta .ayeb-satir { justify-content: center; }
.ayeb--metin-sag .ayeb-satir { justify-content: flex-end; }

.ayeb .ayeb-eposta,
.ayeb .ayeb-ad {
	flex: 1 1 200px;
	min-width: 0;
	height: var(--ayeb-yukseklik, 44px);
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--ayeb-girdi-kenar, #E9DFE6);
	border-radius: var(--ayeb-girdi-kose, 10px);
	background: var(--ayeb-girdi-zemin, #FAF7F9);
	color: var(--ayeb-girdi-yazi, #33272F);
	font-family: inherit;
	font-size: var(--ayeb-girdi-boyut, 14px);
	line-height: normal;
	box-shadow: none;
	text-align: left;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ayeb .ayeb-ad[hidden] { display: none; }
.ayeb .ayeb-eposta::placeholder,
.ayeb .ayeb-ad::placeholder { color: var(--ayeb-girdi-yazi, #33272F); opacity: .5; }
.ayeb .ayeb-eposta:focus,
.ayeb .ayeb-ad:focus {
	outline: none;
	border-color: var(--ayeb-buton-renk, #5E1155);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ayeb-buton-renk, #5E1155) 18%, transparent);
}
.ayeb .ayeb-eposta[aria-invalid="true"] { border-color: #C0392B; }

.ayeb .ayeb-buton {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--ayeb-yukseklik, 44px);
	margin: 0;
	padding: 0 22px;
	border: 2px solid transparent;
	border-radius: var(--ayeb-buton-kose, 10px);
	background: var(--ayeb-buton-renk, #5E1155);
	color: var(--ayeb-buton-yazi, #fff);
	font-family: inherit;
	font-size: var(--ayeb-buton-boyut, 14px);
	font-weight: var(--ayeb-buton-kalin, 700);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ayeb--buton-gradyan .ayeb-buton {
	background: linear-gradient(135deg, var(--ayeb-buton-renk, #5E1155) 0%, var(--ayeb-buton-renk2, #8A2379) 100%);
}
.ayeb--buton-cerceve .ayeb-buton {
	background: transparent;
	border-color: var(--ayeb-buton-renk, #5E1155);
	color: var(--ayeb-buton-renk, #5E1155);
}
.ayeb .ayeb-buton:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--ayeb-buton-renk, #5E1155) 35%, transparent);
}
.ayeb--buton-cerceve .ayeb-buton:hover:not(:disabled) {
	background: var(--ayeb-buton-renk, #5E1155);
	color: var(--ayeb-buton-yazi, #fff);
}
.ayeb .ayeb-buton:focus-visible { outline: 3px solid color-mix(in srgb, var(--ayeb-buton-renk, #5E1155) 45%, transparent); outline-offset: 2px; }
.ayeb .ayeb-buton:disabled { cursor: progress; opacity: .75; }

/* Gönderilirken dönen halka */
.ayeb .ayeb-buton.ayeb-bekliyor::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: ayeb-don .7s linear infinite;
}
@keyframes ayeb-don { to { transform: rotate(360deg); } }

/* Yerleşim: alt alta */
.ayeb--dikey .ayeb-satir { flex-direction: column; align-items: stretch; }
.ayeb--dikey .ayeb-eposta,
.ayeb--dikey .ayeb-ad { flex: none; width: 100%; }
.ayeb--dikey .ayeb-buton { width: 100%; }

/* Yerleşim: birleşik (buton kutuya yapışık) */
.ayeb--bitisik .ayeb-satir {
	gap: 0;
	flex-wrap: nowrap;
	padding: 4px;
	border: 1px solid var(--ayeb-girdi-kenar, #E9DFE6);
	border-radius: calc(var(--ayeb-girdi-kose, 10px) + 4px);
	background: var(--ayeb-girdi-zemin, #FAF7F9);
}
.ayeb--bitisik .ayeb-eposta,
.ayeb--bitisik .ayeb-ad {
	border: 0;
	background: transparent;
	height: calc(var(--ayeb-yukseklik, 44px) - 8px);
}
.ayeb--bitisik .ayeb-ad { border-right: 1px solid var(--ayeb-girdi-kenar, #E9DFE6); border-radius: 0; }
.ayeb--bitisik .ayeb-eposta:focus,
.ayeb--bitisik .ayeb-ad:focus { box-shadow: none; }
.ayeb--bitisik .ayeb-satir:focus-within {
	border-color: var(--ayeb-buton-renk, #5E1155);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ayeb-buton-renk, #5E1155) 18%, transparent);
}
.ayeb--bitisik .ayeb-buton { height: calc(var(--ayeb-yukseklik, 44px) - 8px); }

/* Dar ekranda yan yana düzen alt alta geçer */
@media (max-width: 480px) {
	.ayeb--yatay .ayeb-satir { flex-direction: column; align-items: stretch; }
	.ayeb--yatay .ayeb-eposta,
	.ayeb--yatay .ayeb-ad { flex: none; width: 100%; }
	.ayeb--yatay .ayeb-buton { width: 100%; }
	.ayeb--bitisik .ayeb-ad { display: none; }
}

/* KVKK kutusu */
.ayeb .ayeb-kvkk {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: left;
	opacity: .9;
	cursor: pointer;
}
.ayeb--metin-orta .ayeb-kvkk { justify-content: center; text-align: center; }
.ayeb .ayeb-kvkk[hidden] { display: none; }
.ayeb .ayeb-kvkk input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--ayeb-buton-renk, #5E1155);
}
.ayeb .ayeb-kvkk a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ayeb .ayeb-kvkk.ayeb-uyar { color: #A23B2C; }

/* Bal küpü: ekran dışında */
.ayeb .ayeb-bal {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Mesajlar */
.ayeb .ayeb-mesaj {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	animation: ayeb-mesaj .35s ease-out;
}
.ayeb .ayeb-mesaj[hidden] { display: none; }
.ayeb .ayeb-mesaj--basarili { background: #F1FAF7; border: 1px solid #CFE9E4; color: #0F5F55; }
.ayeb .ayeb-mesaj--uyari { background: #FFF7E6; border: 1px solid #F7DFAE; color: #7A4A05; }
.ayeb .ayeb-mesaj--hata { background: #FDF3F4; border: 1px solid #F0D4D8; color: #8A3B45; }
@keyframes ayeb-mesaj { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Başarıdan sonra form alanları kapanır, mesaj kalır */
.ayeb.ayeb--tamamlandi .ayeb-satir,
.ayeb.ayeb--tamamlandi .ayeb-kvkk { display: none; }

/* ==========================================================
 * KAYDIRINCA GÖRÜNME ANİMASYONU
 * Yalnızca JavaScript çalışıyorsa (ayeb--js) gizli başlar;
 * JavaScript kapalıysa form her zaman görünür.
 * ======================================================== */
.ayeb--js:not(.ayeb--anim-yok) .ayeb-parca,
.ayeb--js:not(.ayeb--anim-yok):not(.ayeb--kademeli) .ayeb-ic {
	transition-property: opacity, transform;
	transition-duration: var(--ayeb-anim-sure);
	transition-timing-function: cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--ayeb-anim-gecikme);
}

/* Tek parça halinde (kademeli kapalı) */
.ayeb--js:not(.ayeb--kademeli):not(.ayeb--anim-yok) .ayeb-parca { transition: none; }
.ayeb--js:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { opacity: 0; }
.ayeb--js.ayeb--anim-yukari:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { transform: translateY(var(--ayeb-anim-mesafe)); }
.ayeb--js.ayeb--anim-asagi:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { transform: translateY(calc(var(--ayeb-anim-mesafe) * -1)); }
.ayeb--js.ayeb--anim-soldan:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { transform: translateX(calc(var(--ayeb-anim-mesafe) * -1.6)); }
.ayeb--js.ayeb--anim-sagdan:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { transform: translateX(calc(var(--ayeb-anim-mesafe) * 1.6)); }
.ayeb--js.ayeb--anim-yakinlas:not(.ayeb--kademeli):not(.ayeb--gorundu) .ayeb-ic { transform: scale(.92); }

/* Kademeli: simge, başlık, açıklama, form sırayla gelir */
.ayeb--js.ayeb--kademeli:not(.ayeb--gorundu) .ayeb-parca { opacity: 0; }
.ayeb--js.ayeb--kademeli.ayeb--anim-yukari:not(.ayeb--gorundu) .ayeb-parca { transform: translateY(var(--ayeb-anim-mesafe)); }
.ayeb--js.ayeb--kademeli.ayeb--anim-asagi:not(.ayeb--gorundu) .ayeb-parca { transform: translateY(calc(var(--ayeb-anim-mesafe) * -1)); }
.ayeb--js.ayeb--kademeli.ayeb--anim-soldan:not(.ayeb--gorundu) .ayeb-parca { transform: translateX(calc(var(--ayeb-anim-mesafe) * -1.6)); }
.ayeb--js.ayeb--kademeli.ayeb--anim-sagdan:not(.ayeb--gorundu) .ayeb-parca { transform: translateX(calc(var(--ayeb-anim-mesafe) * 1.6)); }
.ayeb--js.ayeb--kademeli.ayeb--anim-yakinlas:not(.ayeb--gorundu) .ayeb-parca { transform: scale(.92); }
.ayeb--js.ayeb--kademeli .ayeb-parca { transition-delay: calc(var(--ayeb-anim-gecikme) + var(--ayeb-sira, 0) * 120ms); }
.ayeb--kademeli.ayeb--anim-yok .ayeb-parca { transition: none; }

.ayeb--js.ayeb--anim-yok .ayeb-parca,
.ayeb--js.ayeb--anim-yok .ayeb-ic { opacity: 1; transform: none; }

/* Hareketi azaltmayı seçen ziyaretçiler için animasyon yok */
@media (prefers-reduced-motion: reduce) {
	.ayeb .ayeb-parca,
	.ayeb .ayeb-ic { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ayeb .ayeb-mesaj { animation: none; }
	.ayeb .ayeb-buton:hover:not(:disabled) { transform: none; }
}