/* =================================================================
   MODERN — canlı ve genç. Yavaşça akan gradyan zemin, cam efektli
   yuvarlak kartlar, taş duvar (masonry) yerleşim; kartlar zıplayarak
   belirir, hap şeklindeki kategori menüsü buzlu camdır.
   ================================================================= */
.t-modern {
    --m-bg: #764ba2;
    --m-fg: #1c1633;
    --m-muted: #6c6485;
    --m-card: rgba(255, 255, 255, .94);
    --m-border: rgba(255, 255, 255, .5);
    --m-radius: 24px;
    --m-shadow: 0 14px 40px rgba(60, 20, 110, .22);
    --m-head-font: 'Poppins', system-ui, sans-serif;
    --m-body-font: 'Poppins', system-ui, sans-serif;
    --m-price: var(--m-accent);
    --m-chip-bg: rgba(255, 255, 255, .22);
    --m-chip-fg: #fff;
    --m-chip-on-bg: #fff;
    --m-chip-on-fg: var(--m-accent);
    --m-nav-bg: rgba(90, 50, 140, .35);
}
body.t-modern {
    background: linear-gradient(125deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 300%; background-attachment: fixed;
    animation: modernFlow 22s ease infinite;
}
@keyframes modernFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.t-modern .m-hero { background: transparent; color: #fff; padding: 3rem 1.25rem 1.5rem; }
.t-modern .m-logo { border: 4px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-modern .m-name { font-weight: 800; letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(40, 10, 80, .35); }
.t-modern .m-btn { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.t-modern .m-search input { border: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px rgba(40, 10, 80, .2); }
.t-modern .m-cats { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.t-modern .m-cat { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 600; }
.t-modern .m-cat.is-active { box-shadow: 0 6px 20px rgba(40, 10, 80, .3); }

.t-modern .m-sec-title { color: #fff; font-size: 1.35rem; font-weight: 800; text-shadow: 0 4px 20px rgba(40, 10, 80, .35); }
.t-modern .m-sec-count { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .18); padding: .2rem .65rem; border-radius: 999px; }

/* Taş duvar: sütunlara bölünmüş, kartlar dikey */
.t-modern .m-items { display: block; columns: 2; column-gap: .8rem; }
.t-modern .m-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; margin-bottom: .8rem; break-inside: avoid; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .6); }
.t-modern .m-item:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 50px rgba(60, 20, 110, .35); }
.t-modern .m-item-img { flex: none; width: 100%; height: auto; border-radius: 0; aspect-ratio: auto; }
.t-modern .m-item-img img { height: auto; }
.t-modern .m-item:nth-child(3n+1) .m-item-img img { aspect-ratio: 4 / 5; object-fit: cover; }
.t-modern .m-item:nth-child(3n+2) .m-item-img img { aspect-ratio: 1 / 1; object-fit: cover; }
.t-modern .m-item:nth-child(3n) .m-item-img img { aspect-ratio: 4 / 3; object-fit: cover; }
.t-modern .m-item-body { padding: .8rem .9rem 1rem; }
.t-modern .m-item-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
.t-modern .m-leader { display: none; }
.t-modern .m-item-name { font-size: .95rem; font-weight: 700; }
.t-modern .m-item-price { font-weight: 800; font-size: 1.05rem; }
.t-modern .m-item-desc { font-size: .78rem; }
.t-modern .m-footer, .t-modern .m-credit a { color: rgba(255, 255, 255, .85); }
.t-modern .m-foot-btn { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .4); }
@media (min-width: 720px) { .t-modern .m-items { columns: 3; } }
.js .t-modern .m-item { transform: scale(.85) translateY(24px); }
.js .t-modern .m-item.is-in { transition: none; animation: modernPop .65s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes modernPop { from { opacity: 0; transform: scale(.85) translateY(24px); } to { opacity: 1; transform: none; } }