/* ============================================================
   UMX — Masaustu duzen iyilestirmeleri
   Tum dillerde yuklenir. Mobil (<1024px) davranisina DOKUNULMAZ.
   ============================================================ */

@media (min-width: 1024px) {

	/* --- 1) Tek urunlu kategoriler: bos alani kapat, yatay karta gec ---
	   2 sutunluk gridde tek kart kaldiginda ekranin yarisi bos kaliyordu. */
	.umx-products__grid > .umx-products__card {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(300px, 38%) 1fr;
		align-items: stretch;
		overflow: hidden;
	}

	/* grid ogelerinin varsayilan min-width:auto degeri tasmaya yol aciyor */
	.umx-products__grid > .umx-products__card > * {
		min-width: 0;
		max-width: 100%;
	}

	.umx-products__grid > .umx-products__card > .umx-products__card-image {
		height: 100%;
		min-height: 340px;
		aspect-ratio: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.umx-products__grid > .umx-products__card > .umx-products__card-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.umx-products__grid > .umx-products__card > .umx-products__card-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 36px 40px;
	}

	/* Yatay kartta aciklama cok uzamasin */
	.umx-products__grid > .umx-products__card .umx-products__card-desc {
		max-width: 62ch;
	}

	/* --- 2) 3 sutunluk gridde 2 kart kalirsa 2 sutuna dus --- */
	.umx-products__grid--3col:has( > .umx-products__card:nth-child(2):last-child ) {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- 3) Kart etkilesimi: hafif yukselme (yon bagimsiz) --- */
	.umx-products__card {
		transition: transform .25s ease, box-shadow .25s ease;
	}
	.umx-products__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
	}
}

/* --- 4) Gorsel arka planini esitle ---
   Bazi urun fotograflari beyaz kutulu JPG, bazilari seffaf PNG.
   Ortak bir acik zemin ikisini de tutarli gosterir. */
