.dashboard {

    padding:40px;

}


.dashboard h1 {

    text-align:center;
    margin-bottom:40px;

}


.dashboard-grid{

    display:grid;

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

    gap:20px;

    width:100%;

}


.dashboard-card{

    padding:15px;

    border-radius:14px;

    min-height:120px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}


.dashboard-card:hover {

    transform:translateY(-5px);

}


.dashboard-card i{

    font-size:24px;

    margin-bottom:8px;

}



.dashboard-card h3{

    font-size:14px;

    margin:5px 0;

}



.dashboard-card h2{

    font-size:24px;

    margin:5px 0 0 0;

}

@media(max-width:600px){

    .dashboard{

        padding:15px;

    }


    .dashboard h1{

        font-size:24px;

        margin-bottom:25px;

    }


    .dashboard-grid{

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

        gap:12px;

    }


    .dashboard-card{

        padding:12px;

        min-height:100px;

    }


    .dashboard-card i{

        font-size:20px;

        margin-bottom:5px;

    }


    .dashboard-card h3{

        font-size:12px;

        text-align:center;

    }


    .dashboard-card h2{

        font-size:20px;

    }

}


.admin-section{

    background:#fff;

    max-width:1800px;
    width:100%;

    margin:30px auto;

    padding:25px;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    box-sizing:border-box;

}



.admin-section h2 {

    margin-bottom:20px;

}


#latestTests,
#messages {

    padding:20px;

    background:#f7f7f7;

    border-radius:15px;

}


 @media (max-width:768px){

    .admin-section{
        width:100%;
        max-width:100%;
        margin:20px auto;
        padding:18px;
        box-sizing:border-box;
    }

    .admin-table{
        width:100%;
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }



    .admin-table th,
    .admin-table td{

        padding:10px;

        font-size:13px;

    }


    #latestTests,
    #messages{

        padding:15px;

        border-radius:12px;

    }


}

/* Premium yönetim butonları */

.user-action-btn,
button[onclick="makePremium"],
button[onclick="removePremium"] {

    padding: 6px 12px;

    font-size: 13px;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    margin-top: 8px;

    width: auto;

    display: inline-block;

}

.user-action-btn{

    padding: 6px 14px;

    font-size: 13px;

    border-radius: 20px;

    border:none;

    cursor:pointer;

    margin-top:8px;

    white-space:nowrap;

}


.premium-btn{

    background:#FFD54F;

    color:#7a4f00;

}


.remove-btn{

    background:#ffdddd;

    color:#b00020;

}


.user-action-btn:hover{

    transform:scale(1.05);

}


.membership-area{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}


.user-action-btn{

    padding:5px 12px;

    font-size:12px;

    border-radius:15px;

    border:none;

    cursor:pointer;

    white-space:nowrap;

}

.view-user-btn{

    padding:6px 12px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    background:#e3f2fd;

    color:#1565c0;

    font-size:13px;

}

.admin-table td {
    vertical-align: middle;
}


.view-user-btn,
.user-action-btn {

    vertical-align: middle;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 30px;

}

.admin-table td:last-child {

    text-align: center;

    vertical-align: middle;

}

.admin-table td {
    height: 55px;
    vertical-align: middle !important;
}


.view-user-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 5px 12px;

    height: 30px;

    line-height: 1;

}

.admin-table {

    width:100%;

    table-layout: auto;

}


.admin-table th:nth-child(1),
.admin-table td:nth-child(1){

    width:20%;

}


.admin-table th:nth-child(2),
.admin-table td:nth-child(2){

    width:30%;

}


.admin-table th:nth-child(3),
.admin-table td:nth-child(3){

    width:20%;

}


.admin-table th:nth-child(4),
.admin-table td:nth-child(4){

    
    width:20%;

}


.admin-table th:nth-child(5),
.admin-table td:nth-child(5){

    width:10%;

}

.admin-table th,
.admin-table td {

    text-align:center;

    vertical-align:middle;

}

.users-table-wrapper{

    max-height:295px;
    overflow-y:auto;
    overflow-x:auto;

    border-radius:16px;

}

