/*
 * S07 · Tercüme Fiyatları Nasıl Belirlenir? (#s07-ucret) — Figma 14:113 (1440) / 15:370 (390).
 * Masaüstü: 664fr / 472fr ızgara (aralık 64, üstten hizalı); solda başlık + yanıt, 2 × 2 etken listesi (üst kılçizgi),
 * resmî ücret notu; sağda lacivert maliyet paneli (r 24, dolgu 32, aralık 16). ≤1024: tek sütun (panel en altta,
 * tam genişlik), etkenler 2 sütun kalır. ≤767 (Figma 390): etkenler tek sütun, panel düğmeleri tam genişlik.
 * Bölüm ritmi home-base --hs-pad-y (86.4 @1440, 72 tablet, 56 @390).
 * Figma'ya özgü değerler burada yazılıdır: 28 px halka (1.5 px altın, 16 px onay), 140 px maliyet etiketi sütunu,
 * aralık 14/2, lacivert üstünde beyaz .18 kılçizgi, panel gölgesinin yayılmasız çizimi.
 * Figma metin kutuları yüksekliği tam piksele yuvarlar (27.2 → 28, 22.5 → 23, 21.7 → 22): tek satırlık kutularda
 * min-height: round(up, 1lh, 1px) aynı yüksekliği verir, çok satırda etkisizdir.
 */

/* ---------------------------------------------------------------- Izgara */

.bt-hs--s07-ucret .s07-split {
	display: grid;
	grid-template-columns: minmax(0, 664fr) minmax(0, 472fr);
	column-gap: 64px;
	row-gap: 32px;
	align-items: start;
}

.bt-hs--s07-ucret .s07-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* ---------------------------------------------------------------- Başlık + yanıt */

.bt-hs--s07-ucret .s07-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* Figma'da H2 iki satırdır ("Tercüme Fiyatları / Nasıl Belirlenir?"); metin düz kalır, kırılım dengelemeyle gelir. */
.bt-hs--s07-ucret .s07-h2 {
	max-width: 560px;
	line-height: var(--hs-lh-h2);
	line-height: round(up, calc(var(--hs-fs-h2) * 1.12), 0.5px);
	text-wrap: balance;
}

.bt-hs--s07-ucret .s07-answer {
	color: var(--hs-muted);
	font-size: var(--hs-fs-lead);
	line-height: var(--hs-lh-lead);
	line-height: round(up, calc(var(--hs-fs-lead) * 1.55), 0.2px);
}

.bt-hs--s07-ucret .s07-answer strong {
	color: var(--hs-ink);
	font-weight: 700;
}

/* ---------------------------------------------------------------- Fiyat etkenleri (Icon list/Row Hairline) */

.bt-hs--s07-ucret .s07-factors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.bt-hs--s07-ucret .s07-factor {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--hs-line);
}

/* 28 px beyaz halka, 1.5 px altın iç çizgi (Chrome 1.5 px kenarlığı 1 px'e yuvarlar; iç gölge 1.5'i korur), 16 px onay. */
.bt-hs--s07-ucret .s07-factor__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hs-white);
	box-shadow: inset 0 0 0 1.5px var(--hs-gold);
	color: var(--hs-gold);
}

.bt-hs--s07-ucret .s07-factor__mark .bt-icon {
	width: 16px;
	height: 16px;
}

.bt-hs--s07-ucret .s07-factor__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
}

.bt-hs--s07-ucret .s07-factor__label {
	display: block;
	min-height: round(up, 1lh, 1px);
	color: var(--hs-ink);
	font-size: var(--hs-fs-body);
	font-weight: 700;
	line-height: var(--hs-lh-body);
}

/* Figma metni 278 px sütunda Chrome'dan biraz geniş çizer ("… sayısı. Çeviri" 277.8 px): 1 px iç boşlukla aynı
   kırılım; 0.25 px alt boşluk Figma'nın 3 satırlık kutuyu 69.75 → 70'e yuvarlamasını karşılar. */
.bt-hs--s07-ucret .s07-factor__text {
	display: block;
	padding-inline-end: 1px;
	padding-bottom: 0.25px;
	color: var(--hs-muted);
	font-size: var(--hs-fs-card-text);
	line-height: var(--hs-lh-small);
}

/* ---------------------------------------------------------------- Resmî ücret notu */

.bt-hs--s07-ucret .s07-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--hs-muted);
	font-size: var(--hs-fs-small);
	line-height: 22px;
}

