:root{
 --bg:#030507;--panel:#071018;--cyan:#00d9ff;--blue:#3d8bff;--green:#00ff9c;
 --violet:#9b6bff;--magenta:#ff4fa3;--amber:#ffb830;--text:#eaf8ff;--muted:#78909c;
 --line:rgba(0,217,255,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
 font-family:Segoe UI,Arial,sans-serif;color:var(--text);min-height:100vh;overflow-x:hidden;
 background:
  radial-gradient(circle at 50% -10%,rgba(0,217,255,.13),transparent 35%),
  radial-gradient(circle at 92% 28%,rgba(155,107,255,.14),transparent 32%),
  radial-gradient(circle at 6% 72%,rgba(255,79,163,.09),transparent 30%),
  linear-gradient(180deg,#020406,#050b10 55%,#020406);
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:-1;
 background-image:linear-gradient(rgba(0,217,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.08) 1px,transparent 1px);
 background-size:50px 50px;mask-image:linear-gradient(to bottom,black,transparent 90%);
}
a{color:var(--cyan)}
nav{
 position:fixed;top:10px;left:3%;right:3%;height:58px;z-index:100;padding:0 26px;border-radius:99px;
 display:flex;align-items:center;justify-content:space-between;
 background:rgba(3,7,10,.72);backdrop-filter:blur(14px);border:1px solid rgba(0,217,255,.2);
}
.logo{font-weight:700;letter-spacing:4px;text-decoration:none;background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{color:#9db3bd;text-decoration:none;font-size:13px;transition:.25s}
nav ul a:hover,nav ul a.on{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
@media(max-width:650px){nav{padding:0 18px}.logo{font-size:13px;letter-spacing:2px}nav ul{gap:16px}nav ul .hm{display:none}}
main{width:min(1100px,90%);margin:auto;padding:120px 0 60px}
.section-head{margin-bottom:30px}
.section-head .tag{font:11px Consolas,monospace;color:var(--magenta);letter-spacing:3px}
.section-head h1{font-size:clamp(34px,5vw,48px);margin-top:8px;letter-spacing:-1px}
.lead{color:#91a6b0;line-height:1.7;max-width:640px;margin-top:12px;font-size:16px}
.btn{
 display:inline-block;padding:13px 20px;border:1px solid var(--cyan);color:var(--cyan);border-radius:12px;cursor:pointer;
 text-decoration:none;font:600 12px Segoe UI,Arial,sans-serif;letter-spacing:1px;background:rgba(0,217,255,.05);transition:.25s
}
.btn:hover{background:linear-gradient(90deg,var(--cyan),var(--violet));border-color:transparent;color:#fff;box-shadow:0 0 28px rgba(155,107,255,.4)}
.btn.alt{border-color:#38515c;color:#b5c8cf}
.btn.danger{border-color:#7a3340;color:#ff8a98}
.btn.danger:hover{background:#c0392b;border-color:transparent;color:#fff;box-shadow:none}
.btn.sm{padding:8px 13px;font-size:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.panel{border:1px solid var(--line);background:rgba(5,12,17,.8);padding:28px;position:relative;border-radius:20px}
.panel:before{content:"";position:absolute;left:0;top:0;width:35px;height:1px;background:var(--cyan);box-shadow:0 0 15px var(--cyan)}
.panel h3{font-size:18px;margin-bottom:6px}
.hint{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font:11px Consolas,monospace;letter-spacing:2px;color:var(--cyan);margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password],.field textarea{
 width:100%;background:#020608;border:1px solid #1d3440;color:var(--text);padding:12px 14px;border-radius:12px;
 font:15px Segoe UI,Arial,sans-serif;outline:none;transition:.2s
}
.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,217,255,.18)}
.field textarea{min-height:130px;resize:vertical}
.form-note{margin-top:14px;font:12px Consolas,monospace;color:var(--green);min-height:16px}
.form-note.err{color:#ff6b6b}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
footer{border-top:1px solid rgba(0,217,255,.12);padding:30px 7%;color:#536770;font-size:12px;text-align:center}
footer a{color:#6b8a96;text-decoration:none}

/* BLOG LİSTESİ */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post-card{
 --ac:var(--cyan);--acr:0,217,255;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden;
 border:1px solid rgba(var(--acr),.22);border-radius:20px;transition:.3s;
 background:radial-gradient(320px 140px at 0 0,rgba(var(--acr),.12),transparent 70%),linear-gradient(145deg,rgba(10,21,29,.92),rgba(4,10,14,.92));
}
.post-card:nth-child(6n+2){--ac:var(--violet);--acr:155,107,255}
.post-card:nth-child(6n+3){--ac:var(--magenta);--acr:255,79,163}
.post-card:nth-child(6n+4){--ac:var(--amber);--acr:255,184,48}
.post-card:nth-child(6n+5){--ac:var(--green);--acr:0,255,156}
.post-card:nth-child(6n+6){--ac:var(--blue);--acr:61,139,255}
.post-card:hover{transform:translateY(-5px);border-color:rgba(var(--acr),.65);box-shadow:0 14px 44px rgba(var(--acr),.18)}
.post-card .cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#071018}
.post-card .noimg{aspect-ratio:16/9;display:grid;place-items:center;font:700 34px Consolas,monospace;color:var(--ac);text-shadow:0 0 18px var(--ac);background:rgba(var(--acr),.06)}
.post-card .pc-body{padding:20px 22px 24px}
.post-card h3{font-size:19px;line-height:1.35;margin:6px 0 10px}
.post-card p{color:var(--muted);font-size:14px;line-height:1.65}
.post-card .more{display:inline-block;margin-top:14px;font:12px Consolas,monospace;letter-spacing:1px;color:var(--ac)}
.date{font:11px Consolas,monospace;color:var(--muted);letter-spacing:1px}
.empty{color:var(--muted);padding:30px 0}

/* YAZI */
.article{max-width:760px;margin:auto}
.article h1{font-size:clamp(30px,5vw,46px);line-height:1.15;letter-spacing:-1px;margin:10px 0 24px}
.article .big{width:100%;border-radius:20px;border:1px solid var(--line);margin-bottom:28px;display:block;max-height:460px;object-fit:cover}
.story p{font-size:18px;line-height:1.9;color:#c5d6dd;margin:0 0 1.25em}
.back{display:inline-block;margin-bottom:22px;font:12px Consolas,monospace;letter-spacing:1px;text-decoration:none}
.comments{margin-top:50px}
.comments h2{font-size:22px;margin-bottom:18px}
.cm{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;background:rgba(5,12,17,.8)}
.cm b{color:var(--cyan)}.cm small{color:var(--muted);margin-left:8px;font:11px Consolas,monospace}
.cm p{margin-top:6px;line-height:1.65;color:#b5c8cf;white-space:pre-line;word-break:break-word}
.cform{margin-top:24px}