/* ==========================================================================
   FYR Luxury — MARKA KATMANI (Tur 2)
   custom.css'in ÜSTÜNE yüklenir. custom.css tasarım sistemini kurar
   (ölçü, buton, form, ürün kartı); bu dosya markayı giydirir ve ürün
   detay sayfasının yeni düzenini getirir.

   YÖN
   Koyu mürekkep gövde · sıcak kırık beyaz kâğıt · tek vurgu: altın.
   Altın SADECE satın alma yolunda ve koyu zemin üstünde çıkar —
   kısıt bilinçli, çünkü her yerde olan bir vurgu vurgu değildir.

   DÜZEN
   0) Fontlar   1) Tokenlar   2) Tipografi   3) Üst şerit
   4) Kapak     5) PDP ızgarası  6) Anlatı sütunu
   7) Satın alma kutusu   8) Mobil kutu   9) Duyarlılık
   ========================================================================== */

/* ==========================================================================
   0) FONTLAR — kendi sunucumuzdan
   Google'a istek atmıyoruz: üçüncü taraf bağlantısı hem LCP'ye ~150ms
   ekliyor hem de ziyaretçinin IP'sini başka bir sunucuya yolluyor.
   Yalnızca latin + latin-ext alt kümeleri (Türkçe için yeterli), toplam 88 KB.
   Jost DEĞİŞKEN font: tek dosya 300–700 arası tüm ağırlıkları veriyor.
   ========================================================================== */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Parisienne";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/parisienne-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Parisienne";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/parisienne-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1) TOKENLAR — custom.css'teki değerleri marka paletine çeker
   İsimler AYNI kalıyor; böylece custom.css'teki 500 satır kural
   tek satır bile değişmeden yeni palete geçiyor.
   ========================================================================== */

:root {
	/* Mürekkep — koyudan açığa */
	--fyr-ink:        #100F0E;  /* gövde metni, birincil buton */
	--fyr-ink-900:    #1B1917;  /* menü şeridi */
	--fyr-ink-800:    #26221E;  /* buton hover, kutu içi koyu */
	--fyr-ink-700:    #3A342E;  /* koyu zemin üstü çizgi */
	--fyr-ink-2:      #4A423B;  /* ikincil metin */
	--fyr-ink-3:      #6D635A;  /* üçüncül metin, etiket */
	--fyr-ink-400:    #9B9086;  /* koyu zemin üstü sönük metin */

	/* Kâğıt — sıcak kırık beyaz. Saf beyaz KULLANILMIYOR:
	   ekranda soğuk duruyor ve seramik fotoğraflarını griye çekiyor. */
	--fyr-paper:      #FAF7F2;
	--fyr-stone:      #F4EFE7;  /* satın alma kutusu zemini */
	--fyr-stone-2:    #ECE5DB;  /* hover zemini */
	--fyr-line:       #DED5C8;  /* çizgi */
	--fyr-line-2:     #ECE5DB;  /* saç teli çizgi (tablo satırları) */

	/* Altın — TEK vurgu. Üç tonu üç ayrı iş yapıyor:
	   gold      koyu zemin üstünde metin/çerçeve/dolgu (kontrast 7:1)
	   gold-soft koyu zemin üstünde ikincil vurgu
	   gold-deep AÇIK zemin üstünde metin (kontrast 4,7:1) ve beyaz
	             yazı taşıyan rozet zemini — parlak ton bunu yapamaz */
	--fyr-gold:       #C9964B;
	--fyr-gold-soft:  #D8B478;
	--fyr-gold-deep:  #8A6220;
	--fyr-cream:      #E9DCC4;

	/* custom.css bu iki adı kullanıyor — marka tonlarına bağlıyoruz */
	--fyr-ember:      #C9964B;
	--fyr-ember-hot:  #E9DCC4;

	--fyr-genislik:   1180px;   /* okuma ritmi — içerik bu genişlikte hizalanır */
	/* Tam genişlik bölümlerin iç boşluğu: geniş ekranda içeriği
	   1180'lik ritme oturtur, dar ekranda 1.25rem'e düşer. */
	--fyr-kenar:      max(1.25rem, calc((100vw - var(--fyr-genislik)) / 2));
	--fyr-iz:         .18em;    /* büyük harf harf aralığı */
}

/* ==========================================================================
   2) TİPOGRAFİ
   Jost geometrik bir sans; büyük puntoda fazla açık durur, o yüzden
   başlıklarda POZİTİF harf aralığı ve büyük harf kullanıyoruz —
   custom.css'teki negatif aralık kuralını burada eziyoruz.
   ========================================================================== */

