/*
 * S13 · Balkan Tercüme Kızılay Ofisi (#s13-ofis). Figma 14:119 (1440) / 15:366 (390); bkz. figma-home/build/s13-ofis/spec.md.
 * Beyaz bant; 7fr/5fr ızgara (≥1025 px): lacivert iletişim paneli + açık ziyaret kartı (harita cephesi kalan yüksekliği
 * doldurur). 1024 px ve altında tek sütun (panel önce), harita 16:10. Harita kutusu: sunucu tarafı Google haritası
 * (<picture>, BT_Office_Map vekili) iğnenin üstünde, katmanın altında; vekil yoksa bugünkü cephe.
 *
 * Figma metin kutuları tam piksele yuvarlanır (21.7 → 22, 20.25 → 21, 27.2 → 28 tek satırda): tek satırlık öğelerin
 * satır yüksekliği bu tam değerlerdir; böylece satır (71), saat satırı (53) ve panel (859) yükseklikleri tutar.
 * Odak: bant açık (mor halka); panelde ve harita cephesinde altın.
 */

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

.bt-hs--s13-ofis .s13-office {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 32px;
	align-items: stretch;
}

/* ---------------------------------------------------------------- Lacivert panel */

.bt-hs--s13-ofis .s13-panel {
	--hs-c-focus: var(--hs-gold);
	--hs-focus-offset: 2px;
	--hs-c-heading: var(--hs-white);
	--hs-c-text: var(--hs-white);

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	padding: 48px;
	overflow: hidden;
	border-radius: var(--hs-radius-panel);
	background: linear-gradient(160deg, var(--hs-navy) 9.9%, var(--hs-navy-deep-800) 89.5%);
	box-shadow: var(--hs-shadow-navy-bento);
	color: var(--hs-white);
}

/* Dekor halkaları (Figma içe çizgi = border-box kenarlık); masaüstünde eş merkezli, merkez (630, 0). */
.bt-hs--s13-ofis .s13-ring {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.bt-hs--s13-ofis .s13-ring--outer {
	top: -150px;
	right: -99px;
	width: 300px;
	height: 300px;
	border: 1px solid var(--hs-gold-a26);
}

.bt-hs--s13-ofis .s13-ring--inner {
	top: -100px;
	right: -49px;
	width: 200px;
	height: 200px;
	border: 2px solid var(--hs-gold-a28);
}

.bt-hs--s13-ofis .s13-title {
	color: var(--hs-white);
	line-height: calc(1.12em + 0.38px); /* Figma kutusu: 1 satır 42 (1440), 2 satır 59 (390) */
	text-wrap: balance;
}

/* Etiketler: "Ofis Adresi" UI/Label altın açık; "Sosyal Medya" UI/Label ikincil; "Çalışma Saatleri" Small Strong. */
.bt-hs--s13-ofis .s13-label {
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 21px;
}

.bt-hs--s13-ofis .s13-label--address {
	color: var(--hs-gold-light);
}

.bt-hs--s13-ofis .s13-label--hours {
	margin-bottom: 8px;
	color: var(--hs-on-navy-cool);
	font-size: var(--hs-fs-small);
	line-height: 22px;
}

.bt-hs--s13-ofis .s13-label--social {
	color: var(--hs-muted);
}

.bt-hs--s13-ofis .s13-address {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bt-hs--s13-ofis .s13-nap {
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-body);
	line-height: 27.25px; /* 27.2; Figma çok satırlı kutuyu tam piksele yuvarlar (3 satır 82, 4 satır 109) */
}

.bt-hs--s13-ofis .s13-nap__name {
	color: var(--hs-white);
	font-weight: 600;
}

/* Eylem satırları (Contact action row 45:1189): 71 px, 1 px beyaz .18 çerçeve + 12/16/12/12 dolgu, aralık 14. */
.bt-hs--s13-ofis .s13-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bt-hs--s13-ofis .s13-row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 12px 16px 12px 12px;
	border: 1px solid var(--hs-white-a18);
	border-radius: var(--hs-radius-card);
	background: var(--hs-white-a07);
	color: var(--hs-white);
	text-decoration: none;
	transition: background-color var(--hs-dur-fast) ease;
}

