:root {
  --ink: #111111;
  --nav: #252641;
  --muted: #696984;
  --muted-2: #545567;
  --yellow: #fff200;
  --yellow-soft: #fff36a;
  --blue: #349ada;
  --blue-strong: #0098d5;
  --orange: #f48c06;
  --orange-strong: #f88c3d;
  --hero-shadow: 0 14px 44px rgba(86, 91, 221, 0.1);
  --card-shadow: 0 10px 60px rgba(38, 45, 118, 0.08);
  --white-shadow: 0 16px 44px rgba(13, 15, 28, 0.1);
  --content-max: 1920px;
  --app-scale: 1;
}

* {
  box-sizing: border-box;
}

/* ===== Animasi zoom in/out untuk kartu (Programs, Berita, Join) =====
   Class "reveal" ditambahkan otomatis lewat scripts/main.js ke
   .program-card, .news-card, dan .join-card saat halaman dimuat.
   "is-visible" ditoggle oleh IntersectionObserver saat kartu masuk/keluar
   viewport — animasinya berulang tiap kali di-scroll lewat (bukan cuma
   sekali muncul), sesuai efek "zoom in zoom out". */
.reveal {
  opacity: 0;
  transform: scale(0.9) translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.page {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--content-max);
  max-width: none;
  transform: scale(var(--app-scale));
  transform-origin: top center;
  margin-left: calc(var(--content-max) / -2);
}

.section-shell {
  max-width: 1720px;
  margin: 0 auto;
  padding-inline: 96px;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  flex: none;
}

.hero {
  position: relative;
  min-height: 130vh;
  overflow: hidden;
  background:
    radial-gradient(1000px 640px at 12% -8%, rgba(255, 242, 0, 0.16), transparent 62%),
    radial-gradient(760px 760px at 102% 6%, rgba(93, 230, 217, 0.32), transparent 58%),
    radial-gradient(900px 620px at 50% 118%, rgba(4, 24, 58, 0.55), transparent 60%),
    linear-gradient(158deg, #012347 0%, #0098d5 42%, #00b7dd 78%, #04c6d8 100%);
}

/* Halus, seperti garis-garis jaringan listrik/"grid" -- murni dekoratif,
   dibuat dari CSS supaya tidak nambah berat halaman dengan gambar baru. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(1100px 720px at 78% 10%, #000 0%, transparent 68%);
  mask-image: radial-gradient(1100px 720px at 78% 10%, #000 0%, transparent 68%);
}

/* Nav-nya position:fixed di semua ukuran layar, jadi kalau user klik link
   nav (#about, #programs, dst) browser bakal scroll pas ke atas section
   itu -- padahal bagian atasnya ketutup nav yang mengambang. scroll-margin
   ngasih jarak supaya judul section tidak ketiban nav pas di-scroll ke situ. */
#home,
#about,
#programs,
#timeline,
#faq {
  scroll-margin-top: 110px;
}

.hero__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 96px;
  z-index: 2;
  display: block;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 130vh;
  padding-top: 71px;
}

.nav-fixed-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--content-max);
  transform: scale(var(--app-scale)); 
  transform-origin: top center;
  margin-left: calc(var(--content-max) / -2);
  z-index: 9999;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 50px 180px;
  background: #0098d5;
  border-radius: 0;
  margin: 0 auto;
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kelas ini ditoggle otomatis oleh scripts/main.js begitu user scroll
   melewati ambang tertentu (lihat initShrinkingNav). Header berubah dari
   full-width biru nempel atas jadi pill putih mengambang dengan margin
   di kiri-kanan, sesuai referensi. */
.nav.is-shrunk {
  max-width: 1400px;
  margin-top: 16px;
  padding: 20px 40px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
}

.nav.is-shrunk .nav__brand span,
.nav.is-shrunk .nav__links a {
  color: #151828;
}

.nav.is-shrunk .nav__links a:hover,
.nav.is-shrunk .nav__links a.is-active {
  color: #0098d5;
}

.nav.is-shrunk .nav__links a.is-active::after {
  background: #0098d5;
}

.nav__brand {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 33px;
}

.nav__brand-logo {
  height: 33px;
  width: auto;
  object-fit: contain;
  flex: none;
  transition: opacity 0.25s ease;
}

.nav__brand-logo--color {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.nav.is-shrunk .nav__brand-logo--white {
  opacity: 0;
}

.nav.is-shrunk .nav__brand-logo--color {
  opacity: 1;
}

.nav__brand span {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 58px;
  margin-left: 42px;
  flex: 1;
}

.nav__links a {
  position: relative;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 500;
  color: #fff;
  padding-bottom: 10px;
  transition: color 0.2s ease;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  border-radius: 999px;
  background: var(--yellow);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__links a:hover {
  color: #fff;
}

/* Kelas ini ditoggle otomatis oleh scripts/main.js (scroll-spy) sesuai
   section yang sedang dilihat user saat scroll, atau saat link diklik */
.nav__links a.is-active {
  color: #fff;
}

.nav__links a.is-active::after {
  width: 100%;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: none;
}

.nav__button {
  height: 60px;
  min-width: 160px;
  padding: 0 28px;
  border: 0;
  border-radius: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

.nav__button--login {
  background: #fff;
  color: #5f5f5f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.nav__button--signup {
  background: var(--yellow);
  color: #111;
}

/* ===== Login dropdown (role select: Mentor / Peserta PKL / Researcher) ===== */
.login-dropdown {
  position: relative;
}

.login-dropdown__chevron {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.25s ease;
}

.login-dropdown.is-open .login-dropdown__chevron {
  transform: rotate(180deg);
}

.login-dropdown__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: 236px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 10000;
}

.login-dropdown.is-open .login-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.login-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.login-dropdown__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f6fa;
  color: #5f6473;
  transition: background 0.18s ease, color 0.18s ease;
}

.login-dropdown__icon svg {
  width: 18px;
  height: 18px;
}

.login-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.login-dropdown__title {
  font-size: 15px;
  font-weight: 600;
  color: #1c2030;
  line-height: 1.3;
  transition: font-weight 0.18s ease, color 0.18s ease;
}

.login-dropdown__desc {
  font-size: 12.5px;
  color: #8a8fa0;
  line-height: 1.3;
}

.login-dropdown__item:hover,
.login-dropdown__item:focus-visible {
  background: #eaf6ff;
  outline: none;
}

.login-dropdown__item:hover .login-dropdown__icon,
.login-dropdown__item:focus-visible .login-dropdown__icon {
  background: #d7effc;
  color: #0096d6;
}

.login-dropdown__item:hover .login-dropdown__title,
.login-dropdown__item:focus-visible .login-dropdown__title {
  font-weight: 800;
  color: #0096d6;
}

@media (max-width: 760px) {
  .login-dropdown__menu {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    box-shadow: none;
    border: 1px solid #eef1f6;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height 0.25s ease, padding 0.25s ease;
  }

  .login-dropdown.is-open .login-dropdown__menu {
    height: auto;
    padding: 8px;
    pointer-events: auto;
  }

  .login-dropdown__item {
    padding: 14px 12px;
  }
}

.role-select-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.role-select-label {
  color: #42495d;
  font-size: 14px;
  font-weight: 600;
}

.role-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.role-option {
  position: relative;
}

.role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.role-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid #e4e9f2;
  border-radius: 14px;
  background: #f8fafc;
  color: #6f788b;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-align: center;
}

.role-option-card i {
  font-size: 20px;
  color: #8792a8;
  transition: color 0.2s ease;
}

.role-option-card span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.role-option-card:hover {
  border-color: #20a8e8;
  background: #f0f9ff;
  color: #20a8e8;
}

.role-option-card:hover i {
  color: #20a8e8;
}

.role-option input[type="radio"]:checked + .role-option-card {
  border-color: #20a8e8;
  background: #eaf7ff;
  color: #1789cc;
  box-shadow: 0 4px 12px rgba(32, 168, 232, 0.15);
}

.role-option input[type="radio"]:checked + .role-option-card i {
  color: #1789cc;
}

@media (max-width: 480px) {
  .role-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .role-option-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 16px;
    gap: 12px;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(560px, 760px);
  gap: 28px;
  align-items: start;
  padding: 161px 97px 118px 131px;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 805px;
  padding-top: 8px;
}

.split-word {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Poppins", sans-serif;
  font-size: 71px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: 0;
  color: #fff;
}

/* Ganti squiggle dua-garis lama (kelihatan seperti dicoret) dengan aksen
   warna kuning langsung di teks kata "Karier" -- lebih aman daripada garis
   dekoratif yang posisinya gampang berantakan tiap kali baris judul
   membungkus beda-beda di lebar layar berbeda. Class "hero-highlight"
   ditambahkan otomatis lewat scripts/main.js. */
.split-word.hero-highlight {
  color: var(--yellow);
}

.hero__cta {
  margin-top: 68px;
  width: 276px;
  height: 80px;
  border-radius: 80px;
  background: var(--yellow);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  box-shadow: 0 18px 40px rgba(255, 224, 0, 0.18);
  cursor: pointer;
}

.hero__visual {
  position: relative;
  min-height: 500px;
}

.hero__circle {
  position: absolute;
  z-index: 0;
  right: 268px;
  top: 74px;
  width: 334px;
  height: 334px;
  border-radius: 50%;
  background: #ff7078;
}

.hero__girl {
  position: absolute;
  right: 125px;
  top: -94px;
  width: 596px;
  height: 920px;
  object-fit: cover;
  object-position: center top;
}

.hero__orb {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
}

.hero__orb--blue {
  left: 0;
  top: 218px;
  width: 30px;
  height: 30px;
  background: #349ada;
}

.hero__orb--mint {
  right: 148px;
  top: 48px;
  width: 30px;
  height: 30px;
  background: #65e6cb;
}

.hero__orb--red {
  right: 78px;
  top: 148px;
  width: 20px;
  height: 20px;
  background: #d40039;
}

.hero__orb--salmon {
  left: -109px;
  top: 409px;
  width: 36px;
  height: 36px;
  background: #ff8c80;
}

.hero__orb--purple {
  right: -4px;
  top: 596px;
  width: 30px;
  height: 30px;
  background: #7d6af9;
}

.hero__orb--check {
  right: 12px;
  top: 326px;
  width: 20px;
  height: 20px;
  background: #46d48d;
}

.hero__tile {
  position: absolute;
  z-index: 3;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--white-shadow);
  display: grid;
  place-items: center;
}

.hero__tile--left {
  left: -75px;
  top: 246px;
  width: 98px;
  height: 98px;
  transform: rotate(-12deg);
}

.hero__tile--right {
  right: 9px;
  top: 380px;
  width: 128px;
  height: 128px;
  transform: rotate(9.92deg);
}

.hero__badge {
  position: absolute;
  z-index: 4;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(86, 91, 221, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

.hero__badge--congrats {
  right: -18px;
  top: 162px;
  width: 413px;
  height: 110px;
}

.hero__badge--count {
  left: -58px;
  top: 450px;
  width: 300px;
  height: 100px;
}

.badge__icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
}

.badge__icon--orange {
  background: var(--orange-strong);
}

.badge__icon--blue {
  background: #23bdee;
}

.badge__icon .icon {
  width: 28px;
  height: 28px;
}

.badge__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.badge__copy strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
  color: #595959;
}

.badge__copy span {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  color: var(--muted-2);
  white-space: nowrap;
}

.badge__copy--small strong {
  font-size: 22px;
}

.badge__copy--small span {
  font-size: 18px;
}

.about {
  position: relative;
  padding: 56px 0 94px;
  background: #fff;
}

.about__intro {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 0 36px;
}

.about__intro-title {
  margin: 0 0 12px;
  font-size: 40px;
  font-weight: 700;
  color: #111;
}

.about__intro-subtitle {
  margin: 0;
  font-size: 22px;
  color: var(--muted);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 782px);
  gap: 48px;
  align-items: center;
}

.about__copy {
  position: relative;
  padding-right: 24px;
}

.about__copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-42px, -12px);
}

.about__copy::after {
  content: "";
  position: absolute;
  right: 58px;
  top: 128px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff200;
}

.about__title {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  max-width: 655px;
  font-size: 36px;
  line-height: 1.6;
  font-weight: 600;
  color: #111;
}

.about__title span {
  color: var(--blue);
}

.about__text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 773px;
  font-size: 24px;
  line-height: 1.8;
  color: #111;

  text-align: justify;
}

.about__visual {
  position: relative;
  min-height: 471px;
}

.about__block {
  position: absolute;
  border-radius: 20px;
}

.about__block--blue {
  left: 0;
  top: 0;
  width: 138px;
  height: 138px;
  background: var(--blue-strong);
}

