/* Floortrim UK — bileşen CSS 04/19: Kabuk cilası: yapışkan başlık, hero ölçüleri, eyebrow, genel klavye odağı; nav alt çizgisi, seçili durum, alt menü oku.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* --- Kabuk cilası: yapışkan başlık, hero ölçüleri, eyebrow etiketi, genel odak halkası. --- */

/* Yapisan (sticky) header: yari saydam + blur; sayfa basindayken zeminle ayni
   gorundugu icin ek scroll-state JS'i GEREKMEZ.

   KATMAN SIRASI (tema geneli, tek kaynak):
     0   sayfa icerigi + icerige ait yigin baglamlari (or. urun galerisi — Woo'nun
         kendi z-index:99'unu ICERDE tutar, bkz. .ft-product-single__gallery)
     30  nav drawer / masaustu dropdown menu
     40  yapiskan site header'i (bu kural)
     100 cizim goruntuleyici (.ft-lightbox) — her seyin ustunde
   Yeni bir katman eklenirken bu listeye yazilir; 3. taraf (WooCommerce) z-index'leri
   sayfa duzeyine sizmasin diye kendi kapsayicisinda yigin baglami acilir. */
.ft-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
}

body.ft-skin-surface .ft-site-header {
	background: var(--bg-header);
}

body.ft-skin-spec .ft-site-header {
	background: var(--spec-bg-header);
}

@supports (backdrop-filter: blur(12px)) {
	body.ft-skin-surface .ft-site-header,
	body.ft-skin-spec .ft-site-header {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}

/* Hero: daha sinematik yukseklik + dikey ortalama */
.ft-hero--visual {
	display: flex;
	align-items: center;
	min-height: clamp(460px, 66dvh, 760px);
}

.ft-hero--visual .ft-hero__inner {
	width: 100%;
}

.ft-hero--visual h1 {
	letter-spacing: -0.02em;
}

/* Eyebrow etiketi (bolum basliklarinin ustunde kucuk vurgu isareti) */
.ft-section-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-orange-bright);
	margin-bottom: 0.6rem;
}

/* Görünür klavye odağı (tüm etkileşimli öğeler): --color-focus zemine göre çözülür
   (açık zemin → iş siyahı, koyu → beyaz); sabit renk beyaz zeminde kaybolurdu (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* --- Nav cilası: animasyonlu alt çizgi + net seçili durum. Sık kullanılan yüzey →
   hareket hızlı/ince (emil frekans kuralı). --- */

/* Pasif linkler hafif soluk, hover/secili tam parlak — hiyerarsi okunur */
.ft-site-header__nav > ul > li > a {
	opacity: 0.78;
	transition: opacity 160ms ease;
}

.ft-site-header__nav > ul > li > a[aria-current="page"],
.ft-site-header__nav .current-menu-item > a,
.ft-site-header__nav .current-menu-ancestor > a,
.ft-site-header__nav .current_page_item > a {
	opacity: 1;
	color: var(--color-orange-bright);
}

@media (hover: hover) {
	.ft-site-header__nav > ul > li > a:hover {
		opacity: 1;
	}
}

/* Mobil/tablet cekmecesinde secili oge: sol vurgu ic cizgisi */
@media (max-width: 1023px) {
	.ft-site-header__nav .current-menu-item > a,
	.ft-site-header__nav .current_page_item > a {
		box-shadow: inset 2px 0 0 var(--color-orange);
	}
}

/* Masaustu: buyuyen alt cizgi (hover'da soldan acilir, secili sayfada sabit) */
@media (min-width: 1024px) {
	.ft-site-header__nav > ul > li > a {
		position: relative;
	}

	.ft-site-header__nav > ul > li > a::after {
		content: "";
		position: absolute;
		left: 0.75rem;
		right: 0.75rem;
		bottom: 4px;
		height: 2px;
		border-radius: var(--radius);
		background: var(--color-orange);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 180ms var(--ease-out);
	}

	.ft-site-header__nav > ul > li > a[aria-current="page"]::after,
	.ft-site-header__nav .current-menu-item > a::after,
	.ft-site-header__nav .current-menu-ancestor > a::after,
	.ft-site-header__nav .current_page_item > a::after {
		transform: scaleX(1);
	}

	.ft-site-header__nav > ul > li > a:focus-visible::after {
		transform: scaleX(1);
	}

	@media (hover: hover) {
		.ft-site-header__nav > ul > li > a:hover::after {
			transform: scaleX(1);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-site-header__nav > ul > li > a,
	.ft-site-header__nav > ul > li > a::after {
		transition: none;
	}
}

/* Masaüstü alt menü oku: açılır menünün varlığı görünür olmalı. ::after alt çizgide
   kullanıldığı için ok ::before ile çizilir; flex `order` onu metnin sağına alır. */
@media (min-width: 1024px) {
	.ft-site-header__nav > ul > li.menu-item-has-children > a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.ft-site-header__nav > ul > li.menu-item-has-children > a::before {
		content: "";
		order: 1;
		width: 0.38rem;
		height: 0.38rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 150ms var(--ease-out);
	}

	.ft-site-header__nav > ul > li.menu-item-has-children:focus-within > a::before,
	.ft-site-header__nav > ul > li.menu-item-has-children.is-open > a::before {
		transform: translateY(1px) rotate(225deg);
	}

	@media (hover: hover) {
		.ft-site-header__nav > ul > li.menu-item-has-children:hover > a::before {
			transform: translateY(1px) rotate(225deg);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-site-header__nav > ul > li.menu-item-has-children > a::before {
		transition: none;
	}
}