/* ============================================================
   GYE - UI tambahan (responsive mobile + panel pembayaran)
   Dipakai oleh SEMUA halaman. Satu file, sekali edit berlaku
   di seluruh website.
   Jangan hapus file ini. Taruh di folder yang sama dengan
   file-file .html
   ============================================================ */

/* ---------- 0. Dasar ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* Fokus keyboard tetap kelihatan (aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #4C8FD6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ============================================================
   1. MENU MOBILE (hamburger)
   Tombol dan panelnya dibuat otomatis oleh gye-ui.js,
   jadi tidak perlu mengubah HTML tiap halaman.
   ============================================================ */
.gye-burger { display: none; }
.gye-mobile-lang,
.gye-mobile-actions { display: none !important; }

@media (max-width: 980px) {
  header > div { position: relative; }

  .gye-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: transparent;
    border: 1px solid rgba(245, 247, 246, .3);
    color: #F5F7F6;
    cursor: pointer;
    padding: 0;
  }
  .gye-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #F5F7F6;
    position: relative;
    transition: background .15s;
  }
  .gye-burger span::before,
  .gye-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.5px;
    background: #F5F7F6;
    transition: transform .2s ease, top .2s ease;
  }
  .gye-burger span::before { top: -6px; }
  .gye-burger span::after  { top: 6px; }
  .gye-burger[aria-expanded="true"] span { background: transparent; }
  .gye-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .gye-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

  /* Toggle bahasa dipindah ke bar atas biar tetap gampang dijangkau */
  .gye-mobile-lang {
    display: flex !important;
    align-items: center;
    gap: 1px;
    border: 1px solid rgba(245, 247, 246, .3);
    padding: 2px;
    flex: none;
  }
  .gye-mobile-lang button {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    border: none;
    padding: 7px 11px;
    cursor: pointer;
  }
  .gye-mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex: none;
  }

  /* Panel menu */
  header nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #12224E;
    border-top: 1px solid rgba(245, 247, 246, .16);
    box-shadow: 0 18px 40px rgba(11, 18, 32, .28);
    padding: 10px 20px 22px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  header nav.gye-open { display: flex !important; }
  header nav > a {
    padding: 15px 2px;
    font-size: 15px;
    border-bottom: 1px solid rgba(245, 247, 246, .1);
  }
  header nav > a:last-of-type { border-bottom: none; }
  /* Tombol Kontak jadi full width di dalam panel */
  header nav > a[href="contact.html"] {
    margin-top: 14px;
    text-align: center;
    padding: 15px 20px !important;
    border: 1px solid #4C8FD6 !important;
  }
  header nav .gye-navlink::after { display: none; }
  /* Toggle bahasa versi desktop disembunyikan (sudah dipindah ke atas) */
  header nav > div:last-child { display: none !important; }
}


/* ============================================================
   2. RESPONSIVE UMUM
   Halaman ini ditulis dengan style inline, jadi override-nya
   memakai selector [style*="..."] + !important. Ini disengaja.
   ============================================================ */

