/*
 * MevvBlocks taban stili.
 *
 * NEDEN VAR: MevvBlocks, Elementor'ün sınıf adlarını bilerek korur (tema
 * CSS'i, müşterinin özel CSS'i ve üçüncü parti kod onlara yaslanıyor).
 * Ama sınıfı korumak yetmez — o sınıfları BİÇİMLENDİREN taban CSS de
 * gerekiyor. Elementor kaldırıldığında kendi frontend.css'i de gider.
 *
 * Gerçek kurulumda ölçüldü: taban stil olmadan sayfa 8.251 pikselden
 * 35.031 piksele uzuyordu — ikonlar kapsayıcı boyunca büyüyor,
 * kapsayıcılar düzenini kaybediyordu.
 *
 * Bu dosya Elementor'ün CSS'inden KOPYALANMADI. Stil motorumuzun ürettiği
 * CSS değişkeni sözleşmesi ölçümle çıkarıldı; burada o sözleşmeyi
 * karşılayan kendi uygulamamız var.
 */

/* ---------- Kapsayıcı ---------- */

.e-con {
	--display: flex;
	--flex-direction: column;
	--justify-content: flex-start;
	/* Kaynak eklenti hizalama vermediğinde `normal` bırakıyor, `stretch`
	   yazmıyor. Izgarada ikisi aynı davranır ama esnekte fark eder;
	   ölçüldü, canlıda hesaplanmış değer `normal`. */
	--align-items: normal;
	--gap: 20px 20px;
	/* Varsayılan kapsayıcı dolgusu 10 px — sıfır DEĞİL. Kaynak eklentinin
	   varsayılanı bu; sıfır yazarsak ayarı olmayan kapsayıcılar kenara
	   yapışıyor. Ölçüldü: ayarsız bir kapsayıcı canlıda 10px/10px. */
	--padding-top: 10px;
	--padding-right: 10px;
	--padding-bottom: 10px;
	--padding-left: 10px;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--border-radius: 0;
	--container-max-width: 1140px;
	/* Kaynak eklentinin sözleşmesi: içerik genişliği, kapsayıcı azami
	   genişliğinden TÜRER. Sabit yazsaydık müşterinin genel ayarı
	   (1140 dışında bir değer) hiç etki etmezdi. */
	--content-width: min(100%, var(--container-max-width));
	--width: 100%;
	--min-height: initial;
	--overlay-opacity: 0.5;

	position: relative;
	display: var(--display);
	flex-direction: var(--flex-direction);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	gap: var(--gap);
	min-height: var(--min-height);
	padding-block: var(--padding-top) var(--padding-bottom);
	padding-inline: var(--padding-left) var(--padding-right);
	margin-block: var(--margin-top) var(--margin-bottom);
	margin-inline: var(--margin-left) var(--margin-right);
	border-radius: var(--border-radius);
	border-style: var(--border-style, none);
	border-color: var(--border-color, currentColor);
	border-top-width: var(--border-top-width, 0);
	border-right-width: var(--border-right-width, 0);
	border-bottom-width: var(--border-bottom-width, 0);
	border-left-width: var(--border-left-width, 0);
	box-sizing: border-box;
}

.e-con.e-flex  { --display: flex; }
.e-con.e-grid  { --display: grid; }

/* Izgara kapsayıcı: sütun/satır şablonu ve akış */
.e-con.e-grid {
	grid-template-columns: var(--e-con-grid-template-columns, 1fr);
	grid-auto-flow: var(--grid-auto-flow, row);
	align-content: var(--align-content, initial);
	justify-items: var(--justify-items, initial);
}
.e-con.e-grid > .e-con-inner {
	display: grid;
	grid-template-columns: var(--e-con-grid-template-columns, 1fr);
	grid-auto-flow: var(--grid-auto-flow, row);
	gap: var(--gap);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}

/* Kutulanmış kapsayıcı: içerik ortalanır ve genişliği sınırlanır.
   Tam genişlikte (.e-con-full) iç sarmalayıcı YOKTUR. */
.e-con.e-con-boxed { align-items: center; justify-content: flex-start; }
.e-con.e-con-boxed > .e-con-inner {
	display: var(--display);
	flex-direction: var(--flex-direction);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	gap: var(--gap);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 0;
}

.e-con.e-con-full { align-items: var(--align-items); }

