/*
 * S08 · Nasıl Çalışıyoruz? (#s08-surec) — Figma 14:114 (1440) / 15:371 (390).
 * Masaüstü (≥1200): 5 sütunlu adım ızgarası, halka merkezleri arasında 2 px altın bağlayıcı.
 * ≤1199: dikey ray (40 px halka + altın çizgi). 1025–1199 tasarlanmadı; orada 5 sütun (≈185 px) çok dar kalıyordu
 * (H3'ler iki satır, e-posta kırılıyor), bu yüzden ray kullanılır. 1200–1280'de e-posta "@" sonrasından kırılır
 * (şablon <wbr>). Bölüm ritmi home-base --hs-pad-y (86.4 @1440, 56 @390).
 * Figma'ya özgü değerler (15/23.25 adım metni, 1.5 px halka, 12 px satır köşesi, aralık 20/14/10/6) burada yazılıdır.
 */

.bt-hs--s08-surec .bt-hs__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* ---------------------------------------------------------------- Başlık */

.bt-hs--s08-surec .s08-head {
	gap: 16px;
	max-width: 640px;
}

.bt-hs--s08-surec .s08-h2 {
	max-width: 560px;
}

/* Figma tek satırlık metin kutusunu tam piksele yuvarlar (H2 41.75 → 42, 29.12 → 30): tek satırda aynı yükseklik, çok
   satırda etkisiz. */
.bt-hs--s08-surec .s08-h2 {
	min-height: round(up, 1lh, 1px);
}

.bt-hs--s08-surec .s08-intro {
	max-width: 640px;
}

/* ---------------------------------------------------------------- Adımlar (masaüstü) */

.bt-hs--s08-surec .s08-stepper {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 20px;
	align-items: start;
}

/* Halka 01 merkezinden halka 05 merkezine (Figma x 26 → 1002, y 25, 2 px); halkaların arkasında. */
.bt-hs--s08-surec .s08-connector {
	position: absolute;
	top: 25px;
	left: 26px;
	right: calc((100% - 80px) / 5 - 26px);
	z-index: 0;
	height: 2px;
	background: var(--hs-gold);
}

.bt-hs--s08-surec .s08-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.bt-hs--s08-surec .s08-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	/* Figma 1.5 px halka. Chrome kenarlık kalınlığını aygıt pikseline yuvarlar (1x ekranda 1.5 → 1 px, halka
	   Figma'dan ince görünür); iç gölge yuvarlanmaz, 1x ve 2x'te Figma çizimiyle aynı. */
	box-shadow: inset 0 0 0 1.5px var(--hs-gold);
	border-radius: 50%;
	background: var(--hs-white);
	color: var(--hs-navy);
	font-size: var(--hs-fs-card-title);
	font-weight: 700;
	line-height: 22.5px;
	letter-spacing: -0.01em;
}

.bt-hs--s08-surec .s08-step__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.bt-hs--s08-surec .s08-step__title {
	color: var(--hs-ink);
	font-size: var(--hs-fs-h3);
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.005em;
}

.bt-hs--s08-surec .s08-step__text {
	color: var(--hs-muted);
	font-size: var(--hs-fs-card-text);
	line-height: 23.25px;
}

/* ---------------------------------------------------------------- Seçenek satırları */

.bt-hs--s08-surec .s08-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bt-hs--s08-surec .s08-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius-row);
	background: var(--hs-white);
	color: var(--hs-ink);
	font-size: var(--hs-fs-card-text);
	line-height: 23.25px;
}

/* Altın nokta (Figma: çok satırlı satırda metin kutusunun üstüyle hizalı, tek satırda ortada). */
.bt-hs--s08-surec .s08-option::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hs-gold);
}

.bt-hs--s08-surec .s08-options--compact .s08-option {
	align-items: center;
	min-height: 42px;
}

.bt-hs--s08-surec .s08-option__body {
	flex: 1 1 auto;
	min-width: 0;
}

.bt-hs--s08-surec .s08-option__lead {
	display: block;
	font-weight: 700;
}

/* E-posta kırılma noktası (<wbr> "@" sonrası) yalnız 5 sütunun dar aralığında (1200–1280 px) etkin; başka her
   genişlikte Figma'daki satır kırılımı korunur. */
.bt-hs--s08-surec .s08-wbr {
	display: none;
}

@media (min-width: 1200px) and (max-width: 1280px) {
	.bt-hs--s08-surec .s08-wbr {
		display: inline;
	}
}

