* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body {

    font-family:
    "Inter",
    Arial,
    sans-serif;


    color:white;


    min-height:100vh;


    overflow-x:hidden;


    background:

    linear-gradient(
        135deg,
        #020617,
        #001b3a,
        #000814
    );

}



/* =========================
BACKGROUND ANIMATION
========================= */


.background-animation {


    position:fixed;


    inset:0;


    z-index:-1;



    background:


    radial-gradient(
        circle at 20% 20%,
        rgba(0,170,255,.35),
        transparent 35%
    ),



    radial-gradient(
        circle at 80% 80%,
        rgba(0,80,255,.35),
        transparent 40%
    );



    animation:

    moveBackground 15s infinite alternate ease-in-out;


}




@keyframes moveBackground {


    from {

        transform:
        scale(1);

    }



    to {

        transform:
        scale(1.2);

    }


}







/* =========================
HEADER
========================= */



.glass-header {


    width:90%;


    max-width:1100px;


    margin:15px auto;



    padding:

    10px 22px;



    display:flex;


    align-items:center;


    justify-content:space-between;



    background:

    rgba(255,255,255,.08);



    border:

    1px solid rgba(255,255,255,.18);



    backdrop-filter:

    blur(18px);



    border-radius:20px;



    box-shadow:

    0 15px 40px rgba(0,0,0,.35);



    position:sticky;


    top:10px;


    z-index:10;

}




.logo-area {


    display:flex;


    align-items:center;

}



.brand-logo {


    width:120px;


    transition:.4s;


    filter:

    drop-shadow(
    0 0 15px rgba(0,170,255,.5)
    );

}



.brand-logo:hover {


    transform:

    scale(1.08)
    rotate(-2deg);

}





/* =========================
NAVIGATION
========================= */



.nav-tabs {


    display:flex;


    gap:10px;

}




.nav-tabs a {


    text-decoration:none;


    color:white;


    padding:

    8px 16px;



    font-size:14px;



    border-radius:30px;



    background:

    rgba(255,255,255,.06);



    border:

    1px solid rgba(255,255,255,.12);



    transition:.3s;

}




.nav-tabs a:hover,


.nav-tabs .active {


    background:

    rgba(0,170,255,.35);



    box-shadow:

    0 0 25px rgba(0,170,255,.45);



    transform:

    translateY(-2px);

}








/* =========================
PAGES
========================= */



.page {


    display:none;


    animation:

    fadePage .45s ease;

}




.page.active {


    display:block;

}





@keyframes fadePage {


    from {

        opacity:0;

        transform:
        translateY(15px);

    }



    to {

        opacity:1;

    }


}








.container {


    width:90%;


    max-width:1100px;


    margin:auto;

}









/* =========================
GLASS BOX
========================= */



.glass-box {


    margin-top:40px;


    padding:35px;



    text-align:center;



    background:

    rgba(255,255,255,.08);



    border:

    1px solid rgba(255,255,255,.16);



    backdrop-filter:

    blur(18px);



    border-radius:25px;



    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}








/* =========================
WEATHER HOME
========================= */



.weather-box h1 {


    font-size:32px;


    margin-bottom:15px;

}




.weather-icon {


    font-size:80px;


    margin:20px;


    animation:

    float 3s infinite ease-in-out;

}




@keyframes float {


    50% {

        transform:

        translateY(-10px);

    }

}




.weather-box h2 {


    font-size:28px;

}



.weather-box p {


    color:#cbd5e1;


    margin-top:10px;

}




.divider {


    height:1px;


    background:

    rgba(255,255,255,.2);


    margin:30px 0;

}




.clock {


    font-size:42px;


    font-weight:800;


    margin:15px;


}







/* YOUTUBE BUTTON */


.youtube-button {


    display:inline-block;


    margin-top:25px;


    padding:

    12px 25px;



    border-radius:30px;



    background:

    linear-gradient(
        135deg,
        #ff0033,
        #ff0055
    );



    color:white;


    text-decoration:none;


    font-weight:bold;



    transition:.3s;


}




.youtube-button:hover {


    transform:

    translateY(-5px);



    box-shadow:

    0 10px 30px rgba(255,0,50,.4);

}








/* =========================
LIVE PLAYER
========================= */



.player-section {


    display:flex;


    justify-content:center;


    margin-top:35px;

}




.glass-player {


    width:100%;


    max-width:850px;


    aspect-ratio:16/9;


    background:black;


    border-radius:25px;


    overflow:hidden;


    position:relative;



    border:

    1px solid rgba(255,255,255,.18);



    box-shadow:

    0 0 50px rgba(0,150,255,.3);

}



.live-player {


    width:100%;


    height:100%;


    border:0;


    display:none;

}



.live-player.show {


    display:block;

}




.live-badge {


    position:absolute;


    top:15px;


    left:15px;


    z-index:5;


    background:red;


    padding:

    7px 15px;


    border-radius:25px;


    font-weight:bold;


    display:none;


}









/* OFFLINE */


.offline-screen {


    position:absolute;


    inset:0;


    display:flex;


    justify-content:center;


    align-items:center;

}



.offline-image {


    width:100%;


    height:100%;


    object-fit:cover;

}



.offline-overlay {


    position:absolute;


    width:75%;


    padding:25px;


    background:

    rgba(0,0,0,.55);



    backdrop-filter:

    blur(15px);



    border-radius:20px;


    text-align:center;

}








/* =========================
NEWS
========================= */



.section-title {


    text-align:center;


    font-size:32px;


    margin-top:40px;


    margin-bottom:30px;

}



.news-grid {


    display:grid;


    grid-template-columns:

    repeat(
    auto-fit,
    minmax(260px,1fr)
    );


    gap:22px;

}





.news-card {


    background:

    rgba(255,255,255,.09);



    border:

    1px solid rgba(255,255,255,.15);



    backdrop-filter:

    blur(18px);



    border-radius:22px;


    overflow:hidden;


    transition:.35s;

}



.news-card:hover {


    transform:

    translateY(-8px);


    box-shadow:

    0 20px 40px rgba(0,150,255,.3);

}




.news-card img {


    width:100%;


    height:170px;


    object-fit:cover;

}



.news-content {


    padding:18px;

}




.source-button {


    display:inline-block;


    margin-top:15px;


    padding:

    8px 18px;


    border-radius:25px;


    background:

    rgba(0,170,255,.3);



    color:white;


    text-decoration:none;

}









/* =========================
ABOUT
========================= */



.about-logo {


    width:180px;


    margin:25px auto;


    display:block;



    filter:

    drop-shadow(
    0 0 20px rgba(0,170,255,.5)
    );

}








.loading {


    text-align:center;


    color:#aaa;

}








/* =========================
MOBILE
========================= */



@media(max-width:700px){


.glass-header {


    flex-direction:column;


    gap:15px;

}



.nav-tabs {


    flex-wrap:wrap;


    justify-content:center;

}



.brand-logo {


    width:110px;

}



.clock {


    font-size:32px;

}



.container {


    width:95%;

}



.glass-box {


    padding:25px;

}


}