@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

        /* ==========================================================================
        1. PENGATURAN DASAR & RESET TOTAL
        ========================================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

       body {
            background-color: #f9f4f0;
            color: #1e1e24;
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }

        /* --- REAL UI CONTAINER --- */
        .app-page {
            width: 100%;
            max-width: 480px; /* Batas maksimal lebar estetik untuk tampilan aplikasi mobile di desktop */
            min-height: 100vh; /* Memaksa tinggi halaman minimal setinggi layar gadget */
            background-color: #f9f4f0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
            overflow-x: hidden;
        }

       /* --- PREMIUM BANNER SLIDER CONTINER --- */
      .app-header-banner {
    width: 100%;
    position: relative;
    background-color: #f9f4f0; 
    overflow: hidden; /* Menyembunyikan 5 banner lainnya yang mengantre di kanan */
    display: block;
    line-height: 0;
}

/* Jalur memanjang horizontal tempat mengantre seluruh slide */
.slider-track {
    display: flex;
    width: 100%;
    height: auto;
    /* Efek transisi geser ke kiri melambat yang sangat halus (smooth ease) */
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tiap block slide dipaksa mengunci lebar 100% layar aplikasi */
.slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    position: relative; /* TAMBAHAN: Agar lapisan hitam mengunci tepat di dalam slide ini */
}

/* === TAMBAHAN: LAPISAN HITAM TRANSPARAN DI DEPAN GAMBAR BANNER === */
/* === PERBAIKAN: LAPISAN GRADASI HITAM TRANSPARAN DI DEPAN GAMBAR BANNER === */
.slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Mengubah warna solid menjadi gradasi dari atas (agak terang) ke bawah (gelap pekat) */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%,    /* Bagian atas sangat tipis (10% kegelapan) agar foto tetap jelas */
        rgba(0, 0, 0, 0.4) 50%,   /* Bagian tengah sedang (40% kegelapan) */
        rgb(0, 0, 0) 100%  /* Bagian bawah sangat gelap (85% kegelapan) untuk memunculkan dots */
    );
    
    z-index: 2; /* Berada di depan gambar, di bawah dots */
    pointer-events: none; /* Swipe otomatis tetap bekerja normal */
}

.slide .banner-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1; /* Berada di paling belakang lapisan */
}

/* --- INDIKATOR DOTS PREMIUM --- */
.slider-dots {
    position: absolute;
    bottom: 45px; /* Diletakkan agak ke atas sedikit agar tidak tertutup lengkungan konten utama */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 25; /* Tetap aman di paling depan karena nilainya jauh lebih tinggi dari z-index: 2 */
}

.dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Efek titik memanjang saat aktif (tren UI modern) */
.dot.active {
    background-color: #ffffff;
    width: 16px;
    border-radius: 4px;
}

        /* Konten utama tetap menimpa slider secara melengkung */
       .app-content-body {
        padding: 24px;
        background-color: #ffffff; /* Latar belakang card body */
        border-radius: 30px 30px 0 0;
        margin-top: -30px;
        position: relative;
        z-index: 10;
        
        /* Perintah ini akan otomatis melar mendorong footer ke paling bawah jika konten sedikit */
        flex: 1; 
        
        display: flex;
        flex-direction: column;
    }

        /* --- KONTEN UTAMA --- */
        .app-content-body {
            background-color: #f9f4f0;
            border-radius: 32px 32px 0 0;
            margin-top: -35px; /* Menarik konten ke atas untuk memotong banner secara melengkung halus */
            position: relative;
            padding: 32px 24px;
            /* flex-grow: 1; */
            z-index: 10;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.02);
        }

        /* Judul & Bookmark */
        .course-title-area {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            gap: 12px;
        }

        .course-main-title {
            font-size: 34px;
            font-weight: 700;
            color: #121214;
            line-height: 1.1;
            letter-spacing: -0.5px;
        }

        .btn-bookmark {
            background: none;
            border: none;
            color: #ff5b5b;
            font-size: 26px;
            cursor: pointer;
            padding-top: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Mentor / Instructor */
        .mentor-badge {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }

        .mentor-img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }

        .mentor-name {
            font-size: 14px;
            color: #ff5b5b;
            font-weight: 600;
        }

        /* Deskripsi Teks */
       .course-desc-text {
        text-align: justify;
        text-align-last: left;
        line-height: 1.3; 
        color: #475569; /* Abu-abu slate yang sedikit lebih tegas */
        font-size: 0.8rem;
        margin-top: 8px;
        margin-bottom: 28px; /* Memberikan jarak napas sebelum card pertama dimulai */
}

        /* Header Bagian Lessons */
        .lessons-section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .text-lessons {
            font-size: 18px;
            font-weight: 700;
            color: #121214;
        }

        .text-duration {
            font-size: 14px;
            color: #8e8e96;
            display: flex;
            align-items: center;
            gap: 6px;
        }

/* --- PREMIUM CARD LIST INTEGRATION (TINGGI SERAGAM) --- */
/* Container pembungkus utama kartu */
.app-content-body {
    padding: 24px;
    background-color: #fcfbfa; /* Latar belakang warm ivory sangat lembut */
}

/* Base Card Premium */
/* === PERBAIKAN: MERAMPINGKAN TINGGI CARD === */
/* Pembungkus Anchor Link agar flexspace berfungsi penuh */
.card-anchor-wrapper {
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    width: 100%;
    align-items: center;
    justify-content: space-between; /* Memisahkan konten kiri dan centang kanan */
    padding: 16px 20px; /* Ruang dalam card yang lega */
}

/* Base Card - Putih Bersih & Extra Rounded */
.lesson-item-card {
    background: #ffffff !important;
    border: none; /* Menghapus garis putus-putus lama */
    border-radius: 24px; /* Sudut tumpul sangat melengkung sesuai gambar baru */
    margin-bottom: 16px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.025); /* Bayangan tipis halus di bagian bawah */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Efek Hover Sentuhan Premium */
.lesson-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.05);
}

/* Sisi Kiri Card (Ikon + Teks) */
.lesson-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Wadah Kotak Tumpul Ikon (Squircle) */
.lesson-icon-bg {
    width: 52px;
    height: 52px;
    border-radius: 16px; /* Sudut kotak ikon yang melengkung cantik */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Pewarnaan Latar Belakang Kotak Pastel & Warna Ikon Utamanya */
.bg-pastel-orange { background-color: #ffe8cc; color: #f76707; }
.bg-pastel-teal   { background-color: #707070be; color: #ffffff; }
.bg-pastel-purple { background-color: #f8f0fc; color: #9c36b5; }
.bg-pastel-blue   { background-color: #e7f5ff; color: #1c7ed6; }

/* Ukuran Font Awesome Utama */
.font-icon-main {
    font-size: 1.35rem;
}

/* Pengaturan Tata Letak Teks */
.lesson-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Judul Card - Hitam Tegas Berbobot */
.text-lesson-name {
    font-size: 1.0rem;
    font-weight: 700;
    color: #1e293b; /* Slate 800 */
    letter-spacing: -0.3px;
}

/* Sub-teks Keterangan - Abu-abu Lembut */
.text-lesson-time {
    font-size: 0.7rem;
    color: #94a3b8; /* Slate 400 - Bersih dan tidak mencolok */
    font-weight: 400;
}

/* Sisi Kanan Card (Wadah Centang) */
.card-status-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
}

/* Ikon Bulat Centang Oranye */
.icon-check-orange {
    font-size: 1.5rem; /* Ukuran yang tegas */
    color: #ff922b;     /* Warna oranye terang sesuai referensi gambar */
    filter: drop-shadow(0 2px 6px rgba(255, 146, 43, 0.2)); /* Efek glow tipis pada centang */
}

        /* ==========================================================================
        CSS UNTUK APP FOOTER
        ========================================================================== */
/* Container Utama Footer */
.app-footer {
    background-color: #111827;
    color: #ffffff;            
    
    margin-left: -24px;        
    margin-right: -24px;       
    margin-bottom: -24px; /* Tetap pertahankan ini untuk menutup padding kontainer */
    
    /* Tambahan pengaman: Pastikan footer otomatis mengunci di paling bawah track flex */
    margin-top: auto; 
    
    padding: 10px 24px; 
    border-radius: 0;          
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 10px;           
}

/* Memastikan garis pembatas bawaan tetap mati */
.footer-divider {
    display: none; 
}

/* Blok Info Alamat */
.footer-info-item {
    display: flex;
    align-items: center; 
    justify-content: center; /* Membuat alamat ikut ke tengah jika ada */
    gap: 8px;           
    margin-bottom: 0; 
    width: 100%;
}


/* Teks Hak Cipta / Copyright - SEKARANG PASTI DI TENGAH */
.footer-copyright {
    font-size: 0.7rem;  
    color: #cccccc; 
    
    /* 1. KUNCI HORIZONTAL & VERTIKAL CENTER */
    text-align: center; 
    display: block;
    width: 100%;
    
    /* 2. PERBAIKAN UTAMA: Buat jarak atas dan bawah sama rata */
    margin: 0 auto;       /* Reset margin atas-bawah ke 0 */
    padding: 12px 0;      /* Menggunakan padding yang seimbang (12px atas, 12px bawah) */
    
    /* Garis pemisah horizontal super samar */
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    white-space: normal; 
    
    /* Memastikan tidak ada line-height yang terlalu tinggi bawaan dari tag lain */
    line-height: 1.2; 
}

/* RESPONSIVE: Disederhanakan karena container utama sudah vertikal pusat */
@media (max-width: 600px) {
    .app-footer {
        align-items: center;
    }
    .footer-copyright {
        text-align: center;
    }
}

/* Container judul saat di dalam header - KALIBRASI KOORDINAT */
.course-title-area-overlay {
    position: absolute;
    
    /* KUNCI UTAMA: Mengunci posisi di atas titik dots agar aman dari potongan */
    bottom: 85px; /* Naikkan sedikit lagi dari dasar agar benar-backar aman di area hitam */
    left: 20px;   /* Jarak manis dari tepi kiri agar sejajar dengan isi kartu di bawah */
    
    /* Memastikan teks berada di lapisan paling depan, di atas gradasi hitam (z-index: 2) */
    z-index: 30;  /* Dinaikkan ke 30 agar lebih tinggi dari dots yang bernilai 25 */
    
    width: auto;
    pointer-events: none; /* Klik kursor tetap menembus ke slider */
}

/* Mengatur gaya huruf tulisan "Welcome," - PENYESUAIAN SKALA */
.course-main-title-overlay {
    color: #ffffff !important; /* Putih bersih kontras */
    
    /* PERBAIKAN: Ukuran font diperkecil sedikit agar tidak terlalu raksasa di layar mobile */
    font-size: 2.3rem;         
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
    
    /* Efek bayangan teks halus agar terbaca tajam */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); 
}
    
        .news-container {
            display: flex;                  /* Membuat card berjejer ke samping */
            overflow-x: auto;               /* Mengaktifkan scroll horizontal */
            scroll-snap-type: x mandatory;  /* Membuat efek geser terasa magnetis/pas di card */
            gap: 16px;                      /* Jarak antar card berita */
            padding-left: 4px;              /* Jarak aman di sebelah kiri agar shadow tidak terpotong */
            padding-right: 20px;            /* Jarak aman di sebelah kanan setelah card terakhir */
            padding-bottom: 25px;           /* Jarak di bawah card sebelum menyentuh footer */
            
            /* Menyembunyikan scrollbar bawaan browser agar terlihat bersih seperti aplikasi native */
            -ms-overflow-style: none;       /* IE dan Edge */
            scrollbar-width: none;          /* Firefox */
        }

        /* Menyembunyikan scrollbar untuk Chrome, Safari, dan Opera */
        .news-container::-webkit-scrollbar {
            display: none;
        }

        .news-card {
            flex: 0 0 85%;                  /* Mengatur lebar tiap card sebesar 85% dari layar agar card berikutnya sedikit mengintip */
            scroll-snap-align: start;       /* Menyejajarkan card saat berhenti digeser */
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            font-family: sans-serif;
            border: 1px solid #f0f0f0;
            margin-top: 20px;
            /* margin-bottom dipindahkan ke padding-bottom container agar scroll smooth */
            margin-bottom: 0; 
        }

        .news-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .news-image-wrapper {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 10;
            overflow: hidden;
        }
        .news-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .news-content {
            padding: 20px;
        }
        .news-title {
            font-size: 18px;
            font-weight: 700;
            color: #111;
            margin: 0 0 8px 0;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .news-excerpt {
            font-size: 13px;
            color: #777;
            margin: 0 0 20px 0;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        .news-date i {
            margin-right: 5px;
        }
        .news-author {
            background: #f0f2f5;
            padding: 4px 12px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #555;
        }