/* ============================================================
 * Base Reset & Layout Primitives
 * Storefront Default Theme
 * Ownership:
 * - shell / topbar / header primitives
 * - search / button primitives
 * - shared nav primitives
 * NOT: :root dinamik değişkenleri (_head.blade.php içinde \3c style> olarak kalır)
 * ============================================================ */

        * {
            box-sizing: border-box;
        }

        body {
            --sf-layout-max-width: 1360px;

            /* ── Transition tokens ── */
            --sf-transition-fast:   0.15s ease;
            --sf-transition-base:   0.25s ease;
            --sf-transition-slow:   0.4s ease;

            /* ── Spacing tokens (8px grid) ── */
            --sf-space-1:  4px;
            --sf-space-2:  8px;
            --sf-space-3:  12px;
            --sf-space-4:  16px;
            --sf-space-5:  24px;
            --sf-space-6:  32px;
            --sf-space-7:  48px;
            --sf-space-8:  64px;

            font-family: var(--sf-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
            background: #fff;
            color: var(--sf-text);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            color: inherit;
        }

        .sf-shell {
            max-width: var(--sf-layout-max-width);
            margin: 0 auto;
            padding: 0;
        }

        /* ── Üst Bar Duyurusu (Announcement Bar) ── */
        .sf-marquee {
            position: relative;
            top: auto;
            z-index: 15;
            height: var(--sf-marquee-height, 36px);
            background: var(--sf-marquee-bg, #f8fafc);
            border-bottom: 1px solid rgb(15, 23, 42, .10);
            border-top: 1px solid rgb(15, 23, 42, .06);
            border-radius: var(--sf-marquee-radius, 0);
            overflow: hidden;
            display: flex;
            align-items: center;
            color: var(--sf-marquee-color, #111827);
            margin-left: var(--sf-marquee-mx, 0);
            margin-right: var(--sf-marquee-mx, 0);
        }

        .sf-marquee-inner {
            width: 100%;
            max-width: var(--sf-layout-max-width);
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 16px;
            height: var(--sf-marquee-height, 36px);
            overflow: hidden;
        }

        .sf-marquee--under_topbar .sf-marquee-inner {
            padding-left: 16px;
        }

        .sf-marquee--above_header .sf-marquee-inner {
            padding-left: 16px;
        }

        .sf-marquee--after_hero,
        .sf-marquee--after_featured,
        .sf-marquee--after_products,
        .sf-marquee--before_footer {
            margin: 14px 0;
        }

        .sf-marquee--before_hero {
            width: min(var(--sf-layout-max-width), calc(100% - 32px));
            margin: 18px auto 14px;
            background: #f8c232 !important;
            color: #102a43 !important;
            border: 1px solid #e0a800;
            border-radius: 8px;
            box-shadow: none;
        }

        .sf-marquee--before_hero .sf-marquee-inner {
            max-width: none;
        }

        .sf-marquee--before_hero .sf-marquee-track {
            color: #102a43 !important;
        }

        .sf-marquee--before_hero .sf-marquee-action {
            background: rgba(255, 255, 255, .88);
            border-color: rgba(15, 23, 42, .18);
            color: #102a43;
        }

        .sf-marquee-content {
            min-width: 0;
            flex: 1;
            overflow: hidden;
            height: var(--sf-marquee-height, 36px);
            display: flex;
            align-items: center;
        }

        .sf-marquee-track {
            display: flex;
            width: max-content;
            align-items: center;
            gap: 56px;
            white-space: nowrap;
            font-family: var(--sf-marquee-font-family, var(--sf-font, Poppins, system-ui, sans-serif));
            font-size: var(--sf-marquee-font-size, 13px);
            font-weight: 600;
            letter-spacing: .01em;
            will-change: transform;
            animation: sf-marquee-move var(--sf-marquee-duration, 20s) linear infinite;
        }

        .sf-marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .sf-marquee-item i {
            color: currentColor;
            font-size: 1.05em;
        }

        .sf-marquee-style--shipping .sf-marquee-track,
        .sf-marquee-style--spark .sf-marquee-track,
        .sf-marquee-style--alert .sf-marquee-track {
            font-weight: 800;
        }

        .sf-marquee-style--pill {
            background: transparent;
            border: 0;
            height: auto;
            padding: 8px 0;
        }

        .sf-marquee-style--pill .sf-marquee-inner {
            height: 38px;
            border-radius: 999px;
            background: var(--sf-marquee-bg, #f8fafc);
            border: 1px solid rgb(15, 23, 42, .10);
            box-shadow: 0 10px 22px rgb(15 23 42 / 8%);
        }

        .sf-marquee-style--alert .sf-marquee-inner {
            box-shadow: inset 4px 0 0 currentColor;
        }

        .sf-marquee.fixed .sf-marquee-content {
            justify-content: center;
        }

        .sf-marquee.fixed .sf-marquee-track {
            width: auto;
            justify-content: center;
            animation: none;
            transform: none;
            gap: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* Shared: scroll animasyonunu durdur, track'i sıfırla */
        .sf-marquee.wave .sf-marquee-track,
        .sf-marquee.bounce .sf-marquee-track,
        .sf-marquee.glow .sf-marquee-track {
            width: auto !important;
            will-change: auto !important;
            justify-content: center;
            gap: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            animation: none !important;
            transform: none !important;
        }

        .sf-marquee.wave .sf-marquee-content,
        .sf-marquee.bounce .sf-marquee-content,
        .sf-marquee.glow .sf-marquee-content {
            justify-content: center;
        }

        /* wave (dalga) mode */
        .sf-marquee.wave .sf-marquee-item {
            display: inline-block;
            animation: sf-marquee-wave 2s ease-in-out infinite;
        }

        @keyframes sf-marquee-wave {
            0%   { transform: translateY(0) skewX(0deg); }
            25%  { transform: translateY(-6px) skewX(-4deg); }
            50%  { transform: translateY(0) skewX(0deg); }
            75%  { transform: translateY(6px) skewX(4deg); }
            100% { transform: translateY(0) skewX(0deg); }
        }

        /* bounce mode */
        .sf-marquee.bounce .sf-marquee-item {
            display: inline-block;
            animation: sf-marquee-bounce 1.6s ease-in-out infinite;
        }

        @keyframes sf-marquee-bounce {
            0%, 100% { transform: translateY(0); }
            40%       { transform: translateY(-7px); }
            65%       { transform: translateY(2px); }
            80%       { transform: translateY(-3px); }
        }

        /* glow mode */
        .sf-marquee.glow .sf-marquee-item {
            display: inline-block;
            animation: sf-marquee-glow 2.2s ease-in-out infinite;
        }

        @keyframes sf-marquee-glow {
            0%, 100% { filter: brightness(1); text-shadow: none; }
            50%       { filter: brightness(1.3); text-shadow: 0 0 10px currentcolor, 0 0 20px currentcolor; }
        }

        .sf-marquee-action {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            border-radius: 999px;
            border: 1.5px solid rgb(15, 23, 42, .18);
            background: rgb(255, 255, 255, .9);
            color: #111827;
            font-size: 11.5px;
            font-weight: 700;
            padding: 4px 12px;
            line-height: 1;
            text-decoration: none;
            transition: background .15s, border-color .15s, box-shadow .15s;
        }

        .sf-marquee-action:hover {
            text-decoration: none;
            color: #0f172a;
            background: #fff;
            border-color: rgb(15, 23, 42, .32);
            box-shadow: 0 2px 8px rgb(15, 23, 42, .10);
        }

        /* Commerce Plus promo içindeki marquee sarıcı */
        .sf-cp-promo-marquee {
            min-width: 0;
            flex: 1;
            overflow: hidden;
        }

        .sf-cp-promo-marquee .sf-marquee-track {
            padding: 0;
        }

        /* sf-cp-promo-top için tek satır, sabit yükseklik */
        .sf-cp-promo-top {
            height: 36px;
            overflow: hidden;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgb(15, 23, 42, .08);
        }

        .sf-cp-promo-top .sf-topbar-inner {
            width: 100%;
            display: flex;
            align-items: center;
            height: 36px;
            padding: 0 16px;
        }

        .sf-cp-promo-track {
            width: 100%;
            display: flex;
            align-items: center;
            height: 36px;
            gap: 12px;
            overflow: hidden;
        }

        @keyframes sf-marquee-move {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @media (max-width: 768px) {
            .sf-marquee,
            .sf-cp-promo-top {
                height: var(--sf-marquee-height, 34px);
            }

            .sf-marquee--before_hero {
                width: calc(100% - 20px);
                margin: 10px auto 10px;
            }

            .sf-marquee-inner,
            .sf-cp-promo-top .sf-topbar-inner {
                padding: 0 10px;
                height: var(--sf-marquee-height, 34px);
            }

            .sf-marquee--under_topbar .sf-marquee-inner {
                padding-left: 10px;
            }

            .sf-marquee-content,
            .sf-cp-promo-track {
                height: var(--sf-marquee-height, 34px);
            }

            .sf-marquee-track {
                font-size: var(--sf-marquee-font-size, 12px);
                gap: 40px;
            }.sf-marquee-action{
                font-size: 11px;
                padding: 3px 10px;
            }
        }

        .sf-btn {
            border: var(--sf-border);
            background: rgb(255, 255, 255, .08);
            color: var(--sf-text);
            border-radius: 999px;
            padding: 10px 12px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: .15s ease;
        }

        .sf-btn:hover {
            transform: translateY(-1px);
            background: rgb(255, 255, 255, .11);
        }

        .sf-badge {
            display: inline-flex;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            background: rgb(34, 197, 94, .18);
            color: #000;
            border: 1px solid rgb(34, 197, 94, .35);
        }

/* ── Skip Navigation (accessibility) ── */
.sf-skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 99999;
    padding: 8px 16px;
    background: #111827;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top var(--sf-transition-fast);
}

.sf-skip-link:focus {
    top: 0;
    outline: 3px solid #facc15;
    outline-offset: 2px;
}

/* ── Reduced Motion ── */
@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;
    }
}