/* ============================================================
   1. RESET & BASE
   Menghapus style bawaan browser agar tampilan konsisten
   di semua browser (Chrome, Firefox, Edge, Safari)
   ============================================================ */

/* Semua elemen menggunakan box-sizing border-box
   agar padding tidak menambah lebar elemen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Pengaturan dasar untuk seluruh halaman */
body {
    font-family: 'Poppins', sans-serif; /* Font Poppins dari Google Fonts */
    font-size: 14px;                    /* Ukuran teks minimum 14px */
    color: #1E293B;                     /* Warna teks utama: hitam lunak */
    background-color: #F8FAFC;          /* Background: abu-abu sangat terang */
    line-height: 1.6;                   /* Jarak antar baris teks */
}

/* Hapus garis bawah pada semua link */
a {
    text-decoration: none;
    color: inherit;
}

/* Gambar responsif — tidak melebihi lebar kontainer */
img {
    max-width: 100%;
    display: block;
}


/* ============================================================
   2. VARIABEL WARNA
   Definisi warna yang dipakai di seluruh aplikasi
   Menggunakan CSS Custom Properties agar mudah diubah
   ============================================================ */

:root {
    --biru:       #2563EB;  /* Warna utama: biru                  */
    --biru-gelap: #1D4ED8;  /* Biru gelap: untuk hover/header     */
    --biru-muda:  #EFF6FF;  /* Biru sangat muda: background chip  */
    --putih:      #FFFFFF;  /* Putih: background kartu            */
    --abu-muda:   #F8FAFC;  /* Abu sangat muda: background halaman*/
    --abu-border: #E2E8F0;  /* Abu-abu: untuk border/garis        */
    --teks:       #1E293B;  /* Teks utama: hitam lunak            */
    --teks-abu:   #64748B;  /* Teks sekunder: abu-abu             */
    --hijau:      #10B981;  /* Hijau: status online/benar         */
    --merah:      #EF4444;  /* Merah: error/salah                 */
    --kuning:     #F59E0B;  /* Kuning: peringatan                 */
}


/* ============================================================
   3. LAYOUT UTAMA
   Container membatasi lebar konten agar tidak terlalu lebar
   di layar besar (desktop/laptop)
   ============================================================ */

/* Container: membatasi lebar maksimum konten */
.container {
    width: 100%;
    max-width: 720px;          /* Maks 720px di desktop */
    margin: 0 auto;            /* Tengahkan secara horizontal */
    padding: 0 16px;           /* Jarak kiri-kanan 16px */
}

/* Konten halaman: memberi ruang dari atas dan bawah */
.page-content {
    padding-top: 16px;
    padding-bottom: 80px;      /* 80px agar tidak tertutup Bottom Nav */
    max-width: 720px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}


/* ============================================================
   4. NAVIGASI BAWAH (BOTTOM NAVIGATION)
   Digunakan di perangkat mobile (layar < 768px)
   Posisi fixed di bagian bawah layar
   ============================================================ */

/* Container navigasi bawah */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--putih);
    border-top: 1px solid var(--abu-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    /* Ruang untuk navigation bar HP */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Setiap item menu di navigasi bawah */
.nav-item {
    display: flex;
    flex-direction: column;    /* Ikon di atas, label di bawah */
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
    color: #94A3B8;            /* Warna abu-abu saat tidak aktif */
    transition: color 0.2s;    /* Animasi perubahan warna */
    gap: 2px;
}

/* Ukuran ikon Material Design di navigasi */
.nav-item .material-symbols-rounded {
    font-size: 24px;
}

/* Label teks di bawah ikon */
.nav-label {
    font-size: 10px;
    font-weight: 500;
}

/* Item yang sedang aktif (halaman yang dibuka) */
.nav-item.active {
    color: var(--biru);        /* Warna biru saat aktif */
}


/* ============================================================
   5. NAVIGASI ATAS (TOP NAVIGATION)
   Digunakan di desktop/tablet (layar >= 768px)
   Disembunyikan di mobile
   ============================================================ */

/* Sembunyikan top nav di mobile — tampil di desktop */
.top-nav {
    display: none;             /* Default: tersembunyi */
    background: var(--putih);
    border-bottom: 1px solid var(--abu-border);
    padding: 0 24px;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Logo/brand di kiri top nav */
.top-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    color: var(--teks);
}

/* Link menu di kanan top nav */
.top-nav-links {
    display: flex;
    gap: 8px;
}

/* Setiap link menu di top nav */
.top-nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--teks-abu);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

/* Hover: background abu muda */
.top-nav-link:hover {
    background: var(--abu-muda);
    color: var(--teks);
}

/* Link aktif: warna biru */
.top-nav-link.active {
    color: var(--biru);
    background: var(--biru-muda);
}


/* ============================================================
   6. TOMBOL
   Dua jenis tombol: primer (biru solid) dan sekunder (border)
   ============================================================ */

/* Tombol Primer: biru, teks putih */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                  /* Jarak antara ikon dan teks */
    background: var(--biru);
    color: var(--putih);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    width: 100%;               /* Full width secara default */
}

/* Hover tombol primer: lebih gelap */
.btn-primary:hover {
    background: var(--biru-gelap);
}

/* Klik tombol primer: sedikit mengecil */
.btn-primary:active {
    transform: scale(0.97);
}

/* Tombol Sekunder: border biru, teks biru */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--putih);
    color: var(--biru);
    border: 2px solid var(--biru);
    border-radius: 12px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    flex: 1;                   /* Mengisi ruang yang tersedia */
}

/* Hover tombol sekunder: background biru muda */
.btn-secondary:hover {
    background: var(--biru-muda);
}

.btn-secondary:active {
    transform: scale(0.97);
}


/* ============================================================
   7. HALAMAN BERANDA — HERO SECTION
   Bagian atas halaman beranda: logo, judul, deskripsi, tombol
   ============================================================ */

/* Hero section: background gradient dari putih ke biru muda */
.hero-section {
    text-align: center;
    padding: 32px 0 24px;
    /* Gradient lembut dari atas ke bawah */
    background: linear-gradient(180deg, #ffffff 0%, #EFF6FF 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Container logo: lingkaran biru berisi ikon robot */
.hero-logo {
    width: 80px;
    height: 80px;
    background: var(--biru);           /* Background biru */
    border-radius: 50%;                /* Bentuk lingkaran */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;               /* Tengah, margin bawah 16px */
    /* Shadow biru lembut */
    box-shadow: 0 4px 20px rgba(37,99,235,0.3);
}

/* Ikon robot di dalam logo */
.hero-logo .material-symbols-rounded {
    font-size: 40px;
    color: var(--putih);               /* Ikon putih di background biru */
}

/* Judul utama: nama aplikasi "CASIS" */
.hero-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

/* Subtitle: kepanjangan nama aplikasi */
.hero-subtitle {
    font-size: 13px;
    color: var(--teks-abu);
    margin-bottom: 16px;
}

/* Tagline: kalimat penarik perhatian */
.hero-tagline {
    font-size: 17px;
    font-weight: 600;
    color: var(--teks);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Deskripsi singkat aplikasi */
.hero-desc {
    font-size: 14px;
    color: var(--teks-abu);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Tombol CTA utama "Mulai Bertanya" */
.btn-hero {
    /* Shadow biru agar tombol terlihat menonjol */
    box-shadow: 0 4px 14px rgba(37,99,235,0.4);
    margin-bottom: 16px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    padding: 14px 24px;
}

/* Container untuk 2 tombol sekunder (Kuis dan Tentang) */
.hero-secondary-btns {
    display: flex;
    gap: 12px;                 /* Jarak antar tombol */
    max-width: 320px;
    margin: 0 auto;
}


/* ============================================================
   8. HALAMAN BERANDA — RINGKASAN MATERI
   Grid kartu yang menampilkan topik-topik Sistem Komputer
   Data diambil dari database
   ============================================================ */

/* Section ringkasan materi */
.materi-section {
    margin-bottom: 24px;
}

/* Judul section "Ringkasan Materi" */
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 4px;
}

/* Subtitle section */
.section-subtitle {
    font-size: 13px;
    color: var(--teks-abu);
    margin-bottom: 16px;
}

/* Grid kartu materi: 1 kolom di mobile, 2 kolom di desktop */
.materi-grid {
    display: grid;
    grid-template-columns: 1fr;    /* 1 kolom di mobile */
    gap: 12px;
    margin-bottom: 20px;
}

/* Kartu satu topik materi */
.materi-card {
    background: var(--putih);
    border-radius: 12px;
    padding: 14px;
    display: flex;                 /* Ikon di kiri, teks di kanan */
    align-items: flex-start;
    gap: 12px;
    /* Shadow lembut */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--abu-border);
    transition: box-shadow 0.2s;
}

/* Hover kartu: shadow lebih dalam */
.materi-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Container ikon di kartu materi */
.materi-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;               /* Agar tidak mengecil */
    background: var(--biru-muda);  /* Background biru muda */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ikon Material Design di kartu */
.materi-icon .material-symbols-rounded {
    font-size: 24px;
    color: var(--biru);            /* Ikon berwarna biru */
}

/* Konten teks di kartu materi */
.materi-content {
    flex: 1;                       /* Mengisi sisa ruang */
}

/* Judul topik materi */
.materi-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--teks);
    margin-bottom: 4px;
}

/* Ringkasan/deskripsi topik — tampil lengkap tanpa terpotong */
.materi-desc {
    font-size: 12px;
    color: var(--teks-abu);
    line-height: 1.6;
}

/* Fallback tag jika database kosong */
.materi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* Tag topik materi (fallback) */
.materi-tag {
    background: var(--biru-muda);
    color: var(--biru);
    border: 1px solid #BFDBFE;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
}

/* Area CTA di bagian bawah section materi */
.materi-cta {
    background: var(--biru-muda);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

/* Teks di area CTA */
.materi-cta p {
    font-size: 13px;
    color: var(--teks-abu);
    margin-bottom: 12px;
}

/* Tombol di area CTA */
.materi-cta .btn-primary {
    max-width: 240px;
    margin: 0 auto;
}


/* ============================================================
   9. RESPONSIVE — TABLET & DESKTOP
   Penyesuaian layout untuk layar >= 768px
   ============================================================ */

@media (min-width: 768px) {

    /* Tampilkan Top Nav, sembunyikan Bottom Nav */
    .top-nav {
        display: flex;
    }
    .bottom-nav {
        display: none;
    }

    /* Konten tidak perlu padding bawah ekstra (tidak ada Bottom Nav) */
    .page-content {
        padding-bottom: 40px;
        padding-top: 24px;
    }

    /* Hero section lebih longgar di desktop */
    .hero-section {
        padding: 48px 40px 36px;
    }

    /* Judul lebih besar di desktop */
    .hero-title {
        font-size: 40px;
    }

    .hero-tagline {
        font-size: 20px;
    }

    .hero-desc {
        font-size: 15px;
    }

    /* Grid materi: 2 kolom di desktop */
    .materi-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Tombol sekunder lebih kecil di desktop */
    .hero-secondary-btns {
        max-width: 280px;
    }
}


/* ============================================================
   10. HALAMAN CHATBOT AI
   Layout khusus halaman chatbot — berbeda dari halaman lain.
   Halaman ini menggunakan full-height layout agar area chat
   mengisi seluruh layar seperti aplikasi chat (WhatsApp/ChatGPT)
   ============================================================ */

/* Wrapper utama halaman chatbot */
.chatbot-page {
    display: flex;
    flex-direction: column;
    /* Tinggi penuh dikurangi Bottom Nav CASIS (60px) */
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    background: #F0F7FF;
    overflow: hidden;
}


/* ============================================================
   10a. HEADER CHATBOT
   Bar atas yang menampilkan identitas AI, status, tombol reset
   ============================================================ */

.chatbot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--biru-gelap);    /* Background biru gelap */
    color: var(--putih);
    flex-shrink: 0;                   /* Tidak menyusut */
    /* Shadow ke bawah agar terpisah dari area chat */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Container avatar + nama AI */
.chatbot-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;                          /* Mengisi ruang tengah */
}

/* Lingkaran avatar ikon robot */
.chatbot-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(255,255,255,0.2); /* Putih transparan */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-avatar .material-symbols-rounded {
    font-size: 22px;
    color: var(--putih);
}

/* Nama dan peran chatbot */
.chatbot-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chatbot-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--putih);
}

.chatbot-role {
    font-size: 11px;
    color: rgba(255,255,255,0.75);   /* Putih sedikit transparan */
}

/* Container indikator status online/offline */
.chatbot-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Titik status (lingkaran kecil) */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hijau);        /* Hijau = online */
}

/* Titik status saat offline */
.status-dot.offline {
    background: #94A3B8;             /* Abu-abu = offline */
}

.status-text {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
}

/* Tombol ikon (reset chat) di kanan header */
.btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--putih);
    transition: background 0.2s;
}

.btn-icon:hover {
    background: rgba(255,255,255,0.25);
}

.btn-icon .material-symbols-rounded {
    font-size: 20px;
}


/* ============================================================
   10b. AREA CHAT
   Area scrollable yang menampilkan riwayat percakapan.
   flex: 1 agar mengisi seluruh ruang yang tersisa
   ============================================================ */

.chat-area {
    flex: 1;                          /* Isi semua ruang tersisa */
    overflow-y: auto;                 /* Scroll vertikal */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;                        /* Jarak antar bubble */
    /* Scroll mulai dari bawah (pesan terbaru di bawah) */
    scroll-behavior: smooth;
}

/* Sembunyikan scrollbar di Chrome/Safari tapi tetap bisa scroll */
.chat-area::-webkit-scrollbar {
    width: 4px;
}
.chat-area::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 2px;
}


/* ============================================================
   10c. BUBBLE CHAT
   Kotak pesan — ada dua jenis:
   - Bubble siswa (kanan, biru): pertanyaan dari pengguna
   - Bubble AI (kiri, putih): jawaban dari CASIS AI
   ============================================================ */

/* Container satu baris pesan */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 85%;                   /* Maks 85% lebar area chat */
    animation: bubbleIn 0.25s ease-out; /* Animasi masuk */
}

/* Pesan dari siswa: rata kanan */
.chat-message.user {
    align-self: flex-end;             /* Dorong ke kanan */
    flex-direction: row-reverse;      /* Avatar di kanan teks */
}

/* Pesan dari AI: rata kiri */
.chat-message.ai {
    align-self: flex-start;           /* Rata kiri */
}

/* Avatar kecil di samping bubble (hanya untuk AI) */
.bubble-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--biru);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;              /* Sejajar dengan bawah bubble */
}

.bubble-avatar .material-symbols-rounded {
    font-size: 16px;
    color: var(--putih);
}

/* Container bubble teks + timestamp */
.bubble-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Bubble siswa: rata kanan */
.chat-message.user .bubble-wrapper {
    align-items: flex-end;
}

/* Bubble AI: rata kiri */
.chat-message.ai .bubble-wrapper {
    align-items: flex-start;
}

/* Kotak bubble teks */
.bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    max-width: 100%;
    word-wrap: break-word;            /* Potong kata panjang */
}

/* Bubble siswa: biru dengan sudut kanan bawah lancip */
.bubble-user {
    background: var(--biru);
    color: var(--putih);
    border-radius: 18px 18px 4px 18px;
}

