.ero-btn1 {
    padding: 8px 12px;
    color: #fff;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    text-align: center;
    line-height: 20px;
    transition: 0.3s;
    border: 0;
    cursor: pointer;
}

.ero-btn1:hover {
    color: #fff;
}

.bg-blue{background:#3498db}.bg-blue:hover{background:#2980b9}
.bg-blue2{background:#576ba5}.bg-blue2:hover{background:#263b78}
.bg-green{background:#2ecc71}.bg-green:hover{background:#27ae60}
.bg-orange{background:#e67e22}.bg-orange:hover{background:#ca6f1e}
.bg-gray{background:#716d6d}.bg-gray:hover{background:#555}
.bg-purple{background:#db34c9}.bg-purple:hover{background:#a32a96}
.bg-red{background:#e74c3c}.bg-red:hover{background:#c0392b}

    
    .loginform label {
        color: #1a2d62;
        font-weight: bold;
    }

    .loginform input {
        border: none !important;
        border-bottom: 3px solid #2eca7f !important;
    }

    .loginform #togglePassword {
        border: none;
        background-color: white; 
        border-bottom: 3px solid #2eca7f !important;
    }


/* general */
    .card-container {
        position: relative;
    }
    .cardd {
        width: 100%;
        height: 300px; /* Kartın yüksekliği eklendi */
        margin: 10px auto;
        border-radius: 10px;
        position: relative;
    }

    .cardd-front {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;

        border-radius: 10px;
        border: 1px solid #2eca7f;
        border-bottom-width: 10px;
        border-right-width: 10px;
    }

    .cardd .title {
        font-size: 22px;
        border-bottom: 1px solid;
        padding-bottom: 10px;
        margin-block: 10px;
    }
    .cardd .price {
        font-size: 30px;
        margin-top: 15px;
    }
    .cardd .button {
        margin-bottom: 10px;
        border: 1px solid black;
        box-shadow: 2px 2px 5px black;
        line-height: 40px;
    }
    .cardd .button-1 {
        width: 100%;
    }
    .cardd .button-2, .cardd .button-3 { /* Düzeltildi: .card yerine .cardd */
        width: 49%;
    }

    .cardd .creatingTime {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20px;
        color: #1a2d62;
    }
    .cardd .icon {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .offer-container {
        position: absolute;
        right: 30px;
        bottom: 75px;
        width: 200px;
        height: auto;
        background: #f1f1f1;
        transition: right 0.3s;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .offer-container.open {
        right: 0;
    }

    .offer-container input {
        width: calc(100% - 20px);
        margin-bottom: 10px;
    }

    .offer-container button {
        width: 100%;
    }



/* add-request.php css kodları */

    .option-row {
        margin-bottom: 8px;
    }

    .option-input {
        margin-bottom: 8px;
    }

    .sub-option-row {
        margin-top: 10px;
        transition: 0.3s ease;
    }

    .option-box {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 3px 8px;
        text-align: center;
        font-family: tahoma;
        font-size: 14px;
        color: black;   
        background-color: transparent;
        cursor: pointer;
        -webkit-user-select: none; /* Safari ve Chrome */

        min-width: 4rem;
        border-radius: 7px;
    }

    .option-box:hover {
         border: 1px solid #2eca7f;
         transition: 0.2s;
    }

    .option-box[disabled] {
        background-color: gray;
        color: white;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .option-box[disabled]:hover {
        background-color: gray;
        color: white;
    }


    .selected {
        border: 1px solid #2eca7f;
        color: #2eca7f;
    }

    .softbox {
         border: 1px solid #dbdbdb;
         padding: 10px;
    }

    .hidden {
        margin-top: -8px; /* sub-option-row da verdiğimiz margin sadece alan açıkken gözüksün diye 0px yaptık */
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: .5s ease;
    }

    .sub-option-row:not(.hidden) {
        opacity: 1;
        max-height: 3000px; /* Yeterince büyük bir değer */
    }

    .option-row b {
        width: 250px;
        display: inline-block;
        color: black;
    }

    .option-row b span {
        float: right;
        margin-right: 10px;
        margin-top: 5px;
        background-color: lightgray;
    }




/* add request in içindeki fiyat hesaplama tasarım kodları  */

    .checkout-summary {
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .checkout-summary ul li {
        padding: 8px 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .checkout-summary ul li:last-child {
        border-bottom: none;
    }

    .checkout-summary .btn-success:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .checkout-summary hr {
        border: 1px solid #e0e0e0;
        margin: 15px 0;
    }




/* panel-request-detail.php styles */
    .progress-container {
        text-align: center;
        margin: 20px 0;
    }

    .step {
        display: inline-block;
        margin: 0 10px;
        text-align: center;
        position: relative;
        margin-right: 30px;
    }

    .step i {
        font-size: 24px;
        color: #000;
        display: block;
        margin-bottom: 5px;
    }

    .step p {
        font-size: 14px;
        color: #000;
    }

    .step.completed i,
    .step.completed p {
        color: green;
    }

    .step.active i,
    .step.active p {
        color: orange;
    }

    .step:first-child::before {
        content: none;
    }

    .step.completed::before {
        background-color: green;
    }

    .step.active::before {
        background-color: orange;
    }

    .arrow {
        position: absolute; right: -30px; top: 10px;
    }





/*  sepet sayfası özellikleri */

       .cart {
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 20px;
            margin-top: 20px;
        }

        .cart-item-title {
            font-size: 16px;
        }

        .cart-item-price {
            font-size: 18px;
            color: #333;
        }
        .cart-total h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }
        .cart-total p {
            font-size: 18px;
            color: #555;
        }
        .checkout-btn {
            display: block;
            width: 100%;
            padding: 15px;
            text-align: center;
            background-color: #27ae60;
            color: #fff;
            text-transform: uppercase;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 20px;
            text-decoration: none;
        }
        .checkout-btn:hover {
            background-color: #2ecc71;
        }

.istiyorum_box_div {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    column-gap: 10px; /* Elemanlar arasında boşluk */
    justify-items: center; /* Elemanları yatayda ortalar */
}

.istiyorum_box {
    box-shadow: 1px 1px 3px #10a960;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
    padding: 10px;
    min-width: 250px;
}


    .istiyorum_box img {
        width: 25px;
        height: 25px;
    }

    .istiyorum_box span {
        color: #1a2d62;
    }
    .istiyorum_box:hover {
        box-shadow: 1px 1px 3px #2eca7f;
    }
    .istiyorum_selected {
        background-color: #bbf2d8;
    }

    .istiyorum_box input {
        line-height: 20px;
        margin-top: 12px; 
    }

    .create-request-btn:hover 
    {
        background-color: #168650 !important;
    }





/* GÜZEL SWİTCH YAPISI - TALEP OLUŞTUR*/

    .custom-switch .form-check-input {
        width: 45px;
        height: 24px;
        background-color: #ccc;
        border-radius: 34px;
        position: relative;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    .custom-switch .form-check-input::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        width: 25px;
        height: 25px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
        border: 1px solid gray;
    }

    .custom-switch .form-check-input:checked {
        background-color: #2eca7f;
    }

    .custom-switch .form-check-input:checked::before {
        transform: translateX(20px);
    }

    .custom-switch .form-check-input:hover {
        background-color: #bbf2d8;
    }

    .custom-switch .form-check-input:hover:checked {
        background-color: #109a58;
    }












/* MYORDERS.PHP STYLES */

    .orders-list {
        margin: 20px;
    }

    .order-row {
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 10px;
        overflow: hidden;
        transition: border-color 0.3s;
    }

    .order-header {
        background-color: #f8f8f8;
        padding: 10px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .order-header:hover {
        border-color: #007bff;
    }

    .order-id {
        font-weight: bold;
        color: #2eca7f;
    }

    .order-prop-header {
         color: #1a2d62;
         font-style: italic;
         margin-right: 5px;
    }

    .toggle-icon {
        font-size: 18px;
        transition: transform 0.3s;
    }

    .order-details {
        display: none;
        padding: 10px;
        background-color: #fafafa;
    }

    .order-details table {
        width: 100%;
        border-collapse: collapse;
    }

    .order-details th, .order-details td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .order-details tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .order-row.open .order-details {
        display: block;
    }

    .order-row.open .toggle-icon {
        transform: rotate(180deg);
    }