/* ===== Base ===== */
html { scroll-behavior: smooth; }
body { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }
::selection { background: #f13a93; color: #fff; }

/* ===== Glassmorphism ===== */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 32px rgba(6, 60, 110, .18), inset 0 1px 0 rgba(255,255,255,.35);
}
.glass-dark {
  background: linear-gradient(135deg, rgba(6,89,134,.45), rgba(6,89,134,.25));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18);
}
.glass-light {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 40px -12px rgba(6,89,134,.18);
}
.glass-card {
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 40px -16px rgba(6,89,134,.22);
}

/* ===== Backgrounds ===== */
.bg-brand-gradient { background: linear-gradient(135deg, #065986 0%, #4473d1 45%, #5a98f2 75%, #67c3f3 100%); }
.bg-brand-gradient-soft { background: linear-gradient(160deg, #4473d1 0%, #5a98f2 45%, #67c3f3 100%); }
.bg-magenta-gradient { background: linear-gradient(135deg, #f366a9 0%, #f13a93 50%, #d9257c 100%); }
.bg-mesh {
  background-color: #fdeef5;
  background-image:
    radial-gradient(at 0% 0%, rgba(103,195,243,.35) 0, transparent 45%),
    radial-gradient(at 100% 8%, rgba(252,228,240,1) 0, transparent 45%),
    radial-gradient(at 85% 90%, rgba(198,241,254,.7) 0, transparent 45%),
    radial-gradient(at 10% 95%, rgba(249,197,223,.6) 0, transparent 45%);
  background-attachment: fixed;
}
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(6,89,134,.55) 0%, rgba(68,115,209,.25) 45%, rgba(68,115,209,.9) 100%),
    linear-gradient(90deg, rgba(6,60,110,.7) 0%, rgba(6,60,110,0) 65%);
}
.blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; pointer-events: none; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: 9999px; transition: all .2s ease; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, #f366a9, #f13a93 55%, #d9257c); color: #fff; box-shadow: 0 10px 24px -10px rgba(241,58,147,.7); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(241,58,147,.85); }
.btn-navy { background: linear-gradient(135deg, #4473d1, #5a98f2 55%, #67c3f3); color: #fff; box-shadow: 0 10px 24px -10px rgba(68,115,209,.7); }
.btn-navy:hover { transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-ghost:hover { background: rgba(255,255,255,.24); }
.btn-outline { background: #fff; color: #4473d1; border: 1px solid #ddeefd; }
.btn-outline:hover { border-color: #5a98f2; background: #eef6fe; }
.arrow-chip { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: #fff; color: #4473d1; transition: transform .2s; }
.btn:hover .arrow-chip { transform: rotate(-45deg); }

/* ===== Form ===== */
.field { width: 100%; border-radius: 9999px; border: 1px solid #dbe7f6; background: rgba(255,255,255,.9); padding: .7rem 1.1rem; font-size: .9rem; color: #0f1430; outline: none; transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: #5a98f2; box-shadow: 0 0 0 4px rgba(90,152,242,.15); }
textarea.field, .field-box { border-radius: 1rem; }
.label { display: block; font-size: .82rem; font-weight: 600; color: #1f2a44; margin-bottom: .4rem; }
.label .req { color: #f13a93; }

/* ===== Misc ===== */
.eyebrow { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #0079ab; }
.marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fade-up { animation: fadeUp .6s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pulse-dot { position: relative; }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid currentColor; opacity: .5; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(1.8); opacity: 0; } }
.toast-bar { animation: toastbar 4s linear forwards; }
@keyframes toastbar { from { width: 100%; } to { width: 0; } }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.prose-rs p { margin-bottom: 1rem; line-height: 1.85; color: #1f2a44; }
.prose-rs h2 { font-size: 1.35rem; font-weight: 700; color: #065986; margin: 1.75rem 0 .75rem; }
.prose-rs ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; color: #1f2a44; line-height: 1.85; }

/* ===== CMS ===== */
.cms-table th { font-size: .78rem; font-weight: 600; color: #3f4a63; text-align: left; padding: .85rem 1.25rem; background: #f8f9fd; border-bottom: 1px solid #eceef7; white-space: nowrap; }
.cms-table td { padding: .9rem 1.25rem; border-bottom: 1px solid #f0f1f8; font-size: .875rem; color: #1f2a44; vertical-align: middle; }
.cms-table tbody tr:hover { background: #fafbff; }
.cms-table td.font-mono, .cms-table td .font-mono { white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge-green { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.badge-amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.badge-red { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.badge-blue { background: #ecfbfe; color: #0079ab; border-color: #c6f1fe; }
.badge-navy { background: #eef6fe; color: #4473d1; border-color: #bcdcfb; }
.badge-magenta { background: #fdf5f9; color: #b51b65; border-color: #f9c5df; }
.badge-gray { background: #f4f5f9; color: #535877; border-color: #e3e5ee; }
.side-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-radius: .8rem; font-size: .875rem; color: #1f2a44; transition: background .15s, color .15s; }
.side-link:hover { background: #eef6fe; color: #4473d1; }
.side-link.active { background: linear-gradient(90deg, rgba(90,152,242,.16), rgba(103,195,243,.08)); color: #4473d1; font-weight: 600; }
.side-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== Admin area (Portal Pasien & CMS): latar putih polos, tanpa glass ===== */
[data-layout="portal"] .bg-mesh, [data-layout="cms"] .bg-mesh { background: #f5f7fb; }
[data-layout="portal"] .glass-card, [data-layout="cms"] .glass-card,
[data-layout="portal"] .glass-light, [data-layout="cms"] .glass-light {
  background: #fff; border: 1px solid #eceef7; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-layout="portal"] .glass, [data-layout="cms"] .glass,
[data-layout="portal"] .glass-dark, [data-layout="cms"] .glass-dark {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-layout="portal"] .blob, [data-layout="cms"] .blob { display: none; }
[data-layout="portal"] .shadow-soft, [data-layout="cms"] .shadow-soft,
[data-layout="portal"] .shadow-glow, [data-layout="cms"] .shadow-glow { box-shadow: 0 1px 2px rgba(16,24,40,.05); }
[data-layout="portal"] .btn-primary, [data-layout="cms"] .btn-primary,
[data-layout="portal"] .btn-navy, [data-layout="cms"] .btn-navy { box-shadow: none; }
[data-layout="portal"] .btn-primary:hover, [data-layout="cms"] .btn-primary:hover,
[data-layout="portal"] .btn-navy:hover, [data-layout="cms"] .btn-navy:hover { transform: none; filter: brightness(1.05); }
[data-layout="portal"] .bg-brand-gradient, [data-layout="cms"] .bg-brand-gradient,
[data-layout="portal"] .bg-brand-gradient-soft, [data-layout="cms"] .bg-brand-gradient-soft { background: #4473d1; }
[data-layout="portal"] .bg-magenta-gradient, [data-layout="cms"] .bg-magenta-gradient { background: #f13a93; }
/* Profil dokter (HTML dari CMS) */
.doctor-profile p { margin-bottom: .5rem; }
.doctor-profile strong { color: #065986; }
.doctor-profile ul, .doctor-profile ol { margin: .25rem 0 1rem; padding-left: 1.25rem; }
.doctor-profile ol { list-style: decimal; }
.doctor-profile li { margin-bottom: .25rem; }