:root{
  --bg:#0b0e1a; --bg2:#121830; --card:#161d38; --line:#28325c;
  --text:#eef1fa; --muted:#93a0c2; --accent:#6d5cff; --accent2:#4f8cff;
  --green:#2de08e; --red:#ff5d6c; --amber:#ffb648;
  --mor:#a855f7; --pembe:#ff5c8a; --cam:#22d3ee; --turuncu:#fb923c;
  --grad:linear-gradient(135deg,#6d5cff,#4f8cff);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.center{text-align:center}
.right{text-align:right}

/* nav */
.nav{background:var(--bg2); border-bottom:1px solid var(--line)}
.nav-inner{max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{font-size:19px; font-weight:700; color:var(--text)}
.brand span{color:var(--accent)}
.brand:hover{text-decoration:none}
.nav-links{display:flex; align-items:center; gap:16px}
.nav-links a{color:var(--text)}
.nav-user{color:var(--muted)}

/* layout */
.container{max-width:1100px; margin:0 auto; padding:24px 20px; width:100%; flex:1}
.page-head{margin-bottom:18px}
.page-head h1{margin:0 0 2px; font-size:24px}
.page-head p{margin:0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
@media(max-width:800px){.grid{grid-template-columns:1fr}}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:18px}
.card h2{margin:0 0 12px; font-size:17px}
.auth-card{max-width:440px; margin:40px auto}
.auth-card h1{margin:0 0 4px; font-size:22px}

/* forms */
label{display:block; margin:12px 0 0; font-size:13.5px; color:var(--muted)}
input,select{
  width:100%; margin-top:5px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg2); color:var(--text); font-size:14.5px;
}
input:focus,select:focus{outline:none; border-color:var(--accent)}
input[readonly]{color:var(--muted)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

/* buttons */
.btn{
  display:inline-block; margin-top:14px; padding:10px 18px; border-radius:9px; border:0;
  background:var(--grad); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(109,92,255,.35); text-decoration:none}
.btn-block{width:100%}
.btn-danger{background:#a83a38}
.btn-danger:hover{background:#8f2f2d}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn-ghost:hover{background:var(--bg2)}
.btn-sm{padding:6px 11px; font-size:13px; margin-top:0}

/* alerts & badges */
.alert{padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:14px; border:1px solid}
.alert.ok{background:#10241c; border-color:#1d5c41; color:#7fe0b2}
.alert.err{background:#2a1414; border-color:#6e2b2a; color:#ffb0ae}
.alert.test{background:#2a2110; border-color:#6e5321; color:#f0c988}
.badge{display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600}
.badge.ok{background:#10241c; color:#4ade9a}
.badge.err{background:#2a1414; color:#ff8a87}
.badge.skip{background:#1c2233; color:#9aa6c0}
.badge.test{background:#2a2110; color:#eebf72}
.badge.long{background:#10241c; color:#4ade9a}
.badge.short{background:#2a1414; color:#ff8a87}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em}
th,td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
tr:last-child td{border-bottom:0}
td.right,th.right{text-align:right}
.actions{white-space:nowrap}
.actions form{display:inline-block; margin-left:6px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; border-top:3px solid var(--accent)}
.stat:nth-child(2){border-top-color:var(--cam)}
.stat:nth-child(3){border-top-color:var(--green)}
.stat:nth-child(4){border-top-color:var(--pembe)}
.stat-n{font-size:26px; font-weight:700}
.stat-l{color:var(--muted); font-size:13px; margin-top:2px}

/* canlı nokta + animasyonlar */
.canli-nokta{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--green); margin-right:4px; vertical-align:middle;
  animation:nabiz 1.6s ease-out infinite;
}
.canli-nokta.kucuk{width:7px; height:7px}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(34,192,122,.55)}
  70%{box-shadow:0 0 0 9px rgba(34,192,122,0)}
  100%{box-shadow:0 0 0 0 rgba(34,192,122,0)}
}
@keyframes satir-parla{
  0%{background:rgba(79,140,255,.28)}
  100%{background:transparent}
}
.yeni-satir td{animation:satir-parla 2.5s ease-out}
.small-n{font-size:15px !important; line-height:26px}

/* vitrin (landing) */
.hero{text-align:center; padding:52px 10px 40px}
.hero-canli{
  display:inline-block; padding:6px 14px; border-radius:99px; font-size:13px;
  background:var(--bg2); border:1px solid var(--line); color:var(--muted); margin-bottom:22px;
}
.hero h1{font-size:44px; line-height:1.12; margin:0 0 18px}
@media(max-width:600px){.hero h1{font-size:32px}}
.grad{
  background:linear-gradient(90deg,#4f8cff,#22c07a,#4f8cff);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:grad-kay 5s linear infinite;
}
@keyframes grad-kay{to{background-position:200% center}}
.hero-alt{max-width:640px; margin:0 auto 26px; color:var(--muted); font-size:16.5px}
.hero-btnler{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn-buyuk{padding:14px 26px; font-size:16px}
.hero-borsalar{margin-top:22px; font-size:13.5px}

.adimlar{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0}
@media(max-width:800px){.adimlar{grid-template-columns:1fr}}
.adim{text-align:center; transition:transform .2s}
.adim:hover{transform:translateY(-4px)}
.adim-no{
  width:40px; height:40px; border-radius:50%; margin:0 auto 10px;
  background:linear-gradient(135deg,var(--accent),#2e5fc0); color:#fff;
  font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center;
}

.paketler{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:20px 0 30px}
.paket{text-align:center; position:relative; transition:transform .2s, border-color .2s}
.paket:hover{transform:translateY(-5px); border-color:var(--accent)}
.paket.populer{border-color:var(--accent); box-shadow:0 0 22px rgba(79,140,255,.18); padding-top:30px}
.paket-etiket{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  padding:3px 11px; border-radius:99px; letter-spacing:.05em;
}
.paket-ad{font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.paket-fiyat{font-size:34px; font-weight:800; margin:8px 0 2px}
.paket-fiyat span{font-size:14px; font-weight:500; color:var(--muted)}
.paket-limit{font-size:13px; margin-bottom:12px}
.paket-liste{list-style:none; padding:0; margin:0 0 6px; text-align:left; font-size:13.5px}
.paket-liste li{padding:5px 0 5px 22px; position:relative; color:var(--muted)}
.paket-liste li::before{content:"✓"; position:absolute; left:2px; color:var(--green); font-weight:700}
.sss p{margin:14px 0}

/* network ağacı (org-chart) */
.agac{overflow-x:auto; padding:12px 4px 4px}
.agac ul{display:flex; justify-content:center; list-style:none; margin:0; padding:22px 0 0; position:relative}
.agac ul.agac-kok{padding-top:0}
.agac li{position:relative; padding:22px 10px 0; text-align:center}
.agac ul.agac-kok > li{padding-top:0}
/* bağlantı çizgileri */
.agac li::before, .agac li::after{
  content:""; position:absolute; top:0; width:50%; height:22px;
  border-top:2px solid var(--line);
}
.agac li::before{left:-1px; border-right:2px solid var(--line)}
.agac li::after{right:-1px}
.agac li:only-child::before{border-right:2px solid var(--line); border-top:0; left:50%; width:0}
.agac li:only-child::after{display:none}
.agac li:first-child::before{border-top:0}
.agac li:last-child::after{border-top:0}
.agac ul.agac-kok > li::before, .agac ul.agac-kok > li::after{display:none}
.agac ul::before{
  content:""; position:absolute; top:0; left:50%; width:0; height:22px;
  border-left:2px solid var(--line);
}
.agac ul.agac-kok::before{display:none}
/* düğümler */
.dugum{
  display:inline-block; position:relative; padding:7px 16px 7px 12px; border-radius:99px;
  font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.dugum.kok{background:var(--grad); font-size:14.5px; padding:9px 20px}
.dugum.sv1{background:linear-gradient(135deg,#4f8cff,#22d3ee)}
.dugum.sv2{background:linear-gradient(135deg,#a855f7,#6d5cff)}
.dugum.sv3{background:linear-gradient(135deg,#ff5c8a,#a855f7)}
.dugum.sv4{background:linear-gradient(135deg,#fb923c,#ff5c8a)}
.dugum-nokta{
  position:absolute; top:-3px; right:-3px; width:11px; height:11px;
  border-radius:50%; border:2px solid var(--bg);
}
.dugum-nokta.aktif{background:var(--green)}
.dugum-nokta.pasif{background:#6b7280}

/* misc */
.hint{margin-top:14px; padding:11px 13px; border-radius:10px; background:var(--bg2); border:1px solid var(--line); color:var(--muted); font-size:13px}
pre{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px; overflow-x:auto}
details summary{cursor:pointer; color:var(--accent); margin-top:10px}
code{background:var(--bg2); padding:2px 6px; border-radius:6px; font-size:13px}
.footer{text-align:center; color:var(--muted); font-size:12.5px; padding:18px; border-top:1px solid var(--line); margin-top:24px}