/* ============================================
   CATEGORY PAGE - MOBILE (MAX 767px)
   ============================================ */
@media (max-width: 767px) {

    /* === CONTAINER FULL WIDTH === */
    .home-wrapper.category-page .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* === HEADER KATEGORI === */
    .category-header {
        margin-bottom: 16px;
        padding: 16px 16px 12px;
        border-bottom: 1px solid #e8e8e8;
    }

    .category-breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 8px;
        padding: 0;
    }

    .category-title {
        font-size: 1.5rem;
        line-height: 1.2;
        margin: 0;
    }

    .category-description {
        font-size: 0.85rem;
    }

    /* === IKLAN TOP === */
    .category-page .ads-top,
    .category-page [class*="ads"] {
        margin: 0 0 16px 0;
    }

    /* === FEATURED LAYOUT - MOBILE === */
    .category-featured-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 0;
        margin: 0 0 16px 0;
        padding: 0 16px 16px;
        border-bottom: 1px solid #e8e8e8;
        overflow: visible !important;
    }

    /* Featured Main - Full Width */
.featured-main {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

/* === THUMBNAIL RAPAT TEPI KIRI-KANAN (MINUS MARGIN) === */
.featured-thumb {
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 0 -16px 10px -16px !important; /* Minus margin kiri-kanan */
    width: calc(100% + 32px) !important;    /* Lebar = 100% + 32px (16px kiri + 16px kanan) */
    max-width: calc(100% + 32px) !important;
    border-radius: 0 !important;            /* Hilangkan rounded karena sudah rapat tepi */
    overflow: hidden;
}

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

/* Konten di bawah thumbnail tetap dengan padding normal */
.featured-content {
    padding: 0;
}

.featured-category {
    font-size: 0.75rem;
    margin-bottom: 6px;
}

.featured-title {
    font-size: 1.15rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
}
    /* Featured Side List - Horizontal Scroll */
       /* ============================================
       FEATURED SIDE LIST - MOBILE (STYLE LIST VERTIKAL)
       ============================================ */
    
    /* Ubah dari horizontal scroll menjadi list vertikal */
    .featured-side-list {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow-x: visible !important; /* Hapus scroll horizontal */
        scroll-snap-type: none;
        gap: 0; /* Hapus gap, gunakan border */
        padding: 0;
        margin: 0;
        border-top: 1px solid #f0f0f0; /* Garis pemisah atas */
    }

    /* Item menjadi baris horizontal (Thumbnail Kiri, Teks Kanan) */
    .side-list-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
        min-width: auto !important;
        max-width: 100% !important;
        flex: none !important; /* Reset flex dari desktop */
    }

    .side-list-item:last-child {
        border-bottom: none;
    }

    /* Thumbnail disesuaikan dengan ukuran List Item */
    .side-list-thumb {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .side-list-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Konten Teks */
    .side-list-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        padding-top: 0;
        justify-content: flex-start;
    }

    /* Kategori (Merah, Bold) */
    .side-list-category {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        color: #d32f2f;
        text-transform: capitalize;
        margin-bottom: 6px;
        line-height: 1;
    }

    /* Judul (Sama persis dengan list-item-title) */
    .side-list-title {
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1.35;
        margin: 0;
        color: #1a1a1a;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
       
    }

    .side-list-title a {
        color: #1a1a1a;
        text-decoration: none;
    }

    /* === IKLAN CENTER === */
    .category-page .ads-center,
    .category-page [class*="ads-center"] {
        margin: 16px 0;
        padding: 0 16px;
    }

    /* === LAYOUT GRID - MOBILE === */
    .category-grid-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0;
        padding: 0 16px;
    }

    .desktop-sidebar {
        display: none !important;
    }

    .home-index {
        width: 100%;
    }

    /* === LATEST NEWS LIST - MOBILE === */
    .latest-news-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .latest-news-icon {
        width: 28px;
        height: 28px;
    }

    .latest-news-icon svg {
        width: 16px;
        height: 16px;
    }

    .latest-news-title {
        font-size: 1.05rem;
    }

    /* List Item */
    .category-list-wrapper {
        padding: 0;
    }

    .category-list-item {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
        align-items: flex-start;
    }

    .category-list-item:first-child {
        padding-top: 0;
    }

    .category-list-item:last-child {
        border-bottom: none;
    }

    .category-list-item:hover {
        background: transparent;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }

    .list-item-thumb {
        width: 100px !important;
        min-width: 100px !important;
        height: 100px !important;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .list-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .list-item-content {
        flex: 1;
        min-width: 0;
    }

    .list-item-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        gap: 8px;
    }

    .list-item-category {
        font-size: 0.75rem;
    }

    .list-item-time {
        font-size: 0.7rem;
        color: #888;
    }

    .list-item-title {
        font-size: 0.9rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        margin: 0;
    }

    /* === PAGINATION - MOBILE === */
    .category-pagination {
        margin-top: 24px;
        padding: 16px 0;
    }

    .category-pagination .nav-links {
        gap: 6px;
    }

    .category-pagination .page-numbers {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 0.8rem;
    }

    /* === EMPTY STATE - MOBILE === */
    .no-posts-found {
        padding: 40px 16px;
        font-size: 0.95rem;
    }
}