/* ============================================================================
 * Hakkımızda sayfası (page-hakkimizda.php). Başlık, breadcrumb ve dış
 * container product-archive.css'ten ORTAK gelir (aynı hizalama — Hazır Yemek
 * kategori sayfasıyla aynı). Buradaki ekler: kırmızı hero+video paneli, sarı
 * akan bant, beyaz metin paneli, vizyon/misyon kartları, rakamlarla-tada
 * paneli. Tüm sayfa `.about-page` altında scoped.
 *
 * XD "Hakkımızda" artboard'undan (native 1920, container 140–1780 = 1640,
 * product-archive.css'teki container formülüyle birebir örtüşüyor): hero
 * 1640×700 r30 #9e262d; sarı bant 1640×60 r30 #f4c047; beyaz metin paneli
 * 1640×514 r30; vizyon/misyon kart 795×485 r30, gap 50; rakamlar paneli
 * 1640×421 r30. 1101–1920+ bandında bütün ölçüler bu 1920 referansından
 * `clamp(floor, X.XXvw, tavan)` ile (px / 19.2 = vw) türetilir, böylece
 * container'ın kendi akışkan genişliğiyle (100vw-209px / min(1640,100vw-100))
 * birlikte kırpılmadan ölçeklenir. ==========================================
 * ==========================================================================*/

/* Sections are plain block children of `.product-archive__inner` (NOT a flex
   column). `.product-archive__head`'s own `margin: 56px 0 40px` (identical
   rule the category/product-detail/sales-points pages already use) already
   sets the header→title, title→breadcrumb and breadcrumb→first-section
   rhythm untouched — a flex `gap` here previously stacked ON TOP of that
   40px margin instead of leaving it alone, which is exactly why the
   breadcrumb→hero gap read as too big / inconsistent with the other approved
   pages. Each section below instead carries its own `margin-bottom` for the
   gap to the *next* section, so the head→hero gap stays exactly the shared
   40px with nothing added. */
.about-hero,
.about-marquee,
.about-story,
.about-vm {
	margin-bottom: clamp(28px, 3.65vw, 48px);
}
/* No `.about-page`-scoped override on `.product-archive__head` any more —
   earlier passes added extra margin-top/margin-bottom here (chasing a
   normalized-screenshot pixel diff) that made this page's header→title→
   breadcrumb→hero rhythm drift from the shared `margin: 56px 0 40px` every
   other interior page (Hazır Yemek, Satış Noktalarımız, ürün detay) uses
   untouched. Removed — this page now uses the exact same shared rule. */

/* ---- Ortak: pill / etiket ---- */
.about-hero__pill,
.about-vm__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	height: clamp(30px, 2.08vw, 40px);
	padding: 0 clamp(14px, 1.15vw, 22px);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	/* Fixed at 12px, not clamped — the three remaining "Hakkımızda"/
	   "Vizyonumuz"/"Misyonumuz" badges (hero, vision, mission) share this
	   rule. The story-panel "Hakkımızda" badge was removed. */
	font-size: 12px;
	line-height: 1;
	color: var(--tada-white);
}
.about-hero__pill { background: #72151b; }
.about-hero__pill-dot,
.about-vm__pill-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.about-hero__pill-dot { background: var(--tada-yellow); }

/* ============================================================================
 * 1) HERO — kırmızı panel: içerik + video + rozet.
 * ==========================================================================*/
.about-hero {
	position: relative;
	overflow: visible;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(24px, 3.65vw, 70px);
	/* Trimmed three times now for first-fold (was clamp(28px, 3.65vw, 70px),
	   then clamp(24px, 3.3vw, 62px), then clamp(20px, 2.8vw, 52px)) — this
	   last pass only shaves ~9px total (top+bottom combined) to bring the
	   bottom corner radius fully into the first fold at 1512×857; this and
	   the content gap below are the only two "vertical breathing room"
	   values touched for first-fold — horizontal grid, video width and
	   title font are unchanged. */
	padding: clamp(17px, 2.5vw, 44px);
	background: #9e262d;
	border-radius: 32px;
	/* NOT `isolation: isolate` — that forces a new stacking context on this
	   element, which traps the video modal (rendered as this section's last
	   child, `position: fixed; z-index: 1000`) inside it. A trapped fixed
	   modal can never out-rank an ancestor-level sibling with its own
	   z-index (.site-header has z-index: 20) no matter how high its own
	   z-index is — that's why the header/logo/nav painted over the open
	   modal. The rings/content/badge z-index layering below (0/1/2) works
	   correctly as plain sibling stacking without isolation; the home page's
	   equivalent section (.home-brands, main.css:2099) never used isolation
	   for the same reason and its modal has always stacked correctly. */
}
.about-hero__rings {
	/* Concentric ring group — reference overlay put the true centre a touch
	   left of dead-centre (~46% horizontally), between the text and video
	   columns, not a mechanically exact 50%. */
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at 46% 50%,
			transparent 0 130px, rgba(255, 255, 255, 0.08) 130px 132px,
			transparent 132px 260px, rgba(255, 255, 255, 0.08) 260px 262px,
			transparent 262px 390px, rgba(255, 255, 255, 0.07) 390px 392px,
			transparent 392px 520px, rgba(255, 255, 255, 0.06) 520px 522px,
			transparent 522px 650px, rgba(255, 255, 255, 0.05) 650px 652px,
			transparent 652px 780px, rgba(255, 255, 255, 0.04) 780px 782px,
			transparent 782px);
}
.about-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Trimmed three times for first-fold (was clamp(16px, 1.98vw, 38px),
	   then clamp(14px, 1.7vw, 32px), then clamp(12px, 1.4vw, 26px)) —
	   this last pass only shaves 1-2px per gap. */
	gap: clamp(10px, 1.3vw, 24px);
	max-width: 680px;
}
.about-hero__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 700;
	/* Normalized overlay against the reference still measured this ~15-20%
	   small — one more pass up (still short of the XD-literal 112px). */
	font-size: clamp(46px, 5.5vw, 108px);
	line-height: 1.05;
	color: var(--tada-white);
}
.about-hero__title-accent { color: var(--tada-yellow); }
.about-hero__description {
	margin: 0;
	max-width: 60ch;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	/* Fixed 12.5px — the site's established small-paragraph size (matches
	   .home-catalog__description, .recipe-card__excerpt, product-detail
	   body copy), not clamped. */
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tada-white);
}
.about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.56vw, 30px);
}
.about-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Measured a little taller/wider than the reference still — trimmed
	   independently of the title fix above (never scale a button off a
	   headline change). */
	height: clamp(44px, 2.95vw, 56px);
	padding: 0 clamp(14px, 1.3vw, 25px);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 600;
	/* Fixed at 11px, no clamp/cqw. */
	font-size: 11px;
	text-decoration: none;
	white-space: nowrap;
	/* Same transition properties/timing as the site's approved CTA hover
	   (product-detail.css .product-detail .button: background-color/color/
	   border-color at .22s ease) — no transform, no scale. */
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
/* Same hover language as the approved product-detail buttons
   (.button--primary / .button--ghost): solid fill goes to black on hover,
   outline fills solid black — background/color/border only, no
   transform/scale/translate. */
