/* ========================================================
   RESET & DASAR
   ======================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #222;
    line-height: 1.6;
    overflow-x: hidden; /* jaring pengaman: halaman gak akan pernah bisa digeser ke samping */
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section { padding: 12px 0; } /* 20% dari 60px semula, sesuai request Oppa (jarak antar section kejauhan) */
h2 { text-align: center; margin-bottom: 40px; font-size: 32px; color: #1a1a2e; }
img { max-width: 100%; height: auto; } /* jaring pengaman kedua: SEMUA gambar wajib pas kotaknya, bukan cuma yang class img-full */
.img-full { width: 100%; border-radius: 10px; margin-bottom: 20px; }

/* ========================================================
   HERO
   ======================================================== */
.hero { position: relative; height: 90vh; min-height: 500px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Hero yang berisi slider foto (banner bergeser) */
.hero-slider-wrap { position: absolute; inset: 0; }
.hero-img-slider {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
}
.hero-img-slider .img-slider-slide {
    width: 100%; height: 100%; object-fit: cover;
}
.hero-img-slider .img-slider-prev,
.hero-img-slider .img-slider-next {
    z-index: 5;
}
.hero-img-slider .img-slider-dots {
    z-index: 5;
    bottom: 90px; /* biar gak numpuk sama tombol WA */
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #fff; padding: 20px;
}
.hero-overlay h1 { font-size: 48px; margin-bottom: 10px; }
.hero-overlay p { font-size: 20px; margin-bottom: 30px; }

/* ========================================================
   TOMBOL WHATSAPP
   ======================================================== */
.btn-wa, .btn-wa-small {
    display: inline-block;
    background: #25D366;
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
}
.btn-wa:hover, .btn-wa-small:hover { transform: scale(1.05); }
.btn-wa-small { padding: 10px 20px; font-size: 14px; margin-top: 10px; }

/* ========================================================
   PRODUK (SLIDER GESER BOLAK-BALIK + BAR SEEK)
   ======================================================== */
.produk-slider-outer { padding-bottom: 40px; }
.produk-slider-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 40px;
}
.produk-slider-wrap::-webkit-scrollbar { display: none; }
.produk-slider-track {
    display: flex;
    gap: 30px;
    width: max-content;
}
.produk-slider-bar {
    max-width: 300px;
    height: 6px;
    background: #e5e5e5;
    border-radius: 10px;
    margin: 15px auto 0;
    position: relative;
    cursor: pointer;
}
.produk-slider-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    background: #25D366;
    border-radius: 10px;
    cursor: grab;
    min-width: 30px;
}
.produk-slider-thumb:active { cursor: grabbing; }
.card-produk {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding-bottom: 20px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 280px;
    flex: 0 0 280px;
    background: #fff;
}
.card-produk:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.14);
    border-color: #ddd;
}
.card-produk .foto-wrap { overflow: hidden; }
.card-produk img {
    width: 100%; height: 200px; object-fit: cover;
    transition: transform 0.4s ease;
}
.card-produk:hover img { transform: scale(1.08); }
.card-produk h3 { margin: 15px 10px 5px; transition: color 0.2s ease; }
.card-produk:hover h3 { color: #25D366; }
.card-produk .ukuran { color: #888; font-size: 14px; }
.card-produk .deskripsi { padding: 0 15px; font-size: 14px; margin: 10px 0; }
.card-produk .harga { font-weight: bold; color: #1a1a2e; font-size: 18px; }

/* ========================================================
   KEUNGGULAN
   ======================================================== */
.grid-keunggulan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}
.card-keunggulan {
    background: #f8f9fb;
    padding: 25px;
    border-radius: 12px;
    transition: background 0.25s ease, transform 0.25s ease;
}
.card-keunggulan:hover { background: #eef7f0; transform: translateY(-4px); }
.card-keunggulan h3 { color: #1a1a2e; margin-bottom: 10px; }

/* ========================================================
   FORM KONTAK
   ======================================================== */
.form-kontak {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-kontak label { font-weight: bold; font-size: 14px; }
.form-kontak input, .form-kontak textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
}
.form-kontak button {
    background: #1a1a2e;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}
.form-kontak button:hover { background: #25D366; }
.alert-sukses {
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 20px;
}

/* ========================================================
   FOOTER
   ======================================================== */
.site-footer {
    background: #1a1a2e;
    color: #ccc;
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
}
.site-footer h3 { color: #fff; margin-bottom: 10px; }
.site-footer a { color: #25D366; text-decoration: none; }
.site-footer .disclaimer { font-size: 12px; opacity: 0.7; margin-bottom: 15px; }
.site-footer .copyright { margin-top: 20px; opacity: 0.6; }

/* ========================================================
   TOMBOL WHATSAPP MENGAMBANG
   ======================================================== */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 999;
    transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: wa-pulse 2.2s infinite;
    pointer-events: none;
}
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 600px) {
    .wa-float { width: 52px; height: 52px; bottom: 16px; right: 14px; }
    .wa-float svg { width: 26px; height: 26px; }
}

/* ========================================================
   NAVBAR ATAS (tampil di semua halaman, melayang di atas Hero)
   ======================================================== */
.site-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.site-navbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-navbar-brand { display: flex; align-items: center; text-decoration: none; }
.site-navbar-brand img { height: 42px; width: auto; display: block; }
.site-navbar-brand span { font-weight: bold; font-size: 18px; color: #1a1a2e; }
.site-navbar-menu { display: flex; gap: 28px; }
.site-navbar-menu a {
    color: #1a1a2e;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s ease;
}
.site-navbar-menu a:hover { color: #25D366; }
.site-navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px; height: 34px;
    background: none; border: none; cursor: pointer;
    padding: 0;
}
.site-navbar-toggle span {
    display: block; height: 3px; width: 100%;
    background: #1a1a2e; border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.site-navbar-toggle.aktif span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-navbar-toggle.aktif span:nth-child(2) { opacity: 0; }
.site-navbar-toggle.aktif span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 700px) {
    .site-navbar-toggle { display: flex; }
    .site-navbar-menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        transition: max-height 0.3s ease;
    }
    .site-navbar-menu.terbuka { max-height: 300px; }
    .site-navbar-menu a { padding: 14px 20px; border-top: 1px solid #f0f0f0; }
    .site-navbar-brand img { height: 34px; }
}

/* ========================================================
   KALKULATOR SIMULASI KPR
   ======================================================== */
.kalkulator-box {
    background: #f8f9fb;
    border-radius: 14px;
    padding: 30px;
}
.kalkulator-box label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin: 15px 0 6px;
    color: #1a1a2e;
}
.kalkulator-box input, .kalkulator-box select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
.kpr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.kpr-dp-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.kpr-dp-mode-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    transition: all 0.15s ease;
}
.kpr-dp-mode-btn.active {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
.kpr-hasil {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 25px;
    border: 2px solid #25D366;
}
.kpr-hasil p { color: #666; font-size: 14px; margin-bottom: 5px; }
.kpr-hasil-angka { font-size: 32px; font-weight: bold; color: #25D366; }
.kpr-detail {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
    gap: 8px;
}
.kalkulator-box .btn-wa { display: block; text-align: center; margin-top: 20px; }
.kpr-disclaimer { font-size: 12px; color: #999; text-align: center; margin-top: 12px; }
@media (max-width: 600px) {
    .kpr-grid { grid-template-columns: 1fr; }
}

/* ========================================================
   FAQ (ACCORDION)
   ======================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 5px 20px;
    background: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
    background: #fff6ec;
    border-color: #ffcc94;
    box-shadow: 0 3px 12px rgba(255, 153, 0, 0.12);
}
.faq-item[open] {
    background: #fff6ec;
    border-color: #ffcc94;
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    font-weight: bold;
    color: #1a1a2e;
    list-style: none;
    transition: color 0.2s ease;
}
.faq-item:hover summary { color: #d9720a; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
    font-size: 22px;
    color: #25D366;
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-left: 15px;
}
.faq-item:hover .faq-icon { color: #d9720a; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-jawaban {
    padding: 0 0 18px;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
    animation: faq-buka 0.25s ease;
}
@keyframes faq-buka {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   SLIDER FOTO (SECTION CUSTOM)
   ======================================================== */
.custom-section-text { text-align: left; max-width: 800px; margin: 20px auto 0; color: #444; }

/* ========================================================
   SECTION CUSTOM - LAYOUT SEJAJAR (foto & teks bersebelahan)
   ======================================================== */
.custom-section-sejajar {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-top: 20px;
    flex-direction: row; /* posisi foto = kiri (urutan HTML asli: foto lalu teks) */
}
.custom-section-sejajar.foto-kanan { flex-direction: row-reverse; }
.custom-section-sejajar .kolom-foto,
.custom-section-sejajar .kolom-teks { flex: 1 1 0; min-width: 280px; }
.custom-section-sejajar .kolom-foto .img-slider { aspect-ratio: 4 / 3; }
.custom-section-sejajar .kolom-foto .img-full { width: 100%; height: auto; border-radius: 12px; display: block; }
.custom-section-sejajar .custom-section-text { margin: 0; max-width: none; }
@media (max-width: 700px) {
    .custom-section-sejajar,
    .custom-section-sejajar.foto-kanan { flex-direction: column; }
}
.img-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 12px;
    background: #eee;
}
.img-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}
.img-slider-slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-slider-prev, .img-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}
.img-slider-prev { left: 15px; }
.img-slider-next { right: 15px; }
.img-slider-prev:hover, .img-slider-next:hover { background: rgba(0,0,0,0.7); }
.img-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.img-slider-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}
.img-slider-dot.active { background: #fff; }

@media (max-width: 600px) {
    .img-slider { aspect-ratio: 4 / 3; }
}

/* ========================================================
   SLIDER ARTIKEL (section tipe artikel)
   ======================================================== */
.artikel-img-slider {
    aspect-ratio: unset;
    height: auto;
    background: #f8f9fb;
    border-radius: 12px;
}
.artikel-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
    text-decoration: none;
    color: inherit;
}
.artikel-slide img {
    width: 100%; max-width: 480px; height: 220px;
    object-fit: cover; border-radius: 10px; margin-bottom: 18px;
}
.artikel-slide h3 { font-size: 22px; margin-bottom: 8px; color: #1a1a2e; }
.artikel-slide p { color: #666; max-width: 600px; margin-bottom: 10px; }

/* ========================================================
   HALAMAN ARTIKEL
   ======================================================== */
.grid-artikel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.card-artikel {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-artikel:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,0.14); }
.card-artikel .foto-wrap { overflow: hidden; height: 180px; }
.card-artikel .foto-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-artikel:hover .foto-wrap img { transform: scale(1.08); }
.card-artikel-isi { padding: 18px; }
.card-artikel-isi h3 { font-size: 18px; margin-bottom: 8px; color: #1a1a2e; }
.card-artikel-isi p { font-size: 14px; color: #666; margin-bottom: 10px; }
.tanggal-artikel { font-size: 12px; color: #999; }
.konten-artikel { font-size: 16px; line-height: 1.8; color: #333; text-align: left; }
.konten-artikel img { max-width: 100%; height: auto; border-radius: 10px; margin: 15px 0; display: block; }
.konten-artikel h2 { font-size: 26px; margin: 25px 0 12px; text-align: left; }
.konten-artikel h3 { font-size: 20px; margin: 20px 0 10px; text-align: left; }
.konten-artikel p { margin-bottom: 14px; }
.konten-artikel ul, .konten-artikel ol { margin: 0 0 14px 22px; }
.konten-artikel a { color: #25D366; text-decoration: underline; }

/* Deskripsi unit produk (halaman /unit/...) - pakai baris pendek per fasilitas
   (LT, LB, Kamar Tidur, dst), BUKAN paragraf artikel beneran. Jarak 14px di
   atas kegedean buat baris sependek itu, jadi ditempelin lebih rapat di sini
   tanpa ganggu jarak paragraf artikel asli yang masih pakai .konten-artikel biasa. */
.deskripsi-unit p { margin-bottom: 4px; }
.deskripsi-unit ul, .deskripsi-unit ol { margin: 0 0 4px 22px; }

/* ========================================================
   SECTION CUSTOM - PILIHAN WARNA TULISAN (Gelap/Terang)
   Dipakai kalau Oppa pilih warna latar section yang gelap,
   biar tulisannya tetap kebaca jelas.
   ======================================================== */
.custom-section.teks-terang h2,
.custom-section.teks-terang .konten-artikel,
.custom-section.teks-terang .konten-artikel h2,
.custom-section.teks-terang .konten-artikel h3,
.custom-section.teks-terang .konten-artikel strong { color: #ffffff; }
.custom-section.teks-terang .konten-artikel a { color: #ffffff; text-decoration: underline; }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 600px) {
    .hero-overlay h1 { font-size: 32px; }
    .hero-overlay p { font-size: 16px; }
    h2 { font-size: 26px; }
}

/* ========================================================
   VIDEO EMBED (responsive 16:9, otomatis nyesuain lebar layar)
   ======================================================== */
.video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%; /* rasio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.video-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}