/* ============================================================================
 * Kataloglar (page-kataloglar.php) — catalog cover card grid. Only enqueued
 * on this page; head/breadcrumb/container come from the shared
 * product-archive.css base (see that file's own comment block for the
 * >=1601 / 1101-1600 / <=1100 container width formulas this page inherits).
 *
 * PROVENANCE NOTE: this page has no XD artboard — it was skipped entirely
 * from the original Tada.xd reference (see the project brief, Section 2).
 * The only visual source is a single reference screenshot supplied with the
 * build task, not an inspectable XD/design-reference geometry export. Measurements
 * below are read off that screenshot as closely as possible (card box
 * ~361x451 -> simplified to a clean 4:5 cover ratio, ~30px column gap) and
 * are NOT pixel-exact XD values — TODO: confirm gap/radius/title size
 * against a real design handoff once one exists, per the Render
 * Verification Workflow.
 * ==========================================================================*/

.product-archive--kataloglar .product-archive__empty {
	margin: 0 0 40px;
}

.katalog-grid {
	display: grid;
	/* KOLON SAYISI KAYIT SAYISINA UYAR — sabit 4 değil.
	   Sabit `repeat(4, 1fr)` iken 2 katalog yayınlandığında iki kart solda
	   kalıyor, sağdaki iki kolon boş duruyordu (ölçüldü: 1920'de ızgara
	   1640px, kartlar 387.5px, sağda ~805px boşluk).
	   `auto-fit` boş track'leri toplar: 2 kayıt → 2 kolon, 3 → 3, 4 → 4.
	   `minmax(180px, 1fr)`: taban 180px, çünkü 1101px'te ızgara 892px ve
	   dört kolon ancak 200.5px'e sığıyor — 280px taban orada kolon sayısını
	   2'ye düşürüp mevcut düzeni bozuyordu (ölçüldü). `1fr` sayesinde dolu
	   track'ler kalan alanı paylaşır, yani DÖRT katalog hâli her masaüstü
	   genişliğinde bugünküyle birebir aynı (1920'de 387.5px, 1440'ta 285.25px,
	   1101'de 200.5px).
	   Kayıt/ID/nth-child'a bağlı kural yok; kaç katalog yayınlanırsa
	   düzen kendiliğinden uyar. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	justify-content: center;
	gap: 56px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.katalog-card {

	min-width: 0;
}

.katalog-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
a.katalog-card__link:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: 4px;
	border-radius: 18px;
}

/* Cover: YATAY kutu — oran GERÇEK kapaklardan türedi.
   Aktif iki kaydın kapağı 2560×1920, yani tam 4:3 yatay. Kutu 4:5 PORTRE
   olduğu için `object-fit: cover` kapağın solundan/sağından geniş bir şerit
   kesiyor ve kart gereğinden uzun çıkıyordu — owner'ın "çok uzun görseller"
   şikâyeti buydu (ölçüldü: medya 387.5×484.4).
   4/3'e geçince kutu kapağın oranıyla birebir örtüşüyor: KIRPMA YOK,
   bozulma yok, kart belirgin biçimde yatay ve alçak.
   Daha da yatay bir kompozisyon istenirse tek satır: 3/2 veya 16/9 — o
   durumda `object-fit: cover` üstten/alttan hafif kırpar. */
.katalog-card__media {
	display: block;
	position: relative;
	width: 100%;
	/* 4/3 → 16/9: owner "kartlar hâlâ dikey olarak uzun" dedi. 3/2 ölçüldü
	   ama kart yalnızca 580→526px düşüyordu (%9) — kompozisyon gözle hâlâ
	   uzundu. 16/9'da kart 580→460px (%21). Kırpma ÖLÇÜLDÜ: kapaktaki eser
	   (kitaplar + gölge) görüntü yüksekliğinin yalnızca %61,5'ini kaplıyor,
	   üstte %17,6 / altta %20,9 boş gri var. 16/9 kutusu bu boşluktan
	   kesiyor; kitaplardan ve "tada" markasından TEK PİKSEL kesilmiyor.
	   Bu yüzden `contain` + boş bantlara gerek yok. */
	aspect-ratio: 16 / 9;
	background: var(--tada-gray-100);
	border-radius: 16px;
	overflow: hidden;
}
.katalog-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Kırpma ekseni: kutu merkezi (%50) eseri yukarı kaydırıyordu — render'da
	   kitapların üst payı 33px, alt payı 81px ölçüldü. %30'da paylar 57/57'ye
	   eşitleniyor (ölçüldü), yani kitaplar kutuda tam ortalanıyor ve kesilen
	   alan yine sadece boş gri kalıyor. */
	object-position: 50% 30%;
	display: block;
}
/* Hover/focus: reused verbatim from the sitewide .product-card system
   (assets/css/pages/product-archive.css, ".product-card__image"/
   ".product-card__title" hover rules) — same transition timing, same scale
   factor, same "title turns Tada red" behaviour, same hover/pointer-fine +
   reduced-motion gating. Not a new hover design. The scale lives on the
   image only, inside .katalog-card__media's own overflow:hidden box (see
   above), so the zoom can never spill past the card's rounded corners or
   shift the grid geometry. */
