/* FastStore — hafif animasyonlar & mikro etkileşimler */



:root {

    --fs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --fs-ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);

    --fs-dur-fast: 0.15s;

    --fs-dur-mid: 0.24s;

    --fs-dur-slow: 0.38s;

}



@media (prefers-reduced-motion: reduce) {

    .fs-animate-in,

    .fs-page-hero,

    .fs-page-card,

    .fs-mm-card,

    .fs-product-card,

    .fs-search-result,

    .fs-cargo-modal__panel,
    .fs-wheel-modal__panel,

    .fs-body .storefront-search-overlay__panel,

    .fs-btn,

    .fs-header__icon-btn,

    .fs-header__menu-btn,

    .fs-mm-row,

    .fs-mm-sub,

    .fs-cat-tabs__tab,

    .fs-hero__dot,

    .fs-field,

    .fs-cargo-field__warn,

    .fs-motion-fade-enter,

    .fs-motion-fade-leave,

    .fs-motion-modal-enter,

    .fs-motion-modal-leave,

    .fs-motion-menu-enter,

    .fs-motion-menu-leave,

    .fs-btn.is-loading,

    .fs-site-top.is-scrolled {

        animation: none !important;

        transition: none !important;

    }

}



@keyframes fs-fade-up {

    from {

        opacity: 0;

        transform: translate3d(0, 10px, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



@keyframes fs-scale-in {

    from {

        opacity: 0;

        transform: translate3d(0, 12px, 0) scale(0.97);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0) scale(1);

    }

}



@keyframes fs-soft-pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.72; }

}



@keyframes fs-pop-in {

    from {

        opacity: 0;

        transform: translateY(-50%) scale(0.6);

    }

    to {

        opacity: 1;

        transform: translateY(-50%) scale(1);

    }

}



@keyframes fs-shake {

    0%, 100% { transform: translateX(0); }

    18%, 58% { transform: translateX(-4px); }

    38%, 78% { transform: translateX(4px); }

}



@keyframes fs-bell-ring {

    0%, 72%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }

    76% { transform: translate3d(0, 0, 0) rotate(16deg); }

    80% { transform: translate3d(0, 0, 0) rotate(-14deg); }

    84% { transform: translate3d(0, 0, 0) rotate(10deg); }

    88% { transform: translate3d(0, 0, 0) rotate(-7deg); }

    92% { transform: translate3d(0, 0, 0) rotate(4deg); }

}



@-webkit-keyframes fs-bell-ring {

    0%, 72%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); }

    76% { -webkit-transform: translate3d(0, 0, 0) rotate(16deg); }

    80% { -webkit-transform: translate3d(0, 0, 0) rotate(-14deg); }

    84% { -webkit-transform: translate3d(0, 0, 0) rotate(10deg); }

    88% { -webkit-transform: translate3d(0, 0, 0) rotate(-7deg); }

    92% { -webkit-transform: translate3d(0, 0, 0) rotate(4deg); }

}



@keyframes fs-badge-pop {

    from { transform: scale(0.6); opacity: 0; }

    70% { transform: scale(1.08); }

    to { transform: scale(1); opacity: 1; }

}



/* Alpine geçiş sınıfları */

.fs-motion-fade-enter { transition: opacity var(--fs-dur-mid) ease; }

.fs-motion-fade-enter-start { opacity: 0; }

.fs-motion-fade-enter-end { opacity: 1; }

.fs-motion-fade-leave { transition: opacity 0.18s ease; }

.fs-motion-fade-leave-start { opacity: 1; }

.fs-motion-fade-leave-end { opacity: 0; }



.fs-motion-modal-enter {

    transition: opacity 0.28s var(--fs-ease-out), transform 0.28s var(--fs-ease-out);

}

.fs-motion-modal-enter-start {

    opacity: 0;

    transform: translate3d(0, 14px, 0) scale(0.97);

}

.fs-motion-modal-enter-end {

    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);

}

.fs-motion-modal-leave {

    transition: opacity 0.2s ease, transform 0.2s ease;

}

.fs-motion-modal-leave-start {

    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);

}

.fs-motion-modal-leave-end {

    opacity: 0;

    transform: translate3d(0, 8px, 0) scale(0.98);

}



.fs-motion-menu-enter {

    transition: transform 0.32s var(--fs-ease-out);

}

.fs-motion-menu-enter-start { transform: translate3d(-100%, 0, 0); }

.fs-motion-menu-enter-end { transform: translate3d(0, 0, 0); }

.fs-motion-menu-leave {

    transition: transform 0.24s ease-in;

}

.fs-motion-menu-leave-start { transform: translate3d(0, 0, 0); }

.fs-motion-menu-leave-end { transform: translate3d(-100%, 0, 0); }



.fs-animate-in {

    animation: fs-fade-up 0.42s var(--fs-ease-out) both;

}



.fs-page-hero {

    animation: fs-fade-up 0.38s var(--fs-ease-out) both;

}



