/* =============================================================
   SMANJA WEB v6.0.0 — BERSERI Institutional Refresh
   Public visual upgrade. Database and CMS logic remain unchanged.
============================================================= */

:root{
    --sj6-navy:#082b52;
    --sj6-blue:#145fa8;
    --sj6-sky:#eaf4ff;
    --sj6-gold:#d5aa42;
    --sj6-teal:#1d9a91;
    --sj6-red:#c84f5a;
    --sj6-ink:#15283e;
    --sj6-body:#607287;
    --sj6-line:#dce7f1;
    --sj6-card:#ffffff;
    --sj6-shadow:0 14px 34px rgba(8,43,82,.10);
    --sj6-shadow-hover:0 22px 46px rgba(8,43,82,.16);
}

/* -------------------------------------------------------------
   NAVBAR -> BANNER: no artificial whitespace
------------------------------------------------------------- */
body.home-page{
    padding-top:0!important;
}
body.home-page #content,
body.cms-datagoe #content{
    padding-top:124px!important;
}
body.cms-datagoe .home-main-slider,
body.cms-datagoe .home-main-slider .main-slider,
body.cms-datagoe .home-main-slider .main-slider__slider,
body.cms-datagoe .home-main-slider .glide__track,
body.cms-datagoe .home-main-slider .glide__slides{
    margin-top:0!important;
    padding-top:0!important;
}
body.cms-datagoe .home-main-slider .main-slider__space{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
}

/* -------------------------------------------------------------
   MAIN BANNER / SLIDER
   v6 is deliberately taller than v4.1 and anchors images to top.
------------------------------------------------------------- */
body.cms-datagoe .home-main-slider{
    overflow:hidden;
    background:#071f3c;
    border-bottom:1px solid rgba(8,43,82,.12);
    box-shadow:0 10px 30px rgba(8,43,82,.08);
}
body.cms-datagoe .home-main-slider .glide__slide{
    height:clamp(440px,47vw,650px)!important;
    min-height:440px!important;
    overflow:hidden;
    background:#071f3c;
}
body.cms-datagoe .home-main-slider .glide__slide>a{
    display:block!important;
    width:100%!important;
    height:100%!important;
    position:relative;
    overflow:hidden;
}
body.cms-datagoe .home-main-slider .img-cover{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    /* Important: protect heads/logo/text often placed in upper banner area. */
    object-position:center top!important;
    transform:none!important;
}
body.cms-datagoe .home-main-slider .glide__slide--active .img-cover{
    transform:none!important;
}
body.cms-datagoe .home-main-slider .main-slider__overlay{
    background:
      linear-gradient(90deg,rgba(5,28,54,.24),rgba(5,28,54,.03) 64%),
      linear-gradient(0deg,rgba(5,28,54,.20),transparent 34%)!important;
}
body.cms-datagoe .home-main-slider::after{
    height:4px!important;
    background:linear-gradient(90deg,var(--sj6-blue) 0 34%,var(--sj6-teal) 34% 61%,var(--sj6-gold) 61% 82%,var(--sj6-red) 82% 100%)!important;
    opacity:1!important;
}

