/* =================================================================
   OCEAN — beach club / sahil. Başlıkta sürekli akan katmanlı SVG
   dalgalar ve yukarı süzülen baloncuklar; içerik açık deniz
   gradyanı üzerinde buzlu cam (glassmorphism) kartlarda. Ürünler
   dalga gibi hafif salınarak yüzeye çıkar.
   ================================================================= */
.t-ocean {
    --m-bg: #e0f2fe;
    --m-fg: #082f49;
    --m-muted: #3f6b86;
    --m-card: rgba(255, 255, 255, .55);
    --m-border: rgba(255, 255, 255, .7);
    --m-radius: 22px;
    --m-shadow: 0 8px 32px rgba(3, 105, 161, .12);
    --m-head-font: 'Quicksand', system-ui, sans-serif;
    --m-body-font: 'Inter', system-ui, sans-serif;
    --m-price: #0369a1;
    --m-chip-bg: rgba(255, 255, 255, .55);
    --m-chip-fg: var(--m-fg);
    --m-chip-on-bg: var(--m-accent);
    --m-chip-on-fg: #fff;
    --m-nav-bg: rgba(224, 242, 254, .6);
}
body.t-ocean {
    background:
        radial-gradient(800px 500px at 100% 0%, rgba(125, 211, 252, .55), transparent 60%),
        radial-gradient(700px 600px at 0% 60%, rgba(186, 230, 253, .9), transparent 60%),
        linear-gradient(180deg, #bae6fd 0%, #e0f2fe 40%, #f0f9ff 100%);
    background-attachment: fixed;
}

.t-ocean .m-hero {
    background: linear-gradient(160deg, var(--m-accent) 0%, #0369a1 55%, #082f49 100%);
    padding: 3.25rem 1.25rem 5.5rem;
}
.t-ocean .m-logo { border: 3px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: oceanBob 4s ease-in-out infinite; }
@keyframes oceanBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.t-ocean .m-name { font-weight: 700; letter-spacing: .01em; text-shadow: 0 4px 24px rgba(0, 0, 0, .25); }
.t-ocean .m-btn { background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Katmanlı akan dalgalar */
.m-waves { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; z-index: 1; }
.m-waves use { animation: oceanWave 12s cubic-bezier(.55, .5, .45, .5) infinite; }
.m-waves .w1 { fill: rgba(255, 255, 255, .25); animation-delay: -2s; animation-duration: 8s; }
.m-waves .w2 { fill: rgba(255, 255, 255, .4); animation-delay: -3s; animation-duration: 11s; }
.m-waves .w3 { fill: rgba(224, 242, 254, .6); animation-delay: -4s; animation-duration: 14s; }
.m-waves .w4 { fill: #d7eefc; animation-delay: -5s; animation-duration: 20s; }
@keyframes oceanWave { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }

/* Yukarı süzülen baloncuklar */
.m-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.m-bubbles span {
    position: absolute; bottom: -30px; left: calc(var(--b) * 7.3% + 2%);
    width: calc(6px + var(--b) * 1.3px); height: calc(6px + var(--b) * 1.3px); border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 60%);
    border: 1px solid rgba(255, 255, 255, .5);
    animation: oceanBubble calc(7s + var(--b) * .45s) linear infinite; animation-delay: calc(var(--b) * -1.1s);
    opacity: .7;
}
@keyframes oceanBubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 50% { transform: translate(14px, -45vh); } 100% { transform: translate(-10px, -90vh); opacity: 0; } }

.t-ocean .m-toolbar { margin-top: -1.25rem; position: relative; z-index: 5; }
.t-ocean .m-search input, .t-ocean .m-cat { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--m-border); }
.t-ocean .m-search input { background: rgba(255, 255, 255, .7); box-shadow: var(--m-shadow); }
.t-ocean .m-cat.is-active { box-shadow: 0 6px 18px rgba(var(--m-accent-rgb), .4); border-color: transparent; }

.t-ocean .m-sec-title { font-weight: 700; font-size: 1.55rem; }
.t-ocean .m-sec-title span::before { content: '〰 '; color: var(--m-accent); font-weight: 400; }

/* Buzlu cam kartlar */
.t-ocean .m-items { gap: .9rem; }
@media (min-width: 720px) { .t-ocean .m-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-ocean .m-item {
    background: var(--m-card); border: 1px solid var(--m-border);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    padding: .75rem; overflow: hidden;
}
.t-ocean .m-item::after {
    /* Kartın üstünden geçen ışık yansıması */
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg); transition: left .9s var(--m-ease); pointer-events: none;
}
.t-ocean .m-item:hover::after, .t-ocean .m-item.is-in::after { left: 130%; }
.t-ocean .m-item-img { flex-basis: 92px; height: 92px; border-radius: 18px; }
.t-ocean .m-leader { border-bottom: 2px dotted rgba(3, 105, 161, .2); transform: translateY(-.3rem); }
.t-ocean .m-item-name { font-weight: 700; }
.t-ocean .m-item-price { background: rgba(255, 255, 255, .8); padding: .15rem .55rem; border-radius: 999px; }

/* Dalga gibi salınarak yüzeye çıkma */
.js .t-ocean .m-item { transform: translateY(30px); }
.js .t-ocean .m-item.is-in { transition: none; animation: oceanRise 1s cubic-bezier(.34, 1.3, .64, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes oceanRise {
    0% { opacity: 0; transform: translateY(30px) rotate(-1.5deg); }
    60% { opacity: 1; transform: translateY(-4px) rotate(.8deg); }
    100% { opacity: 1; transform: none; }
}

.t-ocean .m-footer { color: var(--m-muted); }
.t-ocean .m-modal-card { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

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