/*
 * Hover Animations CSS
 * Tema genelinde yumuşak ve profesyonel hover efektleri
 * Kullanıcı deneyimini artıran dokunmatik hissiyatlar
 */

/* ==================== GENEL AYARLAR ==================== */

/* Slider elementlerini tüm animasyonlardan hariç tut - EN ÖNCELİKLİ */
.slick-slider,
.slick-slider *,
.slick-list,
.slick-list *,
.slick-track,
.slick-track *,
.slick-slide,
.slick-slide *,
.slick-dots,
.slick-dots * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Slider ok butonları - position korunmalı */
.slick-prev,
.slick-next,
.slick-arrow,
button.slick-prev,
button.slick-next,
button.slick-arrow {
    position: absolute !important;
    transition: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    overflow: visible !important;
}

* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== BUTONLAR ==================== */

/* Standart butonlar */
.btn:not(.slick-prev):not(.slick-next):not(.slick-arrow),
button:not(.navbar-toggler):not(.btn-close):not(.slick-prev):not(.slick-next):not(.slick-arrow),
[type="submit"]:not(.slick-prev):not(.slick-next):not(.slick-arrow),
.add-to-cart-box .btn-add-cart {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover,
button:not(.navbar-toggler):not(.btn-close):not(.slick-prev):not(.slick-next):not(.slick-arrow):hover,
[type="submit"]:hover,
.add-to-cart-box .btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(50, 108, 58, 0.25);
}

.btn:active,
button:not(.navbar-toggler):not(.btn-close):not(.slick-prev):not(.slick-next):not(.slick-arrow):active,
[type="submit"]:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(50, 108, 58, 0.2);
}

/* Tema renkli butonlar */
.theme-bg-color:hover,
button.theme-bg-color:hover {
    background-color: #2d6a31 !important;
    box-shadow: 0 6px 16px rgba(50, 108, 58, 0.3);
}

/* Arama butonu */
#filtre-arama-btn:hover {
    background-color: #2d6a31 !important;
    transform: scale(1.03);
}

/* ==================== LİNKLER ==================== */

/* Genel linkler - slider içindekiler hariç */
a:not(.slick-slider a):not(.slick-slide a) {
    transition: all 0.25s ease;
    position: relative;
}

a:not(.slick-slider a):not(.slick-slide a):hover {
    color: #2d6a31;
}

/* Footer linkleri */
footer .main-footer .footer-list li a {
    transition: all 0.3s ease;
}

footer .main-footer .footer-list li a:hover {
    transform: translateX(8px);
}

/* Navigasyon linkleri */
header .navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background-color: var(--theme-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

header .navbar-nav .nav-link:hover::after {
    width: 80%;
}

header .navbar-nav .nav-link:hover {
    transform: translateY(-2px);
}

/* ==================== KARTLAR VE ÜRÜNLER ==================== */

/* Kategori kutuları */
.category-section-3 .category-box-list {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.category-section-3 .category-box-list:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 30px rgba(50, 108, 58, 0.15);
}

.category-section-3 .category-box-list:active {
    transform: translateY(-4px) scale(1.01);
}

/* Ürün kutuları */
.product-box-3 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.product-box-3:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(34, 34, 34, 0.12);
}

.product-box-3:hover .product-header .product-image img {
    transform: scale(1.08);
}

/* Ürün resim animasyonu */
.product-box-3 .product-header .product-image img {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================== FORM ELEMENTLERİ ==================== */

/* Input alanları */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    transition: all 0.3s ease;
}

.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    border-color: rgba(50, 108, 58, 0.5);
    box-shadow: 0 2px 8px rgba(50, 108, 58, 0.08);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(50, 108, 58, 0.12);
}

/* ==================== SOSYAl MEDYA İKONLARI ==================== */

/* Footer sosyal ikonlar */
.footer-section-2 .main-footer .social-icon li {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-section-2 .main-footer .social-icon li:hover {
    transform: translateY(-4px) rotate(5deg);
}

.footer-section-2 .main-footer .social-icon li:active {
    transform: translateY(-2px) rotate(0deg);
}

/* Sosyal paylaşım linkleri */
.social-share-list a {
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-share-list a:hover {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 6px 16px rgba(50, 108, 58, 0.25);
}

.social-share-list a:active {
    transform: scale(1.05) rotate(0deg);
}

/* ==================== MOBİL MENÜ ==================== */

/* Mobil menü öğeleri */
.mobile-menu ul li a {
    transition: none;
}

/* Mobile menu hover - sadece ikon büyütme ve renk değişimi */
.mobile-menu ul li a .icli {
    transition: transform 0.2s ease, color 0.2s ease;
}

.mobile-menu ul li a:hover .icli {
    transform: scale(1.15);
    color: var(--theme-color);
}

.mobile-menu ul li a svg {
    transition: transform 0.2s ease, stroke 0.2s ease;
}

.mobile-menu ul li a:hover svg {
    transform: scale(1.15);
    stroke: var(--theme-color);
}

/* İlan Ver butonu hover */
.mobile-menu ul li.position-relative .circle-ilan .circle-ilanicon {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.mobile-menu ul li.position-relative .circle-ilan:hover .circle-ilanicon {
    transform: scale(1.1);
    background-color: #2d6a31;
}

/* ==================== HEADER & NAVİGASYON ==================== */

/* Logo animasyonu */
header .top-nav .navbar-top .web-logo img {
    transition: all 0.3s ease;
}

header .top-nav .navbar-top .web-logo:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Sağ taraf menü öğeleri */
header .top-nav .navbar-top .rightside-box .right-side-menu .right-side {
    transition: all 0.3s ease;
}

header .top-nav .navbar-top .rightside-box .right-side-menu .right-side:hover {
    transform: translateY(-2px);
}

/* Wishlist ikonu */
header .top-nav .navbar-top .rightside-box .right-side-menu .right-side .header-wishlist .feather {
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

header .top-nav .navbar-top .rightside-box .right-side-menu .right-side .header-wishlist:hover .feather {
    transform: scale(1.2) rotate(12deg);
    color: #d32f2f;
}

/* Hamburger menü */
.navbar-toggler {
    transition: all 0.3s ease;
}

.navbar-toggler:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.navbar-toggler:active {
    transform: scale(0.95);
}

/* ==================== PİYASA VE HAVA DURUMU ==================== */

/* Piyasa alan */
.piyasa-alan,
.piyasa-alan1 {
    transition: all 0.3s ease;
}

.piyasa-alan:hover,
.piyasa-alan1:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 128, 1, 0.2);
    border-color: #2d6a31;
}

/* Piyasa öğeleri */
.price-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.price-item:hover {
    transform: scale(1.08);
    background-color: rgba(50, 108, 58, 0.08);
}

/* Hava durumu widget */
.weather-widget {
    transition: all 0.3s ease;
    cursor: pointer;
}

.weather-widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ==================== STORY & MODAL ==================== */

/* Story dairesi */
.story-circle {
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.story-circle:hover {
    transform: scale(1.15);
    border-color: #2d6a31;
    box-shadow: 0 4px 12px rgba(50, 108, 58, 0.3);
}

.story-circle:active {
    transform: scale(1.05);
}

/* Story resim hover */
.story-circle img {
    transition: all 0.3s ease;
}

.story-circle:hover img {
    transform: scale(1.1);
}

/* Modal close button */
.close1,
.close-btn {
    transition: all 0.3s ease;
}

.close1:hover,
.close-btn:hover {
    transform: scale(1.2) rotate(90deg);
    color: #d32f2f;
}

/* ==================== KATEGORİ MENÜSÜ ==================== */

/* Kategori liste öğeleri */
.category-menu ul li .category-list {
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-menu ul li .category-list:hover {
    transform: translateX(5px);
    background-color: rgba(50, 108, 58, 0.04);
    padding-left: 8px;
    border-radius: 6px;
}

.kategorim {
    transition: all 0.3s ease;
    cursor: pointer;
}

.kategorim:hover {
    background-color: rgba(50, 108, 58, 0.04);
    padding-left: 8px;
    border-radius: 6px;
}

/* Kategori resim hover */
.kategori-resim-boy {
    transition: all 0.4s ease;
    overflow: hidden;
    border-radius: 8px;
}

.kategorim:hover .kategori-resim-boy {
    transform: scale(1.1);
}

/* ==================== ETİKET VE BADGE ==================== */

.etiket,
.etiket-alici {
    transition: all 0.3s ease;
    cursor: pointer;
}

.etiket:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(50, 108, 58, 0.3);
}

.etiket-alici:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(10, 88, 202, 0.3);
}

/* ==================== SCROLL & SLIDER ==================== */

/* Splide slider geçişleri */
.splide {
    transition: all 0.3s ease;
}

.splide:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Scroll efektleri - yumuşak kaydırma */
html {
    scroll-behavior: smooth;
}

/* ==================== ÖZEL ANIMASYONLAR ==================== */

/* Pulse animasyonu - önemli öğeler için */
/* Mobil menü animasyonları kaldırıldı */

/* ==================== TOOLTIP & DROPDOWN ==================== */

/* Tooltip animasyonu */
.tooltip {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.tooltip.show {
    transform: translateY(-5px);
}

/* Dropdown menü */
.dropdown-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu.show {
    animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== CHECKBOX & RADIO ==================== */

input[type="checkbox"],
input[type="radio"] {
    transition: all 0.2s ease;
    cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    transform: scale(1.15);
}

/* ==================== IMAGE HOVER EFEKTLERİ ==================== */

/* Genel resim hover - slider içindekiler hariç */
img:not(.slick-slider img):not(.slick-slide img) {
    transition: all 0.3s ease;
}

a:not(.slick-slider a) img:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* ==================== OFFCANVAS ==================== */

.offcanvas {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.offcanvas-backdrop {
    transition: opacity 0.3s ease-in-out;
}

/* ==================== SLIDER OK BUTONLARI VE CONTAINER ==================== */

/* Slider ve slider elementlerini hover animasyonlarından hariç tut */
.slick-slider,
.slick-list,
.slick-track,
.slick-slide,
.slick-prev,
.slick-next,
.slick-arrow,
button.slick-prev,
button.slick-next,
.slick-slider *,
.slick-slider img,
.slick-slider a {
    position: relative !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
}

.slick-prev,
.slick-next,
.slick-arrow,
button.slick-prev,
button.slick-next {
    position: absolute !important;
    transition: opacity 0.3s ease, background-color 0.3s ease !important;
}

.slick-prev:hover,
.slick-next:hover,
.slick-arrow:hover {
    opacity: 0.8 !important;
    transform: none !important;
}

/* ==================== PERFORMANCE OPTİMİZASYONU ==================== */

/* GPU hızlandırma için transform kullanımı */
.btn:not(.slick-prev):not(.slick-next):not(.slick-arrow),
.product-box-3,
.category-box-list,
.story-circle,
.mobile-menu ul li a {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==================== MOBİL OPTİMİZASYON ==================== */

@media (max-width: 768px) {
    /* Mobilde daha hafif animasyonlar */
    .btn:hover,
    .product-box-3:hover,
    .category-box-list:hover {
        transform: translateY(-3px);
    }

    /* Touch cihazlarda hover yerine active kullanımı */
    .btn:active,
    .product-box-3:active,
    .category-box-list:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ==================== ERİŞİLEBİLİRLİK ==================== */

/* Klavye navigasyonu için focus stilleri */
*:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
    transition: outline-offset 0.2s ease;
}

a:focus-visible,
button:focus-visible {
    outline-offset: 4px;
}

/* Reduced motion desteği */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== BİTİŞ ==================== */