/*
 * S09 · Google Yorumları (#s09-yorumlar) — Figma 14:115 (1440) / 15:372 (390); states 69:2136.
 * Değerler: bt-home-design/figma-home/build/s09-yorumlar/spec.json. Kapsam: .bt-hs--s09-yorumlar.
 *
 * Bant: lacivert + özel gradyan (175.02° masaüstü, 159.2° mobil; 170° Figma dolgusunun en-boy eşdeğeri) ve sağ
 * üstte lacivert parıltı; iki altın halka (dekor katmanı kırpar). Kart 360 (mobil 298 ≈ %85, tablet 340) × en az 280;
 * metin 4 satırda kısaltılır: kart her zaman 280 kalır (Figma yüksekliği; iskelet → kart geçişinde kayma yok).
 */

/* ---------------------------------------------------------------- Bant ve dekor */

.bt-hs--s09-yorumlar[data-band="navy"] {
	background:
		radial-gradient(42% 60% at 88% 8%, rgba(61, 90, 150, 0.3) 0%, rgba(61, 90, 150, 0) 100%),
		linear-gradient(175.02deg, var(--hs-navy) 6.84%, var(--hs-navy-deep-800) 54.32%, var(--hs-navy-deep-900) 93.16%);
}

/* Betiksiz ziyaretçide istemci kipi kartları hiç dolmaz: bölüm gizlenir (veri yokmuş gibi). */
html.no-js .bt-hs--s09-yorumlar[data-s09-mode="client"],
.bt-hs--s09-yorumlar.s09-is-gone {
	display: none;
}

.bt-hs--s09-yorumlar .s09-ring {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid var(--hs-gold-a26);
	border-radius: 50%;
}

.bt-hs--s09-yorumlar .s09-ring--a {
	top: -260px;
	right: -160px;
	width: 520px;
	height: 520px;
}

.bt-hs--s09-yorumlar .s09-ring--b {
	top: -170px;
	right: -70px;
	width: 340px;
	height: 340px;
	border-width: 2px;
	border-color: var(--hs-gold-a28);
}

/* ---------------------------------------------------------------- Yerleşim */

.bt-hs--s09-yorumlar .s09 {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.bt-hs--s09-yorumlar .s09-head {
	max-width: 760px;
}

.bt-hs--s09-yorumlar .s09-title {
	color: var(--hs-white);
}

.bt-hs--s09-yorumlar .s09-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Etiket ve "Yorumlar yükleniyor..." aynı satırı paylaşır (yükleme bitince etiket; satır yüksekliği sabit). */
.bt-hs--s09-yorumlar .s09-status {
	display: grid;
	min-height: 20.25px;
}

.bt-hs--s09-yorumlar .s09-label,
.bt-hs--s09-yorumlar .s09-loading {
	grid-area: 1 / 1;
	align-self: center;
}

.bt-hs--s09-yorumlar .s09-label {
	color: var(--hs-on-navy-cool-muted);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 20.25px;
	white-space: nowrap;
}

.bt-hs--s09-yorumlar .s09-loading {
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-body);
	font-weight: 400;
	line-height: 20.25px;
}

.bt-hs--s09-yorumlar .s09.is-loading .s09-label {
	visibility: hidden;
}

.bt-hs--s09-yorumlar .s09:not(.is-loading) .s09-loading {
	display: none;
}

/* Hap + düğmeler | kaydırma alanı | bağlantılar (mobilde düğmeler alanın altında). Düğme grubu DOM'da iki kez var
   (.s09-nav--top alandan önce, .s09-nav--bottom alandan sonra): her genişlikte görsel sıradaki kopya görünür, öteki
   display: none (odak sırası = görsel sıra). */
.bt-hs--s09-yorumlar .s09-carousel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"pill nav"
		"track track"
		"links links";
	column-gap: 12px;
	row-gap: 20px;
	min-width: 0;
}

/* ---------------------------------------------------------------- Puan hapı (Rating summary pill 52:2595)
   Figma dolgu 8/16/8/12; çizgi düzende yer kaplar (referans çizimde hap 46 yüksek, içerik kenardan 13 px). */

.bt-hs--s09-yorumlar .s09-pill {
	grid-area: pill;
	justify-self: start;
	align-self: center;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 0;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 46px;
	padding: 8px 16px 8px 12px;
	border: 1px solid var(--hs-white-a18);
	border-radius: 23px; /* tek satırda tam yarım daire (Figma 999); iki satıra kırılınca yuvarlak dikdörtgen */
	background: var(--hs-white-a08);
}

.bt-hs--s09-yorumlar .s09-pill__star {
	flex: none;
	width: 18px;
	height: 18px;
}

.bt-hs--s09-yorumlar .s09-pill__rating {
	color: var(--hs-white);
	font-size: var(--hs-fs-body);
	font-weight: 700;
	line-height: 27.2px;
}

.bt-hs--s09-yorumlar .s09-pill__count,
.bt-hs--s09-yorumlar .s09-pill__source {
	font-size: var(--hs-fs-small);
	line-height: 21.7px;
}

.bt-hs--s09-yorumlar .s09-pill__count {
	color: var(--hs-on-dark);
	font-weight: 400;
}

.bt-hs--s09-yorumlar .s09-pill__source {
	color: var(--hs-on-navy-cool);
	font-weight: 600;
}

.bt-hs--s09-yorumlar .s09-pill__rating:empty,
.bt-hs--s09-yorumlar .s09-pill__count:empty {
	display: none;
}

.bt-hs--s09-yorumlar .s09-pill--skeleton {
	min-height: 0;
}

/* ---------------------------------------------------------------- Önceki / sonraki (Carousel/Control 52:2573) */

.bt-hs--s09-yorumlar .s09-nav {
	grid-area: nav;
	align-self: center;
	display: flex;
	gap: 8px;
}

.bt-hs--s09-yorumlar .s09-nav--bottom {
	display: none;
}

.bt-hs--s09-yorumlar .s09-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--hs-white-a18);
	border-radius: var(--hs-radius-pill);
	background: var(--hs-white-a08);
	transition: background-color var(--hs-dur-fast) ease, opacity var(--hs-dur-fast) ease;
}

.bt-hs--s09-yorumlar .s09-nav__btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

.bt-hs--s09-yorumlar .s09-nav__btn:hover {
	background: var(--hs-white-a18);
}

.bt-hs--s09-yorumlar .s09-nav__btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.bt-hs--s09-yorumlar .s09-nav__btn[aria-disabled="true"]:hover {
	background: var(--hs-white-a08);
}

.bt-hs--s09-yorumlar .s09-nav__btn:focus-visible {
	outline: 3px solid var(--hs-gold);
	outline-offset: 0;
	border-radius: var(--hs-radius-pill);
}

/* ---------------------------------------------------------------- Kaydırma alanı (Reviews/Track 52:3235) */

.bt-hs--s09-yorumlar .s09-track {
	grid-area: track;
	display: flex;
	align-items: stretch;
	gap: 24px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.bt-hs--s09-yorumlar .s09-track::-webkit-scrollbar {
	display: none;
}

.bt-hs--s09-yorumlar .s09-track:focus-visible {
	border-radius: 20px;
}

/* ---------------------------------------------------------------- Kart (Review card 52:2518) */

.bt-hs--s09-yorumlar .s09-card {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	min-height: 280px;
	padding: 24px;
	border-radius: var(--hs-radius-glass);
	background: var(--hs-white);
	box-shadow: var(--hs-shadow-card);
	color: var(--hs-ink);
	scroll-snap-align: start;
}

.bt-hs--s09-yorumlar .s09-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bt-hs--s09-yorumlar .s09-mono {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hs-navy-tint);
	color: var(--hs-navy);
	font-size: var(--hs-fs-badge);
	font-weight: 700;
	line-height: 15.6px;
	white-space: nowrap;
}

.bt-hs--s09-yorumlar .s09-card__meta {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bt-hs--s09-yorumlar .s09-card__author {
	overflow: hidden;
	color: var(--hs-ink);
	font-size: var(--hs-fs-body);
	font-weight: 700;
	line-height: 27.2px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bt-hs--s09-yorumlar .s09-card__date,
.bt-hs--s09-yorumlar .s09-card__stars {
	color: var(--hs-muted);
	font-size: var(--hs-fs-small);
	font-weight: 400;
	line-height: 21.7px;
}

.bt-hs--s09-yorumlar .s09-card__date {
	min-height: 21.7px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bt-hs--s09-yorumlar .s09-card__stars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
}

.bt-hs--s09-yorumlar .s09-stars {
	display: flex;
	flex: none;
	gap: 2px;
}

.bt-hs--s09-yorumlar .s09-star {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

.bt-hs--s09-yorumlar .s09-star.is-off path {
	fill: var(--hs-line);
}

/* Dar kartta (≈320 px ekran) metin yıldızların altına iner; kısaltılmaz. */
.bt-hs--s09-yorumlar .s09-card__stars-text {
	white-space: nowrap;
}

.bt-hs--s09-yorumlar .s09-card__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--hs-ink);
	font-size: var(--hs-fs-card-text);
	line-height: 23.25px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.bt-hs--s09-yorumlar .s09-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: var(--hs-fs-small);
	line-height: 21.7px;
}

.bt-hs--s09-yorumlar .s09-card__link {
	position: relative;
	color: var(--hs-navy);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--hs-dur-fast) ease;
}

/* Dokunma hedefi ≥ 44 px (satır 21.7; düzen değişmez). */
.bt-hs--s09-yorumlar .s09-card__link::after {
	content: "";
	position: absolute;
	inset: -11.15px -8px;
}

.bt-hs--s09-yorumlar .s09-card__link:hover {
	color: var(--hs-navy);
	text-decoration: underline;
	text-decoration-thickness: from-font;
}

/* ---------------------------------------------------------------- İskelet (Loading) */

