/* Membuat kotak putih di belakang logo */
.md-header__button.md-logo img {
    background-color: white;
    padding: 5px;       /* Jarak logo ke pinggir kotak */
    border-radius: 4px; /* Biar sudutnya tumpul (tidak lancip) */
    height: 40px;       /* Ukuran kotak disesuaikan */
    width: auto;
}
/* Animasi konten muncul pelan dari bawah (Slide Up) */
.md-content__inner {
    animation: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0; /* Awalnya transparan */
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px); /* Mulai dari posisi agak bawah */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Naik ke posisi asli */
    }
}

/* Biar gambar kalau di-hover ada efek zoom dikit (enak dilihat) */
.md-content img {
    transition: transform 0.3s ease;
}

.md-content img:hover {
    transform: scale(1.02); /* Zoom dikit pas kursor nempel */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Tambah bayangan */
    border-radius: 8px;
}
html {
    scroll-behavior: smooth;
}