/* ═══════════════════════════════════════════════════════════════
   GRAB BUSINESS FORUM 2026 — Main Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Fonts: Grab Community Solid EN ────────────────────── */
@font-face {
  font-family: 'Grab Community';
  src: url('Fonts/Grab Community Solid EN-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grab Community';
  src: url('Fonts/Grab Community Solid EN-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grab Community';
  src: url('Fonts/Grab Community Solid EN-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grab Community';
  src: url('Fonts/Grab Community Solid EN-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grab Community';
  src: url('Fonts/Grab Community Solid EN-Extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  background-color: #0d1a0f;
  background-size: 100% auto;
  background-image: url('../../Images/BG-gradasi.png');
  background-repeat: repeat-y;
  color: #ffffff;
  overflow-x: hidden;
  line-height: 1.5;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── Utility ─────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY HEADER
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: #005339;
}

/* subtle default shadow and transition; toggled via JS class `scrolled` */
.site-header {
  box-shadow: 0 2px 16px rgba(0,177,79,0.15);
  transition: box-shadow 200ms ease;
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,177,79,0.25);
}

/* Fade-in helper classes (moved from inline JS) */
.fade-target{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.fade-target.visible{opacity:1;transform:translateY(0)}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 120px;
}

/* Logo */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 40px;
  width: auto;
}

/* Tab Navigation */
.tab-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.tab-btn {
  position: relative;
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #a0b8a3;
  background: transparent;
  border-radius: 40px;
  transition: all 0.25s ease;
  white-space: nowrap;
  outline: none;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #00B14F;
  border-radius: 2px;
  transition: width 0.25s ease;
}

.tab-btn:hover {
  color: #ffffff;
}

.tab-btn.active {
  color: #ffffff;
  background: rgba(0, 177, 79, 0.15);
  border: 1.5px solid #00B14F;
}

.tab-btn:focus-visible {
  outline: 2px solid #00B14F;
  outline-offset: 3px;
}

/* Registration Button */
.btn-register {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-register:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.btn-register-img {
  height: 38px;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER
   ═══════════════════════════════════════════════════════════════ */
.hero-banner {
  width: 100%;
  overflow: hidden;
  display: block;
}

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

/* ═══════════════════════════════════════════════════════════════
   BUBBLE CONTENT WRAPPER (about + rundown/speakers)
   ═══════════════════════════════════════════════════════════════ */
.bubble-content-wrap {
  position: relative;
  overflow: hidden;
}

.bubble-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.bubble-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Section-level bubble wrapper: add `has-bubbles` to a section to host its own bubble layer.
   This positions the section as a stacking context so the bubbles stay behind content. */
.has-bubbles {
  position: relative;
  overflow: visible;
}
.has-bubbles .bubble-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}
.has-bubbles > *:not(.bubble-bg-layer):not(.stream-embed-wrap) {
  position: relative;
  z-index: 1;
}

/* Keep the stream embed as an overlay above bubbles */
.stream-section.has-bubbles .stream-embed-wrap {
  z-index: 3;
}

/* Animated background bubbles (decorative) */
.bg-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  transform: translate3d(0,0,0);
  opacity: var(--bubble-opacity, 0.12);
  animation: bubble-float var(--bubble-duration, 20s) ease-in-out infinite;
  will-change: transform, opacity;
  /* outer ring gradient */
  background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.9) 0%, rgba(0,177,79,0.95) 12%, rgba(0,177,79,0.45) 26%, rgba(0,177,79,0.12) 40%, rgba(0,177,79,0) 70%);
  filter: blur(6px);
}

.bg-bubble::after {
  /* inner dark core to create a ring (hole) */
  content: '';
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: rgba(5,36,24,0.96);
  box-shadow: inset 0 8px 24px rgba(0,0,0,0.45);
  pointer-events: none;
}

.bg-bubble::before {
  /* specular highlight */
  content: '';
  position: absolute;
  left: 6%;
  top: 4%;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 22%, rgba(255,255,255,0.95), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0) 60%);
  filter: blur(6px);
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes bubble-float {
  0% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-18vh) translateX(6vw) scale(1.04); }
  100% { transform: translateY(0) translateX(0) scale(1); }
}

