/* =====================================================
   KADALGAMING BLOG & BLOG POST POLISH
   Dedicated override loaded after style.css
===================================================== */

body.blog-page,
body.blog-detail-page{
    background:
        radial-gradient(circle at 80% 8%, rgba(170,255,60,.09), transparent 28%),
        radial-gradient(circle at 8% 42%, rgba(20,255,190,.045), transparent 30%),
        #030708!important;
}

body.blog-page .site-shell,
body.blog-detail-page .site-shell{
    background:
        linear-gradient(180deg, rgba(170,255,60,.035), transparent 360px),
        #030708!important;
}

/* Global blog buttons consistency */
body.blog-page .kg-btn,
body.blog-detail-page .kg-btn{
    border-radius:0!important;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)!important;
    min-height:48px!important;
    padding:0 22px!important;
    font-size:12px!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}

/* =====================================================
   BLOG LIST HERO
===================================================== */
body.blog-page .kg-blog-hero{
    padding:92px 0 68px!important;
    border-bottom:1px solid rgba(170,255,60,.12)!important;
    background:
        radial-gradient(circle at 74% 22%, rgba(170,255,60,.16), transparent 32%),
        radial-gradient(circle at 20% 0, rgba(20,255,190,.055), transparent 30%),
        linear-gradient(180deg, rgba(8,15,13,.96), rgba(3,7,8,.92))!important;
}

body.blog-page .kg-blog-hero-bg{
    background:transparent!important;
}

body.blog-page .kg-blog-hero-bg::after,
body.blog-detail-page .kg-blog-detail-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    opacity:.13!important;
    background-image:
        linear-gradient(rgba(170,255,60,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170,255,60,.18) 1px, transparent 1px)!important;
    background-size:88px 88px!important;
    mask-image:linear-gradient(to bottom, black, transparent 90%)!important;
}

body.blog-page .kg-blog-hero-inner{
    max-width:920px!important;
}

body.blog-page .kg-kicker,
body.blog-detail-page .kg-kicker{
    color:var(--kg-green2, #b6ff35)!important;
    font-size:12px!important;
    font-weight:1000!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
}

body.blog-page .kg-blog-hero h1{
    max-width:850px!important;
    margin:18px 0 18px!important;
    font-family:var(--kg-head, var(--font-head))!important;
    font-size:clamp(54px,7vw,96px)!important;
    line-height:.88!important;
    letter-spacing:-.05em!important;
    text-transform:uppercase!important;
}

body.blog-page .kg-blog-hero p{
    max-width:760px!important;
    color:rgba(234,244,240,.76)!important;
    font-size:17px!important;
    line-height:1.72!important;
}

body.blog-page .kg-blog-hero-actions{
    gap:12px!important;
}

/* =====================================================
   BLOG TABS
===================================================== */
body.blog-page .kg-blog-stage{
    padding:34px 0 92px!important;
}

body.blog-page .kg-blog-tabs{
    gap:10px!important;
    margin:0 0 28px!important;
}

body.blog-page .kg-blog-tabs a{
    min-height:46px!important;
    padding:0 18px!important;
    border:1px solid rgba(170,255,60,.13)!important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018))!important;
    color:rgba(245,250,247,.86)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)!important;
}

