*,
*::before,
*::after {
    box-sizing: border-box;
}

:root{
    --warna-menu: #191970;
    --warna-tombol: #C0C0C0;
    --warna-teks: #000000;
    --warna-teks-menu: #FFFFFF;   
	--warna-teks-menu-aktif: #ADD8E6; 
	--warna-teks-tombol: #000000; 
}

/* =========================
   FONT FACE
========================= */
@font-face{
    font-family: MenuFont;
    src: url('../fonts/roboto/regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family: HeaderFont;
    src: url('../fonts/roboto/bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face{
    font-family: LabelFont;
    src: url('../fonts/merriweather/regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family: InputFont;
    src: url('../fonts/roboto/regular.woff2') format('woff2');
}
@font-face{
    font-family: ButtonFont;
    src: url('../fonts/roboto/regular.woff2') format('woff2');
}

/* =========================
   GLOBAL
========================= */
body{
    margin:0;
	overflow-x:auto;
    background: #5F9EA0;
    color: var(--warna-teks);
    font-family: LabelFont, Arial, sans-serif;
    font-size: 14px;
}

/* =========================
   FORM ELEMENTS
========================= */

/* HEADER FORM */
.contact-wrapper h2{
    font-family: HeaderFont;
    font-size: 20px;
    color: var(--warna-teks);
    text-align: center;
}

/* LABEL */
.contact-form label{
    font-family: LabelFont;
    font-size: 14px;
    color: var(--warna-teks);
}

/* INPUT, SELECT, TEXTAREA */
.contact-form input,
.contact-form select,
.contact-form textarea{
    font-family: LabelFont;
    font-size: 14px;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 10px;
    box-sizing: border-box;
}

/* BUTTON */
.contact-form button{
    font-family: LabelFont;
    font-size: 14px;
    background: var(--warna-tombol) !important;
    color: var(--warna-teks-tombol) !important;
}

button{
    font-family: LabelFont;
    font-size: 14px;
    background: var(--warna-tombol) !important;
    color: var(--warna-teks-tombol) !important;
}




/* =========================
   HEADER MENU
========================= */
.header,
.footer {
    width: 100%;
    box-sizing: border-box;
}

.header{
    padding:12px 24px;
}

@media (max-width:600px){
    .header{
        padding:10px;
    }
}

.header{
    background: var(--warna-menu);
}

.menu{
    width:100%;
}

.menu > div{
    width:100%;
}

.menu{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.menu a,
.menu span{
    font-family: LabelFont;
    font-size: 14px;
    color: var(--warna-teks-menu);
    text-decoration:none;
    margin-right:18px;
}
.menu .active{
    color: var(--warna-teks-menu-aktif);
    font-weight: 400;
    cursor:default;
}

/* =========================
   HEADER TEXT
========================= */
h1,h2,h3{
    font-family: LabelFont;
    font-size: 20px;
	color: var(--warna-teks);
}

/* =========================
   FILTER LISTING
========================= */
.filter-container{
    width: 95%;
    margin: 20px auto 40px auto;
    padding: 15px 20px;
    border: 1px solid #ddd;
    background: transparent;
    box-sizing: border-box;
}

.filter-container form{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-container label{
    font-family: LabelFont;
    font-size: 14px;
}

.filter-container select,
.filter-container input{
    font-family: LabelFont;
    font-size: 14px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* INPUT KEYWORD */
.filter-container input[name="keyword"]{
    width: 290px; /* bisa Anda ubah sesuai kebutuhan */
}

/* INPUT HARGA */
.filter-container input[name="hargamin"],
.filter-container input[name="hargamax"]{
    width: 140px;
}


.filter-container input[type="number"]{
    width: 120px;
}

.filter-container button{
    font-family: LabelFont;
    font-size: 14px;
    padding: 6px 14px;
    cursor: pointer;
}

/* =========================
   LISTING GRID
========================= */

.listing-grid{
    width:90%;
    margin:0 auto 30px;
    display:grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop */
    gap:20px;
}

/* TABLET */
@media (max-width: 1024px){
    .listing-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* SMARTPHONE */
@media (max-width: 600px){
    .listing-grid{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px){
    .listing-image img{
        height:180px;
        object-fit:cover;
    }
}

/* CARD */
.listing-card{
    border:2px solid #ddd;
    background:#fff;
    display:flex;
    flex-direction:column;
}

/* IMAGE */
.listing-image{
    width:100%;
    height:200px;
    overflow:hidden;
    background:#eee;
}
.listing-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CONTENT */
.listing-content{
    padding:10px;
    font-family: LabelFont;
    font-size: 14px;
}

.listing-title{
    font-weight:bold;
    margin-bottom:6px;
    color:#111;
}

.listing-price{
    font-weight:bold;
    margin-bottom:4px;
    color: #111;
}

.listing-spec,
.listing-location{
    color:#111;
}


/* LOCATION */
.listing-location{
    color:#111;
}

.pagination{
    margin-top:20px;
    text-align:center;
}

.pagination a,
.pagination span{
    margin:0 5px;
    padding:6px 10px;
    text-decoration:none;
    border:1px solid #ccc;
    color: var(--warna-teks);
    display:inline-block;
}

.pagination span{
    font-weight:bold;
    background:#eee;
}

/* HILANGKAN UNDERLINE DI CARD LINK */
a.listing-card{
    text-decoration: none;
    color: inherit;
}

a.listing-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* =========================
   DETAIL GALLERY GRID
========================= */
.detail-gallery{
    width:95%;
    margin: 0 auto 40px auto;
    display:grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop */
    gap:15px;
}

/* TABLET */
@media (max-width:1024px){
    .detail-gallery{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* SMARTPHONE */
@media (max-width:600px){
    .detail-gallery{
        grid-template-columns: 1fr;
    }
}

.gallery-item{
    height:180px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;

    padding:1px;                 /* lebih tipis */
    border:0.5px solid #e5e5e5;  /* bingkai tipis */
    border-radius:6px;

    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.gallery-item:hover{
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);  /* bayangan lebih dalam saat hover */
    transform: translateY(-3px);
}

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

.gallery-item img:hover{
    /*transform:scale(1.05);*/
}

/* =========================
   MODAL POPUP
========================= */
.modal{
    display:none;
    position:fixed;
    z-index:999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
}

.modal-content{
    display:block;
    margin:auto;
    margin-top:5%;
    max-width:80%;
    max-height:80%;
}

.close{
    position:absolute;
    top:20px;
    right:40px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

.prev, .next{
    position:absolute;
    top:50%;
    font-size:50px;
    color:#fff;
    padding:16px;
    cursor:pointer;
    user-select:none;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}


/* =========================
   DETAIL INFO PROPERTI
========================= */
/* =========================
   DETAIL INFO TANPA BOX
========================= */
.detail-info{
    width:95%;
    margin:40px auto 60px auto;
}

.info-row{
    margin-bottom:12px;
    line-height:1.7;
    font-size:15px;
}

.info-row strong{
    display:inline-block;
    min-width:170px;
    font-weight:600;
}

.catatan-text{
    margin-top:6px;
    padding-left:170px;
}

/* =========================
   KALKULATOR KPR
========================= */

.kpr-form-row{
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

/* Lebar label dibuat tetap agar sejajar */
.kpr-form-row label{
    font-family: LabelFont;
    font-size: 14px;
    width: 200px;   /* samakan untuk semua label */
}

/* Input harga properti */
#hargaproperti{
    font-family: LabelFont;
    font-size: 14px;
    width: 200px;
    padding:6px 8px;
    border:1px solid #ccc;
    box-sizing:border-box;
}

/* Input uang muka */
#uangmuka{
    font-family: LabelFont;
    font-size: 14px;
    width: 50px;    /* sesuai permintaan */
    padding:4px;
    border:1px solid #ccc;
    box-sizing:border-box;
}

/* Radio group sejajar dengan input sebelumnya */
.radio-group{
    display:flex;
    align-items:center;
    gap:20px;
}

/* Style label radio */
.radio-inline{
    font-family: LabelFont;
    font-size: 14px;
    display:flex;
    align-items:center;
    gap:6px;
}

/* Radio button */
.radio-inline input[type="radio"]{
    transform: scale(1.1);
    cursor:pointer;
}

/* Semua input kecil KPR disamakan dengan uang muka */
#uangmuka,
#bungafix,
#masabungafix,
#bungafloat,
#jangkawaktukpr_fix,
#jangkawaktukpr,
#jumlahtahapan,
.tahap-input{
    font-family: LabelFont !important;
    font-size: 14px !important;
    font-weight: 400;
    font-style: normal;
    width: 50px;
    padding:4px;
    border:1px solid #ccc;
    box-sizing:border-box;
	margin-bottom:5px;
}

/* Baris tahapan bunga */
.tahap-row{
    display:flex;
    align-items:center;
    margin-bottom:8px;
    gap:8px;
}

/* Label tahap dibuat sama lebarnya */
.tahap-label{
    width:200px; /* samakan dengan label utama */
    font-family: LabelFont;
    font-size: 14px;
}

#jenisbunga{
    font-family: LabelFont;
    font-size: 14px;
    width: 200px;
    padding:6px 8px;
    border:1px solid #ccc;
    box-sizing:border-box;
}

/* =========================
   TOMBOL KPR
========================= */
.kpr-button-row{
    margin-top:20px;
    display:flex;
    gap:15px;
    padding-left:200px; /* sejajar dengan input */
}

.kpr-button-row button{
    font-family: LabelFont;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    padding:6px 16px;
    cursor:pointer;
    border:1px solid #ccc;
}

/* =========================
   HASIL KPR
========================= */
.kpr-result{
    margin-top:25px;
    padding-left:200px; /* sejajar dengan input */
    font-family: LabelFont;
    font-size: 14px;
    line-height:1.8;
}

/* =========================
   GLOBAL BUTTON STYLE
========================= */
.btn-primary{
    font-family: LabelFont;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;

    background: var(--warna-tombol);
    color: var(--warna-teks-tombol);

    padding:10px 18px;      /* 🔑 lebih tinggi */
    border:1px solid #ccc;
    cursor:pointer;

    line-height:1.4;        /* 🔑 stabilkan tinggi */
    min-height:40px;        /* 🔑 paksa tinggi minimal */
}

/* =========================
   WHATSAPP FLOATING BUTTON
========================= */
.wa-float{
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    cursor: pointer;
    transition: 0.3s;
}

.wa-float img{
    width: 100%;
    height: 100%;
}

.wa-float:hover{
    transform: scale(1.1);
}

/* =========================
   FOOTER
========================= */
.footer{
    background: var(--warna-menu); /* 🔑 sama seperti baris menu */
    width:100%;
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:12px 0;
    text-align:center; /* 🔑 benar-benar di tengah */

    font-family: LabelFont;
    font-size: 14px;
    color: var(--warna-teks-menu);
}

.footer-inner a{
    color: var(--warna-teks-menu);
    text-decoration:none;
}

.footer-inner a:hover{
    color: var(--warna-teks-menu-aktif);
}

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

.menu > div{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

@media (max-width:600px){

    .header{
        padding:10px 10px; /* 🔑 lebih kecil */
    }

    .menu > div{
        justify-content:center;
        gap:10px;
    }

    .menu a,
    .menu span{
        margin-right:0; /* 🔑 ini penting */
    }
}

/* Mode Tablet & HP */
@media (max-width: 992px){

    .menu > div{
        justify-content:center;   /* Rata tengah horizontal */
        text-align:center;
    }

    .menu > div a,
    .menu > div span{
        display:inline-block;
    }

} 

/* =========================
   FILTER RESPONSIVE TABLET
========================= */
@media (max-width:1024px){

    .filter-container form{
        justify-content:space-between;
    }

    /* Baris 1 (4 kolom sama rata) */
    .filter-container select[name="status"],
    .filter-container select[name="jenis"],
    .filter-container select[name="berdasarkan"],
    .filter-container input[name="keyword"]{
        width:23%;
    }

    /* Baris 2 */
    .filter-container label,
    .filter-container input[name="hargamin"],
    .filter-container input[name="hargamax"],
    .filter-container button{
        width:auto;
    }

    .filter-container input[name="hargamin"],
    .filter-container input[name="hargamax"]{
        width:120px;
    }

    .filter-container button{
        margin-left:auto; /* tombol rata kanan */
    }
}

/* =========================
   FILTER RESPONSIVE MOBILE
========================= */
@media (max-width:600px){

    .filter-container form{
        flex-direction:row;
        justify-content:space-between;
    }

    /* BARIS 1 */
    .filter-container select[name="status"],
    .filter-container select[name="jenis"]{
        width:48%;
    }

    /* BARIS 2 */
    .filter-container select[name="berdasarkan"]{
        width:100%;
    }

    /* BARIS 3 */
    .filter-container input[name="keyword"]{
        width:100%;
    }

    /* BARIS 4 */
/* BARIS HARGA - 1 BARIS */
.filter-container label{
    width:auto;
    white-space:nowrap;
}

.filter-container input[name="hargamin"],
.filter-container input[name="hargamax"]{
    width:32%;
    min-width:0;
}

.filter-container form{
    gap:8px;
}

.filter-container label,
.filter-container input[name="hargamin"],
.filter-container input[name="hargamax"]{
    flex:0 0 auto;
}

    /* BARIS 5 */
    .filter-container button{
        width:100%;
        margin-top:10px;
    }
}

/* Default (Desktop & Tablet) */
.label-mobile{
    display:none;
}

/* Smartphone */
@media (max-width:600px){

    .label-desktop{
        display:none;
    }

    .label-mobile{
        display:inline;
        font-weight:600;
    }
}