.bt-hs--s13-ofis .s13-row:hover {
	background: var(--hs-white-a18);
	color: var(--hs-white);
	text-decoration: none;
}

.bt-hs--s13-ofis .s13-row:focus-visible {
	outline: 3px solid var(--hs-gold);
	outline-offset: 0;
	border-radius: var(--hs-radius-card);
}

.bt-hs--s13-ofis .s13-row__marker {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--hs-gold); /* 1.5 px içe çizgi (Chrome kesirli kenarlığı 1 px'e indirir) */
	color: var(--hs-gold);
}

.bt-hs--s13-ofis .s13-row__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bt-hs--s13-ofis .s13-row__label {
	color: var(--hs-on-navy-cool);
	font-size: var(--hs-fs-small);
	line-height: 22px;
}

.bt-hs--s13-ofis .s13-row__value {
	color: var(--hs-white);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 21px;
	overflow-wrap: anywhere;
}

.bt-hs--s13-ofis .s13-row__chevron {
	display: inline-flex;
	flex: none;
	color: var(--hs-gold);
}

.bt-hs--s13-ofis .s13-row .bt-icon {
	width: 18px;
	height: 18px;
}

/* Alternatif telefon: Body 16, bağlantı beyaz + 2 px altın alt çizgi (3 px aralık). */
.bt-hs--s13-ofis .s13-phone2 {
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-body-16);
	line-height: 26px;
}

.bt-hs--s13-ofis .s13-phone2__link {
	position: relative;
	color: var(--hs-white);
	text-decoration-line: underline;
	text-decoration-color: var(--hs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: text-decoration-color var(--hs-dur-fast) ease;
}

/* Dokunma alanı 44 px: satır içi bağlantı 20 px; görünmez dikey genişletme (odak halkası bağlantı kutusunda kalır). */
.bt-hs--s13-ofis .s13-phone2__link::after {
	content: "";
	position: absolute;
	inset: -12px 0;
}

.bt-hs--s13-ofis .s13-phone2__link:hover {
	color: var(--hs-white);
	text-decoration-color: var(--hs-gold-light);
}

/* Çalışma saatleri (Hours list 45:1196): satır 12/0 dolgu + 1 px beyaz .18 alt çizgi = 53. */
.bt-hs--s13-ofis .s13-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hs-white-a18);
	color: var(--hs-on-dark);
	font-size: var(--hs-fs-body);
	line-height: 28px;
}

.bt-hs--s13-ofis .s13-hours__time {
	color: var(--hs-white);
	font-weight: 700;
	text-align: end;
}

/* ---------------------------------------------------------------- Ziyaret kartı */

.bt-hs--s13-ofis .s13-visit {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 32px;
	border-radius: var(--hs-radius-bento);
	background: var(--hs-surface);
}

.bt-hs--s13-ofis .s13-walkin,
.bt-hs--s13-ofis .s13-remote {
	font-size: var(--hs-fs-body);
	line-height: 27.25px;
}

.bt-hs--s13-ofis .s13-walkin {
	color: var(--hs-ink);
}

.bt-hs--s13-ofis .s13-remote {
	color: var(--hs-muted);
}

