/* ==========================================================================
   FYR Luxury — tasarım sistemi
   Sürümleme filemtime() ile otomatik. Kaydet, yenile, gör.

   YÖN
   "fyr" Norveççe deniz feneri / ateş demek; marka hikâyesi de bu.
   Tasarım bunu tek bir kurala indiriyor: sayfa soğuk ve disiplinli
   (taş, mürekkep, kâğıf), tek sıcak renk ise SATIN ALMA YOLUNDA olan
   şeylere ayrılmış. Böylece hem marka anlatısı hem dönüşüm aynı
   kararla besleniyor — ve sıcak renk, ürün fotoğraflarındaki
   terrakota/adaçayı seramiklerle yarışmıyor.

   Flatsome'ın kutudan çıkan soluk mavisi (#446084) bilinçli olarak
   terk edildi: hiçbir markaya ait olmayan bir renk.

   DÜZEN
   1) Tokenlar   2) Tipografi   3) Butonlar   4) Formlar
   5) Ürün kartı 6) CRO bileşenleri          7) Mobil
   ========================================================================== */

:root {
	/* — Renk ————————————————————————————————— */
	--fyr-ink:        #16150F;  /* sıcağa kaçan siyah — metin, birincil buton */
	--fyr-ink-2:      #57544B;  /* ikincil metin */
	--fyr-ink-3:      #8C887D;  /* üçüncül, etiket */
	--fyr-paper:      #FFFFFF;
	--fyr-stone:      #F4F2ED;  /* yüzey */
	--fyr-stone-2:    #EAE7DF;  /* yüzey, bir ton koyu */
	--fyr-line:       #DDD9D0;  /* saç teli çizgi */

	/* Alev: yalnızca ilerleme, aciliyet ve bölüm çizgisi için.
	   Başka hiçbir yerde kullanılmıyor — kısıt bilinçli. */
	--fyr-ember:      #C2620F;
	--fyr-ember-hot:  #E8A33D;

	/* Durum */
	--fyr-ok:         #2F6B4F;
	--fyr-warn:       #9A5B12;
	--fyr-err:        #8C2F22;

	/* — Ölçü ————————————————————————————————— */
	--fyr-r:          2px;      /* köşe: neredeyse keskin, mimari */
	--fyr-r-lg:       4px;
	--fyr-gap:        clamp(1rem, 2.2vw, 1.75rem);
	--fyr-shadow:     0 1px 2px rgba(22, 21, 15, .04), 0 8px 24px -12px rgba(22, 21, 15, .18);
	--fyr-ring:       0 0 0 2px var(--fyr-paper), 0 0 0 4px var(--fyr-ink);

	/* — Hareket —————————————————————————————— */
	--fyr-ease:       cubic-bezier(.2, .7, .3, 1);
	--fyr-fast:       .18s;
	--fyr-slow:       .38s;
}

@media (prefers-reduced-motion: reduce) {
	:root { --fyr-fast: .01ms; --fyr-slow: .01ms; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   1) TİPOGRAFİ
   Yeni font YÜKLEMİYORUZ — her ek font isteği LCP'yi geciktirir ve
   sitede zaten üç aile var. Bunun yerine mevcut Montserrat'ı doğru
   ayarlıyoruz: geometrik sanslar büyük puntoda fazla açık durur,
   negatif harf aralığı gerekir.
   ========================================================================== */

body { color: var(--fyr-ink); font-synthesis-weight: none; }

h1, h2, h3, h4,
.entry-title,
.product-title,
.section-title {
	color: var(--fyr-ink);
	letter-spacing: -.018em;
	text-wrap: balance;
}

h1, .entry-title { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.9rem); line-height: 1.12; }
h2               { font-size: clamp(1.4rem,  1.05rem + 1.4vw, 2.1rem); line-height: 1.18; }
h3               { font-size: clamp(1.15rem, .98rem + .7vw,  1.5rem);  line-height: 1.25; }

p, li { line-height: 1.65; }

.product-page-container p,
.woocommerce-product-details__short-description p { max-width: 62ch; }

/* Eyebrow / üst etiket — kategori adı, bölüm etiketi */
.product-small .category,
.woocommerce-breadcrumb,
.fyr-eyebrow {
	font-size: .688rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fyr-ink-3);
	font-weight: 600;
}

