/* ============================================================
   SkillForCuan Custom CSS — override layer on top of main.css
   ============================================================ */

/* ---- Password field with eye toggle ---- */
.sfc-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.sfc-password-wrap input[type="password"],
.sfc-password-wrap input[type="text"] {
    flex: 1;
    padding-right: 44px !important;
}
.sfc-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #9a9a9a;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.sfc-eye-btn:hover { color: #555; }

/* ---- E-Course Hero ---- */
.sfc-ecourse-hero {
    padding: 56px 0 40px;
    background: #fff;
    text-align: center;
}

.sfc-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #E8F5EE;
    color: #1B7A47;
    border: 1px solid #B8DFC9;
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.sfc-hero-title {
    font-size: 52px;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 14px;
    letter-spacing: -1px;
}

.sfc-hero-desc {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto 28px;
}

.sfc-hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1B3A2D;
    color: #fff;
    border-radius: 100px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.sfc-hero-cta-btn:hover {
    background: #0f261d;
    color: #fff;
    transform: translateY(-1px);
}

/* ---- Courses Main Section ---- */
.sfc-courses-main {
    background: #F3F4F6;
    padding: 48px 0 80px;
}

/* ---- Filter Section Wrapper ---- */
.sfc-courses-filter {
    background: #fff;
    padding: 24px 0;
}

/* ---- Filter Row (Search + Sort) ---- */
.sfc-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

.sfc-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.sfc-search-icon {
    position: absolute;
    left: 10px;
    color: #9CA3AF;
    font-size: 13px;
    pointer-events: none;
}

.sfc-search-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 6px 12px 6px 34px;
    font-size: 14px;
    color: #111827;
    background: transparent;
}

.sfc-search-input::placeholder {
    color: #9CA3AF;
}

.sfc-sort-wrap {
    flex-shrink: 0;
}

.sfc-sort-select {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    outline: none;
    min-width: 130px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* ---- Category Pills ---- */
.sfc-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sfc-pill {
    border: 1px solid #D1D5DB;
    border-radius: 100px;
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    line-height: 1;
}

.sfc-pill:hover:not(.active) {
    border-color: #1B3A2D;
    color: #1B3A2D;
    background: #F0FAF4;
}

.sfc-pill.active {
    background: #1B3A2D;
    border-color: #1B3A2D;
    color: #fff;
    font-weight: 600;
}

/* ---- Course Count Label ---- */
.sfc-count-text {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 16px;
}

/* ---- Courses / Class Replay Grid Section ---- */
.sfc-courses-bg,
.sfc-courses-main {
    background: #F5F4F2;
    padding: 32px 0 64px;
}

/* ---- Learning Series / Class Replay Card ---- */
.sfc-ls-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.2s, transform 0.2s;
}
.sfc-ls-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
    transform: translateY(-4px);
}

.sfc-ls-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    flex-shrink: 0;
    background: #0D3D24;
    overflow: hidden;
}
.sfc-ls-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.sfc-ls-play-ring {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(24, 161, 103, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-ls-play-circle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sfc-ls-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 1;
    background: #18A167;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1;
}
.sfc-ls-wishlist {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    font-size: 14px;
    transition: color 0.15s;
}
.sfc-ls-wishlist:hover,
.sfc-ls-wishlist .fas.fa-heart {
    color: #E11D48;
}

.sfc-ls-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    flex: 1;
    min-width: 0;
}
.sfc-ls-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #18A167;
}
.sfc-ls-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #1A1A1A;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sfc-ls-title a {
    color: inherit;
    text-decoration: none !important;
}
.sfc-ls-title a:hover {
    color: #18A167;
}
.sfc-ls-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.sfc-ls-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9B9B95;
    white-space: nowrap;
}
.sfc-ls-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sfc-ls-rating-num {
    font-size: 12px;
    font-weight: 600;
    color: #1A1A1A;
}
.sfc-ls-rating-count {
    font-size: 12px;
    color: #9B9B95;
}
.sfc-ls-divider {
    margin: 0;
    border: none;
    border-top: 1px solid #F0EDE8;
}
.sfc-ls-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.sfc-ls-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sfc-ls-price-old {
    font-size: 11px;
    color: #BCBCB8;
    text-decoration: line-through;
}
.sfc-ls-price {
    font-size: 17px;
    font-weight: 700;
    color: #18A167;
    white-space: nowrap;
}
.sfc-ls-instructor {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.sfc-ls-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0D3D24;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-ls-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: none;
    background: #1B3A2D;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.sfc-ls-cart-btn:hover,
.sfc-ls-cart-btn.in-cart {
    background: #18A167;
}
.sfc-ls-instructor-name {
    font-size: 12px;
    color: #4A4A45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sfc-ls-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9B9B95;
    font-size: 14px;
}

/* ---- Load More Button ---- */
.sfc-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.sfc-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #0D3D24;
    border-radius: 100px;
    padding: 14px 36px;
    color: #0D3D24;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
.sfc-load-more-btn:hover {
    background: #0D3D24;
    color: #fff;
}
.sfc-load-more-btn:hover svg path {
    stroke: #fff;
}

/* ---- Course Card ---- */
.sfc-course-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sfc-course-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
    transform: translateY(-4px);
}

/* Thumbnail */
.sfc-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0D2118;
    overflow: hidden;
    flex-shrink: 0;
}

.sfc-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.sfc-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: opacity 0.3s;
}

.sfc-course-card:hover .sfc-thumb-img {
    opacity: 0.72;
}

.sfc-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sfc-play-btn {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    padding-left: 3px;
    transition: background 0.2s, transform 0.2s;
}

.sfc-course-card:hover .sfc-play-btn {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
}

/* Badge */
.sfc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 100px;
    background: #2FBF71;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
}

/* Wishlist button */
.sfc-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1;
    transition: color 0.2s;
}

.sfc-wishlist-btn:hover {
    color: #ff6b6b;
}

/* Card Content */
.sfc-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sfc-card-category {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1B7A47;
    text-transform: uppercase;
}

.sfc-card-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #111827;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sfc-card-title a {
    color: inherit;
    text-decoration: none;
}

.sfc-card-title a:hover {
    color: #1B7A47;
}

.sfc-card-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #6B7280;
    flex-wrap: wrap;
    margin-top: 2px;
}

.sfc-card-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sfc-card-stats i {
    font-size: 11px;
    color: #9CA3AF;
}

/* Card Footer */
.sfc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #F3F4F6;
}

.sfc-price {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.sfc-price-old {
    font-size: 12px;
    color: #9CA3AF;
    text-decoration: line-through;
    margin-left: 5px;
}

.sfc-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfc-cart-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F3F4F6;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.sfc-cart-btn:hover {
    background: #1B3A2D;
    color: #fff;
}

.sfc-instructor-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1B3A2D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---- Pagination overrides ---- */
.sfc-courses-main .pagination-wrap {
    display: flex;
    justify-content: center;
}

.sfc-courses-main .pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.sfc-courses-main .pagination .page-item .page-link,
.sfc-courses-main .pagination .page-item span {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #374151;
    background: #fff;
    text-decoration: none;
    transition: all 0.15s;
}

.sfc-courses-main .pagination .page-item.active .page-link {
    background: #1B3A2D;
    border-color: #1B3A2D;
    color: #fff;
}

.sfc-courses-main .pagination .page-item .page-link:hover {
    background: #F0FAF4;
    border-color: #1B3A2D;
    color: #1B3A2D;
}

.sfc-courses-main .pagination .page-item.disabled span {
    opacity: 0.4;
    cursor: default;
}

/* ============================================================
   Homepage & Global Branding Overrides
   Brand: dark=#1B3A2D  mid=#1B7A47  bright=#2FBF71
   ============================================================ */

/* --- Section sub-title labels (match E-Course badge style) --- */
.sub-title {
    color: #1B7A47 !important;
    background: #E8F5EE !important;
    border-color: #B8DFC9 !important;
}

/* --- Primary CTA buttons (.btn.arrow-btn) --- */
.btn.arrow-btn {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.btn.arrow-btn:hover,
.btn.arrow-btn:focus {
    background: #0f261d !important;
    border-color: #0f261d !important;
    color: #fff !important;
}

/* --- Banner play/video button --- */
.play-btn.popup-video {
    color: #1B3A2D;
    border-color: #1B3A2D;
}
.play-btn.popup-video:hover {
    background: #1B3A2D;
    color: #fff;
}

/* --- Course section tab navigation --- */
.courses__nav .nav-tabs .nav-link {
    color: #374151;
}
.courses__nav .nav-tabs .nav-link:hover {
    color: #1B3A2D;
    border-color: #1B3A2D;
}
.courses__nav .nav-tabs .nav-link.active {
    color: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.courses__nav .nav-tabs .nav-link::after,
.courses__nav .nav-tabs .nav-link.active::after {
    background: #1B3A2D !important;
}

/* --- Course carousel items: category tag --- */
.courses__item-tag a {
    color: #1B7A47 !important;
    border-color: #B8DFC9 !important;
    background: #F0FAF4 !important;
}
.courses__item-tag a:hover {
    color: #1B3A2D !important;
    background: #E0F5EA !important;
}

/* --- Course carousel items: add-to-cart / enrolled button --- */
.courses__item-bottom .button a {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.courses__item-bottom .button a:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
    color: #fff !important;
}
.courses__item-bottom .button a.already-enrolled-btn {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}

/* --- Course price --- */
.courses__item-bottom .price {
    color: #1B3A2D !important;
}

/* --- Features section background --- */
.features__area {
    background: #1B3A2D !important;
}

/* --- Fact / counter section inner background --- */
.fact__inner-wrap {
    background: #1B7A47 !important;
}
.fact__item .count,
.fact__item h2 {
    color: #fff !important;
}
.fact__item p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Newsletter section --- */
.newsletter__area {
    background: #1B3A2D !important;
}
.newsletter__form .btn,
.newsletter__form button[type="submit"] {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}
.newsletter__form .btn:hover,
.newsletter__form button[type="submit"]:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* --- Star ratings --- */
.avg-rating i.fas.fa-star,
.avg-rating i.fa-star {
    color: #F5A623;
}

/* --- Footer logo size --- */
.footer__widget .logo img {
    max-height: 52px;
    width: auto;
}

/* ---- Homepage course carousel: swiper-slide full-height ---- */
.courses-swiper-active .swiper-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.courses-swiper-active .swiper-slide .sfc-course-card {
    flex: 1;
}
/* Star icon in sfc-card-stats → yellow */
.sfc-card-stats .fa-star {
    color: #F5A623 !important;
}

/* ============================================================
   Homepage course carousel cards → match /courses sfc-card style
   ============================================================ */
.courses-area .courses__item.shine__animate-item,
.courses-area .courses__item {
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.2s, transform 0.2s;
    border: none !important;
}
.courses-area .courses__item.shine__animate-item:hover,
.courses-area .courses__item:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13) !important;
    transform: translateY(-4px) !important;
}
.courses-area .courses__item-thumb {
    position: relative !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0D2118;
    flex-shrink: 0;
}
.courses-area .courses__item-thumb .shine__animate-link,
.courses-area .courses__item-thumb a:first-child {
    display: block;
    width: 100%;
    height: 100%;
}
.courses-area .courses__item-thumb img:not([class*="wishlist"]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.3s;
}
.courses-area .courses__item:hover .courses__item-thumb img:not([class*="wishlist"]) {
    opacity: 0.45;
}
.courses-area .courses__item-content {
    padding: 14px 16px !important;
}
.courses-area .courses__item-tag a {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #1B7A47 !important;
    background: #F0FAF4 !important;
    border: 1px solid #B8DFC9 !important;
    border-radius: 100px !important;
    padding: 3px 10px !important;
    line-height: 1 !important;
}
.courses-area .courses__item-tag a:hover {
    background: #E0F5EA !important;
    color: #1B3A2D !important;
}
.courses-area .courses__item-content h3.title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 4px !important;
}
.courses-area .courses__item-content h3.title a {
    color: #111827 !important;
}
.courses-area .courses__item-content h3.title a:hover {
    color: #1B7A47 !important;
}
.courses-area .courses__item-content .author {
    font-size: 12.5px;
    color: #6B7280;
    margin-bottom: 4px;
}
.courses-area .courses__item-content .author a {
    color: #1B7A47 !important;
    font-weight: 600;
}
.courses-area .courses__item-content .author a:hover {
    color: #1B3A2D !important;
}
.courses-area .avg-rating {
    font-size: 12px;
    color: #6B7280;
}
.courses-area .courses__item-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #F3F4F6 !important;
    padding-top: 10px !important;
    margin-top: 6px !important;
}

/* ============================================================
   Footer: all text → white
   ============================================================ */
.footer__widget-title,
.footer__content p,
.footer__content ul li,
.footer__link ul li a,
.footer__contact-content p,
.copy-right-text p,
.footer__bottom-menu ul li a,
.footer__area .footer__top p,
.footer__area address {
    color: #fff !important;
}
.footer__link ul li a:hover,
.footer__bottom-menu ul li a:hover {
    color: #2FBF71 !important;
}

/* ============================================================
   App store / Google Play buttons → add border so white bg visible
   ============================================================ */
.app-download a {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    margin: 4px 4px 4px 0;
}

