/*
Theme Name: Yamanara Properti App
Theme URI: https://yamanara.com
Author: Yamanara Dev
Description: Tema aplikasi SPA eksklusif, mewah, dan elegan untuk properti. (Support WP 7.0 & PHP 8.3)
Version: 1.0.0
Text Domain: yamanara
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --primary-orange: #FF6600; /* Sesuaikan dengan orange korporat */
    --primary-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --text-dark: #333333;
    --text-gray: #777777;
    --shadow-app: 0 4px 20px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }

/* --- PRELOADER (Background Orange, Frame Lingkaran, Planet Tawaf) --- */
#app-preloader {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background-color: var(--primary-orange);
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 9999; 
    transition: opacity 0.5s ease;
}

.preloader-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Frame Lingkaran untuk Logo */
.preloader-logo-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Membuat frame bulat sempurna */
    object-fit: cover;
    border: 3px solid var(--primary-white); /* Frame warna putih */
    background-color: var(--primary-white);
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Lintasan dan Animasi Putaran (Tawaf) */
.orbit-container {
    position: absolute;
    width: 160px; /* Ukuran lintasan orbit (lebih besar dari logo) */
    height: 160px;
    animation: tawaf 2.5s linear infinite; /* Kecepatan putaran */
    border-radius: 50%;
    /* Uncomment baris di bawah ini jika ingin menampilkan garis lintasan planet */
    /* border: 1px dashed rgba(255, 255, 255, 0.3); */ 
}

/* Desain Planet Putih */
.planet {
    position: absolute;
    top: 0; /* Posisi awal planet di atas */
    left: 50%;
    transform: translateX(-50%);
    width: 18px; /* Ukuran planet */
    height: 18px;
    background-color: var(--primary-white);
    border-radius: 50%; /* Membuat planet bulat */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9); /* Efek cahaya pada planet */
}

/* Animasi Putaran ke Kiri (Berlawanan Arah Jarum Jam) */
@keyframes tawaf { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(-360deg); } 
}

/* --- APP HEADER --- */
header.app-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    background: var(--primary-white); box-shadow: var(--shadow-app);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 15px; z-index: 1000; border-bottom: 2px solid var(--primary-orange);
}
.header-left img { height: 40px; }
.header-right { display: flex; align-items: center; gap: 15px; }
.header-right img { height: 35px; }
.hamburger-btn { font-size: 24px; color: var(--primary-orange); cursor: pointer; background: none; border: none; }

/* --- APP CONTENT AREA (Tidak bergerak saat transisi) --- */
#app-wrapper {
    margin-top: 70px; /* Jarak header */
    margin-bottom: 70px; /* Jarak footer */
    padding: 20px 15px; min-height: calc(100vh - 140px);
    transition: opacity 0.3s ease;
}
.fade-out { opacity: 0.3; pointer-events: none; }

/* --- APP BOTTOM NAVIGATION (Footer) --- */
nav.app-bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 70px;
    background: var(--primary-white); box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    display: flex; justify-content: space-around; align-items: center; z-index: 1000;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: var(--text-gray); font-size: 12px; font-weight: 600; gap: 5px;
    transition: color 0.3s;
}
.nav-item i { font-size: 22px; }
.nav-item:hover, .nav-item.active { color: var(--primary-orange); }

/* --- SIDEBAR MENU (Kanan) --- */
.app-sidebar {
    position: fixed; top: 0; right: -300px; width: 280px; height: 100vh;
    background: var(--primary-white); box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    z-index: 1001; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px; overflow-y: auto;
}
.app-sidebar.open { right: 0; }
.sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5); z-index: 1000; display: none;
}
.sidebar-overlay.show { display: block; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
.close-sidebar { font-size: 24px; color: var(--primary-orange); cursor: pointer; }
.app-sidebar ul { list-style: none; }
.app-sidebar ul li { margin-bottom: 15px; }
.app-sidebar ul li a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 16px; display: block; }
.app-sidebar ul li a:hover { color: var(--primary-orange); }