/* Bubble AI: putih dengan sudut kiri bawah lancip */
.bubble-ai {
    background: var(--putih);
    color: var(--teks);
    border-radius: 18px 18px 18px 4px;
    /* Shadow ringan */
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Timestamp di bawah bubble */
.bubble-time {
    font-size: 10px;
    color: var(--teks-abu);
    padding: 0 4px;
}

/* Timestamp bubble siswa: putih transparan */
.chat-message.user .bubble-time {
    color: rgba(255,255,255,0.65);
}


/* ============================================================
   10d. INDIKATOR TYPING "AI sedang mengetik..."
   Animasi 3 titik bouncing — muncul saat menunggu respons AI
   ============================================================ */

/* Container indikator typing — sama seperti bubble AI */
.typing-indicator {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: flex-start;
    animation: bubbleIn 0.2s ease-out;
}

/* Kotak bubble untuk indikator */
.typing-bubble {
    background: var(--putih);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Setiap titik animasi */
.typing-dot {
    width: 7px;
    height: 7px;
    background: #94A3B8;             /* Warna abu-abu */
    border-radius: 50%;
    /* Animasi bounce dengan delay berbeda tiap titik */
    animation: typingBounce 0.6s infinite ease-in-out;
}

/* Titik ke-2: delay 0.15s */
.typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

/* Titik ke-3: delay 0.3s */
.typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}


/* ============================================================
   10e. BANNER OFFLINE
   Banner kuning yang muncul saat tidak ada koneksi internet
   Chatbot tidak bisa digunakan tanpa internet
   ============================================================ */

.offline-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #FEF3C7;             /* Background kuning muda */
    color: #92400E;                  /* Teks coklat tua */
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.offline-banner .material-symbols-rounded {
    font-size: 18px;
}


/* ============================================================
   10f. QUICK QUESTIONS
   Chip-chip pertanyaan cepat yang bisa diklik siswa
   Tersusun horizontal dan bisa di-scroll ke kanan
   ============================================================ */

.quick-questions {
    padding: 12px 16px 10px;
    background: var(--putih);
    border-top: 2px solid #DBEAFE;   /* Border lebih tegas */
    flex-shrink: 0;
}

/* Label "Pertanyaan Cepat:" */
.quick-label {
    font-size: 12px;                  /* Naik dari 11px */
    color: var(--biru);               /* Biru agar lebih terlihat */
    font-weight: 600;                 /* Bold agar jelas */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ikon petir kecil di depan label */
.quick-label::before {
    content: '⚡';
    font-size: 13px;
}

/* Wrapper chip — melipat ke baris baru */
.quick-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
}

/* Satu chip pertanyaan */
.quick-chip {
    flex-shrink: 0;
    background: var(--putih);         /* Putih agar teks lebih kontras */
    color: var(--biru);
    border: 1.5px solid var(--biru);  /* Border biru lebih tegas */
    border-radius: 20px;
    padding: 7px 16px;                /* Lebih tinggi & lebar */
    font-family: 'Poppins', sans-serif;
    font-size: 13px;                  /* Naik dari 12px */
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15); /* Bayangan tipis */
}

.quick-chip:hover {
    background: var(--biru);          /* Balik warna saat hover */
    color: var(--putih);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.quick-chip:active {
    transform: scale(0.96);
}

/* Chip dinonaktifkan saat offline */
.quick-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--abu-border);
    color: var(--teks-abu);
    box-shadow: none;
}


/* ============================================================
   10g. AREA INPUT CHAT
   Baris paling bawah: textarea + tombol kirim
   ============================================================ */

.chat-input-area {
    padding: 10px 16px;
    background: var(--putih);
    border-top: 1px solid var(--abu-border);
    flex-shrink: 0;
    /* Ruang ekstra untuk navigation bar HP Android */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* Wrapper: textarea + tombol dalam satu baris */
.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #F8FAFC;
    border: 1.5px solid var(--abu-border);
    border-radius: 24px;
    padding: 8px 8px 8px 16px;
    transition: border-color 0.2s;
}

/* Focus: border berubah biru */
.chat-input-wrapper:focus-within {
    border-color: var(--biru);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Textarea input teks */
.chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--teks);
    resize: none;                    /* Tidak bisa di-resize manual */
    outline: none;
    line-height: 1.5;
    max-height: 100px;               /* Maks tinggi 100px */
    overflow-y: auto;
}

.chat-input::placeholder {
    color: #94A3B8;
}

/* Tombol kirim: lingkaran biru */
.btn-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--biru);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.btn-send:hover {
    background: var(--biru-gelap);
}

.btn-send:active {
    transform: scale(0.92);
}

/* Tombol kirim saat disabled (input kosong) */
.btn-send:disabled {
    background: #CBD5E1;             /* Abu-abu saat disabled */
    cursor: not-allowed;
}

.btn-send .material-symbols-rounded {
    font-size: 18px;
    color: var(--putih);
}


/* ============================================================
   11. ANIMASI
   Keyframe animation untuk bubble chat dan typing indicator
   ============================================================ */

