/* ==========================================================================
   NAMET KURUMSAL — HABERLER MODÜLÜ
   --------------------------------------------------------------------------
   Sitenin derlenmiş Tailwind çıktısında (assets/css/style.css) bulunmayan
   birkaç utility (lg:col-span-4, line-clamp, aspect-*) ve haberler modülüne
   özel bileşen stilleri burada tanımlanmıştır.

   Kurulum: bu dosyanın içeriğini assets/css/custom.css sonuna ekleyin
   veya layout'ta custom.css'ten SONRA ayrı dosya olarak çağırın:
       <link rel="stylesheet" type="text/css" href="/assets/css/haberler.css">

   Breakpoint'ler sitenin tailwind.config değerleriyle birebir aynıdır:
       sm: 540px | md: 768px | lg: 992px | xl: 1200px | 2xl: 1440px

   Renkler style.css'teki token'lardan alınmıştır:
       gray-700 #1B181A | gray-600 #474747 | gray-400 #6C6C6C
       gray-300 #F2F2F2 | error-700 #CF1818 | primary-600 #CB9544
       secondary-400 #999999
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Kart ızgarası — 12'li grid içinde 1 / 2 / 3 kolon
   -------------------------------------------------------------------------- */
.haberler-area .haber-card {
    grid-column: span 12 / span 12;
}

@media (min-width: 540px) {
    .haberler-area .haber-card {
        grid-column: span 6 / span 6;
    }
}

@media (min-width: 992px) {
    .haberler-area .haber-card {
        grid-column: span 4 / span 4;
    }

    /* Vitrin (öne çıkan) haber iki kolon kaplar */
    .haberler-area .haber-card.is-featured {
        grid-column: span 8 / span 8;
    }
}

/* --------------------------------------------------------------------------
   2) Haber kartı
   -------------------------------------------------------------------------- */
.haber-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #F2F2F2;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.haber-card > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.haber-card .image-box {
    position: relative;
    width: 100%;
    padding-top: 62.5%; /* 16:10 — aspect-ratio yerine IE/eski Safari uyumlu */
    overflow: hidden;
    background: #e6e6e6;
}

.haber-card .image-box img {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.haber-card > a:hover .image-box img {
    transform: scale(1.06);
}

/* Kategori rozeti */
.haber-card .badge,
.haber-badge {
    display: inline-block;
    background: #CF1818;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 4px 10px;
    line-height: 1.4;
}

.haber-card .image-box .badge {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.haber-card .text-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 22px 20px 24px;
}

.haber-card .date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    color: #6C6C6C;
}

.haber-card .date svg {
    width: 16px;
    height: 16px;
}

.haber-card .title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1B181A;
    transition: color .3s ease;
}

.haber-card > a:hover .title {
    color: #CF1818;
}

.haber-card .summary {
    font-size: .9375rem;
    line-height: 1.6;
    color: #474747;
}

.haber-card .more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: #CF1818;
}

.haber-card .more svg {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

.haber-card > a:hover .more svg {
    transform: translateX(4px);
}

/* clamp="" attribute'u JS ile çalışır; JS kapalıyken de taşma olmasın */
.haber-card .title,
.haber-card .summary {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   3) Filtre çubuğu
   -------------------------------------------------------------------------- */
.haber-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid #999999;
}

.haber-filter .categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.haber-filter .categories a {
    display: inline-block;
    padding: 8px 18px;
    font-size: .9375rem;
    color: #474747;
    background: #F2F2F2;
    transition: all .3s ease;
}

.haber-filter .categories a:hover {
    background: #e4e4e4;
    color: #1B181A;
}

.haber-filter .categories a.active {
    background: #CF1818;
    color: #fff;
}

.haber-filter .tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.haber-filter select,
.haber-filter input[type="search"] {
    height: 42px;
    padding: 0 14px;
    font-size: .9375rem;
    color: #1B181A;
    background: #fff;
    border: 1px solid #e1e1e1;
    outline: none;
    transition: border-color .3s ease;
}

.haber-filter select:focus,
.haber-filter input[type="search"]:focus {
    border-color: #CF1818;
}

.haber-filter .search-field {
    display: flex;
}

.haber-filter .search-field button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #1B181A;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: background .3s ease;
}

.haber-filter .search-field button:hover {
    background: #CF1818;
}

/* --------------------------------------------------------------------------
   4) Sayfalama
   -------------------------------------------------------------------------- */
.haber-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 56px;
}

.haber-pagination a,
.haber-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: .9375rem;
    color: #474747;
    background: #F2F2F2;
    transition: all .3s ease;
}

.haber-pagination a:hover {
    background: #1B181A;
    color: #fff;
}

.haber-pagination .current {
    background: #CF1818;
    color: #fff;
    font-weight: 600;
}

