/*
 * S03 · Tasdik (#s03-tasdik) — Figma 14:109 (1440) / 15:366 (390). Yalnız .bt-hs--s03-tasdik kapsamında.
 * Masaüstü taban · tablet ≤1024 px (zincir dikey) · ≤900 px tablo kartlara döner · mobil ≤767 px (Figma 390).
 */

/* ---------------------------------------------------------------- Bölüm, zemin, dekor */

.bt-hs--s03-tasdik {
	--s03-on-dark: var(--hs-on-dark);           /* #D9D7E0 */
	--s03-cool: var(--hs-on-navy-cool);         /* #C9CDD8 */
	--s03-cool-muted: var(--hs-on-navy-cool-muted); /* #AAB2C5 */
	--s03-line: var(--hs-white-a18);
	--s03-fill: var(--hs-white-a08);

	overflow: hidden;
}

.bt-hs--s03-tasdik[data-band="navy"] {
	background:
		radial-gradient(42% 55% at 92% 90%, rgba(47, 70, 117, 0.5) 0%, rgba(47, 70, 117, 0) 100%),
		linear-gradient(162.44deg, #1b2a4a 9.18%, #131d34 58.17%, #0f1626 90.83%);
}

.bt-hs--s03-tasdik .s03-ring {
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
}

.bt-hs--s03-tasdik .s03-ring--a {
	top: -90px;
	right: -60px;
	width: 300px;
	height: 300px;
	border: 2px solid var(--hs-gold-a28);
}

.bt-hs--s03-tasdik .s03-ring--b {
	top: -170px;
	right: -130px;
	width: 460px;
	height: 460px;
	border: 1px solid var(--hs-gold-a26);
}

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

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

.bt-hs--s03-tasdik .s03-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
}

.bt-hs--s03-tasdik .s03-title {
	/* Figma 390'da satır 349,5 px'te kırılır (tarayıcı ölçümü 349,45): kutudan 1 px dar. */
	max-width: min(560px, calc(100% - 1px));
	padding-bottom: 0.7px; /* Figma metin kutusu tam piksele yuvarlanır (125.25 → 126) */
	color: var(--hs-white);
	font-size: var(--hs-fs-h2);
	font-weight: 700;
	line-height: var(--hs-lh-h2);
	letter-spacing: var(--hs-ls-h2);
}

.bt-hs--s03-tasdik .s03-answer {
	padding-bottom: 0.7px;
	color: var(--s03-on-dark);
	font-size: var(--hs-fs-lead);
	line-height: var(--hs-lh-lead);
}

.bt-hs--s03-tasdik .s03-answer strong {
	color: var(--hs-white);
	font-weight: 700;
}

/* ---------------------------------------------------------------- Tablo (masaüstü) */

.bt-hs--s03-tasdik .s03-table-wrap {
	border-radius: 6px;
}

/* Tablo kabından taşarsa (script.js .is-scroll + odak durağı) yatay kaydırılır; taşmıyorsa kap düz bir kutudur. */
.bt-hs--s03-tasdik .s03-table-wrap.is-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.bt-hs--s03-tasdik .s03-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: none;
	font-size: var(--hs-fs-card-text);
}

.bt-hs--s03-tasdik .s03-caption {
	caption-side: top;
	padding: 0 0 12.3px;
	color: var(--s03-on-dark);
	font-size: 14px;
	font-weight: 600;
	line-height: 21.7px;
	text-align: left;
}

.bt-hs--s03-tasdik .s03-col--level {
	width: 264px;
}

.bt-hs--s03-tasdik .s03-col--who {
	width: 240px;
}