.about__block--yellow {
  right: 0;
  bottom: 0;
  width: 231px;
  height: 231px;
  background: var(--yellow);
}

.about__dot {
  position: absolute;
  border-radius: 50%;
}

.about__dot--one {
  left: 80px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #fff200;
}

.about__dot--two {
  right: 150px;
  top: 148px;
  width: 30px;
  height: 30px;
  background: #fff200;
}

.about__dot--three {
  left: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  background: #fff200;
}

.about__image {
  position: absolute;
  left: 20px;
  top: 20px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.about__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.about__track::-webkit-scrollbar {
  display: none;
}

.about__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--nav);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translateY(-50%);
}

.about__arrow span {
  font-size: 34px;
  line-height: 1;
  transform: translateY(-2px);
}

.about__arrow--prev {
  left: 18px;
}

.about__arrow--next {
  right: 18px;
}

.about__carousel-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.about__carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.about__carousel-dots button.is-active {
  width: 28px;
  border-radius: 999px;
  background: var(--yellow);
}

.programs {
  padding: 14px 0 86px;
}

.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.program-card {
  position: relative;
  min-height: 553px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: 66px 32px 32px;
  text-align: center;
}

.program-card__circle {
  position: absolute;
  left: 50%;
  top: -50px;
  width: 101px;
  height: 100px;
  transform: translateX(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #111;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.program-card__circle--yellow {
  background: var(--yellow);
}

.program-card__circle--blue {
  background: #23bdee;
  color: #fff;
}

.program-card__title {
  margin: 0 0 24px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  color: #111;
}

.program-card__image {
  width: 262px;
  height: 159px;
  margin: 0 auto 28px;
  border-radius: 20px;
  overflow: hidden;
}

.program-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #111;
}

.news {
  position: relative;
  padding: 132px 0 76px;
  background: #fff;
  overflow: hidden;
}

.news__orb {
  position: absolute;
  border-radius: 50%;
  background: var(--yellow);
  pointer-events: none;
}

.news__orb--one {
  left: -182px;
  top: 138px;
  width: 781px;
  height: 739px;
}

.news__orb--two {
  left: 62%;
  top: 662px;
  width: 254px;
  height: 247px;
}

.news__orb--three {
  right: 70px;
  top: 840px;
  width: 92px;
  height: 84px;
}

.news__orb--four {
  right: 240px;
  top: 350px;
  width: 248px;
  height: 240px;
}

.news__title {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
  font-weight: 600;
  color: #111;
}

.news__subtitle {
  position: relative;
  z-index: 1;
  margin: 0 auto 52px;
  max-width: 1066px;
  text-align: center;
  font-size: 24px;
  line-height: 1.8;
  color: var(--muted);
}

.news__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
}

.news__empty,
.faq__empty {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  padding: 32px 0;
}

.news-card {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 239px;
  padding: 16px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.news-card:hover,
.news-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 26px 48px rgba(17, 24, 39, 0.16);
}

.news-card:focus-visible {
  outline: 2px solid var(--blue-strong, #0098d5);
  outline-offset: 4px;
}

.news-card:active {
  transform: translateY(-2px) scale(1.005);
}

.news-card__image {
  flex: none;
  width: 274px;
  height: 173px;
  border-radius: 20px;
  overflow: hidden;
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .news-card__image img,
.news-card:focus-visible .news-card__image img {
  transform: scale(1.14);
}

.news-card__body {
  min-width: 0;
  padding-right: 8px;
}

.news-card__title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.8;
  font-weight: 500;
  color: #252641;
}

.news-card__text {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted);
}

.news-card__date {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

.news__cta {
  position: relative;
  z-index: 1;
  width: 196px;
  height: 35px;
  margin: 18px auto 0;
  border-radius: 80px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1;
  color: rgba(17, 17, 17, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}

.news__cta:hover {
  border-color: rgba(17, 17, 17, 0.9);
  color: rgba(17, 17, 17, 0.9);
  background-color: rgba(0, 0, 0, 0.04);
}

.timeline {
  padding: 96px 0 28px;
  background: #fff;
}

.timeline__inner {
  text-align: center;
}

.timeline__title {
  margin: 0 0 14px;
  font-size: 50px;
  line-height: 1.8;
  font-weight: 600;
  color: #111;
}

.timeline__subtitle {
  margin: 0 auto;
  max-width: 1187px;
  font-size: 24px;
  line-height: 1.8;
  color: var(--muted);
}

.timeline__diagram {
  width: min(100%, 1320px);
  margin: 42px auto 0;
  border: 0;
}

.timeline__diagram img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.join {
  position: relative;
  padding: 0 0 100px;
  background: #fff;
  overflow: hidden;
}

.join__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.join__title {
  margin: 0;
  font-size: 50px;
  line-height: 1.8;
  font-weight: 600;
  color: #111;
}

.join__subtitle {
  margin: 0 auto 82px;
  max-width: 1101px;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.48px;
  color: var(--muted);
}

.join__yellow {
  position: absolute;
  left: 0; 
  width: 85%; 
  max-width: 1600px; 
  bottom: 65px;
  height: 360px;
  background: var(--yellow);
  border-top-right-radius: 180px;
}

.join__line {
  position: absolute;
  width: 430px;
  height: 430px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.join__line--left {
  left: -180px;
  top: 248px;
}

.join__line--right {
  right: -96px;
  bottom: 108px;
  width: 500px;
  height: 500px;
}

.join__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 440px)); 
  justify-content: center;
  gap: 40px; 
}

.join-card {
  display: block;
  position: relative;
  height: 280px; 
  border-radius: 20px;
  overflow: hidden;
  background: #c4c4c4;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.join-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20, 32, 70, 0.18);
}

.join-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join-card__shade {
  position: absolute;
  inset: 0;
  background: rgba(23, 27, 65, 0.45);
}

.join-card:first-child .join-card__shade {
  background: linear-gradient(90deg, rgba(235, 241, 247, 0.6), rgba(23, 27, 65, 0.42));
}

.join-card h3 {
  position: absolute;
  left: 50%;
  top: 36px; 
  transform: translateX(-50%);
  margin: 0;
  font-size: 28px; 
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
}

.join-card__cta {
  position: absolute;
  left: 50%;
  top: 92px; 
  transform: translateX(-50%);
  width: 108px; 
  height: 36px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  background: var(--blue-strong);
  color: #fff;
  font-size: 16px; 
  font-weight: 500;
}

.faq {
  position: relative;
  padding: 110px 0 128px;
  background: #fff;
}

.faq::before {
  content: none;
}

.faq__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.18fr);
  gap: 84px;
  align-items: start;
}

.faq__eyebrow {
  margin: 0 0 18px;
  color: var(--blue-strong);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.faq__title {
  margin: 0;
  max-width: 650px;
  color: #111;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.35;
}

.faq__subtitle {
  margin: 28px 0 0;
  max-width: 672px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.8;
}

.faq__list {
  display: grid;
  gap: 22px;
}

.faq-item {
  border: 1px solid rgba(31, 154, 218, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 32, 70, 0.045);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  min-height: 82px;
  padding: 0 28px;
  border: 0;
  background: transparent;
  color: #252641;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.faq-item__icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #111;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-item__answer p {
  margin: 0;
  padding: 0 28px 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.faq-item.is-open .faq-item__answer {
  max-height: 260px;
}

.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ==========================================================
   FOOTER -- disamakan PERSIS dengan css/pkl-home-landing.css
   (footer halaman-peserta.html, yang jadi acuan/contoh resmi).
   Sebelumnya file ini punya versi footer sendiri yang beda-beda kecil
   di banyak tempat (background solid vs gradient, ikon sosial polos
   tanpa warna brand, kartu alamat/kontak beda padding, dsb) -- efeknya
   footer index.html/halaman-divisi.html/detail-divisi.html kelihatan
   "mirip tapi enggak sama persis" dibanding halaman-peserta.html.
   Blok ini DIAMBIL LANGSUNG (nilai computed-nya dicocokkan satu-satu)
   dari cascade final css/pkl-home-landing.css (termasuk lapisan
   .pkl-page yang tadinya cuma aktif di halaman-peserta.html), lalu
   ditulis di sini TANPA prefix .pkl-page supaya berlaku sama di semua
   halaman yang cuma load style.css. Kalau nanti footer perlu diubah
   lagi, cukup ubah di sini -- halaman-peserta.html tetap aman karena
   aturan .pkl-page di pkl-home-landing.css spesifisitasnya lebih
   tinggi dan nilainya sudah sama, jadi tidak saling tabrak. ========== */
.site-footer {
  background: linear-gradient(135deg, #0798d0 0%, #0096cf 55%, #0788bc 100%);
  color: #fff;
  min-height: auto;
  padding: 58px 0 26px;
}

.site-footer__inner {
  display: block;
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 56px);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 44px;
  align-items: stretch;
}

.site-footer__location {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 20px;
  align-items: stretch;
}

.site-footer__map {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(0, 48, 72, 0.16);
  text-decoration: none;
  cursor: pointer;
}

.site-footer__map img,
.site-footer__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  background: #e8f0f5;
  transition: transform 0.35s ease;
}

.site-footer__map:hover img {
  transform: scale(1.025);
}

.site-footer__map:hover .site-footer__map-frame {
  filter: saturate(1.03);
}

.site-footer__map-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #16242d;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: none;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
}

.site-footer__contact h3,
.site-footer__columns h3 {
  margin: 0 0 15px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.site-footer__contact h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.site-footer__address {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
}

.site-footer__address:hover {
  text-decoration: underline;
}

.site-footer__contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.site-footer__contact-item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.site-footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.site-footer__contact-icon svg {
  width: 19px;
  height: 19px;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 34px;
  align-content: start;
  padding: 20px 0 0;
}

.site-footer__columns > div {
  min-width: 0;
}

.site-footer__columns > div > a {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 13px;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
}

.site-footer__columns > div > a:hover {
  text-decoration: underline;
}

.site-footer__columns > div > a:last-child {
  margin-bottom: 0;
}

.site-footer__social {
  grid-column: 1 / -1;
  padding-top: 4px;
}

.site-footer__social-grid {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 10px;
  justify-content: start;
  align-items: center;
}

.site-footer__social-grid .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.site-footer__social-grid .social svg {
  display: block;
  width: 23px;
  height: 23px;
}

.site-footer__social-grid .social:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.24);
}

.site-footer__social-grid .social--ig { background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045); border-color: transparent; }
.site-footer__social-grid .social--fb { background: #1877f2; border-color: transparent; }
.site-footer__social-grid .social--tt { background: #050505; border-color: rgba(255, 255, 255, 0.25); }
.site-footer__social-grid .social--yt { background: #ff0000; border-color: transparent; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer__brand {
  display: inline-block;
  max-width: 185px;
  padding: 0;
}

.site-footer__brand img {
  display: block;
  width: 170px;
}

.site-footer__copyright {
  margin: 0;
  padding: 0;
  width: auto;
  border: 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 1100px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .site-footer__location {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  }

  .site-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0;
  }

  .site-footer__social {
    grid-column: auto;
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  .site-footer__location {
    grid-template-columns: 1fr;
  }

  .site-footer__map,
  .site-footer__map-frame {
    min-height: 260px;
  }

  .site-footer__contact {
    padding: 20px;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__social {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .site-footer__copyright {
    text-align: left;
  }
}

/* ---- PKL peserta page (dummy) ---- */

.pkl-topnav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1100px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 28px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pkl-topnav.is-shrunk {
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.18);
}

.pkl-topnav .nav__brand {
  height: 26px;
}

.pkl-topnav .nav__brand img {
  width: auto;
  height: 26px;
}

.pkl-topnav .nav__brand span {
  font-size: 17px;
  letter-spacing: 1.5px;
}

.pkl-topnav .nav__links {
  margin-left: 32px;
  gap: 32px;
}

.pkl-topnav .nav__links a {
  font-size: 15px;
  padding-bottom: 6px;
}

.pkl-topnav .pkl-exit {
  height: 42px;
  min-width: 110px;
  padding: 0 20px;
  font-size: 14px;
}

/* Topnav peserta PKL: pill putih mengambang dari awal (bukan biru
   full-width), jadi teks & brand selalu gelap. */
.pkl-topnav .nav__brand,
.pkl-topnav .nav__brand span,
.pkl-topnav .nav__links a {
  color: #111;
}

.pkl-topnav .nav__links a:hover,
.pkl-topnav .nav__links a.is-active {
  color: var(--blue-strong);
}

.pkl-exit {
  background: #fff;
  color: #5f5f5f;
  border: 1.5px solid rgba(17, 24, 39, 0.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pkl-exit:hover {
  background: var(--blue-strong);
  color: #fff;
  border-color: var(--blue-strong);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 152, 213, 0.28);
}

/* Tombol "Profil" -- supaya selalu ada berdampingan dengan Kembali/Keluar
   di SEMUA halaman peserta (sebelumnya cuma ada di halaman-peserta.html,
   hilang begitu pindah ke halaman-divisi.html / detail-divisi.html).
   Warnanya disesuaikan dengan pill putih .pkl-topnav di style.css ini
   (beda dari versi gelap di pkl-home-landing.css yang cuma dipakai
   halaman-peserta.html). */
.pkl-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 8px;
  border: 1.5px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #263238;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pkl-profile:hover {
  color: var(--blue-strong);
  border-color: rgba(0, 152, 213, 0.3);
  transform: translateY(-1px);
}

.pkl-profile__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f3;
  color: inherit;
}

.pkl-profile__icon svg {
  width: 17px;
  height: 17px;
}

/* Karena .pkl-topnav sekarang fixed, halaman butuh spacer supaya konten
   pertama tidak ketutupan navbar. */
.pkl-topnav-spacer {
  height: 92px;
}

.pkl-hero {
  padding: 40px 0 90px;
  background: #fff;
}

.pkl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: 48px;
  align-items: center;
}

.pkl-hero__title {
  margin: 0 0 24px;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  color: #111;
}

.pkl-hero__text {
  margin: 0 0 44px;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.8;
  color: #111;
}

.pkl-stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkl-stats strong {
  display: block;
  font-size: 48px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--yellow-2, #f0c932);
}

.pkl-stats li:nth-child(2) strong {
  color: var(--blue);
}

.pkl-stats span {
  font-size: 18px;
  font-weight: 500;
  color: #111;
}

.pkl-hero__visual {
  position: relative;
}

.pkl-hero__blob {
  position: absolute;
  z-index: 0;
}

.pkl-hero__blob--yellow {
  left: -30px;
  top: -30px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--yellow);
}

