/* ═══════════════════════════════════════════════════════════════════════════
   TURKSECURE — TASARIM SİSTEMİ · BİLEŞEN KATMANI  (components.css)
   Yalnızca tokens.css'in SEMANTIC değişkenlerini tüketir — ham hex YOK.
   Sınıflar `ts-` önekli: rollout sırasında eski inline stillerle çakışmaz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  RESET & BASE  ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Sabit header'ın altına çapa ile inildiğinde başlık header'ın altında kalmasın */
  scroll-padding-top:calc(var(--header-h) + var(--space-4));
  /* Yatay taşma her zaman hata sayılır (anayasa madde 10) */
  overflow-x:hidden;
}
body.ts-app{
  margin:0; min-height:100vh;
  overflow-x:hidden;
  /* iPhone çentik/ev çubuğu */
  padding-left:var(--safe-left); padding-right:var(--safe-right);
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--lh-base);
  color:var(--color-text-primary);
  background:var(--color-bg); background-image:var(--color-bg-gradient);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.ts-app::before{  /* ince film grain — yalnız --grain tanımlıysa (koyu tema) */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain); background-size:160px; opacity:.5; mix-blend-mode:overlay;
}
:root[data-theme="deep"] body.ts-app::after{  /* koyu temada süzülen aksan bloom */
  content:""; position:fixed; z-index:-1; pointer-events:none;
  width:60vw; height:60vw; top:-20vw; right:-10vw; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--accent-h) 85% 40% / .14), transparent 62%);
  filter:blur(30px); animation:ts-drift 24s ease-in-out infinite alternate;
}
@keyframes ts-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,4vw) scale(1.12)}}
/* NOT: burada eskiden `body.ts-app>*{position:relative}` vardı — grain/bloom
   katmanlarının üstünde kalmak için. Ama bu kural, position:fixed verilen her
   çocuğu (mobil çekmece, alt gezinme) sessizce akışa geri sokuyordu; çekmece
   mobilde 687px yer kaplayıp içeriği ekran dışına itiyordu. Artık grain ve
   bloom z-index:-1 ile arkada duruyor, çocukların konumlandırmasına
   karışılmıyor. */

/* EVRENSEL KURAL: başlık rengi KABINDAN miras alınır (color:inherit).
   Doğrudan renk atanırsa koyu zeminli bloklar (hero, spotlight, kart) içinde
   başlık siyah kalıyor ve okunmuyordu — kap `color:#fff` dese bile kalıtım
   doğrudan atamayı yenemez. Gövde metni zaten --color-text-primary. */
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-3); color:inherit; line-height:1.15}
h1{font-size:var(--text-3xl)} h2{font-size:var(--text-2xl)} h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)} h5{font-size:var(--text-md)}
p{margin:0 0 var(--space-4)}
a{color:var(--color-text-link); text-decoration:none; transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--color-accent-hover)}
code,kbd,samp,pre{font-family:var(--font-mono); font-size:.92em}
small{font-size:var(--text-sm)}
hr{border:0; border-top:1px solid var(--color-border); margin:var(--space-6) 0}
img{max-width:100%}
::selection{background:var(--accent-glow); color:var(--color-text-primary)}

/* Erişilebilir odak — global outline:none YOK */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs);
}
.ts-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─────────────────────────  EVRENSEL MOBİL KURALLAR  ─────────────────────
   Sitedeki HER bileşen bunlara uyar; tek tek medya sorgusu yazılmaz.        */

/* 1) Dokunma hedefi: tıklanabilir hiçbir şey 44px'in altında olamaz.
      Görsel boyutu küçük kalsın diye alanı pseudo-element ile genişletiriz —
      böylece tasarım bozulmadan parmakla isabet kolaylaşır. */
@media (pointer:coarse){
  .ts-tap,
  .ts-btn--sm, .ts-btn--icon,
  .ts-tab, .ts-breadcrumb a, .ts-action, .ts-menu a,
  /* Eski view'lardan kalan küçük düğmeler (QA taramasında yakalandı) */
  .ed-tool, .modal-close{
    position:relative;
  }
  .ts-tap::after,
  .ts-btn--sm::after, .ts-btn--icon::after,
  .ts-tab::after, .ts-breadcrumb a::after, .ts-action::after, .ts-menu a::after,
  .ed-tool::after, .modal-close::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    min-width:var(--tap-min); min-height:var(--tap-min); width:100%; height:100%;
  }
}

/* 2) Yatay kaydırılabilir şeritler: taşan sekme/rozet satırları kesilmez,
      parmakla kaydırılır ve kaydırma çubuğu gizlenir. */
.ts-scroller{
  display:flex; gap:var(--space-2); overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* kenarlarda kesik görünmesin diye gutter kadar taşır, içeriden dengeler */
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.ts-scroller::-webkit-scrollbar{display:none}
.ts-scroller>*{flex:0 0 auto; scroll-snap-align:start}

/* 3) Uzun metin hiçbir yerde kutudan taşmaz (kullanıcı adı, başlık, URL) */
.ts-truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ts-clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ts-break{overflow-wrap:anywhere; word-break:break-word}

/* ─────────────────────────────  LAYOUT YARDIMCI  ────────────────────────── */
.ts-container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter)}
.ts-container--wide{max-width:var(--container-wide)}
.ts-container--narrow{max-width:var(--container-narrow)}
/* Sabit header altında ilk bölüm header'a yapışmasın (anayasa madde 5) */
.ts-main{display:block; padding-block:var(--space-6) var(--space-10); min-height:60vh}
.ts-stack{display:flex; flex-direction:column; gap:var(--space-4)}
.ts-row{display:flex; align-items:center; gap:var(--space-3)}
.ts-row--between{justify-content:space-between}
.ts-row--wrap{flex-wrap:wrap}
.ts-grid{display:grid; gap:var(--space-5)}
.ts-spacer{flex:1 1 auto}
.ts-muted{color:var(--color-text-muted)}
.ts-secondary{color:var(--color-text-secondary)}
.ts-mono{font-family:var(--font-mono)}
.ts-eyebrow{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-accent)}