.admin-table thead th{

    position:sticky;
    top:0;

    background:#fff;

    z-index:10;

}

.users-table-wrapper::-webkit-scrollbar{

    width:7px;
    height:7px;

}

.users-table-wrapper::-webkit-scrollbar-thumb{

    background:#cbd5e1;
    border-radius:20px;

}

.users-table-wrapper::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

@media(max-width:600px){

    .user-action-btn,
    .view-user-btn{

        font-size:11px;

        padding:5px 10px;

        height:28px;

        border-radius:12px;

    }


    .membership-area{

        gap:5px;

        flex-direction:column;

    }


    .admin-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }


    .admin-table th,
    .admin-table td{

        font-size:12px;

        padding:8px;

    }


    .admin-table td{

        height:45px;

    }


    .admin-table th:nth-child(1),
    .admin-table td:nth-child(1){

        width:auto;

    }


    .admin-table th:nth-child(2),
    .admin-table td:nth-child(2){

        width:auto;

    }


    .admin-table th:nth-child(3),
    .admin-table td:nth-child(3){

        width:auto;

    }


    .admin-table th:nth-child(4),
    .admin-table td:nth-child(4){

        width:auto;

    }


    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5){

        width:auto;

    }

    @media (max-width:768px){

    .users-table-wrapper{

        max-height:270px;   /* Yaklaşık 3 kullanıcı */
        overflow-y:auto;
        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

}

.users-table-wrapper::-webkit-scrollbar{
        width:6px;
    }

.users-table-wrapper::-webkit-scrollbar-thumb{
        background:#cbd5e1;
        border-radius:20px;
    }

.users-table-wrapper::-webkit-scrollbar-track{
        background:transparent;
    }

    .admin-table thead th{
    position:sticky;
    top:0;
    background:#fff;
    z-index:10;
}


}

.view-user-btn {

    padding:5px 10px;

    font-size:12px;

    white-space:nowrap;

}

.delete-user-btn{

    background:#ef4444;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.delete-user-btn:hover{

    background:#dc2626;

}

.user-profile-card{

    max-width:700px;

    margin:40px auto;

    background:#fff;

    border-radius:20px;

    padding:35px;

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

}

@media(max-width:600px){

    .view-user-btn{

        padding:5px 8px;

        font-size:11px;

    }


    .delete-user-btn{

        padding:8px 14px;

        font-size:12px;

        border-radius:10px;

    }


    .user-profile-card{

        width:auto;

        margin:20px 15px;

        padding:20px;

        border-radius:15px;

    }

}

.profile-header{

    text-align:center;

    margin-bottom:30px;

}

.profile-avatar{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#eef3ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    margin-bottom:15px;

}

.profile-header h1{

    margin:0;

    font-size:28px;

}

.profile-header p{

    color:#777;

    margin-top:8px;

}

.info-row{

    display:grid;

    grid-template-columns:280px 180px;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:15px 0;

    border-bottom:1px solid #ececec;

}

.info-row span{

    font-weight:600;

    color:#666;

    text-align:left;

}

.info-row strong{

    color:#222;

    text-align:left;

}

.profile-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:35px;

}

.action-right{

    display:flex;

    gap:12px;

}


.back-btn,
.delete-user-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    height:38px;

    padding:0 16px;

    border:none;

    border-radius:20px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:all .25s ease;

}


.back-btn{

    background:#f3f4f6;

    color:#444;

    border:none;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.back-btn:hover{

    background:#e5e7eb;

}


.delete-user-btn{

    background:#fee2e2;

    color:#dc2626;

}

.delete-user-btn:hover{

    background:#fecaca;

    transform:translateY(-2px);

}

@media(max-width:600px){

    .profile-header{

        margin-bottom:20px;

    }


    .profile-avatar{

        width:70px;

        height:70px;

        font-size:32px;

        margin-bottom:10px;

    }


    .profile-header h1{

        font-size:22px;

    }


    .profile-header p{

        font-size:14px;

    }


    .info-row{

        grid-template-columns:1fr;

        gap:8px;

        padding:12px 0;

        text-align:center;

    }


    .info-row span,
    .info-row strong{

        text-align:center;

        font-size:14px;

    }


    .profile-actions{

        flex-direction:column;

        gap:15px;

        margin-top:25px;

    }


    .action-right{

        width:100%;

        justify-content:center;

        gap:8px;

    }


    .back-btn,
    .delete-user-btn{

        height:34px;

        padding:0 14px;

        font-size:12px;

        border-radius:16px;

    }

}

#messages{

    display:grid;

    grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));

    column-gap:30px;

    row-gap:15px;

}


