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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body{

    font-weight:500;
    min-height:100vh;

    background:linear-gradient(
        180deg,
        #2a2a2a,
        #1b1b1b
    );

    color:white;

    padding-top:72px;

}

.container{

    max-width:1100px;

    margin:auto;

    padding:40px;

}
.tabs{
    display:flex;
    justify-content:center;
    gap:2px;
    margin-bottom:25px;
}

.tab-btn{
    border:none;
    background:#242424;
    color:white;
    padding:18px 35px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.tab-btn:first-child{
    border-radius:10px 0 0 10px;
}

.tab-btn:last-child{
    border-radius:0 10px 10px 0;
}

.tab-btn.active{
    background:#f0c419;
    color:black;
    font-weight:bold;
}

.panel{
    background:#131313;
    border-radius:25px;
    padding:40px;
    border:1px solid #2d2d2d;
    box-shadow:0 0 40px rgba(0,0,0,.4);
}

.logo-circle{

    width:140px;
    height:140px;

    margin:0 auto 25px;

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

    background:transparent;
    border-radius:0;

}


.logo-circle img{

    width:140px;
    height:140px;

    object-fit:contain;

}

/* ORTAK CSI LOGO */

.page-logo{

    width:110px;
    height:110px;

    margin:0 auto 20px;

}


.page-logo img{

    width:110px;
    height:110px;

    object-fit:contain;

}

h1{
    text-align:center;
    font-size:48px;
    margin-bottom:10px;
}

.subtitle{
    text-align:center;
    color:#a7a7a7;
    margin-bottom:40px;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.left-side{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.left-side input,
.left-side select{
    width:100%;
    background:#232323;
    border:1px solid #3a3a3a;
    color:white;
    padding:18px;
    border-radius:12px;
    font-size:16px;
}

.info-card{
    background:#181818;
    border:1px solid #333;
    border-radius:15px;
    padding:20px;
    margin-bottom:20px;
}

.info-card h3{
    margin-bottom:15px;
    font-size:20px;
    font-weight:700;
    color:#f0c419;
}

.warning{
    color:#ffb347;
    font-size:14px;
    margin-bottom:15px;
}

.time-row{
    display:flex;
    gap:15px;
}

.time-row div{
    flex:1;
}

.time-row input{
    width:100%;
    background:#232323;
    border:1px solid #3a3a3a;
    color:white;
    padding:15px;
    border-radius:10px;
}

.time-row span{
    display:block;
    margin-top:8px;
    color:#9a9a9a;
    font-size:14px;
}

.divider{
    height:1px;
    background:#333;
    margin:30px 0;
}

.main-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:20px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;

    background:linear-gradient(
        90deg,
        #d4a800,
        #ffd84f
    );

    color:black;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

@media(max-width:900px){

    .grid{
        grid-template-columns:1fr;
    }

    h1{
        font-size:32px;
    }

    .tabs{
        flex-wrap:wrap;
    }
}
#sonuclar{
    display:flex;
    flex-direction:column;
    gap:15px;
}

#sonuclar .info-card{
    border-left:5px solid #f0c419;
}

#personelEkle{
    margin-bottom:20px;
}

#toplu select{
    width:100%;
    background:#232323;
    border:1px solid #3a3a3a;
    color:white;
    padding:15px;
    border-radius:10px;
}

#toplu input{
    width:100%;
    background:#232323;
    border:1px solid #3a3a3a;
    color:white;
    padding:15px;
    border-radius:10px;
}
input,
select,
button{
    font-weight:600;
}

p{
    font-weight:500;
}

label{
    font-weight:600;
}

strong{
    font-weight:700;
}
#sonuclar .info-card{

    border-left:5px solid #f0c419;

    background:#1a1a1a;

    transition:.3s;

}

#sonuclar .info-card:hover{

    transform:translateX(5px);

}
.tt-reset-btn{

    width:100%;
    height:50px;

    margin-bottom:20px;

    border:none;
    border-radius:12px;

    background:#ef3340;

    color:white;

    font-weight:700;

    cursor:pointer;

}


.tt-reset-btn:hover{

    background:#ff4d5a;
    transform:scale(1.05);

}

/*==========================
            NAVBAR
==========================*/

:root{

    --yellow:#f0c419;
    --bg:#0b0b0b;
    --card:#161616;
    --border:#2d2d2d;

}

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

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

    backdrop-filter:blur(12px);

    border-bottom:2px solid var(--yellow);

    z-index:9999;

}

.nav-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo{

    width:42px;

}

.brand-text{

    background:var(--yellow);

    color:#000;

    padding:7px 14px;

    border-radius:7px;

    font-weight:800;

}

.nav-center{

    display:flex;

    gap:10px;

}

.nav-btn{

    text-decoration:none;

    color:#bdbdbd;

    font-size:14px;

    font-weight:700;

    padding:10px 16px;

    border-radius:8px;

    border:1px solid transparent;

    transition:all .25s ease;

}

.nav-btn:hover{

    color:white;

    background:#1d1d1d;

    border-color:#f0c419;

    box-shadow:0 0 18px rgba(240,196,25,.18);

    transform:translateY(-2px);

}

.nav-btn.active{

    color:var(--yellow);

    background:#1d1d1d;

    border:1px solid var(--yellow);

    box-shadow:0 0 18px rgba(240,196,25,.18);

}

.status-badge{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:#181818;

    border:1px solid var(--border);

}

.online-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#32d74b;

    box-shadow:0 0 12px #32d74b;

}

.nav-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.login-btn{

    padding:10px 18px;

    border-radius:8px;

    background:#1d1d1d;

    border:1px solid #2d2d2d;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.login-btn:hover{

    transform:translateY(-2px);

    border-color:#f0c419;

}

.register-btn{

    padding:10px 18px;

    border-radius:8px;

    background:#f0c419;

    color:black;

    text-decoration:none;

    font-weight:800;

    transition:.25s;

}

.register-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(240,196,25,.30);

}

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

.hero{

    position:relative;

    height:92vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-bottom:2px solid #f0c419;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background: url("../assets/csi_oda.jpg") center center / cover no-repeat;

    transform:scale(1.05);

    filter:brightness(.45);

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.30),
        rgba(0,0,0,.72)
    );

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

    padding:30px;

}

.hero h1{

    font-size:72px;

    line-height:1.1;

    font-weight:900;

    color:white;

    margin-bottom:25px;

    text-shadow:0 5px 20px rgba(0,0,0,.8);

}

.hero p{

    font-size:24px;

    color:#d7d7d7;

    line-height:1.7;

}

@media(max-width:900px){

.hero h1{

font-size:44px;

}

.hero p{

font-size:18px;

}

}



/*=========================
DUYURULAR
==========================*/

.section{

    max-width:1200px;

    margin:70px auto;

    padding:0 20px;

}

.discord-box{

    background:#161616;

    border:1px solid #2d2d2d;

    border-radius:18px;

    overflow:hidden;

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

}

.discord-header{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    background:#1d1d1d;

}

.discord-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

}

.discord-title i{

    color:#5865F2;

}

.discord-live{

    display:flex;

    align-items:center;

    gap:10px;

    color:#bbb;

}

.live-dot{

    width:10px;

    height:10px;

    background:#36d54d;

    border-radius:50%;

    box-shadow:0 0 10px #36d54d;

}

.discord-body{

    background:#2b2d31;

    min-height:430px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:50px;

}

.discord-body i{

    font-size:70px;

    color:#f0c419;

    margin-bottom:30px;

}

.discord-body h2{

    font-size:46px;

    margin-bottom:20px;

}

.discord-body p{

    color:#bcbcbc;

    max-width:700px;

    line-height:1.8;

}

.discord-footer{

    padding:25px;

    display:flex;

    justify-content:center;

    gap:18px;

    background:#1b1b1b;

}

.discord-btn{

    background:#5865F2;

    color:white;

    text-decoration:none;

    padding:15px 26px;

    border-radius:10px;

    font-weight:700;

    transition:.25s;

}

.discord-btn:hover{

    transform:translateY(-2px);

}

.gray-btn{

    background:#2a2a2a;

    color:white;

    text-decoration:none;

    padding:15px 26px;

    border-radius:10px;

}