.bt-hs--s13-ofis .s13-social {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bt-hs--s13-ofis .s13-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Pill/Link (light) 44:460 + lacivert dış bağlantı simgesi; odak halkası kenara bitişik (aralık 0). */
.bt-hs--s13-ofis .s13-pill:focus-visible {
	outline-offset: 0;
}

/* ---------------------------------------------------------------- Harita cephesi */

/* Map facade/Fluid (Phase=1 · Static): lacivert + gerilen ızgara/sokak deseni (Figma SCALE kısıtları), iğne,
   alt katman (etiket + cam hap). Katman akışta (alta yaslı): Faz 2'de uzayınca kutu büyür. */
.bt-hs--s13-ofis .s13-map {
	--hs-c-focus: var(--hs-gold);
	--hs-focus-offset: 2px;

	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
	overflow: hidden;
	overflow: clip; /* kaydırma kabı değil: 16:10 kutu Faz 2 katmanı uzayınca içeriğe göre büyür */
	border-radius: var(--hs-radius-bento);
	background: var(--hs-navy) url("img/s13-map-pattern-grid-street-560x420.svg") 0 0 / 100% 100% no-repeat;
	color: var(--hs-white);
}

.bt-hs--s13-ofis .s13-map__pin {
	position: absolute;
	top: calc(50% - 80.8px);
	left: calc(50% - 22px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--hs-gold);
	border-radius: 50%;
	background: var(--hs-navy);
	color: var(--hs-gold);
}

.bt-hs--s13-ofis .s13-map__pin .bt-icon {
	width: 18px;
	height: 18px;
}

/* Sağ dolgu 22: 390'da cam hap 264 px (Figma'da 262 px içerik kutusunu 2 px aşar). */
.bt-hs--s13-ofis .s13-map__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 22px 24px 24px;
}

.bt-hs--s13-ofis .s13-map__label {
	color: var(--hs-white);
	font-size: var(--hs-fs-label);
	font-weight: 600;
	line-height: 21px;
}

.bt-hs--s13-ofis .s13-map__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-hs--s13-ofis .s13-map__ctas .bt-hs-btn {
	max-width: 100%;
	white-space: normal;
}

.bt-hs--s13-ofis .s13-map__btn .bt-icon {
	color: var(--hs-gold);
}

/* Faz 2 açık/kapalı çipi (45:1212 / 45:1215): 30 px, beyaz .08 + .18 çerçeve; yerleşim tasarlanmadı → sol üst. */
.bt-hs--s13-ofis .s13-open {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--hs-white-a18);
	border-radius: var(--hs-radius-pill);
	background: var(--hs-white-a08);
	color: var(--hs-white);
	font-size: var(--hs-fs-chip-13);
	font-weight: 600;
	line-height: 15.6px;
}

.bt-hs--s13-ofis .s13-open__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hs-on-navy-cool-muted);
}

.bt-hs--s13-ofis .s13-open[data-state="open"] .s13-open__dot {
	border: 2px solid var(--hs-success);
	background: var(--hs-success-bg);
}

/* ---------------------------------------------------------------- Tablet (≤1024): tek sütun, harita 16:10 */

