MGMP PJOK SMP KAB. KARAWANG: Pengumuman

Tampilkan postingan dengan label Pengumuman. Tampilkan semua postingan

Anggota MGMP PJOK SMP Kab. Karawang

<div id="mgmp-app">

  <!-- ===================== HEADER ===================== -->
  <div class="mgmp-header">
    <!-- Gambar banner disematkan langsung (base64) agar file ini tetap satu file utuh.
         Bila ingin ganti banner nanti, upload gambar baru ke Blogger (Insert Image),
         lalu ganti isi src="data:image/jpeg;base64,...." dengan URL gambar tersebut. -->
    <img alt="MGMP PJOK SMP Kabupaten Karawang - Anggota" class="mgmp-header-banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisaAUlxhCPaB0HSxdkHxUrkEjNncLAmHxLoHVeZhUrv5M1Sg0-21HxEgkPYD68oH-DUreZZI-dmJ34m_ClIC4748y60k3OLMILLM714T_Ii8TEJ8HAAQ2fAwm7msw1QXYmBy5qxFVqLDWU-3empfnhM7RfwAXuGpP9XeYIHldtO-7JX_XxYAH1UdbF3VI/s1600/thumbnail-anggota-640x360.jpg" />
    <button class="mgmp-admin-toggle" id="mgmp-admin-toggle" type="button">🔒 Masuk Admin</button>
    <a class="mgmp-social-bar" href="https://www.instagram.com/mgmp_pjok_karawang/" rel="noopener" target="_blank">
      <span class="mgmp-social-icon">📷</span> mgmp_pjok_karawang
    </a>
  </div>

  <!-- ===================== INTRO / TOOLBAR ===================== -->
  <div class="mgmp-section">
    <div class="mgmp-intro-row">
      <div class="mgmp-intro-icon">👥</div>
      <div class="mgmp-intro-text">
        <h2>Anggota MGMP PJOK SMP<br />Kabupaten Karawang</h2>
        <p>Direktori anggota MGMP PJOK SMP Kabupaten Karawang sebagai ruang silaturahmi, kolaborasi, dan penguatan komunitas profesional Guru PJOK.</p>
      </div>
      <div class="mgmp-ribbon">Guru PJOK <b>Hebat</b><br />Karawang Kuat</div>
    </div>
	  <div class="mgmp-toolbar">
      <div class="mgmp-search-box">
        <span>🔍</span>
        <form autocomplete="off" onsubmit="return false;" style="width: 100%;">
          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="mgmp-search" name="q" placeholder="Cari nama guru atau sekolah..." spellcheck="false" type="search" />
        </form>
      </div>
      <div class="mgmp-select-box">
        <span>📍</span>
        <select id="mgmp-filter-komisariat">
          <option value="">Semua Komisariat</option>
        </select>
      </div>
      <div class="mgmp-total-badge">
        <span>👥 Total Anggota</span>
        <b id="mgmp-total-count">0</b>
      </div>
    </div>
	    <!-- ===================== ADMIN BAR (muncul setelah login) ===================== -->
    <div class="mgmp-admin-bar" id="mgmp-admin-bar" style="display: none;">
      <span>Mode Admin aktif</span>
      <button class="mgmp-btn mgmp-btn-primary" id="mgmp-add-btn" type="button">+ Tambah Anggota</button>
      <button class="mgmp-btn mgmp-btn-ghost" id="mgmp-import-btn" type="button">📥 Import Excel</button>
      <button class="mgmp-btn mgmp-btn-ghost" id="mgmp-export-btn" type="button">📤 Export Excel</button>
      <button class="mgmp-btn mgmp-btn-ghost" id="mgmp-template-btn" type="button">📄 Unduh Template</button>
      <button class="mgmp-btn mgmp-btn-ghost" id="mgmp-logout-btn" type="button">Keluar</button>
      <input accept=".xlsx,.xls,.csv" id="mgmp-import-file" style="display: none;" type="file" />
    </div>
    <div class="mgmp-import-status" id="mgmp-import-status" style="display: none;"></div>

    <!-- ===================== PANEL ADMIN: KELOLA ANGGOTA ===================== -->
    <div class="mgmp-admin-panel" id="mgmp-admin-panel" style="display: none;">
      <h3>Kelola Anggota <span class="mgmp-admin-panel-count" id="mgmp-admin-panel-count"></span></h3>
      <p class="mgmp-admin-panel-sub">Semua anggota yang berhasil ditambahkan manual maupun lewat import Excel muncul di sini. Gunakan aksi Edit / Hapus untuk mengelolanya.</p>
      <div class="mgmp-admin-table-wrap">
        <table class="mgmp-admin-table">
          <thead>
            <tr>
              <th>Nama</th>
              <th>Sekolah</th>
              <th>Komisariat</th>
              <th>Gender</th>
              <th>Foto</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody id="mgmp-admin-table-body"></tbody>
        </table>
      </div>
      <div class="mgmp-empty" id="mgmp-admin-table-empty" style="display: none;">Belum ada anggota. Tambah manual atau import dari Excel di atas.</div>
    </div>

    <!-- ===================== GRID ANGGOTA ===================== -->
    <div class="mgmp-grid" id="mgmp-grid"></div>
    <div class="mgmp-empty" id="mgmp-empty" style="display: none;">Belum ada anggota yang cocok / terdaftar.</div>
  </div>

  <!-- ===================== FOOTER ===================== -->
  <div class="mgmp-footer">
    <span>🏃 Bersama MGMP PJOK, Kita Tingkatkan Profesionalisme Guru<br />untuk Pendidikan Jasmani, Olahraga dan Kesehatan yang Lebih Baik</span>
    <span>📖</span>
  </div>

  <!-- ===================== MODAL: LOGIN ADMIN ===================== -->
  <div class="mgmp-modal-overlay" id="mgmp-modal-login" style="display: none;">
    <div class="mgmp-modal">
      <button class="mgmp-modal-close" data-close="mgmp-modal-login">×</button>
      <h3>Masuk Admin</h3>
      <p class="mgmp-modal-sub">Khusus pengelola MGMP PJOK untuk mengelola data anggota.</p>
      <div class="mgmp-field">
        <label>Email</label>
        <input id="mgmp-login-email" placeholder="admin@email.com" type="email" />
      </div>
      <div class="mgmp-field">
        <label>Password</label>
        <div class="mgmp-password-wrap">
          <input id="mgmp-login-password" placeholder="••••••••" type="password" />
          <button aria-label="Tampilkan password" class="mgmp-password-toggle" id="mgmp-login-password-toggle" type="button">👁️</button>
        </div>
      </div>
      <div class="mgmp-error" id="mgmp-login-error"></div>
      <button class="mgmp-btn mgmp-btn-primary mgmp-btn-block" id="mgmp-login-submit" type="button">Masuk</button>
    </div>
  </div>

  <!-- ===================== MODAL: TAMBAH / EDIT ANGGOTA ===================== -->
  <div class="mgmp-modal-overlay" id="mgmp-modal-form" style="display: none;">
    <div class="mgmp-modal">
      <button class="mgmp-modal-close" data-close="mgmp-modal-form">×</button>
      <h3 id="mgmp-form-title">Tambah Anggota</h3>
      <input id="mgmp-form-id" type="hidden" />
      <div class="mgmp-field">
        <label>Nama Lengkap (dengan gelar)</label>
        <input id="mgmp-form-nama" placeholder="Contoh: Ahmad Fauzi, S.Pd" type="text" />
      </div>
      <div class="mgmp-field">
        <label>Asal Sekolah</label>
        <input id="mgmp-form-sekolah" placeholder="Contoh: SMP Negeri 1 Karawang" type="text" />
      </div>
      <div class="mgmp-field">
        <label>Komisariat / Wilayah</label>
        <input id="mgmp-form-komisariat" placeholder="Contoh: Karawang Kota" type="text" />
      </div>
      <div class="mgmp-field">
        <label>Jenis Kelamin</label>
        <select id="mgmp-form-gender">
          <option value="L">Laki-laki</option>
          <option value="P">Perempuan</option>
        </select>
      </div>
      <div class="mgmp-field">
        <label>Foto Anggota (opsional — kosongkan untuk pakai inisial)</label>
        <input accept="image/*" id="mgmp-form-foto-file" type="file" />
        <div class="mgmp-foto-preview-wrap">
          <img alt="Preview foto" id="mgmp-form-foto-preview" style="display: none;" />
        </div>
        <div id="mgmp-cropper-block" style="display: none;">
          <p class="mgmp-cropper-hint">Geser foto di dalam lingkaran & atur zoom supaya pas.</p>
          <div class="mgmp-cropper" id="mgmp-cropper">
            <img alt="" id="mgmp-cropper-img" />
          </div>
          <div class="mgmp-cropper-zoomrow">
            <span>🔍</span>
            <input id="mgmp-cropper-zoom" max="300" min="100" type="range" value="100" />
          </div>
        </div>
        <input id="mgmp-form-foto-url" type="hidden" />
      </div>
      <div class="mgmp-error" id="mgmp-form-error"></div>
      <div class="mgmp-form-actions">
        <button class="mgmp-btn mgmp-btn-danger" id="mgmp-form-delete" style="display: none;" type="button">Hapus</button>
        <button class="mgmp-btn mgmp-btn-primary" id="mgmp-form-submit" type="button">Simpan</button>
      </div>
    </div>
  </div>

</div>

<style>
#mgmp-app{--mgmp-navy:#0b2145;--mgmp-navy2:#173a72;--mgmp-gold:#f4c430;--mgmp-blue:#2f6fed;--mgmp-ink:#1f2937;--mgmp-muted:#6b7280;--mgmp-bg:#f3f6fb;font-family:'Open Sans',Arial,sans-serif;color:var(--mgmp-ink);max-width:1100px;margin:0 auto;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.08);border-radius:10px;overflow:hidden;}
#mgmp-app *{box-sizing:border-box;}
#mgmp-app h1,#mgmp-app h2,#mgmp-app h3{font-family:'Dosis',Arial,sans-serif;margin:0;}

.mgmp-header{position:relative;line-height:0;background:var(--mgmp-navy);}
.mgmp-header-banner{width:100%;height:auto;display:block;}
.mgmp-admin-toggle{position:absolute;bottom:14px;right:16px;background:rgba(11,33,69,.72);border:1.5px solid #f4c430;color:#fff;font-weight:800;padding:7px 14px;border-radius:20px;font-size:13px;cursor:pointer;backdrop-filter:blur(2px);text-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.mgmp-admin-toggle:hover{background:rgba(11,33,69,.9);}
@media (max-width:600px){.mgmp-admin-toggle{bottom:8px;right:8px;font-size:11px;padding:5px 10px;}}
.mgmp-social-bar{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--mgmp-navy);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:9px 22px;border-radius:24px;box-shadow:0 4px 10px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.mgmp-social-bar:hover{background:#173a72;}
.mgmp-social-icon{font-size:15px;}
.mgmp-section{margin-top:18px;}
@media (max-width:600px){.mgmp-social-bar{font-size:11.5px;padding:7px 16px;bottom:-16px;}}

.mgmp-section{padding:22px 24px 6px;background:var(--mgmp-bg);}
.mgmp-intro-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.mgmp-intro-icon{font-size:30px;background:#e4ecfb;border-radius:12px;padding:10px 12px;}
.mgmp-intro-text{flex:1;min-width:220px;}
.mgmp-intro-text h2{font-size:21px;color:var(--mgmp-navy);}
.mgmp-intro-text p{margin:6px 0 0;color:var(--mgmp-muted);font-size:13.5px;max-width:520px;}
.mgmp-ribbon{background:linear-gradient(100deg,var(--mgmp-navy),#2c6fd6);color:#fff;font-family:'Dosis',Arial,sans-serif;font-weight:700;font-size:16px;padding:12px 18px;border-radius:10px;transform:rotate(-2deg);white-space:nowrap;}
.mgmp-ribbon b{color:var(--mgmp-gold);}

.mgmp-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.mgmp-search-box,.mgmp-select-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:9px 16px;flex:1;min-width:200px;}
.mgmp-search-box input,.mgmp-select-box select{border:none;outline:none;background:transparent;font-size:14px;width:100%;color:var(--mgmp-ink);}
.mgmp-total-badge{background:var(--mgmp-blue);color:#fff;border-radius:24px;padding:8px 18px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;line-height:1.1;}
.mgmp-total-badge b{font-size:18px;}

.mgmp-admin-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff7e0;border:1px solid #f4c430;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13.5px;color:#7a5c00;}
.mgmp-admin-bar span{font-weight:700;flex:1 0 100%;}
@media (min-width:560px){.mgmp-admin-bar span{flex:1 1 auto;}}

.mgmp-import-status{border-radius:8px;padding:9px 14px;font-size:13px;margin-bottom:16px;background:#eef2f9;color:var(--mgmp-ink);}
.mgmp-import-status.mgmp-import-success{background:#e6f7ec;color:#1a7a3d;}
.mgmp-import-status.mgmp-import-error{background:#fdecec;color:#b3261e;}

.mgmp-admin-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 18px 8px;margin-bottom:22px;}
.mgmp-admin-panel h3{color:var(--mgmp-navy);font-size:17px;display:inline;}
.mgmp-admin-panel-count{font-size:13px;color:var(--mgmp-muted);font-weight:600;margin-left:4px;}
.mgmp-admin-panel-sub{color:var(--mgmp-muted);font-size:12.5px;margin:4px 0 14px;}
.mgmp-admin-table-wrap{overflow-x:auto;}
.mgmp-admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.mgmp-admin-table th{text-align:left;color:var(--mgmp-navy);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid #e2e8f0;}
.mgmp-admin-table td{padding:9px 10px;border-bottom:1px solid #eef1f6;vertical-align:middle;}
.mgmp-admin-table-actions{display:flex;gap:6px;white-space:nowrap;}
.mgmp-btn-sm{padding:5px 10px;font-size:12px;}

.mgmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-bottom:24px;}
.mgmp-card{background:#fff;border-radius:12px;padding:16px 14px;text-align:center;box-shadow:0 2px 8px rgba(15,30,60,.06);position:relative;}
.mgmp-avatar-wrap{position:relative;width:78px;height:78px;margin:0 auto 10px;}
.mgmp-avatar-img,.mgmp-avatar-fallback{width:78px!important;height:78px!important;max-width:78px!important;max-height:78px!important;border-radius:50%!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border:3px solid var(--mgmp-blue);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:24px;font-family:'Dosis',Arial,sans-serif;box-sizing:border-box;}
.mgmp-avatar-fallback.gender-P{border-color:#e0364f;background:#e0364f;}
.mgmp-avatar-fallback.gender-L{border-color:var(--mgmp-blue);background:var(--mgmp-blue);}
.mgmp-avatar-img.gender-P{border-color:#e0364f;}
.mgmp-card-name{font-weight:700;color:var(--mgmp-navy);font-size:14.5px;margin-bottom:4px;}
.mgmp-card-school{font-size:12.5px;color:var(--mgmp-muted);margin-bottom:8px;}
.mgmp-badge{display:inline-block;color:#fff;font-size:11px;font-weight:700;border-radius:14px;padding:4px 12px;}
.mgmp-card-admin-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;}
.mgmp-card-admin-actions button{border:none;border-radius:6px;width:24px;height:24px;font-size:12px;cursor:pointer;background:#eef2f9;}
.mgmp-card-admin-actions button:hover{background:#dbe6fb;}
#mgmp-app.mgmp-is-admin .mgmp-card{cursor:pointer;transition:box-shadow .15s;}
#mgmp-app.mgmp-is-admin .mgmp-card:hover{box-shadow:0 4px 14px rgba(15,30,60,.16);}
.mgmp-admin-thumb{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;border-radius:50%!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border:2px solid var(--mgmp-blue);box-sizing:border-box;}
.mgmp-admin-thumb-fallback{width:32px;height:32px;border-radius:50%;background:#eef2f9;color:var(--mgmp-muted);display:flex;align-items:center;justify-content:center;font-size:14px;}

.mgmp-empty{text-align:center;color:var(--mgmp-muted);padding:30px 0;font-size:14px;}

.mgmp-footer{background:linear-gradient(100deg,var(--mgmp-navy),#2c6fd6);color:#fff;font-size:12.5px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;}

.mgmp-btn{border:none;border-radius:8px;padding:10px 16px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Open Sans',Arial,sans-serif;}
.mgmp-btn-primary{background:var(--mgmp-blue);color:#fff;}
.mgmp-btn-primary:hover{background:#1f57c4;}
.mgmp-btn-ghost{background:#eef2f9;color:var(--mgmp-ink);}
.mgmp-btn-danger{background:#e0364f;color:#fff;}
.mgmp-btn-block{width:100%;margin-top:6px;}

.mgmp-modal-overlay{position:fixed;inset:0;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.mgmp-modal{background:#fff;border-radius:14px;padding:24px;max-width:380px;width:100%;position:relative;max-height:90vh;overflow-y:auto;}
.mgmp-modal h3{color:var(--mgmp-navy);font-size:20px;margin-bottom:4px;}
.mgmp-modal-sub{color:var(--mgmp-muted);font-size:12.5px;margin:0 0 14px;}
.mgmp-modal-close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:22px;cursor:pointer;color:var(--mgmp-muted);}
.mgmp-field{margin-bottom:12px;}
.mgmp-field label{display:block;font-size:12.5px;font-weight:700;color:var(--mgmp-navy);margin-bottom:4px;}
.mgmp-field input,.mgmp-field select{width:100%;padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13.5px;outline:none;}
.mgmp-field input:focus,.mgmp-field select:focus{border-color:var(--mgmp-blue);}
.mgmp-password-wrap{position:relative;}
.mgmp-password-wrap input{padding-right:40px!important;}
.mgmp-password-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);border:none;background:none;font-size:16px;line-height:1;cursor:pointer;padding:6px;border-radius:6px;opacity:.65;}
.mgmp-password-toggle:hover{opacity:1;background:#eef2f9;}
.mgmp-foto-preview-wrap{margin-top:8px;}
#mgmp-form-foto-preview{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important;border:2px solid var(--mgmp-blue);}
.mgmp-cropper-hint{font-size:11.5px;color:var(--mgmp-muted);margin:8px 0 4px;}
.mgmp-cropper{width:180px;height:180px;margin:4px auto 10px;border-radius:50%;overflow:hidden;position:relative;background:#eef2f9;border:2px dashed var(--mgmp-blue);cursor:grab;touch-action:none;user-select:none;}
.mgmp-cropper:active{cursor:grabbing;}
.mgmp-cropper img{position:absolute;top:0;left:0;max-width:none;max-height:none;pointer-events:none;-webkit-user-drag:none;}
.mgmp-cropper-zoomrow{display:flex;align-items:center;gap:8px;max-width:220px;margin:0 auto;}
.mgmp-cropper-zoomrow span{font-size:13px;}
.mgmp-cropper-zoomrow input[type="range"]{flex:1;}
.mgmp-error{color:#e0364f;font-size:12.5px;margin-bottom:10px;min-height:14px;}
.mgmp-form-actions{display:flex;gap:10px;}
.mgmp-form-actions .mgmp-btn{flex:1;}

/* Tampilan ponsel: judul & toolbar tidak boleh turun/wrap ke baris baru DAN
   tidak digeser horizontal — semua elemen justru diperkecil ukurannya
   (ikon, teks, padding) supaya tetap muat sejajar dalam satu baris,
   sama seperti gambar header yang otomatis mengecil menyesuaikan layar. */
@media (max-width:640px){
  .mgmp-intro-row{flex-wrap:nowrap!important;gap:8px!important;align-items:center!important;margin-bottom:12px!important;}
  .mgmp-intro-icon{flex:0 0 auto;font-size:18px!important;padding:7px 8px!important;border-radius:9px!important;}
  .mgmp-intro-text{flex:1 1 auto!important;min-width:0!important;max-width:none!important;}
  .mgmp-intro-text h2{font-size:12.5px!important;line-height:1.25!important;}
  .mgmp-intro-text p{font-size:9px!important;line-height:1.3!important;margin-top:3px!important;}
  .mgmp-ribbon{flex:0 0 auto;font-size:9px!important;padding:6px 8px!important;transform:none!important;white-space:normal!important;line-height:1.25!important;}

  .mgmp-toolbar{flex-wrap:nowrap!important;gap:6px!important;}
  .mgmp-search-box,.mgmp-select-box{flex:1 1 0!important;min-width:0!important;padding:6px 8px!important;gap:4px!important;}
  .mgmp-search-box input,.mgmp-select-box select{font-size:10.5px!important;}
  .mgmp-search-box input::placeholder{font-size:10.5px!important;}
  .mgmp-total-badge{flex:0 0 auto!important;padding:6px 8px!important;font-size:8.5px!important;white-space:nowrap;}
  .mgmp-total-badge b{font-size:13px!important;}
}
@media (max-width:380px){
  .mgmp-intro-icon{font-size:15px!important;padding:6px 7px!important;}
  .mgmp-intro-text h2{font-size:11px!important;}
  .mgmp-intro-text p{font-size:8px!important;}
  .mgmp-ribbon{font-size:8px!important;padding:5px 6px!important;}
  .mgmp-search-box input,.mgmp-select-box select{font-size:9.5px!important;}
  .mgmp-total-badge{font-size:7.5px!important;padding:5px 6px!important;}
  .mgmp-total-badge b{font-size:11px!important;}
}

/* Tampilan ponsel: 2 kartu sejajar per baris (lebih lega), lebar kolom
   menyesuaikan otomatis dengan lebar layar ponsel. Dengan ruang selebar ini
   nama & nama sekolah tidak perlu dipotong "..." lagi — kalau memang panjang,
   dibiarkan turun wajar ke baris ke-2 di dalam kartunya sendiri.
   Diletakkan paling akhir supaya pasti menimpa aturan .mgmp-grid/.mgmp-card dasar di atas. */
@media (max-width:640px){
  .mgmp-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:12px!important;overflow-x:visible!important;padding-bottom:16px;}
  .mgmp-card{padding:12px 8px!important;min-width:0;}
  .mgmp-avatar-wrap{width:58px!important;height:58px!important;margin:0 auto 8px!important;}
  .mgmp-avatar-img,.mgmp-avatar-fallback{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;font-size:19px!important;border-width:2.5px!important;}
  .mgmp-card-name{font-size:11.5px!important;margin-bottom:3px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:break-word;}
  .mgmp-card-school{font-size:10px!important;margin-bottom:6px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:break-word;}
  .mgmp-badge{font-size:9px!important;padding:3px 9px!important;white-space:normal;overflow-wrap:break-word;max-width:100%;}
}
@media (max-width:360px){
  .mgmp-grid{gap:8px!important;}
  .mgmp-card{padding:10px 6px!important;}
  .mgmp-avatar-wrap{width:52px!important;height:52px!important;}
  .mgmp-avatar-img,.mgmp-avatar-fallback{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important;font-size:17px!important;}
  .mgmp-card-name{font-size:10.5px!important;}
  .mgmp-card-school{font-size:9px!important;}
  .mgmp-badge{font-size:8.5px!important;}
}
</style>

<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-firestore-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
(function(){

  // ================== GANTI DI SINI DENGAN CONFIG FIREBASE ANDA ==================
  var firebaseConfig = {
    apiKey: "AIzaSyCbBHJs4YZDczGUpc43W1BOSCgUiAyJhnQ",
    authDomain: "anggota-616f0.firebaseapp.com",
    projectId: "anggota-616f0",
    storageBucket: "anggota-616f0.firebasestorage.app",
    messagingSenderId: "1243205965",
    appId: "1:1243205965:web:9a7983a7981e07ec91a704"
  };
  // =================================================================================

  var app = firebase.initializeApp(firebaseConfig);
  var db = firebase.firestore();
  var auth = firebase.auth();
  var COLLECTION = "anggota_mgmp_pjok";

  // ================== GANTI DI SINI DENGAN AKUN CLOUDINARY ANDA ==================
  var CLOUDINARY_CLOUD_NAME = "oakad2z6";
  var CLOUDINARY_UPLOAD_PRESET = "anggotamgmp";
  // =================================================================================

  var allMembers = [];
  var isAdmin = false;
  var editingId = null;

  // ---------- Cropper foto (geser + zoom, hasil dipotong pas lingkaran) ----------
  var CROP_SIZE = 180;   // ukuran kotak cropper di layar (px), sama dgn CSS .mgmp-cropper
  var CROP_OUTPUT = 480; // ukuran gambar hasil crop yg diupload (px, persegi)
  var cropper = {
    active: false,
    naturalW: 0, naturalH: 0,
    baseScale: 1,   // scale minimum supaya gambar menutupi kotak penuh
    zoom: 1,        // pengali tambahan dari slider (1 - 3)
    offsetX: 0, offsetY: 0,
    dragging: false,
    startX: 0, startY: 0,
    startOffsetX: 0, startOffsetY: 0
  };
  var cropperImgEl = null; // di-set saat DOM siap

  function clampCropOffset(){
    var w = cropper.naturalW * cropper.baseScale * cropper.zoom;
    var h = cropper.naturalH * cropper.baseScale * cropper.zoom;
    var minX = CROP_SIZE - w, minY = CROP_SIZE - h;
    if(cropper.offsetX > 0) cropper.offsetX = 0;
    if(cropper.offsetY > 0) cropper.offsetY = 0;
    if(cropper.offsetX < minX) cropper.offsetX = minX;
    if(cropper.offsetY < minY) cropper.offsetY = minY;
  }

  function applyCropperTransform(){
    if(!cropperImgEl) return;
    var w = cropper.naturalW * cropper.baseScale * cropper.zoom;
    var h = cropper.naturalH * cropper.baseScale * cropper.zoom;
    cropperImgEl.style.width = w + "px";
    cropperImgEl.style.height = h + "px";
    cropperImgEl.style.left = cropper.offsetX + "px";
    cropperImgEl.style.top = cropper.offsetY + "px";
  }

  function initCropper(dataUrl){
    cropperImgEl = document.getElementById("mgmp-cropper-img");
    var probe = new Image();
    probe.onload = function(){
      cropper.active = true;
      cropper.naturalW = probe.naturalWidth;
      cropper.naturalH = probe.naturalHeight;
      cropper.baseScale = Math.max(CROP_SIZE / cropper.naturalW, CROP_SIZE / cropper.naturalH);
      cropper.zoom = 1;
      document.getElementById("mgmp-cropper-zoom").value = 100;
      var w = cropper.naturalW * cropper.baseScale;
      var h = cropper.naturalH * cropper.baseScale;
      cropper.offsetX = (CROP_SIZE - w) / 2;
      cropper.offsetY = (CROP_SIZE - h) / 2;
      cropperImgEl.src = dataUrl;
      applyCropperTransform();
      document.getElementById("mgmp-cropper-block").style.display = "block";
      document.getElementById("mgmp-form-foto-preview").style.display = "none";
    };
    probe.src = dataUrl;
  }

  function hideCropper(){
    cropper.active = false;
    document.getElementById("mgmp-cropper-block").style.display = "none";
  }

  function cropperPointerDown(clientX, clientY){
    if(!cropper.active) return;
    cropper.dragging = true;
    cropper.startX = clientX;
    cropper.startY = clientY;
    cropper.startOffsetX = cropper.offsetX;
    cropper.startOffsetY = cropper.offsetY;
  }
  function cropperPointerMove(clientX, clientY){
    if(!cropper.active || !cropper.dragging) return;
    cropper.offsetX = cropper.startOffsetX + (clientX - cropper.startX);
    cropper.offsetY = cropper.startOffsetY + (clientY - cropper.startY);
    clampCropOffset();
    applyCropperTransform();
  }
  function cropperPointerUp(){
    cropper.dragging = false;
  }

  // Menghasilkan foto hasil crop (persegi, langsung penuh mengisi lingkaran) sbg Blob
  function getCroppedBlob(callback){
    if(!cropper.active || !cropperImgEl){ callback(null); return; }
    var canvas = document.createElement("canvas");
    canvas.width = CROP_OUTPUT;
    canvas.height = CROP_OUTPUT;
    var ctx = canvas.getContext("2d");
    var scale = cropper.baseScale * cropper.zoom;
    var sx = -cropper.offsetX / scale;
    var sy = -cropper.offsetY / scale;
    var sSize = CROP_SIZE / scale;
    ctx.drawImage(cropperImgEl, sx, sy, sSize, sSize, 0, 0, CROP_OUTPUT, CROP_OUTPUT);
    canvas.toBlob(function(blob){ callback(blob); }, "image/jpeg", 0.92);
  }

  var PALETTE = ["#2f6fed","#16a085","#8e44ad","#e67e22","#16a3a3","#e0364f","#f1b40c","#27ae60","#0984e3","#d63031"];
  function colorFor(name){
    if(!name) return "#6b7280";
    var h = 0;
    for(var i=0;i<name.length;i++){ h = name.charCodeAt(i) + ((h<<5)-h); }
    return PALETTE[Math.abs(h) % PALETTE.length];
  }
  function initials(name){
    if(!name) return "?";
    var parts = name.replace(/,.*/,"").trim().split(" ").filter(Boolean);
    return ((parts[0]||"")[0]||"") + ((parts[1]||"")[0]||"");
  }
  function esc(s){
    return (s||"").replace(/[&<>"']/g, function(c){
      return {"&":"&","<":"<",">":">",'"':""","'":"'"}[c];
    });
  }
  // Normalisasi untuk pencocokan filter komisariat: tahan beda spasi/huruf besar-kecil
  // (mis. dari data hasil import Excel yang tidak seragam).
  function normKomis(s){ return (s||"").toString().trim().toLowerCase(); }

  function populateFilter(){
    var sel = document.getElementById("mgmp-filter-komisariat");
    var current = sel.value;
    var seen = {};
    var komis = [];
    allMembers.forEach(function(m){
      var raw = (m.komisariat||"").toString().trim();
      if(!raw) return;
      var key = normKomis(raw);
      if(!seen[key]){ seen[key] = true; komis.push(raw); }
    });
    komis.sort();
    sel.innerHTML = '<option value="">Semua Komisariat</option>' +
      komis.map(function(k){ return '<option value="'+esc(k)+'">'+esc(k)+'</option>'; }).join("");
    if(komis.some(function(k){ return normKomis(k) === normKomis(current); })) sel.value = current;
  }

  function render(){
    var search = document.getElementById("mgmp-search").value.trim().toLowerCase();
    var komisFilter = document.getElementById("mgmp-filter-komisariat").value;

    var filtered = allMembers.filter(function(m){
      var matchSearch = !search ||
        (m.nama||"").toLowerCase().indexOf(search) !== -1 ||
        (m.sekolah||"").toLowerCase().indexOf(search) !== -1;
      var matchKomis = !komisFilter || normKomis(m.komisariat) === normKomis(komisFilter);
      return matchSearch && matchKomis;
    });

    document.getElementById("mgmp-total-count").textContent = filtered.length;

    var grid = document.getElementById("mgmp-grid");
    var empty = document.getElementById("mgmp-empty");
    if(filtered.length === 0){
      grid.innerHTML = "";
      empty.style.display = "block";
      return;
    }
    empty.style.display = "none";

    grid.innerHTML = filtered.map(function(m){
      var genderClass = m.gender === "P" ? "gender-P" : "gender-L";
      var avatar = m.foto
        ? '<div class="mgmp-avatar-img '+genderClass+'" style="background-image:url("'+esc(m.foto)+'");" role="img" aria-label="'+esc(m.nama)+'"></div>'
        : '<div class="mgmp-avatar-fallback '+genderClass+'">'+esc(initials(m.nama)).toUpperCase()+'</div>';
      return (
        '<div class="mgmp-card" data-card-id="'+m.id+'">' +
          '<div class="mgmp-avatar-wrap">'+avatar+'</div>' +
          '<div class="mgmp-card-name">'+esc(m.nama)+'</div>' +
          '<div class="mgmp-card-school">🏠 '+esc(m.sekolah)+'</div>' +
          '<span class="mgmp-badge" style="background:'+colorFor(m.komisariat)+'">📍 '+esc(m.komisariat)+'</span>' +
        '</div>'
      );
    }).join("");

    // Klik kartu (khusus admin) membuka form edit. Kartu tetap tampil di
    // tampilan depan selama modal terbuka maupun setelah ditutup —
    // hanya submit/hapus yang benar-benar mengubah data anggota.
    if(isAdmin){
      grid.querySelectorAll("[data-card-id]").forEach(function(card){
        card.addEventListener("click", function(){
          openEditForm(card.getAttribute("data-card-id"));
        });
      });
    } else {
      // Mode publik: klik kartu tidak melakukan apa-apa dan tidak pernah
      // menyembunyikan kartu/daftar anggota dari tampilan (juga menahan
      // event di fase capture agar tidak "ditangkap" script lain di tema).
      grid.querySelectorAll("[data-card-id]").forEach(function(card){
        card.addEventListener("click", function(e){
          e.preventDefault();
          e.stopPropagation();
        }, true);
      });
    }
  }

  // ---------- Panel admin: tabel kelola anggota (edit/hapus terpusat di sini) ----------
  function renderAdminTable(){
    var body = document.getElementById("mgmp-admin-table-body");
    var empty = document.getElementById("mgmp-admin-table-empty");
    var countLabel = document.getElementById("mgmp-admin-panel-count");
    countLabel.textContent = allMembers.length ? "(" + allMembers.length + " anggota)" : "";

    if(!allMembers.length){
      body.innerHTML = "";
      empty.style.display = "block";
      return;
    }
    empty.style.display = "none";

    body.innerHTML = allMembers.map(function(m){
      var fotoCell = m.foto
        ? '<div class="mgmp-admin-thumb" style="background-image:url("'+esc(m.foto)+'");" role="img" aria-label="'+esc(m.nama)+'"></div>'
        : '<div class="mgmp-admin-thumb-fallback">'+esc(initials(m.nama)).toUpperCase()+'</div>';
      return (
        '<tr>' +
          '<td>'+esc(m.nama)+'</td>' +
          '<td>'+esc(m.sekolah)+'</td>' +
          '<td>'+esc(m.komisariat)+'</td>' +
          '<td>'+(m.gender === "P" ? "Perempuan" : "Laki-laki")+'</td>' +
          '<td>'+fotoCell+'</td>' +
          '<td class="mgmp-admin-table-actions">' +
            '<button class="mgmp-btn mgmp-btn-ghost mgmp-btn-sm" data-edit="'+m.id+'">✏️ Edit</button>' +
            '<button class="mgmp-btn mgmp-btn-danger mgmp-btn-sm" data-del="'+m.id+'">🗑️ Hapus</button>' +
          '</td>' +
        '</tr>'
      );
    }).join("");

    body.querySelectorAll("[data-edit]").forEach(function(btn){
      btn.addEventListener("click", function(){ openEditForm(btn.getAttribute("data-edit")); });
    });
    body.querySelectorAll("[data-del]").forEach(function(btn){
      btn.addEventListener("click", function(){ deleteMember(btn.getAttribute("data-del")); });
    });
  }

  // ---------- Firestore realtime listener ----------
  db.collection(COLLECTION).orderBy("nama").onSnapshot(function(snapshot){
    allMembers = snapshot.docs.map(function(d){ return Object.assign({id:d.id}, d.data()); });
    populateFilter();
    render();
    renderAdminTable();
  }, function(err){
    console.error("Firestore error:", err);
    document.getElementById("mgmp-empty").style.display = "block";
    document.getElementById("mgmp-empty").textContent = "Gagal memuat data. Periksa konfigurasi Firebase.";
  });

  document.getElementById("mgmp-search").addEventListener("input", render);
  document.getElementById("mgmp-filter-komisariat").addEventListener("change", render);

  // ---------- Modal helpers ----------
  function showModal(id){ document.getElementById(id).style.display = "flex"; }
  function hideModal(id){ document.getElementById(id).style.display = "none"; }
  document.querySelectorAll("[data-close]").forEach(function(btn){
    btn.addEventListener("click", function(){ hideModal(btn.getAttribute("data-close")); });
  });

  // ---------- Admin: login/logout ----------
  document.getElementById("mgmp-admin-toggle").addEventListener("click", function(){
    if(isAdmin){ return; }
    document.getElementById("mgmp-login-error").textContent = "";
    showModal("mgmp-modal-login");
  });

  // Tombol mata: tampilkan/sembunyikan password saat login
  document.getElementById("mgmp-login-password-toggle").addEventListener("click", function(){
    var pwInput = document.getElementById("mgmp-login-password");
    var showing = pwInput.type === "text";
    pwInput.type = showing ? "password" : "text";
    this.textContent = showing ? "👁️" : "🙈";
    this.setAttribute("aria-label", showing ? "Tampilkan password" : "Sembunyikan password");
  });

  document.getElementById("mgmp-login-submit").addEventListener("click", function(){
    var email = document.getElementById("mgmp-login-email").value.trim();
    var pass = document.getElementById("mgmp-login-password").value;
    var errBox = document.getElementById("mgmp-login-error");
    errBox.textContent = "";
    if(!email || !pass){ errBox.textContent = "Isi email dan password."; return; }
    auth.signInWithEmailAndPassword(email, pass)
      .then(function(){ hideModal("mgmp-modal-login"); })
      .catch(function(err){ errBox.textContent = "Login gagal: " + err.message; });
  });

  document.getElementById("mgmp-logout-btn").addEventListener("click", function(){
    auth.signOut();
  });

  auth.onAuthStateChanged(function(user){
    isAdmin = !!user;
    document.getElementById("mgmp-app").classList.toggle("mgmp-is-admin", isAdmin);
    document.getElementById("mgmp-admin-bar").style.display = isAdmin ? "flex" : "none";
    document.getElementById("mgmp-admin-panel").style.display = isAdmin ? "block" : "none";
    document.getElementById("mgmp-admin-toggle").style.display = isAdmin ? "none" : "inline-block";
    render();
    renderAdminTable();
  });

  // ---------- Admin: add / edit / delete ----------
  function resetForm(){
    editingId = null;
    document.getElementById("mgmp-form-title").textContent = "Tambah Anggota";
    document.getElementById("mgmp-form-id").value = "";
    document.getElementById("mgmp-form-nama").value = "";
    document.getElementById("mgmp-form-sekolah").value = "";
    document.getElementById("mgmp-form-komisariat").value = "";
    document.getElementById("mgmp-form-gender").value = "L";
    document.getElementById("mgmp-form-foto-file").value = "";
    document.getElementById("mgmp-form-foto-url").value = "";
    var preview = document.getElementById("mgmp-form-foto-preview");
    preview.src = "";
    preview.style.display = "none";
    hideCropper();
    document.getElementById("mgmp-form-error").textContent = "";
    document.getElementById("mgmp-form-delete").style.display = "none";
  }

  document.getElementById("mgmp-form-foto-file").addEventListener("change", function(e){
    var file = e.target.files[0];
    var preview = document.getElementById("mgmp-form-foto-preview");
    if(!file){ preview.style.display = "none"; hideCropper(); return; }
    var reader = new FileReader();
    reader.onload = function(evt){
      initCropper(evt.target.result);
    };
    reader.readAsDataURL(file);
  });

  // ---------- Drag geser foto di dalam cropper (mouse + touch) ----------
  (function(){
    var box = document.getElementById("mgmp-cropper");
    box.addEventListener("mousedown", function(e){
      e.preventDefault();
      cropperPointerDown(e.clientX, e.clientY);
    });
    window.addEventListener("mousemove", function(e){
      cropperPointerMove(e.clientX, e.clientY);
    });
    window.addEventListener("mouseup", cropperPointerUp);

    box.addEventListener("touchstart", function(e){
      var t = e.touches[0];
      cropperPointerDown(t.clientX, t.clientY);
    }, {passive:true});
    box.addEventListener("touchmove", function(e){
      var t = e.touches[0];
      cropperPointerMove(t.clientX, t.clientY);
      e.preventDefault();
    }, {passive:false});
    box.addEventListener("touchend", cropperPointerUp);

    document.getElementById("mgmp-cropper-zoom").addEventListener("input", function(e){
      if(!cropper.active) return;
      cropper.zoom = Number(e.target.value) / 100;
      clampCropOffset();
      applyCropperTransform();
    });
  })();

  document.getElementById("mgmp-add-btn").addEventListener("click", function(){
    resetForm();
    showModal("mgmp-modal-form");
  });

  function openEditForm(id){
    var m = allMembers.find(function(x){ return x.id === id; });
    if(!m) return;
    editingId = id;
    document.getElementById("mgmp-form-title").textContent = "Edit Anggota";
    document.getElementById("mgmp-form-id").value = id;
    document.getElementById("mgmp-form-nama").value = m.nama || "";
    document.getElementById("mgmp-form-sekolah").value = m.sekolah || "";
    document.getElementById("mgmp-form-komisariat").value = m.komisariat || "";
    document.getElementById("mgmp-form-gender").value = m.gender || "L";
    document.getElementById("mgmp-form-foto-file").value = "";
    document.getElementById("mgmp-form-foto-url").value = m.foto || "";
    hideCropper();
    var preview = document.getElementById("mgmp-form-foto-preview");
    if(m.foto){ preview.src = m.foto; preview.style.display = "block"; }
    else { preview.src = ""; preview.style.display = "none"; }
    document.getElementById("mgmp-form-error").textContent = "";
    document.getElementById("mgmp-form-delete").style.display = "inline-block";
    showModal("mgmp-modal-form");
  }

  document.getElementById("mgmp-form-submit").addEventListener("click", function(){
    var nama = document.getElementById("mgmp-form-nama").value.trim();
    var sekolah = document.getElementById("mgmp-form-sekolah").value.trim();
    var komisariat = document.getElementById("mgmp-form-komisariat").value.trim();
    var gender = document.getElementById("mgmp-form-gender").value;
    var fotoFile = document.getElementById("mgmp-form-foto-file").files[0];
    var existingFotoUrl = document.getElementById("mgmp-form-foto-url").value;
    var errBox = document.getElementById("mgmp-form-error");
    var submitBtn = document.getElementById("mgmp-form-submit");
    errBox.textContent = "";

    if(!nama || !sekolah || !komisariat){
      errBox.textContent = "Nama, sekolah, dan komisariat wajib diisi.";
      return;
    }
    if(fotoFile && fotoFile.size > 3 * 1024 * 1024){
      errBox.textContent = "Ukuran foto maksimal 3MB.";
      return;
    }

    function saveToFirestore(fotoUrl){
      var data = { nama: nama, sekolah: sekolah, komisariat: komisariat, gender: gender, foto: fotoUrl || "" };
      var promise = editingId
        ? db.collection(COLLECTION).doc(editingId).update(data)
        : db.collection(COLLECTION).add(data);
      promise.then(function(){
        hideModal("mgmp-modal-form");
      }).catch(function(err){
        errBox.textContent = "Gagal menyimpan: " + err.message;
      }).finally(function(){
        submitBtn.disabled = false;
        submitBtn.textContent = "Simpan";
      });
    }

    submitBtn.disabled = true;

    function uploadBlobToCloudinary(blob){
      submitBtn.textContent = "Mengupload foto...";
      var formData = new FormData();
      formData.append("file", blob, "foto.jpg");
      formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET);
      formData.append("folder", "anggota_mgmp_pjok");

      fetch("https://api.cloudinary.com/v1_1/" + CLOUDINARY_CLOUD_NAME + "/image/upload", {
        method: "POST",
        body: formData
      })
        .then(function(res){ return res.json(); })
        .then(function(result){
          if(!result.secure_url){
            throw new Error(result.error && result.error.message ? result.error.message : "Upload gagal.");
          }
          submitBtn.textContent = "Menyimpan...";
          saveToFirestore(result.secure_url);
        })
        .catch(function(err){
          errBox.textContent = "Gagal upload foto: " + err.message;
          submitBtn.disabled = false;
          submitBtn.textContent = "Simpan";
        });
    }

    if(fotoFile && cropper.active){
      // Pakai hasil crop (sudah pas mengisi lingkaran) sebagai file yg diupload,
      // bukan foto mentah — ukuran & posisinya sesuai geser+zoom yg diatur user.
      getCroppedBlob(function(blob){
        if(!blob){
          errBox.textContent = "Gagal memproses foto, coba pilih ulang.";
          submitBtn.disabled = false;
          submitBtn.textContent = "Simpan";
          return;
        }
        uploadBlobToCloudinary(blob);
      });
    } else if(fotoFile){
      uploadBlobToCloudinary(fotoFile);
    } else {
      submitBtn.textContent = "Menyimpan...";
      saveToFirestore(existingFotoUrl);
    }
  });

  document.getElementById("mgmp-form-delete").addEventListener("click", function(){
    if(!editingId) return;
    if(!confirm("Yakin ingin menghapus anggota ini?")) return;
    db.collection(COLLECTION).doc(editingId).delete()
      .then(function(){ hideModal("mgmp-modal-form"); })
      .catch(function(err){ document.getElementById("mgmp-form-error").textContent = "Gagal menghapus: " + err.message; });
  });

  function deleteMember(id){
    if(!confirm("Yakin ingin menghapus anggota ini?")) return;
    db.collection(COLLECTION).doc(id).delete();
  }

  // ---------- Export Excel ----------
  document.getElementById("mgmp-export-btn").addEventListener("click", function(){
    if(typeof XLSX === "undefined"){ alert("Gagal memuat pustaka Excel. Cek koneksi internet lalu coba lagi."); return; }
    var rows = allMembers.map(function(m){
      return {
        "Nama": m.nama || "",
        "Sekolah": m.sekolah || "",
        "Komisariat": m.komisariat || "",
        "Jenis Kelamin": m.gender === "P" ? "Perempuan" : "Laki-laki",
        "Foto (URL)": m.foto || ""
      };
    });
    var ws = XLSX.utils.json_to_sheet(rows);
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Anggota");
    XLSX.writeFile(wb, "anggota-mgmp-pjok.xlsx");
  });

  // ---------- Unduh Template Excel kosong ----------
  document.getElementById("mgmp-template-btn").addEventListener("click", function(){
    if(typeof XLSX === "undefined"){ alert("Gagal memuat pustaka Excel. Cek koneksi internet lalu coba lagi."); return; }
    var ws = XLSX.utils.json_to_sheet([
      {"Nama":"Ahmad Fauzi, S.Pd","Sekolah":"SMP Negeri 1 Karawang","Komisariat":"Karawang Kota","Jenis Kelamin":"Laki-laki","Foto (URL)":""}
    ]);
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Template");
    XLSX.writeFile(wb, "template-import-anggota.xlsx");
  });

  // ---------- Import Excel ----------
  function normalizeGender(v){
    v = (v || "").toString().trim().toLowerCase();
    if(v === "p" || v === "perempuan" || v === "wanita") return "P";
    return "L";
  }
  function pick(row, keys){
    for(var i=0;i<keys.length;i++){
      var k = Object.keys(row).find(function(rk){ return rk.trim().toLowerCase() === keys[i]; });
      if(k && row[k] !== undefined && row[k] !== null && String(row[k]).trim() !== "") return String(row[k]).trim();
    }
    return "";
  }

  document.getElementById("mgmp-import-btn").addEventListener("click", function(){
    if(typeof XLSX === "undefined"){ alert("Gagal memuat pustaka Excel. Cek koneksi internet lalu coba lagi."); return; }
    document.getElementById("mgmp-import-file").click();
  });

  document.getElementById("mgmp-import-file").addEventListener("change", function(e){
    var file = e.target.files[0];
    if(!file) return;
    var statusBox = document.getElementById("mgmp-import-status");
    statusBox.style.display = "block";
    statusBox.className = "mgmp-import-status";
    statusBox.textContent = "Membaca file...";

    var reader = new FileReader();
    reader.onload = function(evt){
      try{
        var data = new Uint8Array(evt.target.result);
        var wb = XLSX.read(data, {type:"array"});
        var sheet = wb.Sheets[wb.SheetNames[0]];
        var rows = XLSX.utils.sheet_to_json(sheet, {defval:""});

        if(!rows.length){
          statusBox.textContent = "File kosong / tidak ada baris data.";
          statusBox.className = "mgmp-import-status mgmp-import-error";
          return;
        }

        var valid = [];
        var skipped = 0;
        rows.forEach(function(row){
          var nama = pick(row, ["nama","nama lengkap"]);
          var sekolah = pick(row, ["sekolah","asal sekolah"]);
          var komisariat = pick(row, ["komisariat","wilayah","komisariat / wilayah"]);
          var gender = normalizeGender(pick(row, ["jenis kelamin","gender"]));
          var foto = pick(row, ["foto (url)","foto","url foto"]);
          if(nama && sekolah && komisariat){
            valid.push({nama:nama, sekolah:sekolah, komisariat:komisariat, gender:gender, foto:foto});
          } else {
            skipped++;
          }
        });

        if(!valid.length){
          statusBox.textContent = "Tidak ada baris valid. Pastikan kolom Nama, Sekolah, Komisariat terisi.";
          statusBox.className = "mgmp-import-status mgmp-import-error";
          return;
        }

        statusBox.textContent = "Menyimpan " + valid.length + " anggota...";

        // Firestore batch write, dipecah tiap 400 baris untuk jaga-jaga batas batch
        var chunks = [];
        for(var i=0;i<valid.length;i+=400){ chunks.push(valid.slice(i,i+400)); }

        var chunkPromises = chunks.map(function(chunk){
          var batch = db.batch();
          chunk.forEach(function(item){
            var ref = db.collection(COLLECTION).doc();
            batch.set(ref, item);
          });
          return batch.commit();
        });

        Promise.all(chunkPromises).then(function(){
          statusBox.textContent = "Berhasil import " + valid.length + " anggota." + (skipped ? (" (" + skipped + " baris dilewati karena data tidak lengkap)") : "");
          statusBox.className = "mgmp-import-status mgmp-import-success";
        }).catch(function(err){
          statusBox.textContent = "Gagal menyimpan ke database: " + err.message;
          statusBox.className = "mgmp-import-status mgmp-import-error";
        });

      }catch(err){
        statusBox.textContent = "Gagal membaca file: " + err.message;
        statusBox.className = "mgmp-import-status mgmp-import-error";
      } finally {
        document.getElementById("mgmp-import-file").value = "";
      }
    };
    reader.readAsArrayBuffer(file);
  });

})();
</script>

<script>
// ---------- Buat "Diposting oleh" & "Pada Tanggal" pada info postingan Blogger
// jadi teks statis, bukan link ----------
(function(){
  function unwrapLink(a){
    if(!a || !a.parentNode) return;
    var span = document.createElement("span");
    span.textContent = a.textContent;
    span.className = a.className;
    if(a.getAttribute("style")) span.setAttribute("style", a.getAttribute("style"));
    a.parentNode.replaceChild(span, a);
  }

  function stripPostMetaLinks(){
    var dateRe = /^[A-Za-z]+ \d{1,2},\s*\d{4}$/;
    document.querySelectorAll("a").forEach(function(a){
      if(a.closest("#mgmp-app")) return; // jangan sentuh link di widget anggota (mis. Instagram)
      var txt = (a.textContent || "").trim();
      if(!txt) return;
      var p1 = a.parentElement ? a.parentElement.textContent : "";
      var p2 = (a.parentElement && a.parentElement.parentElement) ? a.parentElement.parentElement.textContent : "";
      var isDateLink = dateRe.test(txt);
      var isNearAuthorLabel = /Diposting oleh/i.test(p1) || /Diposting oleh/i.test(p2);
      var isNearDateLabel = /Pada Tanggal/i.test(p1) || /Pada Tanggal/i.test(p2);
      if(isDateLink || isNearAuthorLabel || isNearDateLabel){
        unwrapLink(a);
      }
    });
  }

  stripPostMetaLinks();
  if(document.readyState !== "complete"){
    window.addEventListener("load", stripPostMetaLinks);
  }
  setTimeout(stripPostMetaLinks, 800);
})();
</script>

Susunan Pengurus Baru MGMP PJOK SMP Karawang 2026-2031

<!--DOCTYPE html-->
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kepengurusan Baru MGMP PJOK SMP Kabupaten Karawang 2026-2031</title>
    
    <!-- Google Fonts: Poppins -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Custom styles for subtle enhancements */
        body {
            background-color: #f8fafc;
        }
        .hero-pattern {
            background-color: #1e3a8a;
            background-image: radial-gradient(#3b82f6 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        /* ===== PERBAIKAN: judul hero tidak terlihat (ditimpa tema Blogger) ===== */
        .judul-hero,
        .judul-hero span {
            color: #ffffff !important;
            font-family: 'Poppins', sans-serif !important;
            font-weight: 800 !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
        }
        .judul-hero .aksen {
            color: #bfdbfe !important;
        }

        /* Pengaman untuk judul bagian (h2/h3) agar tidak ditimpa tema */
        .judul-seksi {
            color: #1e293b !important;
            font-family: 'Poppins', sans-serif !important;
            font-weight: 700 !important;
        }
    </style>
</head>
<body class="text-slate-800 antialiased selection:bg-brand-500 selection:text-white">

    <header class="hero-pattern relative overflow-hidden pb-16 pt-20 sm:pb-24 sm:pt-32 text-center shadow-inner">
        <!-- Overlay gradient -->
        <div class="absolute inset-0 bg-gradient-to-b from-brand-900/90 to-brand-800/95"></div>
        
        <div class="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div class="inline-flex items-center space-x-2 rounded-full bg-brand-500/20 px-3 py-1 sm:px-4 sm:py-1.5 mb-4 sm:mb-6 text-xs sm:text-sm font-semibold text-brand-100 ring-1 ring-inset ring-brand-500/50 backdrop-blur-sm">
                <i class="fas fa-trophy"></i>
                <span>Resmi Ditetapkan</span>
            </div>
            
            <!-- Judul utama: warna putih dipaksa lewat kelas .judul-hero -->
            <h1 class="judul-hero text-3xl font-extrabold tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl leading-tight">
                Mengenal Lebih Dekat Kepengurusan Baru <span class="aksen block sm:inline mt-1 sm:mt-0">MGMP PJOK SMP</span> Kabupaten Karawang
            </h1>
            
            <p class="mt-4 sm:mt-6 max-w-2xl mx-auto text-base sm:text-lg leading-relaxed text-brand-50 font-light px-2 drop-shadow-md">
                Periode 2026-2031 membawa semangat baru, inovasi pembelajaran, dan kolaborasi untuk mencetak generasi yang sehat dan berprestasi.
            </p>
        </div>
        
        <!-- Decorative bottom wave/curve -->
        <div class="absolute bottom-0 left-0 right-0 w-full overflow-hidden leading-none z-10">
            <svg class="relative block w-full h-8 sm:h-12 lg:h-20" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C59.71,118.08,130.83,119.2,201.33,112.5,242.49,108.6,283.47,94.94,321.39,56.44Z" fill="#f8fafc"></path>
            </svg>
        </div>
    </header>

    <main class="relative -mt-6 sm:-mt-8 z-20 mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pb-16 sm:pb-24">
        
        <article class="glass-card rounded-2xl sm:rounded-3xl shadow-xl p-5 sm:p-8 lg:p-12 mb-8 sm:mb-12 border border-slate-100">
            
            <!-- Featured Thumbnail Image -->
            <div class="mb-6 sm:mb-10 w-full overflow-hidden rounded-xl sm:rounded-2xl shadow-lg border border-slate-200 bg-slate-100 relative flex items-center justify-center min-h-[200px] sm:min-h-[350px] md:min-h-[450px]">
                <!-- Fallback background when loading or error -->
                <div class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 z-0 p-4 text-center">
                    <i class="fas fa-image text-4xl sm:text-5xl mb-3 sm:mb-4 opacity-30"></i>
                    <p class="font-medium text-xs sm:text-sm">Memuat Gambar Thumbnail...</p>
                </div>
                <img alt="Peluncuran Kepengurusan Baru MGMP PJOK SMP Karawang" class="w-full h-full object-cover absolute inset-0 z-10 hover:scale-105 transition-transform duration-500 ease-in-out" onerror="this.style.display='none'; this.previousElementSibling.innerHTML='<i class=\'fas fa-image text-4xl sm:text-5xl mb-3 sm:mb-4 opacity-50\'></i><p class=\'font-medium text-xs sm:text-sm\'>Gambar belum tersedia</p>';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1DcWZl4-eUglht69KBtUmgG-mVACScHCdkS7prUBVWnJgYS7bHYetLH968dI9R17eFFXr2p-1hndGnWQKXigaU2R3CpiE5VdloFpEil4_oJkhUbaSisC81NJT06LhksQrd-dJcf6vSRTSSt-yFHLTG8sizkAmPnEpkLYK77reSpUAgz6oqUYNa1_TjQ/s1600/Gemini_Generated_Image_7ukn5h7ukn5h7ukn.jpeg">
            </div>

            <div class="prose prose-base sm:prose-lg prose-slate max-w-none">
                <p class="lead text-base sm:text-xl text-slate-700 sm:text-slate-600 leading-relaxed font-medium mb-5 sm:mb-6">
                    <strong>Salam Olahraga!</strong> Pendidikan Jasmani, Olahraga, dan Kesehatan (PJOK) memiliki peran krusial dalam mencetak generasi siswa yang tidak hanya cerdas secara akademik, tetapi juga tangguh dan sehat secara fisik. Di Kabupaten Karawang, motor penggerak utama dalam peningkatan kualitas guru dan pembelajaran olahraga ini adalah Musyawarah Guru Mata Pelajaran (MGMP) PJOK jenjang SMP.
                </p>
                <p class="mb-6 sm:mb-8 text-slate-600 leading-relaxed text-sm sm:text-base">
                    Tahun 2026 telah menjadi tahun yang sangat produktif dan penuh kolaborasi bagi komunitas kita. Mulai dari kemeriahan dan kesuksesan Jambore MGMP PJOK SMP se-Kabupaten Karawang di Jaya Naga Sports Center pada awal Mei lalu, hingga dedikasi tim dalam merancang dan menyusun modul LKPD PJOK terbaru untuk siswa di bulan Juli. Untuk terus menjaga momentum positif ini, MGMP PJOK SMP Kabupaten Karawang baru saja merilis struktur kepengurusan baru yang lebih segar dan modern.
                </p>

                <!-- Blockquote Motto -->
                <div class="relative my-8 sm:my-10 px-5 py-8 sm:px-8 sm:py-10 bg-gradient-to-br from-brand-50 to-white rounded-xl sm:rounded-2xl border-l-4 sm:border-l-8 border-brand-600 shadow-sm overflow-hidden">
                    <i class="fas fa-quote-left absolute top-4 left-4 sm:top-6 sm:left-6 text-4xl sm:text-6xl text-brand-100 opacity-50"></i>
                    <div class="relative z-10 text-center">
                        <p class="text-xl sm:text-2xl md:text-3xl font-bold text-brand-900 italic tracking-wide mb-1 sm:mb-2 leading-snug">
                            "Bersama Membangun Pendidikan dan Prestasi melalui PJOK"
                        </p>
                    </div>
                </div>

                <p class="mb-8 sm:mb-10 text-slate-600 leading-relaxed text-center text-sm sm:text-base">
                    Berdasarkan penetapan terbaru, berikut adalah gambaran susunan pengurus <strong>MGMP PJOK SMP Kabupaten Karawang Periode 2026-2031</strong>:
                </p>
            </div>

            <div class="space-y-12 sm:space-y-16 mt-8 sm:mt-12">
                
                <!-- Section: Dukungan Dinas -->
                <div>
                    <div class="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 mb-6 sm:mb-8 border-b-2 border-brand-100 pb-4 text-center sm:text-left">
                        <div class="bg-brand-100 text-brand-800 p-3 rounded-xl flex items-center justify-center w-12 h-12">
                            <i class="fas fa-landmark text-xl"></i>
                        </div>
                        <h2 class="judul-seksi text-xl sm:text-2xl font-bold text-slate-800">Dukungan Dinas Pendidikan</h2>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-t-4 border-brand-500 card-hover flex flex-col justify-center text-center sm:text-left">
                            <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-1 sm:mb-2">Pelindung</p>
                            <p class="font-bold text-slate-800 text-base sm:text-lg leading-tight mb-1">Drs. H. Wawan Setiawan NK., M.M.</p>
                            <p class="text-xs sm:text-sm text-slate-500 mt-1">Kadisdikbud Karawang</p>
                        </div>
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-t-4 border-brand-500 card-hover flex flex-col justify-center text-center sm:text-left">
                            <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-1 sm:mb-2">Penanggung Jawab Dinas</p>
                            <p class="font-bold text-slate-800 text-base sm:text-lg leading-tight mb-1">Yanto, M.Pd.</p>
                             <p class="text-xs sm:text-sm text-slate-500 mt-1">Kabid dikdas Karawang</p>
                            <p class="font-bold text-slate-800 text-base sm:text-lg leading-tight mt-1">Dr. H. Mulyana Surya Atmaja, M.Pd</p>
                         <p class="text-xs sm:text-sm text-slate-500 mt-1">Kasi GTK Disdikbud Karawang</p>  
                        </div>
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-t-4 border-brand-500 card-hover flex flex-col justify-center text-center sm:text-left">
                            <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-1 sm:mb-2">Penanggung Jawab Akademis</p>
                            <p class="font-bold text-slate-800 text-base sm:text-lg leading-tight mb-1">Budi Sutrisno, S.Pd., M.Pd.</p>
                         <p class="text-xs sm:text-sm text-slate-500 mt-1">Pengawas Disdikbud Karawang</p>  
                        </div>
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-t-4 border-brand-500 card-hover flex flex-col justify-center text-center sm:text-left">
                            <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-1 sm:mb-2">Pengarah</p>
                            <p class="font-bold text-slate-800 text-base sm:text-lg leading-tight mb-1">Asma, M.Pd.</p>
                            <p class="text-xs sm:text-sm text-slate-500 mt-1">Ketua Forum MKKS Karawang</p>
                        </div>
                    </div>
                </div>

                <!-- Section: Tim Inti -->
                <div>
                    <div class="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 mb-6 sm:mb-8 border-b-2 border-brand-100 pb-4 text-center sm:text-left">
                        <div class="bg-brand-100 text-brand-800 p-3 rounded-xl flex items-center justify-center w-12 h-12">
                            <i class="fas fa-users-cog text-xl"></i>
                        </div>
                        <h2 class="judul-seksi text-xl sm:text-2xl font-bold text-slate-800">Tim Inti Penggerak</h2>
                    </div>
                    
                    <!-- KETUA Centered -->
                    <div class="flex justify-center mb-6 sm:mb-8">
                        <div class="bg-brand-800 text-white rounded-2xl shadow-xl p-6 sm:p-8 max-w-md w-full text-center relative overflow-hidden card-hover transform sm:scale-105">
                            <div class="absolute -right-4 -top-4 opacity-10">
                                <i class="fas fa-star text-7xl sm:text-9xl"></i>
                            </div>
                            <p class="text-xs sm:text-sm font-bold text-brand-200 uppercase tracking-widest mb-2 sm:mb-3">Ketua</p>
                            <p class="font-bold text-xl sm:text-2xl leading-tight mb-2">Asep Bahrul Ulum, S.Pd., M.Pd.</p>
                            <p class="text-brand-100 bg-brand-900/50 inline-block px-3 py-1 rounded-full text-xs sm:text-sm mt-1 sm:mt-2">SMPN 1 Karawang Timur</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 max-w-4xl mx-auto">
                        <!-- Sekretaris -->
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-l-4 border-brand-500 card-hover">
                            <p class="text-xs sm:text-sm font-bold text-brand-600 uppercase tracking-wider mb-3 sm:mb-4 flex items-center gap-2">
                                <i class="fas fa-edit"></i> Sekretariat
                            </p>
                            <ul class="space-y-3 sm:space-y-4">
                                <li>
                                    <p class="font-bold text-slate-800 text-sm sm:text-base">Mimin Suherman, M.Pd.</p>
                                    <p class="text-xs sm:text-sm text-slate-500">Sekretaris 1 • SMPN 8 Karawang Barat</p>
                                </li>
                                <li>
                                    <p class="font-bold text-slate-800 text-sm sm:text-base">Restu Fawzy Idris, S.Pd.</p>
                                    <p class="text-xs sm:text-sm text-slate-500">Sekretaris 2 • SMPN 2 Telagasari</p>
                                </li>
                            </ul>
                        </div>
                        <!-- Bendahara -->
                        <div class="bg-white rounded-xl shadow-md p-5 sm:p-6 border-l-4 border-brand-500 card-hover">
                            <p class="text-xs sm:text-sm font-bold text-brand-600 uppercase tracking-wider mb-3 sm:mb-4 flex items-center gap-2">
                                <i class="fas fa-wallet"></i> Perbendaharaan
                            </p>
                            <ul class="space-y-3 sm:space-y-4">
                                <li>
                                    <p class="font-bold text-slate-800 text-sm sm:text-base">Dede Hidayat, S.Pd., M.Pd.</p>
                                    <p class="text-xs sm:text-sm text-slate-500">Bendahara 1 • SMPN 1 Karawang Timur</p>
                                </li>
                                <li>
                                    <p class="font-bold text-slate-800 text-sm sm:text-base">Iyus Yusmiatin, S.Pd.</p>
                                    <p class="text-xs sm:text-sm text-slate-500">Bendahara 2 • SMPN 3 Rengasdengklok</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 mb-6 sm:mb-8 border-b-2 border-brand-100 pb-4 text-center sm:text-left">
                        <div class="bg-brand-100 text-brand-800 p-3 rounded-xl flex items-center justify-center w-12 h-12">
                            <i class="fas fa-layer-group text-xl"></i>
                        </div>
                        <h2 class="judul-seksi text-xl sm:text-2xl font-bold text-slate-800">Bidang-Bidang Fungsi</h2>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        
                        <div class="bg-white rounded-xl shadow-md p-5 border-t-4 border-amber-500 flex items-start gap-3 sm:gap-4 card-hover">
                            <div class="text-amber-500 text-2xl sm:text-3xl mt-1 opacity-80"><i class="fas fa-project-diagram"></i></div>
                            <div>
                                <h3 class="judul-seksi font-bold text-base sm:text-lg text-slate-800 mb-2">Pengembangan Organisasi</h3>
                                <ul class="text-slate-600 space-y-1 text-xs sm:text-sm list-disc list-inside">
                                    <li>Aditya Nugraha, S.Pd.</li>
                                    <li>Cecep Nurdiansyah, S.Pd.</li>
                                    <li>Ardi Herdian, S.Pd.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-md p-5 border-t-4 border-emerald-500 flex items-start gap-3 sm:gap-4 card-hover">
                            <div class="text-emerald-500 text-2xl sm:text-3xl mt-1 opacity-80"><i class="fas fa-building"></i></div>
                            <div>
                                <h3 class="judul-seksi font-bold text-base sm:text-lg text-slate-800 mb-2">Sarana dan Prasarana</h3>
                                <ul class="text-slate-600 space-y-1 text-xs sm:text-sm list-disc list-inside">
                                    <li>Dede Maulana, S.Pd.</li>
                                    <li>Dewi, S.Pd.</li>
                                    <li>Angga T. Permana, S.Pd., M.Pd.</li>
                                    <li>Sukaryan, S.Pd.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-md p-5 border-t-4 border-purple-500 flex items-start gap-3 sm:gap-4 card-hover">
                            <div class="text-purple-500 text-2xl sm:text-3xl mt-1 opacity-80"><i class="fas fa-clipboard-list"></i></div>
                            <div>
                                <h3 class="judul-seksi font-bold text-base sm:text-lg text-slate-800 mb-2">Perencanaan dan Program</h3>
                                <ul class="text-slate-600 space-y-1 text-xs sm:text-sm list-disc list-inside">
                                    <li>Aep Guntur N., S.Pd., M.Pd.</li>
                                    <li>Rijal Anshori, S.Pd., M.Pd.</li>
                                    <li>Mohamad Yulianto, S.Pd.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-md p-5 border-t-4 border-rose-500 flex items-start gap-3 sm:gap-4 card-hover">
                            <div class="text-rose-500 text-2xl sm:text-3xl mt-1 opacity-80"><i class="fas fa-handshake"></i></div>
                            <div>
                                <h3 class="judul-seksi font-bold text-base sm:text-lg text-slate-800 mb-2">Humas dan Kerjasama</h3>
                                <ul class="text-slate-600 space-y-1 text-xs sm:text-sm list-disc list-inside">
                                    <li>Akbar W. Putra, S.Pd., M.Pd.</li>
                                    <li>Karno Santoso, S.Pd.</li>
                                    <li>Dra. Eka Sri Sumiati, M.Pd.</li>
                                    <li>Riki Yohanes, S.Pd.</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div>
                    <div class="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 mb-4 sm:mb-6 border-b-2 border-brand-100 pb-4 text-center sm:text-left">
                        <div class="bg-brand-100 text-brand-800 p-3 rounded-xl flex items-center justify-center w-12 h-12">
                            <i class="fas fa-map-marked-alt text-xl"></i>
                        </div>
                        <h2 class="judul-seksi text-xl sm:text-2xl font-bold text-slate-800">Koordinator Wilayah (KORWIL)</h2>
                    </div>
                    <p class="text-slate-600 mb-6 text-center max-w-3xl mx-auto text-xs sm:text-sm">
                        Pemerataan jangkauan untuk mempercepat arus informasi dan menjaring aspirasi dari rekan-rekan guru di setiap zona.
                    </p>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                        <!-- Korwil Items -->
                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Telukjambe</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Rachmat Sulaeman, S.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMPN 2 Telukjambe Timur</p>
                            </div>
                        </div>
                        
                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Karawang Kota</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Tolib Hadiwijaya, M.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMPN 1 Karawang Barat</p>
                            </div>
                        </div>

                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Rengasdengklok</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Indra Setiadi, S.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMPN 1 Tirtajaya</p>
                            </div>
                        </div>

                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Telagasari</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Ricky B. Laiyan, S.Pd., M.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMPN 2 Majalaya</p>
                            </div>
                        </div>

                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Cilamaya</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Jeje Jaelani, S.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMPN 1 Banyusari</p>
                            </div>
                        </div>

                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-3 sm:p-4 flex items-center gap-3 sm:gap-4 hover:bg-white hover:shadow-md transition-all">
                            <div class="bg-brand-100 text-brand-600 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-pin text-sm sm:text-base"></i>
                            </div>
                            <div>
                                <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase">Cikampek</p>
                                <p class="font-bold text-slate-800 text-xs sm:text-sm">Candra Nugraha, S.Pd.</p>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">SMP Pupuk Kujang</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Conclusion -->
            <div class="mt-12 sm:mt-16 pt-6 sm:pt-8 border-t border-slate-200 text-center">
                <p class="text-slate-600 leading-relaxed text-sm sm:text-lg font-medium">
                    Dengan wajah-wajah baru dan semangat kolaborasi yang kuat, kepengurusan periode 2026-2031 ini siap membawa angin segar bagi inovasi pembelajaran PJOK. Mari kita dukung penuh langkah pengurus baru agar prestasi siswa-siswi SMP di Kabupaten Karawang semakin gemilang!
                </p>
            </div>
        </article>
    </main>

    <!-- Footer -->
    <footer class="bg-slate-900 py-6 sm:py-8 text-center text-slate-400 text-xs sm:text-sm px-4">
        <p>© 2026 MGMP PJOK SMP Kabupaten Karawang. Hak Cipta Dilindungi.</p>
    </footer>

</body>
</html>

SIMPO

Anggota MGMP PJOK SMP Kab. Karawang

Susunan Pengurus Baru MGMP PJOK SMP Karawang 2026-2031