/* =========================================================
    card.css - YENİ KART SİSTEMİ: GRID Tabanlı Düzen ve Medya Yönetimi
   ========================================================= */

:root {
    /* Genel değişkenler */
    --card-bg-color: #fff6ff;
    --card-border-radius: 12px;
    --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    --text-color-primary: #222;
    --text-color-secondary: #777;
    --link-color: #007bff;

    /* Grid için boyutlar */
    --vertical-media-width: 120px; /* Dikey medya alanı genişliği */
    --horizontal-media-height: 100px; /* Yatay medya alanı yüksekliği */
    --logo-size: 50px; /* Logo boyutu */
    --card-gap: 20px; /* Kartlar arası boşluk (PHP'den gelebilir, varsayılan burada) */
    --container-width: 90%; /* Kapsayıcı genişliği (PHP'den gelebilir, varsayılan burada) */

    /* Metin alanı sabit yüksekliği (ayarlanabilir) */
    --description-area-height: 120px; /* Açıklama metni için sabit yükseklik */
}

html {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
}
h2 {
    text-align: center;
    margin: 20px 0;
    color: #333;
    font-size: 2em;
}

.cards-container {
    display: flex; /* Flexbox'ı koruyoruz, kartları sarmak için uygun */
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-gap); /* PHP'den gelen veya varsayılan boşluk */
    padding: 15px;
    margin: 15px auto;
    width: var(--container-width);
    max-width: 1200px;
}

/* Yeni Card Ana Düzeni (CSS Grid) */
.new-card-grid {
    background: var(--card-bg-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden; /* Taşmaları gizle */
    display: grid;
    /* Grid şablonu:
       1. sütun: dikey medya (sol) - içeriğine göre boyutlanacak (varsayılan min boyutu)
       2. sütun: ana içerik (ortadaki sabit)
       3. sütun: dikey medya (sağ) - içeriğine göre boyutlanacak (varsayılan min boyutu)
    */
    grid-template-columns: minmax(0, 0.5fr) 3fr minmax(0, 0.5fr); /* Esnek sütunlar */
    grid-template-rows: auto 1fr auto; /* Başlık, Açıklama, Yatay Medya */
    grid-template-areas:
        "vertical-left header vertical-right"
        "vertical-left main-description vertical-right"
        "vertical-left horizontal-media vertical-right"; /* Bu alanlar mobile'da değişecek */

    width: 100%; /* Kendi flex container'ı içinde tam genişlik */
    max-width: 450px; /* Mobil ve küçük ekranlar için maksimum genişlik */
    min-width: 280px; /* Minimum kart genişliği */
    aspect-ratio: 1 / 1.1; /* Oransal genişlik/yükseklik - Taslağa göre ayarlandı */
    position: relative; /* absolute pozisyonlamalar için */
}

/* Medya Alanları */
.card-vertical-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Medya taşmalarını gizle */
    position: relative; /* Açıklama için */
    padding: 5px; /* İç boşluk */
}

.card-media-left {
    grid-area: vertical-left;
}
.card-media-right {
    grid-area: vertical-right;
}

.card-vertical-media img,
.card-vertical-media video {
    width: auto;
    height: 100%;
    object-fit: cover; /* Kenarlardan taşan kısımları gizle, boyutu doldur */
    border-radius: 8px;
    display: block;
}

.card-horizontal-media {
    grid-area: horizontal-media;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 5px;
    margin-top: auto; /* Alt kısma yapıştır */
}

.card-horizontal-media img,
.card-horizontal-media video {
    width: auto;
    height: 100%;
    object-fit: cover; /* Kenarlardan taşan kısımları gizle, boyutu doldur */
    border-radius: 8px;
    display: block;
}

/* Medya Açıklamaları */
.media-description {
    position: absolute;
    bottom: 5px; /* Resmin biraz yukarısında */
    left: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75em;
    padding: 3px 5px;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 0.3s ease;
}
.card-vertical-media:hover .media-description,
.card-horizontal-media:hover .media-description {
    opacity: 1; /* Mouse üzerine gelince göster */
}

/* Medya yoksa alanları daraltma */
/* HTML'de medya div'i yoksa otomatik olarak grid layout tarafından boş bırakılır,
   bu da esneklik sağlar. Özel bir CSS kuralına gerek kalmaz.
   Ancak, medya div'i varsa ve içi boşsa, o zaman height: 0; padding: 0; gibi
   kurallar gerekebilir. Bizim PHP yapımızda div'in kendisi yoksa basılmıyor. */