/* ── Editoryal tipografi & premium yardımcılar ── */
.ts-display{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:var(--text-4xl); line-height:var(--lh-4xl); letter-spacing:var(--tracking-tight); margin:0}
.ts-gradient-text{background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.ts-gradient-text--flow{background:linear-gradient(115deg,var(--accent) 0%,var(--accent2) 35%,hsl(300 85% 64%) 60%,var(--accent) 100%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:ts-flow 7s linear infinite}
@keyframes ts-flow{to{background-position:280% 0}}
/* Scroll-reveal — JS .ts-in ekler */
.ts-reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.ts-reveal.ts-in{opacity:1; transform:none}
/* Canlı aktivite sparkline (hero görsel katmanı) */
.ts-spark{display:flex; align-items:flex-end; gap:5px; height:60px}
.ts-spark span{flex:1; min-width:4px; border-radius:3px 3px 0 0; background:var(--brand-gradient); opacity:.85; animation:ts-eq 1.7s var(--ease-standard) infinite}
@keyframes ts-eq{0%,100%{height:28%}50%{height:92%}}
/* Nokta-ızgara doku (hero zemini) */
.ts-dotgrid{background-image:radial-gradient(var(--color-border-strong) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 72%); mask-image:radial-gradient(ellipse at center, #000 30%, transparent 72%)}
.ts-kicker{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-text-muted)}
.ts-kicker::before{content:""; width:22px; height:1px; background:var(--color-accent)}
.ts-glass{background:var(--color-glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg)}
.ts-glow-text{text-shadow:0 0 24px var(--accent-glow)}

/* ─────────────────────────────  SECTION / DIVIDER  ──────────────────────── */
.ts-section-title{display:flex; align-items:baseline; gap:var(--space-4); margin:0 0 var(--space-6)}
.ts-section-title h2,.ts-section-title h3{margin:0; letter-spacing:var(--tracking-snug)}
.ts-section-title .ts-num{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--color-accent); -webkit-text-fill-color:var(--color-accent); background:var(--color-accent-soft); padding:4px 9px; border-radius:var(--radius-sm); border:1px solid color-mix(in srgb,var(--color-accent) 18%, transparent)}
.ts-section-title .ts-rule{flex:1; height:1px; background:linear-gradient(90deg,var(--color-border-strong),transparent); align-self:center}

/* ─────────────────────────────  BUTON  ─────────────────────────────────── */
.ts-btn{
  --_bg:var(--color-surface-raised); --_fg:var(--color-text-primary); --_bd:var(--color-border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  line-height:1; padding:0 var(--space-4); height:40px; border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd); cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-standard),
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
  white-space:nowrap; text-decoration:none; user-select:none;
}
.ts-btn:hover{transform:translateY(-1px); background:var(--color-surface-hover)}
.ts-btn:active{transform:translateY(0)}
.ts-btn:disabled,.ts-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.ts-btn i,.ts-btn svg{font-size:1.05em}

.ts-btn--primary{--_fg:#fff; --_bd:transparent; background:var(--brand-gradient); box-shadow:0 6px 22px var(--accent-glow), inset 0 1px 0 hsl(0 0% 100% / .22); position:relative}
.ts-btn--primary:hover{background:var(--brand-gradient); box-shadow:0 10px 30px var(--accent-glow), inset 0 1px 0 hsl(0 0% 100% / .25)}
.ts-btn--danger{--_bg:var(--color-danger); --_fg:var(--danger-ink); --_bd:transparent}
.ts-btn--success{--_bg:var(--color-success); --_fg:var(--success-ink); --_bd:transparent}
.ts-btn--ghost{--_bg:transparent; --_bd:transparent; --_fg:var(--color-text-secondary)}
.ts-btn--ghost:hover{--_fg:var(--color-text-primary)}
.ts-btn--outline{--_bg:transparent; --_bd:var(--color-border-strong)}
.ts-btn--sm{height:32px; font-size:var(--text-xs); padding:0 var(--space-3)}
.ts-btn--lg{height:48px; font-size:var(--text-base); padding:0 var(--space-6)}
.ts-btn--icon{width:40px; padding:0} .ts-btn--icon.ts-btn--sm{width:32px} .ts-btn--icon.ts-btn--lg{width:48px}
.ts-btn--block{display:flex; width:100%}

/* ─────────────────────────────  FORM  ─────────────────────────────────── */
.ts-field{display:flex; flex-direction:column; gap:var(--space-2)}
.ts-label{font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--color-text-secondary)}
.ts-label .ts-req{color:var(--color-danger)}
.ts-input,.ts-select,.ts-textarea{
  font-family:var(--font-body); font-size:var(--text-base); color:var(--color-text-primary);
  background:var(--color-surface-sunken); border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md); padding:0 var(--space-3); height:42px; width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ts-textarea{height:auto; min-height:120px; padding:var(--space-3); resize:vertical; line-height:var(--lh-base)}
.ts-input::placeholder,.ts-textarea::placeholder{color:var(--color-text-muted)}
.ts-input:focus,.ts-select:focus,.ts-textarea:focus{outline:none; border-color:var(--color-accent); box-shadow:var(--focus-ring)}
.ts-input:disabled,.ts-select:disabled,.ts-textarea:disabled{opacity:.55; cursor:not-allowed}
.ts-select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%); background-position:calc(100% - 18px) center,calc(100% - 13px) center; background-size:5px 5px; background-repeat:no-repeat; padding-right:var(--space-8)}
.ts-hint{font-size:var(--text-xs); color:var(--color-text-muted)}
.ts-field--error .ts-input,.ts-field--error .ts-textarea,.ts-field--error .ts-select{border-color:var(--color-danger)}
.ts-field--error .ts-hint{color:var(--color-danger)}
.ts-input-group{position:relative; display:flex; align-items:center}
.ts-input-group>i:first-child{position:absolute; left:var(--space-3); color:var(--color-text-muted); pointer-events:none}
.ts-input-group>i:first-child~.ts-input{padding-left:var(--space-8)}

/* Toggle (2FA aç/kapa vb.) */
.ts-toggle{position:relative; display:inline-flex; align-items:center; cursor:pointer; gap:var(--space-3)}
.ts-toggle input{position:absolute; opacity:0; width:0; height:0}
.ts-toggle .ts-track{width:44px; height:26px; border-radius:var(--radius-pill); background:var(--color-surface-raised); border:1px solid var(--color-border-strong); transition:background var(--duration-base) var(--ease-standard); flex:none}
.ts-toggle .ts-track::after{content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:var(--color-text-muted); transition:transform var(--duration-base) var(--ease-elastic),background var(--duration-base) var(--ease-standard)}
.ts-toggle input:checked~.ts-track{background:var(--color-accent-soft); border-color:var(--color-accent)}
.ts-toggle input:checked~.ts-track::after{transform:translateX(18px); background:var(--color-accent)}
.ts-toggle input:focus-visible~.ts-track{box-shadow:var(--focus-ring)}

/* ─────────────────────────────  KART  ─────────────────────────────────── */
.ts-card{
  position:relative; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--elev-1);
  overflow:hidden; transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out);
}
.ts-card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--color-hairline) 40%,var(--color-hairline) 60%,transparent); pointer-events:none}
.ts-card--raised{background:var(--color-surface-raised); box-shadow:var(--elev-2)}
.ts-card--interactive{cursor:pointer}
.ts-card--interactive:hover{border-color:var(--color-border-accent); box-shadow:var(--elev-3); transform:translateY(-3px)}
.ts-card__body{padding:var(--space-6)}
.ts-card__header{padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:var(--space-3)}
.ts-card__footer{padding:var(--space-4) var(--space-6); border-top:1px solid var(--color-border); display:flex; align-items:center; gap:var(--space-3)}
.ts-card--accent::after{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand-gradient)}
/* Gradyan-kenarlı premium kart (hero/öne çıkan) */
.ts-card--edge{border-color:transparent; background:
  linear-gradient(var(--color-surface),var(--color-surface)) padding-box,
  linear-gradient(135deg, var(--accent-dim), transparent 55%) border-box; border:1px solid transparent}

