:root{--accent:#ff2d55} /* PERBAIKAN CSS: Pindahkan overflow:hidden ke untuk fix scroll-snap */ body{margin:0;background:#000;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial; overflow: hidden;} .container{height:100vh; width:100vw; position:relative} /* PERBAIKAN CSS: Scroll-Snap untuk smooth scroll vertikal */ .carousel{height:100%; width:100%; touch-action:pan-y; overflow-y: scroll; scroll-snap-type: y mandatory;} .slide{height:100vh; width:100vw; position:relative; display:flex; align-items:center; justify-content:center; background:#000; scroll-snap-align: start;} .slide video{width:100%; height:100%; object-fit:cover} .sidebar{position:absolute; right:12px; bottom:100px; display:flex; flex-direction:column; gap:18px; z-index:50} .btn-circle{width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.45); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-size:20px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.5); transition:transform .18s ease; font-weight:bold;} .btn-circle .count{font-size:12px; font-weight:400; margin-top:2px} /* Gaya untuk hitungan */ .btn-circle:active{transform:scale(.92)} .btn-like.animate{animation:pop .45s ease} .liked-active{color:var(--accent); text-shadow:0 0 10px var(--accent)} /* Gaya untuk tombol like aktif */ @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}} .username{position:absolute; left:14px; bottom:110px; color:#fff; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.6)} .caption{position:absolute; left:14px; bottom:70px; right:120px; color:#fff; font-size:14px; text-shadow:0 2px 10px rgba(0,0,0,.6)} .music-overlay{position:absolute; left:14px; bottom:20px; color:#fff; display:flex; gap:10px; align-items:center} .music-btn{background:rgba(255,255,255,0.06); padding:6px 8px; border-radius:999px} .comments-panel{position:fixed; right:0; top:0; bottom:0; width:360px; max-width:100%; background:linear-gradient(180deg,#000 0%, rgba(0,0,0,0.9) 100%); transform:translateX(100%); transition:transform .28s ease; z-index:100; padding:12px; box-shadow:0 0 20px rgba(0,0,0,0.8)} .comments-panel.open{transform:translateX(0)} .comments-list{max-height:calc(100% - 120px); overflow:auto; padding-top:10px} .comment-item{display:flex; gap:10px; margin-bottom:15px; color:#fff;} .comment-item img{width:36px;height:36px;border-radius:50%; flex-shrink: 0;} .comment-text{background:rgba(255,255,255,0.1); padding:8px 12px; border-radius:12px; max-width:calc(100% - 50px);} .comment-item strong{font-size:14px; display:block; margin-bottom:3px} .comment-item div{font-size:13px; line-height: 1.4;} .load-more{position:absolute; top:12px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,0.5); padding:6px 10px; border-radius:20px; display:none;} /* --- BOTTOM NAV BAR (Menu Bawah) --- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; /* Tinggi Navigasi */ background: #000; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 150; /* Pastikan di atas semua elemen lain */ } .nav-item { color: #fff; text-align: center; font-size: 11px; padding: 0 10px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; } .nav-item:hover, .nav-item.active { opacity: 1; } .nav-item .icon { font-size: 24px; margin-bottom: 2px; display: block; } .nav-item.post-btn .icon { /* Gaya khusus untuk tombol 'Post' jika ingin menonjol */ font-size: 30px; color: #000; background: #fff; border-radius: 6px; width: 38px; height: 30px; line-height: 28px; margin: 0 auto 2px; }