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

.mitra-hero{

background:linear-gradient(135deg,#12c48b,#0aa36f);

padding:80px 20px;

text-align:center;

color:#fff;

margin-bottom:50px;

}

.mitra-hero h1{

font-size:46px;

margin-bottom:10px;

}

.mitra-hero p{

font-size:20px;

opacity:.95;

}


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

.search-box{

max-width:1100px;

margin:0 auto 40px;

display:flex;

gap:15px;

flex-wrap:wrap;

padding:0 20px;

}

.search-box input,

.search-box select{

flex:1;

padding:14px 18px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

}

.search-box button{

background:#14b8a6;

color:#fff;

border:none;

padding:14px 30px;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

.search-box button:hover{

background:#0f766e;

}


/*==================================
GRID
==================================*/

.mitra-grid{

max-width:1200px;

margin:0 auto;

padding:0 20px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}


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

.mitra-card{

background:#fff;

border-radius:18px;

padding:28px;

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

transition:.3s;

border-top:5px solid #14b8a6;

}

.mitra-card:hover{

transform:translateY(-6px);

}

.mitra-card h2{

margin-top:0;

margin-bottom:18px;

color:#0f766e;

font-size:26px;

}

.mitra-card p{

margin:10px 0;

color:#666;

line-height:1.6;

}


/*==================================
BUTTON
==================================*/

.btn-detail{

display:inline-block;

margin-top:18px;

background:#14b8a6;

color:#fff;

padding:12px 24px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.btn-detail:hover{

background:#0f766e;

}


/*==================================
PAGINATION
==================================*/

.pagination{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin:50px 0;

}

.pagination a{

padding:10px 16px;

border-radius:8px;

background:#fff;

border:1px solid #ddd;

text-decoration:none;

color:#333;

font-weight:bold;

}

.pagination a.active{

background:#14b8a6;

color:#fff;

border-color:#14b8a6;

}

.pagination a:hover{

background:#14b8a6;

color:#fff;

}


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

@media(max-width:768px){

.mitra-hero h1{

font-size:34px;

}

.search-box{

flex-direction:column;

}

.search-box input,

.search-box select,

.search-box button{

width:100%;

}

}
/*==================================
INFORMASI MITRA
==================================*/

.mitra-info{

margin:60px auto;

max-width:1100px;

padding:0 20px;

}

.info-box{

background:#fff;

padding:35px;

border-radius:18px;

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

border-top:5px solid #14b8a6;

}

.info-box h2{

margin-top:0;

color:#0f766e;

font-size:28px;

}

.info-box h3{

margin-top:30px;

color:#14b8a6;

}

.info-box p{

line-height:1.8;

color:#555;

}

.info-box ul{

margin:20px 0;

padding-left:20px;

line-height:2;

}

.contact-box{

margin:25px 0;

padding:25px;

background:#f5fffd;

border-radius:12px;

text-align:center;

}

.contact-box p{

margin:10px 0;

font-size:17px;

font-weight:600;

}

.btn-wa{

display:inline-block;

background:#25D366;

color:#fff;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

font-weight:bold;

margin-bottom:15px;

transition:.3s;

}

.btn-wa:hover{

background:#1fa855;

transform:translateY(-2px);

}

.btn-wa i{

margin-right:8px;

}

.info-box hr{

margin:35px 0;

border:none;

border-top:1px solid #e5e7eb;

}

@media(max-width:768px){

.info-box{

padding:25px;

}

.info-box h2{

font-size:24px;

}

}