/* ============================================================
   MOBIL / RESPONSIVE
   Masaustu tasarimi (>= 1101px) HIC DEGISMEZ. Butun kurallar
   yalnizca kirilimlarin icinde. Iki kirilim var:
     <= 1100px  tablet   : cok sutunlu izgaralar 2'ye iner,
                          sabit genislikler akiskana doner
     <=  680px  telefon  : tek sutun, kuculmus tipografi
   Bolumlerin cogu mutlak konumlu ve sabit yukseklikliydi; mobilde
   akisa (static) alinip yuksekligi icerige birakiliyor.
   ============================================================ */

/* ---------- Ortak: yatay tasmayi kes ---------- */
@media (max-width:1100px){
  /* Acilis sahnesi (s1): mobil tam ekranda gorunen pencere kaynagin
     yalnizca %26'si. %62 iken %46-72 arasi geliyor ve bacalar disarida
     kaliyordu. Olculen konumlar: kisa baca %31-37, uzun baca %43-50,
     teknisyenler %49-66. %55 -> pencere %41-67: uzun baca ve iki
     teknisyen birlikte kadraja giriyor. Masaustunde kirpma cok az
     oldugu icin oraya dokunulmadi. */
  .hero__video[data-bolum="1"]{object-position:55% center}

  /* --- WhatsApp: mobilde alan-3 GECILDIKTEN sonra ve kosede --- */
  /* Masaustundeki 'wa-acik' (alan-2) mobilde erken kaliyordu ve buton
     icerigin uzerinde havada duruyordu. */
  html.wa-acik .wa-kok{opacity:0;transform:translateY(24px) scale(.9);pointer-events:none}
  html.wa-gecti .wa-kok{opacity:1;transform:none;pointer-events:auto}
  .wa-kok{
    /* Kose bosluklari kisaldi: buton ekranin sag alt kosesine oturur. */
    inset-block-end:calc(14px + env(safe-area-inset-bottom,0px));
    inset-inline-end:14px;
  }
  .wa{width:52px;height:52px}
  .wa svg{width:26px;height:26px}
  /* Dikey pay masaustu kompozisyonu icindir; mobilde bolumler normal
     akista, uzun telefonlarda (100svh>877) gereksiz bosluk acardi. */
  :root{--dikey-pay:0px}
  html,body{overflow-x:hidden}
}

/* ============================================================
   HEADER — mobil menu
   ============================================================ */
.ust__acar{display:none}
/* Masaustunde sarmalayicilar seffaftir: nav, telefon ve teklif
   dogrudan .ust__kart'in flex ogeleri olarak kalir. */
.ust__panel,.ust__panel-ic,.ust__eylem{display:contents}

@media (max-width:1100px){
  .ust__kart{padding-inline:18px 12px;position:relative;height:64px}

  /* Logo masaustunde 263px; dar ekranda cubugun %73'unu kapliyordu. */
  .marka__kutu{--gen:168px}

  /* --- Hamburger: iki cizgi, sade bir X'e doner --- */
  .ust__acar{
    display:grid;
    align-content:center;
    justify-items:end;
    gap:6px;
    width:44px;height:44px;
    margin-inline-start:auto;
    padding:0;
    background:none;border:0;cursor:pointer;
    pointer-events:auto;
  }
  .ust__acar-cizgi{
    display:block;width:22px;height:1.5px;
    background:var(--beyaz);
    transition:transform 240ms var(--egri-standart),
               opacity 160ms var(--egri-standart);
  }
  /* Ucuncu cizgi kaldirildi: iki cizgi hem daha sade hem X'e
     donusurken daha temiz. */
  .ust__acar-cizgi:nth-child(3){display:none}
  .ust[data-acik="1"] .ust__acar-cizgi:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .ust[data-acik="1"] .ust__acar-cizgi:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

  /* --- Panel --- */
  .ust__panel{
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    display:block;
    background:var(--mavi);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity 220ms var(--egri-standart),
               transform 260ms var(--egri-standart),
               visibility 0s linear 260ms;
  }
  .ust[data-acik="1"] .ust__panel{
    opacity:1;visibility:visible;transform:none;
    pointer-events:auto;transition-delay:0s;
  }
  .ust__panel-ic{display:block}
  .ust__nav{
    display:block;
    padding:0 20px;
    margin-inline-start:0;align-self:auto;gap:0;
    /* Panelin ust cizgisi: baslik cubugu ile menuyu ayirir (ikisi de
       ayni mavi oldugu icin sinir aksi halde belirsiz kaliyor). */
    border-block-start:1px solid rgba(254,254,254,.20);
  }
  .ust__eylem{
    /* Kare telefon dugmesi + kalani dolduran Teklif Al. */
    display:grid;grid-template-columns:auto 1fr;gap:12px;
    align-items:center;
    padding:19px 20px 20px;
  }

  /* Ana kategori ve alt kategorileri TEK grup: cizgi grubun altina
     gelir, "Hizmetlerimiz" ile alt maddeleri arasina degil. */
  .ust__menu{
    display:block;
    border-block-end:1px solid rgba(254,254,254,.20);
  }
  .ust__oge{
    display:block;
    /* Satir yuksekligi ACIK verilir: verilmediginde metnin murekkebi
       kendi kutusunun disina tasiyor ve dolgular kagitta esit olsa bile
       gozde dengesiz duruyordu. */
    line-height:1.3;
    /* Dolgular OLCULEREK dengelendi: her cizginin ustunde ve
       altinda metne 17px kaliyor (bkz. asagidaki degerler). */
    padding-block:18px 17px;
    /* Ana kategoriler: daha belirgin. */
    font-size:17px;font-weight:600;
    letter-spacing:.1px;
    border-block-end:1px solid rgba(254,254,254,.20);
  }
  /* Grup icindeki baslik kendi cizgisini tasimaz; cizgi .ust__menu'de.
     Alt bosluk daha dar: baslik ile alt maddeleri TEK grup okunmali. */
  /* Alt bosluk, alt maddelerin kendi ust dolgusuyla ayni: referansta
     baslik->ilk madde ile madde->madde araligi esit. */
  .ust__menu > .ust__oge{border-block-end:0;padding-block:17px 9px}
  /* Alt kategoriler: girinti ve sol cizgi yok, ana baslikla ayni
     sol hizada; ayrim punto ve kalinliktan geliyor. */
  .ust__acilir{
    position:static;
    display:block;
    clip-path:none;
    opacity:1;visibility:visible;transform:none;
    pointer-events:auto;
    width:auto;min-width:0;
    /* Alt dolgu, son maddenin kendi dolgusuyla birlikte cizgiye kadar
       olan payi diger cizgilerdekiyle esitler. */
    padding:0 0 8px;
    margin:0;
    background:none;box-shadow:none;border:0;
  }
  .ust__alt{
    display:block;
    /* Masaustunde height:25.01px sabitti; mobilde kutu metne uymali,
       yoksa metin kutusunun disina tasip dolgulari gecersiz kiliyor. */
    height:auto;
    line-height:1.3;
    padding-block:7px;
    opacity:1;
  }
  /* Gorunen metin bu span'de: masaustunde 13px/500 ve nowrap.
     Mobilde ana kategorilerle ayni aile, ince kesim. */
  .ust__alt-ad{
    font-family:var(--f-header);
    font-size:15px;font-weight:300;
    letter-spacing:.1px;
    white-space:normal;
  }
  .ust__ok{display:none}

  /* --- Alt eylemler: kare telefon + genis Teklif Al --- */
  .ust__tel{
    width:52px;height:52px;
    margin:0;padding:0;gap:0;
    display:grid;place-items:center;
    border-radius:10px;
    /* Numara mobilde gizli; dokununca zaten arama aciliyor ve
       aria-label numarayi okuyor. */
    background:#2563F8;
    border:1px solid rgba(254,254,254,.55);
  }
  .ust__tel-ik{
    width:auto;height:auto;margin:0;
    background:none;border-radius:0;
    /* Ikonun cevresindeki kare kontur kaldirildi; disaridaki buton
       kutusu zaten cerceveyi veriyor. */
    border:0;
  }
  .ust__tel-ik svg{width:19px;height:22px}
  .ust__tel-no{display:none}

  .ust__teklif{
    width:100%;height:52px;margin:0;
    display:grid;place-items:center;
    border-radius:10px;font-size:16px;font-weight:600;
  }
}

@media (max-width:680px){
  .ust__kart{height:60px}
  .marka__kutu{--gen:150px}
  /* Kare telefon + genis Teklif Al duzeni dar ekranda da korunur. */
}

/* ============================================================
   YUKLEME EKRANI
   Masaustunde uc sutun (liste | yuzde | marka); dar ekranda
   sigmiyor, satirlar kesiliyordu.
   ============================================================ */
@media (max-width:1100px){
  .yukleme__ic{
    grid-template-columns:1fr;
    row-gap:18px;
    font-size:11.5px;
    line-height:18px;
  }
  .yukleme__dokum{height:calc(18px * 5)}
  .yukleme__liste{transform:translateY(calc(var(--kaydir,0) * -18px))}
  .yukleme__yuzde{justify-self:start}
  .yukleme__marka{justify-self:start;text-align:start;max-width:none}
}
@media (max-width:680px){
  .yukleme__ic{font-size:10.5px;line-height:16px}
  .yukleme__dokum{height:calc(16px * 4)}
  .yukleme__liste{transform:translateY(calc(var(--kaydir,0) * -16px))}
}

/* ============================================================
   ALAN-1 / ALAN-2 — HERO ve VITRIN
   ============================================================ */
@media (max-width:1100px){
  /* Hero metni: masaustu YAPISI ve EFEKTI aynen korunur.
     Onceden mobilde .hero__blok gizlenip arka plan .hero__yazi'ya
     box-decoration-break ile veriliyordu; bu (1) satirlar arasinda
     bosluk birakiyor, (2) ikinci sahnenin ikinci satirini onceki
     satirin kutusu altinda birakip kesik gosteriyor, (3) blogun
     scaleX ile acilma efektini tamamen devre disi birakiyordu.

     Cozum: hicbir sey degistirilmez, YALNIZCA punto kucultulur ki
     her satir TEK satirda kalsin. Olculdu: en uzun satir 100px
     puntoda 1482px; sigdiran punto = (genislik - kenar) / 14.82.
     15.3 boleni kucuk bir guvenlik payi birakir. */
  /* Mobilde 4+3 satir. Satirlar bolundugu icin en uzun satir 100px
     puntoda 1482 -> 1129px'e indi; bolen de 15.3 -> 11.7 olabildi,
     yani ayni genislikte punto belirgin sekilde buyuyor. */
  .hero__satir--mas{display:none}
  .hero__satir--mob{display:block}
  .hero__baslik{
    font-size:clamp(20px, calc((100vw - 40px) / 11.7), 30px);
  }
  .hero__ic{inset-block-end:26px}

  /* --- Vitrin: video kutusu ustte, altinda TEK madde --- */
  .vitrin{
    grid-template-columns:1fr;
    /* Satirlar: video | metin | gosterge.
       Metin satiri UC MADDENIN EN UZUNU kadar sabittir (--vitrin-metin,
       vitrin.js olcer). Sabit oldugu icin video satiri (1fr) her
       hizmette AYNI yuksekligi alir -- ne ziplama olur ne de altta
       bosluk kalir. JS calismazsa auto'ya duser. */
    grid-template-rows:minmax(160px,1fr) var(--vitrin-metin,auto) auto;
    align-content:stretch;
    /* Video kutusu header'a yapismasin. */
    padding-block:96px 24px;
    row-gap:20px;
  }
  .vitrin__yer{
    /* Yukseklik yalnizca EKRANDAN turetilir; icerige bagli degil ki
       hizmet degisince kirpma kaymasin. */
    /* Yukseklik izgara satirindan gelir: metin ve gosterge yerini
       aldiktan sonra KALAN alanin tamami videoya gider. */
    width:100%;height:100%;min-height:0;aspect-ratio:auto;
    justify-self:stretch;
    margin:0;
    order:-1;
  }
  /* Masaustunde panel sabit yukseklikte ve gri zeminli; mobilde
     yalnizca aktif madde gorundugu icin panel icerige uyar ve
     zemin mavi bloga birakilir. */
  .vitrin__liste{padding:0;transform:none;gap:0;height:auto;background:none}
  .vitrin__cizgi{display:none}
  /* Maddeler tek tek: kullanici kaydirdikca video ile birlikte
     yalnizca o maddenin metni gelir. Pasif basliklar mobilde yok. */
  .vitrin__oge{
    display:none;
    /* Masaustundeki 105px ic bosluk ve giris kaydirmasi mobilde gecersiz. */
    padding-inline:20px;
    transform:none;
  }
  .vitrin__oge--aktif{display:grid;padding-block:20px}
  .vitrin__baslik{
    font-size:clamp(1.5rem,6vw,1.75rem);
    line-height:1.12;
    letter-spacing:-.02em;
  }
  /* Mavi blok mobilde de aktif maddenin zemini; olcek animasyonu
     gereksiz, kutu dogrudan gorunur. */
  .vitrin__oge::before{transform:none}
  .vitrin__ek{justify-self:stretch}
  .vitrin__aciklama{font-size:14px;line-height:1.5;margin-block-start:10px;max-width:none}
  .vitrin__buton{margin-block-start:14px}
  /* Adim gostergesi: uc segment, aktif olan marka mavisi. */
  .vitrin__adim{
    display:flex;gap:8px;
    padding-inline:20px;
    /* Esnek satirin ALTINA yaslanir: artan bosluk metin ile gosterge
       arasinda kalir, hicbir sey yerinden oynamaz. */
    align-self:end;
  }
  .vitrin__adim-cizgi{
    flex:1;block-size:3px;
    background:#D1D1D1;
    transition:background-color 300ms var(--egri);
  }
  .vitrin[data-adim="1"] .vitrin__adim-cizgi:nth-child(1),
  .vitrin[data-adim="2"] .vitrin__adim-cizgi:nth-child(2),
  .vitrin[data-adim="3"] .vitrin__adim-cizgi:nth-child(3){background:var(--mavi)}
}
@media (max-width:680px){
  .vitrin{padding-block:88px 24px;row-gap:16px}
  .vitrin__aciklama{font-size:13.5px}
}
/* Kisa ekranlar (or. 360x640, yatay telefon): video + metin 100svh'ye
   sigmiyordu. Paylar ve video yuksekligi birlikte kisilir. */
@media (max-width:1100px) and (max-height:700px){
  .vitrin{padding-block:76px 16px;row-gap:12px}
  .vitrin__oge--aktif{padding-block:14px}
  .vitrin__baslik{font-size:clamp(1.25rem,5vw,1.5rem)}
  .vitrin__aciklama{font-size:13px;line-height:1.45;margin-block-start:8px}
  .vitrin__buton{margin-block-start:10px}
}
/* Yatay telefon (or. 640x360): ekran cok alcak, paylar en aza iner. */
@media (max-width:1100px) and (max-height:430px){
  .vitrin{padding-block:62px 10px;row-gap:8px}
  .vitrin__oge--aktif{padding-block:10px}
}

/* ============================================================
   ALAN-3 — Onleyici bakim
   Mutlak konumlu parcalar akisa alinir.
   ============================================================ */
.alan3__bosluk{display:none}

@media (max-width:1100px){
  /* Siyah alan masaustunde en az bir ekran boyundaydi; mobilde
     icerige gore kisalir. */
  .alan3{min-height:0;padding-block:72px 44px}
  .alan3__ic{position:static}
  .alan3__etiket{
    position:static;
    display:inline-block;
    margin-block-end:16px;
    /* 17.2 -> 12: dar ekranda etiket basliktan daha baskin duruyordu. */
    font-size:12px;
    letter-spacing:.14em;
    padding:4px 8px;
    padding-inline-end:calc(8px - .14em);
  }
  /* Ana metin TEK PARAGRAF: satirlar blok degil satir ici akar,
     aralarindaki bosluk ogesi bosluk verir. */
  .alan3__ana{
    position:static;
    font-size:clamp(17px,4.6vw,21px);
    line-height:1.5;
    letter-spacing:-.2px;
    margin-block-end:24px;
  }
  .alan3__satir{display:inline}
  .alan3__bosluk{display:inline}
  /* Oklar seridin USTUNE binir (JS onlari .alan3__pencere icine tasir):
     metnin altinda dururken parmak menzilinin disinda kaliyordu.
     Kartlar mavi oldugu icin oklar beyaz daire + golge ile ayrisir. */
  /* position:relative SART (oklar buna gore konumlaniyor) ama masaustu
     kuralindaki inset-block-start:374px goreli kaydirma olarak
     uygulanip seridi butonun ALTINA itiyordu; insetler sifirlanir. */
  .alan3__pencere{
    position:relative;
    inset-block-start:auto;inset-block-end:auto;
    inset-inline:auto;
  }
  .alan3__oklar{
    position:absolute;z-index:2;
    inset-block-start:50%;
    inset-inline:10px;
    transform:translateY(-50%);
    margin:0;gap:0;
    justify-content:space-between;
    /* Kutu tiklamayi yutmasin; yalnizca butonlar alsin. */
    pointer-events:none;
  }
  /* Daire ve icindeki ikon TEK olcuden turetilir: ekranla birlikte
     buyuyup kuculurler, oran her genislikte ayni kalir. */
  .alan3__ok{
    pointer-events:auto;
    --ok-boy:clamp(34px,10vw,42px);
    --ikon:calc(var(--ok-boy) * .42);
    --ikon-ara:calc(var(--ok-boy) * .42);
    width:var(--ok-boy);height:var(--ok-boy);
    border:0;border-radius:50%;
    background:rgba(254,254,254,.94);
    color:#0A49E2;
    box-shadow:0 2px 10px rgba(0,0,0,.28);
  }
  /* Pasif ok (or. serit basdayken SOL ok) soluk ve tiklanamaz. */
  .alan3__ok[data-etkin="0"]{opacity:.32;pointer-events:none;box-shadow:none}
  .alan3__ok[data-etkin="1"]{border:0;color:#0A49E2}
  /* Kart yuksekligi SABIT degil: metni uzun olan kartlarda yazi
     gorselin kenarina sifir boslukla dayaniyordu. Yukseklik icerige
     birakilir, serit flex oldugu icin TUM kartlar en uzun olana
     esitlenir -- yani yeni metin eklendiginde de kendiliginden uyar.
     min-height mevcut tasarim olcusunu taban olarak korur. */
  .alan3__kart{flex:0 0 288px;height:auto;min-height:340px}
  /* Alt dolgu eklendi: metin ile gorsel arasinda nefes payi. */
  .alan3__ust{height:auto;min-height:0;padding:18px 18px 16px}
  /* Mavi alan ile gorsel arasindaki degrade seridi mobilde inceltildi:
     dar kartta 13px gereksiz yer kapliyordu. */
  .alan3__degrade{height:7px}
  .alan3__baslik{font-size:19px}
  .alan3__metin{font-size:12px;line-height:15px;max-width:none}
  /* Buton, ic oranlari KORUNARAK olceklenir: masaustundeki olculer
     puntonun katlari cinsinden yazildi (17px'e gore: yan dolgular
     1.976/2.041em, ok arasi .841em, ikon .853em, yukseklik 3.176em).
     Punto ekrana gore daralinca hepsi birlikte daraliyor; boylece dar
     telefonda yazi kutunun kenarina yapismiyor.
     Bolen 22: metin (16.29em) + ok + aralik + dolgular toplami. */
  .alan3__buton{
    position:static;
    font-size:clamp(12.5px, calc((100vw - 2 * var(--a3-kenar-tam)) / 22), 17px);
    width:fit-content;
    height:3.176em;
    gap:.841em;
    padding-inline:1.976em 2.041em;
    border-radius:1.588em;
    --ikon:.853em;
    --ikon-ara:.841em;
    margin:30px auto 0;
  }
  .alan3__buton-yazi{font-size:1em;line-height:1.412em;letter-spacing:-.02em}
  /* Sticky blok mobilde yapismaz: ekrandan uzun oldugu icin
     kaydirmayi kilitliyordu. */
  .yapisan{position:static}
  /* Dipteki saydam logo ve golgesi mobilde kaldirildi: siyah alani
     gereksiz uzatiyordu. */
  .dip{display:none}
}
@media (max-width:680px){
  .alan3{padding-block:60px 36px}
  .alan3__kart{flex:0 0 250px;height:auto;min-height:312px}
  /* Buton artik puntoyla birlikte olcekleniyor; ayrica daraltma yok. */
}

/* ============================================================
   ALAN-4 — Hizmetler
   ============================================================ */
@media (max-width:1100px){
  /* Ust/alt paylar kisaldi: komsu bolumlerin kendi paylariyla
     birleserek ustte ~116px, altta ~152px bosluk birakiyorlardi. */
  .alan4{padding-block:40px 36px}
  /* Son satirin alt payi bolumun payina EKLENIYORDU. */
  .alan4__grup:last-child .alan4__hizmet:last-child{margin-block-end:0}
  /* Mockup'taki satir bolunmesi: "Baca, havalandirma / ve filtrelemede /
     tek teknik cozum / ortaginiz." Ek satir sonlari yalnizca burada
     acilir; masaustunde gizli kalir. */
  .a4-msatir{display:inline}
  .alan4__baslik{
    font-size:30px;font-weight:400;
    letter-spacing:-.02em;      /* %-2 */
    line-height:1.15;
  }
  .alan4__baslik-mavi{font-weight:700}
  .alan4__alt{
    font-size:13px;font-weight:300;
    line-height:1.45;letter-spacing:0;
    /* Cizgi hizmet satirlariyla ayni kenarlarda bitsin diye iki yandan
       da kenar payi verilir (masaustunde yalnizca soldan vardi). */
    margin:12px var(--a4-kenar) 0;
    padding-block-end:18px;
    /* Cok yumusak gri: beyaz zeminde ~#E8E8E8'e denk gelir, ayirici
       gorevi gorur ama goze batmaz. */
    border-block-end:1px solid rgba(30,30,30,.09);
  }

  /* Fare/parmak bir satirin uzerinde dururken yazinin beyazlamasi
     kaldirildi: mobilde :hover dokunustan sonra YAPISIK kaliyor ve
     kaydirmaya bagli vurguyla catisiyordu. Vurguyu yalnizca kaydirma
     belirler. (Masaustundeki kart hover'i aynen duruyor.) */
  .alan4__hizmet:hover .alan4__ad,
  .alan4__hizmet:focus-visible .alan4__ad{color:inherit}
  .alan4__hizmet:hover .alan4__zemin,
  .alan4__hizmet:focus-visible .alan4__zemin{opacity:1}
  .alan4__hizmet:hover .alan4__buton,
  .alan4__hizmet:focus-visible .alan4__buton{opacity:0}
  /* --- Mobilde hizmetler KART degil LISTE ---
     18 hizmet kart olarak alt alta dizilince bolum 6000px'i asiyordu.
     Mockup'taki yapi: mavi kategori basligi + her hizmet icin tek
     satir (ad solda, capraz ok sagda). Masaustundeki mutlak konumlu
     kart duzeni bu yuzden tamamen sifirlanir. */
  .alan4__grup{
    display:block;
    width:auto;
    margin-inline:var(--a4-kenar);
    gap:0;
  }
  /* Masaustunde gruplari 55px margin + 55px padding + 2px cizgi
     ayiriyordu (toplam ~110px). Mobilde mavi kategori basligi zaten
     ayirici gorevi goruyor; yalnizca dengeli bir bosluk birakilir. */
  .alan4__alt + .alan4__grup{margin-block-start:26px}
  .alan4__grup + .alan4__grup{
    margin-block-start:0;
    padding-block-start:0;
    border-block-start:0;
  }

  /* Kategori: mavi, buyuk harf, tek satir; kendi kutusu ve oku yok. */
  .alan4__kategori{
    background:none;
    margin-block:26px 12px;
    height:auto;min-height:0;
  }
  .alan4__kat-ad{
    position:static;inset:auto;max-width:none;transform:none;
    font-size:13px;font-weight:600;
    letter-spacing:.06em;line-height:1.35;
    text-transform:uppercase;
    color:var(--mavi);
  }
  .alan4__kat-ad br{display:none}
  .alan4__kat-cizgi{display:inline;background:none}
  /* Iki span arasinda <br> var; komsu secici (+) bu yuzden tutmuyor.
     Ilk olmayan her parcanin onune bosluk konur, yoksa kelimeler
     "...veBakim" diye birlesiyor. */
  .alan4__kat-ad .alan4__kat-cizgi:not(:first-child)::before{content:"\00a0"}
  .alan4__grup > .alan4__kategori .alan4__ok{display:none}
  /* Masaustu izgarasinin DEKORATIF hucreleri (5 fotograf + 2 lacivert
     dolgu) mobilde listeyi boluyordu; yalnizca kategori basliklari ve
     hizmet satirlari kalir. */
  .alan4__foto,
  .alan4__lacivert{display:none}
  /* Ilk kategorinin ust bosluk fazlaligi: baslikla arasi zaten var. */
  .alan4__grup:first-child .alan4__kategori{margin-block-start:6px}

  /* Hizmet satiri */
  .alan4__hizmet{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:auto;min-height:0;
    padding:15px 16px;
    margin-block-end:8px;
    background:none;
    overflow:hidden;
    color:#1E1E1E;
  }
  /* Zemin katmani masaustunde hover dolgusuydu; mobilde satirin kendi
     zeminidir ve aktifken maviye doner. */
  .alan4__ad{
    position:static;inset:auto;transform:none;
    z-index:1;
    font-size:15px;font-weight:400;line-height:1.35;letter-spacing:0;
    color:inherit;
  }
  /* Masaustundeki "Daha fazla bilgi al" butonu mobilde yok; yerine
     satirin sagina capraz ok. */
  .alan4__buton{display:none}
  .alan4__hizmet::after{
    content:"";position:relative;z-index:1;flex:none;
    width:15px;height:15px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 16.5' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M.75 15.75 15.75.75M1.6.75H15.75V14.9'/%3E%3C/svg%3E") no-repeat center/contain;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 16.5' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M.75 15.75 15.75.75M1.6.75H15.75V14.9'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  /* TEK aktif satir. Ara ton YOK: kullanici iki satir arasinda dursa
     bile satirlardan biri tam vurgulu kalir.
     Yumusaklik SURE'den gelir: --a4-sure'yi alan4.js kaydirma hizina
     gore ayarlar (yavas kaydirmada uzun ve sakin, hizlida kisa ki
     vurgu geride kalip yanip sonmesin). */
  .alan4__hizmet{
    color:#1E1E1E;
    transition:color var(--a4-sure,360ms) var(--egri-standart);
  }
  .alan4__zemin{
    opacity:1;
    background:var(--kagit-yuzey);
    transition:background-color var(--a4-sure,360ms) var(--egri-standart);
  }
  .alan4__hizmet--aktif{color:var(--beyaz)}
  .alan4__hizmet--aktif .alan4__zemin{background:var(--mavi)}
}

/* ============================================================
   ALAN-6 — Hizmet surecimiz
   ============================================================ */
@media (max-width:1100px){
  /* Ust/alt paylar kisaldi (alan-4 ile ayni yaklasim). */
  .alan6{padding-block:40px 36px}
  .alan6__ust{flex-direction:column;align-items:flex-start;gap:10px}
  .alan6__baslik{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.15}
  .alan6__ozet{
    white-space:normal;max-width:none;
    font-size:13px;font-weight:300;line-height:1.45;
    /* Alan-4'teki ayirici cizginin aynisi. */
    padding-block-end:18px;
    border-block-end:1px solid rgba(30,30,30,.09);
  }
  .alan6__ozet strong{font-weight:600}

  /* Grup basligi ile kutucuklar arasi: cizgiye olan mesafeyle esit. */
  .alan6__satir{grid-template-columns:1fr;gap:20px}
  /* Masaustunde grid-area ile sabitlenmis; tek sutunda cozulur. */
  .alan6__grup-ad{grid-area:auto}
  .alan6__adimlar{grid-area:auto}
  /* Ilerleme rayi mobilde yok: kutucuklar alt alta, yatay ray anlamsiz. */
  .alan6__ray{display:none}

  /* Masaustunde satir-ozel kurallar (0,2,0) var; ayni ozgullukte
     yazilmazsa bu degerler gecmiyor. */
  /* Masaustu satir araliklari (84.85 / 75.16px) komsu seciciyle
     yazildigi icin ayni ozgullukte sifirlanir. */
  .alan6__ust + .alan6__satir{margin-block-start:20px}
  .alan6__satir + .alan6__satir{margin-block-start:20px}
  .alan6__satir--baca .alan6__grup-ad,
  .alan6__satir--hava .alan6__grup-ad{
    padding-inline-end:0;
    font-size:19px;font-weight:500;line-height:1.25;
    margin-block:0;
    /* Hangi hizmetin sureci oldugu okunakli olsun. */
    color:#434343;
  }

  /* Ilk grubun kutucuklarindan sonra ince ayirici: iki ayri
     hizmet sureci oldugu anlasilsin. Ton .alan6__ozet ile ayni. */
  .alan6__satir--baca{
    padding-block-end:24px;
    border-block-end:1px solid rgba(30,30,30,.09);
  }
  /* "Baca bakimi icin calisma seklimiz" TEK SATIR olsun. */
  .alan6__grup-ad br{display:none}

  .alan6__satir--baca .alan6__adimlar,
  .alan6__satir--hava .alan6__adimlar{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* --- Kutucuk: referans gorseldeki yerlesim ---
     ikon sol ustte, numara sag ustte (buyuk, soluk), baslik altinda,
     aciklama en altta. Yapi PASIF ve AKTIF durumda AYNI; yalnizca
     renkler degisir. Masaustundeki sabit yukseklik ve alta yaslama
     kaldirilir. */
  .alan6__satir--baca .alan6__adim,
  .alan6__satir--hava .alan6__adim{
    height:auto;min-height:0;
    display:block;
    padding:26px 24px 26px;
    border-radius:24px;
  }
  /* Numara SAG USTTE. Masaustunde satir-ozel kural 'left' veriyor;
     ikisi birden tanimli kalirsa kutu iki kenara yayilip metin sola
     kaciyordu -- start ACIKCA auto yapilir. */
  .alan6__satir--baca .alan6__no,
  .alan6__satir--hava .alan6__no{
    position:absolute;
    inset-block-start:20px;
    inset-inline-end:24px;
    inset-inline-start:auto;
    font-size:44px;line-height:1;font-weight:500;
    letter-spacing:-.02em;
  }
  .alan6__satir--baca .alan6__ikon,
  .alan6__satir--hava .alan6__ikon{
    width:38px;height:38px;
    margin:0 0 18px;
  }
  .alan6__ad{
    font-size:24px;line-height:1.2;letter-spacing:-.01em;
    /* Masaustunde bazi adlarda <br> var; mobilde tek akista dizilir. */
    padding-inline-end:70px;
  }
  .alan6__ad br{display:none}
  .alan6__aciklama{font-size:14px;line-height:1.45}
  .alan6__aciklama > p{margin:14px 0 0}
}
@media (max-width:680px){
  .alan6__satir--baca .alan6__ad,
  .alan6__satir--hava .alan6__ad{font-size:22px}
  .alan6__satir--baca .alan6__no,
  .alan6__satir--hava .alan6__no{font-size:40px}
}

/* ============================================================
   ALAN-7 — Her mekanin kendi sorunu var
   ============================================================ */
@media (max-width:1100px){
  /* Ust/alt paylar kisaldi: alan-6'nin 36px alt payiyla birlesince
     ustte 108px bosluk kaliyordu. */
  .alan7{padding-block:48px 40px}
  .alan7__baslik{font-size:clamp(24px,3.4vw,30px);line-height:1.25}
  /* Alt metin IKI cumle, arasinda <br> var. 16px sabit puntoda uzun
     cumle (21.54em) 360px'lik ekranda 344px yer istiyor ama 328px
     bosluk var -- "yorulmaz" tek basina ucuncu satira dusuyordu.
     Punto artik kullanilabilir genislige gore olcekleniyor: bolen 23
     = 21.54em + guvenlik payi, yani cumle her ekranda tek satir. */
  .alan7__alt{
    font-size:clamp(12px, calc((100vw - 2 * var(--a7-kenar)) / 23), 16px);
    line-height:1.45;
  }
  /* Baslik blogu ile serit arasi masaustu olcusuydu (71.41px). */
  .alan7__pencere{margin-block-start:32px}
  /* Oklar seridin UZERINE binip kutucuklari dikeyde ortalar
     (alan-3 / alan-11 ile ayni). Masaustundeki mavi saydam daire
     yerine beyaz daire: kartlarin ustunde kontrast gerekiyor. */
  .alan7__ok{
    --ok-boy:clamp(34px,10vw,42px);
    --ikon:calc(var(--ok-boy) * .42);
    --ikon-ara:calc(var(--ok-boy) * .42);
    --ikon-yol:calc(var(--ikon) + var(--ikon-ara));
    inset-block-start:50%;
    transform:translateY(-50%);
    width:var(--ok-boy);height:var(--ok-boy);
    border:0;border-radius:50%;
    background:rgba(254,254,254,.94);
    color:#0A49E2;
    box-shadow:0 2px 10px rgba(0,0,0,.28);
  }
  .alan7__ok--geri{inset-inline-start:10px}
  .alan7__ok--ileri{inset-inline-end:10px}
  .alan7__ok:hover{background:rgba(254,254,254,.94)}
  /* Pasif ok soluk ve tiklanamaz; masaustundeki "geri tamamen gizli"
     kurali mobilde butonun yerini bos birakiyordu. */
  .alan7__ok--geri,
  .alan7__ok--ileri{opacity:.32;pointer-events:none;box-shadow:none}
  .alan7__ok--geri[data-etkin="1"],
  .alan7__ok--ileri[data-etkin="1"]{
    opacity:1;pointer-events:auto;
    box-shadow:0 2px 10px rgba(0,0,0,.28);
  }
  .alan7__ok svg{width:var(--ikon);height:calc(var(--ikon) * 16.99 / 16.91)}
  /* Kart olculeri satir ici degiskenlerden geliyor; oranini
     koruyarak kucultuyoruz. */
  .alan7__kart{--a7-g:250px !important;--a7-y:300px !important}
  .alan7__gorsel{width:100%;height:auto;aspect-ratio:5/6}

  /* Buton, ic oranlari KORUNARAK olceklenir: masaustu olculeri 17px
     puntonun katlari cinsinden yazilir (yan dolgular 1.976/2.041em,
     ok arasi .841em, ikon .853em, yukseklik 3.176em). Toplam genislik
     20.06em; bolen 23 secildi ki buton kullanilabilir genisligin
     ~%87'sini kaplasin ve iki yaninda nefes payi kalsin. */
  .alan7__buton{
    font-size:clamp(12.5px, calc((100vw - 2 * var(--a7-kenar)) / 23), 17px);
    width:fit-content;
    height:3.176em;
    gap:.841em;
    padding-inline:1.976em 2.041em;
    border-radius:1.588em;
    --ikon:.853em;
    --ikon-ara:.841em;
    /* Serit ile buton arasi da masaustu olcusuydu (61.46px). */
    margin:28px auto 0;
  }
  .alan7__buton-yazi{font-size:1em;line-height:1.412em;letter-spacing:-.02em}
}
@media (max-width:680px){
  .alan7__kart{--a7-g:214px !important;--a7-y:258px !important}
}

/* ============================================================
   ALAN-8 — Rakamlar + orta pano
   ============================================================ */
@media (max-width:1100px){
  /* Ust pay 72 -> 40: alan-7'nin 40px'lik alt payiyla birlesince
     112px bosluk kaliyordu. 80px, renk siniri olan alan-6/alan-7
     dikisiyle (84px) ayni duzeyde.
     Alt pay 56 -> 40: alan-9 ile arasindaki 120px'lik beyaz bandin
     yarisindan fazlasi buradan geliyordu. Iki alan da beyaz oldugu
     icin bu bosluk tek parca bos serit gibi okunuyor. */
  .alan8{padding-block:40px}
  .alan8__izgara{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  /* Sutun yuksekligi masaustunde orta panoya (624) esitlenmisti. */
  .alan8__sutun{
    height:auto;
    grid-template-rows:auto auto !important;
    gap:16px;
  }
  .alan8__orta{
    grid-column:1 / -1;
    order:-1;
    width:100%;height:auto;aspect-ratio:1/1;
    --a8-orta:auto;
  }
  .alan8__kart{min-height:150px;padding:0 18px}
  .alan8__kart--bir,.alan8__kart--iki,
  .alan8__kart--uc,.alan8__kart--dort{padding-block-end:20px}
  .alan8__sayi{font-size:clamp(32px,5.2vw,44px);line-height:1.05;margin-block-end:6px}
  .alan8__etiket{font-size:clamp(14px,2.2vw,18px);line-height:1.2;white-space:normal}
}
@media (max-width:680px){
  .alan8__izgara{grid-template-columns:1fr}
  .alan8__kart{min-height:118px}
}

/* ============================================================
   ALAN-9 — Referanslarimiz
   ============================================================ */
@media (max-width:1100px){
  /* 64/72 -> 36/44. Ustteki dikis alan-8 ile paylasiliyor (40+36=76px,
     sitedeki beyaz alan ritmiyle ayni). Altta alan-10'un kendi payi
     0 oldugu icin ayrimi tek basina bu pay tasiyor. */
  .alan9{padding-block:36px 44px}
  .alan9__baslik{font-size:28px;line-height:1.2}
  .alan9__alt{font-size:16px;line-height:1.45;margin-block-start:14px}
  .alan9__liste{
    width:auto;
    margin-inline:var(--a9-kenar);
    margin-block-start:40px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .alan9__kutu{height:auto;aspect-ratio:306/211;padding:18px}
  /* Masaustunde logolar duragan halde siyah-beyaz, uzerine gelince
     renklenir. Dokunmatikte "uzerine gelme" yok: logolar hep gri
     kalirdi. Mobilde hepsi dogrudan renkli gosterilir. */
  .alan9__kutu img{filter:none;transition:none}
}
@media (max-width:680px){
  .alan9__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   ALAN-10 — Bizi ayiran, isi nasil yuruttugumuz
   Mobilde sabitleme (sticky) YOK: kartlar ve fotograflar alt alta
   normal akista dizilir. alan10.js bu genislikte devreye girmez.
   ============================================================ */
@media (max-width:1100px){
  .alan10{min-height:0;background:var(--beyaz)}
  .alan10__cerceve{
    position:static;
    height:auto;
    /* 72 -> 32: alan-9'un 44px'lik alt payiyla birlesince 116px
       bosluk kaliyordu; ikisi de beyaz oldugu icin tek parca bos
       serit gibi okunuyordu. Toplam 76px, alan-8/alan-9 dikisiyle
       ayni. */
    /* Alt pay 0 -> 40: son seridin dibi ile alan-11'in mavi kenari
       arasinda yalnizca seridin kendi 8px'lik alt payi kaliyordu. */
    padding-block:32px 40px;
    background:none;
    overflow:visible;
  }
  .alan10__baslik{
    font-size:clamp(26px,3.8vw,36px);
    line-height:1.2;
    padding-block-start:0;
  }
  .alan10__izgara{
    grid-template-columns:1fr;
    width:auto;
    margin-inline:var(--a10-sol) var(--a10-kenar);
    margin-block-start:28px;
    gap:0;
  }
  .alan10__metin,.alan10__foto{
    position:static;
    height:auto;
    overflow:visible;
    display:grid;
  }
  .alan10__kart,
  .alan10__foto img{
    position:static;
    transform:none !important;
    box-shadow:none;
  }
  .alan10__kart{min-height:0}
  .alan10__foto img{
    width:100%;height:auto;
    aspect-ratio:630/456;
  }
  .alan10__kart-metin{max-width:none}
  /* Iki sarmalayici seffaflastirilir; kartlar dogrudan izgaranin
     ogesi olur. Fotograflar alan10.js tarafindan kartlarin ICINE
     tasindigi icin artik izgara cocugu degiller. */
  .alan10__metin,.alan10__foto{display:contents}
  .alan10__kart{margin-block-end:10px}

  /* ---- Kart listesi ----
     Kapali madde ince serit, acik madde buyuk mavi kart. TUM acik
     kartlar ayni yuksekligi (--a10-acik-yuk, alan10.js olcer)
     kullanir: biri kucultup digeri ayni egriyle buyudugu icin
     toplam her karede sabit kalir ve sayfa kaymaz. */
  .alan10__izgara{--a10-kapali:46px}

  .alan10__kart--serit{
    position:relative;
    display:flex;flex-direction:column;
    /* Masaustunde justify-content:flex-end; kapali seritte govdenin
       18px alt dolgusu kutuya sigmayinca tasma YUKARI gidiyor ve
       baslik seridin ustunden disari cikiyordu. */
    justify-content:flex-start;
    height:var(--a10-kapali);
    overflow:hidden;
    padding:0;
    margin-block-end:8px;
    border-radius:14px;
    background:#F1F1F1;
    color:var(--karbon);
    /* Ayni sure + ayni egri SART: toplamin sabit kalmasi buna bagli.
       cubic-bezier(.4,0,.2,1) -> baslangicta ve sonda hiz sifir. */
    transition:height 560ms cubic-bezier(.4,0,.2,1),
               background-color 420ms cubic-bezier(.4,0,.2,1),
               color 420ms cubic-bezier(.4,0,.2,1);
  }
  .alan10__kart--serit:last-of-type{margin-block-end:0}
  .alan10__kart--acik{
    height:var(--a10-acik-yuk,420px);
    background:var(--mavi);
    color:var(--beyaz);
  }
  /* Olcum sirasinda gercek yuksekligi okuyabilmek icin. */
  .alan10__kart--olcum{height:auto !important}

  .alan10__kart--serit .alan10__kart-ad{
    flex:none;
    margin:0;
    padding:0 44px 0 18px;
    height:var(--a10-kapali);
    display:flex;align-items:center;
    font-size:16px;font-weight:600;line-height:1.25;
    letter-spacing:-.01em;
    color:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .alan10__kart--serit .alan10__kart-ad:focus-visible{
    outline:2px solid var(--mavi);outline-offset:-3px;
  }
  /* Sag ustteki durum halkasi: kapaliyken bos, acikken dolu. */
  .alan10__kart--serit .alan10__kart-ad::after{
    content:"";
    position:absolute;
    inset-inline-end:18px;
    inset-block-start:calc(var(--a10-kapali) / 2 - 7px);
    width:14px;height:14px;
    border:1.5px solid currentColor;
    border-radius:50%;
    opacity:.45;
    transition:opacity 420ms,box-shadow 420ms;
  }
  .alan10__kart--acik .alan10__kart-ad::after{
    opacity:1;
    box-shadow:inset 0 0 0 4px var(--beyaz);
  }

  .alan10__govde{
    flex:1;min-height:0;
    display:flex;flex-direction:column;
    padding:0 18px 18px;
    opacity:0;
    transition:opacity 260ms cubic-bezier(.4,0,.2,1);
  }
  .alan10__kart--acik .alan10__govde{
    opacity:1;
    transition:opacity 420ms cubic-bezier(.4,0,.2,1) 140ms;
  }
  .alan10__kart--serit .alan10__kart-metin{
    flex:none;
    margin:0 0 14px;
    font-size:15px;line-height:1.5;
    color:inherit;opacity:.88;
  }
  .alan10__govde > img{
    flex:1;min-height:0;
    width:100%;
    border-radius:10px;
    object-fit:cover;
  }

  .alan10__kart-ad{font-size:22px;line-height:1.2}
  .alan10__kart-metin{font-size:16px;line-height:1.5;max-width:none}
  /* Iki sarmalayici seffaflastirilir; kartlar dogrudan izgaranin
     ogesi olur. Fotograflar alan10.js tarafindan kartlarin ICINE
     tasindigi icin artik izgara cocugu degiller. */
  .alan10__metin,.alan10__foto{display:contents}
  .alan10__kart{margin-block-end:10px}

  /* Mavi bant KALDIRILDI. Bolum yuksekliginin %55'ine sabitlenmisti;
     eski uzun yerlesimde (1911px) bu 1051px'e denk geliyor ve yalnizca
     alt yariyi boyuyordu. Akordeon bolumu 732px'e indirince bant
     403px'e cikti, yani satirlarin arkasina girdi -- koyu yazi mavi
     zeminde okunmaz oldu. Akordeon satirlarinin kart zemini de yok.
     Alttaki alan-11 zaten tam mavi; gecisi o sagliyor. */
  .alan10{background:var(--beyaz)}
}
@media (max-width:680px){
  .alan10__izgara{--a10-kapali:44px}
  .alan10__kart--serit .alan10__kart-ad{font-size:15px}
  .alan10__kart--serit .alan10__kart-metin{font-size:14px}
}

/* ============================================================
   ALAN-11 — Teknik Bilgi Merkezi
   ============================================================ */
@media (max-width:1100px){
  /* Mavi blok kisaltildi: 56/56 pay + 40px'lik buton araligi
     icerige gore fazlaydi (bolum 537px). */
  .alan11{padding-block:40px 40px}
  /* Baslik kucultuldu: 26px'te "Teknik Bilgi Merkezi" dar ekranda
     ok butonlarinin altina giriyordu. Oklar artik seridin uzerinde
     (bkz. alan11.js oklariYerlestir) ama punto yine de kullanilabilir
     genislige gore olcekleniyor. */
  .alan11__baslik{
    font-size:clamp(19px, calc((100vw - 2 * var(--a11-kenar)) / 15), 26px);
    line-height:1.2;
  }
  /* alan-3 ile ayni: oklar seridin UZERINE binir, kutucuklari
     dikeyde ortalar. Kutu tiklamayi yutmasin; yalnizca butonlar alsin. */
  .alan11__oklar{
    position:absolute;z-index:2;
    inset-block-start:50%;
    inset-inline:10px;
    transform:translateY(-50%);
    margin:0;gap:0;
    justify-content:space-between;
    pointer-events:none;
  }
  /* Daire ve icindeki ikon TEK olcuden turetilir. */
  .alan11__ok{
    pointer-events:auto;
    --ok-boy:clamp(34px,10vw,42px);
    --ikon:calc(var(--ok-boy) * .42);
    --ikon-ara:calc(var(--ok-boy) * .42);
    width:var(--ok-boy);height:var(--ok-boy);
    border:0;border-radius:50%;
    background:rgba(254,254,254,.94);
    color:#0A49E2;
    box-shadow:0 2px 10px rgba(0,0,0,.28);
  }
  .alan11__ok[data-etkin="0"]{opacity:.32;pointer-events:none;box-shadow:none}
  .alan11__ok[data-etkin="1"]{border:0;color:#0A49E2}
  .alan11__pencere{position:relative;margin-block-start:26px}
  .alan11__kart{flex:0 0 276px;height:auto}
  .alan11__gorsel{height:192px}
  .alan11__ad{font-size:19px;padding:20px 18px 24px}
  .alan11__buton{margin-block-start:30px}
}
@media (max-width:680px){
  .alan11__kart{flex:0 0 240px}
  .alan11__gorsel{height:168px}
  .alan11__buton{width:auto;justify-content:center;
    margin-inline:var(--a11-kenar)}
}

/* ============================================================
   ALAN-12 — Ozel cozumler + kesif formu
   ============================================================ */
@media (max-width:1100px){
  .alan12{
    grid-template-columns:1fr;
    min-height:0;
  }
  .alan12__sol{padding:64px var(--a12-kenar) 48px}
  .alan12__baslik{font-size:clamp(26px,3.8vw,36px);line-height:1.25}
  .alan12__alt{font-size:16px;line-height:1.5;margin-block-start:16px}
  .alan12__etiketler{max-width:none;margin-block-start:28px}
  /* Formun oval kutusu gri panele HER YONDEN ayni pay ile otursun:
     yanlarda --a12-kenar kadar bosluk kaliyordu, ustte 0 alta 56px
     vardi -- panel gereksiz uzuyor, kutu da yukari yapisiyordu. */
  .alan12__sag{padding:var(--a12-kenar)}
  .alan12__form{
    position:static;
    padding:26px 22px;
  }
}
@media (max-width:680px){
  .alan12__etiket{font-size:14px;height:34px;padding-inline:13px;gap:9px}
  .alan12__ikon{width:17px;height:17px}
}

/* ============================================================
   ALAN-13 — Site alti
   ============================================================ */
@media (max-width:1100px){
  .alan13__ic{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px 28px;
    padding-block-start:56px;
  }
  .alan13__iletisim{grid-column:1 / -1;order:-1}
  .alan13__tel{font-size:22px;line-height:28px}
  .alan13__serit{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-block-start:36px;
  }
}
@media (max-width:680px){
  .alan13__ic{grid-template-columns:1fr;gap:30px}
  .alan13__baslik--ikinci{margin-block-start:22px}
  .alan13__yasal{flex-wrap:wrap;gap:14px 22px}
}

/* ============================================================
   DOKUNMATIK — fare olmayan cihazlar
   Hover'a bagli her sey erisilemez kaliyordu: hizmet kartinin
   butonu hic gorunmuyor, referans logolari hep gri duruyordu.
   ============================================================ */
@media (hover:none){
  .alan4__buton{opacity:1;transform:none}
  .alan9__kutu img{filter:none}
  .alan11__kart .alan11__gorsel img{transform:none}
  /* Ok ikonlarinin kayma animasyonu dokunusta anlamsiz; park
     yerinde dursunlar. */
  .alan3__ok .kayan__ic,.alan11__ok .kayan__ic,
  .alan3__buton .kayan__ic,.alan7__buton .kayan__ic,
  .alan11__buton .kayan__ic{transition:none}
}