.bt-hs--s03-tasdik .s03-thead th {
	padding: 12px 16px 12.6px;
	border: 0;
	border-bottom: 1px solid var(--hs-gold);
	background: none;
	color: var(--s03-cool);
	font-size: 12px;
	font-weight: 800;
	line-height: 14.4px;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

.bt-hs--s03-tasdik .s03-row > th,
.bt-hs--s03-tasdik .s03-row > td {
	padding: 20px 16px 20.25px;
	border: 0;
	border-bottom: 1px solid var(--s03-line);
	background: none;
	text-align: left;
	vertical-align: top;
}

.bt-hs--s03-tasdik .s03-thead th:first-child,
.bt-hs--s03-tasdik .s03-row > :first-child {
	padding-left: 0;
}

.bt-hs--s03-tasdik .s03-row > td {
	color: var(--s03-on-dark);
	font-size: var(--hs-fs-card-text);
	font-weight: 400;
	line-height: 23.25px;
}

.bt-hs--s03-tasdik .s03-rowhead {
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 20.25px;
}

.bt-hs--s03-tasdik .s03-rowlink {
	color: var(--hs-white);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 20.25px;
	text-decoration: underline;
	text-decoration-color: var(--hs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
}

.bt-hs--s03-tasdik a.s03-rowlink:hover {
	color: var(--hs-white);
	text-decoration-color: var(--hs-gold-hover);
}

/* Dokunma alanı ≥44 px (yazı düzenini ve odak halkasını değiştirmeden): satır bağlantısı 19 + 26 = 45, HCCH 18 + 26 = 44. */
.bt-hs--s03-tasdik :is(a.s03-rowlink, .s03-source__link) {
	position: relative;
}

.bt-hs--s03-tasdik :is(a.s03-rowlink, .s03-source__link)::after {
	content: "";
	position: absolute;
	inset: -13px -4px;
}

/* Yayın kapısında düz metin: beyaz/600, alt çizgi yok. */
.bt-hs--s03-tasdik .s03-rowlink--plain {
	text-decoration: none;
}

.bt-hs--s03-tasdik .s03-cell-label {
	display: none;
}

/* ---------------------------------------------------------------- Belge yönü (sekmeler) */

.bt-hs--s03-tasdik .s03-segment__label {
	margin-bottom: 10.3px;
	color: var(--s03-on-dark);
	font-size: 14px;
	font-weight: 600;
	line-height: 21.7px;
}

.bt-hs--s03-tasdik .s03-track {
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 24px;
	padding: 4px;
	border: 1px solid var(--s03-line);
	border-radius: var(--hs-radius-pill);
	background: var(--s03-fill);
}

.bt-hs--s03-tasdik .s03-tab {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: var(--hs-radius-pill);
	background: transparent;
	color: var(--s03-on-dark);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 20.25px;
	white-space: nowrap;
	transition: background-color var(--hs-dur-fast) ease, color var(--hs-dur-fast) ease;
}

.bt-hs--s03-tasdik .s03-tab .bt-icon {
	display: none;
	width: 18px;
	height: 18px;
	color: var(--hs-navy);
}

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

.bt-hs--s03-tasdik .s03-tab[aria-selected="true"] .bt-icon {
	display: inline-block;
}

.bt-hs--s03-tasdik .s03-tab:not([aria-selected="true"]):hover {
	background: var(--s03-fill);
	color: var(--hs-white);
}

.bt-hs--s03-tasdik .s03-tab:focus-visible {
	outline: 3px solid var(--hs-gold);
	outline-offset: 0;
	border-radius: var(--hs-radius-pill);
}

/* ---------------------------------------------------------------- Zincir (masaüstü: 3 sütun, sağa ok) */

.bt-hs--s03-tasdik .s03-chain {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	column-gap: 50px;
	counter-reset: s03-step;
}

.bt-hs--s03-tasdik .s03-step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	counter-increment: s03-step;
}

.bt-hs--s03-tasdik .s03-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 11px;
	left: calc(100% + 16px);
	width: 18px;
	height: 18px;
	background: url("img/icon-arrow-gold-18.svg") center / 18px 18px no-repeat;
}

.bt-hs--s03-tasdik .s03-step__lead {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--s03-line);
	border-radius: var(--hs-radius-pill);
	background: var(--s03-fill);
	color: var(--hs-white);
	font-size: var(--hs-fs-chip);
	font-weight: 600;
	line-height: 16.8px;
}

.bt-hs--s03-tasdik .s03-step__lead::before {
	content: counter(s03-step);
	content: counter(s03-step) / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--hs-gold);
	border-radius: 50%;
	color: var(--hs-gold);
	font-size: var(--hs-fs-badge);
	font-weight: 700;
	line-height: 15.6px;
	font-variant-numeric: tabular-nums;
}

.bt-hs--s03-tasdik :is(.s03-step__label, .s03-branch__label) {
	min-width: 0;
}

.bt-hs--s03-tasdik :is(.s03-step__note, .s03-branch__note) {
	display: block;
	margin-top: 6px;
	padding-bottom: 0.6px;
	color: var(--s03-cool);
	font-size: var(--hs-fs-small);
	line-height: 21.7px;
}

.bt-hs--s03-tasdik .s03-fork {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	margin-top: 10px;
}

