* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Poppins", sans-serif; background:#f4f7fb; color:#333; }

/* NAVBAR TRANSPARAN DI ATAS HERO */
.navbar {
  position: absolute; top:0; width:100%;
  background: rgba(0,0,0,0.2);
  color:#fff; z-index:100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled { background: #fff; color:#007bff; box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.navbar .container { max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:15px 20px;}
.navbar .logo { font-weight:bold; font-size:1.5em; color:inherit; }
.navbar .menu { list-style:none; display:flex; gap:20px; }
.navbar .menu li a { text-decoration:none; color:inherit; font-weight:500; transition:0.3s; }
.navbar .menu li a:hover { color:#00bcd4; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:25px; height:3px; background:#fff; display:block; }

/* HERO */
.hero {
  height:70vh;
  background: linear-gradient(rgba(0,123,255,0.5),rgba(0,188,212,0.5)), url("../images/asia-tour-header.jpg") center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.hero-content h1 { font-size:3em; margin-bottom:10px; text-shadow:0 3px 8px rgba(0,0,0,0.3);}
.hero-content h2 { font-size:1.6em; margin-bottom:10px; text-shadow:0 2px 6px rgba(0,0,0,0.2);}
.hero-content p { font-size:1.1em; margin-bottom:20px; text-shadow:0 1px 4px rgba(0,0,0,0.2);}
.cta-btn { padding:15px 35px; border-radius:30px; background:#fff; color:#007bff; font-weight:bold; text-decoration:none; transition:0.3s;}
.cta-btn:hover { background:#e0f7ff; transform:scale(1.05); }

/* SECTIONS */
section { max-width:1200px; margin:80px auto; padding:0 20px; text-align:center; }
section h2 { font-size:2em; margin-bottom:20px; color:#007bff; }

/* CARD */
.features { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top: 20px; }
/* .feature {
  flex:1 1 220px; padding:25px; border-radius:15px; color:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  opacity:0; transform:translateY(40px); transition:all 0.7s ease;
} */

.feature {
  position: relative;
  flex:1 1 220px;
  padding: 35px 25px 25px; 
  border-radius:15px;
  color:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  opacity:0;
  transform:translateY(40px);
  transition:all 0.7s ease;
}

/* FLAG STACK */
.flag-stack {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  z-index: 2;
}

.feature {
  position: relative;
}

/* FLAG GROUP */
.flag-group {
  position: absolute;
  top: -14px;
  left: -14px;
  display: flex;
  gap: 0;
  z-index: 2;
}

/* FLAG ITEM */
.flag-group img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  margin-left: -14px; /* overlap */
}

/* flag pertama jangan overlap */
.flag-group img:first-child {
  margin-left: 0;
}

.feature.show { opacity:1; transform:translateY(0); }
.feature h3 { margin-bottom:10px; font-size:1.2em; }
.feature p { font-size:0.95em; }

.feature:hover {
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  transform:translateY(-5px);
  transition:all 0.3s ease;
}

.feature:hover .flag-stack {
  transform: scale(1.08) rotate(-3deg);
  transition: 0.3s ease;
}

.feature:hover .flag-group img {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.feature:hover .flag-group img:nth-child(2) {
  transform: translateY(-6px);
}

.feature:hover .flag-group img:nth-child(3) {
  transform: translateY(-10px);
}


/* @media(max-width:768px){
  .flag-stack {
    width: 36px;
    height: 36px;
    top: -10px;
    left: -10px;
  }
}

@media(max-width:768px){
  .flag-group img {
    width: 36px;
    height: 36px;
    margin-left: -12px;
  }
} */


/* GRADIENTS */
.gradient-orange { background: linear-gradient(135deg,#ff9800,#ffc107); }
.gradient-blue { background: linear-gradient(135deg,#2196f3,#03a9f4); }
.gradient-purple { background: linear-gradient(135deg,#9c27b0,#ba68c8); }
.gradient-pink { background: linear-gradient(135deg,#e91e63,#f06292); }
.gradient-green { background: linear-gradient(135deg,#4caf50,#81c784); }
.gradient-yellow { background: linear-gradient(135deg,#ffeb3b,#ffc107); color:#333; }
.gradient-teal { background: linear-gradient(135deg,#009688,#4db6ac); }
.gradient-red { background: linear-gradient(135deg,#f44336,#e57373); }


/* MAP */
#map { height:400px; border-radius:15px; margin-top:20px; box-shadow:0 6px 15px rgba(0,0,0,0.2); }

/* BUTTON */
.wa-btn { display:inline-block; background:#25D366; color:#fff; padding:15px 35px; border-radius:30px; text-decoration:none; font-weight:bold; transition:0.3s; }
.wa-btn:hover { background:#1ebe5d; transform:scale(1.05); }

/* FLOATING WHATSAPP */
.wa-float {
  position:fixed; bottom:20px; right:20px; background:#25D366; color:#fff;
  padding:14px 20px; border-radius:50px; text-decoration:none; font-weight:bold;
  box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:9999;
  transition:transform 0.2s ease;
}
.wa-float:hover { transform:scale(1.1); }

/* RESPONSIVE */
@media(max-width:768px){
  .navbar .menu { 
    display:none; 
    flex-direction:column; 
    background:#56e5f8; 
    position:absolute; 
    right:0; 
    top:60px; 
    width:200px; 
    padding:20px; 
    /* border-radius:8px;  */
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
  }
  .hamburger { display:flex; }
  .navbar .menu.show { display:flex; }
}

.footer {
  background-color: rgba(0,188,212,0.5);
  color: #fff;
  padding: 40px 20px 20px;
  font-family: "Poppins", sans-serif;
}

.footer a {
  color: #00bcd4;
  text-decoration: none;
  margin-right: 10px;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.footer-about, .footer-contact, .footer-social {
  flex: 1 1 250px;
}

.footer-about h3, .footer-contact h4, .footer-social h4 {
  margin-bottom: 10px;
}

.footer-bottom {
  text-align: center;
  margin-top: 25px;
  font-size: 0.9em;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-about, .footer-contact, .footer-social {
    flex: unset;
  }
}

#map {
  width: 100%;
  height: 450px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,.18);
}

/* Toggle icon control */
.map-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 1000;
}

.map-toggle button {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  opacity: .4;
  transition: .25s;
}

.map-toggle button.active {
  background: #00bcd4;
  color: #fff;
  opacity: 1;
}

/* Popup style */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
}

.map-popup a {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  background: #00bcd4;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
}

.map-toggle button:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Floating focus button */
.map-focus-btn {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: .25s;
}

.map-focus-btn:hover {
  transform: scale(1.05);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .map-focus-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}