body,
.fyr-pdp,
button,
input,
select,
textarea {
	font-family: "Jost", var(--flatsome-font, system-ui), system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
	background: var(--fyr-paper);
	color: var(--fyr-ink);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.product-title,
.section-title {
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* El yazısı — sayfada sadece iki yerde: kapak üst yazısı ve atölye
   notu etiketi. Üçüncü bir yerde kullanılırsa imza olmaktan çıkar. */
.fyr-kick {
	font-family: "Parisienne", "Apple Chancery", cursive;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.1;
}

.up,
.fyr-eyebrow,
.fyr-blok-basligi {
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
}

.fyr-blok-basligi {
	margin: 0;
	font-size: .688rem;
	font-weight: 500;
	color: var(--fyr-ink-3);
}

/* ==========================================================================
   3) ÜST ŞERİT — ücretsiz kargo + kampanya sayacı
   ========================================================================== */

.fyr-serit {
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	font-size: .688rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
}

.fyr-serit__ic {
	max-width: var(--fyr-genislik);
	margin-inline: auto;
	padding: .75rem clamp(1rem, 3vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.fyr-serit__sag { color: var(--fyr-gold-soft); }

/* Sayaç rakamları: tabular-nums olmadan her saniye satır zıplıyor. */
.fyr-sayac time {
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

/* ==========================================================================
   4) ÜRÜN GALERİSİ — sol sütun, 1:1
   Flatsome'ın flickity galerisi kullanılmıyor; gerekçe inc/40-pdp.php.
   Kare oran bilinçli: katalog dikey vazodan yatay tabağa kadar
   değişiyor, `contain` ile her ürün farklı yükseklikte bir kutu
   üretiyordu ve sağdaki satın alma kutusu her sayfada başka bir
   hizada başlıyordu.
   ========================================================================== */

.fyr-pdp__galeri { grid-area: galeri; min-width: 0; }

.fyr-kapak {
	position: relative;
	width: 100%;
	background: var(--fyr-stone);
	border: 1px solid var(--fyr-line);
}

/* Ana görsel bir <button>: tıklayınca büyütme katmanı açılıyor.
   Buton olmasının sebebi klavye ve ekran okuyucu — <div onclick> ile
   aynı görünüp erişilebilir olmayan bir şey yapmıyoruz. */
.fyr-kapak__ana {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: zoom-in;
	line-height: 0;
	min-height: 0;
}

.fyr-kapak__ana img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.fyr-kapak--bos { aspect-ratio: 1 / 1; }

/* — Küçük görseller: görselin sol altında kare kutular ————————— */
.fyr-kapak__kucukler {
	position: absolute;
	left: clamp(.75rem, 1.6vw, 1.25rem);
	bottom: clamp(.75rem, 1.6vw, 1.25rem);
	z-index: 2;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	max-width: calc(100% - 2rem);
}

.fyr-kapak__kucuk {
	width: 64px;
	height: 64px;
	flex: none;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(250, 247, 242, .35);
	border-radius: 0;
	background: var(--fyr-ink-900);
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	min-height: 0;
	transition: border-color var(--fyr-fast, .18s) ease;
}

.fyr-kapak__kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fyr-kapak__kucuk:hover { border-color: var(--fyr-gold-soft); }
.fyr-kapak__kucuk.is-secili { border-color: var(--fyr-gold); box-shadow: inset 0 0 0 2px var(--fyr-ink); }
.fyr-kapak__kucuk:focus-visible { outline: 2px solid var(--fyr-gold); outline-offset: 2px; }

/* Küçük görseller açık zeminli bir fotoğrafın üstüne denk gelirse
   seçilebilir kalsınlar diye alt kenara hafif bir perde. */
.fyr-kapak::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: clamp(4rem, 9vw, 6.5rem);
	pointer-events: none;
	background: linear-gradient(to top, rgba(16, 15, 14, .45), rgba(16, 15, 14, 0));
	z-index: 1;
}
.fyr-kapak--bos::after,
.fyr-kapak:not(:has(.fyr-kapak__kucukler))::after { display: none; }

/* — Büyütme katmanı ————————————————————————— */
.fyr-buyutec {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(16, 15, 14, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	cursor: zoom-out;
}
.fyr-buyutec[hidden] { display: none; }

.fyr-buyutec img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.fyr-buyutec__kapat {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--fyr-ink-700);
	border-radius: 0;
	background: rgba(16, 15, 14, .6);
	color: var(--fyr-paper);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	min-height: 0;
}

/* ==========================================================================
   5) PDP IZGARASI — klasik iki sütun, ortalanmış kolon
   ========================================================================== */

.fyr-pdp__govde {
	max-width: var(--fyr-genislik);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);

	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(320px, 32%, 380px);
	grid-template-areas:
		"galeri kutu"
		"giris  kutu"
		"anlati kutu"
		"bosluk kutu";
	/* Dördüncü satır bilerek BOŞ ve `1fr`: sağdaki kutu dört satıra
	   yayıldığı için, kutu sol sütundan uzunsa artan yükseklik
	   satırlara dağıtılıyor ve bloklar arasında boşluk açılıyordu.
	   Tampon satır o artığı yutuyor. */
	grid-template-rows: auto auto auto 1fr;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.fyr-pdp__giris-alani { grid-area: giris; min-width: 0; padding-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.fyr-pdp__anlati      { grid-area: anlati; }
.fyr-pdp__kutu        { grid-area: kutu; }

.fyr-pdp__anlati {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3.4vw, 2.25rem);
	min-width: 0;
}

.fyr-pdp__kutu {
	background: var(--fyr-stone);
	border: 1px solid var(--fyr-line);
	align-self: start;
	/* Flatsome'ın kolon kuralları bu kutuya uymuyor — sıfırlıyoruz. */
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
}

/* YAPIŞKANLIK ŞARTA BAĞLI — bkz. pdp.js `yapiskanKarari()`.
   Yapışan şey kutunun TAMAMI. Bir ara yalnızca "karar çekirdeğini"
   yapışkan yapmıştık; kırıldı: yapışkan öğe akıştaki yerini korur ama
   görsel olarak aşağı kayar, yani çekirdek altındaki kuyruğun üzerine
   binip metinleri üst üste bindiriyordu.
   Neden CSS'te koşulsuz `position:sticky` YAZMIYORUZ:
     Kutu ekrandan uzunsa `top` ile yapışan bir öğenin ALT ucuna
     kullanıcı asla ulaşamıyor — güven listesi ve tamamlayıcı ürün
     sonsuza kadar görünmez kalıyor.
     Kutuya kendi kaydırma çubuğunu vermek de (overflow-y:auto) çözüm
     değil: sayfa içinde ikinci bir kaydırma alanı, özellikle
     dokunmatikte, kullanıcıyı yanlış yeri kaydırırken bırakıyor.
   Bu yüzden karar JS'te ve ÖLÇÜME dayalı. JS yoksa normal akar. */
.fyr-pdp__kutu.is-yapiskan {
	position: sticky;
	/* Flatsome başlığı yapışkan (`has-sticky sticky-fade`); yüksekliği
	   ayara ve admin çubuğuna göre değişiyor, pdp.js ölçüyor. */
	top: calc(var(--fyr-sabit-ust, 0px) + 1rem);
}

/* Kutu içeriği kolonun tamamını kullansın — dar bir sütunda
   ortalanmış içerik, kutuyu boş gösteriyordu. */
.fyr-pdp__kutu-ic,
.fyr-pdp__kutu-kuyruk {
	padding: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.125rem;
}

.fyr-pdp__kutu-kuyruk { padding-top: 0; }
.fyr-pdp__kutu-kuyruk:empty { display: none; }

/* ==========================================================================
   6) ANLATI SÜTUNU
   ========================================================================== */

.fyr-pdp__giris {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.fyr-pdp__giris .fyr-eyebrow { color: var(--fyr-gold-deep); }

/* El yazısı üst yazı — kapaktan buraya taşındı. */
.fyr-pdp__kicker {
	font-size: clamp(1.35rem, .95rem + 1.5vw, 2rem);
	color: var(--fyr-gold-deep);
	margin-top: .25rem;
	line-height: 1;
}

.fyr-pdp__baslik {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.75rem);
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.1;
	text-wrap: balance;
}

/* Vitrin adı kullanıldığında gerçek ürün adı — müşteri sepette ve
   faturada bunu görecek, iki ad arasında kopukluk olmasın. */
.fyr-pdp__gercek-ad {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-ink-3);
}

.fyr-pdp__giris .fyr-pdp__ozet { margin-top: .75rem; }

.fyr-pdp__ozet p {
	margin: 0 0 .75rem;
	max-width: 54ch;
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 300;
	color: var(--fyr-ink-2);
	text-wrap: pretty;
}
.fyr-pdp__ozet p:last-child { margin-bottom: 0; }

/* — Fayda kartları — tasarımdaki 2×2 ————————————————
   `auto-fit` ile üç sütuna düşüyordu ve dört kartın kalan iki hücresi
   BOŞ ama DOLU görünüyordu: aralıkları çizgi rengiyle boyayan hile,
   kart olmayan hücreyi de boyuyordu. Artık ayırıcılar kartların
   kendi kenarlığında; boş hücre kâğıt renginde kalıyor. */
.fyr-faydalar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: transparent;
	border-top: 1px solid var(--fyr-line);
	border-left: 1px solid var(--fyr-line);
}

.fyr-fayda {
	background: transparent;
	border-right: 1px solid var(--fyr-line);
	border-bottom: 1px solid var(--fyr-line);
	padding: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

@media (max-width: 559px) {
	.fyr-faydalar { grid-template-columns: minmax(0, 1fr); }
}

.fyr-fayda__no {
	font-size: .688rem;
	font-weight: 500;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-gold-deep);
}

.fyr-fayda__baslik {
	font-size: .938rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.fyr-fayda__metin {
	font-size: .875rem;
	line-height: 1.65;
	font-weight: 300;
	color: var(--fyr-ink-2);
}

/* — Nitelik tablosu ————————————————————————— */
.fyr-nitelikler { display: flex; flex-direction: column; gap: 1rem; }

.fyr-nitelikler .fyr-blok-basligi {
	border-bottom: 1px solid var(--fyr-line);
	padding-bottom: .75rem;
}

.fyr-nitelikler__liste {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	column-gap: 2.5rem;
}

.fyr-nitelik {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--fyr-line-2);
	font-size: .938rem;
}

.fyr-nitelik dt { margin: 0; color: var(--fyr-ink-3); font-weight: 300; }
.fyr-nitelik dd { margin: 0; font-weight: 500; text-align: right; }

/* — Atölye notu ——————————————————————————— */
.fyr-atolye {
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	padding: clamp(1.25rem, 2.6vw, 2rem);
	display: flex;
	gap: clamp(1rem, 2.4vw, 2rem);
	align-items: center;
	flex-wrap: wrap;
}

.fyr-atolye__etiket {
	font-size: clamp(1.25rem, 1rem + .9vw, 1.875rem);
	color: var(--fyr-gold-soft);
	flex: none;
}

.fyr-atolye__metin {
	margin: 0;
	flex: 1 1 22ch;
	font-size: .938rem;
	line-height: 1.7;
	font-weight: 300;
	color: #CFC6B8;
}

/* — Değerlendirmeler ————————————————————————— */
.fyr-yorumlar { display: flex; flex-direction: column; gap: 1.25rem; }

.fyr-yorumlar__ust {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--fyr-line);
	padding-bottom: .75rem;
}

.fyr-yorumlar__ozet {
	font-size: .875rem;
	font-weight: 300;
	color: var(--fyr-ink-2);
}
.fyr-yorumlar__ozet b { font-weight: 500; }

.fyr-yorumlar__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.5rem;
}

