/* Tema: Batık Gemi. Dafium Store için çizildi; Mojang dokusu, logosu ya da yazı tipi içermez. */
:root {
    --bg: #0f2230;
    --bg-alt: #132a3a;
    --surface: #3a2516;
    --surface-2: #4a3020;
    --text: #fbefd8;
    --muted: #cdb48c;
    --line: #5c3e27;
    --accent: #f2c14e;
    --accent-ink: #2a1900;
    --radius: 0px;
    --radius-sm: 0px;
    --hard-shadow: 4px 4px 0 #1b1009;
    --fx-color: #bfe8ff;
    --fx-opacity: .3;
    --font-display: "Press Start 2P", ui-monospace, monospace;
}
h1, h2, h3, .brand { font-size: .78em; line-height: 1.5; }
.hero-banner .hero { --hero-min: 440px; }
.hero-title { font-size: clamp(1.3rem, 4vw, 2.2rem); color: #f2c14e; text-shadow: 3px 3px 0 #1b1009; }
.hero { background: linear-gradient(180deg, #1c4a66 0%, #0f2230 100%); }
.hero-scene .s1 { background: repeating-conic-gradient(from 200deg at 30% -20%, rgba(255,255,255,.06) 0 4deg, transparent 4deg 16deg); animation: t-rays 8s ease-in-out infinite alternate; }
@keyframes t-rays { to { transform: translateX(40px); } }
.hero-scene .s2::before { content: ""; position: absolute; right: 6%; bottom: 30px; width: 340px; height: 80px; background: repeating-linear-gradient(0deg, #6b4428 0 12px, #4a3020 12px 14px); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); transform: rotate(-6deg); }
.hero-scene .s2::after { content: ""; position: absolute; right: calc(6% + 150px); bottom: 100px; width: 10px; height: 150px; background: #4a3020; transform: rotate(-16deg); transform-origin: bottom; }
.hero-scene .s3::before { content: ""; position: absolute; right: 34%; bottom: 34px; width: 8px; height: 8px; margin-bottom: 48px; background: transparent; box-shadow: 0px 0px 0 #3b2410, 8px 0px 0 #3b2410, 16px 0px 0 #3b2410, 24px 0px 0 #3b2410, 32px 0px 0 #3b2410, 40px 0px 0 #3b2410, 48px 0px 0 #3b2410, 56px 0px 0 #3b2410, 0px 8px 0 #3b2410, 8px 8px 0 #9b6a3c, 16px 8px 0 #9b6a3c, 24px 8px 0 #9b6a3c, 32px 8px 0 #9b6a3c, 40px 8px 0 #9b6a3c, 48px 8px 0 #9b6a3c, 56px 8px 0 #3b2410, 0px 16px 0 #3b2410, 8px 16px 0 #9b6a3c, 16px 16px 0 #9b6a3c, 24px 16px 0 #9b6a3c, 32px 16px 0 #9b6a3c, 40px 16px 0 #9b6a3c, 48px 16px 0 #9b6a3c, 56px 16px 0 #3b2410, 0px 24px 0 #3b2410, 8px 24px 0 #3b2410, 16px 24px 0 #3b2410, 24px 24px 0 #f2c14e, 32px 24px 0 #f2c14e, 40px 24px 0 #3b2410, 48px 24px 0 #3b2410, 56px 24px 0 #3b2410, 0px 32px 0 #3b2410, 8px 32px 0 #9b6a3c, 16px 32px 0 #9b6a3c, 24px 32px 0 #f2c14e, 32px 32px 0 #f2c14e, 40px 32px 0 #9b6a3c, 48px 32px 0 #9b6a3c, 56px 32px 0 #3b2410, 0px 40px 0 #3b2410, 8px 40px 0 #9b6a3c, 16px 40px 0 #9b6a3c, 24px 40px 0 #9b6a3c, 32px 40px 0 #9b6a3c, 40px 40px 0 #9b6a3c, 48px 40px 0 #9b6a3c, 56px 40px 0 #3b2410, 0px 48px 0 #3b2410, 8px 48px 0 #3b2410, 16px 48px 0 #3b2410, 24px 48px 0 #3b2410, 32px 48px 0 #3b2410, 40px 48px 0 #3b2410, 48px 48px 0 #3b2410, 56px 48px 0 #3b2410; filter: drop-shadow(0 0 14px rgba(242,193,78,.8)); animation: t-gold 2s ease-in-out infinite alternate; }
@keyframes t-gold { to { filter: drop-shadow(0 0 26px rgba(255,220,120,1)); } }
.hero-scene .s4 { top: auto; height: 36px; background: radial-gradient(circle at 20px 0, transparent 18px, #133a52 19px) 0 0 / 40px 36px; animation: t-waves 6s linear infinite; }
@keyframes t-waves { to { background-position: 40px 0; } }
.product-card { background: repeating-linear-gradient(0deg, #3a2516 0 22px, #34210f 22px 24px); }