/* ==========================================================================
   ESSE REKLAM — TEMA STİLLERİ
   ==========================================================================

   Elle yazılmış saf CSS. Derleme adımı yoktur; bu dosyayı düzenleyip
   kaydettiğinizde değişiklik doğrudan sitede görünür.

   Renkler logodan alınmıştır: altın degrade + kalın siyah kontur.
   Altın açık zeminde metin olarak okunmadığı için (kontrast 2.75:1) iki ayrı
   altın tanımlıdır: koyu zemin için --altin, açık zeminde metin için
   --altin-metin (kart yüzeyinde 5.36:1, beyazda 6.26:1).

   Kartlar ve kutular beyaz değil, sıcak kum-grisi (--yuzey) üzerindedir;
   gerekçesi değişkenin yanında yazılı.

   İÇİNDEKİLER
     1.  Değişkenler
     2.  Sıfırlama ve temel
     3.  Tipografi
     4.  Yerleşim (kap, bölüm, ızgara)
     5.  Düğmeler
     6.  Üst bilgi ve menü
     7.  Manşet
     8.  Kartlar
     9.  Kategori filtresi
     10. Ürün sayfası
     11. İletişim çağrısı ve bilgi kutuları
     12. Kırıntı, sayfalama, boş durum, arama
     13. Alt bilgi
     14. Mobil hızlı iletişim çubuğu
     15. Yazı içeriği (editör çıktısı)
     16. Erişilebilirlik ve yazdırma
   ========================================================================== */


/* ==========================================================================
   1. DEĞİŞKENLER
   ========================================================================== */

:root {
	/* Marka renkleri — ESSE LOGO.png'den alındı */
	--altin:        #F5D06B;  /* logo degradesinin göbeği */
	--altin-acik:   #FCEFC4;  /* degradenin üst ucu */
	--altin-koyu:   #D9A441;  /* vurgu, çerçeve */
	--altin-metin:  #7E5A0F;  /* açık zeminde altın METİN — kart yüzeyinde 5.36:1 */

	--murekkep:     #211E22;  /* logonun konturu — ana koyu */
	--murekkep-2:   #2B2929;
	--murekkep-3:   #3D393E;

	/* WhatsApp yeşili — beyaz yazıyla 5.06:1 verecek kadar koyultuldu.
	   Markanın açık yeşili (#25D366) beyaz üstünde okunmuyordu. */
	--yesil:        #157F43;
	--yesil-koyu:   #0F6634;

	/* Yüzeyler */
	--kagit:        #FBFAF8;  /* sayfa zemini */
	--kagit-2:      #F3F1ED;  /* araya giren açık bantlar */
	--beyaz:        #FFFFFF;

	/* Kart, kutu ve panel yüzeyi. Bilinçli olarak BEYAZ DEĞİL: saf beyaz
	   kartlar neredeyse beyaz olan sayfa zemininden ayrışmıyor ve altın
	   ağırlıklı ürün fotoğraflarının yanında sert duruyordu. Bu sıcak
	   kum-grisi logodaki kremle akraba, görsellerle uyumlu. */
	--yuzey:        #F1EDE4;
	--yuzey-2:      #E6E0D3;  /* görseli olmayan kart için yer tutucu */

	/* Metin */
	--metin:        #26232A;
	--metin-soft:   #5F5A63;
	--metin-ters:   #F5F3F0;
	--metin-ters-soft: rgba(245, 243, 240, .68);

	/* Çizgiler ve gölgeler */
	--kenar:        rgba(33, 30, 34, .12);
	--kenar-koyu:   rgba(255, 252, 243, .14);
	--golge-s:      0 1px 2px rgba(33, 30, 34, .06), 0 2px 8px rgba(33, 30, 34, .04);
	--golge-m:      0 4px 12px rgba(33, 30, 34, .08), 0 12px 32px rgba(33, 30, 34, .06);
	--golge-altin:  0 6px 20px rgba(217, 164, 65, .28);

	/* Ölçüler */
	--kap-genislik: 1240px;
	--kap-bosluk:   clamp(16px, 4vw, 32px);
	--yuvarlak-s:   8px;
	--yuvarlak-m:   14px;
	--yuvarlak-l:   22px;

	/* Tipografi */
	--yazi-baslik:  "Sora", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--yazi-metin:   "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

	/* Hareket */
	--gecis:        180ms cubic-bezier(.2, .7, .3, 1);
}


/* ==========================================================================
   2. SIFIRLAMA VE TEMEL
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* sabit başlık çapa bağlantılarını örtmesin */
}

