/* SOXVO — Jelajahi: feed vertikal satu konten per layar (video, foto, galeri, teks, artikel, produk, jasa, bisnis baru).
   Komponen dasar (xf-top, xf-who, xf-side, xf-foot, xf-cta, lembar bawah) dipakai semua jenis; tiap jenis hanya mengisi latar dan isi utamanya. */
body.is-xf{overflow:hidden!important;overscroll-behavior:none}
body.is-xf .mega-foot,body.is-xf footer,body.is-xf .apk-prompt,body.is-xf .apk-banner,body.is-xf .soxvo-apk-nudge{display:none!important}
/* HP: header situs diganti bilah atas feed. Desktop: header situs tetap tampil dan area feed dibatasi lebarnya. */
@media(max-width:900px){body.is-xf .fusion-topnav,body.is-xf .li-topnav,body.is-xf .pillar-strip{display:none!important}}
.xf{position:fixed;left:0;right:0;top:var(--vt-top,0px);bottom:var(--vt-bot,0px);z-index:45;background:#000;color:#fff;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}
@supports(height:100dvh){.xf{bottom:auto;height:calc(100dvh - var(--vt-top,0px) - var(--vt-bot,0px))}}
.xf *{box-sizing:border-box}
.xf-feed{position:relative;width:100%;max-width:520px;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#000;outline:0}
.xf-feed::-webkit-scrollbar{display:none}
.xf-item{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#0b0d14;overflow:hidden;isolation:isolate}
.xf-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.xf-bg>img.xf-blur{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(28px) brightness(.55) saturate(1.15)}
.xf-bg>img.xf-cover,.xf-bg>video.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xf-bg>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.xf-bg>img.xf-fit{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.xf-poster{position:absolute;inset:0;background:#0b0d14 center/contain no-repeat;transition:opacity .25s}
.xf-item.ready .xf-poster{opacity:0;pointer-events:none}
.xf-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.5) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 46%,rgba(0,0,0,.82) 100%)}
.xf-shade.soft{background:linear-gradient(rgba(0,0,0,.35) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 60%,rgba(0,0,0,.5) 100%)}
.xf-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;opacity:.35}

/* Bilah atas */
.xf-top{position:absolute;left:0;right:0;top:0;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 6px;pointer-events:none}
.xf-top>*{pointer-events:auto}
.xf-logo{display:inline-flex;align-items:center;justify-self:start;color:#fff;text-decoration:none}
.xf-logo span{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#2f4bd6);display:grid;place-items:center;font-weight:900;font-size:15px}
.xf-tabs{display:flex;gap:0;justify-self:center}
.xf-tab{background:none;border:0;color:rgba(255,255,255,.66);font:inherit;font-size:15px;font-weight:700;padding:8px 9px;cursor:pointer;position:relative;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap}
.xf-tab.on{color:#fff}
.xf-tab.on::after{content:"";position:absolute;left:28%;right:28%;bottom:1px;height:2.5px;border-radius:2px;background:#fff}
.xf-searchbtn{justify-self:end;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:19px;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Identitas kreator (kiri atas) */
.xf-who{position:absolute;left:12px;right:60px;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:5;display:grid;gap:6px;justify-items:start;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.xf-who-row{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.xf-ava{flex:none;position:relative;width:42px;height:42px;display:block;color:#fff;text-decoration:none}
.xf-ava img,.xf-ava .ph{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.9);object-fit:cover;background:#2a2f45;display:grid;place-items:center;font-weight:800;font-size:17px}
.xf-who-tx{min-width:0;display:grid;line-height:1.25}
.xf-who-tx a{color:#fff;font-weight:800;font-size:15px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xf-who-tx small{font-size:12.5px;color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xf-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border-radius:999px;background:#3b4fe0;color:#fff;font-size:12.5px;font-weight:700;text-shadow:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xf-chip i{font-size:13px}
.xf-chip.alt{background:linear-gradient(135deg,#7c4dff,#a855f7)}
.xf-more{position:absolute;right:10px;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:6;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Isi utama per jenis */
.xf-main{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 150px);bottom:200px;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:0 22px 0 26px}
.xf-text{font-weight:800;line-height:1.22;letter-spacing:-.01em;overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.xf-text.s{font-size:34px;-webkit-line-clamp:6}.xf-text.m{font-size:27px;-webkit-line-clamp:9}.xf-text.l{font-size:21px;font-weight:700;line-height:1.32;-webkit-line-clamp:12}.xf-text.xl{font-size:18px;font-weight:600;line-height:1.4;-webkit-line-clamp:14}
.xf-text a,.xf-cap a{color:#fff;font-weight:800;text-decoration:none}
.xf-readmore{margin-top:12px;align-self:flex-start;background:rgba(255,255,255,.16);border:0;color:#fff;font:inherit;font-size:13.5px;font-weight:800;border-radius:999px;padding:8px 16px;cursor:pointer}
.xf-main.center{align-items:flex-start}

/* Rangkaian foto (carousel horizontal) */
.xf-gal{position:absolute;inset:0;z-index:2;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.xf-gal::-webkit-scrollbar{display:none}
.xf-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative}
.xf-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.xf-dots{position:absolute;left:0;right:78px;bottom:var(--xf-dots-bottom,176px);z-index:4;display:flex;justify-content:center;gap:5px;pointer-events:none}
.xf-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .15s}
.xf-dots i.on{background:#fff;width:16px;border-radius:4px}
.xf-count{position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 108px);z-index:5;background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.xf-gal-nav{position:absolute;top:50%;z-index:4;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:none;place-items:center;font-size:17px;cursor:pointer}
.xf-gal-nav.prev{left:8px}.xf-gal-nav.next{right:64px}
@media(hover:hover) and (pointer:fine){.xf-item:hover .xf-gal-nav{display:grid}}

/* Kaki: caption, hashtag, kartu aksi */
.xf-foot{position:absolute;left:14px;right:76px;bottom:12px;z-index:5;display:grid;gap:7px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.xf-title{font-size:21px;line-height:1.2;font-weight:800;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xf-name{font-size:15.5px;font-weight:800}
.xf-cap{font-size:14px;line-height:1.42;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.xf-cap.open{-webkit-line-clamp:unset;display:block;max-height:30vh;overflow:auto}
.xf-expand{background:none;border:0;color:rgba(255,255,255,.8);font:inherit;font-size:12.5px;font-weight:800;padding:0;cursor:pointer;justify-self:start}
.xf-tags{display:flex;gap:6px;overflow:hidden;flex-wrap:nowrap;text-shadow:none}
.xf-tags a{flex:none;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none}
.xf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;color:rgba(255,255,255,.88)}
.xf-meta b{font-size:17px;color:#fff}
.xf-cta{display:flex;align-items:center;gap:10px;padding:9px;border-radius:16px;background:rgba(18,22,38,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);text-shadow:none}
.xf-cta-img{flex:none;width:56px;height:56px;border-radius:11px;background:rgba(255,255,255,.14) center/cover no-repeat;display:grid;place-items:center;font-size:22px;overflow:hidden}
.xf-cta-tx{min-width:0;flex:1;display:grid;gap:5px}
.xf-cta-tx b{font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.xf-cta-tx small{font-size:12px;color:rgba(255,255,255,.75)}
.xf-btns{display:flex;flex-wrap:wrap;gap:6px}
.xf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;background:#2f54f0;color:#fff;font:inherit;font-size:13.5px;font-weight:800;padding:9px 14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.xf-btn.ghost{background:rgba(255,255,255,.18)}
.xf-btn.solid{background:#fff;color:#000;border-radius:999px;padding:10px 20px;font-size:14px}
.xf-btn[disabled]{opacity:.5}

/* Aksi kanan: posisi sama untuk semua jenis */
.xf-side{position:absolute;right:7px;bottom:14px;z-index:6;display:grid;gap:12px;justify-items:center}
.xf-sava{position:relative;width:48px;height:48px;margin-bottom:8px;display:block;color:#fff}
.xf-sava img,.xf-sava .ph{width:48px;height:48px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:#2a2f45;display:grid;place-items:center;font-weight:800;font-size:18px}
.xf-plus{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:2px solid #000;background:#ef4565;color:#fff;display:grid;place-items:center;font-size:15px;cursor:pointer;padding:0}
.xf-plus[hidden]{display:none}
.xf-act{display:grid;justify-items:center;gap:2px;background:none;border:0;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.7);min-width:48px}
.xf-act i{width:46px;height:44px;display:grid;place-items:center;font-size:29px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:transform .15s}
.xf-act:active i{transform:scale(.85)}
.xf-act.on i{color:#ff3b5c}
.xf-act.sv.on i{color:#fbbf24}
.xf-act[disabled]{opacity:.6}

/* Video */
.xf-mute{position:absolute;top:calc(env(safe-area-inset-top,0px) + 108px);right:10px;z-index:6;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.42);color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer}
.xf-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:36px;display:none;place-items:center;pointer-events:none;z-index:3}
.xf-item.paused .xf-play{display:grid}
.xf-spin{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:xf-rot .8s linear infinite;display:none;z-index:3}
.xf-item.loading .xf-spin{display:block}
@keyframes xf-rot{to{transform:rotate(360deg)}}
.xf-fail{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.72);text-align:center;padding:24px}
.xf-item.failed .xf-fail{display:flex}
.xf-fail i{font-size:34px}
.xf-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22);z-index:6}
.xf-bar span{display:block;height:100%;width:0;background:#fff}
.xf-hint{position:absolute;left:0;right:0;bottom:calc(var(--xf-hint,230px));z-index:4;text-align:center;font-size:12.5px;font-weight:700;pointer-events:none;animation:xf-hint 4.2s ease forwards;text-shadow:0 1px 4px rgba(0,0,0,.8)}
@keyframes xf-hint{0%,70%{opacity:.95;transform:translateY(0)}100%{opacity:0;transform:translateY(-14px)}}

/* Kartu bisnis / logo */
.xf-logo-card{width:112px;height:112px;border-radius:28px;background:#fff center/cover no-repeat;box-shadow:0 14px 40px rgba(0,0,0,.35);display:grid;place-items:center;font-size:44px;color:#2f54f0;margin-bottom:16px;overflow:hidden}
.xf-logo-card img{width:100%;height:100%;object-fit:cover}
.xf-big{font-size:30px;line-height:1.12;font-weight:800;margin:0 0 8px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xf-sub{font-size:15px;line-height:1.45;opacity:.92;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* Status */
.xf-state{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px;background:#000}
.xf-state[hidden]{display:none}
.xf-state i{font-size:46px;opacity:.9}
.xf-state p{margin:0;max-width:320px;line-height:1.5;font-size:15px}
.xf-state .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.xf-loadmore{height:90px;display:grid;place-items:center;scroll-snap-align:end;color:rgba(255,255,255,.7);font-size:13px;background:#000}
.xf-loadmore .xf-spin{display:block;position:static}
.xf-toast{position:absolute;left:50%;bottom:calc(14% + 8px);transform:translate(-50%,10px);z-index:30;max-width:86%;padding:10px 16px;border-radius:12px;background:rgba(20,22,32,.94);color:#fff;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .22s;text-align:center}
.xf-toast.show{opacity:1;transform:translate(-50%,0)}

/* Lembar bawah: komentar, menu, laporan, teks lengkap */
.xf-sheet{position:absolute;inset:0;z-index:25;display:flex;align-items:flex-end;justify-content:center}
.xf-sheet[hidden]{display:none}
.xf-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.xf-sheet-box{position:relative;width:100%;max-width:520px;max-height:84%;min-height:30%;display:flex;flex-direction:column;background:#161925;color:#fff;border-radius:20px 20px 0 0;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);animation:xf-up .22s ease-out}
@keyframes xf-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.xf-sheet-box h3{margin:6px 4px 10px;font-size:16px;text-align:center}
.xf-grab{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.28);margin:0 auto 6px;flex:none}
.xf-sheet-scroll{overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.xf-row{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-radius:12px;color:#fff;font:inherit;font-size:15px;font-weight:600;padding:13px 10px;cursor:pointer;text-align:left;text-decoration:none}
.xf-row:active{background:rgba(255,255,255,.08)}
.xf-row i{font-size:19px;width:24px;text-align:center}
.xf-row.bad{color:#ff6b81}
.xf-reason{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;font-size:15px;cursor:pointer}
.xf-reason input{accent-color:#6366f1;width:18px;height:18px}
.xf-sheet-box textarea,.xf-cform input{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:inherit;padding:10px;resize:vertical}
.xf-sheet-box textarea{min-height:70px;margin:6px 0 10px}
.xf-sheet-actions{display:flex;gap:10px}.xf-sheet-actions .xf-btn{flex:1}
.xf-full{font-size:17px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;padding:4px 6px 10px}
.xf-cm{display:flex;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.xf-cm-a{flex:none;width:32px;height:32px;border-radius:50%;background:#2a2f45;display:grid;place-items:center;font-weight:800;font-size:13px;overflow:hidden}
.xf-cm-a img{width:100%;height:100%;object-fit:cover}
.xf-cm-b{min-width:0;flex:1;display:grid;gap:3px}
.xf-cm-b b{font-size:13px}.xf-cm-b b small{font-weight:600;opacity:.6;margin-left:6px}
.xf-cm-b p{margin:0;font-size:14px;line-height:1.42;overflow-wrap:anywhere;white-space:pre-line}
.xf-cm-b button.link{justify-self:start;background:none;border:0;color:rgba(255,255,255,.65);font:inherit;font-size:12.5px;font-weight:700;padding:2px 0;cursor:pointer}
.xf-replies{display:grid;gap:8px;margin-top:6px;padding-left:10px;border-left:2px solid rgba(255,255,255,.12)}
.xf-replies .xf-cm{padding:4px 0;border:0}
.xf-cform{display:flex;gap:8px;align-items:center;padding-top:10px;flex:none}
.xf-cform input{flex:1;resize:none;padding:11px 14px;border-radius:999px}
.xf-cform .xf-btn{border-radius:999px;padding:11px 16px}
.xf-empty{padding:28px 10px;text-align:center;opacity:.75;font-size:14px}
.xf-rep-to{font-size:12.5px;color:rgba(255,255,255,.7);padding:4px 4px 0;display:flex;justify-content:space-between;align-items:center;flex:none}
.xf-rep-to button{background:none;border:0;color:#9db4ff;font:inherit;font-weight:700;cursor:pointer}

/* Responsif */
@media(max-width:380px){.xf-tab{font-size:14px;padding:8px 6px}.xf-text.s{font-size:30px}.xf-text.m{font-size:24px}.xf-big{font-size:26px}.xf-title{font-size:19px}}
@media(max-height:700px){.xf-main{top:calc(env(safe-area-inset-top,0px) + 132px);bottom:176px}.xf-text.s{font-size:30px}.xf-text.m{font-size:23px}.xf-text.l{font-size:18px}.xf-text.xl{font-size:16px}.xf-title{font-size:18px;-webkit-line-clamp:2}.xf-cap{-webkit-line-clamp:2}.xf-logo-card{width:84px;height:84px;border-radius:22px}.xf-big{font-size:24px}.xf-cta-img{width:46px;height:46px}}
@media(max-height:560px),(orientation:landscape) and (max-height:480px){.xf-who .xf-chip{display:none}.xf-cta-img{display:none}.xf-main{top:calc(env(safe-area-inset-top,0px) + 112px);bottom:130px}.xf-act i{width:38px;height:36px;font-size:23px}.xf-side{gap:4px}.xf-hint{display:none}}
@media(min-width:901px){.xf-feed{border-left:1px solid #1d2030;border-right:1px solid #1d2030}.xf-top{max-width:520px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.xf-spin{animation-duration:2s}.xf-hint,.xf-sheet-box{animation:none}.xf-feed{scroll-behavior:auto}}
.xf-shade.up{z-index:3}