.modal{

    display:none;

    position:fixed;

    inset:0;

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

    justify-content:center;

    align-items:center;

    z-index:999;

}

.modal-content{

    width:500px;

    background:white;

    border-radius:18px;

    padding:25px;

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

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.modal-header h2{

    margin:0;

}

#closeModal{

    font-size:28px;

    cursor:pointer;

}

#replyText{

    width:100%;

    height:180px;

    resize:none;

    border:1px solid #ddd;

    border-radius:12px;

    padding:15px;

    font-size:15px;

    outline:none;

    box-sizing:border-box;

}

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:20px;

}

.cancel-btn,
.send-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:110px;

    height:42px;

    border:none;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}

.cancel-btn{

    background:#f3f4f6;

    color:#555;

}

.cancel-btn:hover{

    background:#e5e7eb;

    transform:translateY(-2px);

}

.send-btn{

    background:#2563eb;

    color:#fff;

}

.send-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

.reply-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.reply-btn:hover{

    background:#1d4ed8;

}

@media(max-width:600px){

    .modal{

        padding:15px;

    }


    .modal-content{

        width:100%;

        max-width:350px;

        padding:18px;

        border-radius:15px;

    }


    .modal-header{

        margin-bottom:15px;

    }


    .modal-header h2{

        font-size:18px;

    }


    #closeModal{

        font-size:24px;

    }


    #replyText{

        height:140px;

        padding:12px;

        font-size:13px;

    }


    .modal-buttons{

        flex-direction:column;

        gap:10px;

        margin-top:15px;

    }


    .cancel-btn,
    .send-btn{

        width:100%;

        min-width:auto;

        height:38px;

        font-size:13px;

        border-radius:10px;

    }


    .reply-btn{

        padding:8px 14px;

        font-size:12px;

        border-radius:10px;

    }

}


@media(max-width:600px){

    .modal{

        padding:15px;

    }


    .modal-content{

        width:100%;

        max-width:350px;

        padding:18px;

        border-radius:15px;

    }


    .modal-header{

        margin-bottom:15px;

    }


    .modal-header h2{

        font-size:18px;

    }


    #closeModal{

        font-size:24px;

    }


    #replyText{

        height:140px;

        padding:12px;

        font-size:13px;

    }


    .modal-buttons{

        flex-direction:column;

        gap:10px;

        margin-top:15px;

    }


    .cancel-btn,
    .send-btn{

        width:100%;

        min-width:auto;

        height:38px;

        font-size:13px;

        border-radius:10px;

    }


    .reply-btn{

        padding:8px 14px;

        font-size:12px;

        border-radius:10px;

    }

}


@media(max-width:380px){

    .modal-content{

        padding:15px;

        border-radius:12px;

    }


    .modal-header h2{

        font-size:16px;

    }


    #replyText{

        height:120px;

        font-size:12px;

    }


    .cancel-btn,
    .send-btn{

        height:36px;

        font-size:12px;

    }

}

.profile-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    background:#2563eb;
    display:flex;
    justify-content:center;
    align-items:center;
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none; /* Başlangıçta gizli */
}

#profileInitial{
    color:#fff;
    font-size:38px;
    font-weight:700;
}

/* ===============================
   PROFILE AVATAR MOBILE
================================ */

@media (max-width:768px){

    .profile-avatar{

        width:80px;
        height:80px;

    }

    #profileInitial{

        font-size:32px;

    }

}


@media (max-width:480px){

    .profile-avatar{

        width:70px;
        height:70px;

    }

    #profileInitial{

        font-size:28px;

    }

}

