@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap');
*{box-sizing:border-box}
.htb-wrapper{--primary:#0f172a;--bg:#ffffff;--muted:#f8fafc;--border:#e2e8f0;--radius:24px;width:100%;max-width:720px;margin:0 auto;background:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(15,23,42,.10),0 0 0 1px rgba(15,23,42,.05);font-family:'Inter',system-ui,sans-serif;border:1px solid var(--border)}
@media(max-width:768px){.htb-wrapper{max-width:100%;border-radius:16px;margin:12px;box-shadow:0 10px 30px rgba(15,23,42,.08)}}
@media(max-width:480px){.htb-wrapper{margin:0;border-radius:0;border-left:0;border-right:0;box-shadow:none}}
.htb-header{background:radial-gradient(120% 120% at 20% 10%,#1e293b 0%,var(--primary) 55%,#020617 100%);color:#fff;padding:36px 24px 32px;text-align:center;position:relative;overflow:hidden}
.htb-header::before{content:'';position:absolute;top:-30%;right:-20%;width:70%;height:150%;background:radial-gradient(circle,rgba(59,130,246,.18) 0%,transparent 70%);pointer-events:none}
.htb-header::after{content:'';position:absolute;bottom:-20%;left:-10%;width:60%;height:100%;background:radial-gradient(circle,rgba(139,92,246,.12) 0%,transparent 70%);pointer-events:none}
.htb-header h1{margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:clamp(22px,5.5vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.15;position:relative;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.htb-header p{margin:10px 0 0;opacity:.9;font-size:clamp(13px,3.2vw,14px);font-weight:500;letter-spacing:.01em;position:relative;z-index:1;line-height:1.5}
.htb-controls{padding:20px 18px;background:linear-gradient(180deg,#ffffff 0%,var(--muted) 100%);display:grid;gap:16px;border-bottom:1px solid var(--border)}
.htb-field label{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#475569;margin-bottom:8px}
.htb-select{width:100%;padding:15px 16px;border:2px solid var(--border);border-radius:14px;font-size:15px;font-weight:600;background:#fff;cursor:pointer;transition:.2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.htb-select:hover{border-color:#94a3b8}
.htb-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(15,23,42,.06)}
.htb-detail{padding:20px 18px;background:#fff;animation:htbIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes htbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.htb-detail-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.htb-detail-icon{width:52px;height:52px;min-width:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.htb-detail-badge{background:var(--primary);color:#fff;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:800;margin-left:auto;box-shadow:0 2px 8px rgba(15,23,42,.15)}
.htb-rating{display:inline-flex;align-items:center;gap:6px;background:#fef9c3;border:1px solid #fde68a;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#854d0e;margin-top:8px}
.htb-meta{display:grid;gap:8px;margin:16px 0}
.htb-meta-row{display:flex;gap:10px;padding:12px 14px;background:var(--muted);border-radius:12px;border:1px solid var(--border);font-size:13px;word-break:break-word}
.htb-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
@media(max-width:480px){.htb-actions{grid-template-columns:1fr}}
.htb-btn{padding:14px 14px;border-radius:12px;text-decoration:none;font-weight:700;font-size:13.5px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--border);cursor:pointer;min-height:48px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.htb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.htb-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px rgba(15,23,42,.18)}
.htb-btn.secondary{background:#1e293b;color:#fff;border-color:#1e293b;box-shadow:0 4px 12px rgba(15,23,42,.15)}
.htb-btn.gojek{background:#00AA13;color:#fff;border-color:#00AA13}
.htb-btn.grab{background:#00B14F;color:#fff;border-color:#00B14F}
.htb-footer{padding:16px 16px 12px;background:linear-gradient(180deg,#fff,#f8fafc);border-top:1px solid var(--border);text-align:center}
.htb-btn-phone{display:flex;width:100%;padding:15px;background:var(--primary);color:#fff;border-radius:14px;text-align:center;text-decoration:none;font-weight:800;justify-content:center;gap:8px;font-size:14px;box-shadow:0 4px 14px rgba(15,23,42,.18);transition:.2s}
.htb-btn-phone:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.22)}
.htb-credit{margin-top:12px;font-size:9px;letter-spacing:.15em;color:#94a3b8;font-weight:600;text-transform:uppercase}