/* Animasi bubble masuk: slide dari bawah + fade */
@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animasi 3 titik typing: bounce naik-turun */
@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);  /* Naik 6px */
    }
}


/* ============================================================
   12. RESPONSIVE CHATBOT
   Penyesuaian halaman chatbot di layar >= 768px (desktop)
   ============================================================ */

@media (min-width: 768px) {

    /* Di desktop, chatbot tidak full height karena ada Top Nav */
    .chatbot-page {
        /* Kurangi tinggi sebesar Top Nav (60px) */
        height: calc(100vh - 60px);
        max-width: 720px;
        margin: 0 auto;              /* Tengahkan */
        border-left: 1px solid var(--abu-border);
        border-right: 1px solid var(--abu-border);
    }

    /* Bubble lebih kecil maksimumnya di desktop */
    .chat-message {
        max-width: 70%;
    }

    /* Input area tidak perlu padding ekstra di desktop */
    .chat-input-area {
        padding-bottom: 16px;
    }
}


/* ============================================================
   13. HALAMAN KUIS
   Komponen: header, progress bar, kartu soal,
   pilihan jawaban, tombol, hasil kuis
   ============================================================ */

/* Header kuis: background biru, teks putih */
.quiz-header {
    background: var(--biru);
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.quiz-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--putih);
    text-align: center;
}


/* ============================================================
   13a. PROGRESS BAR
   Bar hijau yang bertambah setiap pindah soal
   ============================================================ */

/* Container progress bar + label */
.quiz-progress-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    background: var(--putih);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Track (latar belakang bar abu-abu) */
.progress-bar {
    flex: 1;                        /* Mengisi sisa ruang */
    height: 10px;
    background: var(--abu-border);
    border-radius: 5px;
    overflow: hidden;
}

/* Fill (isian bar biru yang bergerak) */
.progress-fill {
    height: 100%;
    background: var(--biru);
    border-radius: 5px;
    /* Animasi smooth saat progress bertambah */
    transition: width 0.4s ease;
    width: 10%;                     /* Default: soal 1 = 10% */
}

/* Label "N / 10" di kanan progress bar */
.progress-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--biru);
    white-space: nowrap;            /* Tidak wrap ke baris baru */
    min-width: 40px;
}


/* ============================================================
   13b. KARTU SOAL
   Box berisi badge nomor soal dan teks pertanyaan
   ============================================================ */

.quiz-card {
    background: var(--putih);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--abu-border);
}

/* Badge "Soal N" di atas pertanyaan */
.soal-badge {
    display: inline-block;
    background: var(--biru-muda);
    color: var(--biru);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* Teks pertanyaan */
.soal-teks {
    font-size: 15px;
    font-weight: 600;
    color: var(--teks);
    line-height: 1.6;
}


/* ============================================================
   13c. PILIHAN JAWABAN
   Kartu untuk setiap pilihan A, B, C, D
   ============================================================ */

/* Container semua pilihan */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Satu kartu pilihan jawaban */
.quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--putih);
    border: 2px solid var(--abu-border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--teks);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    /* Tinggi minimum 52px untuk touch target yang nyaman */
    min-height: 52px;
}

/* Hover: border biru muda */
.quiz-option:hover {
    border-color: #93C5FD;
    background: #F8FBFF;
}

/* Klik: sedikit mengecil */
.quiz-option:active {
    transform: scale(0.99);
}

/* State terpilih: border biru + background biru muda */
.quiz-option.selected {
    border-color: var(--biru);
    background: var(--biru-muda);
}

/* Huruf pilihan (A, B, C, D) di kiri kartu */
.option-letter {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--abu-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--teks-abu);
    transition: background 0.15s, color 0.15s;
}

/* Huruf pilihan saat kartu dipilih: biru */
.quiz-option.selected .option-letter {
    background: var(--biru);
    color: var(--putih);
}

/* Teks pilihan jawaban */
.option-text {
    flex: 1;
    line-height: 1.4;
}


/* ============================================================
   13d. TOMBOL NAVIGASI KUIS
   Tombol "Selanjutnya" dan "Selesai"
   ============================================================ */

/* Container tombol navigasi */
.quiz-nav {
    margin-bottom: 16px;
}

/* Full-width button */
.btn-full {
    width: 100%;
    justify-content: center;
}

/* Tombol disabled: abu-abu */
.btn-primary:disabled {
    background: var(--abu-border);
    color: var(--teks-abu);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}


/* ============================================================
   13e. TOAST PERINGATAN
   Pesan sementara yang muncul di bawah saat ada kesalahan
   ============================================================ */

.toast-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FEF3C7;         /* Kuning muda */
    color: #92400E;              /* Teks coklat tua */
    border: 1px solid #FCD34D;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    animation: fadeIn 0.2s ease;
}

.toast-warning .material-symbols-rounded {
    font-size: 18px;
    color: var(--kuning);
}


/* ============================================================
   14. HALAMAN HASIL KUIS
   Lingkaran skor SVG, statistik, pesan motivasi, tombol aksi
   ============================================================ */

/* Kartu hasil utama */
.hasil-card {
    background: var(--putih);
    border-radius: 16px;
    padding: 28px 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 1px solid var(--abu-border);
}

/* Container SVG lingkaran skor */
.skor-circle-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}

