html {
    scroll-padding: 90px;
}

.navmenu {
    background: #0D00CA;
    background: linear-gradient(90deg, rgba(13, 0, 202, 1) 0%, rgba(123, 184, 19, 1) 38%, rgba(134, 203, 0, 1) 100%);

}

body[data-kanal=sepaktakuler] .navmenu-kanalpage,
[data-kanal="sepaktakuler"] .navmenu-kanalpage {
    flex: none;
}

nav .logo-sepaktakuler {
    width: 55px;
}

.navmenu-item .navmenu-link span {
    color: #fff;
}

.navmenu-item.active .navmenu-link span {
    color: #ffffff;
}

.section-bg {
    margin: 0 -15px;
    padding: 0 15px;
}

.-mx {
    margin: 0 -15px;
}

.mt1 {
    margin-top: 16px;
}

.-mx .sectionHead {
    padding: 0 15px;
}

.sectionHead-description {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--neutral-600);
    margin-top: 12px;
}


.section-bg.--hl {
    position: relative;
    background:
        url("../images/bg-hl-man.png") bottom left no-repeat,
        url("../images/bg-hl-top.png") top left no-repeat,
        url("../images/bg-hl-bottom.png") bottom right no-repeat,
        url("../images/bg-hl-stadium.jpg")top left no-repeat;

    background-size:
        70%,
        100%,
        100%,
        cover;
}

.section-bg.--hl::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.42) 67%, rgba(0, 0, 0, 0) 100%);
}

/* @media screen and (min-width:390px) {
    .section-bg.--hl {
        background:
            url("../images/bg-hl-man.png") bottom left no-repeat,
            url("../images/bg-hl-top.png") top -30px left no-repeat,
            url("../images/bg-hl-bottom.png") bottom right no-repeat,
            url("../images/bg-hl-stadium.jpg")top left no-repeat;

    }
} */

.--hl .hlTitle,
.--hl .hlWrap.-col .hlItem:first-child .hlTitle {
    color: #fff;
}

.--hl .hlChannel {
    color: #f8f8f8;
}

.ensiklopedi-wrap {
    background-color: #F7F7F7;

    padding: 15px 0;
}

.ensiklopedi-card {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 16px;
    overflow-x: auto;
    flex-direction: column;

}

.ensiklopedi-wrap>div.powered-by {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 15px;
    padding: 10px 0 0;
    position: relative;
}

.powered-by::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: " ";
    width: calc(100% - 30px);
    height: 1px;
    background-color: #e7e7e7;
}



.ens-title-bg {
    flex: none;
    width: calc(100% - 30px);
    max-width: 100%;
    margin: 0 auto 15px;
    height: 45px;
    background: url(../images/ensiklopedi-bg-m.jpg) top center no-repeat;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    font-weight: 700;
    font-size: 18px;
    padding: 5px 15px;
    line-height: 30px;
    color: #fff;
    display: flex;
    align-items: end;
    border: 1px solid #010073;
}

.ens-cards {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 16px;
    margin-right: 15px;
    margin-left: 15px;
}

.ens-list h5 {
    color: #2a2a2a;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 5px;
}

.ens-list a {
    color: #0F79C6;
    font-weight: 500;
    position: relative;
    padding-right: 15px;
    text-align: center;
    margin: 5px auto;
    display: block;
    width: fit-content;
}

