* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}


/* ===== HEADER ===== */

.header {

width: 100%;
position: sticky;
top: 0;
z-index: 999;

background: rgba(11,31,58,0.95);
backdrop-filter: blur(8px);

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

}


.container {

max-width: 1200px;
margin: auto;
padding: 0 20px;

}


.nav-wrap {

display: flex;
align-items: center;
justify-content: space-between;
height: 75px;

}



/* ===== LOGO ===== */

.logo a {

color: white;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;

}



/* ===== MENU ===== */

.nav ul {

display: flex;
gap: 35px;
list-style: none;
align-items: center;

}


.nav a {

color: white;
text-decoration: none;
font-weight: 500;
transition: 0.3s;

position: relative;

}


.nav a::after {

content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: gold;
transition: 0.3s;

}


.nav a:hover::after {

width: 100%;

}



/* ===== RIGHT ===== */

.nav-right {

display: flex;
align-items: center;
gap: 15px;

}



/* ===== BUTTON ===== */

.btn-kontak {

background: linear-gradient(45deg,gold,orange);
color: black;
padding: 10px 18px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;

transition: 0.3s;

}


.btn-kontak:hover {

transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0,0,0,0.3);

}



/* ===== BURGER ===== */

.burger {

display: none;
flex-direction: column;
cursor: pointer;

}


.burger span {

width: 26px;
height: 3px;
background: white;
margin: 4px;
border-radius: 3px;

}



/* ===== CLOSE ===== */

.close-menu {

display: none;

}



/* ===========================
MOBILE
=========================== */

@media (max-width: 900px) {


.nav {

position: fixed;
top: 0;
right: -100%;
width: 270px;
height: 100vh;

background: #0b1f3a;

transition: 0.35s;

padding-top: 80px;

box-shadow: -5px 0 20px rgba(0,0,0,0.4);

}


.nav.active {

right: 0;

}


.nav ul {

flex-direction: column;
gap: 25px;
padding-left: 25px;

}


.close-menu {

display: block;

position: absolute;
top: 15px;
right: 15px;

background: none;
border: none;

color: white;
font-size: 24px;
cursor: pointer;

}


.burger {

display: flex;

}


.btn-kontak {

display: none;

}



/* tombol kontak di dalam menu */

.mobile-kontak {

margin-top: 20px;

}


.btn-kontak-mobile {

display: inline-block;

background: gold;
color: black;

padding: 12px 18px;

border-radius: 6px;

font-weight: 600;

text-decoration: none;

}


}

/* ===== MOBILE MENU LEFT ALIGN ===== */

@media (max-width:900px){

.nav ul{

flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-left: 25px;

}

.nav li{

width:100%;

}

.nav a{

display:block;
width:100%;

}


/* tombol kontak di menu */

.mobile-kontak{

margin-top:15px;
width:100%;

}

.btn-kontak-mobile{

display:block;
width:100%;

background: linear-gradient(45deg,gold,orange);
color:black;

padding:12px;

border-radius:6px;

font-weight:600;
text-align:center;

text-decoration:none;

}

}


/* posisi tombol kontak dekat menu */

.menu-kontak{
display:none;
}


@media (max-width:900px){

.menu-kontak{

display:block;

margin-top:15px;
padding-left:25px;
padding-right:25px;

}

.btn-kontak-mobile{

display:block;
width:100%;

background: linear-gradient(45deg,gold,orange);

color:black;

padding:12px;

border-radius:6px;

font-weight:600;

text-align:center;

text-decoration:none;

}

}

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

.hero{

position:relative;
width:100%;
height:90vh;

background:url("../img/lotus-residence-medan.webp") center/cover no-repeat;

display:flex;
align-items:center;

color:white;

}


.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

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

}


.hero-content{

position:relative;
z-index:2;

max-width:700px;

}


.hero h1{

font-size:42px;
font-weight:700;
margin-bottom:15px;

}


.hero p{

font-size:18px;
line-height:1.6;
margin-bottom:25px;

}


/* ===== BUTTON ===== */

.hero-btn{

display:flex;
gap:15px;

}


.btn-primary{

background:gold;
color:black;

padding:12px 22px;

border-radius:6px;

font-weight:600;

text-decoration:none;

transition:0.3s;

}


.btn-primary:hover{

transform:translateY(-2px);

}


.btn-outline{

border:2px solid white;

padding:12px 22px;

border-radius:6px;

text-decoration:none;

color:white;

font-weight:600;

transition:0.3s;

}


.btn-outline:hover{

background:white;
color:black;

}



/* ===== MOBILE ===== */

@media(max-width:900px){

.hero{

height:80vh;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:16px;

}

.hero-btn{

flex-direction:column;

}

}

/* =====================
TIPE RUMAH
===================== */

.tipe{

padding:80px 0;
background:#f5f7fa;

}


.section-title{

text-align:center;
margin-bottom:40px;

}

.section-title h2{

font-size:32px;
margin-bottom:10px;

}

.section-title p{

color:#555;

}



/* grid */

.tipe-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}



/* card */

.tipe-card{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

position:relative;

transition:0.3s;

}


.tipe-card:hover{

transform:translateY(-5px);

}


/* status */

.status{

position:static;

margin-top:15px;

display:inline-block;

background:navy;
color:white;

padding:6px 12px;

border-radius:6px;

font-weight:600;

font-size:13px;

}


.ready{

background:lightblue;

}


.tipe-card h3{

margin-bottom:10px;

}


.tipe-card ul{

list-style:none;
padding:0;

}


.tipe-card li{

padding:5px 0;
border-bottom:1px solid #eee;

}



/* mobile */

@media(max-width:900px){

.tipe-grid{

grid-template-columns:1fr;

}

}


/* gambar tipe */

.tipe-card img{

width:100%;
height:240px;

object-fit:cover;

border-radius:8px;

margin-bottom:10px;

}


/* card lebih premium */

.tipe-card{

overflow:hidden;

}


/* status lebih bagus */

.status{

position:absolute;

top:10px;
left:10px;

background:navy;
color:white;

padding:6px 10px;

font-size:12px;

border-radius:5px;

font-weight:600;

}


.status.ready{

background:orange;
color:black;

}

/* ===== SLIDER ===== */

.slider{

position:relative;
overflow:hidden;
height:240px;
border-radius:8px;
margin-bottom:10px;

}

.slides {
display: flex;
width: 100%;
transition: 0.4s ease;
}

.slides img {
min-width: 100%;
width: 100%;
flex-shrink: 0;
}


/* tombol */

.prev,
.next{

position:absolute;
top:50%;
transform:translateY(-50%);

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

border:none;

padding:6px 10px;

cursor:pointer;

font-size:18px;

border-radius:4px;

}

.prev{

left:5px;

}

.next{

right:5px;

}

/* =====================
SITEPLAN
===================== */

.siteplan{

padding:80px 0;
background:white;

}


.siteplan-box{

max-width:1200px;
margin:auto;

border-radius:12px;
overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,0.15);

position:relative;

}


/* mobile */

@media(max-width:900px){

.siteplan{

padding:60px 0;

}

}


/* =====================
LOKASI
===================== */

.lokasi{

padding:80px 0;
background:#f5f7fa;

}


.lokasi-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;

}


/* text */

.lokasi-text h3{

margin-bottom:10px;

}


.lokasi-text p{

margin-bottom:15px;

}


.lokasi-text ul{

list-style:none;
margin-bottom:20px;

}


.lokasi-text li{

margin-bottom:8px;

}


/* map */

.lokasi-map img{

width:100%;
height:350px;

object-fit:cover;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

transition:0.3s;

}

.lokasi-map img:hover{

transform:scale(1.03);

}



/* mobile */

@media(max-width:900px){

.lokasi-grid{

grid-template-columns:1fr;

}

.lokasi-map iframe{

height:300px;

}

}


/* =====================
CTA
===================== */

.cta{

padding:80px 0;

background:linear-gradient(
rgba(0,0,0,0.85),
rgba(0,0,0,0.85)
),
url("../img/lotus-residence-medan.webp") center/cover no-repeat;

color:white;
text-align:center;

}


.cta-box{

max-width:700px;
margin:auto;

}


.cta h2{

font-size:34px;
margin-bottom:15px;

}


.cta p{

margin-bottom:25px;
font-size:18px;

}


/* button */

.btn-cta{

display:inline-block;

background:gold;
color:black;

padding:14px 28px;

font-weight:600;

border-radius:8px;

text-decoration:none;

transition:0.3s;

}


.btn-cta:hover{

transform:translateY(-3px);

box-shadow:0 5px 15px rgba(0,0,0,0.3);

}



/* mobile */

@media(max-width:900px){

.cta h2{

font-size:26px;

}

}


/* =====================
GALLERY
===================== */

.gallery{

padding:80px 0;
background:#f5f7fa;

}


.gallery-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;

}


.gallery-grid img{

width:100%;
height:220px;

object-fit:cover;

border-radius:8px;

transition:0.3s;

cursor:pointer;

}


.gallery-grid img:hover{

transform:scale(1.05);

}


/* mobile */

@media(max-width:900px){

.gallery-grid{

grid-template-columns:1fr 1fr;

}

}

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

.footer{

background:#0b1f3a;
color:white;

padding-top:60px;

}


.footer-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}


.footer-col h3{

margin-bottom:10px;

}


.footer-col h4{

margin-bottom:10px;

}


.footer-col p{

font-size:14px;
line-height:1.6;

}


.footer-col ul{

list-style:none;
padding:0;

}


.footer-col li{

margin-bottom:8px;

}


.footer-col a{

color:white;
text-decoration:none;

}


.footer-col a:hover{

color:black;

}


/* WA button */

.footer-wa{

display:inline-block;

margin-top:10px;

background:gold;
color:black;

padding:8px 14px;

border-radius:6px;

font-weight:600;

}


/* bottom */

.footer-bottom{

text-align:center;

margin-top:40px;

padding:20px;

background:#081529;

font-size:14px;

}


/* mobile */

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

}

}

/* ===== SITEPLAN SLIDER ===== */

.siteplan-slider {
height: 500px;
}

.siteplan-slider .slides {
height: 100%;
}

.siteplan-slider .slides img {
height: 100%;
min-width: 100%;
object-fit: cover;
}

/* =====================
SPESIFIKASI BANGUNAN
===================== */

/* =====================
SPESIFIKASI TANPA GAMBAR
===================== */

.spesifikasi {
padding: 80px 0;
background: #f9fbff;
}

/* grid full */

.spesifikasi-grid-full {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 40px;
}

/* item */

.spec-item {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: 0.3s;
position: relative;
overflow: hidden;
}

/* efek premium garis atas */

.spec-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(45deg, gold, orange);
}

/* hover */

.spec-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.spec-item h4 {
margin-bottom: 8px;
color: #0b1f3a;
font-size: 16px;
}

.spec-item p {
color: #555;
font-size: 14px;
line-height: 1.6;
}

/* mobile */

@media(max-width:900px){
.spesifikasi-grid-full {
grid-template-columns: 1fr;
}
}

/* =====================
FAQ
===================== */

.faq {
padding: 80px 0;
background: #f5f7fa;
}

.faq-list {
max-width: 800px;
margin: auto;
display: flex;
flex-direction: column;
gap: 15px;
}

.faq-item {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
overflow: hidden;
}

/* tombol */

.faq-question {
width: 100%;
text-align: left;
padding: 18px 20px;
background: none;
border: none;
font-weight: 600;
font-size: 15px;
cursor: pointer;
position: relative;
}

/* icon */

.faq-question::after {
content: "+";
position: absolute;
right: 20px;
font-size: 20px;
}

/* aktif */

.faq-item.active .faq-question::after {
content: "-";
}

/* jawaban */

.faq-answer {
max-height: 0;
overflow: hidden;
transition: 0.3s;
padding: 0 20px;
}

.faq-answer p {
padding-bottom: 15px;
color: #555;
}

/* saat aktif */

.faq-item.active .faq-answer {
max-height: 200px;
}