/* İç sarmalayıcının genişlik sınırı — özgüllüğü BİLEREK yükseltilmiş.
 *
 * Astra, blok düzenli içerikte şu kuralı basıyor:
 *   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
 *     > :not(.wp-block-group):where(…) > * { max-width: none }
 * Özgüllüğü (0,4,0); yukarıdaki kurallarımız (0,3,0). Sıralamadan bağımsız
 * kaybediyoruz ve kutulanmış kapsayıcılar içerik genişliğine değil, sayfanın
 * tamamına yayılıyor.
 *
 * Kaynak eklentinin çıktısında bu olmuyordu çünkü araya kendi sarmalayıcısı
 * (`div.elementor.elementor-<id>`) giriyor ve Astra'nın seçicisi eleman
 * torununa ulaşamıyordu. Blok çıktısında ara katman yok.
 *
 * Ölçüldü (mevvshop anasayfası, 1440 px): kapsayıcı 1200 px yerine 1360 px,
 * ürün görselleri 280 yerine 320 px. Kullanıcının gördüğü "yanlardan boşluk
 * yok" tam olarak buydu.
 *
 * Çözüm !important değil, sınıfı yineleyip (0,5,0)'a çıkmak — aynı yöntem
 * stil motorunda da kullanılıyor. `!important` müşterinin kendi özel CSS'ini
 * de ezerdi. */
.e-con.e-con-boxed > .e-con-inner.e-con-inner.e-con-inner,
.e-con.e-grid > .e-con-inner.e-con-inner.e-con-inner {
	max-width: var(--content-width);
}

/* Çocuk kapsayıcı: genişliğini ebeveyninden alır */
.e-con.e-child { width: var(--width); max-width: 100%; }
.e-con.e-parent { width: 100%; }

/* Arka plan kaplaması: ::before katmanı, opaklığı değişkenden */
.e-con > .elementor-background-overlay,
.e-con::before {
	content: var(--background-overlay);
	display: block;
	position: absolute;
	inset: 0;
	opacity: var(--overlay-opacity);
	border-radius: var(--border-radius);
	pointer-events: none;
	z-index: 0;
}
.e-con > * { position: relative; z-index: 1; }

/* Arka plan görselleri kapsayıcının kendisine basılır */
.e-con { background-repeat: no-repeat; }

/* ---------- Widget ---------- */

.elementor-element.elementor-widget {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
	/* Aynı öncelik kuralı esneme için de geçerli: elemanın kendi ayarı
	   (--flex-grow/--flex-shrink) kapsayıcının widget varsayılanından
	   önce gelir. */
	flex-grow: var(--flex-grow, var(--container-widget-flex-grow, 0));
	flex-shrink: var(--flex-shrink, 1);
	/*
	 * Sıra önemli: ELEMANIN KENDİ hizalaması (--align-self), kapsayıcının
	 * widget'lara verdiği varsayılandan (--container-widget-align-self)
	 * önce gelir. Ters kurulmuşken elemanın kendi ayarı hiç etki etmiyordu:
	 * bu kural daha özgül olduğu için `initial` basıp eziyordu ve widget'lar
	 * kapsayıcı boyunca geriliyordu (ölçüldü: içeriği 22 px olan üç widget
	 * 118 px yer kaplıyordu).
	 */
	align-self: var(--align-self, var(--container-widget-align-self, initial));
	min-width: 0;
}
/* Widget kutusunun ilk/son çocuğunda boşluk SIFIRLANMAZ.
 *
 * Buradaki iki sıfırlama kaynak eklentide yok. Ölçüldü: metin widget'ının
 * son paragrafı canlıda alt boşluğunu koruyor (mb 25,6–28 px) ve widget
 * o kadar uzun oluyor. Sıfırladığımız sürüm her metin widget'ını bir satır
 * boyu kısaltıyordu — anasayfada beş widget'ta 26'şar piksel. */

/* ---------- Başlık ---------- */

/* Başlık sıfırlaması — özgüllük ölçülerek yükseltildi.
 *
 * Kaynak eklenti `.elementor-heading-title{margin:0}` diyor, özgüllüğü
 * (0,1,0). Astra'nın WooCommerce ızgara stilinde `.woocommerce-js h2`
 * kuralı var ve o (0,1,1) — sınıf sayısı eşit ama eleman seçicisi fazla,
 * yani bizimkini yeniyor.
 *
 * Temiz kurulumda ölçüldü: 30 px'lik bir başlığa 0.7em (21 px) alt boşluk
 * sızıyordu; beş başlıkta 18'er piksel fark ediyordu. Widget sınıfını
 * ekleyerek (0,2,0)'a çıkıyoruz — sınıf sayısı fazla olan kazanır.
 * `!important` kullanılmıyor: müşterinin kendi özel CSS'ini de ezerdi. */
