/* Floortrim UK — bileşen CSS 01/19: Temel + site başlığı/altbilgi iskeleti, nav (mobil çekmece + masaüstü açılır menü), deri sınıfları (surface/spec, derisiz kabuk); ürün kartı tabanı ve .ft-quote-cta.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

/* — Site basligi/altbilgi iskeleti (header.php / footer.php) — */
.ft-site-header {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.ft-site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

.ft-site-header__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--fg);
  text-decoration: none;
}

/* Logo artik satir ici SVG (tema-fix I-6, header.php + floortrim_uk_logo_svg()).
   Boyut viewBox oraniyla CSS'ten verilir (width/height ozniteligi YOK); renk
   currentColor -> .ft-site-header__brand'in color'undan gelir. img secicisi
   geriye donuk (ornek: JS fallback / eski cache) tutuldu. */
.ft-site-header__brand img,
.ft-site-header__brand svg {
  display: block;
  /* 44px logo → başlık her genişlikte 77px (2×1rem + 44px + 1px çizgi); yapışkan öğeler buna bağlı. */
  height: 44px;
  width: auto;
}

.ft-site-header__toggle {
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  cursor: pointer;
}

/* — Nav paneli: mobil/tablette header'in altina tasan overlay drawer (icerigi ITMEZ,
   position:absolute + hero'nun scroll pozisyonu sabit kalir). Masaustunde (>=1024px)
   satir-ici hale gelir, bkz. asagidaki @media (min-width: 1024px) blogu. Ac/kapa
   gecisi (hidden <-> .is-open koprusu) nav.js'te yonetilir. — */
.ft-site-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-surface-3);
  box-shadow: var(--shadow-lg);
  /* Header yuksekligi 77px (bkz. logo kurali) — panel ekrandan tasmasin. */
  max-height: calc(100dvh - 77px);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out);
}

.ft-site-header__nav.is-open {
  opacity: 1;
  transform: none;
}

.ft-site-header__nav > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
}

.ft-site-header__nav > ul > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
}

.ft-site-header__nav a {
  color: var(--fg);
  text-decoration: none;
}

.ft-site-footer {
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
}

/* — WooCommerce/urun bilesenleri (Task 7/8'in kullandigi sinif sozlesmesi) — */
.ft-product-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}

/* Kart metni: Woo'nun `li.product { padding: 0 }` kuralı kartın iç boşluğunu ezer; görsel ve buton kenardan kenara, yalnız metin içeride. */
.woocommerce ul.products li.product.ft-product-card .ft-product-card__title,
.woocommerce ul.products li.product.ft-product-card .ft-product-card__price {
  padding-inline: clamp(0.875rem, 2vw, 1.25rem);
}

/* Kart görseli: kırpılmamış fotoğraf kare çerçevede, boşluk her temada beyaz (fotoğraflar beyaz fonlu).
   Özgüllük Woo'nun `.woocommerce ul.products li.product a img` (0,3,3) kuralını aşar. */
.woocommerce ul.products li.product.ft-product-card a img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--color-white);
}

@media (hover: hover) {
  .ft-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

/* .ft-category-filter chip'leri: 05-archive-hero-filter.css "Kategori filtre şeridi". */

.ft-quote-cta {
  display: inline-block;
  background: var(--fill-accent);
  color: var(--on-fill-accent);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  transition: opacity var(--dur-press) var(--ease-out);
}

@media (hover: hover) {
  .ft-quote-cta:hover { opacity: 0.88; }
}

[data-ft-nav-menu][hidden] { display: none; }

/* --- 2 seviyeli menu: mobil/tablette grup karti (girinti cizgisi yerine zemin+radius),
   masaustunde hover/focus-within dropdown karti (bkz. @media (min-width: 1024px)
   altindaki .sub-menu override'lari) --- */
.ft-site-header__nav .sub-menu {
	list-style: none;
	margin: 0.25rem 0 0.75rem;
	padding: 0.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.25rem;
	background: var(--color-surface-2);
	border-radius: var(--radius);
}

@media (max-width: 359px) {
	.ft-site-header__nav .sub-menu {
		grid-template-columns: 1fr;
	}
}

.ft-site-header__nav .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.5rem;
	border-radius: var(--radius);
	font-size: 0.9rem;
}

/* --- Surface/Spec zemin (Task 5'in body_class filtresiyle atanir) --- */
body.ft-skin-surface {
	background: var(--color-surface-0);
	color: var(--color-on-surface);
}

body.ft-skin-spec {
	background: var(--color-spec-0);
	color: var(--color-on-spec);
}

/* Vurgu/odak rolleri (--color-focus → --focus, --color-orange → --accent-deco) tokens.css'te
   <html data-ft-theme> ile döner; dolgu rolündeki bileşenlerin koyu deri ters dolgusu: 08-inverse-fill.css. */

/* --- Kabuk (header/footer) deri renkleri: koyu Surface/Spec zemininde AA için metin
   --color-on-*, ikincil metin --color-on-*-muted. --- */
body.ft-skin-surface .ft-site-header {
	border-bottom-color: var(--color-surface-3);
}

body.ft-skin-spec .ft-site-header {
	border-bottom-color: var(--color-spec-line);
}

body.ft-skin-surface .ft-site-header__brand,
body.ft-skin-surface .ft-site-header__toggle,
body.ft-skin-surface .ft-site-header__nav a {
	color: var(--color-on-surface);
}

body.ft-skin-spec .ft-site-header__brand,
body.ft-skin-spec .ft-site-header__toggle,
body.ft-skin-spec .ft-site-header__nav a {
	color: var(--color-on-spec);
}

body.ft-skin-surface .ft-site-header__toggle {
	border-color: var(--color-surface-3);
}

body.ft-skin-spec .ft-site-header__toggle {
	border-color: var(--color-spec-line);
}

body.ft-skin-surface .ft-site-footer {
	border-top-color: var(--color-surface-3);
	color: var(--color-on-surface-muted);
}

body.ft-skin-spec .ft-site-footer {
	border-top-color: var(--color-spec-line);
	color: var(--color-on-spec-muted);
}

/* --- Derisiz kabuk: Cart/Checkout/My Account deri sınıfı almaz (functions.php
   floortrim_uk_body_classes()); başlık temayı izler (--bg-raised: koyu #141414, açık beyaz). --- */
body:not(.ft-skin-surface):not(.ft-skin-spec) .ft-site-header {
	background: var(--bg-raised);
}

/* Satır içi logo currentColor kullanır → marka rengi bu kabukta açıkça --fg. */
body:not(.ft-skin-surface):not(.ft-skin-spec) .ft-site-header__brand,
body:not(.ft-skin-surface):not(.ft-skin-spec) .ft-site-header__toggle {
	color: var(--fg);
	border-color: var(--color-surface-3);
}

body:not(.ft-skin-surface):not(.ft-skin-spec) .ft-site-header__nav a {
	color: var(--fg);
}

/* --- Masaustu nav (>=1024px): toggle gizlenir, nav header cubugunda satir-ici,
   Products/Colors hover+focus-within ile animasyonlu dropdown karti acar --- */
