/* ==========================================================================
   BİLEŞENLER — buton, bağlantı, başlık alanı, üstbilgi, altbilgi
   ========================================================================== */

/* ——— Buton: referanstaki tam yuvarlak koyu düğme ——— */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--renk-murekkep);
  border-radius: var(--yuvarlak-buton);
  background: var(--renk-murekkep);
  color: var(--renk-kagit);
  font-size: var(--olcu-kucuk);
  font-weight: var(--agirlik-orta);
  text-decoration: none;
  transition: background var(--gecis), color var(--gecis);
}

.dugme:hover { background: transparent; color: var(--renk-murekkep); }

.dugme--acik {
  background: transparent;
  border-color: var(--renk-kagit);
  color: var(--renk-kagit);
}
.dugme--acik:hover { background: var(--renk-kagit); color: var(--renk-murekkep); }

.dugme__ok { transition: transform var(--gecis); }
.dugme:hover .dugme__ok { transform: translateX(3px); }

/* ——— Metin bağlantısı: "Detaylı Bilgi →" ——— */
.baglanti {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--renk-murekkep);
  font-size: var(--olcu-kucuk);
  text-decoration: none;
  border-bottom: 1px solid var(--renk-murekkep);
  padding-bottom: 2px;
}
.baglanti svg { transition: transform var(--gecis); }
.baglanti:hover svg { transform: translateX(3px); }

/* ——— Üstbilgi ——— */
.ustbilgi {
  position: relative;
  z-index: 10;
  background: var(--renk-kagit);
  border-bottom: 1px solid var(--renk-cizgi);
}

.ustbilgi__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}

.marka { display: inline-flex; flex-direction: column; text-decoration: none; }
.marka__ad {
  color: var(--renk-murekkep);
  font-size: 1.6rem;
  font-weight: var(--agirlik-ince);
  letter-spacing: .34em;
  line-height: 1;
}
.marka__alt {
  margin-top: .45rem;
  color: var(--renk-solgun);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gezinme { display: flex; align-items: center; gap: 2rem; }
.gezinme ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }

/* :not(.dugme) ŞART. Bu kural butonu da kapsadığında, daha özgül olduğu için
   .dugme'nin beyaz metin rengini eziyor ve koyu zemin üzerinde kontrast
   1.97:1'e düşüyordu (alt sınır 4.5:1). Menü bağlantısı ile buton aynı
   kapsayıcıda yaşadığı sürece bu ayrım korunmalı. */
.gezinme a:not(.dugme) {
  color: var(--renk-murekkep-acik);
  font-size: var(--olcu-kucuk);
  text-decoration: none;
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.gezinme a:not(.dugme):hover { color: var(--renk-murekkep); }
.gezinme .current-menu-item > a,
.gezinme .current_page_item > a {
  color: var(--renk-murekkep);
  border-bottom-color: var(--renk-murekkep);
}

/* Mobil menü düğmesi — davranışı site.js'te. */
.menu-dugmesi {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--renk-murekkep);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .menu-dugmesi { display: grid; place-items: center; }
  .gezinme {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--kenar);
    background: var(--renk-kagit);
    border-bottom: 1px solid var(--renk-cizgi);
  }
  .gezinme.acik { display: flex; }
  .gezinme ul { flex-direction: column; gap: 0; }
  .gezinme li { border-bottom: 1px solid var(--renk-cizgi); }
  .gezinme a:not(.dugme) { display: block; padding: .9rem 0; font-size: 1rem; }
  .gezinme .dugme { margin-top: 1.2rem; justify-content: center; }
}

/* ——— Altbilgi ——— */
.altbilgi {
  padding-block: 3.5rem 2rem;
  background: var(--renk-tas);
  border-top: 1px solid var(--renk-cizgi);
}
.altbilgi__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.altbilgi__kunye {
  width: 100%;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--renk-cizgi);
  color: var(--renk-solgun);
  font-size: .8125rem;
}

/* Ana sayfa menü ögesi simgeye döndü; bağlantının tıklanabilir alanı
   yazıdan dar kalmasın diye hizalama ve alt çizgi payı ayrıca verildi. */
.gezinme a:not(.dugme):has(.gezinme__ev) { display: inline-flex; align-items: center; }
.gezinme__ev { display: block; }

@media (max-width: 1024px) {
  /* Mobil menüde simge tek başına ne olduğu anlaşılmıyor; yazı geri gelir. */
  .gezinme__ev { display: none; }
  .gezinme a .gizli-okunur {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none; white-space: normal;
  }
}