Metehan

16 Metehan

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BLOCKCRAFT - Survive. Build. Dominate.</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Barlow+Condensed:wght@300;400;600;700;900&family=IBM+Plex+Mono:wght@300;400;700&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --grass: #4a7c2f; --grass-light: #6aab41;
    --dirt: #7a5230; --stone: #898989;
    --diamond: #3ee8e8; --gold: #f7c948;
    --redstone: #e03030; --netherite: #1a1a24;
    --ink: #0a0a0f; --fog: #f4f4ef; --mist: #e8e8e2;
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Barlow Condensed', sans-serif; background: var(--fog); color: var(--ink); overflow-x: hidden; cursor: crosshair; }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: var(--grass); }

.cursor-dot { width: 8px; height: 8px; background: var(--grass); position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: difference; }
  .cursor-ring { width: 32px; height: 32px; border: 2px solid var(--grass); position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: all 0.15s ease; mix-blend-mode: difference; }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 60px; height: 72px; background: rgba(244,244,239,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.08); }
  .nav-logo { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
  .logo-block { width: 28px; height: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .logo-block div { border: 1px solid rgba(0,0,0,0.15); }
  .logo-block div:nth-child(1) { background: var(--grass); }
  .logo-block div:nth-child(2) { background: var(--dirt); }
  .logo-block div:nth-child(3) { background: var(--stone); }
  .logo-block div:nth-child(4) { background: var(--diamond); }
  .nav-links { display: flex; gap: 40px; list-style: none; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
  .nav-links a { text-decoration: none; color: var(--ink); opacity: 0.5; transition: opacity 0.2s; }
  .nav-links a:hover { opacity: 1; }
  .nav-cta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--fog); border: none; padding: 10px 22px; cursor: crosshair; transition: background 0.2s; }
  .nav-cta:hover { background: var(--grass); }

.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 72px; overflow: hidden; }
  .hero-left { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
  .hero-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grass); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
  .hero-tag::before { content: ''; display: inline-block; width: 30px; height: 1px; background: var(--grass); }
  .hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(72px, 8vw, 120px); line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 32px; }
  .hero-title .accent { color: var(--grass); }
  .hero-title .outline { -webkit-text-stroke: 2px var(--ink); color: transparent; }
  .hero-sub { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.8; color: var(--ink); opacity: 0.55; max-width: 380px; margin-bottom: 48px; }
  .hero-actions { display: flex; gap: 16px; align-items: center; }
  .btn-primary { background: var(--grass); color: white; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 32px; border: none; cursor: crosshair; transition: all 0.2s; display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; }
  .btn-primary::after { content: ''; position: absolute; inset: 0; background: white; transform: translateX(-101%); transition: transform 0.3s ease; z-index: 0; }
  .btn-primary:hover::after { transform: translateX(0); }
  .btn-primary:hover { color: var(--grass); }
  .btn-primary span { position: relative; z-index: 1; }
  .btn-secondary { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: none; border: none; cursor: crosshair; opacity: 0.5; transition: opacity 0.2s; text-decoration: underline; text-underline-offset: 4px; }
  .btn-secondary:hover { opacity: 1; }
  .hero-stats { display: flex; gap: 48px; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.1); }
  .stat-item { display: flex; flex-direction: column; gap: 4px; }
  .stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 36px; color: var(--ink); line-height: 1; }
  .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.4; }

.hero-right { background: var(--ink); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .hero-right::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; }
  .hero-right::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to top, rgba(74,124,47,0.15), transparent); }

