/* ===================================================
   LEGAL PAGE V2
   Pondok Pesantren Al-Mahfudz Wates
=================================================== */

:root{
    --primary:#0B6B3A;
    --primary-dark:#08512C;
    --accent:#15b66d;
    --bg:#f5f7fb;
    --white:#fff;
    --text:#222;
    --muted:#6b7280;
    --border:#e5e7eb;
    --shadow:0 15px 35px rgba(0,0,0,.08);
    --radius:20px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,sans-serif;
    line-height:1.8;
}

/* ========================================= */

.legal-hero{

    background:linear-gradient(135deg,#0B6B3A,#0f9d58);

    color:#fff;

    padding:80px 20px;

    text-align:center;

}

.legal-hero h1{

    font-size:40px;

    margin:15px 0;

    font-weight:700;

}

.legal-hero p{

    max-width:700px;

    margin:auto;

    opacity:.95;

}

.hero-icon{

    width:90px;

    height:90px;

    background:rgba(255,255,255,.15);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:38px;

    backdrop-filter:blur(12px);

}

/* ========================================= */

.container{

    width:min(1100px,92%);

    margin:auto;

}

/* ========================================= */

.legal-card{

    background:#fff;

    margin-top:-45px;

    padding:40px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

/* ========================================= */

.legal-card h2{

    color:var(--primary);

    margin:35px 0 15px;

    font-size:26px;

    display:flex;

    align-items:center;

    gap:12px;

}

.legal-card h3{

    margin:25px 0 12px;

    color:#111827;

}

.legal-card p{

    color:#444;

    margin-bottom:18px;

}

.legal-card ul{

    margin:15px 0 25px 25px;

}

.legal-card li{

    margin:10px 0;

    color:#444;

}

/* ========================================= */

.info-box{

    background:#f8fafc;

    border-left:5px solid var(--primary);

    padding:20px;

    border-radius:14px;

    margin:30px 0;

}

.info-box strong{

    color:var(--primary);

}

/* ========================================= */

.notice{

    background:#ecfdf5;

    border:1px solid #bbf7d0;

    color:#166534;

    padding:20px;

    border-radius:14px;

    margin:30px 0;

}

/* ========================================= */

.contact-card{

    display:grid;

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

    gap:20px;

    margin-top:35px;

}

.contact-item{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:25px;

    text-align:center;

    transition:.3s;

}

.contact-item:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.contact-item i{

    width:70px;

    height:70px;

    background:linear-gradient(135deg,#0B6B3A,#15b66d);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:28px;

    margin-bottom:18px;

}

.contact-item h4{

    margin-bottom:10px;

}

.contact-item a{

    color:var(--primary);

    text-decoration:none;

    word-break:break-word;

}

.contact-item a:hover{

    text-decoration:underline;

}

/* ========================================= */

.table-info{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.table-info th{

    background:var(--primary);

    color:#fff;

}

.table-info th,

.table-info td{

    border:1px solid var(--border);

    padding:14px;

    text-align:left;

}

/* ========================================= */

.update-box{

    margin-top:40px;

    text-align:center;

    color:#6b7280;

    font-size:14px;

}

/* ========================================= */

.btn-back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    transition:.3s;

}

.btn-back:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/* ========================================= */

@media(max-width:768px){

.legal-card{

    padding:25px;

}

.legal-hero{

    padding:60px 15px;

}

.legal-hero h1{

    font-size:30px;

}

.hero-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.legal-card h2{

    font-size:22px;

}

.table-info{

    display:block;

    overflow:auto;

}

}