/* ==========================================================================
   Ç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--sik {
  padding-block: calc(var(--bolum-y) * 0.55);
}

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

.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;
}

/* --------------------------------------------------------------------------
   IZGARA
   Yan yana 3 özellik kartı YASAK. Kart ızgaraları 2 veya 4 sütuna kurulur;
   auto-fit ile 1 ile 9 arası öğede bozulmadan çalışır.
   -------------------------------------------------------------------------- */
.izgara {
  display: grid;
  gap: var(--b5);
}

.izgara--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.izgara--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Galeri: sabit 3:4 dikey. Masonry KULLANILMAZ, düşük çözünürlüklü
   kareleri büyütüp teşhir eder. */
.izgara--galeri {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--b4);
}

/* 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);
  align-items: center;
}

@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;
  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);
  margin-right: auto;
  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: 24px;
  /* 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: 28px;
  }
}

@media (min-width: 48rem) {
  .ustbilgi__logo svg {
    height: 34px;
  }
}

/* --------------------------------------------------------------------------
   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);
}

/* 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: 20px;
  height: 20px;
}

/* 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;
  }
}

/* --------------------------------------------------------------------------
   Ç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: rgba(10, 10, 10, 0.55);
  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: 20px;
  height: 20px;
}

.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: 52px;
  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(--b9) var(--b6);
  background: var(--yesil-100);
  color: var(--beyaz);
}

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

@media (min-width: 48rem) {
  .altbilgi__izgara {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

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

.altbilgi__logo svg {
  height: 36px;
  width: auto;
  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(--b5);
  align-items: center;
  justify-content: space-between;
  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);
  min-height: 56px;
  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: 20px;
  height: 20px;
  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: 56px;
}

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

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