/* SVG lingkaran */
.skor-circle {
    display: block;
}

/* Teks angka skor di tengah lingkaran */
.skor-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

/* Angka skor besar */
.skor-angka {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--biru);
}

/* Teks "/ 100" di bawah angka */
.skor-dari {
    font-size: 13px;
    color: var(--teks-abu);
}

/* Label nilai: "Nilai: 80/100 | 80%" */
.hasil-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--teks);
    margin-bottom: 16px;
}

/* Container badge statistik benar/salah */
.hasil-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

/* Badge statistik */
.stat-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    justify-content: center;
    max-width: 160px;
}

/* Badge jawaban benar: hijau */
.stat-benar {
    background: #D1FAE5;
    color: #065F46;
}

.stat-benar .material-symbols-rounded {
    color: var(--hijau);
    font-size: 20px;
}

/* Badge jawaban salah: merah */
.stat-salah {
    background: #FEE2E2;
    color: #991B1B;
}

.stat-salah .material-symbols-rounded {
    color: var(--merah);
    font-size: 20px;
}

/* Pesan motivasi */
.pesan-motivasi {
    font-size: 14px;
    font-style: italic;
    padding: 12px 16px;
    border-radius: 10px;
    line-height: 1.6;
    text-align: center;
}

/* Warna pesan sesuai rentang skor */
.motivasi-bagus   { background: #D1FAE5; color: #065F46; } /* Hijau — skor >= 80 */
.motivasi-oke     { background: #FEF3C7; color: #92400E; } /* Kuning — skor 50-79 */
.motivasi-semangat { background: #FEE2E2; color: #991B1B; } /* Merah — skor < 50 */

/* Container tombol aksi hasil */
.hasil-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tombol teks (Beranda) */
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--teks-abu);
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    width: 100%;
}

.btn-text:hover {
    color: var(--teks);
    background: var(--abu-muda);
}


/* ============================================================
   15. RESPONSIVE KUIS
   Penyesuaian di layar desktop >= 768px
   ============================================================ */

@media (min-width: 768px) {

    /* Kartu pilihan: hover lebih smooth di desktop */
    .quiz-option:hover {
        border-color: var(--biru);
        background: var(--biru-muda);
    }

    /* Tombol aksi hasil: 2 kolom di desktop */
    .hasil-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hasil-actions .btn-primary,
    .hasil-actions .btn-secondary {
        flex: 1;
    }

    .hasil-actions .btn-text {
        width: 100%;
    }
}


/* ============================================================
   16. HALAMAN TENTANG
   ============================================================ */

/* Brand section: logo besar + nama aplikasi */
.tentang-brand {
    text-align: center;
    padding: 28px 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #EFF6FF 100%);
    border-radius: 16px;
    margin-bottom: 16px;
}

/* Logo lingkaran biru besar */
.tentang-logo {
    width: 80px;
    height: 80px;
    background: var(--biru);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 4px 20px rgba(37,99,235,0.3);
}

.tentang-logo .material-symbols-rounded {
    font-size: 40px;
    color: var(--putih);
}

/* Nama aplikasi */
.tentang-app-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 4px;
}

/* Kepanjangan nama */
.tentang-kepanjangan {
    font-size: 14px;                  /* naik dari 12px */
    color: var(--teks-abu);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Badge versi */
.tentang-versi {
    display: inline-block;
    background: var(--biru-muda);
    color: var(--biru);
    font-size: 13px;                  /* naik dari 12px */
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #BFDBFE;
}

/* Kartu section */
.tentang-card {
    background: var(--putih);
    border-radius: 14px;
    padding: 20px 16px;               /* naik dari 18px */
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--abu-border);
}

/* Judul setiap section di dalam kartu */
.tentang-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;                  /* naik dari 15px */
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--biru-muda); /* lebih tegas */
}

.tentang-section-title .material-symbols-rounded {
    font-size: 22px;                  /* naik dari 20px */
    color: var(--biru);
}

/* Paragraf deskripsi */
.tentang-desc {
    font-size: 14px;                  /* naik dari 13px */
    color: var(--teks-abu);
    line-height: 1.8;                 /* lebih longgar */
    margin-bottom: 12px;
}

.tentang-desc strong {
    color: var(--teks);
}


/* ============================================================
   16a. TEKNOLOGI — Grid chips per kategori
   ============================================================ */

.tech-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Label kategori: "Frontend", "Backend", dst */
.tech-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--teks-abu);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Wrapper chips dalam satu kategori */
.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Satu chip teknologi */
.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--abu-muda);
    color: var(--teks);
    border: 1px solid var(--abu-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
}

.tech-chip .material-symbols-rounded {
    font-size: 16px;
    color: var(--biru);
}

/* Chip AI: sedikit berbeda warna */
.tech-chip-ai {
    background: var(--biru-muda);
    border-color: #BFDBFE;
    color: var(--biru-gelap);
}

.tech-chip-ai .material-symbols-rounded {
    color: var(--biru);
}


/* ============================================================
   16b. CARD PENGEMBANG
   Foto + informasi pengembang
   ============================================================ */

.developer-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Wrapper foto pengembang */
.developer-photo-wrapper {
    flex-shrink: 0;
}