/*==============================
ORGANİZASYON
==============================*/

.org-section{

    max-width:1200px;

    margin:80px auto;

    padding:35px;

    background:#151515;

    border:1px solid #2d2d2d;

    border-radius:22px;

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

    position:relative;

    overflow:hidden;

}

.org-title{

    text-align:center;

    font-size:48px;

    font-weight:800;

    color:white;

    margin-bottom:10px;

}

.org-subtitle{

    text-align:center;

    color:#9d9d9d;

    margin-bottom:60px;

    font-size:17px;

}

.org-row{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:25px;
}

.org-section::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:#f0c419;

}

.org-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:60px;

}

.founders-row{
    gap:40px;
    margin-bottom:35px;
}

.owner-row{

    margin-bottom:30px;

}

.org-card{
    width:180px;
    min-height:115px;

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

    padding:18px;

    background:#181818;
    border:1px solid #323232;
    border-radius:15px;
    transition:.3s;
}

.org-card:hover{

    transform:translateY(-8px);

    border-color:#f0c419;

    box-shadow:0 15px 40px rgba(240,196,25,.12);

}

.avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#242424;

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

    margin-bottom:12px;

    color:#f0c419;
    font-size:22px;
}

.org-card h3{
    font-size:18px;
    margin-bottom:6px;
    padding-bottom:8px;
    width:100%;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.org-card span{
    margin-top:6px;
    color:#b7b7b7;
    font-size:13px;
}

.founder-card{

    width:240px;

}

.owner-card{

    width:240px;

}

.manager-card{

    width:240px;

}

/*==========================
      ORG PREVIEW
==========================*/

.org-preview-section{

    max-width:1200px;

    margin:90px auto;

    padding:35px;

    background:#151515;

    border:1px solid #2d2d2d;

    border-radius:22px;

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

    position:relative;

}

.org-preview-section::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:#f0c419;

}

.org-header{

    text-align:center;

    margin-bottom:35px;

}

.org-header h2{

    font-size:42px;

    margin-top:10px;

}

.org-header p{

    color:#999;

    margin-top:15px;

}

.org-preview-card{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}

.org-open-btn{

    position:absolute;

    right:18px;

    bottom:18px;

    border:none;

    padding:12px 22px;

    border-radius:12px;

    background:#f0c419;

    color:#111;

    font-weight:700;

    cursor:pointer;

}

/*==================================================
HAKKIMIZDA
==================================================*/

.about-section{

    max-width:1200px;

    margin:80px auto;

    padding:35px;

    background:#151515;

    border:1px solid #2d2d2d;

    border-radius:22px;

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

    position:relative;

    overflow:hidden;

}

.about-section::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:#f0c419;

}

.about-title{

    text-align:center;

    font-size:48px;

    font-weight:800;

    color:white;

    margin-bottom:10px;

}

.about-subtitle{

    text-align:center;

    color:#9d9d9d;

    margin-bottom:50px;

    font-size:17px;

}

.about-card{

    background:#181818;

    border:1px solid #323232;

    border-radius:18px;

    min-height:320px;

    padding:35px;

    transition:.30s;

}

.about-card:hover{

    border-color:#f0c419;

    box-shadow:0 15px 40px rgba(240,196,25,.15);

    transform:translateY(-5px);

}


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

.footer{
    width:100%;
    margin-top:80px;
    background:#101010;
    border-top:1px solid rgba(255,208,0,.18);
}

.footer-container{

    max-width:1400px;
    margin:auto;

    padding:70px 40px;

    display:flex;
    justify-content:space-between;
    gap:80px;

}

.footer-about{

    flex:1.8;

}

.footer-logo{

    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:25px;

}

.footer-logo img{

    width:70px;
    height:70px;
    object-fit:contain;

}

.footer-logo h2{

    color:#FFD54A;
    font-size:34px;
    font-weight:700;

}

.footer-about p{

    max-width:450px;

    color:#9a9a9a;

    line-height:1.8;

    font-size:15px;

}

.footer-links{

    flex:1;

}

.footer-links h3{

    color:#FFD54A;

    margin-bottom:22px;

    font-size:18px;

}

.footer-links a{

    display:block;

    margin-bottom:14px;

    color:#bcbcbc;

    text-decoration:none;

    transition:.25s;

}

.footer-links a:hover{

    color:#FFD54A;
    padding-left:6px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.06);

    padding:22px 40px;

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

    color:#777;

    font-size:14px;

}

/*=========================================
                  PAYBAN
=========================================*/

#payban .info-card{
    margin-bottom:20px;
}


#payban input[type="date"],
#payban .paybanAd{

    width:100%;
    height:45px;

    padding:0 15px;

    background:#222;
    border:1px solid #444;

    border-radius:10px;

    color:white;

    font-size:15px;

}


.payban-personel{

    display:flex;
    flex-direction:column;

    gap:15px;

}


.checkbox-area{

    display:flex;
    align-items:center;

    gap:10px;

    font-weight:700;

    color:white;

}


.checkbox-area input{

    width:20px;
    height:20px;

    cursor:pointer;

}



#paybanRaporBtn{

    margin-top:15px;

}



#paybanTemizleBtn{

    margin-top:15px;

    width:100%;
    height:50px;

    border:none;
    border-radius:12px;

    background:#d63031;

    color:white;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

}


#paybanTemizleBtn:hover{

    background:#ff4757;

}
.payban-row{

    display:flex;
    align-items:center;

    background:#222;

    border:1px solid #444;

    border-radius:12px;

    padding:10px 15px;

    margin-bottom:10px;

}



.payban-row .paybanAd{

    flex:1;

    background:transparent;

    border:none;

    outline:none;

    color:white;

    font-size:16px;

}



.payban-row .paybanCheck{

    width:22px;
    height:22px;

    cursor:pointer;

}

#toplu .main-btn{
    width:100%;
    margin-top:20px;
}

#personelContainer .info-card{
    margin-bottom:15px;
}

/*==================================================
                    PUANTAJ
==================================================*/

#puantaj .grid{
    align-items:start;
}

.puantaj-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:20px;
}

.puan-item{

    background:#1d1d1d;

    border:1px solid #343434;

    border-radius:14px;

    padding:16px;

    transition:.25s;

}

.puan-item:hover{

    border-color:#f0c419;

    box-shadow:0 10px 25px rgba(240,196,25,.12);

    transform:translateY(-3px);

}

.puan-item label{

    display:block;

    font-size:16px;

    font-weight:700;

    color:white;

    margin-bottom:10px;

}

.puan-item input{

    width:100%;

    height:46px;

    background:#262626;

    border:1px solid #444;

    border-radius:10px;

    color:white;

    font-size:18px;

    text-align:center;

    margin-bottom:10px;

}

.puan-item input:focus{

    outline:none;

    border-color:#f0c419;

}

.puan-item span{

    display:block;

    text-align:center;

    color:#f0c419;

    font-size:13px;

    font-weight:700;

}

/*============================
            CEZA
=============================*/

.ceza-grid{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.ceza-grid label{

    display:grid;

    grid-template-columns:24px 1fr;

    align-items:center;

    gap:14px;

    background:#1d1d1d;

    border:1px solid #343434;

    border-radius:12px;

    padding:14px 16px;

    cursor:pointer;

    transition:.25s;

}

.ceza-grid input{

    width:18px;

    height:18px;

    margin:0;

}

.ceza-grid span{

    display:block;

    width:100%;

    text-align:center;

    color:#fff;

    font-weight:600;

    font-size:15px;

}

.ceza-grid label:hover{

    border-color:#f0c419;

}

.ceza-grid label:last-child{

    grid-column:1 / span 2;

}

.ceza-grid input{

    width:18px;

    height:18px;

}

/*============================
            ÖZET
=============================*/

.puantaj-ozet{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:30px 0;

}

.puantaj-ozet div{

    background:#181818;

    border:1px solid #343434;

    border-radius:15px;

    padding:22px;

    text-align:center;

    transition:.25s;

}

.puantaj-ozet > div:hover {

    border-color:#f0c419;

    transform:translateY(-4px);

}

.puantaj-ozet h3{

    color:#cfcfcf;

    font-size:17px;

    margin-bottom:12px;

}

.puantaj-ozet span{

    display:block;

    font-size:30px;

    font-weight:800;

    color:#f0c419;

}

/*============================
        INPUTLAR
=============================*/

#puantaj input,
#puantaj select{

    width:100%;

    background:#232323;

    border:1px solid #3a3a3a;

    color:white;

    padding:17px;

    border-radius:12px;

    font-size:16px;

}

