/* ── Plugin Bahan Baku Page Overrides ─────────────────────────── */
.hero-ingredients {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 80px;
}

/* Product card mockup (right side of hero) */
.product-card-mockup {
    background: linear-gradient(67deg, #019887 25%, #e6f7f2 136%);
    border-radius: 16px;
    padding: 32px;
}

.product-card-inner {
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.10);
}

.product-card-divider {
    height: 4px;
    background: #d1d2d3;
    border-radius: 8px;
    margin: 12px 0 16px;
}

.skeleton-bar {
    height: 14px;
    border-radius: 12px;
    background: linear-gradient(90deg, #cfd9df, #e2ebf0);
}

.price-box {
    border-radius: 8px;
    padding: 12px;
    flex: 1;
}

.price-box-orange {
    background: #fff7e8;
}

.price-box-green {
    background: #e6f7f2;
}

/* ── What-is section ────────────────────────────────────────────── */
.what-is-section {
    background: #ffffff;
}

/* ── Reasons cards ──────────────────────────────────────────────── */
.reason-card {
    background: #ffffff;
    border: 1px solid #eff3f6;
    border-radius: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    padding: 32px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.reason-card .card-text-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.reason-card .card-text-body h3 {
    min-height: 3.2rem;
}

.reason-card .card-text-body p {
    flex: 1;
}

.reason-icon-wrap {
    background: #e6f7f2;
    border-radius: 16px;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
}

.reason-icon-wrap i {
    font-size: 22px;
    color: #00AF81;
}

/* ── Features section ───────────────────────────────────────────── */
.features-section {
    background: #fafbfb;
}

.feature-card {
    background: #ffffff;
    border: 2px solid #eff3f6;
    border-radius: 24px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.feature-card .feature-text-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feature-card .feature-text-body h3 {
    min-height: 3.2rem;
}

.feature-card .feature-text-body p {
    flex: 1;
}

.feature-card .feature-card-visual {
    margin-top: auto;
}

.feature-card-visual {
    background: #ffffff;
    border: 2px solid #f1f1f1;
    border-radius: 16px;
    padding: 16px 24px;
    margin-top: 16px;
}

.feature-stok-badge {
    background: #e6f7f2;
    border: 2px solid #f1f1f1;
    border-radius: 8px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feature-minus-badge {
    background: #e6f7f2;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 1.5rem;
    color: #05ae81;
}

.feature-minus-row {
    background: #e6f7f2;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #05ae81;
    white-space: nowrap;
}

.feature-unit-badge {
    background: #e6f7f2;
    border: 1.5px solid #20c997;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #585859;
}

/* ── Absensi featured cards ─────────────────────────────────────── */
#fitur-unggulan .col-md-6 {
    display: flex;
}

#fitur-unggulan .fitur-unggulan-card {
    border-width: 2px;
    border-radius: 24px;
    padding: 32px;
    overflow: hidden;
    width: 100%;
    min-height: 400px;
}

#fitur-unggulan .fitur-unggulan-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
}

#fitur-unggulan .fitur-unggulan-card__title {
    margin-bottom: 0;
    line-height: 1.35;
}

#fitur-unggulan .fitur-unggulan-card__desc {
    margin-bottom: 0;
    line-height: 1.55;
}

#fitur-unggulan .fitur-unggulan-card__media {
    align-items: flex-end;
    display: flex;
    flex: 1 1 174px;
    margin: -16px -32px -32px;
    min-height: 174px;
}

#fitur-unggulan .fitur-unggulan-card__image {
    display: block;
    margin-top: auto;
    width: 100%;
}

.foodmenu-feature-section .foodmenu-feature-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
    line-height: 1.3;
}

.foodmenu-feature-grid>div {
    display: flex;
}

.foodmenu-feature-stack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.foodmenu-feature-stack__item {
    display: flex;
    flex: 1 1 auto;
    max-width: 100%;
}

.foodmenu-feature-stack__item .foodmenu-feature-card {
    width: 100%;
}

.foodmenu-feature-card {
    background: #ffffff;
    border: 1px solid #dfe7ee;
    border-radius: 28px;
    box-shadow: 0px 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: 32px;
    position: relative;
    width: 100%;
}