/* ─────────────────────────────  ROZET / PILL  ──────────────────────────── */
.ts-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semibold);
  line-height:1; padding:5px 10px; border-radius:var(--radius-pill);
  background:var(--color-surface-raised); color:var(--color-text-secondary); border:1px solid var(--color-border-strong);
}
.ts-badge--accent{background:var(--color-accent-soft); color:var(--color-accent-hover); border-color:var(--color-border-accent)}
.ts-badge--success{background:var(--color-success-soft); color:var(--color-success); border-color:transparent}
.ts-badge--danger{background:var(--color-danger-soft); color:var(--color-danger); border-color:transparent}
.ts-badge--warning{background:var(--color-warning-soft); color:var(--color-warning); border-color:transparent}
.ts-badge--info{background:var(--color-info-soft); color:var(--color-info); border-color:transparent}
.ts-badge__dot{width:7px; height:7px; border-radius:50%; background:currentColor}

/* Rol/rank rozeti — renk RoleRegistry'den style="--rank:var(--rank-admin)" ile gelir.
   Üye rolleri: açık çip + renkli ikon-coin.  Personel (data-tier=staff): dolu
   gradyan + beyaz metin → görsel otorite hiyerarşisi. */
.ts-rank{
  display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 3px;
  border-radius:var(--radius-pill); font-size:11px; font-weight:var(--fw-bold); letter-spacing:.005em; line-height:1;
  color:var(--rank,var(--rank-user));
  background:color-mix(in srgb, var(--rank,var(--rank-user)) 9%, var(--color-surface));
  border:1px solid color-mix(in srgb, var(--rank,var(--rank-user)) 22%, transparent);
}
.ts-rank__icon{width:17px; height:17px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:9px;
  color:#fff; background:var(--rank,var(--rank-user)); box-shadow:0 1px 2px color-mix(in srgb, var(--rank,var(--rank-user)) 45%, transparent)}
.ts-rank[data-tier="staff"]{color:#fff; border-color:transparent; padding-left:3px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--rank) 86%, white 16%), var(--rank));
  box-shadow:0 1px 2px color-mix(in srgb, var(--rank) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.28)}
.ts-rank[data-tier="staff"] .ts-rank__icon{background:rgba(255,255,255,.24); box-shadow:none}
/* İkonsuz varyant (tablo/dar alan) — coin yoksa sol padding'i düzelt */
.ts-rank:not(:has(.ts-rank__icon)){padding-left:11px}

/* ─────────────────────────────  DURUM ROZETİ (profil HUD)  ──────────────── */
.ts-status{display:inline-flex; align-items:center; gap:7px; font-size:var(--text-xs); font-weight:var(--fw-semibold); padding:5px 11px; border-radius:var(--radius-pill); border:1px solid var(--color-border-strong); background:var(--color-surface-raised); color:var(--color-text-secondary)}
.ts-status__dot{width:8px; height:8px; border-radius:50%; background:var(--color-text-muted); flex:none}
.ts-status--online .ts-status__dot{background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 30%,transparent); animation:ts-pulse 2.4s var(--ease-standard) infinite}
.ts-status--idle  .ts-status__dot{background:var(--warning); box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 30%,transparent)}
.ts-status--offline .ts-status__dot{background:var(--n-500)}
.ts-status--on{color:var(--success); border-color:transparent; background:var(--color-success-soft)}
.ts-status--off{color:var(--color-text-muted)}
.ts-status--verified{color:var(--info); border-color:transparent; background:var(--color-info-soft)}
.ts-status--unverified{color:var(--warning); border-color:transparent; background:var(--color-warning-soft)}
@keyframes ts-pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 30%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 8%,transparent)}}

/* ─────────────────────────────  AVATAR  ────────────────────────────────── */
.ts-avatar{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface-raised); border:1px solid var(--color-border-strong); font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--color-text-secondary); flex:none}
.ts-avatar img{width:100%; height:100%; object-fit:cover}
.ts-avatar--sm{width:30px; height:30px; border-radius:var(--radius-sm); font-size:var(--text-xs)}
.ts-avatar--lg{width:64px; height:64px; border-radius:var(--radius-lg); font-size:var(--text-xl)}
.ts-avatar--xl{width:96px; height:96px; border-radius:var(--radius-xl); font-size:var(--text-2xl)}
.ts-avatar__ring{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent)}
.ts-avatar__presence{position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--color-surface); background:var(--n-500)}
.ts-avatar__presence--online{background:var(--success)} .ts-avatar__presence--idle{background:var(--warning)}

/* ─────────────────────────────  SEKME  ────────────────────────────────── */
.ts-tabs{
  display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border);
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* Sağda daha fazla sekme olduğunu gösteren solma — kesik görünüm yerine ipucu */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.ts-tabs::-webkit-scrollbar{display:none}
.ts-tabs>*{flex:0 0 auto; scroll-snap-align:start}
/* Tüm sekmeler sığıyorsa solmaya gerek yok */
@media (min-width:1024px){
  .ts-tabs{-webkit-mask-image:none; mask-image:none}
}
.ts-tab{
  appearance:none; background:none; border:0; cursor:pointer; position:relative;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  color:var(--color-text-muted); padding:var(--space-3) var(--space-4); white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-standard);
}
.ts-tab:hover{color:var(--color-text-secondary)}
.ts-tab[aria-selected="true"]{color:var(--color-text-primary)}
.ts-tab[aria-selected="true"]::after{content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:-1px; height:2px; background:var(--color-accent); border-radius:2px 2px 0 0}
/* Dokunmalı ekranda sekme yüksekliği 44px'in altına düşmesin. */
@media (max-width:768px){
  .ts-tab{min-height:44px; display:inline-flex; align-items:center; gap:6px}
}
.ts-tabpanel[hidden]{display:none}

/* ─────────────────────────────  TABLO  ────────────────────────────────── */
.ts-table-wrap{overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg)}
.ts-table{width:100%; border-collapse:collapse; font-size:var(--text-sm)}
.ts-table th{text-align:left; font-weight:var(--fw-semibold); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-xs); padding:var(--space-3) var(--space-4); background:var(--color-surface-raised); border-bottom:1px solid var(--color-border)}
.ts-table td{padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); color:var(--color-text-secondary)}
.ts-table tr:last-child td{border-bottom:0}
.ts-table tbody tr{transition:background var(--duration-fast) var(--ease-standard)}
.ts-table tbody tr:hover{background:var(--color-surface-hover)}

/* ─────────────────────────────  DROPDOWN / MENÜ  ───────────────────────── */
.ts-menu{background:var(--color-surface-overlay); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-3); padding:var(--space-2); min-width:200px; backdrop-filter:blur(14px)}
.ts-menu__item{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); color:var(--color-text-secondary); font-size:var(--text-sm); cursor:pointer; transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.ts-menu__item:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ts-menu__item i{width:18px; text-align:center; color:var(--color-text-muted)}
.ts-menu__sep{height:1px; background:var(--color-border); margin:var(--space-2) 0}

