/* Bölüm 10 · Son destekler (destek bildirimleri ve hane yorumları) */

.son-destekler__leke {
  top: -10%;
  right: -12%;
  width: 36%;
  height: 46%;
  opacity: 0.7;
}

.son-destekler__yaprak {
  position: absolute;
  bottom: 6%;
  left: 3%;
  width: 72px;
  height: 72px;
  color: var(--renk-yaprak-susu);
  transform: rotate(-18deg);
}

.son-destekler__ic {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px clamp(40px, 6vw, 88px);
  align-items: start;
}

.son-destekler__sol {
  position: sticky;
  top: calc(var(--ust-menu-yuksekligi) + 32px);
}

/* Üç kısa adım: renkli ikonlu, aralarında kesik çizgi */
.mini-adimlar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 0.9375rem;
  color: var(--renk-metin);
}

.mini-adimlar li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.mini-adimlar li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  left: 23px;
  height: 14px;
  border-left: 2px dashed var(--renk-cizgi-koyu);
}

.mini-adimlar strong {
  color: var(--renk-murekkep);
}

.son-destekler__ad-notu {
  margin-top: 22px;
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

/* Akış kartları */
.akis-listesi {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.akis-karti {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
}

.akis-karti .avatar {
  width: 46px;
  height: 46px;
  font-size: 0.875rem;
}

.akis-karti__govde {
  flex: 1;
  min-width: 0;
}

.akis-karti__baslik {
  font-size: 1rem;
  color: var(--renk-metin);
}

.akis-karti__baslik strong {
  color: var(--renk-murekkep);
}

.akis-karti__bilgi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

.akis-karti__kalem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: var(--renk-bal-acik);
  font-weight: 700;
  color: var(--renk-bal-koyu);
}

.akis-karti__kalem .ikon {
  width: 18px;
  height: 18px;
  stroke: var(--renk-bal-acik);
}

.akis-karti__kalem--altin .ikon {
  color: var(--renk-altin);
}

.akis-karti__kalem--bal .ikon {
  color: var(--renk-bal);
}

.akis-karti__kalem--gok {
  background: var(--renk-gok-acik);
  color: var(--renk-gok);
}

.akis-karti__kalem--gok .ikon {
  stroke: var(--renk-gok-acik);
}

/* Hanenin teşekkürü: konuşma balonu */
.akis-karti__yorum {
  position: relative;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 4px 18px 18px 18px;
  background: var(--renk-tereyag);
  font-family: var(--yazi-baslik);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--renk-murekkep);
}

.akis-karti__yorum::before {
  content: "";
  position: absolute;
  top: 0;
  left: -9px;
  border-top: 12px solid var(--renk-tereyag);
  border-left: 10px solid transparent;
}

.akis-karti__durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--renk-yaprak-acik);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--renk-yaprak-koyu);
}

.akis-karti__durum .ikon {
  width: 20px;
  height: 20px;
  color: var(--renk-yaprak);
}

.akis-karti__hane {
  display: flex;
  width: fit-content;
  margin-top: 10px;
}

.akis-karti__durum--bekliyor {
  background: var(--renk-gri);
  color: var(--renk-soluk);
}

.akis-karti__durum--bekliyor .ikon {
  color: var(--renk-gumus);
}

.son-destekler__not {
  margin-top: 24px;
  font-size: 0.8125rem;
  color: var(--renk-soluk);
}

@media (max-width: 900px) {
  .son-destekler__ic {
    grid-template-columns: 1fr;
  }

  .son-destekler__sol {
    position: static;
  }

  .son-destekler__yaprak {
    display: none;
  }
}

@media (max-width: 480px) {
  .akis-karti {
    gap: 12px;
    padding: 18px 16px;
  }

  .akis-karti .avatar {
    width: 38px;
    height: 38px;
  }
}