/* ==========================================================
   KHATEREH TV NEXT
   Version 0.3.2-beta
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#111111;

    color:#FFFFFF;

    overflow-x:hidden;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    min-height:100vh;

    background-image:url("../images/DBG.jpeg");

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    background-attachment:fixed;

    padding:60px 0;

}

.container{

    width:92%;

    max-width:1200px;

    margin:auto;

}

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

.header{

    text-align:center;

    margin-bottom:25px;

}

.logo img{

    width:180px;

    display:block;

    margin:auto;

}

.header h1{

    margin-top:20px;

    font-size:46px;

    font-weight:700;

}

.tagline{

    margin-top:10px;

    color:#CCCCCC;

    font-size:22px;

    letter-spacing:1px;

}

/* ==========================================================
   LANGUAGE
========================================================== */

.language-switcher{

    display:flex;

    justify-content:center;

    gap:12px;

    margin:35px 0;

}

.lang-btn{

    background:transparent;

    color:#DDDDDD;

    border:1px solid #666;

    border-radius:25px;

    padding:10px 20px;

    cursor:pointer;

    transition:.3s;

}

.lang-btn:hover{

    border-color:#D4AF37;

    color:#D4AF37;

}

.lang-btn.active{

    background:#D4AF37;

    color:#111;

    border-color:#D4AF37;

}

/* ==========================================================
   MAIN BUTTONS
========================================================== */

.main-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:55px;

    flex-wrap:wrap;

}

.live-button{

    display:flex;

    align-items:center;

    gap:12px;

    background:#111;

    color:#FFF;

    border:2px solid #D4AF37;

    border-radius:10px;

    padding:16px 30px;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

    font-weight:bold;

}

.live-button:hover{

    background:#1A1A1A;

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(212,175,55,.45);

}

.live-button img{

    width:36px;

}

.live-button span{

    color:#FFFFFF;

}
/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title{

    margin-bottom:20px;

}

.player-title{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:10px;

}

.player-title img{

    width:42px;

    height:42px;

}

.player-title h2{

    font-size:32px;

    color:#FFFFFF;

}

/* ==========================================================
   LIVE STATUS
========================================================== */

.live-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#1A1A1A;

    border:1px solid rgba(212,175,55,.35);

    border-radius:30px;

    padding:8px 18px;

    margin-bottom:20px;

}

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff2b2b;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.4;

        transform:scale(1.4);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

.stream-info{

    color:#BDBDBD;

    font-size:17px;

}

/* ==========================================================
   TV PLAYER
========================================================== */

.tv-section{

    margin-bottom:25px;

}

.player-wrapper{

    width:100%;

    aspect-ratio:16 / 9;

    background:#000;

    border:2px solid #D4AF37;

    border-radius:16px;

    overflow:hidden;

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

}

.player-wrapper iframe{

    width:100%;

    height:100%;

    border:0;

}

/* ==========================================================
   RADIO
========================================================== */

.radio-section{

    margin-bottom:80px;

}

/* ==========================================================
   RADIO PLAYER
========================================================== */

.radio-wrapper{

    background:linear-gradient(180deg,#1B1B1B,#111111);

    border:2px solid #D4AF37;

    border-radius:18px;

    padding:35px;

    box-shadow:0 0 30px rgba(212,175,55,.12);

    text-align:center;

}

.radio-wrapper audio{

    width:100%;

    max-width:700px;

    height:55px;

    margin:25px auto 0;

    display:block;

}

.radio-wrapper::before{

    content:"🎵 Persian Radio • Live 24/7";

    display:block;

    color:#D4AF37;

    font-size:22px;

    font-weight:bold;

    margin-bottom:20px;

    letter-spacing:1px;

}
.radio-wrapper audio{

    width:100%;

    height:55px;

}
/* ==========================================================
   SUPPORT
========================================================== */

.support-section{

    display:flex;

    justify-content:center;

    margin:90px auto;

}

.support-box{

    width:100%;

    max-width:760px;

    background:rgba(20,20,20,.92);

    border:1px solid rgba(212,175,55,.35);

    border-radius:18px;

    padding:50px;

    text-align:center;

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

    backdrop-filter:blur(8px);

}

.support-box h2{

    color:#D4AF37;

    font-size:32px;

    margin-bottom:25px;

}

.support-text{

    color:#CCCCCC;

    font-size:18px;

    line-height:1.9;

    margin-bottom:18px;

}

.support-button{

    margin-top:20px;

    background:#D4AF37;

    color:#111111;

    border:none;

    border-radius:10px;

    padding:16px 42px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.30s;

}

.support-button:hover{

    background:#E8C75A;

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(212,175,55,.55);

}

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

.footer{

    margin-top:80px;

    padding:45px 20px;

    text-align:center;

    border-top:1px solid rgba(212,175,55,.20);

}

.footer p:first-child{

    color:#D4AF37;

    font-size:18px;

    font-weight:bold;

    margin-bottom:12px;

}

.footer p:last-child{

    color:#999999;

    font-size:15px;

    letter-spacing:.5px;

    line-height:1.8;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

    .header h1{

        font-size:36px;

    }

    .tagline{

        font-size:18px;

    }

    .player-title h2{

        font-size:26px;

    }

    .support-box{

        padding:35px;

    }

}

@media (max-width:768px){

    .main-buttons{

        flex-direction:column;

        align-items:center;

    }

    .live-button{

        width:100%;

        max-width:340px;

        justify-content:center;

    }

    .support-box{

        padding:30px;

    }

}

@media (max-width:480px){

    .header h1{

        font-size:30px;

    }

    .logo img{

        width:140px;

    }

    .tagline{

        font-size:16px;

    }

    .player-title h2{

        font-size:22px;

    }

    .support-box h2{

        font-size:26px;

    }

    .support-text{

        font-size:16px;

    }

    .support-button{

        width:100%;

    }

}
/* ==========================================================
   NOW PLAYING
========================================================== */

.now-playing{

    margin:55px 0 80px;

}

.now-header{

    margin-bottom:20px;

}

.now-card{

    display:flex;

    align-items:center;

    gap:30px;

    background:#181818;

    border:2px solid #D4AF37;

    border-radius:18px;

    padding:25px;

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

    transition:.3s;

}

.now-card:hover{

    transform:translateY(-3px);

    box-shadow:0 0 30px rgba(212,175,55,.20);

}

.movie-poster{

    width:170px;

    flex-shrink:0;

}

.movie-poster img{

    width:100%;

    border-radius:10px;

    display:block;

}

.movie-info{

    flex:1;

}

.movie-info h2{

    font-size:32px;

    color:#D4AF37;

    margin-bottom:15px;

}

.movie-info p{

    color:#CCCCCC;

    line-height:1.8;

    font-size:17px;

    margin-bottom:20px;

}

.movie-meta{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.movie-meta span{

    background:#222;

    border:1px solid rgba(212,175,55,.25);

    border-radius:25px;

    padding:10px 18px;

    color:#FFFFFF;

    font-size:15px;

}
/* ==========================================================
   NOW PLAYING RESPONSIVE
========================================================== */

@media (max-width:900px){

    .now-card{

        flex-direction:column;

        text-align:center;

    }

    .movie-poster{

        width:220px;

    }

    .movie-info h2{

        font-size:28px;

    }

    .movie-meta{

        justify-content:center;

    }

}

@media (max-width:600px){

    .movie-poster{

        width:170px;

    }

    .movie-info h2{

        font-size:24px;

    }

    .movie-info p{

        font-size:16px;

    }

    .movie-meta span{

        width:100%;

        text-align:center;

    }

}
/* ==========================================================
   RADIO COVER
========================================================== */

.radio-cover{

    display:flex;

    justify-content:center;

    margin-bottom:15px;

}

.radio-cover img{

    width:70px;

    height:70px;

    border-radius:50%;

    border:2px solid #D4AF37;

    object-fit:cover;

    box-shadow:0 0 15px rgba(212,175,55,.30);

}

#radio-title{

    color:#D4AF37;

    font-size:26px;

    margin-bottom:10px;

}

#radio-now{

    color:#CCCCCC;

    margin-bottom:20px;

}
.radio-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;

}

