:root {
  --bg: #0b0b10;
  --panel: #161622;
  --ink: #ffffff;
  --muted: #a0a0b0;
  --pink: #FF4D8D;
  --purple: #7B5CFA;
  --lime: #AEEA3C;
  --yellow: #FFCD3C;
  --blue: #3EC1FF;
  --orange: #FF7A3D;
  --shadow-ink: 5px 5px 0 #000000;
  --shadow-ink-sm: 3px 3px 0 #000000;
  --radius: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* =========================================================================
   NEON ALTIGEN (HEXAGON) SİBERPUNK ARKA PLAN
   ========================================================================= */
body {
  background-color: #0b0b10;
  /* Altıgen (Hexagon) Dokusu - CSS Gradyanları ile Üretilmiştir */
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(30deg, #0f0f17 12%, transparent 12.5%, transparent 87%, #0f0f17 87.5%, #0f0f17),
    linear-gradient(150deg, #0f0f17 12%, transparent 12.5%, transparent 87%, #0f0f17 87.5%, #0f0f17),
    linear-gradient(30deg, #0f0f17 12%, transparent 12.5%, transparent 87%, #0f0f17 87.5%, #0f0f17),
    linear-gradient(150deg, #0f0f17 12%, transparent 12.5%, transparent 87%, #0f0f17 87.5%, #0f0f17);
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  position: relative;
  overflow-x: hidden;
}

/* Arka plandaki rengarenk parlayan neon noktalar (Glow Efekti) */
.neon-dots-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; /* İçeriklerin arkasında kalır */
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(255, 0, 128, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 85% 15%, rgba(0, 255, 128, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 45% 40%, rgba(0, 191, 255, 0.7) 3px, transparent 5px),
    radial-gradient(circle at 75% 65%, rgba(255, 215, 0, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 25% 80%, rgba(138, 43, 226, 0.7) 3px, transparent 5px),
    radial-gradient(circle at 90% 90%, rgba(255, 69, 0, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 10% 60%, rgba(50, 205, 50, 0.7) 2px, transparent 4px);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.6));
}

::selection{ background:var(--lime); color:var(--bg); }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
.mono{ font-family:'Space Mono', monospace; }
.display{ font-family:'Fredoka', sans-serif; }
.hidden{ display:none !important; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }

/* ---------- decorative blobs ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(0px); z-index:0; }

/* ---------- Navbar ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11, 11, 16, 0.85);
  backdrop-filter:blur(8px);
  border-bottom:3px solid rgba(255,255,255,0.1);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:8px; }
.brand-mark{
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:22px;
  background:var(--lime); color:var(--bg);
  padding:6px 14px; border-radius:10px;
  transform:rotate(-2deg);
  box-shadow:var(--shadow-ink-sm);
}
.brand-emoji{ font-size:22px; }
nav.links{ display:flex; align-items:center; gap:2px; }
nav.links button.navlink{
  background:none; border:none; cursor:pointer;
  color:#fff; font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:15px; padding:10px 16px; border-radius:999px; transition:all .15s ease;
}
nav.links button.navlink:hover{ background:rgba(255,215,0,0.2); color:var(--yellow); }
nav.links button.navlink.active{ background:var(--lime); color:var(--bg); }
.nav-right{ display:flex; align-items:center; gap:10px; }

.btn{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
  cursor:pointer; border-radius:999px; padding:10px 18px;
  border:2.5px solid rgba(255,255,255,0.2); background:var(--panel); color:#fff;
  box-shadow:var(--shadow-ink-sm); transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(255,255,255,0.2); }
.btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(255,255,255,0.2); }
.btn.primary{ background:var(--lime); color:var(--bg); border-color:var(--lime); }
.btn.pink{ background:var(--pink); color:#fff; border-color:var(--pink); }
.btn.danger{ background:var(--panel); color:#FF4D4D; border-color:#FF4D4D; box-shadow:3px 3px 0 #FF4D4D; }
.btn.danger:hover{ box-shadow:5px 5px 0 #FF4D4D; }
.btn.small{ padding:6px 12px; font-size:12px; box-shadow:2px 2px 0 rgba(255,255,255,0.2); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:70px 0 50px; overflow:hidden; }
.hero .blob.b1{ width:260px; height:260px; background:var(--lime); top:-80px; right:6%; opacity:.2; filter: blur(50px); }
.hero .blob.b2{ width:180px; height:180px; background:var(--pink); bottom:-40px; left:2%; opacity:.2; filter: blur(50px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Fredoka', sans-serif; font-size:13px; font-weight:600;
  background:var(--purple); color:#fff; padding:8px 16px; border-radius:999px;
  border:2.5px solid rgba(255,255,255,0.2); box-shadow:var(--shadow-ink-sm);
  margin-bottom:22px; position:relative; z-index:1;
}
.hero h1{
  position:relative; z-index:1;
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size:clamp(36px, 6vw, 64px); line-height:1.05;
  max-width:780px; color:#fff;
}
.hero h1 .hl{
  background:var(--lime); color:var(--bg); padding:0 10px; border-radius:8px;
  box-shadow:var(--shadow-ink-sm); display:inline-block; transform:rotate(-1deg);
}
.hero p.lead{ position:relative; z-index:1; margin-top:20px; max-width:520px; color:var(--muted); font-size:17px; font-weight:600; }
.hero-cta{ position:relative; z-index:1; display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* ---------- Sections ---------- */
section.page{ padding:60px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.section-head h2{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:32px; color:#fff; }
.section-head .sub{ color:var(--muted); font-size:14px; font-weight:700; margin-top:4px; }

/* ---------- Cards: Haberler ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:22px; }
.card{
  background:var(--panel); border:2.5px solid rgba(255,255,255,0.1); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translate(-3px,-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.6); }
.card .media{ aspect-ratio:16/10; background:#0f0f17; overflow:hidden; position:relative; border-bottom:2.5px solid rgba(255,255,255,0.1); }
.card .media img, .card .media video{ width:100%; height:100%; object-fit:cover; }
.card .media .placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:'Space Mono', monospace; font-size:12px; }
.card .body{ padding:18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.tagpill{
  align-self:flex-start; font-family:'Fredoka', sans-serif; font-weight:600; font-size:11.5px;
  padding:5px 12px; border-radius:999px; border:2px solid rgba(255,255,255,0.1); text-transform:uppercase;
}
.card h3{ font-family:'Fredoka', sans-serif; font-size:19px; font-weight:600; line-height:1.25; color:#fff; }
.card p{ color:var(--muted); font-size:14px; font-weight:600; flex:1; }
.card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; font-size:12px; color:var(--muted); font-family:'Space Mono', monospace; }
.card .admin-row{ display:flex; gap:8px; margin-top:8px; }

/* tag colors */
.card:nth-of-type(6n+1) .tagpill{ background:var(--pink); color:#fff; }
.card:nth-of-type(6n+2) .tagpill{ background:var(--lime); color:var(--bg); }
.card:nth-of-type(6n+3) .tagpill{ background:var(--blue); color:var(--bg); }
.card:nth-of-type(6n+4) .tagpill{ background:var(--yellow); color:var(--bg); }
.card:nth-of-type(6n+5) .tagpill{ background:var(--purple); color:#fff; }
.card:nth-of-type(6n+6) .tagpill{ background:var(--orange); color:#fff; }

/* ---------- Oyuncular ---------- */
.player-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:20px; }
.player-card{
  background:var(--panel); border:2.5px solid rgba(255,255,255,0.1); border-radius:var(--radius);
  padding:18px; text-align:left; box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  transition:transform .15s ease, box-shadow .15s ease;
  word-break: break-word;     /* Uzun kelimeleri ve metinleri aşağı kaydırır */
  overflow: hidden;
}
.player-card .prank{ 
  color:var(--muted); font-size:13px; font-weight:600; margin-top:8px; 
  word-break: break-word;     
  overflow-wrap: break-word; 
}
.player-card:hover{ transform:translate(-2px,-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.6); }
.player-avatar{
  width:64px; height:64px; border-radius:14px; background:var(--lime);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:'Fredoka', sans-serif; font-weight:700; color:var(--bg); font-size:22px;
  border:2px solid rgba(0,0,0,0.3);
}
.player-avatar img{ width:100%; height:100%; object-fit:cover; }
.player-card .pname{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:17px; margin-top:12px; color:#fff; }
.player-card .prole{ color:var(--blue); font-size:12.5px; font-weight:700; margin-top:2px; }
.player-card .prank{ color:var(--muted); font-size:13px; font-weight:600; margin-top:8px; }
.player-card .admin-row{ margin-top:12px; }

/* ---------- Forum ---------- */
.forum-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.thread{ background:var(--panel); border:2.5px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:16px 18px; box-shadow: 0 6px 15px rgba(0,0,0,0.4); }
.thread .author{ font-family:'Fredoka', sans-serif; font-weight:600; color:var(--pink); font-size:14px; }
.thread .when{ font-family:'Space Mono', monospace; font-size:11px; color:var(--muted); margin-left:8px; }
.thread p{ margin-top:8px; font-size:14.5px; font-weight:600; color:#fff; }
.forum-form{ background:var(--panel); border:2.5px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:20px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.forum-form .row{ display:flex; gap:10px; margin-bottom:10px; }

/* ---------- Forms ---------- */
input, textarea, select{
  width:100%; background:#101018; border:2px solid rgba(255,255,255,0.15); color:#fff;
  border-radius:12px; padding:11px 14px; font-family:'Nunito', sans-serif; font-weight:700; font-size:14px;
  outline:none; transition: border-color .2s;
}
input:focus, textarea:focus{ border-color:var(--lime); box-shadow:0 0 10px rgba(174,234,60,0.2); }
label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; font-family:'Fredoka', sans-serif; font-weight:600; display:block; margin-bottom:6px; }
.field{ margin-bottom:14px; }
textarea{ resize:vertical; min-height:80px; }

.file-drop{
  border:2px dashed rgba(255,255,255,0.2); border-radius:14px; padding:18px; text-align:center;
  cursor:pointer; color:var(--muted); font-weight:700; font-size:13px; transition:all .15s ease;
  background:#101018;
}
.file-drop:hover{ border-color:var(--yellow); color:var(--yellow); }
.file-drop input{ display:none; }
.file-preview{ margin-top:10px; }
.file-preview img, .file-preview video{ max-height:160px; border-radius:10px; border:2px solid rgba(255,255,255,0.2); }

/* ---------- Footer ---------- */
footer{ padding:34px 0; border-top:3px solid rgba(255,255,255,0.1); margin-top:20px; background:rgba(11,11,16,0.9); }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
footer .fmuted{ color:var(--muted); font-size:12.5px; font-weight:700; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,10,15,0.8); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{ background:var(--panel); border:2.5px solid rgba(255,255,255,0.15); border-radius:var(--radius); width:100%; max-width:380px; padding:26px; box-shadow: 0 15px 35px rgba(0,0,0,0.6); color:#fff; }
.modal h3{ font-family:'Fredoka', sans-serif; font-size:22px; margin-bottom:6px; color:#fff; }
.modal .sub{ color:var(--muted); font-size:13px; font-weight:700; margin-bottom:18px; }
.modal-actions{ display:flex; gap:10px; margin-top:16px; }
.close-x{ float:right; background:var(--pink); color:#fff; border:2px solid rgba(255,255,255,0.2); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; }

.admin-bar{ background:var(--lime); border-bottom:3px solid rgba(0,0,0,0.3); color:var(--bg); }
.admin-bar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:9px 24px; }
.admin-bar .tag{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:13px; }

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--panel); border:2.5px solid var(--lime);
  color:#fff; padding:13px 20px; border-radius:14px; font-weight:700; font-size:13.5px; z-index:200;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6); max-width:320px;
}

.empty-state{ color:var(--muted); font-weight:700; font-size:14px; padding:26px; border:2.5px dashed rgba(255,255,255,0.15); border-radius:var(--radius); text-align:center; }

/* ---------- Tabs & Admin ---------- */
.tab-switch{ display:flex; gap:8px; margin-bottom:18px; }
.tab-btn{
  flex:1; font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px;
  padding:9px 10px; border-radius:10px; border:2px solid rgba(255,255,255,0.15);
  background:#101018; cursor:pointer; color:#fff;
}
.tab-btn.active{ background:var(--lime); color:var(--bg); border-color:var(--lime); }
.member-greet{
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:13.5px;
  padding:9px 4px; color:var(--blue);
}

@media (max-width:760px){ nav.links{ display:none; } }