/* ============================================================ WatchLane — ui-optimized.css [v12] Global UI Optimization: Visual, Performance, Mobile, UX Load LAST di , setelah semua CSS lain. ============================================================ */ /* ══════════════════════════════════════════════════════════ 0. CSS LAYERS — kontrol cascade agar patch tidak perlu !important ══════════════════════════════════════════════════════════ */ @layer base, components, enhancements, motion, responsive; /* ══════════════════════════════════════════════════════════ 1. DESIGN TOKEN REFINEMENTS Upgrade token yang ada tanpa breaking existing code ══════════════════════════════════════════════════════════ */ @layer base { :root { /* ── Warna latar: lebih dalam, lebih sinematik ── */ --bg: #060710; --surface-1: #0B0D1C; --surface-2: #111424; --surface-3: #171A2E; --surface-4: #1E2138; /* ── Accent merah: lebih vivid di bawah, lebih pastel di atas ── */ --red: #F91E42; --red-light: #FF5470; --red-glow: rgba(249, 30, 66, 0.20); --red-dim: rgba(249, 30, 66, 0.10); --red-border: rgba(249, 30, 66, 0.30); --red-shadow: 0 0 16px rgba(249, 30, 66, 0.44); --red-shadow-lg: 0 0 40px rgba(249, 30, 66, 0.30); --red-shadow-xl: 0 0 80px rgba(249, 30, 66, 0.20); /* ── Text: sedikit lebih hangat ── */ --text-1: #EFF1FF; --text-2: #8E94BB; --text-3: #696E90; /* ── Gradients: cinematic depth ── */ --gradient-card: linear-gradient(to top, rgba(6,7,16,0.98) 0%, rgba(6,7,16,0.60) 50%, transparent 100%); --gradient-card-sm: linear-gradient(to top, rgba(6,7,16,0.96) 0%, rgba(6,7,16,0.40) 65%, transparent 100%); --gradient-brand: linear-gradient(135deg, #F91E42 0%, #B5082A 100%); /* ── Easing: spring lebih natural ── */ --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* ── Durasi: sedikit lebih cepat = feels snappier ── */ --t-fast: 0.10s var(--ease-smooth); --t-base: 0.18s var(--ease-smooth); --t-slow: 0.32s var(--ease-smooth); /* ── Spacing scale baru ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Radius lebih konsisten ── */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; /* ── Nav height upgrade ── */ --nav-h: 56px; /* ── Content width ── */ --content-max: 1400px; } } /* ══════════════════════════════════════════════════════════ 2. TYPOGRAPHY SYSTEM Scale, rhythm, optical sizing ══════════════════════════════════════════════════════════ */ @layer base { /* Font size utama lebih optimal */ html { font-size: 15px; } body { line-height: 1.6; letter-spacing: -0.01em; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; } /* Display text — tracking lebih ketat untuk impact */ h1, h2, h3, .hero-title, .row-title, .content-row__title, .section-title, .error-code { font-feature-settings: 'kern' 1; text-rendering: optimizeLegibility; } /* Paragraph konten — line-height lebih nyaman */ p { line-height: 1.7; } /* Heading hierarchy */ .section-title, .row-title, .content-row__title { font-family: var(--font-display); font-size: clamp(17px, 2vw, 22px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); } /* Meta text selalu cukup kontras */ .card-poster__meta, .card-backdrop__meta, .ep-meta, .card-article__meta { color: var(--text-2); font-size: 11.5px; } /* Article body optimal readability */ .article-body p, .article-content p { max-width: 65ch; line-height: 1.78; font-size: 15.5px; color: var(--text-1); } .detail-overview, .hero-overview { max-width: 56ch; line-height: 1.68; color: var(--text-2); } } /* ══════════════════════════════════════════════════════════ 3. PERFORMANCE — GPU COMPOSITING & RENDER HINTS ══════════════════════════════════════════════════════════ */ @layer base { /* Hanya elemen yang benar-benar beranimasi dapat will-change */ .hero-backdrop, .card-poster__img-wrap img, .card-backdrop__img-wrap img { will-change: transform; transform: translateZ(0); } /* Navbar — composite layer sendiri */ .navbar { will-change: background, backdrop-filter; transform: translateZ(0); } /* Dropdown & overlay — sudah di layer sendiri */ .mega-menu, .search-expand, .mobile-menu-overlay, .bell-dropdown, .user-dropdown, .modal-overlay { transform: translateZ(0); } /* Content-visibility: skip offscreen sections */ .content-row, .main-content > section { content-visibility: auto; contain-intrinsic-size: 0 340px; } /* Hindari layout shift dari font loading */ body { font-display: optional; } /* Cursor image loading tidak blokir */ img[loading="lazy"] { decoding: async; } } /* ══════════════════════════════════════════════════════════ 4. NAVBAR — Visual Upgrade ══════════════════════════════════════════════════════════ */ @layer enhancements { /* Scrolled state: lebih dramatis */ .navbar.scrolled { background: rgba(6, 7, 16, 0.94); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4); } /* Logo: subtle glow saat hover */ .nav-logo:hover img { filter: drop-shadow(0 0 8px rgba(249, 30, 66, 0.35)); transition: filter 0.3s var(--ease-smooth); } /* Nav link: indicator bottom lebih refined */ .nav-link.active::after { height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); box-shadow: none; border-radius: 0; } /* Mega menu: lebih depth */ .mega-menu { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 0 rgba(255,255,255,0.06) inset; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* Mega menu link: lebih responsive */ .mega-col a { padding: 5px 8px; border-radius: var(--r-xs); margin-left: -8px; transition: color var(--t-fast), background var(--t-fast), padding-left var(--t-fast); } .mega-col a:hover { color: var(--red-light); background: var(--red-dim); padding-left: 12px; } /* Search expand: glassmorphism */ .search-expand { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); } /* Search input: lebih clean */ #navSearchInput { background: transparent; border: none; border-bottom: 1px solid var(--border-med); border-radius: 0; font-size: 15px; padding-bottom: 10px; transition: border-color var(--t-base); } #navSearchInput:focus { outline: none; border-bottom-color: var(--red); } /* Hamburger: lebih responsive */ .hamburger { border-radius: var(--r-sm); transition: background var(--t-fast), transform var(--t-fast); } .hamburger:active { transform: scale(0.92); } /* Bell badge: lebih prominent */ #bellBadge, .nav-bell-badge { box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--red); } /* User dropdown: glassmorphism */ .user-dropdown { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); overflow: hidden; } /* Mobile menu: slide in dari kiri dengan spring */ .mobile-menu { background: linear-gradient(180deg, var(--surface-1) 0%, var(--bg) 100%); border-right: 1px solid rgba(255,255,255,0.06); box-shadow: 4px 0 32px rgba(0,0,0,0.6); } .mobile-menu-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } /* ══════════════════════════════════════════════════════════ 5. CARD SYSTEM — Hover polish & touch improvement ══════════════════════════════════════════════════════════ */ @layer enhancements { /* Poster card: shadow lebih dramatis */ .card-poster:hover .card-poster__img-wrap { box-shadow: 0 0 0 1px var(--red-border), var(--red-shadow-lg), var(--shadow-lg); outline: none; } /* Zoom lebih subtle = lebih premium */ .card-poster:hover img { transform: scale(1.05); } /* Overlay: gradient lebih dalam */ .card-poster__overlay { background: linear-gradient( to top, rgba(6,7,16,0.98) 0%, rgba(6,7,16,0.70) 40%, rgba(6,7,16,0.10) 80%, transparent 100% ); } /* Card title: weight upgrade */ .card-poster__title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; } /* Play button: lebih besar, lebih clickable */ .card-poster__play { width: 38px; height: 38px; font-size: 15px; background: rgba(249, 30, 66, 0.92); backdrop-filter: blur(4px); } /* Backdrop card: konsisten dengan poster */ .card-backdrop:hover .card-backdrop__img-wrap { box-shadow: 0 0 0 1px var(--red-border), var(--red-shadow), var(--shadow-md); outline: none; } /* Episode card: bolder active state */ .card-episode.active { background: rgba(249, 30, 66, 0.08); border-left-color: var(--red); border-left-width: 3px; } /* Person card: ring instead of border */ .card-person__photo { border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border-hi); transition: box-shadow var(--t-base), transform var(--t-base); } .card-person:hover .card-person__photo { box-shadow: 0 0 0 2px var(--red), var(--red-shadow); border-color: transparent; } /* Article card: lebih refined */ .card-article { border-radius: var(--r-lg); background: var(--surface-1); border-color: var(--border); } .card-article:hover { background: var(--surface-2); border-color: var(--border-hi); box-shadow: var(--shadow-sm); transform: translateY(-3px); } /* Progress bar: glow lebih subtle */ .progress-fill { background: linear-gradient(90deg, var(--red), var(--red-light)); box-shadow: 0 0 4px rgba(249,30,66,0.5); } /* Touch: overlay selalu tampil di hover:none devices */ @media (hover: none) { .card-poster__overlay, .card-backdrop__overlay { opacity: 1; } .card-poster__play::after { display: none; } .card-poster__img-wrap img, .card-backdrop__img-wrap img { transition: none; } } } /* ══════════════════════════════════════════════════════════ 6. HERO SECTION — Sinematik upgrade ══════════════════════════════════════════════════════════ */ @layer enhancements { /* Gradient lebih dramatis */ .hero-gradient-left { width: 70%; background: linear-gradient( to right, var(--bg) 0%, rgba(6, 7, 16, 0.82) 45%, rgba(6, 7, 16, 0.30) 75%, transparent 100% ); } .hero-gradient-bottom { height: 60%; background: linear-gradient( to top, var(--bg) 0%, rgba(6, 7, 16, 0.75) 50%, transparent 100% ); } /* Hero title: optical sizing */ .hero-title { font-size: clamp(32px, 5vw, 66px); line-height: 1.03; letter-spacing: -0.02em; text-shadow: 0 2px 40px rgba(0,0,0,0.7); font-weight: 800; } /* Hero meta: lebih readable */ .hero-meta { font-size: 13.5px; gap: 10px; } /* Hero rating: badge style */ .hero-meta .meta-rating { display: inline-flex; align-items: center; gap: 4px; background: rgba(247, 183, 49, 0.12); border: 1px solid rgba(247, 183, 49, 0.22); padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; } /* Hero buttons: lebih proporsional */ .hero-actions .btn-primary, .hero-actions .btn-ghost { padding: 11px 24px; font-size: 14px; border-radius: var(--r-md); letter-spacing: 0.01em; } .hero-actions .btn-primary { box-shadow: var(--red-shadow), var(--shadow-sm); } /* Hero genre pills */ .hero-genres .badge, .hero-genres .genre-pill { font-size: 11px; padding: 3px 10px; letter-spacing: 0.02em; } /* Row title: lebih berkarakter */ .row-title, .content-row__title { position: relative; display: inline-flex; align-items: center; gap: 10px; } .row-title::before, .content-row__title::before { content: ''; display: inline-block; width: 3px; height: 1.1em; background: var(--red); border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 8px rgba(249,30,66,0.5); } /* Row nav buttons: lebih polished */ .row-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-hi); transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base); } .row-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--red-border); box-shadow: var(--red-shadow); transform: scale(1.1); } } /* ══════════════════════════════════════════════════════════ 7. BUTTON SYSTEM — Polish & Feedback ══════════════════════════════════════════════════════════ */ @layer enhancements { /* Primary: lebih glossy */ .btn-primary { background: linear-gradient(145deg, #FF2D4E 0%, #C0082C 100%); box-shadow: 0 2px 12px rgba(249,30,66,0.30), inset 0 1px 0 rgba(255,255,255,0.15); border-radius: var(--r-md); font-size: 13.5px; letter-spacing: 0.01em; padding: 10px 22px; } .btn-primary:hover { box-shadow: 0 4px 24px rgba(249,30,66,0.45), inset 0 1px 0 rgba(255,255,255,0.20); transform: translateY(-2px); filter: brightness(1.08); } .btn-primary:active { transform: translateY(0) scale(0.97); filter: brightness(0.96); box-shadow: 0 1px 8px rgba(249,30,66,0.25); transition-duration: 0.06s; } /* Ripple effect di btn-primary */ .btn-primary { overflow: hidden; } /* Ghost: lebih visible */ .btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); font-size: 13.5px; transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast); } .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .btn-ghost:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s; } /* Icon button: touch-safe */ .btn-icon { min-width: 44px; min-height: 44px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .btn-icon:hover { background: var(--surface-2); color: var(--text-1); transform: scale(1.06); } .btn-icon:active { transform: scale(0.94); } /* Pill filter: snappier */ .pill { border-radius: 999px; padding: 6px 14px; font-size: 12.5px; transition: all var(--t-fast); } .pill.active { background: var(--red-dim); border-color: var(--red-border); color: var(--red-light); box-shadow: 0 0 12px rgba(249,30,66,0.2), inset 0 1px 0 rgba(255,255,255,0.05); } } /* ══════════════════════════════════════════════════════════ 8. BADGE SYSTEM — Lebih konsisten & readable ══════════════════════════════════════════════════════════ */ @layer enhancements { .badge { font-size: 10.5px; padding: 2.5px 8px; border-radius: var(--r-xs); letter-spacing: 0.03em; font-weight: 700; } .badge-red { background: rgba(249, 30, 66, 0.12); color: #FF6B84; border: 1px solid rgba(249, 30, 66, 0.25); } /* Status: lebih muted, lebih elegan */ .status-ongoing { background: rgba(45, 210, 112, 0.08); border-color: rgba(45, 210, 112, 0.18); } .status-completed { background: rgba(110, 117, 145, 0.10); border-color: rgba(110, 117, 145, 0.18); } } /* ══════════════════════════════════════════════════════════ 9. MODAL & TOAST — Premium feel ══════════════════════════════════════════════════════════ */ @layer enhancements { .modal-overlay { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-box { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-xl); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 rgba(255,255,255,0.07) inset; } .modal-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 0; } .toast { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); font-size: 13.5px; } .toast.error { border-left: 3px solid var(--red); background: rgba(249,30,66,0.08); } .toast.success { border-left: 3px solid var(--green); background: rgba(45,210,112,0.06); } .toast.info { border-left: 3px solid var(--blue); background: rgba(76,142,248,0.06); } } /* ══════════════════════════════════════════════════════════ 10. SKELETON — Lebih smooth ══════════════════════════════════════════════════════════ */ @layer enhancements { .skeleton { background: linear-gradient( 105deg, var(--surface-2) 0%, var(--surface-3) 30%, rgba(255,255,255,0.04) 50%, var(--surface-3) 70%, var(--surface-2) 100% ); background-size: 250% 100%; animation: shimmer 2s infinite linear; border-radius: var(--r-sm); } @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } } /* ══════════════════════════════════════════════════════════ 11. FOOTER — Lebih refined ══════════════════════════════════════════════════════════ */ @layer enhancements { .site-footer { background: var(--surface-1); border-top: 1px solid rgba(255,255,255,0.05); margin-top: 80px; } /* Ambient glow footer */ .site-footer::before { background: radial-gradient(ellipse at 50% 0%, rgba(249,30,66,0.07) 0%, transparent 65%); height: 160px; top: -80px; } .footer-col a { padding: 4.5px 0; font-size: 12.5px; } .footer-col a:hover { color: var(--red-light); } .footer-col h4 { font-size: 9.5px; letter-spacing: 1.4px; } .footer-bottom { font-size: 11.5px; padding: 16px 24px; } } /* ══════════════════════════════════════════════════════════ 12. SCROLL & SCROLLBAR — Elegant ══════════════════════════════════════════════════════════ */ @layer base { ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; transition: background 0.2s; } ::-webkit-scrollbar-thumb:hover { background: var(--red); } * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; } } /* ══════════════════════════════════════════════════════════ 13. FOCUS & ACCESSIBILITY ══════════════════════════════════════════════════════════ */ @layer enhancements { /* Focus ring: selalu kontras */ :focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; border-radius: var(--r-xs) !important; box-shadow: 0 0 0 4px rgba(249,30,66,0.4) !important; } /* Skip link */ .skip-to-content { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 10px 20px; background: var(--red); color: #fff; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; border-radius: 0 0 var(--r-md) var(--r-md); text-decoration: none; transition: top 0.18s ease; white-space: nowrap; box-shadow: var(--shadow-md); } .skip-to-content:focus { top: 0; } /* Touch targets: minimum 44×44 */ .hamburger, .nav-bell, .nav-search-toggle, .lang-btn, .row-btn, .btn-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .mobile-nav-link, .mobile-accordion-trigger { min-height: 48px; } /* Mega menu keyboard: focus-within */ .nav-item.has-dropdown:focus-within .mega-menu { display: flex; } } /* ══════════════════════════════════════════════════════════ 14. MOTION — Animasi yang purposeful ══════════════════════════════════════════════════════════ */ @layer motion { /* Keyframes baru */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleReveal { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes glowPulse { 0%, 100% { opacity: 0.5; text-shadow: 0 0 60px rgba(249,30,66,0.2); } 50% { opacity: 1; text-shadow: 0 0 80px rgba(249,30,66,0.35); } } /* Hero content: staggered entrance */ .hero-genres { animation: fadeSlideUp 0.4s var(--ease-snap) 0.05s both; } .hero-title { animation: fadeSlideUp 0.45s var(--ease-snap) 0.12s both; } .hero-meta { animation: fadeSlideUp 0.4s var(--ease-snap) 0.20s both; } .hero-overview { animation: fadeSlideUp 0.4s var(--ease-snap) 0.27s both; } .hero-actions { animation: fadeSlideUp 0.4s var(--ease-snap) 0.34s both; } /* Mega menu: fade+slide */ .mega-menu { animation: fadeSlideDown 0.18s var(--ease-snap); } /* Modal: scale reveal */ .modal-box { animation: scaleReveal 0.24s var(--ease-spring); } /* Toast: slide up */ .toast { animation: fadeSlideUp 0.28s var(--ease-spring); } /* Dropdown menus */ .user-dropdown.open, .bell-dropdown.open { animation: fadeSlideDown 0.16s var(--ease-snap); } /* Search expand */ .search-expand.open { animation: fadeSlideDown 0.2s var(--ease-snap); } /* Card title color transition */ .card-poster__title, .card-backdrop__title, .card-article__title { transition: color var(--t-fast); } /* Page loader */ #page-loader { background: linear-gradient(90deg, var(--red) 0%, var(--red-light) 50%, var(--red) 100%); background-size: 200% 100%; } #page-loader.loading { animation: shimmerLoader 1.4s linear infinite; } @keyframes shimmerLoader { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } } /* ══════════════════════════════════════════════════════════ 15. PREFERS-REDUCED-MOTION ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .skeleton { background: var(--surface-3) !important; animation: none !important; } body::after { display: none; } .hero-genres, .hero-title, .hero-meta, .hero-overview, .hero-actions { animation: none; opacity: 1; transform: none; } .card-poster__play::after { animation: none; } .mood-card:hover { transform: none; } } /* ══════════════════════════════════════════════════════════ 16. RESPONSIVE — Mobile-first refinements ══════════════════════════════════════════════════════════ */ @layer responsive { /* ── ≤1200px: Tablet landscape ── */ @media (max-width: 1200px) { .hero-content { padding: 0 28px 40px; grid-template-columns: 1fr 300px; } .content-row, .row-header, .genre-pills { padding-left: 24px; padding-right: 24px; } } /* ── ≤1024px: Tablet portrait ── */ @media (max-width: 1024px) { html { font-size: 14.5px; } .hero-content { grid-template-columns: 1fr; padding: 0 20px 32px; } .hero-sidebar { display: none; } .hero-title { font-size: clamp(28px, 6vw, 48px); } } /* ── ≤768px: Mobile ── */ @media (max-width: 768px) { html { font-size: 14px; } /* Hero mobile */ .hero-section { min-height: 380px; } .hero-title { font-size: 28px; letter-spacing: -0.01em; } .hero-overview { display: none; } .hero-gradient-left { width: 100%; background: linear-gradient( to top, var(--bg) 0%, rgba(6,7,16,0.70) 55%, transparent 100% ); } .hero-actions { gap: 8px; } .hero-actions .btn-primary, .hero-actions .btn-ghost { padding: 9px 18px; font-size: 13px; } /* Content rows */ .content-row, .row-header { padding-left: 16px; padding-right: 16px; } .row-btn { display: none; } /* Cards: smaller on mobile */ .card-poster, .card-poster__img-wrap { width: 120px; } .card-poster__img-wrap { height: 180px; } .card-continue, .card-continue .card-poster__img-wrap { width: 120px; } .card-continue .card-poster__img-wrap { height: 180px; } .card-backdrop, .card-backdrop__img-wrap { width: 210px; } .card-backdrop__img-wrap { height: 118px; } /* Row title: lebih kecil */ .row-title, .content-row__title { font-size: 16px; } /* Toast: full-width */ .toast-container { bottom: 16px; right: 12px; left: 12px; } .toast { min-width: unset; max-width: 100%; } /* Footer */ .footer-inner { flex-direction: column; gap: 28px; padding: 36px 16px 24px; } .footer-brand { width: 100%; } .footer-links { grid-template-columns: repeat(2, 1fr); gap: 16px; } .footer-note { margin-left: 0; width: 100%; } /* Article */ .article-body p, .article-content p { font-size: 14.5px; max-width: 100%; } /* Mobile menu */ .mobile-menu { width: 280px; padding: 16px; } /* Search modal: full width */ .search-expand { left: 8px; right: 8px; width: auto; } /* Schedule table scroll hint */ .schedule-table-wrap::after, .schedule-grid::after { content: '← Geser untuk melihat lebih →'; display: block; text-align: center; font-size: 11px; color: var(--text-3); padding: 8px 0; font-family: var(--font-ui); } } /* ── ≤480px: Small mobile ── */ @media (max-width: 480px) { html { font-size: 13.5px; } .hero-section { min-height: 340px; } .hero-title { font-size: 24px; } .hero-genres { display: none; } .hero-actions { flex-direction: row; flex-wrap: wrap; } .hero-actions .btn-primary { flex: 1; justify-content: center; } /* Row spacing lebih compact */ .content-row { margin-bottom: 28px; } .row-track { gap: 8px; } /* Cards: minimum viable */ .card-poster, .card-poster__img-wrap { width: 108px; } .card-poster__img-wrap { height: 162px; } .card-poster__title { font-size: 11.5px; } /* Error page */ .error-code { font-size: 88px; } .error-title { font-size: 22px; } /* Footer compact */ .footer-links { grid-template-columns: repeat(2, 1fr); } } /* ── ≤360px: Very small phones ── */ @media (max-width: 360px) { .card-poster, .card-poster__img-wrap { width: 96px; } .card-poster__img-wrap { height: 144px; } .hero-meta { flex-wrap: wrap; gap: 6px; font-size: 12px; } .hero-title { font-size: 22px; } .content-row { padding-left: 12px; padding-right: 12px; } .row-track { gap: 6px; padding: 2px 12px 10px; } } } /* ══════════════════════════════════════════════════════════ 17. PAGE-SPECIFIC POLISH ══════════════════════════════════════════════════════════ */ @layer enhancements { /* ── Browse / Filter ── */ .filter-sidebar, .browse-sidebar { background: var(--surface-1); border-right: 1px solid var(--border); } .browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } /* ── Detail page ── */ .detail-hero-backdrop { filter: brightness(0.4) saturate(1.1); } .detail-poster { border: 2px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .detail-overview { font-size: 14.5px; line-height: 1.72; } /* ── Player ── */ .server-pill.active, .server-btn.active { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; box-shadow: var(--red-shadow); } .player-iframe-wrap { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--r-md); overflow: hidden; } .resume-banner { border-left: 3px solid var(--red); background: rgba(249,30,66,0.06); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .episode-item.active, .ep-item.active { background: var(--red-dim); border-left: 2px solid var(--red); } /* ── Schedule ── */ .schedule-table-wrap, .schedule-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Mood ── */ .mood-card.selected, .mood-btn.selected { outline: 2px solid var(--red); outline-offset: 3px; box-shadow: var(--red-shadow-lg); } .mood-card:hover { transform: translateY(-4px) scale(1.02); transition: transform var(--t-base); } /* ── Search results ── */ .search-item { border-radius: var(--r-sm); transition: background var(--t-fast); } .search-item:hover { background: var(--surface-2); } /* ── Genre pills scroll ── */ .genre-pills { scrollbar-width: none; -ms-overflow-style: none; } .genre-pills::-webkit-scrollbar { display: none; } /* ── Empty states ── */ .empty-state__icon { font-size: 44px; opacity: 0.35; } .empty-state__title { font-size: 15px; font-weight: 700; color: var(--text-1); } .empty-state__subtitle { font-size: 13px; color: var(--text-2); max-width: 280px; } /* ── 404 ── */ .error-code { animation: glowPulse 3s ease-in-out infinite; letter-spacing: -4px; } .suggestions-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } /* Anime theme: purple accent refinements */ .anime-page .hero-title { background: linear-gradient(135deg, #C084FC, #FF6B9D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Kids theme: ensure readability */ .kids-page .card-poster__title, .kids-page .card-backdrop__title { color: var(--kids-text); } } /* ══════════════════════════════════════════════════════════ 18. HIGH CONTRAST & PRINT ══════════════════════════════════════════════════════════ */ @media (forced-colors: active) { .btn-primary, .btn-ghost { border: 2px solid ButtonText; } .badge, .pill { border: 1px solid ButtonText; } .skeleton { background: ButtonFace; border: 1px solid ButtonText; } .card-poster__img-wrap { border: 1px solid ButtonText; } } @media print { body { background: #fff !important; color: #000 !important; } .navbar, .hero-section, .genre-pills, .site-footer, .btn-primary, .btn-ghost, .mobile-menu-overlay, #page-loader { display: none !important; } .detail-overview, .article-body { color: #000 !important; } a { color: #000 !important; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; } }