/* Obrolan — ramah seperti chat: gradasi lembut, gelembung, sudut sangat bulat */
.fam-obrolan { --card: color-mix(in oklab, var(--bg) 70%, #fff); --sec-y: clamp(48px, 6vw, 96px); background: radial-gradient(900px 520px at 0% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%), radial-gradient(800px 600px at 100% 30%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%), var(--bg); background-attachment: fixed; }
.fam-obrolan .display { line-height: 1.04; }
.fam-obrolan .display em, .fam-obrolan .h1 em, .fam-obrolan .h2 em { font-style: normal; padding: 0 .1em; border-radius: .3em .3em .3em .08em; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fam-obrolan .eyebrow { padding: .4rem .85rem; border-radius: 14px 14px 14px 4px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .88rem; }
.fam-obrolan .btn { font-weight: 600; }

/* Header: bar chat dengan status online */
.fam-obrolan .hdr { background: color-mix(in oklab, var(--bg) 80%, transparent); }
.fam-obrolan .brand__mark { position: relative; border-radius: 50%; }
.fam-obrolan .brand__mark::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--bg); border-radius: 50%; background: #22c55e; }
.fam-obrolan .nav__a { border-radius: 999px; }
.fam-obrolan .nav__a.is-active { background: var(--tint); }
.fam-obrolan .nav__a.is-active::after { display: none; }

.fam-obrolan .feat, .fam-obrolan .tcard, .fam-obrolan .step, .fam-obrolan .cinfo, .fam-obrolan .fstrip__i { border: 0; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px color-mix(in oklab, var(--primary) 50%, transparent); }
.fam-obrolan .step { border-radius: 24px 24px 24px 8px; }
.fam-obrolan .step:nth-child(even) { border-radius: 24px 24px 8px 24px; background: color-mix(in oklab, var(--primary) 12%, var(--bg)); }
.fam-obrolan .fstrip__i { border-radius: 20px 20px 20px 6px; }
.fam-obrolan .feat__ic { border-radius: 50%; }
.fam-obrolan .step__n { box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 18%, transparent); }
.fam-obrolan .about__img, .fam-obrolan .feats-split__img { border-radius: 36px 36px 36px 10px; }
.fam-obrolan .faq { border: 0; gap: 10px; }
.fam-obrolan .faq__i { padding-inline: 18px; border: 0; border-radius: 20px 20px 20px 6px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.fam-obrolan .faq__i[open] { background: color-mix(in oklab, var(--primary) 9%, var(--bg)); }
.fam-obrolan .cta, .fam-obrolan .cta--split { border-radius: 36px 36px 36px 10px; }
.fam-obrolan .crail__img { box-shadow: 0 0 0 2px var(--primary); }
.fam-obrolan .ftr--card .ftr__panel { background: var(--card); }
.fam-obrolan .ftr--card .ftr__cta { border-radius: 30px 30px 30px 8px; }
.fam-obrolan .wa-float { animation: waPulse 2.4s ease-in-out infinite; }
@keyframes waPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / .45), 0 10px 24px -6px rgb(37 211 102 / .55); } 50% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0), 0 10px 24px -6px rgb(37 211 102 / .55); } }
@media (prefers-reduced-motion: reduce) { .fam-obrolan .wa-float { animation: none; } }