:root{
    --primary:#176b87;
    --primary-dark:#0f4f65;
    --accent:#f5b942;
    --text:#173042;
    --muted:#6b7c88;
    --soft:#f3f8fa;
    --white:#fff;
    --border:#e4edf0;
    --shadow:0 16px 45px rgba(23,48,66,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.7}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,92%);margin:auto}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:44px;height:44px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 20px rgba(23,107,135,.25)}
.brand strong{display:block;font-size:17px;line-height:1.2}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.nav{display:flex;align-items:center;gap:5px}
.nav a{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;color:#49606c;transition:.2s}
.nav a:hover,.nav a.active{background:#eaf5f8;color:var(--primary)}
.menu-toggle{display:none;border:0;background:var(--primary);color:#fff;font-size:22px;border-radius:9px;padding:7px 11px}
.hero{min-height:610px;position:relative;display:flex;align-items:center;background:linear-gradient(120deg,#0f5268,#2485a0 55%,#69b4bd);overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% -35% 35%;height:420px;background:rgba(255,255,255,.09);border-radius:50%;transform:rotate(-10deg)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,255,255,.18),transparent 35%)}
.hero-content{position:relative;z-index:2;color:#fff;padding:90px 0;max-width:760px}
.badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:30px;font-size:13px;font-weight:700}
.hero h1 {font-size: clamp(36px, 4.5vw, 62px);line-height: 1.1;margin: 18px 0;white-space: nowrap;}
.hero h1 span,.section-heading h2 span,.two-col h2 span,.about-banner h2 span{color:var(--accent)}
.hero p{font-size:20px;max-width:650px;color:#e9f7fa}
.hero-buttons{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 20px;font-weight:700;cursor:pointer;transition:.2s}
.btn-primary{background:var(--accent);color:#263a42}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 9px 25px rgba(0,0,0,.12)}
.btn-light{background:#fff;color:var(--primary)}
.quick-info{margin-top:-45px;position:relative;z-index:5}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:#fff;border-radius:15px;padding:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:15px}
.icon{font-size:30px}
.info-card strong{display:block}.info-card span{display:block;color:var(--muted);font-size:13px}
.section{padding:100px 0}
.section-soft{background:var(--soft)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.section-label,.mini-label{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--primary)}
.two-col h2,.section-heading h2,.about-banner h2{font-size:42px;line-height:1.2;margin:10px 0 18px}
.lead{font-size:17px;color:#526975}
.section-image{min-height:410px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.image-placeholder{height:100%;min-height:410px;background:linear-gradient(145deg,#dceff3,#a9d4dc);display:grid;place-items:center;align-content:center;text-align:center;color:var(--primary)}
.image-placeholder span{font-size:80px}.image-placeholder p{font-size:20px;font-weight:800}.image-placeholder small{color:#55737d}
.stats{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.stats div{padding:15px 20px;background:#f3f8fa;border-radius:12px;min-width:120px}.stats strong{display:block;font-size:24px;color:var(--primary)}.stats span{font-size:12px;color:var(--muted)}
.section-heading{text-align:center;max-width:700px;margin:0 auto 45px}.section-heading p{color:var(--muted)}
.vision-card{display:flex;align-items:center;gap:25px;background:#fff;padding:30px;border-radius:18px;box-shadow:var(--shadow);max-width:900px;margin:0 auto 25px}.vision-icon{width:65px;height:65px;flex:none;border-radius:18px;background:#fff4d8;display:grid;place-items:center;font-size:30px}.vision-card h3{font-size:20px;margin-top:5px}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mission-card{background:#fff;border:1px solid var(--border);padding:26px;border-radius:16px}.mission-card b{color:var(--accent);font-size:25px}.mission-card h3{margin:8px 0}.mission-card p,.activity-body p{color:var(--muted);font-size:14px}
.row-heading{display:flex;justify-content:space-between;align-items:end;text-align:left;max-width:none}.row-heading h2{margin-bottom:0}.text-link{font-weight:700;color:var(--primary)}
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.activity-card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;transition:.25s}.activity-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.activity-photo{height:200px;display:grid;place-items:center;font-size:60px}.photo-1{background:#dff1f4}.photo-2{background:#fff0d5}.photo-3{background:#e4f1df}.activity-body{padding:22px}.activity-body small{color:var(--primary);font-weight:700}.activity-body h3{margin:5px 0}
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:210px;gap:15px}.gallery-item{border-radius:17px;overflow:hidden;background:linear-gradient(135deg,#d8edf1,#8cc3cc);display:grid;place-items:center}.gallery-item.large{grid-row:span 2}.gallery-item div{text-align:center;font-size:55px}.gallery-item small{display:block;font-size:14px;font-weight:700;color:#365762}
.feedback-form{background:#fff;padding:30px;border-radius:18px;box-shadow:var(--shadow)}.feedback-form label{display:block;font-weight:700;font-size:14px;margin-bottom:16px}.feedback-form input,.feedback-form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font:inherit;outline:0}.feedback-form input:focus,.feedback-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,107,135,.08)}.contact-note{margin-top:25px;background:#f3f8fa;border-left:4px solid var(--accent);padding:15px;border-radius:10px}
.about-banner{padding:80px 0;background:var(--primary);color:#fff}.about-content{max-width:800px}.about-content p{color:#d8edf1;max-width:680px}.about-content .section-label{color:#fbd47a}
.footer{background:#102c3b;color:#d4e3e8;padding-top:60px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:50px;padding-bottom:45px}.footer h4{color:#fff;margin-bottom:12px}.footer a:not(.brand){display:block;margin:5px 0;color:#bdd0d6;font-size:14px}.footer p{color:#a9c1c9;font-size:14px}.footer-brand strong{color:#fff}.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding:18px;font-size:13px;color:#8eaab4}
@media(max-width:900px){.nav{position:absolute;top:76px;left:4%;right:4%;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:none;flex-direction:column;align-items:stretch}.nav.show{display:flex}.nav a{padding:12px}.menu-toggle{display:block}.info-grid,.mission-grid,.activity-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr;gap:35px}.section-image{min-height:300px}.gallery{grid-template-columns:1fr 1fr}.gallery-item.large{grid-row:span 1}.footer-grid{grid-template-columns:1fr 1fr}.row-heading{align-items:start;gap:15px;flex-direction:column}}
@media(max-width:560px){.hero{min-height:560px}.hero p{font-size:16px}.section{padding:70px 0}.two-col h2,.section-heading h2,.about-banner h2{font-size:32px}.gallery{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.info-card{padding:18px}}
/* =========================================
   PESAN SUKSES KRITIK & SARAN
   ========================================= */

.success-message {
    position: fixed;

    top: 90px;
    right: 25px;

    z-index: 9999;

    width: min(450px, calc(100% - 40px));

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 17px 18px;

    background: #ffffff;

    border-left: 5px solid #28a745;

    border-radius: 14px;

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

    animation: messageSlideIn 0.4s ease;
}

.success-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #28a745;

    color: white;

    font-size: 22px;
    font-weight: bold;
}

.success-message strong {
    display: block;

    color: #1f2937;

    font-size: 15px;
}

.success-message p {
    margin: 2px 0 0;

    color: #6b7280;

    font-size: 13px;
}

.success-message button {
    margin-left: auto;

    border: none;

    background: transparent;

    color: #7b8794;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;
}

.success-message button:hover {
    color: #222;
}


/* Animasi masuk */

@keyframes messageSlideIn {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Animasi keluar */

.success-message.hide {
    animation: messageSlideOut 0.4s ease forwards;
}

@keyframes messageSlideOut {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}


/* Tampilan HP */

@media (max-width: 600px) {

    .success-message {
        top: 80px;
        right: 15px;

        width: calc(100% - 30px);

        padding: 14px;
    }

    .success-icon {
        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .success-message strong {
        font-size: 14px;
    }

    .success-message p {
        font-size: 12px;
    }
}
.logout-button {
    display: inline-block;

    padding: 12px 20px;

    margin-bottom: 25px;

    background: #dc3545;

    color: #fff;

    text-decoration: none;

    border-radius: 8px;

    font-weight: bold;

    transition: .2s;
}

.logout-button:hover {
    background: #b02a37;
}

/* =========================
   TENTANG SEKOLAH
========================= */

.about-content {
    max-width: 1000px;
    margin: 0 auto;
}

.about-text {
    margin-top: 25px;
}

.about-text p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

/* Identitas Sekolah */
.school-info {
    margin: 30px 0;
    padding: 25px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.school-info h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
}

/* Baris informasi */
.info-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item span {
    font-weight: 600;
}

.info-item strong {
    font-weight: 400;
    line-height: 1.6;
}


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

@media (max-width: 768px) {

    .about-content {
        padding: 0 20px;
    }

    .about-text p {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }

    .school-info {
        padding: 20px 15px;
    }

    .info-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .info-item span {
        font-size: 14px;
        opacity: 0.8;
    }

    .info-item strong {
        font-size: 15px;
    }

}