/* OCL 2026 — final spacing and component refinement. */
:root {
  --ref-radius-sm: var(--ui-radius-control);
  --ref-radius-md: var(--ui-radius-card);
  --ref-radius-lg: var(--ui-radius-card);
  --ref-border: var(--ui-line);
  --ref-shadow: var(--ui-shadow);
  --ref-shadow-hover: var(--ui-shadow-hover);
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

.section { padding-block: clamp(64px, 8vw, 112px) !important; }
.container { width: min(1180px, calc(100% - 40px)) !important; }

.button,
button,
.history-account-link,
.logout-button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.button:hover,
.history-account-link:hover,
.logout-button:hover { transform: translateY(-2px); }
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(215, 25, 32, .24) !important;
  outline-offset: 3px !important;
}

/* Home */
.hero-grid { gap: clamp(28px, 5vw, 72px) !important; align-items: center !important; }
.hero-content { min-width: 0; }
.hero-actions { gap: 12px !important; align-items: stretch !important; }
.hero-actions .button { min-height: 52px; justify-content: center; }

.about-grid,
.organizers-heading,
.faq-layout,
.contact-heading { gap: clamp(28px, 5vw, 64px) !important; }

.about-stat,
.organizers-purpose-card,
.organizer-card,
.sport-card,
.timeline-item,
.timeline-list > li,
.process-card,
.faq-list details,
.contact-card,
.contact-information {
  border-radius: var(--ref-radius-md) !important;
}

.organizers-purpose-card,
.organizer-card,
.sport-card,
.process-card,
.faq-list details,
.contact-card {
  overflow: hidden;
}

.organizers-purpose-card { padding: clamp(22px, 3vw, 34px) !important; }
.organizers-purpose-card h3,
.organizers-purpose-card p { max-width: 72ch; }

.organizers-grid,
.sports-grid,
.process-grid { align-items: stretch !important; }
.organizer-card,
.sport-card,
.process-card { height: 100%; }
.organizer-card { display: flex !important; flex-direction: column; padding: 22px !important; }
.organizer-logo { display: grid !important; place-items: center; min-height: 132px; padding: 14px; }
.organizer-logo img { max-height: 104px; width: auto; object-fit: contain; }
.organizer-card h3 { margin-top: auto !important; padding-top: 16px; line-height: 1.28 !important; }

.sport-card { display: flex !important; flex-direction: column; padding: 20px !important; }
.sport-figure { display: grid !important; place-items: center; min-height: 190px; border-radius: 14px; background: #f7f7f8; overflow: hidden; }
.sport-figure img { width: 100%; height: 190px; object-fit: contain; }
.sport-card h3 { margin: 20px 0 12px !important; line-height: 1.08 !important; }
.sport-card .button { width: 100%; margin-top: auto; justify-content: center; }

.timeline-layout { display: grid; gap: 30px; }
.timeline-roadmap { min-width: 0; }
.timeline-list { align-items: stretch !important; }
.timeline-item,
.timeline-list > li { padding: clamp(20px, 2.5vw, 28px) !important; min-width: 0; }
.timeline-item h3,
.timeline-list > li h3 { line-height: 1.16 !important; margin-bottom: 10px !important; }

.process-grid { gap: 16px !important; }
.process-card { padding: clamp(22px, 3vw, 30px) !important; }
.process-card .button { margin-top: auto; width: 100%; justify-content: center; }

.faq-list { display: grid; gap: 10px; }
.faq-list details { margin: 0 !important; }
.faq-list summary { padding: 20px 22px !important; line-height: 1.35; }
.faq-answer { padding: 0 22px 22px !important; }

.contact-card { min-width: 0; padding: 24px !important; }
.contact-card h3,
.contact-card p,
.contact-card a { overflow-wrap: anywhere; }

/* Login and registration */
.login-card,
.registration-intro-clean,
.form-section,
.edit-mode-notice,
.success-card,
.history-auth-panel,
.history-dashboard {
  border-radius: var(--ref-radius-lg) !important;
  box-shadow: var(--ref-shadow) !important;
}

.registration-main { padding-inline: 20px !important; }
.registration-intro-clean,
.registration-form-wrapper { width: min(1100px, 100%) !important; margin-inline: auto !important; }
.registration-intro-clean { padding: clamp(28px, 5vw, 58px) !important; }
.registration-form-wrapper { display: grid; gap: 18px; }
.form-section { padding: clamp(22px, 4vw, 40px) !important; margin: 0 !important; }
.form-section-heading { gap: 18px !important; align-items: flex-start !important; margin-bottom: 28px !important; }
.form-section-heading h2 { margin: 0 0 6px !important; line-height: 1.12 !important; }
.form-section-heading p { margin: 0 !important; max-width: 68ch; }
.form-grid { gap: 20px !important; align-items: start; }
.form-field { min-width: 0; }
.form-field label,
.form-field > span { display: inline-block; margin-bottom: 9px; font-weight: 700; }
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  width: 100% !important;
  min-height: 54px;
  border-radius: var(--ref-radius-sm) !important;
  border: 1px solid #d9d9de !important;
  background: #fff !important;
  padding: 14px 16px !important;
}
.form-field textarea { min-height: 132px; resize: vertical; }
.form-field small { display: block; margin-top: 8px; line-height: 1.45; color: #656870; }

.participant-card-list { display: grid; gap: 14px; }
.participant-card { border-radius: var(--ref-radius-md) !important; border: 1px solid var(--ref-border) !important; background: #fafafa !important; padding: 20px !important; }

.additional-sports-section { display: grid; gap: 18px; }
.additional-sports-heading { gap: 18px !important; }
.additional-sport-card { border-radius: var(--ref-radius-lg) !important; padding: clamp(20px, 3vw, 32px) !important; box-shadow: 0 10px 26px rgba(20,20,24,.05); }
.additional-sport-card-heading { margin-bottom: 24px !important; padding-bottom: 18px; border-bottom: 1px solid var(--ref-border); }
.remove-sport-button { min-height: 42px; padding: 10px 16px !important; border-radius: 999px !important; }
.extra-fee { width: fit-content; margin: 18px 0; border-radius: 999px !important; padding: 10px 15px !important; }

.extra-document-grid label { align-content: start; }
.extra-document-grid input[type="file"] { min-height: 48px; }

.privacy-information { border-radius: var(--ref-radius-md) !important; border: 1px solid var(--ref-border) !important; background: #fafafa !important; }
.agreement-item { align-items: flex-start !important; gap: 14px !important; border-radius: var(--ref-radius-md) !important; padding: 18px !important; }
.agreement-item input { flex: 0 0 auto; margin-top: 3px; }
.form-submit-area { display: grid; gap: 14px; }
.form-submit-area .button,
#submitRegistration { min-height: 56px; border-radius: var(--ref-radius-sm) !important; }

/* Success and history */
body.success-view .success-card { overflow: hidden; }
body.success-view .success-content { display: grid; gap: 24px; }
body.success-view .success-registration-summary,
body.success-view .success-batch-list { gap: 14px !important; }
body.success-view .success-registration-item,
body.success-view .success-batch-card { border: 1px solid var(--ref-border) !important; border-radius: var(--ref-radius-md) !important; padding: 20px !important; min-width: 0; }
body.success-view .success-registration-item strong,
body.success-view .success-batch-card strong,
body.success-view .success-batch-card code { overflow-wrap: anywhere; }
body.success-view .success-actions { gap: 12px !important; }
body.success-view .success-actions .button { min-height: 52px; justify-content: center; }

body.history-view .history-registration-list { display: grid; gap: 16px; }
body.history-view .history-registration-card { border-radius: var(--ref-radius-lg) !important; border: 1px solid var(--ref-border) !important; box-shadow: 0 10px 26px rgba(20,20,24,.05) !important; }

@media (hover: hover) {
  .organizer-card:hover,
  .sport-card:hover,
  .process-card:hover,
  .contact-card:hover { transform: translateY(-4px); box-shadow: var(--ref-shadow-hover) !important; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1180px) !important; }
  .section { padding-block: 56px !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .hero-content,
  .hero-actions { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; }
  .hero-actions .button { width: 100% !important; max-width: 100% !important; }
  .organizers-grid { gap: 12px !important; }
  .organizer-card { padding: 13px !important; }
  .organizer-logo { min-height: 86px !important; padding: 8px; }
  .organizer-logo img { max-height: 72px; }
  .sports-grid { gap: 14px !important; }
  .sport-card { padding: 16px !important; }
  .sport-figure,.sport-figure img { min-height: 160px; height: 160px; }
  .process-grid { grid-template-columns: 1fr !important; }
  .faq-layout { gap: 28px !important; }
  .contact-card { padding: 20px !important; }
  .registration-main { padding-inline: 12px !important; }
  .registration-account-nav { gap: 7px !important; }
  .registration-account-nav .history-account-link,
  .registration-account-nav .logout-button { padding: 9px 11px !important; font-size: .76rem !important; }
  .form-section { padding: 20px 16px !important; border-radius: 20px !important; }
  .form-section-heading { gap: 12px !important; }
  .form-section-number { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .participant-card { padding: 16px !important; }
  .additional-sport-card { padding: 18px 14px !important; border-radius: 20px !important; }
  .additional-sport-card-heading { align-items: stretch !important; }
  .remove-sport-button { width: 100%; }
  .extra-document-grid label { padding: 12px !important; }
  body.success-view .success-registration-item,
  body.success-view .success-batch-card { padding: 16px !important; }
}

/* =====================================================
   BERANDA OCL 2026
   Semua aturan di bawah dibatasi ke .home-page agar tidak
   merusak formulir, riwayat, dan halaman sukses.
   ===================================================== */

.home-page {
  --ocl-red: #df1821;
  --ocl-red-dark: #a90f16;
  --ocl-ink: #171719;
  --ocl-muted: #65656e;
  --ocl-line: #e5e5e8;
  --ocl-soft: #fff7f7;
}

/* Hero dan tema kembali tampil */
.home-page .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr) !important;
  align-items: center !important;
  gap: clamp(34px, 5vw, 82px) !important;
}

.home-page .hero-visual {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: clamp(500px, 51vw, 660px) !important;
}

.home-page .hero-tagline {
  display: block !important;
  margin-top: 22px !important;
  color: #4f4f57 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem) !important;
  font-weight: 600 !important;
}

.home-page .hero-sport-figure,
.home-page .hero-sport-figure img {
  filter: drop-shadow(0 18px 22px rgba(28, 21, 22, .17)) saturate(1.08) !important;
  opacity: 1 !important;
}

.home-page .theme-section.mascot-section {
  display: block !important;
  position: relative !important;
  overflow: clip !important;
  background:
    radial-gradient(circle at 16% 22%, rgba(223, 24, 33, .09), transparent 28%),
    linear-gradient(135deg, #fff 0%, #fff8f8 100%) !important;
}

.home-page .mascot-grid {
  display: grid !important;
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr) !important;
  align-items: center !important;
  gap: clamp(34px, 6vw, 96px) !important;
}

.home-page .mascot-visual {
  display: grid !important;
  place-items: center !important;
  min-height: 520px !important;
  border-radius: 36px !important;
  background: linear-gradient(145deg, #fff, #f6eeee) !important;
  box-shadow: 0 24px 60px rgba(72, 24, 28, .12) !important;
}

.home-page .mascot-image {
  display: block !important;
  width: min(100%, 470px) !important;
  max-height: 560px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 24px 24px rgba(29, 20, 21, .2)) saturate(1.06) !important;
}

.home-page .mascot-content,
.home-page .mascot-theme-description,
.home-page .mascot-tagline {
  display: block !important;
}

/* UKM penyelenggara */
.home-page .organizers-section {
  overflow: clip !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%) !important;
}

.home-page .organizers-grid,
.home-page .organizers-grid[data-marquee-ready],
.home-page .organizers-grid.ukm-loop-active,
.home-page .organizers-grid:hover {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  transform: none !important;
  animation: none !important;
  overflow: visible !important;
}

.home-page .organizer-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 132px auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 286px !important;
  padding: 26px !important;
  overflow: hidden !important;
  filter: none !important;
  border: 1px solid color-mix(in srgb, var(--card-accent) 24%, #e7e7ea) !important;
  border-top: 5px solid var(--card-accent) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 84% 15%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 30%),
    #fff !important;
  box-shadow: 0 18px 42px rgba(29, 18, 20, .08) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.home-page .organizer-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 26px 54px color-mix(in srgb, var(--card-accent) 16%, transparent) !important;
}

.home-page .organizer-logo {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 112px !important;
  filter: none !important;
  opacity: 1 !important;
  animation: ocl-organizer-float 5s ease-in-out infinite !important;
}

.home-page .organizer-card:nth-child(2n) .organizer-logo { animation-delay: -.9s !important; }
.home-page .organizer-card:nth-child(3n) .organizer-logo { animation-delay: -1.8s !important; }
.home-page .organizer-card:nth-child(4n) .organizer-logo { animation-delay: -2.7s !important; }

.home-page .organizer-logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 160px !important;
  max-height: 104px !important;
  margin-inline: auto !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.home-page .organizer-card h3 {
  color: var(--ocl-ink) !important;
  font-size: 1.08rem !important;
  line-height: 1.25 !important;
}

.home-page .organizer-card p {
  color: var(--ocl-muted) !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}