.about-hero__btn--primary {
	background: var(--tada-yellow);
	color: #111111;
	border: 1px solid var(--tada-yellow);
}
.about-hero__btn--primary:hover,
.about-hero__btn--primary:focus-visible { background: #111111; color: var(--tada-white); border-color: #111111; }
.about-hero__btn--secondary {
	background: transparent;
	color: var(--tada-white);
	border: 1px solid rgba(255, 255, 255, 0.55);
}
.about-hero__btn--secondary:hover,
.about-hero__btn--secondary:focus-visible { background: #111111; color: var(--tada-white); border-color: #111111; }

/* Positioning wrapper around the video + badge (template-parts/about/hero.php).
   `display: contents` means it generates NO box: on desktop (and on mobile /
   768px, where the panel is a flex column) `.about-hero__video` and
   `.about-hero__badge` remain direct children of `.about-hero` for layout, and
   because a `display: contents` element has no box it can never be a containing
   block — the badge's `position: absolute` keeps resolving against
   `.about-hero`, exactly as it did before the wrapper existed. It only becomes
   a real box in the 769-1100px tablet band (see that block below), where it is
   the grid's right column AND the badge's containing block. */
.about-hero__media { display: contents; }

.about-hero__video {
	position: relative;
	z-index: 1;
	width: clamp(280px, 39vw, 750px);
}
.about-hero__video .home-brands__video-frame {
	aspect-ratio: 750 / 560;
	border-radius: clamp(16px, 1.5625vw, 30px);
}
.about-hero__video .home-brands__play { width: clamp(64px, 7.3vw, 100px); height: clamp(64px, 7.3vw, 100px); }

.about-hero__badge {
	position: absolute;
	z-index: 2;
	top: clamp(-50px, -2.6vw, -30px);
	right: clamp(-50px, -2.6vw, -30px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(120px, 10.42vw, 200px);
	height: clamp(120px, 10.42vw, 200px);
	border-radius: 50%;
	background: var(--tada-yellow);
	box-shadow: var(--tada-shadow-soft);
	text-align: center;
}
/* XD's dashed inner ring (decorative, no separate asset) — an inset dashed
   circle sitting inside the solid yellow disc, matching reference spacing. */
.about-hero__badge::before {
	/* A real dashed ring built from a repeating-conic-gradient, masked down
	   to a thin stroke — gives exact control over dash length/gap (24
	   dashes, 7.5deg on / 7.5deg off) that `border-style: dashed` can't
	   offer, matching the reference's long, evenly-spaced black dashes
	   instead of the previous faint/short default dashed border. Concentric
	   with the outer disc by construction (equal `inset` on all sides). */
	content: "";
	position: absolute;
	inset: 9%;
	border-radius: 50%;
	background: repeating-conic-gradient(#171717 0deg 7.5deg, transparent 7.5deg 15deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
	pointer-events: none;
}
/* Shared wrapper for both spans — rotating each span independently pivoted
   them around two DIFFERENT centres (value and label have different
   bounding-box widths), which visually knocked "tecrübe" off-centre under
   "30+" instead of keeping them as one aligned group. Rotating this one
   wrapper instead keeps both lines rigidly aligned to each other; the
   wrapper itself is centred (flex column, centred axis) inside the badge
   circle. */
.about-hero__badge-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: rotate(-8deg);
}
.about-hero__badge-value {
	font-family: "Baloo 2", Arial, sans-serif;
	/* ExtraBold, not Bold — reference "30+" reads noticeably heavier. */
	font-weight: 800;
	font-size: clamp(24px, 2.8vw, 42px);
	line-height: 1;
	color: #111111;
}
.about-hero__badge-label {
	margin-top: 4px;
	font-family: Montserrat, Arial, sans-serif;
	/* Fixed at 600 (was 500) per the reference. */
	font-weight: 600;
	font-size: clamp(13px, 1.05vw, 19px);
	color: #111111;
}

/* ============================================================================
 * 2) SARI AKAN BANT — kesintisiz, saf CSS marquee (çift kopya + -50% translate).
 * ==========================================================================*/
.about-marquee {
	border-radius: 999px;
	background: var(--tada-yellow);
	overflow: hidden;
}
.about-marquee__viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
}
/* ONE flex row holding both copies (item, dot, item, dot, … including a dot
   after the very last item of copy 1, right before copy 2's first item) —
   not two independently-justified <ul>s. `gap` is a single value applied
   uniformly to every boundary in the row, so the seam between the two
   copies gets exactly the same spacing as every other item↔dot boundary;
   there's no separate "inter-track" gap to keep in sync. `width: max-content`
   plus translating by exactly -50% of that (self-determined, always-correct)
   width is what makes the loop seamless regardless of how narrow or wide
   the six items render at any given viewport — no min-width/space-evenly
   sizing trick needed. */
.about-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	/* Without this, the flex item's default `min-width: auto` floor is its own
	   (huge — nowrap, width: max-content) content size, so .about-marquee__
	   viewport was forced to grow to fit it instead of clipping it — bypassing
	   both this element's and .about-marquee's own `overflow: hidden` and
	   leaking real page-level horizontal scroll. Measured live: this alone
	   took a 390px-wide test container from 624px of actual scrollable
	   content down to exactly 390px. */
	min-width: 0;
	gap: clamp(20px, 2.35vw, 44px);
	margin: 0;
	padding: clamp(9px, 0.95vw, 12px) 0;
	list-style: none;
	white-space: nowrap;
	animation: about-marquee-scroll var(--about-marquee-duration, 28s) linear infinite;
	animation-direction: var(--about-marquee-direction, normal);
}
.about-marquee__viewport:hover .about-marquee__track,
.about-marquee__viewport:focus-within .about-marquee__track {
	animation-play-state: paused;
}
.about-marquee__item {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.05vw, 18px);
	color: #111111;
}
.about-marquee__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9e262d;
}
@keyframes about-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ============================================================================
 * 3) BEYAZ METİN PANELİ.
 * ==========================================================================*/
