/*
Theme Name: Interior Pro 
Author: MazmoDev
Description: Tema Khusus Untuk Interior
Version: 40.0
*/

/* =========================================
   1. RESET & VARIABLES
   ========================================= */
:root {
    --bg-color: #f9f9f9;
    --text-main: #333333;
    --text-light: #ffffff;
    --btn-color: #b38c6e;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --container-width: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; margin: 0; padding: 0; }

/* =========================================
   FIX UKURAN LOGO PNG
   ========================================= */

/* 1. Target Logo Gambar di Header */
/* Kita gunakan beberapa selektor umum agar pasti kena */
.site-header .custom-logo-link img,
.site-header .logo-text img,
.site-branding img {
    max-width: 180px; /* <-- UBAH ANGKA INI UNTUK DESKTOP */
    height: auto;     /* Wajib: Agar gambar tidak gepeng */
    display: block;   /* Menghapus celah di bawah gambar */
    transition: all 0.3s ease; /* Transisi halus jika ukuran berubah */
}

/* 2. Ukuran di Layar Tablet/Laptop Kecil */
@media (max-width: 992px) {
    .site-header .custom-logo-link img,
    .site-header .logo-text img,
    .site-branding img {
        max-width: 150px; /* Sedikit lebih kecil */
    }
}

/* 3. Ukuran di Layar HP (Mobile) */
@media (max-width: 768px) {
    .site-header .custom-logo-link img,
    .site-header .logo-text img,
    .site-branding img {
        max-width: 130px; /* Ukuran pas untuk HP agar tidak nabrak hamburger */
    }
}
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    height: 100%;
}

