/* ============================================================
     Baseline UI — Design Tokens
     ============================================================ */
  :root {
    --color-white-solid: #ffffff;
    --color-white-0: rgba(255, 255, 255, 0);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-0-2: rgba(255, 255, 255, 0.002);
    --color-grey-4: #0a0a0a;
    --color-grey-10: #1a1a1a;
    --color-grey-11: #1b1b1b;
    --color-grey-13: #212121;
    --color-grey-19: #303032;
    --color-grey-71: #b5b5b5;
    --color-grey-77: #c4c4c6; /* yer tutucu / ay dışı gün — tanımsızdı, siyaha düşüyordu (#34) */
    --color-grey-95: #f1f1f1;
    --color-grey-96: #f5f5f5;
    --color-grey-97: #f7f7f7;
    --color-grey-98-2: #fbfbfb;
    --color-grey-99: #fcfcfc;
    --color-violet: #b4a1f3;

    --corner-radius-8: 8px;
    --font-size-12: var(--t-label);
    /* cizgi ailesi: duz gri yerine alfa — retinada incelir (hafiflik turu 2/2) */
    /* yazı skalası — 7 kademe (2026-08-28 hiyerarşi turu; yarım kademeler kaldırıldı).
       Avatar baş harfleri (7.5/8) glif metriğidir, skalaya dahil değildir. */
    --t-micro: 9px;    /* yalnız büyük harf mikro etiket (takvim gün kısaltması) */
    --t-mini: 10px;    /* rozet sayacı, mini seri */
    --t-meta: 11px;    /* zaman, ikincil meta */
    --t-label: 12px;   /* etiket, tablo başlığı */
    --t-body: 13px;    /* gövde metni */
    --t-title: 15px;   /* panel/kart/modal başlığı, değer */
    --t-display: 20px; /* KPI ve hero değeri */
    /* radius ölçeği (#35): 4 · 6 · 8 · 10 · 12 · pill — iç köşe = dış − 2 */
    --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-pill: 999px;
    --hairline: rgba(0, 0, 0, 0.06);
    --ring: rgba(0, 0, 0, 0.08);
    --font-size-13: var(--t-body);
    --font-family-display: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif; /* KARAR: Geist (kanonik marka fontu) — prod'da self-host */
    --shadow-drop: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    --shadow-card: /* Figma: Baseline New UI 83:1790 */
      0 0 0 1px rgba(0, 0, 0, 0.07),
      0 2px 1px -1px rgba(0, 0, 0, 0.05),
      0 -2px 4px 0 rgba(255, 255, 255, 0.5),
      0 9px 10px -8px rgba(0, 0, 0, 0.13);
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.12), inset 1px 0 0 rgba(0, 0, 0, 0.06);
    /* motion — easing blueprint: enter/exit ease-out, ekran içi morph ease-in-out, zaman linear */
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--color-grey-99);
    font-family: var(--font-family-display);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em; /* Geist 13pxte bir tik genis oturuyor — optik sikilastirma */
    min-height: 100vh;
  }

  .sheet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 21px 16px;
    transform-origin: top left;
  }

  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .row--tight { gap: 6px; }

  /* ---------- Item → Link ---------- */
  .item {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 8px 10px;
    border-radius: var(--corner-radius-8);
    font-family: inherit;
    font-size: var(--font-size-13);
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    overflow: clip;
    text-decoration: none;
    border: 0;
    background: none;
    transition: filter 120ms ease, background-color 120ms ease;
  }
  .item:active { filter: brightness(0.965); }
  .item:focus-visible, .askbar:focus-visible, .btn-dark:focus-visible,
  .btn-light:focus-visible, .pill-whatsnew:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .item--nav      { justify-content: space-between; width: 200px; }
  .item--percent  { justify-content: space-between; width: 79px; }
  .item--icon     { padding: 8px; }
  .item--icon-sm  { width: 28px; height: 28px; padding: 8px; justify-content: center; }
  .item--cta      { padding: 6px 12px; }
  .item--cta-md   { padding: 8px 12px; }

  .item__left { display: flex; align-items: center; gap: 8px; }
  .item__chevron { transition: transform 160ms var(--ease-in-out-cubic); } /* csec/airsn chevron'larıyla aynı */
  .item[aria-expanded="true"] .item__chevron { transform: rotate(180deg); }

  .t-primary { color: var(--color-grey-19); }
  .t-strong  { color: var(--color-grey-11); }

  /* ---------- Yüzey varyantları ---------- */
  .v-elevated-white {
    background: var(--color-white-solid);
    box-shadow: var(--shadow-drop),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px var(--ring),
      inset 0 0 0 1px var(--ring);
  }
  .v-elevated-white:hover { background: #fafafa; }
  .v-elevated {
    background: var(--color-grey-98-2);
    box-shadow: var(--shadow-drop),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px rgba(0, 0, 0, 0.2),
      inset 0 0 0 1px var(--ring);
  }
  .v-elevated:hover { background: var(--color-grey-96); }
  .v-elevated-soft {
    background: var(--color-grey-98-2);
    box-shadow: var(--shadow-drop),
      inset 0 0 0 1px var(--ring),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px var(--ring);
  }
  .v-elevated-soft:hover { background: var(--color-grey-96); }

  .v-bordered-white { background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring); }
  .v-bordered-white:hover { background: #fafafa; }
  .v-bordered { background: var(--color-grey-98-2); box-shadow: inset 0 0 0 1px var(--ring); }
  .v-bordered:hover { background: var(--color-grey-96); }

  .v-flat        { background: var(--color-grey-97); }
  .v-flat:hover  { background: var(--color-grey-95); }
  .v-flat-active { background: var(--color-grey-95); }
  .v-flat-active:hover { background: #ececec; }
  .v-flat-alt    { background: var(--color-grey-96); }
  .v-flat-alt:hover { background: var(--color-grey-95); }

  /* ---------- Ask anything ---------- */
  .askbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 200px;
    height: 44px;
    padding: 8px 16px;
    border-radius: var(--corner-radius-8);
    background: var(--color-white-solid);
    box-shadow: var(--shadow-drop),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
      inset 0 0 0 1px var(--ring);
    transition: width 200ms var(--ease-in-out-cubic), box-shadow 140ms ease;
  }
  .askbar:focus-within {
    width: 280px;
    box-shadow: var(--shadow-drop),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
      inset 0 0 0 1px var(--color-accent);
  }
  .askbar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-13);
    font-weight: 450;
    color: var(--color-grey-11);
  }
  .askbar input::placeholder { color: var(--color-grey-19); opacity: 1; }
  .askbar__actions { display: flex; align-items: center; gap: 16px; }
  .askbar__btn {
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; padding: 0; cursor: pointer; border-radius: 4px;
  }
  .askbar__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .askbar.recording input::placeholder { color: var(--color-violet); }
  .askbar.recording .icf--wave svg path { stroke: var(--color-violet); }
  .askbar.recording .icf--wave { animation: pulse 1s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) {
    .askbar.recording .icf--wave { animation: none; }
    .item__chevron, .askbar { transition: none; }
  }

  /* ---------- CTA'lar ---------- */
  .btn-dark {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 12px; border-radius: var(--corner-radius-8);
    border: 0; cursor: pointer;
    background-image:
      linear-gradient(180deg, var(--color-white-0) 63.53%, var(--color-white-15) 100%),
      linear-gradient(90deg, var(--color-grey-10) 0%, var(--color-grey-10) 100%);
    color: var(--color-white-solid);
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450;
    line-height: normal; white-space: nowrap;
    transition: filter 120ms ease, transform 80ms ease;
  }
  .btn-dark:hover { filter: brightness(1.15); }
  .btn-dark:active { transform: translateY(1px); }

  .btn-light {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 6px 12px; border-radius: var(--corner-radius-8);
    border: 0; cursor: pointer;
    background: var(--color-white-0-2);
    box-shadow:
      inset 0 -1px 0 0 var(--color-grey-71),
      inset 0 0 0 1px var(--ring),
      inset 0 0.5px 0 1.5px var(--color-white-solid);
    color: var(--color-grey-4);
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450;
    line-height: normal; white-space: nowrap;
    transition: background-color 120ms ease, transform 80ms ease;
  }
  .btn-light:hover { background: var(--color-grey-97); }
  .btn-light:active { transform: translateY(1px); }

  /* ---------- What's new ---------- */
  .pill-whatsnew {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 8px; border-radius: var(--corner-radius-8);
    background: var(--color-grey-97);
    border: 0; cursor: pointer;
    font-family: inherit; font-size: var(--font-size-12); font-weight: 450;
    color: var(--color-grey-19);
    transition: background-color 120ms ease;
  }
  .pill-whatsnew:hover { background: var(--color-grey-95); }

  /* ---------- İkon çerçeveleri ---------- */
  .icf { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .icf-10 { width: 16px; height: 16px; } /* tüm ikonlar 16 (2026-08-05) — sınıflar geriye dönük uyumluluk için duruyor */
  .icf-14 { width: 16px; height: 16px; }
  .icf-16 { width: 16px; height: 16px; }
  .icf svg { display: block; flex-shrink: 0; max-width: 100%; max-height: 100%; }

  /* ---------- Menü (dropdown/popover) ---------- */
  .menu {
    position: fixed;
    z-index: 100;
    min-width: 176px;
    padding: 4px;
    border-radius: 12px; /* yüzen panel ailesi (kart 10 değil) — iç öğe 12-4=8 ile yuvalanır */
    background: var(--color-white-solid);
    /* yumuşak gölge tek başına kenarı eritiyordu — %10 halka dış hattı keskinleştirir */
    box-shadow: var(--shadow-menu), inset 0 0 0 1px rgba(0, 0, 0, 0.10);
    display: none;
    opacity: 0; transform: scale(0.97) translateY(-4px);
    transform-origin: var(--menu-origin, top left);
    transition: opacity 130ms var(--ease-out-quart), transform 130ms var(--ease-out-quart);
  }
  .menu.open { display: block; }
  .menu.open.menu--in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .menu { transition: none; }
    .menu.open { opacity: 1; transform: none; }
  }
  .menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: 0; background: none; cursor: pointer;
    border-radius: 8px; /* kapsayıcı 12 − dolgu 4 = 8: köşeler iç içe yuvalanır */
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450;
    color: var(--color-grey-11); text-align: left; white-space: nowrap;
  }
  .menu__item:hover, .menu__item:focus-visible { background: var(--color-grey-96); outline: none; }
  .menu__check { color: var(--color-grey-13); width: 12px; }
  .menu__card {
    max-width: 236px; padding: 8px; white-space: normal;
    font-size: var(--font-size-12); font-weight: 400; color: var(--color-grey-19);
    line-height: 1.45;
  }
  .menu__card b { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); margin-bottom: 4px; }

  /* ---------- Toast ---------- */
  .toast__act { margin-left: 12px; padding: 2px 8px; border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    font: 500 12px/18px var(--font-family-display); }
  .toast__act:hover { background: rgba(255, 255, 255, 0.22); }
  .toast__act:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
  .mailmsg--pending { opacity: 0.85; }
  .mailmsg--pending .mailmsg__state { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    color: var(--color-accent-dark); }
  /* geri al: düz ama yüzeyli — bekleyen kart %85 saydamken salt metin buton okunmuyordu */
  .btn.mailmsg__undo { height: 24px; gap: 5px; padding: 0 9px 0 7px; color: var(--color-accent-dark);
    background: rgba(139, 116, 232, 0.10); box-shadow: inset 0 0 0 1px rgba(139, 116, 232, 0.28); }
  .btn.mailmsg__undo:hover { background: rgba(139, 116, 232, 0.16); box-shadow: inset 0 0 0 1px rgba(139, 116, 232, 0.4); color: var(--color-accent-dark); }
  .btn.mailmsg__undo > .icf, .btn.mailmsg__undo:hover > .icf { color: var(--color-accent-dark); }
  .mailmsg--pending .mailmsg__undo { opacity: 1; }
  .mailmsg__stt { font-variant-numeric: tabular-nums; }
  .toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 8px);
    padding: 8px 14px;
    border-radius: var(--corner-radius-8);
    background-image:
      linear-gradient(180deg, var(--color-white-0) 63.53%, var(--color-white-15) 100%),
      linear-gradient(90deg, var(--color-grey-10) 0%, var(--color-grey-10) 100%);
    color: var(--color-white-solid);
    font-size: var(--font-size-13); font-weight: 450;
    opacity: 0; pointer-events: none;
    transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
    z-index: 200;
  }
  /* ============================================================
     FAZ 1 — Primitives
     ============================================================ */
  :root {
    --color-accent: #8b74e8;      /* MARKA AKSANI — projeye göre bu iki değeri değiştir */
    --color-accent-dark: #6c53cf; /* koyu aksan */
    --color-accent-tint: #f3eefe;
    --chart-1: #e4dcf9; --chart-2: #b4a1f3; --chart-3: #8b74e8;
    --chart-4: #6c53cf; --chart-5: #533f9e; /* chart skalası (açık→koyu) */
    --color-grey-40: #5f5f63; /* etiket yanındaki ikon: 6.4:1 — grey-55 (3.4:1) etiketten üç kademe uzaktı */
    /* ikincil metnin tamamı bu tonda: #8a8a8e beyazda 3.44:1 idi — 4.5:1 metin
       eşiğinin altında. #6f6f74 ile beyazda 4.90:1; pano'nun renkli zemininde bile
       4.6'nın üstünde kalıyor (2026-09-04 kontrast denetimi) */
    --color-grey-55: #6f6f74;
    --color-success: #1f7a43;
    --color-amber: #8f6218; --color-amber-ink: #6b4e13; --color-amber-bg: #fbf2df; /* not/uyarı dili — önce hex olarak 40+ yerde dağınıktı (#36) */
    --color-danger: #b0392f;
  }

  .page { display: flex; flex-direction: column; gap: 34px; padding: 24px 16px 72px; }
  .sheet { padding: 0; }
  .sec h2 {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-grey-55); margin-bottom: 12px;
  }
  .demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .demo--col { flex-direction: column; align-items: flex-start; gap: 14px; }
  .demo-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

  .item:focus-visible, .askbar:focus-visible, .btn-dark:focus-visible,
  .btn-light:focus-visible, .pill-whatsnew:focus-visible { outline-color: var(--color-accent); }
  [aria-expanded="true"] > .item__chevron { transform: rotate(180deg); }

  /* ---------- Button ---------- */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 12px; border: 0; border-radius: var(--corner-radius-8);
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450; line-height: normal;
    white-space: nowrap; cursor: pointer;
    transition: filter 120ms ease, background-color 120ms ease, transform 80ms ease;
  }
  .btn:active { transform: translateY(0.5px) scale(0.98); }
  .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .btn--primary {
    background-image:
      linear-gradient(180deg, var(--color-white-0) 63.53%, var(--color-white-15) 100%),
      linear-gradient(90deg, var(--color-grey-10) 0%, var(--color-grey-10) 100%);
    color: var(--color-white-solid);
  }
  .btn--primary:hover { filter: brightness(1.15); }
  .btn--danger {
    background-image:
      linear-gradient(180deg, var(--color-white-0) 63.53%, var(--color-white-15) 100%),
      linear-gradient(90deg, #b83a30 0%, #b83a30 100%);
    color: var(--color-white-solid);
  }
  .btn--danger:hover { filter: brightness(1.08); }
  .btn--secondary {
    background: var(--color-white-0-2); color: var(--color-grey-4);
    box-shadow: inset 0 -1px 0 0 var(--color-grey-71),
      inset 0 0 0 1px var(--ring),
      inset 0 0.5px 0 1.5px var(--color-white-solid);
  }
  .btn--secondary:hover { background: var(--color-grey-97); }
  .btn--soft { background: var(--color-grey-96); color: var(--color-grey-11); }
  .btn--soft:hover { background: var(--color-grey-95); }
  .btn--ghost { background: transparent; color: var(--color-grey-19); }
  .btn--ghost:hover { background: var(--color-grey-96); }
  /* yardımcı eylem ikonları metinden bir kademe silik durur; ağırlık hover'da gelir
     (2026-08-28 hafiflik turu — kontur 1.05 ile birlikte) */
  .btn--ghost > .icf { color: var(--color-grey-55); }
  .btn--ghost:hover > .icf, .btn--ghost:focus-visible > .icf { color: var(--color-grey-19); }
  .btn--sm { height: 24px; padding: 0 10px; font-size: var(--font-size-12); }
  /* md (#37): başlık şeridi eylemleri — metinli primary ve ikon-only ghost aynı boy */
  .btn--md { height: 28px; padding: 0 11px; font-size: var(--font-size-12); }
  .btn--md.btn--icononly { width: 28px; }
  .btn--icononly { width: 30px; padding: 0; }
  .btn--sm.btn--icononly { width: 24px; }
  .btn[disabled] { opacity: 0.45; pointer-events: none; }
  .btn--primary .icf svg path, .btn--danger .icf svg path { stroke: #fff; }
  .spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid currentColor; border-top-color: transparent;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

  /* ---------- Form: field + control ---------- */
  .field { display: flex; flex-direction: column; gap: 6px; width: 232px; }
  .field__label { font-size: var(--font-size-12); font-weight: 450; color: var(--color-grey-19); }
  .field__help { font-size: 11px; font-weight: 400; color: var(--color-grey-55); }
  .field--error .field__help { color: var(--color-danger); }
  .control {
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
    border-radius: var(--corner-radius-8);
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring);
    transition: box-shadow 120ms ease;
  }
  .control:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .field--error .control { box-shadow: inset 0 0 0 1px var(--color-danger); }
  .control input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }
  .control input::placeholder { color: var(--color-grey-55); font-weight: 400; }
  .control__prefix {
    font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-19);
    padding-right: 8px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08);
  }
  .control--select {
    width: 100%; justify-content: space-between; cursor: pointer; border: 0; text-align: left;
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }
  .control--select .placeholder { color: var(--color-grey-55); font-weight: 400; }
  .control--select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-accent); }

  /* ---------- Checkbox / Radio / Switch ---------- */
  .choice {
    display: inline-flex; align-items: center; gap: 8px; position: relative;
    font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); cursor: pointer;
  }
  .choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .choice__box {
    width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex; align-items: center; justify-content: center;
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }
  .choice__box svg { opacity: 0; transition: opacity 120ms ease; }
  .choice input:checked ~ .choice__box { background: var(--color-accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
  .choice input:checked ~ .choice__box svg { opacity: 1; }
  .choice input:focus-visible ~ .choice__box,
  .choice input:focus-visible ~ .switch__track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .choice__box--round { border-radius: 50%; }
  .choice__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 120ms ease; }
  .choice input:checked ~ .choice__box .choice__dot { opacity: 1; }
  .switch__track {
    width: 30px; height: 18px; border-radius: var(--r-pill); position: relative; flex-shrink: 0;
    background: #e4e4e7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: background-color 150ms ease;
  }
  .switch__thumb {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 180ms var(--ease-in-out-cubic);
  }
  .choice input:checked ~ .switch__track { background: var(--color-accent); }
  .choice input:checked ~ .switch__track .switch__thumb { transform: translateX(12px); }

  /* ---------- Badge / Status chip ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
    border-radius: 6px; font-size: 11px; font-weight: 450; white-space: nowrap;
  } /* etiket standardı: 20px / 11px — mikro istisna: duechip 18/10 */
  .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge--neutral { background: var(--color-grey-96); color: var(--color-grey-19); }
  .badge--violet, .badge--accent { background: #f1edfd; color: var(--color-accent-dark); } /* 'accent' varyantı tanımsızdı → metin siyah kalıyordu (#34) */
  .badge--success { background: #e9f4ec; color: var(--color-success); }
  .badge--warning { background: var(--color-amber-bg); color: var(--color-amber); }
  .badge--danger  { background: #fceceb; color: var(--color-danger); }

  /* kapsül satır: gri kapsülde etiket + gömülü değer pili (guardrail deseni) */
  /* kapsül: gri zemin (grey-97) sayfa zemininden (grey-99) ayrışmıyordu — beyaz yüzey + ince
     halka; değer pili zeminle yer değiştirdi (grey-96 dolgu) ki kapsül içinde okunmaya devam etsin */
  .caprow { display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
    padding: 5px 6px 5px 12px; background: var(--color-white-solid); border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--ring);
    font: 400 12px/1 var(--font-family-display); color: var(--color-grey-55); }
  .caprow__val { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; /* çip ailesi 24 (#30) */
    border: 0; border-radius: 8px; background: var(--color-grey-96);
    font: 500 12px/1 var(--font-family-display); color: var(--color-grey-11);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
  button.caprow__val { cursor: pointer;
    transition: box-shadow 120ms ease, transform 80ms ease; }
  button.caprow__val:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08); }
  button.caprow__val:active { transform: scale(0.97); }
  button.caprow__val:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

  /* yapılandırma paneli (Autopilot deseni): gri dış kart + bölmeli beyaz gövde */
  .cfgp { background: var(--color-grey-97); border-radius: var(--r-12); padding: 6px; width: 320px;
    box-shadow: var(--shadow-card); }
  .cfgp__head { display: flex; align-items: center; min-height: 38px; padding: 0 4px 0 10px;
    font: 500 13px/1 var(--font-family-display); color: var(--color-grey-11); }
  .cfgp__head > span:first-child { flex: 1; }
  .cfgp__body { background: var(--color-white-solid); border-radius: 10px;
    box-shadow: var(--shadow-card); }
  .cfgp__sec { padding: 12px 14px 14px; }
  .cfgp__sec + .cfgp__sec { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
  .cfgp__st { display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
    font: 500 13px/1 var(--font-family-display); color: var(--color-grey-11); }
  .cfgp__st .icf { color: var(--color-grey-71); }
  .cfgp__sec .caprow { display: flex; margin-top: 6px; }
  /* kanal durum satırı: ikon + ad + sağda durum noktası */
  .strow { display: flex; align-items: center; gap: 9px; min-height: 30px;
    font: 450 13px/1 var(--font-family-display); color: var(--color-grey-11); }
  .strow--off { color: var(--color-grey-55); }
  .strow--off .icf { opacity: 0.45; filter: grayscale(1); }
  .strow__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 999px; background: #3f9d67; }
  /* bütçe bloğu */
  .cfgb__row { display: flex; align-items: baseline; gap: 6px; }
  .cfgb__v { font: 500 20px/1.2 var(--font-family-display); color: var(--color-grey-11);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .cfgb__l { font-size: 13px; color: var(--color-grey-55); }
  .cfgb__r { margin-left: auto; font-size: 13px; color: var(--color-grey-19); font-variant-numeric: tabular-nums; }
  .cfgb__bar { height: 6px; border-radius: 999px; background: var(--color-grey-95); margin: 10px 0 8px; overflow: hidden; }
  .cfgb__fill { display: block; height: 100%; border-radius: 999px; background: var(--color-grey-71); }
  .cfgb__cap { font-size: 12px; color: var(--color-grey-55); }
  /* bilgi bandı */
  .notice { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 8px;
    font: 400 13px/1.45 var(--font-family-display); }
  .notice--success { background: #e9f4ec; color: #1f7a43; }
  .notice--warning { background: var(--color-amber-bg); color: var(--color-amber); }
  .notice u { text-underline-offset: 2px; }

  /* ---------- Avatar ---------- */
  .avatar {
    display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
    border-radius: 50%; background: var(--color-grey-95); color: var(--color-grey-19); font-weight: 450;
  }
  .avatar--24 { width: 24px; height: 24px; font-size: 10px; }
  .avatar--28 { width: 28px; height: 28px; font-size: 11px; }
  .avatar--36 { width: 36px; height: 36px; font-size: 13px; }
  .avatar--violet { background: #f1edfd; color: #6c53cf; }
  .avatar img, .pf__ava img, .vnote__ava img { width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%; display: block; }
  .avatar { overflow: visible; }
  .avatar__status {
    position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
    background: #34a853; box-shadow: 0 0 0 2px var(--color-grey-99);
  }
  .avatar-group { display: inline-flex; }
  .avatar-group .avatar { box-shadow: 0 0 0 2px var(--color-grey-99); }
  .avatar-group .avatar + .avatar { margin-left: -8px; }

  /* ---------- Tooltip ---------- */
  .tooltip {
    position: fixed; z-index: 300; padding: 5px 9px; border-radius: 6px;
    background: var(--color-grey-10); color: #fff;
    font-size: var(--font-size-12); font-weight: 450; white-space: nowrap;
    pointer-events: none; opacity: 0; transform: translateY(2px);
    transition: opacity 120ms var(--ease-out-quart), transform 120ms var(--ease-out-quart);
  }
  .tooltip.show { opacity: 1; transform: translateY(0); }

  /* ============================================================
     FAZ 2 — Baseline composite'ları
     ============================================================ */

  /* ---------- 07 Conversation list ---------- */
  .convo {
    width: 300px; padding: 4px; border-radius: 10px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 2px;
  }
  .convo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--corner-radius-8);
    cursor: pointer; border: 0; background: none; text-align: left;
    font-family: inherit; width: 100%;
    transition: background-color 120ms ease;
  }
  .convo-item:hover { background: var(--color-grey-97); }
  .convo-item--active { background: var(--color-grey-95); }
  .convo-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .convo-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .convo-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .convo-item__name {
    font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .convo-item--unread .convo-item__name { font-weight: 500; }
  .convo-item__time { font-size: 10px; font-weight: 450; color: var(--color-grey-55); flex-shrink: 0; }
  .stat__value, .convo-item__time, .bubble__meta, .sla-chip, .kvrow, td, .codechip { font-variant-numeric: tabular-nums; }
  .convo-item__bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .convo-item__preview {
    font-size: var(--font-size-12); font-weight: 400; color: var(--color-grey-55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .convo-item--unread .convo-item__preview { color: var(--color-grey-19); font-weight: 450; }
  .unread-pill {
    min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; flex-shrink: 0;
    /* beyaz metin accent zemininde 3.65:1 kalıyordu — bir tık koyu ton 5.38:1 */
    background: #6f53d8; color: #fff;
    font-size: 10px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .avatar--16 { width: 16px; height: 16px; font-size: 8px; }
  .convo-channel {
    position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
    border-radius: 50%; background: #25d366; /* CHANNELS[k].color inline ezer */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--color-white-solid);
  }
  .convo-channel--2 { right: 11px; } /* birleşik konuşma (#47): ikinci kanal rozeti solda, hafif bindirme — temel kuraldan SONRA */

  /* ---------- 08 Message bubbles ---------- */
  .chat {
    width: 340px; padding: 12px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 8px;
  }
  .chat__day {
    align-self: center; padding: 3px 8px; border-radius: 6px;
    background: var(--color-grey-96); color: var(--color-grey-40); /* gri zeminde 5.9:1 */
    font-size: 11px; font-weight: 450;
  }
  /* Balon dili (2026-09-04): düz dolgu yerine ince halka + fısıltı gradyan.
     Gradyan %2-3'lük bir dikey düşüş — parlaklık değil, yüzeye derinlik verir.
     Kuyruk köşesi yalnız dizinin SON balonunda; aradakiler `--devam` ile tam
     yuvarlak kalır ve `--grup` ile birbirine yaklaşır. */
  .bubble {
    max-width: 76%; padding: 7px 11px; border-radius: var(--r-12);
    font-size: var(--font-size-13); font-weight: 400; line-height: 1.4;
    color: var(--color-grey-11);
  }
  .bubble--in {
    align-self: flex-start; border-bottom-left-radius: 6px;
    background: linear-gradient(180deg, var(--color-white-solid) 0%, var(--color-grey-97) 100%);
    box-shadow: inset 0 0 0 1px var(--ring);
  }
  .bubble--out {
    align-self: flex-end; border-bottom-right-radius: 6px; cursor: pointer;
    background: linear-gradient(180deg, #f7f4ff 0%, #efe9fd 100%);
    box-shadow: inset 0 0 0 1px rgba(108, 83, 207, 0.16);
  }
  /* onay bekleyen taslak (#26): dolgu yok, kesikli çerçeve — henüz gitmedi */
  .bubble--out.bubble--onay { background: var(--color-white-solid); box-shadow: none;
    outline: 1px dashed var(--color-grey-71); outline-offset: -1px; cursor: default; }
  .bubble--onay .bubble__tag { color: var(--color-accent-dark); }
  /* hızlı yanıt butonları (#46): balon içinde tam genişlik satır; danışanın bastığı vurgulu */
  .bubble__btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
  .bubble__qbtn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px rgba(108, 83, 207, 0.28);
    font: 450 var(--font-size-12)/1 var(--font-family-display); color: var(--color-accent-dark); }
  .bubble__qbtn--on { background: var(--color-accent-dark); color: #fff; box-shadow: none; }
  /* zamanlanmış (#45): aynı kesikli dil + balonun altında İptal */
  .bubble--zaman { display: flex; flex-direction: column; align-items: flex-start; }
  .bubble--zaman .bubble__iptal { margin-top: 6px; height: 22px; padding: 0 8px; }
  .bubble--note {
    align-self: flex-end; border-bottom-right-radius: 6px;
    background: linear-gradient(180deg, #fdf8ec 0%, var(--color-amber-bg) 100%);
    box-shadow: inset 0 0 0 1px rgba(143, 98, 24, 0.18);
  }
  /* aynı taraftan art arda gelenler: kuyruk yok, aralık 8 → 3px */
  .bubble--devam.bubble--in { border-bottom-left-radius: 14px; }
  .bubble--devam.bubble--out, .bubble--devam.bubble--note { border-bottom-right-radius: 14px; }
  .bubble--grup { margin-top: -5px; }
  .bubble__tag {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; margin-bottom: 3px; color: var(--color-accent-dark);
  }
  .bubble--note .bubble__tag { color: var(--color-amber); }
  .bubble__meta {
    display: flex; justify-content: flex-end; align-items: center; gap: 4px;
    margin-top: 3px; font-size: 10px; font-weight: 450; color: var(--color-grey-55);
  }
  .bubble__media {
    width: 200px; height: 110px; border-radius: 6px; margin-bottom: 6px;
    background: linear-gradient(135deg, #ececf2, #e0e0ea);
    display: flex; align-items: center; justify-content: center;
  }
  /* AI öneri yığını: mesaj kutusunun üstünde, her satır tıklanınca composer'a düşer.
     Kesikli kısayol çipleri "ekle" işiydi; bunlar öneri — dolu pil + accent ok. */
  /* öneri yığını — DİKKAT: `.aisug` kit'te AI panelinin çipi, ad çakışması
     kapsayıcıya hap zemini basıyordu; bu bileşen `.sgst` adını kullanır.
     Pencere `--sgst-n` satır gösterir, ↑/↓ ile iç şerit kayar. */
  .sgst { position: relative; overflow: hidden; flex-shrink: 0;
    height: calc(var(--sgst-n, 3) * 30px + (var(--sgst-n, 3) - 1) * 6px); }
  .sgst__track { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    transform: translateY(var(--sgst-y, 0px));
    transition: transform 220ms var(--ease-out-quart); }
  .sgst__row {
    display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
    height: 30px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill);
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    cursor: pointer; text-align: left; flex-shrink: 0;
    font: 450 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-11);
    transition: box-shadow 140ms ease, transform 140ms var(--ease-out-quart);
  }
  .sgst__row .icf { color: var(--color-accent); flex-shrink: 0; }
  .sgst__row:hover { box-shadow: inset 0 0 0 1px var(--color-accent); transform: translateX(2px); }
  .sgst__row--on { box-shadow: inset 0 0 0 1.5px var(--color-accent); background: #f8f6ff; }
  .sgst__row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .sgst__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    .sgst__row, .sgst__track { transition: none; }
  }

  /* gönderilen mesajın girişi — minimal: 6px yükselerek belirir, ölçek 0.98'den 1'e.
     Yalnız yeni mesaja uygulanır; konuşma değiştirince tüm gövde oynamaz. */
  @keyframes msgIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  .msg-in { animation: msgIn 180ms var(--ease-out-quart) both; }
  @media (prefers-reduced-motion: reduce) { .msg-in { animation: none; } }

  .chat__composer { display: flex; gap: 8px; margin-top: 4px; }
  .chat__composer .control { flex: 1; }

  /* --- kanal türüne göre gövde: e-posta iş parçacığı (CHANNELS[..].kind === 'mail') --- */
  .mailmsg {
    align-self: stretch; padding: 10px 12px; border-radius: 10px;
    background: var(--color-grey-97); box-shadow: inset 0 0 0 1px var(--color-grey-93);
    font-size: var(--font-size-13); line-height: 1.45; color: var(--color-grey-11);
  }
  .mailmsg--out { background: #f7f4ff; box-shadow: inset 0 0 0 1px #e7dffb; }
  .mailmsg__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mailmsg__head .avatar { flex-shrink: 0; }
  .mailmsg__from { font-weight: 500; font-size: 13px; flex-shrink: 0; }
  .mailmsg__addr { font-size: 11px; color: var(--color-grey-55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mailmsg__time { margin-left: auto; font-size: 11px; color: var(--color-grey-55); flex-shrink: 0; }
  .mailmsg__to { margin: 2px 0 8px 30px; font-size: 11px; color: var(--color-grey-55); }
  .mailmsg__body { margin-left: 30px; }
  .mailmsg__qbtn, .mailmsg__quote, .mailmsg__atts { margin-left: 30px; }
  /* kit tuzağı: avatar boy ailesi 16/24/28/36 — olmayan bir boy sınıfı yazılırsa
     .avatar ölçüsüz kalır ve gömülü 96px portre ham boyutta çizilir */
  .mailmsg__body { white-space: pre-line; }
  .mailmsg__qbtn { display: inline-flex; align-items: center; margin-top: 8px; height: 18px;
    padding: 0 7px; border: 0; border-radius: 5px; background: var(--color-grey-95);
    color: var(--color-grey-55); font: 450 11px/18px var(--font-family-display); cursor: pointer; }
  .mailmsg__qbtn:hover { background: var(--color-grey-93); color: var(--color-grey-11); }
  .mailmsg__quote { margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--color-grey-93);
    color: var(--color-grey-55); font-size: 12px; white-space: pre-line; }
  .mailmsg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
  .mailatt { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
    border-radius: 6px; box-shadow: inset 0 0 0 1px var(--color-grey-93);
    font-size: 11px; color: var(--color-grey-40); }
  .mailmsg__state { margin-top: 7px; text-align: right; font-size: 10px; font-weight: 450;
    color: var(--color-grey-55); }

  /* --- kanal türüne göre gövde: arama zaman çizelgesi (kind === 'call') --- */
  /* arama satırları balon diliyle aynı yüzeyi kullanır: 14px köşe, ince halka,
     fısıltı gradyan. Düz beyaz + %8 halka, beyaz gövdede kayboluyordu. */
  .callrow {
    align-self: flex-start; width: min(86%, 520px); box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px;
    border-radius: var(--r-12); border-bottom-left-radius: 6px; font-size: var(--font-size-13);
    background: linear-gradient(180deg, var(--color-white-solid) 0%, var(--color-grey-97) 100%);
    box-shadow: inset 0 0 0 1px var(--ring);
  }
  .callrow--missed {
    background: linear-gradient(180deg, #fdf8ec 0%, var(--color-amber-bg) 100%);
    box-shadow: inset 0 0 0 1px rgba(143, 98, 24, 0.18);
  }
  .callrow__ic { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-grey-96); color: var(--color-grey-40); }
  .callrow--missed .callrow__ic { background: #f6e5c7; color: var(--color-amber); }
  .callrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .callrow__t { font-weight: 450; }
  .callrow__sub { font-size: 11px; color: var(--color-grey-55); }
  .callrow__meta { align-self: flex-end; margin-top: 3px; font-size: 10px; font-weight: 450;
    color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .callrow__act { flex-shrink: 0; align-self: center; margin-left: 4px; }
  .callrow__ic { margin-top: 1px; }
  .callrow__play { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: 0; padding: 0;
    background: var(--color-accent); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 140ms var(--ease-out-quart), background 140ms ease; }
  .callrow__play:hover { background: var(--color-accent-dark); }
  .callrow__play:active { transform: scale(0.94); }
  .callrow__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .callrow__play .icf svg { margin-left: 1px; } /* play üçgeni optik merkez: bir tık sağa */
  .callrow--playing .callrow__play .icf svg { margin-left: 0; }
  .callrow__player { display: flex; align-items: center; gap: 12px; margin: 4px 0 3px; width: 100%; }
  .callrow__wave { position: relative; flex: 1; min-width: 120px; height: 22px; cursor: pointer;
    --p: 0%; }
  .callrow__lyr { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
  .callrow__lyr i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--color-grey-71); }
  .callrow__lyr--on { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
  .callrow__lyr--on i { background: var(--color-accent); }
  .callrow__head { position: absolute; top: -2px; bottom: -2px; left: var(--p); width: 1.5px;
    margin-left: -0.75px; border-radius: 1px; background: var(--color-accent-dark); opacity: 0;
    transition: opacity 140ms ease; }
  .callrow--playing .callrow__head, .callrow__wave:hover .callrow__head { opacity: 1; }
  .callrow__clock { font-size: 11px; color: var(--color-grey-55); font-variant-numeric: tabular-nums;
    flex-shrink: 0; min-width: 66px; text-align: right; }
  @media (prefers-reduced-motion: reduce) { .callrow__play, .callrow__head { transition: none; } }
  .callrow__tr { margin-top: 6px; font-size: 12px; color: var(--color-grey-40); white-space: pre-line; }
  .callrow__trbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; height: 18px; padding: 0 7px; border: 0; border-radius: var(--r-6);
    background: var(--color-grey-95); color: var(--color-grey-55);
    font: 450 11px/18px var(--font-family-display); cursor: pointer; }
  .callrow__trbtn:hover { color: var(--color-grey-19); }
  .callrow__trmeta { font: 450 10px/1 var(--font-family-display); color: var(--color-grey-55); margin-bottom: 4px; }

  /* --- sohbet içi bul çubuğu + eşleşme vurgusu --- */
  .findbar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border-bottom: 1px solid var(--hairline); background: var(--color-white-solid); }
  .findbar[hidden] { display: none; }
  .findbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none;
    font: 400 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-11); }
  .findbar__n { font-size: 11px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  mark.hl { background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    color: inherit; border-radius: 3px; padding: 0 1px; }
  mark.hl--on { background: color-mix(in srgb, var(--color-accent) 45%, transparent); }

  /* ---------- 09 Lead card & pipeline ---------- */
  .pipeline { display: flex; align-items: flex-start; gap: 12px; }
  .stage {
    width: 260px; padding: 8px; border-radius: 12px;
    background: var(--color-grey-97);
    display: flex; flex-direction: column; gap: 8px;
  }
  .stage__head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
  .stage__title {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-size-12); font-weight: 500; color: var(--color-grey-19);
  }
  .stage__count {
    padding: 1px 6px; border-radius: 6px; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    font-size: 10px; font-weight: 500; color: var(--color-grey-55);
  }
  .stage__sum { font-size: 11px; font-weight: 450; color: var(--color-grey-55); }
  .lead {
    background: var(--color-white-solid); border-radius: 10px; padding: 10px 12px;
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 8px;
  }
  .lead__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .lead__name {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }
  .temp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .temp--hot { background: #d3452e; }
  .temp--warm { background: #e2a13c; }
  .lead__meta { font-size: 11px; font-weight: 400; color: var(--color-grey-55); }
  .lead__acts { display: flex; gap: 4px; margin-top: 8px; }
  .lead__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .lead__value { font-size: var(--font-size-12); font-weight: 500; color: var(--color-grey-11); }

  /* ============================================================
     FAZ 3 — Yapı & feedback
     ============================================================ */
  .menu { z-index: 500; }
  .tooltip { z-index: 600; }

  /* ---------- 10 Stat card ---------- */
  .stat {
    width: 200px; padding: 12px 14px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 6px;
  }
  .stat__label { font-size: 11px; font-weight: 450; color: var(--color-grey-55); }
  .stat__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .stat__value { font-size: 20px; font-weight: 500; color: var(--color-grey-11); letter-spacing: -0.01em; }
  /* delta tek dil: etiket ailesiyle aynı ölçü (20px yükseklik · 11px · 6px radius).
     Değişim gösterimi nerede geçerse geçsin aynı görünür (2026-09-03 tutarlılık turu) */
  .stat__delta {
    display: inline-flex; align-items: center; gap: 3px;
    height: 20px; padding: 0 6px; border-radius: 6px;
    font-size: 11px; font-weight: 450;
  }
  .stat__delta--up { background: #e9f4ec; color: var(--color-success); }
  .stat__delta--down { background: #fceceb; color: var(--color-danger); }
  .stat__spark { width: 100%; height: 28px; display: block; }
  .stat--accent { box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--color-accent); }

  .grouphead {
    font-size: 12px; font-weight: 450; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-grey-55); margin: 44px 0 -6px; padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline);
  }
  .grouphead:first-of-type { margin-top: 0; }
  /* ---------- textarea ---------- */
  .control--area { height: auto; padding: 8px 10px; align-items: stretch; }
  .control--area textarea {
    width: 100%; min-height: 72px; resize: vertical; border: 0; outline: 0; background: transparent;
    font: 400 var(--font-size-13)/1.5 var(--font-family-display); color: var(--color-grey-11);
  }
  .control--area textarea::placeholder { color: var(--color-grey-55); }
  /* ---------- 19 Alerts ---------- */
  .alert {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px;
    border-radius: 10px; max-width: 460px; font-size: 12px; line-height: 1.5;
  }
  .alert__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: currentColor; }
  .alert__body { flex: 1; color: var(--color-grey-19); }
  .alert__title { display: block; font-weight: 500; }
  .alert__x { border: 0; background: transparent; cursor: pointer; padding: 2px; border-radius: 5px;
    color: inherit; display: inline-flex; margin: 1px -4px 0 0; }
  .alert__x:hover { background: rgba(0, 0, 0, 0.06); }
  .alert__x:focus-visible { outline: 2px solid var(--color-accent); }
  .alert--info    { background: var(--color-grey-96); }  .alert--info .alert__title, .alert--info .alert__dot { color: var(--color-grey-19); }
  .alert--success { background: #e9f4ec; } .alert--success .alert__title, .alert--success .alert__dot { color: var(--color-success); }
  .alert--warning { background: var(--color-amber-bg); } .alert--warning .alert__title, .alert--warning .alert__dot { color: var(--color-amber); }
  .alert--danger  { background: #fceceb; } .alert--danger .alert__title, .alert--danger .alert__dot { color: var(--color-danger); }
  .secnote { font-size: 11px; color: var(--color-grey-55); max-width: 520px; line-height: 1.55; margin: 0; }
  /* ---------- 00 Foundations ---------- */
  .found { display: flex; flex-direction: column; gap: 12px; }
  .found__row { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
  .found__label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-grey-55); width: 100%; }
  .found__sw { display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 9px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .found__sw i { display: block; width: 40px; height: 26px; border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
  .found__card { width: 150px; height: 48px; border-radius: 10px;
    background: var(--color-white-solid); box-shadow: var(--shadow-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 450; color: var(--color-grey-19); }
  .found__note { font-size: 11px; color: var(--color-grey-55); max-width: 560px; line-height: 1.5; }
  /* ---------- textarea ---------- */
  .control--area { height: auto; padding: 8px 10px; align-items: stretch; }
  .control--area textarea {
    width: 100%; min-height: 72px; resize: vertical; border: 0; outline: 0; background: transparent;
    font: 400 var(--font-size-13)/1.5 var(--font-family-display); color: var(--color-grey-11);
  }
  .control--area textarea::placeholder { color: var(--color-grey-55); }
  /* ---------- 19 Alerts ---------- */
  .alert {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px;
    border-radius: 10px; max-width: 460px; font-size: 12px; line-height: 1.5;
  }
  .alert__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: currentColor; }
  .alert__body { flex: 1; color: var(--color-grey-19); }
  .alert__title { display: block; font-weight: 500; }
  .alert__x { border: 0; background: transparent; cursor: pointer; padding: 2px; border-radius: 5px;
    color: inherit; display: inline-flex; margin: 1px -4px 0 0; }
  .alert__x:hover { background: rgba(0, 0, 0, 0.06); }
  .alert__x:focus-visible { outline: 2px solid var(--color-accent); }
  .alert--info    { background: var(--color-grey-96); }  .alert--info .alert__title, .alert--info .alert__dot { color: var(--color-grey-19); }
  .alert--success { background: #e9f4ec; } .alert--success .alert__title, .alert--success .alert__dot { color: var(--color-success); }
  .alert--warning { background: var(--color-amber-bg); } .alert--warning .alert__title, .alert--warning .alert__dot { color: var(--color-amber); }
  .alert--danger  { background: #fceceb; } .alert--danger .alert__title, .alert--danger .alert__dot { color: var(--color-danger); }
  .secnote { font-size: 11px; color: var(--color-grey-55); max-width: 520px; line-height: 1.55; margin: 0; }
  

/* ---------- 11 Table ---------- */
  .table {
    width: 560px; max-width: 100%; border-radius: 12px; overflow: clip;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
  }
  .trow {
    display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 0.7fr 0.5fr;
    align-items: center; gap: 8px; padding: 8px 12px;
    font-size: var(--font-size-12); color: var(--color-grey-11); text-align: left;
    width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer;
    transition: background-color 120ms ease;
  }
  .trow + .trow { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
  .trow:hover { background: var(--color-grey-97); }
  .trow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .trow--head {
    font-size: 11px; font-weight: 450; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-grey-55); background: var(--color-grey-98-2); cursor: default;
  }
  .trow--head:hover { background: var(--color-grey-98-2); }
  .trow__cell--person { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .trow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; }
  .trow__num { font-weight: 500; }

  /* ---------- 12 Empty state & skeleton ---------- */
  .empty {
    width: 300px; padding: 28px 20px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  }
  .empty__icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-grey-96);
    display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
  }
  .empty__title { font-size: var(--font-size-13); font-weight: 500; color: var(--color-grey-11); }
  .empty__desc { font-size: var(--font-size-12); font-weight: 400; color: var(--color-grey-55); line-height: 1.45; }

  .skel {
    position: relative; overflow: hidden; border-radius: 4px;
    background: #ececee;
  }
  .skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s linear infinite; /* sabit-hız süpürme — ease döngüde nabız gibi hızlanıyordu */
  }
  @keyframes shimmer { to { transform: translateX(100%); } }
  @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
  .skel--circle { border-radius: 50%; }
  .skel-convo {
    width: 300px; padding: 12px; border-radius: 10px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 12px;
  }
  .skel-convo__row { display: flex; align-items: center; gap: 10px; }
  .skel-convo__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

  /* ---------- 13 Modal & Drawer ---------- */
  .overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10, 10, 10, 0.24);
    opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out-quart);
  }
  .overlay.open { opacity: 1; pointer-events: auto; }
  .modal {
    position: fixed; z-index: 401; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    width: 320px; max-width: calc(100vw - 32px); padding: 16px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-modal);
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
  }
  .modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
  .modal__title { font-size: 15px; font-weight: 500; color: var(--color-grey-11); }
  .modal__desc { font-size: var(--font-size-12); font-weight: 400; color: var(--color-grey-55); line-height: 1.45; }
  .modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
  .modal .field { width: 100%; }

  .drawer {
    position: fixed; z-index: 401; top: 0; right: 0; bottom: 0; width: 300px;
    max-width: calc(100vw - 32px); padding: 16px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-drawer);
    transform: translateX(105%); transition: transform 240ms var(--ease-out-quart);
    display: flex; flex-direction: column; gap: 14px;
  }
  .drawer.open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .drawer, .modal, .overlay { transition: none; }
  }
  .drawer__head { display: flex; justify-content: space-between; align-items: center; }
  .drawer__title { font-size: 15px; font-weight: 500; color: var(--color-grey-11); }
  .drawer__person { display: flex; align-items: center; gap: 10px; }
  .drawer__name { font-size: var(--font-size-13); font-weight: 500; color: var(--color-grey-11); }
  .drawer__phone { font-size: var(--font-size-12); color: var(--color-grey-55); }
  .drawer__rows { display: flex; flex-direction: column; gap: 8px; }
  .drawer__row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--font-size-12); color: var(--color-grey-55); }
  .drawer__row b { font-weight: 450; color: var(--color-grey-11); }
  .drawer__foot { margin-top: auto; display: flex; }
  .drawer__foot .btn { flex: 1; }

  /* ---------- 14 Date picker ---------- */
  .cal {
    position: fixed; z-index: 500; width: 224px; padding: 10px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-menu);
    display: none;
  }
  .cal.open { display: block; }
  .cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .cal__title { font-size: var(--font-size-13); font-weight: 500; color: var(--color-grey-11); text-transform: capitalize; }
  .cal__nav {
    width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .cal__nav:hover { background: var(--color-grey-96); }
  .cal__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal__dow { font-size: 9px; font-weight: 600; color: var(--color-grey-55); text-align: center; padding: 2px 0; text-transform: uppercase; }
  .cal__day {
    height: 26px; border: 0; border-radius: 6px; background: none; cursor: pointer;
    font-family: inherit; font-size: var(--font-size-12); font-weight: 450; color: var(--color-grey-11);
  }
  .cal__day:hover { background: var(--color-grey-96); }
  .cal__day:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
  .cal__day--out { color: #c6c6c9; }
  .cal__day--today { box-shadow: inset 0 0 0 1px var(--color-accent); }
  .cal__day--sel { background: var(--color-accent); color: #fff; }
  .cal__day--sel:hover { background: var(--color-accent); }

  /* ============================================================
     FAZ 4 — AI katmanı & SLA
     ============================================================ */

  /* ---------- 15 SLA timer chip ---------- */
  .wchip--ok { background: var(--color-grey-96); color: var(--color-grey-19); }
  .wchip--risk { background: var(--color-amber-bg); color: var(--color-amber); }
  .wchip--closed { background: transparent; color: var(--color-grey-55); box-shadow: inset 0 0 0 1px var(--ring); }
  .sla {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .sla--ok { background: var(--color-grey-96); color: var(--color-grey-19); }
  .sla--risk { background: var(--color-amber-bg); color: var(--color-amber); }
  .sla--breached { background: #fceceb; color: var(--color-danger); }

  /* ---------- 16 AI Özet Kartı ---------- */
  .ccard {
    width: 340px; border-radius: 12px; overflow: clip;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
  }
  .ccard__head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 14px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  .ccard__title { font-size: var(--font-size-13); font-weight: 500; color: var(--color-grey-11); }
  .ccard__fields { padding: 6px; display: flex; flex-direction: column; }
  .cfield {
    display: grid; grid-template-columns: 96px 1fr 14px; gap: 8px; align-items: start;
    padding: 7px 8px; border-radius: 6px;
    transition: background-color 120ms ease;
  }
  .ccard:not(.ccard--approved) .cfield:hover { background: var(--color-grey-97); cursor: text; }
  .cfield__label { font-size: 11px; font-weight: 450; color: var(--color-grey-55); padding-top: 1px; }
  .cfield__value { font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); line-height: 1.4; }
  .cfield__value input {
    width: 100%; border: 0; outline: 0; padding: 0; background: transparent;
    font: inherit; color: inherit;
    box-shadow: inset 0 -1.5px 0 var(--color-accent);
  }
  .cfield__mark { display: flex; justify-content: center; padding-top: 2px; }
  .ccard__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 14px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  .ccard__src { font-size: 11px; font-weight: 400; color: var(--color-grey-55); }
  .ccard__actions { display: flex; gap: 6px; }

  /* --- kompakt konuşma özeti (bağlam paneli): 3 madde + son eylem + Klinea işareti.
     .ccard alan düzenleyicidir (340px); bu kart panel genişliğine akar. --- */
  .ozet { border-radius: 10px; padding: 10px 12px; background: #f8f6fe;
    box-shadow: inset 0 0 0 1px #e4dcf9; display: flex; flex-direction: column; gap: 8px; }
  .ozet__head { display: flex; align-items: center; gap: 6px; }
  .ozet__title { font: 450 12px/1 var(--font-family-display); color: #6c53cf; flex: 1; }
  .ozet__head .icf { color: #6c53cf; }
  .ozet__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
  .ozet__list li { position: relative; padding-left: 12px; font-size: var(--font-size-13); line-height: 1.4;
    color: var(--color-grey-11); }
  .ozet__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px;
    border-radius: 50%; background: #a794f0; }
  .ozet__son { display: flex; gap: 6px; font-size: 11px; color: var(--color-grey-55); line-height: 1.4; }
  .ozet__son b { font-weight: 500; color: var(--color-grey-40); flex-shrink: 0; }
  .ozet__bos { font-size: 12px; color: var(--color-grey-55); }
  .ozet__uzun { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 5px; background: #ede8fc; color: #6c53cf; }

  /* ---------- 17 AI draft & 24s penceresi ---------- */
  .chat__notice {
    align-self: center; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 6px;
    background: #f1edfd; color: #6c53cf;
    font-size: 11px; font-weight: 450;
  }
  .wpill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .wpill--open { background: #e9f4ec; color: var(--color-success); }
  .wpill--closed { background: #fceceb; color: var(--color-danger); }
  .chat__winrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

  .aidraft {
    border-radius: 10px; padding: 10px 12px;
    background: #f8f6fe;
    box-shadow: inset 0 0 0 1px #e4dcf9;
    display: flex; flex-direction: column; gap: 8px;
  }
  .aidraft textarea {
    width: 100%; min-height: 76px; resize: vertical;
    border: 0; border-radius: 8px; padding: 8px 10px;
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring);
    font: 400 var(--font-size-13)/1.45 var(--font-family-display);
    color: var(--color-grey-11); outline: none;
  }
  .aidraft textarea:focus-visible { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .aidraft__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .aidraft__tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #6c53cf;
  }
  .aidraft__note { font-size: 10px; font-weight: 400; color: var(--color-grey-55); }
  .aidraft__text { font-size: var(--font-size-13); font-weight: 400; color: var(--color-grey-11); line-height: 1.45; }
  .aidraft__text textarea {
    width: 100%; min-height: 64px; resize: vertical;
    border: 0; outline: 0; padding: 6px 8px; border-radius: 6px;
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
    font: inherit; color: var(--color-grey-11); line-height: 1.45;
  }
  .aidraft__actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .aidraft--loading .aidraft__text { display: flex; flex-direction: column; gap: 6px; }

  .ai-attr {
    display: inline-flex; align-items: center;
    padding: 0 4px; border-radius: 4px; height: 12px;
    background: #f1edfd; color: #6c53cf;
    font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  }
  .composer-locked .control { background: var(--color-grey-97); }
  .composer-locked .control input { color: var(--color-grey-55); }

  /* ============================================================
     FAZ 5 — cmdk, timeline, kayıp nedeni
     ============================================================ */

  /* ---------- 18 Command palette ---------- */
  .cmdk {
    position: fixed; z-index: 401; left: 50%; top: 16%;
    transform: translateX(-50%);
    width: 380px; max-width: calc(100vw - 32px);
    border-radius: 12px; overflow: clip;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-modal);
    display: none; flex-direction: column;
  }
  .cmdk.open { display: flex; }
  .cmdk__inputrow {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  .cmdk__inputrow input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }
  .cmdk__inputrow input::placeholder { color: var(--color-grey-55); font-weight: 400; }
  .cmdk__list { max-height: 288px; overflow-y: auto; padding: 6px; }
  .cmdk__group {
    padding: 8px 8px 4px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-grey-55);
  }
  .cmdk__item {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    width: 100%; padding: 7px 8px; border-radius: 6px;
    border: 0; background: none; cursor: pointer; text-align: left;
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }
  .cmdk__item[aria-selected="true"] { background: var(--color-grey-96); }
  .cmdk__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .cmdk__left > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmdk__empty { padding: 18px; text-align: center; font-size: var(--font-size-12); color: var(--color-grey-55); }
  .kbd {
    display: inline-flex; align-items: center;
    padding: 1px 5px; border-radius: 4px;
    background: var(--color-grey-96);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    font-size: 10px; font-weight: 450; color: var(--color-grey-55);
  }

  /* ---------- 19 Unified timeline ---------- */
  .timeline {
    width: 340px; padding: 14px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column;
  }
  .tl-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding-bottom: 16px; }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-item::before {
    content: ''; position: absolute; left: 12px; top: 26px; bottom: 2px;
    width: 1px; background: rgba(0, 0, 0, 0.08);
  }
  .tl-item:last-child::before { display: none; }
  .tl-dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-grey-96);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .tl-dot--violet { background: #f1edfd; }
  .tl-dot--success { background: #e9f4ec; }
  .tl-dot--danger { background: #fceceb; }
  .tl-body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
  .tl-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); }
  .tl-meta { font-size: 11px; font-weight: 400; color: var(--color-grey-55); }

  /* ---------- 20 Kayıp nedeni ---------- */
  .lost-options { display: flex; flex-direction: column; gap: 10px; }

  /* ============================================================
     FAZ 6 — Settings & utility component'leri
     ============================================================ */
  .menu { max-height: 320px; overflow-y: auto; }

  /* ---------- 21 Segmented control ---------- */
  .seg {
    position: relative; display: inline-flex; align-items: center; padding: 2px;
    border-radius: var(--r-8); background: var(--color-grey-96);
  }
  /* aktif yüzey butonun kendi zemini değil, seçenekler arasında kayan tek bir katman */
  .seg__thumb {
    position: absolute; top: 2px; left: 0; height: calc(100% - 4px); border-radius: var(--r-6);
    background: var(--color-white-solid); pointer-events: none;
    /* keskin kenar: bulanıklık kısılır, halka kontrastı artar — yumuşak gölge
       beyaz pili gri rayın üstünde eritiyordu */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
    transform: translateX(var(--seg-x, 0px)); width: var(--seg-w, 0px);
    transition: transform 220ms var(--ease-out-quart), width 220ms var(--ease-out-quart);
  }
  .seg:not([data-ready]) .seg__thumb { transition: none; opacity: 0; } /* ilk yerleşim kaymaz */
  .field .seg { align-self: flex-start; } /* field stretch'ine karşı içerik sarımı */
  .seg__opt {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 26px; padding: 0 12px; border: 0; border-radius: var(--r-6); background: none; cursor: pointer; /* sabit 26 — ikonlu 26 / metinli 25 farkı kalktı (#30) */
    font-family: inherit; font-size: var(--font-size-13); font-weight: 450;
    color: var(--color-grey-55);
    transition: background-color 120ms ease, color 120ms ease;
  }
  .seg__opt--icon { padding: 5px 10px; }
  .seg__opt { position: relative; z-index: 1; } /* thumb'ın üstünde kalır */
  .seg__opt[aria-pressed="true"] { color: var(--color-grey-11); }
  .seg__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) { .seg__thumb { transition: none; } }
  .seg__opt[aria-pressed="true"] .icf svg path,
  .seg__opt[aria-pressed="true"] .icf svg rect,
  .seg__opt[aria-pressed="true"] .icf svg circle { stroke: #212121; }

  /* ---------- 22 Progress / Copy / Code ---------- */
  .progress {
    width: 260px; height: 8px; border-radius: 4px;
    background: var(--color-grey-95); overflow: hidden;
  }
  .progress__fill {
    height: 100%; border-radius: 4px;
    background: var(--color-accent);
    transition: width 300ms linear;
  }
  @media (prefers-reduced-motion: reduce) { .progress__fill { transition: none; } }

  .copyfield {
    display: flex; align-items: center; gap: 8px;
    width: 300px; max-width: 100%; height: 38px; padding: 4px 4px 4px 12px;
    border-radius: 10px;
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring);
  }
  .copyfield__text {
    flex: 1; min-width: 0; font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .codechip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; padding: 3px 8px; border-radius: 6px;
    background: var(--color-grey-96); color: var(--color-grey-19);
    cursor: pointer; border: 0;
    transition: background-color 120ms ease;
  }
  .codechip:hover { background: var(--color-grey-95); }
  .codechip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .kvrow {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 480px; max-width: 100%;
    font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11);
  }

  /* ---------- 23 Settings & connector rows ---------- */
  .tile {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring);
    display: flex; align-items: center; justify-content: center;
  }
  .setrow {
    display: flex; align-items: center; gap: 12px;
    width: 480px; max-width: 100%; padding: 10px 12px; border-radius: 12px;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
  }
  .setrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .setrow__title { font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); }
  .setrow__sub { font-size: 11px; font-weight: 400; color: var(--color-grey-55); }
  .setrow__actions { display: flex; align-items: center; gap: 6px; }

  .setlist {
    width: 520px; max-width: 100%; border-radius: 12px; overflow: clip;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
  }
  .setlist__row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  }
  .setlist__row + .setlist__row { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
  .setlist__type { display: flex; align-items: center; gap: 6px; width: 120px; flex-shrink: 0; font-size: var(--font-size-12); color: var(--color-grey-55); }
  .setlist__status { width: 76px; display: flex; justify-content: flex-end; flex-shrink: 0; }

  /* ---------- 24 Selectable list group ---------- */
  .selgroup {
    width: 520px; max-width: 100%; border-radius: 12px; overflow: clip;
    background: var(--color-white-solid);
    box-shadow: var(--shadow-card);
  }
  .selgroup__head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 14px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  .selgroup__title { font-size: var(--font-size-13); font-weight: 500; color: var(--color-grey-11); }
  .selrow {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 10px 14px; border: 0; background: none; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: background-color 120ms ease;
  }
  .selrow + .selrow { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
  .selrow:hover { background: var(--color-grey-97); }
  .selrow[aria-checked="true"] { background: var(--color-grey-97); }
  .selrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .selrow__index { width: 14px; font-size: var(--font-size-12); color: var(--color-grey-55); flex-shrink: 0; }
  .selrow__check { width: 14px; flex-shrink: 0; display: flex; }
  .selrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .selrow__title { font-size: var(--font-size-13); font-weight: 450; color: var(--color-grey-11); }
  .selrow__sub { font-size: 11px; color: var(--color-grey-55); }
  .selrow__meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: var(--color-grey-55); flex-shrink: 0;
  }


  /* ========== 25 · App Shell ========== */
  .shellwrap { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .shellbar { display: flex; align-items: center; gap: 14px; }
  .appshell {
    display: flex; gap: 8px; padding: 8px; height: 560px; width: 100%;
    background: var(--color-grey-97); border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden;
  }
  .panelCard {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--color-white-solid); border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .appside { width: 192px; flex-shrink: 0; padding: 8px; gap: 2px;
    transition: width 220ms var(--ease-out-quart); }
  .appside--min { width: 48px; }
  .appside__grp { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-grey-55); padding: 10px 8px 4px; white-space: nowrap; overflow: hidden; }
  .appside--min .appside__grp { visibility: hidden; } /* yükseklik korunur — altındaki satırlar zıplamaz */
  .anav {
    display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 7px;
    /* sol dolgu 7px: daralmışken ikon merkezde kalır — min durumunda hizalama OVERRIDE'ı yok, atlama olmaz */
    border: 0; background: transparent; border-radius: var(--corner-radius-8);
    font: 450 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-19);
    cursor: pointer; width: 100%; text-align: left;
  }
  .anav:hover { background: var(--color-grey-96); }
  .anav--active { background: var(--color-grey-96); color: var(--color-grey-11); }
  .anav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .anav .icf { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-grey-19); }
  .anav__label { flex: 1 1 0; white-space: nowrap; overflow: hidden;
    transition: opacity 120ms ease, flex-grow 220ms var(--ease-out-quart); }
  .anav__count { font-size: 10px; font-weight: 500; color: var(--color-grey-55); }
  /* marka + workspace */
  /* sağda 22px pay: mutlak konumlu daralt butonu unfold okunun üstüne binmesin */
  .appside__brand { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); padding: 4px 6px 6px 4px;
    border: 0; background: transparent; cursor: pointer; border-radius: 8px; text-align: left; }
  .appside__brand:hover { background: var(--color-grey-96); }
  /* çalışma alanı seçici ile gezinme ayrı iki blok — aralarında nefes payı olmalı,
     yoksa marka satırı menünün ilk maddesi gibi okunuyor */
  .appside__top { display: flex; align-items: center; gap: 2px; position: relative;
    padding-bottom: 10px;
    transition: padding-bottom 220ms var(--ease-out-quart); }
  .appside__collapse { position: absolute; top: 11px; left: calc(100% - 22px); width: 14px; height: 14px;
    padding: 0; border: 0; background: transparent;
    cursor: pointer; color: var(--color-grey-55); display: flex; align-items: center;
    justify-content: center; border-radius: 4px; z-index: 1;
    transition: top 220ms var(--ease-out-quart), left 220ms var(--ease-out-quart),
      width 220ms var(--ease-out-quart), height 220ms var(--ease-out-quart); }
  .appside__collapse:hover { color: var(--color-grey-19); }
  .appside__collapse:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .appside__collapse svg { display: block; }
  /* daralmışken buton markanın altına KAYARAK iner (top/left/width/height animasyonlu);
     üst bölge padding-bottom geçişiyle yer açar — hiçbir şey anlık zıplamaz */
  .appside--min .appside__top { padding-bottom: 34px; }
  .appside--min .appside__collapse { top: 41px; left: 0; width: 100%; height: 30px; border-radius: 8px; }
  .appside--min .appside__collapse:hover { background: var(--color-grey-96); color: var(--color-grey-19); }
  .anav-kids { display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 180ms var(--ease-in-out-cubic); }
  .anav-kids[data-open="true"] { grid-template-rows: 1fr; }
  .anav-kids__in { overflow: hidden; min-height: 0; display: flex; flex-direction: column;
    gap: 1px; padding: 1px 0; }
  .anav-kids[data-open="true"] .anav-kids__in { padding-bottom: 3px; }
  .akid { position: relative; display: flex; align-items: center; gap: 8px; height: 26px;
    padding: 0 6px 0 32px; border: 0; background: transparent; cursor: pointer; width: 100%;
    border-radius: var(--corner-radius-8); text-align: left;
    font: 450 13px/1 var(--font-family-display); color: var(--color-grey-55); }
  .akid:hover { background: var(--color-grey-96); color: var(--color-grey-19); }
  .akid--active { background: var(--color-grey-96); color: var(--color-grey-11); }
  .akid:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .akid__elbow { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: none; color: var(--color-grey-55); }
  .akid--active .akid__elbow { display: inline-flex; }
  /* ağaç gövdesi: her alt satır kendi dikey parçasını çizer, aktifte dirseğe bağlanır.
     Eksen NUCLEO.elbow'un dikey konturundan türetildi: left 12 + (2.75-1.75)*14/14.5 = 12.97 merkez,
     1.25px kalınlık (ikonun ekrandaki kontur kalınlığı) → left = 12.76 - 0.625 = 12.13 */
  .akid::before { content: ''; position: absolute; left: 12.34px; top: 0; width: 1.25px;
    height: calc(100% + 1px); /* .anav-kids__in'in 1px gap'ini köprüle — hat kesintisiz aksın */
    background: rgba(0, 0, 0, 0.13); border-radius: 1px; }
  .akid:first-child::before { top: -1px; height: calc(100% + 2px); } /* üstte ebeveyne dayan */
  .akid:last-child::before { height: 50%; } /* aktif yoksa gövde son satırın ortasında biter */
  .akid.akid--active::before { height: calc(50% - 1.09px); } /* dirsekte kavisin başladığı nokta */
  .akid--active ~ .akid::before { content: none; } /* ok gövdeyi sonlandırır */
  .akid__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .akid__count { font-size: 10px; font-weight: 500; color: var(--color-grey-55); }
  .appside--min .anav-kids { display: none; }
  .appside__brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .appside__logo { width: 24px; height: 24px; border-radius: var(--r-6); background: var(--color-accent);
    color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font: 500 12px var(--font-family-display); }
  .appside__ws { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    white-space: nowrap; transition: opacity 120ms ease, flex-grow 220ms var(--ease-out-quart); }
  .appside__wsname { font-size: 13px; font-weight: 500; color: var(--color-grey-11);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appside__wsplan { font-size: 10px; color: var(--color-grey-55); }
  .appside__brand .icf { width: 13px; height: 13px; color: var(--color-grey-55); flex-shrink: 0; }
  .appside--min .appside__brand { width: 100%; padding-right: 4px; } /* darda buton aşağıda — pay gereksiz */
  .appside--min .appside__ws { opacity: 0; flex-grow: 0; }
  .appside--min .appside__brand .icf { display: none; }
  /* arama alanı */
  .appside__search { display: flex; align-items: center; gap: 6px; height: 28px; width: 100%;
    margin: 0 0 6px; padding: 0 8px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--color-grey-96); font: 400 12px var(--font-family-display);
    color: var(--color-grey-55); }
  .appside__search:hover { background: var(--color-grey-95); }
  .appside__search:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .appside__search .icf { width: 13px; height: 13px; flex-shrink: 0; }
  .appside__search .kbd { margin-left: auto; }
  .appside--min .appside__search { justify-content: center; padding: 0; }
  .appside--min .appside__search span:not(.icf), .appside--min .appside__search .kbd { display: none; }
  /* kullanıcı kartı */
  .appside__user { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; box-sizing: border-box; padding: 5px 4px; /* brand ile aynı 38 (#30) */
    border: 0; background: transparent; cursor: pointer; border-radius: 8px; text-align: left; }
  .appside__user:hover { background: var(--color-grey-96); }
  .appside__user:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .appside__user .avatar { flex-shrink: 0; }
  .appside__ucol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    white-space: nowrap; transition: opacity 120ms ease, flex-grow 220ms var(--ease-out-quart); }
  .appside__uname { font-size: 12px; font-weight: 500; color: var(--color-grey-11);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appside__urole { font-size: 10px; color: var(--color-grey-55); }
  .appside--min .appside__ucol { opacity: 0; flex-grow: 0; }
  .anav--active .icf { color: var(--color-accent); }
  /* liste başlığında çevrimiçi ajanlar */
  .pfaces { display: inline-flex; align-items: center; margin-right: 2px; }
  .pfaces img { width: 18px; height: 18px; border-radius: 50%; display: block;
    box-shadow: 0 0 0 2px var(--color-white-solid); }
  .pfaces img + img { margin-left: -6px; }
  /* mini timeline + notlar */
  .mtl { position: relative; padding: 2px 0 2px 16px; }
  .mtl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px; background: var(--color-grey-92); }
  .mtl__it { position: relative; padding: 5px 0; font-size: 12px; color: var(--color-grey-19); }
  .mtl__it::before { content: ""; position: absolute; left: -15.5px; top: 10px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 2px var(--color-accent); }
  .mtl__t { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .notelist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .notecard__head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
  .notecard__head b { font-size: 12px; font-weight: 500; color: var(--color-grey-11); }
  .notecard__time { margin-left: auto; font-size: 11px; color: var(--color-grey-55); }
  .notecard__acts { display: inline-flex; gap: 2px; visibility: hidden; }
  .notecard:hover .notecard__acts, .notecard:focus-within .notecard__acts { visibility: visible; }
  .notecard__act { width: 18px; height: 18px; border: 0; background: none; border-radius: 5px;
    padding: 0; color: var(--color-grey-55); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .notecard__act:hover { background: rgba(0, 0, 0, 0.07); color: var(--color-grey-11); }
  .notecard__act svg { width: 11px; height: 11px; }
  .notecard__body { font: 400 13px/1.45 var(--font-family-display); color: var(--color-grey-11); }
  .ncomp { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
  .ncomp .notein { flex: 1; width: auto; margin-top: 0; }
  .ncomp__send { width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--color-accent); color: var(--color-white-solid);
    transition: background 120ms ease, transform 80ms ease; }
  .ncomp__send:disabled { background: var(--color-grey-95); color: var(--color-grey-55); cursor: default; }
  .ncomp__send:not(:disabled):active { transform: scale(0.94); }
  .ncomp__send .icf { display: flex; } /* ikon doğal 14px — CSS ölçekleme yok */
  .notecard { background: var(--color-grey-97); border-radius: 8px; padding: 8px 10px;
    font-size: 12px; color: var(--color-grey-19); margin-bottom: 6px; }
  .notecard__meta { font-size: 11px; color: var(--color-grey-55); margin-top: 4px; }
  .notein { width: 100%; box-sizing: border-box; height: 30px; border: 0; border-radius: 8px; padding: 0 10px; margin-top: 2px;
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    font: 400 12px var(--font-family-display); color: var(--color-grey-11); }
  .notein:focus { outline: none; box-shadow: inset 0 0 0 1px var(--color-accent),
    0 0 0 3px var(--color-accent-tint, rgba(139, 116, 232, 0.15)); }
  .appside--min .anav__label { opacity: 0; flex-grow: 0; }
  .appside--min .anav__count { display: none; }
  .appside__foot { margin-top: auto; }
  .appmain { flex: 1; min-width: 0; }
  .apppage { flex: 1; min-width: 0; display: none; }
  .apppage.on { display: flex; }
  .pgcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-grey-55); }
  .pgcrumb b { color: var(--color-grey-11); font-weight: 450; }
  .pgcrumb .icf { width: 14px; height: 14px; display: inline-flex; }
  .pghead { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; flex-shrink: 0; }
  .pghead .avatar--36 { width: 44px; height: 44px; }
  .pghead__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .pghead__name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-grey-11); }
  .pghead__meta { display: flex; align-items: center; gap: 6px; }
  .pgbody { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px;
    display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-content: start; }
  .pgbody--one { display: block; }
  .pgcard { background: var(--color-grey-97); border-radius: 10px; padding: 4px 12px; }
  .pgh { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-grey-55); margin: 10px 0 6px; }
  .pgstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 4px; }
  .pgstats .stat { min-width: 0; width: auto; }
  @media (max-width: 640px) { .pgbody { grid-template-columns: 1fr; } }
  .appdetail { width: 300px; flex-shrink: 0; }
  .phead {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  .phead__title { font-size: 15px; font-weight: 450; color: var(--color-grey-11); }
  .phead__count { font-size: 11px; font-weight: 450; color: var(--color-grey-40);
    background: var(--color-grey-96); border-radius: 10px; padding: 1px 7px; }
  .phead__spacer { flex: 1; }
  .pbody { flex: 1; min-height: 0; overflow-y: auto; }
  .pbody--pad { padding: 10px 12px; }
  .pbody--list { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
  .dtabs { display: flex; gap: 2px; padding: 0 12px; flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
  .dtab {
    height: 32px; padding: 0 8px; border: 0; background: transparent; cursor: pointer;
    font: 450 12px/1 var(--font-family-display); color: var(--color-grey-55);
  }
  .dtab:hover { color: var(--color-grey-19); }
  .dtab--active { color: var(--color-grey-11); box-shadow: inset 0 -1.5px 0 var(--color-accent); }
  .dtab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .csec { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); }
  .csec:last-child { box-shadow: none; }
  .csec__head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 9px 2px; border: 0; background: transparent; cursor: pointer;
    font: 450 12px/1 var(--font-family-display); color: var(--color-grey-19);
  }
  .csec__head .icf { width: 12px; height: 12px; color: var(--color-grey-55); transition: transform 160ms var(--ease-in-out-cubic); }
  .csec[data-open="true"] .csec__head .icf { transform: rotate(180deg); }
  .csec__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms var(--ease-in-out-cubic); }
  .csec[data-open="true"] .csec__body { grid-template-rows: 1fr; }
  .csec__inner { overflow: hidden; min-height: 0; }
  /* gezinti geri bildirimi: satır zemini + metin/ikon koyulaşır (WebKit'te tık odak vermez, hover şart) */
  .csec__head { transition: background-color 120ms var(--ease-out-quart), color 120ms var(--ease-out-quart); }
  .csec__head:hover { background: var(--color-grey-97); color: var(--color-grey-11); }
  .csec__head:active { background: var(--color-grey-95); }
  .csec__head:hover .icf { color: var(--color-grey-19); }
  .csec:focus-within .csec__head { color: var(--color-grey-11); }
  .csec__head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 4px; }
  .frow { display: flex; align-items: center; gap: 8px; min-height: 26px; }
  .frow__label { width: 88px; flex-shrink: 0; font-size: 12px; font-weight: 400; color: var(--color-grey-55); }
  .frow__value { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    font-size: 12px; font-weight: 450; color: var(--color-grey-11); text-align: right;
    font-variant-numeric: tabular-nums; min-width: 0; }
  .frow__value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frow__copy { display: none; border: 0; background: transparent; cursor: pointer; padding: 2px;
    border-radius: 4px; color: var(--color-grey-55); width: 18px; height: 18px; flex-shrink: 0; }
  .frow__copy--ok { color: #3f9d67 !important; }
  .frow__copy--ok svg { animation: copyPop 200ms var(--ease-out-quart); }
  @keyframes copyPop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
  .frow:hover .frow__copy, .frow__copy:focus-visible { display: inline-flex; }
  .frow__copy:focus-visible { outline: 2px solid var(--color-accent); }
  .frow__copy svg { width: 12px; height: 12px; }
  /* mobil durum — toggle sınıfı ve gerçek dar ekran aynı kuralları paylaşır */
  .appshell--mobile { width: 375px; flex-direction: column; height: 560px; padding: 0; gap: 0;
    background: var(--color-white-solid); border-radius: 0; box-shadow: none; }
  .appshell--mobile .panelCard { border-radius: 0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); }
  .appshell--mobile .appside { display: none; }
  .appshell--mobile .appmain { flex: 1; }
  .appshell--mobile .apppage.on { flex: 1; }
  .appshell--mobile .appdetail { display: none; }
  .appshell--mobile[data-view="detail"] .appmain { display: none; }
  .appshell--mobile[data-view="detail"] .appdetail { display: flex; width: 100%; flex: 1; max-height: none; }
  @media (max-width: 640px) {
    .appshell { flex-direction: column; padding: 0; gap: 0; background: var(--color-white-solid);
      border-radius: 0; box-shadow: none; }
    .appshell .panelCard { border-radius: 0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); }
    .appshell .appside { display: none; }
    .appshell .appdetail { width: 100%; flex: none; max-height: 45%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .appside, .appside__top, .appside__collapse, .csec__body, .csec__head .icf { transition: none; }
  }


  /* ========== 33 · Data Table ========== */
  .dt { display: flex; flex-direction: column; width: 100%; max-width: 720px;
    background: var(--color-white-solid); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
  .dt__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); flex-wrap: wrap; }
  .dt__bar .control { width: 200px; }
  .dt__count { margin-left: auto; font-size: 11px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .dt__bulk { display: none; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--color-grey-97); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); font-size: 12px; font-weight: 450; }
  .dt__bulk.on { display: flex; }
  .dt__bulk-count { color: var(--color-grey-11); margin-right: 4px; font-variant-numeric: tabular-nums; }
  .dt table { width: 100%; border-collapse: collapse; }
  .dt th { text-align: left; padding: 0; }
  .dt th, .dt td { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); }
  .dt tbody tr:last-child td { box-shadow: none; }
  .dt__th { display: flex; align-items: center; gap: 3px; width: 100%; height: 30px; padding: 0 10px;
    border: 0; background: transparent; cursor: pointer; font: 450 11px/1 var(--font-family-display);
    color: var(--color-grey-55); }
  .dt__th:hover { color: var(--color-grey-19); }
  .dt__th:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .dt__th .icf { width: 14px; height: 14px; visibility: hidden; }
  .dt__th[data-dir] .icf { visibility: visible; color: var(--color-grey-19); }
  .dt__th--plain { cursor: default; }
  .dt__th--plain:hover { color: var(--color-grey-55); }
  .dt td { padding: 7px 10px; font-size: 12px; font-weight: 400; color: var(--color-grey-19); }
  .dt td.num { text-align: right; font-weight: 450; color: var(--color-grey-11); }
  .dt tbody tr:hover { background: var(--color-grey-98-2); }
  .dt tbody tr.sel { background: var(--color-accent-tint); }
  .dt .tname { font-weight: 450; color: var(--color-grey-11); }
  .dt__chk { width: 30px; padding-left: 12px !important; }
  .dt__chk .choice { gap: 0; }
  .dt__empty { padding: 28px 12px; }
  .dt__pager { display: flex; align-items: center; gap: 4px; padding: 8px 12px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
  .dt__pinfo { margin-left: auto; font-size: 11px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .pgbtn { min-width: 24px; height: 24px; padding: 0 6px; border: 0; border-radius: 6px;
    background: transparent; cursor: pointer; font: 450 12px/1 var(--font-family-display);
    color: var(--color-grey-19); font-variant-numeric: tabular-nums; }
  .pgbtn:hover { background: var(--color-grey-96); }
  .pgbtn[aria-current="page"] { background: var(--color-grey-11); color: #fff; }
  .pgbtn:disabled { color: var(--color-grey-71); cursor: default; background: transparent; }
  .pgbtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .pgdots { font-size: 12px; color: var(--color-grey-55); padding: 0 2px; }

  /* ========== 34 · Charts ========== */
  .chartrow { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; }
  .chartcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 220px; flex: 1;
    background: var(--color-white-solid); border-radius: 12px; box-shadow: var(--shadow-card); }
  .chartcard h4 { margin: 0; font-size: 12px; font-weight: 500; color: var(--color-grey-11); }
  .chartcard svg { width: 100%; height: auto; display: block; }
  .chart-grid { stroke: rgba(0, 0, 0, 0.06); stroke-width: 1; }
  .chart-label { font: 400 10px var(--font-family-display); fill: var(--color-grey-55); }
  .chart-bar { fill: var(--chart-3); }
  .chart-bar:hover { fill: var(--chart-4); }
  .chart-line { fill: none; stroke: var(--chart-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart-dot { fill: var(--chart-4); stroke: #fff; stroke-width: 1.5; opacity: 0; }
  .chart-dot.on { opacity: 1; }
  .charttip { position: fixed; z-index: 60; pointer-events: none; padding: 4px 8px; border-radius: 6px;
    background: var(--color-grey-10); color: #fff; font-size: 11px; font-weight: 450; opacity: 0;
    transition: opacity 100ms; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .charttip.on { opacity: 1; }
  .chart-legend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--color-grey-19); }
  .chart-legend .row { display: flex; align-items: center; gap: 6px; }
  .chart-legend .dotc { width: 7px; height: 7px; border-radius: 50%; }
  .chart-legend .pct { margin-left: auto; font-weight: 450; color: var(--color-grey-11); font-variant-numeric: tabular-nums; }
  .donutwrap { display: flex; align-items: center; gap: 14px; }
  .donutc { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
  .donutc .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .donutc .mid b { font-size: 15px; font-weight: 500; color: var(--color-grey-11); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
  .donutc .mid span { font-size: 10px; color: var(--color-grey-55); }

  /* ========== 35 · Takvim (tam görünüm) ========== */
  .fullcal { width: 100%; max-width: 720px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
  .fc__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
  .fc__title { font-size: 13px; font-weight: 500; color: var(--color-grey-11); min-width: 110px; }
  .fc__spacer { flex: 1; }
  .fc__dow { display: grid; grid-template-columns: repeat(7, 1fr); }
  .fc__dow span { padding: 6px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-grey-55); }
  .fc__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .fc__day { min-height: 74px; padding: 5px 6px; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 rgba(0, 0, 0, 0.03); }
  .fc__day:hover { background: var(--color-grey-98-2); }
  .fc__day:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .fc__num { font-size: 11px; font-weight: 450; color: var(--color-grey-19);
    width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-variant-numeric: tabular-nums; }
  .fc__day--out .fc__num { color: var(--color-grey-71); }
  .fc__day--today { box-shadow: inset 0 0 0 1.5px var(--color-accent); border-radius: 8px; }
  .fc__day--today .fc__num { background: var(--color-accent); color: #fff; }
  .fc__chip { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 5px;
    border-radius: 4px; background: var(--color-grey-97); font-size: 10px; font-weight: 450;
    color: var(--color-grey-19); overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .fc__chip .dotc { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .fc__more { font-size: 10px; font-weight: 450; color: var(--color-grey-55); padding-left: 5px; }
  .fullcal--week .fc__day { min-height: 130px; }


  /* ========== 36 · Baseline Asistan ========== */
  .aistage { position: relative; width: 100%; max-width: 720px; height: 500px;
    background: var(--color-grey-97); border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden; }
  .aiorb {
    position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px;
    border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 25%, #c9bbf7 0%, #8b74e8 55%, #6c53cf 100%);
    box-shadow: 0 6px 16px rgba(108, 83, 207, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.45);
    transition: transform 180ms var(--ease-in-out-cubic);
  }
  .aiorb:hover { transform: scale(1.06); }
  .aiorb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .aiorb svg { width: 18px; height: 18px; }
  .aipanel {
    position: absolute; right: 16px; bottom: 70px; width: 360px; max-width: calc(100% - 32px);
    max-height: 410px; display: flex; flex-direction: column;
    background: var(--color-white-solid); border-radius: 12px; box-shadow: var(--shadow-menu);
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
  }
  .aipanel.open { opacity: 1; transform: none; pointer-events: auto; }
  .aipanel__head { display: flex; align-items: center; gap: 7px; padding: 10px 12px; flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
  .aipanel__title { font-size: 13px; font-weight: 500; color: var(--color-grey-11); flex: 1; }
  .aipanel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 10px; }
  .aimsg--user { align-self: flex-end; max-width: 85%; padding: 6px 10px;
    background: var(--color-grey-96); border-radius: 10px; border-bottom-right-radius: 4px;
    font-size: var(--font-size-13); color: var(--color-grey-11); line-height: 1.45; }
  .aimsg--bot { align-self: flex-start; max-width: 92%; padding: 8px 10px;
    background: var(--color-white-solid); border-radius: 10px; border-bottom-left-radius: 4px;
    box-shadow: inset 0 0 0 1px #e4dcf9;
    font-size: var(--font-size-13); color: var(--color-grey-11); line-height: 1.5;
    display: flex; flex-direction: column; gap: 7px; }
  .aithink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 450;
    color: #6c53cf; animation: aithink 1.1s ease-in-out infinite; }
  @keyframes aithink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  .airsn { border-radius: 8px; background: #f8f6fe; box-shadow: inset 0 0 0 1px #e4dcf9; overflow: hidden; }
  .airsn__head { display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 5px 8px; border: 0; background: transparent; cursor: pointer;
    font: 600 10px/1 var(--font-family-display); letter-spacing: 0.04em; text-transform: uppercase; color: #6c53cf; }
  .airsn__head .icf { width: 14px; height: 14px; color: #6c53cf; transition: transform 160ms var(--ease-in-out-cubic); }
  .airsn[data-open="true"] .airsn__head .icf { transform: rotate(180deg); }
  .airsn__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms var(--ease-in-out-cubic); }
  .airsn[data-open="true"] .airsn__body { grid-template-rows: 1fr; }
  .airsn__inner { overflow: hidden; min-height: 0; }
  .airsn__inner p { margin: 0; padding: 0 8px 7px; font-size: 11px; color: var(--color-grey-19); line-height: 1.5; }
  .aisrc { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px;
    border: 0; border-radius: var(--r-pill); cursor: pointer; align-self: flex-start;
    background: #f1edfd; color: #6c53cf; font: 450 10px/1 var(--font-family-display); }
  .aisrc:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .aisugs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .aisug { border: 0; cursor: pointer; padding: 5px 10px; border-radius: 999px;
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    font: 450 12px/1.2 var(--font-family-display); color: var(--color-grey-19); text-align: left; }
  .aisug:hover { background: var(--color-grey-96); }
  .aisug:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .aisug--inline { background: #f8f6fe; box-shadow: inset 0 0 0 1px #e4dcf9; color: #6c53cf; }
  .aiconfirm { border-radius: 10px; background: var(--color-grey-98-2);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px; }
  .aiconfirm__q { font-size: 12px; font-weight: 500; color: var(--color-grey-11); }
  .aiconfirm__meta { font-size: 11px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .aiconfirm__acts { display: flex; gap: 6px; }
  .aiconfirm--done .aiconfirm__q { color: var(--color-success); }
  .aiconfirm--off .aiconfirm__q { color: var(--color-grey-55); text-decoration: line-through; }
  .aipanel__foot { flex-shrink: 0; padding: 8px 10px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    display: flex; align-items: center; gap: 6px; }
  .aiin { flex: 1; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 6px;
    border-radius: 999px; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring); }
  .aiin:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .aiin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 400 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-11); }
  .aiin input::placeholder { color: var(--color-grey-55); }
  .aiin.rec input::placeholder { color: #8b74e8; }
  .aiin__ic { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-grey-55); }
  .aiin__ic:hover { background: var(--color-grey-96); color: var(--color-grey-19); }
  .aiin__ic:focus-visible { outline: 2px solid var(--color-accent); }
  .aiin__ic--send { background: var(--color-grey-10); color: #fff; }
  .aiin__ic--send:hover { background: var(--color-grey-4); color: #fff; }
  .aiin__ic svg { width: 13px; height: 13px; }
  .recdot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger);
    animation: aithink 1s infinite; flex-shrink: 0; }
  .rectime { font-size: 11px; font-weight: 450; color: var(--color-danger); font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) {
    .aipanel, .aiorb, .airsn__body, .airsn__head .icf { transition: none; }
    .aithink, .recdot { animation: none; }
  }


  /* ========== 26-27 · Tabs & Accordion (dtab/csec yeniden kullanır) ========== */
  .tabsdemo { width: 100%; max-width: 460px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
  .tabsdemo .pbody--pad { min-height: 76px; font-size: 12px; color: var(--color-grey-19); line-height: 1.5; }
  .accdemo { width: 100%; max-width: 460px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: var(--shadow-card); padding: 2px 12px; }
  .accdemo .csec__inner p { margin: 0; padding: 0 2px 10px; font-size: 12px; color: var(--color-grey-19); line-height: 1.55; }

  /* ========== 28 · Combobox ========== */
  .cbx { position: relative; width: 240px; }
  .cbx .control input { cursor: text; }
  .cbx__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--color-white-solid); border-radius: 8px; box-shadow: var(--shadow-menu);
    max-height: 200px; overflow-y: auto; padding: 3px; display: none; }
  .cbx.open .cbx__list { display: block; }
  .cbx__opt { display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font: 450 var(--font-size-13)/1.2 var(--font-family-display); color: var(--color-grey-11); text-align: left; }
  .cbx__opt:hover, .cbx__opt.hl { background: var(--color-grey-96); }
  .cbx__opt small { font-weight: 400; color: var(--color-grey-55); font-size: 11px; }
  .cbx__none { padding: 10px 8px; font-size: 12px; color: var(--color-grey-55); }

  /* ========== 29 · Tag Input ========== */
  .taginput { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; max-width: 380px;
    min-height: 34px; padding: 4px 8px; border-radius: var(--corner-radius-8);
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring); cursor: text; }
  .taginput:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .taginput input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent;
    font: 400 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-11); height: 22px; }
  .taginput input::placeholder { color: var(--color-grey-55); }
  .tagchip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 3px 0 7px;
    border-radius: 6px; background: var(--color-grey-96); font-size: 11px; font-weight: 450; color: var(--color-grey-19); }
  .tagchip button { width: 14px; height: 14px; border: 0; border-radius: 4px; background: transparent;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-grey-55); padding: 0; }
  .tagchip button:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-grey-11); }
  .tagchip button:focus-visible { outline: 2px solid var(--color-accent); }
  .tagchip button svg { width: 8px; height: 8px; }
  .taginput__max { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .taginput__max.full { color: var(--color-danger); }

  /* ========== 30 · Breadcrumb ========== */
  .bc { display: flex; align-items: center; gap: 4px; font-size: 12px; }
  .bc a { color: var(--color-grey-55); text-decoration: none; padding: 3px 5px; border-radius: 6px; font-weight: 450; }
  .bc a:hover { background: var(--color-grey-96); color: var(--color-grey-19); }
  .bc a:focus-visible { outline: 2px solid var(--color-accent); }
  .bc .icf { width: 9px; height: 9px; color: var(--color-grey-71); }
  .bc__cur { font-weight: 450; color: var(--color-grey-11); padding: 3px 5px; }
  .pgwrap { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 420px; }
  .pgwrap .dt__pinfo { margin-left: auto; }

  /* ========== 31 · Slider / OTP ========== */
  .dslider { width: 100%; max-width: 320px; }
  .dslider__vals { display: flex; justify-content: space-between; font-size: 12px; font-weight: 450;
    color: var(--color-grey-11); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
  .dslider__track { position: relative; height: 20px; }
  .dslider__rail { position: absolute; top: 8px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--color-grey-95); }
  .dslider__fill { position: absolute; top: 8px; height: 4px; border-radius: 2px; background: var(--color-accent); }
  .dslider input[type="range"] {
    position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none; height: 20px;
  }
  .dslider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; border: 0; cursor: grab; margin-top: 0;
    box-shadow: 0 0 0 1.5px var(--color-accent), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .dslider input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0;
    cursor: grab; box-shadow: 0 0 0 1.5px var(--color-accent), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .dslider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .otp { display: flex; gap: 6px; }
  .otp input { width: 34px; height: 40px; text-align: center; border: 0; border-radius: var(--corner-radius-8);
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    font: 500 15px/1 var(--font-family-display); color: var(--color-grey-11); outline: 0;
    font-variant-numeric: tabular-nums; caret-color: var(--color-accent); }
  .otp input:focus { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .otp.done input { box-shadow: inset 0 0 0 1.5px var(--color-accent); background: var(--color-accent-tint); }

  /* ========== 32 · Signature Pad ========== */
  .signpad { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
  .signpad__cv { position: relative; border-radius: 10px; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring); overflow: hidden; }
  .signpad__cv canvas { display: block; width: 100%; height: 140px; touch-action: none; cursor: crosshair; }
  .signpad__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--color-grey-71); pointer-events: none; }
  .signpad__lock { position: absolute; inset: 0; display: none; align-items: flex-end; padding: 8px;
    background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.85)); }
  .signpad.locked .signpad__cv canvas { pointer-events: none; cursor: default; }
  .signpad.locked .signpad__lock { display: flex; }
  .signpad__acts { display: flex; gap: 6px; align-items: center; }
  .signpad__meta { font-size: 11px; color: var(--color-grey-55); margin-left: auto; font-variant-numeric: tabular-nums; }


  /* ========== 37 · Voice note ========== */
  .vnote { display: flex; align-items: center; gap: 9px; min-width: 228px; }
  .vnote__ava { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-grey-95); display: flex; align-items: center; justify-content: center;
    font: 600 10px var(--font-family-display); color: var(--color-grey-19); }
  .vnote__ava i { position: absolute; right: -3px; bottom: -2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--color-accent); color: #fff; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-white-solid); }
  .vnote__ava i svg { width: 8px; height: 8px; }
  .vnote__play { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
    flex-shrink: 0; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring); display: flex; align-items: center;
    justify-content: center; color: var(--color-grey-19); transition: background 120ms ease; }
  .vnote__play:hover { background: var(--color-grey-98-2); }
  .vnote__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .vnote__play svg { width: 11px; height: 11px; }
  .vnote__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .vnote__wave { position: relative; display: flex; align-items: center; gap: 2px; height: 20px; }
  .vnote__wave i { width: 2.5px; border-radius: 2px; background: var(--color-grey-71); opacity: 0.45; }
  .vnote__wave i.on { background: var(--color-accent); opacity: 1; }
  .vnote__dot { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-accent); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--color-white-solid); transition: left 90ms linear; }
  .vnote__row { display: flex; align-items: center; gap: 6px; }
  .vnote__dur { font-size: 10px; font-weight: 450; color: var(--color-grey-55);
    font-variant-numeric: tabular-nums; }
  .vnote__speed { height: 16px; padding: 0 7px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--color-grey-19); color: #fff; font: 500 9px/16px var(--font-family-display); }
  .vnote__speed:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .vnote__new { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
    margin-left: auto; }
  .vcomposer { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 380px; height: 36px;
    padding: 0 6px 0 10px; border-radius: 999px; background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring); }
  .vcomposer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: 400 var(--font-size-13)/1 var(--font-family-display); color: var(--color-grey-11); }
  .vcomposer input::placeholder { color: var(--color-grey-55); }
  .vcomposer:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }

  /* ========== 38 · Attachment & lightbox ========== */
  .bubble--media { padding: 4px; }
  .attgrid { position: relative; display: grid; grid-template-columns: repeat(2, 116px); gap: 3px;
    border-radius: var(--r-8); overflow: hidden; }
  .attgrid--single { grid-template-columns: 1fr; }
  .attimg { width: 116px; height: 96px; border: 0; padding: 0; cursor: zoom-in; display: block; }
  .attgrid--single .attimg { width: 236px; height: 158px; }
  .attimg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .attgrid__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
    pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px;
    padding: 0 8px 5px; font: 450 10px var(--font-family-display); color: #fff; }
  .attgrid__scrim svg *[stroke] { stroke: #fff; }
  .docmsg { display: flex; align-items: center; gap: 10px; min-width: 240px; }
  .docmsg__tile { width: 34px; height: 34px; border-radius: 8px; background: #fceceb;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .docmsg__tile svg { width: 16px; height: 16px; }
  .docmsg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .docmsg__name { font-size: 13px; font-weight: 450; color: var(--color-grey-11);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .docmsg__meta { font-size: 11px; color: var(--color-grey-55); }
  .docmsg__dl { width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--color-grey-55); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--ring); }
  .docmsg__dl:hover { background: var(--color-grey-98-2); color: var(--color-grey-19); }
  .docmsg__dl:focus-visible { outline: 2px solid var(--color-accent); }
  .lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6); cursor: zoom-out; }
  .lightbox.open { display: flex; }
  .lightbox__img { width: min(70vw, 420px); height: min(70vw, 420px); border-radius: 12px;
    background-size: cover; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
  .lightbox__cap { position: absolute; bottom: 24px; color: #fff; font-size: 12px; font-weight: 450; }

  /* ========== 39 · Presence & typing ========== */
  .presence { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 4px;
    border-radius: 12px; background: var(--color-grey-96); font-size: 11px; font-weight: 450; color: var(--color-grey-19); }
  .presence .avatar { box-shadow: 0 0 0 2px var(--color-white-solid); }
  .presence__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
  .typing { display: inline-flex; align-items: center; gap: 3px; }
  .typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-grey-55);
    animation: typing 1.2s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
  .convo-item__preview .typing-label { color: var(--color-accent-dark); font-weight: 450; font-style: italic; }

  /* ========== 40 · Proposal card ========== */
  .proposal { width: 100%; max-width: 380px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
  .proposal__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
  .proposal__title { font-size: 13px; font-weight: 500; color: var(--color-grey-11); flex: 1; }
  .proposal__items { padding: 4px 12px; }
  .propline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px;
    font-size: 12px; color: var(--color-grey-19); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04); }
  .propline:last-child { box-shadow: none; }
  .propline__amt { font-weight: 450; color: var(--color-grey-11); font-variant-numeric: tabular-nums; }
  .propline--total { font-weight: 500; color: var(--color-grey-11); }
  .propline--total .propline__amt { font-size: 13px; }
  .proposal__acts { display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }

  /* ========== 41 · Task kanban ========== */
  .tstage { display: flex; flex-direction: column; gap: 8px; width: 212px; flex-shrink: 0; }
  .tstage__head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 450;
    color: var(--color-grey-19); padding: 0 2px; }
  .tstage__count { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .tcard { cursor: grab; }
  .tcard:active { cursor: grabbing; }
  .tcard.dragging { opacity: 0.5; }
  .tcard__prio { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .tcard__title { flex: 1; font-size: var(--font-size-13); font-weight: 450;
    color: var(--color-grey-11); line-height: 1.35; }
  .tcard__title.done { text-decoration: line-through; color: var(--color-grey-55); }
  .duechip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px;
    border-radius: 6px; background: var(--color-grey-96); font-size: 10px; font-weight: 450;
    color: var(--color-grey-19); font-variant-numeric: tabular-nums; }
  .duechip .icf { width: 9px; height: 9px; }
  .duechip--late { background: #fceceb; color: var(--color-danger); }
  .lead[draggable="true"] { cursor: grab; }
  .lead[draggable="true"]:active { cursor: grabbing; }
  .lead.dragging { opacity: 0.5; }
  .stage--over, .tstage--over { box-shadow: inset 0 0 0 1.5px var(--color-accent);
    background: var(--color-accent-tint); border-radius: 10px; }

  /* ========== 42 · Notification panel ========== */
  .notifwrap { position: relative; }
  .notifbell { position: relative; }
  .notifbell__badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px;
    padding: 0 4px; border-radius: 8px; background: var(--color-danger); color: #fff;
    font-size: 9px; font-weight: 500; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--color-white-solid); font-variant-numeric: tabular-nums; }
  .notifpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 300px;
    background: var(--color-white-solid); border-radius: 12px; box-shadow: var(--shadow-menu);
    display: none; flex-direction: column; overflow: hidden; }
  .notifpanel.open { display: flex; }
  .notifpanel__head { display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
  .notifpanel__title { font-size: 12px; font-weight: 500; color: var(--color-grey-11); }
  .notifpanel__mark { border: 0; background: transparent; cursor: pointer; padding: 3px 5px; border-radius: 5px;
    font: 450 11px/1 var(--font-family-display); color: var(--color-accent-dark); }
  .notifpanel__mark:hover { background: var(--color-grey-96); }
  .notifpanel__mark:focus-visible { outline: 2px solid var(--color-accent); }
  .notifrow { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; cursor: pointer;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04); background: transparent; border: 0; width: 100%; text-align: left; }
  .notifrow:hover { background: var(--color-grey-98-2); }
  .notifrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .notifrow .tile { width: 26px; height: 26px; flex-shrink: 0; }
  .notifrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .notifrow__text { font-size: 12px; color: var(--color-grey-19); line-height: 1.4; }
  .notifrow__text b { font-weight: 500; color: var(--color-grey-11); }
  .notifrow__time { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .notifrow__unread { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
    flex-shrink: 0; margin-top: 5px; }
  .notifrow.read .notifrow__unread { visibility: hidden; }
  .notifrow.read .notifrow__text { color: var(--color-grey-55); }
  .notifrow.read .notifrow__text b { color: var(--color-grey-19); font-weight: 450; }

  /* ========== 43 · Billing ========== */
  .billstats { display: flex; gap: 8px; flex-wrap: wrap; }
  .billstat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; min-width: 120px;
    background: var(--color-white-solid); border-radius: 10px; box-shadow: var(--shadow-card); }
  .billstat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-grey-55); }
  .billstat__val { font-size: 15px; font-weight: 500; color: var(--color-grey-11); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
  .billtable { width: 100%; max-width: 560px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
  .billrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); }
  .billrow:last-child { box-shadow: none; }
  .billrow .tile { width: 26px; height: 26px; flex-shrink: 0; }
  .billrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .billrow__title { font-size: 12px; font-weight: 450; color: var(--color-grey-11); }
  .billrow__meta { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .billrow__amt { font-size: 13px; font-weight: 500; color: var(--color-grey-11); font-variant-numeric: tabular-nums; }


  /* 00 Foundations — genişletme */
  .found__type { display: flex; flex-direction: column; gap: 7px; }
  .found__trow { display: flex; align-items: baseline; gap: 12px; }
  .found__tspec { width: 128px; flex-shrink: 0; font-size: 10px; color: var(--color-grey-55);
    font-variant-numeric: tabular-nums; }
  .found__bars { display: flex; flex-direction: column; gap: 4px; }
  .found__brow { display: flex; align-items: center; gap: 8px; font-size: 10px;
    color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .found__brow span:first-child { width: 66px; }
  .found__brow i { display: block; height: 10px; border-radius: 2px; background: var(--color-accent); }
  .found__radius { display: flex; gap: 12px; flex-wrap: wrap; }
  .found__r { display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 9px; color: var(--color-grey-55); font-variant-numeric: tabular-nums; }
  .found__r i { display: block; width: 42px; height: 42px; background: var(--color-accent-tint);
    box-shadow: inset 0 0 0 1px var(--ring); }
  .found__fx { display: flex; gap: 16px; flex-wrap: wrap; }
  .found__fxcard { width: 118px; min-height: 48px; border-radius: 10px; background: var(--color-white-solid);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: 10px; font-weight: 450; color: var(--color-grey-19); }
  .found__fxuse { font-size: 9px; font-weight: 400; color: var(--color-grey-55); }
  .found__num { font-size: 13px; color: var(--color-grey-11); font-variant-numeric: tabular-nums; }

  /* 00 Foundations — kart düzeni */
  .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 920px;
    grid-template-areas:
      "colors colors"
      "type   spacing"
      "type   radius"
      "ikon   ikon"
      "fx     kod"; }
  .fcard--colors { grid-area: colors; }
  .fcard--type { grid-area: type; }
  .fcard--spacing { grid-area: spacing; }
  .fcard--radius { grid-area: radius; }
  .fcard--fx { grid-area: fx; }
  .fcard--ikon { grid-area: ikon; }
  .fcard--kod { grid-area: kod; }
  @media (max-width: 760px) {
    .fgrid { grid-template-columns: 1fr;
      grid-template-areas: "colors" "type" "spacing" "radius" "ikon" "fx" "kod"; }
  }
  .fcard { background: var(--color-white-solid); border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
  .fcard__title { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-grey-55); }
  .fcard__groups { display: flex; flex-wrap: wrap; gap: 18px 28px; }
  .fgroup { display: flex; flex-direction: column; gap: 6px; }
  .fgroup__label { font-size: 10px; font-weight: 450; color: var(--color-grey-55); }

  /* aksan canlı geçiş bağları */
  .accent-stroke { stroke: var(--color-accent); }
  .bubble__ticks[data-state="read"] path { stroke: var(--color-accent); }
  .found__sw--pick { position: relative; cursor: pointer; }
  .found__sw--pick i { transition: box-shadow 120ms ease; }
  .found__sw--pick:hover i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--color-grey-95); }
  .found__sw--pick input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .found__sw--pick:focus-within i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--color-accent); }

  .fhex { display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 8px;
    border-radius: var(--r-6); background: var(--color-white-solid);
    box-shadow: inset 0 0 0 1px var(--ring); align-self: center;
    font: 450 11px/1 var(--font-family-display); color: var(--color-grey-55);
    font-variant-numeric: tabular-nums; }
  .fhex input { width: 52px; border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--color-grey-11); text-transform: lowercase; }
  .fhex:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }

  /* ---------- 12 Links & Divider ---------- */
  .link { color: var(--color-accent-dark); text-decoration: none; font-weight: 450;
    border-radius: 3px; }
  .link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .link--muted { color: var(--color-grey-55); font-weight: 400; }
  .link--muted:hover { color: var(--color-grey-19); }
  .link .icf { width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
  .divider { border: 0; height: 1px; background: rgba(0, 0, 0, 0.07); margin: 4px 0; width: 100%; }
  .divider--label { display: flex; align-items: center; gap: 10px; height: auto; background: none;
    font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-grey-55); }
  .divider--label::before, .divider--label::after { content: ""; flex: 1; height: 1px;
    background: rgba(0, 0, 0, 0.07); }
  .menu__div { height: 1px; background: rgba(0, 0, 0, 0.07); margin: 4px 6px; }
  /* composer'da "/" paleti: menü ailesiyle aynı yüzey, yukarı açılır, yazdıkça süzülür */
  .spal { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 20;
    padding: 4px; border-radius: 12px; background: var(--color-white-solid);
    box-shadow: var(--shadow-menu), inset 0 0 0 1px rgba(0, 0, 0, 0.10); }
  .spal[hidden] { display: none; }
  .spal__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    text-align: left; font-family: inherit; }
  .spal__item--on, .spal__item:hover { background: var(--color-grey-96); }
  .spal__k { font: 450 12px/1 var(--font-family-display); color: var(--color-grey-11); }
  .spal__k b { color: var(--color-accent-dark); font-weight: 500; }
  .spal__p { font: 400 11px/1.3 var(--font-family-display); color: var(--color-grey-55); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spal__n { font: 500 10px/1 var(--font-family-display); color: var(--color-grey-55);
    padding: 3px 6px; border-radius: 5px; background: var(--color-grey-96); font-variant-numeric: tabular-nums; }
  .spal__hint { padding: 4px 8px 2px; font-size: 10px; color: var(--color-grey-55); }
  /* CSAT anketi (#27): giden balonda 5 yıldız; seçilince kilitlenir, puan sağda */
  .csat { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
  .csat__s { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-grey-85); }
  .csat__s:hover:not(:disabled) { color: #e0a020; background: rgba(255, 255, 255, 0.6); }
  .csat__s:disabled { cursor: default; }
  .csat__s--on { color: #e0a020; }
  .csat__v { margin-left: 4px; font: 500 11px/1 var(--font-family-display); color: var(--color-grey-40); }
  /* @mention (#24): notta etiketlenen ekip üyesi — aksan tonu, hap köşe */
  .mention { display: inline; padding: 0 3px; border-radius: 4px; font-weight: 500;
    color: var(--color-accent-dark); background: rgba(139, 116, 232, 0.12); }
  .menu__lead { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .menu__lead .icf { color: var(--color-grey-40); flex-shrink: 0; }
  .menu__item:hover .menu__lead .icf { color: var(--color-grey-11); }
  .btn--menu { padding-right: 8px; }
  .btn__chev { display: inline-flex; width: 10px; height: 10px; margin-left: 2px; opacity: 0.7;
    transition: transform 160ms var(--ease-in-out-cubic); }
  .btn--menu[aria-expanded="true"] .btn__chev { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) { .btn__chev { transition: none; } }
  /* ---------- 13 İkonlar ---------- */
  .icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px; max-width: 1000px; }
  /* ikon ortada durur, ad yalnızca hover'da belirir — ızgara sakin kalsın */
  .iconcell { position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 8 / 7; padding: 0 8px 14px; border: 0; border-radius: var(--r-12);
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    cursor: pointer; transition: background-color 120ms ease, box-shadow 120ms ease; }
  .iconcell:hover { background: var(--color-grey-98-2); box-shadow: inset 0 0 0 1px var(--ring); }
  .iconcell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  /* ikon uygulamadaki ayak izinde çizilir — boyutu zorlamak konturu bozar (bkz. bölüm notu) */
  .iconcell .icf { width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
  .iconcell__name { position: absolute; left: 6px; right: 6px; bottom: 10px; opacity: 0;
    transition: opacity 120ms ease; font: 450 10px/1.2 var(--font-family-display);
    text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-grey-55); }
  .iconcell:hover .iconcell__name, .iconcell:focus-visible .iconcell__name { opacity: 1; }
  /* ad rengi türü söyler: mor = fn(renk) çağrılmalı, gri = düz string (bilinen tuzak) */
  .iconcell__name--fn { color: var(--color-accent-dark); }

  /* ---------- bento (grup düzeni) ---------- */
  .bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 920px;
    margin: 0 0 40px; align-items: stretch; }
  .bento .sec { margin: 0; padding: 14px 16px; background: var(--color-white-solid);
    border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
  .bento .sec--wide { grid-column: 1 / -1; }
  .bento .sec > h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--color-grey-55); margin: 0 0 12px; }
  @media (max-width: 760px) { .bento { grid-template-columns: 1fr; } }

  /* ---------- solo kart grupları ---------- */
  .bento--solo { grid-template-columns: 1fr; max-width: none; }
  /* ---------- 19 File Upload ---------- */
  .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; min-height: 104px; max-width: 460px; width: 100%; border: 0; border-radius: 10px;
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    cursor: pointer; padding: 18px; font: 400 12px/1.5 var(--font-family-display);
    color: var(--color-grey-55); transition: box-shadow 120ms ease, background 120ms ease; }
  .dropzone:hover { background: var(--color-grey-98-2); }
  .dropzone:focus-visible, .dropzone.drag { box-shadow: inset 0 0 0 1.5px var(--color-accent);
    background: var(--color-accent-tint); color: var(--color-grey-19); }
  .dropzone b { font-weight: 500; color: var(--color-accent-dark); }
  .dropzone__hint { font-size: 11px; }
  .filelist { display: flex; flex-direction: column; gap: 6px; max-width: 460px; width: 100%; }
  .fileline { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); }
  .fileline .icf { flex-shrink: 0; color: var(--color-grey-55); }
  .fileline__name { font-size: 12px; font-weight: 450; color: var(--color-grey-11);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fileline__size { font-size: 11px; color: var(--color-grey-55);
    font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .fileline__bar { flex: 1; height: 3px; min-width: 56px; border-radius: 2px;
    background: var(--color-grey-95); overflow: hidden; }
  .fileline__bar i { display: block; height: 100%; width: 0; border-radius: 2px;
    background: var(--color-accent); transition: width 180ms linear; }
  .fileline--err { box-shadow: inset 0 0 0 1px var(--color-danger); }
  .fileline--err .fileline__size { color: var(--color-danger); }
  .fileline__x { border: 0; background: transparent; cursor: pointer; padding: 3px; border-radius: 5px;
    color: var(--color-grey-55); display: inline-flex; flex-shrink: 0; }
  .fileline__x:hover { background: rgba(0, 0, 0, 0.06); color: var(--color-grey-19); }
  .fileline__x:focus-visible { outline: 2px solid var(--color-accent); }
  /* ---------- stepper ---------- */
  .stepper { display: inline-flex; align-items: center; height: 30px; border-radius: 8px;
    background: var(--color-white-solid); box-shadow: inset 0 0 0 1px var(--ring);
    align-self: flex-start; }
  .stepper:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
  .stepper button { width: 28px; height: 100%; border: 0; background: transparent; cursor: pointer;
    font-size: 15px; line-height: 1; color: var(--color-grey-19); display: inline-flex;
    align-items: center; justify-content: center; }
  .stepper button:first-child { border-radius: 8px 0 0 8px; }
  .stepper button:last-of-type { border-radius: 0 8px 8px 0; }
  .stepper button:hover:not(:disabled) { background: var(--color-grey-98-2); }
  .stepper button:disabled { color: var(--color-grey-71); cursor: default; }
  .stepper input { width: 36px; text-align: center; border: 0; outline: 0; background: transparent;
    font: 450 13px var(--font-family-display); color: var(--color-grey-11);
    font-variant-numeric: tabular-nums; }
  .stepper__suffix { font-size: 11px; color: var(--color-grey-55); margin: 0 2px 0 -4px; }
  /* ---------- mobil tab bar (iOS) ---------- */
  .phoneframe { width: 100%; max-width: 375px; border-radius: 30px; overflow: hidden;
    background: var(--color-grey-97); box-shadow: inset 0 0 0 1px var(--ring); }
  .pf__status { position: relative; height: 38px; display: flex; align-items: center;
    justify-content: space-between; padding: 0 24px;
    font: 500 13px var(--font-family-display); color: var(--color-grey-11);
    font-variant-numeric: tabular-nums; }
  .pf__island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 78px; height: 22px; border-radius: 11px; background: #0a0a0a; }
  .pf__glyphs { display: flex; align-items: center; gap: 5px; color: var(--color-grey-11); }
  .pf__body { position: relative; height: 306px; overflow: hidden; }
  .pf__page { position: absolute; inset: 0; padding: 8px 15px 10px; display: flex;
    flex-direction: column; gap: 8px;
    transition: transform 280ms var(--ease-out-quart), opacity 280ms var(--ease-out-quart); }
  .pf__title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--color-grey-11); margin: 2px 1px 4px; }
  .pf__row { display: flex; align-items: center; gap: 9px; background: var(--color-white-solid);
    border-radius: 10px; padding: 8px 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    flex-shrink: 0; }
  .pf__ava { width: 26px; height: 26px; border-radius: 50%; background: var(--color-grey-95);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font: 600 9px var(--font-family-display); color: var(--color-grey-19); }
  .pf__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .pf__l1 { font-size: 12px; font-weight: 500; color: var(--color-grey-11);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf__l2 { font-size: 10px; color: var(--color-grey-55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf__end { font-size: 10px; color: var(--color-grey-55); font-variant-numeric: tabular-nums;
    flex-shrink: 0; align-self: flex-start; }
  /* liquid glass yüzer tab bar */
  .tabbar { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 58px;
    display: flex; padding: 4px; border-radius: 999px;
    background: rgba(252, 252, 252, 0.7);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.06),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.65); }
  .tabbar__glow { position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc((100% - 8px) / 4); border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
    transition: transform 340ms cubic-bezier(0.3, 1.35, 0.45, 1); }
  .tabbar__item { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent;
    cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent;
    font: 450 10px/1 var(--font-family-display); color: var(--color-grey-55);
    transition: color 200ms ease, transform 120ms var(--ease-out-cubic); }
  .tabbar__item:active { transform: scale(0.93); }
  .tabbar__item .icf { width: 21px; height: 21px; position: relative; }
  .tabbar__item svg *[stroke]:not([stroke="none"]) { stroke: currentColor; }
  .tabbar__item--active { color: var(--color-accent); font-weight: 500; }
  .tabbar__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .tabbar__item .icf.pop { animation: tabpop 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes tabpop { 0% { transform: scale(1); } 35% { transform: scale(0.84); }
    70% { transform: scale(1.13); } 100% { transform: scale(1); } }
  .tabbar__pill { position: absolute; top: -2px; left: calc(50% + 4px); min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--color-danger); color: #fff;
    font: 450 10px/16px var(--font-family-display); text-align: center;
    box-shadow: 0 0 0 2px rgba(252, 252, 252, 0.9); }
  .pf__home { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 104px; height: 4px; border-radius: 999px; background: rgba(10, 10, 10, 0.3); }
  @media (prefers-reduced-motion: reduce) {
    .pf__page, .tabbar__glow { transition: none; }
    .tabbar__item .icf.pop { animation: none; }
  }
  /* ---------- 26 Yapılacaklar (Checklist) ---------- */
  .todo { width: 360px; border-radius: var(--r-12); padding: 12px;
    background: #f2eefd; }
  .todo__head { display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 10px; }
  .todo__title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-grey-11); }
  .todo__count { min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.75); font: 500 12px/1 var(--font-family-display);
    color: var(--color-grey-19); font-variant-numeric: tabular-nums; }
  .todo__card { background: var(--color-white-solid); border-radius: 10px;
    box-shadow: var(--shadow-card); padding: 4px; display: flex; flex-direction: column; }
  .todo__it { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px;
    border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left;
    font: 450 13px/1.3 var(--font-family-display); color: var(--color-grey-55);
    transition: color 120ms ease, background 120ms ease; }
  .todo__it:hover { background: var(--color-grey-98, #fafafa); }
  .todo__it:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .todo__it .icf { width: 16px; height: 16px; flex-shrink: 0; }
  .todo__it--active { color: var(--color-grey-11); font-weight: 500; }
  .todo__it--done { color: var(--color-grey-55); }
  .todo__it--done span { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }

  /* ---------- 27 Kesikli Ekleme (Dashed Add) ---------- */
  .dashed { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
    border: 1px dashed rgba(0, 0, 0, 0.24); border-radius: 6px; background: none; cursor: pointer;
    font: 450 11px/1 var(--font-family-display); color: var(--color-grey-55);
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease; }
  .dashed:hover { color: var(--color-grey-19); border-color: rgba(0, 0, 0, 0.34);
    background: rgba(0, 0, 0, 0.025); }
  .dashed:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .dashed:active { transform: translateY(0.5px) scale(0.98); }
  .dashed .icf { width: 11px; height: 11px; color: inherit; }
  .dashed__edit { display: inline-flex; padding: 1px; margin: 0 -2px 0 0; border-radius: 4px;
    color: inherit; }
  .dashed__edit svg { width: 10px; height: 10px; }
  .dashed__edit:hover { color: var(--color-grey-11); background: rgba(0, 0, 0, 0.07); }