/* === HOME (CLEAN BUILD) ================================================ */
:root{
  /* Container & gutters */
  --container-w: 1200px;      /* 1200–1400 oke */
  --gutter: 16px;

  /* Vertical rhythm */
  --y-1: clamp(10px, 1.2vw, 16px);
  --y-2: clamp(14px, 1.6vw, 22px);
  --y-3: clamp(22px, 2.6vw, 32px);

  /* Light theme palette (Ocean) */
  --heroLight-from:#0ea5e9;   /* cyan */
  --heroLight-mid :#2563eb;   /* blue */
  --heroLight-to  :#7c3aed;   /* violet */
  --heroBrandLight:#0b1324;   /* text utama di light */
  --heroLeadLight :#334155;   /* deskripsi di light */

  /* Spot warna untuk background hero light */
  --spot1: 59 130 246;  /* blue-500 */
  --spot2:124 58 237;   /* violet-600 */
  --spot3: 14 165 233;  /* cyan-500 */
}

/* ===== Scroll / container guards ======================================= */
html, body { overflow-x: hidden; }    /* cegah scroll horizontal akibat shadow/pos-abs */
.s-hero { overflow: clip; }           /* potong glow/shadow yang melebar */

/* Semua wrapper konten—selalu center & punya gutter aman */
.site-header .site-header__container,
.s-hero__wrap,
.s-features__inner,
.s-rooms__inner,
.s-info__inner,
.footer-container{
  width: min(100%, var(--container-w));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Section default spacing */
.ive-home-container > section{
  padding-block: var(--y-2);
}

/* Gambar jangan lebih besar dari container */
.s-hero__media img,
.rooms img,
.ads-side__img { max-width: 100%; height: auto; display:block; }

/* ===== HERO (dark base + parallax hook) ================================ */
.s-hero{
  position: relative;
  background: linear-gradient(180deg,#0b1220 0%,#0b1220 70%,transparent 100%);
}
.s-hero--alt{ background: linear-gradient(180deg,#0b1220 0%,#0d1628 100%); }

.s-hero__wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  padding-block: 40px;
}

.s-hero__col--text{ color: #e6eefc; }

.s-hero__title{
  margin: 0 0 .75rem 0;
  line-height: 1.05;
  font: 800 clamp(28px,3.2vw,44px)/1.1 "Manrope",system-ui;
}

.s-hero__brand{
  display:block;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 2.6vw, 40px);
  color: #e6f0ff;               /* dark default */
}

.s-hero__big{
  display:block;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  background: linear-gradient(180deg,#dbeafe 0%,#93c5fd 45%,#60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.s-hero__lead{
  color:#cbd5e1;
  margin:.6rem 0 1.2rem;
  max-width:52ch;
}

.s-hero__cta{ display:flex; gap:.6rem; margin:8px 0 16px; }
.s-hero__stats{ display:flex; gap:14px; flex-wrap:wrap; }
.s-hero__stats .stat{
  padding:.6rem .75rem;
  border:1px solid rgba(148,163,184,.18);
  border-radius:12px;
  background:rgba(13,22,40,.5);
}
.s-hero__stats strong{ display:block; color:#fff; }

.s-hero__media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.s-hero__media.is-alt{ aspect-ratio:16/10; }

[data-parallax]{ will-change:transform; transform:translate3d(0,0,0); }

/* ===== HERO (light mode) ============================================== */
html[data-theme="light"] .s-hero{
  background:
    radial-gradient(900px 500px at -10% -20%, rgb(var(--spot1) / .18) 0%, transparent 60%),
    radial-gradient(700px 420px at 110% 0%,  rgb(var(--spot2) / .18) 0%, transparent 55%),
    radial-gradient(600px 360px at 12% 100%, rgb(var(--spot3) / .12) 0%, transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #f6f8ff 55%, #f2f5ff 100%);
}
html[data-theme="light"] .s-hero__brand{
  background: linear-gradient(90deg, #0b1324 0%, #1e293b 60%, var(--heroLight-from) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .s-hero__big{
  background: linear-gradient(180deg,
    var(--heroLight-from) 0%,
    var(--heroLight-mid) 55%,
    var(--heroLight-to) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 8px 26px rgba(37,99,235,.18);
}
html[data-theme="light"] .s-hero__lead{ color: var(--heroLeadLight); }

html[data-theme="light"] .btn--primary{
  background: var(--heroLight-mid); color:#fff; border: none;
}
html[data-theme="light"] .btn--primary:hover{
  background: var(--heroLight-to);
  box-shadow: 0 10px 24px rgba(37,99,235,.20);
  transform: translateY(-1px);
}
html[data-theme="light"] .btn--ghost{
  color: var(--heroLight-mid);
  border: 1px solid rgba(37,99,235,.35);
  background: rgba(37,99,235,.06);
}
html[data-theme="light"] .btn--ghost:hover{
  background: rgba(37,99,235,.12);
}

/* Glow halus di belakang foto (light) */
html[data-theme="light"] .s-hero__media{ position: relative; }
html[data-theme="light"] .s-hero__media::after{
  content:"";
  position:absolute; inset:-6% -4% -10% -8%;
  background:
    radial-gradient(380px 220px at 20% 15%, rgb(var(--spot3) / .25), transparent 70%),
    radial-gradient(480px 260px at 85% 85%, rgb(var(--spot2) / .20), transparent 65%);
  filter: blur(36px);
  z-index:0; pointer-events:none; opacity:.6;
}
html[data-theme="light"] .s-hero__media img{ position:relative; z-index:1; }

/* ===== ROOMS GRID (rapi 3–2–1) ======================================== */
.s-rooms .rooms{
  display: grid;
  gap: 16px;
  align-items: stretch;
  justify-items: stretch;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){
  .s-rooms .rooms{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .s-rooms .rooms{ grid-template-columns: 1fr; }
  .room .room__cta{ display:flex; flex-direction:column; gap:8px; }
}

/* ===== INFO / IKLAN SIDE ============================================== */
@media (max-width: 900px){
  .info__aside, .box-ads-side{ max-width: 460px; margin-inline:auto; }
  .box-ads-side .ads-side__img{ width:100%; height:auto; display:block; }
}

/* ===== HERO RESPONSIVE BREAKPOINTS ==================================== */
/* Tablet ≤900px: single column, gambar di atas */
@media (max-width: 900px){
  .s-hero{ padding: clamp(24px, 4vw, 40px) 0; }

  .s-hero__wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .s-hero__media{
    order:-1;
    align-self:center;
    width:100%;
    max-width:620px;
    margin:0 auto 8px;
    box-shadow:0 8px 28px rgba(2,6,23,.12);
    border-radius:14px;
  }

  .s-hero__brand{ font-size: clamp(12px, 2.8vw, 14px); }
  .s-hero__big  { font-size: clamp(28px, 6.6vw, 44px); line-height: 1.15; }
  .s-hero__lead { font-size: clamp(14px, 3.6vw, 16px); max-width: 60ch; }

  .s-hero__cta{ display:flex; flex-wrap:wrap; gap:10px; }
  .s-hero__stats{
    display:grid; gap:10px; width:100%;
    grid-template-columns: 1fr 1fr;
  }
}

/* Phone ≤480px: stat 1 kolom, CTA full width */
@media (max-width: 480px){
  .s-hero__stats{ grid-template-columns: 1fr; }
  .s-hero__cta > .btn{ width: 100%; }
}