/* ============================================================================
 * Tarihçe sayfası (page-tarihce.php) — /tarihce/. Yalnızca bu sayfada enqueue
 * edilir (is_page('tarihce')); .product-archive__inner/__head/__title/
 * __breadcrumb zaten Hakkımızda/Satış Noktalarımız sayfalarıyla paylaşılıyor
 * (assets/css/pages/product-archive.css) — ölçümü XD'deki Tarihçe panelinin
 * genişliğiyle (1640px @1920) birebir eşleştiği için burada tekrar
 * tanımlanmadı.
 *
 * Kaynak: Tada.xd "Tarihçe" artboard (native 1920×7778, resources.meta.ux
 * localTransform/shape verileri). Ölçülen değerler:
 *   - Panel: 1640×~ (içerik kadar), beyaz zemin, radius 30px.
 *   - İçerik iki kolon: her biri 480px, panelin iç kenarından 245px içeride
 *     (1640 içinde: 245 + 480 + 50 + 90 + 50 + 480 + 245 = 1640).
 *   - Merkez çizgi: 1px, #9e262d, panelin tam ortasında (x=960 @1920), tüm
 *     yıl rozetlerinin dikey merkezinden geçer.
 *   - Yıl rozeti: çap 90px, düz dolgu #9e262d (ek beyaz kenarlık/halka yok —
 *     kullanıcı QA'sında kaldırıldı, bkz. 2026-07 revizyon notu altta);
 *     etiket Montserrat ExtraBold 20px beyaz; görsel kartıyla aynı dikey
 *     merkezde (align-items:center + .tarihce-item__spine, altta).
 *   - Açıklama: Montserrat Regular 16px masaüstü taban / 12.5px masaüstü
 *     override (bkz. ≥1101px bloğu — yalnızca bu sayfa, mobil 16px kalır),
 *     satır yüksekliği 24px/18px, #000; sağ kolonda sola hizalı, sol
 *     kolonda (XD: paragraphAlign="right") sağa hizalı.
 *   - Görsel kartı: 480×300, radius 30px.
 *   - Satır ritmi: rozetler arası ölçülen boşluk sabit ~300px — bu değer
 *     tam olarak görsel kartın kendi yüksekliğine (300px) eşit, yani
 *     satırlar arasında ekstra boşluk yok; bir sonraki satır bir öncekinin
 *     hemen altından başlıyor. Bu nedenle burada da satırlar arası ayrı bir
 *     margin eklenmedi — yükseklik tamamen içerikten (görsel/metin) doğal
 *     olarak oluşuyor; XD'nin birkaç satırda 300 yerine 304px ölçülmesi de
 *     (daha uzun açıklama metninin 3. satıra taşması) bunu doğruluyor.
 *   - Kapanış metni: 960px genişliğinde, ortalı, aynı gövde tipografisi.
 * Kolon/rozet/boşluk oranları panel genişliğine göre yüzde olarak
 * uygulanıyor (480/1150=%41.739, rozet 90/1150=%7.826, boşluk
 * 50/1150=%4.348 — 245px kenar dolgusu çıkarıldıktan sonraki 1150px'lik
 * alana göre), böylece 1101–1600px "küçültülmüş" masaüstünde de XD
 * oranları birebir korunuyor, ayrı bir breakpoint değeri uydurmaya gerek
 * kalmıyor.
 * ==========================================================================*/

.tarihce-panel {
	position: relative;
	background: #fff;
	border-radius: 30px;
	padding: 56px 14.939% 48px;
	margin-bottom: 56px;
}

.tarihce-panel__heading {
	margin: 0 0 40px;
	text-align: center;
	/* XD ölçümü: Montserrat Bold Italic 38px, #000 — bu tema Montserrat
	   italic dosyası içermediğinden (yalnızca normal stil yükleniyor,
	   bkz. main.css @font-face), tarayıcının sentetik eğimi kullanılıyor;
	   ana sayfadaki aynı ifade (.home-timeline__title) "Baloo 2" italic
	   kullanıyor ama bu, o bileşenin kendi (kırmızı zeminli) tasarımı —
	   burada XD'nin ölçülen değeri esas alındı. */
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 38px;
	color: var(--tada-black, #111111);
}

.tarihce-panel__track {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Merkez çizgi: tek parça, listenin doğal yüksekliğine göre otomatik uzar. */
.tarihce-panel__track::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: #9e262d;
	pointer-events: none;
}

.tarihce-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4.348%;
}