body.blog-page .kg-blog-tabs a:hover,
body.blog-page .kg-blog-tabs a.is-active{
    color:#071007!important;
    background:linear-gradient(135deg, var(--kg-green2, #b6ff35), var(--kg-green, #91e900))!important;
    border-color:transparent!important;
    box-shadow:0 16px 32px rgba(170,255,60,.18)!important;
}

/* =====================================================
   FEATURED BLOG CARD
===================================================== */
body.blog-page .kg-blog-featured{
    min-height:390px!important;
    margin-bottom:22px!important;
    grid-template-columns:1.02fr .98fr!important;
    border:1px solid rgba(170,255,60,.16)!important;
    background:
        radial-gradient(circle at 82% 12%, rgba(170,255,60,.12), transparent 30%),
        linear-gradient(135deg, rgba(15,23,25,.98), rgba(5,10,12,.98))!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 26px 70px rgba(0,0,0,.34)!important;
    clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px)!important;
}

body.blog-page .kg-blog-featured::before{
    background:
        linear-gradient(90deg, rgba(170,255,60,.17), transparent 2px) 0 0/100% 100% no-repeat,
        radial-gradient(circle at 72% 18%, rgba(170,255,60,.10), transparent 32%)!important;
}

body.blog-page .kg-blog-featured-media{
    min-height:390px!important;
}

body.blog-page .kg-blog-featured-media::after,
body.blog-page .kg-blog-card-media::after,
body.blog-detail-page .kg-blog-detail-cover::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
        linear-gradient(90deg, rgba(0,0,0,.28), transparent 44%),
        radial-gradient(circle at 70% 40%, rgba(170,255,60,.10), transparent 34%)!important;
}

body.blog-page .kg-blog-featured-copy{
    padding:42px 44px!important;
}

body.blog-page .kg-blog-featured-copy span,
body.blog-page .kg-blog-card-body span,
body.blog-detail-page .kg-blog-detail-head span{
    color:var(--kg-green2, #b6ff35)!important;
    font-size:11px!important;
    font-weight:1000!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
}

body.blog-page .kg-blog-featured-copy h2{
    font-family:var(--kg-head, var(--font-head))!important;
    font-size:clamp(40px,4.7vw,64px)!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
    margin:14px 0 16px!important;
}

body.blog-page .kg-blog-featured-copy p{
    color:rgba(231,241,236,.72)!important;
    font-size:15px!important;
    line-height:1.7!important;
    max-width:560px!important;
}

body.blog-page .kg-blog-readmore,
body.blog-page .kg-blog-card-body a:last-child{
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    color:var(--kg-green2, #b6ff35)!important;
    font-size:12px!important;
    font-weight:1000!important;
    text-transform:uppercase!important;
    letter-spacing:.05em!important;
}

/* =====================================================
   BLOG GRID CARDS
===================================================== */
body.blog-page .kg-blog-grid,
body.blog-detail-page .kg-blog-grid{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
    gap:20px!important;
}

body.blog-page .kg-blog-card,
body.blog-detail-page .kg-blog-card{
    position:relative!important;
    min-height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(170,255,60,.13)!important;
    background:
        radial-gradient(circle at 20% 0, rgba(170,255,60,.07), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014))!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 44px rgba(0,0,0,.22)!important;
    clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important;
}

body.blog-page .kg-blog-card::before,
body.blog-detail-page .kg-blog-card::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:2px!important;
    background:linear-gradient(180deg, var(--kg-green2, #b6ff35), transparent)!important;
    opacity:.75!important;
    pointer-events:none!important;
}

body.blog-page .kg-blog-card:hover,
body.blog-detail-page .kg-blog-card:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(170,255,60,.28)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 24px 56px rgba(0,0,0,.30),
        0 0 26px rgba(170,255,60,.07)!important;
}

body.blog-page .kg-blog-card-media,
body.blog-detail-page .kg-blog-card-media{
    position:relative!important;
    height:250px!important;
    background:#05090a!important;
}

body.blog-page .kg-blog-card-body,
body.blog-detail-page .kg-blog-card-body{
    display:flex!important;
    flex-direction:column!important;
    flex:1!important;
    padding:24px!important;
}

body.blog-page .kg-blog-card-body h3,
body.blog-detail-page .kg-blog-card-body h3{
    font-family:var(--kg-head, var(--font-head))!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:.96!important;
    margin:10px 0 12px!important;
    letter-spacing:-.035em!important;
}

body.blog-page .kg-blog-card-body p,
body.blog-detail-page .kg-blog-card-body p{
    color:rgba(225,236,231,.70)!important;
    font-size:14px!important;
    line-height:1.65!important;
    margin:0 0 18px!important;
}

body.blog-page .kg-blog-card-body a:last-child,
body.blog-detail-page .kg-blog-card-body a:last-child{
    margin-top:auto!important;
}

/* =====================================================
   BLOG CTA
===================================================== */
body.blog-page .kg-blog-cta{
    margin-top:34px!important;
    padding:46px 34px!important;
    border:1px solid rgba(170,255,60,.18)!important;
    background:
        radial-gradient(circle at 50% 0, rgba(170,255,60,.18), transparent 36%),
        linear-gradient(180deg, rgba(18,26,29,.92), rgba(7,12,15,.98))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 24px 60px rgba(0,0,0,.24)!important;
    clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)!important;
}