#puantaj input:focus,
#puantaj select:focus{

    outline:none;

    border-color:#f0c419;

}

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

@media(max-width:900px){

    .puantaj-grid{

        grid-template-columns:1fr;

    }

    .ceza-grid{

        grid-template-columns:1fr;

    }

    .ceza-grid label:last-child{

        grid-column:auto;

    }

    .puantaj-ozet{

        grid-template-columns:1fr;

    }

}

/*============================
        SONUÇ KARTI
=============================*/

.puantaj-sonuc-kart{

    margin-top:35px;

    background:#181818;

    border:1px solid #333;

    border-radius:18px;

    padding:25px;

}

.puantaj-sonuc-kart h3{

    margin-bottom:18px;

    color:#f0c419;

}

#discordPreview{

    background:#101010;

    border:1px solid #2f2f2f;

    border-radius:12px;

    min-height:280px;

    padding:18px;

    color:#e7e7e7;

    white-space:pre-wrap;

    font-family:Consolas,monospace;

    line-height:1.7;

    overflow:auto;

}

.hedef-durum{

    margin-top:18px;

    color:#f0c419;

    font-weight:bold;

    font-size:17px;

}

.puantaj-btn-group{

    display:flex;

    gap:15px;

    margin-top:22px;

}

.puantaj-btn-group button{

    flex:1;

}

.site-footer{
    width:100vw;
    margin-left:calc(50% - 50vw);
    background:#111;
    border-top:1px solid rgba(240,196,25,.25)
}

#puantajTemizleBtn{

    width:100%;

    height:55px;

    margin-top:15px;

    border:none;

    border-radius:14px;

    background:#e0e0e0;

    color:#222;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#puantajTemizleBtn:hover{

    background:#ffffff;

    transform:translateY(-2px);

}

/*==================================================
                    CSI HABERLER
==================================================*/

.news-section{

    width:calc(100% - 80px);

    max-width:1500px;

    margin:80px auto;

    padding:35px;

    background:#151515;

    border:1px solid #2d2d2d;

    border-radius:22px;

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

    position:relative;

    overflow:hidden;

}

.news-section::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#f0c419;

}

.news-header{

    margin-bottom:45px;

}

.news-top-title{

    color:#f0c419;

    font-size:14px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}

.news-header h2{

    margin-top:18px;

    font-size:58px;

    font-weight:900;

}

.news-header p{

    margin-top:15px;

    color:#9d9d9d;

    font-size:18px;

}

#haberContainer{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:20px;

}

@media(max-width:1100px){

#haberContainer{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

#haberContainer{

grid-template-columns:1fr;

}

.news-header h2{

font-size:42px;

}

}

.news-card{

    background:#171717;

    border:1px solid #2e2e2e;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

}

.news-card:hover{

    transform:translateY(-8px);

    border-color:#f0c419;

    box-shadow:0 20px 45px rgba(240,196,25,.18);

}

.news-image{

    width:100%;

    height:170px;

    overflow:hidden;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.news-card:hover .news-image img{

    transform:scale(1.08);

}

.news-content{

    padding:18px;

}

.news-category{

    display:inline-block;

    background:#f0c419;

    color:#111;

    padding:7px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:800;

    margin-bottom:18px;

}

.news-title{

    font-size:22px;

    font-weight:800;

    margin-bottom:15px;

}

.news-description{

    color:#aaaaaa;

    line-height:1.7;

    margin-bottom:25px;

}

.news-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#8c8c8c;

    font-size:14px;

}

.news-read{

    color:#f0c419;

    font-weight:700;

}

.news-layout{

    display:grid;

    grid-template-columns:390px minmax(0,1fr);

    gap:28px;

    align-items:start;

}

.announcement-panel,
.news-panel{

    background:#181818;

    border:1px solid #303030;

    border-radius:18px;

    padding:25px;

}

.announcement-panel h3{

    color:#f0c419;

    margin-bottom:20px;

    font-size:24px;

}

.announcement-item{

    padding-bottom:18px;

    border-bottom:1px solid #2f2f2f;

    margin-bottom:18px;

}

@media(max-width:1000px){

.news-layout{

grid-template-columns:1fr;

}

}

.news-panel{

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:18px;

    padding:18px;

}

.news-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.panel-title{

    font-size:28px;

    font-weight:800;

    color:white;

}

.all-news{

    color:#f0c419;

    text-decoration:none;

    font-weight:700;

}

#featuredNews:empty{

    display:none;

}

#featuredNews:not(:empty){

    margin-bottom:25px;

}

.news-placeholder{

    background:#171717;

    border:1px solid #2d2d2d;

    border-radius:18px;

    overflow:hidden;

    min-height:330px;

    display:flex;

    flex-direction:column;

    transition:.3s;

}

.news-placeholder:hover{

    border-color:#f0c419;

    transform:translateY(-4px);

}

.news-placeholder-image{

    height:170px;

    background:#202020;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

    color:#3a3a3a;

}

.news-placeholder-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:25px;

    text-align:center;

}

.news-placeholder-content h3{

    color:white;

    font-size:22px;

    margin-bottom:12px;

}

.news-placeholder-content p{

    color:#8f8f8f;

    line-height:1.7;

    margin-bottom:20px;

}

.news-placeholder-tag{

    background:#2b2b2b;

    color:#f0c419;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

}

/* ============================= */
/* ORGANIZATION SLIDER */
/* ============================= */

.org-slider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

#organizationContainer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    min-height:260px;
    flex:1;
}

.org-card{
    width:220px;
    height:250px;

    background:#181818;

    border:1px solid #343434;
    border-radius:18px;

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

    transition:.30s;
}

.org-card:hover{

    transform:translateY(-8px);

    border-color:#f0c419;

    box-shadow:0 15px 35px rgba(240,196,25,.18);

}

.org-avatar{

    width:90px;
    height:90px;

    border-radius:50%;

    overflow:hidden;

    background:#2b2b2b;

    margin-bottom:18px;

}

.org-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.org-card h3{

    font-size:22px;

    margin-bottom:10px;

    color:white;

}

.org-card p{

    color:#f0c419;

    font-size:15px;

}

.org-view-all{

    display:block;

    margin:35px auto 0;

    padding:14px 28px;

    border:none;

    border-radius:12px;

    background:#f0c419;

    color:#111;

    font-weight:700;

    cursor:pointer;

}

/*=================================================
            NEW ORGANIZATION SYSTEM
=================================================*/

.org-slider{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:40px;
}

#organizationContainer{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    min-height:320px;

}

.preview-card{

    width:240px;

    height:285px;

    background:#181818;

    border:1px solid #303030;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

    cursor:pointer;

}

.preview-card:hover{

    transform:translateY(-10px);

    border-color:#f0c419;

    box-shadow:0 20px 40px rgba(240,196,25,.18);

}

.preview-avatar{

    width:110px;

    height:110px;

    border-radius:50%;

    overflow:hidden;

    background:#2c2c2c;

    border:3px solid #3b3b3b;

    margin-bottom:22px;

}

.preview-avatar img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:4px;
}

.preview-card h3{

    color:white;

    font-size:24px;

    margin-bottom:8px;

    text-align:center;

}

.preview-card span{

    color:#f0c419;

    font-size:15px;

    font-weight:600;

}

