/* ═══════════════════════════════════════════════════════════════════════════
   ACTFUL COMMUNITY — TASARIM SİSTEMİ · BİLEŞEN KATMANI  (components.css)
   Yalnız tokens.css'in semantik değişkenlerini tüketir. `ts-` önekli sınıflar
   genel bileşenler; forum kabuğu ve akış forum.css'tedir (`ac-` öneki).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  TEMEL  ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + var(--space-4));
  /* clip: yatay taşmayı keser ama kaydırma kabı OLUŞTURMAZ — "hidden" body'yi kaydırma
     kabı yapıp üst çubuğun ve sol rayın position:sticky davranışını bozuyordu */
  overflow-x:hidden; overflow-x:clip;
  background:var(--color-bg);
}
body.ts-app{
  margin:0; min-height:100vh; overflow-x:hidden; overflow-x:clip;
  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-color:var(--color-bg);
  background-image:var(--page-glow);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";
}
/* ~%3 film grain — yalnız koyu temada (--grain açık temada none) */
body.ts-app::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:160px; opacity:.035;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:var(--fw-bold); letter-spacing:var(--tracking-snug); margin:0 0 var(--space-3); color:inherit; line-height:1.15}
h1{font-size:var(--text-3xl); letter-spacing:var(--tracking-tight)} 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:.9em}
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%}
button{font:inherit}
::selection{background:var(--accent-glow); color:var(--color-text-primary)}

/* Odak — klavyeyle gezinmede her zaman görünür */
: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}

/* İçeriğe geç bağlantısı — yalnız odakta görünür */
.ac-skip{position:fixed; left:var(--space-3); top:-60px; z-index:calc(var(--z-toast) + 1);
  background:var(--color-text-primary); color:var(--color-bg); padding:10px 16px; border-radius:var(--radius-md);
  font-weight:var(--fw-semibold); font-size:var(--text-sm); transition:top var(--duration-fast) var(--ease-out)}
.ac-skip:focus{top:var(--space-3); color:var(--color-bg)}
#icerik{display:block; height:0; outline:none}
.ac-body--feed>#icerik{position:absolute}   /* ızgarada hücre kaplamasın */

/* Dokunmatik ekranda küçük düğmelerin dokunma alanı ≥44px */
@media (pointer:coarse){
  /* .ts-tab burada değil: kendisi zaten 44px yüksek ve ::after etkin sekme çizgisi için kullanılıyor */
  .ts-tap,.ts-btn--sm,.ts-btn--icon,.ts-breadcrumb a,.ts-action,.ts-menu a{position:relative}
  .ts-tap::after,.ts-btn--sm::after,.ts-btn--icon::after,.ts-breadcrumb a::after,.ts-action::after,.ts-menu a::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%;
  }
}

.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}
.ts-scroller::-webkit-scrollbar{display:none}
.ts-scroller>*{flex:0 0 auto; scroll-snap-align:start}
.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}

/* ─────────────────────────────  YERLEŞİM YARDIMCILARI  ──────────────────── */
.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)}
.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,.ts-kicker{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--color-text-muted)}
.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,.ts-gradient-text--flow{color:var(--color-accent)}
.ts-reveal{opacity:1}
.ts-glass{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg)}

.ts-section-title{display:flex; align-items:baseline; gap:var(--space-4); margin:0 0 var(--space-5)}
.ts-section-title h2,.ts-section-title h3{margin:0}
.ts-section-title .ts-rule{flex:1; height:1px; background:var(--color-border); align-self:center}

