/* Styling dasar untuk header */
.blinking-header {
    /* Latar Belakang */
    background-color: #ffcc00; /* Warna awal kuning cerah */
    color: #333; /* Warna teks */
    padding: 20px; /* Jarak di dalam header */
    text-align: center;
    border-radius: 8px; /* Sudut membulat */
    
    /* Animasi Berkedip */
    animation-name: blink; /* Nama animasi yang akan kita definisikan */
    animation-duration: 3s; /* Durasi satu siklus kedipan (1 detik) */
    animation-timing-function: ease-in-out; /* Kecepatan animasi */
    animation-iteration-count: infinite; /* Ulangi terus menerus */
    animation-direction: alternate; /* Bolak-balik (berkedip dari 100% ke 50% dan kembali) */
}

/* Mendefinisikan urutan animasi (keyframes) */
@keyframes blink {
    /* Pada awal animasi (0%) */
    0% {
        opacity: 1; /* Transparansi penuh (terlihat) */
        background-color: #ffcc00; /* Kuning cerah */
    }
    
    /* Pada pertengahan animasi (50%) - Puncak 'kedipan' */
    50% {
        opacity: 0.5; /* Agak transparan */
        background-color: #ff6666; /* Merah muda/salmon */
    }
    
    /* Pada akhir animasi (100%) - Kembali ke normal */
    100% {
        opacity: 1; /* Transparansi penuh */
        background-color: #ffcc00; /* Kuning cerah */
    }
}

/* Styling untuk teks di dalam header */
.blinking-header h1 {
    margin: 0; /* Menghilangkan margin default h1 */
    font-size: 2em;
}