/* =================================================================
   PASTEL — kafe/pastane. Yumuşak pastel zemin, yavaşça dalgalanan
   renk lekeleri, her kategori yana kaydırılan bir ürün şeridi
   (Netflix tarzı, mıknatıslı kaydırma). Sağ üstteki düğme şeridi
   ızgaraya çevirir. Kartlar zıplayarak (pop) gelir.
   ================================================================= */
.t-pastel {
    --m-bg: #fff8f3;
    --m-fg: #3d2c3e;
    --m-muted: #8f7d8f;
    --m-card: #ffffff;
    --m-border: rgba(61, 44, 62, .08);
    --m-radius: 26px;
    --m-shadow: 0 10px 30px rgba(236, 72, 153, .10);
    --m-head-font: 'Fredoka', system-ui, sans-serif;
    --m-body-font: 'Nunito', system-ui, sans-serif;
    --m-price: var(--m-accent);
    --m-chip-bg: #fff;
    --m-chip-fg: var(--m-fg);
    --m-chip-on-bg: var(--m-accent);
    --m-chip-on-fg: #fff;
    --m-nav-bg: rgba(255, 248, 243, .85);
}
body.t-pastel { position: relative; }
/* Arkada yavaşça süzülen pastel lekeler */
body.t-pastel::before, body.t-pastel::after {
    content: ''; position: fixed; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none;
    width: 70vw; height: 70vw; max-width: 520px; max-height: 520px;
}
body.t-pastel::before { background: #fbcfe8; top: -15vw; left: -20vw; animation: pastelBlob 18s ease-in-out infinite alternate; }
body.t-pastel::after { background: #bbf7d0; bottom: -20vw; right: -25vw; animation: pastelBlob 22s ease-in-out infinite alternate-reverse; }
@keyframes pastelBlob { to { transform: translate(18vw, 12vh) scale(1.2); } }
.t-pastel .m-hero, .t-pastel .m-toolbar, .t-pastel .m-main, .t-pastel .m-footer { position: relative; z-index: 1; }

.t-pastel .m-hero { background: transparent; color: var(--m-fg); padding: 2.75rem 1.25rem 1rem; }
.t-pastel .m-logo {
    background: #fde68a; color: var(--m-fg); border: 4px solid #fff; box-shadow: var(--m-shadow);
    animation: pastelBounce 2.8s ease-in-out infinite;
}
@keyframes pastelBounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.t-pastel .m-name { font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); }
.t-pastel .m-address { color: var(--m-muted); opacity: 1; }
.t-pastel .m-btn { background: #fff; border: 0; color: var(--m-fg); box-shadow: var(--m-shadow); }
.t-pastel .m-btn-wa { background: #bbf7d0; color: #14532d; }

.t-pastel .m-search input { border: 0; box-shadow: var(--m-shadow); }
.t-pastel .m-view-toggle { border: 0; box-shadow: var(--m-shadow); transition: transform .3s var(--m-ease); }
.t-pastel .m-view-toggle:active { transform: rotate(90deg) scale(.9); }
.t-pastel .m-cat { box-shadow: 0 4px 14px rgba(61, 44, 62, .06); font-family: var(--m-head-font); font-weight: 600; }
.t-pastel .m-cat.is-active { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--m-accent-rgb), .35); }

.t-pastel .m-sec-title { font-weight: 700; font-size: 1.6rem; }
.t-pastel .m-sec-title span { background: linear-gradient(transparent 62%, rgba(var(--m-accent-rgb), .25) 62%); padding: 0 .2rem; }
.t-pastel .m-sec-count { background: #fff; padding: .2rem .6rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }

/* Kaydırmalı şerit (varsayılan) */
.t-pastel .m-items {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -1rem; padding: .5rem 1rem 1.25rem; scroll-padding: 0 1rem;
}
.t-pastel .m-items::-webkit-scrollbar { display: none; }
.t-pastel .m-item {
    flex: 0 0 72%; max-width: 280px; scroll-snap-align: start;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
}
.t-pastel .m-item-img { flex: none; width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 0; }
.t-pastel .m-item-body { padding: .85rem 1rem 1.1rem; }
.t-pastel .m-item-head { flex-direction: column; align-items: flex-start; gap: .2rem; }
.t-pastel .m-leader { display: none; }
.t-pastel .m-item-name { font-weight: 600; font-size: 1.05rem; }
.t-pastel .m-item-price {
    position: absolute; top: .7rem; right: .7rem; z-index: 2;
    background: #fff; padding: .3rem .7rem; border-radius: 999px; font-family: var(--m-head-font); box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.t-pastel .m-item:not(.has-img) .m-item-price { position: static; box-shadow: none; padding: 0; background: none; }
.t-pastel .m-item:not(.has-img) { justify-content: center; min-height: 140px; background: linear-gradient(135deg, #fff, #fdf2f8); }
.t-pastel .m-item:hover { transform: translateY(-4px) rotate(-.6deg); }

/* Izgara görünümü (düğmeyle) */
.t-pastel.is-grid .m-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: .25rem 0 1rem; }
@media (min-width: 720px) { .t-pastel.is-grid .m-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-pastel .m-item { flex-basis: 40%; } }
.t-pastel.is-grid .m-item { max-width: none; }
.t-pastel.is-grid .m-item-desc { -webkit-line-clamp: 2; font-size: .8rem; }

/* Zıplayarak gelme */
.js .t-pastel .m-item { transform: scale(.7) translateY(20px); }
.js .t-pastel .m-item.is-in { transition: none; animation: pastelPop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes pastelPop { from { opacity: 0; transform: scale(.7) translateY(20px); } to { opacity: 1; transform: none; } }

.t-pastel .m-top { border-radius: 18px; }
.t-pastel .m-modal-card { border-radius: 30px 30px 0 0; }
@media (min-width: 640px) { .t-pastel .m-modal-card { border-radius: 30px; } }
.t-pastel .m-modal-name { font-weight: 700; }