/* ucapan.crazyartzone.com - layout + card designs. Ad slots are left alone. */
:root { --ink:#24212e; --muted:#6f6a7c; --line:#ece8f2; --bg:#fbf8ff; --card:#fff; --acc:#e0487f; --acc2:#6a5cff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 'Quicksand', system-ui, sans-serif; font-weight:500;
	background-image: radial-gradient(900px 420px at 90% -10%, rgba(224,72,127,.10), transparent 60%), radial-gradient(800px 380px at -10% 0%, rgba(106,92,255,.10), transparent 60%); }
a { color:var(--acc); text-decoration:none; } a:hover { color:var(--acc2); }
h1, h2, h3 { line-height:1.25; font-weight:700; }
h1 { font-size:clamp(1.6rem, 3.6vw, 2.3rem); margin:.2em 0 .3em; }
.top { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(36,33,46,.06); }
.top .in { max-width:1180px; margin:0 auto; padding:8px 14px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.top .logo { font-weight:700; color:var(--ink); margin-right:10px; font-size:17px; }
.top .logo b { color:var(--acc); }
.top nav { display:flex; gap:4px; flex-wrap:wrap; }
.top nav a { padding:6px 12px; border-radius:999px; color:var(--ink); font-weight:600; font-size:14px; }
.top nav a:hover, .top nav a.on { background:linear-gradient(135deg, var(--acc), var(--acc2)); color:#fff; }
.wrap { max-width:1180px; margin:0 auto; padding:14px; }
.lead { color:var(--muted); max-width:820px; }
.adbox { margin:14px 0; min-height:20px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:30px 14px 60px; }

/* home: occasion tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin:18px 0; }
.tile { display:block; background:var(--card); border-radius:20px; padding:18px; box-shadow:0 8px 26px rgba(36,33,46,.07); color:var(--ink) !important; transition:transform .15s; }
.tile:hover { transform:translateY(-3px); }
.tile .em { font-size:34px; } .tile b { display:block; font-size:18px; margin:4px 0; } .tile span { color:var(--muted); font-size:14px; }

/* maker: form + card side by side */
.maker { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 560px); gap:22px; align-items:start; margin:10px 0 20px; }
@media (max-width:900px) { .maker { grid-template-columns:1fr; } .maker .preview { order:-1; } }
.panel { background:var(--card); border-radius:20px; padding:16px 18px; box-shadow:0 8px 26px rgba(36,33,46,.06); }
.panel label { display:block; font-weight:700; font-size:14px; margin:10px 0 4px; }
.panel input[type=text], .panel textarea, .panel select { width:100%; font:inherit; font-weight:500; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.panel textarea { min-height:96px; resize:vertical; }
.panel input:focus, .panel textarea:focus, .panel select:focus { outline:none; border-color:var(--acc2); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dpick { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.dpick button { font:inherit; font-size:12px; font-weight:700; padding:0; border:2px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; color:var(--ink); }
.dpick button i { display:block; height:46px; }
.dpick button span { display:block; padding:4px 2px; }
.dpick button.on { border-color:var(--acc2); box-shadow:0 0 0 3px rgba(106,92,255,.2); }
.btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.btn { font:inherit; font-weight:700; border:0; border-radius:999px; padding:11px 18px; cursor:pointer; background:linear-gradient(135deg, var(--acc), var(--acc2)); color:#fff !important; display:inline-flex; gap:6px; align-items:center; }
.btn.wa { background:#25d366; } .btn.ghost { background:#fff; color:var(--ink) !important; border:2px solid var(--line); }
.btn[disabled] { opacity:.6; }
.hint { font-size:13px; color:var(--muted); }
.gotcard { background:#fff7e6; border:1px solid #ffe2a8; border-radius:16px; padding:12px 14px; margin-bottom:12px; }

/* wishes list */
.wishes { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; margin:12px 0 24px; padding:0; list-style:none; }
.wishes li { background:var(--card); border-radius:16px; padding:14px 16px 10px; box-shadow:0 6px 20px rgba(36,33,46,.05); display:flex; flex-direction:column; gap:8px; }
.wishes li p { margin:0; }
.wishes li .acts { display:flex; gap:8px; justify-content:flex-end; }
.wishes li button { font:inherit; font-size:13px; font-weight:700; border:0; background:#f3f0fa; color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer; }
.wishes li button:hover { background:var(--acc2); color:#fff; }
.count { display:inline-block; background:#fff; border-radius:16px; padding:8px 14px; box-shadow:0 6px 20px rgba(36,33,46,.06); margin:4px 0 10px; font-weight:700; }
.toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-weight:700; opacity:0; transition:opacity .2s; pointer-events:none; z-index:99; }
.toast.show { opacity:1; }

/* ================= the card (square, made into a PNG by html2canvas) ================= */
.card { position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden; border-radius:22px; box-shadow:0 18px 50px rgba(36,33,46,.16);
	background:var(--c-bg); color:var(--c-ink); container-type:inline-size; }
.card .deco { position:absolute; color:var(--c-deco); pointer-events:none; }
.card .deco svg { width:100%; height:100%; display:block; }
.deco.tr { top:2.5%; right:2.5%; width:17%; } .deco.tl { top:2.5%; left:2.5%; width:17%; }
.deco.tr2 { top:2%; right:4%; width:14%; } .deco.bl { bottom:5%; left:2.5%; width:15%; } .deco.br { bottom:5%; right:2.5%; width:15%; }
.deco.bg { inset:0; width:100%; height:100%; opacity:.22; } .deco.bg2 { inset:0; width:100%; height:100%; opacity:.22; transform:rotate(180deg); }
.card .c-in { position:absolute; top:12%; bottom:9%; left:10%; right:10%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.6cqw; overflow:hidden; }
.c-kepada { font-size:3.4cqw; font-weight:700; opacity:.85; letter-spacing:.04em; }
.c-title { font-family:var(--c-tfont, 'Great Vibes'), cursive; font-size:min(var(--c-tsize, 11cqw), calc(150cqw / var(--tlen, 14))); line-height:1.1; color:var(--c-title); white-space:nowrap; }
.c-sub { font-size:3.6cqw; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--c-sub, inherit); }
.c-line { font-family:var(--c-tfont, 'Great Vibes'), cursive; font-size:5.4cqw; color:var(--c-title); }
.c-msg { font-size:var(--c-msize, 3.9cqw); line-height:1.55; max-width:86%; }
.c-dari { font-size:3.3cqw; margin-top:.6cqw; line-height:1.3; } .c-dari b { display:block; font-size:4.8cqw; font-family:var(--c-nfont, 'Quicksand'), sans-serif; color:var(--c-title); }
.c-mark { position:absolute; bottom:2.6%; left:0; right:0; text-align:center; font-size:2.3cqw; opacity:.55; letter-spacing:.05em; }

/* Raya */
.d-raya-hijau   { --c-bg:radial-gradient(circle at 30% 20%, #1f7a55, #0e4a36 70%); --c-ink:#f5f1e3; --c-title:#f2cf6b; --c-deco:#f2cf6b; --c-tfont:'Great Vibes'; }
.d-raya-ketupat { --c-bg:linear-gradient(160deg, #fffaf0, #f3ecd6); --c-ink:#3b3221; --c-title:#2f7a4f; --c-deco:#3f9a63; --c-sub:#b58a2e; --c-tfont:'Dancing Script'; }
.d-raya-pastel  { --c-bg:linear-gradient(140deg, #ffe9f1, #e9f3ff 60%, #eafbf2); --c-ink:#3a3346; --c-title:#c2477e; --c-deco:#9d8ce6; --c-tfont:'Great Vibes'; }
.d-raya-malam   { --c-bg:linear-gradient(170deg, #1c1b4b, #3a2a6e 60%, #6b3d7a); --c-ink:#efeaff; --c-title:#ffd98a; --c-deco:#ffd98a; --c-tfont:'Great Vibes'; }
/* Ramadan */
.d-ram-lantera  { --c-bg:linear-gradient(180deg, #2b1a4a, #5a2e5c); --c-ink:#fbeedd; --c-title:#ffc96b; --c-deco:#ffb547; --c-tfont:'Amiri'; --c-tsize:10cqw; }
.d-ram-biru     { --c-bg:linear-gradient(160deg, #0f3b5f, #1d6f8c 70%, #2a9aa1); --c-ink:#eaf7fb; --c-title:#fff3c4; --c-deco:#bfe8f0; --c-tfont:'Great Vibes'; }
.d-ram-emas     { --c-bg:linear-gradient(150deg, #fffaf0, #f6e7c1); --c-ink:#3e321c; --c-title:#a8781e; --c-deco:#c79a3a; --c-tfont:'Amiri'; --c-tsize:10cqw; }
/* Birthday */
.d-bday-belon   { --c-bg:linear-gradient(160deg, #fff6fb, #f1efff); --c-ink:#33304a; --c-title:#e0487f; --c-deco:#6a5cff; --c-tfont:'Pacifico'; --c-tsize:9cqw; }
.d-bday-konfeti { --c-bg:#ffffff; --c-ink:#2b2840; --c-title:#6a5cff; --c-deco:#ff8fb1; --c-tfont:'Pacifico'; --c-tsize:9cqw; }
.d-bday-pastel  { --c-bg:linear-gradient(140deg, #fff1d6, #ffd9e6 55%, #dff4ff); --c-ink:#3b3348; --c-title:#d4537e; --c-deco:#b07ad6; --c-tfont:'Dancing Script'; }
/* Aqiqah */
.d-aq-awan      { --c-bg:linear-gradient(180deg, #e9f4ff, #fdfbff); --c-ink:#3a4660; --c-title:#5b7fd6; --c-deco:#c9dcff; --c-tfont:'Dancing Script'; --st:#ffc94d; }
.d-aq-pink      { --c-bg:linear-gradient(180deg, #ffeef5, #fffafc); --c-ink:#5a3a4a; --c-title:#e06a9a; --c-deco:#ffd1e3; --c-tfont:'Dancing Script'; --fc:#ffd36b; --leaf:#9ccfa8; }
.d-aq-biru      { --c-bg:linear-gradient(180deg, #e3f3ff, #f7fcff); --c-ink:#2f4560; --c-title:#2f7fc8; --c-deco:#b9dcf7; --c-tfont:'Dancing Script'; }
/* Wedding */
.d-kahwin-bunga { --c-bg:linear-gradient(150deg, #fff7f5, #fde8ee); --c-ink:#5a3b45; --c-title:#b8476f; --c-deco:#f2a7bf; --c-tfont:'Great Vibes'; --fc:#ffe08a; --leaf:#9cc5a1; }
.d-kahwin-emas  { --c-bg:radial-gradient(circle at 50% 30%, #fffdf6, #f3e6c6); --c-ink:#43361c; --c-title:#a8781e; --c-deco:#c9a24a; --c-tfont:'Great Vibes'; }
.d-kahwin-sage  { --c-bg:linear-gradient(160deg, #f4f7f1, #e1ebdc); --c-ink:#33402f; --c-title:#5a7d5a; --c-deco:#a9c4a1; --c-tfont:'Great Vibes'; --fc:#fff1c9; --leaf:#7fa57f; }
/* Congratulations */
.d-tahniah-emas { --c-bg:linear-gradient(160deg, #1d1b33, #33285e); --c-ink:#f3efff; --c-title:#ffd36b; --c-deco:#ffd36b; --c-tfont:'Pacifico'; --c-tsize:10cqw; }
.d-tahniah-biru { --c-bg:linear-gradient(150deg, #eaf6ff, #f3f0ff); --c-ink:#25304a; --c-title:#3d6fe0; --c-deco:#6a5cff; --c-tfont:'Pacifico'; --c-tsize:10cqw; }

/* Mother's / Father's / Teachers' Day, condolences */
.d-ibu-bunga    { --c-bg:linear-gradient(160deg, #fff4f7, #ffe1ea 60%, #fff6e9); --c-ink:#5a3442; --c-title:#c94b7b; --c-deco:#f08fb2; --c-tfont:'Great Vibes'; --fc:#ffd36b; --leaf:#9cc5a1; }
.d-bapa-biru    { --c-bg:linear-gradient(160deg, #13294b, #24467a); --c-ink:#eaf1ff; --c-title:#ffd58a; --c-deco:#9fb9e8; --c-tfont:'Dancing Script'; }
.d-bapa-kayu    { --c-bg:linear-gradient(160deg, #f7efe3, #ead6bb); --c-ink:#4a3523; --c-title:#8a5a2b; --c-deco:#7f9c6b; --c-tfont:'Dancing Script'; }
.d-guru-papan   { --c-bg:linear-gradient(160deg, #234a3a, #2f5e48); --c-ink:#f1f5ee; --c-title:#fff7c2; --c-deco:#f3e9c6; --c-tfont:'Dancing Script'; --er:#ff8fb1; }
.d-guru-kuning  { --c-bg:linear-gradient(160deg, #fffbe6, #ffeeb0); --c-ink:#3d3420; --c-title:#c27c0e; --c-deco:#f2b01e; --c-tfont:'Pacifico'; --c-tsize:9cqw; }
.d-takziah-tenang { --c-bg:linear-gradient(170deg, #eef3ef, #dce6df); --c-ink:#2f3b34; --c-title:#3f5f4d; --c-deco:#a8bfae; --c-tfont:'Amiri'; --c-tsize:10cqw; }
.d-takziah-putih  { --c-bg:#ffffff; --c-ink:#33363d; --c-title:#4a4f5a; --c-deco:#c9ccd3; --c-tfont:'Amiri'; --c-tsize:10cqw; box-shadow:inset 0 0 0 1.4cqw #f2f3f5; }

/* small design swatches in the picker */
.sw-ibu-bunga { background:linear-gradient(160deg, #fff4f7, #f8bfd3); } .sw-bapa-biru { background:linear-gradient(160deg, #13294b, #24467a); }
.sw-bapa-kayu { background:linear-gradient(160deg, #f7efe3, #d9bc94); } .sw-guru-papan { background:linear-gradient(160deg, #234a3a, #2f5e48); }
.sw-guru-kuning { background:linear-gradient(160deg, #fffbe6, #ffd76a); } .sw-takziah-tenang { background:linear-gradient(170deg, #eef3ef, #c9d8cd); }
.sw-takziah-putih { background:#fff; box-shadow:inset 0 0 0 3px #e7e8ec; }
.sw-raya-hijau { background:radial-gradient(circle at 30% 20%, #1f7a55, #0e4a36); } .sw-raya-ketupat { background:linear-gradient(160deg, #fffaf0, #e6dcbd); }
.sw-raya-pastel { background:linear-gradient(140deg, #ffe9f1, #e9f3ff); } .sw-raya-malam { background:linear-gradient(170deg, #1c1b4b, #6b3d7a); }
.sw-ram-lantera { background:linear-gradient(180deg, #2b1a4a, #5a2e5c); } .sw-ram-biru { background:linear-gradient(160deg, #0f3b5f, #2a9aa1); }
.sw-ram-emas { background:linear-gradient(150deg, #fffaf0, #e8d29a); } .sw-bday-belon { background:linear-gradient(160deg, #ffd6e6, #d9d4ff); }
.sw-bday-konfeti { background:repeating-linear-gradient(45deg, #fff 0 8px, #ffe1ec 8px 12px); } .sw-bday-pastel { background:linear-gradient(140deg, #fff1d6, #ffd9e6, #dff4ff); }
.sw-aq-awan { background:linear-gradient(180deg, #cfe5ff, #fdfbff); } .sw-aq-pink { background:linear-gradient(180deg, #ffd6e6, #fffafc); }
.sw-aq-biru { background:linear-gradient(180deg, #c6e4fb, #f7fcff); } .sw-kahwin-bunga { background:linear-gradient(150deg, #fff7f5, #f7c9d8); }
.sw-kahwin-emas { background:radial-gradient(circle at 50% 30%, #fffdf6, #e5cf96); } .sw-kahwin-sage { background:linear-gradient(160deg, #f4f7f1, #c8dbbf); }
.sw-tahniah-emas { background:linear-gradient(160deg, #1d1b33, #33285e); } .sw-tahniah-biru { background:linear-gradient(150deg, #d4ebff, #e6e0ff); }