/* E-posta + hemen ardından gelen noktalama (yerelleştirilmiş metin "…info@balkantercume.com."; span widget.php
   rich_text()) ≥ 1281 px'te bölünmez: 180 px gövdede 181 px, nokta tek başına alt satıra düşmek yerine satırın 12 px
   sağ iç boşluğuna ~1–4 px taşar. TR metninde e-postadan sonra boşluk geldiği için span yok. 2026-10-12, RU sayfa QA. */
@media (min-width: 1281px) {
	.bt-hs--s08-surec .s08-mail {
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------- Alt satır: süre + CTA */

.bt-hs--s08-surec .s08-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.bt-hs--s08-surec .s08-duration {
	flex: 0 1 520px;
	color: var(--hs-muted);
	font-size: var(--hs-fs-body);
	line-height: 27.2px;
}

.bt-hs--s08-surec .s08-ctas {
	gap: 12px;
}

/* Lacivert hap: yalnız Figma "Shadow/Navy button" üst iç parıltısı (Elementor ".elementor a { box-shadow: none }"
   (0,1,1) home-base değerini sildiği için kapsamda verilir). Düğmelerin alt gölgesi yok (kullanıcı kararı 2026-10-12);
   beyaz haplar gölgesiz. */
.bt-hs--s08-surec .s08-btn--quote {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------- ≤1199: dikey ray */

@media (max-width: 1199px) {
	/* stretch: masaüstü ızgarasının align-items: start değeri burada adımları içerik genişliğine büzüyordu (adım 05
	   seçenekleri 532, adım 01 seçenekleri 640 px); tüm gövdeler aynı 640 px sınırını kullanır. */
	.bt-hs--s08-surec .s08-stepper {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.bt-hs--s08-surec .s08-connector {
		display: none;
	}

	.bt-hs--s08-surec .s08-step {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}

	/* Ray çizgisi: halkanın altından adımın sonuna (sonraki halkaya) kadar. */
	.bt-hs--s08-surec .s08-step::after {
		content: "";
		position: absolute;
		top: 40px;
		bottom: 0;
		left: 19px;
		width: 2px;
		background: var(--hs-gold);
	}

	.bt-hs--s08-surec .s08-step:last-child::after {
		content: none;
	}

	.bt-hs--s08-surec .s08-step__num {
		width: 40px;
		height: 40px;
		font-size: var(--hs-fs-small);
		font-weight: 600;
		line-height: 21.7px;
		letter-spacing: 0;
	}

	.bt-hs--s08-surec .s08-step__body {
		gap: 8px;
		max-width: 640px;
		padding: 6px 0 24px;
	}
}

/* ---------------------------------------------------------------- ≤767: Figma 390 */

@media (max-width: 767px) {
	.bt-hs--s08-surec .bt-hs__inner {
		gap: 32px;
	}

	.bt-hs--s08-surec .s08-head {
		gap: 12px;
	}

	.bt-hs--s08-surec .s08-step__body {
		max-width: none;
	}

	.bt-hs--s08-surec .s08-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.bt-hs--s08-surec .s08-duration {
		flex: none;
	}

	.bt-hs--s08-surec .s08-ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.bt-hs--s08-surec .s08-ctas .bt-hs-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- Zorlanmış renkler */

/* Zorlanmış renklerde iç gölge ve arka plan rengi düşer: halka kenarlığa, bağlayıcı/ray çizgileri sistem rengine
   döner (sıra görsel olarak okunur kalır). */
@media (forced-colors: active) {
	.bt-hs--s08-surec .s08-step__num {
		border: 1.5px solid CanvasText;
	}

	.bt-hs--s08-surec .s08-connector,
	.bt-hs--s08-surec .s08-step::after {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

/* EN adım başlığı ve seçenek satırı: son satıra tek sözcük düşmesin (1440 "Price and Delivery / Time", "Wet-Signed
   Printed / Copy"). TR'nin Figma'yla aynı açgözlü kırılımı değişmez (yalnız :lang(en)); Chrome'un pretty'si
   bu son satırlara dokunmuyor, bu yüzden balance. 2026-10-12, EN sayfa QA. */
.bt-hs--s08-surec:lang(en) h3,
.bt-hs--s08-surec:lang(en) .s08-option__body {
	text-wrap: balance;
}

/* DE teslim seçenekleri (adım 05, tek satırlık etiketler): 1280–1440'ta "Abholung im Büro in / Kızılay" son satırda tek
   sözcük; balance ile "Abholung im / Büro in Kızılay". Yalnız kompakt liste: adım 01'deki e-posta satırında balance,
   bağlantıdan sonraki noktayı tek başına alt satıra itiyordu. 2026-10-12, DE sayfa QA. */
.bt-hs--s08-surec:lang(de) .s08-options--compact .s08-option__body {
	text-wrap: balance;
}