/*
Theme Name: Meryas Art
Theme URI: https://meryasart.com/
Author: Kotivon
Author URI: https://kotivon.com/
Description: Meryas Art Office için sıfırdan yazılmış, WooCommerce uyumlu blok tema. Kırık beyaz zemin, kömür siyahı ve bronz vurgu üzerine kurulu premium baskı atölyesi düzeni. Elementor bağımlılığı yoktur, sayfa kurucu kullanmaz, renk ve tipografi theme.json üzerinden yönetilir.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 4.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meryas-art
Tags: block-theme, full-site-editing, e-commerce, custom-colors, custom-menu
*/

/*
 * Renk, tipografi ve boşluk kararları theme.json içindedir.
 * Bu dosya blok özniteliğiyle ifade edilemeyen düzen, kart ve kırılma
 * noktası davranışlarını tutar.
 *
 * Yazım sırası mobil öncedir: taban kurallar en dar ekran içindir,
 * genişletmeler min-width sorgularıyla eklenir.
 */

/* ==========================================================================
   0. Taban ve erişilebilirlik
   ========================================================================== */

/*
 * Yatay kaydırma sigortası. 2026-08-02 ölçümünde 360 piksel genişlikte
 * belge 20 piksel taşıyordu (üst alandaki teklif butonu). Taşmanın kökü
 * ayrıca düzeltildi, bu satır ikinci savunma hattıdır.
 *
 * Kök öğede "hidden" değil "clip" kullanılır. "hidden" belgeyi kaydırma
 * kabı haline getirir ve içindeki position:sticky başlığı sessizce bozar;
 * "clip" kaydırma kabı üretmez, yapışkan başlık çalışmaya devam eder.
 */
html,
body {
	overflow-x: clip;
}

/* Uzun ürün kodları ve URL'ler dar ekranda kutudan taşmasın */
h1, h2, h3, h4, p, li, td, th, figcaption {
	overflow-wrap: break-word;
}

/*
 * Display başlıkları serif ve büyük olduğu için tek uzun kelime dar
 * ekranda kutuyu kırabilir. Esnek ve ızgara çocuklarında min-width
 * varsayılanı auto olduğundan sıfırlanır, yoksa taşma kural işlemeden
 * gerçekleşir.
 */
h1,
h2 {
	min-width: 0;
	overflow-wrap: anywhere;
}

img,
video,
iframe {
	max-width: 100%;
}

/* Ekran okuyucu metni: görsel olarak gizli, klavye ile odaklanınca görünür */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--accent);
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 0.9rem;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 12px 22px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
}

/* Klavye odağı her yerde görünür olmalı (WCAG 2.2 - 2.4.11) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 3px;
}

/*
 * Dokunma hedefi alt sınırı (WCAG 2.5.8, hedef 24 piksel; burada 44).
 * Ölçümde ana sayfada 41 bağlantı 28 pikselin altındaydı; bunların çoğu
 * satır içi metin bağlantısıydı, onlara dokunulmaz. Kural yalnızca
 * kendi başına duran eylem öğelerine uygulanır.
 */
.wp-element-button,
.wp-block-button__link,
.meryas-ikon-baglanti,
.meryas-gonder {
	min-height: 44px;
}

/*
 * Çekirdeğin ve WooCommerce'in kendi kontrolleri varsayılan olarak
 * 24-38 piksel geliyor. 360 pikselde ölçüldü: menü açma düğmesi 24x24,
 * mini sepet ve hesap düğmeleri 38x38 idi. Parmakla kullanılan asıl
 * kontroller bunlar olduğu için hepsi 44 piksele çekiliyor.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wc-block-mini-cart__button,
.wc-block-customer-account__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/*
 * Tek başına duran metin eylemleri (4.3.0).
 *
 * "Tümünü gör →", "Kategoriyi gör →" gibi bağlantılar bir cümlenin içinde
 * değil, paragrafın tamamı olarak durur. SC 2.5.8'in satır içi istisnası
 * bunlara işlemez: cümle akışında değiller, bölüm başlığının karşısındaki
 * ikincil eylemler. 1440 ve 390 pikselde ölçüldü, altısı da 17-20 piksel
 * yüksekliğindeydi ve kapıyı kapatıyordu.
 *
 * Yükseklik yazıyı büyüterek değil dolguyla açılır; tipografi basamağı
 * eklemek renk ve boyut bütçesini bozardı.
 */
.meryas-eylem-baglanti a,
.meryas-vitrin-magaza a,
.meryas-vitrin-devam a {
	align-items: center;
	display: inline-flex;
	min-height: 24px;
	padding-block: 0.3rem;
}

/* ==========================================================================
   1. Üst alan: yapışkan başlık
   ========================================================================== */

/*
 * Yapışkanlık position:sticky ile kurulur, JavaScript yoktur.
 * Yükseklik sabittir; kaydırmada boyut değiştirmez, böylece CLS üretmez.
 *
 * 4.1.0: duyuru şeridi bu kabın DIŞINA alındı. Önceden şerit de yapışkandı
 * ve koyu bant kaydırma boyunca ekranın tepesinde duruyordu; masaüstünde
 * kalıcı olarak ~34 piksel görüş alanı yiyordu. Artık şerit normal akışta,
 * sayfa kaydıkça yukarı çıkıp kayboluyor, başlık tek başına yapışıyor.
 * Bu davranış tamamen CSS'tir: kaydırma dinleyicisi, sınıf ekleme ve
 * dolayısıyla azaltılmış hareket için ayrı bir kural gerekmez.
 */
.meryas-baslik-kabi {
	background: var(--wp--preset--color--surface);
	position: sticky;
	top: 0;
	z-index: 900;
}

/*
 * Yapışkanlık 4.3.0'a kadar CANLIDA HİÇ ÇALIŞMIYORDU (4.3.1'de ölçülerek
 * bulundu, hakem bulgusu).
 *
 * `wp:template-part` bloğu üst alanı bir `div.wp-block-template-part`
 * içine sarar. Yapışkan bir öğe atasının sınırlarını aşamaz; bu sarmalayıcı
 * yalnız 186 piksel yüksekliğinde olduğu için başlık 186 piksel kaydıktan
 * sonra ekrandan çıkıyordu. 1440 pikselde ölçüldü: sayfa 3000 piksel
 * kaydırılınca başlığın üst kenarı -2961'de, yani görünmüyor. Sayfa 6900
 * piksel uzunluğunda, dolayısıyla ziyaretçi neredeyse hiçbir zaman
 * yapışkan başlık görmüyordu.
 *
 * Önizlemede görünmedi çünkü orada böyle bir sarmalayıcı yok.
 *
 * `display: contents` sarmalayıcının kutusunu kaldırır; yapışkanlığın
 * kapsayıcı bloğu artık sayfanın kendisi olur. Sarmalayıcının kendi stili
 * yok, kaldırmanın başka etkisi yok.
 */
.wp-block-template-part:has(> .meryas-baslik-kabi) {
	display: contents;
}

/* Yönetim çubuğu varken yapışkan başlık onun altına oturur */
.admin-bar .meryas-baslik-kabi {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .meryas-baslik-kabi {
		top: 46px;
	}
}