@keyframes ocl-organizer-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Cabang kompetisi */
.home-page .sports-section {
  background:
    linear-gradient(180deg, #fff 0%, #fffafa 100%) !important;
}

.home-page .sports-heading {
  max-width: 980px !important;
  margin: 0 auto clamp(40px, 6vw, 72px) !important;
  text-align: center !important;
}

.home-page .sports-heading h2 {
  margin: 10px 0 0 !important;
  color: var(--ocl-ink) !important;
  font-size: clamp(2.9rem, 5.2vw, 5.1rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-transform: none !important;
  filter: none !important;
}

.home-page .sports-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.home-page .sport-card {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid #ececee !important;
  border-top: 5px solid var(--sport-accent, var(--ocl-red)) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(45, 23, 25, .08) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.home-page .sport-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 26px 56px rgba(117, 16, 23, .15) !important;
}

.home-page .sport-visual,
.home-page .sport-visual img,
.home-page .sport-figure,
.home-page .sport-figure img {
  filter: drop-shadow(0 16px 20px rgba(25, 21, 22, .15)) saturate(1.12) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Timeline: lepaskan seluruh posisi absolut dari tema lama */
.home-page .timeline-section {
  position: relative !important;
  overflow: clip !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(223, 24, 33, .09), transparent 30%),
    linear-gradient(180deg, #fff 0%, #f8f8fa 100%) !important;
  color: var(--ocl-ink) !important;
}

.home-page .timeline-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 42px !important;
}

.home-page .timeline-intro {
  position: static !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-page .timeline-intro .section-label,
.home-page .timeline-section .section-label {
  color: var(--ocl-red-dark) !important;
}

.home-page .timeline-intro h2 {
  margin: 12px 0 0 !important;
  color: var(--ocl-ink) !important;
  background: none !important;
  font-size: clamp(2.9rem, 5.4vw, 5.2rem) !important;
  font-style: normal !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-transform: none !important;
  -webkit-text-fill-color: var(--ocl-ink) !important;
  filter: none !important;
}

.home-page .timeline-roadmap {
  position: static !important;
  min-height: 0 !important;
}

.home-page .timeline-track {
  display: none !important;
}

.home-page .timeline-list {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home-page .timeline-item,
.home-page .timeline-list > li,
.home-page .timeline-item:nth-child(odd),
.home-page .timeline-item:nth-child(even) {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 205px !important;
  margin: 0 !important;
  padding: 22px !important;
  transform: none !important;
  border: 1px solid var(--ocl-line) !important;
  border-top: 4px solid var(--stage-accent, var(--ocl-red)) !important;
  border-left: 1px solid var(--ocl-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(28, 24, 25, .07) !important;
  color: var(--ocl-ink) !important;
}

.home-page .timeline-item::before,
.home-page .timeline-item::after,
.home-page .timeline-list > li::before,
.home-page .timeline-list > li::after {
  display: none !important;
  content: none !important;
}

.home-page .timeline-marker,
.home-page .timeline-item:nth-child(n) .timeline-marker {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  transform: none !important;
}

.home-page .timeline-icon,
.home-page .timeline-item:nth-child(n) .timeline-icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, var(--stage-accent, var(--ocl-red)), var(--ocl-red-dark)) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 10px 22px rgba(180, 17, 25, .22) !important;
}

.home-page .timeline-number,
.home-page .timeline-item:nth-child(n) .timeline-number {
  position: absolute !important;
  right: -5px !important;
  bottom: -6px !important;
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 23px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  background: var(--ocl-ink) !important;
  color: #fff !important;
  font-size: .68rem !important;
  font-style: normal !important;
  transform: none !important;
}

.home-page .timeline-content,
.home-page .timeline-item:nth-child(n) .timeline-content {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
}

.home-page .timeline-date {
  display: inline-flex !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(223, 24, 33, .14) !important;
  border-radius: 999px !important;
  background: #fff1f2 !important;
  color: var(--ocl-red-dark) !important;
  font-size: .71rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

.home-page .timeline-content h3,
.home-page .timeline-item h3,
.home-page .timeline-list > li h3 {
  margin: 0 0 8px !important;
  color: var(--ocl-ink) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem) !important;
  font-style: normal !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  overflow-wrap: anywhere !important;
}

.home-page .timeline-content p {
  display: block !important;
  margin: 0 !important;
  color: var(--ocl-muted) !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
}

/* Kontak resmi */
.home-page .contact-section {
  position: relative !important;
  overflow: clip !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 255, 255, .16), transparent 26%),
    linear-gradient(135deg, #a90f16 0%, #df1821 58%, #b61118 100%) !important;
  color: #fff !important;
}

.home-page .contact-section .section-label,
.home-page .contact-intro h2,
.home-page .contact-intro > p {
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

.home-page .contact-intro h2 {
  max-width: 850px !important;
  font-size: clamp(2.8rem, 4.9vw, 4.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-transform: none !important;
}

.home-page .social-card {
  min-height: 126px !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 40px rgba(78, 4, 10, .18) !important;
  color: var(--ocl-ink) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.home-page .social-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 26px 52px rgba(78, 4, 10, .26) !important;
}

.home-page .social-copy,
.home-page .social-copy small,
.home-page .social-copy strong,
.home-page .social-action {
  display: block !important;
  color: var(--ocl-ink) !important;
  opacity: 1 !important;
}

.home-page .social-copy small {
  color: var(--ocl-red-dark) !important;
}

.home-page .social-icon {
  filter: none !important;
  opacity: 1 !important;
}

.home-page .contact-card {
  position: relative !important;
  min-height: 330px !important;
  padding: 30px 44% 28px 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-top: 5px solid var(--contact-accent, #ffd15c) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--contact-accent, #ffd15c) 20%, transparent), transparent 34%),
    #fff !important;
  box-shadow: 0 20px 46px rgba(72, 4, 10, .19) !important;
  color: var(--ocl-ink) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.home-page .contact-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 60px rgba(72, 4, 10, .28) !important;
}

.home-page .contact-card h3,
.home-page .contact-card p,
.home-page .contact-card a,
.home-page .contact-card span,
.home-page .contact-card small {
  color: var(--ocl-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

.home-page .contact-card img,
.home-page .contact-photo,
.home-page .contact-person-image {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 1100px) {
  .home-page .hero-grid,
  .home-page .mascot-grid {
    grid-template-columns: 1fr !important;
  }

  .home-page .hero-visual { min-height: 520px !important; }
  .home-page .mascot-visual { min-height: 470px !important; }

  .home-page .organizers-grid,
  .home-page .organizers-grid[data-marquee-ready],
  .home-page .organizers-grid.ukm-loop-active,
  .home-page .sports-grid,
  .home-page .timeline-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .home-page .hero-grid,
  .home-page .mascot-grid,
  .home-page .organizers-grid,
  .home-page .organizers-grid[data-marquee-ready],
  .home-page .organizers-grid.ukm-loop-active,
  .home-page .sports-grid,
  .home-page .timeline-list {
    grid-template-columns: 1fr !important;
  }

  .home-page .hero-visual { min-height: 390px !important; }
  .home-page .mascot-visual { min-height: 390px !important; }
  .home-page .mascot-image { max-height: 420px !important; }

  .home-page .sports-heading h2,
  .home-page .timeline-intro h2 {
    font-size: clamp(2.35rem, 13vw, 3.7rem) !important;
  }

  .home-page .organizer-card {
    min-height: 240px !important;
  }

  .home-page .timeline-item,
  .home-page .timeline-list > li {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .home-page .contact-card {
    min-height: 300px !important;
    padding: 24px 42% 24px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .organizer-logo {
    animation: none !important;
  }
}
/* Perbesar kolom input setiap peserta */
.participant-card-grid input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #171719 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.participant-card-grid input:focus {
  border-color: #df1821 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(223, 24, 33, 0.12) !important;
}

/* Dokumen tim hanya terlihat saat Futsal dipilih */
#teamDocumentField[hidden],
[data-extra-team-document][hidden] {
  display: none !important;
}
/* Card dan tombol unduhan dokumen Futsal */
.extra-document-field {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #f7f7f8;
}

.extra-document-field > label {
  padding: 0 !important;
  background: transparent !important;
}

.extra-document-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #df1821;
  border-radius: 10px;
  color: #df1821;
  background: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.extra-document-download:hover {
  color: #ffffff;
  background: #df1821;
}

#teamDocumentField[hidden],
[data-extra-team-document][hidden] {
  display: none !important;
}
/* Hilangkan card pembungkus belakang formulir */
body.form-page .registration-form-wrapper {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Ringkasan halaman sukses: lebarkan kartu data, bukan wadah halaman. */
body.success-view .success-content {
  display: block !important;
}

body.success-view .success-content-heading,
body.success-view #successRegistrationSummary,
body.success-view .success-actions {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body.success-view #successRegistrationSummary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 26px !important;
}

body.success-view #successRegistrationSummary .success-registration-item {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 126px !important;
  padding: 24px !important;
}

body.success-view #successRegistrationSummary .success-registration-item:first-child {
  grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
  body.success-view #successRegistrationSummary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.success-view #successRegistrationSummary .success-registration-item:first-child {
    grid-column: auto !important;
  }

  body.success-view #successRegistrationSummary .success-registration-item {
    min-height: 104px !important;
    padding: 20px !important;
  }
}
/* =========================================================
   OCL 2026 — UKM CAROUSEL V12
   FINAL CLEAN VERSION
   ========================================================= */


/* Area luar carousel */

body.home-page .organizers-section {
  overflow: hidden !important;
}


body.home-page .organizers-grid {
  --ukm-gap: 18px;

  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding: 20px 0 34px !important;

  overflow: hidden !important;

  animation: none !important;

  transform: none !important;
}


/* =========================================================
   TRACK UTAMA
   ========================================================= */


/*
 * PENTING:
 *
 * Ada dua group IDENTIK.
 *
 * Jadi:
 *
 * GROUP 1
 * CSC -> Embun -> Esports -> Bola
 * -> TUBC -> TVBC -> Riverside
 *
 * langsung dilanjutkan
 *
 * GROUP 2
 * CSC -> Embun -> ...
 *
 * Tanpa area kosong.
 */

body.home-page .ocl-ukm-group-v12 {
  display: flex !important;

  flex-wrap: nowrap !important;

  align-items: stretch !important;

  gap: var(--ukm-gap) !important;

  width: max-content !important;

  margin: 0 !important;

  /*
   * Ini menjadi gap antara Riverside
   * dan CSC berikutnya.
   */
  padding: 0 var(--ukm-gap) 0 0 !important;

  flex-shrink: 0 !important;
}


/* =========================================================
   CARD UKM
   ========================================================= */

body.home-page
.ocl-ukm-group-v12
.organizer-card {

  position: relative !important;

  display: grid !important;

  grid-template-rows:
    225px
    105px !important;

  flex:
    0 0
    330px !important;

  width: 330px !important;

  min-width: 330px !important;

  height: 330px !important;

  min-height: 330px !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(20, 20, 26, 0.11) !important;

  border-top:
    5px solid
    var(--card-accent, #df1821) !important;

  border-radius: 26px !important;

  background: #ffffff !important;

  box-shadow:
    0 16px 38px
    rgba(20, 20, 26, 0.08) !important;

  transform: none !important;

  filter: none !important;
}


/* =========================================================
   AREA LOGO
   ========================================================= */

body.home-page
.ocl-ukm-group-v12
.organizer-logo {

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  height: 225px !important;

  min-height: 225px !important;

  margin: 0 !important;

  padding: 16px !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8f8fa 100%
    ) !important;

  opacity: 1 !important;

  filter: none !important;
}


/*
 * MATIKAN posisi absolute dari CSS lama.
 *
 * Ini adalah penyebab logo tadi turun
 * ke bagian bawah card.
 */

body.home-page
.ocl-ukm-group-v12
.organizer-logo img {

  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  display: block !important;

  width: 170px !important;

  height: 170px !important;

  max-width: 170px !important;

  max-height: 170px !important;

  margin: auto !important;

  object-fit: contain !important;

  object-position:
    center center !important;

  transform-origin:
    center center !important;

  opacity: 1 !important;

  filter: none !important;

  box-shadow: none !important;

  mix-blend-mode:
    normal !important;
}


/* Hilangkan dekorasi lama */

body.home-page
.ocl-ukm-group-v12
.organizer-logo::before,

body.home-page
.ocl-ukm-group-v12
.organizer-logo::after {

  display: none !important;

  content: none !important;
}


/* =========================================================
   UKURAN MASING-MASING LOGO
   ========================================================= */


/* CSC */

body.home-page
.ocl-ukm-group-v12
.logo-csc img {

  transform:
    scale(1.28) !important;
}


/* EMBUN */

body.home-page
.ocl-ukm-group-v12
.logo-embun img {

  transform:
    scale(1.22) !important;
}


/* ESPORTS */

body.home-page
.ocl-ukm-group-v12
.logo-esports img {

  transform:
    scale(1.30) !important;
}


/* UKM BOLA */

body.home-page
.ocl-ukm-group-v12
.logo-bola img {

  transform:
    scale(1.34) !important;
}


/* TUBC */

body.home-page
.ocl-ukm-group-v12
.logo-tubc img {

  transform:
    scale(1.35) !important;
}


/* TVBC */

body.home-page
.ocl-ukm-group-v12
.logo-tvbc img {

  transform:
    scale(1.34) !important;
}


/* RIVERSIDE */

body.home-page
.ocl-ukm-group-v12
.logo-riverside img {

  transform:
    scale(1.28) !important;
}


/* =========================================================
   NAMA UKM
   ========================================================= */

body.home-page
.ocl-ukm-group-v12
.organizer-card > div:last-child {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  height: 105px !important;

  min-height: 105px !important;

  margin: 0 !important;

  padding: 16px 20px !important;

  border-top:
    1px solid
    #e6e6ea !important;

  background:
    #ffffff !important;

  text-align:
    center !important;
}


body.home-page
.ocl-ukm-group-v12
.organizer-card h3 {

  display: block !important;

  margin: 0 !important;

  color: #17171b !important;

  font-size:
    1.15rem !important;

  font-weight:
    850 !important;

  line-height:
    1.2 !important;

  text-align:
    center !important;
}


/*
 * Keterangan UKM tetap dihapus
 * sesuai permintaan.
 */

body.home-page
.ocl-ukm-group-v12
.organizer-card p {

  display:
    none !important;
}


/* =========================================================
   ANIMASI
   ========================================================= */

/*
 * Track terdiri dari:
 *
 * [ GROUP 1 ][ GROUP 2 ]
 *
 * Karena kedua group ukurannya SAMA,
 * -50% tepat sama dengan satu group.
 *
 * Saat animasi restart,
 * posisi visual tidak berubah.
 *
 * Itu yang membuat loop seamless.
 */



/* Jangan berhenti ketika cursor di atas carousel */

body.home-page
.ocl-ukm-track-v12:hover {

  animation-play-state:
    running !important;
}


/* =========================================================
   MOBILE
   ========================================================= */



/* Aksesibilitas */


/* =========================================================
   1. CAROUSEL UKM — LOOP TANPA RUANG KOSONG
   ========================================================= */

body.home-page .organizers-section {
  overflow: hidden !important;
}

body.home-page .organizers-grid,
body.home-page .organizers-grid[data-marquee-ready],
body.home-page .organizers-grid.ukm-loop-active,
body.home-page .organizers-grid:hover {
  --ukm-gap: 18px;

  position: relative !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 18px 0 36px !important;

  overflow: hidden !important;

  transform: none !important;
  animation: none !important;
}


/* Track yang benar-benar bergerak */

body.home-page .organizers-marquee-track {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;

  width: max-content !important;
  gap: var(--ukm-gap) !important;

  animation: oclUkmExactLoop 30s linear infinite !important;
  animation-play-state: running !important;

  will-change: transform;
}


/* Jangan berhenti saat cursor menyentuh carousel */

body.home-page .organizers-marquee-track:hover,
body.home-page .organizers-grid:hover
  .organizers-marquee-track,
body.home-page .organizers-marquee-track:focus-within {
  animation-play-state: running !important;
}


/* Card UKM */

body.home-page
.organizers-marquee-track
.organizer-card {
  position: relative !important;

  display: grid !important;

  grid-template-rows:
    180px
    80px !important;

  flex: 0 0 290px !important;

  width: 290px !important;
  min-width: 290px !important;

  height: 260px !important;
  min-height: 260px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(20, 20, 26, 0.12) !important;
  border-top: 5px solid var(--card-accent, #df1821) !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  box-shadow:
    0 14px 30px rgba(20, 20, 26, 0.08) !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* Clone harus tetap mempunyai tampilan card yang sama */

body.home-page
.organizers-marquee-track
.ukm-clone {
  display: grid !important;
}


/* =========================================================
   2. AREA LOGO UKM
   ========================================================= */
body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  width: 100% !important;

  height: 180px !important;
  min-height: 180px !important;

  margin: 0 !important;
  padding: 14px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  transform: none !important;
}

/* Hilangkan efek ghost / dekorasi logo lama */

body.home-page
.organizers-marquee-track
.organizer-logo::before,

body.home-page
.organizers-marquee-track
.organizer-logo::after {
  display: none !important;
  content: none !important;
}


/*
  File logo UKM punya ruang transparan cukup besar.
  Karena itu ukuran canvas gambar diperbesar,
  kemudian masing-masing logo diberi scale yang sesuai.
*/

body.home-page
.organizers-marquee-track
.organizer-logo img {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  display: block !important;

  width: 170px !important;
  height: 170px !important;

  max-width: 170px !important;
  max-height: 170px !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;

  transform-origin: center center !important;
}

body.home-page
.organizers-marquee-track
.logo-csc img {
  transform: scale(1.42) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-embun img {
  transform: scale(1.28) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-esports img {
  transform: scale(1.42) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-bola img {
  transform: scale(1.50) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-tubc img {
  transform: scale(1.52) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-tvbc img {
  transform: scale(1.48) translateX(0) translateY(0) !important;
}

body.home-page
.organizers-marquee-track
.logo-riverside img {
  transform: scale(1.38) translateX(0) translateY(0) !important;
}

/* Bagian tulisan UKM */

body.home-page
.organizers-marquee-track
.organizer-card > div:last-child {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;

  margin: 0 !important;
  padding: 14px 20px !important;

  border-top: 1px solid #e6e6ea !important;

  background: #ffffff !important;

  text-align: center !important;

  transform: none !important;
}
/*
  JavaScript membuat:
  7 card asli + 7 card clone.

  50% track = satu rangkaian card.
  Setengah gap ditambahkan supaya akhir Riverside
  tepat bertemu kembali dengan CSC tanpa blank.
*/




/* =========================================================
   3. CARD CABOR — FIGUR HARUS TERLIHAT PENUH
   ========================================================= */

body.home-page
.sports-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 24px !important;
}


body.home-page
.sports-grid
.sport-card {
  min-width: 0 !important;

  overflow: hidden !important;

  background: #ffffff !important;
}


body.home-page
.sports-grid
.sport-card
.sport-card-top {
  position: relative !important;

  height: 260px !important;
  min-height: 260px !important;

  margin: 18px 18px 0 !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      180deg,
      #fafafa 0%,
      #f1f2f4 100%
    ) !important;
}


/*
  PENTING:
  modern-theme.css sebelumnya memberi
  transform: translate(-50%, -50%).
  Ini yang membuat figur bergeser dan terpotong.
*/

body.home-page
.sports-grid
.sport-card
.sport-visual {
  position: absolute !important;

  inset: 10px !important;

  display: grid !important;
  place-items: center !important;

  width: auto !important;
  height: auto !important;

  overflow: hidden !important;

  background: transparent !important;

  transform: none !important;

  filter: none !important;
  box-shadow: none !important;
}


body.home-page
.sports-grid
.sport-card
.sport-figure {

  position: static !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  filter: none !important;

  transform: scale(1.06) !important;
  transform-origin: center !important;
}


/* Esports punya figur yang relatif ramping */

body.home-page
.sport-card[data-sport-id="esports"]
.sport-figure {
  transform: scale(1.16) !important;
}


/* Futsal */

body.home-page
.sport-card[data-sport-id="futsal"]
.sport-figure {
  transform: scale(1.10) !important;
}


/* Softball */

body.home-page
.sport-card[data-sport-id="softball"]
.sport-figure {
  transform: scale(1.08) !important;
}


/* Volleyball */

body.home-page
.sport-card[data-sport-id="volleyball"]
.sport-figure {
  transform: scale(1.08) !important;
}


/* Badminton */

body.home-page
.sport-card[data-sport-id="badminton"]
.sport-figure {
  transform: scale(1.08) !important;
}


/* Nomor cabor selalu di atas gambar */

body.home-page
.sports-grid
.sport-number {
  position: relative !important;
  z-index: 5 !important;
}


/* =========================================================
   4. TIMELINE — URUTAN 01, 02, 03 HARUS JELAS
   ========================================================= */

body.home-page
.timeline-section {
  position: relative !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff8f8 100%
    ) !important;
}


body.home-page
.timeline-roadmap {
  position: relative !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;
}


/* Jalur SVG lama tidak dipakai */

body.home-page
.timeline-track {
  display: none !important;
}


body.home-page
#timelineList {
  counter-reset: ocl-timeline-step;

  position: static !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 22px !important;

  width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  overflow: visible !important;
}


/* Setiap card mendapatkan nomor otomatis */

body.home-page
#timelineList
.timeline-item {

  --stage-color: #df1821;

  counter-increment:
    ocl-timeline-step;

  position: relative !important;

  display: grid !important;

  grid-template-columns:
    64px
    minmax(0, 1fr) !important;

  align-items: start !important;

  gap: 18px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 230px !important;

  margin: 0 !important;
  padding: 26px !important;

  overflow: hidden !important;

  border:
    1px solid
    #e4e4e8 !important;

  border-top:
    5px solid
    var(--stage-color) !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  box-shadow:
    0 14px 34px
    rgba(18, 24, 40, 0.08) !important;

  color: #17171b !important;

  transform: none !important;
  opacity: 1 !important;
}


/* Nomor besar 01, 02, 03 ... */

body.home-page
#timelineList
.timeline-item::before {

  content:
    counter(
      ocl-timeline-step,
      decimal-leading-zero
    ) !important;

  display: grid !important;
  place-items: center !important;

  width: 58px !important;
  height: 58px !important;

  border-radius: 18px !important;

  background:
    var(--stage-color) !important;

  color: #ffffff !important;

  font-size: 1.15rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 10px 20px
    color-mix(
      in srgb,
      var(--stage-color) 22%,
      transparent
    ) !important;
}


/*
  Marker lama disembunyikan.
  Nomor sekarang menggunakan ::before,
  sehingga tidak lagi bergantung pada timeline-icon.
*/

body.home-page
#timelineList
.timeline-marker {
  display: none !important;
}


/* Warna setiap tahap */

body.home-page
#timelineList
.timeline-item:nth-child(1) {
  --stage-color: #df1821;
}

body.home-page
#timelineList
.timeline-item:nth-child(2) {
  --stage-color: #3367d6;
}

body.home-page
#timelineList
.timeline-item:nth-child(3) {
  --stage-color: #f2a91d;
}

body.home-page
#timelineList
.timeline-item:nth-child(4) {
  --stage-color: #00a7b5;
}

body.home-page
#timelineList
.timeline-item:nth-child(5) {
  --stage-color: #ef6535;
}

body.home-page
#timelineList
.timeline-item:nth-child(6) {
  --stage-color: #6141c5;
}

body.home-page
#timelineList
.timeline-item:nth-child(7) {
  --stage-color: #17171b;
}


/* Isi timeline */

body.home-page
#timelineList
.timeline-content {
  position: static !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  opacity: 1 !important;
  transform: none !important;
}


body.home-page
#timelineList
.timeline-date {
  display: inline-flex !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 0 0 14px !important;
  padding: 7px 11px !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--stage-color) 22%,
      #ffffff
    ) !important;

  border-radius: 999px !important;

  background:
    color-mix(
      in srgb,
      var(--stage-color) 8%,
      #ffffff
    ) !important;

  color:
    var(--stage-color) !important;

  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  white-space: normal !important;
}


body.home-page
#timelineList
.timeline-content h3 {
  margin: 0 0 9px !important;

  color: #17171b !important;

  font-size:
    clamp(
      1.35rem,
      1.8vw,
      1.75rem
    ) !important;

  font-weight: 850 !important;
  line-height: 1.1 !important;
}


body.home-page
#timelineList
.timeline-content p {
  display: block !important;

  margin: 0 !important;

  color: #62626b !important;

  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}


/* Card tahap terakhir di tengah desktop */

@media (min-width: 1061px) {

  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: 2 !important;
  }

}


/* =========================================================
   5. REMINDER TIMELINE
   ========================================================= */

body.home-page
.timeline-footer {
  display: grid !important;

  justify-items: center !important;

  gap: 22px !important;

  margin-top: 32px !important;
}


body.home-page
.timeline-reminder {
  display: grid !important;

  grid-template-columns:
    58px
    minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 20px !important;

  width:
    min(
      100%,
      1000px
    ) !important;

  margin: 0 auto !important;

  padding: 24px 28px !important;

  border:
    1px solid
    #dedee3 !important;

  border-radius: 22px !important;

  background: #ffffff !important;

  box-shadow:
    0 14px 34px
    rgba(20, 20, 26, 0.08) !important;

  color: #252529 !important;
}


body.home-page
.timeline-reminder > span {
  display: grid !important;
  place-items: center !important;

  width: 54px !important;
  height: 54px !important;

  border-radius: 50% !important;

  background: #ffbd43 !important;

  color: #171717 !important;

  font-size: 1.3rem !important;
  font-weight: 900 !important;
}


body.home-page
.timeline-reminder p {
  margin: 0 !important;

  color: #29292f !important;

  font-size: 1rem !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;

  opacity: 1 !important;
}


/* =========================================================
   6. TABLET
   ========================================================= */

@media (max-width: 1100px) {

  body.home-page
  .sports-grid,

  body.home-page
  #timelineList {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }


  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: auto !important;
  }

}


/* =========================================================
   7. MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  .sports-grid,

  body.home-page
  #timelineList {
    grid-template-columns:
      1fr !important;

    gap: 16px !important;
  }


  /* UKM */

  body.home-page
  .organizers-grid {
    --ukm-gap: 14px;
  }


body.home-page
.organizers-marquee-track
.organizer-card {
  flex-basis: 290px !important;

  width: 290px !important;
  min-width: 290px !important;

  grid-template-rows:
    205px
    minmax(100px, auto) !important;

  min-height: 305px !important;
}


  body.home-page
  .organizers-marquee-track
  .organizer-logo {
    height: 205px !important;
    min-height: 205px !important;
  }


  body.home-page
  .organizers-marquee-track
  .organizer-logo img {
    width: 170px !important;
    height: 170px !important;
  }


  body.home-page
  .organizers-marquee-track {
    animation-duration:
      32s !important;
  }


  /* Cabor */

  body.home-page
  .sports-grid
  .sport-card
  .sport-card-top {
    height: 225px !important;
    min-height: 225px !important;

    margin: 12px 12px 0 !important;
  }


  body.home-page
  .sports-grid
  .sport-card
  .sport-figure {
    transform:
      scale(1.03) !important;
  }


  /* Timeline */

  body.home-page
  #timelineList
  .timeline-item {
    grid-template-columns:
      52px
      minmax(0, 1fr) !important;

    min-height: 0 !important;

    gap: 14px !important;

    padding: 20px !important;

    border-radius: 20px !important;
  }


  body.home-page
  #timelineList
  .timeline-item::before {
    width: 48px !important;
    height: 48px !important;

    border-radius: 14px !important;

    font-size: 0.95rem !important;
  }


  body.home-page
  .timeline-reminder {
    grid-template-columns:
      48px
      minmax(0, 1fr) !important;

    gap: 14px !important;

    padding: 18px !important;
  }


  body.home-page
  .timeline-reminder > span {
    width: 44px !important;
    height: 44px !important;
  }

}


/* Aksesibilitas */

@media (prefers-reduced-motion: reduce) {

  body.home-page
  .organizers-marquee-track {
    animation: none !important;
  }

}
/* =========================================================
   OCL 2026 — UKM CAROUSEL FINAL V13
   Satu track + 7 card asli + 7 clone
   ========================================================= */

body.home-page .organizers-section {
  overflow: hidden !important;
}

body.home-page .organizers-grid,
body.home-page .organizers-grid[data-marquee-ready="true"],
body.home-page .organizers-grid.ukm-loop-active {
  --ukm-gap: 20px;

  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 20px 0 36px !important;

  overflow: hidden !important;

  animation: none !important;
  transform: none !important;
}


/* TRACK */

body.home-page .organizers-marquee-track {
  display: flex !important;

  flex-wrap: nowrap !important;
  align-items: stretch !important;

  width: max-content !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: var(--ukm-gap) !important;

  animation:
    oclUkmFinalLoop
    36s
    linear
    infinite !important;

  animation-play-state: running !important;

  will-change: transform !important;
}


/* CARD */

body.home-page
.organizers-marquee-track
.organizer-card {
  position: relative !important;

  display: grid !important;

  grid-template-rows:
    230px
    100px !important;

  flex: 0 0 330px !important;

  width: 330px !important;
  min-width: 330px !important;

  height: 330px !important;
  min-height: 330px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(20, 20, 26, 0.12) !important;

  border-top:
    5px solid
    var(--card-accent, #df1821) !important;

  border-radius: 26px !important;

  background: #ffffff !important;

  box-shadow:
    0 16px 38px
    rgba(20, 20, 26, 0.08) !important;

  transform: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   AREA LOGO — CENTER BENAR
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-logo {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 230px !important;
  min-height: 230px !important;

  margin: 0 !important;
  padding: 16px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  opacity: 1 !important;

  transform: none !important;
}


/*
   Ini penting.
   Mematikan posisi absolute/top/left dari CSS lama.
*/

body.home-page
.organizers-marquee-track
.organizer-logo img {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  display: block !important;

  width: 175px !important;
  height: 175px !important;

  max-width: 175px !important;
  max-height: 175px !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;

  filter: none !important;
  box-shadow: none !important;

  mix-blend-mode: normal !important;

  transform-origin: center center !important;
}


/* Tidak ada ghost/background logo */

body.home-page
.organizers-marquee-track
.organizer-logo::before,

body.home-page
.organizers-marquee-track
.organizer-logo::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   PENYESUAIAN UKURAN LOGO
   ========================================================= */

body.home-page
.organizers-marquee-track
.logo-csc img {
  transform: scale(1.25) !important;
}

body.home-page
.organizers-marquee-track
.logo-embun img {
  transform: scale(1.15) !important;
}

body.home-page
.organizers-marquee-track
.logo-esports img {
  transform: scale(1.28) !important;
}

body.home-page
.organizers-marquee-track
.logo-bola img {
  transform: scale(1.32) !important;
}

body.home-page
.organizers-marquee-track
.logo-tubc img {
  transform: scale(1.32) !important;
}

body.home-page
.organizers-marquee-track
.logo-tvbc img {
  transform: scale(1.30) !important;
}

body.home-page
.organizers-marquee-track
.logo-riverside img {
  transform: scale(1.23) !important;
}


/* =========================================================
   NAMA UKM
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card > div:last-child {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 100px !important;
  min-height: 100px !important;

  margin: 0 !important;

  padding: 16px 20px !important;

  border-top:
    1px solid #e6e6ea !important;

  background: #ffffff !important;

  text-align: center !important;
}


body.home-page
.organizers-marquee-track
.organizer-card h3 {
  position: static !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto !important;
  padding: 0 !important;

  color: #17171b !important;

  font-size: 1.12rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;

  text-align: center !important;

  transform: none !important;
}

/* Keterangan UKM tetap dihapus */

body.home-page
.organizers-marquee-track
.organizer-card p {
  display: none !important;
}


/* =========================================================
   LOOP SEAMLESS
   ========================================================= */

/*
   Track asli sudah memiliki:

   7 card asli + 7 clone.

   Jarak card pertama ke clone pertama adalah:
   setengah track + setengah gap.

   Karena itu rumus ini harus dipertahankan.
*/

@keyframes oclUkmFinalLoop {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        calc(
          -50% -
          (var(--ukm-gap) / 2)
        ),
        0,
        0
      );
  }
}


/* Carousel jangan berhenti ketika cursor menyentuhnya */

body.home-page
.organizers-marquee-track:hover,

body.home-page
.organizers-grid:hover
.organizers-marquee-track {
  animation-play-state: running !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  .organizers-marquee-track
  .organizer-card {
    flex-basis: 245px !important;

    width: 245px !important;
    min-width: 245px !important;

    height: 230px !important;
    min-height: 230px !important;

    grid-template-rows:
      155px
      75px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-logo {
    height: 155px !important;
    min-height: 155px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-logo img {
    width: 115px !important;
    height: 115px !important;

    max-width: 115px !important;
    max-height: 115px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-info {
    height: 75px !important;
    min-height: 75px !important;

    padding: 8px 14px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-info h3 {
    font-size: 0.92rem !important;
  }
}
/* =========================================================
   OCL UKM — FINAL CENTER FIX V15
   Jangan tambahkan aturan UKM lagi setelah blok ini
   ========================================================= */

/* CARD */
body.home-page
.organizers-marquee-track
.organizer-card {
  display: grid !important;
  grid-template-rows: 230px 100px !important;

  padding: 0 !important;
}


/* =========================================================
   AREA LOGO
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card
> .organizer-logo {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;

  margin: 0 !important;
  padding: 20px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  transform: none !important;
}


/* GAMBAR LOGO */
body.home-page
.organizers-marquee-track
.organizer-card
> .organizer-logo
> img {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  display: block !important;

  width: 170px !important;
  height: 170px !important;

  max-width: 170px !important;
  max-height: 170px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: none !important;
  transform-origin: center center !important;

  filter: none !important;
  opacity: 1 !important;
}


/* =========================================================
   PENYESUAIAN UKURAN LOGO
   HANYA SCALE — POSISI TETAP CENTER
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-csc
> img {
  transform: scale(1.20) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-embun
> img {
  transform: scale(1.15) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-esports
> img {
  transform: scale(1.20) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-bola
> img {
  transform: scale(1.22) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-tubc
> img {
  transform: scale(1.22) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-tvbc
> img {
  transform: scale(1.22) !important;
}

body.home-page
.organizers-marquee-track
.organizer-card
> .logo-riverside
> img {
  transform: scale(1.20) !important;
}


/* =========================================================
   AREA NAMA UKM
   ========================================================= */

/*
   Struktur HTML-mu memang:
   <article class="organizer-card">

     <div class="organizer-logo">...</div>

     <div>
       <h3>Nama UKM</h3>
       <p>...</p>
     </div>

   </article>

   Jadi div kedua ini kita center secara eksplisit.
*/

body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo) {
  position: static !important;

  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;

  margin: 0 !important;
  padding: 12px 20px !important;

  border-top: 1px solid #e6e6ea !important;

  background: #ffffff !important;

  text-align: center !important;

  transform: none !important;
}


/* NAMA */
body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo)
> h3 {
  position: static !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17171b !important;

  font-size: 1.12rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;

  text-align: center !important;

  transform: none !important;
}


/* KETERANGAN TETAP DIHAPUS */
body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo)
> p {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  .organizers-marquee-track
  .organizer-card {
    grid-template-rows: 200px 95px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-card
  > .organizer-logo {
    height: 200px !important;
    min-height: 200px !important;

    padding: 16px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-card
  > .organizer-logo
  > img {
    width: 145px !important;
    height: 145px !important;

    max-width: 145px !important;
    max-height: 145px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-card
  > div:not(.organizer-logo) {
    height: 95px !important;
    min-height: 95px !important;

    padding: 10px 16px !important;
  }

}
/* =========================================================
   UKM CARD ALIGNMENT — FINAL
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card {
  grid-template-rows: 230px 100px !important;
}


/* AREA LOGO */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  height: 230px !important;

  margin: 0 !important;
  padding: 18px !important;

  transform: none !important;
}


body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo img {
  position: static !important;

  display: block !important;

  width: 135px !important;
  height: 135px !important;

  max-width: 135px !important;
  max-height: 135px !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  filter: none !important;
  opacity: 1 !important;

  transform-origin: center center !important;
}

/* AREA NAMA */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info {
  position: static !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 80px !important;
  min-height: 80px !important;

  margin: 0 !important;
  padding: 10px 16px !important;

  border-top: 1px solid #e6e6ea !important;

  background: #ffffff !important;

  text-align: center !important;
}

/* NAMA UKM */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info h3 {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;

  text-align: center !important;
}

/* DESKRIPSI TETAP DIHILANGKAN */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info p {
  display: none !important;
}
/* =========================================================
   OCL UKM CARD SIZE FINAL V18
   ========================================================= */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card {
  display: grid !important;
  grid-template-rows: 180px 80px !important;

  flex: 0 0 290px !important;

  width: 290px !important;
  min-width: 290px !important;
  max-width: 290px !important;

  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 24px !important;

  background: #ffffff !important;
}


/* AREA LOGO */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card
.organizer-logo {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;

  margin: 0 !important;
  padding: 14px !important;

  overflow: hidden !important;

  background: #ffffff !important;
}


/* GAMBAR LOGO */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card
.organizer-logo img {
  position: static !important;

  display: block !important;

  width: 130px !important;
  height: 130px !important;

  max-width: 130px !important;
  max-height: 130px !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform-origin: center center !important;

  filter: none !important;
  opacity: 1 !important;
}


/* AREA NAMA */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card
.organizer-info {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;

  margin: 0 !important;
  padding: 10px 16px !important;

  border-top: 1px solid #e5e5e8 !important;

  background: #ffffff !important;

  text-align: center !important;
}


/* NAMA UKM */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card
.organizer-info h3 {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;

  text-align: center !important;
}


/* DESKRIPSI TETAP HILANG */

body.home-page
.organizers-grid
.organizers-marquee-track
article.organizer-card
.organizer-info p {
  display: none !important;
}


/* UKURAN LOGO INDIVIDUAL */

body.home-page .logo-csc img {
  transform: scale(1.12) !important;
}

body.home-page .logo-embun img {
  transform: scale(1.08) !important;
}

body.home-page .logo-esports img {
  transform: scale(1.12) !important;
}

body.home-page .logo-bola img {
  transform: scale(1.16) !important;
}

body.home-page .logo-tubc img {
  transform: scale(1.16) !important;
}

body.home-page .logo-tvbc img {
  transform: scale(1.16) !important;
}

body.home-page .logo-riverside img {
  transform: scale(1.12) !important;
}


/* MOBILE */

@media (max-width: 700px) {

  body.home-page
  .organizers-grid
  .organizers-marquee-track
  article.organizer-card {
    grid-template-rows: 155px 70px !important;

    flex-basis: 245px !important;

    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;

    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
  }


  body.home-page
  .organizers-grid
  .organizers-marquee-track
  article.organizer-card
  .organizer-logo {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
  }


  body.home-page
  .organizers-grid
  .organizers-marquee-track
  article.organizer-card
  .organizer-logo img {
    width: 110px !important;
    height: 110px !important;

    max-width: 110px !important;
    max-height: 110px !important;
  }


  body.home-page
  .organizers-grid
  .organizers-marquee-track
  article.organizer-card
  .organizer-info {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

}
/* =========================================================
   UKM CONTENT POSITION FIX
   HANYA POSISI — TIDAK MENGUBAH UKURAN CARD
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card {
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 24px !important;
}


/* AREA LOGO */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo {
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  transform: none !important;
}


/* LOGO */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo img {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: block !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform-origin: center center !important;
}


/* AREA NAMA */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info {
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 20px !important;

  border-top: none !important;

  background: transparent !important;

  text-align: center !important;

  transform: none !important;
}


/* NAMA UKM */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info h3 {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
}


/* KETERANGAN TETAP HILANG */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info p {
  display: none !important;
}
/* =========================================================
   UKM FINAL FIX — LOGO LEBIH BESAR, GARIS DIHAPUS,
   NAMA UKM NAIK KE ATAS
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;
}


/* =========================
   AREA LOGO
   ========================= */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo {
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: none !important;
  box-shadow: none !important;
}


body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo::before,

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo::after {
  display: none !important;
  content: none !important;
}


/* LOGO DIPERBESAR */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo img {
  position: static !important;

  display: block !important;

  width: 165px !important;
  height: 165px !important;

  max-width: 165px !important;
  max-height: 165px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform-origin: center center !important;
}


/* SKALA PER LOGO */

body.home-page .logo-csc img {
  transform: scale(1.18) !important;
}

body.home-page .logo-embun img {
  transform: scale(1.14) !important;
}

body.home-page .logo-esports img {
  transform: scale(1.18) !important;
}

body.home-page .logo-bola img {
  transform: scale(1.20) !important;
}

body.home-page .logo-tubc img {
  transform: scale(1.20) !important;
}

body.home-page .logo-tvbc img {
  transform: scale(1.20) !important;
}

body.home-page .logo-riverside img {
  transform: scale(1.18) !important;
}


/* =========================
   AREA NAMA UKM
   ========================= */

/* aman untuk organizer-info */
body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info,

/* fallback kalau ada card yang belum pakai organizer-info */
body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo) {
  position: static !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  margin-top: -6px !important;

  padding: 0 18px !important;

  background: transparent !important;

  border: none !important;
  border-top: none !important;
  box-shadow: none !important;

  text-align: center !important;

  transform: none !important;
}


/* hilangkan garis yang muncul dari pseudo element lama */
body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info::before,
body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info::after,

body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo)::before,
body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo)::after {
  display: none !important;
  content: none !important;
}


/* NAMA UKM NAIK DAN TETAP CENTER */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info h3,

body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo) h3 {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17171b !important;

  font-size: 1.02rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;

  text-align: center !important;

  transform: translateY(-4px) !important;
}


/* DESKRIPSI TETAP HILANG */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-info p,

body.home-page
.organizers-marquee-track
.organizer-card
> div:not(.organizer-logo) p {
  display: none !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {
  body.home-page
  .organizers-marquee-track
  .organizer-card
  .organizer-logo img {
    width: 138px !important;
    height: 138px !important;

    max-width: 138px !important;
    max-height: 138px !important;
  }

  body.home-page
  .organizers-marquee-track
  .organizer-card
  .organizer-info h3,

  body.home-page
  .organizers-marquee-track
  .organizer-card
  > div:not(.organizer-logo) h3 {
    font-size: 0.96rem !important;
  }
}
/* =========================================================
   UKM LOGO +30% SIZE
   ========================================================= */

body.home-page
.organizers-marquee-track
.organizer-card
.organizer-logo img {
  width: 215px !important;
  height: 215px !important;

  max-width: 215px !important;
  max-height: 215px !important;
}


/* MOBILE */
@media (max-width: 700px) {
  body.home-page
  .organizers-marquee-track
  .organizer-card
  .organizer-logo img {
    width: 180px !important;
    height: 180px !important;

    max-width: 180px !important;
    max-height: 180px !important;
  }
}
/* =========================================================
   OCL 2026 — SPORT FIGURE FINAL ALIGNMENT V22
   Hanya merapikan figur cabor
   ========================================================= */


/* AREA GAMBAR SEMUA CABOR */

body.home-page
.sports-grid
.sport-card
.sport-card-top {
  position: relative !important;

  height: 300px !important;
  min-height: 300px !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #f8f8f9 !important;
}


/* CONTAINER FIGUR */

body.home-page
.sports-grid
.sport-card
.sport-visual {
  position: absolute !important;

  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;

  width: auto !important;
  height: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  transform: none !important;
}


/* DASAR SEMUA FIGUR */

body.home-page
.sports-grid
.sport-card
.sport-figure {
  position: static !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform-origin: center center !important;

  filter: none !important;
}


/* =========================================================
   01 — BADMINTON
   Figurnya melebar, jadi sedikit diperkecil
   ========================================================= */

body.home-page
.sport-card[data-sport-id="badminton"]
.sport-figure {
  transform:
    translateY(8px)
    scale(0.88) !important;
}


/* =========================================================
   02 — ESPORTS
   Figurnya tinggi, turunkan sedikit
   ========================================================= */

body.home-page
.sport-card[data-sport-id="esports"]
.sport-figure {
  transform:
    translateY(10px)
    scale(0.86) !important;
}


/* =========================================================
   03 — FUTSAL
   Supaya kepala dan bola tidak terlalu mepet
   ========================================================= */

body.home-page
.sport-card[data-sport-id="futsal"]
.sport-figure {
  transform:
    translateY(5px)
    scale(0.89) !important;
}


/* =========================================================
   04 — SOFTBALL
   ========================================================= */

body.home-page
.sport-card[data-sport-id="softball"]
.sport-figure {
  transform:
    translateY(7px)
    scale(0.88) !important;
}


/* =========================================================
   05 — VOLLEYBALL
   ========================================================= */

body.home-page
.sport-card[data-sport-id="volleyball"]
.sport-figure {
  transform:
    translateY(7px)
    scale(0.88) !important;
}


/* NOMOR 01, 02, 03 TETAP DI DEPAN */

body.home-page
.sports-grid
.sport-number {
  position: absolute !important;

  top: 14px !important;
  left: 14px !important;

  z-index: 10 !important;
}


/* BADGE ESPORTS / MOBILE LEGENDS */

body.home-page
.sport-card[data-sport-id="esports"]
.sport-badge,

body.home-page
.sport-card[data-sport-id="esports"]
.sport-game-badge {
  position: absolute !important;

  left: 50% !important;
  bottom: 12px !important;

  z-index: 10 !important;

  transform: translateX(-50%) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  .sports-grid
  .sport-card
  .sport-card-top {
    height: 240px !important;
    min-height: 240px !important;
  }


  body.home-page
  .sport-card[data-sport-id="badminton"]
  .sport-figure {
    transform:
      translateY(5px)
      scale(0.86) !important;
  }


  body.home-page
  .sport-card[data-sport-id="esports"]
  .sport-figure {
    transform:
      translateY(7px)
      scale(0.83) !important;
  }


  body.home-page
  .sport-card[data-sport-id="futsal"]
  .sport-figure {
    transform:
      translateY(4px)
      scale(0.87) !important;
  }


  body.home-page
  .sport-card[data-sport-id="softball"]
  .sport-figure,
  
  body.home-page
  .sport-card[data-sport-id="volleyball"]
  .sport-figure {
    transform:
      translateY(5px)
      scale(0.86) !important;
  }

}
/* =========================================================
   OCL 2026 — TIMELINE FINAL CLEAN FIX V23
   ========================================================= */

/* GRID UTAMA TIMELINE */
body.home-page
#timelineList {
  counter-reset: ocl-step;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  gap: 24px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  list-style: none !important;
}


/* =========================================================
   CARD TIMELINE
   ========================================================= */

body.home-page
#timelineList
.timeline-item {
  --stage-color: #df1821;

  counter-increment: ocl-step;

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: grid !important;

  grid-template-columns:
    58px
    minmax(0, 1fr) !important;

  align-items: start !important;

  column-gap: 18px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 540px !important;
  min-height: 540px !important;
  max-height: 540px !important;

  margin: 0 !important;
  padding: 26px !important;

  align-self: stretch !important;

  overflow: hidden !important;

  border: 1px solid #e3e3e8 !important;
  border-top: 5px solid var(--stage-color) !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  box-shadow:
    0 14px 34px
    rgba(18, 24, 40, 0.08) !important;

  transform: none !important;

  opacity: 1 !important;
}
/* HAPUS POSISI STAGGER/ZIG-ZAG DARI CSS LAMA */

body.home-page
#timelineList
.timeline-item:nth-child(n) {
  top: auto !important;
  bottom: auto !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  transform: none !important;
}


/* =========================================================
   NOMOR 01 / 02 / 03
   ========================================================= */

body.home-page
#timelineList
.timeline-item::before {
  content: counter(ocl-step, decimal-leading-zero);

  display: grid !important;
  place-items: center !important;

  width: 56px !important;
  height: 56px !important;

  border-radius: 16px !important;

  background: var(--stage-color) !important;

  color: #ffffff !important;

  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}


/* Marker lama jangan ikut mengambil ruang */
body.home-page
#timelineList
.timeline-marker,

body.home-page
#timelineList
.timeline-icon {
  display: none !important;
}


/* =========================================================
   AREA ISI
   Ini bagian paling penting untuk memperbaiki teks vertikal
   ========================================================= */

body.home-page
#timelineList
.timeline-content {
  position: static !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  transform: none !important;
  opacity: 1 !important;
}


/* =========================================================
   TANGGAL
   ========================================================= */

body.home-page
#timelineList
.timeline-date {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: max-content !important;
  max-width: 100% !important;

  margin: 0 0 16px !important;
  padding: 8px 13px !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--stage-color) 25%,
      #ffffff
    ) !important;

  border-radius: 999px !important;

  background:
    color-mix(
      in srgb,
      var(--stage-color) 8%,
      #ffffff
    ) !important;

  color: var(--stage-color) !important;

  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* =========================================================
   JUDUL
   ========================================================= */

body.home-page
#timelineList
.timeline-content h3 {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 0 10px !important;
  padding: 0 !important;

  color: #17171b !important;

  font-size: 1.55rem !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;

  text-align: left !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* =========================================================
   DESKRIPSI
   ========================================================= */

body.home-page
#timelineList
.timeline-content p {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #62626b !important;

  font-size: 0.98rem !important;
  line-height: 1.55 !important;

  text-align: left !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* =========================================================
   WARNA PER TAHAP
   ========================================================= */

body.home-page
#timelineList
.timeline-item:nth-child(1) {
  --stage-color: #df1821;
}

body.home-page
#timelineList
.timeline-item:nth-child(2) {
  --stage-color: #3367d6;
}

body.home-page
#timelineList
.timeline-item:nth-child(3) {
  --stage-color: #f2a91d;
}

body.home-page
#timelineList
.timeline-item:nth-child(4) {
  --stage-color: #00a7b5;
}

body.home-page
#timelineList
.timeline-item:nth-child(5) {
  --stage-color: #ef6535;
}

body.home-page
#timelineList
.timeline-item:nth-child(6) {
  --stage-color: #6141c5;
}

body.home-page
#timelineList
.timeline-item:nth-child(7) {
  --stage-color: #17171b;
}


/* CARD KE-7 DI TENGAH DESKTOP */
@media (min-width: 1101px) {
  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: 2 !important;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  body.home-page
  #timelineList {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: auto !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  #timelineList {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.home-page
  #timelineList
  .timeline-item {
    width: 100% !important;

    height: auto !important;
    min-height: 260px !important;
    max-height: none !important;

    margin: 0 !important;

    transform: none !important;
  }

}@media (max-width: 700px) {

  body.home-page
  #timelineList {
    grid-template-columns: 1fr !important;

    gap: 16px !important;
  }


  body.home-page
  #timelineList
  .timeline-item {
    grid-template-columns:
      48px
      minmax(0, 1fr) !important;

    column-gap: 14px !important;

    min-height: 0 !important;

    padding: 20px !important;

    border-radius: 20px !important;
  }


  body.home-page
  #timelineList
  .timeline-item::before {
    width: 46px !important;
    height: 46px !important;

    border-radius: 13px !important;

    font-size: 0.9rem !important;
  }


  body.home-page
  #timelineList
  .timeline-date {
    margin-bottom: 12px !important;

    padding: 7px 10px !important;

    font-size: 0.72rem !important;
  }


  body.home-page
  #timelineList
  .timeline-content h3 {
    font-size: 1.25rem !important;
  }


  body.home-page
  #timelineList
  .timeline-content p {
    font-size: 0.92rem !important;
  }

}
/* =========================================================
   OCL 2026 — TIMELINE FINAL V26
   Nomor benar + card lebih compact
   ========================================================= */


/* GRID */
body.home-page #timelineList {
  counter-reset: ocl-step 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  gap: 24px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* =========================================================
   CARD
   ========================================================= */

body.home-page
#timelineList
.timeline-item {
  --stage-color: #df1821;

  counter-increment: ocl-step 1 !important;

  position: relative !important;

  display: block !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  /* sebelumnya 540px — terlalu besar */
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;

  margin: 0 !important;

  padding:
    82px
    28px
    26px !important;

  overflow: hidden !important;

  border: 1px solid #e3e3e8 !important;
  border-top: 5px solid var(--stage-color) !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  box-shadow:
    0 12px 28px
    rgba(18, 24, 40, 0.07) !important;

  transform: none !important;
  opacity: 1 !important;
}


/* Semua card sejajar */
body.home-page
#timelineList
.timeline-item:nth-child(n) {
  top: auto !important;
  bottom: auto !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  transform: none !important;
}


/* =========================================================
   NOMOR 01 — 07
   ========================================================= */

body.home-page
#timelineList
.timeline-item::before {
  content:
    counter(
      ocl-step,
      decimal-leading-zero
    ) !important;

  position: absolute !important;

  top: 18px !important;
  left: 28px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 52px !important;
  height: 52px !important;

  border-radius: 15px !important;

  background: var(--stage-color) !important;

  color: #ffffff !important;

  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--stage-color) 20%,
      transparent
    ) !important;
}


