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

.hero-produk{
padding:90px 0 130px;
background:linear-gradient(135deg,#154C79,#19706B);
color:#fff;
position:relative;
overflow:hidden;
}

.hero-produk::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:320px;
height:320px;
background:rgba(255,255,255,.08);
border-radius:50%;
}

.hero-produk::after{
content:"";
position:absolute;
bottom:-150px;
left:-120px;
width:350px;
height:350px;
background:rgba(255,255,255,.05);
border-radius:50%;
}

.hero-breadcrumb{
margin-bottom:18px;
font-size:15px;
}

.hero-breadcrumb a{
color:#fff;
text-decoration:none;
opacity:.8;
}

.hero-breadcrumb span{
margin:0 10px;
opacity:.6;
}

.hero-breadcrumb strong{
font-weight:600;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 18px;
background:rgba(255,255,255,.15);
border-radius:50px;
font-size:14px;
margin-bottom:20px;
backdrop-filter:blur(10px);
}

.hero-produk h1{
font-size:48px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
}

.hero-produk p{
font-size:18px;
opacity:.9;
max-width:650px;
}

.hero-stat{
display:flex;
gap:20px;
margin-top:40px;
flex-wrap:wrap;
}

.hero-stat div{
background:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
padding:18px 28px;
border-radius:18px;
min-width:130px;
}

.hero-stat h3{
font-size:30px;
margin-bottom:5px;
font-weight:700;
}

.hero-stat span{
font-size:14px;
opacity:.85;
}

.hero-action{
display:flex;
justify-content:end;
align-items:center;
height:100%;
}

.hero-action .btn{
padding:15px 35px;
border-radius:50px;
font-weight:600;
}


/*=====================================
SEARCH
======================================*/

.produk-search{
margin-top:-60px;
position:relative;
z-index:20;
}

.search-wrapper{
background:#fff;
border-radius:24px;
padding:25px;
box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.search-wrapper .form-control,
.search-wrapper .form-select{
height:56px;
border-radius:16px;
border:1px solid #E5E7EB;
}

.search-wrapper .btn{
height:56px;
border-radius:16px;
font-weight:600;
}


/*=====================================
SECTION
======================================*/

.produk-section{
padding:70px 0;
background:#F6F8FB;
}

.section-heading{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
flex-wrap:wrap;
gap:20px;
}

.section-heading span{
color:#0F4C81;
font-weight:600;
}

.section-heading h2{
font-size:34px;
font-weight:800;
margin:10px 0;
}

.section-heading p{
color:#6B7280;
margin:0;
}

.produk-total{
display:inline-block;
background:#154C79;
color:#fff;
padding:12px 24px;
border-radius:50px;
}

.produk-info{
margin-bottom:25px;
color:#6B7280;
}


/*=====================================
CARD
======================================*/

.produk-card{
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.06);
transition:.35s;
height:100%;
display:flex;
flex-direction:column;
}

.produk-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.produk-header{
padding:25px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #EEF2F7;
}

.produk-icon{
width:70px;
height:70px;
background:#EAF2FB;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
}

.produk-icon i{
font-size:34px;
color:#154C79;
}

.produk-kategori{
background:#EEF6FF;
color:#154C79;
padding:8px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
}

.produk-body{
padding:25px;
flex:1;
}

.produk-body h3{
font-size:21px;
font-weight:700;
margin-bottom:20px;
line-height:1.5;
color:#1F2937;
}

.produk-meta{
display:flex;
justify-content:space-between;
gap:20px;
margin-top:20px;
padding-top:20px;
border-top:1px dashed #D7DEE7;
}

.produk-meta strong{
font-size:13px;
color:#6B7280;
}

.produk-footer{
padding:22px;
display:flex;
gap:12px;
border-top:1px solid #EEF2F7;
}

.produk-footer .btn{
flex:1;
border-radius:14px;
padding:11px;
font-weight:600;
}


/*=====================================
EMPTY
======================================*/

.empty-produk{
background:#fff;
padding:80px 30px;
border-radius:24px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.empty-produk i{
font-size:75px;
color:#CBD5E1;
}

.empty-produk h3{
margin-top:20px;
font-weight:700;
}

.empty-produk p{
color:#6B7280;
margin-bottom:25px;
}


/*=====================================
RESPONSIVE
======================================*/

@media(max-width:992px){

.hero-produk{
padding:70px 0 110px;
text-align:center;
}

.hero-produk h1{
font-size:38px;
}

.hero-action{
justify-content:center;
margin-top:35px;
}

.hero-stat{
justify-content:center;
}

.section-heading{
text-align:center;
justify-content:center;
}

}

@media(max-width:768px){

.hero-produk h1{
font-size:30px;
}

.hero-produk p{
font-size:15px;
}

.search-wrapper{
padding:18px;
}

.produk-footer{
flex-direction:column;
}

.hero-stat{
flex-direction:column;
align-items:center;
}

.hero-stat div{
width:100%;
max-width:220px;
text-align:center;
}

}

/*=====================================
ANIMATION
======================================*/

.produk-card{
opacity:0;
transform:translateY(35px);
transition:.5s ease;
}

.produk-card.show{
opacity:1;
transform:translateY(0);
}