/* — İMZA: alev çizgisi ————————————————————————
   Bölüm başlıklarının altındaki çizgi. Deniz feneri huzmesi gibi
   sıcaktan sönüğe geçer. Sayfadaki tek dekoratif öğe — tek olduğu
   için akılda kalıyor. */
.section-title b,
.section-title-normal span::after {
	background: linear-gradient(90deg, var(--fyr-ember-hot), var(--fyr-ember) 38%, transparent) !important;
	height: 2px !important;
	opacity: 1 !important;
}

.section-title-normal span {
	border-bottom: 0;
	position: relative;
	padding-bottom: .5rem;
}
.section-title-normal span::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
}

/* ==========================================================================
   2) BUTONLAR
   Birincil = mürekkep siyahı. Kontrast oranı beyaz üstünde 16:1 —
   hem WCAG AAA hem ürün fotoğraflarıyla uyumlu. Soluk mavi CTA,
   ölçülebilir biçimde daha az tıklanır.
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.single_add_to_cart_button {
	border-radius: var(--fyr-r);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8125rem;
	transition: background var(--fyr-fast) var(--fyr-ease),
	            color var(--fyr-fast) var(--fyr-ease),
	            transform var(--fyr-fast) var(--fyr-ease),
	            box-shadow var(--fyr-fast) var(--fyr-ease);
}

/* Birincil
   ÖZGÜLLÜK NOTU: Flatsome birincil renk kuralını Customizer üzerinden
   satır içi <style> olarak basıyor ve o blok bizim stylesheet'ten SONRA
   geliyor. Aynı özgüllükte yazınca kaybediyoruz — ölçüldü, ödeme butonu
   #2170D8 kalıyordu. Bir sınıf daha ekleyerek yükseltiyoruz; böylece
   !important'a gerek kalmıyor. */
:is(.button, button, a).primary,
.single_add_to_cart_button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
input[type="submit"].button,
.woocommerce .checkout-button.button,
a.checkout-button.button {
	/* Arka plan rengi PALETTEN gelir (color_primary / color_checkout).
	   Burada yalnızca biçim, gölge ve hareket var. */
	box-shadow: none;
}

:is(.button, button, a).primary:hover,
.single_add_to_cart_button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button.button:hover,
a.checkout-button.button:hover {
	background-color: #2B291F;
	border-color: #2B291F;
	color: var(--fyr-paper);
	transform: translateY(-1px);
	box-shadow: var(--fyr-shadow);
}

.button.primary:active,
.single_add_to_cart_button:active { transform: translateY(0); }

/* İkincil — "Hemen satın al" gibi ikinci eylemler.
   Çerçeveli: birincil ile yarışmaz ama kaybolmaz da. */
.button.secondary,
.button.is-outline,
.wc-forward:not(.checkout-button) {
	background: transparent;
	border: 1px solid var(--fyr-ink);
	color: var(--fyr-ink);
}
.button.secondary:hover,
.button.is-outline:hover {
	background: var(--fyr-ink);
	color: var(--fyr-paper);
}

/* Devre dışı buton — varyasyon seçilmeden "Sepete ekle" tıklanamaz.
   Flatsome opaklığı düşürüyor ama imleci pointer bırakıyor: buton
   tıklanabilir görünüp tepki vermiyor, bu "site bozuk" hissi veriyor.
   Ayrıca ziyaretçiye NE yapması gerektiği söylenmiyordu. */
.single_add_to_cart_button.disabled,
.button.disabled,
button:disabled {
	cursor: not-allowed;
	opacity: .45;
}

/* Seçim bekleniyor uyarısı — JS yok, WooCommerce'in kendi sınıfını
   kullanıyoruz. */
.woocommerce-variation-add-to-cart-disabled::before {
	content: "Devam etmek için bir seçenek belirleyin";
	display: block;
	margin-bottom: .625rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--fyr-ember);
}

/* Klavye odağı — Flatsome bunu neredeyse görünmez bırakıyor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: none;
	box-shadow: var(--fyr-ring);
	border-radius: var(--fyr-r);
}

/* ==========================================================================
   3) FORMLAR
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
select, textarea {
	border: 1px solid var(--fyr-line);
	border-radius: var(--fyr-r);
	background: var(--fyr-paper);
	color: var(--fyr-ink);
	box-shadow: none;
	transition: border-color var(--fyr-fast) var(--fyr-ease);
	min-height: 44px; /* dokunma hedefi */
}

input:focus, select:focus, textarea:focus { border-color: var(--fyr-ink); }
::placeholder { color: var(--fyr-ink-3); opacity: 1; }

/* ==========================================================================
   4) ÜRÜN KARTI
   ========================================================================== */

.product-small .box-image {
	background: var(--fyr-stone);
	border-radius: var(--fyr-r);
	overflow: hidden;
}
.product-small .box-image img {
	transition: transform var(--fyr-slow) var(--fyr-ease);
}
.product-small:hover .box-image img { transform: scale(1.035); }

.product-small .name a,
.product-small .product-title a {
	color: var(--fyr-ink);
	font-weight: 500;
	letter-spacing: -.005em;
}

.product-small .price,
.woocommerce-Price-amount { color: var(--fyr-ink); font-weight: 600; }
.product-small del .woocommerce-Price-amount { color: var(--fyr-ink-3); font-weight: 400; }

/* İndirim rozeti — rengi PALETTEN gelir (inc/15-palette.php →
   color_secondary = alev). Burada yalnızca biçim veriyoruz; rengi
   burada da yazsaydık iki kaynak olurdu ve biri sessizce kazanırdı.
   Alev seçimi tezle tutarlı: sıcak renk satın alma yolundaki
   öğelere ayrılmış, indirim de oraya ait. */
.badge-container .badge.callout .badge-inner,
.badge.onsale .badge-inner {
	border-radius: var(--fyr-r);
	font-weight: 600;
	letter-spacing: .04em;
}

/* "Yeni" rozeti — çerçeveli, daha sessiz */
.badge-container .badge.new .badge-inner {
	background: var(--fyr-paper);
	color: var(--fyr-ink);
	border: 1px solid var(--fyr-ink);
}

/* Kategori ızgarası: 1440px'de 3 kolon çok seyrekti, 4'e çıkarıyoruz */
@media (min-width: 1200px) {
	.products.row.large-columns-3 > .product-small { flex-basis: 25%; max-width: 25%; }
}

/* ==========================================================================
   5) CRO BİLEŞENLERİ
   ========================================================================== */

/* — Güven şeridi ——————————————————————————— */
.fyr-trust-bar {
	background: var(--fyr-stone);
	border-bottom: 1px solid var(--fyr-line);
	font-size: .8125rem;
}
.fyr-trust-bar__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: .625rem 1rem;
	display: flex;
	gap: clamp(1rem, 4vw, 3rem);
	justify-content: center;
	flex-wrap: wrap;
}
.fyr-trust-bar__item {
	color: var(--fyr-ink-2);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
}
.fyr-trust-bar__item::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--fyr-ember);
	flex: none;
}

/* — Ürün sayfası bilgi listesi ——————————————— */
.fyr-pdp-facts {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: .875rem 0;
	border-top: 1px solid var(--fyr-line);
	border-bottom: 1px solid var(--fyr-line);
	display: grid;
	gap: .4rem;
	font-size: .875rem;
}
.fyr-pdp-facts__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--fyr-ink-2);
	margin: 0;
}
.fyr-pdp-facts__item::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	flex: none;
	background: currentColor;
}
.fyr-pdp-facts__item.is-ok     { color: var(--fyr-ok); }
.fyr-pdp-facts__item.is-urgent { color: var(--fyr-ember); font-weight: 600; }
.fyr-pdp-facts__item.is-wait   { color: var(--fyr-warn); }
.fyr-pdp-facts__item.is-out    { color: var(--fyr-err); }
.fyr-pdp-facts__item.is-info::before { background: var(--fyr-line); }

/* — Sepete ekle altı güvence ————————————————— */
.fyr-pdp-assurance {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: .875rem 0 0;
	font-size: .75rem;
	color: var(--fyr-ink-3);
}
.fyr-pdp-assurance span { display: inline-flex; align-items: center; gap: .375rem; }
.fyr-pdp-assurance span::before { content: "✓"; color: var(--fyr-ok); font-weight: 700; }