/* Marker lama */
body.home-page
#timelineList
.timeline-marker,

body.home-page
#timelineList
.timeline-icon {
  display: none !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

body.home-page
#timelineList
.timeline-content {
  position: static !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  transform: none !important;
  opacity: 1 !important;
}


/* TANGGAL */
body.home-page
#timelineList
.timeline-date {
  display: inline-flex !important;

  align-items: center !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 0 0 18px !important;
  padding: 8px 14px !important;

  border-radius: 999px !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--stage-color) 18%,
      #ffffff
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--stage-color) 8%,
      #ffffff
    ) !important;

  color: var(--stage-color) !important;

  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;

  white-space: normal !important;
  word-break: normal !important;
}


/* JUDUL */
body.home-page
#timelineList
.timeline-content h3 {
  width: 100% !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #17171b !important;

  font-size: 1.18rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;

  text-align: left !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* DESKRIPSI */
body.home-page
#timelineList
.timeline-content p {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #62626b !important;

  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;

  text-align: left !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* =========================================================
   WARNA TAHAP
   ========================================================= */

body.home-page
#timelineList
.timeline-item:nth-child(1) {
  --stage-color: #df1821;
}

body.home-page
#timelineList
.timeline-item:nth-child(2) {
  --stage-color: #3367d6;
}

body.home-page
#timelineList
.timeline-item:nth-child(3) {
  --stage-color: #f2a91d;
}

body.home-page
#timelineList
.timeline-item:nth-child(4) {
  --stage-color: #00a7b5;
}

body.home-page
#timelineList
.timeline-item:nth-child(5) {
  --stage-color: #ef6535;
}

body.home-page
#timelineList
.timeline-item:nth-child(6) {
  --stage-color: #6141c5;
}

body.home-page
#timelineList
.timeline-item:nth-child(7) {
  --stage-color: #17171b;
}


/* Card ke-7 di tengah */
@media (min-width: 1101px) {

  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: 2 !important;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  body.home-page
  #timelineList {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  body.home-page
  #timelineList
  .timeline-item {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }


  body.home-page
  #timelineList
  .timeline-item:nth-child(7) {
    grid-column: auto !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body.home-page
  #timelineList {
    grid-template-columns: 1fr !important;

    gap: 16px !important;
  }


  body.home-page
  #timelineList
  .timeline-item {
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;

    padding:
      72px
      20px
      22px !important;
  }


  body.home-page
  #timelineList
  .timeline-item::before {
    top: 16px !important;
    left: 20px !important;

    width: 46px !important;
    height: 46px !important;

    border-radius: 13px !important;

    font-size: 0.9rem !important;
  }


  body.home-page
  #timelineList
  .timeline-content h3 {
    font-size: 1.1rem !important;
  }


  body.home-page
  #timelineList
  .timeline-content p {
    font-size: 0.9rem !important;
  }

}
/* =========================================================
   FIX NOMOR TIMELINE GENAP TERBALIK
   ========================================================= */

body.home-page
#timelineList
.timeline-item::before {
  transform: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  translate: none !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;

  direction: ltr !important;
  unicode-bidi: normal !important;

  line-height: 1 !important;
}


/* Paksa nomor genap juga tetap normal */
body.home-page
#timelineList
.timeline-item:nth-child(even)::before {
  transform: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  translate: none !important;
}


/* Dan nomor ganjil */
body.home-page
#timelineList
.timeline-item:nth-child(odd)::before {
  transform: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  translate: none !important;
}

/* =========================================================
   MASKOT VERTEX 2026
   Aset terbaru berupa poster vertikal, sehingga ditampilkan
   penuh sebagai visual utama tanpa bayangan kotak lama.
   ========================================================= */

.home-page .mascot-visual {
  overflow: hidden !important;
  background: #ffffff !important;
}

.home-page .mascot-image {
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  filter: none !important;
  transform: none !important;
}

/* =========================================================
   HOME COMPOSITION — HERO + TENTANG OCL
   Membuat halaman pembuka lebih padat dengan informasi acara
   yang nyata, bukan ruang dekoratif kosong.
   ========================================================= */

body.home-page .hero {
  min-height: 640px !important;
  padding: 76px 0 84px !important;
  overflow: clip !important;
  background:
    radial-gradient(circle at 87% 12%, rgba(217, 25, 32, 0.14), transparent 29%),
    radial-gradient(circle at 88% 88%, rgba(250, 183, 47, 0.13), transparent 25%),
    linear-gradient(135deg, #ffffff 0%, #fff9f9 54%, #f2f6ff 100%) !important;
}

body.home-page .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr) !important;
  align-items: center !important;
  gap: clamp(38px, 5vw, 72px) !important;
}

body.home-page .hero-content {
  max-width: 760px !important;
}

body.home-page .hero-label {
  margin: 0 0 14px !important;
}

body.home-page #eventName {
  max-width: 10ch !important;
  margin: 0 0 20px !important;
  font-size: clamp(3.65rem, 6.6vw, 6.75rem) !important;
  line-height: 0.91 !important;
  letter-spacing: -0.065em !important;
}

body.home-page .hero-tagline {
  max-width: 34ch !important;
  margin: 0 0 30px !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.55 !important;
  color: #596171 !important;
}

body.home-page .hero-actions {
  margin-bottom: 30px !important;
}

body.home-page .event-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 590px !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.home-page .event-summary > div {
  padding: 18px !important;
  border: 1px solid rgba(26, 24, 29, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 30px rgba(37, 23, 30, 0.06) !important;
  backdrop-filter: blur(10px) !important;
}

body.home-page .event-summary dt {
  margin-bottom: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #7b8190 !important;
}

body.home-page .event-summary dd {
  margin: 0 !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #19171b !important;
}

body.home-page .hero-visual {
  position: relative !important;
  display: block !important;
  min-height: 510px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body.home-page .hero-visual .arena-board {
  display: none !important;
}

body.home-page .hero-poster {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 510px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  background: #251014;
  box-shadow: 0 28px 70px rgba(75, 13, 21, 0.22);
}

body.home-page .hero-poster::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 8, 12, 0.72) 0%, rgba(24, 8, 12, 0.08) 30%, rgba(24, 8, 12, 0.15) 52%, rgba(24, 8, 12, 0.87) 100%),
    linear-gradient(120deg, rgba(217, 25, 32, 0.2), transparent 42%);
}

