/* Sabit header'in yuksekligi. Gercek deger sayfa.js tarafindan
   olculup koke yazilir; burasi JS calismazsa devreye giren yedek.
   yasal.css ile ayni deger: ikisi ayni sayfada yuklenmez. */
:root{--ust-yuk:81px}
@media (max-width:1100px){ :root{--ust-yuk:64px} }

/* ============================================================
   HIZMETLERIMIZ — tum hizmetlerin tek sayfada toplandigi
   kategori kavsagi.

   Amac: sayfaya ilk giren kisi TEK bir baslikla uzun sure basbasa
   kalmasin; dort ana basligin varligini daha ilk ekranda gorsun ve
   kaydirdikca hepsini hizla gecsin. Bunun icin:

     1. Mavi tepe bandinda dort basliga giden kisayol rozetleri var
        (ilk ekranda "burada dort hizmet var" mesaji).
     2. Her bolum YATAY bir serit: gorsel + metin yan yana, yuksekligi
        ~380-440px. Masaustunde ekranda hep iki serit birden goruur.
     3. Alt hizmetler uzun paragraf degil, tiklanabilir rozet listesi.
        Hem kisa hem de her hizmet kendi sayfasina dogrudan gider.

   Dil yasal.css ile ayni: Ford Antenna, #0A49E2 mavi, beyaz zemin,
   ayni kenar payi degiskeni.
   ============================================================ */

.hizmetler{
  --h-kenar:var(--site-kenar, max(clamp(20px,4vw,40px), calc((100% - 1266px) / 2)));
  font-family:var(--f-header);
  color:var(--karbon);
  background:var(--beyaz);
}

/* ---------- Mavi tepe bandi ---------- */
.hizmetler__tepe{
  background:var(--mavi);
  color:var(--beyaz);
  padding:calc(var(--ust-yuk) + 64px) var(--h-kenar) 56px;
}
.hizmetler__yol{
  display:flex;align-items:center;gap:8px;
  margin:0 0 20px;
  font-size:13px;font-weight:500;letter-spacing:.02em;
  color:rgba(254,254,254,.72);
}
.hizmetler__yol a{color:inherit;text-decoration:none}
.hizmetler__yol a:hover{color:var(--beyaz);text-decoration:underline}
.hizmetler__yol span[aria-current]{color:var(--beyaz)}

.hizmetler__baslik{
  margin:0;
  font-size:clamp(30px, 5vw, 54px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}
.hizmetler__ozet{
  /* 16px puntoda ~68 karakter: goz satir basini kaybetmesin. */
  max-width:680px;
  margin:18px 0 0;
  font-size:clamp(15px, 2vw, 18px);
  font-weight:300;
  line-height:1.55;
  color:rgba(254,254,254,.9);
}

/* Kisayollar: dort basligin tamami ilk ekranda gorunur. */
.hizmetler__kisayol{margin-block-start:30px}
.hizmetler__kisayol-liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.hizmetler__kisayol-bag{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  border:1px solid rgba(254,254,254,.38);
  border-radius:999px;
  font-size:14px;font-weight:500;line-height:1.2;
  color:var(--beyaz);
  text-decoration:none;
  transition:background-color 220ms var(--egri-standart),
             border-color 220ms var(--egri-standart),
             color 220ms var(--egri-standart);
}
.hizmetler__kisayol-bag:hover,
.hizmetler__kisayol-bag:focus-visible{
  background:var(--beyaz);
  border-color:var(--beyaz);
  color:var(--mavi);
}
.hizmetler__kisayol-no{
  font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;
  opacity:.62;
}
.hizmetler__kisayol-bag:hover .hizmetler__kisayol-no{opacity:.7}

/* Guven seridi: kesif, calisma saati, bolge. */
.hizmetler__serit{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin:28px 0 0;padding:0;
  font-size:13px;font-weight:400;
  color:rgba(254,254,254,.86);
}
.hizmetler__serit li{display:flex;align-items:center;gap:8px}
.hizmetler__serit li::before{
  content:"";
  flex:none;
  width:6px;height:6px;border-radius:50%;
  background:var(--beyaz);
  opacity:.7;
}

/* ---------- Bolum seritleri ---------- */
.hizmetler__govde{
  padding:0 var(--h-kenar) 8px;
}

.hzm{
  /* Sabit header, kisayoldan gelindiginde basligi ortmesin. */
  scroll-margin-top:calc(var(--ust-yuk) + 20px);
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px, 4vw, 56px);
  padding-block:clamp(36px, 4vw, 52px);
}
.hzm + .hzm{border-block-start:1px solid rgba(30,30,30,.10)}

