/* Hero beranda — gaya "kartu orbit": judul dua warna, tagline, CTA, daftar centang,
   dan kartu melayang mengitari kartu grafik. Berdiri sendiri (tanpa build Tailwind).
   Palet biru pemerintahan; ganti lewat variabel --kh-* di bawah. */
.kh-hero{
  --kh-bg:#071b39; --kh-bg2:#0b2a57; --kh-glow:#2f6bc0; --kh-mint:#9cc4ff;
  --kh-a:#facc15; --kh-b:#f97316;
  position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--kh-bg)}

.kh-bg{position:absolute;inset:0;z-index:-4}
.kh-veil{position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(34rem 26rem at 0% 100%,color-mix(in srgb,var(--kh-glow) 62%,transparent),transparent 70%),
    radial-gradient(36rem 24rem at 100% 0%,rgb(250 204 21/.2),transparent 68%),
    linear-gradient(100deg,color-mix(in srgb,var(--kh-bg) 90%,transparent) 0%,color-mix(in srgb,var(--kh-bg2) 74%,transparent) 48%,color-mix(in srgb,var(--kh-bg2) 52%,transparent) 100%),
    linear-gradient(180deg,rgb(0 0 0/.18),transparent 35%,rgb(0 0 0/.35))}

.kh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center;min-height:36rem;padding-top:3.5rem;padding-bottom:8.5rem}
.kh-copy,.kh-visual{min-width:0}
@media(min-width:1024px){.kh-grid{grid-template-columns:repeat(12,minmax(0,1fr));padding-top:4rem;padding-bottom:10rem}
  .kh-copy{grid-column:span 6}.kh-visual{grid-column:span 6}}

