/* ==========================================================================
   SİHİRLİ KALEM & MOBİL DOKUNMATİK PARILDAMA EFEKTİ
   ========================================================================== */

/* ✏️ Masaüstü Fare İmleci */
@media (hover: hover) and (pointer: fine) {
    html, body, a, button, input, select, textarea, [role="button"] {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%232e6833" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/><path d="m15 5 4 4" stroke="%23ffffff"/></svg>') 0 22, auto !important;
    }
}

/* 🌟 Sihirli Yıldız Parıltısı (Masaüstü & Mobil Ortak) */
.magic-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    /* 4 Köşeli Sihirli Yıldız Şekli */
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    animation: magicSparkleFade 0.7s forwards cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Yıldız Dökülme Animasyonu */
@keyframes magicSparkleFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 15px)) scale(0.2) rotate(120deg);
    }
}

/* 📱 Mobilde Parmağın Altında Çıkan Geçici Kalem Simgesi (İsteğe Bağlı) */
.mobile-touch-pencil {
    position: fixed;
    pointer-events: none;
    z-index: 999998;
    width: 24px;
    height: 24px;
    transform: translate(-100%, -100%); /* Parmağın hemen sol üstünde görünür */
    transition: opacity 0.3s ease;
    opacity: 0;
}

.mobile-touch-pencil.active {
    opacity: 1;
}