/* Derinsu · açık deniz sürü düğümleri (js/nodeart.js NodeArt.markHtml üretir). style.css'ten SONRA yüklenir.
   Kök: button.sm.sm-n.q0..q3.t1..t5[.on][.low] — 0×0 kutu, (left,top) = madalyonun merkezi = tuvaldeki su merkezi.
   Renk (--qc) = sürü niteliği · çerçeve biçimi/metal (--mt, --mh) + Roma levhası = kademe. */
.sm.sm-n { position: absolute; display: block; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; transform: none; overflow: visible; z-index: 1100; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: smIn .5s cubic-bezier(.3, 1.35, .45, 1) both; }
.sm.sm-n.on { z-index: 1101; }
.sm-n.t1 { --mt: #a48d6a; --mh: #e2cfa4; }
.sm-n.t2 { --mt: #a97b45; --mh: #e0b277; }
.sm-n.t3 { --mt: #aeb4b6; --mh: #eef2f2; }
.sm-n.t4 { --mt: #d6ac52; --mh: #fbe3a0; }
.sm-n.t5 { --mt: #3a2d58; --mh: #b9a6e6; }

/* madalyon */
.sm-n .sm-medal { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; transition: scale .25s cubic-bezier(.3, 1.35, .45, 1); }
.sm-n:active .sm-medal { scale: .88; }
.sm-n.on .sm-medal { scale: 1.08; }
.sm-n .sm-frame { position: absolute; inset: 0; width: 48px; height: 48px; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.sm-n .sm-frame * { vector-effect: none; }
.sm-n .sm-f-bed { fill: none; stroke: #0b0a0a; stroke-width: 4.6; }
.sm-n .sm-f-band { fill: none; stroke: var(--mt); stroke-width: 2.4; }
.sm-n .sm-f-hi { fill: none; stroke: var(--mh); stroke-width: .9; stroke-linecap: round; opacity: .85; }
.sm-n .sm-f-rope { fill: none; stroke: rgba(20, 14, 8, .45); stroke-width: 2.4; stroke-dasharray: 1.3 1.6; }
.sm-n .sm-f-rim { fill: none; stroke: var(--qc); stroke-width: 1.1; opacity: .55; }
.sm-n .sm-f-out { fill: none; stroke: var(--mt); stroke-width: .8; opacity: .75; }
.sm-n .sm-f-rv { fill: var(--mh); stroke: #0b0a0a; stroke-width: .6; }
.sm-n .sm-f-orn { fill: var(--mt); stroke: #0b0a0a; stroke-width: .8; stroke-linejoin: round; paint-order: stroke; }
.sm-n .sm-f-orn.hi { fill: var(--mh); }
.sm-n .sm-f-spb { stroke: #0b0a0a; stroke-width: 3.4; stroke-linecap: round; }
.sm-n .sm-f-sp { stroke: var(--mt); stroke-width: 1.7; stroke-linecap: round; }
.sm-n .sm-f-knob { fill: var(--mt); stroke: #0b0a0a; stroke-width: .9; }
.sm-n.t4 .sm-f-out { stroke-width: 1.3; opacity: 1; }
.sm-n .sm-f-spk { fill: var(--mt); stroke: var(--mh); stroke-width: .7; stroke-linejoin: round; }
.sm-n.q1 .sm-f-rim { opacity: .8; }
.sm-n.q2 .sm-f-rim, .sm-n.q3 .sm-f-rim { opacity: 1; stroke-width: 1.4; }

/* çekirdek: nitelik renginde balık */
.sm-n .sm-disc { position: absolute; left: 11px; top: 11px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--qc) 30%, #10171a), #0a0d0f 78%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -3px 6px rgba(0, 0, 0, .5); }
.sm-n.t5 .sm-disc { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--qc) 26%, #1a1430), #08070c 78%); }
.sm-n .sm-fish { width: 15px; height: 15px; fill: var(--qc); stroke: none; overflow: visible; }
.sm-n .sm-eye { fill: #0b0d0e; }
.sm-n.q0 .sm-fish { opacity: .8; }
.sm-n.q2 .sm-fish, .sm-n.q3 .sm-fish { filter: drop-shadow(0 0 2.5px var(--qc)); }
.sm-n.q2 .sm-fish { animation: smSwim 2.2s ease-in-out infinite; }
.sm-n.q3 .sm-fish { animation: smSwim 1.3s ease-in-out infinite; }

/* kademe levhası */
.sm-n .sm-tier { position: absolute; left: 50%; top: 35px; transform: translateX(-50%); min-width: 15px; padding: 0 4px; border-radius: 3px; font: 700 8px/11px 'Alegreya SC', Georgia, serif; letter-spacing: .06em; text-align: center; color: var(--mh); background: linear-gradient(180deg, #221e1a, #110f0d); box-shadow: 0 0 0 1px #0b0a0a, inset 0 0 0 .8px var(--mt); white-space: nowrap; }
.sm-n.t4 .sm-tier { color: #1a1410; background: linear-gradient(180deg, #f0d07c, #c9a24e); box-shadow: 0 0 0 1px #0b0a0a; }
.sm-n.t5 .sm-tier { color: #e4dcff; background: linear-gradient(180deg, #2b2142, #120e1c); box-shadow: 0 0 0 1px #0b0a0a, inset 0 0 0 .8px #b9a6e6, 0 0 7px rgba(185, 166, 230, .6); }

/* ışıma, nabız, parıltı (dokunmayı çalmaz) */
.sm-n .sm-halo, .sm-n .sm-pulse, .sm-n .sm-glint, .sm-n .sm-onr, .sm-n .sm-orb { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 50%; }
.sm-n .sm-halo { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: radial-gradient(circle, color-mix(in srgb, var(--qc) 50%, transparent) 0, transparent 62%); opacity: 0; }
.sm-n.q1 .sm-halo { opacity: .32; }
.sm-n.q2 .sm-halo { opacity: .5; animation: smBreath 3.2s ease-in-out infinite; }
.sm-n.q3 .sm-halo { opacity: .75; animation: smBreath 1.9s ease-in-out infinite; }
.sm-n.t5 .sm-halo { opacity: 1; background: radial-gradient(circle, color-mix(in srgb, var(--qc) 45%, transparent) 0, rgba(150, 120, 240, .32) 34%, transparent 64%); animation: smBreath 3.6s ease-in-out infinite; }
.sm-n .sm-pulse { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid var(--qc); opacity: 0; animation: smPulse 2.6s ease-out infinite; }
.sm-n.q3 .sm-pulse { animation-duration: 1.8s; }
.sm-n.q3 .sm-pulse.b { animation-delay: -.9s; }
.sm-n .sm-glint { width: 60px; height: 60px; margin: -30px 0 0 -30px; animation: smSpin 7s linear infinite; }
.sm-n .sm-glint svg { width: 100%; height: 100%; overflow: visible; fill: #ffe2b0; }
.sm-n .sm-glint path { transform-box: fill-box; transform-origin: 50% 50%; animation: smTw 1.6s ease-in-out infinite; }
.sm-n .sm-glint g path { animation-delay: -.8s; }
.sm-n .sm-orb { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px dotted rgba(185, 166, 230, .8); animation: smSpin 14s linear infinite reverse; }
.sm-n .sm-onr { width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 1.5px dashed #e7c26a; box-shadow: 0 0 10px -2px rgba(231, 194, 106, .7); animation: smSpin 6s linear infinite; }

/* etiket: ad · kalan av */
.sm.sm-n .sm-tag { position: absolute; left: 0; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 0 7px 0 5px; border-radius: 99px; font: 500 9px/15px Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; color: #f2ead8; background: rgba(10, 9, 8, .84); box-shadow: inset 0 0 0 1px #2e2925; white-space: nowrap; }
.sm.sm-n .sm-tag b { color: var(--qc); font-weight: 700; }
.sm-n .sm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--qc); box-shadow: 0 0 4px var(--qc); flex: none; }
.sm.sm-n.q0 .sm-tag b { color: #f2ead8; }
.sm.sm-n.low .sm-tag b { color: #f0866a; }
.sm.sm-n.on .sm-tag { color: #f3d68e; box-shadow: inset 0 0 0 1px #665738; }
.sm.sm-n.t5 .sm-tag { box-shadow: inset 0 0 0 1px #3d3358; }
.sm.sm-n.t5.on .sm-tag { box-shadow: inset 0 0 0 1px #665738; }

@keyframes smIn { from { opacity: 0; scale: .6; } }
@keyframes smPulse { 0% { transform: scale(.85); opacity: .85; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes smBreath { 50% { transform: scale(1.12); filter: brightness(1.2); } }
@keyframes smSpin { to { transform: rotate(360deg); } }
@keyframes smTw { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes smSwim { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-1px) rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
  .sm.sm-n, .sm-n *, .sm-n .sm-glint path { animation: none !important; transition: none !important; }
  .sm-n .sm-pulse { opacity: .35; transform: scale(1.2); }
}