.bt-hs--s07-ucret .s07-note__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--hs-navy);
}

.bt-hs--s07-ucret .s07-note__text {
	position: relative; /* 1 px: bkz. panel başlığı notu */
	top: 1px;
	flex: 1 1 0;
	min-width: 0;
}

/* ---------------------------------------------------------------- Lacivert maliyet paneli */

/* Gölge: Figma Shadow/Quote band (−36 yayılma) kırpmasız çerçevede yayılmasız çizilir; iç 1 px beyaz .06 halka da
   çizilmez (referansta panel kenarı doğrudan #1B2A4A). Figma'nın 64 px bulanıklığı Chrome'da 56 px'e denk düşer
   (ref-desktop sağ/sol/alt/üst düşüşüne uydurma: RMSE 0.8; 64 px'te 3.0). */
.bt-hs--s07-ucret .s07-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 32px;
	border-radius: var(--hs-radius-bento);
	background: var(--hs-navy);
	box-shadow: 0 36px 56px 0 rgba(14, 23, 41, 0.65);
	color: var(--hs-white);
}

/* Panel başlığı, ipucu ve not metni: Figma yazıyı kutusunun içinde Chrome'dan ~1 px aşağıda çizer (1440 ve 390'da
   ölçüldü); kutu yüksekliği aynı kalır, yalnız yazı 1 px kaydırılır (top). */
.bt-hs--s07-ucret .s07-panel__title {
	position: relative;
	top: 1px;
	min-height: round(up, 1lh, 1px);
	color: var(--hs-white);
	font-size: var(--hs-fs-card-title);
	font-weight: 700;
	line-height: var(--hs-lh-card-title);
	letter-spacing: -0.01em;
}

.bt-hs--s07-ucret .s07-lines {
	display: flex;
	flex-direction: column;
}

/* Dayanak sütunu 120 px'ten daralırsa (≈ 380 px altı ekranlar; 360'ta "Kurum / harçlarına / göre" üç satıra
   bölünüyordu) etiketin altına iner; Figma genişliklerinde (390: 130 px, 1440: 252 px) etiketin yanındadır. */
.bt-hs--s07-ucret .s07-line {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2px 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hs-white-a18);
}

.bt-hs--s07-ucret .s07-line__label {
	display: block;
	flex: 0 0 140px;
	min-width: 0;
	min-height: round(up, 1lh, 1px);
	color: var(--hs-white);
	font-size: var(--hs-fs-body);
	font-weight: 700;
	line-height: var(--hs-lh-body);
}

.bt-hs--s07-ucret .s07-line__basis {
	flex: 1 1 120px;
	min-width: 0;
	padding-bottom: 0.5px;
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-card-text);
	line-height: var(--hs-lh-small);
}

.bt-hs--s07-ucret .s07-closing {
	padding-bottom: 0.5px;
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-card-text);
	line-height: var(--hs-lh-small);
}

.bt-hs--s07-ucret .s07-response {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hs-on-navy-cool);
	font-size: var(--hs-fs-small);
	line-height: 22px;
}

.bt-hs--s07-ucret .s07-response__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--hs-gold);
}

.bt-hs--s07-ucret .s07-response__text {
	flex: 1 1 0;
	min-width: 0;
}

/* CTA yığını: WhatsApp (altın) · fiyat teklifi (cam), aralık 8, sola hizalı (yeni sekme ipucu yok, kullanıcı kararı
   2026-10-12). */
.bt-hs--s07-ucret .s07-ctas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* ---------------------------------------------------------------- Tablet (≤1024): tek sütun, panel en altta */

@media (max-width: 1024px) {
	.bt-hs--s07-ucret .s07-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- Mobil (≤767, Figma 390) */

@media (max-width: 767px) {
	.bt-hs--s07-ucret .s07-head {
		gap: 12px;
	}

	.bt-hs--s07-ucret .s07-note {
		line-height: 21.75px;
	}

	.bt-hs--s07-ucret .s07-closing {
		padding-bottom: 0.25px;
	}

	.bt-hs--s07-ucret .s07-factors {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.bt-hs--s07-ucret .s07-ctas {
		align-items: stretch;
	}

	.bt-hs--s07-ucret .s07-btn {
		width: 100%;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------- Dar mobil (≤359, tasarlanmadı) */

@media (max-width: 359px) {
	.bt-hs--s07-ucret .s07-panel {
		padding: 24px;
	}

	.bt-hs--s07-ucret .s07-btn {
		padding-inline: 16px;
	}
}