/* ==========================================================
   ADEGAN PRATINJAU KATALOG — miniatur bergerak tiap desain
   (menunjukkan bahwa tiap desain adalah PENGALAMAN berbeda, bukan sekadar warna)
   ========================================================== */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene .sc { position: absolute; display: block; }
.scene .sc .art { display: block; width: 100%; height: auto; }
@keyframes scNaik { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-300px) rotate(5deg); } }
@keyframes scTurun { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(300px) rotate(300deg); opacity: .7; } }
@keyframes scMelayang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes scKelip { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.1; } }
@keyframes scAyun { from { rotate: -9deg; } to { rotate: 9deg; } }
@keyframes scGeser { from { transform: translateX(-40%); } to { transform: translateX(520%); } }
@keyframes scPutar { to { transform: rotate(360deg); } }
@keyframes scZoom { from { transform: scale(1); } to { transform: scale(1.16) translate(-2%, -1%); } }
@keyframes scLompat { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-16px) scale(.96, 1.06); } 80% { transform: translateY(0) scale(1.04, .94); } }
@keyframes scKilau { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes scIsi { 0%, 12% { opacity: .2; transform: scale(.7); } 22%, 100% { opacity: 1; transform: scale(1); } }
@keyframes scJatuh { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(-120px, 90px); } }