/* SATIR YÜKSEKLİĞİ BURADA VERİLMEZ — temadan gelir.
 * Sabit 1.2 yazan sürüm, temanın 1.3 verdiği bir kurulumda başlığı 3 px
 * kısaltıyordu (ölçüldü: 30 px başlık, tema 39 px, biz 36 px). Kaynak
 * eklenti de bu değeri kendisi belirlemiyor. */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
	padding: 0;
	color: inherit;
}

/* ---------- Düğme ---------- */

.elementor-button-wrapper { display: block; }
.elementor-button {
	display: inline-block;
	line-height: 1;
	background-color: #69727d;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 3px;
	color: #fff;
	fill: #fff;
	text-align: center;
	text-decoration: none;
	transition: none;
	box-sizing: border-box;
}
.elementor-button:hover,
.elementor-button:focus { color: #fff; text-decoration: none; }
.elementor-button-content-wrapper { display: flex; justify-content: center; gap: 5px; }
.elementor-align-center .elementor-button-wrapper { text-align: center; }
.elementor-align-left   .elementor-button-wrapper { text-align: left; }
.elementor-align-right  .elementor-button-wrapper { text-align: right; }
.elementor-align-justify .elementor-button { width: 100%; }

/* ---------- Ayırıcı ---------- */

.elementor-divider {
	display: flex;
	padding-block: 10px;
}
.elementor-divider-separator {
	display: flex;
	margin: 0;
	direction: ltr;
	width: 100%;
	border-block-start: var(--divider-border-width, 1px) var(--divider-border-style, solid) var(--divider-color, #000);
}

/* ---------- İkon ---------- */

.elementor-icon-wrapper { text-align: center; }
.elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #69727d;
	font-size: 50px;
	text-align: center;
	text-decoration: none;
}
/* Boyut sınırı KRİTİK: svg'ye ölçü verilmezse kapsayıcı boyunca büyür.
   Ölçüldü — sayfa 8.251 px'ten 35.031 px'e çıkıyordu. */
.elementor-icon svg {
	width: 1em;
	height: 1em;
	min-width: 1em;
	fill: currentColor;
	display: block;
}
.elementor-icon i { width: 1em; height: 1em; }

.elementor-view-stacked .elementor-icon {
	padding: .5em;
	background-color: #69727d;
	color: #fff;
	fill: #fff;
}
.elementor-view-framed .elementor-icon {
	padding: .5em;
	border: 3px solid #69727d;
	background-color: transparent;
}
.elementor-shape-circle .elementor-icon { border-radius: 50%; }
.elementor-shape-square .elementor-icon { border-radius: 0; }
.elementor-shape-rounded .elementor-icon { border-radius: 10%; }

/* ---------- İkon kutusu ---------- */

.elementor-icon-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 15px;
}
.elementor-position-block-start .elementor-icon-box-wrapper { flex-direction: column; }
.elementor-position-left  .elementor-icon-box-wrapper { flex-direction: row; text-align: start; align-items: flex-start; }
.elementor-position-right .elementor-icon-box-wrapper { flex-direction: row-reverse; text-align: end; align-items: flex-start; }
.elementor-icon-box-icon { display: flex; flex-shrink: 0; }
.elementor-icon-box-content { flex-grow: 1; }
.elementor-icon-box-title { margin: 0; }
.elementor-icon-box-title > span { font-weight: inherit; }
.elementor-icon-box-description { margin: 0; }

/* ---------- Görsel kutusu ---------- */

/* Yapı ikon kutusuyla aynı; ayrı kural ailesi yazmanın sebebi görselin
   ikondan farklı davranması: ikon `font-size` ile büyür, görsel kendi
   genişliğini taşır ve kapsayıcıyı taşırmaması gerekir. */
.elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 15px;
}
.elementor-position-block-start .elementor-image-box-wrapper { flex-direction: column; }
.elementor-position-left  .elementor-image-box-wrapper { flex-direction: row; text-align: start; align-items: flex-start; }
.elementor-position-right .elementor-image-box-wrapper { flex-direction: row-reverse; text-align: end; align-items: flex-start; }

/* `figure` tarayıcı varsayılanında yan boşluk taşır (40 px); temizlenmezse
   yan yana dizilişte görsel ile metnin arası ayarlanan boşluğun iki katı
   olur. `flex-shrink: 0` görselin yazı uzadıkça ezilmesini engelliyor. */
