:root{
  --bg:#0b0f14; --panel:#121822; --muted:#9bb0c3; --text:#e9f1f7; --pri:#29b6f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--pri);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand img{height:50px}
.btn{background:var(--pri);color:#00121e;border:0;border-radius:999px;padding:10px 16px;font-weight:600;box-shadow:var(--shadow);cursor:pointer}
.btn.secondary{background:#1f2937;color:#cfe6f6}
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.hero{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center;margin:10px 0 28px}
.hero h1{font-size:36px;line-height:1.2;margin:0}
.hero p{color:var(--muted);margin:0}
.input, input[type=email],input[type=password],input[type=text],select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #223246;background:#0f141d;color:var(--text);
}
.label{display:block;margin:8px 0 6px;color:#b7c6d8;font-size:14px}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:#9db2c5;text-align:left;font-weight:600;padding:0 10px}
.table td{background:var(--panel);padding:12px;border-top-left-radius:10px;border-bottom-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px}
.badge{display:inline-block;background:#1f2937;color:#cfe6f6;padding:3px 8px;border-radius:999px;font-size:12px}
.note{color:#9bb0c3;font-size:14px}
.footer{margin:40px 0 10px;color:#8aa0b5;text-align:center;font-size:14px}
.msg{padding:10px 12px;border-radius:10px;background:#12212e;color:#9ed1ff;margin:8px 0}
.err{background:#2a1114;color:#ffb4b4}
.uc{display:grid;place-items:center;min-height:45vh}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 8px 0;
}

.brand img {
  height: 32px;
}

/* Yuvarlak buton stili */
.btn {
  padding: 8px 16px;
  border-radius: 999px; /* tam yuvarlak */
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn.secondary {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
}

.btn.primary {
  background: #2196f3;
  color: #fff;
  font-weight: bold;
}

.btn:hover {
  opacity: 0.9;
}

.user-info {
  font-size: 12px;
  color: #aaa;
  margin-right: 6px;
  white-space: nowrap;
}

/* Hamburger menü */
.hamburger {
  display: none;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}

/* Normalde linkler görünür */
.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Mobil görünüm */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    right: 10px;
    background: #111;
    padding: 12px;
    border-radius: 8px;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
  }

  body.nav-open .nav-links {
    display: flex;
  }
}



/* ============================
   Trends Table Styles
   ============================ */
th {
  cursor: pointer;
  background-color: #3d4e87;
  color: #dcdfe0;
}

th, td {
  text-align: left;
  font-size: 15px;
  padding: 6px;
}

tr:nth-child(even) {
  background-color: #45474a;
}

/* Durum renklendirmeleri */
td.acikyesil {
  background-color: #536353;
}
td.mavi {
  background-color: #566bf0;
  color: #fff;
}
td.kirmizi {
  background-color: #e04368;
  color: #fff;
}
td.yesil {
  background-color: #06c70c;
  color: #fff;
}

/* Metin stilleri */
p.smaller {
  font-size: 15px;
  color: #FFFFFF;
}
p.darkred {
  color: #CB446B;
}

span.grey {

  color: #4a4946;
}


span.darkred {
  color: #CB446B;
}

p,span.blue {
  color:#0066cc;
}

/* Timeframe linkleri */
a.periodlink {
  color:#1d43cf;
  text-decoration: none;
}
a.periodlinkactive: {
  color:#CB446B;
  text-decoration: none;
}
a.periodlink:hover {
  color:#1d43cf;
  text-decoration: underline;
}

.highlight {
  color: #bfb830;
  transition: color 0.1s ease;
}