body {
	margin: 0;
	background: var(--kagit);
	color: var(--metin);
	font-family: var(--yazi-metin);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
iframe,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:focus-visible {
	outline: 3px solid var(--altin-koyu);
	outline-offset: 2px;
	border-radius: 4px;
}


/* ==========================================================================
   3. TİPOGRAFİ
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--yazi-baslik);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
}

.bolum__baslik {
	font-size: clamp(26px, 3.4vw, 38px);
}

.bolum__metin {
	color: var(--metin-soft);
	font-size: 17px;
	max-width: 62ch;
}

.bolum--koyu .bolum__metin {
	color: var(--metin-ters-soft);
}


/* ==========================================================================
   4. YERLEŞİM
   ========================================================================== */

.kap {
	width: 100%;
	max-width: var(--kap-genislik);
	margin-inline: auto;
	padding-inline: var(--kap-bosluk);
}

.kap--dar {
	max-width: 820px;
}

.bolum {
	padding-block: clamp(48px, 7vw, 88px);
}

.bolum--ince {
	padding-block: clamp(32px, 5vw, 56px);
}

.bolum--koyu {
	background: var(--murekkep);
	color: var(--metin-ters);
}

.bolum__basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(24px, 4vw, 40px);
}

.bolum__basi > :first-child {
	flex: 1 1 320px;
}

/* Bölüm başlığının altındaki altın çizgi */
.bolum__baslik {
	position: relative;
	padding-bottom: 14px;
}

.bolum__baslik::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--altin-koyu), var(--altin));
}

.bolum__basi .bolum__metin {
	margin-top: 14px;
}

.bolum__baglanti {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	color: var(--altin-metin);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color var(--gecis), gap var(--gecis);
}

.bolum--koyu .bolum__baglanti {
	color: var(--altin);
}

.bolum__baglanti:hover {
	border-bottom-color: currentColor;
	gap: 10px;
}

/* Izgara */
.izgara {
	display: grid;
	gap: clamp(16px, 2.2vw, 26px);
}

.izgara--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }


/* ==========================================================================
   5. DÜĞMELER
   ========================================================================== */

.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--yazi-baslik);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: transform var(--gecis), box-shadow var(--gecis),
	            background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}

.dugme--kucuk {
	padding: 10px 18px;
	font-size: 14px;
}

.dugme--birincil {
	background: linear-gradient(160deg, var(--altin-acik), var(--altin) 45%, var(--altin-koyu));
	color: var(--murekkep);
	box-shadow: var(--golge-altin);
}

.dugme--birincil:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(217, 164, 65, .38);
}

.dugme--hayalet {
	background: transparent;
	color: var(--metin-ters);
	border-color: rgba(255, 252, 243, .38);
}

.dugme--hayalet:hover {
	border-color: var(--altin);
	color: var(--altin);
}

/* Açık zeminde hayalet düğme */
.bolum:not(.bolum--koyu) .dugme--hayalet,
.bos-durum .dugme--hayalet {
	color: var(--metin);
	border-color: var(--kenar);
}

.bolum:not(.bolum--koyu) .dugme--hayalet:hover,
.bos-durum .dugme--hayalet:hover {
	border-color: var(--altin-koyu);
	color: var(--altin-metin);
}

.dugme--whatsapp {
	background: var(--yesil);
	color: #fff;
}

.dugme--whatsapp:hover {
	background: var(--yesil-koyu);
	transform: translateY(-2px);
}

.dugme[disabled],
.dugme[aria-busy="true"] {
	opacity: .6;
	pointer-events: none;
}

.ikon-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--kenar-koyu);
	border-radius: 50%;
	color: var(--metin-ters);
	transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.ikon-dugme:hover {
	background: rgba(245, 208, 107, .14);
	border-color: var(--altin);
	color: var(--altin);
}


/* ==========================================================================
   6. ÜST BİLGİ VE MENÜ
   ========================================================================== */

.atlama-baglantisi {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--altin);
	color: var(--murekkep);
	font-weight: 600;
}

.atlama-baglantisi:focus {
	left: 12px;
	top: 12px;
}

.ust {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--murekkep);
	color: var(--metin-ters);
}

/* İnce üst şerit — slogan ve hızlı iletişim */
.ust__serit {
	background: var(--murekkep-2);
	border-bottom: 1px solid var(--kenar-koyu);
	font-size: 13.5px;
}

.ust__serit-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}

.ust__slogan {
	color: var(--metin-ters-soft);
	letter-spacing: .01em;
}

.ust__serit-baglantilar {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.ust__serit-baglantilar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--metin-ters-soft);
	transition: color var(--gecis);
}

.ust__serit-baglantilar a:hover {
	color: var(--altin);
}

/* Ana satır */
.ust__ana-ic {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 76px;
}

.marka {
	flex-shrink: 0;
	display: block;
}

