/**
 * HZ CERRAHİ — hz-layout.css
 * Header, scroll ilerleme barı, navigasyon, mega menü, footer, mobil alt bar.
 */

/* ==================================================================
   0. WORDPRESS YÖNETİM ÇUBUĞU (admin bar) TELAFİSİ
   ==================================================================
   Oturum açık kullanıcıda WP 32px (mobilde 46px) yüksekliğinde sabit bir
   çubuk basar. Sabit konumlu tüm katmanlar bu kadar aşağı kaydırılır.
   ================================================================== */

body.admin-bar {
	--hz-adminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar { --hz-adminbar: 46px; }
}

body.admin-bar .hz-header { top: var(--hz-adminbar, 0px); }
body.admin-bar .hz-progress { top: calc(var(--hz-header-h) + var(--hz-adminbar, 0px)); }
body.admin-bar .hz-mobile-panel { top: var(--hz-adminbar, 0px); }
body.admin-bar .hz-mega { padding-top: calc(var(--hz-header-h) + var(--hz-adminbar, 0px) + 16px); }

body.admin-bar .hz-header.is-hidden { transform: none; }

body.admin-bar .hz-hero,
body.admin-bar .hz-pagehead,
body.admin-bar .hz-post-hero {
	padding-top: calc(var(--hz-header-h) + var(--hz-adminbar, 0px) + clamp(2rem, 1rem + 4vw, 4.5rem));
}

body.admin-bar {
	scroll-padding-top: calc(var(--hz-header-h) + var(--hz-adminbar, 0px) + 24px);
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(76px + 32px + 24px);
}

/* WP 782px altında admin bar sabit değil, sayfayla birlikte kayar. */
@media screen and (max-width: 600px) {
	body.admin-bar .hz-header { top: 0; }
	body.admin-bar .hz-progress { top: var(--hz-header-h); }
}

/* ==================================================================
   1. HEADER
   ================================================================== */

.hz-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--hz-z-header);
	height: var(--hz-header-h);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*
	 * Zemin, sayfa arka planından bir kademe açık (kart tonu) seçildi:
	 * hem altındaki metni tamamen kapatır hem başlık şeridi gövdeden
	 * ayrışır.
	 */
	background: rgba(var(--hz-card-rgb), 0.96);
	backdrop-filter: blur(16px) saturate(1.35);
	-webkit-backdrop-filter: blur(16px) saturate(1.35);
	transition:
		background var(--anim-speed) var(--ease-sharp),
		backdrop-filter var(--anim-speed) var(--ease-sharp),
		border-color var(--anim-speed) var(--ease-sharp);
	border-bottom: 1px solid transparent;
}

.hz-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), transparent 70%);
	opacity: 1;
	transition: opacity var(--anim-speed) var(--ease-sharp);
	pointer-events: none;
}

.hz-header.is-stuck {
	background: rgba(var(--hz-card-rgb), 0.985);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border-bottom-color: rgba(var(--hz-accent-rgb), 0.18);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.42);
}

.hz-header.is-stuck::before { opacity: 0; }

/*
 * Header hiçbir koşulda gizlenmez: logo ve menü hem masaüstünde hem
 * mobilde sayfanın üstünde sabit kalır. (.is-hidden sınıfı geriye dönük
 * uyumluluk için etkisiz bırakılmıştır.)
 */
.hz-header.is-hidden { transform: none; }

.hz-header-inner {
	width: 100%;
	max-width: var(--hz-container);
	margin-inline: auto;
	padding-inline: var(--hz-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-sp-5);
	position: relative;
	z-index: 1;
}

/* ---- Sosyal medya şeridi (yalnızca dar ekran, logonun üstünde) ---- */

.hz-header-social { display: none; }

@media (max-width: 1024px) {
	/*
	 * Şerit, logo satırından ayrı bir katman gibi görünür: kendi
	 * (bir kademe açık) zemini, altında net bir ayraç çizgisi var.
	 */
	.hz-header-social {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 9px;
		width: 100%;
		height: var(--hz-header-social-h);
		padding: 6px var(--hz-gutter);
		position: relative;
		z-index: 2;
		/* Logo satırından belirgin şekilde ayrılan, bir kademe açık bant. */
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
		border-bottom: 1px solid rgba(var(--hz-accent-rgb), 0.22);
	}

	/* Bandın alt kenarında ince aksan ışığı */
	.hz-header-social::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: -1px;
		height: 1px;
		background: linear-gradient(90deg, var(--hz-accent), transparent 55%);
		opacity: 0.55;
	}

	/*
	 * Doğrudan alt öğe (">") şart.
	 *
	 * Aksi hâlde bu kural şeridin içindeki dil menüsünün bağlantılarını da
	 * yakalıyordu: her dil satırı 28x28 kareye sıkışıp bayrak ile yazı üst
	 * üste biniyordu. Seçici daha güçlü olduğu için menünün kendi yerleşimi
	 * hiç uygulanmıyordu — hata buradaydı.
	 */
	.hz-header-social > a {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		display: grid;
		place-items: center;
		color: var(--hz-text-soft);
		background: rgba(255, 255, 255, 0.07);
		border: 1px solid rgba(255, 255, 255, 0.1);
		transition: color 220ms var(--ease-sharp), background 220ms var(--ease-sharp), border-color 220ms var(--ease-sharp);
		-webkit-tap-highlight-color: transparent;
	}

	.hz-header-social > a:active,
	.hz-header-social > a:hover {
		color: #fff;
		background: rgba(var(--hz-accent-rgb), 0.28);
		border-color: rgba(var(--hz-accent-rgb), 0.5);
	}

	/* Logo satırı şeridin altında kendi zemininde, dikeyde ortalı kalır. */
	.hz-header-inner {
		flex: 1 1 auto;
		align-items: center;
		padding-block: 0;
	}

	/* Marka bloğu altındaki fazla nefeslik kırpılır. */
	.hz-brand { align-self: center; }
}

/* ---- Marka ---- */

.hz-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: #fff;
	flex: none;
}

.hz-brand:hover { color: #fff; }

.hz-brand-logo {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	transition: max-height 260ms var(--ease-sharp);
}

/* Mobilde marka daha okunur olsun */
@media (max-width: 1024px) {
	.hz-brand-logo { max-height: 66px; }
	.hz-brand-mark { width: 50px; height: 50px; }
	.hz-brand-copy strong { font-size: 1.06rem; }
	.hz-brand-copy em { font-size: 0.74rem; }
}

@media (max-width: 480px) {
	.hz-brand-logo { max-height: 58px; max-width: 224px; }
	.hz-brand-copy strong { font-size: 1.02rem; letter-spacing: 0.1em; }
	.hz-brand-copy em { font-size: 0.7rem; }
}

.hz-brand-mark {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: linear-gradient(140deg, var(--hz-accent), var(--hz-primary));
	color: #04121a;
	box-shadow: var(--hz-glow);
	transition: transform 420ms var(--ease-spring), box-shadow var(--anim-speed) var(--ease-sharp);
	flex: none;
}

.hz-brand:hover .hz-brand-mark {
	transform: rotate(-8deg) scale(1.06);
	box-shadow: var(--hz-glow-strong);
}

.hz-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }

.hz-brand-copy strong {
	font-family: var(--hz-font-head);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.hz-brand-copy em {
	font-style: normal;
	font-size: 0.7rem;
	color: var(--hz-text-muted);
	letter-spacing: 0.02em;
}

/* ---- Navigasyon ---- */

.hz-nav { display: flex; align-items: center; gap: var(--hz-sp-2); }

.hz-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-menu-item { position: relative; margin: 0; }

.hz-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 14px;
	border-radius: var(--hz-radius-pill);
	color: var(--hz-text-soft);
	font-size: 0.9rem;
	font-weight: 600;
	font-family: var(--hz-font-head);
	letter-spacing: -0.005em;
	position: relative;
	transition: color var(--anim-speed) var(--ease-sharp), background var(--anim-speed) var(--ease-sharp);
	white-space: nowrap;
}

/* Menü başlığının yanındaki ince simge */
.hz-menu-ico {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: var(--hz-accent);
	opacity: 0.65;
	transition: opacity var(--anim-speed) var(--ease-sharp), transform var(--anim-speed) var(--ease-spring);
}

.hz-menu-link:hover .hz-menu-ico,
.hz-menu-item.current-menu-item > .hz-menu-link .hz-menu-ico {
	opacity: 1;
	transform: translateY(-1px);
}

.hz-menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 1.5px;
	background: var(--hz-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 340ms var(--ease-sharp);
	box-shadow: 0 0 8px var(--hz-accent);
}

.hz-menu-link:hover,
.hz-menu-item.current-menu-item > .hz-menu-link,
.hz-menu-item.current_page_item > .hz-menu-link {
	color: #fff;
}

.hz-menu-link:hover::after,
.hz-menu-item.current-menu-item > .hz-menu-link::after,
.hz-menu-item.current_page_item > .hz-menu-link::after {
	transform: scaleX(1);
}

/* Alt menü oku — bağlantının dışında, ayrı bir düğme */
.hz-menu-caret {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-left: -8px;
	border-radius: 7px;
	color: var(--hz-text-muted);
	transition: transform var(--anim-speed) var(--ease-sharp), color 240ms, background 240ms;
	flex: none;
}

.hz-menu-caret:hover { color: var(--hz-accent); background: rgba(var(--hz-accent-rgb), 0.1); }
.hz-menu-item.is-open > .hz-menu-caret { transform: rotate(180deg); color: var(--hz-accent); }

/* Alt menüsü olan öğeyi metin + ok olarak hizala */
.hz-menu-item.hz-has-children {
	display: inline-flex;
	align-items: center;
}

/* "hz-no-dropdown" sınıfı: açılır menü tamamen kapalı */
.hz-menu-item.hz-no-dropdown > .hz-submenu { display: none !important; }
.hz-menu-item.hz-no-dropdown > .hz-menu-caret { display: none; }

/* Alt menü */

.hz-submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 230px;
	list-style: none;
	margin: 0;
	padding: 8px;
	border-radius: 16px;
	background: var(--hz-bg-card);
	border: 1px solid var(--hz-line);
	box-shadow: var(--hz-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px) scale(0.97);
	transform-origin: top center;
	transition:
		opacity 260ms var(--ease-sharp),
		transform 260ms var(--ease-sharp),
		visibility 260ms;
	z-index: 20;
}

.hz-menu-item:hover > .hz-submenu,
.hz-menu-item.is-open > .hz-submenu,
.hz-menu-item:focus-within > .hz-submenu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

.hz-submenu .hz-menu-link {
	display: flex;
	width: 100%;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 0.86rem;
}

.hz-submenu .hz-menu-link::after { display: none; }
.hz-submenu .hz-menu-link:hover { background: rgba(var(--hz-accent-rgb), 0.1); }

/* ---- Header aksiyonları ---- */

.hz-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.hz-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: var(--hz-radius-pill);
	border: 1px solid var(--hz-line);
	color: var(--hz-text-soft);
	font-size: 0.85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--anim-speed) var(--ease-sharp), color var(--anim-speed) var(--ease-sharp), background var(--anim-speed) var(--ease-sharp);
}

.hz-header-phone:hover {
	border-color: rgba(var(--hz-accent-rgb), 0.5);
	color: #fff;
	background: rgba(var(--hz-accent-rgb), 0.08);
}

.hz-burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	border: 1px solid var(--hz-line);
	place-items: center;
	color: var(--hz-text);
	background: rgba(255, 255, 255, 0.03);
	transition: background var(--anim-speed) var(--ease-sharp), border-color var(--anim-speed) var(--ease-sharp);
}

.hz-burger:hover { border-color: var(--hz-accent); }

.hz-burger-lines {
	position: relative;
	width: 18px;
	height: 12px;
}

.hz-burger-lines span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.8px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 320ms var(--ease-sharp), opacity 200ms var(--ease-sharp), width 320ms var(--ease-sharp);
}

.hz-burger-lines span:nth-child(1) { top: 0; }
.hz-burger-lines span:nth-child(2) { top: 5px; width: 72%; }
.hz-burger-lines span:nth-child(3) { top: 10px; }

.hz-burger[aria-expanded="true"] .hz-burger-lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hz-burger[aria-expanded="true"] .hz-burger-lines span:nth-child(2) { opacity: 0; width: 0; }
.hz-burger[aria-expanded="true"] .hz-burger-lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1024px) {
	.hz-burger { display: grid; }
	.hz-header-phone { display: none; }
	.hz-header .hz-nav { display: none; }
	.hz-header-actions .hz-btn-primary { display: none; }
}

/* ==================================================================
   2. SCROLL İLERLEME BARI
   ================================================================== */

.hz-progress {
	position: fixed;
	top: var(--hz-header-h);
	inset-inline: 0;
	height: var(--hz-progress-h);
	z-index: var(--hz-z-progress);
	background: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms var(--ease-sharp), top 420ms var(--ease-sharp);
}

.hz-progress.is-visible { opacity: 1; }

/* Header sabit kaldığı için ilerleme barı da her zaman onun altındadır. */

.hz-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--hz-accent-700), var(--hz-accent), var(--hz-accent-200));
	box-shadow: 0 0 12px rgba(var(--hz-accent-rgb), 0.9), 0 0 3px rgba(var(--hz-accent-rgb), 1);
	transform-origin: left;
	transition: width 90ms linear;
	border-radius: 0 2px 2px 0;
}

/* ==================================================================
   3. MOBİL PANEL (off-canvas)
   ================================================================== */

.hz-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 995;
	display: flex;
	flex-direction: column;
	background: var(--hz-bg-main);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 460ms var(--ease-out), visibility 460ms;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: calc(var(--hz-mobilebar-h) + env(safe-area-inset-bottom, 0px) + 20px);
}

.hz-mobile-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

.hz-mobile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-sp-4);
	padding: var(--hz-sp-4) var(--hz-gutter);
	height: var(--hz-header-h);
	border-bottom: 1px solid var(--hz-line);
	position: sticky;
	top: 0;
	background: var(--hz-bg-main);
	z-index: 3;
}

.hz-mobile-body { padding: var(--hz-sp-5) var(--hz-gutter); }

.hz-mobile-panel .hz-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.hz-mobile-panel .hz-menu-item.hz-has-children {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 4px;
}

.hz-mobile-panel .hz-submenu { flex-basis: 100%; }

.hz-mobile-panel .hz-menu-link {
	/* İkon ve başlık birlikte sola yaslanır; ok ayrı düğmede kalır. */
	justify-content: flex-start;
	gap: 13px;
	width: 100%;
	padding: 15px 16px;
	border-radius: 14px;
	font-size: 1.05rem;
	border: 1px solid transparent;
	flex: 1;
	text-align: left;
}

.hz-mobile-panel .hz-menu-ico {
	width: 22px;
	opacity: 0.8;
}

.hz-mobile-panel .hz-menu-text { flex: 1 1 auto; }

.hz-mobile-panel .hz-menu-caret {
	width: 46px;
	height: auto;
	margin-left: 0;
	border-radius: 14px;
	border: 1px solid var(--hz-line);
}

.hz-mobile-panel .hz-menu-link::after { display: none; }

.hz-mobile-panel .hz-menu-link:hover,
.hz-mobile-panel .hz-menu-item.current-menu-item > .hz-menu-link {
	background: rgba(var(--hz-accent-rgb), 0.08);
	border-color: rgba(var(--hz-accent-rgb), 0.25);
}

.hz-mobile-panel .hz-submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 2px 0 6px 14px;
	margin-left: 8px;
	border-left: 1px solid var(--hz-line);
	display: none;
}

.hz-mobile-panel .hz-menu-item.is-open > .hz-submenu { display: block; }

.hz-mobile-cta {
	display: grid;
	gap: 10px;
	margin-top: var(--hz-sp-6);
}

