*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#050505;
    color:white;
    min-height:100vh;
}

.container{
    width:95%;
    max-width:1600px;
    margin:auto;
    padding:20px;
}

header{
    background:#0b0b0b;
    border:none;
    border-radius:20px;
    padding:30px;
    margin-bottom:20px;
}

h1{
    color:#ff2a2a;
}
.mainGrid{
    display:grid;
    gap:20px;
    margin-top:20px;
    align-items:start;
}

.mainGrid.userLayout{
    grid-template-columns:
        220px
        minmax(0,1fr)
        260px;
}

.mainGrid.adminLayout{
    grid-template-columns:
        220px
        260px
        minmax(0,1fr)
        260px;
}
.card{
    background:#0b0b0b;
    border:none;
    border-radius:20px;
    padding:15px;
    position:relative;

}

#chatBox{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px;
}
.messageBox{
    display:flex;
    gap:10px;
    padding:15px;
    border-top:1px solid #333;
    flex-shrink:0;
}

.messageBox input{
    flex:1;
    background:#111;
    color:white;
    border:none;
    border-radius:10px;
    padding:15px;
}

.messageBox button{
    width:120px;
}
input{
    flex:1;
    background:#111;
    color:white;
    border:none;
    border-radius:10px;
    padding:12px;
}

button{
    background:#c00000;
    color:white;
    border:none;
    border-radius:10px;
    padding:12px 20px;
    cursor:pointer;
}

button:hover{
    background:#ff0000;
}


#chatArea{
    display:flex;
    flex-direction:column;
    height:500px;
    overflow:hidden;

}
.guestInfo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    gap:25px;
}

.guestInfo h3{
    color:#ff3333;
    font-size:32px;
}

.guestInfo p{
    font-size:20px;
    line-height:1.8;
    max-width:600px;
}

.guestButtons{
    display:flex;
    gap:15px;
}
.guestInfo h3{
    color:#ff3333;
    font-size:30px;
    margin-bottom:25px;
}

.guestInfo p{
    font-size:20px;
    line-height:2;
    max-width:600px;
    margin-bottom:30px;
}

.guestInfo button{
    background:#d60000;
    color:white;
    border:none;
    padding:12px 30px;
    border-radius:10px;
    cursor:pointer;
    font-size:17px;
}

.myMsg{
    margin-left:auto;
    background:#2a0f0f;
    border:none;
}

.systemMsg{
    text-align:center;
    color:#888;
    font-size:14px;
    margin:10px 0;
}

.nick{
    font-weight:bold;
    color:#ff5555;
    margin-bottom:5px;
}

.time{
    font-size:12px;
    color:#777;
    margin-top:5px;
}


input[type="color"]{
    width:80px;
    height:45px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
}

select{
    background:#111;
    color:white;
    border:none;
    border-radius:10px;
    padding:12px;
    width:220px;
}


#settingsModal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:9999;
    width:320px;
    max-width:90%;
    background:#1a1a1a;
    border:none;
    border-radius:15px;
    padding:25px;
    box-shadow:0 0 25px rgba(0,0,0,.8);
    text-align:left;
}

#settingsModal h3{
    margin-top:0;
    text-align:center;
}

#settingsModal input,
#settingsModal select{
    width:100%;
    margin-bottom:15px;
}


.msg{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    background:#1a1a1a;
    border:none;
    border-radius:16px;

    padding:6px 10px;
    margin-bottom:6px;

    max-width:75%;
    min-width:0;

    word-break:break-word;
}
.msg-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;

    font-size:15px;
}

.msg b{
    display:inline;
    font-size:14px;
    margin-right:4px;
}
.msg-time{
    font-size:10px;
    opacity:.65;
    white-space:nowrap;
}

.system-msg{
    text-align:center;
    margin:8px 0;
}
#radioInfo{
    margin:15px 0;
    padding:14px;

    background:#151515;
    border:none;
    border-radius:14px;

    text-align:center;
    font-size:15px;
    color:#cccccc;
    line-height:1.8;
}

#radioInfo span{
    color:#ffffff;
    font-weight:bold;
}

#userList{
    display:flex;
    flex-direction:column;
    gap:8px;
}

