/* Hero beranda P4M: teks, foto dengan cahaya, dan panel pencarian. */

.ph-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 118px 0 158px;
  background:
    radial-gradient(900px 420px at 78% 38%, rgba(160, 20, 30, 0.55), transparent 70%),
    linear-gradient(120deg, #3d0006 0%, var(--accent-color) 52%, #4a0009 100%);
}

/* ---------- Bintang: lapisan titik yang melayang pelan + bintang berkedip ---------- */
.ph-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ph-dots {
  position: absolute;
  inset: -420px;
  will-change: transform;
}

.ph-dots.d1 {
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(244, 187, 53, 0.95) 0 1.6px, transparent 2.2px);
  background-size: 210px 190px;
  animation: phDrift1 70s linear infinite;
}

.ph-dots.d2 {
  opacity: 0.4;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.7px);
  background-size: 130px 150px;
  background-position: 60px 70px;
  animation: phDrift2 48s linear infinite;
}

.ph-dots.d3 {
  opacity: 0.32;
  background-image: radial-gradient(circle, rgba(255, 226, 170, 0.9) 0 2.4px, transparent 3.2px);
  background-size: 340px 300px;
  background-position: 120px 40px;
  animation: phDrift3 95s linear infinite;
}

.ph-star {
  position: absolute;
  border-radius: 50%;
  background: #ffe2a0;
  box-shadow: 0 0 10px 2px rgba(255, 217, 138, 0.75);
  animation: phTwinkleStar var(--d, 4s) ease-in-out var(--l, 0s) infinite,
             phFloatStar calc(var(--d, 4s) * 2.4) ease-in-out var(--l, 0s) infinite;
}

.ph-hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  opacity: 0.1;
  background-image: repeating-linear-gradient(35deg, #fff 0 1px, transparent 1px 18px);
  pointer-events: none;
}


.ph-hero .hm-wrap {
  position: relative;
  z-index: 1;
}

/* ---------- Teks ---------- */

.ph-copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ph-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd98a;
}

.ph-kicker:before {
  content: "";
  width: 34px;
  height: 2px;
  background: #f4bb35;
}

.ph-copy h1 {
  margin: 14px auto 16px;
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  max-width: 700px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.ph-copy h1 em {
  font-style: normal;
  color: #ffd98a;
}

.ph-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

.ph-motto:before,
.ph-motto:after {
  content: "";
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, #f4bb35);
}

.ph-motto:after {
  background: linear-gradient(90deg, #f4bb35, transparent);
}

.ph-copy p.lead {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- Tiga kolom: kotak bersinar - foto slider - kotak bersinar ---------- */
.ph-orbits {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 400px) 1fr;
  align-items: center;
  gap: 20px;
}

.ph-orbit {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ph-orbit-left { align-items: flex-end; }
.ph-orbit-right { align-items: flex-start; }

@property --gp {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* kotak "bersinar" ala lingkaran mistis: garis tepi tipis yang berputar dan berdenyut */
.ph-glow {
  position: relative;
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  color: #fff;
  background: rgba(20, 0, 5, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  isolation: isolate;
  animation: phGlowBreathe 3.2s ease-in-out infinite;
}

.ph-glow:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--gp), transparent 0deg, #ffd98a 22deg, #fff5da 40deg, transparent 68deg, transparent 300deg, #f4bb35 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: phGlowSpin var(--gd, 6s) linear infinite;
}

.ph-glow:after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  border-radius: 22px;
  background: radial-gradient(closest-side, rgba(255, 217, 138, 0.22), transparent 75%);
  opacity: 0.85;
}

.ph-glow .ic {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #2b0002;
  background: linear-gradient(135deg, #ffe2a0, #f4bb35);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5);
}

.ph-glow .tx { min-width: 0; text-align: left; }
.ph-glow .tx strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.ph-glow .tx small { display: block; margin-top: 2px; font-size: 11.5px; color: #ffe2a0; }

/* ---------- Foto + cahaya ---------- */

.ph-figure {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
}

/* ---------- Slider ---------- */
.ph-slider { position: relative; }
.ph-slides { position: relative; }

.ph-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.ph-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.ph-dots-nav { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ph-dots-nav button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.35); transition: 0.25s;
}
.ph-dots-nav button.is-active { background: #f4bb35; width: 22px; border-radius: 5px; }

.ph-stage {
  position: relative;
  height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ph-stage img {
  position: relative;
  z-index: 3;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  -webkit-mask-image: linear-gradient(#000 84%, transparent 100%);
  mask-image: linear-gradient(#000 84%, transparent 100%);
}

.ph-light {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 219, 150, 0.78), rgba(255, 168, 84, 0.3) 46%, transparent 72%);
  filter: blur(6px);
  animation: phPulse 5.5s ease-in-out infinite;
}

.ph-rays {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: 128%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg 18deg, rgba(255, 226, 170, 0.2) 28deg, transparent 42deg,
      transparent 98deg, rgba(255, 226, 170, 0.14) 110deg, transparent 124deg,
      transparent 190deg, rgba(255, 226, 170, 0.18) 202deg, transparent 216deg,
      transparent 270deg, rgba(255, 226, 170, 0.12) 282deg, transparent 296deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 28%, #000 46%, transparent 72%);
  mask-image: radial-gradient(closest-side, transparent 28%, #000 46%, transparent 72%);
  animation: phSpin 26s linear infinite;
}

.ph-ring {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 217, 138, 0.35);
  transform: translate(-50%, -50%);
}

.ph-ring.r1 {
  width: 92%;
  aspect-ratio: 1;
  animation: phSpinBack 60s linear infinite;
}

.ph-ring.r2 {
  width: 112%;
  aspect-ratio: 1;
  border-style: solid;
  border-color: rgba(255, 217, 138, 0.14);
}

.ph-spark {
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd98a;
  box-shadow: 0 0 12px 3px rgba(255, 217, 138, 0.7);
  animation: phFloat 6s ease-in-out infinite;
}

.ph-spark.s1 { left: 6%; top: 24%; }
.ph-spark.s2 { right: 4%; top: 14%; animation-delay: -2s; width: 5px; height: 5px; }
.ph-spark.s3 { right: 10%; top: 58%; animation-delay: -4s; }
.ph-spark.s4 { left: 12%; top: 66%; animation-delay: -1s; width: 4px; height: 4px; }

.ph-cap {
  position: relative;
  z-index: 4;
  margin: -46px auto 0;
  width: min(100%, 380px);
  padding: 14px 22px;
  text-align: center;
  border-radius: 14px;
  border-left: 4px solid #f4bb35;
  background: rgba(38, 0, 6, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ph-cap strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.ph-cap span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #ffd98a;
  font-weight: 500;
}

/* ---------- Panel pencarian ---------- */
@property --ph-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* .hm-wrap didefinisikan di halaman, jadi spesifisitas dinaikkan agar margin negatif berlaku */
.hm-wrap.ph-search-wrap {
  position: relative;
  z-index: 5;
  margin-top: -104px;
}

.ph-search {
  position: relative;
  border: 2px solid transparent;
  border-radius: 22px;
  padding: 26px 30px 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(#e9d8d9, #e9d8d9) border-box;
  box-shadow: 0 24px 60px rgba(60, 0, 8, 0.28), 0 4px 14px rgba(60, 0, 8, 0.1);
}

/* cincin cahaya yang berputar saat form dipakai */
.ph-search:focus-within {
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--ph-angle), var(--accent-color), #f4bb35, var(--accent-light), #ffd98a, var(--accent-color)) border-box;
  animation: phAngle 5s linear infinite;
}

.ph-types {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ph-type {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.ph-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ph-type span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: #fff;
  color: var(--heading-color);
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ph-type span i {
  color: var(--accent-color);
  transition: color 0.2s;
}

.ph-type:hover span {
  transform: translateY(-2px);
  background: var(--accent-soft);
}

.ph-type input:checked + span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
  box-shadow: 0 8px 18px rgba(99, 0, 3, 0.28);
}

.ph-type input:checked + span i {
  color: #ffd98a;
}

.ph-type input:focus-visible + span {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.ph-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 180px;
  gap: 14px;
}

.ph-field {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 62px;
  padding: 0 20px;
  border-radius: 14px;
  background: #faf5f5;
  border: 1.5px solid transparent;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.ph-field:hover {
  background: #fff;
  border-color: var(--accent-border);
}

.ph-field:focus-within {
  background: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(99, 0, 3, 0.1);
}

.ph-field i {
  color: var(--accent-color);
  font-size: 17px;
}

.ph-field input,
.ph-field select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: #2b2b2b;
}

.ph-field select {
  cursor: pointer;
  font-size: 14px;
}

.ph-go {
  position: relative;
  overflow: hidden;
  height: 62px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  box-shadow: 0 10px 22px rgba(99, 0, 3, 0.32);
  transition: transform 0.2s, box-shadow 0.2s;
}

.ph-go:before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s;
}

.ph-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(99, 0, 3, 0.4);
}

.ph-go:hover:before {
  left: 130%;
}

.ph-go i {
  transition: transform 0.2s;
}

.ph-go:hover i {
  transform: translateX(4px);
}

.ph-hints {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6b5b5c;
}

.ph-hints a {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.ph-hints a:hover {
  background: var(--accent-color);
  color: #fff;
}

/* ---------- Animasi ---------- */
@keyframes phPulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes phSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes phSpinBack {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes phFloat {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-14px); opacity: 1; }
}

@keyframes phDrift1 { to { transform: translate3d(210px, -190px, 0); } }
@keyframes phDrift2 { to { transform: translate3d(-130px, -150px, 0); } }
@keyframes phDrift3 { to { transform: translate3d(340px, -300px, 0); } }

@keyframes phTwinkleStar {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50% { opacity: 1; scale: 1.25; }
}

@keyframes phFloatStar {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px -16px; }
}

@keyframes phAngle {
  to { --ph-angle: 360deg; }
}

@keyframes phGlowSpin {
  to { --gp: 360deg; }
}

@keyframes phGlowBreathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
  50% { transform: translateY(-5px); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .ph-dots, .ph-star, .ph-light, .ph-rays, .ph-ring, .ph-spark, .ph-search:focus-within, .ph-glow, .ph-glow:before {
    animation: none !important;
  }
}

/* ---------- Responsif ---------- */
@media (max-width: 1199px) {
  .ph-copy h1 { font-size: 42px; }
  .ph-stage { height: 380px; }
  .ph-row { grid-template-columns: minmax(0, 1fr) 180px 150px; }
}

@media (max-width: 991px) {
  .ph-hero { padding: 104px 0 140px; }
  .ph-figure { max-width: 340px; }
  .ph-stage { height: 320px; }
  .ph-copy h1 { font-size: 36px; }
  .ph-orbits { grid-template-columns: 1fr; }
  .ph-orbit { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ph-orbit-left, .ph-orbit-right { align-items: stretch; order: 2; }
  .ph-figure { order: 1; }
  .ph-glow { max-width: 220px; flex: 1 1 200px; }
  .ph-row { grid-template-columns: 1fr 1fr; }
  .ph-row .ph-q { grid-column: 1 / -1; }
  .ph-go { grid-column: auto; }
}

@media (max-width: 575px) {
  .ph-hero { padding-bottom: 104px; }
  .ph-copy h1 { font-size: 30px; }
  .ph-stage { height: 270px; }
  .ph-orbits { margin-top: 30px; gap: 12px; }
  .ph-glow { max-width: 100%; flex: 1 1 140px; padding: 11px 14px; }
  .ph-glow .tx strong { font-size: 12.5px; }
  .ph-glow .tx small { font-size: 10.5px; }
  .ph-search { padding: 16px 14px 14px; border-radius: 18px; }
  .ph-field, .ph-go { height: 56px; }
  .ph-types { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .ph-types::-webkit-scrollbar { display: none; }
  .ph-type span { white-space: nowrap; }
  .ph-row { grid-template-columns: 1fr; }
  .hm-wrap.ph-search-wrap { margin-top: -70px; }
}