@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/s/plus-jakarta-sans.woff2) format('woff2')}
/* Warna diambil dari studionya sendiri: latar = langit malam di sekitar diorama, aksen = cahaya lampu dinding. */
:root{--latar:#0c1428;--latar-2:#111b35;--panel:#16223f;--panel-2:#1c2a4c;--garis:rgba(220,230,255,.09);--garis-2:rgba(220,230,255,.16);
--teks:#eef2fa;--redup:#9aa7c4;--amber:#f4b74e;--hijau:#5fd3a3;--koral:#ff836f;--biru:#8db2ff;--ungu:#c9a0f5;--proses:#56688f;
--r:14px;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--latar);color:var(--teks);font:400 15px/1.55 'Plus Jakarta Sans',system-ui,sans-serif}
a{color:inherit}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
main{max-width:1240px;margin:0 auto;padding:clamp(14px,3vw,32px) clamp(14px,3vw,32px) 64px}
.lbl{display:block;font-size:12px;font-weight:600;color:var(--redup);margin-bottom:2px}
.titik{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* ---------- kepala ---------- */
.kepala{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px clamp(14px,3vw,32px);background:rgba(12,20,40,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.merek{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.merek img{border-radius:7px}
.kepala-klien{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;color:var(--redup)}
.kepala-klien img{border-radius:50%;object-fit:cover;background:#fff}
.kepala-klien b{color:var(--teks);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kepala-keluar button{background:none;border:1px solid var(--garis-2);color:var(--redup);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.kepala-keluar button:hover{color:var(--teks)}

/* ---------- tombol ---------- */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid var(--garis-2);background:transparent;color:var(--teks);font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;text-decoration:none;cursor:pointer;list-style:none}
.tombol::-webkit-details-marker{display:none}
.tombol:hover{border-color:var(--redup)}
.tombol.utama{background:var(--amber);border-color:var(--amber);color:#1b1407;font-weight:700}
.tombol.utama:hover{background:#ffc766}
.intip{position:sticky;top:53px;z-index:40;margin:0;padding:8px clamp(14px,3vw,32px);background:#3a2a0b;color:#ffd68a;font-size:13.5px;font-weight:600;text-align:center;border-bottom:1px solid rgba(244,183,78,.35)}
.intip-ket{margin:0;padding:10px 14px;border-radius:12px;border:1px dashed rgba(244,183,78,.45);color:#ffd68a;font-size:14px}
.pesan .intip-ket{margin-top:18px;line-height:1.6}
.intip-ket .tombol.kecil{min-height:36px;padding:6px 14px;margin-left:6px;border-color:rgba(244,183,78,.6);color:#ffd68a;font-size:14px}
.flash{max-width:640px;margin:0 auto 18px;padding:12px 16px;border-radius:12px;background:rgba(95,211,163,.12);border:1px solid rgba(95,211,163,.35);color:#c9f3e1;transition:opacity .6s}
.flash.pudar{opacity:0}

/* ---------- masuk ---------- */
.hal-masuk main{max-width:none;padding:0}
.masuk{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,440px);align-items:center;gap:clamp(16px,4vw,56px);padding:clamp(18px,4vw,56px)}
.masuk-studio img{display:block;width:100%;height:auto;filter:saturate(1.05)}
.masuk-kotak{display:grid;gap:12px;padding:clamp(22px,3vw,34px);border-radius:20px;background:var(--panel);border:1px solid var(--garis)}
.masuk-kotak img{border-radius:10px}
.masuk-kotak h1{margin:6px 0 0;font-size:28px;letter-spacing:-.02em;line-height:1.15}
.masuk-kotak p{margin:0;color:var(--redup)}
.masuk-kotak label{font-weight:600;font-size:14px;margin-top:6px}
.masuk-kotak input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--garis-2);background:var(--latar);color:var(--teks);font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.masuk-kotak input::placeholder{color:#4f5d7d;letter-spacing:.08em}
.masuk-kotak button{min-height:48px;border:0;border-radius:12px;background:var(--amber);color:#1b1407;font-weight:700;font-size:16px;line-height:1;font-family:inherit;cursor:pointer}
.masuk-kotak button:disabled{opacity:.5;cursor:not-allowed}
.masuk-kotak small{color:var(--redup)}
.masuk-salah{padding:9px 12px;border-radius:10px;background:rgba(255,131,111,.12);color:#ffc3b8!important}
@media (max-width:760px){.masuk{grid-template-columns:1fr;align-content:start}.masuk-studio{margin:0 -8px}}

/* ---------- beranda ---------- */
.panggung{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(18px,3vw,40px);align-items:center;margin-bottom:clamp(24px,4vw,44px)}
.sapa{display:grid;gap:16px;align-content:center}
.sapa-hai{margin:0;color:var(--amber);font-weight:600}
.sapa h1{margin:-8px 0 0;font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;overflow-wrap:anywhere}
.sapa .tombol{justify-self:start}

/* Ale ngomong: balon sama persis kayak gelembung di studio (putih, garis gelap), biar nyambung sama dunianya. */
.ale-bicara{display:flex;align-items:flex-end;gap:10px}
.ale-wajah{flex:none;width:56px;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.ale-bicara.besar .ale-wajah{width:68px}
.balon{position:relative;flex:1;min-width:0;padding:12px 15px 13px;border:2.5px solid #1c1b19;border-radius:16px;background:#fff;color:#1c1b19;font-size:15px;line-height:1.5}
.balon::before{content:'';position:absolute;left:-11px;bottom:16px;width:16px;height:16px;background:#fff;border-left:2.5px solid #1c1b19;border-bottom:2.5px solid #1c1b19;transform:rotate(45deg) skew(8deg,8deg)}
.balon b{font-weight:800}
.ale-peran{margin-left:6px;font-size:12px;font-weight:600;color:#6d6a63}
.balon p{margin:4px 0 0}

.batang{display:flex;gap:3px;height:12px}
.batang i{display:block;border-radius:4px;min-width:6px}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-4px 0 0;padding:0;list-style:none;font-size:13px;color:var(--redup)}
.legenda li{display:flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px}
.legenda b{color:var(--teks)}
.b-tayang{background:var(--ungu)}.b-jadwal{background:var(--biru)}.b-oke{background:var(--hijau)}
.b-nunggu{background:var(--amber)}.b-revisi{background:var(--koral)}.b-proses{background:var(--proses)}.b-belum{background:rgba(220,230,255,.08)}

.grup{margin-top:34px}
.grup-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.grup h2{margin:0;font-size:20px;letter-spacing:-.01em}
.grup h2 span{margin-left:6px;color:var(--redup);font-weight:600}
.semua{position:relative}
.semua summary{list-style:none;cursor:pointer;color:var(--amber);font-weight:700;padding:8px 2px}
.semua summary::-webkit-details-marker{display:none}
.semua form{position:absolute;right:0;top:100%;z-index:20;width:min(320px,86vw);display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--garis-2);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.semua p{margin:0;color:var(--redup);font-size:14px}
.deret{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px 16px}
.kk{display:grid;gap:9px;text-decoration:none}
.kk-gbr{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--garis)}
.kk-gbr img,.kk-gbr video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.kk:hover .kk-gbr img,.kk:hover .kk-gbr video{transform:scale(1.03)}
.kk-format{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(10,14,28,.78);font-weight:600;font-size:11.5px;line-height:1.3;font-family:inherit;font-style:normal}
.jml{position:absolute;right:8px;top:8px;padding:3px 7px;border-radius:999px;background:rgba(10,14,28,.78);font-weight:700;font-size:11.5px;line-height:1.3;font-family:inherit;font-style:normal}
.jml::before{content:'▣ '}
.kecil-kosong,.kecil-script{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;color:var(--redup);font-weight:600}
.kecil-script{background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(220,230,255,.05) 22px 23px),var(--panel)}
.kecil-script b{font-size:22px;color:var(--teks)}
.kk-isi{display:grid;gap:3px}
.kk-isi b{font-size:14.5px;line-height:1.35;max-height:2.7em;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kk-ket{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--redup)}
.kk-jadwal{font-size:12.5px;color:var(--redup)}
.kk-nunggu .kk-gbr{border-color:rgba(244,183,78,.55);box-shadow:0 0 0 3px rgba(244,183,78,.12)}
.kk-nunggu .titik,.st-nunggu .titik{color:var(--amber)}
.kk-revisi .titik,.st-revisi .titik{color:var(--koral)}
.kk-proses .titik,.st-proses .titik{color:var(--proses)}
.kk-oke .titik,.st-oke .titik{color:var(--hijau)}
.kk-jadwal .titik,.st-jadwal .titik{color:var(--biru)}
.kk-tayang .titik,.st-tayang .titik{color:var(--ungu)}


/* ---------- cari & saring konten ---------- */
.saring{position:sticky;top:53px;z-index:30;display:grid;gap:12px;margin:8px calc(clamp(14px,3vw,32px) * -1) 6px;padding:12px clamp(14px,3vw,32px);background:rgba(12,20,40,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--garis);scroll-margin-top:60px}
.tab-tab{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--garis)}
.tab-tab::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 14px 10px;text-decoration:none;font-weight:700;color:var(--redup);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab span{font-weight:600;font-size:13px;margin-left:4px;opacity:.85}
.tab em{font-style:normal}
.tab:hover{color:var(--teks)}
@media (max-width:480px){.tab .dari{display:none}.tab{padding:8px 10px 10px}}
.tab.aktif{color:var(--teks);border-bottom-color:var(--amber)}
.saring-baris{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chip-chip{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--garis-2);text-decoration:none;font-size:13.5px;font-weight:600;color:var(--redup)}
.chip b{color:var(--teks)}
.chip:hover{color:var(--teks)}
.chip.aktif{background:var(--teks);border-color:var(--teks);color:#0c1428}
.chip.aktif b{color:#0c1428}
.chip.c-nunggu .titik{color:var(--amber)}.chip.c-proses .titik{color:var(--proses)}.chip.c-oke .titik{color:var(--hijau)}
.chip.c-jadwal .titik{color:var(--biru)}.chip.c-tayang .titik{color:var(--ungu)}
.cari{display:flex;gap:6px;flex:1 1 240px;max-width:360px}
.cari input{flex:1;min-width:0;min-height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--garis-2);background:var(--latar);color:var(--teks);font:inherit;font-size:14px}
.cari button{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--garis-2);background:var(--panel-2);color:var(--teks);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.kosong{margin:28px 0;display:grid;justify-items:start;gap:12px;color:var(--redup)}
.kosong p{margin:0}
@media (max-width:760px){.saring{top:49px}.cari{max-width:none}}
.mode-intip .saring{top:88px}


/* ---------- pindah konten: bar bawah + bottom sheet ---------- */
.ada-nav-bawah main{padding-bottom:110px}
.antre-ket{font-size:13.5px}
.antre .bulat{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--garis-2);font-size:19px;color:var(--teks);text-decoration:none}
.antre .bulat.mati{opacity:.3}
.nav-bawah{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;width:min(620px,calc(100% - 20px));padding:6px;border-radius:18px;background:rgba(22,34,63,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--garis-2);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.nav-bawah a,.nav-bawah span.mati{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 14px;border-radius:13px;text-decoration:none;font-weight:600;font-size:14.5px}
.nb-sisi{color:var(--teks)}
.nb-sisi.kanan{justify-content:flex-end}
.nb-sisi:hover{background:rgba(255,255,255,.06)}
.nb-sisi.mati{opacity:.3}
.nb-tengah{justify-content:center;background:var(--latar);border:1px solid var(--garis-2);color:var(--teks)}
.nb-tengah small{color:var(--redup);font-weight:600;font-size:12.5px}
.nb-ikon{font-size:16px;color:var(--amber)}
@media (max-width:480px){.antre-ket{display:none}.nb-sisi span{display:none}.nav-bawah a,.nav-bawah span.mati{padding:0 12px}.nb-tengah small{display:none}}
.lembar{margin:auto auto 0;padding:0;width:min(640px,100%);max-width:100%;max-height:min(78vh,720px);border:0;border-radius:22px 22px 0 0;background:var(--panel);color:var(--teks);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.lembar::backdrop{background:rgba(4,8,18,.62)}
.lembar[open]{animation:naik .28s cubic-bezier(.2,.9,.3,1)}
@keyframes naik{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
.lembar-isi{display:flex;flex-direction:column;max-height:inherit}
.lembar-kepala{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 18px 10px;border-bottom:1px solid var(--garis);touch-action:none}
.pegangan{position:absolute;left:50%;top:8px;width:40px;height:4px;border-radius:2px;background:var(--garis-2);transform:translateX(-50%)}
.lembar-kepala h2{margin:0;font-size:17px}
.lembar-kepala button{width:36px;height:36px;border-radius:50%;border:1px solid var(--garis-2);background:transparent;color:var(--teks);font-size:15px;cursor:pointer}
.lembar-gulir{overflow-y:auto;padding:6px 10px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.lembar h3{margin:14px 8px 6px;font-size:14px}
.lembar h3 span{color:var(--redup);font-weight:600}
.lembar ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lembar li a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;text-decoration:none}
.lembar li a:hover{background:rgba(255,255,255,.05)}
.lembar li a.ini{background:rgba(244,183,78,.12);box-shadow:inset 3px 0 0 var(--amber)}
.mini{flex:none;width:44px;height:58px;border-radius:8px;overflow:hidden;background:var(--latar);display:grid;place-items:center}
.mini img{width:100%;height:100%;object-fit:cover}
.mini-teks{font-size:11px;font-weight:700;color:var(--redup)}
.mini-isi{display:grid;gap:2px;min-width:0}
.mini-isi b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-isi .kk-ket{font-size:12.5px}
@media (prefers-reduced-motion:reduce){.lembar[open]{animation:none}}


/* ---------- riwayat konten (timeline buat klien) ---------- */
.riwayat{max-width:760px;margin:36px 0 0}
.riwayat h2{margin:0 0 12px;font-size:18px}
.riwayat ol{list-style:none;margin:0;padding:0}
.riwayat li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0 12px 18px;border-left:2px solid var(--garis-2);font-size:14.5px;line-height:1.5}
.riwayat li::before{content:'';position:absolute;left:-7px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--proses);border:2px solid var(--latar)}
.riwayat li.r-kamu::before{background:var(--biru)}
.riwayat li.j-rilis::before{background:var(--amber);box-shadow:0 0 0 4px rgba(244,183,78,.2)}
.riwayat li.j-revisi::before{background:var(--koral)}
.riwayat li.j-acc::before,.riwayat li.j-tayang::before{background:var(--hijau)}
.riwayat .r-waktu{color:var(--redup);font-size:13px;padding-top:1px}
.riwayat b{font-weight:600}
.riwayat blockquote{margin:6px 0 0;padding:8px 12px;border-left:3px solid var(--koral);border-radius:0 10px 10px 0;background:rgba(255,131,111,.08);overflow-wrap:anywhere}
.riwayat li.j-usul-jadwal blockquote,.riwayat li.j-jadwal-tolak blockquote{border-left-color:var(--biru);background:rgba(141,178,255,.08)}
@media (max-width:640px){.riwayat li{grid-template-columns:1fr;gap:2px}}

/* ---------- studio virtual ---------- */
.studio{position:relative;overflow:hidden;min-height:200px}
.studio::before{content:'';position:absolute;left:12%;right:8%;bottom:4%;height:16%;background:radial-gradient(closest-side,rgba(244,183,78,.13),transparent);pointer-events:none}
.studio-dunia{position:absolute;left:0;top:0;width:1240px;height:1120px;transform-origin:0 0;--skala:.5}
.studio-latar{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.studio-ket{position:absolute;left:0;bottom:2px;margin:0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--redup)}
.titik.hidup{color:var(--hijau);box-shadow:0 0 0 0 rgba(95,211,163,.5);animation:hidup 2s infinite}
@keyframes hidup{70%{box-shadow:0 0 0 7px rgba(95,211,163,0)}100%{box-shadow:0 0 0 0 rgba(95,211,163,0)}}
.studio .tutup{position:absolute;background-repeat:no-repeat;background-size:1240px 1120px;pointer-events:none}
.studio .orang{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.studio .orang::before{content:'';position:absolute;inset:-14px -22px -20px}
.studio .rig{position:relative;display:block;transform-origin:50% 100%}
.studio .badan{display:block;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));animation:napas 3.4s ease-in-out infinite;animation-delay:calc(var(--tunda,0s) * -1)}
.studio .bayang{position:absolute;left:50%;bottom:-6px;width:78%;height:14px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none}
.studio .kaki{position:absolute;left:0;top:0;height:100%;width:auto;display:none;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.studio .orang.jalan .kaki{display:block}
.studio .orang.jalan .badan{animation:none;clip-path:polygon(0 0,100% 0,100% var(--tangan,70%),var(--kr,80%) var(--tangan,70%),var(--kr,80%) 62%,var(--kl,20%) 62%,var(--kl,20%) var(--tangan,70%),0 var(--tangan,70%));transform-origin:50% 62%}
.studio .kaki.ka{transform-origin:calc((var(--kl,20%) + var(--belah,50%)) / 2) 62%}
.studio .kaki.kb{transform-origin:calc((var(--belah,50%) + var(--kr,80%)) / 2) 62%}
.studio .fx{position:absolute;bottom:calc(100% - 12px);left:60%;height:44px;width:auto;pointer-events:none;animation:melayang 2.2s ease-in-out infinite}
.studio .fx[hidden],.studio .gelembung[hidden]{display:none}
.studio .gelembung{position:absolute;bottom:calc(100% + clamp(18px,calc(22px / var(--skala)),70px));left:50%;transform:translateX(-50%);max-width:17em;padding:.22em .6em;border:.13em solid #1c1b19;border-radius:.6em;background:#fff;color:#1c1b19;font:600 clamp(9px,calc(11.5px / var(--skala)),40px)/1.3 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:2}
.studio .gelembung.kiri{left:-20%;transform:none}
.studio .gelembung.kanan{left:auto;right:-20%;transform:none}
.studio .label{display:flex;align-items:center;gap:.3em;margin-top:2px;padding:.1em .45em;border-radius:.4em;background:rgba(14,18,32,.8);color:#fff;font:700 clamp(8px,calc(10.5px / var(--skala)),36px)/1.2 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap}
.studio .label::before{content:'';width:.55em;height:.55em;border-radius:50%;background:#a29e94}
.studio .orang.s-kerja .label::before{background:var(--hijau)}
.studio .orang.s-nunggu .label::before{background:var(--amber)}
.studio .orang.besar .label{background:#1c1b19;box-shadow:0 0 0 .12em var(--amber)}
.studio .orang.duduk .label{position:absolute;top:100%;left:50%;transform:translateX(-50%)}
.studio .orang.duduk .bayang{width:92%;bottom:-5px}
.studio .orang.s-kerja .badan{animation:ketik .45s steps(2) infinite}
.studio .orang.duduk.s-kerja .badan{animation:ketik-duduk .45s steps(2) infinite}
.studio .orang.s-nunggu:not(.jalan) .badan{animation:lompat 1.6s ease-in-out infinite}
.studio .orang.s-nunggu::after{content:'!';position:absolute;bottom:calc(100% + 4px);right:-6px;display:grid;place-items:center;width:clamp(14px,calc(19px / var(--skala)),60px);height:clamp(14px,calc(19px / var(--skala)),60px);border:2px solid #1c1b19;border-radius:50%;background:var(--amber);color:#1c1b19;font:800 clamp(10px,calc(12px / var(--skala)),40px)/1 system-ui,sans-serif;animation:denyut 1.2s ease-in-out infinite}
.studio .orang.turun .rig{animation:turun .42s ease-out}
.studio .orang.bangkit .rig{animation:bangkit .34s ease-in-out}
.studio .orang.sampai .rig{animation:sampai .42s ease-out}
.studio .orang.belok .rig{animation:belok .17s ease-out}
.studio .orang.reaksi:not(.jalan) .rig{animation:reaksi .45s ease-out}
@keyframes napas{50%{transform:scaleY(1.022) scaleX(.992)}}
@keyframes ketik{50%{transform:translateY(-3px)}}
@keyframes ketik-duduk{50%{transform:translateY(-1.5px)}}
@keyframes melayang{50%{transform:translateY(-8px)}}
@keyframes lompat{0%,45%,100%{transform:none}15%{transform:translateY(-16px) rotate(-3deg)}30%{transform:translateY(-6px) rotate(3deg)}}
@keyframes denyut{50%{scale:1.2}}
@keyframes turun{0%{transform:translateY(-16px) scaleY(1.07)}60%{transform:translateY(2px) scaleY(.96)}100%{transform:none}}
@keyframes bangkit{0%{transform:translateY(9px) scaleY(.88)}70%{transform:translateY(-2px) scaleY(1.03)}100%{transform:none}}
@keyframes sampai{35%{transform:scaleY(.94) scaleX(1.04)}100%{transform:none}}
@keyframes belok{0%{transform:scaleX(.74)}100%{transform:none}}
@keyframes reaksi{30%{transform:translateY(-7px) scaleY(1.05)}}

/* ---------- preview konten ---------- */
.jejak{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;color:var(--redup);font-size:14px}
.jejak a{text-decoration:none}
.jejak a:hover{color:var(--teks)}
.antre{display:flex;align-items:center;gap:8px}
.antre a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--garis-2);font-size:18px;color:var(--teks)}
.pratinjau{display:grid;grid-template-columns:minmax(0,420px) minmax(300px,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.pratinjau-media{position:sticky;top:76px}
.pratinjau-panel{display:grid;gap:18px;align-content:start}
.pratinjau-format{margin:0;color:var(--amber);font-weight:700}
.pratinjau-panel h1{margin:-10px 0 0;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.02em}

.ig{margin:0;border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--garis-2);box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative}
.ig-atas{display:flex;align-items:center;gap:9px;padding:11px 13px;font-size:14px}
.ig-avatar{width:30px;height:30px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);flex:none}
.ig-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #000;display:block}
.ig-media{position:relative;background:#0b0b0b}
.ig-geser{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5}
.ig-geser::-webkit-scrollbar{display:none}
.ig-geser img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;display:block}
.f-single .ig-geser{overflow:hidden}
.ig-titik{position:absolute;left:0;right:0;bottom:-22px;display:flex;justify-content:center;gap:2px}
.ig-titik button{width:14px;height:14px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.ig-titik button::before{content:'';width:6px;height:6px;border-radius:50%;background:#555}
.ig-titik button.aktif::before{background:#3897f0}
.ig-geser{cursor:grab}
.ig-geser.ditarik{cursor:grabbing;scroll-snap-type:none;user-select:none}
.ig-geser img{user-select:none;-webkit-user-drag:none}
.ig-panah{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#111;font:700 20px/1 system-ui,sans-serif;display:grid;place-items:center;padding:0 0 2px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ig-panah.kiri{left:10px}
.ig-panah.kanan{right:10px}
.ig-panah[hidden]{display:none}
.ig-panah:hover{background:#fff}
@media (hover:none){.ig-panah{width:30px;height:30px;margin-top:-15px;font-size:18px;background:rgba(255,255,255,.7)}}
.ig-hitung{position:absolute;right:10px;top:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.65);font-size:12px;font-weight:600}
.ig-reels{display:block;width:100%;aspect-ratio:9/16;max-height:76vh;object-fit:contain;background:#000}
.ig-kosong{display:grid;place-items:center;aspect-ratio:4/5;color:var(--redup)}
.ig-aksi{display:flex;gap:16px;padding:12px 14px 4px;font-size:22px;line-height:1}
.f-carousel .ig-aksi{padding-top:24px}
.ig-aksi .kanan{margin-left:auto}
.ig-caption{margin:0;padding:4px 14px 16px;font-size:14px;line-height:1.5;max-height:12em;overflow:auto}

.script{border-radius:18px;background:var(--panel);border:1px solid var(--garis);padding:18px}
.script-ket{margin:0 0 14px;color:var(--redup);font-size:14px}
.adegan{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:a}
.adegan li{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--garis)}
.adegan-no{font:700 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--amber)}
.adegan p{margin:0 0 6px}
.adegan p:last-child{margin:0}
.script-caption{margin-top:12px;padding-top:12px;border-top:1px solid var(--garis-2)}
.script-caption p{margin:0}

.status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;font-weight:600}
.status-catatan{flex-basis:100%;font-weight:400;color:var(--redup);font-size:14px}
.putus{display:grid;gap:10px}
.putus>form .tombol{width:100%;min-height:50px;font-size:16px}
.revisi summary{width:100%}
.revisi[open] summary{border-color:var(--koral);color:#ffc3b8}
.revisi form,.aju form{display:grid;gap:8px;margin-top:10px}
.revisi label,.aju label{font-weight:600;font-size:14px}
textarea,.aju input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--garis-2);background:var(--latar);color:var(--teks);font:inherit;resize:vertical}
.jadwal{padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--garis)}
.jadwal b{font-size:16px}
.usul{margin:8px 0 0;font-size:14px;color:var(--redup)}
.usul b{color:var(--amber);font-size:14px}
.aju summary{cursor:pointer;color:var(--redup);font-weight:600;font-size:14px;list-style:none}
.aju summary::-webkit-details-marker{display:none}
.aju summary::before{content:'↻ '}
.aju small{color:var(--redup)}
.tautan a{color:var(--amber);font-weight:600}
.pesan{max-width:520px;margin:12vh auto;text-align:center;display:grid;gap:14px;justify-items:center}

@media (max-width:860px){
.panggung,.pratinjau{grid-template-columns:1fr}
.pratinjau-media{position:static;max-width:440px;width:100%;margin:0 auto}
.studio{margin:0 calc(clamp(14px,3vw,32px) * -1)}
.studio-ket{left:clamp(14px,3vw,32px)}
.deret{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px 12px}
}
@media (max-width:480px){.kepala .merek span{display:none}.semua form{right:auto;left:0}}
@media (prefers-reduced-motion:reduce){.studio *{animation:none!important}.kk-gbr img,.kk-gbr video{transition:none}}

/* Courtify: Engineered Blue, kertas terang, tipografi lokal. */
:root{--latar:#EEEFF3;--latar-2:#E3E5EC;--panel:#F7F8FA;--panel-2:#E3E5EC;--garis:rgba(11,14,31,.12);--garis-2:rgba(11,14,31,.22);--teks:#0B0E1F;--redup:#515568;--amber:#2929E7;--hijau:#1B7F4B;--koral:#B03030;--biru:#2929E7;--ungu:#6546A7;--proses:#9298AD;color-scheme:light}
.kepala{background:rgba(247,248,250,.95);flex-wrap:wrap}.merek{color:var(--amber)}
.peran{display:flex;gap:4px;background:#E3E5EC;padding:4px;border-radius:999px}.peran form{margin:0}.peran button{font:600 12px 'Plus Jakarta Sans',sans-serif;border:0;background:transparent;color:var(--teks);padding:9px 12px;border-radius:999px;cursor:pointer;min-height:36px}.peran button[aria-current]{background:#2929E7;color:#fff}
.tombol.utama,.masuk-kotak button{background:var(--amber);color:#fff}.tombol.utama:hover{background:#1717b7}.flash{color:#145835;background:#e3f2e7}.masuk-salah{color:#B03030!important}.masuk-kotak input{text-transform:none;letter-spacing:0;font-family:inherit}.masuk-kotak input::placeholder{color:var(--redup);letter-spacing:0}.wordmark{color:#2929E7!important;font-weight:800;letter-spacing:.1em;font-size:12px}.masuk-kotak{border-radius:8px;border-top:6px solid #C1FD50;box-shadow:0 20px 60px #0b0e1f14}.masuk-kotak h1{font-size:40px}.masuk-studio{background:#0B0E1F;border-radius:16px;overflow:hidden}
.tim-nav,.tim-filter{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 30px}.tim-nav a,.tim-filter a{padding:9px 13px;border:1px solid var(--garis);border-radius:999px;text-decoration:none;font-weight:600;font-size:13px}.tim-filter a[aria-current]{background:var(--amber);color:white}.tim h1{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.05em;max-width:850px;margin:24px 0}.eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}.lead{font-size:17px;color:var(--redup);max-width:720px}.klien-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:32px 0}.brand-card{display:block;text-decoration:none;border-top:4px solid var(--amber);padding:24px;background:var(--panel);border-radius:0 0 12px 12px}.brand-card h2{font-size:30px;margin:16px 0}.brand-card progress{width:100%;accent-color:#2929E7}.status-ringkas{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;font-size:12px}.status-ringkas span{padding:5px 9px;background:#EEEFF3;border-radius:5px}.form-panel{background:var(--panel);border:1px solid var(--garis);border-radius:10px;padding:22px;margin:20px 0}.form-panel summary{cursor:pointer;font-weight:700}.form-panel form{display:grid;gap:14px;margin-top:16px}.form-panel label{display:grid;gap:6px;font-size:13px;font-weight:600}.form-panel input,.form-panel textarea{width:100%;max-width:100%;min-width:0;background:#fff;color:var(--teks);border:1px solid var(--garis-2);padding:12px;border-radius:6px;font:inherit}.form-panel textarea{min-height:110px;resize:vertical}.form-panel button{padding:12px 16px;background:var(--amber);color:#fff;border:0;border-radius:6px;font:600 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer}.papan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}.kolom{min-width:0}.kolom>h2{font-size:13px;min-height:40px;display:flex;justify-content:space-between;border-bottom:2px solid var(--amber);padding-bottom:10px}.kolom>h2 span{color:var(--redup)}.papan-kartu{display:block;text-decoration:none;background:var(--panel);padding:10px;border:1px solid var(--garis);border-radius:10px;margin:12px 0;transition:transform .15s}.papan-kartu:hover{transform:translateY(-3px)}.papan-kartu h3{font-size:13px;line-height:1.5;margin:8px 0}.papan-kartu small{color:var(--amber);text-transform:uppercase;font-size:10px;letter-spacing:.09em}.papan-kartu p{font-size:11px;color:var(--redup)}.papan-gambar{position:relative;aspect-ratio:1;overflow:hidden;background:#E3E5EC;border-radius:5px;margin-bottom:10px;display:grid;place-items:center}.papan-gambar img,.papan-gambar video{width:100%;height:100%;object-fit:cover}.bahan-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.panduan pre{background:#0B0E1F;color:#C1FD50;padding:22px;border-radius:8px;line-height:1.9}.panduan p{color:var(--redup)}.bahan-item{border-top:1px solid var(--garis);padding-top:20px;margin-top:20px;overflow-wrap:anywhere}.nav-bawah{background:rgba(247,248,250,.98)}
@media(max-width:900px){.papan{grid-template-columns:repeat(2,minmax(0,1fr))}.bahan-layout{grid-template-columns:1fr}.kepala-klien{display:none}}
@media(max-width:520px){.kepala{gap:8px;padding:10px 14px}.merek{flex:1;font-size:14px}.peran{order:3;width:100%;justify-content:center}.kepala-keluar{margin:0}.tim-nav{gap:6px;margin:8px 0 26px}.tim-nav a{font-size:11px;padding:8px 10px}.papan{grid-template-columns:1fr}.kolom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kolom>h2{grid-column:1/-1;margin-bottom:0}.papan-kartu{margin:0}.masuk-kotak h1{font-size:32px}.bahan-layout{gap:12px}.form-panel{padding:16px}.tim h1{font-size:38px}.lead{font-size:15px}}
/* Kontras komponen portal lama pada tema kertas Courtify. */
.ig{color:#F7F8FA;box-shadow:0 16px 40px rgba(11,14,31,.15)}.ig-kosong{color:#b7bac7}.saring{background:rgba(247,248,250,.97);top:64px}.chip.aktif,.chip.aktif b{color:#fff}.revisi[open] summary{color:var(--koral)}.b-belum{background:#c7cbd7}.kk-nunggu .kk-gbr{border-color:var(--amber);box-shadow:0 0 0 3px rgba(41,41,231,.09)}.studio .orang.s-nunggu::after{background:var(--aksen,#C1FD50)}.brand-card h2,.papan-kartu h3{overflow-wrap:anywhere}.wordmark{color:var(--amber)!important}.brand-card progress{accent-color:var(--amber)}.panduan pre{color:var(--aksen,#C1FD50)}
@media(max-width:520px){.kepala .merek span{display:inline}.saring{top:103px;scroll-margin-top:110px}}
/* Layar lebar: navigasi mengikuti alur halaman dan tidak menimpa panel aksi. */
@media(min-width:900px){.nav-bawah{position:static;transform:none;width:min(620px,100%);margin:28px auto 0}.ada-nav-bawah main{padding-bottom:64px}}