/* --- 0. Ozgulluk zirhi ---------------------------------------------------
   Elementor'un global kiti (Default Kit #1095) `.elementor-kit-1095 h1..h6`
   bicimindeki kurallar basiyor ve bu secicinin ozgullugu (0,1,1), bizim tek
   sinifli kurallarimizinkinden (0,1,0) YUKSEK. Govde etiketi her sayfada
   `elementor-kit-1095` sinifini tasidigi icin kit her zaman kazaniyordu:
   tasarladigimiz 76px'lik H1 canlida 30px olarak ciziliyordu.

   Cozum: sablonun kendi basliklarini `.ek-urun` kabi altinda niteliyoruz —
   (0,2,0) > (0,1,1). !important kullanilmadi; ozgullugu duzeltmek dogru
   arac, !important sonraki her kurali da bloke ederdi.
   -------------------------------------------------------------------- */
/* Urun sablonu duzeni. Tokenlar esenkim-main.css'te tanimli (Gorev 1).
   Bu dosya YALNIZCA urun sablonunda kuyruga alinir (functions.php).

   Spec §6.1 — YENIDEN TASARLANDI. Pilotta reddedilen ilk surum (A · Odak)
   tam genislik hero + tam genislik gorsel + teknik tablo etrafinda
   kuruluydu; kullanici "sayfa bos, ortada asiri buyuk bir fotograf" dedi.
   Iki olculmus sebep: (1) `.ek-urun-gorsel img{width:100%}` gercek
   gorsel boyutlarina (442x262 .. 1600x657, yarisi 700px altinda) uymuyordu
   ve Sorbitol'un 500x500 gorselini 2,6 kat buyutuyordu; (2) sayfalar teknik
   fos degil 2.375-8.490 kelimelik uzun yazi, hicbirinde CAS no yok — metin
   en alta dar bir sutuna itilmisti. Bu surumde: gorsel KENDI BOYUTUNDA
   (width:auto + max-width:100%, hicbir zaman buyutulmez) ve metin sayfanin
   merkezine alindi (bkz. §6.1.1 baglayici gorsel kurali, asagida). */

.ek-urun{background:var(--yuzey);color:var(--metin);
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
	font-size:var(--tip-govde);line-height:var(--tip-satir-govde)}
.ek-urun > section{padding-block:var(--ek-bolum);
	padding-inline:max(24px,calc((100% - 1120px) / 2))}

/* --- 1. Hero: iki sutun — solda eyebrow+H1+CTA, saga gorsel kendi boyutunda.
   Dar ekranda tek sutuna coker; DOM sirasi (metin once, gorsel sonra) gorseli
   basligin ALTINA duruyor, ayrica bir `order` kuralina ihtiyac yok. --- */
.ek-urun-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:center;gap:clamp(32px,6vw,80px);text-align:left}
.ek-urun-hero-metin{min-width:0}
.ek-urun-hero-gorsel{margin:0;min-width:0}

/* §6.1.1 — baglayici gorsel kurali. width:auto gorseli KENDI genisliginde
   cizer, max-width tasmayi engeller. Hicbir gorsel asla buyutulmez. */
/* Urune HICBIR filtre uygulanmiyor. Onceki surumde
   filter:drop-shadow(...) vardi; drop-shadow alfa kanalini takip ettigi
   icin varilin siluetini ciziyor ve koyu bir kontur birakiyordu — tam
   olarak istenmeyen "uruna yapismis isik" gorunumu. */
.ek-urun-hero img{width:auto;max-width:100%;height:auto;display:block;
	position:relative;z-index:2}

@media (max-width:780px){
	.ek-urun-hero{grid-template-columns:1fr}
}

.ek-urun .ek-urun-eyebrow{font-size:var(--tip-kucuk);letter-spacing:.14em;
	text-transform:uppercase;color:var(--metin-ikincil);margin:0 0 12px}
.ek-urun .ek-urun-baslik{font-size:var(--tip-display);font-weight:800;
	letter-spacing:-.02em;line-height:var(--tip-satir-baslik);
	color:var(--metin-baslik);margin:0 0 24px}

.ek-btn{display:inline-block;background:var(--marka);color:#fff;
	font-weight:600;padding:14px 30px;border-radius:100px;text-decoration:none;
	transition:transform .16s var(--hrk-egri),opacity .16s}
.ek-btn:hover{transform:translateY(-1px);opacity:.92}
.ek-btn-ikincil{background:transparent;color:var(--marka-metin);
	box-shadow:inset 0 0 0 1.5px currentColor}
.ek-urun-eylem{margin:0}
.ek-urun-atla{margin:16px 0 0}
.ek-urun-atla a{font-size:var(--tip-kucuk);color:var(--metin-ikincil);text-decoration:none}
.ek-urun-atla a:hover{color:var(--marka-metin)}

/* --- 2. Giris: tek paragraf, govde puntosundan bir tik buyuk. --- */
.ek-urun-giris{padding-top:0}
.ek-urun-giris-metin{font-size:clamp(19px,2vw,23px);line-height:1.6;
	max-width:var(--ek-measure,68ch);margin:0}

/* --- 3. Icerik: uzun metin, sayfanin merkezi. Olcu 68ch, bolum ritmi
   korunur (padding-block ustteki genel section kuralindan gelir). --- */
/* 2026-08-26: margin-inline:0 idi. max-width olcuyu 68ch'e sabitliyor ama
   sifir margin blogu SOL KENARA yapistiriyordu: 1280px ekranda 726px'lik
   icerik solda, sagda 554px bos alan. Kullanici "sayfanin sag tarafi bombos,
   sol tarafi dolu" dedi; olcum dogruladi (kutu 0->726, margin 0/0).
   auto ile blok ortalaniyor, olcu korunuyor. */
.ek-urun-aciklama{max-width:var(--ek-measure,68ch);margin-inline:auto}
.ek-urun-aciklama-baslik{font-size:var(--tip-kucuk);font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;color:var(--metin-ikincil);
	margin:0 0 20px}
.ek-urun-aciklama p{margin:0 0 var(--tip-govde)}
.ek-urun-aciklama h3{font-size:var(--tip-h3);font-weight:600;
	color:var(--metin-baslik);margin:var(--ek-space-8,48px) 0 var(--ek-space-4,16px)}

.ek-urun .ek-urun-h2, .ek-urun section > h2{font-size:var(--tip-h2);font-weight:600;letter-spacing:-.01em;
	margin:0 0 32px;text-align:center}

/* --- 4. Teknik: tablo, yalnizca veri varken cizilir (bkz. page-urun.php). --- */
.ek-urun-teknik{background:var(--yuzey-alt)}
.ek-urun-tablo{max-width:640px;margin:0 auto;border-top:1px solid #E8E8EB}
.ek-urun-tablo > div{display:flex;justify-content:space-between;gap:20px;
	padding:16px 0;border-bottom:1px solid #E8E8EB}
.ek-urun-tablo dt{color:var(--metin-ikincil);margin:0}
.ek-urun-tablo dd{margin:0;font-weight:600;text-align:right}
.ek-urun-eylem-ikincil{text-align:center;margin:36px 0 0}

/* --- 5. SSS --- */
.ek-urun-sss{background:var(--yuzey-alt)}
.ek-urun-sss details{max-width:680px;margin:0 auto;border-bottom:1px solid #E3E3E6}
.ek-urun-sss summary{cursor:pointer;padding:18px 0;font-weight:600;
	font-size:var(--tip-h3);list-style:none}
.ek-urun-sss summary::-webkit-details-marker{display:none}
.ek-urun-sss p{margin:0 0 18px;color:var(--metin-ikincil)}

/* --- 6. Teklif --- */
.ek-urun-teklif{background:var(--yuzey-alt)}

/* --- hareket katmani (Gorev 6) ---
   Baslangic durumu YALNIZCA .hrk-hazir govdede uygulanir. Bu sinifi JS
   ekler; JS calismazsa icerik hic gizlenmez ve normal gorunur. */
.hrk-hazir .ek-urun [data-hrk]{opacity:0;transform:translateY(var(--hrk-kayma))}
.hrk-hazir .ek-urun [data-hrk].hrk-gor{opacity:1;transform:none;
	transition:opacity var(--hrk-sure) var(--hrk-egri),
	           transform var(--hrk-sure) var(--hrk-egri)}

@media (prefers-reduced-motion: reduce){
	.hrk-hazir .ek-urun [data-hrk]{opacity:1!important;transform:none!important;
		transition:none!important}
}


/* ===================================================================
   INNOVIO KOYU TEMA · 2026-08-26
   Sayfa govdesi koyu, ama baslik ve alt bilgi Elementor sablonlari ve
   kendi beyaz zeminlerini tasiyorlar. Yalnizca urun sablonunda onlari da
   koyuya cekiyoruz — aksi halde beyaz baslik ile siyah govde yan yana
   gelir. Kapsam sinifla daraltildi: baska hicbir sayfa etkilenmez.
   =================================================================== */
/* -------------------------------------------------------------------
   BASLIK / ALT BILGI KOYU UYARLAMASI

   2026-08-27 ONARIM: bu blok kategori sablonu eklenirken metin
   ameliyatiyla cogaltilmisti ve seciciler BOZULMUSTU — virgul secicinin
   ortasina girip orijinali kesmisti. Sonuc:
     body.page-template-page-urun .elementor-location-header{opacity:0}
   yani TUM BASLIGA opacity 0. Logo ve menu urun sayfalarinda kayboldu.

   Simdi :is() ile tek bir yerde, kesilmeye musait olmayan bicimde
   yaziliyor. :is() argumanlarinin en yuksek ozgullugunu alir; ikisi de
   tek sinif oldugu icin ozgulluk tek sinif kadar kalir.

   !important BILINCLI: Elementor baslik stillerini uretilmis eleman
   kimlikleriyle yaziyor (.elementor-element-14a005ef gibi); ozgullugu
   elle esitlemek, kullanici basligi Elementor'da bir kez duzenledigi anda
   sessizce kirilir.
   ------------------------------------------------------------------- */
:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post){
	background:var(--yuzey);
}
:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.site-header,
	header.elementor-location-header,
	footer.elementor-location-footer,
	.elementor-location-header > .elementor,
	.elementor-location-footer > .elementor
){
	background:var(--yuzey);
}

/* bolum zeminleri seffaf — govde zemini gorunsun */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post)
	:is(.elementor-location-header, .elementor-location-footer) .elementor-section{
	background-color:transparent !important;
}

