/* Ilustrasi beranda berdiri sendiri agar halaman lain tetap memakai SVG. */
.home-page .material-sheet{width:100%;max-width:500px;margin-inline:auto}
.foil3d-ready{overflow:visible;background:transparent;border-radius:0}
.foil3d-ready > img{display:none}
.foil3d-enhancement{position:relative;color:var(--ink-900)}
.foil3d-stage{position:relative;aspect-ratio:1.2;border-radius:var(--radius);background:radial-gradient(ellipse at 48% 35%,#fff 12%,#f5f7f7 57%,#edf1f2 100%);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.foil3d-stage:focus-visible{outline:2px solid var(--copper-600);outline-offset:4px}
.foil3d-stage.is-dragging{cursor:grabbing}
.foil3d-shadow{position:absolute;left:16%;right:16%;bottom:11%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(41,77,98,.18),rgba(41,77,98,.05) 48%,transparent 72%);pointer-events:none}
.foil3d-space{position:absolute;inset:0;perspective:1100px;pointer-events:none}
.foil3d-stack{position:absolute;left:21%;top:29%;width:58%;height:42%;transform-style:preserve-3d;will-change:transform}
.foil3d-layer{position:absolute;inset:0;border-radius:2px;transform-style:preserve-3d;backface-visibility:visible;transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.foil3d-pet{transform:translateZ(clamp(30px,6.5vw,54px))}
.foil3d-alu{transform:translateZ(0)}
.foil3d-lldpe{transform:translateZ(clamp(-54px,-6.5vw,-30px))}
.foil3d-stack.is-joined .foil3d-pet{transform:translateZ(2px)}
.foil3d-stack.is-joined .foil3d-lldpe{transform:translateZ(-2px)}
.foil3d-face{position:absolute;inset:0;border:1px solid rgba(255,255,255,.88);border-radius:2px;backface-visibility:visible;box-shadow:inset 0 0 0 1px rgba(41,77,98,.1),inset 0 -1px 1px rgba(24,49,63,.19)}
.foil3d-pet .foil3d-face{background:linear-gradient(118deg,rgba(255,255,255,.8),rgba(229,239,242,.29) 28%,rgba(255,255,255,.68) 43%,rgba(206,221,228,.27) 61%,rgba(250,253,254,.72));border-color:rgba(235,244,248,.96);box-shadow:inset 0 0 0 1px rgba(92,129,149,.2),inset 0 1px 0 #fff}
.foil3d-alu .foil3d-face{background:linear-gradient(115deg,#e6edf0 0%,#a7b8c1 11%,#eef3f5 24%,#fff 31%,#bdcbd2 43%,#8199a6 50%,#d6e0e5 59%,#fbfdfe 70%,#bac9d1 84%,#eaf0f3 100%);border-color:#f4f8fa}
.foil3d-lldpe .foil3d-face{background:linear-gradient(118deg,#eef2f2,#d7e0e2 24%,#f7f9f8 48%,#c9d5da 72%,#eaf0f0);border-color:#f6f9f8}
.foil3d-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0,rgba(255,255,255,.13) 1px,rgba(79,106,121,.025) 1px,rgba(79,106,121,.025) 2px)}
.foil3d-glint{position:absolute;inset:0;border-radius:2px;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.05) 35%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.09) 58%,transparent 75%);pointer-events:none}
.foil3d-pet .foil3d-glint{background:linear-gradient(110deg,transparent 16%,rgba(255,255,255,.55) 47%,transparent 73%)}
.foil3d-edge{position:absolute;background:linear-gradient(90deg,#819aa7,#eef4f7 32%,#b3c5ce 68%,#718c9b);backface-visibility:visible}
.foil3d-edge-top,.foil3d-edge-bottom{left:0;width:100%;height:1.5px}
.foil3d-edge-top{top:0;transform:rotateX(90deg);transform-origin:top}
.foil3d-edge-bottom{bottom:0;transform:rotateX(-90deg);transform-origin:bottom}
.foil3d-edge-left,.foil3d-edge-right{top:0;width:1.5px;height:100%}
.foil3d-edge-left{left:0;transform:rotateY(-90deg);transform-origin:left}
.foil3d-edge-right{right:0;transform:rotateY(90deg);transform-origin:right}
.foil3d-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1.15rem 0 .9rem;padding:0}
.foil3d-legend > div{min-width:0;padding-left:.65rem;border-left:2px solid var(--foil-200)}
.foil3d-legend > div:nth-child(2){border-color:var(--navy-600)}
.foil3d-legend dt{font-family:var(--font-head);font-size:1.2rem;line-height:1.2;font-weight:600}
.foil3d-legend dd{margin:.2rem 0 0;font-size:.8rem;color:var(--ink-500);line-height:1.35}
.foil3d-controls{display:flex;flex-wrap:wrap;gap:.5rem}
.foil3d-controls .btn{flex:1 1 auto;min-height:40px;padding:.45rem .75rem;font-size:.875rem}
.foil3d-note{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-500)}
.foil3d-note span{display:block}
@media(max-width:639px){
  .foil3d-legend{gap:.5rem;margin-top:.9rem}
  .foil3d-legend > div{padding-left:.5rem}
  .foil3d-legend dt{font-size:1.1rem}
  .foil3d-legend dd{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){.foil3d-layer{transition:none}}