/* ==========================================================================
   Geinvita — Beranda (home_page.html only)
   Redesign modern / simple / minimalist, aksen hitam-putih dipertahankan.
   Mode gelap: OTOMATIS ikut preferensi sistem (prefers-color-scheme) secara
   default, TAPI juga bisa dipilih manual lewat tombol toggle di header
   (disimpan ke localStorage lewat home.js, atribut html[data-theme]).
   File ini SENGAJA terpisah dari geinvita.css supaya tidak menyentuh
   .g-* / class bersama yang juga dipakai checkout_finish.html.
   ========================================================================== */

:root{
  --home-bg:#ffffff;
  --home-fg:#0a0a0a;
  --home-muted:#6b6b6b;
  --home-border:rgba(10,10,10,0.12);
  --home-card-bg:#ffffff;
  --home-chip-bg:#ffffff;
  --home-overlay-bg:rgba(255,255,255,0.72);
  --home-shadow:0 1px 2px rgba(10,10,10,0.04);
  --home-shadow-hover:0 12px 28px rgba(10,10,10,0.10);
  --home-radius:18px;
  --home-radius-sm:12px;
  --home-maxw:1080px;
}

/* Auto: ikut sistem, kecuali user sudah pilih manual "light" lewat toggle */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --home-bg:#0a0a0a;
    --home-fg:#f5f5f5;
    --home-muted:#9a9a9a;
    --home-border:rgba(255,255,255,0.14);
    --home-card-bg:#141414;
    --home-chip-bg:#141414;
    --home-overlay-bg:rgba(10,10,10,0.82);
    --home-shadow:0 1px 2px rgba(0,0,0,0.4);
    --home-shadow-hover:0 16px 32px rgba(0,0,0,0.5);
  }
}
/* Manual: user pilih "Gelap" lewat toggle, berlaku walau sistemnya terang */
html[data-theme="dark"]{
  --home-bg:#0a0a0a;
  --home-fg:#f5f5f5;
  --home-muted:#9a9a9a;
  --home-border:rgba(255,255,255,0.14);
  --home-card-bg:#141414;
  --home-chip-bg:#141414;
  --home-overlay-bg:rgba(10,10,10,0.82);
  --home-shadow:0 1px 2px rgba(0,0,0,0.4);
  --home-shadow-hover:0 16px 32px rgba(0,0,0,0.5);
}
/* Manual: user pilih "Terang" lewat toggle, berlaku walau sistemnya gelap */
html[data-theme="light"]{
  --home-bg:#ffffff;
  --home-fg:#0a0a0a;
  --home-muted:#6b6b6b;
  --home-border:rgba(10,10,10,0.12);
  --home-card-bg:#ffffff;
  --home-chip-bg:#ffffff;
  --home-overlay-bg:rgba(255,255,255,0.72);
  --home-shadow:0 1px 2px rgba(10,10,10,0.04);
  --home-shadow-hover:0 12px 28px rgba(10,10,10,0.10);
}