.org-arrow{

    width:58px;
    height:58px;

    border:none;
    border-radius:50%;

    background:#222;

    color:#f0c419;

    font-size:30px;

    font-weight:700;

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

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.org-arrow:hover{

    background:#f0c419;
    color:#111;

    transform:scale(1.08);

}

.org-view-all{

    display:block;

    margin:25px auto 0;

    padding:14px 34px;

    border:none;

    border-radius:12px;

    background:#f0c419;

    color:#111;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.org-view-all:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(240,196,25,.30);

}

/*==========================
        POPUP
==========================*/

.organization-popup{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.organization-popup.active{

    display:flex;

}

.organization-popup-box{

    width:min(1400px,95%);

    max-height:90vh;

    overflow:auto;

    background:#151515;

    border:1px solid #353535;

    border-radius:22px;

    padding:45px;

    position:relative;

    animation:popupShow .25s ease;

}

.popup-close{

    position:absolute;

    top:18px;

    right:18px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#f0c419;

    color:#111;

    font-size:26px;

    cursor:pointer;

}

.popup-close:hover{

    transform:rotate(90deg);

}

@media(max-width:900px){

#organizationContainer{

flex-direction:column;

}

.org-slider{

gap:10px;

}

.org-arrow{

width:45px;

height:45px;

}

}

/*==========================================
        ORGANIZATION POPUP TREE
==========================================*/

.tree-title{

    text-align:center;
    font-size:42px;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;

}

.tree-subtitle{

    text-align:center;
    color:#9fa3ad;
    margin-bottom:45px;

}

.tree-level{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    margin-bottom:25px;

}

.tree-two{

    gap:70px;

}

.tree-line{

    width:4px;
    height:45px;
    background:#f0c419;
    margin:0 auto 20px;

    border-radius:50px;

}

.tree-card{

    width:220px;
    height:220px;

    background:#181818;

    border:1px solid #303030;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.30s;

}

.tree-card:hover{

    transform:translateY(-8px);

    border-color:#f0c419;

    box-shadow:0 15px 35px rgba(240,196,25,.18);

}

.tree-card h3{

    margin-top:18px;
    color:white;
    font-size:22px;

}

.tree-card span{

    color:#f0c419;
    margin-top:8px;
    font-size:14px;

}

.tree-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:45px;

}

.tree-small{

    background:#181818;

    border:1px solid #303030;

    border-radius:18px;

    height:190px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.tree-small:hover{

    transform:translateY(-6px);

    border-color:#f0c419;

}

.tree-small h4{

    color:white;

    margin-top:16px;

}

.tree-small span{

    color:#f0c419;

    font-size:13px;

    margin-top:6px;

}

.preview-avatar.small{

    width:65px;
    height:65px;

}

@keyframes popupShow{

    from{

        transform:scale(.92);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@media(max-width:1000px){

.tree-grid{

grid-template-columns:repeat(2,1fr);

}

.tree-two{

flex-direction:column;

gap:25px;

}

}

@media(max-width:700px){

.tree-grid{

grid-template-columns:1fr;

}

.tree-level{

flex-direction:column;

}

}


/* ===============================
   PROFIL DROPDOWN MENU
================================ */

.profile-menu-wrapper {
    position: relative;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 230px;
    padding: 10px;
    background: #171717;
    border: 1px solid #353535;
    border-top: 2px solid #f0c419;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 10050;
}

.profile-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: #171717;
    border-left: 1px solid #353535;
    border-top: 1px solid #f0c419;
    transform: rotate(45deg);
}

.profile-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #efefef;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}

.profile-dropdown-item:hover {
    background: #242424;
    color: #f0c419;
}

.profile-dropdown-divider {
    height: 1px;
    margin: 7px 4px;
    background: #333;
}

.profile-dropdown-item.logout-item {
    color: #ff6b6b;
}

.profile-dropdown-item.logout-item:hover {
    background: rgba(255, 75, 75, .12);
    color: #ff8585;
}

@media (max-width: 900px) {
    .profile-dropdown {
        right: 0;
        width: 210px;
    }
}


/* Yönetim paneli oturum doğrulanana kadar gizlidir. */
#panel[style*="display:none"] {
    display:none !important;
}

/* =====================================
   MOBİL NAVBAR
===================================== */

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:none;
    background:#1d1d1d;
    color:#f0c419;
    font-size:22px;
    border-radius:10px;
    cursor:pointer;
}

@media (max-width: 1100px){

    .navbar{
        padding:0 18px;
    }

    .nav-center{
        gap:4px;
    }

    .nav-btn{
        padding:8px 10px;
        font-size:13px;
    }

    .login-btn,
    .register-btn{
        padding:8px 12px;
        font-size:13px;
    }
}

@media (max-width: 1280px){

    .menu-toggle{
        display:block;
    }

    .status-badge{
        display:none;
    }

    .nav-center{

        display:none;

        position:absolute;

        top:72px;

        left:0;

        width:100%;

        background:#111;

        flex-direction:column;

        padding:15px;

        border-top:1px solid #2d2d2d;
    }

    .nav-center.active{
        display:flex;
    }

    .nav-btn{
        width:100%;
        text-align:center;
    }

    .nav-right{

        position:absolute;

        top:calc(72px + 250px);

        left:0;

        width:100%;

        background:#111;

        display:none;

        flex-direction:column;

        padding:15px;
    }

    .nav-right.active{
        display:flex;
    }

    .login-btn,
    .register-btn{
        width:100%;
        text-align:center;
    }
}

/* =====================================
   GENEL TABLET + MOBİL RESPONSIVE
===================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.navbar,
.hero,
.news-section,
.org-section,
.about-section,
.container,
.footer {
    max-width: 100%;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 900px) {

    body {
        padding-top: 72px;
    }

    /* HERO */

    .hero {
        width: 100%;
        min-height: 620px;
        height: auto;
        padding: 80px 24px;
    }

    .hero-content {
        width: 100%;
        max-width: 700px;
        padding: 20px;
    }

    .hero h1 {
        font-size: clamp(38px, 7vw, 56px);
        line-height: 1.12;
    }

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


    /* ORTAK BÖLÜMLER */

    .news-section,
    .org-section,
    .about-section {
        width: calc(100% - 32px);
        margin: 45px auto;
        padding: 26px;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding: 28px 16px;
    }

    .panel {
        padding: 28px;
        border-radius: 18px;
    }


    /* YÖNETİM PANELİ SEKMELERİ */

    .tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tab-btn,
    .tab-btn:first-child,
    .tab-btn:last-child {
        width: 100%;
        min-width: 0;
        padding: 14px 10px;
        border-radius: 10px;
        font-size: 14px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .time-row {
        flex-wrap: wrap;
    }


    /* HABERLER */

    .news-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news-header h2 {
        font-size: 42px;
    }

    .announcement-panel,
    .news-panel {
        width: 100%;
        min-width: 0;
    }

    #haberContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* ORGANİZASYON */

    .org-slider {
        width: 100%;
        gap: 12px;
    }

    #organizationContainer {
        min-width: 0;
        overflow: hidden;
        gap: 14px;
    }

    .org-card,
    .founder-card,
    .owner-card,
    .manager-card {
        width: min(220px, 100%);
        max-width: 100%;
        flex-shrink: 1;
    }

    .org-row,
    .founders-row,
    .owner-row {
        flex-wrap: wrap;
    }

    .org-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* FOOTER */

    .footer-container {
        padding: 50px 28px;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 35px;
    }

    .footer-about p {
        max-width: 100%;
    }
}


/* =====================================
   TELEFON
===================================== */

