/* =========================================
   1. GLOBAL STYLES & NEW COLORS
   ========================================= */

/* --- RESET & LAYOUT --- */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    
    /* REVISI: Kurangi jarak atas agar Navbar nempel dengan Section Ungu */
    /* Estimasi: Logo 60px + Padding Navbar = ~95px */
    padding-top: 95px; 
}

a { text-decoration: none; }

/* --- COLOR PALETTE (REBRANDING) --- */
/* Primary: Ungu (#FE3A9E) */
.text-primary { color: #FE3A9E !important; }
.bg-primary { background-color: #FE3A9E !important; }
.border-primary { border-color: #FE3A9E !important; }

/* Warning/Accent: Kuning (#FFEA04) */
.text-warning { color: #FFEA04 !important; }
.bg-warning { background-color: #FFEA04 !important; }


/* --- NAVBAR STYLES --- */
.navbar {
    background-color: #ffffff;
    transition: all 0.3s ease;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Link Navbar Normal */
.navbar-nav .nav-link {
    font-size: 1rem;
    color: #475569; /* Abu-abu agak gelap */
    font-weight: 500;
    padding: 0.5rem 1.5rem !important;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #FE3A9E !important; /* Ungu saat hover */
}

/* Style Menu Aktif (Pill Shape / Kapsul) */
.active-link {
    background-color: #FFEEF7; /* Ungu sangat muda */
    color: #FE3A9E !important; /* Teks Ungu */
    font-weight: 700 !important;
    border-radius: 50px; 
}

/* Pastikan tidak ada garis bawah lagi */
.active-link::after { display: none !important; }

/* Logo Responsive Control */
.nav-logo-custom {
    height: 60px; /* Tinggi Desktop */
    width: auto;
    object-fit: contain;
    transition: height 0.3s ease;
}


/* --- BUTTONS --- */

/* Tombol Login Navbar (Kuning) */
.btn-login-nav {
    background-color: #FFEA04;
    color: #1e293b;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.6rem 2rem;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-login-nav:hover {
    background-color: #FE3A9E;
    transform: translateY(-2px);
    color: #ffffff;
}

/* Tombol Register Navbar (Ungu Muda) */
.btn-register-nav {
    background-color: #FFEEF7;
    color: #FE3A9E;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.6rem 2rem;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-register-nav:hover {
    background-color: #FE3A9E;
    color: #FFEEF7;
    transform: translateY(-2px);
}

/* --- USER PROFILE (LOGGED IN) --- */
.user-profile-section {
    display: flex;
    align-items: center;
    gap: 12px; /* Jarak antara teks dan avatar */
    text-align: right; /* Teks rata kanan agar dekat dengan avatar */
}

/* Teks Nama User */
.user-name-nav {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 1rem;
    color: #FE3A9E; /* Ungu Fintalk */
    line-height: 1.2;
    display: block;
}

/* Tombol Logout */
.btn-logout-nav {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #64748b; /* Abu-abu */
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s;
}

.btn-logout-nav:hover {
    color: #ef4444; /* Merah saat hover */
}

/* Avatar Lingkaran */
.user-avatar-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    
    /* Style sesuai gambar: Background Kuning, Border Ungu Tipis */
    background-color: #FFEA04; 
    border: 2px solid #FE3A9E; 
    padding: 2px; /* Jarak antara border dan foto */
}
/*--------------------------------------*/

/* Tombol Umum Primary (Ungu) */
.btn-primary-custom {
    background-color: #FE3A9E;
    border: 1px solid #FE3A9E;
    color: white;
}
.btn-primary-custom:hover {
    background-color: #7650e0;
    color: white;
}

/* Tombol Umum Outline */
.btn-outline-custom {
    color: #FE3A9E;
    border: 1px solid #FE3A9E;
    background-color: transparent;
}
.btn-outline-custom:hover {
    background-color: #FE3A9E;
    color: white;
}

/* --- RESPONSIVE ADJUSTMENTS (GLOBAL) --- */
@media (max-width: 991px) {
    /* Tablet & Mobile */
    body {
        padding-top: 70px; 
    }
    .navbar-nav { gap: 5px; margin-top: 15px; }
    .active-link { display: inline-block; }
    
    /* Tombol jadi full width di menu mobile */
    .btn-login-nav, .btn-register-nav { 
        width: 100%; 
        text-align: center; 
        margin-bottom: 10px; 
        display: block;
    }
    
    .user-profile-section {
        margin-top: 15px;
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
}

@media (max-width: 576px) {
    /* Mobile Kecil */
    .nav-logo-custom {
        height: 40px; /* Logo mengecil agar muat */
    }
    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* =========================================
   3. RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 991px) {
    /* Menghilangkan garis biru bawah saat di mobile agar rapi */
    .active-link::after {
        display: none; 
    }
    
    .active-link {
        color: #004aad;
        background-color: #f0f8ff; /* Highlight background sedikit saat mobile */
        border-radius: 5px;
        padding-left: 10px !important;
    }

    /* Mengatur ulang garis pemisah user profile di mobile */
    .user-profile-section {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================================
   SECTION 1: HERO (WIDER LAYOUT)
   ========================================= */

.hero-section {
    padding-top: 40px; 
    padding-bottom: 60px;
    overflow-x: hidden; /* Mencegah scroll samping */
}

/* Container Custom: Agar lebih lebar mendekati pinggir layar Desktop */
.container-wide {
    width: 100%;
    padding-right: 5%; /* Jarak 5% dari kanan */
    padding-left: 5%;  /* Jarak 5% dari kiri */
    margin-right: auto;
    margin-left: auto;
    max-width: 1600px; /* Batas maksimal agar tidak terlalu lebar di layar raksasa */
}

/* Badge "Premier Online..." (Ungu Transparan) */
.bg-primary-light {
    background-color: rgba(254, 58, 158, 0.1); /* #FE3A9E opacity 10% */
    color: #FE3A9E !important;
    font-size: 0.9rem;
}

/* Highlight Kuning pada kata "Build" */
.highlight-yellow {
    background-color: #FFEA04; /* Kuning Baru */
    color: #FE3A9E; /* Teks Ungu */
    border-radius: 8px;
    padding: 2px 12px;
    display: inline-block;
}

/* Tombol Hero "Get Started" (Kuning Baru) */
.btn-warning-custom {
    background-color: #FFEA04;
    color: #1e293b; /* Teks gelap */
    font-size: 1rem;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}
.btn-warning-custom:hover {
    background-color: #eec242;
    transform: translateY(-2px);
}

/* Typography & Layout Responsif */
@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section { text-align: center; }
    .hero-section .d-flex { justify-content: center; }
    
    /* Di HP padding dikembalikan standar agar tidak terlalu mepet */
    .container-wide { 
        padding-right: 20px; 
        padding-left: 20px; 
    }
}

/* =========================================
   SECTION 2: PARTNERS (RUNNING LOOP)
   ========================================= */

.partners-section {
    background-color: #ffffff;
    /* Memberi sedikit bayangan di bawah agar terpisah dari section berikutnya */
    position: relative;
    z-index: 10;
}

/* Wadah Slider */
.slider-container {
    width: 100%;
    margin: auto;
    overflow: hidden; /* Sembunyikan yang keluar jalur */
    position: relative;
}
/*------------------------------------------------------*/

/* =========================================
   SECTION 2: PARTNERS (SMOOTH INFINITE LOOP)
   ========================================= */

.partners-section {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Wadah Slider */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

/* Efek Fade Putih di Kiri & Kanan (Opsional - biar makin estetik) */
.slider-container::before,
.slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px; /* Lebar area pudar */
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Agar tidak menghalangi klik */
}

.slider-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.slider-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Track yang bergerak */
.slide-track {
    display: flex;
    align-items: center;
    gap: 4rem; /* Jarak antar logo lebih lega */
    width: max-content; /* Lebar menyesuaikan isi konten */
    
    /* Animasi */
    /* Karena konten kita duplikasi banyak, durasi harus cukup lama agar tidak pusing */
    animation: scroll 60s linear infinite; 
    
    /* Optimasi Performa */
    will-change: transform;
}

/* Item Logo Individual */
.slide-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pastikan item tidak mengecil */
    flex-shrink: 0; 
}

/* Styling Gambar Logo */
.partner-logo {
    height: 45px; /* Tinggi seragam */
    width: auto;
    object-fit: contain;
    
    /* Efek Grayscale (Hitam Putih) - Opsional */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover Effect */
.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Pause animasi saat mouse diarahkan ke area slider */
.slider-container:hover .slide-track {
    animation-play-state: paused;
}

/* DEFINISI ANIMASI */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Geser setengah dari total panjang track */
        /* Total track = (5 logo x 6 loop) = 30 logo. Geser setengah = 15 logo */
        transform: translateX(-50%); 
    }
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .slide-track {
        gap: 2rem;
        /* Di HP lebih cepat sedikit karena layar pendek */
        animation: scroll 30s linear infinite; 
    }
    .partner-logo {
        height: 30px;
    }
    .slider-container::before,
    .slider-container::after {
        width: 50px; /* Area pudar lebih kecil di HP */
    }
}
/*------------------------------------------------------*/
/* Item Logo Individual */
.slide-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styling Gambar Logo */
.partner-logo {
    height: 50px; /* Tinggi seragam */
    width: auto;  /* Lebar menyesuaikan proporsi */
    object-fit: contain;
    /* Efek Grayscale (Hitam Putih) agar terlihat rapi */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Saat mouse diarahkan, logo jadi berwarna */
.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* DEFINISI ANIMASI JALAN (Kiri ke Kanan secara visual kontennya bergerak ke kiri) */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Bergerak sejauh 50% (karena kita menduplikasi isi track) */
        transform: translateX(-50%);
    }
}

/* Responsif untuk Mobile (Logo lebih kecil & jarak lebih rapat) */
@media (max-width: 768px) {
    .slide-track {
        gap: 2rem;
        animation: scroll 15s linear infinite; /* Sedikit lebih cepat di HP */
    }
    .partner-logo {
        height: 35px;
    }
}

/* =========================================
   SECTION 3: COURSE CATEGORIES (UPDATED)
   ========================================= */

/* 1. Box Pembungkus Utama */
.categories-box {
    background-image: url('../img/categories/bg-yellow.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFEA04; /* Kuning Baru */
    
    border-radius: 40px; 
    padding: 4rem 3rem;
    position: relative;
}

/* 2. Header Typography */
.cat-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: #ffffff;
    color: #FE3A9E; /* Ungu */
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.cat-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1e293b;
    font-size: 3rem;
    line-height: 1.2;
}

/* 3. Kartu Kategori */
.category-card {
    background-color: #ffffff;
    border-radius: 20px; /* Lengkungan lebih besar */
    border: none;
    padding: 1.5rem;
    height: 100%;
    min-height: 220px; /* Tinggi minimum agar kotak terlihat proporsional */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    cursor: pointer;
}

/* Judul Kartu */
.cat-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Subjudul (Total Courses) */
.cat-card-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #64748b;
}

/* 4. Gambar (Shape & Arrow) */
.img-normal { display: block; }
.img-hover { display: none; }

/* Posisi Bawah Kartu */
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 2rem;
}

/* Arrow Icon */
.category-arrow {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

/* Shape Icon */
.category-shape {
    width: 80px; /* Shape agak besar sesuai desain */
    height: auto;
    transition: transform 0.3s ease;
}


/* ===========================
   HOVER STATE (ACTIVE CARD)
   =========================== */

.category-card:hover {
    background-color: #FE3A9E; /* Background Ungu */
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(254, 58, 158, 0.3);
}

.category-card:hover .cat-card-title,
.category-card:hover .cat-card-subtitle {
    color: #ffffff; /* Teks jadi Putih */
}

/* Swap Gambar saat Hover */
.category-card:hover .img-normal { display: none; }
.category-card:hover .img-hover { display: block; }

/* Efek Gerak Sedikit */
.category-card:hover .category-arrow {
    transform: translateX(5px);
}
.category-card:hover .category-shape {
    transform: scale(1.05) rotate(10deg);
}

/* Responsif */
@media (max-width: 768px) {
    .categories-box { padding: 3rem 1.5rem; border-radius: 20px; }
    .cat-title { font-size: 2rem; }
    .category-card { min-height: auto; }
}

/* =========================================
   SECTION 4: ABOUT US (FIXED COLORS)
   ========================================= */

.about-section {
    background-color: #ffffff;
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 6rem 0;
}

/* --- DEKORASI (SHAPE) DENGAN WARNA PRESISI --- */
.about-decor {
    position: absolute;
    z-index: 1; 
    pointer-events: none; 
}

/* Class Pembungkus Shape agar bisa diwarnai */
.shape-mask {
    width: 120px;
    height: 120px;
    display: block;
    
    /* Teknik Masking: Menggunakan gambar sebagai cetakan */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Warna & Bentuk Pink (#FFC1F6) */
.shape-pink {
    background-color: #FFC1F6; 
    /* Pastikan file ini ada! Gunakan shape kotak-kotak */
    -webkit-mask-image: url('../img/categories/shape-2.png');
    mask-image: url('../img/categories/shape-2.png');
}

/* Warna & Bentuk Hijau Lime (#C7F264) */
.shape-lime {
    background-color: #C7F264; 
    /* Pastikan file ini ada! Gunakan shape bintang/kipas */
    -webkit-mask-image: url('../img/categories/shape-1.png');
    mask-image: url('../img/categories/shape-1.png');
}

/* Posisi Dekorasi */
.decor-top-right { top: 10%; right: 8%; transform: rotate(20deg); }
.decor-bottom-left { bottom: 10%; left: 8%; transform: rotate(-15deg); }

.decor-top-left { top: 5%; left: 5%; transform: rotate(-10deg); }
.decor-bottom-right { bottom: 5%; right: 5%; transform: rotate(10deg); }


/* --- FRAME FOTO (WARNA BARU) --- */
.photo-frame {
    width: 220px;
    height: 280px;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Frame Pink */
.frame-pink { background-color: #FFC1F6; }

/* Frame Lime */
.frame-lime { background-color: #C7F264; }

/* Foto di dalam frame */
.photo-frame img {
    width: 90%;
    height: auto;
    object-fit: contain;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* TEXT */
.about-title-large {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 2rem;
}

/* RESPONSIF */
@media (max-width: 992px) {
    .about-decor { display: none !important; }
}

/* =========================================
   SECTION 5: TEAM MEMBERS (NEW DESIGN)
   ========================================= */

.team-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- HEADER --- */
.team-badge {
    background-color: #FFEEF7; /* Ungu Muda */
    color: #FE3A9E; /* Teks Ungu */
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.team-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.team-desc {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* --- KARTU TIM --- */
.team-item {
    text-align: center;
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.team-item:hover {
    transform: translateY(-5px);
}

/* WADAH GAMBAR (Tumpuk Background & Orang) */
.team-image-wrapper {
    position: relative;
    width: 100%;
    /* Mengatur rasio agar kotak terlihat proporsional (mirip persegi/sedikit tinggi) */
    aspect-ratio: 1 / 1.1; 
    border-radius: 24px; /* Sudut melengkung halus */
    overflow: hidden; /* Potong bagian bawah orang yg keluar */
    margin-bottom: 1.5rem;
}

/* 1. Background Shape (Layer Bawah) */
.team-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memenuhi wadah */
    z-index: 1;
}

/* 2. Foto Orang (Layer Atas) */
.team-person {
    position: absolute;
    bottom: 0; /* Nempel bawah */
    left: 50%;
    transform: translateX(-50%); /* Tengah horizontal */
    
    width: 85%; /* Sesuaikan besar orangnya */
    height: auto;
    max-height: 90%; /* Agar kepala tidak kepotong atas */
    object-fit: contain;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Efek Hover: Orang sedikit zoom */
.team-item:hover .team-person {
    transform: translateX(-50%) scale(1.05);
}

/* --- TYPOGRAPHY NAMA & JABATAN --- */
.team-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700; /* Bold */
    margin-bottom: 0.5rem;
}

.name-first { color: #FE3A9E; } /* Nama Depan Ungu */
.name-last { color: #1e293b; }  /* Nama Belakang Hitam */

.team-role {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase; /* Opsional: Huruf besar semua biar rapi */
    letter-spacing: 0.5px;
}

/* Responsif */
@media (max-width: 768px) {
    .team-title { font-size: 2rem; }
    .team-image-wrapper { max-width: 280px; margin-left: auto; margin-right: auto; }
}

/* =========================================
   SECTION 6: POPULAR COURSES (FIXED BADGE & COMPACT FOOTER)
   ========================================= */

/* 1. Box Pembungkus Utama */
.popular-box {
    background-image: url('../img/categories/bg-popular.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffd700;
    border-radius: 40px; 
    padding: 4rem 3rem;
    position: relative;
}

/* --- HEADER TYPOGRAPHY --- */
.popular-header-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: #ffffff;
    color: #FE3A9E; /* Ungu */
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
}

.popular-header-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1e293b;
    font-size: 3rem; 
    line-height: 1.2;
}

.popular-header-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: #ffffff;
    color: #FE3A9E; /* Ungu */
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: all 0.3s;
}

.popular-header-btn:hover {
    background-color: #FFEEF7;
    color: #7650e0;
    transform: translateY(-2px);
}

/* --- CARD STYLES --- */

.popular-card {
    background-color: #ffffff;
    border-radius: 10px; 
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

/* CONTAINER GAMBAR */
.popular-img-container {
    padding: 1rem; 
    padding-bottom: 0; 
    height: 240px; 
    width: 100%;
}

.popular-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px; 
}

/* BODY KONTEN */
.popular-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- BADGE KATEGORI (FIXED COLOR) --- */
.badge-category {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    
    /* GANTI WARNA JADI UNGU MUDA */
    background-color: #FFEEF7; 
    color: #FE3A9E; 
    
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    display: inline-block;
    margin-bottom: 1rem;
}

/* TYPOGRAPHY */
.popular-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1e293b; 
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    
    white-space: nowrap;      
    overflow: hidden;         
    text-overflow: ellipsis;  
    display: block;
    width: 100%;
}

.popular-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    
    height: 4.2rem; 
    overflow: hidden;
}

/* META DATA */
.meta-item {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 0.75rem;
}

.meta-icon { width: 16px; height: 16px; object-fit: contain; }

/* --- FOOTER LAYOUT (COMPACT SIZE) --- */
.card-footer-custom {
    display: flex;
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

/* Kelompok Kiri: Tombol + Harga */
.footer-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak dirapatkan sedikit agar muat */
    flex-grow: 1; /* Biarkan mengambil sisa ruang */
}

/* TOMBOL (Diperkecil agar harga muat) */
.btn-start {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Lebih tebal biar terbaca meski kecil */
    background-color: #FFEA04; 
    color: #1e293b;
    
    /* Ukuran font & padding diperkecil */
    font-size: 0.75rem; 
    padding: 0.5rem 1rem; 
    
    border-radius: 50px;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    transition: background 0.3s;
}

.btn-start:hover {
    background-color: #eec242;
    color: #000;
}

/* HARGA (Diperkecil sedikit) */
.price-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #FE3A9E; /* Ungu */
    
    font-size: 0.9rem; /* Turun dari 1rem ke 0.9rem */
    white-space: nowrap;
}

/* Kelompok Kanan: Rating */
.rating-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0; /* Jangan mau mengecil/tergencet */
}

.rating-stars { display: flex; gap: 1px; }
.star-icon { width: 12px; height: 12px; object-fit: contain; } /* Bintang dikecilkan dikit */
.star-empty { filter: grayscale(100%); opacity: 0.3; }

.rating-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.75rem; /* Rating font kecil */
    color: #000;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .popular-box { padding: 2rem 1rem; border-radius: 20px; }
    .popular-img-container { height: 200px; }
    .popular-header-title { font-size: 2rem; }
    
    /* Di HP sangat kecil (seperti iPhone SE), layout footer bisa stack */
    @media (max-width: 380px) {
        .footer-left { flex-direction: column; align-items: flex-start; gap: 5px; }
    }
}

/* =========================================
   SECTION 7: PRICING PLANS (FIX RADIUS)
   ========================================= */

.pricing-section {
    background-color: #ffffff;
    padding-top: 4rem;
    padding-bottom: 6rem;
}

/* --- KARTU NORMAL (Free & Pro) --- */
.pricing-card {
    background-color: #F9F9FE; 
    border-radius: 24px; /* Radius Kartu Normal */
    border: none;
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-plan-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.pricing-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    min-height: 60px; 
}

.pricing-price {
    font-family: 'Inter', sans-serif;
    font-weight: 800; 
    font-size: 3rem;
    color: #1e293b;
    line-height: 1;
}

.pricing-period {
    font-weight: 400;
    font-size: 0.9rem;
    color: #64748b;
}

/* --- KARTU FEATURED (Starter - Ungu) --- */
.pricing-card-featured {
    background-color: #FE3A9E; 
    color: #ffffff;
    
    /* UPDATE: MENYAMAKAN RADIUS DENGAN KARTU LAIN */
    border-radius: 24px; 
    
    box-shadow: 0 20px 40px rgba(254, 58, 158, 0.3);
    transform: scale(1.05); 
    z-index: 2;
    display: flex; /* Tambahkan flex agar layout konsisten */
    flex-direction: column; /* Tambahkan column direction */
}

.pricing-card-featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.pricing-card-featured .pricing-plan-name,
.pricing-card-featured .pricing-desc,
.pricing-card-featured .pricing-price,
.pricing-card-featured .pricing-period {
    color: #ffffff; 
}

/* Badge "Best Choice" */
.best-choice-badge {
    background-color: #ffffff;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
}

/* --- LIST FITUR --- */
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

.icon-check, .icon-cross {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* --- TOMBOL --- */
.btn-pricing {
    background-color: #ffffff;
    color: #1e293b;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    padding: 1rem;
    width: 100%;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    margin-top: auto; 
}

.btn-pricing:hover {
    background-color: #f1f5f9;
    color: #000;
}

.btn-pricing-icon {
    width: 18px;
    height: auto;
}

/* Responsive */
@media (max-width: 991px) {
    .pricing-card-featured { transform: scale(1); margin: 20px 0; }
    .pricing-card-featured:hover { transform: translateY(-5px); }
}

/* =========================================
   SECTION 8: HOW IT WORKS (NO CIRCLE)
   ========================================= */

.how-it-works-section {
    background-color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* 1. Container Ikon Baru (Tanpa Lingkaran) */
.step-icon-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px; /* Tinggi area ikon agar rata */
}

/* 2. Styling Ikon */
.step-icon {
    width: 100px; /* Ukuran ikon cukup besar sesuai desain */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Efek Hover: Ikon naik sedikit */
.step-item:hover .step-icon {
    transform: translateY(-10px);
}

/* 3. Typography Judul Item */
.step-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* 4. Deskripsi */
.step-desc {
    font-family: 'Inter', sans-serif;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 280px; /* Membatasi lebar teks agar rapi di tengah */
    margin: 0 auto;   /* Tengah */
}

/* Responsif */
@media (max-width: 768px) {
    .step-icon { width: 80px; }
    .step-title { font-size: 1.25rem; }
}

/* =========================================
   SECTION 9: TESTIMONIALS (IMAGE BG)
   ========================================= */

/* 1. Box Kuning Utama */
.testimonials-box {
    background-image: url('../img/categories/bg-testimonials.png'); /* Pakai bg kuning yg sama */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffd700;
    
    border-radius: 40px;
    padding: 4rem 2rem;
    position: relative;
}

/* 2. Header Typography */
.testi-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background-color: #ffffff;
    color: #FE3A9E; /* Ungu */
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.testi-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1e293b;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 3rem;
}

/* 3. White Card sebagai GAMBAR */
.testimonial-card-bg {
    /* PENTING: Menggunakan gambar background */
    background-image: url('../img/testimonials/bg-white-card.png');
    background-size: 100% 100%; /* Stretch gambar memenuhi area */
    background-repeat: no-repeat;
    background-position: center;
    
    padding: 4rem 3rem; /* Padding dalam agar teks tidak mepet */
    max-width: 900px;
    margin: 0 auto;
    min-height: 400px; /* Tinggi minimal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 4. Konten Testimoni */
.testi-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #475569; /* Abu-abu teks */
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 80%;
    margin: 0 auto 2rem auto;
}

/* 5. Navigasi & User Profile */
.nav-arrow-icon {
    width: 50px;  /* Ukuran tombol panah */
    height: 50px;
    cursor: pointer;
    transition: transform 0.2s;
}

.nav-arrow-icon:hover {
    transform: scale(1.1);
}

.user-img-testi {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.user-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.user-role {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #FE3A9E; /* Ungu */
    font-size: 0.9rem;
}

/* Responsif */
@media (max-width: 768px) {
    .testimonials-box { padding: 2rem 1rem; border-radius: 20px; }
    .testi-title { font-size: 2rem; }
    .testimonial-card-bg { 
        padding: 2rem 1.5rem; 
        background-size: cover; /* Di HP pakai cover agar tidak gepeng */
        border-radius: 20px; /* Fallback radius */
    }
    .testi-text { font-size: 0.95rem; max-width: 100%; }
    .nav-arrow-icon { width: 40px; height: 40px; }
}

/* =========================================
   SECTION 10: BLOG / NEWS (SPLIT LAYOUT)
   ========================================= */

.blog-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- HEADER --- */
.blog-badge {
    background-color: #FFEEF7; /* Ungu Muda */
    color: #FE3A9E; /* Ungu */
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 1rem;
}

.blog-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 2.5rem;
    line-height: 1.2;
}

.blog-desc-header {
    color: #64748b;
    line-height: 1.6;
    max-width: 400px;
}

/* Tombol "View More" (Kuning) */
.btn-view-more {
    background-color: #FFEA04;
    color: #1e293b;
    font-weight: 600;
    padding: 0.6rem 2rem;
    border-radius: 50px;
    border: none;
    transition: all 0.3s;
}
.btn-view-more:hover {
    background-color: #eec242;
    transform: translateY(-2px);
}

/* --- KONTEN KIRI (FEATURED) --- */
.featured-blog-img-container {
    width: 100%;
    height: 350px; /* Tinggi gambar besar */
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.featured-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.blog-category {
    color: #FE3A9E;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: block;
}

.featured-blog-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 1rem;
    transition: color 0.3s;
}

.featured-blog-title:hover { color: #FE3A9E; }

.blog-excerpt {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-date {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* --- KONTEN KANAN (GRID KECIL) --- */
.small-blog-img-container {
    width: 100%;
    height: 140px; /* Tinggi gambar kecil */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.small-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.small-blog-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    
    /* Limit 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsif */
@media (max-width: 991px) {
    .blog-desc-header { margin-top: 1rem; margin-bottom: 1rem; }
    .featured-blog-img-container { height: 250px; }
}

/* =========================================
   SECTION 11: FAQ
   ========================================= */

.faq-card {
    background-color: #f8f9fa; /* Warna abu-abu sangat muda */
    border-radius: 16px;       /* Sudut melengkung */
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Efek Hover (Opsional, biar interaktif) */
.faq-card:hover {
    background-color: #ffffff;
    border-color: #e9ecef;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.faq-card h4 {
    font-size: 1.25rem;
    line-height: 1.4;
}

.faq-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================
   FOOTER STYLES (UPDATED)
   ========================================= */

.footer-section {
    background-color: #1a1a1a; /* Hitam Pekat */
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

/* --- JUDUL KOLOM DENGAN GARIS KUNING --- */
.footer-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 15px;
    color: #ffffff;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px; /* Panjang garis */
    height: 3px; /* Tebal garis */
    background-color: #FFEA04; /* Kuning Fintalk Baru */
    border-radius: 2px;
}

/* --- LOGO & DESKRIPSI --- */
.footer-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.footer-slogan {
    font-size: 0.75rem;
    color: #64748b; /* Abu-abu */
}

.footer-desc {
    color: #94a3b8; /* Abu-abu lebih terang dikit */
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 300px;
}

/* --- LINK LIST --- */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #FFEA04; /* Hover Kuning */
    padding-left: 5px;
}

/* --- KONTAK --- */
.footer-contact li {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.footer-contact i {
    color: #ffffff;
    margin-top: 4px;
}

.footer-contact span {
    color: #b0b0b0;
    font-size: 0.95rem;
}

/* --- SOCIAL ICONS --- */
.social-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #FFEA04; /* Background Kuning */
    border-color: #FFEA04;
    color: #1e293b; /* Icon Hitam */
    transform: translateY(-3px);
}

/* --- COPYRIGHT --- */
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4rem;
    padding-top: 2rem;
    text-align: center;
}

.footer-copyright p {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
}

/* Link List */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #b0b0b0; /* Abu-abu */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links a:hover {
    color: #ffcc00; /* Berubah kuning saat hover */
    padding-left: 5px; /* Efek geser sedikit */
}

/* Contact Text */
.footer-contact .text-secondary {
    color: #b0b0b0 !important;
}

/* Social Icons (Bulat dengan Border Putih) */
.social-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #ffcc00; /* Background jadi kuning */
    border-color: #ffcc00;
    color: #000000; /* Icon jadi hitam */
    transform: translateY(-3px);
}

/* =========================================
   PAGE: ABOUT US
   ========================================= */

/* SECTION 1: HERO */
.about-hero-section {
    /* Pastikan gambar ada di public/img/about/hero-bg.png */
    background-image: url('../img/about/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FE3A9E; /* Warna Ungu Fintalk (Fallback) */
    
    width: 100%;
    padding: 8rem 0; /* Padding atas bawah besar agar luas */
    position: relative;
}

/* Typography Khusus */
.about-hero-section h1 {
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}

/* Warna Kuning Spesifik (#FFEA04) */
.about-hero-section .text-warning {
    color: #FFEA04 !important;
}

/* Teks Putih agak transparan */
.text-opacity-75 {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .about-hero-section {
        padding: 5rem 0;
    }
    .about-hero-section h1 {
        font-size: 2rem; /* Perkecil judul di HP */
    }
    .about-hero-section p {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

/* =========================================
   PAGE: ABOUT US - SECTION 2 (OUR STORY)
   ========================================= */

.about-story-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: #ffffff;
}

/* 1. Badge "Our Story" */
.story-badge {
    display: inline-block;
    background-color: #FFEEF7; /* Ungu sangat muda */
    color: #FE3A9E; /* Teks Ungu */
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
}

/* 2. Headline Typography */
.story-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    color: #1e293b;   /* Hitam */
    font-size: 3.5rem; /* Ukuran Besar sesuai desain */
    line-height: 1.15; /* Jarak baris rapat */
}

/* 3. Deskripsi Paragraf */
.story-desc {
    font-family: 'Inter', sans-serif;
    color: #475569; /* Abu-abu */
    font-size: 1.15rem; /* Agak besar agar mudah dibaca */
    line-height: 1.6;
    max-width: 90%;
}

/* 4. Container Gambar (Kotak Ungu Pucat) */
.story-img-container {
    background-color: #F5F3FF; /* Background Ungu Pucat sekali */
    border-radius: 24px; /* Sudut melengkung */
    padding: 0;
    overflow: hidden; /* Agar gambar tidak keluar radius */
    
    /* Rasio aspek agar kotak terlihat bagus */
    aspect-ratio: 4 / 3.5; 
    
    display: flex;
    align-items: flex-end; /* Gambar nempel bawah */
    justify-content: center;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sesuaikan isi gambar */
    /* Jika pakai foto cutout (transparan), ganti jadi object-fit: contain; */
}

/* Responsif Mobile */
@media (max-width: 991px) {
    .story-title {
        font-size: 2.5rem;
    }
    .story-desc {
        font-size: 1rem;
        max-width: 100%;
    }
    .story-img-container {
        aspect-ratio: 1 / 1; /* Jadi kotak di HP */
    }
}

/* =========================================
   PAGE: ABOUT US - SECTION 3 (STATS)
   ========================================= */

.about-stats-section {
    background-color: #ffffff;
    padding-top: 4rem;
    padding-bottom: 4rem;
    /* Opsional: Garis pemisah tipis di bawah jika mau */
    /* border-bottom: 1px solid #f1f5f9; */
}

.stat-item {
    padding: 1rem;
}

/* Angka Besar */
.stat-number {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 4rem;  /* Ukuran Sangat Besar */
    color: #000000;   /* Hitam Pekat */
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Teks Deskripsi */
.stat-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #64748b; /* Abu-abu Slate (Cool Gray) */
    margin-bottom: 0;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .stat-number {
        font-size: 2.5rem; /* Kecilkan di HP */
    }
    .stat-label {
        font-size: 0.9rem;
    }
}

/* =========================================
   PAGE: ABOUT US - SECTION 4 (VISION & MISSION)
   ========================================= */

.vision-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Badge */
.vision-badge {
    display: inline-block;
    background-color: #FFEEF7; /* Ungu Muda */
    color: #FE3A9E; /* Ungu */
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
}

/* Judul Kecil (Vision/Mission) */
.vm-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    color: #FE3A9E;   /* Ungu sesuai desain */
    font-size: 1.75rem;
}

/* Paragraf */
.vm-desc {
    color: #64748b; /* Abu-abu */
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- CUSTOM LIST MISI --- */
.mission-list {
    list-style: none; /* Hilangkan bullet default */
    padding-left: 0;
    margin: 0;
}

.mission-item {
    display: flex; /* Agar icon dan teks sejajar */
    align-items: flex-start; /* Icon tetap di atas meski teks panjang */
    gap: 1.5rem; /* Jarak icon ke teks */
    margin-bottom: 1.5rem;
    
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.6;
}

.mission-icon {
    width: 24px; /* Ukuran icon panah */
    height: auto;
    margin-top: 5px; /* Sedikit turun agar pas dengan baris pertama teks */
    flex-shrink: 0; /* Mencegah icon gepeng */
}

/* Responsif */
@media (max-width: 991px) {
    .vision-section .display-3 { font-size: 2.5rem; }
}

/* =========================================
   PAGE: ABOUT US - SECTION 5 (VALUES - HORIZONTAL)
   ========================================= */

/* 1. Box Pembungkus */
.values-box {
    background-image: url('../img/about/bg-values.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFEA04; 
    
    border-radius: 40px; 
    padding: 5rem 4rem;
}

/* 2. Kartu Values (Layout Horizontal) */
.value-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    
    /* Flexbox agar Ikon di Kiri, Teks di Kanan */
    display: flex;
    align-items: flex-start; /* Rata atas */
    gap: 1.5rem; /* Jarak antara Ikon dan Teks */
    
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Persiapan border */
    cursor: default;
}

/* --- STATE HOVER (Berubah Ungu) --- */
.value-card:hover {
    background-color: #FE3A9E; /* Jadi Ungu */
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(254, 58, 158, 0.2);
}

/* 3. Lingkaran Icon */
.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FFEEF7; /* Awalnya Ungu Muda */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Agar lingkaran tidak gepeng */
    transition: background-color 0.3s ease;
}

.value-icon {
    width: 28px;
    height: auto;
    object-fit: contain;
}

/* Saat Hover: Lingkaran jadi Putih */
.value-card:hover .icon-circle {
    background-color: #ffffff;
}

/* 4. Tipografi */
.value-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b; /* Awalnya Hitam */
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.value-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    color: #64748b; /* Awalnya Abu-abu */
    line-height: 1.6;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Saat Hover: Teks jadi Putih */
.value-card:hover .value-title,
.value-card:hover .value-desc {
    color: #ffffff;
}

/* Responsif */
@media (max-width: 991px) {
    .values-box { padding: 3rem 1.5rem; border-radius: 20px; }
    /* Di HP, kalau teks kepanjangan bisa stack ke bawah opsional */
    /* .value-card { flex-direction: column; } */ 
}

/* =========================================
   PAGE: ABOUT US - SECTION 6 (VIDEO STORY)
   ========================================= */

.video-section {
    padding-top: 4rem;
    padding-bottom: 6rem;
}

/* Container Video */
.video-box {
    border-radius: 24px; /* Sudut melengkung besar */
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    
    /* Rasio Aspek (Opsional, agar tetap proporsional 16:9) */
    aspect-ratio: 16 / 9;
}

/* Gambar Cover */
.video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Efek Zoom halus saat hover container */
.video-box:hover .video-cover {
    transform: scale(1.03);
}

/* Tombol Play (Overlay Tengah) */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Teknik centering CSS */
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Ukuran Icon Play */
.play-icon-img {
    width: 100px; /* Sesuaikan ukuran icon PNG Anda */
    height: auto;
    opacity: 0.9;
}

/* Efek Hover Tombol Play */
.video-box:hover .play-btn-overlay {
    transform: translate(-50%, -50%) scale(1.1); /* Membesar sedikit */
    cursor: pointer;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .video-box { border-radius: 16px; }
    .play-icon-img { width: 60px; } /* Icon lebih kecil di HP */
}

/* =========================================
   PAGE: ABOUT US - SECTION 7 (CTA BANNER)
   ========================================= */

.cta-box {
    /* Background Image yang sudah disiapkan */
    background-image: url('../img/about/bg-cta.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FE3A9E; /* Fallback Ungu */
    
    border-radius: 40px; /* Sudut Melengkung Besar */
    padding: 6rem 2rem;  /* Padding dalam yang lega */
    position: relative;
    box-shadow: 0 20px 40px rgba(254, 58, 158, 0.2);
}

/* Typography Khusus CTA */
.cta-box h2 {
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

/* Tombol Kuning CTA */
.btn-cta-yellow {
    background-color: #FFEA04; /* Kuning Fintalk */
    color: #1e293b; /* Teks Hitam */
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-cta-yellow:hover {
    background-color: #eec242;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    color: #000;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .cta-box {
        padding: 4rem 1.5rem;
        border-radius: 24px;
    }
    .cta-box h2 {
        font-size: 2rem;
    }
}

/* =========================================
   PAGE: PROGRAMS
   ========================================= */

/* SECTION 1: HERO PROGRAMS */
.programs-hero-section {
    /* Menggunakan background yang sama dengan About Hero */
    background-image: url('../img/about/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FE3A9E; /* Fallback Ungu */
    
    width: 100%;
    padding: 9rem 0; /* Padding sedikit lebih besar agar lega */
    position: relative;
}

/* Typography Khusus Programs */
.programs-hero-section h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .programs-hero-section {
        padding: 6rem 0;
    }
    .programs-hero-section h1 {
        font-size: 2.2rem; /* Perkecil judul di HP */
    }
    .programs-hero-section p {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

/* =========================================
   PAGE: PROGRAMS - SECTION 2 (COURSE LIST)
   ========================================= */

.programs-list-section {
    background-color: #F9F9FE; /* Background Section Abu Ungu Muda */
    padding-top: 4rem;
    padding-bottom: 6rem;
}

/* Judul Section (New Courses / Featured) */
.program-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

/* --- KARTU UMUM (Base Style) --- */
.program-card {
    background-color: #ffffff;
    border-radius: 20px;
    border: none;
    padding: 1rem; /* Padding luar pembungkus konten */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

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

/* Gambar Course */
.program-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px; /* Radius gambar */
    min-height: 200px;
}

/* Badge Kategori */
.program-badge {
    background-color: #ffffff;
    border: 1px solid #FFEEF7;
    color: #FE3A9E; /* Ungu */
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Judul Course */
.program-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

/* Deskripsi */
.program-desc {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    
    /* Limit 3 baris */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta Data */
.program-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #475569;
}

/* Footer (Tombol, Harga, Rating) */
.program-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 1.2rem;
}

/* Tombol View Courses (Kuning) */
.btn-view-course {
    background-color: #FFEA04;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-view-course:hover {
    background-color: #eec242;
    color: #000;
}

/* Harga (Ungu Besar) */
.program-price {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #FE3A9E;
    font-size: 1.5rem;
}

/* Rating */
.program-rating {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

/* --- SPESIFIK: LARGE CARD (New Course) --- */
.large-card .program-title {
    font-size: 2rem; /* Judul lebih besar */
}
.large-card .program-img {
    height: 350px; /* Gambar lebih tinggi */
}

/* --- SPESIFIK: SMALL CARD (Featured) --- */
.small-card .program-title {
    font-size: 1.25rem;
}
.small-card .program-img {
    height: 220px;
}
.small-card .program-price {
    font-size: 1.25rem;
}

/* Responsif */
@media (max-width: 991px) {
    .large-card .program-img { height: 250px; margin-bottom: 1rem; }
    .small-card .program-img { height: 200px; margin-bottom: 1rem; }
    .program-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
    .program-footer > div { width: 100%; display: flex; justify-content: space-between; align-items: center; }
}

/* =========================================
   PAGE: PROGRAMS - SECTION 3 (DISCOVER ALL - FIXED)
   ========================================= */

.discover-section {
    padding-top: 4rem;
    padding-bottom: 6rem;
    background-color: #ffffff;
}

/* --- FILTER BUTTONS & SCROLLBAR FIX --- */
.filter-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #64748b;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s;
    white-space: nowrap; /* Teks tidak turun baris */
}

.filter-btn:hover, .filter-btn.active {
    border-color: #FE3A9E;
    color: #FE3A9E;
    background-color: #FFEEF7;
}

/* FIX SCROLLBAR: Bisa digeser tapi Bar hilang */
.no-scrollbar {
    overflow-x: auto;       /* Wajib: Izinkan scroll horizontal */
    overflow-y: hidden;     /* Sembunyikan scroll vertikal */
    white-space: nowrap;    /* Wajib: Jejerkan konten ke samping */
    
    /* Sembunyikan Bar di Firefox */
    scrollbar-width: none;  
    
    /* Sembunyikan Bar di IE/Edge */
    -ms-overflow-style: none;  
    
    /* Agar geser di HP lebih smooth */
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 10px; /* Ruang napas bawah */
}

/* Sembunyikan Bar di Chrome/Safari */
.no-scrollbar::-webkit-scrollbar { 
    display: none;  
}

/* --- DISCOVER CARD --- */
.discover-card {
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px; /* Radius Kartu */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

/* BARU: Wrapper Gambar dengan Padding */
.discover-img-wrapper {
    padding: 1rem; /* Jarak dari tepi kartu */
    padding-bottom: 0;
    width: 100%;
    height: 220px; /* Tinggi gambar tetap */
}

.discover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px; /* Radius Gambar */
}

.discover-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Badge Kategori */
.discover-badge {
    background-color: #FFEEF7;
    color: #FE3A9E;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 0.8rem;
}

/* Judul */
.discover-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.1rem; 
}

/* Deskripsi */
.discover-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1.2rem;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.7rem; 
}

/* Meta Data */
.discover-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.discover-meta img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    margin-right: 4px;
}

/* Footer: Harga, Rating, Tombol */
.discover-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    gap: 8px;
}

.discover-price {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #FE3A9E; 
    font-size: 1rem;
    white-space: nowrap;
}

.discover-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}
.discover-rating img { width: 12px; height: 12px; }
.discover-rating span { font-size: 0.75rem; font-weight: 600; margin-left: 2px; }

.btn-discover-view {
    background-color: #FFEA04; 
    color: #1e293b;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s;
}

.btn-discover-view:hover {
    background-color: #eec242;
    color: #000;
}

/* Pagination */
.pagination-custom {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 3rem;
}
.page-link-custom {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 8px;
    color: #64748b; text-decoration: none; font-size: 0.9rem;
    transition: all 0.3s;
}

.page-link-custom.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.page-link-custom:hover, .page-link-custom.active {
    background-color: #FE3A9E; color: #ffffff; border-color: #FE3A9E;
}

/* =========================================
   PAGE: PROGRAMS - SECTION 4 (CTA YELLOW)
   ========================================= */

.programs-cta-box {
    /* Background Image tetap sama namanya */
    background-image: url('../img/programs/bg-cta.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* GANTI BACKGROUND JADI KUNING */
    background-color: #FFEA04; 
    
    border-radius: 40px; 
    padding: 6rem 2rem;
    position: relative;
    /* Ubah warna bayangan jadi kuning keemasan */
    box-shadow: 0 20px 40px rgba(254, 212, 92, 0.3);
}

/* Typography Khusus CTA */
.programs-cta-box h2 {
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

/* TOMBOL ENROLL (JADI UNGU) */
.btn-cta-programs {
    background-color: #FE3A9E; /* Ungu */
    color: #ffffff; /* Teks Putih */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(254, 58, 158, 0.3);
}

.btn-cta-programs:hover {
    background-color: #7650e0; /* Ungu Gelap saat hover */
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(254, 58, 158, 0.4);
    color: #ffffff;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .programs-cta-box {
        padding: 4rem 1.5rem;
        border-radius: 24px;
    }
    .programs-cta-box h2 {
        font-size: 2rem;
    }
}

/* =========================================
   PAGE: FAQ
   ========================================= */

/* SECTION 1: HERO FAQ */
.faq-hero-section {
    /* Reuse background image dari About */
    background-image: url('../img/about/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FE3A9E; /* Fallback Ungu */
    
    width: 100%;
    padding: 9rem 0; /* Padding besar agar lega */
    position: relative;
}

/* Typography Khusus */
.faq-hero-section h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .faq-hero-section {
        padding: 6rem 0;
    }
    .faq-hero-section h1 {
        font-size: 2.5rem;
    }
    .faq-hero-section p {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

/* =========================================
   PAGE: FAQ - SECTION 2 (CONTACT FORM)
   ========================================= */

.contact-section {
    background-color: #F9F9FE; /* Background ungu sangat muda/abu */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- KOLOM KIRI: INFO --- */
.contact-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.contact-desc {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 90%;
}

/* Label Ungu Kecil (Email, Phone, etc) */
.contact-label {
    color: #FE3A9E;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Isi Informasi Kontak */
.contact-value {
    color: #1e293b;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Ikon Sosial Media (Bulat Kuning) */
.social-circle {
    width: 45px;
    height: 45px;
    background-color: #FFEA04; /* Kuning */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FE3A9E; /* Icon Ungu */
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-circle:hover {
    transform: translateY(-3px);
    background-color: #eec242;
    color: #ffffff;
}

/* --- KOLOM KANAN: FORM CARD --- */
.contact-form-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.form-label-custom {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.form-control-custom {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    color: #334155;
    background-color: #ffffff;
}

.form-control-custom:focus {
    border-color: #FE3A9E;
    box-shadow: 0 0 0 3px rgba(254, 58, 158, 0.1);
}

.btn-contact-submit {
    background-color: #FE3A9E; /* Ungu */
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem;
    border-radius: 50px;
    width: 100%;
    border: none;
    transition: background 0.3s;
}

.btn-contact-submit:hover {
    background-color: #7650e0;
    color: #ffffff;
}

/* Responsif Mobile */
@media (max-width: 991px) {
    .contact-form-card { padding: 2rem 1.5rem; }
    .contact-title { font-size: 2rem; }
}

/* =========================================
   PAGE: FAQ - SECTION 3 (LIST)
   ========================================= */

.faq-list-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffff;
}

/* --- FAQ CARD STYLE --- */
.faq-page-card {
    background-color: #F9F9FE; /* Background Abu Keunguan (Sama kayak Contact Form) */
    border-radius: 24px;       /* Sudut melengkung */
    padding: 2.5rem;
    height: 100%;              /* Agar tinggi seragam */
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Efek Hover: Jadi Putih + Bayangan */
.faq-page-card:hover {
    background-color: #ffffff;
    border-color: #f1f5f9;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

/* Judul Pertanyaan (Ungu) */
.faq-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #FE3A9E; /* Warna Ungu Fintalk */
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Isi Jawaban */
.faq-card-desc {
    font-family: 'Inter', sans-serif;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Badge FAQ di Header */
.faq-badge {
    background-color: #FFEEF7;
    color: #FE3A9E;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* Header Title */
.faq-main-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Responsif */
@media (max-width: 991px) {
    .faq-main-title { font-size: 2rem; }
    .faq-page-card { padding: 1.5rem; }
}

/* =========================================
   PAGE: THEME / CATEGORY DETAIL
   ========================================= */

/* SECTION 1: HERO */
.theme-hero-section {
    /* Reuse background image dari About */
    background-image: url('../img/about/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FE3A9E; /* Fallback Ungu */
    
    width: 100%;
    padding: 9rem 0;
    position: relative;
}

/* Typography */
.theme-hero-section h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .theme-hero-section {
        padding: 6rem 0;
    }
    .theme-hero-section h1 {
        font-size: 2.5rem;
    }
    .theme-hero-section p {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

/* =========================================
   PAGE: NEWS INDEX
   ========================================= */

/* Header Badge */
.badge-blog-header {
    background-color: #FFEEF7; /* Ungu Muda */
    color: #FE3A9E; /* Ungu */
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: inline-block;
    font-size: 0.9rem;
}

/* Image Wrappers (Rounded Corners) */
.img-wrapper-featured {
    width: 100%;
    height: 380px; /* Tinggi Fix Gambar Besar */
    border-radius: 16px;
    overflow: hidden;
}

.img-wrapper-small {
    width: 100%;
    height: 180px; /* Tinggi Fix Gambar Kecil */
    border-radius: 12px;
    overflow: hidden;
}

/* Hover Effect Zoom */
.featured-card img, 
.small-card img {
    transition: transform 0.5s ease;
}

.featured-card:hover img,
.small-card:hover img {
    transform: scale(1.05);
}

/* Text Hover */
.hover-primary {
    transition: color 0.3s ease;
}
.hover-primary:hover {
    color: #FE3A9E !important;
}

/* Responsive */
@media (max-width: 991px) {
    .img-wrapper-featured { height: 250px; }
}

/* =========================================
   PAGE: NEWS DETAIL
   ========================================= */

.news-detail-section {
    background-color: #F9F9FE; /* Background Halaman Abu Keunguan */
    padding-top: 4rem;
    padding-bottom: 6rem;
}

/* --- MAIN CONTENT --- */
.news-detail-img-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    max-height: 500px; /* Batas tinggi gambar utama */
}

.news-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-detail-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800; /* Extra Bold */
    color: #1e293b;
    font-size: 2.2rem;
    line-height: 1.3;
}

.news-meta {
    font-size: 0.95rem;
}

/* Styling Paragraf Isi Berita */
.news-content {
    font-family: 'Inter', sans-serif;
    color: #475569;
    font-size: 1.05rem; /* Ukuran font nyaman baca */
    line-height: 1.8;   /* Jarak antar baris lega */
    text-align: justify;
}

.news-content p {
    margin-bottom: 1.5rem;
}

/* --- SIDEBAR --- */
.sidebar-box {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.sidebar-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

/* Share Icons */
.share-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Bulat */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: transform 0.3s;
    font-size: 1rem;
}

.share-icon:hover {
    transform: translateY(-3px);
    color: white;
}

/* Warna-warni Sosmed */
.bg-facebook { background-color: #1877F2; }
.bg-twitter  { background-color: #000000; }
.bg-linkedin { background-color: #0077B5; }
.bg-whatsapp { background-color: #25D366; }


/* Top News List */
.small-news-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s;
}

.group-news-item:hover .small-news-title {
    color: #FE3A9E !important; /* Judul jadi ungu saat hover */
}

/* Responsif */
@media (max-width: 768px) {
    .news-detail-title { font-size: 1.8rem; }
    .sidebar-box { padding: 1.5rem; }
}


/* ============================================================
   FIX UKURAN SVG PAGINATION LARAVEL
   ============================================================ */

/* Membatasi ukuran icon panah Previous/Next yang raksasa */
nav[role="navigation"] svg {
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    vertical-align: middle;
    color: #6c757d; /* Warna abu-abu standar */
}

/* Merapikan baris pagination agar sejajar */
nav[role="navigation"] > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

nav[role="navigation"] span, 
nav[role="navigation"] a {
    font-size: 0.9rem;
    text-decoration: none;
}


/* =========================================
   FINTALK BRANDING COLORS
   ========================================= */
:root {
    --fintalk-purple: #FE3A9E;
    --fintalk-yellow: #FFEA04;
}

/* Backgrounds */
.bg-fintalk-purple {
    background-color: var(--fintalk-purple) !important;
}
.bg-fintalk-yellow {
    background-color: var(--fintalk-yellow) !important;
    color: #212529 !important; /* Teks hitam biar kontras */
}

/* Texts */
.text-fintalk-purple {
    color: var(--fintalk-purple) !important;
}
.text-fintalk-yellow {
    color: var(--fintalk-yellow) !important;
}

/* Buttons (Ungu) */
.btn-fintalk-purple {
    background-color: var(--fintalk-purple);
    border-color: var(--fintalk-purple);
    color: white;
    transition: all 0.3s ease;
}

.btn-fintalk-purple:hover {
    background-color: #734ceb; /* Ungu sedikit lebih gelap saat hover */
    border-color: #734ceb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 58, 158, 0.3);
}

/* Accordion Active State (Agar panah/header jadi ungu) */
.accordion-button:not(.collapsed) {
    color: var(--fintalk-purple);
    background-color: #f0ebff; /* Ungu sangat muda */
}
.accordion-button:not(.collapsed)::after {
    filter: invert(53%) sepia(66%) saturate(3089%) hue-rotate(229deg) brightness(98%) contrast(96%); /* Filter icon jadi ungu */
}

/* Tambahkan di public/css/style.css paling bawah */
.btn-outline-fintalk-purple {
    color: #FE3A9E;
    border-color: #FE3A9E;
}
.btn-outline-fintalk-purple:hover {
    background-color: #FE3A9E;
    color: white;
}