/* HOME FINAL CSS - MTsN 1 BOGOR
   Foto hero TIDAK di-stretch.
   Layout dibuat responsif dan running text dipisahkan dari label berita.
*/
*{box-sizing:border-box}
:root{--green:#00583c;--green2:#08794e;--light:#f3f7fb;--text:#101b35}
html,body{margin:0;padding:0}
body{background:var(--light);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}
.container{width:min(1420px,92%);margin:auto}

/* HEADER */
.site-header{height:82px;background:#fff;border-bottom:1px solid #e3e8ed}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.brand-kemenag img{width:250px;height:68px;object-fit:contain;object-position:left center}
.main-nav{display:flex;align-items:center;gap:2px;white-space:nowrap}
.main-nav a{padding:12px 10px;border-radius:9px;text-decoration:none;color:#10172e;font-size:12px;font-weight:750}
.main-nav a.active{background:#08794e;color:#fff}
.main-nav a:hover{background:#eaf7f0}
.main-nav a.logout{color:#c71919}
.brand-school{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:205px}
.brand-school img{width:57px;height:57px;object-fit:contain}
.brand-school div{text-align:right}
.brand-school strong{display:block;font-size:17px}
.brand-school small{display:block;font-size:8px;color:#647080;font-style:italic;margin-top:4px}

/* RUNNING BAR - tidak tumpang tindih */
.newsbar{height:44px;background:#00583c;color:#fff;overflow:hidden}
.news-inner{height:44px;display:grid;grid-template-columns:175px minmax(0,1fr) 270px;align-items:center;gap:12px;font-size:10px}
.news-label{white-space:nowrap}
.news-scroll{overflow:hidden;min-width:0}
.news-track{display:flex;gap:11px;white-space:nowrap;width:max-content;animation:marquee 34s linear infinite}
.news-track b{color:#8ee6bb}
.news-time{text-align:right;white-space:nowrap;font-size:9px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-52%)}}

/* HERO
   Tinggi 560px. Foto hero-mtsn1-proporsional.jpg sudah dibuat
   dengan bidang utama tetap proporsional; CSS hanya menutup area hero.
*/
.hero{height:560px;position:relative;overflow:hidden;color:#fff}
.hero-photo{position:absolute;inset:0;background-image:url("images/foto-guru-mtsn.jpeg");background-repeat:no-repeat;background-position:center center;background-size:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,67,45,.94) 0%,rgba(0,74,49,.78) 24%,rgba(0,74,49,.38) 48%,rgba(0,45,31,.08) 76%,rgba(0,0,0,0) 100%)}
.hero-content{height:100%;position:relative;display:flex;align-items:center;justify-content:space-between}
.hero-copy{width:650px;margin-left:15px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:4px;color:#d7ffea}
.eyebrow-line{width:125px;height:3px;background:#47ef98;margin:9px 0 12px}
.hero h1{font-size:59px;line-height:.98;letter-spacing:-2px;margin:0 0 17px;text-shadow:0 4px 12px rgba(0,0,0,.35)}
.hero h1 span{color:#7cf2a0}
.hero-copy p{font-size:17px;line-height:1.5;max-width:640px;margin:0 0 22px;text-shadow:0 2px 7px rgba(0,0,0,.5)}
.login-btn{display:inline-flex;align-items:center;gap:10px;height:51px;padding:0 14px 0 18px;border-radius:28px;background:linear-gradient(135deg,#1bc06d,#0a9656);border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.login-btn i{font-style:normal;background:rgba(255,255,255,.18);border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:23px;margin-left:4px}
.points{display:flex;gap:27px;margin-top:26px}
.points>div{display:flex;align-items:center;gap:8px}
.points em{font-style:normal;width:38px;height:38px;border:1px solid rgba(112,244,165,.5);border-radius:50%;display:grid;place-items:center;color:#70f3a0;font-size:20px;background:rgba(0,0,0,.14)}
.points strong,.points small{display:block}
.points strong{font-size:11px}.points small{font-size:9px;color:#d8f5e4}
.slogan{width:270px;padding:17px 23px;margin-right:20px;border-radius:17px;background:rgba(4,76,51,.67);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(7px);box-shadow:0 15px 30px rgba(0,0,0,.2)}
.quote{font:50px/25px Georgia}
.slogan p{font:italic 18px/1.45 Georgia;margin:10px 0 14px}
.slogan hr{border:0;width:46px;height:4px;background:#48ed98;border-radius:4px;margin:0}

/* CARDS */
.services{padding:16px 0 8px;background:var(--light)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{min-height:105px;background:#fff;border-radius:16px;padding:14px 17px;display:flex;align-items:center;gap:14px;box-shadow:0 7px 20px rgba(20,40,60,.08);border:1px solid #e5ebf0}
.service-icon{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:grid;place-items:center;font-size:27px}
.green .service-icon{background:#dcf8e8;color:#08854d}.blue .service-icon{background:#e2f0ff;color:#1384dc}.gold .service-icon{background:#fff1d3;color:#eaa000}
.service-card h3{margin:0 0 5px;font-size:16px}.service-card p{margin:0;color:#687487;font-size:11px;line-height:1.45}
.service-card a{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;font-size:24px}
.green a{background:#10a760}.blue a{background:#138ce7}.gold a{background:#efa500}

/* ABOUT */
.about{padding:7px 0 18px;background:var(--light)}
.about-card{min-height:108px;background:#fff;border-radius:16px;display:flex;align-items:center;gap:25px;padding:15px 24px;box-shadow:0 7px 20px rgba(20,40,60,.06)}
.about-art{width:165px;height:78px;flex:0 0 165px;border-radius:12px;background:linear-gradient(135deg,#e3f7eb,#dff0ff);display:grid;place-items:center;position:relative}
.about-art span{font-size:59px;color:#f0a918}.about-art i{position:absolute;right:14px;top:5px;color:#149b61;font-size:23px}.about-art b{position:absolute;left:30px;bottom:8px;color:#1984c5}
.about-text{flex:1}.about-text h2{margin:0 0 5px;font-size:20px}.about-text p{margin:0;color:#687487;font-size:12px;line-height:1.5}
.about-quote{width:285px;border-left:1px solid #dce4ea;padding-left:24px;text-align:center;color:#147b4c;font:bold italic 16px/1.4 Georgia}

/* FOOTER */
.footer{background:#00523a;color:#fff;border-top:3px solid #e4b21e}
.footer-inner{min-height:105px;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.footer small{display:block;margin-top:7px;color:#d4e9df;font-size:10px;font-style:italic}
.footer-joe{text-align:right}.footer-joe strong{font-size:17px;font-style:italic}

/* TABLET */
@media(max-width:1180px){
 .main-nav a{font-size:10px;padding:10px 7px}
 .brand-kemenag img{width:210px}.brand-school{min-width:160px}
 .brand-school img{width:47px;height:47px}.brand-school strong{font-size:14px}
 .hero h1{font-size:52px}
}

/* MOBILE */
@media(max-width:900px){
 .site-header,.nav-wrap{height:auto}.nav-wrap{padding:8px 0;flex-wrap:wrap}
 .brand-kemenag img{width:220px;height:55px}.brand-school{margin-left:auto}
 .main-nav{order:3;width:100%;overflow-x:auto;padding-bottom:3px}
 .news-inner{grid-template-columns:145px 1fr}.news-time{display:none}
 .hero{height:570px}.hero-copy{width:100%;padding:35px 20px}.slogan{display:none}
 .service-grid{grid-template-columns:1fr}.about-card{flex-wrap:wrap}.about-quote{width:100%;border-left:0;border-top:1px solid #dce4ea;padding:12px 0 0}
}
@media(max-width:600px){
 .container{width:94%}.brand-kemenag img{width:195px;height:50px}
 .brand-school div{display:none}.brand-school img{width:45px;height:45px}
 .main-nav a{font-size:10px;padding:8px 7px}
 .news-inner{grid-template-columns:1fr}.news-label{display:none}
 .hero{height:590px}
 .hero-overlay{background:linear-gradient(90deg,rgba(0,62,43,.91),rgba(0,68,46,.62) 58%,rgba(0,60,42,.15))}
 .hero-copy{padding:48px 16px}.hero h1{font-size:42px}.hero-copy p{font-size:15px}
 .login-btn{width:100%;justify-content:center}.points{gap:12px;flex-wrap:wrap}
 .points em{width:33px;height:33px;font-size:18px}.points strong{font-size:10px}.points small{font-size:8px}
 .about-art{width:100%;flex-basis:100%}.footer-inner{display:block;padding:18px 0}
 .footer-joe{text-align:left;margin-top:14px}
}
.hero-photo{
    background-image:url("images/foto-guru-mtsn.jpeg") !important;
    background-size:contain !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}
/* =========================================
   FOTO HERO - FULL + TRANSPARAN HALUS
   ========================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Foto memenuhi seluruh area hero */
.hero .hero-photo {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    clip-path: none !important;

    background-image: url("images/foto-guru-mtsn.jpeg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    z-index: 0 !important;
}

/* Hijau transparan di atas foto */
.hero .hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,70,48,.62) 0%,
            rgba(0,70,48,.40) 18%,
            rgba(0,70,48,.18) 38%,
            rgba(0,45,31,.08) 65%,
            rgba(0,45,31,.18) 82%,
            rgba(0,70,48,.35) 100%
        ) !important;

    z-index: 1 !important;
}

/* Isi hero tetap di atas foto */
.hero .hero-content {
    position: relative !important;
    z-index: 10 !important;
}
/* =========================================
   SLOGAN - LEBIH TRANSPARAN
   ========================================= */

.hero .slogan {
    background: rgba(0, 20, 30, 0.20) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}

/* Tulisan slogan tetap jelas */
.hero .slogan p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.7) !important;
}
/* GESER KOTAK SLOGAN + BINGKAI KE ATAS */
.hero-content .slogan {
    transform: translateY(-2000px) !important;
}
/* ================================
   TAMPILAN HP - TOMBOL ARSIP
   ================================ */
@media (max-width: 768px) {

    .hero-content .login-btn {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important;
    width: fit-content !important;
    margin: 20px auto 20px auto !important;
}
        position: relative !important;
        display: inline-flex !important;
    }

    .hero-content .btn-daftar-guru {
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        display: inline-block !important;
    }

    .hero-content .blok-daftar-akun {
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
    }
}