/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ---------- Tablet & Desktop ke bawah ---------- */
@media (max-width: 680px) {
    /* Banner turun ke bawah jika layar tidak muat */
    .banner-area {
        flex-wrap: wrap;
    }
    
    /* Banner mengecil mengikuti layar HP */
    .banner-slot {
        min-width: unset;
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 6 / 5; /* Jaga rasio 300x250 */
    }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 560px) {
    .main-container {
        padding: 16px 12px 32px;
    }

    .logo-title {
        font-size: 22px;
    }

    .glass-card {
        padding: 24px 16px;
    }

    .wheel-container {
        width: 300px;
        height: 300px;
    }
    .wheel-rotate {
        width: 255px;
        height: 255px;
    }

    .result-amount {
        font-size: 34px;
    }
}

/* ---------- Very Small Mobile ---------- */
@media (max-width: 380px) {
    .logo-title {
        font-size: 20px;
    }

    .wheel-container {
        width: 260px;
        height: 260px;
    }
    .wheel-rotate {
        width: 220px;
        height: 220px;
    }

    .btn-cta {
        padding: 14px 36px;
        font-size: 16px;
    }

    .tiers-preview {
        gap: 6px;
    }
    .tier-badge {
        font-size: 10px;
        padding: 3px 7px;
    }
}

@media (max-width: 320px) {
    .wheel-container {
        width: 240px;
        height: 240px;
    }
    .wheel-rotate {
        width: 205px;
        height: 205px;
    }
}