/*
 * File: Assets/css/tailwind.css
 * Path: /Assets/css/tailwind.css
 * Deskripsi: Berkas sumber (source) Tailwind CSS utama.
 * Memuat font eksternal, arahan dasar Tailwind, dan utilitas kustom untuk tema UI CBT (Soft Shadow & Kiosk Anti-Select).
 */

/* 1. TIPOGRAFI UTAMA */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 2. DIREKTIF TAILWIND */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 3. PENGATURAN DASAR (BASE LAYER) */
@layer base {
    html {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        /* Optimasi rendering huruf pada layar resolusi tinggi (Mobile/Retina) */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* Mencegah delay tap pada mobile */
        touch-action: manipulation;
    }
    
    body {
        @apply bg-slate-50 text-slate-800;
    }

    /* Estetika: Warna blok saat teks diseleksi (Di luar area ujian yang dikunci) */
    ::selection {
        @apply bg-blue-100 text-blue-900;
    }
}

/* 4. KOMPONEN UI (COMPONENTS LAYER) */
@layer components {
    /* 
     * Sistem Grid Dinamis & Tata Letak Card (Sesuai Spesifikasi Mobile-First)
     * Memberikan bayangan sangat halus (soft shadow) dan transisi interaktif.
     */
    .cbt-card {
        @apply bg-white rounded-3xl shadow-[0_4px_24px_rgba(15,23,42,0.04)] border border-slate-100 transition-all duration-300;
    }
    
    /* Efek Interaktif & Animasi Ringan saat disentuh/di-hover */
    .cbt-card-hover:hover {
        @apply shadow-[0_12px_32px_rgba(15,23,42,0.08)] -translate-y-1 border-blue-50;
    }

    /* Tombol Aksi Kustom */
    .btn-primary {
        @apply inline-flex items-center justify-center px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-2xl transition-all shadow-[0_4px_12px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_16px_rgba(37,99,235,0.3)] active:scale-95;
    }
}

/* 5. UTILITAS TAMBAHAN (UTILITIES LAYER) */
@layer utilities {
    /* 
     * PENCEGAHAN SELEKSI TEKS (ANTI-CHEAT)
     * Diterapkan ke seluruh kontainer soal di Kiosk Mode
     */
    .no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* 
     * KUSTOMISASI SCROLLBAR (CLEAN UI)
     * Mengubah scrollbar bawaan OS menjadi ramping dan modern (Mendukung Webkit)
     */
    .custom-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        @apply bg-slate-200 rounded-full;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        @apply bg-slate-300;
    }

    /* Penyesuaian khusus untuk membungkus KaTeX yang berlebih agar bisa di-scroll horizontal */
    .katex-display {
        @apply overflow-x-auto overflow-y-hidden custom-scroll pb-2;
    }
}