/* ===================================================================
   ANA SAYFA                                            2026-08-28

   Urun, kategori, iletisim ve blog sayfalariyla ayni token seti ve ayni
   numarali bolum ritmi. Sayfa alti bolumden olusuyor: urun gruplari,
   one cikan urunler, rakamlar, hakkimizda, calisma bicimi ve blog.
   =================================================================== */

.ek-as{
	--ek-as-bolum:clamp(38px, 4.4vw, 68px);
	max-width:1180px;
	margin-inline:auto;
	padding:clamp(16px, 2.2vw, 26px) clamp(16px, 4vw, 40px) var(--ek-as-bolum);
}
/* Bolum dolgularini sifirla: ek-urun ritmi (72+72px) buraya da
   uygulaniyordu ve bosluklar ikiye katlaniyordu. */
.ek-as > section{padding-top:0;padding-bottom:0;margin-bottom:var(--ek-as-bolum)}
.ek-as > section:last-child{margin-bottom:0}
.ek-as .ek-bolum-no{margin:0 0 12px}

/* ---- HERO --------------------------------------------------------- */
.ek-as-hero{padding-top:clamp(8px, 1.2vw, 16px)}
.ek-as .ek-urun-baslik{
	margin:0;
	/* 76px display olcegi hero'yu ekranin %52'sine cikariyordu (olculdu:
	   466px / 900px) ve baslik uc satira kiriliyordu. 58px'te iki satira
	   dusuyor, hero da urun gruplarina yer birakiyor. */
	font-size:clamp(34px, 4.2vw, 58px);
	max-width:20ch;
}
.ek-as .ek-as-lede{
	max-width:52ch;margin:14px 0 0;
	font-size:clamp(15px, 1.4vw, 18px);line-height:1.6;color:var(--metin);
}
.ek-as-hero-baglar{
	display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
	margin-top:22px;
}
.ek-as-ikincil{
	font-size:14px;font-weight:600;color:var(--marka-metin);
	text-decoration:none;text-underline-offset:4px;
}
.ek-as-ikincil:hover{text-decoration:underline}

/* ---- 01 URUN GRUPLARI --------------------------------------------- */
.ek-as-kat-izgara{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:clamp(16px, 2.2vw, 26px);
}
/* CERCEVESIZ. Kart kutusu yerine gorsel + metin: cerceve gorseli
   cerceveliyordu, ustelik uc kategori gorselinin orani birbirinden cok
   farkli (olculdu: 1,50 · 1,09 · 0,93) ve hepsi 16/10 kutuya cover ile
   sikistiginda ikisi ciddi bicimde kirpiliyordu. */
.ek-as-kat{
	display:grid;gap:0;
	text-decoration:none;color:inherit;
	transition:transform 320ms cubic-bezier(.4,0,.2,1);
}
.ek-as-kat:hover{transform:translateY(-3px)}
.ek-as-kat-gorsel{
	display:grid;
	place-items:center;
	/* Sabit yukseklik: oranlari farkli gorseller ayni hizada dursun,
	   altlarindaki basliklar kaymasin. */
	height:246px;
	padding:12px;
	border-radius:16px;
	line-height:0;
	overflow:hidden;
}
.ek-as-kat-gorsel img{
	/* contain: gorselin hicbir yeri kesilmiyor. Farkli oranlar ayni
	   yukseklikteki yumusak zeminin icinde ortalaniyor. */
	width:100%;height:100%;
	aspect-ratio:auto;
	max-height:210px;
	object-fit:contain;
	display:block;
	transition:transform 420ms cubic-bezier(.4,0,.2,1);
}
.ek-as-kat:hover .ek-as-kat-gorsel img{transform:scale(1.03)}
.ek-as-kat-govde{display:grid;gap:6px;padding:16px 2px 0}
.ek-as-kat-ad{
	font-size:var(--tip-h3);font-weight:700;letter-spacing:-.01em;
	color:var(--metin-baslik);
}
.ek-as-kat-ozet{font-size:var(--tip-kucuk);line-height:1.6;color:var(--metin)}

/* ---- 02 ONE CIKAN URUNLER ------------------------------------------ */
.ek-as-urun-izgara{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
	gap:clamp(14px, 1.8vw, 22px);
}
.ek-as-urun{
	display:grid;gap:10px;align-content:start;
	text-decoration:none;color:inherit;
}
/* ZEMIN YOK. Urun fotograflarinin kendi zemini zaten temanin zemini
   ile ayni: acik temada beyaz surum, koyu temada siyah surum basiliyor.
   Kutuya ayri bir zemin verildiginde beyaz gorsel gri bir kutunun icinde
   yuzuyordu. Zemin kalkinca gorsel dogrudan sayfaya oturuyor. */
