:root{
  --bg:#fff;
  --text:#0f0f0f;
  --muted:#606060;
  --line:#e5e5e5;
  --soft:#f2f2f2;
  --soft-2:#f8f8f8;
  --brand:#182470;
  --red:#ed8315;
  --blue:#182470;
  --shadow:0 12px 32px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Roboto,Arial,Helvetica,sans-serif}
button,input{font:inherit}
button{border:0}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.page-shell{min-height:100vh}

.youtube-header{position:sticky;top:0;z-index:50;height:64px;padding:0 22px;display:grid;grid-template-columns:minmax(210px,1fr) minmax(320px,620px) minmax(210px,1fr);align-items:center;gap:22px;background:rgba(255,255,255,.96);border-bottom:1px solid #f0f0f0;backdrop-filter:blur(14px)}
.header-left,.header-right{display:flex;align-items:center;gap:14px;min-width:0}
.header-right{justify-content:flex-end}
.menu-button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;cursor:pointer;color:#1f1f1f}
.menu-button:hover{background:var(--soft)}
.menu-button svg{width:23px;height:23px}
.brand{display:flex;align-items:center;gap:7px;min-width:0;font-weight:800}
.brand-symbol{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;overflow:hidden;background:#fff}
.brand-symbol img{width:100%;height:100%;display:block;object-fit:contain}
.brand-text{font-size:20px;letter-spacing:-.04em;white-space:nowrap}
.brand-id{align-self:flex-start;font-size:9px;font-weight:500;color:#606060;margin-top:2px}
.header-search{min-width:0}
.search-box{height:42px;display:grid;grid-template-columns:minmax(0,1fr) 64px;border:1px solid #c6c6c6;border-radius:22px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.search-box:focus-within{border-color:#1c62b9;box-shadow:inset 1px 0 #1c62b9}
.search-box input{min-width:0;border:0;outline:0;padding:0 16px;font-size:16px;color:#111;background:#fff}
.search-icon{display:grid;place-items:center;background:#f8f8f8;border-left:1px solid #d3d3d3}
.search-icon svg{width:23px;height:23px}
.live-status,.admin-link{height:40px;display:inline-flex;align-items:center;gap:8px;border-radius:20px;padding:0 14px;font-size:13px;font-weight:700;border:1px solid #dedede;background:#fff;white-space:nowrap}
.live-status i{width:8px;height:8px;border-radius:50%;background:#ed8315;box-shadow:0 0 0 6px rgba(237,131,21,.14)}
.admin-link{background:var(--brand);color:#fff;border-color:var(--brand)}
.admin-link svg{width:17px;height:17px}

.watch-layout{width:min(1540px,100%);margin:0 auto;padding:24px 26px 44px;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:24px;align-items:start}
.watch-main{min-width:0}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:13px;background:#000;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.player-frame video{width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:#000}
.start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.48),rgba(0,0,0,.12));cursor:pointer;transition:.2s}
.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.start-play{width:76px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(237,131,21,.96);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.start-play svg{width:30px;height:30px;margin-left:3px}
.start-overlay strong{font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.start-overlay small{font-size:13px;color:#f2f2f2;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.watch-info{padding-top:14px}
.watch-info h1{margin:0;font-size:21px;line-height:1.35;font-weight:700;letter-spacing:-.015em}
.watch-meta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:13px}
.channel-block{display:flex;align-items:center;gap:11px;min-width:0}
.channel-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid #ddd;flex:0 0 auto;padding:4px}
.channel-avatar img{width:100%;height:100%;object-fit:contain}
.channel-copy{min-width:0}
.channel-copy strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-copy small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.quick-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.stat-chip{height:38px;padding:0 13px;border-radius:19px;display:inline-flex;align-items:center;gap:6px;background:var(--soft);font-size:12px;white-space:nowrap}
.stat-chip svg{width:17px;height:17px}
.stat-chip b{font-size:13px}
.stat-chip span{color:#3f3f3f}
.description-box{margin-top:14px;padding:13px 14px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.45}
.description-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.description-top strong{font-size:13px}
.description-top span{font-size:12px;color:var(--muted);white-space:nowrap}
.description-box p{margin:8px 0 0;color:#303030}

.recommendation-panel{position:sticky;top:80px;min-width:0;max-height:calc(100vh - 94px);display:flex;flex-direction:column;overflow:hidden}
.filter-row{display:flex;align-items:center;gap:8px;overflow:auto;padding-bottom:12px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{height:34px;padding:0 13px;border-radius:8px;background:var(--soft);color:#0f0f0f;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.filter-chip.active{background:#0f0f0f;color:#fff}
.recommendation-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 11px;border-bottom:1px solid #eee}
.recommendation-head h2{margin:0;font-size:17px}
.recommendation-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.playlist{position:relative;min-height:0;overflow:auto;padding:12px 4px 4px 0;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#b7b7b7 transparent}
.playlist::-webkit-scrollbar{width:7px}
.playlist::-webkit-scrollbar-thumb{background:#b7b7b7;border-radius:999px}
.playlist.no-result:after{content:"Video tidak ditemukan.";display:block;padding:24px;text-align:center;color:var(--muted);font-size:13px}
.video-item{width:100%;display:grid;grid-template-columns:168px minmax(0,1fr);gap:10px;padding:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:10px}
.video-item[hidden]{display:none}
.video-thumb{position:relative;width:168px;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:linear-gradient(135deg,#182470,#2a3a91 52%,#ed8315);color:#fff;display:grid;place-items:center}
.video-thumb:before{content:"UPG TV";position:absolute;left:10px;top:9px;font-size:10px;font-weight:800;letter-spacing:.08em;opacity:.88}
.thumb-number{font-size:26px;font-weight:900;letter-spacing:-.04em;opacity:.9}
.thumb-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(0,0,0,.22);transition:.18s}
.thumb-play svg{width:34px;height:34px}
.thumb-duration{position:absolute;right:5px;bottom:5px;padding:3px 5px;border-radius:4px;background:rgba(0,0,0,.78);font-size:10px;font-weight:700}
.video-item:hover .thumb-play,.video-item.active .thumb-play{opacity:1}
.video-item.active .video-thumb{outline:3px solid var(--red);outline-offset:1px}
.video-item-info{min-width:0;padding:3px 0;display:flex;flex-direction:column}
.video-item-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.35;font-weight:700}
.video-item-channel,.video-item-meta{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.video-item-channel{margin-top:6px}
.video-item-meta{margin-top:2px}
.video-item.active .video-item-title{color:var(--red)}
.state-box{padding:26px 18px;border:1px dashed #d7d7d7;border-radius:12px;background:#fafafa;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
.state-box strong{display:block;color:#111;margin-bottom:4px}

@media(max-width:1180px){
  .youtube-header{grid-template-columns:minmax(190px,1fr) minmax(280px,500px) minmax(170px,1fr)}
  .watch-layout{grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding-inline:20px}
  .video-item{grid-template-columns:148px minmax(0,1fr)}
  .video-thumb{width:148px}
}

@media(max-width:960px){
  .youtube-header{grid-template-columns:auto minmax(0,1fr) auto;padding:0 14px;gap:12px}
  .brand-id,.live-status span{display:none}
  .live-status{width:40px;padding:0;justify-content:center}
  .watch-layout{grid-template-columns:1fr;padding:16px 16px 34px}
  .recommendation-panel{position:static;max-height:none;margin-top:4px}
  .playlist{max-height:520px}
  .video-item{grid-template-columns:190px minmax(0,1fr)}
  .video-thumb{width:190px}
}

@media(max-width:680px){
  .youtube-header{height:auto;min-height:58px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"left right" "search search";padding:9px 12px 11px}
  .header-left{grid-area:left;gap:7px}
  .header-search{grid-area:search}
  .header-right{grid-area:right;gap:7px}
  .menu-button{display:none}
  .brand-text{font-size:18px}
  .search-box{height:38px;grid-template-columns:minmax(0,1fr) 48px}
  .search-box input{font-size:14px;padding-left:13px}
  .live-status{display:none}
  .admin-link{height:36px;padding:0 12px}
  .admin-link span{display:none}
  .watch-layout{padding:10px 0 28px;gap:18px}
  .player-frame{border-radius:0}
  .watch-info{padding:12px 14px 0}
  .watch-info h1{font-size:18px}
  .watch-meta-row{align-items:flex-start;flex-direction:column;margin-top:11px}
  .quick-actions{justify-content:flex-start;width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:3px;scrollbar-width:none}
  .quick-actions::-webkit-scrollbar{display:none}
  .description-box{margin-top:12px}
  .recommendation-panel{padding:0 14px}
  .playlist{max-height:none;padding-right:0}
  .video-item{grid-template-columns:150px minmax(0,1fr)}
  .video-thumb{width:150px}
  .video-item-title{font-size:13px}
  .video-item-channel,.video-item-meta{font-size:11px}
}

@media(max-width:430px){
  .brand-symbol{width:30px;height:21px}
  .brand-text{font-size:17px}
  .video-item{grid-template-columns:132px minmax(0,1fr);gap:9px}
  .video-thumb{width:132px}
  .thumb-number{font-size:22px}
  .stat-chip{height:36px;padding:0 11px}
}


/* PATCH V7.1 - ganti logo brand dan optimasi smartphone full-screen */
.brand-symbol{width:40px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#fff;border:1px solid #ececec;padding:3px 6px;overflow:hidden}
.brand-symbol img{width:100%;height:100%;object-fit:contain;display:block}

@media(max-width:680px){
  .watch-main{display:flex;flex-direction:column;min-height:calc(100vh - 58px)}
  .player-frame{height:calc(100vh - 58px);min-height:calc(100vh - 58px);aspect-ratio:auto;border-radius:0}
  .player-frame video{height:100%;object-fit:contain;object-position:center center}
  .watch-info{padding:14px 14px 0;background:#fff}
}

@media(max-width:430px){
  .player-frame{height:calc(100vh - 56px);min-height:calc(100vh - 56px)}
  .brand-symbol{width:36px;height:26px;padding:3px 5px}
}

/* UPG TV brand refinements */
.brand-text{color:#182470;font-weight:900;letter-spacing:-.045em}
.admin-link{background:#182470;border-color:#182470}
.admin-link:hover{background:#111b58;border-color:#111b58}
.filter-chip.active{background:#182470;color:#fff}
.search-box:focus-within{border-color:#ed8315;box-shadow:inset 1px 0 #ed8315}
.start-play{box-shadow:0 10px 30px rgba(237,131,21,.3)}
.description-box{border-left:4px solid #ed8315}
.video-item.active .video-item-title{color:#ed8315}
@media(max-width:680px){.brand-symbol{width:36px;height:36px}}
/* Final logo sizing for the UPG shield */
.brand-symbol{width:46px;height:42px;padding:2px 4px;border-radius:10px}
@media(max-width:680px){.brand-symbol{width:40px;height:36px;padding:2px 3px}}
@media(max-width:430px){.brand-symbol{width:36px;height:32px;padding:2px 3px}}

/* UPG TV v8.1 - Fullscreen screen menu */
.fullscreen-link{
  height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:20px;padding:0 14px;border:1px solid #dedede;background:#fff;color:#182470;
  font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.18s ease;
}
.fullscreen-link:hover{background:#f5f6fb;border-color:#c9cdea}
.fullscreen-link svg{width:17px;height:17px;flex:0 0 auto}
.fullscreen-link .fullscreen-exit-icon{display:none}
.fullscreen-link.is-fullscreen{background:#ed8315;color:#fff;border-color:#ed8315}
.fullscreen-link.is-fullscreen .fullscreen-enter-icon{display:none}
.fullscreen-link.is-fullscreen .fullscreen-exit-icon{display:block}

/* Saat browser benar-benar fullscreen, aplikasi memakai seluruh bidang layar. */
:fullscreen .page-shell,
:-webkit-full-screen .page-shell{min-height:100vh;background:#fff}
:fullscreen .youtube-header,
:-webkit-full-screen .youtube-header{top:0}

@media(max-width:1180px){
  .fullscreen-label{display:none}
  .fullscreen-link{width:40px;padding:0}
}

@media(max-width:680px){
  .fullscreen-link{height:36px;width:36px;padding:0;border-radius:18px}
}

/* UPG TV v8.2 - Android smartphone video fills player area so black bars are removed */
@media(max-width:680px){
  .player-frame{
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
  }
  .player-frame video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    background:transparent;
  }
}


/* UPG TV v8.3 - YouTube-like smartphone watch layout */
.mobile-search-toggle{display:none}

@media(max-width:680px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;background:#fff}
  .page-shell{width:100%;min-height:100vh;background:#fff}

  /* Compact mobile top bar */
  .youtube-header{
    position:sticky;top:0;z-index:80;
    width:100%;height:54px;min-height:54px;
    padding:6px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"left right";
    align-items:center;gap:8px;
    background:#0f0f0f;border-bottom:0;backdrop-filter:none;
  }
  .header-left{grid-area:left;gap:8px;min-width:0}
  .header-right{grid-area:right;gap:2px}
  .header-search{display:none;grid-area:search;min-width:0;padding-top:4px}
  body.mobile-search-open .youtube-header{
    height:auto;min-height:102px;
    grid-template-areas:"left right" "search search";
    grid-template-rows:42px 42px;
    padding-bottom:8px;
  }
  body.mobile-search-open .header-search{display:block}
  .search-box{
    height:38px;grid-template-columns:minmax(0,1fr) 44px;
    border-color:#414141;background:#202020;box-shadow:none
  }
  .search-box input{color:#fff;background:#202020;font-size:14px}
  .search-box input::placeholder{color:#b7b7b7}
  .search-icon{background:#2b2b2b;border-left-color:#414141;color:#fff}
  .brand{gap:7px;color:#fff}
  .brand-symbol{width:34px;height:34px;padding:2px;border:0;border-radius:7px;background:#fff}
  .brand-text{font-size:18px;color:#fff;font-weight:900;letter-spacing:-.035em}
  .brand-id,.menu-button,.live-status{display:none}
  .mobile-search-toggle,
  .fullscreen-link,
  .admin-link{
    width:36px;height:36px;min-width:36px;padding:0;
    display:inline-grid;place-items:center;
    border:0;border-radius:50%;background:transparent;color:#fff;
  }
  .mobile-search-toggle{cursor:pointer}
  .mobile-search-toggle svg{width:21px;height:21px}
  .fullscreen-link:hover,.mobile-search-toggle:hover,.admin-link:hover{background:#272727;border-color:transparent}
  .fullscreen-link.is-fullscreen{background:#ed8315;color:#fff}
  .admin-link svg{width:21px;height:21px}

  /* Video must be 16:9, full width, not full-viewport height */
  .watch-layout{
    width:100%;max-width:none;margin:0;padding:0;
    display:block;gap:0;background:#fff
  }
  .watch-main{display:block;min-height:0;width:100%}
  .player-frame{
    width:100%;height:auto!important;min-height:0!important;
    aspect-ratio:16/9!important;margin:0;
    border-radius:0;box-shadow:none;background:#000;overflow:hidden
  }
  .player-frame video{
    width:100%;height:100%!important;min-height:0;
    object-fit:cover!important;object-position:center center;
    background:#000
  }
  .start-overlay{border-radius:0}
  .start-play{width:62px;height:44px;border-radius:11px}
  .start-overlay strong{font-size:16px}
  .start-overlay small{font-size:12px}

  /* Rounded information card directly under video */
  .watch-info{
    position:relative;z-index:2;
    margin-top:-1px;padding:14px 14px 12px;
    background:#fff;border-radius:18px 18px 0 0
  }
  .watch-info h1{
    margin:0;font-size:18px;line-height:1.28;font-weight:800;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
  }
  .watch-meta-row{
    margin-top:10px;display:flex;flex-direction:column;align-items:stretch;gap:11px
  }
  .channel-block{gap:9px;min-width:0}
  .channel-avatar{width:36px;height:36px;padding:3px}
  .channel-copy strong{font-size:13px}
  .channel-copy small{font-size:11px;margin-top:2px}

  /* YouTube-mobile inspired compact action row */
  .quick-actions{
    width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-start;
    gap:8px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none
  }
  .quick-actions::-webkit-scrollbar{display:none}
  .stat-chip{
    height:34px;flex:0 0 auto;padding:0 11px;border-radius:17px;
    background:#f2f2f2;font-size:11px;gap:5px
  }
  .stat-chip svg{width:16px;height:16px}
  .stat-chip b{font-size:12px}
  .stat-chip span{font-size:11px}

  .description-box{
    margin-top:11px;padding:11px 12px;border:0;border-radius:11px;
    background:#f2f2f2;font-size:12px;line-height:1.38
  }
  .description-top{gap:8px;align-items:center}
  .description-top strong{font-size:11px}
  .description-top span{font-size:10px}
  .description-box p{
    margin:6px 0 0;font-size:12px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
  }

  /* Mobile recommendation feed: large video cards */
  .recommendation-panel{
    position:static;max-height:none;margin:0;padding:0 0 24px;
    background:#fff;border-top:8px solid #f5f5f5;overflow:visible
  }
  .filter-row{display:none}
  .recommendation-head{padding:12px 14px 9px;border-bottom:0;align-items:center}
  .recommendation-head h2{font-size:15px;font-weight:800}
  .recommendation-head p{display:none}
  .playlist{max-height:none;overflow:visible;padding:0;gap:4px}
  .video-item{
    width:100%;display:flex;flex-direction:column;gap:0;
    padding:0 0 8px;border-radius:0;background:#fff
  }
  .video-thumb{
    width:100%!important;aspect-ratio:16/9;border-radius:0;
    outline:0!important
  }
  .video-thumb:before{left:12px;top:9px;font-size:9px}
  .thumb-number{font-size:30px}
  .thumb-duration{right:8px;bottom:7px;font-size:10px}
  .thumb-play{opacity:.55}
  .video-item-info{padding:9px 14px 8px}
  .video-item-title{font-size:14px;line-height:1.35;-webkit-line-clamp:2;color:#111}
  .video-item-channel,.video-item-meta{font-size:11px;line-height:1.35}
  .video-item-channel{margin-top:4px}
  .video-item.active .video-item-title{color:#111}
  .video-item.active .video-thumb:after{
    content:"Sedang diputar";position:absolute;left:10px;bottom:8px;
    padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.78);
    color:#fff;font-size:9px;font-weight:700;letter-spacing:.02em
  }
  .state-box{margin:0 14px}
}

@media(max-width:430px){
  .youtube-header{height:52px;min-height:52px;padding:5px 8px}
  body.mobile-search-open .youtube-header{min-height:99px}
  .brand-symbol{width:32px;height:32px}
  .brand-text{font-size:17px}
  .mobile-search-toggle,.fullscreen-link,.admin-link{width:34px;height:34px;min-width:34px}
  .watch-info{padding-left:12px;padding-right:12px}
  .video-item-info{padding-left:12px;padding-right:12px}
}