.fyr-yorum { margin: 0; display: flex; flex-direction: column; gap: .6rem; }

.fyr-yorum__metin {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: .938rem;
	line-height: 1.65;
	font-weight: 300;
	quotes: none;
}

.fyr-yorum__kim {
	font-size: .688rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-ink-3);
}

.fyr-yorumlar__tum {
	align-self: flex-start;
	font-size: .688rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-gold-deep);
	border-bottom: 1px solid currentColor;
}

/* Yıldızlar — tek karakter seti, dolu/boş renk farkıyla. */
.fyr-yildiz { color: var(--fyr-gold); font-size: .813rem; letter-spacing: .18em; white-space: nowrap; }
.fyr-yildiz__bos { color: var(--fyr-line); }

/* ==========================================================================
   7) SATIN ALMA KUTUSU
   ========================================================================== */

.fyr-pdp__kutu .woocommerce-product-rating { margin: 0; }

.fyr-pdp__kutu .price,
.fyr-pdp__kutu .product-page-price {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.375rem);
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--fyr-ink);
	line-height: 1.1;
	display: flex;
	align-items: baseline;
	gap: .625rem;
	flex-wrap: wrap;
}

.fyr-pdp__kutu .price del {
	font-size: 1rem;
	font-weight: 300;
	color: var(--fyr-ink-3);
	opacity: 1;
}
.fyr-pdp__kutu .price ins { text-decoration: none; font-weight: 400; }

.fyr-fiyat-alti {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: -.75rem;   /* fiyata yapışsın */
}

/* Tasarruf rozeti: koyu altın zemin + kırık beyaz yazı.
   Parlak altın zemin üstünde beyaz yazı 2,4:1'de kalıyordu. */
.fyr-tasarruf {
	align-self: flex-start;
	background: var(--fyr-gold-deep);
	color: var(--fyr-paper);
	font-size: .688rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .35rem .6rem;
}

.fyr-taksit {
	font-size: .875rem;
	font-weight: 300;
	color: var(--fyr-ink-2);
}

/* — Varyasyon seçimi: açılır liste yerine düğme —————————
   Flatsome'ın kutudan çıkan <select>'i "hangi renk seçili" sorusunu
   cevaplamıyordu. Flatsome'ın ux-swatches bileşeni varsa onu
   markaya bağlıyoruz; yoksa select olduğu gibi kalıyor. */
.fyr-pdp__kutu .variations { margin: 0; }
.fyr-pdp__kutu .variations td,
.fyr-pdp__kutu .variations th { padding: 0 0 .5rem; border: 0; }

.fyr-pdp__kutu .variations label,
.fyr-pdp__kutu .variations .label {
	font-size: .688rem !important;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-ink-3);
	font-weight: 500;
}

.fyr-pdp__kutu .ux-swatch {
	border: 1px solid #C4BAAC;
	border-radius: 0;
	width: 40px;
	height: 40px;
}
.fyr-pdp__kutu .ux-swatch:hover { border-color: var(--fyr-gold); }
.fyr-pdp__kutu .ux-swatch.selected {
	border-color: var(--fyr-gold);
	box-shadow: inset 0 0 0 3px var(--fyr-stone);
}