.ek-as-urun-gorsel{
	display:grid;place-items:center;
	padding:8px;
	border-radius:12px;
	line-height:0;
}
.ek-as-urun-gorsel img{
	width:100%;aspect-ratio:1 / 1;object-fit:contain;display:block;
}
/* Sahne cekimleri siyah zemine duzlestirilmis; acik temada kendi beyaz
   surumleri geliyor, gelmeyenlerde koyu bir panel altlik oluyor. */
/* Acik tema karsiligi OLMAYAN sahne gorselleri (siyah zemine
   duzlestirilmis) beyaz sayfada siyah kutu olarak durmasin diye koyu bir
   panele oturuyor. Karsiligi olanlarda bu kural calismiyor. */
:root[data-tema="acik"] .ek-as-urun--sahne:not(:has(img[data-acik-src])) .ek-as-urun-gorsel,
:root[data-tema="acik"] .ek-as-kat:not(:has(img[data-acik-src])) .ek-as-kat-gorsel{
	background:#05070F;
}
.ek-as-urun-ad{
	font-size:15px;font-weight:700;line-height:1.3;color:var(--metin-baslik);
}
.ek-as-urun-ozet{font-size:13px;line-height:1.55;color:var(--metin-ikincil)}

/* ---- 03 RAKAMLAR --------------------------------------------------- */
.ek-as-sayi-izgara{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
	gap:1px;margin:0;
	background:var(--cizgi);
	border:1px solid var(--cizgi);
	border-radius:16px;
	overflow:hidden;
}
.ek-as-sayi-izgara > div{background:var(--yuzey);padding:22px 20px;margin:0}
.ek-as-sayi-izgara dt{
	margin:0 0 8px;
	font-size:clamp(26px, 3vw, 38px);font-weight:700;letter-spacing:-.02em;
	line-height:1.05;color:var(--metin-baslik);
	font-variant-numeric:tabular-nums;
}
.ek-as-birim{
	margin-left:6px;font-size:.46em;font-weight:600;
	letter-spacing:.04em;color:var(--metin-ikincil);
}
.ek-as-sayi-izgara dd{
	margin:0;font-size:var(--tip-kucuk);line-height:1.5;color:var(--metin-ikincil);
}

/* ---- 04 HAKKIMIZDA ------------------------------------------------- */
.ek-as-hakkinda{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
	gap:clamp(22px, 3.4vw, 48px);
	align-items:center;
}
@media (max-width:900px){
	.ek-as-hakkinda{grid-template-columns:1fr}
}
.ek-as .ek-as-hakkinda-metin p:not(.ek-bolum-no){
	margin:0 0 18px;max-width:54ch;
	font-size:var(--tip-govde);line-height:1.75;color:var(--metin);
}

/* ---- 05 CALISMA BICIMI ---------------------------------------------
   Kaynak duzende bunlar flip-box'ti ama on ve arka yuzleri BIREBIR ayni
   metni tasiyordu; cevirmenin bir karsiligi yoktu. Duz kart. */
.ek-as-deger-izgara{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:clamp(16px, 2.2vw, 26px);
}
.ek-as-deger{
	padding:22px;
	border:1px solid var(--cizgi);
	border-radius:16px;
	background:var(--alan-zemin);
}
.ek-as .ek-as-deger h2{
	margin:0 0 10px;
	font-size:var(--tip-h3);font-weight:700;letter-spacing:-.01em;
	color:var(--metin-baslik);
}
.ek-as .ek-as-deger p{
	margin:0;font-size:var(--tip-kucuk);line-height:1.7;color:var(--metin);
}

/* ---- CTA ------------------------------------------------------------ */
.ek-as > section.ek-as-cta{
	padding:clamp(26px, 3vw, 38px);
	border:1px solid var(--cizgi);
	border-radius:18px;
	background:var(--alan-zemin);
}
.ek-as .ek-as-cta h2{
	margin:0 0 10px;text-align:left;
	font-size:var(--tip-h2);font-weight:700;letter-spacing:-.015em;
	color:var(--metin-baslik);
}
.ek-as .ek-as-cta p{
	margin:0 0 20px;max-width:58ch;text-align:left;
	font-size:var(--tip-govde);line-height:1.65;color:var(--metin);
}

@media (prefers-reduced-motion:reduce){
	.ek-as-kat, .ek-as-kat-gorsel img{transition:none}
	.ek-as-kat:hover{transform:none}
	.ek-as-kat:hover .ek-as-kat-gorsel img{transform:none}
}

/* ---- HERO GORSELLI HAL ---------------------------------------------
   Gorsel alani dolu oldugunda hero iki sutun oluyor; bos oldugunda
   yukaridaki tek sutunlu duzen aynen kaliyor. */
.ek-as-hero--gorselli{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
	gap:clamp(24px, 4vw, 56px);
	align-items:center;
}
@media (max-width:900px){
	.ek-as-hero--gorselli{grid-template-columns:1fr}
}
.ek-as-hero-gorsel{
	margin:0;
	line-height:0;
	border-radius:20px;
	overflow:hidden;
}
.ek-as-hero-gorsel img{
	width:100%;
	height:auto;
	display:block;
	/* contain degil, dogal akis: gorsel kendi orani neyse o. Kenardan
	   kesilmemesi icin hicbir sabit oran dayatilmiyor. */
}

/* ---- KARE 01 · HERO HAREKETI ---------------------------------------
   Tuval metnin ALTINDA duruyor ve tiklanamiyor. Iki maske kesisiyor:
   soldan saga aciliyor (baslik ve lede'nin ustunden gecmesin) ve ust-alt
   kenarlarda sonuyor (kadraja carpip kesilmesin). Maskeyi desteklemeyen
   tarayicida yalnizca kenar yumusakligi kayboluyor, duzen degismiyor. */
.ek-as-hero{position:relative;isolation:isolate}
.ek-as-hero-metin,
.ek-as-hero-gorsel{position:relative;z-index:1}
.ek-as-hero-hareket{
	position:absolute;
	inset:-6% -2%;
	z-index:0;
	pointer-events:none;
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%),
	                   linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
	        mask-image:linear-gradient(to right, transparent 0, #000 40%),
	                   linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
	-webkit-mask-composite:source-in;
	        mask-composite:intersect;
}
.ek-as-hero-hareket canvas{display:block;width:100%;height:100%}
/* Acik temada beyaz zemine cizilen ayni maviler daha bagirgan duruyor. */
:root[data-tema="acik"] .ek-as-hero-hareket{opacity:.8}
@media (max-width:900px){
	/* Tek sutuna dusunce metin tuvalin uzerine biniyor; okunurluk once
	   gelir, hareket geri cekilir. */
	.ek-as-hero-hareket{opacity:.42;inset:-4% -6% -10%}
	:root[data-tema="acik"] .ek-as-hero-hareket{opacity:.32}
}

/* ---- KARE 02 · AKIS BANDI ------------------------------------------ */
.ek-as-akis{
	border-top:1px solid var(--cizgi);
	border-bottom:1px solid var(--cizgi);
	padding:clamp(26px, 3.2vw, 42px) 0;
}
.ek-as .ek-as-akis-baslik{
	/* ".ek-urun section > h2" bu basligi ORTALIYOR ve --baslik-renk'e
	   boyuyordu; tek sinifla yazilan kural ona ozgulukte yeniliyordu.
	   Iki sinifla yazilinca (0,2,0 > 0,1,2) kural geri kazaniliyor. Buyuk
	   harfe cevirme de burada aciktan kapatiliyor.
	   */
	text-align:left;
	text-transform:none;
	color:var(--metin-baslik);
	margin:0 0 clamp(20px, 2.4vw, 30px);
	font-size:clamp(24px, 3vw, 40px);
	line-height:1.15;
	font-weight:700;
	letter-spacing:-.02em;
}
.ek-as .ek-as-akis-baslik span{display:block}
/* Ikinci satir birinciden sonra gelsin: 70ms'lik ortak sira adimi
   storyboard'daki 80ms'e yeterince yakin, ayri bir kural gerekmiyor. */
.ek-as .ek-as-akis-baslik span:last-child{color:var(--metin-ikincil)}

/* Kategori adi seridin cipasi: kalin ve baslik renginde, urunler onun
   arkasindan normal agirlikta geliyor. */
.ek-as-akis-liste .ek-as-akis-kat{
	font-weight:700;
	color:var(--metin-baslik);
	letter-spacing:-.01em;
}

.ek-as-akis-yol{
	overflow:hidden;
	-webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	        mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ek-as-akis-sira{
	display:flex;
	width:max-content;
	animation:ek-as-kay 22s linear infinite;
}
/* Iki OZDES kopya yan yana; %50 kaydirinca ikinci kopya birincinin tam
   yerine oturuyor ve dongu dikissiz kapaniyor. */
@keyframes ek-as-kay{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}
.ek-as-akis-yol:hover .ek-as-akis-sira,
.ek-as-akis-yol:focus-within .ek-as-akis-sira{animation-play-state:paused}
.ek-as-akis-liste{
	display:flex;align-items:center;
	gap:clamp(20px, 2.6vw, 34px);
	margin:0;padding:0 clamp(10px, 1.3vw, 17px);
	list-style:none;
}
.ek-as-akis-liste li{
	display:flex;align-items:center;gap:clamp(20px, 2.6vw, 34px);
	white-space:nowrap;
	font-size:clamp(14px, 1.3vw, 17px);
	color:var(--metin);
}
/* Ayirici madde imi ::after ile: DOM'a bos <span> eklemeden, ekran
   okuyucuya da okunmadan. */
.ek-as-akis-liste li::after{
	content:"";
	width:4px;height:4px;border-radius:50%;
	background:var(--marka-metin);
	opacity:.55;
}
@media (prefers-reduced-motion: reduce){
	.ek-as-akis-sira{animation:none}
}