/* =====================================
   CariCecep Main Style
===================================== */

:root{

    --mainColor:#FFD400;

    --background:#f5f5f5;

    --text:#222;

    --card:#ffffff;

}



/* RESET */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    font-family:Arial, Helvetica, sans-serif;

    background:var(--background);

    color:var(--text);

    transition:.3s;

}


/* ==============================
HEADER
============================== */


header{

    width:100%;

    height:75px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 50px;

    position:sticky;

    top:0;

    z-index:100;

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

}



.logo{

    display:flex;

    align-items:center;

    gap:12px;

}



.logo img{

    width:45px;

    height:45px;

    object-fit:contain;

}



.logo h1{

    font-size:28px;

    color:var(--mainColor);

}



nav{

    display:flex;

    gap:15px;

    align-items:center;

}



nav button{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--mainColor);

    font-size:18px;

}



.loginButton{

    background:var(--mainColor);

    color:#000;

    text-decoration:none;

    padding:12px 22px;

    border-radius:12px;

    font-weight:bold;

}



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


.hero{

    text-align:center;

    padding:90px 20px 40px;

}



.hero h2{

    font-size:45px;

    margin-bottom:15px;

}



.hero p{

    color:#777;

    margin-bottom:35px;

}



/* SEARCH */


.searchBox{

    max-width:750px;

    margin:auto;

    display:flex;

    background:white;

    border-radius:50px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}



.searchBox input{

    flex:1;

    border:none;

    outline:none;

    padding:20px;

    font-size:18px;

}



.searchBox button{

    width:160px;

    border:none;

    background:var(--mainColor);

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

}




/* ==============================
SUGGESTION
============================== */


#suggestionBox{

    max-width:750px;

    margin:15px auto;

}



.suggest-item{

    background:white;

    padding:15px;

    border-radius:10px;

    margin-bottom:8px;

    cursor:pointer;

}



/* ==============================
TRENDING
============================== */


.trending{

    text-align:center;

    margin-top:40px;

}



.tags span{

    display:inline-block;

    background:var(--mainColor);

    padding:10px 20px;

    border-radius:30px;

    margin:8px;

    cursor:pointer;

    font-weight:bold;

}



/* ==============================
CATEGORY
============================== */


.category{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin:40px;

}



.category button{

    padding:12px 20px;

    border:none;

    border-radius:30px;

    background:white;

    cursor:pointer;

}



.category .active{

    background:var(--mainColor);

}



/* ==============================
RESULT
============================== */


#resultContainer{

    max-width:1100px;

    width:90%;

    margin:40px auto;

}



.result-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:var(--card);

    padding:20px;

    margin-bottom:20px;

    border-radius:18px;

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

}



.result-card img{

    width:70px;

    height:70px;

    border-radius:15px;

}



.result-info{

    flex:1;

}



.result-info h3{

    margin-bottom:10px;

}



.result-info p{

    color:#777;

}



.visit{

    background:var(--mainColor);

    padding:12px 20px;

    border-radius:10px;

    text-decoration:none;

    color:#000;

    font-weight:bold;

}



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


footer{

    text-align:center;

    padding:40px;

    background:white;

    margin-top:80px;

    color:#777;

}




/* ==============================
DARK MODE
============================== */


body.dark{

    --background:#111;

    --text:white;

    --card:#1e1e1e;

}



body.dark header{

    background:#1b1b1b;

}



body.dark footer{

    background:#1b1b1b;

}



body.dark .searchBox{

    background:#222;

}



body.dark .searchBox input{

    background:#222;

    color:white;

}



body.dark .suggest-item{

    background:#222;

}




/* ==============================
LOADING
============================== */


.loader{

    width:50px;

    height:50px;

    border:5px solid #ddd;

    border-top:5px solid var(--mainColor);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}



@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}




/* ==============================
MOBILE
============================== */


@media(max-width:768px){


header{

    padding:15px;

}



.logo h1{

    font-size:22px;

}



.hero h2{

    font-size:30px;

}



.searchBox{

    flex-direction:column;

    border-radius:15px;

}



.searchBox button{

    width:100%;

    height:55px;

}



.result-card{

    flex-direction:column;

    text-align:center;

}


}
body{

background-repeat:no-repeat;

background-position:center;

}