.kh-pill{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;padding:.5rem 1.05rem;border-radius:9999px;
  background:rgb(0 0 0/.22);border:1px solid rgb(255 255 255/.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f1f5f9}
.kh-pill b{flex-shrink:0;width:.7rem;height:.7rem;border-radius:9999px;background:var(--kh-a);box-shadow:0 0 0 0 rgb(250 204 21/.7);animation:kh-ping 2.2s infinite}
@keyframes kh-ping{70%{box-shadow:0 0 0 .6rem rgb(250 204 21/0)}100%{box-shadow:0 0 0 0 rgb(250 204 21/0)}}

.kh-title{margin:1.3rem 0 0;color:#fff;font-weight:800;line-height:1.02;letter-spacing:-.035em;font-size:clamp(2.9rem,7vw,5.2rem)}
.kh-title span{display:block;background:linear-gradient(95deg,var(--kh-a) 10%,var(--kh-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.kh-tagline{margin:1rem 0 0;font-weight:700;font-size:1.15rem;color:var(--kh-mint)}
.kh-lede{margin-top:1.1rem;max-width:34rem;font-size:1.05rem;line-height:1.75;color:rgb(255 255 255/.92)}

.kh-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem;max-width:34rem}
.kh-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:.8rem;font-weight:700;font-size:.95rem;
  transition:transform .15s,background .15s,box-shadow .15s}
.kh-btn:hover{transform:translateY(-2px)}
.kh-btn-gold{color:#1a1500;background:linear-gradient(135deg,#fde047,#facc15 55%,#f59e0b);box-shadow:0 14px 30px -12px rgb(250 204 21/.75)}
.kh-btn-line{color:#fff;background:rgb(0 0 0/.18);border:1px solid rgb(255 255 255/.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kh-btn-line:hover{background:rgb(255 255 255/.14)}

.kh-checks{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:1.9rem 0 0;padding:1.2rem 0 0;max-width:36rem;list-style:none;border-top:1px solid rgb(255 255 255/.18)}
.kh-checks li{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:#fff}
.kh-checks svg{color:var(--kh-a)}

/* ---- Visual orbit ---- */
.kh-visual{display:none;position:relative;height:30rem}
@media(min-width:1024px){.kh-visual{display:block}}
.kh-ring{position:absolute;left:50%;top:50%;border-radius:9999px;border:1px dashed rgb(250 204 21/.32);transform:translate(-50%,-50%)}
.kh-ring.r1{width:26rem;height:26rem;animation:kh-spin 60s linear infinite}
.kh-ring.r1::before,.kh-ring.r1::after{content:"";position:absolute;width:.55rem;height:.55rem;border-radius:9999px;background:var(--kh-a);box-shadow:0 0 14px var(--kh-a)}
.kh-ring.r1::before{top:14%;right:8%}.kh-ring.r1::after{left:-.25rem;top:56%;background:#7db2ff;box-shadow:0 0 14px #7db2ff}
@keyframes kh-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.kh-chip{position:absolute;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem .7rem .75rem;border-radius:1rem;
  background:rgb(255 255 255/.1);border:1px solid rgb(255 255 255/.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 36px -18px rgb(0 0 0/.6);animation:kh-float 7s ease-in-out infinite}
.kh-chip .ic{flex-shrink:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;color:#241a00;
  background:linear-gradient(135deg,#fde047,#f59e0b)}
.kh-chip strong{display:block;font-size:.92rem;font-weight:800;color:#fff;line-height:1.2}
.kh-chip small{display:block;margin-top:.15rem;font-size:.72rem;color:rgb(255 255 255/.78)}
.kh-chip.c-top{right:0;top:.5rem;background:#fff;border-color:#fff;animation-delay:-2s}
.kh-chip.c-top img{width:2.6rem;height:2.6rem;object-fit:contain}
.kh-chip.c-top strong{color:#0b2a57}.kh-chip.c-top small{color:#5b6b85}
.kh-chip.c-l{left:-1.5rem;top:5.2rem;animation-delay:-4s}
.kh-chip.c-r{right:-1.2rem;top:12.4rem;animation-delay:-1s}
.kh-chip.c-bl{left:.5rem;bottom:2.4rem;animation-delay:-5s}
.kh-chip.c-br{right:1.5rem;bottom:.8rem;animation-delay:-3s}
@keyframes kh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.kh-chart{position:absolute;left:44%;top:50%;width:17rem;padding:1rem 1.1rem 1.1rem;border-radius:1.6rem;transform:translate(-50%,-42%);
  background:linear-gradient(160deg,rgb(11 42 87/.92),rgb(7 27 57/.94));border:1px solid rgb(255 255 255/.18);
  box-shadow:0 34px 60px -24px rgb(0 0 0/.75),inset 0 1px 0 rgb(255 255 255/.12)}
.kh-chart-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:9999px;font-size:.7rem;font-weight:800;color:#fde68a;
  background:rgb(250 204 21/.14);border:1px solid rgb(250 204 21/.4)}
.kh-bars{display:flex;align-items:flex-end;gap:.45rem;height:8rem;margin-top:1rem}
.kh-bars i{flex:1;border-radius:.3rem .3rem .15rem .15rem;background:linear-gradient(180deg,#facc15,#a16207);transform-origin:bottom;animation:kh-grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.kh-bars i:nth-child(1){height:24%}.kh-bars i:nth-child(2){height:38%;animation-delay:.07s}.kh-bars i:nth-child(3){height:30%;animation-delay:.14s}
.kh-bars i:nth-child(4){height:52%;animation-delay:.21s}.kh-bars i:nth-child(5){height:46%;animation-delay:.28s}.kh-bars i:nth-child(6){height:74%;animation-delay:.35s}
.kh-bars i:nth-child(7){height:92%;animation-delay:.42s}
@keyframes kh-grow{from{transform:scaleY(.05);opacity:0}to{transform:none;opacity:1}}
.kh-trend{position:absolute;left:1.1rem;right:1.1rem;top:3.4rem;height:8rem;width:calc(100% - 2.2rem);pointer-events:none}
.kh-trend polyline{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:kh-draw 1.8s .5s ease forwards}
.kh-trend circle{fill:#fff;stroke:var(--kh-a);stroke-width:2.5;opacity:0;animation:kh-pop .4s 2.2s forwards}
@keyframes kh-draw{to{stroke-dashoffset:0}}@keyframes kh-pop{to{opacity:1}}

/* ---- Penanda slide ---- */
.kh-dots{position:absolute;left:0;right:0;bottom:6.2rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.kh-label{position:absolute;left:50%;bottom:7.4rem;transform:translateX(-50%);font-size:.72rem;color:rgb(255 255 255/.65)}

@media(max-width:640px){.kh-cta .kh-btn{flex:1 1 auto;justify-content:center}.kh-pill{font-size:.6rem;letter-spacing:.07em}.kh-label{display:none}}

@media(prefers-reduced-motion:no-preference){
  .kh-copy>*{animation:kh-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .kh-copy>:nth-child(2){animation-delay:.07s}.kh-copy>:nth-child(3){animation-delay:.14s}.kh-copy>:nth-child(4){animation-delay:.21s}
  .kh-copy>:nth-child(5){animation-delay:.28s}.kh-copy>:nth-child(6){animation-delay:.35s}
}
@keyframes kh-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kh-ring.r1,.kh-chip,.kh-pill b,.kh-bars i,.kh-trend polyline,.kh-trend circle{animation:none}
  .kh-trend polyline{stroke-dashoffset:0}.kh-trend circle{opacity:1}}

/* Siluet batik Diwo khas Kepahiang — latar section Kalender Acara.
   Tile mirror (tanpa sambungan), putih transparan; atur kepekatan lewat --kp-batik-opacity. */
.kp-batik{
  --kp-batik-opacity:.12;
  position:absolute;inset:0;z-index:-10;pointer-events:none;
  background-image:url('../img/batik-diwo-siluet.png');
  background-image:image-set(url('../img/batik-diwo-siluet.webp') type('image/webp'),url('../img/batik-diwo-siluet.png') type('image/png'));
  background-size:900px auto;background-position:center top;background-repeat:repeat;
  opacity:var(--kp-batik-opacity);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
@media (max-width:640px){.kp-batik{background-size:560px auto;--kp-batik-opacity:.1}}