/* Foto pengembang: bulat */
.developer-photo {
    width: 90px;
    height: 110px;
    object-fit: cover;              /* Crop tengah agar proporsional */
    border-radius: 12px;
    border: 3px solid var(--biru);
    box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}

/* Placeholder jika foto belum ada */
.developer-avatar-placeholder {
    width: 90px;
    height: 110px;
    background: var(--biru-muda);
    border: 3px solid var(--biru);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.developer-avatar-placeholder .material-symbols-rounded {
    font-size: 48px;
    color: var(--biru);
}

/* Container informasi teks pengembang */
.developer-info {
    flex: 1;
}

/* Nama pengembang */
.developer-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 10px;
}

/* Satu baris detail: ikon + teks */
.developer-detail {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;               /* naik dari 6px */
    font-size: 13px;                  /* naik dari 12px */
    color: var(--teks-abu);
    line-height: 1.5;
}

.developer-detail .material-symbols-rounded {
    font-size: 17px;                  /* naik dari 15px */
    color: var(--biru);
    flex-shrink: 0;
    margin-top: 1px;
}


/* ============================================================
   16c. TUJUAN PENELITIAN
   Badge skripsi + kotak judul
   ============================================================ */

/* Badge "Skripsi S1" */
.skripsi-badge {
    display: inline-block;
    background: var(--biru);
    color: var(--putih);
    font-size: 12px;                  /* naik dari 11px */
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* Kotak judul skripsi */
.judul-skripsi-box {
    background: var(--biru-muda);
    border-left: 4px solid var(--biru);
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;               /* lebih lapang */
    margin: 12px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.judul-skripsi-box .material-symbols-rounded {
    font-size: 22px;                  /* naik dari 20px */
    color: var(--biru);
    flex-shrink: 0;
    margin-top: 2px;
}

.judul-skripsi-box p {
    font-size: 13px;                  /* naik dari 12px */
    color: var(--teks);
    line-height: 1.8;                 /* lebih longgar */
    font-style: italic;
    font-weight: 500;
}


/* ============================================================
   16d. RESPONSIVE TENTANG
   ============================================================ */

@media (min-width: 768px) {
    .tech-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .developer-photo {
        width: 110px;
        height: 130px;
    }

    .developer-avatar-placeholder {
        width: 110px;
        height: 130px;
    }
}


/* ============================================================
   17. PWA — BANNER INSTALL
   Muncul di bagian bawah layar saat app bisa diinstall
   ============================================================ */

.pwa-install-banner {
    position: fixed;
    bottom: 68px;                   /* Di atas Bottom Nav */
    left: 12px;
    right: 12px;
    background: var(--putih);
    border: 1px solid var(--abu-border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

/* Konten kiri: ikon + teks */
.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.pwa-install-icon {
    font-size: 28px;
    color: var(--biru);
}

.pwa-install-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pwa-install-text strong {
    font-size: 13px;
    color: var(--teks);
}

.pwa-install-text span {
    font-size: 11px;
    color: var(--teks-abu);
}

/* Tombol aksi */
.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tombol Install */
.pwa-btn-install {
    background: var(--biru);
    color: var(--putih);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-btn-install:hover {
    background: var(--biru-gelap);
}

/* Tombol Tutup */
.pwa-btn-tutup {
    background: transparent;
    border: none;
    color: var(--teks-abu);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}

.pwa-btn-tutup:hover {
    background: var(--abu-muda);
}

/* Di desktop: banner lebih kecil dan di pojok kanan bawah */
@media (min-width: 768px) {
    .pwa-install-banner {
        bottom: 24px;
        left: auto;
        right: 24px;
        width: 320px;
        border-radius: 14px;
    }
}


/* ============================================================
   18. PWA — SPLASH SCREEN
   Layar loading saat pertama kali dibuka dari home screen.
   background_color di manifest.json = #2563EB (biru)
   membuat splash screen biru otomatis di Android/Chrome.

   CSS ini untuk splash screen tambahan yang tampil sebentar
   saat JavaScript belum selesai dimuat.
   ============================================================ */

/* Splash overlay — tersembunyi setelah halaman dimuat */
.splash-screen {
    position: fixed;
    inset: 0;
    background: #F5F5F0;       /* Background krem seperti logo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-logo {
    width: 160px;
    height: 80px;
    margin-bottom: 16px;
    animation: splashPulse 1.5s ease-in-out infinite;
}

.splash-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1f3c;
    margin-bottom: 4px;
}

.splash-subtitle {
    font-size: 12px;
    color: #64748B;
}

/* Animasi pulse pada logo splash */
@keyframes splashPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Animasi slide up untuk banner install */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}


/* ============================================================
   19. SECTION CP DAN TP (Capaian & Tujuan Pembelajaran)
   Ditempatkan di halaman Beranda, setelah hero section
   ============================================================ */

/* Container section CP dan TP */
.cp-tp-section {
    margin-bottom: 24px;
}

/* ---- Card Capaian Pembelajaran ---- */
.cp-card {
    background: var(--putih);
    border: 1px solid var(--abu-border);
    border-left: 4px solid var(--biru);    /* Aksen biru di kiri */
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Header card CP: ikon + label + badge */
.cp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;                  /* naik dari 14px */
    font-weight: 600;
    color: var(--teks);
}

.cp-card-header .material-symbols-rounded {
    font-size: 22px;                  /* naik dari 20px */
    color: var(--biru);
}

/* Badge "Fase E" */
.cp-badge {
    margin-left: auto;
    background: var(--biru-muda);
    color: var(--biru);
    font-size: 12px;                  /* naik dari 11px */
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #BFDBFE;
}

/* Teks isi CP */
.cp-text {
    font-size: 14px;                  /* naik dari 13px */
    color: var(--teks-abu);
    line-height: 1.8;                 /* lebih longgar */
}

/* ---- Card Tujuan Pembelajaran ---- */
.tp-card {
    background: var(--putih);
    border: 1px solid var(--abu-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Header card TP */
.tp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 15px;                  /* naik dari 14px */
    font-weight: 600;
    color: var(--teks);
}

.tp-card-header .material-symbols-rounded {
    font-size: 22px;                  /* naik dari 20px */
    color: var(--biru);
}

/* Daftar TP */
.tp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;                        /* naik dari 10px */
}

/* Satu item TP */
.tp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;                  /* naik dari 13px */
    color: var(--teks-abu);
    line-height: 1.7;
}

/* Badge TP-1, TP-2, dst */
.tp-badge {
    flex-shrink: 0;
    background: var(--biru);
    color: var(--putih);
    font-size: 12px;                  /* naik dari 11px */
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    margin-top: 1px;
    min-width: 40px;
    text-align: center;
}

/* ---- Responsive CP/TP ---- */
@media (min-width: 768px) {

    /* Di desktop tampilkan CP dan TP dalam 2 kolom */
    .cp-tp-section .cp-card,
    .cp-tp-section .tp-card {
        padding: 20px;
    }

    .cp-text {
        font-size: 14px;
    }

    .tp-item {
        font-size: 14px;
    }
}

/* ============================================================
   20. KOTAK REFLEKSI — Halaman Hasil Kuis
   Mendukung pengalaman belajar Merefleksi
   ============================================================ */

.refleksi-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: #1E3A5F;
    line-height: 1.6;
}

.refleksi-box .material-symbols-rounded {
    font-size: 20px;
    color: var(--biru);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   21. REKOMENDASI MATERI — Halaman Hasil Kuis (Tahap 7)
   Ditampilkan berdasarkan soal yang dijawab salah
   Mendukung pengalaman belajar Merefleksi
   ============================================================ */

/* Kartu utama rekomendasi */
.rekomendasi-card {
    background: var(--putih);
    border: 1px solid var(--abu-border);
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Header kartu: ikon + judul */
.rekomendasi-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--teks);
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--abu-border);
}

