/* ================================
   BRAND COLOR SYSTEM
================================= */

:root {

    /* === PRIMARY (Brand) === */
    --color-primary: #71c55d;
    --color-primary-dark: #5fb34c;
    --color-primary-light: #e8f6e4;

    --color-primary-hover: #63b84f;

    --color-text-main: #1e293b;
    --color-text-light: #64748b;

    --color-bg-sidebar: #fdfdfd;
    --color-bg-hover: var(--color-primary);
    --color-bg-active: var(--color-primary);

    --color-border-soft: rgba(0, 0, 0, 0.05);

    /* === SUCCESS === */
    --color-success: #22c55e;
    --color-success-light: #dcfce7;

    /* === WARNING === */
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;

    /* === DANGER === */
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;

    /* === INFO === */
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;

}



/* ==========================================================================
   MALIYA PREMIUM SAAS CARD
   ========================================================================== */

.maliya-premium-card {
    background: var(--color-bg-sidebar); /* Mengikuti warna background kontainer utama */
    border: 1px solid var(--color-border-soft);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

/* Hover State Elevation */
.maliya-premium-card:hover {
    transform: translateY(-4px);
    border-color: rgba(113, 197, 93, 0.3);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .maliya-premium-card:hover {
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Image Area */
.premium-image-area {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Premium Ratio */
    background-color: var(--color-primary-grey-light);
    overflow: hidden;
}

.premium-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.maliya-premium-card:hover .premium-img {
    transform: scale(1.04);
}

.premium-img-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-text-light);
    background: linear-gradient(135deg, var(--color-primary-grey-light) 0%, rgba(148,163,184,0.05) 100%);
}

/* Floating Badges */
.premium-floating-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.premium-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.badge-type-book {
    background: rgba(59, 130, 246, 0.9);
    color: #ffffff;
}

.badge-featured {
    background: rgba(245, 158, 11, 0.95);
    color: #ffffff;
}

/* Card Body */
.premium-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Meta Top Row */
.premium-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.premium-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.premium-tags {
    display: flex;
    gap: 6px;
}

.tag-akad, .tag-delivery {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-primary-grey-light);
    color: var(--color-text-light);
}

/* Typography */
.premium-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.premium-title a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}

.premium-title a:hover {
    color: var(--color-primary);
}

.premium-author {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.premium-desc {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer & Pricing */
.premium-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border-soft);
}

.premium-price-box {
    display: flex;
    flex-direction: column;
}

.price-old {
    font-size: 11px;
    text-decoration: line-through;
    color: var(--color-text-light);
    opacity: 0.7;
}

.price-current {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
}

/* Action Buttons */
.premium-actions-wrapper {
    flex-grow: 0;
}

.btn-premium-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.primary-action {
    background: var(--color-primary);
    color: #ffffff;
}

.primary-action:hover {
    background: var(--color-primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(113, 197, 93, 0.25);
}

.secondary-action {
    background: transparent;
    color: var(--color-primary);
    padding: 8px 0; /* Minimalist link look */
}

.secondary-action:hover {
    color: var(--color-primary-dark);
}

/* Admin Zone */
.premium-admin-zone {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.admin-btn {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border-soft);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-btn.edit {
    color: var(--color-warning);
}
.admin-btn.edit:hover {
    background: var(--color-warning-light);
}

.admin-btn.delete {
    color: var(--color-danger);
}
.admin-btn.delete:hover {
    background: var(--color-danger-light);
}

.maliya-premium-card {
    cursor: pointer; /* Memberitahu user bahwa seluruh kartu bisa diklik */
}
/* Mencegah seleksi teks yang tidak sengaja saat mengklik kartu */
.maliya-premium-card .premium-desc {
    user-select: none;
}

/* ==========================================================================
   MALIYA SPECIFIC BOOK CARD BADGES & IMAGES (Scoped with maliya-bk-)
   ========================================================================== */

/* Image Area Wrapper */
.maliya-bk-image-area {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Golden ratio 16:9 */
    background-color: var(--color-primary-grey-light);
    overflow: hidden;
}

.maliya-bk-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.maliya-bk-img-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-text-light);
    background: linear-gradient(135deg, var(--color-primary-grey-light) 0%, rgba(148,163,184,0.08) 100%);
}

/* Floating Zone & Category Badge (Glassmorphism Modern) */
.maliya-bk-floating-zone {
    position: absolute;
    bottom: 12px; /* Dipindahkan ke bawah gambar agar menyatu mulus dengan body */
    left: 12px;
    pointer-events: none;
    z-index: 2;
}

.maliya-bk-badge-category {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    /* Efek Glassmorphism Mewah */
    background: rgba(15, 23, 42, 0.65); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
}

[data-theme="dark"] .maliya-bk-badge-category {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Meta Top & New Featured Badge Position */
.maliya-bk-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    min-height: 22px; /* Mencegah layout bergeser saat ada/tidaknya featured */
}

/* Featured Badge Baru: Bergaya Label Indikator SaaS */
.maliya-bk-badge-featured {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-warning);
    background: var(--color-warning-light);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.maliya-bk-meta-spacer {
    display: block;
    width: 1px;
    height: 1px;
}

/* Tags Kelompok Kanan (Akad & Tipe Pengiriman) */
.maliya-bk-tags-group {
    display: flex;
    gap: 6px;
}

.maliya-bk-tag-item {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-primary-grey-light);
    color: var(--color-text-light);
    border: 1px solid var(--color-border-soft);
}

.maliya-bk-tag-item.tag-akad-type {
    color: var(--color-primary);
    background: rgba(113, 197, 93, 0.08);
}




/* ========================================
   MALIYA CARD PRODUCT
======================================== */

.maliya-card-product {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.maliya-card-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
}

/* ================= IMAGE ================= */

.maliya-card-product .product-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* 🔥 FIX UTAMA: anti override */
.maliya-card-product .product-image-wrapper img,
.maliya-card-product .product-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

/* Hover zoom */
.maliya-card-product:hover .product-image {
    transform: scale(1.05);
}

/* Placeholder */
.maliya-card-product .product-image-placeholder {
    height: 100%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 14px;
}

/* ================= BADGES ================= */

.badge-type {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50px;
    background: var(--color-primary);
    color: #fff;
}

.badge-featured {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-warning);
    color: #fff;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 50px;
}

/* ================= BODY ================= */

.product-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-category {
    font-size: 10px;
    color: var(--color-text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.product-description-card {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
    flex-grow: 1;
}

/* ================= META ================= */

.product-meta {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-akad,
.badge-shipping,
.badge-digital {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    /* bukan pill lagi */
    font-weight: 500;
    opacity: 0.85;
}

.badge-akad-bay {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-akad-ijarah {
    background: var(--color-info-light);
    color: var(--color-info);
}

.badge-shipping {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge-digital {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ================= FOOTER ================= */

.product-footer {
    margin-top: 15px;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
}

/* ================= ACTIONS ================= */

.product-actions {
    display: flex;
    gap: 8px;
}

.btn-product-edit {
    flex: 1;
    text-align: center;
    background: var(--color-warning-light);
    color: var(--color-warning);
    padding: 6px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}

.btn-product-edit:hover {
    background: var(--color-warning);
    color: #fff;
}

.btn-product-delete {
    flex: 1;
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: none;
    padding: 6px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-product-delete:hover {
    background: var(--color-danger);
    color: #fff;
}


.bundle-course-card:hover {
    background: #fafafa;
    transition: 0.2s;
}

.product-title-link {
    color: inherit;
    text-decoration: none;
    transition: 0.2s ease;
}

.product-title-link:hover {
    color: var(--color-primary);
}

.admin-actions {
    border-top: 1px dashed var(--color-border-soft);
    padding-top: 10px;
}


/* ================================
   MALIYA COURSE CARD
================================= */
.maliya-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.25s ease;
}

.maliya-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.maliya-course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.maliya-course-card .maliya-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.maliya-course-image img {
    position: absolute;
    inset: 0;
    /* shorthand top left right bottom */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    /* ⬅️ penting untuk animasi smooth */
}

.maliya-course-card:hover .maliya-course-image img {
    transform: scale(1.08);
    /* ⬅️ zoom cinematic */
}

.maliya-course-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
}

.maliya-course-card:hover .maliya-course-image::after {
    background: rgba(0, 0, 0, 0.15);
}


/* Style untuk Stamp FREE Besar di Tengah-Miring */
.stamp-free-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Supaya card/gambar di bawahnya tetap bisa diklik */
    z-index: 2; /* Di atas gambar, di bawah floating level/category jika diperlukan */
}

.stamp-free-center span {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(220, 53, 69, 0.9); 
    border: 5px solid rgba(220, 53, 69, 0.9);
    padding: 5px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    transform: rotate(-20deg);
    user-select: none;

    /* Kuncinya di sini: Garis tepi & Bayangan Putih Lembut */
    -webkit-text-stroke: 1.5px #ffffff; /* Membuat border putih pada huruf */
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8)); /* Glow putih tipis di luar stempel */
}



/* title */
.course-title-link {
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
}

.course-title-link:hover {
    color: var(--color-primary);
}

.maliya-course-placeholder {
    background: var(--color-primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 40px;
    color: var(--color-primary);
}

.badge-featured {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-primary);
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 50px;
}


.maliya-course-body {
    padding: 16px;
    flex-grow: 1;
    /* ini penting */
}

.maliya-course-title {
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

.maliya-meta {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.maliya-short-desc {
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 10px;
}

.maliya-course-footer {
    padding: 18px;
    border-top: 1px solid var(--color-border-soft);
}

.maliya-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* BUTTONS */

.btn-outline-maliya {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 10px;
}

.btn-outline-maliya:hover {
    background: var(--color-primary);
    color: white;
}

.btn-success-maliya {
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
}

.btn-success-maliya:hover {
    background: var(--color-primary-dark);
}

.btn-warning-soft {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border-radius: 8px;
}

.btn-danger-soft {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-radius: 8px;
}

/* BADGES */

.badge-soft-success {
    background: var(--color-success-light);
    color: var(--color-success);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
}

.badge-soft-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
}

.badge-soft-info {
    background: var(--color-info-light);
    color: var(--color-info);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
}

.badge-soft-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
}

.badge-soft-secondary {
    background: #f1f5f9;
    color: #64748b;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
}


.carousel-item {
    padding: 10px 0;
    /* optional biar ada nafas */
}

.carousel-inner {
    overflow: visible;
    /* penting kalau ada shadow */
}



/* ========================================
   COURSE STAMP
======================================== */

.course-stamp {
    position: absolute;
    top: 16px;
    left: -40px;
    transform: rotate(-45deg);
    width: 160px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 0;
    letter-spacing: 1px;
    z-index: 10;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* DRAFT */
.stamp-draft {
    background: #f59e0b;
    /* amber */
}

/* ARCHIVED */
.stamp-archived {
    background: #1F3A5F;
    /* amber */
}

/* COMING SOON */
.stamp-coming {
    background: #6b7280;
    /* gray */
}

/* Optional: efek glow halus */
.course-stamp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
}





/* ========================================
   CUSTOM CAROUSEL CONTROL (GRAMEDIA STYLE)
======================================== */

.custom-carousel-control {
    width: auto;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    z-index: 5;
}

/* Hilangkan default icon bootstrap */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}

/* Posisi kiri & kanan */
.carousel-control-prev {
    left: -20px;
}

.carousel-control-next {
    right: -20px;
}

/* Icon bulat */
.custom-carousel-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff !important;
    color: #333 !important;
    font-size: 24px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    transition: all 0.25s ease;
    cursor: pointer;
}