/* keep bubbles off small screens to save perf */
@media (max-width: 720px) {
  .bg-bubble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-bubble { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT SECTION (2-column)
   ═══════════════════════════════════════════════════════════════ */
.about-section {
  position: relative;
  z-index: 1;
  padding: 80px 48px 64px;
  /* space below the about block to separate from following content */
  margin-bottom: clamp(24px, 4vw, 96px);
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-logo-wrap {
  flex-shrink: 0;
}

.about-logo {
  width: 460px;
  max-width: 100%;
  height: auto;
}

.about-text {
  flex: 1;
}

.about-text p {
  font-size: 1.15rem;
  color: #c8e6c9;
  line-height: 1.8;
  max-width: 560px;
}

/* ═══════════════════════════════════════════════════════════════
   EVENT INFO — 2 rows
   ═══════════════════════════════════════════════════════════════ */
.event-info {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Row 1: date (1128px) + time (793px) = 1921px proportional */
.event-info-row1 {
  display: flex;
  width: 100%;
}

.event-info-date {
  flex: 1128 1 0;
  min-width: 0;
}

.event-info-time {
  flex: 793 1 0;
  min-width: 0;
}

/* Row 2: location full-width */
.event-info-location {
  width: 100%;
  position: relative; /* enable absolute positioning for location CTA */
}

.event-info-img {
  width: 100%;
  height: auto;
  display: block;
}

/* CTA overlay for the location image */
.location-cta {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.location-cta .btn-map-img {
  width: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   COUNTDOWN SECTION
   ═══════════════════════════════════════════════════════════════ */
.countdown-section {
  width: 100%;
  overflow: hidden;
}

.countdown-bg-wrap {
  position: relative;
  width: 100%;
}

.countdown-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop: timer overlaid on RIGHT side of the baked-in "Countdown" bar in image */
/* Image 1920×366: dark section y=0–44%, mint green bar y=44.8%–84.7%, center=64.8% */
.countdown-overlay {
  position: absolute;
  top: 65%;
  right: 17%;
  transform: translateY(-50%);
}

.countdown-timer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.countdown-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: clamp(1.2rem, 2.1vw, 2.6rem);
  font-weight: 900;
  color: #1A3D22;
  line-height: 1.0;
  min-width: auto;
  text-align: center;
  letter-spacing: -0.5px;
}

/* Each digit gets its own background so they appear as separate boxes */
.countdown-digit {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  padding: 3px 0;
  width: 1.6ch;
  margin: 0;
  text-align: center;
  background: #CFFF00;
  color: #1A3D22;
  border-radius: 0.25em;
  box-sizing: border-box;
}

.countdown-label {
  font-size: clamp(0.55rem, 0.63vw, 0.75rem);
  font-weight: 600;
  color: #1A4D2E;
  margin-top: 6px;
}


/* Particles canvas overlay */
.particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Parallax: ensure hero image is ready for transforms */
.hero-img {
  will-change: transform;
  transition: transform 220ms linear;
}
/* (micro-animations removed) */

/* Tilt helpers */
.faq-card { transition: transform 160ms ease, box-shadow 240ms ease; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .countdown-digit, .micro-anim .wave, .particles-canvas, .hero-img { transition: none !important; animation: none !important; }
}

.countdown-sep {
  font-size: clamp(0.85rem, 1.67vw, 2rem);
  font-weight: 900;
  color: #1A4D2E;
  line-height: 1;
  margin-bottom: 0.75em;
}

/* Responsive: adjust countdown sizes for tablet and desktop */
@media (min-width: 768px) {
  .countdown-overlay {
    /* slightly adjusted placement for mid-sized viewports */
    top: 65%;
    right: 12%;
    transform: translateY(-50%);
  }

  .countdown-num {
    /* a bit smaller for tablets / small laptops */
    font-size: clamp(2.2rem, 2.2vw, 3.3rem);
  }

  .countdown-digit {
    padding: 4px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: clamp(0.7rem, 0.8vw, 0.95rem);
    margin-top: 7px;
  }

  .countdown-sep {
    font-size: clamp(1.3rem, 1.8vw, 2.4rem);
    margin-bottom: 0.6em;
  }
}

/* Portrait tablets: slightly smaller than landscape/tablet defaults */ 
@media (min-width: 768px) and (max-width: 1203px) and (orientation: portrait) {
  .countdown-overlay {
    top: 65%;
    right: 14%;
    transform: translateY(-50%);
  }

  .countdown-num {
    font-size: clamp(1.7rem, 1.7vw, 2.4rem);
  }

  .countdown-digit {
    padding: 3px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: clamp(0.62rem, 0.65vw, 0.8rem);
    margin-top: 6px;
  }

  .countdown-sep {
    font-size: clamp(1.0rem, 1.2vw, 1.6rem);
    margin-bottom: 0.5em;
  }
}

@media (min-width: 1200px) {
  .countdown-overlay {
    /* desktop: align back closer to original artwork area */
    top: 64%;
    right: 17%;
  }

  .countdown-num {
    font-size: clamp(3.5rem, 1.9vw, 5.2rem);
  }

  .countdown-digit {
    padding: 6px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: clamp(0.9rem, 0.9vw, 1.2rem);
  }

  .countdown-sep {
    font-size: clamp(2rem, 1.6vw, 3.6rem);
  }
}

/* Reduce countdown size for very large screens (>1280px) */
@media (min-width: 1280px) {
  .countdown-overlay {
    /* keep placement but slightly pull in from the right */
    top: 64%;
    right: 16%;
  }

  .countdown-num {
    /* more restrained sizes on very large viewports */
    font-size: clamp(2.6rem, 1.4vw, 3.8rem);
  }

  .countdown-digit {
    padding: 5px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: clamp(0.78rem, 0.7vw, 1rem);
  }

  .countdown-sep {
    font-size: clamp(1.4rem, 1.0vw, 2.4rem);
  }
}

@media (min-width: 1680px) {
  .countdown-overlay {
    top: 64%;
    right: 15%;
    transform: translateY(-50%);
  }

  .countdown-num {
    font-size: clamp(3.8rem, 2.0vw, 6rem);
  }

  .countdown-digit {
    padding: 7px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: clamp(1rem, 0.9vw, 1.6rem);
  }

  .countdown-sep {
    font-size: clamp(2.4rem, 1.2vw, 4.4rem);
  }
}



/* ═══════════════════════════════════════════════════════════════
   RUNDOWN SPEAKERS HEADER (title + tab nav inside bubble area)
   ═══════════════════════════════════════════════════════════════ */
.rundown-speakers-header {
  position: relative;
  z-index: 1;
  padding: 0 24px 40px;
  text-align: center;
}

.rundown-speakers-header .rundown-inner {
  max-width: 960px;
  margin: 0 auto;
}

.rundown-speakers-header .rundown-title {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  padding: 0;
}

.rundown-speakers-header .tab-nav {
  justify-content: center;
  gap: 16px;
}

.rundown-speakers-header .tab-btn {
  padding: 16px 64px;
  font-size: 1rem;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.6);
  color: #ffffff;
  background: transparent;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.rundown-speakers-header .tab-btn.active {
  background: #CFFDD9;
  border-color: #CFFDD9;
  color: #005339;
}

.rundown-speakers-header .tab-btn:hover:not(.active) {
  background: rgba(207,253,217,0.12);
  border-color: rgba(255,255,255,0.9);
}

/* Panels inside bubble wrapper need z-index */
.bubble-content-wrap main {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TAB PANELS
   ═══════════════════════════════════════════════════════════════ */
.tab-panel {
  display: block;
  width: 100%;
  /* sedikit padding tambahan, responsive berdasarkan viewport */
  padding: clamp(16px, 3.5vw, 48px);
}

.tab-panel[hidden] {
  display: none;
}

/* Green Bubble — removed as standalone section, now used as
   .bubble-bg-layer inside .bubble-content-wrap */

/* Speakers Section */
.speakers-section {
  width: 100%;
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.section-full-img {
  width: 100%;
  height: auto;
  display: block;
}

.speakers-section .section-full-img {
  /* space below speaker images, responsive */
  margin-bottom: clamp(20px, 3.2vw, 56px);
}

/* Rundown Section */
.rundown-section {
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.rundown-title {
  display: flex;
  justify-content: center;
  padding: 32px 24px 16px;
}

.rundown-title-img {
  /* slightly larger responsive size (user requested): grows on larger viewports, caps at comfortable max */
  width: clamp(480px, 46vw, 980px);
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   STREAMING SECTION
   ═══════════════════════════════════════════════════════════════ */
.stream-section {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.stream-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* YouTube embed overlay */
/* Desktop: bg image has blank area on LEFT (~0-44%) and "LIVE NOW:" card on RIGHT */
.stream-embed-wrap {
  position: absolute;
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
  width: 43%;
  aspect-ratio: 16 / 9;
}

.stream-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fade-in (used by main.js IntersectionObserver) */
.fade-target {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.22,.9,.33,1), transform 560ms cubic-bezier(.22,.9,.33,1);
  will-change: opacity, transform;
}
.fade-target.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes and helper class for `fadeInUp` (lightweight wow.js-like)
   Elements get a per-element delay using `--wow-delay` set from JS. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.22,.9,.33,1);
  animation-fill-mode: both;
  animation-delay: var(--wow-delay, 0ms);
  will-change: transform, opacity;
}
/* When using the keyframe animation we don't want the transition to fight it */
.fade-target.animate-fadeInUp {
  transition: none;
}

/* Live badge overlay */
.stream-embed-wrap {
  overflow: visible;
}
.stream-embed-wrap .live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(90deg, #ff3b30, #ff6b50);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  z-index: 4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  pointer-events: none;
  transform: translateZ(0);
}
.stream-embed-wrap .live-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.stream-embed-wrap .live-badge .dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  z-index: -1;
  animation: live-pulse 1.8s infinite ease-out;
  opacity: 0.9;
}

@keyframes live-pulse {
  0% { transform: translate(-50%,-50%) scale(1); opacity: 0.9; }
  70% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* Subtle animated overlay for depth (pointer-events none so iframe still interactive) */
.stream-embed-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(12,12,12,0) 0%, rgba(0,0,0,0.06) 50%, rgba(12,12,12,0) 100%);
  pointer-events: none;
  z-index: 2;
  animation: embed-float 10s linear infinite;
}

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

/* ensure iframe sits below overlays */
.stream-embed-wrap iframe { position: relative; z-index: 1; }

/* Button micro-interaction for map button — transparent, no padding/border */
a.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #ffffff;
  border-radius: 0;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.22,.9,.33,1), box-shadow 220ms ease;
  box-shadow: none;
  border: none;
}
a.btn-map:hover, a.btn-map:focus {
  transform: translateY(-4px);
  box-shadow: none;
  outline: none;
  background: transparent;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-target, .stream-embed-wrap::before, .stream-embed-wrap .live-badge .dot::after { animation: none !important; transition: none !important; }
}

/* Tablet adjustments: move iframe slightly right and increase size */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Portrait tablets — already OK */
  .stream-embed-wrap {
    left: 6%;
    width: 56%;
  }
}

/* Tablet landscape: nudge further right and increase width for readability */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
  .stream-embed-wrap {
    left: 8%;
    width: 62%;
  }
}

/* Medium desktop: use a slightly larger embed but cap with max-width */
@media (min-width: 1025px) and (max-width: 1365px) {
  .stream-embed-wrap {
    left: 6%;
    width: 52%;
    max-width: 980px;
  }
}
/* Enlarge map button for larger viewports (≥1024px) */
@media (min-width: 1024px) {
  .btn-map-img {
    height: 80px;
  }
}

/* Large desktop: keep embed comfortably sized within the hero artwork */
@media (min-width: 1366px) {
  .stream-embed-wrap {
    left: 8%;
    width: 46%;
    max-width: 1100px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   VENUE & MAP SECTION
   ═══════════════════════════════════════════════════════════════ */
.venue-section {
  width: 100%;
  padding: 56px 24px 48px;
}

.venue-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.venue-title {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.venue-title-img {
  /* slightly reduced to balance enlarged rundown title */
  width: clamp(320px, 28vw, 420px);
  max-width: 100%;
  height: auto;
  display: block;
}

/* Floor tab buttons */
.venue-floor-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.floor-tab-btn {
  padding: 14px 56px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,0.35);
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}

.floor-tab-btn.active {
  background: rgba(0,177,79,0.15);
  border-color: #00B14F;
  color: #ffffff;
}

.floor-tab-btn:hover {
  border-color: #00B14F;
  color: #ffffff;
}

/* Single map display */
.venue-map-display {
  margin-bottom: 32px;
  border-radius: 16px;
  overflow: hidden;
  /* border removed per request */
  box-shadow: 0 4px 32px rgba(0,177,79,0.1);
}

.venue-map-img {
  width: 100%;
  height: auto;
  display: block;
}

.venue-map-img[hidden] {
  display: none;
}

.venue-cta {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.btn-map {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-map:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.btn-map-img {
  height: clamp(50px, 4.2vw, 92px);
  width: auto;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════
   REGISTRASI CTA
   ═══════════════════════════════════════════════════════════════ */
.registrasi-cta {
  width: 100%;
  background: #c5e619;
  padding: 48px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-cta-registrasi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1a3a1a;
  border-radius: 50px;
  padding: 18px 100px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.btn-cta-registrasi:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  width: 100%;
  border-top: 1px solid rgba(0,177,79,0.25);
  /* sedikit tambahan padding bawah untuk ruang visual */
  padding: 32px 24px 40px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  /* desktop: align logo to left inside the footer container */
  align-self: flex-start;
}

.footer-copy {
  font-size: 0.8rem;
  color: #5a7a5e;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────────────── */
.faq-section {
  width: 100%;
  padding: 72px 48px 80px;
  background-color: #D4F5E0;
}

.faq-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

/* ── Left column ────────────────────────────────────────────── */
.faq-col-left {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

.faq-title {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: #1A5432;
  line-height: 1.25;
  margin-bottom: 12px;
}

.faq-subtitle {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #3d7055;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ── Category tabs (left col — stacked) ─────────────────────── */
.faq-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.faq-cat-btn {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A5432;
  background: transparent;
  border: none;
  padding: 8px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: left;
  white-space: nowrap;
}

.faq-cat-btn:hover:not(.active) {
  background: rgba(0, 177, 79, 0.12);
}

.faq-cat-btn.active {
  background: #00B14F;
  color: #ffffff;
}

.faq-cat-btn:focus-visible {
  outline: 2px solid #1A5432;
  outline-offset: 3px;
}

/* ── Right column ───────────────────────────────────────────── */
.faq-col-right {
  flex: 1;
  min-width: 0;
}

/* ── FAQ Panels ─────────────────────────────────────────────── */
.faq-panel[hidden] {
  display: none;
}

.faq-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: faqPanelIn 0.25s ease forwards;
}

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

/* ── FAQ Card ───────────────────────────────────────────────── */
.faq-card {
  background: #BFEDCE;
  border-radius: 12px;
  overflow: hidden;
}

.faq-card-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: 0.97rem;
  font-weight: 600;
  color: #1A5432;
  line-height: 1.5;
  transition: background 0.2s ease;
}

.faq-card-btn:hover {
  background: rgba(0, 177, 79, 0.1);
}

.faq-card-btn[aria-expanded="true"] {
  background: rgba(0, 177, 79, 0.08);
}

.faq-card-btn:focus-visible {
  outline: 2px solid #1A5432;
  outline-offset: -2px;
}

.faq-q-text {
  flex: 1;
}

.faq-q-id {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: #3d7055;
  margin-top: 2px;
  line-height: 1.4;
}

/* Toggle icon: + rotates to x */
.faq-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #1A5432;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  user-select: none;
}

.faq-card-btn[aria-expanded="true"] .faq-toggle-icon {
  background: #1A5432;
  color: #ffffff;
  transform: rotate(45deg);
}

/* ── FAQ Card Answer ────────────────────────────────────────── */
.faq-card-answer {
  padding: 0 20px 18px;
  animation: faqOpen 0.25s ease forwards;
}

.faq-card-answer[hidden] {
  display: none;
}

.faq-card-answer p {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #2d5c3e;
  line-height: 1.8;
  margin-bottom: 10px;
}

.faq-card-answer p:last-child {
  margin-bottom: 0;
}

/* Indonesian translation: smaller, slightly muted */
.faq-id,
ul.faq-id li {
  font-size: 0.78rem !important;
  color: #4a7a5a !important;
}
.faq-id {
  margin-top: 6px !important;
  border-top: 1px dashed rgba(0,177,79,0.25);
  padding-top: 6px;
}

.faq-card-answer p strong {
  font-weight: 700;
  color: #1A5432;
}

.faq-card-answer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-card-answer ul li {
  font-family: 'Grab Community', 'Segoe UI', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #2d5c3e;
  line-height: 1.8;
  padding-left: 18px;
  position: relative;
}

.faq-card-answer ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #00B14F;
  font-weight: 700;
}

.faq-link {
  color: #00B14F;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.faq-link:hover {
  color: #007a35;
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .header-inner {
    padding: 24px 48px;
  }

  .header-logo img {
    height: 34px;
  }

  .btn-register-img {
    height: 32px;
  }

  .about-section {
    padding: 60px 32px 48px;
  }

  .about-inner {
    gap: 40px;
  }

  .speakers-section,
  .rundown-section {
    padding: 0 20px;
  }

  .about-logo {
    width: 360px;
  }

  /* Countdown tablet — size handled by clamp() in base styles */

  /* FAQ tablet */
  .faq-section {
    padding: 56px 32px 64px;
  }

  .faq-col-left {
    width: 200px;
    position: static;
  }

  .faq-inner {
    gap: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 767px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Stream: mobile bg has "LIVE NOW:" card at TOP (~0-33%), blank area below for embed */
  /* top: 68% centers the embed in the blank area with ~25px gap below card */
  .stream-embed-wrap {
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84%;
  }

  /* Header */
  .site-header {
    border-bottom-width: 1px;
  }

  .header-inner {
    padding: 16px 20px;
  }

  .header-logo img {
    height: 24px;
  }

  .btn-register-img {
    height: 40px;
  }

  /* Event info: stack on mobile */
  .event-info-row1 {
    flex-direction: column;
  }

  .event-info-date,
  .event-info-time {
    flex: 1 1 100%;
    width: 100%;
  }

  /* About: single column */
  .about-section {
    padding: 40px 20px 32px;
  }

  .about-inner {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .about-logo {
    width: 220px;
  }

  .about-text p {
    font-size: 0.95rem;
  }

  /* Speakers & Rundown sections */
  .speakers-section,
  .rundown-section {
    padding: 0 16px;
  }

  /* Spacing below speakers images on mobile */
  .speakers-section .section-full-img {
    margin-bottom: 18px;
  }

  /* Tab panels: reduce padding slightly on small screens */
  .tab-panel {
    padding: 12px 16px;
  }

  /* Rundown speakers header */
  .rundown-speakers-header .tab-btn {
    padding: 10px 24px;
    font-size: 0.88rem;
  }

  /* Countdown mobile — "Countdown" title is centered in image (baked in), timer overlaid below it */
  /* Mobile image is 1080×376; "Countdown" text at ~top 35%, empty bar space below for timer */
  .countdown-overlay {
    top: 66%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .countdown-timer {
    gap: 6px;
  }

  .countdown-num {
    font-size: 1.6rem;
  }

  .countdown-digit {
    padding: 3px 0;
    width: 1.6ch;
  }

  .countdown-label {
    font-size: 0.65rem;
  }

  .countdown-sep {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  /* Rundown title */
  .rundown-title {
    padding: 20px 16px 10px;
  }

  .rundown-title-img {
    max-width: 380px;
    width: 100%;
  }

  /* Venue */
  .venue-section {
    padding: 32px 16px;
  }

  .floor-tab-btn {
    padding: 10px 28px;
    font-size: 0.88rem;
  }

  /* FAQ — single column on mobile */
  .faq-section {
    padding: 40px 20px 52px;
  }

  .faq-inner {
    flex-direction: column;
    gap: 0;
  }

  .faq-col-left {
    width: 100%;
    position: static;
    margin-bottom: 24px;
  }

  .faq-title {
    font-size: 1.6rem;
    margin-bottom: 8px;
    text-align: center;
  }

  .faq-subtitle {
    text-align: center;
    margin-bottom: 20px;
  }

  /* Mobile: category tabs as horizontal scrollable row */
  .faq-cats {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    justify-content: center;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .faq-cats::-webkit-scrollbar {
    display: none;
  }

  .faq-cat-btn {
    font-size: 0.88rem;
    padding: 7px 18px;
    white-space: nowrap;
  }

  .faq-card-btn {
    font-size: 0.9rem;
    padding: 15px 16px;
  }

  .faq-card-answer {
    padding: 0 16px 16px;
  }

  .faq-card-answer p,
  .faq-card-answer ul li {
    font-size: 0.88rem;
  }

  /* Registrasi CTA */
  .btn-cta-registrasi {
    padding: 14px 48px;
    font-size: 1.2rem;
  }

  /* Footer */
  .footer-logo {
    /* kecilkan logo di tampilan mobile */
    height: 34px;
    /* mobile: center the logo */
    align-self: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max-width: 400px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .header-inner {
    padding: 18px 14px;
  }

  .header-logo img {
    height: 18px;
  }

  .btn-register-img {
    height: 34px;
  }

  /* Countdown small mobile */
  .countdown-num {
    font-size: 1.4rem;
  }

  .countdown-digit {
    padding: 3px 0;
    width: 1.6ch;
  }

  .countdown-sep {
    font-size: 1rem;
    margin-bottom: 18px;
  }

  .btn-cta-registrasi {
    padding: 12px 32px;
    font-size: 1rem;
  }

  /* Small mobile: reduce rundown title so it doesn't overwhelm screen */
  .rundown-title-img {
    max-width: 320px;
    width: 100%;
  }

  /* Small mobile: sedikit lebih kecil lagi agar tidak mendominasi */
  .footer-logo {
    height: 28px;
    align-self: center;
  }

  /* On mobile, overlay the location CTA centered and raised above the image */
  .location-cta {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    z-index: 6;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    width: auto;
  }
  /* Small mobile: slightly smaller map button to avoid crowding */
  .btn-map-img {
    height: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TAB TRANSITION ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-panel.active {
  animation: fadeInPanel 0.3s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR CUSTOM (webkit)
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0d1a0f;
}

::-webkit-scrollbar-thumb {
  background: #00B14F;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00d460;
}