.haber-pagination .disabled {
    opacity: .4;
    pointer-events: none;
}

.haber-pagination .dots {
    background: transparent;
}

/* --------------------------------------------------------------------------
   5) Boş sonuç
   -------------------------------------------------------------------------- */
.haber-empty {
    padding: 72px 24px;
    text-align: center;
    background: #F2F2F2;
}

.haber-empty p:first-child {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1B181A;
    margin-bottom: 8px;
}

.haber-empty p:last-child {
    font-size: .9375rem;
    color: #474747;
}

/* --------------------------------------------------------------------------
   6) Detay sayfası
   -------------------------------------------------------------------------- */
.haber-detay .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 16px 0 28px;
    font-size: .9375rem;
    color: #6C6C6C;
}

.haber-detay .meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.haber-detay .meta svg {
    width: 16px;
    height: 16px;
}

.haber-detay .cover {
    margin-bottom: 32px;
}

.haber-detay .cover img {
    width: 100%;
    height: auto;
    display: block;
}

.haber-detay .content-area p {
    margin-bottom: 1.15em;
    line-height: 1.75;
}

.haber-detay .content-area img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.haber-detay .content-area h2,
.haber-detay .content-area h3 {
    font-weight: 700;
    line-height: 1.35;
    margin: 1.6em 0 .6em;
    color: #1B181A;
}

.haber-detay .content-area h2 {
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
}

.haber-detay .content-area h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.haber-detay .content-area ul,
.haber-detay .content-area ol {
    margin: 0 0 1.15em 1.25em;
    list-style: disc;
}

.haber-detay .content-area ol {
    list-style: decimal;
}

.haber-detay .content-area li {
    margin-bottom: .4em;
    line-height: 1.7;
}

.haber-detay .content-area blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid #CF1818;
    font-size: 1.0625rem;
    color: #1B181A;
}

.haber-detay .content-area a {
    color: #CF1818;
    text-decoration: underline;
}

/* Galeri */
.haber-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .haber-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.haber-gallery a {
    position: relative;
    display: block;
    padding-top: 70%;
    overflow: hidden;
    background: #e6e6e6;
}

.haber-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.haber-gallery a:hover img {
    transform: scale(1.07);
}

/* Paylaş */
.haber-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    margin-top: 40px;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

.haber-share p {
    font-size: .9375rem;
    font-weight: 600;
    color: #1B181A;
    margin-right: 4px;
}

.haber-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #1B181A;
    transition: background .3s ease;
}

.haber-share a:hover {
    background: #CF1818;
}

.haber-share svg {
    width: 18px;
    height: 18px;
}

/* Önceki / Sonraki */
.haber-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
}

.haber-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9375rem;
    font-weight: 600;
    color: #474747;
    transition: color .3s ease;
}

.haber-nav a:hover {
    color: #CF1818;
}

.haber-nav svg {
    width: 18px;
    height: 18px;
}

/* Benzer haberler başlığı */
.haber-related {
    margin-top: 72px;
}

/* ==========================================================================
   1) FOTOĞRAF GALERİSİ
   ========================================================================== */
.galeri-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

@media (min-width: 540px) {
    .galeri-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 992px) {
    .galeri-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .galeri-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.galeri-item {
    position: relative;
    display: block;
    padding-top: 75%; /* 4:3 */
    overflow: hidden;
    background: #e6e6e6;
    cursor: zoom-in;
}

.galeri-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    transition: transform .6s ease;
}

.galeri-item:hover img,
.galeri-item:focus-visible img {
    transform: scale(1.08);
}

.galeri-item .overlay {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, rgba(27, 24, 26, .85) 0%, rgba(27, 24, 26, .25) 55%, rgba(27, 24, 26, 0) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}

.galeri-item:hover .overlay,
.galeri-item:focus-visible .overlay {
    opacity: 1;
}

.galeri-item .zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    transform: translateY(8px);
    transition: transform .35s ease, background .3s ease;
}

.galeri-item:hover .zoom {
    transform: translateY(0);
    background: #CF1818;
    border-color: #CF1818;
}

.galeri-item .zoom svg {
    width: 22px;
    height: 22px;
}

.galeri-item .caption {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
}

/* Dokunmatik cihazlarda hover yok — başlık hep görünsün */
@media (hover: none) {
    .galeri-item .overlay {
        opacity: 1;
        justify-content: flex-end;
        background: linear-gradient(to top, rgba(27, 24, 26, .8) 0%, rgba(27, 24, 26, 0) 60%);
    }

    .galeri-item .zoom {
        display: none;
    }
}

/* ==========================================================================
   2) VİDEO KARTLARI
   ========================================================================== */