/* YALNIZCA kaplama katmani gizlenir — basligin KENDISI degil.
   Onceki bozuk hali basligi komple gizliyordu. */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post)
	:is(.elementor-location-header, .elementor-location-footer) .elementor-background-overlay{
	opacity:0 !important;
}

/* menu ve alt bilgi metni */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a,
	.elementor-location-footer,
	.elementor-location-footer p,
	.elementor-location-footer a,
	.elementor-location-footer h1,
	.elementor-location-footer h2,
	.elementor-location-footer h3
){
	color:var(--metin) !important;
}
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a:hover,
	.elementskit-navbar-nav > li.current-menu-item > a
){
	color:var(--marka-metin) !important;
}

/* alt menuler koyu olmali, yoksa beyaz kutu olarak aciliyor */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) .elementskit-submenu-panel{
	background-color:var(--yuzey-alt) !important;
}
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) .elementskit-submenu-panel > li > a{
	color:var(--metin) !important;
}

/* -------------------------------------------------------------------
   BASLIK METNI: TEMA DEGISIMINDE YENIDEN HESAPLANMA GARANTISI

   Yukaridaki kural color:var(--metin) yaziyor ve alt bilgide sorunsuz
   calisiyor. Ama BASLIK alt agacinda Chrome, data-tema degistiginde
   rengi yeniden cozmuyordu. Olculdu: tema acikken baglantinin kendi
   --metin degiskeni dogru sekilde #2B3048 donuyor, contain/
   content-visibility yok, yine de color eski #cfd3e5'te kaliyordu —
   yani beyaz baslikta acik gri menu, neredeyse gorunmez.

   Secici temaya baglanmasi TEK BASINA yetmedi: iki kural da ayni
   `color:var(--metin)` metnini tasidiginda tarayici bildirimi
   "degismedi" sayip atliyordu. Olculdu: reflow ve sinif degisimi rengi
   duzeltmiyor, menuyu DOM'dan ayirip geri takmak duzeltiyor — yani
   kural yeniden eslesiyor ama bildirim yeniden hesaplanmiyor.

   Bu yuzden bu DORT kuralda deger token yerine DUZ YAZILIYOR: iki tema
   metinsel olarak farkli bildirim tasisin. Degerler tokenlarin aynisi
   ve yanlarinda hangi token olduklari yazili; token degistirilirse bu
   dort satir da guncellenmeli. Bilincli, dar kapsamli bir ikilik --
   alternatifi beyaz baslikta gorunmez menu.
   ------------------------------------------------------------------- */
:root:not([data-tema="acik"]) body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a,
	.elementskit-submenu-panel > li > a
){
	color:#cfd3e5 !important;   /* = --metin, koyu */
}
:root[data-tema="acik"] body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a,
	.elementskit-submenu-panel > li > a
){
	color:#2B3048 !important;   /* = --metin, acik */
}
:root:not([data-tema="acik"]) body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a:hover,
	.elementskit-navbar-nav > li.current-menu-item > a
){
	color:#7B84FF !important;   /* = --marka-metin, koyu */
}
:root[data-tema="acik"] body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementskit-navbar-nav > li > a:hover,
	.elementskit-navbar-nav > li.current-menu-item > a
){
	color:#2A34D6 !important;   /* = --marka-metin, acik */
}

/* Logo koyu renkli bir SVG; siyah zeminde okunmuyor. YALNIZCA logo
   hedefleniyor — bayrak simgesi gibi diger baslik gorselleri disarida,
   aksi halde dil secicinin bayragi da beyaza donuyordu. */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementor-widget-theme-site-logo img,
	.elementskit-nav-logo img
){
	filter:brightness(0) invert(1);
}
/* Acik temada logo kendi rengine doner: beyaz zeminde beyaz logo
   gorunmez olurdu. brightness(0) tek basina siyah yapar; ikisini birden
   kaldirmak yerine none demek, filtre zincirinin tamamini iptal eder. */
:root[data-tema="acik"] body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post) :is(
	.elementor-widget-theme-site-logo img,
	.elementskit-nav-logo img
){
	filter:none;
}
/* govde metni ve baglantilar */
.ek-urun-aciklama{color:var(--metin)}
.ek-urun-aciklama a{color:var(--marka-metin);text-underline-offset:3px}
.ek-urun-aciklama strong{color:var(--metin-baslik)}
.ek-urun-tablo dt{color:var(--metin-ikincil)}
.ek-urun-tablo dd{color:var(--metin-baslik)}
.ek-urun-tablo > div{border-bottom-color:var(--cizgi)}
.ek-urun-tablo{border-top-color:var(--cizgi)}
.ek-urun-sss details{border-bottom-color:var(--cizgi)}
.ek-urun-sss summary{color:var(--metin-baslik)}
.ek-urun-sss p{color:var(--metin)}
.ek-urun-eyebrow{color:var(--metin-ikincil)}
.ek-urun-atla a{color:var(--metin-ikincil)}

/* Innovio: butonlar tam yuvarlak (radius.sm 100px), gecis 200ms */
.ek-btn{border-radius:var(--yuvarlak-hap,100px);transition:
	background-color var(--sure-ani,200ms) ease,
	transform var(--sure-ani,200ms) ease}
.ek-btn:hover{transform:translateY(-1px)}
.ek-btn-ikincil{box-shadow:inset 0 0 0 1.5px currentColor}

/* odak halkasi koyu zeminde gorunur olmali */
.page-template-page-urun :where(a,button,summary,input,textarea):focus-visible{
	outline:2px solid var(--metin-baslik);outline-offset:2px;
}




/* Elementor global kiti basliklara `.elementor-kit-1095 h1..h6{font-family:
   "Poppins"}` basiyor — ozgulluk (0,1,1). `.ek-urun{font-family:Montserrat}`
   miras yoluyla calisamiyor cunku basliklarin KENDI font-family'si var.
   Punto icin kurdugumuz zirhin aynisi burada da gerekiyor: (0,2,0). */
.ek-urun .ek-urun-baslik,
.ek-urun .ek-urun-h2,
.ek-urun section > h2,
.ek-urun .ek-urun-aciklama h3,
.ek-urun .ek-urun-aciklama h4,
.ek-urun .ek-urun-sss summary,
.ek-urun .ek-urun-eyebrow{
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
}
/* Innovio: baslik agirligi 700-800, siki harf araligi */
.ek-urun .ek-urun-aciklama h3{font-weight:700;letter-spacing:-.01em}
.ek-urun .ek-urun-h2,
.ek-urun section > h2{font-weight:700}

/* menu de Montserrat olsun — baslik urun sayfasinda tasarimin parcasi */
/* 2026-08-27 ONARIM: bu secici de metin ameliyatiyla bozulmustu — virgul
   ortaya dusunce urun sayfasinda TUM nav, kategori sayfasinda yalnizca
   baglar hedefleniyordu. :is() ile tek yerde yeniden yazildi. */
body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post)
	.elementskit-navbar-nav > li > a{
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif !important;
}


/* ===================================================================
   URUN ISIK SISTEMI · 2026-08-27 (yeniden kuruldu)

   [1] arka plan  ·  [2] glow ::before  ·  [3] zemin golgesi ::after
   [4] urun WebP (en ustte, filtresiz)

   Tamami CSS. Gorsel dosyasina hicbir golge/glow gomulu degil.
   Degerler --urun-* degiskenlerinden gelir (esenkim-main.css).
   Duplicate sistem yok: sayfada baska hicbir glow/shadow kaynagi
   kalmadi — urun gorselindeki drop-shadow kaldirildi.
   =================================================================== */
.ek-urun-hero-gorsel{
	position:relative;
	isolation:isolate;
	display:flex;
	align-items:flex-end;
	justify-content:center;
}

/* --- [2] AMBIENT MAVI GLOW ------------------------------------------
   Kontur takip etmez, halo degil, drop-shadow degil. Genis bir ortam
   isigi alani. Radial gradyan merkezde yogun, kenara dogru tamamen
   kayboluyor — bu yuzden hicbir blur degerinde kenar/halka olusmaz.
   Blur yalnizca gradyanin bantlanmasini yumusatmak icin. */
.ek-urun-hero-gorsel::before{
	content:"";
	position:absolute;
	z-index:0;
	left:50%;
	top:var(--urun-glow-ust);
	width:var(--urun-glow-en);
	height:var(--urun-glow-boy);
	transform:translate(-50%, -50%);
	background:radial-gradient(
		ellipse at center,
		rgba(var(--urun-glow-renk), var(--urun-glow-opak)) 0%,
		rgba(var(--urun-glow-renk), calc(var(--urun-glow-opak) * .55)) 42%,
		rgba(var(--urun-glow-renk), 0) 72%
	);
	filter:blur(var(--urun-glow-blur));
	pointer-events:none;
}

/* --- [3] ZEMIN GOLGESI -----------------------------------------------
   Urunun hemen altinda eliptik, yumusak, dusuk kontrastli. Sert kenar
   olusmamasi icin kendisi de radyal olarak kayboluyor.
   Glow'un USTUNDE duruyor: sayfa zemini saf siyah oldugu icin siyah bir
   golge siyahin uzerinde gorunmez; temas hissi mavi isigi karartmaktan
   geliyor. */
.ek-urun-hero-gorsel::after{
	content:"";
	position:absolute;
	z-index:1;
	left:50%;
	bottom:var(--urun-zemin-alt);
	width:var(--urun-zemin-en);
	height:var(--urun-zemin-boy);
	transform:translateX(-50%);
	background:radial-gradient(
		ellipse at center,
		rgba(var(--zemin-golge-renk), var(--urun-zemin-opak)) 0%,
		rgba(var(--zemin-golge-renk), calc(var(--urun-zemin-opak) * .5)) 55%,
		rgba(var(--zemin-golge-renk), 0) 78%
	);
	filter:blur(var(--urun-zemin-blur));
	pointer-events:none;
}

/* --- tasma kontrolu --------------------------------------------------
   `clip`, `hidden` degil: hidden yeni bir kaydirma kabi yaratip yapiskan
   ogeleri bozar. */
.ek-urun{overflow-x:clip}

/* --- dar ekran -------------------------------------------------------
   Yuzde tabanli oldugu icin glow ve golge urunle birlikte oranli
   kuculuyor; yalnizca blur ve opaklik biraz toplaniyor. */
@media (max-width:780px){
	.ek-urun-hero-gorsel{
		--urun-glow-blur:44px;
		--urun-glow-opak:.14;
		--urun-zemin-blur:22px;
		--urun-zemin-opak:.4;
	}
}

/* --- acik zemin ------------------------------------------------------
   Mavi glow kapanir, yalnizca hafif dogal zemin golgesi kalir.
   Beyaz halo yok, neon yok. */
.ek-isik--acik .ek-urun-hero-gorsel{
	--urun-glow-opak:0;
	--urun-zemin-opak:.16;
}

/* --- hareketi azalt --------------------------------------------------
   Katmanlar animasyonlu degil; buyuk blur bazi eski cihazlarda pahali. */
@media (prefers-reduced-motion:reduce){
	.ek-urun-hero-gorsel{--urun-glow-blur:40px;--urun-zemin-blur:20px}
}

/* ===================================================================
   BILGI MIMARISI · 2026-08-27
   Onceki duzen tek sutun, ~430px genislikte uzun paragraflardi:
   "Word dokumani web sitesine konmus" hissi. Sorun icerikte degil,
   sunumdaydi. Icerik korundu, sunum yeniden kuruldu:

     01 Urun ozeti    metin + kunye (formul / agirlik / CAS / ambalaj)
     02 Uretim        numarali teknik kartlar
     03 Ozellikler    buyuk tipografi
     04 Kullanim      izgara
     05 Teknik tablo
     CTA              teklif formu

   Bolum numaralari SUS DEGIL: sira gercekten anlam tasiyor — kunyeden
   uretime, ozellikten uygulamaya, en sonda teknik referans.
   =================================================================== */

/* --- bolum numarasi --- */
.ek-bolum-no{
	font-size:var(--tip-kucuk);font-weight:700;letter-spacing:.18em;
	color:var(--marka-metin);margin:0 0 10px;
	font-variant-numeric:tabular-nums;
}