/* Hover effect ala Gramedia */
.custom-carousel-icon:hover {
    background: #0d6efd;
    /* atau warna brand kamu */
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Supaya tidak ganggu card */
.custom-carousel-control {
    pointer-events: none;
}

.custom-carousel-icon {
    pointer-events: auto;
}

/* ================================
   FLOATING LABELS POSITIONING
================================= */

/* CATEGORY - LEFT TOP */
.floating-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    color: var(--color-primary-dark);
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* LEVEL - RIGHT TOP */
.floating-level {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
}

/* BEGINNER */
.level-beginner {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* INTERMEDIATE */
.level-intermediate {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

/* ADVANCED */
.level-advanced {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* DEFAULT */
.level-default {
    background: var(--color-primary-light);
    color: var(--color-primary);
}


/* ORDER THUMB */
.order-thumb {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
}

.order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ini yang bikin auto-crop rapi */
}





/* ================================
   PREMIUM BOOK CARD - MALiYA STYLE
================================= */

.book-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.book-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.book-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 260px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.book-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.book-card:hover img {
    transform: scale(1.05);
}

.book-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.book-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.book-author {
    color: var(--color-text-light);
    font-size: 12px;
    margin-bottom: 14px;
}

.book-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-price {
    font-weight: 700;
    color: var(--color-primary);
}


/* ================================
   BOOK DETAIL PAGE
================================= */

.book-detail-image {
    position: relative;
}

.badge-featured {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--color-primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.product-price-box {
    background: var(--color-primary-light);
    padding: 18px 22px;
    border-radius: 16px;
    display: inline-block;
}

.product-price-box .price {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.product-specs {
    border-top: 1px solid var(--color-border-soft);
    padding-top: 25px;
}

.product-description {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


/* ================================
   CAROUSEL INDICATOR - MALiYA STYLE
================================ */

.carousel-indicators {
    bottom: -10px;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d1d5db;
    border: none;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    width: 24px;
    border-radius: 10px;
    background-color: var(--color-primary);
}

/* .carousel-item img {
    height: 420px;
    object-fit: cover;
} */

.carousel-img {
    height: 350px;
    object-fit: cover;
}


/* COURSE */

.course-preview img {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.course-description {
    line-height: 1.8;
    color: #334155;
}

.course-curriculum .accordion-button {
    font-weight: 600;
}

/* VIDEO PREVIEW */

.preview-list {
    border-top: 1px solid #eee;
}

.preview-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: 0.2s;
}

.preview-item:hover {
    background: #f8fafc;
}





/* =========================
   Contact Section - Minimal
========================= */
/* =========================
   Contact Dark Section
========================= */
.contact-dark {
    background: #0b1f1a;
    /* dark greenish */
    padding: 60px 0;
    color: #fff;
}

/* Item layout */
.contact-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* Icon */
.contact-item i {
    font-size: 22px;
    color: #22c55e;
    /* accent hijau */
    margin-top: 5px;
}

/* Title */
.contact-item h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* Text */
.contact-item p {
    font-size: 14px;
    margin: 0;
    color: #cbd5e1;
}

/* Social */
.social-links {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.social-links a {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.social-links a i {
    font-size: 16px;
}

/* Hover */
.social-links a:hover {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    transform: translateY(-3px);
}

/* Divider (opsional seperti gambar) */
.contact-dark .container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
}





/* ========================================
   MALIYA SERVICE CARD
======================================== */

.maliya-service-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--color-border-soft);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.maliya-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.maliya-service-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.maliya-service-card h5 {
    font-weight: 600;
    margin-top: 10px;
}

.maliya-service-card p {
    color: #6c757d;
    font-size: 14px;
    flex-grow: 1;
}

/* BUTTON */

.btn-maliya {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.btn-maliya:hover {
    background: #333;
}




/* QUOT */
.maliya-quote-section {
    width: 100%;
    /* background: linear-gradient(135deg, #0f172a, #1e293b); */
    /* dark elegan */
    color: #fff;
}

.maliya-quote-title {
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
}

.maliya-quote-text {
    max-width: 800px;
    font-size: 22px;
    line-height: 1.7;
    font-weight: 300;
    font-style: italic;
}




/* =========================SERVICES=========== */


/* ============================================ */

/* ================= TYPOGRAPHY SYSTEM ================= */

h1,
.display-1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

h2 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.3;
}

h3 {
    font-size: 22px;
}

p {
    font-size: 18px;
    line-height: 1.8;
    color: #6c757d;
}


section {
    padding: 100px 0;
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }
}


/* ================= FULLSCREEN ================= */

.section-full {
    min-height: 100vh;
    display: flex;
    align-items: center;
}









/* hero */

.services-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

.services-hero h1 {
    font-size: 2.5rem;
    line-height: 1.3;
}

.services-hero p {
    font-size: 1.05rem;
}

.hero-img {
    max-height: 380px;
    object-fit: contain;
    z-index: 1;
}

/* decorative shape */
.hero-bg-shape {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 193, 7, 0.1);
    /* warning color soft */
    border-radius: 50%;
    z-index: 0;
}

/* list */

.maliya-service-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;

    transition: all 0.35s ease;
    border: 1px solid #f1f1f1;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    overflow: hidden;
}

/* ICON */
.service-icon i {
    font-size: 28px;
    color: #ffc107;
    transition: all 0.3s ease;
}

/* CTA */
.service-link {
    text-decoration: none;
    font-weight: 500;
    color: #212529;
    transition: all 0.3s ease;
}

/* HOVER OVERLAY (gradient soft) */
.service-hover {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 193, 7, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;

}


/* HOVER EFFECT */
.maliya-service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* ICON ANIMATION */
.maliya-service-card:hover .service-icon i {
    transform: scale(1.2) rotate(-5deg);
}

/* CTA ANIMATION */
.maliya-service-card:hover .service-link {
    color: #ffc107;
    transform: translateX(5px);
}

/* BACKGROUND GLOW */
.maliya-service-card:hover .service-hover {
    opacity: 1;
}

.service-wa {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #25D366;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    transition: all 0.3s ease;
}

.service-wa:hover {
    transform: scale(1.1);
    background: #1ebe5d;
}

/* quote */
.services-quote {
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #fff;
}

.quote-text {
    font-size: 1.5rem;
    font-weight: 500;
    max-width: 700px;
    margin: auto;
    line-height: 1.6;
}

.quote-brand {
    font-size: 0.9rem;
    opacity: 0.7;
}



/* why */

.why-card {
    padding: 30px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f1f1f1;

    transition: all 0.3s ease;
}

.why-icon {
    width: 60px;
    height: 60px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 193, 7, 0.1);
    border-radius: 50%;

    font-size: 22px;
    color: #ffc107;

    transition: all 0.3s ease;
}

/* HOVER */
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

.why-card:hover .why-icon {
    transform: scale(1.15) rotate(-5deg);
    background: #ffc107;
    color: #fff;
}


/* process */
.services-process {
    background: #ffc107;
    position: relative;
}

.process-card {
    position: relative;
    padding: 30px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f1f1f1;

    transition: all 0.3s ease;
}

/* NUMBER CIRCLE */
.process-number {
    width: 50px;
    height: 50px;
    margin: auto;

    border-radius: 50%;
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: bold;
    font-size: 18px;

    transition: all 0.3s ease;
}

/* HOVER */
.process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

.process-card:hover .process-number {
    background: #ffc107;
    color: #fff;
    transform: scale(1.1);
}

@media (min-width: 992px) {
    .services-process .col-lg-3 {
        position: relative;
    }

    .services-process .col-lg-3:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 40px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: #eee;
        z-index: 0;
    }
}



/* WAVE */
.services-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    line-height: 0;
    margin-top: -1px;
}

.services-wave svg {
    display: block;
    width: 100%;
    height: 120px;
}

.services-wave path {
    fill: #ffffff;
    /* warna background atas */
}

/* featured */

.services-featured {
    background: #fff;
}

/* IMAGE CARD */
.featured-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* FLOATING BADGE */
.featured-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;

    background: #ffc107;
    color: #000;

    padding: 8px 14px;
    border-radius: 50px;

    font-size: 12px;
    font-weight: 600;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* HOVER */
.featured-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}





/* cta */

.services-cta {
    background: #ffffff;
}

/* CTA BOX */
.cta-box-section {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-radius: 20px;
    padding: 60px 30px !important;
}

/* TEXT */
.cta-box p {
    max-width: 600px;
    margin: auto;
    opacity: 0.9;
}

/* BUTTON */
.cta-box .btn-warning {
    font-weight: 600;
}

.cta-box .btn-outline-light:hover {
    background: #fff;
    color: #000;
}

/* SOFT GLOW */
.cta-box::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 193, 7, 0.2);
    top: -100px;
    right: -100px;
    border-radius: 50%;
}































/* =======================SERVICE SHOW ==================================*/

/* ================= GRADIENT BACKGROUND ================= */

.maliya-gradient-bg {
    position: relative;
    background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.04), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.05), transparent 40%),
        #ffffff;
    overflow: hidden;
}


/* ================= GLOW ================= */

.maliya-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    /* background: radial-gradient(circle, rgba(0, 0, 0, 0.08), transparent 70%); */
    background: radial-gradient(circle, rgba(113, 197, 93, 0.15), transparent 70%);
    filter: blur(60px);
    /* z-index: 0; */
    z-index: 2;
}

.glow-1 {
    top: -50px;
    left: -50px;
}

.glow-2 {
    bottom: -50px;
    right: -50px;
}

/* ================= ANIMATION ================= */

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

.fade-up.delay-1 {
    animation-delay: 0.2s;
}

.fade-up.delay-2 {
    animation-delay: 0.4s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= BUTTON GLOW ================= */

.btn-maliya-glow {
    position: relative;
    padding: 14px 28px;
    border-radius: 12px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    transition: 0.3s;
}

.btn-maliya-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: 0.3s;
}

.btn-maliya-glow:hover::after {
    opacity: 1;
}

.btn-maliya-glow:hover {
    transform: translateY(-2px);
}








/* BUTTON */
.btn-maliya-lg {
    padding: 14px 28px;
    border-radius: 12px;
    background: #000;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.btn-maliya-lg.light {
    background: #fff;
    color: #000;
}

/* BOXES */
.problem-box,
.benefit-box {
    background: #fff;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid #eee;
    text-align: center;
}

/* STEPS */
.step-box {
    padding: 20px;
}

.step-number {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* srvic details */

/* ====================== */
/* ================= LAYOUT SYSTEM ================= */

.section-wrap {
    padding: 100px 0;
}

.section-center {
    max-width: 720px;
    margin: auto;
    text-align: center;
}

.section-split {
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .section-split {
        flex-direction: column;
        text-align: center;
    }
}

/* ================= DARK SECTION ================= */

.dark-section {
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05), transparent 40%),
        #0f1115;
    color: #fff;
}

/* TEXT */

.dark-section .emotional-text {
    color: rgba(255, 255, 255, 0.7);
}

/* GLOW HALUS */

.dark-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.15), transparent 70%);
    top: -100px;
    left: -100px;
    filter: blur(80px);
}




/* ================= HERO ================= */

.service-hero {
    position: relative;
    /* WAJIB */
    overflow: hidden;
    /* biar rapi */
    /* background: #fff; */
    padding-top: 60px;
    padding-bottom: 60px;
}

.service-hero .container {
    position: relative;
    z-index: 3;
}

.hero-icon {
    font-size: 48px;
    color: #1f2d1f;
}

.hero-title {
    font-size: 36px;
    letter-spacing: -0.5px;
    color: #1f2d1f;

    background: linear-gradient(90deg, #1f2d1f, #2f5d2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.7;
}

.hero-bg-image {
    position: absolute;
    right: -100px;
    bottom: -50px;
    width: 600px;
    height: 600px;
    background: url('/pages/img/hero-finance.png') no-repeat center;
    background-size: contain;

    opacity: 0.15;

    filter: blur(5px);
    /* 🔥 ini kunci */

    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);

    pointer-events: none;
    z-index: 1;
    transform: scale(1.1);
}

.service-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 60%, rgba(113, 197, 93, 0.15), transparent 60%);
    z-index: 0;
}

.hero-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #71c55d33, transparent 70%);
    filter: blur(60px);
}

.hero-shape {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.2), transparent);
    top: -100px;
    right: -100px;
    filter: blur(100px);
}






/* ================= STORY SAAS ================= */

.service-story {
    background: #f9fafb;
}

/* WRAPPER = KEY */
.story-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 40px;
    max-width: 800px;
    margin: 0 auto;

    border: 1px solid rgba(0, 0, 0, 0.04);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04),
        0 2px 10px rgba(0, 0, 0, 0.03);

    position: relative;
}

.story-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(circle at top, rgba(113, 197, 93, 0.08), transparent 60%);
    pointer-events: none;
}

/* TITLE */
.story-title {
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.3;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: -0.3px;
}

/* CONTENT */
.story-content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.story-content p {
    font-size: 16.5px;
    line-height: 1.9;
    color: #6c757d;
    margin-bottom: 18px;
}

/* DIVIDER */
.story-divider {
    width: 60px;
    height: 3px;
    background: #71c55d;
    margin: 30px auto;
    border-radius: 10px;
}

/* HIGHLIGHT */
.story-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: rgba(113, 197, 93, 0.08);
    border: 1px solid rgba(113, 197, 93, 0.2);

    padding: 18px 24px;
    border-radius: 14px;

    max-width: 520px;
    margin: 0 auto;
}

/* ICON */
.highlight-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #71c55d;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: bold;
}

/* TEXT */
.story-highlight p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}















/* ================= PROBLEM SaaS ================= */

.service-problem {
    background: #f9fafb;
    padding: 100px 0;
    position: relative;
}

/* subtle danger glow */
.service-problem::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15), transparent 70%);
    top: -100px;
    right: -100px;
}

/* TITLE */
.problem-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.problem-subtitle {
    max-width: 600px;
    margin: auto;
    color: #6b7280;
    line-height: 1.7;
}

/* CARD */
.problem-card {
    position: relative;
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

/* hover */
.problem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

/* HEADER */
.problem-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* DOT */
.problem-dot {
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

/* LABEL */
.problem-label {
    font-size: 12px;
    color: #f59e0b;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* TEXT */
.problem-text {
    font-size: 15px;
    color: #374151;
    line-height: 1.7;
}

/* subtle alert border on hover */
.problem-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .problem-card {
        text-align: left;
    }
}




/* ================= TURNING POINT ================= */

.service-turning {
    background: #f9fafb;
}

/* ================= TURNING ENHANCED ================= */

.turning-enhanced {
    background: #f9fafb;
}

/* LABEL */

.turning-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
}

/* TITLE */

.turning-title {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.4;
    max-width: 700px;
    margin: auto;
}

/* TEXT */

.turning-text {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.9;
    color: #6c757d;
}



/* ================= SOLUTION SaaS ================= */

.service-solution {
    background: #f8fafc;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* subtle glow */
.service-solution::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.25), transparent 70%);
    top: -120px;
    left: -120px;
    z-index: 0;
}

/* TEXT */
.solution-title {
    font-size: 34px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    margin-bottom: 20px;
}

.solution-sub {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* BULLETS */
.solution-points {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.solution-points li {
    font-size: 15px;
    color: #374151;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.solution-points i {
    color: #71c55d;
    margin-right: 10px;
}

/* TRUST */
.solution-trust {
    font-size: 14px;
    color: #9ca3af;
}

/* VISUAL */
.solution-visual {
    position: relative;
    z-index: 1;
}

/* MAIN IMAGE */
.main-dashboard {
    border-radius: 20px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: perspective(1000px) rotateY(-6deg);
    transition: all 0.4s ease;
}

.main-dashboard:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

/* FLOATING CARDS */
.floating-card {
    position: absolute;
    background: #fff;
    padding: 10px 14px !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 8px !important;
    animation: float 4s ease-in-out infinite !important;
}

.floating-card i {
    color: #71c55d;
}

/* positions */
.card-1 {
    top: 20% !important;
    left: -20px !important;
}

.card-2 {
    bottom: 15% !important;
    right: -20px !important;
    animation-delay: 1s !important;
}

/* FLOAT ANIMATION */
@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .main-dashboard {
        transform: none;
    }

    .floating-card {
        display: none;
    }
}



/* ================= DASHBOARD MOCKUP ================= */

/* ================= ISOLATED MOCKUP COMPONENT ================= */

/* Root Wrapper - Mengunci scale dan floating animation */
.ml-mckp-root-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    animation: mlMckpFloatingEffect 6s ease-in-out infinite !important;
}

/* Header / Top Bar Window */
.ml-mckp-window-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 16px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #edf2f7 !important;
    position: relative !important;
}

.ml-mckp-dots-group {
    display: flex !important;
    gap: 6px !important;
    z-index: 5 !important;
}

