*{margin:0;padding:0}body{min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}nav{background-color:#fff;box-shadow:3px 3px 5px rgba(0,0,0,.1)}nav ul{width:100%;list-style:none;display:flex;justify-content:flex-end;align-items:center}nav li{height:50px}nav a{height:100%;padding:0 30px;text-decoration:none;display:flex;align-items:center;color:#000}nav a:hover{background-color:#f0f0f0}nav li:first-child{margin-right:auto}#judul{font-family:Reenie Beanie,sans-serif;font-size:30px}.sidebar{position:fixed;top:0;right:0;height:100vh;width:250px;z-index:999;background-color:hsla(0,0%,100%,.2);box-shadow:-10px 0 10px rgba(0,0,0,.1);display:none;backdrop-filter:blur(10px);flex-direction:column;align-items:flex-start;justify-content:flex-start}.sidebar a,.sidebar li{width:100%}.search-container{margin-bottom:20px;width:100%;display:flex;justify-content:center;align-items:center}.container-result{max-width:1200px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center}.search-input{width:100%;max-width:400px;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px}.search-button{background-color:#000;color:#fff;border:none;padding:15px 10px;border-radius:8px 8px 8px 8px;cursor:pointer;display:flex;align-items:center;gap:5px;margin-left:10px}.search-icon{width:16px;height:16px}.results-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;width:100%}.error{color:red}.result-card{padding:30px;border:1px solid #eaeaea;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s}.skeleton{background-color:#f2f0f0;border-radius:4px;overflow:hidden;position:relative}.skeleton:before{content:"";display:block;position:absolute;top:0;left:-100%;height:100%;width:100%;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,0));animation:shimmer 1s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.skeleton.message,.skeleton.recipient{height:20px;margin-bottom:8px}.skeleton.message{height:16px;width:80%}.result-card:hover{transform:translateY(-2px)}.recipient{color:#666;font-size:14px;margin-bottom:5px}.message{color:#555;margin-bottom:15px;font-size:35px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;font-family:Reenie Beanie,sans-serif}@font-face{font-family:Reenie Beanie;src:url(/font/ReenieBeanie.ttf) format("truetype")}.song-info{display:flex;align-items:center;gap:10px}.album-art{width:48px;height:48px;object-fit:cover;border-radius:4px}.song-title{color:#06c;font-size:14px}.load-more-container{text-align:center;margin-top:20px}#load-more{padding:10px 20px;font-size:16px;cursor:pointer;border:none;border-radius:5px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#000;transition:background-color .3s;display:none}#load-more:hover{background-color:#0056b3}@media (max-width:1000px){.cards-section{padding:30px 15px}.card{width:calc(50% - 15px);min-width:250px}.search-container{height:auto;padding:15px;flex-direction:column}.search-input{width:80%;margin-bottom:10px}.search-button{width:80%}}@media (max-width:600px){.title{font-size:2rem}.buttons{flex-direction:column}.button{justify-content:center}.button,.card{width:100%}.search-container{padding:10px}.search-button,.search-input{font-size:1rem}}@media(max-width:800px){.hideOnMobile{display:none}.menu-button{display:block}}@media(max-width:400px){.sidebar{width:100%}}