/* =================================================================
   STREET — burger/döner/fast food. Siyah zemin, kalın sokak
   tipografisi, kayan "bugün taze" bandı, tam genişlik dev fotoğraflı
   kartlar, köşesinde sallanan eğik fiyat etiketi. Kategori menüsü
   mobil uygulamalardaki gibi ekranın ALTINDA sabit durur.
   Vurgu rengi etiketlerin ve bandın rengidir.
   ================================================================= */
.t-street {
    --m-bg: #0e0e0e;
    --m-fg: #fafafa;
    --m-muted: #a3a3a3;
    --m-card: #1a1a1a;
    --m-border: rgba(255, 255, 255, .08);
    --m-radius: 22px;
    --m-shadow: none;
    --m-head-font: 'Archivo Black', Impact, sans-serif;
    --m-body-font: 'Archivo', system-ui, sans-serif;
    --m-price: #111;
    --m-chip-bg: transparent;
    --m-chip-fg: #d4d4d4;
    --m-chip-on-bg: var(--m-accent);
    --m-chip-on-fg: #111;
    --m-nav-bg: rgba(14, 14, 14, .92);
}

.t-street .m-hero {
    background:
        repeating-linear-gradient(-45deg, rgba(var(--m-accent-rgb), .07) 0 16px, transparent 16px 32px),
        #0e0e0e;
    padding: 2.75rem 1.25rem 3.75rem; text-align: left;
}
.t-street .m-hero::after {
    /* Kayan "taze" bandı */
    content: 'TAZE • SICAK • HIZLI • TAZE • SICAK • HIZLI • TAZE • SICAK • HIZLI • TAZE • SICAK • HIZLI • ';
    position: absolute; left: -5%; right: -5%; bottom: .9rem; white-space: nowrap; overflow: hidden;
    background: var(--m-accent); color: #111; font: 400 .9rem/2.1 var(--m-head-font); letter-spacing: .1em;
    transform: rotate(-2deg); animation: streetTicker 14s linear infinite;
    text-indent: 0;
}
@keyframes streetTicker { from { text-indent: 0; } to { text-indent: -48ch; } }
.t-street .m-hero-inner { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center; }
.t-street .m-logo { grid-row: span 2; width: 72px; height: 72px; margin: 0; border-radius: 18px; background: var(--m-accent); color: #111; transform: rotate(-6deg); box-shadow: 6px 6px 0 #fff; }
.t-street .m-name { font-size: clamp(2rem, 10vw, 3.4rem); text-transform: uppercase; line-height: .95; margin: 0; }
.t-street .m-address { margin: 0; color: var(--m-muted); opacity: 1; }
.t-street .m-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 1rem; }
.t-street .m-btn { border-radius: 12px; background: #fff; color: #111; border: 0; font-weight: 700; box-shadow: 3px 3px 0 var(--m-accent); }
.t-street .m-btn-wa { background: #25d366; color: #fff; }

.t-street .m-search input { border-radius: 14px; background: #1a1a1a; border: 2px solid #262626; }
.t-street .m-search input:focus { border-color: var(--m-accent); }

/* Alt sabit kategori barı (uygulama tarzı) */
.t-street .m-cats {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; z-index: 90;
    border-top: 1px solid #262626; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}
.t-street .m-cats-track { padding: .6rem .75rem; }
.t-street .m-cat { border-radius: 12px; font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.t-street .m-cat.is-active { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(var(--m-accent-rgb), .35); }
.t-street .m-footer { padding-bottom: 8rem; }
.t-street .m-top { bottom: 5.25rem; background: #fff; color: #111; box-shadow: 3px 3px 0 var(--m-accent); border-radius: 14px; }

.t-street .m-sec-title { font-size: clamp(1.8rem, 8vw, 2.4rem); text-transform: uppercase; line-height: 1; }
.t-street .m-sec-title span { display: inline-block; background: var(--m-accent); color: #111; padding: .2rem .6rem .1rem; transform: rotate(-1.5deg); }
.t-street .m-sec-count { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Dev fotoğraflı kartlar */
.t-street .m-items { gap: 1.1rem; }
@media (min-width: 720px) { .t-street .m-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-street .m-item { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: var(--m-card); border: 2px solid #232323; }
.t-street .m-item-img { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; overflow: visible; }
.t-street .m-item-img img { border-radius: 20px 20px 0 0; }
.t-street .m-price-tag {
    display: block; position: absolute; right: .9rem; bottom: -1.1rem; z-index: 2;
    background: var(--m-accent); color: #111; font: 400 1.25rem/1 var(--m-head-font);
    padding: .65rem .95rem; border-radius: 12px; box-shadow: 4px 4px 0 #fff;
    transform: rotate(-6deg); animation: streetWiggle 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -300ms);
}
@keyframes streetWiggle { 0%, 84%, 100% { transform: rotate(-6deg); } 88% { transform: rotate(4deg) scale(1.08); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(-4deg); } }
.t-street .m-item.has-img .m-item-price { display: none; }
.t-street .m-item-body { padding: 1.3rem 1.1rem 1.1rem; }
.t-street .m-leader { display: none; }
.t-street .m-item-head { justify-content: space-between; }
.t-street .m-item-name { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; padding-right: 5.5rem; }
.t-street .m-item:not(.has-img) .m-item-name { padding-right: 0; }
.t-street .m-item-price { background: var(--m-accent); color: #111; padding: .3rem .6rem; border-radius: 8px; font-family: var(--m-head-font); font-weight: 400; }
.t-street .m-item-desc { color: var(--m-muted); }

/* "Tezgâha çarpma" girişi */
.js .t-street .m-item { transform: scale(1.08) rotate(1.5deg); }
.js .t-street .m-item.is-in { transition: none; animation: streetSlam .55s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes streetSlam { from { opacity: 0; transform: scale(1.12) rotate(2deg); } to { opacity: 1; transform: none; } }

.t-street .m-modal-card { background: #151515; border: 2px solid #262626; }
.t-street .m-modal-name { text-transform: uppercase; }
.t-street .m-modal-price { display: inline-block; background: var(--m-accent); color: #111; padding: .4rem .9rem; border-radius: 12px; font-family: var(--m-head-font); font-weight: 400; }

@media (min-width: 1100px) { .t-street .m-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }