:root{
  --black:#050505; --black2:#111317; --graphite:#20242a; --line:#e8e9ee; --soft:#f5f6f8;
  --red:#C00000; --red2:#ff2032; --white:#fff; --muted:#6b7280; --green:#16a34a; --yellow:#f59e0b;
  --radius:22px; --shadow:0 18px 48px rgba(7,10,18,.16); --max:430px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:#1b1d22} body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#1b1d22;color:var(--black);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit} button{border:0;cursor:pointer} img{max-width:100%;display:block}.app{width:min(100vw,var(--max));min-height:100vh;margin:0 auto;background:var(--soft);position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 100px rgba(0,0,0,.5);overflow:hidden}.page{min-height:100vh;padding:18px 16px 88px;background:var(--soft)}.page.dark{background:linear-gradient(145deg,#050505 0%,#111317 48%,#262b33 100%);color:#fff}.safe{padding-top:max(14px,env(safe-area-inset-top))}.logo{width:178px;height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25))}.hero{position:relative;overflow:hidden;padding:22px 18px 92px;border-bottom-left-radius:34px;border-bottom-right-radius:34px;background:radial-gradient(circle at 84% 4%,rgba(192,0,0,.42),transparent 30%),linear-gradient(145deg,#050505,#16191f)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 54%,rgba(192,0,0,.85) 54.2% 61%,transparent 61.4%);opacity:.7}.hero>*{position:relative;z-index:1}.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px}.version{font-size:11px;font-weight:500;letter-spacing:.09em;border:1px solid rgba(255,255,255,.22);padding:8px 10px;border-radius:999px;color:#fff;background:rgba(255,255,255,.08)}.hero h1{font-size:34px;line-height:.98;letter-spacing:-.06em;margin:36px 0 12px}.hero h1 span{color:var(--red2)}.hero p{color:#e2e6ee;font-size:15px;line-height:1.62;margin:0}.quickbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.qchip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;border-radius:16px;padding:13px 12px}.qchip b{display:block;font-size:18px}.qchip span{font-size:11px;color:#c7ccd6;font-weight:500}.floating-card{margin:-58px 16px 18px;background:#fff;border-radius:28px;padding:18px;box-shadow:var(--shadow);position:relative;z-index:2}.section-title{font-size:20px;line-height:1.1;letter-spacing:-.035em;margin:0 0 12px}.tiny{font-size:12px;color:var(--muted);line-height:1.45}.service-grid{display:grid;gap:12px}.service-card{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:16px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 32px rgba(0,0,0,.05)}.service-card.active{background:linear-gradient(135deg,#111317,#2a2d34);color:#fff;border-color:#2d3138}.service-card.locked{opacity:.62}.svc-ico{width:48px;height:48px;border-radius:16px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:24px;flex:0 0 auto}.service-card h3{margin:0 0 5px;font-size:18px}.service-card p{margin:0;color:inherit;opacity:.75;font-size:13px;line-height:1.35}.arr{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(192,0,0,.12);display:grid;place-items:center;color:var(--red);font-size:24px}.service-card.active .arr{background:#fff;color:var(--red)}.header{height:70px;background:#fff;display:flex;align-items:center;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header.dark{background:#070707;color:#fff;border-color:rgba(255,255,255,.08)}.back,.iconbtn{width:42px;height:42px;border-radius:14px;background:var(--soft);font-size:24px;font-weight:500;color:#111}.header.dark .back,.header.dark .iconbtn{background:#1b1d22;color:#fff}.headtext{flex:1;min-width:0}.headtext b{display:block;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headtext span{font-size:12px;color:var(--muted)}.header.dark .headtext span{color:#b9bec8}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;margin-bottom:14px;box-shadow:0 10px 32px rgba(0,0,0,.05)}.card.black{background:#070707;color:#fff;border-color:#22252b}.label{display:block;font-size:12px;font-weight:500;color:#5d6470;text-transform:uppercase;letter-spacing:.07em;margin:0 0 7px}.input,.textarea,.select{width:100%;border:1px solid #dfe2e8;background:#fff;border-radius:16px;padding:14px 14px;font-size:16px;color:#111;outline:0}.textarea{min-height:90px;resize:vertical}.input:focus,.textarea:focus,.select:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(192,0,0,.1)}.field{margin-bottom:12px}.btn{min-height:52px;border-radius:18px;padding:0 18px;font-weight:500;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 28px rgba(192,0,0,.25)}.btn-dark{background:#050505;color:#fff}.btn-light{background:#fff;border:1px solid var(--line);color:#050505}.btn-block{width:100%}.tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 12px;scrollbar-width:none}.tab{white-space:nowrap;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;color:#39404a}.tab.active{background:var(--red);border-color:var(--red);color:#fff}.result-count{font-size:13px;color:#626a76;margin:4px 0 12px}.rate-card{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:12px;margin-bottom:12px;box-shadow:0 10px 30px rgba(0,0,0,.05)}.rate-card img{width:86px;height:86px;object-fit:cover;border-radius:18px}.mode{font-weight:500;font-size:13px;color:var(--red);margin-bottom:4px}.route{font-weight:500;font-size:16px;line-height:1.22;letter-spacing:-.02em}.price{font-size:22px;font-weight:500;letter-spacing:-.01em;margin:7px 0;color:#050505}.price small{font-size:12px;color:#6d7480;letter-spacing:0}.meta{font-size:12px;color:#6b7280;line-height:1.35}.arrow{font-size:30px;color:var(--red);font-weight:500}.hero-img{height:190px;position:relative;margin:-18px -16px 14px;overflow:hidden;background:#111}.hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.04)}.hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.65))}.hero-img .chip{position:absolute;left:16px;bottom:16px;z-index:1}.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:500;padding:8px 11px;letter-spacing:.05em}.detail-price{font-size:34px;font-weight:500;letter-spacing:-.02em;color:var(--red);margin:8px 0}.notice{background:#fff5f5;border:1px solid #ffd1d4;color:#7c1118;border-radius:18px;padding:12px;font-size:13px;line-height:1.45}.info-list{display:grid;gap:8px;margin-top:12px}.info-item{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed #dfe2e8;padding:10px 0}.info-item b{font-size:13px}.info-item span{text-align:right;color:#5b626d;font-size:13px}.qtybox{display:grid;grid-template-columns:56px 1fr 56px;gap:10px;align-items:center;margin:12px 0}.qtybox button{height:56px;border-radius:18px;background:#111;color:#fff;font-size:30px;font-weight:500}.qtynum{height:56px;border-radius:18px;background:var(--soft);display:grid;place-items:center;font-size:28px;font-weight:500}.summary{background:#f8f9fb;border-radius:18px;padding:14px;margin-top:12px}.sumrow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #e8e9ee}.sumrow:last-child{border-bottom:0}.sumrow span{color:#5d6470}.sumrow b{text-align:right}.sumrow.total{font-size:21px;font-weight:500}.sumrow.total span,.sumrow.total b{color:var(--red)}.stepper{display:flex;gap:6px;margin-bottom:16px}.step{height:8px;flex:1;border-radius:999px;background:#e1e4ea}.step.active,.step.done{background:var(--red)}.docrow{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:18px;margin-bottom:10px;background:#fff}.docrow .docico{width:38px;height:38px;border-radius:12px;background:#111;color:#fff;display:grid;place-items:center}.docrow b{font-size:15px}.docrow span{display:block;font-size:12px;color:#6b7280;margin-top:2px}.toggle{margin-left:auto;width:24px;height:24px;border-radius:8px;background:#e8e9ee;display:grid;place-items:center;color:#fff}.docrow.checked .toggle{background:var(--green)}.timeline{position:relative;margin-top:6px}.event{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:10px 0}.dot{width:26px;height:26px;border-radius:50%;background:#d5d9e2;display:grid;place-items:center;color:#fff;font-weight:500;position:relative;z-index:1}.event.done .dot{background:var(--green)}.event.active .dot{background:var(--red)}.event h4{margin:0 0 4px;font-size:15px}.event p{margin:0;color:#6b7280;font-size:12px;line-height:1.35}.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,var(--max));height:72px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
textarea.input{min-height:96px;line-height:1.4;resize:vertical;font-family:inherit}.navitem{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:11px;color:#6b7280;font-weight:500;gap:2px}.navitem b{font-size:20px}.navitem.active{color:var(--red)}.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);width:min(92vw,390px);background:#111;color:#fff;padding:14px 16px;border-radius:18px;box-shadow:var(--shadow);z-index:99;font-size:14px;line-height:1.4}.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.badge{font-size:12px;font-weight:500;padding:8px 10px;border-radius:999px;background:#f1f2f5;color:#4b5563}.badge.red{background:#ffe7e9;color:#ad0010}.empty{text-align:center;padding:28px 18px;color:#606774}.profile-card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}.avatar{width:52px;height:52px;border-radius:18px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:500}.contactline{font-size:14px;line-height:1.6;color:#4b5563}.table{display:grid;gap:8px}.mini-card{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff}.mini-card b{display:block;margin-bottom:5px}.mini-card span{font-size:13px;color:#6b7280}.footer-note{font-size:11px;color:#767d89;line-height:1.45;text-align:center;margin:18px 8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:360px){.hero h1{font-size:30px}.rate-card{grid-template-columns:74px 1fr}.rate-card img{width:74px;height:74px}.price{font-size:20px}.detail-price{font-size:30px}}

/* Google Maps Autocomplete Dropdown */
.maps-dropdown {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  width: 100%;
  margin-top: 2px;
  overflow: hidden;
}
.maps-item {
  padding: 12px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.4;
}
.maps-item:last-child { border-bottom: none; }
.maps-item:hover { background: #FFF3F3; color: #C00000; }
.field { position: relative; }

/* Export blue accent */
.mode[style*="1F4E79"] { color: #1F4E79 !important; }

/* ============================================================
   DESKTOP PHONE FRAME
   ============================================================ */
html, body {
  height: 100%;
  overflow: hidden;
}
.desktop-shell {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at 30% 20%, #1a1f2e 0%, #0a0a0f 60%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phone-frame {
  width: 393px;
  height: 852px;
  max-height: 96vh;
  background: #0d0d0e;
  border-radius: 54px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 2px #1c1c1e,
    0 0 0 5px #2c2c2e,
    0 0 0 6px #1a1a1c,
    0 40px 120px rgba(0,0,0,.85),
    0 8px 32px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-left: 3px solid #1c1c1e;
  border-right: 3px solid #1c1c1e;
}
.phone-notch {
  flex: 0 0 auto;
  height: 40px;
  background: #0d0d0e;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100;
}
.phone-camera {
  width: 126px;
  height: 34px;
  background: #000;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.phone-camera::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #1a3a5c, #0d2035);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.05);
}
.phone-screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #f5f6f8;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone-screen::-webkit-scrollbar { display: none; }
#app.app {
  min-height: 100%;
  width: 100%;
  overflow: visible;
}
.phone-chin {
  flex: 0 0 30px;
  background: #0d0d0e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-chin::after {
  content: '';
  width: 120px;
  height: 5px;
  background: rgba(255,255,255,.28);
  border-radius: 3px;
}
/* Bottom nav — sticky within phone-screen scroll */
.bottom {
  position: sticky !important;
  bottom: 0 !important;
  left: unset !important;
  transform: none !important;
  width: 100% !important;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Toast — absolute inside phone-frame */
.toast {
  position: absolute !important;
  left: 50% !important;
  bottom: 80px !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 360px !important;
}
/* On real mobile screens — FULLSCREEN seperti aplikasi native: terkunci, tanpa bounce, background website tak muncul */
@media (max-width: 820px) {
  html, body { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #f5f6f8; }
  .desktop-shell { background: #f5f6f8; display: block; height: 100vh; height: 100dvh; overflow: hidden; }
  .phone-frame { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; border: none; max-height: none; }
  .phone-notch, .phone-chin { display: none; }
  .phone-screen { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1 1 auto; height: auto; }
  #app.app { min-height: 100%; }
  .bottom { position: fixed !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: min(100vw, var(--max)) !important; }
  .toast { position: fixed !important; }
}

/* ==========================================
   PAYMENT PAGE
   ========================================== */
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f3f3;
  font-size: 14px;
}
.pay-row:last-child { border-bottom: none; }
.pay-lbl { color: #888; font-size: 12px; }

/* ==========================================
   GOOGLE MAPS AUTOCOMPLETE DROPDOWN
   ========================================== */
.maps-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 999;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-top: none;
}
.maps-item {
  padding: 11px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f8f8f8;
  transition: background .15s;
}
.maps-item::before { content: '📍'; font-size: 14px; flex-shrink: 0; }
.maps-item:hover, .maps-item:active { background: #FFF3F3; color: #C00000; }
.maps-item:last-child { border-bottom: none; }

/* ==========================================
   MICRO ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Page transition */
.app > main, .app > header { animation: fadeInUp .25s ease both; }

/* Buttons pulse on tap */
.btn:active { transform: scale(.97); transition: transform .1s; }

/* Rate cards slide in */
.rate-card { animation: fadeInUp .2s ease both; }
.rate-card:nth-child(2) { animation-delay: .04s; }
.rate-card:nth-child(3) { animation-delay: .08s; }
.rate-card:nth-child(4) { animation-delay: .12s; }
.rate-card:nth-child(5) { animation-delay: .16s; }
.rate-card:nth-child(n+6) { animation-delay: .2s; }

/* Service cards */
.service-card { animation: fadeInUp .22s ease both; transition: transform .15s, box-shadow .15s; }
.service-card:nth-child(2) { animation-delay: .05s; }
.service-card:nth-child(3) { animation-delay: .1s; }
.service-card:active { transform: scale(.98); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Hero pulse animation */
.hero { animation: fadeInUp .3s ease both; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
  height: 14px;
  margin: 6px 0;
}

/* Bottom nav active indicator */
.navitem.active { color: #C00000; }
.navitem.active b { color: #008F3A; display: block; transform: translateY(-2px); transition: transform .2s; }

/* Chat FAB pulse when closed */
#chat-fab:not(.open-fab) { animation: pulse 2.5s ease-in-out infinite; }

/* Toast animation */
.toast { animation: fadeInUp .2s ease both; }

/* ==========================================
   MAPS SEARCH GOJEK-STYLE
   ========================================== */
#shipperAddress:focus {
  border-color: #C00000 !important;
  box-shadow: 0 0 0 3px rgba(192,0,0,.1);
}

/* Installed PWA (Add to Home Screen) — always fullscreen, no phone mockup frame */
@media (display-mode: standalone), (display-mode: fullscreen){
  html,body{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#f5f6f8}
  .desktop-shell{background:#f5f6f8;display:block;height:100vh;height:100dvh;overflow:hidden}
  .phone-frame{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none;border:none;max-height:none}
  .phone-notch,.phone-chin{display:none}
  .phone-screen{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1 1 auto;height:auto}
  #app.app{min-height:100%}
}

/* FIX: fixed bottom nav — the fadeInUp transform on <main> was making a containing
   block, so position:fixed scrolled with content. Disable that transform on mobile
   and force the nav pinned to the viewport bottom. */
@media (max-width: 820px){
  .app > main, .app > header { animation: none !important; }
  .bottom{
    position: fixed !important; bottom: 0 !important; left: 50% !important;
    transform: translateX(-50%) !important; width: min(100vw, var(--max)) !important;
    z-index: 50 !important;
  }
}
@media (display-mode: standalone), (display-mode: fullscreen){
  .app > main, .app > header { animation: none !important; }
  .bottom{
    position: fixed !important; bottom: 0 !important; left: 50% !important;
    transform: translateX(-50%) !important; width: min(100vw, var(--max)) !important;
    z-index: 50 !important;
  }
}

/* Persistent bottom nav now lives OUTSIDE #app (no transformed ancestor),
   so position:fixed pins to the real viewport on mobile. */
#idxnav.bottom{ margin:0 !important; }
@media (min-width: 821px){
  #idxnav.bottom{ position: sticky !important; bottom:0 !important; left:0 !important; transform:none !important; width:100% !important; }
}
@media (max-width: 820px){
  #idxnav.bottom{ position: fixed !important; bottom:0 !important; left:0 !important; right:0 !important; transform:none !important; width:100% !important; }
}

/* ============================================================
   IDX THEME v9 — redesign (red/black/white, flat SVG icons)
   ============================================================ */
:root{ --red:#C00000; --red2:#ff2436; --red-d:#8a0000; }

/* Home page becomes light; hero turns brand-red (splash style) */
.page.dark{ background:#f5f6f8; color:#111 }
.hero{
  background:linear-gradient(180deg,rgba(6,7,10,.42),rgba(6,7,10,.72) 56%,rgba(6,7,10,.95)),url(air.jpg) center 30%/cover,#080a0e !important;
  border-bottom-left-radius:30px; border-bottom-right-radius:30px;
  padding:calc(24px + env(safe-area-inset-top)) 18px 92px;
}
.hero:before{ background:linear-gradient(118deg,transparent 0 55%,rgba(192,0,0,.85) 55.2% 62%,transparent 62.3%) !important; opacity:.9 }
.hero h1{ color:#fff }
.hero h1 span{ color:#fff; opacity:.82 }
.hero p{ color:rgba(255,255,255,.92) }
.hero .logo{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.28)); width:150px }
.version{ background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.32) !important; color:#fff }
.qchip{ background:rgba(255,255,255,.15) !important; border-color:rgba(255,255,255,.24) !important }
.qchip span{ color:rgba(255,255,255,.85) }
.hero-tag{ color:#fff; font-weight:500; font-size:13px; letter-spacing:.01em; margin-top:12px; opacity:.96 }
.hero-tag:before{ content:"“"; opacity:.5 } .hero-tag:after{ content:"”"; opacity:.5 }

/* Flat SVG icon sizing */
.svc-ico svg{ width:26px; height:26px; fill:#fff }
.mode svg{ width:15px; height:15px; vertical-align:-2px; margin-right:3px }
.chip svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; fill:#fff }
.navitem b{ display:grid; place-items:center; height:24px }
.navitem b svg{ width:23px; height:23px; fill:currentColor }
.iconbtn svg{ width:22px; height:22px; fill:#111 }
.header.dark .iconbtn svg{ fill:#fff }

/* Service cards: light w/ red icon tile (match reference icon sheet) */
.service-card{ border-radius:20px }
.service-card.active{ background:#fff; color:#111; border-color:var(--line) }
.service-card.active .arr{ background:rgba(192,0,0,.12); color:var(--red) }
.service-card.active .svc-ico{ background:var(--red) }
.svc-ico{ box-shadow:0 8px 20px rgba(192,0,0,.26) }
/* Brand 2-tone service icons (Import/Export/Nusantara) on white tiles — matches official icon sheet */
.service-card.active .svc-ico.brand,.svc-ico.brand{ background:#fff; border:1px solid #eceef2; box-shadow:0 6px 16px rgba(0,0,0,.09); width:52px; height:52px; border-radius:15px }
.svc-ico.brand svg{ width:34px; height:34px; fill:none }

/* Detail/booking dark header -> brand red */
.header.dark{ background:linear-gradient(180deg,#0c0e12,#070809); border-color:rgba(255,255,255,.08) }
.header.dark .back,.header.dark .iconbtn{ background:rgba(255,255,255,.2); color:#fff }
.header.dark .headtext span{ color:rgba(255,255,255,.85) }

/* Confirmed/summary black card stays premium dark; give it a red edge */
.card.black{ background:linear-gradient(160deg,#141414,#232323); border-color:#2a2a2a }

/* Rounded photos already; add subtle brand ring on rate-card image */
.rate-card img{ box-shadow:0 4px 12px rgba(0,0,0,.12) }

/* ===== LIVE TRACKING MAP (Gojek-style) ===== */
.track-map{ height:300px; width:100%; background:#e6eaf0; position:relative; overflow:hidden }
.track-map .map-skeleton{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(135deg,#eef1f5,#dde3ea); color:#8a93a0; text-align:center; padding:24px }
.map-skeleton .ms-dot{ width:26px; height:26px; border-radius:50%; border:3px solid var(--red); border-top-color:transparent; animation:spin 1s linear infinite }
.map-skeleton .ms-text{ font-size:13px; font-weight:500; line-height:1.5; max-width:280px }
.map-skeleton .ms-glyph{ font-size:34px }
.map-skeleton.map-fallback{ background:repeating-linear-gradient(45deg,#eceff3,#eceff3 12px,#e6eaf0 12px,#e6eaf0 24px) }
@keyframes spin{ to{ transform:rotate(360deg) } }
.track-sheet{ margin-top:-24px; border-radius:24px 24px 0 0; background:#f5f6f8; position:relative; z-index:2; padding:16px 16px 0; box-shadow:0 -12px 30px rgba(0,0,0,.10) }
.track-sheet:before{ content:""; display:block; width:44px; height:5px; border-radius:3px; background:#cfd5de; margin:2px auto 14px }
.track-status{ border:1px solid var(--line) }
.ts-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.ts-badge{ font-size:11px; font-weight:500; letter-spacing:.05em; background:#eef0f3; color:#6b7280; padding:6px 11px; border-radius:999px }
.ts-badge.live{ background:rgba(192,0,0,.12); color:var(--red) }
.ts-eta{ font-size:12px; color:#6b7280; font-weight:500 }
.ts-route{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:500; letter-spacing:-.02em }
.ts-route .ts-ico{ font-size:20px }
.ts-route .ts-arrow{ color:var(--red); font-weight:500 }
.ts-eta2{ margin-top:8px; font-size:12px; color:#6b7280 }

/* Timeline dots use SVG icons (white on colored dot) */
.timeline .dot{ width:30px; height:30px }
.timeline .dot svg{ width:16px; height:16px; fill:#fff }

/* ===== Leaflet (OSM) tracking map markers ===== */
.track-map .leaflet-container{ height:100%; width:100%; font-family:inherit; background:#e6eaf0 }
.lpin-wrap,.lcourier-wrap{ background:none;border:none }
.lpin{ width:22px;height:22px;background:var(--c);border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.35) }
.lcourier{ position:relative;width:42px;height:42px;display:grid;place-items:center }
.lcourier .lemo{ position:relative;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--red);display:grid;place-items:center;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.25) }
.lcourier .lpulse{ position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(192,0,0,.35);animation:lpulse 1.7s ease-out infinite }
@keyframes lpulse{ 0%{ transform:scale(.7);opacity:.7 } 100%{ transform:scale(2.1);opacity:0 } }
.arr,.arrow{display:none !important}
b,strong,h1,h2,h3,h4{font-weight:500}

/* v37: segmented tab/toggle — kontras lembut (bukan pill putih di atas putih) */
.tabs{background:#edeff2;border-radius:16px;padding:5px;gap:4px;overflow:auto}
.tab{background:transparent;border:0;color:#5b6470;padding:9px 15px}
.tab.active{background:#fff;border:0;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.10);font-weight:600}

/* v37: kartu layanan MERAH (kontras kuat, tidak pucat) */
.service-card.active{background:linear-gradient(135deg,#d10a19 0%,#9e0410 100%);color:#fff;border-color:#9e0410;box-shadow:0 14px 32px rgba(190,4,16,.30)}
.service-card.active h3,.service-card.active p{color:#fff}
.service-card.active p{opacity:.92}


/* === International-standard a11y & polish (appended) === */
:focus-visible{outline:2px solid #C00000;outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.rate-card:focus-visible,.service-card:focus-visible{outline:2px solid #C00000;outline-offset:2px}
:focus:not(:focus-visible){outline:none}
a,button,[role=button],[onclick]{-webkit-tap-highlight-color:rgba(192,0,0,.12)}
::selection{background:rgba(192,0,0,.9);color:#fff}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

/* ============================================================
   IDX Explorer redesign handoff layer
   Visual-only overrides. Backend, pricing, payload, and rates are untouched.
   ============================================================ */
:root{
  --idx-red:#D50113;
  --idx-red-hot:#EF121E;
  --idx-black:#050505;
  --idx-ink:#111827;
  --idx-graphite:#1C2027;
  --idx-muted:#66717D;
  --idx-line:#E3E8ED;
  --idx-soft:#F6F7F8;
  --idx-green:#078C45;
  --idx-gold:#F4B400;
  --idx-silver:#C9CED6;
  --idx-shadow:0 14px 34px rgba(17,24,39,.11);
  --idx-shadow-strong:0 22px 46px rgba(213,1,19,.24);
}

html,body{background:var(--idx-soft);color:var(--idx-ink)}
body,.app{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:0}
.desktop-shell{background:linear-gradient(140deg,#050505 0%,#111827 42%,#2F3541 100%)}
.phone-frame{box-shadow:0 32px 80px rgba(0,0,0,.45)}
.phone-screen,#app.app{background:var(--idx-soft)}
.page{background:var(--idx-soft);color:var(--idx-ink);padding-bottom:104px}
.page.dark{background:var(--idx-soft);color:var(--idx-ink)}

.header{
  min-height:76px;
  padding:calc(13px + env(safe-area-inset-top)) 16px 13px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(227,232,237,.86);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(17,24,39,.06);
}
.header.dark{background:linear-gradient(145deg,#050505,#1C2027);border-bottom:0}
.headtext b{font-weight:900;font-size:17px;letter-spacing:-.01em}
.headtext span{font-size:12px;color:var(--idx-muted)}
.back,.iconbtn{
  width:40px;height:40px;border-radius:14px;
  background:#fff;color:var(--idx-ink);
  box-shadow:0 8px 20px rgba(17,24,39,.08);
}
.header.dark .back,.header.dark .iconbtn{background:rgba(255,255,255,.14);box-shadow:none}

.idx-redesign-home{overflow-x:hidden}
.idx-hero-redesign{
  position:relative;
  min-height:390px;
  padding:calc(18px + env(safe-area-inset-top)) 18px 124px;
  overflow:hidden;
  border-radius:0 0 32px 32px;
  background:
    linear-gradient(120deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.9) 43%,rgba(213,1,19,.82) 100%),
    #050505 !important;
}
.idx-hero-redesign:before{
  content:"";
  position:absolute;inset:-40px -80px auto auto;
  width:250px;height:460px;
  transform:rotate(32deg);
  background:linear-gradient(180deg,rgba(239,18,30,.95),rgba(213,1,19,.08));
  opacity:.95;
}
.idx-hero-redesign:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(180deg,rgba(5,5,5,0),rgba(5,5,5,.62));
  pointer-events:none;
}
.idx-brandrow{position:relative;z-index:4;align-items:flex-start}
.idx-brandrow .logo{width:200px;margin-top:4px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.idx-hero-actions{display:flex;align-items:center;gap:10px}
.idx-lang,.idx-round{
  min-width:42px;height:42px;border-radius:15px;
  display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.idx-round svg{width:20px;height:20px;fill:#fff}
.idx-hero-copy{position:relative;z-index:3;margin-top:24px;max-width:250px}
.idx-hello{margin:0 0 6px;color:var(--idx-red-hot)!important;font-weight:900;font-size:17px}
.idx-hero-copy h1{margin:0;color:#fff;font-size:39px;line-height:.98;font-weight:950;letter-spacing:-.03em}
.idx-hero-copy h1 span{color:#fff}
.idx-hero-copy h1 span:first-letter{color:var(--idx-red-hot)}
.idx-hero-copy>p:last-child{margin-top:12px;color:rgba(255,255,255,.9);font-size:15px;line-height:1.45}
.idx-hero-art{
  position:absolute;right:-82px;bottom:-6px;z-index:2;
  width:360px;height:245px;object-fit:cover;object-position:center;
  border-radius:28px 0 0 0;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.52));
}

.idx-loyalty-row{
  position:relative;z-index:8;
  display:grid;grid-template-columns:1.45fr .9fr .9fr;gap:0;
  margin:-84px 14px 14px;
  border-radius:24px;overflow:hidden;
  box-shadow:var(--idx-shadow-strong);
}
.idx-loyalty-row button{min-height:88px;border:0;text-align:left}
.idx-member-card{
  display:flex;align-items:center;gap:10px;
  padding:12px;background:linear-gradient(135deg,var(--idx-red-hot),var(--idx-red));color:#fff;
}
.idx-member-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#fff}
.idx-member-card b,.idx-points-card b,.idx-rank-card b{display:block;font-weight:950;font-size:17px;letter-spacing:-.01em}
.idx-member-card small,.idx-points-card span,.idx-rank-card span{display:block;margin-top:4px;font-size:11px;opacity:.82}
.idx-points-card{padding:14px;background:#111;color:#fff}
.idx-points-card:before{content:"";display:block;width:30px;height:30px;border-radius:50%;margin-bottom:6px;background:radial-gradient(circle,#FFE28A,#F4B400)}
.idx-rank-card{padding:14px;background:#fff;color:var(--idx-ink)}
.idx-rank-card:before{content:"";display:block;width:30px;height:30px;border-radius:50%;margin-bottom:6px;background:linear-gradient(135deg,#fff,#C9CED6)}

.idx-stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:0 14px 18px;padding:14px 8px;
  border-radius:24px;background:#fff;border:1px solid rgba(227,232,237,.9);
  box-shadow:var(--idx-shadow);
}
.idx-stat-strip div{text-align:center;border-right:1px solid var(--idx-line)}
.idx-stat-strip div:last-child{border-right:0}
.idx-stat-strip b{display:block;font-size:22px;font-weight:950;color:var(--idx-ink);line-height:1}
.idx-stat-strip span{display:block;margin-top:6px;color:var(--idx-muted);font-size:10px;font-weight:850}

.floating-card.idx-services{margin:0 14px 16px;padding:0;background:transparent;border:0;box-shadow:none}
.idx-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.idx-section-head .section-title{font-size:22px;font-weight:950;letter-spacing:-.02em}
.idx-section-head button{background:transparent;color:var(--idx-red);font-weight:900;font-size:13px;padding:8px 0}
.idx-services .service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.idx-services .service-card.active{
  position:relative;display:block;
  min-height:214px;padding:14px;overflow:hidden;text-align:left;
  border-radius:18px;background:#fff;color:var(--idx-ink);
  border:1px solid rgba(227,232,237,.92);
  box-shadow:0 12px 26px rgba(17,24,39,.09);
}
.idx-services .service-card.active h3{margin:0;color:var(--idx-ink);font-size:15px;line-height:1.16;font-weight:950;letter-spacing:0}
.idx-services .service-card.active p{margin:7px 0 0;color:#3f4753;font-size:11.5px;line-height:1.36;opacity:1}
.idx-services .service-card.active > div:not(.svc-img):not(.arr){
  position:relative;z-index:2;padding-left:56px;padding-bottom:72px;min-height:110px;
}
.idx-services .svc-scene{
  display:block;position:absolute;left:10px;right:auto;bottom:8px;z-index:1;
  width:118px;height:70px;object-fit:contain;object-position:left bottom;
  border-radius:0;background:transparent;box-shadow:none;
}
.idx-services .svc-img{
  position:absolute;left:14px;top:14px;z-index:3;width:44px;height:44px;border-radius:15px;
  background:#fff;display:grid;place-items:center;box-shadow:0 10px 20px rgba(17,24,39,.12)
}
.idx-services .svc-img img{width:40px;height:40px}
.idx-services .arr{
  position:absolute;right:12px;bottom:12px;z-index:3;display:grid!important;place-items:center;
  width:34px;height:34px;border-radius:14px;background:rgba(213,1,19,.1);color:var(--idx-red);font-weight:950;
}

.idx-invite,.idx-benefits,.idx-booking-cta{
  margin-left:14px;margin-right:14px;border-radius:22px;background:#fff;
  border:1px solid rgba(227,232,237,.92);box-shadow:var(--idx-shadow);
}
.idx-invite{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:10px;padding:10px 12px;overflow:hidden}
.idx-invite img{width:76px;height:76px;object-fit:cover;object-position:top;border-radius:18px}
.idx-invite b{display:block;font-size:15px;font-weight:950}
.idx-invite span{display:block;margin-top:4px;color:var(--idx-muted);font-size:12px;line-height:1.35}
.idx-invite button{width:42px;height:42px;border-radius:16px;padding:0;background:#111;color:#fff;font-weight:900;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.idx-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:14px;padding:14px 6px}
.idx-benefits div{padding:0 8px;border-right:1px solid var(--idx-line)}
.idx-benefits div:last-child{border-right:0}
.idx-benefits b{display:block;font-size:12px;font-weight:950}
.idx-benefits span{display:block;margin-top:4px;color:var(--idx-muted);font-size:11px;line-height:1.25}
.idx-booking-cta{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:78px;margin-top:16px;padding:0 88px 0 18px;overflow:hidden;
  background:linear-gradient(135deg,var(--idx-red-hot),var(--idx-red));color:#fff;
  font-size:23px;font-weight:950;letter-spacing:-.02em;
}
.idx-booking-cta span{margin-left:10px}
.idx-booking-cta img{
  position:absolute;right:8px;bottom:5px;width:72px;height:64px;
  object-fit:contain;object-position:center;pointer-events:none;
}
.idx-qr-card{
  display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;
  margin:14px 14px 18px;padding:12px;border-radius:22px;background:#fff;
  border:1px solid rgba(227,232,237,.92);box-shadow:var(--idx-shadow);
}
.idx-qr-box{
  width:76px;height:76px;border-radius:18px;padding:8px;background:linear-gradient(135deg,#ECFDF3,#fff);
  box-shadow:inset 0 0 0 1px rgba(0,177,79,.14),0 10px 22px rgba(17,24,39,.08);
}
.idx-qr-box img{width:100%;height:100%;object-fit:contain}
.idx-qr-card b{display:block;color:var(--idx-ink);font-size:14px;font-weight:950;line-height:1.2}
.idx-qr-card span{display:block;margin-top:5px;color:var(--idx-muted);font-size:12px;line-height:1.35}

.card,.rate-card,.notice,.field .input,.input,select,textarea{
  border-radius:18px!important;border-color:rgba(227,232,237,.92)!important;
}
.card,.rate-card{background:#fff;box-shadow:var(--idx-shadow)}
.section-title{font-weight:950;letter-spacing:-.01em}
.btn,.primary,.btn-red,.btn-light{
  min-height:48px;border-radius:16px!important;font-weight:900;letter-spacing:0;
  box-shadow:0 12px 22px rgba(213,1,19,.18);
}
.btn-red,.primary{background:linear-gradient(135deg,var(--idx-red-hot),var(--idx-red))!important;color:#fff!important}
.input,input.input,select.input,textarea.input{
  min-height:50px;background:#fff!important;color:var(--idx-ink)!important;
  box-shadow:inset 0 0 0 1px rgba(227,232,237,.8);
}
.label{color:var(--idx-muted);font-weight:850}
.rate-card{transition:transform .18s ease,box-shadow .18s ease}
.rate-card:active{transform:scale(.985)}
.rate-card img{
  border-radius:18px;object-fit:cover;background:#f6f7f8;
  box-shadow:0 8px 18px rgba(17,24,39,.14), inset 0 0 0 1px rgba(255,255,255,.72);
}
.timeline .event{border-radius:16px}
.timeline .dot{background:var(--idx-red)!important;box-shadow:0 8px 18px rgba(213,1,19,.28)}

#idxnav.bottom{
  height:78px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94)!important;border-top:1px solid rgba(227,232,237,.9);
  box-shadow:0 -14px 32px rgba(17,24,39,.12);backdrop-filter:blur(18px);
}
.bottom .navitem,#idxnav .navitem{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:0;border-radius:18px;color:#4B5563!important;font-size:11px;font-weight:850;background:transparent;
}
.bottom .navitem span,#idxnav .navitem span{display:block}
.bottom .navitem b,#idxnav .navitem b{height:24px;display:grid;place-items:center}
.bottom .navitem svg,#idxnav .navitem svg{width:23px;height:23px;fill:currentColor}
.bottom .navitem.active,#idxnav .navitem.active{color:var(--idx-red)!important}
.bottom .nav-book,#idxnav .nav-book{transform:translateY(-18px);color:#fff!important}
.bottom .nav-book b,#idxnav .nav-book b{
  width:58px;height:58px;border-radius:22px;background:linear-gradient(135deg,var(--idx-red-hot),var(--idx-red));
  box-shadow:0 16px 28px rgba(213,1,19,.36);display:grid;place-items:center;
}
.bottom .nav-book img,#idxnav .nav-book img{width:32px;height:32px}
.bottom .nav-book span,#idxnav .nav-book span{color:var(--idx-red);font-weight:950;margin-top:1px}

@media (max-width:390px){
  .idx-hero-copy h1{font-size:34px}
  .idx-services .service-grid{gap:10px}
  .idx-services .service-card.active{min-height:204px;padding:12px}
  .idx-services .service-card.active h3{font-size:14px}
  .idx-services .service-card.active p{font-size:11px}
  .idx-services .service-card.active > div:not(.svc-img):not(.arr){padding-left:52px;padding-bottom:66px}
  .idx-services .svc-img{left:12px;top:12px;width:42px;height:42px}
  .idx-services .svc-img img{width:38px;height:38px}
  .idx-services .svc-scene{width:104px;height:62px}
  .idx-invite{grid-template-columns:58px 1fr}
  .idx-invite button{grid-column:1 / -1;width:42px;margin-left:auto}
  .idx-benefits{grid-template-columns:1fr;gap:10px}
  .idx-benefits div{border-right:0;border-bottom:1px solid var(--idx-line);padding:0 4px 10px}
  .idx-benefits div:last-child{border-bottom:0;padding-bottom:0}
}

/* Final visual tuning */
.idx-hero-art{right:-38px;bottom:0;width:318px;height:236px;object-position:center}
.card.empty{
  position:relative;min-height:260px;padding:150px 20px 22px!important;
  text-align:center;font-weight:850;color:var(--idx-ink);
  background:#fff url("img/redesign/mascot-explorer.png") center 18px/126px 126px no-repeat!important;
}

/* Green palette test: brighter app-market logistics mood */
:root{
  --red:#00B14F;
  --red2:#2EE66E;
  --green:#00B14F;
  --idx-red:#00B14F;
  --idx-red-hot:#2EE66E;
  --idx-green:#00B14F;
  --idx-soft:#F7FCF8;
  --idx-shadow-strong:0 22px 46px rgba(0,177,79,.24);
}
body,.app,.page,.phone-screen,#app.app{background:#F7FCF8}
.desktop-shell{background:linear-gradient(140deg,#EAFBF0 0%,#BFF6D1 42%,#10251A 100%)}
.idx-hero-redesign{
  background:
    linear-gradient(120deg,rgba(8,32,20,.94) 0%,rgba(8,92,43,.88) 46%,rgba(0,177,79,.72) 100%),
    #082014 !important;
}
.idx-hero-redesign:before{
  background:linear-gradient(180deg,rgba(46,230,110,.95),rgba(0,177,79,.1));
}
.idx-hero-redesign:after{background:linear-gradient(180deg,rgba(8,32,20,0),rgba(8,32,20,.56))}
.idx-hello{color:#B7FFD0!important}
.idx-hero-copy h1 span:first-letter{color:#B7FFD0}
.idx-brandrow .logo{filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.idx-hero-art,.idx-services .svc-scene,.idx-invite img,.idx-booking-cta img,.card.empty{
  filter:saturate(1.08) contrast(1.03);
}
.idx-member-card,.bottom .nav-book b,#idxnav .nav-book b{
  background:linear-gradient(135deg,#2EE66E,#00B14F)!important;
}
.btn-red,.primary{
  background:linear-gradient(135deg,#00B14F 0%,#008F3A 100%)!important;
  color:#fff!important;
}
.idx-booking-cta{
  background:linear-gradient(135deg,#00A447 0%,#00C853 48%,#008F3A 100%)!important;
  box-shadow:0 16px 30px rgba(0,177,79,.34)!important;
}
.idx-services .arr,.arr{background:rgba(0,177,79,.12);color:#008F3A}
.idx-section-head button,.mode,.price,.detail-price,.sumrow.total span,.sumrow.total b,.bottom .navitem.active,#idxnav .navitem.active,.bottom .nav-book span,#idxnav .nav-book span{
  color:#008F3A!important;
}
.tab.active,.chip,.step.active,.step.done,.event.active .dot,.timeline .dot{
  background:#00A447!important;border-color:#00A447!important;color:#fff!important;
}
.input:focus,.textarea:focus,.select:focus{
  border-color:#00B14F!important;box-shadow:0 0 0 4px rgba(0,177,79,.16)!important;
}
.btn,.primary,.btn-red,.btn-light{box-shadow:0 12px 22px rgba(0,177,79,.22)}
.btn-red,.primary{color:#fff!important}
.timeline .dot{box-shadow:0 8px 18px rgba(0,177,79,.28)}
.svc-ico,.avatar{background:#00B14F}
svg [fill="#C00000"],svg [fill="#D50113"]{fill:#00B14F!important}
svg [stroke="#C00000"],svg [stroke="#D50113"]{stroke:#00B14F!important}
.maps-item:hover{background:#ECFDF3;color:#008F3A}

/* ============================================================
   TYPE WEIGHT NORMALIZATION (2026-07-26)
   Kurangi bold berlebih (tema pakai 950 di mana-mana). Aturan:
   FOKUS TEBAL hanya harga & judul utama; nama layanan, judul header,
   label, nav & teks umum dibuat lebih ringan (semibold/normal).
   ============================================================ */
/* Judul header tiap halaman -> semibold */
.headtext b{font-weight:600}
/* Nama layanan (kartu beranda) -> semibold, bukan 950 */
.idx-services .service-card.active h3,.service-card h3{font-weight:600}
/* Judul seksi -> 700 (bukan 950) */
.section-title,.idx-section-head .section-title{font-weight:700}
/* Hero headline & CTA besar -> boldish tapi tidak ekstrem */
.idx-hero-copy h1,.idx-booking-cta{font-weight:800}
.idx-hello,.idx-services .arr{font-weight:700}
/* Emphasis kartu (member/statistik/undang/benefit/QR/nav-book) -> 700 */
.idx-member-card b,.idx-points-card b,.idx-rank-card b,
.idx-stat-strip b,.idx-invite b,.idx-benefits b,.idx-qr-card b,
.bottom .nav-book span,#idxnav .nav-book span{font-weight:700}
/* Label kecil / tombol teks / nav / label form -> 600 */
.idx-stat-strip span,.idx-section-head button,.idx-invite button,
.label,.bottom .navitem,#idxnav .navitem{font-weight:600}
/* Tombol -> semibold (bukan 900) */
.btn,.primary,.btn-red,.btn-light{font-weight:600}
/* Nilai data di ringkasan/detail -> semibold (bukan bold penuh) */
.sumrow b,.info-item b,.docrow b,.event h4{font-weight:600}
/* HARGA = titik fokus tebal */
.price,.detail-price,.sumrow.total,.sumrow.total span,.sumrow.total b{font-weight:700}

/* ============================================================
   HOME TWEAKS (2026-07-26 #2)
   - Hero headline kembali BOLD.
   - Nama layanan: rata-atas + full-width (tidak sempit/"lonjong"),
     lebih besar, blok tinggi seragam supaya sejajar atas & bawah
     antar kartu kiri-kanan. Isi kartu lebih penuh.
   ============================================================ */
.idx-hero-copy h1{font-weight:900}
/* konten kartu: mulai di bawah ikon, memakai lebar penuh, rata atas */
.idx-services .service-card.active > div:not(.svc-img):not(.arr){
  display:block !important;
  padding:56px 8px 72px 6px !important;
  min-height:0 !important;
}
/* nama layanan: lebih besar, rata atas, tinggi seragam (3 baris) -> sejajar atas & bawah */
.idx-services .service-card.active h3{
  font-size:16px !important;
  line-height:1.18 !important;
  letter-spacing:0 !important;
  font-weight:600 !important;
  margin:0 0 7px !important;
  min-height:57px;              /* cadangan 3 baris: semua nama sejajar atas & bawah */
  display:block;
}
/* deskripsi sedikit lebih besar biar kotak tidak terlihat kosong */
.idx-services .service-card.active p{
  font-size:12px !important;
  line-height:1.4 !important;
}
@media (max-width:390px){
  .idx-services .service-card.active h3{font-size:15px !important;min-height:54px}
  .idx-services .service-card.active > div:not(.svc-img):not(.arr){padding:54px 6px 70px 5px !important}
}

/* Label jujur: fitur poin/rank/ajak-teman belum aktif (2026-07-28) */
.idx-soon{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;padding:2px 7px;border-radius:999px;margin-bottom:4px;white-space:nowrap}
.idx-soon.dark{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.14);color:#5c6b62}
.idx-invite .idx-soon{margin:0 0 0 6px;vertical-align:middle;align-self:flex-start;width:fit-content;flex:0 0 auto;background:rgba(0,177,79,.16);border-color:rgba(0,177,79,.35);color:#00913f}