:root{--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-50:#eff6ff;--blue-100:#dbeafe;--green-600:#15803d;--green-100:#dcfce7;--red-600:#dc2626;--red-100:#fee2e2;--amber-600:#b45309;--amber-100:#fef3c7;--amber-50:#fffbeb;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--white:#fff;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 1px 3px rgba(0,0,0,.1);--shadow-md:0 4px 6px rgba(0,0,0,.07);--shadow-lg:0 10px 25px rgba(0,0,0,.1);--radius:12px;--radius-sm:8px;--font:'Segoe UI',system-ui,-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--gray-50);color:var(--gray-800);line-height:1.6;-webkit-font-smoothing:antialiased}
.header{background:var(--white);border-bottom:1px solid var(--gray-200);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:2000}
.header-brand{display:flex;align-items:center;gap:10px}
.header-logo{width:36px;height:36px;background:var(--blue-600);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;flex-shrink:0}
.header h1{font-size:1.1rem;font-weight:700;color:var(--gray-900);line-height:1.2}
.header .subtitle{font-size:.7rem;color:var(--gray-500)}
.header-stats{display:flex;gap:12px;flex-shrink:0}
.stat{text-align:center}.stat-num{font-size:1.1rem;font-weight:800;color:var(--blue-600);line-height:1.2}
.stat-label{font-size:.62rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.sidebar-toggle{display:none;width:36px;height:36px;border:none;background:var(--blue-600);color:#fff;border-radius:var(--radius-sm);font-size:18px;cursor:pointer;align-items:center;justify-content:center}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
.main-layout{display:flex;height:calc(100vh - 60px);overflow:hidden}
.sidebar{width:300px;min-width:300px;background:var(--white);border-right:1px solid var(--gray-200);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;z-index:1000}
.sidebar h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);margin-bottom:3px}
.search-box{width:100%;padding:8px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-size:.83rem;font-family:var(--font);background:var(--gray-50)}
.search-box:focus{outline:none;border-color:var(--blue-600)}
.filter-group{display:flex;flex-wrap:wrap;gap:3px}
.filter-chip{padding:5px 10px;border:1.5px solid var(--gray-200);border-radius:99px;font-size:.73rem;cursor:pointer;background:var(--white);font-family:var(--font);color:var(--gray-700);white-space:nowrap;transition:all .15s}
.filter-chip:hover{border-color:var(--blue-600);color:var(--blue-600);background:var(--blue-50)}
.filter-chip.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.rating-stars{display:flex;gap:3px}
.star-btn{width:27px;height:27px;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;font-size:.75rem;text-align:center;line-height:25px;font-family:var(--font)}
.star-btn:hover,.star-btn.active{background:#fbbf24;border-color:#f59e0b;color:#fff}
.reset-btn{width:100%;padding:8px;background:var(--white);border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);font-size:.78rem;cursor:pointer;font-family:var(--font);color:var(--gray-600)}
.reset-btn:hover{background:var(--gray-100)}
.result-count{font-size:.72rem;color:var(--gray-500);text-align:center}
.map-list-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.map-container{height:42%;min-height:220px;z-index:1}
.list-container{flex:1;overflow-y:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;align-content:start}
.loading-state{grid-column:1/-1;text-align:center;padding:40px;color:var(--gray-400);font-size:.9rem}

.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--gray-200);padding:14px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:7px}
.card:hover{box-shadow:var(--shadow-lg);border-color:var(--blue-300);transform:translateY(-2px)}
.card-title{font-size:.95rem;font-weight:700;color:var(--gray-900)}
.card-location{font-size:.73rem;color:var(--gray-500)}
.card-badges{display:flex;gap:4px;flex-wrap:wrap}
.badge{padding:2px 8px;border-radius:99px;font-size:.66rem;font-weight:600}
.badge-glamping{background:#dbeafe;color:#1d4ed8}.badge-campsite{background:#dcfce7;color:#15803d}.badge-freebudget{background:#fef3c7;color:#b45309}.badge-negeri{background:#f3f4f6;color:#6b7280}
.card-rating{font-size:.8rem;color:#f59e0b}
.card-info{font-size:.75rem;color:var(--gray-600);display:flex;align-items:center;gap:8px}
.card-facilities{display:flex;flex-wrap:wrap;gap:2px}
.fac-chip{padding:1px 6px;background:var(--gray-100);border-radius:4px;font-size:.65rem;color:var(--gray-600)}
.section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400);margin-bottom:-3px}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:3000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--radius);max-width:680px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-header{position:sticky;top:0;background:var(--white);padding:18px 20px 12px;border-bottom:1px solid var(--gray-100);z-index:1;display:flex;justify-content:space-between;align-items:start}
.modal-header h2{font-size:1.2rem;font-weight:700}
.modal-close{width:34px;height:34px;border:1.5px solid var(--gray-200);background:var(--white);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--gray-100)}
.modal-body{padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px}
.modal-section{background:var(--gray-50);border-radius:var(--radius-sm);padding:12px 14px}
.modal-section h4{font-size:.8rem;font-weight:700;margin-bottom:6px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.modal-grid.col3{grid-template-columns:1fr 1fr 1fr}
.modal-item{font-size:.75rem;color:var(--gray-600)}
.modal-item strong{color:var(--gray-800)}
.g-review{font-size:.8rem;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:10px 14px;font-style:italic;color:var(--gray-700)}
.review-carousel{position:relative}
.review-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.review-track::-webkit-scrollbar{height:3px}
.review-slide{min-width:85%;scroll-snap-align:start;flex-shrink:0}
.modal-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;color:var(--gray-600)}
.cbtn{display:inline-flex;align-items:center;gap:3px;padding:6px 11px;border-radius:99px;font-size:.7rem;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid var(--gray-300);background:var(--white);color:var(--gray-700);font-family:var(--font)}
.cbtn:hover{border-color:var(--blue-600);color:var(--blue-600)}
.cbtn.pri{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.cbtn.pri:hover{background:var(--blue-700)}
.tab-btn{transition:all .15s}.tab-btn:hover{opacity:.85}

@media(max-width:768px){
  .header{padding:10px 12px}.header h1{font-size:.95rem}.header .subtitle{display:none}
  .sidebar-toggle{display:flex}
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;width:280px;min-width:auto;height:100vh;transition:left .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}.sidebar-overlay.open{display:block}
  .main-layout{flex-direction:column;height:auto}
  .map-container{height:32vh;min-height:200px}
  .list-container{grid-template-columns:1fr;padding:8px}
  .modal{max-width:100%;max-height:95vh}
  .modal-grid,.modal-grid.col3{grid-template-columns:1fr}
  .review-slide{min-width:90%}
  .modal-header{padding:14px 16px 10px}.modal-body{padding:10px 14px 18px}
}
@media(max-width:480px){.header-stats{display:none}}