/* Lokasi: public_html/assets/shared/sections.css */
:root { --nav-h: 64px; --hero-h: 260px; }
@media (max-width: 860px) { :root { --nav-h: 68px; } }
html { scroll-padding-top: 90px; }
body { overflow-x: clip; }
.btn { gap: 8px; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* penanda warna per bagian (hanya palet: oranye, tosca, emas) */
.tone-o { --tone: var(--accent); --tone-soft: rgba(255,120,40,.14); }
.tone-t { --tone: var(--teal); --tone-soft: rgba(95,174,151,.18); }
.tone-g { --tone: var(--gold); --tone-soft: rgba(200,153,39,.18); }

/* pita latar penuh lebar */
.band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: var(--band-pad) 0; }
.band--paper { background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-inner { width: min(1040px, 100% - var(--gutter) * 2); margin-inline: auto; }
.main-content > .band:last-child { margin-bottom: calc(var(--section) * -1); }
.main-content:has(> .band:last-child) ~ .site-footer { margin-top: 0; }

/* kartu utama: penuh kiri-kanan, sampai tepi atas layar, tinggi seragam */
.band--hero {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--hero-h) + var(--nav-h));
  margin-bottom: var(--section);
  padding: calc(var(--nav-h) + 16px) 0 24px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(90% 120% at 50% 55%, var(--tone-soft, rgba(255,120,40,.14)) 0%, transparent 70%), var(--surface);
}
.band--hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 72px); z-index: 1;
  background: linear-gradient(to bottom, var(--bg) 35%, transparent);
  pointer-events: none;
}
.band--hero .band-inner { width: min(1040px, 100% - var(--hero-gutter) * 2); }
.main-content > .band--hero:first-child { margin-top: calc(-1 * (var(--nav-h) + var(--section))); }

/* label */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--teal)); }
.tone-t .eyebrow::before { width: 9px; height: 9px; background: transparent; border: 2px solid var(--tone); }
.tone-g .eyebrow::before { border-radius: 2px; transform: rotate(45deg); }
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--soft-text);
}
.tag svg { width: 14px; height: 14px; color: var(--tone, var(--teal)); }
.tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--teal)); }
.sec-head { max-width: 620px; margin: 0 0 32px; }
.sec-head .eyebrow { display: flex; }
.sec-head h2 { margin: 0 0 10px; }
.sec-head .lead { max-width: none; margin-inline: 0; font-size: 14px; }

/* bentuk melayang (menyatu dengan latar) */
.has-deco { overflow: hidden; }
.has-deco > :not(.hero-deco) { position: relative; z-index: 2; }
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-deco i { position: absolute; display: block; }
.d-blob1, .d-blob2 { border-radius: 50%; filter: blur(70px); }
.d-blob1 { width: 320px; height: 320px; top: -140px; left: -110px; background: var(--teal); opacity: .16; animation: blobA 14s ease-in-out infinite alternate; }
.d-blob2 { width: 280px; height: 280px; bottom: -150px; right: -90px; background: var(--accent); opacity: .12; animation: blobB 17s ease-in-out infinite alternate; }
.d-cube { bottom: 28%; left: 4%; width: 52px; height: 52px; --rot: -18deg; background: var(--gold); opacity: .2; border-radius: 16px; filter: blur(1px); animation: floaty 7s ease-in-out infinite; }
.d-ball { bottom: 32%; right: 6%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), var(--teal) 75%); opacity: .3; filter: blur(.8px); animation: floaty 7s ease-in-out 2s infinite; }
.d-tri { bottom: 10%; left: 12%; width: 0; height: 0; --rot: 24deg; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--accent); opacity: .2; filter: blur(1px); animation: floaty 7s ease-in-out 4s infinite; }
@keyframes blobA { 0% { border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; transform: translate(0,0) scale(1); } 100% { border-radius: 64% 36% 42% 58% / 42% 62% 38% 58%; transform: translate(40px,24px) scale(1.08); } }
@keyframes blobB { 0% { border-radius: 64% 36% 42% 58% / 42% 62% 38% 58%; transform: translate(0,0) scale(1); } 100% { border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; transform: translate(-36px,-22px) scale(1.06); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 5deg)); } }

@media (max-width: 860px) { html { scroll-padding-top: 100px; } }
@media (max-width: 560px) {
  .d-tri { display: none; }
  .d-cube { left: 3%; width: 38px; height: 38px; }
  .d-ball { right: 4%; width: 30px; height: 30px; }
}
.hero-deco .d-cube, .hero-deco .d-ball, .hero-deco .d-tri { display: none; }
@media (min-width: 1100px) {
  .hero-deco .d-cube, .hero-deco .d-ball, .hero-deco .d-tri { display: block; }
}

/* Hero seragam semua subdomain */
.band--hero { text-align: left; }
.band--hero .tag { margin-bottom: 14px; }
.band--hero h1 { max-width: 560px; font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; }
.band--hero h1 span { background: linear-gradient(transparent 62%, rgba(255,120,40,.35) 62%); padding: 0 .1em; }
.band--hero .hero-desc { max-width: 520px; margin: 0 0 20px; color: var(--muted); }
.band--hero .btn { padding: .6rem 1.3rem; }

/* Bentuk melayang di layar kecil: kelompok kecil di pojok kanan-bawah */
@media (max-width: 1099px) {
  .band--hero.has-deco .hero-deco i.d-cube,
  .band--hero.has-deco .hero-deco i.d-ball,
  .band--hero.has-deco .hero-deco i.d-tri { display: block; left: auto; top: auto; }

  .band--hero.has-deco .hero-deco i.d-ball { width: 38px; height: 38px; right: 22px; bottom: 24px; }
  .band--hero.has-deco .hero-deco i.d-cube { width: 22px; height: 22px; right: 72px; bottom: 50px; }
  .band--hero.has-deco .hero-deco i.d-tri  { width: 26px; height: 26px; right: 30px; bottom: 74px; }

  .band--hero.has-deco .band-inner { padding-right: 28px; } /* teks tidak menabrak bentuk */
}

@media (max-width: 1099px) {
  .band--hero .hero-desc {
    max-width: none;
    padding-right: 96px;   /* sisakan ruang untuk bentuk di kanan-bawah */
    margin-bottom: 0;
  }
}

/* Tombol hero: kecil, kalem, ada jarak dari judul */
.band--hero .btn-row { margin-top: 26px; }
.band--hero .btn-row .btn {
  padding: .45rem 1.05rem;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.band--hero .btn-row .btn svg { color: var(--accent); }
@media (hover: hover) {
  .band--hero .btn-row .btn:hover { background: var(--soft); border-color: var(--accent); }
}