/* Tema: Çayır. Dafium Store için çizildi; Mojang dokusu, logosu ya da yazı tipi içermez. */
:root {
    --bg: #eef6e8;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f6ec;
    --text: #1f2a18;
    --muted: #5d6b52;
    --line: #d6e3cb;
    --accent: #4caf2e;
    --accent-ink: #ffffff;
    --radius: 4px;
    --radius-sm: 3px;
    --hard-shadow: 4px 4px 0 #c9dabd;
    --fx-color: #ffffff;
    --fx-opacity: .8;
    --font-display: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
}
.hero { background: linear-gradient(180deg, #6fbcf2 0%, #a9dcfc 62%, #d8f0ff 100%); color: #12301a; }
.hero-banner .hero { --hero-min: 460px; }
.hero-scene .s1 { background: radial-gradient(60% 46% at 18% 100%, #8fd16a 60%, transparent 61%), radial-gradient(55% 40% at 78% 100%, #7cc35a 60%, transparent 61%); bottom: 60px; top: auto; height: 220px; }
.hero-scene .s2::before, .hero-scene .s2::after { content: ""; position: absolute; top: 14%; left: -12%; width: 10px; height: 10px; margin-bottom: 40px; background: transparent; box-shadow: 30px 0px 0 #ffffff, 40px 0px 0 #ffffff, 50px 0px 0 #ffffff, 60px 0px 0 #ffffff, 10px 10px 0 #ffffff, 20px 10px 0 #ffffff, 30px 10px 0 #ffffff, 40px 10px 0 #ffffff, 50px 10px 0 #ffffff, 60px 10px 0 #ffffff, 70px 10px 0 #ffffff, 80px 10px 0 #ffffff, 0px 20px 0 #ffffff, 10px 20px 0 #ffffff, 20px 20px 0 #ffffff, 30px 20px 0 #ffffff, 40px 20px 0 #ffffff, 50px 20px 0 #ffffff, 60px 20px 0 #ffffff, 70px 20px 0 #ffffff, 80px 20px 0 #ffffff, 90px 20px 0 #ffffff, 100px 20px 0 #ffffff, 110px 20px 0 #ffffff, 0px 30px 0 #dbeefc, 10px 30px 0 #ffffff, 20px 30px 0 #ffffff, 30px 30px 0 #ffffff, 40px 30px 0 #ffffff, 50px 30px 0 #ffffff, 60px 30px 0 #ffffff, 70px 30px 0 #ffffff, 80px 30px 0 #ffffff, 90px 30px 0 #ffffff, 100px 30px 0 #ffffff, 110px 30px 0 #dbeefc, 10px 40px 0 #dbeefc, 20px 40px 0 #dbeefc, 30px 40px 0 #dbeefc, 40px 40px 0 #dbeefc, 50px 40px 0 #dbeefc, 60px 40px 0 #dbeefc, 70px 40px 0 #dbeefc, 80px 40px 0 #dbeefc, 90px 40px 0 #dbeefc, 100px 40px 0 #dbeefc; animation: t-cloud 46s linear infinite; }
.hero-scene .s2::after { top: 34%; transform: scale(.7); animation-duration: 70s; animation-delay: -30s; opacity: .85; }
@keyframes t-cloud { from { left: -14%; } to { left: 104%; } }
.hero-scene .s3 { top: auto; height: 76px; background: linear-gradient(#6cc04a 0 16px, transparent 16px), repeating-conic-gradient(#8b5a2b 0 25%, #7a4d24 0 50%) 0 0 / 16px 16px; }
.hero-scene .s3::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 14px, #5aa53a 14px 18px, transparent 18px 30px, #6cc04a 30px 33px, transparent 33px 46px); transform-origin: bottom; animation: t-sway 3.2s ease-in-out infinite alternate; }
@keyframes t-sway { from { transform: skewX(-12deg); } to { transform: skewX(12deg); } }
.hero-scene .s4::before { content: ""; position: absolute; right: 12%; bottom: 76px; width: 12px; height: 12px; margin-bottom: 108px; background: transparent; box-shadow: 24px 0px 0 #3f8f2a, 36px 0px 0 #3f8f2a, 48px 0px 0 #3f8f2a, 60px 0px 0 #3f8f2a, 72px 0px 0 #3f8f2a, 12px 12px 0 #3f8f2a, 24px 12px 0 #57b03a, 36px 12px 0 #3f8f2a, 48px 12px 0 #3f8f2a, 60px 12px 0 #3f8f2a, 72px 12px 0 #57b03a, 84px 12px 0 #3f8f2a, 0px 24px 0 #3f8f2a, 12px 24px 0 #3f8f2a, 24px 24px 0 #3f8f2a, 36px 24px 0 #57b03a, 48px 24px 0 #3f8f2a, 60px 24px 0 #3f8f2a, 72px 24px 0 #3f8f2a, 84px 24px 0 #3f8f2a, 96px 24px 0 #3f8f2a, 0px 36px 0 #3f8f2a, 12px 36px 0 #57b03a, 24px 36px 0 #3f8f2a, 36px 36px 0 #3f8f2a, 48px 36px 0 #3f8f2a, 60px 36px 0 #3f8f2a, 72px 36px 0 #3f8f2a, 84px 36px 0 #57b03a, 96px 36px 0 #3f8f2a, 0px 48px 0 #3f8f2a, 12px 48px 0 #3f8f2a, 24px 48px 0 #3f8f2a, 36px 48px 0 #3f8f2a, 48px 48px 0 #57b03a, 60px 48px 0 #3f8f2a, 72px 48px 0 #3f8f2a, 84px 48px 0 #3f8f2a, 96px 48px 0 #3f8f2a, 12px 60px 0 #3f8f2a, 24px 60px 0 #3f8f2a, 36px 60px 0 #3f8f2a, 48px 60px 0 #3f8f2a, 60px 60px 0 #3f8f2a, 72px 60px 0 #57b03a, 84px 60px 0 #3f8f2a, 36px 72px 0 #7a4d24, 48px 72px 0 #7a4d24, 36px 84px 0 #7a4d24, 48px 84px 0 #7a4d24, 36px 96px 0 #7a4d24, 48px 96px 0 #7a4d24, 36px 108px 0 #7a4d24, 48px 108px 0 #7a4d24; }
.hero-scene .s4::after { content: ""; position: absolute; right: 26%; bottom: 76px; width: 8px; height: 8px; background: #f2d84b; box-shadow: 30px 0 0 #e8556a, 60px -2px 0 #f2d84b, -40px 0 0 #fff; animation: t-flower 2.4s ease-in-out infinite alternate; }
@keyframes t-flower { to { transform: translateY(-3px); } }
.hero-inner { padding-bottom: 96px; }
.hero-title { color: #ffffff; text-shadow: 3px 3px 0 #2e6b1d; }
.hero-text { color: #1f3b2a; }
.site-header { border-bottom: 4px solid #5aa53a; }
.brand { color: #2e6b1d; }
.product-card { border: 2px solid #c9dabd; }
.price strong { color: #3f8f22; }