/* Cerita — seperti aplikasi media sosial: profil, story, feed, highlight bulat */
.fam-cerita { --card: var(--bg); --sec-y: clamp(40px, 5vw, 80px); --ring: conic-gradient(from 210deg, var(--accent), var(--primary), var(--accent)); }
.fam-cerita .display { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.06; }
.fam-cerita .h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.3rem); }
.fam-cerita .display em, .fam-cerita .h2 em, .fam-cerita .h1 em { font-style: normal; color: var(--primary-text); }
.fam-cerita .eyebrow { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; }
.fam-cerita .eyebrow::before { content: "●"; color: #ef4444; font-size: .7em; }
.fam-cerita .btn { border-radius: 12px; font-weight: 700; }

/* Header profil: avatar bercincin story */
.fam-cerita .hdr { background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom-color: var(--line); }
.fam-cerita .brand__mark { border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.fam-cerita .brand__name { font-family: var(--font-body), sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.fam-cerita .brand__name::after { content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -2px; border-radius: 50%; background: #3b82f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.fam-cerita .nav__a { font-weight: 600; }
.fam-cerita .nav__a.is-active::after { left: 50%; right: auto; width: 6px; height: 6px; margin-left: -3px; bottom: 0; border-radius: 50%; }

/* Highlight bulat untuk kategori */
.fam-cerita .crail__img { padding: 3px; border: 0; background: var(--ring); box-shadow: none; }
.fam-cerita .crail__img img { border: 3px solid var(--bg); border-radius: 50%; }
.fam-cerita .crail__img--all { padding: 0; background: var(--tint); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 2px var(--line-strong); }
.fam-cerita .crail__i:hover .crail__img { box-shadow: none; }

.fam-cerita .feat, .fam-cerita .tcard, .fam-cerita .step, .fam-cerita .cinfo { border: 1px solid var(--line); background: var(--card); }
.fam-cerita .fstrip__i { border: 1px solid var(--line); background: var(--card); }
.fam-cerita .feat__ic { border-radius: 50%; background: var(--tint); }
.fam-cerita .ggrid { gap: 3px; }
.fam-cerita .ggrid .gitem { border-radius: 0; }
@media (min-width: 768px) { .fam-cerita .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } }
.fam-cerita .twall .tcard { border-radius: 18px; }
.fam-cerita .tcard__who .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.fam-cerita .faq { border: 0; gap: 8px; }
.fam-cerita .faq__i { border: 1px solid var(--line); border-radius: 16px; padding-inline: 16px; }
.fam-cerita .cta--split { background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, var(--bg)), color-mix(in oklab, var(--accent) 22%, var(--bg))); }
.fam-cerita .ftr { background: var(--bg); }
.fam-cerita .pd--market .pd__head, .fam-cerita .pd--market .pd__box, .fam-cerita .pd--market .pd__trust, .fam-cerita .pd--market .pd__specs, .fam-cerita .pd--market .pd__desc { border-radius: 18px; }