/* ==========================================================
   WISHBOARD — Design tokens (pastel, teal accent)
   ========================================================== */

:root {
  --cream:        #FBFAF6;
  --paper:         #FFFFFF;
  --blush:         #CDEFEA;
  --blush-deep:    #A9E2DA;
  --sky:           #DCEBFF;
  --sky-deep:      #C3DEFF;
  --butter:        #FFF0C2;
  --butter-deep:   #FFE7A0;
  --mint:          #D9F2E3;
  --mint-deep:     #BFEBD1;
  --lilac:         #EAE0FF;
  --lilac-deep:    #D9C9FF;

  --ink:           #37423F;
  /* Digelapin tipis dari #62706C. Alasannya diukur, bukan selera:
     di kartu lilac yang paling terang, #62706C cuma dapet rasio
     kontras 4.1:1 -- di bawah ambang 4.5:1 buat teks kecil. #5A6864
     bikin yang paling buruk jadi 4.61:1, dan bedanya nyaris gak
     keliatan sama mata. */
  --ink-soft:      #5A6864;
  /* #9AA6A2 yang lama cuma 2.5:1 di kertas putih -- itu jauh banget
     di bawah ambang, padahal dipake buat .field .hint (teks petunjuk
     di form yang justru HARUS kebaca). #6A7974 = 4.57:1. */
  --ink-faint:     #677671;

  --coral:         #1FA79E;
  --coral-dark:    #0E7C74;
  /* Tombol utama dulu gradien dari --coral ke --coral-dark dengan
     teks putih. Masalahnya --coral cuma 2.97:1 lawan putih, jadi
     SEPARO tombolnya gak kebaca standar. Dimulai dari #157F76
     (4.85:1) -- gradiennya masih kerasa, tulisannya aman di seluruh
     permukaan. Satu token buat 8 tempat yang dulu nyalin nilai yang
     sama persis. */
  /* Dua lapis sengaja, bukan satu. Lapis bawah gradien aslinya
     (--coral -> --coral-dark), lapis atas selubung hitam 25% yang
     memudar -- cuma ujung terangnya yang digelapin.
     Kenapa gak hardcode hex yang lebih gelap aja? Karena header.php
     nyuntik --coral & --coral-dark dari THEME_COLOR di site-config,
     beda-beda tiap deployment. Hex mati di sini bakal matiin fitur
     ganti warna tema itu. Cara ini ngikut warna apa pun yang dipilih.
     25% dipilih dari hitungan: di --coral default (#1FA79E) hasilnya
     4.94:1 lawan teks putih, lewat ambang 4.5:1. */
  --grad-primary:
    linear-gradient(135deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 62%),
    linear-gradient(135deg, var(--coral), var(--coral-dark));

  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  /* Sudut yang SENGAJA di luar tangga, jangan ikut dirapikan:
     2px (selotip - kertas asli gak bundar), 999px (pil),
     dan radius asimetris di .note-card (sudut kertas gak pernah
     presisi di keempat sisinya). */

  /* ---- Tangga ukuran teks ----
     Dulu ada 31 nilai rem yang beda di file ini -- sebelas di
     antaranya numpuk di rentang 0.72-0.92rem, selisih 0.02rem alias
     0,32 piksel. Selisih segitu gak kelihatan mata, jadi itu bukan
     keputusan design, tapi nilai yang kebawa-bawa pas nulis.
     Sekarang 15 nilai, dan setiap anak tangga punya tugas sendiri.
     Pakai token ini buat apa pun yang baru. */
  --fs-2xs:  .74rem;   /* label kecil, kredit footer   */
  --fs-xs:   .82rem;   /* teks bantuan, meta           */
  --fs-sm:   .88rem;   /* teks sekunder, tombol kecil  */
  --fs-base: 1rem;     /* badan teks                   */
  --fs-md:   1.15rem;  /* paragraf pengantar           */
  --fs-lg:   1.35rem;  /* h3                           */
  --fs-xl:   1.5rem;   /* h2                           */
  --fs-2xl:  1.8rem;   /* h1                           */
  --fs-3xl:  2.4rem;   /* angka statistik, judul besar */

  /* Tiga tingkat ketinggian, bukan 5 variasi yang mirip-mirip.
     Bayangan khas tema (nyala emas Candlelight, dll) sengaja TIDAK
     ditarik ke sini -- itu memang ciri tema masing-masing. */
  --shadow-soft: 0 6px 16px -10px rgba(20, 60, 55, 0.16);
  --shadow-card: 0 10px 24px -14px rgba(20, 60, 55, 0.22), 0 2px 6px rgba(20, 60, 55, 0.07);
  --shadow-lift: 0 16px 34px -16px rgba(20, 60, 55, 0.28);
  --shadow-pop:  0 26px 56px -22px rgba(20, 60, 55, 0.5);

  --font-display: 'Fraunces', Georgia, serif;
  /* Tulisan tangan sekarang punya PERAN, bukan jadi font default satu
     halaman. Aturannya: tangan = sesuatu yang beneran ditulis orang
     (tanda tangan di kartu, satu kalimat sapaan di hero). Judul &
     bagian = suara produknya (Fraunces). Itu yang bikin beranda dan
     halaman lain kerasa satu situs, tanpa ngebuang font pilihanmu. */
  --font-hand: 'Architects Daughter', cursive;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-logo: 'Fredoka', 'Quicksand', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  background-image:
    radial-gradient(circle at 10% 8%, rgba(31, 167, 158, 0.16), transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(220, 235, 255, 0.45), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(217, 242, 227, 0.4), transparent 45%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 .4em; }

/* Judul utama di halaman form & board pake font tulisan tangan yang
   sama kayak Home, biar seluruh situs kerasa satu bahasa visual.
   memory.php SENGAJA gak dimasukin di sini -- 5 tema di situ emang
   punya font khasnya masing-masing (Caveat, Cormorant, dst). */
.form-card h2,
.board-hero h1 {
  font-family: 'Architects Daughter', cursive;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
button, input, textarea, select { font-family: var(--font-body); font-size: 1rem; }

/* -------------------- Header -------------------- */
.site-header { padding: 22px 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
/* Logo udah dipindah ke hero Home, jadi header kiri sengaja kosong.
   Spacer ini yang bikin nav tetep kedorong ke kanan. */
.site-header__spacer { display: block; }

/* -------------------- Nav: ikon + teks -------------------- */
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.site-nav__icon { flex-shrink: 0; }
.site-nav a:hover { background: var(--paper); color: var(--coral-dark); }
/* Di HP yang sempit, teksnya disembunyiin biar nav gak makan tempat --
   ikon + title/aria-label udah cukup buat navigasi */
@media (max-width: 520px) {
  /* Label sengaja TETEP ditampilin di HP (gak di-hide), biar menunya
     jelas. Yang dirapetin cuma jarak & ukurannya. */
  .site-nav { gap: 0; }
  .site-nav a { padding: 8px 8px; font-size: 0.82rem; gap: 5px; }
  .site-nav__icon { width: 16px; height: 16px; }
}

/* Tombol tukar bahasa -- sekarang di footer (bukan di nav lagi).
   Ngarah ke domain satunya, di halaman yang sama. */
/* Tukar bahasa: sengaja teks kecil biasa, BUKAN tombol -- biar
   footer-nya bersih & gak rebutan perhatian */
.footer-lang {
  font-family: 'Special Elite', monospace;
  font-size: 0.74rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  transition: color .2s ease;
}
.footer-lang:hover { color: var(--coral-dark); }

/* Ikon tipe ucapan (SVG garis), dipake di grid pilihan, badge, kartu */
.type-icon { width: 18px; height: 18px; vertical-align: -4px; display: inline-block; flex-shrink: 0; }
.note-card__type .type-icon,
.board-item__type .type-icon,
.board-hero__type .type-icon { width: 15px; height: 15px; vertical-align: -3px; }
.type-option .emoji .type-icon { width: 26px; height: 26px; vertical-align: 0; }
.memory-hero__badge .type-icon { width: 38px; height: 38px; vertical-align: 0; }

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px; border: none;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-secondary { background: var(--paper); color: var(--ink); border: 2px solid var(--blush-deep); }
.btn-secondary:hover { background: var(--blush); }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 2px dashed var(--ink-faint); }
.btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-danger { background: #FBECEC; color: #B14545; border: 2px solid #F3D5D5; }
.btn-danger:hover { background: #F6D9D9; }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.88rem; }

/* -------------------- Hero -------------------- */
.hero { padding-top: 64px; padding-bottom: 44px; text-align: center; }
.hero__eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: 0.74rem; color: var(--coral-dark); background: var(--blush);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; max-width: 780px; margin-left: auto; margin-right: auto; }
.hero h1 em { font-style: italic; color: var(--coral-dark); }
.hero p.lead { max-width: 560px; margin: 0 auto 30px; color: var(--ink-soft); font-size: 1.05rem; }
.hero__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   GAYA "POSTCARD" -- khusus home page (index.php), di-scope penuh
   lewat body.home-postcard biar halaman lain (board, dashboard,
   admin, memory) sama sekali gak kesenggol. Palet pastel pudar/
   vintage, font tulisan tangan (Architects Daughter) + font mesin ketik
   tua (Special Elite) buat elemen "cap pos".
   ============================================================ */
body.home-postcard {
  /* Sengaja gak nimpa --cream/--paper/--blush/dll lagi, biar home
     page otomatis "warisan" palet cerah yang sama kayak halaman lain
     (board, dashboard, admin, memory) -- biar gak kerasa loncat pas
     pindah halaman. Cuma font & tekstur kertas tipis yang tetep
     dipertahanin buat identitas "postcard"-nya. */
  /* DULU di sini ada `--font-display: 'Architects Daughter'`. Satu
     baris itu bikin SEMUA h1-h4 di beranda jadi tulisan tangan,
     sedangkan halaman lain pakai Fraunces -- itu akar kenapa beranda
     kerasa situs yang beda. Sekarang tulisan tangan dipakai lewat
     --font-hand di tempat yang emang "ditulis tangan" doang. */
  background-image:
    repeating-linear-gradient(0deg, rgba(31, 167, 158, 0.025) 0px, transparent 2px, transparent 5px),
    radial-gradient(circle at 10% 8%, rgba(31, 167, 158, 0.16), transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(220, 235, 255, 0.45), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(217, 242, 227, 0.4), transparent 45%);
  background-attachment: fixed;
}
body.home-postcard .hero__eyebrow { background: var(--blush); color: var(--coral-dark); font-family: var(--font-body); }
/* Satu-satunya judul yang pakai tulisan tangan di seluruh situs:
   sapaan di kartu pos. Semua judul lain -- termasuk h2 di beranda --
   ikut Fraunces, sama kayak halaman mana pun. */
body.home-postcard .hero h1 { font-family: var(--font-hand); font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 400; line-height: 1.26; margin-bottom: .5em; }
body.home-postcard .hero h1 em { font-style: normal; }
body.home-postcard .btn-primary { background: var(--grad-primary); }
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}

/* -------------------- Kartu mini gaya postcard (Pilih Momen & Pilih Gaya) -------------------- */
body.home-postcard .occasion-card {
  background: var(--paper);
  border: 1px solid #F0EBE2;
  box-shadow: var(--shadow-soft);
}
body.home-postcard .postcard-mini {
  position: relative;
}
body.home-postcard .postcard-mini::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed rgba(20, 60, 55, 0.25);
  border-radius: 2px;
  pointer-events: none;
}
body.home-postcard .occasion-card:nth-child(6n+1) { transform: rotate(-1.2deg); }
body.home-postcard .occasion-card:nth-child(6n+2) { transform: rotate(1deg); }
body.home-postcard .occasion-card:nth-child(6n+3) { transform: rotate(-0.7deg); }
body.home-postcard .occasion-card:nth-child(6n+4) { transform: rotate(1.3deg); }
body.home-postcard .occasion-card:nth-child(6n+5) { transform: rotate(-1deg); }
body.home-postcard .occasion-card:nth-child(6n+6) { transform: rotate(0.8deg); }
body.home-postcard .occasion-card:hover,
body.home-postcard .theme-preview-card:hover { transform: rotate(0deg) translateY(-3px); }
body.home-postcard .occasion-card__label { font-family: var(--font-body); }
body.home-postcard .theme-preview-card__label { font-family: var(--font-body); }

/* Tema-tema di grid "Pilih Gaya Kenanganmu" pertahanin warna khasnya
   sendiri-sendiri (biar tetep keliatan beda satu sama lain), cuma
   dikasih border tipis biar nyatu sama kerangka postcard */
body.home-postcard .theme-preview-card { border: 1px solid rgba(20, 60, 55, 0.15); }

/* -------------------- Galeri ucapan (masonry) jadi kartu pos -------------------- */
body.home-postcard .note-card { border: 1px solid rgba(20, 60, 55, 0.12); }
body.home-postcard .note-card__tape { background: rgba(255, 255, 255, 0.85); }
body.home-postcard .note-card__message { font-size: 0.88rem; line-height: 1.55; }

/* Di beranda label tipenya dikecilin dikit lagi -- kartunya lebih
   rapat di masonry 4 kolom. */
body.home-postcard .note-card__type { font-size: 0.74rem; }

/* Selotipnya dulu nempel persis di left:26px buat semua kartu, jadi
   ketahuan keluar dari satu cetakan. Digeser-geser, dan tiap kartu
   ke-3 sengaja gak diselotip -- papan beneran gak pernah serapi itu.
   Siklusnya 5, sedangkan warna kartu siklusnya 6, jadi polanya baru
   ngulang tiap 30 kartu (lebih dari isi satu halaman). */
body.home-postcard .masonry .note-card:nth-child(5n+1) .note-card__tape { left: 18%; transform: rotate(-5deg); }
body.home-postcard .masonry .note-card:nth-child(5n+2) .note-card__tape { left: 52%; width: 46px; transform: rotate(3deg); }
body.home-postcard .masonry .note-card:nth-child(5n+3) .note-card__tape { display: none; }
body.home-postcard .masonry .note-card:nth-child(5n+4) .note-card__tape { left: 34%; width: 62px; transform: rotate(-2deg); }
body.home-postcard .masonry .note-card:nth-child(5n+5) .note-card__tape { left: 8%;  transform: rotate(6deg); }

/* ---- Kartu utama (slot 1 hasil kurasi) ----
   Urutan kartu sekarang keputusan admin, bukan RAND(). Begitu urutan
   punya arti, designnya harus ngakuin itu: slot 1 mendarat telentang
   sebagai kartu pos utuh, tulisannya sebesar tulisan tangan asli.
   Cuma muncul kalo lagi mode kurasi -- kalo isinya acak, "nomor satu"
   gak berarti apa-apa dan kartunya gak dirender sama sekali. */
body.home-postcard .lead-note { margin-bottom: 28px; }
body.home-postcard .note-card--lead {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 30px 30px 26px;
  background: var(--paper);
  transform: rotate(-0.6deg);
  border-radius: 18px 7px 0 8px / 8px 19px 0 18px;
}
@media (min-width: 640px) {
  body.home-postcard .note-card--lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
  }
  body.home-postcard .note-card--lead.has-no-photo { grid-template-columns: 1fr; }
}
/* Tanpa foto, kartu selebar halaman cuma jadi spanduk dengan 60%
   ruang kosong di kanan. Jadi yang dibatesin kartunya, bukan
   tulisannya -- hasilnya kartu pos yang wajar, bukan papan reklame. */
