/* ===== FAQ ===== */
/* Wrapper untuk item-item FAQ */
.sda-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

/* Setiap Item FAQ */
.sda-faq-item {
    border: 1px solid #ebebeb; /* border border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: border-color 0.3s ease-in-out;
    background: #F9FBFA;
}

/* State Aktif pada Item FAQ */
.sda-faq-item.active {
    border-color: #348357; /* Warna hijau saat aktif */
}

/* Bagian Pertanyaan */
.sda-faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* p-5 */
}

.sda-faq-question h3 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #11182C; /* text-gray-900 */
    margin: 0;
}

/* Ikon Panah */
.sda-faq-arrow {
    width: 20px;
    height: auto;
    color: #000000;
    transition: transform 0.3s ease-in-out;
}

/* Rotasi Panah saat Aktif */
.sda-faq-item.active .sda-faq-arrow {
    transform: rotate(180deg);
}

/* Bagian Jawaban */
.sda-faq-answer {
    display: none; /* Sembunyikan default */
    padding: 1.25rem; /* p-5 */
    padding-top: 0;
    color: #4B5563; /* text-gray-600 */
}

.sda-faq-answer p {
    margin: 0;
}

/* ===== STAIDA News ===== */
.staida-news-wrapp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.sn-item-list {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebebeb;
    transition: transform 0.3s linear;
}

.sn-item-list:hover {
    transform: scale(1.03);
}

.snil-thumb > img {
    border-radius: 10px;
    aspect-ratio: 3 / 2.5;
    object-fit: cover;
    object-position: center;
}

.sd-excerpt > p {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 14px;
    color: gray;
}

