/* PakTV Ghar Cinema Edition: a modern, original streaming-directory design.
   A cinematic visual language, not an affiliation with any streaming service.
   Kept separate from the content and opt-in advertising scripts. */
:root{
 --bg:#08090e;--panel:#111319;--panel2:#181b22;--border:#2b303b;
 --text:#f8f8fa;--sub:#b4b6c0;--orange:#ff5964;--orange2:#e63345;
 --mint:#9de0cd;--shadow:0 22px 64px #0009;--sidebar:0;
 color-scheme:dark
}
html{background:#08090e;scroll-padding-top:140px}
body{
 background:radial-gradient(ellipse 90% 450px at 55% -120px,#3c1724aa,transparent 75%),#08090e;
 color:#f7f7fa;
 letter-spacing:-.012em
}
.app-shell{background:transparent}
.sidebar{
 position:fixed;inset:0 0 auto;width:100%;height:76px;z-index:25;
 display:flex;flex-direction:row;align-items:center;gap:clamp(14px,2.2vw,32px);
 padding:0 clamp(18px,3vw,56px);background:linear-gradient(180deg,#08090ef2,#0c0c13e7);
 border-right:0;border-bottom:1px solid #ffffff12;
 box-shadow:0 10px 40px #0006;backdrop-filter:blur(24px)
}
.brand{padding:0;gap:10px;flex:none}
.brand strong{font-size:23px;letter-spacing:-1.25px}
.brand strong em{color:#ff6672}
.brand small{font-size:9px;color:#a5a6b0;line-height:1.25}
.brand-icon,.mobile-brand .brand-icon{
 background:linear-gradient(135deg,#ff6474,#c41f39);color:#fff;
 border-radius:11px;box-shadow:0 6px 22px #db304455
}
.sidebar-label{display:none}
.main-nav{
 flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;
 overflow:auto hidden;scrollbar-width:none;gap:3px
}
.main-nav::-webkit-scrollbar{display:none}
.nav-item{
 width:auto;min-height:42px;flex:none;white-space:nowrap;border:0;border-radius:8px;
 padding:0 10px;font-size:12px;color:#c5c4cd;gap:6px;letter-spacing:.005em
}
.nav-item .nav-icon{font-size:17px;width:20px}
.nav-item:hover{background:#ffffff10;color:white}
.nav-item.active{background:#fff1;border-color:transparent;color:#fff;box-shadow:inset 0 -2px #ff5567}
.sidebar-bottom{display:flex;align-items:center;margin:0;flex:none}
.side-tip{display:none}
.language-button{margin:0;padding:9px 10px;border-radius:8px;font-size:12px;white-space:nowrap;background:#ffffff09;border-color:#ffffff19}
.content-area{margin-left:0;padding-top:76px;background:transparent}
.topbar{
 position:sticky;top:76px;z-index:22;height:68px;
 padding:10px clamp(18px,4vw,72px);gap:18px;background:#08090ed9;
 backdrop-filter:blur(20px);border-bottom:1px solid #ffffff12
}
.search-shell{max-width:810px;background:#ffffff0c;border:1px solid #ffffff27;border-radius:9px;color:#aeb0b9;height:46px}
.search-shell:focus-within{border-color:#ff7d85;box-shadow:0 0 0 3px #ff586718}
.search-shell input{color:#fff}
.top-favs{background:#ffffff0c;border-color:#ffffff1f;border-radius:9px}
.top-favs:hover{background:#ffffff1b}
main{width:100%;max-width:1700px;margin:0 auto;padding:30px clamp(20px,4.5vw,78px) 75px;min-width:0}
.site-footer{margin:0 clamp(20px,4.5vw,78px) 30px}
.welcome-line{margin:0 0 17px;align-items:center;color:#c8c8d0}
.welcome-line .welcome{font-weight:700;font-size:13px;letter-spacing:.035em}
.welcome-line .urdu{color:#e3a9ab}
.cinema-hero{
 min-height:480px;height:min(57vw,585px);max-height:650px;
 background:#170d17;overflow:hidden;border-radius:16px;
 border:1px solid #ffffff20;box-shadow:0 24px 75px #000b;
 display:flex;align-items:flex-end;position:relative;isolation:isolate
}
.cinema-hero:before{
 inset:0;background-image:var(--hero-image,linear-gradient(140deg,#402130,#171a30));
 background-size:cover;background-position:center 30%;opacity:1;filter:saturate(1.08);
 transform:scale(1.001)
}
.cinema-hero:after{
 inset:0;background:
 linear-gradient(90deg,#07080df5 1%,#090911e6 27%,#0b0c13b3 49%,#0b0c1322 86%),
 linear-gradient(0deg,#09090fe9,transparent 46%),linear-gradient(180deg,#07070b47,transparent 20%);
}
.cinema-hero .hero-content{width:100%;max-width:720px;padding:clamp(25px,5vw,69px);margin-bottom:2%}
.cinema-hero .eyebrow{
 display:inline-flex;align-items:center;gap:9px;color:#ffc0c7;font-size:12px;
 font-weight:900;letter-spacing:.16em;text-transform:uppercase
}
.cinema-hero h1{
 font-size:clamp(37px,6vw,77px);line-height:1.01;letter-spacing:-.055em;
 margin:18px 0;max-width:660px;text-wrap:balance;text-shadow:0 7px 30px #000a
}
.cinema-hero h1 span{color:#ff6674}
.cinema-hero p{
 max-width:520px;color:#d9dce3;font-size:clamp(14px,1.5vw,17px);
 line-height:1.6;text-shadow:0 1px 6px #000;margin-bottom:26px
}
.cinema-hero .btn-primary,.cinema-hero .btn-secondary{
 min-height:51px;padding:0 23px;border-radius:7px;letter-spacing:0;font-weight:850
}
.btn-primary{
 background:linear-gradient(110deg,#ff6270,#e22c45)!important;border-color:transparent!important;
 color:#fff!important;box-shadow:0 9px 25px #db20374c
}
.btn-primary:hover{background:linear-gradient(110deg,#ff8790,#ff5163)!important;transform:translateY(-1px)}
.btn-secondary{background:#ffffff1a;border:1px solid #ffffff42;color:#fff}
.btn-secondary:hover{background:#ffffff2b;border-color:#fff8}
.cinema-hero .hero-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#eae8eb;font-size:12px;font-weight:800;margin:0 0 18px}
.cinema-hero .hero-meta b{color:#d5f1e5}
.cinema-hero .hero-meta span{padding:5px 10px;background:#ffffff1b;border:1px solid #ffffff2f;border-radius:5px}
.cinema-quick{display:flex;overflow-x:auto;scrollbar-width:thin;gap:9px;padding:19px 1px 13px;margin:0 0 10px}
.cinema-quick .quick-tile{
 flex:0 0 auto;min-height:51px;padding:9px 14px;display:flex;align-items:center;
 gap:9px;background:#17181fcf;border:1px solid #ffffff1b;border-radius:8px;
 box-shadow:none;min-width:0;transition:background .2s,transform .2s
}
.cinema-quick .quick-emoji{width:30px;height:30px;display:grid;place-items:center;font-size:20px;border-radius:7px;background:#28262e!important}
.cinema-quick .quick-name{font-size:12px;font-weight:800}
.cinema-quick .quick-ur{display:none}
.cinema-quick .quick-tile:hover{background:#272630;border-color:#ff697671;transform:translateY(-2px)}
.section-head,.cinema-heading{margin:34px 0 14px;align-items:flex-end}
.section-head h2,.cinema-heading h2{font-size:clamp(21px,2.3vw,29px);letter-spacing:-.045em;color:#f8f8fa;font-weight:850}
.cinema-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}
.cinema-heading p{margin:4px 0 0;color:#b8b9c4;font-size:13px;line-height:1.5}
.cinema-rail-actions{display:flex;gap:8px;align-items:center;flex:none}
.cinema-arrow{width:34px;height:34px;border-radius:8px;border:1px solid #ffffff30;background:#252630;color:#fff;font-size:26px;line-height:1;display:grid;place-items:center}
.cinema-arrow:hover{background:#ff5964;border-color:#ff6674}
.cinema-arrow:focus-visible{outline:3px solid #ffc0c8;outline-offset:3px}
.cinema-rail-actions a{margin-left:9px}
.cinema-heading a,.text-link{color:#e2e3e8;font-size:12px;font-weight:850}
.cinema-heading a:hover,.text-link:hover{color:#ff7b88}
.cinema-row{margin:12px 0 28px}
.cinema-video-rail,.cinema-poster-rail,.cinema-channel-rail{
 display:flex;gap:15px;overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#555363 transparent;
 padding:10px 3px 22px;overscroll-behavior-x:contain
}
.cinema-video-rail .video-card{
 flex:0 0 clamp(210px,22vw,295px);scroll-snap-align:start;
 background:#131419;border:1px solid #ffffff15;border-radius:10px;
 box-shadow:0 10px 30px #0005
}
.cinema-channel-rail .channel-card{flex:0 0 clamp(200px,22vw,270px);scroll-snap-align:start}
.cinema-poster-rail .series-card{
 flex:0 0 clamp(165px,16.5vw,215px);scroll-snap-align:start;
 background:#16171d;border-radius:10px;border:1px solid #ffffff1b
}
.cinema-video-rail .video-card:hover,.cinema-channel-rail .channel-card:hover,
.cinema-poster-rail .series-card:hover{
 transform:translateY(-5px) scale(1.014);border-color:#ff66776b;box-shadow:0 15px 40px #000b
}
.video-card{background:#15161b;border-color:#ffffff13;border-radius:10px;box-shadow:0 7px 23px #0004}
.video-thumb{background:#242530}
.video-thumb img{transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:saturate(1.05)}
.video-card:hover .video-thumb img{transform:scale(1.07)}
.thumb-play{background:#e73f52ed;border:0;width:46px;height:46px;box-shadow:0 6px 21px #000a}
.source-tag{background:#0a0b10da;color:#f4f4f7;letter-spacing:.035em;border-radius:4px;font-size:10px}
.video-body{background:#14151a}
.video-body h3{line-height:1.42;color:#f5f5f8}
.video-meta{color:#abb0bc}
.series-grid{grid-template-columns:repeat(auto-fill,minmax(174px,1fr));gap:15px}
.series-card{background:#131419;border:1px solid #ffffff15;border-radius:11px;box-shadow:0 8px 25px #0004;transition:transform .22s,box-shadow .22s,border-color .22s}
.series-card:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 16px 35px #0009;border-color:#ff768573}
.series-poster{
 aspect-ratio:2/3;height:auto;min-height:195px;background:#231c2c;display:block;
 position:relative;isolation:isolate
}
.series-poster:after{z-index:0}
.series-cover-image{z-index:1;object-position:center 22%;filter:saturate(1.03)}
.series-poster:has(.series-cover-image):before{z-index:2}
.series-poster .poster-identity{
 z-index:1;inset:12px;align-items:center;font-size:clamp(19px,2vw,26px);
 font-weight:900;letter-spacing:-.05em
}
.poster-icon{opacity:.13!important}
.series-poster .poster-network{z-index:4;bottom:10px;left:10px;background:#090b11d9;color:#fff;border-radius:4px}
.series-desc{padding:14px}
.series-desc h3{font-size:16px;line-height:1.32;min-height:38px;color:#f7f7fa;letter-spacing:-.025em}
.series-desc .series-latest{color:#f9a1a8;font-size:11px}
.series-tag{color:#aeb3c0}
.series-action{color:#f2c9cb;font-weight:850;font-size:12px}
.series-fav{top:auto;bottom:89px;right:9px;background:#15151ecf}
.channel-grid{gap:14px}
.channel-card{
 background:linear-gradient(150deg,#1a1b21,#111216);
 border:1px solid #ffffff20;border-radius:11px;min-height:175px
}
.channel-card:hover{border-color:#fa77828b}
.channel-avatar{border-radius:12px;box-shadow:0 8px 24px #0006}
.quick-grid:not(.cinema-quick) .quick-tile{background:#17191e;border-color:#ffffff24}
.library-tools,.archive-toolbar,.episode-panel,.schedule-card,.latest-fact{
 background:#13151d;border-color:#ffffff25
}
.chip{border:1px solid #ffffff2a;background:#1c1d23;color:#dbdce3}
.chip.active{background:#ff5868;color:#fff;border-color:#ff5868}
.chip:hover{border-color:#f3798799}
.page-title .eyebrow{color:#ff8191;letter-spacing:.12em}
.page-title h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.05em}
.welcome-line,.site-footer{color:#c2c1cb}
.ad-placement{background:transparent;border-color:#ffffff24}
.privacy-banner,.privacy-dialog{font-family:inherit}
@media(max-width:1180px) and (min-width:931px){
 .sidebar{padding:0 20px;gap:13px}.brand strong{font-size:19px}.brand small{display:none}
 .nav-item{padding:0 8px;font-size:11px}.sidebar-bottom{display:none}
 .cinema-hero{min-height:400px}
}
@media(max-width:930px){
 .sidebar{display:none}
 .content-area{margin-left:0;padding-top:0}
 .topbar{top:0;height:67px;padding:11px 18px}
 .mobile-brand{display:flex}
 .mobile-tabs{
  background:#090b12ef;border-top:1px solid #ffffff30;
  padding-bottom:max(4px,env(safe-area-inset-bottom));backdrop-filter:blur(22px)
 }
 .mobile-tabs a.active{color:#ff7784}
 main{padding:22px 24px 108px}
 .site-footer{margin:0 24px 110px}
 .cinema-hero{height:480px;min-height:440px}
 .cinema-hero .hero-content{max-width:700px;padding:38px}
 .cinema-poster-rail .series-card{flex-basis:195px}
 .cinema-video-rail .video-card{flex-basis:265px}
}
@media(max-width:650px){
 .topbar{padding:9px 13px;height:60px;gap:8px}
 main{padding:14px 14px 105px}
 .site-footer{margin:0 14px 110px}
 .welcome-line{margin:10px 0 13px;font-size:12px}
 .welcome-line .urdu{font-size:12px}
 .cinema-hero{min-height:420px;height:460px;border-radius:10px}
 .cinema-hero:before{background-position:center}
 .cinema-hero:after{background:linear-gradient(0deg,#07080ff5 0%,#0b0a13bf 55%,#0b0a1355 100%)}
 .cinema-hero .hero-content{margin-top:auto;margin-bottom:0;padding:26px 20px 29px}
 .cinema-hero h1{font-size:clamp(34px,9vw,47px);letter-spacing:-.05em}
 .cinema-hero p{font-size:13px;margin-bottom:17px;max-width:410px}
 .cinema-hero .eyebrow{font-size:10px}
 .cinema-hero .hero-meta{gap:6px;margin-bottom:11px;font-size:10px}
 .cinema-hero .hero-pills{gap:8px}
 .cinema-hero .btn-primary,.cinema-hero .btn-secondary{min-height:43px;padding:0 13px;font-size:12px}
 .cinema-quick{gap:8px;padding:12px 1px 5px}
 .cinema-quick .quick-tile{min-height:44px;padding:7px 10px}
 .cinema-quick .quick-emoji{font-size:16px;width:24px;height:24px}
 .cinema-heading{margin:23px 0 6px}
 .cinema-heading h2,.section-head h2{font-size:21px}
 .cinema-heading p{font-size:11px;max-width:290px}
 .cinema-arrow{display:none}
 .cinema-rail-actions a{margin-left:0}
 .cinema-video-rail .video-card{flex-basis:224px}
 .cinema-poster-rail .series-card{flex-basis:155px}
 .cinema-channel-rail .channel-card{flex-basis:195px}
 .series-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .series-grid .series-poster{height:auto;min-height:195px;aspect-ratio:2/3}
 .cinema-poster-rail .series-poster{height:auto;min-height:207px}
 .series-desc{padding:11px}
 .series-desc h3{font-size:14px}
 .series-fav{top:auto;bottom:89px}
 .series-grid .series-fav{top:auto;bottom:89px;right:7px}
 .video-body h3{font-size:12px;min-height:34px}
 .channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cinema-video-rail,.cinema-poster-rail,.cinema-channel-rail{gap:10px}
 .show-cover .series-poster{min-height:150px;height:160px;aspect-ratio:auto}
 .page-title h1{font-size:31px}
}
@media(max-width:390px){
 .cinema-hero{min-height:440px}
 .cinema-hero .hero-pills{flex-wrap:wrap}
 .cinema-video-rail .video-card{flex-basis:205px}
 .cinema-poster-rail .series-card{flex-basis:145px}
 .series-grid .series-poster{min-height:185px}
}
@media(prefers-reduced-motion:reduce){
 .cinema-video-rail,.cinema-poster-rail,.cinema-channel-rail{scroll-behavior:auto}
 .series-card:hover,.video-card:hover{transform:none}
}
