/* ═══════════════════════════════════════════════════════════════
   LUMOUT V4 — LAYOUT FINAL OVERRIDE
   Bu dosya v4.css'den SONRA yüklenir, tüm kuralları ezer.
   hp-layout (anasayfa/kategori) + hd-page-wrap (haber detay)
   CSS Grid tabanlı: Sol içerik + Sağ sidebar
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. ORTAK RESET
───────────────────────────────────────────────────────────── */
.hp-layout::before, .hp-layout::after,
.hd-page-wrap::before, .hd-page-wrap::after {
    display: none !important;
    content: none !important;
}

/* ─────────────────────────────────────────────────────────────
   2. hp-layout (Anasayfa, Kategori, Galeri vb.) — CSS GRID
───────────────────────────────────────────────────────────── */
.hp-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Sol içerik */
.hp-main {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
}

/* Sağ sidebar */
.hp-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
    display: block !important;
}

/* Sidebar widget stilleri */
.hp-sidebar .v4-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.hp-sidebar .v4-widget {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
.hp-sidebar .v4-widget-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--color-primary, #c0392b) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   3. hd-page-wrap (Haber Detay) — CSS GRID
───────────────────────────────────────────────────────────── */
.hd-page-wrap {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Sol makale */
.hd-page-main {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
}

/* Sağ sidebar — grid sütunu, asla ezilmez */
.hd-page-side {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
    display: block !important;
    visibility: visible !important;
}

/* Haber detay sidebar widget stilleri */
.hd-page-side .v4-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.hd-page-side .v4-widget {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
.hd-page-side .v4-widget-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--color-primary, #c0392b) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   4. v4-row (Diğer sayfalar: ara, firma, iletisim vb.)
───────────────────────────────────────────────────────────── */
.v4-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.v4-col-8 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.v4-col-4 {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 0 !important;
    max-width: 300px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}
.v4-col-4 .v4-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.v4-col-4 .v4-widget {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
.v4-col-4 .v4-widget-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--color-primary, #c0392b) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   5. RESPONSIVE — Masaüstü Büyük (>1280px)
───────────────────────────────────────────────────────────── */
@media (min-width: 1281px) {
    .hp-layout,
    .hd-page-wrap {
        grid-template-columns: 1fr 300px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   6. RESPONSIVE — Tablet Büyük (1025px–1280px)
───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1280px) {
    .hp-layout,
    .hd-page-wrap {
        grid-template-columns: 1fr 280px !important;
        gap: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVE — Tablet (769px–1024px)
───────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .hp-layout,
    .hd-page-wrap {
        grid-template-columns: 1fr 240px !important;
        gap: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE — Mobil (<=768px): Tek sütun, sidebar alta
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hp-layout,
    .hd-page-wrap {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hp-main,
    .hd-page-main,
    .v4-col-8 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .hp-sidebar,
    .hd-page-side,
    .v4-col-4 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Mobilde sidebar widget'ları 2 sütun */
    .hp-sidebar .v4-sidebar,
    .hd-page-side .v4-sidebar,
    .v4-col-4 .v4-sidebar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }
    .hp-sidebar .v4-widget,
    .hd-page-side .v4-widget,
    .v4-col-4 .v4-widget {
        margin-bottom: 0 !important;
    }

    /* v4-row mobil */
    .v4-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .v4-col-4 {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. RESPONSIVE — Mobil Küçük (<=600px)
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hp-sidebar .v4-sidebar,
    .hd-page-side .v4-sidebar,
    .v4-col-4 .v4-sidebar {
        grid-template-columns: 1fr !important;
    }
    .hp-layout,
    .hd-page-wrap {
        gap: 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   10. RESPONSIVE — Mobil Çok Küçük (<=480px)
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hp-sidebar .v4-sidebar,
    .hd-page-side .v4-sidebar,
    .v4-col-4 .v4-sidebar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   11. HABER DETAY — Makale içerik responsive
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hd-form-row {
        grid-template-columns: 1fr !important;
    }
    .hd-related-grid {
        grid-template-columns: 1fr !important;
    }
    .hd-share-btn span {
        display: none !important;
    }
    .hd-share-btn {
        padding: 8px 10px !important;
    }
    .hd-submit {
        width: 100% !important;
        justify-content: center !important;
    }
}
@media (max-width: 480px) {
    .hd-author-card {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .hd-meta-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}