/* ==
   AKSIDENSI OPTIMASI FONT & LAYOUT UTAMA (WAJIB BARIS NOMOR 1) 
   == */

/* 3. Pengaman dasar agar layout web di HP tidak bisa bocor atau bergeser kanan-kiri */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility; /* Mempercepat browser merender font text */
}

/* 
   OPTIMASI CSS GLASSMORPHISM UNTUK SELURUH HALAMAN (SPEK BALAP MOBILE)
   */

/* 1. Background Dasar pada BODY */
body {
    margin: 0;
    padding: 0;
    background: #f0f2f5;
    background-image:
        radial-gradient(at 0% 0%, rgba(197, 160, 89, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 77, 64, 0.08) 0px, transparent 50%);
    background-attachment: fixed;
}

/* JURUS SAKTI: Di HP, kita matikan background-attachment: fixed karena bikin scrolling lag berat! */
@media (max-width: 767px) {
    body {
        background-attachment: scroll !important; 
    }
}

/* 2. Pembungkus Konten Utama */
.glass-wrapper {
    background: rgba(255, 255, 255, 0.35); 
    min-height: 100vh;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.02);
}

/* 3. Memaksa Semua Section Menjadi Transparan */
section, 
.glass-wrapper > div {
    background: transparent !important;
}

/* 4. Efek Kaca yang Difokuskan pada Kartu Informasi (Ringan & Licin di HP) */
.alumni-card,
.program-card,
.news-card {
    background: rgba(255, 255, 255, 0.88) !important; /* Ditebalkan dikit biar kontras teks makin dapet poin 100 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 77, 64, 0.03);
    
    /* Gunakan transisi super cepat untuk mobile latency */
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, background 0.25s ease;
    
    /* Paksa GPU aktif secara pasif tanpa makan memori berlebih */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

/* Di layar PC, kita kasih efek blur kaca mewah karena spek komputernya kuat */
@media (min-width: 1024px) {
    .alumni-card, .program-card, .news-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Efek Hover Interaktif Modern (will-change baru aktif pas mau disentuh, pinter!) */
.alumni-card:hover,
.program-card:hover,
.news-card:hover {
    will-change: transform; 
    transform: translateY(-5px) translateZ(0);
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 25px rgba(0, 77, 64, 0.1);
}