/* =========================================================
   Portal Iklan UMK - animasi gradient (sentuhan halus)
   Dimuat selepas portal.css. Palet biru UMK + aksen merah.
   Semua animasi dimatikan jika pengguna pilih "kurangkan gerakan".
   ========================================================= */

:root {
    --grad-umk: linear-gradient(90deg, #0a1f3c, #1f4f8f, #3b7dd8, #1f4f8f, #0a1f3c);
    --grad-aksen: linear-gradient(90deg, #1f4f8f, #3b7dd8, #c8102e, #3b7dd8, #1f4f8f);
    --grad-butang: linear-gradient(110deg, #163a6b 0%, #1f4f8f 35%, #2f6fc2 50%, #1f4f8f 65%, #163a6b 100%);
}

@keyframes gradAlir {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gradGaris {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes cahayaHanyut {
    0%   { transform: translate3d(-6%, -4%, 0) scale(1); opacity: .55; }
    50%  { transform: translate3d(6%, 4%, 0) scale(1.08); opacity: .85; }
    100% { transform: translate3d(-6%, -4%, 0) scale(1); opacity: .55; }
}

/* ---------- Bar atas ---------- */
.bar-atas {
    background: linear-gradient(90deg, #0a1f3c, #0f2b52, #163a6b, #0f2b52, #0a1f3c);
    background-size: 300% 100%;
    animation: gradAlir 18s ease-in-out infinite;
}

/* ---------- Header: garis gradient bergerak di bawah ---------- */
.kepala::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--grad-aksen); background-size: 200% 100%;
    animation: gradGaris 8s linear infinite;
    pointer-events: none;
}

/* ---------- Hero: cahaya biru lembut yang hanyut ---------- */
.hero::after {
    content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(59, 125, 216, .35), transparent 70%),
        radial-gradient(35% 45% at 75% 70%, rgba(31, 79, 143, .40), transparent 70%),
        radial-gradient(25% 30% at 55% 20%, rgba(200, 16, 46, .12), transparent 70%);
    animation: cahayaHanyut 16s ease-in-out infinite;
    mix-blend-mode: screen;
}
.hero .label::before {
    background: var(--grad-aksen); background-size: 200% 100%;
    animation: gradGaris 4s linear infinite;
}

/* ---------- Kepala halaman dalaman ---------- */
.kepala-halaman {
    background: linear-gradient(120deg, #ffffff 0%, #f1f6fd 30%, #ffffff 55%, #eaf2fc 80%, #ffffff 100%);
    background-size: 300% 300%;
    animation: gradAlir 20s ease-in-out infinite;
    position: relative;
}
.kepala-halaman h1 {
    background: linear-gradient(90deg, #0a1f3c, #1f4f8f, #0a1f3c);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradAlir 10s ease-in-out infinite;
}

/* ---------- Butang ---------- */
.btn-utama,
.nav-utama > a.butang-cari {
    background: var(--grad-butang);
    background-size: 250% 100%;
    background-position: 0% 50%;
    animation: gradAlir 9s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(31, 79, 143, .18);
    transition: box-shadow .2s, transform .2s;
}
.btn-utama:hover,
.nav-utama > a.butang-cari:hover {
    background: var(--grad-butang);
    background-size: 250% 100%;
    animation-duration: 2.5s;
    box-shadow: 0 6px 18px rgba(31, 79, 143, .32);
    transform: translateY(-1px);
}
.btn-merah {
    background: linear-gradient(110deg, #a50d26, #c8102e, #e23a55, #c8102e, #a50d26);
    background-size: 250% 100%;
    animation: gradAlir 9s ease-in-out infinite;
}
.btn-merah:hover {
    background: linear-gradient(110deg, #a50d26, #c8102e, #e23a55, #c8102e, #a50d26);
    background-size: 250% 100%;
    animation-duration: 2.5s;
}

/* ---------- Kad: aksen garis gradient di atas ---------- */
.kad,
.kad-pautan,
.langkah > div,
.stat-grid {
    background-image: var(--grad-umk);
    background-size: 200% 3px;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: gradGaris 10s linear infinite;
}
.kad-pautan { transition: border-color .2s, box-shadow .2s, transform .2s; }
.kad-pautan:hover { transform: translateY(-2px); }
.kad-pautan .ikon { transition: background .25s, color .25s; }
.kad-pautan:hover .ikon {
    background: linear-gradient(135deg, #163a6b, #3b7dd8);
    color: #fff;
}
.langkah > div::before {
    background: linear-gradient(135deg, #0a1f3c, #1f4f8f, #3b7dd8);
    background-size: 200% 200%;
    animation: gradAlir 6s ease-in-out infinite;
}
.stat-grid .nilai {
    background: linear-gradient(90deg, #0a1f3c, #1f4f8f, #3b7dd8, #1f4f8f, #0a1f3c);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradAlir 8s ease-in-out infinite;
}

/* ---------- Footer ---------- */
.kaki {
    position: relative;
    background: linear-gradient(135deg, #07172e, #0a1f3c, #12325e, #0a1f3c, #07172e);
    background-size: 300% 300%;
    animation: gradAlir 22s ease-in-out infinite;
}
.kaki::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--grad-aksen); background-size: 200% 100%;
    animation: gradGaris 8s linear infinite;
    pointer-events: none;
}

/* ---------- Hormati pilihan "kurangkan gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
    .bar-atas, .kepala::after, .hero::after, .hero .label::before,
    .kepala-halaman, .kepala-halaman h1,
    .btn-utama, .nav-utama > a.butang-cari, .btn-merah,
    .kad, .kad-pautan, .langkah > div, .langkah > div::before,
    .stat-grid, .stat-grid .nilai, .kaki, .kaki::before {
        animation: none !important;
    }
    .kad-pautan:hover, .btn-utama:hover, .nav-utama > a.butang-cari:hover { transform: none; }
}

@media print {
    .kepala-halaman h1, .stat-grid .nilai {
        background: none !important; -webkit-text-fill-color: currentColor; color: #000;
    }
    .hero::after, .kaki::before, .kepala::after { display: none; }
}

/* ---------- Garis neon: warna bertukar macam lampu neon ---------- */
@keyframes neonWarna {
    0%   { filter: hue-rotate(0deg) brightness(1.15); }
    100% { filter: hue-rotate(360deg) brightness(1.15); }
}
.kepala::after,
.kaki::before {
    height: 3px;
    background: linear-gradient(90deg, #00e5ff, #ff2bd6, #00e5ff);
    background-size: 200% 100%;
    box-shadow: 0 0 6px rgba(0, 229, 255, .9), 0 0 16px rgba(0, 229, 255, .55);
    animation: gradGaris 3s linear infinite, neonWarna 6s linear infinite;
}

/* ---------- Kad: garis statik, glow biru bila hover ---------- */
.kad,
.kad-pautan,
.langkah > div,
.stat-grid {
    background-image: linear-gradient(90deg, #1f4f8f, #3b7dd8);
    background-size: 100% 3px;
    animation: none;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.kad:hover,
.kad-pautan:hover,
.langkah > div:hover {
    border-color: #b9cdea;
    box-shadow: 0 0 0 1px rgba(59, 125, 216, .25), 0 8px 24px rgba(59, 125, 216, .22);
}
.kad-pautan:hover,
.langkah > div:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .kad-pautan:hover, .langkah > div:hover { transform: none; }
}