.ml-mckp-circle-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}
.ml-mckp-circle-dot.ml-mckp-bg-red    { background: #ff5f57 !important; }
.ml-mckp-circle-dot.ml-mckp-bg-yellow { background: #febc2e !important; }
.ml-mckp-circle-dot.ml-mckp-bg-green  { background: #28c840 !important; }

.ml-mckp-window-title {
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #a0aec0 !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Body Workspace */
.ml-mckp-window-body {
    display: flex !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar Navigation */
.ml-mckp-navigation-sidebar {
    width: 115px !important;
    background: #f8f9fa !important;
    padding: 16px 8px !important;
    border-right: 1px solid #edf2f7 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ml-mckp-nav-item {
    font-size: 11px !important;
    padding: 8px 10px !important;
    color: #718096 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

.ml-mckp-nav-item i {
    font-size: 10px !important;
    width: 12px !important;
    text-align: center !important;
}

.ml-mckp-nav-item.ml-mckp-nav-active {
    color: #71c55d !important;
    background: rgba(113, 197, 93, 0.1) !important;
    font-weight: 600 !important;
}

/* Main Dashboard Panel */
.ml-mckp-main-panel {
    flex: 1 !important;
    padding: 16px !important;
    background: #ffffff !important;
    display: block !important;
}

/* Metrics / Stats Row */
.ml-mckp-metrics-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.ml-mckp-card-metric {
    flex: 1 !important;
    background: #f7fafc !important;
    padding: 10px !important;
    border-radius: 10px !important;
    border: 1px solid #edf2f7 !important;
    box-sizing: border-box !important;
}

.ml-mckp-metric-label {
    font-size: 10px !important;
    color: #718096 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.ml-mckp-metric-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.ml-mckp-card-metric.ml-mckp-card-featured {
    background: #71c55d !important;
    border-color: #71c55d !important;
}
.ml-mckp-card-metric.ml-mckp-card-featured .ml-mckp-metric-label { 
    color: rgba(255, 255, 255, 0.9) !important; 
}
.ml-mckp-card-metric.ml-mckp-card-featured .ml-mckp-metric-value { 
    color: #ffffff !important; 
}

/* Chart Container Box */
.ml-mckp-chart-box {
    background: #f7fafc !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

.ml-mckp-chart-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 10px !important;
    color: #718096 !important;
    margin-bottom: 12px !important;
    font-weight: 500 !important;
}

.ml-mckp-meta-badge {
    background: rgba(113, 197, 93, 0.2) !important;
    color: #5bb047 !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
    font-size: 8px !important;
    font-weight: bold !important;
}

/* Chart Track & Columns */
.ml-mckp-chart-render {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    height: 75px !important;
    padding: 0 10px !important;
    margin: 0 !important;
}

/* Selector Kolom Grafik Baru dengan Trik ScaleY */
/* ================= REVISI TOTAL CSS CHART COLUMN ================= */
.ml-mckp-chart-column {
    flex: 1 !important;
    background: linear-gradient(180deg, #8ae075 0%, #71c55d 100%) !important;
    border-radius: 4px 4px 0 0 !important;
    
    /* Menentukan tumpuan animasi di bagian BAWAH batang */
    transform-origin: bottom !important; 
    
    /* State awal: dikempeskan ke bawah */
    /* transform: scaleY(0);  */
    
    /* Jalankan animasi */
    /* animation: mlMckpBarGrowWithScale 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; */
    
    /* 1. Ganti 'forwards' menjadi 'infinite alternate' */
    /* alternate membuat gerakan balik (smooth), bukan patah kembali ke awal */
    animation: mlMckpBarInfinitePulse 2s ease-in-out infinite alternate !important;

    /* Mengambil delay unik dari style inline HTML */
    animation-delay: var(--delay) !important; 
}

/* Keyframes Baru: Mengubah skala vertikal, bukan mengubah tinggi piksel/persen */
/* @keyframes mlMckpBarGrowWithScale {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
} */

/* 2. Keyframes Baru: Berdenyut halus di area puncaknya saja */
@keyframes mlMckpBarInfinitePulse {
    0% {
        transform: scaleY(0.85); /* Agak turun sedikit */
    }
    100% {
        transform: scaleY(1.05); /* Agak naik sedikit melampaui tinggi asli */
    }
}

/* ================= HARD KEYFRAMES ANIMATIONS ================= */
@keyframes mlMckpFloatingEffect {
    0%, 100% {
        transform: translateY(0) scale(1.03);
    }
    50% {
        transform: translateY(-10px) scale(1.03);
    }
}


/* Responsive Lock */
@media (max-width: 480px) {
    .ml-mckp-navigation-sidebar { width: 45px !important; padding: 12px 4px !important; }
    .ml-mckp-nav-item { font-size: 0 !important; justify-content: center !important; padding: 10px 0 !important; }
    .ml-mckp-nav-item i { font-size: 14px !important; width: auto !important; }
    .ml-mckp-metrics-row { flex-direction: column !important; gap: 6px !important; }
}


/* ================= FLOATING INSIGHTS OUTER LOCKS ================= */

/* Wrapper Utama Area Visual */
.ml-mckp-outer-wrapper {
    position: relative !important;
    padding: 30px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Background Glow Hijau Halus */
.ml-mckp-glow-backdrop {
    position: absolute !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.12) 0%, rgba(255,255,255,0) 70%) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Jangkar Posisi (Kunci Utama Agar Tidak Berantakan) */
.ml-mckp-position-anchor {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 520px !important;
}

/* Style Kartu Melayang (Premium Glassmorphism) */
.ml-mckp-floating-card {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    z-index: 10 !important;
    transition: transform 0.3s ease !important;
    box-sizing: border-box !important;
}

.ml-mckp-floating-card:hover {
    transform: scale(1.05) !important;
}

/* Pengatur Posisi Kartu Kiri & Kanan */
.ml-mckp-float-pos-1 {
    top: 15% !important;
    left: -35px !important;
    animation: mlMckpAnimateCardOne 5s ease-in-out infinite !important;
}

.ml-mckp-float-pos-2 {
    bottom: 15% !important;
    right: -25px !important;
    animation: mlMckpAnimateCardTwo 5.5s ease-in-out infinite !important;
}

/* Icon Bulat di Dalam Kartu Melayang */
.ml-mckp-float-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}
.ml-mckp-float-icon.ml-mckp-ico-green {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}
.ml-mckp-float-icon.ml-mckp-ico-blue {
    background: #e3f2fd !important;
    color: #1565c0 !important;
}

/* Teks di Dalam Kartu Melayang */
.ml-mckp-float-text {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ml-mckp-float-lbl {
    font-size: 10px !important;
    color: #868e96 !important;
    line-height: 1.2 !important;
}
.ml-mckp-float-val {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    line-height: 1.2 !important;
}



/* ================= KEYFRAMES UNTUK KARTU MELAYANG YANG HILANG ================= */
@keyframes mlMckpAnimateCardOne {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

@keyframes mlMckpAnimateCardTwo {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(6px) scale(1.02);
    }
}

/* Penyesuaian Responsif Layar Kecil / HP */
@media (max-width: 576px) {
    .ml-mckp-float-pos-1 { left: 5px !important; top: 10% !important; }
    .ml-mckp-float-pos-2 { right: 5px !important; bottom: 10% !important; }
    .ml-mckp-outer-wrapper { padding: 15px 0 !important; }
}












/* ================= BENEFITS ================= */

/* ================= BENEFITS SaaS ================= */

.service-benefits {
    background: #ffffff;
    padding: 100px 0;
    position: relative;
}

/* subtle glow */
.service-benefits::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.15), transparent 70%);
    bottom: -100px;
    right: -100px;
}

/* TEXT */
.benefits-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.benefits-sub {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 30px;
    line-height: 1.7;
}

/* BENEFIT ITEMS */
.benefit-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f9fafb;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: #f3f4f6;
    transform: translateX(6px);
}

/* ICON */
.benefit-icon {
    width: 32px;
    height: 32px;
    background: rgba(113, 197, 93, 0.15);
    color: #71c55d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
}

/* TEXT */
.benefit-content {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}

/* VISUAL */
.benefit-visual {
    position: relative;
}

/* FLOATING INSIGHT */
.insight-card {
    position: absolute;
    background: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: float 5s ease-in-out infinite;
}

.insight-card i {
    color: #71c55d;
}

/* positions */
.insight-1 {
    top: 15%;
    right: -20px;
}

.insight-2 {
    bottom: 10%;
    left: -20px;
    animation-delay: 1s;
}

/* DASHBOARD IMPROVEMENT */
.maliya-dashboard-mockup {
    transform: perspective(1000px) rotateY(6deg);
    transition: 0.4s;
}

.maliya-dashboard-mockup:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

/* FLOAT */
@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .insight-card {
        display: none;
    }

    .maliya-dashboard {
        transform: none;
    }
}


/* ================= PROCESS SaaS ================= */

.service-process {
    background: #f8fafc;
    padding: 100px 0;
    position: relative;
}

/* TITLE */
.process-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.process-subtitle {
    max-width: 600px;
    margin: auto;
    color: #6b7280;
    line-height: 1.7;
}

/* WRAPPER */
.process-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

/* LINE */
.process-line {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #71c55d, rgba(113, 197, 93, 0.2));
    z-index: 0;
}

/* ITEM */
.process-item {
    position: relative;
    width: 23%;
    text-align: center;
    z-index: 2;
}

/* NODE */
.process-node {
    width: 45px;
    height: 45px;
    background: #71c55d;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(113, 197, 93, 0.4);
    transition: 0.3s;
}

/* CARD */
.process-card {
    background: #fff;
    padding: 20px;
    border-radius: 14px;
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

/* HOVER EFFECT */
.process-item:hover .process-card {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.process-item:hover .process-node {
    transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .process-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .process-item {
        width: 100%;
    }

    .process-line {
        display: none;
    }
}





/* ================= EMOTIONAL (FINAL CLEAN) ================= */

.service-emotional {
    position: relative;
    overflow: hidden;
    padding: 120px 0;

    /* DARK BASE + DEPTH */
    /* background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03), transparent 40%),
        linear-gradient(180deg, #0f1115 0%, #0a0c10 100%);

    color: #fff; */

    background: #fff;
    color: #000;
}



.service-emotional::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;

    background: radial-gradient(circle, rgba(113, 197, 93, 0.18), transparent 70%);

    top: -200px;
    left: -200px;

    filter: blur(120px);
    z-index: 0;
}

.service-emotional::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;

    background: radial-gradient(circle, rgba(255, 193, 7, 0.12), transparent 70%);

    bottom: -150px;
    right: -150px;

    filter: blur(120px);
    z-index: 0;
}


.service-emotional .container {
    position: relative;
    z-index: 2;
}

/* TITLE */

.service-emotional .emotional-title {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.4;
    max-width: 720px;
    margin: auto;
}

/* TEXT */

.service-emotional .emotional-text {
    max-width: 640px;
    margin: 20px auto 0;
    font-size: 17px;
    line-height: 1.9;
    /* color: rgba(255, 255, 255, 0.75); */
    color: #000;
}

.service-emotional .emotional-quote-mark {
    font-size: 90px;
    opacity: 0.06;
    margin-bottom: -30px;
}







/* ================= CTA ================= */

/* ================= CTA SaaS PREMIUM ================= */

.service-cta {
    background: linear-gradient(135deg, #0f172a, #020617);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

/* glow background */
.service-cta::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.25), transparent 70%);
    top: -200px;
    left: -200px;
    filter: blur(120px);
}

/* BOX */
.cta-box {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: auto;
}

/* TITLE */
.cta-title {
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* TEXT */
.cta-text {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* BUTTON */
.cta-button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background: #71c55d;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(113, 197, 93, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 35px rgba(113, 197, 93, 0.4);
    color: #ffc107;
}

/* TRUST TEXT */
.cta-trust {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}



/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
/* ================= FAQ SaaS ================= */

.service-faq-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}



/* ================= FAQ WRAPPER ================= */

.faq-wrapper {
    background: #ffffff;
    /* border-radius: 20px; */
    padding: 30px;

    /* subtle border */
    border: 1px solid rgba(0, 0, 0, 0.04);

    /* soft shadow (SaaS banget) */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04),
        0 2px 10px rgba(0, 0, 0, 0.03);

    max-width: 900px;
    margin: 0 auto;
}



