/* =================================================================
   NEON — gece hayatı. İşletme adı yanıp sönen neon tabela gibi
   yanar, kartların kenarında dönen parlak ışık halkası gezer, ürünler
   ekrana "elektrik verilmiş" gibi kısa titremeyle gelir.
   Vurgu rengi (--m-accent) neon ışığın rengidir.
   ================================================================= */
.t-neon {
    --m-bg: #07030d;
    --m-fg: #f5f3ff;
    --m-muted: #a79fc0;
    --m-card: #120a1f;
    --m-border: rgba(255, 255, 255, .08);
    --m-radius: 18px;
    --m-shadow: none;
    --m-head-font: 'Outfit', system-ui, sans-serif;
    --m-body-font: 'Outfit', system-ui, sans-serif;
    --m-price: #fff;
    --m-chip-bg: rgba(255, 255, 255, .06);
    --m-chip-fg: var(--m-muted);
    --m-chip-on-bg: transparent;
    --m-chip-on-fg: #fff;
    --m-nav-bg: rgba(7, 3, 13, .8);
    --m-glow: 0 0 6px rgba(var(--m-accent-rgb), .9), 0 0 18px rgba(var(--m-accent-rgb), .6), 0 0 42px rgba(var(--m-accent-rgb), .35);
}
body.t-neon {
    background:
        radial-gradient(900px 500px at 10% -10%, rgba(var(--m-accent-rgb), .22), transparent 60%),
        radial-gradient(700px 500px at 110% 30%, rgba(56, 189, 248, .12), transparent 60%),
        var(--m-bg);
    background-attachment: fixed;
}
/* İnce tarama çizgileri — eski CRT/tabela hissi */
body.t-neon::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}

.t-neon .m-hero { background: transparent; padding: 3.5rem 1.25rem 2rem; }
.t-neon .m-logo {
    background: transparent; color: #fff; border: 2px solid var(--m-accent);
    box-shadow: var(--m-glow), inset 0 0 12px rgba(var(--m-accent-rgb), .6);
}
.t-neon .m-name {
    font-family: 'Monoton', var(--m-head-font); font-weight: 400;
    font-size: clamp(2rem, 10vw, 3.6rem); letter-spacing: .04em;
    color: #fff; text-shadow: var(--m-glow);
    animation: neonFlicker 4.5s infinite;
}
@keyframes neonFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: var(--m-glow); }
    20%, 24%, 55% { opacity: .55; text-shadow: none; }
}
.t-neon .m-address { color: var(--m-muted); }
.t-neon .m-btn { background: transparent; border: 1px solid rgba(var(--m-accent-rgb), .7); color: #fff; box-shadow: 0 0 12px rgba(var(--m-accent-rgb), .25); }
.t-neon .m-btn-wa { border-color: #25d366; box-shadow: 0 0 14px rgba(37, 211, 102, .35); background: transparent; }

.t-neon .m-search input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.t-neon .m-cats { border-bottom: 1px solid var(--m-border); }
.t-neon .m-cat { border: 1px solid transparent; }
.t-neon .m-cat.is-active { border-color: var(--m-accent); box-shadow: 0 0 12px rgba(var(--m-accent-rgb), .55), inset 0 0 10px rgba(var(--m-accent-rgb), .35); text-shadow: 0 0 8px rgba(var(--m-accent-rgb), .9); }

.t-neon .m-main { position: relative; z-index: 2; }
.t-neon .m-sec-title { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.t-neon .m-sec-title span { color: #fff; text-shadow: var(--m-glow); }
.t-neon .m-sec-count { color: var(--m-accent); font-weight: 600; }

/* İki sütunlu ızgara */
.t-neon .m-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 720px) { .t-neon .m-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t-neon .m-item {
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    background: var(--m-card); border: 1px solid var(--m-border); overflow: hidden; isolation: isolate;
}
/* Kenarda gezen ışık halkası */
.t-neon .m-item::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
    background: conic-gradient(from var(--neon-a, 0deg), transparent 0 70%, var(--m-accent) 80%, #fff 85%, var(--m-accent) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: neonSpin 5s linear infinite; animation-delay: calc(var(--i, 0) * -400ms);
    opacity: .9;
}
@property --neon-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes neonSpin { to { --neon-a: 360deg; } }
.t-neon .m-item:hover { box-shadow: 0 0 22px rgba(var(--m-accent-rgb), .35); }
.t-neon .m-item-img { flex: none; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; }
.t-neon .m-item-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(18, 10, 31, .95)); }
.t-neon .m-item-body { padding: .75rem .8rem .9rem; }
.t-neon .m-item.has-img .m-item-body { margin-top: -2.2rem; position: relative; z-index: 1; }
.t-neon .m-item-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
.t-neon .m-leader { display: none; }
.t-neon .m-item-name { font-size: .98rem; font-weight: 600; }
.t-neon .m-item-price { color: #fff; font-size: 1.05rem; text-shadow: 0 0 10px rgba(var(--m-accent-rgb), .9); }
.t-neon .m-item-desc { font-size: .8rem; }

/* Elektrik verilmiş gibi titreyerek gelme */
.js .t-neon .m-item { transform: none; }
.js .t-neon .m-item.is-in { transition: none; animation: neonIn .9s steps(1, end) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes neonIn {
    0% { opacity: 0; } 10% { opacity: .8; } 15% { opacity: .1; } 25% { opacity: 1; } 32% { opacity: .3; } 40%, 100% { opacity: 1; }
}

.t-neon .m-footer { position: relative; z-index: 2; }
.t-neon .m-top { box-shadow: var(--m-glow); }
.t-neon .m-modal-card { background: #0d0716; border: 1px solid rgba(var(--m-accent-rgb), .5); box-shadow: 0 0 40px rgba(var(--m-accent-rgb), .3); }
.t-neon .m-modal-price { color: #fff; text-shadow: var(--m-glow); }

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