/* ================= RESET DASAR ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  margin:0;                 /* ⬅️ WAJIB 0 */
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#c0c0c0;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
}

/* semua section */
section {
  padding: 60px 10%;
}

/* ================= HERO / HOME ================= */

.hero {
  text-align: center;
  max-width: 850px;
  margin: auto;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero p {
  font-size: 17px;
  margin-bottom: 15px;
}

/* ================= SERVICES ================= */

.services h1 {
  text-align: center;
}

.services p {
  text-align: center;
}

/* grid card layanan */
.services-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.services-list li {
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.services-list li:hover {
  transform: translateY(-5px);
}

.services-list img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-top: 15px;
  border-radius: 10px;
}

/* ================= PORTFOLIO ================= */

.portfolio h1 {
  text-align: center;
}

.project {
  margin-top: 60px;
}

.project h2 {
  margin-bottom: 20px;
  text-align: center;
}

/* gallery grid modern */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* ================= CONTACT ================= */

.contact{
  padding:80px 10%;
  text-align:center;
}

form{
  max-width:500px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

input, textarea{
  padding:14px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:16px;
  font-family:inherit;
}

textarea{
  min-height:120px;
  resize:vertical;
}

button{
  background:black;
  color:white;
  padding:14px;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  background:#333;
}


/* ================= VISION & MISSION ================= */

.vision, .mission {
  background: #eef1f5;
}

.vision h1,
.mission h1 {
  text-align: center;
  margin-bottom: 30px;
}

/* card isi */
.vision p,
.mission ul {
  background: white;
  font-size: 16px;
  padding: 35px;
  border-radius: 12px;
  max-width: 850px;
  margin: auto;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* list misi */
.mission ul {
  padding-left: 25px;
}

.mission li {
  margin-bottom: 12px;
}

/* ================= FOOTER ================= */

.footer {
  background: #222;
  color: #ddd;
  margin-top: 60px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 40px;
  padding: 50px 10%;
}

.footer h2, .footer h3 {
  color: white;
  margin-bottom: 15px;
}

.footer a {
  display: block;
  color: #bbb;
  text-decoration: none;
  margin-bottom: 8px;
  transition: 0.3s;
}

.footer a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #444;
  font-size: 14px;
}

/* ================= NAVBAR DESKTOP ================= */

.navbar{
  position: relative;
  z-index: 9999;
  background:#5c6e8f;
  padding:15px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* brand kiri */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  height:40px;
}

.brand h2{
  margin:0;
  color:white;
}

/* menu desktop */
.menu{
  list-style:none;
  display:flex;
  gap:40px;
}

.menu a{
  color:white;
  text-decoration:none;
  font-weight:bold;
}

/* hamburger default (disembunyikan di desktop) */
.hamburger{
  display:none;
  font-size:28px;
  color:white;
  cursor:pointer;
}

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

  .navbar{
    padding:15px 20px;
  }

  /* sembunyikan menu desktop */
  .menu{
    position:absolute;
    top:70px;
    right:0;
    background:#5c6e8f;
    width:220px;
    flex-direction:column;
    align-items:center;
    padding:20px 0;

    /* ANIMASI */
    transform:translateY(-20px);
    opacity:0;
    pointer-events:none;
    transition:0.3s ease;
  }

  .menu.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* tampil saat diklik */
  .menu.active{
    display:flex;
  }

  /* tampilkan hamburger */
  .hamburger{
    display:block;
  }

  /* kecilkan logo & teks */
  .brand img{
    height:32px;
  }

  .brand h2{
    font-size:18px;
  }
  
  .slideshow{
    height:45vh;
    min-height:250px;
    z-index: 1;
  }

  .slide-text{
    left:20px;
    right:20px;
    bottom:20px;
    padding:15px 20px;
  }

  .slide-text h1{
    font-size:22px;
  }

  .slide-text p{
    font-size:12px;
  }

}


/* ===== SLIDESHOW ===== */

/* ===== FULL BLEED HERO SLIDESHOW ===== */
.slideshow{
  position:relative;

  width:100vw;
  left:50%;
  right:50%;
  margin-left:-55vw;
  margin-right:-55vw;

  margin-top:-60px;   /* ⬅️ INI KUNCINYA */
  margin-bottom:10px; /* jarak ke konten bawah */

  height:75vh;
  min-height:350px;
  max-height:700px;
  overflow:hidden;
}
.slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease;
}

.slide.active{
  opacity:1;
  z-index:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* teks di atas foto */
.slide-text{
  position:absolute;
  bottom:8%;
  left:8%;
  color:white;
  background:rgba(0,0,0,0.4);
  padding:32px 35px;
  border-radius:10px;
  max-width:600px;
}

.slide-text h1{
  margin:0;
  font-size:30px;
}

.slide-text p{
  margin-top:10px;
  color:white;
  font-size:18px;
}

/* ===== HAMBURGER ICON ===== */

.hamburger{
  cursor:pointer;
  display:none;
}

.hamburger span{
  display:block;
  width:25px;
  height:3px;
  background:white;
  margin:5px;
  transition:0.3s;
}

/* tampilkan hamburger hanya di mobile */
@media (max-width:768px){
  .hamburger{
    display:block;
  }
}

/* animasi jadi X */
.hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}

/* THANK YOU PAGE */
.thanks-page{
  height:80vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px;
}

.thanks-box{
  background:white;
  padding:60px 50px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  max-width:500px;
}

.thanks-box h1{
  margin-bottom:15px;
  font-size:36px;
}

.thanks-box p{
  margin:8px 0;
  color:#555;
}

.btn-home{
  display:inline-block;
  margin-top:25px;
  padding:12px 25px;
  background:black;
  color:white;
  text-decoration:none;
  border-radius:8px;
  transition:0.3s;
}

.btn-home:hover{
  background:#333;
}

/* container tombol */
.thanks-buttons{
  display:flex;
  gap:15px;
  justify-content:center;
  margin-top:25px;
  flex-wrap:wrap;
}

/* tombol whatsapp */
.btn-wa{
  display:inline-block;
  padding:12px 25px;
  background:#25D366;
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:bold;
  transition:0.3s;
}

.btn-wa:hover{
  background:#1ebe5d;
}