/* =========================================================
   HOME PAGE
   Dipakai oleh:
   - home.blade.php
   - Halaman donasi
   - components.campaign-card (variant default & list)

   Seluruh nilai mengacu pada token global.css.

   Prinsip tampilan: padat & minimalis.
   - Jarak antar section & di dalam card dikecilkan.
   - Desktop: card boleh banyak agar konten terlihat berkelompok.
   - Mobile : minim card bertumpuk (list tanpa card, scroll horizontal).

   DAFTAR ISI
   1. Global
   2. Hero
   3. Kategori
   4. Campaign card (default vertikal & list horizontal)
   5. Campaign baru
   6. Testimonial
   7. List campaign (wrapper)
   8. Filter donasi
   9. Responsive tablet
   10. Responsive mobile
   11. Aksesibilitas
========================================================= */


/* =========================================================
   1. GLOBAL
========================================================= */

.main {
    --scrim: color-mix(in srgb, var(--text-dark) 72%, transparent);
    --on-dark: var(--bg);
    --on-dark-soft: color-mix(in srgb, var(--bg) 75%, transparent);

    overflow-x: hidden;
    overflow-x: clip; /* clip (bukan hidden) agar elemen sticky di dalam .main tetap berfungsi */
    background: var(--bg-soft);
}

/* jarak section dipadatkan: 32px desktop → 24px tablet → 20px mobile */
.main .section {
    padding-block: var(--space-8);
}

.main .section-title {
    margin-bottom: var(--space-4);
    color: var(--text-dark);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.main .section-border {
    border-top: 1px solid var(--border-soft);
    background: var(--bg);
}


/* =========================================================
   2. HERO
========================================================= */

/* tanpa padding bawah: jarak ke section berikutnya sudah dari .section */
.hero-section {
    padding-block: var(--space-4) 0;
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-6);
    align-items: stretch;
}

.hero-card,
.hero-side-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
}

.hero-main-slider,
.hero-side-slider {
    min-height: 320px;
}

.hero-main-slider {
    aspect-ratio: 16 / 9;
}

/* Slide utama */

.hero-slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.015);
    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .55s ease;
}

.hero-slide.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.hero-slide a {
    display: block;
    height: 100%;
}

.hero-slide img,
.hero-side-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Slide berita */

.hero-side-card {
    position: absolute;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateX(14px);
    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .45s ease;
}

.hero-side-card.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.hero-side-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 25%,
        var(--scrim) 100%
    );
    content: "";
}

.hero-side-body {
    position: absolute;
    z-index: 2;
    right: var(--space-4);
    bottom: var(--space-6);
    left: var(--space-4);
}

.hero-side-body span {
    display: inline-flex;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg) 20%, transparent);
    color: var(--on-dark);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
}

.hero-side-body h3 {
    margin: 0;
    color: var(--on-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}

/* Dots slider */

.hero-dots,
.hero-side-dots {
    position: absolute;
    z-index: 5;
    bottom: var(--space-4);
    left: 50%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transform: translateX(-50%);
}

.hero-side-dots {
    bottom: var(--space-3);
}

.hero-dot,
.hero-side-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    transition:
        width .2s ease,
        background .2s ease;
}

.hero-dot.active,
.hero-side-dot.active {
    width: 24px;
    background: var(--bg);
}


/* =========================================================
   3. KATEGORI
========================================================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.category-grid-small {
    margin-bottom: var(--space-4);
}

.category-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.category-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
}

.category-icon img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.category-item p {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.35;
}


/* =========================================================
   4. CAMPAIGN CARD
   Satu struktur untuk dua variant:
   - default  : vertikal  (.campaign-grid)
   - .is-list : horizontal (.list-campaign)

   Thumbnail selalu 16:9.

   Tipografi SAMA untuk kedua variant (satu aturan, tanpa
   override khusus list):
   - judul   : --fs-sm, mobile (≤ 600px) --fs-xs
   - nominal : --fs-sm
   - pendukung (donatur, persen, penggalang) : --fs-xxs

   Susunan isi:
   thumbnail + badge sisa hari
   judul
   nominal terkumpul
   progress + persen
   footer: donatur (kiri) • penggalang (kanan)
========================================================= */

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.campaign-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.campaign-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Thumbnail — selalu 16:9 */

.campaign-thumb {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-soft);
}

.campaign-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.campaign-card:hover .campaign-thumb img {
    transform: scale(1.05);
}

/* Badge sisa hari */

