html{
scroll-behavior:smooth;
scroll-margin-top:70px;
}

nav.scrolled{
background:white;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

section{
scroll-margin-top:70px;
}

.hero{
height:100vh;
background-size:cover;
background-position:center;
animation:hero 20s infinite;
}

.hero-slider{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.5s ease;
}

.slide.active{
opacity:1;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.4);
}

@keyframes hero{

0%{background-image:url('/images/hero1.png');}

25%{background-image:url('/images/hero2.png');}

50%{background-image:url('/images/hero3.png');}

75%{background-image:url('/images/hero4.png');}

100%{background-image:url('/images/hero1.png');}

}

@media (max-width:768px){

.hero h1{
font-size:36px;
line-height:1.2;
}

.hero p{
font-size:16px;
}

}


.card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
}


/* PRODUK CARD */

.produk-card{
width:100%;
max-width:200px;
height: auto;
flex-shrink:0;
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:all .35s ease;
cursor:pointer;
object-fit: contain;
}

.produk-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.produk-card img{
width:100%;
height:240px;
object-fit:cover;
transition:transform .4s ease;
}

.produk-card:hover img{
transform:scale(1.1);
}

.produk-card h3{
padding:16px;
font-weight:600;
text-align:center;
font-size:18px;
color:#1f2937;
}

.produk-grid{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
gap:24px;
justify-items: center;
}

@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

.animate-fade{
animation:fadeUp .4s ease;
}

/* ======================
   PRODUK MODAL IMAGE
====================== */

#modalImg{
max-width:100%;
max-height:70vh;
width:auto;
height:auto;
object-fit:contain;
border-radius:12px;
display:block;
margin:auto;
}

#produkModal{
display:none;
align-items:center;
justify-content:center;
padding:20px;
}

#produkModal img{
max-width:100%;
max-height:70vh;
object-fit:contain;
}

/* ======================
   GALLERY 
====================== */

.gallery-card{
background:white;
border-radius:20px;
padding:30px;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}



/* scroll container */

.gallery-scroll{
max-height:520px;
overflow-y:auto;
padding-right:10px;
}

.gallery-scroll::-webkit-scrollbar{
width:6px;
}

.gallery-scroll::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:10px;
}

/* masonry grid */

.gallery-grid{
columns:3 250px;
column-gap:18px;
}

.gallery-grid img{
width:100%;
margin-bottom:18px;
border-radius:14px;
cursor:pointer;
transition:all .35s ease;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
break-inside:avoid;
}

.gallery-grid img:hover{
transform:scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.18);
}

/* lightbox */

.gallery-lightbox{
max-width:90%;
max-height:85vh;
border-radius:14px;
box-shadow:0 30px 60px rgba(0,0,0,0.4);
}

/* nav arrow */

.gallery-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
color:white;
background:rgba(0,0,0,0.4);
border-radius:50%;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:0.3s;
}

.gallery-nav:hover{
background:rgba(0,0,0,0.7);
}

.gallery-nav.left{
left:40px;
}

.gallery-nav.right{
right:40px;
}


/* WHATSAPP FLOAT */

.wa-container{
position:fixed;
bottom:25px;
right:25px;
display:flex;
align-items:center;
gap:10px;
z-index:999;
text-decoration:none;
}

.wa-bubble{
background:#ffffff;
color:#166534;
padding:12px 18px;
border-radius:30px;
font-size:15px;
font-weight:600;   /* tulisan lebih tebal */
box-shadow:0 5px 20px rgba(0,0,0,0.15);
white-space:nowrap;
}

.wa-icon{
width:52px;
height:52px;
transition:0.3s;
}

.wa-container:hover .wa-icon{
transform:scale(1.1);
}

/* SOCIAL MEDIA LIST */

.social-list{
display:flex;
flex-direction:column;
gap:14px;
}

.social-item{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:white;
font-size:15px;
transition:0.3s;
}

.social-item img{
width:34px;
height:34px;
object-fit:contain;
}

.social-item:hover{
transform:translateX(4px);
opacity:0.9;
}

.social-item span{
color:#e5e7eb;
}

/* CONTACT ITEM */

.contact-item{
display:flex;
align-items:center;
gap:12px;
color:#d1fae5;
font-size:15px;
}

.contact-icon{
width:22px;
height:22px;
object-fit:contain;
filter:brightness(0) invert(1);
}


/* SOCIAL */

.social-item{
display:flex;
align-items:center;
gap:12px;
transition:all .25s ease;
}

.contact-item img,
.social-item img{
width:26px;
height:26px;
object-fit:contain;
}

.social-item span{
color:#d1fae5;
}

.social-item:hover{
transform:translateX(4px);
}

.social-item:hover span{
color:white;
}

footer{
border-top: 1px solid rgba(255,255,255,0.1);
background:linear-gradient(180deg,#1f6f3c,#195a31);
}

@media (max-width:768px){

footer{
text-align:center;
align-items: center;
}

.contact-item,
.social-item{
justify-content:center;
}

}