#userList div{
    background:#161616;
    border:none;
    border-radius:20px;
    padding:8px 12px;
}
.online-dot{
    color:#00ff55;
    margin-right:6px;
    font-size:12px;
}
.online-user{
    display:flex;
    align-items:center;

    background:#161616;
    border:none;
    border-radius:20px;

    padding:8px 12px;
    margin-bottom:8px;
}

.online-dot{
    color:#00ff55;
    font-size:12px;
    margin-right:6px;
}
.liveBadge{
    display:inline-block;

    background:#a00000;
    color:white;

    padding:8px 18px;
    border-radius:20px;

    font-weight:bold;
    font-size:14px;

    margin-bottom:12px;

    box-shadow:
        0 0 12px rgba(255,0,0,.4);
}

.radioMeta{
    color:#ddd;
    font-size:14px;
}
@keyframes livePulse{
    0%{
        box-shadow:0 0 8px rgba(255,0,0,.4);
    }

    50%{
        box-shadow:0 0 20px rgba(255,0,0,.9);
    }

    100%{
        box-shadow:0 0 8px rgba(255,0,0,.4);
    }
}
.liveBadge{
    animation:livePulse 2s infinite;
}

#songMode{
    margin-top:6px;
    font-size:12px;
    color:#999;
    font-style:italic;
}
#adminPanel{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #550000;
}
#broadcastControls{
    display:flex;
    flex-direction:column;
    gap:12px;
}

#songEditor{
    display:flex;
    flex-direction:column;
    gap:12px;
}

#songEditor p{
    margin:0;
}

#songEditor input,
#songEditor button,
#broadcastControls button{
    margin:0;
}
.mainGrid > *{
    min-width:0;
}

/* ===== MOBİL GÖRÜNÜM ===== */

@media (max-width:1100px){

    .mainGrid.userLayout,
    .mainGrid.adminLayout{
        grid-template-columns:1fr;
    }

    .card{
        width:100%;
    }

    #chatArea{
        height:450px;
    }

    .messageBox{
        flex-direction:column;
    }

    .messageBox button,
    .messageBox input{
        width:100%;
    }

    #broadcastControls button,
    #songEditor button{
        width:100%;
    }
}

@media (max-width:700px){

    .container{
        width:100%;
        padding:10px;
    }

    header{
        padding:20px;
    }

    h1{
        font-size:28px;
    }

    .liveBadge{
        font-size:12px;
        padding:6px 14px;
    }

    .guestInfo h3{
        font-size:24px;
    }

    .guestInfo p{
        font-size:16px;
        line-height:1.6;
    }

    #chatArea{
        height:400px;
    }
}


/* ===== Hesabım paneli düzeni ===== */

#avatarBox{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#avatarApprovalPanel{
    margin-top:15px;
    border-top:1px solid #550000;
    padding-top:12px;
}

#avatarApprovalList{
    max-height:220px;
    overflow-y:auto;
}

#avatarApprovalList button{
    width:100%;
    margin-top:6px;
}


/* RADYODERSIM GRID DUZENI */

.mainGrid{
    display:grid;
    gap:18px;
    align-items:start;
}

.mainGrid.userLayout{
    grid-template-columns:220px minmax(620px,1fr) 240px;
}

.mainGrid.adminLayout{
    grid-template-columns:220px minmax(620px,1fr) 220px 200px;
}

#chatArea{
    height:420px;
    display:flex;
    flex-direction:column;
}

#chatBox{
    flex:1;
    overflow-y:auto;
}

#adminPanel,
#avatarApprovalPanel{
    max-height:600px;
    overflow-y:auto;
}

#avatarApprovalPanel{
    margin-top:20px;
}

@media(max-width:1000px){

.mainGrid.userLayout,
.mainGrid.adminLayout{
    grid-template-columns:1fr;
}

}


/* ===== AVATAR BOYUTLARI ===== */

/* Hesabım */
#avatarPreview{
    width:72px !important;
    height:72px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block;
    margin:8px auto;
}

/* Online listesi */
#userList img{
    width:40px !important;
    height:40px !important;
    border-radius:50% !important;
    object-fit:cover !important;
}