/* ITEM */
.service-faq-item {
    border-radius: 14px;
    overflow: hidden;


    border: 1px solid #f1f1f1;
    padding: 12px 16px;
    background: #fafafa;
    transition: all 0.25s ease;
}

/* HOVER */
.service-faq-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* HEADER */
.service-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
}

/* LEFT */
.faq-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* NUMBER */
.faq-number {
    width: 28px;
    height: 28px;
    background: rgba(113, 197, 93, 0.15);
    color: #71c55d;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TITLE */
.service-faq-header h3 {
    font-size: 15px;
    margin: 0;
    color: #111827;
}

/* ICON */
.faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* CONTENT */
.service-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 20px;
}

/* TEXT */
.service-faq-content p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ACTIVE STATE */
.service-faq-item.active {
    border-color: rgba(113, 197, 93, 0.3);


    background: #ffffff;
    border-color: #eaeaea;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
}

/* ACTIVE CONTENT */
.service-faq-item.active .service-faq-content {
    max-height: 200px;
}

/* ICON CHANGE */
.service-faq-item.active .faq-icon {
    background: #71c55d;
    color: #fff;
}

.service-faq-item.active .faq-icon i {
    transform: rotate(45deg);
}

/* SMOOTH ICON */
.faq-icon i {
    transition: transform 0.3s ease;
}





































/* ======PRODUK======= */

/* spacing SaaS */
.py-6 {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* hero */
.hero-section {
    background: #f8f9fa;

}

.hero-bg-shape {
    position: absolute;
    width: 500px;
    height: 500px;
    background: #71c55d;
    opacity: 0.1;
    border-radius: 50%;
    top: -150px;
    right: -150px;
}


/* software section */
.software-bg-shape {
    position: absolute;
    width: 400px;
    height: 400px;
    background: #ffc107;
    opacity: 0.1;
    border-radius: 50%;
    bottom: -120px;
    left: -120px;
}

/* image styling */
.software-image-wrapper img {
    transition: all 0.4s ease;
}

.software-image-wrapper:hover img {
    transform: scale(1.03);
}

/* CTA */
.cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #71c55d, #4caf50);
    z-index: 0;
}

/* card hover */
.product-card,
.course-card {
    transition: all 0.3s ease;
}

.product-card:hover,
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
























































/* ===================================== */
/* COURSE DETAIL SHOW */
/* ==================================== */


/* PREVIEW SECTION */

.course-preview-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.preview-image-wrapper {
    position: relative;
}

.preview-image {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
    opacity: 0;
    transition: 0.3s;
}

.preview-image-wrapper:hover .preview-overlay {
    opacity: 1;
}



/* TITLE + META */
.course-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.course-meta {
    margin-top: 10px;
    color: #6c757d;
    font-size: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* DESCRIPTION */
.course-description-card {
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.course-description-content {
    color: #555;
    line-height: 1.7;
}


/* TAGS */
.tag-chip {
    display: inline-block;
    background: rgba(113, 197, 93, 0.1);
    color: #71c55d;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    margin-right: 6px;
    margin-bottom: 6px;
}





/* SIDEBAR */

.course-sidebar {
    position: sticky;
    top: 100px;
}

.pricing-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

/* PRICE */
.pricing-header {
    text-align: center;
    margin-bottom: 20px;
}

.price {
    font-size: 32px;
    font-weight: 700;
    color: #111;
}

.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

/* CTA */
.btn-enroll {
    background: #71c55d;
    border: none;
    padding: 14px;
    font-weight: 600;
    border-radius: 12px;
    color: #fff;
    transition: 0.3s;
}

.btn-enroll:hover {
    background: #5db84c;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(113, 197, 93, 0.3);
}

/* GUARANTEE */
.guarantee {
    font-size: 12px;
    color: #888;
}

/* INFO */
.course-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

/* TRUST */
.trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trust-item {
    font-size: 13px;
    color: #555;
}

.pricing-card:hover {
    transform: translateY(-4px);
    transition: 0.3s;
}



/* ======================= */
/* KONSEP BARU COURSE LANDING */
/* ===================== */


/* SECTION BASE */
.course-hero {
    padding: 100px 0;
    background: linear-gradient(to bottom, #ffffff, #f9fdf8);
    width: 100%;
}

/* GLOW BACKGROUND */
.hero-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(113, 197, 93, 0.15), transparent 70%);
    filter: blur(80px);
    z-index: 0;
}

.glow-1 {
    top: -100px;
    left: -100px;
}

.glow-2 {
    bottom: -100px;
    right: -100px;
}

/* BADGE */
.hero-badge {
    display: inline-block;
    background: rgba(113, 197, 93, 0.1);
    color: #71c55d;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
}

/* TITLE */
.hero-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
}

/* SUBTITLE */
.hero-subtitle {
    font-size: 18px;
    color: #666;
    margin-top: 15px;
    max-width: 500px;
}

