/* =============================
   Responsive FAQ - Sudah Revisi
   ============================= */

/* 1280px */
@media (max-width: 1280px) {
    .wrap {
        padding: 20px;
        margin: 0 40px; /* lebih rapat dari 64px */
    }
    .search {
        width: 360px; /* agak kecil */
    }
}

/* 1024px (tablet landscape) */
@media (max-width: 1024px) {
    h1 {
        font-size: clamp(24px, 3.8vw, 34px);
    }
    .wrap {
        margin: 0 30px;
    }
    .search {
        width: 320px;
        padding: 8px 10px;
    }
    .search input {
        font-size: 14px;
    }
    .area-title,
    .area-search {
        width: 100%; /* stack jadi 1 kolom */
    }
    .area-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* 768px (tablet portrait) */
@media (max-width: 768px) {
    .wrap {
        padding: 16px;
        margin: 0 16px;
    }
    .page {
        padding: clamp(16px, 3vw, 28px);
    }
    .breadcrumbs {
        font-size: 13px;
    }
    .meta {
        font-size: 13px;
    }
    details,
    .cta {
        width: 100%; /* biar penuh di layar */
    }
}

/* 480px (mobile large) */
@media (max-width: 480px) {
    h1 {
        font-size: 22px;
    }
    .search {
        width: 100%;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    .search input {
        width: 100%;
        font-size: 14px;
    }
    .area-header {
        align-items: stretch;
    }
    .area-title {
        width: 100%;
    }
}

/* 375px (mobile small) */
@media (max-width: 375px) {
    .page {
        padding: 14px;
    }
    .tag {
        font-size: 11px;
        padding: 3px 8px;
    }
    .category {
        font-size: 16px;
    }
    h1 {
        font-size: 20px;
    }
}

/* 324px (extra small) */
@media (max-width: 324px) {
    h1 {
        font-size: 18px;
    }
    .breadcrumbs,
    .meta {
        font-size: 12px;
    }
    .search {
        padding: 6px 8px;
    }
    .search input {
        font-size: 13px;
    }
}