.radio-action{

    background:#111111;

    color:#FFFFFF;

    border:2px solid #D4AF37;

    border-radius:30px;

    padding:12px 24px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

    min-width:120px;

}

.radio-action:hover{

    background:#D4AF37;

    color:#111111;

}
/* ==========================================================
   KHATEREH RADIO PLAYER
========================================================== */

.radio-player{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin:35px auto;

    width:100%;

    max-width:750px;

}

.play-button,
.volume-button{

    width:65px;

    height:65px;

    border-radius:50%;

    border:2px solid #D4AF37;

    background:#111111;

    color:#D4AF37;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

.play-button:hover,
.volume-button:hover{

    background:#D4AF37;

    color:#111111;

}

.progress-area{

    flex:1;

}

.progress-bar{

    width:100%;

    height:10px;

    background:#333333;

    border-radius:20px;

    overflow:hidden;

}

.progress-fill{

    width:35%;

    height:100%;

    background:#D4AF37;

    border-radius:20px;

}
#volumeSlider{

    width:120px;

    accent-color:#D4AF37;

    cursor:pointer;

}
/* ==========================================================
   NOW PLAYING DETAILS
========================================================== */

#movie-title-fa{

    color:#D4AF37;

    font-size:34px;

    margin-bottom:8px;

    direction:rtl;

}

#movie-title-en{

    color:#FFFFFF;

    font-size:22px;

    font-weight:400;

    margin-bottom:25px;

}

.movie-details{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.movie-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid rgba(212,175,55,.15);

}

.label{

    color:#BBBBBB;

    font-size:16px;

}

.movie-row span:last-child{

    color:#FFFFFF;

    font-weight:bold;

}
/* =====================================================
   MOVIE TYPE
===================================================== */

.movie-type {

    display: inline-block;

    margin-top: 18px;

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(212,175,55,.15);

    border: 1px solid rgba(212,175,55,.35);

    color: #d4af37;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 1px;

}


/* =====================================================
   PROGRESS
===================================================== */

.progress-container{

    width:100%;

    margin-top:24px;

}

.progress-bar{

    width:100%;

    height:12px;

    background:#222;

    border-radius:50px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.20);

}

.progress-fill{

    width:65%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #d4af37,
        #ffcc55,
        #d4af37
    );

    background-size:300%;

    animation:progressGlow 4s linear infinite;

}

@keyframes progressGlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}
/* ==========================================
   NEXT PROGRAM CARD
========================================== */

.next-program-card{

    margin-top:35px;

    padding:28px;

    border-radius:18px;

    background:#151515;

    border:1px solid rgba(212,175,55,.25);

    text-align:center;

    box-shadow:0 0 25px rgba(212,175,55,.08);

}

.next-header{

    color:#d4af37;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:20px;

}

.next-title-fa{

    color:#ffffff;

    font-size:28px;

    font-weight:bold;

    margin-bottom:8px;

}

.next-title-en{

    color:#cccccc;

    font-size:18px;

    margin-bottom:18px;

}

.next-type{

    display:inline-block;

    padding:8px 18px;

    border-radius:25px;

    background:rgba(212,175,55,.12);

    color:#d4af37;

    margin-bottom:20px;

}

.next-start{

    color:#ffffff;

    font-size:18px;

}

#next-start-time{

    color:#d4af37;

    font-weight:bold;

    margin-left:10px;

}
/* ==========================================================
   PROGRAMM-INFO & SCHRIFTEN VERGRÖSSERN
   ========================================================== */

/* Haupttitel (Persisch) */
#movie-title-fa {
    font-size: 2rem !important; /* Vorher viel zu klein */
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
}

/* Untertitel / Englischer Titel */
#movie-title-en {
    font-size: 1.2rem !important;
    color: #ffd700; /* Gold-Gelb für gute Lesbarkeit */
    margin-bottom: 12px;
}

/* Sendezeit & Kategorie */
#movie-type, #movie-time-range {
    font-size: 1.1rem !important;
    font-weight: 600;
}

/* Inhaltsangabe / Beschreibung */
#movie-description {
    font-size: 1rem !important;
    line-height: 1.7;
    color: #e0e0e0;
}

/* Verbleibende Zeit (Countdown Zahl) */
#movie-remaining {
    font-size: 1.8rem !important;
    font-weight: bold;
    color: #00ffcc; /* Auffällige Farbe für Countdown */
}

/* Nächster Film Bereich */
#next-title-fa {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: #ffffff;
}

#next-title-en {
    font-size: 1rem !important;
    color: #aaaaaa;
}
/* ==========================================================
   KHATEREH TV — DESIGN IMPROVEMENTS & LARGER FONTS
   ========================================================== */

/* Hauptbehälter für Filminfo */
.movie-info-box, #now-playing-container {
    background: rgba(20, 20, 25, 0.85) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
}

/* Titel - Persisch (Groß & Gold) */
#movie-title-fa {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #ffd700 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* Titel - Englisch */
#movie-title-en {
    font-size: 1.2rem !important;
    color: #cccccc !important;
    margin-bottom: 12px !important;
}

/* Zeit & Genre Tags */
#movie-type, #movie-time-range {
    font-size: 1.1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* Beschreibungstext */
#movie-description {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #e2e8f0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border-right: 4px solid #ffd700 !important;
    margin-top: 15px !important;
}

/* Countdown Restzeit */
#movie-remaining {
    font-size: 2rem !important;
    font-weight: bold !important;
    color: #00f2fe !important;
    letter-spacing: 1px !important;
}

/* Spendenbereich (حمایت از خاطره تی‌وی) wieder sichtbar machen */
.support-section, .donation-box {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.9), rgba(15, 15, 20, 0.95)) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin: 30px auto !important;
    max-width: 900px !important;
    text-align: center !important;
    color: #ffffff !important;
}

.support-section h3 {
    font-size: 1.6rem !important;
    color: #ffd700 !important;
    margin-bottom: 10px !important;
}

.support-section p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #d1d5db !important;
}
/* ==========================================================
   NAVIGATION OBEN REPARIEREN
   ========================================================== */
nav.main-navigation ul {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
}

nav.main-navigation li {
    display: inline-block !important;
    list-style: none !important;
}

nav.main-navigation a {
    color: #ffd700 !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    transition: all 0.3s ease !important;
}

nav.main-navigation a:hover {
    background: rgba(212, 175, 55, 0.3) !important;
    color: #ffffff !important;
}

/* ==========================================================
   FILMINFO SCHRIFTEN DEUTLICH VERGRÖSSERN
   ========================================================== */
#movie-title-fa {
    font-size: 2.2rem !important;
    font-weight: bold !important;
    color: #ffd700 !important;
    margin-bottom: 8px !important;
}

#movie-title-en {
    font-size: 1.3rem !important;
    color: #e0e0e0 !important;
    margin-bottom: 12px !important;
}

#movie-time-range, #movie-type {
    font-size: 1.1rem !important;
    padding: 6px 12px !important;
}

#movie-description {
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

#movie-remaining {
    font-size: 2.2rem !important;
    font-weight: bold !important;
    color: #00f2fe !important;
}

/* Nächster Film Kasten */
.next-program-card {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 15px !important;
    border-radius: 10px !important;
    border-right: 4px solid #ffd700 !important;
}

#next-title-fa {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

#next-title-en {
    font-size: 1.1rem !important;
    color: #aaaaaa !important;
}