@media (min-width: 1024px) {
	.ft-site-header__toggle {
		display: none;
	}

	/* [hidden] oznitelik toggle etkilesimsiz oldugu icin sonsuza kadar "true" kalabilir
	   (toggle display:none -> hicbir tiklama gelmez); masaustunde nav her zaman gorunur
	   olmali -> [hidden] kuralini burada override ediyoruz (ayni ozgulluk, kaynak sirasi
	   daha sonra oldugu icin kazanir; nav.js'in mobil ac/kapa mantigina dokunmadan). */
	[data-ft-nav-menu][hidden] {
		display: block;
	}

	.ft-site-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 1.5rem;
	}

	.ft-site-header__bar {
		padding: 1rem 0;
	}

	.ft-site-header__nav {
		position: static;
		z-index: auto;
		background: none;
		border-bottom: none;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ft-site-header__nav > ul {
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding: 0;
	}

	.ft-site-header__nav > ul > li {
		position: relative;
		/* Hover koprusu: kart top:100% ile li arasinda bosluk kalmasin diye li'ye
		   gorunmez padding-bottom eklenir, negatif margin toplam yuksekligi geri alir. */
		padding-bottom: 0.75rem;
		margin-bottom: -0.75rem;
	}

	.ft-site-header__nav > ul > li > a {
		min-height: 44px;
		padding: 0 0.75rem;
	}

	/* Not (dogrulama 1, viewport tasmasi): Products/Colors gercek menude nav'in SAG
	   yarisinda (7 ogeden 5. ve 6.si) -> tasarim brief'i left:0 oneriyordu ama bu, genis
	   (560-580px) Products kartinin 1024/1440'ta viewport disina tasmasina yol aciyordu
	   (Puppeteer ile olculdu: right kenari 1782px, viewport 1440). Duzeltme: kart tetikleyici
	   linkin SAG kenarina hizalanir (right:0/transform-origin:top right) -> ayni kart
	   tasarimi+animasyon sozlesmesi, viewport icinde kalir. Menu yeniden duzenlenip
	   dropdown'lu oge nav'in sol yarisina tasinirsa bu sabit yeniden degerlendirilmeli. */
	.ft-site-header__nav .sub-menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: auto;
		z-index: 30;
		display: block;
		grid-template-columns: none;
		margin: 0;
		padding: 0.5rem;
		background: var(--color-surface-1);
		border: 1px solid var(--color-surface-3);
		border-radius: var(--radius);
		box-shadow: var(--shadow-lg);
		visibility: hidden;
		opacity: 0;
		transform: translateY(4px) scale(0.97);
		transform-origin: top right;
		/* Duzeltme (inceleme, Minor-3): kapanista visibility fade tamamlanmadan atlamasin
		   diye acilan/kapanan durumlar farkli transition tanimlar (klasik gecikme deseni):
		   kapali (bu kural) -> visibility'nin SURESI 0s ama GECIKMESI --dur-menu, yani
		   deger opacity/transform fade'i bitene KADAR "visible" kalip en sonda "hidden"a
		   atlar (pointer olayi sizmiyor, kesik his de yok). */
		transition: opacity var(--dur-menu) var(--ease-out),
			transform var(--dur-menu) var(--ease-out),
			visibility 0s var(--dur-menu);
	}

	/* Kolon deseni nav.js tarafindan alt oge sayisina gore atanir (menu sirasi/ID'sine
	   BAGLI DEGIL -> menu yeniden duzenlenirse kirilmaz): >6 oge = 3 kolonlu genis kart
	   (Products, 14 oge), aksi halde dar tek kolon (Colors, 3 oge). */
	.ft-nav-dropdown--grid > .sub-menu {
		width: 560px;
		display: grid;
		grid-template-columns: repeat(3, minmax(150px, 1fr));
		gap: 0.125rem 0.75rem;
	}

	.ft-nav-dropdown--list > .sub-menu {
		width: 200px;
	}

	.ft-site-header__nav .sub-menu a {
		min-height: 40px;
		padding: 0 0.5rem;
		font-size: 0.9rem;
	}

	/* Acik durumda visibility gecikmesiz aninda "visible"a doner (0s 0s) -> acilis
	   geciktirilmez, yalniz kapanis geciktirilir (bkz. yukaridaki kapali kural yorumu). */
	@media (hover: hover) {
		.ft-site-header__nav .menu-item-has-children:hover > .sub-menu {
			visibility: visible;
			opacity: 1;
			transform: none;
			transition: opacity var(--dur-menu) var(--ease-out),
				transform var(--dur-menu) var(--ease-out),
				visibility 0s;
		}
	}

	.ft-site-header__nav .menu-item-has-children:focus-within > .sub-menu,
	.ft-site-header__nav .menu-item-has-children.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--dur-menu) var(--ease-out),
			transform var(--dur-menu) var(--ease-out),
			visibility 0s;
	}

	/* Duzeltme (inceleme, Minor-4 destegi): Escape klavye yolunda tetikleyici linke
	   focus() dokunmatik akisiyla tutarli olsun diye geri donuluyor, ama tetikleyici <a>
	   li'nin ICINDE oldugundan bu :focus-within'i yeniden true yapip karti tekrar
	   acardi. Bu kural bunu ezer (ayni ozgullukte source-order'da EN SONDA) -> nav.js
	   Escape'te .is-force-closed ekleyip link.focus() cagirir, kart GERCEKTEN kapanir;
	   bir sonraki gercek mouseenter/focusin'de (nav.js) sinif kaldirilir, kilitlenmez. */
	.ft-site-header__nav .menu-item-has-children.is-force-closed > .sub-menu {
		visibility: hidden;
		opacity: 0;
		transform: translateY(4px) scale(0.97);
		transition: opacity var(--dur-menu) var(--ease-out),
			transform var(--dur-menu) var(--ease-out),
			visibility 0s;
	}
}