/* =========================================================================
   Erbil Branda — Bilesen katmani
   ERBIL-111 / ERBIL-112 | 2026-08-22

   YUKLEME SIRASI: eb-tokens.css -> eb-site.css -> BU DOSYA
   Bu dosya bilerek en sonda yuklenir; icindeki kurallarin bir kismi
   eb-site.css'teki eski kurallari duzeltmek zorunda oldugu icin
   cascade'de sonra gelmesi gerekir.

   KAPSAM NOTU: Buton, kart ve rozet sistemleri sitede ZATEN VAR
   (.eb-btn-primary/-outline/-ghost/-wa/-inverse, .eb-card, .eb-pc-badge).
   Bu dosya onlarin kopyasini oluSTURMAZ - yalnizca eksik parcalari ekler.
   ========================================================================= *//* =========================================================================
   1) ODAK GORUNURLUGU  (ERBIL-112)

   SORUN: eb-site.css icinde su kural var:
       input:focus, textarea:focus, select:focus { outline: none !important; ... }
   Ozgulugu (0,1,1) oldugu icin, ayni dosyadaki
       *:focus-visible { outline: 3px solid #c1502e !important }
   kuralindan (0,1,0) DAHA GUCLU. Sonuc: klavyeyle form alanina gelen
   kullanici yalnizca %10 opaklikli soluk bir golge goruyor, net bir odak
   halkasi gormuyor. WCAG 2.4.7 (Focus Visible) ve 1.4.11 (Non-text
   Contrast) acisindan yetersiz.

   COZUM: :focus-visible'i eleman secicisiyle birlikte kullaniyoruz
   (input:focus-visible = 0,2,1) - boylece eski kurali ozgulukle asiyoruz
   ve fare tiklamasinda halka cikmiyor, yalnizca klavye gezinmesinde cikiyor.

   KONTRAST: #c1502e beyaz uzerinde 4,8:1 - koyu (#1c1b19) uzerinde 3,6:1.
   Her iki zeminde de WCAG 1.4.11 esigini (3:1) gecer.
   ========================================================================= */a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
	outline: 3px solid var(--color-primary) !important;
	outline-offset: 2px !important;
	border-radius: var(--radius-xs);
}/* Koyu zeminlerde (hero, CTA bandi, footer) terrakota yerine beyaz halka
   daha yuksek kontrast verir. */.eb-hero-slider a:focus-visible,.eb-cta-band a:focus-visible,.eb-footer a:focus-visible{
	outline-color: #ffffff !important;
}/* =========================================================================
   2) BUTON BOYUT VARYANTLARI  (ERBIL-111)

   Mevcut .eb-btn-* taban kurali tek bir boyut tanimliyor
   (padding 15px 28px + line-height 1 + 15px yazi = 45px yukseklik).
   45px, 44px dokunma hedefi esigini zaten gecirdigi icin taban DEGISMEDI.
   Asagidakiler yalnizca ek boyut secenekleridir.

   KURAL: -sm varyanti mobilde KULLANILMAZ (36px < 44px esigi).
   Bkz. DESIGN-SYSTEM.md 8.1.
   ========================================================================= */.eb-btn-sm{
	padding: 11px 16px;
	font-size: var(--text-body-sm);
}

/* Mobilde -sm otomatik olarak 44px esigine yukseltilir; kucuk buton
   masaustunde kalir, dokunmatikte kalmaz. */
@media (max-width: 767px) {.eb-btn-sm{
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}}/* Tam genislik yardimcisi — urun kartinda ve mobil CTA'larda kullanilir. */.eb-btn-block{
	display: flex;
	width: 100%;
}