/* — SET SEÇİMİ ——————————————————————————— */
.fyr-set {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.fyr-set > .fyr-blok-basligi {
	padding: 0;
	margin-bottom: .25rem;
}

.fyr-set__secenek {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	background: transparent;
	border: 1px solid var(--fyr-line);
	cursor: pointer;
	transition: border-color var(--fyr-fast, .18s) ease, background var(--fyr-fast, .18s) ease;
}

.fyr-set__secenek:hover { border-color: var(--fyr-gold); }

.fyr-set__secenek.is-secili {
	background: var(--fyr-paper);
	border-color: var(--fyr-gold);
	box-shadow: inset 0 0 0 1px var(--fyr-gold);
}

/* Radyo düğmesini gizlemiyoruz, ŞEFFAFLAŞTIRIP kutunun üstüne
   yayıyoruz: klavye odağı ve ekran okuyucu davranışı korunuyor. */
.fyr-set__secenek input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fyr-set__secenek:has(input:focus-visible) {
	outline: 2px solid var(--fyr-gold);
	outline-offset: 2px;
}

.fyr-set__govde {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
}

.fyr-set__sol { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fyr-set__sag { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }

.fyr-set__baslik {
	font-size: .813rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.fyr-set__not {
	font-size: .813rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--fyr-ink-3);
}

.fyr-set__fiyat { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.fyr-set__fiyat del { display: none; }  /* seviye fiyatı tek satır kalsın */

.fyr-set__tasarruf {
	font-size: .688rem;
	line-height: 1.4;
	color: var(--fyr-gold-deep);
}
.fyr-set__tasarruf:empty { display: none; }

.fyr-set__rozet {
	align-self: flex-start;
	background: var(--fyr-ink);
	color: var(--fyr-cream);
	font-size: .688rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .25rem .5rem;
}

/* — STOK ÇUBUĞU ——————————————————————————— */
.fyr-stok { display: flex; flex-direction: column; gap: .5rem; }

.fyr-stok__ust {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: .813rem;
}

.fyr-stok__etiket {
	font-size: .688rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-ink-3);
}

.fyr-stok__adet { color: var(--fyr-gold-deep); font-weight: 500; }

.fyr-stok__ray { height: 3px; background: var(--fyr-line); }
.fyr-stok__dolgu { display: block; height: 100%; background: var(--fyr-gold); }

.fyr-stok__sosyal { font-size: .75rem; font-weight: 300; color: var(--fyr-ink-3); }

/* — SEPETE EKLE ——————————————————————————— */
.fyr-pdp__kutu form.cart {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
}

.fyr-pdp__kutu .quantity { margin: 0; }

.fyr-pdp__kutu .single_add_to_cart_button {
	width: 100%;
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	border: 0;
	border-radius: 0;
	padding: 1.25rem 1.375rem;
	font-size: .813rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 3.5rem;
	line-height: 1.2;
}

.fyr-pdp__kutu .single_add_to_cart_button:hover { background: var(--fyr-ink-800); }
.fyr-pdp__kutu .single_add_to_cart_button:active { background: var(--fyr-ink-700); }

/* Butonun sağındaki tutar — JS dolduruyor (bkz. pdp.js) */
.fyr-atc-tutar { color: var(--fyr-gold-soft); font-weight: 400; white-space: nowrap; }
.fyr-atc-tutar:empty { display: none; }

.fyr-hediye-btn {
	width: 100%;
	background: transparent;
	color: var(--fyr-ink);
	border: 1px solid var(--fyr-ink);
	border-radius: 0;
	padding: 1rem 1.375rem;
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	text-align: left;
}
.fyr-hediye-btn:hover { background: var(--fyr-stone-2); color: var(--fyr-ink); }

/* — GÜVEN LİSTESİ ————————————————————————— */
.fyr-guven {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--fyr-line);
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.fyr-guven__madde {
	display: flex;
	gap: .75rem;
	font-size: .813rem;
	line-height: 1.55;
	font-weight: 300;
	color: var(--fyr-ink-2);
}

.fyr-guven__madde::before {
	content: "—";
	color: var(--fyr-gold);
	flex: none;
}

/* — TAMAMLAYICI ÜRÜN ————————————————————— */
.fyr-tamamla {
	border: 1px solid var(--fyr-line);
	background: var(--fyr-paper);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fyr-tamamla__urun {
	display: flex;
	gap: .75rem;
	align-items: center;
	color: inherit;
}
.fyr-tamamla__urun:hover { color: inherit; text-decoration: none; }

.fyr-tamamla__gorsel { flex: none; width: 60px; height: 60px; }
.fyr-tamamla__gorsel img { width: 60px; height: 60px; object-fit: cover; }

.fyr-tamamla__bilgi { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.fyr-tamamla__ad { font-size: .875rem; font-weight: 500; }
.fyr-tamamla__fiyat { font-size: .813rem; font-weight: 300; color: var(--fyr-ink-2); }
.fyr-tamamla__fiyat del { color: var(--fyr-ink-3); }
.fyr-tamamla__fiyat ins { text-decoration: none; font-weight: 500; }

.fyr-tamamla__btn {
	display: block;
	background: transparent;
	border: 1px solid var(--fyr-ink);
	color: var(--fyr-ink);
	padding: .75rem .875rem;
	font-size: .688rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	text-align: left;
}
.fyr-tamamla__btn:hover { background: var(--fyr-stone-2); color: var(--fyr-ink); }

/* Teslimat satırları kutuya uyumlansın */
.fyr-pdp__kutu .fyr-pdp-facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .813rem;
	font-weight: 300;
	color: var(--fyr-ink-2);
}

/* ==========================================================================
   8) YAPIŞKAN SATIN ALMA ÇUBUĞU — mobil VE masaüstü
   Masaüstünde de gerekli: set seçimli bir üründe satın alma kutusu
   ~1126px, tipik dizüstü ekranı 900px. Kutu sığmadığı için yapışkan
   olamıyor (bkz. pdp.js → yapiskanKarari); "Sepete ekle" kaydırınca
   kayboluyordu. Çubuk bu boşluğu kapatıyor.
   ========================================================================== */

.fyr-satis-cubugu {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--fyr-paper);
	border-top: 1px solid var(--fyr-line);
	box-shadow: 0 -8px 24px -16px rgba(16, 15, 14, .5);
}

.fyr-satis-cubugu[hidden] { display: none; }

.fyr-satis-cubugu__ic {
	max-width: var(--fyr-genislik);
	margin-inline: auto;
	padding: .75rem clamp(1rem, 3vw, 2.5rem) calc(.75rem + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
}

/* — Ürün kimliği: masaüstünde ne satın aldığını hatırlatır —————— */
.fyr-satis-cubugu__urun {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
	flex: 1 1 auto;
}

.fyr-satis-cubugu__urun img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex: none;
}

.fyr-satis-cubugu__ad {
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.fyr-satis-cubugu__stok { flex: 0 1 200px; min-width: 0; }
.fyr-satis-cubugu__stok[hidden] { display: none; }
.fyr-satis-cubugu__stok .fyr-stok__sosyal { display: none; } /* çubukta yer yok */

.fyr-satis-cubugu__fiyat {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	flex: none;
	text-align: right;
}

.fyr-satis-cubugu__tutar { font-size: 1.25rem; font-weight: 400; line-height: 1.1; }
.fyr-satis-cubugu__tutar del { display: none; }
.fyr-satis-cubugu__taksit { font-size: .688rem; font-weight: 300; color: var(--fyr-ink-3); }

.fyr-satis-cubugu__btn {
	flex: 0 0 auto;
	min-width: 15rem;
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	border: 0;
	border-radius: 0;
	padding: 1rem 1.25rem;
	min-height: 3.25rem;
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	text-align: left;
}
.fyr-satis-cubugu__btn:hover { background: var(--fyr-ink-800); color: var(--fyr-paper); }

.fyr-satis-cubugu__etiket { color: var(--fyr-gold-soft); font-weight: 400; }
.fyr-satis-cubugu__etiket:empty { display: none; }

/* Mobilde ürün adı ve görsel yer kaplıyor; karar bilgisi öncelikli. */
@media (max-width: 849px) {
	.fyr-satis-cubugu__ic {
		flex-wrap: wrap;
		padding-inline: 1rem;
		gap: .5rem .75rem;
	}
	.fyr-satis-cubugu__urun { display: none; }
	.fyr-satis-cubugu__stok { flex: 1 1 100%; order: -1; }
	.fyr-satis-cubugu__fiyat { text-align: left; flex: 1 1 auto; }
	.fyr-satis-cubugu__btn { flex: 1 1 55%; min-width: 0; }
}

/* wp-bottom-menu eklentisi ile üst üste binmesin.
   Yükseklik pdp.js tarafından ölçülüp `--fyr-cubuk-h` olarak yazılıyor:
   çubuk mobilde iki satır, masaüstünde tek satır ve stok satırı
   ürüne göre var/yok — sabit bir piksel her seferinde yanlış oluyordu.
   Çubuk gizliyken değişken 0px olur ve menü yerine döner. */
body.single-product .wp-bottom-menu {
	bottom: var(--fyr-cubuk-h, 0px);
	transition: bottom .18s ease;
}

/* NOT: Mobilde iki sabit çubuk (satın alma + alt menü) 844px'lik bir
   ekranın ~%24'ünü yiyor. Alt menüyü ürün sayfasında tamamen
   kapatmak daha iyi olur — ama bu bizim değil, eklenti sahibinin
   kararı. Kapatmak isteyen aşağıdaki satırı açsın:
   body.single-product .wp-bottom-menu { display: none; } */

/* ==========================================================================
   9) DUYARLILIK
   ========================================================================== */

@media (max-width: 1024px) {
	.fyr-pdp__govde { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 340px); }
}

@media (max-width: 849px) {
	/* Mobilde sıra: GÖRSEL → ürün adı → satın alma kutusu → anlatı.
	   Kutu anlatının önünde çünkü karar bilgisi (fiyat, set, stok,
	   sepete ekle) ilk ekranda olmalı. Ama adın fiyattan önce gelmesi
	   şart — ürün adını görmeden fiyat gösteremeyiz.
	   `order` yerine ızgara ALANI kullanıyoruz: tek sütuna düşerken
	   alan adlarını da yeniden tanımlamak gerekiyor, yoksa masaüstünün
	   iki sütunlu şeması yürürlükte kalıp bloklar üst üste biniyor. */
	.fyr-pdp__govde {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"galeri"
			"giris"
			"kutu"
			"anlati";
		grid-template-rows: auto;
		padding-inline: 0;
		padding-top: 0;
		row-gap: 1.25rem;
	}

	/* Mobilde görsel tam genişlik — kenarlıksız, ekranın ucundan uca. */
	.fyr-kapak { border-inline: 0; border-top: 0; }

	.fyr-pdp__kutu.is-yapiskan { position: static; }

	.fyr-pdp__kutu {
		position: static;
		border-inline: 0;
	}

	.fyr-pdp__giris-alani {
		padding-top: 0;
		padding-inline: clamp(1rem, 4vw, 1.5rem);
	}

	.fyr-pdp__anlati {
		padding-inline: clamp(1rem, 4vw, 1.5rem);
		padding-bottom: 7rem; /* yapışkan çubuğun altında kalmasın */
	}

	.fyr-kapak__kucuk { width: 52px; height: 52px; }

	.fyr-serit__ic { font-size: .625rem; padding-inline: 1rem; }
}

@media (max-width: 549px) {
	.fyr-serit__ic { flex-direction: column; gap: .25rem; text-align: center; }
	.fyr-nitelik { font-size: .875rem; }
}

@media print {
	.fyr-satis-cubugu,
	.fyr-serit { display: none !important; }
}

/* ==========================================================================
   10) SAHA DÜZELTMELERİ
   Gerçek şablon çıktısıyla karşılaştırınca çıkanlar. Ayrı bölüm
   tutuluyor ki hangi kuralın "tasarım", hangisinin "Flatsome'ı
   hizaya sokma" olduğu belli olsun.
   ========================================================================== */

/* — Kapak: rozetler kaldırıldı ————————————————
   Flatsome kapak görselinin sol üstüne "22% İNDİRİM" ve "Yeni"
   rozetlerini basıyor. Ürün SAYFASINDA ikisi de iş yapmıyor:
   indirimin somut karşılığı ("₺2.669 tasarruf") satın alma kutusunda,
   yeniliği ise kapak zaten anlatıyor. Kategori listesinde duruyorlar. */
.fyr-hero .badge-container { display: none; }

/* — Kapak görseli ortalansın ————————————————————
   Flickity başlamadan önce (ve JS kapalıyken) galeri sola yaslanıyordu;
   üstündeki metin katmanı ise ortada. İkisi aynı eksende olmalı. */
.fyr-hero .product-images,
.fyr-hero .woocommerce-product-gallery__wrapper {
	margin-inline: auto;
	text-align: center;
}

.fyr-hero .woocommerce-product-gallery__image img,
.fyr-hero .woocommerce-product-gallery__image a {
	display: block;
	margin-inline: auto;
}

/* — Satın alma kutusunda TEKRAR EDEN bilgiyi kaldır ————————
   Flatsome ürün özetine ekmek kırıntısı ve "Stokta" satırı basıyor.
   İkisinin de karşılığı zaten sayfada var: kategori sol sütundaki üst
   etiketde, stok ise çubukta — hem sayı hem görsel olarak. */
/* Flatsome'ın "önceki/sonraki ürün" oku satın alma kutusunun tepesine
   düşüyordu — kararla ilgisi yok, sahipsiz bir daire gibi duruyordu. */
.fyr-pdp__kutu .next-prev-thumbs,
.fyr-pdp__kutu .woocommerce-breadcrumb,
.fyr-pdp__kutu .product_meta,
.fyr-pdp__kutu > .fyr-pdp__kutu-ic > .stock,
.fyr-pdp__kutu .stock.in-stock {
	display: none;
}

/* — Nitelik tablosu düz yazı ————————————————————
   Flatsome'ın `dl` kuralı tabloyu komple büyük harfe çeviriyordu;
   "STONEWARE KİL, MAT SIR" okunabilir değil. Büyük harf bu sayfada
   yalnızca etiketlerin işi. */
.fyr-nitelik dt,
.fyr-nitelik dd {
	text-transform: none;
	letter-spacing: 0;
}

/* — Adet seçici —————————————————————————— */
.fyr-pdp__kutu .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--fyr-line);
	background: var(--fyr-paper);
	width: max-content;
}

