.mobile-hub-page{background:#050505;color:#eee;padding-bottom:85px}.mobile-hub-main{max-width:680px;margin:auto}.mobile-hub-page .mobile-bottom-nav{display:grid;max-width:680px;margin:auto}.hub-profile-header{position:relative;overflow:hidden;min-height:250px;padding:90px 26px 25px}.hub-profile-art{position:absolute;width:120%;height:230px;left:0;top:-120px;border-radius:0 0 50% 50%;background:linear-gradient(110deg,#8648ba,#e83b64);transform:rotate(12deg);z-index:0}.hub-profile-header h1,.hub-profile-header p,.hub-avatar{position:relative}.hub-profile-header h1{font-size:30px;line-height:1.5;overflow-wrap:anywhere}.hub-profile-header h1 button{background:transparent;border:0;color:#eee;font:inherit;font-weight:700;cursor:pointer;padding:0}.hub-profile-header p{color:#999;font-size:13px}.hub-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#372432;font-size:25px;margin-bottom:12px}.hub-vip{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:calc(100% - 40px);margin:10px 20px 24px;padding:25px;border-radius:22px;border:1px solid #a55eed55;background:linear-gradient(120deg,#2a154e,#75359b);color:white;gap:12px}.hub-vip strong{font-size:20px}.hub-vip span{font-size:13px;color:#d0b9e5;line-height:1.6}.hub-vip b{padding:8px 16px;border-radius:20px;background:#fff;color:#21152f;font-size:12px}.hub-profile-menu{padding:0 25px}.hub-profile-menu a{display:flex;justify-content:space-between;padding:25px 0;color:#c6c6cc;font-size:16px}.hub-library-tabs{display:flex;gap:28px;padding:28px 22px}.hub-library-tabs a{font-size:21px;font-weight:650;color:#777}.hub-library-tabs a.active{color:#ff6885}.hub-library-empty{min-height:60svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px}.hub-library-empty>span{font-size:90px;color:#70404d}.hub-library-empty p{font-size:13px;line-height:1.7;color:#888;margin:25px 0}.hub-library-empty a,.hub-library-empty button{background:#282828;color:#ddd;border:0;border-radius:30px;padding:12px 28px;font:inherit;font-size:14px}.hub-library-grid{padding:0 16px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}.hub-library-grid .catalog-art{aspect-ratio:2/3}.clips-feed{height:calc(100svh - 78px);overflow-y:auto;scroll-snap-type:y mandatory}.clip-card{height:calc(100svh - 78px);position:relative;scroll-snap-align:start;scroll-snap-stop:always;background:#111;overflow:hidden}.clip-card video{width:100%;height:100%;object-fit:contain;background:#050505}.clip-shade{position:absolute;bottom:65px;left:0;right:0;padding:50px 20px 18px;background:linear-gradient(transparent,#000d);pointer-events:none}.clip-shade span{font-size:10px;color:#ccc}.clip-shade h2{font-size:21px;margin:8px 0}.clip-shade p{font-size:12px;color:#aaa;margin:8px 0}.clip-shade button,.clip-shade a{pointer-events:auto;display:inline-block;padding:12px 16px;border-radius:9px;background:#ef4163;color:white;border:0;font-size:12px;margin:8px 8px 0 0}.clip-shade button{background:#ffffff20}.mobile-hub-page .modal{z-index:200}
@media(max-width:720px){
.mobile-discover-genres button{white-space:nowrap;padding:9px 17px;border-radius:999px;background:#202020;color:#999;font:inherit;font-size:13px;border:0;flex-shrink:0}.mobile-discover-genres button.is-active{background:#35222a;color:#ff8da3}
body[data-page="home"] #homeBrowse[hidden]{display:block!important}body[data-page="home"] #searchResults{display:none!important}
body[data-page="home"] #homeDramaGrid{align-items:stretch}
body[data-page="home"] #homeDramaGrid .catalog-card{height:100%;display:flex;flex-direction:column}
body[data-page="home"] #homeDramaGrid .catalog-art{flex:none;width:100%;aspect-ratio:2/3}
body[data-page="home"] #homeDramaGrid .catalog-card h3{height:40px;min-height:40px;line-height:20px;font-size:13px;margin-top:10px}
body[data-page="home"] #homeDramaGrid .catalog-card>p{height:17px;line-height:17px;margin-top:auto}
.discover-filter{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:78dvh;border:0;border-radius:22px 22px 0 0;background:#202020;color:#eee;padding:18px 18px max(26px,env(safe-area-inset-bottom));overflow-y:auto}.discover-filter::backdrop{background:#0009}.discover-filter header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:22px}.discover-filter h2{font-size:18px}.discover-filter header button{position:absolute;left:0;background:none;border:0;color:#ddd;font-size:28px}.discover-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.discover-filter-options button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:30px;padding:14px 10px;background:#333;color:#ccc;font:inherit;font-size:13px}.discover-filter-options button.is-active{background:#50303a;color:#ff8da3}.hub-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:721px){.discover-filter{display:none}}

@media(max-width:720px){
    body.hub-cuplikan{--clip-nav-height:calc(59px + max(10px,env(safe-area-inset-bottom)));height:100dvh;padding:0;overflow:hidden}
    .hub-cuplikan .mobile-hub-main{width:100%;max-width:none;margin:0}
    .hub-cuplikan .clips-feed,.hub-cuplikan .clip-card{height:calc(100dvh - var(--clip-nav-height))}
    .hub-cuplikan .clip-card video{object-fit:cover}
}

.hub-recent{margin:26px 20px}.hub-recent-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:12px;color:#ddd}.hub-recent-heading span{font-size:24px}.hub-recent-posters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;border-radius:15px;background:#202020;padding:12px}.hub-recent-posters a{min-width:0;display:block}.hub-recent-posters img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px}.hub-recent-empty{font-size:12px;color:#8a8a92;padding:16px;background:#171717;border-radius:12px}

.hub-profile-guest {
    min-height: 290px;
    padding-bottom: 8px;
}

.hub-profile-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.hub-profile-brand .site-brand-image {
    width: auto;
    height: 44px;
    max-width: 200px;
    object-fit: contain;
}

.hub-profile-auth {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 65px;
    padding-bottom: 0;
}

.hub-profile-auth button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 130px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.hub-profile-auth .hub-profile-login {
    background: #c92d57;
    box-shadow: 0 6px 20px #c92d5733;
}

.hub-profile-auth .hub-profile-register {
    border-color: #b75e78;
    background: #25151c;
}

.hub-profile-auth button:hover {
    filter: brightness(1.15);
}

.hub-profile-auth button:active {
    transform: translateY(1px);
}

.hub-profile-auth button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* Keep offscreen clips out of layout/paint work while retaining snap geometry. */
.hub-cuplikan .clip-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 100svh;
    scroll-snap-stop: normal;
}

.hub-cuplikan .clips-feed {
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.hub-cuplikan .clip-sound {
    backdrop-filter: none;
}

.hub-cuplikan .clip-social button {
    filter: none;
}