.elementor-image-box-img {
	margin: 0;
	flex-shrink: 0;
	max-width: 100%;
}
.elementor-image-box-img img { width: 100%; height: auto; display: block; }
.elementor-image-box-content { flex-grow: 1; min-width: 0; }
.elementor-image-box-title { margin: 0; }
.elementor-image-box-description { margin: 0; }

/* Kutunun tamamı tek bir bağlantı. Rengi ve alt çizgiyi devralmıyoruz:
   kutu bir metin bağlantısı gibi değil, kart gibi görünmeli. */
.elementor-image-box-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Mobilde konum ayrı ayarlanabiliyor; masaüstü değeri taşınmaz. */
@media (max-width: 767px) {
	.elementor-mobile-position-block-start .elementor-image-box-wrapper { flex-direction: column; text-align: center; align-items: center; }
	.elementor-mobile-position-left  .elementor-image-box-wrapper { flex-direction: row; text-align: start; align-items: flex-start; }
	.elementor-mobile-position-right .elementor-image-box-wrapper { flex-direction: row-reverse; text-align: end; align-items: flex-start; }
}

/* ---------- Sosyal ikonlar ---------- */

/* Sınıf İKİ KEZ yazılıyor — özgüllük için, `!important` yerine.
 *
 * Markup kaynak eklentiyle birebir kalsın diye sarmalayıcı
 * `elementor-grid` sınıfını da taşıyor; kaynağın kendi CSS'inde o sınıf
 * `display: grid` demek. Devralınan bir temada ya da müşterinin özel
 * CSS'inde o kural kalmışsa, tek sınıflı kuralımızla BERABERE kalır ve
 * sonucu yükleme sırası belirlerdi — ikonlar bir sütuna dizilirdi.
 * Tekrar, sıradan bağımsız kazandırır; `!important` ise müşterinin kendi
 * düzenlemesini de ezerdi. */
.elementor-social-icons-wrapper.elementor-social-icons-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.elementor-social-icons-wrapper .elementor-grid-item { display: inline-flex; }

/* Taban `.elementor-icon` kuralı 50 px veriyor — tek başına duran bir ikon
   için doğru, alt bilgideki sosyal şerit için değil. Aynı özgüllükte ve
   dosyada SONRA geldiği için bu değer kazanır. */
.elementor-social-icon {
	font-size: 25px;
	color: inherit;
	text-decoration: none;
}

/* İkonlarımız ÇİZGİ tabanlı: `fill="none"` + `stroke="currentColor"`.
   Ama bu bir sunum ÖZNİTELİĞİ ve CSS onu ezer — kaynak eklentinin hâlâ
   yüklü olan `svg{fill:currentColor}` kuralı devreye girince Instagram'ın
   yuvarlak karesi dolu siyah bir kareye dönüşüyordu. Canlıda ölçüldü:
   `fill: rgb(74,74,74)`.

   Sınıf iki kez yazıldı — `!important` değil. Tekrar sıradan bağımsız
   kazandırır; `!important` müşterinin kendi renk düzenlemesini de ezerdi
   ve o zaman ikon rengi hiç değiştirilemezdi. */
svg.mevv-ikon.mevv-ikon { fill: none; stroke: currentColor; }

/* Odak GÖRÜNÜR olmak zorunda: bu şerit yalnızca ikonlardan oluşuyor ve
   odağın nerede olduğunu gösteren başka hiçbir işaret yok. `:focus-visible`
   seçildi — fare tıklamasında halka çıkmıyor, klavyede çıkıyor. */
.elementor-social-icon:focus-visible,
.elementor-image-box-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Telif satırı ---------- */

/* Alt bilginin son satırı: kendi dış boşluğunu taşımaz, kapsayıcının
   boşluğunu kullanır. */
.mevv-telif { margin: 0; }

/* ---------- İkon listesi ---------- */

.elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: inherit;
}
.elementor-icon-list-item > a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.elementor-icon-list-icon { display: flex; flex-shrink: 0; }
.elementor-icon-list-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Referans ---------- */

.elementor-testimonial-wrapper { text-align: center; overflow: hidden; }
.elementor-testimonial-content { margin-block-end: 20px; font-size: 1.2em; }
.elementor-testimonial-meta { width: 100%; }
.elementor-testimonial-meta-inner { display: inline-flex; align-items: center; gap: 12px; }
.elementor-testimonial-image img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.elementor-testimonial-image-position-aside .elementor-testimonial-meta-inner { flex-direction: row; }
.elementor-testimonial-image-position-top .elementor-testimonial-meta-inner { flex-direction: column; }
.elementor-testimonial-name { font-weight: 600; }
.elementor-testimonial-job { font-size: .9em; opacity: .8; }

