/* Halaman arsip portofolio. Acuan: frame "Portofolio Semua Event — Posetive Photobooth · Desktop"
   dan desain/acuan-portofolio-semua-event.webp. Komponen umum ada di dasar.css. */

/* ---------- Hero arsip (safelight: satu per halaman) ---------- */
.arsip-hero { padding-block: var(--space-6) var(--space-5); }
.arsip-sampul {
  display: flex; flex-direction: column; gap: var(--space-10); padding: 56px;
  background:
    radial-gradient(ellipse 140% 220% at 88% 5%, var(--safelight-core) 0%, var(--safelight-mid) 35%, var(--safelight-edge) 75%),
    var(--hero-base);
  border: 1px solid var(--brand-stroke); border-radius: var(--radius-2xl);
}
.arsip-judul { display: flex; flex-direction: column; gap: var(--space-4); }
.arsip-judul .overline { font-family: var(--font-mono), monospace; font-size: 12px; letter-spacing: 1.6px; color: var(--text-on-brand); }
.arsip-judul h1 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); font-weight: 400; }
.arsip-judul h1 .f-display { font-size: 68px; line-height: 1.05; color: var(--cream); }
.arsip-judul h1 .f-script { font-size: 48px; line-height: 1; color: var(--text-on-brand); }
.arsip-judul .tagline {
  max-width: 820px; font-family: var(--font-display), serif; font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--text-on-brand);
}
.statistik { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.statistik div { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--on-brand-line); }
.statistik b { font-family: var(--font-mono), monospace; font-size: 24px; font-weight: 700; color: var(--accent); }
.statistik strong { font-size: 15px; font-weight: 700; color: var(--cream); }
.statistik p { font-size: 12px; font-weight: 400; color: var(--text-on-brand); }

/* ---------- Kontrol filter ---------- */
.kontrol { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); }
.kontrol-tab { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kontrol-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kontrol-format { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kontrol-format > span { font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--accent); }
.kontrol-format .filter[aria-pressed="true"] { color: var(--cream); }
.kontrol-cari { display: flex; gap: var(--space-3); }
.kotak-cari, .kotak-urut {
  display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.kotak-cari { width: 240px; }
.kotak-cari .ikon, .kotak-urut .ikon { width: 14px; height: 14px; color: var(--accent); }
.kotak-cari input { flex: 1; min-width: 0; background: none; border: 0; font-size: 12px; font-weight: 400; color: var(--text-primary); }
.kotak-cari input::placeholder { color: var(--text-secondary); }
.kotak-cari input:focus { outline: none; }
.kotak-cari:focus-within { border-color: var(--border-control); }
.kotak-urut { position: relative; padding-right: 36px; }
.kotak-urut select { appearance: none; background: none; border: 0; font-size: 12px; color: var(--cream); cursor: pointer; }
.kotak-urut select option { background: var(--surface); }
.kotak-urut .ikon { position: absolute; right: 14px; pointer-events: none; }

/* ---------- Grid event ---------- */
.grid-event { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-5); }
.kartu-event { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.kartu-event .slot-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  height: 210px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-secondary); text-align: center; overflow: hidden;
}
.kartu-event .slot-foto img { width: 100%; height: 100%; object-fit: cover; }
.kartu-event .slot-foto .ikon { width: 28px; height: 28px; color: var(--accent); }
.kartu-event .slot-foto b { font-family: var(--font-mono), monospace; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; }
.kartu-event .slot-foto small { font-size: 10px; }
.penanda { display: flex; gap: var(--space-2); }
.penanda span { padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono), monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.8px; }
.penanda .kat { background: var(--brand-soft); color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.penanda .fmt { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--cream); }
.kartu-event h2 { font-size: 16px; font-weight: 700; color: var(--cream); }
.kartu-event .meta { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-secondary); }
.kartu-event p { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.kosong { grid-column: 1 / -1; padding: var(--space-10); text-align: center; color: var(--text-secondary); }

/* ---------- Paginasi ---------- */
.paginasi { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-block: 30px; }
.paginasi-nomor { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); }
.paginasi-nomor button {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-mono), monospace; font-size: 13px; color: var(--text-secondary);
}
.paginasi-nomor button[aria-current="page"] { background: var(--maroon); border-color: var(--maroon-glow); color: var(--cream); font-weight: 700; }
.paginasi-nomor .panah { background: var(--surface-2); color: var(--accent); }
.paginasi-nomor .panah:disabled { color: var(--text-secondary); cursor: default; opacity: .6; }
.paginasi-nomor .titik { font-family: var(--font-mono), monospace; font-size: 14px; color: var(--text-secondary); }
.paginasi > p { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-secondary); }

/* ---------- Banner CTA ---------- */
.cta { padding-block: 30px var(--space-10); }
.cta-sampul {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 48px 56px;
  background:
    radial-gradient(ellipse 140% 220% at 88% 5%, var(--safelight-core) 0%, var(--safelight-mid) 35%, var(--safelight-edge) 75%),
    var(--hero-base);
  border: 1px solid var(--brand-stroke); border-radius: var(--radius-2xl);
}
.cta-teks { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.cta-teks .overline { font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--accent); }
.cta-teks h2 { font-family: var(--font-display), serif; font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--cream); }
.cta-teks p { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.cta-aksi { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); flex: none; }
.cta-aksi .btn { height: 48px; padding: 0 var(--space-6); gap: 10px; }
.cta-aksi small { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--text-secondary); }

/* ---------- Responsif ---------- */
@media (max-width: 1200px) {
  .grid-event { grid-template-columns: repeat(2, 1fr); }
  .statistik { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
}
@media (max-width: 900px) {
  .cta-sampul { flex-direction: column; align-items: flex-start; }
  .cta-aksi { align-items: flex-start; }
}
@media (max-width: 640px) {
  .arsip-sampul { padding: var(--space-6); gap: var(--space-8); }
  .arsip-judul h1 .f-display { font-size: 42px; }
  .arsip-judul h1 .f-script { font-size: 34px; }
  .arsip-judul .tagline { font-size: 17px; }
  .kontrol-tab, .kontrol-format { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scrollbar-width: none; }
  .kontrol-cari { width: 100%; flex-direction: column; }
  .kotak-cari { width: 100%; }
  .grid-event { grid-template-columns: 1fr; }
  .cta-sampul { padding: var(--space-6); }
  .cta-teks h2 { font-size: 26px; }
  .cta-aksi, .cta-aksi .btn { width: 100%; }
}
.kontrol-format > span { white-space: nowrap; }