/* Custom styles for Gumor wallpaper site */
body {
    font-family: 'Roboto', sans-serif;
}

.hero {
    background: linear-gradient(135deg, #34d399, #3b82f6);
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.group {
    position: relative; /* Overlay için pozisyonlama */
}

.group img {
    position: relative;
    z-index: 1; /* Resmin kaplamanın altında kalmaması için */
}

.group:hover img {
    transform: scale(1.05); /* Hafif büyütme */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); /* Mavi parlama efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.group:hover::after {
    content: ''; /* Overlay için boş içerik */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.2); /* Hafif mavi kaplama */
    opacity: 0.7;
    z-index: 0; /* Kaplamanın resmin ve ikonun altında kalması için */
    transition: opacity 0.3s ease;
}

.download-icon {
    position: absolute; /* İkonu resmin üzerine sabitle */
    top: 10px; /* Üstten boşluk */
    right: 10px; /* Sağdan boşluk */
    z-index: 10; /* İkonun her zaman üstte olması için */
    opacity: 1 !important; /* Varsayılan olarak tamamen görünür */
    transition: transform 0.1s ease; /* Yalnızca transform için hızlı geçiş */
}

.group:hover .download-icon {
    transform: scale(1.1); /* Hover sırasında hafif büyütme */
}

.image-card {
    cursor: pointer; /* İmleci el işaretine dönüştür */
}

.category-card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.lazy {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lazy.loaded {
    opacity: 1;
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

input, textarea {
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus {
    border-color: #4CAF50;
}

@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr;
    }
}