.marka__logo {
	width: auto;
	height: 46px;
}

.ust__eylemler {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* Menü */
.gezinti__liste {
	display: flex;
	align-items: center;
	gap: 4px;
}

.gezinti__liste > li {
	position: relative;
}

.gezinti__liste > li > a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--yuvarlak-s);
	font-family: var(--yazi-baslik);
	font-weight: 500;
	font-size: 15px;
	color: var(--metin-ters);
	transition: color var(--gecis), background-color var(--gecis);
}

.gezinti__liste > li > a:hover,
.gezinti__liste > .current-menu-item > a,
.gezinti__liste > .current-menu-parent > a {
	color: var(--altin);
	background: rgba(245, 208, 107, .1);
}

/* Alt menü */
.gezinti .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 250px;
	padding: 8px;
	background: var(--murekkep-2);
	border: 1px solid var(--kenar-koyu);
	border-radius: var(--yuvarlak-m);
	box-shadow: var(--golge-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}

.gezinti__liste > li:hover > .sub-menu,
.gezinti__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gezinti .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--yuvarlak-s);
	font-size: 14.5px;
	color: var(--metin-ters-soft);
	transition: color var(--gecis), background-color var(--gecis);
}

.gezinti .sub-menu a:hover {
	color: var(--altin);
	background: rgba(245, 208, 107, .1);
}

/* Arama katmanı */
.arama-katmani {
	background: var(--murekkep-2);
	border-top: 1px solid var(--kenar-koyu);
	padding-block: 18px;
}

/* Mobil menü düğmesi — geniş ekranda gizli */
.menu-ac {
	display: none;
}

.menu-ac .ikon--kapat {
	display: none;
}

.menu-ac[aria-expanded="true"] .ikon--menu {
	display: none;
}

.menu-ac[aria-expanded="true"] .ikon--kapat {
	display: block;
}

@media (max-width: 980px) {
	.ust__slogan { display: none; }
	.ust__serit-ic { justify-content: flex-end; }

	.menu-ac { display: inline-flex; }

	.gezinti {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 360px);
		padding: 88px 22px 120px;
		background: var(--murekkep);
		border-left: 1px solid var(--kenar-koyu);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 240ms cubic-bezier(.2, .7, .3, 1);
		z-index: 70;
	}

	.gezinti.acik {
		transform: translateX(0);
		box-shadow: -20px 0 50px rgba(0, 0, 0, .4);
	}

	.gezinti__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.gezinti__liste > li > a {
		padding: 14px 12px;
		font-size: 17px;
		border-bottom: 1px solid var(--kenar-koyu);
		border-radius: 0;
	}

	.gezinti .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 4px 0 10px 12px;
	}

	.ust__teklif { display: none; }
}


/* ==========================================================================
   7. MANŞET
   ========================================================================== */

.mansel {
	position: relative;
	background: var(--murekkep);
	color: var(--metin-ters);
	overflow: hidden;
	isolation: isolate;
}

/* Işıklı tabela hissi: köşeden gelen sıcak parıltı */
.mansel::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 120%;
	background:
		radial-gradient(60% 55% at 22% 12%, rgba(245, 208, 107, .20), transparent 68%),
		radial-gradient(45% 45% at 88% 82%, rgba(217, 164, 65, .14), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.mansel__arkaplan {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mansel__arkaplan img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Görsel varsa metin okunsun diye koyu perde */
.mansel--gorselli .mansel__arkaplan::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(33, 30, 34, .94) 0%, rgba(33, 30, 34, .82) 46%, rgba(33, 30, 34, .55) 100%);
}

.mansel__ic {
	padding-block: clamp(64px, 11vw, 132px);
	max-width: 760px;
}