/* META */
.hero-meta {
    margin-top: 15px;
    color: #888;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* CTA */
.btn-enroll {
    background: #71c55d;
    color: white;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-enroll:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(113, 197, 93, 0.3);
}

.btn-preview {
    margin-left: 10px;
    border-radius: 12px;
}



.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.video-modal-content {
    width: 80%;
    max-width: 900px;
    position: relative;
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    color: white;
    cursor: pointer;
}



















/* TRUST */
.hero-trust {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
}

/* IMAGE */
/* WRAPPER */
.hero-image-wrapper {
    position: relative;
}

/* ASPECT RATIO BOX (INI KUNCI) */
.hero-image-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* cocok untuk cover youtube */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

/* IMAGE */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* isi penuh tanpa gepeng */
    transform: scale(1.02);
}

/* FLOATING CARD (ADJUST POSISI) */
/* .floating-card-course {
    position: absolute;
    bottom: -15px;
    left: 20px;
    background: white;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
} */




/* TRUST SECTION */
/* SECTION BASE */
.course-trust {
    padding: 60px 0;
    background: #fff;
}

/* STATS */
.trust-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    text-align: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.trust-item strong {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    display: block;
}

.trust-item span {
    font-size: 13px;
    color: #777;
}

/* TESTIMONIAL */
.trust-testimonial {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-text {
    font-size: 18px;
    font-style: italic;
    color: #444;
}

.testimonial-author {
    margin-top: 10px;
    font-size: 14px;
    color: #888;
}




/* PROBLEM */
/* SECTION BASE */
.course-problem {
    padding: 80px 0;
    background: #f9fdf8;
    text-align: center;
}

/* TITLE */
.problem-title {
    font-size: 32px;
    font-weight: 700;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.4;
}

/* SUBTITLE */
.problem-subtitle {
    margin-top: 15px;
    color: #777;
    font-size: 16px;
}

/* LIST */
.problem-list {
    margin-top: 40px;
    display: grid;
    gap: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ITEM */
.problem-item {
    background: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 15px;
    color: #444;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
}

.problem-item:hover {
    transform: translateY(-3px);
}



/* SOLUTION SECTION */
/* SECTION WRAPPER */
.course-solution {
    padding: 100px 0;
    background: #ffffff; /* Bisa diganti ke fdfdfd untuk kesan clean */
    overflow: hidden;
}

/* HEADER SECTION */
.solution-header {
    margin-bottom: 60px;
    padding: 0 20px;
}

.solution-title {
    font-size: clamp(28px, 5vw, 40px); /* Ukuran teks adaptif */
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.text-gradient {
    color: var(--color-primary);
    /* Opsional: Efek gradasi jika ingin lebih mewah */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution-subtitle {
    margin-top: 20px;
    color: var(--color-text-light);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 1.6;
}

/* GRID SYSTEM */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 20px;
}

/* PREMIUM CARD STYLE */
.solution-item {
    padding: 40px 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--color-border-soft);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    text-align: left; /* Tampilan premium biasanya tidak center-aligned untuk body text */
}

.solution-item:hover {
    transform: translateY(-10px);
    background: #ffffff;
    border-color: var(--color-primary-light);
    box-shadow: 0 20px 40px rgba(113, 197, 93, 0.1); /* Shadow lembut warna brand */
}

/* ICON STYLING */
.icon-wrapper {
    width: 60px;
    height: 60px;
    background: var(--color-primary-light);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: 0.3s;
}

.solution-item:hover .icon-wrapper {
    background: var(--color-primary);
    transform: rotate(-5deg);
}

.solution-icon {
    font-size: 24px;
}

/* CARD TEXT */
.solution-item h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 15px;
}

.solution-item p {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================== */

@media (max-width: 992px) {
    .solution-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Kolom di Tablet */
    }
}

@media (max-width: 768px) {
    .course-solution {
        padding: 60px 0;
    }
    
    .solution-grid {
        grid-template-columns: 1fr; /* 1 Kolom di Mobile */
        gap: 20px;
    }

    .solution-item {
        padding: 30px;
        text-align: center; /* Kembali ke center di mobile agar lebih seimbang */
    }

    .icon-wrapper {
        margin: 0 auto 20px auto;
    }
    
    .solution-title {
        font-size: 28px;
    }
}


/* BENEFTIS SECTION */
/* BENEFITS SECTION */
.course-benefits {
    padding: 100px 0;
    background-color: #fcfdfc; /* Background sangat cerah dengan sedikit tint hijau */
}

.benefits-header {
    margin-bottom: 70px;
    padding: 0 20px;
}

.benefits-title {
    font-size: clamp(26px, 4.5vw, 36px);
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 15px;
}

.benefits-subtitle {
    font-size: 18px;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* GRID LAYOUT */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 0 20px;
}

/* PREMIUM BENEFIT CARD */
.benefit-card {
    display: flex;
    flex-direction: column;
    padding: 35px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    transition: all 0.3s ease;
    height: 100%;
}

.benefit-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
}

/* VISUAL ELEMENT (ICON) */
.benefit-visual {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 12px;
    margin-bottom: 25px;
    font-size: 24px;
}

/* CARD CONTENT */
.benefit-card h5 {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
    line-height: 1.4;
}

.benefit-card p {
    font-size: 14.5px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================
   RESPONSIVE (MOBILE OPTIMIZED)
   ========================================== */

@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet 2 kolom */
    }
}

@media (max-width: 768px) {
    .course-benefits {
        padding: 70px 0;
    }

    .benefits-grid {
        grid-template-columns: 1fr; /* Mobile 1 kolom */
        gap: 15px;
    }

    .benefit-card {
        padding: 25px;
        flex-direction: row; /* Layout horizontal khusus mobile agar hemat tempat */
        align-items: flex-start;
        text-align: left;
    }

    .benefit-visual {
        width: 45px;
        height: 45px;
        min-width: 45px; /* Mencegah ikon menyusut */
        margin-bottom: 0;
        margin-right: 15px;
        font-size: 20px;
    }

    .benefit-card h5 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .benefit-card p {
        font-size: 13.5px;
    }
}


/* SECTION BASE */
.target-audience-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* VISUAL SIDE */
.audience-image-wrapper {
    position: relative;
    padding-right: 20px;
}

.audience-image-wrapper img {
    object-fit: cover;
    height: 450px;
    width: 100%;
}

.floating-badge {
    position: absolute;
    bottom: 30px;
    right: -10px;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: floating 3s ease-in-out infinite;
}

