/* =================================================================
   KLASİK — temiz, ferah, marka renkli. Gradyan başlıkta yavaşça
   süzülen yumuşak ışık halkaları; ürün kartları dokununca hafifçe
   yükselir; kategori başlığı vurgu renginde şerit taşır.
   Her işletmeye uyan, güvenli ve profesyonel varsayılan.
   ================================================================= */
.t-classic {
    --m-bg: #f3f4fa;
    --m-fg: #1b1d2a;
    --m-muted: #6b7080;
    --m-card: #ffffff;
    --m-border: rgba(27, 29, 42, .08);
    --m-radius: 18px;
    --m-shadow: 0 4px 18px rgba(20, 24, 60, .06);
    --m-head-font: 'Inter', system-ui, sans-serif;
    --m-body-font: 'Inter', system-ui, sans-serif;
    --m-price: var(--m-accent);
    --m-chip-bg: #fff;
    --m-chip-fg: #3b3f52;
    --m-chip-on-bg: var(--m-accent);
    --m-chip-on-fg: #fff;
    --m-nav-bg: rgba(243, 244, 250, .88);
}
.t-classic .m-hero {
    background: linear-gradient(135deg, var(--m-accent), #1e1e2e);
    background: linear-gradient(135deg, var(--m-accent) 0%, color-mix(in srgb, var(--m-accent) 40%, #0f172a) 100%);
    padding: 3.25rem 1.25rem 3.5rem;
    border-radius: 0 0 32px 32px;
}
/* Süzülen ışık halkaları */
.t-classic .m-hero::before, .t-classic .m-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.t-classic .m-hero::before { width: 260px; height: 260px; top: -90px; right: -70px; animation: classicFloat 14s ease-in-out infinite alternate; }
.t-classic .m-hero::after { width: 190px; height: 190px; bottom: -80px; left: -50px; animation: classicFloat 18s ease-in-out infinite alternate-reverse; }
@keyframes classicFloat { to { transform: translate(-26px, 22px) scale(1.12); } }
.t-classic .m-logo { border: 4px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .2); }
.t-classic .m-name { font-weight: 800; letter-spacing: -.02em; }
.t-classic .m-btn { background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.t-classic .m-toolbar { margin-top: -1.6rem; position: relative; z-index: 5; }
.t-classic .m-search input { border: 0; box-shadow: 0 8px 24px rgba(20, 24, 60, .12); padding-top: .95rem; padding-bottom: .95rem; }
.t-classic .m-cat { box-shadow: 0 2px 8px rgba(20, 24, 60, .06); font-weight: 600; }
.t-classic .m-cat.is-active { box-shadow: 0 6px 16px rgba(var(--m-accent-rgb), .35); }

.t-classic .m-sec-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: .6rem; }
.t-classic .m-sec-title::before { content: ''; width: 5px; height: 1.35rem; border-radius: 3px; background: var(--m-accent); }
.t-classic .m-sec-count { background: rgba(var(--m-accent-rgb), .1); color: var(--m-accent); padding: .2rem .65rem; border-radius: 999px; font-weight: 700; }

.t-classic .m-item { padding: .85rem; gap: 1rem; border: 1px solid transparent; }
.t-classic .m-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 24, 60, .1); border-color: rgba(var(--m-accent-rgb), .25); }
.t-classic .m-item-img { flex-basis: 92px; height: 92px; border-radius: 14px; }
.t-classic .m-item-name { font-weight: 700; font-size: 1.04rem; }
.t-classic .m-leader { display: none; }
.t-classic .m-item-head { justify-content: space-between; }
.t-classic .m-item-price { background: rgba(var(--m-accent-rgb), .1); color: var(--m-accent); padding: .22rem .65rem; border-radius: 999px; font-weight: 800; }
.t-classic .m-modal-name { font-weight: 800; }
@media (min-width: 720px) { .t-classic .m-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }