:root{--sb-green:#0a8f4a;--sb-green-dark:#056b37;--sb-ink:#152019;--sb-muted:#6c756f;--sb-bg:#f5f8f6;--sb-line:#e2e9e4;--sb-card:#fff;--sb-radius:16px;--sb-shadow:0 8px 28px rgba(13,42,25,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sb-bg);color:var(--sb-ink);font-family:Inter,Arial,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-main{padding:22px 0 60px}.topline{background:#075f32;color:#dff6e8;font-size:12px}.top-inner{height:36px;display:flex;align-items:center;justify-content:space-between}.top-links{display:flex;gap:22px}.top-links a:hover{color:#fff}.masthead{height:104px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff}.site-header{background:#fff}.brand{display:flex;align-items:center;min-width:300px}.brand .custom-logo-link{display:flex;align-items:center}.brand .custom-logo{max-height:70px;width:auto}.brand-symbol{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,var(--sb-green),#39b66c);display:grid;place-items:center;color:#fff;font:800 34px 'Plus Jakarta Sans';box-shadow:0 8px 20px rgba(10,143,74,.2)}.brand-name{font:800 32px 'Plus Jakarta Sans';letter-spacing:-1.7px;margin-left:12px}.brand-name>span,.footer-logo>span{color:var(--sb-green)}.brand-name small{display:block;font:600 11px Inter;color:#7a827d;letter-spacing:0;margin-top:-1px}.header-ad,.ad-slot,.widget-ad{border:1px dashed #c8d5cc;background:#f8fbf9;color:#8a958e;display:grid;place-items:center;text-transform:uppercase;font-size:11px;letter-spacing:.8px}.header-ad{height:70px;width:min(728px,60vw)}.main-nav{border-top:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line);background:#fff;position:sticky;top:0;z-index:50}.nav-inner{height:54px;display:flex;align-items:center;gap:10px}.home-btn,.search-toggle,.mobile-menu{border:0;background:#edf8f1;color:var(--sb-green);width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;cursor:pointer;flex:0 0 auto}.primary-menu{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:2px;flex:1;overflow:auto;scrollbar-width:none}.primary-menu::-webkit-scrollbar{display:none}.primary-menu li{white-space:nowrap}.primary-menu a{display:block;padding:9px 11px;border-radius:9px;font-size:12px;font-weight:700;color:#27312b}.primary-menu a:hover{background:#eff8f2;color:var(--sb-green)}.search-toggle{background:#f4f6f5;color:#25302a}.mobile-menu{display:none}.mobile-search{display:none;background:#fff;padding:12px 0;border-bottom:1px solid var(--sb-line)}.mobile-search.is-open{display:block}.search-form{display:flex;gap:8px}.search-form label{flex:1}.search-field{width:100%;border:1px solid var(--sb-line);border-radius:10px;padding:11px 13px}.search-submit{border:0;border-radius:10px;padding:0 17px;background:var(--sb-green);color:#fff;font-weight:700}.breaking{background:#fff;border-bottom:1px solid var(--sb-line)}.breaking-inner{height:43px;display:flex;align-items:center;overflow:hidden}.breaking-label{background:var(--sb-green);color:#fff;border-radius:6px;padding:5px 9px;font-size:10px;font-weight:800;white-space:nowrap}.breaking-track{overflow:hidden;flex:1;margin-left:15px}.breaking-move{display:flex;gap:12px;align-items:center;width:max-content;animation:sbTicker 34s linear infinite}.breaking-move a{font-size:12px;font-weight:600}.breaking-move a:hover{color:var(--sb-green)}.breaking-move i{color:#9bad9f;font-style:normal}@keyframes sbTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ad-slot{border-radius:12px;margin-bottom:20px}.top-ad{height:54px}.hero-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(330px,.9fr);gap:18px}.hero-main{min-height:510px}.hero-media{display:block;height:100%;min-height:510px;position:relative;overflow:hidden;border-radius:var(--sb-radius);background:#163424;box-shadow:var(--sb-shadow)}.hero-media img{width:100%;height:100%;object-fit:cover}.hero-gradient{position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82))}.hero-content{position:absolute;left:32px;right:32px;bottom:28px;color:#fff}.tag,.tag-light,.mini-cat{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.45px;text-transform:uppercase}.tag{background:var(--sb-green);color:#fff;padding:6px 9px;border-radius:6px}.hero-content h1{font:800 clamp(28px,3.3vw,47px)/1.08 'Plus Jakarta Sans';letter-spacing:-1.4px;margin:12px 0 10px;max-width:880px}.hero-content p{margin:0 0 13px;max-width:720px;color:#e7eee9;font-size:14px}.meta{font-size:11px;color:#7a847e;display:flex;gap:8px;align-items:center}.hero-content .meta{color:#d9e4dd}.latest-panel{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);padding:20px;box-shadow:var(--sb-shadow)}.panel-head,.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px}.panel-head{padding-bottom:10px;border-bottom:1px solid var(--sb-line)}.panel-head h2,.section-title h2,.section-title h1{font:800 22px 'Plus Jakarta Sans';letter-spacing:-.7px;margin:0}.panel-head a,.section-title>a{font-size:11px;color:var(--sb-green);font-weight:800}.latest-row{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--sb-line)}.latest-row:last-child{border-bottom:0}.latest-thumb{height:70px;border-radius:9px;overflow:hidden;background:#eef4f0}.latest-thumb img{width:100%;height:100%;object-fit:cover}.latest-thumb span,.popular-thumb span{height:100%;display:grid;place-items:center;color:var(--sb-green);font-weight:800}.mini-cat{color:var(--sb-green);font-size:8px;margin-bottom:3px}.latest-row h3{font-size:13px;line-height:1.32;margin:0 0 5px;font-weight:800}.latest-row time{font-size:10px;color:#919a94}.quick-cats{display:grid;grid-template-columns:repeat(9,1fr);background:#fff;border:1px solid var(--sb-line);border-radius:14px;margin:20px 0;padding:7px;box-shadow:var(--sb-shadow)}.quick-cats a{padding:11px 7px;border-radius:10px;text-align:center;font-size:10px;font-weight:800;color:#4c5750}.quick-cats a span{display:block;color:var(--sb-green);font-size:14px;margin-bottom:3px}.quick-cats a:hover,.quick-cats .active{background:#edf8f1;color:var(--sb-green)}.section-block{margin-top:30px}.section-title{margin-bottom:15px}.section-title>div{position:relative}.section-kicker{display:block;color:var(--sb-green);font-size:9px;font-weight:900;letter-spacing:1.3px;margin-bottom:2px}.feature-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:16px}.feature-card{background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;box-shadow:var(--sb-shadow)}.feature-card.big{grid-row:span 2}.feature-image{display:block;height:205px;background:#edf4ef;overflow:hidden}.feature-card.big .feature-image{height:300px}.feature-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.feature-card:hover .feature-image img,.category-card:hover>a img{transform:scale(1.035)}.image-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#dfeee4,#f5faf7);color:var(--sb-green);font:800 16px 'Plus Jakarta Sans';letter-spacing:1px}.feature-body,.category-body{padding:15px}.tag-light{color:var(--sb-green);background:#edf8f1;border-radius:5px;padding:4px 7px}.feature-body h3,.category-body h3{font-size:17px;line-height:1.25;margin:9px 0 7px;font-weight:800}.feature-card.big .feature-body h3{font-size:25px;letter-spacing:-.5px}.feature-body p,.category-body p{font-size:12px;color:#6d7770;margin:0 0 10px}.mid-ad{height:135px;margin-top:30px}.popular-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.popular-card{background:#fff;border:1px solid var(--sb-line);border-radius:13px;padding:10px;position:relative}.rank{position:absolute;top:10px;left:10px;width:25px;height:25px;border-radius:8px;background:var(--sb-green);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;z-index:2}.popular-thumb{height:110px;display:block;background:#eef4f0;border-radius:9px;overflow:hidden;margin-bottom:10px}.popular-thumb img{width:100%;height:100%;object-fit:cover}.popular-card h3{font-size:13px;line-height:1.3;margin:5px 0}.popular-card small{color:#929b95;font-size:10px}.category-block{padding-top:8px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.category-card{background:#fff;border:1px solid var(--sb-line);border-radius:14px;overflow:hidden;box-shadow:var(--sb-shadow)}.category-card>a{height:180px;display:block;overflow:hidden;background:#edf4ef}.category-card>a img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.category-body h3{font-size:15px}.archive-layout,.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.archive-main,.single-article{min-width:0}.archive-card{display:grid;grid-template-columns:280px 1fr;gap:20px;background:#fff;border:1px solid var(--sb-line);border-radius:14px;padding:12px;margin-bottom:14px;box-shadow:var(--sb-shadow)}.archive-image{height:180px;overflow:hidden;border-radius:10px;background:#eef4f0}.archive-image img{width:100%;height:100%;object-fit:cover}.archive-body h2{font:800 22px/1.18 'Plus Jakarta Sans';letter-spacing:-.6px;margin:9px 0}.archive-body p{font-size:13px;color:#6d7770;margin:0 0 12px}.sidebar .widget{background:#fff;border:1px solid var(--sb-line);border-radius:14px;padding:17px;margin-bottom:15px}.widget-title{font:800 18px 'Plus Jakarta Sans';margin:0 0 13px}.widget-ad{height:250px;border-radius:14px;margin-bottom:15px}.single-article{background:#fff;border:1px solid var(--sb-line);border-radius:16px;padding:28px 34px;box-shadow:var(--sb-shadow)}.article-head h1{font:800 clamp(31px,4vw,50px)/1.08 'Plus Jakarta Sans';letter-spacing:-1.5px;margin:12px 0}.lead{font-size:17px;color:#68736c;margin:0 0 17px}.article-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:#78827b}.article-cover{margin:24px -34px 0}.article-cover img{width:100%;max-height:650px;object-fit:cover}.article-content{font-family:Georgia,serif;font-size:18px;line-height:1.8;color:#242a26;padding-top:24px}.article-content p{margin:0 0 20px}.article-content h2,.article-content h3{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.25}.article-content img{border-radius:10px;margin:20px auto}.article-share{display:flex;align-items:center;gap:8px;border-top:1px solid var(--sb-line);margin-top:28px;padding-top:17px}.article-share a{background:#edf8f1;color:var(--sb-green);border-radius:8px;padding:7px 10px;font-size:11px;font-weight:800}.empty-state{background:#fff;border:1px solid var(--sb-line);border-radius:16px;padding:70px 25px;text-align:center;box-shadow:var(--sb-shadow)}.error-code{font:800 70px 'Plus Jakarta Sans';color:var(--sb-green)}.empty-state h1,.empty-state h2{font:800 30px 'Plus Jakarta Sans';margin:5px 0 10px}.empty-state p{color:var(--sb-muted)}.empty-state .search-form{max-width:500px;margin:20px auto}.btn-primary{display:inline-block;background:var(--sb-green);color:#fff;border-radius:9px;padding:10px 16px;font-weight:800;font-size:12px}.nav-links{display:flex;gap:7px;margin:20px 0}.page-numbers{border:1px solid var(--sb-line);background:#fff;padding:8px 11px;border-radius:8px;font-size:12px}.page-numbers.current,.page-numbers:hover{background:var(--sb-green);color:#fff;border-color:var(--sb-green)}.site-footer{background:#092d1b;color:#cbd8d0;margin-top:30px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding:50px 0}.footer-logo{font:800 28px 'Plus Jakarta Sans';color:#fff}.footer-logo span{color:#4ed481}.footer-brand p{font-size:12px;color:#9db1a4;max-width:310px}.socials{display:flex;gap:8px}.socials a{width:33px;height:33px;border:1px solid #2c5b43;border-radius:9px;display:grid;place-items:center;color:#fff}.footer-widget h3{color:#fff;font:800 14px 'Plus Jakarta Sans';margin:0 0 12px}.footer-widget ul{padding:0;margin:0;list-style:none}.footer-widget li{margin:7px 0}.footer-widget a{font-size:12px;color:#a9baaf}.footer-bottom{border-top:1px solid #234634}.footer-bottom .container{min-height:55px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#839b8d}
@media(max-width:1050px){.hero-layout{grid-template-columns:1.45fr 1fr}.quick-cats{grid-template-columns:repeat(5,1fr)}.popular-grid{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid .footer-widget:last-child{display:none}.primary-menu a{padding-inline:8px;font-size:11px}}
@media(max-width:780px){.container{width:min(100% - 22px,680px)}.top-inner{height:32px}.top-links{display:none}.masthead{height:78px}.brand{min-width:0}.brand-symbol{width:43px;height:43px;font-size:27px;border-radius:12px}.brand-name{font-size:25px}.brand-name small{font-size:9px}.header-ad{display:none}.main-nav{position:relative}.nav-inner{height:49px}.mobile-menu{display:grid}.home-btn{width:34px;height:34px}.primary-menu{position:absolute;display:none;left:10px;right:10px;top:53px;background:#fff;border:1px solid var(--sb-line);border-radius:12px;padding:7px;box-shadow:0 14px 35px rgba(0,0,0,.12);flex-direction:column;align-items:stretch;max-height:70vh}.primary-menu.is-open{display:flex}.primary-menu a{padding:10px 12px}.search-toggle{margin-left:auto}.breaking-inner{height:40px}.breaking-label{font-size:9px}.hero-layout,.archive-layout,.article-layout{grid-template-columns:1fr}.hero-main,.hero-media{min-height:420px}.latest-panel{padding:15px}.quick-cats{display:flex;overflow:auto;gap:4px;justify-content:flex-start}.quick-cats a{min-width:100px}.feature-grid{grid-template-columns:1fr}.feature-card.big{grid-row:auto}.feature-card.big .feature-image,.feature-image{height:240px}.popular-grid{grid-template-columns:1fr 1fr}.category-grid{grid-template-columns:1fr 1fr}.archive-card{grid-template-columns:145px 1fr}.archive-image{height:125px}.archive-body h2{font-size:17px}.archive-body p{font-size:11px}.single-article{padding:20px 18px}.article-cover{margin:20px -18px 0}.article-content{font-size:17px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-grid .footer-widget:last-child{display:block}.footer-bottom .container{flex-direction:column;justify-content:center;gap:4px}.hero-content{left:20px;right:20px;bottom:20px}.hero-content h1{font-size:29px}.hero-content p{font-size:12px}.top-ad{height:45px}}
@media(max-width:480px){.hero-main,.hero-media{min-height:390px}.hero-content h1{font-size:25px}.hero-content p{display:none}.latest-row{grid-template-columns:80px 1fr}.latest-thumb{height:62px}.popular-grid,.category-grid{grid-template-columns:1fr}.category-card>a{height:210px}.archive-card{grid-template-columns:1fr}.archive-image{height:210px}.article-head h1{font-size:32px}.lead{font-size:15px}.article-meta{gap:7px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-grid .footer-widget:last-child{display:block}}

/* =========================================================
   STORYBANUA - PERBAIKAN IKLAN & HEADER
   ========================================================= */

/* Container utama */
.container {
    width: min(1100px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HEADER / MASTHEAD
   ========================================================= */

.masthead {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* Logo */
.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 300px;
}


/* Area iklan header */
.header-ad {
    width: 728px;
    max-width: 100%;
    height: 90px;
    flex: 0 1 728px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* Gambar iklan header */
.header-ad img {
    display: block;

    width: 100%;
    max-width: 728px;

    height: 90px;

    object-fit: cover;
    object-position: center;

    border: 0;
}


/* Link iklan */
.header-ad a {
    display: block;
    width: 100%;
    height: 90px;
}


/* Placeholder */
.header-ad:empty {
    display: none;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    position: relative;
    z-index: 20;
}

.nav-inner {
    min-height: 52px;
    display: flex;
    align-items: center;
}


/* =========================================================
   BREAKING NEWS
   ========================================================= */

.breaking {
    position: relative;
    z-index: 15;
    min-height: 42px;
}

.breaking-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
}

.breaking-track {
    min-width: 0;
    overflow: hidden;
}


/* =========================================================
   IKLAN ATAS HALAMAN
   ========================================================= */

.ad-slot.top-ad {
    width: 100%;
    max-width: 970px;

    height: 90px;

    margin: 22px auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* Gambar iklan atas */
.ad-slot.top-ad img {
    display: block;

    width: 100%;
    max-width: 970px;

    height: 90px;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   IKLAN TENGAH
   ========================================================= */

.ad-slot.mid-ad {
    width: 100%;
    max-width: 970px;

    margin: 35px auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* Gambar iklan tengah */
.ad-slot.mid-ad img {
    display: block;

    width: 100%;
    max-width: 970px;

    height: auto;

    max-height: 250px;

    object-fit: contain;
}


/* Link iklan tengah */
.ad-slot.mid-ad a {
    display: block;
    width: 100%;
    text-align: center;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-layout {
    position: relative;
    z-index: 1;
}


/* Jangan biarkan gambar hero melebihi kotaknya */
.hero-media img,
.feature-image img,
.category-card > a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .masthead {
        gap: 20px;
    }

    .brand {
        min-width: 250px;
    }

    .header-ad {
        width: 100%;
        max-width: 600px;
    }

    .header-ad img {
        max-width: 600px;
    }
}


/* =========================================================
   RESPONSIVE HP
   ========================================================= */

@media (max-width: 768px) {

    .container {
        width: min(100% - 20px, 1100px);
    }


    /* Header */
    .masthead {
        min-height: auto;

        padding-top: 15px;
        padding-bottom: 15px;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }


    .brand {
        min-width: 0;
        width: 100%;
        justify-content: center;
    }


    /* Iklan header HP */
    .header-ad {
        width: 100%;
        height: auto;
        min-height: 50px;

        flex: none;
    }


    .header-ad a {
        height: auto;
    }


    .header-ad img {
        width: 100%;
        height: auto;

        max-width: 728px;

        object-fit: contain;
    }


    /* Iklan atas HP */
    .ad-slot.top-ad {
        width: 100%;
        height: auto;

        min-height: 50px;

        margin: 15px auto;
    }


    .ad-slot.top-ad img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* Iklan tengah HP */
    .ad-slot.mid-ad {
        width: 100%;
        height: auto;

        margin: 25px auto;
    }


    .ad-slot.mid-ad img {
        width: 100%;
        height: auto;

        max-height: none;
    }
}


/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 480px) {

    .masthead {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .header-ad {
        min-height: 40px;
    }

    .ad-slot.top-ad {
        min-height: 40px;
    }

}