/* === DAILYPOS HOME CLEAN CSS === */

.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.sidebar{min-width:0}

.live-update-bar{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.live-update-bar strong{display:block;color:#b91c1c}
.live-update-bar span{font-size:12px;color:#6b7280}
.live-update-bar button,.load-more-wrap button{border:0;background:#b91c1c;color:#fff;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}

.feed-list,.box,.index-section{background:#fff;border-radius:14px;padding:14px}
.feed-item{border-bottom:1px solid #eee;padding:14px 0}
.feed-item:last-child{border-bottom:0}
.feed-item a{display:flex;gap:14px;text-decoration:none;color:inherit}
.feed-item img{width:180px;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.feed-item h2{font-size:18px;margin:5px 0;line-height:1.3;font-weight:620;letter-spacing:-.006em}
.feed-item p{font-size:14px;color:#555;margin:0}

.cat{display:inline-block;background:#fff1f2;color:#b91c1c;font-weight:900;padding:3px 8px;border-radius:999px;font-size:12px}
.box h3{margin:0 0 10px;display:flex;align-items:center;gap:8px}
.box h3:before{content:"";width:6px;height:22px;border-radius:99px;background:#f59e0b}

.section-head-det{display:flex;align-items:end;justify-content:space-between;margin:24px 0 14px}
.section-head-det h2{font-size:24px;line-height:1.25;font-weight:900;margin:0}
.section-head-det h2:after{content:"";display:block;width:48px;height:4px;background:#f59e0b;border-radius:99px;margin-top:7px}
.section-head-det span{color:#6b7280;font-size:13px}

.headline-slider{position:relative;overflow:hidden;border-radius:18px;background:transparent;margin-bottom:18px}
.headline-slide{display:none;position:relative}
.headline-slide.active{display:block}
.headline-imagebox{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f1f5f9;border-radius:18px 18px 0 0}
.headline-imagebox img{width:100%;height:100%;object-fit:cover;display:block}
.headline-overlay{position:relative;padding:10px 16px 11px;background:linear-gradient(135deg,#b91c1c 0%,#c5161d 55%,#991b1b 100%);border-radius:0 0 18px 18px;color:#fff}
.headline-overlay h1{font-size:32px;line-height:1.18;font-weight:900;margin:0}
.headline-overlay .meta{display:flex;gap:8px;align-items:center;font-size:13px}

.snt-home-photo{display:block;margin:36px 0 42px;clear:both}
.snt-home-photo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.snt-home-photo-head h2{font-size:24px;line-height:1.25;font-weight:900;margin:0}
.snt-home-photo-grid,.photo-grid,.editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.snt-home-photo-card,.photo-card,.editor-card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;text-decoration:none;color:#111827}
.snt-home-photo-card img,.photo-card img,.editor-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.snt-home-photo-card div,.photo-caption,.editor-card div{padding:13px}
.snt-home-photo-card strong,.photo-card strong,.editor-card strong{display:block;font-size:15px;line-height:1.35;font-weight:900;color:#111827}

.highlight-section{display:block;margin:44px 0 42px;clear:both}
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;align-items:stretch}
.highlight-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;min-height:210px;padding:24px 20px 20px;border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.08);text-decoration:none;color:#111827;overflow:hidden}
.highlight-card .rank{width:48px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(180deg,#d71920,#a90f16);color:#fff;font-size:28px;line-height:1;font-weight:950}
.highlight-card strong{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:108px;margin:0;color:#111827;font-size:20px;line-height:1.35;font-weight:900}
.highlight-card small{margin-top:auto;padding-top:14px;color:#4b5563;font-size:15px;line-height:1.35;font-weight:600}

.pop-item{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #eee}
.pop-item span{background:#b91c1c;color:#fff;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900}
.side-item{display:block;padding:10px 0;border-bottom:1px solid #eee}
.side-item small,.pop-item small{display:block;color:#6b7280;margin-top:5px;font-size:12px}

.index-tabs{display:flex;gap:8px;margin-bottom:12px;border-bottom:1px solid #eee;padding-bottom:10px}
.index-tabs button{border:0;background:#f3f4f6;color:#374151;padding:9px 13px;border-radius:999px;font-weight:900;cursor:pointer}
.index-tabs button.active{background:#b91c1c;color:#fff}
.index-panel{display:none}
.index-panel.active{display:block}
.index-row{display:grid;grid-template-columns:58px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #eee}
.index-row span{color:#f59e0b;font-weight:900;font-size:13px}
.load-more-wrap{text-align:center;margin-top:18px}

@media(max-width:900px){
  .home-grid{grid-template-columns:1fr}
  .feed-item img{width:140px}
}

@media(max-width:560px){
  .feed-item a{gap:12px}
  .feed-item img{width:120px}
  .headline-overlay h1{font-size:22px}
}


/* === SINGKAP HOMEPAGE HEADLINE MOBILE FINAL === */

@media(max-width:767px){

    /* Judul headline utama 1 baris */
    .headline-overlay h1{
        font-size:18px!important;
        line-height:1.25!important;
        font-weight:900!important;
        margin:0!important;

        display:-webkit-box!important;
        -webkit-line-clamp:1!important;
        -webkit-box-orient:vertical!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:normal!important;
    }


    /* Meta headline */
    .headline-overlay .meta{
        display:flex!important;
        align-items:center!important;
        gap:7px!important;
        margin-top:8px!important;
        font-size:12px!important;
    }


    /* kategori */
    .headline-overlay .meta span:first-child{
        color:#ffffff!important;
        background:#b40018!important;
        padding:3px 9px!important;
        border-radius:20px!important;
        font-weight:800!important;
    }


    /* tanggal */
    .headline-overlay .meta span:nth-child(2){
        color:#f1f1f1!important;
        font-weight:600!important;
    }


    /* waktu */
    .headline-overlay .meta span:nth-child(3){
        color:#d1d5db!important;
        font-weight:500!important;
    }

}


/* desktop tetap lebih proporsional */
.headline-overlay h1{
    line-height:1.15;
}



/* === SINGKAP HEADLINE HOMEPAGE FINAL 20260712 === */

/* Desktop tetap proporsional */
.headline-overlay h1{
    line-height:1.15;
}


/* Mobile headline */
@media(max-width:767px){

    /* Judul hanya 1 baris */
    .headline-overlay h1{
        font-size:19px!important;
        line-height:1.25!important;
        font-weight:900!important;
        margin:0!important;

        display:block!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }


    /* Baris metadata */
    .headline-overlay .meta{
        display:flex!important;
        align-items:center!important;
        flex-wrap:nowrap!important;
        gap:6px!important;
        margin-top:8px!important;
        font-size:12px!important;
    }


    /* Kategori */
    .headline-overlay .meta .cat{
        color:#b91c1c!important;
        background:#ffffff!important;
        padding:3px 9px!important;
        border-radius:20px!important;
        font-weight:800!important;
        white-space:nowrap!important;
    }


    /* Tanda pemisah */
    .headline-overlay .meta .sep{
        color:rgba(255,255,255,.65)!important;
    }


    /* Tanggal dan waktu */
    .headline-overlay .meta span:not(.cat):not(.sep){
        color:#f3f4f6!important;
        font-weight:600!important;
        white-space:nowrap!important;
    }

}