/* Cift numarali seritlerde gorsel saga gecer. Yer degistirme `order`
   ile YAPILMAZ: order yalnizca siralamayi cevirir, gorsel 1fr'lik genis
   sutuna dusup %42'lik sutundan 146px daha genis ve 98px daha uzun
   oluyordu; seritlerin ritmi bozuluyordu. Sutun genisligi de birlikte
   cevrilir, boylece gorsel iki yonde de ayni olcude kalir. */
.hzm--ters{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.hzm--ters .hzm__gorsel{grid-column:2;grid-row:1}
.hzm--ters .hzm__metin{grid-column:1;grid-row:1}

/* --- Gorsel --- */
.hzm__gorsel{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#EDEDED;
}
.hzm__gorsel img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  transition:transform 600ms var(--egri-yumusak);
}
.hzm:hover .hzm__gorsel img{transform:scale(1.03)}

/* Gorseli olmayan hizmet icin ayrilmis alan. Fotograf gelince bu
   kutu <picture> ile degistirilir; olcu ve yaricap aynidir. */
.hzm__bos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  aspect-ratio:3 / 2;
  padding:20px;
  border:2px dashed rgba(10,73,226,.34);
  border-radius:18px;
  background:#F4F6FB;
  text-align:center;
}
.hzm__bos-ikon{width:34px;height:34px;color:var(--mavi);opacity:.55}
.hzm__bos-yazi{
  margin:0;
  font-size:15px;font-weight:600;
  line-height:1.3;
  color:var(--mavi);
}
.hzm__bos-not{
  margin:0;
  max-width:30ch;
  font-size:12.5px;font-weight:300;
  line-height:1.5;
  color:#6E6E6E;
}

/* --- Metin --- */
.hzm__ust{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;
}
.hzm__no{
  font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  color:var(--mavi);
}
.hzm__cizgi{
  flex:1 1 auto;
  height:1px;
  background:rgba(30,30,30,.12);
}
.hzm__adet{
  flex:none;
  font-size:12px;font-weight:500;
  letter-spacing:.04em;
  color:#7A7A7A;
}

.hzm__baslik{
  margin:0;
  font-size:clamp(22px, 2.9vw, 32px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.018em;
}
.hzm__baslik a{
  color:inherit;text-decoration:none;
  transition:color 220ms var(--egri-standart);
}
.hzm__baslik a:hover{color:var(--mavi)}

.hzm__ozet{
  max-width:60ch;
  margin:12px 0 0;
  font-size:16px;font-weight:300;
  line-height:1.65;
  color:#3A3A3A;
}

/* Alt hizmetler: her biri kendi sayfasina giden rozet. */
.hzm__liste{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:20px 0 0;padding:0;
}
.hzm__bag{
  display:inline-block;
  padding:7px 13px;
  border:1px solid rgba(30,30,30,.14);
  border-radius:999px;
  font-size:13.5px;font-weight:400;line-height:1.25;
  color:#3A3A3A;
  text-decoration:none;
  transition:border-color 200ms var(--egri-standart),
             color 200ms var(--egri-standart),
             background-color 200ms var(--egri-standart);
}
.hzm__bag:hover,
.hzm__bag:focus-visible{
  border-color:var(--mavi);
  background:rgba(10,73,226,.06);
  color:var(--mavi);
}

/* Tek hizmetli bolumde (su deposu) alt hizmet yerine kapsam maddeleri
   duruyor. Tiklanabilir gorunmesinler: kenarlik yok, nokta imli. */
.hzm__ozellik{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:400;line-height:1.25;
  color:#5E5E5E;
}
.hzm__ozellik + .hzm__ozellik{margin-inline-start:4px}
.hzm__ozellik::before{
  content:"";
  flex:none;
  width:5px;height:5px;border-radius:50%;
  background:var(--mavi);
  opacity:.5;
}
.hzm__liste--duz{gap:8px 18px}

/* Kategori sayfasina giden ana baglanti. */
.hzm__git{
  display:inline-flex;align-items:center;gap:10px;
  margin-block-start:22px;
  font-size:15px;font-weight:600;
  color:var(--mavi);
  text-decoration:none;
}
.hzm__git-ok{
  flex:none;
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 260ms var(--egri-standart);
}
.hzm__git:hover{text-decoration:underline;text-underline-offset:4px}
.hzm__git:hover .hzm__git-ok{transform:translate(3px,-3px)}

/* ---------- Kapanis notu ---------- */
.hizmetler__kapanis{
  margin:0 var(--h-kenar);
  padding:26px 28px 30px;
  border-block-start:1px solid rgba(30,30,30,.10);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  padding-inline:0;
}
.hizmetler__kapanis p{
  margin:0;
  max-width:62ch;
  font-size:15px;font-weight:300;line-height:1.6;
  color:#3A3A3A;
}
.hizmetler__kapanis a{
  color:var(--mavi);
  font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

/* ============================================================
   TABLET — tek sutuna inis
   ============================================================ */
@media (max-width:900px){
  .hizmetler__tepe{padding-block:calc(var(--ust-yuk) + 44px) 44px}

  .hzm{
    grid-template-columns:1fr;
    gap:22px;
    padding-block:34px;
  }
  /* Tek sutunda gorsel her zaman ustte: ters serit yerlesimi iptal. */
  .hzm--ters{grid-template-columns:1fr}
  .hzm--ters .hzm__gorsel{grid-column:1;grid-row:1}
  .hzm--ters .hzm__metin{grid-column:1;grid-row:2}
  /* Dokunmatik cihazda hover yok; gorsel buyutmesi de olmasin. */
  .hzm:hover .hzm__gorsel img{transform:none}
  /* Tek sutunda 3:2 gorsel ekranin cogunu kaplar; serit daha kisa
     olsun ki bir sonraki baslik hemen altta gorunsun. */
  .hzm__gorsel img{aspect-ratio:16 / 9}
  .hzm__bos{aspect-ratio:16 / 9}
}

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width:680px){
  /* Tepe bandi telefonda ekranin cogunu kapliyor; dort kisayolun
     tamami gorunur kalsin diye metin degil BOSLUK kisaltildi. */
  .hizmetler__tepe{padding-block:calc(var(--ust-yuk) + 28px) 30px}
  .hizmetler__ozet{font-size:15px;margin-block-start:14px}
  .hizmetler__kisayol{margin-block-start:20px}
  .hizmetler__kisayol-liste{gap:8px}
  .hizmetler__kisayol-bag{padding:8px 13px;font-size:13px}
  .hizmetler__serit{gap:8px 20px;margin-block-start:18px;font-size:12.5px}

  .hzm{padding-block:28px;gap:18px}
  .hzm__gorsel,.hzm__bos{border-radius:14px}
  .hzm__ozet{font-size:15px;line-height:1.62}
  .hzm__liste{gap:7px;margin-block-start:16px}
  /* Dokunma hedefi 40px: rozetler parmakla rahat secilsin. */
  .hzm__bag{padding:9px 13px;font-size:13px}
  .hzm__git{margin-block-start:18px;font-size:14.5px}
  .hzm__bos-yazi{font-size:14px}
  .hzm__bos-not{font-size:12px}
  .hizmetler__kapanis{padding-block:22px 26px}
  .hizmetler__kapanis p{font-size:14.5px}
}