@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Jost', sans-serif;
    color: #222;
}

/* --- KAYAN KATEGORİ ŞERİDİ (MARQUEE) --- */
.marquee-wrapper {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 20px 0;
}
.marquee-wrapper::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100%;
    background: linear-gradient(to right, #fff 20%, transparent 100%);
    z-index: 2; pointer-events: none;
}
.marquee-wrapper::after {
    content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100%;
    background: linear-gradient(to left, #fff 20%, transparent 100%);
    z-index: 2; pointer-events: none;
}
.marquee-track {
    display: flex; width: max-content; gap: 15px;
    animation: scroll 40s linear infinite;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Kategori Butonları */
.category-btn {
    background: #f3f3f3; border: none; padding: 6px 15px 6px 6px;
    border-radius: 50px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 14px; font-weight: 500;
    transition: all 0.3s; text-decoration: none; color: #333; flex-shrink: 0;
}
.category-btn svg, .category-btn img {
    width: 32px; height: 32px; object-fit: cover; border-radius: 50%;
}
.category-btn:hover {
    background: #fdc402; transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 196, 2, 0.3);
}

/* --- HEADER ÖZEL STILLER --- */
.search-input {
    border: 1px solid #e5e7eb; border-radius: 50px; padding: 10px 20px;
    padding-right: 40px; width: 250px; outline: none; transition: all 0.3s;
    font-size: 14px;
}
.search-input:focus { border-color: #fdc402; width: 280px; }

.search-trigger-btn {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 50px;
    padding: 12px 20px; font-weight: 600; font-size: 13px; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s;
}
.search-trigger-btn:hover, .cat-trigger-btn.active {
    background: #fdc402; border-color: #fdc402; color: #000;
}

/* Kategori Butonu (Pill) */
.cat-trigger-btn {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 50px;
    padding: 12px 20px; font-weight: 600; font-size: 13px; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s;
}
.cat-trigger-btn:hover, .cat-trigger-btn.active {
    background: #fdc402; border-color: #fdc402; color: #000;
}

/* Dropdown Menu */
.mega-menu {
    position: absolute; top: 100%; left: 0; width: 300px;
    background: white; border: 1px solid #f3f4f6; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 100;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.2s ease-in-out; margin-top: 15px;
}
.mega-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; font-size: 14px; color: #444; border-bottom: 1px solid #f9fafb;
    transition: all 0.2s;
}
.mega-menu li a:hover { background: #fffbe6; color: #000; padding-left: 25px; }
.mega-menu li:last-child a { border-bottom: none; }