.ens-list a::after {
    content: " ";
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 0;
    background-image: url(../images/caret-right.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}

.powered-by p {
    color: #888888;
    margin: 0;
}

.powered-img {
    width: 120px;
}



.jadwal-item {
    flex: none;
    width: 185px;
    height: 240px;
    position: relative;
    overflow: hidden;
}


.jadwal-item>div {
    display: flex;
    flex-direction: column;

    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;
    border: 2px solid #0D00CA;
    height: 100%;
}

.--blue.jadwal-item>div {
    border: 2px solid #0D00CA;
}

.--purple.jadwal-item>div {
    border: 2px solid #6F03F3;
}

.--orange.jadwal-item>div {
    border: 2px solid #FF6006;
}


.card-title {
    height: 60px;
    padding: 7px 10px;
    background-color: #0D00CA;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 14px;
}

.--blue .card-title {
    background-color: #0D00CA;
}

.--orange .card-title {
    background-color: #FF6006;
}

.--purple .card-title {
    background-color: #6F03F3;
}




.card-title .poin {
    margin-left: auto;
}



.card-body {
    padding: 15px 10px;
}

.card-body select {
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.card-body .caret {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
}

.caret h5 {
    margin: 0;
}

.caret-img {
    width: 11px;
    height: 7px;
}

.caret-img img {
    width: 100%;

}

.card-times {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.card-body .date {
    text-align: center;
    font-size: 14px;
    padding-right: 10px;
    position: relative;
}

.card-body .date::after {
    content: "|";
    color: #d9d9d9;
    position: absolute;
    top: 0;
    right: -5px;

}

.card-body .time {
    text-align: center;
    font-size: 14px;
    color: #5a5a5a;
    margin: 0;
}



.team-detail {
    margin: 5px 0;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.team-flag {
    width: 24px;
    flex: none;
}

.team-flag img {
    width: 100%;
}

.team-country {
    text-align: left;
    color: #5a5a5a;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.card-body>.teams {
    height: 150px;
    overflow-y: auto;
}

.card-accordion {
    height: 125px;
    overflow-y: auto;
}

.card-accordion .teams {
    display: none;
    overflow-y: auto;
}

.card-accordion .teams.show {
    display: block;
}

.team-score {
    margin-left: auto;
}

.game-wrap,
.shorts-wrap {
    width: 100%;
    display: flex;
    justify-items: start;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
}

.game-wrap a {
    flex: none;
    display: block;
}

.game-wrap a:first-child,
.shorts-wrap .kgplayItem:first-child {
    margin-left: 15px;
}

.game-wrap a:last-child,
.shorts-wrap .kgplayItem:last-child {
    margin-right: 15px;
}

.game-wrap .thumb {
    width: 200px;
}

.shorts-wrap .kgplayItem {
    width: 200px;
    aspect-ratio: 9/16;
    flex: none;
}

.shorts-wrap .kgplayImg {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin: 0;
    aspect-ratio: unset;
}

.section-bg.--latest {
    position: relative;
    background:
        url("../images/bg-latest-man.png") top left no-repeat,
        url("../images/bg-latest-left.png") top left no-repeat;

    background-size:
        70%,
        100% 100%;

    padding-top: 75px;
}

.section-bg.--latest::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 44%, rgba(0, 0, 0, 0.6) 67%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.45) 92%, rgba(0, 0, 0, 0) 100%);
}

.--latest .sectionHead .sectionHead-wrap {
    color: #fff;
}

.sectionHead-wrap.--seemore a {
    display: block;
    position: relative;
}

.--latest .sectionHead-wrap.--seemore a {
    color: #fff;
}


.sectionHead-wrap.--seemore a::after {
    content: " ";
    display: inline-block;
    margin-left: 10px;
    width: 9px;
    height: 16px;
    background-image: url(../images/see-more.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.sectionHead-wrap.--seemore.--white a::after {
    background-image: url(../images/see-more-white.svg);
}

.--latest .listSection.hlWrap .hlItem:first-child .hlTitle,
.--latest .listSection.hlWrap .hlItem .hlTitle {
    color: #fff;
}

.--latest .hlChannel,
.--latest .listSection.hlWrap .hlItem .hlTime {
    color: #f8f8f8;
}

.--latest .listSection.hlWrap .hlItem {
    width: calc(100% /2 - 12px);
}

.--latest .listSection.hlWrap .hlItem a {
    flex-direction: column;

}

.--latest .listSection.hlWrap .hlItem .hlImg {
    width: 100%;
    max-height: 100px;
}


/* Desktop */

.kanalHeader {
    background: #0D00CA;
    background: linear-gradient(90deg, rgba(13, 0, 202, 1) 0%, rgba(123, 184, 19, 1) 38%, rgba(134, 203, 0, 1) 100%);

}

.kanalMenu ul li a {
    color: #fff;
}



.bg-section-d::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.35) 67%, rgba(0, 0, 0, 0.25)100%);
}


.hl-desktop {
    display: flex;
    gap: 32px;
}

.banner-sepaktakuler {
    width: 300px;
    flex: none;
}

.section-sepaktakuler .articleTitle,
.section-sepaktakuler .sectionHead.-sc .sectionHead-wrap {
    color: #fff;
}

.section-sepaktakuler .articlePost-subtitle,
.section-sepaktakuler .articlePost-date,
.section-sepaktakuler .articlePost ul li:not(:last-child):after {
    color: #f8f8f8;
}

.section-sepaktakuler .articleHL-big .articlePost ul li:not(:last-child):after {

    color: var(--neutral-600);
}

