/* ==========================================================================
   ÇAKMAK PEN . 03 DÜZEN
   Kapsayıcı, ızgara, bölüm boşlukları, üstbilgi, çekmece, altbilgi,
   mobil sabit ara çubuğu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KAPSAYICI VE BÖLÜM
   -------------------------------------------------------------------------- */
.kap {
  width: 100%;
  max-width: var(--kap);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.kap--dar {
  max-width: var(--kap-dar);
}

.bolum {
  padding-block: var(--bolum-y);
  background: var(--zemin);
  color: var(--metin);
}

.bolum--yumusak {
  background: var(--zemin-yumusak);
}

/* Yan baslikli bolum.
   Surec ve SSS bloklari okuma olcusu geregi dar kapsayicida duruyor. Genis
   ekranda ustlerindeki tam genislikli bolumlerin arasinda ortalanmis bir ada
   gibi kaliyor ve sayfa ikiye bolunmus gorunuyordu. Baslik sola alinir,
   icerik saginda kendi dar olcusunde kalir. Metin genisligi DEGISMEZ.
   82rem altinda hicbir sey degismez. */
@media (min-width: 82rem) {
  .bolum--yanbasli .kap--dar {
    max-width: var(--kap);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kap-dar));
    column-gap: var(--b9);
    align-items: start;
  }

  .bolum--yanbasli .kap--dar > .bolum-basi {
    grid-column: 1;
    grid-row: 1 / -1;
    max-width: none;
    margin-bottom: 0;
  }

  .bolum--yanbasli .kap--dar > :not(.bolum-basi) {
    grid-column: 2;
  }
}

.bolum--tint {
  background: var(--zemin-tint);
}

/* Bölüm başlığı bloğu */
.bolum-basi {
  max-width: var(--olcu);
  margin-bottom: var(--b8);
}

.bolum-basi > :last-child {
  margin-bottom: 0;
}

/* Genis ekranda .bolum-basi sola yapisip saginda genis bir olu alan
   birakiyordu. Baslik solda, giris sagda: iki yarim da kendi olcusunde
   kalir, paragraf --olcu'yu ASLA asmaz.
   :has() destegi olmayan tarayici bugunku tek sutunu gorur, hicbir sey
   kirilmaz. Surec ve SSS bolum basliklarinda <p> yok, kural onlara
   uygulanmaz; istenen davranis budur. */
@media (min-width: 78rem) {
  .bolum-basi:has(> p) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--olcu));
    column-gap: var(--b9);
    align-items: end;
  }

  .bolum-basi:has(> p) > .etiket {
    grid-column: 1;
    grid-row: 1;
  }

  .bolum-basi:has(> p) > h2 {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  .bolum-basi:has(> p) > p {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   IZGARA
   auto-fit KULLANILMAZ. Sutun sayisi tarayiciya birakilinca kapsayici
   genisledikce 3 ve 5 sutuna ugruyor. OLCULDU: 860-1119px arasinda 8 hizmet
   karti 3+3+2 diziliyordu, yani YAN YANA TAM UC KART. Yasak listesi bunu
   ozellikle disariyor ve bu ihlal aylarca canlida kaldi.
   Sutun sayilari artik elle yazilir: 1 -> 2 -> 4. Uc ve bes hicbir esikte
   olusmaz. Bu yapisal bir garantidir, tarayici hesabina birakilmaz.
   -------------------------------------------------------------------------- */
.izgara {
  display: grid;
  gap: var(--b5);
}

/* Iletisim satirlari. UST SINIR 2 SUTUN.
   Ucuncu bir kisi eklenirse satir 2+1 olur, asla uc yan yana gelmez. */
.izgara--2 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 44rem) {
  .izgara--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Kart izgarasi. UST SINIR 4 SUTUN.
   DIKKAT: _araclar/sayfa-uret.py icindeki dolgu karti kurali
   (len(kart) % 4 == 3) buradaki 4 sayisina baglidir. Sutun sayisi
   degistirilirse o kural da degistirilmek ZORUNDA, yoksa 3'lu satir doger. */
.izgara--4 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 34rem) {
  .izgara--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 70rem) {
  .izgara--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Galeri: sabit 3:4 dikey. Masonry KULLANILMAZ, dusuk cozunurluklu
   kareleri buyutup teshir eder. Galeri ogesi kart degildir (bir <button>),
   uc kart yasaginin kapsami disindadir. */
.izgara--galeri {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--b4);
}

/* Bes fotograftan az olan hizmet galerileri. auto-fill bos rayi cokertmedigi
   icin sagda bos ray kaliyordu. auto-fit cokertir, 22rem tavani fotografi
   buyutmeden ortaya toplar. .izgara--galeri'den SONRA gelmek zorunda. */
.izgara--galeri-az {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 22rem));
  justify-content: center;
}

/* Metin ile görselin yan yana durduğu iki sütun.
   Kaynak çözünürlük tavanı 1600px olduğu için görsel sütunu sınırlıdır. */
.ikili {
  display: grid;
  gap: var(--b7);
  /* center DEGIL: hizmet sayfasinda metin sutunu kisa, gorsel dikey ve uzun.
     Ortalayinca metnin ustunde buyuk bir olu bosluk kaliyordu. Ikisi de
     ustten hizalanir. */
  align-items: start;
}

@media (min-width: 62rem) {
  .ikili {
    grid-template-columns: 1fr minmax(0, 34rem);
    gap: var(--b9);
  }

  .ikili--ters > :first-child {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   ÜSTBİLGİ
   -------------------------------------------------------------------------- */
.ustbilgi {
  position: sticky;
  top: 0;
  z-index: var(--z-ustbilgi);
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

.ustbilgi__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  min-height: var(--ustbilgi-y);
}

@media (min-width: 30rem) {
  .ustbilgi__ic {
    gap: var(--b5);
  }
}

.ustbilgi__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* Logo bir baglanti: dokunma hedefi 44px olmali. Gorsel yuksekligi
     24px ama tiklanabilir alan ustbilgi yuksekligi kadar. */
  min-height: var(--dokunma-y);
  text-decoration: none;
  color: var(--eylem);
}

/* Yatay kilidin en boy orani yaklasik 8:1. 30px yukseklik 246px genislik
   demek; hamburger ile birlikte 390px ekrana SIGMIYOR ve butun sayfayi
   yana itiyordu. Dar ekranda kilit kuculur, genisleyince buyur. */
.ustbilgi__logo svg {
  height: var(--logo-y-dar);
  /* viewBox oraniyla otomatik genisler. Sabit width verilmez ki logo
     yeniden uretildiginde (bosluk degisirse) CSS elle duzeltilmesin. */
  width: auto;
}

@media (min-width: 26rem) {
  .ustbilgi__logo svg {
    height: var(--logo-y-orta);
  }
}

@media (min-width: 48rem) {
  .ustbilgi__logo svg {
    height: var(--logo-y-genis);
  }
}

/* --------------------------------------------------------------------------
   GEZİNME
   -------------------------------------------------------------------------- */
.gezinme {
  display: none;
}

.gezinme__liste {
  display: flex;
  align-items: center;
  gap: var(--b1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gezinme__liste li + li {
  margin-top: 0;
}

.gezinme__baglanti {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma-y);
  padding-inline: var(--b3);
  color: var(--metin);
  font-size: var(--fs-kucuk);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.gezinme__baglanti:hover {
  border-bottom-color: var(--cizgi-guclu);
}

.gezinme__baglanti[aria-current="page"] {
  border-bottom-color: var(--eylem);
}

/* Masaustunde telefon eylemi.
   Iki isi birden yapar: 64rem uzerinde sabit ara cubugu gizlendigi icin
   sitede hic kalici arama eylemi kalmiyordu, ve genis ekranda logo ile
   menu arasinda acilan buyuk bosluk doluyor. */
.ustbilgi__ara {
  display: none;
  align-items: center;
  gap: var(--b2);
  flex: 0 0 auto;
  min-width: var(--dokunma-g);
  min-height: var(--dokunma-y);
  padding-inline: var(--b4);
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius);
  color: var(--metin);
  font-size: var(--fs-kucuk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ustbilgi__ara svg {
  width: var(--ikon-kucuk);
  height: var(--ikon-kucuk);
  flex: 0 0 auto;
}

.ustbilgi__ara__uzun {
  display: none;
}

/* Hamburger düğmesi */
.ustbilgi__acar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  min-width: var(--dokunma-g);
  min-height: var(--dokunma-y);
  padding-inline: var(--b3);
  background: transparent;
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius);
  color: var(--metin);
  font-size: var(--fs-kucuk);
  font-weight: 600;
}

.ustbilgi__acar svg {
  width: var(--ikon-kucuk);
  height: var(--ikon-kucuk);
}

/* Cok dar ekranda dugmenin yazisi gizlenir, dokunma hedefi korunur.
   Erisilebilir ad HTML'deki aria-label ile gelir. */
.ustbilgi__acar__yazi {
  display: none;
}

@media (min-width: 26rem) {
  .ustbilgi__acar__yazi {
    display: inline;
  }
}

/* Masaustunde yatay menu acilir, hamburger kapanir.
   DIKKAT: bu blok .ustbilgi__acar temel kuralindan SONRA gelmek ZORUNDA;
   ayni ozgullukte oldugu icin once yazilirsa temel kural onu ezer. */
@media (min-width: 64rem) {
  .gezinme {
    display: block;
  }

  .ustbilgi__acar {
    display: none;
  }

  .ustbilgi__ara {
    display: inline-flex;
  }
}

/* Yer acildikca kisa "Ara" yerine tam numara yazilir. */
@media (min-width: 75rem) {
  .ustbilgi__ara__kisa {
    display: none;
  }

  .ustbilgi__ara__uzun {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   ÇEKMECE (mobil menü)
   Buzlu cam YOK. Düz opak yüzey.
   -------------------------------------------------------------------------- */
.cekmece {
  position: fixed;
  inset: 0;
  z-index: var(--z-cekmece);
  display: grid;
  grid-template-columns: 1fr min(22rem, 88vw);
}

.cekmece[hidden] {
  display: none !important;
}

.cekmece__perde {
  background: var(--perde);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cekmece__panel {
  display: flex;
  flex-direction: column;
  gap: var(--b5);
  padding: var(--b5) var(--b5) var(--b8);
  background: var(--yesil-100);
  color: var(--beyaz);
  overflow-y: auto;
}

.cekmece__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b4);
  min-height: var(--ustbilgi-y);
}

.cekmece__kapat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dokunma-g);
  min-height: var(--dokunma-y);
  background: transparent;
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius);
  color: inherit;
}

.cekmece__kapat svg {
  width: var(--ikon-kucuk);
  height: var(--ikon-kucuk);
}

.cekmece__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cekmece__liste li + li {
  margin-top: 0;
  border-top: 1px solid var(--cizgi-negatif);
}

.cekmece__baglanti {
  display: flex;
  align-items: center;
  min-height: var(--cekmece-satir-y);
  color: inherit;
  font-size: var(--fs-h4);
  font-weight: 600;
  text-decoration: none;
}

.cekmece__baglanti[aria-current="page"] {
  color: var(--yesil-20);
}

/* --------------------------------------------------------------------------
   ALTBİLGİ
   -------------------------------------------------------------------------- */
.altbilgi {
  padding-block: var(--bolum-y) var(--b7);
  background: var(--yesil-100);
  color: var(--beyaz);
}

.altbilgi__izgara {
  display: grid;
  gap: var(--b7);
  margin-bottom: var(--b8);
}

/* 48-64rem arasi 3 sutun idi ve dort sutunun dorduncusu tek basina alt
   satira dusuyordu (3+1). Iki sutun daha dengeli: 2+2. */
@media (min-width: 48rem) {
  .altbilgi__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .altbilgi__izgara {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

/* Cok genis ekranda sutunlar arasi bosluk buyuyup icerik seyreliyordu.
   En uzun sutun (kurumsal, 9 madde) iki alt sutuna bolunur, altbilgi
   hem kisalir hem genislige yayilir. */
@media (min-width: 85rem) {
  .altbilgi__izgara {
    grid-template-columns: 1.2fr minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.1fr);
    column-gap: var(--b8);
  }

  .altbilgi__liste--iki {
    columns: 2;
    column-gap: var(--b5);
  }

  .altbilgi__liste--iki li {
    break-inside: avoid;
  }
}

.altbilgi__logo svg {
  height: var(--altbilgi-logo-y);
  width: auto;
  max-width: 100%;
  margin-bottom: var(--b4);
}

.altbilgi__baslik {
  margin-bottom: var(--b4);
  font-size: var(--fs-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--yesil-30);
}

.altbilgi__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-kucuk);
}

/* Altbilgi baglantilari liste ogesidir, cumle icinde degil: satir ici
   baglanti istisnasi gecerli DEGIL. Dokunma hedefi 44px olmak zorunda. */
.altbilgi__liste a {
  display: flex;
  align-items: center;
  min-height: var(--dokunma-y);
  /* Kisa kelimeler ("Künye", "Galeri") genislikte esigin altinda kaliyordu */
  min-width: var(--dokunma-g);
  color: inherit;
  text-decoration-color: var(--cizgi-negatif-guclu);
}

.altbilgi__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b3) var(--b7);
  align-items: center;
  /* space-between iki kisa metni ekranin iki ucuna savuruyordu; genis
     ekranda aralarina 1000px'e varan bosluk giriyordu. */
  justify-content: flex-start;
  padding-top: var(--b5);
  border-top: 1px solid var(--cizgi-negatif);
  font-size: var(--fs-mini);
  color: var(--yesil-30);
}

/* --------------------------------------------------------------------------
   MOBİL SABİT ARA ÇUBUĞU
   Referans sitede hiç yok. Yerel esnaf sitesinde en önemli eylem aramaktır.
   -------------------------------------------------------------------------- */
.ara-cubugu {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-ustbilgi);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--yesil-100);
  border-top: 1px solid var(--cizgi-negatif);
}

.ara-cubugu__eylem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  /* Genis tablette hucre 511px'e cikiyordu. Serit tam genislikte kalir,
     dokunma hedefi makul genislikte ortalanir. */
  max-width: 20rem;
  width: 100%;
  margin-inline: auto;
  min-height: var(--ara-cubugu-y);
  padding-inline: var(--b3);
  color: var(--beyaz);
  font-size: var(--fs-kucuk);
  font-weight: 600;
  text-decoration: none;
}

.ara-cubugu__eylem + .ara-cubugu__eylem {
  border-left: 1px solid var(--cizgi-negatif);
}

.ara-cubugu__eylem svg {
  width: var(--ikon-kucuk);
  height: var(--ikon-kucuk);
  flex: 0 0 auto;
}

.ara-cubugu__eylem:focus-visible {
  outline-offset: calc(var(--odak-bosluk) * -2);
  outline-color: var(--beyaz);
}

/* Çubuk içeriği kapatmasın */
body:has(.ara-cubugu) {
  padding-bottom: var(--ara-cubugu-y);
}

@media (min-width: 64rem) {
  .ara-cubugu {
    display: none;
  }

  body:has(.ara-cubugu) {
    padding-bottom: 0;
  }
}