@media (hover: hover) and (pointer: fine) {
	.katalog-card__image {
		transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	}
	a.katalog-card__link:hover .katalog-card__image,
	a.katalog-card__link:focus-visible .katalog-card__image {
		transform: scale(1.07);
	}
	a.katalog-card__link:hover .katalog-card__title,
	a.katalog-card__link:focus-visible .katalog-card__title {
		color: var(--tada-red-active);
	}
}
@media (prefers-reduced-motion: reduce) {
	.katalog-card__image { transition: none; }
	a.katalog-card__link:hover .katalog-card__image,
	a.katalog-card__link:focus-visible .katalog-card__image { transform: none; }
}

.katalog-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 24px 0 0;
	max-width: 100%;
	min-height: 2.6em;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(15px, 1.05vw, 18px);
	line-height: 1.3;
	color: var(--tada-black);
	transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

/* Already Tada red at rest (matches product-card__weight's own always-red
   treatment) — no separate hover shade invented for it; the shared image
   zoom + title color-shift above already carry the hover feedback. */
.katalog-card__view {
	display: block;
	margin: 12px 0 0;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--tada-red-active);
}

/* ============================================================================
 * Responsive — tablet + mobil.
 * ==========================================================================*/
/* Az kayıtta kolon genişlediğinde kapak ölçüsüzce büyümesin: 4 katalogda
   track zaten 387.5px olduğu için bu tavan hiç devreye girmez (düzen aynı),
   2 katalogda kart 500px'te durur ve kolonunda ortalanır.
   YALNIZ masaüstü: tablet/mobil sabit 2 (≤360'ta 1) kolon kullanıyor ve
   orada track zaten dar; tavanı oraya taşımak kabul edilmiş tablet kartını
   8px daraltıyordu (ölçüldü). */
@media (min-width: 1101px) {
	/* Yatay karta geçince kart daha geniş olabilir: 2 kayıtta 2×640+30=1310px,
	   1640px'lik ızgarada ortalı ve rahat; kartın toplam boyu ~%25 kısaldı,
	   başlık ve "Görüntüle" ekranda kalıyor. 4 kayıtta track zaten 387.5px
	   olduğu için bu tavan devreye girmez. */
	.katalog-card { max-width: 640px; width: 100%; margin-inline: auto; }

	/* BÜYÜK EKRAN — kartların birbirinden kopmasını önler.
	   Sorun: track `1fr` olduğu için ekran genişledikçe büyüyordu (1920 ve
	   2560'ta 805px ölçüldü). Kart 640px'te kapalı olduğundan track'in
	   ortasında kalıyor ve iki kart arasındaki görünen boşluk 30px yerine
	   ~195px oluyordu.
	   Çözüm track'e değil IZGARANIN GENİŞLİĞİNE tavan koymak: kaç kart
	   yayınlandığı `:has()` ile okunur ve ızgara tam o kadar kartın sığacağı
	   genişlikte durur, sonra ortalanır. Track hâlâ `1fr` olduğu için kolon
	   SAYISI değişmez — 1440'ta minmax(180px,640px) denendiğinde auto-fit
	   sayımı tavana göre yapıp tek kolona düşüyordu (ölçüldü), bu yol o
	   yan etkiyi taşımaz.
	   13.3": 1440'ta ızgara zaten 1231px < 1310px tavan → hiç devreye girmez,
	   iki kart 600.5px olarak aynen kalır (ölçüldü). */
	.katalog-grid { margin-inline: auto; }
	.katalog-grid:has(> .katalog-card:nth-child(1):last-child) { max-width: 640px; }
	.katalog-grid:has(> .katalog-card:nth-child(2):last-child) { max-width: 1310px; }
	.katalog-grid:has(> .katalog-card:nth-child(3):last-child) { max-width: 1980px; }
}