.umx-products__card-image {
	background: linear-gradient(160deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
}
.umx-products__card-image img {
	mix-blend-mode: normal;
}

/* --- 5) Model kodu etiketi her zaman gorselin ustunde kalsin --- */
.umx-products__card-image { isolation: isolate; }
.umx-products__card-code {
	position: absolute;
	z-index: 3;
	bottom: 16px;
	inset-inline-start: 18px;
	padding: 6px 12px;
	border-radius: 999px;
	width: fit-content;
	max-width: calc(100% - 36px);
	background: rgba(11, 18, 40, .72);
	backdrop-filter: blur(6px);
	color: #fff;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

/* --- 6) Dekoratif parlama ogeleri yatay tasmaya yol acmasin ---
   .umx-packages__glow: 500px genislik, right:-100px ile kapsayicinin
   disina tasiyor. Kapsayiciyi kirparak tasmayi kesiyoruz. */
.umx-packages,
.umx-products,
.umx-products-hero,
.umx-hero,
.umx-why,
.umx-uses,
.umx-cta {
	overflow-x: clip;
}

/* Not: html/body uzerinde overflow-x kurali KULLANILMIYOR.
   Olcum sonucu mobilde gercek bir tasma bulunmadi; ayrica bu kural
   yapiskan (sticky) kategori menusunu bozma riski tasiyor. */


/* --- 7) Sabit baslik + kategori menusu: ustteki bosluk giderildi ---
   SORUN: .umx-products-nav "fixed; top:72px" idi ve ustunde 72px bosluk
   kaliyordu. Cunku site basligi (.umx-header) "sticky" olmasina ragmen
   yapismiyor: (a) kapsayicisi yalnizca baslik yuksekliginde, (b) sitenin
   kendi CSS'inde html/body uzerinde "overflow-x: hidden" var ve bu
   sticky'yi bozar.

   COZUM: overflow-x -> clip (yatay kaydirmayi yine engeller, kaydirma
   baglami yaratmaz), baslik gercekten sabitlenir, menu de tam altina
   oturur. Sabit ogeler yer kaplamadigi icin telafi bosluklari eklenir. */
html,
body {
	overflow-x: clip !important;
}

html body .umx-header.umx-header {
	position: fixed !important;
	top: 0;
	inset-inline: 0;
	z-index: 100;
}

/* Baslik sabitlendi: akistaki yerini korumak icin kapsayiciya yukseklik */
html body .elementor-location-header {
	min-height: 89px;
}

html body .umx-products-nav.umx-products-nav {
	top: 89px !important;
	z-index: 60;
}

/* Sabit menu yer kaplamaz: hero icerigi menunun altina girmesin */
html body .umx-products-hero {
	padding-top: 110px;
}

@media (max-width: 1023px) {
	html body .elementor-location-header {
		min-height: 73px;
	}

	html body .umx-products-nav.umx-products-nav {
		top: 73px !important;
	}

	html body .umx-products-hero {
		padding-top: 96px;
	}
}

/* --- 8) Mobil: kategori menusu kaydirma yonune gore gizlenir ---
   Sayfa mobilde ~18 ekran; menu surekli acikken ekranin %17'si
   (baslik + menu) kapali kaliyordu. Asagi kaydirirken gizlenir,
   yukari kaydirirken geri gelir. Masaustunde her zaman acik. */
@media (max-width: 1023px) {
	html body .umx-products-nav.umx-products-nav {
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		will-change: transform;
	}

	html body .umx-products-nav.umx-nav--gizli {
		transform: translateY(-140%);
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .umx-products-nav.umx-products-nav {
		transition: none;
	}
}

/* --- 9) Kullanim Alanlari kartlari: emoji yerine gercek fotograf ---
   Kart gorsel alani 140px (mobilde 120px) ve tam genislik; fotograf
   alani doldurup kirpilir. Kaynak 720x360 WebP (~20 KB/adet). */
.umx-uses .umx-uses__card-visual .umx-uses__card-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.umx-uses .umx-uses__card:hover .umx-uses__card-img {
	transform: scale(1.06);
}

/* Ustteki radyal parlama katmani fotografi soldurmasin */
.umx-uses .umx-uses__card-visual:has(.umx-uses__card-img)::after {
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.umx-uses .umx-uses__card-visual .umx-uses__card-img {
		transition: none;
	}
	.umx-uses .umx-uses__card:hover .umx-uses__card-img {
		transform: none;
	}
}

/* --- 10) Urun ozet seridi: kutu sayisina gore uyum saglasin ---
   Serit sabit 4 sutunluk izgaraydi. Degeri girilmemis ozellikler
   artik hic basilmadigi icin (bkz. umx-bos-ozellik.php), geriye tek
   kutu kaldiginda kalan 3 hucre bos gri alan olarak goruluyordu.
   Esnek kutu duzenine gecince mevcut kutular seridi tam doldurur. */
html body .umx-h1-hero__specs.umx-h1-hero__specs {
	display: flex;
	flex-wrap: wrap;
}

html body .umx-h1-hero__specs.umx-h1-hero__specs > .umx-h1-hero__spec {
	flex: 1 1 130px;
	min-width: 0;
}

/* --- 11) Adres baglantisi: tiklayinca yol tarifi acilir --- */
.umx-adres-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, opacity .2s ease;
}
.umx-adres-link:hover,
.umx-adres-link:focus-visible {
	border-bottom-color: currentColor;
	opacity: .85;
}
.umx-adres-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- 12) Dil secici: yedi dil icin acilir liste --- */
.umx-langsel { position: relative; }
.umx-langsel > summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16);
	background: rgba(255,255,255,.06); color: #E2E8F0;
	font-size: 12.5px; font-weight: 700; letter-spacing: .04em; line-height: 1;
	transition: background .18s ease, border-color .18s ease;
}
.umx-langsel > summary::-webkit-details-marker { display: none; }
.umx-langsel > summary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.umx-langsel > summary:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }
.umx-langsel__btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.umx-langsel__ok { width: 12px; height: 12px; transition: transform .18s ease; }
.umx-langsel[open] .umx-langsel__ok { transform: rotate(180deg); }

.umx-langsel__panel {
	position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 10001;
	min-width: 178px; padding: 6px; border-radius: 12px;
	background: #0F1B30; border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 14px 34px rgba(0,0,0,.34);
	display: flex; flex-direction: column; gap: 1px;
}
.umx-langsel__item {
	display: flex; align-items: center; gap: 10px; padding: 9px 11px;
	border-radius: 8px; text-decoration: none; color: #CBD5E1;
	font-size: 13.5px; line-height: 1.2; transition: background .15s ease, color .15s ease;
}
.umx-langsel__item:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.umx-langsel__item--active { background: rgba(37,99,235,.18); color: #FFFFFF; }
.umx-langsel__kod {
	font-size: 11px; font-weight: 800; letter-spacing: .06em;
	min-width: 24px; opacity: .75;
}
.umx-langsel__ad { font-weight: 600; }

/* Mobil menu ve alt bilgi: yedi rozet alt satira sarilsin */
.umx-lang--cok { display: flex; flex-wrap: wrap; gap: 6px; }

/* Dil adi kolonu hep ayni yerden bassin (Arapca dahil) */
.umx-langsel__ad { flex: 1 1 auto; text-align: start; }

/* Dil adi kutusu icerigi kadar genisler; boylece Arapca ad da
   digerleriyle ayni noktadan baslar (dir="rtl" yaziyi dogru
   yonde dizer ama kutuyu sagda birakmaz). */
.umx-langsel__ad { flex: 0 1 auto; }