/* --- 01 · urun ozeti ------------------------------------------------ */
.ek-urun-ozet-izgara{
	display:grid;gap:clamp(28px,4vw,64px);
	grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
	.ek-urun-ozet-izgara{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}
.ek-urun-ozet-metin h2{text-align:left;margin:0 0 16px}
.ek-urun-ozet .ek-urun-giris-metin{
	font-size:clamp(17px,1.5vw,20px);line-height:1.65;
	color:var(--metin);max-width:46ch;margin:0;
}

/* kunye: deger buyuk, etiket kucuk — sayilar taranabilir olmali */
.ek-kunye{
	display:grid;gap:1px;margin:0;
	grid-template-columns:repeat(2,minmax(0,1fr));
	background:var(--cizgi);border:1px solid var(--cizgi);
	border-radius:var(--yuvarlak-kucuk,10px);overflow:hidden;
}
@media (min-width:1180px){.ek-kunye{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* AZ OGELI KUNYE: sutun sayisi sabit oldugu icin tek ogeli bir kunye
   dort hucrelik izgarada uc bos hucre birakiyordu — sayfada koca bir bos
   dikdortgen olarak duruyordu (olculdu: 4 sutun, 1 oge). Ogeler kadar
   sutun cizilsin. */
.ek-kunye:has(> div:first-child:last-child){grid-template-columns:minmax(0,300px)}
.ek-kunye:has(> div:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.ek-kunye:has(> div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}

/* BES OGE: 4 sutunlu izgarada son oge tek basina ikinci satirda kaliyor
   ve yanindaki uc hucre bos kaliyordu (kunyeye Form eklenince amonyum
   klorur 4 satirdan 5'e cikti). Son oge satiri tamamliyor — iki sutunlu
   dar ekranda da (2+2+1) ayni sekilde dogru calisiyor. */
.ek-kunye:has(> div:nth-child(5):last-child) > div:nth-child(5){grid-column:1 / -1}

/* Uzun degerler: punto kucultuluyor, kalinlik dusuruluyor. Kunye kisa
   degerler icin tasarlandi; bir cumle geldiginde 26px'te sariliyordu. */
.ek-kunye--uzun dd{
	font-size:15px !important;
	font-weight:600;
	line-height:1.45;
	letter-spacing:0;
}
.ek-kunye > div{background:var(--yuzey);padding:20px 18px;margin:0}
.ek-kunye dd{
	margin:0 0 6px;font-size:clamp(19px,2vw,26px);font-weight:700;
	color:var(--metin-baslik);letter-spacing:-.01em;line-height:1.15;
	font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.ek-kunye dt{
	margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--metin-ikincil);
}

/* --- 02 · uretim kartlari ------------------------------------------- */
.ek-kart-izgara{
	list-style:none;margin:0;padding:0;display:grid;gap:16px;
	grid-template-columns:minmax(0,1fr);max-width:none;
}
@media (min-width:760px){.ek-kart-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.ek-kart-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ek-kart{
	background:var(--yuzey-alt);border-radius:var(--yuvarlak-kucuk,10px);
	padding:26px 24px 28px;margin:0;position:relative;
	border:1px solid var(--cizgi);
}
.ek-kart-no{
	display:block;font-size:13px;font-weight:700;letter-spacing:.16em;
	color:var(--marka-metin);margin:0 0 16px;font-variant-numeric:tabular-nums;
}
.ek-kart h3{
	margin:0 0 10px;font-size:clamp(16px,1.5vw,19px);font-weight:700;
	line-height:1.25;color:var(--metin-baslik);letter-spacing:-.01em;
	text-transform:uppercase;
}
.ek-kart p{margin:0;font-size:var(--tip-kucuk);line-height:1.65;color:var(--metin);max-width:none}

/* --- 03 · ozellikler: buyuk tipografi -------------------------------- */
.ek-ozellik-liste{
	list-style:none;margin:0;padding:0;display:grid;gap:0;
	grid-template-columns:minmax(0,1fr);max-width:none;
}
.ek-ozellik-liste li{
	margin:0;padding:24px 0;border-top:1px solid var(--cizgi);
	display:grid;gap:6px 40px;grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){
	.ek-ozellik-liste li{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}
}
.ek-ozellik-liste li:last-child{border-bottom:1px solid var(--cizgi)}
.ek-ozellik-liste h3{
	margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:700;
	letter-spacing:-.02em;line-height:1.1;color:var(--metin-baslik);
}
.ek-ozellik-liste p{margin:0;color:var(--metin);font-size:var(--tip-kucuk);line-height:1.7;max-width:52ch}

/* --- 04 · kullanim alanlari ------------------------------------------ */
.ek-kullanim-izgara{
	list-style:none;margin:0;padding:0;display:grid;gap:12px;
	grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:none;
}
.ek-kullanim-izgara li{
	margin:0;padding:22px 18px;background:var(--yuzey-alt);
	border:1px solid var(--cizgi);border-radius:var(--yuvarlak-kucuk,10px);
	font-weight:600;font-size:var(--tip-kucuk);color:var(--metin-baslik);
	line-height:1.35;
}

/* --- 05 · teknik tablo ----------------------------------------------- */
.ek-urun-teknik .ek-urun-tablo{max-width:760px;margin-inline:0}
.ek-urun-teknik h2{text-align:left}

/* --- detay metni: katlanmis ------------------------------------------
   Uzun teknik metin silinmedi — ariza halinde ve arama motoru icin
   sayfada duruyor, ama varsayilan olarak kapali. Boylece tarama akisini
   metin duvari kesmiyor. */
.ek-urun-aciklama--detay{max-width:none;margin-inline:0}
.ek-urun-aciklama--detay summary{
	cursor:pointer;list-style:none;padding:18px 0;
	border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
	font-weight:600;color:var(--metin-ikincil);font-size:var(--tip-kucuk);
	letter-spacing:.04em;
}
.ek-urun-aciklama--detay summary::-webkit-details-marker{display:none}
.ek-urun-aciklama--detay summary::after{content:" +";color:var(--marka-metin)}
.ek-urun-aciklama--detay details[open] summary::after{content:" −"}
.ek-urun-detay-govde{padding:24px 0 0;max-width:68ch}
.ek-urun-detay-govde p{color:var(--metin)}
.ek-urun-detay-govde h3{color:var(--metin-baslik);font-size:var(--tip-h3)}

/* ---- URUN ACIKLAMASINDA TEKNIK TABLO -----------------------------
   Bazi urunlerin teknik ozellikleri tip bazinda degisiyor ve tek tek
   kart olarak yazilinca okunmuyor; tablo dogru bicim. Okuma sutunu
   68ch oldugu icin tablo kendi kabinda kayiyor, SAYFA govdesi degil. */
.ek-tablo-kap{
	overflow-x:auto;
	margin:20px 0;
	border:1px solid var(--cizgi);
	border-radius:12px;
}
.ek-urun-detay-govde table,
.ek-urun-aciklama table,
.ek-urun-teknik table{
	width:100%;
	border-collapse:collapse;
	font-size:var(--tip-kucuk);
	font-variant-numeric:tabular-nums;
	margin:0;
}
.ek-tablo-kap table{min-width:460px}
.ek-urun-detay-govde th,
.ek-urun-detay-govde td,
.ek-urun-aciklama th,
.ek-urun-aciklama td,
.ek-urun-teknik th,
.ek-urun-teknik td{
	padding:10px 14px;
	text-align:left;
	vertical-align:middle;

	/* KENARLAR ACIKCA TANIMLANIYOR.
	   Sydney temasi `th, td { border:1px solid rgb(51,51,51) }` yaziyor;
	   biz yalnizca alt cizgiyi tanimlayinca diger uc kenar temanin koyu
	   grisiyle kaliyor ve kapsayici cercevenin uzerine binip cift cizgi
	   uretiyordu (olculdu: hucre kenar rengi rgb(51,51,51), kap rengi
	   var(--cizgi)). Once hepsi sifirlanip yalnizca IC cizgiler
	   ciziliyor; dis kenari kapsayicinin kendi cercevesi veriyor. */
	border:0;
	border-right:1px solid var(--cizgi);
	border-bottom:1px solid var(--cizgi);
}
/* Son sutunun sagi ve son satirin alti kapsayiciya birakiliyor. */
.ek-urun-detay-govde tr > *:last-child,
.ek-urun-aciklama tr > *:last-child,
.ek-urun-teknik tr > *:last-child{border-right:0}
.ek-urun-detay-govde tbody tr:last-child > *,
.ek-urun-aciklama tbody tr:last-child > *,
.ek-urun-teknik tbody tr:last-child > *{border-bottom:0}
.ek-urun-detay-govde thead th,
.ek-urun-aciklama thead th,
.ek-urun-teknik thead th{
	background:var(--alan-zemin);
	color:var(--metin-baslik);
	font-weight:700;
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	white-space:nowrap;
}
/* Ilk sutun ozellik adi: sayilardan ayrilsin. */
.ek-urun-detay-govde td:first-child,
.ek-urun-aciklama td:first-child,
.ek-urun-teknik td:first-child{color:var(--metin-baslik);font-weight:600}
.ek-urun-detay-govde td:not(:first-child),
.ek-urun-aciklama td:not(:first-child),
.ek-urun-teknik td:not(:first-child){color:var(--metin);white-space:nowrap}

/* --- yeni duzende bolum basliklari sola yaslanir ---------------------
   Ortali baslik + sola yasli tek kolon icerik "hizalama hatasi" gibi
   gorunuyordu (kullanici tespiti). Yeni duzende hepsi sola yasli. */
.ek-urun-ozet h2,
.ek-urun-uretim h2,
.ek-urun-ozellik h2,
.ek-urun-kullanim h2{text-align:left;margin-bottom:clamp(20px,2.4vw,34px)}

/* siralı beliris: kartlar ve maddeler sirayla acilir */
/* ---- SIRALI BELIRIS · 2026-08-27 -----------------------------------
   Onceki kural yalnizca dort bilesene bagliydi (kart, kunye, ozellik,
   kullanim). Hero, teknik tablo, SSS ve teklif bolumleri hep birlikte
   aciliyordu — olculdu, bu dort bolumde siraliGecikme 0 idi. Kural artik
   --hrk-sira tasiyan HER ogeye uygulaniyor, yani sablona sira vermek
   yetiyor; CSS'e her yeni bilesen icin satir eklemek gerekmiyor. */
.hrk-hazir .ek-urun [data-hrk].hrk-gor{
	transition-delay:calc(var(--hrk-sira, 0) * 70ms);
}


/* ===================================================================
   BOLUM BASLIKLARI · 2026-08-27
   Kullanici "basliklarin rengi kayboluyor" dedi. Sebep olculdu: Elementor
   global kiti `.elementor-kit-1095 h2{color:#004166}` basiyor ve bizim
   baslik kuralimiz RENK tanimlamadigi icin kit'in eski marka lacivertini
   miras aliyorduk. Lacivert bolum zemininde (#08104d) kontrast 1.63:1 —
   pratikte gorunmez.

   Secilen: #ff4b36 (Innovio surface.muted). Zemin uzerinde 5.30:1, AA
   gecer. Uc kademeli hiyerarsi kuruyor:
     H1  beyaz     #ffffff  hero
     H2  vurgu     #ff4b36  bolum basligi
     no  mavi      #7B84FF  bolum numarasi
   =================================================================== */
.ek-urun .ek-urun-h2,
.ek-urun section > h2,
.ek-urun-ozet h2,
.ek-urun-uretim h2,
.ek-urun-ozellik h2,
.ek-urun-kullanim h2,
.ek-urun-teknik h2,
.ek-urun-sss h2,
.ek-urun-teklif h2{
	color:var(--baslik-renk);
}

/* --- teknik bolum: baslik ve tablo AYNI eksende ortalanir -------------
   Kullanici tespiti: baslik ortali, tablo sola yasli — hizalama hatasi
   gibi gorunuyordu. Ikisi de ortalandi. */
.ek-urun-teknik{text-align:center}
.ek-urun-teknik h2{text-align:center}
.ek-urun-teknik .ek-urun-tablo{
	max-width:760px;
	margin-inline:auto;
	text-align:left;          /* tablo satirlari icinde hizalama korunur */
}
.ek-urun-teknik .ek-bolum-no{text-align:left}


/* ===================================================================
   TEKLIF BOLUMU · 2026-08-27
   Kullanici tespiti: form ekranin tamamini kapliyor, alanlar art arda
   dizildigi icin "teklif alma" degil "form doldurma" hissi veriyor,
   koyu input metinleri lacivert zeminde okunmuyor, CAPTCHA ortada
   basibos duruyor, miktar en alta atilmis, urun bilgisi formda yok.

   Cozum: karta hapsetmeden, sayfanin kendi lacivert alani uzerinde
   editorial iki sutun. Sol %40 baglam (baslik + kunye), sag %60 form.
   Form alanlari Elementor'un kendi genislik siniflari yerine grid ile
   yerlesiyor — e-posta ve telefon yan yana.
   =================================================================== */
.ek-teklif-izgara{
	display:grid;gap:clamp(32px,4vw,72px);
	grid-template-columns:minmax(0,1fr);
	text-align:left;
}
@media (min-width:940px){
	.ek-teklif-izgara{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);align-items:start}
}
.ek-urun-teklif{text-align:left}
.ek-teklif-yan h2{margin:0 0 14px;text-align:left}
.ek-teklif-aciklama{
	font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--metin);
	max-width:34ch;margin:0 0 26px;
}
.ek-teklif-urun{
	display:inline-block;margin:0 0 22px;padding:9px 16px;
	border-radius:var(--yuvarlak-hap,100px);
	background:rgba(123,132,255,.14);border:1px solid rgba(123,132,255,.34);
	color:var(--metin-baslik);font-size:var(--tip-kucuk);font-weight:600;
}
.ek-teklif-kunye{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.ek-teklif-kunye li{
	display:flex;justify-content:space-between;gap:16px;margin:0;
	padding:11px 0;border-bottom:1px solid var(--cizgi);font-size:var(--tip-kucuk);
}
.ek-teklif-kunye li:first-child{border-top:1px solid var(--cizgi)}
.ek-teklif-kunye span{color:var(--metin-ikincil)}
.ek-teklif-kunye b{color:var(--metin-baslik);font-weight:700;font-variant-numeric:tabular-nums}

/* --- form alanlari: Elementor'un kolon siniflari yerine grid -----------
   Elementor her alani .elementor-field-group + .elementor-col-NN ile
   yerlestiriyor. Grid'e cevirip alanlari kendimiz konumlandiriyoruz;
   boylece e-posta ve telefon yan yana geliyor ve dikey ritim tek elden
   yonetiliyor. !important gerekiyor cunku kolon genislikleri Elementor'un
   uretilmis CSS'inden geliyor. */
.ek-teklif-form .elementor-form-fields-wrapper{
	display:grid !important;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px 20px;
	margin:0 !important;
}
.ek-teklif-form .elementor-field-group{
	grid-column:1 / -1;
	width:auto !important;max-width:none !important;
	padding:0 !important;margin:0 !important;
}
/* e-posta + telefon: yan yana */
.ek-teklif-form .elementor-field-group.elementor-field-type-email{grid-column:1 / 2}
.ek-teklif-form .elementor-field-group.elementor-field-type-tel{grid-column:2 / -1}
@media (max-width:600px){
	.ek-teklif-form .elementor-form-fields-wrapper{grid-template-columns:minmax(0,1fr)}
	.ek-teklif-form .elementor-field-group.elementor-field-type-email,
	.ek-teklif-form .elementor-field-group.elementor-field-type-tel{grid-column:1 / -1}
}

/* --- etiketler ve girdiler: koyu zeminde okunurluk ---------------------
   Onceki hali lacivert zeminde koyu metindi. Girdi zemini bir tik
   acildi, metin acik renge cekildi, kenarlik gorunur hale getirildi. */
.ek-teklif-form .elementor-field-label{
	display:block !important;margin:0 0 7px !important;
	font-size:13px !important;letter-spacing:.06em;text-transform:uppercase;
	color:var(--metin-ikincil) !important;font-weight:600 !important;
}
.ek-teklif-form input[type="text"],
.ek-teklif-form input[type="email"],
.ek-teklif-form input[type="tel"],
.ek-teklif-form textarea{
	width:100% !important;
	background:var(--alan-zemin) !important;
	border:1px solid var(--alan-cizgi) !important;
	border-radius:var(--yuvarlak-kucuk,10px) !important;
	color:var(--metin-baslik) !important;
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif !important;
	font-size:16px !important;      /* 16px: iOS odaklanmada yakinlastirmasin */
	line-height:1.5 !important;
	padding:14px 16px !important;
	transition:border-color var(--sure-ani,200ms) ease,
	           background-color var(--sure-ani,200ms) ease;
}
.ek-teklif-form textarea{min-height:132px !important;resize:vertical}
.ek-teklif-form input::placeholder,
.ek-teklif-form textarea::placeholder{color:var(--metin-ikincil) !important;opacity:1}
.ek-teklif-form input:hover,
.ek-teklif-form textarea:hover{border-color:var(--alan-cizgi-uzeri) !important}
.ek-teklif-form input:focus,
.ek-teklif-form textarea:focus{
	outline:2px solid var(--marka-metin) !important;outline-offset:2px;
	border-color:transparent !important;
	background:var(--alan-zemin-odak) !important;
}

/* --- CAPTCHA: ortada basibos degil, gonderimden hemen once, sola yasli */
.ek-teklif-form .elementor-field-type-recaptcha{
	grid-column:1 / -1;display:flex;justify-content:flex-start;
	margin-top:2px !important;
}

/* --- gonder butonu: zayif degil, birincil eylem gibi ------------------- */
.ek-teklif-form .elementor-field-type-submit{
	grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:6px !important;
}
.ek-teklif-form button[type="submit"],
.ek-teklif-form .elementor-button{
	background:var(--marka) !important;color:#fff !important;
	border:0 !important;border-radius:var(--yuvarlak-hap,100px) !important;
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif !important;
	font-size:16px !important;font-weight:700 !important;letter-spacing:.01em;
	padding:16px 34px !important;min-height:auto !important;
	transition:transform var(--sure-ani,200ms) ease, opacity var(--sure-ani,200ms) ease;
	cursor:pointer;
}
.ek-teklif-form button[type="submit"]:hover,
.ek-teklif-form .elementor-button:hover{transform:translateY(-1px);opacity:.94}
.ek-teklif-form button[type="submit"]:focus-visible,
.ek-teklif-form .elementor-button:focus-visible{
	outline:2px solid var(--metin-baslik) !important;outline-offset:3px;
}
.ek-teklif-form .elementor-button-content-wrapper{gap:10px}

/* gizli alan izgarada yer kaplamasin */
.ek-teklif-form .elementor-field-type-hidden{display:none !important}

/* hata ve basari mesajlari koyu zeminde okunsun */
.ek-teklif-form .elementor-message{
	grid-column:1 / -1;font-size:var(--tip-kucuk);
	color:var(--metin-baslik) !important;
}
.ek-teklif-form .elementor-message-danger{color:var(--vurgu) !important}


/* ---- HERO GORSELI: OLCEK · spec §7 ---------------------------------
   Spec "Gorsel ek olarak scale .94->1, 900 ms" diyordu ama bu hic
   uygulanmamisti — gorsel diger ogelerle ayni duz kayma animasyonunu
   aliyordu. data-hrk-olcek tasiyan oge kendi egrisini kullanir.

   Olcek DIS kapta (figure) calisir, img'de degil: img'nin uzerinde zaten
   drop-shadow filtresi var ve ayni ogede transform + filter birlestirmek
   bazi tarayicilarda golgeyi de olcekleyip titreme uretiyor. */
.hrk-hazir .ek-urun [data-hrk-olcek]{
	transform:translateY(var(--hrk-kayma)) scale(.94);
}
.hrk-hazir .ek-urun [data-hrk-olcek].hrk-gor{
	transform:none;
	transition-duration:.9s;
	transition-property:opacity,transform;
}


/* ===================================================================
   HERO SAHNE · 2026-08-27
   Referans gorselde isik FOTOGRAFIN ICINDE: rim light, yuzey gecisi,
   zeminde duran yansima. Bizim elimizdeki duz, zeminsiz bir kesim.
   CSS ile ulasilabilecek yere kadar goturuluyor:
     - zemin duzlemi (yatay gradyan)
     - urunun cevrilmis yansimasi
   Rim light CSS ile URETILEMEZ; o ancak gorselin kendisinde olur.
   =================================================================== */

/* hero alt basligi — referansta var, bizde yoktu */
.ek-urun-hero-kisa{
	font-size:clamp(16px,1.5vw,19px);line-height:1.6;
	color:var(--metin);max-width:42ch;margin:0 0 26px;
}

/* --- zemin duzlemi ---------------------------------------------------
   Urunun durdugu yuzeyi ima eden yatay gradyan. Sert bir cizgi degil,
   asagi dogru koyulasan bir alan. Hero'nun tamamina yayiliyor ki urun
   "havada duran bir kesim" gibi gorunmesin. */
/* 2026-08-27 duzeltme: zemin duzlemi hero'nun TAMAMINA yayiliyordu,
   metin sutununun altindan da geciyor ve yatay bir bant gibi duruyordu.
   Referansta zemin yalnizca urunun altinda. Figure'e tasindi. */
.ek-urun-hero{position:relative}
.ek-urun-hero-gorsel::before,
.ek-urun-hero-gorsel::after{will-change:auto}
.ek-urun-hero-zemin{
	display:block;
	position:absolute;
	left:-6%;right:-6%;bottom:0;
	height:34%;
	z-index:0;
	background:linear-gradient(
		to bottom,
		rgba(var(--hero-zemin-renk),0) 0%,
		rgba(var(--hero-zemin-renk),.045) 55%,
		rgba(var(--hero-zemin-renk),.075) 100%
	);
	pointer-events:none;
	z-index:0;
}
.ek-urun-hero > *{position:relative;z-index:1}

/* --- urun yansimasi --------------------------------------------------
   Ayni gorsel, dikey cevrilmis, asagi dogru kaybolan. Zemin golgesinin
   ALTINDA (z 1'in altinda kalmasi icin 0) — golge yansimanin ustune
   binerek temas noktasini karartiyor, boylece yansima zeminden
   "yukseliyormus" gibi durmuyor. */
.ek-urun-yansima{
	position:absolute;
	left:50%;
	top:100%;
	width:auto;max-width:100%;height:auto;
	transform:translateX(-50%) scaleY(-1);
	transform-origin:top center;
	opacity:.16;
	z-index:0;
	pointer-events:none;
	-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 42%);
	        mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 42%);
}
/* yansima hero'nun altini tasmasin */
.ek-urun-hero-gorsel{overflow:visible}

@media (max-width:780px){
	.ek-urun-yansima{opacity:.1}
	.ek-urun-hero::after{height:26%}
}

/* acik zeminde zemin duzlemi ve yansima geri cekilir */
.ek-isik--acik .ek-urun-hero::after{opacity:.35}
.ek-isik--acik .ek-urun-yansima{opacity:.08}

@media (prefers-reduced-motion:reduce){
	.ek-urun-yansima{opacity:.12}
}

/* ===================================================================
   SAHNE GORSELI · 2026-08-27
   Bazi urun gorselleri studyo cekimidir: isigi, zemini ve yansimasi
   ZATEN icinde. Bunlara CSS isik katmanlari eklenirse iki kat isik
   olur — arkada iki glow, altta iki golge. Bu yuzden bastiriliyor.

   Ayrim `_ek_urun_gorsel_sahne` alaniyla ELLE isaretleniyor; otomatik
   tahmin edilmiyor cunku alfa kanalinin varligi yeterli bir gosterge
   degil (sahne cekimlerinin de seffaf zemini olabiliyor — amonyum
   klorur gorselinde alfa araligi 0-253 olcum sonucu).
   =================================================================== */
.ek-gorsel--sahne::before,
.ek-gorsel--sahne::after{content:none}
.ek-gorsel--sahne .ek-urun-yansima{display:none}
/* sahne gorseli tam genisligi kullanabilir: dikdortgen bir foto,
   kesim gibi kendi boyutunda kalmasi gerekmiyor */
/* Sahne gorseli: genislik DEGIL, yukseklik siniriyla olceklenir.
   Sebep: iki yonlu gorseller geliyor — amonyum klorur yatay (1536x1024),
   sorbitol dikey (1024x1536). Sabit `width:100%` dikey gorseli 569x854'e
   cikariyor ve hero'yu 1037px'e sisiriyordu. max-height ikisini de ayni
   kuralla dizginler: yatayda genislik, dikeyde yukseklik baglayici olur. */
.ek-gorsel--sahne img{
	width:auto;
	max-width:100%;
	/* 854px -> 370px cok sert dustu (48vh dar panelde 394px'e cozunuyordu).
	   vh degeri gorunum yuksekligine bagli oldugu icin ongorulemez;
	   alt ve ust px sinirlari one cikarildi. */
	max-height:clamp(380px, 60vh, 560px);
	margin-inline:auto;
	border-radius:var(--yuvarlak-kucuk,10px);
}

/* --- sahne gorseli daha buyuk -----------------------------------------
   Sahne cekimi genis bir kompozisyon; kesim urun gibi dar bir sutuna
   sigdirilinca kucuk kaliyor. Iki mudahale:
     1. hero izgarasinda gorsel sutunu genisletiliyor
     2. gorsel sag kenara dogru tasiyor — .ek-urun'daki overflow-x:clip
        yatay kaydirma cubugu olusmasini zaten engelliyor
   Yalnizca genis ekranda; dar ekranda tek sutuna cokup normal davraniyor. */
@media (min-width:940px){
	/* 2026-08-27: once .78/1.22 + kenar tasmasi denendi, gorsel 695px'e
	   cikti ve kullanici "asiri buyuk" dedi. Tasma tamamen kaldirildi,
	   oran hafifletildi. Basjlangic 522px, ilk deneme 695px, simdi ~605px. */
	.ek-urun-hero:has(.ek-gorsel--sahne){
		grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
		gap:clamp(24px,3vw,44px);
	}
}

/* ===================================================================
   BASLIK OLCEGI · uzunluga gore
   "Sorbitol" (8 karakter) 76px'te guclu duruyor; "Amonyum Klorür 99.5%"
   (20 karakter) ayni puntoda UC satira dusuyordu. Kullanici en fazla
   iki satir istedi.

   CSS karakter sayamaz, bu yuzden sinif PHP tarafinda veriliyor
   (page-urun.php, $baslik_sinifi). Esikler olculerek secildi: metin
   sutunu ~476px, Montserrat 800'de ortalama karakter ~0.62em.
   =================================================================== */
.ek-urun .ek-urun-baslik.ek-baslik--orta{
	font-size:clamp(30px, 4.2vw, 52px);
	line-height:1.08;
}
.ek-urun .ek-urun-baslik.ek-baslik--uzun{
	font-size:clamp(26px, 3.4vw, 42px);
	line-height:1.12;
}
/* dengeli sarma: iki satir birbirine yakin uzunlukta boluensun */
.ek-urun .ek-urun-baslik{text-wrap:balance}

/* ===================================================================
   URUN KATEGORISI · 2026-08-27
   Listeleme sayfasi. Kartlarin icerigi urun sayfalarinin KENDI
   alanlarindan okunuyor — ikinci bir yerde tekrar tutulmuyor.
   =================================================================== */
.ek-kategori-hero{padding-bottom:0}
.ek-kategori-hero .ek-urun-baslik{margin-bottom:18px}
.ek-kategori-giris{
	font-size:clamp(17px,1.6vw,21px);line-height:1.6;
	color:var(--metin);max-width:56ch;margin:0 0 14px;
}
.ek-kategori-sayi{
	font-family:inherit;font-size:var(--tip-kucuk);letter-spacing:.1em;
	text-transform:uppercase;color:var(--metin-ikincil);margin:0;
	font-variant-numeric:tabular-nums;
}

.ek-urun-izgara{
	list-style:none;margin:0;padding:0;display:grid;gap:18px;
	grid-template-columns:minmax(0,1fr);max-width:none;
}
@media (min-width:680px){.ek-urun-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.ek-urun-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ek-urun-kart{margin:0}
.ek-urun-kart-bag{
	display:flex;flex-direction:column;height:100%;
	background:var(--yuzey-alt);border:1px solid var(--cizgi);
	border-radius:var(--yuvarlak-kucuk,10px);overflow:hidden;
	text-decoration:none;color:inherit;
	transition:border-color var(--sure-ani,200ms) ease,
	           transform var(--sure-ani,200ms) ease;
}
.ek-urun-kart-bag:hover{
	border-color:var(--marka-metin);
	transform:translateY(-2px);
}
.ek-urun-kart-bag:focus-visible{
	outline:2px solid var(--metin-baslik);outline-offset:3px;
}

/* Gorsel alani sabit oranli: kartlar farkli boy gorsellerle hizada kalsin.
   Kesim gorseller contain (kendi boyutunda, kirpilmadan), sahne cekimleri
   cover (kareyi doldurur) — ikisi ayni izgara icinde tutarli gorunur. */
.ek-urun-kart-gorsel{
	display:block;aspect-ratio:4/3;background:var(--yuzey);
	display:flex;align-items:center;justify-content:center;padding:14px;
}
.ek-urun-kart-gorsel img{
	width:auto;max-width:100%;max-height:100%;height:auto;
	object-fit:contain;display:block;
}
.ek-kart--sahne .ek-urun-kart-gorsel{padding:0}
.ek-kart--sahne .ek-urun-kart-gorsel img{
	width:100%;height:100%;object-fit:cover;
}

.ek-urun-kart-govde{
	display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;flex:1;
}
.ek-urun-kart-ad{
	font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
	font-size:clamp(17px,1.6vw,20px);font-weight:700;letter-spacing:-.01em;
	line-height:1.2;color:var(--metin-baslik);
}
.ek-urun-kart-ozet{
	font-size:var(--tip-kucuk);line-height:1.6;color:var(--metin);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
	overflow:hidden;
}
.ek-urun-kart-kunye{
	display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px;
}
.ek-urun-kart-kunye span{
	font-size:12px;letter-spacing:.04em;padding:4px 10px;
	border-radius:var(--yuvarlak-hap,100px);
	background:rgba(123,132,255,.12);border:1px solid rgba(123,132,255,.3);
	color:var(--metin-baslik);font-variant-numeric:tabular-nums;
}

/* ===================================================================
   BASLIK ALTINDA ASAGI DOGRU AZALAN BULANIKLIK        2026-08-27

   Iki on kosul vardi, ikisi de burada karsilaniyor:

   1) Baslik YAPISKAN olmaliydi. Onceden masaustunde akip gidiyordu;
      bulaniklik seridi de onunla birlikte kaybolur, hicbir sey bulanmazdi.
      `sticky` seciliyor, `fixed` degil: sticky akista yer kapladigi icin
      govdeye telafi dolgusu eklemek gerekmiyor. Baslik <body>'nin dogrudan
      cocugu ve hicbir atada overflow kisiti yok — sticky burada guvenli.

   2) Baslik zemininin SEFFAF kalmasi gerekiyordu. Zaten oyle: siyahlik
      govdeden geliyor, bolum zeminleri yukarida transparent'a cekilmisti.
      Opak bir zemin olsaydi backdrop-filter'in bulaniklastiracagi hicbir
      sey kalmazdi.

   Yaricaplar asagi dogru yariya inecek sekilde secildi (16 > 8 > 4 > 2);
   maskeler ise sirayla daha asagi uzaniyor. Ust uste binme sirasi onemli:
   her katman KENDINDEN ONCEKININ sonucunu bulaniklastirdigi icin en ustte
   dordunun etkisi birikiyor.
   =================================================================== */

body:is(.page-template-page-urun, .page-template-page-kategori, .page-template-page-iletisim, .page-template-page-blog, .page-template-page-hakkimizda, .page-template-page-anasayfa, .single-post)
	.elementor-location-header{
	position:sticky;
	top:0;
	z-index:60;
}

.ek-ust-blur{
	/* Baslik yuksekligi + sonumlenme payi. Yeni ust menu 76px (kaydirmada
	   60px); eski Elementor basligi 113px'ti ve serit ona gore 176px
	   yazilmisti — basliktan cok asagi tasiyordu. */
	--ek-blur-boy:132px;
	position:fixed;
	inset:0 0 auto 0;
	height:var(--ek-blur-boy);
	z-index:55;          /* icerigin ustunde, basligin altinda */
	pointer-events:none; /* menuye tiklamayi engellemesin */
}

/* Parlak bir govde (urun gorseli, glow) basligin altindan gecerken menu
   okunakligini korumak icin ince bir karartma. Sayfa zemini zaten siyah,
   yani duz alanlarda hic gorunmuyor. */
.ek-ust-blur::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(
		to bottom,
		rgba(var(--perde-renk),.60) 0%,
		rgba(var(--perde-renk),.28) 45%,
		rgba(var(--perde-renk),0) 100%
	);
}

.ek-ust-blur span{
	position:absolute;
	inset:0;
	display:block;
}

@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
	.ek-ust-blur span:nth-child(1){
		-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
		-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 8%,transparent 30%);
		        mask-image:linear-gradient(to bottom,#000 0%,#000 8%,transparent 30%);
	}
	.ek-ust-blur span:nth-child(2){
		-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
		-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 52%);
		        mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 52%);
	}
	.ek-ust-blur span:nth-child(3){
		-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
		-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 74%);
		        mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 74%);
	}
	.ek-ust-blur span:nth-child(4){
		-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
		-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
		        mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
	}
}

