body {
            background: #f2f4f8;

            height: 100vh;
            font-family: "Open Sans";
        }

        header {
            margin: auto;
        }
        h2{
            color: #007bc2;
        }

        .container {
            margin: auto;
            padding: 20px;
        }

        .bbh-hegarty-regular {
            font-family: "BBH Hegarty", sans-serif;
            font-weight: 400;
            font-style: normal;
        }



        .color-1 {
            --bg-color: #ffd861;
            --bg-color-light: #ffeeba;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(255, 215, 97, 0.48);
        }


        .color-2 {
            --bg-color: #B8F9D3;
            --bg-color-light: #e2fced;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(184, 249, 211, 0.48);
        }

        .color-3 {
            --bg-color: #CEB2FC;
            --bg-color-light: #F0E7FF;
            --text-color-hover: #fff;
            --box-shadow-color: rgba(206, 178, 252, 0.48);
        }

        .color-4 {
            --bg-color: #DCE9FF;
            --bg-color-light: #f1f7ff;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(220, 233, 255, 0.48);
        }

        .color-5 {
            --bg-color: #acdfd2;
            --bg-color-light: #cef0db;
            --text-color-hover: #2d597c;
            --box-shadow-color: rgba(110, 126, 38, 0.48);
        }

        .color-6 {
            --bg-color: #addd5e;
            --bg-color-light: #93db58;
            --text-color-hover: #50ac34;
            --box-shadow-color: rgba(48, 145, 10, 0.48);
        }

        .color-7 {
            --bg-color: #5630ad;
            --bg-color-light: #7e399e;
            --text-color-hover: #e5e2e9;
            --box-shadow-color: rgba(184, 162, 221, 0.48);
        }


        .card {
            width: 220px;
            min-width: 220px;
            /* yatay scroll için */
            height: 321px;
            background: #f6f7f7;
            overflow: hidden;
            border: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            position: relative;
            box-shadow: rgba(94, 170, 215, 0.19) 0px 10px 20px, rgba(92, 172, 201, 0.23) 0px 6px 6px;
            transition: all 0.3s ease-out;
            text-decoration: none;

            margin: 0;
            /* ❗ auto KALDIRILDI */
            flex-shrink: 0;
            /* ❗ çok önemli */
        }


        .card:hover {
            transform: translateY(-5px) scale(1.005) translateZ(0);
            box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
                0 24px 46px var(--box-shadow-color);
        }

        .card:hover .overlay {
            transform: scale(4) translateZ(0);
        }

        .card:hover .circle {
            border-color: var(--bg-color-light);
            background: var(--bg-color);
        }

        .card:hover .circle:after {
            background: var(--bg-color-light);
        }

        .card:hover p {
            color: var(--text-color-hover);
        }

        .card:active {
            transform: scale(1) translateZ(0);
            box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11),
                0 15px 24px var(--box-shadow-color);
        }

        .card p {
            font-size: 17px;
            color: #4C5656;
            margin-top: 30px;
            z-index: 1000;
            transition: color 0.3s ease-out;
        }


        svg {
            z-index: 10000;
            transform: translateZ(0);
            width: 100px;
        }

        .overlay {
            width: 118px;
            position: absolute;
            height: 118px;
            border-radius: 50%;
            background: var(--bg-color);
            top: 70px;
            left: 50px;
            z-index: 0;
            transition: transform 0.3s ease-out;
        }

        .row-title {
            margin: 20px auto;
            text-align: center;
            border-radius: 50%;
            border-bottom: 1px solid blue;
        }

        .row {
            display: flex;
            flex-wrap: nowrap !important;
            /* 🔥 EN KRİTİK SATIR */
            overflow-x: auto;
            overflow-y: hidden;

        }

        .row a {
            margin-left: 25px;
        }

        .row {
            overflow-y: auto;
            scrollbar-width: thin;
            padding-bottom: 20px;
            /* Firefox */
            scrollbar-color: #7c7cff #f1f1f1;
            /* thumb / track */
        }

        /* Chrome, Edge, Safari */
        .row::-webkit-scrollbar {
            width: 8px;
        }

        .row::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .row::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #7c7cff, #5a5ad1);
            border-radius: 10px;
            transition: background 0.3s ease;
        }

        .row::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #5a5ad1, #3f3fbf);
        }