:root{
    --green-dark:#0f4c2e;
    --green:#1c6b3e;
    --green-mid:#1f7a44;
    --green-light:#e8f3ea;
    --gray-bg:#f3f6f4;
    --text:#25322a;
    --muted:#6b7970;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth}
  body{font-family:'Segoe UI',Arial,sans-serif;color:var(--text);line-height:1.5;background:#fff;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .container{max-width:1300px;margin:0 auto;padding:0 24px;}

  /* TOP BAR */
  .topbar{background:var(--green-dark);color:#dff0e2;font-size:13px;}
  .topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;}
  .topbar-left{display:flex;gap:22px;}
  .topbar-left span{display:flex;align-items:center;gap:6px;}
  .topbar-right{display:flex;gap:18px;align-items:center;}
  .topbar-right a{opacity:.95;}
  .topbar-right .social{display:flex;gap:12px;margin-left:8px;}

  /* NAVBAR */
  .navbar{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:50;}
  .navbar .container{display:flex;align-items:center;justify-content:space-between;height:82px;padding:0 24px;}
  .brand{display:flex;align-items:center;gap:16px;flex-shrink:0;}
  .brand .logo{width:56px;height:56px;border-radius:8px;background:var(--green-light);display:flex;align-items:center;justify-content:center;color:var(--green-dark);font-size:20px;border:2px solid var(--green);overflow:hidden}
  .brand h1{font-size:20px;color:var(--green-dark);letter-spacing:.3px;white-space:nowrap;}
  .brand p{font-size:11.5px;color:var(--muted);}
  .nav-toggle{display:none;background:transparent;border:none;font-size:20px;color:var(--green-dark);cursor:pointer;padding:8px;border-radius:6px}
  .navlinks{display:flex;align-items:center;gap:34px;font-size:14.5px;font-weight:600;color:#2b3a31;flex:1;justify-content:center;}
  .navlinks li{position:relative;}
  .navlinks a{display:flex;align-items:center;gap:6px;padding:14px 0;}
  .navlinks a.active{color:var(--green);border-bottom:3px solid var(--green);}
  .nav-actions{display:flex;align-items:center;gap:22px;flex-shrink:0;}
  .search-icon{color:#333;font-size:16px;}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:6px;font-weight:600;font-size:14px;padding:10px 20px;cursor:pointer;border:2px solid transparent;}
  .btn-solid{background:var(--green);color:#fff;}
  .btn-solid:hover{background:var(--green-dark);}
  .btn-outline{background:transparent;color:#fff;border:2px solid #fff;}
  .btn-outline:hover{background:rgba(255,255,255,.15);}

  /* HERO */
  .hero{position:relative;overflow:hidden;min-height:520px;display:flex;align-items:center;}
  .hero .container{max-width:1300px;margin:0 auto;padding:0 24px;}
  .hero-bg{position:absolute;inset:0;background:url('gambar/gambar_utama.png') center/cover;}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,50,30,.94) 0%, rgba(10,60,35,.75) 40%, rgba(10,60,35,.25) 75%);}
  .hero-content{position:relative;z-index:2;color:#fff;max-width:560px;padding:60px 0;text-align:left;}
  .hero-content .eyebrow{font-size:22px;font-weight:400;margin-bottom:4px;}
  .hero-content h2{font-size:52px;font-weight:800;line-height:1.1;margin-bottom:18px;}
  .hero-content p{font-size:15px;color:#dff0e2;margin-bottom:28px;max-width:460px;}
  .hero-btns{display:flex;gap:14px;}
  .hero-dots{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3;}
  .hero-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);}
  .hero-dots span.active{background:#fff;width:22px;border-radius:5px;}
  .hero-wave{position:absolute;bottom:-2px;left:0;width:100%;line-height:0;z-index:2;}

  /* QUICK ICONS ROW */
  .quickrow{
      background:var(--gray-bg);
  }
  .quickgrid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:20px;
      padding:28px 0;
      justify-items:center;
      align-items:center;
  }
  .quickitem{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:8px;
      padding:12px 8px;
      width:100%;
      border-right:1px solid #e2e8e4;
  }
  .quickitem:last-child{
      border-right:none;
  }
  .quickitem i{
      font-size:25px;
      color:var(--green);
  }
  .quickitem strong{
      font-size:13.5px;
      color:var(--green-dark);
  }
  .quickitem span{
      font-size:11.5px;
      color:var(--muted);
  }

  /* ABOUT + PRINCIPAL */
  .about-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin:50px auto;overflow:hidden;border-radius:8px;}
  .about-left{background:#fff;display:grid;grid-template-columns:1fr 1.2fr;gap:26px;padding:0;}
  .about-left img{width:100%;height:100%;object-fit:cover;}
  .about-text{padding:30px 26px 30px 0;}
  .about-text h3{font-size:22px;color:var(--green-dark);margin-bottom:14px;position:relative;padding-bottom:10px;}
  .about-text h3::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--green);}
  .about-text p{font-size:13.8px;color:#4b5750;margin-bottom:20px;}
  .principal{background:linear-gradient(135deg,var(--green-mid),var(--green-dark));color:#fff;padding:34px 30px;}
  .principal h3{font-size:20px;margin-bottom:20px;}
  .principal .row{display:flex;gap:20px;align-items:center;}
  .principal .photo{width:96px;height:96px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid rgba(255,255,255,.5);}
  .principal .photo img{width:100%;height:100%;object-fit:cover;}
  .principal blockquote{font-style:italic;font-size:14.5px;margin-bottom:14px;color:#eafaf0;}
  .principal .name{font-weight:700;font-size:15px;}
  .principal .role{font-size:12.5px;color:#cfe9d7;}

  /* STATS */
  .stats{background:linear-gradient(120deg,var(--green-dark),var(--green));}
  .statsgrid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;padding:36px 0;}
  .statsgrid div{color:#fff;border-right:1px solid rgba(255,255,255,.2);padding:0px;}
  .statsgrid div:last-child{border-right:none;}
  .statsgrid i{font-size:26px;margin-bottom:10px;color:#c9e8cf;}
  .statsgrid .num{font-size:28px;font-weight:800;}
  .statsgrid .label{font-size:12.5px;color:#d7ecd9;}

  /* NEWS + ANNOUNCEMENTS */
  .split{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;margin:50px auto;align-items:start;}
  .sectionhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;}
  .sectionhead h3{font-size:21px;color:var(--green-dark);}
  .sectionhead a{font-size:13px;color:var(--green);font-weight:600;}
  .newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .newscard img{width:100%;height:130px;object-fit:cover;border-radius:6px;margin-bottom:10px;}
  .newscard .date{font-size:11.5px;color:var(--muted);margin-bottom:6px;}
  .newscard h4{font-size:14px;color:#20302a;margin-bottom:8px;line-height:1.35;}
  .newscard a.more{font-size:12.5px;color:var(--green);font-weight:600;}
  .announcebox{background:var(--gray-bg);border-radius:8px;padding:22px;}
  .announceitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #e3e9e4;}
  .announceitem:last-child{border-bottom:none;}
  .datepill{background:var(--green-dark);color:#fff;border-radius:6px;text-align:center;padding:8px 10px;font-size:11px;font-weight:700;min-width:46px;line-height:1.2;}
  .datepill .d{font-size:17px;}
  .announceitem h5{font-size:13.5px;color:#20302a;margin-bottom:4px;}
  .announceitem p{font-size:12px;color:var(--muted);}
  .announceitem .arrow{margin-left:auto;color:var(--green);align-self:center;}

  /* FEATURE ICON GRID */
  .featuregrid{display:grid;grid-template-columns:repeat(6,1fr);background:var(--gray-bg);border-radius:8px;overflow:hidden;margin:40px auto;}
  .featureitem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 14px;border-right:1px solid #e2e8e4;background:#fff;}
  .featureitem:nth-child(even){background:var(--gray-bg);}
  .featureitem:last-child{border-right:none;}
  .featureitem i{font-size:26px;color:var(--green);}
  .featureitem strong{font-size:13.5px;color:var(--green-dark);}
  .featureitem span{font-size:11px;color:var(--muted);}

  /* GALLERY */
  .gallery-section{margin:50px auto;}
  .gallerygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  .gallerygrid img{width:100%;height:120px;object-fit:cover;border-radius:6px;}

  /* =====================================================
     QUICK LINKS & MAP: FORCED SIDE-BY-SIDE ON DESKTOP
  ===================================================== */
  .triple {
      display: grid !important;
      grid-template-columns: 1fr 1.6fr !important;
      gap: 32px !important;
      align-items: stretch !important;
      margin: 50px auto !important;
      max-width: 1300px;
      width: 100%;
  }
  .quicklinks {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e5e5e5;
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  .quicklinks h3,
  .maplinks h3 {
      font-size: 24px;
      color: var(--green-dark);
      margin-bottom: 18px;
  }
  .quicklinks ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  .quicklinks li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid #e9e9e9;
      transition: .3s;
      cursor: pointer;
      flex: 1;
  }
  .quicklinks li:hover {
      background: #f4faf5;
  }
  .quicklinks li:last-child {
      border-bottom: none;
  }
  .quicklinks i {
      color: var(--green);
      font-size: 16px;
  }
  
  /* MAP SETTINGS */
  .maplinks {
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  .maplinks .mapbox {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 400px;
      border-radius: 10px;
      overflow: hidden;
      background: #ddd;
  }
  .maplinks .mapbox iframe,
  .maplinks .mapbox img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
  }
  .maplinks .pin {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background: #fff;
      padding: 12px 18px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 20px rgba(0,0,0,.15);
  }
  .maplinks p {
      margin-top: 15px;
      font-size: 14px;
      color: #555;
  }
  .maplinks .linkgreen {
      display: inline-block;
      margin-top: 6px;
      color: var(--green);
      font-weight: 700;
  }

  /* =====================================================
     PREMIUM FOOTER REMAKE: BIGGER & MORE ROOMY
  ===================================================== */
  footer {
    background: var(--green-dark);
    color: #cfe6d3;
    margin-top: 80px;
  }
  footer h1, .footergrid h4 { 
    text-align: left; 
  }
  .footergrid {
    display: grid;
    /* Diubah menjadi 4 kolom berimbang agar porsi Sekolah dan Kontak mendapat space yang lebar */
    grid-template-columns: 1.5fr 0.8fr 0.8fr 1.55fr 1.25fr;
    gap: 40px; 
    padding: 90px 24px 70px; 
    max-width: 1300px;
    margin: 0 auto;
  }
  .footergrid h4 {
    color: #fff;
    font-size: 19px; /* Teks Heading Footer diperbesar */
    margin-bottom: 24px; 
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
  }
  .footergrid p {
    font-size: 15px; /* Konten paragraf diperbesar */
    line-height: 1.8; 
    color: #c2dec6;
  }
  .footergrid ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .footergrid li {
    font-size: 15.5px; /* Menu link footer diperbesar */
    padding: 6px 0; 
    color: #c2dec6;
    transition: all 0.25s ease;
  }
  .footergrid li:hover {
    color: #fff;
    padding-left: 4px;
  }
  .footer-social {
    display: flex;
    gap: 14px;
    margin-top: 24px;
  }
  .footer-social a {
    width: 44px; /* Ukuran tombol medsos diperbesar */
    height: 44px; 
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    transition: all 0.3s ease;
  }
  .footer-social a:hover {
    background: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  .contactlist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    line-height: 1.6;
  }
  .contactlist li:hover {
    padding-left: 0; /* Menonaktifkan indentasi hover khusus list kontak */
  }
  .contactlist i {
    color: #8fd39a;
    margin-top: 5px;
    font-size: 17px; /* Icon detail kontak diperbesar */
    flex-shrink: 0;
  }
  .newsletter-input {
    display: flex;
    margin-top: 22px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  .newsletter-input input {
    flex: 1;
    border: none;
    padding: 16px 18px; 
    font-size: 15px;
    outline: none;
    background: #fff;
    color: var(--text);
  }
  .newsletter-input button {
    background: var(--green);
    border: none;
    color: #fff;
    padding: 0 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .newsletter-input button:hover {
    background: var(--green-mid);
  }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 30px 24px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px; /* Teks copyright diperbesar */
    color: #a9c9ad;
    max-width: 1300px;
    margin: 0 auto;
  }
  .footer-bottom .links {
    display: flex;
    gap: 24px;
  }
  .backtotop {
    background: var(--green);
    color: #fff;
    width: 48px;  
    height: 48px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 35px;
    right: 35px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: all 0.25s ease;
    z-index: 99;
    cursor: pointer;
  }
  .backtotop:hover {
    transform: translateY(-4px);
    background: var(--green-mid);
  }

  /* =====================================================
     GLOBAL MEDIA QUERIES RESPONSIVE (CLEANED)
  ===================================================== */
 @media (max-width: 992px) {
  .container {
    padding: 0 18px;
  }
  .about-wrap {
    grid-template-columns: 1fr;
  }
  .about-left {
    grid-template-columns: 1fr;
  }
  .about-text {
    padding: 25px;
  }
  .featuregrid, .gallerygrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footergrid {
    grid-template-columns: repeat(2, 1fr);
    padding: 70px 24px 50px;
    gap: 40px 30px;
  }
}

 @media (max-width: 768px) {
  .topbar-left {
    display: none;
  }
  .topbar .container {
    justify-content: center;
  }
  .nav-toggle {
    display: block;
  }
  .nav-actions {
    display: none; 
  }
  .navbar .container {
    height: 72px;
  }
  .navlinks {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-bottom: 2px solid var(--green);
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none; 
  }
  .navlinks.active-menu, .navlinks.open {
    display: flex;
  }
  .navlinks li {
    width: 100%;
    text-align: center;
  }
  .navlinks a {
    padding: 16px 0;
    display: block;
    border-bottom: 1px solid #f0f0f0;
  }
  .navlinks a.active {
    border-bottom: none;
    background: var(--green-light);
  }
  .quickgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .quickitem {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }
  .split, .newsgrid {
    grid-template-columns: 1fr;
  }
  .about-wrap {
    margin: 30px auto;
  }
  .principal .row {
    flex-direction: column;
    text-align: center;
  }
  .statsgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .statsgrid div {
    border-right: none;
  }
  .triple {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0;
  }
  .maplinks .mapbox {
    height: 260px !important;
    min-height: 260px !important;
  }
  .footergrid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 45px;
    padding: 60px 20px 40px;
  }
  .footergrid h4, footer h1 {
    text-align: center;
  }
  .footer-social, .contactlist li, .newsletter-input {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 400px;
  }
  .hero-content h2 {
    font-size: 28px;
  }
  .hero-content .eyebrow {
    font-size: 18px;
  }
  .hero-btns {
    flex-direction: column;
    width: 100%;
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .featuregrid, .gallerygrid, .statsgrid {
    grid-template-columns: 1fr;
  }
  .gallerygrid img {
    height: 220px;
  }
  .featureitem {
    border-bottom: 1px solid #e2e8e4;
  }
}

/* LAPTOP & LARGER DISPLAY DECORATIONS */
@media (min-width:1200px){
  .container{
      width:100%;
      max-width:1400px;
      padding:0 32px;
  }
  .navbar .container{ height:86px; }
  .navlinks{ gap:28px; }
  .hero{ min-height:620px; }
  .hero-content h2{ font-size:58px; }
  .about-wrap, .about-left, .newsgrid, .gallerygrid, .triple{ gap:35px; }
  .gallerygrid img{ height:180px; }
}
@media (min-width:1600px){
  .container{ max-width:1550px; }
  .hero{ min-height:700px; }
  .hero-content h2{ font-size:68px; }
  .hero-content p{ font-size:17px; }
  .brand h1{ font-size:24px; }
  .navlinks{ gap:40px; font-size:15px; }
  .gallerygrid img{ height:220px; }
}