/*
 * S10 · Neden Balkan Tercüme Bürosu? (#s10-guvence) — Figma 14:116 (1440) / 15:373 (390).
 * Başlık → 3 güven sütunu → protokol bandı (aside) → kitle sekmeleri (dikey liste + lacivert panel; ≤1024 çip satırı).
 * Kapsam: .bt-hs--s10-guvence. Ölçüler figma-home/build/s10-guvence/spec.json.
 */

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

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

.bt-hs--s10-guvence .s10-heading {
	max-width: 760px;
}

.bt-hs--s10-guvence .s10-lead {
	max-width: 760px;
}

/* ---------------------------------------------------------------- Güven sütunları */

.bt-hs--s10-guvence .s10-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
}

.bt-hs--s10-guvence .s10-pillar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 8px 32px 8px 0;
	border-right: 1px solid var(--hs-line);
}

.bt-hs--s10-guvence .s10-pillar:last-child {
	border-right: 0;
}

.bt-hs--s10-guvence .s10-pillar__marker {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--hs-gold);
	border-radius: 50%;
	background: var(--hs-white);
	color: var(--hs-gold);
}

.bt-hs--s10-guvence .s10-pillar__marker .bt-icon {
	width: 18px;
	height: 18px;
}

.bt-hs--s10-guvence .s10-pillar__title {
	color: var(--hs-ink);
	font-size: var(--hs-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.bt-hs--s10-guvence .s10-pillar__text {
	color: var(--hs-muted);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

/* ---------------------------------------------------------------- Protokol bandı */

.bt-hs--s10-guvence .s10-banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	gap: 48px;
	padding: 24px;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(90deg, rgba(36, 54, 94, 0.75) 0%, rgba(36, 54, 94, 0) 62%), #131d34;
	color: var(--hs-white);
}

.bt-hs--s10-guvence .s10-ring {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

/* Eş merkezli halkalar, merkez (60, alt −20); bant taşmayı keser. */
.bt-hs--s10-guvence .s10-banner__ring--white {
	left: -170px;
	bottom: -210px;
	width: 460px;
	height: 460px;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.bt-hs--s10-guvence .s10-banner__ring--gold {
	left: -90px;
	bottom: -130px;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(241, 186, 79, 0.16);
}

.bt-hs--s10-guvence .s10-banner__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	min-width: 0;
	padding: 32px 0 32px 32px;
}

.bt-hs--s10-guvence .s10-banner__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.bt-hs--s10-guvence .s10-banner__rule {
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--hs-gold);
}

.bt-hs--s10-guvence .s10-banner__title {
	color: var(--hs-white);
	font-size: var(--hs-fs-display);
	font-weight: 800;
	line-height: var(--hs-lh-display);
	letter-spacing: var(--hs-ls-display);
}

.bt-hs--s10-guvence .s10-banner__text {
	color: var(--hs-on-navy-cool);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

/* Kurum adları: düz metin hapları (tıklanmaz). */
.bt-hs--s10-guvence .s10-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-hs--s10-guvence .s10-pill {
	display: inline-flex;
	align-items: center;
	min-height: 35px;
	padding: 4px 14px;
	border: 1px solid var(--hs-white-a18);
	border-radius: var(--hs-radius-pill);
	background: var(--hs-white-a07);
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-chip);
	font-weight: 600;
	line-height: var(--hs-lh-ui);
	white-space: nowrap;
}

.bt-hs--s10-guvence .s10-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

/* Cam düğme: üzerine gelince çerçeve .55, zemin .14, 1 px kalkış (tema .bt-fcta__btn--ghost). */
.bt-hs--s10-guvence .bt-hs-btn--glass:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.55);
	transform: translateY(-1px);
}

.bt-hs--s10-guvence .s10-banner__media {
	position: relative;
	flex: 0 0 460px;
	width: 460px;
	min-height: 200px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--hs-navy-deep-800);
	box-shadow: 0 0 40px rgba(241, 186, 79, 0.22);
}

.bt-hs--s10-guvence .s10-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(241, 186, 79, 0.45);
	border-radius: inherit;
	pointer-events: none;
}

.bt-hs--s10-guvence .s10-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ---------------------------------------------------------------- Kitle sekmeleri */

.bt-hs--s10-guvence .s10-tabs {
	display: grid;
	grid-template-columns: minmax(0, 392fr) minmax(0, 776fr);
	column-gap: 32px;
	align-items: stretch;
}

.bt-hs--s10-guvence .s10-tablist {
	display: flex;
	grid-row: 1;
	grid-column: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bt-hs--s10-guvence .s10-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 53px;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--hs-radius-row);
	background: transparent;
	color: var(--hs-navy);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: var(--hs-lh-label);
	text-align: start;
	transition: background-color var(--hs-dur-fast) ease, border-color var(--hs-dur-fast) ease, box-shadow var(--hs-dur-fast) ease, color var(--hs-dur-fast) ease;
}

.bt-hs--s10-guvence .s10-tab__bar {
	display: none;
	flex: none;
	width: 4px;
	height: 24px;
	border-radius: 2px;
	background: var(--hs-gold);
}

.bt-hs--s10-guvence .s10-tab__label {
	flex: 1 1 auto;
	min-width: 0;
}

.bt-hs--s10-guvence .s10-tab .bt-icon {
	width: 18px;
	height: 18px;
}

.bt-hs--s10-guvence .s10-tab__check,
.bt-hs--s10-guvence .s10-tab__chev {
	display: none;
}

.bt-hs--s10-guvence .s10-tab__check {
	color: var(--hs-gold);
}

.bt-hs--s10-guvence .s10-tab__chev {
	color: var(--hs-navy);
}

.bt-hs--s10-guvence .s10-tab:hover {
	background: var(--hs-surface);
	color: var(--hs-navy);
}

.bt-hs--s10-guvence .s10-tab:hover .s10-tab__chev {
	display: inline-block;
}

.bt-hs--s10-guvence .s10-tab[aria-selected="true"] {
	background: var(--hs-navy);
	color: var(--hs-white);
}

.bt-hs--s10-guvence .s10-tab[aria-selected="true"] .s10-tab__bar {
	display: block;
}

.bt-hs--s10-guvence .s10-tab[aria-selected="true"] .s10-tab__chev {
	display: inline-block;
	color: var(--hs-gold);
}

/* Odak: 3 px #4A3F9F sekmenin içinde (Figma); seçili (lacivert) sekmede dışarıda, beyaz zeminde görünsün. */
.bt-hs--s10-guvence .s10-tab:focus-visible {
	outline: 3px solid var(--hs-focus);
	outline-offset: -3px;
	border-radius: var(--hs-radius-row);
}

.bt-hs--s10-guvence .s10-tab[aria-selected="true"]:focus-visible {
	outline-offset: 2px;
}

/* Paneller aynı ızgara hücresinde; gizliler (hidden="until-found") boyutsuz kalır, tıklamayı engellemez. */
.bt-hs--s10-guvence .s10-panel {
	display: flex;
	grid-row: 1;
	grid-column: 2;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--hs-radius-bento);
}

.bt-hs--s10-guvence .s10-panel[hidden] {
	align-self: start;
	pointer-events: none;
}

.bt-hs--s10-guvence .s10-panel__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 40px;
	overflow: hidden;
	border-radius: var(--hs-radius-bento);
	background: var(--hs-navy);
	box-shadow: var(--hs-shadow-navy-bento);
	color: var(--hs-white);
}

/* Eş merkezli altın halkalar (merkez sağ −50 / üst −30). */
.bt-hs--s10-guvence .s10-panel__ring--outer {
	top: -130px;
	right: -50px;
	width: 200px;
	height: 200px;
	border: 1px solid var(--hs-gold-a26);
}

.bt-hs--s10-guvence .s10-panel__ring--inner {
	top: -95px;
	right: -15px;
	width: 130px;
	height: 130px;
	border: 2px solid var(--hs-gold-a28);
}