/* Saydamligi azaltilmis sistemlerde katmanlar kalkar, karartma kalir. */
@media (prefers-reduced-transparency:reduce){
	.ek-ust-blur span{display:none}
}

@media (max-width:767px){
	.ek-ust-blur{--ek-blur-boy:104px}
}

/* ===================================================================
   TEMA SECICI — GUNES / AY SWITCH                      2026-08-27

   Referans: iki ikon da HER ZAMAN gorunur, aktif olanin arkasinda kayan
   yuvarlak bir vurgu var. Gece halinde ray koyu ve vurgu SAGDA, ayin
   arkasinda; gunduz halinde ray acik ve vurgu SOLDA, gunesin arkasinda.
   Yani vurgu bulunulan durumu gosterir, gidilecek yonu degil.

   Renkler bilincli olarak tokenlardan BAGIMSIZ: switch iki temada da
   referanstaki kendi siyah-beyaz karsitligini tasiyor. Tek istisna odak
   halkasi, o markadan geliyor.

   Durum, kokteki data-tema'ya degil DUGMENIN KENDI data-durum'una bagli:
   olculdu — bu tarayicida kokteki oznitelik degistiginde alt seciciler
   guvenilir bicimde yeniden eslesmiyor, switch eski halinde takili
   kaliyordu. JS dugmenin kendi oznitelgini degistirince sorun cikmiyor.

   Konum: baslik yapiskan ve z-index 60; switch menudeyken akista,
   degilse 61'de sabit.
   =================================================================== */