.pkl-hero__blob--blue {
  left: -10px;
  bottom: -30px;
  width: 260px;
  height: 150px;
  background: var(--blue-strong);
  border-radius: 60% 40% 55% 45% / 60% 55% 45% 40%;
}

.pkl-hero__image {
  position: relative;
  z-index: 1;
  width: 82%;
  margin-left: 18%;
  border-radius: 32px;
  overflow: hidden;
}

.pkl-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pkl-benefits {
  padding: 40px 0 100px;
  background: #fff;
}

.pkl-benefits__grid {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.pkl-benefits__image {
  border-radius: 32px;
  overflow: hidden;
}

.pkl-benefits__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pkl-benefits__title {
  margin: 0 0 28px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
}

.pkl-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.pkl-check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  color: #252641;
}

.pkl-check-list .icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: #fff;
  background: var(--blue-strong);
  border-radius: 50%;
  padding: 4px;
}

.pkl-benefits__copy {
  position: relative;
}

.pkl-benefits__dot {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.pkl-benefits__dot--blue {
  right: -6px;
  bottom: 86px;
  width: 16px;
  height: 16px;
  background: var(--blue);
}

.pkl-benefits__dot--yellow {
  right: 26px;
  bottom: 48px;
  width: 28px;
  height: 28px;
  background: var(--yellow);
}

.kuota {
  position: relative;
  overflow: hidden;
  padding: 90px 0 20px;
  background: #f4f9fd;
}

.kuota::before {
  content: none;
}

.kuota-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(31, 154, 218, 0.09);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(20, 32, 70, 0.05);
  padding: 34px 40px;
}

.kuota-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 20px;
}

.kuota-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #252641;
  border-radius: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.kuota-item:hover {
  background: #f4f9fd;
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(20, 32, 70, 0.1);
  z-index: 1;
  position: relative;
}

.kuota-item__icon {
  flex: none;
  width: 22px;
  height: 13px;
  border-radius: 8px;
  background: var(--blue-strong);
}

.kuota-item__name {
  flex: none;
  width: 108px;
}

.kuota-item__qty {
  font-weight: 600;
}

.bidang {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: #f4f9fd;
}

.bidang::before {
  content: none;
}

.bidang-grid {
  position: relative;
  z-index: 1;
}

.bidang-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.bidang-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid rgba(31, 154, 218, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(20, 32, 70, 0.045);
  font-size: 18px;
  font-weight: 500;
  color: #252641;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.bidang-card:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 20px 36px rgba(20, 32, 70, 0.14);
  z-index: 1;
  position: relative;
}

.bidang-card__num {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/* =========================================================================
   Seragam (halaman peserta): accordion gallery horizontal ala React Bits
   (AccordionGallery), diadaptasi jadi vanilla JS + GSAP karena situs ini
   tidak pakai React -- lihat scripts/seragam.js. Tiap panel selalu
   menampilkan nama hari (vertikal) dalam keadaan tertutup; hover/klik/fokus
   memperlebar panel itu (animasi flex-grow lewat GSAP), memunculkan warna
   penuh (dari grayscale) dan keterangan lengkapnya.
   ========================================================================= */
.seragam {
  position: relative;
  padding: 100px 0;
  background: #fff;
}

.seragam-accordion {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 480px;
  margin-top: 12px;
}

.seragam-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  background: #0a0713;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.seragam-panel:focus-visible {
  box-shadow:
    0 0 0 3px var(--blue-strong),
    0 10px 30px -18px rgba(0, 0, 0, 0.55);
}

.seragam-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.seragam-panel__media {
  position: absolute;
  inset: 0;
  filter: grayscale(1);
  transition: filter 0.5s ease;
}

.seragam-panel--active .seragam-panel__media {
  filter: grayscale(0);
}

.seragam-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.seragam-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 40%, rgba(10, 14, 30, 0.88) 100%),
    rgba(10, 14, 30, 0.4);
  transition: background 0.4s ease;
}

.seragam-panel--active .seragam-panel__overlay {
  background:
    linear-gradient(180deg, transparent 42%, rgba(10, 14, 30, 0.85) 100%),
    rgba(10, 14, 30, 0);
}

/* Label hari, selalu kelihatan selama panel BELUM aktif (tulisan vertikal
   biar tetap terbaca walau panelnya masih sempit) */
.seragam-panel__tag {
  position: absolute;
  left: 18px;
  bottom: 20px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.seragam-panel--active .seragam-panel__tag {
  opacity: 0;
}

/* Keterangan lengkap, cuma muncul begitu panel aktif */
.seragam-panel__detail {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

.seragam-panel--active .seragam-panel__detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.seragam-panel__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.seragam-panel__title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.seragam-panel__desc {
  color: #f1f2f6;
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 860px) {
  .seragam-accordion {
    flex-direction: column;
    height: auto;
  }

  .seragam-panel {
    height: 84px;
    flex: none !important;
    transition: height 0.5s ease;
  }

  .seragam-panel--active {
    height: 420px;
  }

  .seragam-panel__tag {
    writing-mode: horizontal-tb;
    transform: none;
    left: 20px;
    bottom: 16px;
  }

  .seragam-panel__title {
    font-size: 17px;
  }
}

.pkl-faq {
  position: relative;
  padding: 96px 0 120px;
  background: #fff;
}

.pkl-faq__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 44px;
}

.pkl-faq__title {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  color: #111;
}

.pkl-faq__dot {
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
}

.pkl-faq__dot--a {
  width: 30px;
  height: 30px;
}

.pkl-faq__dot--b {
  width: 12px;
  height: 12px;
  align-self: flex-start;
  margin-top: 6px;
}

.pkl-faq .faq__list {
  max-width: 820px;
  margin: 0 auto;
}

/* ---- Divisi Yang Tersedia ---- */

.divisi-hero {
  padding: 40px 0 80px;
  background: #fff;
}

.divisi-banner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 48px 56px;
  background: linear-gradient(135deg, #0098d5, #66c6ea);
}

.divisi-banner::before {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.divisi-banner::after {
  content: "";
  position: absolute;
  right: 60px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.divisi-banner__title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  max-width: 560px;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}

.divisi-banner__subtitle {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.divisi-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 36px 0 48px;
}

.divisi-tab {
  padding: 12px 28px;
  border-radius: 80px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #252641;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.divisi-tab.is-active {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  color: #fff;
}

.divisi-category {
  margin-bottom: 52px;
  scroll-margin-top: 24px;
}

.divisi-category__title {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 700;
  color: #111;
}

.divisi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.divisi-card {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 24px 64px 24px 24px;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.divisi-card:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 22px 40px rgba(20, 32, 70, 0.16);
  z-index: 1;
}

.divisi-card__name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.divisi-card__kuota {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.divisi-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.divisi-card__arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .divisi-grid {
    grid-template-columns: 1fr;
  }

  .divisi-banner {
    padding: 36px 28px;
  }

  .divisi-banner__title {
    font-size: 30px;
  }
}

.divisi-detail {
  padding: 60px 0 120px;
  background: #fbfbfd;
  min-height: 60vh;
}

.divisi-detail__inner {
  max-width: none;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(20, 32, 70, 0.06);
  padding: 56px clamp(24px, 6vw, 96px) 64px;
}

.divisi-detail__back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--blue-strong);
  font-size: 15px;
  font-weight: 600;
}

.divisi-detail__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}

.divisi-detail__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #111;
}

.divisi-detail__type {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 80px;
  background: #1a9b5c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.divisi-detail__org {
  margin: 0 0 32px;
  font-size: 15px;
  color: var(--muted);
}

.divisi-detail__heading {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.divisi-detail__desc {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.8;
  color: #252641;
}

.divisi-detail__list {
  margin: 0 0 32px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.divisi-detail__list li {
  font-size: 15px;
  line-height: 1.7;
  color: #252641;
}

.divisi-detail__cta.hero__cta {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .pkl-hero__grid,
  .pkl-benefits__grid {
    grid-template-columns: 1fr;
  }

  .bidang-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kuota-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(10, auto);
  }

  .kuota-card {
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  .bidang-grid {
    grid-template-columns: 1fr;
  }

  .kuota-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(20, auto);
  }

  .pkl-hero__title {
    font-size: 38px;
  }
}

.auth-page {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #f5f7fd;
  color: #151828;
  font-family: "Poppins", system-ui, sans-serif;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(460px, 1.05fr);
}

.auth-shell--fx {
  position: relative;
}

.auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0097bf;
}

.auth-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-shell--fx .auth-visual,
.auth-shell--fx .auth-panel {
  position: relative;
  z-index: 1;
}

.auth-shell--fx.iridescence-active .auth-visual,
.auth-shell--fx.iridescence-active .auth-panel {
  background: transparent;
}

.auth-shell--fx.iridescence-active .auth-visual::before,
.auth-shell--fx.iridescence-active .auth-visual::after {
  display: none;
}

.auth-visual {
  position: relative;
  overflow: hidden;
  padding: 54px 64px;
  background: #0097bf;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.auth-visual::before {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(163, 217, 241, 0.18);
}

.auth-visual::after {
  content: "";
  position: absolute;
  left: -120px;
  top: 24%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(243, 184, 106, 0.16);
}

.auth-logo {
  position: relative;
  z-index: 1;
  width: 220px;
  display: block;
}

button.auth-logo,
button.admin-logo {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.auth-logo img {
  width: 100%;
  height: auto;
}

.auth-visual__copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-top: 12vh;
}

.auth-visual__copy p {
  margin: 0 0 18px;
  color: #ffff;
  font-size: 18px;
  font-weight: 700;
}

.auth-visual__copy h1 {
  margin: 0;
  color: #ffff;
  font-family: "Plus Jakarta Sans", "Poppins", sans-serif;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}

.auth-visual__copy span {
  display: block;
  margin-top: 24px;
  max-width: 520px;
  color: #ffff;
  font-size: 18px;
  line-height: 1.8;
}

.auth-panel {
  padding: 54px 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  position: relative;
}

.auth-panel--top {
  align-content: start;
  padding-top: 100px;
}

.auth-back {
  position: absolute;
  top: 40px;
  right: 64px;
  z-index: 5;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #5e6678;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(26, 40, 80, 0.06);
}

.auth-card {
  width: min(100%, 560px);
  padding: 42px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(26, 40, 80, 0.08);
}

.auth-card__head {
  margin-bottom: 28px;
}

.auth-card__head p {
  margin: 0 0 8px;
  color: #20a8e8;
  font-size: 14px;
  font-weight: 700;
}

.auth-card__head h2 {
  margin: 0;
  color: #15184b;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 800;
}

/* Karakter ilustrasi interaktif di panel login (auth-visual) -- matanya
   ngikutin kursor mouse ke mana pun (lihat scripts/auth-characters.js), dan
   nutup mata pas user ngetik password. Warna disengaja SAMA seperti
   referensi video user (ungu/hitam/oranye/kuning), bukan dipalet-ulang ke
   warna brand. Ukuran & jarak sudah direvisi: oranye dibesarkan, hitam
   digeser supaya tidak mepet ke ungu, ungu & kuning dikasih mata. */
.auth-characters {
  position: relative;
  width: 300px;
  height: 196px;
  margin-top: auto;
  padding-top: 32px;
  z-index: 1;
  pointer-events: none;
}

.auth-char {
  position: absolute;
  bottom: 0;
  animation: authCharBob 4.6s ease-in-out infinite;
}

.auth-char--purple {
  left: 0;
  width: 114px;
  height: 168px;
  background: #7c4dff;
  border-radius: 38px 38px 10px 10px;
  z-index: 1;
}

.auth-char--black {
  left: 98px;
  width: 82px;
  height: 150px;
  background: #14161c;
  border-radius: 30px 30px 8px 8px;
  z-index: 2;
  overflow: hidden;
  animation-duration: 4.1s;
  animation-delay: 0.3s;
}

.auth-char--orange {
  left: 0;
  width: 152px;
  height: 76px;
  background: #ff7a3d;
  border-radius: 76px 76px 0 0;
  z-index: 3;
  animation-duration: 5s;
  animation-delay: 0.6s;
}

.auth-char--yellow {
  left: 196px;
  width: 84px;
  height: 142px;
  background: #ffcf4d;
  border-radius: 40px 40px 30px 30px;
  z-index: 1;
  animation-duration: 4.3s;
  animation-delay: 0.15s;
}

.auth-char__eye {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.auth-char__pupil {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14161c;
  /* Posisi digerakkan tiap frame lewat JS (ikut kursor) -- transisi CSS
     sengaja tidak dipakai di sini supaya gerakannya presisi & tidak lag. */
}

.auth-char--purple .auth-char__eye {
  top: 42px;
}
.auth-char--purple .auth-char__eye--l {
  left: 26px;
}
.auth-char--purple .auth-char__eye--r {
  left: 66px;
}

.auth-char--black .auth-char__eye {
  top: 34px;
}
.auth-char--black .auth-char__eye--l {
  left: 18px;
}
.auth-char--black .auth-char__eye--r {
  left: 50px;
}

.auth-char--orange .auth-char__eye {
  top: 22px;
  width: 12px;
  height: 12px;
}
.auth-char--orange .auth-char__eye--l {
  left: 44px;
}
.auth-char--orange .auth-char__eye--r {
  left: 96px;
}

.auth-char--orange .auth-char__mouth {
  position: absolute;
  top: 44px;
  left: 62px;
  width: 26px;
  height: 13px;
  border-radius: 0 0 13px 13px;
  background: #14161c;
}

.auth-char--yellow .auth-char__eye {
  top: 38px;
  width: 12px;
  height: 12px;
}
.auth-char--yellow .auth-char__eye--l {
  left: 20px;
}
.auth-char--yellow .auth-char__eye--r {
  left: 52px;
}

.auth-char--yellow .auth-char__beak {
  position: absolute;
  top: 66px;
  left: 36px;
  width: 26px;
  height: 4px;
  background: #14161c;
  border-radius: 2px;
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.auth-char__lid {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 32px;
  background: #14161c;
  transform: translateY(-130%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lagi ngetik password: karakter hitam nutup mata pakai "kelopak", ungu &
   oranye & kuning ikut merem, paruh kuning nunduk -- reaksi "malu-malu". */
.auth-characters--typing .auth-char--black .auth-char__lid {
  transform: translateY(0);
}
.auth-characters--typing .auth-char--purple .auth-char__eye,
.auth-characters--typing .auth-char--orange .auth-char__eye,
.auth-characters--typing .auth-char--yellow .auth-char__eye {
  transform: scaleY(0.15);
}
.auth-characters--typing .auth-char--yellow .auth-char__beak {
  transform: rotate(-10deg);
}

/* Password di-"tampilkan" (klik ikon mata): karakter mengintip lagi, mata
   dibuka lebar. */
.auth-characters--reveal .auth-char--black .auth-char__lid {
  transform: translateY(-130%);
}
.auth-characters--reveal .auth-char__eye {
  transform: scale(1.15);
}
.auth-characters--reveal .auth-char--yellow .auth-char__beak {
  transform: rotate(6deg);
}

@keyframes authCharBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-char {
    animation: none !important;
  }
  .auth-char__eye,
  .auth-char__lid,
  .auth-char--yellow .auth-char__beak {
    transition: none !important;
  }
}

@media (max-width: 980px) {
  .auth-characters {
    transform: scale(0.82);
    transform-origin: bottom left;
    margin-top: 24px;
  }
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: #42495d;
  font-size: 14px;
  font-weight: 600;
}

.auth-form input,
.auth-form select {
  width: 100%;
  height: 52px;
  border: 1px solid #e4e9f2;
  border-radius: 14px;
  background: #f8fafc;
  color: #151828;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: #20a8e8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(32, 168, 232, 0.12);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: #8792a8;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.password-toggle:hover {
  color: #20a8e8;
  background: #eaf7ff;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-check {
  display: inline-flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
  color: #6f788b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.auth-check input {
  width: 16px;
  height: 16px;
}

.auth-form__row a {
  color: #1789cc;
  font-size: 13px;
  font-weight: 700;
}

.auth-form__row button {
  border: 0;
  background: transparent;
  color: #1789cc;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit {
  grid-column: 1 / -1;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #f48c06;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(244, 140, 6, 0.22);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.auth-login-prompt {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  text-align: center;
  color: #6f788b;
  font-size: 13px;
  font-weight: 500;
}

.auth-login-prompt a {
  color: #1789cc;
  font-weight: 700;
  text-decoration: none;
}

.auth-login-prompt a:hover {
  text-decoration: underline;
}

.auth-status {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: 0;
  color: #1789cc;
  font-size: 13px;
  font-weight: 600;
}

.auth-status.is-error {
  color: #e6483f;
}

.media-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__figure {
  position: absolute;
  z-index: 1;
  right: 154px;
  top: auto;
  bottom: -118px;
  width: 620px;
  height: 800px;
  display: grid;
  place-items: center;
}

/* ===== Komposisi visual pengganti foto stok di hero =====
   Murni CSS + SVG + ikon yang sudah ada di svg-sprite (tidak menambah
   gambar baru), bertema "portal pelatihan/sertifikasi" biar nyambung sama
   badge "Congratulations - sertifikat resmi" & "100+ Total Peserta" yang
   sudah ada di sekitarnya. */
.hero-card__ring {
  position: absolute;
  width: 460px;
  height: 460px;
  animation: heroRingSpin 34s linear infinite;
}

.hero-card__ring svg {
  width: 100%;
  height: 100%;
}

.hero-card__ring-track,
.hero-card__ring-progress {
  fill: none;
  stroke-width: 1.6;
}

.hero-card__ring-track {
  stroke: rgba(255, 255, 255, 0.16);
}

.hero-card__ring-progress {
  stroke: rgba(255, 242, 0, 0.75);
  stroke-linecap: round;
  stroke-dasharray: 14 22;
}

.hero-card {
  position: relative;
  z-index: 1;
  width: 372px;
  height: 452px;
  border-radius: 34px;
  padding: 26px 26px 30px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 40px 80px rgba(2, 20, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: homeFloatA 7.5s ease-in-out infinite;
}

.hero-card__glow {
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-card__top {
  position: relative;
  display: flex;
  gap: 7px;
}

.hero-card__top .hero-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.hero-card__top .hero-card__dot:first-child {
  background: var(--yellow);
}

.hero-card__icon {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: linear-gradient(155deg, #ffffff, #d9f4ff);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 30px rgba(2, 20, 46, 0.22);
}

.hero-card__icon .icon {
  width: 36px;
  height: 36px;
  color: var(--blue-strong);
}

.hero-card__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 92px;
  padding: 0 4px;
}

.hero-card__bars span {
  flex: 1;
  height: var(--bar-h, 50%);
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--yellow), rgba(255, 242, 0, 0.35));
}

.hero-card__bars span:nth-child(2n) {
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.35));
}

.hero-card__lines {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-card__lines span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.hero-card__lines span:first-child {
  width: 100%;
}

.hero-card__lines span:last-child {
  width: 62%;
}

.hero-card__chip {
  position: relative;
  margin-top: auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #46d48d;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px rgba(23, 106, 68, 0.35);
}

.hero-card__chip .icon {
  width: 24px;
  height: 24px;
  color: #fff;
}

.hero-card__satellite {
  position: absolute;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--white-shadow);
}

.hero-card__satellite .icon {
  width: 30px;
  height: 30px;
  color: var(--blue-strong);
}

.hero-card__satellite--grad {
  left: -6px;
  top: 58px;
  animation: homeFloatTileLeft 6.5s ease-in-out infinite;
}

.hero-card__satellite--lab {
  right: -4px;
  bottom: 128px;
  animation: homeFloatTileRight 7s ease-in-out infinite;
}

.hero-card__bolt {
  position: absolute;
  z-index: 5;
  left: -16px;
  top: -14px;
  width: 46px;
  height: 46px;
  animation: homeFloatB 5.4s ease-in-out infinite;
}

.hero-card__bolt svg {
  width: 100%;
  height: 100%;
  fill: var(--yellow);
  filter: drop-shadow(0 10px 18px rgba(255, 242, 0, 0.45));
}

@keyframes heroRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card__ring,
  .hero-card,
  .hero-card__satellite--grad,
  .hero-card__satellite--lab,
  .hero-card__bolt {
    animation: none !important;
  }
}

.hero__tile svg,
.hero__badge svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    min-height: 450px;
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 620px);
  }
}

