/* Hero halaman dalam v2 — tiap halaman punya tema sendiri (lihat partials/page_hero.php).
   Warna tema datang dari variabel --ph-a (gelap), --ph-b (terang), --ph-ac (aksen) pada elemen .ph2. */
.ph2{--ph-wave:var(--cream,#faf6ec);position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding:clamp(34px,5vw,64px) 0 clamp(96px,11vw,132px);
  background:linear-gradient(115deg,var(--ph-a) 0%,var(--ph-a) 34%,var(--ph-b) 100%)}
.ph2-l-flip{background:linear-gradient(245deg,var(--ph-a) 0%,var(--ph-a) 34%,var(--ph-b) 100%)}
.ph2-l-center{background:radial-gradient(120% 150% at 50% 0%,var(--ph-b) 0%,var(--ph-a) 72%)}
.ph2-l-plain{background:linear-gradient(135deg,var(--ph-a) 0%,var(--ph-a) 45%,var(--ph-b) 130%)}

/* Latar: foto (opsional) + pola + bola cahaya */
.ph2-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ph2-bg:before{content:"";position:absolute;inset:0;z-index:1;opacity:.16;background-repeat:repeat}
.ph2.has-photo .ph2-bg:after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ph-a) 88%,transparent),color-mix(in srgb,var(--ph-a) 40%,transparent)),var(--ph-photo) center/cover no-repeat}
.ph2.has-photo.ph2-l-flip .ph2-bg:after{background:linear-gradient(270deg,color-mix(in srgb,var(--ph-a) 88%,transparent),color-mix(in srgb,var(--ph-a) 40%,transparent)),var(--ph-photo) center/cover no-repeat}
.ph2.has-photo.ph2-l-center .ph2-bg:after{background:linear-gradient(180deg,color-mix(in srgb,var(--ph-a) 70%,transparent),color-mix(in srgb,var(--ph-a) 78%,transparent)),var(--ph-photo) center/cover no-repeat}

.ph2-p-dots .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1.7' fill='%23fff'/%3E%3C/svg%3E")}
.ph2-p-lines .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M-4 28L28 -4M-4 4L4 -4M20 28L28 20' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E")}
.ph2-p-grid .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M36 0H0V36' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");opacity:.12}
.ph2-p-star .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l7 12 13-6-6 13 12 7-12 7 6 13-13-6-7 12-7-12-13 6 6-13-12-7 12-7-6-13 13 6Z' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E");opacity:.13}
.ph2-p-rays .ph2-bg:before{background-image:repeating-conic-gradient(from 0deg at 86% 18%,rgba(255,255,255,.9) 0 3deg,transparent 3deg 11deg);opacity:.09;background-repeat:no-repeat}
.ph2-p-rings .ph2-bg:before{background-image:repeating-radial-gradient(circle at 88% 34%,transparent 0 24px,rgba(255,255,255,.9) 24px 25.5px);opacity:.1;background-repeat:no-repeat}
.ph2-p-waves .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='26' viewBox='0 0 90 26'%3E%3Cpath d='M0 13Q22.5 -2 45 13T90 13' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");opacity:.15}
.ph2-p-leaf .ph2-bg:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M10 40C10 24 20 14 36 12 36 28 26 38 10 40Z' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M10 40L28 22' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");opacity:.15}

.ph2-orb{position:absolute;border-radius:50%;filter:blur(46px);z-index:1;opacity:.5;animation:ph2-drift 20s ease-in-out infinite}
.ph2-orb--1{width:clamp(180px,26vw,340px);height:clamp(180px,26vw,340px);right:-4%;top:-18%;background:var(--ph-ac);opacity:.26}
.ph2-orb--2{width:clamp(140px,20vw,260px);height:clamp(140px,20vw,260px);left:-5%;bottom:8%;background:#fff;opacity:.12;animation-delay:-7s}
.ph2-orb--3{width:clamp(90px,12vw,160px);height:clamp(90px,12vw,160px);left:42%;top:-8%;background:var(--ph-b);opacity:.5;animation-delay:-13s}

/* Isi */
.ph2 .container{position:relative;z-index:3}
.ph2-in{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(20px,4vw,56px)}
.ph2-l-flip .ph2-in{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.ph2-l-flip .ph2-art{order:-1}
.ph2-l-center .ph2-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.ph2-l-center .ph2-art{order:-1;width:clamp(96px,12vw,132px);margin-bottom:-4px}
.ph2-copy>*{animation:ph2-up .7s cubic-bezier(.2,.7,.2,1) both}
.ph2-copy>*:nth-child(2){animation-delay:.07s}.ph2-copy>*:nth-child(3){animation-delay:.14s}.ph2-copy>*:nth-child(4){animation-delay:.21s}.ph2-copy>*:nth-child(5){animation-delay:.28s}
.ph2 h1{color:#fff;font-size:clamp(30px,4.6vw,54px);line-height:1.12;letter-spacing:-.6px;margin:14px 0 12px;max-width:18em;text-wrap:balance}
.ph2-l-center h1,.ph2-l-center .ph2-desc{margin-inline:auto}
.ph2-desc{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.93);max-width:36em;margin:0}
.ph2 .eyebrow{display:inline-flex;align-items:center;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.ph2-eico{margin-right:8px;font-size:1.05em;line-height:1}
.ph2-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ph2-l-center .ph2-actions{justify-content:center}
.ph2 .btn-outline{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.ph2 .btn-outline:hover{background:#fff;color:var(--ph-a)}

.ph2-crumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;padding:0;margin:0 0 14px;font-size:13.5px;font-weight:700}
.ph2-l-center .ph2-crumb ol{justify-content:center}
.ph2-crumb li+li:before{content:"›";margin-right:8px;opacity:.6}
.ph2-crumb a{color:rgba(255,255,255,.82)}
.ph2-crumb a:hover{color:#fff;text-decoration:underline}
.ph2-crumb li[aria-current]{color:var(--ph-ac)}

/* Ilustrasi tema */
.ph2-art{justify-self:center;width:min(300px,100%);aspect-ratio:1;filter:drop-shadow(0 18px 26px rgba(0,0,0,.28))}
.ph2-art svg{width:100%;height:100%;display:block;overflow:visible;animation:ph2-float 7s ease-in-out infinite}
.ph-sway{animation:ph-sway 5s ease-in-out infinite}
.ph-spin{animation:ph-needle 8s ease-in-out infinite}
.ph-pulse{transform-box:fill-box;transform-origin:center;animation:ph-pulse 3.4s ease-in-out infinite}
.ph-bob{animation:ph-bob 3s ease-in-out infinite}
.ph-drip{animation:ph-drip 2.4s ease-in infinite}

.ph2-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(40px,6vw,80px);fill:var(--ph-wave);z-index:2;display:block;pointer-events:none}

@keyframes ph2-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ph2-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.2deg)}}
@keyframes ph2-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,18px)}}
@keyframes ph-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes ph-needle{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes ph-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes ph-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ph-drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(46px);opacity:0}}

@media (max-width:860px){
  .ph2-in,.ph2-l-flip .ph2-in{grid-template-columns:1fr}
  .ph2:not(.ph2-l-center):not(.ph2-l-plain) .ph2-art{position:absolute;right:-8px;top:-6px;width:132px;opacity:.22;order:0;pointer-events:none;z-index:0}
  .ph2-l-plain .ph2-art{display:none}
  .ph2-l-center .ph2-art{width:92px}
}
@media (max-width:480px){
  .ph2{padding-top:26px}
  .ph2-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ph2-orb,.ph2-art svg,.ph-sway,.ph-spin,.ph-pulse,.ph-bob,.ph-drip,.ph2-copy>*{animation:none!important}
}