/* -------------------------------------------------------------
   STUDENT INFOGRAPHIC / COUNTER
   Slimmer cards, stronger hierarchy, mobile horizontal scroll.
------------------------------------------------------------- */
body.cms-datagoe .counter-section{
    position:relative!important;
    isolation:isolate;
    overflow:hidden!important;
    padding:42px 0 46px!important;
    color:var(--sj6-ink)!important;
    background:
      radial-gradient(circle at 6% 0%,rgba(20,95,168,.11),transparent 30%),
      radial-gradient(circle at 94% 100%,rgba(213,170,66,.14),transparent 28%),
      linear-gradient(180deg,#f9fcff 0%,#f1f7fc 100%)!important;
    border-top:1px solid #e4edf5;
    border-bottom:1px solid #dce7f1;
}
body.cms-datagoe .counter-section::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    opacity:.30!important;
    pointer-events:none!important;
    background-image:
      linear-gradient(rgba(8,43,82,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(8,43,82,.04) 1px,transparent 1px)!important;
    background-size:34px 34px!important;
}
body.cms-datagoe .counter-section::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:0!important;
    width:180px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:0 0 8px 8px!important;
    background:linear-gradient(90deg,var(--sj6-blue),var(--sj6-teal),var(--sj6-gold),var(--sj6-red))!important;
    box-shadow:0 5px 16px rgba(20,95,168,.18)!important;
    z-index:2!important;
}
body.cms-datagoe .counter-section>.container{
    position:relative;
    z-index:1;
}
body.cms-datagoe .counter-title{
    width:auto!important;
    margin:0 0 24px!important;
    padding:0!important;
    color:var(--sj6-navy)!important;
    font-size:1.12rem!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-align:left!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
}
body.cms-datagoe .counter-title::after{
    display:none!important;
}
body.cms-datagoe .counter-title span{
    display:none!important;
}
body.cms-datagoe .counter-section .row{
    margin-right:-7px!important;
    margin-left:-7px!important;
}
body.cms-datagoe .counter-section .row>[class*="col-"]{
    padding-right:7px!important;
    padding-left:7px!important;
}
body.cms-datagoe .counter-box{
    position:relative!important;
    min-height:112px!important;
    height:100%!important;
    margin-bottom:0!important;
    padding:14px 14px 12px!important;
    overflow:hidden!important;
    text-align:left!important;
    border:1px solid var(--sj6-line)!important;
    border-top:1px solid var(--sj6-line)!important;
    border-left:4px solid var(--sj6-blue)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:var(--sj6-shadow)!important;
    backdrop-filter:none!important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
body.cms-datagoe .counter-section .row>div:nth-child(4n+1) .counter-box{border-left-color:var(--sj6-blue)!important;}
body.cms-datagoe .counter-section .row>div:nth-child(4n+2) .counter-box{border-left-color:var(--sj6-teal)!important;}
body.cms-datagoe .counter-section .row>div:nth-child(4n+3) .counter-box{border-left-color:var(--sj6-gold)!important;}
body.cms-datagoe .counter-section .row>div:nth-child(4n+4) .counter-box{border-left-color:var(--sj6-red)!important;}
body.cms-datagoe .counter-box::before{
    content:""!important;
    position:absolute!important;
    top:-34px!important;
    right:-28px!important;
    width:88px!important;
    height:88px!important;
    border-radius:50%!important;
    background:rgba(20,95,168,.055)!important;
}
body.cms-datagoe .counter-box:hover{
    transform:translateY(-3px)!important;
    border-color:#cdddea!important;
    box-shadow:var(--sj6-shadow-hover)!important;
}
body.cms-datagoe .counter-box .icon{
    float:left!important;
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    margin:1px 11px 0 0!important;
    border:0!important;
    border-radius:11px!important;
    color:var(--sj6-blue)!important;
    background:#edf6ff!important;
    box-shadow:inset 0 0 0 1px rgba(20,95,168,.08)!important;
    font-size:.92rem!important;
}
body.cms-datagoe .counter-section .row>div:nth-child(4n+2) .counter-box .icon{color:var(--sj6-teal)!important;background:#eaf9f7!important;}
body.cms-datagoe .counter-section .row>div:nth-child(4n+3) .counter-box .icon{color:#a77708!important;background:#fff8e5!important;}
body.cms-datagoe .counter-section .row>div:nth-child(4n+4) .counter-box .icon{color:var(--sj6-red)!important;background:#fff0f2!important;}
body.cms-datagoe .counter-box h3{
    margin:0 0 2px!important;
    color:var(--sj6-navy)!important;
    font-size:1.48rem!important;
    font-weight:850!important;
    line-height:1.05!important;
    letter-spacing:-.03em!important;
}
body.cms-datagoe .counter-box p{
    min-height:auto!important;
    margin:0 0 4px!important;
    color:#536b83!important;
    font-size:.73rem!important;
    font-weight:700!important;
    line-height:1.25!important;
}
body.cms-datagoe .counter-box-footer{
    display:inline-flex!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    color:#8090a0!important;
    background:transparent!important;
    font-size:.61rem!important;
    font-weight:600!important;
    line-height:1.2!important;
}
body.cms-datagoe .counter-box-footer:hover{
    color:var(--sj6-blue)!important;
    background:transparent!important;
}

/* -------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------- */
@media(max-width:991.98px){
    body.home-page #content,
    body.cms-datagoe #content{
        padding-top:76px!important;
    }
    body.cms-datagoe .home-main-slider .glide__slide{
        height:clamp(410px,60vw,540px)!important;
        min-height:410px!important;
    }
}

@media(max-width:767.98px){
    body.cms-datagoe .home-main-slider .glide__slide{
        height:410px!important;
        min-height:410px!important;
    }
    body.cms-datagoe .home-main-slider .img-cover{
        object-position:center top!important;
    }
    body.cms-datagoe .counter-section{
        padding:34px 0 38px!important;
    }
    body.cms-datagoe .counter-title{
        margin-bottom:17px!important;
        padding-left:2px!important;
        font-size:1rem!important;
    }
    body.cms-datagoe .counter-section .row{
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:12px!important;
        margin:0!important;
        padding:3px 19px 14px 2px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        white-space:normal!important;
        scroll-snap-type:x mandatory!important;
        scroll-padding-left:2px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    body.cms-datagoe .counter-section .row::-webkit-scrollbar{display:none!important;}
    body.cms-datagoe .counter-section .row>[class*="col-"]{
        flex:0 0 min(78vw,285px)!important;
        width:min(78vw,285px)!important;
        max-width:min(78vw,285px)!important;
        padding:0!important;
        scroll-snap-align:start;
    }
    body.cms-datagoe .counter-box{
        min-height:104px!important;
        padding:13px 13px 11px!important;
    }
}

@media(max-width:575.98px){
    body.cms-datagoe .home-main-slider .glide__slide{
        height:350px!important;
        min-height:350px!important;
    }
    body.cms-datagoe .counter-section .row>[class*="col-"]{
        flex-basis:76vw!important;
        width:76vw!important;
        max-width:280px!important;
    }
    body.cms-datagoe .counter-box h3{font-size:1.34rem!important;}
}

@media(max-width:420px){
    body.cms-datagoe .home-main-slider .glide__slide{
        height:320px!important;
        min-height:320px!important;
    }
}