/* --- Header search button --- */
.header__search-btn,
.tgmobile__search-btn {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.header__search-btn:hover,
.tgmobile__search-btn:hover {
    background: #1B7A47 !important;
}

/* --- Category carousel navigation arrows --- */
.categories__nav button,
.categories-button-prev,
.categories-button-next {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.categories__nav button svg path,
.categories-button-prev svg path,
.categories-button-next svg path {
    stroke: #fff !important;
}

/* --- Active category item --- */
.categories__item a:hover .icon,
.categories__item.active a .icon {
    background: #1B3A2D !important;
}

/* ============================================================
   REVISI — 2026-06-10
   1. Banner → dark green hero
   2. Header nav → brand green
   3. Category section → green icons & title
   4. Section h2.title → brand green (all light-bg sections)
   5. Features icons+text → white
   6. Blog card titles → green
   ============================================================ */

/* --- 1. Banner → dark green hero (SkillCuan Hero design) --- */
.banner-area.banner-bg,
.banner-area {
    background-image: none !important;
    background: #1B3A2D !important;
}
.banner__content h3.title,
.banner__content .title {
    color: #fff !important;
}
.banner__content p {
    color: rgba(255, 255, 255, 0.85) !important;
}
.banner__btn-two .btn.arrow-btn {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}
.banner__btn-two .btn.arrow-btn:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}
.banner__btn-two .play-btn.popup-video {
    color: #2FBF71 !important;
    border-color: #2FBF71 !important;
}
.banner__btn-two .play-btn.popup-video:hover {
    background: #2FBF71 !important;
    color: #fff !important;
}
/* Floating cards on banner */
.banner__images .about__enrolled,
.banner__area .about__enrolled {
    background: #fff !important;
    border-radius: 14px !important;
}
.banner__images .about__enrolled .title,
.banner__images .about__enrolled p {
    color: #111827 !important;
}
.banner__images .about__enrolled .title span {
    color: #1B3A2D !important;
}
.banner__student.instructor {
    background: #fff !important;
    border-radius: 14px !important;
}
.banner__student.instructor .icon {
    background: #E8F5EE !important;
}
.banner__student.instructor .content span {
    color: #6B7280 !important;
}
.banner__student.instructor .content h4.title {
    color: #1B3A2D !important;
}

/* --- 2. Header nav text → brand dark green --- */
.tgmenu__nav .navigation > li > a {
    color: #1B3A2D !important;
}
.tgmenu__nav .navigation > li > a:hover,
.tgmenu__nav .navigation > li.active > a {
    color: #1B7A47 !important;
}
.tgmenu__nav .navigation > li > ul.sub-menu a {
    color: #374151 !important;
}
.tgmenu__nav .navigation > li > ul.sub-menu a:hover {
    color: #1B7A47 !important;
}

/* --- 3. Category section → green title + green icons --- */
.categories-area .section__title h2.title {
    color: #1B3A2D !important;
}
.categories-area .section__title p.desc {
    color: #1B7A47 !important;
}
.categories__item .icon {
    background: #E8F5EE !important;
    border-color: #B8DFC9 !important;
}
.categories__item .icon img {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}
.categories__item a:hover .icon {
    background: #1B7A47 !important;
}
.categories__item a:hover .icon img {
    filter: brightness(0) invert(1) !important;
}
.categories__item .name {
    color: #1B3A2D !important;
}
.categories__item .courses {
    color: #1B7A47 !important;
}

/* --- 4. Section h2.title → brand dark green (all sections) --- */
.section__title h2.title {
    color: #1B3A2D !important;
}
.section__title p.desc {
    color: #1B7A47 !important;
}
/* Instructor-two card titles (Jadilah Instruktur / Jadilah Siswa) */
.instructor__content-two h3.title a {
    color: #1B3A2D !important;
}
.instructor__content-two h3.title a:hover {
    color: #2FBF71 !important;
}
/* Protect dark-bg sections — keep white (higher specificity wins) */
.features__area .section__title h2.title,
.features__area .section__title p {
    color: #fff !important;
}
.newsletter__area .section__title h2.title,
.newsletter__area .section__title p {
    color: #fff !important;
}

/* --- 5. Features icons + content text → white --- */
.features__area .features__icon img {
    filter: brightness(0) invert(1) !important;
}
.features__area .features__content p.title {
    color: #fff !important;
}
.features__area .features__content p {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* --- 6. Blog card titles → brand green --- */
.blog__post-content h3.title,
.blog__post-content h3.title a {
    color: #1B3A2D !important;
}
.blog__post-content h3.title a:hover {
    color: #2FBF71 !important;
}
/* Blog tag pill */
.blog__post-thumb .post-tag {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
}

/* ============================================================
   BATCH 1 — Global Page Overrides (breadcrumb, course-details,
   cart, checkout, instructors, blog, contact, forms, etc.)
   ============================================================ */

/* --- Breadcrumb --- */
.breadcrumb__area {
    background-color: #1B3A2D !important;
    background-image: none !important;
}
.breadcrumb__content h3.title {
    color: #fff !important;
}
.breadcrumb__content nav a {
    color: rgba(255, 255, 255, 0.75) !important;
}
.breadcrumb__content nav a:hover {
    color: #2FBF71 !important;
}
.breadcrumb__content .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* --- Global form inputs (.form-grp) --- */
.form-grp input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.form-grp textarea,
.form-grp select {
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-grp input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus,
.form-grp textarea:focus,
.form-grp select:focus {
    border-color: #1B7A47 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.15) !important;
}

/* --- Global accordion (FAQ, curriculum) --- */
.accordion-button:not(.collapsed) {
    color: #1B3A2D !important;
    background: #E8F5EE !important;
    box-shadow: inset 0 -1px 0 #B8DFC9 !important;
}
.accordion-button:focus {
    border-color: #1B7A47 !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.15) !important;
}
.accordion-button::after {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%);
}

/* --- Global pagination --- */
.pagination__wrap .pagination .page-link {
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    color: #374151 !important;
    margin: 0 3px !important;
    transition: all 0.15s !important;
}
.pagination__wrap .pagination .page-item.active .page-link {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.pagination__wrap .pagination .page-link:hover {
    background: #F0FAF4 !important;
    border-color: #1B3A2D !important;
    color: #1B3A2D !important;
}

/* --- btn-primary override (order success/fail) --- */
.btn.btn-primary,
.btn-primary {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.btn.btn-primary:hover,
.btn-primary:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* ---- Course Details Page ---- */
.courses__details-content .nav-tabs {
    border-bottom-color: #E5E7EB !important;
    gap: 4px;
}
.courses__details-content .nav-tabs .nav-link {
    color: #374151 !important;
    font-weight: 500;
    border-color: transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
}
.courses__details-content .nav-tabs .nav-link:hover {
    color: #1B3A2D !important;
    border-bottom-color: #B8DFC9 !important;
    background: transparent !important;
}
.courses__details-content .nav-tabs .nav-link.active {
    color: #1B3A2D !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #1B3A2D !important;
    background: transparent !important;
}
/* course-item open (free preview) */
.course-item.open-item .item-name {
    color: #1B7A47 !important;
}
/* Rating bars */
.course-rate__details-row .rating {
    background: #2FBF71 !important;
}
.course-rate__details-row-star .fa-star,
.review-author-content .author-rating .fa-star {
    color: #F5A623 !important;
}
/* Sidebar cost box */
.courses__cost-wrap {
    background: #E8F5EE !important;
    border: 1px solid #B8DFC9 !important;
    border-radius: 12px !important;
    padding: 20px !important;
}
.courses__cost-wrap > span {
    color: #1B7A47 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.courses__cost-wrap h2.title {
    color: #1B3A2D !important;
}
.courses__cost-wrap h2.title del {
    color: #9CA3AF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
/* Sidebar info + social headings */
.courses__information-wrap h5.title,
.courses__details-social h5.title {
    color: #1B3A2D !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 8px !important;
}
/* Sidebar icons → green tint */
.courses__information-wrap ul li img.injectable {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}
/* Courses item tag on details page */
.courses__item-meta .courses__item-tag a {
    color: #1B7A47 !important;
    background: #F0FAF4 !important;
    border: 1px solid #B8DFC9 !important;
    border-radius: 100px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ---- Cart Page ---- */
.cart__table thead tr {
    background: #1B3A2D !important;
}
.cart__table thead tr th {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 14px 12px !important;
}
.cart__table tbody tr:hover {
    background: #F0FAF4 !important;
}
.cart__collaterals-wrap {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.cart__collaterals-wrap h2.title {
    color: #1B3A2D !important;
    font-size: 20px !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}
.cart__collaterals-wrap ul.list-wrap li {
    color: #374151 !important;
    border-bottom: 1px solid #F3F4F6 !important;
    padding: 10px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.cart__collaterals-wrap ul.list-wrap li span,
.cart__collaterals-wrap ul.list-wrap li .amount,
.cart__collaterals-wrap ul.list-wrap li .discount-amount {
    color: #1B3A2D !important;
    font-weight: 700 !important;
}
.cart__collaterals-wrap > a.btn {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    border-radius: 8px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    padding: 13px !important;
    font-weight: 600 !important;
    margin-top: 16px !important;
}
.cart__collaterals-wrap > a.btn:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}
/* Coupon form */
.coupon-form input[type="text"] {
    border: 1px solid #D1D5DB !important;
    border-radius: 8px 0 0 8px !important;
    padding: 10px 14px !important;
}
.coupon-form input[type="text"]:focus {
    border-color: #1B7A47 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.15) !important;
}
.coupon-form button.btn {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
    color: #fff !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}
.coupon-form button.btn:hover {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
}

/* ---- Checkout Page ---- */
.wsus__single_payment {
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    display: block !important;
    padding: 12px !important;
    background: #fff !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.wsus__single_payment:hover {
    border-color: #1B7A47 !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.1) !important;
}

/* ---- All Instructors ---- */
.instructor__item {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    margin-bottom: 28px !important;
    border: none !important;
}
.instructor__item:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13) !important;
    transform: translateY(-3px) !important;
}
.instructor__thumb {
    overflow: hidden !important;
}
.instructor__thumb img {
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important;
    transition: transform 0.3s !important;
}
.instructor__item:hover .instructor__thumb img {
    transform: scale(1.04) !important;
}
.instructor__content {
    padding: 18px !important;
}
.instructor__content h2.title,
.instructor__content h2.title a {
    color: #1B3A2D !important;
    font-size: 18px !important;
}
.instructor__content h2.title a:hover {
    color: #1B7A47 !important;
}
.instructor__content .designation {
    color: #1B7A47 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.instructor__content > span:not(.designation) {
    color: #6B7280 !important;
    font-size: 13px !important;
}
.instructor__content .avg-rating {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 4px 0 !important;
}
.instructor__content .avg-rating .fa-star {
    color: #F5A623 !important;
}
.instructor__social ul {
    gap: 8px !important;
}
.instructor__social ul li a {
    background: #E8F5EE !important;
    color: #1B3A2D !important;
    border: 1px solid #B8DFC9 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}
.instructor__social ul li a:hover {
    background: #1B3A2D !important;
    color: #fff !important;
    border-color: #1B3A2D !important;
}

/* ---- Instructor Details Page ---- */
.instructor__details-content h2.title {
    color: #1B3A2D !important;
}
.instructor__details-content .designation {
    color: #1B7A47 !important;
    font-weight: 600 !important;
}
.instructor__details-content .avg-rating .fa-star {
    color: #F5A623 !important;
}
.instructor__details-biography h4.title,
.instructor__details-Skill h4.title {
    color: #1B3A2D !important;
    border-left: 3px solid #2FBF71 !important;
    padding-left: 12px !important;
    margin-bottom: 16px !important;
}
.instructor__details-courses .main-title {
    color: #1B3A2D !important;
}
.instructor__details-courses > .row p {
    color: #6B7280 !important;
}
.instructor__details-nav button {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
}
.instructor__details-nav button:hover {
    background: #1B7A47 !important;
}
/* Instructor sidebar quick-contact */
.instructor__sidebar {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid #E5E7EB !important;
}
.instructor__sidebar h4.title {
    color: #1B3A2D !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
/* Instructor's courses carousel (courses-swiper-active-two) */
.courses-swiper-active-two .courses__item {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    border: none !important;
}
.courses-swiper-active-two .courses__item:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13) !important;
    transform: translateY(-3px) !important;
}

/* ---- Blog Listing ---- */
.blog__post-meta ul li {
    color: #6B7280 !important;
}
.blog__post-meta ul li a {
    color: #1B7A47 !important;
}
.blog__post-meta ul li a:hover {
    color: #1B3A2D !important;
}
/* Blog sidebar */
.blog-widget .widget-title {
    color: #1B3A2D !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 10px !important;
}
.sidebar-search-form input {
    border: 1px solid #D1D5DB !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
}
.sidebar-search-form input:focus {
    border-color: #1B7A47 !important;
    outline: none !important;
}
.sidebar-search-form button {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    border-radius: 0 8px 8px 0 !important;
    transition: background 0.2s !important;
}
.sidebar-search-form button:hover {
    background: #1B7A47 !important;
}
.shop-cat-list ul li a {
    color: #374151 !important;
    transition: color 0.15s !important;
}
.shop-cat-list ul li a:hover {
    color: #1B7A47 !important;
}
.shop-cat-list ul li a i {
    color: #2FBF71 !important;
}
/* Popular posts */
.rc-post-content h4.title a {
    color: #1B3A2D !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.rc-post-content h4.title a:hover {
    color: #1B7A47 !important;
}
.rc-post-content .date {
    color: #6B7280 !important;
    font-size: 12px !important;
}
/* Blog details */
.blog__details-content h3.title {
    color: #1B3A2D !important;
}
.tg-post-tag ul li a {
    border: 1px solid #D1D5DB !important;
    border-radius: 100px !important;
    color: #374151 !important;
    font-size: 12px !important;
    padding: 5px 14px !important;
    transition: all 0.15s !important;
}
.tg-post-tag ul li a:hover {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.tg-post-tag .tag-title {
    color: #1B3A2D !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ---- Contact Page ---- */
.contact-info-wrap ul li .icon {
    background: #E8F5EE !important;
    border: 1px solid #B8DFC9 !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.contact-info-wrap ul li .icon img.injectable {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}
.contact-info-wrap ul li .content h4.title {
    color: #1B3A2D !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
}
.contact-info-wrap ul li .content a {
    color: #1B7A47 !important;
    display: block !important;
    font-size: 14px !important;
}
.contact-info-wrap ul li .content a:hover {
    color: #1B3A2D !important;
}
.contact-form-wrap {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 36px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}
.contact-form-wrap h4.title {
    color: #1B3A2D !important;
    margin-bottom: 6px !important;
}

/* ---- Become Instructor (singUp-wrap) ---- */
.singUp-wrap {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 36px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}
.singUp-wrap h2.title {
    color: #1B3A2D !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 14px !important;
    margin-bottom: 20px !important;
}
.singUp-wrap .form-select {
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}
.singUp-wrap .form-select:focus {
    border-color: #1B7A47 !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.15) !important;
}
.singUp-wrap .form-control {
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}
.singUp-wrap .form-control:focus {
    border-color: #1B7A47 !important;
    box-shadow: 0 0 0 3px rgba(27, 122, 71, 0.15) !important;
}

/* ---- Error / 404 Page ---- */
.error-content h2.title {
    color: #1B3A2D !important;
    font-size: 28px !important;
}
.error-content h2.title span {
    color: #006D39 !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
}
.tg-button-wrap .arrow-btn {
    background: #006D39 !important;
    border-color: #006D39 !important;
}
.tg-button-wrap .arrow-btn:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* ---- Testimonials (about page + shared) ---- */
.testimonial__item {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
    border: none !important;
}
.testimonial__item .rating .fa-star {
    color: #F5A623 !important;
}
.testimonial__author-content h2.title {
    color: #1B3A2D !important;
    font-size: 16px !important;
}
.testimonial__nav button {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    transition: background 0.2s !important;
}
.testimonial__nav button:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* ============================================================
   BATCH 3 — Student/Instructor Dashboard + Wishlist
   ============================================================ */

/* --- Dashboard: profile header --- */
.dashboard__top-wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 32px !important;
    border: 1px solid #E5E7EB !important;
}
.dashboard__instructor-info {
    background: #fff !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.dashboard__instructor-info-left .content h4.title {
    color: #1B3A2D !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.dashboard__instructor-info-left .content ul li {
    color: #6B7280 !important;
    font-size: 13px !important;
}
.dashboard__instructor-info-left .content ul li img.injectable {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
    width: 14px !important;
    margin-right: 5px !important;
}
.dashboard__instructor-info-left .thumb img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    object-fit: cover !important;
}

/* --- Dashboard: sidebar --- */
.dashboard__sidebar-wrap {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    border: 1px solid #E5E7EB !important;
    position: sticky !important;
    top: 90px !important;
}
.dashboard__sidebar-title h6.title {
    color: #9CA3AF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}
.dashboard__sidebar-menu ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s !important;
    text-decoration: none !important;
}
.dashboard__sidebar-menu ul li a img,
.dashboard__sidebar-menu ul li a i {
    width: 18px !important;
    flex-shrink: 0 !important;
    opacity: 0.65 !important;
    font-size: 16px !important;
    color: #6B7280 !important;
}
.dashboard__sidebar-menu ul li a:hover {
    background: #F0FAF4 !important;
    color: #1B3A2D !important;
}
.dashboard__sidebar-menu ul li a:hover img,
.dashboard__sidebar-menu ul li a:hover i {
    opacity: 1 !important;
    color: #1B7A47 !important;
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}
.dashboard__sidebar-menu ul li.active a {
    background: #E8F5EE !important;
    color: #1B3A2D !important;
    font-weight: 600 !important;
}
.dashboard__sidebar-menu ul li.active a img,
.dashboard__sidebar-menu ul li.active a i {
    opacity: 1 !important;
    color: #1B3A2D !important;
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}

/* --- Dashboard: content area --- */
.dashboard__content-wrap {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #E5E7EB !important;
    margin-bottom: 24px !important;
}
.dashboard__content-title h4.title {
    color: #1B3A2D !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #E8F5EE !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

/* --- Dashboard: counter items --- */
.dashboard__counter-item {
    background: #F0FAF4 !important;
    border-radius: 12px !important;
    border: 1px solid #B8DFC9 !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    transition: box-shadow 0.2s !important;
}
.dashboard__counter-item:hover {
    box-shadow: 0 4px 16px rgba(27,122,71,0.1) !important;
}
.dashboard__counter-item .icon {
    width: 52px !important;
    height: 52px !important;
    background: #1B3A2D !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 22px !important;
    color: #fff !important;
}
.dashboard__counter-item .icon img {
    width: 24px !important;
    filter: brightness(0) invert(1) !important;
}
.dashboard__counter-item .icon i {
    color: #fff !important;
}
.dashboard__counter-item .content .count {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1B3A2D !important;
    display: block !important;
}
.dashboard__counter-item .content p {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1B7A47 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* --- Dashboard: review/order tables --- */
.dashboard__review-table table thead tr {
    background: #1B3A2D !important;
}
.dashboard__review-table table thead tr th {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border: none !important;
}
.dashboard__review-table table tbody tr:hover {
    background: #F0FAF4 !important;
}
.dashboard__review-table table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F3F4F6 !important;
    font-size: 14px !important;
    color: #374151 !important;
}

/* --- Wishlist card (courses__item-four) --- */
.courses__item-four {
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    border: none !important;
    margin-bottom: 20px !important;
}
.courses__item-four:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
    transform: translateY(-3px) !important;
}
.courses__item-thumb-three {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    display: block !important;
}
.courses__item-thumb-three img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s !important;
}
.courses__item-four:hover .courses__item-thumb-three img {
    transform: scale(1.04) !important;
}
.courses__price {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: #1B3A2D !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.courses__item-content-three {
    padding: 14px 16px !important;
}
.courses__item-content-three h2.title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 6px 0 !important;
    line-height: 1.45 !important;
}
.courses__item-content-three h2.title a {
    color: inherit !important;
    text-decoration: none !important;
}
.courses__item-content-three h2.title a:hover {
    color: #1B7A47 !important;
}
.courses__item-content-three .courses__item-tag a {
    color: #1B7A47 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.courses__item-content-three .courses__review .rating .fa-star {
    color: #F5A623 !important;
    font-size: 12px !important;
}
.courses__item-content-three .courses__review span {
    color: #6B7280 !important;
    font-size: 12px !important;
}
.courses__item-bottom-three ul li {
    color: #6B7280 !important;
    font-size: 12px !important;
}
.courses__item-bottom-three ul li i {
    color: #2FBF71 !important;
    margin-right: 4px !important;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .sfc-hero-title {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    .sfc-ecourse-hero {
        padding: 40px 0 28px;
    }

    .sfc-hero-title {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .sfc-hero-desc {
        font-size: 14px;
    }

    .sfc-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sfc-sort-select {
        width: 100%;
    }

    .sfc-pills-wrap {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .sfc-ls-thumb {
        height: 160px;
    }

    .sfc-courses-bg,
    .sfc-courses-main {
        padding: 24px 0 48px;
    }

    .sfc-pill {
        flex-shrink: 0;
    }
}


/* ============================================================
   HOMEPAGE v5.0 — React Design Match
   Prefix: sfc-v2-*
   ============================================================ */

/* ---- Shared eyebrow ---- */
.sfc-v2-ey {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfc-v2-ey__line {
    width: 28px;
    height: 2px;
    background: #18A167;
    flex-shrink: 0;
}
.sfc-v2-ey__label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #18A167;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 16px;
}
/* ---- Shared separator ---- */
.sfc-v2-sep {
    width: calc(100% - 240px);
    margin: 0 auto;
    height: 1px;
    background: #D6D3CC;
    flex-shrink: 0;
}

/* ============================================================
   WHY SECTION
   ============================================================ */
.sfc-v2-why {
    background: #F5F4F2;
    padding-top: 80px;
}
.sfc-v2-why__hdr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 80px 64px;
    gap: 40px;
}
.sfc-v2-why__hdr-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sfc-v2-why__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sfc-v2-why__title-light {
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 64px;
    letter-spacing: -0.02em;
    display: block;
}
.sfc-v2-why__title-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: #18A167;
    line-height: 64px;
    letter-spacing: -0.02em;
    display: block;
}
.sfc-v2-why__hdr-right {
    max-width: 340px;
    flex-shrink: 0;
    padding-bottom: 6px;
}
.sfc-v2-why__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #6B6B65;
    margin: 0;
}
.sfc-v2-why__cols {
    display: flex;
    padding-bottom: 80px;
}
.sfc-v2-why__col {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sfc-v2-why__col--l1 {
    padding: 56px 56px 56px 80px;
}
.sfc-v2-why__col--l3 {
    padding: 56px 80px 56px 56px;
}
.sfc-v2-why__col--dark {
    background: #0D3D24;
    padding: 56px;
    position: relative;
    overflow: hidden;
}
.sfc-v2-why__col--br {
    border-right: 1px solid #D6D3CC;
}
.sfc-v2-why__col--dark.sfc-v2-why__col--br {
    border-right-color: rgba(255,255,255,0.1);
}
.sfc-v2-why__col-deco {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(24,161,103,0.15);
    pointer-events: none;
}
.sfc-v2-why__top {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.sfc-v2-why__icon-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.sfc-v2-why__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-v2-why__icon--dk { background: rgba(24,161,103,0.25); }
.sfc-v2-why__num {
    font-family: 'Poppins', sans-serif;
    font-size: 80px;
    font-weight: 900;
    color: #E8E5DD;
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
}
.sfc-v2-why__num--dk { color: rgba(255,255,255,0.08); }
.sfc-v2-why__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sfc-v2-why__card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 32px;
    margin: 0;
}
.sfc-v2-why__card-title--dk { color: #fff; }
.sfc-v2-why__card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #6B6B65;
    line-height: 26px;
    margin: 0;
}
.sfc-v2-why__card-desc--dk { color: rgba(255,255,255,0.65); }
.sfc-v2-why__link {
    display: flex;
    align-items: center;
    padding-top: 40px;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #18A167 !important;
    text-decoration: none !important;
}
.sfc-v2-why__link:hover { opacity: 0.8; }

/* ============================================================
   PROGRAM UNGGULAN SECTION
   ============================================================ */
.sfc-v2-ung {
    background: #F5F4F2;
    position: relative;
    overflow: hidden;
}
.sfc-v2-ung__hdr {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 80px 80px 64px;
    gap: 20px;
}
.sfc-v2-ung__titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sfc-v2-ung__title-light {
    font-family: 'Poppins', sans-serif;
    font-size: 52px;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 60px;
    letter-spacing: -0.02em;
    text-align: center;
}
.sfc-v2-ung__title-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 52px;
    font-weight: 900;
    color: #18A167;
    line-height: 60px;
    letter-spacing: -0.02em;
    text-align: center;
}
.sfc-v2-ung__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 28px;
    color: #6B6B65;
    text-align: center;
    max-width: 620px;
    margin: 0;
}
.sfc-v2-ung__grid {
    display: flex;
    flex-direction: column;
    padding: 0 80px;
    gap: 20px;
}
.sfc-v2-ung__row {
    display: flex;
    gap: 20px;
}
.sfc-v2-ung__card {
    flex: 1 1 0%;
    min-height: 240px;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
.sfc-v2-ung__card--light { background: #fff; }
.sfc-v2-ung__card--dark {
    background: #0D3D24;
    position: relative;
    overflow: hidden;
}
.sfc-v2-ung__card-deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(24,161,103,0.12);
    pointer-events: none;
}
.sfc-v2-ung__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}
.sfc-v2-ung__card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-v2-ung__card-icon--dk { background: rgba(24,161,103,0.25); }
.sfc-v2-ung__card-counter {
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #F0EDE5;
    user-select: none;
}
.sfc-v2-ung__card-counter--dk { color: rgba(255,255,255,0.07); }
.sfc-v2-ung__card-comm-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-v2-ung__card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #E8F5EE;
    border-radius: 20px;
    padding: 5px 12px;
}
.sfc-v2-ung__card-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #18A167;
    flex-shrink: 0;
}
.sfc-v2-ung__card-badge-text {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #18A167;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 14px;
}
.sfc-v2-ung__card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.sfc-v2-ung__card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 28px;
    margin: 0;
}
.sfc-v2-ung__card-title--dk { color: #fff; }
.sfc-v2-ung__card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #6B6B65;
    line-height: 24px;
    margin: 0;
}
.sfc-v2-ung__card-desc--dk { color: rgba(255,255,255,0.6); }
.sfc-v2-ung__cta {
    display: flex;
    justify-content: center;
    padding: 48px 0 80px;
}
.sfc-v2-ung__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #195C40;
    border-radius: 100px;
    padding: 16px 36px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    transition: background .2s;
}
.sfc-v2-ung__cta-btn:hover { background: #18A167; }

/* ============================================================
   PROGRAMS SECTION
   ============================================================ */
.sfc-v2-prg {
    background: #F0EDE5;
    position: relative;
    overflow: hidden;
}
.sfc-v2-prg__hdr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 80px 80px 56px;
    position: relative;
}
.sfc-v2-prg__hdr-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sfc-v2-prg__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sfc-v2-prg__title-light {
    font-family: 'Poppins', sans-serif;
    font-size: 54px;
    font-weight: 300;
    color: #0D3D24;
    line-height: 62px;
    letter-spacing: -0.02em;
}
.sfc-v2-prg__title-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 54px;
    font-weight: 900;
    color: #18A167;
    line-height: 62px;
    letter-spacing: -0.02em;
}
.sfc-v2-prg__hdr-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 8px;
    gap: 6px;
}
.sfc-v2-prg__counter-num {
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    font-weight: 900;
    color: #0D3D24;
    line-height: 1;
    letter-spacing: -0.04em;
}
.sfc-v2-prg__counter-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #16A167;
    letter-spacing: 0.01em;
    line-height: 18px;
}
.sfc-v2-prg__sep {
    width: calc(100% - 240px);
    margin: 0 auto 48px;
    height: 1px;
    background: #D6D3CC;
}
.sfc-v2-prg__cards {
    display: flex;
    gap: 16px;
    padding: 0 80px 80px;
}
.sfc-v2-prg__card {
    flex: 1 1 0%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}
