.services-title{
    color:#fff;
    font-size:34px;
    font-weight:800;
    margin:0;
    letter-spacing:-1px;
}

.services-subtitle{
    color:rgba(255,255,255,.72);
    margin-top:6px;
    font-size:14px;
}

.service-row{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    transition:.2s ease;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
}

.service-row:hover{
    transform:translateY(-2px);
    border-color:#2563eb;
    box-shadow:0 12px 30px rgba(37,99,235,.10);
}

.service-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.service-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}

.service-name{
    color:#111827;
    font-size:28px;
    font-weight:800;
    margin-bottom:10px;
    line-height:1;
}

.service-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.service-date,
.service-ip{
    color:#6b7280;
    font-size:13px;
    font-weight:600;
}

.service-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.service-status{
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.3px;
}

.status-active{
    background:#dcfce7;
    color:#16a34a;
}

.status-passive{
    background:#fee2e2;
    color:#dc2626;
}

.status-pending{
    background:#fef3c7;
    color:#d97706;
}

.status-suspended{
    background:#ffedd5;
    color:#ea580c;
}

.manage-btn{
    height:44px;
    padding:0 20px;
    border-radius:12px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    font-weight:700;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
    border:none;
}

.manage-btn:hover{
    color:#fff;
    transform:translateY(-1px);
}

.billing-badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.billing-monthly{
    background:#dbeafe;
    color:#2563eb;
}

.billing-quarterly{
    background:#f3e8ff;
    color:#9333ea;
}

.billing-semiannually{
    background:#ffedd5;
    color:#ea580c;
}

.billing-annually{
    background:#dcfce7;
    color:#16a34a;
}

@media(max-width:768px){

    .service-row{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .service-right{
        width:100%;
        justify-content:space-between;
    }

    .manage-btn{
        flex:1;
    }

    .service-name{
        font-size:22px;
    }

}

/* "Adet göster" ve "Ara" metinlerini beyaz yapar */
.dataTables_length label, 
.dataTables_filter label {
    color: #fff !important;
}

/* Seçim kutusunun içindeki yazının rengini korur */
.dataTables_length label select {
    color: #333;
}

/* Satırı esnek (flex) yapar ve elemanların dikeyde hizalanmasını özgür bırakır */
.dataTables_wrapper .row:first-child {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Elemanları en üste yaslar */
}

/* Arama kutusunu (input ve label dahil) komple yukarı kaydırır */
.dataTables_filter {
    margin-top: -8px !important; /* Bu değeri -12px, -15px yaparak daha da yukarı çekebilirsiniz */
    position: relative;
}

/* Sadece input kutusuna ekstra ince ayar gerekirse */
.dataTables_filter input {
    vertical-align: middle;
}