/* — Ücretsiz kargo ilerlemesi ————————————————
   Bileşen Flatsome'ın (.ux-free-shipping); biz kendi sürümümüzü
   EKLEMİYORUZ — iki çubuk çıkıyordu. Yalnızca tasarım sistemine
   bağlıyoruz. Alev çizgisinin ikinci ve son kullanımı: çubuk
   doldukça "ısınıyorsun". */
.ux-free-shipping {
	background: var(--fyr-stone);
	border-radius: var(--fyr-r-lg);
	padding: .875rem 1rem;
	margin-bottom: 1.5rem;
}
.ux-free-shipping__notice {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--fyr-ink);
	margin-bottom: .5rem;
}
.ux-free-shipping__bar {
	height: 4px;
	background: var(--fyr-stone-2);
	border-radius: 999px;
	overflow: hidden;
}
.ux-free-shipping__bar-progress {
	background: linear-gradient(90deg, var(--fyr-ember), var(--fyr-ember-hot)) !important;
	border-radius: 999px;
	transition: width var(--fyr-slow) var(--fyr-ease);
}
/* Şeritli animasyon kapalı — sakin bir arayüzde titreşen doku
   dikkati bilgiden alıyor. */
.ux-free-shipping__bar--striped .ux-free-shipping__bar-progress {
	background-image: none !important;
	animation: none !important;
}
.ux-free-shipping__notice--success { color: var(--fyr-ok); }
.ux-free-shipping__notice--success + .ux-free-shipping__bar .ux-free-shipping__bar-progress {
	background: var(--fyr-ok) !important;
}

/* — Ürün sayacı ———————————————————————————— */
.fyr-result-count {
	margin: 0 0 1rem;
	font-size: .8125rem;
	color: var(--fyr-ink-3);
	letter-spacing: .02em;
}

/* — Mobil yapışkan sepete ekle ————————————————— */
.fyr-sticky-atc {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom));
	background: var(--fyr-paper);
	border-top: 1px solid var(--fyr-line);
	box-shadow: 0 -6px 24px -12px rgba(22, 21, 15, .25);
	transform: translateY(0);
	transition: transform var(--fyr-fast) var(--fyr-ease);
}
.fyr-sticky-atc[hidden] { display: none; }
.fyr-sticky-atc__info { display: grid; gap: .125rem; min-width: 0; flex: 1; }
.fyr-sticky-atc__name {
	font-size: .75rem;
	color: var(--fyr-ink-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fyr-sticky-atc__price { font-weight: 700; color: var(--fyr-ink); }
.fyr-sticky-atc__price del { display: none; } /* dar alanda tek fiyat */
.fyr-sticky-atc__btn {
	flex: none;
	background: var(--fyr-ink);
	color: var(--fyr-paper);
	border: 0;
	border-radius: var(--fyr-r);
	padding: .875rem 1.5rem;
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	min-height: 48px;
}

/* Masaüstünde gerek yok — buton zaten ilk ekranda */
@media (min-width: 850px) {
	.fyr-sticky-atc { display: none !important; }
}

/* ==========================================================================
   6) HERO OKUNABİLİRLİĞİ
   Ana sayfadaki kapak görselinde beyaz metin açık zemine düşüyordu ve
   başlık okunmuyordu. Görseli değiştirmeden, metnin arkasına alttan
   yukarı sönen bir perde koyuyoruz.
   ========================================================================== */

.banner .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 21, 15, .10) 0%, rgba(22, 21, 15, .48) 100%);
	pointer-events: none;
}
.banner .banner-layers { position: relative; z-index: 1; }

.banner h1, .banner h2, .banner h3,
.banner .text-box p {
	text-shadow: 0 1px 24px rgba(22, 21, 15, .45);
}

/* ==========================================================================
   7) MOBİL
   ========================================================================== */

@media only screen and (max-width: 48em) {
	.fyr-trust-bar__inner {
		gap: .875rem;
		padding: .5rem .75rem;
		font-size: .75rem;
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.fyr-trust-bar__inner::-webkit-scrollbar { display: none; }

	/* Yapışkan çubuğun altında kalan içeriğe pay bırak */
	body.single-product { padding-bottom: 76px; }

	.fyr-pdp-facts { font-size: .8125rem; }
}