/* Ilustrasi hasil generasi + lapisan interaksi ringan, tanpa pustaka 3D. */
#sekeluarga { padding-block: 36px 104px; overflow: clip; }
.keluarga-studio { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: center; }
.keluarga-narasi { position: relative; z-index: 2; }
.keluarga-narasi h2 { max-width: 560px; font-size: clamp(36px,4.4vw,52px); }
.keluarga-narasi > .aksi { margin-top: 24px; }
.keluarga-narasi .pengantar { max-width: 520px; font-size: 17px; }
.cerita-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 20px; }
.cerita-tabs button { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--garis); border-radius: 999px; background: transparent; color: var(--tinta-2); font: 500 15px/1.4 var(--sans); cursor: pointer; transition: background 240ms, border-color 240ms, color 240ms; }
.cerita-tabs button span { font-size: 15px; opacity: 1; }
.cerita-tabs button[aria-selected="true"] { color: var(--kertas); background: var(--sage-tua); border-color: var(--sage-tua); }
.cerita-tabs button:hover:not([aria-selected="true"]) { background: var(--sage-2); border-color: var(--sage); }
.cerita-panels { min-height: 180px; border-left: 2px solid var(--sage); padding: 6px 0 4px 22px; }
.cerita-panel h3 { font-size: 27px; line-height: 1.25; max-width: 440px; }
.cerita-panel p { font-size: 16px; line-height: 1.7; max-width: 470px; margin-top: 12px; color: var(--tinta-2); }
.cerita-panel:not([hidden]) { animation: cerita-in 380ms ease both; }
.keluarga-visual { margin: 0; min-width: 0; }
.scene-viewport { position: relative; isolation: isolate; aspect-ratio: 1; perspective: 1000px; --tilt-x: 0deg; --tilt-y: 0deg; --glow-x: 30%; --glow-y: 64%; }
.scene-halo { position: absolute; z-index: -2; inset: 8% -7% 0; border-radius: 50%; background: radial-gradient(ellipse at var(--glow-x) var(--glow-y),rgba(174,193,164,.6),rgba(227,235,225,.35) 40%,transparent 68%); transition: background 500ms; }
.scene-orbit { position: absolute; inset: 12% -4% -5%; border: 1px solid rgba(95,122,97,.2); border-radius: 50%; transform: rotateX(68deg) rotateZ(-18deg); z-index: -1; }
.scene-art { position: absolute; inset: 0; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.scene-art > img { width: 100%; height: auto; animation: scene-breathe 4.5s ease-in-out 1 both; animation-play-state: paused; }
.scene-viewport[data-in-view="true"] .scene-art > img { animation-play-state: running; }
.scene-viewport[data-paused="true"] .scene-art > img { animation-play-state: paused; }
.scene-point { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--sage); border-radius: 50%; background: var(--kertas); color: var(--sage-tua); font: 600 19px/1 var(--serif); cursor: pointer; box-shadow: 0 4px 18px rgba(43,42,38,.14); transform: translate(-50%,-50%) translateZ(30px); transition: background 200ms, color 200ms, box-shadow 200ms; }
.scene-point::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--sage); border-radius: 50%; opacity: 0; transition: opacity 200ms; }
.scene-point[aria-pressed="true"] { background: var(--sage-tua); color: var(--kertas); box-shadow: 0 0 0 6px rgba(255,253,249,.7),0 6px 24px rgba(43,42,38,.12); }
.scene-point[aria-pressed="true"]::after { opacity: .7; }
.scene-point:hover { box-shadow: 0 0 0 8px rgba(227,235,225,.7); }
.point-book { left: 30%; top: 66%; }
.point-family { left: 73%; top: 41%; }
.point-care { left: 65%; top: 72%; }
.scene-signature { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--sage-tua); font: italic 18px/1.5 var(--serif); }
.keluarga-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 10px 0; font-size: 15px; color: var(--tinta-2); }
.keluarga-visual figcaption > span { max-width: 280px; }
.cerita-play { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 0; border: 0; background: transparent; color: var(--sage-tua); font: 600 15px/1.4 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.cerita-play svg { width: 20px; height: 20px; }
.cerita-tabs button:focus-visible,.scene-point:focus-visible,.cerita-play:focus-visible { outline: 3px solid var(--sage-tua); outline-offset: 5px; }
.cerita-panel:focus-visible { outline: 2px solid var(--sage); outline-offset: 8px; }
#mitra .mitra-baris { background: transparent; gap: 38px; }
#mitra .mitra-baris img { background: transparent; }
#mitra .mitra-baris img[alt="Santa Maria"] { width: min(100%,300px); height: auto; }
#mitra .mitra-baris img[alt="Royal"] { width: 156px; height: auto; }
.kontak-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
@keyframes scene-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cerita-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .keluarga-studio { grid-template-columns: 1fr 1fr; gap: 18px; } .cerita-panels { min-height: 210px; } .keluarga-visual figcaption { flex-direction: column; align-items: flex-start; gap: 4px; } }
@media (max-width: 760px) {
  #sekeluarga { padding-block: 12px 64px; }
  .keluarga-studio { grid-template-columns: 1fr; gap: 18px; }
  .keluarga-narasi { display: contents; }
  .keluarga-narasi > .eyebrow { order: 0; margin: 0; }
  .keluarga-narasi > h2 { order: 1; margin: 0; }
  .keluarga-narasi > .pengantar { order: 2; margin: 0; }
  .keluarga-visual { order: 3; }
  .cerita-tabs { order: 4; margin: 10px 0 0; }
  .cerita-panels { order: 5; }
  .keluarga-narasi > .aksi { order: 6; margin-top: 0; }
  .keluarga-narasi h2 { font-size: clamp(34px,7.5vw,46px); }
  .keluarga-narasi .pengantar { font-size: 16px; }
  .keluarga-visual { width: 100%; max-width: 530px; justify-self: center; }
  .cerita-panels { min-height: 172px; }
  .cerita-tabs { gap: 8px; }
  .cerita-tabs button { padding: 10px 12px; }
  .cerita-tabs button span { display: none; }
  .keluarga-visual figcaption { flex-direction: row; align-items: center; padding-inline: 0; gap: 14px; }
  .keluarga-visual figcaption > span { max-width: 205px; }
  #mitra .mitra-baris { gap: 28px; }
  #mitra .mitra-baris img[alt="Santa Maria"] { width: min(100%,280px); max-width: 100%; }
  #mitra .mitra-baris img[alt="Royal"] { width: 148px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .scene-art { transform: none; } .scene-art > img,.cerita-panel:not([hidden]) { animation: none; } .scene-point,.scene-art,.scene-halo,.cerita-tabs button { transition: none; } }
@media print { .scene-markers,.cerita-tabs,.cerita-play { display: none; } .scene-art > img { animation: none; } .cerita-panel[hidden] { display: block !important; margin-top: 18px; } }