.v-mobile{
    display:none;

}
.v-desktop{
    display:block;

}
.ly-gpr{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    gap: 24px;
    isolation: isolate;
    width: 100%;
    height: 240px;
    background: #358AC4;
    border-radius: 8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}
.ly1-gpr{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 32px;
    gap: 16px;
    width: 10%;
    height: 192px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 0;
}
.txt-gpr{
    /* GPR
KOMDIGI */

    width: 92px;
    height: 48px;

    /* Plus Jakarta Sans/Headline/Headline 3

    Title for section
    */
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* or 120% */
    text-align: center;
    letter-spacing: 0.005em;

    /* Color/White */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}
.konten-gpr{
/* Frame 453 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;

width: 80%;
height: 192px;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 1;
z-index: 1;

}
.selengkapnya{
padding: 0px;
gap: 32px;
flex: none;
order: 0;
flex-grow: 0;
display: flex;
width: 100%;
flex-direction: row;
justify-content: flex-end;
}
.text-selengkap{
text-align:right;

}
.width-100{
    width: 100%;

}
.title-hero {
width: 50% !important;

}
.subtitle-hero {
width: 50% !important;

}
.align-start{
align-items: flex-start !important;

}
@media screen and (max-width: 700px) {
.artikel-lain {
    display: inline-block !important;
    max-height: 1200px !important;
    overflow-x: hidden !important;
}
.artikel-lain-card {
    display: block !important;
    height: 200px !important;
}
.artikel-lain-card .judul2 {
    max-height: 50px !important;
    height: auto !important;
}
.d-none {
    display: none !important;
}
.image-berita {
    width: 40% !important;
    margin: 5px !important;
    float: left !important;
}
.card-content2 {
    width: 55% !important;
    float: right !important;
}
}
.artikel-lain{
/* Frame 109 */

/* Auto layout */
overflow-x:auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: flex-start;
padding: 0px;
gap: 18px;

width: 100%;
max-height: 716px;


/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.footer-artikel-lain{
/* Frame 452 */

/* Auto layout */
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 24px;
width:100%;
text-align:right;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.artikel-lainnya-loading{
overflow-x:auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: flex-start;
padding: 0px;
gap: 18px;

width: 100%;
max-height: 716px;


/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

order: 2;
}
.artikel-filter{
/* Frame 452 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 24px;
width:100%;
text-align:right;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.artikel-filter{
/* Frame 452 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 24px;

width: 100%;
height: 53px;
overflow: auto;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.artikel-lain-card{
/* Content Item Tile */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 16px;

width: calc((100%-54px) /4);
height: 348px;

background: #FFFFFF;
border-radius: 8px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.artikel-img{
/* image 21 */

width: 100%;
height: 192px;
border-radius: 10px;

/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 1;
}
.artikel-filter-ly-c{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: 16px;
gap: 8px;
width: auto;
height: 53px;
background: #FFFFFF;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
border-radius: 100px;
flex: none;
order: 0;
flex-grow: 0;
}
.artikel-span{
/* Berita Terbaru */


font-style: normal;
font-weight: var(--s2-weight);
font-size: var(--s2-size);
line-height: var(--s2-height);
/* identical to box height, or 120% */
text-align: center;

/* Text/Primary */
color: #131313;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;

}

/* Untuk layar desktop (min-width: 1024px) */
@media(min-width: 1024px) {

.kemdikbud-carousel-container {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}
.kemdikbud-carousel {
    display: flex;
    position: relative;
    overflow: hidden;
}
.hero-layout-kemdikbud-carousel {
    flex: 0 0 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%); /* Posisi awal */
}
.hero-layout-kemdikbud-carousel.active:hover,
.hero-layout-kemdikbud-carousel:hover {
    transform: scale(1.05); /* Membesarkan elemen 5% saat hover */
    opacity: 1; /* Tetap terlihat sepenuhnya */
    z-index: 2; /* Pastikan elemen aktif berada di atas */
    transition: transform 0.6s ease-in-out; /* Transisi lebih cepat untuk hover */
}
.hero-layout-kemdikbud-carousel.active {
    position: relative;
    opacity: 1;
    transform: scale(1.05); /* Elemen aktif sedikit lebih besar */
    overflow: hidden;
}
.hero-content {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: #0000002E;
    color: white;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animasi untuk perubahan shadow */
}
.hero-content:hover {
    transform: translateX(-50%) translateY(-5px); /* Geser sedikit ke atas untuk efek pop */
}
.kemdikbud-carousel-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.kemdikbud-carousel-pagination .dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.kemdikbud-carousel-pagination .dot.active {
    background-color: white;
    transform: scale(1.2);
    border-radius: 10px;
    width: 23px;
}
.kemdikbud-layout-pilihan{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 2% 15%;
    width: 100%;
    gap: 24px;
    direction: ltr;
}
.layout-start{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width:100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.layout-start2{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap:32px;

    width:100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.kemdikbud-layout-pilihan .title-pilihan{
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
}
.line-middle {
    flex-grow: 1; /* Biarkan garis mengambil ruang kosong */
    height: 1px; /* Tinggi garis */
    background-color: black; /* Warna garis */
    width: 20%;
    margin: auto 5%;
}
.kemdikbud-layout-pilihan .layout-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    justify-content: center;
    z-index:10;
    position: relative;
}
.kemdikbud-layout-pilihan .layout-box .box {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 15vh;
    padding: 10px;
    border-radius: calc(1vw + 2px);;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.kemdikbud-layout-pilihan .layout-box .box-1 {
    background: #FFFFFF;
    border: 2.5px solid #580116;
    color: #580116;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
.kemdikbud-layout-pilihan .layout-box .box-2 {
    background: #FFFFFF;
    border: 2.5px solid #015804;
    color: #015804;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
.kemdikbud-layout-pilihan .layout-box .box-3 {
    background: #FFFFFF;
    border: 2.5px solid #BA5B03;
    color: #BA5B03;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
.kemdikbud-layout-pilihan .layout-box .box-4 {
    background: #FFFFFF;
    border: 2.5px solid  #055A9E;
    color: #055A9E;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
.kemdikbud-layout-pilihan .layout-box .box-1:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    background: #580116;
    color: #FFFFFF;
    transform: scale(1.1); /* Membesarkan elemen 10% */
    transition: transform 0.3s ease, background 0.3s ease; /* Animasi halus */
}
.kemdikbud-layout-pilihan .layout-box .box-2:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    background: #015804;
    color: #FFFFFF;
    transform: scale(1.1);
    transition: transform 0.3s ease, background 0.3s ease;
}
.kemdikbud-layout-pilihan .layout-box .box-3:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    background: #BA5B03;
    color: #FFFFFF;
    transform: scale(1.1);
    transition: transform 0.3s ease, background 0.3s ease;
}
.kemdikbud-layout-pilihan .layout-box .box-4:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    background: #055A9E;
    color: #FFFFFF;
    transform: scale(1.1);
    transition: transform 0.3s ease, background 0.3s ease;
}
.kemdikbud-layout-pilihan .layout-box .dropdown {
    visibility: hidden; /* Default tersembunyi */
    opacity: 0; /* Tidak terlihat */
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    margin-top: 2px;
    border-radius: 8px;
    min-width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* Tambahkan animasi visibility */
}
.kemdikbud-layout-pilihan .layout-box .dropdown div {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    color: black;
}
.kemdikbud-layout-pilihan .layout-box .dropdown div:last-child {
    border-bottom: none;

}
.kemdikbud-layout-pilihan .layout-box .dropdown div:hover {
    background-color: #f5f5f5;

}
.kemdikbud-layout-pilihan .layout-box .dropdown.active {
    visibility: visible; /* Tampilkan elemen */
    opacity: 1; /* Sepenuhnya terlihat */
    transform: translateY(0); /* Kembali ke posisi aslinya */

}

/* Berita Terbaru */
.news-berita{
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    /* Gunakan persentase untuk lebar */
    width: 66%; /* Atur persentase sesuai kebutuhan (misalnya 70% dari kontainer) */
    height: auto; /* Biarkan tinggi menyesuaikan dengan konten */

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.news-berita-100{
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    /* Gunakan persentase untuk lebar */
    width: 100%; /* Atur persentase sesuai kebutuhan (misalnya 70% dari kontainer) */
    height: auto; /* Biarkan tinggi menyesuaikan dengan konten */

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.content-column {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    /* Gunakan persentase untuk lebar */
    height: auto; /* Biarkan tinggi menyesuaikan dengan konten */

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.midle-height{
    border-bottom: 1px solid black;
    height: 1px;
    width: 100%;
    order: 1 !important;

}
.vertical-height{
    border-right: 1px solid black;
    height: 100vh;
    width: 1px;

}
.news-berita .title{
    /* Frame 108 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.title{
    /* Frame 108 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}
.news-berita .title .top-title{
    /* Berita Terbaru */


    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* identical to box height, or 120% */
    text-align: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}
.top-title{
    /* Berita Terbaru */


    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* identical to box height, or 120% */
    text-align: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.news-berita .title .midle-height{
    border-bottom: 1px solid black;
    height: 1px;
    width: 100%;
    order: 2;

}
.news-berita .content{
    /* Frame 109 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.content{
    /* Frame 109 */

    /* Auto layout */
    /* display: flex; */
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.h-700{
    height:700px;
    overflow-x:auto;
}

.news-berita .content .content-item{
    /* Content Item Tile */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.news-berita .content .content-item .data-berita{
    /* Frame 426 */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;



}
.news-berita .content .content-item .data-berita .image-berita{
    /* image 21 */

    width: 180px;
    height: 180px;


    border-radius: 10px;
    background-size: 168% !important;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.news-berita .content .content-item .data-berita .card-content{
    /* Card Content */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    width: 75%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;


}
.news-berita .content .content-item .data-berita .card-content .content-data{
    width: 100%; /* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;



}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417{
    width: 100%; /* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.frame-417{
    width: 100%; /* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218{
    width: 100%; /* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    height: auto;
    width: 100%;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.frame-218{
    width: 100%; /* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    height: auto;
    width: 100%;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .judul{
    width: 90%;
     text-align:justify;/* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    /* or 133% */

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-decoration:none;

}
.judul{
    width: 90%;
     text-align:justify;/* Batasi lebar div */
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    /* or 133% */

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-decoration:none;

}
.judul2{
    /*  text-align:justify; Batasi lebar div => remark agar sesuai dengan figma*/ 
    max-width: 100%; /* Hindari elemen melebihi batas kontainer */
    overflow: hidden; /* Sembunyikan bagian konten yang keluar */
    position: relative; /* Dibutuhkan untuk overflow */
    font-style: normal;
    font-weight: var(--h4-weight);
    font-size: var(--h4-size);
    line-height: var(--h4-height);
    height: 50px;
    /* or 133% */

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-decoration:none;

}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .isi-berita{

    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    width:90%;
    text-align:justify;
    /* or 129% */

    /* Text/Primary */
    color: #131313;

    text-decoration:none;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;




} .isi-berita{

    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    width:90%;
    text-align:justify;
    /* or 129% */

    /* Text/Primary */
    color: #131313;

    text-decoration:none;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;




}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .isi-berita-mobile{

    display:none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */

    /* Text/Primary */
    color: #131313;

    text-decoration:none;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;




}
.isi-berita-mobile{

    display:none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */

    /* Text/Primary */
    color: #131313;

    text-decoration:none;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    display:none;



}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-history{
    display: flex;
    flex-direction: row; /* Elemen dalam satu baris */
    align-items: center; /* Pusatkan elemen secara vertikal */
    width: 100%;
    height: auto;
}
 .berita-history {
    display: flex;
    flex-direction: row; /* Elemen dalam satu baris */
    align-items: center; /* Pusatkan elemen secara vertikal */
    width: 100%;
    height: auto;
    gap:8px;
}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-history .left-berita{
    /* Berita */


    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Color/Primary */
    color: #055A9E;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;

}
.left-berita{
    /* Berita */


    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Color/Primary */
    color: #055A9E;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;

}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-history .middle-berita{
    /* 19 September 2022 */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;


}

.middle-berita{
    /* 19 September 2022 */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;


}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-history .right-berita{
    /* (dilihat 600 kali) */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Secondary */
    color: #6D6E71;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;



}

.right-berita {
    /* (dilihat 600 kali) */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Secondary */
    color: #6D6E71;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;



}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-history .line-height {
    width: 1px; /* Lebar garis vertikal */
    height: 10px; /* Sesuaikan tinggi garis dengan parent */
    background-color: #6D6E71; /* Warna garis */
    margin: 0 8px; /* Jarak horizontal dengan elemen lain */
    align-self: center; /* Pastikan garis berada di tengah */
}
.news-berita .content .content-item .data-berita .card-content .content-data .frame-417 .frame-218 .berita-tag{
    /* Tag */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    gap: 12px;

    width: 90%;
    text-align:justify;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.berita-tag{
    /* Tag */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    gap: 12px;
    justify-content: flex-start;

    width: auto;
    text-align:justify;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.data-tag{
        /* Tag */

        /* Auto layout */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        padding: 0px;
        gap: 12px;

        width: 100%;
        height: auto;


        /* Inside auto layout */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

    }

/* GPR Info*/
.gpr-komdigi-layout{
    /* Frame 380 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 33%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;

}
.gpr-komdigi-layout .title{
    /* Frame 108 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}
.gpr-komdigi-layout .title .top-title{
    /* Berita Terbaru */



    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* identical to box height, or 120% */
    text-align: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.gpr-komdigi-layout .layout-gpr{
    /* Frame 419 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 8px 24px;
    gap: 12px;

    width: 100%;
    height: auto;

    /* Color/Primary */
    background: #055A9E;
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.gpr-komdigi-layout .layout-gpr #gpr-kominfo-widget-header{
    display:none;

}
.button-tag {
    display: inline-flex;
    align-items: center; /* Sejajarkan elemen secara vertikal */
    gap: 2px; /* Jarak antara ikon dan teks */
    border: none; /* Hilangkan border */
    background-color: transparent; /* Transparan agar sederhana */
    font-size: 9px;
    color: #333; /* Warna teks */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center; /* Pastikan teks berada di tengah */
    line-height: 1; /* Pastikan tinggi baris sesuai dengan teks */
}
.button-tag span:hover {
    color: #BA5B03; /* Ubah warna teks saat hover */
    text-decoration:none;

}
.button-tag span{

    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #131313;
    flex: none;
    flex-grow: 0;
    text-decoration:none;
}
.button-tag img {
    width: 16px; /* Ukuran ikon */
    height: 16px;
    object-fit: contain; /* Pastikan gambar tetap menjaga aspek rasio */
    display: inline-block;
    vertical-align: middle; /* Selaraskan gambar secara vertikal */
    margin-top: 2px; /* Sesuaikan posisi gambar */
}
.layout-66{
        /* Frame 55 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 66%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}
.layout-33{
        /* Frame 55 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 33%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}
.layout-66 .title{
    /* Frame 108 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}
.layout-66 .content-data{
    /* Frame 277 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 30px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}
.layout-66 .content-data .siaran-pers-layout{
    /* Item Layout */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers{
    /* Content Item Tile */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;


}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers{
    /* Frame 426 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .img-siaran-pers{
    /* image 21 */

    width: 180px;
    height: 180px;

    border-radius: 10px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content{
    /* Card Content */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;

    width: 60%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;


}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran{
    /* Content */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .judul{
    /* Anugerah Kihajar 2024: Semangat Berkobar (Berkolaborasi dan Berbagi) untuk Indonesia Kuat */



    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    /* or 133% */

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;



}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .tanggal-siaran{
    /* Frame 221 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;



}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .tanggal-siaran .left-siaran{
    /* Siaran Pers */


    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    color: #580116;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;




}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .tanggal-siaran .line-height {
    width: 1px; /* Lebar garis vertikal */
    height: 10px; /* Sesuaikan tinggi garis dengan parent */
    background-color: #6D6E71; /* Warna garis */
    margin: 0 8px; /* Jarak horizontal dengan elemen lain */
    align-self: center; /* Pastikan garis berada di tengah */
}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .tanggal-siaran .middle-berita{
    /* 19 September 2022 */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;


}
.layout-66 .content-data .siaran-pers-layout .data-siaran-pers .card-siaran-pers .card-content .title-siaran .tanggal-siaran .right-berita{
    /* (dilihat 600 kali) */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Secondary */
    color: #6D6E71;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;



}
.title .top-title{
    /* Berita Terbaru */



    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* identical to box height, or 120% */
    text-align: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}
.title .midle-height{
    border-bottom: 1px solid black;
    height: 1px;
    width: 100%;
    order: 2;

}
.layout-33 .title{
    /* Frame 108 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}
.layout-33 .content-data .pengumuman-layout{
    /* Item Layout */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.layout-33 .content-data .pengumuman-layout .filter-pengumuman {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.layout-33 .content-data .pengumuman-layout .filter-pengumuman .tab-action {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  background: #F5F5F5;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
}
.layout-33 .content-data .pengumuman-layout .filter-pengumuman .tab-action.active {
  background: #055A9E;
  color: #FFFFFF;
}
.layout-33 .content-data .pengumuman-layout .filter-pengumuman .tab-action .text-filter {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.layout-33 .content-data .pengumuman-layout .filter-pengumuman .tab-action:hover{
    color:#BA5B03;

}
.layout-33 .content-data .pengumuman-layout .data-pengumuman {
    /* Frame 277 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 30px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 1;

}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman{
    /* Item Layout */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;

}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman{
    /* Content Item Tile */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman{
    /* Content Item Tile */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .judul{
    /* Anugerah Kihajar 2024: Semangat Berkobar (Berkolaborasi dan Berbagi) untuk Indonesia Kuat */



    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    /* or 133% */

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .tanggal-siaran{
    /* Frame 221 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;



}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .tanggal-siaran .left-siaran{
    /* Siaran Pers */


    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    color: #BA5B03;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;




}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .tanggal-siaran .line-height {
    width: 1px; /* Lebar garis vertikal */
    height: 10px; /* Sesuaikan tinggi garis dengan parent */
    background-color: #6D6E71; /* Warna garis */
    margin: 0 8px; /* Jarak horizontal dengan elemen lain */
    align-self: center; /* Pastikan garis berada di tengah */
}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .tanggal-siaran .middle-berita{
    /* 19 September 2022 */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Primary */
    color: #131313;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;


}
.layout-33 .content-data .pengumuman-layout .data-pengumuman .item-pengumuman .content-pengumuman .card-pengumuman .tanggal-siaran .right-berita{
    /* (dilihat 600 kali) */



    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */
    display: flex;
    align-items: center;

    /* Text/Secondary */
    color: #6D6E71;


    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}
.ly-33 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 33%;
    height: auto;
    flex: none;
    order: 0;
    flex-grow: 0;
}
.ly-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.ly-title span{

    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #131313;
    flex: none;
    order: 1;
    flex-grow: 0;
}
.ly-title .ly-middle-line{
    border-bottom: 1px solid black;
    height: 1px;
    width: 100%;
    order: 2;
}
.ly-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;
    width: 100%;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
.ly-content-title {
    width: 90%;
    text-align: justify;
    max-width: 100%;
    overflow: hidden;
    position: relative;

    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #131313;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-decoration: none;
}
.ly-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
.ly-card-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.ly-card-history {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
}
.ly-card-history-left {

    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #055A9E;
    flex: none;
    flex-grow: 0;
}
.ly-card-history-center {

    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #131313;
    flex: none;
    flex-grow: 0;
}
.ly-card-history-right {

    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #6D6E71;
    flex: none;
    flex-grow: 0;
}
.ly-line-height {
    width: 1px;
    height: 10px;
    background-color: #6D6E71;
    margin: 0 8px;
    align-self: center;
    border: 1px solid #6D6E71;
}
/* Layout Regulasi */
.ly-background {
    background-color: rgba(222, 222, 222, 1);
    padding: 40px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)
}
.ly-scroll-x {
    max-height: 368px;
    display: flex;
    overflow-y : auto;
    flex-direction: column;
    gap:24px;
}
.ly-scroll-x::-webkit-scrollbar{
    width:0;

}
.ly-scroll-item{
    /* Gradient Card */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 16px;
    gap: 16px;

    width: 368px;
    height: 208px;

    background: linear-gradient(180deg, var(--highlight-card) 10.5%, var(--highlight-card-gradient) 80%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1), 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}
.ly-scroll-item .judul{
    /* Frame 439 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 336px;
    height: 120px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}
.ly-scroll-item .judul .title{
    /* Peringati Bulan Bahasa Tahun 2024, Badan Bahasa Gelar Sejumlah Rangkaian Kegiatan */

    width: 336px;
    height: 40px;

    /* Plus Jakarta Sans/Headline/Headline 5

    Title for card
    */

    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    /* or 125% */
    letter-spacing: 0.005em;

    /* Color/White */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.ly-scroll-item .judul .keterangan{

    width: 336px;
    height: 64px;

    /* Plus Jakarta Sans/Subtitle/Subtitle 2

    Subtitle for content
    */

    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */
    letter-spacing: 0.0015em;

    /* Color/White */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;
    overflow: hidden;

}
.ly-scroll-item .informasi{
    /* Frame 221 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    width: 336px;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.ly-scroll-item .informasi .regulasi{
    /* Regulasi */

    height: 16px;

    /* Plus Jakarta Sans/Misc/Caption 1 - Bold

    Content type
    */

    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    /* identical to box height, or 133% */
    display: flex;
    align-items: center;
    letter-spacing: 0.0125em;

    /* Color/White */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
/* Akhir Layout Regulasi */


/* Pencarian Berita */
.data-card {
    /* Frame 426 */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.image-berita3{
    /* image 21 */

    width: 100%;
    height: 582px;


    border-radius: 10px;
    background-size: 168% !important;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.image-berita2{
    /* image 21 */

    width: 100%;
    height: 210px;


    border-radius: 10px;
    background-size: 168% !important;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.image-berita{
    /* image 21 */

    width: 180px;
    height: 180px;


    border-radius: 10px;
    background-size: 168% !important;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.no-image-berita{
    /* image 21 */

    width: 180px;
    height: 180px;


    border-radius: 10px;
    background-size: 85% !important;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.ly-content .content{
    /* Frame 109 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 18px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}
.content-item{
    /* Content Item Tile */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;


}
.data-berita{
    /* Frame 426 */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;



}
.data-berita2{
    /* Frame 426 */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;



}
.card-content{
    /* Card Content */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    width: 75%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;


}
.card-content2{
    /* Card Content */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;


}
.content-data2{
    /* Frame 277 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 30px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}
.content-data{
    /* Frame 277 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 30px;

    width: 100%;
    height: 100%;


    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

        .list-group-item.active {
            z-index: 2;
            color: #FFFFFF;
            background-color: #055a9e !important;
            border-color: #055a9e !important;
        }
        .loading {
            display: inline-block;
            width: 100%; /* Sesuaikan dengan kebutuhan */
            height: 40px; /* Sesuaikan dengan tinggi yang diinginkan */
            background: linear-gradient(90deg, #f0f0f0 25%, #dedede 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 10px;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
}

}

/* Untuk layar mobile (max-width: 1024px) */
@media screen and (max-width: 1024px) {
.kemdikbud-carousel-container {
    height: 60vh; /* Sesuaikan tinggi untuk layar kecil */
}

.hero-layout-kemdikbud-carousel {
    flex: 0 0 100%;
    height: 77vh; /* Tinggi lebih kecil untuk layar kecil */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
}

.hero-layout-kemdikbud-carousel.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
}

.hero-content {
    bottom: 15px; /* Lebih kecil jaraknya di layar kecil */
    width: 90%; /* Lebar konten lebih kecil */
    font-size: 0.5rem; /* Ukuran font lebih kecil */
    padding: 15px; /* Padding lebih kecil */
}

.kemdikbud-carousel-pagination {
    bottom: 15px; /* Jarak pagination lebih kecil */
}

.kemdikbud-carousel-pagination .dot {
    width: 10px; /* Ukuran dot lebih kecil */
    height: 10px;
}

.kemdikbud-carousel-pagination .dot.active {
    transform: scale(1.1); /* Efek sedikit lebih kecil */
}

.kemdikbud-layout-pilihan .title-pilihan {
    display:none;

}
.ly-33 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;
    width: 100%;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.ly-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.ly-title span{

    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #131313;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.ly-title .ly-middle-line{
    border-bottom: 1px solid black;
    height: 1px;
    width: 100%;
    order: 2;
}

.ly-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;
    width: 100%;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.ly-content-title {
    width: 100%;
    text-align: justify;
    max-width: 100%;
    overflow: hidden;
    position: relative;

    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #131313;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-decoration: none;
}

.ly-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.ly-card-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.ly-card-history {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
}

.ly-card-history-left {

    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #055A9E;
    flex: none;
    flex-grow: 0;
}
.ly-card-history-center {

    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #131313;
    flex: none;
    flex-grow: 0;
}
.ly-card-history-right {

    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #6D6E71;
    flex: none;
    flex-grow: 0;
}

.ly-line-height {
    width: 1px;
    height: 10px;
    background-color: #6D6E71;
    margin: 0 8px;
    align-self: center;
}



}
@keyframes slideUpFade {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px); /* Muncul dari bawah */
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Ke posisi normal */
}
}


@keyframes slideIn {
0% {
    transform: translateX(100%);
    opacity: 0;
}
50% {
    transform: translateX(10%);
    opacity: 0.5;
}
100% {
    transform: translateX(0);
    opacity: 1;
}
}

@keyframes slideOut {
0% {
    transform: translateX(0);
    opacity: 1;
}
100% {
    transform: translateX(-100%);
    opacity: 0;
}
}