/* Nambo Motor – Purged Tailwind CSS (generated) */

/* === BASE RESET === */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;scroll-behavior:smooth}
body{margin:0;line-height:inherit}
img,video{max-width:100%;height:auto}
img{border-style:solid}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none}
a{color:inherit;text-decoration:inherit}

/* === LAYOUT === */
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.inline-block{display:inline-block}
.fixed{position:fixed}
.sticky{position:sticky}
.relative{position:relative}
.inset-0{inset:0px}
.top-0{top:0px}
.bottom-6{bottom:1.5rem}
.right-6{right:1.5rem}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}
.cursor-pointer{cursor:pointer}

/* === FLEX / GRID === */
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* === SPACING – PADDING === */
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pt-4{padding-top:1rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-10{padding-bottom:2.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-2{padding-top:0.5rem}
.pt-6{padding-top:1.5rem}

/* === SPACING – MARGIN === */
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:0.75rem}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}

/* === SIZING === */
.w-full{width:100%}
.w-auto{width:auto}
.w-8{width:2rem}
.w-10{width:2.5rem}
.w-16{width:4rem}
.w-72{width:18rem}
.h-5{height:1.25rem}
.h-8{height:2rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-16{height:4rem}
.h-40{height:10rem}
.h-44{height:11rem}
.h-52{height:13rem}
.max-w-md{max-width:28rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}

/* === TYPOGRAPHY === */
.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-center{text-align:center}
.leading-none{line-height:1}
.leading-snug{line-height:1.375}
.leading-tight{line-height:1.25}
.tracking-widest{letter-spacing:0.1em}
.tracking-tight{letter-spacing:-0.025em}
.whitespace-nowrap{white-space:nowrap}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.underline{text-decoration-line:underline}

/* === TEXT COLORS === */
.text-white{color:#fff}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-gray-900{color:#111827}
.text-red-100{color:#fee2e2}
.text-red-200{color:#fecaca}
.text-red-600{color:#dc2626}
.text-blue-400{color:#60a5fa}
.text-blue-500{color:#3b82f6}
.text-blue-600{color:#2563eb}
.text-blue-700{color:#1d4ed8}
.text-pink-400{color:#f472b6}
.text-pink-500{color:#ec4899}
.text-pink-600{color:#db2777}
.text-yellow-300{color:#fde047}
.text-yellow-500{color:#eab308}
.text-white\/40{color:rgb(255 255 255/0.4)}

/* === BACKGROUND COLORS === */
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-red-50{background-color:#fef2f2}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-900{background-color:#111827}
.bg-red-100{background-color:#fee2e2}
.bg-red-600{background-color:#dc2626}
.bg-blue-100{background-color:#dbeafe}
.bg-green-400{background-color:#4ade80}
.bg-green-500{background-color:#22c55e}
.bg-yellow-400{background-color:#facc15}
.bg-black\/60{background-color:rgb(0 0 0/0.6)}
.bg-white\/10{background-color:rgb(255 255 255/0.1)}
.bg-white\/20{background-color:rgb(255 255 255/0.2)}
.bg-white\/30{background-color:rgb(255 255 255/0.3)}

/* === GRADIENTS === */
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-red-600{--tw-gradient-from:#dc2626;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(220 38 38/0))}
.via-red-700{--tw-gradient-stops:var(--tw-gradient-from),#b91c1c,var(--tw-gradient-to,rgb(185 28 28/0))}
.to-gray-900{--tw-gradient-to:#111827}

/* === BORDERS === */
.border{border-width:1px}
.border-2{border-width:2px}
.border-l-4{border-left-width:4px}
.border-t{border-top-width:1px}
.border-white{border-color:#fff}
.border-white\/20{border-color:rgb(255 255 255/0.2)}
.border-red-100{border-color:#fee2e2}
.border-gray-700{border-color:#374151}
.border-red-500{border-color:#ef4444}

/* === BORDER RADIUS === */
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.rounded-2xl{border-radius:1rem}

/* === SHADOWS === */
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0/0.05)}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0/0.25)}

/* === RING === */
.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width,0px) var(--tw-ring-offset-color,#fff);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width,0px)) var(--tw-ring-color,rgb(59 130 246/0.5));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.ring-red-200{--tw-ring-color:#fecaca}

/* === TRANSITION === */
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}

/* === HOVER STATES === */
.hover\:bg-green-300:hover{background-color:#86efac}
.hover\:bg-green-600:hover{background-color:#16a34a}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-red-100:hover{background-color:#fee2e2}
.hover\:bg-red-700:hover{background-color:#b91c1c}
.hover\:bg-white:hover{background-color:#fff}
.hover\:bg-yellow-300:hover{background-color:#fde047}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1)}
.hover\:text-blue-300:hover{color:#93c5fd}
.hover\:text-gray-600:hover{color:#4b5563}
.hover\:text-pink-300:hover{color:#f9a8d4}
.hover\:text-red-600:hover{color:#dc2626}
.hover\:text-red-700:hover{color:#b91c1c}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration-line:underline}

/* Dipakai kotak pencarian sparepart (#partSearchInput) di index.html & katalog.html —
   sebelumnya kelasnya dipakai di HTML tapi belum ada definisinya di sini, jadi ring fokus
   gak pernah muncul. Ditambahkan biar aksesibilitas & feedback visual saat fokus jalan. */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(220,38,38,.35)}
.focus\:ring-red-500:focus{box-shadow:0 0 0 2px rgba(239,68,68,.5)}

/* === RESPONSIVE sm (640px) === */
@media(min-width:640px){
  .sm\:block{display:block}
  .sm\:inline{display:inline}
  .sm\:hidden{display:none}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:col-span-2{grid-column:span 2 / span 2}
  .sm\:w-auto{width:auto}
  .sm\:flex-row{flex-direction:row}
}

/* === RESPONSIVE md (768px) === */
@media(min-width:768px){
  .md\:block{display:block}
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
}

/* === CUSTOM === */
.wa-pulse{animation:wa-pulse-anim 2s infinite}
#waFloat{transition:opacity .25s ease,transform .25s ease}
#waFloat.wa-fading{opacity:.4;transform:scale(.82)}
@keyframes wa-pulse-anim{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 0 0 12px rgba(37,211,102,0)}
}
.progress-bar{transition:width 1.2s ease-in-out}

/* ============================================================
   NM-* — Redesign "Motor Honda Matic" mockup (Juli 2026)
   ============================================================ */

/* --- Header --- */
.nm-header-tag{font-size:.8rem;color:#4b5563;text-align:right;line-height:1.3}

/* --- Header nav menu: Motor Baru / Motor Bekas / Sparepart — proper pill
     buttons (bukan plain text link) supaya kelihatan sebagai navigasi, bukan
     inline copy. Desktop: baris di header. Mobile: baris ke-2 yang bisa
     di-scroll horizontal (biar gak numpuk sama tombol WA & logo). --- */
.nm-navlink{display:inline-flex;align-items:center;gap:.35rem;background:#f9fafb;color:#374151;font-weight:700;font-size:.85rem;padding:.55rem 1.05rem;border-radius:9999px;border:1px solid #e5e7eb;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.nm-navlink:hover{background:#fef2f2;color:#dc2626;border-color:#fecaca;transform:translateY(-1px)}
.nm-navlink-sm{font-size:.8rem;padding:.5rem .95rem}
/* PENTING: `.overflow-x-auto` generik TIDAK ke-compile di purged CSS ini
   (cuma ada versi scoped `.nm-promo-card .overflow-x-auto` di bawah, buat
   tabel cicilan) — jadi nav ini gak boleh cuma mengandalkan class
   "overflow-x-auto" di HTML, harus punya overflow-x:auto sendiri di sini.
   Tanpa ini, konten yang overflow gak ke-scroll tapi malah "bocor" keluar
   dan bikin SELURUH HALAMAN scroll horizontal (bug nyata yang sempat live —
   lapor user 2026-07-29: layar HP jadi ada area kosong lebar di kanan). */
.nm-mobile-navrow{scrollbar-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
.nm-mobile-navrow::-webkit-scrollbar{display:none}
/* Di layar lebar (>=1024px) 6 item menu udah pasti muat tanpa perlu di-scroll
   (dikonfirmasi lewat testing), jadi tengahin biar gak keliatan numpuk/nge-
   gantung di kiri sendirian sementara baris logo+WA di atasnya lebar penuh
   justify-between — bikin 2 baris header kelihatan nyambung & sengaja. */
@media(min-width:1024px){
  .nm-mobile-navrow{justify-content:center}
}

/* Nama brand "NAMBO MOTOR" di header — sebelumnya di-sembunyikan total di
   mobile (hidden sm:block) buat ngatasin bug wrap 2 baris. User komplain
   nama brand-nya jadi hilang di HP. Fix yang lebih baik: TETAP tampil di
   semua ukuran layar, tapi ukurannya ngecil otomatis di layar sempit biar
   tetap muat satu baris bareng tombol WA (yang di mobile juga udah dipendekin
   jadi cuma "WA"). Dites lolos scrollWidth===clientWidth di 320-430px. */
.nm-logo-text{font-size:1.125rem;line-height:1.2;white-space:nowrap}
@media(max-width:400px){
  .nm-logo-text{font-size:.85rem}
}
@media(min-width:401px) and (max-width:639px){
  .nm-logo-text{font-size:1rem}
}

/* Anchor targets for the header nav links — offset so the sticky header
   (selalu 2 baris: logo+WA, lalu baris menu di bawahnya, di semua ukuran
   layar) gak nutupin judul section pas di-scroll-to lewat klik menu. */
#varian,#motor-bekas,#booking-service,#promo,#katalog-sparepart{scroll-margin-top:112px}

/* --- Badge pill --- */
.nm-badge{display:inline-block;background:#dc2626;color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.4rem 1rem;border-radius:9999px}

/* --- Katalog page: model-line sub-heading badge (dipakai buat kelompokkan
     motor per line — Beat, Scoopy, Vario, dst — di dalam kategori Matic) --- */
.nm-katalog-line-badge{display:inline-block;background:#fee2e2;color:#b91c1c;font-size:.8rem;font-weight:800;padding:.3rem .9rem;border-radius:9999px}
.nm-tradein-banner{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.25rem 1.5rem;border-radius:1.5rem;background:linear-gradient(120deg,#e11d48 0%,#fb923c 55%,#fbbf24 100%);box-shadow:0 16px 34px -12px rgba(225,29,72,.55)}
.nm-tradein-icon{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;flex-shrink:0;border-radius:9999px;background:rgba(255,255,255,.28);font-size:1.6rem;box-shadow:0 6px 14px -5px rgba(0,0,0,.25)}
.nm-tradein-text{font-size:1rem;font-weight:600;color:#fff;flex:1;min-width:220px;text-shadow:0 1px 3px rgba(0,0,0,.12)}
.nm-tradein-text strong{color:#fff;font-size:1.1rem;display:inline-block}
.nm-tradein-btn{display:inline-block;background:#fff;color:#16a34a;font-weight:800;font-size:.85rem;padding:.75rem 1.6rem;border-radius:9999px;white-space:nowrap;box-shadow:0 8px 18px -6px rgba(0,0,0,.3);transition:background .15s ease,transform .15s ease}
.nm-tradein-btn:hover{background:#f0fdf4;transform:translateY(-1px)}

/* --- Pill buttons --- */
.nm-btn{display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;padding:.9rem 1.75rem;border-radius:9999px;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.nm-btn:hover{transform:translateY(-1px)}
.nm-btn-red{background:#dc2626;color:#fff;box-shadow:0 8px 18px -6px rgba(220,38,38,.55)}
.nm-btn-red:hover{background:#b91c1c}
.nm-btn-outline{background:#fff;color:#dc2626;border:2px solid #dc2626}
.nm-btn-outline:hover{background:#fef2f2}
.nm-btn-yellow{display:inline-flex;align-items:center;gap:.5rem;background:#facc15;color:#111827;font-weight:800;font-size:1rem;padding:1rem 2.25rem;border-radius:9999px;box-shadow:0 10px 22px -8px rgba(250,204,21,.7);transition:transform .15s ease}
.nm-btn-yellow:hover{transform:translateY(-1px);background:#fde047}

/* --- Booking Servis form --- */
.nm-booking-card{border-radius:1.5rem;padding:1.5rem;background:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.18);border:2px solid #fee2e2}
.nm-booking-label{display:block;font-size:.75rem;font-weight:700;color:#374151;margin-bottom:.35rem}
.nm-booking-card input,.nm-booking-card select{background:#fff;color:#111827}
.nm-booking-card input:focus,.nm-booking-card select:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}

/* --- Trade-in banner (Gen Z style, booking-service section) --- */
.nm-tradein-genz{background:linear-gradient(135deg,#7c3aed 0%,#ec4899 50%,#f97316 100%);border-radius:1.5rem;padding:1.75rem 1.5rem;text-align:center;box-shadow:0 14px 30px -10px rgba(124,58,237,.45)}
.nm-tradein-genz-icon{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin:0 auto .75rem;border-radius:9999px;background:rgba(255,255,255,.22);font-size:2rem;box-shadow:0 6px 16px -4px rgba(0,0,0,.25)}
.nm-tradein-genz-badge{display:inline-block;background:rgba(255,255,255,.25);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.4rem 1rem;border-radius:9999px;margin-bottom:.75rem}
.nm-tradein-genz-title{color:#fff;font-weight:900;font-size:1.25rem;line-height:1.3;margin-bottom:.5rem}
.nm-tradein-genz-text{color:rgba(255,255,255,.92);font-size:.875rem;line-height:1.5;margin-bottom:1.25rem;max-width:32rem;margin-left:auto;margin-right:auto}
.nm-tradein-genz-btn{display:inline-block;background:#fff;color:#7c3aed;font-weight:800;font-size:.85rem;padding:.85rem 1.75rem;border-radius:9999px;box-shadow:0 8px 18px -6px rgba(0,0,0,.25);transition:transform .15s ease}
.nm-tradein-genz-btn:hover{transform:translateY(-2px) scale(1.02);background:#fdf4ff}

/* --- Hero --- */
/* background:#fff dihapus di sini (redesign v4 "One Continuous Gradient",
   2026-07-29 — lihat catatan lengkap di bawah dekat body{}) — section ini
   sekarang transparan, gradient body kelihatan tembus langsung. */
.nm-hero{position:relative;overflow:hidden;padding:3.5rem 0 3rem}
.nm-hero-eyebrow{color:#dc2626;font-weight:800;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.nm-hero-title{font-weight:900;line-height:1.02;font-size:2.75rem;color:#111827}
.nm-hero-title .nm-red{color:#dc2626;display:block}
.nm-hero-price{font-size:1.25rem;color:#111827;margin-top:.25rem}
.nm-hero-price strong{color:#dc2626;font-weight:900;font-size:1.6rem}
.nm-hero-media{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}
.nm-hero-shape{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center}
.nm-hero-shape::before{content:"";position:absolute;width:88%;height:88%;background:linear-gradient(135deg,#ef4444 0%,#b91c1c 55%,#7f1d1d 100%);clip-path:polygon(15% 0%,100% 0%,100% 78%,85% 100%,0% 100%,0% 22%);opacity:.96}
.nm-hero-shape::after{content:"";position:absolute;width:88%;height:88%;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 2px,transparent 2px,transparent 14px);clip-path:polygon(15% 0%,100% 0%,100% 78%,85% 100%,0% 100%,0% 22%)}
.nm-hero-media img{position:relative;z-index:1;max-width:88%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))}
.nm-hero-caption{position:relative;z-index:1;margin-top:1rem;color:#fff;background:#111827;font-size:.8rem;font-weight:700;padding:.4rem 1rem;border-radius:9999px}

/* --- Social proof row --- */
.nm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:center}
.nm-stat-plain{color:#111827}
.nm-stat-plain .nm-stat-num{font-size:1.4rem;font-weight:900}
.nm-stat-plain .nm-stat-label{font-size:.8rem;color:#6b7280}
.nm-stat-pill{background:#dc2626;color:#fff;border-radius:1.25rem;padding:1.1rem .5rem}
.nm-stat-pill .nm-stat-num{font-size:1.4rem;font-weight:900}
.nm-stat-pill .nm-stat-label{font-size:.8rem;opacity:.9}

/* --- Testimonial band --- */
.nm-testimonial-band{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 60%,#7f1d1d 100%);padding:3rem 0}
.nm-testimonial-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:1rem;padding:1.25rem;backdrop-filter:blur(2px)}
.nm-testimonial-card p{color:#fff;font-size:.9rem;font-style:italic;line-height:1.5}
.nm-testimonial-card .nm-t-author{color:#fecaca;font-size:.78rem;font-weight:700;margin-top:.75rem}
.nm-t-authorrow{display:flex;align-items:center;gap:.6rem;margin-top:.75rem}
.nm-t-authorrow .nm-t-author{margin-top:0}
.nm-t-avatar{width:2rem;height:2rem;border-radius:9999px;object-fit:cover;flex-shrink:0}
.nm-t-time{color:rgba(255,255,255,.65);font-size:.7rem;margin-top:.1rem}
.nm-t-alllink{display:inline-block;color:#fff;font-weight:700;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:.15rem}
.nm-t-alllink:hover{opacity:.85}

/* --- Varian banner --- */
.nm-varian-banner{background:linear-gradient(120deg,#dc2626 0%,#991b1b 100%);padding:2.75rem 1rem;text-align:center}
.nm-varian-banner h2{color:#fff;font-weight:900;font-size:2rem}
.nm-varian-cta{display:inline-block;margin-top:2rem;background:#dc2626;color:#fff;font-weight:700;font-size:.85rem;padding:.75rem 1.5rem;border-radius:9999px}

/* --- Motor card polish --- */
.nm-tab{background:#e5e7eb;color:#374151}
.nm-tab.is-active{background:#dc2626;color:#fff}
/* .motor-card sebelumnya gak punya background sendiri — cuma keliatan putih
   karena numpang ke background putih section #varian di belakangnya. Begitu
   #varian ikut ditransparanin (redesign v4), kartu ini WAJIB punya background
   eksplisit sendiri, kalau enggak foto/harga motor bakal transparan nembus
   ke gradient di belakangnya dan keliatan rusak/gak jelas. */
.motor-card{background:#fff}

/* --- Promo section --- */
/* background:#fff dihapus (redesign v4) — teks di section ini semua sudah
   warna gelap (#111827/#374151), aman langsung di atas gradient pastel. */
.nm-promo{padding:4rem 1rem;text-align:center}
.nm-promo h2{font-weight:900;font-size:2.5rem;color:#111827}
.nm-promo h2 .nm-red{color:#dc2626}
.nm-promo-sub{color:#374151;font-size:1.05rem;margin-top:.5rem}
.nm-promo-slot{color:#111827;font-weight:700;font-size:1.1rem;margin:2rem 0 1.5rem}
.nm-promo-slot strong{color:#dc2626}
.nm-progress-hidden{max-width:26rem;margin:0 auto;opacity:0;height:0;overflow:hidden}

/* --- Lokasi decorative shape --- */
.nm-lokasi-shape-wrap{position:relative}
.nm-lokasi-shape{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ef4444 0%,#991b1b 70%,#7f1d1d 100%);clip-path:polygon(0 0,100% 0,60% 100%,0% 100%);opacity:.12;z-index:0;border-radius:1rem;pointer-events:none}

/* --- Footer redesign --- */
.nm-footer{position:relative;background:#3a3152;color:#fff;overflow:hidden;padding:3.5rem 1rem 2rem}
.nm-footer::before{content:"";position:absolute;top:0;right:0;width:60%;height:100%;background:linear-gradient(135deg,#7d6a9e 0%,#3a3152 70%);clip-path:polygon(35% 0,100% 0,100% 100%,0% 100%);opacity:.9;z-index:0}
.nm-footer-inner{position:relative;z-index:1}
.nm-footer-cta{display:inline-flex;align-items:center;gap:.5rem;background:#22c55e;color:#fff;font-weight:800;font-size:.85rem;padding:.7rem 1.4rem;border-radius:9999px;margin-top:.75rem}
.nm-footer-cta:hover{background:#16a34a}

/* --- Simulasi kredit modal: scrollable panel so content (incl. color
   picker) never gets clipped off-screen with no way to reach it --- */
.nm-modal-panel{max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* --- Cek Stok Sparepart: hasil pencarian tampil ~5 baris lalu scroll,
   supaya daftar panjang tidak mendorong konten di bawahnya --- */
.nm-part-results{max-height:520px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:.25rem}

/* --- Responsive: desktop layout for hero/stats --- */
@media(min-width:768px){
  .nm-hero-title{font-size:3.75rem}
  .nm-stats{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   Gen-Z redesign v1: vibrant red page background + colorful gradient
   buttons (requested by user, 18 Jul 2026)
   ============================================================ */

/* ============================================================
   Gen-Z redesign v2 "Neon Brights": full multi-color block palette
   (yellow/pink/cyan/green), red demoted to a small accent only —
   requested by user with a reference image, 18 Jul 2026. Overrides
   the v1 rules directly above (kept for history/rollback reference).
   ============================================================ */

/* ============================================================
   Redesign v3 "Soft Pastel Aura" — REVISI, 2026-07-29 (sore, susulan):
   percobaan pertama (radial-blob + background-attachment:fixed, di atas
   ini diganti) hasilnya cuma keliatan pastel di area viewport pertama —
   karena "fixed" bikin background nempel ke layar, bukan ke halaman,
   jadi gradasinya gak "ngalir" turun sepanjang halaman yang panjang.
   User kirim referensi ke-2 yang lebih jelas: gradient halus SATU ARAH
   (bukan mesh blob) yang beneran ngikutin panjang HALAMAN dari atas ke
   bawah — ungu/lavender di atas → pink → hijau mint → biru langit →
   kuning/peach di bawah. Fix: pakai linear-gradient 180deg biasa, dan
   background-attachment DIHAPUS (default "scroll", ikut tinggi halaman,
   bukan fixed ke viewport) — supaya di halaman panjang (index.html) warna
   beneran berubah pelan-pelan sesuai posisi scroll, bukan berhenti di
   pola yang sama. Berlaku otomatis di index.html & katalog.html sekaligus. */
body{
  background:linear-gradient(180deg,
    #e4d8f5 0%,
    #f1d9ea 20%,
    #d8f0e2 42%,
    #d2e6f8 62%,
    #fbe7ca 85%,
    #fdf1da 100%);
}

/* ============================================================
   Redesign v4 "One Continuous Gradient" — 2026-07-29 (susulan lagi hari yang
   sama). User kirim 2 referensi: (1) mockup landing page "Luné" yang gradient-
   nya ngalir mulus SATU WARNA terus dari atas sampai bawah TANPA ADA blok putih
   yang motong-motong, dan (2) screenshot situs sendiri yang jadinya malah
   "belang-belang" — kotak-kotak putih/confetti "floating card" (v2/v3 di atas)
   masing-masing punya margin & rounded corner sendiri, jadi keliatan kayak
   potongan-potongan kartu terpisah dengan celah gradient di antaranya, BUKAN
   satu gradasi mulus. Diperparah bug tambahan: `.nm-katalog-card` yang pakai
   `margin:1.25rem 1rem` (fixed, bukan auto) BENTROK sama `max-w-6xl mx-auto`
   di HTML-nya sendiri, bikin card-nya nempel ke kiri gak center ("nyamping")
   di layar lebar.

   FIX: SEMUA treatment "floating card" (background putih/confetti + margin +
   border-radius + box-shadow) di section-section besar berikut ini DICABUT
   TOTAL — section-section ini sekarang transparan penuh, gradient body
   kelihatan tembus terus-menerus tanpa jeda: .nm-hero, #varian, #social-proof,
   .nm-promo, .nm-katalog-card. Beberapa section lain yang HTML-nya pakai class
   Tailwind `bg-white`/`bg-gray-50` langsung (bukan lewat rule di atas) juga
   di-override transparan di sini: #booking-service, #cari-part, #motor-bekas,
   #lokasi, #faq, #tips (pakai selector ID biar spesifisitasnya otomatis
   ngalahin class .bg-white/.bg-gray-50 tanpa perlu edit HTML-nya).

   Yang TETAP punya warna sendiri (bukan bagian dari floating-card system,
   background-nya sengaja/vivid, cuma dicabut margin+rounded+shadow-nya biar
   nyambung full-bleed, gak lagi jadi "pulau" dengan celah di kiri-kanan):
   .nm-varian-banner (cyan), .nm-testimonial-band (ungu), .nm-footer (gelap).

   PENTING: kartu/elemen KECIL di dalam section-section yang sekarang transparan
   ini WAJIB tetap punya background putih/terang sendiri biar teks & foto tetap
   kebaca (lihat .motor-card di atas yang baru ditambahin, plus .nm-bekas-card,
   .nm-promo-card, .nm-booking-card, kartu FAQ, kartu tips — yang semuanya udah
   punya background eksplisit dari sebelumnya, jadi aman). */
#booking-service,#cari-part,#motor-bekas,#social-proof,#lokasi,#faq,#tips,
.nm-hero,#varian,.nm-promo{
  background-color:transparent;background-image:none;
  margin:0;border-radius:0;box-shadow:none;
}
/* .nm-katalog-card dipisah dari rule di atas — elemen ini pakai class Tailwind
   "mx-auto" (`margin-left:auto;margin-right:auto`) buat nge-center dirinya
   sendiri (beda dari section lain yang full-width, lebar dikontrol lewat DIV
   ANAK di dalamnya, bukan diri sendiri). Kalau ikut kena `margin:0` shorthand
   kayak section lain, margin-left/right:auto-nya ke-timpa jadi 0 — akibatnya
   card nempel mepet ke KIRI doang di layar lebar, gak center (bug "nyamping"
   yang dilaporin user, sempat ke-generate gara-gara fix ini sendiri pas
   ditulis pertama kali). Makanya di sini cuma margin atas/bawah yang di-reset
   ke 0, margin kiri-kanan DIBIARIN warisan dari .mx-auto (gak disentuh). */
.nm-katalog-card{
  background-color:transparent;background-image:none;
  margin-top:0;margin-bottom:0;border-radius:0;box-shadow:none;
}
.nm-varian-banner,.nm-testimonial-band,.nm-footer{margin:0;border-radius:0;box-shadow:none}
/* Kotak pencarian sparepart real-time & hasilnya (dipakai di index.html DAN
   katalog.html, id sama) WAJIB tetap putih — bukan bagian dari gradient,
   biar area paling sering dibaca/diketik tetap tenang & jelas. */
#partSearchInput,#partResultsWrap{background-color:#fff}
header.sticky{box-shadow:0 2px 14px rgba(244,114,182,.3)}

/* Social icon buttons di footer (Instagram/TikTok/Facebook) — sebelumnya
   cuma teks "IG"/"TikTok"/"FB" biasa, user minta dibikin lebih proper kayak
   tombol ikon beneran. Lingkaran semi-transparan di atas footer gelap,
   ke-highlight warna brand masing-masing pas di-hover. */
.nm-social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.12);color:#fff;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.nm-social-btn:hover{transform:translateY(-2px)}
.nm-social-ig:hover{background:linear-gradient(135deg,#e8a598 0%,#d98a95 25%,#c97ba0 50%,#b571ab 75%,#9c6bb0 100%);box-shadow:0 6px 14px rgba(185,110,150,.4)}
.nm-social-tiktok:hover{background:#463c5e;box-shadow:0 6px 14px rgba(70,60,94,.5)}
.nm-social-fb:hover{background:#4f86ab;box-shadow:0 6px 14px rgba(79,134,171,.45)}

/* Recolor the decorative full-width accent bands so each one reads as
   its own bright "block", like the reference — cyan banner, purple
   testimonial band, pink hero shape. Red is no longer used for any of
   these big blocks, only kept as a small accent on price text/logo. */
.nm-hero-shape::before{background:linear-gradient(135deg,#f472b6 0%,#db2777 55%,#a21caf 100%)}
.nm-varian-banner{background:linear-gradient(120deg,#3d8a99 0%,#2c6b77 100%)}
.nm-testimonial-band{background:linear-gradient(135deg,#8a72b5 0%,#7d6a9e 60%,#5f4f80 100%)}
.nm-footer::before{background:linear-gradient(135deg,#7d6a9e 0%,#3a3152 70%)}

/* Colorful gradient buttons everywhere (overrides the solid Tailwind
   colors compiled above — WA/green buttons use a lime→cyan gradient,
   CTA/tab/badge buttons use a pink→orange→yellow gradient with no
   red in it, matching the "red is just a small accent" direction —
   with a lift-on-hover micro-interaction). */
.bg-green-500{background:linear-gradient(135deg,#4ade80 0%,#22d3ee 100%);box-shadow:0 6px 16px rgba(74,222,128,.35)}
.hover\:bg-green-600:hover{background:linear-gradient(135deg,#22c55e 0%,#0891b2 100%);transform:translateY(-2px) scale(1.02);box-shadow:0 10px 22px rgba(34,211,238,.4)}

.bg-red-600{background:linear-gradient(135deg,#f472b6 0%,#fb923c 55%,#facc15 100%);box-shadow:0 6px 16px rgba(244,114,182,.35)}
.hover\:bg-red-700:hover{background:linear-gradient(135deg,#ec4899 0%,#f97316 55%,#eab308 100%);transform:translateY(-2px) scale(1.02);box-shadow:0 10px 22px rgba(250,204,21,.4)}

.tab-btn{transition:transform .15s ease,background .2s ease,box-shadow .2s ease}
.tab-btn:hover{transform:translateY(-1px)}

.progress-bar.bg-yellow-400{background:linear-gradient(90deg,#facc15,#4ade80)}

.nm-footer-cta{background:linear-gradient(135deg,#4ade80,#22d3ee)}
.nm-footer-cta:hover{background:linear-gradient(135deg,#22c55e,#0891b2)}

/* These 3 use their OWN plain custom classes (not the Tailwind
   bg-red-600 utility above), so they need their own override too —
   the hero's "Promo" badge, main hero CTA button, and its outline
   sibling button. */
.nm-badge{background:linear-gradient(135deg,#ec4899,#fb923c)}
.nm-btn-red{background:linear-gradient(135deg,#f472b6 0%,#fb923c 55%,#facc15 100%);box-shadow:0 8px 18px -6px rgba(244,114,182,.55)}
.nm-btn-red:hover{background:linear-gradient(135deg,#ec4899 0%,#f97316 55%,#eab308 100%)}
.nm-btn-outline{color:#db2777;border-color:#db2777}
.nm-btn-outline:hover{background:#fdf2f8}
.nm-stat-pill{background:linear-gradient(135deg,#3d8a99,#2c6b77)}
.nm-varian-cta{background:linear-gradient(135deg,#f472b6,#fb923c)}
.nm-lokasi-shape{background:linear-gradient(135deg,#f472b6 0%,#a21caf 70%,#6b21a8 100%)}

/* --- FIFGROUP credit promo tables (hero section, 18 Jul 2026 — v2
   restyle, 18 Jul 2026: two distinct "prize card" panels instead of
   plain corporate tables, matching the Neon Brights palette) --- */
.nm-promo-section-badge{background:linear-gradient(135deg,#a855f7,#6366f1)}
.nm-promo-table-title{background:linear-gradient(135deg,#db2777,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}

.nm-promo-tables{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:stretch;position:relative}
@media(min-width:768px){
  .nm-promo-tables{grid-template-columns:1fr auto 1fr;gap:1.5rem}
}

.nm-promo-atau{display:flex;align-items:center;justify-content:center;padding:.5rem 0}
.nm-promo-atau span{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:9999px;background:linear-gradient(135deg,#facc15,#fb923c);color:#7c2d12;font-weight:900;font-size:.75rem;letter-spacing:.03em;box-shadow:0 8px 18px -4px rgba(251,146,60,.6);flex-shrink:0}

.nm-promo-card{border-radius:1.5rem;padding:1.25rem;background:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.18);border:2px solid transparent}
.nm-promo-card-a{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#22d3ee,#0ea5e9) border-box}
.nm-promo-card-b{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#f472b6,#db2777) border-box}

.nm-promo-card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.nm-promo-card-icon{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;font-size:1.25rem;flex-shrink:0}
.nm-promo-card-a .nm-promo-card-icon{background:linear-gradient(135deg,#22d3ee,#0ea5e9)}
.nm-promo-card-b .nm-promo-card-icon{background:linear-gradient(135deg,#f472b6,#db2777)}
.nm-promo-card-title{font-weight:800;font-size:1.05rem;color:#111827;line-height:1.2}
.nm-promo-card-sub{font-size:.75rem;color:#6b7280;margin-top:.1rem}

.nm-promo-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.72rem;background:#fff;border-radius:.85rem}
.nm-promo-table th,.nm-promo-table td{padding:.5rem .4rem;white-space:nowrap;text-align:center;border-bottom:1px solid #f1f5f9}
.nm-promo-card-a .nm-promo-table thead th{background:linear-gradient(135deg,#22d3ee,#0891b2);color:#fff}
.nm-promo-card-b .nm-promo-table thead th{background:linear-gradient(135deg,#f472b6,#db2777);color:#fff}
.nm-promo-table thead th{font-weight:700;text-transform:uppercase;font-size:.62rem;letter-spacing:.03em;position:sticky;top:0}
.nm-promo-table td:first-child,.nm-promo-table th:first-child{text-align:left;position:sticky;left:0;background:#fff;box-shadow:2px 0 4px -2px rgba(0,0,0,.08)}
.nm-promo-card-a .nm-promo-table th:first-child{background:#0891b2}
.nm-promo-card-b .nm-promo-table th:first-child{background:#db2777}
.nm-promo-table td:first-child{font-weight:700;color:#111827}
.nm-promo-table tbody tr:nth-child(even) td{background:#f8fafc}
.nm-promo-card-a .nm-promo-table tbody tr:nth-child(even) td:first-child{background:#ecfeff}
.nm-promo-card-b .nm-promo-table tbody tr:nth-child(even) td:first-child{background:#fdf2f8}
.nm-promo-table tbody tr:hover td{background:#fef9c3}
.nm-promo-table tbody tr:last-child td{border-bottom:none}
.nm-promo-table tbody td:not(:first-child):not(:nth-child(2)){font-weight:800;color:#059669}
.nm-promo-table thead tr:first-child th:first-child{border-top-left-radius:.85rem}
.nm-promo-table thead tr:first-child th:last-child{border-top-right-radius:.85rem}
.nm-promo-table tbody tr:last-child td:first-child{border-bottom-left-radius:.85rem}
.nm-promo-table tbody tr:last-child td:last-child{border-bottom-right-radius:.85rem}

/* fix: grid item + intrinsic table width overflowed the whole page on mobile
   because .overflow-x-auto isn't compiled into this purged-Tailwind file, and
   grid items default to min-width:auto so the card grew past its 1fr track. */
.nm-promo-tables > *{min-width:0}
.nm-promo-card .overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
.nm-promo-table{min-width:420px}
.nm-promo-scroll-hint{display:block;text-align:right;font-size:.68rem;color:#9ca3af;margin:-.5rem 0 .5rem;font-weight:600}
@media (min-width:768px){.nm-promo-scroll-hint{display:none}}

/* hero photo: swapped the plain white product-photo JPG for a background-removed
   PNG cutout so the colorful .nm-hero-shape backdrop shows through instead of
   being hidden behind a big white rectangle; caption moved out of the image
   pixels into real styled HTML so it matches the site's badge system. */
.nm-hero-media img{max-width:80%;filter:drop-shadow(0 20px 24px rgba(0,0,0,.28))}
.nm-hero-photo-tag{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;margin-top:.75rem;padding:.55rem 1.4rem;border-radius:9999px;background:linear-gradient(135deg,#fff 0%,#fdf2f8 100%);box-shadow:0 10px 22px -8px rgba(0,0,0,.25);border:2px solid #fff}
.nm-hero-photo-tag-title{font-weight:800;font-size:.85rem;color:#111827;line-height:1.1}
.nm-hero-photo-tag-sub{font-size:.7rem;color:#6b7280;font-weight:600;line-height:1.1}

/* mobile hero text (badge/title/price/buttons) was flush-left against the card
   padding, looking lopsided under the centered photo below it — center it on
   mobile only; desktop keeps the left-aligned side-by-side layout. */
@media (max-width:767px){
  .nm-hero .max-w-6xl > .flex-1:first-child{text-align:center}
  .nm-hero .max-w-6xl > .flex-1:first-child .flex{justify-content:center}
}

/* Trade-in banner (hero) — on mobile the row layout left the button squeezed
   next to wrapped text; stack it into a clean centered card instead. */
@media (max-width:640px){
  .nm-tradein-banner{flex-direction:column;text-align:center;padding:1.5rem 1.25rem;gap:.85rem}
  .nm-tradein-text{min-width:0;text-align:center}
  .nm-tradein-btn{width:100%;text-align:center}
}

/* Motor Bekas section — amber/gold accent so used-unit cards read as a
   distinct, intentional category rather than looking like new-motor cards. */
.nm-bekas-badge{background:linear-gradient(135deg,#f59e0b,#d97706)}
.nm-bekas-card{background:#fff;border-radius:1rem;overflow:hidden;border:2px solid #fde68a;box-shadow:0 8px 20px -8px rgba(217,119,6,.25);transition:box-shadow .2s,transform .2s}
.nm-bekas-card:hover{box-shadow:0 14px 28px -10px rgba(217,119,6,.35);transform:translateY(-2px)}
.nm-bekas-photo{height:11rem;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#fffbeb,#fffbeb 10px,#fef3c7 10px,#fef3c7 20px);color:#b45309;font-size:.75rem;font-weight:700;overflow:hidden}
.nm-bekas-photo img{width:100%;height:100%;object-fit:cover}
.nm-bekas-tag{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .65rem;border-radius:9999px}
.nm-bekas-nego{display:inline-block;background:#fef3c7;color:#92400e;font-size:.68rem;font-weight:800;padding:.2rem .55rem;border-radius:9999px;border:1px solid #fde68a}