Metehan

36 Metehan

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>MINECRAFT</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Space+Grotesk:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--card:#16161e;--elevated:#1c1c28;--grass:#4a7c2f;--grass-l:#6aab41;--diamond:#3ee8e8;--gold:#f7c948;--red:#e03030;--txt:#f0f0f5;--txt2:rgba(240,240,245,.6);--txt3:rgba(240,240,245,.3);--brd:rgba(255,255,255,.08);--brd2:rgba(255,255,255,.15)}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--grass);border-radius:3px}
/* Loader */
.loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .6s,visibility .6s}
.loader.hide{opacity:0;visibility:hidden}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:48px;height:48px}
.lg div{border-radius:2px;animation:lp 1.5s ease-in-out infinite}
.lg div:nth-child(1){background:var(--grass);animation-delay:0s}
.lg div:nth-child(2){background:var(--diamond);animation-delay:.2s}
.lg div:nth-child(3){background:var(--gold);animation-delay:.4s}
.lg div:nth-child(4){background:var(--red);animation-delay:.6s}
@keyframes lp{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
.lt{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt3)}
.lb{width:200px;height:2px;background:var(--elevated);border-radius:1px;overflow:hidden}
.lb div{height:100%;background:var(--grass);width:0;animation:load 2s ease-in-out forwards}
@keyframes load{to{width:100%}}
/* Nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:0 48px;height:72px;background:rgba(10,10,15,.7);backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);transition:height .3s}
nav.sc{height:60px}
.nl{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--txt)}
.ni{width:36px;height:36px;display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:6px;overflow:hidden}
.ni div{border-radius:1px}
.ni div:nth-child(1){background:var(--grass)}.ni div:nth-child(2){background:var(--diamond)}.ni div:nth-child(3){background:#898989}.ni div:nth-child(4){background:var(--gold)}
.nt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em}
.nk{display:flex;gap:32px;list-style:none}
.nk a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);text-decoration:none;transition:color .2s}
.nk a:hover{color:var(--txt)}
.np{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;background:var(--grass);color:#fff;padding:10px 24px;border:none;cursor:pointer;border-radius:4px;transition:all .2s}
.np:hover{background:var(--grass-l)}
/* Hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
.hbg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(74,124,47,.08),transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(62,232,232,.05),transparent 50%)}
.hp{position:absolute;inset:0;overflow:hidden}
.pt{position:absolute;width:2px;height:2px;background:var(--grass-l);border-radius:50%;opacity:.3;animation:pf linear infinite}
@keyframes pf{0%{transform:translateY(100vh);opacity:0}10%{opacity:.3}90%{opacity:.3}100%{transform:translateY(-10vh);opacity:0}}
.hl{display:flex;flex-direction:column;justify-content:center;padding:120px 60px 80px;position:relative;z-index:2}
.hb{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--grass-l);margin-bottom:28px;padding:8px 16px;background:rgba(74,124,47,.1);border:1px solid rgba(74,124,47,.2);border-radius:100px;width:fit-content}
.hb span{width:6px;height:6px;background:var(--grass-l);border-radius:50%;animation:bp 2s ease-in-out infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.3}}
.ht{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:clamp(56px,7vw,108px);line-height:.9;letter-spacing:-.03em;margin-bottom:32px}
.ht .o{-webkit-text-stroke:1.5px var(--txt);color:transparent}
.ht .g{color:var(--grass-l)}
.hd{font-size:16px;line-height:1.8;color:var(--txt2);max-width:460px;margin-bottom:48px;font-weight:300}
.hbtns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.bp1{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--grass);color:#fff;padding:16px 36px;border:none;cursor:pointer;border-radius:6px;transition:all .3s;display:flex;align-items:center;gap:10px}
.bp1:hover{background:var(--grass-l);transform:translateY(-2px);box-shadow:0 8px 32px rgba(74,124,47,.3)}
.bp2{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--txt);padding:15px 36px;border:1px solid var(--brd2);cursor:pointer;border-radius:6px;transition:all .3s}
.bp2:hover{border-color:var(--txt);background:rgba(255,255,255,.05)}
.hs2{display:flex;gap:40px;padding-top:40px;border-top:1px solid var(--brd)}
.hsn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px}
.hsl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);margin-top:4px}
.hr{display:flex;align-items:center;justify-content:center;z-index:2}
.hs3{position:relative;width:420px;height:420px}
.hcc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);perspective:800px}
.hc{width:180px;height:180px;transform-style:preserve-3d;animation:cr 20s linear infinite}
@keyframes cr{0%{transform:rotateX(-25deg) rotateY(0)}100%{transform:rotateX(-25deg) rotateY(360deg)}}
.cf{position:absolute;width:180px;height:180px;border:1px solid rgba(0,0,0,.3)}
.cf.fr{transform:translateZ(90px);background:linear-gradient(to bottom,#5d9134 25%,#7a5230 25%)}
.cf.ba{transform:rotateY(180deg) translateZ(90px);background:linear-gradient(to bottom,#5d9134 25%,#7a5230 25%)}
.cf.ri{transform:rotateY(90deg) translateZ(90px);background:linear-gradient(to bottom,#5d9134 25%,#7a5230 25%)}
.cf.le{transform:rotateY(-90deg) translateZ(90px);background:linear-gradient(to bottom,#5d9134 25%,#7a5230 25%)}
.cf.to{transform:rotateX(90deg) translateZ(90px);background:#6aab41}
.cf.bo{transform:rotateX(-90deg) translateZ(90px);background:#7a5230}
.fb{position:absolute;border-radius:4px;animation:fbl 4s ease-in-out infinite}
@keyframes fbl{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}
.fbg{width:40px;height:40px;background:linear-gradient(to bottom,var(--grass-l) 30%,var(--grass));top:40px;right:80px}
.fbd{width:30px;height:30px;background:var(--diamond);top:80px;right:30px;transform:rotate(45deg);animation-delay:1s}
.fbg2{width:36px;height:36px;background:var(--gold);bottom:100px;right:60px;animation-delay:2s}
.fbs{width:44px;height:44px;background:#898989;bottom:60px;right:140px;animation-delay:.5s}
.fbr{width:10px;height:32px;background:var(--red);top:160px;right:120px;animation-delay:1.5s}
.fbo{width:36px;height:36px;background:#2a1540;top:200px;right:10px;animation-delay:2.5s}
.gc{position:absolute;background:rgba(255,255,255,.04);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px 24px;animation:gf 6s ease-in-out infinite}
@keyframes gf{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.gc1{top:20px;left:-60px}.gc2{bottom:40px;left:-40px;animation-delay:2s}
.gcl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--grass-l);margin-bottom:8px}
.gcv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px}
.gcs{font-size:11px;color:var(--txt3);margin-top:4px}
/* Ticker */
.tk{background:var(--grass);padding:10px 0;overflow:hidden;z-index:3}
.tkt{display:flex;width:max-content;animation:ts 30s linear infinite}
@keyframes ts{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tki{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;padding:0 32px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.tki::before{content:'◆';font-size:6px;opacity:.5}
/* Sections */
.sec{padding:120px 60px;position:relative}
.sl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt3);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sl::after{content:'';flex:1;max-width:80px;height:1px;background:var(--brd)}
.st{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.9;letter-spacing:-.03em;margin-bottom:24px}
.sd{font-size:15px;line-height:1.8;color:var(--txt2);max-width:520px;font-weight:300}
/* Features */
.fsec{background:var(--card)}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:80px}
.fc{background:var(--card);padding:48px 36px;position:relative;overflow:hidden;cursor:pointer;transition:all .4s;border:1px solid var(--brd)}
.fc:hover{background:var(--elevated);border-color:var(--brd2);transform:translateY(-4px)}
.fc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .3s}
.fc:hover::before{opacity:1}
.fc1::before{background:var(--grass)}.fc2::before{background:var(--diamond)}.fc3::before{background:var(--gold)}.fc4::before{background:var(--red)}.fc5::before{background:#a050ff}.fc6::before{background:#898989}
.fic{width:48px;height:48px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--brd);border-radius:8px;background:rgba(255,255,255,.03)}
.fn{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--txt3);margin-bottom:16px}
.fnm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;text-transform:uppercase;margin-bottom:12px}
.ft{font-size:13px;line-height:1.7;color:var(--txt2);font-weight:300}
/* Biomes */
.bsec{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.bv{background:var(--card);position:relative;overflow:hidden;min-height:500px}
.bc{position:absolute;inset:0}
.bl2{position:absolute;bottom:40px;left:40px;background:rgba(255,255,255,.04);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px 28px}
.blt{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--grass-l);margin-bottom:6px}
.bln{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px}
.blm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);margin-top:8px}
.bco{padding:80px 60px;display:flex;flex-direction:column;justify-content:center}
.bli{list-style:none;margin-top:48px;display:flex;flex-direction:column;gap:2px}
.bli li{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:8px;cursor:pointer;transition:all .2s;border:1px solid transparent}
.bli li:hover,.bli li.act{background:rgba(255,255,255,.03);border-color:rgba(74,124,47,.3)}
.bid{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bim{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;flex:1}
.bia{color:var(--txt3);transition:all .2s}
.bli li:hover .bia{color:var(--txt);transform:translateX(4px)}
/* Modes */
.msec{position:relative;overflow:hidden}
.msec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.03) 1px,transparent 0);background-size:40px 40px}
.mh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:80px;position:relative;z-index:1}
.mht{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:clamp(56px,7vw,96px);line-height:.85;text-transform:uppercase}
.mht .gh{-webkit-text-stroke:1px rgba(255,255,255,.1);color:transparent;display:block}
.mhd{font-size:14px;line-height:1.8;color:var(--txt3);max-width:320px;text-align:right;font-weight:300}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.mc{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:48px 36px;position:relative;overflow:hidden;cursor:pointer;transition:all .4s}
.mc:hover{transform:translateY(-8px);border-color:var(--brd2);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mcg{position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:0;transition:opacity .5s;pointer-events:none}
.mc:hover .mcg{opacity:1}
.mc1 .mcg{background:radial-gradient(circle,rgba(74,124,47,.3),transparent 70%)}
.mc2 .mcg{background:radial-gradient(circle,rgba(247,201,72,.3),transparent 70%)}
.mc3 .mcg{background:radial-gradient(circle,rgba(224,48,48,.15),transparent 70%)}
.mct{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt3);margin-bottom:28px}
.mci{width:64px;height:64px;margin-bottom:28px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.mcn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;text-transform:uppercase;margin-bottom:12px;position:relative;z-index:1}
.mcd{font-size:13px;line-height:1.7;color:var(--txt2);margin-bottom:32px;position:relative;z-index:1;font-weight:300}
.mcb{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:8px 16px;border-radius:100px;position:relative;z-index:1}
.bg1{color:var(--grass-l);background:rgba(74,124,47,.15);border:1px solid rgba(74,124,47,.3)}
.bg2{color:var(--gold);background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.3)}
.bg3{color:var(--red);background:rgba(224,48,48,.1);border:1px solid rgba(224,48,48,.3)}
/* Items */
.isec{background:var(--card)}
.ih{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:64px}
.ifs{display:flex;gap:8px;flex-wrap:wrap}
.fb2{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:8px 20px;border:1px solid var(--brd);background:transparent;color:var(--txt2);cursor:pointer;border-radius:100px;transition:all .2s}
.fb2.act,.fb2:hover{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.ig{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ic{position:relative;cursor:pointer;transition:all .3s}
.ici{aspect-ratio:1;background:var(--card);border:1px solid var(--brd);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;transition:all .3s;position:relative;overflow:hidden}
.ic:hover .ici{border-color:var(--brd2);background:var(--elevated);transform:translateY(-4px)}
.icr{position:absolute;top:12px;right:12px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;padding:4px 10px;border-radius:100px;opacity:0;transition:opacity .3s}
.ic:hover .icr{opacity:1}
.rc{color:var(--txt3);background:rgba(255,255,255,.05)}.ru{color:#8aff8a;background:rgba(138,255,138,.1)}.rr{color:var(--diamond);background:rgba(62,232,232,.1)}.re{color:#a050ff;background:rgba(160,80,255,.1)}.rl{color:var(--gold);background:rgba(247,201,72,.1)}
.iv{width:64px;height:64px;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.ic:hover .iv{transform:scale(1.15) rotate(-3deg)}
.pg{width:48px;height:48px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%);box-shadow:0 4px 0 #5d3a1a;border-radius:2px}
.pd{width:36px;height:36px;background:var(--diamond);transform:rotate(45deg);box-shadow:inset 4px 4px 0 rgba(255,255,255,.3),0 4px 16px rgba(62,232,232,.3);border-radius:2px}
.pgl{width:40px;height:40px;background:var(--gold);box-shadow:inset -3px -3px 0 rgba(0,0,0,.2),inset 3px 3px 0 rgba(255,255,255,.3);border-radius:4px}
.pr{width:12px;height:40px;background:var(--red);box-shadow:-10px 0 0 var(--red),10px 0 0 var(--red),0 -10px 0 var(--red);border-radius:2px}
.ps{width:48px;height:48px;background:#898989;box-shadow:inset 4px 4px 0 rgba(255,255,255,.2),inset -4px -4px 0 rgba(0,0,0,.15);border-radius:2px}
.po{width:44px;height:44px;background:#2a1540;box-shadow:inset 0 0 20px rgba(160,80,255,.3);border-radius:3px}
.psw{width:10px;height:48px;background:linear-gradient(to bottom,var(--diamond) 70%,#7a5230 70%);position:relative;border-radius:1px}
.psw::before{content:'';position:absolute;top:-2px;left:-14px;width:8px;height:8px;background:#7a5230;border-radius:1px}
.psw::after{content:'';position:absolute;bottom:0;left:-6px;width:22px;height:6px;background:#7a5230;border-radius:1px}
.psa{width:48px;height:48px;background:#f0d890;box-shadow:inset 4px 4px 0 rgba(255,255,255,.3);border-radius:2px}
.ptnt{width:44px;height:44px;background:#cc2222;position:relative;border-radius:3px}
.ptnt::before{content:'TNT';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:12px;color:#fff;letter-spacing:.05em}
.inm{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);transition:color .3s}
.ic:hover .inm{color:var(--txt)}
/* CTA */
.cta{background:var(--grass);padding:80px 60px;display:flex;justify-content:space-between;align-items:center;gap:40px;position:relative;overflow:hidden}
.cta::before{content:'PLAY';position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:220px;color:rgba(0,0,0,.06);pointer-events:none}
.ctat{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:clamp(36px,4vw,56px);line-height:.9;text-transform:uppercase;color:#fff}
.ctab{display:flex;gap:12px;flex-shrink:0}
.bw{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--grass);padding:16px 32px;border:none;cursor:pointer;border-radius:6px;transition:all .2s;font-weight:600}
.bw:hover{background:var(--bg);color:#fff}
.bg4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:#fff;padding:14px 32px;border:1.5px solid rgba(255,255,255,.4);cursor:pointer;border-radius:6px;transition:all .2s}
.bg4:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* Servers */
.ss{background:var(--card);padding:100px 60px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.sc2{background:var(--card);border:1px solid var(--brd);border-radius:12px;padding:28px;transition:all .3s;cursor:pointer}
.sc2:hover{border-color:var(--brd2);transform:translateY(-2px)}
.sch{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sst{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px}
.sdo{width:6px;height:6px;border-radius:50%;background:var(--grass-l)}
.snm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;margin-bottom:4px}
.smo{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.spl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt2)}
.spl span{color:var(--grass-l);font-weight:600}
.spi{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);margin-top:8px}
/* Footer */
footer{background:var(--bg);padding:80px 60px 40px;border-top:1px solid var(--brd)}
.fg2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}
.fbr{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:36px;margin-bottom:16px}
.fta{font-size:14px;line-height:1.7;color:var(--txt3);max-width:300px;margin-bottom:24px;font-weight:300}
.fso{display:flex;gap:8px}
.sol{width:36px;height:36px;border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt3);cursor:pointer;transition:all .2s;border-radius:6px;background:none}
.sol:hover{border-color:var(--txt2);color:var(--txt)}
.fct{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--txt3);margin-bottom:20px}
.flk{list-style:none;display:flex;flex-direction:column;gap:12px}
.flk a{font-size:13px;color:var(--txt2);text-decoration:none;transition:color .2s;font-weight:300}
.flk a:hover{color:var(--txt)}
.fb3{border-top:1px solid var(--brd);padding-top:32px;display:flex;justify-content:space-between}
.fcp{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt3)}
/* Hotbar */
.hot{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:100;background:rgba(10,10,15,.8);padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:8px;backdrop-filter:blur(12px)}
.hsl{width:44px;height:44px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .15s;border-radius:4px}
.hsl:hover{background:rgba(255,255,255,.1)}
.hsl.sel{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.hsn2{position:absolute;top:1px;left:4px;font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--txt3)}
/* Modal */
.mo{position:fixed;inset:0;background:rgba(10,10,15,.92);backdrop-filter:blur(12px);z-index:200;display:none;align-items:center;justify-content:center}
.mo.open{display:flex}
.mb{background:var(--card);border:1px solid var(--brd);border-radius:16px;width:90%;max-width:580px;animation:mi .35s ease}
@keyframes mi{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.mh2{padding:24px 32px;border-bottom:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center}
.mtt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase}
.mcl{width:36px;height:36px;background:none;border:1px solid var(--brd);color:var(--txt3);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:16px;transition:all .2s}
.mcl:hover{background:var(--red);border-color:var(--red);color:#fff}
.mb2{padding:32px}
.cra{display:flex;align-items:center;gap:32px;margin-bottom:32px}
.crl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);margin-bottom:12px}
.crg{display:grid;grid-template-columns:repeat(3,56px);gap:4px}
.crc{width:56px;height:56px;background:var(--bg);border:1px solid var(--brd);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.crc.fl{border-color:rgba(74,124,47,.3);background:rgba(74,124,47,.1)}
.cra2{font-size:24px;color:var(--txt3);flex-shrink:0}
.crr{display:flex;flex-direction:column;align-items:center}
.crc2{width:72px;height:72px;background:var(--bg);border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center}
.crc3{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);margin-top:6px}
.minf{background:var(--bg);padding:20px 24px;border:1px solid var(--brd);border-radius:8px}
.minf2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;margin-bottom:8px}
.minfd{font-size:13px;line-height:1.7;color:var(--txt2);font-weight:300}
.mf2{padding:24px 32px;border-top:1px solid var(--brd);display:flex;justify-content:flex-end;gap:12px}
.mbt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;border:none;cursor:pointer;border-radius:6px;transition:all .2s}
.mbp{background:var(--grass);color:#fff}.mbp:hover{background:var(--grass-l)}
.mbg{background:none;border:1px solid var(--brd);color:var(--txt3)}.mbg:hover{border-color:var(--txt2);color:var(--txt)}
/* Reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.rv.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@media(max-width:1100px){.fg,.mg,.sg{grid-template-columns:repeat(2,1fr)}.ig{grid-template-columns:repeat(3,1fr)}.fg2{grid-template-columns:1fr 1fr}}
@media(max-width:768px){nav{padding:0 20px}.nk{display:none}.hero{grid-template-columns:1fr}.hl{padding:100px 24px 60px}.hr{min-height:400px;padding:40px 0}.hs3{width:280px;height:280px}.sec{padding:80px 24px}.bsec{grid-template-columns:1fr}.bv{min-height:300px}.bco{padding:48px 24px}.mh{flex-direction:column;align-items:flex-start;gap:24px}.mhd{text-align:left}.fg,.mg{grid-template-columns:1fr}.ig{grid-template-columns:repeat(2,1fr)}.ih{flex-direction:column;gap:24px}.sg{grid-template-columns:1fr}.cta{flex-direction:column;text-align:center;padding:60px 24px}.ctab{flex-direction:column;width:100%}.bw,.bg4{width:100%;text-align:center}.fg2{grid-template-columns:1fr}.fb3{flex-direction:column;gap:16px;text-align:center}.hot{display:none}.hs2{gap:24px}}
</style>
</head>
<body>
<div class="loader" id="ld"><div class="lg"><div></div><div></div><div></div><div></div></div><div class="lt">Yükleniyor</div><div class="lb"><div></div></div></div>
<nav id="nv"><a class="nl" href="#"><div class="ni"><div></div><div></div><div></div><div></div></div><span class="nt">MINECRAFT</span></a><ul class="nk"><li><a href="#ft">Özellikler</a></li><li><a href="#bm">Biyomlar</a></li><li><a href="#md">Modlar</a></li><li><a href="#it">Eşyalar</a></li><li><a href="#sv">Sunucular</a></li></ul><div style="display:flex;align-items:center;gap:16px"><span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3);letter-spacing:.1em">v1.21.4</span><button class="np" onclick="om()">Oyna ▶</button></div></nav>
<section class="hero"><div class="hbg"></div><div class="hp" id="hP"></div>
<div class="hl"><div class="hb"><span></span>Yeni Güncelleme — Tricky Trials</div>
<h1 class="ht"><span style="display:block">Dünyanı</span><span class="o" style="display:block">Keşfet</span><span class="g" style="display:block">& İnşa Et.</span></h1>
<p class="hd">Sonsuz voksel dünyasında sınırsız olanaklar seni bekliyor. Hayatta kal, keşfet, inşa et ve maceraya atıl.</p>
<div class="hbtns"><button class="bp1" onclick="om()">▶ Hemen Başla</button><button class="bp2">Sunucuları Keşfet</button></div>
<div class="hs2"><div><div class="hsn">142M+</div><div class="hsl">Aktif Oyuncu</div></div><div><div class="hsn">900+</div><div class="hsl">Sunucu</div></div><div><div class="hsn">∞</div><div class="hsl">Dünya</div></div></div></div>
<div class="hr"><div class="hs3"><div class="hcc"><div class="hc"><div class="cf fr"></div><div class="cf ba"></div><div class="cf ri"></div><div class="cf le"></div><div class="cf to"></div><div class="cf bo"></div></div></div>
<div class="fb fbg"></div><div class="fb fbd"></div><div class="fb fbg2"></div><div class="fb fbs"></div><div class="fb fbr"></div><div class="fb fbo"></div>
<div class="gc gc1"><div class="gcl">Anlık Oyuncu</div><div class="gcv">12,481</div><div class="gcs">+23% bu hafta</div></div>
<div class="gc gc2"><div class="gcl">Keşfedilen Blok</div><div class="gcv">2.4B</div><div class="gcs">Toplam dünya</div></div></div></div></section>
<div class="tk"><div class="tkt"><div class="tki">Survival</div><div class="tki">Creative</div><div class="tki">Hardcore</div><div class="tki">Adventure</div><div class="tki">Spectator</div><div class="tki">Multiplayer</div><div class="tki">Redstone</div><div class="tki">PvP</div><div class="tki">SkyBlock</div><div class="tki">Parkour</div><div class="tki">Bedwars</div><div class="tki">Factions</div><div class="tki">Survival</div><div class="tki">Creative</div><div class="tki">Hardcore</div><div class="tki">Adventure</div><div class="tki">Spectator</div><div class="tki">Multiplayer</div><div class="tki">Redstone</div><div class="tki">PvP</div><div class="tki">SkyBlock</div><div class="tki">Parkour</div><div class="tki">Bedwars</div><div class="tki">Factions</div></div></div>
<section class="sec fsec" id="ft"><div class="rv"><div class="sl">Özellikler</div><h2 class="st">Sınırsız<br>Olasılıklar</h2><p class="sd">Her dünya eşsizdir. 60+ biyom, yüzlerce yapı, gizli zindanlar ve ötesi.</p></div>
<div class="fg"><div class="fc fc1 rv d1"><div class="fic"><svg width="24" height="24" fill="none" stroke="var(--grass-l)" stroke-width="1.5"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg></div><div class="fn">01</div><div class="fnm">Prosedürel Dünya</div><p class="ft">Her dünya benzersiz. Seed'ler sonsuz kombinasyonlar üretir.</p></div>
<div class="fc fc2 rv d2"><div class="fic"><svg width="24" height="24" fill="none" stroke="var(--diamond)" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div><div class="fn">02</div><div class="fnm">Derin Mağaralar</div><p class="ft">Y-59'a kadar in. Yeni kaya türleri, nadir cevherler.</p></div>
<div class="fc fc3 rv d3"><div class="fic"><svg width="24" height="24" fill="none" stroke="var(--gold)" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4"/></svg></div><div class="fn">03</div><div class="fnm">Gündüz/Gece</div><p class="ft">20 dakikalık döngüler. Gece tehlikeli, gündüz keşif için ideal.</p></div>
<div class="fc fc4 rv d1"><div class="fic"><svg width="24" height="24" fill="none" stroke="var(--red)" stroke-width="1.5"><polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/></svg></div><div class="fn">04</div><div class="fnm">Redstone</div><p class="ft">Karmaşık devreler, otomatik çiftlikler ve bilgisayarlar.</p></div>
<div class="fc fc5 rv d2"><div class="fic"><svg width="24" height="24" fill="none" stroke="#a050ff" stroke-width="1.5"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/><path d="M12 6v6l4 2"/></svg></div><div class="fn">05</div><div class="fnm">Büyü Sistemi</div><p class="ft">Eşyalarını büyüyle güçlendir. 39 farklı büyü var.</p></div>
<div class="fc fc6 rv d3"><div class="fic"><svg width="24" height="24" fill="none" stroke="#898989" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div><div class="fn">06</div><div class="fnm">Çok Oyunculu</div><p class="ft">Arkadaşlarınla birlikte oyna, ticaret yap, yarış veya savaş.</p></div></div></section>
<section class="bsec" id="bm"><div class="bv"><canvas class="bc" id="bC"></canvas><div class="bl2"><div class="blt">Aktif Biyom</div><div class="bln" id="bN">Taiga Ormanı</div><div class="blm" id="bM">Yükseklik: 128 blok • Sıcaklık: -0.5°C</div></div></div>
<div class="bco"><div class="sl">Biyomlar</div><h2 class="st rv">Her Biyom<br>Bir Dünya</h2><p class="sd rv">Karlı tundralardan çöle, okyanustan Nether'a — her biyom benzersiz.</p>
<ul class="bli"><li class="act" onclick="sb(this,'Taiga Ormanı','Yükseklik: 128 • Sıcaklık: -0.5°C')"><span class="bid" style="background:var(--grass-l)"></span><span class="bim">Taiga Ormanı</span><span class="bia">→</span></li><li onclick="sb(this,'Çöl','Yükseklik: 64 • Sıcaklık: 42°C')"><span class="bid" style="background:var(--gold)"></span><span class="bim">Çöl</span><span class="bia">→</span></li><li onclick="sb(this,'Okyanus','Derinlik: -32 • Basınç: Yüksek')"><span class="bid" style="background:var(--diamond)"></span><span class="bim">Okyanus</span><span class="bia">→</span></li><li onclick="sb(this,'Nether','Yükseklik: 32 • Sıcaklık: 1200°C')"><span class="bid" style="background:var(--red)"></span><span class="bim">Nether</span><span class="bia">→</span></li><li onclick="sb(this,'End','Boyut: End • Gravite: Düşük')"><span class="bid" style="background:#a050ff"></span><span class="bim">End</span><span class="bia">→</span></li></ul></div></section>
<section class="sec msec" id="md"><div class="mh"><div class="mht rv">Oyun<span class="gh">Modları</span></div><p class="mhd rv">Her oyuncu farklı bir yolculuk ister. İnşa et, hayatta kal ya da riske at.</p></div>
<div class="mg"><div class="mc mc1 rv d1" onclick="om()"><div class="mcg"></div><div class="mct">Mod — 01</div><div class="mci" style="background:rgba(74,124,47,.15);border:1px solid rgba(74,124,47,.3)"><svg width="28" height="28" fill="none"><rect x="3" y="3" width="22" height="22" rx="2" fill="var(--grass)" opacity=".6"/><rect x="3" y="3" width="22" height="7" fill="var(--grass-l)" opacity=".8"/></svg></div><div class="mcn">Survival</div><p class="mcd">Kaynak topla, açlığını gider, geceleri hayatta kal.</p><div class="mcb bg1">● Başlangıç Dostu</div></div>
<div class="mc mc2 rv d2" onclick="om()"><div class="mcg"></div><div class="mct">Mod — 02</div><div class="mci" style="background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.3)"><svg width="28" height="28" fill="none"><rect x="3" y="12" width="22" height="4" fill="var(--gold)" opacity=".6"/><rect x="12" y="3" width="4" height="22" fill="var(--gold)" opacity=".6"/></svg></div><div class="mcn">Creative</div><p class="mcd">Sınırsız blok, uçma, ölümsüzlük. Hayal gücün tek sınır.</p><div class="mcb bg2">● Sınırsız Özgürlük</div></div>
<div class="mc mc3 rv d3" onclick="om()"><div class="mcg"></div><div class="mct">Mod — 03</div><div class="mci" style="background:rgba(224,48,48,.1);border:1px solid rgba(224,48,48,.3)"><svg width="28" height="28" fill="none"><rect x="6" y="3" width="16" height="16" rx="2" fill="#fff" opacity=".85"/><rect x="8" y="18" width="5" height="5" fill="#fff" opacity=".85"/><rect x="15" y="18" width="5" height="5" fill="#fff" opacity=".85"/></svg></div><div class="mcn">Hardcore</div><p class="mcd">Bir hayat, bir şans. Öldüğünde her şey silinir.</p><div class="mcb bg3">● Yüksek Risk</div></div></div></section>
<section class="sec isec" id="it"><div class="ih"><div><div class="sl">Eşyalar</div><h2 class="st rv">Eşya<br>Ansiklopedisi</h2></div><div class="ifs"><button class="fb2 act" onclick="fb(this)">Tümü</button><button class="fb2" onclick="fb(this)">Bloklar</button><button class="fb2" onclick="fb(this)">Madenler</button><button class="fb2" onclick="fb(this)">Silahlar</button></div></div>
<div class="ig"><div class="ic rv d1" onclick="om()"><div class="ici"><span class="icr rc">Common</span><div class="iv"><div class="pg"></div></div><span class="inm">Çimen Blok</span></div></div>
<div class="ic rv d2" onclick="om()"><div class="ici"><span class="icr rr">Rare</span><div class="iv"><div class="pd"></div></div><span class="inm">Elmas</span></div></div>
<div class="ic rv d3" onclick="om()"><div class="ici"><span class="icr rl">Legendary</span><div class="iv"><div class="pgl"></div></div><span class="inm">Altın</span></div></div>
<div class="ic rv d4" onclick="om()"><div class="ici"><span class="icr re">Epic</span><div class="iv"><div class="pr"></div></div><span class="inm">Redstone</span></div></div>
<div class="ic rv d1" onclick="om()"><div class="ici"><span class="icr rc">Common</span><div class="iv"><div class="ps"></div></div><span class="inm">Taş</span></div></div>
<div class="ic rv d2" onclick="om()"><div class="ici"><span class="icr re">Epic</span><div class="iv"><div class="po"></div></div><span class="inm">Obsidyen</span></div></div>
<div class="ic rv d3" onclick="om()"><div class="ici"><span class="icr rr">Rare</span><div class="iv"><div class="psw"></div></div><span class="inm">Elmas Kılıç</span></div></div>
<div class="ic rv d4" onclick="om()"><div class="ici"><span class="icr rc">Common</span><div class="iv"><div class="psa"></div></div><span class="inm">Kum</span></div></div>
<div class="ic rv d1" onclick="om()"><div class="ici"><span class="icr ru">Uncommon</span><div class="iv"><div class="ptnt"></div></div><span class="inm">TNT</span></div></div>
<div class="ic rv d2" onclick="om()"><div class="ici"><span class="icr rr">Rare</span><div class="iv"><div class="pd" style="width:30px;height:30px;background:#2ecfcf"></div></div><span class="inm">Buz</span></div></div>
<div class="ic rv d3" onclick="om()"><div class="ici"><span class="icr rl">Legendary</span><div class="iv"><div style="width:36px;height:36px;background:#1a1a2e;border:2px solid rgba(255,255,255,.2);border-radius:4px"></div></div><span class="inm">Netherit</span></div></div>
<div class="ic rv d4" onclick="om()"><div class="ici"><span class="icr rc">Common</span><div class="iv"><div style="width:48px;height:48px;background:#5d3a1a;border-radius:2px"></div></div><span class="inm">Toprak</span></div></div></div></section>
<section class="cta"><div class="ctat rv">Maceraya<br>Hazır mısın?</div><div class="ctab rv d1"><button class="bw" onclick="om()">▶ Ücretsiz Oyna</button><button class="bg4">Topluluk →</button></div></section>
<section class="ss" id="sv"><div class="rv"><div class="sl">Sunucular</div><h2 class="st">Popüler<br>Sunucular</h2></div>
<div class="sg"><div class="sc2 rv d1"><div class="sch"><div class="sst"><span class="sdo"></span>Çevrimiçi</div><span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3)">EU</span></div><div class="snm">Hypixel</div><div class="smo">Minigames • Bedwars</div><div class="spl"><span>42,891</span> / 200,000</div><div class="spi">Ping: 23ms</div></div>
<div class="sc2 rv d2"><div class="sch"><div class="sst"><span class="sdo"></span>Çevrimiçi</div><span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3)">US</span></div><div class="snm">Mineplex</div><div class="smo">Survival • Creative</div><div class="spl"><span>8,234</span> / 50,000</div><div class="spi">Ping: 112ms</div></div>
<div class="sc2 rv d3"><div class="sch"><div class="sst"><span class="sdo"></span>Çevrimiçi</div><span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3)">EU</span></div><div class="snm">CubeCraft</div><div class="smo">PvP • Tower Defense</div><div class="spl"><span>15,672</span> / 80,000</div><div class="spi">Ping: 34ms</div></div>
<div class="sc2 rv d4"><div class="sch"><div class="sst"><span class="sdo"></span>Çevrimiçi</div><span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt3)">TR</span></div><div class="snm">CraftRise</div><div class="smo">Skyblock • Survival</div><div class="spl"><span>3,421</span> / 10,000</div><div class="spi">Ping: 18ms</div></div></div></section>
<footer><div class="fg2"><div><div class="fbr">MINECRAFT</div><p class="fta">Blok blok inşa edilen efsaneler için. Her dünya bir hikaye.</p><div class="fso"><button class="sol">X</button><button class="sol">in</button><button class="sol">YT</button><button class="sol">DC</button></div></div><div><div class="fct">Oyun</div><ul class="flk"><li><a href="#">Survival</a></li><li><a href="#">Creative</a></li><li><a href="#">Hardcore</a></li><li><a href="#">Multiplayer</a></li></ul></div><div><div class="fct">Topluluk</div><ul class="flk"><li><a href="#">Forum</a></li><li><a href="#">Discord</a></li><li><a href="#">Reddit</a></li><li><a href="#">Wiki</a></li></ul></div><div><div class="fct">Destek</div><ul class="flk"><li><a href="#">SSS</a></li><li><a href="#">Rehberler</a></li><li><a href="#">Gizlilik</a></li><li><a href="#">İletişim</a></li></ul></div></div><div class="fb3"><span class="fcp">© 2026 Minecraft</span><span class="fcp">Made with blocks ♥</span></div></footer>
<div class="hot"><div class="hsl sel" onclick="ss2(this)"><span class="hsn2">1</span><div style="width:22px;height:22px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%)"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">2</span><div style="width:16px;height:16px;background:var(--diamond);transform:rotate(45deg)"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">3</span><div style="width:20px;height:20px;background:var(--gold);border-radius:3px"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">4</span><div style="width:22px;height:22px;background:#898989;border-radius:1px"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">5</span><div style="width:6px;height:22px;background:var(--red);box-shadow:-6px 0 0 var(--red),6px 0 0 var(--red)"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">6</span><div style="width:20px;height:20px;background:#2a1540;border-radius:2px"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">7</span><div style="width:20px;height:20px;background:#5d3a1a;border-radius:1px"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">8</span><div style="width:22px;height:22px;background:#f0d890;border-radius:1px"></div></div><div class="hsl" onclick="ss2(this)"><span class="hsn2">9</span><div style="width:4px;height:22px;background:#898989;transform:rotate(-30deg)"></div></div></div>
<div class="mo" id="mO"><div class="mb"><div class="mh2"><div class="mtt">Crafting Masası</div><button class="mcl" onclick="cm()">✕</button></div><div class="mb2"><div class="cra"><div><div class="crl">Malzeme Dizimi</div><div class="crg"><div class="crc fl"><div style="width:28px;height:28px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%);border-radius:2px"></div></div><div class="crc fl"><div style="width:28px;height:28px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%);border-radius:2px"></div></div><div class="crc"></div><div class="crc fl"><div style="width:28px;height:28px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%);border-radius:2px"></div></div><div class="crc fl"><div style="width:28px;height:28px;background:linear-gradient(to bottom,#6aab41 30%,#7a5230 30%);border-radius:2px"></div></div><div class="crc"></div><div class="crc"></div><div class="crc"></div><div class="crc"></div></div></div><div class="cra2">→</div><div class="crr"><div class="crl">Sonuç</div><div class="crc2"><div style="width:36px;height:36px;background:#8B5E3C;border-radius:3px"></div></div><div class="crc3">x1</div></div></div><div class="minf"><div class="minf2">Crafting Table</div><div class="minfd">4 adet tahta plakadan üretilir. 3×3 üretim ızgarasına erişim sağlar.</div></div></div><div class="mf2"><button class="mbt mbg" onclick="cm()">İptal</button><button class="mbt mbp" onclick="cm()">Envantere Ekle</button></div></div></div>
<script>
window.addEventListener('load',function(){setTimeout(function(){document.getElementById('ld').classList.add('hide')},2200)});
var hP=document.getElementById('hP');for(var i=0;i<30;i++){var p=document.createElement('div');p.className='pt';p.style.left=Math.random()*100+'%';p.style.animationDuration=(8+Math.random()*12)+'s';p.style.animationDelay=Math.random()*10+'s';hP.appendChild(p)}
window.addEventListener('scroll',function(){var n=document.getElementById('nv');if(window.scrollY>50){n.classList.add('sc')}else{n.classList.remove('sc')}});
var obs=new IntersectionObserver(function(e){e.forEach(function(x){if(x.isIntersecting)x.target.classList.add('vis')})},{threshold:.1,rootMargin:'0px 0px -40px 0px'});document.querySelectorAll('.rv').forEach(function(el){obs.observe(el)});
var cv=document.getElementById('bC'),cx=cv.getContext('2d');function rC(){cv.width=cv.parentElement.offsetWidth;cv.height=cv.parentElement.offsetHeight;dB()}function dB(){var w=cv.width,h=cv.height;var g=cx.createLinearGradient(0,0,0,h*.45);g.addColorStop(0,'#0d1117');g.addColorStop(1,'#1a2a3a');cx.fillStyle=g;cx.fillRect(0,0,w,h*.45);for(var i=0;i<80;i++){cx.fillStyle='rgba(255,255,255,'+(0.2+Math.random()*.6)+')';cx.fillRect(Math.random()*w,Math.random()*h*.35,1+Math.random(),1+Math.random())}cx.fillStyle='#f0e8c0';cx.beginPath();cx.arc(w*.8,h*.12,28,0,Math.PI*2);cx.fill();cx.fillStyle='#1a2a0d';cx.fillRect(0,h*.45,w,h*.02);cx.fillStyle='#2d4a1a';cx.fillRect(0,h*.47,w,h*.15);cx.fillStyle='#3d3020';cx.fillRect(0,h*.62,w,h*.12);cx.fillStyle='#2a2a2a';cx.fillRect(0,h*.74,w,h*.26);function dT(x,s){var t=h*.47;cx.fillStyle='#5d3a1a';cx.fillRect(x-4*s,t,8*s,24*s);cx.fillStyle='#4a7c2f';cx.fillRect(x-20*s,t-32*s,40*s,24*s);cx.fillStyle='#3d6b25';cx.fillRect(x-16*s,t-52*s,32*s,24*s)}dT(w*.15,1.2);dT(w*.35,.9);dT(w*.55,1.4);dT(w*.75,1);dT(w*.9,.8)}rC();window.addEventListener('resize',rC);
function sb(el,n,m){document.querySelectorAll('.bli li').forEach(function(x){x.classList.remove('act')});el.classList.add('act');document.getElementById('bN').textContent=n;document.getElementById('bM').textContent=m}
function fb(b){document.querySelectorAll('.fb2').forEach(function(x){x.classList.remove('act')});b.classList.add('act')}
function om(){document.getElementById('mO').classList.add('open');document.body.style.overflow='hidden'}function cm(){document.getElementById('mO').classList.remove('open');document.body.style.overflow=''}
document.getElementById('mO').addEventListener('click',function(e){if(e.target===this)cm()});
document.addEventListener('keydown',function(e){if(e.key==='Escape')cm()});
function ss2(s){document.querySelectorAll('.hsl').forEach(function(x){x.classList.remove('sel')});s.classList.add('sel')}
</script>
</body>
</html>

CSS

Metehan

Recommended