.fs-page-card,

.fs-mm-card,

.fs-search-result,

.fs-cart-item {

    transition: transform var(--fs-dur-mid) ease, box-shadow var(--fs-dur-mid) ease, border-color var(--fs-dur-mid) ease;

}



.fs-page-card:hover,

.fs-search-result:hover,

.fs-cart-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgb(15 23 42 / 0.07);

}



.fs-product-card {

    transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.fs-product-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);

}



.fs-product-card__media img {

    transition: transform 0.4s var(--fs-ease-out);

}



.fs-product-card:hover .fs-product-card__media img {

    transform: scale(1.04);

}



.fs-btn {

    transition: transform var(--fs-dur-fast) ease, background var(--fs-dur-fast) ease, box-shadow var(--fs-dur-fast) ease, color var(--fs-dur-fast) ease;

}



.fs-btn:not(:disabled):hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgb(17 24 39 / 0.1);

}



.fs-btn--primary:not(:disabled):hover {

    box-shadow: 0 6px 18px rgb(17 24 39 / 0.2);

}



.fs-btn:active:not(:disabled) {

    transform: scale(0.98) translateY(0);

    box-shadow: none;

}



.fs-btn--secondary:not(:disabled):hover {

    background: #e5e7eb;

}



.fs-header__icon-btn,

.fs-header__menu-btn,

.fs-header__search-btn,

.fs-cargo-modal__close {

    transition: transform var(--fs-dur-fast) ease, background var(--fs-dur-fast) ease, color var(--fs-dur-fast) ease;

}



.fs-header__icon-btn:hover,

.fs-header__menu-btn:hover,

.fs-header__search-btn:hover {

    background: #f3f4f6;

}



.fs-header__icon-btn:active,

.fs-header__menu-btn:active {

    transform: scale(0.94);

}



.fs-cargo-modal__close:hover {

    background: #e5e7eb;

    color: #111827;

}



.fs-header__badge {

    animation: fs-badge-pop 0.35s var(--fs-ease-snap) both;

}