@media (max-width: 600px) {

    /* GENEL */

    body {
        min-width: 0;
    }

    h1 {
        font-size: 29px;
    }


    /* HERO */

    .hero {
        width: 100%;
        min-height: calc(100svh - 72px);
        padding: 55px 18px;
        background: #111;
    }

    .hero::before {
        width: 100%;
        background-position: center center;
    }

    .hero-content {
        padding: 10px;
    }

    .hero h1 {
        font-size: clamp(34px, 11vw, 46px);
        line-height: 1.12;
        margin-bottom: 22px;
        overflow-wrap: anywhere;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.65;
    }


    /* BÖLÜMLER */

    .news-section,
    .org-section,
    .about-section {
        width: calc(100% - 24px);
        margin: 28px auto;
        padding: 20px 16px;
        border-radius: 16px;
    }

    .container {
        padding: 22px 12px;
    }

    .panel {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .page-logo {
        width: 85px;
        height: 85px;
    }

    .page-logo img {
        width: 85px;
        height: 85px;
    }

    .subtitle {
        margin-bottom: 26px;
        line-height: 1.6;
    }


    /* YÖNETİM PANELİ */

    .tabs {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .tab-btn {
        font-size: 14px;
        padding: 13px 8px;
    }

    .grid,
    .puantaj-grid,
    .puantaj-ozet {
        grid-template-columns: 1fr;
    }

    .time-row {
        flex-direction: column;
        gap: 12px;
    }

    .info-card {
        padding: 16px;
    }

    .main-btn {
        padding: 16px 12px;
        font-size: 16px;
    }

    .payban-row {
        gap: 8px;
        padding: 9px 10px;
    }

    .payban-row .paybanAd {
        min-width: 0;
    }

    .puantaj-btn-group {
        flex-direction: column;
    }

    #discordPreview {
        min-height: 200px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }


    /* HABERLER */

    .news-header {
        margin-bottom: 28px;
        text-align: center;
    }

    .news-top-title {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .news-header h2 {
        font-size: 34px;
        margin-top: 12px;
    }

    .news-header p {
        font-size: 15px;
        line-height: 1.6;
    }

    .announcement-panel,
    .news-panel {
        padding: 16px;
        border-radius: 14px;
    }

    .news-panel-header {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .panel-title {
        font-size: 22px;
    }

    #haberContainer {
        grid-template-columns: 1fr;
    }

    .news-card,
    .news-placeholder {
        min-width: 0;
        width: 100%;
    }

    .news-image,
    .news-placeholder-image {
        height: 150px;
    }

    .news-title {
        font-size: 20px;
    }

    .news-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }


    /* ORGANİZASYON */

    .org-title,
    .about-title {
        font-size: 32px;
    }

    .org-subtitle,
    .about-subtitle {
        margin-bottom: 30px;
        font-size: 15px;
    }

    .org-slider {
        gap: 7px;
    }

    .org-arrow {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
    }

    #organizationContainer {
        gap: 8px;
        min-height: 230px;
    }

    .org-card,
    .founder-card,
    .owner-card,
    .manager-card {
        width: 100%;
        min-width: 0;
        max-width: 210px;
        height: auto;
        min-height: 220px;
        padding: 14px;
    }

    .org-grid {
        grid-template-columns: 1fr;
    }

    .org-view-all {
        width: 100%;
    }


    /* HAKKIMIZDA */

    .about-card {
        min-height: 220px;
        padding: 20px;
    }


    /* FOOTER */

    .footer {
        margin-top: 40px;
    }

    .footer-container {
        padding: 42px 20px;
        display: flex;
        flex-direction: column;
        gap: 34px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-about p {
        margin: auto;
        font-size: 14px;
    }

    .footer-links {
        width: 100%;
    }

    .footer-bottom {
        padding: 20px;
        justify-content: center;
        text-align: center;
        line-height: 1.5;
    }


    /* TAM EKRAN TAŞMA KORUMASI */

    input,
    select,
    button,
    textarea {
        max-width: 100%;
    }

    .site-footer {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================
   ORGANİZASYON - BÜYÜK KARAKTERLİ KART TASARIMI
   Sadece dosyanın en altına ekle
========================================= */

/* Ana sayfadaki 3'lü slider kartları */

.preview-card {
    width: 260px;
    height: 310px;
    padding: 16px 16px 14px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    background: #171717;
    border: 1px solid #3a3a3a;
    border-radius: 18px;

    overflow: hidden;
}

.preview-avatar {
    width: 190px;
    height: 210px;

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

    margin-bottom: 8px;

    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.preview-avatar img {
    width: auto;
    height: 205px;
    max-width: 190px;
    max-height: 205px;

    object-fit: contain;
    object-position: center bottom;

    padding: 0;
    display: block;

    image-rendering: pixelated;
}

.preview-card h3 {
    margin: 4px 0 2px;
    font-size: 22px;
    line-height: 1.1;
    text-align: center;
}

.preview-card span {
    margin-top: 3px;
    color: #f0c419;
    font-size: 14px;
}


/* Ortadaki büyük organizasyon kartları */

.tree-card {
    width: 240px;
    height: 265px;
    padding: 12px 14px 14px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    overflow: hidden;
}

.tree-card .preview-avatar {
    width: 175px;
    height: 180px;
    margin-bottom: 6px;
}

.tree-card .preview-avatar img {
    width: auto;
    height: 175px;
    max-width: 175px;
    max-height: 175px;

    object-fit: contain;
    object-position: center bottom;

    image-rendering: pixelated;
}

.tree-card h3 {
    margin: 4px 0 0;
    font-size: 20px;
    line-height: 1.1;
}

.tree-card span {
    margin-top: 5px;
}


/* Aşağıdaki 8 küçük kurucu kartı */

.tree-small {
    height: 230px;
    min-height: 230px;
    padding: 12px 10px 12px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    overflow: hidden;
}

.tree-small .preview-avatar.small {
    width: 135px;
    height: 155px;

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

    margin-bottom: 5px;

    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.tree-small .preview-avatar.small img {
    width: auto;
    height: 150px;
    max-width: 135px;
    max-height: 150px;

    object-fit: contain;
    object-position: center bottom;

    padding: 0;
    display: block;

    image-rendering: pixelated;
}

.tree-small h4 {
    margin: 3px 0 0;
    font-size: 16px;
    line-height: 1.1;
    text-align: center;
}

.tree-small span {
    margin-top: 5px;
    font-size: 13px;
}


/* Alt kartların biraz daha geniş görünmesi */

.tree-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
}


/* Mobil düzen */

@media (max-width: 900px) {

    .preview-card {
        width: 230px;
        height: 285px;
    }

    .preview-avatar {
        width: 165px;
        height: 185px;
    }

    .preview-avatar img {
        height: 180px;
        max-width: 165px;
    }

    .tree-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 600px) {

    .tree-grid {
        grid-template-columns: 1fr;
    }

    .tree-small {
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
    }
}

/* =========================================
   YÖNETİM PANELLERİNİ KOMPAKT HALE GETİR
========================================= */

#panel.container {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;

    margin: 35px auto 70px;
    padding: 0;
}

#panel .tabs {
    margin-bottom: 18px;
}

#panel .tab-btn {
    padding: 13px 24px;
    font-size: 14px;
}

#panel .panel {
    padding: 28px;
    border-radius: 18px;
}

#panel .page-logo {
    width: 78px;
    height: 78px;
    margin-bottom: 12px;
}

#panel .page-logo img {
    width: 78px;
    height: 78px;
}

#panel h1 {
    font-size: 34px;
    margin-bottom: 7px;
}

#panel h2 {
    font-size: 30px;
}

#panel .subtitle {
    margin-bottom: 25px;
}

#panel .grid {
    gap: 18px;
}

#panel .left-side {
    gap: 14px;
}

#panel input,
#panel select {
    min-height: 48px;
    padding: 13px 15px;
    font-size: 14px;
}

#panel .info-card {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 12px;
}

#panel .info-card h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

#panel .divider {
    margin: 22px 0;
}

#panel .main-btn,
#panel .secondary-btn,
#panel .reset-btn,
#panel .tt-reset-btn {
    min-height: 50px;
    padding: 14px;
    font-size: 15px;
    border-radius: 11px;
}

#panel #personelEkle,
#panel #paybanPersonelEkle {
    margin-top: 14px;
    margin-bottom: 14px;
}

#panel .time-row {
    gap: 10px;
}

#panel .puantaj-grid {
    gap: 10px;
}

#panel .puan-item {
    padding: 12px;
}

#panel .puantaj-ozet {
    gap: 12px;
    margin: 22px 0;
}

#panel .puantaj-ozet > div {
    padding: 16px;
}

#panel .puantaj-ozet span {
    font-size: 24px;
}

@media (max-width: 900px) {

    #panel.container {
        width: min(100% - 24px, 1180px);
        margin-top: 22px;
    }

    #panel .panel {
        padding: 20px;
    }

    #panel h1 {
        font-size: 28px;
    }
}

/* =========================================
   HAKKIMIZDA BÖLÜMÜ
========================================= */

.about-wrapper {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        );

    border: 1px solid #343434;
    border-radius: 22px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.35);
}

