/* ========================================================= WOWLITE HEADER SKIN — CLEAN FINAL (PSI-friendly) Scope: aktif kalau punya class "gs-wow" Goal: - Desktop: logo | search (center, tidak kepanjangan) | auth kanan - Mobile: baris 1 (hamb + logo + auth), baris 2 (search) -> NO OVERLAY - Hide icon search toggle (.srcmob) biar gak dobel - Hide hamburger di desktop - Menu mobile WRAP ke bawah (no scroll kanan) ========================================================= */ body.gs-wow{ --wow-accent: 86, 120, 255; --wow-bg-1: 18, 20, 30; --wow-bg-2: 12, 14, 22; --wow-txt: 255, 255, 255; --wow-muted: 180, 186, 198; /* TUNING CEPET */ --wow-th-pad-y: 8px; /* naik/turun header (kecil = makin naik) */ --wow-th-pad-x: 12px; --wow-gap: 12px; --wow-search-max: 640px; /* desktop: kecilin kalau kepanjangan */ --wow-search-max-m: 100%; /* mobile: bisa 620px kalau mau lebih pendek */ --wow-search-h: 32px; /* tinggi input & tombol */ --wow-search-pad-y: 4px; /* atas-bawah wrapper search */ --wow-btn-h: 34px; /* tinggi tombol auth */ } /* ========================= TOP BAR ========================= */ body.gs-wow .th{ background: linear-gradient(180deg, rgba(var(--wow-bg-1), .94), rgba(var(--wow-bg-2), .90) ); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 26px rgba(0,0,0,.28); /* penting: theme mobile sering kunci height + overflow hidden */ height: auto !important; overflow: visible !important; position: relative; z-index: 60; } /* GRID container utama */ body.gs-wow .th .centernav.bound{ display: grid !important; grid-template-columns: auto 1fr auto; grid-template-areas: "logo search auth"; align-items: center !important; gap: var(--wow-gap) !important; padding: var(--wow-th-pad-y) var(--wow-th-pad-x) !important; overflow: visible !important; } /* Stop float/posisi aneh dari theme */ body.gs-wow .th .centernav.bound > *{ float: none !important; } /* ========================= HAMBURGER ========================= */ body.gs-wow .shme{ grid-area: hamb; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(var(--wow-txt), .92); user-select: none; margin: 0 !important; } /* ========================= LOGO AREA ========================= */ body.gs-wow header.mainheader{ grid-area: logo; margin: 0 !important; } body.gs-wow .site-branding.logox{ padding: 0 !important; margin: 0 !important; } body.gs-wow .mobilelogo{ margin: 0 !important; } body.gs-wow .mobilelogo img{ display: block; height: 34px; width: auto; } /* ========================= AUTH (Register / Sign In) ========================= */ body.gs-wow #gs{ grid-area: auth; display: flex !important; gap: 10px; align-items: center !important; justify-content: flex-end !important; white-space: nowrap; /* lawan posisi absolute/top bawaan theme kalau ada */ position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; } body.gs-wow #gs a{ height: var(--wow-btn-h); display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px; border-radius: 999px; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(var(--wow-txt), .92); font-size: 14px; line-height: 1; } body.gs-wow #gs a:hover{ background: rgba(255,255,255,.10); } /* ========================= SEARCH (SELALU TAMPIL, NO OVERLAY) ========================= */ body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb.minmbx{ grid-area: search; display: block !important; /* paksa tampil */ position: static !important; /* lawan absolute overlay */ transform: none !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: var(--wow-search-max); justify-self: center; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: var(--wow-search-pad-y) 10px; margin: 0 !important; overflow: hidden; box-sizing: border-box; } body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb *{ box-sizing: border-box; } body.gs-wow .searchx.minmb #form{ display: flex !important; align-items: center !important; gap: 10px; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.gs-wow .searchx.minmb #s{ flex: 1 1 auto; min-width: 0; width: 100%; height: var(--wow-search-h); line-height: var(--wow-search-h); padding: 0 6px !important; border: 0 !important; outline: none !important; background: transparent !important; color: rgba(var(--wow-txt), .92); font-size: 14px; } body.gs-wow .searchx.minmb #s::placeholder{ color: rgba(var(--wow-muted), .85); } body.gs-wow .searchx.minmb #submitsearch{ display: inline-flex !important; /* style.css mobile kadang hide */ width: var(--wow-search-h); height: var(--wow-search-h); border-radius: 12px; border: 0 !important; background: rgba(var(--wow-accent), .18); color: rgba(var(--wow-txt), .95); cursor: pointer; position: static !important; flex: 0 0 auto; } /* matiin icon dobel (open search) + close X */ body.gs-wow .th .centernav.bound > .srcmob{ display: none !important; } body.gs-wow .searchx.minmb .srcmob.srccls{ display: none !important; } /* ========================= NAV MENU ========================= */ body.gs-wow #main-menu{ background: linear-gradient(90deg, rgba(var(--wow-accent), .14), rgba(255,255,255,.04) ); border-bottom: 1px solid rgba(255,255,255,.06); position: static !important; top: auto !important; z-index: 10; margin-top: 10px !important; } body.gs-wow #main-menu .menu{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; flex-wrap: nowrap; } body.gs-wow #main-menu .menu > li{ list-style: none; flex: 0 0 auto !important; } body.gs-wow #main-menu .menu > li > a{ display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 12px; border-radius: 999px; text-decoration: none; color: rgba(var(--wow-txt), .92); background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } body.gs-wow #main-menu .menu > li.current-menu-item > a, body.gs-wow #main-menu .menu > li > a[aria-current="page"]{ background: rgba(var(--wow-accent), .22); border-color: rgba(var(--wow-accent), .32); } /* ========================= CONTENT: biar "Now Playing Movies" gak mepet kiri/kanan ========================= */ body.gs-wow #content .wrapper{ padding-left: 12px !important; padding-right: 12px !important; } /* ========================= DESKTOP ========================= */ @media (min-width: 901px){ /* hamburger cuma mobile */ body.gs-wow .shme{ display: none !important; } /* search gak kepanjangan */ body.gs-wow .searchx.minmb{ max-width: var(--wow-search-max); } } /* ========================= MOBILE (<=900px) baris 1: hamb + logo + auth baris 2: search full width ========================= */ @media (max-width: 900px){ body.gs-wow .th .centernav.bound{ grid-template-columns: auto 1fr auto; grid-template-areas: "hamb logo auth" "search search search"; align-items: start !important; /* naikin semua (lebih rapat) */ padding: 6px 10px !important; gap: 10px !important; } body.gs-wow .shme{ grid-area: hamb; display: grid !important; } body.gs-wow header.mainheader{ grid-area: logo; } body.gs-wow #gs{ grid-area: auth; } /* kecilin tombol auth dikit biar gak “turun” */ body.gs-wow #gs a{ height: 32px; padding: 0 10px; font-size: 14px; } /* search full width & aman */ body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb.minmbx{ grid-area: search; max-width: var(--wow-search-max-m) !important; justify-self: stretch; } /* MENU: WRAP ke bawah (stop scroll kanan) */ body.gs-wow #main-menu .menu{ justify-content: flex-start !important; flex-wrap: wrap !important; overflow-x: visible !important; white-space: normal !important; gap: 10px !important; } body.gs-wow #main-menu .menu > li > a{ max-width: 100%; padding: 8px 10px; min-height: 34px; font-size: 14px; } body.gs-wow #content .wrapper{ padding-left: 10px !important; padding-right: 10px !important; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow *{ transition: none !important; } } /* ========================================================= WOWLITE FOOTER — GLASS WOW (PSI-friendly) Scope: body.gs-wow - NO backdrop-filter - Fix theme mobile: .footer-az {display:none} - Override chip biru footer default ========================================================= */ body.gs-wow #footer{ margin-top: 28px; background: linear-gradient(180deg, rgba(var(--wow-bg-1), .92), rgba(var(--wow-bg-2), .96) ); border-top: 1px solid rgba(255,255,255,.06); color: rgba(var(--wow-txt), .92); text-align: left; line-height: 20px; font-size: 13px; } body.gs-wow #footer a{ color: rgba(var(--wow-txt), .92); text-decoration: none; } body.gs-wow #footer a:hover{ color: rgba(255,255,255,.98); } /* wrapper jadi grid biar rapih */ body.gs-wow #footer .footercopyright{ max-width: 1190px; margin: 0 auto; padding: 18px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "genres pages" "copy copy"; gap: 16px; overflow: visible; } /* ========================= GENRES BOX (footer-az biasa) ========================= */ body.gs-wow #footer .footer-az:not(.footer-pages){ grid-area: genres; /* FIX: theme mobile sering hide */ display: block !important; margin: 0 !important; padding: 14px 14px 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.20); } body.gs-wow #footer .footer-az:not(.footer-pages) .ftaz{ display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px 0 !important; padding: 0 !important; border-right: 0 !important; font-size: 18px; font-weight: 900; line-height: 1.1; } body.gs-wow #footer .footer-az:not(.footer-pages) .size-s{ display: block; margin: 0 0 12px 0 !important; font-size: 13px; color: rgba(var(--wow-muted), .92); } /* list genres -> grid chip */ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1100px){ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 720px){ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li{ margin: 0 !important; display: block !important; } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li a{ display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 34px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li a:hover{ background: rgba(var(--wow-accent), .18); border-color: rgba(var(--wow-accent), .28); } /* ========================= PAGES (Contact/Privacy/DMCA) ========================= */ body.gs-wow #footer .footer-az.footer-pages{ grid-area: pages; /* FIX: theme mobile hide + jangan ketiban display:block */ display: flex !important; margin: 0 !important; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); align-items: flex-start; justify-content: flex-end; } body.gs-wow #footer .footer-az.footer-pages .az-list{ list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } body.gs-wow #footer .footer-az.footer-pages .az-list li{ margin: 0 !important; } body.gs-wow #footer .footer-az.footer-pages .az-list li a{ display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-weight: 900; font-size: 13px; } body.gs-wow #footer .footer-az.footer-pages .az-list li a:hover{ background: rgba(var(--wow-accent), .16); border-color: rgba(var(--wow-accent), .26); } /* ========================= COPYRIGHT CARD ========================= */ body.gs-wow #footer .copyright{ grid-area: copy; margin: 0 !important; padding: 14px 14px 16px; border-radius: 16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); display: flex; align-items: center; gap: 14px; overflow: visible; } body.gs-wow #footer .copyright .footer-logo{ float: none !important; margin: 0 !important; flex: 0 0 auto; } body.gs-wow #footer .copyright .footer-logo img{ display: block; height: 40px; width: auto; } body.gs-wow #footer .copyright .txt{ float: none !important; width: auto !important; text-align: left !important; color: rgba(var(--wow-muted), .95); } body.gs-wow #footer .copyright .txt span{ display: block; margin-bottom: 6px; font-weight: 900; color: rgba(var(--wow-txt), .92); } body.gs-wow #footer .copyright .txt p{ margin: 0 !important; line-height: 1.6; } /* ========================= MOBILE STACK ========================= */ @media (max-width: 900px){ body.gs-wow #footer .footercopyright{ grid-template-columns: 1fr; grid-template-areas: "pages" "genres" "copy"; } body.gs-wow #footer .footer-az.footer-pages{ justify-content: flex-start; } body.gs-wow #footer .footer-az.footer-pages .az-list{ justify-content: flex-start; } body.gs-wow #footer .copyright{ flex-direction: column; align-items: flex-start; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow #footer *{ transition: none !important; } } /* ========================================================= WOW FOOTER — NO GENRES (ratakan kiri-kanan) - kiri: copyright card - kanan: pages pills (Contact/Privacy/DMCA) - hilangin area kosong kanan ========================================================= */ body.gs-wow #footer .footercopyright{ /* matiin grid lama */ display:flex !important; grid-template-columns: none !important; grid-template-areas: none !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; flex-wrap:wrap !important; max-width:1190px; margin:0 auto; padding:16px 12px !important; } /* card copyright jangan full-width lagi */ body.gs-wow #footer .copyright{ flex: 1 1 560px !important; min-width: 320px; margin: 0 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; border-radius:16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); padding:14px 14px 16px !important; } /* pages card: rata tengah, gak nempel atas */ body.gs-wow #footer .footer-az.footer-pages{ flex: 0 0 auto !important; align-self:center !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; border-radius:16px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); padding:14px !important; } /* list pills rapih */ body.gs-wow #footer .footer-az.footer-pages .az-list{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin:0 !important; padding:0 !important; list-style:none !important; justify-content:flex-end !important; } /* jangan ada "clear" bikin jarak/tinggi aneh */ body.gs-wow #footer .footercopyright .clear{ display:none !important; } /* mobile: pages turun bawah, tetep rapih */ @media (max-width: 900px){ body.gs-wow #footer .footercopyright{ justify-content:flex-start !important; } body.gs-wow #footer .footer-az.footer-pages{ width:100% !important; justify-content:flex-start !important; } body.gs-wow #footer .footer-az.footer-pages .az-list{ justify-content:flex-start !important; } } /* ========================================================= NETFLIX-LIKE HEADER PATCH (PSI-light) Scope: body.gs-wow - Dark clean + red accent - Search icon shows; search box appears when .minmbx toggled (JS already exists) - Nav links: simple text, active underline red ========================================================= */ body.gs-wow{ --nf-accent: 229, 9, 20; /* Netflix red */ --nf-bg: 20, 20, 20; /* #141414 */ --nf-bg-2: 0, 0, 0; --nf-txt: 255, 255, 255; --nf-muted: 180, 180, 180; --nf-radius: 6px; --nf-bar-h: 56px; --nf-pad-x: 16px; --nf-pad-y: 10px; --nf-btn-h: 34px; --nf-link-h: 34px; --nf-search-h: 34px; --nf-search-w: 280px; /* tweak: 240–360 */ } /* ========================= TOP BAR ========================= */ body.gs-wow .th{ background: rgb(var(--nf-bg)) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; height: auto !important; overflow: visible !important; box-shadow: none !important; position: relative; z-index: 60; } body.gs-wow .th .centernav.bound{ display: flex !important; align-items: center !important; gap: 12px !important; padding: var(--nf-pad-y) var(--nf-pad-x) !important; min-height: var(--nf-bar-h); overflow: visible !important; } /* stop float bawaan theme */ body.gs-wow .th .centernav.bound > *{ float: none !important; } /* Desktop: hide hamburger */ @media (min-width: 901px){ body.gs-wow .shme{ display: none !important; } } /* Hamburger button (mobile) */ body.gs-wow .shme{ width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border-radius: var(--nf-radius) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(var(--nf-txt), .92) !important; margin: 0 !important; user-select: none; } body.gs-wow .shme:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* Logo area */ body.gs-wow header.mainheader{ margin: 0 !important; flex: 0 0 auto !important; margin-right: auto !important; /* push actions to the right */ } /* Desktop logo */ body.gs-wow .logos{ margin: 0 !important; line-height: 0 !important; } body.gs-wow .logos a{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } body.gs-wow .logos img{ height: 32px; width: auto; display: block; } /* Hide text label for cleaner Netflix-ish look (optional) */ body.gs-wow .logos .hdl{ display: none !important; } /* Mobile logo */ body.gs-wow .mobilelogo{ margin: 0 !important; } body.gs-wow .mobilelogo img{ height: 30px; width: auto; display: block; } /* ========================= SEARCH (Netflix-ish: icon + expandable input) ========================= */ /* IMPORTANT: undo old WOW that hid the search icon */ body.gs-wow .th .centernav.bound > .srcmob{ display: grid !important; } /* Search open icon (outside form) */ body.gs-wow .th .srcmob{ width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border-radius: var(--nf-radius) !important; background: transparent !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(var(--nf-txt), .86) !important; cursor: pointer; user-select: none; } body.gs-wow .th .srcmob:hover{ background: rgba(255,255,255,.06) !important; color: rgba(var(--nf-txt), .98) !important; } body.gs-wow .th .srcmob:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* Search box container: hidden until .minmbx (toggled by existing JS) */ body.gs-wow .searchx.minmb{ display: none !important; position: static !important; width: auto !important; max-width: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } body.gs-wow .searchx.minmb.minmbx{ display: block !important; flex: 0 0 auto !important; } /* Search form styling */ body.gs-wow .searchx.minmb #form{ display: flex !important; align-items: center !important; gap: 8px !important; height: var(--nf-search-h); padding: 0 10px !important; border-radius: var(--nf-radius) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; margin: 0 !important; } /* Input */ body.gs-wow .searchx.minmb #s{ width: var(--nf-search-w); max-width: 46vw; min-width: 180px; height: calc(var(--nf-search-h) - 2px); line-height: calc(var(--nf-search-h) - 2px); border: 0 !important; outline: none !important; background: transparent !important; color: rgba(var(--nf-txt), .92) !important; font-size: 14px; padding: 0 6px !important; } body.gs-wow .searchx.minmb #s::placeholder{ color: rgba(var(--nf-muted), .90) !important; } /* Submit button (magnifier) */ body.gs-wow .searchx.minmb #submitsearch{ display: inline-flex !important; width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 4px !important; background: rgba(255,255,255,.08) !important; color: rgba(var(--nf-txt), .96) !important; cursor: pointer; } body.gs-wow .searchx.minmb #submitsearch:hover{ background: rgba(var(--nf-accent), .22) !important; } /* Close X inside form */ body.gs-wow .searchx.minmb .srcmob.srccls{ display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; border-radius: 4px !important; background: transparent !important; border: 0 !important; color: rgba(var(--nf-muted), .95) !important; } /* ========================= AUTH (Register / Login) ========================= */ body.gs-wow #gs{ display: flex !important; gap: 10px !important; align-items: center !important; justify-content: flex-end !important; position: static !important; margin: 0 !important; white-space: nowrap; } body.gs-wow #gs a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: var(--nf-btn-h); padding: 0 12px !important; border-radius: var(--nf-radius) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; } /* Register: subtle outline */ body.gs-wow #gs a:first-child{ background: transparent !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(var(--nf-txt), .92) !important; } body.gs-wow #gs a:first-child:hover{ background: rgba(255,255,255,.06) !important; } /* Login: red button */ body.gs-wow #gs a:last-child{ background: rgb(var(--nf-accent)) !important; border: 1px solid rgba(0,0,0,.20) !important; color: #fff !important; } body.gs-wow #gs a:last-child:hover{ background: rgba(var(--nf-accent), .92) !important; } body.gs-wow #gs a:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* ========================= MAIN NAV MENU ========================= */ body.gs-wow #main-menu{ background: rgb(var(--nf-bg)) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; position: static !important; top: auto !important; margin-top: 0 !important; } /* Make nav align with top padding */ body.gs-wow #main-menu .centernav .bound{ padding: 0 var(--nf-pad-x) 10px !important; } /* Nav list */ body.gs-wow #main-menu .menu{ display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; padding: 0 !important; margin: 0 !important; flex-wrap: nowrap !important; } /* Links: simple text like Netflix */ body.gs-wow #main-menu .menu > li{ list-style: none !important; margin: 0 !important; } body.gs-wow #main-menu .menu > li > a{ display: inline-flex !important; align-items: center !important; height: var(--nf-link-h); padding: 0 2px !important; border-radius: 4px; text-decoration: none !important; color: rgba(var(--nf-txt), .82) !important; font-weight: 650 !important; } body.gs-wow #main-menu .menu > li > a:hover{ color: rgba(var(--nf-txt), .98) !important; } /* Active state: red underline */ body.gs-wow #main-menu .menu > li.current-menu-item > a, body.gs-wow #main-menu .menu > li > a[aria-current="page"]{ color: rgba(var(--nf-txt), .98) !important; box-shadow: inset 0 -2px 0 rgb(var(--nf-accent)); } /* Dropdown panel */ body.gs-wow #main-menu .dropdown-menu, body.gs-wow #main-menu .sub-menu{ background: rgba(0,0,0,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; padding: 8px !important; box-shadow: 0 16px 32px rgba(0,0,0,.45) !important; } body.gs-wow #main-menu .dropdown-menu li a, body.gs-wow #main-menu .sub-menu li a{ display: flex !important; align-items: center !important; padding: 8px 10px !important; border-radius: 8px !important; color: rgba(var(--nf-txt), .86) !important; text-decoration: none !important; } body.gs-wow #main-menu .dropdown-menu li a:hover, body.gs-wow #main-menu .sub-menu li a:hover{ background: rgba(255,255,255,.06) !important; color: rgba(var(--nf-txt), .98) !important; } /* ========================= MOBILE TUNING ========================= */ @media (max-width: 900px){ body.gs-wow .th .centernav.bound{ flex-wrap: wrap !important; padding: 8px 10px !important; min-height: auto !important; } /* logo doesn't push too hard on mobile */ body.gs-wow header.mainheader{ margin-right: 0 !important; flex: 1 1 auto !important; } /* Search expands full width when opened */ body.gs-wow .searchx.minmb.minmbx{ width: 100% !important; flex: 1 1 100% !important; order: 99; /* drop to next line */ } body.gs-wow .searchx.minmb #form{ width: 100% !important; } body.gs-wow .searchx.minmb #s{ width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Nav can wrap on mobile (avoid horizontal scroll) */ body.gs-wow #main-menu .menu{ flex-wrap: wrap !important; gap: 12px !important; } } /* Reduce motion (keep PSI happy) */ @media (prefers-reduced-motion: reduce){ body.gs-wow .th *, body.gs-wow #main-menu *{ transition: none !important; } } /* ========================================================= NETFLIX-LIKE HOMEPAGE PATCH (PSI-light) Scope: body.gs-wow #content.gs-index-wow - Ikut header: dark clean + red accent - No blur/backdrop-filter - Hover ringan ========================================================= */ body.gs-wow #content.gs-index-wow{ /* fallback kalau header vars belum kebaca */ --nf-accent: var(--nf-accent, 229, 9, 20); --nf-bg: var(--nf-bg, 20, 20, 20); --nf-muted: var(--nf-muted, 180, 180, 180); --gs-card: rgba(255,255,255,.05); --gs-border: rgba(255,255,255,.09); --gs-shadow: 0 10px 26px rgba(0,0,0,.28); background: rgb(var(--nf-bg)) !important; padding-top: 12px !important; /* subtle red glow ala Netflix (ringan) */ background: radial-gradient(560px 240px at 14% 0%, rgba(var(--nf-accent), .12), transparent 70%), radial-gradient(520px 220px at 88% 10%, rgba(255,255,255,.05), transparent 70%), rgb(var(--nf-bg)) !important; } /* wrapper spacing */ body.gs-wow #content.gs-index-wow .wrapper{ padding-top: 6px !important; } body.gs-wow #content.gs-index-wow .postbody{ padding-top: 2px !important; } /* section card */ body.gs-wow #content.gs-index-wow .gs-section{ border-radius: 16px !important; background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important; box-shadow: var(--gs-shadow) !important; overflow: hidden !important; margin-bottom: 14px !important; } /* ===================================================== SECTION BAR (Now Playing / TV Airing Today) - buang nuansa biru → jadi dark + red accent ===================================================== */ body.gs-wow #content.gs-index-wow .releases.latesthome{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap: 12px !important; padding: 12px 14px !important; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(20,20,20,.98) ) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } body.gs-wow #content.gs-index-wow .releases.latesthome h3{ margin:0 !important; color: rgba(255,255,255,.92) !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .2px !important; } /* View all button */ body.gs-wow #content.gs-index-wow .releases.latesthome .vl{ display:inline-flex !important; align-items:center !important; padding: 8px 12px !important; border-radius: 999px !important; text-decoration:none !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important; transition: transform .12s ease, background .12s ease, border-color .12s ease !important; } body.gs-wow #content.gs-index-wow .releases.latesthome .vl:hover{ transform: translateY(-1px) !important; background: rgba(var(--nf-accent), .18) !important; border-color: rgba(var(--nf-accent), .35) !important; } /* ===================================================== HERO (lebih Netflix, tetap ringan) ===================================================== */ body.gs-wow #content.gs-index-wow .gs-home-hero{ margin: 0 14px 12px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.10) !important; overflow: hidden !important; position: relative !important; background: rgba(0,0,0,.25) !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__bg{ display:block !important; width:100% !important; height:auto !important; aspect-ratio: 16/9 !important; object-fit: cover !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__overlay{ background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.86) 100% ) !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__badge{ background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important; font-weight: 800 !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__title{ color: #fff !important; font-weight: 900 !important; text-shadow: 0 10px 26px rgba(0,0,0,.35); } /* CTA buttons */ body.gs-wow #content.gs-index-wow .gs-btn{ border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.28) !important; color: rgba(255,255,255,.92) !important; } body.gs-wow #content.gs-index-wow .gs-btn-primary{ background: rgb(var(--nf-accent)) !important; border-color: rgba(0,0,0,.18) !important; color: #fff !important; } body.gs-wow #content.gs-index-wow .gs-btn-primary:hover{ background: rgba(var(--nf-accent), .92) !important; } /* ===================================================== GRID / CARDS (Netflix-ish: hover halus + rapih) ===================================================== */ body.gs-wow #content.gs-index-wow .listupd{ padding: 0 14px 14px !important; } body.gs-wow #content.gs-index-wow .listupd.normal .excstf{ gap: 12px !important; } /* card hover ringan */ body.gs-wow #content.gs-index-wow article.bs{ transition: transform .12s ease !important; } body.gs-wow #content.gs-index-wow article.bs:hover{ transform: translateY(-2px) !important; } /* poster container */ body.gs-wow #content.gs-index-wow article.bs .limit{ border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 10px 26px rgba(0,0,0,.28) !important; } /* type badge (Movie/TV) → kecil + red */ body.gs-wow #content.gs-index-wow .typez{ background: rgba(var(--nf-accent), .92) !important; color: #fff !important; border-radius: 999px !important; padding: 6px 10px !important; font-weight: 900 !important; letter-spacing: .3px !important; } /* rating chip area biar subtle */ body.gs-wow #content.gs-index-wow .bt span{ background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* title area */ body.gs-wow #content.gs-index-wow .tt{ color: rgba(255,255,255,.92) !important; font-weight: 750 !important; } body.gs-wow #content.gs-index-wow .tt h2{ margin-top: 6px !important; font-size: 14px !important; line-height: 1.25 !important; /* clamp 2 lines (ringan) */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* link focus (aksesibilitas + UX) */ body.gs-wow #content.gs-index-wow a:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75) !important; outline-offset: 2px !important; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 768px){ body.gs-wow #content.gs-index-wow .gs-home-hero{ margin: 0 12px 12px !important; } body.gs-wow #content.gs-index-wow .listupd{ padding: 0 12px 12px !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__title{ font-size: 19px !important; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow #content.gs-index-wow *{ transition:none !important; } body.gs-wow #content.gs-index-wow article.bs:hover{ transform:none !important; } } /* ========================================================= WOWLITE HEADER SKIN — CLEAN FINAL (PSI-friendly) Scope: aktif kalau punya class "gs-wow" Goal: - Desktop: logo | search (center, tidak kepanjangan) | auth kanan - Mobile: baris 1 (hamb + logo + auth), baris 2 (search) -> NO OVERLAY - Hide icon search toggle (.srcmob) biar gak dobel - Hide hamburger di desktop - Menu mobile WRAP ke bawah (no scroll kanan) ========================================================= */ body.gs-wow{ --wow-accent: 86, 120, 255; --wow-bg-1: 18, 20, 30; --wow-bg-2: 12, 14, 22; --wow-txt: 255, 255, 255; --wow-muted: 180, 186, 198; /* TUNING CEPET */ --wow-th-pad-y: 8px; /* naik/turun header (kecil = makin naik) */ --wow-th-pad-x: 12px; --wow-gap: 12px; --wow-search-max: 640px; /* desktop: kecilin kalau kepanjangan */ --wow-search-max-m: 100%; /* mobile: bisa 620px kalau mau lebih pendek */ --wow-search-h: 32px; /* tinggi input & tombol */ --wow-search-pad-y: 4px; /* atas-bawah wrapper search */ --wow-btn-h: 34px; /* tinggi tombol auth */ } /* ========================= TOP BAR ========================= */ body.gs-wow .th{ background: linear-gradient(180deg, rgba(var(--wow-bg-1), .94), rgba(var(--wow-bg-2), .90) ); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 26px rgba(0,0,0,.28); /* penting: theme mobile sering kunci height + overflow hidden */ height: auto !important; overflow: visible !important; position: relative; z-index: 60; } /* GRID container utama */ body.gs-wow .th .centernav.bound{ display: grid !important; grid-template-columns: auto 1fr auto; grid-template-areas: "logo search auth"; align-items: center !important; gap: var(--wow-gap) !important; padding: var(--wow-th-pad-y) var(--wow-th-pad-x) !important; overflow: visible !important; } /* Stop float/posisi aneh dari theme */ body.gs-wow .th .centernav.bound > *{ float: none !important; } /* ========================= HAMBURGER ========================= */ body.gs-wow .shme{ grid-area: hamb; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(var(--wow-txt), .92); user-select: none; margin: 0 !important; } /* ========================= LOGO AREA ========================= */ body.gs-wow header.mainheader{ grid-area: logo; margin: 0 !important; } body.gs-wow .site-branding.logox{ padding: 0 !important; margin: 0 !important; } body.gs-wow .mobilelogo{ margin: 0 !important; } body.gs-wow .mobilelogo img{ display: block; height: 34px; width: auto; } /* ========================= AUTH (Register / Sign In) ========================= */ body.gs-wow #gs{ grid-area: auth; display: flex !important; gap: 10px; align-items: center !important; justify-content: flex-end !important; white-space: nowrap; /* lawan posisi absolute/top bawaan theme kalau ada */ position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; } body.gs-wow #gs a{ height: var(--wow-btn-h); display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px; border-radius: 999px; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(var(--wow-txt), .92); font-size: 14px; line-height: 1; } body.gs-wow #gs a:hover{ background: rgba(255,255,255,.10); } /* ========================= SEARCH (SELALU TAMPIL, NO OVERLAY) ========================= */ body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb.minmbx{ grid-area: search; display: block !important; /* paksa tampil */ position: static !important; /* lawan absolute overlay */ transform: none !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: var(--wow-search-max); justify-self: center; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: var(--wow-search-pad-y) 10px; margin: 0 !important; overflow: hidden; box-sizing: border-box; } body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb *{ box-sizing: border-box; } body.gs-wow .searchx.minmb #form{ display: flex !important; align-items: center !important; gap: 10px; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.gs-wow .searchx.minmb #s{ flex: 1 1 auto; min-width: 0; width: 100%; height: var(--wow-search-h); line-height: var(--wow-search-h); padding: 0 6px !important; border: 0 !important; outline: none !important; background: transparent !important; color: rgba(var(--wow-txt), .92); font-size: 14px; } body.gs-wow .searchx.minmb #s::placeholder{ color: rgba(var(--wow-muted), .85); } body.gs-wow .searchx.minmb #submitsearch{ display: inline-flex !important; /* style.css mobile kadang hide */ width: var(--wow-search-h); height: var(--wow-search-h); border-radius: 12px; border: 0 !important; background: rgba(var(--wow-accent), .18); color: rgba(var(--wow-txt), .95); cursor: pointer; position: static !important; flex: 0 0 auto; } /* matiin icon dobel (open search) + close X */ body.gs-wow .th .centernav.bound > .srcmob{ display: none !important; } body.gs-wow .searchx.minmb .srcmob.srccls{ display: none !important; } /* ========================= NAV MENU ========================= */ body.gs-wow #main-menu{ background: linear-gradient(90deg, rgba(var(--wow-accent), .14), rgba(255,255,255,.04) ); border-bottom: 1px solid rgba(255,255,255,.06); position: static !important; top: auto !important; z-index: 10; margin-top: 10px !important; } body.gs-wow #main-menu .menu{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; flex-wrap: nowrap; } body.gs-wow #main-menu .menu > li{ list-style: none; flex: 0 0 auto !important; } body.gs-wow #main-menu .menu > li > a{ display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 12px; border-radius: 999px; text-decoration: none; color: rgba(var(--wow-txt), .92); background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } body.gs-wow #main-menu .menu > li.current-menu-item > a, body.gs-wow #main-menu .menu > li > a[aria-current="page"]{ background: rgba(var(--wow-accent), .22); border-color: rgba(var(--wow-accent), .32); } /* ========================= CONTENT: biar "Now Playing Movies" gak mepet kiri/kanan ========================= */ body.gs-wow #content .wrapper{ padding-left: 12px !important; padding-right: 12px !important; } /* ========================= DESKTOP ========================= */ @media (min-width: 901px){ /* hamburger cuma mobile */ body.gs-wow .shme{ display: none !important; } /* search gak kepanjangan */ body.gs-wow .searchx.minmb{ max-width: var(--wow-search-max); } } /* ========================= MOBILE (<=900px) baris 1: hamb + logo + auth baris 2: search full width ========================= */ @media (max-width: 900px){ body.gs-wow .th .centernav.bound{ grid-template-columns: auto 1fr auto; grid-template-areas: "hamb logo auth" "search search search"; align-items: start !important; /* naikin semua (lebih rapat) */ padding: 6px 10px !important; gap: 10px !important; } body.gs-wow .shme{ grid-area: hamb; display: grid !important; } body.gs-wow header.mainheader{ grid-area: logo; } body.gs-wow #gs{ grid-area: auth; } /* kecilin tombol auth dikit biar gak “turun” */ body.gs-wow #gs a{ height: 32px; padding: 0 10px; font-size: 14px; } /* search full width & aman */ body.gs-wow .searchx.minmb, body.gs-wow .searchx.minmb.minmbx{ grid-area: search; max-width: var(--wow-search-max-m) !important; justify-self: stretch; } /* MENU: WRAP ke bawah (stop scroll kanan) */ body.gs-wow #main-menu .menu{ justify-content: flex-start !important; flex-wrap: wrap !important; overflow-x: visible !important; white-space: normal !important; gap: 10px !important; } body.gs-wow #main-menu .menu > li > a{ max-width: 100%; padding: 8px 10px; min-height: 34px; font-size: 14px; } body.gs-wow #content .wrapper{ padding-left: 10px !important; padding-right: 10px !important; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow *{ transition: none !important; } } /* ========================================================= WOWLITE FOOTER — GLASS WOW (PSI-friendly) Scope: body.gs-wow - NO backdrop-filter - Fix theme mobile: .footer-az {display:none} - Override chip biru footer default ========================================================= */ body.gs-wow #footer{ margin-top: 28px; background: linear-gradient(180deg, rgba(var(--wow-bg-1), .92), rgba(var(--wow-bg-2), .96) ); border-top: 1px solid rgba(255,255,255,.06); color: rgba(var(--wow-txt), .92); text-align: left; line-height: 20px; font-size: 13px; } body.gs-wow #footer a{ color: rgba(var(--wow-txt), .92); text-decoration: none; } body.gs-wow #footer a:hover{ color: rgba(255,255,255,.98); } /* wrapper jadi grid biar rapih */ body.gs-wow #footer .footercopyright{ max-width: 1190px; margin: 0 auto; padding: 18px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "genres pages" "copy copy"; gap: 16px; overflow: visible; } /* ========================= GENRES BOX (footer-az biasa) ========================= */ body.gs-wow #footer .footer-az:not(.footer-pages){ grid-area: genres; /* FIX: theme mobile sering hide */ display: block !important; margin: 0 !important; padding: 14px 14px 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.20); } body.gs-wow #footer .footer-az:not(.footer-pages) .ftaz{ display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px 0 !important; padding: 0 !important; border-right: 0 !important; font-size: 18px; font-weight: 900; line-height: 1.1; } body.gs-wow #footer .footer-az:not(.footer-pages) .size-s{ display: block; margin: 0 0 12px 0 !important; font-size: 13px; color: rgba(var(--wow-muted), .92); } /* list genres -> grid chip */ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1100px){ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 720px){ body.gs-wow #footer .footer-az:not(.footer-pages) .az-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li{ margin: 0 !important; display: block !important; } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li a{ display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 34px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.gs-wow #footer .footer-az:not(.footer-pages) .az-list li a:hover{ background: rgba(var(--wow-accent), .18); border-color: rgba(var(--wow-accent), .28); } /* ========================= PAGES (Contact/Privacy/DMCA) ========================= */ body.gs-wow #footer .footer-az.footer-pages{ grid-area: pages; /* FIX: theme mobile hide + jangan ketiban display:block */ display: flex !important; margin: 0 !important; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); align-items: flex-start; justify-content: flex-end; } body.gs-wow #footer .footer-az.footer-pages .az-list{ list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } body.gs-wow #footer .footer-az.footer-pages .az-list li{ margin: 0 !important; } body.gs-wow #footer .footer-az.footer-pages .az-list li a{ display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-weight: 900; font-size: 13px; } body.gs-wow #footer .footer-az.footer-pages .az-list li a:hover{ background: rgba(var(--wow-accent), .16); border-color: rgba(var(--wow-accent), .26); } /* ========================= COPYRIGHT CARD ========================= */ body.gs-wow #footer .copyright{ grid-area: copy; margin: 0 !important; padding: 14px 14px 16px; border-radius: 16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); display: flex; align-items: center; gap: 14px; overflow: visible; } body.gs-wow #footer .copyright .footer-logo{ float: none !important; margin: 0 !important; flex: 0 0 auto; } body.gs-wow #footer .copyright .footer-logo img{ display: block; height: 40px; width: auto; } body.gs-wow #footer .copyright .txt{ float: none !important; width: auto !important; text-align: left !important; color: rgba(var(--wow-muted), .95); } body.gs-wow #footer .copyright .txt span{ display: block; margin-bottom: 6px; font-weight: 900; color: rgba(var(--wow-txt), .92); } body.gs-wow #footer .copyright .txt p{ margin: 0 !important; line-height: 1.6; } /* ========================= MOBILE STACK ========================= */ @media (max-width: 900px){ body.gs-wow #footer .footercopyright{ grid-template-columns: 1fr; grid-template-areas: "pages" "genres" "copy"; } body.gs-wow #footer .footer-az.footer-pages{ justify-content: flex-start; } body.gs-wow #footer .footer-az.footer-pages .az-list{ justify-content: flex-start; } body.gs-wow #footer .copyright{ flex-direction: column; align-items: flex-start; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow #footer *{ transition: none !important; } } /* ========================================================= WOW FOOTER — NO GENRES (ratakan kiri-kanan) - kiri: copyright card - kanan: pages pills (Contact/Privacy/DMCA) - hilangin area kosong kanan ========================================================= */ body.gs-wow #footer .footercopyright{ /* matiin grid lama */ display:flex !important; grid-template-columns: none !important; grid-template-areas: none !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; flex-wrap:wrap !important; max-width:1190px; margin:0 auto; padding:16px 12px !important; } /* card copyright jangan full-width lagi */ body.gs-wow #footer .copyright{ flex: 1 1 560px !important; min-width: 320px; margin: 0 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; border-radius:16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); padding:14px 14px 16px !important; } /* pages card: rata tengah, gak nempel atas */ body.gs-wow #footer .footer-az.footer-pages{ flex: 0 0 auto !important; align-self:center !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; border-radius:16px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.18); padding:14px !important; } /* list pills rapih */ body.gs-wow #footer .footer-az.footer-pages .az-list{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin:0 !important; padding:0 !important; list-style:none !important; justify-content:flex-end !important; } /* jangan ada "clear" bikin jarak/tinggi aneh */ body.gs-wow #footer .footercopyright .clear{ display:none !important; } /* mobile: pages turun bawah, tetep rapih */ @media (max-width: 900px){ body.gs-wow #footer .footercopyright{ justify-content:flex-start !important; } body.gs-wow #footer .footer-az.footer-pages{ width:100% !important; justify-content:flex-start !important; } body.gs-wow #footer .footer-az.footer-pages .az-list{ justify-content:flex-start !important; } } /* ========================================================= NETFLIX-LIKE HEADER PATCH (PSI-light) Scope: body.gs-wow - Dark clean + red accent - Search icon shows; search box appears when .minmbx toggled (JS already exists) - Nav links: simple text, active underline red ========================================================= */ body.gs-wow{ --nf-accent: 229, 9, 20; /* Netflix red */ --nf-bg: 20, 20, 20; /* #141414 */ --nf-bg-2: 0, 0, 0; --nf-txt: 255, 255, 255; --nf-muted: 180, 180, 180; --nf-radius: 6px; --nf-bar-h: 56px; --nf-pad-x: 16px; --nf-pad-y: 10px; --nf-btn-h: 34px; --nf-link-h: 34px; --nf-search-h: 34px; --nf-search-w: 280px; /* tweak: 240–360 */ } /* ========================= TOP BAR ========================= */ body.gs-wow .th{ background: rgb(var(--nf-bg)) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; height: auto !important; overflow: visible !important; box-shadow: none !important; position: relative; z-index: 60; } body.gs-wow .th .centernav.bound{ display: flex !important; align-items: center !important; gap: 12px !important; padding: var(--nf-pad-y) var(--nf-pad-x) !important; min-height: var(--nf-bar-h); overflow: visible !important; } /* stop float bawaan theme */ body.gs-wow .th .centernav.bound > *{ float: none !important; } /* Desktop: hide hamburger */ @media (min-width: 901px){ body.gs-wow .shme{ display: none !important; } } /* Hamburger button (mobile) */ body.gs-wow .shme{ width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border-radius: var(--nf-radius) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(var(--nf-txt), .92) !important; margin: 0 !important; user-select: none; } body.gs-wow .shme:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* Logo area */ body.gs-wow header.mainheader{ margin: 0 !important; flex: 0 0 auto !important; margin-right: auto !important; /* push actions to the right */ } /* Desktop logo */ body.gs-wow .logos{ margin: 0 !important; line-height: 0 !important; } body.gs-wow .logos a{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } body.gs-wow .logos img{ height: 32px; width: auto; display: block; } /* Hide text label for cleaner Netflix-ish look (optional) */ body.gs-wow .logos .hdl{ display: none !important; } /* Mobile logo */ body.gs-wow .mobilelogo{ margin: 0 !important; } body.gs-wow .mobilelogo img{ height: 30px; width: auto; display: block; } /* ========================= SEARCH (Netflix-ish: icon + expandable input) ========================= */ /* IMPORTANT: undo old WOW that hid the search icon */ body.gs-wow .th .centernav.bound > .srcmob{ display: grid !important; } /* Search open icon (outside form) */ body.gs-wow .th .srcmob{ width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border-radius: var(--nf-radius) !important; background: transparent !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(var(--nf-txt), .86) !important; cursor: pointer; user-select: none; } body.gs-wow .th .srcmob:hover{ background: rgba(255,255,255,.06) !important; color: rgba(var(--nf-txt), .98) !important; } body.gs-wow .th .srcmob:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* Search box container: hidden until .minmbx (toggled by existing JS) */ body.gs-wow .searchx.minmb{ display: none !important; position: static !important; width: auto !important; max-width: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } body.gs-wow .searchx.minmb.minmbx{ display: block !important; flex: 0 0 auto !important; } /* Search form styling */ body.gs-wow .searchx.minmb #form{ display: flex !important; align-items: center !important; gap: 8px !important; height: var(--nf-search-h); padding: 0 10px !important; border-radius: var(--nf-radius) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; margin: 0 !important; } /* Input */ body.gs-wow .searchx.minmb #s{ width: var(--nf-search-w); max-width: 46vw; min-width: 180px; height: calc(var(--nf-search-h) - 2px); line-height: calc(var(--nf-search-h) - 2px); border: 0 !important; outline: none !important; background: transparent !important; color: rgba(var(--nf-txt), .92) !important; font-size: 14px; padding: 0 6px !important; } body.gs-wow .searchx.minmb #s::placeholder{ color: rgba(var(--nf-muted), .90) !important; } /* Submit button (magnifier) */ body.gs-wow .searchx.minmb #submitsearch{ display: inline-flex !important; width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 4px !important; background: rgba(255,255,255,.08) !important; color: rgba(var(--nf-txt), .96) !important; cursor: pointer; } body.gs-wow .searchx.minmb #submitsearch:hover{ background: rgba(var(--nf-accent), .22) !important; } /* Close X inside form */ body.gs-wow .searchx.minmb .srcmob.srccls{ display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; border-radius: 4px !important; background: transparent !important; border: 0 !important; color: rgba(var(--nf-muted), .95) !important; } /* ========================= AUTH (Register / Login) ========================= */ body.gs-wow #gs{ display: flex !important; gap: 10px !important; align-items: center !important; justify-content: flex-end !important; position: static !important; margin: 0 !important; white-space: nowrap; } body.gs-wow #gs a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: var(--nf-btn-h); padding: 0 12px !important; border-radius: var(--nf-radius) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; } /* Register: subtle outline */ body.gs-wow #gs a:first-child{ background: transparent !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(var(--nf-txt), .92) !important; } body.gs-wow #gs a:first-child:hover{ background: rgba(255,255,255,.06) !important; } /* Login: red button */ body.gs-wow #gs a:last-child{ background: rgb(var(--nf-accent)) !important; border: 1px solid rgba(0,0,0,.20) !important; color: #fff !important; } body.gs-wow #gs a:last-child:hover{ background: rgba(var(--nf-accent), .92) !important; } body.gs-wow #gs a:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75); outline-offset: 2px; } /* ========================= MAIN NAV MENU ========================= */ body.gs-wow #main-menu{ background: rgb(var(--nf-bg)) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; position: static !important; top: auto !important; margin-top: 0 !important; } /* Make nav align with top padding */ body.gs-wow #main-menu .centernav .bound{ padding: 0 var(--nf-pad-x) 10px !important; } /* Nav list */ body.gs-wow #main-menu .menu{ display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; padding: 0 !important; margin: 0 !important; flex-wrap: nowrap !important; } /* Links: simple text like Netflix */ body.gs-wow #main-menu .menu > li{ list-style: none !important; margin: 0 !important; } body.gs-wow #main-menu .menu > li > a{ display: inline-flex !important; align-items: center !important; height: var(--nf-link-h); padding: 0 2px !important; border-radius: 4px; text-decoration: none !important; color: rgba(var(--nf-txt), .82) !important; font-weight: 650 !important; } body.gs-wow #main-menu .menu > li > a:hover{ color: rgba(var(--nf-txt), .98) !important; } /* Active state: red underline */ body.gs-wow #main-menu .menu > li.current-menu-item > a, body.gs-wow #main-menu .menu > li > a[aria-current="page"]{ color: rgba(var(--nf-txt), .98) !important; box-shadow: inset 0 -2px 0 rgb(var(--nf-accent)); } /* Dropdown panel */ body.gs-wow #main-menu .dropdown-menu, body.gs-wow #main-menu .sub-menu{ background: rgba(0,0,0,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; padding: 8px !important; box-shadow: 0 16px 32px rgba(0,0,0,.45) !important; } body.gs-wow #main-menu .dropdown-menu li a, body.gs-wow #main-menu .sub-menu li a{ display: flex !important; align-items: center !important; padding: 8px 10px !important; border-radius: 8px !important; color: rgba(var(--nf-txt), .86) !important; text-decoration: none !important; } body.gs-wow #main-menu .dropdown-menu li a:hover, body.gs-wow #main-menu .sub-menu li a:hover{ background: rgba(255,255,255,.06) !important; color: rgba(var(--nf-txt), .98) !important; } /* ========================= MOBILE TUNING ========================= */ @media (max-width: 900px){ body.gs-wow .th .centernav.bound{ flex-wrap: wrap !important; padding: 8px 10px !important; min-height: auto !important; } /* logo doesn't push too hard on mobile */ body.gs-wow header.mainheader{ margin-right: 0 !important; flex: 1 1 auto !important; } /* Search expands full width when opened */ body.gs-wow .searchx.minmb.minmbx{ width: 100% !important; flex: 1 1 100% !important; order: 99; /* drop to next line */ } body.gs-wow .searchx.minmb #form{ width: 100% !important; } body.gs-wow .searchx.minmb #s{ width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Nav can wrap on mobile (avoid horizontal scroll) */ body.gs-wow #main-menu .menu{ flex-wrap: wrap !important; gap: 12px !important; } } /* Reduce motion (keep PSI happy) */ @media (prefers-reduced-motion: reduce){ body.gs-wow .th *, body.gs-wow #main-menu *{ transition: none !important; } } /* ========================================================= NETFLIX-LIKE HOMEPAGE PATCH (PSI-light) Scope: body.gs-wow #content.gs-index-wow - Ikut header: dark clean + red accent - No blur/backdrop-filter - Hover ringan ========================================================= */ body.gs-wow #content.gs-index-wow{ /* fallback kalau header vars belum kebaca */ --nf-accent: var(--nf-accent, 229, 9, 20); --nf-bg: var(--nf-bg, 20, 20, 20); --nf-muted: var(--nf-muted, 180, 180, 180); --gs-card: rgba(255,255,255,.05); --gs-border: rgba(255,255,255,.09); --gs-shadow: 0 10px 26px rgba(0,0,0,.28); background: rgb(var(--nf-bg)) !important; padding-top: 12px !important; /* subtle red glow ala Netflix (ringan) */ background: radial-gradient(560px 240px at 14% 0%, rgba(var(--nf-accent), .12), transparent 70%), radial-gradient(520px 220px at 88% 10%, rgba(255,255,255,.05), transparent 70%), rgb(var(--nf-bg)) !important; } /* wrapper spacing */ body.gs-wow #content.gs-index-wow .wrapper{ padding-top: 6px !important; } body.gs-wow #content.gs-index-wow .postbody{ padding-top: 2px !important; } /* section card */ body.gs-wow #content.gs-index-wow .gs-section{ border-radius: 16px !important; background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important; box-shadow: var(--gs-shadow) !important; overflow: hidden !important; margin-bottom: 14px !important; } /* ===================================================== SECTION BAR (Now Playing / TV Airing Today) - buang nuansa biru → jadi dark + red accent ===================================================== */ body.gs-wow #content.gs-index-wow .releases.latesthome{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap: 12px !important; padding: 12px 14px !important; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(20,20,20,.98) ) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } body.gs-wow #content.gs-index-wow .releases.latesthome h3{ margin:0 !important; color: rgba(255,255,255,.92) !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .2px !important; } /* View all button */ body.gs-wow #content.gs-index-wow .releases.latesthome .vl{ display:inline-flex !important; align-items:center !important; padding: 8px 12px !important; border-radius: 999px !important; text-decoration:none !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important; transition: transform .12s ease, background .12s ease, border-color .12s ease !important; } body.gs-wow #content.gs-index-wow .releases.latesthome .vl:hover{ transform: translateY(-1px) !important; background: rgba(var(--nf-accent), .18) !important; border-color: rgba(var(--nf-accent), .35) !important; } /* ===================================================== HERO (lebih Netflix, tetap ringan) ===================================================== */ body.gs-wow #content.gs-index-wow .gs-home-hero{ margin: 0 14px 12px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.10) !important; overflow: hidden !important; position: relative !important; background: rgba(0,0,0,.25) !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__bg{ display:block !important; width:100% !important; height:auto !important; aspect-ratio: 16/9 !important; object-fit: cover !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__overlay{ background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.86) 100% ) !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__badge{ background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.92) !important; font-weight: 800 !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__title{ color: #fff !important; font-weight: 900 !important; text-shadow: 0 10px 26px rgba(0,0,0,.35); } /* CTA buttons */ body.gs-wow #content.gs-index-wow .gs-btn{ border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.28) !important; color: rgba(255,255,255,.92) !important; } body.gs-wow #content.gs-index-wow .gs-btn-primary{ background: rgb(var(--nf-accent)) !important; border-color: rgba(0,0,0,.18) !important; color: #fff !important; } body.gs-wow #content.gs-index-wow .gs-btn-primary:hover{ background: rgba(var(--nf-accent), .92) !important; } /* ===================================================== GRID / CARDS (Netflix-ish: hover halus + rapih) ===================================================== */ body.gs-wow #content.gs-index-wow .listupd{ padding: 0 14px 14px !important; } body.gs-wow #content.gs-index-wow .listupd.normal .excstf{ gap: 12px !important; } /* card hover ringan */ body.gs-wow #content.gs-index-wow article.bs{ transition: transform .12s ease !important; } body.gs-wow #content.gs-index-wow article.bs:hover{ transform: translateY(-2px) !important; } /* poster container */ body.gs-wow #content.gs-index-wow article.bs .limit{ border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 10px 26px rgba(0,0,0,.28) !important; } /* type badge (Movie/TV) → kecil + red */ body.gs-wow #content.gs-index-wow .typez{ background: rgba(var(--nf-accent), .92) !important; color: #fff !important; border-radius: 999px !important; padding: 6px 10px !important; font-weight: 900 !important; letter-spacing: .3px !important; } /* rating chip area biar subtle */ body.gs-wow #content.gs-index-wow .bt span{ background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* title area */ body.gs-wow #content.gs-index-wow .tt{ color: rgba(255,255,255,.92) !important; font-weight: 750 !important; } body.gs-wow #content.gs-index-wow .tt h2{ margin-top: 6px !important; font-size: 14px !important; line-height: 1.25 !important; /* clamp 2 lines (ringan) */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* link focus (aksesibilitas + UX) */ body.gs-wow #content.gs-index-wow a:focus-visible{ outline: 2px solid rgba(var(--nf-accent), .75) !important; outline-offset: 2px !important; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 768px){ body.gs-wow #content.gs-index-wow .gs-home-hero{ margin: 0 12px 12px !important; } body.gs-wow #content.gs-index-wow .listupd{ padding: 0 12px 12px !important; } body.gs-wow #content.gs-index-wow .gs-home-hero__title{ font-size: 19px !important; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ body.gs-wow #content.gs-index-wow *{ transition:none !important; } body.gs-wow #content.gs-index-wow article.bs:hover{ transform:none !important; } } /* === WOW HEADER SEARCH FIX (desktop + mobile) === */ /* Goal: - Desktop: search bar always visible (no toggle), hamburger hidden - Mobile: hamburger + search icon visible; search opens as overlay (no layout shift / no double icons) */ body.gs-wow .th .centernav.bound{ position: relative; } /* Desktop (>=901px) */ @media (min-width: 901px){ body.gs-wow .th .centernav.bound{ grid-template-columns: auto minmax(240px, 680px) auto; column-gap: 14px; } /* hide hamburger + mobile search icon on desktop */ body.gs-wow .th .centernav.bound .shme{ display:none !important; } body.gs-wow .th .centernav.bound .srcmob{ display:none !important; } /* search ALWAYS visible */ body.gs-wow .th .centernav.bound .searchx{ display:block !important; width:100%; max-width:680px; margin:0 auto; padding:0 !important; border:0 !important; background:transparent !important; } body.gs-wow .th .centernav.bound .searchx form#form{ display:flex; align-items:center; gap:10px; height:44px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); } body.gs-wow .th .centernav.bound .searchx form#form input#s{ flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent; color:rgba(255,255,255,.92); font-size:14px; } body.gs-wow .th .centernav.bound .searchx form#form #submitsearch{ flex:0 0 40px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18); color:rgba(255,255,255,.90); display:inline-flex; align-items:center; justify-content:center; } /* close icon inside form never needed on desktop */ body.gs-wow .th .centernav.bound .searchx form#form .srccls{ display:none !important; } } /* Mobile (<=900px) */ @media (max-width: 900px){ /* hamburger visible */ body.gs-wow .th .centernav.bound .shme{ display:grid !important; } /* default: search hidden, only icon shown */ body.gs-wow .th .centernav.bound .searchx{ display:none !important; position:absolute; left:12px; right:12px; top:10px; z-index: 9999; padding:0 !important; border:0 !important; background:transparent !important; } body.gs-wow .th .centernav.bound .searchx.minmb.minmbx{ display:block !important; } /* open icon visible */ body.gs-wow .th .centernav.bound .srcmob:not(.srccls){ display:inline-flex !important; align-items:center; justify-content:center; } /* when search open: hide the open icon to avoid double icons */ body.gs-wow .th .centernav.bound .searchx.minmb.minmbx + .srcmob{ display:none !important; } /* close icon visible on mobile */ body.gs-wow .th .centernav.bound .searchx form#form .srccls{ display:inline-flex !important; } /* keep form compact */ body.gs-wow .th .centernav.bound .searchx form#form{ height:44px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(18,18,24,.92); } } /* ================================ DROPDOWN FIX (desktop hover gap) ================================ */ /* pastikan submenu gak ke-clip */ #main-menu, #main-menu .centernav, #main-menu .bound, #main-menu .menu { overflow: visible !important; } /* pastikan dropdown di atas konten hero */ #main-menu { position: relative; z-index: 9999; } /* anchor parent */ #main-menu .menu > li.menu-item-has-children { position: relative; } /* hover bridge: area transparan di bawah parent supaya cursor gak “putus” */ #main-menu .menu > li.menu-item-has-children::after{ content:""; position:absolute; left:-10px; right:-10px; top:100%; height:16px; /* ini yang bikin kamu bisa turun ke item bawah tanpa hilang */ background:transparent; } /* submenu base (hidden) */ #main-menu .menu > li .dropdown-menu, #main-menu .menu > li .sub-menu{ position:absolute; top:100%; left:0; min-width:220px; /* styling aman & ringan */ padding:10px 10px; margin:8px 0 0 0; /* jarak visual (bridge sudah nanggung) */ border-radius:14px; background:rgba(0,0,0,.92); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 40px rgba(0,0,0,.35); /* animation ringan */ opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .12s ease, transform .12s ease, visibility .12s ease; pointer-events:none; z-index:10000; } /* show submenu on hover / keyboard / locked class */ #main-menu .menu > li.menu-item-has-children:hover > .dropdown-menu, #main-menu .menu > li.menu-item-has-children:hover > .sub-menu, #main-menu .menu > li.menu-item-has-children:focus-within > .dropdown-menu, #main-menu .menu > li.menu-item-has-children:focus-within > .sub-menu, #main-menu .menu > li.menu-item-has-children.gs-open > .dropdown-menu, #main-menu .menu > li.menu-item-has-children.gs-open > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } /* item submenu */ #main-menu .dropdown-menu a, #main-menu .sub-menu a{ display:block; padding:10px 12px; border-radius:12px; color:rgba(255,255,255,.9); text-decoration:none; font-weight:800; } #main-menu .dropdown-menu a:hover, #main-menu .sub-menu a:hover{ background:rgba(255,255,255,.08); } /* opsional: cursor */ #main-menu .dropdown-toggle{ cursor:pointer; }