/* ---- Megamenu: Cards ---- */

.mega-card {
  background: var(--neutral-E0E0E0);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.mega-card_img_wrapper {
  position: relative;
  padding: clamp(7px, 0.7vw, 10px);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  background-color: var(--neutral-FFFFFF);
}
.mega-card_img_wrapper img {
  border-radius: var(--radius-sm);
}

.mega-card__img {
  width: 100%;
  height: 100%;
  background: var(--neutral-E0E0E0);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: var(--space-5);
  border-radius: var(--radius-sm);
}

.mega-card__img svg {
  margin-bottom: 10px;
}

.mega-card.df-card-circle {
  border-radius: var(--radius-full);
}
.mega-card.df-card-circle .mega-card__img,
.mega-card.df-card-circle .mega-card_img_wrapper {
  border-radius: var(--radius-full);
}

/* Slogan text wrapper */

.slogan-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--neutral-FFFFFF);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: var(--df-text-fs-16);
  color: var(--neutral-4E4E4E);
  width: fit-content;
  height: fit-content;
}
.slogan-pill:not(.no-pseudo)::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 1px;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--red-FCC5C8);
  pointer-events: none;
}

.slogan-pill svg {
  width: clamp(14px, 1.5vw, 16px);
  min-width: clamp(14px, 1.5vw, 16px);
  height: clamp(14px, 1.5vw, 16px);
  fill: none;
  flex-shrink: 0;
}
.slogan-pill--center {
  align-self: center;
}
.slogan-pill--right {
  align-self: flex-end;
}

.slogan-pill.gray-pill {
  background-color: var(--neutral-E0E0E0);
  color: var(--neutral-1A1818);
}
.slogan-pill.transparent-soft-pill {
  background-color: #ffffff63;
  backdrop-filter: blur(20px);
  color: var(--neutral-1A1818);
}

/* --------------------------------------------------------------------------
   POST CARD — görsel + editör metni + tarih, köşede marka rozeti
   Rozet rengi data-platform ile gelir (bkz. utilities.css)
   -------------------------------------------------------------------------- */

.df-post-card {
  --card-pad: clamp(18px, 1.4vw, 30px);
  --card-radius: clamp(18px, 1.4vw, 30px);
  position: relative;
  display: block;
  padding: var(--card-pad);
  border: 1px solid var(--neutral-E0E0E0);
  border-radius: var(--card-radius);
  background: var(--neutral-FFFFFF);
  color: inherit;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

a.df-post-card:hover {
  border-color: var(--platform-color, var(--red-FA9EA3));
  box-shadow: var(--shadow-md);
  color: inherit;
}

.df-post-card__media {
  position: relative;
  margin-bottom: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--neutral-F5F5F5);
  aspect-ratio: var(--card-ratio, 16 / 9);
  overflow: hidden;
}

.df-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: inset 0px 0px 20px 19px #ffffff;
}

/* Karta göre konumlanır — media overflow:hidden olduğu için içine konmaz */
.df-post-card__badge {
  position: absolute;
  top: 0;
  left: calc(var(--card-pad) * 2);
  z-index: 2;
  display: grid;
  place-items: end;
  width: clamp(26px, 2.4vw, 28px);
  height: clamp(26px, 2.4vw, 36px);
  border-radius: var(--radius-sm);
  background: var(--platform-bg, var(--red-D11019));
  color: var(--neutral-FFFFFF);
}

.df-post-card__badge svg {
  width: 100%;
}

.df-post-card__date {
  display: block;
  margin-top: var(--card-pad);
  font-size: var(--df-text-fs-12);
  color: var(--neutral-A3A3A3);
}

/* --------------------------------------------------------------------------
   DOWNLOAD CARD — önizleme + başlık + format bilgisi, hover'da indirme aksiyonu
   Önizleme zemini: style="--dc-preview-bg: ..."
   -------------------------------------------------------------------------- */

.df-download-card {
  --dc-pad: clamp(20px, 1.6vw, 30px);
  --dc-radius: clamp(20px, 1.6vw, 30px);
  --dc-preview-bg: var(--neutral-FFFFFF);
  --dc-preview-ratio: 3 / 2;
  --dc-accent: var(--red-D11019);
  display: block;
  height: 100%;
  padding: var(--dc-pad);
  border: 1px solid var(--neutral-E0E0E0);
  border-radius: var(--dc-radius);
  background: var(--neutral-FFFFFF);
  color: inherit;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.df-download-card:hover {
  border-color: var(--red-F8777E);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.df-download-card__preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--dc-preview-ratio);
  padding: clamp(20px, 2.5vw, 40px);
  margin-bottom: var(--dc-pad);
  border: 1px solid var(--neutral-E0E0E0);
  border-radius: calc(var(--dc-radius) - 6px);
  background: var(--dc-preview-bg);
  overflow: hidden;
}

.df-download-card__preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.df-download-card__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dc-accent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.df-download-card:hover .df-download-card__preview::after {
  opacity: 0.35;
}