.campaign-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    box-shadow: var(--shadow-soft);
    color: var(--text);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    line-height: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.campaign-badge.is-urgent {
    background: var(--danger);
    color: var(--bg);
}

.campaign-badge.is-done {
    background: var(--muted);
    color: var(--bg);
}

.campaign-badge .bi-infinity {
    color: var(--primary);
    font-size: var(--fs-sm);
    line-height: 1;
}

/* Isi */

.campaign-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
}

.campaign-title {
    display: -webkit-box;
    min-height: 2.8em;
    margin: 0;
    overflow: hidden;
    color: var(--text-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color .2s ease;
}

.campaign-card:hover .campaign-title {
    color: var(--primary);
}

.campaign-amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    margin-top: auto;
}

.campaign-amount strong {
    color: var(--primary);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.campaign-amount small {
    color: var(--muted);
    font-size: var(--fs-xxs);
    line-height: 1.4;
    align-self: flex-end;
}
/* Progress */

.campaign-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.campaign-card .progress,
.new-item .progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--primary-light);
}

.campaign-card .progress-fill,
.new-item .progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.campaign-progress .progress {
    flex: 1;
    min-width: 0;
}

.campaign-percent {
    min-width: 32px;
    flex-shrink: 0;
    color: var(--primary);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    text-align: right;
}

/* Target tercapai */

.campaign-progress.is-complete .progress-fill {
    background: var(--success);
}

.campaign-progress.is-complete .campaign-percent {
    color: var(--success);
}

/* Footer: donatur (kiri) • penggalang (kanan) */

.campaign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: var(--fs-xxs);
}

.campaign-donors {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.campaign-donors i {
    color: var(--primary);
}

.campaign-donors b {
    color: var(--text-dark);
    font-weight: var(--fw-bold);
}

.campaign-org {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.campaign-org-avatar {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--border-soft);
    color: var(--primary);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* foto menutupi inisial; jika gagal dimuat, inisial tetap terlihat */
.campaign-org-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg);
}

.campaign-org-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-weight: var(--fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Variant list (horizontal, full width) ---------- */

.campaign-card.is-list {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
}

/* thumbnail tetap 16:9, berada di tengah (tidak menempel di atas) */
.campaign-card.is-list .campaign-thumb {
    flex: 0 0 240px;
    align-self: center;
    border-radius: var(--radius-md);
}

.campaign-card.is-list .campaign-body {
    flex: 1 1 0;
    padding: 0;
}

/* ukuran huruf tidak di-override: judul list = judul default */
.campaign-card.is-list .campaign-title {
    min-height: 0;
}

.campaign-card.is-list .campaign-amount {
    margin-top: auto;
}

/* desktop: thumbnail lebih besar karena card lebar */
@media (min-width: 901px) {

    .campaign-card.is-list .campaign-thumb {
        flex-basis: 280px;
    }
}


/* =========================================================
   5. CAMPAIGN BARU
   Desain khusus "Yuk, Lihat yang Baru!"
   Tidak menggunakan campaign-card.
   Di mobile: hanya thumbnail (judul section disembunyikan
   secara visual, overlay dimatikan).
========================================================= */

.new-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.new-item {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.new-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

.new-item:hover img {
    transform: scale(1.04);
}

.new-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-4);
    background: linear-gradient(
        180deg,
        transparent 35%,
        var(--scrim) 100%
    );
    opacity: 0;
    transition: opacity .3s ease;
}

.new-item:hover .new-item-overlay {
    opacity: 1;
}

