body{

font-family:'Poppins',sans-serif;

/* WARNA KERTAS */

background:

linear-gradient(
135deg,
#f5f4f1,
#efeeea
);

/* TEKSTUR LINEN */

background-image:

linear-gradient(
90deg,
rgba(255,255,255,.25) 1px,
transparent 1px
),

linear-gradient(
0deg,
rgba(255,255,255,.20) 1px,
transparent 1px
),

linear-gradient(
135deg,
#f5f4f1,
#efeeea
);

background-size:

4px 4px,
4px 4px,
cover;

padding:35px;

color:#333;

min-height:100vh;

}

/* CONTAINER */

.container{

width:100%;
max-width:1450px;

margin:auto;

background:

rgba(
255,
255,
255,
0.88
);

backdrop-filter:
blur(10px);

border-radius:34px;

overflow:hidden;

display:flex;
flex-wrap:wrap;

box-shadow:

0 25px 60px
rgba(
0,
0,
0,
0.08
);

border:

1px solid
rgba(
255,
255,
255,
0.7
);

}

/* JARAK BAWAH CONTAINER */

.container{

margin-bottom:70px;

}

/* LEFT */

.left{

  flex:0.9;
  min-width:320px;

  position:relative;

  background:
  url('bg1.jpeg')
  center/cover;

  min-height:780px;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* OVERLAY */

.overlay{

  position:absolute;

  width:100%;
  height:100%;

  background:
  linear-gradient(
  135deg,
  rgba(0,91,170,0.80),
  rgba(0,55,106,0.90)
  );

  backdrop-filter:blur(2px);
}

/* CONTENT */

.left-content{

  position:relative;

  z-index:2;

  padding:60px;

  color:white;

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* LOGO */

.logo{

  width:100%;
  max-width:340px;

  margin-bottom:45px;

  filter:
  drop-shadow(
  0 5px 15px rgba(0,0,0,0.25)
  );
}

/* TITLE */

.title{

  font-size:48px;

  font-weight:700;

  line-height:1.35;

  margin-bottom:28px;

  letter-spacing:1px;

  text-shadow:
  0 5px 15px rgba(0,0,0,0.25);

  text-align:center;
}

/* TANDA & */

.centerz{

  width:100%;

  text-align:center;

  font-size:46px;

  margin:10px 0;

  opacity:0.95;
}

/* DESC */

.desc{

  font-size:15px;

  line-height:2;

  opacity:0.95;

  max-width:500px;

  margin:auto;
}

/* RIGHT */

.right{

flex:1.8;

padding:70px;

background:

linear-gradient(
135deg,
rgba(
255,
255,
255,
0.92
),

rgba(
248,
248,
245,
0.96
)
);

}

.subtitle{

  color:#666;

  margin-bottom:38px;

  line-height:1.8;

  font-size:15px;
}

/* FORM */

.form-group{

  margin-bottom:24px;
}

label{

  display:block;

  margin-bottom:10px;

  font-size:14px;

  font-weight:600;

  color:#222;
}

/* INPUT */

input,
textarea,
select{

width:100%;

padding:17px;

border:

1px solid
#e6e2da;

border-radius:18px;

background:

rgba(
255,
255,
255,
0.75
);

box-shadow:

inset 0 2px 4px
rgba(
0,
0,
0,
0.03
);

font-family:
'Poppins',
sans-serif;

}

input:focus,
textarea:focus,
select:focus{

  outline:none;

  border-color:#005baa;

  background:white;

  box-shadow:
  0 0 0 5px rgba(0,91,170,0.10);
}

/* TEXTAREA */

textarea{

  min-height:120px;

  resize:vertical;
}

/* RADIO */

.radio-group{

  display:flex;

  gap:18px;

  flex-wrap:wrap;

  margin-top:10px;
}

.radio-item{

  display:flex;

  align-items:center;

  gap:10px;

  background:#f5f8ff;

  padding:15px 20px;

  border-radius:16px;

  border:1px solid #dbe4f2;

  cursor:pointer;

  transition:0.3s;
}

.radio-item:hover{

  background:#edf4ff;

  transform:translateY(-2px);

  box-shadow:
  0 5px 15px rgba(0,91,170,0.08);
}

.radio-item input{

  width:auto;
}

/* BUTTON */

.btn{

  width:100%;

  border:none;

  background:
  linear-gradient(
  135deg,
  #005baa,
  #00417a
  );

  color:white;

  padding:19px;

  border-radius:18px;

  font-size:17px;

  font-weight:600;

  cursor:pointer;

  transition:0.3s;

  margin-top:15px;

  box-shadow:
  0 10px 25px rgba(0,91,170,0.25);
}

.btn:hover{

  transform:translateY(-3px);

  box-shadow:
  0 14px 30px rgba(0,91,170,0.30);
}

/* ALERT */

.success{

  background:#e7f8ee;

  color:#1d7a43;

  padding:16px;

  border-radius:16px;

  margin-bottom:22px;

  display:none;

  font-size:14px;
}

.error{

  background:#ffeaea;

  color:#c62828;

  padding:16px;

  border-radius:16px;

  margin-bottom:22px;

  display:none;

  font-size:14px;
}

/* HIDDEN */

.hidden{
  display:none;
}


/* FOOTER */

.footer{

width:100%;
max-width:1450px;

margin:25px auto 0;

background:
linear-gradient(
135deg,
#032d57,
#021d38
);

color:white;

border-radius:28px;

padding:40px;

box-shadow:
0 10px 35px rgba(0,0,0,0.10);
}

.footer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:10px;
}

.footer-item{

padding:22px;

border-radius:24px;

background:

linear-gradient(
135deg,
#ffffff,
#f6f4ef
);

border:

1px solid
#ece8df;

color:#222;

box-shadow:

0 10px 25px
rgba(
0,
0,
0,
0.05
);

}

/* TABLET */

@media(max-width:992px){

  .container{

    flex-direction:column;
  }

  .left{

    min-height:620px;

    flex:1;
  }

  .left-content,
  .right{

    padding:45px 35px;
  }

  .title{

    font-size:38px;
  }

  .centerz{

    font-size:38px;
  }

  .form-title{

    font-size:30px;
  }

}

/* MOBILE */

@media(max-width:768px){

  body{
    padding:10px;
  }

  .container{

    border-radius:22px;
  }

  .left{

    min-height:500px;
  }

  .left-content,
  .right{

    padding:35px 25px;
  }

  .logo{

    max-width:180px;
  }

  .title{

    font-size:28px;

    text-align:center;
  }

  .centerz{

    font-size:30px;
  }

  .desc{

    font-size:14px;

    text-align:center;
  }

  .form-title{

    font-size:25px;
  }

  .subtitle{

    font-size:14px;
  }

  .radio-group{

    flex-direction:column;
  }

  .radio-item{

    width:100%;
  }

  input,
  textarea,
 select{

    padding:15px;
  }

  .btn{

    padding:17px;

    font-size:15px;
  }

  .footer{

    padding:25px 20px;

    border-radius:22px;
  }

  .footer-grid{

    grid-template-columns:1fr;
  }

}

/* HP KECIL */

@media(max-width:480px){

  .left{

    min-height:430px;
  }

  .title{

    font-size:24px;
  }

  .centerz{

    font-size:26px;
  }

  .form-title{

    font-size:22px;
  }

  .left-content,
  .right{

    padding:28px 20px;
  }

}

/* GOOGLE */

.google-box{

  margin-bottom:25px;
}

/* MODAL */

.modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(0,0,0,0.5);

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:9999;

  padding:20px;

  backdrop-filter:blur(5px);
}

.modal.hidden{
  display:none;
}

.modal-box{

width:100%;

max-width:600px;

padding:40px;

border-radius:32px;

background:

linear-gradient(
135deg,
#ffffff,
#f7f5f0
);

box-shadow:

0 25px 70px
rgba(
0,
0,
0,
0.12
);

}

@keyframes popup{

  from{
    transform:scale(0.8);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}

.check-icon{

  width:90px;
  height:90px;

  border-radius:50%;

  border:4px solid #45d483;

  color:#45d483;

  font-size:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:auto auto 20px;
}

.modal-title{

  text-align:center;

  font-size:38px;

  font-weight:700;

  color:#004c91;

  margin-bottom:10px;
}

.modal-subtitle{

  text-align:center;

  color:#666;

  margin-bottom:25px;
}

.modal-data{

  background:#f7f9fd;

  border-radius:18px;

  padding:20px;

  margin-bottom:20px;
}

.row{

  display:flex;

  justify-content:space-between;

  gap:20px;

  margin-bottom:12px;

  font-size:14px;
}

.row span{

  text-align:right;

  max-width:60%;
}

.location-btn{

  width:100%;

  border:none;

  background:
  linear-gradient(
  135deg,
  #005baa,
  #003d73
  );

  color:white;

  padding:16px;

  border-radius:16px;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  margin-bottom:12px;
}

.close-btn{

  width:100%;

  padding:15px;

  border-radius:16px;

  border:1px solid #ddd;

  background:white;

  cursor:pointer;

  font-size:16px;
}

/* MODAL */

.modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
  rgba(0,0,0,0.55);

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:9999;

  padding:20px;

  backdrop-filter:blur(5px);
}