.mansel__ustbaslik {
	display: inline-block;
	margin-bottom: 18px;
	padding: 7px 16px;
	border: 1px solid rgba(245, 208, 107, .38);
	border-radius: 999px;
	background: rgba(245, 208, 107, .08);
	color: var(--altin);
	font-family: var(--yazi-baslik);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mansel__baslik {
	font-size: clamp(34px, 6vw, 62px);
	font-weight: 800;
	letter-spacing: -.03em;
}

/* Başlıktaki altın parıltı — logonun degradesini yankılar */
.mansel__baslik {
	background: linear-gradient(180deg, var(--beyaz) 30%, var(--altin-acik) 78%, var(--altin) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mansel__metin {
	margin-top: 20px;
	max-width: 56ch;
	font-size: clamp(16px, 1.5vw, 18.5px);
	color: var(--metin-ters-soft);
}

.mansel__eylemler {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Manşet slider
   --------------------------------------------------------------------------
   Slaytlar üst üste değil AYNI IZGARA GÖZÜNDE duruyor (grid-area: 1/1).
   Böylece en uzun slayt yüksekliği belirler; mutlak konumlandırmada olduğu
   gibi kapsayıcıya elle yükseklik vermek gerekmez, metin uzayınca taşmaz.
   -------------------------------------------------------------------------- */

.mansel--slider {
	position: relative;
}

.mansel__slaytlar {
	display: grid;
}

.mansel__slayt {
	grid-area: 1 / 1;
	min-width: 0;
	/* Arka plan görseli slaytın kutusuna göre konumlansın.
	   Bilerek "isolation: isolate" YOK: slayt kendi yığın bağlamını
	   kurarsa .mansel::before parıltısı slaytın altında kalıp kayboluyor. */
	position: relative;
	opacity: 0;
	visibility: hidden;
	transition: opacity 620ms cubic-bezier(.4, 0, .2, 1), visibility 620ms;
}

.mansel__slayt.aktif {
	opacity: 1;
	visibility: visible;
}

/* JS çalışmazsa ilk slayt yine de görünsün */
.mansel--slider:not([data-slider]) .mansel__slayt:first-child,
.mansel--tekli .mansel__slayt {
	opacity: 1;
	visibility: visible;
}

/* Slaytta yazıya yer açmak için alt boşluk — noktalar metnin üstüne binmesin */
.mansel--slider .mansel__ic {
	padding-block: clamp(72px, 11vw, 140px) clamp(88px, 12vw, 150px);
}

/* Oklar */
.mansel__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: rgba(33, 30, 34, .55);
	border: 1px solid var(--kenar-koyu);
	border-radius: 50%;
	color: var(--metin-ters);
	backdrop-filter: blur(6px);
	transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}

.mansel__ok:hover {
	background: var(--altin);
	border-color: var(--altin);
	color: var(--murekkep);
}

.mansel__ok--onceki { left: clamp(10px, 2.5vw, 28px); }
.mansel__ok--sonraki { right: clamp(10px, 2.5vw, 28px); }

/* Dar ekranda oklar metnin üstüne biniyor; parmakla kaydırma zaten var */
@media (max-width: 780px) {
	.mansel__ok {
		display: none;
	}
}

/* Noktalar */
.mansel__noktalar {
	position: absolute;
	left: 50%;
	bottom: clamp(22px, 4vw, 38px);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 10px;
}

.mansel__nokta {
	width: 34px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(245, 243, 240, .34);
	transition: background-color var(--gecis), width var(--gecis);
}

.mansel__nokta:hover {
	background: rgba(245, 243, 240, .62);
}

.mansel__nokta.aktif {
	width: 48px;
	background: var(--altin);
}

/* Dokunma hedefi görünenden büyük olsun (parmakla isabet) */
.mansel__nokta::before {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

.mansel__noktalar .mansel__nokta {
	position: relative;
}


/* ==========================================================================
   8. KARTLAR
   ========================================================================== */

.kart {
	display: flex;
	flex-direction: column;
	background: var(--yuzey);
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-m);
	overflow: hidden;
	box-shadow: var(--golge-s);
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.kart:hover {
	transform: translateY(-4px);
	box-shadow: var(--golge-m);
	border-color: var(--altin-koyu);
}

.bolum--koyu .kart {
	background: var(--murekkep-2);
	border-color: var(--kenar-koyu);
	color: var(--metin-ters);
}

.kart__gorsel {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--yuzey-2);
	overflow: hidden;
}

.bolum--koyu .kart__gorsel {
	background: var(--murekkep-3);
}

.kart__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(.2, .7, .3, 1);
}

.kart:hover .kart__gorsel img {
	transform: scale(1.05);
}

/* Görseli olmayan ürün için desenli yer tutucu */
.kart__bos {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background:
		repeating-linear-gradient(135deg,
			rgba(217, 164, 65, .10) 0 10px,
			transparent 10px 20px),
		var(--yuzey-2);
}

.kart__govde {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
	flex: 1;
}

.kart__etiket {
	font-family: var(--yazi-baslik);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--altin-metin);
}

.bolum--koyu .kart__etiket {
	color: var(--altin);
}

.kart__baslik {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.015em;
}

.kart__metin {
	font-size: 14.5px;
	color: var(--metin-soft);
	line-height: 1.6;
}

.bolum--koyu .kart__metin {
	color: var(--metin-ters-soft);
}

.kart__sayi {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--metin-soft);
}

.kart__baglanti {
	margin-top: auto;
	padding-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--yazi-baslik);
	font-size: 14px;
	font-weight: 600;
	color: var(--altin-metin);
	transition: gap var(--gecis);
}

.bolum--koyu .kart__baglanti {
	color: var(--altin);
}

.kart:hover .kart__baglanti {
	gap: 11px;
}


/* ==========================================================================
   9. KATEGORİ FİLTRESİ
   ========================================================================== */

.filtre {
	position: sticky;
	top: 76px;
	z-index: 40;
	background: rgba(251, 250, 248, .92);
	backdrop-filter: blur(10px);
	border-block: 1px solid var(--kenar);
}

.filtre__ic {
	display: flex;
	gap: 8px;
	padding-block: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.filtre__oge {
	flex-shrink: 0;
	padding: 9px 17px;
	border: 1px solid var(--kenar);
	border-radius: 999px;
	background: var(--yuzey);
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.filtre__oge:hover {
	border-color: var(--altin-koyu);
	color: var(--altin-metin);
}

.filtre__oge--aktif {
	background: var(--murekkep);
	border-color: var(--murekkep);
	color: var(--altin);
}

.filtre__oge--aktif:hover {
	color: var(--altin);
}


/* ==========================================================================
   10. ÜRÜN SAYFASI
   ========================================================================== */

.urun__ust {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(32px, 5vw, 60px);
	align-items: start;
}

@media (max-width: 900px) {
	.urun__ust {
		grid-template-columns: 1fr;
	}
}

.urun__vitrin {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-l);
	overflow: hidden;
	background: var(--yuzey-2);
	box-shadow: var(--golge-s);
}

.urun__vitrin img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.urun__kucukler {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.urun__kucuk {
	display: block;
	width: 100%;
	padding: 0;
	aspect-ratio: 1;
	background: var(--yuzey-2);
	border: 2px solid var(--kenar);
	border-radius: var(--yuvarlak-s);
	overflow: hidden;
	transition: border-color var(--gecis), transform var(--gecis);
}

.urun__kucuk img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.urun__kucuk:hover {
	transform: translateY(-2px);
	border-color: var(--altin-koyu);
}

.urun__kucuk.secili {
	border-color: var(--altin-koyu);
}

.urun__kategori {
	margin-bottom: 10px;
	font-family: var(--yazi-baslik);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--altin-metin);
}

.urun__baslik {
	font-size: clamp(27px, 3.6vw, 40px);
}

.urun__aciklama {
	margin-top: 18px;
	color: var(--metin-soft);
	font-size: 16.5px;
}

.urun__aciklama > * + * {
	margin-top: 14px;
}

/* Teknik özellik tablosu */
.ozellik-tablo {
	margin-top: 26px;
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-m);
	overflow: hidden;
	font-size: 15px;
}

.ozellik-tablo tr + tr {
	border-top: 1px solid var(--kenar);
}

.ozellik-tablo th,
.ozellik-tablo td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.ozellik-tablo th {
	width: 40%;
	background: var(--kagit-2);
	font-family: var(--yazi-baslik);
	font-weight: 600;
	color: var(--metin);
}

.ozellik-tablo td {
	color: var(--metin-soft);
}

/* Fiyat neden yok açıklaması */
.urun__uyari {
	margin-top: 24px;
	padding: 15px 18px;
	border-left: 4px solid var(--altin-koyu);
	border-radius: var(--yuvarlak-s);
	background: rgba(245, 208, 107, .12);
	font-size: 14.5px;
	color: var(--metin-soft);
}

.urun__eylemler {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}


/* ==========================================================================
   11. İLETİŞİM ÇAĞRISI VE BİLGİ KUTULARI
   ==========================================================================
   Sitede teklif formu yoktur: fiyat ölçüye ve malzemeye göre değiştiği için
   müşterinin doğrudan konuşması daha hızlı sonuç veriyor. Bu yüzden her
   çağrı bölümünde tek hedef var — ara ya da WhatsApp'tan yaz.
   ========================================================================== */

.cagri {
	position: relative;
	background: var(--murekkep);
	color: var(--metin-ters);
	overflow: hidden;
	isolation: isolate;
}

/* Manşetteki sıcak parıltının daha sakin hali */
.cagri::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52% 70% at 78% 24%, rgba(245, 208, 107, .16), transparent 70%),
		radial-gradient(40% 60% at 6% 92%, rgba(217, 164, 65, .10), transparent 72%);
	pointer-events: none;
	z-index: -1;
}

.cagri__kutu {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (max-width: 900px) {
	.cagri__kutu {
		grid-template-columns: 1fr;
	}
}

.cagri__baslik {
	font-family: var(--yazi-baslik);
	font-size: clamp(25px, 3.2vw, 36px);
	font-weight: 700;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.cagri__metin {
	margin-top: 14px;
	max-width: 54ch;
	color: var(--metin-ters-soft);
	font-size: 16.5px;
}

.cagri__eylemler {
	display: grid;
	gap: 12px;
}

/* İletişim sayfasında yan yana ve daha geniş */
.cagri__eylemler--genis {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

/* --------------------------------------------------------------------------
   Büyük eylem düğmeleri
   -------------------------------------------------------------------------- */

.eylem {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-radius: var(--yuvarlak-m);
	border: 1px solid transparent;
	transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis);
}

.eylem:hover {
	transform: translateY(-3px);
}

.eylem__ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 50%;
}

.eylem__yazi {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.eylem__etiket {
	font-size: 13.5px;
	font-weight: 500;
	opacity: .82;
}

.eylem__deger {
	font-family: var(--yazi-baslik);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

/* Ara — markanın altın rengi */
.eylem--ara {
	background: linear-gradient(150deg, var(--altin-acik), var(--altin) 48%, var(--altin-koyu));
	color: var(--murekkep);
	box-shadow: var(--golge-altin);
}

.eylem--ara:hover {
	box-shadow: 0 12px 30px rgba(217, 164, 65, .40);
}

.eylem--ara .eylem__ikon {
	background: rgba(33, 30, 34, .12);
}

/* WhatsApp — kendi kurumsal yeşili */
.eylem--wa {
	background: var(--yesil);
	color: #fff;
	box-shadow: 0 6px 20px rgba(21, 127, 67, .30);
}

.eylem--wa:hover {
	background: var(--yesil-koyu);
	box-shadow: 0 12px 30px rgba(21, 127, 67, .38);
}

.eylem--wa .eylem__ikon {
	background: rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   Çalışma saatleri listesi
   -------------------------------------------------------------------------- */

.saatler {
	margin: 20px 0 0;
	display: grid;
	gap: 6px;
	font-size: 15px;
}

.saatler__satir {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.saatler__gun {
	margin: 0;
	min-width: 92px;
	flex-shrink: 0;
	font-weight: 500;
	color: var(--metin-soft);
}

/* Gün ile saat arasını noktalı çizgiyle bağla — sütun dar olsa da hizalı kalır */
.saatler__satir::after {
	content: "";
	order: 1;
	flex: 1;
	min-width: 12px;
	border-bottom: 1px dotted var(--kenar);
	transform: translateY(-4px);
}

.saatler__saat {
	order: 2;
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
	color: var(--metin);
}

/* Koyu zemin üzerinde */
.saatler--ters .saatler__gun {
	color: var(--metin-ters-soft);
}

.saatler--ters .saatler__saat {
	color: var(--altin);
}

.saatler--ters .saatler__satir::after {
	border-bottom-color: var(--kenar-koyu);
}

/* Alt bilgideki dar sütunda daha sıkışık dursun */
.alt__iletisim .saatler {
	margin-top: 0;
	font-size: 14px;
	gap: 4px;
}

.alt__iletisim .saatler__gun {
	min-width: 74px;
}

/* --------------------------------------------------------------------------
   İletişim sayfası bilgi kutuları
   -------------------------------------------------------------------------- */

.iletisim__izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2.2vw, 24px);
}

.bilgi-kutu {
	padding: 26px 24px;
	background: var(--yuzey);
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-m);
	box-shadow: var(--golge-s);
}

.bilgi-kutu__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 11px;
	background: linear-gradient(155deg, var(--altin-acik), var(--altin));
	color: var(--murekkep);
}

.bilgi-kutu__baslik {
	font-size: 17px;
	font-weight: 600;
}

.bilgi-kutu__metin {
	margin-top: 10px;
	color: var(--metin-soft);
	font-size: 15.5px;
	font-style: normal;
	line-height: 1.6;
}

.bilgi-kutu__metin a:hover {
	color: var(--altin-metin);
	text-decoration: underline;
}

.bilgi-kutu .saatler {
	margin-top: 14px;
}

.bilgi-kutu__baglanti {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--yazi-baslik);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--altin-metin);
	transition: gap var(--gecis);
}

.bilgi-kutu__baglanti:hover {
	gap: 11px;
	text-decoration: underline;
}

/* Açık zeminde sosyal ikonlar */
.sosyal--acik {
	margin-top: 16px;
}

.sosyal--acik a {
	border-color: var(--kenar);
	color: var(--metin-soft);
}

.sosyal--acik a:hover {
	color: var(--murekkep);
	background: var(--altin);
	border-color: var(--altin);
}

.iletisim__ek {
	margin-top: 16px;
	font-size: 15px;
	color: var(--metin-soft);
}

.iletisim__ek a {
	font-weight: 600;
	color: var(--altin-metin);
}

.iletisim__ek a:hover {
	text-decoration: underline;
}