.about-intro {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;
    padding: 8px 14px;

    color: #f4c400;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;

    background: rgba(244, 196, 0, 0.08);
    border: 1px solid rgba(244, 196, 0, 0.25);
    border-radius: 999px;
}

.about-intro h3 {
    margin: 0 0 18px;

    color: #f4f4f4;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
}

.about-intro p {
    margin: 0;

    color: #b7b7b7;
    font-size: 16px;
    line-height: 1.8;
}

.about-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.about-card {
    position: relative;

    min-height: 245px;
    padding: 28px;

    background: #181818;
    border: 1px solid #303030;
    border-radius: 18px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    border-color: rgba(244, 196, 0, 0.55);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.35);
}

.about-icon{

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

    width:58px;
    height:58px;

    font-size:24px;

    color:#f4c400;

    background:rgba(244,196,0,.08);

    border:1px solid rgba(244,196,0,.25);

    border-radius:16px;

    transition:.25s;

}

.about-icon i {
    display: block;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.about-card:hover .about-icon{

    transform:scale(1.08);

    background:#f4c400;

    color:#111;

}

.about-card h4 {
    margin: 0 0 12px;

    color: #f4f4f4;
    font-size: 19px;
}

.about-card p {
    margin: 0;

    color: #a8a8a8;
    font-size: 14px;
    line-height: 1.75;
}

.about-footer-text {
    margin-top: 24px;
    padding: 22px 24px;

    color: #c6c6c6;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;

    background: rgba(244, 196, 0, 0.045);
    border: 1px solid rgba(244, 196, 0, 0.16);
    border-radius: 14px;
}

@media (max-width: 900px) {

    .about-wrapper {
        padding: 32px 24px;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-card {
        min-height: auto;
    }

}

@media (max-width: 600px) {

    .about-wrapper {
        width: min(100% - 20px, 1180px);
        padding: 24px 16px;
    }

    .about-intro {
        margin-bottom: 28px;
    }

    .about-intro h3 {
        font-size: 27px;
    }

    .about-intro p {
        font-size: 14px;
    }

    .about-card {
        padding: 22px;
    }

}

/* =========================================
   HABER SOSYAL ETKİLEŞİM ALANI
========================================= */

.public-news-social-section {
    margin-top: 32px;
    padding-top: 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.public-news-interaction-loading,
.public-news-interaction-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 100px;
    padding: 24px;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #939cac;
    text-align: center;
}

.public-news-interaction-error {
    flex-direction: column;

    color: #ff8797;
}

.public-news-interaction-retry {
    min-height: 38px;
    padding: 0 15px;

    border:
        1px solid rgba(246, 201, 76, 0.3);

    border-radius: 9px;

    background:
        rgba(246, 201, 76, 0.09);

    color: #f2cb59;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

/* =========================================
   BEĞENİ VE YORUM SAYISI
========================================= */

.public-news-social-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 18px;
}

.public-news-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 15px;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.04);

    color: #aab2c1;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

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

.public-news-like-btn:hover {
    transform: translateY(-1px);

    border-color:
        rgba(84, 148, 255, 0.4);

    background:
        rgba(84, 148, 255, 0.08);

    color: #7eb0ff;
}

.public-news-like-btn.active {
    border-color:
        rgba(84, 148, 255, 0.5);

    background:
        rgba(84, 148, 255, 0.14);

    color: #83b5ff;
}

.public-news-like-btn strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);

    color: inherit;
    font-size: 11px;
}

.public-news-comment-total {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #949dad;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================
   EMOJİ TEPKİLERİ
========================================= */

.public-news-reaction-area {
    padding: 16px;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);
}

.public-news-reaction-title {
    display: block;

    margin-bottom: 12px;

    color: #7f8899;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.public-news-reaction-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.public-news-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 55px;
    min-height: 38px;

    padding: 0 10px;

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

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #a9b1bf;
    font-family: inherit;

    cursor: pointer;

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

.public-news-reaction-btn:hover {
    transform: translateY(-2px);

    border-color:
        rgba(246, 201, 76, 0.36);

    background:
        rgba(246, 201, 76, 0.07);
}

.public-news-reaction-btn.active {
    border-color:
        rgba(246, 201, 76, 0.55);

    background:
        rgba(246, 201, 76, 0.13);

    box-shadow:
        0 0 18px
        rgba(246, 201, 76, 0.08);
}

.public-news-reaction-btn span {
    font-size: 18px;
}

.public-news-reaction-btn strong {
    color: #8f98a8;
    font-size: 11px;
}

.public-news-reaction-btn.active strong {
    color: #f1c950;
}

/* =========================================
   YORUMLAR
========================================= */

.public-news-comments-section {
    margin-top: 22px;
}

.public-news-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 14px;
}

.public-news-comments-header > div > span {
    display: block;

    margin-bottom: 4px;

    color: #e4b93d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.public-news-comments-header h3 {
    margin: 0;

    color: #ffffff;
    font-size: 18px;
}

.public-news-comment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    border:
        1px solid rgba(246, 201, 76, 0.22);

    border-radius: 999px;

    background:
        rgba(246, 201, 76, 0.08);

    color: #f0c84e;
    font-size: 12px;
}

.public-news-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.public-news-comments-empty {
    padding: 30px 20px;

    border:
        1px dashed rgba(255, 255, 255, 0.1);

    border-radius: 13px;

    color: #7f8898;
    text-align: center;
    font-size: 12px;
}

.public-news-comment {
    position: relative;

    padding: 14px;

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

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.025);
}

.public-news-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 9px;
}

.public-news-comment-header strong {
    color: #f0c64c;
    font-size: 13px;
}

.public-news-comment-header span {
    color: #697284;
    font-size: 9px;
}

.public-news-comment-text {
    color: #c8ced8;
    font-size: 13px;
    line-height: 1.65;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.public-news-comment-delete {
    margin-top: 10px;
    padding: 0;

    border: 0;

    background: transparent;

    color: #ff7184;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.public-news-comment-delete:hover {
    text-decoration: underline;
}

.public-news-comment-delete:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* =========================================
   YORUM YAZMA ALANI
========================================= */

.public-news-comment-form {
    margin-top: 15px;
    padding: 14px;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.025);
}

.public-news-comment-input {
    width: 100%;
    min-height: 90px;
    resize: vertical;

    padding: 13px;

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

    border-radius: 10px;

    outline: none;

    background:
        #0d1118;

    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.public-news-comment-input:focus {
    border-color:
        rgba(246, 201, 76, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(246, 201, 76, 0.06);
}

.public-news-comment-input::placeholder {
    color: #697181;
}

.public-news-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 10px;
}

.public-news-comment-counter {
    color: #70798a;
    font-size: 10px;
}

.public-news-comment-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 39px;
    padding: 0 15px;

    border:
        1px solid rgba(246, 201, 76, 0.34);

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #e7b92f,
            #c88d16
        );

    color: #171208;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.public-news-comment-send:hover {
    transform: translateY(-1px);

    filter: brightness(1.06);

    box-shadow:
        0 8px 20px
        rgba(215, 158, 31, 0.18);
}

.public-news-comment-send:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

/* =========================================
   GİRİŞ UYARISI
========================================= */

.public-news-login-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 15px;
    padding: 15px;

    border:
        1px solid rgba(246, 201, 76, 0.15);

    border-radius: 12px;

    background:
        rgba(246, 201, 76, 0.05);

    color: #c0a85f;
    font-size: 11px;
    font-weight: 700;
}

/* =========================================
   MOBİL
========================================= */

@media (max-width: 640px) {

    .public-news-social-top {
        align-items: stretch;
        flex-direction: column;
    }

    .public-news-like-btn {
        width: 100%;
    }

    .public-news-comment-total {
        justify-content: center;
    }

    .public-news-reaction-buttons {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .public-news-reaction-btn {
        width: 100%;
    }

    .public-news-comment-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .public-news-comment-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .public-news-comment-send {
        width: 100%;
    }
}

.tree-group-title{

    margin:32px 0 18px;

    text-align:center;

    color:#f1c64d;

    font-size:20px;

    font-weight:700;

    letter-spacing:1px;
}

.secondary-btn {
    margin-top: 12px;
    background: #20242b;
    color: #f0c419;
    border: 1px solid rgba(240, 196, 25, 0.45);
}

.secondary-btn:hover {
    background: #292e36;
    border-color: #f0c419;
}

.promotion-history-section {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(240, 196, 25, 0.25);
    border-radius: 14px;
    background: rgba(16, 18, 22, 0.92);
}

.promotion-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.promotion-history-header h2 {
    margin: 0;
    color: #f0c419;
    font-size: 21px;
}

#terfiGecmisiSayisi {
    color: #aeb4bd;
    font-size: 14px;
}