.modal.hidden{
  display:none;
}

.modal-box{

  width:100%;
  max-width:520px;

  background:white;

  border-radius:28px;

  padding:35px;

  animation:popup 0.3s ease;

  box-shadow:
  0 20px 60px rgba(0,0,0,0.2);

  max-height:90vh;

  overflow-y:auto;
}

@keyframes popup{

  from{

    transform:
    scale(0.8);

    opacity:0;

  }

  to{

    transform:
    scale(1);

    opacity:1;

  }

}

.check-icon{

  width:90px;
  height:90px;

  border-radius:50%;

  border:4px solid #45d483;

  color:#45d483;

  font-size:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:auto auto 20px;
}

.modal-title{

  text-align:center;

  font-size:36px;

  font-weight:700;

  color:#004c91;

  margin-bottom:10px;
}

.modal-subtitle{

  text-align:center;

  color:#666;

  margin-bottom:25px;

  line-height:1.7;
}

.modal-data{

  background:#f7f9fd;

  border-radius:18px;

  padding:20px;

  margin-bottom:20px;
}

.row{

  display:flex;

  justify-content:space-between;

  gap:15px;

  margin-bottom:14px;

  font-size:14px;

  border-bottom:
  1px dashed #dfe5ef;

  padding-bottom:10px;
}

.row:last-child{

  border-bottom:none;

  margin-bottom:0;
}

.row span{

  text-align:right;

  max-width:60%;

  word-break:break-word;
}

.close-btn{

  width:100%;

  padding:16px;

  border-radius:16px;

  border:none;

  background:
  linear-gradient(
  135deg,
  #005baa,
  #003d73
  );

  color:white;

  cursor:pointer;

  font-size:16px;

  font-weight:600;

  transition:0.3s;
}

.close-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 10px 25px rgba(0,91,170,0.2);
}

/* MOBILE */

@media(max-width:768px){

  .modal-box{

    padding:25px;
  }

  .modal-title{

    font-size:28px;
  }

  .row{

    flex-direction:column;

    gap:5px;
  }

  .row span{

    text-align:left;

    max-width:100%;
  }

}

.wa-warning{

  margin-top:10px;

  background:#fff4d8;

  color:#9a6b00;

  padding:14px;

  border-radius:14px;

  font-size:14px;

  border:
  1px solid #f5d77a;
}

/* SHARE LOKASI */

.location-btn{

  width:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  text-decoration:none;

  border:none;

  background:
  linear-gradient(
  135deg,
  #16a34a,
  #15803d
  );

  color:white;

  padding:16px;

  border-radius:16px;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  margin-bottom:14px;

  transition:0.3s;
}

.location-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 10px 25px rgba(22,163,74,0.25);
}

/* ========================= */
/* MODAL DUPLIKAT */
/* ========================= */

.modal-box{

  width:95%;
  max-width:1200px;

  max-height:90vh;

  overflow-y:auto;

  overflow-x:auto;
}

/* WRAP DATA */

.compare-wrapper{

  min-width:900px;

  display:flex;

  gap:20px;

  margin-top:20px;

  margin-bottom:25px;
}

/* CARD */

.compare-card{

  flex:1;

  border-radius:20px;

  padding:22px;

  background:#f8fbff;

  border:1px solid #d9e7ff;
}

/* CARD BARU */

.compare-card.new{

  background:#fff8ef;

  border:1px solid #ffd8a8;
}

/* TITLE */

.compare-title{

  font-size:22px;

  font-weight:700;

  margin-bottom:20px;

  text-align:center;
}

/* ITEM */

.compare-item{

  margin-bottom:18px;

  padding-bottom:12px;

  border-bottom:1px dashed #d7dfea;
}

.compare-item:last-child{

  border-bottom:none;
}

.compare-item b{

  display:block;

  margin-bottom:6px;

  color:#00376a;
}

