﻿.site-favorite-button {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #191919;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    padding: 0;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
    width: 42px;
}

.site-favorite-button:hover,
.site-favorite-button:focus,
.site-favorite-button.is-active {
    background: #2879fe;
    border-color: #2879fe;
    color: #fff;
}

.site-favorite-button[data-busy="true"] {
    cursor: wait;
    opacity: .6;
}

.site-favorite-notice {
    background: #191919;
    border-radius: 4px;
    bottom: 24px;
    color: #fff;
    left: 50%;
    max-width: calc(100% - 32px);
    opacity: 0;
    padding: 12px 18px;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 16px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10050;
}

.site-favorite-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.site-favorite-notice.is-error {
    background: #d7263d;
}

.tt-product:not(.tt-view) .tt-image-box .site-product-favorite {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    color: #191919;
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 61px;
    transition: all .2s linear;
    width: 46px;
    z-index: 6;
}

.tt-product:not(.tt-view) .tt-image-box .site-product-favorite:hover,
.tt-product:not(.tt-view) .tt-image-box .site-product-favorite.active,
.tt-product:not(.tt-view) .tt-image-box .site-product-favorite.is-active {
    background: #2879fe;
    color: #fff;
}

.tt-product:not(.tt-view) .tt-image-box .site-product-favorite + .tt-btn-compare {
    top: 116px;
}

@media (min-width: 1025px) {
    .tt-product:not(.tt-view):hover .tt-image-box .site-product-favorite {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .tt-product:not(.tt-view) .tt-image-box .site-product-favorite {
        opacity: 1;
        top: 10px;
    }

    .tt-product:not(.tt-view) .tt-image-box .site-product-favorite + .tt-btn-compare {
        top: 61px;
    }
}

.koleksiyon-favori-karti,
.stil-favori-karti {
    position: relative;
}

.koleksiyon-favori-karti > .site-favorite-button,
.stil-favori-karti > .site-favorite-button {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 4;
}

.detay-favori-satiri {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 18px 0 0;
}

.urun-detay-favori {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.favori-bolumu {
    margin-top: 44px;
}

.favori-bolumu:first-of-type {
    margin-top: 0;
}

.favori-bolumu-baslik {
    font-size: 22px;
    margin: 0 0 22px;
}

.favori-secim-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.favori-secim-karti {
    min-width: 0;
    position: relative;
}

.favori-secim-karti > .site-favorite-button {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
}

.favori-secim-karti > a {
    color: #191919;
    display: block;
}

.favori-secim-gorseli {
    aspect-ratio: 4 / 3;
    background: #f4f5f7;
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
}

.favori-secim-gorseli img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.favori-secim-karti strong,
.favori-secim-karti > a > span:last-child {
    display: block;
}

.favori-secim-karti > a > span:last-child {
    color: #777;
    margin-top: 4px;
}

.favoriler-bos-mesaji {
    background: #f7f8fa;
    padding: 32px 20px;
    text-align: center;
}

.is-hidden {
    display: none !important;
}

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