body.home-postcard .note-card--lead.has-no-photo {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
body.home-postcard .note-card--lead.has-no-photo .note-card__message {
  max-width: none;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
body.home-postcard .note-card--lead .note-card__photo {
  margin: 0;
  height: 100%;
  min-height: 210px;
  max-height: none;
  border-radius: 10px 4px 10px 4px;
}
body.home-postcard .note-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.home-postcard .note-card--lead .note-card__message {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: 14px;
}
body.home-postcard .note-card--lead .note-card__from {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
body.home-postcard .note-card--lead .note-card__tape { left: 40px; width: 72px; height: 24px; }

/* -------------------- Tombol melayang -------------------- */
body.home-postcard .home-mobile-fab { background: var(--grad-primary); }

/* -------------------- Occasion grid (home) -------------------- */
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 640px)  { .occasion-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px)  { .occasion-grid { grid-template-columns: repeat(4, 1fr); } }
.occasion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.occasion-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.occasion-card__icon { font-size: 1.8rem; }
.occasion-card__label { font-weight: 700; font-size: 0.82rem; color: var(--ink); }

/* -------------------- Theme preview grid (home) -------------------- */
.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 640px) { .theme-preview-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .theme-preview-grid { grid-template-columns: repeat(5, 1fr); } }
.theme-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 130px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.theme-preview-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.theme-preview-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.35rem;
  background: radial-gradient(circle at 35% 30%, var(--coral), var(--coral-dark));
  box-shadow:
    0 3px 6px -1px rgba(20, 60, 55, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15));
}
/* Warna stempel disesuain tiap tema, biar nyambung sama palet
   masing-masing gaya (bukan 1 warna generik doang) */
