/*
 * Pekel Hero Slider
 * Slider Revolution "slider-1" modulunun birebir gorsel karsiligi.
 *
 * Tum olculer canli siteden headless Chromium ile olculdu:
 *   >=1024px  modul 992px   baslik 80/76   ust etiket 20/22   aciklama 20/26
 *   <=1023px  modul 768px   baslik 80/76   ust etiket 14/22   aciklama 16/26
 *   <= 777px  modul 617px   baslik 55/60   ust etiket 14/22   aciklama 16/26
 *   <= 479px  modul 617px   baslik 32/36   ust etiket 13/22   aciklama (bkz. widget ayari)
 *
 * Katman konumlari widget tarafindan satir ici CSS degiskeni olarak verilir
 * (--x, --y, --fs, --lh, --ls).
 */

/* ------------------------------------------------------------------ */
/* Kapsayici                                                           */
/* ------------------------------------------------------------------ */

.pekel-hero {
	position: relative;
	width: 100%;
	height: 992px;
	overflow: hidden;
	background-color: #1a1a1a;
	/* Ust etiket/aciklama Roboto, baslik Poppins — kaynak slider ile ayni. */
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1023px) {
	.pekel-hero { height: 768px; }
}

@media (max-width: 777px) {
	.pekel-hero { height: 617px; }
}

/* ------------------------------------------------------------------ */
/* Slaytlar                                                            */
/* ------------------------------------------------------------------ */

.pekel-hero .ph-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
	z-index: 1;
}

.pekel-hero .ph-slide.is-active { visibility: visible; z-index: 3; }
.pekel-hero .ph-slide.is-leaving { visibility: visible; z-index: 2; }

/* P-54 okunabilirlik perdesi: arka planin ustunde, metinlerin altinda. */
.pekel-hero .ph-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .50) 0%,
		rgba(0, 0, 0, .66) 18%,
		rgba(0, 0, 0, .68) 82%,
		rgba(0, 0, 0, .56) 100%);
}

/* ------------------------------------------------------------------ */
/* Arka plan (video / gorsel)                                          */
/* ------------------------------------------------------------------ */

.pekel-hero .ph-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	will-change: transform;
}

.pekel-hero .ph-poster,
.pekel-hero .ph-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	max-width: none;
}

.pekel-hero .ph-video {
	opacity: 0;
	transition: opacity .45s linear;
	z-index: 1;
}

