/* ================= Sahne 01 — Hero ================= */
/* Tek yapiskan sahne, uc asamali: video oynar -> medya cercevesi tam
   ekrandan sagdaki karta donusur -> soldaki liste maddeleri sirayla
   aktiflesir. Butun konum degerlerini hero.js ozel ozelliklerle surer. */
/* Sahne bastan sona duraklarla ilerler; sayfa kaydirmasi yok. */
.hero-sarmal{position:relative;z-index:1;height:100svh}
/* Ikinci alanin (3 hizmet basliginin oldugu bolum) zemini.
   Ayri degisken: --beyaz token'i logoda ve kart yazilarinda da
   kullaniliyor, o yuzden token degil yalnizca bu bolum degisir. */
:root{--alan2-zemin:#F3F3F3}
/* Zemin BASTAN beyaz. Onceden koyuydu ve uzerine acik bir katman
   solarak biniyordu; cerceve kuculurken acilan alan siyahtan beyaza
   geciyordu. Tam ekran asamada cerceve zaten her yeri kapatiyor,
   bu yuzden beyaz zemin ancak kirpma basladiginda gorunur. */
.hero{position:sticky;inset-block-start:0;height:100svh;
  padding-block:0;overflow:hidden;background:var(--alan2-zemin)}

.hero__zemin{position:absolute;inset:0;z-index:0;background:var(--alan2-zemin)}

/* Donusen medya cercevesi. inset degerleri yuzde; hero.js gunceller. */
.hero__cerceve{position:absolute;z-index:2;overflow:hidden;
  inset-block-start:var(--c-ust,0%);inset-inline-end:var(--c-sag,0%);
  inset-block-end:var(--c-alt,0%);inset-inline-start:var(--c-sol,0%);
  border-radius:var(--c-yaricap,0px);will-change:inset}
.hero__video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:62% center}

/* Yazinin arkasindaki hafif alt perde (Figma: Rectangle 9).
   Cerceve kucululup zemin aciliyorken birlikte kayboluyor. */
.hero__perde{position:absolute;inset:0;pointer-events:none;
  opacity:var(--perde-opak,1);
  background:linear-gradient(0deg,rgba(10,11,14,.42) 0%,
    rgba(10,11,14,.14) 22%,transparent 34%)}

/* --- Asama A: hero metinleri ---
   Her satir = zemin (mavi blok) + yazi. Ikisi ayri animasyon alir:
   zemin soldan saga akar, yazi hemen ardindan gelir. */
.hero__ic{position:absolute;z-index:3;inset-inline:0;
  inset-block-end:clamp(28px,6vh,72px);width:100%;
  opacity:var(--metin-opak,1);pointer-events:none}
/* Iki metin durumu ayni kutuda ust uste durur: capraz solmada
   yerlesim kaymaz. Kutu, iki durumdan uzun olani kadar yer kaplar. */
.hero__metin{position:relative;display:grid}
.hero__baslik{grid-area:1/1;align-self:end;margin:0;
  display:grid;justify-items:start;
  font-size:clamp(1.75rem,3.06vw,2.754rem);font-weight:400;
  letter-spacing:.01em;line-height:.908;color:var(--beyaz)}
/* Bloklar tasarimda 4px ust uste biniyor (yukseklik 52, adim 48). */
.hero__satir{position:relative;display:block;padding:.14em .43em}
.hero__satir + .hero__satir{margin-block-start:-.09em}
.hero__blok{position:absolute;inset:0;z-index:0;background:var(--mavi);
  transform:scaleX(0);transform-origin:left center;will-change:transform}
.hero__baslik--iki .hero__blok{background:var(--koyu-gri)}
.hero__yazi{position:relative;z-index:1;display:inline-block;
  will-change:opacity,transform}
.hero__satir--kalin{font-weight:700}
.hero__satir--miras{font-family:var(--f-miras);font-style:italic;
  font-weight:600;line-height:1.089}

/* --- Asama C: ikinci alan (Figma "Desktop - 6") ---
   Kapsayici header ile AYNI: max 1440, 39px iceriden. Boylece gorselin
   sag kenari header'in sag kenariyla her ekranda cakisir.
   Ust bosluk sabit header'a ayrildi (gorsel tuvalde y=130'da basliyor). */
/* z-sirasi: beyaz zemin (0) < basliklar (1) < video karti (2) < hero metni (3).
   Basliklar kartin ALTINDA kalir; kart kucululup buyurken uzerine binmez. */
