/* ============================================================================
 * Değerlerimiz sayfası (page-degerlerimiz.php) — /degerlerimiz/. Yalnızca bu
 * sayfada enqueue edilir (is_page('degerlerimiz')); .product-archive__inner/
 * __head/__title/__breadcrumb zaten Hakkımızda/Satış Noktalarımız/Tarihçe
 * sayfalarıyla paylaşılıyor (assets/css/pages/product-archive.css) — banner
 * genişliği (1640px @1920) container'la birebir eşleştiği için burada tekrar
 * tanımlanmadı.
 *
 * Kaynak: Bu proje ortamında Adobe XD masaüstü uygulaması bulunmadığından
 * (references/Tada.xd yalnızca ham dosya, inspect paneli erişilemiyor),
 * ölçümler XD'nin kendi PDF dışa aktarımından (references/Untitled.pdf, sayfa
 * 8 "Değerlerimiz") 1920px genişlikte 1:1 piksel render + piksel/renk analizi
 * ile alındı (pdftoppm/pdftocairo, poppler). PDF sayfa boyutu tam 1920×4675pt
 * — yani bu artboard'un native genişliği projedeki diğer sayfalarla (1640
 * içerik container'ı, 1920 tam genişlik) birebir aynı ölçek. Ölçülen değerler:
 *   - Banner: 1640×~491 (içerik kadar büyür), #9e262d, radius 32px.
 *   - Pill: yükseklik ~39px, sol içeriğin ~70px içeri girintili — bkz.
 *     about-hero__pill (about.css) ile aynı ölçek/renk (#72151b).
 *   - Başlık bloğu (2 satır): toplam ~171px yükseklik → font-size ~72px.
 *   - Beyaz liste paneli: 735×~349 (7 kayıtta), banner'ın sağında, banner sağ
 *     kenarından ~50px içeride; radius 32px.
 *   - Sarı toplam rozeti: çap ~200px, merkezi banner'ın sağ-üst köşesine
 *     ~%97 x / %10 y (banner kutusuna göre) — köşeyi taşıyor.
 *   - Değer kartı ikon kutusu: 100×100px, kart sol iç kenarından ~50px içeri.
 *   - Timeline satırı: [numara][nokta+çizgi][kart] ~ %31.7 / %14 / %54.3
 *     (140–660 / 660–890 / 890–1780 @1920 içinde).
 * İkonlar (assets/images/degerlerimiz/*.svg) bu PDF'nin kendi vektör
 * içeriğinden (pdftocairo -svg + potrace) izlenerek elde edildi — yeni/
 * üretilmiş bir görsel değil, XD'nin kendi çizgi-ikon setinin ta kendisi.
 * ==========================================================================*/

/* ---- Banner (kırmızı panel) ---- */
.degerlerimiz-banner {
	position: relative;
	overflow: visible;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 750px);
	align-items: center;
	gap: clamp(24px, 3.3vw, 64px);
	padding: clamp(24px, 3.65vw, 70px);
	background: #9e262d;
	border-radius: var(--tada-radius-lg);
	margin: 0 0 clamp(40px, 5vw, 96px);
}

/* Dekoratif halka deseni — ana sayfa satış haritası ve Satış Noktalarımız
   banner'ıyla AYNI yaklaşım: halkalar artık CSS ile ölçeklenen bir
   radial-gradient değil, sabit geometrili paylaşılan bir raster asset.
   Neden: önceki taban kuralı `circle at 38% 46%` — odak panelin tam
   ortasındaydı ve en küçük yarıçap 120px'ti. Masaüstünde panel 399px yüksek
   olduğu için bu sorun çıkarmıyordu, ama tablette (1024/834'te panel yalnızca
   266.8px) 120/240/360px'lik yarıçaplar panelin içinden geçip içerikle
   yarışan dev yaylara dönüşüyordu. Ayrıca sayfada ÜÇ ayrı halka mekanizması
   vardı (bu taban gradient 768-1100'de, ≥1101'de iki odaklı başka bir
   gradient, ≤767'de iki pseudo-element) — üçü de tek asset'e indirildi.
   `cover` üniform ölçek uyguladığı için daireler her viewport'ta gerçek
   daire kalıyor, hiç stretch olmuyor. Kırpma taşmıyor: border-radius:inherit
   + overflow:hidden zaten burada, yani köşe yuvarlaklığı CSS'ten gelmeye
   devam ediyor ve rozet (ayrı, kırpılmayan katman) köşeyi taşabiliyor. */
.degerlerimiz-banner__rings {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	background-image: url("../../images/global/tada-red-rings-bg-flat.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.degerlerimiz-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1.3vw, 22px);
	max-width: 640px;
}

.degerlerimiz-banner__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	height: clamp(28px, 2.03vw, 39px);
	padding: 0 clamp(14px, 1.15vw, 22px);
	border-radius: 999px;
	background: #72151b;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: var(--tada-white);
}
.degerlerimiz-banner__pill-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--tada-yellow);
}

.degerlerimiz-banner__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 3.75vw, 72px);
	line-height: 1.1;
	color: var(--tada-white);
}
.degerlerimiz-banner__title-line--accent {
	color: var(--tada-yellow);
}

.degerlerimiz-banner__description {
	margin: 0;
	max-width: 480px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(13px, 0.95vw, 16px);
	line-height: 1.5;
	color: var(--tada-white);
}

/* ---- Beyaz değer listesi paneli ---- */
.degerlerimiz-banner__list-wrap {
	position: relative;
	z-index: 1;
}

.degerlerimiz-banner__list {
	margin: 0;
	padding: clamp(20px, 2.5vw, 48px) clamp(20px, 2.7vw, 52px);
	list-style: none;
	background: var(--tada-white);
	border-radius: var(--tada-radius-lg);
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--deger-list-rows, 4), auto);
	column-gap: clamp(16px, 2.3vw, 44px);
	row-gap: clamp(14px, 1.6vw, 30px);
}