@media (max-width: 1100px) {
	.katalog-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.katalog-card__title { font-size: 16px; margin-top: 20px; }
}

@media (max-width: 767px) {
	.katalog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
	.katalog-card__media { border-radius: 12px; }
	a.katalog-card__link:focus-visible { border-radius: 12px; }
	.katalog-card__title { font-size: 14px; margin-top: 14px; -webkit-line-clamp: 3; min-height: 3.6em; }
	.katalog-card__view { font-size: 13px; margin-top: 8px; }
}

/* Very small screens only: drop to a single, more readable column — same
   failsafe threshold product-archive.css uses for its own product grid. */
/* Tek kolon eşiği 360 → 480. Kart YATAY olduğu için iki kolonda 390px'te
   medya 171×128px'e düşüyordu (ölçüldü) — kapak okunmuyordu. Tek kolonda
   aynı genişlikte medya 358×268px oluyor. */
@media (max-width: 480px) {
	.katalog-grid { grid-template-columns: 1fr; gap: 24px; }
	.katalog-card__title { -webkit-line-clamp: 2; min-height: 2.6em; }
}

/* ============================================================================
 * Scroll reveal — per-card ordering (Faz 4).
 *
 * Each .katalog-card is its own `data-animate="fade-up"` element (see
 * template-parts/catalogs/archive.php), not a stagger child, so a card below
 * the fold waits for its own scroll-in instead of queueing behind the row
 * above it. That leaves only the within-a-row offset to express, and the
 * shared keyframe in main.css reads `--tada-anim-delay`, so it is set here,
 * per breakpoint, from the column count this grid ACTUALLY renders — measured
 * live on the page (getComputedStyle grid-template-columns + distinct card
 * left offsets), not assumed:
 *   1440 -> 4 columns (cards at x=104.5 / 419.75 / 735 / 1050.25) -> 0/80/160/240ms
 *   820  -> 2 columns (cards at x=24 / 422)                       -> 0/100ms
 *   390  -> 2 columns (cards at x=16 / 203)                       -> 0/80ms
 * The column tiers below mirror the layout tiers above exactly: >=1101px is
 * the 4-column grid, 768-1100px the tablet 2-column grid, 361-767px the mobile
 * 2-column grid, and <=360px the single-column failsafe — which gets no rule
 * at all, because one column per row means there is no row-mate to offset
 * against.
 *
 * `:nth-child(4n+k)` / `:nth-child(even)` are exactly "the k-th card of a row"
 * here: equal columns, no card spans or reorders, so column position follows
 * source order. Mobile keeps the shortest rhythm (80ms, one step only) — no
 * long chain, per the brief. 240ms max, well inside the shared 650ms stagger
 * budget.
 *
 * Nothing here touches layout — only animation-delay — and only the <li>
 * animates: the cover gets no zoom/rotate, the "Görüntüle" line no bounce.
 * The <a> itself is never a reveal target, so it carries no transform,
 * opacity or will-change of its own at any point, before or after the card
 * animation (main.js's `.is-anim-done` clears those on the <li> too).
 * ==========================================================================*/
@media (min-width: 1101px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 2) { --tada-anim-delay: 80ms; }
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 3) { --tada-anim-delay: 160ms; }
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 4) { --tada-anim-delay: 240ms; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(even) { --tada-anim-delay: 100ms; }
}

@media (min-width: 361px) and (max-width: 767px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(even) { --tada-anim-delay: 80ms; }
}