.fill-pink {
    --r: 32px;
    --s: 30px;
    --x: 10px;
    --y: 10px;
    border-radius: var(--r);
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1* var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1* var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
    background: rgba(140, 15, 77, 0.50);
}
.fill-gray {
    --r: 32px;
    --s: 30px;
    --x: 10px;
    --y: 10px;
    border-radius: var(--r);
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1* var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1* var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
    background: rgba(211, 211, 211, 0.20);
}
.inverted-radius-top-right {
    --r: 32px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 10px; /* horizontal offset (no percentage) */
    --y: 10px; /* vertical offset (no percentage) */
    background: #3FB8AF;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
            calc(100% - var(--_d) - var(--x)) 0 var(--_m),
            100% calc(var(--_d) + var(--y)) var(--_m),
            radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px))
            calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
            var(--_g) calc(-1*var(--_d) - var(--x)) 0,
            var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
    .inverted-radius-top-right {
        --r: 24px;
    }
}
.inverted-radius-top-left {
    --r: 32px; /* köşe yarıçapı (dış eğri) */
    --s: 44px; /* iç eğrinin büyüklüğü */
    background: #3FB8AF; /* arka plan rengi */
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    mask:
            calc(var(--s) + var(--r)) 0 var(--_m),
            0 calc(var(--s) + var(--r)) var(--_m),
            radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px))
            var(--r) var(--r) no-repeat,
            conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
            #000 75%,#0000 0);
    mask-repeat: no-repeat; /* maskelerin tekrarlanmasını engelle */
}
.inverted-radius-bottom-left {
    --r: 20px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentage) */
    --y: 10px; /* vertical offset (no percentage) */
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
            calc(var(--_d) + var(--x)) 100% var(--_m),
            0 calc(100% - var(--_d) - var(--y)) var(--_m),
            radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px))
            calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)),
            var(--_g) calc(var(--_d) + var(--x)) 0,
            var(--_g) 0 calc(-1*var(--_d) - var(--y));
    mask-repeat: no-repeat;
}
.inverted-radius-box {
    --r: 32px; /* the radius */
    --s: 42px; /* size of inner curve */
    --x: 10px; /* horizontal offset (no percentage) */
    --y: 10px; /* vertical offset (no percentage) */
    background: red;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
            calc(100% - var(--_d) - var(--x)) 0 var(--_m),
            100% calc(var(--_d) + var(--y)) var(--_m),
            radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px))
            calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
            var(--_g) calc(-1*var(--_d) - var(--x)) 0,
            var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
}