.btn-warning { color: #fff; background: #d75e1a; }
        .btn-warning:hover { color: #fff !important; background-color: #e87a2c; }
        .btn { font-weight: 600; padding: 15px 40px; border: 0; line-height: 1; border-radius: 4px; }
        .page-content { position: relative; padding: 60px 0 5px; }
        .server-wrap { position: relative; }
        .server-header { width: 100%; border-radius: 3px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.09); transition: all 0.2s ease-in-out; background: linear-gradient(to right, #e87a2c, #f59033); }
        .server-header > div { font-weight: 600; color: #fff; width: 12.5%; padding: 20px 10px; display: flex; align-items: center; justify-content: center; text-align: center; }
        .server-header > div.price { text-align: right; justify-content: flex-end; align-items: flex-end; padding-right: 25px; }
        .server-header > div.ram { width: 9%; }
        .server-header > div.name { width: 15%; }
        .server-row {
            position: relative;
            background: #fff;
            border-radius: 3px;
            margin-bottom: 20px;
            padding: 10px;
            font-size: 14px;
            width: 100%;
            box-shadow: 0 0 0 2px #d75e1a6e;
            transition: all 0.2s ease-in-out;
        }
        .server-row .item-feature { width: 100%; display: flex; align-items: center; justify-content: center; }
        .server-row .item-feature > div { position: relative; padding: 0 5px; display: flex; align-items: center; justify-content: center; flex-flow: column; text-align: center; line-height: 1.3; width: 12.5%; }
        .server-row .item-feature > div.name { width: 15%; padding-right: 20px; border-radius: 5px; padding: 0 15px; }
        .server-row .item-feature > div > span.badge { position: relative; margin-bottom: 10px; }
        .server-row .item-feature > div > span.badge:after { position: absolute; content: ""; bottom: -5px; left: 45%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #31a745; }
        .server-row .item-feature > div.name > .product { margin-bottom: 5px; }
        .server-row .item-feature > div.name > .product img { width: 100%; }
        .server-row .item-feature > div.name > .more { font-size: 12px; }
        .server-row .item-feature > div.ram { width: 9%; }
        .server-row .item-feature > div.name > .more a { color: #f59033; }
        .server-row .item-feature > div.name > div { font-weight: bold; }
        .server-row .item-feature > div.price { text-align: right; flex-flow: wrap; align-items: flex-end; padding-right: 15px; font-weight: 700; font-size: 18px; }
        .server-row .item-feature > div.price span > span { display: inline-block; font-size: 80%; }
        .server-row .item-feature > div.order { width: 12.5%; }
        .server-row .item-feature > div.order .btn { 
                padding: 15px 0;
    width: 100%;
    height: 0vh;
    min-width: 0%;
            
        }
        
        /* Geçiş animasyonu için CSS */
        .item-detail {
            border-top: 1px solid #e5e8ed;
            padding: 15px 15px 0;
            margin-top: 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
            display: block; /* Yeni CSS ile display: none yerine block kullandık */
        }
        .item-detail.open {
            max-height: 500px; /* İçeriğe göre ayarlanabilir */
        }

        .server-row .item-detail ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex; /* Flexbox kullan */
            flex-wrap: wrap; /* Sığmazsa alt satıra geç */
            gap: 10px; /* Maddeler arası boşluk */
        }
        .server-row .item-detail ul li {
            position: relative;
            display: flex; /* İçeriği hizalamak için flex kullan */
            align-items: center; /* Dikeyde ortala */
            padding: 5px 0 5px 0; /* Padding'i sıfırla */
            width: calc(33.333% - 10px); /* 3 eşit sütun için hesaplama */
        }
        .server-row .item-detail ul li::before {
            position: static; /* Absolute konumlandırmayı kaldır */ 
            content: "";
            background-size: 16px;
            width: 24px; /* Sabit genişlik ver */
            height: 24px;
            background: url(https://www.lepsor.com/templates/shufytheme/images/check.svg) 0 0 no-repeat;
            margin-right: 8px; /* Metinden ayır */
            flex-shrink: 0; /* Küçülmesini engelle */
        }
        
        @media only screen and (max-width: 767px) {
            .server-header { display: none; }
            .server-row .item-feature { flex-flow: wrap; }
            .server-row .item-feature > div.name { width: 100%; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e5e8ed; }
            .server-row .item-feature > div.core, .server-row .item-feature > div.ram, .server-row .item-feature > div.disk, .server-row .item-feature > div.traffic, .server-row .item-feature > div.panel { width: 100%; padding: 5px 0; }
            .server-row .item-feature > div.price { width: 50%; height: 50px; padding-top: 10px; padding-bottom: 8px; margin-top: 10px; border-top: 1px solid #e5e8ed; }
            .server-row .item-feature > div.order { width: 50%; height: 50px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #e5e8ed; }
            .server-row .item-feature > div.order .btn { padding: 10px 0; }
            
            /* Mobil için yeni listeleme */
            .server-row .item-detail ul { flex-direction: column; gap: 0; }
            .server-row .item-detail ul li { width: 100%; }
            .heading { margin-bottom: 20px !important; }
            .heading > .heading-title > span:after, .heading > .heading-title > span:before { display: none; }
            .page-content { padding: 30px 0; }
            .heading > .heading-title { font-size: 24px; }
            
            
            .server-row {
            padding: 30px;
        }
        }
        
        
        
        
        
        
        /*! CSS Used from: https://upcell.com.tr/assets/css/pages/vps-server.css */
        .server-row .item-detail ul li { width: 25%; }
        .server-row .item-feature > div { font-size: 15px; }
        .server-row .item-feature > div > span.badge { font-size: 11px; }
        .server-row .item-feature > div.name .name { font-size: 16px; font-weight: 600; }
        .server-row .item-feature > div.name > .product img { width: 45%; margin: 3px 0; }
        .server-row .item-feature > div.price { font-size: 18px; }
        .server-row .item-feature > div.price .old { display: inline-block; font-size: 80%; opacity: 0.6; }
        .server-row .item-feature > div.price .old > span { position: relative; }
        .server-row .item-feature > div.price .old > span:after { display: block; content: ""; position: absolute; height: 1px; width: 100%; right: 0%; top: 10px; background: #f00; transform: rotate(-10deg); }

        @media only screen and (max-width: 767px) {
            .server-row .item-detail ul li { width: 100%; }
            .server-row .item-feature > div.price .old { margin-right: 2px; }
        }