.degerlerimiz-banner__list-item {
	display: flex;
	align-items: baseline;
	gap: clamp(6px, 0.85vw, 16px);
	padding-bottom: clamp(10px, 1.15vw, 22px);
	border-bottom: 1px solid var(--tada-red, #9e262d);
	min-width: 0;
}
.degerlerimiz-banner__list-number {
	flex: 0 0 auto;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(11px, 0.83vw, 16px);
	color: var(--tada-red, #9e262d);
}
.degerlerimiz-banner__list-name {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 0.99vw, 19px);
	line-height: 1.3;
	color: var(--tada-black, #111111);
}

/* ---- Sarı toplam değer rozeti ---- */
.degerlerimiz-banner__badge {
	position: absolute;
	z-index: 2;
	top: 10%;
	right: 3%;
	transform: translate(45%, -45%) rotate(-6deg);
	width: clamp(96px, 10.4vw, 200px);
	height: clamp(96px, 10.4vw, 200px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tada-yellow);
	border: 2px dashed var(--tada-black, #111111);
}
/* Bug fix: iki satırlı gövde ARTIK TABANDA. Önceden `display:flex;
   flex-direction:column` yalnızca ≥1101 ve ≤767 bloklarında tanımlıydı; 768-
   1100 arası (tablet) hiçbirine girmediği için wrapper `<span>` varsayılan
   inline kalıyor, "7" ile "değer" YAN YANA akıyordu. Tek yerde tanımlanınca
   aradaki hiçbir breakpoint bunu bir daha kaçıramaz — breakpoint blokları
   yalnızca kendi rotasyon/puntolarını ekliyor. */
.degerlerimiz-banner__badge-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Rozet tipografisi TEK KAYNAK: font ailesi burada, her breakpoint'te aynı.
   Daha önce aile üç ayrı yerde tekrarlanıyordu ve breakpoint'ler arasında
   ayrışmıştı (≥1101 Baloo 2, ≤1100 Baloo 2, ≤767 Montserrat) — aynı sınıfın
   tekrarı hangi kuralın nereye düştüğünü gizlediği için rozet mobilde farklı
   bir font ailesiyle çiziliyordu. Breakpoint blokları artık yalnızca
   font-size/spacing/çap ayarlıyor, aileyi bir daha tanımlamıyor.
   Ağırlıklar gerçek dosyalarla karşılanıyor (main.css:21-24: Baloo 2
   400/600/700/800), yani sentetik kalınlaştırma yok. */
.degerlerimiz-banner__badge-count {
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 3.13vw, 60px);
	line-height: 1;
	color: var(--tada-black, #111111);
}
.degerlerimiz-banner__badge-label {
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(12px, 1.15vw, 22px);
	color: var(--tada-black, #111111);
}

/* ============================================================================
 * Timeline (numara + noktalı çizgi + kart)
 * ==========================================================================*/
.degerlerimiz-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.degerlerimiz-item {
	position: relative;
	display: flex;
	align-items: center;
}
.degerlerimiz-item + .degerlerimiz-item {
	margin-top: clamp(24px, 2.6vw, 50px);
}

.degerlerimiz-item__number {
	flex: 0 0 31.7%;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(40px, 5.7vw, 110px);
	line-height: 1;
	color: var(--tada-gray-400);
}

.degerlerimiz-item__spine {
	position: relative;
	flex: 0 0 14%;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}
.degerlerimiz-item__node {
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tada-red, #9e262d);
}
/* Tek parça, kesintisiz noktalı çizgi — listenin doğal yüksekliğine göre
   otomatik uzar (tarihce-panel__track::before ile aynı teknik), yalnızca
   noktalı: repeating-linear-gradient ile 8px nokta + 10px boşluk. İlk ve son
   düğüm arasında biter çünkü track'in kendisi yalnızca item'ları içerir,
   ekstra üst/alt padding yok. */
.degerlerimiz-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 38.7%;
	width: 3px;
	background: repeating-linear-gradient(
		to bottom,
		var(--tada-red, #9e262d) 0 8px,
		transparent 8px 18px
	);
	pointer-events: none;
}

.degerlerimiz-item__card {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--tada-radius-md);
	overflow: hidden;
}
.degerlerimiz-item__title {
	margin: 0;
	padding: clamp(16px, 1.5vw, 28px) clamp(20px, 2vw, 40px);
	background: #ece8e4;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(16px, 1.35vw, 26px);
	color: var(--tada-black, #111111);
}
.degerlerimiz-item__body {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 34px);
	padding: clamp(18px, 1.85vw, 36px) clamp(20px, 2vw, 40px);
	background: #fbf9f5;
}
.degerlerimiz-item__icon {
	flex: 0 0 auto;
	width: clamp(48px, 5.2vw, 100px);
	height: auto;
	object-fit: contain;
}
.degerlerimiz-item__description {
	margin: 0;
	flex: 1 1 auto;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(13px, 0.94vw, 18px);
	line-height: 1.5;
	color: var(--tada-black, #111111);
}

/* ============================================================================
 * Masaüstü ince ayarı (yalnızca ≥1101px) — ÜÇÜNCÜ GEÇİŞ.
 *
 * Bu turda ölçüm yerine kullanıcının verdiği KESİN değerler doğrudan
 * uygulandı; çelişen durumlarda bu değerler esas alındı:
 *   - Banner başlığı: about-hero__title (about.css) ile BİREBİR aynı
 *     `clamp(46px, 5.5vw, 108px)`.
 *   - Rozet: about-hero__badge/-badge-copy/-badge-value/-badge-label
 *     (about.css:209-274) ile BİREBİR aynı değerler — about.css'e
 *     dokunulmadı, değerler yalnızca buraya kopyalandı.
 *   - Breadcrumb→banner boşluğu: Hakkımızda'nın KENDİSİ hiç override
 *     kullanmıyor (about.css'in kendi yorumu: paylaşılan 40px'i olduğu gibi
 *     kullanır) — önceki turda eklenen +20px özel değer bu yüzden kaldırıldı.
 *   - Banner açıklaması 12.5px/400, liste değer adları 14px/600, kart
 *     başlıkları 20px, kart açıklamaları 16px — hepsi sabit (clamp değil).
 *   - Timeline node ↔ çizgi hizası artık tek bir `--timeline-x` custom
 *     property'sinden okunuyor (node artık spine'ın flex-ortalamasına değil,
 *     `.degerlerimiz-item`e göre absolute+translate(-50%,-50%) ile
 *     konumlanıyor) — ikisi asla birbirinden sapamaz.
 *   - Numara rengi #666666, font-weight 400 (projede yüklü en ince gerçek
 *     Montserrat ağırlığı — 300 dosyası yok, bkz. main.css @font-face).
 * ==========================================================================*/
@media (min-width: 1101px) {
	.degerlerimiz-banner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* Dikey padding, onaylı iç sayfa hero/banner'larının (about-hero:
		   clamp(17px,2.5vw,44px); sales-points__banner @1101+:
		   clamp(24px,1.9vw,34px) 64px) kendi ölçeğine çekildi — önceki
		   4.6vw/80px tavanı bu iki onaylı örnekten belirgin biçimde
		   yüksekti. Yatay padding (sol metnin yatay konumu) değişmedi. */
		padding: clamp(20px, 2.3vw, 38px) clamp(18px, 4.6vw, 80px);
	}
	.degerlerimiz-banner__content {
		max-width: none;
	}
	.degerlerimiz-banner__title {
		font-size: clamp(46px, 5.5vw, 108px);
		line-height: 1.05;
	}
	.degerlerimiz-banner__description {
		max-width: 520px;
		font-size: 12.5px;
		font-weight: 400;
	}
	.degerlerimiz-banner__list {
		border-radius: var(--tada-radius-md);
		padding: clamp(18px, 2vw, 40px) clamp(20px, 2.7vw, 52px);
	}
	.degerlerimiz-banner__list-item {
		padding-bottom: clamp(8px, 0.95vw, 14px);
	}
	.degerlerimiz-banner__list-number {
		font-size: 13px;
	}
	.degerlerimiz-banner__list-name {
		font-size: 14px;
		font-weight: 600;
	}

	/* ---- Sarı "7 değer" rozeti — Hakkımızda'nın "30+ Tecrübe" rozetiyle
	   (about-hero__badge, about.css:209-274) BİREBİR aynı component
	   davranışı. about.css değiştirilmedi; değerler yalnızca kopyalandı. ---- */
	.degerlerimiz-banner__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;
		border: none;
		transform: none;
	}
	.degerlerimiz-banner__badge::before {
		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;
	}
	/* Gövde artık tabanda; burada yalnızca rotasyon kalıyor. */
	.degerlerimiz-banner__badge-copy { transform: rotate(-8deg); }
	/* Referans oran: büyük "7" + altında daha küçük ama güçlü "değer".
	   Rozet ÇAPI DEĞİŞMEDİ (1920'de 200px, 1440'ta 150px) — yalnız puntolar
	   büyüdü: 50→62px ve 22→26px @1920, 46.08→56px ve 17.28→22px @1440.
	   Eğim (3.889vw / 1.528vw) iki hedefi de tutturacak şekilde seçildi;
	   tavanlar 1920'yi, tabanlar 1101'in altını (bu blok dışı) korur.
	   Sığma, gerçek render'da piksel düzeyinde doğrulandı: kesik çemberin iç
	   yarıçapı ile en dıştaki glif pikseli arasındaki boşluk 1920'de 30.8px,
	   1440'ta 16.2px, en dar noktada (1152 — rozet hâlâ 120px tabanındayken
	   punto vw ile büyümeye devam ettiği için bu blogun en sıkı yeri) 11.9px.
	   Metin kutusunun köşegeni değil, GLİF MÜREKKEBİ ölçüldü: bağlantılı
	   bileşen etiketlemesiyle harfler kesik çember parçalarından ayrıldı. */
	.degerlerimiz-banner__badge-count {
		font-weight: 800;
		font-size: clamp(38px, 3.889vw, 62px);
		line-height: 1;
		color: #111111;
	}
	.degerlerimiz-banner__badge-label {
		margin-top: 4px;
		font-weight: 600;
		font-size: clamp(15px, 1.528vw, 26px);
		color: #111111;
	}

	/* Bu blokta bir zamanlar iki odaklı kendi halka gradient'i vardı
	   (merkezler %15/%114 ve %85/-%14, 5 halka 82-410px). Kaldırıldı: halka
	   sistemi artık tabandaki tek paylaşılan asset'ten geliyor, masaüstü de
	   tablet/mobil ile aynı mekanizmayı kullanıyor. */

	.degerlerimiz-item + .degerlerimiz-item {
		margin-top: clamp(40px, 4.8vw, 92px);
	}

	/* ---- Timeline node ↔ çizgi ortak hizalama ---- */
	.degerlerimiz-timeline {
		--timeline-x: 33.2%;
	}
	.degerlerimiz-timeline::before {
		left: var(--timeline-x);
		transform: translateX(-50%);
		width: 5px;
		background-color: transparent;
		background-image: radial-gradient(circle, var(--tada-red, #9e262d) 42%, transparent 44%);
		background-size: 5px 12px;
		background-repeat: repeat-y;
	}
	.degerlerimiz-item__number {
		flex-basis: 24%;
		font-size: clamp(48px, 7.82vw, 118px);
		/* Gerçek Montserrat Light İtalik (main.css'e eklenen font-face) —
		   XD'nin PDF export'unda bu metin özel olarak bununla gömülüydü
		   (pdffonts: "Montserrat-LightItalic"), projenin geri kalanında
		   kullanılan 400/600/700/800'den farklı. Sahte `opacity`/`scaleX()`/
		   text-shadow ince gösterme tekniği DEĞİL — gerçek 300 ağırlık gerçek
		   stroke'u inceltiyor. */
		font-family: Montserrat, Arial, sans-serif;
		font-weight: 300;
		color: #666666;
	}
	.degerlerimiz-item__spine {
		flex-basis: 18.3%;
		/* Artık node'un konumlama referansı değil (bkz. --timeline-x) —
		   yalnızca yatay boşluk ayırıcı olarak kalıyor. */
		position: static;
	}
	.degerlerimiz-item__node {
		position: absolute;
		top: 50%;
		left: var(--timeline-x);
		transform: translate(-50%, -50%);
		margin: 0;
	}

	/* ---- Kart mimarisi: iki bağımsız yüzey ----
	   Header düz akışta üstte, kendi üst radius'una sahip (alt köşeleri
	   kare). Body header ile TAM AYNI genişlikte (yatay inset/margin yok,
	   width:100%) — sol/sağ kenarları header'la birebir hizalı. Body'nin
	   dört köşesi de yuvarlak; üst üste binme miktarı (`margin-top`) bilerek
	   `border-radius` ile AYNI (20px = var(--tada-radius-md)) seçildi: daha
	   az bir binme, body'nin yuvarlak üst köşesinin "kestiği" çeyrek-daire
	   alanında header'ın hâlâ kare olan alt köşesini açığa çıkarıp kesik/
	   kareye dönen bir görünüm yaratıyordu (önceki 8px'lik binme buna neden
	   oluyordu). 20px binme, çeyrek-dairenin en iç noktası tam olarak
	   header'ın alt kenarına denk gelmesini sağlıyor — header hiçbir yerde
	   açığa çıkmıyor. Body padding-top'u aynı miktarda büyütülerek ikon/
	   metnin dikey konumu ve kartın toplam dış yüksekliği korunuyor. */
	.degerlerimiz-item__card {
		overflow: visible;
		border: none;
	}
	.degerlerimiz-item__title {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		font-size: 20px;
		padding: 26px 32px;
		border-radius: var(--tada-radius-md) var(--tada-radius-md) 0 0;
	}
	.degerlerimiz-item__body {
		position: relative;
		z-index: 1;
		width: 100%;
		box-sizing: border-box;
		margin-top: calc(-1 * var(--tada-radius-md));
		border-radius: var(--tada-radius-md);
		border: 1px solid var(--tada-gray-200);
		box-shadow: var(--tada-shadow-soft);
		padding-top: calc(clamp(24px, 3.93vw, 75px) + var(--tada-radius-md));
		padding-bottom: clamp(24px, 3.93vw, 75px);
	}
	.degerlerimiz-item__description {
		font-size: 16px;
		font-weight: 400;
	}
}

/* ============================================================================
 * Kart hover durumu — yalnızca gerçek hover destekleyen masaüstü
 * (min-width:1101px + hover:hover + pointer:fine). Header koyu kırmızıya
 * (--tada-red-dark), gövde ana kırmızıya (--tada-red) döner; ikon/metin
 * beyaza geçer. Yalnızca renk geçişleri — transform/scale yok, layout shift
 * yok, timeline node/numara hareket etmiyor.
 * ==========================================================================*/
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
	.degerlerimiz-item__title,
	.degerlerimiz-item__body {
		transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
	}
	.degerlerimiz-item__description {
		transition: color 180ms ease;
	}
	.degerlerimiz-item__icon {
		transition: filter 180ms ease;
	}

	.degerlerimiz-item__card:hover .degerlerimiz-item__title {
		background: var(--tada-red-dark, #8f1f25);
		color: var(--tada-white);
	}
	.degerlerimiz-item__card:hover .degerlerimiz-item__body {
		background: var(--tada-red, #b1262d);
		border-color: var(--tada-red-dark, #8f1f25);
	}
	.degerlerimiz-item__card:hover .degerlerimiz-item__description {
		color: var(--tada-white);
	}
	.degerlerimiz-item__card:hover .degerlerimiz-item__icon {
		/* İkonlar tek renkli (siyah) çizgi SVG — güvenli, asset üretmeden
		   beyaza çevirme yöntemi. */
		filter: brightness(0) invert(1);
	}
}

/* ============================================================================
 * Responsive.
 * ==========================================================================*/
@media (max-width: 1100px) {
	.degerlerimiz-banner {
		grid-template-columns: 1fr;
		padding: clamp(24px, 4.2vw, 40px);
		gap: 24px;
	}
	.degerlerimiz-banner__content { max-width: 100%; }

	/* Rozet: about-hero__badge'in kendi tablet override'ıyla (about.css:654-
	   663) aynı ilke — boyut/konum küçülür, ama noktalı halka (::before) ve
	   -8deg döndürülmüş copy (masaüstünde tanımlı, bu breakpoint'te ayrıca
	   tekrarlanıyor çünkü ≥1101px bloğu bu turda değiştirilmedi) korunuyor. */
	.degerlerimiz-banner__badge {
		top: 16px;
		right: 16px;
		transform: rotate(-6deg);
		width: 112px;
		height: 112px;
		border: none;
	}
	.degerlerimiz-banner__badge::before {
		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;
	}
	.degerlerimiz-banner__badge-copy { transform: rotate(-8deg); }
	/* Tablette rozet 100→112px, "7" 26→38px, "değer" 11→14px. Font ailesi
	   burada tanımlı DEĞİL — tabandan geliyor (bkz. yukarıdaki tek kaynak
	   notu). İki satırın dikey dengesi:
	   38 + 4 + ~17 = 59px'lik yığın 112px'lik dairenin merkezinde
	   (justify-content:center), kesik çizgili iç çember 91.8px ve
	   döndürülmüş kutunun köşegeni 79.9px — taşma yok. */
	.degerlerimiz-banner__badge-count {
		font-size: 38px;
		line-height: 1;
	}
	.degerlerimiz-banner__badge-label {
		margin-top: 4px;
		font-size: 14px;
	}

	.degerlerimiz-item__number {
		font-size: clamp(36px, 8vw, 60px);
		font-weight: 300;
		color: #666666;
	}
	/* Node ↔ çizgi hizası: masaüstündeki aynı paylaşılan `--timeline-x`
	   tekniği (node artık spine'ın flex-ortalamasına değil, absolute+
	   translate(-50%,-50%) ile konumlanıyor). Yalnızca `left:38.7%` yazıp
	   flex-ortalamalı node'a güvenmek gerçek render'da ~24px sapma
	   üretiyordu (çizgi kendi `left`ini transform olmadan kutunun SOL
	   kenarı olarak yorumluyor, node ise spine'ın flex-merkezinde —
	   ikisi farklı referans noktaları) — bu yüzden node da aynı mutlak
	   tekniğe taşındı, `getBoundingClientRect()` ile doğrulandı. */
	.degerlerimiz-timeline { --timeline-x: 38.7%; }
	.degerlerimiz-timeline::before {
		left: var(--timeline-x);
		transform: translateX(-50%);
	}
	.degerlerimiz-item__spine { position: static; }
	.degerlerimiz-item__node {
		position: absolute;
		top: 50%;
		left: var(--timeline-x);
		transform: translate(-50%, -50%);
		margin: 0;
	}

	/* Kart: masaüstündeki aynı iki yüzeyli mimari (bkz. ≥1101px bloğundaki
	   açıklama) — header düz üstte, body header üzerine radius kadar biniyor. */
	.degerlerimiz-item__card { overflow: visible; border: none; }
	.degerlerimiz-item__title {
		position: relative;
		border-radius: var(--tada-radius-md) var(--tada-radius-md) 0 0;
	}
	.degerlerimiz-item__body {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--tada-radius-md));
		border-radius: var(--tada-radius-md);
		border: 1px solid var(--tada-gray-200);
		box-shadow: var(--tada-shadow-soft);
		padding-top: calc(clamp(18px, 1.85vw, 36px) + var(--tada-radius-md));
	}
}

@media (max-width: 767px) {
	/* ---- Banner: Hakkımızda mobil hero'sunun (about.css:782-834) aynı
	   ritmi — dış sayfa boşluğu zaten paylaşılan .product-archive__inner'dan
	   geliyor (calc(100% - 32px)), burada yalnızca banner'ın KENDİ iç
	   padding/radius'u about-hero ile eşleştirildi. ---- */
	.degerlerimiz-banner {
		padding: 28px 20px 32px;
		border-radius: 22px;
		gap: 20px;
	}
	.degerlerimiz-banner__content { gap: 14px; }
	.degerlerimiz-banner__pill { height: 28px; padding: 0 14px; }
	/* about-hero__title'daki gibi bir sağ-boşluk ayırma burada uygulanmadı:
	   "Yedi değer, tek" about'un başlığından daha uzun bir dize — dar
	   ekranda rozet için ~110px ayırmak metni 3 satıra bölüyordu. Rozet
	   yalnızca banner'ın üst-sağ köşesinde (üst padding + pill'in bittiği
	   satırın biraz altına kadar) kaldığından ve başlık kendi doğal
	   genişliğinde iki satırda akmaya devam ettiğinden pratikte çakışma
	   oluşmuyor (bkz. 390px render doğrulaması). */
	.degerlerimiz-banner__title {
		font-size: clamp(26px, 8.5vw, 36px);
	}

	/* ---- Rozet: about-hero__badge'in BİREBİR aynı mobil davranışı
	   (about.css:819-828) — panel'in kendi üst-sağ köşesine, padding
	   kenarının hemen içine sabitlenmiş `position:absolute` (masaüstündeki
	   gibi akışa bırakılmış/statik DEĞİL, ve önceki geçişteki gibi beyaz
	   panelin altına da düşürülmedi). ---- */
	.degerlerimiz-banner__badge {
		position: absolute;
		top: 20px;
		right: 20px;
		transform: rotate(-6deg);
		width: clamp(82px, 22vw, 104px);
		height: clamp(82px, 22vw, 104px);
		margin-top: 0;
		border: none;
	}
	.degerlerimiz-banner__badge::before {
		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;
	}
	/* Gövde artık tabanda; burada yalnızca rotasyon kalıyor. */
	.degerlerimiz-banner__badge-copy { transform: rotate(-8deg); }
	/* Mobilde YALNIZCA punto ve satır arası farklı — font ailesi tabandaki
	   Baloo 2 olarak kalıyor. Rozet ÇAPI VE KONUMU DEĞİŞMEDİ (390'da 85.8px,
	   x=264.0 y=207.3, rotate(-6deg)); yalnız "7" 20.28→28.47px ve "değer"
	   11.31→14px büyüdü (@390). Eğim 7.3vw / 3.59vw, 360-430 aralığını
	   oransal tarıyor; tavanlar (34/16px) rozetin kendi 104px tavanına
	   ulaştığı ~470px üstünde punto büyümeye devam etmesin diye var.
	   `margin-top` 0→2px: büyüyen iki satırın optik dengesi için, ≤1100'ün
	   4px'i bu küçük iç çember için fazla. Ölçülen boşluk: 430'da 9.6px,
	   390'da 8.7px, 360'ta 8.4px — taşma yok. */
	.degerlerimiz-banner__badge-count {
		font-size: clamp(26px, 7.3vw, 34px);
	}
	.degerlerimiz-banner__badge-label {
		margin-top: 2px;
		font-size: clamp(12px, 3.59vw, 16px);
	}

	/* Mobilde panel dikey bir karta dönüşüyor (390'da 358x569, oran 0.618),
	   bu yüzden yatay `-flat.webp` (oran 3.567) burada işe yaramıyor: `cover`
	   ile %82.4 yatay kırpma yapıp panelin ortasından geçen tek bir dev yay
	   bırakıyor. Ana sayfa ve Satış Noktalarımız mobil kartlarında onaylanan
	   `-mobile.webp` (720x842, oran 0.855) yalnızca %26.4 kırpıyor ve iki
	   halka odağı köşelerde kalıyor. Böylece üç kırmızı mobil kart da aynı
	   asset'i paylaşıyor. Asset ORTAK — dosyanın kendisine dokunulmamalı.
	   Buradaki eski ::before/::after pseudo-element halka sistemi (--ring-gap
	   65px, 4 yarıçap) tamamen kaldırıldı. */
	.degerlerimiz-banner__rings {
		background-image: url("../../images/global/tada-red-rings-bg-mobile.webp");
	}

	/* ---- Beyaz değer listesi: banner'ın kendi iç genişliğine tam oturan,
	   tek kolon, eşit sol/sağ padding. ---- */
	.degerlerimiz-banner__list {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		row-gap: 14px;
	}
	.degerlerimiz-banner__list-item { padding-bottom: 10px; }

	/* ============================================================================
	 * Timeline — sistematik 3 kolonlu grid: [numara][çizgi+node][kart].
	 * Tek kaynak custom property'ler (--mobile-*) ile hem grid kolonları hem
	 * de node/çizgi hizası buradan türetiliyor; nth-child bazlı özel değer
	 * yok. 390px gerçek render üzerinden ölçülüp kesinleştirildi.
	 * ==========================================================================*/
	.degerlerimiz-timeline {
		--mobile-number-width: 44px;
		--mobile-spine-width: 24px;
		--mobile-timeline-x: calc(var(--mobile-number-width) + var(--mobile-spine-width) / 2);
		--mobile-card-radius: 20px;
		--mobile-card-overlap: 8px;
	}
	/* Bug fix: `align-items:stretch` + numarada header-yüksekliğine göre
	   hesaplanan `padding-top` numarayı kartın en üstüne yapıştırıyordu.
	   Basitleştirildi — `align-items:center` satırın 3 hücresini de
	   (numara/spine/kart) bağımsız olarak satırın dikey merkezinde
	   ortalıyor; numara ve spine (küçük, kendi içeriği kadar yer kaplayan
	   kutular) böylece otomatik olarak AYNI y merkezine oturuyor — node da
	   zaten spine'ın kendi merkezinde olduğundan sonuç:
	   numara centerY = node centerY, ekstra hesap gerekmeden. */
	.degerlerimiz-item {
		display: grid;
		grid-template-columns: var(--mobile-number-width) var(--mobile-spine-width) minmax(0, 1fr);
		align-items: center;
		column-gap: 0;
	}
	.degerlerimiz-item + .degerlerimiz-item { margin-top: 28px; }

	.degerlerimiz-item__number {
		grid-column: 1;
		justify-self: center;
		font-size: 30px;
		line-height: 1;
	}
	.degerlerimiz-item__spine {
		grid-column: 2;
		position: relative;
	}
	.degerlerimiz-item__node {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 12px;
		height: 12px;
		margin: 0;
	}
	/* Çizgi: tek parça, tüm timeline'ın doğal yüksekliğine göre otomatik
	   uzar/kısalır (masaüstü/tablet ile aynı teknik) — spine kolonunun
	   merkeziyle aynı `--mobile-timeline-x` koordinatını kullanır, node ile
	   asla sapamaz. */
	.degerlerimiz-timeline::before {
		left: var(--mobile-timeline-x);
		transform: translateX(-50%);
		width: 2px;
	}

	/* ---- Kart mimarisi: iki bağımsız yüzey, hafif binme ----
	   Önceki tur overlap'i radius'la eşit (20px) tutuyordu — bu, köşe
	   boşluğunu kapatsa da body'yi header'ın içine gereğinden derin
	   gömüyordu (iki yüzey "iç içe geçmiş" okunuyordu). Artık iki AYRI
	   değişken var: `--mobile-card-radius` (körelme/köşe yarıçapı, 20px,
	   DEĞİŞMEDİ) ve `--mobile-card-overlap` (yalnızca ne kadar bindiğini
	   kontrol eden, çok daha küçük bir değer, 8px). Köşe boşluğu problemi
	   overlap'i büyütmek yerine card'ın KENDİSİNE header'la aynı zemin
	   rengi + üst radius verilerek çözüldü — body'nin (artık yalnızca 8px
	   yukarı çekilmiş) yuvarlak köşesinin "kestiği" kalan ~12px'lik alanda
	   artık header'ın kare köşesi değil, card'ın kendi (header'la aynı
	   renkteki) üst-yuvarlak backdrop'ı görünüyor. */
	/* Bug fix: card yalnızca üst köşelerde yuvarlaktı (0 0 alt) — card'ın
	   kendi kutusu body ile TAM aynı alt/sol/sağ sınırları paylaştığından
	   (card'ın yüksekliği title+body'nin doğal akışından geliyor, kendi
	   padding'i yok), body'nin alt köşelerindeki yuvarlanma card'ın kare
	   köşesini örtmüyor, gri (#ece8e4) bir üçgen sızıntı olarak görünüyordu.
	   Card'a da TAM (4 köşe) radius verilmesi, card'ın kendi arka plan
	   boyamasını body ile birebir aynı şekilde kırpar — üst köşelerdeki
	   kasıtlı "backdrop" (bkz. üstteki not) etkilenmez, yalnızca alt
	   köşelerdeki sızıntı ortadan kalkar (arkada kalan sayfa zemini
	   rgb(252,252,252), body'nin rengiyle (251,249,245) pratikte ayırt
	   edilemez, dikiş görünmez). */
	.degerlerimiz-item__card {
		grid-column: 3;
		width: 100%;
		min-width: 0;
		position: relative;
		overflow: visible;
		border: none;
		background: #ece8e4;
		border-radius: var(--mobile-card-radius);
	}
	.degerlerimiz-item__title {
		position: relative;
		z-index: 0;
		width: 100%;
		box-sizing: border-box;
		font-size: 17px;
		/* Bug fix: alt padding 24px iken, 8px'lik overlap düşüldükten sonra
		   görünen boşluk (~20px) üstteki boşluktan (~17px, satır kutusunun
		   üst/alt payandası eşit değil — font metriği kaynaklı) belirgin
		   şekilde fazla duruyordu. 21px, overlap + metrik farkı telafi
		   ederek görsel üst/alt boşluğu ~0.2px farkla eşitliyor (satır
		   yüksekliği/font-size değişmedi, yalnızca padding-bottom). */
		padding: 14px 16px 21px;
		background: #ece8e4;
		border-radius: var(--mobile-card-radius) var(--mobile-card-radius) 0 0;
	}
	.degerlerimiz-item__body {
		position: relative;
		z-index: 1;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-top: calc(-1 * var(--mobile-card-overlap));
		border-radius: var(--mobile-card-radius);
		border: 1px solid var(--tada-gray-200);
		box-shadow: var(--tada-shadow-soft);
		padding: calc(16px + var(--mobile-card-overlap)) 16px 16px;
	}
	.degerlerimiz-item__icon { width: 48px; }
	.degerlerimiz-item__description {
		font-size: 15px;
		line-height: 1.5;
	}
}

/* ============================================================================
 * TABLET (769–1100px) — masaüstü düzeninin ölçeklenmiş hâli.
 *
 * Bu blok dosyanın SONUNDA duruyor çünkü yukarıdaki `max-width:1100px` bloğu
 * ile aynı özgüllükte; kaynak sırası son sözü söylüyor. `max-width:767px`
 * bloğuyla kesişmiyor (aralıklar ayrık), mobil ve ≥1101px masaüstü bu bloktan
 * hiç etkilenmiyor.
 *
 * Masaüstü referansı (1440px'te gerçek render ölçümü — references/qa/
 * render-1440-degerlerimiz-desktop-revision6.png ve XD'nin PDF export'u,
 * Untitled.pdf s.8):
 *   - Timeline DÖNÜŞÜMLÜ DEĞİL: her kayıt tek yönde, [numara][nokta+noktalı
 *     çizgi][kart] — 1231px satır içinde 295.4 / 225.3 / 710.3px
 *     (%24 / %18.3 / %57.7), nokta merkezi %33.2.
 *   - Kart: başlık şeridi 84px (20px font), gövde başlığın 20px üzerine
 *     biner, ikon 74.9px, açıklama 16px/1.5.
 *   - Banner: %50/%50 iki kolon, 47.6px kolon arası; rozet banner'ın
 *     sağ-üst köşesini iki eksende de ~37px taşıyor.
 *
 * Tablette KORUNAN: aynı üç parçalı, dönüşümsüz satır yapısı; aynı iki
 * yüzeyli kart mimarisi; aynı noktalı çizgi; rozetin köşeyi taşıması.
 * Tablette YENİDEN AĞIRLIKLANDIRILAN: kolon oranları. 820px'te masaüstünün
 * %24'lük numara kolonu 244.7px'e denk geliyordu — kart yalnızca %54.3'te
 * kalıyor, sol tarafta 352.8px işlevsiz boşluk oluşuyordu. Dar tuvalde
 * numara/çizgi sabit piksel genişliğe (64px/48px) çekildi, kalan tüm
 * genişlik karta verildi.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {

	/* ---- Banner: masaüstündeki gibi iki kolon (mobildeki tek kolon yığını
	   değil). Oran %38/%62 — masaüstünün %50/%50'si bu genişlikte beyaz
	   listenin iki kolonunu ~142px'e düşürüp değer adlarını sarmalıyordu;
	   %38/%62 sağ listeye ~182px'lik kolonlar bırakıyor. ---- */
	.degerlerimiz-banner {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		align-items: center;
		gap: 28px;
		padding: 32px 34px;
	}
	.degerlerimiz-banner__content {
		max-width: none;
		gap: 14px;
	}
	.degerlerimiz-banner__title {
		font-size: 32px;
		line-height: 1.12;
	}
	.degerlerimiz-banner__description {
		max-width: none;
		font-size: 13px;
		line-height: 1.5;
	}

	/* Beyaz liste: iki kolon (masaüstüyle aynı), banner'ın sağ kolonunu tam
	   dolduruyor — artık panelin bütün altını kaplayan bir bant değil. */
	.degerlerimiz-banner__list {
		border-radius: var(--tada-radius-md);
		padding: 20px 22px;
		column-gap: 18px;
		row-gap: 14px;
	}
	.degerlerimiz-banner__list-item { padding-bottom: 10px; }
	.degerlerimiz-banner__list-number { font-size: 12px; }
	.degerlerimiz-banner__list-name {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.35;
	}

	/* Rozet: masaüstündeki davranış (köşeyi iki eksende taşır) — mobil/tablet
	   ortak bloğundaki `top:16px;right:16px` iç konumu iki kolonlu düzende
	   beyaz listenin ORTASINA düşüyordu.
	   Taşma miktarı masaüstüyle aynı olamaz: 1440'ta rozet banner'ı sağa da
	   37.4px taşıyor, tablette aynısı rozetin döndürülmüş kutusunu (96px kare
	   + rotate(-6deg) = 105.5px) viewport kenarına 3px kala getiriyor. Bu
	   yüzden dikey taşma masaüstüyle eşleşiyor (40px ≈ 37.4px), yatay taşma
	   6px'e indirildi ve kayıp "dışarıdalık" hissi rozetin yukarı çekilmesiyle
	   telafi edildi — rozet beyaz listenin yalnızca sağ-üst köşesine (24px
	   derinlik) biniyor, ilk satırın metnine/alt çizgisine değmiyor.
	   Yukarı taşma H1/breadcrumb satırıyla dikey olarak kesişiyor ama yatay
	   olarak kesişmiyor (breadcrumb ~x256'da bitiyor, rozet x~701'de
	   başlıyor). */
	/* Rozet 96→112px. `top` -40→-52px: rozetin beyaz listeye inen alt ucu
	   (top + yükseklik) 56px'den 60px'e çıkıyor, yani listenin sağ-üst
	   köşesine binme derinliği pratikte korunuyor. Yatay taşma -6px aynı
	   kaldı; döndürülmüş kutu 105.5→123.1px olduğu için en dar noktada
	   (769px) viewport kenarına 4.5px, 1024'te 12.5px boşluk kalıyor. */
	.degerlerimiz-banner__badge {
		top: -52px;
		right: -6px;
		width: 112px;
		height: 112px;
		transform: rotate(-6deg);
	}

	/* ---- Timeline ----
	   Tek kaynaklı kolon sistemi: numara, nokta ve çizgi aynı grid'den
	   türüyor, hiçbir kayda özel `top`/`left` verilmiyor. */
	.degerlerimiz-timeline {
		--tablet-number-width: 64px;
		--tablet-spine-width: 48px;
		--tablet-row-gap: 26px;
	}

	.degerlerimiz-item {
		display: grid;
		grid-template-columns:
			var(--tablet-number-width)
			var(--tablet-spine-width)
			minmax(0, 1fr);
		align-items: center;
		column-gap: 0;
	}
	.degerlerimiz-item + .degerlerimiz-item {
		margin-top: var(--tablet-row-gap);
	}

	.degerlerimiz-item__number {
		grid-column: 1;
		flex: none;
		justify-self: center;
		font-size: 46px;
		line-height: 1;
	}

	/* Nokta ve çizgi artık İKİSİ DE spine kolonunun %50'sinden konumlanıyor —
	   masaüstü/mobildeki paylaşılan `--timeline-x` fikrinin aynısı, ama
	   yüzdesiz: ortak referans kutusu spine'ın kendisi olduğu için ikisi
	   matematiksel olarak sapamaz. */
	.degerlerimiz-item__spine {
		grid-column: 2;
		position: relative;
		align-self: stretch;
	}
	.degerlerimiz-item__node {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 14px;
		height: 14px;
		margin: 0;
	}

	/* Çizgi artık `<ol>` üzerinde tek parça değil, kayıt başına bir parça:
	   böylece İLK noktanın üstünde ve SON noktanın altında artık uzantı
	   kalmıyor (tek parça sürüm, ilk/son kartın yarı yüksekliği kadar —
	   820px'te ~68px — boşa uzuyordu). Ara parçalar satır aralığını da
	   köprülediği için çizgi ilk noktadan son noktaya kesintisiz. */
	.degerlerimiz-timeline::before { content: none; }
	.degerlerimiz-item__spine::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: calc(-1 * var(--tablet-row-gap));
		left: 50%;
		transform: translateX(-50%);
		width: 3px;
		background: repeating-linear-gradient(
			to bottom,
			var(--tada-red, #9e262d) 0 8px,
			transparent 8px 18px
		);
		pointer-events: none;
	}
	.degerlerimiz-item:first-child .degerlerimiz-item__spine::before { top: 50%; }
	.degerlerimiz-item:last-child .degerlerimiz-item__spine::before { bottom: 50%; }

	/* ---- Kart: DOĞAL BLOK AKIŞI (bindirme sistemi tablette kaldırıldı) ----
	 *
	 * KÖK NEDEN: `max-width:1100px` bloğu gövdeye
	 * `margin-top: calc(-1 * var(--tada-radius-md))` (-20px) veriyor ve bunu
	 * `padding-top`a aynı miktarı ekleyerek telafi ediyor — masaüstünde
	 * çalışan, iki yüzeyi kasıtlı olarak bindiren mimari (bkz. ≥1101px
	 * bloğundaki uzun not: 20px binme, gövdenin yuvarlak üst köşesinin
	 * "kestiği" çeyrek-daire alanında başlığın kare alt köşesini gizliyor).
	 * Masaüstünde güvenli çünkü başlık şeridi 84px: 20px binme yalnızca
	 * boş padding alanını yiyor. Tablette şerit 54.8px'e indi ve 18px'lik
	 * başlığın satır kutusu 13px→41.8px arasında; gövdenin üst kenarı
	 * 34.8px'e düşünce metnin son ~7px'i (harflerin alt gövdesi/inişleri)
	 * gövdenin altında kalıyordu. Yani sorun z-index/overflow değil,
	 * GEOMETRİ: bindirme miktarı şerit yüksekliğinden bağımsız sabit.
	 *
	 * ÇÖZÜM: tablette bindirme sistemini tamamen kaldır. Radius ve gölge tek
	 * bir yere — dış wrapper'a — taşındı, `overflow:hidden` çocukların kare
	 * köşelerini zaten kırpıyor, bu yüzden çocukların kendi radius'una hiç
	 * gerek yok ("iki ayrı yuvarlak katman" hissi de böylece kayboluyor).
	 * Kart tek bir panel gibi okunuyor; başlık ile gövde arasında ne binme
	 * ne de boşluk kalıyor.
	 */
	.degerlerimiz-item__card {
		grid-column: 3;
		flex: none;
		min-width: 0;
		overflow: hidden;
		border-radius: var(--tada-radius-md);
		border: 1px solid var(--tada-gray-200);
		box-shadow: var(--tada-shadow-soft);
		background: #fbf9f5;
	}
	.degerlerimiz-item__title {
		/* Sabit `height` yok: `min-height` + padding. Tek satırlık başlık
		   flex ile dikey merkezde durur; "Şeffaflık ve Etik Değerler" gibi
		   iki satıra düşen bir başlıkta şerit kendiliğinden büyür. */
		position: static;
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 46px;
		padding: 11px 22px;
		font-size: 18px;
		line-height: 1.35;
		border-radius: 0;
	}
	.degerlerimiz-item__body {
		position: static;
		z-index: auto;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		gap: 18px;
		/* Negatif margin YOK — gövde şeridin bittiği yerden başlıyor. */
		margin-top: 0;
		padding: 18px 22px;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.degerlerimiz-item__icon { width: 44px; }
	.degerlerimiz-item__description {
		font-size: 15px;
		line-height: 1.5;
	}
}

/* ============================================================================
 * Scroll reveal — kayıt sırası (Faz 4).
 *
 * Timeline'daki her kayıt kendi `data-animate="fade-up"` öğesini taşıyor
 * (bkz. template-parts/degerlerimiz/panel.php): numara + nokta + kart TEK
 * parça olarak, yalnızca gerçekten viewport'a girdiğinde ve yalnızca bir kez
 * açılıyor. Kartlar ızgara değil dikey bir akış olduğundan sales-points/
 * product-archive'daki gibi bir "satır içi sütun" gecikmesi yok; tek gereken,
 * aynı ekranda birlikte açılan kayıtların hepsinin aynı anda patlamaması.
 *
 * Ölçülen eşzamanlılık (gerçek render, rootMargin -8% dahil):
 *   1440x900  → yüklemede yalnızca 1. kayıt eşikte
 *   820x1180  → yüklemede 1-4. kayıtlar aynı anda eşikte
 *   390x844   → yüklemede hiçbiri (timeline fold'un altında), scroll'da 2-3
 * Bu yüzden gecikme, kaç kaydın birlikte göründüğünü tahmin eden bir modül
 * aritmetiği DEĞİL, tek bir kural: ilk kayıt 0ms, sonrakiler 80ms. Birlikte
 * açılan bir grupta sıra asla tersine dönmez (bir eşleşmede ikinci öğe hiçbir
 * zaman birinciden önce başlamaz), zincir 80ms'te biter — kayıt sayısı
 * büyüdükçe uzayan global bir stagger oluşmaz.
 *
 * Yalnız bu sayfaya ait; global fade-up süresi/easing'i (main.css) aynen
 * kullanılıyor, yeni keyframe/motor yok.
 * ==========================================================================*/
.tada-anim .degerlerimiz-timeline > .degerlerimiz-item:not(:first-child) {
	--tada-anim-delay: 80ms;
}