body {
     margin: 0;
     font-family: Helvetica;
}
 h3 {
     font-size: 24px;
     font-weight: bold;
     margin: 20px 0;
     text-transform: uppercase;
     text-align: center;
}
 p {
     font-size: 20px;
     line-height: 1.8;
     margin: 10px 0;
     text-align: center;
     font-weight: 500;
    /* Normal */
     padding: 0px 15px;
    /* Padding atas dan bawah sebesar 50px */
}
 a {
     color: #000;
    /* Warna teks putih */
}
 .container {
     max-width: 1100px;
    /* Lebar maksimum */
     margin: 0 auto;
    /* Memusatkan konten */
     padding: 100px 15px 50px 15px;
    /* Atas 20px, kanan 15px, bawah 30px, kiri 15px */
}
 .container img {
     width: 100%;
    /* Gambar akan menyesuaikan lebar kontainer */
     height: auto;
    /* Menjaga rasio aspek gambar */
}
.container .image-event img {
    width: 100%;
    max-width: 400px;

}

/* CSS untuk Menu diatas */
 .header {
     position: fixed;
    /* Menggunakan fixed agar tetap berada di atas */
     top: 0;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 60px;
     box-sizing: border-box;
     z-index: 3;
    /* Pastikan berada di atas konten lainnya */
}
 .header-logo {
     width: 100px;
     height: auto;
}

 .header-logo.center {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 20px;
     cursor: pointer;
}
 .book-button svg {
     width: 100%;
     height: auto;
     filter: invert(1);
}


/* END -- CSS untuk Menu diatas */

/* CSS untuk Gambar Landing Page */
 .content-wrapper {
     display: flex;
    /* Menggunakan Flexbox */
     flex-direction: column;
    /* Menyusun elemen ke bawah (vertikal) */
     width: 100%;
}
 .content {
     width: 100%;
    /* Setiap elemen content mengisi lebar penuh */
     height: 100vh;
    /* Tinggi setiap gambar menjadi tinggi layar */
}
 .content img {
     width: 100%;
    /* Gambar memenuhi lebar container */
     height: 100%;
    /* Gambar memenuhi tinggi container */
     object-fit: cover;
    /* Menjaga proporsi gambar */
}
/* END -- CSS untuk Gambar Landing Page */

/* CSS untuk Menu Circle */
/* === Pastikan HEADER di atas overlay === */
.header{ position:fixed; z-index:10010; }

/* === Overlay menu: slide-up, di bawah header === */
.circle-menu-container{
  position: fixed; inset:0; background:#7e813f;
  display:flex; justify-content:center; align-items:center;

  transform: translateY(100%);   /* mulai di bawah layar */
  opacity: 0;
  pointer-events: none;

  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  z-index: 10000;                 /* < header */
}
.circle-menu-container.active{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* === Ukuran square responsif (konsisten hp & desktop) === */
.circle-menu{
  position: relative;
  width: clamp(260px, 62vmin, 520px);
  height: clamp(260px, 62vmin, 520px);
}
.center-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 68%; height:auto;
}

/* SVG pas ke kotak */
.circle-menu .circle-text{ display:block; width:100%; height:100%; }

/* Teks dalam SVG (bukan di <svg>) */
.circle-menu .circle-text text{
  font-size: clamp(18px, 2.6vmin, 26px);
  letter-spacing: .02em;
  fill: #F3F3EA;
  font-family: Helvetica, Arial, sans-serif;
}

