/* Tampak — gaya bersama (app dan admin). Arah "Apple modern, hitam-putih premium" (SPESIFIKASI-APPLE.md).
   Satu sumber token: warna, huruf, jarak, sudut. Hanya hitam, putih, dan abu. Merah hanya untuk galat formulir.
   Huruf Inter 400/500/600/700. Tiga jenis sudut: kartu 28 px (HP 20 px), kontrol 12 px, kapsul.
   Tanpa hijau, tanpa biru, tanpa kaca buram (backdrop-filter), tanpa monospace. Gradasi hanya hitam ke hitam pekat. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

:root {
  /* warna dasar (nama dari spesifikasi) */
  --hitam: #000000;
  --putih: #ffffff;
  --abu-latar: #f5f5f7;     /* latar layar aplikasi */
  --abu-teks: #6e6e73;      /* teks kedua di latar terang: 5,1:1 di putih, 4,7:1 di abu */
  --abu-teks-gelap: #a1a1a6;/* teks kedua di latar hitam: 8:1 */
  --garis-gelap: #424245;   /* pemisah di latar hitam */

  /* nama lama tetap dipakai komponen */
  --tinta: #1d1d1f;         /* teks utama, tombol utama */
  --tinta-2: #424245;       /* isi panjang */
  --redup: var(--abu-teks); /* label, keterangan */
  --redup-2: #86868b;
  --kertas: var(--abu-latar);
  --kertas-2: #e8e8ed;      /* isi gambar yang belum termuat, jalur kontrol */
  --garis: #d2d2d7;         /* pemisah dekoratif */
  --garis-2: #c7c7cc;
  /* Garis tepi kontrol (isian, pilihan, zona unggah): 3,6:1 di putih, memenuhi WCAG 1.4.11. */
  --garis-kontrol: #86868b;
  --merah: #b3261e;         /* hanya galat formulir */
  --kuning: var(--tinta-2); /* nama lama; peringatan monokrom */

  /* gradasi hemat: panggung hitam */
  --gradasi-gelap: radial-gradient(120% 90% at 50% 0%, #2a2a2d 0%, #1d1d1f 38%, #000 100%);

  /* sudut: tiga jenis */
  --r-kartu: 28px;          /* kartu dan panel besar */
  --r-kontrol: 12px;        /* isian, opsi, pesan, foto di dalam kartu */
  --r-kapsul: 980px;        /* tombol, chip, kapsul status */
  --r-foto: var(--r-kontrol);
  --r-panel: var(--r-kontrol);
  --sudut: var(--r-kontrol);
  --kapsul: var(--r-kapsul);

  /* huruf */
  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-tampil: clamp(48px, 5.6vw, 80px);     /* hero */
  --f-judul: clamp(36px, 3.9vw, 56px);      /* judul bagian */
  --f-pernyataan: clamp(32px, 3.3vw, 48px); /* h1 aplikasi, angka harga */
  --f-kartu: clamp(24px, 2vw, 28px);        /* judul kartu */
  --f-sub: clamp(21px, 1.7vw, 24px);        /* h2 kecil */
  --f-pengantar: clamp(19px, 1.5vw, 21px);
  --f-isi: 17px;
  --f-halus: 14px;
  --f-label: 13px;
  --f-label-judul: 17px;
  --f-tombol: 17px;

  /* jarak (skala 4 px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* kisi */
  --lebar: 1440px;
  --tepi: 40px;
  --sela: 24px;
  --tinggi-atas: 48px;
  --isi-kartu: 32px;        /* bantalan dalam kartu */

  --gerak: cubic-bezier(.25, .1, .25, 1);
}
@media (max-width: 1024px) { :root { --tepi: 32px; --sela: 20px; } }
@media (max-width: 640px) { :root { --tepi: 16px; --sela: 16px; --r-kartu: 20px; --isi-kartu: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--f-isi);
  line-height: 1.47;
  letter-spacing: -0.011em;
  color: var(--tinta);
  background: var(--abu-latar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h3, h4 { letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
b, strong { font-weight: 600; }
.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 var(--tepi); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sela); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.angka-rata { font-variant-numeric: tabular-nums; }

/* ---------- kartu: permukaan putih bersudut besar di atas latar abu ---------- */
.kartu { background: var(--putih); border-radius: var(--r-kartu); padding: var(--isi-kartu); min-width: 0; }
/* Panggung hitam dengan gradasi radial halus. Teks kedua memakai --abu-teks-gelap. */
.gelap { background: var(--gradasi-gelap); background-color: var(--hitam); color: var(--putih); }
.gelap .bantu, .gelap .redup { color: var(--abu-teks-gelap); }

/* ---------- fokus keyboard: garis tinta 2 px ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
[tabindex="-1"]:focus-visible { outline: none; }
.gelap :focus-visible, .penutup .tombol:focus-visible { outline-color: var(--putih); }

/* Tautan lompat ke isi utama: tersembunyi sampai difokus. */
.lompat { position: absolute; left: var(--tepi); top: -120px; z-index: 100; background: var(--putih); color: var(--tinta); padding: 10px 20px; border-radius: var(--r-kapsul); text-decoration: none; font-size: var(--f-halus); font-weight: 500; }
.lompat:focus { top: 4px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; }
.logo svg { width: 18px; height: 18px; flex: none; }

/* ---------- tombol kapsul ---------- */
/* Utama: kapsul tinta. Kedua: kapsul putih bergaris. Satu tombol tinta per layar.
   Boleh membungkus teks (muat di 320 px); hanya .tombol.kecil yang tetap satu baris.
   .panah (panah bulat gaya lama) disembunyikan; .panah.ikon (mis. ikon unduh) tetap tampil kecil. */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 11px 24px; max-width: 100%;
  border-radius: var(--r-kapsul); border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--putih);
  font-weight: 500; font-size: var(--f-tombol); line-height: 1.25; letter-spacing: -0.01em; text-align: center; text-decoration: none; cursor: pointer;
  white-space: normal;
  transition: background-color .2s var(--gerak), color .2s var(--gerak), border-color .2s var(--gerak);
}
.tombol .panah { display: none; }
.tombol .panah.ikon { display: inline-grid; place-items: center; flex: none; order: -1; }
.tombol:hover { background: #333336; border-color: #333336; }
.tombol.terang { background: var(--putih); color: var(--tinta); border-color: var(--garis-kontrol); }
.tombol.terang:hover { border-color: var(--tinta); background: var(--putih); }
.tombol.polos { padding: 11px 24px; justify-content: center; }
.tombol.kecil { min-height: 36px; padding: 6px 16px; gap: var(--s-2); font-size: var(--f-halus); white-space: nowrap; justify-content: center; }
.tombol.kecil:has(.panah) { padding: 6px 16px; justify-content: center; }
.tombol.penuh { width: 100%; justify-content: center; }
.tombol.penuh.polos { justify-content: center; }
.tombol:disabled, .tombol[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
/* Masuk/daftar dengan Google: tombol putih bergaris + logo G resmi, lalu pemisah ke formulir email. */
.blok-google { display: grid; gap: var(--s-3); }
.tombol-google { gap: var(--s-3); }
.tombol-google .logo-google { flex: none; }
.pemisah { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; color: var(--abu-teks); font-size: var(--f-halus); }
.pemisah::before, .pemisah::after { content: ''; flex: 1; height: 1px; background: var(--garis); }
.tombol:disabled:hover, .tombol[aria-disabled="true"]:hover { background: var(--tinta); border-color: var(--tinta); }
.tombol.terang:disabled:hover, .tombol.terang[aria-disabled="true"]:hover { background: var(--putih); border-color: var(--garis-kontrol); }
/* Di panggung hitam: kapsul utama putih, kapsul kedua bergaris terang. */
.gelap .tombol { background: var(--putih); color: var(--tinta); border-color: var(--putih); }
.gelap .tombol:hover { background: #e8e8ed; border-color: #e8e8ed; }
.gelap .tombol.terang { background: transparent; color: var(--putih); border-color: var(--abu-teks-gelap); }
.gelap .tombol.terang:hover { border-color: var(--putih); background: transparent; }

/* ---------- tautan teks ---------- */
/* Garis bawah tipis abu, menebal dan menghitam saat disorot. Di dalam kalimat garis bawah tetap ada (bukan hanya warna). */
.tautan {
  font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: var(--garis-kontrol);
  cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-align: left;
  transition: text-decoration-color .2s var(--gerak);
}
.tautan:hover { text-decoration-color: currentColor; }
p .tautan, li .tautan, .bantu .tautan, .pesan .tautan { text-underline-offset: 4px; }
.gelap .tautan { text-decoration-color: var(--abu-teks-gelap); }
.gelap .tautan:hover { text-decoration-color: var(--putih); }
.tautan svg { flex: none; display: inline-block; transition: transform .3s var(--gerak); }
.tautan:hover svg { transform: translateX(2px); }

/* ---------- keterangan di bawah foto ---------- */
.label-museum { display: grid; gap: 2px; padding-top: var(--s-3); font-size: var(--f-label); color: var(--redup); line-height: 1.45; }
.label-museum .no { font-variant-numeric: tabular-nums; }
.label-museum .judul-karya { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.gelap .label-museum { color: var(--abu-teks-gelap); }
.gelap .label-museum .judul-karya { color: var(--putih); }

/* ---------- formulir ---------- */
.isian { display: grid; gap: var(--s-2); min-width: 0; }
.isian label, .label { font-size: var(--f-halus); font-weight: 600; color: var(--tinta); letter-spacing: -0.005em; }
.isian input, .isian textarea, .isian select {
  width: 100%; min-width: 0; min-height: 52px; border: 1px solid var(--garis-kontrol); border-radius: var(--r-kontrol);
  background: var(--putih); padding: 13px 16px; font-size: 17px; line-height: 1.4; outline: none;
  transition: border-color .15s;
}
/* Panah select buatan sendiri (garis tinta), sama di semua peramban. */
.isian select, select.pilih {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 14px;
}
.isian select::-ms-expand { display: none; }
.isian textarea { resize: vertical; min-height: 120px; }
.isian input::placeholder, .isian textarea::placeholder { color: var(--redup); opacity: 1; }
.isian input:focus, .isian textarea:focus, .isian select:focus { border-color: var(--tinta); }
.isian input:focus-visible, .isian textarea:focus-visible, .isian select:focus-visible { outline: 2px solid var(--tinta); outline-offset: -1px; }
.isian [aria-invalid="true"] { border-color: var(--merah); box-shadow: inset 0 0 0 1px var(--merah); }
.isian .galat-isian { font-size: var(--f-label); color: var(--merah); }
.bantu { font-size: var(--f-halus); color: var(--redup); line-height: 1.5; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.centang { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--f-halus); line-height: 1.55; cursor: pointer; }
.centang input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); }

/* ---------- kartu pilihan ala konfigurator: paket, mode, kualitas ---------- */
/* Struktur: <input class="sr" type=radio> + <label class="opsi"><span class="bulat"></span>…</label>.
   Kartu 12 px bergaris abu; terpilih = garis tinta 2 px (1 px + garis dalam 1 px). Titik radio tidak ditampilkan. */
.opsi {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); align-items: start;
  padding: 16px 18px; border: 1px solid var(--garis-kontrol); border-radius: var(--r-kontrol); background: var(--putih);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.opsi:hover { border-color: var(--tinta); }
.opsi .bulat { display: none; }
.opsi > :not(.bulat):not(.ujung) { grid-column: 1; min-width: 0; }
.opsi .ujung { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--f-halus); }
.opsi b, .opsi .nama-opsi { display: block; font-weight: 600; font-size: var(--f-label-judul); line-height: 1.35; letter-spacing: -0.015em; }
.opsi .ket { display: block; font-size: var(--f-halus); color: var(--redup); line-height: 1.45; }
input:checked + .opsi { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
input:focus-visible + .opsi { outline: 2px solid var(--tinta); outline-offset: 3px; }
input:disabled + .opsi { opacity: .45; cursor: not-allowed; border-color: var(--garis); }
input:disabled + .opsi:hover { border-color: var(--garis); }
.daftar-opsi { display: grid; gap: var(--s-3); }
/* Radio tersembunyi menutupi seluruh panelnya, supaya gulir otomatis saat fokus memperlihatkan seluruh pilihan. */
.daftar-opsi > div, .chip-baris > span { position: relative; }
.daftar-opsi input.sr, .chip-baris input.sr { inset: 0; width: 100%; height: 100%; margin: 0; clip: auto; opacity: 0; pointer-events: none; }

/* ---------- pesan ---------- */
/* Dipakai bersama role=alert (galat) atau role=status (info). Monokrom; merah hanya untuk galat. */
.pesan { border-radius: var(--r-kontrol); padding: 14px 16px; font-size: var(--f-halus); line-height: 1.5; border: 1px solid var(--garis); background: var(--putih); color: var(--tinta-2); }
.pesan:empty { display: none; }
.pesan.galat { border-color: var(--merah); background: var(--putih); color: var(--merah); }
.pesan.awas { border-color: var(--tinta); background: var(--putih); color: var(--tinta); }
.pesan.info { border-color: var(--garis); background: var(--putih); color: var(--tinta-2); }
.kartu .pesan.info, .panel .pesan.info { background: var(--abu-latar); border-color: transparent; }
.pesan.sukses { border-color: var(--tinta); background: var(--putih); color: var(--tinta); }
.pesan ul { margin: 6px 0 0; padding-left: 18px; }
.pesan .tautan { color: inherit; }

/* ---------- kapsul status pesanan ---------- */
/* menunggu dan dikirim = garis tinta; lunas/selesai = isi tinta; batal dan kedaluwarsa = garis redup. */
.status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 12px;
  border-radius: var(--r-kapsul); border: 1px solid var(--tinta); background: var(--putih); color: var(--tinta);
  font-size: var(--f-label); font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.status::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: var(--r-kapsul); background: currentColor; }
.status.menunggu, .status.dikirim { background: var(--putih); color: var(--tinta); border-color: var(--tinta); }
.status.lunas, .status.selesai, .status.isi { background: var(--tinta); color: var(--putih); border-color: var(--tinta); }
.status.batal, .status.kedaluwarsa, .status.gagal, .status.redup { background: var(--putih); color: var(--redup); border-color: var(--garis-kontrol); }

/* ---------- pembanding sebelum/sesudah ---------- */
.banding { position: relative; overflow: hidden; border-radius: var(--r-foto); background: var(--kertas-2); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; }
.banding img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.banding .atas { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--posisi, 50%)) 0 0); }
.banding .garis-geser { position: absolute; top: 0; bottom: 0; left: var(--posisi, 50%); width: 2px; background: var(--putih); transform: translateX(-1px); pointer-events: none; }
.banding .pegangan {
  position: absolute; top: 50%; left: var(--posisi, 50%); width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: var(--r-kapsul); background: var(--putih); color: var(--tinta); display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.banding input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.banding:has(input:focus-visible) .pegangan, .banding.fokus .pegangan { outline: 2px solid var(--tinta); outline-offset: 3px; }
/* Di layar sentuh, garis hanya bergeser lewat sapuan ke samping (diatur umum.js), ketukan biasa tidak memindahkannya. */
@media (pointer: coarse) { .banding input[type=range] { pointer-events: none; } }
.banding .lencana, .banding .tanda { position: absolute; bottom: 12px; padding: 4px 12px; border-radius: var(--r-kapsul); background: var(--putih); color: var(--tinta); font-size: 12px; font-weight: 500; line-height: 1.4; pointer-events: none; }
.banding .kiri { left: 12px; }
.banding .kanan { right: 12px; }

/* ---------- chip pilihan ---------- */
/* Struktur app: <input class="sr"> + <label class="chip">. Terpilih = isi tinta. */
.chip-baris { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-baris > span { display: inline-flex; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px;
  border-radius: var(--r-kapsul); border: 1px solid var(--garis-kontrol); background: var(--putih);
  font-size: var(--f-halus); line-height: 1.3; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"], .chip.aktif, input:checked + .chip { background: var(--tinta); color: var(--putih); border-color: var(--tinta); }
input:focus-visible + .chip { outline: 2px solid var(--tinta); outline-offset: 3px; }
input:disabled + .chip { opacity: .45; cursor: not-allowed; }
.chip.statis { cursor: default; }
.chip.statis:hover { border-color: var(--garis-kontrol); }

/* ---------- kapsul keterangan kecil ---------- */
.lencana-kecil { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-kapsul); background: var(--abu-latar); font-size: var(--f-label); font-weight: 500; color: var(--tinta-2); white-space: nowrap; }

/* ---------- target sentuh 44 px di layar sentuh ---------- */
@media (pointer: coarse) {
  .chip, .tombol.kecil { min-height: 44px; }
  .tautan { display: inline-flex; align-items: center; min-height: 44px; }
  p .tautan, li .tautan, .bantu .tautan, .pesan .tautan { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; }
}

/* ---------- animasi muat ---------- */
.kilau { background: var(--abu-latar); animation: kilau 1.4s ease-in-out infinite alternate; }
@keyframes kilau { to { background-color: var(--kertas-2); } }
.putar { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: putar .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kilau, .putar { animation: none; }
  html { scroll-behavior: auto !important; }
  .tombol, .tautan svg, .opsi, .chip { transition: none; }
}