/* --- Tablet: grid 2 kolom jadi 1 kolom, grid 3-4 kolom jadi 2 --- */
@media (max-width: 900px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([style*="auto 1fr"]):not([style*="repeat(3"]):not([style*="repeat(4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="repeat(3"], [style*="repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="align-items:end"], [style*="align-items:center"][style*="grid"] {
    align-items: start !important;
  }
  [style*="gap:64px"] { gap: 34px !important; }
  [style*="gap:56px"] { gap: 32px !important; }
  [style*="gap:48px"] { gap: 30px !important; }
  [style*="gap:44px"] { gap: 28px !important; }
}

/* --- HP: semua grid jadi satu kolom --- */
@media (max-width: 680px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([style*="auto 1fr"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="gap:40px"] { gap: 26px !important; }
  [style*="gap:36px"] { gap: 24px !important; }
  [style*="gap:32px"] { gap: 22px !important; }
}

/* --- Jarak tepi & jarak atas-bawah di layar kecil --- */
@media (max-width: 760px) {
  [style*="max-width:1240px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding:88px 40px"]      { padding: 52px 20px !important; }
  [style*="padding:96px 40px"]      { padding: 56px 20px !important; }
  [style*="padding:80px 40px"]      { padding: 48px 20px !important; }
  [style*="padding:72px 40px"]      { padding: 48px 20px !important; }
  [style*="padding:88px 40px 0"]    { padding: 52px 20px 0 !important; }
  [style*="padding:80px 40px 0"]    { padding: 48px 20px 0 !important; }
  [style*="padding:18px 40px"]      { padding: 14px 20px !important; }
  [style*="padding:20px 40px"]      { padding: 16px 20px !important; }
  [style*="padding:72px 40px 44px"] { padding: 48px 20px 32px !important; }
  [style*="padding:0 40px 56px"]    { padding: 0 20px 40px !important; }
  [style*="padding:96px 40px 104px"]{ padding: 56px 20px 60px !important; }
  [style*="padding:72px 40px 88px"] { padding: 44px 20px 56px !important; }

  /* Kartu-kartu di dalam section */
  [style*="padding:32px"] { padding: 22px !important; }
  [style*="padding:30px"] { padding: 22px !important; }

  /* Judul besar jangan sampai kepotong */
  h1, h2, h3 { overflow-wrap: break-word; }
  [style*="letter-spacing:-0.05em"],
  [style*="letter-spacing:-0.045em"] { letter-spacing: -.03em !important; }

  /* Tombol jadi lebar penuh biar gampang dipencet */
  button[type="submit"] { width: 100% !important; justify-self: stretch !important; }
}


/* ============================================================
   3. PANEL PEMBAYARAN (halaman contact.html)
   ============================================================ */
.gye-pay {
  display: none;
  scroll-margin-top: 92px;
  border: 1px solid #D3DBDD;
  background: #FFFFFF;
  margin-top: 26px;
}
.gye-pay.is-visible { display: block; animation: gyeFadeUp .32s ease both; }

@keyframes gyeFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Kepala: ucapan terima kasih --- */
.gye-pay__head {
  background: #16295C;
  color: #F5F7F6;
  padding: 30px 30px 26px;
}
.gye-pay__check {
  width: 40px; height: 40px;
  border: 1.5px solid #4C8FD6;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.gye-pay__check svg { width: 18px; height: 18px; display: block; }
.gye-pay__head h3 {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.gye-pay__head p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245, 247, 246, .84);
  max-width: 60ch;
}

/* --- Tiga langkah --- */
.gye-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #D3DBDD;
  border-bottom: 1px solid #D3DBDD;
}
.gye-step {
  background: #F5F7F6;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.gye-step__n {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7C8FA6;
}
.gye-step__t { font-size: 14px; font-weight: 500; color: #16295C; line-height: 1.4; }
.gye-step.is-done { background: #E7F0EE; }
.gye-step.is-done .gye-step__n { color: #0E7C79; }
.gye-step.is-now  { background: #FFFFFF; box-shadow: inset 3px 0 0 #0E7C79; }

/* --- Isi --- */
.gye-pay__body { padding: 26px 30px 30px; }

.gye-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  border: 1px solid #D3DBDD;
  border-left: 4px solid #0E7C79;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.gye-amount__l {
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #0E7C79;
}
.gye-amount__v { font-size: 18px; font-weight: 600; color: #16295C; letter-spacing: -.01em; }
.gye-amount__n { font-size: 13px; font-weight: 300; color: #4C6A8A; line-height: 1.6; }

/* --- Tab metode --- */
.gye-tabs {
  display: flex;
  gap: 0;
  border: 1px solid #D3DBDD;
  padding: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gye-tab {
  flex: 1 1 auto;
  min-width: 118px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #4C6A8A;
  background: transparent;
  border: none;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gye-tab:hover { color: #16295C; }
.gye-tab[aria-selected="true"] { background: #16295C; color: #F5F7F6; }

.gye-panel { display: none; }
.gye-panel.is-active { display: block; }

/* --- QRIS --- */
.gye-qris { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 26px; align-items: start; }
.gye-qris__img { border: 1px solid #D3DBDD; background: #FFFFFF; padding: 10px; }
.gye-qris__img img { display: block; width: 100%; height: auto; }
.gye-qris__info { display: grid; gap: 14px; align-content: start; }

/* --- Baris data rekening --- */
.gye-row {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid #E4EAEC;
}
.gye-row:last-of-type { border-bottom: none; }
.gye-row__l {
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: #7C8FA6;
}
.gye-row__v {
  font-size: 17px; font-weight: 600; color: #16295C;
  letter-spacing: .01em; overflow-wrap: anywhere;
}
.gye-row__v--sm { font-size: 15px; font-weight: 500; }
.gye-row__flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.gye-copy {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
  color: #16295C; background: #F5F7F6;
  border: 1px solid #D3DBDD;
  padding: 8px 14px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex: none;
}
.gye-copy:hover { background: #16295C; color: #F5F7F6; border-color: #16295C; }
.gye-copy.is-copied { background: #0E7C79; border-color: #0E7C79; color: #FFFFFF; }

/* --- Bank --- */
.gye-bank {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid #E4EAEC;
}
.gye-bank__logo { flex: none; display: block; }
.gye-bank__name { font-size: 16px; font-weight: 600; color: #16295C; letter-spacing: -.01em; }
.gye-bank__sub { font-size: 12px; font-weight: 300; color: #4C6A8A; }

/* --- Alamat (buka tutup) --- */
.gye-more { border-top: 1px solid #E4EAEC; padding-top: 14px; margin-top: 4px; }
.gye-more summary {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500; color: #4C6A8A;
  display: flex; align-items: center; gap: 8px;
}
.gye-more summary::-webkit-details-marker { display: none; }
.gye-more summary::before {
  content: "+"; display: inline-grid; place-items: center;
  width: 18px; height: 18px; flex: none;
  border: 1px solid #D3DBDD; color: #16295C; font-weight: 500; line-height: 1;
}
.gye-more[open] summary::before { content: "\2013"; }
.gye-more p {
  margin: 10px 0 0; font-size: 13px; font-weight: 300;
  line-height: 1.7; color: #4C6A8A; max-width: 56ch;
}

/* --- Konfirmasi --- */
.gye-confirm { border-top: 1px solid #D3DBDD; margin-top: 24px; padding-top: 22px; }
.gye-check {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; font-size: 15px; font-weight: 400;
  color: #16295C; line-height: 1.55;
}
.gye-check input {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: #0E7C79; cursor: pointer;
}
.gye-confirm__action {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.gye-confirm.is-open .gye-confirm__action {
  max-height: 320px; opacity: 1; margin-top: 18px;
}
.gye-wa {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500;
  color: #FFFFFF; background: #0E7C79;
  padding: 15px 26px; border: none; cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  transition: background .15s;
}
.gye-wa:hover { background: #0B6360; }
.gye-wa svg { width: 19px; height: 19px; flex: none; }
.gye-confirm__note {
  margin: 12px 0 0; font-size: 13px; font-weight: 300;
  line-height: 1.7; color: #4C6A8A; max-width: 60ch;
}

/* --- Baris kepercayaan --- */
.gye-trust {
  display: grid; gap: 10px;
  background: #F5F7F6; border-top: 1px solid #D3DBDD;
  padding: 20px 30px 22px;
}
.gye-trust__i {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; font-weight: 300; line-height: 1.6; color: #4C6A8A;
}
.gye-trust__i svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #0E7C79; }
.gye-trust__i b { font-weight: 500; color: #16295C; }


/* ============================================================
   3b. OVERLAY (loading penuh layar sesaat, dipakai contact.html
   setelah form dikirim, sebelum redirect ke WhatsApp)
   ============================================================ */
.gye-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, .58);
  opacity: 0;
  transition: opacity .25s ease;
}
.gye-overlay.is-visible { opacity: 1; }
.gye-overlay__card {
  width: 100%;
  max-width: 400px;
  background: #16295C;
  color: #F5F7F6;
  text-align: center;
  padding: 34px 28px;
  box-shadow: 0 30px 60px rgba(11, 18, 32, .4);
}
.gye-overlay__spin {
  width: 38px;
  height: 38px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(245, 247, 246, .25);
  border-top-color: #4C8FD6;
  animation: gyeSpin .8s linear infinite;
}
@keyframes gyeSpin { to { transform: rotate(360deg); } }
.gye-overlay__text {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

/* ============================================================
   4. TOAST (notifikasi mengambang)
   ============================================================ */
.gye-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  max-width: 380px;
  display: flex;
  gap: 14px;
  background: #16295C;
  color: #F5F7F6;
  border-left: 4px solid #0E7C79;
  padding: 18px 20px;
  box-shadow: 0 20px 46px rgba(11, 18, 32, .32);
  transform: translateY(18px);
  opacity: 0;
  transition: transform .32s ease, opacity .32s ease;
}
.gye-toast.is-visible { transform: none; opacity: 1; }
.gye-toast__icon { flex: none; margin-top: 2px; }
.gye-toast__icon svg { width: 20px; height: 20px; display: block; }
.gye-toast__t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.gye-toast__d { font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(245, 247, 246, .82); }
.gye-toast__x {
  background: transparent; border: none; color: rgba(245, 247, 246, .6);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 0 0 6px; flex: none;
}
.gye-toast__x:hover { color: #F5F7F6; }


/* ============================================================
   5. Penyesuaian panel pembayaran di layar kecil
   ============================================================ */
@media (max-width: 760px) {
  .gye-pay__head { padding: 24px 20px 22px; }
  .gye-pay__body { padding: 22px 20px 26px; }
  .gye-trust     { padding: 18px 20px 20px; }
  .gye-steps     { grid-template-columns: minmax(0, 1fr) !important; }
  .gye-step      { padding: 13px 18px; }
  .gye-step.is-now { box-shadow: inset 3px 0 0 #0E7C79; }
  .gye-qris      { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
  .gye-qris__img { max-width: 300px; margin: 0 auto; width: 100%; }
  .gye-tab       { min-width: 0; flex: 1 1 0; font-size: 12px; padding: 11px 4px; line-height: 1.35; }
  .gye-wa        { width: 100%; justify-content: center; }
  .gye-toast     { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}