/* Sayfa iskeleti: kapsayıcı genişliği, bölüm aralıkları, bölüm başlıkları ve iz yolu. */

.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.bolum {
  padding-block: var(--bosluk-bolum);
}

.bolum--cizgili {
  border-top: 1px solid var(--renk-cizgi);
}

/* Arkasında leke veya süsleme yaprağı olan bölüm: süslemeler bölümün dışına taşmaz */
.bolum--lekeli {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bolum-basligi {
  max-width: 46rem;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.bolum-basligi .ikon-rozeti {
  margin-bottom: 18px;
}

.bolum-basligi h2 {
  font-size: var(--boyut-h2);
}

.bolum-basligi p {
  margin-top: 14px;
  font-size: 1.125rem;
  color: var(--renk-soluk);
}

.bolum-basligi--orta {
  margin-inline: auto;
  text-align: center;
}

/* Başlık solda, "Tümünü gör" bağlantısı sağda */
.bolum-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.bolum-ust .bolum-basligi {
  margin-bottom: 0;
}

/* İz yolu: alt sayfaların başında "Anasayfa / …" (hayırseverler, hane detayı) */
.iz-yolu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

.iz-yolu a {
  color: var(--renk-orman);
  font-weight: 600;
}

.iz-yolu a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Küçük üst başlık (hap biçiminde) */
.ust-baslik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--renk-yaprak-acik);
  color: var(--renk-orman);
  font-size: 0.875rem;
  font-weight: 500;
}

.ust-baslik strong {
  font-weight: 700;
}

.ust-baslik .ikon--renkli {
  width: 18px;
  height: 18px;
}

.ust-baslik .susleme {
  width: 16px;
  height: 16px;
  color: var(--renk-yaprak);
}

.ust-baslik--bal {
  background: var(--renk-bal-acik);
  color: var(--renk-bal-koyu);
}

.ust-baslik--mercan {
  background: var(--renk-mercan-acik);
  color: var(--renk-mercan-koyu);
}

.ust-baslik--gok {
  background: var(--renk-gok-acik);
  color: var(--renk-gok);
}

.ust-baslik--beyaz {
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
}

/* Sayfa başı: alt sayfaların (bilgi, form, hayırseverler) ilk bölümü. Beyaz zemin, iz yolu, hap üst başlık,
   serif başlık, giriş metni, el yazısı not; sağda beyaz daire içinde büyük renkli ikon ve süsleme yaprakları.
   İkonun rengi: .sayfa-basi__simge--yaprak/--bal/--gok/--mercan/--altin (varsayılan orman).
   bilesenler.css (.ikon-rozeti) sonra yüklendiği için ikon kuralları .sayfa-basi ile bir kat güçlendirilmiştir. */
.sayfa-basi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--renk-zemin);
}

.sayfa-basi__ic {
  position: relative;
}

.sayfa-basi__yaprak {
  position: absolute;
  color: var(--renk-yaprak-susu);
}

.sayfa-basi__yaprak--1 {
  top: 14%;
  right: 30%;
  width: 60px;
  height: 60px;
  transform: rotate(-20deg);
}

.sayfa-basi__yaprak--2 {
  right: 6%;
  bottom: 10%;
  width: 72px;
  height: 72px;
  transform: scaleX(-1) rotate(-10deg);
}

.sayfa-basi .sayfa-basi__simge {
  position: absolute;
  top: 50%;
  right: max(var(--kenar), calc((100% - var(--kapsayici)) / 2 + 120px));
  width: 132px;
  height: 132px;
  transform: translateY(-50%) rotate(-6deg);
}

.sayfa-basi .sayfa-basi__simge .ikon--renkli {
  width: 64px;
  height: 64px;
}

.sayfa-basi .sayfa-basi__simge--yaprak {
  color: var(--renk-yaprak);
}

.sayfa-basi .sayfa-basi__simge--bal {
  color: var(--renk-bal);
}

.sayfa-basi .sayfa-basi__simge--gok {
  color: var(--renk-gok);
}

.sayfa-basi .sayfa-basi__simge--mercan {
  color: var(--renk-mercan);
}

.sayfa-basi .sayfa-basi__simge--altin {
  color: var(--renk-altin);
}

.sayfa-basi h1 {
  max-width: 46rem;
  font-size: var(--boyut-h1);
}

.sayfa-basi__giris {
  max-width: 40rem;
  margin-top: 14px;
  font-size: var(--boyut-giris);
  color: var(--renk-metin);
}

.sayfa-basi__not {
  margin-top: 14px;
  color: var(--renk-orman);
  transform: rotate(-4deg);
  transform-origin: left;
}

.sayfa-basi__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* bilesenler.css sonra yüklendiği için (.ikon-rozeti, .susleme) seçici bir kat daha güçlü */
@media (max-width: 960px) {
  .sayfa-basi .sayfa-basi__simge,
  .sayfa-basi .sayfa-basi__yaprak--1 {
    display: none;
  }
}

@media (max-width: 560px) {
  .sayfa-basi__eylemler .dugme {
    width: 100%;
  }

  .sayfa-basi .sayfa-basi__yaprak--2 {
    top: 12px;
    right: -14px;
    bottom: auto;
    width: 56px;
    height: 56px;
  }
}