.iletisim__yazi {
	margin-top: clamp(28px, 4vw, 44px);
	max-width: 70ch;
}



/* ==========================================================================
   12. KIRINTI, SAYFALAMA, BOŞ DURUM, ARAMA
   ========================================================================== */

.kirinti {
	border-bottom: 1px solid var(--kenar);
	background: var(--beyaz);
	font-size: 13.5px;
}

.kirinti__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 12px;
	color: var(--metin-soft);
}

.kirinti__oge + .kirinti__oge::before {
	content: "/";
	margin-right: 8px;
	color: var(--kenar);
}

.kirinti__oge a:hover {
	color: var(--altin-metin);
	text-decoration: underline;
}

.kirinti__oge [aria-current] {
	color: var(--metin);
	font-weight: 500;
}

/* Arşiv başlığı */
.arsiv-basi {
	padding-block: clamp(30px, 4.5vw, 52px);
	background: var(--beyaz);
	border-bottom: 1px solid var(--kenar);
}

.arsiv-basi__baslik {
	font-size: clamp(28px, 4vw, 42px);
}

.arsiv-basi__metin {
	margin-top: 12px;
	max-width: 68ch;
	color: var(--metin-soft);
	font-size: 16.5px;
}

.arsiv-basi__arama {
	margin-top: 20px;
	max-width: 460px;
}

/* Sayfalama */
.sayfalama {
	margin-top: clamp(32px, 4vw, 48px);
}

.sayfalama .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.sayfalama .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	background: var(--yuzey);
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-s);
	font-weight: 500;
	transition: border-color var(--gecis), color var(--gecis), background-color var(--gecis);
}

.sayfalama .page-numbers:hover {
	border-color: var(--altin-koyu);
	color: var(--altin-metin);
}

.sayfalama .page-numbers.current {
	background: var(--murekkep);
	border-color: var(--murekkep);
	color: var(--altin);
}

/* Boş durum */
.bos-durum {
	max-width: 560px;
	margin-inline: auto;
	padding-block: clamp(32px, 6vw, 64px);
	text-align: center;
}

.bos-durum__kod {
	font-family: var(--yazi-baslik);
	font-size: clamp(64px, 14vw, 128px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	background: linear-gradient(180deg, var(--altin) 10%, var(--altin-koyu) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bos-durum__baslik {
	font-size: clamp(22px, 3vw, 30px);
	margin-top: 8px;
}

.bos-durum__metin {
	margin-top: 12px;
	color: var(--metin-soft);
}

.bos-durum__eylemler {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.bos-durum__arama {
	margin-top: 28px;
}

.bos-durum .dugme {
	margin-top: 22px;
}

.bos-durum__eylemler .dugme {
	margin-top: 0;
}

/* Arama formu */
.arama {
	display: flex;
	gap: 8px;
}

.arama__alan {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	background: var(--beyaz);
	border: 1px solid var(--kenar);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15.5px;
	color: var(--metin);
}

.arama__alan:focus {
	outline: none;
	border-color: var(--altin-koyu);
	box-shadow: 0 0 0 3px rgba(217, 164, 65, .18);
}

.arama__dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	background: var(--altin);
	border: 0;
	border-radius: 50%;
	color: var(--murekkep);
	transition: background-color var(--gecis), transform var(--gecis);
}

.arama__dugme:hover {
	background: var(--altin-koyu);
	transform: scale(1.05);
}

/* Arama katmanı koyu zeminde */
.arama-katmani .arama__alan {
	background: var(--murekkep);
	border-color: var(--kenar-koyu);
	color: var(--metin-ters);
}

.arama-katmani .arama__alan::placeholder {
	color: rgba(245, 243, 240, .45);
}

/* Harita */
.harita iframe {
	width: 100%;
	height: clamp(280px, 42vw, 440px);
	border: 0;
	display: block;
	filter: grayscale(.25);
}

/* Neden biz maddeleri */
.madde {
	padding: 24px;
	background: var(--yuzey);
	border: 1px solid var(--kenar);
	border-radius: var(--yuvarlak-m);
}

.madde__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: linear-gradient(160deg, var(--altin-acik), var(--altin));
	color: var(--murekkep);
}

.madde__baslik {
	font-size: 18px;
}

.madde__metin {
	margin-top: 8px;
	color: var(--metin-soft);
	font-size: 15px;
}

.madde__metin a:hover {
	color: var(--altin-metin);
	text-decoration: underline;
}


/* ==========================================================================
   13. ALT BİLGİ
   ========================================================================== */

.alt {
	background: var(--murekkep);
	color: var(--metin-ters);
	margin-top: auto;
}

.alt__ic {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(24px, 3.5vw, 48px);
	padding-block: clamp(44px, 6vw, 72px);
}

@media (max-width: 980px) {
	.alt__ic { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.alt__ic { grid-template-columns: 1fr; }
}

.alt__logo {
	height: 44px;
	width: auto;
}

.alt__metin {
	margin-top: 16px;
	max-width: 40ch;
	color: var(--metin-ters-soft);
	font-size: 14.5px;
}

.alt__baslik {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--altin);
	margin-bottom: 16px;
}

.alt__liste li + li {
	margin-top: 9px;
}

.alt__liste a {
	color: var(--metin-ters-soft);
	font-size: 14.5px;
	transition: color var(--gecis);
}

.alt__liste a:hover {
	color: var(--altin);
}

.alt__iletisim li {
	display: flex;
	gap: 11px;
	font-size: 14.5px;
	color: var(--metin-ters-soft);
}

.alt__iletisim li + li {
	margin-top: 14px;
}

.alt__iletisim .esse-ikon {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--altin);
}

.alt__iletisim a:hover {
	color: var(--altin);
}

.sosyal {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.sosyal a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--kenar-koyu);
	border-radius: 50%;
	color: var(--metin-ters-soft);
	transition: color var(--gecis), border-color var(--gecis), background-color var(--gecis), transform var(--gecis);
}

