/* ===== Global ===== */
* { box-sizing:border-box; }
body {
    margin:0;
    background:#000;
    color:#fff;
    font-family:"Open Sans", Arial, sans-serif;
}
img { max-width:100%; display:block; }

/* ===== Header ===== */
.header {
    background:#0d0d0d;
    padding:10px 20px;
}
.logo {
    display:flex;
    align-items:center;
}
.logo img {
    height:46px;
    margin-right:10px;
}
.logo-text {
    font-size:1.5em;
    font-weight:700;
}

/* ===== Layout ===== */
.container {
    max-width:1250px;
    margin:30px auto;
    padding:0 15px;
}
.title {
    text-align:center;
    margin-bottom:20px;
    font-size:1.8em;
}

/* ===== PLAYER ===== */
.player-shell {
    position:relative;
    width:100%;
    max-width:1250px;
    aspect-ratio:1250/703;   /* Rasio seperti yang kamu minta */
    background:#000;
    border-radius:12px;
    overflow:hidden;
    border:2px solid #222;
    box-shadow:0 12px 28px rgba(0,0,0,0.7);
    margin:0 auto;
}

/* Thumbnail layer */
.thumb-layer {
    position:absolute;
    inset:0;
}
.thumb-image {
    width:100%;
    height:100%;
    background:
      linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.7)),
      url("https://img.freepik.com/free-photo/rugby-sport-environment-filed_23-2151891713.jpg")
      center/cover no-repeat;
}

/* Big play button */
.big-play {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:110px;
    height:110px;
    border-radius:50%;
    border:none;
    background:#ffffffee;
    color:#000;
    font-size:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 0 20px rgba(255,255,255,0.9);
    transition:.2s;
}
.big-play:hover {
    transform:translate(-50%, -50%) scale(1.08);
}

/* Loading layer */
.loading-layer {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:5;
}
.spinner {
    width:60px;
    height:60px;
    border-radius:50%;
    border:6px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    animation:spin 1s linear infinite;
}
.loading-layer p {
    margin-top:10px;
    font-size:1em;
    opacity:.85;
}
@keyframes spin {
    to { transform:rotate(360deg); }
}

/* Popup register */
.popup-layer {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10;
}
.popup-box {
    background:#141414;
    padding:25px 30px 30px;
    max-width:380px;
    width:90%;
    border-radius:10px;
    text-align:center;
    box-shadow:0 0 25px rgba(0,0,0,0.8);
}
.popup-box h2 {
    margin:0 0 10px;
}
.popup-box p {
    font-size:.95em;
    opacity:.9;
    margin:0 0 20px;
}
.popup-btn {
    display:inline-block;
    padding:12px 30px;
    background:#e50914;
    border-radius:6px;
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    font-size:.95em;
    letter-spacing:.5px;
}

/* Control bar */
.control-bar {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    background:linear-gradient(to top, #dcdcdc, #f5f5f5);
    display:flex;
    align-items:center;
    padding:0 12px;
    gap:10px;
}

/* Buttons */
.ctrl-btn {
    border:none;
    background:transparent;
    font-size:22px;
    cursor:pointer;
    margin-right:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
}
.ctrl-btn:hover {
    transform:scale(1.1);
}

/* Time + progress */
.time-area {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.time-text {
    font-family:"Droid Sans", monospace;
    font-size:12px;
    color:#444;
    margin-bottom:3px;
}

/* Progress bar */
.progress-wrap {
    position:relative;
    height:8px;
    background:#111010;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #000;
}

/* Buffer line (striped) */
.progress-buffer {
    position:absolute;
    inset:0;
    background-color:#1d446d;
    background-image:linear-gradient(
        -45deg,
        rgba(255,255,255,0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size:6px 6px;
    animation:bufferMove 1s linear infinite;
}
@keyframes bufferMove {
    from { background-position:0 0; }
    to   { background-position:20px 0; }
}

/* Progress fill (blue) */
.progress-fill {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0%;
    background:linear-gradient(to bottom, #0a7aee, #054080);
}

/* LIVE badge */
.live-badge {
    display:flex;
    align-items:center;
    font-weight:700;
    font-size:13px;
    color:#da0101;
    margin-left:8px;
}
.live-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#da0101;
    margin-right:5px;
    animation:blink 1s infinite;
}
@keyframes blink {
    0%, 100% { opacity:1; }
    50% { opacity:0.2; }
}

/* Responsive tweaks */
@media (max-width:768px) {
    .player-shell {
        max-width:100%;
    }
    .fake-video .thumb {
        height:100%;
    }
}