.block-scene { position: relative; width: 280px; height: 340px; perspective: 700px; }
  .mc-block { position: absolute; width: 120px; height: 120px; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(-40deg); }
  .mc-block.b1 { top: 0; left: 80px; animation: bf1 4s ease-in-out infinite; }
  .mc-block.b2 { top: 105px; left: 48px; animation: bf2 4s ease-in-out infinite 0.5s; }
  .mc-block.b3 { top: 210px; left: 16px; animation: bf3 4s ease-in-out infinite 1s; }
  @keyframes bf1 { 0%,100% { transform: rotateX(-25deg) rotateY(-40deg) translateY(0); } 50% { transform: rotateX(-25deg) rotateY(-40deg) translateY(-12px); } }
  @keyframes bf2 { 0%,100% { transform: rotateX(-25deg) rotateY(-40deg) translateY(0); } 50% { transform: rotateX(-25deg) rotateY(-40deg) translateY(-8px); } }
  @keyframes bf3 { 0%,100% { transform: rotateX(-25deg) rotateY(-40deg) translateY(0); } 50% { transform: rotateX(-25deg) rotateY(-40deg) translateY(-15px); } }
  .face { position: absolute; width: 120px; height: 120px; border: 1px solid rgba(0,0,0,0.5); }
  .face.front  { transform: translateZ(60px); }
  .face.back   { transform: rotateY(180deg) translateZ(60px); }
  .face.right  { transform: rotateY(90deg) translateZ(60px); }
  .face.left   { transform: rotateY(-90deg) translateZ(60px); }
  .face.top    { transform: rotateX(90deg) translateZ(60px); }
  .face.bottom { transform: rotateX(-90deg) translateZ(60px); }
  .grass-block .top { background: #5d9134; filter: brightness(1.2); }
  .grass-block .front, .grass-block .back, .grass-block .left, .grass-block .right { background: linear-gradient(to bottom, #5d9134 22%, #7a5230 22%); }
  .grass-block .bottom { background: #7a5230; }
  .diamond-block .face { background: #2ecfcf; }
  .diamond-block .top { background: #5ef5f5; }
  .diamond-block .right { background: #1a9e9e; }
  .obsidian-block .face { background: #1e1e2e; }
  .obsidian-block .top { background: #2a2a3e; }
  .obsidian-block .right { background: #14141e; }

.hero-card { position: absolute; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); padding: 16px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; }
  .hero-card.top-card { top: 48px; right: 48px; }
  .hero-card.bottom-card { bottom: 80px; left: 40px; }
  .hero-card .card-label { color: var(--grass-light); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; }
  .hero-card .card-value { font-size: 22px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: white; }

.ticker-wrap { background: var(--grass); padding: 12px 0; overflow: hidden; position: relative; z-index: 3; }
  .ticker { display: flex; width: max-content; animation: tick 22s linear infinite; }
  .ticker-item { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: white; padding: 0 40px; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
  .ticker-item::before { content: '+'; font-size: 10px; opacity: 0.6; }
  @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.section-about { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
  .about-media { background: var(--netherite); position: relative; overflow: hidden; min-height: 600px; }
  .biome-art { position: absolute; inset: 0; background: linear-gradient(to bottom, #0d1117 0%, #0d1117 30%, #1a2a0d 30%, #1a2a0d 31%, #2d4a1a 31%, #2d4a1a 45%, #3d3020 45%, #3d3020 55%, #2a2a2a 55%, #2a2a2a 100%); }
  .biome-stars { position: absolute; top: 0; left: 0; right: 0; height: 30%; }
  .star { position: absolute; width: 2px; height: 2px; background: white; animation: twinkle 3s ease-in-out infinite; }
  @keyframes twinkle { 0%,100% { opacity: 0.8; } 50% { opacity: 0.1; } }
  .moon { position: absolute; top: 40px; right: 80px; width: 48px; height: 48px; background: #f0e8c0; box-shadow: 0 0 40px rgba(240,232,192,0.3); }
  .pixel-tree { position: absolute; bottom: 55%; }
  .tree-trunk { width: 16px; height: 24px; background: #5d3a1a; margin: 0 auto; }
  .tree-top { width: 48px; height: 48px; background: var(--grass); margin-left: -16px; }
  .tree-top2 { width: 32px; height: 32px; background: var(--grass-light); margin-left: -8px; }
  .biome-badge { position: absolute; bottom: 60px; right: 40px; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); padding: 20px 24px; font-family: 'IBM Plex Mono', monospace; color: rgba(255,255,255,0.7); }
  .biome-badge .bl { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grass-light); margin-bottom: 8px; }
  .biome-badge .bv { font-size: 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: white; }
  .biome-badge .bs { font-size: 10px; margin-top: 6px; opacity: 0.5; }

.about-content { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
  .section-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
  .section-tag::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: currentColor; }
  .section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(48px, 5vw, 72px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 24px; }
  .section-body { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.9; opacity: 0.5; max-width: 420px; margin-bottom: 40px; }
  .feature-list { list-style: none; display: flex; flex-direction: column; }
  .feature-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,0.08); cursor: pointer; transition: all 0.2s; }
  .feature-item:hover { padding-left: 8px; }
  .feature-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; opacity: 0.3; min-width: 28px; }
  .feature-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.15); }
  .feature-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; flex: 1; }
  .feature-arr { font-size: 16px; opacity: 0.3; transition: opacity 0.2s, transform 0.2s; }
  .feature-item:hover .feature-arr { opacity: 1; transform: translateX(4px); }

.section-modes { background: var(--ink); padding: 120px 60px; position: relative; overflow: hidden; }
  .section-modes::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; }
  .modes-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px; }
  .modes-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(60px, 7vw, 100px); line-height: 0.85; text-transform: uppercase; letter-spacing: -0.02em; color: white; }
  .modes-title .ghost { -webkit-text-stroke: 1px rgba(255,255,255,0.2); color: transparent; display: block; }
  .modes-desc { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.35); line-height: 1.8; max-width: 300px; text-align: right; }
  .modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .mode-card { background: #111118; padding: 48px 36px; position: relative; overflow: hidden; cursor: crosshair; transition: background 0.3s; border: 1px solid rgba(255,255,255,0.04); }
  .mode-card:hover { background: #16161e; }
  .mode-card:hover .mode-glow { opacity: 1; }
  .mode-card:hover .mode-num { opacity: 1; }
  .mode-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.3s; }
  .mode-card.survival .mode-glow { background: var(--grass); }
  .mode-card.creative .mode-glow { background: var(--gold); }
  .mode-card.hardcore .mode-glow { background: var(--redstone); }
  .mode-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.2); margin-bottom: 32px; opacity: 0.4; transition: opacity 0.3s; }
  .mode-icon { width: 40px; height: 40px; margin-bottom: 24px; }
  .mode-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; text-transform: uppercase; letter-spacing: 0.02em; color: white; margin-bottom: 12px; }
  .mode-body { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.8; margin-bottom: 32px; }
  .mode-badge { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 14px; border: 1px solid; }
  .survival .mode-badge { color: var(--grass-light); border-color: var(--grass); }
  .creative .mode-badge { color: var(--gold); border-color: var(--gold); }
  .hardcore .mode-badge { color: var(--redstone); border-color: var(--redstone); }

.section-items { padding: 120px 60px; background: var(--fog); }
  .items-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px; }
  .items-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(56px, 6vw, 88px); line-height: 0.85; text-transform: uppercase; letter-spacing: -0.02em; }
  .items-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; margin-top: 8px; }
  .filter-btn { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 8px 16px; border: 1px solid rgba(0,0,0,0.2); background: none; cursor: crosshair; transition: all 0.2s; }
  .filter-btn.active, .filter-btn:hover { background: var(--ink); color: white; border-color: var(--ink); }
  .items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .item-card { position: relative; overflow: hidden; cursor: crosshair; }
  .item-inner { aspect-ratio: 1; background: var(--mist); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: all 0.3s; border: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; }
  .item-card:hover .item-inner { background: var(--ink); }
  .item-card:hover .item-label { color: white; opacity: 1; }
  .item-card:hover .item-icon-wrap { transform: scale(1.1) rotate(-5deg); }
  .item-icon-wrap { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; position: relative; z-index: 1; }
  .px-grass { width: 48px; height: 48px; background: var(--grass); box-shadow: 0 4px 0 var(--dirt); }
  .px-diamond { width: 36px; height: 36px; background: var(--diamond); transform: rotate(45deg); box-shadow: inset 4px 4px 0 rgba(255,255,255,0.3); }
  .px-gold { width: 40px; height: 40px; background: var(--gold); box-shadow: inset -4px -4px 0 rgba(0,0,0,0.2), inset 4px 4px 0 rgba(255,255,255,0.3); }
  .px-redstone { width: 10px; height: 36px; background: var(--redstone); box-shadow: -8px 0 0 var(--redstone), 8px 0 0 var(--redstone), 0 -8px 0 var(--redstone); }
  .px-stone { width: 48px; height: 48px; background: var(--stone); box-shadow: inset 4px 4px 0 rgba(255,255,255,0.2), inset -4px -4px 0 rgba(0,0,0,0.2); }
  .px-obsidian { width: 48px; height: 48px; background: #2a1540; box-shadow: inset 0 0 20px rgba(160,80,255,0.4); }
  .px-sword { width: 10px; height: 44px; background: var(--diamond); position: relative; }
  .px-sword::before { content: ''; position: absolute; top: -4px; left: -14px; width: 10px; height: 10px; background: var(--dirt); }
  .px-sand { width: 48px; height: 48px; background: #f0d890; box-shadow: inset 4px 4px 0 rgba(255,255,255,0.3), inset -4px -4px 0 rgba(0,0,0,0.15); }
  .item-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); opacity: 0.5; transition: all 0.3s; position: relative; z-index: 1; }
  .item-rarity { position: absolute; top: 12px; right: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; z-index: 2; opacity: 0; transition: opacity 0.3s; }
  .item-card:hover .item-rarity { opacity: 1; }
  .rarity-common { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
  .rarity-rare { background: rgba(0,170,255,0.15); color: #00aaff; }
  .rarity-epic { background: rgba(160,80,255,0.15); color: #a050ff; }
  .rarity-legendary { background: rgba(247,201,72,0.15); color: var(--gold); }

.section-cta { background: var(--grass); padding: 80px 60px; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; overflow: hidden; }
  .section-cta::before { content: 'PLAY'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 200px; color: rgba(0,0,0,0.08); line-height: 1; pointer-events: none; letter-spacing: -0.04em; }
  .cta-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 64px); line-height: 0.9; text-transform: uppercase; color: white; letter-spacing: -0.02em; }
  .cta-actions { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }
  .btn-white { background: white; color: var(--grass); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 32px; border: none; cursor: crosshair; transition: all 0.2s; }
  .btn-white:hover { background: var(--ink); color: white; }
  .btn-outline-white { background: none; color: white; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 32px; border: 2px solid rgba(255,255,255,0.5); cursor: crosshair; transition: all 0.2s; }
  .btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); }

