*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Roboto,sans-serif}
:root{--primary:#ff6b00;--dark:#1a1a2e;--gray:#f4f5f7;--text:#333}
body{background:#fff;color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:auto;padding:0 16px}

/* NAVBAR */
.navbar{background:var(--dark);color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.logo{font-size:22px;font-weight:700;color:#fff}
.logo small{color:var(--primary)}
#navmenu{display:flex;gap:18px;align-items:center}
#navmenu a{color:#fff;font-size:14px;padding:6px 10px;border-radius:6px;transition:.2s}
#navmenu a:hover{background:rgba(255,255,255,.1)}
.btn-primary{background:var(--primary)!important;padding:8px 16px!important;font-weight:600}
.hamburger{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}

/* HERO */
.hero{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:60px 0;text-align:center}
.hero h1{font-size:38px;margin-bottom:10px}
.hero p{opacity:.85;margin-bottom:24px}
.search-box{display:flex;gap:8px;max-width:800px;margin:auto;background:#fff;padding:8px;border-radius:12px;flex-wrap:wrap}
.search-box input,.search-box select{flex:1;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;min-width:120px}
.search-box button{background:var(--primary);color:#fff;border:0;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer}

/* CATEGORY */
.categories{padding:30px 0;text-align:center}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px}
.cat-item{background:var(--gray);padding:16px 8px;border-radius:12px;font-size:14px;transition:.2s;cursor:pointer}
.cat-item:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
.cat-item .ico{font-size:28px;display:block;margin-bottom:6px}

/* IKLAN GRID */
.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}
.section-title h2{font-size:22px}
.iklan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:40px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;transition:.2s;cursor:pointer;position:relative}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-3px)}
.card img{width:100%;height:170px;object-fit:cover;background:#eee}
.card .badge{position:absolute;top:8px;left:8px;background:var(--primary);color:#fff;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:600}
.card .badge.spot{background:#e91e63}
.card-body{padding:12px}
.card-body h3{font-size:15px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .price{color:var(--primary);font-weight:700;font-size:16px;margin:6px 0}
.card .meta{font-size:12px;color:#888;display:flex;justify-content:space-between}

/* FORM */
.form-box{max-width:560px;margin:30px auto;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.form-box h2{margin-bottom:20px;color:var(--dark)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;margin-bottom:4px;font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px}
.form-group textarea{min-height:100px;resize:vertical}
.btn{background:var(--primary);color:#fff;border:0;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;width:100%}
.btn:hover{background:#e55f00}

/* LAYANAN */
.layanan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0 40px}
.layanan-card{background:#fff;border:1px solid #eee;padding:24px;border-radius:12px;text-align:center}
.layanan-card .ico{font-size:42px;margin-bottom:10px}
.layanan-card h3{margin-bottom:8px}

/* CHAT */
.chat-container{display:grid;grid-template-columns:280px 1fr;gap:16px;margin:20px auto;height:70vh;max-width:1100px}
.chat-list{background:#fff;border-radius:12px;border:1px solid #eee;overflow-y:auto}
.chat-list-item{padding:12px;border-bottom:1px solid #eee;cursor:pointer}
.chat-list-item:hover{background:var(--gray)}
.chat-window{background:#fff;border-radius:12px;border:1px solid #eee;display:flex;flex-direction:column}
.chat-msgs{flex:1;padding:16px;overflow-y:auto;background:#f8f9fb}
.msg{padding:8px 12px;border-radius:12px;margin-bottom:8px;max-width:70%;font-size:14px}
.msg.me{background:var(--primary);color:#fff;margin-left:auto}
.msg.other{background:#e9ecef}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eee}
.chat-input input{flex:1;padding:10px;border:1px solid #ddd;border-radius:8px}

/* FOOTER */
.footer{background:var(--dark);color:#fff;padding:40px 0 20px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.footer h4{margin-bottom:12px;color:var(--primary)}
.footer ul{list-style:none;font-size:14px}
.footer ul li{margin-bottom:6px;opacity:.8}
.footer a{color:#fff;opacity:.85}
.footer a:hover{opacity:1}
.copy{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;opacity:.6}

/* WA FLOAT */
.wa-float{position:fixed;bottom:20px;right:20px;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:99}

/* MOBILE */
@media(max-width:768px){
  .hamburger{display:block}
  #navmenu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);flex-direction:column;padding:16px}
  #navmenu.show{display:flex}
  .hero h1{font-size:26px}
  .iklan-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card img{height:120px}
  .card-body h3{font-size:13px}
  .chat-container{grid-template-columns:1fr;height:auto}
}
@media(max-width:400px){
  .iklan-grid{grid-template-columns:1fr}
}