/* ==========================================================================
   File gabungan: tailwind-compiled.css + main.css + design-polish.css
   Digabung jadi satu file supaya browser cuma perlu 1 request buat semua
   utility class + styling utama tema, bukan 3 request terpisah — bagian
   dari perbaikan kecepatan loading. File asli TETAP ADA di folder ini
   (tidak dihapus) buat referensi/maintenance, tapi yang di-load ke
   browser sekarang cuma versi gabungan ini.
   ========================================================================== */

/* ===== Qoobiz Compiled CSS ===== */
/* Digenerate otomatis dari class yang benar-benar dipakai di tema — TIDAK butuh CDN eksternal. */
*{box-sizing:border-box;margin:0;}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#0f172a;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;background:none;border:none;}
input,select,textarea{font-family:inherit;font-size:inherit;}
ul,ol{list-style:none;}
table{border-collapse:collapse;width:100%;}
/* ---- Base utilities ---- */
.-right-1{right:-0.25rem;}
.-top-1{top:-0.25rem;}
.-top-3{top:-0.75rem;}
.-top-6{top:-1.5rem;}
.-translate-y-1\/2{transform:translateY(-50%);}
.absolute{position:absolute;}
.backdrop-blur{backdrop-filter:blur(8px);}
.bg-amber-50{background-color:#fffbeb;}
.bg-blue-100{background-color:#dbeafe;}
.bg-blue-50{background-color:#eff6ff;}
.bg-blue-50\/40{background-color:rgb(239 246 255 / 0.4);}
.bg-blue-500{background-color:#3b82f6;}
.bg-blue-600{background-color:#2563eb;}
.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-from, transparent), var(--tw-to, transparent));}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-from, transparent), var(--tw-to, transparent));}
.bg-green-50{background-color:#f0fdf4;}
.bg-orange-500{background-color:#f97316;}
.bg-purple-50{background-color:#faf5ff;}
.bg-red-50{background-color:#fef2f2;}
.bg-rose-500{background-color:#f43f5e;}
.bg-slate-100{background-color:#f1f5f9;}
.bg-slate-200{background-color:#e2e8f0;}
.bg-slate-50{background-color:#f8fafc;}
.bg-slate-50\/70{background-color:rgb(248 250 252 / 0.7);}
.bg-slate-800{background-color:#1e293b;}
.bg-slate-900{background-color:#0f172a;}
.bg-white{background-color:#ffffff;}
.bg-white\/10{background-color:rgb(255 255 255 / 0.1);}
.bg-white\/95{background-color:rgb(255 255 255 / 0.95);}
.block{display:block;}
.border{border-width:1px;border-style:solid;border-color:#e2e8f0;}
.border-2{border-width:2px;border-style:solid;border-color:#e2e8f0;}
.border-amber-100{border-color:#fef3c7;}
.border-b{border-bottom-width:1px;border-style:solid;border-color:#e2e8f0;}
.border-b-2{border-bottom-width:2px;border-style:solid;border-color:#e2e8f0;}
.border-blue-600{border-color:#2563eb;}
.border-dashed{border-style:dashed;}
.border-red-100{border-color:#fee2e2;}
.border-red-200{border-color:#fecaca;}
.border-slate-100{border-color:#f1f5f9;}
.border-slate-200{border-color:#e2e8f0;}
.border-slate-300{border-color:#cbd5e1;}
.border-slate-50{border-color:#f8fafc;}
.border-slate-800{border-color:#1e293b;}
.border-t{border-top-width:1px;border-style:solid;border-color:#e2e8f0;}
.border-transparent{border-color:transparent;}
.border-white\/20{border-color:rgb(255 255 255 / 0.2);}
.border-white\/40{border-color:rgb(255 255 255 / 0.4);}
.capitalize{text-transform:capitalize;}
.col-span-2{grid-column: span 2 / span 2;}
.col-span-full{grid-column: 1 / -1;}
.cursor-pointer{cursor:pointer;}
.flex{display:flex;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.flex-shrink-0{flex-shrink:0;}
.flex-wrap{flex-wrap:wrap;}
.font-bold{font-weight:700;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.from-blue-50\/50{--tw-from:rgb(239 246 255 / 0.5);}
.from-blue-50\/60{--tw-from:rgb(239 246 255 / 0.6);}
.from-blue-50\/70{--tw-from:rgb(239 246 255 / 0.7);}
.from-blue-700{--tw-from:#1d4ed8;}
.from-blue-800{--tw-from:#1e40af;}
.from-blue-900{--tw-from:#1e3a8a;}
.gap-1{gap:0.25rem;}
.gap-1\.5{gap:0.375rem;}
.gap-10{gap:2.5rem;}
.gap-2{gap:0.5rem;}
.gap-2\.5{gap:0.625rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-7{gap:1.75rem;}
.gap-8{gap:2rem;}
.gap-x-6{column-gap:1.5rem;}
.gap-y-3{row-gap:0.75rem;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr));}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.h-0\.5{height:0.125rem;}
.h-10{height:2.5rem;}
.h-11{height:2.75rem;}
.h-12{height:3rem;}
.h-14{height:3.5rem;}
.h-16{height:4rem;}
.h-20{height:5rem;}
.h-24{height:6rem;}
.h-3\.5{height:0.875rem;}
.h-32{height:8rem;}
.h-4{height:1rem;}
.h-40{height:10rem;}
.h-44{height:11rem;}
.h-48{height:12rem;}
.h-5{height:1.25rem;}
.h-6{height:1.5rem;}
.h-64{height:16rem;}
.h-7{height:1.75rem;}
.h-8{height:2rem;}
.h-96{height:24rem;}
.h-\[520px\]{height:520px;}
.h-px{height:1px;}
.hidden{display:none;}
.inline-block{display:inline-block;}
.inline-flex{display:inline-flex;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.leading-relaxed{line-height:1.625;}
.leading-tight{line-height:1.25;}
.left-3{left:0.75rem;}
.left-4{left:1rem;}
.left-5{left:1.25rem;}
.left-7{left:1.75rem;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}
.max-w-4xl{max-width:56rem;}
.max-w-\[1280px\]{max-width:1280px;}
.max-w-md{max-width:28rem;}
.max-w-none{max-width:none;}
.max-w-xl{max-width:36rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-1\.5{margin-bottom:0.375rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-12{margin-bottom:3rem;}
.mb-14{margin-bottom:3.5rem;}
.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-7{margin-bottom:1.75rem;}
.mb-8{margin-bottom:2rem;}
.min-w-0{min-width:0px;}
.mt-0\.5{margin-top:0.125rem;}
.mt-1{margin-top:0.25rem;}
.mt-10{margin-top:2.5rem;}
.mt-14{margin-top:3.5rem;}
.mt-16{margin-top:4rem;}
.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;}
.mx-auto{margin-left:auto;margin-right:auto;}
.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}
.my-4{margin-top:1rem;margin-bottom:1rem;}
.outline-none{outline:2px solid transparent;outline-offset:2px;}
.overflow-hidden{overflow:hidden;}
.overflow-y-auto{overflow-y:auto;}
.p-10{padding:2.5rem;}
.p-2{padding:0.5rem;}
.p-3\.5{padding:0.875rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p-7{padding:1.75rem;}
.pb-10{padding-bottom:2.5rem;}
.pb-14{padding-bottom:3.5rem;}
.pb-2{padding-bottom:0.5rem;}
.pb-3{padding-bottom:0.75rem;}
.pb-4{padding-bottom:1rem;}
.pb-6{padding-bottom:1.5rem;}
.pl-12{padding-left:3rem;}
.pl-14{padding-left:3.5rem;}
.pl-3\.5{padding-left:0.875rem;}
.pr-32{padding-right:8rem;}
.pr-4{padding-right:1rem;}
.pr-9{padding-right:2.25rem;}
.pt-14{padding-top:3.5rem;}
.pt-4{padding-top:1rem;}
.pt-6{padding-top:1.5rem;}
.pt-8{padding-top:2rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.relative{position:relative;}
.right-1\/2{right:50%;}
.right-2{right:0.5rem;}
.right-4{right:1rem;}
.rounded{border-radius:0.25rem;}
.rounded-2xl{border-radius:1rem;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.5rem;}
.rounded-md{border-radius:0.375rem;}
.rounded-tl-none{border-top-left-radius:0;}
.rounded-tr-none{border-top-right-radius:0;}
.rounded-xl{border-radius:0.75rem;}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);}
.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-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem;}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.375rem;}
.space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem;}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.625rem;}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem;}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem;}
.space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem;}
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem;}
.space-y-7 > :not([hidden]) ~ :not([hidden]){margin-top:1.75rem;}
.space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top:2rem;}
.sticky{position:sticky;}
.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-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-amber-600{color:#d97706;}
.text-amber-700{color:#b45309;}
.text-blue-100{color:#dbeafe;}
.text-blue-200{color:#bfdbfe;}
.text-blue-600{color:#2563eb;}
.text-blue-700{color:#1d4ed8;}
.text-center{text-align:center;}
.text-green-500{color:#22c55e;}
.text-green-600{color:#16a34a;}
.text-left{text-align:left;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-purple-600{color:#9333ea;}
.text-red-500{color:#ef4444;}
.text-red-600{color:#dc2626;}
.text-right{text-align:right;}
.text-slate-300{color:#cbd5e1;}
.text-slate-400{color:#94a3b8;}
.text-slate-500{color:#64748b;}
.text-slate-600{color:#475569;}
.text-slate-700{color:#334155;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-white{color:#ffffff;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.to-blue-600{--tw-to:#2563eb;}
.to-blue-700{--tw-to:#1d4ed8;}
.to-purple-700{--tw-to:#7e22ce;}
.to-white{--tw-to:#ffffff;}
.top-0{top:0;}
.top-1\/2{top:50%;}
.top-24{top:6rem;}
.top-3{top:0.75rem;}
.top-4{top:1rem;}
.tracking-wide{letter-spacing:0.025em;}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.w-10{width:2.5rem;}
.w-11{width:2.75rem;}
.w-12{width:3rem;}
.w-14{width:3.5rem;}
.w-16{width:4rem;}
.w-24{width:6rem;}
.w-3\.5{width:0.875rem;}
.w-4{width:1rem;}
.w-5{width:1.25rem;}
.w-6{width:1.5rem;}
.w-60{width:15rem;}
.w-64{width:16rem;}
.w-7{width:1.75rem;}
.w-8{width:2rem;}
.w-full{width:100%;}
.w-px{width:1px;}
.z-10{z-index:10;}
.z-50{z-index:50;}
/* ---- State/pseudo utilities ---- */
.focus\:border-blue-400:focus{border-color:#60a5fa;}
.focus\:border-blue-500:focus{border-color:#3b82f6;}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
.focus\:ring-4:focus{box-shadow:0 0 0 4px var(--tw-ring-color, rgba(59,130,246,0.5));}
.focus\:ring-blue-100:focus{--tw-ring-color:#dbeafe;}
.focus\:ring-blue-500:focus{--tw-ring-color:#3b82f6;}
.group:hover .group-hover\:text-blue-600{color:#2563eb;}
.has-\[\:checked\]\:bg-blue-50\/50:has(:checked){background-color:rgb(239 246 255 / 0.5);}
.has-\[\:checked\]\:border-blue-600:has(:checked){border-color:#2563eb;}
.hover\:-translate-y-0\.5:hover{transform:translateY(-0.125rem);}
.hover\:bg-blue-50:hover{background-color:#eff6ff;}
.hover\:bg-blue-600:hover{background-color:#2563eb;}
.hover\:bg-blue-700:hover{background-color:#1d4ed8;}
.hover\:bg-red-50:hover{background-color:#fef2f2;}
.hover\:bg-slate-50:hover{background-color:#f8fafc;}
.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1);}
.hover\:border-blue-300:hover{border-color:#93c5fd;}
.hover\:border-blue-400:hover{border-color:#60a5fa;}
.hover\:border-purple-200:hover{border-color:#e9d5ff;}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
.hover\:text-blue-600:hover{color:#2563eb;}
.hover\:text-slate-800:hover{color:#1e293b;}
.hover\:text-white:hover{color:#ffffff;}
.hover\:underline:hover{text-decoration:underline;}
.last\:border-0:last-child{border-width:0;}
@media (min-width:640px){
.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.sm\:inline{display:inline;}
}
@media (min-width:768px){
.md\:block{display:block;}
.md\:col-span-1{grid-column: span 1 / span 1;}
.md\:col-span-2{grid-column: span 2 / span 2;}
.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\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr));}
.md\:hidden{display:none;}
.md\:p-14{padding:3.5rem;}
.md\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
.md\:p-10{padding:2.5rem;}
.md\:text-2xl{font-size:1.5rem;line-height:2rem;}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
.md\:text-base{font-size:1rem;line-height:1.5rem;}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
.md\:text-5xl{font-size:3rem;line-height:1;}
}
@media (min-width:1024px){
.lg\:block{display:block;}
.lg\:flex{display:flex;}
.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.lg\:grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr));}
.lg\:grid-cols-\[1\.4fr_1fr\]{grid-template-columns:1.4fr 1fr;}
.lg\:hidden{display:none;}
}
@media (min-width:1280px){
.xl\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* ---- Prose (typografi konten artikel/halaman) ---- */
.prose{color:#334155;line-height:1.75;}
.prose p{margin-top:1.25em;margin-bottom:1.25em;}
.prose h1,.prose h2,.prose h3{color:#0f172a;font-weight:700;margin-top:1.5em;margin-bottom:0.75em;}
.prose h2{font-size:1.4em;}
.prose h3{font-size:1.2em;}
.prose ul,.prose ol{margin-top:1.25em;margin-bottom:1.25em;padding-left:1.5em;list-style:disc;}
.prose ol{list-style:decimal;}
.prose li{margin-top:0.4em;margin-bottom:0.4em;}
.prose a{color:#2563eb;text-decoration:underline;}
.prose strong{font-weight:700;color:#0f172a;}
.prose img{border-radius:0.75rem;margin-top:1.5em;margin-bottom:1.5em;}
.prose-sm{font-size:0.9rem;}

/* ---- Komponen kustom ws-* (dipertahankan, sudah ditulis manual di main.css) ---- */

/* ===========================================================================
 * TAMBAHAN v1.1.4 — utility class dipakai galeri produk + lightbox
 * (proyek ini pakai Tailwind static-compiled, bukan CDN/JIT, jadi class baru
 * yang dipakai di template WAJIB ditambahkan manual di sini agar bekerja)
 * ===========================================================================
 */
.aspect-square{aspect-ratio:1 / 1;}
.aspect-\[4\/3\]{aspect-ratio:4 / 3;}
.object-cover{object-fit:cover;}
.object-contain{object-fit:contain;}
.cursor-zoom-in{cursor:zoom-in;}
.overflow-x-auto{overflow-x:auto;}
.whitespace-nowrap{white-space:nowrap;}
.fixed{position:fixed;}
.max-w-full{max-width:100%;}
.max-h-full{max-height:100%;}
.z-\[100\]{z-index:100;}
.bg-black\/60{background-color:rgb(0 0 0 / 0.6);}
.bg-black\/90{background-color:rgb(0 0 0 / 0.9);}
.hover\:bg-white\/20:hover{background-color:rgb(255 255 255 / 0.2);}
.opacity-90{opacity:0.9;}
.group:hover .group-hover\:opacity-100{opacity:1;}
.h-1\.5{height:0.375rem;}
.h-full{height:100%;}

/* ===========================================================================
 * TAMBAHAN — dipakai halaman Layanan (Maintenance/Redesign/Hosting/Logo/Konten)
 * ===========================================================================
 */
.font-normal{font-weight:400;}
.mb-16{margin-bottom:4rem;}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
.mt-0\.5{margin-top:0.125rem;}
.p-8{padding:2rem;}
.px-7{padding-left:1.75rem;padding-right:1.75rem;}
.left-1\/2{left:50%;}
.scroll-mt-20{scroll-margin-top:5rem;}
.w-9{width:2.25rem;}
.-translate-x-1\/2{transform:translateX(-50%);}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.hover\:border-blue-200:hover{border-color:#bfdbfe;}
.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);}
.shadow-blue-600\/10{box-shadow:0 20px 25px -5px rgb(37 99 235 / 0.1), 0 8px 10px -6px rgb(37 99 235 / 0.1);}
.shadow-blue-600\/20{box-shadow:0 10px 15px -3px rgb(37 99 235 / 0.2), 0 4px 6px -4px rgb(37 99 235 / 0.2);}
.group:hover .group-hover\:bg-blue-600{background-color:#2563eb;}
.group:hover .group-hover\:text-white{color:#fff;}
.group:hover .group-hover\:translate-x-1{transform:translateX(0.25rem);}
.underline{text-decoration-line:underline;}
.text-white\/70{color:rgb(255 255 255 / 0.7);}

/* ---- main.css ---- */
/* Qoobiz — Styling tambahan di luar utility class Tailwind */

/* Jaring pengaman: kalau ada elemen manapun (gambar, tabel, dll) yang kelebaran,
   ini mencegah seluruh halaman ikut geser ke samping di HP. Ditaruh di html
   (bukan body) supaya header sticky tidak ikut rusak (bug lama Safari/WebKit
   kalau overflow-x diset di ancestor langsung elemen sticky). */
html { overflow-x: hidden; width: 100%; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Kolom galeri (1.4fr) & sidebar beli (1fr) di halaman detail template —
   dipakai arbitrary value grid-cols-[1.4fr_1fr] yang ternyata tidak ikut
   ter-compile otomatis (build script cuma nangkep class standar). */
@media (min-width: 1024px) {
    .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1.4fr 1fr; }
}

.card-hover { transition: all .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(15,23,42,.15); }
.card-hover:hover .demo-btn { opacity: 1; transform: translateY(0); }
.demo-btn { opacity: 0; transform: translateY(6px); transition: all .2s ease; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }

/* Pagination WordPress default (paginate_links) dibungkus agar sesuai desain */
.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #E2E8F0; font-size: 14px; font-weight: 500; margin: 0 2px; color: #475569; }
.page-numbers.current { background: #2563EB; color: #fff; border-color: #2563EB; }
.page-numbers:hover:not(.current) { border-color: #93C5FD; }
.page-numbers.dots { border: none; }

/* FAQ accordion */
.ws-faq-icon.rotate { transform: rotate(180deg); }

/* Skeleton loading (opsional untuk AJAX filter di masa depan) */
.ws-skeleton { background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%); background-size: 400% 100%; animation: ws-shimmer 1.4s ease infinite; }
@keyframes ws-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Mobile filter drawer */
#ws-mobile-filter-drawer { transition: transform .25s ease; }

/* ---- design-polish.css ---- */
/* ===== Qoobiz Design Polish ===== */
/* Layer tambahan di atas utility compiled — fokus ke detail yang bikin terasa "premium",
   bukan cuma kotak-kotak standar: shadow berwarna, gradient button, micro-animation, dekorasi. */

:root {
    --ws-blue: #2563eb;
    --ws-blue-dark: #1d4ed8;
    --ws-shadow-blue: 0 8px 24px -8px rgba(37,99,235,0.35);
}

/* ---- Tipografi lebih tajam ---- */
body { letter-spacing: -0.011em; }
h1, h2, h3, .font-bold, .font-semibold {
    letter-spacing: -0.02em;
}
p, .text-slate-500, .text-slate-600 { letter-spacing: -0.006em; }

/* ---- Tombol CTA: gradient + shadow berwarna + lift saat hover ---- */
/* Scoped khusus ke rounded-lg — pola yang konsisten dipakai SEMUA tombol CTA asli di tema ini.
   Sengaja TIDAK menyasar .bg-blue-600 generik, karena class itu juga dipakai untuk elemen
   non-tombol (avatar bulat, chat bubble, badge pill, garis timeline) yang tidak boleh ikut
   mendapat efek gradient/shadow/lift ala tombol. */
.bg-blue-600.rounded-lg {
    background: linear-gradient(135deg, #3b82f6 0%, var(--ws-blue) 55%, var(--ws-blue-dark) 100%) !important;
    box-shadow: var(--ws-shadow-blue);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
a.bg-blue-600.rounded-lg:hover, button.bg-blue-600.rounded-lg:hover, .bg-blue-600.rounded-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(37,99,235,0.45);
}
a.bg-blue-600.rounded-lg:active, button.bg-blue-600.rounded-lg:active { transform: translateY(0); }

/* ---- Card: shadow lebih lembut + lift lebih hidup ---- */
.card-hover {
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease !important;
}
.card-hover:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 48px -16px rgba(15,23,42,0.18) !important;
    border-color: #bfdbfe !important;
}

/* Kartu umum (border-slate-100 + rounded-2xl) dapat sedikit shadow default agar tidak flat */
.rounded-2xl.border {
    box-shadow: 0 1px 3px 0 rgba(15,23,42,0.04), 0 1px 2px -1px rgba(15,23,42,0.03);
}

/* ---- Section rhythm: dekorasi blob lembut di background hero & CTA custom ---- */
section {
    position: relative;
}
.bg-gradient-to-b.from-blue-50\/70,
.bg-gradient-to-b.from-blue-50\/60 {
    background-image:
        radial-gradient(circle at 85% 8%, rgba(37,99,235,0.08) 0%, transparent 45%),
        radial-gradient(circle at 5% 90%, rgba(124,58,237,0.06) 0%, transparent 40%),
        linear-gradient(to bottom, rgba(239,246,255,0.7), #ffffff) !important;
}

/* Gradient section (Website Custom / hero ungu-biru) diberi tekstur noise halus via overlay radial */
.bg-gradient-to-br.from-blue-700 {
    position: relative;
    overflow: hidden;
}
.bg-gradient-to-br.from-blue-700::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.14) 0%, transparent 40%),
                radial-gradient(circle at 90% 85%, rgba(255,255,255,0.10) 0%, transparent 45%);
    pointer-events: none;
}

/* ---- Badge lebih hidup (sedikit shadow warna sesuai jenisnya) ---- */
.bg-orange-500 { box-shadow: 0 3px 8px -2px rgba(249,115,22,0.5); }
.bg-blue-500 { box-shadow: 0 3px 8px -2px rgba(59,130,246,0.5); }
.bg-rose-500 { box-shadow: 0 3px 8px -2px rgba(244,63,94,0.5); }

/* ---- Input & form fokus lebih halus ---- */
input, select, textarea {
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ---- Fade-in halus saat elemen muncul (progressive, tanpa JS observer, cukup on-load) ---- */
@keyframes wsFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-hover, section > div > h1, section > div > h2 {
    animation: wsFadeUp .5s ease both;
}

/* ---- Divider antar section jadi lebih halus (bukan garis tegas) ---- */
.border-b.border-slate-100 {
    border-bottom-color: rgba(226,232,240,0.6);
}

/* ---- Search bar hero: shadow lebih premium ---- */
form .rounded-xl.border, .rounded-xl.shadow-lg {
    box-shadow: 0 12px 32px -12px rgba(15,23,42,0.15) !important;
}

/* ---- Star rating warna lebih hangat ---- */
.text-amber-400, .fill-amber-400 { color: #f59e0b; }

/* ---- Scrollbar tipis konsisten ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =====================================================================
   PATCH: utility class yang dipakai di template tapi tidak ikut ter-compile
   di tailwind-compiled.css (karena file itu di-build statis, bukan JIT).
   Ditemukan lewat audit menyeluruh sebelum go-live — lihat cara-kerja,
   custom-paket, dashboard, single-template, header, dan halaman 404.
   ===================================================================== */

/* -- Warna purple & green (dipakai badge status order, tombol WA, CTA custom-paket) -- */
.bg-purple-600 { background-color: #9333ea; }
.text-purple-500 { color: #a855f7; }
.text-purple-700 { color: #7e22ce; }
.border-purple-200 { border-color: #e9d5ff; }
.hover\:bg-purple-700:hover { background-color: #7e22ce; }
.hover\:border-purple-400:hover { border-color: #c084fc; }
.bg-purple-50\/50 { background-color: rgb(250 245 255 / 0.5); }

.bg-green-600 { background-color: #16a34a; }
.bg-green-100 { background-color: #dcfce7; }
.text-green-700 { color: #15803d; }
.border-green-200 { border-color: #bbf7d0; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-green-50:hover { background-color: #f0fdf4; }
.hover\:text-green-600:hover { color: #16a34a; }
.hover\:bg-slate-100:hover { background-color: #f1f5f9; }
.hover\:bg-slate-200:hover { background-color: #e2e8f0; }
.hover\:opacity-80:hover { opacity: 0.8; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.hover\:border-green-300:hover { border-color: #86efac; }

.border-blue-100 { border-color: #dbeafe; }
.text-slate-800 { color: #1e293b; }
.text-white\/70 { color: rgb(255 255 255 / 0.7); }

/* -- Spacing & sizing dasar (halaman 404, custom-paket, header mobile menu) -- */
.bottom-3 { bottom: 0.75rem; }
.bottom-4 { bottom: 1rem; }
.right-3 { right: 0.75rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mb-16 { margin-bottom: 4rem; }
.opacity-70 { opacity: 0.7; }
.p-8 { padding: 2rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pl-11 { padding-left: 2.75rem; }
.w-9 { width: 2.25rem; }
.w-20 { width: 5rem; }
.max-w-lg { max-width: 32rem; }
.max-w-sm { max-width: 24rem; }
.max-w-6xl { max-width: 72rem; }
.w-32 { width: 8rem; }
.h-28 { height: 7rem; }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.border-l { border-left-width: 1px; }
.hover\:text-red-500:hover { color: #ef4444; }
.underline { text-decoration-line: underline; }
.uppercase { text-transform: uppercase; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }

@media (min-width: 768px) {
    .md\:gap-3 { gap: 0.75rem; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:-translate-y-2 { transform: translateY(-0.5rem); }
}

/* ---- Fitur Bandingkan ---- */
.z-40 { z-index: 40; }
.list-disc { list-style-type: disc; }
.pl-4 { padding-left: 1rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.border-collapse { border-collapse: collapse; }
.align-bottom { vertical-align: bottom; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.min-w-\[640px\] { min-width: 640px; }

/* ---- Redesain halaman detail produk ---- */
.bg-red-400 { background-color: #f87171; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-green-400 { background-color: #4ade80; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgb(37 99 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-blue-400 { --tw-gradient-to: #60a5fa; }
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.p-0\.5 { padding: 0.125rem; }
.text-slate-200 { color: #e2e8f0; }
.hover\:text-slate-700:hover { color: #334155; }
.ml-1 { margin-left: 0.25rem; }
.ml-3 { margin-left: 0.75rem; }
.pb-5 { padding-bottom: 1.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.hover\:border-blue-100:hover { border-color: #dbeafe; }
.leading-none { line-height: 1; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.text-\[10px\] { font-size: 10px; }

/* ---- Tambahan: animasi ping buat tombol WhatsApp melayang (belum ada di subset Tailwind compiled ini) ---- */
@keyframes ws-ping {
  75%, 100% { transform: scale(1.8); opacity: 0; }
}
.animate-ping { animation: ws-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }