.elementor-778 .elementor-element.elementor-element-5a288ea{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SGS E-Book — Panduan Bisnis Impor</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Midtrans Snap.js SANDBOX — ganti data-client-key dengan milik Anda -->
<script src="https://app.sandbox.midtrans.com/snap/snap.js"
  data-client-key="GANTI_CLIENT_KEY_SANDBOX"></script>
<style>
  /* ===== RESET & BASE ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .sgs-wrap {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: #1a1a1a;
  }

  /* ===== PRODUCT HERO ===== */
  .sgs-hero {
    display: grid;
    grid-template-columns: 380px 1fr;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  /* LEFT — IMAGE */
  .sgs-img-col {
    background: #f7f5f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    gap: 1rem;
    position: relative;
  }

  .sgs-main-img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
  }

  .sgs-badge-img {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
  }

  /* RIGHT — INFO */
  .sgs-info-col {
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
  }

  .sgs-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #7b4d1e;
    background: #fdf0e0;
    border: 1px solid #f5d5a0;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    width: fit-content;
  }

  .sgs-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
  }

  .sgs-rating {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sgs-stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 1px;
  }

  .sgs-rating-text {
    font-size: 12px;
    color: #888;
  }

  .sgs-divider {
    height: 1px;
    background: #f0f0f0;
  }

  .sgs-price-wrap {}
  .sgs-price {
    font-size: 32px;
    font-weight: 700;
    color: #c0392b;
    line-height: 1;
  }
  .sgs-price-note {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }

  /* INFO ROWS */
  .sgs-info-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sgs-irow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .sgs-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
  }

  .sgs-itext {}
  .sgs-ilabel {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 1px;
  }
  .sgs-ival {
    font-size: 13px;
    font-weight: 600;
    color: #222;
  }
  .sgs-isub {
    font-size: 11px;
    color: #aaa;
  }

  /* BUTTONS */
  .sgs-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
  }

  .sgs-btn-cart {
    padding: 13px;
    border-radius: 10px;
    border: 1.5px solid #c0392b;
    background: transparent;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
  }
  .sgs-btn-cart:hover { background: #fff5f5; }

  .sgs-btn-buy {
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: #c0392b;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
  }
  .sgs-btn-buy:hover { background: #a93226; }
  .sgs-btn-buy:active { transform: scale(0.98); }

  /* ===== DESCRIPTION SECTION ===== */
  .sgs-desc-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .sgs-desc-inner {
    padding: 1.75rem;
  }

  .sgs-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .sgs-desc-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 1.25rem;
  }

  /* FEATURES GRID */
  .sgs-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1.25rem;
  }

  .sgs-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #444;
  }

  .sgs-feature-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0392b;
    flex-shrink: 0;
  }

  /* VIDEO */
  .sgs-video-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
  }

  .sgs-video-wrap iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
  }

  /* ===== PAYMENT INFO ===== */
  .sgs-payment-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .sgs-pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .sgs-pay-chip {
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
  }

  /* ===== STICKY BUY BAR (mobile) ===== */
  .sgs-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 12px 16px;
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .sgs-sticky-price {
    font-size: 18px;
    font-weight: 700;
    color: #c0392b;
  }

  .sgs-sticky-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: #c0392b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }

  /* ===== RESPONSIVE ===== */
  /* TOAST */
  .sgs-toast {
    position: fixed; top: 20px; right: 20px;
    background: #222; color: #fff;
    padding: 12px 18px; border-radius: 10px;
    font-size: 13px; z-index: 9999;
    opacity: 0; transform: translateY(-8px);
    transition: all 0.3s; pointer-events: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 280px;
  }
  .sgs-toast.show { opacity: 1; transform: translateY(0); }
  .sgs-toast.success { background: #1a7a4a; }
  .sgs-toast.error { background: #c0392b; }

  /* OVERLAY */
  .sgs-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 9998;
    align-items: center; justify-content: center; padding: 1rem;
  }
  .sgs-overlay.open { display: flex; }

  /* MODAL */
  .sgs-modal {
    background: #fff; border-radius: 16px;
    padding: 1.75rem; width: 100%; max-width: 420px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .sgs-modal-title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 4px; }
  .sgs-modal-sub { font-size: 12px; color: #888; margin-bottom: 1.25rem; }
  .sgs-order-summary {
    background: #fafafa; border-radius: 10px; padding: 12px;
    margin-bottom: 1rem; display: flex;
    align-items: center; justify-content: space-between;
  }
  .sgs-order-name { font-size: 13px; font-weight: 600; color: #222; }
  .sgs-order-price { font-size: 15px; font-weight: 700; color: #c0392b; }
  .sgs-field { margin-bottom: 12px; }
  .sgs-field label { display: block; font-size: 12px; color: #555; margin-bottom: 4px; font-weight: 600; }
  .sgs-field input {
    width: 100%; padding: 10px 12px;
    border: 1px solid #e0e0e0; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: #111;
    outline: none; transition: border 0.15s;
  }
  .sgs-field input:focus { border-color: #c0392b; }
  .sgs-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1rem; }
  .sgs-cancel-btn {
    padding: 11px; border-radius: 8px;
    border: 1px solid #e0e0e0; background: transparent;
    color: #555; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  .sgs-pay-btn {
    padding: 11px; border-radius: 8px; border: none;
    background: #c0392b; color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .sgs-pay-btn:hover { background: #a93226; }
  .sgs-pay-btn:disabled { background: #ccc; cursor: not-allowed; }
  .sgs-spinner {
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff; border-radius: 50%;
    animation: sgspin 0.7s linear infinite; display: none;
  }
  @keyframes sgspin { to { transform: rotate(360deg); } }

  /* SANDBOX BANNER */
  .sgs-sandbox-banner {
    background: #fff8e1; border: 1px solid #ffe082;
    border-radius: 10px; padding: 10px 14px;
    font-size: 12px; color: #7a5c00;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 1.5rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  @media (max-width: 680px) {
    .sgs-hero { grid-template-columns: 1fr; }
    .sgs-img-col { padding: 1.5rem; min-height: 260px; }
    .sgs-main-img { max-width: 200px; }
    .sgs-info-col { padding: 1.25rem; }
    .sgs-title { font-size: 18px; }
    .sgs-price { font-size: 26px; }
    .sgs-btns { display: none; }
    .sgs-sticky-bar { display: flex; }
    .sgs-features { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>

<div class="sgs-toast" id="sgsToast"></div>

<div class="sgs-sandbox-banner">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#d4a000" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
  Mode <strong style="margin:0 2px;">Sandbox / Testing</strong> — tidak ada uang sungguhan dikenakan
</div>

<div class="sgs-overlay" id="sgsOverlay">
  <div class="sgs-modal">
    <div class="sgs-modal-title">Lengkapi data pembelian</div>
    <div class="sgs-modal-sub">PDF akan dikirim ke email Anda setelah pembayaran berhasil</div>
    <div class="sgs-order-summary">
      <div class="sgs-order-name">SGS E-Book</div>
      <div class="sgs-order-price">Rp275.000</div>
    </div>
    <div class="sgs-field">
      <label>Nama lengkap *</label>
      <input type="text" id="buyerName" placeholder="Contoh: Budi Santoso">
    </div>
    <div class="sgs-field">
      <label>Email (untuk terima PDF) *</label>
      <input type="email" id="buyerEmail" placeholder="email@anda.com">
    </div>
    <div class="sgs-field">
      <label>No. WhatsApp *</label>
      <input type="tel" id="buyerPhone" placeholder="08xxxxxxxxxx">
    </div>
    <div class="sgs-modal-btns">
      <button class="sgs-cancel-btn" onclick="closeSgsModal()">Batal</button>
      <button class="sgs-pay-btn" id="sgsPayBtn" onclick="sgsStartPayment()">
        <span id="sgsPayTxt">Bayar Sekarang</span>
        <span class="sgs-spinner" id="sgsSpinner"></span>
      </button>
    </div>
  </div>
</div>

<div class="sgs-wrap">

  <!-- ===== PRODUCT HERO ===== -->
  <div class="sgs-hero">

    <!-- Kolom Kiri: Gambar -->
    <div class="sgs-img-col">
      <span class="sgs-badge-img">E-Book Digital</span>
      <img
        class="sgs-main-img"
        src="https://semestaglobalsourcing.com/wp-content/uploads/2025/11/IMG_7011-1.png"
        alt="Cover SGS E-Book Panduan Bisnis Impor"
      >
    </div>

    <!-- Kolom Kanan: Info -->
    <div class="sgs-info-col">

      <div>
        <span class="sgs-tag">Semesta Global Sourcing</span>
        <h1 class="sgs-title" style="margin-top:8px;">SGS E-Book<br>Panduan Bisnis Impor</h1>
      </div>

      <div class="sgs-rating">
        <span class="sgs-stars">★★★★★</span>
        <span class="sgs-rating-text">5.0 · 3 ulasan · PDF siap download</span>
      </div>

      <div class="sgs-divider"></div>

      <div class="sgs-price-wrap">
        <div class="sgs-price">Rp275.000</div>
        <div class="sgs-price-note">Sekali bayar · akses selamanya</div>
      </div>

      <div class="sgs-divider"></div>

      <div class="sgs-info-rows">
        <div class="sgs-irow">
          <div class="sgs-ico">📦</div>
          <div class="sgs-itext">
            <div class="sgs-ilabel">Pengiriman</div>
            <div class="sgs-ival">Langsung ke email Anda</div>
            <div class="sgs-isub">PDF dikirim setelah pembayaran berhasil</div>
          </div>
        </div>
        <div class="sgs-irow">
          <div class="sgs-ico">🛡️</div>
          <div class="sgs-itext">
            <div class="sgs-ilabel">Jaminan</div>
            <div class="sgs-ival">Garansi uang kembali 7 hari</div>
            <div class="sgs-isub">Jika tidak sesuai deskripsi</div>
          </div>
        </div>
        <div class="sgs-irow">
          <div class="sgs-ico">💳</div>
          <div class="sgs-itext">
            <div class="sgs-ilabel">Pembayaran</div>
            <div class="sgs-ival">QRIS · GoPay · OVO · Transfer Bank</div>
            <div class="sgs-isub">Aman & terenkripsi via Midtrans</div>
          </div>
        </div>
      </div>

      <div class="sgs-divider"></div>

      <!-- TOMBOL -->
      <div class="sgs-btns">
        <button class="sgs-btn-cart" onclick="window.open('https://wa.me/8618320964563?text=Halo, saya ingin tanya tentang SGS E-Book', '_blank')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          Tanya Dulu
        </button>
        <button class="sgs-btn-buy" onclick="openSgsModal()">
          Beli Sekarang →
        </button>
      </div>

    </div>
  </div>

  <!-- ===== DESKRIPSI ===== -->
  <div class="sgs-desc-section">
    <div class="sgs-desc-inner">
      <div class="sgs-section-title">Tentang E-Book Ini</div>
      <p class="sgs-desc-text">
        Banyak orang tertarik membangun bisnis impor, tapi berhenti karena satu hal sederhana: bingung harus mulai dari mana. Riset produk, memilih supplier, memahami alur impor, sampai menghitung biaya sering terasa rumit, apalagi kalau harus belajar sambil mengeluarkan modal sendiri.
        <br><br>
        Buku ini dibuat sebagai tempat belajar yang aman untuk memahami bisnis impor dari awal. Bukan untuk nekat mencoba, tapi untuk tahu alurnya, risikonya, dan cara berpikirnya sebelum benar-benar terjun.
      </p>

      <div class="sgs-features">
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Cara riset produk impor</div>
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Memilih supplier terpercaya</div>
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Alur & proses impor lengkap</div>
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Hitung biaya & margin keuntungan</div>
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Risiko bisnis & cara mitigasi</div>
        <div class="sgs-feature"><div class="sgs-feature-dot"></div>Strategi dari praktisi impor</div>
      </div>

      <!-- VIDEO YOUTUBE -->
      <div class="sgs-video-wrap">
        <iframe
          src="https://www.youtube.com/embed/4v1_APDLWDI"
          title="Preview SGS E-Book"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>

    </div>
  </div>

  <!-- ===== METODE PEMBAYARAN ===== -->
  <div class="sgs-payment-section">
    <div class="sgs-section-title">Metode pembayaran</div>
    <div class="sgs-pay-methods">
      <span class="sgs-pay-chip">QRIS</span>
      <span class="sgs-pay-chip">GoPay</span>
      <span class="sgs-pay-chip">OVO</span>
      <span class="sgs-pay-chip">ShopeePay</span>
      <span class="sgs-pay-chip">Dana</span>
      <span class="sgs-pay-chip">BCA</span>
      <span class="sgs-pay-chip">Mandiri</span>
      <span class="sgs-pay-chip">BNI</span>
      <span class="sgs-pay-chip">BRI</span>
      <span class="sgs-pay-chip">Kartu Kredit</span>
    </div>
  </div>

</div>

<!-- STICKY BAR MOBILE -->
<div class="sgs-sticky-bar">
  <div class="sgs-sticky-price">Rp275.000</div>
  <button class="sgs-sticky-btn" onclick="openSgsModal()">
    Beli Sekarang →
  </button>
</div>

<script>
// =====================================================
// KONFIGURASI MIDTRANS — ISI BAGIAN INI
// =====================================================
const SGS_BACKEND = 'GANTI_URL_BACKEND/midtrans-token.php';
// Contoh: 'https://semestaglobalsourcing.com/midtrans-token.php'
// =====================================================

function openSgsModal() {
  document.getElementById('sgsOverlay').classList.add('open');
}

function closeSgsModal() {
  document.getElementById('sgsOverlay').classList.remove('open');
  sgsResetBtn();
}

function sgsToast(msg, type) {
  const t = document.getElementById('sgsToast');
  t.textContent = msg;
  t.className = 'sgs-toast show ' + (type || '');
  setTimeout(() => t.className = 'sgs-toast', 4000);
}

function sgsSetLoading(on) {
  document.getElementById('sgsPayBtn').disabled = on;
  document.getElementById('sgsPayTxt').textContent = on ? 'Memproses...' : 'Bayar Sekarang';
  document.getElementById('sgsSpinner').style.display = on ? 'block' : 'none';
}

function sgsResetBtn() { sgsSetLoading(false); }

async function sgsStartPayment() {
  const name  = document.getElementById('buyerName').value.trim();
  const email = document.getElementById('buyerEmail').value.trim();
  const phone = document.getElementById('buyerPhone').value.trim();

  if (!name)                     return sgsToast('Nama lengkap wajib diisi', 'error');
  if (!email || !email.includes('@')) return sgsToast('Email tidak valid', 'error');
  if (!phone)                    return sgsToast('No. WhatsApp wajib diisi', 'error');

  sgsSetLoading(true);

  try {
    const res = await fetch(SGS_BACKEND, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        order_id:       'SGS-' + Date.now(),
        gross_amount:   275000,
        customer_name:  name,
        customer_email: email,
        customer_phone: phone,
        item_name:      'SGS E-Book — Panduan Bisnis Impor'
      })
    });

    const data = await res.json();
    if (!data.snap_token) throw new Error('Snap token tidak diterima');

    sgsSetLoading(false);

    window.snap.pay(data.snap_token, {
      onSuccess: (r) => { closeSgsModal(); sgsToast('Pembayaran berhasil! Cek email Anda.', 'success'); console.log(r); },
      onPending: (r) => { closeSgsModal(); sgsToast('Menunggu konfirmasi pembayaran...', ''); console.log(r); },
      onError:   (r) => { sgsToast('Pembayaran gagal. Silakan coba lagi.', 'error'); console.log(r); },
      onClose:   ()  => { sgsToast('Popup ditutup sebelum selesai.', ''); sgsResetBtn(); }
    });

  } catch(err) {
    sgsSetLoading(false);
    sgsToast('Error: ' + err.message, 'error');
    console.error(err);
  }
}
</script>

</body>
</html>/* End custom CSS */