*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#f6f7fb;
color:#082B67;
}



/* HEADER */

header{

background:#fff;

position:sticky;

top:0;

z-index:999;

box-shadow:
0 3px 20px rgba(0,0,0,.05);

}



.container{

max-width:1400px;

margin:auto;

padding:18px;

display:flex;

justify-content:space-between;

align-items:center;

}



.logo img{

height:58px;

display:block;

}



nav{

display:flex;

gap:10px;

overflow-x:auto;

padding-bottom:5px;

}



nav::-webkit-scrollbar{

display:none;

}



nav a{

background:#fff;

padding:10px 16px;

border-radius:999px;

text-decoration:none;

color:#082B67;

font-weight:700;

font-size:13px;

white-space:nowrap;

border:1px solid #ececec;

}





/* BANNER */

.banner{

max-width:1400px;

margin:auto;

padding:18px;

}



.hero{

width:100%;

height:170px;

overflow:hidden;

border-radius:22px;

margin-bottom:12px;

}



.hero img{

width:100%;

height:100%;

object-fit:cover;

object-position:center;

display:block;

}



.double-banner{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

}



.double-banner img{

width:100%;

height:110px;

object-fit:cover;

object-position:center;

border-radius:18px;

display:block;

}





/* KATEGORI */

.kategori{

max-width:1400px;

margin:auto;

padding:15px 18px;

}



.kategori h2{

font-size:24px;

margin-bottom:18px;

}



.category{

display:flex;

gap:10px;

overflow-x:auto;

padding-bottom:10px;

}



.category::-webkit-scrollbar{

display:none;

}



.category a{

padding:12px 18px;

background:#fff;

border-radius:999px;

border:1px solid #e9e9e9;

color:#082B67;

text-decoration:none;

font-size:13px;

font-weight:700;

white-space:nowrap;

}





/* PRODUK */

#produk{

max-width:1400px;

margin:auto;

padding:15px 15px 50px;

}



#produk h2{

font-size:24px;

margin-bottom:20px;

}



.products{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(
220px,
1fr
)

);

gap:14px;

}

.products::-webkit-scrollbar{

display:none;

}



.card{

background:#fff;

padding:14px;

border-radius:20px;

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

display:flex;

flex-direction:column;

}



.card img{

width:100%;

height:150px;

object-fit:contain;

display:block;

}



.card h3{

font-size:14px;

margin-top:10px;

height:40px;

overflow:hidden;

}



.price{

margin-top:10px;

font-size:16px;

font-weight:800;

}



.buy{

display:flex;

align-items:center;

justify-content:center;

width:100%;

height:46px;

margin-top:14px;

background:#082B67;

color:white;

border-radius:14px;

font-weight:800;

text-decoration:none;

flex:none;

}





/* LIVE CHAT */

/* FLOAT SHOPEE */

.shopee-float{

position:fixed;

right:16px;

bottom:90px;

width:46px;

height:46px;

background:#082B67;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

z-index:9999;

box-shadow:

0 8px 18px

rgba(0,0,0,.2);

}



/* KECILKAN TAWK */

iframe[title="chat widget"]{

transform:

scale(.82);

transform-origin:

bottom right;

}



@media(max-width:768px){

.shopee-float{ 
    

width:42px;

height:42px;

bottom:75px;

font-size:18px;

}

.shopee-float img{

width:20px;

height:20px;

object-fit:contain;

display:block;

}


iframe[title="chat widget"]{

transform:

scale(.74);

}

}





/* FOOTER */

footer{

background:#082B67;

color:white;

text-align:center;

padding:40px;

margin-top:40px;

line-height:2;

}





/* MOBILE */

@media(max-width:768px){

nav{

display:flex;

width:100%;

margin-top:10px;

}

@media(max-width:768px){

.sliderproduk .card{

width:48%;

min-width:48%;

}

}



.logo img{

height:48px;

}



.hero{

height:140px;

}



.double-banner img{

height:90px;

}



display:flex;

overflow-x:auto;

gap:12px;

}

.products{

display:grid;

grid-template-columns:

repeat(2,minmax(0,1fr));

gap:10px;

width:100%;

}

.card{

min-width:220px;

}



.card img{

height:120px;

}



.card h3{

font-size:12px;

height:34px;

}



.price{

font-size:14px;

}



.buy{

padding:10px;

font-size:12px;

}



.kategori h2,

#produk h2{

font-size:18px;

}

}

.notif{

display:inline-flex;

align-items:center;

justify-content:center;

min-width:22px;

height:22px;

padding:0 6px;

background:red;

color:white;

border-radius:999px;

font-size:12px;

font-weight:800;

margin-left:8px;

}

/* SEARCH */

.searchbox{

width:100%;    

display:flex;

gap:10px;

margin:20px 0 35px;

}



.searchbox input{

flex:1;

height:52px;

border:none;

background:#f3f4f7;

padding:0 18px;

border-radius:16px;

font-size:15px;

}



.searchbox button{

width:120px;

border:none;

background:#082B67;

color:white;

border-radius:16px;

font-weight:700;

}



@media(max-width:768px){

.searchbox{

flex-direction:column;

}



.searchbox button{

width:100%;

height:52px;

}

}

/* FILTER */

.filterkategori{

display:flex;

gap:10px;

overflow:auto;

margin-bottom:30px;

padding-bottom:5px;

}



.filterkategori::-webkit-scrollbar{

display:none;

}



.filterkategori a{

padding:12px 18px;

background:#f3f4f7;

border-radius:999px;

text-decoration:none;

color:#082B67;

font-weight:700;

white-space:nowrap;

font-size:14px;

}



.filterkategori a:hover{

background:#082B67;

color:white;

}

.subheader{

background:#fff;

padding:15px 20px;

border-bottom:1px solid #eee;

position:sticky;

top:0;

z-index:999;

}

.back-home{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-decoration:none;

color:#082B67;

font-weight:700;

font-size:14px;

line-height:1.2;

}

.back-home img{

width:auto;

height:42px;

display:block;

margin-bottom:6px;

}

.sliderproduk{

display:flex;

overflow-x:auto;

gap:14px;

padding-bottom:10px;

scroll-behavior:smooth;

}

.sliderproduk::-webkit-scrollbar{

display:none;

}

.sliderproduk .card{

width:48%;

min-width:48%;

flex-shrink:0;

}

html,
body{

overflow-x:hidden;

max-width:100%;

}