.ek-tema-secici{
	/* Olcu menu satirina gore: ray 30px yuksek — dil baglariyla ayni
	   yukseklik, menu satirini sismiyor. */
	--ray-en:68px;
	--ray-boy:30px;
	--bosluk:3px;

	/* 2026-08-27: sabit konum KALDIRILDI. Switch artik ust menunun kendi
	   isaretlemesinin icinde (inc/ust-menu.php), dolayisiyla akista
	   duruyor ve dikey hizayi .ek-ust-sag'in align-items:center'i
	   veriyor. Sabit kaldiginda menuden 13px asagida duruyordu
	   (olculdu: menu merkezi y38, switch y51). */
	position:static;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
	line-height:0;
	-webkit-tap-highlight-color:transparent;
}

.ek-tema-secici:focus-visible{outline:none}
.ek-tema-secici:focus-visible .ek-tema-ray{
	outline:2px solid var(--marka-metin);
	outline-offset:3px;
}

.ek-tema-ray{
	position:relative;
	display:flex;
	align-items:stretch;
	width:var(--ray-en);
	height:var(--ray-boy);
	border-radius:var(--yuvarlak-hap,100px);
	/* Renkler artik paletten: switch basligin bir parcasi gibi dursun,
	   yapistirilmis bir widget gibi degil. */
	background:var(--switch-yuva);
	box-shadow:inset 0 0 0 1px var(--cizgi);
	transition:background-color 260ms ease, box-shadow 260ms ease;
}

/* Kayan vurgu: aktif ikonun arkasindaki yuvarlak alan. */
.ek-tema-vurgu{
	position:absolute;
	top:var(--bosluk);
	left:var(--bosluk);
	width:calc(50% - var(--bosluk));
	height:calc(100% - (var(--bosluk) * 2));
	border-radius:var(--yuvarlak-hap,100px);
	background:var(--switch-vurgu);
	/* gece: vurgu SAGDA, ayin arkasinda */
	transform:translateX(100%);
	transition:transform 280ms cubic-bezier(.4,0,.2,1),
	           background-color 260ms ease;
}
.ek-tema-secici[data-durum="gunduz"] .ek-tema-vurgu{
	transform:translateX(0);   /* gunduz: vurgu SOLDA, gunesin arkasinda */
}

.ek-tema-ikon{
	position:relative;   /* vurgunun ustunde kalsin */
	z-index:1;
	flex:1 1 50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.ek-tema-ikon svg{
	width:15px;height:15px;display:block;
	transition:color 260ms ease;
}

/* Pasif ikon soluk, aktif ikon net — ikisi de metin tokenlarindan,
   boylece iki temada da basliktaki yazilarla ayni aileden. */
.ek-tema-ikon--gunes{color:var(--metin-ikincil)}
.ek-tema-ikon--ay{color:var(--metin-baslik)}
.ek-tema-secici[data-durum="gunduz"] .ek-tema-ikon--gunes{color:var(--metin-baslik)}
.ek-tema-secici[data-durum="gunduz"] .ek-tema-ikon--ay{color:var(--metin-ikincil)}

/* Dar ekranda saga altta: menu satirinda hamburger ile carpismasin.
   Boyut ayni kaliyor, dokunma hedefi kuculmesin. */
@media (max-width:900px){
	/* Sabit konum yok: switch dar ekranda da baslik satirinda, hamburgerin
	   yaninda duruyor. */
	.ek-tema-ray{box-shadow:0 4px 14px rgba(var(--zemin-golge-renk),.22)}
}

@media (prefers-reduced-motion:reduce){
	.ek-tema-ray,
	.ek-tema-vurgu,
	.ek-tema-ikon svg{transition:none}
}

/* ===================================================================
   ACIK TEMADA URUN GORSELI

   13 urun fotografi siyah zemine duzlestirilmis. Kullanici ayni
   urunlerin beyaz zeminli surumlerini de verdi; tema.js kaynagi
   degistiriyor. Beyaz surumu OLMAYAN urunlerde (sorbitol, amonyum
   klorur) gorsel koyu bir sahne paneline oturtuluyor — siyah kutu
   olarak durmasin diye kasitli bir cerceve.
   =================================================================== */

:root[data-tema="acik"] .ek-gorsel--sahne:not(:has(img[data-acik-src])){
	background:#05070F;
	border-radius:18px;
	padding:clamp(12px,2vw,26px);
	overflow:hidden;
}

/* Kategori kartlari: hero ile ayni kural. Beyaz surumu olmayan sahne
   gorselleri acik temada izgarada siyah kare olarak duruyordu; koyu bir
   panele oturtuluyorlar ki kasitli bir cerceve gibi gorunsunler. */
:root[data-tema="acik"] .ek-kart--sahne:not(:has(img[data-acik-src])) .ek-urun-kart-gorsel{
	background:#05070F;
	border-radius:12px;
	overflow:hidden;
}

/* ===================================================================
   ILETISIM SAYFASI                                     2026-08-27

   Ziyaretcinin buradaki isi kisa: "neredesiniz", "nasil ulasirim",
   "mesajimi nasil gonderirim". Duzen bunu ust uste uc soru olarak
   veriyor ve asagi itmiyor.
   =================================================================== */

.ek-iletisim{
	/* Dikey ritim urun sayfalarindan DAHA SIK. Onceki halinde her
	   <section> ek-urun ritminden 72+72px dolgu aliyordu ve bolum
	   araliklari 72px'ti; toplam icerik iki kart, bir form ve bir harita
	   iken bu sayfayi bos gosteriyordu. */
	--ek-il-bolum:clamp(28px, 3.2vw, 44px);

	max-width:1180px;
	margin-inline:auto;
	padding:clamp(16px, 2.2vw, 26px) clamp(16px, 4vw, 40px) var(--ek-il-bolum);
}

/* Bolum dolgularini sifirla: bosluklar asagida margin ile kuruluyor,
   ek-urun ritmi ikinci bir katman olarak birikiyordu. */
.ek-iletisim > section{padding-top:0;padding-bottom:0}

/* ---- HERO ---------------------------------------------------------
   Baslikla iki kolon arasindaki oluu alan buradan geliyordu. Eyebrow,
   baslik ve aciklama sikistirildi; hero ile govde arasi tek bir
   --ek-il-bolum. */
.ek-il-hero{margin-bottom:var(--ek-il-bolum)}
.ek-iletisim .ek-bolum-no{margin:0 0 8px}
.ek-iletisim .ek-urun-baslik{
	margin:0;
	/* 76px display olcegi URUN ADI icin secilmisti; burada tek satirlik
	   bir cumle tasiyor ve tek basina ~80px dikey yer kapliyordu. */
	font-size:var(--tip-h1);
}
.ek-iletisim .ek-il-giris{
	max-width:56ch;
	margin:12px 0 0;
	font-size:var(--tip-govde);
	line-height:1.65;
	color:var(--metin);
}

/* ---- IKI KOLON ---------------------------------------------------- */
.ek-il-govde{
	display:grid;
	grid-template-columns:minmax(0, 4fr) minmax(0, 6fr);
	gap:clamp(20px, 3vw, 44px);
	align-items:start;
}
@media (max-width:900px){
	.ek-il-govde{grid-template-columns:1fr}
}

/* ---- OFIS KARTI ---------------------------------------------------
   NOT: asagidaki seciciler .ek-iletisim ile baslıyor. Sayfa ek-urun
   sinifini da tasidigi icin `.ek-urun p` ve `.ek-urun section > h2` gibi
   (0,1,1) ozgullukteki kurallar tek sinifli kurallarimizi eziyordu:
   olculdu — kart basligi 15px yerine 25px, paragraflarin alt boslugu
   0 yerine 30px cikiyordu ve kart 217px'e sisiyordu.
   Once her bilgi 84px'lik bir etiket sutunuyla ("ADRES", "E-POSTA")
   yazilıyordu; bir B2B iletisim karti icin bu hem yer kapliyor hem
   gereksiz — adres adres gibi, e-posta e-posta gibi zaten okunuyor.
   Etiketler kalkti, kart kompaktlasti. */
.ek-il-kart{
	/* Dolgu ve ic bosluklar yaklasik %18 kisildi: kartlar daha ince ve
	   sakin duruyor, cerceve hafif kaliyor. */
	margin-top:10px;
	padding:13px 15px;
	border:1px solid var(--cizgi);
	border-radius:12px;
	background:var(--alan-zemin);
}
.ek-iletisim .ek-il-kart-ad{
	margin:0 0 6px;
	font-size:15px;
	font-weight:700;
	letter-spacing:-.005em;
	color:var(--metin-baslik);
}
.ek-iletisim .ek-il-adres{
	margin:0 0 8px;
	font-size:var(--tip-kucuk);
	line-height:1.55;
	color:var(--metin);
}
.ek-iletisim .ek-il-baglar{
	display:flex;
	flex-wrap:wrap;
	gap:4px 16px;
	margin:0;
	font-size:var(--tip-kucuk);
}
.ek-il-baglar a{
	color:var(--marka-metin);
	text-decoration:none;
	text-underline-offset:3px;
}
.ek-il-baglar a:hover{text-decoration:underline}

/* Sol kolonun alt detay blogu — form kolonuna gore hafif kalan sol
   tarafi dengeliyor. Kart degil: cerceve yok, yalnizca ince bir ayirac. */
.ek-il-saat{
	margin-top:18px;
	padding-top:14px;
	border-top:1px solid var(--cizgi);
	display:grid;
	gap:10px;
}
.ek-il-saat-oge{display:grid;gap:2px}
.ek-il-saat-etiket{
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--baslik-renk);
}
.ek-il-saat-deger{
	font-size:var(--tip-kucuk);
	line-height:1.5;
	color:var(--metin);
	/* Deger iki satir olabiliyor ("Pazartesi – Cuma" / "09:00 – 18:00");
	   satir sonu metinde tutuluyor, isaretlemeye <br> gomulmuyor. */
	white-space:pre-line;
}

/* ---- FORM HIZASI --------------------------------------------------
   Olculdu: Elementor alanlari kendi sutun genisliklerini tasiyordu —
   Ad Soyad 578px, Telefon 279px (SAG yarida), E-posta 279px (sol
   yarida), Mesaj 578px. Ustelik gonder dugmesinin kabi
   justify-content:flex-end ile sagdaydi, CAPTCHA solda. Sonuc, formun
   sonradan yapistirildigi hissiydi.

   Hepsi tek sutuna aliniyor ve ayni sol kenardan basliyor; gonder
   dugmesi de alanlarla ayni genislikte, boylece hizada belirsizlik
   kalmiyor. */
/* Iletisim formu TEK SUTUN.
   Kutu ek-teklif-form sinifini de tasiyor (alan/etiket/odak stillerini
   oradan almak icin) ve o sinif alanlari IKI SUTUNLU bir izgaraya
   koyuyor — teklif formunda dogru, cunku orada yedi alan var. Burada
   dort alan var ve telefon ile e-posta yan yana dusuyordu: olculdu,
   telefon 283px genislikte ve SAG yarida, e-posta 283px solda,
   digerleri 585px. Izgara tek sutuna indiriliyor, hepsi ayni genislik
   ve ayni sol kenar oluyor. */
.ek-il-form .elementor-form-fields-wrapper{
	grid-template-columns:minmax(0,1fr) !important;
	gap:14px !important;
}
.ek-il-form .elementor-field-group{
	justify-content:flex-start !important;
}
/* Teklif formunda e-posta ve telefon bilincli olarak yan yana; orada
   yedi alan var ve satiri kisaltiyor. Iletisim formunda dort alan var,
   telefon 131px'lik bir kutuya sikisip sag tarafta kaliyordu — tekil
   sutuna geri aliniyor. */
.ek-il-form .elementor-field-group.elementor-field-type-email,
.ek-il-form .elementor-field-group.elementor-field-type-tel{
	grid-column:1 / -1 !important;
}
.ek-il-form .elementor-field-type-submit .elementor-button{
	width:100%;
	justify-content:center;
}

/* ---- HARITA -------------------------------------------------------
   Once yalnizca gomulu bir kutuydu; artik kendi basligi ve tek bir
   eylemi var. Yukseklik de kisaltildi. */
/* Haritadan once bilincli bir nefes: form bittigi anda harita
   basliyordu ve iki blok birbirine yapisiyordu. Sayfanin geri kalanindan
   belirgin sekilde daha genis — bolum degisimini burasi isaret ediyor. */
.ek-il-harita{margin-top:clamp(64px, 7vw, 104px)}
.ek-il-harita-ust{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
}
.ek-iletisim .ek-il-harita-baslik{
	margin:0;
	font-size:var(--tip-h3);
	font-weight:700;
	letter-spacing:-.01em;
	color:var(--metin-baslik);
}
.ek-il-yol{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 16px;
	border:1px solid var(--cizgi);
	border-radius:var(--yuvarlak-hap,100px);
	background:var(--alan-zemin);
	font-size:13px;
	font-weight:600;
	color:var(--metin-baslik);
	text-decoration:none;
	transition:border-color 180ms ease, background-color 180ms ease;
}
.ek-il-yol:hover{
	border-color:var(--alan-cizgi-uzeri);
	background:var(--yuzey-alt);
}
.ek-il-yol svg{width:13px;height:13px;flex:0 0 13px}

.ek-il-harita-cerceve{
	margin-top:12px;
	border:1px solid var(--cizgi);
	border-radius:16px;
	overflow:hidden;
	line-height:0;
}
.ek-il-harita-cerceve iframe{
	width:100%;
	/* Once 280-420px arasiydi; harita bir referans, sayfanin agirlik
	   merkezi degil. */
	height:clamp(220px, 30vh, 300px);
	border:0;
	display:block;
	/* Koyu temada harita beyaz bir dikdortgen olarak patliyordu; ters
	   cevirip renk donduren bir filtre okunakligi koruyor. Acik temada
	   dokunulmuyor. */
	filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95);
}
:root[data-tema="acik"] .ek-il-harita-cerceve iframe{filter:none}

/* 05 numarali bolumdeki teknik tablo: etiket-deger listesi varsa onun
   altina, yoksa tek basina. Kendi kabinda yatay kayiyor. */
.ek-urun-teknik-tablo{margin-top:18px}
.ek-urun-teknik-tablo .ek-tablo-kap{margin:0}

/* Tabloya eklenen GENEL satirlar (Form, Ambalaj gibi): tip sutunlarini
   kapsiyorlar, o yuzden hafif bir ayirt edici ton aliyorlar. Yukarida
   colspan ile tek hucreye dustukleri icin sayi hizalamasi bozulmuyor. */
.ek-urun-teknik .ek-genel-satir td{color:var(--metin-ikincil)}
.ek-urun-teknik .ek-genel-satir td:first-child{color:var(--metin-baslik)}
.ek-urun-teknik .ek-genel-satir:first-of-type td{border-top:1px solid var(--cizgi)}

/* ===================================================================
   06 · URUN VIDEOSU
   Sabit 16:9 cerceve: gomulu oynatici yuklenmeden once de ayni yeri
   kapliyor, dolayisiyla sayfa icerigi kaymiyor (CLS yok).
   =================================================================== */
.ek-video-cerceve{
	position:relative;
	margin-top:16px;
	aspect-ratio:16 / 9;
	max-width:900px;
	border:1px solid var(--cizgi);
	border-radius:16px;
	overflow:hidden;
	background:var(--alan-zemin);
}
.ek-video-cerceve iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	display:block;
}