/* halaman jadwal klasemen */

.banner-top-sepaktakuler {
    width: 100%;
    height: 130px;
    padding: 0 15px;
    overflow: hidden;
}

.banner-top-sepaktakuler>div {
    width: 100%;
    height: 100%;


    border: 2px solid #0D00CA;
    border-radius: 9px;
    background: url("../images/banner-top.jpg")top left no-repeat;
    background-size: cover;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;

}

.banner-top-sepaktakuler .logo {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.banner-top-sepaktakuler .logo img {
    vertical-align: middle;
    width: 100%;
    height: auto;
}


.banner-top-sepaktakuler .logo-kompascom {
    width: 95px;
    height: auto;
}

.banner-top-sepaktakuler .logo-sepaktakuler2 {
    width: 108px;
}



.banner-top-sepaktakuler .banner-text {
    font-size: 16px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

/* Gamification */

/* .contentArticle.--sepaktakulerGame,
.contentArticle.--sepaktakulerGame .sectionTitle {
    background-color: #fff;
    color: #000000;
} */

.socmedList {
    width: 315px;
    justify-content: flex-start;
    padding: 0px;
}

.socmedButton {
    min-width: 2.25rem;
    flex-basis: 2.25rem;
    filter: invert(0);
}

.theme-light .socmedButton {
    filter: invert(0);
}

.theme-dark .socmedButton {
    filter: invert(1);
}


@media (prefers-color-scheme: dark) {
    .socmedButton {

        filter: invert(1);
    }
}

.icoSocmed {
    background-color: transparent;
}

.icoX {
    background-image: none;
}

.icoSocmed:after {
    filter: none;
}

.icoFacebook:after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M24%2012.073C24%2018.062%2019.606%2023.027%2013.87%2023.928V15.565H16.659L17.19%2012.105H13.87V9.86C13.87%208.913%2014.334%207.991%2015.82%207.991H17.329V5.045C17.329%205.045%2015.959%204.811%2014.65%204.811C11.916%204.811%2010.13%206.468%2010.13%209.467V12.104H7.091V15.564H10.13V23.927C4.395%2023.025%200%2018.061%200%2012.073C0%205.446%205.373%200.072998%2012%200.072998C18.627%200.072998%2024%205.445%2024%2012.073Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

.icoLine:after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_371_3720)%22%3E%3Cpath%20d%3D%22M18.59%200H5.41C2.422%200%200%202.422%200%205.41V18.59C0%2021.578%202.422%2024%205.41%2024H18.59C21.578%2024%2024%2021.578%2024%2018.59V5.41C24%202.422%2021.577%200%2018.59%200ZM18.284%2014.865C16.605%2016.797%2012.852%2019.151%2011.998%2019.511C11.144%2019.871%2011.27%2019.282%2011.305%2019.079C11.326%2018.959%2011.419%2018.394%2011.419%2018.394C11.446%2018.19%2011.474%2017.873%2011.393%2017.671C11.303%2017.448%2010.949%2017.333%2010.688%2017.276C6.843%2016.768%203.996%2014.08%203.996%2010.87C3.996%207.29%207.586%204.376%2011.998%204.376C16.41%204.376%2020%207.289%2020%2010.87C19.999%2012.302%2019.444%2013.593%2018.284%2014.865Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M15.81%2010.0119V10.6009H17.338C17.422%2010.6009%2017.491%2010.6699%2017.491%2010.7539V11.3219C17.491%2011.4059%2017.423%2011.4749%2017.338%2011.4749H15.81V12.0639H17.338C17.422%2012.0639%2017.491%2012.1329%2017.491%2012.2169V12.7849C17.491%2012.8689%2017.423%2012.9369%2017.338%2012.9369H15.09C15.006%2012.9369%2014.937%2012.8689%2014.937%2012.7849V9.29192C14.937%209.20792%2015.005%209.13892%2015.09%209.13892H17.338C17.422%209.13892%2017.491%209.20692%2017.491%209.29192V9.85892C17.491%209.94292%2017.423%2010.0119%2017.338%2010.0119H15.81Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M9.17409%2012.2169V12.7849C9.17409%2012.8689%209.10609%2012.9369%209.02109%2012.9369H6.77309C6.68909%2012.9369%206.62109%2012.8689%206.62109%2012.7849V9.29192C6.62109%209.20792%206.68909%209.13892%206.77309%209.13892H7.34109C7.42509%209.13892%207.49409%209.20692%207.49409%209.29192V12.0639H9.02209C9.10609%2012.0639%209.17409%2012.1329%209.17409%2012.2169Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M10.5283%209.29192V12.7839C10.5283%2012.8679%2010.4603%2012.9359%2010.3753%2012.9359H9.80827C9.72427%2012.9359%209.65527%2012.8679%209.65527%2012.7839V9.29192C9.65527%209.20792%209.72327%209.13892%209.80827%209.13892H10.3753C10.4593%209.13892%2010.5283%209.20792%2010.5283%209.29192Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M14.3913%209.29192V12.7839C14.3913%2012.8679%2014.3233%2012.9359%2014.2383%2012.9359H13.6743C13.6243%2012.9359%2013.5753%2012.9109%2013.5463%2012.8699L11.9463%2010.7099V12.7839C11.9463%2012.8679%2011.8783%2012.9359%2011.7933%2012.9359H11.2253C11.1413%2012.9359%2011.0723%2012.8679%2011.0723%2012.7839V9.29192C11.0723%209.20792%2011.1403%209.13892%2011.2253%209.13892H11.7893C11.8423%209.13892%2011.8883%209.16692%2011.9193%209.20792L13.5173%2011.3659V9.29192C13.5173%209.20792%2013.5853%209.13892%2013.6703%209.13892H14.2383C14.3233%209.13892%2014.3913%209.20792%2014.3913%209.29192Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3720%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.icoTelegram:after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_371_3722)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C5.373%200%200%205.373%200%2012C0%2018.627%205.373%2024%2012%2024C18.627%2024%2024%2018.627%2024%2012C24%205.373%2018.627%200%2012%200ZM17.562%208.161C17.382%2010.058%2016.6%2014.663%2016.203%2016.788C16.035%2017.688%2015.703%2017.989%2015.383%2018.018C14.686%2018.082%2014.157%2017.557%2013.482%2017.115C12.426%2016.423%2011.829%2015.992%2010.804%2015.316C9.619%2014.535%2010.387%2014.106%2011.062%2013.405C11.239%2013.221%2014.309%2010.428%2014.369%2010.175C14.376%2010.143%2014.384%2010.025%2014.313%209.963C14.242%209.901%2014.139%209.922%2014.065%209.939C13.959%209.963%2012.272%2011.078%209.003%2013.284C8.524%2013.613%208.09%2013.773%207.701%2013.765C7.273%2013.756%206.449%2013.523%205.836%2013.323C5.085%2013.079%204.487%2012.949%204.539%2012.535C4.566%2012.319%204.863%2012.098%205.431%2011.872C8.929%2010.348%2011.262%209.343%2012.429%208.857C15.762%207.471%2016.454%207.23%2016.906%207.222C17.472%207.214%2017.608%207.681%2017.562%208.161Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3722%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.icoCopyLink:after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_371_3721)%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M12%200C5.37281%200%200%205.37281%200%2012C0%2018.6272%205.37281%2024%2012%2024C18.6272%2024%2024%2018.6272%2024%2012C24%205.37281%2018.6272%200%2012%200ZM13.6627%2017.1L12.8972%2017.8655C12.4513%2018.3103%2011.9222%2018.663%2011.34%2018.9032C10.7578%2019.1435%2010.134%2019.2667%209.50421%2019.2658C8.8744%2019.2649%208.25093%2019.1399%207.66945%2018.8979C7.08797%2018.6559%206.55986%2018.3018%206.11531%2017.8556C4.24875%2015.9806%204.28719%2012.9338%206.1575%2011.0588L6.89062%2010.3275C7.04939%2010.1687%207.2647%2010.0796%207.48922%2010.0796C7.71373%2010.0796%207.92905%2010.1687%208.08781%2010.3275C8.24656%2010.4863%208.33575%2010.7016%208.33575%2010.9261C8.33575%2011.1506%208.24656%2011.3659%208.08781%2011.5247L7.32187%2012.2902C7.033%2012.5797%206.80428%2012.9235%206.6489%2013.3018C6.49353%2013.6802%206.41456%2014.0855%206.41657%2014.4945C6.41857%2014.9035%206.5015%2015.308%206.66058%2015.6848C6.81966%2016.0616%207.05174%2016.4032%207.34344%2016.6898C8.56219%2017.8833%2010.523%2017.8453%2011.7281%2016.6402L12.4655%2015.9028C12.5439%2015.8232%2012.6372%2015.76%2012.7402%2015.7167C12.8431%2015.6734%2012.9537%2015.6508%2013.0654%2015.6504C13.1771%2015.65%2013.2877%2015.6717%2013.391%2015.7143C13.4943%2015.7568%2013.5881%2015.8194%2013.6671%2015.8984C13.7461%2015.9774%2013.8086%2016.0712%2013.8512%2016.1745C13.8938%2016.2777%2013.9155%2016.3884%2013.915%2016.5001C13.9146%2016.6118%2013.8921%2016.7223%2013.8488%2016.8253C13.8055%2016.9282%2013.7422%2017.0216%2013.6627%2017.1ZM15.007%2010.1803L10.1789%2015.0084C10.0191%2015.1617%209.80559%2015.2462%209.58418%2015.244C9.36276%2015.2417%209.15106%2015.1527%208.99446%2014.9962C8.83786%2014.8396%208.74882%2014.628%208.74644%2014.4065C8.74406%2014.1851%208.82852%2013.9716%208.98172%2013.8117L13.8098%208.98359C13.969%208.82677%2014.1837%208.73923%2014.4071%208.74005C14.6306%208.74088%2014.8446%208.83%2015.0026%208.988C15.1606%209.14599%2015.2497%209.36005%2015.2506%209.58348C15.2514%209.80692%2015.1639%2010.0216%2015.007%2010.1808V10.1803ZM17.8664%2012.8991L17.1%2013.6627C17.0216%2013.7422%2016.9282%2013.8055%2016.8253%2013.8488C16.7223%2013.8921%2016.6118%2013.9146%2016.5001%2013.915C16.3884%2013.9155%2016.2777%2013.8938%2016.1745%2013.8512C16.0712%2013.8086%2015.9774%2013.7461%2015.8984%2013.6671C15.8194%2013.5881%2015.7568%2013.4943%2015.7143%2013.391C15.6717%2013.2877%2015.65%2013.1771%2015.6504%2013.0654C15.6508%2012.9537%2015.6734%2012.8431%2015.7167%2012.7402C15.76%2012.6372%2015.8232%2012.5439%2015.9028%2012.4655L16.6683%2011.7C16.9571%2011.4104%2017.1858%2011.0666%2017.3411%2010.6882C17.4965%2010.3099%2017.5754%209.90455%2017.5734%209.49557C17.5713%209.08658%2017.4883%208.68205%2017.3292%208.30528C17.1701%207.92851%2016.938%207.58696%2016.6462%207.30031C15.4298%206.10688%2013.4672%206.14438%2012.262%207.35L11.5247%208.08734C11.3659%208.24609%2011.1506%208.33528%2010.9261%208.33528C10.7016%208.33528%2010.4863%208.24609%2010.3275%208.08734C10.1687%207.92858%2010.0796%207.71326%2010.0796%207.48875C10.0796%207.26424%2010.1687%207.04892%2010.3275%206.89016L11.0625%206.1575C12.9342%204.28578%2015.9811%204.24875%2017.8594%206.11531C18.3053%206.56011%2018.6591%207.08841%2018.9008%207.67003C19.1424%208.25164%2019.2671%208.87517%2019.2677%209.50499C19.2682%2010.1348%2019.1447%2010.7586%2018.9041%2011.3406C18.6635%2011.9227%2018.3106%2012.4516%2017.8655%2012.8972L17.8664%2012.8991Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_371_3721%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.game-heading {
    margin: 15px 0;
}

