/* ============================================================================
   csf-donation.css — HALAMAN DONASI, ARSIP CAMPAIGN, DAN POP-UP CAMPAIGN
   ----------------------------------------------------------------------------
   APA YANG ADA DI SINI
     Hanya markup yang tidak tercakup keenam berkas asli: badge play di atas
     media campaign, progress bar, dan overlay pop-up campaign.

   YANG TIDAK ADA DI SINI
     Tata letak panel dan kartunya sendiri — itu memakai utilitas Tailwind yang
     sama persis dengan ecosystem-card dan article-grid-card, supaya keduanya
     tidak bisa berbeda diam-diam saat token temanya diubah.

   HUBUNGANNYA
     Seluruh warna diambil dari variables.css. Tidak ada satu pun nilai warna
     tertulis langsung, jadi mengganti palet situs ikut mengganti halaman ini.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. MEDIA CAMPAIGN — pemicu pop-up
   Elemennya <button> agar bisa dijangkau keyboard; aturan di bawah membuangnya
   kembali ke tampilan blok media biasa.
   ------------------------------------------------------------------------ */
.coco-campaign-media {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.coco-campaign-media:focus-visible {
    outline: 2px solid rgb(var(--color-secondary-rgb));
    outline-offset: 3px;
}

/* Badge play — penanda bahwa media ini bisa diklik. */
.coco-campaign-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(var(--color-glow-rgb) / 0.18);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.35);
    color: rgb(var(--color-primary-rgb));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform var(--transition-base), background-color var(--transition-base);
    pointer-events: none;
}

.group:hover .coco-campaign-play,
.coco-campaign-media:focus-visible .coco-campaign-play {
    transform: translate(-50%, -50%) scale(1);
    background: rgb(var(--color-glow-rgb) / 0.3);
}

.coco-campaign-play--sm {
    width: 48px;
    height: 48px;
}

/* Media tanpa video: badge cukup samar, tidak menjanjikan pemutaran. */
.coco-campaign-play--quiet {
    opacity: 0;
}

.group:hover .coco-campaign-play--quiet {
    opacity: 1;
}

/* Penanda campaign yang sudah ditutup. */
.coco-campaign-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgb(var(--color-surface-rgb) / 0.75);
    color: rgb(var(--color-primary-rgb));
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.coco-campaign-flag--sm {
    top: 10px;
    left: 10px;
    font-size: 10px;
}

/* ---------------------------------------------------------------------------
   2. PROGRESS BAR
   Dipakai panel (di atas latar gelap) dan kartu grid (di atas latar terang);
   modifier --light menukar warna relnya.
   ------------------------------------------------------------------------ */
.coco-campaign-track {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(var(--color-glow-rgb) / 0.16);
}

.coco-campaign-progress--light .coco-campaign-track {
    background: rgb(var(--color-outline-variant-rgb) / 0.35);
}

.coco-campaign-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgb(var(--color-secondary-fixed-rgb)),
        rgb(var(--color-secondary-rgb)));
    transition: width 0.8s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.coco-campaign-progress--light .coco-campaign-fill {
    background: linear-gradient(90deg,
        rgb(var(--color-forest-deep-rgb)),
        rgb(var(--color-secondary-rgb)));
}

/* ---------------------------------------------------------------------------
   3. POP-UP CAMPAIGN
   Struktur dan perilakunya mengikuti .image-popup-overlay agar terasa sebagai
   komponen yang sama bagi pengunjung — hanya isinya yang berbeda.
   ------------------------------------------------------------------------ */
.coco-campaign-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-popup);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgb(var(--color-shadow-rgb) / 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    overflow-y: auto;
}

.coco-campaign-modal[hidden] {
    display: none;
}