/* =========================================================================
   3) HAREKET TERCIHI — TAMAMLAMA  (ERBIL-112)

   eb-site.css'te zaten global bir prefers-reduced-motion blogu var
   (animation-duration / transition-duration sifirlaniyor). Eksik olan tek
   sey scroll-behavior; yumusak kaydirma vestibuler rahatsizlik tetikleyen
   hareketlerden biridir.

   NOT: Hero slider'in OTOMATIK DONMESI CSS ile durdurulamaz (Swiper JS
   autoplay). Bu, WCAG 2.2.2 (Pause, Stop, Hide) acisindan acik bir
   eksiktir ve ERBIL-142'de hero tek bir statik bolume donusturulunce
   kendiliginden ortadan kalkacaktir. Silinecek bir bilesen icin JS
   yazilmadi.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {html{
		scroll-behavior: auto !important;
	}}/* =========================================================================
   4) SABIT OGE KATMANLAMA (Z-INDEX) VE MOBIL CAKISMA COZUMU  (ERBIL-125)

   SORUN (SITE-AUDIT 3.5): Mobilde ekranin altinda dort sabit oge cakisiyor:
     - eb-bottom-nav   (Snippet #38)  bottom:0, ~58px, z:9997/9999
     - eb-cookie-banner(Snippet #13)  bottom:0, ~166px, z:10000  <- nav'i ORTUYOR
     - eb-wa-fab       (Snippet #12)  bottom:24px, z:9999
     - eb-cart-fab     (Snippet #29)  bottom:96px, z:9998
     - ast-scroll-top  (Astra)        bottom-right
   Ayrica sticky header (Snippet #40) z:9990 ile FAB'lardan DUSUK - arama
   acilir menusu FAB'larin ALTINDA kaliyordu.

   Z-index degerleri 9990-10000 arasi keyfi ve tutarsizdi. Artik hepsi
   eb-tokens.css'teki TEK olcekten (--z-*) geliyor:
     bottom-nav 900 < FAB 950 < header 1000 < cookie 1200 < modal 1300

   OZGULUK NOTU: #38 dokuz kez !important kullaniyor. Bu yuzden buradaki
   kurallar hem daha yuksek ozgulukle (body / #id oneki) hem de !important
   ile yaziliyor - snippet'lerin satir ici ve <style> kurallarini kesin
   olarak ezmek icin. Snippet'ler child theme'e tasininca (ERBIL-196) bu
   !important'lar sadelesecek.

   GECICI OGE: .xpro-theme-builder-header FAZ 4'te native header'la
   degisecek; z-index kurali hem eski hem gelecekteki (.eb-site-header)
   secici icin yazildi, boylece rebuild sonrasi da gecerli kalir.
   ========================================================================= *//* --- Header: FAB'larin uzerinde olmali (arama/menu acilirlari icin) --- */.eb-site-header{
	z-index: var(--z-header) !important;
}/* --- Mobil alt navigasyon: en altta, en dusuk katman --- */body #eb-bottom-nav,body .eb-bottom-nav{
	z-index: var(--z-bottom-nav) !important;
}/* --- FAB'lar: nav'in uzerinde --- */body .eb-wa-fab,body .eb-cart-fab{
	z-index: var(--z-fab) !important;
}/* --- Cerez banner: consent oncelikli, en ustte (modal haric) --- */#eb-cookie-banner{
	z-index: var(--z-cookie) !important;
}

/* =========================================================================
   MOBIL (<=767px): dikey istifleme - hicbir oge digerini ortmez
   ========================================================================= */
@media (max-width: 767px) {/* Cerez banner alt navigasyonun USTUNE oturur (ustune binmez).
	   Nav 58px + kucuk bosluk. Inline bottom:0'i ozguluk+important ezer. */#eb-cookie-banner{
		bottom: 62px !important;
	}/* WhatsApp FAB: nav + cerez seridi bolgesinin uzerinde. */body .eb-wa-fab{
		bottom: calc(74px + env(safe-area-inset-bottom)) !important;
	}/* Sepet FAB mobilde GEREKSIZ - alt navigasyonda zaten "Sepet" var.
	   Cift sepet erisimi kafa karistirici; mobilde gizlenir.
	   (Masaustunde bottom-nav yok, FAB gorunur kalir.) */body .eb-cart-fab{
		display: none !important;
	}/* Astra "yukari cik" butonu da nav'in uzerine tasinir. */#ast-scroll-top,.ast-scroll-top-wrap{
		bottom: calc(74px + env(safe-area-inset-bottom)) !important;
	}}/* =========================================================================
   5) SKIP LINK GORUNURLUGU  (ERBIL-128)

   SORUN: Astra bir skip link uretiyor (<a class="skip-link" href="#content">
   Iceriğe atla</a>), ANCAK odaklandiginda GORUNMUYOR - hala clip:rect(1px..)
   ile 1x1px gizli kaliyor. Yani ekran okuyucu icin calisiyor ama KLAVYE ile
   gezen GOREN kullanici Tab'a bastiginda hicbir sey gormuyor. WCAG 2.4.1
   (Bypass Blocks) amaci karsilanmiyor.

   COZUM: :focus / :focus-visible durumunda clip'i kaldirip linki ekranin
   sol ustunde gorunur bir butona donusturuyoruz.

   LANDMARK NOTU: Sayfada <main>/role=main YOK; hedef #content duz bir <div>.
   Bu, header native olarak yeniden kurulunca (FAZ 2) markup bizim kontrolumuze
   gecince <main id="content" role="main" tabindex="-1"> olarak eklenecek.
   Simdi tam sayfa output-buffer riski alinmadi.
   ========================================================================= */.skip-link:focus,.skip-link:focus-visible{
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	background: var(--color-primary) !important;
	color: #fff !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-body-sm) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-lg) !important;
	z-index: var(--z-modal) !important;
}