/* ==========================================================================
   - main
   /*========================================================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-glow: rgba(110, 142, 251, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --text-main: #0e0e0e;
    --transition-speed: 0.4s;
    --aside-daftar-isi: 120px;
    --aside-isi-daftar-isi: 242px;
}

:root {
    --bg-color: #e6e9f0;

    --primary-navy: #090037;
    --accent-lime: #a6e601;
    --accent-cyan: #00f2fe;
    --shadow-light: #ffffff;
    --shadow-dark: #b8c1d1;
    --grad-header: linear-gradient(135deg, #090037 0%, #1a1e4d 100%);
    --grad-text: linear-gradient(90deg, #00f2fe, #a6e601);
}

:root {
    --bg-color: #e6e9f0;
    --accent-purple: #6e2cf2;
    --grad-header: linear-gradient(135deg, #090037 0%, #3b0a7d 50%, #1a1e4d 100%);
    --grad-text: linear-gradient(90deg, #00f2fe, #a6e601);
}


body {
    font-family: 'Calibri', sans-serif;
    line-height: 1.6;
    color: var(--text-main);
    background-color: #ffffff;
    overflow-x: hidden;
}


@media (min-width: 768px) {
    #main-navigation {
        position: sticky;
        min-height: 60px;
        top: 0px;
        z-index: 999;
    }
}

@media (max-width: 768px) {
    #main-navigation {
        position: sticky;
        min-height: 64px;
        top: 0px;
        z-index: 999;
    }
}

.container {
    width: 100%;
    max-width: 100%;
    padding: 0 75px;
}





@media (max-width: 768px) {
    .container {
        max-width: var(--container-width);
        padding: 0 15px;
    }
}



main {
    display: flex;
    flex-direction: column;
}





main.container {
    padding-top: 0px;
    padding-bottom: 80px;
    padding-left: 0px;
    padding-right: 0px;

}

@media (min-width: 768px) {
    main.container {
        padding-top: 0px;
        padding-bottom: 80px;
        padding-left: 0px;
        padding-right: 0px;
    }
}


main .article-content {
    padding: 5px 100px 0px 100px;
    padding-left: calc(var(--aside-daftar-isi) + 10px);
    padding-right: calc(var(--aside-daftar-isi) + 10px);
    transition: width 0.4s ease;
}



main .article-content.content-shrunk {
    padding: 0px 100px 0px 100px;
    padding-left: calc(var(--aside-isi-daftar-isi) + 10px);
    padding-right: calc(var(--aside-daftar-isi) + 0px);
}


@media (max-width: 768px) {
    main .article-content {
        padding: 0px 10px 0px 10px;
    }

    main .article-content.content-shrunk {
        padding: 0px 10px 0px 10px;
        padding-left: 10px;
        padding-right: 0px;

    }
}



/* ==========================================================================
   - breadcrumb
   /*========================================================================== */

.breadcrumb-container {
    padding: 0px 10px 0px 10vw;
    margin: 0px 0 0px 0;
    font-family: 'Calibri', sans-serif;
    box-shadow: #000c7487 0px 5px 7px 0px;
    background: linear-gradient(1deg, #f0f0ff, #ffffff);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 5px 0px;
    margin: 0;
    gap: 0;
    align-items: center;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(44, 62, 80, 0.6);
}


.breadcrumb-link {
    text-decoration: none;
    color: #1a237e;
    transition: all 0.3s ease;
    padding: 0px 8px;
    border-radius: 6px;
}


.breadcrumb-link:hover {
    color: #ffffff;
    background: rgb(105 96 241 / 64%);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}


.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    padding: 0 10px;
    color: rgb(15 14 39 / 69%);
    font-weight: 500;
}


.breadcrumb-active {
    color: #2c3e50;
    font-weight: bold;
    padding-left: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}


@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 0px 10px 0px 5vw;
        margin: 0px 0 5px 0;
        box-shadow: #ffffff87 0px 5px 7px 0px;
    }

    .breadcrumb-link {
        padding: 0px 1px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        padding: 0 2px;
    }

    .breadcrumb-item {
        font-size: 0.6rem;
    }
}





/* ==========================================================================
   - 
   /*========================================================================== */


p {
    margin: 5px 25px 5px 25px;
    text-align: justify;
    font-size: 1rem;
}

@media (max-width: 768px) {
    p {
        margin: 5px 5px 5px 5px;
    }
}


a {
    text-decoration: none;
    color: #000071;
    font-weight: 600;
}


a:hover {
    color: #000071;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
    font-weight: 600;
}



.list-design {
    list-style-type: disc;
    margin: 15px 25px 5px 25px;
    padding: 13px 10px 10px 10px;
    border-radius: 15px 10px 10px 15px;
    box-shadow: #25294f 0px 2px 6px 0px;
    background: linear-gradient(271deg, #ffffff, #ffffff, #ddd7ff);
}

.list-design li {
    position: relative;
    padding: 12px 15px 12px 40px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #ffffff, #ffffff, #cdc6ef);
    border-left: 5px solid #3958c1;
    border-radius: 15px;
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
    transition: all 0.3s ease;
    list-style: none;
    box-shadow: #1e2145 0px 2px 6px 0px;
}

.list-design li:hover {
    background: #f8faff;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(110, 142, 251, 0.15);
}

.list-design li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6e8efb;
    font-weight: bold;
    font-size: 1.1em;
}






main ul {
    list-style-type: disc;
    margin: 5px 5px 5px 40px;
    padding: 10px 5px 10px 10px;
}

@media (max-width: 768px) {
    main ul {
        margin: 5px 5px 5px 5px;
    }
}

@media (min-width: 768px) {
    #global-menu {
        position: sticky;
        top: 0;
        min-height: 60px;
        width: 100%;
        z-index: 9999;
    }
}

@media (max-width: 768px) {
    #global-menu {
        position: sticky;
        top: 0;
        min-height: 0px;
        width: 100%;
        z-index: 9999;
    }
}

#global-menu-hp {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
}




/* ==========================================================================
   - menu-dekstop
   /*========================================================================== */



