/* Crea Brand Works — blog kartı (anasayfa şeridi, /blog/ listesi, yazı sonundaki "diğer yazılar").
   Kart görseli + tarih rozeti + kategori + başlık; başlık bağlantısı kartın tamamını kaplar.
   Yerleşim (şerit/ızgara) kartı kullanan sayfanın CSS'inde. Masaüstü ölçüleri XD × --u. */

.post__media {
  position: relative;
  aspect-ratio: 450 / 350;
}

/* Sağ alt köşede tarih rozeti için oyuk: 90×90 kesik, iç köşe r40, dış köşeler r20.
   Sağ alt köşe yarıçapı 0: o köşe zaten oyukta kalır; yuvarlatılınca Chrome yayın yumuşatılmış kenarını maskeye
   rağmen çiziyordu → oyuk kenarında ince fotoğraf çizgisi (Emre 2026-10-05; ölçüldü, köşe 0 iken 0 piksel) */
.post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 15px;
  -webkit-mask: linear-gradient(#000 0 0), url("../svg/notch.svg") right bottom / 110px 110px no-repeat;
  -webkit-mask-composite: source-out;
  mask: linear-gradient(#000 0 0), url("../svg/notch.svg") right bottom / 110px 110px no-repeat;
  mask-composite: subtract;
}

.post__date {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-text);
  color: #000;
  font-weight: 800;
}

.post__day {
  font-size: 22px;
  line-height: 22px;
}

.post__month {
  font-size: 14px;
  line-height: 14px;
}

.post__cat {
  margin-top: 24px;
  color: var(--c-subtle);
  font-size: 15px;
  line-height: 22px;
}

.post__title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
}

@media (min-width: 1280px) {
  .post__img {
    border-radius: calc(15 * var(--u)) calc(15 * var(--u)) 0 calc(15 * var(--u));
    -webkit-mask-size: auto, calc(110 * var(--u)) calc(110 * var(--u));
    mask-size: auto, calc(110 * var(--u)) calc(110 * var(--u));
  }

  .post__date {
    right: calc(15 * var(--u));
    bottom: calc(15 * var(--u));
    gap: calc(1 * var(--u));
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
  }

  .post__day {
    font-size: calc(22 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .post__month {
    font-size: calc(14 * var(--u));
    line-height: calc(14 * var(--u));
  }

  .post__cat {
    margin-top: calc(29.87 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .post__title {
    margin-top: calc(9.7 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(30 * var(--u));
  }
}

/* Kartın tamamı yazıya bağlanır: bağlantı başlıkta (okunan ad), ::after kartı kaplar */
.post {
  position: relative;
}

.post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post__link:focus-visible {
  outline: none;
}

.post:has(.post__link:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 6px;
  border-radius: 15px;
}