/*
 * 4.1.0: başlığın altındaki 10 piksellik gradyan gölge kaldırıldı.
 * Tasarım sisteminin anti-pattern listesi gradyan zemin yıkamalarını
 * yasaklıyor ve sayfanın geri kalanı artık tümüyle 1 piksellik kural
 * diliyle kuruluyor. Başlığın kendi alt kenarlığı ayrımı zaten yapıyor;
 * ikinci bir katman gereksiz ve dille çelişik.
 */

/*
 * Duyuru şeridi: koyu zemin, altın bağlantı.
 *
 * Metin rengi #F3EEE3'ten palet rengine çekildi (4.3.0). Eski değer sıcak
 * bir kırık beyazdı ve renk bütçesinde kendi kromatik basamağını açıyordu;
 * gözle ayırt edilebilir bir katkısı yoktu. Antrasit üstünde 16:1 veriyor.
 */
.meryas-ustbar {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--page);
}

.meryas-ustbar a {
	color: var(--wp--preset--color--accent-strong);
}

/* Şerit dar ekranda yer kaplamamalı; iletişim zaten alt alanda ve
   yüzen WhatsApp butonunda var */
@media (max-width: 781px) {
	.meryas-ustbar {
		display: none;
	}
}

/* Arama, hesap ve sepet ikonları */
.meryas-ikon-baglanti {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	width: 44px;
}

.meryas-ikon-baglanti:hover {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent);
}

.meryas-ikon-baglanti svg {
	height: 20px;
	width: 20px;
}

@media (max-width: 781px) {
	.meryas-gizle-mobil {
		display: none !important;
	}
}

/*
 * Üst alandaki teklif butonu 360 pikselde taşmanın kaynağıydı.
 * Dar ekranda butonun yerini ikon bağlantısı alır.
 *
 * Seçici neden iki sınıflı (4.3.1, canlıda ölçülerek bulundu):
 * `.meryas-baslik-cta` tek başına ÇALIŞMIYORDU. Buton bir `wp:buttons`
 * bloğudur ve WordPress ona `is-layout-flex` sınıfını verip gömülü
 * `<style>` içinde `body .is-layout-flex { display: flex }` basar.
 * Özgüllük (0,1,1); temanın tek sınıflı kuralı (0,1,0) kaybediyordu.
 * Kaynak sırası meselesi değil, `<link>` yerini değiştirmek çözmezdi.
 *
 * Sonucu canlıda ölçüldü, oturum kapalı:
 *   390 px -> buton 123x80, üst alan 130 px
 *   600 px -> buton  67x303, üst alan 352 px   (metin dikey yığılıyordu)
 * Ana kapsayıcıyı seçiciye eklemek özgüllüğü (0,2,0) yapıyor ve
 * `!important` gerekmiyor.
 */
.meryas-baslik-eylemler .meryas-baslik-cta {
	display: none;
}

@media (min-width: 1080px) {
	.meryas-baslik-eylemler .meryas-baslik-cta {
		display: inline-flex;
	}

	.meryas-baslik-eylemler .meryas-baslik-cta-ikon {
		display: none;
	}
}

/* Menü, logo ve eylemler tek satıra sığmazsa alt satıra sarsın, taşmasın */
.meryas-baslik-satiri {
	gap: 0.75rem;
	row-gap: 0.5rem;
}

.meryas-baslik-satiri > * {
	min-width: 0;
}

.meryas-baslik-eylemler {
	gap: 0.5rem;
}

/*
 * Gezinme satırı (4.1.0). Önceki düzende bağlantılar marka adıyla eylem
 * düğmeleri arasına, ortaya sıkışmıştı: marka solda, birkaç satır içi
 * bağlantı ortada, buton sağda. Bu, üst alanın en tanınır şablon biçimidir
 * ve dar ekranda üç öbeğin de aynı satırda yarışmasına yol açıyordu.
 *
 * Bağlantılar kendi satırına, ince kuralın altına alındı ve sola
 * hizalandı. Marka satırı nefes aldı, bağlantılar okunur bir sırada
 * dizildi. Mobilde bu satır çekirdeğin örtü menüsüne (hamburger) düşer.
 */
.meryas-gezinme-satiri {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: var(--wp--preset--spacing--20);
	padding-top: 0.35rem;
}

.meryas-gezinme-satiri .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

/*
 * Mobilde gezinme satırı yalnız çekirdeğin örtü menüsü düğmesini taşır.
 * Tek bir hamburger için ayrı bir satır açmak 44 pikseli boşa harcar ve
 * düğme marka adının altında öksüz görünür. Bu genişlikte başlık esnek
 * kutuya çevrilir, iki satır tek satırda akar: marka solda, eylem
 * ikonları ve hamburger sağda.
 *
 * Kapsayıcı düzenin verdiği otomatik yan boşluklar sıfırlanmalıdır;
 * esnek kutu içinde otomatik kenar boşluğu artan alanı paylaştırır ve
 * öbekleri birbirinden koparır.
 *
 * Yan dolgu tek katmanda kalmalıdır (4.3.0). Marka satırı hem başlığın
 * hem kendi kabının dolgusunu taşıdığında 390 pikselde içeriğe 242 piksel
 * kalıyor, marka (151) ile eylemler (96) toplamı 247 ediyor ve satır beş
 * piksel yüzünden ikiye kırılıyordu. Dolgu artık yalnız başlıkta.
 */
@media (max-width: 781px) {
	.meryas-baslik {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		padding-inline: var(--wp--preset--spacing--40);
	}

	.meryas-baslik > .meryas-baslik-satiri,
	.meryas-baslik > .meryas-gezinme-satiri {
		margin-inline: 0;
		max-width: none;
		padding-inline: 0;
	}

	.meryas-baslik > .meryas-baslik-satiri {
		flex: 1 1 auto;
		min-width: 0;
	}

	.meryas-gezinme-satiri {
		border-top: 0;
		flex: 0 0 auto;
		margin-top: 0;
		padding-top: 0;
	}

	/*
	 * Marka adı dar ekranda 1,65rem'de kalırsa satırın yarısını yiyor ve
	 * eylem ikonlarını sıkıştırıyor. 320 pikselde ölçüldü: 1,35rem ile
	 * marka 124 piksel, eylemler 96 piksel, hamburger 44 piksel; toplam
	 * 264 piksel ve 272 pikselik içerik alanına sığıyor.
	 */
	.meryas-baslik .wp-block-site-title,
	.meryas-baslik .meryas-marka {
		font-size: 1.35rem;
	}
}

/*
 * 320 pikselde 272 piksellik içerik alanına marka (124) + eylemler (96) +
 * hamburger (44) ve iki boşluk sığmıyordu, toplam 284 idi. Dokunma hedefi
 * 44 pikselde bırakılıp marka ve boşluklar daraltıldı: 110 + 8 + 96 + 6 +
 * 44 = 264. İkonu küçültmek yerine yazıyı küçültmek tercih edildi; parmak
 * hedefi pazarlık konusu değil.
 */