body.home-page .hero-poster__mascot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.015);
}

body.home-page .hero-poster__top,
body.home-page .hero-poster__bottom {
  position: absolute;
  z-index: 2;
  right: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.home-page .hero-poster__top {
  top: 24px;
}

body.home-page .hero-poster__top span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(30, 10, 14, 0.42);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  backdrop-filter: blur(8px);
}

body.home-page .hero-poster__bottom {
  bottom: 26px;
  flex-direction: column;
  align-items: flex-start;
}

body.home-page .hero-poster__bottom strong {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #ffffff;
}

body.home-page .hero-poster__bottom span {
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

body.home-page .hero-floating-stat {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 142px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(33, 22, 30, 0.18);
  backdrop-filter: blur(12px);
}

body.home-page .hero-floating-stat strong {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  color: #df1724;
}

body.home-page .hero-floating-stat span {
  max-width: 78px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #36313a;
}

body.home-page .hero-floating-stat--left {
  bottom: 32px;
  left: -30px;
}

body.home-page .hero-floating-stat--right {
  top: 58px;
  right: -22px;
}

body.home-page #tentang {
  position: relative !important;
  padding: 88px 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(217, 25, 32, 0.07), transparent 25%),
    linear-gradient(135deg, #fffafa 0%, #ffffff 52%, #f7f9ff 100%) !important;
}

body.home-page #tentang .about-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
  align-items: stretch !important;
  gap: clamp(42px, 7vw, 92px) !important;
}

body.home-page #tentang .about-heading {
  min-width: 0 !important;
}

body.home-page #tentang .about-heading h2 {
  max-width: 9ch !important;
  margin: 0 0 24px !important;
  font-size: clamp(3.2rem, 5vw, 5.45rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.065em !important;
}

body.home-page #tentang .about-heading h2 span {
  display: block !important;
}

body.home-page #tentang .about-summary {
  max-width: 56ch !important;
  margin: 0 !important;
  font-size: clamp(1.03rem, 1.35vw, 1.16rem) !important;
  line-height: 1.72 !important;
  color: #606673 !important;
}

body.home-page #tentang .about-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 560px !important;
  gap: 14px !important;
  margin: 34px 0 0 !important;
}

body.home-page #tentang .about-facts > div {
  min-height: 132px !important;
  padding: 20px !important;
  border: 1px solid rgba(25, 22, 29, 0.09) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 15px 34px rgba(33, 24, 30, 0.07) !important;
}

body.home-page #tentang .about-facts dt {
  margin-bottom: 7px !important;
  font-size: 2.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  color: #df1724 !important;
}

body.home-page #tentang .about-facts dd {
  margin: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5d6575 !important;
}

body.home-page #tentang .about-content {
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

body.home-page #tentang .opening-countdown {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 420px !important;
  padding: 36px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 96% 6%, rgba(255, 197, 54, 0.35), transparent 27%),
    linear-gradient(145deg, #e51a29 0%, #aa1020 50%, #5b1120 100%) !important;
  box-shadow: 0 28px 60px rgba(106, 17, 31, 0.24) !important;
  color: #ffffff !important;
}

body.home-page #tentang .opening-countdown::before,
body.home-page #tentang .opening-countdown::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

body.home-page #tentang .opening-countdown::before {
  width: 260px;
  height: 260px;
  right: -116px;
  bottom: -134px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

body.home-page #tentang .opening-countdown::after {
  top: 28px;
  right: 28px;
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: #ffc235;
}

body.home-page #tentang .opening-countdown > * {
  position: relative;
  z-index: 1;
}

body.home-page #tentang .opening-countdown-kicker {
  margin: 0 0 17px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffd2d6 !important;
}

body.home-page #tentang .opening-countdown h3 {
  max-width: 11ch !important;
  margin: 0 !important;
  font-size: clamp(2rem, 3.1vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  color: #ffffff !important;
}

body.home-page #tentang .opening-countdown h3 > span {
  display: block !important;
  color: inherit !important;
}

body.home-page #tentang .opening-countdown-name {
  margin-top: 8px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #ffd4d8 !important;
}

body.home-page #tentang .opening-countdown-date {
  margin: 21px 0 25px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

body.home-page #tentang .opening-countdown-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: auto 0 0 !important;
}

body.home-page #tentang .opening-countdown-unit {
  min-width: 0 !important;
  padding: 13px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 13px !important;
  background: rgba(31, 6, 12, 0.2) !important;
  text-align: center !important;
}

body.home-page #tentang .opening-countdown-unit strong {
  display: block !important;
  font-size: clamp(1.4rem, 2.3vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

body.home-page #tentang .opening-countdown-unit span {
  display: block !important;
  margin-top: 6px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffd3d7 !important;
}

body.home-page #tentang .opening-countdown-status {
  min-height: 1.2em !important;
  margin: 14px 0 0 !important;
  font-size: 0.78rem !important;
  color: #ffdfe1 !important;
}

@media (max-width: 900px) {
  body.home-page .hero {
    padding: 64px 0 72px !important;
  }

  body.home-page .hero-grid,
  body.home-page #tentang .about-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-page .hero-content {
    max-width: 720px !important;
  }

  body.home-page .hero-visual {
    width: min(100%, 610px) !important;
    min-height: 455px !important;
    margin: 8px auto 0 !important;
  }

  body.home-page .hero-poster {
    height: 455px;
  }

  body.home-page .hero-floating-stat--left {
    left: -10px;
  }

  body.home-page .hero-floating-stat--right {
    right: -10px;
  }

  body.home-page #tentang {
    padding: 72px 0 !important;
  }

  body.home-page #tentang .about-content {
    width: min(100%, 610px) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 640px) {
  body.home-page .hero {
    min-height: 0 !important;
    padding: 52px 0 60px !important;
  }

  body.home-page #eventName {
    max-width: 9.5ch !important;
    font-size: clamp(3.1rem, 15vw, 4.3rem) !important;
  }

  body.home-page .event-summary {
    grid-template-columns: 1fr !important;
  }

  body.home-page .hero-visual {
    min-height: 400px !important;
  }

  body.home-page .hero-poster {
    height: 400px;
    border-radius: 24px;
  }

  body.home-page .hero-poster__top,
  body.home-page .hero-poster__bottom {
    right: 18px;
    left: 18px;
  }

  body.home-page .hero-floating-stat {
    min-width: 124px;
    padding: 10px 12px;
  }

  body.home-page .hero-floating-stat strong {
    font-size: 1.45rem;
  }

  body.home-page .hero-floating-stat--left {
    bottom: 18px;
    left: -4px;
  }

  body.home-page .hero-floating-stat--right {
    top: 48px;
    right: -4px;
  }

  body.home-page #tentang {
    padding: 62px 0 !important;
  }

  body.home-page #tentang .about-heading h2 {
    font-size: clamp(3rem, 14vw, 4.2rem) !important;
  }

  body.home-page #tentang .opening-countdown {
    min-height: 390px !important;
    padding: 28px 22px !important;
    border-radius: 23px !important;
  }

  body.home-page #tentang .opening-countdown-grid {
    gap: 7px !important;
  }
}

/* =========================================================
   HERO FIGUR CABOR + COUNTDOWN CLEAN
   Mengembalikan fokus hero ke lima cabang olahraga dan
   merapikan panel countdown agar ringan serta elegan.
   ========================================================= */

body.home-page .hero-visual {
  position: relative !important;
  display: grid !important;
  min-height: 510px !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body.home-page .hero-visual .arena-board {
  position: relative !important;
  display: block !important;
  width: min(100%, 560px) !important;
  min-height: 510px !important;
  height: 510px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #19171b !important;
  transform: none !important;
}

body.home-page .hero .arena-board::after {
  display: none !important;
}

body.home-page .hero .arena-title {
  position: absolute !important;
  z-index: 8 !important;
  top: 10px !important;
  left: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(217, 25, 32, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 10px 26px rgba(34, 24, 29, 0.08) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: #d71920 !important;
}

body.home-page .hero .hero-sport-figures {
  position: absolute !important;
  top: 36px !important;
  right: -4% !important;
  bottom: 52px !important;
  left: -4% !important;
  overflow: visible !important;
}

body.home-page .hero .hero-sport-figures::before {
  display: none !important;
}

body.home-page .hero .hero-sport-figures::after {
  right: 17% !important;
  bottom: 3px !important;
  left: 17% !important;
  height: 20px !important;
  opacity: 0.52 !important;
}

body.home-page .hero .hero-sport-figure {
  filter: none !important;
}

body.home-page .hero .sport-labels {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.home-page .hero .sport-labels span {
  padding: 6px 9px !important;
  border: 1px solid rgba(26, 24, 29, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 20px rgba(28, 22, 27, 0.06) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #35303a !important;
}

/* Countdown tetap informatif tanpa blok merah yang berat. */
body.home-page #tentang .opening-countdown {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.86fr) !important;
  grid-template-areas:
    "kicker timer"
    "title timer"
    "date timer"
    "status timer" !important;
  column-gap: 32px !important;
  row-gap: 0 !important;
  min-height: 0 !important;
  padding: 30px 32px !important;
  overflow: visible !important;
  border: 1px solid #e4e7ec !important;
  border-left: 5px solid #e51a29 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08) !important;
  color: #17181c !important;
}

body.home-page #tentang .opening-countdown::before,
body.home-page #tentang .opening-countdown::after {
  content: none !important;
}

body.home-page #tentang .opening-countdown-kicker {
  grid-area: kicker !important;
  margin: 0 0 9px !important;
  color: #d71920 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}

body.home-page #tentang .opening-countdown h3 {
  grid-area: title !important;
  max-width: 17ch !important;
  margin: 0 !important;
  color: #17181c !important;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.04em !important;
}

body.home-page #tentang .opening-countdown-name {
  margin-top: 7px !important;
  color: #667085 !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
}

body.home-page #tentang .opening-countdown-date {
  grid-area: date !important;
  margin: 16px 0 0 !important;
  color: #475467 !important;
  font-size: 0.88rem !important;
}

body.home-page #tentang .opening-countdown-grid {
  grid-area: timer !important;
  align-self: center !important;
  margin: 0 !important;
  gap: 9px !important;
}

body.home-page #tentang .opening-countdown-unit {
  padding: 15px 7px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 12px !important;
  background: #f8f9fb !important;
}

body.home-page #tentang .opening-countdown-unit strong {
  color: #17181c !important;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
}

body.home-page #tentang .opening-countdown-unit span {
  color: #667085 !important;
  font-size: 0.58rem !important;
}

body.home-page #tentang .opening-countdown-status {
  grid-area: status !important;
  min-height: 0 !important;
  margin: 14px 0 0 !important;
  color: #667085 !important;
  font-size: 0.76rem !important;
}

@media (max-width: 900px) {
  body.home-page .hero-visual,
  body.home-page .hero-visual .arena-board {
    min-height: 455px !important;
    height: 455px !important;
  }

  body.home-page .hero .hero-sport-figures {
    top: 28px !important;
    right: -2% !important;
    bottom: 46px !important;
    left: -2% !important;
  }

  body.home-page #tentang .opening-countdown {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "kicker"
      "title"
      "date"
      "timer"
      "status" !important;
    padding: 27px 24px !important;
  }

  body.home-page #tentang .opening-countdown-grid {
    margin-top: 22px !important;
  }
}

@media (max-width: 640px) {
  body.home-page .hero-visual,
  body.home-page .hero-visual .arena-board {
    min-height: 420px !important;
    height: 420px !important;
  }

  body.home-page .hero .hero-sport-figures {
    top: 28px !important;
    right: -5% !important;
    bottom: 48px !important;
    left: -5% !important;
  }

  body.home-page .hero .sport-labels {
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   TYPOGRAPHY + COUNTDOWN RESET
   Satu bahasa visual yang konsisten: Inter, netral, dan
   tanpa efek gradien/italic dari aturan lama.
   ========================================================= */

body.home-page .hero {
  min-height: 670px !important;
  padding: 82px 0 86px !important;
}

/* Chip panjang ini redundan dan sebelumnya terpotong di bawah navbar. */
body.home-page .hero-label {
  display: none !important;
}

body.home-page .hero-grid,
body.home-page .hero-content {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

body.home-page .hero,
body.home-page .hero button,
body.home-page .hero a {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

body.home-page #eventName {
  max-width: 10.5ch !important;
  margin: 0 0 24px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(3.25rem, 5.7vw, 5.6rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.058em !important;
  text-transform: none !important;
  -webkit-text-fill-color: #17171a !important;
}

body.home-page .hero-tagline {
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(1.02rem, 1.32vw, 1.16rem) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: #5f6775 !important;
}

/* Countdown: sebuah panel informasi yang bersih, bukan poster kedua. */
body.home-page #tentang .about-content {
  align-items: center !important;
}

body.home-page #tentang .opening-countdown,
body.home-page #tentang .opening-countdown * {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

body.home-page #tentang .opening-countdown {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "kicker"
    "title"
    "date"
    "timer"
    "status" !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 32px 34px !important;
  overflow: hidden !important;
  border: 1px solid #e6e8ed !important;
  border-top: 4px solid #e51a29 !important;
  border-left: 1px solid #e6e8ed !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08) !important;
  color: #1b1d22 !important;
  isolation: isolate !important;
  transform: none !important;
}

body.home-page #tentang .opening-countdown::before,
body.home-page #tentang .opening-countdown::after {
  display: none !important;
  content: none !important;
}

body.home-page #tentang .opening-countdown > * {
  position: relative !important;
  z-index: 1 !important;
}

body.home-page #tentang .opening-countdown-kicker {
  display: inline-flex !important;
  grid-area: kicker !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #d71920 !important;
  -webkit-text-fill-color: #d71920 !important;
}

body.home-page #tentang .opening-countdown-kicker::before {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #e51a29 !important;
  box-shadow: none !important;
}

body.home-page #tentang .opening-countdown h3,
body.home-page #tentang .opening-countdown h3 > span {
  grid-area: title !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #1b1d22 !important;
  font-size: clamp(1.8rem, 2.6vw, 2.45rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.048em !important;
  text-transform: none !important;
  color: #1b1d22 !important;
}

body.home-page #tentang .opening-countdown h3 > span:first-child {
  display: block !important;
}

body.home-page #tentang .opening-countdown-name {
  display: block !important;
  grid-area: auto !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  background: none !important;
  -webkit-text-fill-color: #667085 !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #667085 !important;
}

body.home-page #tentang .opening-countdown-date {
  grid-area: date !important;
  margin: 16px 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid #eef0f3 !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

body.home-page #tentang .opening-countdown-grid {
  grid-area: timer !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 26px 0 0 !important;
}

body.home-page #tentang .opening-countdown-unit,
body.home-page #tentang .opening-countdown-unit:nth-child(n) {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 92px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 8px !important;
  overflow: visible !important;
  border: 1px solid #e6e8ed !important;
  border-radius: 12px !important;
  background: #f8f9fb !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

body.home-page #tentang .opening-countdown-unit::before {
  display: none !important;
  content: none !important;
}

body.home-page #tentang .opening-countdown-unit strong {
  display: block !important;
  margin: 0 !important;
  background: none !important;
  -webkit-text-fill-color: #1b1d22 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem) !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  color: #1b1d22 !important;
}

body.home-page #tentang .opening-countdown-unit span {
  display: block !important;
  margin-top: 8px !important;
  background: none !important;
  -webkit-text-fill-color: #7a8495 !important;
  font-size: 0.6rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  color: #7a8495 !important;
}

body.home-page #tentang .opening-countdown-status,
body.home-page #tentang .opening-countdown-status:empty {
  display: none !important;
}

@media (max-width: 900px) {
  body.home-page .hero {
    min-height: auto !important;
    padding: 66px 0 72px !important;
  }

  body.home-page #tentang .opening-countdown {
    padding: 28px !important;
  }
}

@media (max-width: 560px) {
  body.home-page .hero {
    padding: 54px 0 62px !important;
  }

  body.home-page #eventName {
    font-size: clamp(3rem, 14vw, 4.15rem) !important;
  }

  body.home-page #tentang .opening-countdown {
    padding: 24px 20px !important;
  }

  body.home-page #tentang .opening-countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page #tentang .opening-countdown-unit {
    min-height: 82px !important;
  }
}

/* =========================================================
   UKM LOGO SCALE — V33
   Memperbesar isi logo tanpa mengubah ukuran maupun alur kartu.
   Setiap file logo memiliki ruang kosong bawaan yang berbeda,
   jadi skalanya dibuat per UKM agar visualnya setara.
   ========================================================= */
body.home-page .organizers-marquee-track .organizer-card .organizer-logo {
  overflow: visible !important;
}

body.home-page .organizers-marquee-track .organizer-card .organizer-logo img {
  width: 215px !important;
  height: 215px !important;
  max-width: 215px !important;
  max-height: 215px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center center !important;
  filter: none !important;
  opacity: 1 !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-csc img {
  transform: scale(1.35) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-embun img {
  transform: scale(1.55) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-esports img {
  transform: scale(1.55) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-bola img {
  transform: scale(1.80) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-tubc img {
  transform: scale(1.82) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-tvbc img {
  transform: scale(1.72) !important;
}

body.home-page .organizers-marquee-track .organizer-card .logo-riverside img {
  transform: scale(1.60) !important;
}

@media (max-width: 700px) {
  body.home-page .organizers-marquee-track .organizer-card .organizer-logo img {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
  }
}

/* =========================================================
   UKM LOGO SIZE — V34 (selector final)
   Aturan ini sengaja memakai selector lengkap agar mengalahkan
   aturan kartu lama yang sebelumnya membuat kanvas logo kecil.
   ========================================================= */
body.home-page .organizers-grid .organizers-marquee-track article.organizer-card {
  grid-template-rows: 200px 80px !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}

body.home-page .organizers-grid .organizers-marquee-track article.organizer-card .organizer-logo {
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  padding: 8px !important;
  overflow: visible !important;
  --ukm-logo-scale: 1.4;
}

body.home-page .organizers-grid .organizers-marquee-track article.organizer-card .organizer-logo img {
  width: 170px !important;
  height: 170px !important;
  max-width: 170px !important;
  max-height: 170px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(var(--ukm-logo-scale)) !important;
  transform-origin: center center !important;
  filter: none !important;
  opacity: 1 !important;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-csc {
  --ukm-logo-scale: 1.48;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-embun {
  --ukm-logo-scale: 1.58;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-esports {
  --ukm-logo-scale: 1.52;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-bola {
  --ukm-logo-scale: 1.55;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-tubc {
  --ukm-logo-scale: 1.48;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-tvbc {
  --ukm-logo-scale: 1.50;
}

body.home-page .organizers-grid .organizers-marquee-track .logo-riverside {
  --ukm-logo-scale: 1.55;
}

@media (max-width: 700px) {
  body.home-page .organizers-grid .organizers-marquee-track article.organizer-card {
    grid-template-rows: 175px 72px !important;
    height: 247px !important;
    min-height: 247px !important;
    max-height: 247px !important;
  }

  body.home-page .organizers-grid .organizers-marquee-track article.organizer-card .organizer-logo {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }

  body.home-page .organizers-grid .organizers-marquee-track article.organizer-card .organizer-logo img {
    width: 145px !important;
    height: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
  }
}

/* =========================================================
   CONTACT NOTE + FOOTER TYPE — V35
   ========================================================= */
body.home-page .contact-information {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.home-page .contact-information > div {
  display: grid !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-left: 4px solid #ffd15c !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(82, 4, 10, 0.16) !important;
}

body.home-page .contact-information strong {
  color: #16171b !important;
  -webkit-text-fill-color: #16171b !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

body.home-page .contact-information p {
  margin: 0 !important;
  color: #556070 !important;
  -webkit-text-fill-color: #556070 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.96rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

body.home-page .site-footer .brand-text strong,
body.home-page .site-footer .footer-navigation > strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

body.home-page .site-footer {
  background: #111111 !important;
  color: #ffffff !important;
}

body.home-page .site-footer .brand-text strong {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

body.home-page .site-footer .brand-text small {
  color: #b9c4d5 !important;
  -webkit-text-fill-color: #b9c4d5 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

body.home-page .site-footer .footer-identity > p,
body.home-page .site-footer .footer-navigation a,
body.home-page .site-footer .footer-bottom p {
  color: #c8d0dc !important;
  -webkit-text-fill-color: #c8d0dc !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

body.home-page .site-footer .footer-identity > p {
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
}

body.home-page .site-footer .footer-navigation > strong {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

body.home-page .site-footer .footer-navigation a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

body.home-page .site-footer .footer-bottom p {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

@media (max-width: 700px) {
  body.home-page .contact-information {
    width: 100% !important;
    max-width: none !important;
  }

  body.home-page .contact-information > div {
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  body.home-page .site-footer .brand-text strong {
    font-size: 0.98rem !important;
  }
}

/* =========================================================
   REGISTRATION SECTION — V36
   Mengembalikan panel checklist yang sempat tersembunyi dan
   menata ulang komposisi pendaftaran agar tidak menyisakan ruang kosong.
   ========================================================= */
body.home-page #pendaftaran.registration-section {
  padding-top: clamp(72px, 8vw, 108px) !important;
  padding-bottom: clamp(82px, 9vw, 128px) !important;
  background: linear-gradient(145deg, #f8f9ff 0%, #ffffff 58%, #f3f6ff 100%) !important;
}

body.home-page #pendaftaran .registration-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.9fr) !important;
  align-items: stretch !important;
  gap: clamp(44px, 5vw, 72px) !important;
}

body.home-page #pendaftaran .registration-intro {
  display: flex !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body.home-page #pendaftaran .registration-intro h2 {
  max-width: 680px !important;
  margin-top: 18px !important;
  color: #17171b !important;
  -webkit-text-fill-color: #17171b !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(2.85rem, 4.65vw, 4.9rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.98 !important;
}

body.home-page #pendaftaran .registration-description {
  max-width: 590px !important;
  margin-top: 22px !important;
  padding: 0 !important;
  color: #626b7b !important;
  -webkit-text-fill-color: #626b7b !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

body.home-page #pendaftaran .registration-status {
  width: 100% !important;
  max-width: 570px !important;
  margin-top: 28px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 26px rgba(27, 32, 49, 0.06) !important;
}

body.home-page #pendaftaran .registration-button {
  align-self: flex-start !important;
  min-height: 52px !important;
  margin-top: 20px !important;
  border-radius: 999px !important;
  padding-inline: 26px !important;
  font-family: "Inter", Arial, sans-serif !important;
}

body.home-page #pendaftaran .registration-period {
  width: 100% !important;
  max-width: 610px !important;
  margin-top: 28px !important;
}

body.home-page #pendaftaran .registration-period div {
  min-height: 106px !important;
  padding: 16px 15px !important;
  border-radius: 16px !important;
}

body.home-page #pendaftaran .registration-checklist-card {
  display: grid !important;
  min-width: 0 !important;
  min-height: 100% !important;
  align-content: start !important;
  padding: clamp(28px, 3.2vw, 38px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #17104d 0%, #211867 62%, #173b86 100%) !important;
  box-shadow: 0 22px 48px rgba(23, 16, 77, 0.22) !important;
  color: #ffffff !important;
}

body.home-page #pendaftaran .checklist-heading h3,
body.home-page #pendaftaran .checklist-heading small,
body.home-page #pendaftaran .registration-checklist li,
body.home-page #pendaftaran .registration-privacy strong,
body.home-page #pendaftaran .registration-privacy p {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

body.home-page #pendaftaran .checklist-heading h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
}

body.home-page #pendaftaran .registration-checklist {
  gap: 12px !important;
  margin-top: 26px !important;
}

body.home-page #pendaftaran .registration-checklist li {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.home-page #pendaftaran .registration-privacy {
  margin-top: 24px !important;
  padding: 16px 17px !important;
  border-radius: 14px !important;
}

@media (max-width: 1000px) {
  body.home-page #pendaftaran .registration-layout {
    grid-template-columns: 1fr !important;
  }

  body.home-page #pendaftaran .registration-intro {
    max-width: 720px !important;
  }

  body.home-page #pendaftaran .registration-checklist-card {
    width: min(100%, 720px) !important;
    min-height: 0 !important;
  }
}

@media (max-width: 700px) {
  body.home-page #pendaftaran.registration-section {
    padding-top: 62px !important;
    padding-bottom: 76px !important;
  }

  body.home-page #pendaftaran .registration-intro h2 {
    font-size: clamp(2.7rem, 13vw, 4rem) !important;
    line-height: 0.99 !important;
  }

  body.home-page #pendaftaran .registration-status {
    align-items: flex-start !important;
  }

  body.home-page #pendaftaran .registration-button {
    width: 100% !important;
    justify-content: center !important;
  }

  body.home-page #pendaftaran .registration-period {
    grid-template-columns: 1fr !important;
  }

  body.home-page #pendaftaran .registration-checklist-card {
    width: 100% !important;
    padding: 24px 21px !important;
    border-radius: 20px !important;
  }
}

/* =========================================================
   REGISTRATION ONE-COLUMN — V37
   Checklist persiapan dihapus; informasi pendaftaran dibuat
   satu kolom agar tetap seimbang di layar lebar.
   ========================================================= */
body.home-page #pendaftaran .registration-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.home-page #pendaftaran .registration-intro {
  width: min(100%, 860px) !important;
  max-width: 860px !important;
}

body.home-page #pendaftaran .registration-intro h2 {
  max-width: 760px !important;
}

@media (max-width: 700px) {
  body.home-page #pendaftaran .registration-intro {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   MOBILE NAVIGATION + HERO SAFETY — V38
   Header ponsel yang jelas, panel navigasi ringkas, dan
   ruang aman agar judul hero tidak tertutup navbar fixed.
   ========================================================= */
@media (max-width: 760px) {
  body.home-page .navbar {
    min-height: 76px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #ececf0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 18px rgba(23, 23, 27, 0.06) !important;
    backdrop-filter: blur(14px);
  }

  body.home-page .nav-content {
    min-height: 56px !important;
    gap: 12px !important;
  }

  body.home-page .brand {
    gap: 0 !important;
  }

  body.home-page .brand-logo-frame {
    width: 118px !important;
    height: 44px !important;
  }

  body.home-page .brand-logo {
    width: 178px !important;
    height: 178px !important;
  }

  body.home-page .brand-text {
    display: none !important;
  }

  body.home-page .menu-toggle {
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #d71920 !important;
    box-shadow: 0 8px 18px rgba(215, 25, 32, 0.24) !important;
  }

  body.home-page .menu-toggle span {
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
  }

  body.home-page .menu-toggle[aria-expanded="true"] {
    background: #a90f16 !important;
    box-shadow: none !important;
  }

  body.home-page .menu-toggle:focus-visible {
    outline: 3px solid #ffd15c !important;
    outline-offset: 3px !important;
  }

  body.home-page .nav-menu {
    position: fixed !important;
    z-index: 1001 !important;
    top: 88px !important;
    right: 12px !important;
    left: auto !important;
    display: flex !important;
    width: min(calc(100vw - 24px), 340px) !important;
    max-height: calc(100dvh - 104px) !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(23, 23, 27, 0.09) !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #ffffff 0%, #fbfbfd 100%) !important;
    box-shadow: 0 24px 48px rgba(23, 23, 27, 0.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.98) !important;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms !important;
  }

  body.home-page .nav-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition-delay: 0s !important;
  }

  body.home-page .nav-menu::before {
    padding: 7px 10px 9px !important;
    content: "Navigasi" !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #777987 !important;
  }

  body.home-page .nav-menu > a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #25242a !important;
  }

  body.home-page .nav-menu > a:not(.button)::before {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
    border-radius: 50% !important;
    background: #e51a29 !important;
    content: "" !important;
  }

  body.home-page .nav-menu > a:not(.button)::after {
    display: none !important;
  }

  body.home-page .nav-menu > a:hover,
  body.home-page .nav-menu > a.active {
    background: #fff0f1 !important;
    color: #c91420 !important;
  }

  body.home-page .nav-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eceef2 !important;
  }

  body.home-page .nav-actions .button {
    min-height: 46px !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
  }

  body.home-page .nav-actions .button-outline {
    border-color: #d9dce3 !important;
    background: #ffffff !important;
    color: #25242a !important;
  }

  body.home-page.menu-open {
    overflow: hidden !important;
  }

  body.home-page.menu-open::before {
    position: fixed !important;
    z-index: 999 !important;
    inset: 0 !important;
    background: rgba(18, 18, 28, 0.16) !important;
    content: "" !important;
  }

  body.home-page .hero {
    min-height: 0 !important;
    padding: 118px 0 64px !important;
  }

  body.home-page #eventName {
    max-width: 10ch !important;
    font-size: clamp(3rem, 14.6vw, 4.1rem) !important;
    line-height: 0.95 !important;
  }

  body.home-page .hero-tagline {
    max-width: 28ch !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  body.home-page .hero-grid {
    gap: 48px !important;
  }
}