@media (max-width: 760px) {
  /* scripts/main.js berhenti nge-scale halaman di lebar ini (lihat
     MOBILE_REFLOW_MAX_WIDTH) -- .page & .nav-fixed-wrapper masih dari CSS
     desktop (position:absolute/fixed, width 1920px, di-tengahkan pakai
     left:50% + margin-left negatif). Tanpa override ini keduanya akan
     meluber jauh ke kiri/kanan viewport HP walau scale-nya sudah dimatikan. */
  .page {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }

  .nav-fixed-wrapper {
    position: fixed;
    left: 0;
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .section-shell {
    padding-inline: 32px;
  }

  /* Nav dibuat satu baris ringkas: brand tetap, link jadi scroll horizontal
     (pola yang sama dipakai .pkl-topnav di halaman peserta), tombol
     login/signup dikecilkan. Sebelumnya nav__links wrap ke baris baru dan
     tingginya jadi tidak terduga -- karena nav ini position:fixed, itu
     bikin dia numpuk di atas judul hero (tabrakan). Baris tunggal bikin
     tinggi nav konsisten & gampang dikasih jarak di section di bawahnya. */
  .nav {
    width: 100%;
    height: 64px;
    padding: 10px 16px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .nav__brand-logo {
    height: 24px;
  }

  .nav__links {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav__links::-webkit-scrollbar {
    display: none;
  }

  .nav__links a {
    flex: 0 0 auto;
    font-size: 14px;
    padding-bottom: 6px;
    white-space: nowrap;
  }

  .nav__actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .nav__button {
    height: 38px;
    min-width: auto;
    padding: 0 14px;
    font-size: 13px;
  }

  /* Muat brand + nav__links (scroll) + tombol Login + tombol Sign Up
     sekaligus di satu baris cuma nggak muat di layar HP (lebar login+signup
     berdua aja lebih dari sisa lebar nav setelah logo). "Daftar Sekarang"
     di hero (tepat di bawah nav) sudah jadi jalan pendaftaran utama, jadi
     Sign Up di nav disembunyikan di HP supaya Login & link nav tetap
     kebagian ruang & tidak tembus ke luar layar. */
  .nav__button--signup {
    display: none;
  }

  /* Ada aturan lama (lihat @media 760px paling atas file ini, di sekitar
     .login-dropdown__menu) yang mengubah dropdown Login jadi model
     "accordion" in-flow (position:static, width:100%) khusus buat mobile.
     Itu bikin .login-dropdown ikut melebar walau dropdown-nya lagi
     ketutup (width:100% dari elemen height:0 tetap dihitung ke lebar
     parent), jadi nav header ini ikut kedorong lebar & Login sampai
     kepotong. Nav header di sini ruangnya cuma muat dropdown yang
     mengambang (posisinya sama kayak versi desktop), jadi dikembalikan
     ke position:absolute supaya tidak ikut menghitung ke lebar nav. */
  .nav .login-dropdown__menu {
    position: absolute;
    top: calc(100% + 12px);
    /* Tombol Login-nya mepet ke pinggir kanan nav di HP, jadi dropdown-nya
       di-anchor rata kanan (bukan di-tengah kayak versi desktop) supaya
       tetap penuh kebaca & tidak kepotong tepi layar. */
    left: auto;
    right: 0;
    transform: translateY(-8px);
    width: 236px;
    max-width: calc(100vw - 32px);
    margin-top: 0;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.16);
    border: 0;
    opacity: 0;
    visibility: hidden;
    height: auto;
    padding: 8px;
    overflow: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  }

  .nav .login-dropdown.is-open .login-dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  #home,
  #about,
  #programs,
  #timeline,
  #faq {
    scroll-margin-top: 80px;
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    min-height: auto;
    padding-top: 84px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 24px 72px;
  }

  .hero__copy {
    max-width: 760px;
    padding-top: 0;
  }

  .hero__title {
    font-size: 56px;
    line-height: 1.1;
  }

  .hero__visual {
    min-height: 760px;
    justify-self: center;
    width: min(100%, 760px);
  }

  .hero__circle {
    right: 130px;
    top: 104px;
  }

  .hero__girl {
    right: 16px;
  }

  .about__grid,
  .programs__grid,
  .news__grid {
    grid-template-columns: 1fr;
  }

  .about__visual {
    min-height: 580px;
  }

  /* Dua bulatan kuning dekoratif (::before & ::after) di pojok .about__copy
     didesain buat layar lebar, jadi cuma nyembul dikit di sudut teks. Di HP
     mereka jadi kebesaran relatif terhadap lebar teks & malah numpuk di atas
     judul/paragraf (keliatan berantakan). Disembunyikan aja di mobile --
     murni dekorasi, tidak ada informasi yang hilang. */
  .about__copy::before,
  .about__copy::after {
    display: none;
  }

  .news__title,
  .timeline__title {
    font-size: 40px;
  }

  .news__subtitle,
  .timeline__subtitle {
    font-size: 20px;
  }

  .news-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .join__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .join-card {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .faq__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .faq__title {
    font-size: 40px;
  }

  .faq__subtitle {
    font-size: 20px;
  }

  /* .pkl-topnav dipakai di halaman-divisi.html & detail-divisi.html (bukan
     .pkl-page, jadi tidak kena style mobile dari pkl-home-landing.css).
     Tanpa ini nav__links-nya (Home/Manfaat/Kuota/Bidang/FAQ) kehimpit di
     antara logo & tombol Kembali sampai lebarnya 0 alias hilang total di
     HP. Solusinya sama kayak .nav biasa: satu baris ringkas + scroll
     horizontal buat link-nya. */
  .pkl-topnav {
    width: calc(100% - 32px);
    top: 12px;
    padding: 8px 14px;
    gap: 10px;
  }

  .pkl-topnav .nav__brand img {
    height: 22px;
  }

  .pkl-topnav .nav__links {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pkl-topnav .nav__links::-webkit-scrollbar {
    display: none;
  }

  .pkl-topnav .nav__links a {
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
    padding-bottom: 4px;
  }

  .pkl-topnav .pkl-exit {
    flex: 0 0 auto;
    height: 36px;
    min-width: auto;
    padding: 0 14px;
    font-size: 12px;
  }

  .pkl-topnav .pkl-profile {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 8px 0 4px;
    font-size: 12px;
    gap: 6px;
  }

  .pkl-topnav .pkl-profile__icon {
    width: 24px;
    height: 24px;
  }

  .pkl-topnav .pkl-profile__icon svg {
    width: 14px;
    height: 14px;
  }

  /* Di layar paling sempit, sisakan cuma ikonnya supaya nav__links tetap
     kebaca & tidak makin himpit-himpitan sama Kembali/Keluar. */
  .pkl-topnav .pkl-profile span:not(.pkl-profile__icon) {
    display: none;
  }

  .pkl-topnav-spacer {
    height: 72px;
  }
}

@media (max-width: 720px) {
  .auth-visual,
  .auth-panel {
    padding: 32px 22px;
  }

  .auth-visual {
    min-height: 360px;
  }

  .auth-back {
    top: 22px;
    right: 22px;
  }

  .auth-card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .auth-card__head h2 {
    font-size: 32px;
  }

  .auth-form--grid {
    grid-template-columns: 1fr;
  }

  /* .nav__links/.nav__actions/.nav__button di bawah ini sengaja TIDAK
     diisi lagi (sebelumnya ada override min-width:136px & font-size:18px
     di sini) -- itu legacy dari draft mobile lama yang belum sempat
     dites, dan karena block 720px ini muncul belakangan di file, nilainya
     diam-diam menang & bikin tombol Login/Sign Up di nav jadi kelebaran
     lagi sampai tembus keluar layar di HP (nimpa fix compact-nav di block
     760px di atas). Ukuran nav sudah lengkap diatur di block 760px. */

  .hero__title {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero__cta {
    width: 220px;
    height: 64px;
    font-size: 20px;
  }

  .hero__visual {
    min-height: auto;
    width: 100%;
  }

  .hero__figure {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 596 / 920;
    height: auto;
    margin: 0 auto;
  }

  .hero__girl {
    inset: 0;
    width: 100%;
    height: 100%;
    right: auto;
    top: auto;
  }

  .hero__badge,
  .hero__tile,
  .hero__orb {
    display: none;
  }

  .hero-card__ring {
    width: min(88vw, 460px);
    height: min(88vw, 460px);
  }

  .hero-card {
    width: min(78vw, 372px);
    height: auto;
    aspect-ratio: 372 / 452;
    padding: 20px 20px 22px;
  }

  .hero-card__icon {
    width: 58px;
    height: 58px;
  }

  .hero-card__icon .icon {
    width: 28px;
    height: 28px;
  }

  .hero-card__bars {
    height: 70px;
  }

  .hero-card__satellite,
  .hero-card__bolt {
    display: none;
  }

  .news__orb {
    display: none;
  }

  .about__title,
  .about__text {
    font-size: 20px;
  }

  .program-card__title,
  .news-card__title {
    font-size: 22px;
  }

  .news-card__text {
    font-size: 18px;
  }

  .news__title,
  .timeline__title {
    font-size: 32px;
  }

  .news__subtitle,
  .timeline__subtitle,
  .join__subtitle {
    font-size: 18px;
  }

  .faq {
    padding: 72px 0 88px;
  }

  .faq__title {
    font-size: 32px;
  }

  .faq__subtitle,
  .faq-item__answer p {
    font-size: 18px;
  }

  .faq-item__question {
    min-height: 82px;
    padding: 0 22px;
    font-size: 20px;
  }

  .faq-item__answer p {
    padding: 0 22px 24px;
  }

  .news-card__image {
    width: 100%;
    height: 220px;
  }

  .join__title {
    font-size: 32px;
  }

  .join-card {
    height: 280px;
  }

  .join-card h3 {
    font-size: 28px;
  }
}

/* Perhalus ukuran judul hero di layar HP yang lebih sempit -- makin sempit
   layarnya, makin kecil hurufnya sedikit demi sedikit, supaya judul
   "Siapkan peluang Karier dengan / Menjadi Bagian dari PLN" tetap kebaca
   besar & tegas tapi jumlah barisnya tidak membengkak (target: 2 baris,
   maksimal 3 baris) di semua lebar HP umum (dari yang lebar ~420px sampai
   yang sempit ~320px). Angka-angka di bawah sudah dites langsung pakai
   Playwright dengan font asli (Plus Jakarta Sans 800), bukan cuma dikira-kira. */
@media (max-width: 600px) {
  .hero__title {
    font-size: 28px;
    line-height: 1.15;
  }
}

@media (max-width: 460px) {
  .hero__title {
    font-size: 27px;
    line-height: 1.15;
  }
}

@media (max-width: 400px) {
  .hero__title {
    font-size: 24px;
    line-height: 1.2;
  }
}

@media (max-width: 340px) {
  .hero__title {
    font-size: 23px;
    line-height: 1.2;
  }
}

.dashboard-page {
  margin: 0;
  min-width: 320px;
  background: #f7f8fb;
  color: #111;
  font-family: "Poppins", system-ui, sans-serif;
  overflow-x: hidden;
}

.dashboard-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.dashboard-sidebar {
  background: #0e74b7;
  color: #fff;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.dashboard-brand {
  width: 154px;
  display: inline-flex;
}

.dashboard-brand img {
  width: 100%;
  height: auto;
}

.dashboard-menu {
  display: grid;
  gap: 8px;
}

.dashboard-menu__item {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
}

.dashboard-menu__item.is-active,
.dashboard-menu__item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.dashboard-main {
  padding: 26px 28px 32px;
  display: grid;
  gap: 22px;
}

.dashboard-topbar {
  min-height: 92px;
  padding: 0 4px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.dashboard-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0e74b7;
}

.dashboard-title {
  margin: 0;
  font-size: 32px;
  line-height: 1;
}

.dashboard-subtitle {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.dashboard-topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-icon-button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #0e74b7;
  box-shadow: 0 8px 24px rgba(14, 116, 183, 0.08);
}

.dashboard-icon-button svg {
  width: 22px;
  height: 22px;
}

.dashboard-profile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 116, 183, 0.08);
}

.dashboard-profile__avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #1f8bd6;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.dashboard-profile__copy {
  display: grid;
  text-align: left;
}

.dashboard-profile__copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.dashboard-profile__copy span {
  font-size: 12px;
  color: #6b7280;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-stat,
.dashboard-panel,
.mini-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.dashboard-stat {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-stat__icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}

.dashboard-stat__icon svg {
  width: 24px;
  height: 24px;
}

.dashboard-stat__icon--blue {
  background: #1f8bd6;
}

.dashboard-stat__icon--orange {
  background: #f48c06;
}

.dashboard-stat__icon--green {
  background: #10b981;
}

.dashboard-stat__label,
.dashboard-panel__eyebrow {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.dashboard-stat__value {
  display: block;
  margin-top: 6px;
  font-size: 36px;
  line-height: 1;
  color: #111827;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
}

.dashboard-panel {
  padding: 22px;
}

.dashboard-panel--chart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-panel--wide {
  display: grid;
  gap: 18px;
}

.dashboard-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-panel__title {
  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.dashboard-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31, 139, 214, 0.12);
  color: #1f8bd6;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-pill--muted {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.dashboard-donut {
  position: relative;
  height: 280px;
  display: grid;
  place-items: center;
}

.dashboard-donut__ring {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(#1f8bd6 0 52%, #f48c06 52% 78%, #10b981 78% 100%);
  position: absolute;
}

.dashboard-donut__ring::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #fff;
}

.dashboard-donut__core {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 6px;
}

.dashboard-donut__core strong {
  font-size: 48px;
  line-height: 1;
}

.dashboard-donut__core span {
  font-size: 14px;
  color: #6b7280;
}

.dashboard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #374151;
  font-size: 13px;
}

.dashboard-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot--blue {
  background: #1f8bd6;
}

.dot--orange {
  background: #f48c06;
}

.dot--green {
  background: #10b981;
}

.dashboard-bars {
  height: 220px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 0 8px;
}

.dashboard-bars span {
  flex: 1;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #1f8bd6 0%, #77c4ff 100%);
}

.dashboard-table {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.dashboard-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, 0.9fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
  color: #111827;
  font-size: 14px;
}

.dashboard-table__row--head {
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.badge--blue {
  background: rgba(31, 139, 214, 0.12);
  color: #1f8bd6;
}

.badge--orange {
  background: rgba(244, 140, 6, 0.12);
  color: #f48c06;
}

.badge--green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.dashboard-link {
  color: #1f8bd6;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.mini-card {
  padding: 18px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(31, 139, 214, 0.08);
}

.mini-card strong {
  font-size: 16px;
}

.mini-card span {
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 1180px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .dashboard-menu {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, auto);
    overflow-x: auto;
  }

  .dashboard-main {
    padding: 20px;
  }

  .dashboard-stats,
  .dashboard-grid,
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-table__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.admin-page {
  margin: 0;
  min-width: 320px;
  background: #f7f8fb;
  color: #151828;
  font-family: "Poppins", system-ui, sans-serif;
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  background: #f5f7fd;
  transition: grid-template-columns 0.25s ease;
}

.admin-shell.is-sidebar-collapsed {
  grid-template-columns: 96px minmax(0, 1fr);
}

.admin-sidebar {
  min-height: 100vh;
  padding: 40px 30px 36px;
  background: #fff;
  border-right: 1px solid #e7edf5;
  position: sticky;
  top: 0;
  transition: padding 0.25s ease;
}

.admin-shell.is-sidebar-collapsed .admin-sidebar {
  padding: 42px 16px 36px;
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e7ebf3;
  background: #fff;
  color: #5f6c84;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0 0 18px auto;
  transition:
    transform 0.25s ease,
    background 0.15s ease;
}

.sidebar-toggle:hover {
  background: #eaf7ff;
  color: #1789cc;
}

.sidebar-toggle svg {
  width: 15px;
  height: 15px;
}

.admin-shell.is-sidebar-collapsed .sidebar-toggle {
  transform: rotate(180deg);
  margin: 0 auto 18px;
}

.admin-logo {
  display: block;
  width: 132px;
  margin-bottom: 44px;
  transition: width 0.25s ease;
}

.admin-shell.is-sidebar-collapsed .admin-logo {
  width: 58px;
  margin-left: auto;
  margin-right: auto;
}

.admin-logo img {
  width: 100%;
  height: auto;
}

.admin-nav {
  display: grid;
  gap: 16px;
}

.admin-nav__item {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #202020;
  display: flex;
  align-items: center;
  gap: 18px;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    padding 0.25s ease,
    justify-content 0.25s ease;
}

.admin-shell.is-sidebar-collapsed .admin-nav__item {
  padding: 0;
  justify-content: center;
}

.admin-shell.is-sidebar-collapsed .admin-nav__item span:not(.admin-nav__icon) {
  display: none;
}

.admin-nav__item.is-active,
.admin-nav__item:hover {
  background: #20a8e8;
  color: #fff;
}

.admin-nav__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
}

.admin-nav__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-main {
  padding: 36px 44px 48px;
}

.admin-topbar {
  min-height: 72px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.admin-topbar h1 {
  margin: 0;
  color: #15184b;
  font-size: 30px;
  font-weight: 800;
}

.admin-eyebrow {
  margin: 0 0 10px;
  color: #8792a8;
  font-size: 15px;
}

.admin-userbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-icon-btn {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #e34158;
  box-shadow: 0 10px 28px rgba(20, 32, 70, 0.05);
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(20, 32, 70, 0.08);
}

.admin-icon-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-icon-btn__badge {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef193c;
  box-shadow: 0 0 0 3px #fff;
}

.admin-icon-btn__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ef193c;
  animation: bellPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes bellPing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.admin-view {
  animation: viewIn 0.32s ease both;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-metric strong {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user__avatar,
.profile-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #edf5ff;
  color: #1584c7;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
}

.admin-user strong,
.admin-user small {
  display: block;
}

.admin-user strong {
  font-size: 16px;
}

.admin-user small {
  color: #8792a8;
  font-size: 13px;
}

.admin-user {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.admin-popover {
  position: relative;
}

.admin-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(20, 32, 70, 0.14);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
  z-index: 40;
}

.admin-popover.is-open .admin-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.admin-dropdown--user {
  width: 220px;
  padding: 8px;
}

.admin-dropdown--user a,
.admin-dropdown--user button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #15184b;
  cursor: pointer;
  text-decoration: none;
}

.admin-dropdown--user a:hover,
.admin-dropdown--user button:hover {
  background: #f4f6fb;
}

.admin-dropdown__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #edf5ff;
  color: #1584c7;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-dropdown__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 10px;
}

.admin-dropdown__head strong {
  color: #15184b;
  font-size: 15px;
}

.admin-dropdown__head button {
  border: 0;
  background: none;
  color: #1584c7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item {
  display: flex;
  width: 100%;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

.notif-item:hover {
  background: #f4f6fb;
}

.notif-item.is-unread {
  background: #f4f8ff;
}

.notif-item.is-unread:hover {
  background: #e9f1ff;
}

.notif-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.notif-item__icon--blue {
  background: #edf5ff;
  color: #1584c7;
}
.notif-item__icon--yellow {
  background: #fff6dc;
  color: #c99a1a;
}
.notif-item__icon--green {
  background: #e8faf0;
  color: #1fa971;
}
.notif-item__icon--red {
  background: #fdeaea;
  color: #e34158;
}

.notif-item__body p {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: #15184b;
  line-height: 1.35;
}

.notif-item__body span {
  font-size: 12px;
  color: #8792a8;
}

.notif-item__dot {
  position: absolute;
  right: 10px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef193c;
}

.notif-empty {
  padding: 24px 10px;
  text-align: center;
  color: #8792a8;
  font-size: 13px;
}

.admin-view {
  display: none;
}

.admin-view.is-active {
  display: block;
}

.admin-date {
  margin: 0 0 32px;
  color: #15184b;
  font-size: 50px;
  font-weight: 800;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 468px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 28px;
  align-items: start;
}

.admin-metric-stack {
  display: grid;
  gap: 20px;
}

.admin-metric,
.admin-card,
.admin-table-card,
.division-card,
.letter-preview,
.profile-card {
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(26, 40, 80, 0.045);
}

.admin-metric,
.admin-card,
.division-card {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.admin-metric:hover,
.admin-card:hover,
.division-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(26, 40, 80, 0.1);
}

.admin-metric {
  min-height: 138px;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  position: relative;
  overflow: hidden;
}

.admin-metric strong {
  grid-row: 1 / 3;
  color: #15184b;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.admin-metric span {
  font-size: 18px;
  font-weight: 700;
}

.admin-metric small {
  color: #8892a6;
  font-size: 14px;
}

.admin-metric::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  opacity: 0.45;
}

.admin-metric--blue {
  border: 3px solid #2196f3;
  background: #eaf6ff;
}

.admin-metric--yellow {
  background: #fff36f;
}

.admin-metric--red {
  background: #ff8b8b;
}

.admin-metric--blue::after {
  background: #2196f3;
}

.admin-metric--yellow::after {
  background: #f4b400;
}

.admin-metric--red::after {
  background: #e91e63;
}

.admin-metric__icon {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  z-index: 1;
}

.admin-metric__icon svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.admin-card {
  padding: 28px;
}

.admin-card__head,
.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-card h2,
.admin-page-head h2 {
  margin: 0;
  color: #15184b;
  font-size: 22px;
  font-weight: 800;
}

.admin-page-head {
  margin-bottom: 18px;
}

.admin-page-head p {
  margin: 6px 0 0;
  color: #8792a8;
  font-size: 14px;
}

.admin-mini-btn,
.admin-primary-btn,
.admin-secondary-btn {
  border: 0;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.admin-primary-btn {
  background: #20a8e8;
  color: #fff;
}

.admin-secondary-btn,
.admin-mini-btn {
  background: #eaf7ff;
  color: #1789cc;
}

.participant-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 26px;
}

.participant-list span {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #5f6c84;
  font-size: 14px;
}

.participant-list i,
.admin-note i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2196f3;
}