body.blog-page .kg-blog-cta h2{
    font-family:var(--kg-head, var(--font-head))!important;
    max-width:780px!important;
    margin:12px auto!important;
    font-size:clamp(38px,5vw,64px)!important;
    line-height:.92!important;
}

/* =====================================================
   BLOG DETAIL PAGE
===================================================== */
body.blog-detail-page .kg-blog-detail-hero{
    position:relative!important;
    padding:82px 0 0!important;
    background:
        radial-gradient(circle at 76% 12%, rgba(170,255,60,.15), transparent 32%),
        linear-gradient(180deg, rgba(7,14,13,.98), rgba(3,7,8,.92))!important;
    border-bottom:1px solid rgba(170,255,60,.10)!important;
}

body.blog-detail-page .kg-blog-detail-hero::before{
    background:none!important;
}

body.blog-detail-page .kg-blog-detail-head{
    max-width:980px!important;
}

body.blog-detail-page .kg-blog-back{
    min-height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:18px!important;
    color:rgba(244,250,247,.84)!important;
    font-size:12px!important;
    font-weight:1000!important;
    text-transform:uppercase!important;
    letter-spacing:.05em!important;
}

body.blog-detail-page .kg-blog-back:hover{
    color:var(--kg-green2, #b6ff35)!important;
}

body.blog-detail-page .kg-blog-detail-head h1{
    max-width:940px!important;
    margin:16px 0 18px!important;
    font-family:var(--kg-head, var(--font-head))!important;
    font-size:clamp(50px,6.4vw,92px)!important;
    line-height:.88!important;
    letter-spacing:-.055em!important;
}

body.blog-detail-page .kg-blog-detail-head p{
    max-width:760px!important;
    color:rgba(235,244,240,.74)!important;
    font-size:17px!important;
    line-height:1.72!important;
    margin-bottom:0!important;
}

body.blog-detail-page .kg-blog-detail-cover{
    position:relative!important;
    height:430px!important;
    margin:32px 0 0!important;
    border:1px solid rgba(170,255,60,.17)!important;
    box-shadow:0 30px 78px rgba(0,0,0,.32)!important;
    clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px)!important;
}

body.blog-detail-page .kg-blog-detail-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:28px!important;
    padding:44px 0 86px!important;
}

body.blog-detail-page .kg-blog-article-content{
    position:relative!important;
    padding:44px!important;
    border:1px solid rgba(170,255,60,.12)!important;
    background:
        radial-gradient(circle at 0 0, rgba(170,255,60,.055), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018))!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 20px 54px rgba(0,0,0,.22)!important;
    clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)!important;
}

