/* ==========================================================================
   6.5 CONTACT PAGE SPECIFIC (Template: page-contact.php)
   ========================================================================== */

/* --- A. Layout Utama & Container --- */
body.page-template-page-contact .contact-full {
    width: 100%;
    height: 100vh;
    background-color: #F2F0EB;
    overflow: hidden; /* Mencegah scrollbar muncul */
}

body.page-template-page-contact .contact-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Konten kiri & tengah rapat kiri */
    gap: 0;
    background-color: #F2F0EB;
    box-sizing: border-box;
}

/* --- B. Kolom & Penyelarasan --- */
body.page-template-page-contact .contact-info,
body.page-template-page-contact .contact-form {
    width: 235px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

body.page-template-page-contact .contact-info {
    margin-left: 40px; /* Jarak dari tepi kiri layar */
    padding-right: 28.45px;
}

body.page-template-page-contact .contact-form {
    margin-left: 60px; /* Jarak antara kolom info dan form */
    padding-right: 28.45px;
    font-family: 'Hubballi', sans-serif;
    color: #1A1A1A;
}

/* --- C. Contact Info Details (Updated to Exact Computed Values) --- */

/* 1. Nilai untuk Teks Biasa (Paragraf) */
.address-content p {
    box-sizing: border-box;
    display: inline; /* Sesuai computed asli */
    font-family: 'Hubballi', sans-serif !important;
    font-size: 11px;
    font-weight: 400;
    color: rgb(26, 26, 26);
    line-height: 15.4px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}

/* 2. Nilai untuk Judul/Strong (Disesuaikan ke 24px & Weight 900) */
.address-content strong, 
.address-content b {
    box-sizing: border-box;
    display: inline; /* Menghilangkan block agar tidak memakan ruang berlebih */
    font-family: 'Hubballi', sans-serif !important;
    font-size: 24px !important; /* Nilai asli serasa.id */
    font-weight: 900 !important; /* Nilai asli serasa.id */
    height: auto;
    width: auto;
    color: rgb(26, 26, 26);
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}

/* Penyelarasan Ikon Sosmed (WA & IG) */
.contact-info .socmed {
    margin-top: 30px !important;
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antar ikon */
}

.contact-info .socmed img {
    width: 24px !important; /* Ukuran proporsional serasa.id */
    height: 24px !important;
    object-fit: contain;
    transition: opacity 0.3s ease;
    filter: brightness(0) saturate(100%) invert(10%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(10%) contrast(100%); /* Bikin ikon jadi warna tua senada teks */
}

.contact-info .socmed a:hover img {
    opacity: 0.6;
}

/* --- D. Contact Form Styling (Konsolidasi 2026-08-08) ---
   Sebelumnya ada 2 blok duplikat ("Font & Field Minimalis" dan "Clean &
   Minimalist") untuk selector yang sama. Blok ini adalah HASIL GABUNGAN
   nilai efektif yang sudah berlaku di browser (cascade: blok kedua
   override blok pertama utk properti yang sama-sama didefinisikan, tapi
   properti yang HANYA ada di blok pertama tetap dipertahankan karena
   tidak pernah ter-override). Behaviour 100% sama seperti sebelumnya,
   cuma dirapikan jadi 1 sumber kebenaran. Tidak menyentuh mobile.css
   (breakpoint <=768px pakai !important sendiri, tidak terpengaruh). */
.contact-form h3 {
    width: 178px;
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1A1A1A;
    font-family: 'Hubballi', sans-serif !important;
}

/* Label Input (Name, Email, dll) -- cuma didefinisikan di 1 blok lama, dipertahankan utuh */
.field-label {
    display: block;
    font-family: 'Hubballi', sans-serif !important;
    font-size: 11px;
    color: #A8A095; /* Warna Greyish Brown tua */
    text-transform: uppercase;
    margin-bottom: 5px;
}

.serasa-form input,
.serasa-form textarea {
    width: 172px;
    max-width: 250px; /* dari blok lama, tidak pernah di-override, tetap aktif */
    font-family: 'Hubballi', sans-serif !important;
    font-size: 13.33px;
    font-weight: 400;
    color: #1A1A1A;
    background: transparent;
    border: none;
    border-bottom: 1px solid #A8A095; /* Warna Greyish Brown */
    padding: 8px 0;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 0;
    transition: border-color 0.3s ease;
    -webkit-font-smoothing: antialiased; /* dari blok lama, tidak pernah di-override, tetap aktif */
}

.serasa-form input:focus,
.serasa-form textarea:focus {
    outline: none !important;
    border-bottom: 1px solid #7D756D !important; /* Garis bawah warna tua */
    box-shadow: none !important;
}

.serasa-form input::placeholder,
.serasa-form textarea::placeholder {
    color: #A8A095;
    font-family: 'Hubballi', sans-serif;
}

.serasa-form button {
    width: 150px;
    height: 30px;
    margin-top: 40px;
    background-color: #2a947c;
    color: #ffffff;
    font-family: 'Hubballi', sans-serif;
    font-weight: 700;
    letter-spacing: 2px; /* dari blok lama, tidak pernah di-override, tetap aktif */
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s ease; /* dari blok lama, dipertahankan utk hover */
}

.serasa-form button:hover {
    background-color: #1A1A1A; /* dari blok lama, tidak pernah di-override, tetap aktif */
}

/* --- E. Contact Side Image (Sesuai Computed Asli serasa.id) --- */
.contact-image {
    /* Hapus flex-grow agar tidak maksa lebar */
    height: 100vh;
    margin-left: auto; 
    overflow: hidden;
}

.contact-image img {
    float: right; /* Sesuai element.style asli */
    height: 100vh;
    width: auto; /* Biar lebar ngikutin proporsi asli foto, gak melar */
    object-fit: cover;
    overflow-clip-margin: content-box;
    overflow: clip;
    filter: grayscale(100%);
    transition: filter 1s ease;
    display: block;
    -webkit-font-smoothing: antialiased;
}

.contact-image:hover img {
    filter: grayscale(0%);
}

/* Tambahan Scrollbar sesuai computed asli Bos */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: #666; /* Warna thumb gelap sesuai spek */
}
::-webkit-scrollbar-track {
    background: #fff;
}