.vitrin{position:absolute;z-index:1;inset-block-start:0;inset-inline:0;
  height:100%;max-width:var(--kapsayici);margin-inline:auto;
  padding-inline:clamp(16px,2.71vw,39px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:clamp(24px,4vw,80px);
  opacity:var(--liste-opak,0)}

/* Gorsel kutusunun yeri: olcu SABIT, sag kenara yaslanir.
   Genis ekranda buyumez, tasmaz. Video cercevesi buraya oturur. */
/* Tuvalde kart y=130, basliklar y=212 — IKISI DE bolumun tepesinden
   olculur. Ust bosluklar bu yuzden ayri ayri verilir; .vitrin'e ortak
   bir ust bosluk verilirse liste onun ustune binip 130px asagi kayar. */
.vitrin__yer{width:671px;height:689px;justify-self:end;
  margin-block-start:130px;
  border-radius:20px;pointer-events:none}

/* Konumlar Desktop-6'nin GUNCEL halinden (tuval 1440, kapsayici 39'dan
   basliyor): basliklar x=144 -> 105, cizgi x=103 -> 64. */
/* Kaydirma YALNIZCA basliklarda: kart kucululurken altindan cikmaz,
   asagidan yukari suzulerek gelir ve sayfa yukari kayiyormus hissi verir.
   Onemli: bu donusum .vitrin'in tamamina verilemez — video cercevesinin
   hedefini olcen .vitrin__yer de onunla kayar ve kart yanlis yere oturur. */
.vitrin__liste{position:relative;list-style:none;margin:0;
  padding:212px 0 0 105px;display:grid;gap:0;justify-items:start;
  transform:translateY(var(--liste-y,120px));will-change:transform}
.vitrin__cizgi{position:absolute;inset-inline-start:64px;
  width:6.41px;height:0;background:var(--mavi);
  opacity:0;will-change:transform,height}

.vitrin__oge{display:grid;justify-items:start}
/* Baslik yuksekligi 2 x 45.025 x 1.04 = 93.65. Tuvaldeki adimlar
   157.8 ve 152.9 -> bosluklar 64.1 ve 59.3; ortalamasi alindi. */
.vitrin__oge + .vitrin__oge{margin-block-start:62px}

/* Baslik: 45.025px, harf araligi -0.9005px.
   Satir araligi tasarimin KUTU yuksekliklerinden cikarildi: iki satirlik
   basliklar 93.68 ve 94.02px, yani satir basina ~46.8px -> 1.04.
   get_design_context'in bildirdigi %84.055 cok sikiydi, satirlar
   birbirine yapisiyordu. Iki durumda da ayni tutulur; degisseydi
   baslik aktiflesirken kendi icinde ziplardi. */
.vitrin__baslik{display:block;text-decoration:none;
  font-family:var(--f-header);
  font-size:clamp(2rem,3.127vw,45.025px);font-weight:400;
  letter-spacing:-.9005px;line-height:1.04;color:#A3A3A3;
  transition:color 420ms var(--egri),font-weight 420ms var(--egri)}
.vitrin__oge--aktif .vitrin__baslik{font-weight:600;color:var(--mavi)}

/* Alt metin ve buton yalnizca aktif maddede acilir. Ikisi TEK bir
   sarmalayicida toplanir: yalnizca onun yuksekligi animasyonlanir,
   boylece buton kendi sabit olcusunu korur. */
.vitrin__ek{overflow:hidden;height:0;opacity:0;
  justify-self:stretch}
/* Boyut tasarimin kendi kutusundan cikarildi: 434px genislikte bu metin
   Figma'da 50.66px yer kapliyor; 11.5px tam bu yuksekligi veriyor
   (50.3px). 13px 4 satira tasip bolumu ekrandan tasiriyordu. */
.vitrin__aciklama{margin:17px 0 0;max-width:434px;
  font-family:var(--f-header);font-size:11.5px;line-height:1.46;
  color:#1E1E1E}

/* "Daha fazla bilgi al" — Figma: 167.28x31.55, zemin #0A49E2,
   kenarlik 0.956px #D1D1D1, yazi 13.383px beyaz.
   Uzerine gelince YALNIZCA yazi kelime kelime kayar; kose yuvarlama
   efekti burada yok (yalnizca header'daki Teklif Al butonunda). */
.vitrin__buton{display:flex;align-items:center;justify-content:center;
  width:167.28px;height:31.55px;overflow:hidden;
  font-family:var(--f-header);font-size:13.383px;font-weight:600;
  letter-spacing:.1338px;color:var(--beyaz);text-decoration:none;
  background:var(--mavi);
  border:.956px solid #D1D1D1;border-radius:0;
  box-shadow:0 0 8.699px rgba(255,255,255,.4);
  margin-block-start:17px}

/* Hareket kapaliysa sahne tek ekranda, ilk metinle durur. */
.hero--sabit .hero__baslik--iki{display:none}
@media (prefers-reduced-motion:reduce){
  .hero-sarmal{height:auto}
  .hero{position:relative}
  .hero__baslik--iki,.vitrin{display:none}
}


/* ================= Alan 3 — riskler seridi =================
   Butun olculer Figma "Desktop - 6" / alan-3 disa aktarimindan olculdu.
   Bolum 1440x877; icerik header ile ayni kapsayicida, ic bosluk 47/43
   (tuvalde metin x=86, oklarin sag kenari 1358). */
/* Kapsayicinin ic kenarina kadar olan mesafe. Mutlak konumlandirmada
   kapsayici kutu DOLGU kutusudur; kapsayici dolgusu otomatik dusulmez,
   bu yuzden acikca eklenir. */
/* Yukseklik tuvalde 877; ancak ekran daha uzunsa bolum ekrani
   kaplayamiyor ve sayfanin sonunda ustte onceki bolumun beyazi
   kaliyordu. En az bir ekran kadar uzun olmasi bunu kapatir;
   icerik mutlak konumlu oldugu icin fazlalik altta bos siyah kalir. */
.alan3{position:relative;background:#212121;min-height:max(877px,100svh);
  overflow:hidden;
  --a3-kenar:calc(max(0px,(100% - var(--kapsayici)) / 2)
              + clamp(16px,2.71vw,39px))}
.alan3__ic{max-width:var(--kapsayici);margin-inline:auto;
  padding-inline:clamp(16px,2.71vw,39px);
  position:relative}

/* --- Ana metin ---
   Referans: iki satir, 35px, harf araligi -1, satir adimi 54.
   1. satir regular, 2. satir bold. Tamami gri baslar ve kaydirdikca
   kelime kelime beyaza doner (rengi alan3.js surer). */
.alan3__ana{position:absolute;margin:0;
  inset-block-start:216px;inset-inline-start:calc(var(--a3-kenar) + 47px);
  font-family:var(--f-header);font-size:35px;font-weight:400;
  line-height:54px;letter-spacing:-1px;color:#606060}
/* Ust etiket: ana metnin sol hizasinda, gri kutu icinde beyaz
   buyuk harf. Metin HTML'de zaten buyuk yazili; text-transform
   kullanilmadi cunku Turkce "i" -> "I" donusumu tarayiciya kaliyor
   ve noktali I riske giriyor. */
.alan3__etiket{position:absolute;
  inset-block-start:179px;
  inset-inline-start:calc(var(--a3-kenar) + 47px);
  display:inline-block;padding:4px 9px;
  background:#606060;
  font-family:var(--f-header);font-size:17.2px;font-weight:700;
  line-height:1;letter-spacing:.12em;color:var(--beyaz);
  /* Harf araligi SON harften sonra da bosluk birakir; sag ic bosluk
     o kadar azaltilir ki kutu simetrik gorunsun. */
  padding-inline-end:calc(9px - .12em)}

.alan3__satir{display:block}
.alan3__satir--kalin{font-weight:700}
.alan3__kelime{color:#606060;transition:color 120ms linear}

/* --- Ok butonlari (51x51, ikon 22x22, ara 18) --- */
.alan3__oklar{position:absolute;inset-block-start:268.9px;
  inset-inline-end:calc(var(--a3-kenar) + 57.3px);display:flex;gap:15.9px}
.alan3__ok{width:44.8px;height:44.8px;display:grid;place-items:center;
  padding:0;background:none;cursor:pointer;
  border:2.4px solid #606060;color:#606060;
  transition:border-color var(--s-mikro) var(--egri-standart),
             color var(--s-mikro) var(--egri-standart)}
.alan3__ok[data-etkin="1"]{border-color:var(--beyaz);color:var(--beyaz)}
/* Sinira gelince pasif: imlec degismez, tiklama is yapmaz (JS'te
   korunur). pointer-events KAPATILMAZ: kapatilinca, uca gidip pasif
   olan butonun :hover'i fare hala uzerindeyken dusuyor ve ikon
   basildigi anda eski yerine geri kayiyordu. */
.alan3__ok[data-etkin="0"]{cursor:default}
/* Ikon dolgu degil KONTUR; kalinlik cerceveyle ayni: 2.4px.
   viewBox 20 birim, cizim 19.3px -> olcek .965. non-scaling-stroke
   olmasa 2.4 birim ekranda 2.32px cikardi; bu ozellik konturu
   olcekten bagimsiz tutar, deger dogrudan ekran pikselidir. */
.alan3__ok svg{width:19.3px;height:19.3px;display:block;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:square;stroke-linejoin:miter}
/* vector-effect KALITILMAZ ve sekil elemanina verilmeli; svg
   kokune yazilinca etkisiz kaliyordu. */
.alan3__ok svg path{vector-effect:non-scaling-stroke}

/* Ok ikonu YATAY kayar: sag buton icin ikon saga cikar, kopyasi soldan
   gelir; sol buton icin tersi.
   Iki kopya BITISIK degil: aralarinda bosluk var, yoksa cikan ve giren
   ikon birbirine yapisik kayiyor ve hareket kotu gorunuyordu. */
.alan3__ok{--ikon:19.3px;--ikon-ara:12px;
  --ikon-yol:calc(var(--ikon) + var(--ikon-ara))}
.alan3__ok .kayan{display:block;width:var(--ikon);height:var(--ikon);
  overflow:hidden}
.alan3__ok .kayan__ic{display:flex;gap:var(--ikon-ara);width:max-content;
  transition:transform 340ms var(--egri-yumusak)}
.alan3__ok .kayan__ic > svg{flex:none}
/* Kayma yalnizca ETKIN butonda calisir: gri (pasif) butonda fare
   uzerine gelse de ikon oynamaz.
   `tutuldu`: tiklamayla uca gidip pasiflesen buton icin. Kural
   dusseydi ikon, fare hala uzerindeyken park yerine geri kayardi;
   bu sinif ikonu bulundugu yerde tutar ve fare cikinca kalkar. */
.kayan--sag .kayan__ic{transform:translateX(calc(var(--ikon-yol) * -1))}
.alan3__ok--sag[data-etkin="1"]:hover .kayan__ic,
.alan3__ok--sag[data-etkin="1"]:focus-visible .kayan__ic,
.alan3__ok--sag.tutuldu .kayan__ic{transform:translateX(0)}
.kayan--sol .kayan__ic{transform:translateX(0)}
.alan3__ok--sol[data-etkin="1"]:hover .kayan__ic,
.alan3__ok--sol[data-etkin="1"]:focus-visible .kayan__ic,
.alan3__ok--sol.tutuldu .kayan__ic{
  transform:translateX(calc(var(--ikon-yol) * -1))}

/* --- Kart seridi --- */
/* Serit fare ile suruklendigi icin pencere icinde metin secimi ve
   goruntu suruklemesi tamamen kapatilir; yoksa surukleme sirasinda
   yazilar seciliyor ve goruntunun surukleme hayaleti cikip hareketi
   bozuyordu. -webkit- oneki Safari icin gerekli. */
/* Maske EKRANIN soluna kadar acik: kartlar sola kayarken ilk
   kutucugun hizasinda kesilmesin, sitenin sol kenarina kadar
   gidip orada kaybolsun. Kartlarin BASLANGIC hizasi degismesin
   diye ayni pay seride ic bosluk olarak verilir. */
.alan3__pencere{position:absolute;inset-block-start:374px;
  inset-inline-start:0;
  inset-inline-end:0;overflow:hidden;
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.alan3__pencere img{-webkit-user-drag:none;user-drag:none}
.alan3__pencere.tutuluyor{cursor:grabbing}
/* Gecis burada duruyor. Satir ici stille donusumle AYNI karede
   verilince tarayici animasyonu atlayip aninda sicratiyordu. */
.alan3__serit{display:flex;gap:16px;width:max-content;
  padding-inline-start:calc(var(--a3-kenar) + 47px);
  will-change:transform;
  transition:transform 520ms var(--egri-yumusak)}
.alan3__serit.suruklenirken{transition:none}

.alan3__kart{flex:0 0 341px;height:381px;display:flex;flex-direction:column;
  background:var(--mavi);overflow:hidden;user-select:none}
.alan3__ust{height:137px;padding:24px 25px 0;box-sizing:border-box}
.alan3__baslik{display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--f-header);font-size:22px;font-weight:400;
  line-height:1.15;color:var(--beyaz)}
/* Ikon yuvasi referanstan: 31x31, kartin sol-ustunden (25,24).
   Ikonlarin hepsi kare viewBox'li; "contain" ile her biri tasarimdaki
   kendi oranini alir (alev 22x30, fan 30x30 ...).
   Kaynak SVG'lerde renk tanimli degil (varsayilan siyah); tasarimdaki
   beyaza cevirmek icin filtre kullanilir. */
.alan3__ikon{flex:none;width:31px;height:31px;object-fit:contain;
  filter:brightness(0) invert(1)}
.alan3__metin{margin:12px 0 0;max-width:290px;
  font-family:var(--f-header);font-size:13px;font-weight:400;
  line-height:16px;color:var(--beyaz);text-align:justify}

/* Mavi baslik ile gorsel arasindaki degrade bant: 13px, YATAY gecis.
   Renkler tasarimdan: sol #0639B3 -> sag #2563F8 (render'da olculen
   #0b3fbe -> #225ef1 ile ortusuyor; dikeyde degisim yok). */
.alan3__degrade{display:block;flex:none;height:13px;
  background:linear-gradient(90deg,#0639B3 0%,#2563F8 100%)}
.alan3__gorsel{flex:1;margin:0;overflow:hidden}
.alan3__gorsel img{width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;
  transition:filter 320ms var(--egri-standart)}
/* Uzerine gelinen kartin gorseli renksizlesir */
.alan3__kart:hover .alan3__gorsel img{filter:saturate(0)}

@media (prefers-reduced-motion:reduce){
  .alan3__ok .kayan__ic,.alan3__gorsel img{transition:none}
}

/* ================= Sahne 02 — Risk ================= */
/* Tam ekran arka plan gorseli kaldirildi: metin uzerinde okunmuyordu.
   Artik duz zemin + sagda kendi cercevesinde fotograf. */
.risk__ic{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--b16);align-items:center}
.risk__ifade{font-size:clamp(1.5rem,2.2vw,2.125rem);font-weight:300;
  line-height:1.34;color:var(--duman);max-width:26ch;margin:0}
.risk__satir{display:block}
.risk__ifade b{font-weight:600;color:#F7F8FA}

.risk__gorsel{margin:0;border-radius:var(--yaricap);overflow:hidden;
  border:1px solid rgba(242,243,245,.14)}
.risk__gorsel img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}

.risk__kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--b4);margin-block-start:var(--b16)}
.risk__kart{position:relative;padding:var(--b6);background:var(--karbon-yuzey);
  border:1px solid rgba(242,243,245,.12);border-radius:var(--yaricap);
  transition:border-color 320ms var(--egri),background 320ms var(--egri),
             transform 320ms var(--egri)}
.risk__kart:hover{border-color:rgba(242,243,245,.28);
  background:color-mix(in srgb,var(--karbon-yuzey) 70%,var(--mavi) 8%);
  transform:translateY(-4px)}
.risk__ikon{display:grid;place-items:center;width:38px;height:38px;
  margin-block-end:var(--b4);border-radius:var(--yaricap);
  color:var(--mavi-isik);background:color-mix(in srgb,var(--mavi) 18%,transparent);
  transition:color 320ms var(--egri),background 320ms var(--egri),
             transform 420ms var(--egri)}
.risk__ikon svg{width:20px;height:20px}
.risk__kart:hover .risk__ikon{transform:translateY(-2px) scale(1.06);
  background:color-mix(in srgb,var(--mavi) 30%,transparent)}
.risk__kart h3{font-size:1.0625rem;margin-block-end:var(--b2);color:#F7F8FA}
/* Alt metin onceden okunmuyordu: rengi ve satir araligi acildi. */
.risk__kart p{font-size:.9375rem;line-height:1.6;color:rgba(242,243,245,.7)}

.risk__kart--kor h3{color:var(--kor)}
.risk__kart--kor .risk__ikon{color:var(--kor);
  background:color-mix(in srgb,var(--kor) 16%,transparent)}
.risk__kart--kor:hover .risk__ikon{
  background:color-mix(in srgb,var(--kor) 28%,transparent)}
.risk__kart--kor::before,.risk__kart--kor::after{content:"";position:absolute;
  width:16px;height:16px;border:2px solid var(--kor)}
.risk__kart--kor::before{inset-block-start:-1px;inset-inline-start:-1px;
  border-inline-end:0;border-block-end:0}
.risk__kart--kor::after{inset-block-end:-1px;inset-inline-end:-1px;
  border-inline-start:0;border-block-start:0}

@media (max-width:1024px){
  .risk__ic{grid-template-columns:1fr}
  .risk__gorsel{display:none}
  .risk__kartlar{grid-template-columns:1fr}
}

/* ================= Sahne 03 — Dönüm ================= */
.donum{position:relative;display:grid;place-items:center;min-height:78svh;
  overflow:hidden;background:var(--karbon)}
.donum__zemin{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.22;filter:grayscale(.4) contrast(1.1);
  will-change:transform}
.donum::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,
    transparent 0%,rgba(10,11,14,.72) 68%,rgba(10,11,14,.94) 100%)}
.donum__ic{position:relative;z-index:1;text-align:center}
.donum__metin{margin:0;font-size:clamp(2.25rem,5.4vw,5rem);font-weight:900;
  line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
/* Her kelime kendi maskesinde: alttan yukari acilir, ust uste binme olmaz */
.donum__kelime{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-inline-end:.22em}
.donum__kelime > span{display:inline-block}
.donum__kelime--vurgu > span{color:var(--mavi-isik)}
.donum__alt{max-width:52ch;margin:var(--b8) auto 0;
  font-size:1.0625rem;color:var(--duman)}

@media (prefers-reduced-motion:reduce){
  .donum__zemin{transform:none!important}
  .donum__kelime > span{transform:none!important}
}

/* ================= Sahne 04 — Yöntem ================= */
/* Sekme kaldirildi: iki akis ayni anda gorunur. Uc mavi cizgi de kaldirildi. */
.yontem__ust{max-width:52ch;margin-block-end:var(--b16)}
.yontem__ust h2{margin-block-end:var(--b4)}
.yontem__ust p{color:var(--metin-ikincil);font-size:1.0625rem}

.yontem__akislar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--b16)}
.akis-kolon__baslik{font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--aksan);
  padding-block-end:var(--b4);margin-block-end:var(--b8);
  border-block-end:1px solid var(--cizgi)}