.theme-preview-card__badge--scrapbook { background: radial-gradient(circle at 35% 30%, #C9A15D, #8A6B3D); }
.theme-preview-card__badge--editorial { background: radial-gradient(circle at 35% 30%, #4a4a4a, #1a1a1a); }
.theme-preview-card__badge--candlelight { background: radial-gradient(circle at 35% 30%, #E0BB4E, #A9822E); }
.theme-preview-card__badge--watercolor { background: radial-gradient(circle at 35% 30%, #C79FE0, #9D7BC4); }
.theme-preview-card__label { font-weight: 700; font-size: 0.82rem; }

.theme-preview-card--modern {
  background: linear-gradient(135deg, var(--sky), var(--blush));
  color: var(--ink);
}
.theme-preview-card--scrapbook {
  background: #E8DCC4;
  color: #5a4a2e;
  font-family: 'Fraunces', serif;
}
.theme-preview-card--editorial {
  background: #FAFAF8;
  color: #222;
  border: 1px solid #E5E0D8;
}
.theme-preview-card--candlelight {
  background: linear-gradient(135deg, #221f26, #17151a);
  color: #EDE6D6;
}
.theme-preview-card--candlelight .theme-preview-card__label { color: #C9A227; }
.theme-preview-card--watercolor {
  background: linear-gradient(135deg, #EAE0FF, #D9F2E3, #FFF0C2);
  color: #4a4458;
}

/* -------------------- Mobile floating CTA (home) -------------------- */
.home-mobile-fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 10px 24px -8px rgba(14, 124, 116, 0.5);
}
@media (max-width: 780px) {
  .home-mobile-fab { display: inline-flex; }
}

/* -------------------- Masonry wish grid -------------------- */
.section-title { text-align: center; margin: 46px 0 26px; }
.section-title h2 {
  margin-bottom: 6px;
  font-family: 'Architects Daughter', cursive;
  font-weight: 400;
}
.section-title p { color: var(--ink-soft); margin: 0; }

.masonry { column-count: 1; column-gap: 22px; padding-bottom: 50px; }
@media (min-width: 640px)  { .masonry { column-count: 2; } }
@media (min-width: 980px)  { .masonry { column-count: 3; } }
@media (min-width: 1280px) { .masonry { column-count: 4; } }

.note-card {
  break-inside: avoid; margin: 0 0 22px; background: var(--paper);
  padding: 22px 22px 22px; box-shadow: var(--shadow-card); position: relative;
  /* Sudut sengaja dibikin gak simetris -- kertas asli gak pernah
     rounded sempurna di keempat sudutnya. Sudut kanan-bawah dibikin
     siku (0) biar lipatan kertasnya nempel rapi di situ. */
  border-radius: 14px 5px 0 6px / 6px 15px 0 14px;
}
/* Serat kertas halus. Ditaro di lapisan terpisah (::before) BUKAN di
   background, soalnya warna pastel tiap kartu di-set lewat nth-child
   pake shorthand `background` -- kalo teksturnya ditaro di situ juga,
   bakal saling nimpa. */
.note-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(94deg, rgba(120, 110, 90, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(120, 110, 90, .035) 0 1px, transparent 1px 6px);
}
/* Sudut kertas kelipat di kanan bawah */
.note-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .85) 0 50%, rgba(120, 110, 90, .28) 50%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
/* Isi kartu dinaikin di atas lapisan serat */
.note-card > * { position: relative; z-index: 2; }
.note-card:nth-child(6n+1) { transform: rotate(-1.4deg); background: var(--blush); }
.note-card:nth-child(6n+2) { transform: rotate(1.1deg); background: var(--sky); }
.note-card:nth-child(6n+3) { transform: rotate(-0.8deg); background: var(--butter); }
.note-card:nth-child(6n+4) { transform: rotate(1.6deg); background: var(--mint); }
.note-card:nth-child(6n+5) { transform: rotate(-1.1deg); background: var(--lilac); }
.note-card:nth-child(6n+6) { transform: rotate(0.9deg); background: var(--paper); }

.note-card__tape { position: absolute; top: -10px; left: 26px; width: 54px; height: 20px; background: rgba(255,255,255,.75); border: 1px solid rgba(74,68,88,.06); transform: rotate(-4deg); border-radius: 2px; }
.note-card__photo { width: 100%; border-radius: var(--radius-sm); margin-bottom: 12px; display: block; object-fit: cover; max-height: 260px; cursor: default; }
/* Sengaja BUKAN huruf besar. Di papan berisi puluhan kartu, label
   kapital + letter-spacing di tiap kartu bikin mata baca labelnya
   duluan sebelum ucapannya. Aturan ini di level dasar supaya beranda,
   board, dan memory dapat perlakuan yang sama persis. */
.note-card__type {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 8px;
}
.note-card__message { font-family: var(--font-display); font-size: 0.88rem; line-height: 1.55; color: var(--ink); margin-bottom: 10px; }
/* Nama pengirim = tanda tangan. Dipakai di beranda, board, dan
   memory -- satu perlakuan yang sama, jadi kartunya kerasa dari
   produk yang sama di mana pun dibuka. Ukurannya dinaikin dikit
   soalnya tulisan tangan kebaca lebih kecil dari sans pada ukuran
   nominal yang sama. */
.note-card__from { font-family: var(--font-hand); font-weight: 400; font-size: 1rem; color: var(--ink-soft); }
.note-card__from::before { content: "- "; }

/* Tombol download 1 ucapan doang (khusus dipake di memory.php) --
   kecil & samar defaultnya, baru jelas pas kartunya di-hover, biar
   gak ganggu keindahan kartu tapi tetep gampang ditemuin. */
.note-card__download {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.note-card:hover .note-card__download,
.note-card__download:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.note-card__download:hover {
  background: var(--coral);
  color: #fff;
}
@media (hover: none) {
  /* Di HP gak ada hover, jadi tombolnya tetep keliatan (samar) dari awal */
  .note-card__download { opacity: .65; transform: translateY(0); }
}

/* -------------------- Forms / create board flow -------------------- */
.form-page { padding-top: 50px; padding-bottom: 70px; }
/* ============================================================
   BAHASA VISUAL "PAPER CARD" -- dipake di SEMUA halaman biar
   konsisten sama gaya postcard di Home. Semua container utama
   (form bikin board, login, kartu board di dashboard/admin, form
   tulis ucapan) dapet perlakuan sama: double border ala kartu pos
   + sudut perforasi kecil.
   ============================================================ */
.form-card,
.add-wish-card,
.board-item {
  position: relative;
  background: var(--paper);
  border: 1.5px solid #F0EBE2;
  outline: 1px solid #F0EBE2;
  outline-offset: 5px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
/* Sudut "perforasi" kecil ala tepi perangko, jadi penanda visual
   yang sama di tiap kartu utama */
.form-card::after,
.add-wish-card::after,
.board-item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 20px;
  border: 1.5px dashed rgba(20, 60, 55, 0.18);
  border-radius: 2px;
  pointer-events: none;
}
.form-card { max-width: 560px; margin: 0 auto; padding: 38px 36px; }
@media (max-width: 640px) {
  .form-card, .add-wish-card, .board-item { outline-offset: 3px; }
}

.form-steps { display: flex; justify-content: center; gap: 10px; margin-bottom: 26px; }
.form-steps span { width: 34px; height: 6px; border-radius: 999px; background: var(--blush-deep); }
.form-steps span.active { background: var(--coral-dark); }

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 7px; color: var(--ink); }
.field .hint { display: block; font-weight: 500; color: var(--ink-faint); font-size: 0.82rem; margin-top: 5px; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 2px solid #EFE6DC;
  background: #fff; color: var(--ink); outline: none; transition: border-color .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--coral); }
.field textarea { resize: vertical; min-height: 100px; }

.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.type-option { cursor: pointer; border: 2px solid #EFE6DC; border-radius: var(--radius-sm); padding: 16px 12px; text-align: center; background: #fff; transition: border-color .18s ease, background .18s ease; }
.type-option input { display: none; }
.type-option .emoji { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.type-option span.label { font-weight: 700; font-size: 0.88rem; }
.type-option:has(input:checked) { border-color: var(--coral); background: var(--blush); }

.notice { background: var(--sky); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.88rem; color: var(--ink); margin-bottom: 22px; }
.notice strong { color: var(--coral-dark); }

.error-box { background: #FFE3E3; border: 1px solid #FFB4B4; color: #A3403F; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 18px; }

/* -------------------- Multi-photo preview (create-board.php) -------------------- */
.photo-multi-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.photo-multi-preview__item { position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-soft); }
.photo-multi-preview__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-multi-preview__remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.photo-multi-preview__remove:hover { background: rgba(0, 0, 0, 0.75); }

/* -------------------- Dashboard photo management -------------------- */
.dashboard-photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dashboard-photo-grid__item { position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-soft); }
.dashboard-photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dashboard-photo-grid__remove {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(177, 69, 69, 0.85); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.dashboard-photo-grid__remove:hover { background: rgba(177, 69, 69, 1); }

/* -------------------- Polaroid gallery (memory.php) -------------------- */
.polaroid-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 20px; padding: 6px 24px 54px; }
.polaroid {
  background: #fff; padding: 14px 14px 34px; border-radius: var(--radius-xs);
  box-shadow: var(--shadow-card);
  transform: rotate(var(--polaroid-rotate, 0deg)) scale(var(--polaroid-scale, 1)) translateY(var(--polaroid-offset-y, 0px));
  transition: transform .25s ease;
  width: 170px;
}
.polaroid:hover { transform: rotate(0deg) scale(1.06) translateY(0); z-index: 5; }
.polaroid img { width: 100%; height: 170px; object-fit: cover; display: block; border-radius: 2px; }

@media (max-width: 640px) {
  .polaroid { width: 130px; padding: 10px 10px 26px; }
  .polaroid img { height: 130px; }
}

/* -------------------- Memory page (kado digital) -------------------- */
.memory-hero { text-align: center; padding-top: 70px; padding-bottom: 30px; position: relative; z-index: 2; }
.memory-hero__badge {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--butter));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; margin: 0 auto 18px; box-shadow: var(--shadow-card);
}
.memory-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 0.74rem; color: var(--coral-dark); margin-bottom: 12px; }
.memory-hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 10px; }
.memory-hero h1 em { font-style: italic; color: var(--coral-dark); }
.memory-hero__meta { color: var(--ink-soft); margin-bottom: 6px; }
.memory-hero__stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* inline-FLEX, bukan inline-block. Ikon hati-nya punya
   `display: block` (dibutuhin tombol suka), dan elemen block di
   dalam inline-block maksa pindah baris -- itu yang bikin chip
   "58 suka" kepotong jadi dua baris. Di konteks flex, display
   block-nya anak diabaikan, jadi sejajar. */
.memory-hero__stat {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--mint); color: var(--coral-dark);
  font-weight: 700; padding: 7px 18px; border-radius: 999px; font-size: 0.88rem;
}
/* Kartu "Simpan & Bagikan Momen Ini" -- gabungan tombol Slideshow,
   Download Instagram, dan Simpan PDF, ditaro sejajar sama QR & Share
   di bagian bawah halaman (bukan lagi di hero). */
.memory-actions-card {
  max-width: 460px;
  margin: 40px auto 0;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.memory-actions-card__buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.memory-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #EFE6DC;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.memory-action-btn:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
  background: var(--blush);
}

/* Dekorasi mengambang -- cuma dirender kalo tipe board-nya gak sensitif
   (liat memory_decor_emojis() di functions.php). Posisinya absolute di
   dalem area hero doang, BUKAN fixed full-viewport, biar aman di HP. */
.memory-decor {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.memory-decor__item {
  position: absolute;
  font-size: 1.8rem;
  opacity: .55;
  animation: memoryDecorFloat 7s ease-in-out infinite;
}
.memory-decor__item--1 { top: 8%;  left: 8%;  animation-delay: 0s; }
.memory-decor__item--2 { top: 18%; left: 85%; animation-delay: 1.2s; font-size: 1.35rem; }
.memory-decor__item--3 { top: 55%; left: 5%;  animation-delay: 2.4s; font-size: 1.5rem; }
.memory-decor__item--4 { top: 65%; left: 90%; animation-delay: .6s; }
@keyframes memoryDecorFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}
@media (max-width: 640px) {
  .memory-decor__item { font-size: 1.35rem; }
}

/* Animasi masuk yang lembut pas kartu/foto keliatan discroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Kartu QR code */
.memory-qr-card {
  max-width: 260px;
  margin: 30px auto 10px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.memory-qr-card__code { display: flex; justify-content: center; margin-bottom: 12px; }
.memory-qr-card__code img { border-radius: var(--radius-sm); }
.memory-qr-card__caption { color: var(--ink-soft); font-size: 0.82rem; margin: 0; }

/* Kartu share sosial media di halaman Memory */
.memory-share-card {
  max-width: 420px;
  margin: 20px auto 10px;
  text-align: center;
  padding-bottom: 50px;
}
.memory-share-card__label {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.memory-share-card__buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.memory-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  border: none;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.memory-share-icon:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.memory-share-icon--whatsapp:hover { background: #25D366; color: #fff; }
.memory-share-icon--facebook:hover { background: #1877F2; color: #fff; }
.memory-share-icon--x:hover { background: #000; color: #fff; }
.memory-share-icon--copy:hover { background: var(--coral); color: #fff; }
.memory-share-icon--copied { background: #25D366 !important; color: #fff !important; }

/* Lightbox foto khusus memory.php (mobile-safe: body di-lock pas kebuka) */
.memory-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  height: 100dvh;
  background: rgba(20, 18, 22, 0.9);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  touch-action: none;
}
.memory-lightbox-overlay.active { display: flex; }
.memory-lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.memory-lightbox-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.memory-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.memory-lightbox-trigger { cursor: zoom-in; }

/* ============================================================
   GAYA HALAMAN MEMORY -- 4 tema alternatif, dipilih per board.
   Strategi: nimpa custom property (--coral, --cream, --font-display,
   dst) yang UDAH dipake di komponen-komponen di atas, jadi banyak
   elemen (tombol, kartu, teks) otomatis ikut ganti warna/font tanpa
   perlu nulis ulang tiap selector. Sisanya baru override manual buat
   flourish spesifik tiap tema (bentuk kartu, dekorasi, dst).
   ============================================================ */

/* -------------------- Tema: Modern (default, dikasih tekstur halus) -------------------- */
body.memory-style-modern {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='%231FA79E' opacity='0.07'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Cpath d='M45 40h6v2h-6v6h-2v-6h-6v-2h6v-6h2z'/%3E%3Ccircle cx='55' cy='10' r='1.2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 10% 8%, rgba(31, 167, 158, 0.16), transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(220, 235, 255, 0.45), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(217, 242, 227, 0.4), transparent 45%);
  background-size: 70px 70px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* -------------------- Tema: Scrapbook -------------------- */
body.memory-style-scrapbook {
  --font-display: 'Caveat', cursive;
  /* Nimpa palet warna kartu jadi cuma nuansa KERTAS doang (krem,
     kraft, ivory, manila) -- sengaja gak warna-warni, biar kesannya
     beneran sobekan kertas macem-macem, bukan kertas origami. */
  --blush: #F2ECDD;
  --blush-deep: #E4D6BC;
  --sky: #EAE0C8;
  --sky-deep: #DACBA4;
  --butter: #F7F1E4;
  --butter-deep: #E9DCBE;
  --mint: #E4D8BC;
  --mint-deep: #D2C09A;
  --lilac: #EFE7D3;
  --lilac-deep: #DECEA8;
  --paper: #FBF8F0;
  background-color: #E8DCC4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%235a4a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'%3E%3Cpath d='M20 28l3 9h9l-7 6 3 9-8-6-8 6 3-9-7-6h9z' fill='%235a4a2e' stroke='none'/%3E%3Cpath d='M100 20c0-5 5-8 9-4 4-4 9-1 9 4 0 7-9 13-9 13s-9-6-9-13z'/%3E%3Cpath d='M40 100q6-9 12 0t12 0'/%3E%3Cpath d='M120 110l5 5m-5 0l5-5' stroke-width='2.5'/%3E%3Ccircle cx='70' cy='135' r='2.2' fill='%235a4a2e' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(120, 100, 60, 0.035) 0px, transparent 2px, transparent 5px),
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.35), transparent 45%);
  background-size: 160px 160px, auto, auto;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed, scroll, scroll;
}
body.memory-style-scrapbook .memory-hero h1 { font-size: clamp(3.2rem, 8vw, 5.2rem); }
body.memory-style-scrapbook .memory-hero__eyebrow { color: #8A6B3D; }
body.memory-style-scrapbook .memory-hero__badge {
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 10px 20px rgba(60, 40, 10, 0.25);
  transform: rotate(-6deg);
}
body.memory-style-scrapbook .note-card,
body.memory-style-scrapbook .polaroid {
  position: relative;
  box-shadow: 0 10px 20px -6px rgba(60, 40, 10, 0.3);
}
body.memory-style-scrapbook .note-card::before,
body.memory-style-scrapbook .note-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 11px;
  background-color: #E8DCC4;
  background-image:
    linear-gradient(135deg, #E8DCC4 25%, transparent 25%),
    linear-gradient(225deg, #E8DCC4 25%, transparent 25%);
  background-size: 14px 18px;
  background-repeat: repeat-x;
}
body.memory-style-scrapbook .note-card::before { top: -1px; background-position: 0 0; }
body.memory-style-scrapbook .note-card::after { bottom: -1px; transform: rotate(180deg); }
body.memory-style-scrapbook .note-card__tape {
  width: 76px; height: 28px;
  background: rgba(255, 241, 181, 0.9);
  border: 1px solid rgba(120, 100, 40, 0.15);
  transform: rotate(-7deg);
  left: 50%; margin-left: -38px;
}
/* Washi tape gantian warna & sudut miring tiap kartu, biar berasa
   ditempel manual satu-satu, gak seragam kayak dicetak mesin. */
body.memory-style-scrapbook .note-card:nth-child(6n+1) .note-card__tape { background: rgba(232, 196, 104, 0.88); transform: rotate(-7deg); }
body.memory-style-scrapbook .note-card:nth-child(6n+2) .note-card__tape { background: rgba(217, 169, 160, 0.88); transform: rotate(5deg); }
body.memory-style-scrapbook .note-card:nth-child(6n+3) .note-card__tape { background: rgba(168, 185, 154, 0.88); transform: rotate(-4deg); }
body.memory-style-scrapbook .note-card:nth-child(6n+4) .note-card__tape { background: rgba(184, 168, 196, 0.88); transform: rotate(6deg); }
body.memory-style-scrapbook .note-card:nth-child(6n+5) .note-card__tape { background: rgba(159, 184, 200, 0.88); transform: rotate(-6deg); }
body.memory-style-scrapbook .note-card:nth-child(6n+6) .note-card__tape { background: rgba(232, 196, 104, 0.88); transform: rotate(4deg); }
body.memory-style-scrapbook .note-card__message { font-size: 1.05rem; line-height: 1.45; }
body.memory-style-scrapbook .polaroid { padding: 14px 14px 40px; }
body.memory-style-scrapbook .memory-qr-card,
body.memory-style-scrapbook .memory-actions-card,
body.memory-style-scrapbook .memory-share-icon,
body.memory-style-scrapbook .form-card,
body.memory-style-scrapbook .board-item { box-shadow: 0 10px 20px -6px rgba(60, 40, 10, 0.25); }

/* Ukuran & sudut sobekan dibikin acak per kartu (rotasi lebih
   ekstrem + skala beda-beda + padding beda), biar kesannya beneran
   sobekan kertas macem-macem ukuran yang ditumpuk asal, bukan kartu
   seragam yang dicetak rapi. */
body.memory-style-scrapbook .note-card:nth-child(7n+1) { transform: rotate(-5deg) scale(1.04); padding: 26px 24px 20px; }
body.memory-style-scrapbook .note-card:nth-child(7n+2) { transform: rotate(4deg) scale(0.93); padding: 16px 16px 14px; }
body.memory-style-scrapbook .note-card:nth-child(7n+3) { transform: rotate(-2deg) scale(1.08); padding: 28px 26px 22px; }
body.memory-style-scrapbook .note-card:nth-child(7n+4) { transform: rotate(6deg) scale(0.96); padding: 18px 18px 16px; }
body.memory-style-scrapbook .note-card:nth-child(7n+5) { transform: rotate(-7deg) scale(1.0); padding: 22px 22px 18px; }
body.memory-style-scrapbook .note-card:nth-child(7n+6) { transform: rotate(3deg) scale(0.9); padding: 15px 15px 13px; }
body.memory-style-scrapbook .note-card:nth-child(7n+7) { transform: rotate(-3deg) scale(1.05); padding: 24px 22px 20px; }
body.memory-style-scrapbook .polaroid:nth-child(5n+1) { transform: rotate(-8deg) scale(1.05); }
body.memory-style-scrapbook .polaroid:nth-child(5n+2) { transform: rotate(6deg) scale(0.92); }
body.memory-style-scrapbook .polaroid:nth-child(5n+3) { transform: rotate(-3deg) scale(1.1); }
body.memory-style-scrapbook .polaroid:nth-child(5n+4) { transform: rotate(7deg) scale(0.95); }
body.memory-style-scrapbook .polaroid:nth-child(5n+5) { transform: rotate(-5deg) scale(1.0); }
body.memory-style-scrapbook .polaroid:hover,
body.memory-style-scrapbook .note-card:hover { transform: rotate(0deg) scale(1.02); z-index: 5; }

/* -------------------- Tema: Editorial Minimalis -------------------- */
body.memory-style-editorial {
  background-color: #FAFAF8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='70'%3E%3Ctext x='0' y='45' font-family='Georgia, serif' font-size='13' letter-spacing='4' fill='%23000000' fill-opacity='0.03'%3EMEMORIES%3C/text%3E%3C/svg%3E");
  background-size: 260px 70px;
  background-repeat: repeat;
  background-attachment: fixed;
}
body.memory-style-editorial .memory-hero { padding-top: 90px; padding-bottom: 44px; }
body.memory-style-editorial .memory-hero__badge { display: none; }
body.memory-style-editorial .memory-hero__eyebrow { letter-spacing: .22em; }
body.memory-style-editorial .memory-hero h1 { font-weight: 400; letter-spacing: -0.01em; }
body.memory-style-editorial .memory-hero h1 em { font-style: normal; font-weight: 600; }
body.memory-style-editorial .memory-hero__stats { margin-top: 20px; }
body.memory-style-editorial .memory-hero__stat { white-space: nowrap; background: transparent; border: 1px solid #DEDAD0; color: var(--ink-soft); }
body.memory-style-editorial .masonry { column-count: 1 !important; max-width: 680px; margin: 0 auto; }
body.memory-style-editorial .note-card {
  background: transparent !important;
  transform: none !important;
  box-shadow: none;
  border-bottom: 1px solid #E5E0D8;
  border-radius: 0;
  padding: 30px 4px;
  margin-bottom: 0;
}
/* Tema Editorial sengaja bersih total -- serat kertas & sudut lipatan
   dimatiin di sini, biar identitas minimalisnya gak rusak. */
body.memory-style-editorial .note-card::before,
body.memory-style-editorial .note-card::after { display: none; }
/* Kartu yang punya foto dibikin 2 kolom ala koran: foto kotak kecil
   di kiri, nama+pesan ucapan sejajar di kanan (bukan foto di atas). */
body.memory-style-editorial .note-card--has-photo {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  align-items: start;
}
body.memory-style-editorial .note-card__tape { display: none; }
body.memory-style-editorial .note-card__message { font-size: 1.05rem; line-height: 1.55; }
body.memory-style-editorial .note-card--has-photo .note-card__message,
body.memory-style-editorial .note-card--has-photo .note-card__from,
body.memory-style-editorial .note-card--has-photo .wish-like-btn {
  grid-column: 2;
}
body.memory-style-editorial .note-card--has-photo .note-card__photo {
  grid-column: 1;
  grid-row: 1 / span 2;
}
body.memory-style-editorial .note-card__photo {
  width: 108px;
  height: 108px;
  object-fit: cover;
  display: block;
  margin: 0 0 16px;
  border: 1.5px solid #2a2a2a;
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter: grayscale(85%) contrast(1.08);
}
body.memory-style-editorial .polaroid-gallery { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 14px; }
body.memory-style-editorial .polaroid {
  transform: none !important;
  box-shadow: none;
  border-radius: 0;
  width: 108px;
  max-width: 108px;
  padding: 0;
  margin: 0;
}
body.memory-style-editorial .polaroid img {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border: 1.5px solid #2a2a2a;
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter: grayscale(85%) contrast(1.08);
}
body.memory-style-editorial .polaroid:hover { transform: none !important; }

/* Tiap tema memory udah punya font khasnya sendiri. Tanda tangannya
   ikut font tema itu, bukan dipaksa Architects Daughter -- kalo
   dipaksa, Scrapbook/Watercolor bakal nabrak dua tulisan tangan beda
   di kartu yang sama. */
body[class*="memory-style-"] { --font-hand: var(--font-display); }

/* -------------------- Tema: Candlelight Memorial -------------------- */
body.memory-style-candlelight {
  --cream: #17151a;
  --paper: #221f26;
  --ink: #EDE6D6;
  --ink-soft: #B8AF9E;
  --ink-faint: #968E7C;
  --blush: #2a2530;
  --sky: #24222b;
  --butter: #2a2620;
  --mint: #202521;
  --lilac: #262230;
  --coral: #C9A227;
  --coral-dark: #A9822E;
  --font-display: 'Cormorant Garamond', serif;
  background-image:
    radial-gradient(circle, rgba(255, 223, 140, 0.22) 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255, 223, 140, 0.13) 1px, transparent 1.6px),
    radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.1), transparent 55%);
  background-size: 90px 90px, 55px 55px, auto;
  background-position: 0 0, 27px 30px, 0 0;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, scroll;
}
body.memory-style-candlelight .memory-hero h1 { font-weight: 500; }
body.memory-style-candlelight .memory-action-btn { border-color: rgba(201, 162, 39, 0.3); }
body.memory-style-candlelight .memory-action-btn:hover { background: rgba(201, 162, 39, 0.12); }
body.memory-style-candlelight .memory-hero__badge {
  box-shadow: 0 0 40px 6px rgba(201, 162, 39, 0.35);
  animation: candleFlicker 3s ease-in-out infinite;
}
@keyframes candleFlicker {
  0%, 100% { box-shadow: 0 0 36px 4px rgba(201, 162, 39, 0.32); }
  50% { box-shadow: 0 0 54px 10px rgba(201, 162, 39, 0.5); }
}
body.memory-style-candlelight .note-card,
body.memory-style-candlelight .polaroid,
body.memory-style-candlelight .memory-qr-card,
body.memory-style-candlelight .memory-actions-card {
  border: 1px solid rgba(201, 162, 39, 0.22);
}
body.memory-style-candlelight .note-card__tape { background: rgba(201, 162, 39, 0.18); border: 1px solid rgba(201, 162, 39, 0.15); }
body.memory-style-candlelight .memory-share-icon { background: var(--paper); }
body.memory-style-candlelight .site-footer__inner { border-top-color: rgba(201, 162, 39, 0.18); }

/* -------------------- Tema: Watercolor Botanical -------------------- */
body.memory-style-watercolor {
  --font-display: 'Dancing Script', cursive;
  /* Nimpa palet kartu jadi lebih pudar/"basah" kayak cat air yang
     nge-blur ke kertas, bukan pastel solid ala tema Modern. */
  --blush: #F3E3EA;
  --blush-deep: #E6C9D6;
  --sky: #E1EBF5;
  --sky-deep: #C9DCEF;
  --butter: #FBF2DC;
  --butter-deep: #F3E3B8;
  --mint: #E1F0E6;
  --mint-deep: #C7E3D0;
  --lilac: #EBE3F5;
  --lilac-deep: #D7C7EC;
  --paper: #FFFDFB;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke-linecap='round' opacity='0.22'%3E%3Cpath d='M20 140q-4-22 18-30q-6 22-18 30z' stroke='%237a9b7e' stroke-width='1.6'/%3E%3Cpath d='M20 140q22-4 22-26' stroke='%237a9b7e' stroke-width='1.2'/%3E%3Cpath d='M130 30q18 6 16 26q-20-4-16-26z' stroke='%23b98fae' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='100' r='3' fill='%23c9a8c0' stroke='none'/%3E%3Ccircle cx='108' cy='96' r='2.4' fill='%23c9a8c0' stroke='none'/%3E%3Ccircle cx='96' cy='92' r='2.4' fill='%23c9a8c0' stroke='none'/%3E%3Cpath d='M60 60q6-14 0-24' stroke='%237a9b7e' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 15% 15%, rgba(234, 224, 255, 0.75), transparent 45%),
    radial-gradient(circle at 85% 12%, rgba(217, 242, 227, 0.65), transparent 45%),
    radial-gradient(circle at 50% 92%, rgba(255, 240, 194, 0.55), transparent 50%);
  background-color: var(--cream);
  background-size: 180px 180px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, scroll, scroll, scroll;
}
body.memory-style-watercolor .memory-hero h1 { font-size: clamp(3.2rem, 7vw, 4.8rem); font-weight: 700; }
body.memory-style-watercolor .memory-hero__badge {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(234, 224, 255, 0.55));
}
body.memory-style-watercolor .note-card { border-radius: 28px; box-shadow: 0 16px 32px -16px rgba(120, 100, 160, 0.35); }
body.memory-style-watercolor .note-card__tape { display: none; }
body.memory-style-watercolor .note-card__message { font-size: 1.15rem; line-height: 1.45; }
body.memory-style-watercolor .polaroid { border-radius: 14px; }
body.memory-style-watercolor .polaroid img { border-radius: var(--radius-sm); }

/* -------------------- Board page -------------------- */
.board-hero { padding-top: 40px; padding-bottom: 20px; text-align: center; }
.board-hero__type { display: inline-block; background: var(--blush); color: var(--coral-dark); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .05em; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; margin-right: 6px; }
.board-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.board-hero p { color: var(--ink-soft); }

.board-toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 40px; }

.link-box { max-width: 620px; margin: 0 auto 30px; background: var(--paper); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-soft); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.link-box input { flex: 1; min-width: 200px; border: none; background: var(--cream); padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 0.88rem; }

.memory-link-box {
  max-width: 620px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, var(--blush), var(--butter));
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
.memory-link-box__label { font-weight: 700; color: var(--coral-dark); margin-bottom: 4px; }
.memory-link-box__hint { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px; }

.add-wish-card { max-width: 560px; margin: 0 auto 90px; padding: 30px 32px; }

.photo-preview { margin-top: 10px; max-width: 200px; border-radius: var(--radius-sm); display: none; }

.empty-state { text-align: center; color: var(--ink-faint); padding: 40px 20px 60px; }

/* -------------------- Dashboard / board list -------------------- */
.board-list { display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin: 0 auto; }
.board-item { padding: 26px 28px; }
.board-item__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.board-item__type { display: inline-block; background: var(--blush); color: var(--coral-dark); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em; padding: 5px 14px; border-radius: 999px; }
.board-item__date { color: var(--ink-faint); font-size: 0.82rem; }
.board-item__title { margin-bottom: 4px; font-size: 1.35rem; }
.board-item__meta { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 16px; }
.board-item__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.board-link-input { flex: 1; min-width: 180px; border: none; background: var(--cream); padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 0.88rem; }
.board-item__summary { margin-top: 18px; border-top: 1px solid #F0EBE2; padding-top: 16px; }
.board-item__summary summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.summary-textarea { width: 100%; min-height: 150px; margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-sm); border: 2px solid #EFE6DC; background: var(--cream); color: var(--ink-soft); font-family: var(--font-body); font-size: 0.88rem; resize: vertical; }

/* -------------------- Admin panel -------------------- */
.admin-wish-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.admin-wish-row { background: var(--cream); border-radius: var(--radius-sm); padding: 14px 16px; }
.admin-wish-row__view { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-wish-row__photo { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.admin-wish-row__text { flex: 1; min-width: 160px; }
.admin-wish-row__text p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.admin-wish-row__actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-wish-row__edit { margin-top: 12px; }

/* -------------------- Reaction / like (stylish) -------------------- */
.wish-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px -2px rgba(20, 60, 55, 0.18), inset 0 0 0 1.5px rgba(31, 167, 158, 0.18);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: box-shadow .2s ease, background .2s ease, transform .12s ease;
}
.wish-like-btn:hover {
  box-shadow: 0 4px 14px -4px rgba(20, 60, 55, 0.28), inset 0 0 0 1.5px rgba(31, 167, 158, 0.35);
  transform: translateY(-1px);
}
.wish-like-btn:active { transform: translateY(0) scale(.94); }
.wish-like-btn.liked {
  background: linear-gradient(135deg, #FFE9EC, #FFF3ED);
  box-shadow: 0 4px 14px -4px rgba(232, 110, 130, 0.35), inset 0 0 0 1.5px rgba(232, 110, 130, 0.4);
  color: #C4536B;
}
.wish-like-icon {
  display: inline-flex;
  align-items: center;
  transform-origin: center;
}
.wish-like-svg { display: block; transition: fill .2s ease; }
/* Pas udah di-like, hatinya keisi penuh. Diatur lewat CSS (bukan
   ganti isi elemen lewat JS), biar SVG-nya gak kerusak. */
.wish-like-btn.liked .wish-like-svg { fill: currentColor; }
.wish-like-count {
  min-width: 12px;
  display: inline-block;
  text-align: left;
}
.wish-like-btn.pop .wish-like-icon {
  animation: wishLikePop .45s cubic-bezier(.17,.89,.32,1.49);
}
@keyframes wishLikePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45) rotate(-8deg); }
  60%  { transform: scale(0.9) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* -------------------- Edit/hapus ucapan sendiri -------------------- */
.own-wish-controls { margin-top: 12px; }
.own-wish-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.own-wish-edit-form { margin-top: 10px; }
.own-wish-edit-form .field { margin-bottom: 12px; }

/* -------------------- Floating "Tulis Ucapan" button -------------------- */
.fab-write {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 10px 24px -8px rgba(14, 124, 116, 0.5);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab-write span { font-size: 1.05rem; }
.fab-write:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(14, 124, 116, 0.6); }
.fab-write:active { transform: translateY(0) scale(.96); }

@media (max-width: 640px) {
  .fab-write {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 13px 18px;
    font-size: 0.88rem;
  }
}

/* -------------------- Highlight kartu ucapan yang baru diposting -------------------- */
.note-card--new {
  animation: noteCardNewGlow 1.8s ease;
}
@keyframes noteCardNewGlow {
  0%   { box-shadow: 0 0 0 4px rgba(31, 167, 158, 0.55), var(--shadow-card); }
  70%  { box-shadow: 0 0 0 4px rgba(31, 167, 158, 0.25), var(--shadow-card); }
  100% { box-shadow: var(--shadow-card); }
}

/* -------------------- Statistik situs (admin-stats.php) -------------------- */
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.stats-summary-card {
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.stats-summary-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--coral-dark);
}
.stats-summary-card__label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 4px;
}
.stats-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.stats-box {
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.stats-box h3 { font-size: 1.05rem; margin-bottom: 14px; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table tr:not(:last-child) { border-bottom: 1px solid #F0EBE2; }
.stats-table td { padding: 8px 4px; font-size: 0.88rem; }
.stats-table__main { color: var(--ink); font-weight: 600; }
.stats-table__num { text-align: right; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.stats-table__truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-table-scroll { overflow-x: auto; max-width: 1100px; margin: 0 auto; }
.stats-table--full { min-width: 780px; background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); overflow: hidden; }
.stats-table--full th {
  text-align: left; padding: 12px 14px; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); border-bottom: 2px solid #F0EBE2;
}
.stats-table--full td { padding: 10px 14px; border-bottom: 1px solid #F5F1EA; }
.stats-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
}
.stats-badge--pageview { background: var(--sky); color: #2B5B7A; }
.stats-badge--click { background: var(--blush); color: var(--coral-dark); }

/* -------------------- Balasan penerima (memory.php) -------------------- */
.recipient-reply-card {
  max-width: 620px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, var(--blush), var(--butter));
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.recipient-reply-card__label {
  font-weight: 700;
  color: var(--coral-dark);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.recipient-reply-card__text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
}
.recipient-reply-form-wrap {
  max-width: 560px;
  margin: 0 auto 30px;
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-soft);
}
.recipient-reply-form-wrap summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}
.recipient-reply-form-wrap textarea { min-height: 90px; }

/* -------------------- Danger zone (hapus akun) -------------------- */
.danger-zone {
  max-width: 560px;
  margin: 0 auto;
  background: #FDF5F5;
  border: 1px solid #F0D8D8;
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.danger-zone summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: #A3403F;
}
.danger-zone__body { margin-top: 14px; }
.danger-zone__body p { font-size: 0.88rem; color: var(--ink-soft); }
.danger-zone__body p strong { color: #A3403F; }

/* -------------------- Loading state tombol -------------------- */
.is-loading {
  opacity: .7;
  pointer-events: none;
  cursor: wait;
}

/* -------------------- Popup kredit (kartu profil) -------------------- */
/* Nama pembuat di baris copyright -- jadi pemicu popup kredit.
   Gayanya nyatu sama kalimatnya, cuma dikasih tebal + garis putus
   tipis biar ketauan bisa diklik. */
.footer-credit-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--blush-deep);
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit-btn:hover { color: var(--coral-dark); border-color: var(--coral); }

.credit-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(30, 28, 24, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.credit-overlay[hidden] { display: none; }

.credit-card {
  position: relative;
  background: var(--paper);
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.credit-card__close {
  position: absolute; top: 8px; right: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff;
  border: none; cursor: pointer; font-size: 20px; line-height: 1;
}
.credit-card__close:hover { background: rgba(0, 0, 0, .55); }

.credit-card__cover {
  height: 104px;
  background: var(--grad-primary);
  background-size: cover;
  background-position: center;
}
.credit-card__avatar {
  display: block;
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--paper);
  margin: -50px auto 0;
  position: relative; z-index: 2;
  box-shadow: var(--shadow-soft);
}
.credit-card__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--blush); color: var(--coral-dark);
  font-family: var(--font-display); font-size: 2rem;
}

.credit-card__body { padding: 14px 26px 24px; text-align: center; }
.credit-card__name {
  font-family: 'Architects Daughter', cursive;
  font-weight: 400; font-size: 1.35rem; margin: 6px 0 2px;
}
.credit-card__tagline { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px; }

.credit-card__socials { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.credit-card__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream); color: var(--ink-soft);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.credit-card__socials a:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }

.credit-card__about { text-align: left; border-top: 1px dashed #E5DFD2; padding-top: 16px; }
.credit-card__about h4 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-family: 'Special Elite', monospace;
  font-weight: 400; margin-bottom: 8px;
}
.credit-card__about p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.65; margin: 0; }

.credit-card__cta { display: inline-block; margin-top: 18px; }
.credit-card__meta {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px dashed #E5DFD2;
  font-family: 'Special Elite', monospace;
  font-size: .68rem; color: var(--ink-faint);
}

@media (max-width: 480px) {
  .credit-card__body { padding: 14px 20px 22px; }
}

/* -------------------- Footer -------------------- */
.site-footer { padding: 30px 0 50px; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-top: 1px solid rgba(74,68,88,.1); padding-top: 22px; }
.site-footer__copy { margin: 0; font-size: 0.82rem; color: var(--ink-soft); font-family: 'Special Elite', monospace; }
.site-footer__links { display: flex; align-items: center; gap: 16px; }
.footer-icon { color: var(--ink-soft); display: inline-flex; transition: color .18s ease; }
.footer-icon:hover { color: var(--coral-dark); }
.footer-link { font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
.footer-link:hover { color: var(--coral-dark); }

/* -------------------- Print (PDF export) -------------------- */
@media print {
  .site-header, .site-footer, .board-toolbar, .link-box, .add-wish-card, .own-wish-controls, .wish-like-btn, .no-print { display: none !important; }
  body { background: #fff; }
  .note-card { box-shadow: none !important; border: 1px solid #eee; transform: none !important; }
  /* Pastiin semua kartu/foto kepake full-opacity pas print, biarpun
     animasi reveal-on-scroll-nya belom sempet "kepicu" karena orang
     langsung print tanpa scroll dulu. */
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
  .polaroid { box-shadow: none !important; border: 1px solid #eee; }
  .memory-lightbox-overlay { display: none !important; }
}

/* -------------------- Responsive tweaks -------------------- */
@media (max-width: 640px) {
  .form-card, .add-wish-card { padding: 26px 22px; }
  .hero { padding-top: 44px; padding-bottom: 30px; }
  .type-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   IKON GARIS SERBAGUNA (ui_icon_svg di functions.php)
   Gantiin emoji yang dulu ditempel langsung di tombol & label.
   Emoji dirender beda-beda tiap OS; SVG identik di mana pun dan
   ikut warna teks otomatis.
   ============================================================ */
.wish-like-svg { flex-shrink: 0; }
.ui-icon {
  /* Ikon inline duduk di baseline kalo gak digeser -- keliatan
     "kejeblos" di sebelah teks. Nilainya relatif ke font-size,
     jadi tetep pas di ukuran teks mana pun. */
  vertical-align: -0.18em;
  flex-shrink: 0;
}
/* Di dalam tombol/flex, geser baseline gak ngaruh & gak perlu */
.btn .ui-icon,
.memory-action-btn .ui-icon,
.sortroom-btn .ui-icon { vertical-align: 0; }

.success-mark {
  color: var(--coral-dark);
  margin-bottom: 10px;
  line-height: 1;
}

/* ============================================================
   AKSESIBILITAS DASAR
   Dua hal yang sebelumnya gak ada sama sekali di file ini.
   ============================================================ */

/* 1. FOKUS KEYBOARD.
   Sebelumnya `focus-visible` cuma muncul SEKALI di seluruh file
   (.note-card__download), sedangkan .field input/textarea/select
   malah nyetel `outline: none` dan cuma ganti warna border pas
   fokus -- perubahan yang nyaris gak keliatan.
   Buat orang yang navigasi pake Tab (termasuk yang pake screen
   reader atau gak bisa pakai mouse), itu artinya mereka gak tau
   lagi ada di elemen mana. Satu aturan, berlaku semua halaman.
   :focus-visible cuma nyala buat keyboard, jadi klik mouse tetep
   bersih tanpa cincin. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--coral-dark);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Input udah punya border tebal sendiri, jadi cincinnya dirapetin
   biar gak dobel-dobel keliatan */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline-offset: 0;
  border-radius: var(--radius-sm);
}

/* 2. HORMATI SETELAN "KURANGI GERAK".
   Ada 4 @keyframes + 20 transition di file ini, satu pun gak pernah
   ngecek preferensi ini. Buat sebagian orang gerakan berlebih bisa
   micu pusing atau mual -- dan ini setelan yang mereka nyalain
   sendiri di OS, jadi tinggal dipatuhi.
   Gerakan gak dimatiin total: dipercepat jadi hampir seketika,
   biar perubahan state (misal hitungan like naik) tetep kebaca. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   BERANDA - hero baru, chip momen, section dua-link
   Semua kelas di sini cuma muncul di index.php.
   ============================================================ */

.hero__cta-note {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* ---- Chip momen ----
   Dulu ini grid 12 kotak yang makan satu layar penuh, jadi
   disembunyiin. Sebagai barisan chip, dia tetap menjawab pertanyaan
   pertama pengunjung ("ini buat apa?") tanpa minta ruang sebesar itu. */
.occasion-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Rata kiri biar segaris sama hero yang sekarang juga rata kiri;
     di layar sempit balik ke tengah karena hero-nya ikut nengah. */
  justify-content: flex-start;
  gap: 8px;
  margin: 4px 0 0;
}
.occasion-chips__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 4px;
}
.occasion-chip {
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 60, 55, .1);
  transition: transform .14s ease, box-shadow .14s ease;
}
.occasion-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.occasion-chip--0 { background: var(--blush); }
.occasion-chip--1 { background: var(--butter); }
.occasion-chip--2 { background: var(--sky); }
.occasion-chip--3 { background: var(--mint); }
.occasion-chip--4 { background: var(--lilac); }

/* ---- Section dua-link ---- */
.two-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 10px;
}
.two-links__card {
  background: var(--paper);
  border: 1px solid rgba(20, 60, 55, .14);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}
.two-links__card--gift {
  background: var(--coral-dark);
  border-color: var(--coral-dark);
  color: #fff;
}
.two-links__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.two-links__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--coral-dark);
  display: flex; align-items: center; justify-content: center;
}
.two-links__card--gift .two-links__icon { background: rgba(255,255,255,.18); color: #fff; }
.two-links__eyebrow {
  margin: 0; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .06em; color: var(--coral-dark);
}
.two-links__card--gift .two-links__eyebrow { color: var(--blush); }
.two-links__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); }
.two-links__desc {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-soft);
}
.two-links__card--gift .two-links__desc { color: rgba(255,255,255,.9); }

/* Slip ucapan yang berdatangan -- dekorasi, bukan data; sengaja
   aria-hidden di markup biar gak dibacain screen reader satu-satu. */
.two-links__incoming {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.two-links__slip { height: 38px; border-radius: 5px; }
.two-links__slip--0 { background: var(--blush); }
.two-links__slip--1 { background: var(--butter); }
.two-links__slip--2 { background: var(--lilac); }
.two-links__slip--3 { background: var(--sky); }
.two-links__slip--4 { background: var(--mint); }
.two-links__slip--empty { border: 1px dashed rgba(20, 60, 55, .2); }
.two-links__note { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--ink-soft); }

.two-links__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--coral-dark);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-align: center;
}

.two-links__preview {
  margin-top: auto;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.two-links__preview-title { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--fs-base); }
.two-links__preview-card {
  background: var(--paper);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.two-links__preview-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink);
}
.two-links__preview-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.two-links__preview-acts span {
  font-size: var(--fs-2xs);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

@media (max-width: 980px) {
  .occasion-chips { justify-content: center; }
}
@media (max-width: 640px) {
  .two-links { grid-template-columns: 1fr; }
  /* Panahnya diputar ke bawah pas kartunya ditumpuk, biar arah
     alurnya tetap kebaca. */
  .two-links__bridge { flex-direction: row; padding: 16px 0; }
  .two-links__bridge svg { transform: rotate(90deg); }
}

/* ---- Hero dua kolom (gantiin bingkai kartu pos + perangko) ----
   Bingkai, perangko SVG, dan cap pos dicabut dari hero: semuanya
   memakan sepertiga atas halaman buat dekorasi, sementara hal yang
   paling meyakinkan -- ucapan asli dari orang asli -- kedorong ke
   bawah. Sekarang kartunya yang jadi isi hero.
   Identitas kertas-pos-nya gak hilang: masih ada di tiap kartu
   (warna pastel, selotip, sudut kelipat) dan di ikon situs. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 52px;
  align-items: center;
  text-align: left;
  /* Vertikal pakai longhand, JANGAN shorthand.
     Elemen ini juga punya kelas .wrap yang ngasih padding samping
     24px. Begitu ditulis `padding: 54px 0 40px`, angka 0 di tengah
     ikut menimpa padding samping jadi nol -- di desktop gak kelihatan
     karena max-width masih nyisain ruang, tapi di HP teksnya nempel
     tepi layar. Pola yang sama dulu kena juga di .hero, .board-hero,
     .form-page, dan .memory-hero. */
  padding-top: 54px;
  padding-bottom: 40px;
}
.hero-split__text { max-width: 36em; }
.hero-split .hero__eyebrow { margin-bottom: 18px; }
.hero-split h1 { margin-bottom: .42em; }
.hero-split .lead { margin: 0 0 26px; max-width: 46ch; }
.hero-split .hero__cta {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* .hero__cta dasarnya nengah; hero ini rata kiri */
  gap: 14px;
  flex-wrap: wrap;
}
.hero-split .hero__cta-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.hero__login-line { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.hero__login-line a { color: var(--coral-dark); font-weight: 700; }

/* Tumpukan kartu. Posisinya diatur per kartu, bukan ditumpuk absolut,
   biar pas layar sempit dia rontok jadi satu kolom tanpa aturan baru. */
/* padding kecil di wadah buat nampung sudut kartu yang nongol gara-gara
   rotasi -- tanpa ini kartu yang digeser ke kanan ketabrak tepi kolom. */
.hero-split__cards { display: flex; flex-direction: column; gap: 14px; padding: 8px 8px 0; }
.hero-card {
  position: relative;
  background: var(--blush);
  border: 1px solid rgba(20, 60, 55, .12);
  border-radius: 14px 5px 0 6px / 6px 15px 0 14px;
  padding: 20px 20px 16px;
  box-shadow: var(--shadow-card);
}
.hero-card--0 { transform: rotate(-2.2deg); margin-right: 30px; }
.hero-card--1 { transform: rotate(1.6deg); margin-left: 28px; margin-right: 2px; background: var(--butter); }
.hero-card--2 { transform: rotate(-1deg); margin-left: 8px; margin-right: 18px; background: var(--lilac); }
.hero-card__tape {
  position: absolute;
  top: -10px; left: 34px;
  width: 54px; height: 20px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(74, 68, 88, .07);
  transform: rotate(-5deg);
}
.hero-card--1 .hero-card__tape { left: auto; right: 42px; transform: rotate(4deg); }
.hero-card--2 .hero-card__tape { display: none; }
.hero-card__message {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
}
.hero-card__from {
  margin: 0;
  font-family: var(--font-hand);
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.hero-card__from::before { content: "- "; }

.hero-gift-note {
  background: var(--paper);
  border: 1px solid rgba(20, 60, 55, .14);
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  box-shadow: var(--shadow-lift);
  margin-top: 4px;
}
.hero-gift-note__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--coral-dark);
}
.hero-gift-note__desc { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; padding-top: 38px; }
  .hero-split__text { max-width: none; }
  .hero-card--0, .hero-card--1, .hero-card--2 { margin-left: 0; margin-right: 0; }
  .hero-split__cards { padding-left: 0; padding-right: 0; }
}
.hero-chips { padding-bottom: 8px; }