.floating-badge .icon {
    font-size: 24px;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* CONTENT SIDE */
.badge-premium {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title-premium {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.2;
}

.text-primary-brand {
    color: var(--color-primary);
}

.text-description {
    color: var(--color-text-light);
    font-size: 17px;
}

/* LIST STYLING */
.audience-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.audience-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding: 18px 24px;
    background: #fdfdfd;
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 16px;
    transition: 0.3s ease;
}

.audience-item:hover {
    background: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

.check-icon {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audience-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-main);
}

/* ==========================================
   MOBILE VIEW
   ========================================== */
@media (max-width: 991px) {
    .target-audience-section {
        padding: 60px 0;
    }
    
    .audience-image-wrapper {
        margin-bottom: 50px;
        padding-right: 0;
    }

    .audience-image-wrapper img {
        height: 300px;
    }

    .section-title-premium {
        font-size: 28px;
    }
}
















/* CURRICULUM SECTION */

.course-curriculum-section {
    padding: 100px 0;
    background: #ffffff;
}

/* RIGHT SIDE */
.curriculum-side {
    position: sticky;
    top: 120px;
}

/* IMAGE */
.curriculum-image img {
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* INFO */
.curriculum-info {
    margin-top: 10px;
}

.curriculum-points {
    padding-left: 0;
    list-style: none;
}

.curriculum-points li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}





/* HEADER */
.curriculum-header {
    margin-bottom: 30px;
}

/* SECTION CARD */
.curriculum-section {
    border-radius: 16px;
    border: 1px solid #eee;
    margin-bottom: 14px;
    overflow: hidden;
    transition: 0.3s;
    background: #fff;
}

.curriculum-section:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

/* HEADER */
.section-header {
    padding: 18px 20px;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* LEFT */
.section-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* NUMBER */
.section-number {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(113, 197, 93, 0.1);
    color: #71c55d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

/* LESSON */
.lesson-item {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f1f1f1;
    transition: 0.2s;
}

.lesson-item:hover {
    background: #f9fdf8;
}

/* LEFT */
.lesson-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* PREVIEW BADGE */
.badge-preview {
    background: rgba(113, 197, 93, 0.15);
    color: #71c55d;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
}

/* DURATION */
.lesson-duration {
    font-size: 12px;
    color: #888;
}

/* ICON ANIMATION */
.lesson-item i {
    transition: 0.2s;
}

.lesson-item:hover i {
    transform: scale(1.2);
}


/* INSTRUCTOR SECTION */

/* SECTION */
.course-instructors {
    padding: 100px 0;
    background: #f9fdf8;
}

/* TITLE */
.instructor-title {
    font-size: 32px;
    font-weight: 700;
}

.instructor-subtitle {
    margin-top: 10px;
    color: #666;
}

/* CARD */
.instructor-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.instructor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* PHOTO */
.instructor-photo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

/* INFO */
.instructor-headline {
    font-size: 14px;
    color: #71c55d;
    margin-bottom: 10px;
}

.instructor-bio {
    font-size: 13px;
    color: #555;
}

/* EXPERIENCE */
.instructor-exp {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}

/* SOCIAL */
.instructor-social {
    margin-top: 12px;
}

.instructor-social a {
    margin: 0 6px;
    color: #888;
    transition: 0.2s;
}

.instructor-social a:hover {
    color: #71c55d;
}

/* ====================SINGLE INSTRUCTOR=================== */

.instructor-single {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* PHOTO */
.instructor-photo-large img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
}

/* HEADLINE */
.instructor-headline {
    color: #71c55d;
    font-weight: 500;
}

/* BIO */
.instructor-bio {
    color: #555;
    line-height: 1.6;
}

/* STATS */
.instructor-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-box {
    background: #f9fdf8;
    padding: 10px 16px;
    border-radius: 10px;
}

.stat-box strong {
    display: block;
    font-size: 18px;
}

/* SOCIAL */
.instructor-social a {
    margin-right: 10px;
    color: #888;
}

.instructor-social a:hover {
    color: #71c55d;
}

/* =======PRICING========== */
.course-pricing {
    padding: 100px 0;
    background: linear-gradient(to bottom, #ffffff, #f9fdf8);
}

/* TITLE */
.pricing-title {
    font-size: 34px;
    font-weight: 700;
}

.pricing-subtitle {
    color: #666;
    margin-top: 10px;
}

/* GRID */
.pricing-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* CARD */
.pricing-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid #eee;
    transition: 0.3s;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* POPULAR */
.pricing-card.popular {
    border: 2px solid #71c55d;
    transform: scale(1.03);
}

.badge-popular {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #71c55d;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
}

/* PRICE */
.plan-price {
    margin: 15px 0;
}

.plan-price strong {
    font-size: 28px;
    display: block;
}

.compare-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
}

/* DURATION */
.plan-duration {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

/* FEATURES */
.plan-features {
    list-style: none;
    padding: 0;
    text-align: left;
    font-size: 14px;
    color: #555;
}

.plan-features li {
    margin-bottom: 8px;
}

/* CTA */
.btn-enroll {
    margin-top: 15px;
    background: #71c55d;
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    border: none;
    transition: 0.3s;
}

.btn-enroll:hover {
    background: #5db84c;
    box-shadow: 0 10px 25px rgba(113, 197, 93, 0.3);
}

/* GUARANTEE */
.pricing-guarantee {
    font-size: 13px;
    color: #777;
}





















/* =============================== */
/* =========BOOKS SHOW DETAIL LANDING PAGE=========== */
/* =============================== */

/* ===COVER======= */

/* ================= COVER WRAPPER ================= */

.book-cover-wrapper {
    position: sticky;
    top: 100px;
}

/* ================= CARD ================= */

.book-cover-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.book-cover-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

/* ================= BADGE ================= */

.badge-floating {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ================= IMAGE ================= */

.cover-image {
    border-radius: 16px;
    overflow: hidden;
    background: #f8f9fa;
}

.cover-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.book-cover-card:hover img {
    transform: scale(1.05);
}

/* ================= META ================= */

.cover-meta {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-item {
    font-size: 12px;
    padding: 6px 10px;
    background: #f1f3f5;
    border-radius: 999px;
    color: #555;
}



/* =======INFO SECTION=========== */

/* ================= TITLE ================= */

.product-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 10px;
}

/* ================= CATEGORY ================= */

.product-category {
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
}

/* ================= AUTHOR ================= */

.product-author {
    font-size: 14px;
    color: #555;
}

/* ================= HOOK ================= */

.product-hook {
    font-size: 16px;
    color: #666;
    max-width: 600px;
}

/* ================= PRICE CARD ================= */

.price-card {
    margin: 24px 0;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #ffe082;
}

.price-main {
    font-size: 32px;
    font-weight: 800;
    color: #000;
}

.price-meta {
    font-size: 13px;
    color: #666;
}

/* ================= CTA ================= */

.product-cta {
    margin-top: 10px;
}

.btn-buy {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #000;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(255, 152, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(255, 152, 0, 0.4);
}

/* ================= CTA NOTE ================= */

.cta-note {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

/* ================= TRUST ================= */

.product-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-item {
    font-size: 12px;
    padding: 6px 10px;
    background: #f1f3f5;
    border-radius: 999px;
}

.mini-urgency {
    font-size: 12px;
    color: #888;
}


/* ================= SIGNALS ================= */

.product-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 20px;
    font-size: 14px;
    color: #444;
}

.signal-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* LIVE EFFECT */
.live-viewers {
    color: #d32f2f;
    font-weight: 500;
}


/* ================= DESCRIPTION ================= */

.product-description {
    background: #fff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

/* TITLE */
.desc-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 16px;
}

/* HOOK */
.desc-hook {
    font-size: 18px;
    color: #444;
    margin-bottom: 20px;
}

/* CONTENT */
.desc-content {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* BENEFITS */
.desc-benefits {
    margin-top: 30px;
}

.desc-benefits ul {
    padding-left: 0;
    list-style: none;
}

.desc-benefits li {
    margin-bottom: 8px;
}

/* TARGET */
.desc-target {
    margin-top: 25px;
}

.desc-target ul {
    padding-left: 0;
    list-style: none;
}

.desc-target li {
    margin-bottom: 8px;
}

/* CLOSING */
.desc-closing {
    margin-top: 30px;
    font-weight: 500;
    color: #333;
}









/* cours3 h3ro */
.hero-image-box {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 20px; /* Sesuaikan dengan style Anda */
}

/* Overlay gelap tipis saat hover */
.hero-image-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    transition: 0.3s;
}

.hero-image-box:hover::after {
    background: rgba(0,0,0,0.4);
}

/* Tombol Play di Tengah */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    text-decoration: none;
    color: white;
}

.play-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-image-box:hover .play-icon {
    transform: scale(1.1);
    background: #fff;
    color: #000; /* Ganti dengan warna brand Anda */
}

.play-text {
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    opacity: 0.9;
}