.judulmenu {
    background: linear-gradient(40deg, #cfcfff, #ffffff, #e9e3ff);
    box-shadow: #7e80b5 0px 1px 5px 0px;
    z-index: 1000;
    font-size: 20px;
    color: black;
    height: 60px;
    min-height: 60px;
    width: 100%;
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
    padding: 0px 10px 0px 10px;
    margin: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
    list-style-type: none;
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
    transition: all 0.5s ease;
}

.judulmenu:hover {
    background: linear-gradient(40deg, #ffffff, #d2d2ff, #9696fe, #000095, #0000bf, #0000ca, #0808f5, #7e7cff, #160068);
    box-shadow: #7e80b5 0px 1px 5px 0px;
    font-size: 20px;
    color: black;
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
    display: flex;
    justify-content: center;
    list-style-type: none;
    background-size: 200% 200%;
}

.judulitemlogomenu {
    display: flex;
    width: 15%;
    padding: 0px 10px 0px 10px;
    margin: 0px 10px 0px 10px;

}

.logojudulmenu {
    list-style-type: none;
    display: flex;
    padding: 0px 0px 0px 0px;
    margin: 0px -55px 0px 0px;
    top: 0px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    list-style: none;
    white-space: nowrap;
    border-top: 0px solid #dddeff;
    border-bottom: 0px solid #dddeff;
}

.logojudulmenu img {
    height: 55px;
    width: auto;
    object-fit: contain;

}

.judulitemmenu {
    display: flex;
    width: 100%;
    padding: 0px 10px 0px 10px;
    margin: 0px 10px 0px 10px;
}


.judullistmenu {
    list-style-type: none;
    display: flex;
    padding: 20px 10px 20px 10px;
    margin: 0px 5px 0px 5px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    list-style: none;
    white-space: nowrap;
    border-top: 0px solid #dddeff;
    border-bottom: 0px solid #dddeff;
    color: #0a21a1;
    transition: all 0.5s ease;
}

.judullistmenu a {
    color: #00116d;
    transition: all 0.5s ease;
}

.judulmenu:hover a {
    color: #ffffff;
    transition: all 0.5s ease;
}

.judulmenu:hover .judullistmenu a:hover {
    color: #0a21a1;

}

.judullistmenu:hover a {
    color: #00116d;
    animation: slideataskebawah 0.2s ease-in-out;
}

.judullistmenu:hover {
    font-weight: bold;
    font-size: 20px;
    color: #00116d;
    display: flex;
    place-content: center;
    align-self: center;
    padding: 18px 10px 10px 10px;
    margin: 10px 5px 0px 5px;
    border-radius: 15px 15px 0px 0px;
    box-shadow: #c1bbd7f7 0px 0px 1px 1px;
    background: linear-gradient(180deg, #f9f7ff, #ddddff);
}

.judullistmenu:hover .dropdown-content-menu {
    visibility: visible;
    pointer-events: auto;
    display: flex;
    opacity: 1;
    color: black;
    background: linear-gradient(36deg, #b6b8dd, #f5f4ff, #fafafa, #fafafa, #f7f5ff, #c8cce9);
    background-size: 210%;
    animation: gradient 5s ease infinite;
    animation: slideataskebawah 0.3s ease-in-out;
    transition: all 0.5s ease;
}

.dropdown-content-menu {
    position: fixed;
    top: 61px;
    left: 0px;
    width: 100vw;
    background: white;
    color: black;
    border-radius: 0px 0px 30px 30px;
    border: 1px solid #ddd;
    box-shadow: 0px 10px 20px 0px rgb(23 0 90);
    z-index: 10;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    display: none;
    animation: slideataskebawah 1.0s ease-in-out;
    transition: all 0.5s ease;
}

.judul-content-menu {
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 5px 0px;
    color: #10006b;
    font-size: 30px;
    justify-content: left;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: all 0.5s ease;
}

.isi-content-menu {
    padding: 0px 10px 0px 0px;
    margin: 0px 10px 5px 0px;
    color: #050052;
    font-size: 24px;
    font-weight: normal;
    justify-content: left;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: all 0.5s ease;
}


.isi-content-menu img {
    height: 150px;
    width: auto;
    object-fit: contain;
}


.slogan-content-menu {
    padding: 0px 10px 0px 10px;
    margin: 5px 10px 10px 0px;
    border-left: #1a0fc7 solid 5px;
    color: #09008f;
    font-size: 24px;
    font-weight: normal;
    align-items: flex-start;
}

.dropdown-inner {
    display: flex;
    width: 100%;
    color: black;
    list-style-type: none;
    justify-content: space-between;
}

.left-content-menu-1 {
    flex: 2;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    width: 70vw;
    color: black;
    line-height: 1.5;
    text-align: justify;
    white-space: normal;
    word-wrap: break-word;
    flex-wrap: wrap;
    border-right: 1px solid #ddd;
}

.judullistmenu:hover .left-content-menu-1 {
    opacity: 1;
    animation: slidekirikekanan 0.5s ease-in-out;
}

.left-content-menu-2 {
    flex: 1.5;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    width: 70vw;
    color: black;
    line-height: 1.5;
    text-align: justify;
    white-space: normal;
    word-wrap: break-word;
    flex-wrap: wrap;
    border-right: 1px solid #ddd;
}

.judullistmenu:hover .left-content-menu-2 {
    opacity: 1;
    animation: slidekirikekanan 0.5s ease-in-out;
}

.left-content-menu-3 {
    flex: 1;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    width: 70vw;
    color: black;
    line-height: 1.5;
    text-align: justify;
    white-space: normal;
    word-wrap: break-word;
    flex-wrap: wrap;
    border-right: 1px solid #ddd;
}

.judullistmenu:hover .left-content-menu-3 {
    opacity: 1;
    animation: slidekirikekanan 0.5s ease-in-out;
}

.right-content-menu-1 {
    flex: 1;
    color: black;
    white-space: normal;
    line-height: 1.5;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}

.judullistmenu:hover .right-content-menu-1 {
    opacity: 1;
    animation: slidekanankekiri 0.5s ease-in-out;
}

.right-content-menu-2 {
    flex: 1;
    color: black;
    white-space: normal;
    line-height: 1.5;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}

.judullistmenu:hover .right-content-menu-2 {
    opacity: 1;
    animation: slidekanankekiri 0.5s ease-in-out;
}

.right-content-menu-3 {
    flex: 1;
    color: black;
    white-space: normal;
    line-height: 1.5;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}

.judullistmenu:hover .right-content-menu-3 {
    opacity: 1;
    animation: slidekanankekiri 0.5s ease-in-out;
}


.dropdown-content-menu ul {
    list-style-type: none;
    color: black;
    display: block;
}

@media (max-width: 768px) {
    .judulmenu {
        display: none;
    }
}






/* ==========================================================================
   - Menu HP Mobile
/*========================================================================== */

.menuhp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    justify-content: space-between;
    align-items: center;
    background-color: #ffe4e4;
}



@media (max-width: 768px) {

    .menuhp {
        display: flex;
        background-color: #fafaff;
        box-shadow: #000c7487 0px 5px 7px 0px;
        width: 100vw;
        height: 64px;
        min-height: 64px;
        z-index: 9999;

    }

    .menuhp li {
        position: initial;
    }

    .menuhp a {
        display: block;
        padding: 1rem;
        color: #00012e;
        text-decoration: none;
        font-size: 1.2rem;
    }

    #btn-menu-utama {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        border: none;
        outline: none;
        font-family: inherit;

    }

    .khususmenuhp {
        font: normal bold 5vw Arial, sans-serif;
        color: #ffffff;
        margin: 0 30px 0 0;
        padding: 5px 25px 5px 20px;
        width: auto;
        border-radius: 50px;
        background: linear-gradient(42deg, #c3c2e9, #525bc7);
        cursor: pointer;
    }

    .khususmenuhp.active {
        font: normal bold 28px Arial, sans-serif;
        color: #ffffff;
        margin: -22px 0 0 0;
        padding: 10px 0 6px 0;
        text-align: center;
        width: 100%;
        position: fixed;
        border-radius: 0;
        background: linear-gradient(0deg, #120eb5, #1000d0, #392eb1);
    }

    .submenuhp {
        position: fixed;
        left: 0;
        top: 0px;
        right: 0;
        bottom: 0;
        list-style: none;
        margin: 0;
        padding: 0 0 80px 0;
        background: linear-gradient(180deg, #dbdbff, #ffffff);
        display: none;

        z-index: 9998;
        overflow-y: auto;
    }

    @keyframes slideDownMenu {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUpMenu {
        0% {
            opacity: 1;
            transform: translateY(0);
        }

        100% {
            opacity: 0;
            transform: translateY(-20px);
        }
    }

    .submenuhp.show {
        display: block;
        animation: slideDownMenu 0.4s ease-out forwards;
    }

    .submenuhp.closing {
        display: block;
        animation: slideUpMenu 0.4s ease-in forwards;
    }


    .submenuhp li {
        padding: 10px 0;
        border-bottom: 1px solid #fff;
    }

    .submenuhp li:last-child {
        border-bottom: none;
    }

    .submenuhp li img {
        height: auto;
        width: 50%;
        object-fit: contain;
    }

    .submenuhp a {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }

    .inner-submenuhp {
        display: none;
        list-style: none;
        background: rgba(255, 255, 255, 0.5);
        padding-left: 20px;
        margin-top: 10px;
        border-left: 3px solid #525bc7;
    }

    .inner-submenuhp li {
        border-bottom: 1px dotted #ccc !important;
    }

    .inner-submenuhp.show {
        display: block;
        animation: slideDownMenu 0.3s ease-in-out;
    }

    .has-inner-submenu>a {
        font-weight: bold;
        color: #120eb5 !important;
    }

    .submenuhp li img.sub-logo {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain;
        margin-right: 12px;
    }

    .inner-submenuhp a {
        display: flex !important;
        align-items: center;
    }

    #btn-tutup-menu-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(0deg, #d32f2f, #f44336);
        color: #ffffff !important;
        text-align: center;
        padding: 18px 0;
        font-size: 1.1rem;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
        z-index: 10001;
        display: none;

    }

    @keyframes popUpBtn {
        0% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(0);
        }
    }

    #btn-tutup-menu-fixed.show-btn {
        display: block;
        animation: popUpBtn 0.4s ease-out forwards;
    }
}




/* ==========================================================================
   - header
   /*========================================================================== */

.article-header h1 {
    font-size: 1.5em;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10vw;
    box-shadow: #000c7487 0px 5px 7px 0px;
    background: linear-gradient(1deg, #f0f0ff, #ffffff);
    color: #0b0048;
    text-align: left;
    width: 100vw;
    max-width: 100vw;
    z-index: 3;
}

.cover-flatform {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 20px 25px 5px 45px;
    width: 100%;
    align-items: flex-start;
}

.cover-flatform li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10%;
}

.cover-flatform .logo-title {
    color: white;
    text-align: center;
}


.cover-layanan {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 10px 25px 5px 45px;
    width: 100%;
    align-items: flex-start;
}

.cover-layanan li {
    background: #ededff;
    color: #050043;
    font-weight: 500;
    padding: 2px 18px;
    border-radius: 20px;
    box-shadow: #000c74ed 0px 0px 5px 0px;
}

.cover-flatform .sub-logo {
    width: auto;
    height: 40px;
}

.cover-article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background:
        linear-gradient(rgba(0, 22, 83, 0.6), rgba(0, 0, 245, 0.4)),
        url('/assets/img/background-1.webp');
    background-size: cover;
    background-position: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    will-change: transform;
}

.cover-article {
    background: linear-gradient(232deg, #ffffff2e, #0000596b, #0008ffb5, #12005566, #cfcfff38);

    margin: 0px 0px 0px 0px;
    padding: 0px;
    min-height: 600px;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
}

.cover-summary h1 {
    font-size: 2.75em;
    margin: 5px 25px 25px 0px;
    padding: 0px 10px 0px 45px;
    box-shadow: #000c74ed 0px 10px 10px 0px;
    background: radial-gradient(circle at top right, #0000ffa6, #00165303, #1f008994, #001755ba);
    color: #ffffff;
    text-align: left;
    line-height: 55px;
    width: 100%;
    max-width: 100%;
    z-index: 3;
    border-radius: 0px 30px 30px 0px;
}



.cover-headline {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
    line-height: 35px;
    color: #ece9ff;
    margin: 5px 25px 5px 45px;
}

.cover-sub-headline {
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 55px;
    color: #d5cffd;
    text-align: center;
    margin: 0px 0px 0px 0px;
    padding: 20px 150px 20px 150px;
    position: relative;
    background: #0909332e;
    box-shadow: #000d7b00 0px 10px 10px 0px, #00043378 0px -21px 20px 0px;
    height: auto;
    width: 100%;
    display: block;
    align-content: center;
    overflow: hidden;

}

.macque-cover-sub-headline {
    display: flex;
    width: max-content;
    animation: continuousLoop 7s linear infinite;
}

.text-cover-sub-headline {
    padding-right: 250px;
}

@keyframes geserTerus {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100vw);
    }
}

@keyframes continuousLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.cover-summary {
    width: 100%;
    min-height: 475px;
    max-height: 500px;
    height: 480px;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.cover-summary-kiri {
    width: 60%;
    height: 350px;
    padding: 10px 10px 10px 0px;
    align-items: flex-start;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
}


.cover-summary-kiri img {
    height: Auto;
    object-fit: cover;
    display: block;
}

.cover-summary-kanan {
    width: 40%;
    height: auto;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.cover-summary-kanan a {
    display: flex;
    justify-content: center;
}

.cover-summary-kanan img {
    width: 75%;
    height: auto;
}


@media (max-width: 768px) {


    .cover-article {
        background: radial-gradient(circle at top right, #000073, #002793, #7349ff, #000e33);
        box-shadow: #000259 0px 3px 5px 0px;
        min-height: auto;
        justify-content: space-between;
        background-size: 150% 150%;
        animation: gradient 10s ease infinite;
        transition: all 1s ease;
    }

    .cover-article::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0px;
        background: linear-gradient(rgba(0, 22, 83, 0.6), rgba(0, 0, 245, 0.4));
        background-size: cover;
        background-position: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        will-change: transform;
    }

    .cover-flatform {
        justify-content: center;
        margin: 5px 25px 20px 0px;
    }

    .cover-flatform .logo-title {
        display: none;
    }


    .cover-summary {
        font-size: 18px;
        display: flex;
        flex-wrap: wrap;
        margin: 0px 0px;
        height: auto;
        min-height: 225px;
        max-height: 400px;
        align-content: space-between;
    }

    .cover-summary h1 {
        box-shadow: #000c7487 0px 5px 7px 0px;
        background: linear-gradient(1deg, #f0f0ff, #ffffff);
        color: #0b0048;
        text-align: left;
        margin: 0px 25px 25px 0px;
        width: 100vw;
        z-index: 3;
        border-radius: 0px 0px 0px 0px;
    }

    .cover-headline {
        font-size: 1.0rem;
        font-weight: 400;
        text-align: center;
        line-height: 30px;
        color: #ece9ff;
        padding: 10px 10px 10px 10px;
        margin: 5px 5px 5px 5px;
    }

    .cover-sub-headline {
        font-size: 1.5rem;
        line-height: 30px;
        padding: 10px 30px 10px 30px;
        background: #09093370;
        box-shadow: #000d7b00 0px 10px 10px 0px, #00043378 0px -5px 10px 0px;
    }

    .cover-summary-kanan {
        color: #000054;
        padding: 5px 10px 10px 10px;
        text-align: center;
        width: 90vw;
        height: auto;
        font-weight: bold;
        font-size: 5vw;
        line-height: 7vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        display: none;
    }

    .cover-summary-kanan img {
        display: none;
    }


    .cover-summary-kanan p {
        margin: 0px 0px 0px 5px;
        padding: 5px 10px 10px 10px;
    }

    .cover-summary-kiri {
        color: #000054;
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
    }

    .cover-summary-kiri img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .cover-layanan {
        justify-content: center;
        margin: 10px 15px 5px 15px;
        width: 95vw;
    }

    .article-header {
        position: relative;
        top: 0px;
        z-index: 2;
    }

    .article-header h1 {
        font-size: 17px;
        padding: 10px 5px 5px 5vw;
        line-height: 20px;
        max-width: 100%;
    }
}



.page-banner {
    position: sticky;
    top: 0px;
    z-index: 999;
}

.page-banner h1 {
    font-size: 1.5em;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10vw;
    box-shadow: #000c7487 0px 5px 7px 0px;
    background: linear-gradient(1deg, #f0f0ff, #ffffff);
    z-index: 1;
    color: #0b0048;
    text-align: left;
    right: 0vw;
    left: calc(0vw) !important;
    width: 100vw;
    max-width: 100vw;
    z-index: 3;
}


@media (max-width: 768px) {
    .page-banner h1 {
        font-size: 1.20em;
        margin: 0px 0px 0px 0px;
        padding: 10px 5px 5px 5vw;
        line-height: 25px;
        box-shadow: #000c74 0px 5px 7px 0px;
    }
}

.toc-container {
    position: sticky;
    top: 60px;
    z-index: 4;
}


h1 {
    width: 100%;

}

h2 {
    font: bold 2.3vw Helvetica;
    text-align: left !important;
    color: #ffffff;
    margin: 25px -10px 25px 2px;
    padding: 12px 30px 12px 10px;
    width: auto;
    border-radius: 0px 0px 0px;
    box-shadow: #3c4062d9 0px 5px 5px 0px;
    background: linear-gradient(90deg, #0a003c, #180091, #2900ff, #8373ff, #2a00ff, #160087, #09003a);
    background-size: 210%;
    animation: gradient 5s ease infinite;
}

@media (max-width: 768px) {
    h2 {
        font: bold 4.5vw Helvetica;
        margin: 15px 0px 15px 0px;
        padding: 10px 10px 10px 10px;
    }
}

h3 {
    font: bold 2.3vw Helvetica;
    text-align: left !important;
    color: #ffffff;
    margin: 25px 0px 25px 5px;
    padding: 8px 30px 8px 30px;
    width: auto;
    box-shadow: #515681d9 0px 3px 5px 0px;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(67deg, #1d018e, #2400e9, #4c2eff, #8d7dff, #4625fa, #2200e0, #1900a7);
    background-size: 210%;
    animation: gradient 5s ease infinite;
}

@media (max-width: 768px) {
    h3 {
        font: bold 5.0vw Helvetica;
        margin: 10px 0px 10px 0px;
        padding: 8px 10px 8px 10px;
    }
}

h4 {
    font: normal bold 26px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    text-align: left !important;
    color: #ffffff;
    margin: 25px 0px 25px 5px;
    padding: 10px 30px 10px 20px;
    width: auto;
    border-radius: 50px 50px 50px 50px;
    box-shadow: #868cc7d9 0px 5px 4px 0px;
    background: linear-gradient(67deg, #3200ff, #5d40ff, #7760ff, #9687ff, #5d40fd, #2a04ff);
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
}


@media (max-width: 768px) {
    h4 {
        font: normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
        border-radius: 25px 25px 25px 25px;
        margin: 20px 0px 10px 5px;
    }
}


p {
    font-size: 1.1rem;
    color: #18152b;
    margin-bottom: 15px;
}


.Other {
    color: #ffffff;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    margin: 5px 0px 12px 12px;
    padding: 12px 12px 12px 12px;
    background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);
    border-radius: 6px;
    align-items: center;
    text-align: center;
}




/* ==========================================================================
   - footer
   /*========================================================================== */




.navfooter {
    place-items: center;
    padding: 20px 30px 5px 30px;
    background: linear-gradient(45deg, #16003c, #29006e, #2d0078, #6246cf, #2e007c, #270066, #00003e);
    z-index: 2;
    border-radius: 3vw 3vw 0px 0px;
}




.navfooter img {
    height: auto !important;
}

.footermedsos {
    display: flex !important;
    gap: 5px;
}

.judulfooter {
    color: white;
}

.navfooter ul {
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 32px;
}

.navfooter ul li {
    display: block;
    list-style: none;
    margin: 10px 10px 0px 10px;
    padding: 10px 15px 5px 15px;
    border-radius: 0px 0px 0px 0px;
    background: #ffffff00;
    font-weight: bold;
    font-size: 32px;
    font-family: calibri;
    max-width: 95vw;
}

.navfooter ul li:hover {
    border-radius: 20px 20px 20px 20px;
    background: #0000003d;
}

.navfooter ul li a {
    color: white;
    font-family: calibri;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}

.navfooter ul li ul {
    width: auto;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px 0px 0px;
    border-radius: 0px 0px 20px 20px;
    background: #ffffff00;
    list-style: none;
}

.navfooter ul li ul li {
    width: auto;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style: none;
    background: #ffffff00;
    font-size: 22px;
    font-weight: normal;
    line-height: 38px;
}

.navfooter ul li ul li:hover {
    width: auto;
    border-radius: 5px 5px 5px 5px;
    list-style: none;
    background: #5b51b17d;
    font-size: 22px;
    line-height: 38px;
}

.navfooter ul li ul li a {
    list-style: none;
    color: white;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.copyright {
    margin: 2px 2px 2px 2px;
    padding: 15px 20px 15px 20px;
    background: #00024742;
    border-radius: 20px 20px 20px 20px;
    place-content: center;
    text-align-last: center;
    font-weight: bold;
    font-size: 1.5vw;
    color: #ffffff;
    width: 90vw;
    place-self: center;
}

.list-layanan-footer::before {
    content: "\e900";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-email-footer::before {
    content: "\ea8b";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-whatsapp-footer::before {
    content: "\ea93";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-telephone-footer::before {
    content: "\e942";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-instagram-footer::before {
    content: "\ea92";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-facebook-footer::before {
    content: "\ea90";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-facebook-page-footer::before {
    content: "\ea91";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-twitter-footer::before {
    content: "\ea96";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-youtube-footer::before {
    content: "\ea9d";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

.icon-medsos-linkedin-footer::before {
    content: "\eaca";
    font-family: "icomoon";
    font-weight: 900;
    color: #ffffff;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}


@media (max-width: 768px) {

    .navfooter {
        padding: 20px 10px 5px 10px;
        max-height: 800px;
        height: auto;
        min-height: 700px;
    }

    .footermedsos {
        display: flex !important;
        gap: 5px;
    }

    .navfooter ul {
        display: block;
    }

    .navfooter ul li {
        margin: 10px 5px 0px 5px;
        padding: 10px 5px 5px 5px;
        font-size: 26px;
        overflow: auto;
    }

    .navfooter ul li a {
        color: white;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 10px;
    }

    .navfooter ul li ul {
        padding: 5px 5px 5px 10px;
        margin: 5px 0px 0px 0px;

    }

    .navfooter ul li ul li {
        font-size: 18px;
        line-height: 24px;
    }

    .copyright {
        font-size: 0.80em;
    }


    .icon-email-footer::before {
        content: "\ea8b";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-whatsapp-footer::before {
        content: "\ea93";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-telephone-footer::before {
        content: "\e942";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-instagram-footer::before {
        content: "\ea92";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-facebook-footer::before {
        content: "\ea90";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-facebook-page-footer::before {
        content: "\ea91";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-twitter-footer::before {
        content: "\ea96";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-youtube-footer::before {
        content: "\ea9d";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }

    .icon-medsos-linkedin-footer::before {
        content: "\eaca";
        font-family: "icomoon";
        font-weight: 900;
        color: #ffffff;
        margin-right: 12px;
        font-weight: bold;
        font-size: 0.9em;
        min-width: 20px;
        text-align: center;
    }


}



/* ==========================================================================
   - Tag Quote
   /*========================================================================== */





.Tagquot1 {
    position: relative;
    background: linear-gradient(15deg, #dbd4ff, #ffffff, #d9d8ff, #ffffff, #b0a7ff);
    border: 5px solid rgb(255 255 255);
    padding: 15px 25px;
    margin: 20px 15px;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 10px 10px 30px rgb(12 7 45 / 55%);
    font-family: 'Calibri', sans-serif;
    color: #090023;
    line-height: 1.8;
    font-style: italic;
    font-size: 22px;
    text-align: center;
    overflow: hidden;
}

.Tagquot1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.05) 0%, transparent 70%);
    z-index: -1;
}

.Tagquot1::after {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 8rem;
    color: rgba(79, 172, 254, 0.1);
    font-family: serif;
    z-index: 0;
}


.pembuat-kutipan {
    display: block;
    margin-top: 20px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85em;
    color: #4facfe;
    text-align: right;
}


.Tagquot1:hover {
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}










/* ==========================================================================
   - Service list
   /*========================================================================== */



.services-wrapper {
    margin: 0px 30px 0px 30px;
}


@media (max-width: 768px) {
    .services-wrapper {
        margin: 0px 10px 0px 10px;
    }
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-item {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 3px solid #00f2ff;
    transition: transform 0.3s ease;
}

.service-item:hover {
    transform: translateX(25px);
}

.service-title {
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: #010029;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-desc {
    text-align: justify;
    margin: 0;
    color: #281a5d;
    line-height: 1.6;
}

.service-link {
    font-weight: bold;
    text-decoration: none;
    color: #5400d5;
    border-bottom: 1px solid rgba(0, 242, 255, 0.1);
    transition: all 0.3s ease;
}

.service-link:hover {
    color: #ffffff;
    border-bottom: 1px solid #5400d5;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
}


/* ==========================================================================
   - Design List Header .item-container2
   /*========================================================================== */


.item-container2 {
    max-width: 100%;
    margin: 15px;
    font-family: calibri;
    padding: 15px;
    overflow-x: hidden;
    display: block;
}

.item-container2 .item2:hover {
    font-weight: normal !important;
    font-size: 20px;
}


.item2 {
    padding-left: 20px;
    margin-bottom: 12px;
    list-style-type: none;
}

.judul2 {
    font-size: 20px;
    line-height: 1.5;
    padding: 5px 10px 5px 15px;
    color: #110092;
    font-weight: 600;
    cursor: pointer;
    border-radius: 45px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: #2d368787 7px 1px 5px 0px;
    background: linear-gradient(45deg, #ffffff, #ffffff, #dcff95, #e2ff45, #a6e601);
    background-size: 195% 100%;
    animation: gradient 5s ease infinite;
}

.item2 h5,
.item2 h4,
.item2 h3 {
    font-size: 20px;
    line-height: 1.0;
    padding: 5px 10px 5px 15px;
    margin: 5px 0px 5px 0px;
    color: #110092;
    font-weight: 600;
    cursor: pointer;
    border-radius: 45px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: none;
    background: none;
    animation: none;
}

.item2 h5.judul2,
.item2 h4.judul2,
.item2 h3.judul2 {
    box-shadow: #2d368787 2px 4px 5px 0px;
    background: linear-gradient(45deg, #ffffff, #ffffff, #dcff95, #e2ff45, #a6e601);
    padding: 10px 0px 10px 10px;
}

.judul2:hover {
    background: linear-gradient(45deg, #98d300, #a6e700, #ffffff, #c3e700, #92cb00);

}

.judul2::before {
    content: "\e900";
    font-family: "icomoon";
    font-weight: 900;
    font-size: 1.3em;
    color: #3f00e1;
    margin-right: 12px;
    font-weight: bold;
    font-size: 1.3em;
    min-width: 20px;
    text-align: center;
}

.jawaban2 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1.0s ease, opacity 1.0s ease, padding 1.0s ease;
    padding: 0px 20px;
    background: #ffffff00;
    line-height: 1.6;

}

.nested-jawaban2 {
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 30px;
    color: #00024b;
    font-size: 19px;
}

.nested-jawaban2 a {
    color: #004285;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 0px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: #5363ff 0px 0px 0px 0px;
    background: linear-gradient(90deg, #e5e0ffbd, #eae6ffd6);
}

.nested-jawaban2 a:hover {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 0px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: #5363ff 0px 0px 0px 0px;
    background: linear-gradient(38deg, #12006e, #2900ffbd, #11006e);
}

.item2.active h5.judul2,
.item2.active h4.judul2,
.item2.active h3.judul2 {
    box-shadow: #2d368787 0px 5px 0px 0px, #a99fff 1px 0px 10px 0px;
    background: linear-gradient(45deg, #a6e601, #c8ff3a, #f9fdad, #f6ffc5, #faffed);

}

.active .judul2 {
    box-shadow: #2d368787 4px 3px 5px 0px;
    background: linear-gradient(45deg, #a6e601, #c8ff3a, #ffffff, #e2ff45, #a6e601);
}

.active .judul2::before {
    content: "\e900";
    font-family: "icomoon";
    color: #2b0099;
}

.active .jawaban2 {
    max-height: 1500px;
    opacity: 1;
    padding: 10px 20px;
    text-align: justify;
}

.item2 ul {
    list-style-type: disc;
    margin: 15px 25px 5px 25px;
    padding: 13px 10px 10px 10px;
    border-radius: 15px 10px 10px 15px;
    box-shadow: #25294f 0px 2px 6px 0px;
    background: linear-gradient(271deg, #ffffff, #ffffff, #ddd7ff);
}

.item2 ul li {
    position: relative;
    padding: 12px 15px 12px 40px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #ffffff, #ffffff, #cdc6ef);
    border-left: 5px solid #3958c1;
    border-radius: 15px;
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
    transition: all 0.3s ease;
    list-style: none;
    box-shadow: #1e2145 0px 2px 6px 0px;
}

.item2 ul li:hover {
    background: #f8faff;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(110, 142, 251, 0.15);
}

.item2 ul li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6e8efb;
    font-weight: bold;
    font-size: 1.1em;
}


@media (max-width: 768px) {
    .item-container2 {
        max-width: 100%;
        margin: 5px 1px 5px 1px;
        font-family: calibri;
        padding: 5px 1px 5px 1px;
        overflow-x: hidden;
        display: block;

    }

    .item2 {
        padding: 0px 1px 0px 1px;
        margin: 5px 1px 5px 1px;
        list-style-type: none;
    }

    .judul2 {
        font-size: clamp(14px, 4vw, 18px);
        line-height: 6vw;
        text-align: left;
        padding: 5px 20px 5px 15px;
        color: #110092;
        font-weight: 600;
        cursor: pointer;
        border-radius: 45px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        box-shadow: #2d368787 0px 5px 5px 0px;
        background: linear-gradient(45deg, #a6e601, #c8ff3a, #ffffff, #e2ff45, #a6e601);
    }

    .judul2 h3 {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;
    }

    .judul2 h4 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;
    }


    .judul2 h5 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;

    }

    .judul2:hover {
        background: linear-gradient(45deg, #98d300, #a6e700, #ffffff, #c3e700, #92cb00);
        background-size: 195% 100%;
    }

    .judul2::before {
        content: "\e900";
        font-family: "icomoon";
        font-weight: 900;
        font-size: 1.3em;
        color: #3f00e1;
        margin-right: 12px;
        font-weight: bold;
        font-size: 1.3em;
        min-width: 20px;
        text-align: center;
    }

    .jawaban2 {
        padding: 5px 1px 5px 1px;
        text-align: justify;
        display: none;
        background: #ffffff00;
        line-height: 1.5;
    }

    .nested-jawaban2 {
        margin: 0px 5px 0px 5px;
        padding: 0px 5px 0px 30px;
        color: #00024b;
        font-size: 1em;
        font-weight: normal;
    }

    .nested-jawaban2 a {
        color: #004285;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        margin: 0px 0px 0px 0px;
        padding: 5px 10px 5px 10px;
        border-radius: 10px 10px 10px 10px;
        box-shadow: #5363ff 0px 0px 0px 0px;
        background: linear-gradient(90deg, #e5e0ffbd, #eae6ffd6);
    }

    .nested-jawaban2 .Designtable4 {
        display: block;
        margin: 5px 0px 5px 0px;
        padding: 5px 1px 5px 1px;
    }

    .active .judul2::before {
        content: "\e900";
        font-family: "icomoon";
        color: #2b0099;
    }

    .active .jawaban2 {
        display: block;
    }
}






/* ==========================================================================
   - Design List Header .item-container3
   /*========================================================================== */

.item-container3 {
    max-width: 100%;
    margin: 15px;
    font-family: Arial, sans-serif;
    padding: 15px;
    overflow-x: hidden;
    display: block;
}

.item-container3.item3:hover {
    font-weight: normal !important;
    font-size: 20px;
}


.item3 {
    padding-left: 20px;
    margin-bottom: 12px;
    list-style-type: none;
}

.judul3 {
    font-size: 20px;
    line-height: 1.5;
    padding: 5px 10px 5px 15px;
    color: #110092;
    font-weight: 600;
    cursor: pointer;
    border-radius: 45px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: #2d368787 7px 1px 5px 0px;
    background: linear-gradient(45deg, #ffffff, #ffffff, #dcff95, #e2ff45, #a6e601);
    background-size: 195% 100%;
    animation: gradient 5s ease infinite;
}

.item3 h5,
.item3 h4,
.item3 h3 {
    font-size: 20px;
    line-height: 1.0;
    padding: 5px 10px 5px 15px;
    margin: 5px 0px 5px 0px;
    color: #110092;
    font-weight: 600;
    cursor: pointer;
    border-radius: 45px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: none;
    background: none;
    animation: none;
}


.judul3:hover {
    background: linear-gradient(45deg, #98d300, #a6e700, #ffffff, #c3e700, #92cb00);

}

.judul3::before {
    content: "\e900";
    font-family: "icomoon";
    font-weight: 900;
    font-size: 1.3em;
    color: #3f00e1;
    margin-right: 12px;
    font-weight: bold;
    font-size: 1.3em;
    min-width: 20px;
    text-align: center;
}

.jawaban3 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease, padding 0.6s ease;
    padding: 0px 20px;

    background: #ffffff00;
    line-height: 1.6;

}

.nested-jawaban3 {
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 30px;
    color: #00024b;
    font-size: 19px;
}

.nested-jawaban3 a {
    color: #004285;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 0px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: #5363ff 0px 0px 0px 0px;
    background: linear-gradient(90deg, #e5e0ffbd, #eae6ffd6);
}

.nested-jawaban3 a:hover {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 0px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: #5363ff 0px 0px 0px 0px;
    background: linear-gradient(38deg, #12006e, #2900ffbd, #11006e);
}

.active3 .judul3 {
    box-shadow: #2d368787 4px 3px 5px 0px;
    background: linear-gradient(45deg, #a6e601, #c8ff3a, #ffffff, #e2ff45, #a6e601);
}

.active3 .judul3::before {
    content: "\e900";
    font-family: "icomoon";
    color: #2b0099;
}

.active3 .jawaban3 {
    max-height: 1500px;

    opacity: 1;
    padding: 10px 20px;
    text-align: justify;
}


@media (max-width: 768px) {
    .item-container3 {
        max-width: 100%;
        margin: 5px 1px 5px 1px;
        font-family: Arial, sans-serif;
        padding: 5px 1px 5px 1px;
        overflow-x: hidden;
        display: block;

    }

    .item3 {
        padding: 0px 1px 0px 1px;
        margin: 5px 1px 5px 1px;
        list-style-type: none;
    }

    .judul3 {
        font-size: clamp(14px, 4vw, 18px);
        line-height: 6vw;
        text-align: left;
        padding: 5px 20px 5px 15px;
        color: #110092;
        font-weight: 600;
        cursor: pointer;
        border-radius: 45px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        box-shadow: #2d368787 0px 5px 5px 0px;
        background: linear-gradient(45deg, #a6e601, #c8ff3a, #ffffff, #e2ff45, #a6e601);
    }

    .judul3 h3 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;
    }

    .judul3 h4 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;
    }


    .judul3 h5 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;

    }

    .judul3:hover {
        background: linear-gradient(45deg, #98d300, #a6e700, #ffffff, #c3e700, #92cb00);
        background-size: 195% 100%;
    }

    .judul3::before {
        content: "\e900";
        font-family: "icomoon";
        font-weight: 900;
        font-size: 1.3em;
        color: #3f00e1;
        margin-right: 12px;
        font-weight: bold;
        font-size: 1.3em;
        min-width: 20px;
        text-align: center;
    }

    .jawaban3 {
        padding: 5px 1px 5px 1px;
        text-align: justify;
        display: none;
        background: #ffffff00;
        line-height: 1.5;
    }

    .nested-jawaban3 {
        margin: 0px 5px 0px 5px;
        padding: 0px 5px 0px 30px;
        color: #00024b;
        font-size: 1em;
        font-weight: normal;
    }

    .nested-jawaban3 a {
        color: #004285;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        margin: 0px 0px 0px 0px;
        padding: 5px 10px 5px 10px;
        border-radius: 10px 10px 10px 10px;
        box-shadow: #5363ff 0px 0px 0px 0px;
        background: linear-gradient(90deg, #e5e0ffbd, #eae6ffd6);
    }

    .nested-jawaban3 .Designtable4 {
        display: block;
        margin: 5px 0px 5px 0px;
        padding: 5px 1px 5px 1px;
    }

    .active3 .judul3::before {
        content: "\e900";
        font-family: "icomoon";
        color: #2b0099;
    }

    .active3 .jawaban3 {
        display: block;
    }
}




/* ==========================================================================
   - Faq Question
   /*========================================================================== */




.faq-container {
    max-width: 100%;
    margin: 15px;
    font-family: 'Calibri', Arial, sans-serif;
    padding: 10px;
}

.faq-title {
    color: #ffffff;
    font-size: 1.1em;
    font-weight: 600;
    margin: 5px 0 15px 0;
    padding: 12px;
    background: linear-gradient(45deg, #00005c, #3a448d);
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.faq-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
}

dt.faq-question {
    color: #110092;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 15px 40px 15px 15px;
    background: #ecedff;
    border-radius: 6px;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 15px;
    font-size: 1.4em;
    transition: transform 0.3s ease;
}


.faq-item.active dt.faq-question {
    background: #6973ef;
    border-radius: 6px 6px 0 0;
    color: #ffffff;
}

.faq-item.active .faq-question::after {
    content: '−';
    transform: rotate(180deg);
}

dd.faq-answer {
    display: none;
    padding: 15px;
    background: linear-gradient(178deg, #ffffff, #eae6ff, #d6cfff);
    margin: 0;
    line-height: 1.6;
    color: #00024b;
    font-size: 0.95em;
    border: 1px solid #ecedff;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.faq-item.active dd.faq-answer {
    display: block;
}


/* ==========================================================================
   - design 3d
   /*========================================================================== */



.group-list-card-3d {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin: 20px 10px;

}


.list-card-3d {
    max-width: 550px;
    width: 100%;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: inset 8px 8px 16px #d4d9e3, inset -8px -8px 16px #8c81b1;
}


.judul-list-card-3d {
    margin: 0 0 10px 0;
    padding: 15px 30px;
    font-size: 22px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    background: linear-gradient(258deg, #685eb9, #3f24bf, #5138e1, #4a31ff, #1f00c7, #140081, #080039);
}


.judul-list-card-3d {
    color: #ffffff;
}


.isi-list-card-3d {
    padding: 20px;
    margin: 0;
    color: #2d3748;
    line-height: 1.8;
    font-size: 18px;
    background: var(--bg-color);
    border-radius: 20px;
    box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
    position: relative;

}


@media (max-width: 768px) {
    .list-card-3d {
        max-width: 95%;
        width: 95%;
        margin: 0px auto;
    }

    .group-list-card-3d {

        gap: 20px;
        margin: 20px 0px;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 0fr));
        justify-content: center;
    }


}

/* ==========================================================================
   - design 3d
   /*========================================================================== */


.group-list-card-3d-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin: 20px 10px;
    max-width: 100%;
}

.list-card-3d-1 {
    max-width: 550px;
    color: #ffffff;
    width: 100%;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 25px;

    overflow: hidden;
    max-width: 100%;
}

.judul-list-card-3d-1 {
    margin: 0 0 10px 0;
    max-width: 100%;
    padding: 15px 30px;
    font-size: 22px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    background: linear-gradient(258deg, #685eb9, #3f24bf, #5138e1, #4a31ff, #1f00c7, #140081, #080039);
}

.isi-list-card-3d-1 {
    padding: 20px;
    margin: 0;
    max-width: 100%;
    color: #2d3748;
    line-height: 1.8;
    font-size: 18px;
    background: #eef1f9;
    border-radius: 20px;
    box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
    position: relative;

}

@media (max-width: 768px) {
    .list-card-3d-1 {
        max-width: 95%;
        width: 95%;
        margin: 0px auto;
    }

    .group-list-card-3d-1 {
        gap: 20px;
        margin: 20px 0px;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 0fr));
        justify-content: center;
    }
}

/* ==========================================================================
   - table-design-body-semantik
   /*========================================================================== */

.table-design-body-semantik {
    display: block;
}

.group-list-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 10px;
    margin: 10px 0;
    width: 100%;
}

.list-card {
    max-width: 100%;
    margin: 10px;
    padding: 0px 0px 10px 0px;
    font-family: 'Calibri', sans-serif;
    background-color: #ffffff87;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(7 0 65 / 55%);
}


.judul-list-card {
    background: linear-gradient(45deg, #a6e601, #c8ff3a, #ffffff, #e2ff45, #a6e601);
    box-shadow: #2d368787 0px 5px 5px 0px;
    border-radius: 8px 8px 0px 0px;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px;
    color: #090037;
    font-size: 16px;
}

.isi-list-card {
    padding: 5px 30px 0px 15px;
    margin: 10px 0px 10px 15px;
    border-left: 5px solid #a6e601;
}


@media (max-width: 768px) {
    .list-card {
        max-width: 95%;
        width: 95%;
        margin: 0px auto;
    }

    .group-list-card {
        gap: 20px;
        margin: 20px 0px;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 0fr));
        justify-content: center;
    }


}


.body-semantik {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(54deg, #ffffff, #f5f5ff, #d3d7ff, #fdfcff, #fdfcff);
}

.judul-semantik {
    font-size: 19px;
    font-weight: bold;
    color: #1e0093;
    margin-bottom: 5px;
    text-align: left;
}

.isi-semantik {
    font-size: 17px;
    color: #020052;
    margin-inline-start: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #ccc;
}

.body-semantik dt:last-child .isi-semantik {
    margin-bottom: 0;
}



.body-semantik2 {
    max-width: 100%;
    margin: 5px 15px;
    padding: 10px 15px;
}

.judul-semantik2 {
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-size: 22px;
    line-height: 1.5;
    color: #110092;
    padding: 7px 10px 7px 15px;
    margin: 7px 5px;
    border-radius: 45px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: #2d368787 7px 1px 5px 0px;
    background: linear-gradient(45deg, #ffffff, #ffffff, #dcff95, #e2ff45, #a6e601);

}

.judul-semantik2:hover {
    background-color: #e0e0e0;
}

.judul-semantik2::before {
    content: "\e900";
    font-family: "icomoon";
    font-weight: 900;

    color: #3c00d7;
    margin-right: 8px;
}

.judul-semantik2.active::before {
    content: "\ea42";
    color: #000379;
}

.Isi-semantik2 {
    max-height: 0;
    opacity: 0.1;
    overflow: hidden;
    transition: max-height 1.05s ease, padding 0.74s ease, opacity 0.75s ease;
    padding: 0px 5px;
}

.judul-semantik2.active+.Isi-semantik2 {
    max-height: 1000px;
    padding: 5px 20px 5px 0px;
    text-align: justify;
    opacity: 1;
}




@media (max-width: 768px) {


    .body-semantik2 {
        max-width: 100%;
        margin: 2px 2px;
        padding: 2px 2px;
    }


    .judul-semantik2 {
        cursor: pointer;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
        line-height: 1.5;
        color: #110092;
        padding: 5px 10px 5px 15px;
        margin: 7px 5px;
        border-radius: 45px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        box-shadow: #2d368787 7px 1px 5px 0px;
        background: linear-gradient(45deg, #ffffff, #ffffff, #dcff95, #e2ff45, #a6e601);

    }

    .judul-semantik2:hover {
        background-color: #e0e0e0;
    }

    .judul-semantik2::before {
        content: "\e900";
        font-family: "icomoon";
        font-weight: 900;
        color: #3c00d7;
        margin-right: 8px;
    }

    .judul-semantik2.active::before {
        content: "\ea42";
        color: #000379;
    }

    .Isi-semantik2 {
        max-height: 0;
        opacity: 0.1;
        overflow: hidden;
        transition: max-height 1.05s ease, padding 0.74s ease, opacity 0.75s ease;
        padding: 0px 5px;
    }

    .judul-semantik2.active+.Isi-semantik2 {
        max-height: 1500px;
        padding: 5px 20px 5px 0px;
        text-align: justify;
        opacity: 1;
    }
}



/* ==========================================================================
   - Ringkasan Konten
   /*========================================================================== */


.ringkasan-konten {
    width: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ringkasan-konten-kiri {
    width: 350px;
    height: 350px;
    padding: 10px 10px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.ringkasan-konten-kiri img {
    width: 350px;
    max-width: 350px;
    height: Auto;
    object-fit: cover;
    display: block;
}

.ringkasan-konten-kanan {
    text-align: center;
    width: 40vw;
    height: auto;
    font-weight: bold;
    font-size: 3.5vw;
    line-height: 4.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    color: #000054;
    background: linear-gradient(270deg, #ffffff, #f1f2ff, #ffffff);
    border-radius: 0px 30px 30px 0px;
    padding: 10px 10px 10px 10px;
    box-shadow: #515681d9 0px 0px 0px 0px;
}

.ringkasan-konten-kanan a {
    color: #004285;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 0px 0px 0px 0px;
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: #5363ff 0px 0px 0px 0px;
    background: linear-gradient(90deg, #e5e0ffbd, #eae6ffd6);
}

.ringkasan-konten-kanan:hover {
    color: #000054;
    background: linear-gradient(270deg, #f1f2ff, #ffffff);
    box-shadow: #515681d9 0px 0px 0px 0px;
}


@media (max-width: 768px) {

    .ringkasan-konten {
        font-size: 18px;
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0px;
    }

    .ringkasan-konten-kanan {
        color: #000054;
        background: linear-gradient(1deg, #f7f8ff, #ffffff);
        border-radius: 0px 0px 30px 30px;
        padding: 5px 10px 10px 10px;
        box-shadow: #515681d9 0px 3px 3px 0px;
        text-align: center;
        width: 90vw;
        height: auto;
        font-weight: bold;
        font-size: 5vw;
        line-height: 7vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .ringkasan-konten-kanan p {
        margin: 0px 0px 0px 5px;
        padding: 5px 10px 10px 10px;
    }

    .ringkasan-konten-kiri {
        color: #000054;
        text-align: center;
        padding: 0px 0px 0px 5px;
        margin: 0px 20px 0px 20px;
        width: 100%;
        height: auto;
    }

    .ringkasan-konten-kiri img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

}



/* ==========================================================================
   - Design Table 3
   ========================================================================== */


.Designtable3 {
    width: auto;
    display: flex;
    margin: 2px 2px 2px 2px;
    text-align: center;
    place-content: center;
}

.Designtable3 ul {
    margin: 10px 2px 10px 2px;
    padding: 2px 2px 2px 2px;
}

.Designtable3judul {
    margin: 0px 5px 0px 5px;
    padding: 10px 15px 5px 15px;
    border-radius: 20px 20px 0px 0px;
    list-style: none;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    color: #000034;
    box-shadow: #2d368787 0px 3px 5px 0px;
    background: linear-gradient(45deg, #c7c7f1, #f6f3ff, #b3b3ed);
}

.Designtable3judul:hover {
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(45deg, #8c8cc5, #ffffff, #8888be);
}


.Designtable3isi {
    margin: 5px 5px 0px 5px;
    padding: 10px 15px 10px 15px;
    border-radius: 0px 0px 0px 0px;
    list-style: none;
    font-size: 18px;
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(34deg, #efeffd, #ffffff, #e4e4ff);

}

.Designtable3isi .design-body-semantik {
    max-width: 350px;
    margin: 5px;
    padding: 5px;
    box-shadow: none;

}

.Designtable3isi .design-judul-semantik {
    margin: 5px 0px;
    justify-content: center;

}

.Designtable3isi .design-judul-semantik::before {
    display: none;

}

.Designtable3isi ol {
    border-radius: 0px 0px 0px 0px;
    background: none;
    padding: 5px 0px 5px 20px;
    margin: 10px 5px;

}

.Designtable3isi ol li {
    font-size: 18px;
    background: none;
    padding: 5px 10px 5px 10px;
}

.Designtable3isi ol li:hover {
    font-size: 18px;
    background: none;
}


.Designtable3isi b {
    color: #27008f;
    font-weight: bold;
}

.Designtable3isi i:hover {
    color: #1a005f;
    font-size: 20px;
    font-weight: bold;
}

.Designtable3isi:hover {
    box-shadow: #000c7487 0px 4px 7px 0px;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(45deg, #8c8cc5, #ffffff, #8888be);
    font-size: 18px;

}

.Designtable3penutup {
    margin: 5px 5px 0px 5px;
    padding: 10px 15px 10px 15px;
    border-radius: 0px 0px 20px 20px;
    list-style: none;
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(34deg, #b6b6ff, #ffffff, #8585f5);

}

.Designtable3penutup a {
    color: #1a005f;
    font-weight: bold;
}


.Designtable3penutup:hover {
    box-shadow: #1a006887 0px 4px 7px 0px;
    font-size: 20px;
    background: linear-gradient(45deg, #6565c6, #f4f5fd, #7575cd);
}


/* ------------------------------------------------------------------------------------------------------------------------- Design Table 3 Tampilan Mobile */
@media (max-width: 767px) {

    .Designtable3 {
        display: block;
        margin: 0px 0px 10px 0px;
    }


    .Designtable3isi ol {
        border-radius: 0px 0px 0px 0px;
        background: none;
        padding: 5px 0px 5px 20px;
        margin: 10px 5px;

    }

    .Designtable3isi ol li {
        font-size: 18px;
        background: none;
        padding: 5px 10px 5px 10px;
    }

    .Designtable3isi b {
        color: #27008f;
        font-weight: bold;
    }

    .Designtable3penutup {
        margin: 5px 5px 0px 5px;
        padding: 10px 15px 10px 15px;
        border-radius: 0px 0px 20px 20px;
        list-style: none;
        text-align: center;
        box-shadow: #000c7487 0px 4px 7px 0px;
        background: linear-gradient(34deg, #6464a4, #ffffff, #6464a4);
        font-weight: bold;
    }

    .Designtable3penutup a {
        color: #1a005f;
        font-weight: bold;
    }

    .Designtable3penutup:hover {
        margin: 5px 5px 0px 5px;
        padding: 10px 15px 10px 15px;
        border-radius: 0px 0px 20px 20px;
        list-style: none;
        text-align: center;
        font-weight: bold;
        box-shadow: #000c7487 0px 4px 7px 0px;
        background: linear-gradient(45deg, #c1c1ff, #ffffff);
    }
}


/* ==========================================================================
   - Design Table 4
   ========================================================================== */


.Designtable4 {
    width: auto;
    display: block;
    margin: 2px 2px 2px 2px;
    text-align: center;
    place-content: center;
}

.Designtable4judul h2,
.Designtable4judul h3,
.Designtable4judul h4 {
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    line-height: 1.5;
    color: #110092;
    width: auto;
    border-radius: 0px 0px 0px 0px;
    box-shadow: #868cc7d9 0px 0px 0px 0px;
    background: #ffffff00;

}


.Designtable4judul h5 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.Designtable4 ul {
    margin: 2px 2px 10px 2px;
    padding: 2px 2px 2px 2px;
}

.Designtable4judul {

    width: fit-content;
    white-space: nowrap;
    margin: 0px 5px 0px 5px;
    padding: 10px 15px 5px 15px;
    border-radius: 20px 20px 0px 0px;
    list-style: none;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: #000034;
    box-shadow: #2d368787 0px 3px 5px 0px;
    background: linear-gradient(45deg, #a6e601, #ffffff, #c8ed00);

}

.Designtable4 li {
    border-top: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff;
    list-style: none;
}

.Designtable4judul:hover {
    color: #000034;
    box-shadow: #2d368787 0px 3px 5px 0px;
    background: linear-gradient(45deg, #c7c7f1, #f6f3ff, #b3b3ed);
}


.Designtable4penutup {
    margin: 5px 5px 5px 5px;
    padding: 5px 15px 5px 5px;
    border-radius: 0px 20px 20px 0px;
    list-style: none;
    text-align: justify;
    box-shadow: #000c7487 5px 0px 4px 0px;
    background: linear-gradient(45deg, #ffffff, #eaffe575, #ccffcbad, #77e000c4);
}

.Designtable4penutup p {
    color: #020032;
    background: white;
    margin: 5px 5px 5px 5px;
    padding: 5px 10px 5px 5px;
    border-radius: 0px 10px 10px 0px;
}

.Designtable4penutup a {
    color: #050070;
    font-weight: bold;
}

.Designtable4penutup ul {
    margin: 3px 5px 3px 5px;
    padding: 3px 5px 3px 40px;
    list-style: outside;
    text-align: left;
}

.Designtable4penutup:hover {
    box-shadow: #1a006887 6px 4px 5px 0px;
    background: linear-gradient(335deg, #7bff00, #caff94b5, #f0ffebb3, #ffffff);
}




/* ------------------------------------------------------------------------------------------------------------------------- Design Table 4 Tampilan Mobile */
@media (max-width: 767px) {

    .Designtable4 {
        display: block;
        margin: 0px 0px 0px 0px;
    }


    .Designtable4 li {
        border-top: 0px solid #ffffff;
        border-bottom: 0px solid #ffffff;
        list-style: none;
    }

    .Designtable4judul {
        margin: 0px 5px 0px 5px;
        padding: 10px 15px 5px 15px;
        border-radius: 20px 20px 0px 0px;
        list-style: none;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        box-shadow: #2d368787 0px 3px 5px 0px;
        background: linear-gradient(45deg, #a6e601, #ffffff, #c8ed00);
        color: #080083;
    }

    .Designtable4judul h2,
    .Designtable4judul h3,
    .Designtable4judul h4 {
        margin: 0px;
        padding: 0px;
        font-size: 1.2em;
        line-height: 1.5;
        color: #0c007a;
        width: auto;
        border-radius: 0px 0px 0px 0px;
        box-shadow: #868cc7d9 0px 0px 0px 0px;
        background: #ffffff00;
    }


    .Designtable4judul h5 {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }

    .Designtable4penutup {
        margin: 5px 5px 10px 5px;
        padding: 1px 15px 1px 15px;
        border-radius: 0px 0px 20px 20px;
        list-style: none;
        line-height: 22px;
        text-align: justify;
        box-shadow: inset #07490087 0px -3px 0px 0px;
        background: linear-gradient(182deg, #ffffff, #ffffff, #d4ffd3ad, #d8ffacc4);
    }
}






/* ==========================================================================
   - Design Table 5
   ========================================================================== */

.Designtable5 {
    width: auto;
    display: flex;
    margin: 2px 2px 2px 2px;
    text-align: center;
    place-content: center;
}

.Designtable5 ul {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}

.Designtable5judul {
    margin: 0px 5px 0px 5px;
    padding: 10px 15px 5px 15px;
    border-radius: 20px 20px 0px 0px;
    list-style: none;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    color: #000034;
    box-shadow: #2d368787 0px 3px 5px 0px;
    background: linear-gradient(45deg, #c7c7f1, #f6f3ff, #b3b3ed);

}

.Designtable5judul:hover {
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(45deg, #8c8cc5, #ffffff, #8888be);
}


.Designtable5isi {
    margin: 5px 5px 0px 5px;
    padding: 10px 15px 10px 15px;
    border-radius: 0px 0px 0px 0px;
    list-style: none;
    font-size: 18px;
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(34deg, #efeffd, #ffffff, #e4e4ff);
}

.Designtable5isi .design-body-semantik {
    max-width: 350px;
    margin: 5px;
    padding: 5px;
    box-shadow: none;

}

.Designtable5isi .design-judul-semantik {
    margin: 5px 0px;
    justify-content: center;

}

.Designtable5isi .design-judul-semantik::before {
    display: none;

}

.Designtable5isi ol {
    border-radius: 0px 0px 0px 0px;
    background: none;
    padding: 5px 0px 5px 20px;
    margin: 10px 5px;

}

.Designtable5isi ol li {
    font-size: 18px;
    background: none;
    padding: 5px 10px 5px 10px;
}

.Designtable5isi ol li:hover {
    font-size: 18px;
    background: none;
}


.Designtabl53isi b {
    color: #27008f;
    font-weight: bold;
}

.Designtable5isi i:hover {
    color: #1a005f;
    font-size: 20px;
    font-weight: bold;
}

.Designtable5isi:hover {
    box-shadow: #000c7487 0px 4px 7px 0px;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(45deg, #8c8cc5, #ffffff, #8888be);
    font-size: 18px;
}

.Designtable5penutup {
    margin: 5px 5px 0px 5px;
    padding: 10px 15px 10px 15px;
    border-radius: 0px 0px 20px 20px;
    list-style: none;
    box-shadow: #000c7487 0px 4px 7px 0px;
    background: linear-gradient(34deg, #b6b6ff, #ffffff, #8585f5);
}

.Designtable5penutup a {
    color: #1a005f;
    font-weight: bold;
}


.Designtable5penutup:hover {
    box-shadow: #1a006887 0px 4px 7px 0px;
    font-size: 20px;
    background: linear-gradient(45deg, #6565c6, #f4f5fd, #7575cd);
}

/* ------------------------------------------------------------------------------------------------------------------------- Design Table 3 Tampilan Mobile */
@media (max-width: 767px) {

    .Designtable5 {
        display: block;
        margin: 0px 0px 0px 0px;
    }

    .Designtable5judul {
        margin: 0px 5px 0px 5px;
        padding: 10px 15px 5px 15px;
        border-radius: 20px 20px 0px 0px;
        list-style: none;
        font-size: 22px;
        color: #000067;
        text-align: center;
        box-shadow: #2d368787 0px 3px 5px 0px;
        background: linear-gradient(45deg, #c7c7f1, #f6f3ff, #b3b3ed);
    }

    .Designtable5isi {
        margin: 5px 5px 0px 5px;
        padding: 10px 15px 10px 15px;
        border-radius: 0px 0px 0px 0px;
        list-style: none;
        text-align: center;
        box-shadow: #000c7487 0px 4px 7px 0px;
        background: linear-gradient(34deg, #efeffd, #ffffff);
    }

    .Designtable5isi ol {
        border-radius: 0px 0px 0px 0px;
        background: none;
        padding: 5px 0px 5px 20px;
        margin: 10px 5px;

    }

    .Designtable5isi ol li {
        font-size: 18px;
        background: none;
        padding: 5px 10px 5px 10px;
    }

    .Designtable5isi b {
        color: #27008f;
        font-weight: bold;
    }

    .Designtable5penutup {
        margin: 5px 5px 0px 5px;
        padding: 10px 15px 10px 15px;
        border-radius: 0px 0px 20px 20px;
        list-style: none;
        text-align: center;
        box-shadow: #000c7487 0px 4px 7px 0px;
        background: linear-gradient(34deg, #6464a4, #ffffff, #6464a4);
        font-weight: bold;
    }

    .Designtable5penutup a {
        color: #1a005f;
        font-weight: bold;
    }

    .Designtable5penutup:hover {
        margin: 5px 5px 0px 5px;
        padding: 10px 15px 10px 15px;
        border-radius: 0px 0px 20px 20px;
        list-style: none;
        text-align: center;
        font-weight: bold;
        box-shadow: #000c7487 0px 4px 7px 0px;
        background: linear-gradient(45deg, #c1c1ff, #ffffff);
    }
}



/* ==========================================================================
   - My Table
   ========================================================================== */


.my-table-profil-2 {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.my-table-profil-2 td {
    padding: 15px;
    display: table-cell;
    text-align: justify;
    font-size: 20px;
}

.my-table-profil-2 td:nth-child(1) {
    width: 200px;
}

.my-table-profil-2 td:nth-child(2) {
    width: 70%;
}

.my-table-profil-2 tr:hover {
    background: linear-gradient(269deg, #bcc2ff00, #ffffff00);
}

.col-table-profil-2-1 {
    color: #000054;
    padding: 20px 20px 20px 20px;
}

.col-table-profil-2-2 {
    color: #000054;
    background: linear-gradient(270deg, #f1f2ff, #ffffff);
    border-radius: 0px 30px 30px 0px;
    margin: 63px 0px 14px 15px;
    padding: 20px 20px 20px 20px;
    box-shadow: #515681d9 0px 0px 0px 0px;
    width: 80vw;
}

.col-table-profil-2-2:hover {
    color: #000054;
    background: linear-gradient(270deg, #b8bdff, #ffffff);
    border-radius: 0px 30px 30px 0px;
    margin: 63px 0px 14px 15px;
    padding: 20px 20px 20px 20px;
    box-shadow: #515681d9 0px 0px 0px 0px;
    width: 80vw;
}

.col-table-profil-2-3 {
    color: #000054;
    padding: 20px 20px 20px 20px;
    animation: pulse-animation 2s infinite;
}


/* TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT My Table Profil 2 Tampilan Mobile */
@media (max-width: 767px) {

    .my-table-profil-2 {
        border-collapse: collapse;
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: 16px;
    }

    .col-table-profil-2-1 {

        place-self: center;
        color: #000054;
        width: 80vw;
        display: block;
        text-align: justify;
    }

    .col-table-profil-2-2 {
        color: #000054;
        background: linear-gradient(1deg, #f7f8ff, #ffffff);
        border-radius: 0px 0px 30px 30px;
        padding: 5px 20px 5px 20px;
        margin: 0px 0px 0px 0px;
        box-shadow: #515681d9 0px 3px 3px 0px;
        width: 80vw;
        margin-top: 0px;
        display: block;
        text-align: justify;
        place-self: center;
    }

    .isi-heading-non-semantik .col-table-profil-2-2 {
        background: linear-gradient(1deg, #f7f8ff, #fcfff559);
        border-radius: 0px 0px 30px 30px;
        width: 90%;
    }

    .isi-heading-non-semantik-2 .col-table-profil-2-2 {
        background: linear-gradient(1deg, #f7f8ff, #fcfff559);
        border-radius: 30px 30px 30px 30px;
    }

    .col-table-profil-2-3 {
        color: #000054;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        animation: pulse-animation 2s infinite;
        display: block;
        text-align: justify;
    }
}





/* ==========================================================================
   - My New Table
   ========================================================================== */


.my-new-table-semantik-left {

    place-self: center;
    color: #000054;

    display: block;
    text-align: justify;
    flex: 1;
}

.my-new-table-semantik-right {
    place-self: center;
    color: #000054;
    display: block;
    text-align: justify;
    flex: 2;
    font-size: 18px;
}


/* TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT My Table Profil 2 Tampilan Mobile */
@media (max-width: 767px) {

    .my-new-table-semantik {
        flex-direction: column;
    }

}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// My Table Program 1 - Tampilan Desktop */



.my-table-program-1 {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.my-table-program-1 td {
    border: 0px solid #ddd;
    padding: 15px;
    display: table-cell;
    text-align: justyfy;
    font-size: 20px;
}

.my-table-program-1 td:nth-child(1) {
    width: 200px;
}

.my-table-program-1 td:nth-child(2) {
    width: 70%;
}

.my-table-program-1 tr:hover {
    background: linear-gradient(269deg, #bcc2ff00, #ffffff00);
}

.col-table-program-1-1 {
    color: #000054;
    padding: 20px 20px 20px 20px;
}

.col-table-program-1-2 {
    color: #000054;
    background: linear-gradient(270deg, #f1f2ff85, #f1f2ff85, #ffffff00);
    border-radius: 0px 30px 30px 0px;
    margin: 63px 0px 14px 15px;
    padding: 20px 20px 20px 20px;
    box-shadow: #515681d9 0px 0px 0px 0px;
    width: 80vw;
}

.col-table-program-1-2:hover {
    color: #000054;
    background: linear-gradient(270deg, #b8bdff, #ffffff);
    border-radius: 0px 30px 30px 0px;
    margin: 63px 0px 14px 15px;
    padding: 20px 20px 20px 20px;
    box-shadow: #515681d9 0px 0px 0px 0px;
    width: 80vw;
}

.col-table-program-1-3 {
    color: #000054;
    padding: 20px 20px 20px 20px;
    animation: pulse-animation 2s infinite;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// My Table Program 1 - Tampilan Mobile */

@media (max-width: 767px) {

    .my-table-program-1 {
        font-family: Arial, sans-serif;
        font-size: 16px;
    }

    .my-table-program-1 td {
        display: block;
        border: 0px solid #ddd;
        text-align: justify;
    }


    .my-table-program-1 td:nth-child(2) {
        margin-top: 0px;
    }

    .col-table-program-1-1 {
        color: #000054;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px -70px 0px;
    }

    .col-table-program-1-2 {
        color: #000054;
        background: linear-gradient(1deg, #f7f8ff, #ffffff);
        border-radius: 10px 10px 30px 30px;
        margin: 0px 0px 0px 5px;
        padding: 5px 20px 20px 20px;
        box-shadow: #515681d9 0px 3px 3px 0px;
    }

    .col-table-program-1-3 {
        color: #000054;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        animation: pulse-animation 2s infinite;
    }
}




/* ==========================================================================
   - Daftar Isi
   /*========================================================================== */

juduldaftarisi {
    display: block;
    position: fixed;
    top: 108px;
    left: 0px;
    z-index: 1;
    display: block;
    font-size: 20px;
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 0px 0px 30px;
    width: 120px;
    padding: 15px 15px;
    cursor: pointer;
    box-shadow: 0px 2px 2px 0px #b2acdb;
    background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);

    transition: all 1.0s ease;
}

.juduldaftarisi-expanded {
    width: 16vw;
    padding: 10px 15px;
    transition: all 1.0s ease;
}


.main-layout {
    display: grid;
    grid-template-columns: 1fr;

    transition: all 0.5s ease-in-out;
}

.main-layout.toc-active {
    grid-template-columns: 260px 1fr;
}


.la-toc-trigger {
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 998;
    font-size: 16px;
    color: white;
    font-weight: bold;
    border-radius: 0 0 30px 0;
    width: var(--aside-daftar-isi);
    padding: 10px 10px;
    cursor: pointer;
    background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);


    transition: width 0.5s ease;
}

.la-toc-item {
    font-size: 18px;
}


.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item-h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 5px 0px 5px 10px;
    background: linear-gradient(45deg, #cbcbff, #bec6ff, #ffffff);
    border-radius: 0px 0px 0px 0px;
    line-height: 20px;
    margin-bottom: 5px;
    list-style: none;
}

.toc-item-h2 a {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.1rem;
}

.toc-item-h3 {
    margin-left: 20px;
    padding: 3px 0;
    border-bottom: 1px solid #10018d;
}

.toc-item-h3 a {
    color: #555;
    font-size: 0.95rem;
    font-style: italic;
}


.toc-item-h4 {
    margin-left: 40px;
    padding: 2px 0;
    border-bottom: 1px solid #adadad;
}


.toc-item-h4 a {
    color: #888;
    font-size: 0.85rem;
}


.toc-item-h5 {
    margin-left: 60px;
    padding: 2px 0;
    font-weight: 400;
}

.toc-item-h5 a {
    color: #888;
    font-size: 0.85rem;
}

.toc-item a:hover {
    color: #190039 !important;
    text-decoration: underline;
}

juduldaftarisi {
    display: block;
    position: fixed;
    top: 108px;
    left: 0;
    z-index: 1001;
    font-size: 16px;
    color: white;
    font-weight: bold;
    border-radius: 0 0 30px 0;
    width: 160px;
    padding: 10px 10px;
    cursor: pointer;
    background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);
    background-size: 200% 200%;

    transition: width 0.5s ease;
}

.toc-active juduldaftarisi {
    width: 220px;
    font-size: 18px;
}

#daftar-isi {
    display: none;
    position: absolute;
    top: 52px;
    left: 0px;
    z-index: 0;
    height: 65vh;
    width: var(--aside-isi-daftar-isi);
    padding: 10px 0px 10px 0px;
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
    animation: daftarisidekstop 0.75s ease-in-out;
    overflow-y: auto;
    background: #ffffff;

    border-radius: 0 30px 30px 0;
}

.toc-active #daftar-isi {
    display: block;
}



#daftar-isi:hover ::-webkit-scrollbar {
    width: 25px;
    background: linear-gradient(180deg, #f0f0ff, #dadaff, #8190ff, #b7bce033, #3a448d00);
    transition: width 0.5s;
}

#daftar-isi:hover ::-webkit-scrollbar-thumb {
    background-color: #1f1cbf;
}

#daftar-isi ::-webkit-scrollbar {
    width: 2px;
    background: #ffffff00;
}

#daftar-isi ::-webkit-scrollbar-thumb {
    background-color: #ffffff00;
}

#daftar-isi ul {
    position: relative;
    overflow: auto;
    list-style: none;
    padding: 5px 5px 10px 0px;
    margin: 5px 0px 0px 0px;

    animation: daftarisidekstop 0.75s ease-in-out;
}

#daftar-isi ul:hover {
    z-index: 2;
    width: auto;

    background: linear-gradient(40deg, #ffffff);
    animation: daftarisidekstop 0.5s ease-in-out;
}


#daftar-isi li:hover {
    background: linear-gradient(360deg, #c9bcff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
    border-radius: 0px;
}

#daftar-isi a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

#daftar-isi a:hover {
    color: #002d5a;
}









@media (max-width: 768px) {

    .la-toc-trigger {
        position: fixed;
        bottom: 20px;
        height: fit-content;
        width: fit-content;
        top: calc(100% - 85px);
        left: 20px;
        z-index: 4;
        display: block;
        box-shadow: 0px 3px 5px 1px #7467c7;
        font-size: 20px;
        color: white;
        text-align: center;
        font-weight: bold;
        border-radius: 30px;
        padding: 10px 25px;
        background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);
        cursor: pointer;
    }


    .la-toc-item {
        font-size: 18px;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc-item-h2 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 5px 0;
    }

    .toc-item-h2 a {
        font-weight: bold;
        color: #2c3e50;
        font-size: 1.1rem;
    }

    .toc-item-h3 {
        margin-left: 20px;
        padding: 3px 0;
    }

    .toc-item-h3 a {
        color: #555;
        font-size: 0.95rem;
        font-style: italic;
    }

    .toc-item-h3::before {
        color: #007bff;
        margin-right: 8px;
    }

    .toc-item-h4 {
        margin-left: 40px;
        padding: 2px 0;
    }

    .toc-item-h4 a {
        color: #888;
        font-size: 0.85rem;
    }

    .toc-item a:hover {
        color: #190039 !important;
        text-decoration: underline;
    }


    juduldaftarisi {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 1001;
        background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);
        color: white;
        padding: 12px 25px;
        border-radius: 30px;
        font-weight: bold;
    }

    #daftar-isi {
        display: none;
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 75vh;
        background: white;
        z-index: 1000;
        border-radius: 20px;
        box-shadow: 0 0 50px rgba(0, 0, 92, 0.5);
        padding: 20px;
        overflow-y: auto;
        overflow-x: scroll;
    }

    .toc-active #daftar-isi {
        display: block;
    }
}

.my-new-table-semantik {
    display: flex;
    background: linear-gradient(45deg, #7c7cc1, #f0f2ff, #f0f2ff, #c0c7ff);
    border-radius: 15px;
    padding: 15px;
}


/* ==========================================================================
   - My Table
   /*========================================================================== */


.my-table-1 {
    background: linear-gradient(45deg, #7c7cc1, #f0f2ff, #f0f2ff, #c0c7ff);
    border-radius: 15px;
    border-bottom: 5px solid #00036f;
}

.my-table-1-p {
    background: linear-gradient(45deg, #ffffff, #ffffff, #ffffff, #ffffff);
    border-radius: 15px;
    padding: 10px;
    margin: 20px 10px 10px 10px;
    box-shadow: #313a8dd9 0px 0px 6px 0px;
    font-size: 18px;
}

.my-table-1-p-1 {
    background: linear-gradient(45deg, #ffffff, #ffffff, #ffffff, #ffffff);
    border-radius: 15px;
    padding: 10px;
    margin: 20px 10px 10px 10px;
    box-shadow: inset #1a205196 3px 3px 6px 0px, inset #1a20512e -3px -3px 6px 0px;
    font-size: 18px;
}


.my-table-1 h4,
.my-table-1 h3 {
    border-radius: 15px 15px 0px 0px;
    margin: 25px 0px 10px 0px;
    box-shadow: #313a8dd9 0px 4px 3px 0px;
}



/* ==========================================================================
   - Daftar Isi
   /*========================================================================== */

@media (max-width: 768px) {


    juduldaftarisi {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 4;
        display: block;
        box-shadow: 0px 3px 5px 1px #7467c7;
        font-size: 20px;
        color: white;
        text-align: center;
        font-weight: bold;
        border-radius: 30px;
        padding: 10px 25px;
        background: linear-gradient(45deg, #00005c, #bec6ff, #3a448d);
        cursor: pointer;
    }


    #daftar-isi ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    #daftar-isi li {
        margin-bottom: 5px;
        border-radius: 10px;
        list-style: none;
        padding: 3px;
        transition: background 0.3s;
    }

    #daftar-isi li:hover {
        background: rgba(0, 0, 92, 0.1);
        border-radius: 10px;
    }

    #daftar-isi a {
        color: #333;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 2px;
    }

    #daftar-isi a:hover {
        color: #002d5a;
    }

}



#daftar {
    display: none;
}

#daftar ul {
    position: fixed;
    top: 157px;
    left: -38px;
    overflow: auto;
    list-style: none;
    padding: 10px 5px 10px 40px;
    margin: 15px 0px 0px 0px;
    border-radius: 0px 30px 30px 0px;
    width: 280px;
    height: 65vh;
    background: #fbffff;

    box-shadow: #515681d9 0px 3px 5px 0px;
}

#daftar ul:hover {
    z-index: 2;
    width: auto;

    background: linear-gradient(40deg, #ffffff);
    animation: daftarisidekstop 0.5s ease-in-out;
}


#daftar:hover ::-webkit-scrollbar {
    width: 25px;
    background: linear-gradient(180deg, #f0f0ff, #dadaff, #8190ff, #b7bce033, #3a448d00);
    transition: width 0.5s;
}

#daftar:hover ::-webkit-scrollbar-thumb {
    background-color: #1f1cbf;
}

#daftar ::-webkit-scrollbar {
    width: 2px;
    background: #ffffff00;
}

#daftar ::-webkit-scrollbar-thumb {
    background-color: #ffffff00;
}

#daftar li {
    margin-bottom: 5px;
    border-radius: 10px 10px 10px 10px;
}

#daftar li:hover {
    border-radius: 30px 30px 30px 30px;
    filter: brightness(75%);
}

#daftar a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

#daftar a:hover {
    color: #002d5a;
}



@media (max-width: 768px) {
    #daftar {
        display: none;
    }

    #daftar ul {
        display: none;
    }

    #daftar li {
        display: none;
    }

    #daftar li:hover {
        display: none;
    }

    #daftar a {
        display: none;
    }

    #daftar a:hover {
        display: none;
    }
}


/* ==========================================================================
   - Whatsapp
   /*========================================================================== */


@media (max-width: 768px) {
    .floating-whatsapp-btn {
        bottom: 12px;
        right: 30px;
        width: 65px;
        height: 65px;
        font-size: 40px;
    }
}


.floating-whatsapp-btn {
    bottom: 20px;
    right: 30px;
    width: 80px;
    height: 80px;
    font-size: 50px;
}



.floating-whatsapp-btn {
    position: fixed;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1001;
    transition: all 0.5s ease;
}


.floating-whatsapp-btn i {
    pointer-events: none;
}

.floating-whatsapp-btn:hover {
    background-color: #85d325;
    transform: rotate(360deg) scale(1.25);
    color: #ffffff;
}


.floating-whatsapp-btn:hover~.hubungi-whatsapp {
    display: block;
    opacity: 1;
    z-index: 3;
    transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1);
    right: 90px;
}


.hubungi-whatsapp {
    display: block;
    opacity: 0;
    position: fixed;
    height: 50px;
    bottom: 31px;
    right: 90px;
    background: #2ea716;
    padding: 10px 40px 10px 25px;
    align-content: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    z-index: 3;
    border-radius: 30px 30px 30px 30px;
    transform: translateX(200px) translateY(0px) scaleX(0.25) scaleY(0.75);
    transition: all 1.25s ease-in-out;
}


.floating-whatsapp-btn.scrolled-down~.hubungi-whatsapp {
    opacity: 1;
    z-index: 3;
    transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1);
    transition: all 1.25s ease-in-out;
}

.floating-whatsapp-btn.scrolled-down {
    background-color: #85d325;
    transform: rotate(360deg) scale(1.25);
    transition: all 1.5s ease-in-out;
}




/* ==========================================================================
   - Scroll
   /*========================================================================== */




::-webkit-scrollbar {
    width: 10px;
    background: linear-gradient(180deg, #f0f0ff, #dadaff, #8190ff, #b7bce033, #3a448d00);
    transition: width 0.5s;
}



::-webkit-scrollbar-thumb {
    background-color: #1f1cbf;
    height: 75px;
    box-shadow: #727bc5d9 0px 0px 22px 2px;
    border-radius: 30px 30px 30px 30px;
}






.container {
    transition: padding-left 0.75s ease-in-out, margin-left 0.75s ease-in-out;
}

.container.padding-shifted {
    padding-left: 240px;
}