/* ─────────────────────────────  DÜĞME  ─────────────────────────────────── */
.ts-btn{
  --_bg:var(--color-surface); --_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:38px; border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  white-space:nowrap; text-decoration:none; user-select:none;
}
.ts-btn:hover{background:var(--color-surface-hover); color:var(--_fg)}
.ts-btn:active{transform:translateY(1px)}
.ts-btn:disabled,.ts-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.ts-btn i,.ts-btn svg{font-size:1em}
.ts-btn--primary{--_bg:var(--color-accent); --_fg:var(--color-accent-contrast); --_bd:transparent}
.ts-btn--primary:hover{background:var(--color-accent-hover); color:var(--color-accent-contrast)}
.ts-btn--ink{--_bg:var(--color-text-primary); --_fg:var(--color-bg); --_bd:transparent}
.ts-btn--ink:hover{background:var(--color-text-secondary); color:var(--color-bg)}
.ts-btn--danger{--_bg:var(--color-danger); --_fg:#fff; --_bd:transparent}
.ts-btn--danger:hover{background:var(--color-danger); filter:brightness(1.08)}
.ts-btn--success{--_bg:var(--color-accent); --_fg:var(--color-accent-contrast); --_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:46px; font-size:var(--text-base); padding:0 var(--space-6)}
.ts-btn--icon{width:38px; padding:0} .ts-btn--icon.ts-btn--sm{width:32px} .ts-btn--icon.ts-btn--lg{width:46px}
.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-primary)}
.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); 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:140px; 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:0 0 0 3px var(--accent-glow)}
.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)}

.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-sunken); border:1px solid var(--color-border-strong); transition:background var(--duration-base) var(--ease-standard); flex:none; position:relative}
.ts-toggle .ts-track::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--color-text-muted); transition:transform var(--duration-base) var(--ease-out),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 / ROZET  ──────────────────────────── */
.ts-card{position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden}
.ts-card--raised{box-shadow:var(--elev-2)}
.ts-card--interactive{cursor:pointer; transition:border-color var(--duration-base) var(--ease-standard)}
.ts-card--interactive:hover{border-color:var(--color-border-strong)}
.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-badge{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semibold); line-height:1; padding:5px 9px; border-radius:var(--radius-sm); background:var(--color-surface-sunken); color:var(--color-text-secondary); border:1px solid var(--color-border)}
.ts-badge--accent,.ts-badge--success{background:var(--color-accent-soft); color:var(--color-accent-text); 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,.ts-badge--muted{background:var(--color-surface-sunken); color:var(--color-text-secondary); border-color:var(--color-border)}
.ts-badge__dot{width:7px; height:7px; border-radius:50%; background:currentColor}

/* Rol rozeti — sade: personel aksanlı, üye nötr */
.ts-rank{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-sm); font-size:11px; font-weight:var(--fw-bold); line-height:1.2;
  color:var(--color-text-secondary); background:var(--color-surface-sunken); border:1px solid var(--color-border)}
.ts-rank[data-tier="staff"]{color:var(--color-accent-text); background:var(--color-accent-soft); border-color:transparent}
.ts-rank__icon{font-size:10px}

.ts-status{display:inline-flex; align-items:center; gap:7px; font-size:var(--text-xs); font-weight:var(--fw-semibold); padding:5px 10px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); 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(--color-accent)}
.ts-status--idle .ts-status__dot{background:var(--color-warning)}

.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-sunken); border:1px solid var(--color-border); flex:none; object-fit:cover}
.ts-avatar img{width:100%; height:100%; object-fit:cover}
.ts-avatar--sm{width:30px; height:30px; border-radius:var(--radius-sm)}
.ts-avatar--lg{width:64px; height:64px; border-radius:var(--radius-lg)}
.ts-avatar--xl{width:96px; height:96px; border-radius:var(--radius-xl)}

/* ─────────────────────────────  SEKME / TABLO / MENÜ  ──────────────────── */
.ts-tabs{display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border); overflow-x:auto; scrollbar-width:none}
.ts-tabs::-webkit-scrollbar{display:none}
.ts-tabs>*{flex:0 0 auto}
.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; display:inline-flex; align-items:center; gap:6px; min-height:44px}
.ts-tab:hover{color:var(--color-text-primary)}
.ts-tab[aria-selected="true"],.ts-tab[aria-current="page"]{color:var(--color-text-primary)}
.ts-tab[aria-selected="true"]::after,.ts-tab[aria-current="page"]::after{content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:-1px; height:2px; background:var(--color-accent)}
.ts-tabpanel[hidden]{display:none}

