body.blog-page,
body.blog-detail-page{
  background:#05090b;
}
.kg-blog-hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 58px;
  border-bottom:1px solid rgba(183,255,57,.1);
}
.kg-blog-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 24%,rgba(183,255,57,.18),transparent 28%),
    radial-gradient(circle at 12% 74%,rgba(25,245,198,.08),transparent 28%),
    linear-gradient(180deg,rgba(5,9,11,.98),rgba(5,9,11,.88));
  z-index:0;
}
.kg-blog-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:linear-gradient(rgba(183,255,57,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,57,.12) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
}
.kg-blog-hero-inner{
  position:relative;
  z-index:1;
  max-width:900px;
}
.kg-blog-hero h1,
.kg-blog-detail-head h1{
  font-family:var(--font-head);
  font-size:clamp(54px,7vw,104px);
  line-height:.84;
  margin:16px 0 16px;
  text-transform:uppercase;
  letter-spacing:-.05em;
}
.kg-blog-hero p,
.kg-blog-detail-head p{
  max-width:720px;
  color:#cbd8d2;
  font-size:17px;
  margin:0 0 26px;
}
.kg-blog-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.kg-blog-stage{
  padding:34px 0 84px;
}
.kg-blog-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
.kg-blog-tabs a{
  position:relative;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  color:#eef5f1;
  font-weight:900;
  font-size:13px;
  background:linear-gradient(180deg,rgba(17,24,29,.98),rgba(8,12,15,.98));
  border:1px solid rgba(183,255,57,.16);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  transition:.22s ease;
}
.kg-blog-tabs a:hover,
.kg-blog-tabs a.is-active{
  transform:translateY(-2px);
  color:#071006;
  background:linear-gradient(135deg,#d2ff4c,#a9f221);
  border-color:transparent;
  box-shadow:0 16px 32px rgba(151,241,30,.18);
}
.kg-blog-featured{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:0;
  min-height:430px;
  margin-bottom:24px;
  background:linear-gradient(135deg,rgba(18,25,29,.96),rgba(5,10,13,.99));
  border:1px solid rgba(183,255,57,.16);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
  box-shadow:0 24px 80px rgba(0,0,0,.32);
}
.kg-blog-featured::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 76% 20%,rgba(183,255,57,.13),transparent 30%);
  pointer-events:none;
}
.kg-blog-featured-media{
  position:relative;
  min-height:430px;
  background:#070d10;
  overflow:hidden;
}
.kg-blog-featured-media img,
.kg-blog-card-media img,
.kg-blog-detail-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04);
  transition:transform .35s ease;
}
.kg-blog-featured:hover .kg-blog-featured-media img,
.kg-blog-card:hover .kg-blog-card-media img{
  transform:scale(1.045);
}
.kg-blog-featured-copy{
  position:relative;
  z-index:1;
  padding:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kg-blog-featured-copy span,
.kg-blog-card-body span,
.kg-blog-detail-head span{
  color:var(--green2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kg-blog-featured-copy h2{
  font-family:var(--font-head);
  font-size:clamp(38px,4.6vw,68px);
  line-height:.88;
  letter-spacing:-.04em;
  margin:14px 0 14px;
  text-transform:uppercase;
}
.kg-blog-featured-copy p,
.kg-blog-card-body p,
.kg-blog-side-card p,
.kg-blog-cta p{
  color:#b9c4bf;
}
.kg-blog-readmore,
.kg-blog-card-body a:last-child{
  color:var(--green2);
  font-weight:950;
}
.kg-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.kg-blog-card{
  overflow:hidden;
  background:linear-gradient(180deg,rgba(18,25,29,.94),rgba(7,12,15,.98));
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:.24s ease;
}
.kg-blog-card:hover{
  transform:translateY(-5px);
  border-color:rgba(183,255,57,.28);
  box-shadow:0 22px 54px rgba(0,0,0,.28),0 0 28px rgba(183,255,57,.08);
}
.kg-blog-card-media{
  display:block;
  height:210px;
  overflow:hidden;
  background:#071014;
}
.kg-blog-card-body{
  padding:22px;
}
.kg-blog-card-body h3{
  font-size:22px;
  line-height:1.1;
  margin:10px 0 10px;
  letter-spacing:-.03em;
}
.kg-blog-card-body p{
  margin:0 0 16px;
  font-size:14px;
}
.kg-blog-cta{
  margin-top:28px;
  padding:42px;
  text-align:center;
  background:radial-gradient(circle at 50% 0,rgba(183,255,57,.2),transparent 36%),linear-gradient(180deg,rgba(18,25,29,.96),rgba(7,12,15,.98));
  border:1px solid rgba(183,255,57,.18);
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
}
.kg-blog-cta span,
.kg-blog-side-card span{
  color:var(--green2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
}
.kg-blog-cta h2{
  font-family:var(--font-head);
  font-size:clamp(36px,4.8vw,66px);
  line-height:.9;
  margin:12px 0;
  text-transform:uppercase;
}
.kg-blog-cta p{max-width:640px;margin:0 auto 22px;}
.kg-blog-detail-hero{
  position:relative;
  padding:76px 0 20px;
  overflow:hidden;
}
.kg-blog-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 74% 20%,rgba(183,255,57,.16),transparent 30%),linear-gradient(180deg,rgba(5,9,11,.96),rgba(5,9,11,.84));
  z-index:-1;
}
.kg-blog-back{
  display:inline-flex;
  margin-bottom:18px;
  color:#edf5f2;
  font-weight:900;
}
.kg-blog-detail-head{max-width:920px;}
.kg-blog-detail-cover{
  overflow:hidden;
  height:460px;
  margin:24px 0 0;
  background:#071014;
  border:1px solid rgba(183,255,57,.15);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.kg-blog-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
  padding:40px 0 76px;
}
.kg-blog-article-content{
  background:linear-gradient(180deg,rgba(18,25,29,.68),rgba(7,12,15,.86));
  border:1px solid rgba(255,255,255,.08);
  padding:42px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.kg-blog-article-content h2{
  font-family:var(--font-head);
  font-size:38px;
  line-height:.96;
  margin:34px 0 12px;
  text-transform:uppercase;
}
.kg-blog-article-content h2:first-child{margin-top:0;}
.kg-blog-article-content p,
.kg-blog-article-content li{
  color:#d1ddd8;
  font-size:17px;
}
.kg-blog-article-content ul{padding-left:22px;}
.kg-blog-detail-sidebar{position:sticky;top:120px;}
.kg-blog-side-card{
  padding:26px;
  background:linear-gradient(180deg,rgba(18,25,29,.96),rgba(7,12,15,.98));
  border:1px solid rgba(183,255,57,.18);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.kg-blog-side-card h3{
  font-size:26px;
  line-height:1;
  margin:12px 0;
}
.kg-blog-related{padding:0 0 80px;}

@media(max-width:980px){
  .kg-blog-featured{grid-template-columns:1fr;}
  .kg-blog-featured-media{min-height:300px;}
  .kg-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kg-blog-detail-layout{grid-template-columns:1fr;}
  .kg-blog-detail-sidebar{position:static;}
  .kg-blog-detail-cover{height:340px;}
}
@media(max-width:640px){
  .kg-blog-hero{padding:70px 0 42px;}
  .kg-blog-hero h1,.kg-blog-detail-head h1{font-size:52px;}
  .kg-blog-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .kg-blog-tabs a{min-height:42px;padding:0 10px;font-size:11px;text-align:center;}
  .kg-blog-featured{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);}
  .kg-blog-featured-media{min-height:220px;}
  .kg-blog-featured-copy{padding:24px;}
  .kg-blog-grid{grid-template-columns:1fr;}
  .kg-blog-card-media{height:190px;}
  .kg-blog-cta{padding:28px 18px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);}
  .kg-blog-detail-hero{padding:58px 0 16px;}
  .kg-blog-detail-cover{height:250px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);}
  .kg-blog-detail-layout{padding:28px 0 56px;}
  .kg-blog-article-content{padding:24px 18px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);}
  .kg-blog-article-content h2{font-size:30px;}
  .kg-blog-article-content p,.kg-blog-article-content li{font-size:15px;}


/* =====================================================
   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;
    }
}