/* ============================================================================
 * Satış Noktalarımız sayfası (page-satis-noktalari.php). Başlık, breadcrumb ve
 * dış container product-archive.css'ten ORTAK gelir (aynı hizalama). Buradaki
 * ekler: kırmızı harita+metrik banner'ı ve 5 kolonlu beyaz logo grid'i.
 * XD "Satış Noktalarımız" artboard'undan (native 1920): banner 1641×380,
 * #9e262d; metrik sayısı 72px sarı (#f4c047), etiket 26px beyaz; grid 5 kolon,
 * kart 303×299, yatay gap 31, dikey gap 31.
 * ==========================================================================*/

/* ---- Banner (harita + metrikler) ---- */
.sales-points__banner {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.85fr 1fr;
	align-items: stretch;
	gap: 24px;
	min-height: clamp(230px, 20vw, 320px);
	margin: 0 0 48px;
	padding: 20px 64px;
	/* Halka pattern'i artık tek parça asset. Önceden burada iki radial-gradient
	   grubu ::before üzerinde çiziliyordu (taban + ≥1101 + ≤767 olmak üzere üç
	   ayrı blok, 7 gradient satırı) — hepsi kaldırıldı.
	   `background-color` fallback olarak duruyor: asset yüklenemezse veya
	   panelden `--sn-banner-bg` ile farklı bir renk verilirse zemin yine doğru.
	   `cover` bilinçli: asset oranı 3.567, banner oranı ~4.88 olduğu için
	   genişlik bağlayıcı eksen; halkalar daire kalıyor, fazlalık üstten/alttan
	   simetrik kırpılıyor. `100% 100%` KULLANILMADI — halkaları elipse
	   çevirirdi. Yuvarlak köşe ve kırpma bu kuralın kendi `border-radius` +
	   `overflow: hidden` değerlerinden gelmeye devam ediyor; asset'in dikdörtgen
	   varyantı (tada-red-rings-bg-flat.webp) tam da bunun için üretildi. */
	background-color: var(--sn-banner-bg, #9e262d);
	background-image: url("../../images/global/tada-red-rings-bg-flat.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 32px;
}
/* The map GIF has wide transparent padding around the actual Türkiye artwork,
   so it is shown as a background zoomed past that padding (background-size) and
   framed at the artwork's true aspect ratio — this fills the panel like the XD
   reference instead of floating small. The GIF still animates as a background. */
.sales-points__map {
	position: relative;
	z-index: 1;
	align-self: center;
	justify-self: start;
	width: 100%;
	max-width: 660px;
	max-height: 100%;
	aspect-ratio: 1173 / 513;
	background-image: var(--sn-map);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 164% auto;
}
.sales-points__metrics {
	position: relative;
	z-index: 1;
	align-self: center;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: clamp(20px, 2.2vw, 32px) clamp(26px, 3.2vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sales-points__metric {
	text-align: center;
}
.sales-points__metric-value {
	display: block;
	/* XD "Satış Noktalarımız" tipografisi Baloo 2. Font zaten temada tanımlı
	   (main.css @font-face, Baloo2-Regular/SemiBold/Bold/ExtraBold TTF) ve
	   about/degerlerimiz/product-detail/recipe-detail sayfalarında aynı
	   `"Baloo 2", Arial, sans-serif` biçiminde kullanılıyor — yeni dosya veya
	   yeni entegrasyon eklenmedi. 800 (ExtraBold) rakamların kalın/yuvarlak
	   görünümü için; product-detail.css'teki 72px Baloo 2 başlık da 800. */
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(38px, 3.9vw, 60px);
	line-height: 1.05;
	color: #f4c047;
}
.sales-points__metric-label {
	display: block;
	margin-top: 4px;
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(12px, 0.95vw, 16px);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--tada-white);
}

/* ---- Logo grid (5 kolon, beyaz kartlar) ---- */
.sales-points__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 31px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sales-point-card {
	/* XD 303×299'dan daha uzun: kart tabanı görsel referans çizgisine kadar
	   uzatıldı (desktop only — bkz. 1100px altı override). Genişlik/gap
	   değişmedi, yalnız yükseklik oranı arttı. */
	aspect-ratio: 303 / 360;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: 24px;
	overflow: hidden;
}
.sales-point-card__link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 18% 19%;
	box-sizing: border-box;
	text-decoration: none;
}
/* A handful of wide, visually-light logos get less horizontal padding so they
   fill more of the card and don't read small next to the compact/round ones. */
.sales-point-card--migros .sales-point-card__link,
.sales-point-card--carrefoursa .sales-point-card__link,
.sales-point-card--yemeksepeti .sales-point-card__link,
.sales-point-card--komagene .sales-point-card__link,
.sales-point-card--hakmar .sales-point-card__link,
.sales-point-card--metro .sales-point-card__link,
.sales-point-card--anpa-gross .sales-point-card__link,
.sales-point-card--happy-center .sales-point-card__link,
.sales-point-card--gokkusagi .sales-point-card__link,
.sales-point-card--snowy .sales-point-card__link {
	padding: 18% 8%;
}
.sales-point-card__link:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: -4px;
	border-radius: 24px;
}
.sales-point-card__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
	.sales-point-card__link:hover .sales-point-card__logo {
		transform: scale(1.06);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sales-point-card__logo { transition: none; }
	.sales-point-card__link:hover .sales-point-card__logo { transform: none; }
}

/* ============================================================================
 * Responsive.
 * - Large desktop (>=1601): banner + map scale up with the enlarged grid.
 * - Tablet (<=1100): banner stacks (map on top, metrics below); grid 4 -> 3.
 * - Mobile (<=767): smaller banner/map; grid 3 -> 2 (<=400).
 * ==========================================================================*/
/* Desktop (>1100): a medium-height band — shorter than the map's full natural
   height, but tall enough that the map (with all its arrows) reads complete and
   nothing looks cut. Map height-driven on the left, metrics on the right. */
@media (min-width: 1101px) {
	.sales-points__banner {
		/* Was `auto auto` (each column hugging its own content's natural
		   width — the map's width was purely height×aspect-ratio-derived,
		   which is why it read as narrow: it had no real reserved space of
		   its own to grow into). `minmax(0, Nfr)` columns instead partition
		   the banner's actual content width in a fixed 57%/43% share —
		   `gap` still guarantees a real minimum 40px separation between
		   them no matter the viewport, so the map genuinely can't overlap
		   the metrics column, it just gets a proportionally wider slot. */
		grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
		justify-content: space-between;
		min-height: 0;
		/* Controlled growth across the whole 1440–1920 desktop range (was frozen
		   at 282px past ~1567px, which read as too short / cropped-feeling with
		   the map + arrows). Floor keeps 1101–1366 unchanged in feel. */
		height: clamp(258px, 19vw, 336px);
		padding: clamp(24px, 1.9vw, 34px) 64px;
		gap: 40px;
	}
	.sales-points__map {
		/* Box shape stays locked to the artwork's true 1173:513 ratio
		   (base rule `aspect-ratio: 1173 / 513`, not overridden) so
		   `background-size: 164% auto` (base rule, also untouched) keeps
		   framing the full, uncropped artwork — the box is sized by WIDTH
		   alone via `max-width`, height auto-derives from the ratio, so
		   it can never be squashed or stretched off-ratio.
		   The card's own vertical padding (`clamp(24px, 1.9vw, 34px)` on
		   `.sales-points__banner`) was reserved as breathing room for
		   BOTH columns, but the map needs almost all of the banner's own
		   height to read as "large" at this fixed card height — so
		   `margin-block` pulls the box up into most of that padding
		   (reclaiming it, not changing the padding value itself), leaving
		   only a fixed 6px gap to the card's actual top/bottom edge.
		   `max-width` is sized to match exactly that same reclaimed
		   envelope (banner height minus the same 6px×2) so the box's
		   aspect-ratio-derived height never exceeds the space the negative
		   margin opened up. `width: 100%` (base rule, untouched) still
		   caps the result at the column's own width, so on very large
		   viewports where this formula could exceed the 57fr column, the
		   box simply stops at the column edge — it can't invade the
		   metrics column either way. */
		justify-self: center;
		margin-block: calc(-1 * clamp(24px, 1.9vw, 34px) + 6px);
		max-width: calc((clamp(258px, 19vw, 336px) - 12px) * 2.2865);
		/* Base rule's `max-height: 100%` resolves against the row's content
		   height (~219px) and was silently capping the aspect-ratio-derived
		   height below the `max-width` formula's target — decoupling width
		   and height back into a non-1173:513 box (the exact shape-mismatch
		   that causes cropping). Must be lifted here so height is driven
		   purely by width × aspect-ratio, matching `max-width` above. */
		max-height: none;
	}
	.sales-points__metrics {
		/* Taban kuraldaki `repeat(auto-fit, minmax(120px, 1fr))` masaüstünde
		   4 metriği 2×2 DEĞİL 3+1 diziyordu: üç tanesi üst satıra, dördüncüsü
		   tek başına alt satıra sola yaslı düşüyordu (ölçüldü: 1920'de
		   3 × 129.3px kolon, dördüncü öğe y=451.8'de yalnız).
		   Ayrıca `minmax(120px, …)` bloğa 3 × 120px + 2 × gap = 430px'lik SERT
		   bir min-content tabanı veriyordu; bu taban 43fr'lik metrik kolonundan
		   (1101'de 311px) taşıyor ve `justify-self: center` yüzünden iki yana
		   birden yayılıp haritanın üstüne biniyordu — 1101'de ölçülen örtüşme
		   −19.5px. `minmax(0, 1fr)` o sert tabanı kaldırıyor, `repeat(2, …)`
		   ise satırları 2×2 olarak sabitliyor; blok artık en uzun etikete göre
		   kendi içerik genişliğini alıyor, dolayısıyla kolonundan taşıması
		   yapısal olarak mümkün değil. max-width 500 → 560: 500px, 1920'deki
		   507.6px'lik doğal içerik genişliğini kesip etiketi taşıracaktı. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(20px, 2.2vw, 40px);
		row-gap: clamp(14px, 1.4vw, 26px);
		max-width: 560px;
		/* Base rule has no justify-self, so grid's default `stretch`
		   sizes the box to the column width then — because `max-width`
		   caps it below that — leaves the leftover space entirely on one
		   side (flush to the column's start/left edge) instead of
		   splitting it evenly. `center` splits it evenly on both sides. */
		justify-self: center;
	}
	/* XD ölçüleri (dosya başlığındaki tablo): rakam 72px, etiket 26px @1920.
	   Oranlar temanın kendi Baloo 2 rampalarından alındı — 72px için
	   degerlerimiz.css'teki `clamp(30px, 3.75vw, 72px)` (72/1920 = 3.75vw),
	   26px için recipe-detail.css'teki 26px tavanlı ölçek. Taban kuraldaki
	   60px/16px değerleri yalnızca masaüstünde geçersiz kılınıyor; ≤1100
	   blokları dokunulmadan kaldı. */
	.sales-points__metric-value { font-size: clamp(38px, 3.75vw, 72px); }
	.sales-points__metric-label { font-size: clamp(13px, 1.354vw, 26px); }
	}

@media (min-width: 1601px) {
	/* Height/vertical padding keep growing via the clamp() above; only the
	   horizontal padding and grid gap get the extra large-desktop breathing
	   room here. */
	.sales-points__banner { padding-left: 72px; padding-right: 72px; }
	.sales-points__grid { gap: 34px; }
}

@media (max-width: 1100px) {
	/* Tablet keeps the desktop side-by-side layout (map | metrics), with a
	   slightly larger metrics column and tighter gaps so labels still fit. */
	.sales-points__banner {
		grid-template-columns: 1.3fr 1fr;
		gap: 20px;
		padding: 20px 34px;
		margin-bottom: 40px;
	}
	.sales-points__metrics { gap: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 44px); }
	.sales-points__metric-value { font-size: clamp(30px, 4vw, 46px); }
	.sales-points__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	/* Desktop-only height increase (above) doesn't apply below 1100px. */
	.sales-point-card { aspect-ratio: 303 / 299; }
}