/* ============================================================
   PEMILIH TEMA HALAMAN KENANGAN (create-board.php)
   Dulu ini <select> berisi lima nama. Perbedaan kelima gaya itu
   MURNI visual -- warna kertas, jenis huruf, suasana -- jadi nama
   "Editorial Minimalis" gak memberi tahu apa pun sebelum dilihat.
   Tiap pilihan sekarang menggambarkan dirinya sendiri.
   ============================================================ */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
/* Flex kolom + nama yang memanjang: nama tema ada yang dua baris
   ("Candlelight Memorial"), jadi kotak nama harus ikut memanjang
   biar dasar kartunya rata.
   Selektornya SENGAJA diawali .theme-picker: kartunya itu <label>
   di dalam .field, dan `.field label { display: block }` lebih
   spesifik daripada `.theme-opt` sendirian -- tanpa ini display:flex
   diam-diam diabaikan dan nama tema yang satu baris kotaknya pendek
   sendiri. */
.theme-picker .theme-opt {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; height: 100%;
}
/* Radio-nya disembunyiin dari mata TAPI tetap bisa di-Tab dan kebaca
   screen reader -- bukan display:none, yang bikin dia hilang total
   dari urutan fokus. */
.theme-opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.theme-opt__preview {
  display: block;
  height: 88px;
  padding: 11px 11px 0;
  border: 2px solid #EFE6DC;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}
.theme-opt__name {
  display: block;
  padding: 9px 11px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  border: 2px solid #EFE6DC;
  border-top: 1px solid #EFE6DC;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--paper);
  flex: 1;
}
.theme-opt input:checked ~ .theme-opt__preview,
.theme-opt input:checked ~ .theme-opt__name {
  border-color: var(--coral-dark);
}
.theme-opt input:checked ~ .theme-opt__name { color: var(--coral-dark); }
.theme-opt input:focus-visible ~ .theme-opt__preview {
  outline: 3px solid var(--coral-dark);
  outline-offset: 2px;
}

/* Kartu mini di dalam tiap pratinjau */
.theme-opt__card { display: block; padding: 9px 10px; }
.theme-opt__line { display: block; height: 5px; border-radius: 2px; margin-bottom: 5px; }
.theme-opt__line--1 { width: 100%; }
.theme-opt__line--2 { width: 72%; }
.theme-opt__sign { display: block; height: 5px; width: 42%; border-radius: 2px; margin-top: 8px; }

/* -- Modern: kertas pastel, sudut asimetris -- */
.theme-opt--modern .theme-opt__preview { background: var(--cream); }
.theme-opt--modern .theme-opt__card {
  background: var(--blush); border-radius: 8px 3px 0 4px; transform: rotate(-2deg);
}
.theme-opt--modern .theme-opt__line { background: rgba(20,60,55,.3); }
.theme-opt--modern .theme-opt__sign { background: rgba(20,60,55,.18); }

/* -- Scrapbook: kertas krem, agak miring, bergaris tepi -- */
.theme-opt--scrapbook .theme-opt__preview { background: #F6EEE2; }
.theme-opt--scrapbook .theme-opt__card {
  background: #FFF6E4; border: 1px solid #E8D9BE; border-radius: 3px; transform: rotate(3deg);
}
.theme-opt--scrapbook .theme-opt__line { background: rgba(74,63,46,.32); }
.theme-opt--scrapbook .theme-opt__sign { background: rgba(138,122,94,.4); }

/* -- Editorial: putih bersih, garis rule tegas, tanpa miring -- */
.theme-opt--editorial .theme-opt__preview { background: #FFFFFF; }
.theme-opt--editorial .theme-opt__card {
  background: transparent; border-top: 2px solid #2B2B2B; border-bottom: 1px solid #D8D4CC;
  border-radius: 0; padding: 9px 2px;
}
.theme-opt--editorial .theme-opt__line { background: rgba(31,31,31,.5); height: 4px; }
.theme-opt--editorial .theme-opt__sign { background: rgba(107,107,107,.55); height: 4px; }

/* -- Candlelight: latar gelap, aksen emas -- */
.theme-opt--candlelight .theme-opt__preview { background: #17151A; }
.theme-opt--candlelight .theme-opt__card { background: #221F26; border-radius: 4px; }
.theme-opt--candlelight .theme-opt__line { background: rgba(237,230,214,.55); }
.theme-opt--candlelight .theme-opt__sign { background: #C9A227; }

/* -- Watercolor: ungu lembut, sudut bulat besar -- */
.theme-opt--watercolor .theme-opt__preview { background: #F7F2FB; }
.theme-opt--watercolor .theme-opt__card {
  background: #FFFFFF; border-radius: 13px; box-shadow: 0 8px 16px -10px rgba(120,100,160,.5);
}
.theme-opt--watercolor .theme-opt__line { background: rgba(74,63,85,.35); }
.theme-opt--watercolor .theme-opt__sign { background: rgba(142,122,168,.6); }