/* ---------- Görsel ---------- */

/* Görsel SATIR İÇİ kalır. `display:block` yazan sürüm satır kutusunun
   taban çizgisi boşluğunu yok ediyordu; kaynak eklenti `vertical-align`
   ile hizalıyor ve o boşluk duruyor. Ölçüldü: içeriği 22 px olan bir
   görsel widget'ı canlıda 25 px, bizde 22 px. */
.elementor-widget-image img { max-width: 100%; height: auto; vertical-align: middle; }
.elementor-widget-image { text-align: center; }

/* ---------- Duyarlı ---------- */

@media (max-width: 767px) {
	.e-con { flex-wrap: var(--flex-wrap-mobile, wrap); }
}

/* ---------- WooCommerce blokları ---------- */

/*
 * Ürün ızgarasına KENDİ düzenimizi DAYATMIYORUZ.
 *
 * Tema mağaza arşivinde `ul.products.columns-N` yapısını kendi kurallarıyla
 * düzenliyor (Astra ızgarayı, kart yüksekliğini, boşlukları oradan veriyor).
 * Üstüne kendi ızgaramızı yazınca kartlar temanınkinden farklı çıkıyordu —
 * ölçüldü: kart yüksekliği 485 px yerine 753 px oluyordu.
 *
 * Bu yüzden yalnızca temanın hesabını bozan taşmayı sınırlıyoruz; düzenin
 * kendisi temaya ait.
 */
.mevv-urunler > .products { margin-block: 0; }

.mevv-kategori-liste {
	display: grid;
	grid-template-columns: repeat(var(--mevv-sutun, 4), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mevv-kategori-bag { display: block; text-decoration: none; color: inherit; }
.mevv-kategori-gorsel img { width: 100%; height: auto; display: block; }
.mevv-kategori-baslik { margin-block: 12px; text-align: center; }
.mevv-kategori-sayi { opacity: .65; margin-inline-start: 6px; }

/*
 * Kaydırıcı: yerel scroll-snap. JavaScript yalnızca okları ve otomatik
 * oynatmayı yönetir; kapalıyken liste hâlâ yatay kaydırılabilir — dış
 * kütüphane paketlemeden, JS'siz de bozulmadan çalışır.
 */
.mevv-kaydirici { position: relative; }
.mevv-kaydirici .mevv-kategori-liste {
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mevv-sutun, 4) - 1) * 24px) / var(--mevv-sutun, 4));
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.mevv-kaydirici .mevv-kategori-liste::-webkit-scrollbar { display: none; }
.mevv-kaydirici .mevv-kategori { scroll-snap-align: start; }
.mevv-ok {
	position: absolute;
	top: 40%;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: #fff;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .85;
}
.mevv-ok:hover { opacity: 1; }
.mevv-ok-geri  { inset-inline-start: -20px; }
.mevv-ok-ileri { inset-inline-end: -20px; }
.mevv-ok[hidden] { display: none; }

