/* ===========================
   SADA AL-WAHI RADIO
=========================== */
:root{

--primary:#0F766E;

--gold:#D4AF37;

--bg:#07141f;

--text:#ffffff;

--gray:#cfcfcf;

--card:rgba(255,255,255,.08);

}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

font-family:"Cairo",sans-serif;

    background:#07141f;

    overflow-x:hidden;

    color:white;

}

/* الخلفية */

body::before{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:
linear-gradient(rgba(5,15,20,.82),rgba(5,15,20,.90)),
url("https://images.unsplash.com/photo-1512632578888-169bbbc64f33?auto=format&fit=crop&w=1920&q=80");

background-size:cover;

background-position:center;

z-index:-3;

}

/* طبقة خضراء */

body::after{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:
radial-gradient(circle at top,
rgba(15,118,110,.25),
transparent 70%);

z-index:-2;

}
.hero{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding-top:180px;

}

.hero h1{

font-size:70px;

color:#D4AF37;

margin-bottom:20px;

}

.hero p{

font-size:24px;

margin-bottom:40px;

color:#ddd;

}

.hero button{

padding:18px 45px;

border:none;

border-radius:60px;

font-size:22px;

cursor:pointer;

background:#0F766E;

color:white;

transition:.3s;

}

.hero button:hover{

transform:scale(1.08);

background:#129487;

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:12px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(0,0,0,.25);

backdrop-filter:blur(18px);

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-circle{
    display:flex;
    align-items:center;
    justify-content:center;

    padding-top:5px;
}

.logo-circle img{
    width:80px;
    height:80px;
    object-fit:contain;
    display:block;
}
.logo h2{

font-size:24px;

color:#D4AF37;

}

.logo span{

font-size:14px;

color:#ddd;

}

nav{

display:flex;

gap:35px;

}

nav a{

color:white;

text-decoration:none;

transition:.3s;

font-size:18px;

}

nav a:hover{

color:#D4AF37;

}
/* ================= PLAYER ================= */

.player-card{

margin-top:45px;

width:420px;

max-width:90%;

padding:35px;

border-radius:30px;

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

backdrop-filter:blur(20px);

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

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.live-status{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin-bottom:25px;

font-size:18px;

}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#00ff5a;

animation:pulse 1.2s infinite;

}

@keyframes pulse{

0%{opacity:1;transform:scale(1);}
50%{opacity:.3;transform:scale(1.4);}
100%{opacity:1;transform:scale(1);}

}

.play-button{

width:95px;

height:95px;

border:none;

border-radius:50%;

background:#0F766E;

color:white;

font-size:34px;

cursor:pointer;

transition:.3s;

margin:20px auto;

display:flex;

align-items:center;

justify-content:center;

}

.play-button:hover{

transform:scale(1.08);

background:#129487;

}

.now-playing{

margin-top:30px;

}

.now-playing span{

color:#bbbbbb;

font-size:15px;

}

.now-playing h3{

margin-top:12px;

color:#D4AF37;

font-size:26px;

}

.wave{

margin-top:30px;

display:flex;

justify-content:center;

align-items:flex-end;

gap:6px;

height:45px;

}

.wave span{

width:6px;

height:20px;

background:#0F766E;

border-radius:20px;

animation:wave 1s infinite;

}

.wave span:nth-child(2){animation-delay:.2s;}
.wave span:nth-child(3){animation-delay:.4s;}
.wave span:nth-child(4){animation-delay:.6s;}
.wave span:nth-child(5){animation-delay:.8s;}

@keyframes wave{

0%{height:15px;}
50%{height:40px;}
100%{height:15px;}

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

.about{
    padding:100px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:42px;
    color:#D4AF37;
    margin-bottom:15px;
}

.section-title p{
    color:#ccc;
    font-size:20px;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.feature-card{

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

    backdrop-filter:blur(15px);

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

    border-radius:25px;

    padding:40px;

    text-align:center;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.feature-card i{

    font-size:55px;

    color:#D4AF37;

    margin-bottom:25px;

}

.feature-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.feature-card p{

    color:#cccccc;

    line-height:1.8;

}
/* ================= SOCIAL ================= */

.social-section{

    padding:100px 8%;

    text-align:center;

}

.social-section h2{

    color:#D4AF37;

    font-size:40px;

    margin-bottom:15px;

}

.social-section p{

    color:#cccccc;

    font-size:20px;

    margin-bottom:40px;

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}

.social-icons a{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:32px;

    color:white;

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

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

    backdrop-filter:blur(15px);

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-8px) scale(1.1);

    background:#0F766E;

    box-shadow:0 15px 35px rgba(15,118,110,.45);

}
/* ================= FOOTER ================= */

.footer{

    padding:70px 8%;

    text-align:center;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(20px);

    margin-top:100px;

}

.footer-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.footer-circle{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#0F766E;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

}

.footer-logo h2{

    color:#D4AF37;

    font-size:32px;

}

.footer p{

    color:#ccc;

    margin-bottom:35px;

    font-size:18px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:35px;

}

.footer-links a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#D4AF37;

}

.footer hr{

    border:none;

    height:1px;

    background:rgba(255,255,255,.12);

    margin:30px auto;

    width:80%;

}

.footer span{

    color:#888;

    font-size:15px;

}
/* ================= SCROLL ANIMATION ================= */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}
.header.scrolled{

    background:rgba(4,12,18,.88);

    box-shadow:0 8px 30px rgba(0,0,0,.35);

}
#topBtn{

position:fixed;

left:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

display:none;

z-index:9999;

transition:.3s;

}