.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); font-size:var(--text-xs); padding:var(--space-3) var(--space-4); background:var(--color-surface-sunken); 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-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}
.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}
.ts-menu__item:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}

/* ─────────────────────────────  MODAL / TOAST  ─────────────────────────── */
.ts-modal-backdrop{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(2,3,5,.7); 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); max-height:90vh; display:flex; flex-direction:column}
.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__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-toasts{position:fixed; bottom:calc(var(--space-6) + 64px); right:var(--space-5); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--space-3); max-width:380px}
@media (min-width:1024px){ .ts-toasts{bottom:var(--space-6)} }
.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--danger{border-left-color:var(--color-danger)}
.ts-toast i{color:var(--color-accent); margin-top:2px}
.ts-toast--danger i{color:var(--color-danger)}
.ts-toast__msg{font-size:var(--text-sm); color:var(--color-text-primary)}
@keyframes ts-toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ─────────────────────────────  GİRİŞ DUVARI / BOŞ DURUM  ──────────────── */
.ts-gate{display:flex; align-items:center; justify-content:center; padding:var(--space-10) var(--gutter); min-height:60vh}
.ts-gate--inline{min-height:auto; padding:var(--space-6) 0}
.ts-gate__card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-9) var(--space-7); max-width:500px; width:100%; text-align:center}
.ts-gate__icon{font-size:26px; color:var(--color-accent); margin-bottom:var(--space-4); width:56px; height:56px; display:inline-grid; place-items:center; border-radius:var(--radius-lg); background:var(--color-accent-soft)}
.ts-gate__title{font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-2xl); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-3); line-height:1.08}
.ts-gate__desc{color:var(--color-text-secondary); margin:0 0 var(--space-6)}
.ts-gate__btn{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--color-accent); color:var(--color-accent-contrast); padding:14px 24px; border-radius:var(--radius-md); font-weight:var(--fw-bold); text-decoration:none}
.ts-gate__btn:hover{background:var(--color-accent-hover); color:var(--color-accent-contrast)}
.ts-gate__alt{display:inline-block; margin-top:var(--space-4); color:var(--color-text-secondary); font-size:var(--text-sm)}
.ts-gate-more{display:flex; align-items:center; justify-content:center; gap:9px; color:var(--color-text-muted); font-size:var(--text-sm)}

.ts-empty{text-align:center; padding:var(--space-10) var(--space-5); color:var(--color-text-muted)}
.ts-empty i{font-size:32px; color:var(--color-text-muted); margin-bottom:var(--space-4); display:block}
.ts-empty h4{color:var(--color-text-primary); margin-bottom:var(--space-2)}

.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 10px; border-radius:var(--radius-sm)}
.ts-action:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}

/* ─────────────────────────────  SAYFA YOLU  ────────────────────────────── */
.ts-breadcrumb{display:block; font-size:var(--text-sm); color:var(--color-text-muted)}
.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}
.ts-breadcrumb__item+.ts-breadcrumb__item::before{content:"/"; color:var(--color-border-strong)}
.ts-breadcrumb a{color:var(--color-text-secondary)}
.ts-breadcrumb a:hover{color:var(--color-accent-text); text-decoration:underline; text-underline-offset:3px}
.ts-breadcrumb__current{color:var(--color-text-primary); font-weight:var(--fw-medium); max-width:min(60ch,100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ts-breadcrumb__back{display:none}
@media (max-width:767px){
  .ts-breadcrumb__item:not(:last-child):not(:nth-last-child(2)){display:none}
  .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}
  .ts-breadcrumb__current{font-weight:var(--fw-normal); color:var(--color-text-muted); max-width:min(22ch,46vw)}
}
.ts-breadcrumb__list:has(> :only-child){display:none}

/* ─────────────────────────────  ESKİ GÖVDE BİÇİMLERİ  ──────────────────── */
.ts-prose{font-size:var(--text-base); line-height:1.7; color:var(--color-text-primary); overflow-wrap:anywhere}
.ts-quote{margin:var(--space-3) 0; padding:var(--space-2) var(--space-4); border-left:3px solid var(--color-border-strong); color:var(--color-text-secondary); display:block}
.ts-code{background:var(--slab-bg); color:#e7ece9; border-radius:var(--radius-md); padding:var(--space-4); overflow-x:auto; margin:var(--space-3) 0}
.ts-spotlight{border-radius:var(--radius-lg); padding:var(--space-7); background:var(--slab-bg); color:var(--slab-text)}
.ts-catbadge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:var(--fw-semibold); padding:3px 8px; border-radius:var(--radius-sm); color:var(--color-text-secondary); background:var(--color-surface-sunken)}
.ts-tag{display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:var(--fw-medium); background:var(--color-surface-sunken); color:var(--color-text-secondary); border:1px solid var(--color-border)}
.ts-tags{display:flex; flex-wrap:wrap; gap:5px}
.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; background:var(--color-surface-sunken); color:var(--color-text-secondary)}
.ts-rep{font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--text-sm)}
.ts-stat{display:flex; flex-direction:column; gap:2px}
.ts-stat__num{font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--text-xl); line-height:1; color:var(--color-text-primary)}
.ts-stat__label{font-size:var(--text-xs); color:var(--color-text-muted)}
.ts-statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--space-5)}
.ts-legal{border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); 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)}
.ts-legal>summary::-webkit-details-marker{display:none}
.ts-legal__body{padding:0 var(--space-4) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary)}