.site-header {
    background-color: #f4ece4 !important; /* Warna Latte Solid */
    position: relative !important;        /* Wajib Relative biar ga melayang */
    top: auto !important;
    width: 100%;
    z-index: 9999;
    padding: 15px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ATURAN 2: KHUSUS HOME (FIXED HEADER) */
body.home .site-header {
    background-color: transparent !important;
    position: fixed !important;
    top: 0 !important;
    
    /* --- PERBAIKAN UTAMA --- */
    left: 0;              /* Paksa nempel kiri */
    right: 0;             /* Paksa nempel kanan */
    width: 100%;          /* Lebar penuh */
    max-width: 100vw;     /* Pastikan tidak lebih lebar dari viewport */
    box-sizing: border-box; /* Padding dihitung di dalam lebar, bukan menambah lebar */
    
    box-shadow: none;
    transition: all 0.4s ease;
    
    /* Reset margin/padding wrapper header agar tidak offset */
    margin: 0;
    padding-left: 0; 
    padding-right: 0;
}

/* Jaga-jaga jika Admin Bar login bikin offset */
body.home.admin-bar .site-header {
    top: 32px !important; /* Turun dibawah admin bar */
}

@media screen and (max-width: 782px) {
    body.home.admin-bar .site-header {
        top: 46px !important; /* Admin bar mobile lebih tebal */
    }
}

/* ATURAN 3: KHUSUS HOME SAAT SCROLL */
body.home .site-header.scrolled {
    background-color: #f4ece4 !important;
    padding: 10px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* CONTAINER */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
.logo-text a {
    font-family: var(--font-heading, serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #3e2b22;
    text-decoration: none;
    z-index: 1002; position: relative; /* Agar logo tetap diatas menu mobile */
}

/* --- NAVIGASI (WRAPPER) --- */
.main-navigation {
    display: flex;
    align-items: center;
    gap: 30px; /* Jarak antara Menu dan Tombol Contact */
}

/* MENU LIST */
.nav-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 25px;
}
.nav-menu li a {
    color: #3e2b22;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: 0.3s;
}
.nav-menu li a:hover { color: var(--btn-color, #e87a25); }

/* --- TOMBOL CONTACT (STYLE UMUM) --- */
.header-cta {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #3e2b22;
    border-radius: 50px;
    color: #3e2b22;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    white-space: nowrap;
}
.header-cta:hover {
    background: #3e2b22;
    color: #fff;
}


/* --- MOBILE RESPONSIVE --- */
.mobile-toggle {
    display: none; background: none; border: none; 
    font-size: 1.6rem; color: #3e2b22; cursor: pointer;
}

@media (max-width: 992px) {
    .mobile-toggle { display: block; z-index: 9999; position: relative; }

    /* DRAWER MENU (SLIDE) */
    .main-navigation {
        position: fixed; top: 0; right: -100%;
        width: 280px; height: 100vh;
        background: #fff;
        padding: 90px 25px 40px; /* Padding atas besar biar ga nabrak logo */
        
        /* Flex Column: Susun ke bawah */
        flex-direction: column;
        align-items: flex-start; /* Rata Kiri */
        justify-content: flex-start;
        gap: 30px;
        
        transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        z-index: 1005;
    }
    
    .main-navigation.active { right: 0; }

    /* MENU ITEM DI HP */
    .nav-menu { flex-direction: column; width: 100%; gap: 0; }
    .nav-menu li { width: 100%; border-bottom: 1px solid #eee; }
    .nav-menu li:last-child { border: none; }
    .nav-menu li a { display: block; padding: 15px 0; font-size: 1.1rem; }

    /* STYLE TOMBOL CONTACT DI HP (MODIFIKASI) */
    .header-cta {
        width: 100%;           /* Lebar Penuh */
        text-align: center;    /* Teks Tengah */
        margin-top: 0 !important;
        background: #3e2b22;   /* Warna Background Solid */
        color: #fff;           /* Teks Putih */
        border: none;
        padding: 15px;
        border-radius: 8px;    /* Kotak rounded sedikit */
    }
    .header-cta:hover {
        background: var(--btn-color, #e87a25); /* Orange saat disentuh */
        transform: translateY(-2px);
    }
}

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfbf9 0%, #dcbfa1 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    width: 100%;
    align-items: center;
}

/* Kiri: Teks */
.hero-content { z-index: 10; padding-right: 20px; }
.hero-title { font-family: var(--font-heading); font-size: 4.5rem; line-height: 1.1; color: var(--text-main); margin-bottom: 20px; }
.hero-title span { font-style: italic; font-weight: 400; display: block; }
.hero-desc { color: #555; font-size: 1.1rem; margin-bottom: 35px; max-width: 100%; }
.hero-actions { display: flex; align-items: center; gap: 25px; }

.btn-primary { background-color: var(--btn-color); color: #fff; padding: 16px 40px; border-radius: 50px; font-weight: 600; box-shadow: 0 10px 25px rgba(232, 122, 37, 0.3); transition: 0.3s; }
.btn-primary:hover { transform: translateY(-5px); }

.client-proof { display: flex; align-items: center; gap: 15px; }
.avatars { display: flex; align-items: center; }
.circle-avatar { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; background-color: #ccc; margin-left: -15px; position: relative; z-index: 1; object-fit: cover; flex-shrink: 0; }
.circle-avatar:first-child { margin-left: 0; z-index: 3; }
.client-text { font-size: 0.85rem; color: #444; line-height: 1.2; font-weight: 600; }

/* Kanan: Visual */
.hero-visual { width: 100%; display: flex; justify-content: center; position: relative; }
.image-anchor { position: relative; width: 100%; max-width: 550px; }
.layer-main { position: relative; z-index: 1; width: 100%; 


   
}

.hero-layer { position: absolute; z-index: 2; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1)); }
.layer-top-right { width: 45%; top: 0%; right: 0%; }
.layer-btm-left { width: 32%; bottom: -1%; left: 0; z-index: 3; }

/* =========================================
   4. SYSTEM ANIMASI
   ========================================= */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translate(0) scale(1); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-up { transform: translateY(40px); }
.reveal-down { transform: translateY(-40px); }
.reveal-zoom { transform: scale(0.9); }
.reveal.active.reveal-left, .reveal.active.reveal-right, .reveal.active.reveal-zoom, .reveal.active.reveal-up, .reveal.active.reveal-down { transform: translate(0) scale(1); }
.delay-200 { transition-delay: 0.2s; }
.delay-400 { transition-delay: 0.4s; }
.delay-600 { transition-delay: 0.6s; }
.delay-800 { transition-delay: 0.8s; }
.delay-1000 { transition-delay: 0.10s; }
.delay-1200 { transition-delay: 0.12s; }

/* =========================================
   5. SECTIONS UI
   ========================================= */
.trusted-section { padding: 40px 0; background: #fff; border-bottom: 1px solid #eee; }
.trusted-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; opacity: 0.5; }
.trusted-logo { height: 30px; filter: grayscale(100%); }

/* About */
.about-section { padding: 120px 0; background: #fff; overflow: hidden;position: relative; width: 100%;}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-dual-wrapper { display: flex; justify-content: left; align-items: left; width: 100%; }
.about-dual-wrapper img { height: 350px; width: auto; border-radius: 12px; object-fit: cover; will-change: transform, opacity; }
.about-dual-wrapper img:nth-child(2) { margin-left: -80px; position: relative; z-index: 1; }
.about-dual-wrapper img:nth-child(1) { position: relative; z-index: 2; }
.about-dual-wrapper img.reveal.active { transform: translate(0, 0) !important; }

.section-subtitle { color: var(--btn-color); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px; display: block; }
.section-title { font-family: var(--font-heading); font-size: 2.8rem; margin-bottom: 40px; color: var(--text-main); line-height: 1.2; }
.stats-grid { display: flex; gap: 40px; margin-top: 30px; border-top: 1px solid #ddd; padding-top: 30px; }
.stat-item h4 { font-size: 2.5rem; font-family: var(--font-heading); color: var(--btn-color); margin-bottom: 5px; }

/* =========================================
   10. ROOM SECTION (FULL FIX - TEXT KIRI, GAMBAR KANAN)
   ========================================= */

/* 1. CONTAINER UTAMA (JANGKAR) */
/* Bagian ini yang kemarin mungkin terhapus/salah, makanya elemen lari ke atas */
.room-section {
    position: relative; /* WAJIB ADA: Agar elemen tidak lari ke Hero */
    width: 100%;
    height: 500px; /* WAJIB ADA: Memberi ruang agar section terlihat */
    background-color: #f4ece4;
    overflow: hidden; /* WAJIB: Agar efek tenggelam jalan */
    display: block;
    z-index: 1; 
    border-bottom: none;
}

.room-composition {
    position: relative;
    width: 100%;
    
    height: 100%;
    margin: 0 auto;
}

/* 2. TEKS (POSISI DI KIRI) */
.room-text {
    position: absolute;
    top: 30%;
    width: 50%;
    transform: translateY(-50%); /* Center Vertikal */
    z-index: 50;
    
    text-align: left; /* Rata Kiri */
    padding: 0;
}

.room-text h2 { 
    font-family: var(--font-heading, serif);
    color: #3e2b22; 
    margin: 0 0 20px 0; 
    font-size: 3.1rem; 
    line-height: 1.1;
    
}

.room-text p {
    font-family: var(--font-body, sans-serif);
    color: #5d4d41;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 3. FURNITURE (POSISI DI KANAN) */
.room-layer {
    position: absolute !important;
    display: block !important;
    object-fit: contain;
    will-change: transform;
    transition: none !important;
    
    /* Center Vertikal */
    top: 40% !important; 
    
    
    /* Reset Posisi Kiri/Kanan Default */
    left: auto !important; 
}

/* --- Posisi Spesifik Per Barang (Area Kanan) --- */

/* SOFA (Patokan Utama di Kanan) */
.layer-sofa {
    width: 500px;
    right: 3%; /* Jarak 5% dari Kanan Layar */
    /* Hapus centering default */
    transform: none; 
    z-index: 5;
}

/* BINGKAI (Di atas Sofa) */
.layer-frame {
    width: 190px;
    /* Mainkan angka right ini agar pas di tengah sofa */
    right: 18%; 
    top: 20% !important; 
    z-index: 1;
}

/* MEJA (Di Depan Sofa - Agak Kiri dikit dari Sofa) */
.layer-table {
    width: 120px;
    right: 41%; /* Geser ke kiri (menjauh dari pinggir kanan) */
    z-index: 10; 
    margin-top:-20px;
}

/* LAMPU (Pojok Kanan Banget) */
.layer-lamp {
    width: 80px;
    right: -30px; /* Mepet Kanan */
    z-index: 4; 
    margin-top:-50px;
}



.contact-map-section { 
    position: relative;
    z-index: 50; 
    background: #ffffff; 
   
}

/* =========================================
   FORM 2 KOLOM (NAMA & LAYANAN)
   ========================================= */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Bagi 2 kolom rata */
    gap: 20px; /* Jarak antar kolom */
}

/* Fix Mobile: Di HP kembali jadi 1 kolom (atas-bawah) biar ga sempit */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0; /* Gap diatur oleh margin-bottom form-group */
    }
}
@media (max-width: 992px) {
    .room-section { height: 500px; }
    .room-text { 
        width: 100%; 
        left: 0%; 
        top: 10%; 
        transform: translateX(-50%); 
        text-align: center; 
    }
    .room-text h2 { font-size: 2.2rem; }
    .room-layer { 
        left: 50% !important; 
        right: auto !important; 
        margin-top: 0; 
    }
    
    .layer-sofa { width: 300px; top: 60% !important; transform: translateX(-50%); } 
    /* Nanti JS yang handle posisi transform sofa di HP */

    .layer-frame { width: 110px; left: 50% !important; margin-left: -50px; top: 45% !important; right: auto; }
    .layer-table { width: 60px; left: 0 !important; right: auto; top: 65% !important; }
    .layer-lamp { 
        width: 45px;
        
        /* 1. Pakai !important agar menang lawan .room-layer */
        left: auto !important; 
        
        /* 2. Tempel Kanan */
        right: 0 !important; 
        
        /* 3. Matikan transform centering */
       
        
        top: 50% !important; 
        margin: 0 !important;
    }
}
/* =========================================
   5. SERVICES SECTION (NEW LAYOUT V41)
   ========================================= */
.services-section { 
    padding: 100px 0; 
    background: var(--bg-color); 
	position: relative;
    width: 100%;
    overflow: hidden;
}

/* Wrapper Utama: Kiri Konten, Kanan Gambar */
.services-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Kiri lebih lebar dikit untuk teks */
    gap: 60px;
    align-items: center;
}

/* Header di dalam kolom kiri */
.services-header-left {
    margin-bottom: 40px;
    text-align: left; /* Rata kiri */
}

/* Grid Daftar Layanan (2 Kolom Kecil di dalam Kolom Kiri) */
.services-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Item per baris */
    gap: 20px;
}

.service-item-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: default;
    
    /* Shadow Soft Ditambahkan */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-item-row:hover {
    /* 1. Efek Melayang (Naik ke atas 5px) */
    transform: translateY(-5px);
    
    /* 2. Border menyala warna tema */
    border-color: var(--btn-color);
    
    /* 3. Shadow menebal dan ada glow orange tipis */
    box-shadow: 0 20px 40px rgba(232, 122, 37, 0.15);
}

/* Efek Tambahan: Icon ikut bereaksi saat Card di-hover */
.service-item-row:hover .icon-simple {
    background-color: var(--btn-color); /* Background jadi orange */
    color: #fff; /* Icon jadi putih */
    transform: scale(1.1); /* Membesar sedikit (Zoom) */
}

/* Icon Bulat Kecil */
.icon-simple {
    width: 40px;
    height: 40px;
    background: #fff4eb; /* Orange muda lembut */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-color);
    font-size: 1rem;
    flex-shrink: 0; /* Agar icon tidak gepeng */
    transition: 0.3s;
}

.service-item-row:hover .icon-simple {
    background: var(--btn-color);
    color: #fff;
}

/* Judul Layanan */
.service-title-simple {
    font-family: var(--font-body); /* Pakai font body biar rapi/baca */
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}

/* Kolom Kanan: Gambar Vertikal */
.services-visual-right img {
    width: 100%;
    height: 600px; /* Gambar tinggi */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* RESPONSIVE SERVICES */
@media (max-width: 992px) {
    .services-wrapper {
        grid-template-columns: 1fr; /* Jadi 1 kolom ke bawah */
        gap: 40px;
    }
    .services-visual-right {
        order: -1; /* Gambar pindah ke atas di Tablet/HP */
    }
    .services-visual-right img {
        height: 500px; /* Kecilkan tinggi gambar */
    }
}

@media (max-width: 600px) {
    .services-list-grid {
        grid-template-columns: 1fr; /* Di HP jadi 1 list ke bawah biar teks ga sempit */
    }
}

/* =========================================
   SECTION KEUNGGULAN (LAYOUT SIDE-BY-SIDE)
   ========================================= */
.features-section {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
    z-index: 5;
}

/* Header Style (Tetap sama) */
.section-header { margin-bottom: 60px; }
.section-header.text-center { text-align: center; }
.section-header .sub-title {
    display: block; color: var(--btn-color, #e87a25);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px;
}
.section-header h2 {
    font-family: var(--font-heading, serif);
    font-size: 2.5rem; color: #3e2b22;
    line-height: 1.2; margin-bottom: 20px;
}
.header-line {
    width: 60px; height: 3px; background: var(--btn-color, #e87a25); margin: 0 auto;
}

/* GRID SYSTEM (3 Kolom x 2 Baris) */
.features-grid {
    display: grid;
    /* Min-width 300px agar card tidak terlalu gepeng */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 40px 30px; /* Gap: Atas-Bawah 40px, Kiri-Kanan 30px */
}

/* CARD STYLE (SIDE LAYOUT) */
.feature-card-side {
    display: flex; /* KUNCI: Icon kiri, Teks Kanan */
    align-items: flex-start; /* Icon sejajar dengan judul (atas) */
    gap: 20px; /* Jarak icon ke teks */
    padding: 25px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-card-side:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: var(--btn-color, #e87a25); /* Border jadi orange saat hover */
}

/* ICON BOX (KIRI) */
.feature-card-side .icon-box {
    flex-shrink: 0; /* Agar icon tidak mengecil terdesak teks */
    width: 60px;
    height: 60px;
    background: #fdfbf9;
    border-radius: 10px; /* Kotak rounded, bukan bulat penuh */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-color, #e87a25);
    font-size: 1.6rem;
    transition: 0.3s;
}

.feature-card-side:hover .icon-box {
    background: var(--btn-color, #e87a25);
    color: #fff;
}

/* TEXT BOX (KANAN) */
.feature-card-side .text-box h3 {
    font-family: var(--font-heading, serif);
    font-size: 1.2rem;
    color: #3e2b22;
    margin: 0 0 10px 0; /* Jarak judul ke paragraf */
    font-weight: 700;
}

.feature-card-side .text-box p {
    font-family: var(--font-body, sans-serif);
    color: #5d4d41;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; /* 1 Kolom di HP */ }
    
    .feature-card-side {
        padding: 20px;
        align-items: flex-start;
    }
}


/* Blog */
.blog-section { padding: 100px 0; background: #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }
.blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
.blog-thumb { position: relative; height: 240px; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.1); }
.blog-date { position: absolute; top: 15px; left: 15px; background: #fff; padding: 5px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; color: var(--text-main); }
.blog-content { padding: 25px; }
.blog-title { font-family: var(--font-heading); font-size: 1.4rem; line-height: 1.3; margin-bottom: 15px; }
.read-more-link { font-size: 0.9rem; font-weight: 600; color: var(--btn-color); text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; }

/* =========================================
   PORTFOLIO SECTION (SQUARE & ICON FIX)
   ========================================= */
.portfolio-section {
    position: relative;
    padding: 100px 0;
    
    z-index: 15;
}

/* FILTER BUTTONS */
.portfolio-filter {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid #dcbfa1;
    padding: 8px 25px;
    border-radius: 30px;
    color: #5d4d41;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--btn-color, #e87a25);
    border-color: var(--btn-color, #e87a25);
    color: #fff;
}

/* GRID LAYOUT */
.portfolio-grid {
    display: grid;
    /* Responsive: Minimal lebar 300px, sisa ruang dibagi rata */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* CARD ITEM (SQUARE RATIO) */
.portfolio-item {
    position: relative;
    width: 100%;
    
    /* KUNCI SQUARE: Aspect Ratio 1 banding 1 */
    aspect-ratio: 1 / 1; 
    height: auto; /* Reset height lama */
    
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease;
    background: #000; /* Background hitam biar video fit bagus */
}

/* Animasi Show/Hide */
.portfolio-item.hide { display: none; }
.portfolio-item.show { animation: popUp 0.5s ease; }

.portfolio-wrap {
    width: 100%; height: 100%; position: relative;
}

/* GAMBAR & VIDEO (FULL FILL SQUARE) */
.portfolio-img, 
.portfolio-video-bg {
    width: 100%; height: 100%;
    object-fit: cover; /* Wajib cover agar memenuhi kotak persegi */
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
}

.portfolio-item:hover .portfolio-img,
.portfolio-item:hover .portfolio-video-bg { 
    transform: scale(1.1); /* Zoom effect */
}

/* --- PERMANENT PLAY ICON (SELALU MUNCUL) --- */
.permanent-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Center Sempurna */
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.25); /* Transparan dikit */
    
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    z-index: 5; /* Di atas gambar, di bawah overlay teks */
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Beda warna untuk Youtube vs MP4 (Opsional) */
.permanent-play-icon.youtube { color: #fff; } 
.permanent-play-icon.self { color: #fff; }

.portfolio-item:hover .permanent-play-icon {
    background: var(--btn-color, #e87a25); /* Jadi Orange saat hover */
    border-color: var(--btn-color, #e87a25);
    transform: translate(-50%, -50%) scale(1.1); /* Membesar dikit */
}


/* --- OVERLAY TEXT (HOVER ONLY) --- */
.portfolio-overlay {
    position: absolute; inset: 0;
    background: rgba(62, 43, 34, 0.7); /* Gelap */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: 0; 
    transition: 0.4s;
    z-index: 10; /* Paling atas */
}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.overlay-content h3 {
    color: #fff;
    font-family: var(--font-heading, serif);
    font-size: 1.5rem;
    transform: translateY(20px); transition: 0.4s;
}

.portfolio-item:hover .overlay-content h3 { transform: translateY(0); }

/* Tombol Load More */
.load-more-container { text-align: center; margin-top: 50px; }
#loadMoreBtn {
    display: none; background: transparent;
    border: 2px solid var(--btn-color, #e87a25);
    color: var(--btn-color, #e87a25);
    padding: 12px 30px; border-radius: 5px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
#loadMoreBtn:hover { background: var(--btn-color, #e87a25); color: #fff; }

/* --- LIGHTBOX (POPUP) --- */
.lightbox {
    display: none; /* Sembunyi default */
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); /* Hitam Pekat */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 80vh;
    text-align: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Video di Lightbox */
#lightboxVideoContainer iframe, 
#lightboxVideoContainer video {
    width: 80vw;
    height: 45vw; /* Rasio 16:9 */
    max-width: 900px;
    max-height: 506px;
    border: 2px solid #fff;
}

#lightboxCaption {
    color: #fff;
    margin-top: 15px;
    font-family: var(--font-heading, serif);
    font-weight: 400;
    letter-spacing: 1px;
}

/* Tombol Close */
.close-lightbox {
    position: absolute;
    top: 20px; right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
}
.close-lightbox:hover { color: var(--btn-color, #e87a25); }

/* Tombol Next/Prev */
.prev-slide, .next-slide {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 10000;
}
.prev-slide { left: 0; border-radius: 3px 0 0 3px; }
.next-slide { right: 0; border-radius: 3px 0 0 3px; }
.prev-slide:hover, .next-slide:hover { background-color: rgba(232, 122, 37, 0.8); }

/* Icon Zoom di Hover Card */
.zoom-icon {
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; margin: 0 auto 15px;
}

@media (max-width: 768px) {
    
    /* --- FILTER TAB (HORIZONTAL SCROLL) --- */
    .portfolio-filter {
        display: flex;
        flex-wrap: nowrap; /* Jangan turun ke bawah */
        overflow-x: auto; /* Aktifkan Scroll Samping */
        justify-content: flex-start; /* Mulai dari kiri */
        gap: 10px;
        padding: 10px 20px; /* Padding biar ga mepet layar */
        
        /* Sembunyikan Scrollbar (Chrome/Safari/Opera) */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Sembunyikan Scrollbar (Firefox/IE) */
    .portfolio-filter::-webkit-scrollbar { display: none; }
    .portfolio-filter { -ms-overflow-style: none; scrollbar-width: none; }

    .filter-btn {
        flex: 0 0 auto; /* Tombol tidak menyusut */
        white-space: nowrap; /* Teks satu baris */
        font-size: 0.85rem; /* Kecilkan dikit fontnya */
        padding: 8px 20px;
    }

    /* --- GALLERY GRID (2 KOLOM) --- */
    .portfolio-grid {
        /* Paksa jadi 2 kolom rata */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important; /* Jarak antar foto lebih rapat */
    }

    /* Atur Icon Play agar pas di ukuran kecil */
    .permanent-play-icon {
        width: 40px; height: 40px; font-size: 1rem;
    }
}

/* =========================================
   GALLERY PAGINATION STYLE
   ========================================= */
.gallery-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.gallery-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px; 
    height: 45px;
    background: #fff;
    border: 1px solid #e0d0c0; /* Garis cream tipis */
    color: #5d4d41; /* Text Coklat */
    text-decoration: none;
    font-weight: 700;
    border-radius: 50%; /* Bulat */
    transition: all 0.3s ease;
    font-size: 1rem;
}

/* Hover & Aktif */
.gallery-pagination .page-numbers:hover,
.gallery-pagination .page-numbers.current {
    background: var(--btn-color, #e87a25); /* Warna Aksen */
    color: #fff;
    border-color: var(--btn-color, #e87a25);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(232, 122, 37, 0.2);
}

/* Tombol Panah Prev/Next */
.gallery-pagination .page-numbers.prev,
.gallery-pagination .page-numbers.next {
    background: #fdfbf9;
}
/* =========================================
   7. CTA SECTION (LATTE GRADIENT STYLE)
   ========================================= */
.cta-section {
    padding: 100px 0;
    background: #fff;
}

/* Kartu Utama: Gradient Latte Cantik */
.cta-inner-card {
    position: relative;
    /* Gradient Coklat Susu / Latte */
    background: linear-gradient(135deg, #dcbfa1 0%, #b59066 100%); 
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
    /* Shadow lembut kecoklatan */
    box-shadow: 0 30px 60px rgba(181, 144, 102, 0.3); 
    color: #fff; /* Teks Putih agar kontras di background Latte */
    z-index: 1;
}

/* Dekorasi Glow (Diubah jadi Putih & Orange soft) */
.cta-glow-1, .cta-glow-2 {
    position: absolute;
    border-radius: 50%;
    
    z-index: -1;
}

.cta-glow-1 {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.3); /* White Glow */
    top: -100px;
    left: -100px;
}

.cta-glow-2 {
    width: 250px;
    height: 250px;
    background: rgba(232, 122, 37, 0.4); /* Orange Glow */
    bottom: -50px;
    right: -50px;
}

/* Typography CTA */
.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.cta-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* Tombol CTA (Putih Bersih) */
.btn-cta-white {
    background-color: #fff;
    color: #8b6b4e; /* Teks warna Coklat Latte */
    padding: 18px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.btn-cta-white:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    background-color: #fdfbf9;
    color: var(--btn-color);
}

/* =========================================
   FOOTER SECTION (LATTE / CREAM THEME)
   ========================================= */

/* 1. CONTAINER UTAMA */
.site-footer {
    background-color: #f4ece4; /* Background Cream/Latte */
    color: #3e2b22;            /* Teks Coklat Tua (Agar kontras) */
    padding: 80px 0 30px;
    font-size: 0.95rem;
    position: relative;
    z-index: 50;
    border-top: 1px solid #e0d0c0; 
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 50px;
    margin-bottom: 50px;
}

/* 2. TYPOGRAPHY & LOGO */
.footer-logo { margin-bottom: 20px; }
.footer-logo img { margin-bottom: 20px; max-width:120px;}

/* Fallback Logo Teks */
.site-title-text a {
    font-family: var(--font-heading, serif);
    font-size: 2rem; color: #3e2b22; text-decoration: none; font-weight: 700;
}

.footer-desc {
    line-height: 1.6; color: #5d4d41; margin-bottom: 25px;
}

/* Judul Kolom */
.footer-col h4 {
    font-family: var(--font-heading, serif);
    font-size: 1.3rem; color: #3e2b22; 
    margin-bottom: 25px; font-weight: 600;
    position: relative; display: inline-block;
}
.footer-col h4::after {
    content: ''; position: absolute; left: 0; bottom: -8px;
    width: 30px; height: 2px; background-color: var(--btn-color, #e87a25);
}


/* =========================================
   3. CONTACT LIST (KHUSUS FOOTER)
   ========================================= */
/* Kita kunci dengan ".site-footer" agar tidak bentrok dengan Page Contact */

.site-footer .contact-list {
    display: flex; flex-direction: column; gap: 20px;
}

.site-footer .contact-item {
    display: flex; align-items: center; gap: 15px;
    transition: transform 0.3s ease;
}
.site-footer .contact-item:hover { transform: translateX(5px); }

/* ICON BOX (Style untuk Background Cream) */
.site-footer .contact-item .icon-box {
    width: 45px; height: 45px; flex-shrink: 0;
    /* Warna latar icon agak gelap dikit dari background footer */
    background: #fff; 
    border: 0px solid #dcbfa1;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--btn-color, #e87a25); /* Ikon Orange */
    font-size: 1.1rem;
}

/* TEXT BOX */
.site-footer .text-box {
    display: flex; flex-direction: column; line-height: 1.3;
}

/* Label Kecil (Atas) */
.site-footer .contact-label {
    font-size: 0.6rem; 
    color: #8b7362; /* Coklat Muda */
    text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
    margin-bottom: 2px;
}

/* Value Utama (Bawah) */
.site-footer .contact-value {
    font-size: 1rem; font-weight: 500;
    color: #8b7362; /* Coklat Tua (PENTING: Jangan Putih) */
    text-decoration: none; transition: 0.3s;
}
.site-footer .contact-value:hover { color: var(--btn-color, #8b7362); }

/* Khusus Alamat */
.site-footer .contact-value.address-text {
    font-size: 0.95rem; font-weight: 500; color: #8b7362;
}


/* =========================================
   4. MENU & SOCIAL
   ========================================= */

/* Link Jelajahi */
ul.footer-menu-list { list-style: none; padding: 0; margin: 0; }
ul.footer-menu-list li { margin-bottom: 12px; }
ul.footer-menu-list li a {
    color: #5d4d41; text-decoration: none; transition: 0.3s; font-weight: 500;
    display: inline-flex; align-items: center;
}
ul.footer-menu-list li a:hover {
    color: var(--btn-color, #e87a25); transform: translateX(5px);
}

/* Social Icons */
.footer-social { display: flex; gap: 15px; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: #e6dace; color: #3e2b22;
    border-radius: 50%; transition: all 0.3s ease; font-size: 1.1rem; text-decoration: none;
}
.footer-social a:hover {
    background: var(--btn-color, #e87a25); color: #fff; transform: translateY(-3px);
}


/* =========================================
   5. BOTTOM BAR & RESPONSIVE
   ========================================= */
.footer-bottom {
    border-top: 1px solid #dcbfa1;
    padding-top: 25px; margin-top: 50px;
    text-align: center; font-size: 0.9rem; color: #8b7362;
}

@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Responsive CTA */
@media (max-width: 768px) {
    .cta-inner-card { padding: 60px 20px; }
    .cta-content h2 { font-size: 2.2rem; }
    .btn-cta-white { width: 100%; justify-content: center; }
    
    
}

/* =========================================
   9. CONTACT MAP & FORM SECTION (V44 - SIMPLE FLAT)
   ========================================= */
.contact-map-section {
    padding: 80px 0;
    background: #fff;
}

.contact-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* REVISI: Hapus Shadow & Radius (Kolom Biasa) */
    box-shadow: none;
    border-radius: 0;
    /* Tambahkan border tipis agar rapi */
    
    gap: 60px;
}

.map-wrapper {
    width: 100%;
    height: 100%;
    min-height: 250px;
    
    /* Tambahan Shadow & Radius */
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Bayangan halus */
    overflow: hidden; /* Agar peta di dalam ikut melengkung */
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Menghilangkan gap bawah iframe */
    filter: grayscale(10%) contrast(1.05); /* Filter ringan */
}

/* --- KOLOM KANAN: FORM PEMESANAN --- */
.booking-form-wrapper {
   
    padding: 0px 0px; /* Padding disesuaikan */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-header h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #3e2b22;
    margin-bottom: 10px;
}

.form-header p {
    color: #8b7362;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Styling Input Form */
.form-group {
    margin-bottom: 15px; /* Jarak antar input dirapatkan sedikit */
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5d4d41;
    margin-bottom: 5px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0d4c8;
    background: #fff;
    border-radius: 6px; /* Radius kecil standard */
    font-size: 0.95rem;
    color: #333;
    transition: 0.3s;
    font-family: var(--font-body);
}

.form-input:focus {
    outline: none;
    border-color: var(--btn-color);
}

textarea.form-input {
    resize: none;
    height: 100px; /* Tinggi textarea disesuaikan */
}

/* Tombol Kirim WA */
.btn-submit-wa {
    width: 100%;
    background-color: var(--btn-color);
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-submit-wa:hover {
    background-color: #3e2b22;
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .contact-map-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
    }
    .map-wrapper {
        min-height: 300px; /* Di HP map lebih pendek lagi */
        order: 1; /* Map di atas */
    }
    .booking-form-wrapper {
        padding: 40px 20px;
        order: 2; /* Form di bawah */
    }
}

/* =========================================
   7. RESPONSIVE MOBILE FIX
   ========================================= */
@media (max-width: 992px) {
    .hero-title { font-size: 3.5rem; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 60px; }
    .hero-visual { order: 2; margin-bottom: 50px; }
    .hero-content { order: 1; }
    .hero-actions { justify-content: center; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .about-dual-wrapper img { height: 280px; }
}

/* --- MOBILE (HP) --- */
@media (max-width: 768px) {
    .about-section { padding: 60px 0; }
    .services-section { padding: 60px 0; }
    .features-section { padding: 60px 0; }
    .portfolio-section { padding: 60px 0; }
    .blog-section { padding: 60px 0; }
    .contact-map-section { padding: 60px 0; }
    .cta-section { padding: 60px 0; }
    
    

    
    .hero-section { 
        padding-top: 110px; 
        min-height: auto; 
        padding-bottom: 40px;
    }
    
    .hero-grid { 
        display: flex; 
        flex-direction: column; 
    }
    
    
    .hero-visual { 
        order: -1; 
        margin-bottom: 0px; 
        height: auto;
    }
    .hero-content { 
        order: 1; 
        text-align: center;
        padding-right: 0px;
    }
    .hero-actions { justify-content: center; }

    
    .layer-top-right { width: 44%; top: 0; right: 0; }
    .layer-btm-left { width: 30%; bottom: 0; left: 0; }
    
   
  
    .about-dual-wrapper { flex-direction: row; justify-content: center; align-items: left; width: 100%; }
    .about-dual-wrapper img {
        height: 240px; 
        width: auto;
    }
    .about-dual-wrapper img:nth-child(2) {
        margin-left: -60px; 
        margin-top: 0;
    }

   
    .about-grid, .footer-grid, .blog-grid { grid-template-columns: 1fr; gap: 40px; }
    
}

/* ==========================================================================
   2. HERO SECTION (RAPI & PROPORSIONAL)
   ========================================================================== */

.single-hero-section {
    position: relative;
    height: 450px; /* Tinggi fix biar rapi */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-color: #333;
    overflow: hidden;
    margin-top: 0; 
}

/* Background Image Zoom Effect */
.single-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(0.8); /* Gelapkan gambar dikit biar teks pop-up */
}

.single-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
    z-index: 1;
}

.single-hero-content {
    position: relative; z-index: 2;
    max-width: 900px;
    padding: 0 20px;
    margin-top: 120px; /* Offset dikit ke atas */
}

/* Badge Kategori */
.post-cat-badge a {
    display: inline-block;
    background: var(--btn-color); color: #fff;
    padding: 6px 20px; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; margin-bottom: 20px;
    transition: 0.3s;
}
.post-cat-badge a:hover { background: #fff; color: var(--btn-color); }

/* Judul Utama */
.entry-title {
    font-size: 3.2rem; line-height: 1.2; margin-bottom: 25px;
    font-family: var(--font-heading); color: #fff;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Meta Info */
.post-meta {
    display: flex; justify-content: center; align-items: center; gap: 20px;
    font-size: 1rem; color: rgba(255,255,255,0.9); flex-wrap: wrap;
}
.meta-author img {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
    margin-right: 8px; vertical-align: middle;
}
.post-meta i { margin-right: 5px; color: var(--btn-color); }


/* ==========================================================================
   3. LAYOUT GRID & OVERLAP
   ========================================================================== */

.single-overlap-container {
    position: relative; z-index: 10;
    margin-top: -100px; /* Overlap effect */
    margin-bottom: 80px;
}

.single-grid-layout {
    display: grid;
    grid-template-columns: 70% 28%; /* Proporsi ideal Artikel vs Sidebar */
    gap: 2%;
    align-items: start;
}


/* ==========================================================================
   4. KONTEN ARTIKEL (TYPOGRAPHY)
   ========================================================================== */

.single-main-content article {
    background: #fff;
    padding: 60px 50px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Shadow lembut */
}

.entry-content {
    font-size: 1.15rem; /* Font enak dibaca */
    line-height: 1.8;
    color: #4a4a4a;
    font-family: var(--font-body);
}

.entry-content h2 {
    font-size: 2rem; margin-top: 50px; margin-bottom: 25px;
    color: #222; font-family: var(--font-heading);
    position: relative; padding-bottom: 10px;
}
.entry-content h2::after { /* Garis bawah judul seksi */
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 60px; height: 3px; background: var(--btn-color);
}

.entry-content h3 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 20px; color: #333; }
.entry-content p { margin-bottom: 25px; }
.entry-content ul, .entry-content ol { margin-bottom: 25px; padding-left: 20px; }
.entry-content li { margin-bottom: 10px; }
.entry-content img {
    max-width: 100%; height: auto; border-radius: 10px;
    margin: 30px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.entry-content blockquote {
    background: #fff9f4; border-left: 5px solid var(--btn-color);
    padding: 20px 30px; margin: 30px 0;
    font-style: italic; color: #555; font-size: 1.2rem; border-radius: 0 10px 10px 0;
}

/* =========================================
   SINGLE POST WHATSAPP CTA
   ========================================= */
.single-wa-cta {
    margin: 40px 0;
    padding: 30px;
    background: #fdfbf9; /* Background cerah */
    border: 1px solid #e0d4c8; /* Border warna latte tipis */
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.single-wa-cta:hover {
    transform: translateY(-3px);
    border-color: var(--btn-color);
}

/* Icon Besar Kiri */
.wa-cta-icon {
    width: 60px;
    height: 60px;
    background: #25D366; /* Hijau WA */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

/* Teks Tengah */
.wa-cta-text {
    flex-grow: 1; /* Isi ruang kosong */
}

.wa-cta-text h4 {
    margin: 0 0 5px;
    font-family: var(--font-heading);
    color: #3e2b22;
    font-size: 1.2rem;
}

.wa-cta-text p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
}

/* Tombol Kanan */
.btn-wa-chat {
    background: #3e2b22;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    white-space: nowrap; /* Teks tidak turun baris */
}

.btn-wa-chat:hover {
    background: #25D366;
    color: #fff;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* Responsive Mobile (Tumpuk ke bawah) */
@media (max-width: 768px) {
    .single-wa-cta {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    
    .wa-cta-text h4 { font-size: 1.1rem; }
    .btn-wa-chat { width: 100%; text-align: center; }
}

/* ==========================================================================
   5. FOOTER ARTIKEL (TAGS & AUTHOR)
   ========================================================================== */

.entry-footer {
    border-top: 1px solid #eee;
    padding-top: 30px; margin-top: 50px;
}

/* Tags Styling (Tombol Pill) */
.post-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.post-tags i { color: #999; margin-right: 5px; }
.post-tags a {
    background: #f5f5f5; color: #666;
    padding: 8px 18px; border-radius: 30px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: 0.3s;
}
.post-tags a:hover {
    background: var(--btn-color); color: #fff;
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(232, 122, 37, 0.2);
}

/* Author Box */
.author-box {
    display: flex; align-items: center; gap: 20px;
    padding: 30px; background: #fdfbf9;
    border-radius: 12px; margin-top: 40px; border: 1px solid #f0e6dd;
}
.author-avatar img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.author-info h4 { margin: 0 0 5px; font-size: 1.1rem; font-family: var(--font-heading); color: #3e2b22; }
.author-info p { margin: 0; font-size: 0.9rem; color: #777; }


/* ==========================================================================
   6. RELATED POSTS (REVISI - AGAR MUNCUL JELAS)
   ========================================================================== */

.related-posts-section {
    margin-top: 60px; /* Jarak dari Author Box */
    padding-top: 40px;
    border-top: 2px dashed #eee; /* Garis pemisah putus-putus */
}

.section-heading {
    font-size: 1.5rem; font-family: var(--font-heading);
    margin-bottom: 25px; color: #222;
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom */
    gap: 25px;
}

.related-card {
    display: flex; /* Layout Kiri Gambar - Kanan Teks */
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 12px;
    transition: 0.3s ease;
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: var(--btn-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.related-thumb {
    flex-shrink: 0; width: 90px; height: 90px; /* Ukuran gambar fix */
    overflow: hidden; border-radius: 8px;
}
.related-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}
.related-card:hover .related-thumb img { transform: scale(1.1); }

.related-text h4 {
    font-size: 1rem; line-height: 1.4; margin: 0 0 8px;
    font-family: var(--font-heading);
}
.related-text h4 a { text-decoration: none; color: #333; transition: 0.3s; }
.related-text h4 a:hover { color: var(--btn-color); }
.related-text span { font-size: 0.8rem; color: #999; display: block; }


/* ==========================================================================
   7. COMMENTS SECTION (RAPIG)
   ========================================================================== */

.comments-area {
    margin-top: 50px;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.comments-title {
    font-size: 1.6rem; font-family: var(--font-heading);
    margin-bottom: 30px; border-bottom: 2px solid #eee; padding-bottom: 15px;
}

.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-body {
    position: relative; padding-left: 80px; margin-bottom: 30px;
    border-bottom: 1px solid #f5f5f5; padding-bottom: 30px;
}
.comment-author .avatar {
    position: absolute; left: 0; top: 0; width: 60px; height: 60px;
    border-radius: 50%; object-fit: cover;
}
.fn { font-size: 1.1rem; font-weight: 700; color: #222; margin-right: 10px; font-style: normal; }
.comment-metadata { display: block; font-size: 0.85rem; color: #aaa; margin-top: 5px; margin-bottom: 15px; }
.comment-metadata a { text-decoration: none; color: inherit; }
.comment-content p { font-size: 1rem; color: #555; }

.reply a {
    display: inline-block; padding: 5px 15px; margin-top: 10px;
    border: 1px solid #eee; background: #f9f9f9; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; color: #555; text-decoration: none;
}
.reply a:hover { background: var(--btn-color); color: #fff; border-color: var(--btn-color); }

/* Form Komentar */
.comment-respond { margin-top: 40px; }
.comment-reply-title { font-size: 1.3rem; margin-bottom: 20px; display: block; font-family: var(--font-heading); }
.comment-form p { margin-bottom: 15px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: var(--font-body);
}
.form-submit .submit {
    background: var(--btn-color); color: #fff; border: none; padding: 12px 30px;
    border-radius: 50px; cursor: pointer; font-weight: 700; transition: 0.3s;
}
.form-submit .submit:hover { background: #3e2b22; transform: translateY(-3px); }


/* ==========================================================================
   8. SIDEBAR & STICKY
   ========================================================================== */

.single-sidebar { padding-top: 0; height: 100%; }

.sidebar-widget {
    background: #fff; padding: 30px; border-radius: 12px; margin-bottom: 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06); border: 1px solid #f0f0f0;
}

.widget-title {
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 25px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px;
    color: #3e2b22; position: relative;
}
.widget-title::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; background: var(--btn-color);
}

/* STICKY WRAPPER (Wajib) */
.sticky-sidebar-wrapper {
    position: -webkit-sticky; position: sticky;
    top: 30px; z-index: 2;
}

/* Daftar Isi & Recent Post Styles */
#auto-toc-container ul, .recent-posts-list { list-style: none; padding: 0; margin: 0; }
#auto-toc-container a {
    display: block; padding: 8px 0 8px 15px; text-decoration: none; color: #666;
    font-size: 0.75rem; border-left: 2px solid #eee; transition: 0.2s;
}
#auto-toc-container a:hover, #auto-toc-container a.active {
    color: var(--btn-color); border-left-color: var(--btn-color); font-weight: 600; background: #fff9f4;
}
.recent-posts-list li { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
.recent-thumb img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.recent-info a { font-weight: 700; color: #333; text-decoration: none; display: block; font-size: 0.95rem; line-height: 1.3; }
.recent-info small { color: #999; font-size: 0.8rem; }


/* ==========================================================================
   9. RESPONSIVE MOBILE (BIAR GAK HANCUR)
   ========================================================================== */

@media (max-width: 992px) {
    /* Tablet: Sidebar Turun */
    .single-grid-layout { grid-template-columns: 1fr; gap: 40px; }
    .single-overlap-container { margin-top: -60px; }
    .single-main-content article { padding: 40px 30px; }
    .sticky-sidebar-wrapper { position: static; }
}

@media (max-width: 768px) {
    /* Mobile */
    .single-hero-section { height: 350px; }
    .entry-title { font-size: 2rem; }
    .single-overlap-container { margin-top: -40px; }
    .single-main-content article { padding: 30px 20px; }
    
    /* Related Post jadi 1 kolom di HP */
    .related-grid { grid-template-columns: 1fr; }
    
    /* Komentar Responsive */
    .comment-body { padding-left: 0; }
    .comment-author .avatar { position: relative; margin-bottom: 15px; width: 50px; height: 50px; }
}

/* =========================================
   PAGE TEMPLATE STYLE (GRADIENT LATTE)
   ========================================= */

/* 1. HERO SECTION (GRADIENT) */
.page-hero-section {
    position: relative;
    /* Tinggi kita kurangi sedikit karena tidak ada gambar pemandangan */
    height: 350px; 
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* --- THE GRADIENT LATTE --- */
    /* Gradasi dari Coklat Latte ke Cream Terang */
    background: linear-gradient(135deg, #d8c3b1 0%, #f4ece4 100%);
    
    margin-top: 0;
    padding-bottom: 60px;
}

/* Container Konten Hero */
.page-hero-content {
    position: relative; 
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    margin-top: 120px;
}

/* Judul Halaman (Warna DARK BROWN agar kontras dengan background Latte) */
.page-title {
    font-size: 3rem; 
    font-family: var(--font-heading);
    color: #3e2b22; /* Coklat Tua */
    margin-bottom: 10px;
    /* Text Shadow dihapus biar bersih/flat modern */
    text-shadow: none; 
}

/* Breadcrumb Styling (Dark Version) */
.page-breadcrumb p {
    color: #666; /* Abu-abu tua */
    font-size: 0.9rem; margin: 0;
}
.page-breadcrumb a {
    color: #3e2b22; /* Coklat Tua */
    font-weight: 600; text-decoration: none;
    transition: 0.3s;
}
.page-breadcrumb a:hover { color: var(--btn-color); }


/* 2. OVERLAP WRAPPER */
.page-overlap-wrapper {
    position: relative; z-index: 10;
    margin-top: -80px; /* Efek Naik ke Atas */
    margin-bottom: 80px;
    display: flex; 
    justify-content: center;
}


/* 3. MAIN CARD (KOTAK PUTIH) */
.page-main-card {
    background: #fff;
    width: 100%;
    max-width: 1000px; 
    padding: 60px 80px; 
    border-radius: 16px;
    /* Shadow dipertebal sedikit agar batas antara Card Putih & BG Latte terlihat jelas */
    box-shadow: 0 20px 50px rgba(62, 43, 34, 0.08); 
    border: 1px solid rgba(255,255,255,0.5);
}

/* Typography Page */
.page-main-card .entry-content {
    font-size: 1.1rem; line-height: 1.8; color: #4a4a4a;
}
.page-main-card h2 { font-family: var(--font-heading); font-size: 2rem; color: #222; margin-top: 40px; margin-bottom: 20px; }
.page-main-card h3 { font-family: var(--font-heading); font-size: 1.5rem; color: #333; margin-top: 30px; margin-bottom: 15px; }
.page-main-card p { margin-bottom: 20px; }
.page-main-card ul { margin-bottom: 20px; padding-left: 20px; }
.page-main-card li { margin-bottom: 10px; }


/* 4. COMMENTS */
.page-comments-area {
    margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee;
}
.comments-title-small { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; }


/* =========================================
   RESPONSIVE PAGE
   ========================================= */
@media (max-width: 768px) {
    .page-hero-section { height: 280px; }
    .page-title { font-size: 2.2rem; }
    
    .page-overlap-wrapper { margin-top: -50px; }
    
    .page-main-card {
        padding: 40px 25px; 
    }
}

/* =========================================
   PAGE CONTACT STYLE (REVISI FINAL)
   ========================================= */

/* 1. HERO SECTION */
.contact-hero {
    position: relative;
    height: 350px; 
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding-top: 60px; /* Visual Middle */
    background: linear-gradient(135deg, #d8c3b1 0%, #f4ece4 100%);
    margin-top: 0;
}
.contact-hero .page-hero-content { margin-top: 0 !important; text-align: center; width: 100%; }


/* 2. OVERLAP WRAPPER (PENTING: Agar Kartu Naik) */
.page-overlap-wrapper {
    position: relative; z-index: 10;
    margin-top: -80px; /* Efek Naik ke Atas menutupi Hero */
    margin-bottom: 80px;
    display: flex; justify-content: center;
}


/* 3. CARD WRAPPER */
.contact-card {
    background: #fff;
    width: 100%; max-width: 100%; /* Full Container */
    padding: 60px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(62, 43, 34, 0.08); 
    border: 1px solid rgba(255,255,255,0.5);
}


/* 4. GRID LAYOUT */
.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr; /* Kiri Kecil, Kanan Besar */
    gap: 80px; 
    align-items: start; /* PENTING: Agar kolom pendek tidak tertarik panjang */
}


/* --- KOLOM KIRI (INFO) --- */
.contact-heading {
    font-family: var(--font-heading);
    font-size: 1.8rem; margin-bottom: 20px; color: #3e2b22;
    position: relative; padding-bottom: 15px;
}
.contact-heading::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--btn-color);
}
.contact-desc { color: #666; margin-bottom: 30px; line-height: 1.6; }

.contact-details { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; }

/* Item Contact (Default Page Style) */
.contact-item { display: flex; gap: 20px; align-items: flex-start; transition: transform 0.3s ease; }
.contact-item:hover { transform: translateX(5px); }

.contact-item .icon-box {
    width: 50px; height: 50px; flex-shrink: 0;
    background: #fff; border: 1px solid #eee;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--btn-color); font-size: 1.2rem; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.contact-item:hover .icon-box { background: var(--btn-color); color: #fff; }

.contact-item .text-box h4 { font-size: 1.1rem; font-weight: 700; margin: 0 0 5px; color: #3e2b22; }
.contact-item .text-box p { font-size: 0.95rem; margin: 0; color: #666; }
.contact-item .text-box a { text-decoration: none; color: #816e64; transition: 0.3s; }
.contact-item .text-box a:hover { color: var(--btn-color); }

.contact-map iframe { 
    border-radius: 12px; border: 1px solid #eee; 
    width: 100%; /* Pastikan map full width */
    display: block;
}


/* --- KOLOM KANAN (FORM) --- */
.contact-form-col {
    background: #fdfbf9; padding: 50px;
    border-radius: 16px; border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: #444; font-size: 0.9rem; }

/* REVISI: Tambahkan 'select' agar dropdown juga kena style */
.form-group input, 
.form-group textarea,
.form-group select { 
    width: 100%; padding: 15px;
    border: 1px solid #ddd; border-radius: 8px; background: #fff;
    font-family: var(--font-body); transition: 0.3s;
    font-size: 1rem; color: #555;
}

/* Fix untuk panah dropdown di beberapa browser */
.form-group select {
    appearance: none; /* Hapus style bawaan browser */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    cursor: pointer;
}

.form-group input:focus, 
.form-group textarea:focus,
.form-group select:focus {
    border-color: #25D366; outline: none; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.1);
}

.btn-wa-submit {
    background: #25D366; color: #fff; border: none;
    padding: 15px 40px; border-radius: 50px; width: 100%;
    font-weight: 700; cursor: pointer; transition: 0.3s; 
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 1rem; margin-top: 10px;
}
.btn-wa-submit:hover { background: #128C7E; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2); }


/* --- RESPONSIVE HP --- */
@media (max-width: 992px) {
    .page-overlap-wrapper { margin-top: -50px; } /* Naik dikit aja di HP */
    .contact-grid { grid-template-columns: 1fr; gap: 50px; }
    .contact-card { padding: 30px 20px; }
    .contact-form-col { padding: 25px; }
    .contact-hero { height: 280px; padding-top: 40px; }
}

/* =========================================
   PAGE GALLERY STYLE (DATABASE OPTION)
   ========================================= */

/* 1. HERO (Sama dengan Contact) */
.gallery-hero {
    position: relative;
    height: 350px; 
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding-top: 60px; /* Middle Visual */
    background: linear-gradient(135deg, #d8c3b1 0%, #f4ece4 100%);
    margin-top: 0;
}
.gallery-hero .page-hero-content { margin-top: 0 !important; text-align: center; }

/* 2. CARD WRAPPER */
.gallery-card {
    background: #fff; width: 100%; max-width: 100%;
    padding: 60px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(62, 43, 34, 0.08); 
    border: 1px solid rgba(255,255,255,0.5);
    min-height: 500px;
}

/* 3. FILTER BUTTONS */
.portfolio-filter {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.filter-btn {
    background: transparent; border: 2px solid #eee;
    padding: 8px 25px; border-radius: 50px;
    font-size: 0.9rem; font-weight: 700; color: #555; cursor: pointer;
    transition: 0.3s;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--btn-color); border-color: var(--btn-color); color: #fff;
    box-shadow: 0 5px 15px rgba(232, 122, 37, 0.2);
}

/* 4. GRID LAYOUT */
.portfolio-grid {
    display: grid;
    /* Grid 3 Kolom Rapi */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}

/* 5. ITEM CARD */
.portfolio-item {
    position: relative;
    border-radius: 12px; overflow: hidden;
    /* Rasio Gambar Kotak/Landscape */
    aspect-ratio: 4/3; 
    background: #000;
    transition: opacity 0.3s ease;
}

.portfolio-wrap { width: 100%; height: 100%; position: relative; }

.portfolio-img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.5s;
}

/* Video BG Support */
.portfolio-video-bg {
    width: 100%; height: 100%; object-fit: cover;
}

.portfolio-item:hover .portfolio-img { transform: scale(1.1); }

/* Play Icon Overlay */
.permanent-play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px; background: rgba(0,0,0,0.6);
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 5; pointer-events: none;
}

/* Hover Overlay Text */
.portfolio-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.overlay-content h3 {
    color: #fff; font-size: 1.2rem; margin: 0;
    transform: translateY(20px); transition: 0.3s;
}
.portfolio-item:hover .overlay-content h3 { transform: translateY(0); }

.portfolio-overlay .view-project {
    color: #fff; font-size: 1.2rem; margin: 0;
    transform: translateY(20px); transition: 0.3s;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-card { padding: 30px 20px; }
}
@media (max-width: 600px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .gallery-hero { height: 280px; padding-top: 40px; }
}

/* =========================================
   ARCHIVE & BLOG PAGE STYLE
   ========================================= */

/* 1. HERO (Reuse Style Contact/Gallery) */
.blog-hero {
    position: relative;
    height: 350px; 
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding-top: 60px; /* Middle Visual */
    background: linear-gradient(135deg, #d8c3b1 0%, #f4ece4 100%);
    margin-top: 0;
}
.blog-hero .page-hero-content { margin-top: 0 !important; text-align: center; }
.archive-description { color: #666; margin-top: 10px; max-width: 600px; margin-left: auto; margin-right: auto; }


/* 2. LAYOUT GRID UTAMA (Kiri Artikel - Kanan Sidebar) */
.blog-layout-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr; /* Kiri lebih lebar */
    gap: 40px;
    align-items: start;
}


/* 3. BLOG CARDS GRID (Grid di dalam Kolom Kiri) */
.blog-cards-grid {
    display: grid;
    /* Ubah jadi 1fr 1fr jika ingin 2 kolom per baris */
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
}

/* --- DESIGN KARTU BLOG --- */
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: 0.3s;
    display: flex; flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(62, 43, 34, 0.1);
}

/* Thumbnail Area */
.blog-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10; /* Rasio gambar */
    overflow: hidden;
}

.blog-card-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.1); }

/* Badge Kategori Melayang */
.blog-cat-badge {
    position: absolute; top: 15px; left: 15px;
    background: #fff; color: var(--btn-color);
    padding: 5px 12px; border-radius: 50px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Body Kartu */
.blog-card-body {
    padding: 25px;
    display: flex; flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    font-size: 0.8rem; color: #999;
    margin-bottom: 10px; display: flex; gap: 15px;
}
.blog-meta i { margin-right: 5px; color: var(--btn-color); }

.blog-title {
    font-size: 1.25rem; font-family: var(--font-heading);
    margin: 0 0 15px; line-height: 1.4;
}
.blog-title a { text-decoration: none; color: #333; transition: 0.3s; }
.blog-title a:hover { color: var(--btn-color); }

.blog-excerpt {
    font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 20px;
    flex-grow: 1; /* Dorong tombol ke bawah rata */
}

/* Tombol Baca */
.read-more-link {
    font-size: 0.9rem; font-weight: 700; color: var(--btn-color);
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    transition: 0.3s;
}
.read-more-link i { transition: 0.3s; }
.read-more-link:hover i { transform: translateX(5px); }


/* =========================================
   FIX PAGINATION (AGAR TIDAK NUMPUK)
   ========================================= */

/* 1. Container Utama */
.blog-pagination {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    width: 100%;
    grid-column: 1 / -1; /* Safety jika pakai grid */
    text-align: center;
}

/* 2. Wrapper Tombol (KUNCI AGAR TIDAK NUMPUK) */
.blog-pagination .nav-links {
    display: flex;           /* Pakai Flexbox */
    justify-content: center; /* Tengah Horizontal */
    align-items: center;     /* Tengah Vertikal */
    flex-wrap: wrap;         /* Biarkan turun baris kalau layar sempit */
    gap: 15px;               /* JARAK AMAN ANTAR LINGKARAN (Wajib ada) */
}

/* 3. Bentuk Lingkaran Angka */
.blog-pagination .page-numbers {
    /* Ukuran Tetap (Agar Bulat) */
    width: 45px;
    height: 45px;
    
    /* Teknik Tengah Sempurna */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Dekorasi */
    background: #fff;
    border: 1px solid #e0d4c8;
    border-radius: 50%; /* Bulat */
    color: #5d4d41;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    
    /* Reset Style Bawaan yang bikin kacau */
    line-height: 1; 
    padding: 0;
    margin: 0;
    
    /* Agar lingkaran tidak gepeng/penyok */
    flex-shrink: 0; 
    transition: 0.3s;
}

/* 4. State Aktif & Hover */
.blog-pagination .page-numbers.current {
    background: var(--btn-color, #e87a25);
    color: #fff;
    border-color: var(--btn-color, #e87a25);

}


.blog-pagination .page-numbers:hover {
    background: var(--btn-color, #e87a25);
    color: #fff;
    border-color: var(--btn-color, #e87a25);
    transform: translateY(-3px); /* Efek naik dikit */
}

/* 5. Khusus Tombol "Next" & "Prev" (Lonjong) */
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    width: auto;       /* Lebar otomatis mengikuti teks */
    padding: 0 20px;   /* Beri napas kanan kiri */
    border-radius: 50px; /* Lonjong */
    aspect-ratio: auto;  /* Matikan rasio kotak */
}

/* 6. Mobile Fix */
@media (max-width: 768px) {
    .blog-pagination .nav-links {
        gap: 10px; /* Jarak dirapatkan dikit di HP */
    }
    .blog-pagination .page-numbers {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}


/* 5. SIDEBAR WIDGETS TAMBAHAN */
.search-form { display: flex; position: relative; }
.search-field {
    width: 100%; padding: 12px 15px; padding-right: 40px;
    border: 1px solid #ddd; border-radius: 50px; font-family: var(--font-body);
}
.search-submit {
    position: absolute; right: 5px; top: 5px;
    background: var(--btn-color); color: #fff; border: none;
    width: 35px; height: 35px; border-radius: 50%; cursor: pointer;
}

.category-list, .tagcloud-wrap { list-style: none; padding: 0; }
.category-list li {
    padding: 8px 0; border-bottom: 1px dashed #eee;
    display: flex; justify-content: space-between; color: #666;
}
.category-list li a { text-decoration: none; color: #333; font-weight: 600; }
.category-list li a:hover { color: var(--btn-color); }

.tagcloud-wrap a {
    display: inline-block; background: #f5f5f5; color: #666;
    padding: 5px 12px; border-radius: 4px; font-size: 0.8rem !important;
    margin: 0 5px 5px 0; text-decoration: none; transition: 0.3s;
}
.tagcloud-wrap a:hover { background: var(--btn-color); color: #fff; }


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blog-layout-grid { grid-template-columns: 1fr; } /* Sidebar turun ke bawah */
    .blog-cards-grid { grid-template-columns: 1fr 1fr; } /* Tablet tetap 2 kolom */
}
@media (max-width: 600px) {
    .blog-cards-grid { grid-template-columns: 1fr; } /* HP 1 kolom list */
    .blog-card-thumb { aspect-ratio: 16/9; }
}

/* =========================================
   PAGE PROFILE STYLE (2 COLUMN STICKY)
   ========================================= */

/* 1. HERO (Reuse Style) */
.profile-hero {
    position: relative;
    height: 350px; 
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding-top: 60px; /* Middle Visual */
    background: linear-gradient(135deg, #d8c3b1 0%, #f4ece4 100%);
    margin-top: 0;
}
.profile-hero .page-hero-content { margin-top: 0 !important; text-align: center; }

/* 2. LAYOUT GRID */
.profile-grid-layout {
    display: grid;
    /* Kiri (Sidebar) 350px, Kanan (Konten) Sisa Ruang */
    grid-template-columns: 350px 1fr; 
    gap: 40px;
    align-items: start; /* Penting untuk Sticky */
}


/* --- KOLOM KIRI (PROFILE CARD) --- */
.profile-sidebar {
    /* STICKY EFFECT */
    position: sticky;
    top: 30px; /* Jarak dari atas saat scroll */
    z-index: 5;
}

.profile-card-wrapper {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(62, 43, 34, 0.08);
    border: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 30px;
}

.profile-image {
    width: 100%; height: 350px; /* Tinggi Foto */
    overflow: hidden;
    position: relative;
}
.profile-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.profile-card-wrapper:hover .profile-image img { transform: scale(1.05); }

.profile-info { padding: 30px 25px 0; }

.profile-name { font-family: var(--font-heading); font-size: 1.5rem; margin: 0; color: #3e2b22; }
.profile-role { color: var(--btn-color); font-weight: 600; font-size: 0.9rem; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }

.profile-socials {
    margin: 20px 0; display: flex; justify-content: center; gap: 15px;
}
.profile-socials a {
    width: 35px; height: 35px; border-radius: 50%;
    background: #f5f5f5; color: #555;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: 0.3s;
}
.profile-socials a:hover { background: var(--btn-color); color: #fff; transform: translateY(-3px); }

.btn-profile-contact {
    display: block; width: 100%; padding: 12px;
    background: #3e2b22; color: #fff; text-decoration: none;
    border-radius: 50px; font-weight: 700; transition: 0.3s;
	text-align: center;
}
.btn-profile-contact:hover { background: var(--btn-color); }

.profile-stats {
    margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee;
    display: flex; justify-content: space-around; text-align: center;
}
.stat-item strong { display: block; font-size: 1.2rem; color: #333; }
.stat-item span { font-size: 0.8rem; color: #999; }


/* --- KOLOM KANAN (CONTENT) --- */
.profile-content {
    display: flex; flex-direction: column; gap: 30px;
}

.profile-section-card {
    background: #fff; padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
}

.section-heading {
    font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 25px; color: #3e2b22;
    position: relative; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0;
}
.section-heading::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: var(--btn-color);
}

/* Typography Content */
.entry-content { font-size: 1.05rem; line-height: 1.8; color: #555; }
.entry-content p { margin-bottom: 20px; }


/* VISI MISI GRID */
.vision-mission-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 25px;
}
.vm-card {
    background: #fff; padding: 30px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f9f9f9; text-align: center;
    transition: 0.3s;
}
.vm-card:hover { transform: translateY(-5px); border-color: var(--btn-color); }

.vm-icon {
    width: 60px; height: 60px; background: #fff9f4; color: var(--btn-color);
    border-radius: 50%; font-size: 1.5rem; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
}
.vm-card h4 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 10px; }
.vm-card p { font-size: 0.95rem; color: #666; line-height: 1.6; }


/* VALUES LIST */
.values-list { list-style: none; padding: 0; margin: 0; }
.values-list li {
    display: flex; gap: 20px; margin-bottom: 25px; align-items: flex-start;
}
.values-list li i {
    font-size: 1.5rem; color: var(--btn-color); margin-top: 5px;
}
.values-list strong { display: block; font-size: 1.1rem; color: #333; margin-bottom: 5px; }
.values-list p { margin: 0; font-size: 0.95rem; color: #666; }


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .profile-grid-layout { grid-template-columns: 1fr; } /* Stack jadi 1 kolom */
    .profile-sidebar { position: static; max-width: 400px; margin: 0 auto; } /* Sidebar jadi di atas */
    .profile-image { height: 300px; }
    .vision-mission-grid { grid-template-columns: 1fr; }
}

/* =========================================
   MOBILE FILTER SCROLL (SWIPEABLE)
   ========================================= */
@media (max-width: 992px) {
    .portfolio-filter {
        display: flex;
        flex-wrap: nowrap; /* Jangan turun ke bawah */
        overflow-x: auto;  /* Aktifkan scroll samping */
        -webkit-overflow-scrolling: touch; /* Smooth scroll di iOS */
        gap: 10px;
        padding: 10px 5px 20px 5px; /* Padding bawah agar scrollbar tidak nempel */
        
        /* Sembunyikan Scrollbar agar rapi */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        
        /* Pastikan rata kiri */
        justify-content: flex-start !important; 
    }
    
    .portfolio-filter::-webkit-scrollbar { 
        display: none; /* Chrome/Safari */
    }

    .filter-btn {
        flex: 0 0 auto; /* Tombol tidak mengecil */
        white-space: nowrap; /* Teks satu baris */
    }
}

/* =========================================
   CTA SOCIAL MEDIA (ICONS + USERNAME)
   ========================================= */

.cta-social-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Turun ke bawah jika layar sempit */
    gap: 15px;
    margin-top: 20px; /* Jarak dari tombol WA */
    padding-top: 20px;
    border-top: 0px solid rgba(255, 255, 255, 0.2); /* Garis pemisah tipis */
}

/* Style Tombol Lonjong (Pill) */
.cta-soc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Jarak Icon ke Text */
    
    background: rgba(255, 255, 255, 0.15); /* Transparan Putih */
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Efek Blur di belakang */
}

/* Icon Style */
.cta-soc-pill i {
    font-size: 1.1rem;
}

/* Hover Effects */
.cta-soc-pill:hover {
    background: #fff;
    color: var(--btn-color, #e87a25); /* Text jadi Orange tema */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .cta-social-group {
        flex-direction: column; /* Di HP susun ke bawah biar rapi */
        gap: 10px;
        width: 100%;
    }
    
    .cta-soc-pill {
        width: 100%; /* Full Width di HP */
        justify-content: center; /* Teks di tengah */
    }
}