.sosyal a:hover {
	color: var(--murekkep);
	background: var(--altin);
	border-color: var(--altin);
	transform: translateY(-2px);
}

.alt__telif {
	border-top: 1px solid var(--kenar-koyu);
	font-size: 13.5px;
	color: var(--metin-ters-soft);
}

.alt__telif-ic {
	padding-block: 20px;
	text-align: center;
}


/* ==========================================================================
   14. MOBİL HIZLI İLETİŞİM ÇUBUĞU
   ========================================================================== */

.hizli-cubuk {
	display: none;
}

@media (max-width: 720px) {
	.hizli-cubuk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 65;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		background: var(--murekkep);
		border-top: 1px solid var(--kenar-koyu);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.hizli-cubuk__oge {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 10px 4px;
		font-family: var(--yazi-baslik);
		font-size: 11.5px;
		font-weight: 600;
		color: var(--metin-ters-soft);
	}

	.hizli-cubuk__oge .esse-ikon {
		color: var(--altin);
	}

	.hizli-cubuk__oge--wa .esse-ikon {
		color: #4ADE80;
	}

	.hizli-cubuk__oge + .hizli-cubuk__oge {
		border-left: 1px solid var(--kenar-koyu);
	}

	/* Çubuk içeriği örtmesin */
	body {
		padding-bottom: 62px;
	}

	.filtre {
		top: 0;
	}
}


/* ==========================================================================
   15. YAZI İÇERİĞİ (editörden gelen serbest içerik)
   ========================================================================== */

.yazi {
	font-size: 17px;
	color: var(--metin);
}

.yazi > * + * {
	margin-top: 20px;
}

.yazi h2 {
	font-size: 26px;
	margin-top: 38px;
}

.yazi h3 {
	font-size: 21px;
	margin-top: 30px;
}

.yazi a {
	color: var(--altin-metin);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yazi ul,
.yazi ol {
	padding-left: 22px;
}

.yazi ul { list-style: disc; }
.yazi ol { list-style: decimal; }

.yazi li + li {
	margin-top: 8px;
}

.yazi blockquote {
	margin: 0;
	padding: 16px 22px;
	border-left: 4px solid var(--altin-koyu);
	background: var(--kagit-2);
	border-radius: var(--yuvarlak-s);
	color: var(--metin-soft);
}

.yazi img {
	border-radius: var(--yuvarlak-m);
}

.yazi table {
	font-size: 15px;
}

.yazi th,
.yazi td {
	padding: 10px 14px;
	border: 1px solid var(--kenar);
	text-align: left;
}

.yazi th {
	background: var(--kagit-2);
	font-family: var(--yazi-baslik);
}


/* ==========================================================================
   16. ERİŞİLEBİLİRLİK VE YAZDIRMA
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.esse-ikon {
	flex-shrink: 0;
}

/* Menü açıkken arka planın kaymasını engelle */
body.menu-acik {
	overflow: hidden;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.ust,
	.alt,
	.hizli-cubuk,
	.filtre {
		display: none !important;
	}

	/* Çağrı bölümü yazdırılırken kalsın — telefon numarası kâğıtta da lazım */
	.cagri {
		background: none;
		color: #000;
		border-top: 1px solid #999;
	}

	.eylem {
		box-shadow: none;
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
	}

	body {
		background: #fff;
		color: #000;
		padding-bottom: 0;
	}

	.kart {
		break-inside: avoid;
		box-shadow: none;
	}
}