/* ======================================
   MODERN DASHBOARD CARDS
======================================*/

.dashboard-grid{

    display:grid;

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

    gap:22px;

    margin-top:35px;

}


.dashboard-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    padding:28px 20px;

    text-align:center;

    color:white;

    transition:.35s ease;

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

}


.dashboard-card::before{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

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

    right:-70px;

    top:-70px;

}


.dashboard-card:hover{

    transform:translateY(-8px);

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

}


.dashboard-card h2{

    font-size:42px;

    font-weight:800;

    margin:0;

    color:#fff !important;

    text-shadow:0 2px 8px rgba(0,0,0,.15);

}

.dashboard-card h3{

    font-size:17px;

    margin-bottom:15px;

    font-weight:600;

    color:#fff;

}

.dashboard-card i{

    font-size:34px;

    margin-bottom:18px;

    color:#fff;

}

/* Total Users */

.dashboard-card.users{

    background:linear-gradient(135deg,#3b82f6,#2563eb);

}


/* Free */

.dashboard-card.free{

    background:linear-gradient(135deg,#34d399,#059669);

}


/* Premium */

.dashboard-card.premium{

    background:linear-gradient(135deg,#fde68a,#f59e0b);

}


/* Login */

.dashboard-card.login{

    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

}


/* Message */

.dashboard-card.message{

    background:linear-gradient(135deg,#fb7185,#e11d48);

}

/* ======================================
   ADMIN DASHBOARD RESPONSIVE
====================================== */

@media (max-width:1200px){

    .dashboard-grid{

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

        gap:18px;

    }

}


@media (max-width:768px){

    .dashboard{

        padding:20px;

    }

    .dashboard-grid{

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

        gap:16px;

    }

    .dashboard-card{

        padding:22px 15px;

        border-radius:18px;

    }

    .dashboard-card i{

        font-size:28px;

        margin-bottom:14px;

    }

    .dashboard-card h3{

        font-size:15px;

        margin-bottom:10px;

    }

    .dashboard-card h2{

        font-size:34px;

    }

}


@media (max-width:500px){

    .dashboard-grid{

        grid-template-columns:1fr;

        gap:15px;

    }

    .dashboard-card{

        padding:20px;

    }

    .dashboard-card i{

        font-size:26px;

    }

    .dashboard-card h3{

        font-size:15px;

    }

    .dashboard-card h2{

        font-size:30px;

    }

    .dashboard-card::before{

        width:120px;

        height:120px;

        right:-45px;

        top:-45px;

    }

}

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

.dashboard-header{

    background:#fff;

    border-radius:22px;

    padding:25px 30px;

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

    margin-bottom:35px;

}


.dashboard-header h1{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#1e293b;

}


.dashboard-header p{

    margin-top:8px;

    font-size:15px;

    color:#64748b;

}

/* ======================================
   DASHBOARD HEADER RESPONSIVE
====================================== */

@media (max-width:768px){

    .dashboard-header{

        padding:20px;

        border-radius:18px;

        margin-bottom:25px;

        text-align:center;

    }

    .dashboard-header h1{

        font-size:28px;

        line-height:1.3;

    }

    .dashboard-header p{

        font-size:14px;

        margin-top:6px;

    }

}


@media (max-width:480px){

    .dashboard-header{

        padding:16px;

        border-radius:16px;

    }

    .dashboard-header h1{

        font-size:24px;

    }

    .dashboard-header p{

        font-size:13px;

    }

}

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

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.section-header h2{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#1e293b;

}

.section-header p{

    margin-top:6px;

    font-size:15px;

    color:#64748b;

}

.user-search{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}

.user-search input{

    width:200px;

    padding:10px 15px;

    border:none;

    border-radius:14px;

    background:#f8fafc;

    font-size:15px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.user-search input:focus{

    outline:none;

    background:#fff;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

/* Sütun genişlikleri */

.admin-table{

    width:100%;

    table-layout:fixed;

}

.admin-table th,
.admin-table td{

    text-align:center;
    vertical-align:middle;

}

/* Name */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1){

    width:18%;

}

/* Email */
.admin-table th:nth-child(2),
.admin-table td:nth-child(2){

    width:28%;

}

/* Role */
.admin-table th:nth-child(3),
.admin-table td:nth-child(3){

    width:12%;

}

/* Membership */
.admin-table th:nth-child(4),
.admin-table td:nth-child(4){

    width:18%;

}

/* Joined */
.admin-table th:nth-child(5),
.admin-table td:nth-child(5){

    width:14%;

}

/* Action */
.admin-table th:nth-child(6),
.admin-table td:nth-child(6){

    width:10%;

}

.admin-table td{

    padding:18px 16px;

}

.section-title{

    text-align:center;

    margin-bottom:25px;

}

.section-title h2{

    font-size:38px;

    font-weight:800;

    margin:0;

    color:#1e293b;

}

.section-title p{

    margin-top:8px;

    color:#64748b;

    font-size:15px;

}

/* ======================================
   ADMIN USERS RESPONSIVE
====================================== */

@media (max-width:768px){

    .section-header{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .section-title{

        margin-bottom:18px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:14px;

    }

    @media (max-width:768px){

    .user-search{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .user-search input{
        width:100%;
        max-width:none;
        padding:12px 16px;
        font-size:14px;
        box-sizing:border-box;
    }

}

    .admin-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .admin-table th,
    .admin-table td{

        padding:14px 12px;

        font-size:14px;

    }

}


@media (max-width:480px){

    .section-title h2{

        font-size:26px;

    }

    .section-title p{

        font-size:13px;

    }

    .user-search input{

        max-width:100%;

        padding:11px 14px;

        font-size:13px;

    }

    .admin-table th,
    .admin-table td{

        padding:12px 10px;

        font-size:13px;

    }

}

/* ======================================
   ROLE & MEMBERSHIP BADGES
====================================== */

.badge{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}

/* USER */

.badge-user{

    background:#dcfce7;

    color:#15803d;

}

/* ADMIN */

.badge-admin{

    background:#fef3c7;

    color:#b45309;

}

/* FREE */

.badge-free{

    background:#dcfce7;

    color:#15803d;

}

/* PREMIUM */

.badge-premium{

    background:#fef3c7;

    color:#b45309;

}

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

@media (max-width:768px){

    .badge{

        min-width:75px;

        padding:6px 12px;

        font-size:12px;

    }

}


@media (max-width:480px){

    .badge{

        min-width:65px;

        padding:5px 10px;

        font-size:11px;

        border-radius:999px;

    }

}

/* ======================================
   MODERN ACTION ICONS
====================================== */

.action-icon{

    width:30px;
    height:30px;

    display:flex;

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

    border:none;
    background:transparent;

    cursor:pointer;

    border-radius:8px;

    transition:.25s;

    flex-shrink:0;

}

.upgrade-icon{

    color:#16a34a;

}

.remove-icon{

    color:#dc2626;

}

.action-icon:hover{

    background:#f1f5f9;

    transform:scale(1.15);

}

/* Hover Background */

.upgrade-icon:hover{

    background:#dcfce7;

}

.remove-icon:hover{

    background:#fee2e2;

}

/* ======================================
   ACTION ICONS RESPONSIVE
====================================== */

@media (max-width:768px){

    .action-icon{

        width:28px;
        height:28px;

        font-size:13px;

        border-radius:7px;

    }

}


@media (max-width:480px){

    .action-icon{

        width:26px;
        height:26px;

        font-size:12px;

        border-radius:6px;

    }

    .action-icon:hover{

        transform:scale(1.08);

    }

}

.membership-actions{

    margin-top:35px;

    background:#fff;

    border-radius:22px;

    padding:28px;

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

}

.membership-actions h3{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:22px;

    margin-bottom:22px;

    color:#1e293b;

}

.success-btn,
.danger-btn{

    width:100%;

    padding:16px 20px;

    border:none;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    color:#fff;

}

.success-btn{

    background:linear-gradient(135deg,#16a34a,#22c55e);

    box-shadow:0 10px 25px rgba(34,197,94,.30);

}

.success-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(34,197,94,.40);

}

.danger-btn{

    background:linear-gradient(135deg,#dc2626,#ef4444);

    box-shadow:0 10px 25px rgba(239,68,68,.30);

}

.danger-btn:hover{

    transform:translateY(-4px);

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

}

/* ===========================
   MEMBERSHIP ACTIONS MOBILE
=========================== */

@media (max-width:768px){

    .membership-actions{

        margin-top:25px;
        padding:20px;
        border-radius:18px;

    }

    .membership-actions h3{

        font-size:19px;
        margin-bottom:18px;
        gap:8px;
        flex-wrap:wrap;

    }

    .success-btn,
    .danger-btn{

        padding:15px;
        font-size:15px;
        border-radius:14px;

    }

}

@media (max-width:480px){

    .membership-actions{

        padding:16px;

    }

    .membership-actions h3{

        font-size:17px;
        justify-content:center;
        text-align:center;
        line-height:1.4;

    }

    .success-btn,
    .danger-btn{

        font-size:14px;
        padding:14px 12px;
        gap:8px;

    }

}

.messages-toolbar{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:10px;

} 

.messages-toolbar h2{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:26px;

    font-weight:800;

    color:#222;

    letter-spacing:-0.5px;

    margin:0;

}

.messages-toolbar h2 i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #6c63ff,
        #8b85ff
    );

    color:white;

    font-size:18px;

    box-shadow:
    0 6px 15px rgba(108,99,255,0.25);

}

.message-item{

    padding:20px;

    cursor:pointer;

    transition:.3s;

    border-bottom:1px solid #edf2f7;

}

.message-item:hover{

    background:#f8fafc;

}

.message-item.active{

    background:#eff6ff;

    border-left:5px solid #2563eb;

}

.message-name{

    font-weight:700;

    color:#1e293b;

    margin-bottom:8px;

}

.message-email{

    color:#64748b;

    font-size:14px;

}


/* ==========================================
   CONTACT MESSAGES RESPONSIVE
========================================== */


@media(max-width:900px){


    .messages-panel{

        grid-template-columns:1fr;

        gap:20px;

    }

}


@media(max-width:600px){


    .messages-toolbar{

        padding:20px;

    }


    .messages-toolbar h2{

        font-size:22px;

    }


    .message-name{

        font-size:15px;

    }


    .message-email{

        font-size:13px;

    }


    .message-preview{

        padding:15px;

    }


}

.messages-panel{
    margin:40px auto 0;
    width:100%;
    max-width:1800px;

    display:grid;
    gap:25px;
    align-items:start;
}

.messages-list,
.message-preview{

    background:#fff;

    border-radius:22px;

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

    overflow:hidden;

}

#messageList{

    min-height:0;

}

/* =====================================
   CONTACT PANEL RESPONSIVE
===================================== */


@media(max-width:900px){


    .messages-panel{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:25px;

    }

}


@media(max-width:600px){


    .messages-panel{

        margin-top:20px;

    }



    .messages-list,
    .message-preview{

        border-radius:18px;

    }



    .search-area{

        flex-direction:column;

        padding:0 15px 20px;

        gap:10px;

    }



    .user-search{

        width:100%;

        padding:0 15px;

    }



    .user-search input{

        max-width:100%;

        padding:11px 14px;

        font-size:13px;

    }

}

/* LEFT HEADER */

.messages-toolbar{

    padding:25px;

    border-bottom:1px solid #eef2f7;

}


.messages-toolbar h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    font-size:30px;

    color:#1e293b;

}


.message-count{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:110px;

    height:38px;

    padding:0 18px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        #6c63ff,
        #8b85ff
    );

    color:white;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:
    0 6px 15px rgba(108,99,255,0.25);

    transition:.3s ease;

}

.message-count:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(108,99,255,0.35);

}


/* =====================================
   CONTACT HEADER MOBILE RESPONSIVE
===================================== */


@media(max-width:600px){


   .messages-toolbar{
        display:flex;
        flex-direction:column;
        gap:12px;
    }


    .messages-toolbar h2{

        font-size:22px;

    }



    .message-count{

        font-size:13px;

    }


}


@media(max-width:400px){


    .messages-toolbar h2{

        font-size:18px;

    }

    .user-search{

        margin:12px;
        margin-bottom:18px;

    }

}

/* EMPTY */

.empty-preview{

    min-height:420px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#64748b;

}


.empty-preview i{

    font-size:55px;

    margin-bottom:15px;

    color:#cbd5e1;

}


.empty-preview h3{

    margin-bottom:5px;

    color:#334155;

}

/* =====================================
   EMPTY PREVIEW RESPONSIVE
===================================== */


@media(max-width:600px){


    .empty-preview{

        min-height:300px;

        padding:20px;

        text-align:center;

    }


    .empty-preview i{

        font-size:45px;

        margin-bottom:12px;

    }


    .empty-preview h3{

        font-size:18px;

        margin-bottom:8px;

    }


    .empty-preview p{

        font-size:14px;

    }


}



@media(max-width:400px){


    .empty-preview{

        min-height:250px;

    }


    .empty-preview i{

        font-size:38px;

    }


    .empty-preview h3{

        font-size:16px;

    }


    .empty-preview p{

        font-size:13px;

    }


}

/* =====================================
   MESSAGE CARDS
===================================== */

.message-card{

    margin:0;

    width:100%;
    box-sizing:border-box;

    padding:20px;

    border-radius:20px;

    background:#ffffff;

    border:1px solid #eef2f7;

    box-shadow:0 4px 12px rgba(15,23,42,.06);

    display:flex;

    flex-direction:column;

    gap:10px;

    cursor:pointer;

    transition:.25s ease;

    overflow:hidden;

}

.message-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(15,23,42,.12);

    border-color:#dbeafe;

}

.message-card.active{

    background:#eff6ff;

    border-left:5px solid #2563eb;

    box-shadow:0 10px 25px rgba(37,99,235,.12);

}

.message-header{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

    overflow:hidden;

}



.message-user{

    display:flex;

    align-items:center;

    gap:15px;

}



.message-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

}



.message-user h3{

    margin:0 0 5px;

    font-size:17px;

    color:#172554;

}



.message-user small{

    color:#64748b;

}



.message-status{

    flex-shrink:0;

    padding:4px 10px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    display:inline-flex;

    align-items:center;

    height:24px;

}



.message-details{

    margin-left:0px;

    display:flex;

    flex-direction:column;

    gap:6px;

}



.message-subject{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#334155;

}


.message-date{

    color:#64748b;

    font-size:11px;

}

#messageList {
    display: grid;
    grid-template-columns: repeat(4, 380px);
    gap: 15px;

    justify-content: center;

    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 8px;
    padding-bottom: 20px; /* Alt boşluk */
}

#messageList::-webkit-scrollbar{
    width:8px;
}

#messageList::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

#messageList::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/* =====================================
   MESSAGE CARDS RESPONSIVE
===================================== */

@media (max-width:768px){

    #messageList{

        display:grid;

        grid-template-columns:1fr;

        grid-auto-rows:max-content;

        gap:12px;

        height:320px;

        overflow-y:auto;
        overflow-x:hidden;

        padding:0 10px;

    }


    .message-card{

        min-height:150px;

    }


    #messageList::-webkit-scrollbar{
        width:6px;
    }

    #messageList::-webkit-scrollbar-thumb{
        background:#cbd5e1;
        border-radius:20px;
    }

    #messageList::-webkit-scrollbar-track{
        background:transparent;
    }

}

    .message-card{

        width:100%;
        margin:0;
        padding:18px;
        border-radius:16px;
        gap:12px;

    }

    .message-header{

        gap:8px;
        align-items:flex-start;

    }

    .message-user{

        gap:12px;
        min-width:0;

    }

    .message-avatar{

        width:50px;
        height:50px;
        font-size:18px;

    }

    .message-user h3{

        font-size:15px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;

    }

    .message-user small{

        display:block;
        max-width:180px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;

    }

    .message-status{

        font-size:10px;
        padding:3px 8px;
        height:22px;

    }

    .message-subject{

        font-size:14px;

    }

    .message-date{

        font-size:10px;

    }