.game-main {
    border-radius: 16px;
    overflow: hidden;
}

.slider-team {
    width: 100%;
}

.tns-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tns-nav button {
    flex: none;
    height: 6px;
    width: 6px;
    max-width: 6px;
    border-radius: 50%;
    border: none;
    background-color: #d9d9d9;
    padding: 0;
}

.tns-nav .tns-nav-active {
    background-color: #010073;
}



@media screen and (min-width:768px) {
    .kanalLogo img {
        height: 37px;
    }

    .section-sepaktakuler {
        width: 1100px;
    }


    .bg-section-d {
        position: relative;
        background: url("../images/bg-hl-man-left-d.png") bottom left no-repeat,
            url("../images/bg-hl-top-d.png") top left no-repeat,
            url("../images/bg-hl-man-right-d.png") bottom right no-repeat,
            url("../images/bg-hl-bottom-d.png") bottom right no-repeat,
            url("../images/bg-hl-stadium-d.jpg")top left no-repeat;
        background-size: 23%,
            60%,
            38%,
            60%,
            cover;
    }


    .bg-latest-d {
        position: relative;
        min-height: 100px;
    }

    .bg-latest-d .overlay {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 700px;
        background: #000000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 31%, rgba(0, 0, 0, 0.36) 67%, rgba(0, 0, 0, 0) 100%);
    }

    .bg-absolute {
        position: absolute;
        bottom: 0;
    }

    .bg-absolute img {
        width: 100%;
    }

    .bg-absolute.--left {
        left: 0;
        width: 50%;
    }


    .bg-absolute.--man {
        left: 0;
        width: 25%;
    }

    .bg-absolute.--right {
        right: 0;
        width: 50%;
    }

    .articleItem-box {
        margin-top: 5px;
    }

    .ensiklopedi-wrap {
        padding: 24px;
        overflow-x: hidden;
        border-radius: 20px;
    }

    .ensiklopedi-card {
        flex-direction: row;
        justify-content: center;
        align-items: start;
        gap: 24px;
    }

    .ens-title-bg {
        width: 282px;
        height: 240px;
        background: url(../images/ensiklopedi-bg-d.jpg) top center no-repeat;
        background-size: cover;
        border-radius: 20px;
        padding: 15px;
        font-size: 32px;

        margin: 0;
    }

    .ens-list>* {
        margin: 0;
    }

    .ens-cards {
        gap: 24px;
        margin: 0;
    }

    .ensiklopedi-wrap>div.powered-by {
        padding-top: 24px;
    }

    .jadwal-item {
        width: 217px;
        height: 240px;
    }



    .card-body .date,
    .card-body .time {
        text-align: left;
    }



    .game-wrap,
    .shorts-wrap {

        justify-items: start;
        align-items: center;
        overflow-x: hidden;
    }

    .game-wrap a {

        width: calc(100% /5 - 13px);
    }

    .game-wrap a,
    .game-wrap a:first-child,
    .shorts-wrap .kgplayItem:first-child {
        margin: 0;
    }

    .game-wrap a:last-child,
    .shorts-wrap .kgplayItem:last-child {
        margin: 0;
    }

    .shorts-wrap .kgplayItem {
        width: calc(100% / 5 - 13px);

    }

    .kgplayLink {
        height: 100%;
    }

    .kgplayItem-box:after {
        background: #000000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.20) 30%, rgba(0, 0, 0, 0) 100%);

    }

    .articleList.-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .articleList.-list .articleItem-wrap {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .articleList.-list .articleItem-img~.articleItem-box {
        width: 100%;
    }

    .articleList.-list .articleItem-img {
        width: 100%;
    }



    .footerMain {
        margin-top: 0;
    }

    .banner-top-sepaktakuler {
        padding: 0;
        height: 190px;
    }

    .banner-top-sepaktakuler .logo-kompascom {
        width: 120px;
    }

    .banner-top-sepaktakuler .logo-sepaktakuler2 {
        width: 180px;
    }

    .banner-top-sepaktakuler .banner-text {
        font-size: 24px;
    }

    .banner-top-sepaktakuler>div {
        gap: 26px;
    }

    .game-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0;
    }

    .game-heading h1 {
        font-weight: 700;
        font-size: 36px;
        color: var(--neutral-800);
    }

    .socmedList {
        justify-content: flex-end;
    }

    .game-main {
        margin-bottom: 24px;
    }
}

@media screen and (min-width: 1100px) {
    .section-sepaktakuler {
        width: 100%;
    }




    .bg-absolute.--man {
        width: 24%;
    }

    .bg-absolute.--right {
        width: 35%;
    }

    .bg-latest-d {
        padding-top: 50px;
        position: relative;
        min-height: 500px;
    }
}

@media screen and (min-width: 1500px) {

    .bg-section-d {
        position: relative;
        background: url("../images/bg-hl-man-left-d.png") bottom left no-repeat,
            url("../images/bg-hl-top-d.png") top left no-repeat,
            url("../images/bg-hl-man-right-d.png") bottom right no-repeat,
            url("../images/bg-hl-bottom-d.png") bottom right no-repeat,
            url("../images/bg-hl-stadium-d.jpg")top left no-repeat;
        background-size: 20%,
            64%,
            28%,
            43%,
            cover;
    }

    .bg-latest-d {
        min-height: 550px;
    }

    .bg-absolute.--left {
        width: 40%;
    }

    .bg-absolute.--man {
        width: 20%;
    }

    .bg-absolute.--right {
        width: 30%;
    }
}