/**
 * Anasayfa hikaye şeridi – "satıcı değil üreticiyiz"
 */

.zt-hikaye {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: clamp(430px, 62vh, 620px);
	overflow: hidden;
	background: #14181f;
	isolation: isolate;
}

.zt-hikaye-slaytlar,
.zt-hikaye-slayt {
	position: absolute;
	inset: 0;
}

.zt-hikaye-slayt {
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease;
}

.zt-hikaye-slayt.zt-aktif {
	opacity: 1;
	visibility: visible;
}

/* Arka plan fotoğrafı – yavaş yakınlaşma (video hissi) */
.zt-hikaye-zemin {
	position: absolute;
	inset: 0;
	background-position: 72% center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.04);
	transition: transform 9s linear;
}

.zt-hikaye-slayt.zt-aktif .zt-hikaye-zemin {
	transform: scale(1.14);
}

/* Yazının okunması için koyu perde */
.zt-hikaye-perde {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 13, 18, .93) 0%, rgba(10, 13, 18, .78) 42%, rgba(10, 13, 18, .28) 78%, rgba(10, 13, 18, .1) 100%),
		linear-gradient(0deg, rgba(10, 13, 18, .55) 0%, rgba(10, 13, 18, 0) 55%);
}

.zt-hikaye-icerik {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 60px;
	color: #fff;
}

.zt-hikaye-ust {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	padding: 6px 14px;
	border: 1px solid rgba(224, 178, 95, .55);
	border-radius: 100px;
	background: rgba(29, 91, 138, .18);
	backdrop-filter: blur(2px);
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #f0d6a4;
}

.zt-hikaye-baslik {
	max-width: 640px;
	margin: 0 0 16px;
	font-family: Roboto, sans-serif;
	font-size: clamp(30px, 4.2vw, 52px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #fff;
}

.zt-hikaye-baslik em {
	display: inline;
	font-style: normal;
	color: #e0b25f;
}

.zt-hikaye-metin {
	max-width: 540px;
	margin: 0 0 26px;
	font-family: Roboto, sans-serif;
	font-size: clamp(15px, 1.35vw, 18px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}

.zt-hikaye-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zt-hikaye-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	border-radius: 6px;
	background: linear-gradient(81deg, #1d5b8a 22%, #2f7bb0 73%);
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}

.zt-hikaye-buton:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(29, 91, 138, .38);
	color: #fff !important;
}

.zt-hikaye-buton--cizgi {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .5);
}

.zt-hikaye-buton--cizgi:hover {
	background: rgba(255, 255, 255, .1);
	border-color: #fff;
	box-shadow: none;
}

/* Oklar */
.zt-hikaye-ok {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(0, 0, 0, .28) no-repeat center / 9px 16px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.zt-hikaye-ok:hover {
	background-color: rgba(29, 91, 138, .85);
	border-color: transparent;
}

.zt-hikaye-ok--geri {
	left: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1L1.5 8L8 15'/%3E%3C/svg%3E");
}

.zt-hikaye-ok--ileri {
	right: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1L7.5 8L1 15'/%3E%3C/svg%3E");
}

/* Noktalar */
.zt-hikaye-noktalar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 9px;
}

.zt-hikaye-nokta {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .42);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.zt-hikaye-nokta.zt-aktif {
	width: 26px;
	border-radius: 100px;
	background: #e0b25f;
}

/* ------------------------------------------------------------ rozet şeridi */

.zt-rozetler {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #1c222c;
	color: #fff;
}

.zt-rozet {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 26px;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.zt-rozet:last-child {
	border-right: none;
}

.zt-rozet .zt-ikon {
	flex: none;
	width: 26px;
	height: 26px;
	color: #e0b25f;
}

.zt-rozet-metin {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.zt-rozet-metin strong {
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.zt-rozet-metin small {
	font-family: Roboto, sans-serif;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .62);
}

/* ------------------------------------------------------------------ mobil */

@media screen and (max-width: 1024px) {
	.zt-hikaye-icerik {
		padding: 0 34px;
	}
	.zt-rozetler {
		grid-template-columns: repeat(2, 1fr);
	}
	.zt-rozet:nth-child(2n) {
		border-right: none;
	}
	.zt-rozet:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
}

@media screen and (max-width: 767px) {
	.zt-hikaye {
		height: auto;
		min-height: 430px;
	}
	.zt-hikaye-slaytlar {
		position: relative;
		min-height: 430px;
	}
	.zt-hikaye-icerik {
		padding: 54px 22px 66px;
		text-align: left;
	}
	.zt-hikaye-perde {
		background:
			linear-gradient(180deg, rgba(10, 13, 18, .62) 0%, rgba(10, 13, 18, .84) 52%, rgba(10, 13, 18, .95) 100%);
	}
	.zt-hikaye-zemin {
		background-position: center 28%;
	}
	.zt-hikaye-baslik {
		font-size: 26px;
	}
	.zt-hikaye-metin {
		font-size: 15px;
		margin-bottom: 22px;
	}
	.zt-hikaye-butonlar {
		width: 100%;
	}
	.zt-hikaye-buton {
		flex: 1 1 100%;
		min-height: 48px;
	}
	.zt-hikaye-ok {
		display: none;
	}
	.zt-rozet {
		padding: 15px 16px;
		gap: 10px;
	}
	.zt-rozet .zt-ikon {
		width: 22px;
		height: 22px;
	}
	.zt-rozet-metin strong {
		font-size: 13px;
	}
	.zt-rozet-metin small {
		font-size: 11.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zt-hikaye-zemin,
	.zt-hikaye-slayt.zt-aktif .zt-hikaye-zemin {
		transform: none;
		transition: none;
	}
	.zt-hikaye-slayt {
		transition: none;
	}
}

/* =========================================================================
   Şeffaf başlık – hikaye görselinin üstündeki menü okunabilir olsun
   ========================================================================= */

/* Görselin üst kenarına koyu geçiş: menü hangi fotoğrafta olursa olsun okunur */
.zt-hikaye-perde::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 170px;
	background: linear-gradient(180deg, rgba(8, 10, 14, .78) 0%, rgba(8, 10, 14, .35) 55%, rgba(8, 10, 14, 0) 100%);
	pointer-events: none;
}

/* Sayfa en üstteyken (başlık hikayenin üzerinde) yazılar beyaz */
body.zt-hero-ustunde .aux-header a,
body.zt-hero-ustunde .aux-header .aux-menu-depth-0 > .aux-item-content,
body.zt-hero-ustunde .aux-header .aux-menu-item > a,
body.zt-hero-ustunde .aux-header .menu-item > a,
body.zt-hero-ustunde .aux-header .aux-cart-contents,
body.zt-hero-ustunde .aux-header .aux-burger-box,
body.zt-hero-ustunde .aux-header .aux-icon,
body.zt-hero-ustunde .aux-header .aux-svg-symbol,
body.zt-hero-ustunde .aux-header .aux-menu-item .aux-item-content {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

body.zt-hero-ustunde .aux-header .aux-burger,
body.zt-hero-ustunde .aux-header .aux-burger::before,
body.zt-hero-ustunde .aux-header .aux-burger::after,
body.zt-hero-ustunde .aux-header .aux-hamburger-inner,
body.zt-hero-ustunde .aux-header .aux-hamburger-inner::before,
body.zt-hero-ustunde .aux-header .aux-hamburger-inner::after {
	background-color: #fff !important;
}

body.zt-hero-ustunde .aux-header .aux-menu-item > a:hover,
body.zt-hero-ustunde .aux-header a:hover {
	color: #e0b25f !important;
}

/* Açılır alt menüler beyaz zeminde: yazılar koyu olmalı.
   Beyaz kuralın seçici gücünü aşmak için sınıflar tekrarlandı. */
body.zt-hero-ustunde .aux-header .aux-submenu.aux-submenu a,
body.zt-hero-ustunde .aux-header .sub-menu.sub-menu a,
body.zt-hero-ustunde .aux-header .aux-submenu.aux-submenu a.aux-item-content,
body.zt-hero-ustunde .aux-header .sub-menu.sub-menu .aux-item-content,
body.zt-hero-ustunde .aux-header .aux-card-dropdown.aux-card-dropdown a {
	color: #283040 !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

body.zt-hero-ustunde .aux-header .aux-submenu.aux-submenu a:hover,
body.zt-hero-ustunde .aux-header .sub-menu.sub-menu a:hover,
body.zt-hero-ustunde .aux-header .sub-menu.sub-menu .aux-item-content:hover {
	color: #1d5b8a !important;
}

/* Alt menüsü açık olan üst öge de beyaz kutunun üstünde kaldığı için koyulaşsın */
body.zt-hero-ustunde .aux-header li.menu-item-has-children.menu-item-has-children:hover > a,
body.zt-hero-ustunde .aux-header li.menu-item-has-children.menu-item-has-children:hover > a .aux-item-content,
body.zt-hero-ustunde .aux-header li.menu-item.menu-item:hover > a.aux-item-content {
	color: #283040 !important;
	text-shadow: none !important;
}

/* Açılır kutu stilleri genel.css içinde (tüm sayfalarda geçerli) */

/* =========================================================================
   Logo: koyu hikaye görselinin üstündeyken açık renkli sürüm kullanılır
   ========================================================================= */
body.zt-hero-ustunde .aux-logo-anchor img,
body.zt-hero-ustunde .aux-widget-logo img {
	content: url("https://zikirtesbih.com/wp-content/uploads/2026/08/zikir-tesbih-logo-acik.png");
}

/* =========================================================================
   MOBİL DÜZELTMELER (anasayfa)
   ========================================================================= */
@media screen and (max-width: 767px) {
	/* Hero içeriği overlay header'ın (duyuru + logo satırı ≈ 130px) altından başlasın */
	.zt-hikaye-icerik {
		padding: 128px 22px 60px;
	}
	.zt-hikaye,
	.zt-hikaye-slaytlar {
		min-height: 520px;
	}
	/* "Özel Tesbih Koleksiyonları": Elementor 90px satır yüksekliği veriyordu */
	.elementor-element-a815ecb .aux-modern-heading-primary,
	.elementor-element-ff40ddc .aux-modern-heading-primary {
		font-size: 28px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-a815ecb .aux-modern-heading-secondary,
	.elementor-element-a815ecb .aux-head-before {
		font-size: 15px !important;
		line-height: 1.45 !important;
	}
	/* Koleksiyon kutucukları: kelime bölünmesin */
	.elementor-element-7e4fe04 .aux-modern-heading-primary {
		font-size: 19px !important;
		line-height: 1.15 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
	}
	.elementor-element-e5cdde6 .aux-modern-heading-primary {
		font-size: 26px !important;
	}
	/* Öne Çıkan Modeller: mobilde ilk 8 kart yeter (sayfa 9000px'i buluyordu) */
	body.home .products-loop > .product:nth-child(n + 9),
	body.home .products-loop > li:nth-child(n + 9) {
		display: none !important;
	}
}
@media screen and (max-width: 767px) {
	.zt-hikaye-icerik { padding-bottom: 82px; }
	.zt-hikaye-noktalar { bottom: 22px !important; }
}
@media screen and (max-width: 767px) {
	/* Slaytlar absolute; kap içerikle büyümez → yeterli yükseklik ver, noktalar butonların altında kalsın */
	.zt-hikaye,
	.zt-hikaye-slaytlar { min-height: 610px; }
	.zt-hikaye-icerik { padding: 124px 22px 90px; }
	.zt-hikaye-noktalar { bottom: 26px !important; }
}
@media screen and (max-width: 360px) {
	.zt-hikaye,
	.zt-hikaye-slaytlar { min-height: 660px; }
}

/* =========================================================================
   MOBİL ANASAYFA ORANLARI – bölüm boşlukları, başlık hiyerarşisi
   ========================================================================= */
@media screen and (max-width: 767px) {
	/* Koleksiyonlar bölümü: üstte nefes payı, başlık + alt başlık hiyerarşisi */
	.elementor-91 .elementor-element-0394827 {
		padding: 40px 20px 8px !important;
	}
	.elementor-91 .elementor-element-a815ecb { margin-bottom: 4px !important; }
	.elementor-91 .elementor-element-a815ecb .aux-modern-heading-primary {
		font-size: 26px !important;
		line-height: 1.15 !important;
		margin-bottom: 8px !important;
	}
	.elementor-91 .elementor-element-a815ecb .aux-modern-heading-secondary,
	.elementor-91 .elementor-element-a815ecb .aux-head-before {
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.5 !important;
		color: #6b7280 !important;
	}
	/* Koleksiyon kutucukları: büyük kutu 300px, küçükler 180px */
	.elementor-91 .elementor-element-e5cdde6 { min-height: 300px !important; height: 300px !important; }
	.elementor-91 .elementor-element-6b903d0,
	.elementor-91 .elementor-element-4ed82dd,
	.elementor-91 .elementor-element-3d58ed5,
	.elementor-91 .elementor-element-b5c0358 { min-height: 180px !important; height: 180px !important; }
	.elementor-91 .elementor-element-7e4fe04 { padding-bottom: 0 !important; margin-top: 12px !important; }

	/* Öne Çıkan Modeller */
	.elementor-91 .elementor-element-b568a15 { padding: 36px 20px 24px !important; }
	.elementor-91 .elementor-element-ff40ddc .aux-modern-heading-primary {
		font-size: 26px !important;
		line-height: 1.15 !important;
		margin-bottom: 14px !important;
	}
	body.home .products-loop { margin-top: 4px !important; }

	/* Özellik şeridi (Kendi Atölyemizde Üretim…) daha sıkı */
	.zt-rozetler { padding: 4px 0 !important; }
	.zt-rozet { padding: 12px 14px !important; gap: 9px !important; }
	.zt-rozet-metin strong { font-size: 12.5px !important; }
	.zt-rozet-metin small { font-size: 11px !important; }
}
@media screen and (max-width: 767px) {
	.elementor-91 .elementor-element-7e4fe04 { height: auto !important; min-height: 0 !important; }
	.elementor-91 .elementor-element-b568a15 { padding-top: 30px !important; }
	.elementor-91 .elementor-element-ff40ddc { margin-top: 0 !important; padding-top: 0 !important; }
	.elementor-91 .elementor-element-ff40ddc .elementor-widget-container { padding-top: 0 !important; margin-top: 0 !important; }
}
@media screen and (max-width: 767px) {
	.elementor-91 .elementor-element-b568a15 > .e-con-inner,
	.elementor-91 .elementor-element-0394827 > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
	.elementor-91 .elementor-element-7e4fe04 { padding-bottom: 0 !important; }
	.elementor-91 .elementor-element-ff40ddc .aux-modern-heading-primary { margin-top: 0 !important; }
	.elementor-91 .elementor-element-ff40ddc .aux-widget-modern-heading,
	.elementor-91 .elementor-element-ff40ddc .aux-modern-heading { padding-top: 0 !important; margin-top: 0 !important; }
}
.zt-tum-urunler { display: none; }
@media screen and (max-width: 767px) {
	.zt-tum-urunler {
		display: flex; align-items: center; justify-content: center;
		width: 100%; min-height: 48px; margin: 18px 0 4px;
		border: 1.5px solid #1d5b8a; border-radius: 999px;
		background: #fff; color: #1d5b8a !important;
		font: 700 14.5px Roboto, sans-serif; text-decoration: none !important;
	}
	.zt-tum-urunler:active { background: rgba(29, 91, 138, .08); }
	.elementor-91 .elementor-element-b568a15 { padding-bottom: 12px !important; }
}
@media screen and (max-width: 767px) {
	/* Kapsayıcı flex satır → buton yanına yerleşiyordu; alt satıra tam genişlik */
	body.home .products-loop { flex: 1 1 100% !important; width: 100% !important; }
	body.home .zt-tum-urunler { flex: 1 1 100% !important; width: 100% !important; height: 48px !important; align-self: stretch; }
	body.home .woocommerce.aux-shop-archive { flex-wrap: wrap !important; }
}