:root {
  --bg: #07090b;
  --bg-soft: #111417;
  --bg-panel: #0d1115;
  --panel: rgba(16, 18, 20, 0.96);
  --panel-strong: #101315;
  --card: #12171b;
  --text: #f4efe6;
  --muted: #a9a29a;
  --line: rgba(212, 175, 102, 0.14);
  --primary: #d4af68;
  --primary-2: #f4d7a6;
  --accent: #8d6a2d;
  --danger: #ff6b6b;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.52);

  /* ==================================================================
     ORTAK YAZI ÖLÇEĞİ (TEK KAYNAK)
     ==================================================================
     "Bütün açılan sayfalarda aynı noktada olan yazılar aynı boyutta
     olsun" kuralı bu değişkenlerle sağlanır: sayfa başlığı, başlık üstü
     etiket, başlık altı açıklama, panel başlığı/alt yazısı/rozeti ve
     durum satırı yalnızca BURADAN beslenir.
     Sayfa ve panel başlıkları aynı ölçüyü paylaşır; böylece başlık konumu
     her sayfada birebir aynı görünür. Destek merkezi gövdesi AYRI bir dev
     ölçüye sabitlenmez; kendi .sup-* ölçülerini kullanır ve diğer panellerle
     aynı görünür. */
  --font-page-title: 1.54rem;   /* sayfa başlığı (h2) — 24.6px */
  --font-panel-title: 1.54rem;  /* panel başlığı — 24.6px */
  --font-page-eyebrow: 0.72rem; /* başlık üstü küçük etiket */
  --font-page-note: 0.88rem;    /* başlık altı açıklama */
  --font-page-status: 0.74rem;  /* panel alt durum satırı */
  --font-panel-sub: 0.72rem;    /* panel alt açıklaması */
  --font-panel-badge: 0.68rem;  /* durum rozeti */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at top, rgba(212, 175, 104, 0.08), transparent 18%),
    linear-gradient(180deg, #050709 0%, #090b0d 100%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

body::before {
  top: -10%;
  left: -6%;
  background: radial-gradient(circle, rgba(212, 175, 104, 0.7), transparent 65%);
}

body::after {
  right: -8%;
  bottom: -10%;
  background: radial-gradient(circle, rgba(212, 175, 104, 0.5), transparent 70%);
}

main,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin: 0 auto;
}

.section-spacing {
  padding: 110px 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(7, 9, 11, 0.96);
  border-bottom: 1px solid rgba(212, 175, 104, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 104, 0.8), transparent);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding-left: 8px;
  min-width: 220px;
  margin-right: 0;
  flex-shrink: 0;
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0c0f12, #14181d);
  border: 1px solid rgba(212, 175, 104, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 12px 24px rgba(0,0,0,0.24);
}

.brand-mark::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 9px;
  width: 6px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f3dba5, #d4af68 55%, #8f6a2d 100%);
  box-shadow: 0 0 12px rgba(212, 175, 104, 0.18);
}

.brand-mark::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 9px;
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3dba5, #d4af68 58%, #8f6a2d);
  box-shadow: 0 0 12px rgba(212, 175, 104, 0.18);
}

.brand-text {
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f7efe3;
  font-weight: 600;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 32px;
  color: rgba(232, 228, 222, 0.8);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px;
  font-family: Georgia, "Times New Roman", serif;
}

.main-nav a {
  position: relative;
  transition: color 0.25s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,104,0.9), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--text);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;
}

.nav-button,
.primary-btn,
.secondary-btn,
.nav-secondary-btn,
.nav-link-btn {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.5rem;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.login-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.login-overlay.is-open {
  display: flex;
}

.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 5, 0.88);
  backdrop-filter: blur(8px);
}

.login-panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 30px 28px 24px;
  border-radius: 28px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.98), rgba(7, 8, 10, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.02);
  overflow-y: auto;
  scrollbar-width: thin;
}

.login-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(212, 175, 104, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.login-state {
  display: none;
}

.login-state.is-visible {
  display: block;
}

.login-form-state,
.login-register-state,
.login-loading-state,
.login-success-state {
  width: 100%;
}

.login-loading-state,
.login-success-state {
  text-align: center;
}

.loading-spinner {
  width: 52px;
  height: 52px;
  margin: 6px auto 20px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 104, 0.18);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-header {
  margin-bottom: 24px;
}

.login-header .eyebrow {
  margin-bottom: 8px;
}

.login-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.login-slogan {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(212, 175, 104, 0.18);
  border-radius: 12px;
  background: rgba(212, 175, 104, 0.04);
  color: var(--primary-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-form label {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  border: 1px solid rgba(212, 175, 104, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0.95rem 1rem;
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form input:focus {
  border-color: rgba(212, 175, 104, 0.7);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.12);
}

.login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.76rem;
}

.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.remember-me input {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
}

.login-meta a {
  color: var(--primary-2);
}

.login-submit {
  width: 100%;
  margin-top: 8px;
}

.login-secondary-btn {
  width: 100%;
  border: 1px solid rgba(212, 175, 104, 0.26);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0.9rem 1rem;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-secondary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 104, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.login-success-state {
  text-align: left;
}

.dashboard-shell {
  display: grid;
  gap: 18px;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}

.compact-header {
  margin-bottom: 0;
  text-align: left;
}

.success-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(212,175,104,0.22), rgba(212,175,104,0.04));
  border: 1px solid rgba(212,175,104,0.34);
  color: var(--primary-2);
  font-size: 2.3rem;
  font-weight: 800;
  flex-shrink: 0;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kpi-card {
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 104, 0.18);
  background: rgba(255, 255, 255, 0.02);
}

.kpi-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

.mini-panel {
  padding: 14px 14px 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 18, 0.8);
}

.chart-panel {
  padding-bottom: 14px;
}

.chart-bars {
  height: 112px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 12px;
}

.chart-bars span {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(212,175,104,0.95), rgba(212,175,104,0.3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.allocation-panel {
  padding-bottom: 12px;
}

.allocation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.allocation-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.allocation-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.8rem;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.btc-dot { background: #f5b14f; }
.eth-dot { background: #8da1ff; }
.sol-dot { background: #7ef0d5; }
.usd-dot { background: #d9d9d9; }

.positions-panel {
  padding-bottom: 12px;
}

.positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.positions-table th,
.positions-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.positions-table th {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.positions-table td {
  color: var(--text);
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.status-up {
  background: rgba(29, 186, 116, 0.12);
  color: #77d7a8;
}

.status-neutral {
  background: rgba(255, 196, 84, 0.1);
  color: #ffda73;
}

.mini-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-panel-header em {
  color: var(--primary-2);
  font-style: normal;
}

.portfolio-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.portfolio-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.portfolio-list span,
.portfolio-list em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.portfolio-list strong {
  font-size: 0.92rem;
}

.dashboard-actions {
  display: grid;
  gap: 10px;
}

.login-success-state .login-submit {
  margin-top: 0;
}

.nav-button,
.primary-btn {
  background: linear-gradient(135deg, #f0d7a1, #d4af68 42%, #8b6b2a 100%);
  color: #0b0d0f;
  box-shadow: 0 18px 40px rgba(212, 175, 104, 0.18);
}

.nav-secondary-btn,
.secondary-btn,
.nav-link-btn {
  background: rgba(255, 255, 255, 0.01);
  color: var(--text);
  border: 1px solid rgba(212, 175, 104, 0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.nav-link-btn {
  background: rgba(255, 255, 255, 0.02);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 190px;
  flex-shrink: 0;
}

.nav-button:hover,
.primary-btn:hover,
.secondary-btn:hover,
.nav-secondary-btn:hover,
.nav-link-btn:hover {
  transform: translateY(-1px);
}

.market-ticker {
  position: relative;
  z-index: 2;
  padding-top: 18px;
}

.ticker-wrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(9, 17, 27, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ticker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.ticker-item span,
.ticker-item em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.ticker-item strong {
  font-size: 0.92rem;
}

.ticker-item em {
  color: var(--primary-2);
  font-weight: 700;
}

.hero {
  position: relative;
  padding: 0;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
}

.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 104, 0.08), transparent 24%),
    radial-gradient(circle at 80% 40%, rgba(212, 175, 104, 0.08), transparent 28%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 52px;
  min-height: calc(100vh - 100px);
  padding: 44px 0 48px;
}

.hero-cta-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(18, 30, 44, 0.96), rgba(9, 16, 25, 0.96)),
    radial-gradient(circle at top left, rgba(94, 234, 212, 0.12), transparent 35%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(8, 12, 18, 0.38);
  min-height: 420px;
  justify-content: center;
}

.hero-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(94, 234, 212, 0.14), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(159, 122, 234, 0.18), transparent 28%);
  pointer-events: none;
}

.hero-cta-panel > * {
  position: relative;
  z-index: 1;
}

.cta-panel-header {
  display: grid;
  gap: 12px;
}

.small-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.cta-panel-header h3 {
  margin: 0;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.hero-cta-panel p {
  margin: 0;
  color: var(--muted);
}

.cta-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cta-metrics div {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.cta-metrics strong {
  display: block;
  font-size: 1.35rem;
}

.cta-metrics span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.cta-button {
  width: fit-content;
}

.trust-strip {
  padding-bottom: 18px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trust-grid div {
  padding: 16px 18px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 21, 33, 0.72);
  color: var(--muted);
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--primary-2);
  letter-spacing: 0.14em;
  font-size: var(--font-page-eyebrow);
  font-weight: 700;
}

.hero-copy h1,
.section-head h2,
.process-copy h2 {
  margin: 0 0 20px;
  font-size: clamp(2.9rem, 5vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.hero-copy p,
.process-copy p,
.service-card p,
blockquote,
.site-footer p {
  color: var(--muted);
}

.hero-slogan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid rgba(212, 175, 104, 0.2);
  border-radius: 999px;
  background: rgba(212, 175, 104, 0.05);
  color: var(--primary-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-copy p {
  max-width: 660px;
  font-size: 1.08rem;
  color: #c7d3e5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
}

.hero-metrics div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-metrics strong {
  font-size: clamp(1.2rem, 2vw, 1.9rem);
}

.hero-metrics span {
  color: var(--muted);
}


.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-head h2,
.process-copy h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.service-grid,
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-card,
.testimonial-grid blockquote,
.pricing-card,
.faq-item {
  background: linear-gradient(180deg, rgba(16, 28, 41, 0.92), rgba(11, 18, 28, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  padding: 26px 24px;
  box-shadow: 0 20px 48px rgba(6, 10, 18, 0.18);
}

.pricing {
  position: relative;
  overflow: hidden;
}

.pricing-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.45;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(159, 122, 234, 0.22);
  top: 60px;
  left: 8%;
}

.orb-2 {
  width: 360px;
  height: 360px;
  background: rgba(94, 234, 212, 0.18);
  right: 8%;
  top: 30px;
}

.orb-3 {
  width: 260px;
  height: 260px;
  background: rgba(245, 199, 107, 0.1);
  right: 28%;
  bottom: 20px;
}

.pricing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.service-card {
  min-height: 240px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 234, 212, 0.35);
}

.icon-wrap {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(159, 122, 234, 0.2), rgba(94, 234, 212, 0.2));
  color: var(--primary-2);
  font-weight: 700;
}

.service-card h3 {
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.process-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: center;
}

.steps {
  display: grid;
  gap: 20px;
}

.step-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 22px 20px;
  border-radius: 20px;
  background: rgba(17, 29, 44, 0.8);
  border: 1px solid var(--line);
}

.step-number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #08131e;
  font-weight: 800;
}

.step-item h3 {
  margin: 0 0 8px;
}

.step-item p {
  margin: 0;
  color: var(--muted);
}

.testimonial-grid blockquote {
  margin: 0;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.testimonial-grid footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-grid span {
  color: var(--muted);
  font-size: 0.85rem;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
  background: rgba(12, 20, 31, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 55px rgba(6, 12, 18, 0.32);
}

.pricing-card.featured {
  border-color: rgba(94, 234, 212, 0.6);
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(94, 234, 212, 0.18);
}

.pricing-card.elite {
  background: linear-gradient(180deg, rgba(159, 122, 234, 0.12), rgba(12, 20, 31, 0.88));
}

.package-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
}

.popular-tag {
  background: rgba(94, 234, 212, 0.12);
  color: var(--primary-2);
}

.vip-tag {
  background: rgba(159, 122, 234, 0.12);
  color: #d3c0ff;
}

.pricing-card h3 {
  margin: 0;
  font-size: 1.45rem;
}

.package-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.price {
  font-size: clamp(2rem, 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.price span {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 6px;
}

.pricing-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 8px;
  flex: 1;
}

.pricing-card .secondary-btn,
.pricing-card .nav-button {
  width: 100%;
  margin-top: auto;
}

.faq-wrap {
  max-width: 980px;
}

.faq-list {
  display: grid;
  gap: 18px;
}

.faq-item h3 {
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  padding-top: 36px;
  border-top: 1px solid var(--line);
  background: rgba(6, 14, 22, 0.8);
}

.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
}

.footer-brand {
  margin-bottom: 12px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
}

.footer-bottom {
  padding: 18px 0 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@keyframes driftGlow {
  0% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  50% {
    transform: translate3d(5vw, 3vh, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-3vw, 5vh, 0) scale(1.12);
  }
}

/* ============================================================
   GİRİŞ SONRASI PANEL (LUX TERMINAL DASHBOARD)
   ============================================================ */

.dashboard-view {
  display: none;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 104, 0.1), transparent 26%),
    radial-gradient(circle at 92% 12%, rgba(159, 122, 234, 0.08), transparent 30%),
    linear-gradient(180deg, #050709 0%, #090b0d 100%);
}

.dashboard-view.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  animation: dashFadeIn 0.45s ease;
}

@keyframes dashFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sol menü + üst şerit */
.dash-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 256px;
  flex-shrink: 0;
  padding: 26px 20px 20px;
  background: linear-gradient(180deg, rgba(10, 13, 16, 0.98), rgba(7, 9, 11, 0.98));
  border-right: 1px solid rgba(212, 175, 104, 0.22);
  overflow: hidden;
}

.dash-sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 104, 0.7), transparent);
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 2px;
}

.dash-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.dash-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-nav-sep {
  height: 1px;
  margin: 10px 6px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 104, 0.5), transparent);
  flex-shrink: 0;
}

.dash-nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dash-nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.dash-nav-link.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(212, 175, 104, 0.22);
}

.dash-sidebar-foot {
  margin-top: 0;
  flex-shrink: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dash-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sarmalama yalnızca gerçekten dar ekranda devreye girsin diye boşluklar
     sıkı tutulur: 1366px ve üzeri TEK satırda kalır (ölçüldü). */
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 20px;
  backdrop-filter: blur(18px);
  background: rgba(7, 9, 11, 0.94);
  border-bottom: 1px solid rgba(212, 175, 104, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}

.dash-topbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}

.dash-header-actions {
  margin-left: auto;
}

.dash-topbar-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Cüzdan bakiyesi — üst barı kısa tutmak için iki satır: etiket + (bakiye · fiat) */
.dash-wallet {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 104, 0.24);
  background: linear-gradient(180deg, rgba(212, 175, 104, 0.09), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dash-wallet-label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dash-wallet-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
}

.dash-wallet-value {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-wallet-unit {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary-2);
}

.dash-wallet-sub {
  /* Dikey yer kaplamaz: ağ bilgisi kartın ipucunda ve ekran okuyucularda yaşar. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.dash-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-brand-text em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.dash-nav-link:hover {
  color: var(--text);
}

.dash-nav-link.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  box-shadow: 0 8px 20px rgba(212, 175, 104, 0.24);
}

.dash-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Ağ seçici: LUXNET / TESTNET / LIVE */
.dash-network-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.network-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.network-btn i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.network-btn[data-network="luxnet"] i {
  background: #d4af68;
}

.network-btn[data-network="testnet"] i {
  background: #f5b14f;
}

.network-btn[data-network="live"] i {
  background: #1dba74;
}

.network-btn:hover {
  color: var(--text);
}

.network-btn.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  box-shadow: 0 8px 20px rgba(212, 175, 104, 0.22);
}

.network-btn.is-active i {
  background: #0b0d0f;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
 * BORSA SEÇİCİ (ÜST BAR) — 8 borsa YAN YANA DİZİLMEZ
 * Tek düğme + aşağı açılan liste. Dil/ağ denetimleriyle aynı tema dilini
 * kullanır (altın kenar, pill biçimi) ama ağ düğmelerinin 4.'sü gibi
 * görünmez: bir açılır liste olduğu ok işaretiyle belli olur.
 * ------------------------------------------------------------------- */
.dash-exchange {
  position: relative;
  flex-shrink: 0;
}

.exchange-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Uzun adlar (COINBASE/BINANCE) üst barı kırmasın: seçici genişliği sınırlı.
   62px = en uzun adımız (COINBASE) tam sığar; ileride daha uzun bir ad
   eklenirse üç nokta ile kısalır (üst bar asla kırılmaz). */
.exchange-btn-label {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.exchange-btn:hover {
  border-color: var(--primary);
}

.exchange-btn[aria-expanded='true'] {
  border-color: var(--primary);
  color: var(--primary);
}

/* "Borsa" etiketi GÖRÜNMEZ ama ekran okuyucuya kalır: üst bar tek satırda
   kalsın diye (bkz. .dash-wallet-sub ile aynı teknik) yer kaplamaz.
   Düğme görsel olarak "● BYBIT ⌄" diye okunur. */
.exchange-btn-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--muted);
  font-weight: 600;
}

/* Açılır liste olduğunu gösteren ok (saf CSS). */
.exchange-caret {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.exchange-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  max-height: 302px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  border-radius: 14px;
  background: #0d1015;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.exchange-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.exchange-option strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.exchange-option em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
}

.exchange-option:hover,
.exchange-option:focus-visible {
  border-color: rgba(212, 175, 104, 0.35);
  background: rgba(212, 175, 104, 0.08);
  outline: none;
}

.exchange-option.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  color: #0b0d0f;
}

.exchange-option.is-active em {
  color: rgba(11, 13, 15, 0.7);
}

/* SIĞDIRMA EMNİYET SÜBABI: uzun borsa adı (COINBASE/BINANCE) üst barı iki
   satıra kıracaksa YALNIZCA dekoratif "Canlı veri" rozeti gizlenir. Bilgi
   kaybı olmaz (Anasayfa zaten "Son güncelleme" satırını gösterir) ve
   gösterge yalnızca gerçekten gerekli olduğunda devreden çıkar
   (ölçüm: script.js → tvFitTopbar). */
.dash-topbar.is-tight .dash-live-pill {
  display: none;
}

/* Canlı veri rozeti ve dil değiştirici TEK satırda durur: üst bar şeridindeki
   diğer öğelerle (ağ seçici, üyelik, çıkış) aynı hizaya gelir. Yazı boyutu
   seçicisi kaldırılmadan önce dil düğmeleri rozetin ALTINDA ikinci bir satır
   oluşturuyordu; şeritte "tümsek" yapıp üst barı gereksiz yükseltiyordu. */
.dash-live-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Üst barda dil düğmeleri kompakttır: şerit tek satırda kalsın. */
.dash-live-stack .lang-btn {
  padding: 5px 9px;
  letter-spacing: 0.06em;
}

.dash-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(29, 186, 116, 0.3);
  background: rgba(29, 186, 116, 0.08);
  color: #77d7a8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1dba74;
  box-shadow: 0 0 0 0 rgba(29, 186, 116, 0.5);
  animation: livePulse 2s ease infinite;
}

