:root{
  --ink-900:#0F1012;
  --ink-800:#15171b;
  --rose-800:#8E101A;
  --rose-700:#C21A27;
  --rose-600:#E03342;
  --rose-500:#FF5A6B;
  --rose-300:#FFB3BD;
  --rose-50:#FFE5E9;
}

/* Base */
html, body { height:100%; background:var(--ink-900); color:#e7e7ea; }
.bg-blur { background:rgba(15,16,18,.75); backdrop-filter:blur(6px); }
.navbar-brand img { height:38px; }

/* Buttons */
.btn-brand{
  background:linear-gradient(90deg, var(--rose-700), var(--rose-800));
  border:none; color:#fff;
}
.btn-brand:hover{ filter:brightness(1.06); color:#fff; }
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.btn-ghost:hover{ border-color:#fff; color:#fff; }

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(226,51,66,.15), transparent 60%),
    radial-gradient(1200px 500px at 90% -20%, rgba(140,16,26,.22), transparent 60%),
    linear-gradient(180deg, #121317 0%, #0f1012 60%);
  padding: 96px 0 54px;
}
.title{
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.15;
  background: linear-gradient(90deg, #ffffff, #ffdde2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtle{ color:#bfc3cb; }

/* Misc */
.stat-pill{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06); color:#fff; font-weight:600; font-size:14px;
}
.stat-pill .dot{ width:8px; height:8px; border-radius:50%; margin-right:8px; }
.dot-green{ background:#52d17e; } .dot-blue{ background:#6fa8ff; }

.card-dark{
  background: linear-gradient(180deg, #17191e, #13151a);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border-radius:14px;
}
.badge-rose{ background:var(--rose-700); }
.link-rose{ color:var(--rose-500); }
.link-rose:hover{ color:#ffb3bd; text-decoration:none; }

/* ===== [UPDATE] Section title style seperti screenshot kedua ===== */
.section-title{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:24px;
  font-size: clamp(28px, 3.2vw, 42px);
}
/* Garis aksen di bawah judul section */
.title-underline{
  width:110px; height:4px; margin:.25rem auto 2rem auto;
  background:#F5C04B;
  border-radius:4px; opacity:.9;
}

/* ===== [ADD] Perkecil & center video pada halaman events ===== */
.video-wrap{ max-width:900px; margin:0 auto; }

/* ===== [ADD] Kartu News sederhana ===== */
.news-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: transform .15s ease, border-color .15s ease;
  height: 100%;
}
.news-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.news-card .badge-src{ font-size:.75rem; letter-spacing:.2px; opacity:.85; }
.news-card a{ text-decoration: none; }

.section-dark{ background:linear-gradient(180deg,#101114,#0f1012); }

.alert-soft-rose{
  background:rgba(255,90,107,.08);
  border:1px solid rgba(255,90,107,.25);
  color:#f4c4ca;
}

/* OS icon sizes */
.os-icon{
  width: clamp(38px, 4.2vw, 56px);
  height: clamp(38px, 4.2vw, 56px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:#0e0f12; color:#a8acb3; padding:36px 0;
}
.tiny{ font-size:12px; color:#9aa0a8; }

/* Responsive */
@media (max-width: 767.98px){
  .hero{ padding-top: 84px; }
  .title{ font-size:36px !important; }
}

/* Mock video */
.mock-video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.mock-video::-webkit-media-controls-enclosure{ display:none !important; }
.mock-video::-webkit-media-controls{ display:none !important; }

/* ================= TIMELINE ================= */
.timeline{
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  padding: 24px 0 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.timeline.grabbing{ cursor: grabbing; }

.timeline-line{
  position: sticky;
  left: 0; right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--rose-600), var(--rose-800));
  border-radius: 999px;
  opacity: .85;
  transition: transform 1200ms cubic-bezier(.22,1,.36,1);
  z-index: 0;
  pointer-events: none;
}
.timeline.in-view .timeline-line{ transform: translateY(-50%) scaleX(1); }

.timeline-list{
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  min-width: max-content;
  position: relative;
  padding-bottom: 8px;
}
.tl-item{
  flex: 0 0 clamp(260px, 28vw, 340px);
  scroll-snap-align: start;
  position: relative;
}
.tl-item .tl-dot{
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: #fff;
  border: 4px solid var(--rose-700);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255,90,107,.15);
  transform: scale(0);
  transition: transform 500ms cubic-bezier(.22,1,.36,1);
  z-index: 0;
}
.tl-card{
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 10px;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 800ms cubic-bezier(.22,1,.36,1),
              opacity 800ms cubic-bezier(.22,1,.36,1);
  z-index: 1;
}
.tl-top{ margin-bottom: 96px; }
.tl-bottom{ margin-top: 96px; }

.timeline.in-view .tl-item .tl-card{
  opacity: 1; transform: translateY(0);
  transition-delay: var(--delay, 0ms);
}
.timeline.in-view .tl-item .tl-dot{
  transform: scale(1);
  transition-delay: calc(var(--delay, 0ms) + 150ms);
}

/* FOTO TIMELINE — reserve space + stop CLS */
.tl-photo{
  margin:0 0 10px 0;
  border-radius:12px;
  overflow:hidden;
  transform: rotate(var(--tilt,0deg));
  box-shadow:0 12px 28px rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.06);
  position: relative;
  aspect-ratio: 16 / 9;       /* ✅ kunci rasio agar ruang “dipesan” */
}
.tl-photo img{
  display:block;
  width:100%;
  height:100%;                /* ✅ isi tinggi container */
  object-fit:cover;           /* ✅ isi tanpa ubah rasio gambar */
}

.tl-body .tl-date{ margin-bottom:8px; }
.tl-body p{ color:#bfc3cb; }

.timeline::-webkit-scrollbar{ height:8px; }
.timeline::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:8px; }
.timeline::-webkit-scrollbar-track{ background: transparent; }

.timeline::before, .timeline::after{
  content:""; position:absolute; top:0; bottom:0; width:42px; pointer-events:none;
}
.timeline::before{ left:0;  background: linear-gradient(90deg, var(--ink-900), transparent); }
.timeline::after{  right:0; background: linear-gradient(270deg, var(--ink-900), transparent); }

/* Prevent drag/select */
.timeline img,
.tl-photo img{ -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.timeline.grabbing, .timeline.grabbing *{
  -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
.timeline, .timeline *{ -webkit-tap-highlight-color: transparent; }

/* ================= FEATURES (Carousel Center-Peek) ================= */
#features .feat-card{
  width: min(640px, 88vw);
  margin-inline: auto;
  padding: 28px 28px 24px;
  border-radius: 22px;
  text-align: center;
  color:#e9eef6;
  background:
    radial-gradient(110% 110% at 10% 0%, rgba(255,68,90,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease;
}
#features .feat-card:hover{
  transform: translateY(-4px);
  box-shadow:0 20px 48px rgba(0,0,0,.45);
}

/* icon pill */
#features .feat-ico{
  width:72px; height:72px; margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:18px;
  color:#ff6d82;
  background: radial-gradient(100% 100% at 30% 20%, rgba(255,83,103,.35), rgba(255,83,103,.06));
  box-shadow: inset 0 0 0 1px rgba(255,107,129,.25), 0 10px 18px rgba(255,83,103,.16);
}
#features .feat-ico::after{ content:none; }

#features .feat-card h5{ color:#fff; font-weight:700; margin:8px 0 6px; }
#features .feat-card p{ color:#cfd3da; margin:0; }

/* underline aksen */
#features .feat-bar{
  display:block; height:3px; width:78px; margin:16px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--rose-600), var(--rose-800));
  filter:drop-shadow(0 0 8px rgba(255,68,90,.45));
  opacity:.95;
}

/* reveal animation */
.feat-reveal{ opacity:0; transform: translateY(14px) scale(.98); }
.feat-reveal.in{ opacity:1; transform: translateY(0) scale(1); transition:.6s cubic-bezier(.2,.6,.2,1); }

/* peek effect */
.feature-peek .carousel-inner{ overflow:visible; }
@media (min-width: 992px){
  .feature-peek .carousel-item{
    transition: transform .5s ease, opacity .5s ease, filter .5s ease;
    transform-origin:center center;
  }
  .feature-peek .carousel-item.active .feat-card{
    transform: scale(1.02);
    box-shadow:0 20px 48px rgba(0,0,0,.45);
  }
  .feature-peek .carousel-item:not(.active){ filter: blur(.4px); }
  .feature-peek .carousel-item-start:not(.active),
  .feature-peek .carousel-item-prev:not(.active){
    transform: translateX(-28%) scale(.92);
    opacity:.7;
  }
  .feature-peek .carousel-item-end:not(.active),
  .feature-peek .carousel-item-next:not(.active){
    transform: translateX(28%) scale(.92);
    opacity:.7;
  }
}
@media (max-width: 991.98px){
  #features .feat-card{ width:92vw; }
}

/* Dots */
.dots-lg.carousel-indicators{ position:static; margin-top:18px; gap:10px; }
.dots-lg [data-bs-target]{ width:12px; height:12px; border-radius:50%; background:#5f6675; opacity:1; border:none; }
.dots-lg .active{ background:var(--rose-600); box-shadow:0 0 0 6px rgba(255,68,90,.12); }

/* ===== OUR MISSION ===== */
.mission-card{
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(226,51,66,.10), transparent 60%),
    radial-gradient(1000px 600px at 120% 120%, rgba(140,16,26,.12), transparent 60%),
    linear-gradient(180deg, #1b1e24, #15181d);
  backdrop-filter: saturate(120%) blur(6px);
  padding: clamp(26px, 4.2vw, 44px);
}
.mission-title{
  text-align:center;
  font-weight:800;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height:1.1;
  letter-spacing:.3px;
  margin: 6px 0 10px;
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
  position: relative;
}
.mission-title::after{
  content:"";
  display:block;
  width: clamp(160px, 22vw, 240px);
  height:4px;
  border-radius:999px;
  margin: 12px auto 4px;
  background: linear-gradient(90deg, var(--rose-600), #ffffff, var(--rose-800));
  background-size: 200% 100%;
  animation: missionShine 3.5s linear infinite;
  opacity:.9;
}
@keyframes missionShine{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
.mission-quote-mark{
  position:absolute;
  top: clamp(20px, 3.6vw, 40px);
  left: clamp(18px, 4vw, 40px);
  font-size: clamp(62px, 10vw, 120px);
  color: rgba(255,255,255,.06);
  z-index:0;
}
.mission-body{ position:relative; z-index:1; }
.mission-text{
  color:#E2E5EA;
  font-size: clamp(15px, 1.05vw + 10px, 19px);
  line-height:1.9;
  text-wrap: pretty;
}
.mission-line{
  width: 250px; height: 3px;
  background: linear-gradient(90deg, var(--rose-600), var(--rose-800));
  border-radius:999px;
  margin: 8px 0 10px 0;
  transform: scaleX(1);
  opacity:.85;
}
.mission-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:12px; padding:6px 10px; border-radius:999px;
  transition: transform .25s, background-color .25s, border-color .25s;
}
.chip:hover{
  transform: translateY(-2px);
  background: rgba(255,90,107,.16);
  border-color: rgba(255,90,107,.45);
}
.mission-reveal{ opacity:0; transform: translateY(16px) scale(.98); }
.mission-reveal.in{ opacity:1; transform:none; transition:.7s cubic-bezier(.22,1,.36,1); }

/* Brand logos */
.brand-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(58px, 2.4vw, 28px);
  margin-bottom: 14px;
}
.brand-logos img{ height: 80px; display: block; }
.bright-logo { filter: brightness(2.8); }

/* ================= TEAM ================= */
.team-card{
  width: min(640px, 88vw);
  padding: 28px 24px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, #17191e, #13151a);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}
.team-photo{
  display: block;
  max-width: clamp(220px, 32vw, 360px);
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 3px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  margin-inline: auto;
}

/* Carousel arrows (Team & Features) */
.carousel-control-prev,
.carousel-control-next{
  width: 10%;
  opacity: 1;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  width: 1.15rem;
  height: 1.15rem;
  filter: invert(1) grayscale(1);
  background-size: 100% 100%;
}
.carousel-control-prev::before,
.carousel-control-next::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
.carousel-control-prev:hover::before,
.carousel-control-next:hover::before{
  background: rgba(255,68,90,.22);
  border-color: rgba(255,68,90,.45);
  transform: translate(-50%,-50%) scale(1.06);
}

/* Dots (Team) */
.carousel-indicators.custom-dots{
  position: static;
  margin-top: 14px;
  gap: 10px;
}
.carousel-indicators.custom-dots [data-bs-target]{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5f6675;
  opacity: 1;
  border: none;
}
.carousel-indicators.custom-dots .active{
  background: var(--rose-600);
  box-shadow: 0 0 0 6px rgba(255,68,90,.12);
}

/* Quote */
.team-quote{
  max-width: 880px;
  margin-inline: auto;
  color: #E2E5EA;
}

/* Tablet patches */
@media (max-width: 991.98px){
  #features .feat-card{ width: min(640px, 100%); }
  .team-card{ width: min(640px, 100%); }
  #features .carousel-item,
  #team .carousel-item{ padding-inline: 8px; }
}

/* Socials */
.footer-social{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 42px;
}
.social-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.social-item a{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--rose-700), var(--rose-600));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: all .25s ease;
}
.social-item a:hover{
  background: linear-gradient(135deg, var(--rose-600), var(--rose-500));
  border-color: rgba(255,68,90,.45);
  transform: translateY(-3px) scale(1.08);
  color: #fff;
}
.social-label{
  margin-top: 6px;
  font-size: 13px;
  color: #e7e7ea;
  transition: color .25s ease, text-decoration .25s ease;
}
.social-label:hover{
  color: var(--rose-500);
  text-decoration: underline;
}

/* ===== NEW: Smooth min-height transition for features carousel (lock height via JS) ===== */
#features .carousel-inner{ transition: min-height .25s ease; }

/* ===== Buat Counter GA ===== */
.ga-counter{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.ga-counter .badge-rose{
  font-size:1.05rem;        
  padding:.6rem .9rem;      
  border-radius:999px;      
  box-shadow:0 6px 16px rgba(233,30,99,.25);
}
@media (min-width: 992px){
  .ga-counter .badge-rose{ font-size:1.15rem; padding:.65rem 1rem; }
}

/* NAV ala Steam */
.steam-nav{
  background-color:#171a21;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.steam-nav .navbar-brand .brand-text{
  color:#c7d5e0;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:1px;
}
.steam-nav .navbar-nav .nav-link{
  color:#c7d5e0 !important;
  text-transform:uppercase;
  font-weight:600;
  margin:0 8px;
  padding:10px 0;
  position:relative;
}
.steam-nav .navbar-nav .nav-link:hover{ color:#fff !important; }
.steam-nav .navbar-nav .nav-link.active{
  color:#1a9fff !important;
}
.steam-nav .navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px; background:#1a9fff;
}

/* Tombol unmute di atas video */
.overlay-unmute{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:2000;
  pointer-events:auto;
}

/* ================================
   GOOGLE TRANSLATE: UI CLEANUP
   ================================ */

/* Rapikan dropdown di navbar */
#google_translate_element .goog-te-gadget { font-size: 0; line-height: 1; margin: 0; }
#google_translate_element .goog-te-combo {
  font-size: 14px !important; padding: 4px 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff;
}
#google_translate_element .goog-te-combo option { color: #000; }

/* Sembunyikan banner/toolbar terjemahan yang disuntik Google */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-balloon-frame { display: none !important; }
.goog-tooltip { display: none !important; }
.skiptranslate iframe { display: none !important; } /* guard tambahan */

/* Netralisir offset yang sering ditambahkan Google */
html { margin-top: 0 !important; }
body { top: 0 !important; }

/* Pastikan navbar fixed-top selalu di atas */
.steam-nav.navbar.fixed-top { z-index: 1050; }

/* Hilangkan kotak dropdown bawaan Google */
#google_translate_element {
  display: none !important;
}

.flag-icon {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
}

.btn-ghost i {
  margin-right: 6px; /* jarak globe dengan teks EN */
}