.df-download-card__action {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  border-radius: var(--radius-full);
  background: var(--dc-accent);
  color: var(--neutral-FFFFFF);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.df-download-card__action::after {
  content: "";
  position: absolute;
  inset: -5px;
  background-color: #ffffff30;
  backdrop-filter: blur(2px);
  z-index: 1;
  border-radius: 50%;
}

.df-download-card:hover .df-download-card__action,
.df-download-card:focus-visible .df-download-card__action {
  opacity: 1;
  transform: none;
}

.df-download-card__action svg {
  width: 46%;
  height: 46%;
  z-index: 3;
}

.df-download-card__title {
  display: block;
  font-size: var(--df-text-fs-16);
  line-height: var(--lh-snug);
  color: var(--neutral-1A1818);
}

.df-download-card__meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--df-text-fs-16);
  line-height: var(--lh-snug);
  color: var(--neutral-1A1818);
}

.df-download-card__meta b {
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   NEWS CARD — duyuru / haber kartı. Rozet rengi: style="--news-accent: ..."
   .df-news-card--row → görsel solda, içerik sağda (detay sayfası altı)
   -------------------------------------------------------------------------- */



.df-news-card {
  --news-pad: clamp(20px, 1.6vw, 30px);
  --news-radius: clamp(20px, 1.6vw, 30px);
  --news-accent: var(--neutral-1A1818);
  position: relative;
  display: flex;
  flex-direction:column;
  height: 100%;
  padding: var(--news-pad);
  border: 1px solid var(--neutral-E0E0E0);
  border-radius: var(--news-radius);
  background: var(--neutral-FFFFFF);
  color: inherit;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.emergency-card-wrapper .df-news-card {
    --news-accent: var(--red-980B12);
}

.df-news-card:hover {
  border-color: var(--news-accent);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.df-news-card__badge {
  position: absolute;
  top: 0;
  left: calc(var(--news-pad) * 2);
  z-index: 2;
  padding: 8px 16px;
  border-radius: 3px;
  background: var(--news-accent);
  color: var(--neutral-FFFFFF);
  font-size: var(--df-text-fs-16);
  font-weight:bold;
}

.df-news-card__media {
  margin-bottom: var(--news-pad);
  border-radius: calc(var(--news-radius) - 6px);
  background: var(--neutral-F5F5F5);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.df-emergency-card__media {
  margin-bottom: var(--news-pad);
/*  border-radius: clamp(20px,1.5vw,30px);
*/  aspect-ratio: 1/1;
  overflow: hidden;
}

.df-news-card__media img,
.df-emergency-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.df-card-content{
    padding:0 15px;
    gap:20px;
}

.df-news-card__date {
    display: block;
    margin-bottom: 10px;;
    font-size: var(--df-text-fs-12);
    color: var(--neutral-A3A3A3);
}

.df-news-card__title {
    display: block;
    font-size: var(--df-text-fs-18);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--neutral-292929);
}

.df-news-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--df-text-fs-18);
    line-height: var(--lh-snug);
    color: var(--neutral-292929);
    flex-grow:1;
}

.df-news-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--df-text-fs-16);
    color: var(--red-D11019);
}

.df-news-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.df-news-card:hover .df-news-card__more svg {
  transform: translateX(4px);
}

.df-news-card-row-content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:16px;
}
/* Yatay varyant */
@media (min-width: 768px) {
    .df-news-card--row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
        gap: var(--news-pad);
        border: 1px solid transparent;
    }

        .df-news-card--row .df-news-card__media {
            margin-bottom: 0;
        }

    .df-news-card.df-news-card--row .df-news-card__summary {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Statistics card component (exam:we page)*/

.df-statistics-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-radius: 4px;
}
.df-statistics-card .st-value {
  font-size: var(--df-text-fs-80);
  color: var(--neutral-F5F5F5);
  font-family: var(--font-display);
}
.df-statistics-card .st-text {
  font-size: var(--df-text-fs-18);
  color: var(--neutral-F5F5F5);
  line-height: 24px;
  font-weight: var(--fw-regular);
}

@media (max-width: 769px) {
  .df-statistics-card {
    gap: 10px;
    padding: 20px;
  }
}
@media (max-width: 577px) {
  .df-statistics-card {
    padding: 5px 10px;
  }
}


/* --------------------------------------------------------------------------
   Sausage Card — sosis kart yapısı
   Yeni firma müraacat belgeleri sayfasında kullanılıyor.
   -------------------------------------------------------------------------- */

.df-sausage-card {
    padding: clamp(14px, 1vw, 15px) clamp(18px, 1.1vw, 18px);
    height: clamp(50px, 3.4vw, 62px);
    border-radius: clamp(20px, 2vw, 24px);
    color: var(--neutral-F5F5F5);
    display: flex;
    gap: clamp(20px, 2vw, 40px);
    justify-content: space-between;
    align-items: center;
    font-size: var(--df-text-fs-16);
    background-color: var(--neutral-141414);
    font-weight: 300;
    line-height: 1.1;
}

    .df-sausage-card .download-btn {
        width: clamp(25px, 2vw, 30px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: #c61c22;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
        z-index: 1;
        box-shadow: 0 0 6px 6px rgb(255 255 255 / 0.02), 0 0 5px 0px rgb(198 28 34 / 0.45);
    }

        .df-sausage-card .download-btn::before {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            background: rgb(198 28 34 / 51%);
            filter: blur(12px);
            z-index: -2;
        }

        .df-sausage-card .download-btn::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: rgb(198 28 34 / 30%);
            filter: blur(4px);
            z-index: -1;
        }

        .df-sausage-card .download-btn svg {
            width: 50%;
            height: 50%;
            position: relative;
            z-index: 2;
        }