.hz-mobile-contact {
	margin-top: var(--hz-sp-6);
	padding-top: var(--hz-sp-5);
	border-top: 1px solid var(--hz-line);
	display: grid;
	gap: 12px;
}

.hz-mobile-contact a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--hz-text-soft);
	font-size: 0.92rem;
}

.hz-mobile-contact a:hover { color: var(--hz-accent); }

.hz-mobile-social {
	display: flex;
	gap: 10px;
	margin-top: var(--hz-sp-5);
}

/* ==================================================================
   4. MEGA MENÜ (Tedaviler)
   ================================================================== */

.hz-mega {
	position: fixed;
	inset: 0;
	z-index: var(--hz-z-mega);
	display: grid;
	place-items: start center;
	padding: calc(var(--hz-header-h) + 16px) var(--hz-gutter) 40px;
	background: rgba(var(--hz-bg-rgb), 0.86);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms var(--ease-sharp), visibility 320ms;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hz-mega.is-open { opacity: 1; visibility: visible; }

.hz-mega-inner {
	width: 100%;
	max-width: 1180px;
	background: var(--hz-bg-card);
	border: 1px solid var(--hz-line);
	border-radius: var(--hz-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
	box-shadow: var(--hz-shadow-lg);
	transform: translateY(-18px) scale(0.985);
	opacity: 0;
	transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-sharp);
}

.hz-mega.is-open .hz-mega-inner { transform: none; opacity: 1; }

.hz-mega-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hz-sp-5);
	margin-bottom: var(--hz-sp-6);
	padding-bottom: var(--hz-sp-4);
	border-bottom: 1px solid var(--hz-line);
}

.hz-mega-head h2 { margin-bottom: 4px; font-size: var(--hz-fs-xl); }
.hz-mega-head p { margin: 0; color: var(--hz-text-muted); font-size: var(--hz-fs-sm); }

.hz-mega-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--hz-sp-6) var(--hz-sp-5);
}

.hz-mega-col > h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.78rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hz-accent);
	margin-bottom: var(--hz-sp-4);
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(var(--hz-accent-rgb), 0.18);
}

.hz-mega-list { list-style: none; margin: 0; padding: 0; }
.hz-mega-list li { margin: 0 0 2px; }

.hz-mega-list a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 11px;
	border-radius: 10px;
	color: var(--hz-text-soft);
	font-size: 0.88rem;
	line-height: 1.35;
	transition: background 240ms var(--ease-sharp), color 240ms var(--ease-sharp), transform 240ms var(--ease-sharp);
}

.hz-mega-list a::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--hz-accent);
	opacity: 0.4;
	flex: none;
	transition: opacity 240ms, transform 240ms var(--ease-spring);
}

.hz-mega-list a:hover {
	background: rgba(var(--hz-accent-rgb), 0.09);
	color: #fff;
	transform: translateX(3px);
}

.hz-mega-list a:hover::before { opacity: 1; transform: scale(1.8); }

.hz-mega-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-sp-4);
	flex-wrap: wrap;
	margin-top: var(--hz-sp-6);
	padding-top: var(--hz-sp-5);
	border-top: 1px solid var(--hz-line);
}

/* ==================================================================
   5. MOBİL ALT BAR — yüzen kapsül
   ==================================================================
   Yerleşim kasıtlı olarak basit: her sekme bir flex sütunu, içinde ikon
   ve etiket normal akışta durur. Hiçbir öğe absolute konumlandırılmaz —
   daha önce ikonlar, etiketler ve ortadaki daire bu yüzden birbirine
   giriyordu. Asistan dairesi ayrı bir katman değildir: ikonun kendisi
   yuvarlak zeminli büyük bir düğmedir, dolayısıyla hizası kendiliğinden
   doğrudur.
   ================================================================== */

.hz-mobilebar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--hz-z-mobilebar);
	display: none;
	padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	transform: translateY(140%);
	transition: transform 560ms var(--ease-out);
}

.hz-mobilebar.is-ready { transform: translateY(0); }

/* JS çalışmasa da bar görünür kalır. */
.no-js .hz-mobilebar,
.hz-mobilebar.is-hidden { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.hz-mobilebar { transform: translateY(0); transition: none; }
}

@media (max-width: 1024px) {
	body.hz-has-mobilebar .hz-mobilebar { display: block; }

	body.hz-has-mobilebar {
		padding-bottom: calc(var(--hz-mobilebar-h) + env(safe-area-inset-bottom, 0px) + 18px);
	}
}

/* ---- Kapsül ---- */

.hz-mobilebar-inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	height: var(--hz-mobilebar-h);
	max-width: 480px;
	margin-inline: auto;
	padding: 0 6px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%),
		rgba(var(--hz-bg-rgb), 0.97);
	backdrop-filter: blur(26px) saturate(1.6);
	-webkit-backdrop-filter: blur(26px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow:
		0 14px 38px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(var(--hz-accent-rgb), 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---- Sekme ---- */

.hz-mtab {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 100%;
	border-radius: 16px;
	color: var(--hz-text-faint);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	transition: color 240ms var(--ease-sharp), background 240ms var(--ease-sharp);
	-webkit-tap-highlight-color: transparent;
}

.hz-mtab span {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hz-mtab .hz-icon {
	flex: none;
	width: 22px;
	height: 22px;
}

.hz-mtab:active { background: rgba(255, 255, 255, 0.055); }
.hz-mtab:hover { color: var(--hz-accent); }

/* Bulunulan sayfa */
.hz-mtab.is-current {
	color: var(--hz-accent-200);
	background: rgba(var(--hz-accent-rgb), 0.13);
}

/* Kanal renkleri */
.hz-mtab[data-key="whatsapp"] { color: rgba(37, 211, 102, 0.85); }
.hz-mtab[data-key="whatsapp"]:active { color: var(--wa-green); }
.hz-mtab[data-key="appointment"] { color: rgba(var(--hz-accent-rgb), 0.85); }

/* ---- Asistan: ikonun kendisi yuvarlak düğmedir ---- */

/*
 * Daire, diğer sekmelerin İKON hizasına oturur.
 *
 * Yöntem: asistan sekmesinde etiket display:none ile kaldırılmaz,
 * visibility:hidden ile GÖRÜNMEZ yapılır. Böylece yerini korur ve
 * sekmenin iç yapısı diğerleriyle birebir aynı kalır:
 *
 *   normal : ikon 22 + boşluk + etiket  → blok ortalanır
 *   asistan: ikon 52 + boşluk + etiket  → blok ortalanır
 *
 * İki blokta da etiket aynı yüksekliği kapladığı için ikon merkezleri
 * kendiliğinden aynı çizgiye düşer. Sabit piksel düzeltmesi yoktur;
 * yazı tipi ya da punto değişse bile hiza bozulmaz.
 */
.hz-mtab[data-key="assistant"],
.hz-mtab.is-assistant {
	flex: 0 0 74px;
	background: none;
}

.hz-mtab[data-key="assistant"] span,
.hz-mtab.is-assistant span {
	visibility: hidden;
	pointer-events: none;
}

.hz-mtab[data-key="assistant"] .hz-icon,
.hz-mtab.is-assistant .hz-icon {
	width: 52px;
	height: 52px;
	padding: 13px;
	box-sizing: border-box;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(150deg, var(--hz-accent), var(--hz-primary) 92%);
	box-shadow:
		0 6px 18px rgba(var(--hz-accent-rgb), 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.26);
	animation: hz-assistant-pulse 3.2s var(--ease-out) infinite;
	transition: transform 300ms var(--ease-spring);
}

.hz-mtab[data-key="assistant"]:active,
.hz-mtab.is-assistant:active { background: none; }
.hz-mtab[data-key="assistant"]:active .hz-icon,
.hz-mtab.is-assistant:active .hz-icon { transform: scale(0.93); }

/* Sohbet açıkken kapatma düğmesine dönüşür. */
.hz-mtab[data-key="assistant"].is-active .hz-icon,
.hz-mtab.is-assistant.is-active .hz-icon {
	background: linear-gradient(150deg, var(--hz-primary), var(--hz-primary-soft) 92%);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45);
	animation: none;
}

@keyframes hz-assistant-pulse {
	0%, 100% {
		box-shadow:
			0 6px 18px rgba(var(--hz-accent-rgb), 0.5),
			0 0 0 0 rgba(var(--hz-accent-rgb), 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.26);
	}
	60% {
		box-shadow:
			0 6px 18px rgba(var(--hz-accent-rgb), 0.5),
			0 0 0 13px rgba(var(--hz-accent-rgb), 0),
			inset 0 1px 0 rgba(255, 255, 255, 0.26);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hz-mtab[data-key="assistant"] .hz-icon,
	.hz-mtab.is-assistant .hz-icon { animation: none; }
}

/* Yol tarifi sekmesi bardan kaldırıldı — eski kayıtlara karşı son güvence. */
.hz-mtab[data-key="directions"] { display: none !important; }

/* ---- Dikkat çekme balonu ---- */

.hz-mbar-nudge {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(8px) scale(0.96);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 24px);
	padding: 8px 14px 8px 9px;
	border-radius: var(--hz-radius-pill);
	background:
		linear-gradient(180deg, rgba(var(--hz-accent-rgb), 0.2), rgba(var(--hz-card-rgb), 0.98));
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border: 1px solid rgba(var(--hz-accent-rgb), 0.45);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.5),
		0 0 18px rgba(var(--hz-accent-rgb), 0.24);
	color: #fff;
	font-family: var(--hz-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 380ms var(--ease-out),
		transform 480ms var(--ease-spring),
		visibility 480ms;
	-webkit-tap-highlight-color: transparent;
}

/* Asistan dairesine bakan ok */
.hz-mbar-nudge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 11px;
	height: 11px;
	margin: -6px 0 0 -5.5px;
	transform: rotate(45deg);
	background: rgba(var(--hz-card-rgb), 0.98);
	border-right: 1px solid rgba(var(--hz-accent-rgb), 0.45);
	border-bottom: 1px solid rgba(var(--hz-accent-rgb), 0.45);
	border-bottom-right-radius: 3px;
}

.hz-mbar-nudge-ico {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, var(--hz-accent), var(--hz-primary));
	color: #fff;
}

.hz-mobilebar.has-nudge .hz-mbar-nudge {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
	pointer-events: auto;
}

/* ---- Dar telefonlar ---- */

@media (max-width: 380px) {
	.hz-mobilebar { padding-inline: 8px; }
	.hz-mobilebar-inner { padding-inline: 4px; border-radius: 22px; }
	.hz-mtab { font-size: 0.575rem; gap: 4px; }
	.hz-mtab .hz-icon { width: 20px; height: 20px; }
	.hz-mtab[data-key="assistant"],
	.hz-mtab.is-assistant { flex: 0 0 64px; }
	.hz-mtab[data-key="assistant"] .hz-icon,
	.hz-mtab.is-assistant .hz-icon { width: 46px; height: 46px; padding: 11px; }
	.hz-mbar-nudge { font-size: 0.72rem; padding: 7px 12px 7px 8px; }
	.hz-mbar-nudge-ico { width: 21px; height: 21px; }
}

/* ==================================================================
   6. FOOTER
   ================================================================== */

.hz-footer {
	position: relative;
	margin-top: var(--hz-section);
	background: var(--hz-bg-deep);
	border-top: 1px solid var(--hz-line);
	overflow: hidden;
}

.hz-footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: min(680px, 80%);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hz-accent), transparent);
	box-shadow: 0 0 18px var(--hz-accent);
}

.hz-footer-top {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
	gap: var(--hz-sp-7) var(--hz-sp-6);
	padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}

@media (max-width: 980px) {
	.hz-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.hz-footer-top { grid-template-columns: 1fr; }
}

.hz-footer h3 {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hz-accent);
	margin-bottom: var(--hz-sp-4);
}

.hz-footer-about p {
	color: var(--hz-text-muted);
	font-size: var(--hz-fs-sm);
	line-height: 1.75;
	max-width: 42ch;
}

.hz-footer-list { list-style: none; margin: 0; padding: 0; }
.hz-footer-list li { margin-bottom: 9px; }

.hz-footer-list a {
	color: var(--hz-text-muted);
	font-size: var(--hz-fs-sm);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: color 240ms var(--ease-sharp), transform 240ms var(--ease-sharp);
}

.hz-footer-list a:hover { color: var(--hz-accent); transform: translateX(3px); }

.hz-footer-contact { display: grid; gap: 14px; }

.hz-footer-contact a,
.hz-footer-contact span {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--hz-text-muted);
	font-size: var(--hz-fs-sm);
	line-height: 1.55;
}

.hz-footer-contact a:hover { color: var(--hz-accent); }

.hz-footer-contact .hz-icon {
	color: var(--hz-accent);
	margin-top: 2px;
	opacity: 0.85;
}

.hz-footer-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--hz-fs-sm);
}

.hz-footer-hours li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
	color: var(--hz-text-muted);
}

.hz-footer-hours li:last-child { border-bottom: none; }
.hz-footer-hours strong { color: var(--hz-text-soft); font-weight: 600; }

.hz-social { display: flex; gap: 9px; margin-top: var(--hz-sp-4); }

.hz-social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	border: 1px solid var(--hz-line);
	color: var(--hz-text-muted);
	transition: transform 300ms var(--ease-spring), border-color 260ms, color 260ms, background 260ms;
}

.hz-social a:hover {
	transform: translateY(-3px);
	border-color: var(--hz-accent);
	color: var(--hz-accent);
	background: rgba(var(--hz-accent-rgb), 0.08);
}

.hz-footer-bottom {
	border-top: 1px solid var(--hz-line);
	padding-block: var(--hz-sp-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-sp-4);
	flex-wrap: wrap;
	font-size: var(--hz-fs-xs);
	color: var(--hz-text-faint);
}

.hz-footer-legal {
	display: flex;
	gap: var(--hz-sp-4);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-footer-legal a { color: var(--hz-text-faint); }
.hz-footer-legal a:hover { color: var(--hz-accent); }

/* ==================================================================
   Yasal bilgilendirme kutusu — footer genişliğini kaplayan uyarı bloğu
   ================================================================== */

.hz-footer-legalbox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	margin: var(--hz-sp-5) 0;
	padding: clamp(1.2rem, 0.9rem + 1.2vw, 1.9rem) clamp(1.2rem, 0.9rem + 1.4vw, 2rem);
	border-radius: var(--hz-radius);
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 180% at 0% 0%, rgba(var(--hz-accent-rgb), 0.16), transparent 58%),
		linear-gradient(135deg, rgba(var(--hz-primary-rgb), 0.45), rgba(var(--hz-card-rgb), 0.9));
	border: 1px solid rgba(var(--hz-accent-rgb), 0.32);
	box-shadow:
		0 16px 44px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Sol kenardaki parlayan aksan şeridi */
.hz-footer-legalbox::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--hz-accent), rgba(var(--hz-accent-rgb), 0.25));
	box-shadow: 0 0 18px rgba(var(--hz-accent-rgb), 0.7);
}

/* İnce ızgara dokusu */
.hz-footer-legalbox::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 72%);
	-webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 72%);
}

