/* ================================
   LEVEL-X ANIMATED ACTION ICONS
   Düzenle: Kalem Yazıyor
   Sil: Çöp Kutusu Kapağı Açılıyor
================================= */

/* ortak yapı */
.action-icon {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: transform .2s ease;
}

/* küçük hover büyüme */
.action-icon:hover {
    transform: scale(1.22);
}

/* -------------------------
   ✏️ Edit - Pen Writing
-------------------------- */
.pen-wrapper {
    position: relative;
}

.pen-core {
    font-size: 20px;
    color: #0d6efd;
    position: relative;
    z-index: 2;
    transition: transform .2s ease;
}

/* kalemin altındaki çizgi */
.pen-line {
    position: absolute;
    bottom: -2px;
    left: 4px;
    width: 0px;
    height: 2px;
    background: #0d6efd;
    border-radius: 2px;
    transition: width .25s ease;
}

.pen-wrapper:hover .pen-core {
    transform: rotate(-15deg);
}

/* yazma hareketi */
.pen-wrapper:hover .pen-core {
    animation: penWrite .3s infinite alternate;
}

@keyframes penWrite {
    0% {
        transform: rotate(-15deg) translateX(0);
    }

    100% {
        transform: rotate(-15deg) translateX(2px);
    }
}

.pen-wrapper:hover .pen-line {
    width: 14px;
}

/* click spark */
.pen-wrapper:active .pen-line {
    width: 20px;
    background: #69a3ff;
}


/* -------------------------
   🗑️ Delete - Lid Opening
-------------------------- */

/* çöp kutusu ana ikon */
.trash-core {
    font-size: 20px;
    color: #dc3545;
    position: relative;
    z-index: 3;
}

/* Kapak (ayrı layer) */
.trash-lid {
    position: absolute;
    top: 2px;
    left: 7px;
    width: 12px;
    height: 4px;
    background: #dc3545;
    border-radius: 2px 2px 0 0;
    transform-origin: left center;
    transition: transform .25s ease;
}

/* Kapak hover ile açılıyor */
.trash-wrapper:hover .trash-lid {
    transform: rotate(-35deg);
}

/* küçük bounce kapanma */
.trash-wrapper:hover {
    animation: trashBounce .28s ease;
}

@keyframes trashBounce {
    0% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Click — dökülme efekti küçük parçalar */
.trash-wrapper:active .trash-lid {
    transform: rotate(-55deg);
}