.hero-content{
	  margin-top: -40px; /* 🔥 naikkan seluruh blok */
	}

	.promo-hero-box {
	  background: rgba(255,255,255,0.95);
	  padding: 20px 24px;
	  border-radius: 14px;
	  color: #222;
	  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
	  border-left: 6px solid #ff5722;
	}

	.promo-hero-box a {
	  color: #ff5722;
	  font-weight: 700;
	  text-decoration: underline;
	}

	.promo-deadline{
	  background:#ffe5e5;
	  color:#b71c1c;
	  padding:6px 10px;
	  border-radius:6px;
	  display:inline-block;
	}

	@media(max-width:576px){
	  .hero-content{
		margin-top: -170px; /* mobile lebih halus */
	  }

	  .hero-content h4{
		font-size:13px;
	  }
	}

	.ticket-form {
		background-color: rgba(0,0,0,0.7); /* hitam 70% transparan */
		border-radius: 0.5rem; /* rounded */
		padding: 2rem;
	}

	#about {
		scroll-margin-top: 30px; /* tinggi navbar */
	}

	#about::before {
		content: "";
		display: block;
		height: 30px; /* tinggi navbar */
		margin-top: -30px; /* geser konten ke atas */
	}

	.about p,
	.feature p,
	.fitur p{
	  font-size: 0.85rem;   /* sebelumnya default 1rem */
	  line-height: 1.6;
	}

	/* ===================== */
	/* COMPARE SECTION */
	/* ===================== */

	.compare-section{
	  background:#0b0f14;
	  padding:70px 15px;
	  color:#fff;
	}

	.compare-header{
	  text-align:center;
	  margin-bottom:40px;
	}

	.compare-tag{
	  color:#4fc3f7;
	  font-size:13px;
	  letter-spacing:1px;
	  text-transform:uppercase;
	}

	.compare-header h1,
	.compare-header h2 {
	  color: #fff;
	}
	.compare-header h2{
	  font-size:26px;
	  margin:10px 0;
	}

	.compare-header p{
	  font-size:14px;
	  color:#b0b0b0;
	}

	/* GRID */
	.compare-grid{
	  display:grid;
	  grid-template-columns:1fr;
	  gap:20px;
	}

	/* CARD */
	.compare-card{
	  background:#ffffff;
	  color:#111;
	  border-radius:16px;
	  padding:25px;
	  box-shadow:0 10px 30px rgba(0,0,0,.25);
	}

	.compare-card h4{
	  font-size:18px;
	  margin-bottom:15px;
	}

	.compare-card ul{
	  list-style:none;
	  padding:0;
	  margin:0;
	}

	.compare-card li{
	  font-size:14px;
	  padding:8px 0;
	  border-bottom:1px solid #eee;
	}

	.compare-card li:last-child{
	  border-bottom:none;
	}

	/* MANUAL */
	.compare-card.manual{
	  background:#f2f8ff;
	  color:#243447;
	  border-left:4px solid #4dabf7;
	}

	.compare-card.manual li{
	  border-color:rgba(255,255,255,.1);
	}

	/* CBT */
	.compare-card.cbt{
	  border-left:4px solid #4fc3f7;
	}

	/* DESKTOP */
	@media(min-width:768px){
	  .compare-grid{
		grid-template-columns:1fr 1fr;
	  }

	  .compare-header h2{
		font-size:32px;
	  }
	}

	.promo-link{
	  color:#ffc107; /* kuning bootstrap */
	  font-size:15px;
	}

	.promo-detail{
	  color:#ffffff;
	  text-decoration:underline;
	  margin-left:6px;
	}

	.promo-link:hover{
	  color:#ffda44;
	}

	.promo-link:hover .promo-detail{
	  color:#ffe27a;
	}

	@keyframes pulsePromo{
	  0%{opacity:1}
	  50%{opacity:.7}
	  100%{opacity:1}
	}

	.promo-link{
	  animation:pulsePromo 2s infinite;
	}


	/* ============================= */
	/* MOBILE OPTIMIZATION HERO */
	/* ============================= */

	@media (max-width: 768px){

	  /* Sembunyikan CTA di hero */
	  .hero-cta{
		display:none !important;
	  }

	  /* Kecilkan subjudul atas */
	  .carousel-caption h1{
		font-size:20px;
		margin-bottom:8px;
	  }

	  /* Kecilkan judul utama */
	  .hero-title{
		font-size:22px;
		line-height:1.3;
		margin-bottom:12px;
	  }

	.carousel-caption p{
	  font-size:12px !important;
	  line-height:1.45;
	}

	  /* Paragraf */
	  .carousel-caption p{
		font-size:13px;
		line-height:1.5;
	  }

	  /* Padding caption dikurangi */
	  .carousel-caption{
		padding-top:20px;
		padding-bottom:20px;
	  }

	}

	/* ============================
	   MOBILE OPTIMIZATION (HP)
	============================ */
	@media (max-width: 768px){

	  .nav-bar{
		padding-top:6px !important;
		padding-bottom:6px !important;
	  }

	  .navbar-brand h1{
		font-size:20px !important;
		line-height:1.2;
	  }

	  .navbar-brand small,
	  .navbar-brand span{
		font-size:12px;
	  }

	  .hero-header{
		padding-top:110px !important;
		padding-bottom:60px !important;
	  }

	  .hero-header h5,
	  .hero-header .text-primary{
		font-size:14px !important;
	  }

	  .hero-header h1{
		font-size:24px !important;
		line-height:1.3 !important;
	  }

	  .hero-header p{
		font-size:14px !important;
		line-height:1.6;
	  }

	  .hero-header .btn{
		font-size:14px;
		padding:10px 18px;
		width:100%;
	  }

	  .hero-header .bg-white,
	  .hero-header .glass-box{
		margin-top:30px;
		padding:20px !important;
	  }

	  .hero-header input{
		font-size:14px;
		padding:10px;
	  }

	}

	/* ============================
	   FLOATING GROUP
	============================ */
	.floating-cta-group{
	  position:fixed;
	  right:20px;
	  bottom: 60px;
	  display:flex;
	  flex-direction:column;
	  gap:12px;
	  z-index:9999;
	}

	/* Mobile */
	@media(max-width:576px){
	  .floating-cta-group{
		bottom: 50px;
		right:15px;
	  }
	}

	/* WhatsApp */
	.floating-wa{
	  background:#25D366;
	  color:#fff;
	  padding:12px 18px;
	  border-radius:50px;
	  font-size:12px;
	  font-weight:600;
	  display:flex;
	  align-items:center;
	  gap:8px;
	  text-decoration:none;
	  box-shadow:0 6px 18px rgba(0,0,0,0.25);
	  transition:.3s;
	}

	.floating-wa i{
	  font-size:20px;
	}

	.floating-wa:hover{
	  background:#1ebe5d;
	  color:#fff;
	  transform:translateY(-2px);
	}

	/* Default: sembunyikan dulu */
	.floating-cta-group{
	  position: fixed;
	  bottom: 20px;
	  right: 15px;
	  display: none; /* desktop default hidden */
	  flex-direction: column;
	  gap: 10px;
	  z-index: 9999;
	}

	/* Tampilkan hanya di HP */
	@media (max-width: 991.98px){
	  .floating-cta-group{
		display: flex;
	  }
	}
	/* ============================
	   PRIMARY CTA (Unified Button)
	============================ */
	.btn-cta-primary{
	  background:linear-gradient(135deg,#4facfe,#00c6ff);
	  color:#fff;
	  padding:12px 18px;
	  border-radius:50px;
	  font-size:12px;
	  font-weight:600;
	  text-align:center;
	  border:none;
	  text-decoration:none;
	  cursor:pointer;
	  box-shadow:0 6px 18px rgba(79,172,254,.45);
	  transition:.3s;
	}

	/* ADMIN CTA (Lebih Biru) */
	.btn-cta-admin{
	  background:linear-gradient(135deg,#4facfe,#00c6ff);
	  color:#fff;
	  padding:12px 18px;
	  border-radius:50px;
	  font-size:12px;
	  font-weight:600;
	  text-align:center;
	  border:none;
	  cursor:pointer;
	  box-shadow:0 6px 18px rgba(13,110,253,.45);
	  transition:.3s;
	}

	.btn-cta-admin:hover{
	  background:linear-gradient(135deg,#0b5ed7,#084298);
	  transform:translateY(-2px);
	}


	.btn-cta-primary:hover{
	  background:linear-gradient(135deg,#3a8bfd,#00b4f0);
	  color:#fff;
	  transform:translateY(-2px);
	}
	
	.btn-install{
	  background: linear-gradient(135deg,#4facfe,#00c6ff);
	  color: #fff;
	  padding: 12px 18px;
	  border-radius: 50px;
	  font-size:12px;
	  font-weight: 600;
	  border: none;
	  cursor: pointer;

	  display:flex;
	  align-items: center;
	  gap: 8px;

	  box-shadow: 0 6px 18px rgba(79,172,254,.45);
	  animation: pulse 2s infinite;
	  bottom: 170px;
	}


	/* ============================
	   INSTALL PWA
	============================ */
	#installButton {
	  position: fixed;
	  right: 20px;
	  font-size: 13px;
	  padding: 10px 18px;
	  border-radius: 30px;
	  border: none;
	  background-color: #2563eb;
	  color: #fff;
	  font-weight: 600;
	  cursor: pointer;
	  display: none;
	  align-items: center;
	  gap: 8px;
	  box-shadow: 2px 4px 10px rgba(0,0,0,.25);
	  z-index: 9999;
	}

	#installButton:hover {
	  background-color: #1e40af;
	}

	/* Mobile floating size */
	@media(max-width:576px){
	  .floating-wa,
	  .btn-cta-primary,
	  .btn-install{
		font-size:12px;
		padding:10px 16px;
	  }
	  #installButton {
		bottom: 210px;
	  }
	}

	@media(max-width:768px){
	  #promoWebsiteModal ul li,
	  .text-warning{
		font-size:12px;
	  }
	}

	/* Overlay */
	.lightbox-overlay {
	  position: fixed;
	  inset: 0;
	  background: rgba(0,0,0,0.88);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 9999;

	  opacity: 0;
	  animation: fadeIn .25s ease forwards;
	}

	/* Image animation */
	.lightbox-overlay img {
	  max-width: 90%;
	  max-height: 90%;
	  border-radius: 10px;
	  box-shadow: 0 15px 40px rgba(0,0,0,.6);

	  transform: scale(0.85);
	  animation: zoomIn .3s ease forwards;
	}

	/* Close button */
	.lightbox-overlay .close-btn {
	  position: absolute;
	  top: 20px;
	  right: 25px;
	  font-size: 30px;
	  color: #fff;
	  cursor: pointer;
	  opacity: .7;
	  transition: .2s;
	}

	.lightbox-overlay .close-btn:hover {
	  opacity: 1;
	  transform: scale(1.1);
	}

	/* Hover hint image */
	.lightbox-img:hover {
	  opacity: 0.85;
	  transform: scale(1.02);
	  transition: .2s;
	}

	/* Animations */
	@keyframes fadeIn {
	  to { opacity: 1; }
	}

	@keyframes zoomIn {
	  to { transform: scale(1); }
	}

	/* ============================
	   MODAL
	============================ */
	body.modal-open .floating-cta-group{
	  display: none !important;
	}