*{box-sizing:border-box}
body
{
    margin:0;
    padding:0;
    font-family: Arial, sans-serif;
    background:#F5FBFF;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.topnav
{
    position:sticky;
    top:0;
    z-index:1000;
    background:linear-gradient(135deg, #0077B6, #00B4D8);
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.topnav-inner
{
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow: auto;
    white-space: nowrap;
}

.topnav-inner::-webkit-scrollbar{display: none}

.topnav a
{
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 6px;
}

.topnav a:hover{background: rgba(225,225,225,0.18)}

.card
{
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,119,182,0.12);
}

.footer
{
    margin: 50px 0 0 0;
    background: linear-gradient(135deg, #005B96, #0077B6, #00B4D8);
    color: white;
    padding: 20px 10%;
}

.footer h3
{
    border-bottom: 2px solid white;
    display: inline-block;
    padding-bottom: 0px;
}

.footer a
{
    color: white;
    text-decoration: none;
}

.footer-bottom
{
    text-align: center;
    border-top: 1px solid rgba(225,225,225,0.3);
    margin: 20px 0 0 0;
    padding-top: 15px;
}

/*BANNER)*/
#induk
{
    position: relative;
    padding-bottom: 15%;
}

#pertama, #kedua, #ketiga{
    width: 100%;
    position:absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: bergerak 30s infinite;
}

@keyframes bergerak{
    0% {opacity: 0; transform: translateX(100%);}
    33% {opacity: 1; transform: translateX(0);}
    66% {opacity: 0; transform: translateX(-100%);}
}

#pertama{animation-delay: 0s;}
#kedua{animation-delay: 10s;}
#ketiga{animation-delay: 20s;}