@media (max-width: 1024px) {
	.bt-hs--s13-ofis .s13-office {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.bt-hs--s13-ofis .s13-map {
		flex: none;
		min-height: auto;
		aspect-ratio: 16 / 10;
	}
}

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

@media (max-width: 767px) {
	.bt-hs--s13-ofis .s13-panel {
		gap: 24px;
		padding: 32px 24px;
		background: linear-gradient(169deg, var(--hs-navy) 6.2%, var(--hs-navy-deep-800) 93.3%);
	}

	/* Mobilde halkalar eş merkezli değil: 220 (1 px) ve 150 (2 px). */
	.bt-hs--s13-ofis .s13-ring--outer {
		top: -66px;
		right: -88px;
		width: 220px;
		height: 220px;
	}

	.bt-hs--s13-ofis .s13-ring--inner {
		top: -45px;
		right: -60px;
		width: 150px;
		height: 150px;
	}

	.bt-hs--s13-ofis .s13-visit {
		padding: 24px 20px;
	}

	.bt-hs--s13-ofis .s13-open {
		top: 16px;
		left: 16px;
	}

	/* Faz 2 çipi açıkken (tasarlanmadı): iğne gizlenir, katman çipin altında başlar (16 + 30 + 16). */
	.bt-hs--s13-ofis .s13-open ~ .s13-map__pin {
		display: none;
	}

	.bt-hs--s13-ofis .s13-open ~ .s13-map__overlay {
		margin-top: 62px;
	}
}

/* ---------------------------------------------------------------- Tasarlanmamış dar ekranlar (<390 px) */

/* 390'da e-posta değeri 186 px sütunu doldurur: daha darda dekoratif ok gizlenir (satır yine tek <a>), cam hap
   ve sosyal haplar yatay dolguyu 16'ya indirir (360'ta haplar 390'daki gibi 2 + 2 sarar); 360 altında iğne katmanla
   çakışmasın diye gizlenir. */
@media (max-width: 389px) {
	.bt-hs--s13-ofis .s13-row__chevron {
		display: none;
	}

	.bt-hs--s13-ofis .s13-pill {
		padding-inline: 16px;
	}

	.bt-hs--s13-ofis .s13-map__overlay {
		padding-inline: 16px;
	}

	.bt-hs--s13-ofis .s13-map__ctas .bt-hs-btn {
		padding-inline: 16px;
	}
}

@media (max-width: 359px) {
	.bt-hs--s13-ofis .s13-map__pin {
		display: none;
	}
}

/* ---------------------------------------------------------------- Gerçek harita (sunucu tarafı, s13-map--live) */

/* Kullanıcı kararı 2026-10-12: logolu gerçek Google haritası, anahtar sayfaya yazılmaz (BT_Office_Map REST vekili,
   Maps Static API). <picture> kutuyu kaplar (mutlak; kutunun ölçüsü ve 24 px yarıçapı değişmez → yerleşim kayması
   yok). Görüntü kutudan dar-uzundur ve alta yaslanır (object-position 50% 100%): yalnız üstten kırpılır, alttaki Google
   logosu ve atfı her zaman görünür. DOM sırası: iğne < harita < katman — harita gelince cephe iğnesini örter, gelene
   dek cephe (desen + iğne) görünür. Katman: etiket lacivert çip, hap lacivert cam, alt dolgu Google logosunun üstünde
   (32; tablette görüntü 1,4× büyüdüğünden 40). Mobilde (≤767) etiket görsel olarak gizlenir (ekran okuyucuda kalır):
   işaretçi katmanın üstündeki şeride sığar. Betik görüntünün harita olmadığını (cephe yönlendirmesi) anlarsa
   s13-map--live sınıfını ve <picture>'ı kaldırır; çıktı bugünkü cepheye döner. */
.bt-hs--s13-ofis .s13-map__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.bt-hs--s13-ofis .s13-map__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
	background: transparent;
	color: transparent; /* yüklenmezse alternatif metin cephenin üstüne yazılmaz */
}

/* Google atfı ("Map data ©…") sağ alt köşeye, logo sol alta yaslıdır: 24 px köşe yarıçapı atfın son karakterlerini
   kırpıyordu (Google koşulları: logo ve atıf örtülemez/kırpılamaz). Gerçek harita varken alt köşeler, metnin en alt
   pikselinin (kenardan ~3 px) eğri dışında kaldığı yarıçapa iner: 10 px (≤480 px'te görüntü 0,6× küçüldüğünden 6 px).
   Üst köşeler 24 px; cepheye dönüşte (sınıf kalkar) bugünkü 24 px. */
.bt-hs--s13-ofis .s13-map--live {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.bt-hs--s13-ofis .s13-map--live .s13-map__overlay {
	align-items: flex-start;
	padding-bottom: 32px;
	pointer-events: none;
}

.bt-hs--s13-ofis .s13-map--live .s13-map__overlay > * {
	pointer-events: auto;
}

.bt-hs--s13-ofis .s13-map--live .s13-map__label {
	padding: 4px 12px;
	border-radius: var(--hs-radius-pill);
	background: color-mix(in srgb, var(--hs-navy-deep-800) 88%, transparent);
}

.bt-hs--s13-ofis .s13-map--live .s13-map__btn {
	background: color-mix(in srgb, var(--hs-navy) 90%, transparent);
	border-color: var(--hs-white-a30);
}

.bt-hs--s13-ofis .s13-map--live .s13-map__btn:hover {
	background: var(--hs-navy);
	border-color: var(--hs-white-a66);
}

@media (min-width: 768px) and (max-width: 1024px) {
	.bt-hs--s13-ofis .s13-map--live .s13-map__overlay {
		padding-bottom: 40px;
	}
}

@media (max-width: 480px) {
	.bt-hs--s13-ofis .s13-map--live {
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}
}

@media (max-width: 767px) {
	.bt-hs--s13-ofis .s13-map--live .s13-map__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}