/* Ana İçerik Bölümü */
.card-main-content {
    grid-area: header / main-description / horizontal-media; /* Tüm orta alanı kapla */
    display: flex;
    flex-direction: column;
    padding: 10px 10px; /* Genel iç boşluk */
    overflow: hidden; /* İçerik taşmasını engelle */
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0; /* Küçülmesini engelle */
    cursor: pointer;
    border-bottom: 1px solid #eee; /* Logo/başlık altı çizgi */
    padding-bottom: 8px;
}
.popup-logo {
    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: contain; /* Logonun bozulmadan sığması için */
    border-radius: 8px;
    flex-shrink: 0;
    background-color: #f0f0f0; /* Logo yoksa veya beyazsa görünür olması için arka plan */
}
.header-text {
    flex-grow: 1;
    overflow: hidden;
}
.card-header strong {
    margin: 0;
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--text-color-primary);
    font-weight: 600;
    /* white-space: nowrap; BU SATIR KALDIRILDI */
    overflow: hidden; /* Taşmayı kontrol etmek için kalsın */
    text-overflow: ellipsis; /* Taşarsa üç nokta */
    display: -webkit-box; /* Çok satırlı text overflow için */
    -webkit-line-clamp: 2; /* İki satır göster */
    -webkit-box-orient: vertical;
}
.card-header small {
    display: block;
    font-size: 0.8em;
    color: var(--text-color-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detay Metin Alanı */
.card-description-area {
    flex-grow: 1; /* Yatay medyaya kadar alanı doldur */
    overflow: hidden; /* Metnin kırpılması için */
    margin-bottom: 8px;
    line-height: 1.1; /* Dar satır aralığı */
    letter-spacing: -0.01em; /* Hafif dar aralık */
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    /* Sabit yükseklik belirledik */
    height: var(--description-area-height);
    display: -webkit-box; /* Çok satırlı text overflow için */
    -webkit-line-clamp: 7; /* Gösterilecek maksimum satır sayısı (yaklaşık) */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* JS ile kırpma yapacağımız için CSS'in bunu yapmasına izin veriyoruz */
    /* JS tarafında son 20 karakter kuralı uygulanacak, burada sadece görsel destek */
}
.card-description-area p {
    margin: 0; /* Paragraf boşluklarını kaldır */
    padding: 0;
}


/* --- Modallar --- */
.media-modal, .details-modal {
    display: none; /* JS ile kontrol edilecek */
    position: fixed;
    inset: 0; /* Tüm ekranı kapla */
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.media-content, .details-content {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    max-width: 85vw; /* Ekranın %85'i */
    max-height: 85vh; /* Ekranın %85'i */
    overflow: auto; /* İçerik taşarsa kaydırılabilir olsun */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}
.media-content img, .media-content video {
    width: auto; /* Genişlik ve yükseklik otomatik ayarlanacak */
    height: auto;
    max-width: 100%; /* Modal içeriğine sığdır */
    max-height: 100%; /* Modal içeriğine sığdır */
    object-fit: contain; /* Görselin tamamını göster, boşluk kalsın */
    border-radius: 8px;
    display: block;
}
/* Video için yönlendirme sınıfları (ipcard.js'den geliyor) */
.media-content.video-horizontal video {
    /* Yatay video için özel stil gerekirse */
}
.media-content.video-vertical video {
    /* Dikey video için özel stil gerekirse */
}

.details-content {
    flex-direction: column; /* Detaylar alt alta sıralansın */
    align-items: flex-start;
    padding: 20px;
    max-width: 600px; /* Detay modalı için daha dar bir genişlik */
}
.details-content p {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95em;
    color: #333;
}
.details-content p strong {
    color: var(--text-color-primary);
}
.details-content a {
    color: var(--link-color);
    text-decoration: none;
}
.details-content a:hover {
    text-decoration: underline;
}

.media-close, .details-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 36px;
    cursor: pointer;
    z-index: 10000; /* Kapatma butonunun en üstte olması için */
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.details-close {
    color: #555; /* Detay modalında daha koyu bir renk */
}


/* --- Responsive Düzenlemeler --- */

/* Masaüstü ve Büyük Tabletler */
@media (min-width: 769px) {
    .new-card-grid {
        /* Tek bir kartın kendi genişliği, cards-container'dan gelen flex kuralları bunu belirleyecek */
        /* Flexbox parent'ı (cards-container) kartları sarmalayacak. */
        /* Eğer tek sütun istiyorsan max-width'i arttırabilirsin, veya flex-basis'i ayarlayabilirsin */
        width: calc((100% - (var(--card-count, 3) - 1) * var(--card-gap)) / var(--card-count, 3));
        max-width: 450px; /* Sabit maksimum genişlik */
        aspect-ratio: 1 / 1.1; /* Taslağa uygun oransal boyut */
        height: auto; /* İçeriğe göre ayarlanır, ancak aspect-ratio ile belirli bir oran korunur */
        
        /* Grid alanları masaüstünde değişmiyor, her zaman aynı yapıda */
        grid-template-columns: minmax(0, var(--vertical-media-width, 120px)) 1fr minmax(0, var(--vertical-media-width, 120px));
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "vertical-left header vertical-right"
            "vertical-left main-description vertical-right"
            "vertical-left horizontal-media vertical-right";
    }

    /* Medya alanları doluysa genişlesin, boşsa daralsın */
    /* Bu, PHP'de div'in basılmamasıyla sağlanıyor.
       Eğer div basılıp içi boş kalıyorsa, bu sınıflar işe yarar: */
    .new-card-grid:not(:has(.card-media-left)) {
        grid-template-columns: 0 1fr minmax(0, var(--vertical-media-width, 120px));
    }
    .new-card-grid:not(:has(.card-media-right)) {
        grid-template-columns: minmax(0, var(--vertical-media-width, 120px)) 1fr 0;
    }
    .new-card-grid:not(:has(.card-media-left)):not(:has(.card-media-right)) {
        grid-template-columns: 1fr; /* Her iki dikey medya da yoksa, orta alan tam genişlik */
        grid-template-areas:
            "header"
            "main-description"
            "horizontal-media";
    }
    .new-card-grid:not(:has(.card-horizontal-media)) {
        grid-template-rows: auto 1fr; /* Yatay medya yoksa son satır yok */
        grid-template-areas:
            "vertical-left header vertical-right"
            "vertical-left main-description vertical-right";
    }

    /* Boş alanların grid'de yer kaplamaması için (eğer PHP'den div basılıyorsa ve içi boşsa) */
    .card-vertical-media:empty,
    .card-horizontal-media:empty {
        display: none;
    }

    /* Flexbox içinde her kartın belirli bir boyutu olması için */
    .cards-container .new-card-grid {
        flex: 0 0 calc((100% - (var(--card-count, 3) - 1) * var(--card-gap)) / var(--card-count, 3));
        /* Eski flex-basis'i koruyabilir veya kaldırabilirsin. */
    }
}

/* Mobil Cihazlar (768px ve altı) */
@media (max-width: 768px) {
    .cards-container {
        padding: 10px;
        gap: 15px;
        width: 100%;
        max-width: none; /* Mobil'de genişlik sınırlamasını kaldır */
    }
    .new-card-grid {
        max-width: 380px; /* Mobil'de maksimum kart genişliği */
        margin: 0 auto; /* Ortala */
        aspect-ratio: 1 / 1.3; /* Mobil için biraz daha dikey oran */

        /* Grid şablonu mobil için değişiyor */
        grid-template-columns: 1fr; /* Tek sütun */
        grid-template-rows: auto auto 1fr auto; /* Başlık, Dikey Medya, Açıklama, Yatay Medya */
        grid-template-areas:
            "header"
            "vertical-area" /* Dikey medya için tek bir alan, sol/sağ fark etmez */
            "main-description"
            "horizontal-media";
    }

    /* Dikey medya alanları mobil'de tek bir alana toplanıyor */
    .card-vertical-media {
        grid-area: vertical-area;
        padding: 5px;
        max-height: 200px; /* Mobil'de dikey medyayı biraz küçült */
    }
    /* Sağ dikey medya varsa ve sol yoksa sağdaki gösterilsin */
    .card-media-right:not(:has(*)) { /* Eğer sağ medya alanı boşsa */
        /* Şimdilik gerek yok, PHP sadece bir dikey medya basıyor */
    }
    .card-vertical-media:not(:has(*)) { /* PHP'den gelen medya alanı boşsa */
        display: none; /* Div basılsa bile gizle */
    }


    /* Yatay medya alanı */
    .card-horizontal-media {
        padding: 5px;
        max-height: 150px; /* Mobil'de yatay medyayı biraz küçült */
    }

    /* Diğer metin ve logo boyutlandırmaları */
    .card-header strong {
        font-size: 1em;
    }
    .card-header small {
        font-size: 0.75em;
    }
    .popup-logo {
        width: 40px;
        height: 40px;
    }
    .card-description-area {
        font-size: 0.85em;
        line-height: 1.2;
        height: 100px; /* Mobil için açıklama alanı yüksekliği */
        -webkit-line-clamp: 5; /* Mobil için daha az satır göster */
    }
    .media-description {
        font-size: 0.7em;
    }

    /* Modallar mobil'de tam ekran */
    .media-content, .details-content {
        max-width: 95vw;
        max-height: 95vh;
        width: 95vw;
        height: 95vh;
        padding: 10px;
    }
    .media-content img, .media-content video {
        max-width: 100%;
        max-height: 100%;
    }
}
.card-short-field {
  font-size: 14px;
  line-height: 1.5;
  margin: 2px 0;
  color: #444;
}

.card-short-field a {
  color: #3366cc;
  text-decoration: none;
}

/* Küçük Mobil Cihazlar (480px ve altı) */
@media (max-width: 480px) {
    .cards-container {
        padding: 8px;
        gap: 10px;
    }
    .new-card-grid {
        max-width: 100%; /* Tam genişlik */
        aspect-ratio: 1 / 1.4; /* Daha dikey */
    }
    .popup-logo {
        width: 35px;
        height: 35px;
    }
    .card-header strong {
        font-size: 1em;
    }
    .card-header small {
        font-size: 0.7em;
    }
    .card-description-area {
        font-size: 0.8em;
        height: 80px; /* Daha da dar açıklama alanı */
        -webkit-line-clamp: 4; /* Daha az satır */
    }
    .media-description {
        font-size: 0.65em;
        padding: 2px 4px;
    }
    .media-close, .details-close {
        font-size: 30px;
    }
}