/*
Theme Name: VİYA v22.1 - Ultimate Edition
Description: Complete Feature Set & Premium UX Design
*/

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-text: #1a1a1a;
  --color-text-dim: #666666;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-bronze: #cd7f32;
  --color-bronze-light: rgba(205, 127, 50, 0.15);
  --color-bronze-dark: #a86628;
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-whatsapp: #25d366;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --header-height: 70px;
  --max-width: 1440px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --color-bg: #0d0d0d;
  --color-bg-alt: #1a1a1a;
  --color-text: #f1f1f1;
  --color-text-dim: #aaaaaa;
  --color-border: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(20, 20, 20, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;}
body {font-family: var(--font-sans);color: var(--color-text);background: var(--color-bg);line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: hidden;transition: background var(--transition-base), color var(--transition-base);}
img {max-width: 100%;height: auto;display: block;}
a {color: inherit;text-decoration: none;transition: color var(--transition-fast);}
button {font-family: inherit;cursor: pointer;border: none;background: none;color: inherit;}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-serif);font-weight: 700;line-height: 1.2;color: var(--color-text);}
h1 {font-size: clamp(2.5rem, 5vw, 4rem);}
h2 {font-size: clamp(2rem, 4vw, 3rem);}
h3 {font-size: clamp(1.5rem, 3vw, 2rem);}
h4 {font-size: 1.25rem;}
::selection {background: var(--color-bronze);color: #ffffff;}

/* --- HEADER & NAV --- */
.viya-header {position: fixed;top: 0;left: 0;right: 0;height: var(--header-height);z-index: 1000;background: var(--glass-bg);backdrop-filter: blur(20px);border-bottom: 1px solid var(--color-border);}
.viya-header__inner {width: min(var(--max-width), 94%);height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);padding: 0 var(--space-md);}
.viya-header__left {display: flex;align-items: center;gap: var(--space-md);}
.viya-brand {display: flex;align-items: center;gap: 0.75rem;transition: opacity var(--transition-fast);}
.viya-brand:hover {opacity: 0.8;}
.viya-brand__logo img {height: 50px;width: auto;}
.viya-brand__name {font-family: var(--font-serif);font-size: 1.5rem;font-weight: 900;letter-spacing: -0.02em;}
.viya-slogan {font-size: 0.875rem;color: var(--color-text-dim);font-style: italic;display: none;}

.viya-nav {display: flex;align-items: center;gap: 0.5rem;}
.viya-nav__link {padding: 0.625rem 1rem;font-size: 0.875rem;font-weight: 600;color: var(--color-text);border-radius: var(--radius-full);transition: all var(--transition-fast);position: relative;}
.viya-nav__link::after {content: '';position: absolute;bottom: 0.25rem;left: 50%;transform: translateX(-50%) scaleX(0);width: 60%;height: 2px;background: var(--color-bronze);transition: transform var(--transition-fast);}
.viya-nav__link:hover::after {transform: translateX(-50%) scaleX(1);}
.viya-icon-btn {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);transition: all var(--transition-fast);}
.viya-icon-btn:hover {background: var(--color-bronze-light);border-color: var(--color-bronze);transform: translateY(-2px);}
.viya-icon-btn svg {width: 20px;height: 20px;}

.viya-hamburger {display: none;flex-direction: column;justify-content: space-between;width: 28px;height: 20px;cursor: pointer;z-index: 1001;}
.viya-hamburger span {display: block;width: 100%;height: 3px;background: var(--color-text);border-radius: 2px;transition: all 0.3s;}
.viya-hamburger.is-open span:nth-child(1) {transform: translateY(8.5px) rotate(45deg);}
.viya-hamburger.is-open span:nth-child(2) {opacity: 0;}
.viya-hamburger.is-open span:nth-child(3) {transform: translateY(-8.5px) rotate(-45deg);}

/* --- HERO SECTION --- */
.viya-hero {display: flex;height: calc(100vh - var(--header-height));margin-top: var(--header-height);}

/* Special banner aktifken hero aşağı in */
body.has-special-banner .viya-hero {margin-top: calc(var(--header-height) + 140px);}
.viya-panel {flex: 1;position: relative;overflow: hidden;cursor: pointer;transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);}
.viya-panel__bg {position: absolute;inset: 0;background-size: cover;background-position: center;transition: transform 0.6s;}
.viya-panel:hover .viya-panel__bg {transform: scale(1.05);}
.viya-panel__overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));transition: opacity 0.4s;}
.viya-panel.is-active .viya-panel__overlay {opacity: 0.3;}
.viya-panel__title {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-90deg);color: #ffffff;font-size: clamp(2rem, 4vw, 3.5rem);font-weight: 900;letter-spacing: 0.1em;text-transform: uppercase;opacity: 0.9;text-shadow: 0 4px 20px rgba(0,0,0,0.5);transition: opacity 0.6s;pointer-events: none;}
.viya-panel.is-active .viya-panel__title {opacity: 0;}
.viya-panel__content {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;padding: var(--space-xl);opacity: 0;transform: translateY(30px);transition: all 0.6s;pointer-events: none;}
.viya-panel.is-active .viya-panel__content {opacity: 1;transform: translateY(0);pointer-events: all;}
.viya-panel.is-active {flex: 3;}
.viya-glass {background: var(--glass-bg);backdrop-filter: blur(20px);border-radius: var(--radius-lg);padding: var(--space-xl);max-width: 500px;text-align: center;border: 1px solid var(--glass-border);}
.viya-kicker {font-size: 0.875rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--color-bronze);margin-bottom: 0.5rem;}
.viya-section-title {margin-bottom: var(--space-sm);}
.viya-desc {color: var(--color-text-dim);margin-bottom: var(--space-lg);}

/* --- MODAL SYSTEM --- */
.viya-modal {position: fixed;inset: 0;z-index: 9999;display: none;align-items: center;justify-content: center;padding: var(--space-md);}
.viya-modal.is-open {display: flex;}
.viya-modal__backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(4px);}
.viya-modal__panel {position: relative;width: min(1200px, 100%);max-height: 90vh;background: var(--color-bg);border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);display: flex;flex-direction: column;overflow: hidden;}
.viya-modal__header {display: flex;align-items: center;justify-content: space-between;padding: 0.5rem 0.75rem;border-bottom: 1px solid var(--color-border);gap: 0.5rem;flex-shrink: 0;flex-wrap: wrap;}
.viya-modal__title-wrapper {flex: 1;min-width: 200px;}
.viya-modal__title {font-size: 1.75rem;margin: 0;}
.viya-modal__subtitle {font-size: 0.875rem;color: var(--color-text-dim);margin-top: 0.25rem;font-style: italic;}
.viya-modal__close {width: 44px;height: 44px;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);font-size: 1.5rem;line-height: 1;flex-shrink: 0;transition: all var(--transition-fast);}
.viya-modal__close:hover {background: var(--color-bronze-light);border-color: var(--color-bronze);transform: rotate(90deg);}
.viya-modal__body {flex: 1;overflow-y: auto;overflow-x: hidden; padding: 0.6rem; position: relative;}

/* --- BUTTONS & CONTROLS --- */
.viya-menu-switch {display: flex;gap: 0.5rem;flex-wrap: wrap;}
.viya-menu-switch__btn {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;border-radius: var(--radius-full);background: var(--color-bg-alt);border: 1px solid var(--color-border);font-size: 0.875rem;font-weight: 600;transition: all var(--transition-fast);}
.viya-menu-switch__btn:hover {background: var(--section-color-light, var(--color-bronze-light));border-color: var(--section-color, var(--color-bronze));transform: translateY(-1px);}
.viya-menu-switch__icon {display: flex;align-items: center;justify-content: center;}
.viya-menu-switch__icon svg {width: 18px;height: 18px;}
.viya-menu-switch__label {white-space: nowrap;}

.viya-btn {display: inline-flex;align-items: center;justify-content: center;padding: 0.875rem 2rem;font-size: 1rem;font-weight: 700;color: #ffffff;background: var(--color-bronze);border-radius: var(--radius-full);transition: all var(--transition-fast);box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);border: none;cursor: pointer;}
.viya-btn:hover {background: var(--color-bronze-dark);transform: translateY(-2px);box-shadow: 0 6px 16px rgba(205, 127, 50, 0.4);}

/* --- FILTER BAR --- */
.viya-filter-bar {position: sticky; top: 0; z-index: 50;background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 0.6rem;margin-bottom: 0.5rem;box-shadow: var(--shadow-sm);}
.viya-filter-bar__title {font-family: var(--font-serif);font-size: 1.25rem;font-weight: 700;margin-bottom: 0.25rem;color: var(--color-text);}
.viya-filter-bar__controls {display: flex;gap: var(--space-sm);flex-wrap: wrap;}
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }
.viya-filter-select {flex: 1;min-width: 180px;height: 44px;padding: 0 var(--space-md);border-radius: var(--radius-md);border: 1.5px solid var(--color-border);background: var(--color-bg);color: var(--color-text);font-weight: 600;font-size: 0.875rem;cursor: pointer;transition: all var(--transition-fast);appearance: none;background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 1rem center;}
.viya-filter-select:hover {border-color: var(--section-color, var(--color-bronze));}
.viya-filter-select:focus {outline: none;border-color: var(--section-color, var(--color-bronze));box-shadow: 0 0 0 3px var(--section-color-light, rgba(205, 127, 50, 0.15));}

/* --- SPECIAL PICKS (SIGNATURE BAR) - PREMIUM EDITION --- */
.viya-picks {
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-radius: 24px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
}

.viya-picks__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.viya-picks__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

.viya-picks__hint {
    font-size: 0.85rem;
    color: var(--color-text-dim);
    font-weight: 400;
}

/* Horizontal Scroll Rail */
.viya-picks__rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.viya-picks__rail::-webkit-scrollbar {
    height: 4px;
}
.viya-picks__rail::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin: 0 20px;
}
.viya-picks__rail::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Product Cards */
.viya-pick {
    flex: 0 0 280px;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: visible;
}

.viya-pick:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--section-color, var(--color-bronze));
}


.viya-pick__thumb {
    width: auto;
    min-width: 90px;
    max-width: 110px;
    aspect-ratio: 3/2;
    align-self: stretch;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border);
}
.viya-pick__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
}

.viya-pick__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--section-color, var(--color-bronze));
    border: 1px solid var(--section-color, var(--color-bronze));
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.9);
}

.viya-pick__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-serif);
}

.viya-pick__price {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--section-color, var(--color-bronze));
}

/* --- CROSS SELL (Restored & Refined) --- */
.viya-picks--cross {
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: 30px 0 0 0;
    margin-top: var(--space-xl);
}

.viya-picks--cross .viya-pick__badge {
    background: var(--section-color-light);
    border: none;
    color: var(--section-color, var(--color-bronze));
}

.viya-pick__cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dim);
    margin-top: 4px;
    display: block;
}

/* --- MENU CATEGORIES & ITEMS --- */
.viya-menu-list {display: flex;flex-direction: column;gap: 0.625rem;}
.viya-category {border: 1px solid var(--color-border);border-radius: var(--radius-md);overflow: hidden;background: var(--color-bg);transition: border-color var(--transition-fast);}
.viya-category:hover {border-color: var(--section-color-light, rgba(205, 127, 50, 0.3));}
.viya-category__header {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0.6rem;background: var(--color-bg-alt);border: none;cursor: pointer;transition: background var(--transition-fast);}
.viya-category__header:hover {background: var(--section-color-light, rgba(205, 127, 50, 0.08));}
.viya-category__info {display: flex;align-items: baseline;gap: var(--space-sm);}
.viya-category__name {font-size: 1.5rem;font-weight: 900;margin: 0;letter-spacing: -0.01em;color: var(--color-text);}
.viya-category__count {font-size: 0.875rem;font-weight: 600;color: var(--color-text-dim);padding: 0.25rem 0.625rem;background: var(--color-bg);border-radius: var(--radius-full);border: 1px solid var(--color-border);}
.viya-category__arrow {font-size: 1.125rem;transition: transform var(--transition-base);color: var(--color-text-dim);}
.viya-category--collapsed .viya-category__arrow {transform: rotate(-90deg);}
.viya-category__items {max-height: 800px;overflow-y: auto;padding: 0.6rem;display: flex;flex-direction: column;gap: 0.6rem;}
.viya-category--collapsed .viya-category__items {display: none;}
.viya-category__items::-webkit-scrollbar {width: 8px;}
.viya-category__items::-webkit-scrollbar-track {background: var(--color-bg-alt);border-radius: 4px;}
.viya-category__items::-webkit-scrollbar-thumb {background: var(--color-border);border-radius: 4px;transition: background var(--transition-fast);}
.viya-category__items::-webkit-scrollbar-thumb:hover {background: var(--section-color, var(--color-bronze));}

