/* ============================================================================
 * 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;
	background: var(--sn-banner-bg, #9e262d);
	border-radius: 32px;
}
/* Two separate concentric white ring groups (XD reference): one centred behind
   the map on the left, one behind the metrics on the right. Each is a bounded
   radial-gradient (finite ring count) so the two sets never cross into each
   other — they meet around the banner centre without intersecting. */
.sales-points__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 10% 114%,
			transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
			transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
			transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
			transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
			transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
			transparent 412px),
		radial-gradient(circle at 90% -14%,
			transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
			transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
			transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
			transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
			transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
			transparent 412px);
}
/* 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;
	font-family: Montserrat, 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: Montserrat, 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 {
		max-width: 500px;
		/* 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;
	}
	/* Desktop-only: pull the two corner ring groups a little toward the centre
	   (values stay percentage-based — i.e. already proportional to the banner's
	   own width/height — only the percentages themselves move). Radius/stroke
	   spacing (the transparent/rgba stop widths) is untouched. */
	.sales-points__banner::before {
		background:
			radial-gradient(circle at 15% 114%,
				transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
				transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
				transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
				transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
				transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
				transparent 412px),
			radial-gradient(circle at 85% -14%,
				transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
				transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
				transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
				transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
				transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
				transparent 412px);
	}
}

@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) {
	/* Mobile stacks: map centred on top, four metrics in a row below. */
	.sales-points__banner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 16px;
		min-height: 0;
		padding: 20px 14px;
		border-radius: 22px;
		margin-bottom: 28px;
	}
	.sales-points__map { justify-self: center; width: 100%; }
	/* Smaller corner rings so the two groups stay in their corners and don't
	   tangle on the narrow, stacked mobile banner. */
	.sales-points__banner::before {
		background:
			radial-gradient(circle at 16% 112%,
				transparent 0 56px, rgba(255, 255, 255, 0.11) 56px 58px,
				transparent 58px 112px, rgba(255, 255, 255, 0.11) 112px 114px,
				transparent 114px 168px, rgba(255, 255, 255, 0.11) 168px 170px,
				transparent 170px 224px, rgba(255, 255, 255, 0.11) 224px 226px,
				transparent 226px),
			radial-gradient(circle at 84% -12%,
				transparent 0 56px, rgba(255, 255, 255, 0.11) 56px 58px,
				transparent 58px 112px, rgba(255, 255, 255, 0.11) 112px 114px,
				transparent 114px 168px, rgba(255, 255, 255, 0.11) 168px 170px,
				transparent 170px 224px, rgba(255, 255, 255, 0.11) 224px 226px,
				transparent 226px);
	}
	/* A little bigger map. */
	.sales-points__map { max-width: 440px; }
	/* 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). */
	.sales-points__metrics { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; width: 100%; max-width: 100%; justify-self: stretch; }
	.sales-points__metric { display: block; text-align: center; }
	.sales-points__metric-value { font-size: clamp(18px, 5.5vw, 28px); }
	/* 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. */
	.sales-points__metric-label { margin-top: 3px; font-size: clamp(8px, 2.15vw, 15px); line-height: 1.15; white-space: nowrap; }
	.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; }
}

/* ============================================================================
 * 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; }
}