/* Sohbet mesajları */
#chatBox img{
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    margin-right:8px;
    vertical-align:middle;
}

/* Avatar onayları */
#avatarApprovalList img{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    margin-right:8px;
    vertical-align:middle;
}



.djLiveInfo {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin:14px 0;
    padding:16px;
    border-radius:16px;
    background:rgba(20,20,20,.75);
    border:none;
}

.djAvatarArea{
    display:flex;
    justify-content:center;
    align-items:center;
}

.djAvatarArea img{
    width:128px;
    height:128px;
    border-radius:50%;
    object-fit:cover;
    border:none;
    background:#111;
    box-shadow:0 0 22px rgba(255,0,0,.55);
}

.djStatus{
    width:100%;
    text-align:center;
    padding:12px;
    border-radius:12px;
    background:#5b0c0c;
    border:none;
    font-size:20px;
    font-weight:700;
}
.djTitleArea,
.djSloganArea,
.djMessageArea {
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    border:none;
    text-align:center;
}


.djTitleArea {
    font-size:18px;
    font-weight:bold;
}


.djSloganArea {
    font-style:italic;
}


.djMessageArea {
    min-height:60px;
    line-height:1.5;
}




.djFieldLabel {
    font-size:12px;
    letter-spacing:1px;
    opacity:0.75;
    margin-bottom:6px;
}


.djTitleArea span,
.djSloganArea span,
.djMessageArea span {
    display:block;
    font-size:16px;
    margin-top:5px;
}


.djTitleArea span {
    font-weight:bold;
    font-size:18px;
}


.djMessageArea span {
    line-height:1.6;
}




#broadcastControls input,
#broadcastControls textarea {
    width:100%;
    box-sizing:border-box;
    margin:8px 0;
    padding:12px;
    border-radius:10px;
    border:none;
    background:rgba(0,0,0,0.25);
    color:white;
    font-size:14px;
}


#broadcastControls textarea {
    min-height:90px;
    resize:vertical;
}


#broadcastControls input::placeholder,
#broadcastControls textarea::placeholder {
    color:rgba(255,255,255,0.6);
}



/* ===== HESABIM KARTI (FINAL UI) ===== */

#avatarBox{
    align-items:center;
    text-align:center;
    gap:14px;
    margin-top:12px;
}

#myInfo{
    text-align:center;
    line-height:1.5;
    margin-bottom:8px;
    font-size:17px;
}

#myInfo b{
    font-size:20px;
}

#avatarPreview{
    width:110px !important;
    height:110px !important;
    border-radius:50%;
    object-fit:cover;
    border:none;
    box-shadow:0 0 18px rgba(255,0,0,.45);
    margin:0 auto;
}

#avatarStatus{
    display:inline-block;
    margin:0;
    padding:6px 14px;
    border-radius:20px;
    background:#123d18;
    color:#8dff9f;
    font-weight:bold;
    font-size:14px;
}

#avatarFile{
    width:100%;
}

#avatarBox button{
    width:100%;
}


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

#heroHeader{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;

padding:18px 24px;

margin-bottom:18px;

background:#111;

border:none;

border-radius:14px;
}

#heroLeft{
display:flex;
align-items:center;
gap:16px;
}

#heroLogo{
width:90px;
height:90px;

border-radius:50%;

background:#b30000;

display:flex;
align-items:center;
justify-content:center;

font-size:42px;

color:#fff;

box-shadow:0 0 18px rgba(255,0,0,.35);
}

#heroTitle h1{

margin:0;

font-size:34px;

color:#fff;

letter-spacing:2px;
}

#heroTitle p{

margin:6px 0 0;

color:#d5d5d5;

font-size:15px;
}

#heroCenter{

flex:1;

padding:0 20px;
}

#heroBanner{

height:92px;

border-radius:12px;

background:linear-gradient(90deg,#1a0000,#3d0000,#1a0000);

display:flex;

flex-direction:column;

justify-content:center;

padding:12px 26px;

box-sizing:border-box;

}

#heroBanner h2{

margin:0;

font-size:20px;

font-weight:700;

color:#ffffff;

letter-spacing:1px;

}

