/* ==========================================================================
   Keunggulan Kami untuk Semua Program — section beranimasi (dongker + emas)
   Semua kelas berawalan .ung- supaya tidak bentrok dengan gaya lain.
   ========================================================================== */
@property --ung-sudut { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.ung {
  --ung-emas: #e9c46a;
  --ung-emas-muda: #f6e3a1;
  --ung-redup: #b9c4e0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #e8edf7;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid #e9c46a55;
  border-bottom: 1px solid #e9c46a33;
  background:
    radial-gradient(1200px 560px at 50% -8%, #1b3190 0, transparent 62%),
    linear-gradient(180deg, #060d3a 0%, #07124a 48%, #040a2a 100%);
}

/* ---------- Latar bergerak ---------- */
.ung-latar { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.ung-latar::before {            /* kisi halus yang bergeser pelan */
  content: ""; position: absolute; inset: -40px;
  background-image:
    linear-gradient(rgba(233,196,106,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,196,106,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0, transparent 75%);
  animation: ung-kisi 30s linear infinite;
}
@keyframes ung-kisi { to { background-position: 56px 56px; } }

.ung-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  translate: calc(var(--px, 0) * 36px) calc(var(--py, 0) * 24px);
  transition: translate .9s cubic-bezier(.2,.7,.2,1);
}
.ung-blob.b1 { width: 460px; height: 460px; left: -120px; top: -80px;  background: #2a4fd6; animation: ung-hanyut-a 19s ease-in-out infinite alternate; }
.ung-blob.b2 { width: 380px; height: 380px; right: -90px; top: 30%;    background: #e9c46a; opacity: .17; animation: ung-hanyut-b 23s ease-in-out infinite alternate; }
.ung-blob.b3 { width: 420px; height: 420px; left: 30%; bottom: -200px; background: #4b3fc9; opacity: .4;  animation: ung-hanyut-a 27s ease-in-out infinite alternate-reverse; }
@keyframes ung-hanyut-a { from { transform: translate(0,0) scale(1); }   to { transform: translate(90px, 60px) scale(1.25); } }
@keyframes ung-hanyut-b { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-110px, 70px) scale(.85); } }

.ung-bintang {
  position: absolute; left: 50%; top: 4%;
  width: min(900px, 140vw); aspect-ratio: 1; translate: -50% -14%;
  fill: none; stroke: var(--ung-emas); stroke-width: .6; opacity: .2;
}
.ung-bintang .s1 { transform-origin: 200px 200px; animation: ung-putar 90s linear infinite; }
.ung-bintang .s2 { transform-origin: 200px 200px; animation: ung-putar 140s linear infinite reverse; opacity: .7; }
.ung-bintang .s3 { transform-origin: 200px 200px; animation: ung-putar 60s linear infinite; stroke-dasharray: 2 6; }
@keyframes ung-putar { to { transform: rotate(360deg); } }

.ung-debu {
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--ung-emas-muda); box-shadow: 0 0 10px 2px #e9c46aaa;
  opacity: 0; animation: ung-naik var(--d) linear var(--w) infinite;
}
@keyframes ung-naik {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translate(var(--g), -110vh); opacity: 0; }
}

/* ---------- Isi ---------- */
.ung-isi { position: relative; width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

.ung-kepala { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.ung-label {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem; border-radius: 999px;
  font: 600 .78rem/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ung-emas); border: 1px solid #e9c46a66; background: #e9c46a14;
  position: relative; overflow: hidden;
}
.ung-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ung-emas);
  box-shadow: 0 0 0 0 #e9c46a99; animation: ung-denyut 2.2s ease-out infinite;
}
.ung-label::after {             /* kilau lewat */
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 50%;
  background: linear-gradient(100deg, transparent, #ffffff40, transparent);
  transform: skewX(-20deg); animation: ung-kilau 5s ease-in-out 1.5s infinite;
}
@keyframes ung-denyut { 70% { box-shadow: 0 0 0 10px #e9c46a00; } 100% { box-shadow: 0 0 0 0 #e9c46a00; } }
@keyframes ung-kilau  { 0%, 55% { left: -60%; } 100% { left: 130%; } }

.ung .ung-judul {
  margin: 1.1rem auto 0; max-width: 18ch;
  font: 800 clamp(2.2rem, 5.4vw, 4rem)/1.08 'Sora', sans-serif; letter-spacing: -.02em;
  background: linear-gradient(100deg, #f6e3a1 0%, #fff6d4 30%, #e9c46a 55%, #f6e3a1 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ung-emas-gerak 7s linear infinite;
  text-wrap: balance;
}
@keyframes ung-emas-gerak { to { background-position: -220% 0; } }
.ung-judul .k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.ung-judul .k > span { display: inline-block; }

.ung-garis {
  display: block; height: 2px; width: 84px; margin: 1.4rem auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ung-emas), transparent);
  position: relative;
}
.ung-garis::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #fff6d4; box-shadow: 0 0 12px 3px var(--ung-emas);
  animation: ung-geser 3.2s ease-in-out infinite alternate;
}
@keyframes ung-geser { to { left: calc(100% - 8px); } }

/* ---------- Kartu ---------- */
.ung-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.7rem);
  align-items: start;
}
.ung-kartu {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; perspective: 900px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.ung-kartu:nth-child(3n+2) { margin-top: clamp(0px, 3vw, 2.6rem); }

.ung-dalam {
  position: relative; overflow: hidden; height: 100%;
  min-height: 15.5rem; padding: 1.7rem 1.6rem 1.8rem;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 60%);
  border: 1px solid rgba(233,196,106,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 50px -30px #000c, inset 0 1px 0 rgba(255,255,255,.12);
  animation: ung-melayang 6.5s ease-in-out calc(var(--i) * -1.1s) infinite alternate;
  transition: border-color .4s, box-shadow .4s;
}
@keyframes ung-melayang { from { translate: 0 -7px; } to { translate: 0 7px; } }

.ung-dalam::before {            /* sorot yang mengikuti kursor */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(233,196,106,.26), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.ung-dalam::after {             /* bingkai emas berputar */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ung-sudut), transparent 0 55%, #e9c46a 78%, #fff6d4 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s;
  animation: ung-sudut 4.5s linear infinite;
}
@keyframes ung-sudut { to { --ung-sudut: 360deg; } }

.ung-kartu:hover .ung-dalam,
.ung-kartu.aktif .ung-dalam { border-color: rgba(233,196,106,.45); box-shadow: 0 36px 60px -28px #000d, 0 0 40px -12px #e9c46a66, inset 0 1px 0 rgba(255,255,255,.18); }
.ung-kartu:hover .ung-dalam::before,
.ung-kartu.aktif .ung-dalam::before,
.ung-kartu:hover .ung-dalam::after,
.ung-kartu.aktif .ung-dalam::after { opacity: 1; }
.ung-kartu.aktif:not(:hover) .ung-dalam::before { background: radial-gradient(380px circle at 50% 0%, rgba(233,196,106,.24), transparent 60%); }

.ung-dalam > * { position: relative; z-index: 1; }

.ung-no {
  display: inline-block; margin: 0;
  font: 800 clamp(3rem, 5vw, 3.9rem)/1 'Sora', sans-serif; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.4px rgba(233,196,106,.75);
  background: linear-gradient(90deg, #fff6d4, #e9c46a) no-repeat 0 0 / 0% 100%;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size .8s cubic-bezier(.2,.7,.2,1);
}
.ung-kartu:hover .ung-no,
.ung-kartu.aktif .ung-no { background-size: 100% 100%; }

.ung-orbit {                    /* cincin kecil dengan titik mengorbit */
  position: absolute !important; top: 1.3rem; inset-inline-end: 1.3rem;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px dashed rgba(233,196,106,.45);
  animation: ung-putar 14s linear infinite;
}
.ung-orbit::before {
  content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ung-emas); box-shadow: 0 0 10px 2px #e9c46acc;
}
.ung-orbit::after {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle, #e9c46a55, transparent 70%);
}
.ung-kartu:hover .ung-orbit, .ung-kartu.aktif .ung-orbit { animation-duration: 3.2s; }

.ung .ung-dalam h3 {
  margin: 1.1rem 0 .55rem;
  font: 600 1.28rem/1.3 'Playfair Display', Georgia, serif; letter-spacing: 0;
  color: var(--ung-emas-muda);
}
.ung .ung-dalam p { margin: 0; font: 400 .95rem/1.75 'DM Sans', sans-serif; color: var(--ung-redup); }

.ung-dalam .ung-bawah {         /* garis emas yang memanjang saat aktif */
  display: block; height: 2px; width: 28px; margin-top: 1.3rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--ung-emas), transparent);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.ung-kartu:hover .ung-bawah, .ung-kartu.aktif .ung-bawah { width: 100%; }

/* ---------- Pita teks berjalan ---------- */
.ung-pita { margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ung-pita-jalan { display: flex; width: max-content; animation: ung-pita 46s linear infinite; }
.ung-pita:hover .ung-pita-jalan { animation-play-state: paused; }
.ung-pita span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-inline-end: 1.6rem; white-space: nowrap;
  font: 800 clamp(1.8rem, 4.4vw, 3.4rem)/1.3 'Sora', sans-serif; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(233,196,106,.38);
}
.ung-pita span::after { content: "✦"; font-size: .55em; color: var(--ung-emas); -webkit-text-stroke: 0; opacity: .8; }
@keyframes ung-pita { to { transform: translateX(-50%); } }

/* ---------- Muncul saat di-scroll ---------- */
.js .ung:not(.tampil) .ung-label,
.js .ung:not(.tampil) .ung-garis { opacity: 0; transform: translateY(14px); }
.js .ung .ung-label,
.js .ung .ung-garis { transition: opacity .8s ease .1s, transform .8s cubic-bezier(.2,.7,.2,1) .1s; }

.js .ung-judul .k > span { transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--w, 0) * 70ms); }
.js .ung.tampil .ung-judul .k > span { transform: none; }

.js .ung:not(.tampil) .ung-kartu { opacity: 0; translate: 0 60px; scale: .94; }
.js .ung .ung-kartu { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .9s ease calc(.45s + var(--i) * 110ms), translate 1s cubic-bezier(.2,.8,.2,1) calc(.45s + var(--i) * 110ms), scale 1s cubic-bezier(.2,.8,.2,1) calc(.45s + var(--i) * 110ms); }
.js .ung:not(.tampil) .ung-pita { opacity: 0; }
.js .ung .ung-pita { transition: opacity 1.2s ease 1.2s; }

/* Hemat tenaga: jeda semua gerak saat section tidak terlihat */
.ung.diam *, .ung.diam *::before, .ung.diam *::after { animation-play-state: paused !important; }

/* ---------- Layar kecil ---------- */
@media (max-width: 980px) {
  .ung-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ung-kartu:nth-child(3n+2) { margin-top: 0; }
  .ung-kartu:nth-child(2n) { margin-top: 2rem; }
}
@media (max-width: 620px) {
  .ung-grid { grid-template-columns: 1fr; }
  .ung-kartu:nth-child(2n) { margin-top: 0; }
  .ung-dalam { min-height: 0; }
  .ung-blob { filter: blur(50px); }
}

/* ---------- Kurangi gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
  .ung *, .ung *::before, .ung *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .js .ung:not(.tampil) .ung-kartu, .js .ung:not(.tampil) .ung-label, .js .ung:not(.tampil) .ung-garis, .js .ung:not(.tampil) .ung-pita { opacity: 1; translate: none; scale: 1; transform: none; }
  .js .ung-judul .k > span { transform: none; }
  .ung .ung-judul { background-position: 0 0; }
}