/* ======================================
   MITRA DETAIL - Cuci Express
====================================== */

:root{
    --primary:#14b8a6;
    --primary-dark:#0f766e;
    --primary-light:#ecfffb;
    --white:#ffffff;
    --text:#2d3748;
    --muted:#6b7280;
    --border:#e5e7eb;
    --shadow:0 10px 30px rgba(20,184,166,.12);
    --radius:18px;
}

/* ======================================
BODY
====================================== */

body{
    background:#f8fafc;
    color:var(--text);
}

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

.mitra-hero{

    background:linear-gradient(135deg,#14b8a6,#0f766e);

    color:#fff;

    text-align:center;

    padding:70px 20px;

}

.mitra-hero h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.mitra-hero p{

    font-size:18px;

    opacity:.95;

}

/* ======================================
BREADCRUMB
====================================== */

.breadcrumb{

    margin:30px auto;

    font-size:14px;

    color:#777;

}

.breadcrumb a{

    color:var(--primary-dark);

    text-decoration:none;

}

.breadcrumb span{

    margin:0 8px;

}

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

.mitra-card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

    display:flex;

    gap:35px;

    align-items:center;

    margin-bottom:40px;

}

.logo-area{

    width:180px;

    text-align:center;

}

.logo-area img{

    width:160px;

    height:160px;

    object-fit:contain;

    border-radius:20px;

    border:1px solid #eee;

    background:#fff;

}

.logo-placeholder{

    width:160px;

    height:160px;

    border-radius:20px;

    background:var(--primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:70px;

    margin:auto;

}

.info-area{

    flex:1;

}

.info-area h2{

    margin:0;

    font-size:34px;

    color:var(--primary-dark);

}

.badge{

    display:inline-block;

    margin:15px 0;

    padding:8px 16px;

    border-radius:50px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-weight:600;

    font-size:14px;

}

.info-area table{

    width:100%;

    border-collapse:collapse;

}

.info-area td{

    padding:10px 0;

    border-bottom:1px solid #eee;

    vertical-align:top;

}

.info-area td:first-child{

    width:130px;

    font-weight:600;

    color:#555;

}

/* ======================================
DETAIL
====================================== */

.detail-box{

    background:#fff;

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}

.detail-box h3{

    color:var(--primary-dark);

    margin-bottom:20px;

}

/* ======================================
FOTO
====================================== */

.foto-outlet{

    width:100%;

    border-radius:15px;

    display:block;

}

.foto-kosong{

    height:380px;

    background:#f4f4f4;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    color:#999;

    font-size:24px;

}

/* ======================================
SIDEBAR
====================================== */

.sidebar-box{

    background:#fff;

    border-radius:var(--radius);

    padding:25px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.sidebar-box h3{

    margin-top:0;

    color:var(--primary-dark);

}

.sidebar-box p{

    line-height:1.7;

    color:#666;

}

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

.btn-wa,

.btn-green,

.btn-detail{

    display:block;

    width:100%;

    text-align:center;

    text-decoration:none;

    border-radius:50px;

    padding:14px;

    margin-top:20px;

    transition:.3s;

    font-weight:600;

}

.btn-wa{

    background:#25D366;

    color:#fff;

}

.btn-wa:hover{

    background:#1ea952;

}

.btn-green,

.btn-detail{

    background:var(--primary);

    color:#fff;

}

.btn-green:hover,

.btn-detail:hover{

    background:var(--primary-dark);

}

/* ======================================
LAYANAN
====================================== */

.layanan{

    padding-left:20px;

    margin:0;

}

.layanan li{

    padding:8px 0;

}

/* ======================================
RELATED MITRA
====================================== */

.section-title{

    text-align:center;

    color:var(--primary-dark);

    margin:70px 0 40px;

    font-size:34px;

}

.related-grid{

    display:grid;

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

    gap:25px;

}

.related-card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    text-align:center;

    transition:.3s;

}

.related-card:hover{

    transform:translateY(-5px);

}

.related-logo{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:15px;

}

.related-logo-placeholder{

    width:90px;

    height:90px;

    border-radius:50%;

    background:var(--primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 15px;

    font-size:38px;

}

.related-card h3{

    margin-bottom:10px;

    color:var(--primary-dark);

}

.related-card p{

    color:#666;

    min-height:55px;

}

/* ======================================
CTA
====================================== */

.mitra-cta{

    margin-top:80px;

    background:linear-gradient(135deg,#14b8a6,#0f766e);

    color:#fff;

    text-align:center;

    padding:80px 20px;

    border-radius:25px;

}

.mitra-cta h2{

    font-size:36px;

    margin-bottom:20px;

}

.mitra-cta p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    margin-bottom:35px;

}

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

@media(max-width:768px){

.mitra-card{

    flex-direction:column;

    text-align:center;

}

.logo-area{

    width:100%;

}

.info-area table{

    text-align:left;

}

.info-area td:first-child{

    width:90px;

}

.mitra-hero h1{

    font-size:30px;

}

.section-title{

    font-size:28px;

}

.mitra-cta h2{

    font-size:28px;

}

}