/* ═══════════════════════════════════════════════════════════════════════════
   SİTE ÇERÇEVESİ — ÜST ÇUBUK · ÇEKMECE · ALT GEZİNME · ALTBİLGİ
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--color-bg);   /* opak çubuk: cam/bulanıklık efekti yok */
  border-bottom:1px solid var(--color-border);
  padding-top:var(--safe-top);
}
.ac-top__bar{
  display:flex; align-items:center; gap:var(--space-2);
  height:var(--header-h); max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter);
}
.ac-top__logo{display:inline-flex; align-items:center; flex:0 0 auto; margin-right:var(--space-2)}
.ac-logo{display:inline-flex; align-items:center; gap:10px; color:var(--color-text-primary); text-decoration:none}
.ac-mark{display:block; flex:0 0 auto}
.ac-logo__text{display:flex; flex-direction:column; line-height:.92; font-family:var(--font-brand)}
/* Kelime işareti: "Actful" ExtraBold, "Community" Medium — açık temada lacivert, koyu temada beyaz */
.ac-logo__name{font-weight:800; font-size:22px; letter-spacing:-0.035em; color:var(--brand-ink, #0b1035)}
.ac-logo__tag{font-weight:500; font-size:13.5px; letter-spacing:-0.01em; color:var(--brand-ink, #0b1035); margin-top:1px}
:root[data-theme="dark"] .ac-logo, :root[data-theme="deep"] .ac-logo{--brand-ink:#f5f7ff}
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .ac-logo{--brand-ink:#f5f7ff} }

.ts-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  width:40px; height:40px; flex:0 0 auto; border:0; background:transparent; color:var(--color-text-secondary);
  border-radius:var(--radius-md); cursor:pointer; font-size:16px;
  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)}
@media (pointer:coarse){ .ts-iconbtn{width:var(--tap-min); height:var(--tap-min)} }
.ts-iconbtn__dot{position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--color-accent); border:2px solid var(--color-bg)}

/* Masaüstü arama kutusu */
.ac-search{display:none; position:relative; align-items:center; flex:1 1 auto; max-width:560px; margin-inline:auto}
.ac-search>i{position:absolute; left:14px; color:var(--color-text-muted); font-size:14px; pointer-events:none}
.ac-search input{
  width:100%; height:40px; padding:0 40px 0 40px; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-primary);
  font:inherit; font-size:var(--text-sm); outline:none;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ac-search input::placeholder{color:var(--color-text-muted)}
.ac-search input:focus{border-color:var(--color-accent); box-shadow:0 0 0 3px var(--accent-glow)}
.ac-search__kbd{position:absolute; right:10px; font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted); border:1px solid var(--color-border-strong); border-radius:4px; padding:1px 6px; line-height:1.4; background:var(--color-surface-sunken)}
.ac-search input:focus~.ac-search__kbd{display:none}

.ac-top__actions{display:flex; align-items:center; gap:var(--space-1); margin-left:auto}
.ac-top__ask{display:none}
.ac-top__ask span{display:none}
.ac-top__login{display:none}
.ac-top__join{height:36px}
.ac-top__me{display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 4px; border-radius:var(--radius-pill); color:var(--color-text-secondary); margin-left:var(--space-1)}
.ac-top__me:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.ac-top__me .ac-av{border-radius:50%}
.ac-top__rep{display:none; font-size:12px; font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums}

/* Tema düğmesi: etkin temaya göre doğru ikon */
.ac-theme__light{display:none}
:root[data-theme="dark"] .ac-theme__dark,:root[data-theme="deep"] .ac-theme__dark{display:none}
:root[data-theme="dark"] .ac-theme__light,:root[data-theme="deep"] .ac-theme__light{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .ac-theme__dark{display:none}
  :root:not([data-theme]) .ac-theme__light{display:inline}
}

@media (max-width:479px){
  .ts-header .ac-logo__tag{display:none}
  .ac-top__msg,.ac-theme{display:none}
  .ac-top__bar{gap:2px}
}
@media (min-width:480px){ .ac-top__ask{display:inline-flex; padding:0 12px} }
@media (min-width:768px){
  .ac-top__login{display:inline-flex}
  .ac-top__ask span{display:inline}
}
@media (min-width:1024px){
  :root{--header-h:64px}
  .ac-search{display:flex}
  .ac-top__searchbtn,.ac-top__menu{display:none}
  .ac-top__rep{display:inline}
  .ac-top__actions{margin-left:var(--space-4); gap:var(--space-2)}
}

/* Mobil arama katmanı */
.ts-searchlayer{position:fixed; inset:0; z-index:var(--z-drawer); display:none; background:var(--color-bg); 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:42px; 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-bg); 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-9)}
.ts-drawer__user{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); margin-bottom:var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); color:var(--color-text-primary)}
.ts-drawer__user span{display:flex; flex-direction:column; gap:2px}
.ts-drawer__user small{color:var(--color-text-muted); font-variant-numeric:tabular-nums}
.ts-drawer__user .ac-av{border-radius:50%}
.ac-drawer__auth{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-3)}
.ac-drawer__ask{margin-bottom:var(--space-2)}
.ac-drawer__theme{margin-top:var(--space-4); width:100%; justify-content:flex-start}
body.ts-noscroll{overflow:hidden}
@media (min-width:1024px){ .ts-drawer,.ts-searchlayer{display:none !important} }

/* Alt gezinme (mobil) */
.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-bg);
  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:56px; color:var(--color-text-muted); font-size:11px; font-weight:var(--fw-semibold); -webkit-tap-highlight-color:transparent}
.ts-bottomnav a i{font-size:17px}
.ts-bottomnav a[aria-current="page"]{color:var(--color-text-primary)}
.ts-bottomnav a[aria-current="page"]::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:2px; background:var(--color-accent)}
.ts-bottomnav .ac-bn__ask i{width:34px; height:26px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--color-accent); color:var(--color-accent-contrast); font-size:14px}
.ts-bottomnav .ac-bn__ask[aria-current="page"]::before{display:none}
body.ts-app{padding-bottom:calc(56px + var(--safe-bottom))}
@media (min-width:1024px){ .ts-bottomnav{display:none} body.ts-app{padding-bottom:0} }