/* ─────────────────────────────  MODAL / DİYALOG  ───────────────────────── */
.ts-modal-backdrop{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(2,3,5,.72); backdrop-filter:blur(6px); display:grid; place-items:center; padding:var(--space-5); opacity:0; visibility:hidden; transition:opacity var(--duration-base) var(--ease-standard),visibility var(--duration-base)}
.ts-modal-backdrop[data-open="true"]{opacity:1; visibility:visible}
.ts-modal{width:100%; max-width:480px; background:var(--color-surface-overlay); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg); box-shadow:var(--elev-4); transform:translateY(12px) scale(.98); transition:transform var(--duration-base) var(--ease-out); max-height:90vh; display:flex; flex-direction:column}
.ts-modal-backdrop[data-open="true"] .ts-modal{transform:none}
.ts-modal__header{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border)}
.ts-modal__header h3{margin:0; font-size:var(--text-lg)}
.ts-modal__body{padding:var(--space-6); overflow-y:auto}
.ts-modal__footer{padding:var(--space-4) var(--space-6); border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:var(--space-3)}
.ts-modal__close{margin-left:auto}

/* ─────────────────────────────  TOAST  ────────────────────────────────── */
.ts-toasts{position:fixed; bottom:var(--space-6); right:var(--space-6); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--space-3); max-width:360px}
.ts-toast{display:flex; align-items:flex-start; gap:var(--space-3); background:var(--color-surface-overlay); border:1px solid var(--color-border-strong); border-left:3px solid var(--color-accent); border-radius:var(--radius-md); box-shadow:var(--elev-3); padding:var(--space-3) var(--space-4); animation:ts-toast-in var(--duration-base) var(--ease-out)}
.ts-toast--success{border-left-color:var(--color-success)} .ts-toast--danger{border-left-color:var(--color-danger)} .ts-toast--warning{border-left-color:var(--color-warning)}
.ts-toast i{color:var(--color-accent); font-size:1.1em; margin-top:2px} .ts-toast--success i{color:var(--color-success)} .ts-toast--danger i{color:var(--color-danger)}
.ts-toast__title{font-weight:var(--fw-semibold); font-size:var(--text-sm)}
.ts-toast__msg{font-size:var(--text-xs); color:var(--color-text-secondary)}
@keyframes ts-toast-in{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}

/* ─────────────────────────────  LOGIN GATE (ziyaretçi duvarı)  ──────────── */
.ts-gate{display:flex; align-items:center; justify-content:center; padding:var(--space-10) var(--space-5); min-height:62vh; background:var(--color-bg)}
.ts-gate--inline{min-height:auto; padding:var(--space-8) var(--space-5); background:transparent}
.ts-gate__card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl); box-shadow:var(--elev-3); padding:var(--space-9) var(--space-8); max-width:520px; width:100%; text-align:center}
.ts-gate__icon{font-size:52px; color:var(--color-text-primary); margin-bottom:var(--space-5); line-height:1}
.ts-gate__title{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:var(--text-2xl); letter-spacing:var(--tracking-tight); color:var(--color-text-primary); margin:0 0 var(--space-4); line-height:1.04}
.ts-gate__desc{color:var(--color-text-secondary); font-size:var(--text-base); line-height:1.65; margin:0 0 var(--space-6)}
.ts-gate__desc strong{color:var(--color-text-primary); font-weight:var(--fw-bold)}
.ts-gate__btn{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--color-text-primary); color:#fff; padding:15px 30px; border-radius:var(--radius-md); font-weight:var(--fw-bold); font-size:var(--text-md); text-decoration:none; transition:background var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.ts-gate__btn:hover{background:var(--color-accent); color:#fff; transform:translateY(-2px)}
.ts-gate__alt{display:inline-block; margin-top:var(--space-4); color:var(--color-text-muted); font-size:var(--text-sm); text-decoration:none}
.ts-gate__alt:hover{color:var(--color-accent)}
/* Forum içi: 2. yorumdan sonra login duvarı */
.ts-gate-fade{position:relative}
.ts-gate-more{display:flex; align-items:center; justify-content:center; gap:9px; text-align:center; color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--fw-semibold); margin:0 0 var(--space-4)}
.ts-gate-more i{color:var(--color-accent)}

/* ─────────────────────────────  BOŞ DURUM / İSKELET  ───────────────────── */
.ts-empty{text-align:center; padding:var(--space-10) var(--space-5); color:var(--color-text-muted)}
.ts-empty i{font-size:42px; color:var(--color-border-strong); margin-bottom:var(--space-4); display:block}
.ts-empty h4{color:var(--color-text-secondary); margin-bottom:var(--space-2)}
.ts-skeleton{background:linear-gradient(90deg,var(--color-surface-raised) 25%,var(--color-surface-hover) 50%,var(--color-surface-raised) 75%); background-size:200% 100%; animation:ts-shimmer 1.4s linear infinite; border-radius:var(--radius-sm)}
@keyframes ts-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ─────────────────────────────  ETKİLEŞİM ÇUBUĞU (forum)  ──────────────── */
.ts-actionbar{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap}
.ts-action{display:inline-flex; align-items:center; gap:7px; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--color-text-muted); background:none; border:0; cursor:pointer; padding:7px 12px; border-radius:var(--radius-sm); transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.ts-action:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ts-action--active{color:var(--color-accent)}
.ts-action--like.ts-action--active{color:var(--danger)}
.ts-action--report:hover{color:var(--color-danger)}

/* ─────────────────────────────  PROGRESS / STEPPER  ────────────────────── */
.ts-progress{height:8px; border-radius:var(--radius-pill); background:var(--color-surface-sunken); overflow:hidden}
.ts-progress__bar{height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--color-accent),var(--accent-bright)); transition:width var(--duration-slow) var(--ease-out)}
.ts-stepper{display:flex; align-items:center; gap:var(--space-2)}
.ts-step{display:flex; align-items:center; gap:var(--space-2); color:var(--color-text-muted); font-size:var(--text-sm)}
.ts-step__num{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--color-surface-raised); border:1px solid var(--color-border-strong); font-size:var(--text-xs); font-weight:var(--fw-bold)}
.ts-step--done .ts-step__num{background:var(--color-accent); color:var(--color-accent-contrast); border-color:transparent}
.ts-step--active .ts-step__num{border-color:var(--color-accent); color:var(--color-accent)}
.ts-step--active{color:var(--color-text-primary)}
.ts-stepper .ts-step__line{flex:1; height:1px; background:var(--color-border-strong); min-width:20px}

/* ═════════════════════  FORUM (mevcut yapı korunur, tokenlenir)  ══════════ */

/* Breadcrumb */
/* ─────────────────────────────  BREADCRUMB  ──────────────────────────────
   Masaüstünde tam yol; mobilde yalnız "← bir üst seviye" + mevcut sayfa.
   Amaç: küçük ekranda yolu okutmak değil, TEK DOKUNUŞLA geri dönüş vermek.
   Tam yol markup'ta kalır (ekran okuyucu + Schema.org JSON-LD görür).       */
.ts-breadcrumb{
  display:block; font-size:var(--text-sm); color:var(--color-text-muted);
  padding-block:var(--space-3);
}
.ts-breadcrumb__list{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-1) var(--space-2);
  list-style:none; margin:0; padding:0;
}
.ts-breadcrumb__item{display:inline-flex; align-items:center; gap:var(--space-2); min-width:0}
/* Ayraç — markup'a karakter yazılmaz, ekran okuyucu tekrar etmesin */
.ts-breadcrumb__item+.ts-breadcrumb__item::before{
  content:"/"; color:var(--color-border-strong); font-weight:var(--fw-medium);
}
.ts-breadcrumb a{
  color:var(--color-text-secondary); border-radius:var(--radius-xs);
  padding-block:2px; text-decoration:none;
}
.ts-breadcrumb a:hover{color:var(--color-accent); text-decoration:underline; text-underline-offset:3px}
.ts-breadcrumb__current{
  color:var(--color-text-primary); font-weight:var(--fw-semibold);
  max-width:min(60ch, 100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Mobil geri oku — yalnız küçük ekranda görünür */
.ts-breadcrumb__back{display:none}

@media (max-width:767px){
  /* Son iki öğe dışındaki her şey gizlenir: [.. üst seviye] / [mevcut sayfa] */
  .ts-breadcrumb__item:not(:last-child):not(:nth-last-child(2)){display:none}
  /* Üst seviye artık ilk görünen öğe — ayracı kalkar, yerine geri oku gelir */
  .ts-breadcrumb__item:nth-last-child(2)::before{content:none}
  .ts-breadcrumb__item:nth-last-child(2) a{
    display:inline-flex; align-items:center; gap:var(--space-2);
    min-height:var(--tap-min); font-weight:var(--fw-semibold);
    color:var(--color-text-primary);
  }
  .ts-breadcrumb__back{display:inline-block; font-size:var(--text-md); line-height:1}
  /* Mevcut sayfa mobilde ikinci planda: yer kaplamasın, taşmasın */
  .ts-breadcrumb__current{
    font-weight:var(--fw-normal); color:var(--color-text-muted);
    max-width:min(22ch, 46vw);
  }
}
/* Tek seviyeli sayfada (yalnız "Ana Sayfa") breadcrumb gösterilmez —
   PHP tarafı zaten basmaz, bu güvenlik ağı. */
.ts-breadcrumb__list:has(> :only-child){display:none}

/* Duyuru / spotlight bannerı (mevcut "Hoş Geldiniz" kartı) */
.ts-spotlight{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:var(--space-8); color:#fff;
  background:linear-gradient(120deg,#15171f 0%,#1b1e2b 60%,#241a20 100%); box-shadow:var(--elev-2)}
.ts-spotlight::after{content:""; position:absolute; width:420px; height:420px; top:-160px; right:-120px; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--accent-h) 78% 46% / .38), transparent 62%); pointer-events:none}
.ts-spotlight>*{position:relative}
.ts-spotlight h2{color:#fff}
.ts-spotlight p{color:hsl(230 20% 82%)}

/* Kategori rozeti (çok-renkli kategori pilleri) — renk style="--cat:var(--cat-2)" */
.ts-catbadge{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-sm); line-height:1;
  color:var(--cat,var(--cat-1)); background:color-mix(in srgb, var(--cat,var(--cat-1)) 12%, transparent)}
.ts-catbadge::before{content:""; width:6px; height:6px; border-radius:2px; background:currentColor; transform:rotate(45deg); flex:none}
.ts-catbadge i{font-size:.9em}

/* Pill sekme çubuğu (mevcut "Son Konular / Popüler / ..." tab bar) */
.ts-tabs--pill{border-bottom:1px solid var(--color-border); gap:var(--space-1); padding-bottom:var(--space-3)}
.ts-tabs--pill .ts-tab{border-radius:var(--radius-pill); padding:8px 14px; display:inline-flex; align-items:center; gap:7px}
.ts-tabs--pill .ts-tab[aria-selected="true"]{background:var(--color-accent-soft); color:var(--color-accent)}
.ts-tabs--pill .ts-tab[aria-selected="true"]::after{display:none}

/* ── GitHub/StackOverflow ince dokunuşları ── */
/* SO tarzı etiket (tag) — sakin, küçük-harf, hafif mavi tint */
.ts-tag{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:var(--fw-medium); line-height:1.35; white-space:nowrap;
  background:color-mix(in srgb, var(--info) 9%, var(--color-surface));
  color:color-mix(in srgb, var(--info) 62%, var(--color-text-secondary));
  border:1px solid color-mix(in srgb, var(--info) 16%, transparent);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)}
.ts-tag:hover{background:color-mix(in srgb, var(--info) 16%, var(--color-surface)); color:var(--info)}
.ts-tags{display:flex; flex-wrap:wrap; gap:5px}

/* GitHub tarzı sayaç rozeti (sekme yanı) */
.ts-counter{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; padding:0 6px; border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:11px; font-weight:var(--fw-semibold);
  background:color-mix(in srgb, var(--color-text-muted) 16%, transparent); color:var(--color-text-secondary)}
.ts-tab[aria-selected="true"] .ts-counter{background:var(--color-accent-soft); color:var(--color-accent)}

/* SO tarzı itibar (yazar kartı) */
.ts-rep{font-family:var(--font-mono); font-weight:var(--fw-bold); color:var(--color-text-primary); font-size:var(--text-sm)}

/* Kullanıcı istatistikleri — BEĞENİ · KONU · TİCARET (platforma özel, yazar kartı) */
.ts-userstats{display:flex; align-items:stretch; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface)}
.ts-userstats>div{flex:1; text-align:center; padding:7px 4px}
.ts-userstats>div+div{border-left:1px solid var(--color-border)}
.ts-userstats b{display:block; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-sm); line-height:1.1; color:var(--color-text-primary)}
.ts-userstats span{font-size:9px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted)}
.ts-userstats .ts-us-like b{color:var(--color-accent)}

/* Konu listesi tablosu (KONU & DETAYLAR · CEVAP · HİT · SON HAREKET) */
.ts-topiclist{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1)}
.ts-topiclist__head,.ts-topic-row{display:grid; grid-template-columns:minmax(0,1fr) 64px 92px 236px; gap:var(--space-4); align-items:center}
.ts-topiclist__head{padding:var(--space-3) var(--space-5); background:var(--color-surface-sunken); border-bottom:1px solid var(--color-border);
  font-size:var(--text-xs); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-text-muted)}
.ts-topiclist__head span:not(:first-child),.ts-topic-stat{text-align:center}
.ts-topiclist__head span:last-child{text-align:right}
.ts-topic-row{position:relative; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); transition:background var(--duration-fast) var(--ease-standard)}
.ts-topic-row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--color-accent); transition:width var(--duration-fast) var(--ease-out)}
.ts-topic-row:last-child{border-bottom:0}
.ts-topic-row:hover{background:var(--color-surface-hover)}
.ts-topic-row:hover::before{width:3px}
.ts-topic-main{display:flex; gap:var(--space-3); align-items:center; min-width:0}
.ts-topic-av{width:44px; height:44px; border-radius:var(--radius-md); flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:var(--fw-bold); color:#fff; font-size:var(--text-sm); letter-spacing:.02em;
  background:linear-gradient(155deg, color-mix(in srgb, var(--avc,var(--color-accent)) 80%, white 24%), var(--avc,var(--color-accent)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 1px 3px rgba(16,20,30,.18); text-shadow:0 1px 1px rgba(0,0,0,.18)}
.ts-topic-title{font-weight:var(--fw-semibold); color:var(--color-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.ts-topic-title:hover{color:var(--color-accent); text-decoration:underline; text-underline-offset:2px}
.ts-topic-meta{font-size:var(--text-xs); color:var(--color-text-muted); margin-top:4px}
.ts-topic-meta b{color:var(--color-accent); font-weight:var(--fw-semibold)}
.ts-topic-stat b{display:block; font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--color-text-primary)}
.ts-topic-stat span{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted)}
.ts-topic-stat--answered b{color:var(--success)}   /* SO: cevaplanmış konu yeşil */
.ts-topic-stat--answered span{color:color-mix(in srgb,var(--success) 70%, var(--color-text-muted))}
.ts-topic-last{display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); text-align:right; min-width:0}
.ts-topic-last>span{min-width:0; max-width:100%}
.ts-topic-last .ts-catbadge{font-size:10px; padding:4px 9px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ts-topic-last .ts-topic-lastmeta{font-size:var(--text-xs); color:var(--color-text-muted)}

/* Konu başlığı kartı (thread header — üst aksan çizgisi) */
.ts-topichead{background:var(--color-surface); border:1px solid var(--color-border); border-top:3px solid var(--color-accent); border-radius:var(--radius-lg); padding:var(--space-7); box-shadow:var(--elev-1)}
.ts-topichead h1{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:var(--text-2xl); letter-spacing:var(--tracking-tight); margin:var(--space-3) 0}
.ts-topichead__meta{display:flex; gap:var(--space-4); font-size:var(--text-sm); color:var(--color-text-muted)}
.ts-topichead__meta i{margin-right:5px}

/* Thread gönderi bloğu (yazar rayı solda + içerik sağda) */
.ts-post{display:grid; grid-template-columns:200px 1fr; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1)}
.ts-post__author{padding:var(--space-5); text-align:center; background:var(--color-surface-sunken); border-right:1px solid var(--color-border)}
.ts-post__author .ts-avatar{margin:0 auto var(--space-3)}
.ts-post__name{font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--color-text-primary)}
.ts-post__main{padding:var(--space-5); min-width:0}
.ts-post__head{display:flex; justify-content:space-between; align-items:center; font-size:var(--text-xs); color:var(--color-text-muted); border-bottom:1px solid var(--color-border); padding-bottom:var(--space-3); margin-bottom:var(--space-4)}
@media (max-width:640px){.ts-post{grid-template-columns:1fr}.ts-post__author{border-right:0; border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:var(--space-3); text-align:left}.ts-post__author .ts-avatar{margin:0}}

/* ─────────────────────────────  STAT / METRİK (editoryal yoğunluk)  ─────── */
.ts-stat{display:flex; flex-direction:column; gap:2px}
.ts-stat__num{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:var(--text-2xl); line-height:1; letter-spacing:var(--tracking-tight); color:var(--color-text-primary)}
.ts-stat__num--accent{background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.ts-stat__label{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-muted)}
.ts-statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-6); padding:var(--space-5) 0}
.ts-statgrid>.ts-stat{padding-left:var(--space-5); border-left:1px solid var(--color-border)}
.ts-statgrid>.ts-stat:first-child{padding-left:0; border-left:0}

/* Kalıcı p-side nav rail (Faz 1'de layout'a girecek — bileşen burada hazır) */
.ts-rail{display:flex; flex-direction:column; gap:2px}
.ts-rail__item{display:flex; align-items:center; gap:var(--space-3); padding:10px 14px; border-radius:var(--radius-md); color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--fw-medium); text-decoration:none; position:relative; transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.ts-rail__item i{width:20px; text-align:center; color:var(--color-text-muted); transition:color var(--duration-fast)}
.ts-rail__item:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ts-rail__item--active{background:var(--color-accent-soft); color:var(--color-text-primary)}
.ts-rail__item--active i{color:var(--color-accent)}
.ts-rail__item--active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand-gradient)}
.ts-rail__badge{margin-left:auto; font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--color-accent); background:var(--color-accent-soft); padding:2px 8px; border-radius:var(--radius-pill)}

/* ─────────────────────────────  PROSE (BBCode çıktısı)  ────────────────── */
.ts-prose{font-size:var(--text-base); line-height:var(--lh-base); color:var(--color-text-secondary); word-break:break-word}
.ts-prose strong{color:var(--color-text-primary); font-weight:var(--fw-bold)}
.ts-prose a.ts-prose__link{color:var(--color-text-link); font-weight:var(--fw-medium)}
.ts-prose__img{max-width:100%; border-radius:var(--radius-md); border:1px solid var(--color-border); margin:var(--space-3) 0}
.ts-prose__empty{color:var(--color-text-muted); text-align:center; padding:var(--space-6); border:1px dashed var(--color-border-strong); border-radius:var(--radius-md)}
.ts-quote{margin:var(--space-3) 0; padding:var(--space-3) var(--space-4); border-left:3px solid var(--color-accent); background:var(--color-surface-raised); border-radius:0 var(--radius-md) var(--radius-md) 0; display:block}
.ts-quote__head{display:block; font-size:var(--text-sm); color:var(--color-accent); margin-bottom:var(--space-2)}
.ts-quote__body{display:block; color:var(--color-text-secondary)}
.ts-code{background:var(--color-surface-sunken); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); overflow-x:auto; margin:var(--space-3) 0}
.ts-code code{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-primary); white-space:pre}
.ts-mark{background:color-mix(in srgb,var(--warning) 26%,transparent); color:var(--color-text-primary); padding:1px 4px; border-radius:var(--radius-xs)}
.ts-spoiler{background:var(--color-surface-hover); color:transparent; border-radius:var(--radius-xs); padding:1px 4px; cursor:pointer; transition:color var(--duration-fast),background var(--duration-fast)}
.ts-spoiler.ts-revealed,.ts-spoiler:focus{color:var(--color-text-secondary); background:var(--color-surface-raised)}

/* ─────────────────────────────  RESPONSIVE  ────────────────────────────── */
@media (max-width:768px){
  .ts-container{padding-inline:var(--space-4)}
  h1{font-size:var(--text-2xl)} h2{font-size:var(--text-xl)}
  .ts-toasts{left:var(--space-4); right:var(--space-4); bottom:var(--space-4); max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .ts-reveal{opacity:1!important; transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME — HEADER / MOBİL ÇEKMECE / ALT GEZİNME / FOOTER
   Mobil öncelikli: stiller önce küçük ekrana yazılır, min-width ile büyür.
   Kırılım noktaları yalnız 768 / 1024 (tokens.css'te belgelenen sistem).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────────── */
.ts-header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--color-glass);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--color-border);
  padding-top:var(--safe-top);
}
.ts-header__bar{
  display:flex; align-items:center; gap:var(--space-3);
  height:var(--header-h);
  width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter);
}
.ts-header__logo{display:inline-flex; align-items:center; flex:0 0 auto}
.ts-header__logo img{height:46px; width:auto; display:block}
@media (min-width:768px){ .ts-header__logo img{height:58px} }
@media (min-width:1024px){ :root{--header-h:80px} }
.ts-header__spacer{flex:1 1 auto}

/* Ikon düğmesi — header eylemleri (arama, mesaj, bildirim, menü) */
.ts-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  width:var(--tap-min); height:var(--tap-min); flex:0 0 auto;
  border:0; background:transparent; color:var(--color-text-secondary);
  border-radius:var(--radius-md); cursor:pointer; font-size:var(--text-md);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ts-iconbtn:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ts-iconbtn__dot{
  position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%;
  background:var(--color-accent); border:2px solid var(--color-surface);
}

