* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', sans-serif; }
body { background-color: #000; color: #fff; overflow: hidden; touch-action: none; /* Cegah scroll saat nge-drag */ }

/* TIKTOK SWIPE FEED */
.feed-container {
    height: 100vh; width: 100vw; overflow-y: scroll;
    scroll-snap-type: y mandatory; scroll-behavior: smooth;
    touch-action: pan-y; /* Cuma boleh scroll atas bawah */
}
.slide {
    height: 100vh; width: 100vw; scroll-snap-align: start;
    position: relative; background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; overflow: hidden;
}
.overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3)); z-index: 1; }
.content { z-index: 2; width: 100%; max-width: 400px; text-align: center; }

/* GLASSMORPHISM & ANIMASI */
.glass-panel {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 30px;
}
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* MEJA KARUHUN (DRAG & DROP) */
#meja-kerja {
    position: relative; height: 300px; width: 100%;
    background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'), #4a3b2c;
    border-radius: 15px; border: 2px solid #d4af37; box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
.dropzone {
    position: absolute; width: 120px; height: 100px; border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold;
}
#drop-desa { top: 20px; left: 20px; background: rgba(212, 175, 55, 0.2); }
#drop-sampah { bottom: 20px; right: 20px; background: rgba(255, 0, 0, 0.2); }
.draggable {
    position: absolute; padding: 10px 15px; background: #fff; color: #000;
    border-radius: 20px; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    touch-action: none; cursor: grab; z-index: 10;
}
#item-laja { bottom: 20px; left: 20px; }
#item-belanda { top: 20px; right: 20px; }

/* PRASASTI & BUTTONS */
.solid-bg { background-color: #f4f1ea; }
.card-prasasti {
    background: #fff; padding: 15px; border-radius: 15px; margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.card-inner { border: 3px double #d4af37; padding: 20px; border-radius: 10px; background: #faf9f6; color: #333;}
.card-inner img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin: 10px 0; }
#input-nama { width: 100%; padding: 15px; border-radius: 25px; border: 2px solid #ccc; text-align: center; margin-bottom: 10px; }
.btn-glow {
    width: 100%; padding: 15px; border-radius: 25px; border: none; font-weight: bold; color: #fff;
    background: linear-gradient(45deg, #8b6d3b, #d4af37); box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    cursor: pointer;
}
.btn-glow:active { transform: scale(0.95); }