html { height: 100%; }

body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: 8px;
    scrollbar-color: linear-gradient(135deg, #0080ff, #00a3ff), #0d2966;

}


.border-konten{
    width: 100%;
    height: 3rem;
    background-color: #2828281a;
    border: solid rgba(25, 25, 25, 0.15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em #0000001a, inset 0 .150em .5em #00000026;
 }


.gambarberanda{
    object-fit:cover;
    object-position:center;
    min-height:140px;
    max-height: 200px;
    border-radius:15px;
}

.dropmenu{
   opacity: 0;
   display: none;
   visibility: hidden;
   transition: all .5s ease;
}

.dropmenu-aktif{
    opacity: 1;
    display: contents;
    visibility: visible;
    transition: all .5s ease;
    background-color: rgb(18 63 129 / 88%);

}


.stabilo{
background-color:  #FFF59D;
}

@media screen and (width > 429px){
    .berita-box{
        display: flex;
    }

    .berita-img{
        object-fit: cover;
        max-width: auto;
        max-height: 150px;
    }

    .vidio-box{
        max-width: 200px;
    }
}

@media screen and (width < 430px){
    .berita-box{
        display: block;
    }
    .berita-img{
        object-fit: cover;
        max-width: auto;
        max-height: auto;
    }

    .vidio-box{
        max-width: 100%;
    }
}

.gradient-primary {
    background: linear-gradient(135deg, #0066cc 0%, #0080ff 50%, #00a3ff 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #1a4d99 0%, #0066cc 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, #00a3ff 0%, #33c3ff 50%, #66d9ff 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #0d2966 0%, #1a4d99 50%, #0066cc 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(200, 230, 255, 0.3);
}

.glass-dark {
    background: rgba(13, 41, 102, 0.85);
    backdrop-filter: blur(10px);
}

.text-gradient {
    background: linear-gradient(135deg, #00a3ff 0%, #66d9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}

.slideshow-container {
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.nav{
  position: relative;
  color: white;
  z-index: 1;
}

.nav.nav-aktif::before{
    opacity: 0.9;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);
}

.nav.nav-aktif{
    opacity: 0.9;
    backdrop-filter: blur(10px);
}


.accessibility-panel {
    transition: all 0.3s ease;
}

.high-contrast {
    filter: contrast(1.5);
}

.grayscale-mode {
    filter: grayscale(1);
}

.large-text body {
    font-size: 1.2em;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-contenti {
    display: none;
}

.tab-contenti.active {
    display: block;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}


::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0d2966;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0080ff, #00a3ff);
    border-radius: 4px;
}