.hz-footer-legalbox-icon {
	width: 54px;
	height: 54px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: linear-gradient(140deg, rgba(var(--hz-accent-rgb), 0.28), rgba(var(--hz-accent-rgb), 0.08));
	border: 1px solid rgba(var(--hz-accent-rgb), 0.45);
	color: var(--hz-accent);
	box-shadow: 0 0 22px rgba(var(--hz-accent-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	animation: hz-legal-pulse 3.4s var(--ease-sharp) infinite;
}

@keyframes hz-legal-pulse {
	0%, 100% { box-shadow: 0 0 22px rgba(var(--hz-accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
	50%      { box-shadow: 0 0 34px rgba(var(--hz-accent-rgb), 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}

.hz-footer-legalbox strong {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--hz-font-head);
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hz-accent);
	margin-bottom: 11px;
	padding: 5px 12px;
	border-radius: var(--hz-radius-pill);
	background: rgba(var(--hz-accent-rgb), 0.12);
	border: 1px solid rgba(var(--hz-accent-rgb), 0.3);
}

.hz-footer-legalbox p {
	margin: 0 0 9px;
	font-size: 0.95rem;
	line-height: 1.75;
	color: #dfeef7;
	max-width: 100ch;
	font-weight: 500;
}

.hz-footer-legalbox-sub {
	font-size: 0.78rem !important;
	color: var(--hz-text-muted) !important;
	font-weight: 400 !important;
	margin-bottom: 0 !important;
	margin-top: 12px !important;
	padding-top: 12px;
	border-top: 1px solid rgba(var(--hz-accent-rgb), 0.18);
}

@media (max-width: 620px) {
	.hz-footer-legalbox { flex-direction: column; gap: 14px; }
	.hz-footer-legalbox-icon { width: 46px; height: 46px; border-radius: 14px; }
	.hz-footer-legalbox p { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hz-footer-legalbox-icon { animation: none !important; }
}

.hz-footer-note {
	padding: var(--hz-sp-4) 0 var(--hz-sp-6);
	font-size: var(--hz-fs-xs);
	color: var(--hz-text-faint);
	line-height: 1.7;
	max-width: 90ch;
	border-top: 1px dashed rgba(255, 255, 255, 0.06);
	margin-top: var(--hz-sp-2);
}

/* Sayfa başına dön — yüzen iletişim yığınının içinde, balonun hemen altında */

.hz-totop {
	width: 46px;
	height: 46px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var(--hz-bg-card);
	border: 1px solid var(--hz-line);
	color: var(--hz-accent);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px) scale(0.9);
	transition: opacity 320ms var(--ease-sharp), transform 320ms var(--ease-spring), border-color 260ms, box-shadow 260ms;
	box-shadow: var(--hz-shadow);
	flex: none;
	/* Yığında en altta: WhatsApp balonu bunun üstünde durur. */
	order: 3;
}

.hz-totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.hz-totop:hover {
	border-color: var(--hz-accent);
	box-shadow: var(--hz-glow);
	transform: translateY(-2px);
}

.hz-totop .hz-icon { transform: rotate(-90deg); }

/* ==================================================================
   7. SAYFA BAŞLIĞI (arşiv / tekil)
   ================================================================== */

.hz-pagehead {
	position: relative;
	/* Minimal başlık bandı: üst boşluk yalnızca sabit header'ı temizleyecek kadar. */
	padding-top: calc(var(--hz-header-h) + clamp(1.1rem, 0.6rem + 1.6vw, 2rem));
	padding-bottom: clamp(1.15rem, 0.7rem + 1.4vw, 1.9rem);
	overflow: hidden;
	border-bottom: 1px solid var(--hz-line);
}

.hz-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 120% at 20% 0%, rgba(var(--hz-accent-rgb), 0.13), transparent 60%),
		linear-gradient(180deg, var(--hz-bg-elev-1), var(--hz-bg-main));
	z-index: -1;
}

/* Tipografi büyük kalır, aradaki nefeslikler kısalır. */
.hz-pagehead h1 {
	margin-bottom: 0.35rem;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.hz-pagehead .hz-eyebrow { margin-bottom: 0.45rem; }

.hz-pagehead .hz-lead {
	max-width: 68ch;
	margin-bottom: 0;
	font-size: clamp(1rem, 0.95rem + 0.28vw, 1.16rem);
	line-height: 1.55;
	color: var(--hz-text-soft);
}

/* Başlık bandından hemen sonraki bölüm de yukarı çekilir. */
.hz-pagehead + .hz-section {
	padding-top: clamp(1.4rem, 0.9rem + 1.8vw, 2.6rem);
}

.hz-crumbs { margin-bottom: 0.6rem; }

.hz-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--hz-fs-xs);
	color: var(--hz-text-faint);
}

.hz-crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; }

.hz-crumbs li + li::before {
	content: "/";
	color: var(--hz-text-faint);
	opacity: 0.5;
}

.hz-crumbs a { color: var(--hz-text-muted); }
.hz-crumbs a:hover { color: var(--hz-accent); }
.hz-crumbs [aria-current="page"] { color: var(--hz-accent); }

/* ==================================================================
   9. DİL DEĞİŞTİRİCİ
   ==================================================================
   Google'ın kendi çeviri araç çubuğu tamamen gizlenir; dil seçimi
   temanın kendi menüsünden yapılır.
   ================================================================== */

/* ---- Çeviri aracı artefaktlarını bastır ----
   Google, sayfaya kendi araç çubuğunu ve konumlandırma stillerini enjekte
   eder: <body> elementine top değeri verir, üstte bir iframe açar ve
   metinleri <font> etiketleriyle sarmalar. Bunlar düzeltilmezse sayfa
   aşağı kayar, yatay taşma ve ikinci bir kaydırma çubuğu oluşur. */

/* Üstteki araç çubuğu iframe'i ve balon ipuçları */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
body > .skiptranslate,
iframe.skiptranslate {
	display: none !important;
	visibility: hidden !important;
}

/* Aracın <body> üzerine yazdığı konum düzeltmesi geri alınır. */
body,
body.translated-ltr,
body.translated-rtl {
	top: 0 !important;
	position: static !important;
	min-height: 0 !important;
}

/* Çeviri sonrası yatay taşma ve ikinci kaydırma çubuğu engellenir. */
html.translated-ltr,
html.translated-rtl,
html.translated-ltr body,
html.translated-rtl body {
	overflow-x: hidden !important;
	max-width: 100%;
}

/* Aracın kendi kutusu görünmez ama ölçü yaratmaz. */
#google_translate_element,
.goog-te-gadget {
	position: absolute !important;
	top: 0;
	left: -9999px;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Çevrilen metnin üzerindeki sarı vurgu kaldırılır. */
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/*
 * Araç, çevirdiği her metni <font> etiketiyle sarmalar. Bu etiketler
 * satır içi kutu oluşturup esnek yerleşimleri bozabildiği için tüm
 * biçim değerleri sıfırlanır.
 */
font {
	all: unset;
	display: inline;
}

/* ---- Seçici ---- */

.hz-lang { position: relative; flex: none; }

.hz-lang-toggle {
	display: inline-grid;
	grid-template-columns: 22px auto 9px;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 7px 10px 7px 9px;
	border-radius: var(--hz-radius-pill);
	border: 1px solid var(--hz-line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--hz-text-soft);
	font-family: var(--hz-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: border-color var(--anim-speed) var(--ease-sharp), color var(--anim-speed) var(--ease-sharp), background var(--anim-speed) var(--ease-sharp);
	-webkit-tap-highlight-color: transparent;
}

.hz-lang-toggle:hover,
.hz-lang.is-open .hz-lang-toggle {
	border-color: rgba(var(--hz-accent-rgb), 0.45);
	background: rgba(var(--hz-accent-rgb), 0.1);
	color: #fff;
}

.hz-flag {
	flex: none;
	justify-self: center;
	width: 22px;
	height: 15px;
	border-radius: 3px;
	display: block;
	overflow: hidden;
}

.hz-lang-caret {
	justify-self: center;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 280ms var(--ease-out);
	opacity: 0.7;
}

.hz-lang.is-open .hz-lang-caret { transform: rotate(-135deg) translate(-1px, -1px); }

/* ---- Açılır liste ---- */

.hz-lang-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 218px;
	padding: 7px;
	border-radius: 16px;
	background: rgba(var(--hz-card-rgb), 0.98);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	border: 1px solid rgba(var(--hz-accent-rgb), 0.25);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.97);
	transform-origin: top right;
	transition: opacity 240ms var(--ease-sharp), transform 320ms var(--ease-out), visibility 320ms;
	z-index: 5;
}

.hz-lang.is-open .hz-lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/*
 * Izgara yerleşim (esnek yerine): bayrak, ad ve onay işareti için sabit
 * sütunlar tanımlanır. Çeviri aracı metinleri <font> etiketiyle sarsa
 * bile sütunlar kaymaz — daha önce bayraklar yazıların üstüne biniyordu.
 */
.hz-lang-item {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 10px;
	position: relative;
	white-space: nowrap;
	padding: 9px 11px;
	border-radius: 11px;
	color: var(--hz-text-soft);
	font-size: 0.87rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background 200ms var(--ease-sharp), color 200ms var(--ease-sharp);
}

.hz-lang-item > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Koruma katmanı.
 *
 * Dil satırları <a> etiketidir; başlıktaki genel bağlantı kuralları onları
 * yanlışlıkla yakalayıp kutu ölçüsü dayatabiliyor. Menü içindeki ölçüler
 * burada kesin olarak geri alınır.
 */
.hz-lang-menu a.hz-lang-item {
	width: auto;
	height: auto;
	min-height: 0;
	justify-items: stretch;
	background: none;
	border: 0;
}

.hz-lang-menu a.hz-lang-item:hover {
	background: rgba(var(--hz-accent-rgb), 0.12);
}

.hz-lang-item:hover {
	background: rgba(var(--hz-accent-rgb), 0.12);
	color: #fff;
}

.hz-lang-item.is-current { color: var(--hz-accent-200); }
.hz-lang-check { color: var(--hz-accent); display: flex; justify-content: flex-end; }

.hz-lang-note {
	grid-column: 1 / -1;
	margin: 6px 4px 2px;
	padding-top: 8px;
	border-top: 1px solid var(--hz-line);
	font-size: 0.7rem;
	line-height: 1.5;
	color: var(--hz-text-faint);
}

/* ---- Dar ekran: şeridin sağ ucunda ---- */

@media (max-width: 1024px) {
	.hz-header-actions .hz-lang { display: none; }

	.hz-header-social .hz-lang {
		display: block;
		margin-left: auto;
	}

	.hz-header-social .hz-lang-toggle {
		padding: 5px 9px 5px 8px;
		font-size: 0.72rem;
	}

	/* Menü, düğmenin sağ kenarına hizalanır; şeridin kendi boşluğu yeterlidir. */
	.hz-header-social .hz-lang-menu {
		top: calc(100% + 8px);
		right: 0;
		min-width: 196px;
		max-width: calc(100vw - (var(--hz-gutter) * 2));
	}
}

@media (min-width: 1025px) {
	.hz-header-social .hz-lang { display: none; }
}