.bt-hs--s09-yorumlar .s09-sk {
	display: block;
	flex: none;
	width: 100%;
	height: 10px;
	border-radius: 5px;
	background: var(--hs-line);
}

.bt-hs--s09-yorumlar .s09-sk--h12 {
	height: 12px;
	border-radius: 6px;
}

.bt-hs--s09-yorumlar .s09-sk--w90 {
	width: 90px;
}

.bt-hs--s09-yorumlar .s09-sk--w160 {
	width: 160px;
	max-width: 100%;
}

.bt-hs--s09-yorumlar .s09-sk--avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.bt-hs--s09-yorumlar .s09-sk-meta {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bt-hs--s09-yorumlar .s09-sk-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bt-hs--s09-yorumlar .s09-sk--dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.bt-hs--s09-yorumlar .s09-sk--pillbar {
	width: 120px;
	height: 12px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------- Boş durum (Empty) */

.bt-hs--s09-yorumlar .s09-track.is-empty {
	overflow: visible;
}

.bt-hs--s09-yorumlar .s09-empty {
	position: relative;
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 24px;
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-card-text);
	line-height: 23.25px;
	text-align: center;
}

/* 1.5 px kesikli çerçeve (Figma çizgi 8/6, köşe 20): çizgi kenarın içinde. */
.bt-hs--s09-yorumlar .s09-empty__frame {
	position: absolute;
	top: 0.75px;
	left: 0.75px;
	width: calc(100% - 1.5px);
	height: calc(100% - 1.5px);
	overflow: visible;
	pointer-events: none;
}

.bt-hs--s09-yorumlar .s09-empty__frame rect {
	fill: none;
	stroke: var(--hs-white-a30);
	stroke-width: 1.5;
	stroke-dasharray: 8 6;
}

.bt-hs--s09-yorumlar .s09-empty__text {
	position: relative;
}

/* ---------------------------------------------------------------- Bağlantılar (Button/Text dark bg 5:30) */

.bt-hs--s09-yorumlar .s09-links {
	grid-area: links;
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.bt-hs--s09-yorumlar .s09-out svg {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

.bt-hs--s09-yorumlar .s09-out:focus-visible {
	outline: 3px solid var(--hs-gold);
	outline-offset: 0;
	border-radius: var(--hs-radius-pill);
}

/* ---------------------------------------------------------------- Ara genişlikler: her zaman bir kart kenarı görünür
   1200–1295 px: 3 kart + 48 px kenar (1296 px ve üstünde 360 = Figma; 1440 değişmez). Tablet (tasarlanmadı:
   masaüstü başlık satırı, 340 kart): ≈768–840 px'te iki 340 kart alanı tam doldurur ve kenar görünmez → kart
   daralır, 48 px kenar kalır. */

@media (min-width: 1200px) {
	.bt-hs--s09-yorumlar .s09-card {
		flex-basis: min(360px, calc((100% - 120px) / 3));
	}
}

@media (max-width: 1024px) {
	.bt-hs--s09-yorumlar .s09-card {
		flex-basis: min(340px, calc((100% - 96px) / 2));
	}
}

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

@media (max-width: 767px) {
	.bt-hs--s09-yorumlar[data-band="navy"] {
		background:
			radial-gradient(42% 60% at 88% 8%, rgba(61, 90, 150, 0.3) 0%, rgba(61, 90, 150, 0) 100%),
			linear-gradient(159.2deg, var(--hs-navy) 6.84%, var(--hs-navy-deep-800) 54.32%, var(--hs-navy-deep-900) 93.16%);
	}

	.bt-hs--s09-yorumlar .s09-ring--a {
		top: -161.2px;
		right: -130px;
		width: 260px;
		height: 260px;
	}

	.bt-hs--s09-yorumlar .s09-ring--b {
		top: auto;
		right: -76.5px;
		bottom: -103px;
		width: 170px;
		height: 170px;
	}

	.bt-hs--s09-yorumlar .s09 {
		gap: 32px;
	}

	.bt-hs--s09-yorumlar .s09-carousel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(48px, auto);
		grid-template-areas:
			"pill"
			"track"
			"nav"
			"links";
	}

	.bt-hs--s09-yorumlar .s09-nav {
		justify-self: start;
	}

	.bt-hs--s09-yorumlar .s09-nav--top {
		display: none;
	}

	.bt-hs--s09-yorumlar .s09-nav--bottom {
		display: flex;
	}

	.bt-hs--s09-yorumlar .s09-track {
		gap: 12px;
	}

	.bt-hs--s09-yorumlar .s09-card {
		flex-basis: min(298px, 85.2%);
	}
}

/* EN başlık: son satıra tek sözcük düşmesin (320 "What Do Our Clients / Say?"). 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--s09-yorumlar:lang(en) h2 {
	text-wrap: balance;
}

/* DE başlık: 320–360'ta "Was sagen unsere / Kunden?" son satırda tek sözcük; balance ile "Was sagen / unsere Kunden?".
   2026-10-12, DE sayfa QA. */
.bt-hs--s09-yorumlar:lang(de) h2 {
	text-wrap: balance;
}