.akis-liste{list-style:none;padding:0;margin:0;display:grid;gap:var(--b8)}
.akis-adim{position:relative;display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-areas:"ikon no" "ikon baslik" "ikon metin";
  column-gap:var(--b4);row-gap:2px;align-items:start}
/* Adimlari birbirine baglayan dikey cizgi */
.akis-adim::before{content:"";position:absolute;grid-area:ikon;
  inset-block-start:44px;inset-block-end:calc(var(--b8) * -1);
  inset-inline-start:21px;width:1px;background:var(--cizgi)}
.akis-adim:last-child::before{display:none}

.akis-adim__ikon{grid-area:ikon;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--aksan);background:color-mix(in srgb,var(--aksan) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--aksan) 26%,transparent);
  transition:background 320ms var(--egri),transform 420ms var(--egri)}
.akis-adim__ikon svg{width:20px;height:20px}
.akis-adim:hover .akis-adim__ikon{transform:scale(1.08);
  background:color-mix(in srgb,var(--aksan) 20%,transparent)}
.akis-adim__no{grid-area:no;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;color:var(--metin-ikincil)}
.akis-adim h4{grid-area:baslik;font-size:1.125rem;font-weight:600;
  line-height:1.25;letter-spacing:-.015em;margin:0}
.akis-adim p{grid-area:metin;margin-block-start:var(--b2);
  font-size:.9375rem;line-height:1.6;color:var(--metin-ikincil);max-width:42ch}