.fyr-pdp__kutu .quantity input[type="number"],
.fyr-pdp__kutu .quantity .qty {
	border: 0;
	background: transparent;
	box-shadow: none;
	width: 3.25rem;
	height: 2.75rem;
	text-align: center;
	font-size: .938rem;
	margin: 0;
}

.fyr-pdp__kutu .quantity .minus,
.fyr-pdp__kutu .quantity .plus {
	border: 0;
	background: transparent;
	color: var(--fyr-ink-2);
	width: 2.5rem;
	height: 2.75rem;
	border-radius: 0;
}
.fyr-pdp__kutu .quantity .minus:hover,
.fyr-pdp__kutu .quantity .plus:hover { background: var(--fyr-stone-2); color: var(--fyr-ink); }

/* — "Hemen satın al" ikincil kalsın ——————————————
   Flatsome'ın buy-now butonu açık (Customizer > Ürün). Sepete ekle ile
   aynı ağırlıkta olursa hangisinin ana eylem olduğu kayboluyor. */
.fyr-pdp__kutu .ux-buy-now-button {
	width: 100%;
	background: transparent;
	color: var(--fyr-ink);
	border: 1px solid var(--fyr-line);
	border-radius: 0;
	padding: .875rem 1.375rem;
	font-size: .75rem;
	letter-spacing: var(--fyr-iz);
	min-height: auto;
	margin: 0;
}
.fyr-pdp__kutu .ux-buy-now-button:hover {
	background: var(--fyr-stone-2);
	color: var(--fyr-ink);
	border-color: var(--fyr-ink);
}

