:root {
    --bg-planli: dodgerblue;
    --bg-tasarruf: saddlebrown;
    --bg-ariza: darkred;
    --bg-column-header-transparency: 50%;
    --bg-row-hover-transparency: 40%;
    --bg-row-explanation-transparency: 30%;
    --bg-row-transparency: 20%;
}

.card {
    background-color: transparent;
    border-radius: 10px;
    overflow: clip;
}


    .card .table-header {
        color: white;
        cursor: pointer;
        transition: background-color .2s;
        padding: 0.5rem 1rem;
    }

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

        .card .table-header .header-count {
        }

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

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

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








    .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;
        margin-right: 8px;
    }





    .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.planli .table-row,
    .card.tasarruf .table-row {
        cursor: pointer;
    }

    /*PLANLI*/
    .card.planli {
        border: 1px solid var(--bg-planli)
    }

        .card.planli .table-header {
            background-color: var(--bg-planli) !important;
        }

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


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

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

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

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

        .card.planli .selected-row,
        .card.planli .table-explanation-row {
            background-color: color-mix(in srgb, var(--bg-planli) var(--bg-row-explanation-transparency), transparent);
        }
    /*END OF PLANLI*/




    /*TASARRUF*/
    .card.tasarruf {
        border: 1px solid var(--bg-tasarruf)
    }

        .card.tasarruf .table-header {
            background-color: var(--bg-tasarruf) !important;
        }

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

        .card.tasarruf .table-row {
            background-color: color-mix(in srgb, var(--bg-tasarruf) var(--bg-row-transparency), transparent);
            border-top: 1px solid var(--bg-tasarruf);
        }

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


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

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

        .card.tasarruf .selected-row,
        .card.tasarruf .table-explanation-row {
            background-color: color-mix(in srgb, var(--bg-tasarruf) var(--bg-row-explanation-transparency), transparent);
        }
    /*END OF TASARRUF*/




    /*ARIZA*/
    .card.ariza {
        border: 1px solid var(--bg-ariza)
    }

        .card.ariza .table-header {
            background-color: var(--bg-ariza) !important;
        }

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

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

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

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

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

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

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

/*END OF ARIZA*/