.foodmenu-feature-card--horizontal,
.foodmenu-feature-card--stacked {
    align-items: flex-start;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    min-height: 100%;
}

.foodmenu-feature-card--vertical {
    flex-direction: column;
    gap: 20px;
    min-height: 100%;
}

.foodmenu-feature-card__content {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 12px;
    max-width: 290px;
    position: relative;
    z-index: 1;
}

.foodmenu-feature-card--vertical .foodmenu-feature-card__content {
    max-width: 100%;
}

.foodmenu-feature-card--stacked .foodmenu-feature-card__content {
    align-items: flex-start;
    flex: 0 0 44%;
    max-width: 44%;
    width: 44%;
}

.foodmenu-feature-card--stacked .foodmenu-feature-card__media {
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    margin-top: 0;
    order: 0;
    width: auto;
}

.foodmenu-feature-card--stacked .foodmenu-feature-card__image {
    max-width: 100%;
}

.foodmenu-feature-card--stacked {
    align-items: center;
    flex-direction: row;
}

.foodmenu-feature-card__title {
    line-height: 1.25;
    margin-bottom: 0;
}

.foodmenu-feature-card__desc {
    line-height: 1.45;
    margin-bottom: 0;
}

.foodmenu-feature-card__media {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    margin-top: auto;
    min-width: 0;
    width: 100%;
}

.foodmenu-feature-card__media--order {
    max-width: 100%;
}

.foodmenu-feature-card__media--table {
    max-width: 100%;
}

.foodmenu-feature-card__media--menu {
    align-items: flex-end;
    flex: 1 1 auto;
    justify-content: center;
    margin-top: auto;
}

.foodmenu-feature-card__image {
    display: block;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 991px) {
    .foodmenu-feature-grid>div {
        display: block;
    }

    .foodmenu-feature-stack {
        gap: 20px;
    }
}

/* ── Steps ──────────────────────────────────────────────────────── */
.step-number-wrap {
    background: #e6f7f2;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.step-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #05ae81;
}

.step-connector {
    flex: 1;
    height: 2px;
    border-top: 2px dashed #b7e3be;
    margin-top: 40px;
}

#cara-kerja .cara-kerja-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

#cara-kerja .cara-kerja-tabs {
    background: linear-gradient(90deg, #FDFBFB 0%, #EBEDEE 100%);
    border-radius: 999px;
    gap: 0;
    max-width: 700px;
    overflow: hidden;
    width: 100%;
}

#cara-kerja .cara-kerja-tabs__item {
    flex: 1 1 50%;
}

#cara-kerja .cara-kerja-tabs__button {
    border: 0;
    border-radius: 999px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 16px 24px;
    text-align: center;
    width: 100%;
    justify-content: center;
}

#cara-kerja .cara-kerja-tabs__button:hover,
#cara-kerja .cara-kerja-tabs__button:focus {
    color: #fff;
}

#cara-kerja .cara-kerja-tabs__button.active,
#cara-kerja .cara-kerja-tabs__button.active:hover,
#cara-kerja .cara-kerja-tabs__button.active:focus {
    background: #11b089;
    color: #ffffff;
    box-shadow: none;
}

#cara-kerja .cara-kerja-tab-content {
    min-height: 1px;
}