/* Masaüstü arama — mobilde gizli, yerine overlay açılır */
.ts-header__search{display:none}
.ts-header__nav{display:none}

/* Giriş/Kayıt — mobilde yalnız "Kayıt Ol" görünür, yer kazanır */
.ts-header__auth{display:flex; align-items:center; gap:var(--space-2)}
.ts-header__auth .ts-btn--outline{display:none}

@media (min-width:768px){
  .ts-header__auth .ts-btn--outline{display:inline-flex}
}
@media (min-width:1024px){
  .ts-header__search{
    display:flex; flex:1 1 auto; max-width:440px; align-items:center; gap:var(--space-2);
    background:var(--color-surface-sunken); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding-inline:var(--space-3); height:40px;
  }
  .ts-header__search input{
    flex:1; border:0; background:transparent; outline:none;
    font:inherit; font-size:var(--text-sm); color:var(--color-text-primary);
  }
  .ts-header__search i{color:var(--color-text-muted)}
  .ts-header__nav{display:flex; align-items:center; gap:var(--space-1)}
  .ts-header__searchbtn, .ts-header__menubtn{display:none}
}

/* Masaüstü nav bağlantısı */
.ts-navlink{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height:40px; padding-inline:var(--space-4); border-radius:var(--radius-md);
  color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.ts-navlink:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ts-navlink[aria-current="page"]{color:var(--color-accent); background:var(--color-accent-soft)}

/* ── Mobil arama katmanı ─────────────────────────────────────────────────── */
.ts-searchlayer{
  position:fixed; inset:0; z-index:var(--z-drawer); display:none;
  background:var(--color-surface); padding-top:var(--safe-top);
}
.ts-searchlayer[data-open="true"]{display:block}
.ts-searchlayer__bar{
  display:flex; align-items:center; gap:var(--space-2);
  height:var(--header-h); padding-inline:var(--gutter);
  border-bottom:1px solid var(--color-border);
}
.ts-searchlayer input{
  flex:1; min-width:0; height:40px; border:0; outline:none; background:transparent;
  font:inherit; font-size:var(--text-md); color:var(--color-text-primary);
}

/* ── Mobil çekmece (tam ekran) ───────────────────────────────────────────── */
.ts-drawer{
  position:fixed; inset:0; z-index:var(--z-drawer);
  display:flex; flex-direction:column;
  background:var(--color-surface);
  transform:translateX(-100%); visibility:hidden;
  transition:transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
  padding-top:var(--safe-top); padding-bottom:var(--safe-bottom);
  overflow-y:auto; overscroll-behavior:contain;
}
.ts-drawer[data-open="true"]{transform:none; visibility:visible}
.ts-drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  height:var(--header-h); padding-inline:var(--gutter);
  border-bottom:1px solid var(--color-border); flex:0 0 auto;
}
.ts-drawer__body{padding:var(--space-4) var(--gutter) var(--space-8)}
.ts-drawer__user{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4); margin-bottom:var(--space-4);
  background:var(--color-surface-sunken); border-radius:var(--radius-lg);
}
.ts-drawer__cap{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--color-text-muted);
  margin:var(--space-5) 0 var(--space-2);
}
.ts-drawer a.ts-drawer__link{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--tap-min); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); color:var(--color-text-primary);
  font-size:var(--text-md); font-weight:var(--fw-medium);
}
.ts-drawer a.ts-drawer__link:hover{background:var(--color-surface-hover)}
.ts-drawer a.ts-drawer__link i{width:22px; text-align:center; color:var(--color-text-muted)}
.ts-drawer a.ts-drawer__link[aria-current="page"]{color:var(--color-accent); background:var(--color-accent-soft)}
.ts-drawer a.ts-drawer__link[aria-current="page"] i{color:var(--color-accent)}

/* Açıkken arka planın kaymasını engelle */
body.ts-noscroll{overflow:hidden}

@media (min-width:1024px){
  .ts-drawer, .ts-searchlayer{display:none !important}
}

/* ── Alt gezinme (yalnız mobil) ──────────────────────────────────────────
   Forumda en sık kullanılan dört hedef başparmak menzilinde olsun.        */
.ts-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--color-glass);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--color-border);
  padding-bottom:var(--safe-bottom);
}
.ts-bottomnav a{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:58px; padding-block:var(--space-2);
  color:var(--color-text-muted); font-size:11px; font-weight:var(--fw-semibold);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--duration-fast) var(--ease-standard);
}
.ts-bottomnav a i{font-size:18px; transition:transform var(--duration-base) var(--ease-elastic)}
.ts-bottomnav a:active i{transform:scale(.88)}
.ts-bottomnav a[aria-current="page"]{color:var(--color-accent)}
.ts-bottomnav a[aria-current="page"] i{transform:translateY(-1px)}
/* Aktif sekmenin üstünde ince gösterge */
.ts-bottomnav a[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--color-accent);
}
/* Okunmamış sayacı rozeti */
.ts-bottomnav a[data-count]:not([data-count="0"])::after{
  content:attr(data-count); position:absolute; top:6px; left:calc(50% + 8px);
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--color-accent); color:#fff;
  font-size:10px; font-weight:var(--fw-bold); line-height:17px; text-align:center;
  border:2px solid var(--color-surface);
}
/* Alt çubuk içeriği örtmesin */
body.ts-app{padding-bottom:calc(56px + var(--safe-bottom))}
@media (min-width:1024px){
  .ts-bottomnav{display:none}
  body.ts-app{padding-bottom:0}
}

/* ── Footer ──────────────────────────────────────────────────────────────
   Anayasa madde 8: kolonlu (marka + linkler + iletişim) + imza öğesi.
   NOT: footer logosu ARTIK .ts-header__logo kullanmıyor — o sınıfta height:100%
   vardı ve grid kolonunun tamamını kaplayıp marka metnini en alta itiyordu.  */
.ts-footer{
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
  margin-top:var(--space-10);
}
.ts-footer__logo{display:inline-flex; align-items:center}
.ts-footer__logo img{height:40px; width:auto; display:block}

.ts-footer__grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-7);
  padding-block:var(--space-9);
  align-items:start;            /* kolonlar tepeden hizalanır, metin dibe kaçmaz */
}
.ts-footer__brand{display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start}
.ts-footer__desc{
  margin:0; max-width:46ch;
  font-size:var(--text-sm); line-height:var(--lh-base); color:var(--color-text-secondary);
}
/* Topluluk sayaçları — footer'a hayat veren gerçek veri */
.ts-footer__stats{display:flex; gap:var(--space-6); flex-wrap:wrap}
.ts-footer__stat{display:flex; flex-direction:column; gap:2px}
.ts-footer__stat b{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-black);
  color:var(--color-text-primary); line-height:1;
}
.ts-footer__stat span{
  font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--color-text-muted); font-weight:var(--fw-semibold);
}
.ts-footer__social{display:flex; gap:var(--space-2)}
.ts-footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap-min); height:var(--tap-min);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text-secondary); font-size:var(--text-md);
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ts-footer__social a:hover{border-color:var(--color-border-accent); color:var(--color-accent)}

.ts-footer__col h4{
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--color-text-muted); margin:0 0 var(--space-2);
}
.ts-footer__col a{
  display:flex; align-items:center; gap:var(--space-2);
  min-height:var(--tap-min);
  color:var(--color-text-secondary); font-size:var(--text-sm);
}
.ts-footer__col a:hover{color:var(--color-accent)}
.ts-footer__col a i{font-size:11px; opacity:.45}

.ts-footer__bottom{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding-block:var(--space-5); border-top:1px solid var(--color-border);
  font-size:var(--text-sm); color:var(--color-text-muted);
}
/* İmza öğesi — markaya ait tek satırlık damga */
.ts-footer__sign{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide); color:var(--color-text-muted);
}
.ts-footer__sign i{color:var(--color-accent)}

@media (min-width:768px){
  .ts-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .ts-footer__col a{min-height:34px}
  .ts-footer__bottom{flex-direction:row; align-items:center; justify-content:space-between}
}


/* ── Yasal açılır panel (footer) — <details> ile, JS'siz ───────────────────── */
.ts-legal{
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-accent-soft); margin-top:var(--space-6);
}
.ts-legal>summary{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--tap-min); padding:var(--space-3) var(--space-4);
  cursor:pointer; list-style:none;
  font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--color-accent-hover);
}
.ts-legal>summary::-webkit-details-marker{display:none}
.ts-legal>summary>span{flex:1; min-width:0}
.ts-legal__arrow{transition:transform var(--duration-fast) var(--ease-standard)}
.ts-legal[open] .ts-legal__arrow{transform:rotate(180deg)}
.ts-legal__body{
  padding:0 var(--space-4) var(--space-4);
  font-size:var(--text-sm); line-height:var(--lh-base); color:var(--color-text-secondary);
}
.ts-legal__body p{margin:0 0 var(--space-3)}
.ts-legal__body p:last-child{margin:0}

/* ── Çevrimiçi durumu kartı ──────────────────────────────────────────────
   Tüm sayılar GERÇEK veriden gelir; üretilen/simüle sayı yoktur.          */
.ts-presence{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--elev-1); overflow:hidden;
  /* Üstteki kategori kartıyla birleşiyordu — kendi üst boşluğunu taşır */
  margin-top:var(--space-6);
}
.ts-presence__head{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.ts-presence__live{
  position:relative; width:10px; height:10px; border-radius:50%;
  background:var(--color-success); flex:0 0 auto;
}
.ts-presence__live::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--color-success); opacity:.45;
  animation:ts-pulse 2.4s var(--ease-out) infinite;
}
@keyframes ts-pulse{
  0%{transform:scale(.6); opacity:.5}
  70%{transform:scale(1.5); opacity:0}
  100%{opacity:0}
}
.ts-presence__title{
  margin:0; font-size:var(--text-md); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-snug);
}
.ts-presence__all{
  margin-left:auto; font-size:var(--text-sm); font-weight:var(--fw-semibold);
  color:var(--color-accent); display:inline-flex; align-items:center; gap:6px;
  min-height:var(--tap-min);
}

/* Sayaç şeridi */
.ts-presence__stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-bottom:1px solid var(--color-border);
}
.ts-presence__stat{
  padding:var(--space-4) var(--space-5);
  border-right:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.ts-presence__stat:nth-child(2n){border-right:0}
.ts-presence__stat:nth-last-child(-n+2){border-bottom:0}
.ts-presence__stat b{
  display:block; font-family:var(--font-display); font-size:var(--text-xl);
  font-weight:var(--fw-black); line-height:1.1; color:var(--color-text-primary);
}
.ts-presence__stat span{
  font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--color-text-muted); font-weight:var(--fw-semibold);
}
@media (min-width:768px){
  .ts-presence__stats{grid-template-columns:repeat(4,1fr)}
  .ts-presence__stat{border-bottom:0}
  .ts-presence__stat:nth-child(2n){border-right:1px solid var(--color-border)}
  .ts-presence__stat:last-child{border-right:0}
}

/* Çevrimiçi üye listesi */
.ts-presence__list{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
}
.ts-presence__user{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:5px 10px 5px 5px; border-radius:var(--radius-pill);
  background:var(--color-surface-sunken); border:1px solid var(--color-border);
  font-size:var(--text-sm); font-weight:var(--fw-semibold);
  color:var(--color-text-primary); min-height:34px; max-width:100%;
}
.ts-presence__user:hover{border-color:var(--color-border-accent)}
.ts-presence__av{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:var(--fw-bold); color:#fff;
  background:var(--_c, var(--color-text-muted));
}
.ts-presence__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ts-presence__role{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--_c, var(--color-text-muted));
}
.ts-presence__empty{
  padding:var(--space-5); color:var(--color-text-muted); font-size:var(--text-sm);
}

/* Rol açıklaması */
.ts-presence__legend{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
  padding:var(--space-3) var(--space-5) var(--space-4);
  border-top:1px dashed var(--color-border);
}
.ts-presence__legend span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:var(--fw-semibold); color:var(--color-text-secondary);
}
.ts-presence__legend i{width:7px; height:7px; border-radius:50%; display:inline-block}

/* Nötr rozet — durum dışı etiketler (iptal, arşiv, pasif) */
.ts-badge--muted{background:var(--color-surface-sunken); color:var(--color-text-muted); border-color:var(--color-border)}

/* ── Bildirim paneli ─────────────────────────────────────────────────────── */
.ts-notif{position:relative; flex:0 0 auto}
.ts-notif__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:var(--z-dropdown);
  width:min(360px, calc(100vw - 2*var(--gutter)));
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--elev-4);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
  overflow:hidden;
}
.ts-notif__panel[data-open="true"]{opacity:1; visibility:visible; transform:translateY(0)}
.ts-notif__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border);
}
.ts-notif__clear{
  border:0; background:none; cursor:pointer; padding:4px 6px; border-radius:var(--radius-sm);
  font:inherit; font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--color-accent);
}
.ts-notif__clear:hover{background:var(--color-accent-soft)}
.ts-notif__list{max-height:min(420px, 60vh); overflow-y:auto; overscroll-behavior:contain}
.ts-notif__item{
  display:flex; gap:var(--space-3); align-items:flex-start;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border);
  color:var(--color-text-primary);
}
.ts-notif__item:last-child{border-bottom:0}
.ts-notif__item:hover{background:var(--color-surface-hover)}
.ts-notif__item.is-unread{background:var(--color-accent-soft)}
.ts-notif__item.is-unread:hover{background:var(--color-accent-soft); filter:brightness(.98)}
.ts-notif__icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:12px;
  background:var(--color-surface-sunken); color:var(--color-text-secondary);
}
.ts-notif__icon.is-system{background:var(--color-accent); color:#fff}
.ts-notif__body{display:flex; flex-direction:column; gap:2px; min-width:0}
.ts-notif__msg{font-size:var(--text-sm); line-height:1.45; overflow-wrap:anywhere}
.ts-notif__time{font-size:11px; color:var(--color-text-muted)}
.ts-notif__empty{padding:var(--space-7) var(--space-4); text-align:center; color:var(--color-text-muted); font-size:var(--text-sm); margin:0}