#topBtn:hover{

transform:scale(1.1);

}
.player-status{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-bottom:15px;

}

.live-dot{

    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;

    animation:pulse 1.5s infinite;

}

.live-text{

    color:#22c55e;

    font-weight:600;

    font-size:15px;

}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.4);
opacity:.5;
}

100%{
transform:scale(1);
opacity:1;
}

}
.hero h1{

    font-size:110px;

    color:#D4AF37;

    margin-bottom:10px;

}

.hero h2{

    margin-bottom:15px;

}

.hero p{

    opacity:.8;

    margin-bottom:30px;

}
/* =========================
   Mobile Responsive
========================= */
@media (max-width: 768px){

.header{
    padding:12px 5%;
    flex-direction:column;
    gap:15px;
}

.logo{
    justify-content:center;
}

.logo-circle img{
    width:60px;
    height:60px;
}

.logo h2{
    font-size:22px;
}

.logo span{
    font-size:12px;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

nav a{
    font-size:15px;
}

.hero{
    padding-top:180px;
    padding-left:20px;
    padding-right:20px;
}

.hero h1{
    font-size:42px;
    line-height:1.3;
}

.hero p{
    font-size:18px;
}

.player-card{
    width:100%;
    max-width:350px;
}
}
/* ===== Mobile Menu ===== */

.menu-toggle{
    display:none;
    font-size:28px;
    color:white;
    cursor:pointer;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

nav{
    display:none;
    flex-direction:column;
    width:100%;
    text-align:center;
    margin-top:15px;
}

nav.active{
    display:flex;
}

}
/* ===== تحسين الموبايل ===== */

@media (max-width:768px){

.header{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}

.logo-circle img{
    width:55px;
    height:55px;
}

.logo h2{
    font-size:20px;
}

.logo span{
    font-size:11px;
}

.hero{
    padding-top:140px;
    padding-left:20px;
    padding-right:20px;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:17px;
}

.player-card{
    width:95%;
    padding:25px;
}

.play-button{
    width:75px;
    height:75px;
    font-size:28px;
}

.social-icons{
    gap:18px;
}

.social-icons a{
    width:60px;
    height:60px;
    font-size:24px;
}

.footer{
    padding:50px 20px;
}

.footer-logo h2{
    font-size:24px;
}

}