.fs-header__search {

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.fs-header__search:focus-within {

    border-color: #111827;

    box-shadow: 0 0 0 3px rgb(17 24 39 / 0.08);

    background: #fff;

}



/* Input & select */

.fs-field,

.fs-search-form__input,

.fs-search-overlay__input,

.fs-cargo-modal__input,

.fs-body .fs-checkout input[type="text"],

.fs-body .fs-checkout input[type="email"],

.fs-body .fs-checkout input[type="tel"],

.fs-body .fs-checkout input[type="number"],

.fs-body .fs-checkout input[type="password"],

.fs-body .fs-checkout select,

.fs-body .fs-checkout textarea,

.fs-pdp-select {

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.fs-field:focus,

.fs-search-form__input:focus,

.fs-search-overlay__input:focus {

    border-color: #111827;

    box-shadow: 0 0 0 3px rgb(17 24 39 / 0.08);

}



.fs-cargo-field.is-invalid .fs-cargo-modal__input {

    animation: fs-shake 0.38s ease;

}



.fs-cargo-field__warn {

    animation: fs-pop-in 0.3s var(--fs-ease-snap) both;

}



.fs-cargo-field__hint {

    animation: fs-fade-up 0.22s var(--fs-ease-out) both;

}



/* Kategori sekmeleri */

.fs-cat-tabs__tab::after {

    transition: transform 0.28s var(--fs-ease-out), opacity 0.2s ease;

    transform: scaleX(0);

    transform-origin: center;

    opacity: 0.35;

}



.fs-cat-tabs__tab.is-active::after {

    transform: scaleX(1);

    opacity: 1;

}



.fs-cat-tabs__tab {

    transition: color 0.2s ease;

}



.fs-cat-tabs__tab:not(.is-active):hover {

    color: #374151;

}



.fs-hero__dot {

    transition: width 0.25s var(--fs-ease-out), background 0.2s ease, transform 0.2s ease;

}



.fs-hero__dot:hover {

    transform: scale(1.2);

}



/* Mobil menü satırları */

.fs-mm-row,

.fs-mm-sub,

.fs-mm-account {

    transition: background 0.15s ease, opacity 0.15s ease;

}



.fs-mm-row:hover,

.fs-mm-sub:hover,

.fs-mm-account:hover {

    background: #f9fafb;

}



.fs-mm-row__chevron,

.fs-footer__section-chevron {

    transition: transform 0.24s var(--fs-ease-out), background 0.15s ease;

}



/* Footer */

.fs-footer__link,

.fs-footer__contact-link {

    transition: color 0.15s ease, transform 0.2s var(--fs-ease-out);

}



.fs-footer__link:hover,

.fs-footer__contact-link:hover {

    transform: translateX(3px);

}



.fs-footer__social-btn {

    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s var(--fs-ease-out);

}



.fs-footer__social-btn:hover {

    transform: translateY(-2px);

}



.fs-footer__section-toggle {

    transition: background 0.15s ease;

}



.fs-footer__section-toggle:active {

    background: #f3f4f6;

}



/* Checkout */

.fs-checkout .payment-option {

    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;

}



.fs-checkout .payment-option:hover {

    border-color: #d1d5db;

    transform: translateY(-1px);

}



.fs-checkout .payment-option.is-selected {

    box-shadow: 0 0 0 3px rgb(17 24 39 / 0.06);

}



.fs-checkout-step {

    transition: color 0.2s ease, border-color 0.28s var(--fs-ease-out);

}



.fs-checkout-panel {

    animation: fs-fade-up 0.34s var(--fs-ease-out) both;

}

.fs-checkout-panel.fs-checkout-panel--replay {

    animation: fs-fade-up 0.34s var(--fs-ease-out) both;

}

.fs-header__badge.is-updated {

    animation: fs-badge-pop 0.35s var(--fs-ease-snap) both;

}



.fs-header__kampanya-btn--live .fs-header__kampanya-icon {

    -webkit-transform-origin: 50% 12%;

    transform-origin: 50% 12%;

    -webkit-animation: fs-bell-ring 2.8s ease-in-out infinite;

    animation: fs-bell-ring 2.8s ease-in-out infinite;

    will-change: transform;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.fs-header__kampanya-btn--live .fs-header__kampanya-icon--js-ring {

    -webkit-animation: none !important;

    animation: none !important;

    will-change: transform;

}



.fs-header__kampanya-btn--live .fs-header__notify-dot {

    animation: fs-soft-pulse 1.8s ease-in-out infinite;

}



.fs-mm-row--kampanya-live .fs-mm-row__icon--bell {

    -webkit-transform-origin: 50% 12%;

    transform-origin: 50% 12%;

    -webkit-animation: fs-bell-ring 2.8s ease-in-out infinite;

    animation: fs-bell-ring 2.8s ease-in-out infinite;

    will-change: transform;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.fs-mm-row--kampanya-live .fs-mm-row__notify-dot {

    animation: fs-soft-pulse 1.8s ease-in-out infinite;

}



.fs-mm-row--kampanya-live .fs-mm-row__icon--bell.fs-header__kampanya-icon--js-ring {

    -webkit-animation: none !important;

    animation: none !important;

}



@media (prefers-reduced-motion: reduce) {

    .fs-header__kampanya-btn--live .fs-header__kampanya-icon {

        animation: none;

        transform: none;

    }

    .fs-header__kampanya-btn--live .fs-header__notify-dot {

        animation: none;

    }

    .fs-mm-row--kampanya-live .fs-mm-row__icon--bell {

        animation: none;

        transform: none;

    }

    .fs-mm-row--kampanya-live .fs-mm-row__notify-dot {

        animation: none;

    }

}

.fs-site-top {

    transition: box-shadow var(--fs-dur-mid) var(--fs-ease-out), background var(--fs-dur-mid) ease, backdrop-filter var(--fs-dur-mid) ease;

}

.fs-site-top.is-scrolled {

    background: rgb(255 255 255 / 0.94);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 1px 0 rgb(15 23 42 / 0.05), 0 6px 18px -8px rgb(15 23 42 / 0.08);

}

.fs-btn.is-loading {

    opacity: 0.72;

    pointer-events: none;

    animation: fs-soft-pulse 1.4s ease-in-out infinite;

}



/* Duyuru popup — FastStore */

.fs-body .site-announcement-popup__panel {

    border-radius: 16px;

    box-shadow: 0 24px 60px rgb(0 0 0 / 0.22);

}



.fs-body .site-announcement-popup__close {

    transition: transform 0.15s ease, background 0.15s ease;

}



.fs-body .site-announcement-popup__close:hover {

    transform: scale(1.06);

}



.fs-body .site-announcement-popup__cta {

    transition: transform 0.15s ease, background 0.15s ease;

}



.fs-body .site-announcement-popup__cta:hover {

    transform: translateY(-1px);

}



.fs-mm-card {

    animation: fs-fade-up 0.34s var(--fs-ease-out) both;

}



.fs-home-grid .fs-product-card {

    animation: fs-fade-up 0.4s var(--fs-ease-out) both;

}



.fs-home-grid .fs-product-card:nth-child(2) { animation-delay: 0.03s; }

.fs-home-grid .fs-product-card:nth-child(3) { animation-delay: 0.06s; }

.fs-home-grid .fs-product-card:nth-child(4) { animation-delay: 0.09s; }

.fs-home-grid .fs-product-card:nth-child(5) { animation-delay: 0.12s; }

.fs-home-grid .fs-product-card:nth-child(6) { animation-delay: 0.15s; }



.fs-cart-item__remove {

    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;

}



.fs-cart-item__remove:hover {

    transform: scale(1.05);

}



.fs-cart-qty__btn {

    transition: background 0.15s ease, transform 0.12s ease;

}



.fs-cart-qty__btn:active {

    transform: scale(0.92);

}


