/* =========================================
KATA PENGANTAR GALERI
========================================= */

.gallery-intro-section{
padding:90px 0;
}

.gallery-intro-card{

display:block;

background:#fff;

border-radius:32px;

padding:35px;

box-shadow:
0 15px 40px rgba(0,0,0,.06);

overflow:hidden;

}

.gallery-intro-image{

float:left;

width:380px;

max-width:45%;

margin:
0 35px 20px 0;

}

.gallery-intro-image img{

width:100%;

display:block;

border-radius:24px;

object-fit:cover;

transition:.7s ease;

}

.gallery-intro-card:hover img{

transform:scale(1.03);

}

.gallery-intro-content h2{

font-size:2rem;

font-weight:800;

color:#1f6b4f;

line-height:1.3;

margin:
15px 0 20px;

}

.gallery-intro-content p{

font-size:1rem;

line-height:1.9;

color:#666;

margin-bottom:16px;

text-align:justify;

}

.gallery-intro-card::after{

content:"";

display:block;

clear:both;

}

/* tombol */

.gallery-readmore-btn{

display:none;

margin-top:15px;

padding:12px 22px;

border:none;

border-radius:999px;

background:
linear-gradient(
135deg,
#d4af37,
#f4d06f
);

color:#222;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.gallery-readmore-btn:hover{

transform:translateY(-3px);

box-shadow:
0 10px 20px rgba(212,175,55,.35);

}
/* =========================================
FILTER GALERI
========================================= */

.gallery-section{

padding:90px 0;

}

.gallery-section h2{

color:#1f6b4f;

}

.gallery-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-top:40px;

margin-bottom:50px;

}

.gallery-filter-btn{

border:none;

padding:12px 22px;

border-radius:999px;

background:#fff;

color:#1f6b4f;

font-weight:600;

cursor:pointer;

transition:.3s;

border:
1px solid rgba(31,107,79,.15);

}

.gallery-filter-btn:hover{

transform:translateY(-3px);

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

}

.gallery-filter-btn.active{

background:
linear-gradient(
135deg,
#d4af37,
#f4d06f
);

color:#222;

border:none;

}/* =========================================
PERBAIKAN WARNA CTA GALLERY
========================================= */

.cta-section h2{
color:#ffffff !important;
}

.cta-section p{
color:rgba(255,255,255,.95) !important;
}

.cta-section .cta-badge{
color:#ffffff !important;
}
/* =========================================
KATA PENGANTAR GALERI HP
========================================= */

@media(max-width:768px){

.gallery-intro-card{

padding:20px;

}

.gallery-intro-image{

float:none;

width:100%;

max-width:100%;

margin:0 0 20px;

}

.gallery-intro-content h2{

font-size:1.6rem;

}

.gallery-text-wrapper{

max-height:150px;

overflow:hidden;

transition:
max-height .5s ease;

}

.gallery-text-wrapper.active{

max-height:1000px;

}

.gallery-readmore-btn{

display:inline-flex;

}
/* =========================================
GRID GALERI PREMIUM HP
========================================= */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:24px;

height:280px;

cursor:pointer;

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

transition:.4s ease;

}

.gallery-item:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(0,0,0,.15);

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s ease;

display:block;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:20px;

background:
linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.15),
transparent
);

}

.gallery-overlay span{

font-size:.8rem;

color:#f4d06f;

font-weight:700;

margin-bottom:6px;

}

.gallery-overlay h3{

color:#fff;

font-size:1.1rem;

font-weight:700;

line-height:1.4;

}
/* =========================================
RESPONSIVE GALERI HP
========================================= */
.gallery-grid{

grid-template-columns:
repeat(2,1fr);

gap:15px;

}

.gallery-item{

height:190px;

}

.gallery-overlay{

padding:12px;

}

.gallery-overlay h3{

font-size:.9rem;

}

.gallery-overlay span{

font-size:.7rem;

}
}
/* =========================================
RESPONSIVE GALERI TABLET
========================================= */

@media(max-width:992px){

.gallery-grid{

grid-template-columns:
repeat(2,1fr);

}

}