.participant-list b {
  color: #15184b;
  font-size: 14px;
}

.admin-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8792a8;
  font-size: 12px;
}

.admin-note .legend-yellow {
  background: #ffe11a;
}

.admin-note .legend-blue {
  background: #20a8e8;
}

.admin-note .legend-red {
  background: #e93e5c;
}

.quota-chart {
  margin-top: 28px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 8px 10px 0;
  overflow-x: auto;
}

.quota-chart__group {
  flex: 1 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quota-chart__group span {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.quota-chart__group span::before,
.quota-chart__group span::after {
  content: "";
  width: 14px;
  border-radius: 999px 999px 0 0;
}

.quota-chart__group span::before {
  height: var(--yellow);
  background: #ffe11a;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.quota-chart__group span::after {
  height: var(--blue);
  background: #20a8e8;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.quota-chart__group span.is-over::after {
  background: #e93e5c;
}

.quota-chart__group b {
  font-size: 11px;
  font-weight: 700;
  color: #15184b;
  white-space: nowrap;
}

.quota-chart__group small {
  font-size: 10.5px;
  color: #9aa4b6;
  text-align: center;
  white-space: nowrap;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-toolbar {
  margin-bottom: 14px;
  display: flex;
  gap: 12px;
}

.admin-toolbar input,
.admin-toolbar select,
.ams-form input,
.settings-card input {
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  padding: 0 13px;
  color: #303447;
  font: inherit;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(26, 40, 80, 0.04);
}

.admin-toolbar input {
  min-width: 340px;
}

.admin-toolbar__add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-toolbar__add svg {
  width: 15px;
  height: 15px;
}

.admin-toolbar__view-toggle {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border-radius: 9px;
  padding: 4px;
  box-shadow: 0 8px 20px rgba(26, 40, 80, 0.04);
}

.admin-toolbar__view-toggle button {
  border: 0;
  background: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #9aa4b6;
  cursor: pointer;
}

.admin-toolbar__view-toggle button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-toolbar__view-toggle button.is-active {
  background: #20a8e8;
  color: #fff;
}

.admin-table-card {
  padding: 18px;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.admin-table--7col {
  table-layout: fixed;
}

.admin-table--7col th,
.admin-table--7col td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table--7col th:nth-child(1),
.admin-table--7col td:nth-child(1) {
  width: 18%;
}

.admin-table--7col th:nth-child(2),
.admin-table--7col td:nth-child(2) {
  width: 11%;
}

.admin-table--7col th:nth-child(3),
.admin-table--7col td:nth-child(3) {
  width: 14%;
}

.admin-table--7col th:nth-child(4),
.admin-table--7col td:nth-child(4) {
  width: 19%;
}

.admin-table--7col th:nth-child(5),
.admin-table--7col td:nth-child(5) {
  width: 12%;
}

.admin-table--7col th:nth-child(6),
.admin-table--7col td:nth-child(6) {
  width: 12%;
}

.admin-table--7col th:nth-child(7),
.admin-table--7col td:nth-child(7) {
  width: 14%;
  overflow: visible;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid #edf0f5;
  color: #42495d;
  font-size: 12px;
}

.admin-table th {
  color: #9aa4b6;
  font-size: 11px;
  font-weight: 700;
}

.admin-table button {
  border: 0;
  background: #eef8ff;
  color: #1688ca;
  border-radius: 7px;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.admin-table .admin-actions {
  white-space: nowrap;
}

.admin-table .admin-actions button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #111827;
  font-size: 15px;
}

.admin-table .admin-actions button:hover {
  background: #eef8ff;
  color: #1688ca;
}

.admin-table .admin-actions__danger:hover {
  background: #ffe5e5;
  color: #f04d57;
}

.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 10px 4px;
  color: #9aa4b6;
  font-size: 11px;
}

.admin-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-pagination button {
  min-width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: #f4f7fb;
  color: #7b8597;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.admin-pagination button.is-active {
  background: #20a8e8;
  color: #fff;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 24px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
}

.status--green {
  background: #dff8ef;
  color: #18a36c;
}

.status--red {
  background: #ffe5e5;
  color: #f04d57;
}

.status--yellow {
  background: #fff4cc;
  color: #b98600;
}

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(135deg, #fff6c8, #ffffff 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.boot-splash.is-visible {
  opacity: 1;
}

.boot-splash__mark {
  width: 100px;
  height: 100px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20, 32, 70, 0.14);
  display: grid;
  place-items: center;
  animation: bootPulse 1.1s ease-in-out infinite;
}

.boot-splash__mark img {
  width: 60px;
}

.boot-splash p {
  margin: 0;
  color: #15184b;
  font-weight: 700;
  font-size: 24px;
}

.boot-splash__bar {
  width: 260px;
  height: 7px;
  border-radius: 999px;
  background: #ffe9a8;
  overflow: hidden;
}

.boot-splash__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #20a8e8;
  animation: bootSlide 0.9s ease-in-out infinite;
}

@keyframes bootPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes bootSlide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(380%);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 24, 75, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

.modal-backdrop[hidden] {
  display: flex;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 440px;
  padding: 28px;
  box-shadow: 0 30px 60px rgba(15, 20, 50, 0.25);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-backdrop.is-open .modal-dialog {
  transform: translateY(0) scale(1);
}

.modal-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.modal-dialog__head h3 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #15184b;
}

.modal-dialog__head p {
  margin: 0;
  color: #8792a8;
  font-size: 12.5px;
}

.modal-dialog__close {
  border: 0;
  background: #f4f6fb;
  width: 32px;
  height: 32px;
  min-height: 0;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #15184b;
}

.modal-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #5f6c84;
}

.modal-form input,
.modal-form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid #e7ebf3;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: #15184b;
  background: #fff;
}

.modal-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.modal-form__actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== Modal Detail Berita (klik kartu berita di beranda) ===== */
.news-modal-dialog {
  max-width: 640px;
  padding: 0;
  overflow: hidden;
}

.news-modal__image {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #f2f3f7;
}

.news-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-modal__body {
  padding: 28px clamp(20px, 3vw, 36px) 32px;
}

.news-modal__date {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue-strong, #0098d5);
}

.news-modal__title {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  color: #151828;
}

.news-modal__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #4b5163;
}

.news-modal-dialog .modal-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.92);
  z-index: 2;
}

@media (max-width: 640px) {
  .news-modal__image {
    height: 220px;
  }

  .news-modal__title {
    font-size: 20px;
  }
}

.mentor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: 18px;
}

.mentor-grid[hidden] {
  display: none;
}

.mentor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 24px 18px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 12px 32px rgba(26, 40, 80, 0.045);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  overflow: visible;
}

.mentor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(26, 40, 80, 0.1);
}

.mentor-card__avatar {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  margin-bottom: 14px;
}

.mentor-card__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mentor-card h4 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.3;
  color: #15184b;
}

.mentor-card__division {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #eaf7ff;
  color: #1789cc;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mentor-card__meta {
  width: 100%;
  color: #5f6c84;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 2px 0;
  overflow-wrap: break-word;
}

.mentor-card__delete {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #f4f6fb;
  color: #f04d57;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mentor-card:hover .mentor-card__delete {
  opacity: 1;
}

.division-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.division-card {
  min-height: 160px;
  padding: 16px 16px 14px;
  border: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.division-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(32, 168, 232, 0.16), rgba(255, 225, 26, 0.16));
}

.division-card--over::after {
  background: linear-gradient(90deg, rgba(244, 54, 98, 0.22), rgba(255, 225, 26, 0.16));
}

.division-card__date {
  color: #6f788b;
  font-size: 11px;
  line-height: 1.3;
}

.division-card h3 {
  margin: 4px 0 0;
  color: #333a4b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.division-card__body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 10px;
  align-items: end;
}

.division-card__count {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
}

.division-card__count strong {
  color: #ef193c;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.division-card--under .division-card__count strong {
  color: #1096d3;
}

.division-card__count span {
  color: #7b8597;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
}

.division-card__bars {
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.division-card__bars i {
  width: 12px;
  border-radius: 999px 999px 0 0;
  height: var(--h);
}

.division-card__bars i:first-child {
  background: #ffe11a;
}

.division-card__bars i:last-child {
  background: #f43662;
}

.division-card--under .division-card__bars i:last-child {
  background: #20a8e8;
}

.division-card__legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.division-card__legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #677287;
  font-size: 10px;
  line-height: 1.2;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.legend-dot--active {
  background: #20a8e8;
}

.legend-dot--quota {
  background: #ffe11a;
}

.division-card--over .legend-dot--active {
  background: #f43662;
}

.ams-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 22px;
}

.ams-form,
.settings-card {
  display: grid;
  gap: 14px;
}

.settings-card input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-status {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1fa971;
  min-height: 16px;
}

.ams-form h3 {
  margin: 0;
  color: #15184b;
}

.ams-form label,
.settings-card label {
  display: grid;
  gap: 7px;
  color: #687386;
  font-size: 12px;
}

.letter-preview {
  min-height: 520px;
  padding: 38px;
  background: #fff;
  position: relative;
}

.letter-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 8px solid #0b91cc;
  padding-top: 18px;
}

.letter-preview__head span {
  width: 52px;
  height: 10px;
  background: #ffe11a;
}

.letter-preview h3 {
  margin: 48px 0 24px;
  text-align: center;
}

.letter-preview p {
  color: #4b5563;
  line-height: 1.8;
}

.letter-preview__number {
  margin: 0 0 8px !important;
  font-size: 13px;
  color: #8792a8 !important;
}

@media print {
  body * {
    visibility: hidden;
  }

  #amsLetterPreview,
  #amsLetterPreview * {
    visibility: visible;
  }

  #amsLetterPreview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: auto;
    box-shadow: none;
    border-radius: 0;
    padding: 40px;
  }
}

.letter-stamp {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: 3px solid rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.18);
  padding: 18px 38px;
  font-size: 28px;
  font-weight: 800;
}

.profile-card {
  padding: 24px;
}

.profile-card__summary {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 18px;
}

.profile-card__summary > button {
  margin-left: auto;
}

.profile-card__summary strong,
.profile-card__summary small {
  display: block;
}

.profile-card__summary small {
  color: #8792a8;
}

.profile-tabs {
  display: flex;
  gap: 28px;
  margin: 24px 0;
  border-bottom: 1px solid #edf0f5;
}

.profile-tabs span {
  padding-bottom: 12px;
  color: #8792a8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.berkas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.berkas-list[hidden] {
  display: none;
}

.berkas-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f8fafc;
}

.berkas-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eaf7ff;
  color: #1789cc;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.berkas-item__icon svg {
  width: 17px;
  height: 17px;
}

.berkas-item__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #303447;
}

.profile-tabs .is-active {
  color: #15184b;
  border-bottom: 3px solid #20a8e8;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px;
}

.profile-grid[hidden] {
  display: none;
}

.profile-grid p {
  margin: 0;
  display: grid;
  gap: 5px;
}

.profile-grid span {
  color: #8792a8;
  font-size: 12px;
}

.profile-grid strong {
  color: #303447;
  font-size: 14px;
}

.timeline-list {
  margin-top: 30px;
  display: grid;
  gap: 14px;
}

.timeline-list[hidden] {
  display: none;
}

.timeline-list span {
  position: relative;
  padding-left: 28px;
  color: #8792a8;
  font-size: 13px;
}

.timeline-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9e0eb;
}

.timeline-list .is-done,
.timeline-list .is-active {
  color: #303447;
}

.timeline-list .is-done::before,
.timeline-list .is-active::before {
  background: #20a8e8;
}

@media (max-width: 1100px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    min-height: auto;
  }

  .admin-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard-grid,
  .ams-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .division-grid,
  .participant-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-main {
    padding: 20px 14px;
  }

  .admin-nav,
  .division-grid,
  .participant-list {
    grid-template-columns: 1fr;
  }

  .division-card__body {
    grid-template-columns: minmax(0, 1fr) 50px;
  }

  .division-card__count strong {
    font-size: 30px;
  }

  .division-card__count span {
    font-size: 18px;
  }

  .admin-toolbar {
    flex-direction: column;
  }

  .admin-toolbar input {
    min-width: 0;
    width: 100%;
  }

  .admin-page-head,
  .admin-card__head,
  .admin-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   Halaman Pendaftaran Peserta (Kelengkapan / Status / Berkas /
   Form Rekomendasi / Cetak Sertifikat) -- templates/peserta/pendaftaran.html
   ============================================================ */

.pendaftaran-page {
  background: #f5f7fb;
}

.pendaftaran {
  min-height: 100vh;
}

.pendaftaran__topbar {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px clamp(20px, 4vw, 56px);
  background: #fff;
  border-bottom: 1px solid #eef1f6;
}

.pendaftaran__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.pendaftaran__brand img {
  width: 170px;
  height: auto;
  object-fit: contain;
}

.pendaftaran__brand span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0098d5;
}

.pendaftaran__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}

.pendaftaran__nav a {
  font-size: 15px;
  font-weight: 500;
  color: #252641;
}

.pendaftaran__nav a:hover {
  color: var(--blue-strong);
}

.pendaftaran__bell-wrap {
  position: relative;
  flex: none;
}

.pendaftaran__bell {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #545567;
  background: #f5f7fb;
  border: 0;
  cursor: pointer;
}

.pendaftaran__bell svg {
  width: 18px;
  height: 18px;
}

.pendaftaran__bell-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e6483f;
  border: 2px solid #fff;
}

.pendaftaran__bell-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
  padding: 14px;
  z-index: 1000;
}

.pendaftaran__bell-panel.is-open {
  display: block;
}

.pendaftaran__bell-panel-head {
  font-size: 13px;
  font-weight: 700;
  color: #151828;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef1f6;
}

.pendaftaran__bell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}

.pendaftaran__bell-list li {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #2c3040;
  cursor: pointer;
}

.pendaftaran__bell-list li:hover {
  background: #f5f7fb;
  color: var(--blue-strong);
}

.pendaftaran__bell-list li::before {
  content: '\26A0';
  margin-right: 6px;
  color: #e6483f;
  font-size: 11px;
}

.pendaftaran__bell-empty {
  cursor: default !important;
  color: #8a8fa0 !important;
  text-align: center;
}

.pendaftaran__bell-empty:hover {
  background: none !important;
  color: #8a8fa0 !important;
}

.pendaftaran__bell-empty::before {
  content: '' !important;
  margin: 0 !important;
}

.pendaftaran__body {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 32px clamp(20px, 4vw, 56px) 80px;
  max-width: 1360px;
  margin: 0 auto;
}

/* ---------- Sidebar: selalu terlihat, sticky mengikuti scroll ---------- */
.pendaftaran__sidebar {
  position: sticky;
  top: 16px;
  width: 100%;
  max-height: calc(100vh - 32px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.06);
  padding: 22px 18px;
  overflow-y: auto;
}

.pendaftaran__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pendaftaran__avatar-wrap {
  position: relative;
  flex: none;
  cursor: pointer;
}

.pendaftaran__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #eef1f6;
  display: block;
}

.pendaftaran__avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-strong);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pendaftaran__avatar-edit svg {
  width: 9px;
  height: 9px;
}

.pendaftaran__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #151828;
}

.pendaftaran__email {
  margin: 0;
  font-size: 11px;
  color: #8a8fa0;
  word-break: break-all;
}

.pendaftaran__progress {
  margin-bottom: 20px;
  padding: 13px;
  border-radius: 12px;
  background: #f5f9fd;
  border: 1px solid #e3f0f9;
}

.pendaftaran__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #545567;
  margin-bottom: 8px;
}

.pendaftaran__progress-head strong {
  color: var(--blue-strong);
  font-size: 12.5px;
}

.pendaftaran__progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #e3e6ee;
  overflow: hidden;
}

.pendaftaran__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0098d5, #3aa8e0);
  width: 0%;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pendaftaran__menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pendaftaran__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #151828;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.pendaftaran__menu-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #151828;
  transition: color 0.18s ease;
}

.pendaftaran__menu-item:hover {
  background: #f5f7fb;
}

.pendaftaran__menu-item.is-active {
  background: var(--blue-strong);
  color: #fff;
}

.pendaftaran__menu-item.is-active svg {
  color: #fff;
}

/* ---------- Main content ---------- */
.pendaftaran__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pendaftaran__panel[hidden] {
  display: none;
}

.pendaftaran__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pendaftaran__panel-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #151828;
}

.pendaftaran__panel-head p {
  margin: 0;
  font-size: 13.5px;
  color: #8a8fa0;
}

.pendaftaran__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.05);
  padding: 28px clamp(20px, 3vw, 40px);
}

.pendaftaran__card--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

.pendaftaran__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pendaftaran__card-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #151828;
}

.pendaftaran__step-badge {
  font-size: 12px;
  color: #adb1bf;
}

.pendaftaran__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
}

.pendaftaran__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pendaftaran__field label {
  font-size: 13.5px;
  font-weight: 600;
  color: #151828;
}

.pendaftaran__field input {
  font-family: inherit;
  font-size: 14px;
  color: #151828;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #e3e6ee;
  background: #f9fafc;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.pendaftaran__field input::placeholder {
  color: #adb1bf;
}

.pendaftaran__field input:disabled {
  color: #545567;
  cursor: not-allowed;
}

.pendaftaran__field input:not(:disabled):focus {
  border-color: var(--blue-strong);
  background: #fff;
}

.pendaftaran__field--locked label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a8fa0;
}

.pendaftaran__field--locked label svg {
  width: 13px;
  height: 13px;
}

.institution-ac__wrap {
  position: relative;
}

.institution-ac__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(21, 24, 40, 0.12);
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.institution-ac__panel.is-open {
  display: block;
}

.institution-ac__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-size: 13.5px;
  color: #151828;
  cursor: pointer;
}

.institution-ac__option:hover,
.institution-ac__option.is-active {
  background: #f5f7fa;
}

.institution-ac__option--create {
  color: #0098d5;
  font-weight: 600;
}

.institution-ac__empty {
  padding: 8px 10px;
  font-size: 12.5px;
  color: #8a8da0;
}

.institution-ac__error {
  color: #c0392b;
}

.pendaftaran__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.pendaftaran__btn-primary,
.pendaftaran__btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pendaftaran__btn-primary {
  border: 0;
  background: var(--blue-strong);
  color: #fff;
}

.pendaftaran__btn-primary:hover {
  background: #007bb3;
}

.pendaftaran__btn-outline {
  border: 1.5px solid #e3e6ee;
  background: #fff;
  color: #151828;
}