.new-item-overlay h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 var(--space-1);
    color: var(--on-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.new-item-overlay p {
    margin: 0 0 var(--space-2);
    color: var(--on-dark-soft);
    font-size: var(--fs-xxs);
}

.new-item-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.new-item-price strong {
    color: var(--on-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.new-item-price span,
.new-item-meta {
    color: var(--on-dark-soft);
    font-size: var(--fs-xxs);
}

.new-item-meta {
    display: flex;
    justify-content: space-between;
}

.new-item .progress {
    margin-bottom: var(--space-2);
    background: color-mix(in srgb, var(--bg) 25%, transparent);
}

.new-item .progress-fill {
    background: var(--on-dark);
}


/* =========================================================
   6. TESTIMONIAL
========================================================= */

.testimonial {
    background: linear-gradient(
        180deg,
        var(--bg-soft),
        var(--primary-light)
    );
}

.testimonial-wrapper {
    --offset: 280px;
    --side-scale: .82;
    --side-opacity: .5;

    /* Semua item ditumpuk di satu sel grid (bukan position: absolute),
       sehingga tinggi wrapper otomatis mengikuti kartu aktif dan teks
       panjang tidak pernah terpotong. Padding atas memberi ruang untuk
       avatar yang menjulur keluar dari kartu aktif. */
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-6) 0 var(--space-4);
    overflow-x: clip;
}

.testimonial-item {
    grid-area: 1 / 1;
    transition:
        transform .6s cubic-bezier(.25, 1, .5, 1),
        opacity .6s ease,
        z-index .6s step-end;
}

.testimonial-item.is-active {
    z-index: 3;
    transform: translateX(0) scale(1);
    opacity: 1;
}

.testimonial-item.is-prev,
.testimonial-item.is-next {
    z-index: 2;
    opacity: var(--side-opacity);
}

.testimonial-item.is-prev {
    transform: translateX(calc(var(--offset) * -1)) scale(var(--side-scale));
}

.testimonial-item.is-next {
    transform: translateX(var(--offset)) scale(var(--side-scale));
}

.testimonial-item.is-hidden {
    z-index: 1;
    transform: translateX(0) scale(.6);
    opacity: 0;
    pointer-events: none;
}

/* Card */

.testimonial-card {
    width: 240px;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-card);
    text-align: left;
    transition: all .5s ease;
}

.testimonial-item.is-active .testimonial-card {
    width: min(340px, calc(100vw - var(--space-8)));
    padding: var(--space-10) var(--space-6) var(--space-6);
    border-color: var(--border);
    box-shadow: var(--shadow-hover);
}

/* Head */

.testimonial-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    transition: all .5s ease;
}

.testimonial-item.is-active .testimonial-head {
    flex-direction: column;
    margin-bottom: var(--space-3);
    text-align: center;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 2px var(--bg);
    object-fit: cover;
    transition: all .5s ease;
}

.testimonial-item.is-active .testimonial-avatar {
    width: 72px;
    height: 72px;
    margin-top: -58px;
    box-shadow: 0 0 0 4px var(--bg), var(--shadow-soft);
}

.testimonial-person-info h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.testimonial-item.is-active .testimonial-person-info h3 {
    font-size: var(--fs-md);
}

.testimonial-person-info span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xxs);
}

/* Deskripsi */

.testimonial-description {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-xxs);
    line-height: 1.6;
    transition: all .5s ease;
}

.testimonial-description,
.testimonial-person-info h3 {
    overflow-wrap: anywhere;
}

/* kartu samping hanya preview: dibatasi 4 baris agar tidak menambah
   tinggi wrapper; kartu aktif selalu tampil penuh */
.testimonial-item:not(.is-active) .testimonial-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.testimonial-item.is-active .testimonial-description {
    color: var(--text);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    text-align: center;
}

/* Navigasi */

.testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.testimonial-arrow {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1;
    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.testimonial-arrow:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.testimonial-arrow:active {
    transform: scale(.92);
}

.testimonial-dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--border);
    cursor: pointer;
    transition:
        background .3s ease,
        transform .3s ease;
}

.testimonial-dot.active {
    background: var(--primary);
    transform: scale(1.4);
}


/* =========================================================
   7. LIST CAMPAIGN (wrapper)
   Satu kolom penuh di semua ukuran layar.
   Isi card diatur di bagian 4 (.campaign-card.is-list).
   Dipakai di: Home (Pilih Kategori Favoritmu) dan
   halaman Donasi (Campaign Lainnya).
========================================================= */

.list-campaign {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}


/* =========================================================
   8. FILTER DONASI
   Muncul hanya setelah kategori dipilih (atau ada filter aktif).
   Bar: Kategori (pilih satu) • Jenis penggalang (pilih satu)
        • Filter (checklist).
   Desktop : Kategori & Jenis = dropdown di bawah tombol;
             Filter = chip inline (tanpa dropdown).
   Mobile  : ketiganya bottom sheet (≤ 768px, sama dengan bottom nav).
   Semua input berada di satu <form>.
========================================================= */

/* Ikon kategori (tanpa kategori terpilih) & judul kategori (terpilih).
   Berada di bawah bar filter; padding bawah memberi jarak ke section berikutnya. */

.donasi-category-section {
    padding-bottom: var(--space-6);
}

/* Judul kategori terpilih (desktop).
   Di mobile disembunyikan karena nama kategori sudah tampil di header. */