.coco-campaign-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.coco-campaign-modal__panel {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: rgb(var(--color-surface-container-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.12);
    border-radius: var(--radius-popup, 16px);
    box-shadow: var(--shadow-popup);
    transform: scale(0.94);
    transition: transform 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.coco-campaign-modal.active .coco-campaign-modal__panel {
    transform: scale(1);
}

@media (min-width: 900px) {
    .coco-campaign-modal__panel {
        flex-direction: row;
        align-items: stretch;
    }
}

.coco-campaign-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgb(var(--color-shadow-rgb) / 0.45);
    color: rgb(var(--color-primary-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.25);
    font-size: var(--font-size-popup-close, 24px);
    line-height: 1;
    transition: all var(--transition-fast);
}

.coco-campaign-modal__close:hover {
    background: rgb(var(--color-glow-rgb) / 0.25);
}

/* Media */
.coco-campaign-modal__media {
    position: relative;
    flex: 0 0 auto;
    background: rgb(var(--color-surface-container-low-rgb));
    min-height: 200px;
}

@media (min-width: 900px) {
    .coco-campaign-modal__media {
        flex: 0 0 42%;
        min-height: auto;
    }
}

.coco-campaign-modal__media img,
.coco-campaign-modal__media video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
}

@media (min-width: 900px) {
    .coco-campaign-modal__media img,
    .coco-campaign-modal__media video {
        max-height: none;
        position: absolute;
        inset: 0;
    }
}

/* Iframe punya rasio tetap: tanpa itu pemutar YouTube runtuh jadi setinggi
   nol pada layar sempit. */
.coco-campaign-modal__media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (min-width: 900px) {
    .coco-campaign-modal__media iframe {
        height: 100%;
        aspect-ratio: auto;
        min-height: 380px;
    }
}

/* Isi */
.coco-campaign-modal__body {
    flex: 1 1 auto;
    padding: 32px 30px 30px;
    color: rgb(var(--color-on-surface-rgb));
    font-family: var(--font-body);
}

.coco-campaign-modal__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-secondary-rgb));
}

.coco-campaign-modal__title {
    margin: 0 0 8px;
    font-family: var(--font-headline);
    font-size: 26px;
    line-height: 1.25;
    color: rgb(var(--color-primary-rgb));
}