/* Çift sıralar ters yönde: DOM sırası media→rozet→açıklama olduğundan,
   satırı ters çevirmek rozeti (ortadaki eleman) her zaman çizgi üzerinde
   ortalı tutar, yalnızca media/açıklama taraf değiştirir — sabit .item-N
   sınıfı veya PHP tarafında yön hesaplaması gerekmez. */
.tarihce-item:nth-child(even) {
	flex-direction: row-reverse;
}

.tarihce-item__media,
.tarihce-item__body {
	flex: 0 1 41.739%;
	min-width: 0;
}

.tarihce-item__media {
	line-height: 0;
}

.tarihce-item__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 300;
	object-fit: cover;
	border-radius: 30px;
}

/* XD'de gerçek görsel bulunmayan kayıtlar için nötr, marka içi placeholder —
   görsel kartıyla aynı ölçü/radius, #cccccc zemin, ortada mevcut beyaz TADA
   logosu (assets/images/footer/tada-logo-white.svg — zaten footer'da
   kullanılan asset, yeni görsel üretilmedi). "Görsel bulunamadı" gibi bir
   bilgilendirme metni yok. */
.tarihce-item__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #cccccc;
}

.tarihce-item__placeholder-logo {
	display: block;
	width: 42%;
	height: auto;
}

.tarihce-item__badge {
	flex: 0 0 7.826%;
	min-width: 48px;
	max-width: 90px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #9e262d;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.tarihce-item__year {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(13px, 1.15vw, 20px);
	color: #fff;
	white-space: nowrap;
}

.tarihce-item__body {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--tada-black, #111111);
}

.tarihce-item__body p {
	margin: 0;
}

/* Sağ kolonda (tek numaralı satırlar) açıklama sola hizalı (varsayılan);
   sol kolonda (çift numaralı satırlar) XD'nin ölçülen paragraphAlign:
   "right" değeri korunuyor. */
.tarihce-item:nth-child(even) .tarihce-item__body {
	text-align: right;
}

.tarihce-panel__closing {
	max-width: 960px;
	margin: 40px auto 0;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--tada-black, #111111);
}

.tarihce-panel__closing p {
	margin: 0;
}

/* ---- Masaüstü (≥1101px) düzeltmeleri —
   1) Açıklama paragrafları 12.5px (yalnızca bu sayfa, yalnızca masaüstü;
      alttaki ≤1100 blokları ve global `p` dokunulmadı).
   2) Görsel/rozet/metin dikey merkezleme: her satırın rozet kolonu
      (.tarihce-item__spine) satırın tam yüksekliğine gerilir
      (align-self: stretch) ve rozeti iki eşit `flex:1` çizgi parçası
      arasına alır — böylece rozet her zaman satırın (yani görsel kartının,
      satırdaki en yüksek eleman olduğu için) dikey merkezine oturur; media/
      body ise üstteki .tarihce-item{align-items:center} ile zaten satırın
      merkezine hizalı. Sabit translateY veya kayda özel piksel yok.
   3) Merkez çizgi: eski tek-parça .tarihce-panel__track::before (tüm liste
      yüksekliğini kaplıyordu, ilk/son rozetin merkezini aşıyordu) masaüstünde
      kapatılıp yerine her satırın kendi rozet-üstü/rozet-altı çizgi
      parçaları geçiyor — bitişik satırların parçaları rozet sınırında
      birleşerek tek kesintisiz çizgi gibi görünüyor, ilk rozetin üstünde ve
      son rozetin altında hiç uzamıyor (ilk/son satırda ilgili parça
      şeffaf). Bu, "rozetler dinamik olarak ortalanıyor" ile "çizgi tam
      rozet merkezinden geçmeli" gereksinimlerini JS'siz, sabit piksel
      olmadan aynı anda karşılamanın tek CSS-only yolu. ---- */
