/* =====================================================================
   GARDENS AT CANDI SAWANGAN — MAIN STYLESHEET
   Palette: hijau tua (#1F3A2E), krem (#F7F4EC), stone (#DCD5C4),
            aksen emas (#B98B4E), teks (#221F1A)
   Font: Fraunces (display) + Inter (body)
   ===================================================================== */

:root {
    --color-primary: #1F3A2E;
    --color-primary-light: #2E5240;
    --color-bg: #F7F4EC;
    --color-stone: #DCD5C4;
    --color-accent: #B98B4E;
    --color-accent-dark: #97702F;
    --color-text: #221F1A;
    --color-text-muted: #5B564B;
    --color-white: #FFFFFF;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 6px;
    --max-width: 1180px;
    --shadow-soft: 0 4px 20px rgba(31, 58, 46, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 16px;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: var(--color-primary);
    font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; max-width: 68ch; }

.text-muted { color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn-primary:hover { background: var(--color-accent-dark); }

/* Tombol WhatsApp header (samain warna sama icon WA resmi) */
.btn-wa {
    background: #25D366;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: relative;
    overflow: hidden;
    isolation: isolate; /* biar shine di dalam tombol gak "bocor" ke luar radius */
    animation: waHeaderGlow 2.6s ease-in-out infinite;
}
.btn-wa:hover {
    background: #1DA851;
    animation-play-state: paused;
}

/* Icon & teks dikasih z-index biar tetap kebaca jelas pas efek kilau lewat */
.btn-wa-label {
    position: relative;
    z-index: 2;
}

/* Ring cahaya berdenyut pelan di sekeliling tombol - narik perhatian tanpa berisik */
@keyframes waHeaderGlow {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Kilau tipis yang "menyapu" tombol tiap beberapa detik - efek CTA premium */
.btn-wa::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: waHeaderShine 3.6s ease-in-out infinite;
}
@keyframes waHeaderShine {
    0%   { left: -60%; }
    18%  { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-wa { animation: none; }
    .btn-wa::after { animation: none; display: none; }
}

.btn-outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); }
.btn-light {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ---------- Header / Nav ---------- */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-stone);
    position: sticky;
    top: 0;
    z-index: 100;
}
.promo-banner {
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 500;
}
.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: var(--max-width);
    margin: 0 auto;
}
.logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}
.logo span { color: var(--color-accent); }
.logo-img {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
@media (max-width: 640px) {
    .logo-img { height: 36px; }
}
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}
.nav-cta { display: flex; align-items: center; gap: 20px; }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--color-primary);
}

