Popup Modal

<!-- Modal 1: Sample Informasi / Dokumentasi -->
<div id="modal-demo-sample" class="docs-modal">
  <div class="docs-modal-overlay"></div>
  <div class="docs-modal-dialog">
    <div class="docs-modal-header">
      <h3 class="docs-modal-title">
        <iconify-icon icon="lucide:book-open-check" style="color: #6366f1; font-size: 1.25rem;"></iconify-icon>
        <span>Panduan Integrasi Cepat</span>
      </h3>
      <button type="button" class="docs-modal-close" data-modal-close="true" aria-label="Tutup Modal">
        <svg style="width: 1.2rem; height: 1.2rem;" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </div>
    <div class="docs-modal-body">
      <p style="margin-top: 0;">
        Ini adalah contoh <strong>Popup Modal Responsif & Estetik</strong>. Modal ini otomatis menyesuaikan ukuran di layar HP maupun Desktop, dilengkapi latar belakang <em>glassmorphism backdrop blur</em>.
      </p>
      <div class="callout callout-tip" style="margin: 1.25rem 0;">
        <div class="callout-icon">
          <iconify-icon icon="lucide:lightbulb"></iconify-icon>
        </div>
        <div class="callout-content">
          <strong>Tips:</strong> Pengunjung dapat menutup modal ini dengan klik tombol silang (✕), klik area luar (overlay), atau menekan tombol <kbd>Esc</kbd> pada keyboard.
        </div>
      </div>
      <p style="margin-bottom: 0;">
        Anda dapat meletakkan teks panduan, formulir, video embed, tabel, atau cuplikan kode di dalam modal ini.
      </p>
    </div>
    <div class="docs-modal-footer">
      <button type="button" class="btn btn-ghost btn-sm" data-modal-close="true">Tutup</button>
      <button type="button" class="btn btn-primary btn-sm" data-modal-close="true">
        <iconify-icon icon="lucide:check"></iconify-icon>
        <span>Mengerti</span>
      </button>
    </div>
  </div>
</div>

<!-- Modal 2: Sample Form Kontak / Permintaan Token -->
<div id="modal-demo-form" class="docs-modal">
  <div class="docs-modal-overlay"></div>
  <div class="docs-modal-dialog">
    <div class="docs-modal-header">
      <h3 class="docs-modal-title">
        <iconify-icon icon="lucide:key" style="color: #6366f1; font-size: 1.25rem;"></iconify-icon>
        <span>Request API Token</span>
      </h3>
      <button type="button" class="docs-modal-close" data-modal-close="true" aria-label="Tutup Modal">
        <svg style="width: 1.2rem; height: 1.2rem;" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </div>
    <div class="docs-modal-body">
      <p style="margin-top: 0; font-size: 0.875rem; color: #64748b;">
        Masukkan alamat email terdaftar Anda untuk menerima Secret API Key secara instan.
      </p>
      <div style="margin: 1.25rem 0;">
        <label style="display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: #334155;">Alamat Email</label>
        <input type="email" placeholder="nama@perusahaan.com" style="width: 100%; padding: 0.6rem 0.85rem; font-size: 0.875rem; border-radius: 0.625rem; border: 1px solid #cbd5e1; outline: none; box-sizing: border-box; transition: all 0.2s;" />
      </div>
    </div>
    <div class="docs-modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-modal-close="true">Batal</button>
      <button type="button" class="btn btn-primary btn-sm" data-modal-close="true">
        <iconify-icon icon="lucide:send"></iconify-icon>
        <span>Kirim Permintaan</span>
      </button>
    </div>
  </div>
</div>