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

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    .container {
        padding: 0 30px;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .charts-row {
        grid-template-columns: 1fr;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* ========== NAVBAR MOBILE ========== */
    .menu-toggle {
        display: block;
    }
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #0a0a0a;
        flex-direction: column;
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        z-index: 999;
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-menu li {
        margin: 0.5rem 0;
    }

    /* ========== TYPOGRAPHY MOBILE ========== */
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.1rem;
    }
    .section-title {
        margin-bottom: 2rem;
    }
    .section-title h1 {
        font-size: 1.8rem;
    }
    .section-title h2 {
        font-size: 1.5rem;
    }

    /* ========== GRID MOBILE ========== */
    .products-grid {
        grid-template-columns: 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .categories-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .charts-row {
        grid-template-columns: 1fr;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .referral-stats {
        grid-template-columns: 1fr;
    }
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ========== BUTTONS MOBILE ========== */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .btn-primary, .btn-wa, .btn-outline {
        padding: 0.6rem 1.2rem;
    }

    /* ========== HERO MOBILE ========== */
    .hero {
        padding-top: 100px;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content h1 {
        font-size: 1.8rem;
    }
    .hero-content p {
        font-size: 0.9rem;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .hero-stats {
        justify-content: center;
        flex-direction: column;
        gap: 0.8rem;
    }
    .hero-image {
        display: none;
    }
    .hero-badge {
        font-size: 0.7rem;
    }

    /* ========== PRODUCT CARD MOBILE ========== */
    .product-card {
        padding: 1rem;
    }
    .product-card h3 {
        font-size: 1rem;
    }
    .price {
        font-size: 1.2rem;
    }
    .price-options {
        gap: 0.3rem;
    }
    .price-tag {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    /* ========== CATEGORY FILTER MOBILE ========== */
    .category-filter {
        gap: 0.5rem;
    }
    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    /* ========== CHECKOUT MOBILE ========== */
    .checkout-card {
        padding: 1.5rem;
    }
    .checkout-container {
        padding: 0 15px;
    }
    .form-group input, .form-group select {
        padding: 0.6rem;
    }

    /* ========== CTA MOBILE ========== */
    .cta-content h2 {
        font-size: 1.5rem;
    }
    .cta-content p {
        font-size: 0.9rem;
    }

    /* ========== FOOTER MOBILE ========== */
    footer {
        padding: 2rem 0 1rem;
    }
    .footer-logo {
        font-size: 1.2rem;
    }
    .footer-about p {
        font-size: 0.75rem;
    }
    .social-links {
        justify-content: center;
    }
    .footer-contact a {
        text-align: center;
    }

    /* ========== MODAL MOBILE ========== */
    .modal-content {
        width: 95%;
        padding: 1.2rem;
    }
    .modal-header h3 {
        font-size: 1.1rem;
    }

    /* ========== FORM MOBILE ========== */
    .form-group input, .form-group select, .form-group textarea {
        padding: 0.6rem;
        font-size: 0.85rem;
    }
    .filter-group {
        flex-direction: column;
    }
    .filter-group input, .filter-group select {
        width: 100%;
    }

    /* ========== TABLES MOBILE ========== */
    .table-responsive {
        overflow-x: auto;
    }
    .data-table {
        min-width: 500px;
    }
    th, td {
        padding: 8px;
        font-size: 0.7rem;
    }

    /* ========== REFERRAL MOBILE ========== */
    .referral-link-box {
        padding: 1rem;
    }
    .link-container {
        flex-direction: column;
    }
    .link-container button {
        width: 100%;
    }

    /* ========== GAMES MOBILE ========== */
    .wheel-container {
        transform: scale(0.9);
    }
    .guess-game {
        flex-direction: column;
        align-items: center;
    }
    .guess-game input {
        width: 80%;
    }
    .spin-btn, .lucky-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }

    /* ========== SUBSCRIPTION MOBILE ========== */
    .pricing-card {
        padding: 1.2rem;
    }
    .pricing-card h3 {
        font-size: 1.2rem;
    }
    .price {
        font-size: 1.5rem;
    }
    .pricing-card ul li {
        font-size: 0.8rem;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .stat h3 {
        font-size: 1.5rem;
    }
    .stat p {
        font-size: 0.7rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .price-options {
        gap: 0.3rem;
    }
    .price-tag {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
    
    .hero-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.8rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    .section-title p {
        font-size: 0.85rem;
    }
    
    .product-card {
        padding: 0.8rem;
    }
    
    .rules-grid {
        grid-template-columns: 1fr;
    }
    
    .badges-grid {
        grid-template-columns: 1fr;
    }
    
    .membership-info {
        padding: 1rem;
    }
    .vip-badge {
        font-size: 1.2rem;
    }
    
    .result {
        font-size: 0.8rem;
    }
    
    .remaining {
        font-size: 0.7rem;
    }
}

/* Landscape Mode untuk HP */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 120px 0 60px;
    }
    .hero-grid {
        gap: 1rem;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar {
        width: 200px;
    }
    .main-content {
        margin-left: 200px;
    }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
}