﻿/* === News (Festival palette) === */
:root {
    --news-bordo: #6A1B1A; /* primary */
    --news-gold: #C49A3C; /* accent */
    --news-ivory: #F9F6F2; /* bg */
    --news-dark: #2E2E2E; /* text */
    --news-radius: .9rem;
    --news-shadow-sm: 0 6px 18px rgba(0,0,0,.12);
    --news-shadow: 0 10px 28px rgba(0,0,0,.16);
}

/* PageHero sende; burada içerik elemanları var */
.news-subnav {
    padding-top: 10px

}

.news-toolbar {
    display: grid;
    gap: 12px;
    align-items: end;
    grid-template-columns: minmax(220px,1fr) 140px 160px 160px auto;
}

.news-search {
    position: relative
}

    .news-search .bi {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .6
    }

    .news-search input {
        padding-left: 34px
    }

    .news-search .clear {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #666;
        font-weight: 700;
        font-size: 18px;
        line-height: 1
    }

.news-filter-select select {
    min-height: 32px
}

.news-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.news-active-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap
}

/* Grid + Card */
.news-list {
    margin: 10px 0 26px
}

.news-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0,1fr));

}

.news-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--news-radius);
    box-shadow: var(--news-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.nc-media {
    display: block;
    aspect-ratio: 16/9;
    background: #eee;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden; /* ken burns için */
    transition: background-size .8s ease, transform .6s ease;
}

    .nc-media.no-img {
        background: linear-gradient(135deg,#eee,#ddd)
    }

.nc-date-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    border-radius: 999px;
    background: var(--news-bordo);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    padding: 6px 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    border: 1px solid rgba(196,154,60,.7); /* gold kontur */
}

.nc-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.nc-title {
    font-size: 1.06rem;
    line-height: 1.35;
    margin: 0
}

    .nc-title a {
        color: #111;
        text-decoration: none
    }

        .nc-title a:hover {
            color: var(--news-bordo)
        }

.nc-excerpt {
    margin: 0;
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nc-more {
    margin-top: auto
}

.btn-link {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    color: var(--news-bordo);
    border-bottom: 2px solid rgba(106,27,26,.25);
    padding-bottom: 2px
}

    .btn-link:hover {
        border-color: var(--news-bordo)
    }

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--news-shadow);
    transition: .2s ease
}

/* Görsel animasyonlar */
@media (prefers-reduced-motion:no-preference) {
    /* Yumuşak reveal */
    .reveal-up {
        animation: reveal-up .45s ease both
    }

    @keyframes reveal-up {
        from {
            opacity: 0;
            transform: translateY(8px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    /* Ken Burns (sayfa yüklenince hafif zoom/pan) */
    .nc-media {
        animation: kenburns 8s ease-out both;
    }

    @keyframes kenburns {
        0% {
            background-size: 100%;
            transform: translateZ(0)
        }

        100% {
            background-size: 108%
        }
    }

    /* Hover’da hafif yakınlaşma ve parallax */
    .news-card:hover .nc-media {
        background-size: 112%;
        transform: scale(1.02);
    }
}

/* Empty state */
.news-empty-ico {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 8px
}

/* Focus stilleri (erişilebilirlik) */
.news-search input:focus {
    outline: 2px solid rgba(106,27,26,.2);
    border-color: rgba(106,27,26,.35);
    box-shadow: 0 0 0 3px rgba(106,27,26,.12);
}

a:focus-visible {
    outline: 2px solid rgba(106,27,26,.6);
    outline-offset: 2px;
    border-radius: .5rem;
}

/* Tek öğe merkezleme (büyük ekranda boşluk hissini azalt) */
@supports(selector(:has(*))) {
    .news-grid:has(> :only-child) {
        grid-template-columns: minmax(280px, 680px);
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0,1fr))
    }
}

@media (max-width: 768px) {
    .news-toolbar {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }

    .news-actions {
        grid-column: 1/-1
    }
}

@media (max-width: 640px) {
    .news-grid {
        grid-template-columns: 1fr
    }

    .nc-date-badge {
        top: 8px;
        right: 8px;
        font-size: .72rem;
        padding: 5px 8px
    }
}
/* === Toolbar'ı kutu içine al (drop-in, markup değişmez) === */
.news-subnav .news-toolbar {
    background: var(--news-ivory);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--news-shadow-sm);
    border-radius: 12px;
    padding: 14px;
    align-items: end;
}

    /* İç form elemanları biraz nefes alsın */
    .news-subnav .news-toolbar .form-control,
    .news-subnav .news-toolbar .form-select {
        background: #fff;
    }

