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

/* ===== FULL SCREEN LAYOUT ===== */
html, body{
  height:100%;
  width:100%;
  font-family:'Poppins',sans-serif;
  background:#111; /* luar hitam */
}

/* ===== PAGE BASE (ALL PAGES) ===== */
.page{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  width:100%;
  background:#b59f76;
  padding:25px 150px;   /* control kiri kanan */

  /* footer static bawah */
  display:flex;
  flex-direction:column;
}

/* ===== BACKGROUND PAGE (FAQ / ABOUT) ===== */
.bgPage{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  width:100%;
  padding:25px 150px;

  /* footer static bawah */
  display:flex;
  flex-direction:column;
}

/* ===== BACKGROUND IMAGE + OVERLAY (warm tint) ===== */
.bgPhoto{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.9);
  z-index:1;
}

.bgOverlay{
  position:absolute;
  inset:0;
  background:rgba(90,75,45,.55);
  z-index:2;
}

/* ===== CONTENT ABOVE BG ===== */
.contentOnBg{
  position:relative;
  z-index:3;
  color:#fff;

  /* push footer */
  flex:1;
  display:flex;
  flex-direction:column;
}

/* ===== NAVBAR ===== */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
}

.mainLogo{width:140px;height:auto;}

.brandName{
  color:#fff;
  font-weight:700;
  font-size:28px;
  letter-spacing:.5px;
}

.brandTag{
  color:#fff;
  font-size:13px;
  letter-spacing:1px;
  margin-top:2px;
}

.nav{
  display:flex;
  gap:22px;
  align-items:center;
}

.navLink{
  text-decoration:none;
  color:#fff;
  font-weight:600;
  padding:8px 15px;
  border-radius:10px;
  transition:.25s;
}

.navLink:hover{background:rgba(255,255,255,.15);}

.navLink.active{
  border:1px solid #fff;
  background:rgba(255,255,255,.2);
}

/* ===== HERO (Homepage) ===== */
.hero{
  display:grid;
  grid-template-columns:1.05fr 1.25fr 0.95fr;
  gap:30px;
  align-items:center;
  margin-top:55px;
}

.left h1{
  color:#fff;
  font-size:56px;
  line-height:1.05;
  font-weight:700;
}

.btn{
  display:inline-block;
  margin-top:22px;
  padding:12px 24px;
  background:rgba(0,0,0,.28);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:12px;
}

.center{display:flex;justify-content:center;position:relative;}

.heroImg{
  width:520px;
  max-width:100%;
  position:relative;
  top:-10px;
}

.right{color:#fff;}

.desc{
  font-size:16px;
  line-height:1.5;
  margin-bottom:18px;
  max-width:340px;
}

.cta{
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.arrow{font-size:28px;}
.login{color:#2b0b58;text-decoration:underline;font-weight:700;}

/* ===== FOOTER (STATIC BOTTOM) ===== */
.footer{
  margin-top:auto;
  padding:25px 0;
  width:100%;
  text-align:center;
  font-size:12px;
  color:#fff;
}

/* ===== CREATOR PAGE ===== */
.creatorTitle{
  margin-top:75px;
  font-size:36px;
  font-weight:800;
  color:#fff;
}

.creatorContainer{
  margin-top:55px;
  display:flex;
  justify-content:center;
  gap:90px;
  flex-wrap:wrap;
}

.creatorCard{
  width:420px;
  height:270px;
  background:rgba(0,0,0,0.18);
  border-radius:16px;
  padding:28px 30px;
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
}

.creatorTop{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.creatorImg{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
}

.creatorName{font-weight:700;font-size:18px;}
.creatorList{margin-left:20px;line-height:1.55;font-size:14.5px;}

/* ===== ABOUT PAGE ===== */
.aboutBlock{
  margin-top:75px;
  max-width:760px;
  color:#fff;
}

.aboutBlock h2{
  font-size:30px;
  font-weight:800;
  text-decoration:underline;
  margin-bottom:12px;
}

.aboutBlock p{
  font-size:14.8px;
  line-height:1.6;
  margin-bottom:18px;
}

.aboutBlock h3{
  font-size:26px;
  font-weight:800;
  text-decoration:underline;
  margin:8px 0 10px;
}

.aboutBlock ul{
  margin-left:18px;
  line-height:1.6;
}

/* ===== ABOUT BUTTON STYLE ===== */
.aboutBtns{
  margin-top:35px;
  display:flex;
  gap:20px;
}

.btnBack{
  padding:12px 28px;
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border-radius:50px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  transition:0.3s ease;
}
.btnBack:hover{
  background:#000;
  transform:translateY(-2px);
}

.btnStart{
  padding:12px 28px;
  background:#fff;
  color:#333;
  text-decoration:none;
  font-weight:600;
  border-radius:50px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  transition:0.3s ease;
}
.btnStart:hover{
  background:#f3f3f3;
  transform:translateY(-2px);
}

/* ===== CONTACT PAGE (ALIGN LIKE ABOUT + GMAP RIGHT) ===== */

/* wrapper 2 kolum */
.contactWrapper{
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:flex-start;
}

/* kiri info (tajuk align sama macam aboutBlock) */
.contactBlock{
  margin-top:75px;     /* IMPORTANT: align sama macam aboutBlock */
  flex:1;
  max-width:550px;
  color:#fff;
}

.contactBlock h1{
  font-size:30px;
  font-weight:800;
  margin-bottom:12px;
}

.contactBlock .org{
  font-size:18px;
  font-weight:800;
  text-decoration:underline;
  margin-bottom:18px;
}

.contactBlock .label{
  font-weight:800;
  margin-top:14px;
}

.contactIcons{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:30px;
}

.smallBtn{
  display:inline-block;
  padding:12px 18px;
  background:rgba(0,0,0,.28);
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition:.25s;
}
.smallBtn:hover{background:rgba(0,0,0,.42);}

.iconCircle{
  width:70px;height:70px;border-radius:50%;
  background:#1877f2;
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.iconCircle img{width:38px;height:38px;object-fit:contain;}

/* kanan map */
.mapContainer{
  margin-top:75px;     /* align sama level */
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.mapContainer iframe{
  width:100%;
  max-width:600px;
  height:400px;
  border:0;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* ===== FAQ PAGE ===== */
.faqBlock{
  margin-top:90px;
  max-width:900px;
  color:#fff;
}

.faqBlock h1{
  font-size:38px;
  font-weight:800;
  margin-bottom:22px;
}

.faqQ{
  margin-top:22px;
  font-size:20px;
  font-weight:800;
}

.faqA{
  margin-top:10px;
  font-size:16px;
  line-height:1.7;
  color:#f3f3f3;
}

.faqList{
  margin-top:12px;
  margin-left:20px;
  line-height:1.7;
  color:#f3f3f3;
  font-size:16px;
}

/* ===== RESPONSIVE (PHONE) ===== */
@media (max-width: 980px){
  .page, .bgPage{ padding:20px 24px; }

  .hero{ grid-template-columns:1fr; }
  .contactWrapper{ flex-direction:column; }
  .mapContainer{ justify-content:flex-start; }
  .mapContainer iframe{ max-width:100%; height:340px; }
}