:root {
    --bg: black;
    --bg-header-transparency: 70%;
    --bg-column-header-transparency: 60%;
    --bg-row-hover-transparency: 20%;
    --bg-row-explanation-transparency: 30%;
    --bg-row-transparency: 40%;
    --bg-row-opened-transparency: 50%;
}

.card {
    background-color: transparent;
    border-radius: 10px;
    overflow: clip;
    border: 1px solid var(--bg)
}

    .card.accordion .table-header {
        cursor: pointer;
    }
    .card .table-header {
        background-color: color-mix(in srgb, var(--bg) var(--bg-header-transparency), transparent);
        display: flex;
        gap: 8px;
        color: white;
        transition: background-color .2s;
        padding: 10px;
    }
        .card .table-header .header-count {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
            border-radius: 4px;
            width: 20px;
        }

        .card .table-header .header-left {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

            .card .table-header .header-left .header-icon {
            }

            .card .table-header .header-left .header-title {
                font-weight: 500;
            }



        .card .table-header .header-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: end;
            gap: 6px;
        }



            .card .table-header .header-right .header-arrow {
            }




    .card .table-column th {
        color: white !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .card td {
        padding: 10px !important;
        color: black !important;
        font-weight: 400;
        color: white !important;
    }

    .card tr {
        /*backdrop-filter: blur(8px);*/
    }

    .card .card-body-open {
        background-color: color-mix(in srgb, var(--bg) var(--bg-row-transparency), transparent);
    }





.card .table-explanation-row .explanation-content-row-title {
    font-weight: 500;
}

    .card .table-explanation-row td {
        padding: 0px !important;
    }

    .card .table-explanation-row .explanation-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        /* padding varsa içerideki yüksekliği hesaba katmak için box-sizing */
        box-sizing: border-box;
        line-height: 40px;
        padding: 0px 20px;
    }




        .card .table-explanation-row .explanation-content .explanation-content-row .explanation-content-row-detail {
        }


    .card .header-arrow,
    .card .row-arrow {
        transition: transform 0.4s ease-in-out;
    }


    .card .row-arrow {
        margin-left: auto;
    }





    .card .card-body-open {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }

    .card.open .card-body-open {
        max-height: 5000px;
    }

    .card.accordion.planli .table-row,
    .card.accordion.tasarruf .table-row {
        cursor: pointer;
    }


    .card.tasarruf .table-row, 
    .card.tasarruf .table-explanation-row .explanation-content .explanation-content-row {
        border-top: 1px solid var(--bg);
    }




    /*ARIZA*/

        .card thead {
            background-color: color-mix(in srgb, var(--bg) var(--bg-column-header-transparency), transparent);
        }

        .card .table-row {
            /*background-color: color-mix(in srgb, var(--bg) var(--bg-row-transparency), transparent);*/
        }

        .card.ariza .table-row {
            border-top: 1px solid var(--bg);
        }

        .card .table-explanation-row .explanation-content-row-title {
            color: var(--bg);
        }

        .card .selected-row,
        .card .table-explanation-row {
            background-color: color-mix(in srgb, var(--bg) var(--bg-row-explanation-transparency), transparent);
        }


    .card.accordion.tasarruf .table-row:hover {
        background-color: color-mix(in srgb, var(--bg) var(--bg-row-hover-transparency), transparent);
    }

@media (max-width: 1199px) {
    .card.accordion.ariza .table-row {
        cursor: pointer;
    }

        .card.accordion.tasarruf .table-row:hover {
            background-color: color-mix(in srgb, var(--bg) var(--bg-row-hover-transparency), transparent);
        }
}

/*END OF ARIZA*/