/* =======================================================
   HOME-RESPONSIVE.CSS - KHUSUS TABLET & MOBILE
   ======================================================= */

/* --- TABLET ADJUSTMENTS (max-width: 992px) --- */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-large,
    .bento-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .compare-new {
        transform: scale(1);
        margin-top: 20px;
    }
    .compare-old {
        margin-top: 0;
        margin-bottom: 0;
    }
    .deadwood-container {
        grid-template-columns: 1fr;
    }

    .matrix-box {
        margin-left: 0;
        margin-top: 40px;
        padding: 30px 20px 50px 20px;
    }

    .matrix-grid::after {
        left: -25px;
        font-size: 9px;
        white-space: nowrap;
    }

    .matrix-grid {
        gap: 10px;
    }
}

/* --- MOBILE ADJUSTMENTS (max-width: 768px) --- */
@media (max-width: 768px) {

    /* 1. KECILKAN SEMUA PADDING SECTION */
    .bento-section,
    .steps-section,
    .usecase-section,
    .compare-section,
    .affiliate-section,
    .faq-section,
    .deadwood-section,
    .trust-section {
        padding: 50px 5% !important;
    }

    /* 2. KECILKAN UKURAN JUDUL (H2) SECARA GLOBAL */
    .bento-header h2,
    .steps-section h2,
    .usecase-header h2,
    .compare-header h2,
    .affiliate-section h2,
    .faq-section h2,
    .deadwood-text h2,
    .calc-header h2,
    .stats-wrapper h2,
    .final-cta h2 {
        font-size: 26px !important;
        line-height: 1.25;
        margin-bottom: 12px;
        letter-spacing: -1px;
    }

    /* 3. PERBAIKAN HERO SECTION (ADJUSTED FOR VISIBLE BRANDS) */
    .hero-slider-container {
        /* 80vh memastikan baris brand di bawahnya punya ruang 20% untuk terlihat */
        height: 80vh !important; 
        min-height: 520px !important; 
        display: flex !important;
        align-items: center !important; 
        /* Kurangi padding-top agar tidak melompong di bawah navbar */
        padding-top: 30px !important; 
        position: relative !important;
    }

    .hero-slide {
        justify-content: center !important; 
        padding: 0 6% !important;
    }
    .hero-text h1 {
        font-size: 30px !important; /* Diperbesar agar lebih 'punchy' */
        font-weight: 800 !important; /* Lebih tebal khas SaaS modern */
        line-height: 1.1 !important;
        letter-spacing: -1.5px !important; /* Spasi rapat ala desain Apple/Stripe */
        margin-bottom: 10px !important;
    }
    .hero-text p {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255,255,255,0.85);
        max-width: 90%;
        margin: 0 auto 20px;
    }

    .hero-buttons {
        justify-content: center;
        margin-bottom: 25px;
        gap: 10px !important;
    }

    .btn-demo, .btn-wa {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .mockup-frame {
        width: 95% !important; /* Hampir memenuhi lebar layar HP */
        max-width: 320px !important; 
        height: auto !important; /* Biarkan tinggi mengikuti proporsi gambar */
        min-height: 180px;
        margin: 10px auto 0 !important;
        /* Tambahkan bayangan lembut agar dashboard terlihat 'naik' */
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        border-radius: 12px;
        overflow: hidden;
        background: transparent !important;
    }
    .mockup-frame img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* Posisi titik slider diatur agar tidak bertabrakan dengan Brand */
    .slider-dots {
        bottom: 20px !important; 
    }

    /* --- 4. BRAND SECTION (RESTORED TO ORIGINAL WHITE BAR) --- */
    .brand-section {
        padding: 20px 0 !important; /* Sedikit lebih tipis agar efisien */
        background: #ffffff !important;
        border-top: 1px solid #f1f5f9;
        position: relative;
        z-index: 5;
    }
    .brand-item {
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px;
        opacity: 0.6; /* Warna brand dibuat soft agar dashboard tetap jadi bintang utama */
    }

    .brand-container {
        overflow: hidden;
    }

    /* 5. PERBAIKAN CARD (BENTO, AFFILIATE, USECASE) */
    .bento-card,
    .aff-card,
    .usecase-card {
        padding: 25px !important;
        border-radius: 20px;
    }
    .bento-card h3 {
        font-size: 20px;
    }

    /* 6. PERBAIKAN CARD COMPARE (SAMPING-SAMPINGAN DI HP) */
    .compare-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: stretch;
    }
    .compare-box {
        padding: 25px 12px 15px 12px !important;
        border-radius: 16px;
    }
    .compare-new {
        transform: scale(1) !important;
        margin-top: 0 !important;
    }
    .compare-old h3,
    .compare-new h3 {
        font-size: 12px !important;
        margin-bottom: 15px !important;
        line-height: 1.4;
        text-align: center;
    }
    .compare-new .badge-win {
        font-size: 9px !important;
        padding: 4px 10px !important;
        top: -12px !important;
        white-space: nowrap;
    }
    .compare-list li {
        font-size: 11px !important;
        line-height: 1.3 !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        align-items: flex-start;
    }
    .c-icon {
        width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
        margin-top: 2px !important;
        flex-shrink: 0;
    }

    /* 7. PERBAIKAN TRUST SECTION & MASSIVE REVIEW */
    .trust-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }
    .stats-wrapper {
        padding-right: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    .stats-wrapper h2 {
        margin-top: 0 !important;
        font-size: 26px !important;
        margin-bottom: 25px !important;
    }
    .stats-grid-compact {
        gap: 20px 10px !important;
    }
    .stat-number {
        font-size: 34px !important;
    }
    .stat-label {
        font-size: 10px !important;
    }

    /* KARTU REVIEW MINIATUR */
    .massive-review-card {
        width: 100% !important;
        border-radius: 16px !important;
    }
    .mrc-top-split {
        flex-direction: row !important;
        height: 200px !important;
    }
    .mrc-image-area {
        width: 45% !important;
    }
    .mrc-content-area {
        width: 60% !important;
        border-radius: 100px 0 0 100px !important;
        margin-left: -8% !important;
        padding: 15px 10px 15px 25px !important;
    }
    .mrc-headline {
        font-size: 14px !important;
    }
    .mrc-author-block h4 {
        font-size: 12px !important;
    }
    .mrc-author-block p {
        font-size: 9px !important;
    }

    /* 8. PERBAIKAN KALKULATOR */
    .calc-card {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 25px;
    }
    .result-number {
        font-size: 28px;
    }

    /* 9. FINAL CTA */
    .final-cta {
        padding: 50px 5% !important;
    }
    .final-cta h2 {
        font-size: 30px !important;
    }
    .btn-final {
        width: 100%;
    }

    /* 10. KACHING PARTNER PROGRAM (SWIPE) */
    .affiliate-steps {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 15px !important;
        margin: 0 -5% !important;
        padding: 10px 5% 20px 5% !important;
    }
    .aff-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center;
    }
}