body.blog-detail-page .kg-blog-article-content::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:3px!important;
    background:linear-gradient(180deg, var(--kg-green2, #b6ff35), transparent)!important;
    opacity:.8!important;
}

body.blog-detail-page .kg-blog-article-content h2{
    font-family:var(--kg-head, var(--font-head))!important;
    color:#fff!important;
    font-size:clamp(30px,3.3vw,42px)!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
    margin:38px 0 14px!important;
}

body.blog-detail-page .kg-blog-article-content p,
body.blog-detail-page .kg-blog-article-content li{
    color:rgba(226,238,233,.80)!important;
    font-size:16.5px!important;
    line-height:1.78!important;
}

body.blog-detail-page .kg-blog-article-content ul,
body.blog-detail-page .kg-blog-article-content ol{
    margin:16px 0 22px!important;
    padding-left:24px!important;
}

body.blog-detail-page .kg-blog-article-content li::marker{
    color:var(--kg-green2, #b6ff35)!important;
}

body.blog-detail-page .kg-blog-side-card{
    padding:24px!important;
    border:1px solid rgba(170,255,60,.16)!important;
    background:
        radial-gradient(circle at 50% 0, rgba(170,255,60,.12), transparent 34%),
        linear-gradient(180deg, rgba(18,26,29,.96), rgba(7,12,15,.98))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 18px 44px rgba(0,0,0,.22)!important;
    clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)!important;
}

body.blog-detail-page .kg-blog-side-card h3{
    font-family:var(--kg-head, var(--font-head))!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:.95!important;
    margin:12px 0!important;
    letter-spacing:-.035em!important;
}

body.blog-detail-page .kg-blog-side-card p{
    color:rgba(225,236,231,.70)!important;
    font-size:14px!important;
    line-height:1.65!important;
}

body.blog-detail-page .kg-blog-related{
    padding:0 0 88px!important;
}

body.blog-detail-page .kg-blog-related .section-head{
    margin-bottom:26px!important;
}

body.blog-detail-page .kg-blog-related .section-head h2{
    font-family:var(--kg-head, var(--font-head))!important;
    font-size:clamp(38px,5vw,62px)!important;
    line-height:.9!important;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1080px){
    body.blog-page .kg-blog-featured{
        grid-template-columns:1fr!important;
        min-height:auto!important;
    }

    body.blog-page .kg-blog-featured-media{
        min-height:330px!important;
        height:330px!important;
    }

    body.blog-detail-page .kg-blog-detail-layout{
        grid-template-columns:1fr!important;
    }

    body.blog-detail-page .kg-blog-detail-sidebar{
        position:static!important;
    }
}

@media (max-width:780px){
    body.blog-page .kg-blog-hero,
    body.blog-detail-page .kg-blog-detail-hero{
        padding-top:58px!important;
    }

    body.blog-page .kg-blog-hero h1,
    body.blog-detail-page .kg-blog-detail-head h1{
        font-size:clamp(42px,13vw,58px)!important;
        line-height:.9!important;
    }

    body.blog-page .kg-blog-hero p,
    body.blog-detail-page .kg-blog-detail-head p{
        font-size:15px!important;
        line-height:1.68!important;
    }

    body.blog-page .kg-blog-hero-actions{
        display:grid!important;
        grid-template-columns:1fr!important;
    }

    body.blog-page .kg-blog-tabs{
        display:flex!important;
        overflow:auto!important;
        flex-wrap:nowrap!important;
        padding-bottom:8px!important;
        margin-bottom:22px!important;
        scrollbar-width:none!important;
    }

    body.blog-page .kg-blog-tabs::-webkit-scrollbar{display:none!important;}

    body.blog-page .kg-blog-tabs a{
        flex:0 0 auto!important;
        min-height:42px!important;
        padding:0 14px!important;
        font-size:11px!important;
    }

    body.blog-page .kg-blog-featured-copy{
        padding:26px 20px!important;
    }

    body.blog-page .kg-blog-featured-copy h2{
        font-size:38px!important;
    }

    body.blog-page .kg-blog-grid,
    body.blog-detail-page .kg-blog-grid{
        grid-template-columns:1fr!important;
        gap:16px!important;
    }

    body.blog-page .kg-blog-card-media,
    body.blog-detail-page .kg-blog-card-media{
        height:220px!important;
    }

    body.blog-page .kg-blog-card-body,
    body.blog-detail-page .kg-blog-card-body{
        padding:20px!important;
    }

    body.blog-page .kg-blog-card-body h3,
    body.blog-detail-page .kg-blog-card-body h3{
        font-size:26px!important;
    }

    body.blog-page .kg-blog-cta{
        padding:30px 18px!important;
    }

    body.blog-detail-page .kg-blog-detail-cover{
        height:250px!important;
        margin-top:24px!important;
    }

    body.blog-detail-page .kg-blog-detail-layout{
        padding:30px 0 64px!important;
    }

    body.blog-detail-page .kg-blog-article-content{
        padding:28px 20px!important;
    }

    body.blog-detail-page .kg-blog-article-content h2{
        font-size:30px!important;
    }

    body.blog-detail-page .kg-blog-article-content p,
    body.blog-detail-page .kg-blog-article-content li{
        font-size:15px!important;
        line-height:1.72!important;
    }
}

@media (max-width:420px){
    body.blog-page .kg-blog-featured-media,
    body.blog-page .kg-blog-card-media,
    body.blog-detail-page .kg-blog-card-media{
        height:190px!important;
        min-height:190px!important;
    }

    body.blog-detail-page .kg-blog-detail-cover{
        height:220px!important;
    }

    body.blog-page .kg-blog-featured-copy h2,
    body.blog-page .kg-blog-cta h2{
        font-size:34px!important;
    }
}


/* =====================================================
   BLOG ALIGNMENT FINAL FIX - 2026-06-28
   Paksa hero blog & blog post ikut margin kiri layout utama
===================================================== */
@media (min-width:1025px){
    body.blog-page .kg-blog-hero .container.kg-blog-hero-inner,
    body.blog-page .kg-blog-stage > .container,
    body.blog-detail-page .kg-blog-detail-hero .container.kg-blog-detail-head,
    body.blog-detail-page .kg-blog-detail-hero > .container,
    body.blog-detail-page .container.kg-blog-detail-layout,
    body.blog-detail-page .kg-blog-related > .container{
        width:min(1280px, calc(100% - 160px))!important;
        max-width:1280px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    body.blog-page .kg-blog-hero-inner,
    body.blog-detail-page .kg-blog-detail-head{
        text-align:left!important;
        transform:none!important;
    }

    body.blog-page .kg-blog-hero h1,
    body.blog-detail-page .kg-blog-detail-head h1{
        max-width:960px!important;
        margin-left:0!important;
        margin-right:auto!important;
        text-align:left!important;
    }

    body.blog-page .kg-blog-hero p,
    body.blog-detail-page .kg-blog-detail-head p{
        max-width:780px!important;
        margin-left:0!important;
        margin-right:auto!important;
        text-align:left!important;
    }

    body.blog-page .kg-blog-hero-actions{
        justify-content:flex-start!important;
        margin-left:0!important;
        margin-right:auto!important;
    }

    body.blog-page .kg-kicker,
    body.blog-detail-page .kg-blog-back,
    body.blog-detail-page .kg-blog-detail-head > span{
        margin-left:0!important;
        margin-right:auto!important;
        text-align:left!important;
    }
}

@media (min-width:761px) and (max-width:1024px){
    body.blog-page .kg-blog-hero .container.kg-blog-hero-inner,
    body.blog-page .kg-blog-stage > .container,
    body.blog-detail-page .kg-blog-detail-hero .container.kg-blog-detail-head,
    body.blog-detail-page .kg-blog-detail-hero > .container,
    body.blog-detail-page .container.kg-blog-detail-layout,
    body.blog-detail-page .kg-blog-related > .container{
        width:min(100% - 56px, 940px)!important;
        max-width:940px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}

@media (max-width:760px){
    body.blog-page .kg-blog-hero .container.kg-blog-hero-inner,
    body.blog-page .kg-blog-stage > .container,
    body.blog-detail-page .kg-blog-detail-hero .container.kg-blog-detail-head,
    body.blog-detail-page .kg-blog-detail-hero > .container,
    body.blog-detail-page .container.kg-blog-detail-layout,
    body.blog-detail-page .kg-blog-related > .container{
        width:min(100% - 28px, 1180px)!important;
        max-width:1180px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    body.blog-page .kg-blog-hero h1,
    body.blog-detail-page .kg-blog-detail-head h1,
    body.blog-page .kg-blog-hero p,
    body.blog-detail-page .kg-blog-detail-head p{
        text-align:left!important;
        margin-left:0!important;
        margin-right:auto!important;
    }
}