/* ── Business type tabs ─────────────────────────────────────────── */
.business-tabs-section {
    background: linear-gradient(90deg, #FFFEFF 0%, #E6F7F2 100%);
}

.usaha-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.usaha-card .usaha-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.usaha-card .usaha-card-body .usaha-title {
    min-height: 2.8rem;
}

.usaha-card .usaha-card-body .usaha-desc {
    flex: 1;
}

.usaha-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.usaha-card-img-placeholder {
    width: 100%;
    height: 220px;
    background: #d9d9d9;
    border-radius: 12px;
}

/* ── Results stats ──────────────────────────────────────────────── */
.results-section {
    background: linear-gradient(90deg, #FFFEFF 0%, #E6F7F2 100%);
}

.stat-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stat-card .stat-text-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-card .stat-text-body .stat-label {
    min-height: 2.4rem;
}

.stat-card .stat-text-body .stat-desc {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #05ae81;
}

/* ── CTA card ───────────────────────────────────────────────────── */
.cta-plugin-card {
    background: linear-gradient(135deg, #fffeff 0%, #e6f7f2 100%);
    border-radius: 16px;
    padding: 64px;
    position: relative;
    overflow: hidden;
}

.cta-plugin-card::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 175, 129, 0.18) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-plugin-card::after {
    content: '';
    position: absolute;
    top: -50px;
    left: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 175, 129, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

/* ── Syarat section ─────────────────────────────────────────────── */
.syarat-section {
    background: #ffffff;
}

/* ── Video section ──────────────────────────────────────────────── */
.video-section {
    background: #ffffff;
}

.video-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.12);
}

.h-testi-plugin {
    height: 18rem;
}


/* ── Responsive tweaks ──────────────────────────────────────────── */

/* ── Tablet (768px – 1023px) ────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Hero: center-align, stacked, scaled typography */
    .hero-ingredients {
        padding-top: 100px;
        padding-bottom: 48px;
        text-align: center;
    }

    .hero-ingredients p.text-start {
        text-align: center !important;
    }

    .hero-ingredients h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero-ingredients .font-24-sb {
        font-size: 20px;
    }

    /* "Apa itu" section: already stacks (col-xl-* degrades to col-12),
                               text-t-center class handles alignment via style_v21.css */

    /* Reason cards: min-height off so cards align cleanly at 2-col */
    .reason-card .card-text-body h3 {
        min-height: auto;
    }

    #fitur-unggulan .fitur-unggulan-card {
        min-height: 100%;
    }

    #fitur-unggulan .fitur-unggulan-card__media {
        flex-basis: 150px;
        min-height: 150px;
    }

    .foodmenu-feature-card {
        padding: 28px;
    }

    .foodmenu-feature-card--horizontal,
    .foodmenu-feature-card--stacked {
        min-height: 100%;
    }

    .foodmenu-feature-card__content {
        max-width: 250px;
    }

    /* Features: 2-column layout for all feature rows */
    .features-section .col-lg-7,
    .features-section .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .features-section .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .feature-card .feature-text-body h3 {
        min-height: auto;
    }

    /* Steps (Cara Kerja): step items are 240px wide with flex-wrap,
                               at tablet width they naturally form a 2×2 grid; just hide connector */
    .step-connector {
        display: none;
    }

    /* Steps: ensure 2-per-row max at tablet width */
    .d-flex.flex-wrap.justify-content-center .d-flex.flex-column[style*="width:240px"] {
        width: calc(50% - 12px) !important;
        max-width: 280px;
    }

    /* Business tabs: single-column centered cards */
    .business-tabs-section .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .usaha-card-img {
        height: 200px;
    }

    .usaha-card .usaha-card-body .usaha-title {
        min-height: auto;
    }

    /* Product card mockup: already hidden via d-none d-lg-block */

    /* CTA card: moderate padding */
    .cta-plugin-card {
        padding: 48px 32px;
    }

    /* Stat cards: already col-md-6 = 2-col ✓ */
    .stat-card .stat-text-body .stat-label {
        min-height: auto;
    }

    /* Video: constrain iframe height on tablet */
    .video-wrapper iframe {
        height: 320px;
    }

    /* Nav tabs: slightly smaller on tablet */
    .nav-pills .nav-link,
    .nav-pills .nav-link.active,
    .nav-pills .nav-link:hover {
        padding: 14px 16px;
        font-size: 13px;
    }

    .h-60 {
        height: 48px;
    }

    .h-testi-plugin {
        height: 18rem;
    }

    .px-price {
        padding-left: 120px;
        padding-right: 120px;
    }
}

/* ── Tablet upper band (992–1023px): lg bootstrap activates,
                           override hero to stay centered & hide mockup per Figma ──── */
