/* Bölüm 11 · Paran yoksa da iyilik yapabilirsin: üç pastel renkli kart */

.imece__yaprak {
  position: absolute;
  top: 10%;
  right: 3%;
  width: 84px;
  height: 84px;
  color: var(--renk-yaprak-susu);
  transform: rotate(24deg);
}

.imece__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

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

.imece__not {
  margin-left: auto;
  margin-right: clamp(0px, 6vw, 96px);
  padding-bottom: 8px;
  color: var(--renk-orman);
  transform: rotate(-5deg);
}

.imece-listesi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.imece-karti a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 28px 26px 76px;
  border-radius: var(--yaricap-kocaman);
  background: var(--renk-mercan-zemin);
  transition: transform 0.2s, box-shadow 0.2s;
}

.imece-karti a:hover {
  box-shadow: var(--golge-yumusak);
  transform: translateY(-3px);
}

.imece-karti .ikon-rozeti {
  margin-bottom: 20px;
  color: var(--renk-mercan);
}

.imece-karti h3 {
  font-size: 1.375rem;
}

.imece-karti p {
  margin-top: 8px;
  color: var(--renk-metin);
}

.imece-karti__ok {
  position: absolute;
  left: 26px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--renk-zemin);
  color: var(--renk-murekkep);
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.imece-karti a:hover .imece-karti__ok {
  background: var(--renk-orman);
  color: var(--renk-zemin);
  transform: translateX(3px);
}

.imece-karti--gok a {
  background: var(--renk-gok-acik);
}

.imece-karti--gok .ikon-rozeti {
  color: var(--renk-gok);
}

.imece-karti--yaprak a {
  background: var(--renk-yaprak-acik);
}

.imece-karti--yaprak .ikon-rozeti {
  color: var(--renk-yaprak);
}

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

  .imece__yaprak {
    display: none;
  }
}