/* ===== WebStarter 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; }