/* =========================================================
   MOBILE HERO CENTERING — V39
   Menjaga semua elemen hero berada tepat di tengah viewport
   ponsel, dengan lebar konten dan jarak sisi yang konsisten.
   ========================================================= */
@media (max-width: 760px) {
  body.home-page .hero-grid {
    justify-items: center !important;
  }

  body.home-page .hero-content {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  body.home-page #eventName {
    width: min(100%, 10ch) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  body.home-page .hero-tagline {
    width: min(100%, 29ch) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  body.home-page .hero-actions,
  body.home-page .event-summary {
    width: 100% !important;
    max-width: 560px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.home-page .event-summary > div {
    text-align: center !important;
  }

  body.home-page .hero-visual {
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* =========================================================
   MOBILE HERO OPTICAL CENTER — V46
   Membatasi lebar judul di layar kecil agar pusat visualnya
   tetap seimbang, tanpa menggeser tata letak secara paksa.
   ========================================================= */
@media (max-width: 760px) {
  body.home-page .hero .hero-content {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.home-page .hero .hero-label,
  body.home-page .hero .hero-tagline {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body.home-page .hero #eventName {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: center !important;
    font-size: clamp(2.55rem, 12.8vw, 3rem) !important;
    line-height: 0.98 !important;
  }
}

/* =========================================================
   REGISTRATION FLOW SIMPLIFIED — V40
   Alur dibuat sebagai step flow ringan, bukan kumpulan kartu.
   ========================================================= */
body.home-page #pendaftaran .registration-process {
  width: min(100%, 1040px) !important;
  margin: clamp(64px, 8vw, 100px) auto 0 !important;
  padding: clamp(36px, 5vw, 54px) 0 0 !important;
  border-top: 1px solid #e5e7eb !important;
  background: transparent !important;
}

body.home-page #pendaftaran .process-heading {
  max-width: 680px !important;
  margin: 0 auto 36px !important;
  text-align: center !important;
}

body.home-page #pendaftaran .process-heading .section-label {
  justify-content: center !important;
}

body.home-page #pendaftaran .process-heading h2 {
  margin-top: 10px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(2rem, 3.6vw, 3.15rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  text-transform: none !important;
  color: #18181c !important;
}

body.home-page #pendaftaran .process-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-page #pendaftaran .process-grid::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 21px !important;
  right: 12.5% !important;
  left: 12.5% !important;
  height: 1px !important;
  background: #e2e5ea !important;
  content: "" !important;
}

body.home-page #pendaftaran .process-card {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  min-height: 0 !important;
  align-items: center !important;
  flex-direction: column !important;
  padding: 0 14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #18181c !important;
  text-align: center !important;
  transform: none !important;
}

body.home-page #pendaftaran .process-card::before,
body.home-page #pendaftaran .process-card::after {
  display: none !important;
  content: none !important;
}

body.home-page #pendaftaran .process-card:hover,
body.home-page #pendaftaran .process-card:focus-within {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.home-page #pendaftaran .process-card .process-step {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid #f4c6cb !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(31, 23, 28, 0.06) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: #d71920 !important;
}

body.home-page #pendaftaran .process-card > div {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  flex-direction: column !important;
  padding-top: 15px !important;
}

body.home-page #pendaftaran .process-card h3 {
  margin: 0 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  color: #1b1b20 !important;
}

body.home-page #pendaftaran .process-card p {
  display: block !important;
  max-width: 24ch !important;
  margin: 7px 0 0 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.8rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  color: #697180 !important;
}

body.home-page #pendaftaran .process-card .button {
  min-height: 34px !important;
  margin-top: 12px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  body.home-page #pendaftaran .registration-process {
    margin-top: 64px !important;
    padding-top: 36px !important;
  }

  body.home-page #pendaftaran .process-heading {
    margin-bottom: 30px !important;
  }

  body.home-page #pendaftaran .process-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body.home-page #pendaftaran .process-grid::before {
    top: 21px !important;
    right: auto !important;
    bottom: 21px !important;
    left: 20px !important;
    width: 1px !important;
    height: auto !important;
  }

  body.home-page #pendaftaran .process-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    padding: 0 0 25px !important;
    text-align: left !important;
  }

  body.home-page #pendaftaran .process-card:last-child {
    padding-bottom: 0 !important;
  }

  body.home-page #pendaftaran .process-card .process-step {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.home-page #pendaftaran .process-card > div {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-top: 5px !important;
  }

  body.home-page #pendaftaran .process-card p {
    max-width: none !important;
    font-size: 0.82rem !important;
  }

  body.home-page #pendaftaran .process-card .button {
    align-self: flex-start !important;
  }
}

/* =========================================================
   FAQ DEFAULT ANSWERS — V41
   Tiga jawaban utama ditampilkan langsung agar peserta tidak
   perlu membuka setiap pertanyaan satu per satu.
   ========================================================= */
body.home-page .faq-list details:nth-child(-n + 3)[open] {
  border-color: #f0c9cd !important;
  border-left: 3px solid #e51a29 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(31, 23, 28, 0.05) !important;
}

/* =========================================================
   FAQ TOPIC BROWSER — V43
   Tiga kategori menjaga FAQ tetap singkat di layar kecil.
   ========================================================= */
body.home-page .faq-topic-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 20px 0 16px !important;
}

body.home-page .faq-topic-button {
  min-height: 40px !important;
  padding: 9px 15px !important;
  border: 1px solid #e3e5ea !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #545d6d !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.79rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.home-page .faq-topic-button:hover {
  border-color: #efbbc0 !important;
  color: #d71920 !important;
  transform: translateY(-1px) !important;
}

body.home-page .faq-topic-button.is-active,
body.home-page .faq-topic-button[aria-pressed="true"] {
  border-color: #d71920 !important;
  background: #d71920 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(215, 25, 32, 0.16) !important;
}

body.home-page .faq-topic-button:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.28) !important;
  outline-offset: 3px !important;
}

body.home-page .faq-list details[hidden] {
  display: none !important;
}

body.home-page .faq-list details[data-faq-group] {
  display: block !important;
}

body.home-page .faq-list details[data-faq-group][hidden] {
  display: none !important;
}

body.home-page .faq-list details[open] {
  border-color: #f0c9cd !important;
  border-left: 3px solid #e51a29 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(31, 23, 28, 0.05) !important;
}

body.home-page .faq-list details[open] summary {
  padding-bottom: 12px !important;
  color: #1b1b20 !important;
}

@media (max-width: 760px) {
  body.home-page .faq-topic-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin-top: 16px !important;
    padding: 2px 2px 8px !important;
    scrollbar-width: none !important;
  }

  body.home-page .faq-topic-filter::-webkit-scrollbar {
    display: none !important;
  }

  body.home-page .faq-topic-button {
    flex: 0 0 auto !important;
  }

  body.home-page .faq-list details[open] summary {
    padding-bottom: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .faq-topic-button {
    transition: none !important;
  }
}

@media (min-width: 920px) {
  body.home-page .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 12px !important;
  }
}

/* =========================================================
   FAQ CARD POLISH — V44
   Kategori dan daftar disatukan pada satu kolom agar tidak
   berpindah ke bawah intro; kartu tetap ringan dan rapi.
   ========================================================= */
body.home-page .faq-browser {
  min-width: 0 !important;
}

body.home-page .faq-list details[hidden] {
  display: none !important;
}

body.home-page .faq-list {
  gap: 14px !important;
}

body.home-page .faq-list details {
  overflow: hidden !important;
  border: 1px solid #e4e6eb !important;
  border-left: 3px solid transparent !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(25, 30, 40, 0.035) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body.home-page .faq-list details:hover {
  border-color: #f0c9cd !important;
  border-left-color: #e51a29 !important;
  box-shadow: 0 12px 24px rgba(25, 30, 40, 0.07) !important;
  transform: translateY(-1px) !important;
}

body.home-page .faq-list details[open] {
  border-color: #efc5c9 !important;
  border-left-color: #e51a29 !important;
  box-shadow: 0 12px 28px rgba(155, 22, 31, 0.09) !important;
}

body.home-page .faq-list summary {
  min-height: 68px !important;
  padding: 18px 58px 18px 20px !important;
  color: #22242b !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
}

body.home-page .faq-list summary::after {
  top: 50% !important;
  right: 18px !important;
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  border: 1px solid #f1d2d4 !important;
  border-radius: 50% !important;
  background: #fff5f5 !important;
  color: #d71920 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

body.home-page .faq-list details[open] summary::after {
  border-color: #d71920 !important;
  background: #d71920 !important;
  color: #ffffff !important;
}

body.home-page .faq-list .faq-answer {
  padding: 0 20px 20px !important;
}

body.home-page .faq-list .faq-answer::before {
  display: inline-flex !important;
  margin: 0 0 10px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #fff1f2 !important;
  color: #c71720 !important;
  line-height: 1 !important;
}

body.home-page .faq-list .faq-answer p {
  padding-top: 13px !important;
  border-top: 1px solid #eceef2 !important;
}

@media (min-width: 920px) {
  body.home-page .faq-browser {
    grid-column: 2 !important;
  }

  body.home-page .faq-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.home-page .faq-topic-filter {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    margin-top: 16px !important;
    padding: 0 !important;
  }

  body.home-page .faq-topic-button {
    min-height: 44px !important;
    padding: 8px 6px !important;
    font-size: 0.71rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.home-page .faq-list {
    gap: 10px !important;
  }

  body.home-page .faq-list summary {
    min-height: 62px !important;
    padding: 16px 52px 16px 17px !important;
    font-size: 0.86rem !important;
  }

  body.home-page .faq-list summary::after {
    right: 15px !important;
    width: 25px !important;
    height: 25px !important;
  }

  body.home-page .faq-list .faq-answer {
    padding: 0 17px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .faq-list details {
    transition: none !important;
  }
}

body.home-page .faq-list details:nth-child(-n + 3)[open] summary {
  padding-bottom: 12px !important;
  color: #1b1b20 !important;
}

body.home-page .faq-list .faq-answer {
  padding-top: 0 !important;
}

body.home-page .faq-list .faq-answer::before {
  display: block !important;
  margin-bottom: 7px !important;
  content: "Jawaban" !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: #d71920 !important;
}

body.home-page .faq-list .faq-answer p {
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 0.91rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: #636b78 !important;
}

@media (max-width: 760px) {
  body.home-page .faq-list details:nth-child(-n + 3)[open] summary {
    padding-bottom: 10px !important;
  }

  body.home-page .faq-list .faq-answer {
    padding-right: 18px !important;
    padding-bottom: 19px !important;
    padding-left: 18px !important;
  }
}