/* Halaman kolaborasi FAMEDIA — katalog, detail, form, dan tiket. */
.collab-hero { position: relative; display: grid; overflow: hidden; gap: 2rem; align-items: center; margin-bottom: 2rem; padding: clamp(1.5rem, 5vw, 3.4rem); border-radius: 26px; background: linear-gradient(125deg, #010736 0%, #0d1c42 58%, #315596 100%); color: #fff; box-shadow: 0 28px 60px -38px rgba(1, 7, 54, .8); }
.collab-hero::after { position: absolute; right: -100px; bottom: -140px; width: 360px; height: 360px; border: 55px solid rgba(252, 241, 208, .08); border-radius: 50%; content: ""; animation: collab-hero-ring 9s ease-in-out infinite; }
.collab-kicker { display: inline-flex; align-items: center; gap: .45rem; color: #fcf1d0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.collab-hero h1 { max-width: 700px; margin: .7rem 0 .55rem; color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.7vw, 3.4rem); line-height: 1.12; }
.collab-hero p { max-width: 670px; margin: 0 0 1.4rem; color: rgba(255, 255, 255, .78); }
.collab-hero-visual { position: relative; z-index: 1; display: none; width: 260px; height: 260px; place-items: center; justify-self: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fcf1d0; font-size: 7rem; animation: collab-visual-float 6s ease-in-out infinite; }
.collab-hero-visual::before { position: absolute; inset: 20px; border: 1px dashed rgba(252, 241, 208, .3); border-radius: 50%; content: ""; animation: collab-orbit-spin 22s linear infinite; }
.collab-hero-visual > i { position: relative; z-index: 1; filter: drop-shadow(0 16px 20px rgba(1, 7, 54, .3)); transform-origin: center; animation: collab-book-breathe 3.8s ease-in-out infinite; }
.collab-hero-visual span { position: absolute; z-index: 2; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: #fff; color: #22396f; font-size: 1.35rem; box-shadow: 0 16px 30px -18px #000; animation: collab-chip-float 4.4s ease-in-out infinite; }
.collab-hero-visual span:nth-child(2) { top: 5px; right: 12px; animation-delay: -.8s; }.collab-hero-visual span:nth-child(3) { bottom: 12px; left: -3px; animation-delay: -2.1s; }.collab-hero-visual span:nth-child(4) { right: -12px; bottom: 36px; background: #fcf1d0; animation-delay: -3.2s; }
@keyframes collab-visual-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes collab-book-breathe { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.07); } }
@keyframes collab-chip-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -9px, 0) rotate(4deg); } }
@keyframes collab-orbit-spin { to { transform: rotate(360deg); } }
@keyframes collab-hero-ring { 0%, 100% { opacity: .65; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 1; transform: translate3d(-12px, -8px, 0) scale(1.05); } }
.collab-directory { scroll-margin-top: 120px; }
.collab-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.collab-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; border-radius: 999px; background: #f1f3f8; }
.collab-tabs a { padding: .55rem .95rem; border-radius: 999px; color: var(--fm-muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.collab-tabs a.active { background: #22396f; color: #fff; box-shadow: 0 8px 18px -12px rgba(1, 7, 54, .7); }
.collab-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.collab-search input { width: 100%; min-height: 42px; padding: 0 3rem 0 1rem; border: 1px solid var(--fm-line); border-radius: 999px; outline: 0; }
.collab-search input:focus { border-color: #22396f; box-shadow: 0 0 0 4px rgba(34, 57, 111, .13); }
.collab-search button { position: absolute; top: 4px; right: 4px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: #fcf1d0; color: #010736; }
.collab-grid { display: grid; gap: 1rem; }
.collab-card { overflow: hidden; border: 1px solid rgba(13, 28, 66, .12); border-radius: 20px; background: #fff; box-shadow: 0 18px 38px -28px rgba(1, 7, 54, .55); transition: transform .22s ease, box-shadow .22s ease; }
.collab-card:hover { box-shadow: 0 24px 46px -28px rgba(1, 7, 54, .68); transform: translateY(-4px); }
.collab-card-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fm-gradient); }
.collab-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.collab-card:hover .collab-card-cover img { transform: scale(1.035); }
.collab-card-cover > span:not(.collab-card-category) { display: grid; height: 100%; place-items: center; color: #fcf1d0; font-size: 4rem; }
.collab-card-category { position: absolute; top: 12px; left: 12px; padding: .35rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0d1c42; font-size: .65rem; font-weight: 700; }
.collab-card-body { padding: 1rem; }.collab-card-status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--fm-muted); font-size: .68rem; }
.collab-card h2 { margin: .7rem 0 .35rem; font-size: 1.05rem; }.collab-card h2 a { color: #010736; }
.collab-card-body > p { min-height: 3.2em; margin: 0 0 .8rem; color: var(--fm-muted); font-size: .78rem; line-height: 1.55; }
.collab-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e8ebf2; }.collab-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d8a2a2, #22396f); }
.collab-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .75rem 0 1rem; color: var(--fm-muted); font-size: .7rem; }.collab-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.collab-empty { grid-column: 1 / -1; }
.collab-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: var(--fm-muted); font-size: .82rem; font-weight: 600; }
.collab-detail { display: grid; gap: 1.4rem; align-items: start; }.collab-detail-cover { position: relative; }.collab-detail-cover > img, .collab-detail-cover > div:first-child { display: grid; width: 100%; overflow: hidden; aspect-ratio: 4 / 5; place-items: center; border-radius: 24px; object-fit: cover; background: var(--fm-gradient); color: #fcf1d0; font-size: 5rem; box-shadow: 0 25px 50px -34px rgba(1, 7, 54, .7); }
.collab-slot-card { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .94); color: #010736; backdrop-filter: blur(8px); }.collab-slot-card strong { font-size: 1.6rem; }.collab-slot-card span { font-size: .72rem; }
.collab-detail-copy { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--fm-line); border-radius: 24px; background: #fff; box-shadow: 0 22px 44px -34px rgba(1, 7, 54, .55); }
.collab-detail-badges { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }.collab-detail h1 { margin: .8rem 0 .35rem; font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.45rem); }.collab-theme { color: var(--fm-muted); font-weight: 500; }
.collab-facts { display: grid; gap: .6rem; margin: 1.3rem 0; }.collab-facts > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .65rem; align-items: center; padding: .8rem; border-radius: 14px; background: #f7f8fc; }.collab-facts i { grid-row: 1 / 3; color: #22396f; font-size: 1.25rem; }.collab-facts small { color: var(--fm-muted); font-size: .65rem; }.collab-facts strong { font-size: .8rem; }
.collab-description { color: var(--fm-ink); line-height: 1.8; }.collab-benefits { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--fm-line); }.collab-benefits h2 { font-size: 1.05rem; }.collab-benefits ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }.collab-benefits li { display: flex; gap: .5rem; color: var(--fm-muted); font-size: .82rem; }.collab-benefits i { color: #2f7d50; }
.collab-register { display: grid; overflow: hidden; margin-top: 2rem; border: 1px solid var(--fm-line); border-radius: 24px; background: #fff; box-shadow: 0 22px 48px -36px rgba(1, 7, 54, .6); scroll-margin-top: 110px; }.collab-register-intro { padding: clamp(1.3rem, 4vw, 2.4rem); background: linear-gradient(145deg, #010736, #22396f); color: #fff; }.collab-register-intro > span { color: #fcf1d0; font-size: .7rem; font-weight: 700; text-transform: uppercase; }.collab-register-intro h2 { margin: .7rem 0 .45rem; color: #fff; }.collab-register-intro p, .collab-register-intro li { color: rgba(255, 255, 255, .78); font-size: .82rem; }.collab-register-intro ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }.collab-register-intro li { display: flex; gap: .45rem; }.collab-register-form { padding: clamp(1.3rem, 4vw, 2.4rem); }.collab-register-closed { display: grid; place-items: center; padding: 2rem; text-align: center; }.collab-register-closed > i { color: #22396f; font-size: 2rem; }.collab-register-closed strong { margin-top: .5rem; }.collab-register-closed p { color: var(--fm-muted); }
.collab-ticket-page { max-width: 760px; margin-inline: auto; padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid var(--fm-line); border-radius: 26px; background: #fff; box-shadow: 0 26px 55px -38px rgba(1, 7, 54, .65); }.collab-ticket-page h1 { margin: .8rem 0 .45rem; }.collab-ticket-page > p { color: var(--fm-muted); }.collab-ticket-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; margin: 1.4rem 0; padding: 1rem; border-radius: 18px; background: #010736; color: #fff; }.collab-ticket-box > div { min-width: 0; }.collab-ticket-box small, .collab-ticket-box strong { display: block; }.collab-ticket-box small { color: rgba(255, 255, 255, .65); font-size: .65rem; }.collab-ticket-box strong { overflow-wrap: anywhere; font-size: 1.05rem; }.collab-ticket-box button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 10px; background: #fcf1d0; color: #010736; }.collab-registration-summary { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; border-radius: 16px; background: #f7f8fc; }
@media (min-width: 768px) { .collab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.collab-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }.collab-register { grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); } }
@media (min-width: 992px) { .collab-hero { grid-template-columns: minmax(0, 1fr) 320px; }.collab-hero-visual { display: grid; }.collab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.collab-detail { grid-template-columns: minmax(280px, .38fr) minmax(0, .62fr); }.collab-detail-cover { position: sticky; top: calc(var(--fm-header-h) + 20px); } }
@media (prefers-reduced-motion: reduce) { .collab-card, .collab-card-cover img { transition: none; }.collab-card:hover { transform: none; }.collab-hero::after, .collab-hero-visual, .collab-hero-visual::before, .collab-hero-visual > i, .collab-hero-visual span { animation: none; } }