.about-story {
	/* Target of the hero's "Hakkımızda" button (#uretimden-sofraya). Flush
	   (0) per direct client feedback — the section's own top edge should
	   sit at the viewport top with nothing above it (not even a sliver of
	   `.about-marquee`). `.site-header` isn't sticky/fixed on this page
	   (only on the front page), so there's no overlap risk either way. */
	scroll-margin-top: 0;
	display: grid;
	align-items: start;
	grid-template-columns: minmax(280px, 480px) 1fr;
	/* Trimmed again (~20px more) — right column was still ~14px too far
	   right. Combined with the padding-left increase below, this both
	   widens the right (content) column and pulls its start left. */
	column-gap: clamp(16px, 1.9vw, 36px);
	/* Top/bottom rebalanced to match each other now that the "Hakkımızda"
	   pill (removed below) no longer needs extra top padding to push it
	   down — the previous 34-74px top / 10-20px bottom asymmetry was
	   specifically compensating for that pill+gap, which no longer exists.
	   padding-left stays nudged up (~8px) — that was a horizontal
	   left-column-position fix, unrelated to the pill. */
	padding-top: clamp(26px, 3.2vw, 56px);
	padding-right: clamp(24px, 3vw, 56px);
	padding-bottom: clamp(26px, 3.2vw, 56px);
	padding-left: clamp(30px, 3.3vw, 64px);
	background: var(--tada-white);
	/* Page background is #fcfcfc (near-white) — without a border/shadow a
	   white panel is visually indistinguishable from it. Border matches the
	   site-wide white-card convention (main.css:367-370, .mobile-navigation);
	   shadow is a lighter page-scoped value (not the shared
	   --tada-shadow-soft token) — the reference panel reads almost flat. */
	border: 1px solid var(--tada-gray-200);
	border-radius: 32px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}
.about-story__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(18px, 2vw, 38px);
}
.about-story__title {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-style: italic;
	/* +~7% on top of the previous pass — still measured slightly small. */
	font-size: clamp(32px, 3.85vw, 62px);
	line-height: 1.12;
	color: #9e262d;
}
/* One necessary consequence of the template change that makes the responsive
   single-line collapse possible (see template-parts/about/story.php): the
   title's three lines are now each their own <span>, not <br>-separated
   text, so they need an explicit `display: block` to keep stacking the same
   way `<br>` used to. This is the one line this pass adds outside a
   `max-width` media query — visual result on desktop is unchanged (three
   stacked lines, same as before), only the markup mechanism producing that
   result changed. Tablet/mobile override this to `inline` below. */
.about-story__title-line { display: block; }
.about-story__content {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	/* Fixed 12.5px — same established small-paragraph size as the rest of
	   the page's body copy, not clamped. */
	font-size: 12.5px;
	line-height: 1.6;
	color: #111111;
}
.about-story__content p { margin: 0 0 0.75em; }
.about-story__content p:last-child { margin-bottom: 0; }
.about-story__content strong { color: #9e262d; font-weight: 700; }
.about-story__content a { color: #9e262d; }
/* Large red drop-cap on the paragraph's real first letter (XD shows a
   separate oversized "t" glyph laid over the start of "tada, Uyar
   Holding…" as a decorative layer; a real ::first-letter is the robust
   equivalent — same visible result, but it's part of the actual text, so
   screen readers still read "tada" as one word and nothing can go missing
   from the copy). */
.about-story__content p:first-of-type::first-letter {
	float: left;
	/* Sized in flat px, not `em` — the paragraph's own font-size is now a
	   fixed 12.5px (not responsive), so a flat value is the direct way to
	   target "spans exactly two paragraph lines": 2 lines × (12.5px ×
	   1.6 line-height) = 40px, so 50px font-size × 0.8 line-height ≈ 40px
	   rendered height — was computing far smaller (~3.4em of the old,
	   bigger paragraph size) and reads noticeably taller now. */
	margin: 0 6px 0 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: 50px;
	line-height: 0.8;
	color: #9e262d;
}

/* ============================================================================
 * 4) VİZYON / MİSYON — iki eşit kırmızı kart.
 * ==========================================================================*/
.about-vm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 2.6vw, 50px);
}
.about-vm__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Card measured ~26px taller than the reference — trimmed here (internal
	   gap) and in the padding below, not with a forced height. */
	gap: clamp(14px, 1.7vw, 30px);
	padding: clamp(24px, 3.1vw, 58px) clamp(24px, 2.6vw, 50px);
	background: #9e262d;
	border-radius: 32px;
}
.about-vm__rings {
	/* Root cause of the "broken/erased ring" bug: this box's SIZE was
	   percentage-based on the card (150% of card height), which is well
	   under the ~840px diameter the outermost ring stop (420px radius)
	   needs to render without being clipped — the radial-gradient's own
	   canvas was getting cut off by the pseudo-element's box edge before
	   the gradient finished fading to transparent, which reads as a sharp,
	   broken edge instead of a smooth arc. Fixed by decoupling box SIZE
	   (now a flat px, always bigger than the largest ring) from box
	   POSITION (still %, so the corner-anchoring stays responsive to card
	   width/height). Card's own `overflow: hidden` still does the actual
	   visible clipping at the card edge — only the gradient's own canvas
	   needed to stop truncating early. */
	/* Centre position recomputed for a ~700×500 card so the gradient's own
	   "50% 50%" centre (450px in from the box's anchored top-right corner)
	   lands around (87% horizontal, 5% vertical) of the card — inside the
	   reference's "80-95% / 0-15%, or just outside" zone, instead of near
	   the card's actual centre. */
	position: absolute;
	top: -85%;
	right: -52%;
	z-index: 0;
	width: 900px;
	height: 900px;
	overflow: visible;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%,
		transparent 0 120px, rgba(255, 255, 255, 0.09) 120px 122px,
		transparent 122px 220px, rgba(255, 255, 255, 0.075) 220px 222px,
		transparent 222px 320px, rgba(255, 255, 255, 0.065) 320px 322px,
		transparent 322px 420px, rgba(255, 255, 255, 0.05) 420px 422px,
		transparent 422px);
}
.about-vm__pill { background: #72151b; position: relative; z-index: 1; }
.about-vm__pill-dot { background: var(--tada-yellow); }
.about-vm__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-style: italic;
	/* Small +8% bump — still read a touch small. Width is constrained per
	   card below to force the reference's exact 2-line break, independent
	   of font size. */
	font-size: clamp(24px, 2.62vw, 43px);
	line-height: 1.18;
	color: var(--tada-white);
}
/* Force the same 2-line break as the XD/PNG reference. `ch` scales with the
   title's own font-size, and the break only depends on the combined
   white+accent text width — not on where the accent span's colour boundary
   falls — so neither field's content needs to change:
     Vizyon:  "Her yaşa, her yaşam" / "tarzına."
     Misyon:  "Öncü ve referans" / "bir marka olmak."
   No hardcoded <br>, no template change — panel content stays fully
   editable; a differently-worded title will simply reflow at this width
   instead of breaking at this exact point. */