.donasi-kategori-bar {
    padding-bottom: var(--space-3);
}

.donasi-kategori-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.donasi-kategori-title h1 {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.donasi-kategori-title a {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.donasi-kategori-title a:hover {
    text-decoration: underline;
}

/* Bar filter */

.donasi-filter-section {
    position: sticky;
    top: 75px; /* tepat di bawah header desktop (74px + border) */
    z-index: 50;
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
}

/* saat panel terbuka, naik di atas header (100) dan bottom nav (250) */
.donasi-filter-section.is-open {
    z-index: 300;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.filter-item {
    position: relative;
    min-width: 0;
}

/* label "Filter" di depan chip: hanya dipakai di desktop */
.filter-inline-label {
    display: none;
}

/* Tombol pemicu */

.filter-trigger {
    display: inline-flex;
    height: 40px;
    max-width: 100%;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.filter-trigger:hover {
    border-color: var(--primary);
    background: var(--bg-soft);
    color: var(--primary);
}

.filter-trigger.is-active,
.filter-trigger[aria-expanded="true"] {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: var(--fw-bold);
}

.filter-trigger-icon {
    flex-shrink: 0;
    color: var(--primary);
    font-size: var(--fs-sm);
    line-height: 1;
}

.filter-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-trigger-caret {
    flex-shrink: 0;
    color: var(--muted);
    font-size: var(--fs-xxs);
    transition: transform .2s ease;
}

.filter-trigger[aria-expanded="true"] .filter-trigger-caret {
    color: var(--primary);
    transform: rotate(180deg);
}

.filter-trigger-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--bg);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* Hapus semua */

.filter-reset {
    display: inline-flex;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition:
        background-color .2s ease,
        color .2s ease;
}

.filter-reset i {
    font-size: var(--fs-xxs);
}

.filter-reset:hover,
.filter-reset:focus-visible {
    background: var(--danger-light);
    color: var(--danger);
}

/* Backdrop (transparan di desktop: hanya penangkap klik luar) */

.filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    background: transparent;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.donasi-filter-section.is-open .filter-backdrop {
    visibility: visible;
    opacity: 1;
}

/* Panel */

.filter-panel {
    position: absolute;
    z-index: 2;
    top: calc(100% + var(--space-2));
    left: 0;
    display: flex;
    width: 320px;
    max-height: min(70vh, 480px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-hover);
    outline: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.filter-item.is-open .filter-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}

.filter-panel-head h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
}

.filter-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    place-items: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-xs);
    transition:
        background-color .2s ease,
        color .2s ease;
}

.filter-close:hover {
    background: var(--bg-soft);
    color: var(--text-dark);
}

