/* ---------- MRFJOY PAKAM  ---------- */
    
    :root{
      --bg:#0a0a0a;
      --fg:#ffffff;
      --pill-bg:#ffffff;
      --pill-fg:#0f172a;
      --pill-border:rgba(255,255,255,0.10);
      --pill-shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.35);
      --accent:#ff1111;
      --accent2:#c94904;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:
        radial-gradient(900px 450px at 20% 10%, rgba(255,17,17,.20), transparent 60%),
        radial-gradient(900px 450px at 90% 30%, rgba(201,73,4,.22), transparent 60%),
        var(--bg);
      color:var(--fg);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
    }

    /* Centered search area above the H3 */
    .search-wrap{
      position:sticky; top:0;
      display:flex; align-items:center; justify-content:center;
      padding: 22px 0px 10px;
      background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
      backdrop-filter: blur(6px);
      z-index:1000;
    }
    .search-form{ display:flex; align-items:center; gap:10px; }
    .search-input{
      width: min(60vw, 320px);
      padding: 12px 16px;
      border-radius: 9999px;
      border: 1px solid rgba(255,17,17,.85);
      background: rgba(255,255,255,.10);
      color: #fff;
      font-size: 12px;
      line-height: 1.2;
      outline: none;
      box-shadow: var(--pill-shadow);
    }
    .search-input::placeholder{color:rgba(255,255,255,.55)}
    .search-btn{
      padding: 12px 16px;
      border-radius: 9999px;
      border: 1px solid var(--pill-border);
      background: linear-gradient(135deg, var(--accent2), var(--accent));
      color: #fff;
      font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      box-shadow: var(--pill-shadow);
      transition: transform .06s ease, filter .2s ease;
      white-space: nowrap;
    }
    .search-btn:hover{ filter: brightness(1.08); }
    .search-btn:active{ transform:scale(.98); }

    .page-wrap{ padding:10px 12px 92px; } /* extra bottom room for CTA bar */
    h3{ margin:14px 0; }
    .center { text-align:center; }

    /* ---------- Modern "TikTok-style" player shell ---------- */
    .player-stage{
      width:100%;
      max-width: 900px;
      margin: 10px auto 14px;
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background:
        linear-gradient(#000,#000) padding-box,
        linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
      border: 2px solid transparent;
      box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 18px 40px rgba(255,17,17,.18);
      isolation:isolate;
    }

    /* Make it feel like TikTok on mobile: tall, full-ish screen */
    .player-stage::before{
      content:"";
      position:absolute; inset:-60px;
      background: radial-gradient(circle at 30% 20%, rgba(255,17,17,.25), transparent 55%),
                  radial-gradient(circle at 75% 65%, rgba(201,73,4,.25), transparent 55%);
      z-index:0;
      pointer-events:none;
      filter: blur(2px);
      opacity:.9;
    }

    .player-inner{ position:relative; z-index:1; }

    video#videoPlayer{
      width:100%;
      height:auto;
      display:block;
      background:#000;
      object-fit: cover;
      /* Desktop aspect feels cinematic */
      aspect-ratio: 1080 / 675;
    }

   @media (max-width:520px)
   {
      video#videoPlayer{
      width:100%;
      height:auto;
      display:block;
      background:#000;
      object-fit: cover;
      /* Desktop aspect feels cinematic */
      aspect-ratio: 1080 / 675;}
    }

     @media (max-width:520px)
   {
      .video-modal-box{
        margin-top: 20px;
      }
    }

       @media (max-width:520px)
   {
      .cta-bar{
        margin-bottom: 20%;
      }
    }

    /* overlays */
    .overlay{
      position:absolute; inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: linear-gradient(to top, rgba(0,0,0,.60), rgba(0,0,0,.15), rgba(0,0,0,.45));
      transition: opacity .25s ease;
      cursor:pointer;
    }
    .overlay.hidden{ opacity:0; pointer-events:none; }

    .play-pill{
      display:flex; align-items:center; gap:12px;
      padding: 14px 18px;
      border-radius: 999px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 50px rgba(0,0,0,.55);
      backdrop-filter: blur(8px);
      user-select:none;
    }
    .play-ico{
      width:54px; height:54px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display:grid; place-items:center;
      box-shadow: 0 18px 40px rgba(255,17,17,.25);
      animation: pulse 1.6s infinite;
    }
    .play-ico i{ font-size: 20px; color:#fff; margin-left:2px; }
    @keyframes pulse{
      0%{ box-shadow:0 0 0 0 rgba(255,17,17,.55), 0 18px 40px rgba(255,17,17,.25) }
      70%{ box-shadow:0 0 0 26px rgba(255,17,17,0), 0 18px 40px rgba(255,17,17,.25) }
      100%{ box-shadow:0 0 0 0 rgba(255,17,17,0), 0 18px 40px rgba(255,17,17,.25) }
    }
    .play-copy{
      text-align:left;
      line-height:1.15;
    }
    .play-copy b{ display:block; font-size: 14px; letter-spacing:.02em; }
    .play-copy span{ display:block; font-size: 12px; color: rgba(255,255,255,.70); }

    .corner-badges{
      position:absolute;
      top:10px; left:10px;
      display:flex; gap:8px; flex-wrap:wrap;
      pointer-events:none;
    }
    .badge{
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
      color: rgba(255,255,255,.92);
    }

    .side-actions{
      position:absolute;
      right:10px;
      bottom:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      pointer-events:none;
    }
    .action{
      width:44px; height:44px;
      border-radius: 14px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      display:grid; place-items:center;
      backdrop-filter: blur(8px);
      color:#fff;
      opacity:.92;
    }
    .action i{ font-size: 16px; }

    /* CTA bar (CTR-focused) */
    .cta-bar{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      padding: 12px 12px 14px;
      background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.45), rgba(0,0,0,0));
      backdrop-filter: blur(8px);
      z-index: 9998;
    }
    .cta-wrap{
      max-width: 900px;
      margin: 0 auto;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
    }
    .btn{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      text-decoration:none;
      color:#fff;
      padding: 13px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      font-weight: 800;
      letter-spacing:.02em;
      transition: transform .06s ease, filter .2s ease;
      white-space: nowrap;
    }
    .btn:hover{ filter: brightness(1.08); }
    .btn:active{ transform: scale(.98); }
    .btn.primary{
      background: linear-gradient(135deg, var(--accent2), var(--accent));
      border-color: rgba(255,17,17,.35);
      box-shadow: 0 20px 55px rgba(255,17,17,.18);
    }
    .btn.small{
      flex:0.9;
    }
    @media (max-width:520px){
      .cta-wrap{ flex-direction:column; }
      .btn, .btn.small{ width:100%; flex:unset; }
    }

    /* Modal (kept + upgraded) */
    .video-modal-box { background: #0000; color: #fff; text-align: center; padding: 10px; }
    .video-modal-box .modal-overlay {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.82); justify-content: center; align-items: center; z-index: 9999;
      padding: 18px;
    }
    .video-modal-box .modal-content {
      width: min(520px, 92vw);
      background: linear-gradient(135deg,#111,#000);
      color:#fff;
      border-radius: 18px;
      padding: 26px 22px;
      box-shadow: 0 40px 90px rgba(0,0,0,.65);
      border: 1px solid rgba(255,255,255,.10);
      position: relative;
      text-align: center;
      animation: pop .35s ease;
    }
    @keyframes pop{
      from{transform:translateY(14px) scale(.96);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }
    .video-modal-box .close-modal{
      position:absolute; top:10px; right:12px;
      cursor:pointer; color: rgba(255,255,255,.65);
      font-size: 22px;
      line-height:1;
    }
    .video-modal-box .close-modal:hover{ color:#fff; }
    .modal-content h2{ margin: 6px 0 8px; letter-spacing:.02em; }
    .modal-content p{ margin: 0 0 14px; color: rgba(255,255,255,.75); }
    .modal-content .modal-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 13px 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent2), var(--accent));
      color:#fff;
      text-decoration:none;
      font-weight: 900;
      box-shadow: 0 20px 55px rgba(255,17,17,.18);
      border: 1px solid rgba(255,17,17,.35);
    }

    /* Loading spinner (reused) */
    .loading {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 54px; height: 54px; border: 3px solid var(--accent2); border-radius: 50%;
      border-top-color: transparent; animation: spin 1s linear infinite; display: none;
      z-index: 4;
    }
    @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

    /* Reduce motion accessibility */
    @media (prefers-reduced-motion: reduce){
      .play-ico{ animation:none; }
      .image-zoom, .btn, .search-btn{ transition:none; }
    }