.home-page{
  background:var(--home-bg);
  color:var(--home-fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.home-page *{ box-sizing:border-box; }
.home-page a{ color:inherit; text-decoration:none; }

.home-container{
  max-width:var(--home-maxw);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Header ---------- */
.home-header{
  position:sticky; top:0; z-index:40;
  background:var(--home-bg);
  border-bottom:1px solid var(--home-border);
}
.home-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.home-logo{ display:flex; align-items:center; gap:10px; }
.home-logo svg{ width:26px; height:26px; flex:0 0 auto; }
.home-logo-text{ font-weight:700; font-size:16px; letter-spacing:-0.01em; }
/* Pencarian tema di navbar — dulu di sini tombol "Cara Pakai"
   (`.home-btn-help`, sudah dihapus dari home.html), diganti kotak
   pencarian supaya pengunjung bisa langsung cari tema dari mana saja di
   beranda tanpa scroll ke bagian filter kategori. Tombol tutorial
   "Cara Pakai" masih ada & tetap berfungsi lewat tombol "Cara Kerjanya"
   di section hero (`.home-btn-ghost`), cuma versi navbar-nya yang
   diganti.
   SEKARANG SELALU tampil (BUKAN collapsed-ke-ikon lagi seperti versi
   sebelumnya) — input dengan placeholder "Cari tema…" & tombol ikon
   kaca pembesar (`#homeSearchSubmit`, `type="submit"`) SAMA-SAMA selalu
   kelihatan di navbar. Ikonnya SENDIRI adalah tombol "Cari" untuk input
   itu (bukan toggle buka/tutup lagi) — markup-nya `<form>` biasa berisi
   input LALU tombol, jadi urutan visual normal (kiri-ke-kanan) SUDAH
   otomatis menaruh input di sebelah kiri tombol, tidak perlu trik
   row-reverse seperti versi collapsed sebelumnya. Pencarian TETAP TIDAK
   jalan di tiap ketikan (lihat home.js) — cuma waktu Enter/submit
   (termasuk tap ikon kaca pembesar di keyboard virtual HP ATAU tombol
   ikon ini sendiri), supaya di HP keyboard virtual tidak terus-terusan
   bikin hasil re-render/scroll sementara pengunjung masih ngetik. */
.home-search{
  display:flex; align-items:center; gap:8px;
}
.home-search-input{
  font:inherit; font-size:13px; color:var(--home-fg);
  background:var(--home-chip-bg); border:1px solid var(--home-border);
  border-radius:999px; padding:9px 14px;
  width:140px; max-width:32vw; box-sizing:border-box;
  transition:border-color .15s ease, background .15s ease, width .15s ease, max-width .15s ease;
}
.home-search-input::placeholder{ color:var(--home-muted); }
.home-search-input:focus{
  outline:none; border-color:var(--home-fg); width:200px; max-width:48vw;
}
/* Safari/Chrome nambah tombol "x" bawaan di input[type=search] yang
   pas-pasan sama border-radius pill kita — dibiarkan tampil apa adanya
   (bukan dihilangkan) supaya pengunjung tetap punya cara cepat
   mengosongkan pencarian tanpa JS tambahan. */
.home-search-toggle{
  width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--home-border);
  background:transparent; color:var(--home-fg); cursor:pointer;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.home-search-toggle:hover{ background:var(--home-fg); color:var(--home-bg); }
.home-search-toggle:active{ transform:scale(.92); }
.home-search-toggle svg{ width:17px; height:17px; }

.home-header-actions{ display:flex; align-items:center; gap:8px; }
.home-theme-toggle{
  width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--home-border);
  background:transparent; color:var(--home-fg);
  border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.home-theme-toggle:hover{ background:var(--home-fg); color:var(--home-bg); }
.home-theme-toggle:active{ transform:scale(.92); }
.home-theme-toggle svg{ width:18px; height:18px; }
.home-theme-toggle .icon-moon{ display:none; }
/* Ikon bulan tampil kalau tema efektif saat ini GELAP (auto ikut sistem ATAU dipilih manual) */
html[data-theme="dark"] .home-theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .home-theme-toggle .icon-moon{ display:block; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .home-theme-toggle .icon-sun{ display:none; }
  html:not([data-theme="light"]) .home-theme-toggle .icon-moon{ display:block; }
}

/* ---------- Hero ---------- */
.home-hero{
  padding:76px 0 52px;
  text-align:center;
}
.home-eyebrow{
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--home-muted); margin-bottom:18px;
}
.home-hero h1{
  font-size:clamp(32px,6vw,56px);
  line-height:1.08; font-weight:800; letter-spacing:-0.02em;
  margin:0 0 18px;
}
.home-hero h1 em{
  font-style:normal;
  position:relative; display:inline-block;
}
.home-hero h1 em::after{
  content:'';
  position:absolute; left:2px; right:2px; bottom:6px; height:.28em;
  background:var(--home-fg); opacity:.12; z-index:-1; border-radius:4px;
}
.home-hero p{
  max-width:520px; margin:0 auto 30px;
  color:var(--home-muted); font-size:16px; line-height:1.6;
}
.home-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.home-btn{
  font:inherit; font-weight:700; font-size:14px;
  padding:14px 26px; border-radius:999px; cursor:pointer;
  border:1px solid var(--home-fg);
  transition:transform .15s ease, opacity .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.home-btn:active{ transform:scale(.97); }
.home-btn-primary{ background:var(--home-fg); color:var(--home-bg) !important; }
.home-btn-primary:hover{ opacity:.85; }
.home-btn-ghost{ background:transparent; color:var(--home-fg); }
.home-btn-ghost:hover{ background:var(--home-border); }

/* ---------- Category filter ---------- */
.home-filter-wrap{
  position:sticky; top:64px; z-index:30;
  background:color-mix(in srgb, var(--home-bg) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--home-border);
  padding:14px 0;
}
.home-filter-bar{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:2px;
  /* Chip kategori (Semua/Pernikahan/dst): DITENGAHKAN kalau muat dalam 1
     baris (kasus normal di semua ukuran layar termasuk HP kecil — 6 chip
     biasanya cukup lega). Kalau suatu saat TIDAK muat (layar sangat
     sempit atau kategori nambah banyak), overflow-x:auto bikin barisnya
     bisa discroll ke samping SEPERTI SEMULA — bukan pindah ke baris ke-2
     (flex-wrap) seperti versi sebelumnya.
     `justify-content:safe center` (browser modern) = versi "aman" dari
     center: tetap di tengah kalau muat, tapi begitu overflow otomatis
     jatuh ke perilaku rata-kiri-dari-awal supaya chip PERTAMA tetap bisa
     dijangkau lewat scroll (tidak "kepotong" tak terjangkau di luar
     layar sebelah kiri seperti masalah versi paling lama). Baris
     `justify-content:center` biasa di atasnya cuma fallback buat browser
     yang belum kenal keyword `safe` — browser modern override otomatis
     ke baris `safe center` di bawahnya. */
  justify-content:center;
  justify-content:safe center;
}
.home-filter-bar::-webkit-scrollbar{ display:none; }
.home-chip{
  font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  background:var(--home-chip-bg); color:var(--home-fg);
  border:1px solid var(--home-border);
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.home-chip:hover{ transform:translateY(-1px); }
.home-chip.is-active{ background:var(--home-fg); color:var(--home-bg); border-color:var(--home-fg); }

/* ---------- Theme grid ---------- */
.home-grid-section{ padding:36px 0 64px; }
.home-grid-count{
  /* Dipindah (2026-08-18) dari ATAS grid ke ATAS paginator — margin-top
     yang tadinya cuma di bawah grid, sekarang jadi jarak ANTARA grid &
     info jumlah tema ini; margin-bottom kecil buat jarak ke paginator
     di bawahnya. */
  color:var(--home-muted); font-size:13px; margin:32px 0 12px;
  text-align:center;
}
.home-grid{
  /* Dulu CSS Grid (auto-fill + 1fr) — kartu melebar mengisi penuh lebar
     baris & baris terakhir yang tidak penuh (mis. cuma tersisa 1-3 kartu
     di halaman terakhir pagination) jadi rata KIRI, bukan di tengah,
     karena kolom grid dibagi rata ke semua baris sekaligus (keterbatasan
     bawaan CSS Grid, tidak bisa menengahkan 1 baris secara independen).
     Sekarang pakai Flexbox + flex-wrap supaya SETIAP baris (termasuk
     baris terakhir yang isinya kurang dari 4 kartu) ditengahkan sendiri
     -> hasilnya selalu di tengah di semua ukuran layar & jumlah kartu. */
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:18px;
}
.home-card{
  display:flex; flex-direction:column;
  /* BUKAN lagi flex-grow:1 — versi itu bikin kartu di baris TERAKHIR yang
     cuma tersisa 1-2 kartu (mis. halaman terakhir pagination/hasil
     pencarian) ikut membesar melebihi kartu di baris lain, karena
     flex-grow membagi SISA RUANG BARIS ITU SAJA ke jumlah kartu yang ada
     di baris tsb — makin sedikit kartu di baris, makin besar masing-
     masing. Sekarang lebar kartu dihitung LANGSUNG dari lebar layar
     (clamp, bukan dari sisa ruang baris) via `width`, dengan
     flex-grow:0 supaya SEMUA kartu di SEMUA baris — penuh atau sisa
     1-2 — selalu sama persis ukurannya. Tetap "flexible ikut layar"
     (lebih besar di layar lebar, lebih kecil di HP) karena clamp()
     dihitung dari viewport width (vw), bukan dari jumlah sibling di
     baris yang sama. */
  flex:0 1 auto; width:clamp(140px,22vw,190px);
  background:var(--home-card-bg);
  border:1px solid var(--home-border);
  border-radius:var(--home-radius);
  overflow:hidden;
  box-shadow:var(--home-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.home-card:hover{ transform:translateY(-4px); box-shadow:var(--home-shadow-hover); }
.home-card-img-wrap{
  aspect-ratio:144/256; width:100%; overflow:hidden;
  background:var(--home-border);
}
.home-card-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-card-title{
  font-size:13.5px; font-weight:600; padding:12px 14px;
  text-align:center;
}
.home-grid-empty{
  display:none; text-align:center; color:var(--home-muted);
  padding:40px 0; font-size:14px;
}
.home-grid-empty.is-visible{ display:block; }

/* ---------- Pagination (4 tema per halaman, per kategori) ---------- */
.home-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex-wrap:wrap;
  /* margin-top diperkecil (dulu 32px) karena `.home-grid-count` sekarang
     PERSIS di atas elemen ini (sudah punya margin-bottom sendiri) —
     lihat komentar di `.home-grid-count`. */
  margin-top:4px;
}
.home-page-btn{
  min-width:36px; height:36px; padding:0 8px;
  font:inherit; font-size:13px; font-weight:600;
  border-radius:999px; cursor:pointer;
  background:var(--home-chip-bg); color:var(--home-fg);
  border:1px solid var(--home-border);
  /* `.home-page-btn` dirender sebagai <a>/<span> (inline) — TANPA
     display:flex, tinggi kotaknya memang 36px tapi TEKSNYA cuma
     mengikuti line-height normal font, jadi angka jatuh sedikit di
     atas/bawah titik tengah lingkaran, bukan pas di tengah. Ditambah
     inline-flex + centering supaya labelnya (angka halaman, ‹, ›)
     selalu pas di tengah bulatan persis. */
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
  transition:background .15s ease, color .15s ease, transform .1s ease, opacity .15s ease;
}
.home-page-btn:hover:not(:disabled){ transform:translateY(-1px); }
.home-page-btn.is-active{ background:var(--home-fg); color:var(--home-bg); border-color:var(--home-fg); }
.home-page-btn:disabled{ opacity:.35; cursor:default; }
/* Elipsis "…" — dekoratif saja (paginator disederhanakan jadi jendela 3
   nomor + panah ‹/›, lihat _build_pagination_items() di views.py),
   BUKAN tombol yang bisa diklik: tanpa background/border/hover, cursor
   normal, sedikit transparan supaya kelihatan "diam" dibanding tombol
   nomor/panah di sebelahnya. */
.home-page-btn.is-ellipsis{
  background:transparent; border-color:transparent; cursor:default;
  color:var(--home-muted); min-width:20px; padding:0;
}
.home-page-btn.is-ellipsis:hover{ transform:none; }
/* Panah sebelumnya/berikutnya SEKARANG ikon SVG chevron (bukan karakter
   teks ‹/› lagi) — ukuran ikon disesuaikan supaya proporsional di dalam
   bulatan 36px yang sama dengan tombol nomor halaman. */
.home-page-btn-arrow svg{ width:16px; height:16px; }

/* ---------- Footer ---------- */
.home-footer{
  border-top:1px solid var(--home-border);
  padding:26px 0; text-align:center;
}
.home-footer p{ font-size:13px; color:var(--home-muted); margin:0 0 10px; }
.home-footer-social{ display:flex; gap:16px; justify-content:center; }
.home-footer-social a{ font-size:13px; font-weight:600; color:var(--home-fg); }
.home-footer-social a:hover{ text-decoration:underline; }

/* ---------- Tutorial overlay ---------- */
.home-overlay{
  position:fixed; inset:0; z-index:999;
  background:var(--home-overlay-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.home-overlay.dflex{ display:flex; }
.home-overlay-panel{
  background:var(--home-bg); color:var(--home-fg);
  border:1px solid var(--home-border);
  border-radius:24px;
  max-width:520px; width:100%; max-height:88vh; overflow-y:auto;
  padding:28px;
  box-shadow:var(--home-shadow-hover);
}
.home-overlay-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px;
}
.home-overlay-head h2{ font-size:20px; font-weight:800; margin:0; letter-spacing:-0.01em; }
.home-btn-close{
  width:32px; height:32px; border-radius:999px; border:1px solid var(--home-border);
  background:transparent; color:var(--home-fg); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.home-btn-close:hover{ background:var(--home-border); }
.home-steps{ display:grid; gap:14px; margin-bottom:24px; }
.home-step{ display:flex; gap:14px; align-items:flex-start; }
.home-step-num{
  flex:0 0 auto; width:28px; height:28px; border-radius:999px;
  background:var(--home-fg); color:var(--home-bg);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800;
}
.home-step-title{ font-weight:700; font-size:14.5px; margin:0 0 2px; }
.home-step-desc{ font-size:13.5px; color:var(--home-muted); margin:0; line-height:1.5; }
.home-overlay-social{
  border-top:1px solid var(--home-border); padding-top:18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.home-overlay-social span{ font-size:13px; color:var(--home-muted); }
.home-overlay-social .home-social-links{ display:flex; gap:14px; }
.home-overlay-social a{ font-size:13px; font-weight:700; }
.home-overlay-social a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .home-hero{ padding:56px 0 40px; }
  .home-card-title{ font-size:12.5px; padding:10px 12px; }
  /* Header sempit di HP: logo + input pencarian (SELALU tampil) +
     tombol ikon cari + toggle tema harus muat 1 baris — input
     dipersempit lagi di HP supaya semuanya tetap cukup 1 baris. */
  .home-search-input{ width:96px; max-width:38vw; }
  .home-search-input:focus{ width:140px; max-width:55vw; }
}

/* ---------- Checkout finish ("Memproses Pembayaran") ----------
   Halaman ini dulu punya CSS sendiri (checkout_finish.css), sekarang
   digabung ke sini supaya cuma ada 1 stylesheet custom untuk dipelihara.
   Pakai variabel --home-* yang sama (termasuk mode gelap auto/manual)
   supaya konsisten dengan beranda — body-nya juga pakai class
   "home-page" (lihat checkout_finish.html) supaya ikut warisan warna,
   font, & reset dasar dari .home-page tanpa perlu duplikasi. */
.checkout-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.checkout-card{
  width:100%; max-width:400px;
  background:var(--home-card-bg);
  border:1px solid var(--home-border);
  border-radius:var(--home-radius);
  box-shadow:var(--home-shadow);
  padding:36px 28px;
  text-align:center;
}
.checkout-spinner{
  width:32px; height:32px; margin:0 auto 18px;
  border-radius:50%;
  border:3px solid var(--home-border);
  border-top-color:var(--home-fg);
  animation:checkout-spin .8s linear infinite;
}
.checkout-spinner.is-hidden{ display:none; }
@keyframes checkout-spin{ to{ transform:rotate(360deg); } }

/* Icon centang bulat — muncul gantiin spinner begitu pembayaran sukses.
   Animasinya sengaja ringan (cuma scale+fade) supaya tidak norak. */
.checkout-icon{
  width:52px; height:52px; margin:0 auto 18px;
  animation:checkout-pop .35s ease-out;
}
.checkout-icon.is-hidden{ display:none; }
.checkout-icon-circle{
  stroke:var(--home-fg); stroke-width:2; opacity:.15;
}
.checkout-icon-check{
  stroke:var(--home-fg); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:36; stroke-dashoffset:36;
  animation:checkout-check .4s .1s ease-out forwards;
}
@keyframes checkout-pop{ from{ transform:scale(.75); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes checkout-check{ to{ stroke-dashoffset:0; } }

.checkout-title{
  font-size:18px; font-weight:800; letter-spacing:-0.01em; margin:0 0 10px;
}
.checkout-desc{
  font-size:13.5px; color:var(--home-muted); line-height:1.6; margin:0;
}

/* Kotak yang nampilin link undangan jadi (geinvita.com/nama-pengundang),
   read-only, cuma buat dibaca/dipastikan sebelum disalin/dibagikan. */
.checkout-link-box{
  margin-top:22px;
  padding:12px 16px;
  border-radius:var(--home-radius-sm);
  background:var(--home-chip-bg);
  border:1px solid var(--home-border);
  font-size:13px; font-weight:600;
  word-break:break-all;
}
.checkout-link-box.is-hidden{ display:none; }

.checkout-actions{
  display:none;
  margin-top:16px;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.checkout-actions.is-visible{ display:flex; }
.checkout-actions.is-hidden{ display:none; }

.checkout-btn{
  font:inherit; font-weight:700; font-size:13.5px;
  padding:12px 22px; border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.checkout-btn:active{ transform:scale(.97); }
.checkout-btn:disabled{ cursor:default; }
.checkout-btn-primary{
  background:var(--home-fg); color:var(--home-bg) !important;
  border:1px solid var(--home-fg);
}
.checkout-btn-primary:hover{ opacity:.85; }
.checkout-btn-secondary{
  background:transparent; color:var(--home-fg);
  border:1px solid var(--home-border);
}
.checkout-btn-secondary:hover{ background:var(--home-chip-bg); }
.checkout-btn-secondary.is-hidden{ display:none; }