body { transition: background-color 0.3s; }

/* --- RESPONSIVE TABLE --- */
@media (max-width: 640px) {
    table thead { display: none; }
    table tr { 
        display: block; 
        margin-bottom: 1rem; 
        border: 1px solid #4a5568; 
        border-radius: 12px;
        padding: 10px;
    }
    table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        padding: 8px 5px !important;
        border: none !important;
        text-align: right;
    }
    table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        color: #FF6F61;
    }
    .download-btn { width: 100%; margin-top: 10px; }
}

/* --- VERTICAL BANNER (RAPAT / NO GAP) --- */
.banner-vertical-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 24px;
    border: none !important;
    overflow: hidden;
    border-radius: 12px;
}

.banner-item {
    position: relative;
    width: 100%;
    background-color: transparent; 
    border: none !important; 
    margin: 0;
    padding: 0;
    
    /* Rasio Tinggi */
    height: 0;
    padding-bottom: 12.5%; /* 720x90 ratio */
}

/* Penyesuaian di mobile */
@media (max-width: 640px) {
    .banner-item {
        padding-bottom: 20%; 
    }
}

.banner-item a, .banner-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.banner-item img {
    object-fit: contain; 
    object-position: center;
    padding: 0; 
}

/* --- MODAL ANIMATION --- */
.modal-active { opacity: 1 !important; pointer-events: auto !important; }
.modal-box-active { transform: scale(1) !important; }