@media (min-width: 1101px) {
	.tarihce-item__body,
	.tarihce-panel__closing {
		font-size: 12.5px;
		line-height: 18px;
	}

	/* Panel üstü/altı boşluk düzeltmesi — yalnızca bu sayfanın kendi section
	   margin/padding'i üzerinden; product-archive__head (paylaşılan
	   breadcrumb/başlık bileşeni) ve footer'a dokunulmadı. Küçük, ölçülü
	   düzeltmeler (bkz. revizyon raporu).
	   Sınır: sayfa zemini (#fcfcfc) ile panel zemini (#fff) arasındaki
	   kontrast çok düşük olduğundan, projenin zaten var olan "beyaz panel
	   sınırı" konvansiyonu uygulandı — about.css'teki .about-story__aside
	   (aynı sorun: "Page background is #fcfcfc... without a border/shadow a
	   white panel is visually indistinguishable from it") ve main.css'in
	   genelinde kullanılan --tada-gray-200 border token'ı; yeni bir renk
	   icat edilmedi. Gölge eklenmedi (XD'nin panel şeklinde gölge yok). */
	.tarihce-panel {
		margin-top: 20px;
		padding-bottom: 64px;
		margin-bottom: 24px;
		border: 1px solid var(--tada-gray-200);
	}

	.tarihce-item__placeholder-logo {
		width: 37%;
	}

	.tarihce-panel__track::before {
		display: none;
	}

	.tarihce-item__spine {
		flex: 0 0 7.826%;
		min-width: 48px;
		max-width: 90px;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Merkez çizgi: XD'deki 1px kalınlık korunuyor, yalnızca rengi
	   yumuşatıldı (düz #9e262d yerine %35 opaklık) — rozetlerin kendi düz
	   kırmızısı değişmedi. */
	.tarihce-item__spine::before,
	.tarihce-item__spine::after {
		content: "";
		flex: 1 0 auto;
		width: 1px;
		background: rgba(158, 38, 45, 0.35);
	}

	.tarihce-item:first-child .tarihce-item__spine::before {
		background: transparent;
	}

	.tarihce-item:last-child .tarihce-item__spine::after {
		background: transparent;
	}

	.tarihce-item__badge {
		flex: none;
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

/* ---- Küçültülmüş masaüstü (1101–1600px) — büyük masaüstünde (≥1601px)
   XD'nin native 1920 ölçüleri (38px başlık, 90px rozet) korunuyor; bu dar
   aralıkta ise product-archive.css'teki aynı desen izleniyor (ör.
   .product-archive__title 38→30px, main.css .home-timeline__title 38→28.5px
   — aynı ifade için zaten kullanılan değer) ve kullanıcı QA'sında istenen
   ~80px rozet hedefi buraya sabitlendi. ---- */
@media (min-width: 1101px) and (max-width: 1600px) {
	.tarihce-panel__heading {
		font-size: 28.5px;
	}

	.tarihce-item__spine {
		flex: 0 0 80px;
		min-width: 80px;
		max-width: 80px;
	}

	/* Rozet 90→80px (%11 küçüldü); yıl etiketi aynı oranda küçültüldü. */
	.tarihce-item__year {
		font-size: clamp(11.5px, 1vw, 17.8px);
	}
}

/* ---- Tablet (768–1100px) ve mobil (≤767px / ≤400px): masaüstündeki sağ/
   sol dönüşümlü düzen bırakılır; tek kolon + sol "rail" düzenine geçilir
   (çizgi+rozet solda sabit, görsel+açıklama sağda üst üste).
   nth-child(even) masaüstü alternansı burada iki tarafta da aynı grid
   yerleşimiyle sıfırlanıyor — yeni kayıt eklendiğinde kayda özel selector
   gerekmeden otomatik çalışır. XD'de ayrı bir mobil/tablet artboard yok;
   genel TADA responsive sistemine (docs/01: içerik önceliği) ve projenin
   mevcut 1100/767/400 breakpoint üçlüsüne (bkz. assets/css/pages/sales-
   points.css) göre davranır.

   2026-07 revizyon — rozet artık gerçekten görselin dikey merkezinde:
   önceki sürüm .tarihce-item__spine'ı TÜM satırın (görsel + gap + metin)
   yüksekliğine geriyor, rozeti bu tam yüksekliğin ortasına alıyordu — metin
   herhangi bir yükseklik kattığında rozet görselin merkezinden gözle
   görülür şekilde aşağı kayıyordu (bildirilen hata). Çözüm: `.tarihce-item`
   artık 2 sütun (rail | içerik) × 2 satırlı bir grid; rail (spine) ve
   görsel AYNI grid satırında (satır 1) — grid'in kendi otomatik satır
   yüksekliği hesaplaması (sabit piksel/JS yok) rail kutusunu tam görsel
   kadar yüksek yapıyor, rozet de bu kutunun içinde ortalanıyor: sonuç
   olarak her zaman görselin kendi yüksekliğinin merkezinde, metnin
   uzunluğundan tamamen bağımsız. Kesintisiz kırmızı çizgi artık rozetin
   kendi (artık kısalmış) kutusuna bağlı değil — `.tarihce-item::before`
   olarak satırın TAMAMINA (görsel+gap+metin) yayılan ayrı, tek bir
   parça: rozetin dolgulu (opak) dairesi z-index ile bu çizginin üstünde
   durup nerede denk gelirse orada üstünü örtüyor — böylece çizgi hâlâ her
   rozetten "geçiyormuş" gibi görünüyor ama artık rozetin tam yüksekliğe
   göre ayrı ayrı önce/sonra parçalara bölünmesi gibi bir piksel hesabına
   ihtiyaç yok. İlk/son kayıtta çizginin panelin üstüne/altına taşmaması
   için :first-child/:last-child üzerinde uç değerler 0'a çekiliyor (önceki
   "şeffaf renk" yerine, aynı görsel sonucu daha basit veren bir teknik). */
@media (max-width: 1100px) {
	.tarihce-panel {
		margin-top: 16px;
		margin-bottom: 32px;
		padding: 40px 24px 40px;
		border-radius: 20px;
		border: 1px solid var(--tada-gray-200);
	}

	.tarihce-panel__heading {
		font-size: 24px;
		margin-bottom: 28px;
	}

	.tarihce-panel__closing {
		font-size: 14.5px;
		line-height: 21px;
	}

	/* Eski tek-parça track çizgisi kapatılıyor — yerine her kaydın kendi
	   `.tarihce-item::before`'ı geçiyor (aşağıda). */
	.tarihce-panel__track::before {
		display: none;
	}

	.tarihce-item,
	.tarihce-item:nth-child(even) {
		display: grid;
		grid-template-columns: 54px 1fr;
		column-gap: 24px;
		row-gap: 12px;
		align-items: stretch;
	}

	.tarihce-item:not(:last-child) {
		margin-bottom: 32px;
	}

	/* Kesintisiz çizgi — bkz. blok üstü açıklama. Yarım-gap (16px = 32/2)
	   kadar üstte/altta taşarak bir sonraki/önceki kaydın çizgisiyle
	   satırlar arası boşluğun (32px) tam ortasında birleşir. */
	.tarihce-item::before {
		content: "";
		position: absolute;
		left: 27px;
		top: -16px;
		bottom: -16px;
		width: 1px;
		background: rgba(158, 38, 45, 0.35);
		z-index: 0;
	}

	.tarihce-item:first-child::before {
		top: 0;
	}

	.tarihce-item:last-child::before {
		bottom: 0;
	}

	.tarihce-item__spine {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tarihce-item__badge {
		position: relative;
		z-index: 1;
		flex: none;
		width: 54px;
		min-width: 0;
		max-width: none;
	}

	.tarihce-item__year {
		font-size: 15px;
	}

	.tarihce-item__media {
		grid-column: 2;
		grid-row: 1;
		/* "Gereksiz şekilde tam ekran büyütülmemeli" — geniş tablette görsel
		   kartı XD'nin kendi 480px genişliğini aşmıyor. */
		max-width: 480px;
	}

	.tarihce-item__body {
		grid-column: 2;
		grid-row: 2;
		font-size: 14.5px;
		line-height: 21px;
		text-align: left;
	}

	.tarihce-item:nth-child(even) .tarihce-item__body {
		text-align: left;
	}
}

/* ---- Tablet (769–1100px) — yapısal timeline satırı.
   Sorun: yukarıdaki ≤1100 bloğu görseli (satır 1) ve açıklamayı (satır 2)
   ALT ALTA koyuyor; görsel de XD'nin 480px masaüstü kartını olduğu gibi
   taşıdığı için tek kayıt 820px'te ~355px yer kaplıyor ve sayfa "büyütülmüş
   mobil galeri" gibi görünüyordu (ölçüm: ilk üç kayıt 1105px).
   Çözüm: bu bantta kayıt 3 kolonlu tek satır olur —
       [ray/rozet] [görsel] [açıklama]
   Ölçüler XD'nin masaüstü oranlarından türetildi, uydurulmadı:
     - Görsel kolonu: %34 (820px'te 242.8px). XD'nin 480/300 kart oranı
       (1.6) `.tarihce-item__image`'ın kendi aspect-ratio'sundan zaten
       geliyor → 820px'te 242.8×151.7px. Yüzde kullanıldı ki bandın iki ucu
       (769→1100) arasında oran korunsun ve 1101px'teki masaüstü 480px'e
       geçiş sıçramasın; transform:scale() ile küçültme YOK, slot doğal
       grid genişliğinden geliyor.
     - Ray kolonu 74px, rozet 58px (masaüstü 90px → tablet 58px; mobil 46px
       ile masaüstü arasında tutarlı basamak), rozet ray kolonunun tam
       ortasında → merkez, satır solundan 37px içeride; çizgi de tam orada.
     - Dikey hizalama: üç öğe de (rozet / görsel / açıklama) satırın tek bir
       ortak merkezine hizalı — `.tarihce-item { align-items: center }`.
       Böylece çizgi → yıl → görsel → metin ilişkisi tek yatay kayıt gibi
       okunuyor; kısa açıklamalarda metin görselin üstüne yapışmıyor, uzun
       açıklamada satır doğal büyüdüğünde üçü birden yeni merkeze kayıyor.
       Kayda özel `top`/`align-self` değeri veya ortak sabit yükseklik yok;
       tek kural bütün yıllar için geçerli.
   Çizgi: ≤1100'den miras alınan tek parça `.tarihce-item::before` korunuyor,
   yalnızca 30px'lik yeni satır aralığına göre yarım-gap (15px) taşması ve
   uçların rozet merkezinde (satır yüksekliğinin %50'si) kesilmesi
   ayarlandı — böylece ilk rozetin üstünde/son rozetin altında uzamıyor. */
@media (min-width: 769px) and (max-width: 1100px) {
	.tarihce-panel {
		padding: 36px 28px 36px;
	}

	.tarihce-panel__heading {
		font-size: 28px;
		margin-bottom: 32px;
	}

	.tarihce-item,
	.tarihce-item:nth-child(even) {
		grid-template-columns: 74px minmax(0, 34%) minmax(0, 1fr);
		column-gap: 22px;
		align-items: center;
	}

	.tarihce-item:not(:last-child) {
		margin-bottom: 30px;
	}

	/* 74px ray kolonunun merkezi 37px; 1px'lik çizgi 36.5px'ten başlayınca
	   kendi merkezi de tam 37px olur, yani rozetin merkeziyle birebir. */
	.tarihce-item::before {
		left: 36.5px;
		top: -15px;
		bottom: -15px;
	}

	/* Çizginin uçları rozet merkezinde başlar/biter. Rozet artık satırın
	   dikey merkezinde olduğundan bu nokta sabit bir piksel değil, satır
	   yüksekliğinin tam yarısı — yüzdeyle ifade edildi ki uzun açıklamayla
	   büyüyen satırlarda da kendiliğinden doğru kalsın (kayda özel `top`
	   değeri yok). İlk kayıtta çizgi rozetin üstüne, son kayıtta altına
	   taşmaz. */
	.tarihce-item:first-child::before {
		top: 50%;
	}

	.tarihce-item:last-child::before {
		top: -15px;
		bottom: 50%;
		height: auto;
	}

	.tarihce-item__spine {
		grid-column: 1;
		grid-row: 1;
	}

	.tarihce-item__badge {
		width: 58px;
	}

	.tarihce-item__media {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	/* Panel radius'u bu bantta 20px; kart radius'u da aynı dile uyar
	   (masaüstündeki 30px, 480px'lik karta göre ölçülmüştü). */
	.tarihce-item__image {
		border-radius: 20px;
	}

	/* Gerçek görseli olmayan yıllar arka arkaya geldiğinde (2006–2025)
	   placeholder logosu %42'de sayfanın ana odağı hâline geliyordu; daralan
	   slotta oran küçültüldü (masaüstü zaten %37 kullanıyor) — kart ölçüsü,
	   zemini ve satır yüksekliği DEĞİŞMEDİ. */
	.tarihce-item__placeholder-logo {
		width: 32%;
	}

	.tarihce-item__body {
		grid-column: 3;
		grid-row: 1;
	}

	.tarihce-item__body,
	.tarihce-panel__closing {
		font-size: 14.5px;
		line-height: 22px;
	}
}

/* ---- Mobil (401–767px): aynı sol-rail yapısı, biraz daha dar rail ve
   14px gövde metni.
   Bu tur (mobil görsel rötuş):
   1) Çizgi görünürlüğü: 1100px bloğundan miras alınan %35 opaklık mobilde
      zayıf kalıyordu — yalnızca burada, aynı proje kırmızısı (158,38,45)
      üzerinden %55'e çıkarıldı (yeni ton icat edilmedi). Rozet zaten kendi
      z-index'iyle çizginin önünde durduğu için çakışma yok.
   2) Rozet–içerik mesafesi: sütun boşluğu (column-gap) 24→16px (rail
      genişliği/rozet çapı DEĞİŞMEDİ, yalnızca içerik başlangıcı içeri
      çekildi).
   3) Kayıt altı boşluk: tek sistematik kural — .tarihce-panel__track artık
      flex-column + row-gap:32px kullanıyor (1100px bloğundaki
      margin-bottom:32px'in mobildeki karşılığı, burada 0'a çekilip
      row-gap'e devredildi ki iki kural üst üste binmesin). Kayda özel
      margin yok; içerik doğal yüksekliğiyle büyümeye devam ediyor.
   4) line-height 20→21px (küçük nefes payı; font-size/family/weight/renk
      değişmedi). ---- */
@media (max-width: 767px) {
	.tarihce-panel {
		padding: 32px 18px 32px;
	}

	.tarihce-panel__track {
		display: flex;
		flex-direction: column;
		row-gap: 32px;
	}

	.tarihce-item,
	.tarihce-item:nth-child(even) {
		grid-template-columns: 46px 1fr;
		column-gap: 16px;
	}

	.tarihce-item:not(:last-child) {
		margin-bottom: 0;
	}

	.tarihce-item::before {
		left: 23px;
		background: rgba(158, 38, 45, 0.55);
	}

	.tarihce-item__badge {
		width: 46px;
	}

	.tarihce-item__year {
		font-size: 13px;
	}

	.tarihce-item__body,
	.tarihce-panel__closing {
		font-size: 14px;
		line-height: 21px;
	}
}

/* ---- Küçük mobil (≤400px): rail biraz daha daralır, dar ekranda yatay
   taşma oluşmaz; rozet–içerik mesafesi aynı ~6px mantığıyla küçültüldü
   (60→54px). ---- */
@media (max-width: 400px) {
	.tarihce-panel {
		padding: 28px 14px 28px;
	}

	.tarihce-item,
	.tarihce-item:nth-child(even) {
		grid-template-columns: 42px 1fr;
		column-gap: 12px;
	}

	.tarihce-item::before {
		left: 21px;
	}

	.tarihce-item__badge {
		width: 42px;
	}

	.tarihce-item__year {
		font-size: 12px;
	}
}