.sfc-v2-prg__card-thumb {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.sfc-v2-prg__card-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.sfc-v2-prg__card-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sfc-v2-prg__card-body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.sfc-v2-prg__card-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sfc-v2-prg__card-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #9B9B95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 14px;
}
.sfc-v2-prg__card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 26px;
    margin: 0;
}
.sfc-v2-prg__card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6B6B65;
    line-height: 21px;
    margin: 0;
}
.sfc-v2-prg__card-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 12px 18px;
    border: 1.5px solid #0D3D24;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0D3D24 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.sfc-v2-prg__card-btn:hover {
    background: #0D3D24;
    color: #fff !important;
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.sfc-v2-testi {
    background: #F5F4F2;
}
.sfc-v2-testi__hdr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 80px 64px;
    gap: 20px;
    width: 100%;
}
.sfc-v2-testi__titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.sfc-v2-testi__t1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.sfc-v2-testi__t2 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}
.sfc-v2-testi__word {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 58px;
    letter-spacing: -0.02em;
    text-align: center;
}
.sfc-v2-testi__word--bold {
    font-weight: 900;
    color: #16A167;
}
.sfc-v2-testi__alumni-pill {
    display: inline-block;
    background: #18A167;
    border-radius: 8px;
    padding: 0 16px;
}
.sfc-v2-testi__alumni-pill span {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    line-height: 58px;
    letter-spacing: -0.02em;
}
.sfc-v2-testi__meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 100px;
    padding: 10px 20px;
    border: 1px solid rgba(0,0,0,0.07);
}
.sfc-v2-testi__avs {
    display: flex;
}
.sfc-v2-testi__av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #F0EDE5;
    flex-shrink: 0;
}
.sfc-v2-testi__av:not(:first-child) { margin-left: -8px; }
.sfc-v2-testi__meta-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 16px;
}
.sfc-v2-testi__meta-sep {
    width: 1px;
    height: 14px;
    background: #D6D3CC;
    flex-shrink: 0;
}
.sfc-v2-testi__stars {
    font-size: 13px;
    color: #F5A623;
    line-height: 16px;
}
.sfc-v2-testi__rating-num {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 16px;
}
.sfc-v2-testi__rating-denom {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #9B9B95;
    line-height: 16px;
}
.sfc-v2-testi__cards {
    display: flex;
    gap: 20px;
    padding: 0 80px 80px;
}
.sfc-v2-testi__card {
    flex: 1 1 0%;
    border-radius: 20px;
    padding: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
}
.sfc-v2-testi__card--light {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
}
.sfc-v2-testi__card--dark { background: #0D3D24; }
.sfc-v2-testi__card-bq {
    position: absolute;
    top: -10px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    color: #F5F3EF;
    pointer-events: none;
    user-select: none;
}
.sfc-v2-testi__card-bq--dk { color: rgba(255,255,255,0.04); }
.sfc-v2-testi__card-qi {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.sfc-v2-testi__card-qi--dk { background: rgba(24,161,103,0.25); }
.sfc-v2-testi__card-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: italic;
    color: #1A1A1A;
    line-height: 28px;
    flex: 1;
    position: relative;
    margin: 0;
}
.sfc-v2-testi__card-text--dk { color: rgba(255,255,255,0.88); }
.sfc-v2-testi__card-sep {
    height: 1px;
    background: #EDEDEA;
    flex-shrink: 0;
    position: relative;
}
.sfc-v2-testi__card-sep--dk { background: rgba(255,255,255,0.1); }
.sfc-v2-testi__card-author {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.sfc-v2-testi__card-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #D4C9B8 0%, #B8AA95 100%);
    overflow: hidden;
}
.sfc-v2-testi__card-av--dk { background: rgba(24,161,103,0.25); }
.sfc-v2-testi__card-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sfc-v2-testi__card-name {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 18px;
    display: block;
}
.sfc-v2-testi__card-name--dk { color: #fff; }
.sfc-v2-testi__card-role {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9B9B95;
    letter-spacing: 0.02em;
    display: block;
    line-height: 16px;
    margin-top: 2px;
}
.sfc-v2-testi__card-role--dk { color: rgba(255,255,255,0.45); }
.sfc-v2-testi__card-stars {
    margin-left: auto;
    font-size: 13px;
    color: #F5A623;
    line-height: 16px;
    flex-shrink: 0;
}

/* ============================================================
   CTA + FORM SECTION
   ============================================================ */
.sfc-v2-cta {
    background: #F5F4F2;
    display: flex;
}
/* Neutralize theme's negative margin-top on footer that causes overlap */
.footer__area {
    margin-top: 0 !important;
}
/* Keep breadcrumb behind sticky header so nav links remain clickable */
.breadcrumb__area {
    position: relative;
    z-index: 0;
}
/* Breadcrumb decorative shapes: convert purple accent to white */
.breadcrumb__shape-wrap img {
    filter: brightness(0) invert(1);
}
.sfc-v2-cta__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px 80px 80px;
    gap: 40px;
    flex: 0 0 auto;
    width: 50%;
}
.sfc-v2-cta__text-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sfc-v2-cta__title-group {
    display: flex;
    flex-direction: column;
}
.sfc-v2-cta__title-line1 {
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 54px;
    letter-spacing: -0.02em;
    display: block;
}
.sfc-v2-cta__title-row2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}
.sfc-v2-cta__title-jadi,
.sfc-v2-cta__title-rest {
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 54px;
    letter-spacing: -0.02em;
}
.sfc-v2-cta__title-cuan {
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: #18A167;
    line-height: 54px;
    letter-spacing: -0.02em;
}
.sfc-v2-cta__desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #6B6B65;
    line-height: 27px;
    max-width: 480px;
    margin: 0;
}
.sfc-v2-cta__stats {
    display: flex;
    align-items: center;
}
.sfc-v2-cta__stat {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sfc-v2-cta__stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfc-v2-cta__stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfc-v2-cta__stat-num {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #1A1A1A;
    line-height: 34px;
    letter-spacing: -0.02em;
}
.sfc-v2-cta__stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6B6B65;
    line-height: 16px;
    padding-left: 2px;
}
.sfc-v2-cta__stat-sep {
    width: 1px;
    height: 48px;
    background: #D6D3CC;
    flex-shrink: 0;
    margin: 0 24px;
}
.sfc-v2-cta__photos {
    display: flex;
    align-items: flex-end;
    height: 200px;
    gap: 10px;
    flex-shrink: 0;
}
.sfc-v2-cta__photo {
    flex-shrink: 0;
    width: 100px;
    border-radius: 10px;
    padding: 6px 6px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #fff;
    transform-origin: center;
}
.sfc-v2-cta__photo--lg {
    width: 124px;
    border-radius: 12px;
    padding: 7px 7px 24px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.sfc-v2-cta__photo-inner {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 115px;
}
.sfc-v2-cta__photo--lg .sfc-v2-cta__photo-inner {
    border-radius: 8px;
    height: 145px;
}
.sfc-v2-cta__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 120px 48px 40px;
    background: #C5B9A5;
    border-radius: 20px 0 0 20px;
}
.sfc-v2-cta__form-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
}
.sfc-v2-cta__form-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 28px;
    margin: 0;
}
.sfc-v2-cta__form-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #9B9B95;
    line-height: 16px;
    margin: 4px 0 0;
}
.sfc-v2-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sfc-v2-cta__field { display: flex; flex-direction: column; gap: 6px; }
.sfc-v2-cta__field-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #4A4A45;
    letter-spacing: 0.02em;
    line-height: 16px;
}
.sfc-v2-cta__field-wrap {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    border: 1.5px solid #E8E5DD;
    background: #F8F7F5;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.sfc-v2-cta__field-wrap:focus-within {
    border-color: #18A167;
    box-shadow: 0 0 0 3px rgba(24,161,103,0.1);
}
.sfc-v2-cta__field-wrap input,
.sfc-v2-cta__field-wrap select {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1A1A1A;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sfc-v2-cta__field-wrap input::placeholder { color: #BCBCB8; }
.sfc-v2-cta__field-wrap select { cursor: pointer; }
.sfc-v2-cta__field-wrap select option { color: #1A1A1A; }
.sfc-v2-cta__phone-prefix {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #F0EDE8;
    border-right: 1.5px solid #E8E5DD;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4A4A45;
}
.sfc-v2-cta__select-arrow {
    padding: 0 12px;
    display: flex;
    align-items: center;
    pointer-events: none;
    flex-shrink: 0;
}
.sfc-v2-cta__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #0D3D24;
    border: none;
    border-radius: 12px;
    padding: 15px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}
.sfc-v2-cta__submit:hover { background: #18A167; }
.sfc-v2-cta__privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sfc-v2-cta__privacy-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9B9B95;
    line-height: 16px;
}

/* ============================================================
   RESPONSIVE — sfc-v2-*
   ============================================================ */
@media (max-width: 1199px) {
    .sfc-v2-why__hdr { padding: 0 40px 40px; }
    .sfc-v2-why__title-light, .sfc-v2-why__title-bold { font-size: 40px; line-height: 50px; }
    .sfc-v2-why__col--l1 { padding: 40px; }
    .sfc-v2-why__col--l3 { padding: 40px; }
    .sfc-v2-why__col--dark { padding: 40px; }
    .sfc-v2-ung__hdr { padding: 60px 40px 40px; }
    .sfc-v2-ung__title-light, .sfc-v2-ung__title-bold { font-size: 38px; line-height: 46px; }
    .sfc-v2-ung__grid { padding: 0 40px; }
    .sfc-v2-prg__hdr { padding: 60px 40px 40px; }
    .sfc-v2-prg__title-light, .sfc-v2-prg__title-bold { font-size: 40px; line-height: 48px; }
    .sfc-v2-prg__sep { width: calc(100% - 80px); }
    .sfc-v2-prg__cards { padding: 0 40px 60px; }
    .sfc-v2-testi__hdr { padding: 60px 40px 40px; }
    .sfc-v2-testi__word, .sfc-v2-testi__alumni-pill span { font-size: 36px; line-height: 44px; }
    .sfc-v2-testi__cards { padding: 0 40px 60px; }
    .sfc-v2-cta__left { width: 50%; padding: 60px 40px 60px 40px; }
    .sfc-v2-cta__title-line1, .sfc-v2-cta__title-jadi, .sfc-v2-cta__title-cuan, .sfc-v2-cta__title-rest { font-size: 34px; line-height: 44px; }
    .sfc-v2-cta__right { padding: 48px 60px 48px 40px; }
}
@media (max-width: 991px) {
    .sfc-v2-why__hdr { flex-direction: column; padding: 0 32px 32px; }
    .sfc-v2-why__hdr-right { max-width: 100%; }
    .sfc-v2-why__title-light, .sfc-v2-why__title-bold { font-size: 34px; line-height: 42px; }
    .sfc-v2-why__cols { flex-direction: column; }
    .sfc-v2-why__col--l1, .sfc-v2-why__col--l3 { padding: 36px 32px; }
    .sfc-v2-why__col--dark { padding: 36px 32px; }
    .sfc-v2-why__col--br { border-right: none; border-bottom: 1px solid #D6D3CC; }
    .sfc-v2-why__col--dark.sfc-v2-why__col--br { border-bottom-color: rgba(255,255,255,0.1); }
    .sfc-v2-why__num { font-size: 60px; }
    .sfc-v2-sep { width: calc(100% - 80px); }
    .sfc-v2-ung__row { flex-direction: column; }
    .sfc-v2-ung__card { min-height: auto; }
    .sfc-v2-ung__card-counter { font-size: 48px; }
    .sfc-v2-prg__hdr { flex-direction: column; align-items: flex-start; }
    .sfc-v2-prg__sep { width: calc(100% - 64px); }
    .sfc-v2-prg__cards { flex-direction: column; padding: 0 32px 60px; }
    .sfc-v2-prg__card-thumb { height: 160px; }
    .sfc-v2-testi__cards { flex-direction: column; padding: 0 32px 60px; }
    .sfc-v2-testi__word, .sfc-v2-testi__alumni-pill span { font-size: 32px; line-height: 40px; }
    .sfc-v2-cta { flex-direction: column; }
    .sfc-v2-cta__left { width: 100%; padding: 56px 32px; }
    .sfc-v2-cta__photos { display: none; }
    .sfc-v2-cta__right { padding: 40px 32px; border-radius: 20px; }
}
@media (max-width: 767px) {
    .sfc-v2-why__hdr { padding: 0 20px 28px; }
    .sfc-v2-why__title-light, .sfc-v2-why__title-bold { font-size: 28px; line-height: 36px; }
    .sfc-v2-why__col--l1, .sfc-v2-why__col--l3, .sfc-v2-why__col--dark { padding: 28px 20px; }
    .sfc-v2-why { padding-top: 48px; }
    .sfc-v2-why__num { font-size: 52px; }
    .sfc-v2-ung__hdr { padding: 48px 20px 32px; }
    .sfc-v2-ung__title-light, .sfc-v2-ung__title-bold { font-size: 28px; line-height: 36px; }
    .sfc-v2-ung__grid { padding: 0 20px; }
    .sfc-v2-ung__card { padding: 24px; }
    .sfc-v2-ung__cta { padding: 32px 0 48px; }
    .sfc-v2-prg__hdr { padding: 48px 20px 32px; }
    .sfc-v2-prg__title-light, .sfc-v2-prg__title-bold { font-size: 28px; line-height: 36px; }
    .sfc-v2-prg__counter-num { font-size: 44px; }
    .sfc-v2-prg__sep { width: calc(100% - 40px); }
    .sfc-v2-prg__cards { padding: 0 20px 48px; }
    .sfc-v2-testi__hdr { padding: 48px 20px 32px; }
    .sfc-v2-testi__word, .sfc-v2-testi__alumni-pill span { font-size: 26px; line-height: 34px; }
    .sfc-v2-testi__cards { padding: 0 20px 48px; }
    .sfc-v2-cta__left { padding: 48px 20px; }
    .sfc-v2-cta__right { padding: 32px 20px; }
    .sfc-v2-cta__form-card { padding: 28px 20px; }
    .sfc-v2-cta__title-line1, .sfc-v2-cta__title-jadi, .sfc-v2-cta__title-cuan, .sfc-v2-cta__title-rest { font-size: 28px; line-height: 38px; }
}


/* ============================================================
   BOOTCAMP PAGE
   ============================================================ */

/* ---- Hero ---- */
.sfc-bc-hero {
    padding: 56px 0 40px;
    background: #fff;
    text-align: center;
}
.sfc-bc-hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.sfc-bc-btn-solid {
    display: inline-flex;
    align-items: center;
    background: #1B3A2D;
    color: #fff;
    border-radius: 100px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.sfc-bc-btn-solid:hover { background: #0f261d; color: #fff; transform: translateY(-1px); }
.sfc-bc-btn-outline {
    display: inline-flex;
    align-items: center;
    border: 2px solid #1B3A2D;
    color: #1B3A2D;
    border-radius: 100px;
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s;
}
.sfc-bc-btn-outline:hover { background: #1B3A2D; color: #fff; }

/* ---- Feature Cards ---- */
.sfc-bc-features {
    background: #fff;
    padding: 48px 0 56px;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}
.sfc-bc-feat-card {
    text-align: center;
    padding: 32px 24px;
    height: 100%;
}
.sfc-bc-feat-icon {
    width: 56px;
    height: 56px;
    background: #E8F5EE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #1B7A47;
    margin: 0 auto 16px;
}
.sfc-bc-feat-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
.sfc-bc-feat-desc {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
    margin: 0;
}

/* ---- Listing Section ---- */
.sfc-bc-section {
    background: #F3F4F6;
    padding: 28px 0 80px;
}
.sfc-bc-section-title {
    font-size: 36px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}
.sfc-bc-section-desc {
    font-size: 15px;
    color: #6B7280;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- Bootcamp Card ---- */
.sfc-bc-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #E5E7EB;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.sfc-bc-card:hover {
    box-shadow: 0 8px 32px rgba(27,58,45,.10);
    border-color: #C9DDD4;
}
.sfc-bc-card--featured {
    border: 2px solid #F5A623;
    background: #FFFDF7;
}

/* ---- Card Top: status badge + featured tag ---- */
.sfc-bc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
}
.sfc-bc-status-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 100px;
    padding: 4px 12px;
}
.sfc-bc-badge--open     { background: #D1FAE5; color: #065F46; }
.sfc-bc-badge--coming   { background: #DBEAFE; color: #1E40AF; }
.sfc-bc-badge--ongoing  { background: #FEF3C7; color: #92400E; }
.sfc-bc-badge--closed   { background: #F3F4F6; color: #6B7280; }
.sfc-bc-feat-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #F5A623;
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* ---- Card Body ---- */
.sfc-bc-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.3;
}
.sfc-bc-card-desc {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
    margin-bottom: 16px;
}
.sfc-bc-meta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sfc-bc-meta-list li {
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.sfc-bc-meta-list li i {
    color: #1B7A47;
    font-size: 12px;
    width: 14px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}
.sfc-bc-availability {
    color: #B45309 !important;
    font-weight: 600;
}
.sfc-bc-availability i { color: #F59E0B !important; }

/* ---- Skill Tags ---- */
.sfc-bc-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.sfc-bc-skill-tag {
    font-size: 11px;
    color: #374151;
    background: #F3F4F6;
    border-radius: 100px;
    padding: 3px 10px;
    border: 1px solid #E5E7EB;
}

/* ---- Divider ---- */
.sfc-bc-divider {
    border-color: #E5E7EB;
    margin: 16px 0;
}

/* ---- Price Section ---- */
.sfc-bc-price-section {
    margin-bottom: 16px;
}
.sfc-bc-price-old {
    font-size: 12px;
    color: #9CA3AF;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}
.sfc-bc-price {
    font-size: 22px;
    font-weight: 800;
    color: #1B3A2D;
    display: block;
    line-height: 1.2;
}
.sfc-bc-price-note {
    font-size: 11px;
    color: #9CA3AF;
    display: block;
    margin-top: 4px;
}

/* ---- CTA Button ---- */
.sfc-bc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 100px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: auto;
    text-align: center;
}
.sfc-bc-cta-solid {
    background: #1B3A2D;
    color: #fff;
    border: 2px solid #1B3A2D;
}
.sfc-bc-cta-solid:hover { background: #0f261d; border-color: #0f261d; color: #fff; transform: translateY(-1px); }
.sfc-bc-cta-outline {
    background: transparent;
    color: #1B3A2D;
    border: 2px solid #1B3A2D;
}
.sfc-bc-cta-outline:hover { background: #1B3A2D; color: #fff; }
.sfc-bc-cta-disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    border: 2px solid #E5E7EB;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---- CTA Row (listing card: cart icon + main button) ---- */
.sfc-bc-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.sfc-bc-cta-row .sfc-bc-cta-btn {
    flex: 1;
    width: auto;
    margin-top: 0;
}
.sfc-bc-cart-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 100px;
    border: 2px solid #1B3A2D;
    background: #1B3A2D;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.sfc-bc-cart-icon-btn:hover,
.sfc-bc-cart-icon-btn.in-cart {
    background: transparent;
    color: #1B3A2D;
}

/* ---- Empty State ---- */
.sfc-bc-empty {
    text-align: center;
    padding: 60px 20px;
}
.sfc-bc-empty i {
    font-size: 48px;
    color: #D1FAE5;
    display: block;
    margin-bottom: 16px;
}
.sfc-bc-empty p {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.sfc-bc-empty small { font-size: 13px; color: #6B7280; }

/* ---- Bootcamp Responsive ---- */
@media (max-width: 991px) {
    .sfc-bc-section-title { font-size: 28px; }
}
@media (max-width: 767px) {
    .sfc-bc-hero { padding: 40px 0 28px; }
    .sfc-bc-hero-btns { flex-direction: column; }
    .sfc-bc-hero-btns a { width: 100%; justify-content: center; }
    .sfc-bc-section-title { font-size: 24px; }
    .sfc-bc-card { padding: 18px; }
}

/* ================================================================
   BOOTCAMP DETAIL PAGE — sfc-bcd-*
   ================================================================ */

/* Hero */
.sfc-bcd-hero {
    background: #1B3A2D;
    color: #fff;
    padding: 56px 0 48px;
}
.sfc-bcd-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 12px 0 10px;
    line-height: 1.2;
}
.sfc-bcd-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,.75);
    margin-bottom: 16px;
}
.sfc-bcd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: rgba(255,255,255,.8);
}
.sfc-bcd-hero-meta i { margin-right: 4px; }

/* Tabs */
.sfc-bcd-tabs { border-bottom: 2px solid #E5E7EB; margin-bottom: 0; }
.sfc-bcd-tabs .nav-link {
    color: #6B7280;
    font-weight: 500;
    font-size: 15px;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    margin-bottom: -2px;
}
.sfc-bcd-tabs .nav-link.active {
    color: #1B3A2D;
    border-bottom-color: #1B3A2D;
    background: transparent;
}
.sfc-bcd-tab-count {
    background: #F3F4F6;
    color: #6B7280;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: 4px;
}
.sfc-bcd-tab-content { padding: 28px 0; }
.sfc-bcd-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

/* Overview */
.sfc-bcd-description {
    font-size: 15px;
    color: #374151;
    line-height: 1.7;
    margin-bottom: 12px;
}
.sfc-bcd-skill-item {
    font-size: 14px;
    color: #374151;
    padding: 6px 0;
}

/* Accordion Kurikulum */
.sfc-bcd-acc-item {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.sfc-bcd-acc-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #F9FAFB;
    border: none;
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
}
.sfc-bcd-acc-btn:not(.collapsed) { background: #ECFDF5; }
.sfc-bcd-acc-title { font-weight: 600; color: #111827; font-size: 14px; }
.sfc-bcd-acc-meta { font-size: 12px; color: #9CA3AF; white-space: nowrap; margin-left: 12px; }
.sfc-bcd-lesson-list { list-style: none; padding: 0; margin: 0; }
.sfc-bcd-lesson-item {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid #F3F4F6;
    font-size: 14px;
}
.sfc-bcd-lesson-icon { width: 22px; flex-shrink: 0; }
.sfc-bcd-lesson-title { flex: 1; color: #374151; }
.sfc-bcd-lesson-duration { font-size: 12px; color: #9CA3AF; margin-left: 8px; }
.sfc-bcd-lesson--free .sfc-bcd-lesson-title { color: #1B7A47; font-weight: 500; }

/* Curriculum stats bar */
.sfc-bcd-curriculum-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 18px;
    background: #F9FAFB;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #374151;
}
.sfc-bcd-curriculum-stats span { display: flex; align-items: center; gap: 5px; }

/* Requirements list */
.sfc-bcd-req-list { list-style: none; padding: 0; margin: 0; }
.sfc-bcd-req-list li { padding: 6px 0; font-size: 15px; color: #374151; }

/* Mentor */
.sfc-bcd-mentor-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: #F9FAFB;
    border-radius: 12px;
}
.sfc-bcd-mentor-avatar i { font-size: 72px; color: #D1D5DB; }
.sfc-bcd-mentor-info h5 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }

/* Mentor social links */
.sfc-bcd-mentor-socials { display: flex; gap: 12px; margin-top: 8px; }
.sfc-bcd-mentor-socials a {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: #E5E7EB; color: #374151;
    font-size: 15px; text-decoration: none; transition: all 0.2s;
}
.sfc-bcd-mentor-socials a:hover { background: #1B3A2D; color: #fff; }

/* Mentor stats row */
.sfc-bcd-mentor-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: #F9FAFB;
    border-radius: 10px;
    margin-top: 16px;
}
.sfc-bcd-mentor-stat-item { text-align: center; }
.sfc-bcd-mentor-stat-num { display: block; font-size: 24px; font-weight: 700; color: #1B3A2D; }
.sfc-bcd-mentor-stat-label { font-size: 12px; color: #9CA3AF; }

/* Review Summary */
.sfc-bcd-rating-summary {
    display: flex;
    gap: 32px;
    background: #F9FAFB;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.sfc-bcd-rating-score { text-align: center; min-width: 80px; }
.sfc-bcd-rating-big { font-size: 48px; font-weight: 700; color: #1B3A2D; line-height: 1; }
.sfc-bcd-stars { margin: 6px 0 4px; }
.sfc-bcd-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.sfc-bcd-rating-row { display: flex; align-items: center; gap: 8px; }
.sfc-bcd-rating-label { font-size: 12px; color: #6B7280; width: 30px; text-align: right; white-space: nowrap; }
.sfc-bcd-rating-bar-wrap { flex: 1; background: #E5E7EB; border-radius: 4px; height: 8px; }
.sfc-bcd-rating-bar { height: 8px; background: #F5A623; border-radius: 4px; transition: width .3s; }
.sfc-bcd-rating-count { font-size: 12px; color: #9CA3AF; width: 20px; }

/* Review Cards */
.sfc-bcd-review-card {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.sfc-bcd-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sfc-bcd-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #1B3A2D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.sfc-bcd-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfc-bcd-review-meta { flex: 1; }
.sfc-bcd-review-meta strong { display: block; font-size: 14px; color: #111827; }
.sfc-bcd-review-stars i { font-size: 12px; }
.sfc-bcd-review-date { font-size: 12px; color: #9CA3AF; white-space: nowrap; }

/* Shopee-style detail rows */
.sfc-bcd-review-details { margin-bottom: 10px; }
.sfc-bcd-review-detail-row { display: flex; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.sfc-bcd-detail-label { color: #9CA3AF; white-space: nowrap; }
.sfc-bcd-detail-value { color: #374151; font-weight: 500; }
.sfc-bcd-review-body { font-size: 14px; color: #374151; line-height: 1.6; margin: 8px 0; }
.sfc-bcd-review-footer { display: flex; align-items: center; gap: 16px; }
.sfc-bcd-helpful { font-size: 13px; color: #6B7280; cursor: pointer; }
.sfc-bcd-helpful:hover { color: #1B7A47; }

/* Sidebar */
.sfc-bcd-sidebar { position: sticky; top: 80px; }
.sfc-bcd-price-box {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 0;
}
.sfc-bcd-price-old {
    font-size: 14px;
    color: #9CA3AF;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}
.sfc-bcd-price-main {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
.sfc-bcd-includes {
    list-style: none;
    padding: 16px 20px;
    margin: 0;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 14px 14px;
}
.sfc-bcd-includes li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    padding: 7px 0;
    border-bottom: 1px solid #F3F4F6;
}
.sfc-bcd-includes li:last-child { border-bottom: none; }
.sfc-bcd-includes i { color: #1B7A47; width: 16px; }

/* ================================================================
   BOOTCAMP LEARNING INTERFACE — sfc-learn-*
   ================================================================ */

/* Top Bar */
.sfc-learn-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #1B3A2D;
    padding: 10px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.sfc-learn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.sfc-learn-back:hover { color: #2FBF71; text-decoration: none; }
.sfc-learn-progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sfc-learn-progress-bar {
    flex: 1;
    background: rgba(255,255,255,.2);
    border-radius: 4px;
    height: 6px;
}
.sfc-learn-progress-fill {
    background: #2FBF71;
    height: 6px;
    border-radius: 4px;
    transition: width .5s ease;
}
.sfc-learn-progress-text {
    font-size: 12px;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

/* 2-Panel Layout */
.sfc-learn-layout {
    display: flex;
    height: calc(100vh - 46px);
    overflow: hidden;
}
.sfc-learn-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.sfc-learn-video-wrap {
    background: #111827;
    max-height: 56vh;
}
.sfc-learn-no-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: #9CA3AF;
    font-size: 14px;
    gap: 12px;
}
.sfc-learn-no-video i { font-size: 36px; }
.sfc-learn-content { flex: 1; overflow-y: auto; padding: 24px 32px; }
.sfc-learn-lesson-header { margin-bottom: 16px; }
.sfc-learn-lesson-section { font-size: 12px; color: #9CA3AF; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.sfc-learn-lesson-title { font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.sfc-learn-duration { font-size: 13px; color: #6B7280; }
.sfc-learn-desc { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 24px; }

/* Action Bar — pinned to bottom of sfc-learn-main */
.sfc-learn-action-bar {
    flex-shrink: 0;
    border-top: 1px solid #E5E7EB;
    padding: 14px 32px;
    background: #fff;
}
.sfc-learn-watch-hint {
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400E;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfc-learn-nav-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sfc-learn-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.sfc-learn-nav-btn:hover:not(:disabled):not(.sfc-learn-nav-btn--locked) {
    background: #F9FAFB;
    color: #111827;
    text-decoration: none;
}
.sfc-learn-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sfc-learn-nav-btn--locked { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.sfc-learn-nav-btn--next { background: #1B3A2D; color: #fff; border-color: #1B3A2D; }
.sfc-learn-nav-btn--next:hover:not(:disabled):not(.sfc-learn-nav-btn--locked) { background: #1B7A47; color: #fff; }

.sfc-learn-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: #D1FAE5;
    color: #065F46;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    flex: 1;
    justify-content: center;
    max-width: 220px;
}
.sfc-learn-complete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sfc-learn-complete-btn--ready { background: #1B7A47; color: #fff; }
.sfc-learn-complete-btn--ready:hover { background: #1B3A2D; }
.sfc-learn-complete-btn--done { background: #D1FAE5; color: #065F46; }

/* Sidebar */
.sfc-learn-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid #E5E7EB;
    overflow-y: auto;
    background: #FAFAFA;
}
.sfc-learn-sidebar-header {
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #E5E7EB;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}
.sfc-learn-section { border-bottom: 1px solid #E5E7EB; }
.sfc-learn-section-title {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sfc-learn-lesson-list { list-style: none; padding: 0; margin: 0; }
.sfc-learn-lesson-item { border-bottom: 1px solid #F3F4F6; }
.sfc-learn-lesson-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}
a.sfc-learn-lesson-link:hover { background: #F0FDF4; color: #1B7A47; text-decoration: none; }
.sfc-learn-lesson--current .sfc-learn-lesson-link { background: #ECFDF5; color: #1B7A47; font-weight: 600; }
.sfc-learn-lesson--locked .sfc-learn-lesson-link { opacity: 0.55; cursor: not-allowed; }
.sfc-learn-lesson--done .sfc-learn-lesson-link { color: #6B7280; }
.sfc-learn-lesson-icon { width: 18px; flex-shrink: 0; font-size: 14px; }
.sfc-learn-lesson-name { flex: 1; line-height: 1.4; }
.sfc-learn-lesson-dur { font-size: 11px; color: #9CA3AF; white-space: nowrap; }

/* Done Modal */
.sfc-learn-done-modal { border-radius: 16px; }
.sfc-learn-done-icon { font-size: 56px; }

/* My Bootcamps */
.sfc-mybc-list { display: flex; flex-direction: column; gap: 16px; }
.sfc-mybc-card {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.sfc-mybc-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 20px;
}
.sfc-mybc-card-info { flex: 1; }
.sfc-mybc-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.sfc-mybc-progress-wrap { margin-top: 10px; }
.sfc-mybc-progress-bar {
    background: #E5E7EB;
    border-radius: 4px;
    height: 8px;
    margin-bottom: 4px;
}
.sfc-mybc-progress-fill { background: #1B7A47; height: 8px; border-radius: 4px; transition: width .4s; }
.sfc-mybc-progress-text { font-size: 12px; color: #6B7280; }
.sfc-mybc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    min-width: 180px;
}
.sfc-mybc-card-actions .sfc-bc-cta-btn { font-size: 13px; padding: 8px 18px; }

@media (max-width: 991px) {
    .sfc-learn-sidebar { display: none; }
    .sfc-learn-layout { height: auto; flex-direction: column; }
    .sfc-learn-main { overflow-y: visible; }
    .sfc-bcd-rating-summary { flex-direction: column; gap: 16px; }
    .sfc-mybc-card-body { flex-direction: column; align-items: flex-start; }
    .sfc-mybc-card-actions { align-items: flex-start; min-width: unset; }
}
@media (max-width: 767px) {
    .sfc-bcd-hero { padding: 36px 0 32px; }
    .sfc-bcd-title { font-size: 24px; }
    .sfc-bcd-tabs .nav-link { padding: 10px 12px; font-size: 14px; }
    .sfc-learn-content { padding: 16px 18px; }
    .sfc-learn-nav-btns { gap: 8px; }
    .sfc-bcd-sidebar { position: static; margin-top: 24px; }
}

/* ===== Blog Article Badge (Gratis / Premium) ===== */
.sfc-blog-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: default;
}
.sfc-blog-badge--free {
    background: #1B3A2D;
    color: #fff;
    border-color: #1B3A2D;
}
.sfc-blog-badge--free:hover {
    background: #fff;
    color: #1B3A2D;
}
.sfc-blog-badge--premium {
    background: #F97316;
    color: #fff;
    border-color: #F97316;
}
.sfc-blog-badge--premium:hover {
    background: #fff;
    color: #F97316;
}

/* ── Checkout payment sidebar text color ── */
.cart__collaterals-wrap.payment_slidebar .list-wrap li,
.cart__collaterals-wrap.payment_slidebar .list-wrap li span,
.cart__collaterals-wrap.payment_slidebar .list-wrap li .amount,
.cart__collaterals-wrap.payment_slidebar .list-wrap li p,
.cart__collaterals-wrap.payment_slidebar .list-wrap li small,
.cart__collaterals-wrap.payment_slidebar .payable-text,
.cart__collaterals-wrap.payment_slidebar .payable-text span {
    color: #1B3A2D !important;
}

/* ── SFC Preloader ── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sfc-preloader-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}
.sfc-preloader-wrap.sfc-preloader-sm {
    width: 80px;
    height: 80px;
}
.sfc-preloader-logo {
    width: 60px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: sfcPulse 1.6s ease-in-out infinite;
}
.sfc-preloader-sm .sfc-preloader-logo {
    width: 40px;
}
.sfc-preloader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(27, 58, 45, 0.12);
    border-top-color: #1B3A2D;
    animation: sfcSpin 0.9s linear infinite;
}
@keyframes sfcSpin {
    to { transform: rotate(360deg); }
}
@keyframes sfcPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(0.92); }
}

/* ---- Cart table header ---- */
.cart__table thead tr {
    background: #1B7A47 !important;
}
.cart__table thead th {
    color: #fff !important;
}

/* ============================================================
   HEADER: clean navbar — hide topbar & search, center nav
   ============================================================ */
.tg-header__top { display: none !important; }
.tgmenu__search { display: none !important; }

header {
    position: relative;
    z-index: 1000;
}

.tgmenu__wrap .tgmenu__nav { position: relative; }
.tgmenu__navbar-wrap.tgmenu__main-menu {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    flex: unset !important;
}
.tgmenu__action {
    margin-left: auto !important;
}
.tgmenu__action > ul li .cart-count {
    border: none !important;
}
.tgmenu__action .mini-cart-icon { position: relative; }
.tgmenu__action .mini-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
    background: #18A167 !important;
    color: #fff !important;
}
.user_icon .menu_user_list::after {
    border-bottom-color: #fff !important;
}

/* ============================================================
   HERO v2 — from React source
   ============================================================ */
.sfc-h2-hero {
    background: #F5F4F2;
    padding: 40px 0 0;
}
.sfc-h2-container {
    padding-left: 80px;
    padding-right: 80px;
}
.sfc-h2-row {
    gap: 0;
}
.sfc-h2-left {
    padding-top: 16px;
    padding-right: 40px;
    padding-bottom: 40px;
}

/* Title */
.sfc-h2-title-group {
    margin-bottom: 24px;
}
.sfc-h2-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 800;
    line-height: 125%;
    letter-spacing: -0.02em;
    color: #111111;
    display: block;
}
.sfc-h2-title--green { color: #12A177; }

/* Subtitle */
.sfc-h2-subtitle {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    line-height: 170%;
    color: #111111;
    margin-bottom: 28px;
}

/* Pills */
.sfc-h2-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.sfc-h2-pills--mb { margin-bottom: 32px; }
.sfc-h2-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 100px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    box-shadow: 0 2px 3px rgba(0,0,0,0.04);
}
.sfc-h2-pill svg { flex-shrink: 0; }

/* CTA Buttons */
.sfc-h2-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.sfc-h2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #195C40;
    color: #fff;
    border-radius: 100px;
    padding: 15px 28px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    height: 54px;
    overflow: hidden;
}
.sfc-h2-btn-primary:hover { background: #0f3d29; color: #fff; }
.sfc-h2-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #F5F4F2;
    color: #195C40;
    border: 2px solid #195C40;
    border-radius: 100px;
    padding: 13px 28px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.sfc-h2-btn-secondary:hover { background: #e8f5ee; color: #195C40; }

/* Stats */
.sfc-h2-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.sfc-h2-avs {
    display: flex;
    align-items: center;
}
.sfc-h2-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #C4A882;
    border: 2px solid #fff;
    margin-right: -10px;
    flex-shrink: 0;
}
.sfc-h2-av:last-child { margin-right: 0; }
.sfc-h2-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfc-h2-stat-sep {
    width: 1px;
    height: 36px;
    background: #CCCCCC;
    flex-shrink: 0;
}
.sfc-h2-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sfc-h2-stat-item strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #195C40;
    line-height: 1.2;
}
.sfc-h2-stat-item span {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    color: #777777;
}
.sfc-h2-stat-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfc-h2-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sfc-h2-stat-text strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #195C40;
    line-height: 1.2;
}
.sfc-h2-stat-text span {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    color: #777777;
}

/* Right side visual */
.sfc-h2-right-col {
    padding: 0;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-end;
}
.sfc-h2-hero-right-img {
    width: 85%;
    height: auto;
    display: block;
    max-width: 100%;
    object-fit: contain;
    margin-left: auto;
}

/* Responsive */
@media (max-width: 1199px) {
    .sfc-h2-container { padding-left: 40px; padding-right: 40px; }
    .sfc-h2-title { font-size: clamp(32px, 4vw, 56px); }
}
@media (max-width: 991px) {
    .sfc-h2-container { padding-left: 20px; padding-right: 20px; }
    .sfc-h2-left { padding-right: 20px; }
}
@media (max-width: 767px) {
    .sfc-h2-hero { padding: 24px 0 0; }
    .sfc-h2-left { padding-right: 0; }
    .sfc-h2-title { font-size: 32px; }
    .sfc-h2-ctas { gap: 10px; }
    .sfc-h2-btn-primary, .sfc-h2-btn-secondary { font-size: 14px; padding: 12px 20px; }
}

/* ============================================================
   FOOTER v2 — Home page (sfc-v2-footer)
   ============================================================ */
.sfc-v2-footer {
    background: #122B1C;
}
.sfc-v2-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 72px 80px 56px;
}
.sfc-v2-footer__brand {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sfc-v2-footer__logo img {
    max-height: 48px;
    width: auto;
}
.sfc-v2-footer__desc {
    max-width: 280px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.sfc-v2-footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.sfc-v2-footer__social-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none !important;
    transition: background 0.2s;
}
.sfc-v2-footer__social-btn:hover { background: rgba(255,255,255,0.15); }
.sfc-v2-footer__nav-col {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sfc-v2-footer__contact-col {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sfc-v2-footer__col-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin: 0;
}
.sfc-v2-footer__nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sfc-v2-footer__nav-links li a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    line-height: 1;
    transition: color 0.2s;
}
.sfc-v2-footer__nav-links li a:hover { color: rgba(255,255,255,0.9) !important; }
.sfc-v2-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sfc-v2-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.sfc-v2-footer__contact-icon { flex-shrink: 0; margin-top: 2px; }
.sfc-v2-footer__contact-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.33;
    margin-bottom: 2px;
}
.sfc-v2-footer__contact-value {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none !important;
    line-height: 1.5;
}
.sfc-v2-footer__sep {
    width: calc(100% - 160px);
    margin: 0 auto;
    height: 1px;
    background: rgba(255,255,255,0.1);
}
.sfc-v2-footer__bottom {
    display: flex;
    align-items: center;
    padding: 24px 80px 32px;
}
.sfc-v2-footer__copy {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.35);
    line-height: 1.4;
}
.sfc-v2-footer__bottom-links {
    margin-left: auto;
    display: flex;
    gap: 28px;
}
.sfc-v2-footer__bottom-links a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.35) !important;
    text-decoration: none !important;
    line-height: 1.4;
    transition: color 0.2s;
}
.sfc-v2-footer__bottom-links a:hover { color: rgba(255,255,255,0.65) !important; }
@media (max-width: 991px) {
    .sfc-v2-footer__top { flex-wrap: wrap; gap: 40px; padding: 56px 40px 48px; }
    .sfc-v2-footer__brand { flex: 0 0 100%; }
    .sfc-v2-footer__nav-col, .sfc-v2-footer__contact-col { flex: 0 0 calc(50% - 20px); }
    .sfc-v2-footer__bottom { padding: 24px 40px 32px; }
}
@media (max-width: 767px) {
    .sfc-v2-footer__top { padding: 48px 24px 40px; gap: 32px; }
    .sfc-v2-footer__nav-col, .sfc-v2-footer__contact-col { flex: 0 0 100%; }
    .sfc-v2-footer__sep { width: calc(100% - 48px); }
    .sfc-v2-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px 28px; }
    .sfc-v2-footer__bottom-links { margin-left: 0; }
}

/* ============================================================
   LEARNING PLAYER & CLASS REPLAY PLAYER — Brand Color Overrides
   Berlaku untuk /student/learning/{slug} dan /student/class-replay/{slug}
   ============================================================ */

/* Top header bar */
.wsus__course_video .wsus__course_header {
    background: #1B3A2D !important;
}
.wsus__course_video .wsus__course_header a {
    color: #fff !important;
    text-decoration: none;
}
.wsus__course_video .wsus__course_header a:hover {
    color: #2FBF71 !important;
}
.wsus__course_video .wsus__course_header p {
    color: rgba(255,255,255,0.85) !important;
}
.wsus__course_video .wsus__course_header_btn i {
    color: #fff !important;
}

/* Sidebar heading */
.wsus__course_sidebar .video_heading {
    color: #1B3A2D !important;
    border-bottom: 2px solid #E8F5EE !important;
}

/* Accordion in sidebar — active chapter */
.wsus__course_sidebar .accordion-button:not(.collapsed) {
    background: #E8F5EE !important;
    color: #1B3A2D !important;
    box-shadow: inset 0 -1px 0 #B8DFC9 !important;
}

/* Currently active lesson highlight */
.wsus__course_video .form-check.item-active .form-check-label,
.wsus__course_video .form-check.item-active {
    background: #E8F5EE !important;
    color: #1B3A2D !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.wsus__course_video .form-check.item-active .form-check-input:checked {
    background-color: #1B7A47 !important;
    border-color: #1B7A47 !important;
}
.wsus__course_video .form-check-input:checked {
    background-color: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* Tab pills (Overview, Reviews, Q&A, Announcements) */
.video_tabs_area .nav-pills .nav-link.active,
.video_tabs_area .nav-pills .show > .nav-link {
    background: #1B3A2D !important;
    color: #fff !important;
}
.video_tabs_area .nav-pills .nav-link:not(.active):hover {
    color: #1B3A2D !important;
    background: #E8F5EE !important;
}
.video_tabs_area .nav-pills .nav-link {
    color: #374151 !important;
}

/* Progress bar — override Bootstrap blue */
.wsus__course_video .progress-bar,
.dashboard__content-wrap .progress-bar {
    background-color: #2FBF71 !important;
}

/* "Mulai Belajar" & "Certificate" buttons — basic-button class */
.basic-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}
.basic-button:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Submit button in player review forms */
.video_tabs_area .btn.arrow-btn,
.video_tabs_area .btn.btn-primary {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.video_tabs_area .btn.arrow-btn:hover,
.video_tabs_area .btn.btn-primary:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* ============================================================
   STUDENT DASHBOARD — Card List (Learning Series, Class Replay, Bootcamp)
   Override warna teks agar konsisten dengan brand hijau skillforcuan
   ============================================================ */

/* Judul card */
.dashboard_courses .courses__item-two h5.title,
.dashboard_courses .courses__item-two h5.title a {
    color: #1B3A2D !important;
    font-weight: 700 !important;
}
.dashboard_courses .courses__item-two h5.title a:hover {
    color: #1B7A47 !important;
    text-decoration: none !important;
}

/* Author / instruktur */
.dashboard_courses .author-two span,
.dashboard_courses .author-two a {
    color: #374151 !important;
    font-size: 13px !important;
}
.dashboard_courses .author-two i {
    color: #1B7A47 !important;
}

/* Rating / tanggal */
.dashboard_courses .avg-rating {
    color: #374151 !important;
    font-size: 13px !important;
}
.dashboard_courses .avg-rating i.fa-star { color: #F5A623 !important; }
.dashboard_courses .avg-rating i.fa-calendar { color: #1B7A47 !important; }

/* Progress bar label "SELESAI" */
.dashboard_courses .progress-item h6.title {
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.dashboard_courses .progress-item h6.title span {
    color: #1B3A2D !important;
    font-weight: 700 !important;
}

/* Progress bar track & fill */
.dashboard_courses .progress {
    background: #E8F5EE !important;
    border-radius: 100px !important;
    height: 6px !important;
}
.dashboard_courses .progress-bar {
    background: #2FBF71 !important;
    border-radius: 100px !important;
}

/* Bottom row icons dan teks */
.dashboard_courses .courses__item-bottom-two ul.list-wrap li {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.dashboard_courses .courses__item-bottom-two ul.list-wrap li i {
    color: #1B7A47 !important;
    margin-right: 4px !important;
}

/* Card border */
.dashboard_courses .courses__item-two {
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    transition: box-shadow 0.2s !important;
}
.dashboard_courses .courses__item-two:hover {
    box-shadow: 0 4px 20px rgba(27,122,71,0.1) !important;
}

/* Empty state teks */
.dashboard__content-wrap h6.text-center {
    color: #6B7280 !important;
    font-size: 14px !important;
}

/* ============================================================
   SFC LEARNING PLAYER — UI v5 (pixel-match Figma)
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────── */
.sfc-lp.wsus__course_video {
    background: #F1F8F5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 32px;
    gap: 32px;
    min-height: 100vh;
}

/* ── Left column ────────────────────────────────────────── */
.wsus__course_video_player.sfc-lp-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0% !important;
}

/* ── Col header: breadcrumb + course title ──────────────── */
.sfc-col-header { display: flex; flex-direction: column; gap: 8px; }
.sfc-breadcrumb { display: flex; align-items: center; gap: 8px; }
.sfc-breadcrumb span { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(113, 121, 116, 0.7); line-height: 10px; }
.sfc-breadcrumb-sep { font-size: 7px; color: rgba(113, 121, 116, 0.7); }
.sfc-breadcrumb-cat { color: #006D39 !important; }
.sfc-course-title { font-size: 36px; font-weight: 700; color: #0D3D2D; margin: 0; line-height: 48px; letter-spacing: -0.9px; }

/* ── Mobile header ──────────────────────────────────────── */
.sfc-mobile-hdr { display: none; }
@media (max-width: 991px) { .sfc-mobile-hdr { display: block; } }

/* ── Video Card ─────────────────────────────────────────── */
.sfc-video-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; padding: 16px; gap: 24px; }
.sfc-player-wrap { border-radius: 16px; overflow: hidden; background: #000; min-height: 200px; }
.sfc-video-card .video-payer { border-radius: 16px; overflow: hidden; background: #000; }

/* ── Info Bar ───────────────────────────────────────────── */
.sfc-info-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 8px; }
.sfc-info-left { flex: 1; min-width: 0; }
.sfc-lesson-title { font-size: 24px; font-weight: 700; color: #161D1B; margin: 0 0 8px; line-height: 31px; letter-spacing: -0.6px; }
.sfc-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.sfc-lesson-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(153, 243, 177, 0.3); color: #006D39; border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.sfc-lesson-badge .fa-check-circle { font-size: 13.33px; color: #006D39; }
.sfc-meta-sep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #717974; font-weight: 500; letter-spacing: 0.05em; }
.sfc-meta-sep i { font-size: 15px; color: #717974; }
.sfc-star-ico { color: #FFB800 !important; }
.sfc-rating-count { font-size: 10px; color: #717974; font-weight: 700; letter-spacing: 0.02em; }
.sfc-review-trigger { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; border: 1px solid #C1C8C3; border-radius: 12px; background: #fff; color: #414844; font-size: 12px; font-weight: 700; padding: 10px 20px; cursor: pointer; transition: border-color 0.15s, color 0.15s; letter-spacing: 0.05em; height: 48px; }
.sfc-review-trigger:hover { border-color: #9CA3AF; color: #111827; }

/* ── Description Card (tabs + nav) ─────────────────────── */
.sfc-desc-card { background: rgba(255, 255, 255, 0.5); border: 1px solid #FFFFFF; border-radius: 24px; overflow: hidden; }
.sfc-tabs-wrap { background: transparent; }
.sfc-tab-nav { display: flex; align-items: flex-end; gap: 0; padding: 0 32px; border-bottom: 1px solid rgba(193, 200, 195, 0.3); margin: 0; list-style: none; flex-wrap: nowrap; }
.sfc-tab-nav .nav-item { margin: 0; }
.sfc-tab-nav .nav-link,
.sfc-tab-nav .nav-link:not(.active) { background: transparent !important; color: #6B7280 !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 14px 16px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin: 0 !important; box-shadow: none !important; }
.sfc-tab-nav .nav-link:hover { color: #374151 !important; border-bottom-color: #D1D5DB !important; background: transparent !important; }
.sfc-tab-nav .nav-link.active { color: #0D3D2D !important; border-bottom-color: #0D3D2D !important; font-weight: 700 !important; background: transparent !important; }
.sfc-tab-content { padding: 32px; }
.sfc-about-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #006D39 !important; margin-bottom: 16px !important; line-height: 12px !important; }

/* ── Bottom Navigation ──────────────────────────────────── */
.sfc-bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 32px 24px; border-top: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-nav-btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; flex-shrink: 0; border: none; }
.sfc-btn-prev { background: #fff; border: 1px solid #C1C8C3 !important; color: #374151; padding: 12px 24px 12px 16px; }
.sfc-btn-prev:hover:not(:disabled) { border-color: #9CA3AF !important; color: #111827; }
.sfc-btn-prev:disabled { opacity: 0.35; cursor: not-allowed; }
.sfc-btn-next { background: #0D3D2D; color: #fff; padding: 12px 16px 12px 24px; box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
.sfc-btn-next:hover:not(:disabled) { background: #0a2e1f; }
.sfc-btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
.sfc-nav-icon-wrap { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; }
.sfc-nav-icon-wrap-l { background: #E8EFEC; color: #161D1B; }
.sfc-btn-prev:disabled .sfc-nav-icon-wrap-l { background: #F3F4F6; }
.sfc-nav-icon-wrap-r { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sfc-nav-labels { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.sfc-nav-labels-r { text-align: right; align-items: flex-end; }
.sfc-nav-main-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; line-height: 15px; color: #717974; }
.sfc-btn-next .sfc-nav-main-lbl { color: rgba(255, 255, 255, 0.6); }
.sfc-nav-sub-lbl { font-size: 12px; font-weight: 700; color: #161D1B; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; line-height: 12px; letter-spacing: 0.05em; }
.sfc-btn-next .sfc-nav-sub-lbl { color: #fff; }
.sfc-progress-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sfc-progress-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #717974; line-height: 10px; }
.sfc-progress-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.sfc-progress-track { flex: 1; height: 6px; background: #E8EFEC; border-radius: 9999px; overflow: hidden; }
.sfc-progress-fill { height: 100%; background: #1DB968; border-radius: 9999px; transition: width 0.5s ease; }
.sfc-progress-pct { font-size: 12px; font-weight: 700; color: #1DB968; white-space: nowrap; letter-spacing: 0.05em; }

/* ── Sidebar (transparent flex-col container) ───────────── */
.sfc-lp-sidebar.wsus__course_sidebar { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; padding: 0 !important; position: sticky !important; top: 32px !important; align-self: flex-start !important; width: 420px !important; flex: 0 0 420px !important; }
@media (max-width: 1199px) {
    .sfc-lp-sidebar.wsus__course_sidebar { width: 100% !important; flex: 1 1 100% !important; position: relative !important; top: 0 !important; }
}
.sfc-sidebar-close-btn { display: none; position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: #6B7280; cursor: pointer; z-index: 10; }

/* ── Module Card (white rounded shadow) ─────────────────── */
.sfc-module-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; }

/* ── Module Block (chapter) ─────────────────────────────── */
.sfc-module-block { border-bottom: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-module-hdr { padding: 24px; cursor: pointer; user-select: none; background: rgba(238, 245, 242, 0.3); border-bottom: 1px solid rgba(193, 200, 195, 0.3); transition: background 0.12s; }
.sfc-module-hdr:hover { background: rgba(238, 245, 242, 0.6); }
.sfc-module-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sfc-module-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #006D39; line-height: 10px; }
.sfc-module-dots { color: #717974; font-size: 13px; }
.sfc-module-title { font-size: 18px; font-weight: 700; color: #0D3D2D; margin: 0 0 8px; line-height: 22px; }
.sfc-module-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sfc-module-pills .sfc-pill { display: inline-block; background: #E8EFEC; color: rgba(113, 121, 116, 0.8); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 15px; }

/* ── Curriculum (session list) ──────────────────────────── */
.sfc-curriculum-wrap { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #E5E7EB transparent; }
.sfc-curriculum-wrap::-webkit-scrollbar { width: 4px; }
.sfc-curriculum-wrap::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }
.sfc-session-list { padding: 12px; display: flex; flex-direction: column; gap: 0; }
.sfc-session { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.1s; position: relative; }
.sfc-session:hover { background: rgba(238, 245, 242, 0.3); border-radius: 8px; }
.sfc-session.sfc-session-now { background: rgba(0, 109, 57, 0.05); border: 1px solid rgba(0, 109, 57, 0.1); border-radius: 16px; padding: 16px; position: relative; }
.sfc-session.sfc-session-now::before { content: ''; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 4px; height: 32px; background: #006D39; border-radius: 0 9999px 9999px 0; }
.sfc-session.sfc-session-now .sfc-session-arrow { display: none; }

/* ── Checkbox ────────────────────────────────────────────── */
.sfc-cb-wrap { flex-shrink: 0; padding-top: 4px; position: relative; }
.sfc-cb-wrap .sfc-cb-real.form-check-input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none !important; }
.sfc-cb-lbl { display: block; cursor: pointer; margin: 0 !important; }
.sfc-cb-ring { width: 20px; height: 20px; border: 2px solid rgba(113, 121, 116, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s; background: #fff; }
.sfc-cb-icon { font-size: 9px; color: #fff; display: none; }
.sfc-cb-real:checked + .sfc-cb-lbl .sfc-cb-ring { background: #006D39; border-color: #006D39; }
.sfc-cb-real:checked + .sfc-cb-lbl .sfc-cb-icon { display: block; }
.sfc-session.sfc-session-now .sfc-cb-ring { background: #006D39; border-color: #006D39; }
.sfc-session.sfc-session-now .sfc-cb-icon { display: block; }

/* ── Session text ───────────────────────────────────────── */
.sfc-session-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-now-playing-badge { display: none; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #006D39; line-height: 15px; }
.sfc-session-num { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #717974; line-height: 15px; }
.sfc-session.sfc-session-now .sfc-now-playing-badge { display: block; }
.sfc-session.sfc-session-now .sfc-session-num { display: none; }
.sfc-session-title { font-size: 16px; font-weight: 700; color: #414844; line-height: 24px; cursor: pointer; margin: 0 !important; display: block; white-space: normal; padding: 0 !important; border: none !important; background: none !important; }
.sfc-session.sfc-session-now .sfc-session-title { color: #161D1B; }
.sfc-session-dur { font-size: 10px; color: #717974; letter-spacing: 0.02em; line-height: 10px; }
.sfc-session-arrow { flex-shrink: 0; color: rgba(113, 121, 116, 0.5); font-size: 12px; padding-top: 6px; }

/* ── Help CTA (inside module card, at bottom) ───────────── */
.sfc-help-cta { background: #fff; border-top: 1px solid rgba(193, 200, 195, 0.2); padding: 16px; }
.sfc-help-box { background: #0D3D2D; border-radius: 16px; padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.sfc-nh-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #72FDA3; margin: 0; line-height: 10px; }
.sfc-nh-tagline { font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 12px; letter-spacing: 0.05em; }
.sfc-nh-send-btn { width: 100%; background: #fff; border: none; border-radius: 12px; padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; font-weight: 700; color: #006D39; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s; height: 36px; }
.sfc-nh-send-btn:hover { background: rgba(255, 255, 255, 0.9); }

/* ── Resources Card (separate standalone card) ──────────── */
.sfc-resources-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sfc-res-card-hdr { display: flex; align-items: center; gap: 8px; }
.sfc-res-folder-ico { font-size: 16px; color: #006D39; }
.sfc-res-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0D3D2D; line-height: 12px; }
.sfc-res-list { display: flex; flex-direction: column; gap: 12px; }
.sfc-res-item { display: flex; align-items: center; gap: 16px; padding: 12px; background: rgba(238, 245, 242, 0.5); border-radius: 16px; text-decoration: none !important; transition: background 0.15s; color: inherit; }
.sfc-res-item:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-res-icon-box { width: 40px; height: 40px; background: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16.67px; }
.sfc-res-icon-box.sfc-res-pdf { color: #BA1A1A; }
.sfc-res-icon-box.sfc-res-xlsx, .sfc-res-icon-box.sfc-res-xls, .sfc-res-icon-box.sfc-res-csv { color: #1DB968; }
.sfc-res-icon-box.sfc-res-doc, .sfc-res-icon-box.sfc-res-docx { color: #2563EB; }
.sfc-res-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-res-name { font-size: 12px; font-weight: 700; color: #161D1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em; line-height: 12px; }
.sfc-res-size { font-size: 10px; font-weight: 700; color: #717974; text-transform: uppercase; line-height: 15px; }
.sfc-res-dl-ico { font-size: 12px; color: #717974; flex-shrink: 0; }

/* ── Review Modal ───────────────────────────────────────── */
.sfc-review-dialog { max-width: 720px; }
.sfc-review-modal { display: flex; flex-direction: row; border-radius: 16px !important; overflow: hidden; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important; }
.sfc-review-panel-l { width: 38%; flex-shrink: 0; background: #0D3D2D; padding: 44px 26px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sfc-review-icon-wrap { width: 70px; height: 70px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,0.9); margin-bottom: 18px; }
.sfc-review-panel-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.sfc-review-panel-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0 0 22px; }
.sfc-review-slogan { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
.sfc-review-panel-r { flex: 1; background: #fff; padding: 34px 30px 26px; position: relative; min-width: 0; }
.sfc-review-close-btn { position: absolute; top: 16px; right: 16px; }
.sfc-review-form-h { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 5px; }
.sfc-review-form-sub { font-size: 13.5px; color: #6B7280; margin: 0; }
.sfc-review-hr { margin: 16px 0; border-color: #F3F4F6; }
.sfc-form-field { margin-bottom: 16px; }
.sfc-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0D3D2D; display: block; margin-bottom: 9px; }
.sfc-stars { display: flex; gap: 5px; }
.sfc-star { font-size: 26px; color: #E5E7EB; cursor: pointer; transition: color 0.1s, transform 0.1s; }
.sfc-star:hover { transform: scale(1.1); }
.sfc-star.sfc-star-on { color: #F59E0B; }
.sfc-review-ta { width: 100%; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #374151; min-height: 100px; resize: vertical; outline: none; font-family: inherit; transition: border-color 0.15s; }
.sfc-review-ta:focus { border-color: #0D3D2D; }
.sfc-review-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.sfc-btn-batal { background: transparent; border: none; color: #6B7280; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 12px; transition: color 0.15s; }
.sfc-btn-batal:hover { color: #374151; }
.sfc-btn-kirim { display: inline-flex; align-items: center; gap: 7px; background: #0D3D2D; border: none; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; padding: 10px 22px; border-radius: 100px; transition: background 0.15s; }
.sfc-btn-kirim:hover { background: #0a2e1f; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
    .sfc-lp.wsus__course_video { padding: 20px; gap: 20px; }
    .sfc-course-title { font-size: 28px; }
}
@media (max-width: 991px) {
    .sfc-lp.wsus__course_video { padding: 16px; gap: 16px; }
    .sfc-course-title { font-size: 22px; letter-spacing: -0.3px; }
    .sfc-sidebar-close-btn { display: block; }
    .sfc-info-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sfc-bottom-nav { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
    .sfc-progress-wrap { order: -1; width: 100%; }
    .sfc-review-modal { flex-direction: column; }
    .sfc-review-panel-l { width: 100%; padding: 28px 22px 24px; }
    .sfc-review-panel-r { padding: 24px 22px 20px; }
    .sfc-review-dialog { max-width: 96vw; margin: auto; }
}
@media (max-width: 575px) {
    .sfc-lp.wsus__course_video { padding: 12px; gap: 12px; }
    .sfc-course-title { font-size: 20px; }
    .sfc-info-bar { padding: 0; }
    .sfc-tab-content { padding: 20px 16px; }
    .sfc-bottom-nav { padding: 10px 16px; }
    .sfc-tab-nav { padding: 0 16px; }
    .sfc-nav-sub-lbl { display: none; }
    .sfc-lesson-title { font-size: 18px; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — UI v1 (sidebar + weekly card + stats + orders)
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────── */
.sfc-dash-page { background: #F1F8F5; padding: 32px; min-height: 100vh; }
.sfc-dash-layout { display: flex; align-items: flex-start; gap: 24px; max-width: 1320px; margin: 0 auto; }
.sfc-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ── Sidebar ────────────────────────────────────────────── */
.sfc-sidebar { width: 264px; flex-shrink: 0; background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; display: flex; flex-direction: column; align-self: flex-start; position: sticky; top: 24px; }

.sfc-sidebar-profile { text-align: center; padding-bottom: 20px; border-bottom: 1px solid rgba(193, 200, 195, 0.3); margin-bottom: 16px; }
.sfc-sidebar-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; border: 3px solid #E8F5EE; }
.sfc-sidebar-name { font-size: 15px; font-weight: 700; color: #0D3D2D; margin: 0 0 2px; line-height: 1.3; }
.sfc-sidebar-email { font-size: 12px; color: #717974; margin: 0; word-break: break-word; }

.sfc-sidebar-nav ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-sidebar-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #414844; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background 0.15s, color 0.15s; }
.sfc-sidebar-nav li a svg,
.sfc-sidebar-nav li a img { width: 18px; height: 18px; flex-shrink: 0; }
.sfc-sidebar-nav li a:hover { background: rgba(238, 245, 242, 0.8); color: #0D3D2D; }
.sfc-sidebar-nav li.sfc-active a { background: rgba(47, 191, 113, 0.15); color: #0D3D2D; font-weight: 700; }
.sfc-sidebar-nav li.sfc-active a:hover { background: rgba(47, 191, 113, 0.15); color: #0D3D2D; }

.sfc-sidebar-divider { height: 1px; background: rgba(193, 200, 195, 0.3); margin: 12px 0; }

.sfc-sidebar-bottom { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(193, 200, 195, 0.3); display: flex; flex-direction: column; gap: 10px; }
.sfc-sidebar-instructor-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; border-radius: 9999px; padding: 12px 16px; transition: background 0.15s; }
.sfc-sidebar-instructor-btn:hover { background: #0a2e1f; color: #fff !important; }
.sfc-sidebar-help-link { display: flex; align-items: center; gap: 10px; color: #717974 !important; font-size: 13px; font-weight: 600; text-decoration: none !important; padding: 8px 14px; }
.sfc-sidebar-help-link svg, .sfc-sidebar-help-link img { width: 16px; height: 16px; }
.sfc-sidebar-help-link:hover { color: #0D3D2D !important; }

/* ── Weekly Schedule Card ───────────────────────────────── */
.sfc-weekly-card { position: relative; background: #0D3D2D; border-radius: 24px; padding: 28px 32px; overflow: hidden; color: #fff; }
.sfc-weekly-card-bg { position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(29, 185, 104, 0.35), transparent 55%); pointer-events: none; }
.sfc-weekly-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sfc-weekly-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.sfc-weekly-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin: 0; }
.sfc-weekly-month-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; padding: 8px 16px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }

.sfc-week-days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 20px; }
.sfc-day-card { position: relative; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 14px 8px; text-align: center; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sfc-day-card.sfc-today { background: #1DB968; border-color: #1DB968; }
.sfc-today-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #fff; color: #0D3D2D; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.sfc-day-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.sfc-day-card.sfc-today .sfc-day-label { color: rgba(255, 255, 255, 0.85); }
.sfc-day-num { font-size: 18px; font-weight: 700; color: #fff; }
.sfc-day-icons { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 14px; }
.sfc-day-icons iconify-icon { font-size: 13px; color: rgba(255, 255, 255, 0.85); }

.sfc-week-legend { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sfc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); }
.sfc-legend-item iconify-icon { font-size: 14px; color: #1DB968; }

/* ── Stat Cards ─────────────────────────────────────────── */
.sfc-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sfc-stat-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sfc-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #717974; }
.sfc-stat-row { display: flex; align-items: center; justify-content: space-between; }
.sfc-stat-num { font-size: 32px; font-weight: 800; color: #0D3D2D; line-height: 1; }
.sfc-stat-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: #E8F5EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sfc-stat-icon-wrap iconify-icon { font-size: 20px; color: #006D39; }
.sfc-stat-sublabel { font-size: 12px; color: #9CA3AF; font-weight: 500; }

/* ── Order History Card (dashboard home) ───────────────── */
.sfc-order-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; }
.sfc-order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sfc-order-card-title { font-size: 16px; font-weight: 700; color: #0D3D2D; margin: 0 0 2px; }
.sfc-order-card-subtitle { font-size: 12.5px; color: #9CA3AF; margin: 0; }
.sfc-view-all-btn { display: inline-flex; align-items: center; gap: 6px; color: #006D39 !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.sfc-view-all-btn:hover { color: #0D3D2D !important; }

.sfc-order-table { width: 100%; border-collapse: collapse; }
.sfc-order-table thead th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #9CA3AF; padding: 0 12px 12px; border-bottom: 1px solid #F3F4F6; white-space: nowrap; }
.sfc-order-table tbody td { padding: 14px 12px; font-size: 13px; color: #374151; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.sfc-order-table tbody tr:last-child td { border-bottom: none; }
.sfc-order-invoice-link { color: #0D3D2D !important; font-weight: 700; text-decoration: none !important; }
.sfc-order-invoice-link:hover { color: #006D39 !important; }

.sfc-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; }
.sfc-status-badge.completed { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-status-badge.processing { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.sfc-status-badge.declined { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.sfc-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }

.sfc-order-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid #F3F4F6; }
.sfc-order-showing { font-size: 12px; color: #9CA3AF; }

/* ── Dashboard Responsive ───────────────────────────────── */
@media (max-width: 1199px) {
    .sfc-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .sfc-dash-page { padding: 20px; }
    .sfc-dash-layout { flex-direction: column; }
    .sfc-sidebar { width: 100%; position: static; }
    .sfc-week-days { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    .sfc-dash-page { padding: 14px; }
    .sfc-weekly-card { padding: 20px; }
    .sfc-stats-row { grid-template-columns: 1fr; }
    .sfc-week-days { grid-template-columns: repeat(3, 1fr); }
    .sfc-order-table { display: block; overflow-x: auto; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Shared Page Header (all sub-pages)
   ============================================================ */
.sfc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 0; flex-wrap: wrap; }
.sfc-page-title { font-size: 24px; font-weight: 800; color: #0D3D2D; margin: 0 0 6px; }
.sfc-page-subtitle { font-size: 13px; color: #717974; margin: 0; }
.sfc-header-btn-group { display: flex; align-items: center; gap: 10px; }
.sfc-filter-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 18px; font-size: 13px; font-weight: 600; color: #414844 !important; text-decoration: none !important; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.sfc-filter-btn:hover { border-color: #9CA3AF; color: #111827; }
.sfc-filter-btn.active { border-color: #0D3D2D; color: #0D3D2D; background: rgba(238, 245, 242, 0.6); }
.sfc-filter-btn iconify-icon { font-size: 16px; }

/* ── Filter dropdown (shared, dipakai di semua halaman list) ───── */
.sfc-filter-dropdown { position: relative; }
.sfc-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 43, 22, 0.15); border: 1px solid #F3F4F6; padding: 8px; min-width: 210px; z-index: 50; display: none; flex-direction: column; gap: 2px; }
.sfc-filter-panel.show { display: flex; }
.sfc-filter-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; padding: 8px 10px 4px; }
.sfc-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #414844 !important; text-decoration: none !important; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.sfc-filter-option:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-filter-option.active { background: #0D3D2D; color: #fff !important; }
.sfc-filter-option .sfc-filter-option-check { font-size: 14px; opacity: 0; }
.sfc-filter-option.active .sfc-filter-option-check { opacity: 1; }

/* ============================================================
   SFC STUDENT DASHBOARD — Learning Series (Enrolled Courses)
   ============================================================ */
.sfc-course-list-wrap { --sfc-card-h: 285px; padding-right: 6px; margin-top: -16px; }
.sfc-course-list-wrap.sfc-scrollable { overflow-y: auto; }
.sfc-course-list-wrap::-webkit-scrollbar { width: 6px; }
.sfc-course-list-wrap::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 9999px; }
.sfc-course-list-wrap::-webkit-scrollbar-track { background: transparent; }
.sfc-course-list { display: flex; flex-direction: column; gap: 20px; }
.sfc-course-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; color: #9CA3AF; font-size: 13px; opacity: 0; transition: opacity 0.15s; }
#sfc-course-load-sentinel.sfc-loading-active .sfc-course-loading { opacity: 1; }
.sfc-course-card { background: #fff; border-radius: 24px; border: 1px solid #E5E7EB; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 1024px; height: var(--sfc-card-h, 285px); min-height: 230px; }

.sfc-course-thumb { flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 16 / 9; background: rgba(47, 191, 113, 0.15); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.sfc-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfc-course-thumb-placeholder { width: 100%; height: 100%; background: #CBD5E1; display: flex; align-items: center; justify-content: center; }
.sfc-course-thumb-placeholder iconify-icon { font-size: 34px; color: #fff; }

.sfc-course-body { padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; justify-content: center; }
.sfc-course-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; color: #fff; }
.sfc-course-badge.running { background: #14532D; }
.sfc-course-badge.register { background: #12182B; }
.sfc-course-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6B7280; white-space: nowrap; }

.sfc-course-body .sfc-course-title { font-size: 20px; font-weight: 800; color: #1B3A2D; text-decoration: none !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
.sfc-course-body .sfc-course-title:hover { color: #006D39; }

.sfc-course-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-instructor { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0F7B4F; font-weight: 500; }
.sfc-course-instructor iconify-icon { color: #6B7280; font-size: 15px; }
.sfc-course-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #1B3A2D; font-weight: 700; }
.sfc-course-rating iconify-icon { color: #F5A623; font-size: 14px; }

.sfc-course-body .sfc-progress-wrap,
.sfc-bc-progress-wrap { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; min-width: 0; width: 100%; gap: 8px; }
.sfc-course-body .sfc-progress-label,
.sfc-bc-body .sfc-progress-label { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #9CA3AF; }
.sfc-course-body .sfc-progress-label span:last-child,
.sfc-bc-body .sfc-progress-label span:last-child { color: #1B3A2D; }
.sfc-course-body .sfc-progress-bar-bg,
.sfc-bc-body .sfc-progress-bar-bg { width: 100%; height: 5px; background: #E5E7EB; border-radius: 9999px; overflow: hidden; }
.sfc-course-body .sfc-progress-bar-fill,
.sfc-bc-body .sfc-progress-bar-fill { height: 100%; background: #1DB968; border-radius: 9999px; }

.sfc-course-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-stats { display: flex; align-items: center; gap: 10px; }
.sfc-course-stat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.sfc-course-stat-item iconify-icon { font-size: 15px; }
.sfc-course-stat-dot { width: 3px; height: 3px; border-radius: 50%; background: #D1D5DB; }
.sfc-mulai-btn { display: inline-flex; align-items: center; gap: 8px; background: #0F3D2C; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; padding: 12px 26px; border-radius: 9999px; white-space: nowrap; transition: background 0.15s; }
.sfc-mulai-btn:hover { background: #0a2e1f; }

.sfc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 24px; color: #9CA3AF; background: #fff; border-radius: 20px; }
.sfc-empty-state iconify-icon { font-size: 40px; color: #D1D5DB; }
.sfc-empty-state p { margin: 0; font-size: 14px; }

@media (max-width: 767px) {
    .sfc-course-card { flex-direction: column; height: auto; }
    .sfc-course-thumb { width: 100%; height: 200px; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Bootcamp (grid card, vertikal)
   Class di-scope khusus (.sfc-bc-grid ...) supaya tidak bentrok
   dengan .sfc-bc-card milik halaman publik /bootcamp.
   ============================================================ */
.sfc-bc-grid-wrap { padding-right: 6px; }
.sfc-bc-grid-wrap.sfc-scrollable { overflow-y: auto; }
.sfc-bc-grid-wrap::-webkit-scrollbar { width: 6px; }
.sfc-bc-grid-wrap::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 9999px; }
.sfc-bc-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.sfc-bc-grid-wrap .sfc-bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.sfc-bc-grid-wrap .sfc-bc-card { background: #fff; border-radius: 20px; border: 1px solid #E5E7EB; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 0; transition: none; }
.sfc-bc-grid-wrap .sfc-bc-card:hover { box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); border-color: #E5E7EB; }

.sfc-bc-thumb { position: relative; width: 100%; height: 220px; flex-shrink: 0; background: #E9EEF5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sfc-bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfc-bc-thumb-placeholder { width: 64px; height: 64px; border-radius: 50%; background: #CBD5E1; display: flex; align-items: center; justify-content: center; }
.sfc-bc-thumb-placeholder iconify-icon { font-size: 26px; color: #fff; }

.sfc-bc-thumb .sfc-bc-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; color: #fff; }
.sfc-bc-thumb .sfc-bc-badge.running { background: #14532D; }
.sfc-bc-thumb .sfc-bc-badge.register { background: #12182B; }

.sfc-bc-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.sfc-bc-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6B7280; flex-shrink: 0; }
.sfc-bc-date iconify-icon { font-size: 14px; }

a.sfc-bc-title,
span.sfc-bc-title { font-size: 19px; font-weight: 800; color: #1B3A2D; text-decoration: none !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
a.sfc-bc-title:hover { color: #006D39; }

.sfc-bc-instructor { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0F7B4F; font-weight: 500; flex-shrink: 0; }
.sfc-bc-instructor iconify-icon { color: #6B7280; font-size: 15px; }

.sfc-bc-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #1B3A2D; font-weight: 700; flex-shrink: 0; }
.sfc-bc-rating iconify-icon { font-size: 14px; }
.sfc-bc-rating span { margin-left: 4px; }

.sfc-bc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; flex-shrink: 0; }
.sfc-bc-stats { display: flex; align-items: center; gap: 14px; }
.sfc-bc-stat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.sfc-bc-stat-item iconify-icon { font-size: 15px; }

@media (max-width: 1199px) {
    .sfc-bc-grid-wrap .sfc-bc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .sfc-bc-grid-wrap .sfc-bc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Ulasan (Reviews)
   ============================================================ */
.sfc-review-layout { display: flex; align-items: flex-start; gap: 24px; }
.sfc-review-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.sfc-review-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ── Summary card (dark) ─────────────────────────────────── */
.sfc-review-summary-card { background: #0D3D2D; border-radius: 20px; padding: 24px; color: #fff; }
.sfc-review-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sfc-review-summary-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.sfc-review-summary-count { font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.sfc-review-summary-total { font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 18px; }
.sfc-review-summary-divider { height: 1px; background: rgba(255,255,255,0.15); margin-bottom: 18px; }
.sfc-review-summary-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600; }

/* ── Filter status box ───────────────────────────────────── */
.sfc-review-filter-box { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.sfc-review-filter-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #9CA3AF; margin: 0 0 6px; }
.sfc-review-filter-pill { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; color: #414844 !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background 0.15s; }
.sfc-review-filter-pill:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-review-filter-pill span { font-size: 11.5px; font-weight: 700; color: #9CA3AF; background: #F3F4F6; border-radius: 9999px; padding: 2px 9px; }
.sfc-review-filter-pill.active { background: #0D3D2D; color: #fff !important; }
.sfc-review-filter-pill.active span { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ── Right header (title + search) ───────────────────────── */
.sfc-review-right-header { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sfc-review-right-title { font-size: 17px; font-weight: 800; color: #1B3A2D; margin: 0; }
.sfc-review-search-wrap { display: flex; align-items: center; gap: 8px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 9999px; padding: 9px 16px; width: 260px; }
.sfc-review-search-input { border: none; background: transparent; outline: none; font-size: 13px; color: #374151; width: 100%; }
.sfc-review-search-input::placeholder { color: #9CA3AF; }

/* ── Review item list ─────────────────────────────────────── */
.sfc-review-list { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-review-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; flex-wrap: wrap; }
.sfc-review-item:last-child { border-bottom: none; }
.sfc-review-item-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sfc-review-item-title-wrap { display: flex; align-items: baseline; gap: 8px; }
.sfc-review-item-num { font-size: 12px; font-weight: 700; color: #9CA3AF; flex-shrink: 0; }
.sfc-review-item-title { font-size: 15px; font-weight: 700; color: #1B3A2D; }
.sfc-review-item-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9CA3AF; flex-wrap: wrap; }
.sfc-review-meta-dot { color: #D1D5DB; }
.sfc-review-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.sfc-review-status-badge.approved { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-review-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }
.sfc-review-stars { display: flex; align-items: center; gap: 2px; }

.sfc-review-item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sfc-review-lihat-btn { display: inline-flex; align-items: center; gap: 6px; background: #0D3D2D; color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; padding: 9px 18px; border-radius: 9999px; transition: background 0.15s; }
.sfc-review-lihat-btn:hover { background: #0a2e1f; }
.sfc-review-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: #FEF2F2; color: #DC2626 !important; text-decoration: none !important; transition: background 0.15s; cursor: pointer; }
.sfc-review-delete-btn:hover { background: #FEE2E2; }

/* ── Pagination ───────────────────────────────────────────── */
.sfc-review-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 4px 0; }
.sfc-review-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-review-pagination-btns { display: flex; align-items: center; gap: 6px; }
.sfc-review-page-btn,
.sfc-review-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; font-size: 13px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.15s; }
.sfc-review-page-btn:hover:not(:disabled),
.sfc-review-page-num:hover { border-color: #9CA3AF; color: #111827; }
.sfc-review-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sfc-review-page-num.active { background: #0D3D2D; border-color: #0D3D2D; color: #fff; }
.sfc-review-page-ellipsis { color: #9CA3AF; padding: 0 4px; }

@media (max-width: 991px) {
    .sfc-review-layout { flex-direction: column; }
    .sfc-review-left { width: 100%; flex-direction: row; }
    .sfc-review-summary-card,
    .sfc-review-filter-box { flex: 1; min-width: 0; }
}
@media (max-width: 575px) {
    .sfc-review-left { flex-direction: column; }
    .sfc-review-search-wrap { width: 100%; }
    .sfc-review-item { flex-direction: column; align-items: flex-start; }
    .sfc-review-item-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Percobaan Quiz (Quiz Attempts)
   ============================================================ */
.sfc-quiz-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-quiz-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; flex-wrap: wrap; }
.sfc-quiz-card-title { font-size: 16px; font-weight: 800; color: #1B3A2D; margin: 0; }
.sfc-quiz-count-badge { font-size: 11.5px; font-weight: 700; color: #6B7280; background: #F3F4F6; border-radius: 9999px; padding: 5px 14px; white-space: nowrap; }

.sfc-quiz-list { display: flex; flex-direction: column; }
.sfc-quiz-item { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; }
.sfc-quiz-item:last-child,
.sfc-quiz-item.sfc-quiz-item-last { border-bottom: none; }

.sfc-quiz-num-badge { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #E8F5EE; color: #006D39; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.sfc-quiz-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sfc-quiz-title { font-size: 15px; font-weight: 700; color: #1B3A2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-quiz-desc { font-size: 12.5px; color: #6B7280; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-quiz-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.sfc-quiz-meta-icon { font-size: 13px; color: #9CA3AF; }
.sfc-quiz-date { font-size: 12px; color: #9CA3AF; }
.sfc-quiz-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.sfc-quiz-status-badge.pass { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-quiz-status-badge.fail { background: rgba(220, 38, 38, 0.1); color: #DC2626; }

.sfc-quiz-right { flex-shrink: 0; display: flex; align-items: center; gap: 20px; }
.sfc-quiz-score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 130px; }
.sfc-quiz-score-row { display: flex; align-items: baseline; gap: 3px; }
.sfc-quiz-score-num { font-size: 18px; font-weight: 800; color: #1B3A2D; }
.sfc-quiz-score-total { font-size: 12px; color: #9CA3AF; font-weight: 600; }
.sfc-quiz-progress-bg { width: 100%; height: 5px; background: #E5E7EB; border-radius: 9999px; overflow: hidden; }
.sfc-quiz-progress-fill { height: 100%; background: #1DB968; border-radius: 9999px; }
.sfc-quiz-lihat-btn { display: inline-flex; align-items: center; gap: 6px; background: #0D3D2D; color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; padding: 9px 18px; border-radius: 9999px; white-space: nowrap; transition: background 0.15s; }
.sfc-quiz-lihat-btn:hover { background: #0a2e1f; }

.sfc-quiz-empty { display: flex; align-items: center; justify-content: center; padding: 48px 24px; color: #9CA3AF; font-size: 14px; }

.sfc-quiz-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid #F3F4F6; }
.sfc-quiz-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-quiz-pagination-btns { display: flex; align-items: center; gap: 6px; }

@media (max-width: 575px) {
    .sfc-quiz-item { flex-wrap: wrap; }
    .sfc-quiz-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Riwayat Pesanan (Order List)
   ============================================================ */
.sfc-order-list-wrap { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-order-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #F3F4F6; }
.sfc-order-row:last-child { border-bottom: none; }
.sfc-order-row-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #E8F5EE; color: #006D39; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sfc-order-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sfc-order-row-invoice { font-size: 14.5px; font-weight: 700; color: #1B3A2D; text-decoration: none !important; }
.sfc-order-row-invoice:hover { color: #006D39; }
.sfc-order-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9CA3AF; flex-wrap: wrap; }
.sfc-order-row-dot { color: #D1D5DB; }
.sfc-order-row-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.sfc-order-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.sfc-order-status-badge.completed { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-order-status-badge.processing { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.sfc-order-status-badge.declined { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.sfc-order-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }

.sfc-order-eye-link { width: 34px; height: 34px; border-radius: 9999px; background: #F3F4F6; color: #6B7280; display: flex; align-items: center; justify-content: center; text-decoration: none !important; transition: background 0.15s, color 0.15s; }
.sfc-order-eye-link:hover { background: #E5E7EB; color: #111827; }
.sfc-order-empty { padding: 48px 24px; text-align: center; color: #9CA3AF; }

.sfc-order-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.sfc-order-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-order-pagination-btns { display: flex; align-items: center; gap: 6px; }
.sfc-order-page-arrow,
.sfc-order-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; font-size: 13px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.15s; }
.sfc-order-page-arrow:hover:not(:disabled),
.sfc-order-page-num:hover { border-color: #9CA3AF; color: #111827; }
.sfc-order-page-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.sfc-order-page-num.active { background: #0D3D2D; border-color: #0D3D2D; color: #fff; }
.sfc-order-page-ellipsis { color: #9CA3AF; padding: 0 4px; }

@media (max-width: 575px) {
    .sfc-order-row { flex-wrap: wrap; }
    .sfc-order-row-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Detail Pesanan (Invoice)
   ============================================================ */
.sfc-invoice-back { display: inline-flex; align-items: center; gap: 8px; color: #414844 !important; font-size: 14px; font-weight: 600; text-decoration: none !important; margin-bottom: 16px; transition: color 0.15s; }
.sfc-invoice-back:hover { color: #0D3D2D !important; }

.sfc-invoice-card { position: relative; background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; padding: 32px 36px 28px; }

.sfc-invoice-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; margin-bottom: 28px; }
.sfc-invoice-header-title { font-size: 20px; font-weight: 800; color: #1B3A2D; margin: 0; }

.sfc-invoice-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.sfc-invoice-faktur-title { font-size: 32px; font-weight: 800; color: #1B3A2D; margin: 0 0 18px; }
.sfc-invoice-field { margin-bottom: 14px; }
.sfc-invoice-field:last-child { margin-bottom: 0; }
.sfc-invoice-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; margin-bottom: 4px; }
.sfc-invoice-label-spaced { margin-top: 16px; }
.sfc-invoice-value { font-size: 15px; font-weight: 700; color: #1B3A2D; }

.sfc-invoice-billed-name { font-size: 15px; font-weight: 700; color: #1B3A2D; margin: 2px 0 6px; }
.sfc-invoice-billed-line { font-size: 13.5px; color: #414844; margin: 0 0 2px; line-height: 1.6; }

.sfc-invoice-status-value { font-size: 14px; font-weight: 700; font-style: italic; margin: 2px 0 0; }
.sfc-invoice-status-value.completed { color: #1DB968; }
.sfc-invoice-status-value.declined { color: #DC2626; }
.sfc-invoice-status-value.pending { color: #B45309; }

.sfc-invoice-summary-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 12px; }

.sfc-invoice-table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid #F3F4F6; margin-bottom: 20px; }
.sfc-invoice-table { width: 100%; border-collapse: collapse; }
.sfc-invoice-table thead tr { background: #F5F7F9; }
.sfc-invoice-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #6B7280; padding: 14px 20px; }
.sfc-invoice-th-num { width: 48px; }
.sfc-invoice-th-price { text-align: right; }
.sfc-invoice-table td { padding: 18px 20px; border-top: 1px solid #F3F4F6; vertical-align: top; font-size: 13.5px; color: #414844; }
.sfc-invoice-td-num { color: #9CA3AF; font-weight: 600; }
.sfc-invoice-item-title { font-size: 14.5px; font-weight: 700; color: #1B3A2D; margin-bottom: 3px; }
.sfc-invoice-item-sub { font-size: 12.5px; color: #9CA3AF; }
.sfc-invoice-instructor-name { font-size: 13.5px; font-weight: 600; color: #1B3A2D; }
.sfc-invoice-instructor-email { font-size: 12px; color: #9CA3AF; }
.sfc-invoice-price { text-align: right; font-weight: 700; color: #1B3A2D; white-space: nowrap; }

.sfc-invoice-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; width: 320px; max-width: 100%; }
.sfc-invoice-total-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; color: #414844; }
.sfc-invoice-total-divider { width: 100%; height: 1px; background: #E5E7EB; margin: 4px 0; }
.sfc-invoice-total-grand { font-size: 17px; font-weight: 800; color: #1B3A2D; }

.sfc-invoice-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; margin-top: 8px; border-top: 1px solid #F3F4F6; }
.sfc-invoice-thanks { font-size: 13.5px; font-style: italic; color: #6B7280; margin: 0; }
.sfc-invoice-print-btn { display: inline-flex; align-items: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; padding: 12px 22px; border-radius: 12px; white-space: nowrap; transition: background 0.15s; }
.sfc-invoice-print-btn:hover { background: #0a2e1f; }

.sfc-invoice-accent-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #0D3D2D 0%, #1DB968 100%); }

@media (max-width: 991px) {
    .sfc-invoice-top { grid-template-columns: 1fr 1fr; }
    .sfc-invoice-faktur-col { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .sfc-invoice-card { padding: 24px 18px 22px; }
    .sfc-invoice-top { grid-template-columns: 1fr; }
    .sfc-invoice-totals { width: 100%; }
    .sfc-invoice-table-wrap { overflow-x: auto; }
    .sfc-invoice-table { min-width: 520px; }
    .sfc-invoice-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Pengaturan Profil (Profile Settings)
   ============================================================ */
.sfc-profile-layout { display: flex; align-items: flex-start; gap: 24px; }

/* ── Left tab nav ───────────────────────────────────────── */
.sfc-profile-nav { width: 220px; flex-shrink: 0; background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sfc-profile-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: none; background: transparent; color: #414844; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.sfc-profile-nav-item iconify-icon { font-size: 17px; flex-shrink: 0; }
.sfc-profile-nav-item:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-profile-nav-item.active { background: #0D3D2D; color: #fff; }

/* ── Right content ─────────────────────────────────────── */
.sfc-profile-right { flex: 1; min-width: 0; }
.sfc-profile-pane { display: none; }
.sfc-profile-pane.active { display: block; }
.sfc-profile-right-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }

/* ── Cover + avatar ─────────────────────────────────────── */
.sfc-profile-cover-section { position: relative; }
.sfc-profile-banner { height: 160px; background-size: cover; background-position: center; background-color: #E8F5EE; position: relative; }
.sfc-edit-cover-btn { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; background: rgba(13, 61, 45, 0.85); color: #fff; border: none; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 9999px; cursor: pointer; transition: background 0.15s; }
.sfc-edit-cover-btn:hover { background: #0D3D2D; }

.sfc-avatar-wrap { position: absolute; left: 32px; bottom: -36px; width: 88px; height: 88px; }
.sfc-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #E8F5EE; display: block; }
.sfc-avatar-edit-btn { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #0D3D2D; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: background 0.15s; }
.sfc-avatar-edit-btn:hover { background: #0a2e1f; }

/* ── Form body ──────────────────────────────────────────── */
.sfc-profile-form-body { padding: 52px 32px 32px; }
.sfc-form-body-plain { padding: 32px; }

.sfc-form-group { margin-bottom: 18px; }
.sfc-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sfc-form-row .sfc-form-group { flex: 1; min-width: 200px; }
.sfc-form-label { display: block; font-size: 12.5px; font-weight: 700; color: #1B3A2D; margin-bottom: 7px; }
.sfc-required { color: #DC2626; }

.sfc-form-input,
.sfc-form-textarea,
.sfc-form-select { width: 100%; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: #374151; outline: none; font-family: inherit; transition: border-color 0.15s; background: #fff; }
.sfc-form-input:focus,
.sfc-form-textarea:focus,
.sfc-form-select:focus { border-color: #0D3D2D; }
.sfc-form-input::placeholder,
.sfc-form-textarea::placeholder { color: #9CA3AF; }
.sfc-form-textarea { resize: vertical; min-height: 90px; }

.sfc-input-icon-wrap { position: relative; }
.sfc-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 15px; }
.sfc-input-has-icon { padding-left: 38px; }

.sfc-select-wrap { position: relative; }
.sfc-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.sfc-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 13px; pointer-events: none; }

.sfc-form-submit-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.sfc-submit-btn { display: inline-flex; align-items: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; padding: 12px 24px; border-radius: 9999px; border: none; cursor: pointer; transition: background 0.15s; }
.sfc-submit-btn:hover { background: #0a2e1f; }

@media (max-width: 991px) {
    .sfc-profile-layout { flex-direction: column; }
    .sfc-profile-nav { width: 100%; flex-direction: row; overflow-x: auto; }
    .sfc-profile-nav-item { white-space: nowrap; }
}
@media (max-width: 575px) {
    .sfc-profile-form-body { padding: 48px 18px 24px; }
    .sfc-form-body-plain { padding: 20px; }
    .sfc-avatar-wrap { left: 18px; }
}