/* =====================================================================
   QR MENÜ - BİLEŞENLER
   Filtre çubuğu · Kampanya kartı · Ürün kartı · Rozetler · Özellik bandı
   ===================================================================== */

/* ===============================================================
   FİLTRE ÇUBUĞU (Tümü / Yemek / İçecek ...)
   =============================================================== */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-2);
    margin-bottom: var(--space-5);
}

.filter-bar__track {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.filter-bar__track::-webkit-scrollbar { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: .62rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.chip .ico { color: var(--gold); opacity: .85; }

.chip:hover { color: var(--text); background: var(--surface-hover); }

.chip.is-active {
    background: var(--grad-gold);
    color: #17130A;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.chip.is-active .ico { color: #17130A; opacity: 1; }

/* Chip'ler arası ayırıcı (masaüstü) */
@media (min-width: 992px) {
    .filter-bar__track .chip + .chip { position: relative; }
    .filter-bar__track .chip + .chip::before {
        content: "";
        position: absolute;
        left: calc(var(--space-2) * -1 - 1px);
        top: 20%; bottom: 20%;
        width: 1px;
        background: var(--border-soft);
    }
    .filter-bar__track .chip.is-active::before,
    .filter-bar__track .chip.is-active + .chip::before { display: none; }
}

/* ===============================================================
   ROZETLER
   =============================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .32rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #17130A;
    background: var(--badge-color, var(--gold));
    box-shadow: var(--shadow-sm);
}
/* Koyu rozetlerde metin açık renk olmalı */
.badge--light-text { color: #fff; }

.badge--float {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
}

/* ===============================================================
   KAMPANYA KARTI
   =============================================================== */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.promo-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

.promo-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-2);
}
.promo-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-base);
}
.promo-card:hover .promo-card__media img { transform: scale(1.05); }

.promo-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    flex: 1;
}

.promo-card__title { font-size: var(--fs-xl); margin: 0; }

.promo-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 1;
}

.promo-card__info { flex: 1; min-width: 0; }
.promo-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

.promo-card__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); }
.promo-card__price ins {
    text-decoration: none;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
}
.promo-card__price del { color: var(--text-dim); font-size: var(--fs-base); }

/* İndirim kutusu */
.discount-box {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 82px;
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--accent, var(--gold));
    border-radius: var(--radius-sm);
    color: var(--accent, var(--gold));
    background: color-mix(in srgb, var(--accent, var(--gold)) 8%, transparent);
    align-self: center;
}
.discount-box__value { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; }
.discount-box__label { font-size: .6rem; letter-spacing: .12em; }

/* Alt bilgi satırı */
.promo-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: var(--fs-xs);
}
.promo-card__meta .ico { color: var(--gold); flex-shrink: 0; }

/* ===============================================================
   ÜRÜN (MENÜ) KARTI
   =============================================================== */
.dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-4);
}

.dish-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.dish-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
.dish-card.is-unavailable { opacity: .55; }

.dish-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-2);
}
.dish-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.dish-card:hover .dish-card__media img { transform: scale(1.06); }

.dish-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    flex: 1;
}

.dish-card__title { font-size: var(--fs-lg); margin: 0; }
.dish-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; flex: 1; }

.dish-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.dish-card__price {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
}
.dish-card__price del { color: var(--text-dim); font-size: var(--fs-sm); margin-left: var(--space-2); }

.dish-card__tags { display: flex; gap: var(--space-1); color: var(--text-dim); }
.dish-card__tags .ico { color: var(--gold); opacity: .8; }

/* Kategori başlığı (menü sayfası) */
.cat-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
}
.cat-heading__icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--gold);
}
.cat-heading h2 { margin: 0; font-size: var(--fs-2xl); }
.cat-heading__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

/* ===============================================================
   ÖZELLİK BANDI (Taze & Doğal, Usta Şefler...)
   =============================================================== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}

.feature { display: flex; align-items: center; gap: var(--space-3); }

.feature + .feature { position: relative; }
@media (min-width: 992px) {
    .feature + .feature::before {
        content: "";
        position: absolute;
        left: calc(var(--space-4) * -1);
        top: 10%; bottom: 10%;
        width: 1px;
        background: var(--border-soft);
    }
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--gold);
    background: var(--gold-ghost);
    border: 1px solid var(--border);
}

.feature__title { color: var(--gold); font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 2px; }
.feature__text { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */

@media (max-width: 991px) {
    .promo-grid { grid-template-columns: 1fr; gap: var(--space-3); }

    /* Mobilde kampanya kartı yatay: görsel solda, içerik sağda */
    .promo-card { flex-direction: row; align-items: stretch; }

    .promo-card__media {
        width: 42%;
        min-width: 130px;
        aspect-ratio: auto;
    }

    .promo-card__body { padding: var(--space-3); gap: var(--space-2); }
    .promo-card__title { font-size: var(--fs-lg); }
    .promo-card__row { flex-direction: row; align-items: center; }
    .promo-card__price ins { font-size: var(--fs-xl); }

    .discount-box { min-width: 70px; padding: var(--space-2); }
    .discount-box__value { font-size: var(--fs-xl); }

    .badge--float { top: var(--space-2); left: var(--space-2); }

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

    .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .promo-card__media { width: 38%; }
    .promo-card__desc { font-size: var(--fs-xs); }
    .promo-card__meta { font-size: .68rem; }
    .badge { font-size: .58rem; padding: .26rem .5rem; }

    .dish-grid { grid-template-columns: 1fr; }
    .dish-card { flex-direction: row; }
    .dish-card__media { width: 40%; aspect-ratio: auto; min-width: 120px; }
    .dish-card__body { padding: var(--space-3); }

    .features { grid-template-columns: 1fr; padding: var(--space-4); }
    .cat-heading h2 { font-size: var(--fs-xl); }
}