/* Tema: Okyanus Anıtı. Dafium Store için çizildi; Mojang dokusu, logosu ya da yazı tipi içermez. */
:root {
    --bg: #0b2234;
    --bg-alt: #0f2d44;
    --surface: #123651;
    --surface-2: #17405f;
    --text: #e3f6f7;
    --muted: #9fc3cc;
    --line: #1e4f70;
    --accent: #3dd8c4;
    --accent-ink: #06231f;
    --radius: 12px;
    --radius-sm: 8px;
    --fx-color: #9ef0ff;
    --fx-opacity: .35;
    --font-display: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
}
body { background: linear-gradient(180deg, #0b2234 0%, #071827 100%); }
.hero { background: linear-gradient(180deg, #1f7a96 0%, #0f3d5a 55%, #0b2234 100%); text-align: center; }
.hero-text { margin-inline: auto; }
.hero-scene .s1 { background: repeating-conic-gradient(from 200deg at 50% -20%, rgba(255,255,255,.09) 0 4deg, transparent 4deg 14deg); animation: t-rays 9s ease-in-out infinite alternate; }
@keyframes t-rays { to { transform: translateX(50px) skewX(-4deg); } }
.hero-scene .s2 { top: auto; height: 210px; background: repeating-linear-gradient(90deg, transparent 0 40px, #1f8a5e 40px 48px, transparent 48px 96px, #2aa36e 96px 102px, transparent 102px 150px); -webkit-mask: linear-gradient(0deg, #000 30%, transparent); mask: linear-gradient(0deg, #000 30%, transparent); transform-origin: bottom; animation: t-kelp 4s ease-in-out infinite alternate; }
@keyframes t-kelp { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
.hero-scene .s3::before, .hero-scene .s3::after { content: ""; position: absolute; top: 30%; left: -8%; width: 7px; height: 7px; margin-bottom: 21px; background: transparent; box-shadow: 7px 0px 0 #ffb05c, 14px 0px 0 #ffb05c, 35px 0px 0 #ffb05c, 0px 7px 0 #ffb05c, 7px 7px 0 #ffb05c, 14px 7px 0 #ffb05c, 21px 7px 0 #ffb05c, 28px 7px 0 #ffb05c, 35px 7px 0 #ffb05c, 0px 14px 0 #ffb05c, 7px 14px 0 #ffb05c, 14px 14px 0 #1b1b1b, 21px 14px 0 #ffb05c, 28px 14px 0 #ffb05c, 35px 14px 0 #ffb05c, 7px 21px 0 #ffb05c, 14px 21px 0 #ffb05c, 35px 21px 0 #ffb05c; animation: t-swim 22s linear infinite; }
.hero-scene .s3::after { top: 58%; transform: scale(.7); animation-duration: 30s; animation-delay: -12s; filter: hue-rotate(140deg); }
@keyframes t-swim { from { left: -8%; } to { left: 106%; } }
.hero-scene .s4 { top: auto; height: 46px; background: linear-gradient(#d9c58f 0 6px, #c9b37b 6px); }
.hero-scene .s4::before { content: ""; position: absolute; left: 50%; bottom: 40px; width: 300px; height: 120px; margin-left: -150px; background: repeating-conic-gradient(#4f9e95 0 25%, #3f8a82 0 50%) 0 0 / 14px 14px; clip-path: polygon(0 100%, 12% 40%, 30% 40%, 30% 0, 70% 0, 70% 40%, 88% 40%, 100% 100%); opacity: .35; }
.hero-title { color: #e9fffd; text-shadow: 0 4px 30px rgba(61,216,196,.45); }
.product-card { background: linear-gradient(135deg, #123651, #0f2d44); }