/* Bing */
.gt-badges{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px 0}
.gt-badge img{height:50px;width:auto;display:block;border:0;box-shadow:0 2px 8px rgba(0,0,0,.06);border-radius:12px}
@media (max-width:480px){.gt-badge img{height:44px}}

/**************************************************************
  0) OPTIONAL – edge-to-edge untuk baris hero di mobile
     Pakai di Row Class: si-hero-row
**************************************************************/
@media (max-width: 780px){
  .si-hero-row .panel-grid-cell{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/**************************************************************
  1) SI Hero – BASELINE (REPLACE)
     Tambahkan "si-hero" pada Widget Class di SiteOrigin Image.
**************************************************************/

/* Kontainer gambar SI (dua kemungkinan markup dari SO Image) */
.si-hero .sow-image-container,
.si-hero .so-widget-image-container{
  position: relative;
  width: 100%;
  overflow: hidden; /* guard CLS (rasio di seksi 3) */
}

/* IMG di dalam SI */
.si-hero .sow-image-container img,
.si-hero .so-widget-image img,
.si-hero img.so-widget-image{
  display: block;
  width: 100%;
  height: 100%;              /* mengikuti tinggi kontainer (rasio atau full-screen) */
  object-fit: cover;         /* crop rapi */
  /* fokus pakai variabel (lihat seksi 4) */
  object-position: var(--si-hero-x,50%) var(--si-hero-y,50%);
  /* Jika masih ketimpa theme, aktifkan baris di bawah: */
  /* object-position: var(--si-hero-x,50%) var(--si-hero-y,50%) !important; */
}

/**************************************************************
  2) SI Hero – FULL SCREEN khusus MOBILE (REPLACE)
     Gunakan tinggi layar – tinggi header (kalau header overlay).
**************************************************************/
@media (max-width: 780px){

  /* UBAH sesuai kondisi header:
     - header TIDAK overlay  → 0px
     - header overlay (menumpuk di atas konten) → tinggi header, mis. 56px
  */
  :root{ --si-header-m: 0px; }

  /* kontainer hero full-screen */
  .si-hero .sow-image-container,
  .si-hero .so-widget-image-container{
    height: calc(100vh  - var(--si-header-m));   /* fallback */
    height: calc(100svh - var(--si-header-m));   /* address-bar aware */
    aspect-ratio: auto;                          /* matikan guard CLS saat full-screen */
    overflow: hidden;
  }

  /* jika gambar dibungkus , pastikan anchor ikut penuh */
  .si-hero .sow-image-container > a,
  .si-hero .so-widget-image-container > a{
    display: block;
    height: 100%;
  }

  /* pastikan IMG mengisi kontainer */
  .si-hero .sow-image-container img,
  .si-hero .so-widget-image img,
  .si-hero img.so-widget-image{
    height: 100% !important;
    object-fit: cover;
    object-position: var(--si-hero-x,50%) var(--si-hero-y,50%);
  }
}

/*********************************************************
 3) SI Hero – GUARD CLS (REPLACE)
    Kunci rasio di desktop/tablet agar tidak CLS.
    Di mobile full-screen (bagian 2) ini otomatis dioverride.
**********************************************************/
.si-hero{
  --si-hero-ratio: 16/9;   /* ubah jika perlu: 21/9, 4/3, dst */
}

@media (min-width: 781px){
  .si-hero .sow-image-container,
  .si-hero .so-widget-image-container{
    aspect-ratio: var(--si-hero-ratio, 16/9);
    overflow: hidden; /* jaga crop rapi, cegah scroll aneh */
  }
}

/**************************************************************
  4) SI Hero – PENGATUR FOKUS (ADD)  ←  *** EDIT HERE ***
     Geser framing tanpa mengubah rule lain.
     0% = kiri/atas, 50% = tengah, 100% = kanan/bawah
**************************************************************/
.si-hero{
  --si-hero-x: 50%;  /* contoh: 40% kiri-tengah, 60% kanan-tengah */
  --si-hero-y: 68%;  /* contoh: 32–45% lebih ke atas, 65–75% lebih ke bawah */
}

/* Per-widget? Tambah kelas di "Widget Class", lalu set variabelnya:
   .si-hero.si-hero--atas  { --si-hero-y: 35%; }
   .si-hero.si-hero--kanan { --si-hero-x: 65%; }
*/


/* ===========================
   HOMEPAGE HERO (scoped)
   – Pastikan Row CSS Class: si-hero-row
   – Kontainer teks = .si-hero-copy (SiteOrigin Editor)
   =========================== */

/* Matikan overlay bawaan bila ada */
.si-hero::after { content: none !important; }

/* Jangkar absolut di sel row */
.si-hero-row .panel-grid-cell { position: relative; }

/* Scope ke homepage saja */
body.home .si-hero-row { position: relative; }

/* Gambar hero (stabil CLS & cropping rapi) */
body.home .si-hero-row .so-widget-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--si-hero-x, 50%) var(--si-hero-y, 50%);
}

/* Kontainer teks di tengah (title + lead + CTA) */
body.home .si-hero-row .si-hero-copy{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center;            /* center vertikal */
  align-items: center;                 /* center horizontal */
  gap: .75rem;                         /* jarak antar elemen */
  padding: clamp(12px, 3vw, 32px);
  text-align: center;
  z-index: 3;
  pointer-events: none;                /* biar klik tembus kecuali tombol */
}
body.home .si-hero-row .si-hero-copy .si-btn{ pointer-events: auto; }

/* ===========================
   Tipografi
   =========================== */
body.home .si-hero-row .si-hero-title{
  font-family: var(--font-jakarta);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);  /* desktop mentok 56px */
  line-height: 1.15;                  /* sedikit lebih lega */
  letter-spacing: -0.2px;             /* rapikan kerning */
  margin: 0;                          /* nolkan margin tema */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
body.home .si-hero-row .si-hero-lead{
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.55;
  color: #fff;
  margin: 0;
  max-width: min(820px, 90%);
  letter-spacing: .1px;               /* baca lebih nyaman */
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* ===========================
   Tombol CTA
   =========================== */
body.home .si-hero-row .si-btn{
  display: inline-block;
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 16px;
  padding: .62em 1.1em;               /* tinggi kira2 44–48px */
  border-radius: 8px;
  background: #b91c1c;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.26);
  margin-top: 16px;                   /* jarak dari lead */
  transition: filter .15s ease, transform .05s ease;
}
body.home .si-hero-row .si-btn:hover{ filter: brightness(1.06); }

/* Reduced motion – hindari animasi berlebih */
@media (prefers-reduced-motion: reduce){
  body.home .si-hero-row .si-btn{ transition: none; }
}

/* ===========================
   Mobile Tweaks
   =========================== */
@media (max-width: 780px){
  body.home .si-hero-row .si-hero-copy{ padding: 14vh 20px 18vh; }
  body.home .si-hero-row .si-btn{
    font-size: 14px;
    padding: .55em 1em;
    margin-top: 14px;
  }
}



/* ===========================
   Khusus Title Page
   =========================== */
/* Scope hanya untuk widget yang punya class pj-title */
.entry-content .pj-title h2,
.entry-content .pj-title h3,
.entry-content .pj-title h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;       /* sesuaikan 500/700 kalau perlu */
  line-height: 1.25;
  letter-spacing: -0.2px; /* opsional */
}

/* Pastikan teks lain tidak ikut berubah */
.entry-content .pj-title p,
.entry-content .pj-title li,
.entry-content .pj-title span {
  font-family: inherit;
}

/* ===========================
   Khusus SVG inline
   =========================== */
/* ====== Ikon Services Grid (6 kolom desktop, 3 kolom mobile) ====== */
.gt-icon-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr)); /* desktop: 6 sejajar */
  gap:24px;
  align-items:start;
  justify-items:center;
  margin: 8px 0 24px;
}
/* Warna default ikon (ikut currentColor) */
.gt-icon-section{ color:#111; }

/* Item sebagai link penuh area klik */
.gt-icon-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:inherit;
}

/* SVG responsif */
.gt-svg{
  display:block;
  width: clamp(56px, 6vw, 96px);
  height:auto;
}

/* Label */
.gt-icon-label{
  margin-top:8px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.2;
  text-align:center;
}

/* Hover/Focus: opsional */
.gt-icon-link:hover{ opacity:.9; }
.gt-icon-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 10px;
}

/* Mobile: 3 kolom → 2 baris */
@media (max-width: 780px){
  .gt-icon-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:16px;
  }
}

/* ===========================
   Khusus HTML Table sewa motor
   =========================== */
/* ==== Tabel Harga Sewa (HTML figure.gt-price) ==== */
.gt-price table{
  width:100%; border:1px solid #ddd; border-radius:10px; overflow:hidden;
  font-size:16px; line-height:1.5; border-collapse:separate; border-spacing:0;
  background:#fbfbfb;
}
.gt-price th,.gt-price td{ padding:10px 12px; }
.gt-price thead th{ background:#f5f7f9; font-weight:600; border-bottom:1px solid #ddd; }
.gt-price td{ border-top:1px solid #eaeaea; }
.gt-price td:nth-child(3){ text-align:right; white-space:nowrap; }

/* Row kategori (desktop & mobile) */
.gt-price tr.gt-cat-row td{
  background:#f1f5f9; font-weight:700; color:#111; text-align:left;
}

/* === Mobile compact === */
@media (max-width:780px){
  .gt-price thead{ display:none; }

  /* badge kategori penuh-lebar */
  .gt-price tr.gt-cat-row{ display:block; }
  .gt-price tr.gt-cat-row td{ display:block; border-top:1px solid #e5e7eb; }

  /* baris item jadi 2 kolom: Model | Harga */
  .gt-price tr:not(.gt-cat-row){
    display:grid; grid-template-columns:1fr auto; align-items:center;
    border-top:1px solid #eee;
  }
  /* sembunyikan kolom 1 (kategori kosong) */
  .gt-price tr:not(.gt-cat-row) td:nth-child(1){ display:none; }
  /* model */
  .gt-price tr:not(.gt-cat-row) td:nth-child(2){ grid-column:1/2; text-align:left; }
  /* harga */
  .gt-price tr:not(.gt-cat-row) td:nth-child(3){ grid-column:2/3; text-align:right; }

  /* kompres sedikit */
  .gt-price table{ font-size:15px; }
  .gt-price tr:not(.gt-cat-row) td{ padding:8px 10px; }
}

/* ===========================
   Khusus jump link #booking
   =========================== */
/* CTA band di bawah tabel */
.gt-cta-band{display:flex;flex-direction:column;align-items:center;margin:14px 0 6px}
.gt-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#f2f2f2;color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:12px;font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .18s ease, opacity .18s ease;
}
.gt-cta-btn:hover{transform:translateY(-1px);opacity:.92}
.gt-cta-note{margin:8px 0 0;color:#64748b;font-size:14px}

/* Mobile: full width */
@media (max-width:780px){
  .gt-cta-btn{width:100%;justify-content:center}
}

/* Biar anchor tidak ketutup sticky header */
#booking{scroll-margin-top:80px}