/* Tema: Gökyüzü Adaları. Dafium Store için çizildi; Mojang dokusu, logosu ya da yazı tipi içermez. */
:root {
    --bg: #eaf5ff;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #eef6fd;
    --text: #173048;
    --muted: #5b7591;
    --line: #d3e5f5;
    --accent: #3b9ff2;
    --accent-ink: #ffffff;
    --radius: 6px;
    --radius-sm: 4px;
    --hard-shadow: 4px 4px 0 #c6dcef;
    --fx-color: #ffffff;
    --fx-opacity: .9;
    --font-display: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
}
.hero { background: linear-gradient(180deg, #5db6fb 0%, #bfe3ff 70%, #eaf5ff 100%); }
.hero-scene .s1::before, .hero-scene .s1::after { content: ""; position: absolute; top: 12%; left: -14%; width: 9px; height: 9px; margin-bottom: 36px; background: transparent; box-shadow: 27px 0px 0 #ffffff, 36px 0px 0 #ffffff, 45px 0px 0 #ffffff, 54px 0px 0 #ffffff, 9px 9px 0 #ffffff, 18px 9px 0 #ffffff, 27px 9px 0 #ffffff, 36px 9px 0 #ffffff, 45px 9px 0 #ffffff, 54px 9px 0 #ffffff, 63px 9px 0 #ffffff, 72px 9px 0 #ffffff, 0px 18px 0 #ffffff, 9px 18px 0 #ffffff, 18px 18px 0 #ffffff, 27px 18px 0 #ffffff, 36px 18px 0 #ffffff, 45px 18px 0 #ffffff, 54px 18px 0 #ffffff, 63px 18px 0 #ffffff, 72px 18px 0 #ffffff, 81px 18px 0 #ffffff, 90px 18px 0 #ffffff, 99px 18px 0 #ffffff, 0px 27px 0 #e2f1fd, 9px 27px 0 #ffffff, 18px 27px 0 #ffffff, 27px 27px 0 #ffffff, 36px 27px 0 #ffffff, 45px 27px 0 #ffffff, 54px 27px 0 #ffffff, 63px 27px 0 #ffffff, 72px 27px 0 #ffffff, 81px 27px 0 #ffffff, 90px 27px 0 #ffffff, 99px 27px 0 #e2f1fd, 9px 36px 0 #e2f1fd, 18px 36px 0 #e2f1fd, 27px 36px 0 #e2f1fd, 36px 36px 0 #e2f1fd, 45px 36px 0 #e2f1fd, 54px 36px 0 #e2f1fd, 63px 36px 0 #e2f1fd, 72px 36px 0 #e2f1fd, 81px 36px 0 #e2f1fd, 90px 36px 0 #e2f1fd; animation: t-cloud 55s linear infinite; }
.hero-scene .s1::after { top: 60%; animation-duration: 80s; animation-delay: -40s; opacity: .8; }
@keyframes t-cloud { from { left: -14%; } to { left: 104%; } }
.hero-scene .s2::before { content: ""; position: absolute; left: 44%; top: 80%; width: 80px; height: 14px; background: #62b744; box-shadow: 0 14px 0 #8b5a2b; animation: t-isl 6s ease-in-out infinite; }
@keyframes t-isl { 50% { transform: translateY(-10px); } }
.hero-stage { overflow: visible; }
.hero-stage .g1::before { content: ""; position: absolute; left: 50%; top: 42%; width: 260px; height: 36px; margin-left: -130px; background: repeating-conic-gradient(#62b744 0 25%, #55a33a 0 50%) 0 0 / 12px 12px; animation: t-isl 5s ease-in-out infinite; }
.hero-stage .g1::after { content: ""; position: absolute; left: 50%; top: calc(42% + 36px); width: 260px; height: 110px; margin-left: -130px; background: repeating-conic-gradient(#8b5a2b 0 25%, #7a4d24 0 50%) 0 0 / 12px 12px; clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); animation: t-isl 5s ease-in-out infinite; }
.hero-stage .g2::before { content: ""; position: absolute; left: calc(50% + 60px); top: calc(42% + 50px); width: 22px; height: 200px; background: repeating-linear-gradient(180deg, #7fc8ff 0 10px, #b8e2ff 10px 20px); background-size: 100% 40px; animation: t-fall .6s linear infinite, t-isl 5s ease-in-out infinite; opacity: .85; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
@keyframes t-fall { to { background-position: 0 40px; } }
.hero-title { color: #ffffff; text-shadow: 3px 3px 0 #2c6aa3; }