:root{
  --primary:#0d6efd; --primary-dark:#0a58ca; --accent:#00b4d8;
  --bg:#f4f6fb; --radius:1rem;
  --shadow:0 4px 18px rgba(30,41,59,.07);
  --shadow-lg:0 12px 32px rgba(30,41,59,.12);
}
*{font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);min-height:100vh;color:#1e293b}
a{text-decoration:none;color:inherit}
a:hover{text-decoration:none}

.navbar-png{background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 2px 12px rgba(13,110,253,.25);position:sticky;top:0;z-index:1030}
.navbar-png .navbar-brand{color:#fff;font-weight:700;letter-spacing:.3px}
.navbar-png .nav-link{color:rgba(255,255,255,.92);border-radius:.5rem;padding:.45rem .8rem;transition:.15s}
.navbar-png .nav-link:hover,.navbar-png .nav-link.active{color:#fff;background:rgba(255,255,255,.15)}
.navbar-png .dropdown-menu{border:0;box-shadow:var(--shadow-lg);border-radius:.7rem}

.hero{background:linear-gradient(135deg,#0d6efd 0%,#00b4d8 100%);color:#fff;border-radius:1.25rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.08);top:-120px;right:-100px}
.hero::after{content:'';position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07);bottom:-90px;left:-70px}

.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.card:hover{box-shadow:var(--shadow-lg)}
.card-header-png{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;border-radius:var(--radius) var(--radius) 0 0!important;font-weight:600;border:0;padding:.9rem 1.25rem}

/* Kartu listing penginapan */
.prop-card{overflow:hidden;height:100%;display:flex;flex-direction:column}
.prop-card:hover{transform:translateY(-4px)}
.prop-img{width:100%;height:200px;object-fit:cover;display:block;background:#e2e8f0}
.prop-img-placeholder{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#fff;font-size:3rem}
.prop-body{padding:1rem;display:flex;flex-direction:column;flex:1}
.prop-cat{font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--primary)}
.prop-nama{font-weight:700;font-size:1.05rem;margin:.2rem 0 .3rem}
.prop-lokasi{font-size:.83rem;color:#64748b}
.prop-harga{margin-top:auto;padding-top:.6rem;font-weight:700;color:#0f766e}
.prop-harga small{font-weight:500;color:#64748b}

.cat-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:2rem;background:#fff;box-shadow:var(--shadow);font-weight:600;color:#334155;transition:.15s;border:2px solid transparent}
.cat-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cat-pill.active{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff}

.btn{border-radius:.65rem;font-weight:600;transition:.15s}
.btn-png{background:linear-gradient(90deg,var(--primary),var(--accent));border:0;color:#fff;border-radius:.7rem;font-weight:600;padding:.6rem 1.4rem}
.btn-png:hover{background:linear-gradient(90deg,var(--primary-dark),#0096c7);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,110,253,.35)}
.btn-wa{background:#25d366;color:#fff;border:0;border-radius:.7rem;font-weight:600}
.btn-wa:hover{background:#1da851;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,211,102,.35)}
.btn-outline-primary,.btn-outline-secondary{border-radius:.7rem}

.form-control,.form-select{border-radius:.6rem;border-color:#e2e8f0;padding:.55rem .85rem}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(13,110,253,.15)}
.form-label{color:#334155;font-weight:600}

.badge-status{font-size:.8rem;padding:.45em .8em;border-radius:.6rem;font-weight:600}
.table thead th{background:#f1f5ff;color:#334155;font-weight:600;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.table td{vertical-align:middle}
.table-hover tbody tr:hover{background:#f8faff}

.stat-card{border-radius:var(--radius);padding:1.25rem;color:#fff;transition:transform .15s}
.stat-card:hover{transform:translateY(-3px)}
.stat-card .stat-num{font-size:1.9rem;font-weight:700;line-height:1.1}
.stat-card .stat-label{opacity:.85;font-size:.85rem}
.stat-blue{background:linear-gradient(135deg,#0d6efd,#00b4d8)}
.stat-green{background:linear-gradient(135deg,#198754,#20c997)}
.stat-orange{background:linear-gradient(135deg,#fd7e14,#ffc107)}
.stat-purple{background:linear-gradient(135deg,#6f42c1,#a370f7)}
.stat-gray{background:linear-gradient(135deg,#495057,#adb5bd)}
.stat-red{background:linear-gradient(135deg,#dc3545,#ff6b6b)}

.sidebar{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:76px}
.sidebar .list-group-item{border:0;border-radius:.6rem!important;margin-bottom:.25rem;color:#334155;font-weight:500;transition:.15s}
.sidebar .list-group-item.active{background:linear-gradient(90deg,var(--primary),var(--accent));border:0;box-shadow:0 4px 12px rgba(13,110,253,.3)}
.sidebar .list-group-item:hover:not(.active){background:#f1f5ff;transform:translateX(3px)}

.auth-wrap{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#0d6efd 0%,#00b4d8 100%);position:relative;overflow:hidden}
.auth-card{max-width:420px;width:100%;margin:auto;border-radius:1.25rem;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.auth-logo{width:56px;height:56px;max-width:56px;max-height:56px;margin:0 auto;object-fit:contain}

.detail-img{width:100%;height:340px;object-fit:cover;border-radius:var(--radius);background:#e2e8f0}
.thumb-img{width:72px;height:72px;object-fit:cover;border-radius:.5rem;cursor:pointer;border:2px solid transparent;flex:0 0 auto}
.thumb-img.active{border-color:var(--primary)}
.fasilitas-item{display:inline-flex;align-items:center;gap:.35rem;background:#f1f5ff;color:#334155;border-radius:.5rem;padding:.3rem .7rem;font-size:.85rem;margin:.15rem}

/* Galeri thumbnail bisa di-scroll horizontal di mobile */
.thumb-row{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch}
.thumb-row::-webkit-scrollbar{height:6px}
.thumb-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

.announce{background:linear-gradient(90deg,#fff8e1,#fff3cd);border-left:4px solid #ffc107;border-radius:.6rem;padding:.9rem 1.1rem;font-size:.92rem;color:#5c4a00}

footer{background:#0f172a;color:#94a3b8;border-radius:1.25rem 1.25rem 0 0}
footer a{color:#cbd5e1}

@media (max-width:767px){
  .prop-img,.prop-img-placeholder{height:160px}
  .detail-img{height:220px}
  .thumb-img{width:60px;height:60px}
  .stat-card .stat-num{font-size:1.4rem}
  .hero{padding:1.5rem!important}
  .prop-nama{font-size:.95rem}
  .prop-body{padding:.8rem}
}
@media (max-width:400px){
  .prop-img,.prop-img-placeholder{height:140px}
  .detail-img{height:190px}
}