@media (max-width:900px){
  .yontem__akislar{grid-template-columns:1fr;gap:var(--b12)}
}

/* ================= Sahne 05 — Hizmetler ================= */
/* Ana baslik sabit kalir; alt basliklar ve hizmetler altindan kayar.
   Sagdaki onizleme hem kaydirmaya hem hover'a gore degisir. */
/* align-items:start HATALIYDI: yan sutunlarin yuksekligini kendi
   iceriklerine esitliyor, boylece sticky ogenin kayacak alani kalmiyor
   ve baslik normal akista kayip gidiyordu. Sutunlar orta sutun kadar
   uzuyor (stretch), sabitleme onlarin ICINDE yapiliyor. */
.hizmetler__ic{display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr) minmax(0,.78fr);
  gap:var(--b12);align-items:stretch}
/* Sabit blok mumkun oldugunca KISA tutulur: ne kadar uzun olursa
   sticky o kadar erken birakir (kap yuksekligi - blok yuksekligi kadar
   yol vardir). Butonlar yan yana, metin dar. */
.hizmetler__sabit{position:sticky;inset-block-start:120px}
.hizmetler__sabit h2{font-size:clamp(1.75rem,2.4vw,2.5rem);
  margin-block-end:var(--b3)}
.hizmetler__sabit p{color:var(--metin-ikincil);max-width:30ch;
  font-size:.9375rem}