/* Cinematic */
.scene-cinematic { background: radial-gradient(ellipse at 50% 40%, #3A1428, #0A0810 75%); }
.scene-cinematic .sc-foto { left: 20%; right: 20%; top: 14%; bottom: 14%; background: linear-gradient(140deg, #6E2F46, #C98B6B 55%, #F0C98A); animation: scZoom 9s ease-in-out infinite alternate; box-shadow: 0 10px 24px #000a; }
.scene-cinematic .sc-judul { left: 0; right: 0; bottom: 20%; text-align: center; font: italic 600 1.15rem 'Cormorant Garamond', Georgia, serif; color: #F4E8D3; text-shadow: 0 2px 10px #000; }
.scene-cinematic .sc-bokeh { border-radius: 50%; background: rgba(227, 190, 123, .22); animation: scNaik 12s linear infinite; bottom: -20px; } .scene-cinematic .b1 { left: 12%; width: 28px; height: 28px; } .scene-cinematic .b2 { left: 70%; width: 18px; height: 18px; animation-delay: -4s; } .scene-cinematic .b3 { left: 45%; width: 36px; height: 36px; animation-delay: -8s; }
.scene-cinematic .sc-bar { left: 0; right: 0; height: 9%; background: #000; z-index: 2; } .scene-cinematic .atas { top: 0; } .scene-cinematic .bawah { bottom: 0; }
/* Joyful */
.scene-joyful { background: linear-gradient(165deg, #FFF3B0, #FFE0E8 55%, #FFD0CC); }
.scene-joyful .sc-balon { width: 15%; bottom: -34%; animation: scNaik 6.5s linear infinite; } .scene-joyful .x1 { left: 12%; } .scene-joyful .x2 { left: 78%; animation-delay: -2.2s; } .scene-joyful .x3 { left: 45%; animation-delay: -4.2s; }
.scene-joyful .sc-doodle { animation: scAyun 1.6s ease-in-out infinite alternate; } .scene-joyful .d1 { right: 8%; top: 10%; width: 11%; color: #FF6B6B; } .scene-joyful .d2 { left: 6%; top: 18%; width: 22%; } .scene-joyful .d3 { left: 68%; bottom: 14%; width: 9%; animation-delay: -.8s; }
.scene-joyful .sc-judul-j { left: 0; right: 0; top: 36%; text-align: center; font: 700 2.2rem 'Fredoka', system-ui, sans-serif; color: #E0457B; text-shadow: 3px 3px 0 #fff; animation: scLompat 2s ease-in-out infinite; }
/* Graduation */
.scene-graduation { background: radial-gradient(ellipse at 50% -10%, #23407A, #0F1F3D 60%, #091430); }
.scene-graduation::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(212, 175, 85, .6); z-index: 2; pointer-events: none; } .scene-graduation::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(212, 175, 85, .25); pointer-events: none; }
.scene-graduation .sc-topi { left: 50%; top: 14%; width: 26%; margin-left: -13%; animation: scMelayang 3s ease-in-out infinite; } .scene-graduation .sc-laurel { left: 50%; width: 52%; margin-left: -26%; top: 36%; opacity: .85; }
.scene-graduation .sc-emas { left: 0; right: 0; top: 52%; text-align: center; font: 700 1.5rem 'Cormorant Garamond', Georgia, serif; font-style: italic; background: linear-gradient(100deg, #8C6A1E, #F6E3A1 30%, #C9A24B 50%, #F6E3A1 70%, #8C6A1E); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: scKilau 5s linear infinite; }
.scene-graduation .sc-kilau { width: 6%; animation: scKelip 2.4s ease-in-out infinite; } .scene-graduation .k1 { left: 18%; top: 28%; } .scene-graduation .k2 { right: 16%; top: 60%; animation-delay: -1.2s; }
.scene-graduation .sc-garis-edu { left: 20%; right: 20%; bottom: 13%; display: flex; justify-content: space-between; } .scene-graduation .sc-garis-edu i { width: 10px; height: 10px; border-radius: 50%; background: #D4AF55; animation: scIsi 5s ease infinite; } .scene-graduation .sc-garis-edu i:nth-child(2) { animation-delay: .6s; } .scene-graduation .sc-garis-edu i:nth-child(3) { animation-delay: 1.2s; } .scene-graduation .sc-garis-edu i:nth-child(4) { animation-delay: 1.8s; } .scene-graduation .sc-garis-edu i:nth-child(5) { animation-delay: 2.4s; }
/* Mama */
.scene-mama { background: linear-gradient(180deg, #FFF8EE, #F8E4DB); }
.scene-mama .sc-bunga { width: 26%; animation: scAyun 4s ease-in-out infinite alternate; } .scene-mama .a { left: -6%; top: -8%; } .scene-mama .b { right: -6%; bottom: -8%; animation-delay: -2s; }
.scene-mama .sc-tulis { left: 0; right: 0; top: 36%; text-align: center; font: 700 2.3rem 'Caveat', 'Segoe Script', cursive; color: #A65F5B; }
.scene-mama .sc-kelopak { width: 5%; top: -10%; animation: scTurun 7s linear infinite; } .scene-mama .p1 { left: 26%; } .scene-mama .p2 { left: 52%; animation-delay: -2.4s; } .scene-mama .p3 { left: 74%; animation-delay: -4.6s; }
.scene-mama .sc-cangkir { left: 8%; bottom: 9%; width: 12%; color: #C98C88; }
/* Garden */
.scene-garden { background: linear-gradient(180deg, #FFF6C9, #E4F5D1 45%, #B9E0A8); }
.scene-garden .sc-sinar { left: 50%; top: -80%; width: 260%; height: 260%; margin-left: -130%; background: repeating-conic-gradient(rgba(255, 244, 170, .5) 0 7deg, transparent 7deg 22deg); animation: scPutar 90s linear infinite; mask-image: radial-gradient(circle, #000 5%, transparent 58%); -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 58%); }
.scene-garden .sc-daun { width: 20%; } .scene-garden .l1 { left: -3%; top: 4%; } .scene-garden .l2 { right: -3%; top: 12%; transform: scaleX(-1); }
.scene-garden .sc-kupu { left: 0; top: 38%; width: 13%; animation: scGeser 7s linear infinite; } .scene-garden .sc-kupu .art { animation: scMelayang 1.2s ease-in-out infinite; }
.scene-garden .sc-bunga-g { width: 17%; bottom: -4%; animation: scAyun 3.4s ease-in-out infinite alternate; transform-origin: 50% 100%; } .scene-garden .g1 { left: 12%; } .scene-garden .g2 { left: 42%; animation-delay: -1s; } .scene-garden .g3 { left: 72%; animation-delay: -2s; }
/* Kids */
.scene-kids { background: linear-gradient(180deg, #BDE5FF, #E4F5FF 50%, #FFF1BE); }
.scene-kids .sc-mt { right: 4%; top: 6%; width: 26%; } .scene-kids .sc-mt .sinar-m { transform-origin: 50px 50px; animation: scPutar 12s linear infinite; }
.scene-kids .sc-awan { width: 24%; animation: scGeser 14s linear infinite; } .scene-kids .a1 { top: 10%; left: -10%; } .scene-kids .a2 { top: 40%; left: -10%; animation-delay: -7s; width: 18%; }
.scene-kids .sc-beruang { left: 50%; bottom: 6%; width: 38%; margin-left: -19%; animation: scLompat 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
/* Baby */
.scene-baby { background: linear-gradient(180deg, #D9E9FF, #EEF3FF 50%, #FFE9EF); }
.scene-baby .sc-bulan-b { left: 8%; top: 10%; width: 17%; animation: scMelayang 4s ease-in-out infinite; }
.scene-baby .sc-mobil { left: 30%; right: 8%; top: 0; height: 60%; } .scene-baby .sc-mobil i { position: absolute; top: 0; width: 2px; background: #A3BCE8; transform-origin: 50% 0; animation: scAyun 3s ease-in-out infinite alternate; } .scene-baby .sc-mobil b { position: absolute; bottom: -18px; left: -14px; width: 28px; display: block; }
.scene-baby .sc-mobil .t1 { left: 10%; height: 40%; } .scene-baby .sc-mobil .t2 { left: 48%; height: 62%; animation-delay: -1s; } .scene-baby .sc-mobil .t3 { left: 86%; height: 48%; animation-delay: -2s; }
.scene-baby .sc-hello { left: 0; right: 0; bottom: 14%; text-align: center; font: 600 1.35rem 'Fredoka', system-ui, sans-serif; background: linear-gradient(100deg, #6F95D8, #F08BAE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Starry */
.scene-starry { background: linear-gradient(180deg, #060921, #17164D 55%, #35266F); }
.scene-starry .sc-bint { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(200, 190, 255, .8); animation: scKelip 3s ease-in-out infinite; }
.scene-starry .sc-jatuh { right: 12%; top: 14%; width: 2px; height: 46px; background: linear-gradient(#fff, transparent); transform: rotate(35deg); transform-origin: top; animation: scJatuh 3.2s ease-out infinite; }
.scene-starry .sc-bulan-s { left: 10%; bottom: 14%; width: 18%; filter: drop-shadow(0 0 12px rgba(255, 232, 163, .6)); animation: scMelayang 4s ease-in-out infinite; }
.scene-starry .sc-rasi { left: 32%; right: 6%; top: 24%; opacity: .8; } .scene-starry .sc-rasi svg { display: block; width: 100%; }
/* Classic */
.scene-classic { background: linear-gradient(150deg, #FFE0E8, #FFF5F7); } .scene-classic .sc-hati { left: 50%; top: 50%; width: 26%; margin: -13% 0 0 -13%; animation: scLompat 1.8s ease-in-out infinite; } .scene-classic .sc-doodle { right: 10%; top: 10%; width: 12%; animation: scKelip 2.4s ease-in-out infinite; }

/* Kartu desain di katalog */
.fitur-chip { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.fitur-chip li { font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: 99px; background: var(--lav-tint); color: #4E3A82; }
.cocok { font-size: .8125rem; color: var(--muted); line-height: 1.5; margin: 0; }
.design-thumb .badge-anim { position: absolute; right: .75rem; top: .75rem; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 99px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; background: rgba(255, 255, 255, .92); color: var(--primary-deep); box-shadow: var(--sh-badge); }
.design-thumb .badge-anim .icon { width: 12px; height: 12px; }
.design-thumb.scene-wrap { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.design-thumb .tombol-main { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 99px; font-size: .75rem; font-weight: 800; background: rgba(38, 28, 36, .78); color: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; }
.design-card:hover .tombol-main, .design-card:focus-within .tombol-main { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scene *, .scene { animation: none !important; } }

.design-actions { flex-wrap: wrap; } .design-actions .btn { flex: 1 1 auto; justify-content: center; }
.fitur-chip li { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* ---------- Adegan desain khusus Special ---------- */
@keyframes scGeserKiri { from { transform: translateX(0); } to { transform: translateX(-30%); } }
@keyframes scBar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes scMuncul { 0%, 55%, 100% { opacity: 0; transform: translateY(8px) scale(.9); } 65%, 90% { opacity: 1; transform: none; } }
@keyframes scSapu { to { transform: rotate(360deg); } }
.scene-movie { background: radial-gradient(ellipse at 70% 15%, #5B1A3A, #0B0B10 70%); }
.scene-movie .sc-mv-poster { right: 8%; top: 14%; width: 32%; aspect-ratio: 2 / 3; border-radius: 6px; transform: rotate(6deg); background: linear-gradient(160deg, #E8336D, #5B1A9A 60%, #1A0F3A); display: grid; place-items: center; text-align: center; color: #fff; font: 400 1.05rem/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .05em; box-shadow: 0 10px 20px #000a; animation: scMelayang 5s ease-in-out infinite; }
.scene-movie .sc-mv-poster i { font-style: normal; }
.scene-movie .sc-mv-judul { left: 8%; top: 12%; font: 400 1.5rem 'Bebas Neue', Impact, sans-serif; letter-spacing: .1em; color: #E8336D; }
.scene-movie .sc-mv-eps { bottom: 12%; width: 22%; aspect-ratio: 16 / 9; border-radius: 4px; display: grid; place-items: center; color: #fff; font: 400 1.2rem 'Bebas Neue', Impact, sans-serif; animation: scGeserKiri 6s ease-in-out infinite alternate; } .scene-movie .e1 { left: 6%; background: linear-gradient(135deg, #3A1C71, #D76D77); } .scene-movie .e2 { left: 31%; background: linear-gradient(135deg, #134E5E, #71B280); } .scene-movie .e3 { left: 56%; background: linear-gradient(135deg, #7B2FF7, #F107A3); }
.scene-movie .sc-mv-play { left: 8%; top: 38%; background: #fff; color: #111; font-weight: 800; font-size: .75rem; padding: .35rem .8rem; border-radius: 4px; }
.scene-mall { background: #F5F5F5; } .scene-mall .sc-ml-bar { left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(135deg, #FF7A1A, #FF4D2E); color: #fff; font-weight: 800; font-size: .95rem; padding: .55rem .7rem; } .scene-mall .sc-ml-troli { right: 8px; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #FF4D2E; font-weight: 800; font-size: .75rem; display: grid; place-items: center; animation: scLompat 2s ease-in-out infinite; }
.scene-mall .sc-ml-banner { left: 6%; right: 6%; top: 28%; height: 24%; border-radius: 8px; background: linear-gradient(120deg, #FF7A1A, #FFB020); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.scene-mall .sc-ml-p { width: 20%; aspect-ratio: 1; top: 58%; border-radius: 8px; display: grid; place-items: center; background: #FFE3D0; animation: scMelayang 3s ease-in-out infinite; } .scene-mall .sc-ml-p .art { width: 50%; } .scene-mall .p1 { left: 6%; } .scene-mall .p2 { left: 28%; background: #FFF0C9; animation-delay: -.7s; } .scene-mall .p3 { left: 50%; background: #FFD9E4; animation-delay: -1.4s; } .scene-mall .p4 { left: 72%; background: #DDF1DC; animation-delay: -2.1s; }
.scene-bestie { background: linear-gradient(180deg, #8FD6FF, #DFF7C8); } .scene-bestie .sc-bs-bukit { left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50%; background: #7FD16B; } .scene-bestie .sc-bs-item { width: 12%; animation: scMelayang 1.8s ease-in-out infinite; } .scene-bestie .i1 { left: 18%; top: 26%; } .scene-bestie .i2 { right: 20%; top: 18%; animation-delay: -.8s; }
.scene-bestie .sc-bs-av { left: 50%; bottom: 14%; width: 22px; height: 44px; margin-left: -11px; animation: scLompat 1.6s ease-in-out infinite; transform-origin: 50% 100%; } .scene-bestie .sc-bs-av i { position: absolute; left: 0; top: 0; width: 22px; height: 18px; background: #F2C28B; border-radius: 4px; border: 2px solid #5B3A29; } .scene-bestie .sc-bs-av b { position: absolute; left: 1px; top: 19px; width: 20px; height: 24px; background: #FF6B6B; border-radius: 3px; box-shadow: 0 0 0 2px #0002; }
.scene-bestie .sc-bs-hud { left: 8%; right: 40%; top: 8%; height: 10px; border-radius: 6px; background: #fff; border: 2px solid #1D3557; } .scene-bestie .sc-bs-hud u { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: #FFC93C; border-radius: 4px; }
.scene-feed { background: linear-gradient(160deg, #FF8A5B, #E8336D); } .scene-feed .sc-fd-layar { left: 0; right: 0; top: 0; bottom: 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 0 22% 0 8%; } .scene-feed .sc-fd-layar em { font-style: normal; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.scene-feed .sc-fd-aksi { right: 8px; bottom: 16%; display: grid; gap: 8px; } .scene-feed .sc-fd-aksi i { width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .35); } .scene-feed .sc-fd-aksi i:first-child { background: #FF3B6E; animation: scLompat 1.6s ease-in-out infinite; }
.scene-feed .sc-fd-akun { left: 8px; top: 8px; color: #fff; font-weight: 700; font-size: .75rem; background: rgba(0, 0, 0, .3); padding: .2rem .6rem; border-radius: 99px; } .scene-feed .sc-fd-kom { left: 8%; background: rgba(255, 255, 255, .92); color: #222; font-size: .6875rem; font-weight: 600; padding: .25rem .6rem; border-radius: 10px; animation: scMuncul 6s ease infinite; } .scene-feed .k1 { bottom: 24%; } .scene-feed .k2 { bottom: 10%; animation-delay: 1.4s; }
.scene-musik { background: linear-gradient(180deg, #2B1B4D, #14101F); } .scene-musik .sc-mk-cover { left: 50%; top: 12%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 10px; background: linear-gradient(135deg, #7B2FF7, #F107A3); display: grid; place-items: center; box-shadow: 0 10px 24px #F107A366; animation: scMelayang 4s ease-in-out infinite; } .scene-musik .sc-mk-cover .art { width: 46%; }
.scene-musik .sc-mk-viz { left: 14%; right: 14%; bottom: 28%; height: 20%; display: flex; align-items: flex-end; gap: 4px; } .scene-musik .sc-mk-viz i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(#F107A3, #7B2FF7); transform-origin: bottom; animation: scBar .8s ease-in-out infinite alternate; } .scene-musik .sc-mk-viz i:nth-child(2n) { animation-duration: 1.1s; } .scene-musik .sc-mk-viz i:nth-child(3n) { animation-duration: .6s; animation-delay: -.3s; }
.scene-musik .sc-mk-judul { left: 0; right: 0; bottom: 10%; text-align: center; color: #F4EEFF; font-weight: 700; font-size: .85rem; } .scene-musik .sc-mk-play { right: 10%; bottom: 8%; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #14101F; display: grid; place-items: center; font-size: .65rem; }
.scene-misi { background: radial-gradient(ellipse at 50% 0%, #1B3A4B, #0A141C 70%); } .scene-misi .sc-ms-radar { left: 50%; top: 50%; width: 110%; aspect-ratio: 1; margin: -55% 0 0 -55%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(140, 243, 255, .28), transparent 25%); animation: scSapu 5s linear infinite; }
.scene-misi .sc-ms-hero { left: 50%; top: 24%; width: 20%; aspect-ratio: 3 / 4; margin-left: -10%; animation: scMelayang 3s ease-in-out infinite; } .scene-misi .sc-ms-hero i { position: absolute; left: 10%; top: 0; width: 80%; height: 34%; border-radius: 50% 50% 30% 30%; background: #3F7D8C; border: 2px solid #8CF3FF; } .scene-misi .sc-ms-hero b { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; border-radius: 8px; background: #3F7D8C; border: 2px solid #8CF3FF; box-shadow: inset 0 -16px 0 #FFB02066; }
.scene-misi .sc-ms-misi { left: 10%; right: 10%; bottom: 8%; display: flex; gap: 6px; } .scene-misi .sc-ms-misi i { flex: 1; height: 14px; border-radius: 3px; border: 1px solid #2E566A; background: #112734; } .scene-misi .sc-ms-misi .a { background: #35A66B; animation: scKelip 3s ease infinite; } .scene-misi .sc-ms-judul { left: 8%; top: 8%; font: 700 .8rem 'Rajdhani', sans-serif; letter-spacing: .24em; color: #8CF3FF; }

/* Adegan katalog: desain Premium tambahan */
.scene-romantique { background: radial-gradient(ellipse at 50% 40%, #3A1226, #070307 80%); } .scene-romantique .sc-rm-bunga { border-radius: 50%; background: radial-gradient(circle, #F6E3A1 0 18%, #C94F6D 20% 100%); animation: scAyun 2.4s ease-in-out infinite alternate; } .scene-romantique .b1 { left: 14%; bottom: 14%; width: 26%; aspect-ratio: 1; } .scene-romantique .b2 { right: 12%; bottom: 20%; width: 20%; aspect-ratio: 1; animation-delay: -.8s; } .scene-romantique .b3 { left: 40%; bottom: 6%; width: 22%; aspect-ratio: 1; background: radial-gradient(circle, #F6E3A1 0 18%, #8E2043 20% 100%); animation-delay: -1.4s; } .scene-romantique .sc-rm-nama { left: 0; right: 0; top: 24%; text-align: center; font: italic 600 1.5rem 'Cormorant Garamond', Georgia, serif; color: #F4E8D3; }
.scene-wisuda { background: #F6F1E4; } .scene-wisuda .sc-ws-sampul { left: 18%; right: 18%; top: 10%; bottom: 14%; background: #fff; border: 6px solid #fff; box-shadow: 0 10px 20px -10px #0006; display: grid; place-items: center; font: 700 .85rem 'Playfair Display', Georgia, serif; letter-spacing: .15em; color: #0F1F3D; text-align: center; border-top: 3px double #C9A24B; } .scene-wisuda .sc-ws-pita { left: 12%; right: 12%; bottom: 30%; height: 16px; background: linear-gradient(180deg, #E8D08A, #C9A24B 55%, #E8D08A); transform: rotate(-4deg); } .scene-wisuda .sc-ws-topi { right: 10%; top: 6%; width: 22%; animation: scAyun 2.6s ease-in-out infinite alternate; }
.scene-lebaran { background: radial-gradient(ellipse at 50% 0, #11806A, #052E26); } .scene-lebaran .sc-lb-bulan { right: 14%; top: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -12px 4px 0 0 #F6D06F; transform: rotate(-20deg); } .scene-lebaran .sc-lb-lentera { width: 12%; height: 26%; border-radius: 40% 40% 50% 50%; background: #FFB84D; box-shadow: 0 0 18px #FFB84D; top: -2%; transform-origin: top; animation: scAyun 2.8s ease-in-out infinite alternate; } .scene-lebaran .l1 { left: 16%; } .scene-lebaran .l2 { left: 34%; top: -8%; animation-delay: -1.2s; } .scene-lebaran .sc-lb-masjid { left: 0; right: 0; bottom: 0; height: 30%; background: #031A15; clip-path: polygon(0 100%, 0 40%, 8% 0, 16% 40%, 26% 40%, 36% 14%, 50% 0, 64% 14%, 74% 40%, 84% 40%, 92% 0, 100% 40%, 100% 100%); }
.scene-imlek { background: radial-gradient(ellipse at 50% 0, #E8323A, #7E0A1A); } .scene-imlek .sc-im-lampion { width: 16%; height: 34%; border-radius: 50%; background: #D71920; border: 3px solid #F5C242; top: -4%; transform-origin: top; animation: scAyun 3s ease-in-out infinite alternate; } .scene-imlek .i1 { left: 12%; } .scene-imlek .i2 { right: 12%; animation-delay: -1.4s; } .scene-imlek .sc-im-koin { width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0, #F5C242 60%, #C98A12); animation: scNaik 5s linear infinite; bottom: -10%; } .scene-imlek .c1 { left: 36%; } .scene-imlek .c2 { left: 58%; animation-delay: -2.2s; } .scene-imlek .sc-im-teks { left: 0; right: 0; top: 32%; text-align: center; font: 800 2.6rem sans-serif; color: #F5C242; }
.scene-mancing { background: linear-gradient(180deg, #BFE9FF 0, #E8F7FF 32%, #5BB8E8 32%, #17609A); } .scene-mancing .sc-mc-ombak { left: -10%; right: -10%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .25); animation: scAyun 3s ease-in-out infinite alternate; } .scene-mancing .o1 { top: 34%; } .scene-mancing .o2 { top: 56%; animation-delay: -1.5s; } .scene-mancing .sc-mc-perahu { left: 34%; top: 26%; width: 32%; height: 22%; background: #B07A47; border-radius: 0 0 40% 40%; animation: scAyun 2.4s ease-in-out infinite alternate; } .scene-mancing .sc-mc-pelampung { left: 70%; top: 52%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, #FF4D4D 50%, #fff 50%); animation: scAyun 1.6s ease-in-out infinite alternate; }

/* Adegan katalog: putaran A */
.scene-awards { background: radial-gradient(ellipse at 50% 0, #1E2A5C, #070A1C); } .scene-awards .sc-aw-sorot { top: -10%; width: 30%; height: 120%; background: linear-gradient(180deg, rgba(255, 243, 176, .4), transparent 70%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: top; animation: scAyun 3s ease-in-out infinite alternate; } .scene-awards .s1 { left: 10%; } .scene-awards .s2 { right: 10%; animation-delay: -1.5s; } .scene-awards .sc-aw-piala { left: 40%; width: 20%; top: 28%; height: 34%; background: linear-gradient(135deg, #FFF3B0, #F5C242 55%, #B8820E); clip-path: polygon(15% 0, 85% 0, 80% 50%, 60% 70%, 60% 85%, 80% 100%, 20% 100%, 40% 85%, 40% 70%, 20% 50%); } .scene-awards .sc-aw-teks { left: 0; right: 0; bottom: 12%; text-align: center; font: 800 1rem 'Plus Jakarta Sans', sans-serif; letter-spacing: .3em; color: #F5C242; }
.scene-resep { background: #FFF1DC; } .scene-resep .sc-rs-kartu { left: 14%; right: 14%; top: 12%; height: 46%; background: #fff; border: 2px dashed #E8745A; transform: rotate(-2deg); display: grid; place-items: center; font: 700 1.3rem/1 'Caveat', cursive; color: #8E3623; text-align: center; } .scene-resep .sc-rs-panci { left: 34%; width: 32%; bottom: 8%; height: 26%; background: #C8573D; border-radius: 0 0 50% 50%; } .scene-resep .sc-rs-uap { bottom: 30%; width: 4%; height: 14%; border-radius: 99px; background: rgba(120, 90, 70, .35); animation: scNaik 4s linear infinite; } .scene-resep .u1 { left: 42%; } .scene-resep .u2 { left: 54%; animation-delay: -2s; }
.scene-rumah { background: linear-gradient(180deg, #BFE3F7 0 55%, #A7D88B 55%); } .scene-rumah .sc-rh-atap { left: 22%; right: 22%; top: 18%; height: 24%; background: #C8573D; clip-path: polygon(0 100%, 50% 0, 100% 100%); } .scene-rumah .sc-rh-rumah { left: 26%; right: 26%; top: 40%; height: 36%; background: #FFE9C7; } .scene-rumah .sc-rh-pintu { left: 45%; width: 10%; top: 54%; height: 22%; background: #8E5A2E; } .scene-rumah .sc-rh-jendela { width: 10%; height: 12%; top: 46%; background: #9AD1F0; border: 2px solid #fff; } .scene-rumah .w1 { left: 32%; } .scene-rumah .w2 { right: 32%; }

/* Adegan katalog: putaran B */
.scene-brankas { background: radial-gradient(ellipse at 50% 0, #2B3447, #0E121B); } .scene-brankas .sc-bk-pintu { left: 28%; width: 44%; aspect-ratio: 1; top: 14%; border-radius: 50%; background: #2B3447; border: 6px solid #C9CED8; } .scene-brankas .sc-bk-roda { left: 40%; width: 20%; aspect-ratio: 1; top: 26%; border-radius: 50%; background: radial-gradient(circle, #1B2230 0 24%, #F5C242 26%); animation: scSpin 6s linear infinite; } @keyframes scSpin { to { transform: rotate(360deg); } } .scene-brankas .sc-bk-gembok { left: 44%; width: 12%; height: 12%; bottom: 10%; background: #F5C242; border-radius: 3px; }
.scene-hujan { background: linear-gradient(180deg, #2C3E50, #6F8AA3); } .scene-hujan .sc-hj-kaca { inset: 0; background: repeating-linear-gradient(104deg, transparent 0 9px, rgba(255, 255, 255, .22) 9px 10px); animation: hjTurun 1.1s linear infinite; } .scene-hujan .sc-hj-tetes { width: 5%; height: 9%; border-radius: 50%; background: rgba(255, 255, 255, .55); } .scene-hujan .t1 { left: 20%; top: 30%; } .scene-hujan .t2 { left: 58%; top: 50%; } .scene-hujan .t3 { left: 76%; top: 24%; } .scene-hujan .sc-hj-pelangi { left: 20%; right: 20%; bottom: 4%; height: 40%; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 100%, transparent 50%, #E8736F 52% 58%, #F5E26B 58% 64%, #6BB7E8 64% 70%, transparent 71%); opacity: .8; }
.scene-lahir { background: linear-gradient(180deg, #FFF6E6, #EAF4EC); } .scene-lahir .sc-lh-kartu { left: 24%; right: 24%; top: 18%; height: 42%; border-radius: 12px; background: linear-gradient(160deg, #FFE9A3, #FFD3B8, #D9CCF5); display: grid; place-items: center; font: 800 .95rem/1.2 'Plus Jakarta Sans', sans-serif; color: #3F3A4A; text-align: center; } .scene-lahir .sc-lh-balon { width: 11%; height: 17%; border-radius: 50%; bottom: 8%; animation: scNaik 5s linear infinite; } .scene-lahir .b1 { left: 10%; background: #BFD8C6; } .scene-lahir .b2 { left: 44%; background: #FFD3B8; animation-delay: -2s; } .scene-lahir .b3 { right: 10%; background: #D9CCF5; animation-delay: -3.5s; }

/* Adegan katalog: Invitation */
.scene-uelegan { background: linear-gradient(180deg, #FBF6EA, #F3E9D2); } .scene-uceria { background: linear-gradient(180deg, #FFF7D1, #FFE0EC); } .scene-uhangat { background: linear-gradient(180deg, #FFF4E4, #F6D9BE); }
.sc-ud-amplop { left: 20%; right: 20%; top: 26%; height: 40%; background: #fff; border: 2px solid #B8923A; border-radius: 4px; box-shadow: 0 10px 20px -12px #0006; } .sc-ud-amplop.c { border-color: #FF6FA5; border-radius: 12px; } .sc-ud-amplop.h { border-color: #C8573D; border-radius: 10px; }
.sc-ud-segel { left: 44%; width: 12%; aspect-ratio: 1; top: 52%; border-radius: 50%; background: #B8923A; color: #fff; display: grid; place-items: center; font-size: .9rem; animation: scAyun 2s ease-in-out infinite alternate; } .sc-ud-segel.c { background: #FF6FA5; } .sc-ud-segel.h { background: #C8573D; }
.sc-ud-teks { left: 0; right: 0; top: 10%; text-align: center; font: 600 1.3rem 'Playfair Display', Georgia, serif; color: #8A6B1E; } .sc-ud-teks.c { font-family: 'Fredoka', sans-serif; color: #D8407F; } .sc-ud-teks.h { font-family: 'Caveat', cursive; color: #8E3623; font-size: 1.6rem; }