/* ==========================================================================
   3-DUZEN.CSS  —  Kapsayıcı, üst menü, alt bilgi, bölüm aralıkları
   ========================================================================== */

.kap { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 26px; }
.kap-dar { max-width: 820px; }

.bolum { padding: 100px 0; }
.bolum-dar { padding: 64px 0; }
.bolum-koyu { background: var(--koyu); color: var(--yazi-ters); }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-koyu p { color: rgba(244,247,241,.76); }
.bolum-acik { background: var(--kart); }
.bolum-yesil { background: var(--yesil-sis); }

.bolum-basi { max-width: 64ch; margin-bottom: 48px; }
.bolum-basi.orta { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Duyuru bandı --------------------------------------------------------- */
.bant {
  background: var(--koyu-2);
  color: rgba(244,247,241,.86);
  font-size: .9rem;
  padding: 10px 0;
  letter-spacing: -.005em;
}
.bant .kap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.bant a { color: var(--yesil-acik); font-weight: 600; }
.bant a:hover { color: #fff; }

/* --- Üst menü ------------------------------------------------------------
   Saydam buzlu katman: içerik altından akar. Sayfa kaydırıldığında yüzey
   hafifçe belirginleşir; sabit bir çizgi yerine yumuşak bir gölge kullanılır.
   -------------------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.ust.kaydi {
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 20px rgba(22,32,42,.06);
}
.ust .kap { display: flex; align-items: center; gap: 26px; height: 74px; }

.logo { display: flex; align-items: center; gap: 11px; flex: none; transition: transform .1s ease-out; }
.logo:active { transform: scale(.97); }
.logo img { height: 40px; width: auto; }
.logo-yazi { display: flex; flex-direction: column; line-height: 1.1; }
.logo-yazi b {
  font-family: var(--f-baslik); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--koyu);
}
.logo-yazi small {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--yesil-koyu); margin-top: 1px;
}

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a {
  padding: 9px 13px;
  white-space: nowrap;
  font-size: .96rem; font-weight: 500; color: var(--yazi-2);
  border-radius: var(--r-tam);
  transition: background var(--hizli), color var(--hizli);
}
.menu > a:hover { background: rgba(22,32,42,.05); color: var(--koyu); }
.menu > a.aktif { color: var(--koyu); font-weight: 600; }

/* Menü içindeki buton, menü bağlantı renginden etkilenmemeli */
.menu > a.dugme { margin-left: 10px; }
.menu > a.dugme-ana,
.menu > a.dugme-ana:hover { color: #fff; background: var(--yesil); }
.menu > a.dugme-ana:hover { background: var(--yesil-koyu); }
.menu > a.dugme-koyu,
.menu > a.dugme-koyu:hover { color: #fff; }

.menu-dugme {
  display: none; margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  background: rgba(22,32,42,.06); color: var(--koyu);
  border: 0; border-radius: var(--r-tam);
  font-size: 1.3rem; cursor: pointer;
  transition: background var(--hizli), transform .1s ease-out;
}
.menu-dugme:active { transform: scale(.94); }

/* --- Alt bilgi ------------------------------------------------------------ */
.alt-bilgi { background: var(--koyu); color: rgba(244,247,241,.72); padding: 74px 0 0; }
.alt-bilgi a { color: rgba(244,247,241,.72); }
.alt-bilgi a:hover { color: var(--yesil-acik); }
.alt-izgara {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 44px;
  padding-bottom: 50px;
}
.alt-bilgi h4 { color: #fff; font-size: .95rem; letter-spacing: -.005em; margin-bottom: 16px; }
.alt-liste { list-style: none; margin: 0; padding: 0; }
.alt-liste li { margin-bottom: 10px; font-size: .95rem; }
.alt-cizgi {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .88rem; color: rgba(244,247,241,.5);
}
.alt-logo img { height: 66px; margin-bottom: 18px; }

/* --- Sayfa başlığı (iç sayfalar) ------------------------------------------ */
.sayfa-basi {
  background: var(--koyu);
  color: var(--yazi-ters);
  padding: 72px 0 66px;
  position: relative;
  overflow: hidden;
}
.sayfa-basi::after {
  content: "";
  position: absolute; right: -140px; top: -190px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(124,179,66,.16), transparent 68%);
  pointer-events: none;
}
.sayfa-basi .kap { position: relative; z-index: 1; }
.sayfa-basi h1 { color: #fff; margin-bottom: 14px; }
.sayfa-basi p { color: rgba(244,247,241,.76); max-width: 62ch; font-size: 1.1rem; }
.yol { font-size: .88rem; color: rgba(244,247,241,.5); margin-bottom: 20px; }
.yol a { color: rgba(244,247,241,.7); }
.yol span { margin: 0 8px; }

/* --- Izgaralar ------------------------------------------------------------ */
.izgara { display: grid; gap: 22px; }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }

.kart {
  background: var(--kart);
  border: 1px solid var(--hat);
  border-radius: var(--r-buyuk);
  padding: 30px;
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}
.kart-tikla:hover { box-shadow: var(--golge-2); transform: translateY(-3px); border-color: transparent; }