.hizmetler__eylem{display:flex;flex-wrap:wrap;gap:var(--b2);
  margin-block-start:var(--b6)}
.hizmetler__eylem .dugme{padding:.6em 1em;font-size:.8125rem}

/* Alt bosluk yan sutunlari uzatir; boylece sabit blok listenin SONUNA
   kadar tutar. Sticky, kapsayicisinin alt kenari gelince birakir. */
.hizmetler__orta{padding-block-end:clamp(180px,22vh,260px)}
.hizmetler__orta h3{font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--metin-ikincil);
  margin-block:var(--b12) var(--b4)}
.hizmetler__orta h3:first-of-type{margin-block-start:0}
.hizmetler__orta ul{list-style:none;padding:0;margin:0}
.hizmetler__satir{display:flex;align-items:baseline;gap:var(--b4);
  padding:.78em 0;border-block-end:1px solid var(--cizgi);
  font-size:1.0625rem;font-weight:600;
  transition:color var(--s-mikro) var(--egri),
             padding-inline-start 320ms var(--egri)}
.hizmetler__satir span{font-size:.6875rem;font-weight:500;
  letter-spacing:.06em;color:var(--metin-ikincil);flex:none}
.hizmetler__satir em{margin-inline-start:auto;font-style:normal;opacity:0;
  transition:opacity var(--s-mikro) var(--egri)}
.hizmetler__satir:hover,.hizmetler__satir:focus-visible,
.hizmetler__satir.aktif{color:var(--aksan);padding-inline-start:var(--b3)}
.hizmetler__satir:hover em,.hizmetler__satir:focus-visible em{opacity:1}
.hizmetler__grup{margin-block:var(--b8) var(--b2);font-size:.75rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--metin-ikincil)}

.hizmetler__onizleme{position:sticky;inset-block-start:120px;
  border-radius:var(--yaricap);overflow:hidden;background:var(--yuzey);
  border:1px solid var(--cizgi)}
.hizmetler__sag{min-width:0}
.hizmetler__onizleme img{width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;transition:opacity 140ms linear}
.hizmetler__onizleme img.degisiyor{opacity:0}

@media (max-width:1100px){
  .hizmetler__ic{grid-template-columns:1fr}
  .hizmetler__sabit{position:static}
  .hizmetler__sag{display:none}
}

/* ================= Sahne 06 — Sektörler ================= */
/* ScrollTrigger pin KALDIRILDI. Pin-spacer bolumden cok daha uzun oluyor,
   bu da bitiste bos beyaz alana, bolumun tekrar etmesine ve sabit
   kalmasina yol aciyordu. Yerine native position:sticky kullaniliyor:
   spacer yok, tekrar yok. Bolum yuksekligi = 1 ekran + rayin alacagi yol,
   boylece kartlar 1:1 hizda (okunabilir sekilde) akiyor. */
.sektorler{padding-block:0;position:relative;
  height:calc(100svh + var(--yol,1600px))}
/* grid-template-columns:minmax(0,1fr) SART: icerideki ray 3120px genis
   oldugu icin sutun icerige gore buyuyor, ortalanan baslik 840px saga
   kayip tasiyordu. Sutun artik kapsayiciyi asamaz. */
.sektorler__yapiskan{position:sticky;inset-block-start:0;height:100svh;
  overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);align-content:center;
  gap:clamp(20px,3.5vh,40px)}
.sektorler__baslik{padding-block-start:clamp(96px,12vh,140px)}
.sektorler__baslik h2{margin-block-end:var(--b3)}
.sektorler__baslik p{color:var(--duman);max-width:52ch}

.sektorler__pencere{min-width:0;min-height:0;overflow:hidden;
  padding-block-end:clamp(20px,4vh,48px)}
.sektorler__ray{display:flex;gap:var(--b4);height:100%;
  padding-inline:clamp(20px,5vw,64px);will-change:transform}
.sektorler__ray.serbest{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.sektorler__ray.serbest::-webkit-scrollbar{display:none}
.sektorler__ray.serbest .sektor-kart{scroll-snap-align:start}

/* Metin ustte ve one cikar; gorsel kartin alt yarisini doldurur. */
.sektor-kart{flex:none;width:clamp(280px,25vw,360px);height:100%;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--karbon-yuzey);border:1px solid rgba(242,243,245,.12);
  border-radius:var(--yaricap);overflow:hidden;
  transition:border-color 320ms var(--egri)}
.sektor-kart:hover{border-color:rgba(242,243,245,.3)}
.sektor-kart__metin{padding:var(--b6) var(--b6) var(--b4)}
.sektor-kart__metin h3{font-size:1.375rem;font-weight:700;line-height:1.15;
  letter-spacing:-.02em;color:#F7F8FA;margin-block-end:var(--b3)}
.sektor-kart__metin p{font-size:.9375rem;line-height:1.6;
  color:rgba(242,243,245,.76)}
.sektor-kart__gorsel{position:relative;min-height:0;overflow:hidden}
.sektor-kart__gorsel img{width:100%;height:100%;object-fit:cover;
  transition:transform 620ms var(--egri)}
.sektor-kart:hover .sektor-kart__gorsel img{transform:scale(1.06)}

@media (max-width:900px){
  .sektorler{height:auto}
  .sektorler__yapiskan{position:static;height:auto;
    padding-block:var(--b24)}
  .sektor-kart{height:auto;width:min(78vw,320px)}
  .sektor-kart__gorsel{aspect-ratio:4/3}
}

/* ================= Sahne 07 — 1988 Miras ================= */
/* Sitedeki TEK serif kullanımı bu sahnededir (bkz. şartname 3.4). */
.miras{position:relative;overflow:hidden;text-align:center}
.miras__doku{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.08}
.miras__ic{position:relative;display:grid;gap:var(--b6);justify-items:center}
.miras__yil{font-size:clamp(6rem,20vw,17rem);font-weight:500;line-height:.86;
  letter-spacing:-.05em;color:#F2F3F5;margin:0}
.miras__soz{font-size:clamp(1.5rem,3vw,2.75rem);max-width:20ch;
  color:var(--mavi-isik);margin:0}

/* ================= Sahne 08 — Rakamlar ================= */
/* Mono font kaldirildi. Sayilar ana fontta, cok buyuk ve ince aralikli;
   altlarinda kucuk kapital etiket. */
.rakamlar__izgara{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--b8) var(--b12);margin-block-start:var(--b12);
  border-block-start:1px solid var(--cizgi);padding-block-start:var(--b12)}
.rakamlar__oge{padding:0;background:none;border:0}
.rakamlar__deger{font-size:clamp(2.75rem,5vw,4.5rem);font-weight:700;
  line-height:.94;letter-spacing:-.045em;color:var(--metin);
  font-variant-numeric:tabular-nums;margin:0}
.rakamlar__oge dt{margin-block-start:var(--b3);font-size:.75rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-ikincil)}

/* ================= Sahne 09 — Neden Akkent ================= */
/* Akordeon alta degil SAGA acilir: solda kutucuk listesi, sagda genis
   panelde baslik + metin + gorsel. Biri acilinca digeri kapanir. */
.neden__ust{max-width:52ch;margin-block-end:var(--b12)}
.neden__ust h2{margin-block-end:var(--b3)}
.neden__ust p{color:var(--metin-ikincil)}

.neden__ic{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--b8);align-items:start}
.neden__liste{list-style:none;padding:0;margin:0;display:grid;gap:var(--b2)}
.neden__dugme{display:flex;align-items:center;gap:var(--b4);width:100%;
  padding:var(--b4) var(--b5,18px);background:none;cursor:pointer;
  border:1px solid var(--cizgi);border-radius:var(--yaricap);
  text-align:start;color:var(--metin);
  transition:border-color 280ms var(--egri),background 280ms var(--egri),
             transform 280ms var(--egri)}
.neden__dugme:hover{border-color:color-mix(in srgb,var(--aksan) 45%,transparent);
  transform:translateX(3px)}
.neden__dugme[aria-expanded="true"]{border-color:var(--aksan);
  background:color-mix(in srgb,var(--aksan) 7%,transparent)}
.neden__ikon{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;color:var(--aksan);
  background:color-mix(in srgb,var(--aksan) 12%,transparent);
  transition:transform 420ms var(--egri),background 280ms var(--egri)}
.neden__ikon svg{width:19px;height:19px}
.neden__dugme:hover .neden__ikon{transform:rotate(-8deg) scale(1.08)}
.neden__dugme[aria-expanded="true"] .neden__ikon{
  background:color-mix(in srgb,var(--aksan) 22%,transparent);
  transform:scale(1.06)}
.neden__ad{font-size:1.0625rem;font-weight:600;line-height:1.25}
.neden__ok{margin-inline-start:auto;opacity:0;color:var(--aksan);
  transition:opacity 280ms var(--egri),transform 280ms var(--egri)}
.neden__dugme:hover .neden__ok,
.neden__dugme[aria-expanded="true"] .neden__ok{opacity:1;transform:translateX(3px)}

.neden__paneller{position:relative;min-height:340px}
.neden__panel{display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--b6);
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--yaricap);overflow:hidden}
.neden__panel[hidden]{display:none}
.neden__panel-metin{padding:var(--b8) var(--b8) 0}
.neden__panel-metin h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  margin-block-end:var(--b3)}
.neden__panel-metin p{color:var(--metin-ikincil);max-width:48ch}
.neden__panel-gorsel{overflow:hidden;aspect-ratio:16/7}
.neden__panel-gorsel img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .neden__ic{grid-template-columns:1fr}
  .neden__paneller{min-height:0}
}

/* ================= Sahne 10 — Kapanış ================= */
.kapanis__ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--b16);align-items:start}
.kapanis__sol h2{max-width:16ch}
.kapanis__ozet{max-width:40ch;color:var(--duman);margin-block:var(--b4) var(--b12)}

/* Cirtlak mavi linkler yerine sakin bir olcut serisi */
.kapanis__olcut{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--b6) var(--b8);
  border-block-start:1px solid var(--cizgi);padding-block-start:var(--b8)}
.kapanis__olcut li{display:grid;gap:2px}
.kapanis__olcut strong{font-size:1.375rem;font-weight:700;
  letter-spacing:-.02em;color:#F7F8FA}
.kapanis__olcut span{font-size:.75rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--duman)}

.kapanis__dogrudan{display:flex;flex-wrap:wrap;gap:var(--b2) var(--b6);
  margin-block-start:var(--b8);padding-block-start:var(--b6);
  border-block-start:1px solid var(--cizgi);font-size:.9375rem}
.kapanis__dogrudan a{color:rgba(242,243,245,.82);
  transition:color var(--s-mikro) var(--egri)}
.kapanis__dogrudan a:hover{color:#F7F8FA}

@media (max-width:900px){.kapanis__ic{grid-template-columns:1fr}}

/* ================= Referans alanı ================= */
/* Logolar gelene kadar gri kutular yer tutar; geldiginde ayni kutulara
   <img> konur, mizanpaj degismez. */
.referans__ust{max-width:52ch;margin-block-end:var(--b12)}
.referans__ust h2{margin-block-end:var(--b3)}
.referans__ust p{color:var(--metin-ikincil)}
.referans__izgara{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--cizgi);border:1px solid var(--cizgi)}
.referans__kutu{aspect-ratio:16/7;background:var(--zemin);
  display:grid;place-items:center;position:relative;
  transition:background 320ms var(--egri)}
.referans__kutu::after{content:"";width:52%;height:34%;border-radius:3px;
  background:color-mix(in srgb,var(--metin) 12%,transparent);
  transition:background 320ms var(--egri)}
.referans__kutu:hover::after{background:color-mix(in srgb,var(--metin) 20%,transparent)}
.referans__kutu img{width:64%;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter 320ms var(--egri),opacity 320ms var(--egri)}
.referans__kutu:has(img)::after{display:none}
.referans__kutu:hover img{filter:none;opacity:1}
.referans__not{margin-block-start:var(--b6);font-size:var(--t-kucuk);
  color:var(--metin-ikincil)}

/* ================= Dip bandi ================= */
/* alan-3'un siyahi biraz asagi uzar ve marka filigraninin ALT
   cizgisinde biter: alt ic bosluk yok. overflow da acildi, yoksa
   logonun golgesi kirpilirdi. Gorsel tuval genisliginde (1440x171)
   ve alttan kirpilmis geldigi icin oldugu gibi kullanilir. */
.dip{background:#212121;padding-block:clamp(32px,5vh,64px) 0}
.dip__cerceve{position:relative;display:block}
.dip__logo{display:block;width:100%;height:auto;max-width:none;opacity:.18}
/* Siyah alanin bittigini vurgulayan golge. Tasarimda dikey Linear:
   alt uçta #000 %100 -> ust uçta %0, dolgu opakligi %30. Yani
   drop-shadow degil, logonun uzerine binen ve asagi dogru
   koyulasan bir katman; rampa logonun alt ~%38'inde basliyor. */
.dip__cerceve::after{content:'';position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 62%, rgba(0,0,0,.3) 100%)}

/* alan-3 + dip birlikte YAPISIR: alt kenari ekranin altina gelince
   durur, alan-4 uzerine kayar.
   "bottom:0" DEGIL: o, dogal yeri ekranin altinda kalan bir kutuyu
   yukari CEKER; zaten gecmis bir kutuyu tutmaz. Ekrandan uzun bir
   blogu alt kenarinda durdurmak icin NEGATIF top gerekir:
   100svh - blok yuksekligi. Yukseklik ekrana gore degistigi icin
   alan3.js her olcumde --yap-y'yi gunceller. */
.yapisan{position:sticky;z-index:2;
  inset-block-start:min(0px,calc(100svh - var(--yap-y,100svh)))}

/* ================= Alan 4 — Hizmetler (Desktop-7) =================
   Tuval 1440x2048. Izgara: 4 sutun x 306.67, bosluk 13, kart
   yuksekligi 196.89, kose 10. Izgaranin sol kenari 87 = kenar + 48;
   baslik bloklari 82 = kenar + 43 (tasarimda 5px farkli duruyor).
   Kategori kutulari ve kartlarin hover mavisi ayni degrade:
   Figma'da Linear, %48 #0A49E2 -> %100 #0639B3. */
.alan4{position:relative;z-index:3;background:var(--beyaz);
  padding-block:92.5px 104px;
  --a4-kenar:calc(max(0px,(100% - var(--kapsayici)) / 2)
              + clamp(16px,2.71vw,39px));
  --a4-mavi:linear-gradient(59deg,#0A49E2 0%,#0A49E2 48%,#0639B3 100%);
  --a4-kart-y:196.89px}

.alan4__baslik{margin:0;
  margin-inline-start:calc(var(--a4-kenar) + 43px);
  font-family:var(--f-header);font-size:45.03px;font-weight:400;
  line-height:50.9px;letter-spacing:-.9006px;color:#000}
.alan4__baslik-mavi{font-weight:700;color:var(--mavi)}
.alan4__alt{margin:18.2px 0 0;
  margin-inline-start:calc(var(--a4-kenar) + 43px);
  font-family:var(--f-header);font-size:25px;font-weight:400;
  line-height:25px;letter-spacing:-.5px;color:#000}

/* width:max-content: izgara blok seviyesinde oldugu icin kutusu tum
   genisligi kaplardi; ayirici cizgi de o kadar uzardi. max-content ile
   kutu tam olarak 4 sutun + 3 bosluk = 1265.68px oluyor, yani
   kutucuklarin toplam genisligi. */
.alan4__grup{display:grid;grid-template-columns:repeat(4,306.67px);
  gap:13px;width:max-content;
  margin-inline-start:calc(var(--a4-kenar) + 48px)}
.alan4__alt + .alan4__grup{margin-block-start:53.5px}
/* Gruplar arasindaki 111.33px'lik bosluk ikiye bolunur ve tam ortasina
   ayirici cizgi oturur: 54.665 + 2 + 54.665. Boylece gruplarin
   tuvaldeki dikey konumu (291 / 1019 / 1747) degismez. */
.alan4__grup + .alan4__grup{
  margin-block-start:54.665px;padding-block-start:54.665px;
  border-block-start:2px solid #E0E0E0}

.alan4__kategori,.alan4__hizmet,.alan4__foto,.alan4__lacivert{
  position:relative;margin:0;height:var(--a4-kart-y);
  border-radius:10px;overflow:hidden}

/* --- Kategori kutusu (lacivert) --- */
.alan4__kategori{display:block;text-decoration:none;background:var(--a4-mavi)}
/* Tuvalde iki hucre yalnizca lacivert: ad da buton da yok.
   (PDF'te bu iki yerlesim xref=0, yani kategori kutulariyla ayni
   rasterlenmis degrade; fotograf degil.) */
.alan4__lacivert{display:block;background:var(--a4-mavi)}
.alan4__kat-ad{position:absolute;margin:0;
  inset-inline-start:17px;inset-block-end:25.2px;max-width:272.67px;
  font-family:var(--f-header);font-size:26px;font-weight:500;
  line-height:33.54px;letter-spacing:-.52px;color:var(--beyaz);
  text-decoration:none}
/* Alt cizgiler SOLDAN SAGA acilir. text-decoration bunu yapamaz
   (yalnizca rengi canlandirilabilir, o da sonme/belirme olur), bu
   yuzden cizgi satir ici kutunun arka plan degradesi olarak cizilip
   genisligi 0'dan %100'e goturuluyor.
   Her SATIR ayri bir span: tek span + box-decoration-break ile iki
   cizgi ayni anda acilirdi; ayri span'lar her satira kendi
   gecikmesini vermeyi saglar (header'daki kelime kaymasiyla ayni
   adim: 70ms). */
.alan4__kat-cizgi{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 2px;
  /* Cizgi, kendi satirinin taban cizgisinin 4px altina oturur; bir
     alttaki satirin harf ustune 7.4px kalir, boylece hangi satira ait
     oldugu net olur. Satir ici padding satir yuksekligini
     degistirmedigi icin yerlesim kaymaz. */
  padding-block-end:3.8px;
  transition:background-size 420ms var(--egri-yumusak);
  transition-delay:calc(var(--i,0) * 70ms)}
.alan4__kategori:hover .alan4__kat-cizgi,
.alan4__kategori:focus-visible .alan4__kat-cizgi{background-size:100% 2px}
/* Sag ustte 40'lik yuvarlak buton, 10 ic pay. Fare kutuya gelince
   50'ye buyur ve koyulasir; olcek SAG UST kosede sabit kalacak
   sekilde buyusun diye transform-origin oraya alindi (buton konumu
   degil, yalnizca boyu degisiyor gibi gorunur). */
.alan4__ok{position:absolute;inset-block-start:10px;inset-inline-end:10.7px;
  width:40px;height:40px;border-radius:50%;color:var(--beyaz);
  background:rgba(255,255,255,.2);
  display:grid;place-items:center;
  transform-origin:100% 0;
  transition:transform 340ms var(--egri-yumusak),
             background-color 340ms var(--egri-standart)}
.alan4__kategori:hover .alan4__ok,
.alan4__kategori:focus-visible .alan4__ok{
  transform:scale(1.25);background:rgba(0,0,0,.4)}
.alan4__okik{width:16.5px;height:16.5px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:square;stroke-linejoin:miter}
.alan4__okik path{vector-effect:non-scaling-stroke}
/* Buton icindeki ok duz (->), kategori butonundaki capraz (nw). */
.alan4__okik--duz{width:17px;height:17px}

/* --- Fotograf kutusu --- */
.alan4__foto img{width:100%;height:100%;object-fit:cover}

/* --- Hizmet kutusu: gri -> mavi ---
   Degradeler gecisle canlandirilamaz; bu yuzden mavi zemin ayri bir
   katman olarak duruyor ve yalnizca opakligi degisiyor. Ad kartin
   altindan ustune kayar, buton alttan acilir. */
.alan4__hizmet{display:block;text-decoration:none;background:#D9D9D9}
.alan4__zemin{position:absolute;inset:0;background:var(--a4-mavi);
  opacity:0;transition:opacity 420ms var(--egri-standart)}
.alan4__ad{position:absolute;margin:0;
  inset-inline:17px 17px;inset-block-start:23px;
  font-family:var(--f-header);font-size:23px;font-weight:400;
  line-height:30.82px;letter-spacing:-.46px;color:#000;
  transform:translateY(calc(var(--a4-kart-y) - 46px - 100%));
  transition:transform 420ms var(--egri-standart),
             color 420ms var(--egri-standart)}
/* Cerceve tek parca, butonun uzerinde: 2px beyaz. Ok hucresi yalnizca
   ayirici cizgisini tasir ve fare butona gelince ici #2563F8 ile
   dolar. (Oval hap denemesi geri alindi.) */
.alan4__buton{position:absolute;inset-inline:17px 19px;inset-block-end:21.6px;
  height:40.6px;display:grid;grid-template-columns:1fr var(--a4-ok-gen);
  --a4-ok-gen:62.2px;
  border:2px solid var(--beyaz);
  opacity:0;transform:translateY(10px);
  transition:opacity 380ms var(--egri-standart) 60ms,
             transform 380ms var(--egri-standart) 60ms}
.alan4__buton-yazi{display:flex;align-items:center;padding-inline-start:12px;
  font-family:var(--f-header);font-size:13.38px;font-weight:400;
  letter-spacing:.134px;color:var(--beyaz)}
/* Buton okunun UCUNCU hali: fare butonun uzerine gelince ok hucresinin
   ici #2563F8 ile dolar ve ikon -header ile alan-3'teki kayan yazi ile
   ayni teknik- saga kayar; ustteki kopya sagdan cikarken alttaki
   soldan girer. Kose/oval degisimi yok. */
.alan4__buton-ok{position:relative;display:grid;place-items:center;
  border-inline-start:2px solid var(--beyaz);color:var(--beyaz);
  background:transparent;
  --ikon:17px;--ikon-ara:12px;
  --ikon-yol:calc(var(--ikon) + var(--ikon-ara));
  transition:background-color 280ms var(--egri-standart)}
.alan4__buton-ok .kayan{position:relative;z-index:1;display:block;
  width:var(--ikon);height:var(--ikon);overflow:hidden}
.alan4__buton-ok .kayan__ic{display:flex;gap:var(--ikon-ara);width:max-content;
  transform:translateX(calc(var(--ikon-yol) * -1));
  transition:transform 340ms var(--egri-yumusak)}
.alan4__buton-ok .kayan__ic > svg{flex:none}

.alan4__buton:hover .alan4__buton-ok{background:#2563F8}
.alan4__buton:hover .alan4__buton-ok .kayan__ic{transform:translateX(0)}

.alan4__hizmet:hover .alan4__zemin,
.alan4__hizmet:focus-visible .alan4__zemin{opacity:1}
.alan4__hizmet:hover .alan4__ad,
.alan4__hizmet:focus-visible .alan4__ad{transform:none;color:var(--beyaz)}
.alan4__hizmet:hover .alan4__buton,
.alan4__hizmet:focus-visible .alan4__buton{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .alan4__zemin,.alan4__ad,.alan4__buton,
  .alan4__buton-ok,.alan4__buton-ok .kayan__ic,
  .alan4__kat-cizgi,.alan4__ok{transition:none}
}