.modal-overlay { position: fixed; inset: 0; background: rgba(10,10,15,0.92); backdrop-filter: blur(8px); z-index: 200; display: none; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal-box { background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); width: 90%; max-width: 560px; animation: modalIn 0.3s ease; }
  @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
  .modal-header { padding: 24px 32px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; }
  .modal-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; color: white; }
  .modal-close { width: 36px; height: 36px; background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); font-family: 'IBM Plex Mono', monospace; font-size: 14px; cursor: crosshair; transition: all 0.2s; }
  .modal-close:hover { background: var(--redstone); border-color: var(--redstone); color: white; }
  .modal-body { padding: 32px; }
  .craft-area { display: flex; align-items: center; gap: 32px; margin-bottom: 32px; }
  .craft-grid-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 10px; }
  .craft-grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; }
  .craft-cell { width: 52px; height: 52px; background: #0d0d14; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
  .craft-arrow { font-size: 24px; color: rgba(255,255,255,0.2); flex-shrink: 0; }
  .craft-result-wrap { display: flex; flex-direction: column; align-items: center; }
  .craft-result-cell { width: 72px; height: 72px; background: #0d0d14; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }
  .modal-info { background: #111118; padding: 20px 24px; border: 1px solid rgba(255,255,255,0.06); }
  .modal-info-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; color: white; margin-bottom: 8px; }
  .modal-info-desc { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.7; }
  .modal-footer { padding: 24px 32px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end; gap: 12px; }
  .btn-modal { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 24px; border: none; cursor: crosshair; transition: all 0.2s; }
  .btn-modal-primary { background: var(--grass); color: white; }
  .btn-modal-primary:hover { background: var(--grass-light); }
  .btn-modal-ghost { background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }
  .btn-modal-ghost:hover { border-color: rgba(255,255,255,0.4); color: white; }

footer { background: var(--ink); padding: 80px 60px 40px; color: rgba(255,255,255,0.4); }
  .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
  .footer-brand { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 40px; text-transform: uppercase; color: white; letter-spacing: -0.02em; margin-bottom: 16px; }
  .footer-tagline { font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.8; max-width: 280px; margin-bottom: 32px; }
  .footer-col-title { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 20px; }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-links a { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: white; }
  .footer-social-row { display: flex; gap: 12px; }
  .social-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); cursor: crosshair; transition: border-color 0.2s, color 0.2s; background: none; }
  .social-btn:hover { border-color: rgba(255,255,255,0.5); color: white; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; }
  .footer-copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.hotbar { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; z-index: 100; background: rgba(10,10,15,0.85); padding: 6px; border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(12px); }
  .hotbar-slot { width: 44px; height: 44px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; cursor: crosshair; position: relative; transition: all 0.15s; }
  .hotbar-slot:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
  .hotbar-slot.selected { border-color: white; background: rgba(255,255,255,0.12); }
  .slot-num { position: absolute; top: 2px; left: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.3); line-height: 1; }
  .hs { width: 22px; height: 22px; }
  .hs-g { background: var(--grass); box-shadow: 0 2px 0 var(--dirt); }
  .hs-d { background: var(--diamond); transform: rotate(45deg); width: 16px; height: 16px; }
  .hs-gl { background: var(--gold); }
  .hs-s { background: var(--stone); }
  .hs-r { background: var(--redstone); width: 6px; height: 22px; box-shadow: -6px 0 0 var(--redstone), 6px 0 0 var(--redstone); }
  .hs-o { background: #2a1540; }
  .hs-di { background: var(--dirt); }
  .hs-sa { background: #f0d890; }
  .hs-t { width: 4px; height: 22px; background: var(--stone); transform: rotate(-30deg); position: relative; }
  .hs-t::before { content: ''; position: absolute; top: -5px; left: -5px; width: 12px; height: 9px; background: var(--stone); clip-path: polygon(0 0, 100% 0, 100% 100%); }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
    nav { padding: 0 24px; }
    .nav-links { display: none; }
    .hero { grid-template-columns: 1fr; }
    .hero-right { min-height: 400px; }
    .hero-left { padding: 48px 24px; }
    .section-about { grid-template-columns: 1fr; }
    .about-media { min-height: 360px; }
    .about-content { padding: 48px 24px; }
    .section-modes { padding: 80px 24px; }
    .modes-grid { grid-template-columns: 1fr; }
    .modes-header { flex-direction: column; align-items: flex-start; gap: 24px; }
    .modes-desc { text-align: left; }
    .section-items { padding: 80px 24px; }
    .items-grid { grid-template-columns: repeat(2, 1fr); }
    .items-header { flex-direction: column; gap: 24px; }
    .items-filter { justify-content: flex-start; max-width: none; }
    .section-cta { flex-direction: column; text-align: center; padding: 60px 24px; }
    .cta-actions { flex-direction: column; width: 100%; }
    .btn-white, .btn-outline-white { width: 100%; justify-content: center; }
    footer { padding: 60px 24px 32px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .hotbar { display: none; }
    .hero-stats { gap: 24px; }
  }
</style>
</head>
<body>

<nav>
  <a class="nav-logo" href="#">
    <div class="logo-block"><div></div><div></div><div></div><div></div></div>
    BLOCKCRAFT
  </a>
  <ul class="nav-links">
    <li><a href="#modes">Modlar</a></li>
    <li><a href="#items">Esyalar</a></li>
    <li><a href="#about">Hakkinda</a></li>
  </ul>
  <button class="nav-cta" onclick="openModal()">Oyna →</button>
</nav>

<section class="hero">
  <div class="hero-left">
    <div class="hero-tag">v1.21.4 — Guncel Surum</div>
    <h1 class="hero-title">
      HAYATTA<br>
      <span class="outline">KAL</span><br>
      <span class="accent">Insa Et.</span>
    </h1>
    <p class="hero-sub">
      Sonsuz voksel dunyasinda blok blok kendi evrenini yarat.<br>
      Hayatta kal. Kasif ol. Efsane yaz.
    </p>
    <div class="hero-actions">
      <button class="btn-primary" onclick="openModal()"><span>▶ Hemen Basla</span></button>
      <button class="btn-secondary">Sunuculari Kesfet</button>
    </div>
    <div class="hero-stats">
      <div class="stat-item"><div class="stat-num">142M+</div><div class="stat-label">Aktif Oyuncu</div></div>
      <div class="stat-item"><div class="stat-num">900+</div><div class="stat-label">Sunucu</div></div>
      <div class="stat-item"><div class="stat-num">INF</div><div class="stat-label">Dunya</div></div>
    </div>
  </div>
  <div class="hero-right">
    <div class="block-scene">
      <div class="mc-block b1 grass-block">
        <div class="face front"></div><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div>
      </div>
      <div class="mc-block b2 diamond-block">
        <div class="face front"></div><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div>
      </div>
      <div class="mc-block b3 obsidian-block">
        <div class="face front"></div><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div>
      </div>
    </div>
    <div class="hero-card top-card">
      <div class="card-label">Anlik Oyuncu</div>
      <div class="card-value">12,481</div>
    </div>
    <div class="hero-card bottom-card">
      <div class="card-label">Son Guncelleme</div>
      <div class="card-value">Tricky Trials</div>
    </div>
  </div>
</section>

<div class="ticker-wrap">
  <div class="ticker">
    <div class="ticker-item">Survival</div><div class="ticker-item">Creative</div><div class="ticker-item">Hardcore</div><div class="ticker-item">Adventure</div><div class="ticker-item">Spectator</div><div class="ticker-item">Multiplayer</div><div class="ticker-item">Modded</div><div class="ticker-item">PVP</div><div class="ticker-item">SkyBlock</div><div class="ticker-item">Parkour</div>
    <div class="ticker-item">Survival</div><div class="ticker-item">Creative</div><div class="ticker-item">Hardcore</div><div class="ticker-item">Adventure</div><div class="ticker-item">Spectator</div><div class="ticker-item">Multiplayer</div><div class="ticker-item">Modded</div><div class="ticker-item">PVP</div><div class="ticker-item">SkyBlock</div><div class="ticker-item">Parkour</div>
  </div>
</div>

<section class="section-about" id="about">
  <div class="about-media">
    <div class="biome-art"></div>
    <div class="biome-stars" id="biomeStars"></div>
    <div class="moon"></div>
    <div class="pixel-tree" style="left:60px;"><div class="tree-top2"></div><div class="tree-top"></div><div class="tree-trunk"></div></div>
    <div class="pixel-tree" style="left:190px;"><div class="tree-top2" style="width:40px;height:40px;margin-left:-12px;"></div><div class="tree-top" style="width:56px;height:56px;margin-left:-20px;"></div><div class="tree-trunk" style="width:20px;height:32px;"></div></div>
    <div class="pixel-tree" style="left:330px;"><div class="tree-top2"></div><div class="tree-top"></div><div class="tree-trunk"></div></div>
    <div class="biome-badge"><div class="bl">Aktif Biom</div><div class="bv">Taiga Ormani</div><div class="bs">Yukseklik: 128 blok</div></div>
  </div>
  <div class="about-content reveal">
    <div class="section-tag">Dunya Sistemi</div>
    <h2 class="section-title">Sonsuz<br>Olasiliklar</h2>
    <p class="section-body">Her dunya esizdir. 60 asiri biom, yuzlerce yapi, gizli zindanlar ve otesi. Her adim yeni bir macera, her blok yeni bir ani.</p>
    <ul class="feature-list">
      <li class="feature-item">
        <span class="feature-num">01</span>
        <div class="feature-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" fill="#4a7c2f"/><rect x="2" y="2" width="12" height="3" fill="#6aab41"/></svg></div>
        <span class="feature-name">Prosedural Dunya Uretimi</span>
        <span class="feature-arr">→</span>
      </li>
      <li class="feature-item">
        <span class="feature-num">02</span>
        <div class="feature-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="6" y="1" width="4" height="10" fill="#3ee8e8"/><rect x="3" y="8" width="10" height="3" fill="#7a5230"/></svg></div>
        <span class="feature-name">Dinamik Savas Sistemi</span>
        <span class="feature-arr">→</span>
      </li>
      <li class="feature-item">
        <span class="feature-num">03</span>
        <div class="feature-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="6" height="6" fill="#898989"/><rect x="9" y="1" width="6" height="6" fill="#898989"/><rect x="1" y="9" width="6" height="6" fill="#898989"/><rect x="9" y="9" width="6" height="6" fill="#898989"/></svg></div>
        <span class="feature-name">Sinirsiz Insa Alani</span>
        <span class="feature-arr">→</span>
      </li>
      <li class="feature-item">
        <span class="feature-num">04</span>
        <div class="feature-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><polygon points="8,1 15,8 8,15 1,8" fill="#a050ff" opacity="0.8"/><polygon points="8,4 12,8 8,12 4,8" fill="#d090ff"/></svg></div>
        <span class="feature-name">Buyu ve Alchemy Sistemi</span>
        <span class="feature-arr">→</span>
      </li>
    </ul>
  </div>
</section>

<section class="section-modes" id="modes">
  <div class="modes-header reveal">
    <div class="modes-title">OYUN<span class="ghost">MODLARI</span></div>
    <p class="modes-desc">Her oyuncu farkli bir yolculuk ister.<br>Insa et, hayatta kal ya da her seyi riske at — secim senin.</p>
  </div>
  <div class="modes-grid">
    <div class="mode-card survival reveal" onclick="openModal()">
      <div class="mode-glow"></div>
      <div class="mode-num">MODE — 01</div>
      <div class="mode-icon"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="4" y="4" width="28" height="28" fill="#4a7c2f"/><rect x="4" y="4" width="28" height="8" fill="#6aab41"/><rect x="4" y="4" width="8" height="28" fill="rgba(255,255,255,0.1)"/></svg></div>
      <div class="mode-name">Survival</div>
      <p class="mode-body">Kaynak topla, acligini gider, geceleri hayatta kal. Klasik Minecraft deneyimi, tam da olmasi gerektigi gibi.</p>
      <div class="mode-badge">Baslangic Dostu</div>
    </div>
    <div class="mode-card creative reveal" onclick="openModal()" style="transition-delay:0.15s">
      <div class="mode-glow"></div>
      <div class="mode-num">MODE — 02</div>
      <div class="mode-icon"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="4" y="15" width="28" height="6" fill="#f7c948"/><rect x="15" y="4" width="6" height="28" fill="#f7c948"/></svg></div>
      <div class="mode-name">Creative</div>
      <p class="mode-body">Sinirsiz blok, ucma yetenegi, olmsuzluk. Hayal gucun tek sinir — sehirler, sanatlar, makineler insa et.</p>
      <div class="mode-badge">Sinirsiz Ozgurluk</div>
    </div>
    <div class="mode-card hardcore reveal" onclick="openModal()" style="transition-delay:0.3s">
      <div class="mode-glow"></div>
      <div class="mode-num">MODE — 03</div>
      <div class="mode-icon"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="8" y="4" width="20" height="20" rx="3" fill="white" opacity="0.85"/><rect x="10" y="22" width="6" height="6" fill="white" opacity="0.85"/><rect x="20" y="22" width="6" height="6" fill="white" opacity="0.85"/><rect x="12" y="10" width="4" height="4" fill="#1a1a24"/><rect x="20" y="10" width="4" height="4" fill="#1a1a24"/></svg></div>
      <div class="mode-name">Hardcore</div>
      <p class="mode-body">Bir hayat, bir sans. Oldugunde her sey silinir. Gercek cesaret icin tasarlandi. Efsaneler burada dogar.</p>
      <div class="mode-badge">Yuksek Risk</div>
    </div>
  </div>
</section>

<section class="section-items" id="items">
  <div class="items-header">
    <h2 class="items-title reveal">Esya<br>Ansiklopedisi</h2>
    <div>
      <div class="items-filter">
        <button class="filter-btn active">Tumu</button>
        <button class="filter-btn">Bloklar</button>
        <button class="filter-btn">Silahlar</button>
        <button class="filter-btn">Madenler</button>
      </div>
    </div>
  </div>
  <div class="items-grid">
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-common">Common</div><div class="item-icon-wrap"><div class="px-grass"></div></div><div class="item-label">Cimen Blok</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-rare">Rare</div><div class="item-icon-wrap"><div class="px-diamond"></div></div><div class="item-label">Elmas</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-legendary">Legendary</div><div class="item-icon-wrap"><div class="px-gold"></div></div><div class="item-label">Altin</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-epic">Epic</div><div class="item-icon-wrap"><div class="px-redstone"></div></div><div class="item-label">Redstone</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-common">Common</div><div class="item-icon-wrap"><div class="px-stone"></div></div><div class="item-label">Tas</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-epic">Epic</div><div class="item-icon-wrap"><div class="px-obsidian"></div></div><div class="item-label">Obsidyen</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-rare">Rare</div><div class="item-icon-wrap"><div class="px-sword"></div></div><div class="item-label">Elmas Kilic</div></div></div>
    <div class="item-card" onclick="openModal()"><div class="item-inner"><div class="item-rarity rarity-common">Common</div><div class="item-icon-wrap"><div class="px-sand"></div></div><div class="item-label">Kum</div></div></div>
  </div>
</section>

<section class="section-cta">
  <div class="cta-text reveal">Maceraya<br>Hazir Misin?</div>
  <div class="cta-actions">
    <button class="btn-white" onclick="openModal()">▶ Ucretsiz Oyna</button>
    <button class="btn-outline-white">Topluluk →</button>
  </div>
</section>

<footer>
  <div class="footer-top">
    <div>
      <div class="footer-brand">BLOCKCRAFT</div>
      <p class="footer-tagline">Blok blok insa edilen efsaneler icin.<br>Her dunya bir hikaye, her oyuncu bir kahraman.</p>
      <div class="footer-social-row">
        <button class="social-btn">X</button>
        <button class="social-btn">in</button>
        <button class="social-btn">YT</button>
      </div>
    </div>
    <div>
      <div class="footer-col-title">Oyun</div>
      <ul class="footer-links"><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="footer-col-title">Topluluk</div>
      <ul class="footer-links"><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="footer-col-title">Destek</div>
      <ul class="footer-links"><li><a href="#">SSS</a></li><li><a href="#">Rehberler</a></li><li><a href="#">Gizlilik</a></li><li><a href="#">Kosullar</a></li></ul>
    </div>
  </div>
  <div class="footer-bottom">
    <span class="footer-copy">© 2026 BLOCKCRAFT. Tum haklari saklidir.</span>
    <span class="footer-copy" style="opacity:0.3;">Made with blocks</span>
  </div>
</footer>

<div class="modal-overlay" id="craftModal">
  <div class="modal-box">
    <div class="modal-header">
      <div class="modal-title">Calisma Masasi</div>
      <button class="modal-close" onclick="closeModal()">X</button>
    </div>
    <div class="modal-body">
      <div class="craft-area">
        <div>
          <div class="craft-grid-label">Malzeme Dizimi</div>
          <div class="craft-grid">
            <div class="craft-cell" style="background:#1a3a0a;border-color:rgba(74,124,47,0.3)"></div>
            <div class="craft-cell" style="background:#1a3a0a;border-color:rgba(74,124,47,0.3)"></div>
            <div class="craft-cell"></div>
            <div class="craft-cell" style="background:#1a3a0a;border-color:rgba(74,124,47,0.3)"></div>
            <div class="craft-cell" style="background:#1a3a0a;border-color:rgba(74,124,47,0.3)"></div>
            <div class="craft-cell"></div>
            <div class="craft-cell"></div><div class="craft-cell"></div><div class="craft-cell"></div>
          </div>
        </div>
        <div class="craft-arrow">→</div>
        <div class="craft-result-wrap">
          <div class="craft-grid-label">Sonuc</div>
          <div class="craft-result-cell"><div style="width:40px;height:40px;background:#8B5E3C;box-shadow:inset 4px 4px 0 rgba(255,255,255,0.15),inset -4px -4px 0 rgba(0,0,0,0.3)"></div></div>
          <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,0.3);margin-top:8px;text-align:center;">x1</div>
        </div>
      </div>
      <div class="modal-info">
        <div class="modal-info-name">Calisma Masasi</div>
        <div class="modal-info-desc">4 adet tahta planksadan uretilir. Daha karmasik esyalar uretmek icin 3x3 uretim izgrasina erisim saglar. Minecraft'in temel taslarindan biri.</div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn-modal btn-modal-ghost" onclick="closeModal()">Iptal</button>
      <button class="btn-modal btn-modal-primary" onclick="closeModal()">Envantere Ekle</button>
    </div>
  </div>
</div>

var sc = document.getElementById('biomeStars');
  for (var i = 0; i < 60; i++) {
    var s = document.createElement('div');
    s.className = 'star';
    s.style.left = Math.random() * 100 + '%';
    s.style.top = Math.random() * 100 + '%';
    s.style.animationDelay = (Math.random() * 4) + 's';
    s.style.animationDuration = (2 + Math.random() * 3) + 's';
    sc.appendChild(s);
  }

CSS