/* 1) Ritme & ukuran section seragam */

:root{
     --bg:#3D52A0;         /* latar section (gelap flat) */
  --section-pad: clamp(40px,6vw,72px);
  --section-min-h: clamp(380px, 48vh, 560px);
  /* === GLOBAL CONTAINER === */
 --container-max: 1200px; 
 --container-w: 1200px;
  --container-pad: clamp(12px,2vw,20px);
}
.section__inner{ max-width:min(var(--container-max),85vw); margin:0 auto; padding:0 clamp(14px,3vw,20px); }

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.ive-section{padding-block:var(--section-pad);min-height:var(--section-min-h)}
/* paksa semua wrapper pakai grid/width yang sama */
.s-hero__wrap,
.s-features__inner,
.s-rooms__inner,
.footer-container,
.site-header .site-header__container{
  width: min(100%, var(--container-w)) !important;
  margin-inline: auto !important;
  padding-inline: 16px !important; /* gutter konsisten */
}
.theme-toggle{
  position:fixed; right:20px; bottom:88px; z-index:9998;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.55); backdrop-filter:blur(8px);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
html[data-theme='light'] .theme-toggle{ background:#ffffffd9; color:#0f172a; border-color:#e5e7eb; }
.theme-toggle__icon::before{ content:'☾'; font-size:18px; }
html[data-theme='light'] .theme-toggle__icon::before{ content:'☀'; }

/* Mobile hero guard */
@media (max-width: 900px){
  .s-hero__media{
    width: 100%;
    max-width: 640px;
    max-height: 48vh;     /* cegah terlalu tinggi */
    aspect-ratio: 4/3;
    overflow: hidden;
  }
  .s-hero__media img{
    width:100%; height:100%; object-fit:cover; object-position:center;
  }
}
/* utility: pakai ini di section yang tidak perlu min-height besar */
.ive-section--auto{
  min-height: auto !important;
  padding-block: clamp(12px, 2.2vw, 20px) !important;
}

.invoice-scope .badge{
  display:inline-block !important;
  padding:.2rem .5rem;
  border-radius:999px;
  font-size:12px !important;
  line-height:1.1;
  background:#eef;
  color:#223 !important;
  text-indent:0 !important;
  opacity:1 !important;
}
.invoice-scope .badge::before,
.invoice-scope .badge::after{ content:none !important; }

 .pill{display:inline-block;padding:.2rem .5rem;border-radius:999px;
        background:#eef;color:#223;font:500 12px/1.1 system-ui,sans-serif}
  .pill--sewa{background:#e8f3ff}
  .pill--add{background:#e8ffe8}
  .pill--mutasi{background:#fff6e5}
  .pill--denda{background:#ffe8e8}

  /* opsional: status bayar */
  .pill--paid{background:#e6ffef}
  .pill--unpaid{background:#fff1f0}
  .pill--pending{background:#fffbe6}


.ttd-canvas{
  display:block;
  width:100%;
  max-width:520px;
  height:160px;              /* tinggi visual */
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  touch-action:none;         /* cegah browser pan/zoom di canvas */
  -ms-touch-action:none;
  z-index: 5;                /* naikkan di atas overlay ringan */
}


/* 2) Grid dasar seragam untuk SEMUA section */
.ive-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* target 3 kolom */
  gap: clamp(16px,2.4vw,24px);
  align-items: stretch;
}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none}
.btn-book{background:#0d6efd;color:#fff}
.btn-book:hover{filter:brightness(.95)}
.btn-unavailable{background:#dc2626;color:#fff;cursor:not-allowed;opacity:.95}
.btn-outline{background:#f3f4f6;color:#111}
.btn-outline:hover{background:#e9edf1}
.cta-wrap{display:flex;gap:10px;align-items:center;margin-top:12px}
/* 3) Hanya tampilkan 3 item pertama di HOME */
.home .ive-grid > *:nth-child(n+4){ display:none; }

/* 4) Jika item <3 → center di dalam container (tanpa mengubah lebar container) */
.home .ive-grid:not(:has(> :nth-child(3))){
  justify-items: center;
  /* opsional: agar kartu tidak melebar, batasi lebar item */
}
.home .ive-grid:not(:has(> :nth-child(3))) > *{ max-width: 420px; }

/* 5) Tombol "More" otomatis (berdasarkan jumlah anak pada grid) */
.home .section__more{ display:none; }
.home .ive-section:has(.ive-grid > :nth-child(n+4)) .section__more{
  display:flex; justify-content:center; margin-top:24px;
}

/* 6) Kartu seragam tingginya di semua grid */
.ive-card{ display:flex; flex-direction:column; height:100%; border-radius:16px; }
.ive-card__media{ aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:12px; }
.ive-card__body{ flex:1; }
.ive-card__actions{ margin-top:auto; }

:root{
  --section-pad: clamp(40px,6vw,72px);
  --section-min-h: clamp(380px, 48vh, 560px);
  --container-max: 1240px;  /* samakan dengan header */
  --container-pad: clamp(12px,2vw,20px);
}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}

.ive-section{padding-block:var(--section-pad);min-height:var(--section-min-h)}
.ive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);align-items:stretch}

.home .ive-grid > *:nth-child(n+4){display:none}                      /* tampilkan 3 item */
.home .ive-grid:not(:has(> :nth-child(3))){justify-items:center}      /* jika <3 → center */
.home .ive-grid:not(:has(> :nth-child(3))) > *{max-width:420px}

.home .section__more{display:none}
.home .ive-section:has(.ive-grid > :nth-child(n+4)) .section__more{
  display:flex; justify-content:center; margin-top:24px;
}

/* kartu seragam */
.ive-card{display:flex;flex-direction:column;height:100%;border-radius:16px}
.ive-card__media{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:12px}
.ive-card__body{flex:1}
.ive-card__actions{margin-top:auto}


/* fallback kalau section kamu langsung di-append di home */
.ive-home-container > section,
.ive-home-container > div.section-block {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(12px,3vw,24px);
}

/* kalau kamu pakai inner wrapper per section, ini ikut dibatasi */
#home-hero .s-hero__inner,
#home-features .s-features__inner,
#home-rooms .s-rooms__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(12px,3vw,24px);
}