@media (max-width:1440px){ .video-grid{ grid-template-columns:repeat(4, 1fr) } .perks-grid{ grid-template-columns:repeat(3, 1fr) } } @media (max-width:1280px){ .page-body-grid{ flex-direction:column; padding:20px 16px } .right-sidebar-column{ width:100%; min-width:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; align-items:start } .video-grid{ grid-template-columns:repeat(4, 1fr) } } @media (max-width:992px){ .left-sidebar{ position:fixed; top:0; left:0; width:280px; max-width:85vw; height:100vh; height:100dvh; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow:10px 0 40px rgba(0, 0, 0, 0.8); z-index:10000 } .left-sidebar.show-mobile{ transform:translateX(0) } .sidebar-header-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px } .sidebar-close-btn{ display:flex !important; align-items:center; justify-content:center; width:36px; height:36px; background:rgba(255, 255, 255, 0.06); border:1px solid var(--border-color); border-radius:50%; color:var(--text-main); font-size:16px; cursor:pointer; transition:all 0.2s ease } .sidebar-close-btn:hover{ color:var(--primary); background:rgba(255, 46, 117, 0.15); border-color:var(--primary) } .mobile-menu-backdrop{ position:fixed; inset:0; background-color:rgba(0, 0, 0, 0.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:9999; display:none } .mobile-menu-backdrop.show{ display:block } .mobile-toggle-btn{ display:inline-flex !important; align-items:center; justify-content:center } .mobile-brand-logo{ display:inline-flex !important } .video-grid{ grid-template-columns:repeat(3, 1fr); gap:14px } .categories-grid{ grid-template-columns:repeat(3, 1fr) } .actresses-directory-grid{ grid-template-columns:repeat(3, 1fr) } .studios-grid{ grid-template-columns:repeat(3, 1fr) } .collections-grid{ grid-template-columns:repeat(2, 1fr) } .footer-grid{ grid-template-columns:1fr 1fr; gap:24px } } @media (max-width:768px){ body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)) } .page-body-grid{ padding:14px 10px } .top-header{ height:60px; padding:0 12px; gap:10px } .btn-header-premium, .header-icon-btn[title="Watch History"], .header-icon-btn[title="Notifications"]{ display:none !important } .header-search-container{ flex:1; min-width:0 } .search-input-box{ height:38px; font-size:13px; padding-left:36px; border-radius:9999px } .search-btn-icon{ font-size:14px; left:12px } .user-avatar-btn{ width:36px; height:36px } .hero-slider-container{ min-height:250px; margin-bottom:20px; border-radius:16px } .hero-content-box{ padding:20px 16px; min-height:250px; justify-content:flex-end; max-width:100% } .hero-title{ font-size:18px; line-height:1.3; margin-bottom:8px } .hero-backdrop-img{ width:100%; opacity:0.38 } .hero-meta-chips{ gap:6px; margin-bottom:12px } .hero-meta-chip{ font-size:11px; padding:3px 8px } .hero-synopsis{ display:none !important } .hero-cta-group{ gap:8px } .btn-hero-watch, .btn-hero-fav{ padding:8px 14px; font-size:12.5px; height:38px; border-radius:var(--radius-btn) } .video-grid{ grid-template-columns:repeat(2, 1fr); gap:12px } .video-card-thumb{ border-radius:12px } .video-card-body{ padding:10px 8px 6px } .video-card-title{ font-size:13px; line-height:1.35; margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .video-card-code{ font-size:11.5px } .video-card-footer{ font-size:11px; padding-top:4px } .categories-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:24px } .category-card{ padding:16px 12px; border-radius:14px } .category-icon-box{ width:42px; height:42px; min-width:42px; font-size:18px; border-radius:10px } .category-title{ font-size:14px } .category-desc{ display:none } .category-footer{ padding-top:8px; font-size:11px } .actresses-directory-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:24px } .actress-directory-card{ padding:16px 10px 12px; border-radius:14px } .actress-avatar-wrapper{ width:72px; height:72px; margin-bottom:8px } .actress-card-name{ font-size:13.5px } .actress-card-jp{ font-size:11px; margin-bottom:6px } .actress-card-badge{ font-size:10.5px; padding:3px 8px } .studios-grid{ grid-template-columns:repeat(2, 1fr); gap:10px } .studio-card{ padding:12px 10px; gap:10px; border-radius:14px } .studio-logo-box{ width:40px; height:40px; min-width:40px; font-size:18px; border-radius:10px } .studio-name{ font-size:13px } .collections-grid{ grid-template-columns:1fr; gap:12px } .collection-card{ padding:16px 14px; border-radius:14px } .tags-cloud-container{ padding:16px 12px; gap:8px } .tag-pill-item{ padding:6px 12px; font-size:12px } .player-box, .video-player-container{ aspect-ratio:16/9; width:100%; border-radius:14px; overflow:hidden } .player-servers-bar{ padding:12px 10px; flex-direction:column; align-items:stretch; gap:12px; margin-bottom:18px; border-radius:14px } .server-pills{ display:flex; align-items:center; gap:6px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; width:100%; padding-bottom:2px } .server-btn{ padding:6px 12px; font-size:11.5px; white-space:nowrap; flex-shrink:0 } .video-action-bar{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; width:100% } .btn-video-action{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 2px; font-size:10.5px; gap:4px; text-align:center; border-radius:10px; min-height:48px; width:100% } .btn-video-action i{ font-size:15px } .video-detail-title{ font-size:18px; line-height:1.35 } .sidebar-widget{ padding:18px 14px !important; border-radius:16px } .category-hero-header, .actress-hero-profile{ padding:18px 14px; flex-direction:column; align-items:flex-start; gap:14px; border-radius:16px } .actress-hero-avatar{ width:76px; height:76px; min-width:76px } .mobile-bottom-nav{ position:fixed; bottom:0; left:0; width:100%; height:calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); background-color:var(--bg-sidebar); border-top:1px solid var(--border-color); display:flex !important; align-items:center; justify-content:space-around; z-index:9999; box-shadow:0 -4px 20px rgba(0, 0, 0, 0.4) } .mobile-nav-link{ display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text-darker); font-size:10px; font-weight:600; text-decoration:none; padding:4px 8px; transition:all 0.2s ease } .mobile-nav-link i{ font-size:19px; transition:transform 0.2s ease } .mobile-nav-link.active, .mobile-nav-link:hover{ color:var(--primary) } .mobile-nav-link.active i{ transform:scale(1.1); filter:drop-shadow(0 0 6px rgba(255, 46, 117, 0.6)) } .perks-grid{ grid-template-columns:1fr; gap:12px } .footer-grid{ grid-template-columns:1fr; gap:24px; text-align:center } .footer-about{ margin:0 auto } .footer-bottom{ flex-direction:column; gap:12px; text-align:center } } @media (max-width:480px){ .top-header{ height:54px; padding:0 8px } .mobile-brand-logo .logo-text{ display:none !important } .page-body-grid{ padding:10px 8px } .video-grid{ grid-template-columns:repeat(2, 1fr); gap:8px } .video-card-body{ padding:8px 6px 4px } .video-card-title{ font-size:12px; margin:3px 0 2px } .video-card-code{ font-size:10.5px } .actress-tag, .views-count{ font-size:10px } .section-title{ font-size:16px } .view-all-link{ font-size:11.5px; padding:3px 8px } .modal-box{ width:95% !important; padding:18px 12px !important } .share-social-grid{ grid-template-columns:repeat(3, 1fr) !important; gap:8px !important } } @media (min-width:993px){ .mobile-toggle-btn{ display:none !important } .mobile-brand-logo{ display:none !important } .mobile-bottom-nav{ display:none !important } .sidebar-close-btn{ display:none !important } }