@media (max-width: 359px) {
	.meryas-baslik {
		gap: 0.35rem;
	}

	.meryas-baslik .wp-block-site-title,
	.meryas-baslik .meryas-marka {
		font-size: 1.2rem;
	}

	.meryas-baslik-eylemler {
		gap: 0.35rem;
	}
}

/*
 * Hareket dili (4.3.0).
 *
 * Önceden her geçiş kendi değerini yazıyordu: iki farklı süre (0,2s ve
 * 0,4s) ve `ease` anahtar kelimesi. `ease` tarayıcı varsayılanıdır ve
 * hiçbir şey söylemez; ölçüm aracı da onu açıkça seçilmiş bir eğri
 * saymıyor (S4 easing = 0, hedef 1).
 *
 * Tek eğri ve iki süre kaldı. Eğri sonda yavaşlar, başta hızlı çıkar:
 * kenarlık ve gölge gibi durum değişimleri anında başlamış görünür ama
 * sıçramaz. Kısa süre durum geri bildirimi (kenarlık, zemin), uzun süre
 * ölçek değişimi içindir; ikisini ayırmak, büyüyen fotoğrafın kenarlıkla
 * aynı anda bitmemesini sağlar.
 */
:root {
	--meryas-egri: cubic-bezier(0.2, 0.6, 0.2, 1);
	--meryas-sure-kisa: 160ms;
	--meryas-sure-uzun: 320ms;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

/*
 * Hero (4.3.0'da sadeleşti).
 *
 * Önceki sürümde bölüm bir pres tabakası olarak kuruluyordu: dört köşede
 * nişan işareti, alt kenarda on şeritli renk kontrol barı, bunları besleyen
 * yedi mürekkep değişkeni. Üçü de kaldırıldı. Gerekçe `docs/tasarim-hukum.md`
 * 2026-08-03 kaydında zaten yazılıydı ve tema onu uygulamamıştı:
 * "Baskı forması ruhu bir daha ana sayfa imzası olarak denenmeyecek."
 *
 * Ölçüm de aynı yöne bakıyordu: yalnız o bar sayfaya 7 doymuş renk
 * katıyordu, kromatik renk sayısı 12 iken doktrin eşiği 2.
 *
 * Yerini tek bir altın saç teli aldı. Aynı iki işi görüyor: hero ile
 * altındaki şerit arasındaki ayracı yapıyor ve kesim hassasiyetini
 * anlatıyor. Fark şu ki artık bunu tasvirle değil kendi inceliğiyle
 * yapıyor.
 */
.meryas-hero {
	border-bottom: 1px solid rgb(214 179 106 / 45%);
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
	position: relative;
}

.meryas-hero-ic {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	margin: 0 auto;
	max-width: 1320px;
	padding-inline: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.meryas-hero-ic {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	}
}


/* Üstlük: sayfadaki tek bölüm etiketi */
.meryas-hero-ustluk {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 1.1rem;
	text-transform: uppercase;
}

/* Üstlüğün önündeki kısa altın çizgi: logodaki çerçeve dilini sürdürür */
.meryas-hero-ustluk::before {
	background: var(--wp--preset--color--accent);
	content: "";
	display: inline-block;
	height: 1px;
	margin-right: 0.75rem;
	vertical-align: middle;
	width: 2.25rem;
}

/*
 * Hero başlığı display ailesindedir. Serif 400 ağırlıkta olduğu için eski
 * 700 ağırlıklı sans başlıkla aynı optik kütleye ulaşması adına büyütüldü.
 * Eğik yazı kullanılmaz: eğik başlık en güvenilir yapay zeka işaretlerinden
 * biridir, vurgu renkle taşınır.
 */
.meryas-hero-baslik {
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: clamp(2.6rem, 6.4vw, 5rem);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.98;
	margin: 0 0 1.15rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.meryas-hero-baslik .meryas-vurgu {
	color: var(--wp--preset--color--accent);
	display: block;
}

.meryas-hero-metin {
	max-width: 34rem;
}

.meryas-hero-metin-govde {
	color: #D6D3D1;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 1.75rem;
}

.meryas-hero-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.meryas-hero-butonlar .wp-element-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

/* İkincil buton: koyu zeminde altın çerçeve */
.meryas-buton-ikincil {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-strong);
}

.meryas-buton-ikincil:hover,
.meryas-buton-ikincil:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/*
 * Prova levhası. Katalog fotoğraflarının çoğu beyaz fonda çekilmiş; açık
 * renkli ürün koyu zeminde doğrudan durursa kutu boş görünüyor. Düz tül
 * zemin ürünü ayırır, altın çerçeve levhayı bir nesne yapar. Gradyan ve
 * dış gölge kullanılmaz, ikisi de tasarım sisteminin yasak listesinde.
 */
.meryas-hero-gorsel {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--tint);
	border: 1px solid rgb(214 179 106 / 55%);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.meryas-hero-gorsel img {
	display: block;
	height: 100%;
	object-fit: contain;
	padding: 0.75rem;
	width: 100%;
}

/* ==========================================================================
   3. Kart ve rozet dili
   ========================================================================== */

/*
 * Köşe yarıçapı bilinçli olarak küçük tutulur. Baskı işi hassasiyet
 * satar; yuvarlak köşe yumuşaklık anlatır, keskin köşe kesim hassasiyeti.
 */
.meryas-kart {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	transition: border-color var(--meryas-sure-kisa) var(--meryas-egri),
		box-shadow var(--meryas-sure-kisa) var(--meryas-egri);
}

.meryas-kart:hover,
.meryas-kart:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 2px 14px rgb(12 10 9 / 6%);
}

@media (prefers-reduced-motion: reduce) {
	.meryas-kart,
	.wc-block-product-template > li {
		transition: none;
	}
}

/* Üstü etiket: altın tülü zeminde köşeli hap */
.meryas-hap {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--accent-deep);
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.45rem 1.1rem;
	text-transform: uppercase;
}