.snil-detail > h5 {
    margin: 0;
    font-size: 18px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-post-meta {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.staida-news-wrapp > .sn-col:last-child {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sn-item {
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    aspect-ratio: 2.5 / 2;
}

.si-detail > button > a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.si-detail > button > a > svg {
    width: 30px;
    height: auto;
    background: #348357;
    color: #fff;
    padding: 5px;
    border-radius: 40px;
}

.si-detail > button {
    background: #fff;
    padding: 8px 9px 8px 20px;
    border-radius: 40px;
    margin-top: 12px;
}

.si-meta > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1em;
    color: #fff;
    background: linear-gradient(45deg, #12532F, #348357);
    width: fit-content;
    padding: 2px 13px;
    border-radius: 35px;
}

.si-meta > span > svg {
    width: 20px;
}

.si-detail > h2 {
    margin: 0;
    font-size: 25px;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sid-excerpt > p {
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.si-detail {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    z-index: 1;
}

.sn-item::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(181deg, rgba(0, 49, 22, 0.10) 30.14%, #003116 99.11%);
    position: absolute;
    top: 0;
    left: 0;
}

.si-meta {
    z-index: 1;
}

.spm-date {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1em;
    color: #797979;
}

.spm-date > svg {
    width: 22px;
    height: auto;
    color: #348357;
}

.spm-author {
    color: #797979;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
}

.spm-author > svg {
    width: 22px;
    color: #348357;
}

.spm-separator {
    background: #ebebeb;
    width: 1px;
    height: 15px;
}

.snil-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ===== STAIDA Announcment ===== */
.staida-announcment-wrapp > .splide__track {
    overflow: visible;
}

.sai-thumb > img {
    aspect-ratio: 4 / 2.5;
}

.sa-item {
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 8px 3px rgba(52, 131, 87, 0.08);
}

.sai-detail {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.said-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.saidm-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #797979;
    line-height: 1em;
}

.saidm-date > svg {
    width: 22px;
    height: auto;
    color: #348357;
}

.saidm-author {
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
    font-size: 14px;
    color: #797979;
    line-height: 1em;
}

.saidm-author > svg {
    width: 22px;
    height: auto;
    color: #348357;
}

.saidm-separator {
    background: #ebebeb;
    width: 1px;
    height: 13px;
}

.sai-detail > h2 {
    font-size: 18px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.said-excerpt > p {
    color: gray;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sai-detail > a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sai-detail > a > span {
    text-decoration: underline;
    font-weight: 500;
}

.sai-detail > a > svg {
    width: auto;
    height: 12px;
}

.staida-announcment-wrapp .splide__arrow {
    position: unset;
    transform: unset;
    width: unset;
    height: unset;
}

.staida-announcment-wrapp .splide__pagination {
    display: unset;
    position: unset;
    justify-content: unset;
    align-items: unset;
}

.splide-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 30px;
}

.splide-navigation > button {
    background: unset;
}

.splide-navigation > button > svg {
    width: 30px;
    color: #348357;
}

.splide-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 30px;
}

.splide-navigation > button {
    background: unset;
}

.splide-navigation > button > svg {
    width: 30px;
    color: #348357;
}

.splide-navigation .splide__pagination__page.is-active {
    background: #348357;
    opacity: 1;
    margin: 0;
}

.splide-navigation .splide__pagination__page {
    background: #348357;
    opacity: 0.2;
    margin: 0;
}

.splide-navigation .splide__pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sai-thumb {
    overflow: hidden;
}

.sai-thumb > img:hover {
    transform: scale(1.2);
}

.sai-thumb > img {
    transition: transform 0.4s ease;
}

/* ===== STAIDA Banner ===== */
.staida-banner-slide-wrapp ul > li {
    border-radius: 20px;
    overflow: hidden;
}

.staida-banner-slide-wrapp ul > li > img {
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
    object-position: center;
}

.splide-navigation-banner > button {
    position: unset;
    width: unset;
    height: unset;
    transform: unset;
    background: unset;
}

.splide-navigation-banner > ul {
    position: unset;
    justify-content: unset;
    padding: unset;
}

.splide-navigation-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 20px;
}

.splide-navigation-banner > button > svg {
    fill: #fff;
}

/* ===== STAIDA Custom Style Post ===== */
.entry-card .boundless-image {
    overflow: hidden !important;
    border-radius: 10px !important;
}

.staida-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-related-posts-items .spm-date {
    color: #797979 !important;
}

.ct-related-posts-items .spm-author {
    color: #797979 !important;
}

.ct-related-posts-items .spm-date> svg {
    color: #348357 !important;
}

.ct-related-posts-items .spm-author > svg {
    color: #348357 !important;
}

/* ===== STAIDA Latest Posts ===== */
.staida-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.staida-post-item {
    display: grid;
    gap: 16px;
    grid-template-columns: auto 1fr;
}

.staida-post-thumb img {
    width: 75px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}
.staida-post-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.staida-post-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0px;
    margin-block-end: 0px !important;
    line-height: 1.2em;
}
.staida-post-title a {
    color: #1a2b3c;
    text-decoration: none;
    display: -webkit-box;
	-webkit-line-clamp: 2; /* batasi maksimal 3 baris */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.staida-post-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 14px;
}
.staida-post-meta svg {
    vertical-align: middle;
    margin-right: 4px;
    color: #3a9c5a;
}
.staida-meta-separator {
    color: #ccc;
    margin: 0 4px;
}

.staida-sidebar-post-wrapp .staida-recent-post-row-2 > div > p {
    margin-block-end: 0px;
    display: none;
}


.staida-category-post > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebebeb;
}

.staida-category-post {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ===== CUSTOM STYLING THEME BLOCKSY ===== */
/* ===== DESKTOP ===== */
[data-device=desktop][data-transparent] [data-sticky="shrink"] {
	top: 20px;
	position: absolute;
	width: 100%;
}

[data-device=desktop][data-transparent] [data-sticky="yes:shrink"] {
	top: 20px;
}

[data-device=desktop][data-transparent] [data-sticky="fixed:shrink"] {
	top: 20px;
}

/* LOGIN MODE DESKTOP */
.logged-in [data-device=desktop][data-transparent] [data-sticky="fixed:shrink"] {
	top: 20px;
}

.logged-in [data-device=desktop][data-transparent] [data-sticky="yes:shrink"] {
	top: 20px;
}

/* ===== MOBILE ===== */
[data-device=mobile][data-transparent] [data-sticky="fixed:shrink"] {
	top: 20px;
}

[data-device=mobile][data-transparent] [data-sticky="shrink"] {
	top: 20px;
	position: absolute;
  width: 100%;
}

[data-device=mobile][data-transparent] [data-sticky="yes:shrink"] {
	top: 20px;
}

/* LOGIN MODE MOBILE */
.logged-in [data-device=mobile][data-transparent] [data-sticky="fixed:shrink"] {
	top: 20px;
}

.logged-in [data-device=mobile][data-transparent] [data-sticky="yes:shrink"] {
	top: 20px;
}

.ct-button {
	line-height: 1em;
	background: linear-gradient(90deg, #12532F, #348357);
}

/* ===== CUSTOM STYLING LEARNPRESS */
.lp-content-area {
    
    width: var(--theme-container-width);
}

.lp-archive-courses > .lp-content-area {
    padding: unset;
}

.learn-press-courses .course:last-child {
    margin: 0px;
}

.learn-press-courses[data-layout=grid] .course {
    padding: 0px !important;
}

.learn-press-courses {
    margin: 0px !important;
}

.learn-press-form-login, .learn-press-form-register {
    margin-bottom: 0px !important;
}

.lp-archive-courses .course-detail-info {
    padding: 60px 0 24px 0 !important;
}

.course-summary-sidebar .course-summary-sidebar__inner {
    top: 110px !important;
    position: sticky !important;
    margin-bottom: 30px;
}

.lp-archive-courses .course-summary-sidebar__inner .course-sidebar-top {
    border-radius: 15px;
    overflow: hidden;
}



.lp-archive-courses .lp-entry-content .entry-content-left {
    padding-bottom: 60px;
}

.form-submit {
    margin: 0;
}

.comment-form-field-textarea {
    margin: 0;
}

.lp-content-area > div > .ct-comments {
    margin-top: 40px;
}

.course-tab-panel .lp-course-author {
    align-items: center !important;
}

.course-tab-panel .lp-course-author .author-title {
    line-height: 1.2em;
    font-size: 18px;
}

.course-tab-panel .lp-course-author img {
    width: 70px !important;
    height: 70px !important;
}

.course-tab-panel .lp-course-author .course-author__pull-left {
    margin-right: 18px !important;
}

.quiz-status .countdown {
    color: #fff !important;
}

.quiz-status .questions-index {
    color: #fff !important;
}

.quiz-status .questions-index span {
    color: #fff !important;
}

.lp-user-profile .lp-profile-left {
    max-width: unset !important;
    min-width: unset !important;
}

.lp-user-profile .lp-profile-content-area {
    align-items: center !important;
}

.lp-user-profile .lp-profile-right {
    gap: 0px !important;
}

.lp-user-profile .lp-profile-username {
    line-height: 1.2em;
    font-size: 18px !important;
}

.lp-user-profile .lp-profile-right {
    padding-left: 15px !important;
}

.lp-user-profile .lp-profile-left .user-avatar .lp-btn-to-edit-avatar {
    top: 30px !important;
    width: 30px !important;
    height: 30px !important;
}

.lp-user-profile {
    --lp-item-padding: 30px !important;
}

.lpl-btn-wrapp {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.learn-press-form-login, .learn-press-form-register {
    border-radius: 15px !important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
    border: unset !important;
}

.learn-press-breadcrumb {
    padding: 0px !important;
}

.sda-header-archive-courses {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 8px;
    margin-bottom: 45px !important;
    margin-top: 35px;
}

.sda-header-archive-courses > .learn-press-breadcrumb {
    width: unset;
    margin: unset;
}

.sda-header-archive-courses > h1 {
    font-size: 28px !important;
}

.lp-list-courses-default {
    margin-bottom: 60px;
}

.container-instructors .lp-content-area {
    padding: 0;
}

.container-single-dosen .lp-content-area {
    padding: 0;
}

.lp-single-instructor__info__right {
    gap: 5px !important;
}

.lp-single-instructor__info__right__content > h2 {
    margin: 0;
    line-height: 1.2em;
    font-size: 20px;
}

/* ===== Responsive Mobile ===== */
@media (max-width: 768px) {
    .staida-news-wrapp {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .sn-item {
        aspect-ratio: 2 / 2.5;
        padding: 20px;
    }

    .si-detail > button {
        padding: 5px 7px 5px 17px;
    }

    .si-detail > h2 {
        font-size: 20px;
    }

    .sn-item-list {
        grid-template-columns: 95px 1fr;
        gap: 15px;
    }

    .snil-thumb > img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }

    .sd-excerpt > p {
        line-height: 1.3em;
    }

    .snil-detail > h5 {
        font-size: 16px;
    }

    .sd-post-meta {
        font-size: 12px;
    }

    .spm-date > svg {
        width: 18px;
    }

    .spm-author > svg {
        width: 18px;
    }

    .spm-separator {
        height: 10px;
    }

    .si-meta > span {
        font-size: 12px;

    }

    .si-meta > span > svg {
        width: 16px;
    }

    .sda-faq-question h3 {
        font-size: 16px;
    }


    .lp-archive-courses .lp-entry-content .entry-content-left {
        padding-bottom: 50px;
    }

    .lp-archive-courses .course-detail-info {
        padding: 40px 0 24px 0 !important;
    }
}

/* ===== Responsive Tablet ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .staida-news-wrapp {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .sn-item {
        aspect-ratio: 3 / 2;
    }


    .lp-archive-courses .lp-entry-content .entry-content-left {
        padding-bottom: 40px;
    }
}

/* ===== Responsive Mobile & Tablet ===== */
@media (max-width: 1024px) {
    

    
}