/* বেসিক রিসেট ও কমন স্টাইল */
body { 
    background: #000; 
    color: #fff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
}
.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px; 
    text-align: center; 
}
header h1 { 
    color: #ff0000; 
    font-size: 24px; 
    margin-bottom: 30px; 
    letter-spacing: 1px; 
}

/* ভিডিও প্লেয়ার */
.video-wrapper { 
    position: relative; 
    background: #111; 
    border: 1px solid #333; 
    line-height: 0; 
    overflow: hidden; 
}
.main-img { 
    width: 100%; 
    height: auto; 
    cursor: pointer; 
    display: block; 
}

.online-counter {
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: rgba(0, 0, 0, 0.8);
    padding: 6px 15px; 
    border-radius: 4px; 
    display: flex; 
    align-items: center;
    z-index: 10; 
    font-size: 14px; 
    border: 1px solid #ff0000; 
    color: #fff;
}

.play-button-center {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.9); 
    width: 70px; 
    height: 70px;
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 25px; 
    border: 3px solid #fff; 
    color: #fff;
}

/* কন্ট্রোল বার */
.video-controls { 
    background: #1a1a1a; 
    padding: 12px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px solid #333; 
}
.left-controls, .right-controls { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}
.control-icon, .control-link { 
    cursor: pointer; 
    font-size: 18px; 
    color: #fff; 
    text-decoration: none; 
}
.live-status { 
    color: #ff0000; 
    font-weight: bold; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
}
.live-dot { 
    width: 8px; 
    height: 8px; 
    background: #ff0000; 
    border-radius: 50%; 
    margin-right: 6px; 
    animation: blink 1s infinite; 
}
@keyframes blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.3; } 
}

/* সেটিংস মেনু */
.settings-container { 
    position: relative; 
}
.settings-menu {
    position: absolute; 
    bottom: 45px; 
    right: 0; 
    background: #222;
    padding: 15px; 
    border-radius: 4px; 
    display: none; 
    width: 130px;
    border: 1px solid #444; 
    text-align: left; 
    z-index: 100;
}
.settings-menu p { 
    margin: 0 0 10px; 
    font-weight: bold; 
    border-bottom: 1px solid #444; 
    padding-bottom: 5px; 
}
.settings-menu label { 
    display: block; 
    margin: 8px 0; 
    font-size: 13px; 
    cursor: pointer; 
}

/* 🌟 নতুন স্ক্রিনশট অনুযায়ী ১00% ব্লক বাটন স্টাইল */
.cta-buttons { 
    margin: 30px auto; 
    display: flex;
    flex-direction: column; /* বাটনগুলোকে একটার নিচে আরেকটা বসানোর জন্য */
    gap: 15px;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.btn { 
    text-decoration: none; 
    padding: 16px 20px; 
    border-radius: 4px; 
    font-weight: bold; 
    color: #fff; 
    display: block; 
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    transition: background 0.2s, opacity 0.2s;
}

/* GO LIVE (লাল বাটন) */
.red { 
    background: #ff0000; 
}
.red:hover {
    background: #cc0000;
}

/* WATCH LIVE NOW (নতুন স্ক্রিনশট অনুযায়ী সবুজ বাটন) */
.green { 
    background: #28a745; 
}
.green:hover {
    background: #1e7e34;
}

/* অ্যানিমেশন */
.pulse-hover:hover { animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } }

/* ফিচার সেকশন */
.streaming-features { padding: 60px 0; border-top: 1px solid #222; }
.streaming-features h2 { font-size: 22px; margin-bottom: 50px; letter-spacing: 2px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.f-icon { font-size: 45px; margin-bottom: 20px; color: #fff; }
.red-text { color: #ff0000; font-size: 15px; margin-bottom: 12px; }
.feature-item p { color: #999; font-size: 13px; line-height: 1.6; padding: 0 10px; }

/* ফুটার */
.site-footer { margin-top: 60px; padding-top: 30px; border-top: 1px solid #222; }
.footer-links a { color: #fff; text-decoration: none; font-size: 14px; margin: 0 10px; opacity: 0.7; }
.footer-links a:hover { opacity: 1; color: #ff0000; }
.site-footer p { color: #555; font-size: 12px; margin-top: 15px; }