/* ========================================================= 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; } }