.pendaftaran__btn-outline:hover {
  border-color: var(--blue-strong);
  color: var(--blue-strong);
}

.pendaftaran__hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff8e1;
  color: #8a6d1f;
  font-size: 13px;
  line-height: 1.6;
}

.pendaftaran__hint svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

/* ---------- Tab: Status (timeline, dipakai ulang gaya dari dashboard) ---------- */
.pendaftaran__timeline {
  display: flex;
  flex-direction: column;
}

.pendaftaran__timeline-item {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 30px;
  padding-left: 4px;
}

.pendaftaran__timeline-item:last-child {
  padding-bottom: 0;
}

.pendaftaran__timeline-item::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 9px;
  width: 2px;
  bottom: -6px;
  background: #e3e6ee;
}

.pendaftaran__timeline-item:last-child::before {
  display: none;
}

.pendaftaran__timeline-item.is-done::before {
  background: var(--blue-strong);
}

.pendaftaran__timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e3e6ee;
  flex: none;
  z-index: 1;
}

.pendaftaran__timeline-item.is-done .pendaftaran__timeline-dot {
  background: var(--blue-strong);
}

.pendaftaran__timeline-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 1px;
}

.pendaftaran__timeline-label {
  font-size: 13px;
  font-style: italic;
  color: #8a8fa0;
}

.pendaftaran__timeline-value {
  font-size: 15px;
  font-weight: 700;
  color: #151828;
}

.pendaftaran__timeline-item:not(.is-done) .pendaftaran__timeline-value {
  color: #adb1bf;
  font-weight: 600;
}

/* ---------- Tab: Berkas (upload PDF only) ---------- */
.pendaftaran__upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* Kartu kiri-kanan (mis. CV & Surat Pengantar) tingginya bisa beda karena
   kartu Surat Pengantar punya dropdown nomor surat di atas dropzone-nya.
   Grid item sudah stretch ke tinggi baris secara default, di sini kartu-nya
   dijadikan flex column supaya dropzone ikut melar mengisi sisa tinggi,
   sehingga bagian bawah kedua kartu tetap sejajar. */
.pendaftaran__upload-grid > div,
.pendaftaran__upload-grid > .pendaftaran__surat-card {
  display: flex;
  flex-direction: column;
}

.pendaftaran__upload-grid .pendaftaran__dropzone {
  flex: 1 1 auto;
}

.pendaftaran__upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pendaftaran__upload-head span {
  font-size: 14px;
  font-weight: 600;
  color: #151828;
}

.pendaftaran__upload-template {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 0;
  background: var(--blue-strong);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.pendaftaran__upload-template svg {
  width: 13px;
  height: 13px;
}

.pendaftaran__upload-template:hover {
  background: #007bb3;
}

.pendaftaran__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  border: 1.5px dashed #9bd3ec;
  border-radius: 14px;
  background: #f5fbfe;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.pendaftaran__dropzone.is-dragover {
  border-color: var(--blue-strong);
  background: #eaf6fc;
}

.pendaftaran__dropzone.has-file {
  border-style: solid;
  border-color: #1a9c5c;
  background: #f2fbf6;
}

.pendaftaran__dropzone svg {
  width: 28px;
  height: 28px;
  color: var(--blue-strong);
}

.pendaftaran__dropzone.has-file svg {
  color: #1a9c5c;
}

.pendaftaran__dropzone-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #151828;
}

.pendaftaran__dropzone-desc {
  font-size: 11.5px;
  color: #8a8fa0;
}

.pendaftaran__dropzone-browse {
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #d8dce6;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #151828;
  cursor: pointer;
}

.pendaftaran__dropzone-browse:hover {
  border-color: var(--blue-strong);
  color: var(--blue-strong);
}

.pendaftaran__dropzone-filename {
  font-size: 12.5px;
  font-weight: 600;
  color: #1a9c5c;
  word-break: break-all;
}

.pendaftaran__dropzone input[type="file"] {
  display: none;
}

/* ---------- Tab: Cetak Sertifikat ---------- */
.pendaftaran__sertifikat-locked,
.pendaftaran__sertifikat-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
}

.pendaftaran__sertifikat-locked svg,
.pendaftaran__sertifikat-ready svg {
  width: 48px;
  height: 48px;
  color: var(--blue-strong);
}

.pendaftaran__sertifikat-locked h4,
.pendaftaran__sertifikat-ready h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #151828;
}

.pendaftaran__sertifikat-locked p,
.pendaftaran__sertifikat-ready p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #8a8fa0;
}

@media (max-width: 980px) {
  .pendaftaran__body {
    grid-template-columns: 1fr;
  }

  .pendaftaran__sidebar {
    position: static;
  }

  .pendaftaran__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .pendaftaran__form-grid,
  .pendaftaran__upload-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Tab Cetak AMS (peserta): pratinjau teks surat -- sama persis dengan style
   .ams-surat-text di css/dashboard.css (sisi admin), supaya tampilan surat
   konsisten di kedua tempat.
   ========================================================================= */

.ams-surat-wrap {
  margin-top: 20px;
}

.ams-surat-text {
  width: 100%;
  min-height: 420px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1.5px solid #e3e6ee;
  background: #fbfbfd;
  color: #151828;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
  resize: vertical;
}

.ams-surat-text:focus {
  border-color: #0098d5;
  outline: none;
}

.ams-pdf-preview {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #e3e6ee;
}

.ams-pdf-preview embed {
  width: 100%;
  height: 640px;
  display: block;
}

/* =========================================================================
   Tab Cetak Nilai (peserta): sengaja PERSIS sama dengan lembar nilai admin
   (.nilai-sheet dkk di css/dashboard.css, lihat templates/mentor/
   cetak-nilai.html) -- class-class di bawah ini port verbatim dari sana
   supaya tampilan yang peserta lihat & unduh sebagai PDF identik dengan
   yang direview admin sebelum dikirim. Dirender oleh js/pendaftaran-nilai.js.
   Terkunci sampai (1) mentor selesai menilai lengkap DAN (2) admin klik
   "Kirim ke Peserta" di halaman Cetak Nilai -- sama pola dua-tahap dengan
   Cetak Sertifikat/AMS.
   ========================================================================= */
.nilai-sheet-wrap {
  display: flex;
  justify-content: center;
  padding: 26px;
  margin-top: 20px;
  background: #eef1f6;
  border-radius: 16px;
  overflow-x: auto;
}

.nilai-sheet {
  width: 100%;
  max-width: 620px;
  flex: none;
  background: #fff;
  padding: 34px 40px 30px;
  font-family: 'Poppins', sans-serif;
  color: #151828;
  box-shadow: 0 10px 40px rgba(17, 24, 39, 0.16);
}

.nilai-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nilai-sheet__head img {
  height: 34px;
}

.nilai-sheet__title {
  text-align: center;
  margin: 6px 0 22px;
}

.nilai-sheet__title h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.nilai-sheet__title p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #4b5468;
}

.nilai-sheet__bar {
  padding: 9px 16px;
  margin: 14px 0 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #0d3b4d 0%, #0097a9 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nilai-sheet__value {
  padding: 10px 16px 2px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #eef1f6;
  margin-bottom: 14px;
}

.nilai-sheet table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12.5px;
}

.nilai-sheet th {
  background: #0097a9;
  color: #fff;
  padding: 10px 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

.nilai-sheet td {
  padding: 11px 8px;
  text-align: center;
  border-bottom: 1px solid #eef1f6;
}

.nilai-sheet tbody tr:nth-child(even) {
  background: #f2fbfc;
}

.nilai-sheet__grand {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 14px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

.nilai-sheet__grand span:last-child {
  color: #0d7c73;
  font-size: 16px;
}

.nilai-sheet__keterangan {
  margin-top: 18px;
  font-size: 11px;
  color: #4b5468;
  line-height: 1.7;
}

.nilai-sheet__catatan {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7f8fa;
  border: 1px solid #eef1f6;
  font-size: 12.5px;
}

.nilai-sheet__catatan strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cert-date {
  margin: 26px 0 0;
  font-size: 14.5px;
  color: #1c2733;
}

@media (max-width: 640px) {
  .nilai-sheet {
    padding: 26px 20px 24px;
  }
}


/* ===== Nomor Surat Pengantar Kampus (dropdown di kartu Surat Pengantar) ===== */
.pendaftaran__surat-dropdown {
  margin-top: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.pendaftaran__surat-dropdown summary {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  color: #151828;
  font-size: 12.5px;
  font-weight: 600;
}

.pendaftaran__surat-dropdown summary::-webkit-details-marker {
  display: none;
}

.pendaftaran__surat-dropdown summary::after {
  content: '⌄';
  flex: none;
  color: #8a8fa0;
  font-size: 17px;
  transition: transform .18s ease;
}

.pendaftaran__surat-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.pendaftaran__surat-dropdown-value {
  margin-left: auto;
  max-width: 52%;
  overflow: hidden;
  color: #0098d5;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pendaftaran__surat-dropdown-body {
  padding: 14px;
  border-top: 1px solid #eef1f6;
  background: #fbfcfe;
}

.pendaftaran__surat-dropdown-body label {
  display: block;
  margin-bottom: 7px;
  color: #2c3040;
  font-size: 11.5px;
  font-weight: 600;
}

.pendaftaran__surat-dropdown-body input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid #dfe4ec;
  border-radius: 9px;
  background: #fff;
  color: #151828;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}

.pendaftaran__surat-dropdown-body input:focus {
  border-color: #0098d5;
}

.pendaftaran__surat-dropdown-body p {
  margin: 7px 0 0;
  color: #8a8fa0;
  font-size: 10.5px;
  line-height: 1.5;
}


/* ===== Surat Pengantar: judul di atas menjadi dropdown nomor surat ===== */
.pendaftaran__surat-dropdown--top {
  margin: 0 0 12px;
}

.pendaftaran__surat-dropdown--top .pendaftaran__surat-summary {
  min-height: 48px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
}

.pendaftaran__surat-card > .pendaftaran__dropzone {
  margin-top: 0;
}

/* =========================================================
   SiMagang v15.10 — participant registration UX refinements
   ========================================================= */
.pendaftaran__edit-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 152, 213, 0.28);
  border-radius: 14px;
  background: rgba(0, 152, 213, 0.07);
  color: #315064;
  font-size: 13px;
}

.pendaftaran__edit-state[hidden] { display: none; }
.pendaftaran__edit-state strong { color: var(--blue-strong); white-space: nowrap; }
.pendaftaran__panel.is-editing .pendaftaran__card {
  outline: 2px solid rgba(0, 152, 213, 0.18);
  box-shadow: 0 8px 30px rgba(0, 152, 213, 0.08);
}
.pendaftaran__panel.is-editing .pendaftaran__field input:not(:disabled) {
  background: #fff;
  border-color: rgba(0, 152, 213, 0.46);
}

.participant-application-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 22, 40, 0.46);
  backdrop-filter: blur(4px);
}
.participant-application-modal__dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.22);
}
.participant-application-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f4f6fa;
  color: #52596c;
  font-size: 22px;
  cursor: pointer;
}
.participant-application-modal__eyebrow {
  margin-bottom: 7px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.participant-application-modal__dialog h2 {
  margin: 0 40px 8px 0;
  color: #151828;
  font-size: 24px;
}
.participant-application-modal__desc {
  margin: 0 0 18px;
  color: #72798c;
  font-size: 13.5px;
  line-height: 1.65;
}
.participant-application-modal__completion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff3f1;
  color: #8f4d47;
  font-size: 12.5px;
}
.participant-application-modal__completion.is-ready {
  background: #ecfaf4;
  color: #286b51;
}
.participant-application-modal__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.participant-application-modal__dates label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #151828;
  font-size: 13px;
  font-weight: 600;
}
.participant-application-modal__dates input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  font: inherit;
  color: #151828;
  background: #fafbfc;
}
.participant-application-modal__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #f7f8fb;
  color: #5b6070;
  font-size: 12.5px;
  line-height: 1.55;
}
.participant-application-modal__terms input { margin-top: 3px; accent-color: var(--blue-strong); }
.participant-application-modal__status {
  min-height: 20px;
  margin-top: 10px;
  color: #c0392b;
  font-size: 12.5px;
}
.participant-application-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.participant-application-modal__actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

@media (max-width: 640px) {
  .participant-application-modal__dialog { padding: 24px 18px; border-radius: 18px; }
  .participant-application-modal__dates { grid-template-columns: 1fr; }
  .participant-application-modal__actions { flex-direction: column-reverse; }
  .participant-application-modal__actions button { width: 100%; }
  .pendaftaran__edit-state { align-items: flex-start; flex-direction: column; gap: 4px; }
}