.video-area .video-card {
    grid-column: span 12 / span 12;
}

@media (min-width: 540px) {
    .video-area .video-card {
        grid-column: span 6 / span 6;
    }
}

@media (min-width: 992px) {
    .video-area .video-card {
        grid-column: span 4 / span 4;
    }

    .video-area .video-card.is-featured {
        grid-column: span 8 / span 8;
    }
}

.video-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #F2F2F2;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.video-card > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.video-card .image-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 — YouTube oranı */
    overflow: hidden;
    background: #1B181A;
}

.video-card .image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, opacity .35s ease;
}

.video-card > a:hover .image-box img {
    transform: scale(1.06);
    opacity: .75;
}

/* Oynat düğmesi */
.video-card .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    background: rgba(207, 24, 24, .9);
    box-shadow: 0 0 0 0 rgba(207, 24, 24, .55);
    transition: transform .35s ease, background .3s ease, box-shadow .5s ease;
}

.video-card > a:hover .play {
    transform: translate(-50%, -50%) scale(1.1);
    background: #CF1818;
    box-shadow: 0 0 0 14px rgba(207, 24, 24, 0);
}

.video-card .play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px; /* üçgeni optik olarak ortalar */
    fill: currentColor;
}

.video-card .duration {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 3px 8px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .78);
    line-height: 1.4;
}

.video-card .badge {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: inline-block;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: #CF1818;
    line-height: 1.4;
}

/* Kartta yalnızca başlık var — tarih, açıklama ve "İzle" satırı kaldırıldı. */
.video-card .text-area {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 18px 20px;
}

.video-card .title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1B181A;
    overflow: hidden;
    transition: color .3s ease;
}

.video-card > a:hover .title {
    color: #CF1818;
}

/* ==========================================================================
   3) POPUP (fancybox) — marka uyumu
   --------------------------------------------------------------------------
   Fancybox'ın kendi stilleri style.css içinde mevcut. Buradakiler sadece
   arkaplanı ve düğme renklerini sitenin paletine çekiyor.
   ========================================================================== */
.fancybox-bg {
    background: #1B181A;
}

.fancybox-is-open .fancybox-bg {
    opacity: .94;
}

.fancybox-button {
    background: rgba(27, 24, 26, .8);
    transition: background .25s ease, color .25s ease;
}

.fancybox-button:hover:not([disabled]) {
    background: #CF1818;
    color: #fff;
}

.fancybox-caption {
    font-size: .9375rem;
    border-top-color: rgba(255, 255, 255, .12);
}

.fancybox-caption__body {
    text-align: center;
}

/* Video popup'ı: 16:9 oranını koruyarak ekrana sığdır */
.fancybox-slide--video .fancybox-content {
    width: 100%;
    max-width: 1200px;
    height: auto;
    max-height: 80vh;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* aspect-ratio desteklemeyen eski tarayıcılar için makul bir yedek */
@supports not (aspect-ratio: 16 / 9) {
    .fancybox-slide--video .fancybox-content {
        height: 56.25vw;
        max-height: 80vh;
    }
}

.fancybox-slide--video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   4) LİNKLİ GALERİ  →  fotograflar-linkli.html
   --------------------------------------------------------------------------
   Popup açmaz; karta tıklayınca bağlantıya gidilir. Taban görünüm yukarıdaki
   .galeri-grid / .galeri-item kurallarından gelir, burada yalnızca kolon
   sayısı ve tıklama göstergesi değişir.
   ========================================================================== */

/* En fazla 3 kolon: 1 (telefon) / 2 (sm 540) / 3 (lg 992 ve üzeri).
   .galeri-grid tek başına 1440px'te 5 kolona çıktığı için o kural da
   açıkça geçersiz kılınıyor. */
.galeri-grid.is-3lu {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 540px) {
    .galeri-grid.is-3lu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .galeri-grid.is-3lu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .galeri-grid.is-3lu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Kart büyüdüğü için başlık da bir tık büyüsün */
.galeri-item.is-link .caption {
    font-size: 1rem;
}

/* Büyüteç yerine "İncele" düğmesi — imleç de zoom değil pointer */
.galeri-item.is-link {
    cursor: pointer;
}

.galeri-item.is-link .go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: #CF1818;
    transform: translateY(8px);
    transition: transform .35s ease, background .3s ease;
}

.galeri-item.is-link:hover .go,
.galeri-item.is-link:focus-visible .go {
    transform: translateY(0);
}

.galeri-item.is-link .go svg {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

.galeri-item.is-link:hover .go svg {
    transform: translateX(4px);
}

/* Dokunmatik cihazlarda overlay zaten hep açık; düğme orada gereksiz */
@media (hover: none) {
    .galeri-item.is-link .go {
        display: none;
    }
}