/* Latar Belakang 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 Strip Scrapbook */
.bg-dotted-pattern {
    background-image: radial-gradient(#D8CEB9 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    background-repeat: repeat;
}

/* Strip Simulasi Lubang Pemotong Perangko Tepi */
.bg-punch-horizontal {
    background-image: radial-gradient(circle at center, #F4EBE1 4.5px, transparent 5.5px);
    background-size: 15px 15px;
    background-repeat: repeat-x;
}
.bg-punch-vertical {
    background-image: radial-gradient(circle at center, #F4EBE1 4.5px, transparent 5.5px);
    background-size: 15px 15px;
    background-repeat: repeat-y;
}

/* Garis Kaca Monitor Simulasi Tabung CRT Game */
.bg-crt-lines {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
    background-size: 100% 4px, 6px 100%;
}

/* Animasi Muncul Bertahap Saat Halaman Dimuat */
.animate-slide-down { animation: enterDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-portrait-in { animation: portraitIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards; }
.animate-text-reveal { animation: textReveal 0.6s ease-out 0.3s forwards; }
.animate-window-in { animation: windowIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; }

@keyframes enterDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes textReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portraitIn { from { opacity: 0; transform: translateX(-25px) rotate(-4deg); } to { opacity: 1; transform: translateX(0) rotate(-2deg); } }
@keyframes windowIn { from { opacity: 0; transform: scale(0.98) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Desain Kustom Scrollbar Tradisional */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F4EBE1; }
::-webkit-scrollbar-thumb { background: #C4B298; border-radius: 5px; border: 2px solid #F4EBE1; }
::-webkit-scrollbar-thumb:hover { background: #4E3B29; }