:root {
    --primary:#00d2ff;
    --accent:#3a7bd5;
    --bg:#050505;
    --panel:#111;
    --card-bg:#1a1a1a;
}

body {
    margin:0;
    font-family:Segoe UI, sans-serif;
    background:var(--bg);
    color:#fff;
    overflow:hidden;
}

.container{display:flex;height:100vh;}

.sidebar{
    width:280px;
    background:var(--panel);
    border-right:1px solid #222;
    overflow-y:auto;
    padding:25px;
}

.topbar{
    margin-bottom:20px;
}

.topbar input{
    width:100%;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid #222;
    background:#111;
    color:#fff;
    outline:none;
    font-size:14px;
    transition:.2s;
}

.topbar input:focus{
    border-color:var(--primary);
    box-shadow:0 0 10px rgba(0,210,255,.2);
}

.lib-title{
    font-size:12px;
    letter-spacing:2px;
    color:#555;
    margin-bottom:25px;
    font-weight:800;
    text-transform:uppercase;
}

.filter{
    padding:14px 18px;
    margin-bottom:10px;
    background:var(--card-bg);
    border-radius:12px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    border:1px solid transparent;
}

.filter:hover{
    border-color:var(--primary);
    transform:translateX(6px);
}

.filter.active{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#000;
    font-weight:800;
}

.main{
    flex:1;
    overflow-y:auto;
    padding:40px;
    background:radial-gradient(circle at top right,#111,#050505);
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:25px;
}

.card{
    background:var(--card-bg);
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #222;
    transition:.3s;
}

.card:hover{
    transform:translateY(-10px);
    border-color:var(--primary);
}

.card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.card .title{
    padding:12px;
    font-size:13px;
    text-align:center;
    font-weight:700;
}

.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
}

.popup-content{
    width:900px;
    max-height:85vh;
    background:#111;
    display:flex;
    border-radius:25px;
    overflow:hidden;
}

.pop-left img{
    width:350px;
    height:100%;
    object-fit:cover;
}

.pop-right{
    flex:1;
    padding:40px;
    overflow-y:auto;
}

.pop-title{
    font-size:28px;
    color:var(--primary);
    margin-bottom:20px;
}

.badge{
    display:inline-block;
    padding:6px 12px;
    margin:5px;
    border:1px solid #333;
    border-radius:10px;
    font-size:12px;
}

.close-btn{
    margin-top:20px;
    padding:12px;
    width:100%;
    border:none;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
}




@media (max-width: 900px) {

    body {
        overflow: auto;
    }

    .container {
        flex-direction: column;
        height: auto;
    }

    /* SIDEBAR jadi horizontal scroll */
    .sidebar {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px;
        gap: 10px;
        border-right: none;
        border-bottom: 1px solid #222;
        white-space: nowrap;
    }

    .lib-title {
        display: none;
    }

    .filter {
        flex: 0 0 auto;
        margin-bottom: 0;
        padding: 10px 14px;
        font-size: 12px;
        border-radius: 10px;
    }

    /* MAIN AREA */
    .main {
        padding: 15px;
    }

    .topbar input {
        padding: 12px;
        font-size: 13px;
    }

    /* GRID jadi lebih rapat */
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .card img {
        height: 180px;
    }

    .card .title {
        font-size: 11px;
        padding: 8px;
    }

    /* POPUP jadi full screen mobile */
    .popup-content {
        width: 95%;
        flex-direction: column;
        max-height: 90vh;
        border-radius: 16px;
    }

    .pop-left img {
        width: 100%;
        height: 250px;
    }

    .pop-right {
        padding: 15px;
    }

    .pop-title {
        font-size: 20px;
    }

    .badge {
        font-size: 10px;
        padding: 4px 8px;
    }

    .close-btn {
        padding: 10px;
        font-size: 14px;
    }
}

/* EXTRA SMALL DEVICE (HP kecil) */
@media (max-width: 420px) {

    .grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .card img {
        height: 220px;
    }
}