.viya-item {background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 0.6rem;transition: all var(--transition-fast);}
.viya-item:hover {border-color: var(--section-color, var(--color-bronze));box-shadow: var(--shadow-md);transform: translateY(-2px);}
.viya-item.is-highlight, .viya-item.is-highlighted {animation: highlightPulse 1.5s ease-out;border-color: var(--section-color, var(--color-bronze)) !important;box-shadow: 0 0 0 4px var(--section-color-light, rgba(205, 127, 50, 0.4)) !important;}
@keyframes highlightPulse {
  0%, 100% {box-shadow: 0 0 0 0 var(--section-color-light, rgba(205, 127, 50, 0.3));}
  50% {box-shadow: 0 0 0 8px var(--section-color-light, rgba(205, 127, 50, 0.3));}
}
.viya-item__main {display: flex;gap: var(--space-md);align-items: flex-start;}
.viya-item__header {display: flex;flex-direction: column;gap: 0.5rem;margin-bottom: 0.5rem;}
.viya-item__thumb {
  width: auto;
  min-width: 140px;
  max-width: 200px;
  aspect-ratio: 3/2;
  align-self: stretch;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.viya-item__name {font-size: 1.125rem;font-weight: 700;margin: 0;color: var(--color-text);}
.viya-item__badges {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-top: 0.25rem;}
.viya-badge {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.3rem 0.7rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.02em;box-shadow: var(--shadow-sm);}
.viya-badge--daily {background: linear-gradient(135deg, #ffd700, #ffed4e);color: #000;}
.viya-badge--weekly {background: linear-gradient(135deg, #ff9800, #ffc107);color: #000;}
.viya-stock-badge {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.3rem 0.7rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.02em;box-shadow: var(--shadow-sm);}
.viya-stock-badge--out {background: linear-gradient(135deg, #f44336, #e57373);color: #fff;}
.viya-stock-badge--low {background: linear-gradient(135deg, #ff9800, #ffb74d);color: #000;}
.viya-item__price {font-family: var(--font-serif);font-size: 1.375rem;font-weight: 700;color: var(--section-color, var(--color-bronze));margin-top: 0.25rem;}
.viya-item__desc {font-size: 0.9375rem;color: var(--color-text-dim);line-height: 1.5;margin-bottom: 0.75rem;}
.viya-item__tags {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 0.5rem;}
}
/* ===== SIMPLE ACTIONS GRID ===== */

/* Grid container - üst üste */
.viya-item__actions-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Basit action buton */
.viya-action-chip {
  display: block;
  width: 100%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.viya-action-chip summary {
  list-style: none;
  user-select: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--section-color, var(--color-bronze));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.viya-action-chip summary::-webkit-details-marker {
  display: none;
}

.viya-action-chip summary::after {
  content: '▸';
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.viya-action-chip[open] summary::after {
  transform: rotate(90deg);
}

/* Hover */
.viya-action-chip:hover {
  border-color: var(--section-color, var(--color-bronze));
  background: var(--color-bg);
}

/* İçerik */
.viya-action-chip__content {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}

/* Details styling */
.viya-item__detail {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.viya-item__detail:last-child {
  margin-bottom: 0;
}

.viya-item__detail strong {
  color: var(--color-text-secondary);
  font-weight: 600;
  min-width: 70px;
}

/* Dark mode */
[data-theme="dark"] .viya-action-chip {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .viya-action-chip:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--section-color);
}

[data-theme="dark"] .viya-action-chip__content {
  border-top-color: rgba(255,255,255,0.1);
}

/* Mobil */
@media (max-width: 640px) {
  .viya-item__actions-grid {
    gap: 0.4rem;
  }
  
  .viya-action-chip summary {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
  }
  
  .viya-action-chip__content {
    padding: 0.6rem;
  }
}

/* Mobil: Tek sütun */
@media (max-width: 640px) {
  .viya-item__actions-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}
/* ===== VİYA ITEM ACTIONS FIX ===== */

/* Actions container - butonlar sağda */
.viya-item__actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-right: -0.6rem;
  padding-right: 0.6rem;
}

/* Sadece 1 buton varsa border-top kaldır */
.viya-item__actions--single {
  border-top: none;
  margin-top: 0.25rem;
  padding-top: 0;
}


/* Customize ve Details temel stiller */
.viya-item__customize,
.viya-item__details {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* AÇIKKEN TAM GENİŞLİK */
.viya-item__customize[open],
.viya-item__details[open] {
  width: 100%;
  flex-basis: 100%;
}

/* Summary (buton) sağa yaslı */
.viya-item__customize summary,
.viya-item__details summary {
  justify-content: flex-end;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--section-color, var(--color-bronze));
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.viya-item__customize summary::after,
.viya-item__details summary::after {
  content: '▸';
  transition: transform var(--transition-fast);
  font-size: 0.75rem;
}

.viya-item__customize[open] summary::after,
.viya-item__details[open] summary::after {
  transform: rotate(90deg);
}

.viya-item__customize summary::-webkit-details-marker,
.viya-item__details summary::-webkit-details-marker {
  display: none;
}

/* İçerik tam genişlik, soldan başlar */
.viya-customize__content,
.viya-item__details-content {
  width: 100%;
  margin-left: 0;
  padding-top: 0.75rem;
  text-align: left;
}

.viya-item__details-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Mobil optimizasyon */
@media (max-width: 640px) {
  .viya-item__actions {
    gap: 0.5rem;
  }
}
.viya-tag {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.25rem 0.625rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 600;background: var(--color-bg-alt);border: 1px solid var(--color-border);}
.viya-tag--vegan {background: #e8f5e9;color: #2e7d32;border-color: #4caf50;}
.viya-tag--vegetarian {background: #fff3e0;color: #e65100;border-color: #ff9800;}
.viya-tag--gluten-free {background: #fff8e1;color: #f57f17;border-color: #fbc02d;}
.viya-tag--dairy-free {background: #f3e5f5;color: #6a1b9a;border-color: #9c27b0;}
.viya-tag--nut-free {background: #fbe9e7;color: #bf360c;border-color: #ff5722;}
.viya-tag--spicy {background: #ffebee;color: #c62828;border-color: #f44336;}
.viya-tag--sweet {background: #fce4ec;color: #ad1457;border-color: #e91e63;}
.viya-tag--savory {background: #e0f2f1;color: #00695c;border-color: #009688;}
.viya-tag--contains-meat {background: #ffcdd2;color: #b71c1c;border-color: #f44336;}
.viya-item__detail {display: flex;flex-direction: column;gap: 0.25rem;font-size: 0.875rem;}
.viya-item__detail strong {font-weight: 700;color: var(--color-text);}
.viya-item__detail span {color: var(--color-text-dim);line-height: 1.4;}

/* --- FOOTER & UTILS --- */
.viya-fold {transition: all var(--transition-base);}
.viya-fold.is-collapsed [data-viya-fold-body] {display: none;}

.is-hidden,.is-hidden-by-filter {display: none;}
.viya-empty {text-align: center;padding: var(--space-xl);color: var(--color-text-dim);font-style: italic;}
*:focus-visible {outline: 2px solid var(--color-bronze);outline-offset: 2px;border-radius: 4px;}

.viya-footer {background: var(--color-bg-alt);border-top: 1px solid var(--color-border);padding: var(--space-lg) 0;margin-top: var(--space-xl);}
.viya-footer__content {width: min(var(--max-width), 94%);margin: 0 auto;text-align: center;}
.viya-footer__text {font-size: 0.875rem;color: var(--color-text-dim);}
.viya-footer__text a {color: var(--color-bronze);font-weight: 600;}
.viya-footer__text a:hover {text-decoration: underline;}

/* --- SPECIAL DAY THEMES --- */
body.special-day--valentines {--color-bronze: #ff69b4;--color-bronze-dark: #ff1493;--color-bronze-light: rgba(255, 105, 180, 0.15);}
body.special-day--christmas {--color-bronze: #c41e3a;--color-bronze-dark: #8b0000;--color-bronze-light: rgba(196, 30, 58, 0.15);}
body.special-day--spring {--color-bronze: #a8dbc9;--color-bronze-dark: #8ac4b0;--color-bronze-light: rgba(168, 219, 201, 0.15);}
body.special-day--summer {--color-bronze: #ffcc80;--color-bronze-dark: #ffb84d;--color-bronze-light: rgba(255, 204, 128, 0.15);}
body.special-day--autumn {--color-bronze: #d9a577;--color-bronze-dark: #c4895c;--color-bronze-light: rgba(217, 165, 119, 0.15);}
body.special-day--winter {--color-bronze: #a8d8f0;--color-bronze-dark: #8ac4dc;--color-bronze-light: rgba(168, 216, 240, 0.15);}

/* Dark Mode Tag Overrides */
[data-theme="dark"] .viya-tag--vegan {background: rgba(76, 175, 80, 0.2);color: #81c784;}
[data-theme="dark"] .viya-tag--vegetarian {background: rgba(255, 152, 0, 0.2);color: #ffb74d;}
[data-theme="dark"] .viya-tag--gluten-free {background: rgba(251, 192, 45, 0.2);color: #fdd835;}
[data-theme="dark"] .viya-tag--dairy-free {background: rgba(156, 39, 176, 0.2);color: #ba68c8;}
[data-theme="dark"] .viya-tag--nut-free {background: rgba(255, 87, 34, 0.2);color: #ff8a65;}
[data-theme="dark"] .viya-pick {background: var(--color-bg-alt);}

/* --- MOBILE & RESPONSIVE --- */
@media (max-width: 960px) {
  :root {--header-height: 60px;}
  .viya-hamburger {display: flex;}
  body.has-special-banner .viya-hero {margin-top: calc(var(--header-height) + 100px);}
  .viya-nav {position: fixed;top: var(--header-height);right: -100%;width: min(280px, 70vw);height: calc(100vh - var(--header-height));background: var(--color-bg);flex-direction: column;align-items: stretch;gap: 0;padding: var(--space-md);box-shadow: var(--shadow-lg);transition: right var(--transition-smooth);border-left: 1px solid var(--color-border);}
  .viya-nav.is-open {right: 0;}
  .viya-nav__link,.viya-icon-btn {width: 100%;justify-content: flex-start;padding: 0.75rem 1rem;border-radius: var(--radius-md);margin-bottom: 0.5rem;}
  .viya-icon-btn {height: auto;}
  .viya-hero {flex-direction: column;height: auto;min-height: calc(100vh - var(--header-height));}
  .viya-panel {min-height: 90px;}
  .viya-panel.is-active {min-height: calc(100vh - var(--header-height) - 180px);}
  .viya-panel__title {transform: translate(-50%, -50%);font-size: 1.5rem;}
  .viya-modal {padding: 1.2rem 0.25rem;} /* Üst/alt +%20, Sağ/sol -%75 */
  .viya-modal__panel {width: 100%;max-height: 95vh;}
  .viya-modal__header {padding: 0.25rem 0.5rem;}
  .viya-modal__title {font-size: 1.25rem;}
  .viya-modal__subtitle {font-size: 0.8125rem;}
  .viya-modal__body {padding: 0.3rem;}
  .viya-filter-bar__title {font-size: 1.125rem;}
  .viya-filter-select {min-width: 0;flex: 1 1 calc(50% - 0.25rem);}
  .viya-category__name {font-size: 1.25rem;}
  .viya-category__items {max-height: 600px;}
  .viya-item__thumb {width: auto;min-width: 100px;max-width: 150px;aspect-ratio: 3/2;align-self: stretch;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
  .viya-menu-switch {width: 100%;order: 3;}
  .viya-menu-switch__btn {flex: 1;min-width: 0;padding: 0.5rem 0.625rem;font-size: 0.75rem;justify-content: center;gap: 0.375rem;}
  .viya-menu-switch__icon svg {width: 16px;height: 16px;}
  .viya-special-banner {font-size: 1.125rem;padding: 1.25rem 1.5rem;min-height: 100px;}
  .viya-special-banner__content {gap: 1.5rem;padding-left: calc(80px + 1.5rem);}
  .viya-special-banner__animation {width: 80px;height: 80px;left: 1.5rem;}
  .viya-special-banner__animation::before {font-size: 4.5rem !important;}
  .viya-special-banner__animation::after {font-size: 1.5rem;}
}

@media (max-width: 640px) {
  .viya-glass {padding: var(--space-md);}
  .viya-btn {font-size: 0.875rem;padding: 0.75rem 1.5rem;}
  .viya-item__thumb {width: 90px;aspect-ratio: 3/2;height: auto;align-self: flex-start;image-rendering: auto;}
  .viya-item {padding: 0.5rem;}
  .viya-item__main {gap: 0.75rem;}
  .viya-item__name {font-size: 1rem;}
  .viya-item__price {font-size: 1.125rem;}
  .viya-item__desc {font-size: 0.875rem;}
  .viya-item__actions {gap: 0.5rem;flex-wrap: wrap;}
  .viya-filter-select {font-size: 0.8125rem;height: 42px;}
  .viya-modal__title {font-size: 1.125rem;}
  .viya-category__name {font-size: 1.125rem;}
}

@media (max-width: 480px) {
    .viya-pick { flex: 0 0 260px; }
}

@media print {
  .viya-header,.viya-footer,.viya-modal__close,.viya-btn,.viya-hamburger,.viya-menu-switch,.viya-filter-bar {display: none;}
  body {background: white;color: black;}
  .viya-modal__panel {box-shadow: none;max-height: none;}
  .viya-category--collapsed .viya-category__items {display: flex;}
}

/* --- OTHER COMPONENTS --- */
.viya-newsletter {background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);border: 1px solid var(--color-border);border-radius: var(--radius-lg);padding: var(--space-xl);margin: var(--space-xl) 0;text-align: center;}
.viya-newsletter__title {font-size: 1.5rem;margin-bottom: var(--space-sm);}
.viya-newsletter__desc {color: var(--color-text-dim);margin-bottom: var(--space-md);}
.viya-newsletter__form {display: flex;gap: var(--space-sm);max-width: 500px;margin: 0 auto;}
.viya-newsletter__input {flex: 1;padding: 0.875rem 1.25rem;border-radius: var(--radius-full);border: 1.5px solid var(--color-border);font-size: 1rem;background: var(--color-bg);color: var(--color-text);transition: all var(--transition-fast);}
.viya-newsletter__input:focus {outline: none;border-color: var(--color-bronze);box-shadow: 0 0 0 3px var(--color-bronze-light);}
.viya-newsletter__btn {padding: 0.875rem 2rem;background: var(--color-bronze);color: #fff;border-radius: var(--radius-full);font-weight: 700;transition: all var(--transition-fast);}
.viya-newsletter__btn:hover {background: var(--color-bronze-dark);transform: translateY(-2px);}

.viya-campaign {position: relative;padding: var(--space-lg);border-radius: var(--radius-lg);overflow: hidden;margin-bottom: var(--space-lg);}
.viya-campaign__bg {position: absolute;inset: 0;background-size: cover;background-position: center;z-index: 0;}
.viya-campaign__overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));z-index: 1;}
.viya-campaign__content {position: relative;z-index: 2;color: #fff;text-align: center;}
.viya-campaign__title {font-size: 2rem;margin-bottom: var(--space-sm);text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.viya-campaign__desc {font-size: 1.125rem;margin-bottom: var(--space-md);opacity: 0.95;}
.viya-campaign__cta {display: inline-block;padding: 1rem 2.5rem;background: #fff;color: var(--color-bronze);border-radius: var(--radius-full);font-weight: 700;transition: all var(--transition-fast);box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
.viya-campaign__cta:hover {transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0,0,0,0.4);}

.viya-social {display: flex;gap: var(--space-sm);justify-content: center;margin: var(--space-lg) 0;}
.viya-social__link {width: 48px;height: 48px;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);display: flex;align-items: center;justify-content: center;transition: all var(--transition-fast);}
.viya-social__link:hover {background: var(--color-bronze);border-color: var(--color-bronze);color: #fff;transform: translateY(-3px);}
.viya-social__link svg {width: 24px;height: 24px;}

.viya-loading {display: inline-block;width: 20px;height: 20px;border: 3px solid var(--color-border);border-top-color: var(--color-bronze);border-radius: 50%;animation: spin 0.8s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}

.viya-toast {position: fixed;bottom: 2rem;right: 2rem;z-index: 10000;background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: var(--space-md);box-shadow: var(--shadow-lg);max-width: 400px;display: none;animation: slideInRight 0.3s;}
.viya-toast.is-visible {display: block;}
.viya-toast--success {border-left: 4px solid var(--color-success);}
.viya-toast--error {border-left: 4px solid var(--color-error);}
.viya-toast--warning {border-left: 4px solid var(--color-warning);}
@keyframes slideInRight {from {transform: translateX(400px);opacity: 0;} to {transform: translateX(0);opacity: 1;}}

.viya-skeleton {background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-border) 50%, var(--color-bg-alt) 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite;}
@keyframes shimmer {to {background-position: -200% 0;}}

.viya-badge--new {background: linear-gradient(135deg, #00bcd4, #0097a7);color: #fff;}
.viya-badge--popular {background: linear-gradient(135deg, #ff5722, #f4511e);color: #fff;}
.viya-badge--vegan {background: linear-gradient(135deg, #4caf50, #388e3c);color: #fff;}
.viya-badge--vegetarian {background: linear-gradient(135deg, #ff9800, #f57c00);color: #fff;}

.viya-divider {height: 1px;background: var(--color-border);margin: var(--space-lg) 0;}

.viya-container {width: min(var(--max-width), 94%);margin: 0 auto;padding: 0 var(--space-md);}

.viya-grid {display: grid;gap: var(--space-lg);}
.viya-grid--2 {grid-template-columns: repeat(2, 1fr);}
.viya-grid--3 {grid-template-columns: repeat(3, 1fr);}
.viya-grid--4 {grid-template-columns: repeat(4, 1fr);}

.viya-scroll-top {position: fixed;bottom: 2rem;right: 2rem;width: 48px;height: 48px;background: var(--color-bronze);color: #fff;border-radius: 50%;display: none;align-items: center;justify-content: center;box-shadow: var(--shadow-md);cursor: pointer;transition: all var(--transition-fast);z-index: 999;}
.viya-scroll-top.is-visible {display: flex;}
.viya-scroll-top:hover {background: var(--color-bronze-dark);transform: translateY(-3px);}
.viya-scroll-top svg {width: 24px;height: 24px;}

.viya-sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}

.viya-special-banner {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 999;
    padding: 1.5rem 2rem; /* Büyük padding */
    font-weight: 700;
    font-size: 1.25rem; /* Çok büyük yazı */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px; /* DEVASA YÜKSEK */
}

/* Content: animation + text yan yana */
.viya-special-banner__content {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 2rem; /* Çok büyük mesafe */
    padding-left: calc(120px + 2rem); /* Lottie genişliği + gap */
}

/* Animation container: DEVASA - Absolute position ile banner'a sabitle */
.viya-special-banner__animation {
    position: absolute;
    left: 2rem; /* Sol tarafta */
    top: 50%; /* Dikey merkez */
    transform: translateY(-50%); /* Tam ortala */
    width: 120px; /* DEVASA */
    height: 120px;
    flex-shrink: 0;
    display: inline-block;
    z-index: 5;
}

/* Emoji'ler merkezde, tek emoji göster (::after gizle) */
.viya-special-banner__animation::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem !important; /* DEVASA EMOJI */
    z-index: 1;
}

.viya-special-banner__animation::after {
    display: none !important; /* İkinci emoji'yi gizle, sadece ::before kullan */
}

/* Lottie SVG container'a sığdır */
.viya-special-banner__animation svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important;
}

/* Lottie yüklendiğinde emoji'leri TAMAMEN kaldır */
.viya-special-banner__animation.has-animation::before,
.viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

/* TÜM TEMALAR için Lottie override (YÜKSEK specificity) */
.viya-special-banner--valentines .viya-special-banner__animation.has-animation::before,
.viya-special-banner--valentines .viya-special-banner__animation.has-animation::after,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::before,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::after,
.viya-special-banner--spring .viya-special-banner__animation.has-animation::before,
.viya-special-banner--spring .viya-special-banner__animation.has-animation::after,
.viya-special-banner--summer .viya-special-banner__animation.has-animation::before,
.viya-special-banner--summer .viya-special-banner__animation.has-animation::after,
.viya-special-banner--autumn .viya-special-banner__animation.has-animation::before,
.viya-special-banner--autumn .viya-special-banner__animation.has-animation::after,
.viya-special-banner--winter .viya-special-banner__animation.has-animation::before,
.viya-special-banner--winter .viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    animation: none !important;
}

.viya-special-banner--valentines {background: linear-gradient(135deg, #ff69b4, #ff1493);color: #fff;}
.viya-special-banner--valentines .viya-special-banner__animation::before {content: '💕';position: absolute;font-size: 2rem;animation: floatHearts 3s ease-in-out infinite;left: 10%;top: 50%;transform: translateY(-50%);}
.viya-special-banner--valentines .viya-special-banner__animation::after {content: '💖';position: absolute;font-size: 2rem;animation: floatHearts 3s ease-in-out infinite 1.5s;right: 10%;top: 50%;transform: translateY(-50%);}
@keyframes floatHearts {0%, 100% {transform: translateY(-50%);opacity: 1;} 50% {transform: translateY(calc(-50% - 10px));opacity: 0.7;}}

.viya-special-banner--christmas {background: linear-gradient(135deg, #c41e3a, #8b0000);color: #fff;}

/* Emoji tanımı - sadece content, pozisyon genel kuralla */
.viya-special-banner--christmas .viya-special-banner__animation::before {
    content: '🎄';
    animation: swingTree 2s ease-in-out infinite;
}

/* Lottie varsa emoji'leri GİZLE - YÜKSEK specificity */
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::before,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
}

@keyframes swingTree {
    0%, 100% {transform: translate(-50%, -50%) rotate(-5deg);} 
    50% {transform: translate(-50%, -50%) rotate(5deg);}
}
@keyframes wave {
    0%, 100% {transform: translate(-50%, -50%) rotate(0deg);} 
    25% {transform: translate(-50%, -50%) rotate(-10deg);} 
    75% {transform: translate(-50%, -50%) rotate(10deg);}
}

.viya-special-banner--spring {background: linear-gradient(135deg, #a8dbc9, #8ac4b0);color: #2d5f4f;}
.viya-special-banner--spring .viya-special-banner__animation::before {content: '🌸';position: absolute;font-size: 2rem;animation: bloom 3s ease-in-out infinite;left: 8%;top: 50%;transform: translateY(-50%);}
.viya-special-banner--spring .viya-special-banner__animation::after {content: '🦋';position: absolute;font-size: 2rem;animation: flutter 4s ease-in-out infinite;right: 8%;top: 50%;transform: translateY(-50%);}
@keyframes bloom {0%, 100% {transform: translateY(-50%) scale(1);} 50% {transform: translateY(-50%) scale(1.2);}}
@keyframes flutter {0%, 100% {transform: translateY(-50%) translateX(0);} 25% {transform: translateY(calc(-50% - 5px)) translateX(-3px);} 75% {transform: translateY(calc(-50% + 5px)) translateX(3px);}}

.viya-special-banner--summer {background: linear-gradient(135deg, #ffcc80, #ffb84d);color: #8b5a00;}
.viya-special-banner--summer .viya-special-banner__animation::before {content: '☀️';position: absolute;font-size: 2rem;animation: rotate 8s linear infinite;left: 5%;top: 50%;transform-origin: center;}
.viya-special-banner--summer .viya-special-banner__animation::after {content: '🏖️';position: absolute;font-size: 2rem;right: 5%;top: 50%;transform: translateY(-50%);}
@keyframes rotate {from {transform: translateY(-50%) rotate(0deg);} to {transform: translateY(-50%) rotate(360deg);}}

.viya-special-banner--autumn {background: linear-gradient(135deg, #d9a577, #c4895c);color: #5a3e2b;}
.viya-special-banner--autumn .viya-special-banner__animation::before {content: '🍂';position: absolute;font-size: 2rem;animation: fall 4s ease-in-out infinite;left: 10%;top: 0;}
.viya-special-banner--autumn .viya-special-banner__animation::after {content: '🍁';position: absolute;font-size: 2rem;animation: fall 4s ease-in-out infinite 2s;right: 10%;top: 0;}
@keyframes fall {0% {transform: translateY(0) rotate(0deg);opacity: 1;} 100% {transform: translateY(40px) rotate(180deg);opacity: 0;}}

.viya-special-banner--winter {background: linear-gradient(135deg, #a8d8f0, #8ac4dc);color: #1a5f7a;}
.viya-special-banner--winter .viya-special-banner__animation::before {content: '❄️';position: absolute;font-size: 2rem;animation: snowfall 3s ease-in-out infinite;left: 15%;top: -10px;}
.viya-special-banner--winter .viya-special-banner__animation::after {content: '⛄';position: absolute;font-size: 2rem;right: 15%;top: 50%;transform: translateY(-50%);}
@keyframes snowfall {0% {transform: translateY(-10px) rotate(0deg);opacity: 1;} 100% {transform: translateY(50px) rotate(360deg);opacity: 0;}}

.viya-special-banner--republic-day {background: linear-gradient(135deg, #e30a17, #c20712);color: #fff;}
.viya-special-banner--republic-day .viya-special-banner__animation::before {content: '🇹🇷';position: absolute;font-size: 2.5rem;left: 5%;top: 50%;transform: translateY(-50%);animation: flagWave 2s ease-in-out infinite;}
.viya-special-banner--republic-day .viya-special-banner__animation::after {content: '🇹🇷';position: absolute;font-size: 2.5rem;right: 5%;top: 50%;transform: translateY(-50%);animation: flagWave 2s ease-in-out infinite 1s;}
@keyframes flagWave {0%, 100% {transform: translateY(-50%) scaleX(1);} 50% {transform: translateY(-50%) scaleX(0.95);}}

.viya-special-banner--victory-day {background: linear-gradient(135deg, #e30a17, #c20712);color: #fff;}
.viya-special-banner--victory-day .viya-special-banner__animation::before {content: '🇹🇷';position: absolute;font-size: 2.5rem;left: 3%;top: 50%;transform: translateY(-50%);animation: proudFlag 3s ease-in-out infinite;}
.viya-special-banner--victory-day .viya-special-banner__animation::after {content: '⭐';position: absolute;font-size: 2rem;right: 3%;top: 50%;transform: translateY(-50%);animation: twinkle 1.5s ease-in-out infinite;}
@keyframes proudFlag {0%, 100% {transform: translateY(-50%) scale(1);} 50% {transform: translateY(-50%) scale(1.05);}}
@keyframes twinkle {0%, 100% {opacity: 1;transform: translateY(-50%) scale(1);} 50% {opacity: 0.5;transform: translateY(-50%) scale(0.9);}}

.viya-special-banner--ataturk-day {background: linear-gradient(135deg, #000000, #2a2a2a);color: #fff;border-bottom: 3px solid #e30a17;}
.viya-special-banner--ataturk-day .viya-special-banner__animation::before {content: '🕊️';position: absolute;font-size: 2rem;left: 10%;top: 50%;transform: translateY(-50%);animation: peaceDove 4s ease-in-out infinite;}
.viya-special-banner--ataturk-day .viya-special-banner__animation::after {content: '🇹🇷';position: absolute;font-size: 2rem;right: 10%;top: 50%;transform: translateY(-50%);opacity: 0.8;}
@keyframes peaceDove {0%, 100% {transform: translateY(-50%) translateX(0);} 50% {transform: translateY(-50%) translateX(10px);}}

.viya-special-banner--ramadan {background: linear-gradient(135deg, #6e48aa, #9d50bb);color: #fff;}
.viya-special-banner--ramadan .viya-special-banner__animation::before {content: '🌙';position: absolute;font-size: 2rem;left: 8%;top: 50%;transform: translateY(-50%);animation: glow 2s ease-in-out infinite;}
.viya-special-banner--ramadan .viya-special-banner__animation::after {content: '⭐';position: absolute;font-size: 1.5rem;right: 8%;top: 50%;transform: translateY(-50%);animation: sparkle 1.5s ease-in-out infinite;}
@keyframes glow {0%, 100% {transform: translateY(-50%) scale(1);filter: brightness(1);} 50% {transform: translateY(-50%) scale(1.1);filter: brightness(1.3);}}
@keyframes sparkle {0%, 100% {transform: translateY(-50%) rotate(0deg) scale(1);opacity: 1;} 50% {transform: translateY(-50%) rotate(180deg) scale(1.2);opacity: 0.7;}}

.viya-special-banner--eid {background: linear-gradient(135deg, #00a86b, #00b377);color: #fff;}
.viya-special-banner--eid .viya-special-banner__animation::before {content: '🎊';position: absolute;font-size: 2rem;left: 10%;top: 50%;transform: translateY(-50%);animation: celebrate 1.5s ease-in-out infinite;}
.viya-special-banner--eid .viya-special-banner__animation::after {content: '🎉';position: absolute;font-size: 2rem;right: 10%;top: 50%;transform: translateY(-50%);animation: celebrate 1.5s ease-in-out infinite 0.75s;}
@keyframes celebrate {0%, 100% {transform: translateY(-50%) scale(1) rotate(0deg);} 50% {transform: translateY(-50%) scale(1.15) rotate(10deg);}}

.viya-special-banner--new-year {background: linear-gradient(135deg, #4a00e0, #8e2de2);color: #fff;}
.viya-special-banner--new-year .viya-special-banner__animation::before {content: '🎆';position: absolute;font-size: 2rem;left: 5%;top: 50%;transform: translateY(-50%);animation: firework 2s ease-in-out infinite;}
.viya-special-banner--new-year .viya-special-banner__animation::after {content: '🍾';position: absolute;font-size: 2rem;right: 5%;top: 50%;transform: translateY(-50%);animation: pop 3s ease-in-out infinite;}
@keyframes firework {0% {transform: translateY(-50%) scale(0.8);opacity: 0.5;} 50% {transform: translateY(-50%) scale(1.2);opacity: 1;} 100% {transform: translateY(-50%) scale(0.8);opacity: 0.5;}}
@keyframes pop {0%, 100% {transform: translateY(-50%) rotate(-5deg);} 50% {transform: translateY(-50%) rotate(5deg);}}

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

/* ==========================================================================
   VİYA FIX: ÖZEL GÜN BANNER & HEADER ÇAKIŞMASI
   ========================================================================== */

/* 1. Banner'ı Header'ın Altına İndir */
.viya-special-banner {
    position: fixed;
    top: var(--header-height); /* 70px (Desktop) veya 60px (Mobil) */
    left: 0;
    right: 0;
    z-index: 990; /* Header (1000) altında, içeriğin üstünde */
    
    /* Görünüm Ayarları */
    min-height: 46px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    /* Animasyonlu giriş */
    animation: bannerSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Hero Alanını Banner Kadar Aşağı İt (CSS Sibling Selector) */
/* Mantık: Eğer HTML'de .viya-special-banner varsa, hemen sonraki .viya-hero'yu it */
.viya-special-banner + .viya-hero {
    margin-top: calc(var(--header-height) + 46px) !important;
}

/* 3. Mobil Uyumluluk */
@media (max-width: 960px) {
    .viya-special-banner {
        top: var(--header-height); /* Mobilde header daha kısa (60px) */
        min-height: 40px;
        font-size: 0.8rem;
    }

    .viya-special-banner + .viya-hero {
        margin-top: calc(var(--header-height) + 40px) !important;
    }
}

/* Giriş Animasyonu */
@keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* =========================================
   VİYA BANNER FIX (Z-INDEX & POSITION)
   ========================================= */

/* 1. Body Class ile Güvenli Boşluk Bırakma */
/* Eğer özel gün bannerı varsa, sayfa içeriğini (Hero) aşağı it */
body.has-special-day .viya-hero {
    margin-top: calc(var(--header-height) + 46px) !important; /* 70px + Banner Yüksekliği */
    transition: margin-top 0.3s ease;
}

/* 2. Banner Konumlandırma */
.viya-special-banner {
    position: fixed;
    top: var(--header-height); /* Header'ın bittiği yerden başla */
    left: 0;
    right: 0;
    height: 46px; /* Sabit yükseklik */
    z-index: 998; /* Header (1000)'ın hemen altı, içeriğin üstü */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: var(--color-bronze); /* Varsayılan renk */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.viya-special-banner__content {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    position: relative;
}

/* 3. Mobil Uyumluluk */
@media (max-width: 960px) {
    /* Mobilde header 60px olduğu için banner da oradan başlasın */
    .viya-special-banner {
        top: 60px; 
        height: 40px;
        font-size: 0.8rem;
    }
    
    /* Mobilde Hero'yu daha az aşağı it */
    body.has-special-day .viya-hero {
        margin-top: calc(60px + 40px) !important;
    }
}

/* 4. Tema Renkleri (PHP'den gelen sınıflara göre) */
body.special-day--valentines .viya-special-banner { background: linear-gradient(90deg, #ff69b4, #ff1493); }
body.special-day--christmas .viya-special-banner { background: linear-gradient(90deg, #c41e3a, #8b0000); }
body.special-day--spring .viya-special-banner { background: linear-gradient(90deg, #a8dbc9, #56ab2f); color: #fff; }
body.special-day--republic-day .viya-special-banner { background: linear-gradient(90deg, #e30a17, #c20712); }
body.special-day--ramadan .viya-special-banner { background: linear-gradient(90deg, #6e48aa, #9d50bb); }
body.special-day--ataturk-day .viya-special-banner { background: #000; border-bottom: 2px solid #e30a17; }

/* Eğer Kampanya Banner'ı da varsa, onu Özel Gün'ün altına al */
body.has-special-day .viya-campaign-banner {
    top: calc(var(--header-height) + 46px);
}
/* =========================================
   POPUP İÇERİK DÜZENLEYİCİ (Gutenberg Fix)
   ========================================= */

/* Popup içindeki metinlere "Nefes" aldıralım */
.viya-prose {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.viya-prose p {
    margin-bottom: 1.25rem; /* Paragraflar arası boşluk */
}

.viya-prose h1, 
.viya-prose h2, 
.viya-prose h3, 
.viya-prose h4 {
    font-family: var(--font-serif);
    color: var(--color-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.viya-prose h2 { font-size: 1.75rem; border-bottom: 2px solid var(--color-bronze-light); padding-bottom: 0.5rem; }
.viya-prose h3 { font-size: 1.5rem; }

.viya-prose ul, 
.viya-prose ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem; /* Madde işaretleri için girinti */
}

.viya-prose ul li {
    list-style-type: disc; /* Nokta işareti */
    margin-bottom: 0.5rem;
}

.viya-prose ol li {
    list-style-type: decimal; /* Sayı işareti */
    margin-bottom: 0.5rem;
}

.viya-prose strong {
    font-weight: 700;
    color: var(--color-text);
}

.viya-prose a {
    color: var(--color-bronze);
    text-decoration: underline;
}

/* Görsellerin taşmasını engelle */
.viya-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

/* =========================================
   GOOGLE MAPS EMBED FIX
   ========================================= */
.viya-map-embed {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--color-bg-alt);
}

.viya-map-embed iframe {
    width: 100% !important;
    height: 450px !important; /* Yükseklik zorunlu */
    border: none;
    display: block;
}

/* Mobilde harita yüksekliği ayarı */
@media (max-width: 768px) {
    .viya-map-embed iframe {
        height: 300px !important;
    }
}

/* ==========================================================================
   VİYA v22.2 - COMPACT DESIGN & FIXES
   ========================================================================== */

/* 1. FILTER BAR (Tek Satır & Yatay Kaydırma) */
.viya-filter-bar__controls {
    display: flex;
    flex-wrap: nowrap !important; /* Asla alt satıra geçme */
    overflow-x: auto; /* Taşarsa kaydır */
    gap: 12px;
    padding-bottom: 5px; /* Scrollbar payı */
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar'ı gizle (Opsiyonel, daha temiz görünüm için) */
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }

.viya-filter-select {
    flex: 0 0 auto; /* İçeriği kadar yer kapla veya sabit genişlik */
    width: 48%; /* Mobilde ekrana iki tane sığsın */
    min-width: 140px;
}

/* 2. COMPACT PRODUCT CARD (Ürün Kartı Daraltma) */
.viya-item {
    padding: 12px !important; /* Boşlukları azalt */
}

.viya-item__main {
    align-items: flex-start; /* Üstten hizala */
}

/* Fiyatı sağa, başlığı sola al */
.viya-item__header {
    display: flex;
    flex-direction: row; /* Yan yana */
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    width: 100%;
}

.viya-item__name {
    font-size: 1.1rem;
    margin: 0;
    padding-right: 10px; /* Fiyatla yapışmasın */
    flex: 1;
}

.viya-item__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--section-color, var(--color-bronze));
    white-space: nowrap; /* Alt satıra inmesin */
    margin-top: 0;
}

/* Açıklama satırını da sıkılaştır */
.viya-item__desc {
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Çok uzunsa 2 satırda kes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. DETAYLAR (Compact Layout) */
.viya-item__details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.viya-item__details summary {
    font-size: 0.8rem;
    padding: 4px 0;
}

.viya-item__details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Yan yana sığdır */
    gap: 8px 16px;
    padding-top: 8px;
    font-size: 0.85rem;
}

/* Detay başlıklarını daha belirgin yap */
.viya-item__detail strong {
    display: block; /* Başlık üstte */
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 2px;
}

/* Etiketleri (Tags) küçült ve yan yana diz */
.viya-item__tags {
    grid-column: 1 / -1; /* Tam genişlik */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.viya-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* Stok ve Rozetler (Header içinde değilse) */
.viya-item__badges {
    margin-top: 4px;
}
.viya-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
}
/* Lottie Sahnesi */
.viya-visual-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* En üstte */
    pointer-events: none; /* Tıklamalar alttaki siteye geçsin */
    overflow: hidden;
    display: none; /* Varsayılan gizli */
}

.viya-visual-stage.is-active {
    display: block;
}

/* Eğer animasyon çok koyu/açıksa biraz şeffaflık verelim */
.viya-visual-stage svg {
    width: 100%;
    height: 100%;
    opacity: 0.8; 
}
/* Banner İçi Lottie Animasyonu */
.viya-special-banner__anim {
    width: 32px;       /* Genişlik */
    height: 32px;      /* Yükseklik */
    margin-left: 10px; /* Yazıdan biraz uzaklaşsın */
    display: none;     /* Yüklü değilse yer kaplamasın */
}

/* Animasyon yüklendiyse göster */
.viya-special-banner__anim.has-animation {
    display: block; 
}

/* Banner'ın düzenini (Flex) koru */
.viya-special-banner {
    justify-content: center; /* Ortala */
    gap: 0; /* İçerik ve anim arası boşluğu margin ile yönetelim */
}
/* ==========================================================================
   VİYA COMPACT & UX FIXES (v22.3)
   ========================================================================== */

/* 1. FILTER BAR (Tek Satır & Yatay Kaydırma) */
.viya-filter-bar__controls {
    display: flex;
    flex-wrap: nowrap !important; /* Asla alt satıra geçme */
    overflow-x: auto; /* Taşarsa kaydır */
    gap: 12px;
    padding-bottom: 5px; /* Scrollbar payı */
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar'ı gizle */
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }

.viya-filter-select {
    flex: 0 0 auto; /* İçeriği kadar yer kapla */
    width: 48%; /* Mobilde ekrana iki tane sığsın */
    min-width: 140px;
    height: 40px; /* Biraz daha ince */
    font-size: 0.85rem;
}

/* 2. COMPACT PRODUCT CARD (Ürün Kartı Daraltma) */
.viya-item {
    padding: 12px !important; /* Boşlukları azalt */
}

.viya-item__main {
    align-items: flex-start; /* Üstten hizala */
}

/* Fiyatı sağa, başlığı sola al */
.viya-item__header {
    display: flex;
    flex-direction: row; /* Yan yana */
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    width: 100%;
}

.viya-item__name {
    font-size: 1.1rem;
    margin: 0;
    padding-right: 10px; /* Fiyatla yapışmasın */
    flex: 1;
    line-height: 1.2;
}

.viya-item__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--section-color, var(--color-bronze));
    white-space: nowrap; /* Alt satıra inmesin */
    margin-top: 0;
}

/* Açıklama satırını da sıkılaştır */
.viya-item__desc {
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Çok uzunsa 2 satırda kes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. DETAYLAR (Compact Grid Layout) */
.viya-item__details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.viya-item__details summary {
    font-size: 0.8rem;
    padding: 4px 0;
    color: var(--color-text-dim);
}

.viya-item__details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Yan yana sığdır */
    gap: 12px;
    padding-top: 8px;
    font-size: 0.85rem;
}

/* Detay başlıklarını daha belirgin yap */
.viya-item__detail strong {
    display: block; /* Başlık üstte */
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 2px;
    letter-spacing: 0.05em;
}

/* Etiketleri (Tags) küçült ve yan yana diz */
.viya-item__tags {
    grid-column: 1 / -1; /* Tam genişlik */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.viya-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* Stok ve Rozetler (Header içinde değilse) */
.viya-item__badges {
    margin-top: 4px;
}
.viya-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
}
/* ==========================================================================
   VİYA MOBILE HEADER FIX (KESİN ÇÖZÜM)
   ========================================================================== */

@media (max-width: 960px) {
    /* 1. Kapsayıcıyı Hamburger'e Yaklaştır */
    .viya-mobile-controls {
        display: flex !important;
        align-items: center;
        margin-right: 12px; /* Hamburger ile aradaki boşluk */
        gap: 0 !important; /* Eski boşlukları sıfırla */
    }

    /* 2. "Hap" (Pill) Kutusu */
    .viya-control-pill {
        display: flex;
        align-items: center;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 100px; /* Tam oval */
        padding: 2px;
        height: 34px; /* Yükseklik */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* 3. İçindeki Butonlar (Eski stilleri ezmek için !important kullanıyoruz) */
    .viya-pill-btn {
        width: auto !important;
        height: 100% !important;
        padding: 0 10px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 100px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: var(--color-text) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        margin: 0 !important;
        box-shadow: none !important; /* Eski gölgeleri sil */
    }

    /* Tıklanınca efekt */
    .viya-pill-btn:active {
        background-color: var(--color-bg-alt) !important;
        opacity: 0.7;
    }

    /* 4. Ortadaki Ayırıcı Çizgi */
    .viya-pill-sep {
        width: 1px;
        height: 14px;
        background-color: var(--color-border);
        opacity: 0.5;
        display: block;
    }

    /* 5. İkon Ayarları */
    .viya-pill-btn .theme-icon {
        font-size: 14px !important;
        line-height: 1;
        display: block;
    }

    /* Dark Mode olduğunda Hap'ın rengi */
    [data-theme="dark"] .viya-control-pill {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.15);
    }
}

/* LOTTIE ANIMASYON KUTUSU AYARI (Görünmesi için şart) */
.viya-special-banner__anim {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}
.viya-special-banner__anim svg {
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 960px) {
    /* Mevcut .viya-mobile-controls kodunu bununla değiştir veya ez: */
    .viya-mobile-controls {
        display: flex !important;
        align-items: center;
        
        /* KRİTİK AYAR: Sola otomatik boşluk vererek sağa yasla */
        margin-left: auto; 
        
        /* Hamburger menü ile aradaki mesafe */
        margin-right: 12px; 
        
        gap: 0 !important;
    }
    
    /* Eğer hap tasarımında bir bozulma varsa bunu da garantiye alalım */
    .viya-control-pill {
        display: flex;
        align-items: center;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        padding: 2px;
        height: 36px; /* Yükseklik */
    }
}
/* =========================================
   LOTTIE BANNER FIX (İSİM DÜZELTİLDİ)
   ========================================= */

/* Lottie animation doğru pozisyonlandırma için satır 500'deki tanım kullanılıyor */

/* Banner düzenini koru */
.viya-special-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================================================
   VİYA DYNAMIC COLOR SYSTEM (RENK ENTEGRASYONU)
   ========================================================================== */

/* 1. FILTER BAR (Arka Planı Temaya Uydur) */
.viya-filter-bar {
    /* Temanın açık tonunu (light) arka plan yap */
    background-color: var(--section-color-light, var(--color-bronze-light)) !important;
    /* Kenarlığı temanın ana rengi yap */
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
}

/* Başlık Rengi */
.viya-filter-bar__title {
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
}

/* Filtre Seçim Kutuları (Select Box) */
.viya-filter-select {
    background-color: #ffffff !important; /* İçi beyaz kalsın ki okunsun */
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
    font-weight: 700;
}

/* 2. KATEGORİ BAŞLIKLARI (Accordions) */
.viya-category__header {
    /* Hafif tema rengi arka plan */
    background-color: var(--section-color-light, var(--color-bronze-light)) !important;
    border-bottom: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
}

/* Kategori ok işareti */
.viya-category__arrow {
    color: var(--section-color, var(--color-bronze)) !important;
}

/* Kategori içindeki ürün sayısı rozeti */
.viya-category__count {
    background-color: #ffffff !important;
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color, var(--color-bronze)) !important;
}

/* 3. SCROLLBAR (Kaydırma Çubukları) */
/* Tüm site genelinde veya menü içindeki scrollbarlar */
::-webkit-scrollbar-thumb {
    background-color: var(--section-color, var(--color-bronze)) !important;
    border-radius: 10px;
}

/* Filtre ve Picks alanındaki yatay kaydırma çubuğu */
.viya-filter-bar__controls::-webkit-scrollbar-thumb,
.viya-picks__rail::-webkit-scrollbar-thumb {
    background-color: var(--section-color, var(--color-bronze)) !important;
}

/* 4. BUTONLAR & ETİKETLER */
/* Butonlar inline style veya default CSS'den rengini alır */
.viya-btn {
    color: #ffffff !important;
    border: none !important;
}

.viya-btn:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Fiyatlar */
.viya-item__price, 
.viya-pick__price {
    color: var(--section-color, var(--color-bronze)) !important;
}

/* Special Picks Etiketleri */
.viya-pick__badge {
    color: var(--section-color, var(--color-bronze)) !important;
    border-color: var(--section-color, var(--color-bronze)) !important;
}

/* Cross-Sell Kartları (Vurgulu Kenarlık) */
.viya-cross-sell__card:hover {
    border-color: var(--section-color, var(--color-bronze)) !important;
}
/* ==========================================================================
   VİYA ULTIMATE COLOR OVERRIDE (ÖZEL GÜN VE OPAK FİLTRE DÜZELTMESİ)
   ========================================================================== */

/* 1. ÖZEL GÜN RENGİNİ ZORLA (FORCE THEME COLOR) */
/* Eğer body'de "special-day" sınıfı varsa, menülerin kendi renklerini yok say */
body[class*="special-day--"] .viya-modal {
    --section-color: var(--color-bronze) !important;
    --section-color-light: var(--color-bronze-light) !important;
    --section-color-dark: var(--color-bronze-dark) !important;
}

/* 2. FILTER BAR (OPAK & RENKLİ) */
.viya-filter-bar {
    /* Arka planı bembeyaz (veya dark modda simsiyah) yap ki alttaki yazılar görünmesin */
    background-color: var(--color-bg) !important;
    
    /* Üstüne hafif tema rengi at (Opak görünüm için linear-gradient hilesi) */
    background-image: linear-gradient(to right, var(--section-color-light), var(--section-color-light)) !important;
    
    /* Kenarlık ve Gölge */
    border: 1px solid var(--section-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    
    /* Yapışkanlık ayarı (Sticky çalışması için z-index artırıldı) */
    z-index: 90 !important; 
}

/* 3. SCROLLBAR (Tema Rengiyle Uyumlu) */
.viya-filter-bar__controls::-webkit-scrollbar-thumb,
.viya-picks__rail::-webkit-scrollbar-thumb,
.viya-category__items::-webkit-scrollbar-thumb {
    background-color: var(--section-color) !important;
    border-radius: 10px;
    border: 2px solid var(--color-bg); /* Kenarlardan boşluk ver */
}

.viya-filter-bar__controls::-webkit-scrollbar,
.viya-picks__rail::-webkit-scrollbar {
    height: 6px; /* Biraz daha belirgin yapalım */
    display: block; /* Mobilde de görünsün */
}

/* 4. KATEGORİ BAŞLIKLARI (Tema Rengi) */
.viya-category__header {
    background-color: var(--color-bg) !important; /* Önce zemin */
    background-image: linear-gradient(to right, var(--section-color-light), var(--section-color-light)) !important; /* Sonra renk */
    color: var(--section-color-dark) !important;
    border-bottom: 1px solid var(--section-color) !important;
}

.viya-category__name {
    color: var(--section-color-dark) !important;
}

/* 5. BUTONLAR VE FİYATLAR (Kesin Renk) */
.viya-btn, 
.viya-pick__cta {
    background-color: var(--section-color) !important;
    color: #ffffff !important;
}

.viya-item__price, 
.viya-pick__price {
    color: var(--section-color) !important;
}

.viya-filter-select {
    border: 1px solid var(--section-color) !important;
    color: var(--section-color-dark) !important;
    background-color: var(--color-bg) !important;
}
/* --- MOBİL TOGGLE DÜZELTMESİ (Sağa Yasla) --- */
@media (max-width: 960px) {
    .viya-mobile-controls {
        display: flex !important;
        align-items: center;
        /* Bu ikili sağa iter */
        margin-left: auto !important; 
        margin-right: 12px !important;
        gap: 0 !important;
    }

    .viya-control-pill {
        display: flex;
        align-items: center;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 999px;
        padding: 2px;
        height: 34px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* İçerik Temizliği */
    .viya-pill-btn {
        width: auto !important;
        height: 100% !important;
        border: none !important;
        background: transparent !important;
        border-radius: 999px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        font-size: 0.75rem !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
    }
    
    .viya-pill-sep {
        width: 1px;
        height: 14px;
        background: var(--color-border);
        margin: 0 2px;
        opacity: 0.5;
    }
}

/* --- "MENÜYE GEÇ" BUTONU (PREMIUM DESIGN) --- */
.viya-pick__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    
    /* Premium Stil */
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    /* Renkler (Tema Rengi) */
    color: var(--section-color, var(--color-bronze));
    background: transparent;
    border: 1px solid var(--section-color, var(--color-bronze));
    border-radius: 8px; /* Hafif kavis */
    
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.viya-pick__cta:hover {
    background: var(--section-color, var(--color-bronze));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Küçük bir ok ikonu ekleyelim */
.viya-pick__cta::after {
    /* content: '→'; */ /* Zaten HTML'de varsa gerek yok */
    margin-left: 6px;
    transition: transform 0.3s;
}

.viya-pick__cta:hover::after {
    transform: translateX(4px);
}
/*
Theme Name: VİYA v22.1 - Ultimate Edition
Description: Complete Feature Set & Premium UX Design
*/

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-text: #1a1a1a;
  --color-text-dim: #666666;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-bronze: #cd7f32;
  --color-bronze-light: rgba(205, 127, 50, 0.15);
  --color-bronze-dark: #a86628;
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-whatsapp: #25d366;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --header-height: 70px;
  --max-width: 1440px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --color-bg: #0d0d0d;
  --color-bg-alt: #1a1a1a;
  --color-text: #f1f1f1;
  --color-text-dim: #aaaaaa;
  --color-border: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(20, 20, 20, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;}
body {font-family: var(--font-sans);color: var(--color-text);background: var(--color-bg);line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: hidden;transition: background var(--transition-base), color var(--transition-base);}
img {max-width: 100%;height: auto;display: block;}
a {color: inherit;text-decoration: none;transition: color var(--transition-fast);}
button {font-family: inherit;cursor: pointer;border: none;background: none;color: inherit;}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-serif);font-weight: 700;line-height: 1.2;color: var(--color-text);}
h1 {font-size: clamp(2.5rem, 5vw, 4rem);}
h2 {font-size: clamp(2rem, 4vw, 3rem);}
h3 {font-size: clamp(1.5rem, 3vw, 2rem);}
h4 {font-size: 1.25rem;}
::selection {background: var(--color-bronze);color: #ffffff;}

/* --- HEADER & NAV --- */
.viya-header {position: fixed;top: 0;left: 0;right: 0;height: var(--header-height);z-index: 1000;background: var(--glass-bg);backdrop-filter: blur(20px);border-bottom: 1px solid var(--color-border);}
.viya-header__inner {width: min(var(--max-width), 94%);height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: var(--space-lg);padding: 0 var(--space-md);}
.viya-header__left {display: flex;align-items: center;gap: var(--space-md);}
.viya-brand {display: flex;align-items: center;gap: 0.75rem;transition: opacity var(--transition-fast);}
.viya-brand:hover {opacity: 0.8;}
.viya-brand__logo img {height: 50px;width: auto;}
.viya-brand__name {font-family: var(--font-serif);font-size: 1.5rem;font-weight: 900;letter-spacing: -0.02em;}
.viya-slogan {font-size: 0.875rem;color: var(--color-text-dim);font-style: italic;display: none;}

.viya-nav {display: flex;align-items: center;gap: 0.5rem;}
.viya-nav__link {padding: 0.625rem 1rem;font-size: 0.875rem;font-weight: 600;color: var(--color-text);border-radius: var(--radius-full);transition: all var(--transition-fast);position: relative;}
.viya-nav__link::after {content: '';position: absolute;bottom: 0.25rem;left: 50%;transform: translateX(-50%) scaleX(0);width: 60%;height: 2px;background: var(--color-bronze);transition: transform var(--transition-fast);}
.viya-nav__link:hover::after {transform: translateX(-50%) scaleX(1);}
.viya-icon-btn {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);transition: all var(--transition-fast);}
.viya-icon-btn:hover {background: var(--color-bronze-light);border-color: var(--color-bronze);transform: translateY(-2px);}
.viya-icon-btn svg {width: 20px;height: 20px;}

.viya-hamburger {display: none;flex-direction: column;justify-content: space-between;width: 28px;height: 20px;cursor: pointer;z-index: 1001;}
.viya-hamburger span {display: block;width: 100%;height: 3px;background: var(--color-text);border-radius: 2px;transition: all 0.3s;}
.viya-hamburger.is-open span:nth-child(1) {transform: translateY(8.5px) rotate(45deg);}
.viya-hamburger.is-open span:nth-child(2) {opacity: 0;}
.viya-hamburger.is-open span:nth-child(3) {transform: translateY(-8.5px) rotate(-45deg);}

/* --- HERO SECTION --- */
.viya-hero {display: flex;height: calc(100vh - var(--header-height));margin-top: var(--header-height);}

/* Special banner aktifken hero aşağı in */
body.has-special-banner .viya-hero {margin-top: calc(var(--header-height) + 140px);}
.viya-panel {flex: 1;position: relative;overflow: hidden;cursor: pointer;transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);}
.viya-panel__bg {position: absolute;inset: 0;background-size: cover;background-position: center;transition: transform 0.6s;}
.viya-panel:hover .viya-panel__bg {transform: scale(1.05);}
.viya-panel__overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));transition: opacity 0.4s;}
.viya-panel.is-active .viya-panel__overlay {opacity: 0.3;}
.viya-panel__title {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-90deg);color: #ffffff;font-size: clamp(2rem, 4vw, 3.5rem);font-weight: 900;letter-spacing: 0.1em;text-transform: uppercase;opacity: 0.9;text-shadow: 0 4px 20px rgba(0,0,0,0.5);transition: opacity 0.6s;pointer-events: none;}
.viya-panel.is-active .viya-panel__title {opacity: 0;}
.viya-panel__content {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;padding: var(--space-xl);opacity: 0;transform: translateY(30px);transition: all 0.6s;pointer-events: none;}
.viya-panel.is-active .viya-panel__content {opacity: 1;transform: translateY(0);pointer-events: all;}
.viya-panel.is-active {flex: 3;}
.viya-glass {background: var(--glass-bg);backdrop-filter: blur(20px);border-radius: var(--radius-lg);padding: var(--space-xl);max-width: 500px;text-align: center;border: 1px solid var(--glass-border);}
.viya-kicker {font-size: 0.875rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--color-bronze);margin-bottom: 0.5rem;}
.viya-section-title {margin-bottom: var(--space-sm);}
.viya-desc {color: var(--color-text-dim);margin-bottom: var(--space-lg);}

/* --- MODAL SYSTEM --- */
.viya-modal {position: fixed;inset: 0;z-index: 9999;display: none;align-items: center;justify-content: center;padding: var(--space-md);}
.viya-modal.is-open {display: flex;}
.viya-modal__backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(4px);}
.viya-modal__panel {position: relative;width: min(1200px, 100%);max-height: 90vh;background: var(--color-bg);border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);display: flex;flex-direction: column;overflow: hidden;}
.viya-modal__header {display: flex;align-items: center;justify-content: space-between;padding: 0.5rem 0.75rem;border-bottom: 1px solid var(--color-border);gap: 0.5rem;flex-shrink: 0;flex-wrap: wrap;}
.viya-modal__title-wrapper {flex: 1;min-width: 200px;}
.viya-modal__title {font-size: 1.75rem;margin: 0;}
.viya-modal__subtitle {font-size: 0.875rem;color: var(--color-text-dim);margin-top: 0.25rem;font-style: italic;}
.viya-modal__close {width: 44px;height: 44px;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);font-size: 1.5rem;line-height: 1;flex-shrink: 0;transition: all var(--transition-fast);}
.viya-modal__close:hover {background: var(--color-bronze-light);border-color: var(--color-bronze);transform: rotate(90deg);}
.viya-modal__body {flex: 1;overflow-y: auto;overflow-x: hidden; padding: 0.6rem; position: relative;}

/* --- BUTTONS & CONTROLS --- */
.viya-menu-switch {display: flex;gap: 0.5rem;flex-wrap: wrap;}
.viya-menu-switch__btn {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;border-radius: var(--radius-full);background: var(--color-bg-alt);border: 1px solid var(--color-border);font-size: 0.875rem;font-weight: 600;transition: all var(--transition-fast);}
.viya-menu-switch__btn:hover {background: var(--section-color-light, var(--color-bronze-light));border-color: var(--section-color, var(--color-bronze));transform: translateY(-1px);}
.viya-menu-switch__icon {display: flex;align-items: center;justify-content: center;}
.viya-menu-switch__icon svg {width: 18px;height: 18px;}
.viya-menu-switch__label {white-space: nowrap;}

.viya-btn {display: inline-flex;align-items: center;justify-content: center;padding: 0.875rem 2rem;font-size: 1rem;font-weight: 700;color: #ffffff;background: var(--color-bronze);border-radius: var(--radius-full);transition: all var(--transition-fast);box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);border: none;cursor: pointer;}
.viya-btn:hover {background: var(--color-bronze-dark);transform: translateY(-2px);box-shadow: 0 6px 16px rgba(205, 127, 50, 0.4);}

/* --- FILTER BAR --- */
.viya-filter-bar {position: sticky; top: 0; z-index: 50;background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 0.6rem;margin-bottom: 0.5rem;box-shadow: var(--shadow-sm);}
.viya-filter-bar__title {font-family: var(--font-serif);font-size: 1.25rem;font-weight: 700;margin-bottom: 0.25rem;color: var(--color-text);}
.viya-filter-bar__controls {display: flex;gap: var(--space-sm);flex-wrap: wrap;}
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }
.viya-filter-select {flex: 1;min-width: 180px;height: 44px;padding: 0 var(--space-md);border-radius: var(--radius-md);border: 1.5px solid var(--color-border);background: var(--color-bg);color: var(--color-text);font-weight: 600;font-size: 0.875rem;cursor: pointer;transition: all var(--transition-fast);appearance: none;background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 1rem center;}
.viya-filter-select:hover {border-color: var(--section-color, var(--color-bronze));}
.viya-filter-select:focus {outline: none;border-color: var(--section-color, var(--color-bronze));box-shadow: 0 0 0 3px var(--section-color-light, rgba(205, 127, 50, 0.15));}

/* --- SPECIAL PICKS (SIGNATURE BAR) - PREMIUM EDITION --- */
.viya-picks {
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-radius: 24px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
}

.viya-picks__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.viya-picks__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

.viya-picks__hint {
    font-size: 0.85rem;
    color: var(--color-text-dim);
    font-weight: 400;
}

/* Horizontal Scroll Rail */
.viya-picks__rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.viya-picks__rail::-webkit-scrollbar {
    height: 4px;
}
.viya-picks__rail::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin: 0 20px;
}
.viya-picks__rail::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Product Cards */
.viya-pick {
    flex: 0 0 280px;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: visible;
}

.viya-pick:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--section-color, var(--color-bronze));
}


.viya-pick__thumb {
    width: auto;
    min-width: 90px;
    max-width: 110px;
    aspect-ratio: 3/2;
    align-self: stretch;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border);
}
.viya-pick__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
}

.viya-pick__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--section-color, var(--color-bronze));
    border: 1px solid var(--section-color, var(--color-bronze));
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.9);
}

.viya-pick__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-serif);
}

.viya-pick__price {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--section-color, var(--color-bronze));
}

/* --- CROSS SELL (Restored & Refined) --- */
.viya-picks--cross {
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: 30px 0 0 0;
    margin-top: var(--space-xl);
}

.viya-picks--cross .viya-pick__badge {
    background: var(--section-color-light);
    border: none;
    color: var(--section-color, var(--color-bronze));
}

.viya-pick__cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dim);
    margin-top: 4px;
    display: block;
}

/* --- MENU CATEGORIES & ITEMS --- */
.viya-menu-list {display: flex;flex-direction: column;gap: 0.625rem;}
.viya-category {border: 1px solid var(--color-border);border-radius: var(--radius-md);overflow: hidden;background: var(--color-bg);transition: border-color var(--transition-fast);}
.viya-category:hover {border-color: var(--section-color-light, rgba(205, 127, 50, 0.3));}
.viya-category__header {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0.6rem;background: var(--color-bg-alt);border: none;cursor: pointer;transition: background var(--transition-fast);}
.viya-category__header:hover {background: var(--section-color-light, rgba(205, 127, 50, 0.08));}
.viya-category__info {display: flex;align-items: baseline;gap: var(--space-sm);}
.viya-category__name {font-size: 1.5rem;font-weight: 900;margin: 0;letter-spacing: -0.01em;color: var(--color-text);}
.viya-category__count {font-size: 0.875rem;font-weight: 600;color: var(--color-text-dim);padding: 0.25rem 0.625rem;background: var(--color-bg);border-radius: var(--radius-full);border: 1px solid var(--color-border);}
.viya-category__arrow {font-size: 1.125rem;transition: transform var(--transition-base);color: var(--color-text-dim);}
.viya-category--collapsed .viya-category__arrow {transform: rotate(-90deg);}
.viya-category__items {max-height: 800px;overflow-y: auto;padding: 0.6rem;display: flex;flex-direction: column;gap: 0.6rem;}
.viya-category--collapsed .viya-category__items {display: none;}
.viya-category__items::-webkit-scrollbar {width: 8px;}
.viya-category__items::-webkit-scrollbar-track {background: var(--color-bg-alt);border-radius: 4px;}
.viya-category__items::-webkit-scrollbar-thumb {background: var(--color-border);border-radius: 4px;transition: background var(--transition-fast);}
.viya-category__items::-webkit-scrollbar-thumb:hover {background: var(--section-color, var(--color-bronze));}

.viya-item {background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 0.6rem;transition: all var(--transition-fast);}
.viya-item:hover {border-color: var(--section-color, var(--color-bronze));box-shadow: var(--shadow-md);transform: translateY(-2px);}
.viya-item.is-highlight, .viya-item.is-highlighted {animation: highlightPulse 1.5s ease-out;border-color: var(--section-color, var(--color-bronze)) !important;box-shadow: 0 0 0 4px var(--section-color-light, rgba(205, 127, 50, 0.4)) !important;}
@keyframes highlightPulse {
  0%, 100% {box-shadow: 0 0 0 0 var(--section-color-light, rgba(205, 127, 50, 0.3));}
  50% {box-shadow: 0 0 0 8px var(--section-color-light, rgba(205, 127, 50, 0.3));}
}
.viya-item__content {flex: 1;min-width: 0;}
.viya-item__main {display: flex;gap: var(--space-md);align-items: flex-start;}
.viya-item__thumb {
  width: auto;
  min-width: 140px;
  max-width: 200px;
  aspect-ratio: 3/2;
  align-self: stretch;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.viya-item__header {display: flex;flex-direction: column;gap: 0.5rem;margin-bottom: 0.5rem;}
.viya-item__name {font-size: 1.125rem;font-weight: 700;margin: 0;color: var(--color-text);}
.viya-item__badges {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-top: 0.25rem;}
.viya-badge {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.3rem 0.7rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.02em;box-shadow: var(--shadow-sm);}
.viya-badge--daily {background: linear-gradient(135deg, #ffd700, #ffed4e);color: #000;}
.viya-badge--weekly {background: linear-gradient(135deg, #ff9800, #ffc107);color: #000;}
.viya-stock-badge {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.3rem 0.7rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.02em;box-shadow: var(--shadow-sm);}
.viya-stock-badge--out {background: linear-gradient(135deg, #f44336, #e57373);color: #fff;}
.viya-stock-badge--low {background: linear-gradient(135deg, #ff9800, #ffb74d);color: #000;}
.viya-item__price {font-family: var(--font-serif);font-size: 1.375rem;font-weight: 700;color: var(--section-color, var(--color-bronze));margin-top: 0.25rem;}
.viya-item__desc {font-size: 0.9375rem;color: var(--color-text-dim);line-height: 1.5;margin-bottom: 0.75rem;}
.viya-item__tags {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 0.5rem;}
/* ===== VİYA ITEM ACTIONS FIX ===== */

/* Actions container - butonlar sağda */
.viya-item__actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-right: -0.6rem;
  padding-right: 0.6rem;
}

/* Sadece 1 buton varsa border-top kaldır */
.viya-item__actions--single {
  border-top: none;
  margin-top: 0.25rem;
  padding-top: 0;
}


/* Customize ve Details temel stiller */
.viya-item__customize,
.viya-item__details {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* AÇIKKEN TAM GENİŞLİK */
.viya-item__customize[open],
.viya-item__details[open] {
  width: 100%;
  flex-basis: 100%;
}

/* Summary (buton) sağa yaslı */
.viya-item__customize summary,
.viya-item__details summary {
  justify-content: flex-end;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--section-color, var(--color-bronze));
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.viya-item__customize summary::after,
.viya-item__details summary::after {
  content: '▸';
  transition: transform var(--transition-fast);
  font-size: 0.75rem;
}

.viya-item__customize[open] summary::after,
.viya-item__details[open] summary::after {
  transform: rotate(90deg);
}

.viya-item__customize summary::-webkit-details-marker,
.viya-item__details summary::-webkit-details-marker {
  display: none;
}

/* İçerik tam genişlik, soldan başlar */
.viya-customize__content,
.viya-item__details-content {
  width: 100%;
  margin-left: 0;
  padding-top: 0.75rem;
  text-align: left;
}

.viya-item__details-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Mobil optimizasyon */
@media (max-width: 640px) {
  .viya-item__actions {
    gap: 0.5rem;
  }
}
.viya-tag {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.25rem 0.625rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 600;background: var(--color-bg-alt);border: 1px solid var(--color-border);}
.viya-tag--vegan {background: #e8f5e9;color: #2e7d32;border-color: #4caf50;}
.viya-tag--vegetarian {background: #fff3e0;color: #e65100;border-color: #ff9800;}
.viya-tag--gluten-free {background: #fff8e1;color: #f57f17;border-color: #fbc02d;}
.viya-tag--dairy-free {background: #f3e5f5;color: #6a1b9a;border-color: #9c27b0;}
.viya-tag--nut-free {background: #fbe9e7;color: #bf360c;border-color: #ff5722;}
.viya-tag--spicy {background: #ffebee;color: #c62828;border-color: #f44336;}
.viya-tag--sweet {background: #fce4ec;color: #ad1457;border-color: #e91e63;}
.viya-tag--savory {background: #e0f2f1;color: #00695c;border-color: #009688;}
.viya-tag--contains-meat {background: #ffcdd2;color: #b71c1c;border-color: #f44336;}
.viya-item__detail {display: flex;flex-direction: column;gap: 0.25rem;font-size: 0.875rem;}
.viya-item__detail strong {font-weight: 700;color: var(--color-text);}
.viya-item__detail span {color: var(--color-text-dim);line-height: 1.4;}

/* --- FOOTER & UTILS --- */
.viya-fold {transition: all var(--transition-base);}
.viya-fold.is-collapsed [data-viya-fold-body] {display: none;}

.is-hidden,.is-hidden-by-filter {display: none;}
.viya-empty {text-align: center;padding: var(--space-xl);color: var(--color-text-dim);font-style: italic;}
*:focus-visible {outline: 2px solid var(--color-bronze);outline-offset: 2px;border-radius: 4px;}

.viya-footer {background: var(--color-bg-alt);border-top: 1px solid var(--color-border);padding: var(--space-lg) 0;margin-top: var(--space-xl);}
.viya-footer__content {width: min(var(--max-width), 94%);margin: 0 auto;text-align: center;}
.viya-footer__text {font-size: 0.875rem;color: var(--color-text-dim);}
.viya-footer__text a {color: var(--color-bronze);font-weight: 600;}
.viya-footer__text a:hover {text-decoration: underline;}

/* --- SPECIAL DAY THEMES --- */
body.special-day--valentines {--color-bronze: #ff69b4;--color-bronze-dark: #ff1493;--color-bronze-light: rgba(255, 105, 180, 0.15);}
body.special-day--christmas {--color-bronze: #c41e3a;--color-bronze-dark: #8b0000;--color-bronze-light: rgba(196, 30, 58, 0.15);}
body.special-day--spring {--color-bronze: #a8dbc9;--color-bronze-dark: #8ac4b0;--color-bronze-light: rgba(168, 219, 201, 0.15);}
body.special-day--summer {--color-bronze: #ffcc80;--color-bronze-dark: #ffb84d;--color-bronze-light: rgba(255, 204, 128, 0.15);}
body.special-day--autumn {--color-bronze: #d9a577;--color-bronze-dark: #c4895c;--color-bronze-light: rgba(217, 165, 119, 0.15);}
body.special-day--winter {--color-bronze: #a8d8f0;--color-bronze-dark: #8ac4dc;--color-bronze-light: rgba(168, 216, 240, 0.15);}

/* Dark Mode Tag Overrides */
[data-theme="dark"] .viya-tag--vegan {background: rgba(76, 175, 80, 0.2);color: #81c784;}
[data-theme="dark"] .viya-tag--vegetarian {background: rgba(255, 152, 0, 0.2);color: #ffb74d;}
[data-theme="dark"] .viya-tag--gluten-free {background: rgba(251, 192, 45, 0.2);color: #fdd835;}
[data-theme="dark"] .viya-tag--dairy-free {background: rgba(156, 39, 176, 0.2);color: #ba68c8;}
[data-theme="dark"] .viya-tag--nut-free {background: rgba(255, 87, 34, 0.2);color: #ff8a65;}
[data-theme="dark"] .viya-pick {background: var(--color-bg-alt);}

/* --- MOBILE & RESPONSIVE --- */
@media (max-width: 960px) {
  :root {--header-height: 60px;}
  .viya-hamburger {display: flex;}
  body.has-special-banner .viya-hero {margin-top: calc(var(--header-height) + 100px);}
  .viya-nav {position: fixed;top: var(--header-height);right: -100%;width: min(280px, 70vw);height: calc(100vh - var(--header-height));background: var(--color-bg);flex-direction: column;align-items: stretch;gap: 0;padding: var(--space-md);box-shadow: var(--shadow-lg);transition: right var(--transition-smooth);border-left: 1px solid var(--color-border);}
  .viya-nav.is-open {right: 0;}
  .viya-nav__link,.viya-icon-btn {width: 100%;justify-content: flex-start;padding: 0.75rem 1rem;border-radius: var(--radius-md);margin-bottom: 0.5rem;}
  .viya-icon-btn {height: auto;}
  .viya-hero {flex-direction: column;height: auto;min-height: calc(100vh - var(--header-height));}
  .viya-panel {min-height: 90px;}
  .viya-panel.is-active {min-height: calc(100vh - var(--header-height) - 180px);}
  .viya-panel__title {transform: translate(-50%, -50%);font-size: 1.5rem;}
  .viya-modal {padding: 1.2rem 0.25rem;} /* Üst/alt +%20, Sağ/sol -%75 */
  .viya-modal__panel {width: 100%;max-height: 95vh;}
  .viya-modal__header {padding: 0.25rem 0.5rem;}
  .viya-modal__title {font-size: 1.25rem;}
  .viya-modal__subtitle {font-size: 0.8125rem;}
  .viya-modal__body {padding: 0.3rem;}
  .viya-filter-bar__title {font-size: 1.125rem;}
  .viya-filter-select {min-width: 0;flex: 1 1 calc(50% - 0.25rem);}
  .viya-category__name {font-size: 1.25rem;}
  .viya-category__items {max-height: 600px;}
  .viya-item__thumb {width: auto;min-width: 100px;max-width: 150px;aspect-ratio: 3/2;align-self: stretch;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
  .viya-menu-switch {width: 100%;order: 3;}
  .viya-menu-switch__btn {flex: 1;min-width: 0;padding: 0.5rem 0.625rem;font-size: 0.75rem;justify-content: center;gap: 0.375rem;}
  .viya-menu-switch__icon svg {width: 16px;height: 16px;}
  .viya-special-banner {font-size: 1.125rem;padding: 1.25rem 1.5rem;min-height: 100px;}
  .viya-special-banner__content {gap: 1.5rem;padding-left: calc(80px + 1.5rem);}
  .viya-special-banner__animation {width: 80px;height: 80px;left: 1.5rem;}
  .viya-special-banner__animation::before {font-size: 4.5rem !important;}
  .viya-special-banner__animation::after {font-size: 1.5rem;}
}

@media (max-width: 640px) {
  .viya-glass {padding: var(--space-md);}
  .viya-btn {font-size: 0.875rem;padding: 0.75rem 1.5rem;}
  .viya-item__thumb {width: 90px;aspect-ratio: 3/2;height: auto;align-self: flex-start;image-rendering: auto;}
  .viya-item {padding: 0.5rem;}
  .viya-item__main {gap: 0.75rem;}
  .viya-item__name {font-size: 1rem;}
  .viya-item__price {font-size: 1.125rem;}
  .viya-item__desc {font-size: 0.875rem;}
  .viya-item__actions {gap: 0.5rem;flex-wrap: wrap;}
  .viya-filter-select {font-size: 0.8125rem;height: 42px;}
  .viya-modal__title {font-size: 1.125rem;}
  .viya-category__name {font-size: 1.125rem;}
}

@media (max-width: 480px) {
    .viya-pick { flex: 0 0 260px; }
}

@media print {
  .viya-header,.viya-footer,.viya-modal__close,.viya-btn,.viya-hamburger,.viya-menu-switch,.viya-filter-bar {display: none;}
  body {background: white;color: black;}
  .viya-modal__panel {box-shadow: none;max-height: none;}
  .viya-category--collapsed .viya-category__items {display: flex;}
}

/* --- OTHER COMPONENTS --- */
.viya-newsletter {background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);border: 1px solid var(--color-border);border-radius: var(--radius-lg);padding: var(--space-xl);margin: var(--space-xl) 0;text-align: center;}
.viya-newsletter__title {font-size: 1.5rem;margin-bottom: var(--space-sm);}
.viya-newsletter__desc {color: var(--color-text-dim);margin-bottom: var(--space-md);}
.viya-newsletter__form {display: flex;gap: var(--space-sm);max-width: 500px;margin: 0 auto;}
.viya-newsletter__input {flex: 1;padding: 0.875rem 1.25rem;border-radius: var(--radius-full);border: 1.5px solid var(--color-border);font-size: 1rem;background: var(--color-bg);color: var(--color-text);transition: all var(--transition-fast);}
.viya-newsletter__input:focus {outline: none;border-color: var(--color-bronze);box-shadow: 0 0 0 3px var(--color-bronze-light);}
.viya-newsletter__btn {padding: 0.875rem 2rem;background: var(--color-bronze);color: #fff;border-radius: var(--radius-full);font-weight: 700;transition: all var(--transition-fast);}
.viya-newsletter__btn:hover {background: var(--color-bronze-dark);transform: translateY(-2px);}

.viya-campaign {position: relative;padding: var(--space-lg);border-radius: var(--radius-lg);overflow: hidden;margin-bottom: var(--space-lg);}
.viya-campaign__bg {position: absolute;inset: 0;background-size: cover;background-position: center;z-index: 0;}
.viya-campaign__overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));z-index: 1;}
.viya-campaign__content {position: relative;z-index: 2;color: #fff;text-align: center;}
.viya-campaign__title {font-size: 2rem;margin-bottom: var(--space-sm);text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.viya-campaign__desc {font-size: 1.125rem;margin-bottom: var(--space-md);opacity: 0.95;}
.viya-campaign__cta {display: inline-block;padding: 1rem 2.5rem;background: #fff;color: var(--color-bronze);border-radius: var(--radius-full);font-weight: 700;transition: all var(--transition-fast);box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
.viya-campaign__cta:hover {transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0,0,0,0.4);}

.viya-social {display: flex;gap: var(--space-sm);justify-content: center;margin: var(--space-lg) 0;}
.viya-social__link {width: 48px;height: 48px;border-radius: 50%;background: var(--color-bg-alt);border: 1px solid var(--color-border);display: flex;align-items: center;justify-content: center;transition: all var(--transition-fast);}
.viya-social__link:hover {background: var(--color-bronze);border-color: var(--color-bronze);color: #fff;transform: translateY(-3px);}
.viya-social__link svg {width: 24px;height: 24px;}

.viya-loading {display: inline-block;width: 20px;height: 20px;border: 3px solid var(--color-border);border-top-color: var(--color-bronze);border-radius: 50%;animation: spin 0.8s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}

.viya-toast {position: fixed;bottom: 2rem;right: 2rem;z-index: 10000;background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: var(--space-md);box-shadow: var(--shadow-lg);max-width: 400px;display: none;animation: slideInRight 0.3s;}
.viya-toast.is-visible {display: block;}
.viya-toast--success {border-left: 4px solid var(--color-success);}
.viya-toast--error {border-left: 4px solid var(--color-error);}
.viya-toast--warning {border-left: 4px solid var(--color-warning);}
@keyframes slideInRight {from {transform: translateX(400px);opacity: 0;} to {transform: translateX(0);opacity: 1;}}

.viya-skeleton {background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-border) 50%, var(--color-bg-alt) 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite;}
@keyframes shimmer {to {background-position: -200% 0;}}

.viya-badge--new {background: linear-gradient(135deg, #00bcd4, #0097a7);color: #fff;}
.viya-badge--popular {background: linear-gradient(135deg, #ff5722, #f4511e);color: #fff;}
.viya-badge--vegan {background: linear-gradient(135deg, #4caf50, #388e3c);color: #fff;}
.viya-badge--vegetarian {background: linear-gradient(135deg, #ff9800, #f57c00);color: #fff;}

.viya-divider {height: 1px;background: var(--color-border);margin: var(--space-lg) 0;}

.viya-container {width: min(var(--max-width), 94%);margin: 0 auto;padding: 0 var(--space-md);}

.viya-grid {display: grid;gap: var(--space-lg);}
.viya-grid--2 {grid-template-columns: repeat(2, 1fr);}
.viya-grid--3 {grid-template-columns: repeat(3, 1fr);}
.viya-grid--4 {grid-template-columns: repeat(4, 1fr);}

.viya-scroll-top {position: fixed;bottom: 2rem;right: 2rem;width: 48px;height: 48px;background: var(--color-bronze);color: #fff;border-radius: 50%;display: none;align-items: center;justify-content: center;box-shadow: var(--shadow-md);cursor: pointer;transition: all var(--transition-fast);z-index: 999;}
.viya-scroll-top.is-visible {display: flex;}
.viya-scroll-top:hover {background: var(--color-bronze-dark);transform: translateY(-3px);}
.viya-scroll-top svg {width: 24px;height: 24px;}

.viya-sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}

.viya-special-banner {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 999;
    padding: 1.5rem 2rem; /* Büyük padding */
    font-weight: 700;
    font-size: 1.25rem; /* Çok büyük yazı */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px; /* DEVASA YÜKSEK */
}

/* Content: animation + text yan yana */
.viya-special-banner__content {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 2rem; /* Çok büyük mesafe */
    padding-left: calc(120px + 2rem); /* Lottie genişliği + gap */
}

/* Animation container: DEVASA - Absolute position ile banner'a sabitle */
.viya-special-banner__animation {
    position: absolute;
    left: 2rem; /* Sol tarafta */
    top: 50%; /* Dikey merkez */
    transform: translateY(-50%); /* Tam ortala */
    width: 120px; /* DEVASA */
    height: 120px;
    flex-shrink: 0;
    display: inline-block;
    z-index: 5;
}

/* Emoji'ler merkezde, tek emoji göster (::after gizle) */
.viya-special-banner__animation::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem !important; /* DEVASA EMOJI */
    z-index: 1;
}

.viya-special-banner__animation::after {
    display: none !important; /* İkinci emoji'yi gizle, sadece ::before kullan */
}

/* Lottie SVG container'a sığdır */
.viya-special-banner__animation svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important;
}

/* Lottie yüklendiğinde emoji'leri TAMAMEN kaldır */
.viya-special-banner__animation.has-animation::before,
.viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

/* TÜM TEMALAR için Lottie override (YÜKSEK specificity) */
.viya-special-banner--valentines .viya-special-banner__animation.has-animation::before,
.viya-special-banner--valentines .viya-special-banner__animation.has-animation::after,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::before,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::after,
.viya-special-banner--spring .viya-special-banner__animation.has-animation::before,
.viya-special-banner--spring .viya-special-banner__animation.has-animation::after,
.viya-special-banner--summer .viya-special-banner__animation.has-animation::before,
.viya-special-banner--summer .viya-special-banner__animation.has-animation::after,
.viya-special-banner--autumn .viya-special-banner__animation.has-animation::before,
.viya-special-banner--autumn .viya-special-banner__animation.has-animation::after,
.viya-special-banner--winter .viya-special-banner__animation.has-animation::before,
.viya-special-banner--winter .viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    animation: none !important;
}

.viya-special-banner--valentines {background: linear-gradient(135deg, #ff69b4, #ff1493);color: #fff;}
.viya-special-banner--valentines .viya-special-banner__animation::before {content: '💕';position: absolute;font-size: 2rem;animation: floatHearts 3s ease-in-out infinite;left: 10%;top: 50%;transform: translateY(-50%);}
.viya-special-banner--valentines .viya-special-banner__animation::after {content: '💖';position: absolute;font-size: 2rem;animation: floatHearts 3s ease-in-out infinite 1.5s;right: 10%;top: 50%;transform: translateY(-50%);}
@keyframes floatHearts {0%, 100% {transform: translateY(-50%);opacity: 1;} 50% {transform: translateY(calc(-50% - 10px));opacity: 0.7;}}

.viya-special-banner--christmas {background: linear-gradient(135deg, #c41e3a, #8b0000);color: #fff;}

/* Emoji tanımı - sadece content, pozisyon genel kuralla */
.viya-special-banner--christmas .viya-special-banner__animation::before {
    content: '🎄';
    animation: swingTree 2s ease-in-out infinite;
}

/* Lottie varsa emoji'leri GİZLE - YÜKSEK specificity */
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::before,
.viya-special-banner--christmas .viya-special-banner__animation.has-animation::after {
    content: none !important;
    display: none !important;
}

@keyframes swingTree {
    0%, 100% {transform: translate(-50%, -50%) rotate(-5deg);} 
    50% {transform: translate(-50%, -50%) rotate(5deg);}
}
@keyframes wave {
    0%, 100% {transform: translate(-50%, -50%) rotate(0deg);} 
    25% {transform: translate(-50%, -50%) rotate(-10deg);} 
    75% {transform: translate(-50%, -50%) rotate(10deg);}
}

.viya-special-banner--spring {background: linear-gradient(135deg, #a8dbc9, #8ac4b0);color: #2d5f4f;}
.viya-special-banner--spring .viya-special-banner__animation::before {content: '🌸';position: absolute;font-size: 2rem;animation: bloom 3s ease-in-out infinite;left: 8%;top: 50%;transform: translateY(-50%);}
.viya-special-banner--spring .viya-special-banner__animation::after {content: '🦋';position: absolute;font-size: 2rem;animation: flutter 4s ease-in-out infinite;right: 8%;top: 50%;transform: translateY(-50%);}
@keyframes bloom {0%, 100% {transform: translateY(-50%) scale(1);} 50% {transform: translateY(-50%) scale(1.2);}}
@keyframes flutter {0%, 100% {transform: translateY(-50%) translateX(0);} 25% {transform: translateY(calc(-50% - 5px)) translateX(-3px);} 75% {transform: translateY(calc(-50% + 5px)) translateX(3px);}}

.viya-special-banner--summer {background: linear-gradient(135deg, #ffcc80, #ffb84d);color: #8b5a00;}
.viya-special-banner--summer .viya-special-banner__animation::before {content: '☀️';position: absolute;font-size: 2rem;animation: rotate 8s linear infinite;left: 5%;top: 50%;transform-origin: center;}
.viya-special-banner--summer .viya-special-banner__animation::after {content: '🏖️';position: absolute;font-size: 2rem;right: 5%;top: 50%;transform: translateY(-50%);}
@keyframes rotate {from {transform: translateY(-50%) rotate(0deg);} to {transform: translateY(-50%) rotate(360deg);}}

.viya-special-banner--autumn {background: linear-gradient(135deg, #d9a577, #c4895c);color: #5a3e2b;}
.viya-special-banner--autumn .viya-special-banner__animation::before {content: '🍂';position: absolute;font-size: 2rem;animation: fall 4s ease-in-out infinite;left: 10%;top: 0;}
.viya-special-banner--autumn .viya-special-banner__animation::after {content: '🍁';position: absolute;font-size: 2rem;animation: fall 4s ease-in-out infinite 2s;right: 10%;top: 0;}
@keyframes fall {0% {transform: translateY(0) rotate(0deg);opacity: 1;} 100% {transform: translateY(40px) rotate(180deg);opacity: 0;}}

.viya-special-banner--winter {background: linear-gradient(135deg, #a8d8f0, #8ac4dc);color: #1a5f7a;}
.viya-special-banner--winter .viya-special-banner__animation::before {content: '❄️';position: absolute;font-size: 2rem;animation: snowfall 3s ease-in-out infinite;left: 15%;top: -10px;}
.viya-special-banner--winter .viya-special-banner__animation::after {content: '⛄';position: absolute;font-size: 2rem;right: 15%;top: 50%;transform: translateY(-50%);}
@keyframes snowfall {0% {transform: translateY(-10px) rotate(0deg);opacity: 1;} 100% {transform: translateY(50px) rotate(360deg);opacity: 0;}}

.viya-special-banner--republic-day {background: linear-gradient(135deg, #e30a17, #c20712);color: #fff;}
.viya-special-banner--republic-day .viya-special-banner__animation::before {content: '🇹🇷';position: absolute;font-size: 2.5rem;left: 5%;top: 50%;transform: translateY(-50%);animation: flagWave 2s ease-in-out infinite;}
.viya-special-banner--republic-day .viya-special-banner__animation::after {content: '🇹🇷';position: absolute;font-size: 2.5rem;right: 5%;top: 50%;transform: translateY(-50%);animation: flagWave 2s ease-in-out infinite 1s;}
@keyframes flagWave {0%, 100% {transform: translateY(-50%) scaleX(1);} 50% {transform: translateY(-50%) scaleX(0.95);}}

.viya-special-banner--victory-day {background: linear-gradient(135deg, #e30a17, #c20712);color: #fff;}
.viya-special-banner--victory-day .viya-special-banner__animation::before {content: '🇹🇷';position: absolute;font-size: 2.5rem;left: 3%;top: 50%;transform: translateY(-50%);animation: proudFlag 3s ease-in-out infinite;}
.viya-special-banner--victory-day .viya-special-banner__animation::after {content: '⭐';position: absolute;font-size: 2rem;right: 3%;top: 50%;transform: translateY(-50%);animation: twinkle 1.5s ease-in-out infinite;}
@keyframes proudFlag {0%, 100% {transform: translateY(-50%) scale(1);} 50% {transform: translateY(-50%) scale(1.05);}}
@keyframes twinkle {0%, 100% {opacity: 1;transform: translateY(-50%) scale(1);} 50% {opacity: 0.5;transform: translateY(-50%) scale(0.9);}}

.viya-special-banner--ataturk-day {background: linear-gradient(135deg, #000000, #2a2a2a);color: #fff;border-bottom: 3px solid #e30a17;}
.viya-special-banner--ataturk-day .viya-special-banner__animation::before {content: '🕊️';position: absolute;font-size: 2rem;left: 10%;top: 50%;transform: translateY(-50%);animation: peaceDove 4s ease-in-out infinite;}
.viya-special-banner--ataturk-day .viya-special-banner__animation::after {content: '🇹🇷';position: absolute;font-size: 2rem;right: 10%;top: 50%;transform: translateY(-50%);opacity: 0.8;}
@keyframes peaceDove {0%, 100% {transform: translateY(-50%) translateX(0);} 50% {transform: translateY(-50%) translateX(10px);}}

.viya-special-banner--ramadan {background: linear-gradient(135deg, #6e48aa, #9d50bb);color: #fff;}
.viya-special-banner--ramadan .viya-special-banner__animation::before {content: '🌙';position: absolute;font-size: 2rem;left: 8%;top: 50%;transform: translateY(-50%);animation: glow 2s ease-in-out infinite;}
.viya-special-banner--ramadan .viya-special-banner__animation::after {content: '⭐';position: absolute;font-size: 1.5rem;right: 8%;top: 50%;transform: translateY(-50%);animation: sparkle 1.5s ease-in-out infinite;}
@keyframes glow {0%, 100% {transform: translateY(-50%) scale(1);filter: brightness(1);} 50% {transform: translateY(-50%) scale(1.1);filter: brightness(1.3);}}
@keyframes sparkle {0%, 100% {transform: translateY(-50%) rotate(0deg) scale(1);opacity: 1;} 50% {transform: translateY(-50%) rotate(180deg) scale(1.2);opacity: 0.7;}}

.viya-special-banner--eid {background: linear-gradient(135deg, #00a86b, #00b377);color: #fff;}
.viya-special-banner--eid .viya-special-banner__animation::before {content: '🎊';position: absolute;font-size: 2rem;left: 10%;top: 50%;transform: translateY(-50%);animation: celebrate 1.5s ease-in-out infinite;}
.viya-special-banner--eid .viya-special-banner__animation::after {content: '🎉';position: absolute;font-size: 2rem;right: 10%;top: 50%;transform: translateY(-50%);animation: celebrate 1.5s ease-in-out infinite 0.75s;}
@keyframes celebrate {0%, 100% {transform: translateY(-50%) scale(1) rotate(0deg);} 50% {transform: translateY(-50%) scale(1.15) rotate(10deg);}}

.viya-special-banner--new-year {background: linear-gradient(135deg, #4a00e0, #8e2de2);color: #fff;}
.viya-special-banner--new-year .viya-special-banner__animation::before {content: '🎆';position: absolute;font-size: 2rem;left: 5%;top: 50%;transform: translateY(-50%);animation: firework 2s ease-in-out infinite;}
.viya-special-banner--new-year .viya-special-banner__animation::after {content: '🍾';position: absolute;font-size: 2rem;right: 5%;top: 50%;transform: translateY(-50%);animation: pop 3s ease-in-out infinite;}
@keyframes firework {0% {transform: translateY(-50%) scale(0.8);opacity: 0.5;} 50% {transform: translateY(-50%) scale(1.2);opacity: 1;} 100% {transform: translateY(-50%) scale(0.8);opacity: 0.5;}}
@keyframes pop {0%, 100% {transform: translateY(-50%) rotate(-5deg);} 50% {transform: translateY(-50%) rotate(5deg);}}

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

/* ==========================================================================
   VİYA FIX: ÖZEL GÜN BANNER & HEADER ÇAKIŞMASI
   ========================================================================== */

/* 1. Banner'ı Header'ın Altına İndir */
.viya-special-banner {
    position: fixed;
    top: var(--header-height); /* 70px (Desktop) veya 60px (Mobil) */
    left: 0;
    right: 0;
    z-index: 990; /* Header (1000) altında, içeriğin üstünde */
    
    /* Görünüm Ayarları */
    min-height: 46px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    /* Animasyonlu giriş */
    animation: bannerSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Hero Alanını Banner Kadar Aşağı İt (CSS Sibling Selector) */
/* Mantık: Eğer HTML'de .viya-special-banner varsa, hemen sonraki .viya-hero'yu it */
.viya-special-banner + .viya-hero {
    margin-top: calc(var(--header-height) + 46px) !important;
}

/* 3. Mobil Uyumluluk */
@media (max-width: 960px) {
    .viya-special-banner {
        top: var(--header-height); /* Mobilde header daha kısa (60px) */
        min-height: 40px;
        font-size: 0.8rem;
    }

    .viya-special-banner + .viya-hero {
        margin-top: calc(var(--header-height) + 40px) !important;
    }
}

/* Giriş Animasyonu */
@keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* =========================================
   VİYA BANNER FIX (Z-INDEX & POSITION)
   ========================================= */

/* 1. Body Class ile Güvenli Boşluk Bırakma */
/* Eğer özel gün bannerı varsa, sayfa içeriğini (Hero) aşağı it */
body.has-special-day .viya-hero {
    margin-top: calc(var(--header-height) + 46px) !important; /* 70px + Banner Yüksekliği */
    transition: margin-top 0.3s ease;
}

/* 2. Banner Konumlandırma */
.viya-special-banner {
    position: fixed;
    top: var(--header-height); /* Header'ın bittiği yerden başla */
    left: 0;
    right: 0;
    height: 46px; /* Sabit yükseklik */
    z-index: 998; /* Header (1000)'ın hemen altı, içeriğin üstü */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: var(--color-bronze); /* Varsayılan renk */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.viya-special-banner__content {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    position: relative;
}

/* 3. Mobil Uyumluluk */
@media (max-width: 960px) {
    /* Mobilde header 60px olduğu için banner da oradan başlasın */
    .viya-special-banner {
        top: 60px; 
        height: 40px;
        font-size: 0.8rem;
    }
    
    /* Mobilde Hero'yu daha az aşağı it */
    body.has-special-day .viya-hero {
        margin-top: calc(60px + 40px) !important;
    }
}

/* 4. Tema Renkleri (PHP'den gelen sınıflara göre) */
body.special-day--valentines .viya-special-banner { background: linear-gradient(90deg, #ff69b4, #ff1493); }
body.special-day--christmas .viya-special-banner { background: linear-gradient(90deg, #c41e3a, #8b0000); }
body.special-day--spring .viya-special-banner { background: linear-gradient(90deg, #a8dbc9, #56ab2f); color: #fff; }
body.special-day--republic-day .viya-special-banner { background: linear-gradient(90deg, #e30a17, #c20712); }
body.special-day--ramadan .viya-special-banner { background: linear-gradient(90deg, #6e48aa, #9d50bb); }
body.special-day--ataturk-day .viya-special-banner { background: #000; border-bottom: 2px solid #e30a17; }

/* Eğer Kampanya Banner'ı da varsa, onu Özel Gün'ün altına al */
body.has-special-day .viya-campaign-banner {
    top: calc(var(--header-height) + 46px);
}
/* =========================================
   POPUP İÇERİK DÜZENLEYİCİ (Gutenberg Fix)
   ========================================= */

/* Popup içindeki metinlere "Nefes" aldıralım */
.viya-prose {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.viya-prose p {
    margin-bottom: 1.25rem; /* Paragraflar arası boşluk */
}

.viya-prose h1, 
.viya-prose h2, 
.viya-prose h3, 
.viya-prose h4 {
    font-family: var(--font-serif);
    color: var(--color-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.viya-prose h2 { font-size: 1.75rem; border-bottom: 2px solid var(--color-bronze-light); padding-bottom: 0.5rem; }
.viya-prose h3 { font-size: 1.5rem; }

.viya-prose ul, 
.viya-prose ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem; /* Madde işaretleri için girinti */
}

.viya-prose ul li {
    list-style-type: disc; /* Nokta işareti */
    margin-bottom: 0.5rem;
}

.viya-prose ol li {
    list-style-type: decimal; /* Sayı işareti */
    margin-bottom: 0.5rem;
}

.viya-prose strong {
    font-weight: 700;
    color: var(--color-text);
}

.viya-prose a {
    color: var(--color-bronze);
    text-decoration: underline;
}

/* Görsellerin taşmasını engelle */
.viya-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

/* =========================================
   GOOGLE MAPS EMBED FIX
   ========================================= */
.viya-map-embed {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--color-bg-alt);
}

.viya-map-embed iframe {
    width: 100% !important;
    height: 450px !important; /* Yükseklik zorunlu */
    border: none;
    display: block;
}

/* Mobilde harita yüksekliği ayarı */
@media (max-width: 768px) {
    .viya-map-embed iframe {
        height: 300px !important;
    }
}

/* ==========================================================================
   VİYA v22.2 - COMPACT DESIGN & FIXES
   ========================================================================== */

/* 1. FILTER BAR (Tek Satır & Yatay Kaydırma) */
.viya-filter-bar__controls {
    display: flex;
    flex-wrap: nowrap !important; /* Asla alt satıra geçme */
    overflow-x: auto; /* Taşarsa kaydır */
    gap: 12px;
    padding-bottom: 5px; /* Scrollbar payı */
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar'ı gizle (Opsiyonel, daha temiz görünüm için) */
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }

.viya-filter-select {
    flex: 0 0 auto; /* İçeriği kadar yer kapla veya sabit genişlik */
    width: 48%; /* Mobilde ekrana iki tane sığsın */
    min-width: 140px;
}

/* 2. COMPACT PRODUCT CARD (Ürün Kartı Daraltma) */
.viya-item {
    padding: 12px !important; /* Boşlukları azalt */
}

.viya-item__main {
    align-items: flex-start; /* Üstten hizala */
}

/* Fiyatı sağa, başlığı sola al */
.viya-item__header {
    display: flex;
    flex-direction: row; /* Yan yana */
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    width: 100%;
}

.viya-item__name {
    font-size: 1.1rem;
    margin: 0;
    padding-right: 10px; /* Fiyatla yapışmasın */
    flex: 1;
}

.viya-item__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--section-color, var(--color-bronze));
    white-space: nowrap; /* Alt satıra inmesin */
    margin-top: 0;
}

/* Açıklama satırını da sıkılaştır */
.viya-item__desc {
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Çok uzunsa 2 satırda kes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. DETAYLAR (Compact Layout) */
.viya-item__details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.viya-item__details summary {
    font-size: 0.8rem;
    padding: 4px 0;
}

.viya-item__details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Yan yana sığdır */
    gap: 8px 16px;
    padding-top: 8px;
    font-size: 0.85rem;
}

/* Detay başlıklarını daha belirgin yap */
.viya-item__detail strong {
    display: block; /* Başlık üstte */
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 2px;
}

/* Etiketleri (Tags) küçült ve yan yana diz */
.viya-item__tags {
    grid-column: 1 / -1; /* Tam genişlik */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.viya-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* Stok ve Rozetler (Header içinde değilse) */
.viya-item__badges {
    margin-top: 4px;
}
.viya-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
}
/* Lottie Sahnesi */
.viya-visual-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* En üstte */
    pointer-events: none; /* Tıklamalar alttaki siteye geçsin */
    overflow: hidden;
    display: none; /* Varsayılan gizli */
}

.viya-visual-stage.is-active {
    display: block;
}

/* Eğer animasyon çok koyu/açıksa biraz şeffaflık verelim */
.viya-visual-stage svg {
    width: 100%;
    height: 100%;
    opacity: 0.8; 
}
/* Banner İçi Lottie Animasyonu */
.viya-special-banner__anim {
    width: 32px;       /* Genişlik */
    height: 32px;      /* Yükseklik */
    margin-left: 10px; /* Yazıdan biraz uzaklaşsın */
    display: none;     /* Yüklü değilse yer kaplamasın */
}

/* Animasyon yüklendiyse göster */
.viya-special-banner__anim.has-animation {
    display: block; 
}

/* Banner'ın düzenini (Flex) koru */
.viya-special-banner {
    justify-content: center; /* Ortala */
    gap: 0; /* İçerik ve anim arası boşluğu margin ile yönetelim */
}
/* ==========================================================================
   VİYA COMPACT & UX FIXES (v22.3)
   ========================================================================== */

/* 1. FILTER BAR (Tek Satır & Yatay Kaydırma) */
.viya-filter-bar__controls {
    display: flex;
    flex-wrap: nowrap !important; /* Asla alt satıra geçme */
    overflow-x: auto; /* Taşarsa kaydır */
    gap: 12px;
    padding-bottom: 5px; /* Scrollbar payı */
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar'ı gizle */
.viya-filter-bar__controls::-webkit-scrollbar { display: none; }
.viya-filter-bar__controls { scrollbar-width: none; }

.viya-filter-select {
    flex: 0 0 auto; /* İçeriği kadar yer kapla */
    width: 48%; /* Mobilde ekrana iki tane sığsın */
    min-width: 140px;
    height: 40px; /* Biraz daha ince */
    font-size: 0.85rem;
}

/* 2. COMPACT PRODUCT CARD (Ürün Kartı Daraltma) */
.viya-item {
    padding: 12px !important; /* Boşlukları azalt */
}

.viya-item__main {
    align-items: flex-start; /* Üstten hizala */
}

/* Fiyatı sağa, başlığı sola al */
.viya-item__header {
    display: flex;
    flex-direction: row; /* Yan yana */
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    width: 100%;
}

.viya-item__name {
    font-size: 1.1rem;
    margin: 0;
    padding-right: 10px; /* Fiyatla yapışmasın */
    flex: 1;
    line-height: 1.2;
}

.viya-item__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--section-color, var(--color-bronze));
    white-space: nowrap; /* Alt satıra inmesin */
    margin-top: 0;
}

/* Açıklama satırını da sıkılaştır */
.viya-item__desc {
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Çok uzunsa 2 satırda kes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. DETAYLAR (Compact Grid Layout) */
.viya-item__details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.viya-item__details summary {
    font-size: 0.8rem;
    padding: 4px 0;
    color: var(--color-text-dim);
}

.viya-item__details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Yan yana sığdır */
    gap: 12px;
    padding-top: 8px;
    font-size: 0.85rem;
}

/* Detay başlıklarını daha belirgin yap */
.viya-item__detail strong {
    display: block; /* Başlık üstte */
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 2px;
    letter-spacing: 0.05em;
}

/* Etiketleri (Tags) küçült ve yan yana diz */
.viya-item__tags {
    grid-column: 1 / -1; /* Tam genişlik */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.viya-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* Stok ve Rozetler (Header içinde değilse) */
.viya-item__badges {
    margin-top: 4px;
}
.viya-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
}
/* ==========================================================================
   VİYA MOBILE HEADER FIX (KESİN ÇÖZÜM)
   ========================================================================== */

@media (max-width: 960px) {
    /* 1. Kapsayıcıyı Hamburger'e Yaklaştır */
    .viya-mobile-controls {
        display: flex !important;
        align-items: center;
        margin-right: 12px; /* Hamburger ile aradaki boşluk */
        gap: 0 !important; /* Eski boşlukları sıfırla */
    }

    /* 2. "Hap" (Pill) Kutusu */
    .viya-control-pill {
        display: flex;
        align-items: center;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 100px; /* Tam oval */
        padding: 2px;
        height: 34px; /* Yükseklik */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* 3. İçindeki Butonlar (Eski stilleri ezmek için !important kullanıyoruz) */
    .viya-pill-btn {
        width: auto !important;
        height: 100% !important;
        padding: 0 10px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 100px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: var(--color-text) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        margin: 0 !important;
        box-shadow: none !important; /* Eski gölgeleri sil */
    }

    /* Tıklanınca efekt */
    .viya-pill-btn:active {
        background-color: var(--color-bg-alt) !important;
        opacity: 0.7;
    }

    /* 4. Ortadaki Ayırıcı Çizgi */
    .viya-pill-sep {
        width: 1px;
        height: 14px;
        background-color: var(--color-border);
        opacity: 0.5;
        display: block;
    }

    /* 5. İkon Ayarları */
    .viya-pill-btn .theme-icon {
        font-size: 14px !important;
        line-height: 1;
        display: block;
    }

    /* Dark Mode olduğunda Hap'ın rengi */
    [data-theme="dark"] .viya-control-pill {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.15);
    }
}

/* LOTTIE ANIMASYON KUTUSU AYARI (Görünmesi için şart) */
.viya-special-banner__anim {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}
.viya-special-banner__anim svg {
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 960px) {
    /* Mevcut .viya-mobile-controls kodunu bununla değiştir veya ez: */
    .viya-mobile-controls {
        display: flex !important;
        align-items: center;
        
        /* KRİTİK AYAR: Sola otomatik boşluk vererek sağa yasla */
        margin-left: auto; 
        
        /* Hamburger menü ile aradaki mesafe */
        margin-right: 12px; 
        
        gap: 0 !important;
    }
    
    /* Eğer hap tasarımında bir bozulma varsa bunu da garantiye alalım */
    .viya-control-pill {
        display: flex;
        align-items: center;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        padding: 2px;
        height: 36px; /* Yükseklik */
    }
}
/* =========================================
   LOTTIE BANNER FIX (İSİM DÜZELTİLDİ)
   ========================================= */

/* Lottie animation doğru pozisyonlandırma için satır 500'deki tanım kullanılıyor */

/* Banner düzenini koru */
.viya-special-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================================================
   VİYA DYNAMIC COLOR SYSTEM (RENK ENTEGRASYONU)
   ========================================================================== */

/* 1. FILTER BAR (Arka Planı Temaya Uydur) */
.viya-filter-bar {
    /* Temanın açık tonunu (light) arka plan yap */
    background-color: var(--section-color-light, var(--color-bronze-light)) !important;
    /* Kenarlığı temanın ana rengi yap */
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
}

/* Başlık Rengi */
.viya-filter-bar__title {
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
}

/* Filtre Seçim Kutuları (Select Box) */
.viya-filter-select {
    background-color: #ffffff !important; /* İçi beyaz kalsın ki okunsun */
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
    font-weight: 700;
}

/* 2. KATEGORİ BAŞLIKLARI (Accordions) */
.viya-category__header {
    /* Hafif tema rengi arka plan */
    background-color: var(--section-color-light, var(--color-bronze-light)) !important;
    border-bottom: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color-dark, var(--color-bronze-dark)) !important;
}

/* Kategori ok işareti */
.viya-category__arrow {
    color: var(--section-color, var(--color-bronze)) !important;
}

/* Kategori içindeki ürün sayısı rozeti */
.viya-category__count {
    background-color: #ffffff !important;
    border: 1px solid var(--section-color, var(--color-bronze)) !important;
    color: var(--section-color, var(--color-bronze)) !important;
}

/* 3. SCROLLBAR (Kaydırma Çubukları) */
/* Tüm site genelinde veya menü içindeki scrollbarlar */
::-webkit-scrollbar-thumb {
    background-color: var(--section-color, var(--color-bronze)) !important;
    border-radius: 10px;
}

/* Filtre ve Picks alanındaki yatay kaydırma çubuğu */
.viya-filter-bar__controls::-webkit-scrollbar-thumb,
.viya-picks__rail::-webkit-scrollbar-thumb {
    background-color: var(--section-color, var(--color-bronze)) !important;
}

/* 4. BUTONLAR & ETİKETLER */
/* Butonlar inline style veya default CSS'den rengini alır */
.viya-btn {
    color: #ffffff !important;
    border: none !important;
}

.viya-btn:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Fiyatlar */
.viya-item__price, 
.viya-pick__price {
    color: var(--section-color, var(--color-bronze)) !important;
}

/* Special Picks Etiketleri */
.viya-pick__badge {
    color: var(--section-color, var(--color-bronze)) !important;
    border-color: var(--section-color, var(--color-bronze)) !important;
}

/* Cross-Sell Kartları (Vurgulu Kenarlık) */
.viya-cross-sell__card:hover {
    border-color: var(--section-color, var(--color-bronze)) !important;
}
/* ==========================================================================
   VİYA FINAL FIX: MOBİL UYUMLU RENK & HİZALAMA
   ========================================================================== */

/* 1. BAŞLIK BÜYÜTME (Mobilde de büyük kalsın) */
.viya-modal__title {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    /* Rengi tema renginden alıp %40 koyulaştırıyoruz */
    color: var(--section-color) !important;
    filter: brightness(0.6) !important; 
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

/* Mobilde biraz daha ölçekli ama yine de büyük */
@media (max-width: 600px) {
    .viya-modal__title {
        font-size: 2rem !important;
    }
}

/* 2. MENÜ GEÇİŞ BUTONLARI (Viya Çikolata vb.) */
/* Butonlar tema rengini alacak ve koyulaşacak */
.viya-menu-switch__btn {
    border: 1px solid var(--section-color) !important;
    color: var(--section-color) !important;
    background: transparent !important;
    filter: brightness(0.8) !important; /* Rengi biraz koyulaştır */
    font-weight: 700 !important;
}

.viya-menu-switch__btn:hover {
    background: var(--section-color) !important;
    color: #ffffff !important;
    filter: brightness(1) !important; /* Hover'da normal parlaklığa dön */
    box-shadow: 0 4px 12px var(--section-color-light) !important;
}

.viya-menu-switch__icon svg {
    stroke: currentColor !important;
}

/* 3. KATEGORİ İSİMLERİ (Koyulaştırılmış) */
.viya-category__name {
    color: var(--section-color) !important;
    filter: brightness(0.6) !important; /* %40 daha koyu */
    font-weight: 800 !important;
}

/* 4. ÜRÜN AÇIKLAMALARI (İki Yana Yaslı) */
.viya-item__desc {
    text-align: justify !important;
    text-justify: inter-word;
    display: block !important;
}

/* 5. FİYAT SAĞA YASLAMA (Mobilde Kesin Çözüm) */
.viya-item__header {
    display: flex !important;
    flex-direction: row !important; /* Yan yana diz */
    flex-wrap: nowrap !important; /* Asla alt satıra atma */
    justify-content: space-between !important; /* İki uca yasla */
    align-items: flex-start !important;
    width: 100% !important;
}

/* İsim (Solda) */
.viya-item__name {
    text-align: left !important;
    padding-right: 10px !important;
    flex: 1 1 auto !important; /* Esnek genişlik */
    width: auto !important;
    font-weight: 700 !important;
}

/* Fiyat (Sağda & Koyu) */
.viya-item__price {
    flex: 0 0 auto !important; /* Genişliği içeriği kadar olsun */
    order: 2 !important; /* En sonda */
    color: var(--section-color) !important;
    filter: brightness(0.6) !important; /* %40 daha koyu */
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    text-align: right !important;
    white-space: nowrap !important; /* "45 TL" aşağı kaymasın */
    margin-top: 0 !important;
    margin-left: auto !important; /* Sağ duvara it */
}

/* Mobil için ekstra güvenlik kuralı */
@media (max-width: 640px) {
    .viya-item__header {
        position: relative !important;
    }
    .viya-item__price {
        font-size: 1.15rem !important; /* Mobilde fiyat boyutu */
    }
}
/* ==========================================================================
   VİYA FIX v25.1: FILTER BAR KOYU & MOBİL BOŞLUK DÜZELTMESİ
   ========================================================================== */

/* 1. FILTER BAR: KOYU, OPAK VE BELİRGİN */
.viya-filter-bar {
    /* Arka planı tamamen tema rengi yap (Solid & Opak) */
    background: var(--section-color) !important;
    
    /* Şeffaflık veya gradient varsa iptal et */
    background-image: none !important;
    opacity: 1 !important;
    
    /* Kenarlık rengini zeminle aynı yap */
    border-color: var(--section-color) !important;
    
    /* Gölgeyi biraz artır */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Filter Bar içindeki başlık rengini Beyaz yap (Koyu zemin üstüne) */
.viya-filter-bar__title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 2. MOBİL SAĞ BOŞLUK (PADDING) DÜZELTMESİ */
/* Ürün kartının genel çerçevesini sıkılaştır */
.viya-item {
    padding: 10px !important; /* 12px'den 10px'e düşürdük */
}

/* İçeriğin tam genişlikte olduğundan emin ol */
.viya-item__main, 
.viya-item__content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ürün İsmi ve Fiyat Arasındaki Boşluk Ayarı */
.viya-item__header {
    width: 100% !important;
    gap: 8px !important; /* Aradaki boşluğu sabitle */
}

/* İsim alanındaki gereksiz sağ boşluğu kaldır */
.viya-item__name {
    padding-right: 0 !important; /* Sağ boşluğu sıfırla */
    margin-right: auto !important; /* Kendini sola yasla */
}

/* Fiyatı sağa yasla ve boşluk bırakma */
.viya-item__price {
    margin-left: 0 !important; 
    padding-left: 0 !important;
}

/* Mobilde kartın sağa taşmasını engellemek için kutu modelini zorla */
.viya-modal__body {
    padding: 0.5rem !important; /* Modal kenar boşluğunu biraz daha aç */
    overflow-x: hidden !important;
}
/* ==========================================================================
   VİYA FIX: CROSS-SELL BUTTON STYLE (KÜÇÜK & ORTALI)
   ========================================================================== */

.viya-pick__cta {
    /* 1. Hizalama (Tam Orta) */
    display: flex !important;
    align-items: center !important;     /* Dikey ortala */
    justify-content: center !important; /* Yatay ortala */
    
    /* 2. Boyutlandırma */
    width: 100% !important;
    padding: 8px 0 !important; /* Yüksekliği biraz kıstık */
    margin-top: 10px !important;
    
    /* 3. Yazı Stili (Küçültme) */
    font-size: 0.7rem !important; /* Yazı boyutu küçültüldü (yaklaşık 11-12px) */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important; /* Harf aralığı */
    text-transform: uppercase !important;
    line-height: 1 !important; /* Satır yüksekliğini sıkılaştır */
    
    /* 4. Renk ve Görünüm */
    background-color: var(--section-color) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important; /* Gölgeyi kaldırarak daha flat/sade yap */
}

/* Ok işaretinin konumu */
.viya-pick__cta::after {
    margin-left: 6px !important;
    font-size: 1.1em !important; /* Ok biraz daha belirgin kalsın */
    position: relative !important;
    top: -1px !important; /* Optik hizalama */
}

/* Hover Efekti */
.viya-pick__cta:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}
/* ==========================================================================
   VİYA FIX v25.2: BUTON GÜÇLENDİRME & BANNER KALINLAŞTIRMA
   ========================================================================== */

/* 1. MENÜ GEÇİŞ BUTONLARI (Daha Belirgin "Kutu" Görünümü) */
.viya-menu-switch__btn {
    /* Arka planı şeffaf yerine beyaz yapalım ki "kutu" olduğu belli olsun */
    background-color: #ffffff !important;
    
    /* Kenarlığı 1px'den 2px'e çıkararak kalınlaştıralım */
    border-width: 2px !important;
    
    /* İstenilen hafif gölge efekti (Hover'ın daha yumuşağı) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    
    /* Yazıyı biraz daha kalın yapalım */
    font-weight: 800 !important;
    
    /* Butonlar arası mesafeyi biraz açalım */
    margin-right: 5px !important;
}

/* Hover durumunda gölgeyi ve rengi güçlendir (Mevcut yapıyı koruyoruz) */
.viya-menu-switch__btn:hover {
    transform: translateY(-2px) !important; /* Tıklanma hissi için yukarı kalksın */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}


/* 2. ÖZEL GÜN BANNERI (Kalınlaştırma) */
.viya-special-banner {
    /* Yüksekliği ve iç boşluğu artırıyoruz */
    min-height: 64px !important; /* 46px'den 64px'e çıkarıldı */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    
    /* İçeriklerin (ikon/yazı) dikeyde ortalanmasını garantiye al */
    align-items: center !important;
    display: flex !important;
}

/* 3. HERO ALANI MESAFESİ (Banner kalınlaştığı için) */
/* Banner kalınlaştığı için sitenin geri kalanını daha aşağı itmemiz lazım */
body.has-special-day .viya-hero {
    /* Header (70px) + Yeni Banner (64px) = 134px */
    margin-top: calc(var(--header-height) + 64px) !important;
}

/* Mobil için uyumluluk ayarı */
@media (max-width: 960px) {
    .viya-special-banner {
        min-height: 54px !important; /* Mobilde biraz daha kibar ama yine de kalın */
    }
    
    body.has-special-day .viya-hero {
        /* Mobile Header (60px) + Mobile Banner (54px) */
        margin-top: calc(60px + 54px) !important;
    }
}
/* ==========================================================================
   VİYA FIX v25.5: STOK BADGE YENİ TASARIM (DİKİNE UZUN & HİZALI)
   ========================================================================== */

/* Stok Rozeti Ana Yapısı */
.viya-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Konumlandırma & Hizalama */
    align-self: center !important; /* Fiyat ile dikeyde ortala */
    margin-right: 12px !important; /* Fiyat ile arasına mesafe koy */
    margin-left: auto !important; /* İsmi sola itip, badge'i sağa (fiyatın yanına) çek */
    
    /* Renkler (Tema Rengi - Opak) */
    background-color: var(--section-color) !important;
    color: #ffffff !important;
    
    /* Boyutlandırma (Dikine Uzun) */
    padding: 6px 12px !important; /* Üst/Alt padding artırıldı */
    border-radius: 6px !important;
    
    /* Yazı Stili */
    font-size: 0.7rem !important; /* Okunaklı boyut */
    font-weight: 800 !important; /* Kalın */
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    
    /* Sıralama (Flex Order) */
    /* Header yapısı: İsim(1) -> Badge(2) -> Fiyat(3) */
    order: 2 !important; 
}

/* Header Flex Ayarı (Garantiye almak için) */
.viya-item__header {
    align-items: center !important; /* Tüm elemanları dikeyde ortalar */
}

/* Fiyatın konumunu netleştir (En sağda) */
.viya-item__price {
    order: 3 !important;
    margin-left: 0 !important; /* Badge zaten margin-right veriyor */
}

/* Tükendi Durumu (Opsiyonel: Gri yapmak isterseniz yorumu kaldırın) */
.viya-chip--error {
    /* background-color: #999 !important; */
    opacity: 0.9 !important;
}
/* ==========================================================================
   VİYA FINAL FIX: ÜST BUTONLAR BEYAZ ZEMİN (KESİN ÇÖZÜM)
   ========================================================================== */

.viya-menu-switch__btn {
    /* 1. Rengi Sıfırla ve Zorla */
    background-color: #ffffff !important; /* Arka plan kesinlikle BEYAZ */
    background-image: none !important;    /* Varsa gradient'i kaldır */
    
    /* 2. Filtreleri Temizle (Gri yapan suçlu bu olabilir) */
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    
    /* 3. Kenarlık ve Yazı Rengi */
    border: 2px solid var(--section-color) !important;
    color: var(--section-color) !important; /* Yazı tema renginde */
    
    /* 4. Görünüm */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; /* Hafif gölge */
    font-weight: 800 !important;
}

/* Hover (Üzerine gelince) */
.viya-menu-switch__btn:hover {
    background-color: var(--section-color) !important; /* İçi dolsun */
    color: #ffffff !important; /* Yazı beyaz olsun */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}

/* İkon Rengi */
.viya-menu-switch__btn svg {
    stroke: currentColor !important; /* İkon yazı rengine uysun */
    fill: none !important;
}
/* ==========================================================================
   VİYA FIX: HOVER EFEKTLERİNİ KAPATMA (SABİT KARTLAR)
   ========================================================================== */

/* 1. Ürün Kartları (Menü Listesi) */
.viya-item:hover {
    transform: none !important; /* Yukarı kaymayı iptal et */
    box-shadow: none !important; /* Gölge büyümesini iptal et */
    /* İsterseniz hafif bir kenarlık değişimi kalsın diye border'a dokunmuyoruz */
}

/* 2. Special Picks (Yatay Kaydırmalı Kartlar) */
.viya-pick:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; /* Varsayılan gölgesinde kalsın */
}

/* 3. Menü Geçiş Butonları (Viya Çikolata vb.) */
.viya-menu-switch__btn:hover {
    transform: none !important; /* Butonlar da zıplamasın */
}
/* ==========================================================================
   VİYA FIX: SELECT BOX TASARIMI (RENKLİ BAR ÜZERİNDE)
   ========================================================================== */

/* 1. Filter Bar Düzeni */
.viya-filter-bar__controls {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto; /* Mobilde taşarsa kaydır */
    padding-bottom: 5px;
}

/* 2. Select Kutusu Tasarımı */
.viya-filter-select {
    flex: 1; /* Alanı eşit paylaş */
    min-width: 140px;
    height: 44px !important;
    
    /* Görünüm: Beyaz Kutu */
    background-color: #ffffff !important;
    color: var(--section-color-dark) !important; /* Yazı koyu tema rengi */
    border: 2px solid rgba(255,255,255,0.3) !important; /* Hafif transparan kenarlık */
    border-radius: 12px !important;
    
    /* Font */
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 0 15px !important;
    cursor: pointer;
    
    /* Ok İşareti (Custom Arrow) */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.viya-filter-select:focus {
    outline: none !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Eski Chip stillerini temizlemek isterseniz .viya-filter-chip kurallarını silebilirsiniz */

/* ==========================================================================
   PREMIUM VARIANT SYSTEM - S/M/L & Iced/Hot
   ========================================================================== */

.viya-variants {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-bg-secondary, #f8f9fa);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
}

.viya-variant-group {
    margin-bottom: 0.75rem;
}

.viya-variant-group:last-child {
    margin-bottom: 0;
}

/* Temperature Toggle (Iced/Hot) - Premium Switch Design */
.viya-variant-toggle {
    display: inline-flex;
    background: var(--color-bg, #fff);
    border-radius: 100px;
    padding: 4px;
    border: 2px solid var(--color-border, rgba(0,0,0,0.1));
    gap: 4px;
}

.viya-variant-btn {
    border: none;
    background: transparent;
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dim, #6b7280);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.viya-variant-btn.is-active {
    background: var(--section-color, #cd7f32);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.viya-variant-btn:hover:not(.is-active) {
    color: var(--color-text, #1f2937);
    background: rgba(0,0,0,0.04);
}

/* Size Buttons (S/M/L) - Premium Radio Design */
.viya-variant-sizes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.viya-size-btn {
    border: 2px solid var(--color-border, rgba(0,0,0,0.15));
    background: var(--color-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 10px);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
    text-align: center;
    position: relative;
}

.viya-size-btn.is-active {
    border-color: var(--section-color, #cd7f32);
    background: var(--section-color, #cd7f32);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);
    transform: translateY(-2px);
}

.viya-size-btn:hover:not(.is-active) {
    border-color: var(--section-color, #cd7f32);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Price Animation */
.viya-price-value {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.viya-item__price.is-updating .viya-price-value {
    animation: priceUpdate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes priceUpdate {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .viya-variants {
        padding: 0.75rem;
    }
    
    .viya-variant-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8125rem;
    }
    
    .viya-size-btn {
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
        min-width: 50px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .viya-variants {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .viya-variant-toggle {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

[data-theme="dark"] .viya-variant-btn {
    color: rgba(255,255,255,0.6);
}

[data-theme="dark"] .viya-variant-btn:hover:not(.is-active) {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .viya-size-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

/* ==========================================================================
   CLEANER VARIANT SYSTEM - Exactly Same as Details
   ========================================================================== */

/* Customize = Details (SAME STYLE) */

.viya-item__customize summary {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--section-color, var(--color-bronze));
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viya-item__customize summary::after {
    content: '▸';
    transition: transform var(--transition-fast);
    font-size: 0.75rem;
}

.viya-item__customize[open] summary::after {
    transform: rotate(90deg);
}

.viya-item__customize summary::-webkit-details-marker {
    display: none;
}

/* Customize Content - Horizontal if both exist */
.viya-customize__content {
    padding-top: 0.75rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.viya-customize__group {
    flex: 1;
    min-width: 200px;
}

.viya-customize__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dim, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.viya-customize__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.viya-customize__option {
    border: 2px solid var(--color-border, rgba(0,0,0,0.15));
    background: var(--color-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #1f2937);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
    text-align: center;
}

.viya-customize__option.is-active {
    border-color: var(--section-color, var(--color-bronze));
    background: var(--section-color, var(--color-bronze));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.25);
}

.viya-customize__option:hover:not(.is-active) {
    border-color: var(--section-color, var(--color-bronze));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .viya-customize__content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .viya-customize__group {
        min-width: 100%;
    }
    
    .viya-customize__option {
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
        min-width: 50px;
    }
}

/* Dark Mode */
[data-theme="dark"] .viya-item__customize {
    border-color: var(--color-border);
}

[data-theme="dark"] .viya-item__customize summary {
    color: var(--section-color, var(--color-bronze));
}

[data-theme="dark"] .viya-customize__option {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

[data-theme="dark"] .viya-customize__label {
    color: rgba(255,255,255,0.6);
}
/* =========================================================
   VİYA – Special Days v2 (Banner + Site Effect)
   ========================================================= */

.viya-special-banner {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 46px;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bannerSlideDown .35s ease;
}

body.has-special-day .viya-hero {
  margin-top: calc(var(--header-height) + 46px) !important;
}

.viya-special-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.viya-special-banner__lottie {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
}

.viya-special-banner__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(900px, 70vw);
}

/* Mobil */
@media (max-width: 960px) {
  .viya-special-banner { top: 60px; height: 40px; }
  .viya-special-banner__lottie { width: 34px; height: 34px; flex-basis: 34px; }
  body.has-special-day .viya-hero { margin-top: calc(60px + 40px) !important; }
}

/* Site weather/effect */
.viya-site-effect {
  position: fixed;
  top: calc(var(--header-height) + 46px); /* banner varsa; yoksa da header altından başlar, sorun değil */
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* etkileşimi engellemesin */
  z-index: 950;         /* içerik üstü, popup/modal altı hedefi */
}

/* Eğer banner yoksa effect’i header altından başlat */
body:not(.has-special-day) .viya-site-effect {
  top: var(--header-height);
}
/* =====================================
   VİYA – SPECIAL DAY LOTTIE SIZE FIX
   ===================================== */

.viya-special-banner__lottie{
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  min-width: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobilde taşmayı önle */
@media (max-width: 480px){
  .viya-special-banner__lottie{
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    min-width: 64px;
    min-height: 64px;
  }
}
/* =====================================
   VİYA – SPECIAL DAY BANNER CENTER FIX
   (Lottie + Message perfectly centered)
   ===================================== */

.viya-special-banner{
  display: flex;
  justify-content: center;
}

.viya-special-banner__content{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

/* Mesajın gerçekten ortada kalması için */
.viya-special-banner__text{
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

/* Mobilde taşmayı önle */
@media (max-width: 480px){
  .viya-special-banner__content{
    gap: 10px;
  }

  .viya-special-banner__text{
    font-size: 14px;
  }
}

/* style.css - Panel başlık geçişlerini sync et */

.viya-panel__title {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  pointer-events: none;
  transform-origin: center center;
  /* TEK transition - hepsi aynı anda ve aynı hızda */
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform, opacity;
}

/* Masaüstü - default */
@media (min-width: 961px) {
  .viya-panel__title {
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: clamp(2rem, 4vw, 3.5rem);
    opacity: 0.9;
  }
  
  .viya-panel.is-active .viya-panel__title {
    opacity: 0;
  }
}
/* MOBİL DİKEY (Portrait) - Banner altına kayma engelle */
@media (max-width: 960px) and (orientation: portrait) {
  
  /* Banner container - relative ve z-index yüksek */
  .viya-sd-bar {
    position: relative !important;
    z-index: 200 !important; /* Panel'lerden daha yüksek */
  }
  
  /* Hero - banner ile çakışmasın */
  .viya-hero {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - var(--header-height) - 80px) !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 100 !important; /* Banner'dan daha düşük */
  }
  
  /* Banner varsa hero'nun yüksekliği düşer */
  body.has-special-banner .viya-hero {
    min-height: calc(100vh - var(--header-height) - 80px) !important;
  }
  
  /* Panel'ler - banner'dan daha düşük z-index */
  .viya-panel {
    flex: 0.35 !important;
    min-height: 15vh !important;
    position: relative !important;
    z-index: 50 !important; /* Hero ve banner'dan düşük */
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .viya-panel.is-active {
    flex: 1.3 !important;
    min-height: auto !important;
    max-height: none !important;
    z-index: 50 !important; /* Aktif olsa da banner altında */
  }
  
  /* İnaktif başlıklar */
  .viya-panel:not(.is-active) .viya-panel__title {
    transform: translate(-50%, -50%) rotate(0deg) !important;
    font-size: 2.2rem !important;
    opacity: 1 !important;
  }
  
  /* Aktif başlık */
  .viya-panel.is-active .viya-panel__title {
    transform: translate(-50%, -50%) rotate(0deg) !important;
    font-size: 2.2rem !important;
    opacity: 0 !important;
  }
  
  /* Tema şeritleri */
  .viya-panel:not(.is-active)[data-viya-panel="cafe"] {
    border-bottom: 3px solid rgba(205, 127, 50, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(205, 127, 50, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="chocolate"] {
    border-bottom: 3px solid rgba(107, 68, 35, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(107, 68, 35, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="sandwich"] {
    border-bottom: 3px solid rgba(76, 175, 80, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(76, 175, 80, 0.4);
  }
  
  .viya-panel:not(.is-active) .viya-panel__overlay {
    opacity: 0.5 !important;
  }
  
  .viya-panel.is-active .viya-glass {
    padding: 1.5rem !important;
    max-width: 90% !important;
  }
  
  .viya-panel.is-active .viya-section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .viya-panel.is-active .viya-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }
  
  .viya-panel.is-active .viya-btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}

/* MOBİL YATAY (Landscape) - Header relative */
@media (max-width: 960px) and (orientation: landscape) {
  
  /* Header - float yok */
  .viya-header {
    position: relative !important;
    top: auto !important;
  }
  
  /* Banner - relative (zaten viya-special-days.php'de ayarlı) */
  
  /* Hero - yan yana */
  .viya-hero {
    flex-direction: row !important;
    /* Header relative olduğu için height'tan düşmüyor */
    height: calc(100vh - var(--header-height) - 35px) !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  body.has-special-banner .viya-hero {
    /* Banner 35px relative */
    height: calc(100vh - var(--header-height) - 35px) !important;
  }
  
  /* Panel'ler */
  .viya-panel {
    flex: 1 !important;
    min-height: 100% !important;
    position: relative !important;
    z-index: 50 !important;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .viya-panel.is-active {
    flex: 3 !important;
  }
  
  /* İnaktif başlıklar - dik */
  .viya-panel:not(.is-active) .viya-panel__title {
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    opacity: 0.9 !important;
  }
  
  .viya-panel.is-active .viya-panel__title {
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    opacity: 0 !important;
  }
  
  /* Sağda şerit */
  .viya-panel:not(.is-active)[data-viya-panel="cafe"] {
    border-right: 3px solid rgba(205, 127, 50, 0.7);
    box-shadow: inset -40px 0 60px -40px rgba(205, 127, 50, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="chocolate"] {
    border-right: 3px solid rgba(107, 68, 35, 0.7);
    box-shadow: inset -40px 0 60px -40px rgba(107, 68, 35, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="sandwich"] {
    border-right: 3px solid rgba(76, 175, 80, 0.7);
    box-shadow: inset -40px 0 60px -40px rgba(76, 175, 80, 0.4);
  }
  
  .viya-panel.is-active .viya-glass {
    padding: 1rem !important;
    max-width: 95% !important;
  }
  
  .viya-panel.is-active .viya-kicker {
    font-size: 0.7rem !important;
  }
  
  .viya-panel.is-active .viya-section-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .viya-panel.is-active .viya-desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .viya-panel.is-active .viya-btn {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.8rem !important;
  }
}/* MOBİL LANDSCAPE - Header da relative olsun (float yok) */
@media (max-width: 960px) and (orientation: landscape) {
  .viya-header {
    position: relative !important;
    top: auto !important;
  }
}
/* style.css - MOBİL DİKEY düzeltme */

@media (max-width: 960px) and (orientation: portrait) {
  
  /* Hero - margin-top KALDIRMALI çünkü banner relative */
  .viya-hero {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - var(--header-height) - 80px) !important;
    /* BANNER RELATIVE OLDUĞU İÇİN MARGIN YOK */
    margin-top: 0 !important;
  }
  
  /* Banner varsa da aynı - banner zaten relative, üstte */
  body.has-special-banner .viya-hero {
    margin-top: 0 !important;
  }
  
  .viya-panel {
    flex: 0.35 !important;
    min-height: 15vh !important;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .viya-panel.is-active {
    flex: 1.3 !important;
  }
  
  .viya-panel:not(.is-active) .viya-panel__title {
    transform: translate(-50%, -50%) rotate(0deg) !important;
    font-size: 2.2rem !important;
    opacity: 1 !important;
  }
  
  .viya-panel.is-active .viya-panel__title {
    opacity: 0 !important;
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="cafe"] {
    border-bottom: 3px solid rgba(205, 127, 50, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(205, 127, 50, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="chocolate"] {
    border-bottom: 3px solid rgba(107, 68, 35, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(107, 68, 35, 0.4);
  }
  
  .viya-panel:not(.is-active)[data-viya-panel="sandwich"] {
    border-bottom: 3px solid rgba(76, 175, 80, 0.7);
    box-shadow: inset 0 -40px 60px -40px rgba(76, 175, 80, 0.4);
  }
  
  .viya-panel:not(.is-active) .viya-panel__overlay {
    opacity: 0.5 !important;
  }
  
  .viya-panel.is-active .viya-glass {
    padding: 1.5rem !important;
    max-width: 90% !important;
  }
  
  .viya-panel.is-active .viya-section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .viya-panel.is-active .viya-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }
  
  .viya-panel.is-active .viya-btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}
/* Menu modal body - smooth content geçişi */
.viya-modal__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.6rem;
  position: relative;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Menu geçişi sırasında fade out */
.viya-modal.is-switching .viya-modal__body {
  opacity: 0;
  transform: scale(0.98);
}

/* Menu geçişi tamamlandığında fade in */
.viya-modal.is-switching-complete .viya-modal__body {
  opacity: 1;
  transform: scale(1);
}

/* Menu switch butonları - aktif olanı highlight et */
.viya-menu-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.viya-menu-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--section-color, var(--color-bronze));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.viya-menu-switch__btn:hover {
  background: var(--section-color-light, var(--color-bronze-light));
  border-color: var(--section-color, var(--color-bronze));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.viya-menu-switch__btn:active {
  transform: translateY(0);
}

/* Aktif menü butonu */
.viya-menu-switch__btn.is-active {
  background: var(--section-color, var(--color-bronze));
  color: white;
  border-color: var(--section-color, var(--color-bronze));
  box-shadow: 0 4px 12px var(--section-color-shadow, rgba(205, 127, 50, 0.3));
}

.viya-menu-switch__btn.is-active::before {
  opacity: 1;
}
/* MODAL ANIMATIONS - Mevcut kurallara EK OLARAK ekle */

/* Modal panel animasyonu - MEVCUT .viya-modal__panel KURALINA EKLE */
.viya-modal__panel {
  /* Mevcut özellikler korunacak, sadece bunları ekle: */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease;
}

.viya-modal.is-open .viya-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

.viya-modal.is-closing .viya-modal__panel {
  transform: translateY(20px);
  opacity: 0;
}

/* Menu body animasyonu - MEVCUT .viya-modal__body KURALINA EKLE */
.viya-modal__body {
  /* Mevcut özellikler korunacak, sadece bunları ekle: */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.viya-modal.is-switching .viya-modal__body {
  opacity: 0;
  transform: scale(0.98);
}

.viya-modal.is-switching-complete .viya-modal__body {
  opacity: 1;
  transform: scale(1);
}

/* Modal fade animasyonu - YENİ KURAL */
.viya-modal.is-open {
  animation: modalFadeIn 0.3s ease forwards;
}

.viya-modal.is-closing {
  animation: modalFadeOut 0.3s ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Menu switch aktif state - MEVCUT .viya-menu-switch__btn KURALLARINA EKLE */
.viya-menu-switch__btn {
  /* Mevcut özellikler korunacak, sadece bunları ekle: */
  position: relative;
  overflow: hidden;
}

.viya-menu-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--section-color, var(--color-bronze));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.viya-menu-switch__btn.is-active {
  background: var(--section-color, var(--color-bronze));
  color: white;
  border-color: var(--section-color, var(--color-bronze));
  box-shadow: 0 4px 12px var(--section-color-shadow, rgba(205, 127, 50, 0.3));
}

.viya-menu-switch__btn.is-active::before {
  opacity: 1;
}
/* style.css - Close button tema rengi */

.viya-modal__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Tema renginde background */
  background: var(--section-color, var(--color-bronze)) !important;
  border: 1px solid var(--section-color, var(--color-bronze)) !important;
  color: white !important;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--section-color-shadow, rgba(205, 127, 50, 0.3)) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.viya-modal__close:hover {
  /* Hover'da biraz daha koyu */
  background: var(--section-color-dark, #b36826) !important;
  border-color: var(--section-color-dark, #b36826) !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 6px 20px var(--section-color-shadow, rgba(205, 127, 50, 0.5)) !important;
}

.viya-modal__close:active {
  transform: rotate(90deg) scale(0.95) !important;
}
/* style.css - Sağ-sol padding daha da azalt */

.viya-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  /* Sağ-sol 1.1rem → 0.7rem (%35 daha az) */
  padding: 2rem 0.7rem !important;
}

.viya-modal__panel {
  position: relative;
  /* Genişlik daha da artırıldı */
  width: min(1180px, 97%) !important;
  max-height: 85vh !important;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease;
}

/* Mobil'de minimal padding */
@media (max-width: 960px) {
  .viya-modal {
    padding: 1rem 0.4rem !important;
  }
  
  .viya-modal__panel {
    width: 98% !important;
    max-height: 92vh !important;
  }
}
/* ==========================================================================
   VİYA v27.0 - DESKTOP RATIO FIX & DARK MODE POLISH
   1. Fotoğraf: Masaüstünde de 3:2 oranına kilitlendi (Sünme yok).
   2. Dark Mode: Filter bar, sayaçlar ve kutular temaya uyumlu hale getirildi.
   3. Etiketler: Masaüstünde tek satıra zorlandı.
   ========================================================================== */

/* 1. ÜRÜN KARTI (GENEL) */
.viya-item {
    position: relative !important;
    /* Sabit beyaz yerine tema arka planı */
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.08)) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* 2. IZGARA YAPISI (GRID) */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    
    /* Varsayılan (Mobil) Sütunlar */
    grid-template-columns: 110px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    
    /* Mobil Grid Haritası */
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"
        "actions actions" !important;
        
    gap: 4px 12px !important;
}

.viya-item__content { display: contents !important; }

/* 3. FOTOĞRAF (3:2 KİLİTLİ - HER YERDE) */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    
    /* Yükseklik Otomatik: Orana göre belirlenir */
    height: auto !important; 
    min-height: 0 !important;
    max-height: none !important;
    
    /* ORAN KİLİDİ: 3 genişlik : 2 yükseklik */
    aspect-ratio: 3/2 !important; 
    
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
    align-self: start !important; /* Yukarı yasla */
}

/* 4. BAŞLIK VE FİYAT */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

.viya-item__name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-right: 10px !important;
    /* Tema metin rengi */
    color: var(--color-text, #1a1a1a) !important; 
}

.viya-item__price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--section-color, #cd7f32) !important;
    white-space: nowrap !important;
}

/* 5. AÇIKLAMA */
.viya-item__desc {
    grid-area: desc !important;
    font-size: 0.85rem !important;
    /* Sönük metin rengi */
    color: var(--color-text-dim, #666) !important; 
    line-height: 1.4 !important;
    margin: 0 !important;
    align-self: start !important;
    
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 6. ETİKETLER */
.viya-item__tags {
    grid-area: tags !important;
    display: flex !important;
    /* Mobilde sığmazsa alt satıra geçsin */
    flex-wrap: wrap !important; 
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
}

.viya-tag {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    
    /* Dark Mode Uyumlu: Arka plan ve kenarlık */
    background: var(--color-bg-alt, #f5f5f5) !important; 
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    color: var(--color-text-dim, #666) !important;
    
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* 7. BUTONLAR (Detaylar / Özelleştir) */
.viya-item__actions-grid {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 4px !important;
}

/* Buton Stili (Şeffaf) */
.viya-action-chip {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    min-width: 100px !important;
}

.viya-action-chip summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--section-color, #cd7f32) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    background: transparent !important;
}

.viya-action-chip summary::after {
    content: '▸' !important;
    font-size: 1rem !important;
    margin-left: 5px !important;
    transition: transform 0.2s !important;
    color: var(--section-color, #cd7f32) !important;
}
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip summary::-webkit-details-marker { display: none !important; }

/* İçerik (Şeffaf & Dark Mode Uyumlu Metin) */
.viya-action-chip__content,
.viya-customize__content {
    background: transparent !important;
    border: none !important;
    padding: 5px 0 0 0 !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.viya-item__detail {
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 0.8rem !important;
    color: var(--color-text-dim, #666) !important;
    margin-bottom: 2px !important;
}

.viya-item__detail strong {
    color: var(--color-text, #000) !important;
    margin-right: 4px !important;
}

.viya-customize__options {
    justify-content: flex-end !important;
    gap: 4px !important;
}

.viya-customize__option {
    /* Buton içi tema rengi (Beyaz/Siyah) */
    background: var(--color-bg, #fff) !important; 
    border: 1px solid var(--color-border, rgba(0,0,0,0.2)) !important;
    color: var(--color-text, #333) !important;
}

/* =========================================================
   8. DARK MODE DÜZELTMELERİ (FILTER BAR & BADGES)
   ========================================================= */

/* Filter Bar (Genel Kutu) */
.viya-filter-bar {
    /* Arka planı tema rengi yap */
    background: var(--color-bg, #ffffff) !important;
    border-color: var(--color-border) !important;
}

/* Filter Select Kutusu */
.viya-filter-select {
    /* İçi tema rengi olsun */
    background-color: var(--color-bg, #ffffff) !important;
    color: var(--color-text, #333) !important;
    border: 1px solid var(--color-border, #ccc) !important;
}

/* Kategori Sayacı (Badge) */
.viya-category__count {
    /* Sabit beyaz yerine tema arka planı */
    background-color: var(--color-bg, #ffffff) !important;
    /* Metin rengi tema metni */
    color: var(--color-text-dim, #666) !important;
    border: 1px solid var(--color-border) !important;
}

/* Kategori Başlığı Arka Planı */
.viya-category__header {
    background-color: var(--color-bg-alt, #f9f9f9) !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.viya-category__name {
    color: var(--color-text) !important;
}

/* =========================================================
   9. MASAÜSTÜ ÖZEL AYARLARI (GENİŞ EKRAN)
   ========================================================= */
@media (min-width: 960px) {
    .viya-item__main {
        /* Masaüstünde fotoğrafı genişlet: 140px */
        grid-template-columns: 140px 1fr !important;
        gap: 6px 24px !important;
        
        /* MASAÜSTÜ HARİTASI (Etiketler ve Butonlar Yan Yana) */
        grid-template-areas: 
            "image header"
            "image desc"
            "tags  actions" !important;
    }
    
    .viya-item__thumb {
        /* Masaüstünde de 3:2 oranını koru */
        grid-area: image !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/2 !important;
        /* Yüksekliği içerik kadar uzatmayı engelle */
        align-self: start !important; 
    }
    
    /* Etiketler (Masaüstü: Tek Satır) */
    .viya-item__tags {
        grid-area: tags !important;
        border-top: none !important;
        padding-top: 4px !important;
        margin-top: auto !important;
        align-self: center !important;
        
        /* Tek satıra zorla */
        flex-wrap: nowrap !important;
        overflow: hidden !important; /* Taşarsa gizle */
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    
    /* Butonlar (Masaüstü: Sağa Yaslı, Etiketlerin Yanı) */
    .viya-item__actions-grid {
        grid-area: actions !important;
        margin-top: auto !important;
        justify-content: flex-end !important;
        align-self: center !important;
        min-width: 120px !important; /* Butona alan ayır */
    }
}
/* ==========================================================================
   VİYA v28.0 - DESKTOP PERFECTION & DARK MODE NAV
   1. Masaüstü: Etiketler kesilmez, tek satıra zorlanmaz, rahatça yayılır.
   2. Masaüstü: Detaylar açılınca üsttekiler kaymaz (Satır izolasyonu).
   3. Dark Mode: Menü geçiş butonları (.viya-pick) temaya uyumlu.
   ========================================================================== */

/* 1. ÜRÜN KARTI (GENEL) */
.viya-item {
    position: relative !important;
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.08)) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: all 0.3s ease;
}

/* 2. IZGARA YAPISI (GRID) */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    
    /* MOBİL VARSAYILAN: 110px FOTO + İÇERİK */
    grid-template-columns: 110px minmax(0, 1fr) !important;
    
    /* 4 SATIR: Başlık | Açıklama | Etiketler | Butonlar */
    grid-template-rows: auto auto auto auto !important;
    
    /* MOBİL HARİTASI */
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"     /* Mobilde etiketler tam boy (foto altı) */
        "actions actions" !important;
        
    gap: 4px 12px !important;
}

.viya-item__content { display: contents !important; }

/* 3. FOTOĞRAF (3:2 KİLİTLİ) */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important; /* ORAN KİLİDİ */
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
    align-self: start !important;
}

/* 4. BAŞLIK VE FİYAT */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

.viya-item__name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-right: 10px !important;
    color: var(--color-text, #1a1a1a) !important;
}

.viya-item__price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--section-color, #cd7f32) !important;
    white-space: nowrap !important;
}

/* 5. AÇIKLAMA */
.viya-item__desc {
    grid-area: desc !important;
    font-size: 0.85rem !important;
    color: var(--color-text-dim, #666) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    align-self: start !important;
    
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 6. ETİKETLER (DÜZELTİLDİ: Kesilme Yok) */
.viya-item__tags {
    grid-area: tags !important;
    display: flex !important;
    /* ÖNEMLİ: Wrap izni veriyoruz ki sığmazsa alt satıra geçsin, kesilmesin */
    flex-wrap: wrap !important; 
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
    
    /* Genişlik sınırı yok */
    max-width: 100% !important;
    overflow: visible !important;
}

.viya-tag {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    color: var(--color-text-dim, #666) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* 7. BUTONLAR (KAYMAYI ÖNLEYEN AYRI SATIR) */
.viya-item__actions-grid {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 4px !important;
    /* Üsttekileri itmemesi için bağımsız akış */
    align-self: start !important; 
}

/* Buton Stili (Şeffaf & Temiz) */
.viya-action-chip {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    min-width: 100px !important;
}

.viya-action-chip summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--section-color, #cd7f32) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    background: transparent !important;
}

.viya-action-chip summary::after {
    content: '▸' !important;
    font-size: 1rem !important;
    margin-left: 5px !important;
    transition: transform 0.2s !important;
    color: var(--section-color, #cd7f32) !important;
}
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip summary::-webkit-details-marker { display: none !important; }

.viya-action-chip__content,
.viya-customize__content {
    background: transparent !important;
    border: none !important;
    padding: 5px 0 0 0 !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.viya-item__detail {
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 0.8rem !important;
    color: var(--color-text-dim, #666) !important;
    margin-bottom: 2px !important;
}

/* =========================================================
   8. MENÜ GEÇİŞ TUŞLARI (DARK MODE FIX)
   (.viya-pick sınıfı diğer menülere geçiş butonlarıdır)
   ========================================================= */

.viya-pick {
    /* Arka plan: Dark mode'da koyu, Light mode'da açık */
    background-color: var(--color-bg, #ffffff) !important; 
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    color: var(--color-text, #1a1a1a) !important;
    
    /* Diğer stil düzeltmeleri */
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.viya-pick:hover {
    border-color: var(--section-color, #cd7f32) !important;
    background-color: var(--color-bg-alt, #f9f9f9) !important;
}

/* Buton içindeki metinler */
.viya-pick__name {
    color: var(--color-text, #1a1a1a) !important;
    font-weight: 700 !important;
}

.viya-pick__cta {
    color: var(--section-color, #cd7f32) !important;
}

/* =========================================================
   9. MASAÜSTÜ ÖZEL AYARLARI (KESİLME & KAYMA ÇÖZÜMÜ)
   ========================================================= */
@media (min-width: 960px) {
    .viya-item__main {
        /* Masaüstünde Foto: 140px, Boşluk: 20px */
        grid-template-columns: 140px 1fr !important;
        gap: 6px 20px !important;
        
        /* MASAÜSTÜ HARİTASI (Etiketleri Sağ Sütuna Alıyoruz) */
        grid-template-areas: 
            "image header"
            "image desc"
            "image tags"    /* Etiketler fotoğrafın yanında (Sağ Sütun) */
            "image actions" !important; /* Butonlar en altta (Sağ Sütun) */
    }
    
    .viya-item__thumb {
        /* Fotoğraf 1'den 4. satıra kadar solu kaplar */
        grid-row: 1 / 5 !important; 
        height: auto !important;
        /* Yüksekliği sınırla ki içerik azsa foto çok büyümesin */
        max-height: 180px !important; 
    }
    
    /* Masaüstü Etiket Ayarı */
    .viya-item__tags {
        grid-area: tags !important;
        padding-top: 4px !important;
        border-top: none !important;
        margin-top: 0 !important;
        align-self: center !important;
        
        /* Tek satır olsun ama sığmazsa gizlenmesin, aşağı geçsin */
        flex-wrap: wrap !important; 
    }
    
    /* Masaüstü Buton Ayarı */
    .viya-item__actions-grid {
        grid-area: actions !important;
        margin-top: 4px !important;
        /* Butonları en alta it */
        align-self: end !important; 
    }
}
/* ==========================================================================
   VİYA v29.0 - CROSS MENU FIX & DARK MODE COMPLETE
   1. Cross Menu (Diğer Menüler): Buton ve yazı çakışması düzeltildi.
      "Menüye Git" tuşu artık dolu renkli ve beyaz yazılı (Net okunur).
   2. Dark Mode: Geçiş kartları tamamen tema renklerine bağlandı.
   3. Masaüstü/Mobil: Önceki yerleşim düzeltmeleri korundu.
   ========================================================================== */

/* -----------------------------------------------------------
   1. ÜRÜN KARTI (GENEL)
   ----------------------------------------------------------- */
.viya-item {
    position: relative !important;
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.08)) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: all 0.3s ease;
}

/* -----------------------------------------------------------
   2. IZGARA YAPISI (GRID)
   ----------------------------------------------------------- */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    
    /* SÜTUNLAR: [FOTO 110px] -- [İÇERİK] */
    grid-template-columns: 110px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    
    /* MOBİL HARİTASI */
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"
        "actions actions" !important;
        
    gap: 4px 12px !important;
}

.viya-item__content { display: contents !important; }

/* 3. FOTOĞRAF (3:2 KİLİTLİ) */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
    align-self: start !important;
}

/* 4. BAŞLIK VE FİYAT */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

.viya-item__name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-right: 10px !important;
    color: var(--color-text, #1a1a1a) !important;
}

.viya-item__price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--section-color, #cd7f32) !important;
    white-space: nowrap !important;
}

/* 5. AÇIKLAMA */
.viya-item__desc {
    grid-area: desc !important;
    font-size: 0.85rem !important;
    color: var(--color-text-dim, #666) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    align-self: start !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 6. ETİKETLER */
.viya-item__tags {
    grid-area: tags !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
    max-width: 100% !important;
}

.viya-tag {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    color: var(--color-text-dim, #666) !important;
    font-weight: 600 !important;
}

/* 7. BUTONLAR */
.viya-item__actions-grid {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 4px !important;
    align-self: start !important;
}

/* Şeffaf Detaylar Butonu */
.viya-action-chip {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    min-width: 100px !important;
}

.viya-action-chip summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--section-color, #cd7f32) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    background: transparent !important;
}
.viya-action-chip summary::after {
    content: '▸' !important;
    font-size: 1rem !important;
    margin-left: 5px !important;
    transition: transform 0.2s !important;
    color: var(--section-color, #cd7f32) !important;
}
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip summary::-webkit-details-marker { display: none !important; }

.viya-action-chip__content, .viya-customize__content {
    background: transparent !important;
    border: none !important;
    padding: 5px 0 0 0 !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.viya-item__detail {
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 0.8rem !important;
    color: var(--color-text-dim, #666) !important;
    margin-bottom: 2px !important;
}

/* -----------------------------------------------------------
   8. DİĞER MENÜLERE GEÇİŞ KARTLARI (CROSS MENU FIX)
   Burada buton rengi ve okunabilirlik çözüldü.
   ----------------------------------------------------------- */

.viya-pick {
    /* 1. Dark Mode Uyumu: Sabit beyaz yerine değişken */
    background-color: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    
    /* Genel Yapı */
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
    text-align: left !important;
}

.viya-pick:hover {
    border-color: var(--section-color, #cd7f32) !important;
    transform: translateY(-2px) !important;
}

/* Kartın içindeki metinler */
.viya-pick__info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 12px !important;
}

.viya-pick__name {
    /* Metin rengi temaya göre değişir */
    color: var(--color-text, #1a1a1a) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

/* "MENÜYE GİT" BUTONU (OKUNABİLİRLİK DÜZELTMESİ) */
.viya-pick__cta {
    /* Arka planı bölüm rengi yap (Dolu Renk) */
    background-color: var(--section-color, #cd7f32) !important;
    
    /* Yazıyı BEYAZ yap (Her zaman okunur) */
    color: #ffffff !important;
    
    /* Buton görünümü ver */
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    align-self: flex-start !important;
    margin-top: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Küçük Badge (Viya Cafe vb.) */
.viya-pick__badge {
    font-size: 0.6rem !important;
    color: var(--color-text-dim, #666) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 2px !important;
}

/* -----------------------------------------------------------
   9. MASAÜSTÜ ÖZEL AYARLARI
   ----------------------------------------------------------- */
@media (min-width: 960px) {
    .viya-item__main {
        grid-template-columns: 140px 1fr !important;
        gap: 6px 20px !important;
        
        /* Masaüstünde Etiketleri ve Butonları sağ sütuna al */
        grid-template-areas: 
            "image header"
            "image desc"
            "image tags" 
            "image actions" !important;
    }
    
    .viya-item__thumb {
        grid-row: 1 / 5 !important; 
        height: auto !important;
        max-height: 200px !important; 
    }
    
    /* Etiketler rahatça yayılsın */
    .viya-item__tags {
        grid-area: tags !important;
        padding-top: 4px !important;
        border-top: none !important;
        margin-top: 0 !important;
        align-self: center !important;
        flex-wrap: wrap !important; 
    }
    
    .viya-item__actions-grid {
        grid-area: actions !important;
        margin-top: 4px !important;
        align-self: end !important; 
    }
}
/* ==========================================================================
   VİYA v30.0 - FINAL POLISH PATCH (RÖTUŞ PAKETİ)
   Sadece istenilen 5 nokta düzeltildi.
   ========================================================================== */

/* 1. STOK ROZETİ (Çok Küçültüldü) 
   Fiyatı sağa itmemesi için fontu ve padding'i minimize ettik. */
.viya-stock-badge, 
.viya-badge, 
.viya-chip {
    font-size: 0.55rem !important; /* Karınca duası kadar küçük :) */
    padding: 1px 4px !important;
    height: 15px !important;       /* Sabit minimal yükseklik */
    line-height: 1 !important;
    border-radius: 3px !important;
    letter-spacing: 0 !important;
    margin-right: 4px !important;  /* Fiyatla arasına az mesafe */
}

/* 2. FILTER BAR (Kutucuk Metinleri Küçültüldü) */
.viya-filter-bar button,
.viya-filter-select,
.viya-filter-item {
    font-size: 0.8rem !important; /* Daha kibar metin */
    padding: 6px 10px !important; /* Kutucukları da biraz daralttık */
    line-height: 1.2 !important;
}

/* 3. SIGNATURE SELECTION BAR (Boşluklar Alındı) 
   Fotoğraf, badge, isim ve fiyat arasındaki gereksiz boşluklar silindi. */
.viya-signature-item,
.viya-selection-item,
.viya-modal-product {
    gap: 8px !important; /* Elemanlar arası boşluğu düşürdük */
    padding: 8px !important;
}

.viya-signature-item__image,
.viya-selection-item img {
    margin-right: 8px !important; /* Foto ile yazı arasını kıstık */
}

.viya-signature-item__info,
.viya-selection-item__info {
    margin: 0 !important; /* Gereksiz marginleri sıfırla */
    gap: 2px !important;  /* İsim ve fiyat arası boşluk */
}

/* 4 & 5. CROSS MENU (DİĞER MENÜLER) DÜZENLEMESİ
   - Fotoğraf 3:2 yapıldı.
   - Düzen: [Fotoğraf] [Yazı + Buton] (Yan yana)
   - Buton kibarlaştırıldı. */

.viya-pick {
    display: grid !important;
    /* Sol: 90px Foto | Sağ: İçerik */
    grid-template-columns: 90px 1fr !important; 
    gap: 12px !important;
    align-items: center !important;
    padding: 8px !important;
    height: auto !important;
}

/* Cross Menü Fotoğrafı (3:2) */
.viya-pick__image, 
.viya-pick img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3/2 !important; /* 3x2 Kuralı */
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important; /* Kaymaları önle */
}

/* Cross Menü İçerik Alanı (Yazı ve Buton Sağda) */
.viya-pick__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Sola yasla (Fotonun sağına) */
    padding: 0 !important;
}

/* Menüye Git Butonu (Kibarlaştırma) */
.viya-pick__cta {
    font-size: 0.65rem !important; /* Yazı küçüldü */
    padding: 4px 10px !important;
    border-radius: 20px !important; /* Tam yuvarlak (Hap) köşeler */
    margin-top: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important; /* Kaba gölgeyi kaldır */
}
/* ==========================================================================
   VİYA v40.0 - 2-COLUMN LAYOUT & GAP FIX
   1. Signature & Cross Menu: 2 Sütunlu Grid (Sol Foto - Sağ Bilgi).
   2. Fotoğraf Kaybı Giderildi: Boyutlar sabitlendi.
   3. Boşluklar: Detaylar ve etiketler arası mesafe sıkılaştırıldı.
   ========================================================================== */

/* -----------------------------------------------------------
   1. GENEL KART AYARLARI
   ----------------------------------------------------------- */
.viya-item {
    position: relative !important;
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin-bottom: 15px !important;
}

/* -----------------------------------------------------------
   2. SIGNATURE BAR & CROSS MENU (.viya-pick)
   İki alan da aynı yapıyı kullanıyor. Burayı Grid'e alıyoruz.
   Sol: 90px (Fotoğraf) | Sağ: 1fr (Bilgiler)
   ----------------------------------------------------------- */
.viya-pick {
    display: grid !important;
    grid-template-columns: 90px 1fr !important; /* 2 SÜTUNLU YAPI */
    gap: 12px !important;
    
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    text-align: left !important;
    height: auto !important;
    align-items: center !important;
}

/* FOTOĞRAF (SOL SÜTUN) */
/* span etiketi olduğu için display:block ve boyut şart */
.viya-pick__thumb {
    grid-column: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 60px !important; /* Görünürlük garantisi */
    aspect-ratio: 3/2 !important;
    
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    margin: 0 !important;
}

/* İÇERİK ALANI (SAĞ SÜTUN) */
.viya-pick__info {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Sola yasla */
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Chip / Badge */
.viya-pick__badge {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: var(--color-text-dim, #666) !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    padding: 2px 5px !important;
    border-radius: 2px !important;
    margin-bottom: 4px !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Ürün Adı */
.viya-pick__name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--color-text, #1a1a1a) !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    white-space: normal !important;
}

/* Fiyat */
.viya-pick__price {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: var(--section-color, #cd7f32) !important;
}

/* Cross Menu Butonu (Varsa) */
.viya-pick__cta {
    display: inline-block !important;
    border-radius: 2px !important;
    background-color: var(--section-color, #cd7f32) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    margin-top: 5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* -----------------------------------------------------------
   3. ANA ÜRÜN KARTI (GRID DÜZENİ)
   ----------------------------------------------------------- */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    
    /* Satır boşluklarını (gap) azalttık: dikeyde 2px */
    gap: 2px 12px !important; 
    
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"
        "actions actions" !important;
}

.viya-item__content { display: contents !important; }

/* Fotoğraf */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    margin: 0 !important;
    align-self: start !important;
}

/* Başlık */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important; /* Alt boşluğu sıfırla */
}
.viya-item__name { font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 !important; padding-right: 5px !important; color: var(--color-text, #1a1a1a) !important; }
.viya-item__price { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--section-color, #cd7f32) !important; white-space: nowrap !important; line-height: 1.1 !important; }

/* Stok Rozeti (Fiyat Altı) */
.viya-item__badges { position: absolute !important; right: 0 !important; bottom: 0 !important; display: flex !important; justify-content: flex-end !important; pointer-events: none; }
.viya-stock-badge, .viya-badge, .viya-chip { border-radius: 2px !important; font-size: 0.55rem !important; padding: 1px 4px !important; height: 14px !important; line-height: 1.1 !important; font-weight: 700 !important; text-transform: uppercase !important; background: var(--color-bg-alt, #f5f5f5) !important; color: var(--color-text-dim, #666) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important; white-space: nowrap !important; }

/* Açıklama */
.viya-item__desc {
    grid-area: desc !important;
    font-size: 0.85rem !important;
    color: var(--color-text-dim, #666) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    margin-bottom: 2px !important; /* Etiketlerle arasındaki boşluğu azalt */
    align-self: start !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Etiketler (FOTO ALTI & SIKIŞTIRILMIŞ) */
.viya-item__tags {
    grid-area: tags !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    
    /* Üst boşluğu kaldır */
    margin-top: 2px !important; 
    padding-top: 4px !important;
    
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
    width: 100% !important;
    justify-content: flex-start !important;
    
    /* Alt boşluğu kaldır (Detaylar ile arası açılmasın) */
    margin-bottom: 0 !important; 
}

.viya-tag {
    border-radius: 2px !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    color: var(--color-text-dim, #666) !important;
    font-weight: 600 !important;
}

/* Butonlar (Detaylar/Özelleştir) - BOŞLUK ALINDI */
.viya-item__actions-grid {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    
    /* Yukarıdaki etiketlerle arasındaki boşluğu minimuma indir */
    margin-top: 0 !important; 
    padding-top: 2px !important; 
}

.viya-action-chip { background: transparent !important; border: none !important; min-width: 100px !important; padding: 0 !important; margin: 0 !important; }
.viya-action-chip summary { background: transparent !important; color: var(--section-color, #cd7f32) !important; font-size: 0.75rem !important; font-weight: 800 !important; padding: 2px 0 !important; display: flex !important; justify-content: flex-end !important; }
.viya-action-chip summary::after { content: '▸' !important; margin-left: 5px !important; color: var(--section-color, #cd7f32) !important; } 
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip__content, .viya-customize__content { background: transparent !important; border: none !important; padding: 2px 0 0 0 !important; text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; }
.viya-item__detail { justify-content: flex-end !important; text-align: right !important; font-size: 0.8rem !important; color: var(--color-text-dim, #666) !important; margin-bottom: 1px !important; }

/* -----------------------------------------------------------
   4. MASAÜSTÜ ÖZEL AYARLARI
   ----------------------------------------------------------- */
@media (min-width: 960px) {
    .viya-item__main {
        grid-template-columns: 140px minmax(0, 1fr) !important;
        grid-template-areas: 
            "image header"
            "image desc"
            "tags  tags"
            "actions actions" !important;
    }
    .viya-item__thumb {
        grid-row: 1 / 3 !important;
        max-height: 180px !important;
    }
}
/* ==========================================================================
   VİYA v42.0 - FLEXIBLE COLUMN FIX (ESNEK SÜTUN ÇÖZÜMÜ)
   Mantık: Fotoğraf sabit, içerik alanı esnek (flex: 1) olup tüm boşluğu doldurur.
   Böylece sağ tarafta boşluk kalmaz, fiyat en sağa yaslanır.
   ========================================================================== */

/* 1. KART KAPSAYICISI (.viya-pick) */
.viya-pick {
    display: flex !important; /* Yan yana dizilim */
    align-items: center !important; /* Dikey ortala */
    justify-content: flex-start !important;
    
    width: 100% !important;
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    
    /* Gerekirse sağa sola taşmayı önle */
    overflow: hidden !important;
}

/* 2. SÜTUN 1: FOTOĞRAF (SABİT) */
.viya-pick__thumb {
    display: block !important;
    /* Sabit Genişlik: 90px */
    flex: 0 0 90px !important; 
    width: 90px !important;
    height: 60px !important;
    
    /* Oran Koruması */
    aspect-ratio: 3/2 !important; 
    
    background-size: cover !important;
    background-position: center !important;
    border-radius: 4px !important;
    margin: 0 !important;
    margin-right: 12px !important; /* İçerikle arasına mesafe */
}

/* 3. SÜTUN 2: İÇERİK (ESNEK - SORUN ÇÖZÜCÜ) */
.viya-pick__info {
    /* SİHİRLİ KOD: Kalan tüm alanı kapla */
    flex: 1 !important; 
    
    /* Taşma önleyici */
    min-width: 0 !important; 
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

/* İÇERİK DÜZENİ: İSİM VE FİYAT SATIRI */
/* İsim ve Fiyatı kapsayan sanal bir satır oluşturuyoruz */
.viya-pick__info > span:not(.viya-pick__badge):not(.viya-pick__cta),
.viya-pick__name {
    display: flex !important;
    justify-content: space-between !important; /* İKİ UCA YASLA */
    align-items: baseline !important;
    width: 100% !important; /* Tüm genişliği kullan */
}

/* ÜRÜN ADI (SOLDA) */
.viya-pick__name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text, #1a1a1a) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
    
    /* Uzun isimler taşmasın, fiyatı ezmesin */
    flex: 1 !important;
    padding-right: 10px !important;
}

/* FİYAT (SAĞDA) */
.viya-pick__price {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--section-color, #cd7f32) !important;
    white-space: nowrap !important;
    text-align: right !important;
    
    /* Fiyatın büzüşmesini engelle */
    flex-shrink: 0 !important;
}

/* ROZET (EN ÜSTTE) */
.viya-pick__badge {
    align-self: flex-start !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--color-text-dim, #666) !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* BUTON (VARSA - EN ALTTA) */
.viya-pick__cta {
    align-self: flex-start !important;
    display: inline-block !important;
    border-radius: 3px !important;
    background-color: var(--section-color, #cd7f32) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* -----------------------------------------------------------
   4. ANA ÜRÜN KARTI (DİĞER MENÜLER BOZULMASIN)
   ----------------------------------------------------------- */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"
        "actions actions" !important;
    gap: 2px 12px !important;
}
.viya-item__content { display: contents !important; }

/* Fotoğraf */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    margin: 0 !important;
    align-self: start !important;
}

/* Header */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
}
.viya-item__name { font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 !important; padding-right: 5px !important; color: var(--color-text, #1a1a1a) !important; }
.viya-item__price { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--section-color, #cd7f32) !important; white-space: nowrap !important; line-height: 1.1 !important; }
.viya-item__badges { position: absolute !important; right: 0 !important; bottom: 0 !important; display: flex !important; justify-content: flex-end !important; pointer-events: none; }
.viya-stock-badge, .viya-badge, .viya-chip { border-radius: 2px !important; font-size: 0.55rem !important; padding: 1px 4px !important; height: 14px !important; line-height: 1.1 !important; font-weight: 700 !important; text-transform: uppercase !important; background: var(--color-bg-alt, #f5f5f5) !important; color: var(--color-text-dim, #666) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important; white-space: nowrap !important; }

.viya-item__desc { grid-area: desc !important; font-size: 0.85rem !important; color: var(--color-text-dim, #666) !important; line-height: 1.4 !important; margin: 0 !important; margin-bottom: 2px !important; align-self: start !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.viya-item__tags { grid-area: tags !important; display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-top: 2px !important; padding-top: 4px !important; border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important; width: 100% !important; justify-content: flex-start !important; margin-bottom: 0 !important; }
.viya-tag { border-radius: 2px !important; font-size: 0.65rem !important; padding: 2px 6px !important; background: var(--color-bg-alt, #f5f5f5) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important; color: var(--color-text-dim, #666) !important; font-weight: 600 !important; }
.viya-item__actions-grid { grid-area: actions !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; margin-top: 0 !important; padding-top: 2px !important; }
.viya-action-chip { background: transparent !important; border: none !important; min-width: 100px !important; padding: 0 !important; margin: 0 !important; }
.viya-action-chip summary { background: transparent !important; color: var(--section-color, #cd7f32) !important; font-size: 0.75rem !important; font-weight: 800 !important; padding: 2px 0 !important; display: flex !important; justify-content: flex-end !important; }
.viya-action-chip summary::after { content: '▸' !important; margin-left: 5px !important; color: var(--section-color, #cd7f32) !important; } 
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip__content, .viya-customize__content { background: transparent !important; border: none !important; padding: 2px 0 0 0 !important; text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; }
.viya-item__detail { justify-content: flex-end !important; text-align: right !important; font-size: 0.8rem !important; color: var(--color-text-dim, #666) !important; margin-bottom: 1px !important; }

@media (min-width: 960px) {
    .viya-item__main { grid-template-columns: 140px minmax(0, 1fr) !important; grid-template-areas: "image header" "image desc" "tags  tags" "actions actions" !important; }
    .viya-item__thumb { grid-row: 1 / 3 !important; max-height: 180px !important; }
}
/* ==========================================================================
   VİYA v45.0 - GRID LOCK & ZERO GAP (KESİN BOŞLUK ÇÖZÜMÜ)
   1. Signature/Cross: Grid yapısı ile Fiyat SAĞA ÇİVİLENDİ.
   2. Mantık: "1fr auto" kuralı ile İsim genişler, Fiyatı duvara yaslar.
   3. Boşluklar: Detaylar ve Etiketler arasındaki satır boşluğu silindi.
   ========================================================================== */

/* -----------------------------------------------------------
   1. ANA ÜRÜN KARTI (GENEL)
   ----------------------------------------------------------- */
.viya-item {
    position: relative !important;
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin-bottom: 15px !important;
}

/* -----------------------------------------------------------
   2. SIGNATURE & CROSS MENU (GRID LOCK SİSTEMİ)
   Bu kısım o sağdaki boşluğu yok eden kısımdır.
   ----------------------------------------------------------- */
.viya-pick {
    display: flex !important; /* Ana yapı yan yana */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    width: 100% !important; /* Kart tam genişlik */
    background: var(--color-bg, #ffffff) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    box-sizing: border-box !important; /* Padding dahil hesapla */
    margin-bottom: 10px !important;
    gap: 12px !important;
}

/* FOTOĞRAF (SOL - SABİT) */
.viya-pick__thumb {
    display: block !important;
    flex: 0 0 90px !important; /* Genişlik 90px'e kilitli */
    width: 90px !important;
    height: 60px !important;
    aspect-ratio: 3/2 !important;
    
    background-size: cover !important;
    background-position: center !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* İÇERİK KUTUSU (SAĞ - GRID YAPISI) */
.viya-pick__info {
    flex: 1 !important;       /* Kalan tüm boşluğu doldur */
    width: 100% !important;   /* Ebeveynin sonuna kadar uzan */
    min-width: 0 !important;  /* Taşma koruması */
    padding: 0 !important;
    
    /* GRID SİHRİ: İsim genişlesin, Fiyat sağa yapışsın */
    display: grid !important;
    grid-template-columns: 1fr auto !important; 
    grid-template-areas: 
        "badge badge"
        "name  price"
        "cta   cta";
    
    align-items: center !important;
    row-gap: 2px !important; /* Satırlar arası minik boşluk */
}

/* ÜRÜN ADI (SOLA YASLI - GENİŞLEYEN ALAN) */
.viya-pick__name {
    grid-area: name !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text, #1a1a1a) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important; /* İsim sığmazsa alt satıra geçsin */
    padding-right: 10px !important; /* Fiyatla yapışmasın */
}

/* FİYAT (SAĞA YASLI - DUVARA ÇİVİLİ) */
.viya-pick__price {
    grid-area: price !important;
    justify-self: end !important; /* Hücrenin en sağına yasla */
    
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--section-color, #cd7f32) !important;
    white-space: nowrap !important;
}

/* ROZET (EN ÜST - TEK BAŞINA) */
.viya-pick__badge {
    grid-area: badge !important;
    justify-self: start !important;
    
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--color-text-dim, #666) !important;
    background: var(--color-bg-alt, #f5f5f5) !important;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* BUTON (EN ALT - VARSA) */
.viya-pick__cta {
    grid-area: cta !important;
    justify-self: start !important;
    
    display: inline-block !important;
    border-radius: 3px !important;
    background-color: var(--section-color, #cd7f32) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* -----------------------------------------------------------
   3. ANA ÜRÜN KARTI (BOŞLUK ALINDI)
   ----------------------------------------------------------- */
.viya-item__main {
    display: grid !important;
    width: 100% !important;
    align-items: start !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    
    /* Satır boşluklarını minimize et */
    gap: 0 12px !important; 
    
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: 
        "image header"
        "image desc"
        "tags  tags"
        "actions actions" !important;
}
.viya-item__content { display: contents !important; }

/* Fotoğraf */
.viya-item__thumb {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important;
    max-height: 100px !important; /* Uzama engeli */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    margin: 0 !important;
    align-self: start !important;
}

/* Header */
.viya-item__header {
    grid-area: header !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 2px !important;
}
.viya-item__name { font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 !important; padding-right: 5px !important; color: var(--color-text, #1a1a1a) !important; }
.viya-item__price { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--section-color, #cd7f32) !important; white-space: nowrap !important; line-height: 1.1 !important; }

/* Stok Rozeti */
.viya-item__badges { position: absolute !important; right: 0 !important; bottom: 0 !important; display: flex !important; justify-content: flex-end !important; pointer-events: none; }
.viya-stock-badge, .viya-badge, .viya-chip { border-radius: 2px !important; font-size: 0.55rem !important; padding: 1px 4px !important; height: 14px !important; line-height: 1.1 !important; font-weight: 700 !important; text-transform: uppercase !important; background: var(--color-bg-alt, #f5f5f5) !important; color: var(--color-text-dim, #666) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important; white-space: nowrap !important; }

/* Açıklama */
.viya-item__desc {
    grid-area: desc !important;
    font-size: 0.85rem !important;
    color: var(--color-text-dim, #666) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    margin-bottom: 2px !important; /* Alt boşluk az */
    align-self: start !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Etiketler */
.viya-item__tags {
    grid-area: tags !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    
    /* GEREKSİZ BOŞLUK ALINDI */
    margin-top: 2px !important;
    padding-top: 4px !important;
    margin-bottom: 0 !important; /* Altına boşluk bırakma */
    
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
    width: 100% !important;
    justify-content: flex-start !important;
}
.viya-tag { border-radius: 2px !important; font-size: 0.65rem !important; padding: 2px 6px !important; background: var(--color-bg-alt, #f5f5f5) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.1)) !important; color: var(--color-text-dim, #666) !important; font-weight: 600 !important; }

/* Butonlar (Detaylar) */
.viya-item__actions-grid {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    
    /* GEREKSİZ BOŞLUK ALINDI */
    margin-top: 0 !important; 
    padding-top: 0 !important; 
}
.viya-action-chip { background: transparent !important; border: none !important; min-width: 100px !important; padding: 0 !important; margin: 0 !important; }
.viya-action-chip summary { background: transparent !important; color: var(--section-color, #cd7f32) !important; font-size: 0.75rem !important; font-weight: 800 !important; padding: 2px 0 !important; display: flex !important; justify-content: flex-end !important; }
.viya-action-chip summary::after { content: '▸' !important; margin-left: 5px !important; color: var(--section-color, #cd7f32) !important; } 
.viya-action-chip[open] summary::after { transform: rotate(90deg) !important; }
.viya-action-chip__content, .viya-customize__content { background: transparent !important; border: none !important; padding: 2px 0 0 0 !important; text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; }
.viya-item__detail { justify-content: flex-end !important; text-align: right !important; font-size: 0.8rem !important; color: var(--color-text-dim, #666) !important; margin-bottom: 1px !important; }

/* Masaüstü */
@media (min-width: 960px) {
    .viya-item__main { grid-template-columns: 140px minmax(0, 1fr) !important; grid-template-areas: "image header" "image desc" "tags  tags" "actions actions" !important; }
    .viya-item__thumb { grid-row: 1 / 3 !important; max-height: 180px !important; }
}
/* ==========================================================================
   STOK ROZETİ (BADGE) ÖZEL AYARLARI
   1. Konum: Sağ alt köşe.
   2. Renk: Tema rengi (Turuncu/Yeşil vb.) ve Beyaz yazı.
   3. Boşluk: Fiyat ile çakışmaması için header alt boşluğu artırıldı.
   ========================================================================== */

/* 1. KART BAŞLIĞI (Rozet için yer açıyoruz) */
.viya-item__header {
    position: relative !important;
    /* Fiyat ile alttaki rozet arasına güvenli mesafe (24px) */
    padding-bottom: 24px !important; 
    margin-bottom: 2px !important;
}

/* 2. ROZET KAPSAYICISI (Konumlandırma) */
.viya-item__badges,
.viya-stock-badge-wrapper {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important; /* En alta yapış */
    
    display: flex !important;
    justify-content: flex-end !important; /* Sağa yasla */
    align-items: center !important;
    pointer-events: none; /* Tıklamayı engelleme */
    gap: 4px !important;
}

/* 3. ROZET GÖRÜNÜMÜ (Stil) */
.viya-stock-badge, 
.viya-badge, 
.viya-chip {
    /* Şekil */
    border-radius: 2px !important; /* Köşeli */
    padding: 2px 6px !important;
    height: auto !important;
    
    /* Yazı */
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    
    /* RENK (Tema Rengi Dolgulu) */
    background-color: var(--section-color, #cd7f32) !important; 
    color: #ffffff !important; /* Beyaz Yazı */
    border: none !important;
    box-shadow: none !important;
}
/* ==========================================================================
   ÜRÜN ETİKETLERİ MESAFE AYARI
   Fotoğraf/Açıklama ile Etiketler arasındaki boşluğu (margin) biraz açar.
   ========================================================================== */

.viya-item__tags {
    /* Eski değer 2px idi, 8px yaparak arayı biraz açtık */
    margin-top: 8px !important; 
    
    /* Çizgi ile yazı arasındaki boşluk */
    padding-top: 6px !important; 
    
    /* Çizgiyi koru */
    border-top: 1px dashed var(--color-border, rgba(0,0,0,0.1)) !important;
}
/* =========================================
   NEŞELİ TEMA BUTONU (GÜNEŞ & AY DEDE)
   ========================================= */
.viya-theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 44px;
    height: 44px;
}

.viya-theme-toggle:hover {
    background-color: rgba(0,0,0,0.05);
    transform: rotate(15deg) scale(1.1); /* Hover'da hafif dönüş ve büyüme */
}

.viya-theme-toggle svg {
    width: 28px;
    height: 28px;
    position: absolute;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Yaylanma efekti */
}

/* --- LIGHT MODE (Varsayılan) --- */
/* Güneş görünsün, sarı olsun */
[data-theme="light"] .icon-sun-face {
    color: #FFD700; /* Altın Sarısı */
    transform: translateY(0) rotate(0);
    opacity: 1;
}

/* Ay gizlensin (aşağıda beklesin) */
[data-theme="light"] .icon-moon-face {
    color: #6c5ce7;
    transform: translateY(100%) rotate(90deg);
    opacity: 0;
}

/* --- DARK MODE --- */
/* Güneş gizlensin (yukarı çıksın) */
[data-theme="dark"] .icon-sun-face {
    color: #FFD700;
    transform: translateY(-100%) rotate(-90deg);
    opacity: 0;
}

/* Ay Dede görünsün, tatlı bir mavi/gri olsun */
[data-theme="dark"] .icon-moon-face {
    color: #74b9ff; /* Açık Mavi */
    fill: #dfe6e9;  /* İç dolgu */
    transform: translateY(0) rotate(0);
    opacity: 1;
}

/* Mobilde dokunma alanı genişlesin */
@media (max-width: 768px) {
    .viya-theme-toggle {
        width: 48px;
        height: 48px;
    }
}
/* Zıplayan Scroll İkonu */
.viya-scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-decoration: none;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.viya-scroll-hint:hover {
    opacity: 1;
}

.viya-scroll-hint .scroll-text {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

.viya-scroll-hint svg {
    animation: bounce 2s infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
/* =========================================
   SAĞ ALT 3'LÜ OK ANİMASYONU
   ========================================= */
.viya-scroll-arrows {
    position: absolute;
    bottom: 40px;
    right: 40px; /* Sağdan boşluk */
    z-index: 20;
    text-decoration: none;
    width: 24px;  /* Okların genişliği */
    height: 60px; /* Toplam yükseklik */
}

/* Her bir ok parçası (span) */
.viya-scroll-arrows span {
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #fff; /* Ok kalınlığı */
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    margin: -10px 0; /* Okları birbirine yaklaştırır */
    animation: arrow-anim 2s infinite;
    opacity: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Hafif gölge */
}

/* Animasyon Gecikmeleri (Sırayla yanmaları için) */
.viya-scroll-arrows span:nth-child(1) {
    animation-delay: -0.2s;
}
.viya-scroll-arrows span:nth-child(2) {
    animation-delay: -0.4s;
}
.viya-scroll-arrows span:nth-child(3) {
    animation-delay: -0.6s;
}

/* Animasyon Keyframes */
@keyframes arrow-anim {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* Mobilde konum ayarı (Biraz daha içeri alalım) */
@media (max-width: 768px) {
    .viya-scroll-arrows {
        right: 20px;
        bottom: 30px;
        transform: scale(0.8); /* Mobilde biraz daha minik olsun */
    }
}
/* =========================================
   MOBİL İÇİN KESİN GÖRÜNÜRLÜK AYARI
   ========================================= */
@media (max-width: 960px) {
    .viya-scroll-arrows {
        display: block !important;      /* Kesinlikle göster */
        visibility: visible !important; /* Görünür yap */
        opacity: 1 !important;          /* Şeffaflığı kaldır */
        
        /* Konumlandırma */
        position: absolute !important;
        right: 20px !important;
        bottom: 40px !important;        /* Biraz daha yukarı aldık */
        z-index: 99999 !important;      /* Her şeyin en üstüne çıkar */
        
        /* Boyut */
        transform: scale(0.7);
        pointer-events: auto;           /* Tıklanabilir olsun */
    }

    /* Okların rengini belirginleştir (Gölge ekle) */
    .viya-scroll-arrows span {
        border-color: #ffffff !important;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8)); /* Arka plan açıksa bile görünsün */
    }
}
/* =========================================
   MOBİL İÇİN KÜÇÜLTÜLMÜŞ HIZLI MENÜ BUTONLARI
   ========================================= */
@media (max-width: 768px) {
    /* Izgara boşluğunu azalt */
    .viya-menu-switch {
        gap: 8px; 
        margin-bottom: 16px; /* Alt boşluğu da kısalttık */
    }

    /* Buton iç boşluğunu (padding) daralt */
    .viya-menu-switch__btn {
        padding: 8px 10px; /* Daha ince */
        gap: 8px; /* İkon ve yazı birbirine yaklaşsın */
        border-radius: 10px;
    }

    /* İkon kutusunu küçült */
    .viya-menu-switch__icon-box {
        width: 32px;  /* Eskisi 40px idi */
        height: 32px;
        border-radius: 6px;
    }

    /* İkonun (SVG) kendisini küçült */
    .viya-menu-switch__icon-box svg {
        width: 16px;
        height: 16px;
    }

    /* Yazıları küçült */
    .viya-menu-switch__sub {
        font-size: 0.6rem; /* "Göz at" yazısı */
        margin-bottom: 0; /* Satır aralığını sıkılaştır */
    }

    .viya-menu-switch__label {
        font-size: 0.8rem; /* Menü ismi (Sandviç vb.) */
    }

    /* Oku biraz küçült */
    .viya-menu-switch__arrow {
        font-size: 1rem;
    }
}
/* =========================================
   TAM DİKEY ORTALI HIZLI MENÜ BUTONLARI
   ========================================= */

/* 1. Butonun Kendisi (Dış Çerçeve) */
.viya-menu-switch__btn {
    display: flex !important;
    align-items: center !important; /* Dikeyde tam orta */
    justify-content: space-between; /* İkon solda, ok sağda */
    flex-direction: row;
    
    /* Diğer Süslemeler */
    appearance: none;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    min-height: 64px; /* Yükseklik standardı (içerik ortalansın diye) */
}

/* 2. İkon Kutusu */
.viya-menu-switch__icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--btn-bg);
    color: var(--btn-color);
    display: flex;             /* Flex aç */
    align-items: center;       /* Dikey orta */
    justify-content: center;   /* Yatay orta */
    flex-shrink: 0;            /* Asla büzülme */
    margin-right: 12px;        /* Yazı ile arayı aç */
}

/* 3. Yazı Alanı (Burası Önemli) */
.viya-menu-switch__text {
    display: flex;
    flex-direction: column;    /* Alt alta */
    justify-content: center;   /* Dikeyde tam ortaya topla */
    flex: 1;                   /* Kalan boşluğu doldur */
    height: 100%;              /* Yükseklik boyunca ortala */
    line-height: 1;            /* Satır boşluklarını sıfırla */
}

/* Üstteki küçük yazı */
.viya-menu-switch__sub {
    font-size: 0.65rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 2px 0; /* Sadece alta minik boşluk */
    line-height: 1;    /* Kaymayı önle */
    display: block;
}

/* Alttaki Ana Başlık */
.viya-menu-switch__label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    line-height: 1;    /* Kaymayı önle */
    display: block;
    padding-top: 2px;  /* Görsel denge */
}

/* 4. Sağdaki Ok */
.viya-menu-switch__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-left: 8px;
}

/* MOBİL AYARLARI (KÜÇÜK VE ORTALI) */
@media (max-width: 768px) {
    .viya-menu-switch__btn {
        min-height: 50px; /* Mobilde yükseklik standardı */
        padding: 8px 10px;
    }
    
    .viya-menu-switch__icon-box {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }
    
    .viya-menu-switch__label {
        font-size: 0.8rem;
    }
    
    .viya-menu-switch__sub {
        font-size: 0.6rem;
    }
}
/* =========================================
   INSTAGRAM KULLANICI ADI GÖRÜNÜMÜ
   ========================================= */

/* Varsayılan: Yazıyı Gizle (Masaüstü için) */
.viya-social-username {
    display: none;
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: 8px; /* İkonla arası */
    letter-spacing: 0.5px;
}

/* Sadece MOBİLDE (Hamburger menüde) devreye girer */
@media (max-width: 960px) {
    
    /* Butonu genişlet ve "hap" şekline getir */
    .viya-nav .viya-social-link {
        width: auto !important;       /* Kare olmayı bırak, uza */
        height: 44px !important;      /* Biraz daha yüksek olsun */
        border-radius: 50px !important; /* Tam yuvarlak köşeler */
        padding: 0 20px !important;   /* Yanlardan dolgunluk */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 10px;             /* Menüde diğerlerinden biraz ayrılsın */
    }

    /* Yazıyı Görünür Yap */
    .viya-social-username {
        display: inline-block;
        margin-left: 15px !important;
    }
}
/* =========================================
   LIGHTBOX (RESİM BÜYÜTME) DÜZELTMESİ
   ========================================= */
.viya-lightbox {
    display: none; /* Başlangıçta kesinlikle gizle */
    opacity: 0;
    pointer-events: none;
}

/* JS ile açıldığında (is-open sınıfı eklendiğinde) görünür yap */
.viya-lightbox.is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
/* =========================================
   DAHA KÜÇÜK VE ZARİF KAYDIRMA OKU
   ========================================= */
.viya-picks {
    position: relative !important;
    overflow: visible !important;
}

.viya-scroll-hint-arrow {
    position: absolute;
    right: 12px;           /* Kenardan mesafe */
    top: 50%;              /* Dikey orta */
    transform: translateY(-50%);
    z-index: 9999;
    
    /* BOYUTLAR KÜÇÜLTÜLDÜ */
    width: 34px;           /* 44px -> 34px */
    height: 34px;          /* 44px -> 34px */
    
    /* TEMADAN GELEN RENK */
    background: var(--section-color, #cd7f32) !important; 
    color: #ffffff !important;
    
    /* İNCE BEYAZ ÇERÇEVE */
    border: 1.5px solid #ffffff !important; 
    border-radius: 50% !important;
    
    /* DAHA HAFİF GÖLGE */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    opacity: 1;
    pointer-events: none;
}

/* OK İKONU BOYUTU */
.viya-scroll-hint-arrow svg {
    width: 18px;           /* 24px -> 18px */
    height: 18px;          /* 24px -> 18px */
    animation: elegant-pulse 1.5s infinite ease-in-out;
}

@keyframes elegant-pulse {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); } /* Sıçrama mesafesi de azaldı */
    100% { transform: translateX(0); }
}
/* Signature Rail (Ray) İçerik Hizalaması */
.viya-picks__rail {
    display: flex !important;
    align-items: center !important; /* Kartları dikeyde tam ortalar */
    justify-content: flex-start;
    gap: 15px;
    padding: 20px 0; /* Üstten ve alttan eşit boşluk vererek nefes aldırır */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Kartların kendi içinde kaymasını önlemek için */
.viya-pick {
    scroll-snap-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Kart içindeki metinleri de ortalar */
}
/* =========================================
   MENÜ GEÇİŞ BUTONLARI - DARK MODE DÜZELTMESİ (BEYAZLIĞI KALDIRMA)
   ========================================= */

/* Karanlık Mod Sınıfları */
body.dark-mode .viya-menu-switch__btn,
body.dark .viya-menu-switch__btn,
[data-theme="dark"] .viya-menu-switch__btn {
    /* 1. Beyaz arka planı kaldır, çok hafif şeffaf gri yap */
    background: rgba(255, 255, 255, 0.05) !important;
    
    /* 2. Beyaz metin yap */
    color: #ffffff !important;
    
    /* 3. İnce beyaz/gri kenarlık ekle */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    /* 4. Butonun gölgesini karanlığa uyarla */
    box-shadow: none !important;
}

/* İkonların (SVG) rengini beyaz yap */
body.dark-mode .viya-menu-switch__icon svg,
body.dark .viya-menu-switch__icon svg,
[data-theme="dark"] .viya-menu-switch__icon svg {
    stroke: #ffffff !important;
}

/* Üzerine gelince (Hover) - Temanın rengini (Bronz/Yeşil/Kahve) alması için */
body.dark-mode .viya-menu-switch__btn:hover,
body.dark .viya-menu-switch__btn:hover {
    background: var(--section-color, #cd7f32) !important;
    border-color: var(--section-color, #cd7f32) !important;
    color: #ffffff !important;
}

/* Etiket metni (VİYA CAFE vb.) beyaz kalsın */
body.dark-mode .viya-menu-switch__label,
body.dark .viya-menu-switch__label {
    color: #ffffff !important;
}
/* =========================================
   ÇİFT SCROLL SORUNU DÜZELTMESİ
   ========================================= */

/* 1. Modal gövdesini ana scroll alanı yapalım */
.viya-modal__body {
    overflow-y: auto !important; /* Dikey kaydırmayı buraya veriyoruz */
    max-height: calc(100vh - 80px); /* Header payını çıkararak tam ekran yüksekliği */
    padding-bottom: 100px; /* En alttaki ürünlerin kapanmaması için boşluk */
    -webkit-overflow-scrolling: touch; /* Mobilde pürüzsüz kaydırma */
}

/* 2. İçerideki menü listesinin kendi scroll özelliğini kapatalım */
.viya-menu-list {
    overflow: visible !important; /* İçerideki scroll'u devre dışı bırak */
    height: auto !important;
    max-height: none !important;
}

/* 3. Modal panelinin kendisinde taşmaları gizleyelim (temiz görünüm) */
.viya-modal__panel {
    overflow: hidden !important; 
    display: flex;
    flex-direction: column;
}

/* 4. Scrollbar tasarımı (Zarif ve ince olması için) */
.viya-modal__body::-webkit-scrollbar {
    width: 4px;
}

.viya-modal__body::-webkit-scrollbar-thumb {
    background: var(--section-color, #cd7f32);
    border-radius: 10px;
}
.viya-category__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff; /* Karanlık modda bu rengi de otomatik ayarlayacağız */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Karanlık Mod Uyumlu Sticky */
body.dark-mode .viya-category__header,
body.dark .viya-category__header {
    background: #1a1a1a; /* Modal arka plan rengiyle aynı olmalı */
}
/* =========================================
   SCROLLBAR KALINLAŞTIRMA (KOLAY ERİŞİM)
   ========================================= */

/* 1. Modal İçindeki Ana Scroll (Dikey) */
.viya-modal__body::-webkit-scrollbar {
    width: 10px !important; /* Genişliği 4px'den 10px'e çıkardık */
}

/* 2. Signature Rayı Altındaki Scroll (Yatay) */
.viya-picks__rail::-webkit-scrollbar {
    height: 8px !important; /* Yatay scroll yüksekliğini artırdık */
    display: block !important; /* Gizliyse görünür yapalım */
}

/* Scroll Çubuğu Yolu (Track) */
.viya-modal__body::-webkit-scrollbar-track,
.viya-picks__rail::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

/* Kaydırılan Tutamaç (Thumb) */
.viya-modal__body::-webkit-scrollbar-thumb,
.viya-picks__rail::-webkit-scrollbar-thumb {
    background: var(--section-color, #cd7f32) !important; /* Temaya uygun renk */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Etrafına boşluk bırakarak daha şık görünüm */
    border-radius: 10px;
    cursor: pointer;
}

/* Tutamaç üzerine gelince renk koyulaşsın */
.viya-modal__body::-webkit-scrollbar-thumb:hover,
.viya-picks__rail::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.8);
}

/* Firefox için (Standart destek sınırlıdır ama ekleyelim) */
.viya-modal__body, .viya-picks__rail {
    scrollbar-width: auto; /* 'thin' yerine 'auto' yaparak kalınlaştırır */
    scrollbar-color: var(--section-color, #cd7f32) rgba(0, 0, 0, 0.05);
}