@charset "utf-8";
/* Görünüm → Kartlar → Yazı görselin üstünde
   Görsel kartın tamamını kaplar; alttan koyulaşan geçişin üzerinde beyaz başlık ve açıklama.
   Hizmet ikonu ve "İncele" gibi etiketler sağ üst köşeye çıkar. İşaretleme değişmez. */

.v-kart-yazi-ustunde .card,
.v-kart-yazi-ustunde .card--product,
.v-kart-yazi-ustunde .card--post {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--dark);
  border: 0;
}
.v-kart-yazi-ustunde .card--service { min-height: 360px; }
.v-kart-yazi-ustunde .card--product { min-height: 320px; }
.v-kart-yazi-ustunde .card--post { min-height: 290px; }

/* min-height: inherit — Safari, yüksekliği min-height ile gelen esnek kutuda çocuğu
   esnetmiyor; iç blok kısa kalınca kartın koyu zemini görselin altında şerit gibi
   görünüyordu. Kartın en az yüksekliğini iç blok da alır. */
.v-kart-yazi-ustunde .card .card__inner { position: relative; padding: 0; justify-content: flex-end; min-height: inherit; }

.v-kart-yazi-ustunde .card .card__media {
  position: absolute; inset: 0;
  height: auto;
  padding: 14px;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 0;
}
/* Alttan koyulaşan geçiş; yazı her görselde okunur kalsın. */
.v-kart-yazi-ustunde .card .card__media::after {
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .05) 75%);
}
.v-kart-yazi-ustunde .card:hover .card__media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .12) 85%);
}

.v-kart-yazi-ustunde .card .card__text {
  position: relative; z-index: 2;
  min-height: 0 !important;
  padding: 22px;
}
.v-kart-yazi-ustunde .card .card__title { color: #fff; font-size: 20px; margin-bottom: 8px; }
.v-kart-yazi-ustunde .card--post .card__title { font-size: 17px; margin-bottom: 0; }
.v-kart-yazi-ustunde .card--product .card__title { margin-bottom: 0; }
.v-kart-yazi-ustunde .card .card__desc { color: rgba(255, 255, 255, .86); }

.v-kart-yazi-ustunde .card .card__badge { width: 52px; height: 52px; }
.v-kart-yazi-ustunde .card .card__badge svg { width: 28px; height: 28px; }

/* Alt hizmet ve ürün listeleri */
.v-kart-yazi-ustunde .subcard { position: relative; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); }
.v-kart-yazi-ustunde .subcard__inner { position: relative; padding: 0; }
.v-kart-yazi-ustunde .subcard__media,
.v-kart-yazi-ustunde .subcard--product .subcard__media { height: 280px; }
.v-kart-yazi-ustunde .subcard__media img { transition: transform .6s ease; }
.v-kart-yazi-ustunde .subcard:hover .subcard__media img { transform: scale(1.05); }
.v-kart-yazi-ustunde .subcard__body,
.v-kart-yazi-ustunde .subcard--product .subcard__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 60px 20px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
}
.v-kart-yazi-ustunde .subcard__title,
.v-kart-yazi-ustunde .subcard--product .subcard__title {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-size: 18px; line-height: 1.25;
  text-align: left;
}
.v-kart-yazi-ustunde .subcard__desc,
.v-kart-yazi-ustunde .subcard--product .subcard__desc { margin-top: 6px; padding: 0; text-align: left; color: rgba(255, 255, 255, .86); }
.v-kart-yazi-ustunde .card--product .card__desc { margin-top: 6px; }
.v-kart-yazi-ustunde .subcard__badge { top: 14px; right: 14px; bottom: auto; z-index: 3; }

@media (max-width: 767px) {
  .v-kart-yazi-ustunde .card--service { min-height: 320px; }
  .v-kart-yazi-ustunde .subcard__media,
  .v-kart-yazi-ustunde .subcard--product .subcard__media { height: 240px; }
}