.bt-hs--s10-guvence .s10-panel__title {
	color: var(--hs-white);
	font-size: var(--hs-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.bt-hs--s10-guvence .s10-panel__text {
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

.bt-hs--s10-guvence .s10-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-hs--s10-guvence .s10-link {
	color: var(--hs-white);
	text-decoration: none;
}

.bt-hs--s10-guvence a.s10-link:hover {
	color: var(--hs-white);
	text-decoration: none;
}

/* ---------------------------------------------------------------- Tablet (sütunlar 3'lü kalır; bant ve sekmeler mobil düzen) */

@media (max-width: 1024px) {
	.bt-hs--s10-guvence .s10-banner {
		flex-direction: column;
		gap: 24px;
		padding: 16px 16px 28px;
		border-radius: var(--hs-radius-band-mobile);
	}

	.bt-hs--s10-guvence .s10-banner__ring--white {
		top: -70px;
		right: -60px;
		bottom: auto;
		left: auto;
		width: 240px;
		height: 240px;
	}

	.bt-hs--s10-guvence .s10-banner__ring--gold {
		top: -30px;
		right: -30px;
		bottom: auto;
		left: auto;
		width: 150px;
		height: 150px;
	}

	.bt-hs--s10-guvence .s10-banner__media {
		order: -1;
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		max-height: 320px;
		border-radius: 14px;
	}

	.bt-hs--s10-guvence .s10-banner__body {
		flex: none;
		gap: 24px;
		padding: 0 8px;
	}

	.bt-hs--s10-guvence .s10-banner__head {
		gap: 16px;
	}

	.bt-hs--s10-guvence .s10-banner__title {
		font-size: var(--hs-fs-band);
		font-weight: 700;
		line-height: var(--hs-lh-band);
		letter-spacing: var(--hs-ls-band);
	}

	/* Sekmeler: sarılan çip satırı + tam genişlik panel. */
	.bt-hs--s10-guvence .s10-tabs {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.bt-hs--s10-guvence .s10-tablist {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.bt-hs--s10-guvence .s10-panel {
		grid-row: 2;
		grid-column: 1;
	}

	.bt-hs--s10-guvence .s10-tab {
		gap: 6px;
		width: auto;
		min-height: 39px;
		padding: 4px 18px;
		border: 1px solid var(--hs-line);
		border-radius: var(--hs-radius-pill);
		background: var(--hs-white);
		font-size: var(--hs-fs-chip);
		line-height: var(--hs-lh-ui);
	}

	/* 39 px çipin dokunma alanı 45 px (satır aralığı 8). */
	.bt-hs--s10-guvence .s10-tab::after {
		content: "";
		position: absolute;
		inset: -3px 0;
	}

	.bt-hs--s10-guvence .s10-tab__label {
		flex: 0 1 auto;
	}

	.bt-hs--s10-guvence .s10-tab:hover {
		background: var(--hs-white);
		border-color: var(--hs-navy-400);
		box-shadow: inset 0 0 0 0.5px var(--hs-navy-400);
	}

	.bt-hs--s10-guvence .s10-tab:hover .s10-tab__chev,
	.bt-hs--s10-guvence .s10-tab[aria-selected="true"] .s10-tab__chev,
	.bt-hs--s10-guvence .s10-tab[aria-selected="true"] .s10-tab__bar {
		display: none;
	}

	.bt-hs--s10-guvence .s10-tab[aria-selected="true"] {
		border-color: var(--hs-navy);
		background: var(--hs-navy);
		box-shadow: none;
		color: var(--hs-white);
	}

	.bt-hs--s10-guvence .s10-tab[aria-selected="true"] .s10-tab__check {
		display: inline-block;
	}

	.bt-hs--s10-guvence .s10-tab:focus-visible {
		border-radius: var(--hs-radius-pill);
	}
}

/* Sütunlar dar ekranda alt alta, ayırıcı alt çizgi. */
@media (max-width: 899px) {
	.bt-hs--s10-guvence .s10-pillars {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.bt-hs--s10-guvence .s10-pillar {
		padding: 8px 32px 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--hs-line);
	}

	.bt-hs--s10-guvence .s10-pillar:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/* ---------------------------------------------------------------- Mobil (Figma 390) */

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

	/* Figma 390: H2 metin kutusu dar; "Neden Balkan / Tercüme Bürosu?" iki satır. */
	.bt-hs--s10-guvence .s10-title {
		max-width: 270px;
	}

	.bt-hs--s10-guvence .s10-banner__media {
		height: 200px;
		aspect-ratio: auto;
	}

	.bt-hs--s10-guvence .s10-banner__text {
		font-size: var(--hs-fs-body-16);
	}

	.bt-hs--s10-guvence .s10-banner__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.bt-hs--s10-guvence .s10-banner__actions .bt-hs-btn {
		width: 100%;
	}

	/* Tam genişlik düğmede uzun (çevrilmiş) etiket taşmasın, sarsın. */
	.bt-hs--s10-guvence .s10-banner__actions .bt-hs-btn {
		white-space: normal;
	}

	.bt-hs--s10-guvence .s10-panel__inner {
		padding: 28px 24px;
	}

	.bt-hs--s10-guvence .s10-panel__ring--outer {
		top: -48px;
		right: -64px;
		width: 160px;
		height: 160px;
	}

	.bt-hs--s10-guvence .s10-panel__ring--inner {
		top: -30px;
		right: -40px;
		width: 100px;
		height: 100px;
	}

	.bt-hs--s10-guvence .s10-links {
		flex-direction: column;
		align-self: stretch;
	}

	.bt-hs--s10-guvence .s10-link {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- Hareket */

@media (prefers-reduced-motion: reduce) {
	.bt-hs--s10-guvence .bt-hs-btn:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.bt-hs--s10-guvence .s10-tab,
	.bt-hs--s10-guvence .s10-pill {
		border: 1px solid ButtonText;
	}

	.bt-hs--s10-guvence .s10-tab[aria-selected="true"] {
		outline: 2px solid Highlight;
	}
}

/* EN başlık ve bağlantı/düğme etiketleri (360 "Ask About Discount / Terms"): son satıra tek sözcük düşmesin (320–414 "Why Balkan Tercüme / Bürosu?"). 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 (yeterince kısa sayılmıyor), bu yüzden balance. 2026-10-12, EN sayfa QA. */
.bt-hs--s10-guvence:lang(en) h2,
.bt-hs--s10-guvence:lang(en) a {
	text-wrap: balance;
}

/* IT afiş başlığı: açgözlü kırılım 390–1440'ta "professionali" sözcüğünü tek başına son satıra bırakıyordu. Ayarlardaki
   "per i<NBSP>membri" ile birlikte balance → 1440 "Accordi di sconto / per i membri delle / associazioni professionali".
   TR ve diğer diller değişmez (yalnız :lang(it)). 2026-10-12, IT sayfa QA. */
.bt-hs--s10-guvence:lang(it) .s10-banner__title {
	text-wrap: balance;
}