/* Altbilgi */
.ts-footer{position:relative; overflow:hidden; border-top:1px solid var(--color-border); background:var(--color-surface); margin-top:var(--space-10)}
.ac-foot__inner{position:relative; z-index:1; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter)}
.ts-footer__logo{display:inline-flex}
.ac-foot__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7) var(--space-5); padding-block:var(--space-9)}
.ac-foot__brand{grid-column:1 / -1}
.ac-foot__brand{display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start}
.ac-foot__desc{margin:0; max-width:48ch; font-size:var(--text-sm); color:var(--color-text-secondary)}
.ac-foot__stats{display:flex; gap:var(--space-6); margin:0}
.ac-foot__stats div{display:flex; flex-direction:column-reverse; gap:2px}
.ac-foot__stats dt{font-size:var(--text-xs); color:var(--color-text-muted)}
.ac-foot__stats dd{margin:0; font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-xl); line-height:1}
.ac-foot__col{display:flex; flex-direction:column}
.ac-foot__col h2{font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold); letter-spacing:0; color:var(--color-text-primary); margin:0 0 var(--space-2)}
.ac-foot__col a{display:flex; align-items:center; min-height:40px; color:var(--color-text-secondary); font-size:var(--text-sm)}
.ac-foot__col a:hover{color:var(--color-text-primary)}
.ac-foot__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-xs); color:var(--color-text-muted)}
.ac-foot__try{font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--color-text-secondary)}
.ac-foot__mark{position:absolute; left:50%; bottom:-.24em; transform:translateX(-50%); font-family:var(--font-display); font-weight:var(--fw-heavy);
  font-size:clamp(96px, 22vw, 300px); letter-spacing:-0.06em; line-height:1; color:var(--color-text-primary); opacity:.035; pointer-events:none; user-select:none; white-space:nowrap}
@media (min-width:768px){
  .ac-foot__grid{grid-template-columns:1.7fr 1fr 1fr 1fr}
  .ac-foot__brand{grid-column:auto}
  .ac-foot__col a{min-height:32px}
  .ac-foot__bottom{flex-direction:row; align-items:center; justify-content:space-between}
}

/* Bildirim paneli */
.ts-notif{position:relative; flex:0 0 auto}
.ts-notif__panel{position:absolute; top:calc(100% + 10px); right:0; z-index:var(--z-dropdown); width:min(360px, calc(100vw - 2*var(--gutter)));
  background:var(--color-surface-overlay); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg); box-shadow:var(--elev-4);
  opacity:0; visibility:hidden; transform:translateY(-6px); 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:none}
.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-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--color-accent-text)}
.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); color:var(--color-text-primary)}
.ts-notif__item.is-unread{background:var(--color-accent-soft)}
.ts-notif__icon{flex:0 0 auto; width:30px; height:30px; border-radius:var(--radius-md); 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:var(--color-accent-contrast)}
.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}

/* Çevrimiçi kutusu (Üyeler sayfası) */
.ts-presence{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--space-6)}
.ts-presence__head{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border)}
.ts-presence__live{width:8px; height:8px; border-radius:50%; background:var(--color-accent)}
.ts-presence__title{margin:0; font-size:var(--text-md)}
.ts-presence__all{margin-left:auto; font-size:var(--text-sm); font-weight:var(--fw-semibold)}
.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)}
.ts-presence__stat b{display:block; font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--fw-black)}
.ts-presence__stat span{font-size:var(--text-xs); color:var(--color-text-muted)}
.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); color:var(--color-text-primary)}
.ts-presence__av{width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:10px; font-weight:var(--fw-bold); color:var(--color-text-primary); background:var(--color-surface-hover)}
.ts-presence__empty{padding:var(--space-5); color:var(--color-text-muted); font-size:var(--text-sm)}
.ts-presence__legend{display:none}
@media (min-width:768px){ .ts-presence__stats{grid-template-columns:repeat(4,1fr)} }

@media (max-width:768px){
  .ts-toasts{left:var(--space-4); right: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; scroll-behavior:auto!important}
}