/* =============================================================
   BIMBER MODIF - Tata letak BERANDA OTOMATIS
   Dipakai oleh home-modif.php. Responsif (HP & desktop).
   ============================================================= */
:root{
    --bm-accent:#ff2d55;
    --bm-radius:14px;
    --bm-shadow:0 6px 18px rgba(0,0,0,.10);
    --bm-line:rgba(0,0,0,.08);
    --bm-muted:#8a8f98;
}

.bm-home{
    max-width:1180px;
    margin:0 auto;
    padding:16px 14px 40px;
    box-sizing:border-box;
}
.bm-home *,
.bm-home *:before,
.bm-home *:after{ box-sizing:border-box; }

.bm-sec{ margin-bottom:28px; }

.bm-sec-title{
    position:relative;
    margin:0 0 14px;
    padding-left:14px;
    font-size:20px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.2px;
}
.bm-sec-title:before{
    content:"";
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:5px; height:1em;
    border-radius:4px;
    background:var(--bm-accent);
}

/* ---------- Kartu dasar ---------- */
.bm-card{
    display:block;
    text-decoration:none !important;
    color:inherit;
    background:#fff;
    border-radius:var(--bm-radius);
    overflow:hidden;
    box-shadow:var(--bm-shadow);
    transition:transform .18s ease, box-shadow .18s ease;
}
.bm-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.bm-card-media{ display:block; position:relative; background:#eef0f3; }
.bm-card-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.bm-card-media.bm-noimg{
    background:linear-gradient(135deg,#ff2d55 0%,#ff6b3d 100%);
}
.bm-card-body{ display:block; padding:12px 14px 14px; }
.bm-card-cat{
    display:inline-block;
    font-size:11px; font-weight:800; letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--bm-accent);
    margin-bottom:6px;
}
.bm-card-title{
    display:block;
    font-size:16px; font-weight:700; line-height:1.32;
    color:#181a1f;
}
.bm-card-date{
    display:block; margin-top:8px;
    font-size:12px; color:var(--bm-muted);
}

/* ---------- 1) HERO ---------- */
.bm-sec-hero{ margin-bottom:26px; }
.bm-card-hero{ position:relative; }
.bm-card-hero .bm-card-media{ aspect-ratio:16/9; }
.bm-card-hero .bm-card-media:after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}
.bm-card-hero .bm-card-body{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:18px 18px 20px;
}
.bm-card-hero .bm-card-cat{ color:#fff; background:var(--bm-accent); padding:3px 8px; border-radius:5px; }
.bm-card-hero .bm-card-title{ color:#fff; font-size:22px; font-weight:800; line-height:1.25; }
.bm-card-hero .bm-card-date{ color:rgba(255,255,255,.82); }

/* ---------- 2) SLIDER ---------- */
.bm-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    padding:4px 2px 10px;
    scrollbar-width:none;
}
.bm-slider::-webkit-scrollbar{ display:none; }
.bm-slider .bm-card{
    flex:0 0 78%;
    max-width:78%;
    scroll-snap-align:start;
}
.bm-slider .bm-card-media{ aspect-ratio:16/10; }

/* ---------- Titik indikator ---------- */
.bm-dots{ display:flex; justify-content:center; gap:7px; margin-top:8px; }
.bm-dots span{
    width:7px; height:7px; border-radius:50%;
    background:var(--bm-line); cursor:pointer; transition:all .2s ease;
}
.bm-dots span.is-active{ width:22px; border-radius:6px; background:var(--bm-accent); }

/* ---------- 3) TUMPUKAN JUDUL ---------- */
.bm-titlelist{
    list-style:none; margin:0; padding:0;
    background:#fff; border-radius:var(--bm-radius);
    box-shadow:var(--bm-shadow); overflow:hidden;
}
.bm-titlelist-item{ border-bottom:1px solid var(--bm-line); }
.bm-titlelist-item:last-child{ border-bottom:0; }
.bm-titlelist-item a{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; text-decoration:none !important; color:inherit;
}
.bm-tl-thumb{
    flex:0 0 62px; width:62px; height:62px;
    border-radius:10px; overflow:hidden; background:#eef0f3;
}
.bm-tl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bm-tl-thumb.bm-noimg{ background:linear-gradient(135deg,#ff2d55,#ff6b3d); }
.bm-tl-text{ flex:1 1 auto; min-width:0; }
.bm-tl-cat{
    display:block; font-size:11px; font-weight:800; letter-spacing:.3px;
    text-transform:uppercase; color:var(--bm-accent); margin-bottom:3px;
}
.bm-tl-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:15px; font-weight:700; line-height:1.35; color:#181a1f;
}

/* ---------- 4) GRID ---------- */
.bm-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.bm-grid .bm-card-media{ aspect-ratio:16/10; }
.bm-grid .bm-card-title{ font-size:14px; }

/* ---------- Pagination ---------- */
.bm-pagination{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
    margin-top:24px;
}
.bm-pagination .page-numbers{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 12px;
    border-radius:10px; background:#fff; box-shadow:var(--bm-shadow);
    font-weight:700; color:#181a1f; text-decoration:none;
}
.bm-pagination .page-numbers.current{ background:var(--bm-accent); color:#fff; }
.bm-pagination a.page-numbers:hover{ background:#181a1f; color:#fff; }

/* =============================================================
   DESKTOP (>= 768px): tampil lebih lega
   ============================================================= */
@media (min-width:768px){
    .bm-sec-title{ font-size:24px; }
    .bm-card-hero .bm-card-media{ aspect-ratio:21/9; }
    .bm-card-hero .bm-card-title{ font-size:34px; }

    .bm-slider .bm-card{ flex-basis:31%; max-width:31%; }

    .bm-titlelist{ display:grid; grid-template-columns:1fr 1fr; }
    .bm-titlelist-item:nth-last-child(2):nth-child(odd){ border-bottom:0; }

    .bm-grid{ grid-template-columns:repeat(4,1fr); }
    .bm-grid .bm-card-title{ font-size:15px; }
}

@media (min-width:1024px){
    .bm-slider .bm-card{ flex-basis:23.5%; max-width:23.5%; }
}