.promotion-history-empty {
    padding: 18px;
    border-radius: 10px;
    text-align: center;
    color: #aeb4bd;
    background: rgba(255, 255, 255, 0.035);
}

.promotion-history-card {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    border-left: 3px solid #f0c419;
}

.promotion-history-card:last-child {
    margin-bottom: 0;
}

.promotion-history-date {
    margin-bottom: 12px;
    color: #9da4ae;
    font-size: 13px;
}

.promotion-history-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    margin-top: 8px;
}

.promotion-history-label {
    color: #f0c419;
    font-weight: 700;
}

.promotion-history-value {
    color: #f1f1f1;
    overflow-wrap: anywhere;
}

.promotion-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.promotion-history-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(240, 196, 25, 0.35);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
    color: #f1f1f1;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.promotion-history-page-btn:hover:not(:disabled) {
    border-color: #f0c419;
    background: rgba(240, 196, 25, 0.12);
    color: #f0c419;
}

.promotion-history-page-btn.active {
    border-color: #f0c419;
    background: #f0c419;
    color: #111318;
}

.promotion-history-page-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.promotion-history-page-btn.active:disabled {
    opacity: 1;
}

.promotion-history-page-arrow {
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 600px) {

    .promotion-history-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .promotion-history-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ========================================
   MAAŞ KONTROL PANELİ
======================================== */

#maas {
    padding: 28px 22px;
}

#maas .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

#maas .left-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#maas .left-side #maasRozet {
    grid-column: 1 / -1;
}

#maas input,
#maas select {
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    padding: 0 16px;

    color: #ffffff;
    background: linear-gradient(
        180deg,
        #242424 0%,
        #1d1d1d 100%
    );

    border: 1px solid #444444;
    border-radius: 10px;

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

    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

#maas input::placeholder {
    color: #929292;
    font-weight: 500;
}

#maas input:focus,
#maas select:focus {
    border-color: #f1c500;
    box-shadow:
        0 0 0 3px rgba(241, 197, 0, 0.12);
    background: #262626;
}

#maas select {
    cursor: pointer;
}

#maas select option {
    color: #ffffff;
    background: #222222;
}

#maas .right-side {
    display: contents;
}

#maas .info-card {
    grid-column: 1 / -1;

    padding: 18px 14px;
    margin: 0;

    background: linear-gradient(
        180deg,
        #191919 0%,
        #151515 100%
    );

    border: 1px solid #404040;
    border-radius: 12px;
}

#maas .info-card h3 {
    margin: 0 0 14px;

    color: #ffd400;
    font-size: 14px;
    font-weight: 800;
}

#maas .time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#maas .time-row > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#maas .time-row input {
    min-height: 52px;
}

#maas .time-row span {
    color: #b8b8b8;
    font-size: 12px;
}

#maas .divider {
    margin: 26px 0 16px;
}

#maas #maasKontrolBtn,
#maas #maasGecmisiBtn {
    min-height: 52px;
    border-radius: 10px;
}

@media (max-width: 760px) {

    #maas .grid,
    #maas .left-side {
        grid-template-columns: 1fr;
    }

    #maas .left-side #maasRozet {
        grid-column: auto;
    }

    #maas .time-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MAAŞ PANELİ SON DÜZEN
======================================== */

#maas .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
    align-items: start;
}

#maas .left-side {
    display: contents;
}

#maas #maasPersonelAdi {
    grid-column: 1;
}

#maas #maasYetkiliAdi {
    grid-column: 2;
}

#maas #maasRozet {
    grid-column: 1;
    margin-top: 0;
}

#maas .right-side {
    display: contents;
}

#maas .right-side .info-card:first-child {
    grid-column: 2;
    grid-row: 2 / span 2;
}

#maas .right-side .info-card:last-child {
    grid-column: 2;
    grid-row: 4 / span 2;
}

#maas .info-card {
    margin: 0;
}

#maas .left-side > *,
#maas .right-side > * {
    min-width: 0;
}

/* Rozet ile süre kartları arasında nefes alanı */
#maas #maasRozet {
    margin-bottom: 14px;
}

/* Alt butonları görünür ve düzenli tut */
#maas .divider {
    clear: both;
    margin-top: 28px;
    margin-bottom: 16px;
}

#maas #maasKontrolBtn,
#maas #maasGecmisiBtn {
    width: 100%;
}

/* Küçük ekran */
@media (max-width: 760px) {

    #maas .grid {
        grid-template-columns: 1fr;
    }

    #maas #maasPersonelAdi,
    #maas #maasYetkiliAdi,
    #maas #maasRozet,
    #maas .right-side .info-card:first-child,
    #maas .right-side .info-card:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    #maas #maasRozet {
        margin-bottom: 4px;
    }
}

/* =========================================
   PUANTAJ PERSONEL LİSTESİ
========================================= */

.puantaj-personel-alani{

    margin-top:35px;

    padding:22px;

    border:1px solid #353535;
    border-radius:16px;

    background:#151515;

}

.puantaj-personel-baslik{

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

    margin-bottom:18px;

}

.puantaj-personel-baslik h2{

    color:#f0c419;
    font-size:23px;
    margin:0;

}

.puantaj-personel-baslik p{

    color:#9d9d9d;
    margin-top:6px;
    font-size:13px;

}

#puantajPersonelSayisi{

    background:#f0c419;
    color:#111;

    padding:8px 14px;

    border-radius:999px;

    font-weight:800;

    font-size:13px;

}

.puantaj-personel-arama{

    margin-bottom:16px;

}

.puantaj-personel-arama input{

    width:100%;

    padding:14px;

    background:#222;

    color:#fff;

    border:1px solid #404040;

    border-radius:10px;

    outline:none;

}

.puantaj-personel-arama input:focus{

    border-color:#f0c419;

    box-shadow:0 0 0 2px rgba(240,196,25,.18);

}

.puantaj-personel-listesi{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

    max-height:420px;

    overflow-y:auto;

    padding-right:5px;

}

.puantaj-personel-satiri{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:14px 16px;

    border:1px solid #3d3d3d;

    border-radius:10px;

    background:#202020;

    cursor:pointer;

    transition:.20s;

}

.puantaj-personel-satiri:hover{

    border-color:#f0c419;

    background:#262626;

    transform:translateY(-2px);

}

.puantaj-personel-adi{

    color:#fff;

    font-weight:700;

}

.puantaj-personel-xp{

    color:#f0c419;

    font-weight:900;

}

.puantaj-personel-bos{

    grid-column:1/-1;

    text-align:center;

    padding:25px;

    border:1px dashed #404040;

    border-radius:10px;

    color:#999;

}

.puantaj-personel-listesi::-webkit-scrollbar{

    width:8px;

}

.puantaj-personel-listesi::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:999px;

}

.puantaj-personel-listesi::-webkit-scrollbar-thumb:hover{

    background:#f0c419;

}

@media(max-width:850px){

    .puantaj-personel-listesi{

        grid-template-columns:1fr;

    }

}

/* =========================================
   PUANTAJ FORM BAŞLIKLARI
========================================= */

.puantaj-form-alani {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.puantaj-form-alani label {
    color: #f0c419;
    font-size: 14px;
    font-weight: 800;
}

.puantaj-form-alani small {
    color: #8f8f8f;
    font-size: 12px;
    line-height: 1.4;
}

/* =========================================
   NET + EKSTRA PUAN BÖLÜNMÜŞ KART
========================================= */

#ekstraXPText.positive {
    color: #36d17c;
}

#ekstraXPText.negative {
    color: #ff5f6d;
}

/* =========================================
   PERSONEL İSİM ÖNERİLERİ
========================================= */

