/* Pola Kain人字纹 Background Meja */
.bg-chevron-pattern {
    background: linear-gradient(135deg, #A18D75 25%, transparent 25%) -30px 0,
                linear-gradient(225deg, #A18D75 25%, transparent 25%) -30px 0,
                linear-gradient(45deg, #A18D75 25%, transparent 25%),
                linear-gradient(315deg, #A18D75 25%, #F4EBE1 25%);
    background-size: 60px 30px;
    background-repeat: repeat;
}

/* Pola Titik Matrix Kertas Scrapbook */
.bg-dotted-pattern {
    background-image: radial-gradient(#D8CEB9 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-repeat: repeat;
}

/* Kain Kotak-Kotak Hijau Sisi Kanan */
.bg-grid-green {
    background-color: #B2C9A2;
    background-image: linear-gradient(rgba(255,255,255,.3) 2px, transparent 2px),
                      linear-gradient(90deg, rgba(255,255,255,.3) 2px, transparent 2px);
    background-size: 20px 20px;
}

/* 🎬 ALUR GERAK PIPELINE ENTRANCE ANIMATION (SINEMATIK) */
.animate-slide-down { animation: enterDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-nav-drop { animation: navDrop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
.animate-title-reveal { animation: titleReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
.animate-badge-reveal { animation: filterReveal 0.4s ease-out 0.3s forwards; }
.animate-window-in { animation: windowIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; }
.animate-memo-reveal { animation: memoIn 0.5s ease-out 0.4s forwards; }
.animate-peeking-stamp { animation: stampIn 0.6s ease-out 0.25s forwards; }

@keyframes enterDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes navDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes titleReveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes filterReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes windowIn { from { opacity: 0; transform: scale(0.97) translateY(25px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes memoIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0) rotate(4deg); } }
@keyframes stampIn { from { opacity: 0; transform: translateY(20px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(-12deg); } }

/* 🚪 TRANSISI KELUAR RUNTUH (EXIT PROCESS) */
.exit-collapse {
    transform: translateY(15px) scale(0.98) !important;
    opacity: 0 !important;
    filter: blur(2px);
    transition: all 0.4s ease-in-out;
}