@media (max-width: 1024px) {
	.mevv-kategori-liste { grid-template-columns: repeat(min(var(--mevv-sutun, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.mevv-izgara .mevv-kategori-liste { grid-template-columns: repeat(min(var(--mevv-sutun, 4), 2), minmax(0, 1fr)); }
	.mevv-kaydirici .mevv-kategori-liste { grid-auto-columns: 70%; }
	.mevv-ok { display: none; }
}

/*
 * Sade kart: yalnızca görsel, başlık ve fiyat.
 *
 * Fazlalıklar GİZLENİYOR, markup'tan çıkarılmıyor — WooCommerce ve tema
 * kancaları o düğümlerin varlığına güveniyor (sepete ekleme, hızlı bakış,
 * üçüncü parti eklemeler). Kaldırsaydık sepete ekleme davranışı bozulurdu.
 */
.mevv-kart-sade li.product .star-rating,
.mevv-kart-sade li.product .woocommerce-product-details__short-description,
.mevv-kart-sade li.product .ast-on-card-button,
.mevv-kart-sade li.product .ast-quick-view-trigger,
.mevv-kart-sade li.product > .button,
.mevv-kart-sade li.product .add_to_cart_button:not(.ast-on-card-button),
.mevv-kart-sade li.product .added_to_cart {
	display: none !important;
}
/*
 * Sade kartta tipografi BİZE aittir.
 *
 * Tema, mağaza kartı başlığını arşiv bağlamına kapsıyor; sıradan bir
 * sayfaya konan üründe o kural tutmuyor ve başlık gövde h2'sine düşüyor
 * (ölçüldü: 16 px yerine 42 px, kart 400 px yerine 713 px).
 *
 * `tema` modunda buna KARIŞMIYORUZ — orada tema ne diyorsa o. Sade mod
 * kullanıcının açıkça "kompakt kart istiyorum" demesi; boyutu burada
 * belirlemek o isteğin parçası.
 */
/* Ölçüler kaynak eklentinin kompakt kartından alındı (1440 px, 4 sütun):
   özet kutusu dolgusu 16px, başlık satır yüksekliği 1,2 ve alt boşluk 8px,
   düğme dolgusu 10px/16px. Tema modunda hiçbirine karışılmaz. */
.mevv-kart-sade li.product .astra-shop-summary-wrap,
.mevv-kart-sade li.product .summary { padding-block: 16px; }

.mevv-kart-sade li.product .woocommerce-loop-product__title,
.mevv-kart-sade li.product h2,
.mevv-kart-sade li.product h3 {
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 500;
	margin-block: 0 8px;
}
.mevv-kart-sade li.product .price { font-size: 1rem; }
.mevv-kart-sade li.product img { margin-block-end: 0; }

/* Düğme kartın içinde akışta durur ve kaynağınkiyle aynı dolguyu alır.
   Tema düğmeyi görselin üstüne mutlak konumlayabiliyor; sade kartta
   kaynak eklenti gibi özet kutusunun altında akıyor. */
/* Düğme `inline-block` olmalı. Tema onu satır içi bırakıyor; satır içi bir
 * ögede dikey dolgu kutu yüksekliğine EKLENMİYOR, düğme 40 px yer kaplarken
 * kart 0 px uzuyordu. Ölçüldü: özet kutusu 90 px, kaynakta 179 px. */
.mevv-kart-sade li.product a.button,
.mevv-kart-sade li.product button.button {
	display: inline-block;
	padding: 10px 16px;
	line-height: 1.3;
	margin-block: 8px;
}

/* Kategori etiketi kaynağın kompakt kartında VAR (18 px + 6,8 px alt boşluk);
 * gizlediğimiz sürüm kartı o kadar kısaltıyordu. */
/* Kategori etiketi kaynağın kompakt kartında VAR ve küçük punto:
 * ölçüldü, satır yüksekliği 18 px (12 px × 1,5). Gövde puntosunda
 * bıraksaydık 24 px olurdu. */
.mevv-kart-sade li.product .ast-woo-product-category {
	display: block;
	font-size: 0.75rem;
	line-height: 1.5;
	margin-block-end: 6.8px;
}

/* Görsel kutusunun alt boşluğu özet kutusunun dolgusuyla çakışıyor;
 * kaynakta 0. */
.mevv-kart-sade li.product .astra-shop-thumbnail-wrap { margin-block-end: 0; }

/* Satır arası. Kaynakta kartlar arasında 35 px var; ızgara boşluğumuz
   20 px'ti ve beş satırda 75 px eksik veriyordu. */
.mevv-kart-sade ul.products { row-gap: 35px; }

/* Sütun sayısı kırılım noktasına göre.
 *
 * Tema ızgarayı `columns-N` sınıfıyla kuruyor ama tek bir masaüstü değeri
 * var; kaynak eklenti mobilde 1 sütuna düşüyor. Ölçüldü: mobilde ürün
 * ızgaramız 3.484 px, kaynağınki 10.360 px.
 *
 * Özgüllük ölçülerek belirlendi. Astra'nın kuralı
 *   .ast-container .woocommerce ul.products:not(.elementor-grid)
 * yani (0,4,1). Sınıfı üç kez yinelemek (0,5,1) ile BERABERE kalır ve
 * sonucu yükleme sırası belirlerdi; dört kez yinelemek (0,6,1) sıradan
 * bağımsız kazanır. `!important` kullanılmıyor — müşterinin kendi özel
 * CSS'ini de ezerdi. */
.mevv-urunler.mevv-urunler.mevv-urunler.mevv-urunler ul.products {
	grid-template-columns: repeat(var(--mevv-sutun, 4), 1fr);
}
@media (max-width: 1024px) {
	.mevv-urunler.mevv-urunler.mevv-urunler.mevv-urunler ul.products {
		grid-template-columns: repeat(var(--mevv-sutun-tablet, 2), 1fr);
	}
}
@media (max-width: 767px) {
	.mevv-urunler.mevv-urunler.mevv-urunler.mevv-urunler ul.products {
		grid-template-columns: repeat(var(--mevv-sutun-mobil, 1), 1fr);
	}
}

/* ================= Yalnızca ekran okuyucu metni =================
 *
 * Temanın `screen-reader-text` tanımına GÜVENMİYORUZ: her temada yok ve
 * bazılarında `display:none` ile yazılmış — o hâlde ekran okuyucu da
 * okumaz ve "gizli metinle adlandırdığımız" bağlantı adsız kalırdı.
 * `clip-path` kalıbı metni görsel olarak kaldırır, erişilebilirlik
 * ağacında bırakır. Sınıf iki kez yazıldı: temanın kendi (bozuk) tanımı
 * daha özgülse onu geçmek için — `!important` değil, çünkü o müşterinin
 * kendi düzenlemesini de ezerdi. */
.mevv-gizli-metin.mevv-gizli-metin {
	/* `display` de BASILIYOR: bu sınıfın yanında temanın kendi
	   `screen-reader-text` adı da duruyor (temalar ona kendi boşluk ve
	   yazı tipi kurallarını yazsın diye) ve o adı `display:none` ile
	   tanımlayan temalar var. Bizim kuralımız `display` yazmasaydı
	   temanınki geçerli kalır, metin ekran okuyucudan da gizlenir ve
	   adlandırdığımızı sandığımız bağlantı adsız kalırdı. */
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ================= İçerik ızgarası =================
 *
 * Sütun sayısı KIRILIM NOKTASINA GÖRE değişiyor ve sınırlar stil
 * motorunun `MEDYA` sabitiyle AYNI (tablet ≤1024, mobil ≤767). Üçüncü bir
 * sınır uydursaydık ızgara bir genişlikte, aynı bloğun dolgusu ve
 * tipografisi başka bir genişlikte değişirdi. */
.mevv-icerik-izgarasi { display: block; }

.mevv-izgara-liste {
	display: grid;
	grid-template-columns: repeat(var(--mevv-sutun, 3), minmax(0, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) {
	.mevv-izgara-liste { grid-template-columns: repeat(var(--mevv-sutun-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.mevv-izgara-liste { grid-template-columns: repeat(var(--mevv-sutun-mobil, 1), minmax(0, 1fr)); }
}

/* Kart. `position: relative` bağlantı kaplaması için ZORUNLU — kaldırılırsa
   kaplama en yakın konumlanmış ataya, yani sayfanın tamamına yayılır ve
   sayfadaki her tıklama son karta gider. */
.mevv-izgara-oge {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mevv-izgara-gorsel { margin: 0 0 12px; }
.mevv-izgara-gorsel img { display: block; width: 100%; height: auto; }

.mevv-izgara-baslik { margin: 0 0 8px; }

/* KARTIN TAMAMI TIKLANABİLİR — ikinci bir bağlantı basmadan.
 *
 * Karta görsel için bir, başlık için bir, "devamını oku" için bir bağlantı
 * koymak fareyle kullanan için üç hedef, klavyeyle gezen için ÜÇ AYRI
 * DURAK ve ekran okuyucu için aynı yazının ÜÇ KEZ okunması demek. Onun
 * yerine tek bağlantı var ve `::after` ile kartı kaplıyor: tıklama alanı
 * büyük, erişilebilirlik ağacında tek bir adlandırılmış bağlantı. JavaScript
 * gerekmiyor. */
.mevv-izgara-bag { color: inherit; text-decoration: none; }
.mevv-izgara-baslik .mevv-izgara-bag::after,
.mevv-izgara-gorsel .mevv-izgara-bag::after,
.mevv-izgara-devam .mevv-izgara-bag::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Kaplamanın kendisi tıklanabilir olmalı ama üstündeki gerçek
	   bağlantıları örtmemeli; onlar `z-index: 1` ile yukarıda duruyor. */
	z-index: 0;
}

/* Odak halkası KARTIN TAMAMINI çevreliyor. Bağlantı görsel olarak yalnızca
   başlık kadar yer kaplıyor ama tıklama alanı kart; odak göstergesi tıklama
   alanını göstermezse klavyeyle gezen kişi neye bastığını göremez.
   Halka KAPLAMANIN kendisine çiziliyor, karta değil: kart üzerinde
   `:focus-within` kullansaydık kartın içindeki terim bağlantısına
   odaklanınca da kartın tamamı halkalanır ve odağın gerçekte nerede
   olduğu kaybolurdu. */
.mevv-izgara-bag:focus-visible::after { outline: 2px solid currentColor; outline-offset: 4px; }

.mevv-izgara-ustveri {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: .85em;
	opacity: .75;
	margin-bottom: 8px;
}
.mevv-izgara-ozet { margin: 0 0 10px; }

/* Terim bağlantıları kaplamanın ÜSTÜNDE: başka bir hedefe (kategori
   arşivine) gidiyorlar ve kaplamanın altında kalsalardı tıklanamazlardı. */
.mevv-izgara-terimler { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .85em; }
.mevv-izgara-terim { position: relative; z-index: 1; }

/* Kart gövdesi de esnek sütun: "devamını oku" işareti `margin-top: auto`
   ile en alta yaslanıyor ve farklı uzunluktaki özetlere rağmen bir satırdaki
   tüm kartlarda aynı hizada duruyor. Gövde esnek olmasaydı `auto` hiçbir şey
   yapmaz, işaret metnin hemen altına yapışırdı. */
.mevv-izgara-govde { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mevv-izgara-devam { display: block; margin-top: auto; padding-top: 8px; }
.mevv-izgara-bos { margin: 0; }

/* ---------- Döngü kartı (kullanıcının kendi şablonu) ----------
 *
 * Dahili kart dikey ESNEK KUTU: "devamını oku" işaretini `margin-top:auto`
 * ile en alta yaslamak ve farklı uzunluktaki özetleri hizalamak için. Kart
 * şablonunda böyle bir sözleşme YOK — içeride kullanıcının kendi
 * kapsayıcıları var ve onlar kendi düzenlerini kuruyor. Esnek kutuda
 * bırakılsaydı tek çocuklu bir şablon hücreyi doldurmak için gerilir, çok
 * çocuklu olan da kullanıcının belirlediği yüksekliklerden sapardı.
 *
 * `position: relative` DEVAM EDİYOR (`.mevv-izgara-oge`den): kullanıcı
 * şablonuna konumlanmış bir öge (rozet, etiket) koyarsa kartın kendisine
 * göre konumlansın, sayfanın tamamına göre değil. */
.mevv-dongu-oge { display: block; }

/* ---------- Sayfalama ---------- */
.mevv-izgara-sayfalama {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}
.mevv-izgara-sayfalama .page-numbers {
	display: inline-block;
	min-width: 2.25em;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	/* Kenarlık rengi metinle aynı olduğu için soluk; şu anki sayfa
	   dolgusuyla ayrışıyor. Renk ayarları stil motorundan geliyor. */
	opacity: .7;
}
.mevv-izgara-sayfalama .page-numbers.current { opacity: 1; font-weight: 600; }
.mevv-izgara-sayfalama .page-numbers.dots { border: 0; opacity: .5; }
.mevv-izgara-sayfalama a.page-numbers:hover,
.mevv-izgara-sayfalama a.page-numbers:focus-visible { opacity: 1; }

/* ================= Arama formu =================
 *
 * Tek satır: alan esner, düğme kendi genişliğinde kalır. Mobilde de tek
 * satır — arama kutusunu alt alta kırmak, iki satır yüksekliğinde bir
 * kontrol demek ve başlık şeridinde yer kalmaz. */
.mevv-arama { margin: 0; }
.mevv-arama-kutu { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.mevv-arama-alan {
	flex: 1 1 auto;
	min-width: 0;
	/* Tarayıcı varsayılanı `size="20"` yüzünden alanı ~180 px'e sabitliyor;
	   `min-width: 0` olmadan esnek kutu içinde küçülemiyor. */
}
.mevv-arama-dugme {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
}
/* İkon düğmede kare oran: metin olmadığı için içerik genişliği sıfıra
   yakın kalır ve düğme ince bir çizgiye dönerdi. */
.mevv-arama-dugme-ikon { min-width: 2.75em; }
.mevv-arama-simge { flex: 0 0 auto; }

.mevv-arama-alan:focus-visible,
.mevv-arama-dugme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Etiket görünür bırakıldığında kutunun ÜSTÜNDE kendi satırında durur.
   `flex: 1 0 100%` ile tam satır kaplıyor; düz `display:block` esnek kutu
   içinde satır kırmaz ve etiket alanın soluna sıkışırdı. */
.mevv-arama-etiket:not(.mevv-gizli-metin) { flex: 1 0 100%; }