.filter-panel-body {
    flex: 1;
    min-height: 0;
    padding: var(--space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-empty {
    padding: var(--space-4);
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: center;
}

.filter-panel-foot {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-soft);
    background: var(--bg);
}

/* lebar tombol global (100% di ≤576px) tidak dipakai di footer panel */
.filter-panel-foot .btn {
    width: auto;
}

.filter-panel-foot .btn-primary {
    flex: 1;
}

/* Opsi (radio = pilih satu, checkbox = checklist) */

.filter-option {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.filter-option:hover {
    background: var(--bg-soft);
}

.filter-option:has(input:checked) {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: var(--fw-bold);
}

.filter-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-option-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.filter-option-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.filter-option-glyph {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    font-size: var(--fs-xs);
    transition: background-color .15s ease;
}

.filter-option:has(input:checked) .filter-option-glyph {
    background: var(--bg);
}

/* Penanda pilihan (radio bulat / checkbox kotak) */

.filter-option-mark {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg);
    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.filter-option-mark::after {
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--primary);
    content: "";
    transform: scale(0);
    transition: transform .15s ease;
}

.filter-option input:checked ~ .filter-option-mark {
    border-color: var(--primary);
}

.filter-option input:checked ~ .filter-option-mark::after {
    transform: scale(1);
}

.filter-option input:focus-visible ~ .filter-option-mark {
    outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
    outline-offset: 2px;
}

/* checkbox */

.filter-option-mark.is-check {
    border-radius: 6px;
}

.filter-option-mark.is-check::after {
    inset: auto;
    top: 0;
    left: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: transparent;
    transform: rotate(45deg) scale(0);
}

.filter-option input:checked ~ .filter-option-mark.is-check {
    background: var(--primary);
}

.filter-option input:checked ~ .filter-option-mark.is-check::after {
    transform: rotate(45deg) scale(1);
}

/* saat panel terbuka, floating WhatsApp disembunyikan agar tidak menutupi */
body.filter-open .floating-wa-container {
    display: none;
}

/* ---------- Desktop: "Filter" jadi chip inline (tanpa dropdown) ----------
   Input yang sama dipakai ulang (tidak ada input ganda): tombol pemicu
   disembunyikan, panel dipaksa tampil sebagai baris chip.
   Semua tetap dalam SATU baris: bila chip melebihi lebar, deretan chip
   bisa digeser ke samping (bar tidak turun jadi dua baris). */

@media (min-width: 769px) {

    .filter-item.is-inline {
        display: flex;
        min-width: 0;
        flex: 1 1 0;
        align-items: center;
        gap: var(--space-3);
        padding-left: var(--space-3);
        border-left: 1px solid var(--border-soft);
    }

    .filter-inline-label {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--space-1);
        color: var(--muted);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        white-space: nowrap;
    }

    .filter-inline-label i {
        color: var(--primary);
    }

    .filter-item.is-inline .filter-trigger,
    .filter-item.is-inline .filter-panel-head,
    .filter-item.is-inline .filter-panel-foot {
        display: none;
    }

    .filter-item.is-inline .filter-panel {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-height: none;
        flex: 1;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* satu baris, bisa digeser ke samping; padding/margin vertikal
       memberi ruang agar outline fokus tidak terpotong */
    .filter-item.is-inline .filter-panel-body {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        margin-block: calc(var(--space-1) * -1);
        padding: var(--space-1);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .filter-item.is-inline .filter-panel-body::-webkit-scrollbar {
        display: none;
    }

    .filter-item.is-inline .filter-empty {
        padding: 0;
        text-align: left;
        white-space: nowrap;
    }

    /* tiap opsi = satu chip */
    .filter-item.is-inline .filter-option {
        min-height: 40px;
        flex-shrink: 0;
        padding: 0 var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg);
        color: var(--text-dark);
        white-space: nowrap;
    }

    .filter-item.is-inline .filter-option:hover {
        border-color: var(--primary);
        background: var(--bg-soft);
        color: var(--primary);
    }

    .filter-item.is-inline .filter-option:has(input:checked) {
        border-color: var(--primary);
        background: var(--primary-light);
        color: var(--primary);
        font-weight: var(--fw-bold);
    }

    .filter-item.is-inline .filter-option:has(input:focus-visible) {
        outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
        outline-offset: -1px;
    }

    .filter-item.is-inline .filter-option-main {
        gap: 0;
    }

    .filter-item.is-inline .filter-option-mark {
        display: none;
    }
}

/* ---------- Mobile: bottom sheet ---------- */

@media (max-width: 768px) {

    .donasi-filter-section {
        top: 67px; /* tepat di bawah header mobile (66px + border) */
    }

    .filter-item {
        flex: 1 1 0;
    }

    .filter-trigger {
        width: 100%;
        height: 38px;
        justify-content: center;
        gap: var(--space-1);
        padding: 0 var(--space-2);
    }

    .filter-trigger-caret {
        display: none;
    }

    .filter-reset {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        justify-content: center;
        margin-left: 0;
        padding: 0;
        border: 1px solid var(--border);
    }

    .filter-reset span {
        display: none;
    }

    .filter-backdrop {
        background: var(--scrim);
    }

    .filter-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 82vh;
        max-height: 82dvh;
        border-width: 1px 0 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -12px 40px color-mix(in srgb, var(--text-dark) 18%, transparent);
        transform: translateY(100%);
        transition:
            transform .3s cubic-bezier(.25, 1, .5, 1),
            opacity .2s ease,
            visibility .3s ease;
    }

    .filter-item.is-open .filter-panel {
        transform: translateY(0);
    }

    /* garis pegangan sheet */
    .filter-panel-head {
        position: relative;
        padding: var(--space-5) var(--space-3) var(--space-3) var(--space-4);
    }

    .filter-panel-head::before {
        position: absolute;
        top: var(--space-2);
        left: 50%;
        width: 36px;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--border);
        content: "";
        transform: translateX(-50%);
    }

    .filter-panel-foot {
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    }

    body.filter-open {
        overflow: hidden;
    }
}


/* =========================================================
   8A. VARIASI SECTION & EMPTY STATE (halaman donasi)
   - .tone-*       : warna aksen per section (judul & empty state)
   - .section-band : pita putih sebagai pemisah antar section
   - .empty-state  : kondisi tanpa campaign (markup di donasi.blade)
========================================================= */