/* BUTTON AREA */

.modal-action{

  width:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;
}

/* MOBILE */

@media(max-width:768px){

  .modal-box{

    padding:20px;
  }

  .compare-wrapper{

    min-width:800px;
  }

}

/* OPENING */

#openingScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:999999;

background:
url("bg1.jpeg")
center/cover;

display:flex;

align-items:center;
justify-content:center;

transition:1s;
}

#openingScreen.hide{

opacity:0;

visibility:hidden;
}

.opening-overlay{

width:100%;
height:100%;

display:flex;

flex-direction:column;

align-items:center;
justify-content:center;

padding:30px;

text-align:center;

background:

linear-gradient(

135deg,

rgba(0,76,145,0.88),

rgba(0,39,75,0.94)

);

backdrop-filter:
blur(4px);

color:white;
}

.opening-logo{

width:100%;

max-width:280px;

margin-bottom:40px;

animation:
logoFloat 2s infinite;
}

@keyframes logoFloat{

0%{
transform:
translateY(0);
}

50%{
transform:
translateY(-10px);
}

100%{
transform:
translateY(0);
}

}

.opening-title{

font-size:46px;

font-weight:700;

line-height:1.4;

margin-bottom:25px;

text-shadow:
0 5px 20px
rgba(0,0,0,.3);
}

.opening-and{

font-size:50px;

margin:8px 0;
}

.opening-sub{

max-width:650px;

font-size:16px;

line-height:2;

opacity:.95;

margin-bottom:35px;
}

.open-btn{

border:none;

padding:18px 40px;

border-radius:18px;

font-size:16px;

font-weight:600;

cursor:pointer;

background:white;

color:#004c91;

box-shadow:
0 10px 25px
rgba(0,0,0,.2);
}

@media(max-width:768px){

.opening-title{

font-size:28px;

}

.opening-logo{

max-width:180px;

}

.opening-sub{

font-size:14px;

}

}

.footer-link{

display:block;

text-decoration:none;

color:#ffffff !important;

opacity:1 !important;

transition:.3s;

border-radius:16px;

}

.footer-item{

padding:24px;

border-radius:24px;

/* KERTAS LINEN */

background:

linear-gradient(
135deg,
#ffffff,
#f4f2ed
);

position:relative;

overflow:hidden;

/* TEKSTUR */

background-image:

linear-gradient(
90deg,
rgba(255,255,255,.35) 1px,
transparent 1px
),

linear-gradient(
0deg,
rgba(255,255,255,.25) 1px,
transparent 1px
),

linear-gradient(
135deg,
#ffffff,
#f4f2ed
);

background-size:

4px 4px,
4px 4px,
cover;

border:

1px solid #ebe6db;

box-shadow:

0 10px 30px rgba(
0,
0,
0,
0.05
);

min-height:110px;

display:flex;

flex-direction:column;

justify-content:center;

transition:.35s;

}
/* ========================= */
/* FOOTER LINEN */
/* ========================= */

.footer{

width:100%;

max-width:1450px;

margin:80px auto 0;

padding:35px;

border-radius:34px;

background:

linear-gradient(
135deg,
#f7f5f1,
#efede8
);

background-image:

linear-gradient(
90deg,
rgba(255,255,255,.25) 1px,
transparent 1px
),

linear-gradient(
0deg,
rgba(255,255,255,.18) 1px,
transparent 1px
);

background-size:
4px 4px;

box-shadow:

0 15px 35px
rgba(
0,
0,
0,
0.06
);

}

.footer-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
260px,
1fr
)
);

gap:24px;

}

.footer-link{

text-decoration:none;

display:block;

}

.footer-item{

padding:24px;

min-height:105px;

border-radius:24px;

background:

linear-gradient(
135deg,
#ffffff,
#f4f2ed
);

border:
1px solid #e9e3d8;

box-shadow:

0 10px 25px
rgba(
0,
0,
0,
0.05
);

display:flex;

flex-direction:column;

justify-content:center;

transition:.35s;

}

.footer-item:hover{

transform:
translateY(-5px);

}

.footer-title{

font-weight:700;

color:#17324d;

}

.footer-sub{

font-size:13px;

color:#7a8088;

margin-top:6px;

}

/* MOBILE */

@media(max-width:768px){

.footer{

padding:20px;

}

.footer-grid{

grid-template-columns:1fr;

gap:18px;

}

.footer-item{

min-height:85px;

}

}