/* İkon rozeti */
.meryas-rozet {
	align-items: center;
	background: var(--wp--preset--color--tint);
	border: 1px solid rgb(214 179 106 / 35%);
	border-radius: 4px;
	color: var(--wp--preset--color--accent-deep);
	display: inline-flex;
	flex: 0 0 auto;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.meryas-ikon {
	height: 25px;
	width: 25px;
}

.meryas-kart:hover .meryas-rozet,
.meryas-kart:focus-within .meryas-rozet {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.meryas-vurgu {
	color: var(--wp--preset--color--accent-deep);
}

/*
 * Bölüm başlığı.
 *
 * Önceki sürüm başlığın soluna 3 piksellik dikey altın şerit koyuyordu.
 * `impeccable detect` bunu "side-tab" olarak işaretliyor: kartın bir
 * kenarına konan kalın renkli şerit, yapay zeka üretimi arayüzlerin en
 * tanınır işareti. Şerit her bölüm başlığında tekrarladığı için tek
 * bulgu değil, sayfanın tamamına yayılmış bir sesti.
 *
 * Yerine bölüm genişliğince ince yatay kural geldi. Kural matbaa
 * dizgisinden gelir, kartın değil sayfanın diline aittir ve tekrar
 * ettiğinde şablon değil ritim üretir. Vurgu rengi buradan çekildi;
 * altın artık yalnız bağlantı, buton ve etiketde görünür.
 */
.meryas-bolum-basligi {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

/*
 * Koyu bant. Zemin 4.1.0'a kadar desenin satır içi style özniteliğindeydi;
 * sınıf yalnız kural rengini taşıyordu. Bu, zemini işaretlemeye bağlı hale
 * getiriyordu: sınıfı taşıyan ama satır içi stili olmayan bir bölüm beyaz
 * zeminde beyaz metin basıyordu. Zemin, metin ve iç boşluk artık sınıfın
 * kendisinde; işaretleme yalnız sınıfı yazar.
 */
.meryas-koyu-bant {
	background: var(--wp--preset--color--base);
	color: #F5F4F2;
}

/*
 * Bant dolgusu ayrı sınıftadır. Hero da koyu banttır ama kendi dikey
 * ölçüsünü taşır; dolgu `.meryas-koyu-bant` içinde olsaydı hero'da iki
 * kez uygulanırdı.
 */
.meryas-bant-dolgusu {
	padding-block: var(--wp--preset--spacing--60);
}

.meryas-koyu-bant .meryas-bolum-basligi {
	border-top-color: rgb(255 255 255 / 22%);
}

.meryas-koyu-bant h2 {
	color: #FFFFFF;
}

/* Koyu zeminde spot metin. Ölçüldü: #C7C2BB üzerinde #1C1917 ile 10,1:1. */
.meryas-koyu-bant .meryas-bolum-basligi p {
	color: #C7C2BB;
	margin: 0.6rem 0 0;
	max-width: 46rem;
}

.meryas-devam {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 600;
}

.meryas-kart:hover .meryas-devam {
	text-decoration: underline;
}

/*
 * Sayı şeridi. Önceki sürüm burada Jost fontunu çağırıyordu ama Jost
 * temaya hiç yüklenmemişti; tarayıcı sessizce Segoe UI'ye düşüyordu.
 * Artık tema iki aile taşır ve sayılar display ailesindedir: rakam da
 * başlık gibi okunur, gövde metninden ayrışır.
 */
.meryas-sayi {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* ==========================================================================
   4. Sütun düzenlerinin kırılma noktaları
   ========================================================================== */

/*
 * WordPress'in wp-block-columns bloğu yalnızca 782 pikselin altında tek
 * sütuna düşer. 782-1024 arasında dört sütun yan yana kalır ve tablette
 * okunamayacak kadar sıkışır. Ölçüm bunu doğruladı: 1024 pikselde güven
 * şeridi dört sütundu ve her sütuna 52 piksellik rozet dahil 230 piksel
 * düşüyordu. Kendi desenlerimizdeki eşit sütunlar aşağıdaki sınıflarla
 * ara kırılma noktası kazanır.
 */

/* Dörtlü şerit: mobil 1, tablet 2, masaüstü 4 */
/*
 * Güven şeridi. Kart kutusu yerine üst ve alt kural; dört madde arasında
 * dikey ayraç yalnız yan yana dizildiklerinde çizilir, alt alta indiklerinde
 * yatay kurala döner. Böylece ayraç her genişlikte doğru yönü gösterir.
 */
.meryas-guven-seridi {
	border-block: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--40);
}

/* Taban: tek sütun. Her madde bir öncekinden yatay kuralla ayrılır. */
.meryas-guven-seridi .wp-block-column + .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

/*
 * 782-1023 arası iki sütundur. Satır başına düşen ikinci maddeye dikey
 * ayraç gelir; birinci satırdaki ikinci maddenin yatay kuralı kaldırılır,
 * yoksa şeridin tepesinde ikinci bir çizgi belirir.
 */
@media (min-width: 782px) and (max-width: 1023px) {
	.meryas-guven-seridi .wp-block-column:nth-child(2n) {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: var(--wp--preset--spacing--40);
	}

	.meryas-guven-seridi .wp-block-column:nth-child(2) {
		border-top: 0;
		padding-top: 0;
	}
}

/* 1024 ve üstünde dördü tek satırda; ayraç tümüyle dikeydir. */
@media (min-width: 1024px) {
	.meryas-guven-seridi .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		border-top: 0;
		padding-left: var(--wp--preset--spacing--40);
		padding-top: 0;
	}
}

.meryas-dortlu.wp-block-columns:not(.is-not-stacked-on-mobile) {
	flex-wrap: wrap;
}

@media (min-width: 782px) and (max-width: 1023px) {
	.meryas-dortlu.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 1.5rem) / 2) !important;
		flex-grow: 0;
	}
}

/*
 * Sabit yüzdeli iki sütunlu düzenler (ürün detayı 55/45, mağaza filtresi
 * 24/76, iletişim 42/58) 1024 pikselin altında üst üste gelir. Yüzdeyi
 * korumak dar ekranda galeriyi ve filtreyi kullanılamaz hale getiriyor.
 */
@media (max-width: 1023px) {
	.meryas-esnek-ikili.wp-block-columns {
		flex-wrap: wrap;
	}

	.meryas-esnek-ikili.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   5. Ürün ızgarası
   ========================================================================== */

/*
 * BURASI KRİTİKTİR.
 *
 * Ölçüm (2026-08-02, canlı site): wp-block-woocommerce-product-collection
 * sarmalayıcısı is-layout-grid sınıfını alıyor, içindeki ürün listesi
 * (ul.wc-block-product-template) is-layout-flow kalıyordu. Sonuç: dört
 * sütunluk ızgaranın ilk gözüne sekiz ürün alt alta diziliyordu ve
 * 1920 piksel genişlikte bile ürünler 318 piksellik tek sütundu.
 *
 * Çözüm blok özniteliğine bırakılmıyor: ızgara doğrudan ürün listesine
 * yazılıyor, sarmalayıcının ızgarası etkisizleştiriliyor. Böylece
 * WooCommerce işaretlemesi değişse de düzen bozulmaz.
 */
.wp-block-woocommerce-product-collection.is-layout-grid,
.wp-block-woocommerce-product-collection.wp-block-woocommerce-product-collection-is-layout-grid {
	display: block;
}

.wc-block-product-template,
.wp-block-woocommerce-product-template {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * 360 pikselin altında tek sütun (4.2.0). Ölçüm: 305 piksellik görüntü
 * alanında iki sütun kartı 120,5 piksele düşürüyor; buton dolgusu 4 piksele
 * indirilse ve yazı 12 piksele küçültülse bile "Seçenekleri seç" (katalogdaki
 * 286 varyasyonlu ürünün buton yazısı) 91 piksel ister ve satıra kırılır.
 * Sığdırmak için okunurluğu ve dokunma hedefini feda etmek yerine sütun
 * sayısı düşürülüyor. 360 ve üstünde iki sütun korunur; bugünkü telefonların
 * neredeyse tamamı 360 veya daha geniştir.
 */
@media (max-width: 359px) {
	.wc-block-product-template,
	.wp-block-woocommerce-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 600px) {
	.wc-block-product-template,
	.wp-block-woocommerce-product-template {
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.wc-block-product-template,
	.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.wc-block-product-template,
	.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Mağaza arşivinde filtre sütunu yanında üç kolon yeter */
.meryas-magaza-listesi .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1200px) {
	.meryas-magaza-listesi .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Ürün kartı */
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	padding: 0 0 1rem;
	transition: border-color var(--meryas-sure-kisa) var(--meryas-egri),
		box-shadow var(--meryas-sure-kisa) var(--meryas-egri);
}

.wc-block-product-template > li:hover,
.wp-block-woocommerce-product-template > li:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 2px 14px rgb(12 10 9 / 6%);
}

/*
 * Görsel alanı. Katalog fotoğrafları kare (480x480) çekilmiş; deseni
 * 4/3'e zorlamak ürünün üstünü ve altını kırpıyordu. Oran kareye
 * çekildi ve görsel kırpılmak yerine kutuya sığdırılıyor.
 */
.wc-block-components-product-image {
	background: var(--wp--preset--color--tint);
	border-bottom: 1px solid rgb(214 179 106 / 30%);
	display: block;
	margin: 0 0 0.9rem;
}

.wc-block-components-product-image a,
.wc-block-components-product-image img {
	display: block;
	width: 100%;
}

.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	object-fit: contain;
	padding: 0.5rem;
}

/* Kart içeriği kenarlardan nefes alsın */
.wc-block-product-template > li > *:not(.wc-block-components-product-image) {
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}

@media (min-width: 600px) {
	.wc-block-product-template > li > *:not(.wc-block-components-product-image) {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}
}

/* Başlıklar aynı hizada bitsin, buton hep en altta dursun */
.wc-block-product-template > li .wp-block-post-title {
	margin-bottom: 0.35rem;
}

.wc-block-product-template > li .wp-block-post-excerpt {
	display: none;
}

@media (min-width: 1024px) {
	.wc-block-product-template > li .wp-block-post-excerpt {
		display: block;
	}
}

.wc-block-product-template > li .wp-block-woocommerce-product-button,
.wc-block-product-template > li .wc-block-components-product-button {
	margin-top: auto;
	padding-top: 0.75rem;
}

/*
 * Sepet butonu dar ekranda kutuya sığmalı (4.2.0).
 *
 * Ölçüm: 305 piksellik görüntü alanında iki sütunluk ızgarada kart 120,5
 * piksel. Genel buton dolgusu (0,9rem / 1,6rem) yatayda 51 piksel yer
 * kaplıyordu, metne 46 piksel kalıyordu ve "Sepete ekle" üç satıra
 * kırılıyordu. Buton 80 piksel yüksekliğe çıkıp kartı deforme ediyordu.
 *
 * Bu hata 4.1.0'da da vardı ama görünmüyordu: önizleme ürün kartına hiç
 * buton basmıyordu, dolayısıyla kırılma noktası ölçümü butonu hiç ölçmedi.
 * Önizleme 4.2.0'da gerçek WooCommerce işaretlemesine geçince ortaya çıktı.
 *
 * Çözüm ızgarayı tek sütuna düşürmek değil: mobilde tek ürünlük satır,
 * katalog gezinmesini yarı yarıya yavaşlatır. Bunun yerine kart dolgusu ve
 * buton dolgusu daraltılıp buton kart genişliğine yayılıyor; dokunma hedefi
 * 44 piksel eşiğinin altına inmiyor.
 */
@media (max-width: 599px) {
	.wc-block-product-template > li > *:not(.wc-block-components-product-image) {
		padding-left: 0.6rem;
		padding-right: 0.6rem;
	}

	.wc-block-product-template > li .wp-element-button,
	.wc-block-product-template > li .wc-block-components-product-button a {
		font-size: var(--wp--preset--font-size--tiny);
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		width: 100%;
	}
}

.wc-block-product-template > li .wc-block-components-product-price {
	font-weight: 700;
}

/* Fiyatı olmayan, teklif bazlı ürünlerin etiketi */
.meryas-fiyat-yok {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 600;
}

/* Sayfalama ızgaranın parçası değildir */
.wp-block-query-pagination {
	margin-top: 2rem;
}

/* ==========================================================================
   6. Kategori kartları
   ========================================================================== */

.meryas-kategori-izgara {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.meryas-kategori-izgara {
		gap: 1.25rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.meryas-kategori-izgara {
		gap: 1.5rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.meryas-kategori-kart {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: border-color var(--meryas-sure-kisa) var(--meryas-egri),
		box-shadow var(--meryas-sure-kisa) var(--meryas-egri);
}

.meryas-kategori-kart:hover,
.meryas-kategori-kart:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 2px 16px rgb(12 10 9 / 7%);
}

/*
 * Katalog fotoğrafları beyaz fonda çekilmiş. Kart zemini de kırık beyaz
 * olunca ürün kayboluyor ve kutu boş görünüyordu (1440 pikselde ölçüldü).
 * Görsel alanı bu yüzden ayrı bir "levha": tül zemin ve alt kenarda ince
 * altın çizgi ürünü karttan ayırır.
 *
 * Zemin 4.3.0'da eğimden (`linear-gradient(158deg, #FFFFFF, #F6EFE1)`) düz
 * tül rengine indi. İki gerekçe: tasarım sisteminin yasak listesinde gradyan
 * zemin yıkaması var ve eğim zaten işi yapmıyordu; üst köşesi saf beyaz
 * olduğu için fotoğrafın beyaz fonu tam orada zemine karışıyor, alt köşede
 * ise görünür bir dikdörtgen kenarı çıkıyordu. Düz ton her yerde aynı
 * ayrımı verir ve palette zaten var olan bir basamağı kullanır.
 */
.meryas-kategori-gorsel {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--tint);
	border-bottom: 1px solid rgb(214 179 106 / 30%);
	overflow: hidden;
}

.meryas-kategori-gorsel img {
	display: block;
	height: 100%;
	object-fit: contain;
	padding: 0.4rem;
	transition: transform var(--meryas-sure-uzun) var(--meryas-egri);
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.meryas-kategori-kart:hover .meryas-kategori-gorsel img {
		transform: scale(1.04);
	}
}

.meryas-kategori-govde {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem;
}

.meryas-kategori-ad {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

.meryas-kategori-ad a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Kartın tamamı tıklanabilir olsun; ayrı bir bağlantı katmanı gerekmez */
.meryas-kategori-ad a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.meryas-kategori-kart:hover .meryas-kategori-ad a {
	color: var(--wp--preset--color--accent-deep);
}

.meryas-kategori-sayi {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--tiny);
	margin: 0;
}

/*
 * Kart okunun yerini tuttuğu şey (4.3.0): her kartın altında ayrı bir
 * "Ürünleri incele →" satırı vardı. Kartın tamamı zaten tıklanabilir
 * (`.meryas-kategori-ad a::after { inset: 0 }`), yani o satır bir eylem
 * değil eylemin tarifiydi. On iki kartta on iki kez tekrarlanınca ızgaranın
 * en gürültülü öğesi oydu; altın rengi kartın kendi hiyerarşisiyle de
 * yarışıyordu.
 *
 * Yerine başlığın ucunda tek bir ok var. Kendi satırını açmıyor, mobilde
 * altı kart sırasından yaklaşık 180 piksel geri kazandırıyor ve dokunma
 * hedefi uyarısı üretmiyor: ok metnin parçası, ayrı bir bağlantı değil.
 * Fareyle üstüne gelince ileri kayıyor, kartın tıklanabilir olduğunu
 * hareketiyle söylüyor.
 */
.meryas-ok {
	color: var(--wp--preset--color--accent-deep);
	display: inline-block;
	margin-left: 0.4rem;
	transition: transform var(--meryas-sure-kisa) var(--meryas-egri);
}

@media (prefers-reduced-motion: no-preference) {
	.meryas-kategori-kart:hover .meryas-ok,
	.meryas-kategori-kart:focus-within .meryas-ok {
		transform: translateX(0.25rem);
	}
}

/* ==========================================================================
   7. Kategori vitrini
   ========================================================================== */

/*
 * Vitrin (4.2.0), ürün kütlesini üçüncü bir ızgara açmadan taşır.
 *
 * Satır iki yarımdır: solda kategori künyesi, sağda o kategorinin dört ürünü.
 * Kategori ızgarası hemen üstünde durduğu için burada ikinci bir kart
 * kutusu kullanılmaz; satırları ayıran tek öğe, sayfanın geri kalanıyla aynı
 * 1 piksellik kuraldır. Ürün gözü de kutusuzdur, yalnız görsel levhası
 * (sıcak eğim + ince altın alt kenar) ürünü beyaz fondan ayırır.
 */
.meryas-vitrin-bolumu {
	padding-block: var(--wp--preset--spacing--60);
}

.meryas-vitrin-ust {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
}

.meryas-vitrin-magaza {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.meryas-vitrin {
	border-top: 1px solid var(--wp--preset--color--line);
}

.meryas-vitrin-satiri {
	border-bottom: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--wp--preset--spacing--40);
}

/*
 * Künye 1180 pikselin altında üstte tek satır olarak durur, üstünde sola
 * geçer. 15rem, en uzun kategori adının iki satırda kırıldığı ölçülmüş
 * genişliktir.
 *
 * Eşik 960'tan 1180'e çekildi (4.3.0). Ölçüm: 960 pikselde yan künye 240
 * piksel + 24 piksel boşluk yiyordu ve dört ürün gözü 147 piksele
 * düşüyordu. Aynı göz 390 piksellik telefonda 164 piksel. Yani düzen
 * genişledikçe kart küçülüyordu; masaüstü, mobilden dar bir katalog
 * gösteriyordu. Ölçülen seri: 600->269, 768->165, 900->198, 960->147,
 * 1024->163. Monoton değil, çukur 960'ta.
 *
 * Yeni eşik, gözün künye eklenmeden önceki en küçük değerinin (193)
 * altına inmeyeceği noktadan türetildi: (X - 48 - 240 - 24 - 60) / 4 >= 193
 * -> X >= 1180.
 */
@media (min-width: 1180px) {
	.meryas-vitrin-satiri {
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: 15rem minmax(0, 1fr);
	}
}

.meryas-vitrin-kunye > * {
	margin: 0;
}

.meryas-vitrin-ad {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.meryas-vitrin-ad a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.meryas-vitrin-ad a:hover,
.meryas-vitrin-ad a:focus {
	color: var(--wp--preset--color--accent-deep);
}

.meryas-vitrin-sayi {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--tiny);
	padding-top: 0.25rem;
}

.meryas-vitrin-aciklama {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	padding-top: 0.6rem;
}

.meryas-vitrin-devam {
	color: var(--wp--preset--color--accent-deep);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	padding-top: 0.8rem;
}

/*
 * Satır dört ürün basar (`meryas_vitrin( 3, 4 )`). Sütun sayısı bu yüzden
 * yalnız 2 veya 4 olabilir; 3 sütun son satırda tek başına bir kart bırakır.
 *
 * Dört sütuna geçiş 768'den 880'e alındı (4.3.0). 768 pikselde dört göz
 * 165 piksele düşüyordu, iki göz ise 350 piksel veriyor. 880 pikselde dört
 * göz 193 piksele çıkıyor ve bu, ızgaranın geri kalanındaki en küçük değer
 * oluyor; altına düşen bir genişlik kalmıyor.
 */
.meryas-vitrin-urunler {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 880px) {
	.meryas-vitrin-urunler {
		gap: 1.25rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.meryas-vitrin-urun {
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-decoration: none;
}

.meryas-vitrin-urun:hover .meryas-vitrin-urun-ad,
.meryas-vitrin-urun:focus .meryas-vitrin-urun-ad {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: underline;
}

.meryas-vitrin-gorsel {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-bottom-color: rgb(214 179 106 / 30%);
	border-radius: 4px;
	display: block;
	overflow: hidden;
}

/*
 * 600-879 arasında göz iki sütunda kalıyor ve genişliği 269'dan 408 piksele
 * çıkıyor. Kare oranda bu, aynı yükseklikte bir kutu demek; ölçüldü, 768
 * pikselde sayfa 11.761 piksele uzuyordu ve tablet, telefondan (11.630) daha
 * uzun bir sayfa gösteriyordu. Genişlik arttıkça sayfanın kısalması gerekir.
 *
 * Bu bantta oran 4/3'e alınır. Fotoğraflar kare (480x480) ve `contain` ile
 * sığdırıldığı için ürün kırpılmaz, yalnız kutunun boşu azalır.
 */
@media (min-width: 600px) and (max-width: 879px) {
	.meryas-vitrin-gorsel {
		aspect-ratio: 4 / 3;
	}
}

.meryas-vitrin-gorsel img {
	display: block;
	height: 100%;
	object-fit: contain;
	padding: 0.5rem;
	transition: transform var(--meryas-sure-uzun) var(--meryas-egri);
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.meryas-vitrin-urun:hover .meryas-vitrin-gorsel img {
		transform: scale(1.04);
	}
}

.meryas-vitrin-urun-ad {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
}

.meryas-vitrin-fiyat {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	margin-top: auto;
	padding-top: 0.15rem;
}

/* ==========================================================================
   8. Baskı teknolojileri ve üretim süreci
   ========================================================================== */

/*
 * Künye tablosu (4.1.0). Dört eşit kart yerine ince kurallarla ayrılmış
 * satırlar. Her satır iki yarımdır: solda disiplinin adı ve tanımı,
 * sağda o disiplinin ölçülebilir alanları. Kart kutusu kalktığı için
 * yüzey, kenarlık ve gölge kalabalığı da kalktı; bilgiyi ayıran tek
 * öğe kural oldu.
 */
.meryas-kunye-tablosu {
	border-top: 1px solid rgb(255 255 255 / 16%);
}

.meryas-kunye-is {
	border-bottom: 1px solid rgb(255 255 255 / 16%);
	display: grid;
	gap: 1.1rem;
	grid-template-columns: minmax(0, 1fr);
	padding-block: 1.6rem;
}

@media (min-width: 860px) {
	.meryas-kunye-is {
		align-items: start;
		gap: 2.5rem;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		padding-block: 2rem;
	}
}

.meryas-kunye-tanim {
	display: flex;
	gap: 1.1rem;
	min-width: 0;
}

.meryas-kunye-tanim .meryas-rozet {
	background: transparent;
	border-color: rgb(214 179 106 / 45%);
	color: var(--wp--preset--color--accent);
}

.meryas-kunye-is h3 {
	color: #FFFFFF;
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.35rem;
}

.meryas-kunye-is p {
	color: #C7C2BB;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	max-width: 34rem;
}

.meryas-kunye-ozellik {
	margin: 0;
}

.meryas-kunye-ozellik > div {
	border-top: 1px solid rgb(255 255 255 / 12%);
	display: grid;
	gap: 0.15rem 1rem;
	padding-block: 0.55rem;
}

.meryas-kunye-ozellik > div:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 480px) {
	.meryas-kunye-ozellik > div {
		align-items: baseline;
		grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	}
}

.meryas-kunye-ozellik dt {
	color: #8A8580;
	font-size: var(--wp--preset--font-size--tiny);
	margin: 0;
}

.meryas-kunye-ozellik dd {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/*
 * Sektör künyesi. Aynı satır dili, açık zeminde. Sektör bir ürün
 * değildir; kart yerine sıralama olarak okunur.
 */
.meryas-kunye-listesi {
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

.meryas-kunye-satiri {
	border-bottom: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 0.2rem 1.5rem;
	padding-block: 0.95rem;
}

@media (min-width: 600px) {
	.meryas-kunye-satiri {
		align-items: baseline;
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	}
}

.meryas-kunye-satiri dt {
	font-weight: 600;
	margin: 0;
}

.meryas-kunye-satiri dd {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* Üretim süreci: numaralı adımlar, aralarında altın çizgi */
.meryas-surec {
	counter-reset: adim;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.meryas-surec {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.meryas-surec {
		gap: 0;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.meryas-adim {
	counter-increment: adim;
	padding: 1.1rem 1.1rem 1.1rem 0;
	position: relative;
}

@media (min-width: 1024px) {
	.meryas-adim {
		padding: 0 1.25rem;
	}

	.meryas-adim:not(:last-child)::after {
		background: var(--wp--preset--color--line);
		content: "";
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
	}
}

/*
 * Adım numarası. Daire içindeki küçük kalın rakam, ürün turu arayüzlerinin
 * dilidir; burada işin sırası anlatılıyor, bir kurulum sihirbazı değil.
 * Rakam display ailesine ve gerçek boyuta çıkarıldı, daire kaldırıldı.
 * Numaralandırma burada meşrudur: adımlar gerçekten sıralıdır.
 */
.meryas-adim-sira {
	color: var(--wp--preset--color--accent-deep);
	display: block;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: 2.1rem;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 0.55rem;
}

.meryas-adim-sira::before {
	content: counter(adim, decimal-leading-zero);
}

.meryas-adim h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.3rem;
}

.meryas-adim p {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* ==========================================================================
   9. Teklif formu
   ========================================================================== */

.meryas-teklif-formu {
	margin: 0;
}

.meryas-form-izgara {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.meryas-form-izgara {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.meryas-form-izgara {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.meryas-alan {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.meryas-alan-genis {
	margin-top: 0.85rem;
}

.meryas-alan label {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.meryas-alan label span {
	color: var(--wp--preset--color--accent-deep);
}

.meryas-alan input,
.meryas-alan textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	min-height: 44px;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.meryas-alan textarea {
	min-height: 120px;
	resize: vertical;
}

.meryas-alan input:focus,
.meryas-alan textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 1px;
}

/* Bal küpü: gerçek kullanıcı görmez, ekran okuyucudan da gizlidir */
.meryas-bal-kupu {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.meryas-form-eylem {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 1.1rem 0 0;
}

.meryas-gonder {
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.9rem 1.8rem;
}

.meryas-gonder:hover,
.meryas-gonder:focus {
	background: var(--wp--preset--color--accent-strong);
}

.meryas-form-not {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--tiny);
}

/*
 * Form bildirimi. Sol kenardaki 3 piksellik renkli şerit kaldırıldı
 * (impeccable "side-tab"). Durum bilgisi kutuyu tümüyle saran 1 piksellik
 * kenarlık, zemin tonu ve metnin kendisiyle taşınıyor; renk tek başına
 * anlam taşımıyor, metin her hâlükârda durumu yazıyor.
 */
.meryas-form-bildirim {
	border: 1px solid;
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
}

.meryas-form-tamam {
	background: #F0F7F0;
	border-color: #2F6B33;
	color: #1F4A22;
}

.meryas-form-hata {
	background: #FBF0EF;
	border-color: #9B2C2C;
	color: #7A2222;
}

/* Koyu zeminde duran form varyantı */
.meryas-koyu-form .meryas-alan label {
	color: #E7E3DC;
}

/*
 * Zorunlu alan yıldızı koyu formda 3,11 kontrast veriyordu (canlı sitede
 * 2026-08-05'te ölçüldü, AA sınırı 4,5). Açık zeminde doğru olan
 * accent-deep, koyu zeminde okunmuyor; koyu bantta parlak altın kullanılır,
 * antrasit üstünde 10,88 veriyor (`scripts/kontrast-denetim.py`).
 */
.meryas-koyu-form .meryas-alan label span {
	color: var(--wp--preset--color--accent-strong);
}

.meryas-koyu-form .meryas-form-not {
	color: #A8A29E;
}

/* Teklif bandının iki sütunlu düzeni */
.meryas-teklif-duzen {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.meryas-teklif-duzen {
		align-items: start;
		gap: 3.5rem;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.meryas-teklif-kanallar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.meryas-teklif-kanallar .wp-element-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
}

.meryas-teklif-form-kutu {
	background: rgb(255 255 255 / 5%);
	border: 1px solid rgb(214 179 106 / 25%);
	border-radius: 4px;
	padding: 1.5rem;
}

@media (min-width: 600px) {
	.meryas-teklif-form-kutu {
		padding: 2rem;
	}
}

/* ==========================================================================
   10. Yüzen WhatsApp butonu
   ========================================================================== */

.meryas-yuzen-whatsapp {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	bottom: 1rem;
	box-shadow: 0 6px 20px rgb(12 10 9 / 22%);
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	gap: 0.5rem;
	inset-inline-end: 1rem;
	min-height: 48px;
	padding: 0.6rem 1.1rem;
	position: fixed;
	text-decoration: none;
	z-index: 950;
}

.meryas-yuzen-whatsapp:hover,
.meryas-yuzen-whatsapp:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.meryas-yuzen-whatsapp .meryas-ikon {
	height: 22px;
	width: 22px;
}

.meryas-yuzen-metin {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Dar ekranda yalnızca ikon; metin yer kaplamasın */
@media (max-width: 480px) {
	.meryas-yuzen-metin {
		display: none;
	}

	.meryas-yuzen-whatsapp {
		border-radius: 50%;
		height: 52px;
		justify-content: center;
		padding: 0;
		width: 52px;
	}
}

/* ==========================================================================
   11. WooCommerce ürün detayı
   ========================================================================== */

/* Woo bildirimleri tema diliyle uyumlu olsun */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 4px;
	border-top-color: var(--wp--preset--color--accent);
}

/* Galeri */
.woocommerce div.product div.images img {
	border-radius: 4px;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0.75rem 0 0;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	margin: 0;
	width: auto;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

/* Varyasyon tablosu: seçenek satırları */
.woocommerce div.product form.cart .variations {
	border-collapse: separate;
	border-spacing: 0;
	display: block;
	width: 100%;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr {
	display: block;
	width: 100%;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	padding: 0;
	width: 100%;
}

.woocommerce div.product form.cart .variations th.label {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.3rem;
	padding-right: 0;
	text-align: left;
	text-transform: uppercase;
	white-space: normal;
}

.woocommerce div.product form.cart .variations td.value {
	margin-bottom: 0.9rem;
}

.woocommerce div.product form.cart .variations select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	min-height: 44px;
	padding: 0.7rem 1rem;
	width: 100%;
}

.woocommerce div.product form.cart .quantity input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	min-height: 44px;
	padding: 0.7rem;
}

/* Sepete ekle satırı dar ekranda taşmasın */
.woocommerce div.product form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.woocommerce div.product form.cart.variations_form {
	display: block;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 12rem;
	min-height: 48px;
}

/* Ürün sayfasındaki teklif bölümü */
.meryas-urun-teklif {
	background: var(--wp--preset--color--tint);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--60);
}

.meryas-urun-teklif-ic {
	margin: 0 auto;
	max-width: 900px;
	padding-inline: var(--wp--preset--spacing--40);
}

.meryas-urun-teklif-ustluk {
	color: var(--wp--preset--color--accent-deep);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.meryas-urun-teklif-baslik {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0 0 0.6rem;
}

.meryas-urun-teklif-metin {
	color: var(--wp--preset--color--muted-text);
	margin: 0 0 1.5rem;
	max-width: 46rem;
}

/*
 * Ölçü ve adet yardımı: varyasyon seçiminin hemen altında.
 * Sol kenardaki altın şerit kaldırıldı (impeccable "side-tab"); not
 * zaten tül zeminiyle ayrışıyor, ince kenarlık onu kutu olarak kapatıyor.
 */
.meryas-olcu-notu {
	background: var(--wp--preset--color--tint);
	border: 1px solid rgb(214 179 106 / 40%);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--tiny);
	margin: 0.75rem 0 0;
	padding: 0.7rem 0.9rem;
}

/* Ürün sekmeleri ve açıklama tablosu dar ekranda kaydırılabilir olsun */
.woocommerce table.shop_attributes,
.wp-block-woocommerce-product-details table {
	display: block;
	overflow-x: auto;
	width: 100%;
}

/* ==========================================================================
   12. Alt alan
   ========================================================================== */

.meryas-baglanti-listesi {
	list-style: none;
	margin: 0;
	padding: 0;
}

.meryas-baglanti-listesi li {
	margin: 0;
}

.meryas-baglanti-listesi a {
	display: inline-block;
	padding: 0.4rem 0;
}

/*
 * Künye bandı (4.1.0). Önceki düzen dört sütun bağlantı listesiydi; bu
 * kalıp alt alanın en tanınır şablon biçimidir ve altı kategori bağlantısını
 * markayla aynı ağırlığa çıkarıyordu. Yeni düzen iki katmanlıdır:
 * üstte marka ve iletişim, altta satır içi bağlantı şeritleri.
 */
.meryas-kunye-bandi {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.meryas-kunye-bandi {
		align-items: start;
		gap: 3.5rem;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}

/* Bağlantı şeritleri: etiket solda, bağlantılar sağda satır içi akar */
.meryas-alt-satirlar {
	margin-top: 2.5rem;
}

.meryas-alt-satir {
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 0.1rem 1.5rem;
	padding-block: 0.85rem;
}

@media (min-width: 600px) {
	.meryas-alt-satir {
		align-items: baseline;
		grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	}
}

.meryas-alt-satir h3 {
	color: var(--wp--preset--color--muted-text);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

/*
 * Bağlantılar satır içi akar. Satır arası boşluk sıfır bırakılamaz:
 * alt satıra sarkan bağlantı bir üsttekine yapışır ve iki dokunma hedefi
 * temas eder. Ölçüldü: bağlantı yüksekliği 38 piksel, WCAG 2.5.8'in
 * 24 piksel eşiğini geçiyor, ancak hedefler arası boşluk ayrıca gerekir.
 */
.meryas-alt-satir .meryas-baglanti-listesi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.4rem;
}

.meryas-alt-satir .meryas-baglanti-listesi a {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

.meryas-alt-satir .meryas-baglanti-listesi a:hover {
	color: var(--wp--preset--color--accent-deep);
}

.meryas-alt-logo {
	height: auto;
	max-width: 180px;
}

/* Logo yoksa marka adı basılır; üst alandaki künye sesiyle aynı olmalı */
.meryas-alt-logo-metin {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: 1.65rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.05;
	margin: 0;
	text-transform: none;
}

.meryas-alt-aciklama {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.9rem 0 1rem;
}

.meryas-alt-sosyal {
	display: flex;
	gap: 0.5rem;
}

.meryas-alt-sosyal a {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.meryas-alt-sosyal a:hover {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-deep);
}

/* .meryas-alt-sutun kuralları 4.1.0'da kaldırıldı: dört sütunlu alt alan
 * künye bandına dönüştüğü için o sınıfı basan işaretleme kalmadı. */

.meryas-alt-teklif {
	margin: 1.25rem 0 0;
}

.meryas-alt-teklif .wp-element-button {
	align-items: center;
	background: var(--wp--preset--color--accent);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	text-decoration: none;
}

.meryas-alt-teklif .wp-element-button:hover {
	background: var(--wp--preset--color--accent-strong);
}

.meryas-alt-iletisim {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.meryas-alt-iletisim div {
	align-items: flex-start;
	display: flex;
	gap: 0.65rem;
}

.meryas-alt-iletisim .meryas-ikon {
	color: var(--wp--preset--color--accent-deep);
	flex: 0 0 auto;
	height: 20px;
	margin-top: 0.15rem;
	width: 20px;
}

/*
 * Alt alandaki telefon ve e-posta bağlantısı 110x20 ölçülüyordu (4.3.0).
 * Cümle içinde değil, kendi satırında duran bir iletişim eylemi; satır içi
 * istisnaya girmiyor. Simge ile aynı hizada kalması için dolgu simetrik.
 */
.meryas-alt-iletisim a {
	display: inline-block;
	min-height: 24px;
	padding-block: 0.15rem;
}

/* ==========================================================================
   13. Yazdırma
   ========================================================================== */

@media print {
	.meryas-yuzen-whatsapp,
	.meryas-ustbar,
	.wp-block-navigation {
		display: none !important;
	}

	.meryas-baslik-kabi {
		position: static;
	}
}