/* — Yorum ortalaması üst satırda ————————————————— */
.fyr-pdp__kutu .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .813rem;
}
.fyr-pdp__kutu .woocommerce-product-rating .star-rating { color: var(--fyr-gold); margin: 0; }
.fyr-pdp__kutu .woocommerce-review-link { color: var(--fyr-ink-3); }

/* — Alt sekmeler ve ilgili ürünler markaya bağlansın ————— */
.fyr-pdp .product-footer {
	background: var(--fyr-paper);
	border-top: 1px solid var(--fyr-line);
	margin-top: 0;
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   11) MARKA GEOMETRİSİ — site geneli
   Tasarımın en sessiz ama en belirleyici kararı: KÖŞE YOK. Kutu,
   buton, rozet, çizgi — hepsi keskin. Flatsome'ın kutudan çıkan
   hap biçimli arama kutusu ve yuvarlak sıralama menüsü bu dille
   çelişiyordu; tek bir yabancı köşe bütün sayfayı "hazır tema"
   gösteriyor.
   ========================================================================== */

.header .search-form input[type="search"],
.header .searchform input,
.header .search-field,
.woocommerce-ordering select,
.widget_product_search input,
.searchform .submit-button,
.header .search-form .button {
	border-radius: 0 !important;
}

.header .search-form input[type="search"],
.header .search-field {
	background: var(--fyr-ink-800);
	border: 1px solid var(--fyr-ink-700);
	color: var(--fyr-paper);
}
.header .search-field::placeholder { color: var(--fyr-ink-400); }

/* Kategori üstündeki sıralama menüsü — koyu şeridin üstünde duruyor */
.woocommerce-ordering select {
	background-color: var(--fyr-ink-800);
	border: 1px solid var(--fyr-ink-700);
	color: var(--fyr-paper);
}

/* ==========================================================================
   12) SEPET VE ÖDEME
   ========================================================================== */

/* Ücretsiz kargo çubuğu: eşik AŞILDIĞINDA Flatsome yeşile dönüyor.
   Yeşil bu palette hiçbir şey ifade etmiyor — "başardın" duygusunu
   markanın kendi rengiyle veriyoruz. Onay işareti mesajı zaten
   taşıyor, renk ikinci kez söylemek zorunda değil. */
.ux-free-shipping__notice--success { color: var(--fyr-gold-deep) !important; }

.ux-free-shipping__bar-progress,
.ux-free-shipping__notice--success ~ .ux-free-shipping__bar .ux-free-shipping__bar-progress {
	background: linear-gradient(90deg, var(--fyr-gold-deep), var(--fyr-gold)) !important;
}

.ux-free-shipping,
.ux-free-shipping__bar,
.ux-free-shipping__bar-progress {
	border-radius: 0;
}

/* Sepet/ödeme sayfasındaki bölüm başlıkları markaya bağlı kalsın —
   eklenti veya çeviri kaynaklı mavi başlıklar çıkabiliyor. */
.woocommerce-cart .section-title,
.woocommerce-cart .section-title span,
.woocommerce-checkout .section-title,
.woocommerce-checkout .section-title span,
.woocommerce-cart .cross-sells h2,
.woocommerce-cart .cross-sells h3,
.woocommerce-cart .cross-sells .section-title,
.woocommerce-cart .cross-sells .section-title span,
.woocommerce-cart .cross-sells .section-title b {
	color: var(--fyr-ink);
}

/* Bölüm başlığındaki ikon da mavi kalıyordu — Flatsome ikonu
   `currentColor` yerine kendi değişkeninden alıyor. */
.woocommerce-cart .cross-sells .section-title i,
.woocommerce-cart .cross-sells .section-title svg,
.woocommerce-cart .section-title i,
.woocommerce-cart .section-title svg {
	color: var(--fyr-gold-deep);
	fill: var(--fyr-gold-deep);
}

.cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout-review-order h3 {
	font-size: .813rem;
	letter-spacing: var(--fyr-iz);
	text-transform: uppercase;
	color: var(--fyr-ink);
}

/* Sepet ve ödemede birincil eylem tek: koyu, keskin, tam genişlik. */
.woocommerce .checkout-button,
.woocommerce-checkout #place_order {
	border-radius: 0;
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	letter-spacing: var(--fyr-iz);
	font-weight: 500;
	text-transform: uppercase;
}
.woocommerce .checkout-button:hover,
.woocommerce-checkout #place_order:hover { background: var(--fyr-ink-800); }

/* ==========================================================================
   13) BİLDİRİMLER VE MİNİ SEPET
   "Sepete eklendi" akışı tasarımın dışında kalmıştı: WooCommerce'in
   yeşil onay satırı ve Flatsome'ın açılır sepeti kutudan geldiği gibi
   duruyordu. Satın alma anının hemen ardından gelen ilk ekran bu —
   markanın en çok görünmesi gereken yerlerden biri.
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	border-radius: 0;
	border: 0;
	border-left: 3px solid var(--fyr-gold);
	background: var(--fyr-stone);
	color: var(--fyr-ink);
	font-size: .875rem;
	font-weight: 400;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.woocommerce-error { border-left-color: var(--fyr-err); }

/* Flatsome bildirimi `.message-wrapper > .message-container` olarak
   sarıyor ve `success-color` sınıfıyla yeşil bir onay ikonu basıyor.
   Kutunun kendisi değil, İÇ SARMALAYICI hizalanmalı. */
.woocommerce-message.message-wrapper,
.woocommerce-info.message-wrapper {
	display: block;
	padding: 0;
}

.woocommerce-message .message-container,
.woocommerce-info .message-container {
	max-width: var(--fyr-genislik);
	margin-inline: auto;
	padding: 1rem clamp(1rem, 3vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: .75rem;
	text-align: left;
	color: var(--fyr-ink);
}

/* Onay işareti markanın altınında — WooCommerce'in yeşili bu palette
   hiçbir şey ifade etmiyor ve "başarı" duygusunu marka dışına taşıyor. */
.woocommerce-message .message-container.success-color,
.woocommerce-message .icon-checkmark,
.woocommerce-info .message-container i {
	color: var(--fyr-ink);
}
.woocommerce-message .icon-checkmark { color: var(--fyr-gold-deep); flex: none; }

.woocommerce-message::before,
.woocommerce-info::before { content: none; }

/* Bildirimin içindeki "Sepetim" bağlantısı buton gibi durmalı ama ana
   eylemle yarışmamalı. Flatsome onu varsayılanda gizliyor; sepete
   ekledikten sonraki tek ileri adım o, görünür olmalı. */
.woocommerce-message .button,
.woocommerce-info .button {
	display: inline-flex !important;
	align-items: center;
	margin-left: auto;
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--fyr-ink);
	color: var(--fyr-ink);
	font-size: .688rem;
	letter-spacing: var(--fyr-iz);
	text-transform: uppercase;
	padding: .625rem 1rem;
	min-height: auto;
	line-height: 1.2;
}
.woocommerce-message .button:hover { background: var(--fyr-ink); color: var(--fyr-paper); }