.bt-hs--s03-tasdik .s03-branch {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bt-hs--s03-tasdik .s03-branch__lead {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 12px 6px 8px;
	border: 1px dashed var(--hs-gold-a50);
	border-radius: var(--hs-radius-pill);
	color: var(--hs-white);
	font-size: var(--hs-fs-chip-13);
	font-weight: 600;
	line-height: 15.6px;
}

.bt-hs--s03-tasdik .s03-branch__lead::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("img/marker-branch-ring-hook-gold-20.svg") center / 20px 20px no-repeat;
}

/* Metin içi bağlantılar (dal notları, koordinasyon satırı): beyaz, yazı tipinin alt çizgisi (currentColor). */
.bt-hs--s03-tasdik :is(.s03-step__note, .s03-branch__note, .s03-coord) a {
	color: var(--hs-white);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: from-font;
	text-underline-offset: auto;
	text-decoration-skip-ink: none;
}

.bt-hs--s03-tasdik :is(.s03-step__note, .s03-branch__note, .s03-coord) a:hover {
	color: var(--hs-white);
	text-decoration-color: var(--hs-gold);
}

/* ---------------------------------------------------------------- Alt bilgi */

.bt-hs--s03-tasdik .s03-foot {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bt-hs--s03-tasdik :is(.s03-coord, .s03-note, .s03-source) {
	max-width: 760px;
}

.bt-hs--s03-tasdik .s03-coord {
	padding-bottom: 0.6px;
	color: var(--s03-on-dark);
	font-size: var(--hs-fs-body);
	line-height: 27.2px;
}

.bt-hs--s03-tasdik .s03-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px 20.6px 20px;
	border: 1px solid var(--hs-gold-a50);
	border-radius: var(--hs-radius-glass);
	background: var(--s03-fill);
	color: var(--s03-on-dark);
	font-size: var(--hs-fs-body);
	line-height: 27.2px;
}

.bt-hs--s03-tasdik .s03-note__icon {
	flex: none;
	width: 18px;
	height: 18px;
}

.bt-hs--s03-tasdik .s03-note__text {
	min-width: 0;
}

.bt-hs--s03-tasdik .s03-source {
	padding-bottom: 0.3px;
	color: var(--s03-cool-muted);
	font-size: var(--hs-fs-small);
	line-height: 21.7px;
}

.bt-hs--s03-tasdik .s03-source__link {
	color: var(--hs-white);
	text-decoration: underline;
	text-decoration-color: var(--hs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
}

.bt-hs--s03-tasdik .s03-source__link:hover {
	color: var(--hs-white);
	text-decoration-color: var(--hs-gold-hover);
}

.bt-hs--s03-tasdik .s03-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--hs-on-dark-line);
}

.bt-hs--s03-tasdik .s03-next__line {
	max-width: var(--hs-measure);
	color: var(--hs-white);
	font-size: var(--hs-fs-body);
	font-weight: 500;
	line-height: 27.2px;
}

/* Yeni sekme ipucu yok (kullanıcı kararı 2026-10-12): düğme satırın doğrudan öğesi, sütun sarmalayıcısı kalktı. Düğme
   gölgesi yok (kullanıcı kararı 2026-10-12, home-base). */
.bt-hs--s03-tasdik .s03-wa {
	flex: none;
}

/* ---------------------------------------------------------------- Tablet (≤1024): zincir dikey */

@media (max-width: 1024px) {
	.bt-hs--s03-tasdik .bt-hs__inner {
		gap: 40px;
	}

	.bt-hs--s03-tasdik .s03-col--level {
		width: 22%;
	}

	.bt-hs--s03-tasdik .s03-col--who {
		width: 18%;
	}

	.bt-hs--s03-tasdik .s03-chain {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		max-width: 704px;
	}

	.bt-hs--s03-tasdik .s03-step + .s03-step {
		margin-top: 34px;
	}

	.bt-hs--s03-tasdik .s03-step:not(:last-child)::after {
		top: calc(100% + 8px);
		left: 16px;
		background-image: url("img/icon-arrow-down-gold-18.svg");
	}

	.bt-hs--s03-tasdik .s03-fork {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding-left: 20px;
	}
}

/* ---------------------------------------------------------------- ≤900: tablo satırları kartlara döner */

