/* ============================================================================
 * 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 ince halka deseni — about-hero__rings ile aynı teknik (tek
   radial-gradient, sonlu halka sayısı), banner'ın kendi köşe yuvarlaklığına
   kırpılır (border-radius:inherit + overflow:hidden), böylece rozet/badge
   (ayrı, kırpılmayan bir katman) köşeyi taşarken halkalar taşmaz. */
.degerlerimiz-banner__rings {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at 38% 46%,
			transparent 0 120px, rgba(255, 255, 255, 0.07) 120px 122px,
			transparent 122px 240px, rgba(255, 255, 255, 0.07) 240px 242px,
			transparent 242px 360px, rgba(255, 255, 255, 0.06) 360px 362px,
			transparent 362px 480px, rgba(255, 255, 255, 0.05) 480px 482px,
			transparent 482px 600px, rgba(255, 255, 255, 0.04) 600px 602px,
			transparent 602px);
}

.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);
}
.degerlerimiz-banner__badge-count {
	font-family: Montserrat, 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: Montserrat, 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;
	}
	.degerlerimiz-banner__badge-copy {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		transform: rotate(-8deg);
	}
	.degerlerimiz-banner__badge-count {
		font-family: "Baloo 2", Arial, sans-serif;
		font-weight: 800;
		font-size: clamp(24px, 2.8vw, 42px);
		line-height: 1;
		color: #111111;
	}
	.degerlerimiz-banner__badge-label {
		margin-top: 4px;
		font-family: Montserrat, Arial, sans-serif;
		font-weight: 600;
		font-size: clamp(13px, 1.05vw, 19px);
		color: #111111;
	}

	/* İki ayrı halka grubu — sales-points.css:241-256'daki
	   `.sales-points__banner::before` (min-width:1101px katmanı) BYTE-LEVEL
	   aynen kopyalandı: merkezler (%15/%114 ve %85/-%14), 5 halka yarıçapı
	   (82/164/246/328/410px), 2px kalınlık, rgba(255,255,255,0.12) opacity.
	   Denenen 6. dış halka (492px) kaldırıldı: banner genişliği 1231px'te
	   merkezler arası mesafe 861.7px — 492px yarıçaplı iki halka üst üste
	   binmek için 984px'e ihtiyaç duyar (122px çakışma). Güvenli üst sınır
	   ~418px (20-30px boşluk için), yani onaylı 410px'in yalnızca ~8px
	   ötesi — görünür yeni bir halka için yeterli değil, bu yüzden 5 halkalı
	   onaylı hâline dönüldü (410px'te iki halka arası temiz boşluk: 41.7px).
	   sales-points.css DEĞİŞTİRİLMEDİ. */
	.degerlerimiz-banner__rings {
		background:
			radial-gradient(circle at 15% 114%,
				transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
				transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
				transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
				transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
				transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
				transparent 412px),
			radial-gradient(circle at 85% -14%,
				transparent 0 82px, rgba(255, 255, 255, 0.12) 82px 84px,
				transparent 84px 164px, rgba(255, 255, 255, 0.12) 164px 166px,
				transparent 166px 246px, rgba(255, 255, 255, 0.12) 246px 248px,
				transparent 248px 328px, rgba(255, 255, 255, 0.12) 328px 330px,
				transparent 330px 410px, rgba(255, 255, 255, 0.12) 410px 412px,
				transparent 412px);
	}

	.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: 100px;
		height: 100px;
		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); }
	.degerlerimiz-banner__badge-count { font-size: 26px; }
	.degerlerimiz-banner__badge-label { font-size: 11px; }

	.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;
	}
	/* Bug fix: bu kural önceki turda yalnızca rotasyonu taşıyordu — wrapper'ın
	   `display:flex;flex-direction:column` gövdesi hiçbir yerde (ne base'te
	   ne mobil blokta) tanımlı değildi, bu yüzden `<span>` varsayılan
	   `inline` kaldı ve "7"/"değer" yan yana/eğik akıyordu. Artık masaüstü/
	   tabletteki gibi tam flex-column gövdesi burada da tanımlı — sayı üstte,
	   etiket altta, ikisi de yatay merkezde, ortak wrapper -8deg dönüyor. */
	.degerlerimiz-banner__badge-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		transform: rotate(-8deg);
	}
	.degerlerimiz-banner__badge-count { font-size: clamp(19px, 5.2vw, 24px); }
	.degerlerimiz-banner__badge-label { font-size: clamp(10px, 2.9vw, 13px); }

	/* Bug fix v3: v2'nin 56/120/178/198px dizisi EŞİT ADIMLI değildi — son
	   aralık (198-178=20px) öncekilerden (62, 58px) belirgin şekilde dar
	   kalıyor, en dış halka bir önceki halkaya "sıkışmış" görünüyordu.
	   Ayrıca en dış yarıçap (200px) banner'ın orta bölgesine tam
	   ulaşamıyordu. Çözüm: tek bir `--ring-gap` değişkeninin katları
	   üzerinden kurulan 4 yarıçap (1×/2×/3×/4× gap) — eşitlik matematiksel
	   olarak kod seviyesinde garanti, elle ayarlanan bağımsız sayılar değil.
	   Gap 65px seçilerek en dış yarıçap 260px'e çıkarıldı (v2'de 200px) —
	   köşe merkezinden banner ortasına olan gerçek mesafeye (~272px, gerçek
	   render ölçümü) çok daha yakın. Kutu boyutu da en dış yarıçapla birlikte
	   büyüdü (~560px) ki halka son stop'tan önce kırpılmasın. Merkezin
	   köşeden içeri giriş miktarı (50px) DEĞİŞMEDİ — yalnızca yarıçaplar
	   büyüdü, konsantrik merkez aynı kaldı. */
	.degerlerimiz-banner__rings {
		background: none;
		--ring-gap: 65px;
		--ring-r1: var(--ring-gap);
		--ring-r2: calc(var(--ring-gap) * 2);
		--ring-r3: calc(var(--ring-gap) * 3);
		--ring-r4: calc(var(--ring-gap) * 4);
		--ring-size: calc(var(--ring-r4) * 2 + 40px);
	}

	.degerlerimiz-banner__rings::before,
	.degerlerimiz-banner__rings::after {
		content: "";
		position: absolute;
		width: var(--ring-size);
		aspect-ratio: 1;
		border-radius: 50%;
		pointer-events: none;
		background: radial-gradient(circle at 50% 50%,
			transparent 0 var(--ring-r1),
			rgba(255, 255, 255, 0.12) var(--ring-r1) calc(var(--ring-r1) + 2px),
			transparent calc(var(--ring-r1) + 2px) var(--ring-r2),
			rgba(255, 255, 255, 0.1) var(--ring-r2) calc(var(--ring-r2) + 2px),
			transparent calc(var(--ring-r2) + 2px) var(--ring-r3),
			rgba(255, 255, 255, 0.08) var(--ring-r3) calc(var(--ring-r3) + 2px),
			transparent calc(var(--ring-r3) + 2px) var(--ring-r4),
			rgba(255, 255, 255, 0.06) var(--ring-r4) calc(var(--ring-r4) + 2px),
			transparent calc(var(--ring-r4) + 2px));
	}

	/* Üst grup: sağ üst köşeden başlar, merkezi köşenin ~50px içine düşer
	   (rozetin hemen arkasına/çevresine denk gelir) — en dış yaylar
	   başlığın sağına ve banner'ın yatay orta bölgesine doğru uzanır. */
	.degerlerimiz-banner__rings::before {
		top: calc(-1 * var(--ring-size) / 2 + 50px);
		right: calc(-1 * var(--ring-size) / 2 + 50px);
	}

	/* Alt grup: sol alt köşeden başlar, merkezi köşenin ~50px içine düşer
	   (beyaz panelin sol-alt köşesinin hemen arkasına denk gelir) — panel
	   onu büyük ölçüde örter, yalnızca panel dışında kalan sol/alt kırmızı
	   şeritte, banner genişliğinin ortasına doğru yayılan halkalar olarak
	   görünür. */
	.degerlerimiz-banner__rings::after {
		bottom: calc(-1 * var(--ring-size) / 2 + 50px);
		left: calc(-1 * var(--ring-size) / 2 + 50px);
	}

	/* ---- 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). */
	.degerlerimiz-banner__badge {
		top: -40px;
		right: -6px;
		width: 96px;
		height: 96px;
		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;
}