.tone-danger {
    --tone: var(--danger);
    --tone-soft: var(--danger-light);
}

.tone-success {
    --tone: var(--success);
    --tone-soft: var(--success-light);
}

.tone-primary {
    --tone: var(--primary);
    --tone-soft: var(--primary-light);
}

.tone-secondary {
    --tone: var(--secondary-hover);
    --tone-soft: var(--secondary-light);
}

/* Pita putih: berselang-seling dengan latar abu .main */

.main .section-band {
    border-block: 1px solid var(--border-soft);
    background: var(--bg);
}

/* Judul section diberi batang aksen berwarna */

.section-tone .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-tone .section-title::before {
    width: 4px;
    height: 1.1em;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--tone);
    content: "";
}

/* Empty state */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    border: 1px dashed color-mix(in srgb, var(--tone) 35%, transparent);
    border-radius: var(--radius);
    background: var(--tone-soft);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-1);
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--bg);
    box-shadow: var(--shadow-soft);
    color: var(--tone);
    font-size: var(--fs-lg);
    line-height: 1;
}

.empty-state-title {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.empty-state-text {
    max-width: 360px;
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.empty-state-action {
    margin-top: var(--space-3);
}

/* lebar tombol global (100% di layar kecil) tidak dipakai di sini */
.empty-state-action .btn {
    width: auto;
}

/* Mobile: tata letak baris (ikon kiri, teks kanan) agar ringkas,
   karena empty state bisa tampil beberapa kali berturut-turut */

@media (max-width: 600px) {

    .empty-state {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-3);
        row-gap: var(--space-1);
        align-items: center;
        padding: var(--space-4);
        border-radius: var(--radius-md);
        text-align: left;
    }

    .empty-state-icon {
        width: 44px;
        height: 44px;
        margin: 0;
        grid-row: 1 / span 3;
        font-size: var(--fs-md);
    }

    .empty-state-text {
        max-width: none;
    }

    .empty-state-action {
        grid-column: 2;
        margin-top: var(--space-2);
    }
}

/* =========================================================
   9. RESPONSIVE TABLET
   ≤ 900px
========================================================= */

@media (max-width: 900px) {

    .main .section {
        padding-block: var(--space-6);
    }

    /* Hero */

    .hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .hero-side-slider {
        display: none;
    }

    /* Kategori */

    .category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /* Campaign card vertikal */

    .campaign-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    /* Campaign baru: overlay selalu tampil & ringkas (tanpa hover) */

    .new-grid {
        gap: var(--space-3);
    }

    .new-item-overlay {
        padding: var(--space-3);
        opacity: 1;
    }

    .new-item-overlay h3 {
        margin-bottom: 0;
        font-size: var(--fs-xs);
    }

    .new-item-overlay p,
    .new-item-price,
    .new-item-meta {
        display: none;
    }

    .new-item .progress {
        height: 4px;
        margin: var(--space-1) 0 0;
    }
}


/* =========================================================
   10. RESPONSIVE MOBILE
   ≤ 600px
========================================================= */

@media (max-width: 600px) {

    .main .section {
        padding-block: var(--space-5);
    }

    .main .section-title {
        margin-bottom: var(--space-3);
        font-size: var(--fs-sm);
    }

    /* Hero: full-width (edge-to-edge), menempel di bawah header.
       Hanya hero yang dilepas dari gutter container; section lain tetap. */

    .hero-section {
        padding-block: 0;
    }

    .hero-section .hero-layout {
        width: 100%;
    }

    .hero-main-slider {
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Kategori */

    .category-grid {
        gap: var(--space-4) var(--space-3);
    }

    .category-item {
        gap: var(--space-1);
    }

    .category-icon,
    .category-icon img {
        width: 48px;
        height: 48px;
    }

    .category-item p {
        font-size: var(--fs-xxs);
        line-height: 1.3;
    }

    /* Kategori bawah ("Pilih Kategori Favoritmu"):
       satu baris, scroll ke samping (bukan grid 4 kolom) */

    .category-grid-small {
        --bleed: calc((100vw - 100%) / 2);

        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-4);
        margin-right: calc(var(--bleed) * -1);
        margin-bottom: var(--space-3);
        padding: 0 var(--bleed) var(--space-1) 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .category-grid-small::-webkit-scrollbar {
        display: none;
    }

    .category-grid-small .category-item {
        flex: 0 0 68px;
        scroll-snap-align: start;
    }

    /* =====================================
       SCROLL HORIZONTAL
       - Campaign default (Darurat, Pemberdayaan, Lainnya)
       - Campaign baru
    ===================================== */

    /* --bleed = lebar gutter container (berapa pun nilainya di global.css),
       sehingga scroll area menyentuh tepi layar dan card terakhir
       tetap punya jarak di ujung */
    .campaign-grid,
    .new-grid {
        --bleed: calc((100vw - 100%) / 2);

        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        margin-right: calc(var(--bleed) * -1);
        padding: var(--space-1) var(--bleed) var(--space-2) 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .campaign-grid::-webkit-scrollbar,
    .new-grid::-webkit-scrollbar {
        display: none;
    }

    /* ± 3/4 lebar layar, card berikutnya mengintip sebagai petunjuk scroll */
    .campaign-grid .campaign-card {
        height: auto;
        flex: 0 0 min(64vw, 240px);
        scroll-snap-align: start;
    }

    /* =====================================
       CAMPAIGN BARU (mobile)
       Hanya thumbnail: judul section disembunyikan secara visual
       (tetap ada untuk screen reader), overlay dimatikan.
    ===================================== */

    .main .section.section-new {
        padding-block: var(--space-3);
    }

    .new-item {
        flex: 0 0 90%;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        scroll-snap-align: start;
    }

    .new-item-overlay {
        display: none;
    }

    /* =====================================
       CAMPAIGN CARD — SEMUA VARIANT
    ===================================== */

    .campaign-card {
        border-radius: var(--radius-md);
    }

    .campaign-card:hover {
        transform: none;
    }

    .campaign-badge {
        padding: 5px var(--space-3);
    }

    .campaign-card:not(.is-list) .campaign-body {
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .campaign-title {
        font-size: var(--fs-xxs);
    }

    .campaign-footer {
        gap: var(--space-2);
        padding-top: var(--space-1);
    }

    .campaign-org {
        gap: 6px;
    }

    .campaign-org-avatar {
        width: 20px;
        height: 20px;
    }

        /* =====================================
       VARIANT LIST (mobile)
       Satu wadah putih berisi baris-baris campaign, dipisah garis tipis.
       Tiap baris: thumbnail 16:9 di kiri, isi di kanan (flex biasa).
       Urutan isi diatur dengan `order`:
       judul → penggalang & donatur → progress → nominal.
       Semua kolom min-width: 0 agar teks panjang terpotong, bukan meluber.
    ===================================== */

    .list-campaign {
        gap: 0;
        overflow: hidden;
    }

    .campaign-card.is-list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
        height: auto;
        padding: var(--space-3);
        overflow: hidden;
        border: 0;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .campaign-card.is-list:last-child {
        border-bottom: 0;
    }

    /* outline fokus tidak terpotong oleh overflow wadah */
    .campaign-card.is-list:focus-visible {
        outline-offset: -2px;
    }

    /* kiri: thumbnail 16:9 + badge, rata atas */
    .campaign-card.is-list .campaign-thumb {
        flex: 0 0 36%;
        align-self: flex-center;
        border-radius: var(--radius-sm);
    }

    /* kanan: isi tersusun vertikal */
    .campaign-card.is-list .campaign-body {
        display: flex;
        min-width: 0;
        flex: 1 1 0;
        flex-direction: column;
        gap: var(--space-1);
        padding: 0;
    }

    /* 1. judul */
    .campaign-card.is-list .campaign-title {
        order: 1;
        min-height: 0;
    }

    /* 2. penggalang (kiri) • donatur (kanan) */
    .campaign-card.is-list .campaign-footer {
        order: 2;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: var(--space-2);
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .campaign-card.is-list .campaign-org {
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .campaign-card.is-list .campaign-donors {
        flex-shrink: 0;
    }

    .campaign-card.is-list .campaign-donors-label {
        display: none;
    }

    /* 3. progress */
    .campaign-card.is-list .campaign-progress {
        order: 3;
    }

    /* 4. nominal terkumpul (target disembunyikan agar tidak meluber) */
    .campaign-card.is-list .campaign-amount {
        order: 4;
        margin-top: 0;
    }

    .campaign-card.is-list .campaign-target {
        display: none;
    }

    /* =====================================
       TESTIMONIAL
    ===================================== */

    .testimonial-wrapper {
        --offset: 160px;
        --side-scale: .7;
        --side-opacity: .2;
    }

    .testimonial-nav {
        margin-top: var(--space-3);
    }

    /* nama kategori sudah ada di header (mobile) */
    .donasi-kategori-bar {
        display: none;
    }
}


/* =========================================================
   10A. MOBILE KECIL
   ≤ 420px
========================================================= */

@media (max-width: 420px) {

    .category-icon,
    .category-icon img {
        width: 44px;
        height: 44px;
    }

    .category-grid-small .category-item {
        flex-basis: 64px;
    }

    .testimonial-wrapper {
        --offset: 125px;
    }
}


/* =========================================================
   10B. MOBILE SANGAT KECIL
   ≤ 360px
========================================================= */

@media (max-width: 360px) {

    .category-grid {
        gap: var(--space-3) var(--space-2);
    }

    .category-icon,
    .category-icon img {
        width: 40px;
        height: 40px;
    }

    .category-item p {
        font-size: 11px;
    }

        .campaign-card.is-list {
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .testimonial-wrapper {
        --offset: 105px;
    }
}

/* =========================================================
   10C. TESTIMONIAL (MOBILE, ≤ 600px)
   Satu kartu bersih per layar. Kelas is-active / is-prev / is-next /
   is-hidden tetap diatur JS; di sini hanya tampilannya yang diganti:
   hanya kartu aktif yang terlihat, berganti dengan fade.
   Desktop & tablet tidak terpengaruh.
========================================================= */

@media (max-width: 600px) {

    .testimonial {
        background: transparent;
    }

    .testimonial .testimonial-wrapper {
        align-items: start;
        justify-items: stretch;
        margin-top: 0;
        padding: 0;
    }

    /* semua kartu tersembunyi, kecuali yang aktif */
    .testimonial .testimonial-item {
        transform: translateY(var(--space-2));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility .35s ease;
    }

    .testimonial .testimonial-item.is-active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Kartu */

    .testimonial .testimonial-item .testimonial-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg);
        box-shadow: none;
        transition: none;
    }

    /* tanda kutip dekoratif */
    .testimonial .testimonial-card::before {
        content: "\201C";
        display: block;
        margin-bottom: var(--space-2);
        color: var(--primary);
        font-size: var(--fs-xxl);
        font-weight: var(--fw-bold);
        line-height: .8;
    }

    /* Kutipan = fokus utama */

    .testimonial .testimonial-item .testimonial-description {
        display: block;
        order: 1;
        margin: 0 0 var(--space-4);
        overflow: visible;
        color: var(--text-dark);
        font-size: var(--fs-xxs);
        font-weight: var(--fw-semibold);
        line-height: 1.5;
        text-align: left;
        transition: none;
    }

    /* Identitas: avatar kecil + nama + jabatan, di bawah kutipan */

    .testimonial .testimonial-item .testimonial-head {
        order: 2;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        margin: 0;
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-soft);
        text-align: left;
        transition: none;
    }

    .testimonial .testimonial-item .testimonial-avatar {
        width: 40px;
        height: 40px;
        margin-top: 0;
        box-shadow: 0 0 0 1px var(--border-soft);
        transition: none;
    }

    .testimonial .testimonial-item .testimonial-person-info {
        min-width: 0;
    }

    .testimonial .testimonial-item .testimonial-person-info h3 {
        font-size: var(--fs-xxs);
    }

    .testimonial .testimonial-item .testimonial-person-info span {
        font-size: var(--fs-xxs);
    }

    /* Navigasi */

    .testimonial .testimonial-nav {
        gap: var(--space-3);
        margin-top: var(--space-4);
    }

    .testimonial .testimonial-arrow {
        width: 32px;
        height: 32px;
    }

    .testimonial .testimonial-dot {
        transition:
            width .3s ease,
            background .3s ease;
    }

    .testimonial .testimonial-dot.active {
        width: 20px;
        transform: none;
    }
}

/* =========================================================
   11. AKSESIBILITAS
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-side-card,
    .campaign-card,
    .campaign-thumb img,
    .campaign-title,
    .new-item img,
    .new-item-overlay,
    .testimonial-item,
    .testimonial-card,
    .filter-trigger,
    .filter-trigger-caret,
    .filter-backdrop,
    .filter-panel,
    .filter-option,
    .filter-option-mark,
    .filter-option-mark::after {
        transition: none !important;
    }

    .campaign-card:hover,
    .campaign-card:hover .campaign-thumb img,
    .new-item:hover img {
        transform: none !important;
    }
}