.about-vm__card--vision .about-vm__title { max-width: 21ch; }
.about-vm__card--mission .about-vm__title { max-width: 18ch; }
.about-vm__title-accent { color: var(--tada-yellow); }
.about-vm__description {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tada-white);
}

/* ============================================================================
 * 5) RAKAMLARLA TADA.
 * ==========================================================================*/
.about-stats {
	/* Previous pass over-corrected the other way — panel now measures
	   ~40px too short. Padding brought back up partway, plus the
	   divider-margin/label-margin increases below. */
	padding: clamp(30px, 3.85vw, 68px);
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: 32px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}
.about-stats__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(16px, 2.08vw, 40px);
}
.about-stats__title {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: clamp(24px, 2.7vw, 44px);
	line-height: 1.18;
	color: #111111;
}
.about-stats__title-accent { color: #9e262d; }
/* Deliberate exception to the page's general 12.5px paragraph rule — the
   provided DevTools computed-style capture for this exact selector is
   binding: 15px / 1.6 / 40ch, not the shared small-paragraph size. */
.about-stats__description {
	margin: 0;
	max-width: 40ch;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
	color: #111111;
}
.about-stats__divider {
	height: 1px;
	margin: clamp(20px, 2.4vw, 46px) 0;
	background: var(--tada-gray-200);
}
.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	row-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.about-stats__item {
	/* Content centered within its own column — value and label share one
	   centre axis, dividers stay attached to the grid column's own edge
	   (unaffected by the internal centering). */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 clamp(16px, 1.56vw, 30px);
	border-left: 1px solid var(--tada-gray-200);
}
.about-stats__item:first-child { border-left: 0; }
.about-stats__value {
	display: block;
	white-space: nowrap;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	/* +7% — the previous trim undershot a little. */
	font-size: clamp(28px, 3.26vw, 52px);
	line-height: 1;
	color: #9e262d;
}
.about-stats__label {
	display: block;
	margin-top: clamp(6px, 0.65vw, 13px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(14px, 0.95vw, 18px);
	line-height: 1.4;
	color: #111111;
}

/* ============================================================================
 * Responsive. Desktop (>=1101px) rules above are completely untouched by
 * everything below — every rule here lives inside `max-width: 1100px` or
 * `max-width: 767px` and can only ever apply below those widths.
 *
 * - Tablet (769–1100px): Hero stacks to one column (content, then video,
 *   then the 30+ badge — see the badge comment below for why it changes
 *   from absolutely-positioned to a normal flow item here). Vizyon/Misyon
 *   KEEP their 2-column grid (readable at this width with the already-fixed
 *   12.5px body copy) — only Story and Stats go single-column/2×2.
 * - Mobile (<=767px): everything single column, incl. Vizyon/Misyon (Vizyon
 *   first, Misyon second — already their DOM order). Stats stays a 2×2 grid
 *   (not 1 column) at both bands — four single-line numbers read fine in
 *   two columns even at 375px once the "12.071 m²" column gets its own
 *   extra share (see .about-stats__grid overrides below).
 * ==========================================================================*/
@media (max-width: 1100px) {
	.about-hero,
	.about-marquee,
	.about-story,
	.about-vm {
		margin-bottom: 32px;
	}

	.about-hero {
		/* Desktop's `overflow: visible` exists so the badge (position:
		   absolute, negative top/right) can intentionally hang off the
		   panel's corner — at this stacked layout the badge no longer
		   escapes the panel (see its own override below/at 767px), so
		   nothing needs to overflow visibly here any more except
		   .about-hero__rings' own deliberately oversized (220%/320%)
		   canvas, which the code already assumed would be "re-clipped by
		   the panel's own overflow: hidden" — that clip was never actually
		   applied. Measured live: without it, the rings alone leaked ~234px
		   of real page-level horizontal scroll at a 390px width. */
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		padding: 32px 28px 40px;
		border-radius: 26px;
	}
	.about-hero__content { max-width: none; gap: 18px; }
	.about-hero__title { font-size: clamp(34px, 7vw, 46px); }
	.about-hero__video { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
	/* The badge is absolutely positioned relative to `.about-hero` on
	   desktop, anchored to the whole panel's top-right corner — that only
	   reads correctly while content and video sit side by side. Once the
	   panel stacks to one column, "the panel's top-right corner" is no
	   longer near the video (it's near the top of the text block instead),
	   and a fixed `top` offset can't reliably track the video's position
	   since the content block above it varies in height with the copy
	   length. Rather than an unreliable fixed offset (or a forbidden
	   negative margin to fake an overlap), the badge becomes a normal,
	   self-contained flow item here — it naturally lands right after the
	   video (its next sibling in the DOM), hugging the right edge, with no
	   overflow risk at any content length. */
	.about-hero__badge {
		position: relative;
		top: auto;
		right: auto;
		align-self: flex-end;
		width: 112px;
		height: 112px;
	}
	.about-hero__badge-value { font-size: 26px; }
	.about-hero__badge-label { font-size: 13px; }

	/* `inset: 0` sized this canvas to exactly the hero panel's own box on
	   desktop, which is correct there — but once the panel stacks to a
	   single, much TALLER column here, the ring group's own fixed centre/
	   radii (calibrated for a short, wide desktop panel) no longer reads as
	   spanning the panel; it stays clustered near the panel's vertical
	   centre instead of visibly continuing past the video and badge lower
	   down. Switched to a canvas explicitly larger than the panel itself
	   (width/height in %, centred via translate) so there's real headroom
	   for the same-style rings to reach top and bottom, then re-clipped by
	   the panel's own `overflow: hidden`/`border-radius` exactly as before —
	   desktop's `.about-hero__rings` rule above is untouched. */
	.about-hero__rings {
		inset: auto;
		top: 50%;
		left: 50%;
		width: 220%;
		height: 260%;
		transform: translate(-50%, -50%);
	}

	.about-marquee__track { gap: 20px; padding: 8px 0; }

	.about-story {
		scroll-margin-top: 0;
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding: 32px 28px;
		border-radius: 26px;
	}
	/* Single line — was hard-wrapping to 3 lines via literal <br> tags
	   (nl2br on a field with embedded newlines); the template now renders
	   each line as its own <span> instead (content unchanged) specifically
	   so this can switch them to inline + a generated space, collapsing the
	   same text onto one line. Font-size is a vw-based clamp, not a single
	   fixed value, so it keeps fitting across the whole 769-1100px band
	   instead of only at one measured width; estimated against the panel's
	   own padding/container width at both ends of the range, not measured
	   in a live browser. */
	.about-story__title {
		white-space: nowrap;
		font-size: clamp(16px, 4vw, 30px);
	}
	.about-story__title-line { display: inline; }
	.about-story__title-line:not(:last-child)::after { content: " "; }

	/* Vizyon/Misyon intentionally KEEP the desktop 2-column grid at tablet
	   width — only padding/typography scale down. The per-card `ch`
	   max-width (forcing the reference's 2-line break) is left inherited
	   from the desktop rule rather than re-tuned here — `ch` is already
	   relative to the title's own (now smaller) font-size, so it scales down
	   with it; not guessing a second, untested value on top of that. */
	.about-vm { gap: 20px; }
	.about-vm__card { padding: 28px 24px; gap: 16px; border-radius: 26px; }
	.about-vm__title { font-size: 26px; }
	/* Previous pass's mistake: a FIXED px box (900px, then 600px/480px at
	   each breakpoint) positioned with a negative top/right offset. Fixed
	   pixel stops inside that box meant the rings' actual visible size had
	   no real relationship to the card's own size — at a narrow card they
	   either got clipped down to a small corner of themselves or, as here,
	   ended up reading as a tight, short cluster instead of spanning the
	   card. Replaced with `inset: 0` (canvas = the card's own box, exactly,
	   like the card's `overflow: hidden` already assumes) and PERCENTAGE
	   colour-stops instead of px ones — a percentage stop is relative to
	   the gradient's own distance from its centre to the box's farthest
	   corner, so it automatically scales with however tall or short the
	   card actually renders, at any breakpoint, with no fixed number to
	   re-tune per card size. Same values now cover both the tablet and
	   mobile bands (mobile's separate fixed-box override below is removed
	   for the same reason — nothing left to re-tune). Centre at 88% 8%
	   (top-right, per reference); 5 ring levels, thin/low-opacity, fading
	   out before the card's opposite corner so the left/bottom edges show
	   the tail of the arcs rather than a hard stop. */
	.about-vm__rings {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		width: auto;
		height: auto;
		background: radial-gradient(circle at 88% 8%,
			transparent 0 17%, rgba(255, 255, 255, 0.11) 17% 17.6%,
			transparent 17.6% 33%, rgba(255, 255, 255, 0.095) 33% 33.6%,
			transparent 33.6% 49%, rgba(255, 255, 255, 0.08) 49% 49.6%,
			transparent 49.6% 65%, rgba(255, 255, 255, 0.065) 65% 65.6%,
			transparent 65.6% 81%, rgba(255, 255, 255, 0.05) 81% 81.6%,
			transparent 81.6%);
	}

	.about-stats { padding: 32px 28px; border-radius: 26px; }
	.about-stats__head { row-gap: 12px; }
	.about-stats__description { max-width: none; }
	/* Uniform 2×2 mini-card system, replacing the desktop single-row
	   divider pattern (a single `border-left` between 4 items in a row
	   doesn't have an equivalent "same rule for every cell" shape once
	   wrapped to 2×2 — the old nth-child patchwork of border-left-only /
	   border-bottom-only / both / neither read as inconsistent). Every one
	   of the 4 cells now gets the exact same border/radius/padding/
	   alignment — including the first cell, which needs its own override
	   since `.about-stats__item:first-child` (desktop, unconditional) has
	   higher specificity than a plain `.about-stats__item` rule and would
	   otherwise keep winning here. Equal-width columns (not the desktop/
	   tablet-divider version's uneven 1fr/1.3fr) per "no cell a different
	   width than another" — value font-size is sized down instead to keep
	   "12.071 m²" on one line within a symmetric column (checked down to
	   the mobile override below). */
	.about-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.about-stats__item,
	.about-stats__item:first-child {
		border: 1px solid var(--tada-gray-200);
		border-radius: 14px;
		padding: 20px 14px;
	}
	.about-stats__value { font-size: 30px; }
}

/* ============================================================================
 * TABLET HERO (769-1100px) — the desktop hero, scaled down.
 *
 * The `max-width: 1100px` block above stacks the whole panel into one flex
 * column. That is right for a phone; at 769-1100px it produced a ~913px-tall
 * red card (copy, a gap, the video reading as its own section, the badge
 * stranded in a corner). This block is not a squeeze of that shape and not a
 * new tablet composition either — every value below is DERIVED from the live
 * desktop hero, measured at 1440px (panel 1231x491.3) and normalised to the
 * panel box:
 *
 *   padding        36px uniform            = 2.92% of panel width
 *   columns        544.9 / 561.6           = 49.2 : 50.8, gap 52.6 = 4.27%
 *   video          561.6 x 419.3           = 45.6% W, and FLUSH to the
 *                                            padding on top, right AND bottom
 *                                            (it fills the whole content box)
 *   video AR       750/560 = 1.339
 *   content        356.5 tall, centred     = 72.6% H
 *   content gap    18.72px                 = 5.25% of the content's height
 *   title          79.2px, 2 lines         = 80.6% of its own column's width
 *   description    12.5/20, 3 lines
 *   CTAs           h44, pad 0 18.7, gap 22.5, 11px
 *   badge          150px                   = 12.19% of panel width
 *   rings          6 rings, centre 46%/50%, 130px step = 10.56% of panel width
 *
 * The one desktop relationship that could not be carried over literally is the
 * badge's placement: on desktop it hangs off the panel's own top-right corner
 * (top/right -37.4px, i.e. fully OUTSIDE the red card). The spec for tablet is
 * the opposite — the badge must stay inside the card — so it keeps desktop's
 * "sits on the video's corner, breaks its edge" relationship and its 12.19%
 * size, moved to the video's bottom-right and with the break-out reduced to
 * what the panel's own padding allows.
 *
 * Nothing here animates: no keyframes, no parallax/scroll/pointer effect, no
 * entrance transition. The only transition in the band is the CTAs' existing
 * background/colour hover from the desktop rule.
 *
 * Measured at 820px (LocalWP, headless Chrome, reduced motion forced) —
 * see the block-closing note below for the resulting numbers.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {
	.about-hero {
		display: grid;
		/* Desktop's own split is 49.2 : 50.8. It cannot be copied literally:
		   the same copy in a ~340px column wraps to a much taller block than
		   it does in desktop's 545px one, and since the video here fills the
		   row height (below), a taller text column would force a video far
		   taller than desktop's 1.339 frame ratio. 42/58 is the split at
		   which BOTH desktop relationships hold at once at 820px — measured
		   video 1.35 against desktop's 1.339 — so the panel keeps desktop's
		   proportions rather than desktop's literal percentages. `fr` (not
		   `%`) so `gap` is subtracted before the split and the tracks can
		   never over-constrain the panel; the 276px floor is the measured
		   width of the two CTAs side by side at desktop's own button metrics
		   (271.7px) plus a small safety margin. */
		grid-template-columns: minmax(276px, 42fr) minmax(0, 58fr);
		/* Not `center`: on desktop the video IS the tallest grid item, so it
		   sits flush against the padding on top and bottom and the panel's
		   height is the video's height. Here the text column is the taller
		   one, so `stretch` is what reproduces that same relationship — the
		   video grows to the full content-box height instead of floating in
		   the middle of the column with red above and below it. */
		align-items: stretch;
		/* Desktop 4.27% of panel width = 33px at 772. Pulled in to 30px, the
		   one allowance the spec grants, to give both columns more width. */
		gap: 30px;
		/* Desktop's uniform 36px = 2.92% of panel width -> 22.5px at 772.
		   Rounded up to 26px so the badge has room to break the video's edge
		   without leaving the card (see below), and to match the 26px the
		   rest of this page's tablet panels already use. Still uniform, like
		   desktop. No min-height anywhere: the card's height is the text
		   column's own height plus this padding. */
		padding: 26px;
		border-radius: 26px;
		/* The 1100px block sets `overflow: hidden`, which would crop the badge
		   the moment it breaks out of the card. Reverted to desktop's own
		   `visible` here — but WITHOUT losing any clipping: the ring canvas is
		   not clipped by this element, it clips itself. `.about-hero__rings`
		   already carries its own `overflow: hidden` + `border-radius:
		   inherit`, and this block resets it to `inset: 0` (the card's exact
		   box), so the rings stay inside the rounded card on their own. The
		   video is a grid track that cannot exceed the content box, and the
		   frame has its own `overflow: hidden`. Only the badge escapes, which
		   is the point. Scoped to this band: the flex-column layout below
		   769px keeps its `overflow: hidden` untouched. */
		overflow: visible;
	}

	.about-hero__content {
		max-width: none;
		/* Grid items default to `min-width: auto` (their own min-content
		   width); explicit 0 lets the copy wrap inside its track instead of
		   pushing the track wider. */
		min-width: 0;
		/* Desktop's content block is vertically centred in the row; it is the
		   taller item here so this is normally a no-op, but it keeps the same
		   behaviour if the video ever wins the height. */
		justify-content: center;
		/* Desktop 18.72px = 5.25% of its 356.5px content height; the tablet
		   content block measures ~297px -> 15.6px. */
		gap: 16px;
	}
	/* Desktop's title fills 80.6% of its own column (439.4 of 544.9 at 79.2px).
	   Held to that ratio here: at 820px the column is 290px, so 80.6% = 234px
	   of line, which is 42px type. Two lines, exactly as desktop. */
	.about-hero__title {
		font-size: clamp(38px, 5.15vw, 48px);
		line-height: 1.05;
	}
	/* The only typography value not taken straight from desktop, and the
	   smallest deviation that still works. Measured at 820px, this page's body
	   copy is 12.5px/1.6 at weight 500 (`.about-story p`, `.about-vm__
	   description`) — the site's standard paragraph — and desktop's own hero
	   copy is that same 12.5px/1.6. Only the stats intro runs larger at 15px.
	   At 14px this paragraph was therefore the one body block on the page
	   reading above the page's own voice, and in a 290px column it competed
	   with the 42px headline instead of sitting under it. 13px is one notch
	   above the page standard purely for tablet legibility in a narrow column,
	   with desktop's 1.6-ish line-height restored (1.55 -> 1.62) so the block
	   reads calmer rather than tighter. Weight and letter-spacing are the
	   page's own body values, untouched (500 / normal). */
	.about-hero__description {
		max-width: none;
		font-size: 13px;
		line-height: 1.62;
	}
	/* Desktop CTA metrics carried over unchanged: 44px tall, 11px type (both
	   already inherited), 18.72px horizontal padding, 22.46px between the two
	   buttons. Not shrunk to fit — the column above is sized around them. */
	.about-hero__actions { gap: 20px; }
	.about-hero__btn { height: 44px; padding: 0 18px; }

	/* The wrapper is the grid's right column AND the badge's containing block
	   (it is `display: contents` everywhere else, so desktop/mobile never see
	   it). It stretches to the row height, and the video fills it — that is
	   desktop's "video is flush to the padding, top to bottom" relationship. */
	.about-hero__media {
		display: block;
		position: relative;
		min-width: 0;
	}
	.about-hero__video {
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
	}
	/* `aspect-ratio: auto` + `height: 100%` instead of a fixed ratio: the frame
	   takes the column's full height and its resulting ratio lands on desktop's
	   own 1.339 by construction (measured 1.35 at 820px). The cover image is
	   already `object-fit: cover`, so the factory keeps its framing. Radius is
	   desktop's frame/panel radius relationship (22.5 : 32 = 0.70) applied to
	   this panel's 26px -> 18px. */
	.about-hero__video .home-brands__video-frame {
		aspect-ratio: auto;
		height: 100%;
		border-radius: 18px;
	}
	/* Desktop's play button is 100px against a 561.6px video = 17.8%; the
	   tablet video is ~400px -> 72px. */
	.about-hero__video .home-brands__play { width: 72px; height: 72px; }

	/* Desktop's placement, ported: 12.19% of panel width (150/1231 -> 94px at
	   772), sitting on the video's TOP-right corner and breaking out past both
	   the video and the red card. Desktop's own offsets are top/right -37.44px
	   from the panel, which measures as 48.9% of the disc past the video's
	   right edge and 48.9% above its top, and 3.04% of the panel's width
	   outside the card on each axis.
	   Held at 40.4% here (-38px on each axis: the card's own 26px padding plus
	   12px outside it) rather than the literal 48.9%. The trim is not cosmetic
	   — the tablet gutter is 24px against desktop's 104.5px, so desktop's ratio
	   would leave the disc 8px from the viewport edge and 8px under the
	   breadcrumb; at 12px of break-out it keeps 12px to the viewport edge (half
	   the gutter) and 16px of clearance below the breadcrumb, while still
	   reading as the same deliberate overhang. */
	.about-hero__badge {
		position: absolute;
		top: -38px;
		right: -38px;
		bottom: auto;
		left: auto;
		align-self: auto;
		width: 94px;
		height: 94px;
	}
	.about-hero__badge-value { font-size: 24px; }
	.about-hero__badge-label { font-size: 12px; margin-top: 3px; }

	/* Desktop's ring system scaled as one piece, not re-invented: same centre
	   (46% / 50% — on the seam between the two columns, vertically centred),
	   same six rings, same opacity ladder, same even radial step. Desktop's
	   130px step is 10.56% of its panel width and 18.3% of the gradient's own
	   farthest-corner radius; the stops below are that same 18.3% step, so the
	   whole group scales with the card across the band instead of being pinned
	   to px radii calibrated for a 1231px panel. The stroke is desktop's 2px
	   held at the same 0.28% ratio. The 1100px block's oversized 220%x260%
	   canvas (calibrated for the tall stacked card) is reset to the card's own
	   box, exactly like desktop's `inset: 0`. */
	.about-hero__rings {
		inset: 0;
		width: auto;
		height: auto;
		transform: none;
		background: radial-gradient(circle at 46% 50%,
			transparent 0 18.3%, rgba(255, 255, 255, 0.08) 18.3% 18.58%,
			transparent 18.58% 36.6%, rgba(255, 255, 255, 0.08) 36.6% 36.88%,
			transparent 36.88% 54.9%, rgba(255, 255, 255, 0.07) 54.9% 55.18%,
			transparent 55.18% 73.2%, rgba(255, 255, 255, 0.06) 73.2% 73.48%,
			transparent 73.48% 91.5%, rgba(255, 255, 255, 0.05) 91.5% 91.78%,
			transparent 91.78%);
	}
}

@media (max-width: 767px) {
	.about-hero,
	.about-marquee,
	.about-story,
	.about-vm {
		margin-bottom: 24px;
	}

	.about-hero { padding: 28px 20px 32px; border-radius: 22px; gap: 24px; }
	.about-hero__content { gap: 16px; }
	/* max-width reserves room on the right for the badge below (absolute,
	   pinned to the panel's own top-right corner) so the title text never
	   runs underneath it — only the title is constrained, not the
	   description/buttons, per instruction. Reserved width = badge's own
	   max size (104px) + its right inset (20px) + a small safety gap. */
	.about-hero__title { font-size: clamp(28px, 9vw, 36px); max-width: calc(100% - 134px); }
	/* Paragraph stays the fixed 12.5px standard at every breakpoint — no
	   mobile override (previous passes had one; removed). */
	.about-hero__actions { gap: 12px; }
	/* Buttons stay side by side (flex-wrap already on .about-hero__actions)
	   down to whatever width they actually fit at — no forced
	   flex-direction: column / width: 100%. Both buttons together are
	   comfortably under ~280px even at the 11px fixed font size, so they
	   still fit side by side well below 430px in practice; if a button's
	   own label is ever long enough not to fit, wrap handles it
	   automatically instead of a hard-coded stack. Height floor is already
	   44px (clamp(44px, 2.95vw, 56px) — unchanged), meeting the touch
	   target minimum without any override here. */
	/* Back to `position: absolute`, pinned inside the panel's own top-right
	   corner (NOT overflowing it, unlike desktop) — the tablet band's
	   "normal flow, after the video" placement (unchanged above) read as
	   disconnected from the rest of the panel and partly cropped at mobile
	   widths. `top`/`right` are set from the panel's own padding (20px
	   horizontal) so the badge sits just inside the padding edge; size is a
	   vw-based clamp (not fixed per-width steps) tuned toward ~82-92px at
	   375-390px and ~95-104px at 430px. Estimated against the panel's own
	   geometry, not measured in a live browser. */
	.about-hero__badge {
		position: absolute;
		top: 20px;
		right: 20px;
		align-self: auto;
		width: clamp(82px, 22vw, 104px);
		height: clamp(82px, 22vw, 104px);
	}
	.about-hero__badge-value { font-size: clamp(19px, 5.2vw, 24px); }
	.about-hero__badge-label { font-size: clamp(10px, 2.9vw, 13px); }

	/* Taller than the tablet override — the panel's height-to-width ratio
	   grows further at mobile widths (narrower column, same stacked
	   content), so the canvas needs more vertical headroom to keep reaching
	   top and bottom. */
	.about-hero__rings { height: 320%; }

	/* Item spacing moved from the item's own padding to the track's `gap`
	   (desktop marquee restructure) — same ~16px rhythm, just expressed on
	   the new property so it doesn't double up with the desktop gap value. */
	.about-marquee__track { gap: 16px; padding: 7px 0; }
	.about-marquee__item { font-size: 14px; }

	.about-story { scroll-margin-top: 0; padding: 24px 18px; border-radius: 18px; }
	/* The 768-1100px tier above collapses the title onto one line
	   (white-space: nowrap + .about-story__title-line: inline) — measured
	   live and confirmed safe there (needs ~426px of ~710px available at
	   768px, the tier's narrowest edge). That single-line box does NOT
	   shrink to fit at phone widths, though: nowrap's min-content width IS
	   its max-content width, so the grid track (and the whole panel) was
	   forced to grow past the viewport instead of wrapping — measured at
	   390px this needed ~398px against ~354px available, blowing the
	   section out to the right. Reset back to the original stacked-line
	   layout here; only the tablet tier keeps the single-line collapse. */
	.about-story__title { font-size: 28px; white-space: normal; }
	.about-story__title-line { display: block; }
	.about-story__title-line:not(:last-child)::after { content: none; }
	/* Sağ metin stays the fixed 12.5px standard here too — no override
	   (previous passes had one bumping it to 15px; removed). */

	/* Vizyon/Misyon go single-column only at this width — Vizyon first,
	   Misyon second, already their DOM order. */
	.about-vm { grid-template-columns: 1fr; gap: 20px; }
	.about-vm__card { padding: 24px 18px; border-radius: 18px; }
	.about-vm__title { font-size: 24px; }
	.about-vm__card--vision .about-vm__title,
	.about-vm__card--mission .about-vm__title { max-width: none; }
	/* No separate mobile override any more — the tablet block's `inset: 0` +
	   percentage-stop rings above are already relative to the card's own
	   box, so they hold correctly at any card size/aspect ratio without a
	   second, re-tuned set of fixed values. */

	.about-stats { padding: 24px 18px; border-radius: 18px; }
	.about-stats__title { font-size: 24px; }
	/* Same uniform mini-card system as the tablet override, just tighter —
	   equal-width columns, identical border/radius/padding on all 4 cells
	   including the first (same specificity reasoning as the tablet
	   comment above). */
	.about-stats__grid { gap: 12px; }
	.about-stats__item,
	.about-stats__item:first-child {
		border-radius: 12px;
		padding: 16px 10px;
	}
	/* Smaller than the tablet value specifically so "12.071 m²" keeps fitting
	   on one line (white-space: nowrap, unchanged) inside a symmetric
	   2-column cell down to ~360-375px viewports — estimated against the
	   cell's own available width at that size, not measured live. */
	.about-stats__value { font-size: 20px; }
	.about-stats__label { font-size: 12px; }
}

/* ============================================================================
 * Vizyon / Misyon — per-card reveal offset (Faz 4).
 *
 * The two cards are the only per-element reveal targets on this page (every
 * other section reveals as one block — see the template-part file headers for
 * why). Each card carries its own `data-animate="fade-up"`, so the offset
 * between them has to come from CSS: main.js writes `data-animate-delay` as an
 * INLINE style, which no media query could override, and this offset is not
 * the same at every width.
 *
 * The value tracks what the grid actually does (`.about-vm` above):
 *   >= 768px : 2 columns, cards side by side -> 0 / 120ms, so the pair reads
 *              left to right without the second card feeling detached.
 *   <= 767px : 1 column, cards stacked       -> 0 / 80ms. Tighter on purpose:
 *              stacked, the second card is a full card-height further down and
 *              usually scrolls in as its own event anyway, so a long delay
 *              would just look like lag.
 *
 * Only the card animates — its rings, pill, title and description are never
 * separate targets, and `.is-anim-done` (main.js, on animationend) drops the
 * animation so the card's own styling takes over cleanly afterwards.
 * ==========================================================================*/
@media (max-width: 767px) {
	.tada-anim .about-vm > .about-vm__card:nth-child(2) { --tada-anim-delay: 80ms; }
}

@media (min-width: 768px) {
	.tada-anim .about-vm > .about-vm__card:nth-child(2) { --tada-anim-delay: 120ms; }
}