/* === Haber kartı hover efektini güçlendir === */
/* Görsel üzerinde yumuşak vignette ve parıltı */
.nc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.18), rgba(0,0,0,0) 60%), linear-gradient(to bottom, rgba(0,0,0,0) 65%, rgba(0,0,0,.08));
    opacity: .0;
    transition: opacity .25s ease;
}

.news-card:hover .nc-media::after {
    opacity: .9
}

/* Kartın kendisine daha rafine lift */
.news-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .news-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--news-shadow);
        border-color: rgba(0,0,0,.10);
    }

/* Başlık altında altın vurgulu çizgi animasyonu */
.nc-title a {
    background-image: linear-gradient(currentColor,currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: color .2s ease, background-size .25s ease;
}

.news-card:hover .nc-title a {
    color: var(--news-bordo);
    background-size: 100% 2px;
}

/* === Tek kart senaryosunda kompaktlaştır (daha küçük görünüm) === */
@supports(selector(:has(*))) {
    /* genişliği biraz daralt */
    .news-grid:has(> :only-child) {
        grid-template-columns: minmax(280px, 560px);
        justify-content: center;
    }
        /* tipografi ve paddingle ince ayar */
        .news-grid:has(> :only-child) .nc-title {
            font-size: 1.0rem;
        }

        .news-grid:has(> :only-child) .nc-body {
            padding: 12px 12px 10px;
        }

        .news-grid:has(> :only-child) .nc-excerpt {
            -webkit-line-clamp: 2; /* tek kart görünümünde 2 satır tut */
        }

        .news-grid:has(> :only-child) .nc-date-badge {
            transform: translateY(-2px); /* daha sıkı hizalama */
        }
}

/* === İnteraktif odak ve micro-motion iyileştirmeleri === */
.news-search input:focus {
    outline: 2px solid rgba(106,27,26,.18);
    border-color: rgba(106,27,26,.34);
    box-shadow: 0 0 0 3px rgba(106,27,26,.10);
}

a:focus-visible {
    outline: 2px solid rgba(106,27,26,.6);
    outline-offset: 2px;
    border-radius: .5rem;
}

/* === Responsive rötuşlar (tablet/mobil) === */
@media (max-width: 992px) {
    .news-subnav .news-toolbar {
        padding: 12px
    }
}

@media (max-width: 768px) {
    .news-subnav .news-toolbar {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 10px;
    }

    .news-actions {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 640px) {
    /* tek kart mobilde neredeyse tam genişlik */
    @supports(selector(:has(*))) {
        .news-grid:has(> :only-child) {
            grid-template-columns: minmax(0, 1fr)
        }
    }
}
/* === Haber gridini ortadan başlat (sadece bu sayfa) === */
.news-grid.centered {
    display: grid;
    /* Sabit kolon genişliği → satır ortalanır, boşluklar iki yana eşit dağılır */
    grid-template-columns: repeat(auto-fit, 360px);
    justify-content: center; /* grid'i yatayda ortala */
    gap: 20px;
    margin-inline: auto; /* her ihtimale karşı */
}

    /* Kartların esneyip 1fr olmaması için */
    .news-grid.centered > .news-card {
        width: 360px;
        max-width: 100%;
    }

/* Tablet’te biraz dar kolon */
@media (max-width: 1200px) {
    .news-grid.centered {
        grid-template-columns: repeat(auto-fit, 320px);
    }

        .news-grid.centered > .news-card {
            width: 320px;
        }
}

/* Mobil: tek sütun, zaten ortalı */
@media (max-width: 640px) {
    .news-grid.centered {
        grid-template-columns: minmax(0, 1fr);
    }

        .news-grid.centered > .news-card {
            width: auto;
        }
}