@media (max-width: 860px) {
    .main-nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        padding: 16px 24px 22px;
        border-bottom: 1px solid var(--color-stone);
    }
    .main-nav.open { display: flex; }
    .main-nav a { width: 100%; padding: 10px 0; }
    .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185,139,78,0.28) 0%, rgba(185,139,78,0) 70%);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-eyebrow {
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.hero h1 { color: var(--color-white); margin-bottom: 20px; }
.hero p.lead {
    color: rgba(255,255,255,0.82);
    font-size: 1.1rem;
    max-width: 46ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-visual {
    background: var(--color-stone);
    border-radius: var(--radius);
    aspect-ratio: 4/5;
    overflow: hidden;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero Slider (banner beberapa foto bergantian) ---------- */
/* CATATAN DESAIN (Rin): sengaja PAKAI display:none/block buat gantian
   foto (bukan numpuk position:absolute + opacity). Kenapa: versi mobile
   punya aturan khusus "tinggi gambar ngikutin ukuran foto aslinya"
   (height:auto, lihat revisi mobile hero sebelumnya) -- kalau semua
   foto ditumpuk absolute, tinggi kotaknya jadi kacau di mobile. Dengan
   display:none/block, cuma 1 foto yang benar-benar "ada" di layout
   pada satu waktu, jadi aman baik di desktop (kotak hero-visual ukuran
   tetap) maupun mobile (tinggi ngikutin foto yang lagi tampil). */
.hero-slider { position: relative; }
.hero-slider .hero-slide { display: none; width: 100%; height: 100%; object-fit: cover; }
.hero-slider .hero-slide.is-active { display: block; animation: heroSlideFade 600ms ease; }
@keyframes heroSlideFade { from { opacity: 0; } to { opacity: 1; } }
.hero-slider-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}
.hero-slider-dots .hero-slider-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}
.hero-slider-dots .hero-slider-dot.is-active { background: var(--color-accent); transform: scale(1.2); }

@media (max-width: 860px) {
    /*
        Oppa, catatan (Rin, revisi ke-3): pendekatan "tulisan numpuk DI
        ATAS gambar" (revisi 1 & 2) selalu berisiko numpuk sama tulisan
        bawaan gambar itu sendiri, apalagi kalau gambar hero diganti-
        ganti lewat Admin Panel dengan proporsi yang beda-beda.

        Sekarang diganti pendekatan yang lebih aman: gambar tampil
        UTUH dulu (tidak ketutup apapun), BARU di bawahnya ada panel
        solid berisi tulisan - jadi dijamin nggak akan numpuk lagi
        walau gambarnya diganti. Cuma ada sedikit efek "fade" di
        sambungan gambar-ke-panel biar transisinya halus, bukan
        potongan kasar.
    */
    .hero { padding: 0; }
    .hero::after { display: none; } /* lingkaran dekorasi cuma relevan buat layout desktop */
    .hero-grid {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Gambar - sudut atas membulat */
    .hero-visual {
        position: relative;
        aspect-ratio: 4/5;
        background: none;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    /*
        CATATAN OPTIMASI (Rin, 6 Sep 2026) -- Fix PageSpeed "Penyebab
        perubahan tata letak" (Cumulative Layout Shift):
        Sebelumnya di sini tinggi kotak gambar ikut ukuran asli foto
        (height:auto) yang beda-beda tiap foto slider -- akibatnya
        SEBELUM foto selesai dimuat, kotaknya ketinggian 0 / tidak
        menentu, terus pas foto muncul, semua konten di bawahnya
        (termasuk daftar Cluster) "meloncat" turun. Ini yang bikin
        skor CLS jadi merah di PageSpeed.

        Sekarang semua foto hero (termasuk foto slider) sudah
        DISERAGAMKAN ke rasio 4:5 sejak proses optimasi gambar
        (lihat database/migration_2026-09-06_optimasi_gambar.sql),
        jadi aman pakai aspect-ratio TETAP + object-fit:cover di sini
        (mengikuti aturan dasar .hero-visual img / .hero-slide di atas)
        -- browser sudah tahu persis tinggi kotaknya dari awal, SEBELUM
        foto selesai diunduh, jadi tidak ada lagi elemen yang meloncat.
    */
    .hero-visual.hero-slider .hero-slide.is-active { display: block; }
    .hero-visual::after {
        /* fade tipis di sambungan bawah gambar, biar nyatu halus ke panel teks */
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 50px;
        background: linear-gradient(to bottom, rgba(31,58,46,0) 0%, var(--color-primary) 100%);
    }

    /* Panel teks - taruh DI BAWAH gambar (bukan numpuk di atasnya lagi) */
    .hero-grid > div:first-child {
        background: var(--color-primary);
        padding: 28px 24px 32px;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .hero-eyebrow { margin-bottom: 8px; }
    .hero h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); margin-bottom: 10px; }
    .hero p.lead { font-size: 0.98rem; }
    .hero-actions { margin-top: 18px; }
}

/* ---------- Section spacing ---------- */
.section { padding: 84px 0; }
.section-alt { background: var(--color-white); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head .kicker {
    color: var(--color-accent-dark);
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 10px;
    display: block;
}

/* ---------- Cluster showcase (asymmetric cards) ---------- */
.cluster-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.cluster-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-primary);
    color: var(--color-white);
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--shadow-soft);
}
.cluster-card:nth-child(1) { grid-column: span 4; min-height: 420px; }
.cluster-card:nth-child(2) { grid-column: span 2; }
.cluster-card:nth-child(3) { grid-column: span 2; }
.cluster-card:nth-child(4) { grid-column: span 4; min-height: 420px; }
.cluster-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Overlay gelap di atas foto supaya tulisan tetap kebaca jelas,
   walaupun fotonya terang (misal: denah rumah putih, langit cerah, dll).
   Digelapin lebih awal (dari 25% tinggi kartu) dan lebih pekat di bawah
   (95%) dibanding sebelumnya, khusus supaya area tulisan selalu kontras. */
.cluster-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(15,26,20,0) 0%,
        rgba(15,26,20,0.18) 25%,
        rgba(15,26,20,0.72) 55%,
        rgba(15,26,20,0.95) 100%);
}
.cluster-card-body { position: relative; padding: 26px; z-index: 1; }
.cluster-card .segment-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.cluster-card h3 { color: var(--color-white); margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.cluster-card p { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin-bottom: 14px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.cluster-card .card-link { color: var(--color-accent); font-weight: 600; font-size: 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }

@media (max-width: 760px) {
    .cluster-grid { grid-template-columns: 1fr; }
    .cluster-card:nth-child(n) { grid-column: span 1; min-height: 300px; }
}

/* ---------- Unit type table ---------- */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.unit-card {
    background: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: var(--radius);
    padding: 20px;
}
.unit-card h4 { margin-bottom: 8px; color: var(--color-primary); }
.unit-card dl { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }

/* ---------- Article / blog cards ---------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.article-card { background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.article-card img { aspect-ratio: 16/10; object-fit: cover; }
.article-card-body { padding: 20px; }
.article-card .date { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 8px; display: block; }
.article-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.article-card p { font-size: 0.92rem; color: var(--color-text-muted); }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid var(--color-stone); }
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--color-accent); flex-shrink: 0; }
.faq-item.open .faq-question::after { content: '\2212'; }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 4px 20px; }

/* ---------- Contact / form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-stone);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-white);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.92rem; }
.alert-success { background: #E5F1E8; color: var(--color-primary); border: 1px solid #BFDCC7; }
.alert-error { background: #FBEAEA; color: #9B2C2C; border: 1px solid #F1C1C1; }

@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); padding: 60px 0 30px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; }
.site-footer h4 { color: var(--color-white); font-size: 1rem; margin-bottom: 16px; }
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--color-accent); }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }


/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); padding: 18px 0 0; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

/* ---------- Tombol WhatsApp Melayang (pojok kanan bawah) ---------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 999;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: waFloatPulse 2.4s ease-in-out infinite;
}
.wa-float:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    animation-play-state: paused;
}
@keyframes waFloatPulse {
    0%   { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 12px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 600px) {
    .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
    .wa-float svg { width: 26px; height: 26px; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }