/* ============================================================================
 * Tarifler sayfası (page-tarifler.php) — yalnız bu sayfada enqueue edilir
 * (is_page('tarifler')); ana sayfa/global CSS'e sızmaz. Container/başlık/
 * breadcrumb/boş-durum/pagination `.product-archive*` sınıflarından aynen
 * miras alınır (tada-product-archive bağımlılığı ile yüklenir) — burada
 * yeniden tanımlanmaz. `.recipe-card*` hover/gradient/radius/transition
 * kuralları da main.css'te site geneli yüklüdür.
 *
 * Kategori sekmeleri KENDİ sınıfını TANIMLAMAZ — ana sayfa "Tada Mutfak"
 * bölümünün `.home-recipes__tabs` / `.home-recipes__tab` kurallarını
 * (main.css, site geneli yüklü) birebir miras alır; bkz.
 * template-parts/recipe/category-tabs.php'nin docblock'u. Yükseklik/padding/
 * border/radius/font/renk/hover/gap/responsive-sarma tamamen aynı CSS
 * kuralından geliyor — burada yalnızca Tarifler bağlamına özgü konumlama
 * (sekmeler → grid boşluğu) ve AJAX yükleme/hata durumları eklenir.
 *
 * Ölçüler references/Tada.xd "Tarifler" artboard'ından (native 1920,
 * artboard-663bec5a-06c3-4720-9d29-d091a8e746ed): H1 38px ExtraBold (zaten
 * .product-archive__title ile birebir eşleşiyor, ek kural gerekmedi), kart
 * kutusu 526×400 @ 1640px container (3×526 + 2×31 = 1640 → grid sütun/gap
 * matematiği burada birebir kullanılıyor), yatay gap 31px, dikey gap 30px.
 * ==========================================================================*/

/* ---- Kategori sekmeleri konumlama (kendi görsel dili main.css'ten) ---- */
.product-archive--tarifler .home-recipes__tabs {
	margin: 0 0 40px;
}

/* ---- Tarif grid'i (3 kolon @ desktop, gap 30/31 — XD'den) ---- */
.tarifler-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 31px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- AJAX yükleme durumu ----
 * Ana sayfanın "Tada Mutfak" kategori/panel geçişinde HİÇBİR fade/opacity
 * animasyonu yok (main.js: activatePanel() sınıf/[hidden] değiştirir, CSS
 * transition yok) — bu yüzden burada da yeni bir fade eklenmiyor (revizyon
 * talebi: "Ana sayfada grid/kart fade animasyonu yoksa liste sayfasına da
 * yeni fade ekleme"). `aria-busy="true"` yalnızca semantik/erişilebilirlik
 * sinyali (ekran okuyucu + data-tarifler-status canlı bölgesi) ve çift
 * tıklamayı engelleyen `pointer-events: none` için kullanılıyor — görsel bir
 * geçiş/animasyon değil, bu yüzden transition tanımlanmıyor.
 */
.tarifler-grid-region[aria-busy="true"] {
	pointer-events: none;
}

/* ---- Hata mesajı ----
 * assets/js/tarifler.js başarısız bir istekte mevcut grid'i koruyup bunu
 * ekler (section 5: "mevcut grid korunmalı ve erişilebilir hata mesajı
 * gösterilmeli"). .product-archive__empty ile aynı görsel dil.
 */
.tarifler-grid-region__error {
	margin: 16px 0 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--tada-red);
}

/* ============================================================================
 * Responsive — tablet + mobil. Desktop (>=1101px) grid above tracks the
 * shared .product-archive__inner container (same formula as the product/
 * factory archives). Columns: 2 (tablet) / 1 (mobile) — task explicitly
 * requires exactly 3 columns on desktop and exactly 1 on mobile; the 2-column
 * tablet tier is the "alan yeterliyse" middle ground, reusing the product
 * archive's own tablet/mobile breakpoints (1100/768) rather than inventing
 * new ones. `.recipe-card__link` height at each tier is already governed by
 * the shared main.css rules (300px @1101-1600, 400px @1601+, no separate
 * rule needed here) — this block only changes column count/gap.
 * ==========================================================================*/
@media (max-width: 1100px) {
	.product-archive--tarifler .home-recipes__tabs { margin: 0 0 28px; }
	.tarifler-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

@media (max-width: 768px) {
	.tarifler-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Mobil kategori şeridi (<=767px) ----
 * Yalnızca Tarifler sayfasına özgü (.product-archive--tarifler ile scope'lu)
 * — .home-recipes__tabs/.home-recipes__tab main.css'te SİTE GENELİ (ana
 * sayfa dahil) yüklü paylaşılan sınıflar; burada onları DEĞİŞTİRMİYORUZ,
 * yalnızca bu tek sayfada, bu tek breakpoint'te DAHA ÖZGÜL bir override
 * ekliyoruz. Ana sayfanın kendi <=1100px mobil davranışı (main.css:
 * flex-wrap:wrap, justify-content:center) bu sayfada aynı kalır — hiçbir
 * regresyon yok.
 *
 * Desen, projede zaten onaylı olan aynı "tek satır + yatay kaydırma +
 * gizli scrollbar" bileşeninin (assets/css/pages/product-detail.css:
 * .product-detail__tablist, assets/js/product-detail.js: scrollIntoView)
 * birebir kopyası — ikinci, farklı bir yatay-kaydırma sistemi değil.
 * Tab'ların kendi yükseklik/padding/radius/font/renk/hover/altçizgisiz
 * görünümü main.css'ten aynen miras alınmaya devam ediyor; burada yalnızca
 * satır davranışı (wrap→nowrap) ve hizalama (center→flex-start) değişiyor.
 * `gap: 8px` ana sayfanın kendi <=1100px değeriyle birebir aynı (main.css)
 * — göz kararı yeni bir değer değil.
 */
@media (max-width: 767px) {
	.product-archive--tarifler .home-recipes__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline-end: 16px;
	}
	.product-archive--tarifler .home-recipes__tabs::-webkit-scrollbar {
		display: none;
	}
	.product-archive--tarifler .home-recipes__tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-archive--tarifler .home-recipes__tabs {
		scroll-behavior: auto;
	}
}