/* =====================================================================
   /css/son-makaleler-izgara.css  -  Ana sayfa "Son Makaleler" izgarasi
   1 buyuk + 4 kucuk kart. Gorseller makale Preview gorselleri (800x600,
   4:3); kart gorsel alani da 4:3 oldugu icin gorsel kesilmez.
   Baslik gorselin ustune degil altina yazilir (gorsellerde yazi var).
   ===================================================================== */

.smi-izgara {
    --smi-zemin: #ffffff;
    --smi-cizgi: #dfe7ee;
    --smi-cizgi-hover: #b9d6ea;
    --smi-baslik: #12263a;
    --smi-metin: #2c3a45;
    --smi-soluk: #5b6b75;
    --smi-vurgu: #1695d5;
    --smi-vurgu-koyu: #0e6fa3;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    margin-top: 16px;     /* paylasim butonlariyla arasi, kart araligiyla ayni */
    margin-bottom: 16px   /* altindaki Karsilama paneliyle arasinda bosluk */
}

/* ---------- Kart ---------- */
.smi-kart {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--smi-zemin);
    border: 1px solid var(--smi-cizgi);
    border-radius: 10px;
    overflow: hidden;
    color: var(--smi-metin);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

/* Hover: content-cards.css > .postCard ile ayni (yukari kalkma + golge) */
.smi-kart:hover,
.smi-kart:focus {
    transform: translateY(-3px);
    border-color: var(--smi-cizgi-hover);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    color: var(--smi-metin);
    text-decoration: none
}

.smi-kart:focus-visible {
    outline: 2px solid var(--smi-vurgu-koyu);
    outline-offset: 2px
}

/* Buyuk kart solda iki satir boyunca uzanir */
.smi-buyuk {
    grid-row: span 2
}

/* ---------- Gorsel ---------- */
.smi-gorsel {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #eef3f7;
    overflow: hidden
}

.smi-gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Gorsel uzerinde hafif kararma: .postThumbLink::after ile ayni */
.smi-gorsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .25s ease;
    pointer-events: none
}

.smi-kart:hover .smi-gorsel::after,
.smi-kart:focus .smi-gorsel::after {
    background: rgba(0, 0, 0, .18)
}

/* "Yeni" rozeti: content-cards.css > .cardBadgeNew ile ayni
   (sag ust kose sekmesi, amber gradient, ayni tipografi) */
.smi-yeni {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, #ffb938 0%, #f59000 100%);
    border-bottom-left-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    pointer-events: none
}

.smi-yeni i {
    font-size: 11px
}

/* ---------- Govde ---------- */
.smi-govde {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: 12px 14px 14px
}

.smi-ust {
    display: flex;
    align-items: center;
    gap: 10px
}

/* Tarih ve yorum: content-cards.css > .postMeta cip tasarimiyla ayni */
.smi-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #25323d;
    white-space: nowrap
}

.smi-meta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #eaf6fc;
    color: #1696c8;
    font-size: 12px;
    line-height: 1
}

/* Kart alti kategori seridi: content-cards.css > .postCategory ile ayni */
.smi-kategori {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    min-height: 28px;
    padding: 5px 11px;
    color: #fff;
    background: #1695d5;
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-left: 5px solid #0e6fa3;
    box-sizing: border-box
}

.smi-kategori i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    position: relative;
    top: 1px
}

.smi-kategori span {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* Kategori renkleri: content-cards.css paletiyle ayni */
.smi-kategori[data-kat="Exchange Server"]            { background:#2b56a5; border-left-color:#1c3a70; }
.smi-kategori[data-kat="Firewall"]                   { background:#c0392b; border-left-color:#7f261c; }
.smi-kategori[data-kat="Group Policy"]               { background:#24703f; border-left-color:#163f26; }
.smi-kategori[data-kat="Microsoft 365"]              { background:#d4702a; border-left-color:#94481a; }
.smi-kategori[data-kat="Microsoft Active Directory"] { background:#533c9e; border-left-color:#37286a; }
.smi-kategori[data-kat="Microsoft Azure"]            { background:#3489cf; border-left-color:#235d8c; }
.smi-kategori[data-kat="Microsoft Hyper-V"]          { background:#b4459b; border-left-color:#7d2f6b; }
.smi-kategori[data-kat="MS SQL Server"]              { background:#8f2a5a; border-left-color:#5f1b3c; }
.smi-kategori[data-kat="Network"]                    { background:#1f9573; border-left-color:#146250; }
.smi-kategori[data-kat="Pratik Bilgiler"]            { background:#e8b923; border-left-color:#a8820f; color:#3b2f00; }
.smi-kategori[data-kat="Routing-Switching"]          { background:#5a5ec9; border-left-color:#3c3f8a; }
.smi-kategori[data-kat="Storage-Backup"]             { background:#5f7a17; border-left-color:#3f510f; }
.smi-kategori[data-kat="Windows Client"]             { background:#b07a1e; border-left-color:#7c5514; }
.smi-kategori[data-kat="Windows Powershell"]         { background:#2c3a48; border-left-color:#1a232c; }
.smi-kategori[data-kat="Windows Server"]             { background:#156f80; border-left-color:#0d4b57; }
.smi-kategori[data-gizli="1"]                        { background:#6b7b8c; border-left-color:#47535f; color:#fff; }

.smi-baslik {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--smi-baslik);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease
}

.smi-kart:hover .smi-baslik {
    color: var(--smi-vurgu-koyu)
}

.smi-buyuk .smi-baslik {
    font-size: 22px;
    line-height: 1.3
}

.smi-ozet {
    font-size: 14px;
    line-height: 1.6;
    color: var(--smi-metin);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* Masaustunde buyuk kart iki kucuk kart boyunda; ozet o alani doldursun */
.smi-buyuk .smi-ozet {
    -webkit-line-clamp: 6
}

/* ---------- Tablet: buyuk kart ustte tam genislik ve yatay
   (gorsel solda, yazi sagda), altinda 2x2 kucuk kart ---------- */
@media (max-width: 991.98px) {
    .smi-izgara {
        grid-template-columns: 1fr 1fr
    }

    /* Gorsel solda iki satir boyunca; sagda ustte metin, altta kategori seridi */
    .smi-buyuk {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: 55% minmax(0, 1fr);
        grid-template-rows: 1fr auto
    }

    .smi-buyuk .smi-gorsel {
        grid-row: 1 / 3
    }

    .smi-buyuk .smi-govde {
        justify-content: center;
        padding: 16px 18px
    }

    .smi-buyuk .smi-baslik {
        font-size: 20px
    }

    .smi-buyuk .smi-ozet {
        -webkit-line-clamp: 4
    }
}

/* ---------- Telefon: tek sutun, buyuk kart yeniden dikey ---------- */
@media (max-width: 575.98px) {
    .smi-izgara {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .smi-buyuk {
        display: flex;
        flex-direction: column
    }

    .smi-buyuk .smi-gorsel {
        grid-row: auto
    }

    .smi-buyuk .smi-govde {
        padding: 12px 14px 14px
    }

    .smi-buyuk .smi-baslik {
        font-size: 18px
    }
}

@media (prefers-reduced-motion: reduce) {
    .smi-kart,
    .smi-gorsel::after,
    .smi-baslik {
        transition: none
    }

    .smi-kart:hover,
    .smi-kart:focus {
        transform: none
    }
}