/* — Mini sepet (başlıktaki açılır kutu) —————————————————
   "Ödeme" butonu siyah zemin üstünde siyah yazıyla basılıyordu; ekranda
   boş bir dikdörtgen görünüyordu. Flatsome bu butona `.button.checkout`
   veriyor, bizim `.checkout-button` kuralımız onu yakalamıyordu. */
.widget_shopping_cart_content .button.checkout,
.cart-sidebar .button.checkout,
.header-cart-inner .button.checkout,
.woocommerce-mini-cart__buttons .button.checkout {
	background: var(--fyr-ink) !important;
	color: var(--fyr-paper) !important;
	border: 1px solid var(--fyr-ink);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	font-size: .688rem;
	font-weight: 500;
}
.widget_shopping_cart_content .button.checkout:hover,
.cart-sidebar .button.checkout:hover,
.woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--fyr-ink-800) !important;
	color: var(--fyr-paper) !important;
}

/* "Sepetim" ikincil kalsın */
.widget_shopping_cart_content .button:not(.checkout),
.woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	color: var(--fyr-ink);
	border: 1px solid var(--fyr-line);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	font-size: .688rem;
	font-weight: 500;
}

.widget_shopping_cart_content,
.cart-sidebar {
	font-size: .875rem;
}

.woocommerce-mini-cart__total,
.widget_shopping_cart_content .total {
	border-top: 1px solid var(--fyr-line);
	border-bottom: 0;
	padding-top: .75rem;
	font-size: .875rem;
}

/* ==========================================================================
   14) SAYFA ZEMİNİ
   Flatsome içerik alanına beyaz veriyor. Marka kâğıdı saf beyaz DEĞİL
   (#FAF7F2) — ikisi yan yana gelince ürün sayfasının altında ve
   kenarlarında gri-beyaz şeritler oluşuyordu.
   ========================================================================== */

body,
body #wrapper,
body #main,
body .page-wrapper,
body.single-product .product-container,
body.single-product .product-footer {
	background-color: var(--fyr-paper);
}

/* İlgili ürünler, ürün sayfasının geri kalanıyla AYNI kolona otursun.
   Flatsome'ın kendi `.container` genişliği farklı; başlık ve ızgara
   sayfanın üst yarısına göre kaymış görünüyordu. */
.fyr-pdp .product-footer > .container {
	max-width: var(--fyr-genislik);
	padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.fyr-pdp .product-footer .row {
	max-width: none;
	margin-inline: 0;
}

/* Flatsome bölüm başlığını `.row` içine koyup ek yatay boşluk veriyor;
   başlık ürün ızgarasından ~37px içeride kalıyordu. */
.fyr-pdp .product-footer .section-title,
.fyr-pdp .product-footer .product-section-title {
	margin-left: 0;
	padding-left: 0;
}

/* Alt bilgi widget alanı ("Yeni eklenen / Popüler ürünler / Mimarların
   önerisi") Flatsome'tan saf beyaz geliyordu. Marka kâğıdı beyaz DEĞİL
   (#FAF7F2); ikisi alt alta gelince sayfanın dibinde görünür bir
   ton kırılması oluyordu. Bu alan site geneli, ürün sayfasına özel
   değil — o yüzden `body.single-product` ile daraltmıyoruz. */
.footer-widgets,
.footer-wrapper > .footer-widgets:not(.dark) {
	background-color: var(--fyr-paper);
}

.fyr-pdp .product-footer .related,
.fyr-pdp .product-footer .up-sells {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   15) DEĞERLENDİRME AÇILIR BLOĞU
   Alt sekmeler kapatıldı; yorum yazma yolu burada duruyor.
   ========================================================================== */

.fyr-yorum-detay {
	border-top: 1px solid var(--fyr-line);
	padding-top: 1.25rem;
}

.fyr-yorum-detay__ac {
	cursor: pointer;
	list-style: none;
	font-size: .688rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
	color: var(--fyr-gold-deep);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.fyr-yorum-detay__ac::-webkit-details-marker { display: none; }
.fyr-yorum-detay__ac::after {
	content: "+";
	font-size: 1rem;
	line-height: 1;
}
.fyr-yorum-detay[open] .fyr-yorum-detay__ac::after { content: "–"; }

.fyr-yorum-detay__ic { padding-top: 1.5rem; }
.fyr-yorum-detay__ic .comment-form { max-width: 46rem; }
.fyr-yorum-detay__ic #reply-title {
	font-size: .813rem;
	text-transform: uppercase;
	letter-spacing: var(--fyr-iz);
}

/* ==========================================================================
   16) BAŞLIK — marka kilidi
   Örnekteki başlıkla aynı düzen: en üstte koyu şerit (kargo + sayaç),
   altında arama · logo · hesap/sepet satırı, en altta ortalanmış menü.
   ========================================================================== */

/* Şerit artık başlığın ÜSTÜNDE (bkz. inc/50-kampanya.php). Başlığın
   kendi zeminiyle aynı tonda kalsın ki tek bir blok gibi okunsun. */
.fyr-serit {
	background: var(--fyr-ink);
	border-bottom: 1px solid var(--fyr-ink-800);
}

/* — Logo ————————————————————————————————
   Marka logosu bir GÖRSEL (Customizer > Site Kimliği). Bir tur metin
   kilidi denendi ve geri alındı: logo bir marka varlığı, kodun
   yeniden çizeceği bir şey değil. Buradaki kurallar yalnızca onu
   koyu başlıkta doğru boyutta ve hizada tutuyor. */
#logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

#logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* — Başlık renkleri — tasarım dosyasından birebir ————————————
   Zeminler theme_mod üzerinden geliyor (inc/15-palette.php):
     #100F0E  şerit + logo satırı   ·   #1B1917  menü satırı
   Buradakiler onların üstündeki öğeler.

   Kırık beyaz (#FAF7F2) saf beyaz DEĞİL — Flatsome varsayılan olarak
   #ffffff basıyordu. Koyu mürekkep üstünde saf beyaz sert bir kontrast
   veriyor; paletin kâğıdı sıcak ve başlık da o kâğıda ait. */

/* Kırık beyaz metin. Menü satırında Flatsome'ın kendi zinciriyle
   eşleşiyoruz, yoksa satır içi #ffffff kuralı bunu eziyor. */
.header,
.header-wrapper,
.header-main,
.header-bottom,
.header .nav > li > a,
.header-cart-title,
.account-item .nav-top-link {
	color: var(--fyr-paper);
}

.header:not(.transparent) .header-bottom-nav.nav > li > a {
	color: var(--fyr-paper);
}

/* Arama kutusu — koyu zeminden bir ton açık, keskin köşe. */
.header .searchform-wrapper input[type="search"],
.header .search-field,
.header .searchform input.search-field {
	background: var(--fyr-ink-700);   /* #26221E */
	border: 0;
	border-radius: 0;
	color: var(--fyr-paper);
	box-shadow: none;
}
.header .search-field::placeholder { color: var(--fyr-ink-400); opacity: 1; }  /* #9B9086 */
.header .searchform-wrapper .submit-button,
.header .ux-search-submit { background: transparent; color: var(--fyr-ink-400); border: 0; }
.header .ux-search-submit:hover { color: var(--fyr-paper); }

/* Hesap ile sepet arasındaki dikey çizgi */
.header-divider {
	width: 1px;
	height: 20px;
	align-self: center;
	background: var(--fyr-ink-600);   /* #3A342E */
	margin-inline: .5rem;
}

/* Sepet sayacı — çerçeveli kutu */
.header .cart-item .cart-icon strong,
.header .cart-item .cart-icon > strong {
	border: 1px solid var(--fyr-paper);
	border-radius: 0;
	background: transparent;
	color: var(--fyr-paper);
	font-weight: 500;
}

.account-item .nav-top-link,
.header-cart-link {
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* — Menü tipografisi ————————————————————————— */
.header-bottom .nav > li > a,
.header-main .nav > li > a {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Ayraç çizgileri — örnekteki dikey "|" işaretleri */
.header-bottom .nav > li + li::before {
	content: "";
	width: 1px;
	align-self: center;
	height: 1rem;
	background: var(--fyr-ink-600);   /* #3A342E */
	margin-inline: .35rem;
}
.header-bottom .nav > li { display: flex; align-items: center; }

/* Aktif menü öğesi altın.
   SEÇİCİ NEDEN BU KADAR UZUN: Flatsome satır içinde
   `.header:not(.transparent) .header-bottom-nav.nav > li > a{color:#fff}`
   basıyor — özgüllük (0,4,1). Daha kısa bir seçici, doğru yazılmış
   olsa bile beyazı geçemiyordu. Aynı zinciri kullanıp `.active`
   ekliyoruz: (0,5,1).

   `.active` de dahil çünkü Flatsome kendi işaretini o sınıfla koyuyor,
   WordPress'in `current-menu-item` sınıfıyla her zaman birlikte
   gelmiyor. */
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-item > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current_page_item > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-ancestor > a,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover {
	color: var(--fyr-gold);           /* #C9964B */
}

/* Şerit — tasarımdaki ölçüler */
.fyr-serit__ic { padding-block: .688rem; font-size: .688rem; }
.fyr-serit__sol { color: var(--fyr-paper); }
.fyr-serit__sag { color: var(--fyr-gold-soft); }   /* #D8B478 */

/* ==========================================================================
   17) SATIN ALMA KUTUSUNUN TEPESİ
   ========================================================================== */

.fyr-kutu__ad {
	margin: 0;
	font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--fyr-ink);
}

.fyr-kutu__puan {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .813rem;
	margin-top: -.5rem;
}
.fyr-kutu__puan b { font-weight: 500; }
.fyr-kutu__puan-adet { color: var(--fyr-ink-3); border-bottom: 1px solid var(--fyr-line); }
.fyr-kutu__puan-adet:hover { color: var(--fyr-gold-deep); }

/* ==========================================================================
   18) ÖDEME SAYFASI — giriş ve kupon şeritleri
   Bunlar `.woocommerce-info` sınıfını taşıyor, yani 13. bölümdeki
   bildirim stilini miras alıyorlardı: ortalanmış, iki sütuna bölünmüş
   ve bağlantısı metinden ayırt edilemeyen bir kutu çıkıyordu.
   Ödeme sayfasında bunlar bildirim değil, AÇILIR ALAN başlığı.
   ========================================================================== */

.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fyr-line);
	padding: 0;
	margin: 0;
	font-size: .875rem;
	color: var(--fyr-ink-2);
}

.woocommerce-form-login-toggle .message-container,
.woocommerce-form-coupon-toggle .message-container {
	max-width: none;
	margin: 0;
	padding: .9rem 0;
	display: flex;
	align-items: baseline;
	gap: .5rem;
	flex-wrap: wrap;
	text-align: left;
}

.woocommerce-form-login-toggle .message-container i,
.woocommerce-form-coupon-toggle .message-container i { display: none; }

/* Bağlantı metinden ayrılsın — "buraya tıklayın" tıklanabilir
   görünmüyordu, gri bir cümle parçası gibi duruyordu. */
.woocommerce-form-login-toggle .showlogin,
.woocommerce-form-coupon-toggle .showcoupon {
	color: var(--fyr-gold-deep);
	font-weight: 500;
	border-bottom: 1px solid currentColor;
}
.woocommerce-form-login-toggle .showlogin:hover,
.woocommerce-form-coupon-toggle .showcoupon:hover { color: var(--fyr-ink); }

.woocommerce-form-login,
.woocommerce-form-coupon {
	border: 1px solid var(--fyr-line);
	background: var(--fyr-stone);
	border-radius: 0;
	padding: clamp(1rem, 2.4vw, 1.5rem);
	margin-top: 1rem;
}

/* ==========================================================================
   19) BİLDİRİM — dar ekran
   "Sepetim" butonu `margin-left:auto` ile sağa itiliyordu; dar ekranda
   metnin yanına sıkışıp okunmaz hale geliyordu.
   ========================================================================== */

@media (max-width: 660px) {
	/* FLEX DEĞİL BLOCK: mesaj metni bir elemanın içinde değil, `<i>` ile
	   `<a>` arasında ÇIPLAK metin düğümü. Flex düzeninde bu metin
	   isimsiz bir öğe oluyor ve dar ekranda tek başına alt satıra
	   sarıyordu — onay işareti yukarıda yalnız kalıyordu.
	   Block akışında ikon ve metin doğal olarak yan yana kalıyor,
	   buton altına iniyor. */
	.woocommerce-message .message-container,
	.woocommerce-info .message-container {
		display: block;
		text-align: left;
	}

	.woocommerce-message .message-container i,
	.woocommerce-info .message-container i {
		display: inline;
		margin-right: .4rem;
	}

	.woocommerce-message .button,
	.woocommerce-info .button {
		display: block !important;
		width: 100%;
		margin: .875rem 0 0;
		text-align: center;
	}
}


/* ==========================================================================
   20) SLIDER GÜVENLİĞİ
   Flatsome ürün karusellerini flickity ile kuruyor ve bunu SAYFA
   YÜKLENDİKTEN SONRA yapıyor (görseller yüklenene kadar bekliyor:
   `imagesLoaded: true`). O ana kadar `.row.slider` sıradan bir flex
   satırı: 8 hücre, sütun sınıfı %50 diyor, yani satır iki katına
   taşıyor ve kartlar üst üste biniyor.

   Ölçüldü (390px): 8 hücre × 171px = 1368px, kapsayıcı 342px.

   Görsellerden biri 404 verirse (yerelde 22 dosya eksik) bekleme
   uzuyor ve kırık görüntü ekranda kalıcı hale geliyor.

   Çözüm sunucu tarafında değil, savunmada: flickity DEVREYE GİRENE
   KADAR taşan hücreleri gizliyoruz. Karusel hazır olduğunda kural
   kendiliğinden düşüyor (`.flickity-enabled` geldiğinde eşleşme
   bozuluyor).
   ========================================================================== */

.row.slider:not(.flickity-enabled) {
	overflow: hidden;
	flex-wrap: nowrap;
}

/* Hazır olmayan karuselde okları da gizle — tıklanacak bir şey yok. */
.row.slider:not(.flickity-enabled) > .flickity-button { display: none; }