<style>
  :root {
    --mimha-green: #137b5b;
    --mimha-green-soft: #e6f4ef;
    --mimha-gold: #f4b000;
    --mimha-dark: #123136;
    --mimha-text: #333333;
    --mimha-light: #ffffff;
    --mimha-radius: 16px;
    --mimha-shadow: 0 12px 30px rgba(0,0,0,0.08);
  }

  .mimha-landing * {
    box-sizing: border-box;
  }

  .mimha-landing {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--mimha-text);
    line-height: 1.6;
    background: #f8fafb;
  }

  .mimha-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* HEADER / NAVBAR */
  .mimha-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }

  .mimha-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }

  .mimha-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mimha-logo-circle {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #ffffff, var(--mimha-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
  }

  .mimha-logo-text {
    font-weight: 700;
    font-size: 18px;
    color: var(--mimha-dark);
  }

  .mimha-logo-sub {
    font-size: 11px;
    color: #666;
    margin-top: -4px;
  }

  .mimha-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
  }

  .mimha-nav a {
    text-decoration: none;
    color: #555;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .mimha-nav a:hover {
    color: var(--mimha-green);
    border-color: var(--mimha-green);
  }

  .mimha-nav-cta {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--mimha-green);
    color: #fff !important;
    border: none;
    box-shadow: 0 8px 16px rgba(19,123,91,0.3);
  }

  .mimha-nav-cta:hover {
    background: #0f6249;
  }

  .mimha-burger {
    display: none;
    width: 26px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .mimha-burger span {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--mimha-dark);
  }

  /* HERO */
  .mimha-hero {
    padding: 60px 0 40px;
    background: radial-gradient(circle at top left, #fdf7e6 0, #f8fafb 55%, #e6f4ef 100%);
  }

  .mimha-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
  }

  .mimha-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(19,123,91,0.08);
    font-size: 12px;
    color: var(--mimha-green);
    margin-bottom: 10px;
  }

  .mimha-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mimha-gold);
  }

  .mimha-hero-title {
    font-size: 30px;
    line-height: 1.2;
    color: var(--mimha-dark);
    margin: 0 0 10px;
  }

  .mimha-hero-title span {
    color: var(--mimha-green);
  }

  .mimha-hero-sub {
    font-size: 15px;
    color: #555;
    margin-bottom: 18px;
  }

  .mimha-hero-bullets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin-bottom: 20px;
    font-size: 13px;
  }

  .mimha-hero-bullets li {
    list-style: none;
    position: relative;
    padding-left: 18px;
  }

  .mimha-hero-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    background: var(--mimha-green);
    color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mimha-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
  }

  .mimha-btn-primary {
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mimha-green), #0f6249);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--mimha-shadow);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .mimha-btn-primary span.whatsapp {
    font-size: 16px;
  }

  .mimha-btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    padding: 9px 18px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: var(--mimha-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mimha-hero-note {
    font-size: 12px;
    color: #777;
  }

  .mimha-hero-note strong {
    color: var(--mimha-dark);
  }

  /* HERO IMAGE SIDE */
  .mimha-hero-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 18px 18px 20px;
    box-shadow: var(--mimha-shadow);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
  }

  .mimha-hero-tag {
    position: absolute;
    top: 14px;
    right: 18px;
    background: var(--mimha-green-soft);
    color: var(--mimha-green);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
  }

  .mimha-school-photo {
    width: 100%;
    border-radius: 18px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #ddd;
  }

  /* GANTI URL GAMBAR DI SINI */
  .mimha-school-photo {
    background-image: url('https://via.placeholder.com/800x600?text=Foto+Sekolah+MIMHa');
    background-size: cover;
    background-position: center;
  }

  .mimha-hero-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 11px;
  }

  .mimha-hero-levels span {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--mimha-green-soft);
    color: var(--mimha-dark);
  }

  /* SECTION GENERIC */
  .mimha-section {
    padding: 40px 0;
  }

  .mimha-section-header {
    text-align: center;
    margin-bottom: 28px;
  }

  .mimha-section-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mimha-green);
    margin-bottom: 6px;
  }

  .mimha-section-title {
    font-size: 22px;
    color: var(--mimha-dark);
    margin-bottom: 6px;
  }

  .mimha-section-sub {
    font-size: 14px;
    color: #666;
    max-width: 620px;
    margin: 0 auto;
  }

  /* ABOUT */
  .mimha-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    align-items: start;
  }

  .mimha-pill-list {
    display: grid;
    gap: 8px;
    font-size: 13px;
  }

  .mimha-pill-item {
    padding: 8px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .mimha-pill-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--mimha-green-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--mimha-green);
  }

  .mimha-about-card {
    background: #ffffff;
    border-radius: var(--mimha-radius);
    padding: 18px 16px;
    box-shadow: var(--mimha-shadow);
    border: 1px solid rgba(0,0,0,0.04);
    font-size: 13px;
  }

  .mimha-about-card h3 {
    margin-top: 0;
    font-size: 15px;
    color: var(--mimha-dark);
    margin-bottom: 8px;
  }

  /* PROGRAMS */
  .mimha-programs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
  }

  .mimha-program-card {
    background: #ffffff;
    border-radius: var(--mimha-radius);
    padding: 14px 12px 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    text-align: left;
    font-size: 13px;
  }

  .mimha-program-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mimha-green);
    margin-bottom: 4px;
  }

  .mimha-program-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--mimha-dark);
  }

  .mimha-program-age {
    font-size: 11px;
    color: #777;
    margin-bottom: 6px;
  }

  .mimha-program-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
  }

  .mimha-program-list li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
  }

  .mimha-program-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mimha-gold);
  }

  /* KEUNGGULAN */
  .mimha-adv-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
  }

  .mimha-adv-card {
    background: #fff;
    border-radius: var(--mimha-radius);
    padding: 14px 14px 16px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
  }

  .mimha-adv-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--mimha-green-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-size: 16px;
  }

  .mimha-adv-card h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--mimha-dark);
  }

  /* TESTIMONI */
  .mimha-test-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
    gap: 20px;
  }

  .mimha-test-card {
    background: #ffffff;
    padding: 16px 14px;
    border-radius: var(--mimha-radius);
    box-shadow: var(--mimha-shadow);
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.04);
  }

  .mimha-test-quote {
    font-style: italic;
    margin-bottom: 10px;
  }

  .mimha-test-person {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mimha-test-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--mimha-green-soft);
  }

  .mimha-test-meta strong {
    font-size: 13px;
    color: var(--mimha-dark);
  }

  .mimha-test-meta span {
    display: block;
    font-size: 11px;
    color: #777;
  }

  .mimha-badge-small {
    display: inline-block;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(244,176,0,0.12);
    color: var(--mimha-dark);
    margin-top: 4px;
  }

  /* CTA KONTAK */
  .mimha-cta {
    background: linear-gradient(135deg, var(--mimha-green), #0f6249);
    border-radius: 24px;
    padding: 22px 18px;
    color: #fff;
    box-shadow: var(--mimha-shadow);
  }

  .mimha-cta-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
    gap: 18px;
    align-items: center;
  }

  .mimha-cta h2 {
    margin: 0 0 6px;
    font-size: 20px;
  }

  .mimha-cta p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #f5fdf8;
  }

  .mimha-cta strong {
    color: #ffe9a2;
  }

  .mimha-cta-contact {
    display: grid;
    gap: 8px;
    font-size: 13px;
  }

  .mimha-cta-contact a {
    color: #fff;
    text-decoration: none;
  }

  .mimha-cta-contact div {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mimha-cta-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0,0,0,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  /* FOOTER */
  .mimha-footer {
    padding: 20px 0 26px;
    font-size: 11px;
    color: #777;
    text-align: center;
  }

  .mimha-footer a {
    color: var(--mimha-green);
    text-decoration: none;
  }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .mimha-hero-grid,
    .mimha-about-grid,
    .mimha-test-grid,
    .mimha-cta-grid {
      grid-template-columns: minmax(0,1fr);
    }

    .mimha-programs-grid {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .mimha-adv-grid {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }

  @media (max-width: 680px) {
    .mimha-header-inner {
      padding: 8px 0;
    }

    .mimha-nav {
      position: absolute;
      top: 52px;
      right: 16px;
      background: #ffffff;
      padding: 10px 14px;
      border-radius: 16px;
      box-shadow: var(--mimha-shadow);
      flex-direction: column;
      align-items: flex-start;
      display: none;
      min-width: 170px;
    }

    .mimha-nav.mimha-nav-open {
      display: flex;
    }

    .mimha-burger {
      display: flex;
    }

    .mimha-hero {
      padding-top: 32px;
    }

    .mimha-hero-title {
      font-size: 24px;
    }

    .mimha-hero-bullets {
      grid-template-columns: minmax(0,1fr);
    }

    .mimha-programs-grid,
    .mimha-adv-grid {
      grid-template-columns: minmax(0,1fr);
    }

    .mimha-cta {
      padding: 18px 14px;
    }
  }
</style>

<div class="mimha-landing" id="mimha-top">
  <!-- HEADER -->
  <header class="mimha-header">
    <div class="mimha-container mimha-header-inner">
      <div class="mimha-logo-wrap">
        <div class="mimha-logo-circle">M</div>
        <div>
          <div class="mimha-logo-text">MIMHa Permata Ilmu</div>
          <div class="mimha-logo-sub">Madrasah Interaktif Miftahul Huda</div>
        </div>
      </div>

      <nav class="mimha-nav" id="mimhaNav">
        <a href="#tentang">Tentang</a>
        <a href="#program">Program</a>
        <a href="#keunggulan">Keunggulan</a>
        <a href="#testimoni">Testimoni</a>
        <a href="#kontak" class="mimha-nav-cta">Daftar Sekarang</a>
      </nav>

      <div class="mimha-burger" onclick="document.getElementById('mimhaNav').classList.toggle('mimha-nav-open')">
        <span></span><span></span><span></span>
      </div>
    </div>
  </header>

  <!-- HERO -->
  <section class="mimha-hero">
    <div class="mimha-container mimha-hero-grid">
      <div>
        <div class="mimha-badge">
          <span class="mimha-badge-dot"></span>
          Sekolah Islam Terintegrasi Akhlak & Teknologi
        </div>
        <h1 class="mimha-hero-title">
          Temukan <span>Sekolah Islam</span> yang Menumbuhkan Iman, Ilmu, dan Karakter Anak.
        </h1>
        <p class="mimha-hero-sub">
          Di MIMHa Permata Ilmu, anak belajar Al-Qur'an, sains, dan keterampilan abad 21 dalam lingkungan hangat, menyenangkan, dan penuh teladan.
        </p>

        <ul class="mimha-hero-bullets">
          <li>Metode pembelajaran aktif & menyenangkan</li>
          <li>Pembiasaan adab & ibadah harian</li>
          <li>Lingkungan aman dan ramah anak</li>
          <li>Guru-guru tersertifikasi & berpengalaman</li>
        </ul>

        <div class="mimha-hero-actions">
          <a class="mimha-btn-primary" href="https://wa.me/6281234567890?text=Assalamu%27alaikum%2C+saya+ingin+info+PPDB+MIMHa" target="_blank" rel="noopener">
            <span class="whatsapp">🟢</span>
            Konsultasi PPDB via WhatsApp
          </a>
          <a class="mimha-btn-ghost" href="#program">
            Lihat Program Pendidikan →
          </a>
        </div>

        <div class="mimha-hero-note">
          <strong>Gelombang pendaftaran terbatas.</strong> Kuota per kelas dibatasi agar proses belajar tetap kondusif dan personal.
        </div>
      </div>

      <div>
        <div class="mimha-hero-card">
          <div class="mimha-hero-tag">Lingkungan islami & hangat</div>

          <!-- GANTI BACKGROUND FOTO SEKOLAH DI CSS .mimha-school-photo -->
          <div class="mimha-school-photo"></div>

          <div class="mimha-hero-levels">
            <span>PG / RA</span>
            <span>MI</span>
            <span>MTs Informatika</span>
            <span>Full Day School</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- TENTANG MIMHa -->
  <section class="mimha-section" id="tentang">
    <div class="mimha-container">
      <div class="mimha-section-header">
        <div class="mimha-section-kicker">Tentang MIMHa</div>
        <h2 class="mimha-section-title">Sekolah Islam yang Tumbuh Bersama Keluarga</h2>
        <p class="mimha-section-sub">
          MIMHa Permata Ilmu hadir sebagai ikhtiar orang tua untuk menghadirkan pendidikan Al-Qur'an, ilmu pengetahuan, dan karakter mulia dalam satu kesatuan.
        </p>
      </div>

      <div class="mimha-about-grid">
        <div>
          <p style="font-size:14px; margin-top:0;">
            Kami percaya bahwa setiap anak adalah amanah dan permata berharga. Karena itu, proses belajar di MIMHa dirancang:
          </p>

          <div class="mimha-pill-list">
            <div class="mimha-pill-item">
              <div class="mimha-pill-icon">📖</div>
              <span>Berbasis Al-Qur'an dan sunnah dengan pendekatan cinta, bukan ketakutan.</span>
            </div>
            <div class="mimha-pill-item">
              <div class="mimha-pill-icon">🧠</div>
              <span>Mengasah logika, kreativitas, dan kemampuan memecahkan masalah sejak dini.</span>
            </div>
            <div class="mimha-pill-item">
              <div class="mimha-pill-icon">🤲</div>
              <span>Menanamkan adab kepada Allah, orang tua, guru, dan sesama.</span>
            </div>
            <div class="mimha-pill-item">
              <div class="mimha-pill-icon">👨‍👩‍👧‍👦</div>
              <span>Bersinergi dengan orang tua melalui komunikasi rutin dan kegiatan keluarga.</span>
            </div>
          </div>
        </div>

        <div class="mimha-about-card">
          <h3>Visi Singkat MIMHa</h3>
          <p>
            Menjadi lembaga pendidikan Islam yang melahirkan generasi berakidah lurus, berakhlak mulia, cerdas, dan siap menghadapi tantangan zaman.
          </p>
          <h3>Misi Utama</h3>
          <ul class="mimha-program-list">
            <li>Menanamkan kecintaan pada Al-Qur'an melalui tilawah dan tahfidz bertahap.</li>
            <li>Menguatkan karakter melalui pembiasaan ibadah dan program pembinaan akhlak.</li>
            <li>Mengembangkan potensi akademik dan bakat setiap peserta didik.</li>
            <li>Menciptakan lingkungan sekolah yang aman, nyaman, dan menyenangkan.</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- PROGRAM PENDIDIKAN -->
  <section class="mimha-section" id="program">
    <div class="mimha-container">
      <div class="mimha-section-header">
        <div class="mimha-section-kicker">Program Pendidikan</div>
        <h2 class="mimha-section-title">Pilihan Jenjang di MIMHa Permata Ilmu</h2>
        <p class="mimha-section-sub">
          Program disusun berjenjang, saling terhubung dari usia dini hingga remaja, dengan fokus pada akidah, akhlak, dan keterampilan akademik.
        </p>
      </div>

      <div class="mimha-programs-grid">
        <div class="mimha-program-card">
          <div class="mimha-program-tag">Usia Dini</div>
          <div class="mimha-program-title">PG / RA</div>
          <div class="mimha-program-age">± Usia 3–6 tahun</div>
          <ul class="mimha-program-list">
            <li>Pembiasaan doa harian & adab sederhana.</li>
            <li>Belajar huruf hijaiyah dan huruf latin dengan bermain.</li>
            <li>Stimulasi motorik, seni, dan sosial emosional.</li>
          </ul>
        </div>

        <div class="mimha-program-card">
          <div class="mimha-program-tag">Dasar</div>
          <div class="mimha-program-title">MI (Madrasah Ibtidaiyah)</div>
          <div class="mimha-program-age">± Usia 7–12 tahun</div>
          <ul class="mimha-program-list">
            <li>Tahfidz Al-Qur'an bertahap dengan target juz tertentu.</li>
            <li>Matematika, sains, literasi, dan project-based learning.</li>
            <li>Program karakter: shalat berjamaah, infaq rutin, dan kegiatan sosial.</li>
          </ul>
        </div>

        <div class="mimha-program-card">
          <div class="mimha-program-tag">Menengah</div>
          <div class="mimha-program-title">MTs Informatika</div>
          <div class="mimha-program-age">± Usia 13–15 tahun</div>
          <ul class="mimha-program-list">
            <li>Penguatan ilmu syar'i: akidah, fiqih, sirah Nabi.</li>
            <li>Pengenalan teknologi & informatika secara islami & bertanggung jawab.</li>
            <li>Program kepemimpinan & pembinaan remaja.</li>
          </ul>
        </div>

        <div class="mimha-program-card">
          <div class="mimha-program-tag">Pendukung</div>
          <div class="mimha-program-title">Ekstrakurikuler</div>
          <div class="mimha-program-age">Disesuaikan jenjang</div>
          <ul class="mimha-program-list">
            <li>Panahan, Tahfidz, English Club.</li>
            <li>Robotik / sains sederhana (opsional).</li>
            <li>Pramuka, seni tilawah, dan kegiatan kemandirian.</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- KEUNGGULAN -->
  <section class="mimha-section" id="keunggulan">
    <div class="mimha-container">
      <div class="mimha-section-header">
        <div class="mimha-section-kicker">Kenapa MIMHa?</div>
        <h2 class="mimha-section-title">Keunggulan yang Dirasakan Orang Tua</h2>
        <p class="mimha-section-sub">
          Bukan hanya fasilitas, tapi suasana dan nilai yang membuat anak betah belajar dan orang tua tenang mempercayakan amanahnya.
        </p>
      </div>

      <div class="mimha-adv-grid">
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">🕌</div>
          <h3>Pembiasaan Ibadah Sehari-hari</h3>
          <p>
            Shalat berjamaah, dzikir pagi-petang, tilawah Al-Qur'an, hingga adab makan dan bertemu guru dibimbing secara rutin.
          </p>
        </div>
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">👩‍🏫</div>
          <h3>Guru Ramah & Teladan</h3>
          <p>
            Guru dipilih tidak hanya dari sisi kompetensi mengajar, tetapi juga akhlak, kedekatan dengan anak, dan komunikasi dengan orang tua.
          </p>
        </div>
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">🏫</div>
          <h3>Lingkungan Nyaman & Aman</h3>
          <p>
            Kelas bersih, area bermain terkontrol, serta aturan yang jelas untuk menjaga keamanan dan kenyamanan anak sepanjang hari.
          </p>
        </div>
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">📚</div>
          <h3>Kurikum Terintegrasi</h3>
          <p>
            Kurikulum umum dan diniyah dirangkai sehingga anak memahami bahwa ilmu dunia dan akhirat berjalan berdampingan.
          </p>
        </div>
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">🤝</div>
          <h3>Sinergi dengan Orang Tua</h3>
          <p>
            Terdapat pertemuan dan laporan berkala, grup komunikasi, serta kegiatan parenting untuk menjaga keselarasan pola asuh.
          </p>
        </div>
        <div class="mimha-adv-card">
          <div class="mimha-adv-icon">💻</div>
          <h3>Literasi Digital Terkendali</h3>
          <p>
            Penggunaan teknologi dikenalkan secara bertahap dan terarah, dengan penekanan pada adab dan keamanan digital.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- TESTIMONI -->
  <section class="mimha-section" id="testimoni">
    <div class="mimha-container">
      <div class="mimha-section-header">
        <div class="mimha-section-kicker">Testimoni Orang Tua</div>
        <h2 class="mimha-section-title">Cerita Singkat dari Wali Murid</h2>
        <p class="mimha-section-sub">
          Inilah sebagian kecil dari pengalaman orang tua yang mempercayakan pendidikan putra-putrinya di MIMHa Permata Ilmu.
        </p>
      </div>

      <div class="mimha-test-grid">
        <div class="mimha-test-card">
          <div class="mimha-test-quote">
            “Alhamdulillah, sejak sekolah di MIMHa, anak saya jadi lebih semangat bangun pagi untuk shalat dan berangkat sekolah.
            Gurunya dekat dengan anak, tapi tetap tegas dalam adab.”
          </div>
          <div class="mimha-test-person">
            <div class="mimha-test-avatar"></div>
            <div class="mimha-test-meta">
              <strong>Bunda Aisyah</strong>
              <span>Wali murid kelas 3 MI</span>
            </div>
          </div>
          <span class="mimha-badge-small">Testimoni wali murid</span>
        </div>

        <div class="mimha-test-card">
          <div class="mimha-test-quote">
            “Kami merasa diajak menjadi partner, bukan sekadar ‘penonton’. Laporan perkembangan anak jelas, dan sekolah terbuka berdiskusi jika ada kendala.”
          </div>
          <div class="mimha-test-person">
            <div class="mimha-test-avatar"></div>
            <div class="mimha-test-meta">
              <strong>Ayah Zidan</strong>
              <span>Wali murid MTs Informatika</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA KONTAK / LOKASI -->
  <section class="mimha-section" id="kontak">
    <div class="mimha-container">
      <div class="mimha-cta">
        <div class="mimha-cta-grid">
          <div>
            <h2>Siap Kenal Lebih Dekat dengan MIMHa?</h2>
            <p>
              Silakan hubungi kami untuk info lengkap PPDB, biaya pendidikan, dan jadwal kunjungan sekolah.
              InsyaAllah tim kami akan menyambut dengan ramah.
            </p>
            <a class="mimha-btn-primary" href="https://wa.me/6281234567890?text=Assalamu%27alaikum%2C+saya+ingin+informasi+PPDB+MIMHa" target="_blank" rel="noopener">
              <span class="whatsapp">🟢</span>
              Chat Admin PPDB via WhatsApp
            </a>
          </div>

          <div class="mimha-cta-contact">
            <div>
              <div class="mimha-cta-icon">📍</div>
              <div>
                <strong>Alamat Sekolah</strong><br>
                <span>Isi alamat lengkap MIMHa di sini (kota, kecamatan).</span>
              </div>
            </div>
            <div>
              <div class="mimha-cta-icon">📞</div>
              <div>
                <strong>Telepon / WA</strong><br>
                <a href="tel:+6281234567890">+62 812-3456-7890</a>
              </div>
            </div>
            <div>
              <div class="mimha-cta-icon">🌐</div>
              <div>
                <strong>Media Sosial</strong><br>
                <span>Instagram: @akun_mimha &nbsp;|&nbsp; Website: sekolahislammimha.sch.id</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="mimha-footer">
    © <span id="mimhaYear"></span> MIMHa Permata Ilmu. Seluruh hak cipta dilindungi.  
    Dibangun dengan cinta untuk generasi Qur'ani.
  </footer>
</div>

<script>
  // tahun otomatis di footer
  (function() {
    var ySpan = document.getElementById('mimhaYear');
    if (ySpan) ySpan.textContent = new Date().getFullYear();
  })();
</script>