@media (max-width: 767px) {
/* Mobil arka plan: yeni dikey kart oranı ~1.04–1.10 (390'da 358×335.7). Ana
	   sayfanın onaylı mobil halka asset'i (720×842) burada da kullanılıyor —
	   `cover` ile %100 genişlik / %80–82 yükseklik görünüyor, iki halka odağı
	   da doğru köşelerde kalıyor. Ölçülen yoğunluk: harita bandı %1.97, metrik
	   bandı %1.36, orta eksen %0.04. İki mobil kırmızı kart (ana sayfa
	   sales-map ve bu banner) böylece aynı asset'i ve aynı tasarım dilini
	   paylaşıyor. Asset ORTAK — ana sayfa da onu kullandığı için dosyaya
	   dokunulmamalı. `no-repeat / center / cover` taban kuraldan geliyor.
	   ≥768 taban kuraldaki -flat.webp ile devam ediyor. */
	.sales-points__banner {
		background-image: url("../../images/global/tada-red-rings-bg-mobile.webp");
	}
	/* Mobile stacks: map centred on top, four metrics in a row below. */
	/* Mobilde artık masaüstü yatay banner'ın küçültülmüşü değil, kendi dikey
	   kartı: üstte ortalanmış harita, altında 2×2 metrik grid. Yükseklik
	   tamamen içerikten türüyor (`min-height: 0`, sabit yükseklik yok);
	   390'da ölçülen yığın 26 + 128.3 + 26 + 127.4 + 28 = 335.7px. */
	.sales-points__banner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 26px;
		min-height: 0;
		padding: 26px 16px 28px;
		border-radius: 22px;
		margin-bottom: 28px;
	}
	/* Harita panel iç genişliğinin %90'ı: yatay olarak güçlü ama kenarlara
	   yapışmıyor. `aspect-ratio` (taban kural, 1173/513) ve `background-size`
	   dokunulmadı, yani kırpma yok. */
	.sales-points__map { justify-self: center; width: 100%; max-width: 90%; }
	/* All four metrics in a single row; number on top, label on ONE line below
	   (font scales down so even the longest label fits without wrapping). The
	   grid stretches full width so the four columns are evenly spaced (without
	   this it shrinks to content and the short "Akaryakıt" drifts to the edge). */
	/* Dört metrik SABİT 2×2. `auto-fit` idi: 430–375'te dördü tek sıraya
	   sıkışıyor, 360'ta 3+1'e kırılıyordu ve etiketleri sığdırmak için font
	   8.4px'e kadar iniyordu. `repeat(2, minmax(0, 1fr))` dört genişlikte de
	   2×2 veriyor; hücre 390'da 78 → 155px'e çıktığı için tipografi de
	   okunaklı ölçüsüne dönebiliyor. */
	.sales-points__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; width: 100%; max-width: 100%; justify-self: stretch; }
	.sales-points__metric { display: block; text-align: center; }
	.sales-points__metric-value { font-size: clamp(26px, 8vw, 34px); }
	/* Single line even for the longest label ("Akaryakıt İstasyonu"): the size
	   tracks the column width (~vw) so it shrinks just enough to never wrap. */
	/* `nowrap` kaldırıldı: tek sıraya sıkıştırma zorunluluğu bitti, etiket
	   gerekirse doğal olarak iki satıra inebilir. Ölçülen: 390'da 8.385 →
	   12.48px, 360'ta 8 → 11.52px; dördü de tek satırda kalıyor. */
	.sales-points__metric-label { margin-top: 4px; font-size: clamp(11px, 3.2vw, 14px); line-height: 1.2; white-space: normal; }
	.sales-points__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.sales-point-card { border-radius: 18px; }
	.sales-point-card__link { padding: 16%; }
}

@media (max-width: 400px) {
	.sales-points__grid { grid-template-columns: repeat(2, 1fr); }
	/* `.sales-points__map { max-width: 320px }` KALDIRILDI: yukarıdaki ≤767
	   kuralı artık oransal %90 veriyor ve bu blok kaynak sırasında sonra
	   geldiği için onu ezip 390/375/360'ta haritayı %98–100'e çıkarıyordu. */
}

/* ============================================================================
 * Logo grid — per-card reveal ordering (Faz 4).
 *
 * Same shape as the product-archive grid rule: each card is its own
 * `data-animate="fade-up"` element (see template-parts/sales-points/grid.php
 * for why it is not a stagger container), so the offset that makes a row read
 * left to right has to come from CSS rather than from JS-assigned delays.
 *
 * The modulus is the column count the grid ACTUALLY renders at each band (see
 * the grid-template-columns rules above), not a fixed 5 — otherwise the cycle
 * would restart mid-row and the flow would read diagonally instead of left to
 * right:
 *   >= 1101px : 5 columns -> 0 / 80 / 160 / 240 / 320ms
 *   768-1100  : 4 columns -> 0 / 80 / 160 / 240ms
 *   401-767   : 3 columns -> 0 / 40 / 80ms   (mobile: minimum stagger, so the
 *   <= 400    : 2 columns -> 0 / 80ms         whole row lands within 80ms and a
 *                                             long list never queues up behind
 *                                             a growing delay)
 * 320ms max is well inside the shared 650ms stagger budget.
 *
 * Only the <li> animates. The logo inside it is never a separate reveal
 * target, and `.is-anim-done` (main.js, on animationend) drops the animation
 * entirely so the card's own hover transition on `.sales-point-card__logo` is
 * untouched.
 * ==========================================================================*/
@media (max-width: 400px) {
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(2n+2) { --tada-anim-delay: 80ms; }
}

@media (min-width: 401px) and (max-width: 767px) {
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(3n+2) { --tada-anim-delay: 40ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(3n+3) { --tada-anim-delay: 80ms; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(4n+2) { --tada-anim-delay: 80ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(4n+3) { --tada-anim-delay: 160ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(4n+4) { --tada-anim-delay: 240ms; }
}

@media (min-width: 1101px) {
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(5n+2) { --tada-anim-delay: 80ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(5n+3) { --tada-anim-delay: 160ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(5n+4) { --tada-anim-delay: 240ms; }
	.tada-anim .sales-points__grid > .sales-point-card:nth-child(5n+5) { --tada-anim-delay: 320ms; }
}