/*askim.css*/
:root {
    --pink-light: #ff7eb4;
    --pink: lightgray;
    --dark-red: #8B0000; /* Koyu kırmızı */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.bodi {
    height: 60px;
    width: 60px;
    display: grid;
    justify-content: center;
    align-items: center;
    /* background: white;*/
}

.iconi {
    fill: transparent;
    stroke: var(--dark-red); /* Koyu kırmızı border */
    stroke-width: 20;
    /*cursor: pointer;*/
    position: relative;
}

    .iconi svg {
  overflow: visible;
  width: 2.50rem; /* %10 küçültülmüş genişlik */
  margin-right: 15px;
}

    .iconi path {
        stroke-dashoffset: 0;
        stroke-dasharray: 1550;
        transform-origin: center;
    }

    .iconi .heart-background {
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        stroke: none;
    }

    .iconi .heart-main:hover path {
        animation: stroke-animation 2s ease-in-out forwards;
    }

    .iconi .heart-main:hover ~ .heart-background path {
        animation: fade-animation 2s ease-in-out forwards;
    }

@keyframes stroke-animation {
    0% {
        stroke-dashoffset: 0;
    }

    30% {
        stroke-dashoffset: 1550;
    }

    60% {
        stroke-dashoffset: 3100;
        fill: transparent;
        transform: scale(1);
    }

    80% {
        fill: var(--red);
        transform: scale(1.5);
    }

    90% {
        transform: scale(1);
    }

    100% {
        stroke-dashoffset: 3100;
        fill: var(--red);
    }
}

@keyframes fade-animation {
    70% {
        fill: transparent;
        transform: scale(1);
    }

    80% {
        fill: var(--pink-light);
        transform: scale(1.1);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}