/* ==========================================================================
   reports.css — Sürdürülebilirlik raporu kartları
   Gereksinim: _variables.css, _typography.css + Bootstrap 5 (grid)
   ========================================================================== */

.df-rep-grid {
    padding-block: var(--section-md);
}

.df-rep {
    height: 100%;
    padding: clamp(20px, 2vw, 30px);
    background: var(--neutral-FFFFFF);
    border: 1px solid var(--neutral-E0E0E0);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border-radius: 30px;
}

/* Görsel + gri filtre + kırmızı katman --------------------------------- */
.df-rep__media {
    position: relative;
    display: block;
    isolation: isolate; /* multiply yalnızca görsele uygulansın */
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    backdrop-filter: grayscale(1);
}
.df-rep__media:before {
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translate(-50%);
    width:calc(100% + clamp(20px, 2vw, 30px));
    height:100%;
    max-height:clamp(100px,13vw,180px);
    background:url("../../img/reports-overlay.svg") center/cover no-repeat;
    z-index:1;
}

.df-rep__img {
    width: 100%;
    border-radius: 24px;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.05);
    transition: transform var(--transition-slow);
}

.df-rep__overlay {
    position: absolute;
    inset: 15px;
    background: #C16C70; /* kırmızı katman */
    mix-blend-mode: multiply;
    border-radius: 15px;
    transition: transform var(--transition-base);
    z-index: 3;
}

/* Orta buton */
.df-rep__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: clamp(3rem, 4vw, 3.5rem);
    height: clamp(3rem, 4vw, 3.5rem);
    border-radius: var(--radius-full);
    background: var(--red-D11019);
    box-shadow: 0 0 0 6px rgba(209, 16, 25, 0.18), var(--shadow-red);
    z-index: 3;
    transition: transform var(--transition-base);
}

    .df-rep__btn svg {
        width: 44%;
        height: 44%;
    }

/* Hover */
.df-rep__media:hover .df-rep__img {
    transform: scale(1.05);
}

.df-rep__media:hover .df-rep__btn {
    transform: translate(-50%, -50%) scale(1.08);
}

.df-rep__media:hover .df-rep__overlay {
    transform: scale(1.05);
}

/* Başlık ----------------------------------------------------------------- */
.df-rep__title {
    margin-top: var(--space-8);
    line-height: var(--lh-snug);
}