/* Link di SVG */
.circle-menu .circle-text a{
  fill: currentColor; color: #F3F3EA;
  text-decoration: none; pointer-events: all;
}
.circle-menu .circle-text a:hover{ fill:#f58312; }

/* iOS tap highlight & text-size-adjust */
.circle-menu-container { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* END -- CSS untuk Menu Circle */

/* CSS untuk Fixed Logo JLP Lingkaran */
 .fixed-logo {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 250px;
    /* Ukuran logo */
     height: auto;
     mix-blend-mode: difference;
    /* Efek negatif */
     z-index: 4;
}
 .fixed-logo.hidden {
     opacity: 0;
     pointer-events: none;
}
/* END -- CSS untuk Fixed Logo JLP Lingkaran */

/* Overlay - Judul disetiap halaman */
 .overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 20%;
    /* SVG size */
     height: auto;
     z-index: 5;
}
 .overlay.hidden {
     opacity: 0;
     pointer-events: none;
}
/* END Overlay */
 .faq-section h3 {
     font-size: 40px;
     color: #f58312;
}

 .whatsapp-contact {
     display: flex;
     align-items: center;
     font-family: Arial, sans-serif;
     font-size: 18px;
     color: #000;
}
 .whatsapp-icon svg {
     width: 24px;
    /* Ukuran ikon */
     height: 24px;
     margin-right: 8px;
    /* Jarak antara ikon dan teks */
}
/* di Menu Sleep */
 .balcony {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .balcony img {
     width: 20%;
    /* Default untuk layar besar */
     height: auto;
     max-width: 800px;
    /* Batas maksimum */
     padding: 50px;
    /* Padding atas dan bawah sebesar 50px */
}
 .bay-window {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .bay-window img {
     width: 25%;
    /* Default untuk layar besar */
     height: auto;
     max-width: 800px;
    /* Batas maksimum */
     padding: 50px;
    /* Padding atas dan bawah sebesar 50px */
}
 .suite {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .suite img {
     width: 8%;
    /* Default untuk layar besar */
     height: auto;
     max-width: 800px;
    /* Batas maksimum */
     padding: 50px;
    /* Padding atas dan bawah sebesar 50px */
}
 .junior-suite {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .junior-suite img {
     width: 22%;
    /* Default untuk layar besar */
     height: auto;
     max-width: 800px;
    /* Batas maksimum */
     padding: 50px;
    /* Padding atas dan bawah sebesar 50px */
}
 .family-suite {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .family-suite img {
     width: 17%;
    /* Default untuk layar besar */
     height: auto;
     max-width: 800px;
    /* Batas maksimum */
     padding: 50px;
    /* Padding atas dan bawah sebesar 50px */
}

	.hidden {
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.6s ease;
	}

/* CSS Halaman Sleep */
		.room-features {
			display: flex;
			gap: 20px; /* Jarak antara kolom kiri dan kanan */
			max-width: 1050px;
			margin: 0 auto;
			align-items: flex-start; /* Pastikan konten rata atas */
			padding: 0px 0px 70px 0px;
		}

		.room-features-left {
			flex: 3; /* Kolom kiri lebih besar */
			text-align: left; /* Konten rata kanan */
			font-size: 18px;
		}

		.room-features-right {
			flex: 1; /* Kolom kanan lebih kecil */
			text-align: right; /* Konten rata kanan */
			text-decoration: underline; /* Menambahkan garis bawah */
			font-style: italic; /* Membuat font menjadi miring */  
			font-size: 13px;
			margin-top:20px;
			margin-right:15px;
		}

	.jam{
		font-size: 19px;
		text-align: center;
	}
/* CSS Untuk Menyesuikan Ukuran Device */
/* Untuk ukuran handphone kecil */
 @media (max-width: 479px) {
     p {
         font-size: 15px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .header {
         padding: 15px 20px;
        /* Padding lebih kecil untuk layar kecil */
    }
     .header-logo {
         width: 60px;
    }
     .header-logo.center {
         width: 16px;
    }
     .center-logo {
         width: 200px;
    }
     .circle-menu {
         width: 300px;
         height: 300px;
    }
     .circle-text svg {
         font-size: 18px;
    }
     .fixed-logo {
         width: 140px;
    }
     .container {
         padding: 50px 10px 40px 10px;
        /* Padding lebih kecil di layar kecil */
    }
     .overlay {
         width: 60%;
        /* Lebar lebih besar di layar kecil */
    }

	.room-features {
    display: flex;
    flex-direction: column; /* Mengatur elemen secara vertikal */
    align-items: center; /* Menengahkan elemen secara horizontal */
    text-align: center; /* Menengahkan teks */
	padding: 0px 0px 0px 0px;
  }

  .room-features-right {
    margin-top: 5px; /* Beri jarak ke atas */
    text-align: center; /* Menengahkan teks dalam elemen */
    width: 100%; /* Pastikan elemen mengambil seluruh lebar */
  }

  .room-features-right a {
    display: inline-block; /* Biar tautan tampil rapi */
    margin: 0 auto; /* Menengahkan tautan */
	margin-bottom: 30px; 
    text-decoration: underline; /* Garis bawah tetap ada */
    font-size: 13px; /* Ukuran font disesuaikan */
  }
  .room-features-left{
	  font-size: 15px;
	  padding: 0px 20px 0px 0px;
	  /* Atas 20px, kanan 15px, bawah 30px, kiri 15px */
  }
     .faq-section h3 {
         font-size: 20px;
         color: #f58312;
    }
     .balcony img {
         width: 40%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 30px;
        /* Padding atas dan bawah sebesar 50px */
    }
     .bay-window img {
         width: 45%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 50px;
        /* Padding atas dan bawah sebesar 50px */
    }
     .suite img {
         width: 15%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 50px;
        /* Padding atas dan bawah sebesar 50px */
    }
     .junior-suite img {
         width: 40%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 50px;
        /* Padding atas dan bawah sebesar 50px */
    }
     .family-suite img {
         width: 37%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 50px;
        /* Padding atas dan bawah sebesar 50px */
    }
	
	.container .image-event img {
		width: 100%;
		max-width: 200px;
	}
		.jam{
		font-size: 15px;
		text-align: center;
	}
}
/* Untuk handphone medium */
 @media (min-width: 480px) and (max-width: 767px) {
     p {
         font-size: 16px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .header {
         padding: 20px 30px;
        /* Padding lebih kecil untuk layar sedang */
    }
     .header-logo {
         width: 80px;
    }
     .header-logo.center {
         width: 20px;
    }
     .center-logo {
         width: 200px;
    }
     .circle-menu {
         width: 300px;
         height: 300px;
    }
     .circle-text svg {
         font-size: 20px;
    }
     .fixed-logo {
         width: 100px;
        /* Ukuran lebih kecil untuk layar kecil */
    }
     .container {
         padding: 60px 15px 35px 15px;
        /* Menyesuaikan untuk layar medium */
    }
     .overlay {
         width: 50%;
        /* Menyesuaikan untuk layar medium */
    }
     .room-features {
         flex-direction: column;
        /* Kolom berubah menjadi vertikal */
    }
     .room-features-left, .room-features-right {
         flex: 1;
         text-align: center;
        /* Konten rata tengah untuk layar kecil */
    }
     .room-features-right {
         margin-top: 0px;
        /* Tambahkan jarak atas untuk kolom kanan */
         text-align: center;
         font-size: 12px;
    }
     .faq-section h3 {
         font-size: 20px;
         color: #f58312;
    }
     .balcony img {
         width: 50%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 30px;
        /* Padding atas dan bawah sebesar 50px */
    }
	.container .image-event img {
		width: 100%;
		max-width: 240px;
	}
}
/* Untuk tablet portrait */
 @media (min-width: 768px) and (max-width: 1023px) {
     p {
         font-size: 18px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .container {
         padding: 80px 20px 30px 20px;
        /* Menyesuaikan untuk tablet portrait */
    }
     .overlay {
         width: 40%;
        /* Lebih kecil di tablet portrait */
    }
     .balcony img {
         width: 40%;
        /* Default untuk layar besar */
         height: auto;
         max-width: 800px;
        /* Batas maksimum */
         padding: 30px;
        /* Padding atas dan bawah sebesar 50px */
    }
	.container .image-event img {
		width: 100%;
		max-width: 270px;
	}
}
/* Untuk tablet landscape */
 @media (min-width: 1024px) and (max-width: 1279px) {
     p {
         font-size: 20px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .container {
         padding: 90px 30px 40px 30px;
        /* Padding untuk tablet landscape */
    }
     .overlay {
         width: 30%;
        /* Menyesuaikan di tablet landscape */
    }
	.container .image-event img {
		width: 100%;
		max-width: 300px;
	}
}
/* Untuk desktop kecil */
 @media (min-width: 1280px) and (max-width: 1439px) {
     p {
         font-size: 20px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .container {
         padding: 100px 40px 50px 40px;
        /* Padding untuk desktop kecil */
    }
     .overlay {
         width: 25%;
        /* Lebih kecil di desktop kecil */
    }
	.container .image-event img {
		width: 100%;
		max-width: 380px;
	}
}
/* Untuk desktop besar */
 @media (min-width: 1440px) {
     p {
         font-size: 24px;
        /* Font lebih kecil untuk tablet landscape */
    }
     .container {
         padding: 120px 50px 60px 50px;
        /* Padding lebih besar untuk layar besar */
    }
     .overlay {
         width: 20%;
        /* Default ukuran untuk layar besar */
    }
	.container .image-event img {
		width: 100%;
		max-width: 400px;
	}
}