/* ========== GLOBAL ========== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Segoe UI',Arial,sans-serif;
  background:url('pulai.webp') no-repeat center top fixed;
  background-size:cover;
  color:#333;
}
a{text-decoration:none;color:inherit}

/* ========== HEADER ========== */
.site-header{background:#003366;color:#fff;padding:15px 0}
.site-header .container{
  max-width:1100px;margin:auto;padding:0 20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap
}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
nav ul li a{color:#fff;font-weight:bold;transition:.3s}
nav ul li a:hover{color:#ffcc00}
.burger-toggle{display:none;background:none;border:none;font-size:26px;color:#fff;cursor:pointer}
.btn-daftar{background:#ffcc00;color:#000;padding:8px 15px;border-radius:4px;font-weight:bold}

/* ========== HERO (halaman index) ========== */
.hero{
  background:url('foto.jpeg') no-repeat center/cover;
  color:#fff;text-align:center;padding:100px 20px
}
.btn-primary{
  background:#ffcc00;color:#000;padding:12px 24px;margin-top:20px;
  border-radius:5px;font-weight:bold;display:inline-block
}

/* ========== WHITE BOX GENERIC (dipakai di prosedur & persyaratan) ✨ ========== */
.box-white{
  background:#fff;
  border-radius:10px;
  padding:40px 30px;
  max-width:1000px;
  width:100%;
  margin:60px auto;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.box-white h2{color:#003366;font-size:24px;margin-bottom:20px}
.box-white ol,
.box-white ul{padding-left:25px;line-height:1.8;font-size:16px;color:#444}
.box-white li{margin-bottom:10px}

/* section wrapper supaya kotak berada di tengah */
.section-center{
  padding:60px 20px;
  display:flex;
  justify-content:center;
}

/* ========== VISA HIGHLIGHT (gelembung biru) ========== */
.visa-highlight{
  position:relative;background:linear-gradient(#6fa0b1,#7ea9b6);
  padding:80px 20px;text-align:center;color:#fff;overflow:hidden
}
.visa-highlight h2{font-size:20px;max-width:900px;margin:0 auto 40px;font-weight:bold}
.visa-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;position:relative;z-index:2}
.visa-card{background:rgba(255,255,255,.9);color:#003366;width:180px;padding:20px;border-radius:10px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.1);transition:.3s}
.visa-card:hover{transform:translateY(-6px)}
.visa-card img{width:100%;height:auto;margin-bottom:10px}
.bubble-overlay{position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.25)0%,transparent 60%),
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.23)0%,transparent 60%),
    radial-gradient(circle at 50% 80%,rgba(255,255,255,.22)0%,transparent 60%),
    radial-gradient(circle at 90% 60%,rgba(255,255,255,.18)0%,transparent 60%)}

/* ========== DOWNLOAD APP SECTION (M-Paspor) ========== */
.download-app{
  display:flex;align-items:center;justify-content:center;gap:60px;
  background:#f1f2f5;padding:80px 20px;flex-wrap:wrap
}
.download-app .phone-container{flex:1 1 300px;text-align:center}
.download-app .phone-container img{max-width:100%;height:auto}
.download-app .app-info{flex:1 1 400px;max-width:500px}
.download-app .app-info h2{font-size:30px;margin-bottom:15px;color:#222}
.download-app .app-info p{font-size:16px;color:#444;margin-bottom:20px}
.download-app .app-buttons{display:flex;gap:15px;flex-wrap:wrap}
.download-app .app-buttons img{height:50px;cursor:pointer;transition:.3s}
.download-app .app-buttons img:hover{transform:scale(1.05)}

/* ========== FOOTER ========== */
footer{background:#222;color:#fff;font-size:14px}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;max-width:1100px;margin:auto;padding:40px 20px 30px
}
.footer-grid h4{color:#ffcc00;margin-bottom:10px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:6px}
.footer-grid ul li a{color:#ddd;transition:.3s}
.footer-grid ul li a:hover{color:#ffcc00}
.footer-grid img{max-width:150px;margin-bottom:10px}

/* footer social icon – ukuran dikunci ✨ */
.footer-sosmed{display:flex;gap:10px;margin-top:10px}
.footer-sosmed img{
  width:28px;height:28px;object-fit:contain;
  filter:brightness(90%);transition:.3s
}
.footer-sosmed img:hover{filter:brightness(130%);transform:scale(1.1)}

.footer-bottom{text-align:center;padding:15px 10px;background:#111;color:#bbb;font-size:13px;border-top:1px solid #333}

/* ========== RESPONSIVE ========== */
@media (max-width:768px){
  .burger-toggle{display:block}
  nav{display:none;width:100%}
  nav.nav-open{display:block}
  nav ul{flex-direction:column;background:#003366;padding:10px 0}
  nav ul li{padding:10px 20px}
  .site-header .container{flex-direction:column;align-items:flex-start;gap:10px}

  /* white box padding lebih kecil di mobile */
  .box-white{padding:30px 20px}

  /* download-app stack */
  .download-app{flex-direction:column;text-align:center}
  .download-app .app-buttons{justify-content:center}
}

/* WHATSAPP INFO */
.payment-info {
  background: #e9f2ff;
  border-left: 5px solid #004080;
  padding: 15px;
  margin-top: 20px;
  border-radius: 6px;
  color: #003366;
  font-size: 16px;
}
.payment-info a {
  display: inline-block;
  margin-top: 10px;
  background: #25D366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
}
.payment-info a:hover {
  background: #1ebe5b;
}