@media (max-width: 900px) {
	/* Halkalar (Figma 390: 260 px üstte, 170 px altta); tablette giriş metninin üstünden geçmesin diye 900 px'ten. */
	.bt-hs--s03-tasdik .s03-ring--a {
		top: -161.2px;
		right: -130px;
		width: 260px;
		height: 260px;
	}

	.bt-hs--s03-tasdik .s03-ring--b {
		top: auto;
		right: -76.5px;
		bottom: -126px;
		width: 170px;
		height: 170px;
	}

	/* display:block tablo rollerini siler; işaretlemedeki açık role öznitelikleri bunu karşılar. */
	.bt-hs--s03-tasdik .s03-table,
	.bt-hs--s03-tasdik .s03-table tbody,
	.bt-hs--s03-tasdik .s03-row,
	.bt-hs--s03-tasdik .s03-row > th,
	.bt-hs--s03-tasdik .s03-row > td {
		display: block;
		width: auto;
	}

	.bt-hs--s03-tasdik .s03-table colgroup {
		display: none;
	}

	.bt-hs--s03-tasdik .s03-thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bt-hs--s03-tasdik .s03-caption {
		display: block;
		padding: 0 0 12px;
		font-size: 12px;
		font-weight: 400;
		line-height: normal;
	}

	.bt-hs--s03-tasdik .s03-table tbody {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.bt-hs--s03-tasdik .s03-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		border: 1px solid var(--s03-line);
		border-radius: var(--hs-radius-glass);
		background: var(--hs-white-a07);
	}

	.bt-hs--s03-tasdik .s03-row > th,
	.bt-hs--s03-tasdik .s03-row > td {
		padding: 0;
		border: 0;
	}

	.bt-hs--s03-tasdik .s03-row > td {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding-top: 12px;
		padding-bottom: 0.25px;
		border-top: 1px solid var(--s03-line);
	}

	.bt-hs--s03-tasdik .s03-row > th {
		padding-bottom: 0.75px;
	}

	.bt-hs--s03-tasdik .s03-row > td:last-child {
		padding-bottom: 0.75px;
	}

	.bt-hs--s03-tasdik .s03-cell-label {
		display: block;
		color: var(--s03-cool-muted);
		font-size: 12px;
		font-weight: 800;
		line-height: 14.4px;
		letter-spacing: 0.04em;
		padding-bottom: 0.6px;
	}
}

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

@media (max-width: 767px) {
	.bt-hs--s03-tasdik[data-band="navy"] {
		background:
			radial-gradient(42% 55% at 92% 90%, rgba(47, 70, 117, 0.5) 0%, rgba(47, 70, 117, 0) 100%),
			linear-gradient(116.31deg, #1b2a4a 9.18%, #131d34 58.17%, #0f1626 90.83%);
	}

	.bt-hs--s03-tasdik .bt-hs__inner {
		gap: 32px;
	}

	.bt-hs--s03-tasdik .s03-head {
		gap: 12px;
	}

	.bt-hs--s03-tasdik .s03-track {
		flex-direction: column;
		width: 100%;
		border-radius: 16px;
	}

	.bt-hs--s03-tasdik .s03-tab {
		justify-content: flex-start;
		width: 100%;
		border-radius: 12px;
		white-space: normal;
	}

	.bt-hs--s03-tasdik .s03-tab:focus-visible {
		border-radius: 12px;
	}

	.bt-hs--s03-tasdik .s03-next {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.bt-hs--s03-tasdik .s03-next__line {
		width: 100%;
		max-width: none;
	}

	.bt-hs--s03-tasdik .s03-wa {
		width: 100%;
	}
}

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

@media (forced-colors: active) {
	.bt-hs--s03-tasdik .s03-tab[aria-selected="true"] {
		border: 2px solid Highlight;
	}

	.bt-hs--s03-tasdik :is(.s03-step__lead, .s03-branch__lead, .s03-note, .s03-track) {
		border-color: CanvasText;
	}

	.bt-hs--s03-tasdik .s03-step:not(:last-child)::after,
	.bt-hs--s03-tasdik .s03-branch__lead::before {
		forced-color-adjust: none;
	}
}

/* EN başlık: son satıra tek sözcük düşmesin (1024–1440 ve 414 "… Apostille / Legalization"). 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--s03-tasdik:lang(en) h2 {
	text-wrap: balance;
}

/* DE başlık: 1024–1440 ve 390–414'te "… notarielle Beglaubigung und / Apostille" son satırda tek sözcük; balance ile
   "… / notarielle Beglaubigung / und Apostille". 2026-10-12, DE sayfa QA. */
.bt-hs--s03-tasdik:lang(de) h2 {
	text-wrap: balance;
}
