/* ============================================
   PDP Merah Putih — Responsive Breakpoints
   Mobile: < 768px
   Tablet: 768px – 1024px
   Desktop: > 1024px
   ============================================ */

/* --- Tablet (768px – 1024px) --- */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
    }

    .hero__inner {
        gap: var(--spacing-8);
    }

    .hero__illustration img {
        width: 360px;
    }

    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .footer__links {
        gap: var(--spacing-8);
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.375rem;
        --header-height: 64px;
    }

    .container {
        padding: 0 var(--spacing-4);
    }

    /* Header */
    .header__nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-white);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: var(--spacing-8);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        z-index: 999;
    }

    .header__nav--open {
        transform: translateX(0);
    }

    .header__nav-list {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-6);
    }

    .header__nav-link {
        font-size: var(--font-size-xl);
    }

    .hamburger {
        display: flex;
    }

    .header__actions .btn {
        display: none;
    }

    /* Hero */
    .hero {
        padding-top: calc(var(--header-height) + var(--spacing-10));
        padding-bottom: var(--spacing-12);
    }

    .hero__inner {
        flex-direction: column;
        text-align: center;
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__illustration {
        order: -1;
    }

    .hero__illustration img {
        width: 280px;
    }

    /* Problem */
    .problem {
        padding: var(--spacing-12) 0;
    }

    .problem__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* Features */
    .features {
        padding: var(--spacing-12) 0;
    }

    .features__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* How It Works */
    .how-it-works {
        padding: var(--spacing-12) 0;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* Pricing */
    .pricing {
        padding: var(--spacing-12) 0;
    }

    .pricing__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    /* Trust */
    .trust {
        padding: var(--spacing-12) 0;
    }

    .trust__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* FAQ */
    .faq {
        padding: var(--spacing-12) 0;
    }

    .faq__question {
        font-size: var(--font-size-base);
    }

    /* CTA */
    .cta {
        padding: var(--spacing-12) 0;
    }

    .cta__title {
        font-size: var(--font-size-2xl);
    }

    /* Footer */
    .footer {
        padding: var(--spacing-8) 0;
    }

    .footer__links {
        flex-direction: column;
        gap: var(--spacing-6);
    }

    .section__subtitle {
        margin-bottom: var(--spacing-8);
    }
}

/* --- Small Mobile (< 375px) --- */
@media (max-width: 375px) {
    :root {
        --font-size-5xl: 1.75rem;
    }

    .hero__cta {
        flex-direction: column;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .pricing-card__amount {
        font-size: var(--font-size-2xl);
    }
}