.coco-campaign-modal__organizer {
    margin: 0 0 16px;
    font-size: 13px;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.coco-campaign-modal__by {
    opacity: 0.65;
}

.coco-campaign-modal__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.coco-campaign-modal__stats {
    margin-bottom: 26px;
}

.coco-campaign-modal__amounts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.coco-campaign-modal__amounts strong {
    font-family: var(--font-headline);
    font-size: 22px;
    color: rgb(var(--color-secondary-rgb));
}

.coco-campaign-modal__amounts span {
    font-size: 13px;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.coco-campaign-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.coco-campaign-modal__meta b {
    color: rgb(var(--color-primary-rgb));
}

.coco-campaign-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coco-campaign-modal__cta,
.coco-campaign-modal__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.coco-campaign-modal__cta {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    border: 1px solid rgb(var(--color-primary-rgb));
}

.coco-campaign-modal__cta:hover {
    background: rgb(var(--color-secondary-rgb));
    border-color: rgb(var(--color-secondary-rgb));
    color: rgb(var(--color-on-secondary-rgb));
}

.coco-campaign-modal__ghost {
    background: transparent;
    color: rgb(var(--color-on-surface-variant-rgb));
    border: 1px solid rgb(var(--color-outline-variant-rgb));
}

.coco-campaign-modal__ghost:hover {
    color: rgb(var(--color-primary-rgb));
    border-color: rgb(var(--color-primary-rgb));
}

.coco-campaign-modal__hint {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgb(var(--color-on-surface-variant-rgb));
    opacity: 0.7;
}

/* Hormati setelan sistem pengunjung. */
@media (prefers-reduced-motion: reduce) {
    .coco-campaign-modal,
    .coco-campaign-modal__panel,
    .coco-campaign-fill,
    .coco-campaign-play {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   HALAMAN DETAIL CAMPAIGN — /donation/{slug}/
   ----------------------------------------------------------------------------
   Mengikuti rancangan yang dilampirkan pemilik situs: kolom isi 2/3 sebagai
   kartu kaca di atas latar hutan, panel donasi 1/3 yang menempel, tab bergaris
   bawah, dan bar CTA melayang di ponsel.

   MARKUP-NYA TIDAK DIUBAH
     Seluruhnya dicapai dari CSS di atas templat plugin yang sudah ada. Itu
     disengaja: templat plugin adalah satu-satunya sumber struktur halaman ini,
     dan menyalinnya ke tema berarti setiap perbaikan di plugin harus dikerjakan
     dua kali — dan cepat atau lambat hanya dikerjakan di satu tempat.

   WARNA
     Palet pada rancangan itu memang palet tema ini: #d7e9be = secondary-fixed,
     #F8F6F0 = ivory, #273417 = on-secondary, #c7c7bf = on-surface-variant.
     Semuanya dirujuk lewat token, bukan ditulis ulang, supaya re-skin tetap
     terjadi di satu tempat.

     Satu pengecualian: latar #2F3D1F pada rancangan tidak ada padanan persisnya
     di variables.css. Yang dipakai `--color-forest-950-rgb` (#2D3821), tetangga
     terdekatnya — selisihnya tidak kasatmata di balik lapisan kaca, dan
     menambah warna lepas ke luar sistem token harganya jauh lebih mahal.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. JARAK AMAN NAVBAR

   Navbar situs adalah kapsul `position: fixed` — ia tidak memakan ruang di
   aliran dokumen. Hampir semua templat tema menutupi ini dengan mini-hero
   setinggi 550px yang memang dirancang untuk ditimpa navbar. Permukaan plugin
   yang tidak memasang mini-hero (halaman status donasi dan halaman detail
   campaign) karena itu dimulai TEPAT di bawah tepi atas viewport, dan bagian
   atasnya tertutup kapsul navbar.

   Offset kapsul diambil dari tokennya sendiri; tinggi isinya ditulis tetap
   40px. Percobaan pertama memakai clamp(28px, 4vw, 40px) dengan anggapan logo
   brand adalah anak tertinggi — keliru. Yang tertinggi adalah tombol CTA
   (padding 10px + teks + 10px ≈ 38px), dan tingginya TIDAK mengecil di layar
   sempit. Akibatnya jarak aman justru menyusut ke 96px persis ketika navbar
   membesar ke 62px, dan sisanya tinggal 15px. Nilai tetap menjaga jarak yang
   sama lapangnya di semua lebar.
   ------------------------------------------------------------------------ */
:root {
    --coco-navbar-clearance: calc(
        var(--navbar-top-offset, 20px)   /* jarak kapsul dari tepi atas   */
        + 24px                           /* padding vertikal kapsul 12+12 */
        + 40px                           /* anak tertinggi: tombol CTA    */
        + 1.5rem                         /* ruang nafas                   */
    );
}

/* Halaman status donasi: /donation-status/{token}/ */
.csfdn-status { padding-top: var(--coco-navbar-clearance); }

/* ---------------------------------------------------------------------------
   1. LATAR HALAMAN
   Foto diletakkan pada ::before yang fixed, bukan pada `background-attachment:
   fixed` milik body: Safari iOS mengabaikan attachment:fixed dan malah
   merender ulang latar di setiap frame scroll.
   ------------------------------------------------------------------------ */
body.single-csfdn_campaign {
    background-color: rgb(var(--color-forest-950-rgb));
}

body.single-csfdn_campaign::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--coco-campaign-backdrop, none);
    background-size: cover;
    background-position: center;
    /* Foto hanya latar; teks di atas kaca yang menentukan keterbacaan. */
    opacity: 0.35;
}

body.single-csfdn_campaign::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgb(var(--color-forest-950-rgb) / 0.55),
        rgb(var(--color-forest-950-rgb) / 0.85));
}

/* ---------------------------------------------------------------------------
   2. PALET
   Plugin mengirim halaman campaign dengan palet TERANG — `--d-ink` adalah
   #1b1c18 dan `--d-paper` putih — karena ia harus bisa berjalan di tema mana
   pun, termasuk yang berlatar putih.

   Rancangan ini kebalikannya. Yang diubah cukup variabelnya, bukan warnanya
   satu per satu: selektor plugin seperti `.csfdn h1, .csfdn h2, .csfdn h3`
   bernilai (0,1,1) dan mengalahkan kelas tunggal seperti
   `.csfdn-campaign__title` (0,1,0), jadi menimpa per-elemen berarti mengejar
   spesifisitas di puluhan tempat — dan melewatkan satu saja berarti ada teks
   nyaris hitam di atas hijau tua.
   ------------------------------------------------------------------------ */
.csfdn-campaign {
    --d-ink: rgb(var(--color-ivory-rgb));
    --d-muted: rgb(var(--color-on-surface-variant-rgb));
    --d-paper: rgb(var(--color-forest-950-rgb) / 0.55);
    --d-surface: rgb(var(--color-ivory-rgb) / 0.05);
    --d-line: rgb(var(--color-ivory-rgb) / 0.15);
    --d-sage: rgb(var(--color-secondary-fixed-rgb));
    --d-accent: rgb(var(--color-secondary-fixed-rgb));

    /* Tombol utama pada rancangan berwarna ivory dengan teks gelap, bukan
       hijau — di atas kaca hijau, tombol hijau lenyap. */
    --d-forest: rgb(var(--color-ivory-rgb));
    --d-forest-dark: rgb(var(--color-ivory-rgb) / 0.88);

    --d-shadow: 0 25px 50px -12px rgb(var(--color-shadow-rgb) / 0.5);
}

/* --d-forest dipakai plugin sebagai warna TEKS pada beberapa tempat sekaligus
   sebagai latar tombol. Setelah ia menjadi ivory, yang perlu dikembalikan
   hanyalah warna teks di atas tombol itu. */
.csfdn-campaign .csfdn-btn--primary { color: rgb(var(--color-on-primary-rgb)); }
.csfdn-campaign .csfdn-btn--ghost { border-color: rgb(var(--color-ivory-rgb) / 0.3); }
.csfdn-campaign .csfdn-btn--ghost:hover { background: rgb(var(--color-ivory-rgb) / 0.1); }

/* ---------------------------------------------------------------------------
   3. TATA LETAK
   ------------------------------------------------------------------------ */
.csfdn-campaign {
    max-width: 80rem;
    /* Atas memakai jarak aman navbar — lihat bagian 0. */
    padding: var(--coco-navbar-clearance) 1rem 8rem;
    gap: 2rem;
}

@media (min-width: 768px) {
    .csfdn-campaign { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 1024px) {
    /* 2/3 : 1/3, seperti lg:w-2/3 dan lg:w-1/3 pada rancangan. */
    .csfdn-campaign { grid-template-columns: 2fr 1fr; padding-bottom: 4rem; }
}

/* Permukaan kaca yang dipakai kolom isi, kartu form, dan bar CTA. */
.csfdn-campaign__main,
.csfdn-campaign .csfdn-form-card,
.csfdn-campaign .csfdn-cta-bar {
    background: rgb(var(--color-forest-950-rgb) / 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
    box-shadow: 0 25px 50px -12px rgb(var(--color-shadow-rgb) / 0.5);
}

.csfdn-campaign__main {
    border-radius: var(--radius-lg, 1.5rem);
    padding: 2rem;
}

@media (min-width: 768px) {
    .csfdn-campaign__main { padding: 3rem; }
}

.csfdn-campaign .csfdn-sticky { top: 2rem; }

/* ---------------------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------------------ */
.csfdn-campaign__hero { margin-bottom: 3rem; }

.csfdn-campaign__cover {
    position: relative;
    border-radius: var(--radius-default, 1rem);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* Video, gambar, dan iframe berbagi rasio yang sama supaya tata letak tidak
   melompat saat pemutar menggantikan gambarnya. */
.csfdn-campaign__cover img,
.csfdn-campaign__cover video,
.csfdn-campaign__cover iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 0;
}

/* Pemicu pemutar YouTube/Vimeo. */
.csfdn-campaign__play-wrap {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.csfdn-campaign__play-wrap:focus-visible {
    outline: 2px solid rgb(var(--color-secondary-fixed-rgb));
    outline-offset: 3px;
}

.csfdn-campaign__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(var(--color-ivory-rgb) / 0.9);
    color: rgb(var(--color-on-secondary-rgb));
    font-size: 26px;
    padding-left: 4px; /* Segitiga optik: glif play berat di kiri. */
    pointer-events: none;
    transition: transform var(--transition-base, 0.3s ease);
}
.csfdn-campaign__play-wrap:hover .csfdn-campaign__play { transform: translate(-50%, -50%) scale(1.06); }

/* Logo penggalang menggantikan lingkaran berinisial. */
.csfdn-organizer__avatar--logo {
    background: rgb(var(--color-ivory-rgb));
    object-fit: contain;
    padding: 0.35rem;
}

.csfdn-campaign__title {
    font-family: var(--font-display, 'Noto Serif', serif);
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.1;
    margin-bottom: 2rem;
    color: rgb(var(--color-ivory-rgb));
}

.csfdn-organizer { gap: 1rem; }

.csfdn-organizer__avatar {
    width: 3rem; height: 3rem; flex-basis: 3rem;
    background: rgb(var(--color-secondary-fixed-rgb));
    color: rgb(var(--color-on-secondary-rgb));
    font-size: 1.25rem;
}

.csfdn-organizer__meta small {
    font-family: var(--font-label, inherit);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.csfdn-organizer__meta strong {
    font-size: 1.125rem;
    font-weight: 500;
    color: rgb(var(--color-ivory-rgb));
}

/* Centang terverifikasi: sage, dan diberi jarak. Tanpa margin ia menempel ke
   huruf terakhir nama dan terbaca seperti salah ketik. */
.csfdn-campaign .csfdn-verified {
    margin-left: 0.3em;
    color: rgb(var(--color-secondary-fixed-rgb));
}

/* ---------------------------------------------------------------------------
   5. PANEL PROGRESS
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-panel--progress {
    background: rgb(var(--color-ivory-rgb) / 0.05);
    border: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
    border-radius: var(--radius-default, 1rem);
    padding: 1.5rem;
    margin-bottom: 3rem;
}

.csfdn-campaign .csfdn-progress__amounts {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.csfdn-campaign .csfdn-progress__collected {
    font-family: var(--font-display, 'Noto Serif', serif);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 400;
    color: rgb(var(--color-ivory-rgb));
}

.csfdn-campaign .csfdn-progress__target {
    font-size: 0.875rem;
    text-align: right;
    color: rgb(var(--color-on-surface-variant-rgb));
}
.csfdn-campaign .csfdn-progress__target b { color: rgb(var(--color-ivory-rgb)); }

.csfdn-campaign .csfdn-progress__track {
    height: 0.75rem;
    background: rgb(var(--color-shadow-rgb) / 0.4);
    margin-bottom: 0.75rem;
}

.csfdn-campaign .csfdn-progress__fill {
    background: rgb(var(--color-secondary-fixed-rgb));
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.csfdn-campaign .csfdn-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-on-surface-variant-rgb));
}
.csfdn-campaign .csfdn-progress__meta b { color: rgb(var(--color-ivory-rgb)); }

.csfdn-campaign .csfdn-beneficiary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
    font-size: 0.875rem;
    color: rgb(var(--color-on-surface-variant-rgb));
}
.csfdn-campaign .csfdn-beneficiary strong { font-size: 1rem; color: rgb(var(--color-ivory-rgb)); }

/* ---------------------------------------------------------------------------
   6. TAB
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-tabs {
    gap: 2rem;
    border-bottom: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
    margin-bottom: 2rem;
}

.csfdn-campaign .csfdn-tab {
    padding: 0 0.5rem 1rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: rgb(var(--color-ivory-rgb) / 0.7);
    font-weight: 500;
}

.csfdn-campaign .csfdn-tab:hover { color: rgb(var(--color-ivory-rgb)); }

.csfdn-campaign .csfdn-tab.is-active {
    border-bottom-color: rgb(var(--color-ivory-rgb));
    color: rgb(var(--color-ivory-rgb));
    font-weight: 600;
}

.csfdn-campaign .csfdn-tab__count {
    background: rgb(var(--color-ivory-rgb) / 0.12);
    color: inherit;
}

.csfdn-campaign .csfdn-tabpanel { min-height: 200px; }

/*
 * Di 375px, tiga label tab berbahasa Inggris menuntut 356px sementara ruangnya
 * 277px — labelnya terpotong dan terbaca seperti tata letak yang rusak.
 * Jaraknya dirapatkan dan padding sampingnya dilepas; itu cukup membuat
 * ketiganya muat. Mengecilkan hurufnya sampai pas akan menghukum keterbacaan
 * demi satu baris, dan `overflow-x: auto` milik plugin tetap jadi jaring
 * pengaman untuk layar yang lebih sempit lagi.
 */
@media (max-width: 639px) {
    .csfdn-campaign .csfdn-tabs { gap: 1rem; }
    .csfdn-campaign .csfdn-tab { padding-left: 0; padding-right: 0; }
}

.csfdn-campaign .csfdn-prose {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgb(var(--color-ivory-rgb) / 0.9);
}
.csfdn-campaign .csfdn-prose > * + * { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------------
   7. KEADAAN KOSONG
   Diberi kotak sendiri, bukan sekadar baris teks abu-abu: pada halaman yang
   belum punya donatur, tab yang kosong tanpa bingkai terbaca seperti halaman
   yang gagal memuat.
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-empty {
    padding: 2rem;
    background: rgb(var(--color-ivory-rgb) / 0.05);
    border: 1px solid rgb(var(--color-ivory-rgb) / 0.05);
    border-radius: var(--radius-default, 1rem);
    text-align: center;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.csfdn-campaign .csfdn-list { margin-bottom: 3rem; }
.csfdn-campaign .csfdn-list:last-child { margin-bottom: 0; }

.csfdn-campaign .csfdn-list__title {
    font-family: var(--font-headline, 'Noto Serif', serif);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: rgb(var(--color-ivory-rgb));
}


.csfdn-campaign .csfdn-prayer {
    background: rgb(var(--color-ivory-rgb) / 0.05);
    border: 1px solid rgb(var(--color-ivory-rgb) / 0.05);
}
.csfdn-campaign .csfdn-amen {
    background: rgb(var(--color-ivory-rgb) / 0.08);
    border-color: rgb(var(--color-ivory-rgb) / 0.15);
    color: rgb(var(--color-secondary-fixed-rgb));
}

/* ---------------------------------------------------------------------------
   8. BAGIKAN
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-share {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
}

.csfdn-campaign .csfdn-share__title {
    font-family: var(--font-headline, 'Noto Serif', serif);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    margin-bottom: 0.5rem;
    color: rgb(var(--color-ivory-rgb));
}

.csfdn-campaign .csfdn-share__sub {
    margin-bottom: 2rem;
    color: rgb(var(--color-on-surface-variant-rgb));
}

.csfdn-campaign .csfdn-share__buttons { gap: 1rem; }

.csfdn-campaign .csfdn-share__btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    background: rgb(var(--color-ivory-rgb) / 0.1);
    border: 1px solid rgb(var(--color-ivory-rgb) / 0.2);
    color: rgb(var(--color-ivory-rgb));
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.csfdn-campaign .csfdn-share__btn:hover {
    background: rgb(var(--color-ivory-rgb) / 0.2);
    color: rgb(var(--color-ivory-rgb));
}

/* Salin tautan adalah aksi utama di baris ini — satu-satunya yang berwarna. */
.csfdn-campaign .csfdn-share__btn.csfdn-copy {
    background: rgb(var(--color-secondary-fixed-rgb));
    border-color: rgb(var(--color-secondary-fixed-rgb));
    color: rgb(var(--color-on-secondary-rgb));
}
.csfdn-campaign .csfdn-share__btn.csfdn-copy:hover {
    background: rgb(var(--color-secondary-fixed-rgb) / 0.9);
    color: rgb(var(--color-on-secondary-rgb));
}

/* ---------------------------------------------------------------------------
   9. KARTU FORM DONASI
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-form-card {
    border-radius: var(--radius-lg, 1.5rem);
    padding: 2rem;
}

.csfdn-campaign .csfdn-form-card__title {
    font-family: var(--font-headline, 'Noto Serif', serif);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    margin-bottom: 1.5rem;
    color: rgb(var(--color-ivory-rgb));
}

.csfdn-campaign .csfdn-form-card__close {
    top: 1.75rem;
    right: 1.75rem;
    width: 2rem;
    height: 2rem;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgb(var(--color-ivory-rgb) / 0.1);
    color: rgb(var(--color-ivory-rgb));
    font-size: 1.25rem;
}
.csfdn-campaign .csfdn-form-card__close:hover { background: rgb(var(--color-ivory-rgb) / 0.2); }


/* Pesan "belum ada metode pembayaran" — nada peringatan, bukan sekadar teks. */
.csfdn-campaign .csfdn-notice {
    background: rgb(var(--color-error-container-rgb) / 0.2);
    border: 1px solid rgb(var(--color-error-rgb) / 0.2);
    border-radius: var(--radius-default, 1rem);
    padding: 1.5rem;
    color: rgb(var(--color-error-rgb));
    line-height: 1.6;
}

/* Field: latar kaca, bukan putih pekat — --d-paper sudah semi-transparan,
   tapi input plugin memakai --d-paper sebagai latarnya sendiri. */
.csfdn-campaign .csfdn-input::placeholder,
.csfdn-campaign .csfdn-amount__input::placeholder { color: rgb(var(--color-ivory-rgb) / 0.4); }

.csfdn-campaign .csfdn-preset.is-active,
.csfdn-campaign .csfdn-method:has(input:checked) {
    background: rgb(var(--color-secondary-fixed-rgb) / 0.15);
    border-color: rgb(var(--color-secondary-fixed-rgb));
    color: rgb(var(--color-ivory-rgb));
}

.csfdn-campaign .csfdn-btn--primary { font-size: 1.0625rem; }

/* ---------------------------------------------------------------------------
   10. BAR CTA PONSEL
   ------------------------------------------------------------------------ */
.csfdn-campaign .csfdn-cta-bar {
    border-top: 1px solid rgb(var(--color-ivory-rgb) / 0.1);
    border-radius: 1rem 1rem 0 0;
    padding: 1rem;
}

.csfdn-campaign .csfdn-cta-bar__info strong {
    font-family: var(--font-display, 'Noto Serif', serif);
    font-size: 1.25rem;
    color: rgb(var(--color-ivory-rgb));
}
.csfdn-campaign .csfdn-cta-bar__info small { color: rgb(var(--color-on-surface-variant-rgb)); }

@media (max-width: 1023px) {
    /* Tombol tutup hanya berguna saat form tampil sebagai lembar penuh. */
    .csfdn-campaign .csfdn-form-card__close { display: flex; }

    .csfdn-campaign .csfdn-form-card {
        border-radius: 1.5rem 1.5rem 0 0;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}