/* Halaman utama portal (/ sebelum log masuk, /home selepas log masuk), Okt 2026: "kad seragam".
   Empat kad pautan sama lebar (resources/views/pages/components/menu-items.blade.php), kemudian
   kotak pemakluman berkepala. Dimuatkan oleh pages/main dan pages/dashboard sahaja. */

/* Jarak header -> kandungan = jarak antara bahagian (16px, irama sama semua halaman). Header
   (py-3) sudah memberi 1rem di bawahnya dan .content-area (layout dikongsi) 1.5rem lagi pada
   >= 992px; bekas halaman utama mengimbanginya di sini. */
.laman-utama.container {
    padding-top: 0;
}

@media (min-width: 992px) {
    .laman-utama.container {
        margin-top: -1.5rem;
        padding-top: 0;
    }
}

/* Tema portal menetapkan .bg-primary sebagai warna padu (biru gelap), jadi bg-opacity-10 tidak
   berkesan. Tint diambil daripada warna teks tema (currentColor) supaya ikut palet pengguna. */
.laman-utama .lencana-tint,
.laman-utama .bg-primary.bg-opacity-10 {
    background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
}

/* Ikon kad pautan: latar padu berwarna (--ikon pada markup, berlainan setiap pautan) dengan ikon
   putih; semua warna lulus kontras AA dengan putih dan kekal sama dalam mod gelap. */
.laman-utama .laman-ikon {
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
    background-color: var(--ikon, #6c50bf);
    color: #fff;
}

.laman-utama .laman-ikon i {
    display: inline-block;
}

/* Animasi kecil sekali (0.5 s) semasa hover, fokus papan kekunci atau ditekan (telefon):
   senarai gelongsor, beg melantun, perisai berdenyut, buku bergoyang. */
.laman-utama .laman-pautan-kad:hover .laman-ikon i,
.laman-utama .laman-pautan-kad:focus-visible .laman-ikon i,
.laman-utama .laman-pautan-kad:active .laman-ikon i {
    animation: 0.5s ease 1 both;
}

.laman-utama .laman-pautan-kad:hover .laman-ikon--gelongsor i,
.laman-utama .laman-pautan-kad:focus-visible .laman-ikon--gelongsor i,
.laman-utama .laman-pautan-kad:active .laman-ikon--gelongsor i {
    animation-name: laman-gelongsor;
}

.laman-utama .laman-pautan-kad:hover .laman-ikon--lantun i,
.laman-utama .laman-pautan-kad:focus-visible .laman-ikon--lantun i,
.laman-utama .laman-pautan-kad:active .laman-ikon--lantun i {
    animation-name: laman-lantun;
}

.laman-utama .laman-pautan-kad:hover .laman-ikon--denyut i,
.laman-utama .laman-pautan-kad:focus-visible .laman-ikon--denyut i,
.laman-utama .laman-pautan-kad:active .laman-ikon--denyut i {
    animation-name: laman-denyut;
}

.laman-utama .laman-pautan-kad:hover .laman-ikon--goyang i,
.laman-utama .laman-pautan-kad:focus-visible .laman-ikon--goyang i,
.laman-utama .laman-pautan-kad:active .laman-ikon--goyang i {
    animation-name: laman-goyang;
}

@keyframes laman-gelongsor {
    50% { transform: translateX(4px); }
}

@keyframes laman-lantun {
    40% { transform: translateY(-5px); }
    70% { transform: translateY(1px); }
}

@keyframes laman-denyut {
    50% { transform: scale(1.22); }
}

@keyframes laman-goyang {
    30% { transform: rotate(-12deg); }
    70% { transform: rotate(8deg); }
}

/* Kad pautan mendatar (ikon kiri, teks kanan): 1 lajur < 768px, 2 lajur 768-1199px, 4 lajur >= 1200px;
   semua kad sama tinggi (termasuk yang tajuknya pecah dua baris, cth. Penyataan Keperluan). */
.laman-utama .laman-pautan {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .laman-utama .laman-pautan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .laman-utama .laman-pautan {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.laman-utama .laman-pautan-kad {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Jarak ikon-teks lebih rapat bila kad sempit (< 1400px: kad ~267px) supaya penerangan muat
   satu baris; pad kad pula p-3 / p-xxl-4 pada markup. */
.laman-utama .laman-pautan-kad .card-body {
    gap: 0.75rem;
}

@media (min-width: 1400px) {
    .laman-utama .laman-pautan-kad .card-body {
        gap: 1rem;
    }
}

/* Poppins lebih lebar daripada Arial. Pada 1200-1399px kad hanya ~267px, jadi ikon, pad dan teks
   dikecilkan sedikit supaya tajuk dan penerangan kekal satu baris (diukur: teks terpanjang 179px,
   ruang 185px). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .laman-utama .laman-pautan-kad .card-body {
        padding: 0.875rem !important;
    }

    .laman-utama .laman-pautan-kad .laman-ikon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .laman-utama .laman-pautan-kad .fw-semibold {
        font-size: 0.9375rem;
    }

    .laman-utama .laman-pautan-kad .small {
        font-size: 0.8125rem;
    }
}

.laman-utama .laman-pautan-kad:hover,
.laman-utama .laman-pautan-kad:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

.laman-utama .laman-pautan-kad:focus-visible {
    outline: 3px solid #6c50bf;
    outline-offset: 2px;
}

/* Kotak pemakluman: setiap pengumuman (halaman awam) dipisahkan garis halus. */
.laman-utama .pemakluman-item + .pemakluman-item {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Kandungan pemakluman ditampal dari Word/Google Docs dengan gaya sebaris (cth. 18pt Arial
   #222222): fon, saiz dan warna diseragamkan dengan tema; tebal, garis bawah dan senarai kekal. */
.laman-utama .pemakluman-isi {
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.laman-utama .pemakluman-isi * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
}

.laman-utama .pemakluman-isi a {
    color: var(--bs-link-color) !important;
}

.laman-utama .pemakluman-isi b,
.laman-utama .pemakluman-isi strong {
    font-weight: 600;
}

.laman-utama .pemakluman-isi img,
.laman-utama .pemakluman-isi iframe,
.laman-utama .pemakluman-isi video,
.laman-utama .pemakluman-isi table {
    max-width: 100% !important;
    height: auto;
}

.laman-utama .pemakluman-isi table {
    width: auto !important;
}

.laman-utama .pemakluman-isi > :last-child {
    margin-bottom: 0;
}

/* Pengguna yang memilih "kurangkan animasi" pada peranti: tiada animasi ikon atau angkat kad. */
@media (prefers-reduced-motion: reduce) {
    .laman-utama .laman-pautan-kad {
        transition: none;
    }

    .laman-utama .laman-ikon i {
        animation: none !important;
    }
}