/* ==========================
   GLOBAL
========================== */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --background:#f8fafc;
    --text:#1e293b;
    --muted:#64748b;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    font-family:"Segoe UI",sans-serif;
    background:var(--background);
    color:var(--text);

}


/* ==========================
   NAVBAR
========================== */

.navbar{

    background:white;
    padding:18px 0;
    box-shadow:
    0 5px 20px rgba(0,0,0,.05);

}



.navbar-brand{

    color:var(--primary)!important;
    font-size:22px;

}



.nav-link{

    color:#475569!important;
    font-weight:500;
    margin-left:15px;

}


.nav-link:hover{

    color:var(--primary)!important;

}





/* ==========================
   HERO
========================== */


.hero{

    padding:170px 0 90px;

}



.hero h1{

    font-size:55px;
    font-weight:700;
    line-height:1.2;

}



.hero h1 span{

    color:var(--primary);

}



.hero p{

    font-size:18px;
    color:var(--muted);
    max-width:550px;

}




/* HERO CARD */

.hero-card{

    background:white;
    padding:50px 30px;
    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

}



.hero-card i{

    font-size:70px;
    color:var(--primary);

}



.hero-card h3{

    margin-top:20px;
    font-weight:700;

}




/* ==========================
   SEARCH
========================== */


.search-box{

    background:white;
    padding:8px;
    border-radius:50px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}



.search-box .input-group-text{

    background:white;
    border:none;
    padding-left:25px;

}



.search-box input{

    border:none;
    height:55px;

}


.search-box input:focus{

    box-shadow:none;

}


.search-box .btn{

    border-radius:50px;

}




/* ==========================
   KATEGORI
========================== */


.kategori-section{

    padding:30px 0;

}


.kategori-list{

    display:flex;
    gap:12px;
    overflow-x:auto;

}



.kategori-list::-webkit-scrollbar{

    display:none;

}



.kategori{

    border:none;
    background:white;

    padding:12px 25px;

    border-radius:50px;

    white-space:nowrap;

    color:#475569;

    box-shadow:
    0 5px 15px rgba(0,0,0,.05);

    transition:.3s;

}



.kategori:hover,
.kategori.active{

    background:var(--primary);
    color:white;

}





/* ==========================
   BOOK SECTION
========================== */


.buku-section{

    padding:60px 0;

}



.buku-section h3{

    font-weight:700;

}

.cover-box{
    transition:.3s;
}

.cover-box:hover{
    transform:translateY(-5px);
}

.cover-box img{
    border-radius:18px;
}



/* CARD BUKU */



.book-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    height:100%;

    transition:.3s;

    box-shadow:
    0 5px 20px rgba(0,0,0,.06);

}



.book-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);

}



.book-card img{

    width:100%;
    height:300px;

    object-fit:cover;

}



.card-content{

    padding:20px;

}



.card-content h5{

    font-weight:700;

    margin-top:15px;

}



.card-content p{

    color:var(--muted);

}



.book-footer{

    display:flex;
    justify-content:space-between;
    align-items:center;

}



.rating{

    color:#f59e0b;
    font-weight:600;

}





/* ==========================
   BUTTON
========================== */


.btn-primary{

    background:var(--primary);
    border:none;

}



.btn-primary:hover{

    background:var(--primary-dark);

}




/* ==========================
   FOOTER
========================== */


footer{

    background:white;

    padding:50px 0;

    border-top:
    1px solid #e5e7eb;

    color:var(--muted);

}



footer h5{

    color:var(--text);
    font-weight:700;

}

/* ==========================
   RESPONSIVE
========================== */


@media(max-width:768px){


.hero h1{
    font-size:40px;
}

.hero{
    padding-top:130px;
}

}