.pekel-hero .ph-video.is-playing { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Katmanlar                                                           */
/* ------------------------------------------------------------------ */

.pekel-hero .ph-content {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.pekel-hero .ph-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
	text-align: center;
	font-size: var(--fs, 16px);
	line-height: var(--lh, 1.4);
	letter-spacing: var(--ls, 0);
	transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
	/* Giris animasyonunun kirpma maskesi. Yatayda genis birakilir ki
	   metin golgeleri kesilmesin. */
	clip-path: inset(0 -240px -240px -240px);
}

.pekel-hero .ph-layer[data-anchor="right"] {
	left: auto;
	right: var(--x, 0px);
	transform: translate(0, -50%) translate(0, var(--y, 0px));
}

@media (max-width: 479px) {
	.pekel-hero .ph-layer[data-anchor="right"][data-anchor4="center"] {
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
	}
}

/* Saga yasli slaytta cok satirli metinler de saga yaslanir (kaynak slider
   slayt 2'de tA = right). */
.pekel-hero .ph-align-right .ph-title,
.pekel-hero .ph-align-right .ph-text,
.pekel-hero .ph-align-right .ph-nav { text-align: right; }

.pekel-hero .ph-from-bottom { clip-path: inset(-240px -240px 0 -240px); }
.pekel-hero .ph-static { clip-path: none; }

.pekel-hero .ph-inner {
	display: block;
	opacity: 0;
}

.pekel-hero .ph-static .ph-inner { opacity: 1; }

/* ---- Tipografi (P-54 kontrast duzeltmesi dahil) ---- */

.pekel-hero .ph-eyebrow {
	font-weight: 700;
	color: #fce9ee;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

.pekel-hero .ph-title {
	font-family: "Poppins", "Roboto", sans-serif;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}

.pekel-hero .ph-text {
	font-weight: 400;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

.pekel-hero .ph-title em,
.pekel-hero .ph-text em { font-style: italic; }

/* ---- Marka renkleri ----------------------------------------------
 * Hero bandinin ortalama rengi #3E3C38. Duz renk verildiginde olculen
 * kontrast: #4A0E18 -> 1.40:1 (okunmuyor), #008F3F -> 2.62:1 (zayif).
 * Bu yuzden renkler birebir uygulanip arkalarina ince beyaz hale konuldu.
 * Haleyi kaldirmak icin --brand-halo degerini "none" yapin.
 * ------------------------------------------------------------------ */

.pekel-hero {
	--brand-halo:
		0 0 1px #ffffff,
		0 0 2px #ffffff,
		0 0 4px rgba(255, 255, 255, .95),
		0 0 9px rgba(255, 255, 255, .55);
}

.pekel-hero .ph-brand.brand-pekel {
	color: #4a0e18;
	text-shadow: var(--brand-halo);
}

.pekel-hero .ph-brand.brand-yesti {
	color: #008f3f;
	font-style: italic;
	text-shadow: var(--brand-halo);
}

/* ------------------------------------------------------------------ */
/* Ok dugmeleri                                                        */
/* Sinif adlari kaynak slider ile ayni tutuldu; anasayfa kapsayicisinin */
/* pxl_custom_css alanindaki kurallar da bu dugumlere uygulanmaya       */
/* devam ediyor. Asagisi ayni degerlerin yedegi.                        */
/* ------------------------------------------------------------------ */

.pekel-hero .slider-navigation { display: flex; }

.pekel-hero .slider-button1,
.pekel-hero .slider-button2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	cursor: pointer;
}

.pekel-hero .slider-button2 { border-left: none; }

.pekel-hero .slider-button1:hover,
.pekel-hero .slider-button2:hover { background-color: rgba(255, 255, 255, .15); }

.pekel-hero .slider-button1:focus-visible,
.pekel-hero .slider-button2:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.pekel-hero .slider-button i {
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ */
/* Animasyonlar                                                        */
/* GSAP karsiliklari: power3.inOut = easeInOutQuart, power2.inOut =    */
/* easeInOutCubic.                                                     */
/* ------------------------------------------------------------------ */

@keyframes ph-in-top {
	from { opacity: 0; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ph-in-bottom {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ph-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes ph-bg-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes ph-bg-out {
	from { transform: translateY(0); }
	to   { transform: translateY(60%); }
}

.pekel-hero .ph-slide.is-active .ph-from-top .ph-inner {
	animation: ph-in-top 1200ms cubic-bezier(.77, 0, .175, 1) 1200ms both;
}

.pekel-hero .ph-slide.is-active .ph-from-bottom .ph-inner {
	animation: ph-in-bottom 1200ms cubic-bezier(.77, 0, .175, 1) 1200ms both;
}

.pekel-hero .ph-slide.is-leaving .ph-inner {
	animation: ph-out 300ms cubic-bezier(.77, 0, .175, 1) both;
}

/* Ilk yukte arka plan kaymaz (kaynak slider da kaydirmiyor); yalnizca
   slayt gecislerinde kayar. */
.pekel-hero .ph-slide.is-active.is-entering .ph-bg {
	animation: ph-bg-in 1000ms cubic-bezier(.645, .045, .355, 1) both;
}

.pekel-hero .ph-slide.is-leaving .ph-bg {
	animation: ph-bg-out 1000ms cubic-bezier(.645, .045, .355, 1) both;
}

/* ------------------------------------------------------------------ */
/* Telefon duzeni (<=479px)                                            */
/*                                                                     */
/* Kaynak slider'da aciklama bu boyutta font-size:0 ile gizleniyordu;   */
/* diger katmanlarin mutlak konumlari da bu bosluga gore ayarlanmisti.  */
/* Aciklama gorunur hale gelince mutlak konumlar cakisiyor. Bu yuzden   */
/* yalnizca telefonda icerik akisa alinir: ayni sira, ayni punto, ayni  */
/* ortalama — sadece bosluklar metnin boyuna gore acilir.               */
/* "Mobilde aciklamayi goster" kapatilirsa eski mutlak duzen geri gelir.*/
/* ------------------------------------------------------------------ */

@media (max-width: 479px) {
	.pekel-hero--fix-text .ph-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* Yatay dolgu yok: baslik kaynak slider'daki gibi kendi dogal
		   genisliginde ortalanir (390px'te 371px). */
		padding: 0;
		text-align: center;
	}

	.pekel-hero--fix-text .ph-layer,
	.pekel-hero--fix-text .ph-layer[data-anchor="right"],
	.pekel-hero--fix-text .ph-layer[data-anchor="right"][data-anchor4="center"] {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		max-width: 100%;
		text-align: center;
	}

	.pekel-hero--fix-text .ph-eyebrow { margin-bottom: 39px; }
	.pekel-hero--fix-text .ph-title   { margin-bottom: 24px; }
	.pekel-hero--fix-text .ph-text    { margin-bottom: 26px; }

	.pekel-hero--fix-text .ph-text .ph-line { white-space: normal; }
	.pekel-hero--fix-text .slider-navigation { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pekel-hero .ph-inner,
	.pekel-hero .ph-bg {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Elementor duzenleyicisi                                             */
/* ------------------------------------------------------------------ */

.elementor-editor-active .pekel-hero .ph-inner { opacity: 1; }