.rekomendasi-header .material-symbols-rounded {
    font-size: 20px;
    color: var(--biru);
}

/* Teks intro */
.rekomendasi-intro {
    font-size: 12px;
    color: var(--teks-abu);
    margin-bottom: 12px;
}

/* Daftar materi yang perlu dipelajari */
.rekomendasi-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

/* Satu item materi */
.rekomendasi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #F8FBFF;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
}

/* Info kiri: badge kode + nama materi + TP */
.reko-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

/* Badge kode materi: M1, M2, dst */
.reko-badge {
    background: var(--biru);
    color: var(--putih);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Nama materi dan TP */
.reko-info > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reko-info strong {
    font-size: 13px;
    color: var(--teks);
}

/* Label TP */
.reko-tp {
    font-size: 11px;
    color: var(--teks-abu);
}

/* Tombol tanya chatbot */
.reko-btn-chatbot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--biru-muda);
    color: var(--biru);
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.reko-btn-chatbot:hover {
    background: #DBEAFE;
}

.reko-btn-chatbot .material-symbols-rounded {
    font-size: 15px;
}

/* Tips di bawah daftar rekomendasi */
.rekomendasi-tips {
    font-size: 12px;
    color: var(--teks-abu);
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1.6;
}

/* Responsive: tombol tanya di bawah info saat layar kecil */
@media (max-width: 400px) {
    .rekomendasi-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .reko-btn-chatbot {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   22. LOGO GAMBAR CASIS (casis-logo.png)
   Digunakan di: hero beranda, halaman tentang, splash screen
   ============================================================ */

/* Container logo di hero beranda */
.hero-logo-img {
    margin: 0 auto 16px;
    text-align: center;
}

/* Container logo di halaman tentang */
.tentang-logo-img {
    margin: 0 auto 12px;
    text-align: center;
}

/* Gambar logo — responsif, proporsional, tidak terdistorsi */
.logo-img {
    max-width: 240px;        /* Maks lebar di mobile */
    width: 100%;
    height: auto;            /* Pertahankan proporsi 1400×556 */
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Splash screen — logo lebih besar */
.splash-logo {
    max-width: 220px;
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
    animation: splashPulse 1.5s ease-in-out infinite;
    object-fit: contain;
}

/* Desktop: logo sedikit lebih besar */
@media (min-width: 768px) {
    .logo-img {
        max-width: 300px;
    }
    .splash-logo {
        max-width: 280px;
    }
}