@media (min-width: 992px) and (max-width: 1023px) {

    /* Keep hero text full-width, centered */
    .hero-ingredients .col-lg-6:first-child {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    /* Hide product mockup card on this narrow "lg" range */
    .hero-ingredients .col-lg-6.col-xl-6 {
        display: none !important;
    }

    /* Keep features 2-col on this narrow lg range too */
    .features-section .col-lg-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .features-section .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Keep usaha cards single-column */
    .business-tabs-section .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

/* ── Mobile (≤ 767px) ───────────────────────────────────────────── */
@media (max-width: 767px) {

    /* ── Section spacing ─────────────────────────────────────── */
    /* Global section vertical padding reduction */
    section.pt-64 {
        padding-top: 40px !important;
    }

    section.pb-64 {
        padding-bottom: 40px !important;
    }

    /* ── Section 1 · Hero ────────────────────────────────────── */
    .hero-ingredients {
        padding-top: 100px;
        padding-bottom: 40px;
        text-align: center;
    }

    #fitur-unggulan .col-md-6 {
        display: block;
    }

    #fitur-unggulan .fitur-unggulan-card {
        min-height: auto;
        padding: 24px 24px 0;
    }

    #fitur-unggulan .fitur-unggulan-card__title {
        /* font-size: 24px; */
        line-height: 1.35;
    }

    #fitur-unggulan .fitur-unggulan-card__media {
        flex-basis: auto;
        margin: 0px -24px 0;
        min-height: 0;
    }

    .foodmenu-feature-heading {
        max-width: 100%;
    }

    .foodmenu-feature-grid>div {
        display: block;
    }

    .foodmenu-feature-stack {
        gap: 16px;
    }

    .foodmenu-feature-stack__item {
        max-width: 100%;
    }

    .foodmenu-feature-card {
        border-radius: 24px;
        min-height: auto;
        padding: 24px 20px;
    }

    .foodmenu-feature-card--horizontal,
    .foodmenu-feature-card--stacked,
    .foodmenu-feature-card--vertical {
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
    }

    .foodmenu-feature-card__content,
    .foodmenu-feature-card--vertical .foodmenu-feature-card__content,
    .foodmenu-feature-card--stacked .foodmenu-feature-card__content {
        max-width: 100%;
        width: 100%;
    }

    .foodmenu-feature-card__media,
    .foodmenu-feature-card__media--order,
    .foodmenu-feature-card__media--table,
    .foodmenu-feature-card__media--menu {
        max-width: 100%;
        width: 100%;
    }

    .foodmenu-feature-card__title {
        /* font-size: 24px; */
        line-height: 1.3;
    }

    .foodmenu-feature-card__desc {
        line-height: 1.5;
    }

    /* Center the plugin icon wrapper */
    .hero-ingredients p.text-start {
        text-align: center !important;
    }

    /* H1 scale-down */
    .hero-ingredients h1.font-40-b {
        font-size: 24px;
        line-height: 1.3;
    }

    /* Subtitle */
    .hero-ingredients .font-24-sb {
        font-size: 18px;
    }

    /* Body copy */
    .hero-ingredients .font-16-r {
        font-size: 14px;
    }

    /* CTA button full width */
    .hero-ingredients .btn {
        width: 100%;
        display: block;
    }

    /* ── Section 2 · Apa itu ─────────────────────────────────── */
    /* col-xl-4 / col-xl-8 collapse naturally below xl;
                               add gap between title and copy */
    .what-is-section .col-xl-4 {
        margin-bottom: 12px;
    }

    .what-is-section .font-32-b {
        font-size: 22px;
    }

    .what-is-section .font-24-b {
        font-size: 18px;
    }

    /* ── Section 3 · Kenapa Rugi ─────────────────────────────── */
    /* Force single column — col-md-6 already becomes col-12
                               below 768px in Bootstrap 5 ✓; strip min-height locks */
    .reason-card {
        padding: 24px 16px;
    }

    .reason-card .card-text-body h3 {
        min-height: auto;
        font-size: 18px;
    }

    .reason-card .card-text-body p {
        font-size: 14px;
    }

    .reason-card .card-text-body .font-24-b {
        font-size: 20px;
    }

    /* ── Section 4 · Fitur Unggulan ──────────────────────────── */
    .features-section h2.font-32-b {
        font-size: 22px;
    }

    /* Both col-lg-7 / col-lg-5 stack to full-width below lg ✓
                               col-md-4 stacks to full-width below md ✓
                               Only override paddings & min-heights */
    .feature-card {
        padding: 24px;
        margin-bottom: 0;
        /* row g-4 handles gap */
    }

    .feature-card .feature-text-body h3 {
        min-height: auto;
        font-size: 20px;
    }

    .feature-card .feature-text-body p {
        font-size: 14px;
    }

    /* Visual badge scaling */
    .feature-stok-badge {
        padding: 8px 12px;
    }

    .feature-stok-badge span.font-24-b {
        font-size: 16px;
    }

    .feature-minus-badge {
        font-size: 1.2rem;
        padding: 8px 12px;
    }

    .feature-minus-row {
        font-size: 1rem;
        padding: 6px 10px;
    }

    .feature-unit-badge {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    /* CTA button inside features section */
    .features-section .text-center .btn {
        width: 100%;
    }

    /* ── Section 5 · Cara Kerja ──────────────────────────────── */
    .step-connector {
        display: none;
    }

    /* Steps: override inline width:240px → 2-per-row on mobile */
    .d-flex.flex-wrap.justify-content-center>.d-flex.flex-column[style] {
        width: calc(50% - 8px) !important;
        max-width: 180px;
    }

    .step-number-wrap {
        width: 64px;
        height: 64px;
    }

    .step-number {
        font-size: 1.4rem;
    }

    /* Step text scale */
    .d-flex.flex-column.align-items-center .font-20-b {
        font-size: 16px;
    }

    .d-flex.flex-column.align-items-center .font-16-r {
        font-size: 13px;
    }

    /* ── Section 6 · Jenis Usaha ─────────────────────────────── */
    .business-tabs-section h2 {
        font-size: 22px;
    }

    /* Nav pills: fit both tabs on mobile screen */
    .nav-pills .nav-link,
    .nav-pills .nav-link.active,
    .nav-pills .nav-link:hover {
        padding: 10px 14px;
        font-size: 13px;
    }

    .menu-apps {
        width: 100%;
    }

    .menu-apps .nav-item {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .menu-apps .nav-link {
        width: 100%;
        text-align: center;
    }

    .h-60 {
        height: auto;
    }

    /* Usaha cards: col-md-4 stacks to col-12 below 768px ✓
                               Only reduce image height */
    .usaha-card-img {
        height: 180px;
    }

    .usaha-card .usaha-card-body .usaha-title {
        min-height: auto;
        font-size: 18px;
    }

    .usaha-card .usaha-card-body .usaha-desc {
        font-size: 14px;
    }

    /* CTA button below tab content */
    .business-tabs-section .text-center .btn,
    .business-tabs-section>.container>.text-center .btn {
        width: 100%;
    }

    /* ── Section 7 · Syarat & Cara Aktivasi ──────────────────── */
    /* col-md-6 stacks to col-12 ✓ — only spacing tweak */
    .syarat-section .row {
        gap: 24px 0;
    }

    /* ── Section 8 · Setelah Menggunakan ────────────────────── */
    .results-section h2 {
        font-size: 22px;
    }

    /* col-md-6 stacks at mobile ✓ — strip label min-height */
    .stat-card {
        padding: 20px;
    }

    .stat-card .stat-text-body .stat-label {
        min-height: auto;
        font-size: 14px;
    }

    .stat-card .stat-text-body .stat-desc {
        font-size: 14px;
    }

    .stat-number {
        font-size: 1.3rem;
    }

    /* ── Section 9 · Video ───────────────────────────────────── */
    .video-section h2 {
        font-size: 22px;
    }

    .video-wrapper {
        border-radius: 16px;
    }

    .video-wrapper iframe {
        height: 210px;
    }

    /* ── Section 10 · CTA Card ───────────────────────────────── */
    .cta-plugin-card {
        padding: 40px 20px;
        border-radius: 24px;
    }

    .cta-plugin-card h2 {
        font-size: 22px;
    }

    .cta-plugin-card p.font-16-r {
        font-size: 14px;
    }

    .cta-plugin-card .btn {
        width: 100%;
    }

    .h-testi-plugin {
        height: 20rem;
    }
}

/* ── Mobile carousel: reason-slider & steps-slider ─────────── */

/* Shared slider wrapper — overflow hidden prevents clipped peek
                           from leaking outside the section; padding-bottom makes room
                           for the dot indicators                                        */
.reason-slider,
.steps-slider,
.steps-slider-testi {
    overflow: hidden;
    padding-bottom: 44px;
    margin-left: -4px;
    margin-right: -4px;
}

/* Slick list: allow the center-padding peek to be visible */
.reason-slider .slick-list,
.steps-slider .slick-list,
.steps-slider-testi .slick-list {
    overflow: visible;
}

/* Each slide gets horizontal padding to create the card gap */
.reason-slider .slick-slide,
.steps-slider .slick-slide,
.steps-slider-testi .slick-slide {
    padding: 4px 8px 8px;
}

/* reason-card inside slider: full height within slide */
.reason-slider .reason-card {
    margin: 0;
    height: 100%;
}

/* step-slide-inner: full-width centering within slide */
.step-slide-inner {
    padding: 24px 16px;
}

/* ── Dots: brand green, positioned below slider ── */
.reason-slider .slick-dots,
.steps-slider .slick-dots,
.steps-slider-testi .slick-dots {
    bottom: 8px;
}

.reason-slider .slick-dots li button::before,
.steps-slider .slick-dots li button::before,
.steps-slider-testi .slick-dots li button::before {
    font-size: 10px !important;
    color: #d1d5db;
    opacity: 1;
}

.reason-slider .slick-dots li.slick-active button::before,
.steps-slider .slick-dots li.slick-active button::before,
.steps-slider-testi .slick-dots li.slick-active button::before {
    color: #00AF81 !important;
    opacity: 1;
}

/* ── No arrows on these sliders ── */
.reason-slider .slick-prev,
.reason-slider .slick-next,
.steps-slider .slick-prev,
.steps-slider .slick-next,
.steps-slider-testi .slick-prev,
.steps-slider-testi .slick-next {
    display: none !important;
}

.copyright-text {
    border-top: 2px solid #fbae17;
}

.footer-social-icon>a>i {
    border: 2px solid #fbae17;
    font-size: 0.875rem !important;
    color: #ffffff;
    height: 40px;
    width: 40px;
    line-height: 37px;
    font-weight: 500;
    border-radius: 10px;
    margin-right: 10px;
}

.footer-social-icon>a>i:hover {
    background: #fbae17;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.button-white-green:hover {
    background: #00AF81 !important;
    color: #FFFFFF !important;
}

.bg-footer {
    background: #3e3333;
}

.accordion-header .accordion-button,
.accordion-button:not(.collapsed) {
    background-color: #EFF3F6 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none;
}

.accordion-body {
    padding: 0 0px;
    padding-left: 10px;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    color: #FFF !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
}

.accordion-header .accordion-button-v3 {
    background: #ffffff !important;
}

.accordion-button-v3,
.accordion-button-v3:not(.collapsed) {
    background: white !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
}

.accordion-header .accordion-button-v2,
.accordion-header .accordion-button-v3 {
    background-color: #ffffff !important;
    border: 0 !important;
    /* box-shadow: none !important; */
    color: black !important;
}

.accordion-button-v2:not(.collapsed) {
    color: #FFF !important;
}

.accordion-button-v3::after {
    background-image: none;
}

.accordion-button-v3:hover,
.accordion-button-v3:focus {
    box-shadow: none !important;
}

.accor-plugin {
    border: 2px solid #EFF3F6;
    border-radius: 16px !important;
    overflow: auto;
}

.bg-transparent {
    background: transparent;
}

.reason-slider .reason-card-alasan {
    height: 300px;
}

.reason-slider .reason-card-fitur {
    height: 240px;
}

.accordion-header .accordion-button-v4,
.accordion-button-v4:not(.collapsed) {
    background: #ffffff !important;
}

.accordion-button-v4:not(.collapsed) {
    background: linear-gradient(90deg, #00AF81 0%, #42CDA1 100%) !important;
}