/* TABLET */

@media screen and (max-width:992px){

.header{
flex-direction:column;
gap:15px;
}

.search input{
width:100%;
}

.product{
grid-template-columns:1fr;
}

.info{
margin-top:15px;
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

}

/* MOBILE */

@media screen and (max-width:768px){

.logo{

font-size:32px;

text-align:center;

}

.header{

padding:15px;

}

.search{

width:100%;

}

.search input{

width:100%;

}

.menu{

flex-wrap:wrap;

gap:12px;

padding:12px;

}

.menu a{

font-size:14px;

}

.cta{

flex-direction:column;

align-items:center;

padding:20px;

}

.btn-daftar,
.btn-login{

width:90%;

font-size:22px;

}

.product{

grid-template-columns:1fr;

padding:15px;

}

.thumbs{

display:flex;

gap:10px;

overflow-x:auto;

}

.thumbs img{

width:80px;

height:auto;

flex-shrink:0;

}

.banner img{

width:100%;

border-radius:10px;

}

.info{

width:100%;

padding:20px;

}

.info h1{

font-size:30px;

}

.info h2{

font-size:22px;

}

.link-grid{

grid-template-columns:1fr;

}

.seo-content{

padding:25px;

}

.seo-content h2{

font-size:28px;

line-height:1.4;

}

.seo-content p{

font-size:15px;

line-height:1.9;

}

.faq{

padding:20px;

}

.faq-box{

padding:20px;

}

.faq-box h2{

font-size:26px;

}

.faq-item h3{

font-size:16px;

line-height:1.6;

}

.faq-item p{

font-size:14px;

line-height:1.8;

}

.review-header{

align-items:flex-start;

}

.review-avatar{

width:50px;
height:50px;

font-size:20px;

}

.review-user h3{

font-size:16px;

}

.card h4{

font-size:18px;

}

.card p{

font-size:14px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.sticky-footer{

padding:10px;

gap:10px;

}

.sticky-footer a{

padding:12px 25px;

font-size:14px;

}

}

/* HP KECIL */

@media screen and (max-width:480px){

.logo{

font-size:28px;

}

.top-menu{

flex-wrap:wrap;

gap:10px;

}

.top-menu a{

font-size:12px;

}

.search button{

padding:12px 15px;

}

.btn-daftar,
.btn-login{

font-size:18px;

padding:16px;

}

.info h1{

font-size:26px;

}

.info h2{

font-size:20px;

}

.seo-content{

padding:20px;

}

.seo-content h2{

font-size:24px;

}

.faq-box h2{

font-size:22px;

}

.review-card{

padding:15px;

}

.review-avatar{

width:45px;
height:45px;

}

.sticky-footer{

flex-direction:column;

}

.sticky-footer a{

width:100%;

text-align:center;

}

}

@media (max-width:768px){

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

}

@media (max-width:480px){

    .menu-box{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .box-item{
        min-height:80px;
    }

    .box-item span{
        font-size:11px;
    }

}

/* ACCORDION MOBILE */

@media screen and (max-width:768px){

    .footer-grid{
        display:none !important;
    }

    .footer-accordion{
        display:block !important;
    }

    .mobile-newsletter{
        display:block !important;

        margin:20px;

        padding:20px;

        background:#fff;

        border:1px solid #ddd;

        border-radius:10px;
    }

}

@media screen and (min-width:769px){

    .footer-accordion{
        display:none !important;
    }

    .mobile-newsletter{
        display:none !important;
    }

}

@media(max-width:768px){

.topbar-menu{

    justify-content:center;

    gap:10px;

}

.topbar-menu a{

    font-size:11px;

}

.language{

    font-size:11px;

}

}

@media(max-width:768px){

    .product-title{
        font-size:28px;
    }

    .action-btn{
        flex-direction:column;
    }

    .link-grid{
        grid-template-columns:1fr;
    }

}

@media screen and (max-width:768px){

    .footer-newsletter{

        display:block !important;

        width:100%;

        margin:20px auto;

        padding:20px;

        background:#fff;

    }

}