.live-dot.small-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 186, 116, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(29, 186, 116, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 186, 116, 0);
  }
}

.dash-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.dash-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dash-user-btn:hover {
  background: rgba(212, 175, 104, 0.12);
}

.dash-user-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.28);
}

.dash-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0d7a1, #b08a3e);
  color: #0b0d0f;
  font-weight: 800;
  font-size: 0.8rem;
}

.dash-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 4px;
}

.dash-user-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-user-plan {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-2);
}

.dash-logout {
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 999px;
  background: rgba(255, 107, 107, 0.06);
  color: #ff9b9b;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dash-logout:hover {
  background: rgba(255, 107, 107, 0.14);
  border-color: rgba(255, 107, 107, 0.5);
}

/* İçerik düzeni */
.dash-content {
  display: grid;
  gap: 22px;
  padding: 36px 0 64px;
}

.dash-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dash-welcome .eyebrow {
  margin-bottom: 10px;
}

.dash-welcome h2 {
  margin: 0;
  /* Anasayfa başlığı: diğer sayfaların sayfa başlığıyla aynı ölçü. */
  font-size: var(--font-page-title);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.dash-welcome-note {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  /* Başlık altı açıklama: diğer sayfalardaki .acc-head-note ile aynı ölçü. */
  font-size: var(--font-page-note);
  letter-spacing: 0.04em;
}

.dash-welcome-note strong {
  color: var(--primary-2);
  font-variant-numeric: tabular-nums;
}

/* KPI kartları */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi {
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 104, 0.16);
  background: linear-gradient(180deg, rgba(16, 28, 41, 0.92), rgba(11, 18, 28, 0.9));
  box-shadow: 0 18px 44px rgba(6, 10, 18, 0.28);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.dash-kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 104, 0.38);
}

.dash-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-kpi-top span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-trend {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.kpi-trend.up {
  background: rgba(29, 186, 116, 0.12);
  color: #77d7a8;
}

.kpi-trend.down {
  background: rgba(255, 107, 107, 0.12);
  color: #ff9b9b;
}

.kpi-trend.neutral {
  background: rgba(212, 175, 104, 0.12);
  color: var(--primary-2);
}

.dash-kpi-value {
  display: block;
  margin-top: 12px;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.dash-kpi-value.flash-up {
  color: #77d7a8;
  transition: color 0.2s ease;
}

.dash-kpi-value.flash-down {
  color: #ff9b9b;
  transition: color 0.2s ease;
}

.dash-kpi-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}

/* Ana grid */
.dash-main-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.dash-side-stack {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.dash-panel {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(14, 22, 33, 0.85), rgba(9, 14, 22, 0.9));
  box-shadow: 0 18px 48px rgba(6, 10, 18, 0.25);
}

.dash-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.dash-panel-title {
  display: block;
  /* Panel başlığı: her sayfada aynı noktada aynı boyut. */
  font-size: var(--font-panel-title);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dash-panel-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-panel-sub);
  font-style: normal;
  letter-spacing: 0.04em;
}

.dash-panel-badge {
  font-style: normal;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(212, 175, 104, 0.1);
  border: 1px solid rgba(212, 175, 104, 0.24);
  color: var(--primary-2);
  font-size: var(--font-panel-badge);
  font-weight: 700;
  white-space: nowrap;
}

/* Grafik */
.chart-panel {
  display: flex;
  flex-direction: column;
}

.dash-range-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

.range-btn {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.range-btn:hover {
  color: var(--text);
}

.range-btn.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68);
}

.dash-chart {
  position: relative;
  height: 220px;
  margin-top: 4px;
}

.chart-grid-lines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.chart-grid-lines span {
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.chart-line-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chart-end-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4d7a6;
  box-shadow: 0 0 12px rgba(212, 175, 104, 0.8);
  transform: translate(-50%, -50%);
  display: none;
}

.dash-chart.has-line .chart-end-dot {
  display: block;
}

.dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.76rem;
}

.dash-chart-legend div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary);
}

.dash-chart-legend i.legend-muted {
  background: rgba(255, 255, 255, 0.18);
}

.dash-chart-legend strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Sinyaller */
.dash-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.dash-signal-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.signal-coin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.signal-coin strong {
  display: block;
  font-size: 0.88rem;
}

.signal-coin span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.signal-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.signal-meta > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.signal-tag {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.signal-tag.up {
  background: rgba(29, 186, 116, 0.12);
  color: #77d7a8;
}

.signal-tag.down {
  background: rgba(255, 107, 107, 0.12);
  color: #ff9b9b;
}

.signal-tag.neutral {
  background: rgba(212, 175, 104, 0.12);
  color: var(--primary-2);
}

/* Dağılım */
.dash-allocation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.alloc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.alloc-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.alloc-row strong {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.alloc-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.alloc-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 104, 0.5), #d4af68);
}

/* Pozisyon tablosu */
.dash-table-wrap {
  overflow-x: auto;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.dash-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dash-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
}

.dash-table tbody tr {
  transition: background 0.2s ease;
}

.dash-table tbody tr:hover {
  background: rgba(212, 175, 104, 0.03);
}

.dash-table tbody tr:last-child td {
  border-bottom: none;
}

.pos-asset {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.pl-up {
  color: #77d7a8;
  font-weight: 600;
}

.pl-down {
  color: #ff9b9b;
  font-weight: 600;
}

.dash-table .status {
  min-width: 72px;
}

.status-down {
  background: rgba(255, 107, 107, 0.12);
  color: #ff9b9b;
}

/* Hızlı işlemler + danışman */
.dash-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quick-action {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.18);
  background: rgba(212, 175, 104, 0.04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 104, 0.45);
  background: rgba(212, 175, 104, 0.07);
}

.quick-action strong {
  font-size: 0.88rem;
}

.quick-action span {
  color: var(--muted);
  font-size: 0.72rem;
}

.dash-advisor-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(159, 122, 234, 0.22);
  background: linear-gradient(180deg, rgba(159, 122, 234, 0.08), rgba(12, 20, 31, 0.6));
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.65;
}

.dash-advisor-note footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.dash-advisor-note footer span {
  color: var(--muted);
  font-size: 0.76rem;
}

.dash-outline-btn {
  border: 1px solid rgba(212, 175, 104, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 8px 18px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dash-outline-btn:hover {
  border-color: rgba(212, 175, 104, 0.55);
  transform: translateY(-1px);
}

/* Alt bilgi — panel içinde sabit şerit */
.dash-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid rgba(212, 175, 104, 0.22);
  background: rgba(6, 10, 14, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.35);
}

.dash-footer::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 104, 0.55), transparent);
  pointer-events: none;
}

.dash-footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Onay ekranı */
.success-confirm {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 0 18px;
}

.success-confirm .compact-header {
  text-align: center;
}

.success-confirm .compact-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ============================================================
   HESABIM GÖRÜNÜMÜ
   ============================================================ */

.dash-content[hidden] {
  display: none !important;
}

.acc-view {
  padding-top: 30px;
}

.acc-head {
  max-width: 720px;
}

.acc-head .eyebrow {
  margin-bottom: 10px;
}

/* Sayfa başlığı: her sayfada aynı noktada AYNI boyut (tek kaynak) */
.acc-head h2 {
  margin: 0 0 10px;
  font-size: var(--font-page-title);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.acc-head-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-page-note);
}

.acc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.acc-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  height: 100%;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(14, 22, 33, 0.85), rgba(9, 14, 22, 0.9));
  box-shadow: 0 18px 48px rgba(6, 10, 18, 0.25);
}

/* Alt durum satırını panelin dibine sabitle: tüm paneller simetrik kalsın */
.acc-panel > .acc-status {
  margin-top: auto;
}

.acc-panel-wide {
  grid-column: 1 / -1;
}

.acc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
}

/* Panel başlığı: bütün panellerde (destek dahil) aynı boyut */
.acc-panel-title {
  display: block;
  font-size: var(--font-panel-title);
  font-weight: 700;
}

.acc-panel-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-panel-sub);
  font-style: normal;
}

.acc-badge {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-style: normal;
  font-size: var(--font-panel-badge);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.acc-badge.gold {
  border-color: rgba(212, 175, 104, 0.32);
  background: rgba(212, 175, 104, 0.12);
  color: var(--primary-2);
}

/* --- BAKİYE HAREKET GEÇMİŞİ (Ayarlar) -------------------------------
   Satırlar .adm-list kartlarını kullanır; yalnızca ağ etiketi ve
   fark rozetinin yan yana durması için küçük bir yerleşim gerekir. */
.bh-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bh-head .bh-net {
  padding: 3px 9px;
  font-size: 0.62rem;
}

#balanceHistoryList > li {
  align-items: flex-start;
}

#balanceHistoryList .adm-item-main {
  flex: 1 1 240px;
}

#balanceHistoryList .adm-item-meta {
  white-space: nowrap;
}

/* --- AĞ DENEME SÜRELERİ (Sistem Yönetim + Ayarlar) ------------------
   Her ağın kendi süresi ve başlangıç bakiyesi vardır; süre bitince o ağ
   salt okunur olur. Izgara dar ekranda tek sütuna iner, panel taşmaz. */
.adm-net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.adm-net-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.adm-net-row > strong {
  flex: 1 0 100%;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--primary-2);
}

.adm-net-field {
  flex: 1 1 100px;
  min-width: 0;
  gap: 6px;
}

.adm-net-field .adm-input {
  width: 100%;
  min-width: 0;
}

/* DEMO AYARI — süre alanı + demo boyunca açık bölüm kutuları. */
.adm-demo-grid {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
}

.adm-demo-days {
  gap: 6px;
}

.adm-demo-days .adm-input {
  width: 100%;
  min-width: 0;
}

.adm-demo-sections {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.adm-demo-sections legend {
  padding: 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--primary-2);
  text-transform: uppercase;
}

.adm-demo-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
}

.adm-demo-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
}

/* Her koşulda açık bölümler: işaretli ve kapatılamaz. */
.adm-demo-section input:disabled + span {
  color: var(--muted);
}

.adm-demo-section input:disabled {
  cursor: not-allowed;
}

.adm-demo-hint {
  margin: 10px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .adm-demo-grid {
    grid-template-columns: 1fr;
  }
}

/* DEMO KİLİDİ — demo bitince izin listesi dışındaki bölüme tıklanınca çıkar. */
.dash-locked {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px auto 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(243, 192, 123, 0.35);
  background: rgba(243, 192, 123, 0.08);
}

.dash-locked[hidden] {
  display: none;
}

.dash-locked-icon {
  font-size: 1.2rem;
  line-height: 1.4;
}

.dash-locked-body {
  flex: 1 1 auto;
  min-width: 0;
}

.dash-locked-body strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
}

.dash-locked-text {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.dash-locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* KİLİT KALKTI ANI (ödeme onaylandı): aynı kutu yeşile döner ve erişimin
   açıldığını müjdeler; bir süre sonra kendiliğinden kapanır. */
.dash-locked.is-unlocked {
  border-color: rgba(74, 222, 128, 0.42);
  background: rgba(74, 222, 128, 0.09);
}

/* Kilitli bölüm: tıklanabilir ama açılmaz, nedeni bildirimle anlatılır. */
.dash-nav-link.is-locked {
  opacity: 0.55;
  color: var(--muted);
}

.dash-nav-link.is-locked::after {
  content: '🔒';
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .dash-locked {
    flex-direction: column;
  }
}

.adm-net-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.adm-net-chips .acc-badge {
  padding: 3px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.acc-badge.warn {
  border-color: rgba(245, 199, 107, 0.32);
  background: rgba(245, 199, 107, 0.1);
  color: #ffda73;
}

.acc-net-trial {
  margin-top: 6px;
}

/* --- FİAT KARŞILIĞI (LUX → USD / TRY) -------------------------------
   Bakiye LUX cinsindendir; canlı kurdan hesaplanan USD/TRY karşılığı
   büyük sayının altında ikinci satır olarak durur. Kur alınamazsa
   değer "—" kalır ve altındaki not nedeni söyler. */
.acc-fiat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.acc-fiat span:last-child {
  color: var(--primary-2);
}

.acc-fiat-note {
  margin-top: 4px;
  font-size: 0.72rem;
  opacity: 0.85;
}

.acc-fiat-note.is-stale {
  color: #ffda73;
}

.dash-wallet-fiat {
  /* Bakiye ile AYNI satırda: ayraç çizgisiyle ayrılır, dikey yer kaplamaz. */
  display: inline;
  margin-top: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(212, 175, 104, 0.3);
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--muted);
}

.dash-wallet-fiat.is-stale {
  color: #ffda73;
}

.adm-rate-field {
  flex: 0 1 220px;
  gap: 6px;
}

.adm-rate-field .adm-input {
  width: 100%;
  min-width: 0;
}

.acc-badge.ok {
  border-color: rgba(29, 186, 116, 0.32);
  background: rgba(29, 186, 116, 0.12);
  color: #77d7a8;
}

.acc-badge.pending {
  border-color: rgba(245, 199, 107, 0.32);
  background: rgba(245, 199, 107, 0.1);
  color: #ffda73;
}

.acc-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.acc-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(212, 175, 104, 0.36);
  background: rgba(212, 175, 104, 0.06);
}

.acc-code span {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.acc-code strong {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--primary-2);
  font-variant-numeric: tabular-nums;
}

.acc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acc-btn {
  width: auto;
  margin: 0;
  padding: 0.75rem 1.35rem;
  font-size: 0.8rem;
}

.acc-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-page-status);
}

.acc-status.ok {
  color: #77d7a8;
}

.acc-status.err {
  color: #ff9b9b;
}

.acc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.acc-form > .acc-status {
  margin-top: auto;
}

.acc-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.acc-field input,
.acc-field textarea,
.acc-field select {
  width: 100%;
  border: 1px solid rgba(212, 175, 104, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.acc-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.acc-field select option {
  background: #0d1115;
  color: var(--text);
}

.acc-field input:focus,
.acc-field textarea:focus,
.acc-field select:focus {
  border-color: rgba(212, 175, 104, 0.65);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.12);
}

.acc-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.acc-info li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.acc-info span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.acc-info strong {
  font-size: 0.86rem;
}

.acc-progress {
  display: grid;
  gap: 8px;
}

.acc-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

.acc-progress-head strong {
  color: var(--primary-2);
}

.acc-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.acc-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 104, 0.5), #d4af68);
  transition: width 0.4s ease;
}

.acc-balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.24);
  background: linear-gradient(180deg, rgba(212, 175, 104, 0.09), rgba(255, 255, 255, 0.01));
}

.acc-balance strong {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.acc-balance span {
  color: var(--primary-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.acc-exchange-form {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.85fr)
    minmax(170px, 1.1fr)
    minmax(170px, 1.1fr)
    auto;
  gap: 12px;
  align-items: end;
}

.acc-exchange-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.acc-exchange-list:empty {
  display: none;
}

.acc-exchange-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.acc-exchange-item > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.acc-exchange-item strong {
  font-size: 0.88rem;
}

.acc-exchange-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.acc-exchange-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.acc-remove {
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 999px;
  background: rgba(255, 107, 107, 0.06);
  color: #ff9b9b;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.acc-remove:hover {
  background: rgba(255, 107, 107, 0.14);
  border-color: rgba(255, 107, 107, 0.5);
}

.acc-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.acc-log li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.acc-log time {
  color: var(--primary-2);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.acc-log span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Alt kırılımlar */
@media (max-width: 1100px) {
  .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-main-grid {
    grid-template-columns: 1fr;
  }

  .dash-side-stack {
    grid-template-rows: none;
  }

  .dash-quick-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .acc-grid {
    grid-template-columns: 1fr;
  }

  .acc-exchange-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acc-exchange-form .acc-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .dashboard-view.is-open {
    flex-direction: column;
  }

  .dash-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(212, 175, 104, 0.22);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .dash-sidebar::after {
    top: auto;
    bottom: -1px;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 104, 0.7), transparent);
  }

  .dash-brand-text em {
    display: none;
  }

  .dash-sidebar-foot {
    display: none;
  }

  .dash-nav {
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .dash-nav-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  .dash-nav-sep {
    width: 1px;
    height: 22px;
    margin: 0 8px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 104, 0.5), transparent);
  }

  .dash-nav-link {
    width: auto;
    padding: 7px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .dash-main {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .dash-topbar-left {
    gap: 12px;
  }

  .dash-wallet {
    padding: 6px 12px;
    border-radius: 12px;
  }

  .dash-wallet-label,
  .dash-wallet-sub {
    display: none;
  }

  .dash-wallet-value {
    font-size: 0.9rem;
  }

  /* Telefonda bakiye + fiat tek satıra sığmazsa alt alta sarar (taşma yerine). */
  .dash-wallet-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .dash-wallet-fiat {
    padding-left: 0;
    border-left: 0;
    font-size: 0.64rem;
  }

  .dash-network-switch {
    padding: 3px;
    gap: 2px;
  }

  .network-btn {
    padding: 5px 9px;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    gap: 5px;
  }

  .network-btn i {
    width: 6px;
    height: 6px;
  }

  .dash-nav {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .dash-nav-link {
    width: auto;
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .dash-welcome {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-kpis {
    grid-template-columns: 1fr;
  }

  .dash-main-grid,
  .dash-side-stack,
  .dash-quick-grid {
    grid-template-columns: 1fr;
  }

  .dash-signal-list li {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dash-table th,
  .dash-table td {
    white-space: normal;
    padding: 8px 6px;
  }

  .dash-advisor-note footer {
    flex-direction: column;
    gap: 4px;
  }
}

@keyframes pulseGlow {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (max-width: 1200px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .process-grid,
  .service-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .nav-wrap {
    flex-wrap: wrap;
    justify-content: center;
    padding: 18px 0;
  }

  .brand {
    min-width: 0;
  }

  .main-nav {
    display: none;
  }

  .nav-actions {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }

  .hero-visual {
    min-height: 500px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nav-wrap,
  .footer-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding-top: 64px;
  }

  .hero-copy h1 {
    letter-spacing: -0.05em;
  }

  .card-one {
    left: 8px;
  }

  .card-two {
    right: 8px;
  }
}

/* ==================================================================
   ADMİN PANELİ — sol menü sekmesi, rol etiketi ve görünüm
   ================================================================== */

/* Yönetici sekmesi: yalnızca admin girişinde görünür, menünün dibine yaslanır */
.dash-nav-admin {
  margin-top: auto;
  padding-top: 4px;
}

.dash-nav-admin[hidden] {
  display: none;
}

.dash-nav-link-admin:not(.is-active) {
  color: #ffda73;
  border-color: rgba(245, 199, 107, 0.26);
  background: rgba(245, 199, 107, 0.07);
}

.dash-nav-link-admin:not(.is-active):hover {
  color: #ffe6a8;
  background: rgba(245, 199, 107, 0.15);
  border-color: rgba(245, 199, 107, 0.4);
}

.dash-role-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 199, 107, 0.34);
  background: rgba(245, 199, 107, 0.12);
  color: #ffda73;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dash-role-pill[hidden] {
  display: none;
}

.admin-view {
  padding-top: 30px;
}

.admin-view .acc-badge {
  color: #ffda73;
  border-color: rgba(245, 199, 107, 0.28);
  background: rgba(245, 199, 107, 0.08);
}

.login-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
}

.login-hint strong {
  color: var(--primary-2);
  font-weight: 600;
}

/* Dar ekranda sol menü yatay olur: admin sekmesini sadeleştir */
@media (max-width: 900px) {
  .dash-nav-admin {
    margin-top: 0;
  }

  .dash-nav-admin .dash-nav-sep {
    display: none;
  }
}

/* ==================================================================
   DİL DEĞİŞTİRİCİ (TR / EN)
   ================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.24);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.lang-btn {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lang-btn:hover {
  color: var(--text);
}

.lang-btn.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  box-shadow: 0 6px 16px rgba(212, 175, 104, 0.22);
}

.lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.28);
}

.lang-switch-dash {
  background: rgba(255, 255, 255, 0.03);
}

/* Üst çubuktaki kutu: canlı veri rozetinin altında dil düğmelerini tutar. */
.dash-quick-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ==================================================================
   GÜVENLİK ARAYÜZÜ — şifre gücü, giriş hataları, şifreli kasa
   ================================================================== */
.login-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.36);
  background: rgba(255, 107, 107, 0.08);
  color: #ff9b9b;
  font-size: 0.78rem;
  line-height: 1.5;
}

.login-error[hidden] {
  display: none;
}

.pw-meter {
  display: grid;
  gap: 6px;
}

.pw-meter-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.pw-meter-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #ff9b9b;
  transition: width 0.25s ease, background 0.25s ease;
}

.pw-meter-label {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.pw-meter.level-1 .pw-meter-track span {
  width: 25%;
  background: #ff9b9b;
}

.pw-meter.level-2 .pw-meter-track span {
  width: 50%;
  background: #ffda73;
}

.pw-meter.level-3 .pw-meter-track span {
  width: 75%;
  background: #d4af68;
}

.pw-meter.level-4 .pw-meter-track span {
  width: 100%;
  background: #77d7a8;
}

.acc-vault-lock {
  display: grid;
  gap: 14px;
}

.acc-vault-lock[hidden] {
  display: none;
}

.acc-vault-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.acc-vault-row input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid rgba(212, 175, 104, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}

.acc-vault-row input:focus {
  border-color: rgba(212, 175, 104, 0.65);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.12);
}

#exchangeBody[hidden] {
  display: none;
}

/* ==================================================================
   YÖNETİCİ MODÜL SEKMELERİ (Yönetici kontrol merkezi)
   ================================================================== */
.admin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(14, 22, 33, 0.8), rgba(9, 14, 22, 0.86));
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.admin-tab {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.admin-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.admin-tab:focus-visible {
  outline: 2px solid rgba(212, 175, 104, 0.6);
  outline-offset: 2px;
}

.admin-tab.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(212, 175, 104, 0.22);
}

.admin-panels {
  display: grid;
  gap: 22px;
}

.admin-tabpanel {
  display: grid;
  gap: 22px;
}

.admin-tabpanel[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .admin-tab {
    padding: 9px 11px;
    font-size: 0.64rem;
    letter-spacing: 0.02em;
  }
}

/* =====================================================================
 * LUX TRADE — EK BİLEŞEN STİLLERİ (styles-additions.css buraya taşındı)
 * Tek stil dosyası mimarisi: özgün tema + yönetici paneli, Telegram,
 * üyelik/ödeme, onay penceresi ve bildirim bileşenleri.
 * ===================================================================== */

/* =====================================================================
 * LUX TRADE — EK BİLEŞEN STİLLERİ
 * ---------------------------------------------------------------------
 * Özgün styles.css (Docker imajından geri yüklendi) yönetici paneli,
 * Telegram paneli ve üyelik/ödeme–dekont arayüzünü kapsamıyor.
 * Bu dosya yalnızca o bileşenleri özgün tema değişkenleriyle biçimler.
 * styles.css'ten SONRA yüklenir.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1 · ORTAK YARDIMCILAR
 * ------------------------------------------------------------------- */
.acc-check-label,
.adm-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted);
  cursor: pointer;
}

.adm-check {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.adm-textarea {
  min-height: 96px;
  resize: vertical;
}

.adm-note { font-size: 0.76rem; color: var(--muted); }

.pos-current { color: var(--text); }

.dash-live-value { transition: color 0.3s ease; }

.register-toggle,
.back-to-login {
  background: none;
  border: 0;
  color: var(--primary-2);
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
}

.register-toggle:hover,
.back-to-login:hover { color: var(--primary); }

/* ---------------------------------------------------------------------
 * 2 · YÖNETİCİ PANELİ
 * ------------------------------------------------------------------- */
.adm-body,
.admin-kpis {
  display: grid;
  gap: 16px;
}

.admin-kpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.adm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.adm-metric {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 23, 27, 0.9), rgba(11, 14, 18, 0.92));
}

.adm-metric span {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.adm-metric strong {
  font-size: 1.25rem;
  color: var(--primary-2);
}

.adm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.adm-toggles { gap: 8px; }

.adm-grow { flex: 1 1 220px; }
.adm-narrow { width: 118px; }

.adm-input,
.adm-textarea {
  width: auto;
  min-width: 130px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.adm-input:focus,
.adm-textarea:focus,
.adm-check:focus-visible {
  outline: none;
  border-color: rgba(212, 175, 104, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.18);
}

.adm-grow.adm-input,
.adm-backup-password .adm-input,
.adm-backup-select-wrap .adm-input { width: 100%; }

.adm-btn {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.adm-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 104, 0.5);
  background: rgba(212, 175, 104, 0.08);
}

.adm-btn.danger,
.adm-danger {
  color: #ff9b9b;
  border-color: rgba(255, 107, 107, 0.36);
  background: rgba(255, 107, 107, 0.08);
}

.adm-btn.danger:hover,
.adm-danger:hover { background: rgba(255, 107, 107, 0.16); }

.adm-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}

/*
   KAYDIRMALI LİSTE GÖVDESİ — "içerik sayfaya sığsın"
   ------------------------------------------------------------------
   Uzun tablolar ve kampanya listesi sayfayı uzatmasın: panel başlığı ve
   filtre çubuğu YERİNDE kalır, gövde belirli bir yükseklikten sonra KENDİ
   dikey kaydırma çubuğuyla kayar (altın tonlu, panel geneliyle aynı).
   Sütun başlıkları (thead) yapışkan kalır; alt kenar çizgisi korunur.
   (bkz. index.html .adm-table-scroll · .adm-list-scroll)
 */
.adm-table-scroll,
.adm-list-scroll {
  max-height: clamp(240px, 46vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.adm-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Yapışkan başlık saydam olamaz: satırlar altından görünürdü. */
  background: #101822;
  box-shadow: inset 0 -1px 0 var(--line);
}

.adm-table-scroll::-webkit-scrollbar,
.adm-list-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.adm-table-scroll::-webkit-scrollbar-track,
.adm-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.adm-table-scroll::-webkit-scrollbar-thumb,
.adm-list-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(212, 175, 104, 0.35);
}

.adm-table-scroll::-webkit-scrollbar-thumb:hover,
.adm-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 104, 0.55);
}

/* FİLTRE ÇUBUĞU — arama/seçiciler + "görünen/toplam" sayacı.
   Yalnızca GÖRÜNEN satırları süzer; sunucudaki kayıtlar değişmez. */
.adm-filter-bar {
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(212, 175, 104, 0.22);
  background: rgba(212, 175, 104, 0.05);
}

.adm-filter-bar .adm-input {
  min-width: 150px;
}

.adm-filter-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 680px;
}

.adm-table th {
  text-align: left;
  padding: 11px 14px;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
}

.adm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d7d2ca;
  vertical-align: middle;
}

.adm-table tbody tr:hover { background: rgba(212, 175, 104, 0.05); }

/* SÜRESİ DOLAN / KİLİTLİ üyeler listede kaybolmasın: satır rengi + sol şerit.
   Renkler rozetlerle aynı ailede (amber = süresi doldu, kırmızı = kilitli). */
.adm-table tbody tr.adm-row-expired { background: rgba(243, 192, 123, 0.06); }
.adm-table tbody tr.adm-row-expired td:first-child { box-shadow: inset 3px 0 0 rgba(243, 192, 123, 0.55); }
.adm-table tbody tr.adm-row-locked { background: rgba(255, 107, 107, 0.07); }
.adm-table tbody tr.adm-row-locked td:first-child { box-shadow: inset 3px 0 0 rgba(255, 107, 107, 0.55); }
.adm-table tbody tr.adm-row-expired:hover { background: rgba(243, 192, 123, 0.1); }
.adm-table tbody tr.adm-row-locked:hover { background: rgba(255, 107, 107, 0.11); }

/* Panel başlığındaki rozetler (üye sayısı + süresi dolan/kilitli özeti). */
.adm-head-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.adm-table td.adm-strong { color: var(--text); font-weight: 600; }
.adm-table td.adm-sub { color: var(--muted); font-size: 0.76rem; }
.adm-table td.adm-empty { text-align: center; color: var(--muted); padding: 20px; }

.adm-actions,
.adm-actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.adm-chip {
  display: inline-block;
  font-style: normal;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.adm-chip.ok,
.adm-chip.is-ok {
  color: #77d7a8;
  border-color: rgba(119, 215, 168, 0.34);
  background: rgba(119, 215, 168, 0.1);
}

.adm-chip.warn {
  color: #f3c07b;
  border-color: rgba(243, 192, 123, 0.34);
  background: rgba(243, 192, 123, 0.1);
}

.adm-chip.is-info {
  color: #8fb8ff;
  border-color: rgba(143, 184, 255, 0.34);
  background: rgba(143, 184, 255, 0.1);
}

.adm-chip.is-critical {
  color: #ff9b9b;
  border-color: rgba(255, 107, 107, 0.36);
  background: rgba(255, 107, 107, 0.1);
}

.adm-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.adm-item-main { display: grid; gap: 2px; min-width: 0; }
.adm-item-main strong { font-size: 0.84rem; }
.adm-item-meta { font-size: 0.72rem; color: var(--muted); }
.adm-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* BAĞLI CİHAZLAR (kurulum sayfasından bildirilen cihazlar): her satır bir
   cihazdır; simge türü taşır, satır içi rozetler "kilit göründü" (kanıt) ile
   "üye bildirdi" (beyan) ayrımını görünür kılar. */
.adm-device-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-device-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.adm-device-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 17px;
  background: rgba(217, 180, 91, 0.12);
  border: 1px solid rgba(217, 180, 91, 0.22);
}
.adm-device-item .adm-item-main { flex: 1 1 220px; }
.adm-device-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.adm-device-meta { font-size: 0.7rem; color: var(--muted); }
.adm-device-item .adm-item-actions { margin-left: auto; }

.adm-empty {
  padding: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.adm-status-note {
  margin: 10px 0;
  min-height: 18px;
  font-size: 0.76rem;
  color: var(--muted);
}

.adm-file {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.adm-reply { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.adm-backup-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.adm-backup-toolbar,
.adm-payment-toolbar,
.adm-membership-tools { align-items: flex-end; }

.adm-backup-password { flex: 1 1 260px; }
.adm-backup-select-wrap { flex: 1 1 220px; }

.adm-payment-toolbar .acc-field { flex: 1 1 190px; }

/* Dekont hücresi (yönetici) */
.adm-receipt-cell { display: grid; gap: 6px; justify-items: start; }

.adm-receipt-link {
  color: var(--primary-2);
  font-size: 0.76rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.adm-receipt-link:hover { color: var(--primary); }

.adm-receipt-thumb {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b0e12;
}

/* Yönetici bildirim çanı (üst bar) */
.dash-admin-alerts {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-alert-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-alert-btn:hover {
  color: var(--text);
  border-color: rgba(212, 175, 104, 0.4);
}

.admin-alert-btn.has-alerts {
  color: var(--primary-2);
  border-color: rgba(212, 175, 104, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.14);
}

.admin-alert-glyph {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-alert-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  box-shadow: 0 6px 14px rgba(212, 175, 104, 0.32);
}

.admin-alert-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: 320px;
  max-width: min(320px, 88vw);
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.32);
  background: linear-gradient(180deg, rgba(18, 23, 27, 0.98), rgba(11, 14, 18, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.admin-alert-panel-title { font-size: 0.84rem; color: var(--primary-2); }

.admin-alert-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.admin-alert-row:hover {
  border-color: rgba(212, 175, 104, 0.4);
  background: rgba(212, 175, 104, 0.08);
}

.admin-alert-row.is-active { border-color: rgba(212, 175, 104, 0.26); }

.admin-alert-row-text { display: grid; gap: 2px; min-width: 0; }
.admin-alert-row-text strong { font-size: 0.78rem; }
.admin-alert-row-text em { font-size: 0.68rem; font-style: normal; color: var(--muted); }

.admin-alert-count {
  flex-shrink: 0;
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.admin-alert-row.is-active .admin-alert-count {
  color: var(--primary-2);
  border-color: rgba(212, 175, 104, 0.42);
  background: rgba(212, 175, 104, 0.12);
}

.admin-alert-foot { margin: 0; font-size: 0.7rem; color: var(--muted); }

.admin-alert-go { width: 100%; }

/* ---------------------------------------------------------------------
 * 3 · TELEGRAM PANELİ
 * ------------------------------------------------------------------- */
.telegram-connect-layout {
  display: grid;
  /* QR kartı: QR ekranda YARI boyutta gösterilir (bkz. script.js displayPx),
     sütun da aynı oranda dar — kart QR'ın iki katı genişlikte kalıyor. */
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 16px 0;
}

.telegram-qr-card {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.telegram-qr-card .acc-panel-sub { color: #4b5563; font-size: 0.68rem; }

.telegram-qr {
  display: block;
  /* Genişlik/yükseklik SVG niteliklerinden gelir (tam sayı modül boyutu);
     dar ekranda küçülürken kare kalır. */
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
}

/* QR altındaki adres: tarayıcı çalışmazsa elle açılabilsin. */
.telegram-qr-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 0.66rem;
  color: #4b5563;
  -webkit-user-select: all;
  user-select: all;
}

.telegram-qr-caption {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #111827;
  text-align: center;
  overflow-wrap: anywhere;
}

.telegram-connect-details { display: grid; gap: 14px; }

.telegram-link-block {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.26);
  background: rgba(212, 175, 104, 0.05);
}

.telegram-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
}

.telegram-link-block .acc-info strong {
  overflow-wrap: anywhere;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.telegram-link-block .acc-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
}

.telegram-link-block .dash-outline-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.telegram-instructions {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.telegram-instructions strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.86rem;
  color: var(--text);
}

.telegram-instructions ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

.telegram-incoming-filters {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  background: rgba(212, 175, 104, 0.06);
}

.telegram-incoming-filters > strong {
  font-size: 0.86rem;
  color: var(--primary-2);
}

.tg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.74rem;
  color: var(--muted);
  cursor: pointer;
}

.tg-toggle.is-on {
  color: var(--primary-2);
  border-color: rgba(212, 175, 104, 0.42);
  background: rgba(212, 175, 104, 0.1);
}

.tg-toggle.is-critical.is-on {
  color: #ff9b9b;
  border-color: rgba(255, 107, 107, 0.42);
  background: rgba(255, 107, 107, 0.1);
}

/* Bildirim boru hattı görselleştirmesi */
.tg-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tg-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.72rem;
  color: var(--muted);
}

.tg-stage.is-ok { color: #77d7a8; border-color: rgba(119, 215, 168, 0.3); }
.tg-stage.is-blocked { color: #ff9b9b; border-color: rgba(255, 107, 107, 0.34); }
.tg-stage.is-skipped { opacity: 0.55; }

.tg-stage-index {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #0b0d0f;
  background: var(--primary);
}

.tg-code {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text, #e8eaed);
}

.tg-bot-link-row {
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
}

.tg-trace {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
 * 4 · ÜYELİK / ÖDEME / DEKONT
 * ------------------------------------------------------------------- */
.member-plan-picker {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(212, 175, 104, 0.38);
  background: rgba(212, 175, 104, 0.05);
}

.member-plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.member-plan-option {
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.member-plan-option strong { font-size: 0.86rem; }
.member-plan-option span { font-size: 0.72rem; color: var(--muted); }

.member-plan-option:hover { border-color: rgba(212, 175, 104, 0.4); }

.member-plan-option.is-selected {
  border-color: var(--primary);
  background: rgba(212, 175, 104, 0.14);
  box-shadow: 0 0 0 3px rgba(212, 175, 104, 0.16);
}

.member-plan-empty,
.member-selected-plan { margin: 0; font-size: 0.8rem; color: var(--muted); }

.member-selected-plan { color: var(--primary-2); }

.member-payment-field { margin: 0; }

.member-bank-info {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.34);
  background: rgba(212, 175, 104, 0.07);
}

.member-bank-title {
  display: block;
  margin-bottom: 12px;
  font-size: 0.86rem;
  color: var(--primary-2);
}

.member-bank-note { margin: 10px 0 0; font-size: 0.76rem; color: var(--muted); }

.member-receipt {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.member-receipt-field { margin: 0; }

.member-receipt-preview { display: grid; gap: 10px; }

.member-receipt-hint { font-size: 0.76rem; color: var(--muted); }

.member-receipt-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.member-receipt-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.member-receipt-meta { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.member-receipt-meta strong { font-size: 0.82rem; overflow-wrap: anywhere; }
.member-receipt-meta span { font-size: 0.72rem; color: var(--muted); }

.member-submit-hint {
  margin: 0;
  min-height: 18px;
}

.member-request-actions { margin-top: 12px; }

.member-package-request:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
 * 5 · DUYARLI DÜZEN (ek bileşenler)
 * ------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
 * 6 · ONAY PENCERESİ (sayfanın ortasında, giriş paneli tasarımıyla)
 * ------------------------------------------------------------------- */
.confirm-panel {
  display: grid;
  gap: 16px;
  width: min(460px, calc(100% - 32px));
  padding: 28px 26px 22px;
}

.confirm-header { display: grid; gap: 8px; padding-right: 42px; }

.confirm-header h2 {
  margin: 0;
  font-size: 1.24rem;
  letter-spacing: -0.01em;
}

.confirm-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
}

/* Ağ geçişi görseli: kaynak → hedef */
.confirm-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.confirm-network {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.confirm-network::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.confirm-network[data-network="luxnet"]::before { background: #d4af68; }
.confirm-network[data-network="testnet"]::before { background: #f5b14f; }
.confirm-network[data-network="live"]::before { background: #1dba74; }

.confirm-network.is-target {
  color: var(--primary-2);
  border-color: rgba(212, 175, 104, 0.45);
  background: rgba(212, 175, 104, 0.12);
}

.confirm-arrow { color: var(--muted); font-size: 1rem; }

.confirm-input {
  width: 100%;
  min-width: 0;
  min-height: 84px;
}

.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.confirm-cancel {
  flex: 1 1 140px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 104, 0.26);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.confirm-cancel:hover {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 104, 0.5);
}

.confirm-ok { flex: 1 1 140px; }

/* Tehlikeli geçiş (LIVE) görünümü */
.confirm-panel.is-danger .eyebrow { color: #ff9b9b; }

.confirm-panel.is-danger .confirm-network.is-target {
  color: #ff9b9b;
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.12);
}

.confirm-panel.is-danger .confirm-ok {
  color: #160709;
  background: linear-gradient(135deg, #ffc4c4, #e05555 55%, #a83232 100%);
  box-shadow: 0 12px 28px rgba(224, 85, 85, 0.26);
}

/* ---------------------------------------------------------------------
 * 7 · GİZLEME GÜVENLİK AĞI ([hidden])
 * Bu dosyada display tanımlanan bileşenler, tarayıcının varsayılan
 * [hidden] kuralını ezebildiği için her bileşen kendi kuralını taşır.
 * Örn. üye tarafında yönetici bildirim çanı, paket seçici kutusu.
 * ------------------------------------------------------------------- */
.dash-admin-alerts[hidden],
.admin-alert-panel[hidden],
.admin-alert-badge[hidden],
.admin-alert-row[hidden],
.member-plan-picker[hidden],
.member-plan-options[hidden],
.member-receipt[hidden],
.member-receipt-preview[hidden],
.member-bank-info[hidden],
.telegram-connect-layout[hidden],
.telegram-qr-card[hidden],
.telegram-incoming-filters[hidden],
.adm-toolbar[hidden],
.adm-list[hidden],
.adm-metrics[hidden],
.adm-metric[hidden],
.adm-actions[hidden],
.adm-table-wrap[hidden],
.tg-pipeline[hidden],
.confirm-route[hidden],
.confirm-input[hidden],
.sup-main > .acc-panel[hidden],
.sup-thread-wrap[hidden],
.sup-jump[hidden],
.sup-jump-badge[hidden],
.sup-attach[hidden],
.sup-attach-preview[hidden],
.sup-file[hidden],
.sup-detail-actions .adm-input[hidden],
.sup-detail-actions .dash-outline-btn[hidden],
/* Canlı grafik: dış kaynak yüklenemediğinde çıkan dürüst bildirim katmanı
   (display: flex tanımlı olduğu için [hidden] kuralı şart). */
.tv-fallback[hidden],
.tv-chart[hidden],
.tv-side[hidden],
/* Üst bardaki borsa açılır listesi (display: flex tanımlı). */
.exchange-menu[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .telegram-connect-layout { grid-template-columns: minmax(0, 1fr); }
  .member-plan-options { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (max-width: 640px) {
  .adm-narrow { width: 100%; }
  .admin-alert-panel { width: min(300px, 92vw); }
  .confirm-route { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .member-plan-options { grid-template-columns: minmax(0, 1fr); }
  .adm-payment-toolbar .acc-field,
  .adm-backup-password,
  .adm-backup-select-wrap { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------
   DUYURULAR — üye ana sayfası paneli
   ------------------------------------------------------------------ */
.announce-panel {
  margin-bottom: 18px;
}

.announce-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.announce-badge.is-unread {
  background: rgba(212, 175, 104, 0.22);
  border-color: rgba(212, 175, 104, 0.5);
  color: var(--text);
}

.announce-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.announce-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(10, 16, 24, 0.5);
  display: grid;
  gap: 8px;
}

.announce-item.is-unread {
  border-left-color: var(--primary);
  background: rgba(212, 175, 104, 0.06);
}

.announce-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.announce-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.announce-new {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0b1118;
  background: var(--primary);
}

.announce-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.announce-body {
  margin: 0;
  color: var(--text-2, var(--text));
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.announce-read-btn {
  justify-self: start;
  font-size: 0.75rem;
  padding: 7px 14px;
}

/* ------------------------------------------------------------------
   DUYURU LİSTELERİ — ilk iki kayıt görünür, kalanı kaydırmayla
   ------------------------------------------------------------------ */
.announce-list.is-scrollable,
#admAnnList.is-scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  /* Kenar yumuşaması: listenin devamı olduğu hissi */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), rgba(0, 0, 0, 0.55) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), rgba(0, 0, 0, 0.55) 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 104, 0.55) rgba(255, 255, 255, 0.05);
}

.announce-list.is-scrollable::-webkit-scrollbar,
#admAnnList.is-scrollable::-webkit-scrollbar {
  width: 8px;
}

.announce-list.is-scrollable::-webkit-scrollbar-track,
#admAnnList.is-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.announce-list.is-scrollable::-webkit-scrollbar-thumb,
#admAnnList.is-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212, 175, 104, 0.75), rgba(212, 175, 104, 0.4));
  border-radius: 999px;
}

.announce-list.is-scrollable::-webkit-scrollbar-thumb:hover,
#admAnnList.is-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 104, 0.85);
}

/* Devre dışı düğmeler (ör. boş duyuru listesindeki "Tümünü temizle") */
.dash-outline-btn:disabled,
.nav-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   GÜVENLİ BAĞLAM UYARISI — HTTP üzerinden LAN erişiminde gösterilir
   ------------------------------------------------------------------ */
.login-insecure {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(220, 120, 96, 0.45);
  border-left: 3px solid #dc7860;
  background: rgba(220, 120, 96, 0.09);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
}

.login-insecure strong {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #f0a58f;
}

.login-insecure-url {
  display: inline-block;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--primary-2);
  font-size: 0.78rem;
  word-break: break-all;
}

.login-insecure[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------
 * YÖNETİCİ İŞLEMLERİ · tıklanabilir KPI kartları
 * Kartlar ilgili yönetim sayfasını açar; klavye ile de erişilebilir.
 * ------------------------------------------------------------------- */
.dash-kpi.is-clickable {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.dash-kpi.is-clickable:focus-visible {
  outline: 2px solid rgba(212, 175, 104, 0.75);
  outline-offset: 3px;
}

.kpi-open {
  display: block;
  margin-top: 8px;
  color: rgba(212, 175, 104, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dash-kpi.is-clickable:hover .kpi-open,
.dash-kpi.is-clickable:focus-visible .kpi-open {
  opacity: 1;
  transform: translateX(3px);
}

/* ==================================================================
   GENİŞ ÜYE TABLOSU — İÇERİK ALANINA SIĞAR
   ------------------------------------------------------------------
   Eskiden sabit `min-width: 1040px` vardı; bu, yönetici panelinin içerik
   alanından geniş olduğu için "Kullanıcı Yönetimi" tablosunu sürekli
   yatay kaydırmaya zorluyordu (liste sayfaya sığmıyordu). Artık sabit alt
   sınır YOK: 11 sütun sıkı boşluk ve sarma ile kullanılabilir genişliğe
   sığar. Yine de sığmayacak kadar dar bir ekranda kapsayıcı yatay kaydırır.
   ================================================================== */
.adm-table-wide {
  min-width: 0;
  table-layout: auto;
}

/* Yoğun 11 sütun: içerik alanına (≈718–901px) sığması için sıkı ölçüler. */
.admin-view .adm-table-wide {
  font-size: 0.68rem;
}

.admin-view .adm-table-wide th,
.admin-view .adm-table-wide td {
  padding: 6px 5px;
}

.admin-view .adm-table-wide th {
  font-size: 0.55rem;
  letter-spacing: 0.03em;
}

/* Hücreler sarar. Kısa etiketler (rol, tarih, sayı) kelime ortasından
   KIRILMAZ; yalnızca uzun değerler (e-posta, kullanıcı adı, ağ rozeti)
   gerektiğinde her yerden bölünebilir ki sütunlar daralıp liste sığsın. */
.admin-view .adm-table-wide td {
  white-space: normal;
  overflow-wrap: break-word;
}

.admin-view .adm-table-wide td .adm-sub,
.admin-view .adm-table-wide td .adm-net-chips,
.admin-view .adm-table-wide td .acc-badge {
  overflow-wrap: anywhere;
}

/* Kimlik dar ve tek satır kalır; e-posta ve rozetler alt satıra iner. */
.admin-view .adm-table-wide td.adm-id {
  white-space: nowrap;
  font-size: 0.62rem;
}

/* İkincil satırlar (e-posta, kullanıcı adı, ağ rozetleri) küçülür. */
.admin-view .adm-table-wide td.adm-sub,
.admin-view .adm-table-wide td .adm-sub {
  font-size: 0.62rem;
}

.admin-view .adm-table-wide td .adm-sub,
.admin-view .adm-table-wide td .adm-net-chips {
  display: block;
  margin-top: 2px;
}

/* İşlem düğmeleri metni SARAR ama kelime ortasından KIRILMAZ: İşlem
   sütunu daralır, düğme yazısı hece hece bölünmez. */
.admin-view .adm-table-wide .adm-btn {
  white-space: normal;
  overflow-wrap: normal;
  padding: 5px 8px;
  font-size: 0.64rem;
  line-height: 1.25;
  text-align: center;
}

/* Durum/telegram/ağ rozetleri de bir tık küçülür. */
.admin-view .adm-table-wide .adm-chip,
.admin-view .adm-table-wide .acc-badge {
  padding: 2px 6px;
  font-size: 0.62rem;
}

/* Geniş ekran (≥1240px): içerik alanı 901px'e kadar açılır. Bu genişlikte
   ölçüler bir tık büyür ve İŞLEM düğmeleri tek satırda kalır (dar ekranın
   sıkıştırma kuralları yalnızca gerçekten daralınca devreye girer). */
@media (min-width: 1240px) {
  .admin-view .adm-table-wide {
    font-size: 0.72rem;
  }

  .admin-view .adm-table-wide th,
  .admin-view .adm-table-wide td {
    padding: 8px 8px;
  }

  .admin-view .adm-table-wide .adm-btn {
    white-space: nowrap;
    padding: 6px 9px;
    font-size: 0.68rem;
  }

  /* Üye adı tek satırda kalır; e-posta altında normal şekilde sarar. */
  .admin-view .adm-table-wide td:nth-child(2) {
    white-space: nowrap;
  }

  .admin-view .adm-table-wide td:nth-child(2) .adm-sub {
    white-space: normal;
  }
}

.adm-table td.adm-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  white-space: nowrap;
}

.adm-table td .adm-state-toggle {
  margin-left: 8px;
  vertical-align: middle;
}

.adm-table td.adm-strong.ok { color: #4ade80; }
.adm-table td.adm-strong.err { color: #f87171; }

/* Bekleyen bağlantı kodu uyarısı: üye başka sekmede kod üretmiş olabilir. */
.adm-pending-hint.is-on {
  color: #fbbf24;
  font-weight: 600;
}

/* ==================================================================
   BİLDİRİM ÇANI (sağ üst) — duyuru merkezinden gelen yayınlar
   ================================================================== */
.dash-notify {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dash-notify[hidden] {
  display: none !important;
}

.notify-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.notify-btn:hover,
.notify-btn.is-open {
  color: var(--text);
  border-color: rgba(212, 175, 104, 0.45);
  background: rgba(212, 175, 104, 0.08);
}

.notify-btn.has-unread {
  color: #ffda73;
  border-color: rgba(245, 199, 107, 0.42);
}

.notify-btn:focus-visible {
  outline: 2px solid rgba(212, 175, 104, 0.6);
  outline-offset: 2px;
}

.notify-glyph {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notify-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 60%, #b08a3e);
  color: #0b0d0f;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.notify-badge[hidden] {
  display: none !important;
}

.notify-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 40;
  width: min(340px, 92vw);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 104, 0.26);
  background: rgba(9, 13, 19, 0.98);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}

.notify-panel[hidden] {
  display: none !important;
}

.notify-panel-title {
  font-size: 0.84rem;
  color: var(--primary-2);
}

.notify-panel-sub {
  font-size: 0.66rem;
  font-style: normal;
  color: var(--muted);
  line-height: 1.5;
}

.notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.notify-item {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.notify-item.is-unread {
  border-color: rgba(245, 199, 107, 0.32);
  background: rgba(245, 199, 107, 0.06);
}

.notify-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.notify-item-title {
  font-size: 0.78rem;
  color: var(--text);
}

.notify-new {
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0b0d0f;
  background: linear-gradient(135deg, #f0d7a1, #d4af68);
  border-radius: 99px;
  padding: 2px 7px;
}

.notify-item-meta {
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.notify-item-body {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-line;
}

.notify-read-btn {
  justify-self: start;
  font-size: 0.62rem;
  padding: 6px 10px;
}

/* OTOMATİK ÖDEME DENETİMİ: yönetici listesinde madde madde sonuç çipleri. */
.adm-audit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.adm-check-chip {
  font-size: 0.6rem;
  line-height: 1.35;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.adm-check-chip.is-ok {
  border-color: rgba(74, 222, 128, 0.35);
  color: #86efac;
}

.adm-check-chip.is-warn {
  border-color: rgba(243, 192, 123, 0.35);
  color: #f3c07b;
}

.adm-check-chip.is-block {
  border-color: rgba(255, 107, 107, 0.45);
  color: #fca5a5;
}

/* DEMO HATIRLATMASI (son 24 saat / son 1 saat): duyurulardan ayırt edilsin
   diye sol kenarında ince bir şerit taşır ve başlığı vurguludur. */
.notify-item-demo {
  border-left: 3px solid rgba(245, 199, 107, 0.55);
  background: rgba(245, 199, 107, 0.04);
}

.notify-item-demo.is-unread {
  border-left-color: #e8c27a;
  background: rgba(245, 199, 107, 0.09);
}

.notify-item-demo .notify-item-title {
  color: #f0d7a1;
}

/* ÜYELİK BİLDİRİMİ (ödeme onaylandı, erişim açıldı): yeşil şerit. */
.notify-item-plan {
  border-left: 3px solid rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.04);
}

.notify-item-plan.is-unread {
  border-left-color: #4ade80;
  background: rgba(74, 222, 128, 0.09);
}

.notify-item-plan .notify-item-title {
  color: #86efac;
}

/* ÜYE TARAFI: talep özetinin altındaki otomatik ödeme denetimi maddeleri. */
.member-audit {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.member-audit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text);
}

.member-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.member-audit-item {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--muted);
}

.member-audit-item.is-ok::before {
  content: '✓ ';
  color: #4ade80;
}

.member-audit-item.is-warn::before {
  content: '! ';
  color: #f3c07b;
}

.member-audit-item.is-block::before {
  content: '× ';
  color: #f87171;
}

.member-audit-hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #f3c07b;
}

.notify-empty {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 6px 2px;
}

.notify-foot {
  margin: 0;
  font-size: 0.64rem;
  color: var(--muted);
}

.notify-foot.ok { color: #4ade80; }
.notify-foot.err { color: #f87171; }

.notify-read-all {
  justify-self: start;
  font-size: 0.64rem;
  padding: 7px 11px;
}

.notify-read-all[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .notify-panel {
    width: min(300px, 92vw);
    right: -60px;
  }
}

/* ==================================================================
   YÖNETİCİ MODÜLLERİ — SOL DİKEY SEKME SÜTUNU
   Modül sekmeleri yatay şerit yerine solda dikey bir sütun olarak durur;
   içerik sağda kalır. Dar ekranda tek sütuna düşer ve sekme şeridi yatay
   kaydırılabilir hâle gelir.
   ================================================================== */
.admin-view {
  grid-template-columns: minmax(172px, 216px) minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

.admin-view > .acc-head,
.admin-view > .dash-welcome {
  grid-column: 1 / -1;
}

.admin-view > .admin-panels {
  grid-column: 2;
  min-width: 0;
}

.admin-view .admin-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 8px;
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 128px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.admin-view .admin-tabs::-webkit-scrollbar {
  width: 6px;
  height: 0;
}

.admin-view .admin-tabs::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(212, 175, 104, 0.28);
}

.admin-view .admin-tab {
  width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
}

/* ==================================================================
   YÖNETİCİ MODÜLLERİ — PENCERELER TAM GENİŞLİKTE, ALT ALTA
   ------------------------------------------------------------------
   Her modül sekmesinin içindeki pencereler yan yana iki kolona
   sıkışmak yerine tam genişlikte durur ve alt alta sıralanır.
   İçerik de bu genişliğe göre düzenlenir: etiket–değer listeleri çok
   kolona yayılır, kayıt/olay listeleri iki kolonda akar, tablolar
   genişliği tam kullanır, form alanları aşırı uzamaz.
   ================================================================== */
.admin-view .acc-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-view .acc-grid > .acc-panel {
  width: 100%;
}

/* Etiket–değer listeleri (bot bilgisi, sistem bilgisi) çok kolona yayılır.
   min(…, 100%) sayesinde dar ekranda sütun kutudan taşmaz. */
.admin-view .acc-info {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 14px;
}

/* Kayıt, olay ve mesaj listeleri: yer varsa iki kolon */
.admin-view .adm-list {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: start;
}

/* Form alanları tam genişlikte tek satıra yayılıp uzamaz */
.admin-view .adm-toolbar > .acc-field {
  flex: 1 1 240px;
  max-width: 420px;
}

.admin-view .adm-toolbar > .adm-input.adm-grow {
  max-width: 560px;
}

.admin-view .adm-toolbar > .adm-textarea {
  flex: 1 1 360px;
  max-width: 720px;
}

/* Tablolar panelin tüm genişliğini kullanır */
.admin-view .adm-table-wrap {
  width: 100%;
}

/* Yapışkan sekme sütunu, üst barın gerçek yüksekliğinin altında durur
   (--dash-topbar-h script.js'te güncellenir). */
.admin-view .admin-tabs {
  top: calc(var(--dash-topbar-h, 96px) + 12px);
  max-height: calc(100vh - var(--dash-topbar-h, 96px) - 44px);
}

/* ==================================================================
   TELEFON / TABLET DÜZENİ
   ------------------------------------------------------------------
   Küçük ekranda üst bardaki denetimler daralıp kendi satırına geçer,
   sol menü tek satırlık kaydırılabilir şerit olur, yönetici modül
   sekmeleri tablette dikey sütun olarak kalır, telefonda yatay şeride
   döner. Piyasa şeridi telefonda yatay kaydırılır.
   ================================================================== */
.dash-content > * {
  min-width: 0;
}

.dash-panel,
.dash-table-wrap,
.adm-table-wrap {
  min-width: 0;
  max-width: 100%;
}

/* Üst bar denetim grubu: gerekirse daralır ve sarmalanır */
.dash-header-actions {
  flex-shrink: 1;
  min-width: 0;
}

/* Panel başlığı (başlık + düğmeler) dar ekranda taşmak yerine sarmalanır */
.acc-panel-head {
  flex-wrap: wrap;
}

/* Modül sayfalarının sütunu içeriğin en küçük genişliğine takılmasın;
   geniş tablolar kendi kaydırıcı kutusunda yatay kaydırılır. */
.admin-tabpanel {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  /* 1fr yerine minmax(0,1fr): sütun içeriğin en küçük genişliğine takılıp taşmaz */
  .acc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-view {
    grid-template-columns: minmax(150px, 184px) minmax(0, 1fr);
    column-gap: 14px;
  }

  .admin-view .admin-tab {
    padding: 9px 10px;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 900px) {
  /* Sol menü: sarmalanmaz, tek satır hâlinde yatay kaydırılır */
  .dash-sidebar {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 104, 0.35) transparent;
  }

  .dash-sidebar::-webkit-scrollbar {
    height: 6px;
  }

  .dash-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .dash-sidebar::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(212, 175, 104, 0.35);
  }

  .dash-brand {
    flex: 0 0 auto;
  }

  .dash-nav {
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
    overflow: visible;
    padding-right: 4px;
  }

  .dash-nav-group {
    flex-wrap: nowrap;
  }

  .dash-nav-sep,
  .dash-nav-link {
    flex: 0 0 auto;
  }

  /* Üst bar: başlık + cüzdan üstte, denetimler alt satırda */
  .dash-topbar {
    padding: 12px 16px;
    gap: 10px 12px;
  }

  .dash-header-actions {
    position: relative;
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: 10px;
  }

  .dash-topbar-title {
    font-size: 0.86rem;
  }

  /* Modül sekmeleri yapışkan olmaktan çıkar (üst bar yüksekliği değişken) */
  .admin-view .admin-tabs {
    position: static;
    top: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  /* Bildirim panelleri çana değil üst barın sağ kenarına hizalanır */
  .dash-notify,
  .dash-admin-alerts {
    position: static;
  }

  .notify-panel,
  .admin-alert-panel {
    right: 0;
    left: auto;
    width: min(340px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }

  .admin-alert-panel {
    width: min(320px, calc(100vw - 40px));
  }

  .dash-user-info {
    display: none;
  }

  .dash-user-btn {
    padding: 4px;
    gap: 0;
  }
}

@media (max-width: 900px) {
  /* Piyasa şeridi: dar ekranda tek satır, yatay kaydırılır (sıkışmaz) */
  .ticker-wrap {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 8px;
  }

  .ticker-item {
    flex: 0 0 auto;
    min-width: 134px;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 28px);
  }

  /* Canlı veri rozeti ve dil değiştirici kendi kutusundan çıkıp üst bar
     satırına doğrudan katılır; telefonda daha az yer kaplar. */
  .dash-live-stack {
    display: contents;
  }

  /* Hızlı seçici kutusu da düzleşir: dil düğmeleri üst bar satırına
     doğrudan katılır (aşağıdaki order kuralları işlesin). */
  .dash-quick-bar {
    display: contents;
  }

  .dash-live-pill {
    padding: 6px 11px;
  }

  .dash-user {
    gap: 8px;
    padding: 4px 6px 4px 4px;
  }

  .dash-topbar {
    padding: 10px 12px;
  }

  .dash-content {
    padding: 22px 0 48px;
  }

  .dash-sidebar {
    padding: 8px 12px;
  }

  .dash-nav-link {
    padding: 6px 10px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .dash-header-actions {
    gap: 8px;
  }

  .ticker-item {
    padding: 9px 10px;
    gap: 8px;
  }

  .ticker-item strong {
    font-size: 0.82rem;
  }
}

/* Tablet: üst bar tek satıra iner, cüzdan ve canlı veri rozeti sadeleşir */
@media (max-width: 900px) {
  .dash-wallet {
    padding: 6px 12px;
    border-radius: 12px;
  }

  .dash-wallet-label,
  .dash-wallet-sub {
    display: none;
  }

  .dash-wallet-value {
    font-size: 0.9rem;
  }

  .dash-live-stack {
    display: contents;
  }

  /* Hızlı seçici kutusu da düzleşir: dil düğmeleri üst bar satırına
     doğrudan katılır (aşağıdaki order kuralları işlesin). */
  .dash-quick-bar {
    display: contents;
  }

  .dash-live-pill {
    padding: 7px 10px;
  }

  .dash-live-pill span:not(.live-dot) {
    display: none;
  }

  .dash-network-switch {
    padding: 3px;
    gap: 2px;
  }

  .network-btn {
    padding: 5px 9px;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    gap: 5px;
  }

  .network-btn i {
    width: 6px;
    height: 6px;
  }
}

/* Tanıtım sayfası üst menüsü: 1120 px altında taşmak yerine alt satıra kayar */
@media (max-width: 1120px) {
  .nav-wrap {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  .nav-actions {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  /* Küçük telefonda önce erişilmesi gerekenler: çanlar ve kullanıcı */
  .dash-notify {
    order: 1;
  }

  .dash-admin-alerts {
    order: 2;
  }

  .dash-user {
    order: 3;
  }

  .dash-live-pill {
    order: 4;
  }

  .lang-switch-dash {
    order: 5;
  }

  .dash-network-switch {
    order: 6;
  }

  .network-btn {
    padding: 4px 8px;
    font-size: 0.56rem;
    letter-spacing: 0.03em;
    gap: 4px;
  }

  .lang-btn {
    padding: 4px 8px;
    font-size: 0.6rem;
  }

  .dash-wallet-value {
    font-size: 0.82rem;
  }

  .dash-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .admin-view {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .admin-view > .admin-panels {
    grid-column: 1;
  }

  .admin-view .admin-tabs {
    flex-direction: row;
    align-items: center;
    position: static;
    top: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
  }

  .admin-view .admin-tab {
    width: auto;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
   DEMO SÜRESİ (3 GÜN) — UYARI BANDI VE SEKME KİLİDİ
   Paket almadan kayıt olan üye 3 gün yalnızca LUXNET kullanır; süre
   dolarsa hesap kullanım dışı kalır. Bant anasayfada uyarır, geri
   sayımı gösterir ve paket alımına yönlendirir; kilitli sekmeler soluk
   görünür ve açılmaz. Karar sunucuda verilir (server-store.js).
   ------------------------------------------------------------------ */
.access-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 32px 0;
  padding: 14px 18px;
  border: 1px solid rgba(212, 175, 104, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 104, 0.14), rgba(212, 175, 104, 0.04));
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.access-banner[hidden] {
  display: none;
}

.access-banner[data-access-state="expired"] {
  border-color: rgba(255, 107, 107, 0.42);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.16), rgba(255, 107, 107, 0.04));
}

.access-banner.is-alert {
  animation: access-banner-alert 0.8s ease 2;
}

@keyframes access-banner-alert {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.access-banner-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(212, 175, 104, 0.16);
}

.access-banner-glyph svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--primary-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.access-banner[data-access-state="expired"] .access-banner-glyph svg {
  stroke: var(--danger);
}

.access-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}

.access-banner-title {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.access-banner-text {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.access-banner-locked {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 600;
}

.access-banner-aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.access-banner-count {
  color: var(--primary-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.access-banner-cta {
  padding: 9px 16px;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Kilitli sekmeler: soluk görünür, tıklanınca uyarıya yönlendirir. */
.dash-nav-link.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
}

.dash-nav-link.is-locked:hover {
  color: var(--muted);
  background: transparent;
}

@media (max-width: 900px) {
  .access-banner {
    flex-wrap: wrap;
    margin: 14px 18px 0;
  }

  .access-banner-aside {
    width: 100%;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------------
   DESTEK MERKEZİ (sol menüdeki "Destek" sekmesi)
   Üye kendi taleplerini, yönetici tüm talepleri görür; yazışma sol
   listeden seçilen talebin sağ panelinde gösterilir. Talepler ve
   mesajlar SUNUCUDA tutulur (tek gerçek kaynak).
   ------------------------------------------------------------------ */
.sup-view {
  padding-bottom: 40px;
}

/* ------------------------------------------------------------------
   DESTEK MERKEZİ YAZI BOYUTU
   Destek gövdesi eskiden tek bir dev ölçüye (--sup-font: 1.54rem = 24.6px)
   sabitleniyordu. O zorlama; etiket, saat, rozet, alan ve düğme dahil
   TÜM destek yazısını büyütüp sayfayı diğer panellerden kopuk ve okunaksız
   yapıyordu. Artık böyle bir sabitleme yok: içerik kendi .sup-* ölçülerini
   kullanır (0.62–0.86rem) ve diğer sayfalarla aynı görünür.
   ------------------------------------------------------------------ */

/* İSTİSNA — başlık ve etiket konumları: bu yazılar destek sayfasında da
   diğer sayfalarla AYNI noktada AYNI boyutta görünür (tek kaynak:
   :root içindeki --font-* değişkenleri). */
.sup-view .acc-panel-title {
  font-size: var(--font-panel-title) !important;
}

.sup-view .acc-panel-sub {
  font-size: var(--font-panel-sub) !important;
}

.sup-view .acc-badge {
  font-size: var(--font-panel-badge) !important;
}

.sup-view .acc-status {
  font-size: var(--font-page-status) !important;
}

.sup-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.sup-list-panel {
  position: sticky;
  top: calc(var(--dash-topbar-h, 96px) + 12px);
}

.sup-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.sup-filters .adm-input {
  flex: 1 1 46%;
  min-width: 120px;
}

.sup-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.sup-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}

.sup-item:hover,
.sup-item:focus-visible {
  border-color: rgba(212, 175, 104, 0.34);
  background: rgba(212, 175, 104, 0.06);
  outline: none;
}

.sup-item.is-active {
  border-color: rgba(212, 175, 104, 0.5);
  border-left-color: var(--primary);
  background: rgba(212, 175, 104, 0.1);
}

.sup-item.is-unread {
  border-left-color: var(--primary-2);
}

.sup-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sup-item-time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sup-item-subject {
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.sup-item-who {
  color: var(--primary-2);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  word-break: break-word;
}

.sup-item-preview {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
  word-break: break-word;
}

.sup-empty {
  padding: 16px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.sup-list-actions {
  margin-top: 10px;
}

.sup-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Üye bakışı: elde açık bir yazışma varsa önce O görünür; "yeni talep"
   formu altında kalır (yöneticide yeni talep formu zaten gizlidir). */
.sup-main > #supDetailPanel { order: -1; }

.sup-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.sup-detail-head {
  flex-wrap: wrap;
  gap: 10px;
}

.sup-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.sup-detail-actions .adm-input {
  padding: 7px 10px;
  font-size: 0.72rem;
}

/*
   Yazışma penceresi — WhatsApp gibi davranır:
     · konuşma KENDİ ALANINDA kayar (yeni mesajlar ekranın altında kalmaz),
     · başlık üstte, "yanıt" kutusu konuşmanın hemen altında durur,
     · pencere her zaman EN SON mesajı gösterir (bkz. script.js supThreadToEnd),
       kullanıcı yukarı kaydırıp eski mesajları okurken zorla aşağı çekilmez.
   Konuşma alanı ekrana göre ölçeklenir: kısa ekranda okunabilir bir alt
   sınır (clamp), çok uzun ekranda ise bir üst sınır vardır.
 */
.sup-thread {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: clamp(240px, 52vh, 560px);
  height: clamp(240px, 52dvh, 560px);
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 104, 0.45) transparent;
}

/* Konuşma/liste kaydırma çubuğu (projedeki diğer panellerle aynı): ince ve
   altın tonlu — varsayılan beyaz çubuk karanlık panelde sırıtıyordu. */
.sup-thread::-webkit-scrollbar,
.sup-list::-webkit-scrollbar {
  width: 8px;
}

.sup-thread::-webkit-scrollbar-track,
.sup-list::-webkit-scrollbar-track {
  background: transparent;
}

.sup-thread::-webkit-scrollbar-thumb,
.sup-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(212, 175, 104, 0.35);
}

.sup-thread::-webkit-scrollbar-thumb:hover,
.sup-list::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 104, 0.55);
}

/* Yazışma + "en alta in" katmanı (bkz. index.html .sup-thread-wrap). */
.sup-thread-wrap {
  position: relative;
  margin: 12px 0 14px;
}

/* Konuşma alanı kendi kaydırma penceresidir; dış boşluk sarmalayıcıda kalır. */
.sup-thread-wrap .sup-thread {
  margin: 0;
}

/*
   "En alta in" düğmesi: kullanıcı yukarı kaydırıp eski mesajları okurken
   yeni mesajlar kaçmasın diye yazışmanın sağ alt köşesinde durur; rozet
   kaçırılan mesaj sayısını gösterir (9'dan fazlası "9+").
   Görünürlüğü script.js supJumpBtn/updateSupJump yönetir.
 */
.sup-jump {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.45);
  background: rgba(9, 12, 15, 0.92);
  backdrop-filter: blur(10px);
  color: var(--primary-2);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.sup-jump:hover,
.sup-jump:focus-visible {
  border-color: rgba(212, 175, 104, 0.8);
  transform: translateY(-1px);
  outline: none;
}

.sup-jump-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  color: #0b0d0f;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sup-msg {
  max-width: 78%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.sup-msg.is-member {
  align-self: flex-end;
  border-color: rgba(212, 175, 104, 0.3);
  background: rgba(212, 175, 104, 0.09);
}

.sup-msg.is-support {
  align-self: flex-start;
}

.sup-msg-head {
  display: flex;
  align-items: baseline;
  /* Destek yazısı iki katına çıktığı için dar ekranda üye adı + saat
     balonun dışına taşıyordu; sarmalanınca taşma kesilir. */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-2);
}

.sup-msg-head time {
  color: var(--muted);
  letter-spacing: 0.03em;
}

.sup-msg-body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/*
   "YENİ MESAJLAR" AYIRICISI
   Kullanıcı yukarıdayken gelen İLK mesajın üstünde ince altın çizgi + etiket
   görünür; en alta inildiğinde/okunduğunda kaybolur.
   TIKLANABİLİR: ilk okunmamış mesaja atlar ve İŞARET olarak yerinde kalır.
   (bkz. script.js supThreadUnreadFrom · supUnreadDivider · supJumpToFirstUnread)
 */
.sup-new-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  list-style: none;
  cursor: pointer;
}

.sup-new-line:hover .sup-new-line-label,
.sup-new-line:focus-within .sup-new-line-label {
  border-color: rgba(212, 175, 104, 0.8);
  background: rgba(212, 175, 104, 0.24);
}

.sup-new-line::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 104, 0.15), rgba(212, 175, 104, 0.8));
}

.sup-new-line-label {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.45);
  background: rgba(212, 175, 104, 0.14);
  color: var(--primary-2);
  /* Gerçek bir <button>: tarayıcı varsayılanları sıfırlanır. */
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sup-new-line-label:focus-visible {
  outline: 1px solid rgba(212, 175, 104, 0.8);
  outline-offset: 2px;
}

.sup-empty-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sup-view textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  font-family: inherit;
}

/* Kanıt eki alanı: dosya seçici + seçilen dosyanın önizlemesi. Dosya
   SUNUCUYA gider (bkz. script.js SUP_ATTACH_SLOTS). */
.sup-attach {
  display: grid;
  gap: 8px;
}

.sup-attach-field { margin: 0; }

.sup-attach-preview { display: grid; gap: 8px; }

.sup-attach-hint { font-size: 0.72rem; color: var(--muted); }

.sup-attach-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.sup-attach-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.sup-attach-badge,
.sup-file-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 104, 0.4);
  background: rgba(212, 175, 104, 0.12);
  color: var(--primary-2);
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.06em;
}

.sup-attach-meta,
.sup-file-meta {
  display: grid;
  gap: 3px;
  flex: 1 1 140px;
  min-width: 0;
}

.sup-attach-meta strong,
.sup-file-meta strong { font-size: 0.78rem; overflow-wrap: anywhere; }
.sup-attach-meta span,
.sup-file-meta span { font-size: 0.7rem; color: var(--muted); }

.sup-attach-remove {
  padding: 6px 12px;
  font-size: 0.66rem;
}

/* Yazışmadaki kanıt eki kartı (görsel önizlemesi + açma bağlantısı).
   Yönetici "Eki sil" ile dosyayı sunucudan tamamen kaldırır. */
.sup-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 104, 0.28);
  background: rgba(212, 175, 104, 0.08);
}

.sup-file-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4);
}

.sup-file-open {
  font-size: 0.7rem;
  color: var(--primary-2);
  text-decoration: underline;
}

.sup-file-del {
  padding: 6px 12px;
  font-size: 0.66rem;
  border-color: rgba(255, 107, 107, 0.42);
  color: var(--danger);
}

.sup-file-del:hover { border-color: rgba(255, 107, 107, 0.72); }

/* Liste satırındaki talep silme düğmesi (yalnızca yöneticide çizilir). */
.sup-item-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sup-item-del:hover,
.sup-item-del:focus-visible {
  border-color: rgba(255, 107, 107, 0.6);
  background: rgba(255, 107, 107, 0.16);
  color: var(--danger);
  outline: none;
}

/* Okunmamış destek mesajı rozeti: metne eklenmez, CSS ile çizilir. */
.dash-nav-link-support[data-count]::after {
  content: attr(data-count);
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d7a1, #d4af68 55%, #b08a3e 100%);
  color: #0b0d0f;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dash-nav-link-support.is-active[data-count]::after {
  background: rgba(11, 13, 15, 0.82);
  color: var(--primary-2);
}

/* ====================================================================
   ÜYE SEKMELERİ (Sinyaller · Pozisyonlar · Emirler · Tradingbot ·
   Otokontrol · Stratejiler · İndikatörler · Backtest · Rapor)
   --------------------------------------------------------------------
   Her sekmenin kendi görünümü vardır; bu blok yalnızca o görünümlerin
   ortak düzenini tanımlar (araç çubuğu, süzgeç çipleri, kart/istatistik
   ızgarası, boş durum). Panel ve tablo görünümü mevcut sınıflardan
   (.acc-panel / .dash-table) geldiği için başlık ölçüleri değişmez.
   ==================================================================== */
.tabv .acc-head {
  margin-bottom: 18px;
}

.tabv-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Emirler: "Açılan pozisyonlar" ve "Kapanan işlemler" listeleri ALT ALTA
   durur ve her biri belli bir yükseklikten sonra KENDİ İÇİNDE kaydırılır
   (uzun liste sayfayı uzatmasın: işlem sayısı bir yere kadar görünür). */
.tabv-scroll {
  max-height: 322px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
}

/* Kaydırırken sütun başlıkları görünür kalsın: zemin opak olmalı ki
   satırlar başlığın altından geçerken okunmasın. */
.tabv-scroll .dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0c121b;
  border-bottom-color: rgba(212, 175, 104, 0.22);
}

.tabv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tabv-chip {
  border: 1px solid rgba(212, 175, 104, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  padding: 6px 13px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tabv-chip:hover,
.tabv-chip:focus-visible {
  color: var(--text);
  border-color: rgba(212, 175, 104, 0.5);
}

.tabv-chip.is-active {
  color: #0b0d0f;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
}

.tabv-search {
  min-width: 160px;
  max-width: 220px;
}

.tabv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.tabv .acc-panel {
  height: auto;
}

.tabv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.tabv-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tabv-item-main strong {
  font-size: 0.86rem;
}

.tabv-item-main em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.tabv-item-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tabv-empty {
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.tabv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.tabv-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.tabv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tabv-card strong {
  font-size: 0.92rem;
}

.tabv-card em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.tabv-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tabv-stats .dash-kpi {
  padding: 12px 14px;
  gap: 6px;
}

.tabv-stats .dash-kpi span {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tabv-stats .dash-kpi-value {
  font-size: 1.1rem;
}

.tabv-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tabv-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

.tabv-self-start {
  align-self: flex-start;
}

.tabv-curve {
  height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.tabv-curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tabv-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabv-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
}

.tabv-check-mark.ok {
  border-color: rgba(120, 216, 160, 0.4);
  color: #7fd8a0;
}

.tabv-check-mark.warn {
  border-color: rgba(255, 193, 104, 0.4);
  color: #ffc168;
}

@media (max-width: 1100px) {
  .tabv-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Emirler listeleri: dar ekranda görünen satır sayısı azalır. */
  .tabv-scroll {
    max-height: 288px;
  }
}

@media (max-width: 640px) {
  .tabv-tools {
    justify-content: flex-start;
  }

  .tabv-scroll {
    max-height: 258px;
  }

  .tabv-search {
    max-width: none;
    width: 100%;
  }

  .tabv-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabv-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .sup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sup-list-panel {
    position: static;
  }

  .sup-list {
    max-height: 34vh;
  }

}

/* ==================================================================
   CANLI PİYASA (TRADINGVIEW) + YANINDA POZİSYONDAKİ İŞLEMLER
   ==================================================================
   Grafik alanı ESNEK, pozisyon listesi SABİT ve DAR (istenen: "büyük
   olmayacak şekilde yan hizasında"). 1100px altında alt alta iner. */
.tv-panel {
  margin-top: 14px;
}

.tv-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.tv-main {
  min-width: 0;
}

.tv-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* Başlık + kendi çip grubu TEK kutu: satır kırılınca ayrılmaz. */
.tv-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.tv-bar-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.tv-bar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tv-bar-row button {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.tv-bar-row button:hover {
  color: var(--text);
  border-color: var(--primary);
}

.tv-bar-row button.is-active {
  color: #10131a;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  font-weight: 600;
}

.tv-chart-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #0b0e12;
}

.tv-chart {
  height: 520px;
}

/* TradingView widget kabı grafiği TAM doldurur (boş yükseklik = boş ekran). */
.tv-chart .tradingview-widget-container,
.tv-chart .tradingview-widget-container__widget {
  height: 100%;
}

@media (max-width: 640px) {
  .exchange-menu {
    min-width: 168px;
    max-width: calc(100vw - 24px);
  }
}

/* Panelin kendi canlı fiyat serisi olan coinler işaretlenir. */
.tv-bar-row button.tv-coin-live::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--primary);
  vertical-align: middle;
}

/* Dış kaynak yüklenemezse: DÜRÜST bildirim (uydurma grafik yok) */
.tv-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(7, 9, 11, 0.96);
}

.tv-fallback strong {
  color: var(--text);
  font-size: 1rem;
}

.tv-fallback p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.tv-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.tv-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tv-side-note {
  margin: 0;
  font-size: var(--font-panel-sub);
  color: var(--muted);
}

.tv-side-scroll {
  max-height: 380px;
  overflow-y: auto;
}

.tv-pos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tv-pos:hover {
  border-color: var(--primary);
  background: rgba(212, 175, 104, 0.06);
}

.tv-pos.is-active {
  border-color: var(--primary);
  background: rgba(212, 175, 104, 0.1);
}

.tv-pos-pair {
  font-weight: 600;
}

.tv-pos-meta {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: var(--muted);
}

.tv-pos-pl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tv-empty {
  padding: 10px 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 1100px) {
  .tv-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tv-side-scroll {
    max-height: 260px;
  }

  .tv-chart {
    height: 420px;
  }
}

@media (max-width: 640px) {
  .tv-chart {
    height: 340px;
  }

  .tv-bar-label {
    display: none;
  }
}