/* HERO INDOSAINSTECH - EDU SKILL STYLE */

/* Background menyatu */
.hero.hi-hero {
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(
      ellipse at 80% 35%,
      rgba(32,108,193,.25),
      transparent 53%
    ),
    linear-gradient(
      108deg,
      #091d32 0%,
      #0b2b42 47%,
      #103e79 100%
    )!important;
  color:#fff!important;
  min-height:600px!important;
  padding:0!important;
  border:0!important;
}

/* Pola titik halus */
.hero.hi-hero::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background-image:radial-gradient(
    rgba(255,255,255,.16) 1px,
    transparent 1px
  )!important;
  background-size:20px 20px!important;
  opacity:.12!important;
  pointer-events:none!important;
}

.hero.hi-hero::after {
  display:none!important;
  content:none!important;
}

/* Matikan lapisan yang bertabrakan */
.hero.hi-hero .hi-layer,
.hero.hi-hero .hi-canvas {
  display:none!important;
}

/* Komposisi seperti EduSkillHub */
.hero.hi-hero .hi-grid {
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  width:min(100%,1480px)!important;
  max-width:1480px!important;
  min-height:600px!important;
  margin:0 auto!important;
  padding:44px clamp(30px,5vw,70px)!important;
  grid-template-columns:minmax(0,52%) minmax(0,48%)!important;
  align-items:center!important;
  gap:0!important;
}

/* Bagian kiri */
.hero.hi-hero .hi-copy {
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  padding:25px clamp(18px,3vw,44px) 25px 0!important;
  background:transparent!important;
  color:#fff!important;
}

/* Badge berita */
.hero.hi-hero .hi-kicker {
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  color:#ffc35d!important;
  padding:9px 15px!important;
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}

/* Judul besar dan putih */
.hero.hi-hero .hi-title {
  color:#ffffff!important;
  font-size:clamp(40px,4.2vw,68px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  max-width:17ch!important;
  margin:22px 0 20px!important;
  overflow-wrap:break-word!important;
  text-shadow:none!important;
  display:block!important;
  overflow:visible!important;
}

/* Ringkasan */
.hero.hi-hero .hi-summary {
  color:#d0dfeb!important;
  font-size:clamp(16px,1.25vw,19px)!important;
  line-height:1.7!important;
  max-width:51ch!important;
  margin:0!important;
}

/* Tanggal */
.hero.hi-hero .hi-date {
  color:#ffd085!important;
  font-size:14px!important;
  font-weight:650!important;
  margin:17px 0 0!important;
}

/* Tombol */
.hero.hi-hero .hi-actions {
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin-top:28px!important;
}

.hero.hi-hero .hi-actions a {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:49px!important;
  padding:13px 23px!important;
  border-radius:12px!important;
  font-weight:750!important;
  font-size:14px!important;
  text-decoration:none!important;
}

.hero.hi-hero .hi-action {
  background:#ffc052!important;
  color:#10283c!important;
  border:1px solid #ffc052!important;
}

.hero.hi-hero .hi-subaction {
  background:rgba(255,255,255,.08)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.28)!important;
}

/* Navigasi slider */
.hero.hi-hero .hi-controls {
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:25px!important;
}

.hero.hi-hero .hi-controls[hidden],
.hero.hi-hero .hi-tags[hidden] {
  display:none!important;
}

.hero.hi-hero .hi-controls>button {
  min-width:35px!important;
  min-height:35px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  cursor:pointer!important;
}

.hero.hi-hero .hi-dots {
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

.hero.hi-hero .hi-dots button {
  width:24px!important;
  min-width:24px!important;
  height:4px!important;
  min-height:4px!important;
  padding:0!important;
  border:0!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.35)!important;
}

.hero.hi-hero .hi-dots button.active {
  background:#ffc052!important;
}

/* Tag organisasi */
.hero.hi-hero .hi-tags {
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:20px!important;
}

.hero.hi-hero .hi-tags span {
  background:rgba(255,255,255,.09)!important;
  color:#e1ebf4!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-size:12px!important;
}

/* Gambar kanan: ukuran seimbang */
.hero.hi-hero .hi-media,
.hero.hi-hero .hi-media.hi-portrait {
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:515px!important;
  min-height:0!important;
  max-height:515px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

.hero.hi-hero .hi-media::before,
.hero.hi-hero .hi-media::after {
  display:none!important;
  content:none!important;
}

/* Poster utuh tanpa crop */
.hero.hi-hero .hi-photo,
.hero.hi-hero .hi-media.hi-portrait .hi-photo,
.hero.hi-hero .hi-media.hi-intro .hi-photo {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Efek transisi gambar yang sudah dipasang */
.hero.hi-hero .hi-motion-ghost {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  z-index:5!important;
  opacity:1;
  pointer-events:none!important;
  transition:
    opacity 1.4s ease,
    transform 1.4s ease!important;
}

.hero.hi-hero .hi-motion-ghost.is-leaving {
  opacity:0!important;
  transform:scale(1.02)!important;
}

/* Tablet */
@media(max-width:900px) {
  .hero.hi-hero .hi-grid {
    grid-template-columns:1fr!important;
    min-height:0!important;
    padding:38px 25px!important;
    gap:25px!important;
  }

  .hero.hi-hero .hi-copy {
    padding:0!important;
  }

  .hero.hi-hero .hi-title {
    font-size:clamp(36px,7vw,53px)!important;
  }

  .hero.hi-hero .hi-media,
  .hero.hi-hero .hi-media.hi-portrait {
    height:360px!important;
    max-height:360px!important;
  }
}

/* HP */
@media(max-width:480px) {
  .hero.hi-hero .hi-grid {
    padding:30px 20px!important;
    gap:20px!important;
  }

  .hero.hi-hero .hi-title {
    font-size:clamp(33px,8vw,42px)!important;
  }

  .hero.hi-hero .hi-media,
  .hero.hi-hero .hi-media.hi-portrait {
    height:285px!important;
    max-height:285px!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero.hi-hero .hi-motion-ghost {
    transition:none!important;
  }
}