/* ============================================================
   YAYIN-AKISI.CSS
   Radyo Duman Yayın Akışı
   ============================================================ */


/* ============================================================
   1. GÜN AKIŞLARI
   ============================================================ */

.gun-akis {
    display: none;
}

.gun-akis.aktif {
    display: block;
}


/* ============================================================
   2. YAYIN SATIRI
   ============================================================ */

.yayin-satiri {
    display: grid;

    grid-template-columns: 130px 1fr;

    gap: 15px;

    align-items: stretch;

    padding: 14px;

    border-radius: 12px;

    background: rgba(55, 65, 81, 0.50);

    border: 1px solid rgba(255, 255, 255, 0.04);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}


/* Hover */

.yayin-satiri:hover {

    background: rgba(75, 85, 99, 0.60);

    transform: translateX(3px);

}


/* ============================================================
   3. SAAT
   ============================================================ */

.yayin-saati {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 55px;

    padding: 8px;

    border-radius: 8px;

    background: rgba(0, 0, 0, 0.25);

    color: #ffffff;

    font-family: monospace;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;
}

.yayin-saati span {

    margin: 0 5px;

    color: rgba(255, 255, 255, 0.45);

}


/* ============================================================
   4. PROGRAM BİLGİSİ
   ============================================================ */

.yayin-bilgi {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.yayin-program-adi {

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;
}


.yayin-programci {

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;

    font-style: italic;

}


/* ============================================================
   5. DUMAN'IN EN İYİLERİ
   ============================================================ */

.otomatik-yayin {

    background:
        linear-gradient(
            90deg,
            rgba(75, 85, 99, 0.55),
            rgba(31, 41, 55, 0.50)
        );

}

.otomatik-yayin .yayin-program-adi {

    color: rgba(255, 255, 255, 0.82);

}

.otomatik-yayin .yayin-programci {

    color: rgba(255, 255, 255, 0.40);

}


/* ============================================================
   6. NORMAL PROGRAM (Yayını olanlar - SARI)
   ============================================================ */

.program-yayin {

    border-left: 4px solid rgba(250, 204, 21, 0.75);

    background: rgba(250, 204, 21, 0.15);

}

.program-yayin:hover {

    background: rgba(250, 204, 21, 0.25);

}

.program-yayin .yayin-program-adi {

    color: #facc15;

}

.program-yayin .yayin-programci {

    color: rgba(250, 204, 21, 0.7);

}


/* ============================================================
   7. ŞU AN CANLI YAYIN (Sarı rengi iptal eder)
   ============================================================ */

.canli-yayin {

    background: rgb(141, 6, 45) !important;

    border: 2px solid rgb(239, 68, 68) !important;

    border-left: 4px solid rgb(239, 68, 68) !important;

    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.25);

    animation: yayinPulse 2s infinite;

}


.canli-yayin .yayin-program-adi {

    color: #ffffff !important;

}


.canli-yayin .yayin-programci {

    color: rgba(255, 255, 255, 0.85) !important;

}


/* ============================================================
   8. CANLI ETİKETİ
   ============================================================ */

.canli-etiket {

    display: inline-block;

    margin-left: 8px;

    padding: 3px 7px;

    border-radius: 5px;

    background: #ffffff;

    color: rgb(141, 6, 45);

    font-size: 9px;

    font-weight: 900;

    vertical-align: middle;

}


/* ============================================================
   9. CANLI ANİMASYONU
   ============================================================ */

@keyframes yayinPulse {

    0% {

        box-shadow:
            0 0 10px rgba(239, 68, 68, 0.15);

    }

    50% {

        box-shadow:
            0 0 25px rgba(239, 68, 68, 0.35);

    }

    100% {

        box-shadow:
            0 0 10px rgba(239, 68, 68, 0.15);

    }

}


/* ============================================================
   10. MOBİL
   ============================================================ */

@media (max-width: 640px) {

    .yayin-satiri {

        grid-template-columns: 95px 1fr;

        gap: 8px;

        padding: 9px;

    }


    .yayin-saati {

        min-height: 55px;

        font-size: 11px;

    }


    .yayin-saati span {

        margin: 0 2px;

    }


    .yayin-program-adi {

        font-size: 12px;

    }


    .yayin-programci {

        font-size: 10px;

    }


    .canli-etiket {

        display: block;

        width: fit-content;

        margin-left: 0;

        margin-top: 4px;

        font-size: 8px;

    }

}


/* ============================================================
   11. ÇOK KÜÇÜK EKRAN
   ============================================================ */

@media (max-width: 400px) {

    .yayin-satiri {

        grid-template-columns: 82px 1fr;

    }

    .yayin-saati {

        font-size: 10px;

    }

}