#heroBanner h3{

margin:6px 0 10px;

font-size:16px;

color:#ff3030;

font-weight:700;

}

#heroMotto{

margin:0;

padding:0;

list-style:none;

display:grid;

grid-template-columns:repeat(2,max-content);

column-gap:34px;

row-gap:4px;

}

#heroMotto li{

color:#dddddd;

font-size:15px;

}


#heroRight{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:14px;
}

#liveBox{

display:flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:30px;

background:#b00000;

color:#fff;

font-weight:bold;
}

.liveDot{

width:12px;

height:12px;

border-radius:50%;

background:#00ff66;
}

#heroSocial{

display:flex;

gap:12px;
}

#heroSocial span{

width:38px;

height:38px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#222;

color:#fff;

font-size:18px;

cursor:pointer;

transition:.2s;
}

#heroSocial span:hover{

background:#c40000;

transform:scale(1.08);
}


#heroLogo{
    width:120px;
    height:120px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:none;
    box-shadow:none;
}

#heroLogoImg{
    width:120px;
    height:120px;
    object-fit:contain;
    display:block;

    filter:drop-shadow(0 0 12px rgba(255,0,0,.55));
}


#heroTitle{
display:flex;
flex-direction:column;
justify-content:center;
}

.heroWord{

font-weight:900;
text-transform:uppercase;
line-height:.9;
letter-spacing:3px;
font-size:58px;

text-shadow:
0 0 8px rgba(255,255,255,.15),
0 0 18px rgba(255,0,0,.35);

}

.heroWhite{
color:#fff;
}

.heroRed{
color:#ff2020;
margin-top:-4px;
}

.heroSub{

margin-top:14px;
font-size:16px;
font-weight:700;
letter-spacing:1px;
color:#e6d3a0;

}

.heroSub2{

margin-top:3px;
font-size:17px;
font-weight:900;
letter-spacing:1px;
color:#ff2020;

}

/* ===========================
   DEV LOGO BOYUTU
   =========================== */

#heroLeft{
    display:flex;
    align-items:center;
    gap:18px;
}

#heroLogo{
    width:210px !important;
    height:210px !important;

    flex:0 0 210px;

    background:transparent !important;
    border:none;
    border-radius:0 !important;
    box-shadow:none !important;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:visible;
}

#heroLogo img,
#heroLogoImg{
    width:210px !important;
    height:210px !important;

    object-fit:contain;

    border:none;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    display:block;
}

#heroTitle{
    margin-left:6px;
}

#heroHeader{
    align-items:center;
    min-height:220px;
}



/* =====================================================
   STUDIO LOOK (ÇERÇEVESİZ TEMA)
   ===================================================== */

.container,
.card,
header,
aside,
section,
.panel,
.onlinePanel,
.chatPanel,
.rightPanel,
#heroHeader,
#heroBanner,
#leftPanel,
#rightPanel,
#chatPanel,
#playerPanel{

    border:none;
    outline:none;
    box-shadow:none !important;
}


/* Ana üst alan */

#heroHeader{

    background:#111 !important;

    border-radius:22px;

    padding:24px 28px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 20px 50px rgba(0,0,0,.45) !important;
}


/* Banner */

#heroBanner{

    background:linear-gradient(90deg,#121212,#1b1b1b,#111);

    border-radius:18px;

    padding:20px 26px;
}


/* Sol panel */

#leftPanel,
.onlinePanel{

    background:#101010 !important;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.35) !important;
}


/* Orta sohbet */

#chatPanel{

    background:#0f0f0f !important;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.45) !important;
}


/* Sağ DJ paneli */

#rightPanel{

    background:#101010 !important;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.45) !important;
}


/* Kartlar */

.card{

    background:#111 !important;

    border-radius:20px;

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


/* Kullanıcı satırları */

.userItem,
.message,
.chatMessage{

    border:none;

    background:#1a1a1a !important;

    border-radius:14px;

    box-shadow:none !important;
}


/* Input */

input,
textarea{

    border:none;

    background:#161616 !important;

    border-radius:14px;
}


/* Butonlar */

button{

    border:none;

    box-shadow:none !important;
}