.puantaj-personel-input-alani {
    position: relative;
}

.puantaj-personel-onerileri {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;

    z-index: 100;

    max-height: 285px;
    overflow-y: auto;

    padding: 6px;

    background: #181818;
    border: 1px solid #494949;
    border-radius: 11px;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.55);
}

.puantaj-oneri-satiri {
    width: 100%;

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

    padding: 12px 13px;

    color: #ffffff;
    background: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;
    text-align: left;
}

.puantaj-oneri-satiri:hover {
    background: #292929;
}

.puantaj-oneri-satiri span {
    font-weight: 700;
}

.puantaj-oneri-satiri strong {
    color: #f0c419;
    font-size: 13px;
}

.puantaj-oneri-bos {
    padding: 14px;
    color: #999999;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 650px) {

    .puantaj-ozet .puantaj-bolunmus-kart {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   PUANTAJ ÖZET SON DÜZELTME
========================================= */

#puantaj .puantaj-ozet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 30px 0;
}

#puantaj .puantaj-ozet > div {
    min-width: 0;
    padding: 22px;

    background: #181818;
    border: 1px solid #343434;
    border-radius: 15px;

    text-align: center;
    transition: 0.25s;
}

#puantaj .puantaj-ozet > div:hover {
    border-color: #f0c419;
    transform: translateY(-4px);
}

#puantaj .puantaj-ozet > div > h3 {
    margin-bottom: 12px;

    color: #cfcfcf;
    font-size: 17px;
}

#puantaj .puantaj-ozet > div > span {
    display: block;

    color: #f0c419;
    font-size: 24px;
    font-weight: 800;
}

/* NET + EKSTRA PUAN */

#ekstraXPText.positive {
    color: #36d17c !important;
}

#ekstraXPText.negative {
    color: #ff5f6d !important;
}

@media (max-width: 900px) {

    #puantaj .puantaj-ozet {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PUANTAJ NET + EKSTRA PUAN KARTI
========================================= */

#puantaj .puantaj-ozet > .puantaj-bolunmus-kart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);

    align-items: stretch;

    padding: 0;
    overflow: hidden;

    background: #181818;
    border: 1px solid #343434;
    border-radius: 15px;
}

#puantaj .puantaj-bolunmus-parca {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 20px 18px;

    background: transparent;
    border: none;
    border-radius: 0;

    text-align: center;
}

#puantaj .puantaj-bolunmus-parca:hover {
    transform: none;
    border-color: transparent;
}

#puantaj .puantaj-bolunmus-parca h3 {
    margin: 0 0 10px;

    color: #cfcfcf;
    font-size: 14px;
    white-space: nowrap;
}

#puantaj .puantaj-bolunmus-parca span {
    display: block;

    color: #f0c419;
    font-size: 22px;
    font-weight: 800;
}

#puantaj .puantaj-bolunmus-cizgi {
    width: 1px;
    height: 48px;

    align-self: center;

    background: #f0c419;
    border: none;
    border-radius: 0;

    box-shadow: none;
}

/* Çizgi div'inin kart gibi görünmesini engelle */
#puantaj .puantaj-ozet > .puantaj-bolunmus-kart > .puantaj-bolunmus-cizgi {
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;

    height: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;
    margin: auto 0 !important;

    align-self: center !important;

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

    transform: none !important;
}

/* =========================================
   PUANTAJ PERSONEL YÖNETİMİ
========================================= */

.puantaj-personel-ekleme {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(120px, .7fr)
        minmax(120px, .7fr)
        auto;

    gap: 12px;
    align-items: end;

    margin-bottom: 18px;
}

.puantaj-personel-ekleme-alani {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.puantaj-personel-ekleme-alani label {
    color: #f0c419;
    font-size: 13px;
    font-weight: 800;
}

.puantaj-personel-ekle-btn {
    min-height: 51px;
    padding: 0 18px;

    border: none;
    border-radius: 10px;

    color: #111;
    background: #f0c419;

    font-weight: 900;
    cursor: pointer;
}

.puantaj-personel-listesi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.puantaj-personel-satiri {
    display: grid;
    grid-template-columns:
        minmax(130px, 1.3fr)
        minmax(100px, .8fr)
        minmax(100px, .8fr)
        auto
        auto;

    gap: 10px;
    align-items: end;

    padding: 12px;

    background: #202020;
    border: 1px solid #393939;
    border-radius: 11px;
}

.puantaj-personel-sec-btn {
    min-height: 46px;
    padding: 0 14px;

    color: #fff;
    background: #252525;

    border: 1px solid #414141;
    border-radius: 9px;

    text-align: left;
    cursor: pointer;
}

.puantaj-personel-sec-btn:hover {
    border-color: #f0c419;
}

.puantaj-personel-deger-alani {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.puantaj-personel-deger-alani label {
    color: #a9a9a9;
    font-size: 11px;
    font-weight: 700;
}

.puantaj-personel-deger-alani input {
    width: 100%;
    min-height: 46px;
    padding: 0 10px;

    color: #fff;
    background: #252525;

    border: 1px solid #414141;
    border-radius: 9px;

    text-align: center;
}

.puantaj-personel-kaydet-btn,
.puantaj-personel-sil-btn {
    min-height: 46px;
    padding: 0 15px;

    border: none;
    border-radius: 9px;

    font-weight: 800;
    cursor: pointer;
}

.puantaj-personel-kaydet-btn {
    color: #111;
    background: #f0c419;
}

.puantaj-personel-sil-btn {
    color: #fff;
    background: #c93434;
}

.puantaj-personel-sil-btn:hover {
    background: #e04444;
}

@media (max-width: 900px) {

    .puantaj-personel-ekleme,
    .puantaj-personel-satiri {
        grid-template-columns: 1fr;
    }
}

.puantaj-personel-onerileri {
    max-height: 360px;
    overflow-y: auto;
}

.puantaj-oneri-satiri strong {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.puantaj-oneri-coin {
    color: #36d17c;
    font-size: 12px;
    font-weight: 800;
}

/* =========================================
   YÖNETİM PANELİ - ÜST TEMİZLE BUTONLARI
========================================= */

#panel .panel.tab-content {
    position: relative;
}

.panel-top-clear-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    color: #d6d8de;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.panel-top-clear-btn:hover {
    background: rgba(244, 49, 71, 0.12);
    border-color: rgba(244, 49, 71, 0.32);
    color: #ff6576;
    transform: translateY(-1px);
}

.tt-announcement-btn {
    margin-top: 12px;
    background:
        linear-gradient(
            135deg,
            #22262f,
            #171a21
        );
    border: 1px solid rgba(240, 196, 25, 0.28);
    color: #f0c419;
}

.tt-announcement-btn:hover {
    border-color: rgba(240, 196, 25, 0.55);
}

.tt-announcement-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tt-announcement-status {
    min-height: 18px;
    margin-top: 8px;
    text-align: center;
    color: #aeb3be;
    font-size: 11px;
}

@media (max-width: 700px) {

    .panel-top-clear-btn {
        top: 12px;
        right: 12px;
        min-height: 32px;
        padding: 0 10px;
    }

    .panel-top-clear-btn span {
        display: none;
    }
}


/* =========================================
   PANEL TEMİZLE - PAYBAN / PUANTAJ FIX
   Eski buton ID stillerinden tamamen bağımsız.
========================================= */

#panel #paybanPanelTemizleBtn.panel-top-clear-btn,
#panel #puantajPanelTemizleBtn.panel-top-clear-btn {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.055) !important;
    color: #d6d8de !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    transform: none !important;
    z-index: 30 !important;
}

#panel #paybanPanelTemizleBtn.panel-top-clear-btn:hover,
#panel #puantajPanelTemizleBtn.panel-top-clear-btn:hover {
    background: rgba(244, 49, 71, 0.12) !important;
    border-color: rgba(244, 49, 71, 0.32) !important;
    color: #ff6576 !important;
}

@media (max-width: 700px) {

    #panel #paybanPanelTemizleBtn.panel-top-clear-btn,
    #panel #puantajPanelTemizleBtn.panel-top-clear-btn {
        top: 12px !important;
        right: 12px !important;
        min-width: 82px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
    }
}