:root{
  --bg:#0f1115; --fg:#e6e6e6;
  --card:#171920; --muted:#232634;
  --accent:#9d7dff; --accent2:#5cc8ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,Arial,sans-serif}
.container{max-width:1100px;margin:auto;padding:24px 20px}
.hidden{display:none !important}

/* Navbar */
.navbar {
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:var(--card);border-bottom:1px solid var(--muted);
  position:sticky;top:0;z-index:1000;
}
.navbar__logo{font-size:20px;font-weight:700;color:var(--accent)}
.navbar__links{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.navbar__links a{color:var(--fg);text-decoration:none;padding:6px 10px;border-radius:6px;transition:.2s}
.navbar__links a:hover,.navbar__links .active{background:var(--accent2);color:#071018}
.navbar__actions{display:flex;align-items:center;gap:14px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:.2s}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-accent{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#071018}
.btn-accent:hover{filter:brightness(1.1)}

/* Hero */
.hero{min-height:100vh;background:url("images/hero.jpg") center/cover no-repeat fixed;
  display:flex;align-items:center;justify-content:center;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero__overlay{position:relative;z-index:1;text-align:center;padding:40px 24px;border-radius:16px;background:rgba(18,20,26,.45);backdrop-filter:blur(6px)}
.hero h1{font-size:34px;margin:0 0 10px;color:#c9a7ff}
.hero__sub{margin:0 0 20px;color:#cfd3dc}
.hero__stats{display:flex;gap:28px;justify-content:center;margin:22px 0 28px}
.stat{text-align:center}
.stat span{display:block;font-size:36px;font-weight:800;color:var(--accent)}
.stat small{color:#cfd3dc}

/* Features */
.features h2{color:var(--accent2);margin-bottom:14px}
.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:18px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 0 12px rgba(157,125,255,0.3)}
.card h3{color:var(--accent);margin:0 0 8px}
.features__stat{text-align:center;margin-top:18px}
.features__stat span{display:block;font-size:28px;font-weight:800;color:var(--accent)}

/* Community panels */
.community{display:grid;gap:22px}
.panel{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:18px}
.panel h2{color:var(--accent2);margin:0 0 10px}
.panel p{color:#cfd3dc}
.empty{border:1px solid #ff5959;color:#ff5959;border-radius:10px;padding:12px;text-align:center;margin:10px 0}

/* Progress bar */
.progress{height:26px;background:var(--muted);border-radius:10px;overflow:hidden}
.progress__bar{height:100%;background:var(--accent2);color:#071018;font-weight:700;text-align:center;line-height:26px}

/* Footer */
.footer{border-top:1px solid var(--muted);margin-top:10px}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:10px}
.footer__right a{color:#cfd3dc;text-decoration:none;margin-left:12px}
.footer__right a:hover{color:#fff}

/* Mağaza Hero */
.shop-hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(180deg, rgba(157,125,255,0.2), transparent);
}
.shop-hero h1 {font-size: 36px;color: var(--accent);margin-bottom: 10px;}
.shop-hero p {font-size: 18px;color: #cfd3dc;}

/* Ürün Grid */
.shop-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 20px;margin-top: 30px;}
.shop-item {background: var(--card);border: 1px solid var(--muted);border-radius: 12px;padding: 20px;text-align: center;transition: transform .2s;}
.shop-item:hover { transform: translateY(-5px); }
.shop-item h3 { margin-bottom: 8px; }
.shop-item p { font-size: 14px; color: #cfd3dc; margin-bottom: 12px; }
.shop-item .price {display:block;margin:10px 0;font-size:18px;font-weight:700;color:var(--accent2);}

/* Kategori Grid */
.category-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 20px;margin-top: 20px;}
.category-card {background: var(--card);border: 1px solid var(--muted);border-radius: 12px;padding: 30px 20px;text-align: center;transition: transform .2s, box-shadow .2s;}
.category-card:hover {transform: translateY(-5px);box-shadow: 0 0 12px rgba(157,125,255,0.4);}
.category-card h3 {font-size: 24px;color: var(--accent);margin-bottom: 10px;}
.category-card p {color: #cfd3dc;margin-bottom: 15px;}

/* Kasa isimleri renklendirme */
.kasa-demir h3 { color: #b0b0b0; }
.kasa-altin h3 { color: #ffd700; }
.kasa-elmas h3 { color: #00bfff; }
.kasa-netherite h3 { color: #8a2be2; }
.kasa-spawner h3 { color: #32cd32; }

/* Özel Reco Kasası rengarenk animasyon */
.kasa-reco h3 {
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 5s linear infinite;
  background-size: 400% 100%;
}
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Form kartı (Kayıt Ol & Profil) */
.form-card {max-width: 420px;margin: 40px auto;background: var(--card);
  border: 1px solid var(--muted);border-radius: 14px;padding: 28px;box-shadow: 0 0 18px rgba(0,0,0,0.4);}
.tabs {display:flex;margin-bottom:16px;border-bottom:1px solid var(--muted);}
.tab {flex:1;padding:10px;background:none;border:none;cursor:pointer;font-weight:600;color:#cfd3dc;transition:.2s;text-align:center;}
.tab.active {color:var(--accent);border-bottom:2px solid var(--accent);}
.form {display:flex;flex-direction:column;gap:18px}
.form label {display:flex;align-items:center;background:var(--bg);border:1px solid var(--muted);border-radius:10px;padding:8px 12px}
.form label:focus-within {border-color: var(--accent2);box-shadow: 0 0 6px rgba(92,200,255,0.6);}
.form .icon {margin-right:8px;font-size:18px;}
.form input {flex:1;border:none;background:transparent;color:.form input {
  flex:1;
  border:none;
  background:transparent;
  color:var(--fg);
  font-size:15px;
  outline:none;
}
.password-field { position:relative; }
.toggle-pass {
  background:none;
  border:none;
  cursor:pointer;
  font-size:16px;
  color:#cfd3dc;
}
.toggle-pass:hover { color:var(--accent2); }

/* Profil sayfası */
.profile-info { margin-top:20px; }
.profile-info h2 { color:var(--accent2); margin-top:0; }
.profile-info p { margin:6px 0; }
.profile-info ul { list-style:none; padding:0; margin:10px 0; }
.profile-info li {
  background: var(--card);
  border:1px solid var(--muted);
  border-radius:8px;
  padding:8px 12px;
  margin-bottom:6px;
  color:#cfd3dc;
}

/* Wiki sayfası */
.wiki { display:flex; flex-direction:column; gap:24px; }
.wiki-section {
  background:var(--card);
  border:1px solid var(--muted);
  border-radius:12px;
  padding:20px;
}
.wiki-section h2 { color:var(--accent2); margin-top:0; }
.wiki-section p { color:#cfd3dc; }