/* named layers: modal interiors utilities'ten sonra - 14.08.2026 23:10 */

@layer theme, base, components, utilities, aero-modal-content;

/* neutral product color and type tokens - 10.09.2026 05:43 */

/* account shell layout and semantic color tokens - 06.09.2026 06:03 */

:root {
  --account-split-sidebar-bg:       var(--eco-header-bg);
  --account-split-main-bg:          var(--canvas);
  --space-sidebar-panel-w:          320px;
  --account-split-sidebar-w:        var(--space-sidebar-panel-w);
  /* account nav row — sp-sidebar__tab olcegi (36px / 1rem / 8px) - 16.07.2026 03:15 */
  --account-sidebar-nav-icon-size:  1rem;
  --account-sidebar-nav-row-h:      2.25rem;
  --account-sidebar-nav-gap:        0.5rem;
  --account-sidebar-nav-px:         0.5rem;
  /* dinamik icerik inset — top/left/bottom/right ayni - 16.07.2026 03:25 */
  --account-split-inner-pad:        1.5rem;
  --account-split-inner-pad-x:      var(--account-split-inner-pad);
  --account-split-main-content-max-w: 64.25rem;
  --sidebar-hover-bg:  var(--surface-hover);
  --sidebar-active-bg: var(--accent-soft);
  --sidebar-active-fg: var(--accent);
  --sidebar-item-r: 9px;
  --sidebar-r: 14px;
  /* urun karti / ayarlar paneli — spaces-home card ile ayni - 07.08.2026 05:50 */
  --radius-card: 1.25rem;
  /* form / input / orta kontrol — cengel-btn ile ayni - 07.08.2026 05:50 */
  --radius-control: var(--sidebar-r);
  /* ayarlar section padding — sp-settings-panel ile ayni - 07.08.2026 05:55 */
  --section-pad-x: 1.625rem;
  --section-pad-y-head: 1.375rem;
  --section-pad-y: 1.625rem;
  --section-pad-y-row: 1rem;
  --section-stack-gap: 1.5rem;
  --eco-header-h:             64px;
  --eco-header-control:       36px;
  --eco-header-pad:           calc((var(--eco-header-h) - var(--eco-header-control)) / 2);
  --account-static-sidebar-w: 64px;
  --sidebar-m:                var(--eco-header-pad);
  --sidebar-gap:              var(--eco-header-pad);
  --sidebar-gap-tight:        calc(var(--eco-header-pad) / 4);
  --account-sidebar-inner-x:  var(--eco-header-pad);
  /* eco header logosu ile nav ikon sol hizasi: inset + nav-px = eco-header-pad - 16.07.2026 04:15 */
  --split-sidebar-inset-x:      calc(var(--eco-header-pad) - var(--account-sidebar-nav-px));
  --split-sidebar-inset-y:      0.6875rem;
  --split-sidebar-inset-bottom: 0.375rem;
  --rail-btn-size:            calc(var(--account-static-sidebar-w) - (var(--eco-header-pad) * 2));
  --rail-btn-radius:          var(--sidebar-item-r);
  /* hover squircle — idle daire ile active arasinda - 07.08.2026 05:50 */
  --rail-btn-radius-hover:    16px;
  /* aktif rail item kosesi — pasiften biraz daha yumuşak - 16.07.2026 06:34 */
  --rail-btn-radius-active:   12px;
  --rail-btn-icon-size:       1.0625rem;
  --rail-hover-bg:            var(--surface-hover);
  --rail-active-bg:           var(--accent-soft);
  --rail-active-fg:           var(--accent);
  --eco-header-bg:            var(--surface-raised);
  --eco-header-border:        var(--border);
  /* rail varsayilan header ile ayni; aydinlik flat asagida ayri katman - 01.11.2026 19:05 */
  --shell-rail-bg:            var(--eco-header-bg);
  --eco-icon-color:           color-mix(in srgb, var(--foreground) 58%, transparent);
  --eco-icon-hover:           var(--foreground);
  --eco-text-color:           color-mix(in srgb, var(--foreground) 88%, transparent);
  --eco-btn-hover-bg:         var(--surface-hover);
  --eco-btn-active-bg:        var(--surface-active);
  --eco-products-bg:          var(--surface-subtle);
  --eco-products-border:      var(--border);
  --eco-products-hover-bg:    var(--surface-hover);
  --eco-products-hover-border:var(--border-strong);
  --eco-products-open-bg:     var(--surface-active);
  --eco-products-open-border: var(--border-strong);
  --eco-user-bg:              var(--surface-subtle);
  --eco-user-border:          var(--border);
  --eco-user-hover-bg:        var(--surface-hover);
  --eco-user-hover-border:    var(--border-strong);
  --eco-user-open-bg:         var(--surface-active);
  --eco-user-open-border:     var(--border-strong);
  --eco-avatar-outline:       var(--border-strong);
  --eco-search-bg:            var(--surface-subtle);
  --eco-search-border:        var(--border);
  --eco-search-focus-bg:      var(--surface-raised);
  --eco-search-focus-border:  color-mix(in srgb, var(--accent) 46%, var(--border));
  --eco-search-icon:          color-mix(in srgb, var(--foreground) 40%, transparent);
  --eco-search-icon-focus:    var(--accent);
  --eco-search-text:          var(--foreground);
  --eco-search-placeholder:   color-mix(in srgb, var(--foreground) 42%, transparent);
  --eco-kbd-color:            var(--ink-muted);
  --eco-kbd-bg:               var(--surface-muted);
  --eco-kbd-border:           var(--border);
  --eco-logo-sep:             var(--border);
  /* responsive shell — lg = 1024, compact settings = 760 - 09.08.2026 08:10 */
  --shell-breakpoint-lg:      1024px;
  --shell-settings-compact:   760px;
  --touch-target-min:         44px;
  --mobile-page-pad-x:        1rem;
  --mobile-page-pad-y:        1rem;
  --safe-area-top:            env(safe-area-inset-top, 0px);
  --safe-area-right:          env(safe-area-inset-right, 0px);
  --safe-area-bottom:         env(safe-area-inset-bottom, 0px);
  --safe-area-left:           env(safe-area-inset-left, 0px);
  --mobile-bottom-nav-h:      3.5rem;
}

@media (max-width: 1023.98px) {
  :root {
    --account-split-inner-pad: 1rem;
    --account-split-inner-pad-x: 1rem;
    --section-pad-x: 1.125rem;
    --section-pad-y: 1.25rem;
    --section-pad-y-head: 1.125rem;
    --ch-chat-side-pad: 12px;
  }
}

/* aydinlik flat kabuk: rail + header beyaz l-cerceve, panel zeminle tek gri alan, kart beyaz - 01.11.2026 20:15 */

html.account-shell-root:not(.dark):not(.aero-ui) {
  --canvas: #f7f7f8;
  --account-split-sidebar-bg: var(--canvas);
  --eco-header-bg: #ffffff;
  --eco-header-border: #e4e4e7;
  --sidebar-hover-bg: #ededf0;
  --eco-search-bg: #f4f4f5;
  --eco-products-bg: #f4f4f5;
}

/* account shell root layout, preload, spa transitions - 24.06.2026 12:00 */

html.account-shell-root {
  height: 100%;
  height: 100dvh;
}

html.account-shell-root body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.account-shell-root body > main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
}

html.account-shell-root .account-split__scroll {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

#account-main-content.account-main--hide-subtitles [data-account-subtitle] {
  display: none !important;
}

.account-preload .eco-header,
.account-preload #account-static-sidebar,
.account-preload .account-split-outer,
.account-preload #mobileOverlay {
  visibility: hidden;
}

.account-preload .account-desktop-sidebar {
  transition: none !important;
}

#account-main-content,
#super-main-content {
  transition: opacity 150ms ease;
}

#account-main-content.account-content-leaving,
#super-main-content.account-content-leaving {
  opacity: 0;
}

#account-nav-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 20;
  pointer-events: none;
}

#account-nav-loader.account-nav-loader--active {
  opacity: 1;
}

#account-nav-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--foreground);
  opacity: 0.35;
  transition: width 280ms ease-out;
}

/* tema degisimi sirasinda transition kapali - 26.06.2026 */

/* scrollbar + genel overscroll — platform geneli - 01.08.2026 22:00 */

/* cengel logo — light/dark asset pair, invert yok, kutu yok - 15.08.2026 18:55 */

.eco-header-logo-mark__img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.eco-header-logo-wordmark {
  height: 28px;
  width: auto;
  max-height: 28px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

/* phosphor icon fixes — bold + fill weights only - 30.07.2026 08:30 */

/* pass nav rail — pasif full round, hover hafif koseli, aktif 12px - 06.09.2026 06:03 */

/* pass rail spaces group + avatar — split from account-shell-rail - 06.09.2026 06:03 */

/* rail unread dm — soft enter/leave + group collapse - 06.09.2026 06:03 */

.cengel-rail-spaces-group:has([data-rail-messages-expanded="true"]):has([data-rail-dm-id]) > .cengel-rail-item > [data-rail-badge="messages"],
.cengel-rail-spaces-group:has([data-rail-messages-expanded="true"]):has([data-rail-dm-id]) > .cengel-rail-item > [data-rail-unread="messages"] {
  display: none !important;
}

.cengel-rail-item--dm .cengel-rail-space-avatar__img {
  border-radius: inherit;
}

/* space expand :has(data-rail-space-id) — dm icin paralel - 02.08.2026 00:05 */

.cengel-rail-spaces-group:has([data-rail-messages-expanded="true"]):has([data-rail-dm-id]) {
  --cengel-rail-badge-gutter: 6px;
  --cengel-rail-spaces-gap: var(--cengel-rail-badge-gutter);
  gap: var(--cengel-rail-spaces-gap);
  width: calc(var(--rail-btn-size) + (var(--cengel-rail-badge-gutter) * 2));
  padding: var(--cengel-rail-spaces-gap) 0;
  box-sizing: border-box;
  border-radius: var(--rail-btn-radius-active);
  background: var(--surface-hover);
}

/* grid 0fr → 1fr; yoksa avatar clip overflow:hidden icinde kalir - 02.08.2026 00:05 */

#account-nav-rail-messages[data-rail-messages-expanded="true"]:has([data-rail-dm-id]) {
  grid-template-rows: 1fr;
}

#account-nav-rail-messages[data-rail-messages-expanded="true"]:has([data-rail-dm-id]) .cengel-rail-spaces__inner {
  padding-bottom: 4px;
}

/* messages grubu padding/genislik de yumusasin - 29.07.2026 02:24 */

[data-rail-messages-group].cengel-rail-spaces-group {
  transition:
        background-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 280ms cubic-bezier(0.4, 0, 0.2, 1),
        padding 280ms cubic-bezier(0.4, 0, 0.2, 1),
        width 280ms cubic-bezier(0.4, 0, 0.2, 1),
        gap 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#account-nav-rail-messages[data-rail-messages-expanded="false"] .cengel-rail-spaces__inner {
  pointer-events: none;
}

#account-nav-rail-messages[data-rail-messages-expanded="false"] .cengel-rail-item__badge {
  display: none !important;
}

.cengel-rail-item--dm {
  max-height: calc(var(--rail-btn-size, 40px) + 8px);
  opacity: 1;
  transform: scale(1);
  transform-origin: center top;
  overflow: hidden;
  transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
        margin 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cengel-rail-item--dm.cengel-rail-item--entering {
  opacity: 0;
  transform: scale(0.85);
}

.cengel-rail-item--dm.cengel-rail-item--leaving {
  opacity: 0;
  transform: scale(0.85);
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-rail-messages-group].cengel-rail-spaces-group,
    .cengel-rail-item--dm {
    transition: none;
  }

  .cengel-rail-item--dm.cengel-rail-item--entering,
    .cengel-rail-item--dm.cengel-rail-item--leaving {
    transform: none;
  }
}

/* rail space surukle birak — ghost + placeholder - 20.07.2026 19:51 */

/* mobile drawer + adaptive header chrome - 15.08.2026 18:58 */

/* ayarlar section padding — space settings panel ile ayni olcek - 07.08.2026 05:55 */

/* eco header widget dropdown — iframe ustte kalsin - 14.08.2026 22:15 */

.eco-header-dropdown {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 1rem;
  opacity: 0;
  transform: scale(0.96) translateY(0.35rem);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* prefetch sonrasi yukseklik olcumu — gorunmeden layout al - 07.08.2026 05:16 */

.eco-header-dropdown--measuring {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  will-change: auto;
}

.eco-header-dropdown--from-tr {
  transform-origin: top right;
}

.eco-header-dropdown--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.eco-header-dropdown > iframe {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .eco-header-dropdown {
    transition: none;
    transform: none;
    will-change: auto;
  }

  .eco-header-dropdown--open {
    transform: none;
  }
}

/* eco header search — sayfa genisligine gore akiskan - 16.07.2026 05:55 */

.eco-header-search {
  --eco-search-side-reserve: 18rem;
  --eco-search-max: 36.25rem;
  /* once control-4px (32); +6px → 38 - 16.07.2026 05:55 */
  height: calc(var(--eco-header-control) + 2px);
  width: min(
    var(--eco-search-max),
    max(14rem, calc(100% - var(--eco-search-side-reserve)))
  );
  max-width: 100%;
  transition:
    width 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms ease,
    border-color 150ms ease;
}

/* genis ekran: search biraz daha buyusun - 16.07.2026 05:55 */

@media (min-width: 1440px) {
  .eco-header-search {
    --eco-search-max: 40rem;
    --eco-search-side-reserve: 20rem;
  }
}

@media (min-width: 1680px) {
  .eco-header-search {
    --eco-search-max: 44rem;
    --eco-search-side-reserve: 22rem;
  }
}

/* orta: logo+actions icin daha fazla yer birak - 16.07.2026 05:55 */

@media (max-width: 1280px) {
  .eco-header-search {
    --eco-search-max: 28rem;
    --eco-search-side-reserve: 17rem;
  }
}

@media (max-width: 1100px) {
  .eco-header-search {
    --eco-search-max: 22rem;
    --eco-search-side-reserve: 16rem;
  }

  .eco-header-search__shortcut {
    display: none;
  }
}

.eco-header-search__shortcut {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 150ms ease;
}

.eco-header-search:focus-within .eco-header-search__shortcut {
  opacity: 0;
}

/* kisayol kbd — daha okunur chip - 16.07.2026 05:55 */

.eco-header-search__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--eco-kbd-color);
  background: var(--eco-kbd-bg);
  border: 1px solid var(--eco-kbd-border);
  border-radius: 0.3125rem;
}

@media (prefers-reduced-motion: reduce) {
  .eco-header-search {
    transition: background-color 150ms ease, border-color 150ms ease;
  }

  .eco-header-search__shortcut {
    transition: none;
  }
}

/* eco header action buttons + unread dots - 16.07.2026 06:10 */

.eco-header-action {
  position: relative;
  flex-shrink: 0;
  isolation: isolate;
}

.eco-header-action__btn {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--eco-header-control) + 2px);
  height: calc(var(--eco-header-control) + 2px);
  border: 0;
  border-radius: var(--sidebar-item-r);
  background: transparent;
  color: var(--eco-icon-color);
  cursor: pointer;
  text-decoration: none;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.eco-header-action__btn:hover {
  color: var(--eco-icon-hover);
  background: var(--eco-btn-hover-bg);
}

.eco-header-action__btn:active {
  background: var(--eco-btn-active-bg);
}

.eco-header-action__icon {
  position: relative;
  z-index: 0;
  font-size: 1.1875rem;
  line-height: 1;
  display: block;
}

/* unread dot — simgenin uzerinde kalsin (hover dahil) - 16.07.2026 06:10 */

.eco-header-action__badge {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  z-index: 2;
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid var(--eco-header-bg);
  background: #ef4444;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.eco-header-action__badge[data-active="true"] {
  display: block;
}

/* eco header user — sadece avatar - 16.07.2026 06:23 */

.eco-header-user {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.eco-header-user__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--eco-header-control) + 2px);
  height: calc(var(--eco-header-control) + 2px);
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--sidebar-item-r);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color 120ms ease;
}

.eco-header-user__btn:hover {
  background: var(--eco-btn-hover-bg);
}

.eco-header-user__btn:active,
.eco-header-user__btn[aria-expanded="true"] {
  background: var(--eco-btn-active-bg);
}

.eco-header-user__avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  flex-shrink: 0;
  transition: opacity 120ms ease;
}

.eco-header-user__btn:hover .eco-header-user__avatar,
.eco-header-user__btn[aria-expanded="true"] .eco-header-user__avatar {
  opacity: 0.92;
}

.eco-header-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.eco-header-end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  z-index: 1;
}

/* eco header notification inbox shell - 16.07.2026 15:20 */

.eco-notif-menu {
  display: flex;
  flex-direction: column;
  max-height: min(28rem, calc(100vh - var(--eco-header-h) - 1.5rem));
  overflow: visible;
  color: var(--foreground);
}

.eco-notif-menu[hidden] {
  display: none;
}

.eco-notif-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.eco-notif-menu__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}

.eco-notif-menu__more {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.eco-notif-menu__more[data-overflow-open="1"] {
  z-index: var(--z-cengel-context, 10080);
}

.eco-notif-menu__more .cengel-menu.cengel-menu--anchored,
.eco-notif-menu__more [data-overflow-dropdown-panel],
.eco-notif-more-panel {
  z-index: var(--z-cengel-context, 10080);
  width: -moz-max-content;
  width: max-content;
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 1.5rem));
}

.eco-notif-menu__more .board-context-menu__item {
  white-space: nowrap;
}

.eco-notif-menu__more .board-context-menu__item:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* kompakt ghost trigger — account_overflow override - 16.07.2026 15:20 */

.eco-notif-menu__more [data-overflow-dropdown-trigger],
.eco-notif-menu__more-trigger {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.eco-notif-menu__more [data-overflow-dropdown-trigger]:hover,
.eco-notif-menu__more [data-overflow-dropdown-trigger][aria-expanded="true"],
.eco-notif-menu__more-trigger:hover,
.eco-notif-menu__more-trigger[aria-expanded="true"] {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.eco-notif-menu__more [data-overflow-dropdown-trigger] i,
.eco-notif-menu__more-trigger i {
  font-size: 1.125rem;
  line-height: 1;
}

.eco-notif-menu__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.eco-notif-menu__status {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.eco-notif-menu__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 7.5rem;
}

.eco-notif-menu__loading--more {
  padding: 0.75rem 1rem;
  min-height: 0;
}

.eco-notif-menu__scroll-foot {
  display: block;
  min-height: 1px;
}

.eco-notif-menu__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid #e5e5e5;
  border-top-color: #171717;
  animation: eco-notif-spin 0.75s linear infinite;
}

.eco-notif-menu__spinner--sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

html.dark .eco-notif-menu__spinner {
  border-color: #26262c;
  border-top-color: #e4e4e7;
}

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

@media (prefers-reduced-motion: reduce) {
  .eco-notif-menu__spinner {
    animation: none;
    border-top-color: #171717;
    opacity: 0.7;
  }

  html.dark .eco-notif-menu__spinner {
    border-top-color: #e4e4e7;
  }
}

.eco-notif-menu__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

.eco-notif-menu__empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.eco-notif-menu__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 15rem;
}

.eco-notif-menu__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
}

.eco-notif-menu__empty-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-menu__more [data-overflow-dropdown-trigger],
  .eco-notif-menu__more-trigger {
    transition: none;
  }
}

/* eco header notification list items - 21.07.2026 16:57 */

.eco-notif-item {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  transition: background-color 120ms ease;
}

.eco-notif-item:last-child {
  border-bottom: 0;
}

.eco-notif-item:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.eco-notif-item--unread {
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.eco-notif-item--unread:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.eco-notif-item__media {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.eco-notif-item__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.eco-notif-item__avatar-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  line-height: 0;
}

.eco-notif-item__avatar-btn:hover {
  opacity: 0.88;
}

.eco-notif-item__avatar--provider {
  border-radius: var(--sidebar-item-r);
}

.eco-notif-item__avatar--space {
  border-radius: 30%;
  corner-shape: squircle;
}

.eco-notif-item__provider-badge-wrap {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  width: 1.0625rem;
  height: 1.0625rem;
  display: block;
  line-height: 0;
  cursor: default;
}

.eco-notif-item__provider-badge {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 0.3125rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--background);
  border: 1.5px solid var(--background);
  box-sizing: border-box;
  pointer-events: none;
}

.eco-notif-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.eco-notif-item__title {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--foreground);
}

.eco-notif-item__body-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-item__actor-name,
button.eco-notif-item__space-name {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.eco-notif-item__actor-name:hover,
button.eco-notif-item__space-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.eco-notif-item__space-name {
  font-weight: 600;
}

.eco-notif-item__provider-badge--space {
  border-radius: 30%;
  corner-shape: squircle;
}

.eco-notif-item__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.0625rem;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.eco-notif-item__provider {
  font-weight: 600;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-item__unread-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--foreground);
  flex-shrink: 0;
}

.eco-notif-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.eco-notif-item__action {
  margin: 0;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 0.5rem;
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.eco-notif-item__action:hover {
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
}

.eco-notif-item__action--primary {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.eco-notif-item__action--primary:hover {
  background: color-mix(in srgb, var(--foreground) 88%, transparent);
  border-color: transparent;
}

.eco-notif-item__action:disabled {
  opacity: 0.5;
  cursor: default;
}

.eco-notif-item__action:disabled:hover {
  background: var(--background);
}

.eco-notif-item__action--primary:disabled:hover {
  background: var(--foreground);
  border-color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-item,
  .eco-notif-item__action {
    transition: none;
  }
}

/* eco header notification embed card - 21.07.2026 16:57 */

.eco-notif-embed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  transition: background-color 120ms ease, border-color 120ms ease;
}

a.eco-notif-embed {
  cursor: pointer;
}

a.eco-notif-embed:hover {
  background: color-mix(in srgb, var(--foreground) 4.5%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 16%, var(--border));
}

.eco-notif-embed__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 7.5rem;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  overflow: hidden;
}

.eco-notif-embed__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.eco-notif-embed__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5625rem 0.625rem 0.625rem;
  min-width: 0;
}

.eco-notif-embed__site {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.eco-notif-embed__favicon {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.eco-notif-embed__type {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

.eco-notif-embed__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-embed__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-embed--message .eco-notif-embed__preview {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.eco-notif-embed--message .eco-notif-embed__channel {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.eco-notif-embed--message .eco-notif-embed__site {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.eco-notif-embed--message .eco-notif-embed__media {
  max-height: 6.5rem;
  aspect-ratio: 16 / 10;
}

.eco-notif-embed__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 0.75rem;
  margin: 0.25rem 0 0;
}

.eco-notif-embed__field {
  min-width: 0;
}

.eco-notif-embed__field dt {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.eco-notif-embed__field dd {
  margin: 0.0625rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-embed__author {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.eco-notif-embed__author-avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.eco-notif-embed__attachments {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

/* report moderator reply block - 21.07.2026 16:57 */

.eco-notif-item__reply {
  margin-top: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.eco-notif-item__reply-label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.eco-notif-item__reply-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-embed {
    transition: none;
  }
}

/* eco header mention mesaj preview — kompakt ann-card - 16.07.2026 19:10 */

.eco-notif-msg-preview {
  display: block;
  margin-top: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.eco-notif-msg-frame {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
  overflow: hidden;
  min-width: 0;
}

.eco-notif-msg-origin {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  margin: 0;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
  overflow: hidden;
}

.eco-notif-msg-origin .bm-card__origin-logo {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.eco-notif-msg-origin .bm-card__origin-icon {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  flex-shrink: 0;
}

.eco-notif-msg-origin .bm-card__origin-space,
.eco-notif-msg-origin .bm-card__origin-channel {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-msg-origin .bm-card__origin-space {
  max-width: 8rem;
}

.eco-notif-msg-origin .bm-card__origin-channel {
  flex-shrink: 1;
  min-width: 0;
}

.eco-notif-msg-origin a.bm-card__origin-space:hover,
.eco-notif-msg-origin a.bm-card__origin-channel:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.eco-notif-msg-origin .bm-card__origin-sep {
  font-size: 0.625rem;
  color: color-mix(in srgb, var(--foreground) 35%, transparent);
  flex-shrink: 0;
}

.eco-notif-msg-frame .bm-card__msg-list.ann-feed__list {
  display: block;
  margin: 0;
  padding: 0.5rem 0.625rem 0.5625rem;
  min-width: 0;
}

.eco-notif-msg-frame .ann-card {
  --ann-avatar-size: 1.75rem;
  --ann-avatar-gap: 0.5rem;
  --ann-msg-size: 0.8125rem;
  --ann-msg-line: 1.4;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  gap: var(--ann-avatar-gap);
}

.eco-notif-msg-frame .ann-card:hover {
  background: transparent;
}

.eco-notif-msg-frame .ann-card__avatar {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
}

.eco-notif-msg-frame .ann-card__header-row {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
  margin-bottom: 0.125rem;
}

.eco-notif-msg-frame .ann-card__name {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-msg-frame .ann-card__time,
.eco-notif-msg-frame .ann-card__edited,
.eco-notif-msg-frame .cengel-bot-tag {
  flex-shrink: 0;
  font-size: 0.625rem;
  white-space: nowrap;
}

.eco-notif-msg-frame .ann-card__content {
  font-size: var(--ann-msg-size);
  line-height: var(--ann-msg-line);
  word-break: break-word;
}

.eco-notif-msg-frame .ann-card__content:not(:has(.ann-card__media)) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.eco-notif-msg-frame .ann-card__media {
  margin-top: 0.375rem;
  max-height: 5.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

.eco-notif-msg-frame .ann-card__media-item {
  max-height: 5.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.eco-notif-msg-frame .ann-card__reacts-row,
.eco-notif-msg-frame .ann-card__hover-bar,
.eco-notif-msg-frame .ann-link-preview {
  display: none;
}

.eco-notif-msg-frame .bm-card__msg-missing {
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

/* account main channel layout — extracted from legacy cpds - 24.06.2026 17:00 */

/* channel reply split + compose mobile - 09.08.2026 08:25 */

/* kanal sohbet — feed/compose boslugu yan pad (20px) ritmine yakin - 21.07.2026 16:30 */

/* kilitli / yetki yok compose satiri - 21.07.2026 16:42 */

/* kanal compose — dar alanda placeholder ellipsis, mention gizleme, scrollbar gizle - 16.07.2026 02:27 */

/* kanal compose — markdown onizleme (code/del/markers) - 16.07.2026 04:45 */

/* kanal compose — medya ek onizleme seridi - 16.07.2026 02:47 */

/* kanal compose medya — spinner / rozet / sil - 25.07.2026 00:56 */

/* kanal compose — drop buyur, feed layout kaymaz (yukari hayalet) - 25.07.2026 00:51 */

/* kanal compose — recorder ve ses onizleme satiri - 05.08.2026 02:12 */

/* kayit canli dalga + sure kapsulu - 05.08.2026 05:28 */

/* cengel-media-lightbox.css'e tasindi — bu dosya yalnizca geriye uyumluluk icin - 14.07.2026 10:25 */

/* cengel-media-lightbox — tam ekran gorsel/video; nav + zoom - 14.07.2026 10:25 */

/* focus, toast, mobile menu, session row, animations — extracted from legacy cpds - 24.06.2026 17:00 */

/* pass alert stack — banner + toast ortak sag ust kolon - 25.07.2026 05:05 */

/* pass banner — macos tarzi uygulama ici bildirim - 25.07.2026 05:05 */

/* pass toast — sag ust bildirim (normal / warn / error) - 25.07.2026 02:40 */

/* full-page account initial loader — logo only, kutu yok - 15.08.2026 18:50 */

.initial-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0ms linear 220ms;
}

html.dark .initial-loader {
  background: #0f0f13;
}

.initial-loader.initial-loader--leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.initial-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.initial-loader__brand {
  display: flex;
  align-items: center;
}

.initial-loader__logo-mark {
  width: 52px;
  height: 52px;
  animation: initial-loader-brand-in 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes initial-loader-brand-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .initial-loader {
    transition: none;
  }

  .initial-loader__logo-mark {
    animation: none;
  }
}

/* shared responsive foundation — overflow + media + touch - 09.08.2026 08:15 */

/* auth sayfa zemini, kart, footer, koyu tema bilesenleri - 10.09.2026 05:43 */

.auth-purple-theme {
  --brand-50: #faf8fb;
  --brand-100: #f3eef5;
  --brand-200: #e8d9eb;
  --brand-300: #d4b8d8;
  --brand-400: #b88bc0;
  --brand-500: #4c1753;
  --brand-600: #3d1250;
  --brand-700: #2e0d3d;
  --brand-800: #1f0829;
  --brand-900: #0f0415;
  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-contrast: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 58%, transparent);
}

.auth-page-no-select .auth-btn-primary {
  background-color: var(--brand-500, #52525b);
}

.auth-surface-card img[src*="logo-on-"],
.auth-surface-card img[src^="/applications/"][src$="/logo"],
.auth-surface-card img[src*="media.cengel.net/applications/"] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
}

.auth-page-shell {
  background-image: url('/static/vectors/abstract-background.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-footer-bar {
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.dark .auth-page-no-select .auth-surface-card {
  background-color: #0f0f13 !important;
  border: 1px solid #3f3f46;
}

html.dark .auth-page-no-select .auth-btn-primary {
  background-color: #e4e4e7 !important;
  background-image: none !important;
  color: #18181b !important;
  border-color: transparent !important;
}

html.dark .auth-page-no-select .auth-btn-primary:hover:not(:disabled) {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
}

html.dark .auth-page-no-select .auth-btn-primary:active:not(:disabled) {
  background-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.dark .auth-page-no-select .auth-btn-primary:focus-visible {
  --tw-ring-offset-color: #18181b !important;
  --tw-ring-color: rgba(244, 244, 245, 0.45) !important;
}

html.dark .auth-page-no-select .auth-btn-primary:disabled {
  opacity: 0.5 !important;
}

html.dark .auth-page-no-select .auth-btn-secondary {
  background-color: #27272a !important;
  border-color: #71717a !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-btn-secondary:hover:not(:disabled) {
  background-color: #3f3f46 !important;
  border-color: #a1a1aa !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select #passkeyLoginBtn.auth-btn-secondary {
  background-color: #27272a !important;
  border-color: #52525b !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select #passkeyLoginBtn.auth-btn-secondary:hover:not(:disabled) {
  background-color: #3f3f46 !important;
  border-color: #71717a !important;
  color: #ffffff !important;
}

html.dark .auth-footer-bar {
  background: rgba(9, 9, 11, 0.88) !important;
  border-top-color: rgba(63, 63, 70, 0.9) !important;
}

html.dark .auth-footer-bar a,
html.dark .auth-footer-bar span {
  color: rgba(212, 212, 216, 0.92) !important;
}

html.dark .auth-page-no-select img[src*="logo-on-light.png"]:not(.cengel-logo-on-light) {
  filter: invert(1);
}

html.auth-bg-image-off .auth-page-no-select {
  background-image: none !important;
  background-attachment: scroll !important;
}

html:not(.dark).auth-bg-image-off .auth-page-no-select {
  background-color: #e8eaef !important;
}

html:not(.dark).auth-bg-image-off .auth-page-no-select .auth-surface-card {
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
}

html.dark.auth-bg-image-off .auth-page-no-select {
  background-color: #0f0f13 !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar a,
html:not(.dark).auth-bg-image-off .auth-footer-bar span {
  color: rgba(51, 65, 85, 0.92) !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar a:hover {
  color: rgba(15, 23, 42, 0.95) !important;
}

html.dark.auth-bg-image-off .auth-footer-bar {
  background: #0f0f13 !important;
  border-top-color: rgba(63, 63, 70, 0.85) !important;
}

html.dark.auth-bg-image-off .auth-footer-bar a,
html.dark.auth-bg-image-off .auth-footer-bar span {
  color: rgba(228, 228, 231, 0.95) !important;
}

/* custom-checkbox — native input gizlenir, ozel kutu gosterilir - 23.07.2026 01:35 */

/* custom-select — native select yok, ozel listbox dropdown - 23.07.2026 01:35 */

/* auth form field pseudo-states — auth-field hook gerekli - 24.06.2026 15:00 */

.auth-page-no-select input.auth-field:not([class*="h-"]):not([class*="min-h-"]),
.auth-page-no-select select.auth-field {
  min-height: 44px;
  box-sizing: border-box;
}

.auth-page-no-select input.auth-field,
.auth-page-no-select textarea.auth-field,
.auth-page-no-select select.auth-field {
  outline: 1px solid transparent;
  outline-offset: 0;
  transition:
        border-color 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        outline-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) .auth-page-no-select .auth-field:-moz-placeholder-shown:hover:not(:focus), html:not(.dark) .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:hover:not(:focus) {
  border-color: #e5e5e5;
  background-color: #fafafa;
}

html:not(.dark) .auth-page-no-select .auth-field:placeholder-shown:hover:not(:focus),
html:not(.dark) .auth-page-no-select textarea.auth-field:placeholder-shown:hover:not(:focus) {
  border-color: #e5e5e5;
  background-color: #fafafa;
}

html:not(.dark) .auth-page-no-select .auth-field:focus,
html:not(.dark) .auth-page-no-select select.auth-field:focus,
html:not(.dark) .auth-page-no-select textarea.auth-field:focus {
  border-color: #a3a3a3;
  background-color: #f5f5f5;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: none;
}

html:not(.dark) .auth-page-no-select .auth-field:focus-visible,
html:not(.dark) .auth-page-no-select select.auth-field:focus-visible,
html:not(.dark) .auth-page-no-select textarea.auth-field:focus-visible {
  outline-color: rgba(64, 64, 64, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .auth-page-no-select input.auth-field,
    .auth-page-no-select textarea.auth-field,
    .auth-page-no-select select.auth-field {
    transition: none;
  }
}

html.dark .auth-page-no-select {
  color-scheme: dark;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:not(:focus):not(:hover), html.dark .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:not(:focus):not(:hover) {
  background-color: #111116 !important;
  border-color: #3f3f46 !important;
  color: #71717a !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus):not(:hover),
html.dark .auth-page-no-select textarea.auth-field:placeholder-shown:not(:focus):not(:hover),
html.dark .auth-page-no-select select.auth-field:invalid:not(:focus):not(:hover) {
  background-color: #111116 !important;
  border-color: #3f3f46 !important;
  color: #71717a !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus)::-moz-placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:not(:focus)::placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus)::placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:hover:not(:focus), html.dark .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:hover:not(:focus) {
  background-color: #1c1c24 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:hover:not(:focus),
html.dark .auth-page-no-select textarea.auth-field:placeholder-shown:hover:not(:focus),
html.dark .auth-page-no-select select.auth-field:invalid:hover:not(:focus) {
  background-color: #1c1c24 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:not(:-moz-placeholder-shown):not(:focus):not(:hover), html.dark .auth-page-no-select textarea.auth-field:not(:-moz-placeholder-shown):not(:focus):not(:hover) {
  background-color: #1e1e26 !important;
  border-color: #5c5c68 !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-field:not(:placeholder-shown):not(:focus):not(:hover),
html.dark .auth-page-no-select textarea.auth-field:not(:placeholder-shown):not(:focus):not(:hover),
html.dark .auth-page-no-select select.auth-field:valid:not(:focus):not(:hover) {
  background-color: #1e1e26 !important;
  border-color: #5c5c68 !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-field:not(:-moz-placeholder-shown):hover:not(:focus), html.dark .auth-page-no-select textarea.auth-field:not(:-moz-placeholder-shown):hover:not(:focus) {
  background-color: #2a2a34 !important;
  border-color: #6b6b78 !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-field:not(:placeholder-shown):hover:not(:focus),
html.dark .auth-page-no-select textarea.auth-field:not(:placeholder-shown):hover:not(:focus),
html.dark .auth-page-no-select select.auth-field:valid:hover:not(:focus) {
  background-color: #2a2a34 !important;
  border-color: #6b6b78 !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-field:focus,
html.dark .auth-page-no-select select.auth-field:focus,
html.dark .auth-page-no-select textarea.auth-field:focus {
  background-color: #25252c !important;
  border-color: #73737c !important;
  color: #fafafa !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

html.dark .auth-page-no-select .auth-field:focus-visible,
html.dark .auth-page-no-select select.auth-field:focus-visible,
html.dark .auth-page-no-select textarea.auth-field:focus-visible {
  outline-color: rgba(212, 212, 216, 0.55) !important;
}

html.dark .auth-page-no-select .auth-field:focus::-moz-placeholder {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:focus::placeholder {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select input.auth-field,
html.dark .auth-page-no-select textarea.auth-field {
  caret-color: #e4e4e7;
}

html.dark .auth-page-no-select input.auth-field:-webkit-autofill,
html.dark .auth-page-no-select input.auth-field:-webkit-autofill:hover,
html.dark .auth-page-no-select input.auth-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f4f5 !important;
  box-shadow: none !important;
  background-color: #1e1e26 !important;
  border-color: #5c5c68 !important;
  -webkit-transition: background-color 99999s ease-out;
  transition: background-color 99999s ease-out;
}

/* auth koyu tema yardimci bilesenleri — oauth, sihirbaz, checkbox - 10.09.2026 05:43 */

html.dark .auth-page-no-select .auth-strength-track {
  background-color: #3f3f46 !important;
}

html.dark .auth-page-no-select .auth-checkbox {
  background-color: #27272a !important;
  border-color: #52525b !important;
}

html.dark .auth-page-no-select .auth-inset {
  background-color: rgba(39, 39, 42, 0.55) !important;
  border: 1px solid #3f3f46;
}

html.dark .auth-page-no-select .auth-inset .text-gray-900,
html.dark .auth-page-no-select .auth-inset .font-medium.text-gray-900 {
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-inset .text-gray-600,
html.dark .auth-page-no-select .auth-inset .text-xs.text-gray-600 {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-text-gray-700 {
  color: #d4d4d8 !important;
}

html.dark .auth-page-no-select .auth-icon-link {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-purple-tile {
  background-color: var(--accent-soft) !important;
}

html.dark .auth-page-no-select .auth-purple-tile .text-purple-600 {
  color: var(--accent) !important;
}

html.dark .auth-page-no-select a.text-purple-600 {
  color: var(--accent) !important;
}

html.dark .auth-page-no-select .auth-amber-box {
  background-color: rgba(120, 53, 15, 0.35) !important;
  border-color: #b45309 !important;
}

html.dark .auth-page-no-select .auth-amber-box .text-amber-700,
html.dark .auth-page-no-select .auth-amber-box .text-amber-600 {
  color: #fcd34d !important;
}

html.dark .auth-page-no-select .auth-amber-box .text-amber-600.ph-clock {
  color: #fbbf24 !important;
}

html.dark .auth-page-no-select .auth-wizard-muted {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select code.auth-code-block,
html.dark .auth-page-no-select .auth-code-block {
  background-color: #09090b !important;
  border-color: #3f3f46 !important;
  color: #e4e4e7 !important;
}

html.dark .auth-page-no-select .auth-wizard-choice {
  background-color: #09090b !important;
  border-color: #3f3f46 !important;
}

html.dark .auth-page-no-select .auth-wizard-choice p.font-bold {
  color: #fafafa !important;
}

html.dark .auth-page-no-select .peer:checked + .auth-wizard-choice {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

html.dark .auth-page-no-select .auth-alert-info {
  background-color: rgba(30, 58, 138, 0.4) !important;
  border-color: #1e40af !important;
}

html.dark .auth-page-no-select .auth-alert-info p,
html.dark .auth-page-no-select .auth-alert-info .text-blue-800 {
  color: #bfdbfe !important;
}

html.dark .auth-page-no-select .auth-alert-success {
  background-color: rgba(20, 83, 45, 0.25) !important;
  border-color: #166534 !important;
  color: #bbf7d0;
}

html.dark .auth-page-no-select .auth-alert-success > i.ph-bold {
  color: #86efac !important;
}

html.dark .auth-page-no-select .auth-alert-success p {
  color: #bbf7d0 !important;
}

.auth-form-system-theme {
  accent-color: AccentColor;
}

html:not(.dark) .auth-form-system-theme {
  color-scheme: light;
}

html.dark .auth-form-system-theme {
  color-scheme: dark;
}

/* auth page user-select — extracted from legacy cpds - 24.06.2026 17:00 */

/* birlesik cta buton sistemi - 06.09.2026 06:03 */

:root {
  --cengel-btn-height-sm: 36px;
  --cengel-btn-height-md: 45px;
  --cengel-btn-height-lg: 52px;
  --cengel-btn-radius: var(--sidebar-r, 14px);
  --cengel-btn-gap: 0.375rem;
  --cengel-btn-padding-x: 1.125rem;
  --cengel-btn-font-size: 0.875rem;
  --cengel-btn-font-weight: 600;
}

.cengel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cengel-btn-gap);
  box-sizing: border-box;
  min-height: var(--cengel-btn-height-md);
  padding-inline: var(--cengel-btn-padding-x);
  border-radius: var(--cengel-btn-radius);
  border: 1px solid transparent;
  font-size: var(--cengel-btn-font-size);
  font-weight: var(--cengel-btn-font-weight);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
}

.cengel-btn:focus {
  outline: none;
}

.cengel-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cengel-btn:disabled,
.cengel-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cengel-btn--icon-only {
  width: var(--cengel-btn-height-md);
  min-width: var(--cengel-btn-height-md);
  padding-inline: 0;
}

.cengel-btn--sm {
  min-height: var(--cengel-btn-height-sm);
  font-size: 0.8125rem;
  padding-inline: 0.875rem;
}

.cengel-btn--sm.cengel-btn--icon-only {
  width: var(--cengel-btn-height-sm);
  min-width: var(--cengel-btn-height-sm);
  padding-inline: 0;
}

.cengel-btn--lg {
  min-height: var(--cengel-btn-height-lg);
  font-size: 0.9375rem;
  padding-inline: 1.375rem;
}

.cengel-btn--lg.cengel-btn--icon-only {
  width: var(--cengel-btn-height-lg);
  min-width: var(--cengel-btn-height-lg);
  padding-inline: 0;
}

.cengel-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.cengel-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.cengel-btn--secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--foreground);
}

.cengel-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.cengel-btn--ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
}

.cengel-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface-hover);
  color: var(--foreground);
}

.cengel-btn--danger {
  background: var(--danger);
  color: var(--danger-contrast);
  border-color: var(--danger);
}

.cengel-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.cengel-btn__icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.cengel-btn--sm .cengel-btn__icon {
  font-size: 0.9375rem;
}

.cengel-btn--lg .cengel-btn__icon {
  font-size: 1.125rem;
}

.cengel-btn__label {
  min-width: 0;
}

.cengel-btn--grow {
  flex: 1 1 0%;
}

.cengel-btn--block {
  display: flex;
  width: 100%;
}

@media (max-width: 639px) {
  .cengel-btn--hide-label-sm .cengel-btn__label {
    display: none;
  }

  .cengel-btn--hide-label-sm {
    width: var(--cengel-btn-height-sm);
    min-width: var(--cengel-btn-height-sm);
    padding-inline: 0;
  }
}

/* profil dis baglanti satirlari — js ile olusturulur, mobil sarma + surukleme hayaleti - 24.06.2026 16:30 */

/* account profil kapak banner — kapak varken 3:1 - 07.08.2026 07:30 */

/* datepicker component — extracted from legacy cpds - 24.06.2026 17:00 */

/* account field dropdown panel ac/kapa animasyonu - 30.06.2026 12:00 */

/* language picker panel — extracted from legacy cpds - 24.06.2026 17:00 */

/* overflow menu row z-index — extracted from legacy cpds - 24.06.2026 17:00 */

/* 2fa social profile layout — extracted from legacy cpds - 24.06.2026 17:00 */

/* pass kullanici karti popover — security sosyal onizleme ile birebir - 16.07.2026 04:42 */

/* pass user card header: panel, banner, avatar - 07.08.2026 06:30 */

/* cengel-user-card locked/loader/trigger — popover'dan ayrildi - 15.07.2026 23:00 */

/* cengel-user-card activity karti — cover + detay + spotify timeline - 15.07.2026 23:58 */

/* cengel-user-card dusunce balonu — custom status, avatarin sag yaninda - 16.07.2026 05:22 */

/* cengel-user-card space rolleri — chip satiri, spacing - 16.07.2026 06:32 */

/* pass kullanici karti — arkadaslik aksiyonlari (cengel-btn) - 02.08.2026 00:05 */

/* cengel-tooltip — tek birlesik tooltip; rail motion modeli - 16.07.2026 05:36 */

/* profil — postlar solda, sticky profil sagda, zemin surface-subtle - 30.08.2026 18:05 */

html.account-shell-root:has(.account-main--profile-timeline) .account-split-outer,
html.account-shell-root:has(.account-main--profile-timeline) .account-split__main,
.account-split__scroll:has(#account-main-content.account-main--profile-timeline),
#account-main-content.account-main--profile-timeline,
.social-profile-page--standalone {
  background-color: light-dark(var(--surface-muted), var(--canvas));
}

/* profil sidebar — avatar 4:5 + padding, banner gizli - 22.08.2026 05:12 */

/* sosyal profil — avatar 4:5, %70 banner ustunde - 16.08.2026 19:37 */

/* sosyal profil meta / aksiyonlar / mobil - 16.08.2026 19:37 */

/* profil kapak basligi — avatar 1:1, kimlik satiri - 16.10.2026 19:50 */

/* profil sayfasi — kapak tam genislik, bilgi solda, akis sagda - 16.10.2026 19:50 */

/* profil koleksiyonlari — kutu basligi + genel - 16.08.2026 19:37 */

/* profil baglanti og — kutu icinde ikinci kart yok - 16.08.2026 20:26 */

/* profil diger baglantilar modali + satir - 16.08.2026 15:22 */

/* post timeline — tek sutun akis; kart genisligi ana sutun (40rem) ile ayni - 24.08.2026 04:28 */

/* post composer — kart container + yorum satiri - 24.08.2026 05:16 */

/* post / quote composer mirror — kanal compose parser gorunumu - 24.08.2026 04:55 */

/* quote modal: eski bordered textarea - 24.08.2026 04:55 */

.post-composer__textarea-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.post-composer__preview.ann-compose__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0.65rem 0.75rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--ink, var(--foreground));
  border-radius: 0.75rem;
}

.post-composer__textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 2.75rem;
  max-height: 12rem;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3.5%, transparent));
  color: var(--ink, var(--foreground));
  -webkit-text-fill-color: var(--ink, var(--foreground));
  caret-color: var(--ink, var(--foreground));
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.post-composer__textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
}

.post-composer__textarea::-moz-placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.post-composer__textarea::placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.post-composer__textarea.ann-compose__textarea--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink, var(--foreground));
}

.post-composer__preview .cengel-mention,
.post-composer__preview .cengel-mention--all,
.post-composer__preview .cengel-mention--url,
.post-composer__field .ann-compose__preview .cengel-mention,
.post-composer__field .ann-compose__preview .cengel-mention--all,
.post-composer__field .ann-compose__preview .cengel-mention--url {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  pointer-events: none;
  text-decoration: none;
}

.post-composer__preview.ann-markdown span.cengel-mention,
.post-composer__preview.ann-markdown span.cengel-mention--url,
.post-composer__preview.ann-markdown a.cengel-mention,
.post-composer__field .ann-compose__preview.ann-markdown span.cengel-mention,
.post-composer__field .ann-compose__preview.ann-markdown span.cengel-mention--url,
.post-composer__field .ann-compose__preview.ann-markdown a.cengel-mention {
  color: #3d4ff0;
  background: transparent;
  font-weight: 400;
}

.post-composer__preview .cengel-mention--all,
.post-composer__field .ann-compose__preview .cengel-mention--all {
  color: #dc2626;
  background: transparent;
}

.dark .post-composer__preview.ann-markdown span.cengel-mention,
.dark .post-composer__preview.ann-markdown span.cengel-mention--url,
.dark .post-composer__preview.ann-markdown a.cengel-mention,
.dark .post-composer__field .ann-compose__preview.ann-markdown span.cengel-mention,
.dark .post-composer__field .ann-compose__preview.ann-markdown span.cengel-mention--url,
.dark .post-composer__field .ann-compose__preview.ann-markdown a.cengel-mention {
  color: #aeb6ff;
}

.post-composer__preview .cengel-emoji,
.post-composer__preview .cengel-emoji--compose,
.post-composer__field .ann-compose__preview .cengel-emoji,
.post-composer__field .ann-compose__preview .cengel-emoji--compose {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: -0.075em;
}

.post-composer__preview .cengel-emoji-token,
.post-composer__field .ann-compose__preview .cengel-emoji-token {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.post-composer__preview a,
.post-composer__field .ann-compose__preview a {
  color: #3d4ff0;
  text-decoration: underline;
  pointer-events: none;
}

.dark .post-composer__preview a,
.dark .post-composer__field .ann-compose__preview a {
  color: #aeb6ff;
}

.post-composer__preview--placeholder,
.post-composer__field .ann-compose__preview--placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

/* post composer media strip - 16.08.2026 23:25 */

.post-composer__media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.post-composer__media-item {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface-muted, #f1f5f9);
}

.post-composer__media-item.is-busy {
  opacity: 0.65;
}

.post-composer__media-item.is-error {
  outline: 2px solid var(--danger, #dc2626);
}

.post-composer__media-thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.post-composer__media-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 19, 0.72);
  color: #fff;
  cursor: pointer;
}

.post-composer.is-dragover .post-composer__box {
  outline: 2px dashed color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

/* post edit modal — metin alani; krom cengel-modal form - 26.08.2026 15:35 */

/* post card — byline header, full-width body; max 40rem ana sutun ile hizali - 24.08.2026 04:28 */

/* post card stats — 26px daire yuzler + tek satir copy (orta nokta) - 29.09.2026 14:10 */

/* post card like/comment/share/bookmark — 1:1 hover, ikonlar bold - 22.08.2026 18:30 */

/* post card embed + repost flag / menu - 23.08.2026 05:34 */

/* post quote modal — form kromu cengel-modal; icerik akisi - 26.08.2026 15:35 */

/* post likes modal — liste; krom cengel-modal form - 29.09.2026 17:55 */

/* post media — width 100%, yukseklik gorsel, maks 4:5 - 23.08.2026 04:49 */

.post-card__media {
  container-type: inline-size;
  --post-media-max-h: calc(100cqi * 5 / 4);
  display: grid;
  gap: 0.2rem;
  width: calc(100% + (2 * var(--post-card-pad-x, 1.125rem)));
  max-width: none;
  max-height: var(--post-media-max-h);
  margin-inline: calc(-1 * var(--post-card-pad-x, 1.125rem));
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

.post-card__media--slider {
  display: block;
  position: relative;
}

.post-card__media [data-msg-media] {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

.post-card__media [data-msg-media] img {
  width: 100%;
  height: auto;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-card__media--n1 {
  grid-template-columns: minmax(0, 1fr);
}

.post-card__media--n2,
.post-card__media--n3,
.post-card__media--n4 {
  grid-template-columns: 1fr 1fr;
}

.post-card__media-item {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: var(--post-media-max-h);
  display: block;
  overflow: hidden;
}

.post-card__media-item img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  vertical-align: top;
}

.post-card__media--n2 .post-card__media-item img,
.post-card__media--n3 .post-card__media-item img,
.post-card__media--n4 .post-card__media-item img {
  width: 100%;
  height: 100%;
  max-height: var(--post-media-max-h);
  -o-object-fit: cover;
     object-fit: cover;
}

.post-card__media-item--video,
.post-card__media-item .cengel-video-player {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: var(--post-media-max-h);
}

.post-card__media-item .cengel-video-player__video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  background: #0f0f13;
}

.post-card__media-status {
  padding: 0.9rem 1.125rem;
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
}

.post-card__media-status--err {
  color: var(--danger, #dc2626);
}

/* yorum eki — dogal oran, max 220px yukseklik, width zorlanmaz - 22.08.2026 18:37 */

.post-comment .post-card__media {
  --post-media-max-h: 220px;
  max-height: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-inline: 0;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}

.post-comment .post-card__media-item,
.post-comment .post-card__media-item--video,
.post-comment .post-card__media-item .cengel-video-player {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  height: auto;
  max-height: var(--post-media-max-h);
  overflow: hidden;
  border-radius: 0.75rem;
}

.post-comment .post-card__media .post-card__media-item img,
.post-comment .post-card__media--n2 .post-card__media-item img,
.post-comment .post-card__media--n3 .post-card__media-item img,
.post-comment .post-card__media--n4 .post-card__media-item img,
.post-comment [data-msg-media] img,
.post-comment .post-card__media-item .cengel-video-player__video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--post-media-max-h);
  min-height: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.post-comment [data-msg-media] {
  width: -moz-max-content;
  width: max-content;
  height: auto;
  max-width: 100%;
  max-height: var(--post-media-max-h);
  min-height: 0;
  background: transparent;
}

html.aero-ui .post-comment .post-card__media {
  background: transparent;
}

/* post media slider — hover ok + ic noktalar, maks 4:5 - 23.08.2026 04:49 */

/* post card comments — kart altinda, 40px avatar - 23.08.2026 00:13 */

/* post comment reply thread — opak rail, L tangent birlesim - 23.08.2026 01:04 */

/* post comment like + reply actions - 14.10.2026 18:40 */

/* post comment composer — tek satir kutu, disari gonder - 23.08.2026 04:23 */

/* paylasilanlar album entry + owner list - 29.08.2026 07:10 */

.shared-album {
  margin-top: 0.75rem;
}

.shared-album__open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.65rem;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.shared-album__owner-tools {
  margin-top: 0.45rem;
}

.shared-album__new {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 0.55rem;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 0.8125rem;
  cursor: pointer;
}

.shared-album__list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.shared-album__list li + li {
  margin-top: 0.25rem;
}

.shared-album__list a {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--text, #0f172a);
  text-decoration: none;
  font-size: 0.8125rem;
}

.shared-album__list a:hover {
  background: var(--surface-muted, #f1f5f9);
}

/* album page — profil sol kolonunda, sidebar ile ayni ust hiza - 30.08.2026 18:00 */

.album-page {
  --album-gap: 0.75rem;
  --album-panel-pad: 1rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-sizing: border-box;
}

.album-page__panel {
  background: var(--background, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-card, 1.25rem);
  padding: var(--album-panel-pad);
  box-sizing: border-box;
}

.album-page__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 0 100%;
  color: var(--text-muted, #64748b);
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

.album-page__back:hover {
  color: var(--text, #0f172a);
}

.album-page__hero {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: flex-start;
}

.album-page__cover {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: calc(var(--radius-card, 1.25rem) - 0.35rem);
  overflow: hidden;
  background: var(--surface-subtle, #f1f5f9);
  flex-shrink: 0;
  border: 1px solid var(--border, #e2e8f0);
}

.album-page__cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.album-page__titles {
  flex: 1 1 12rem;
  min-width: 0;
}

.album-page__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.album-page__desc {
  margin: 0.35rem 0 0;
  color: var(--text-muted, #64748b);
  font-size: 0.9rem;
  line-height: 1.45;
}

.album-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  color: var(--text-muted, #64748b);
}

.album-page__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--border, #cbd5e1);
}

.album-page__visibility {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-subtle, #f8fafc);
  font-size: 0.75rem;
}

.album-page__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.album-page__gallery {
  min-height: 8rem;
}

/* css columns masonry — natural aspect, no crop - 30.08.2026 18:00 */

.album-page__grid {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: var(--album-gap);
       column-gap: var(--album-gap);
}

@media (min-width: 640px) {
  .album-page__grid {
    -moz-column-count: 3;
         column-count: 3;
  }
}

.album-page__tile {
  display: block;
  width: 100%;
  margin: 0 0 var(--album-gap);
  padding: 0;
  border: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface-subtle, #f1f5f9);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
}

.album-page__tile img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.album-page__empty {
  margin: 0.25rem 0 0;
  padding: 1.75rem 0.5rem;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 0.875rem;
}

.album-page__more {
  margin-top: 0.35rem;
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.65rem;
  padding: 0.55rem;
  background: var(--surface-subtle, #f8fafc);
  color: var(--text, #0f172a);
  cursor: pointer;
  font-size: 0.875rem;
}

.album-page__more:hover {
  filter: brightness(0.98);
}

/* album page edit/add form chrome - 30.08.2026 17:45 */

.album-page__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
}

.album-page__field input,
.album-page__field textarea {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
}

.album-page__vis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.album-page__vis-options button {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.8125rem;
}

.album-page__picker {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 0.4rem;
       column-gap: 0.4rem;
  margin-top: 0.75rem;
}

.album-page__picker-tile {
  display: block;
  width: 100%;
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  overflow: hidden;
  cursor: pointer;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  background: var(--surface-subtle, #f1f5f9);
}

.album-page__picker-tile img {
  width: 100%;
  height: auto;
  display: block;
}

/* misc-login.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-register.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-profile-cropper.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-settings.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-notifications.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-password.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-language-selector.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* space wizard step anim + invite list - 18.07.2026 03:35 */

/* space create wizard panel — layout + intro + input - 18.07.2026 03:35 */

/* space wizard actions + banner + success - 18.07.2026 03:35 */

/* space wizard logo + erisim alanlari - 18.07.2026 03:35 */

/* misc-admin-table.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* uye paneli basligi — kanal ve sekme varyantlari - 16.07.2026 07:05 */

/* space members panel — panel layout, grup, toggle - 15.08.2026 15:42 */

/* space member row — uye satiri, presence dot, rich presence - 16.08.2026 20:30 */

/* member-row typing — presence slide + yaziyor noktalari - 25.07.2026 01:28 */

/* rich presence modal — panel/icerik (shell: cengel-modal) - 14.08.2026 22:55 */

/* kapanis animasyonu icin --closing varken gorunur kalsin - 14.08.2026 22:55 */

.rich-presence-modal.hidden:not(.cengel-modal--closing) {
  display: none !important;
}

/* rich presence modal form — composer, sure, hizli secim - 15.07.2026 20:20 */

.rich-presence-modal__composer {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.rich-presence-modal__emoji-btn {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: var(--surface-subtle, #f5f5f5);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.dark .rich-presence-modal__emoji-btn {
  border-color: #3f3f46;
  background: #18181b;
}

.rich-presence-modal__emoji-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.rich-presence-modal__emoji-img {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.rich-presence-modal__emoji-placeholder {
  font-size: 1.25rem;
  opacity: 0.45;
  line-height: 1;
}

.rich-presence-modal__input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* input + select ayni height/border/radius/font - 15.07.2026 20:20 */

.rich-presence-modal__input,
.rich-presence-modal__dropdown-trigger {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: transparent;
  color: inherit;
  font-size: 0.9375rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.rich-presence-modal__input {
  padding-right: 3rem;
}

.dark .rich-presence-modal__input,
.dark .rich-presence-modal__dropdown-trigger {
  border-color: #3f3f46;
}

.rich-presence-modal__input:focus,
.rich-presence-modal__dropdown-trigger[aria-expanded="true"] {
  border-color: var(--ink, #171717);
}

.dark .rich-presence-modal__input:focus,
.dark .rich-presence-modal__dropdown-trigger[aria-expanded="true"] {
  border-color: #a1a1aa;
}

.rich-presence-modal__count {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  opacity: 0.45;
  pointer-events: none;
}

.rich-presence-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rich-presence-modal__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.45;
}

.rich-presence-modal__dropdown {
  position: relative;
}

.rich-presence-modal__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
}

.rich-presence-modal__dropdown-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: var(--background, #ffffff);
  max-height: 12rem;
  overflow: auto;
}

.dark .rich-presence-modal__dropdown-panel {
  border-color: #3f3f46;
  background: #18181b;
}

.rich-presence-modal__dropdown-panel[hidden] {
  display: none !important;
}

.rich-presence-modal__dropdown-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}

.rich-presence-modal__dropdown-option:hover,
.rich-presence-modal__dropdown-option[aria-selected="true"] {
  background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.06));
}

.rich-presence-modal__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.rich-presence-modal__preset {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}

.rich-presence-modal__preset:hover {
  background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.06));
}

.rich-presence-modal__preset-emoji {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rich-presence-modal__preset-emoji-img {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.rich-presence-modal__preset-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* role color picker — extracted from legacy cpds - 24.06.2026 17:00 */

/* spaces sidebar tree lines — extracted from legacy cpds - 24.06.2026 17:00 */

/* spaces list badges — tek tip uye/unread/mention - 01.08.2026 21:21 */

/* /spaces layout ve paylasilan tam genislik sayfa hero alani - 03.08.2026 09:38 */

/* /spaces ve /spark hero — sayfaya ozel display fontu - 15.08.2026 15:45 */

/* /spaces profil kartlari — title/desc/badge/padding - 01.08.2026 21:21 */

/* /spaces unread kanallar + discover cta - 21.07.2026 21:05 */

/* spaces sidebar footer self panel + status menu - 22.07.2026 03:05 */

/* spaces sidebar footer activity karti olcekleri - 20.07.2026 02:24 */

/* /wall sag panel — arkadaslar + self footer - 16.08.2026 20:25 */

/* sp-sidebar shell: kapsayici, divider, avatar, nav wrapper — split: space-sidebar-nav.css - 23.07.2026 01:35 */

/* sp-sidebar sekme ekleme, kategoriler, dnd — space-sidebar-shell.css bolunmesi - 23.07.2026 01:35 */

/* space tab / kanal form modallari — panel/icerik (shell: cengel-modal) - 16.07.2026 14:25 */

/* sp-sidebar sekmeleri — discord kanal listesi hizasi - 06.09.2026 06:03 */

/* space sidebar header — footer user row geometrisi + squircle logo - 03.08.2026 10:15 */

/* space sidebar kategori basligi + - 20.07.2026 01:56 */

/* space settings layout — extracted from legacy cpds - 07.08.2026 05:55 */

/* ayarlar > alan adi feature — kompakt - 21.07.2026 23:35 */

/* ayarlar > alan adi dogrulama — asamali hiza - 21.07.2026 23:50 */

/* ayarlar > cengel mail marketing hero - 22.07.2026 01:20 */

/* ayarlar > cengel mail — dns kayit karti - 22.07.2026 01:37 */

/* ayarlar > space posta kutulari - 22.07.2026 03:10 */

/* ayarlar > uye rolleri, erisim segmented control, rol sirasi — space-settings.css'ten ayrildi - 06.07.2026 18:15 */

/* ayarlar > uyeler tablo grid — table etiketi yok - 07.07.2026 01:40 */

/* space settings modal — panel/icerik (shell: cengel-modal) - 16.07.2026 06:00 */

/* account settings modal — panel/icerik (shell: cengel-modal) - 16.08.2026 21:30 */

/* settings modals — mobile index↔detail - 09.08.2026 08:25 */

/* paylasilan modal shell — backdrop / stage / panel + form kromu - 26.08.2026 15:35 */

/* utilities .hidden ustunde kalsin — @layer disinda - 03.08.2026 07:27 */

.cengel-modal.hidden.cengel-modal--closing {
  display: block !important;
  pointer-events: none;
}

/* ortak sikayet modal — header + hedef onizleme - 07.08.2026 04:51 */

/* account /account/reports — liste satir + durum rozeti - 07.08.2026 05:03 */

/* dis baglanti uyari — lead + embed slot (panel layout account-confirm-modal) - 16.07.2026 05:55 */

.ext-link-modal__lead {
  text-wrap: pretty;
}

.ext-link-modal__embed {
  margin-top: 1.25rem;
  text-align: left;
}

/* dosya indirme modal — mesaj dosya karti kopyasi - 20.07.2026 21:14 */

.file-dl-modal__preview {
  text-align: left;
}

.file-dl-modal__preview .ann-card__file {
  margin: 0;
  max-width: 100%;
}

.file-dl-modal__preview .ann-card__file-stage {
  cursor: default;
  pointer-events: none;
}

/* ayarlar > depolama ve plan kartlari — modal.css'ten ayrildi - 06.07.2026 18:15 */

/* board viewport + toolbar — shell token uyumlu freeform canvas - 18.07.2026 04:50 */

/* board boxes — minimal shell + resize + guides - 20.07.2026 15:40 */

/* board box floating chrome — kutunun ustunde, icerigi kapamaz - 20.07.2026 15:40 */

/* board connections — svg rope lines + color tones - 20.07.2026 02:00 */

/* board double-click pointer mark — avatar + rol rengi halka - 18.07.2026 05:40 */

/* board box color tones — soft sticky palette - 20.07.2026 03:05 */

/* board box markdown — editor + preview - 20.07.2026 03:05 */

/* board todo box — enriched list ui - 20.07.2026 03:05 */

/* board box content — image - 20.07.2026 03:05 */

/* board table box — grid rows, sort headers, cells - 19.07.2026 03:17 */

/* board table cells + empty + add-row - 19.07.2026 03:17 */

/* board activity panel — shell floating panel dili - 18.07.2026 03:55 */

/* pass context menu — soft elevation + placement transform - 16.07.2026 06:57 */

/* audit log page — extracted from legacy cpds - 30.06.2026 12:00 */

/* devam: audit-log-detail.css - 23.07.2026 01:35 */

/* audit log detail chips, rich rows, tab-order, entity rows — split from audit-log.css - 23.07.2026 01:35 */

/* space general — profil karti + tam kolon genislik - 03.08.2026 08:50 */

/* space general profil detaylari — stats + meta - 03.08.2026 08:50 */

/* space general sections — contained kart (join + okunmamis) - 21.07.2026 20:38 */

/* ann-channel-feed.css - 24.06.2026 17:45 */

/* mesaj tarih bolucusu — pill etiket, avatar hizasinda cizgi - 14.07.2026 07:56 */

/* okunmamis mesaj bolucu — tarih bolucusu yapisi, kirmizi - 25.07.2026 01:59 */

/* feed alti floating gunumuze git — shell uzerinde, layout itmez - 20.07.2026 19:35 */

.ann-feed-shell {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ann-jump-present {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem 0.5rem;
  border: none;
  border-radius: 0;
  pointer-events: none;
  background: transparent;
  color: #171717;
  cursor: pointer;
}

.ann-jump-present[hidden] {
  display: none !important;
}

.ann-jump-present__chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #171717 10%, transparent);
  background: color-mix(in srgb, #ffffff 88%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ann-jump-present i {
  font-size: 0.875rem;
}

.ann-jump-present:hover .ann-jump-present__chip,
.ann-jump-present__chip:hover {
  background: #ffffff;
  border-color: color-mix(in srgb, #171717 16%, transparent);
}

.dark .ann-jump-present {
  background: transparent;
  color: #e4e4e7;
}

.dark .ann-jump-present__chip {
  border-color: color-mix(in srgb, #e4e4e7 12%, transparent);
  background: color-mix(in srgb, #18181b 88%, transparent);
}

.dark .ann-jump-present:hover .ann-jump-present__chip,
.dark .ann-jump-present__chip:hover {
  background: #27272a;
  border-color: color-mix(in srgb, #e4e4e7 18%, transparent);
}

/* cengel-bot-tag — bot/sistem rozeti; kart vurgusunda da okunur - 16.07.2026 16:41 */

/* mesaj inline duzenleme — compose input row ile ayni bilesen - 02.07.2026 15:05 */

/* mesaj tepkileri — pill, animasyon, hover - 03.07.2026 06:20 */

/* link onizleme — dosya karti ile ayni chrome (border/radius/bg) - 16.08.2026 14:26 */

/* youtube link onizleme — dosya karti chrome ile uyumlu video alani - 21.07.2026 03:33 */

.ann-link-preview--youtube {
  max-width: min(100%, 28rem);
}

.ann-link-preview--youtube .ann-link-preview__yt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0f0f;
  border-top: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
}

.ann-link-preview__yt-play {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ann-link-preview__yt-play::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 18%, transparent);
  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.ann-link-preview__yt-play:hover::after,
.ann-link-preview__yt-play:focus-visible::after {
  background: color-mix(in srgb, #000 34%, transparent);
}

.ann-link-preview__yt-poster,
.ann-link-preview__yt-poster-empty {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.ann-link-preview__yt-poster-empty {
  background: #1a1a1a;
}

.ann-link-preview__yt-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #0a0a0a 72%, transparent);
  border: 1.5px solid color-mix(in srgb, #fff 55%, transparent);
  color: #fff;
  font-size: 1.35rem;
  pointer-events: none;
  transition:
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ann-link-preview__yt-play-icon i {
  display: block;
  line-height: 1;
  margin-left: 0.15rem;
}

.ann-link-preview__yt-play:hover .ann-link-preview__yt-play-icon,
.ann-link-preview__yt-play:focus-visible .ann-link-preview__yt-play-icon {
  transform: translate(-50%, -50%) scale(1.06);
  background: color-mix(in srgb, #0a0a0a 88%, transparent);
  border-color: #fff;
}

.ann-link-preview__yt-play:active .ann-link-preview__yt-play-icon {
  transform: translate(-50%, -50%) scale(0.96);
}

.ann-link-preview__yt-play:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ann-link-preview__yt-play::after,
  .ann-link-preview__yt-play-icon {
    transition: none;
  }

  .ann-link-preview__yt-play:hover .ann-link-preview__yt-play-icon,
  .ann-link-preview__yt-play:focus-visible .ann-link-preview__yt-play-icon,
  .ann-link-preview__yt-play:active .ann-link-preview__yt-play-icon {
    transform: translate(-50%, -50%);
  }
}

.ann-link-preview__yt-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* cengel-mention — kullanici/kanal/url; sadece renk, bold/appearance yok - 16.07.2026 03:55 */

.cengel-mention {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #3d4ff0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button.cengel-mention,
a.cengel-mention {
  font-weight: 400;
}

a.cengel-mention,
a.cengel-mention:hover,
a.cengel-mention:focus,
a.cengel-mention:focus-visible,
.ann-markdown a.cengel-mention,
.ann-markdown a.cengel-mention:hover {
  text-decoration: none;
  color: #3d4ff0;
  background: transparent;
}

.dark .ann-markdown a.cengel-mention,
.dark .ann-markdown a.cengel-mention:hover {
  color: #aeb6ff;
  background: transparent;
}

.cengel-mention:hover {
  background: transparent;
  color: #2a38d4;
}

.dark .cengel-mention {
  background: transparent;
  color: #aeb6ff;
}

.dark .cengel-mention:hover {
  background: transparent;
  color: #d4d8ff;
}

.cengel-mention-menu {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 8px;
  background: var(--background, #fff);
  padding: 4px;
}

.cengel-mention-menu.hidden {
  display: none;
}

.cengel-mention-menu__title {
  padding: 8px 10px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground, #000) 50%, transparent);
}

.cengel-mention-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  padding: 8px 10px;
  text-align: left;
}

.cengel-mention-menu__item:hover,
.cengel-mention-menu__item--active {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.cengel-mention-menu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.cengel-mention-menu__hint {
  margin-left: auto;
  flex-shrink: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.cengel-mention-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

/* notr ikon zemin — secili satirdan ayri kalsin - 16.07.2026 03:55 */

.cengel-mention-menu__avatar--all,
.cengel-mention-menu__avatar--tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground, #000) 10%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
  font-size: 0.9375rem;
}

.cengel-mention-menu__item:hover .cengel-mention-menu__avatar--all,
.cengel-mention-menu__item--active .cengel-mention-menu__avatar--all,
.cengel-mention-menu__item:hover .cengel-mention-menu__avatar--tab,
.cengel-mention-menu__item--active .cengel-mention-menu__avatar--tab {
  background: color-mix(in srgb, var(--foreground, #000) 16%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

/* cengel-emoji — twemoji gorselleri ve mesaj tooltip - 26.07.2026 23:40 */

.cengel-emoji {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin: 0 0.05em;
  vertical-align: -0.2em;
  -o-object-fit: contain;
     object-fit: contain;
}

/* mesaj emoji tooltip — floating + viewport clamp - 26.07.2026 23:40 */

.cengel-emoji-wrap {
  position: relative;
  display: inline-block;
  vertical-align: -0.2em;
  line-height: 0;
  outline: none;
}

.cengel-emoji-wrap > .cengel-emoji {
  margin: 0;
}

/* eski inline tip kalintisi — floating kullanilir - 26.07.2026 23:40 */

.cengel-emoji-wrap > .cengel-emoji-tooltip {
  display: none !important;
}

.cengel-emoji-tooltip {
  z-index: 10200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: -moz-max-content;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: var(--sidebar-item-r, 8px);
  background: var(--background, #fff);
  color: var(--foreground, #000);
  line-height: 1.3;
  text-align: left;
  pointer-events: none;
}

.cengel-emoji-tooltip__emoji {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.cengel-emoji-tooltip__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}

.cengel-emoji-tooltip__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: normal;
  text-align: left;
}

.cengel-emoji-tooltip__code {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  white-space: nowrap;
  text-align: left;
}

.cengel-emoji-tooltip.cengel-emoji-tooltip--floating {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.25rem);
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 160ms ease;
}

.cengel-emoji-tooltip.cengel-emoji-tooltip--floating.cengel-emoji-tooltip--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cengel-emoji-tooltip--floating {
    transition: none;
  }
}

/* yalnizca emoji mesaji — en fazla 3, 2.5x boyut - 15.07.2026 23:42 */

.ann-markdown--emoji-lg .cengel-emoji {
  width: 3.125em;
  height: 3.125em;
}

.ann-markdown--emoji-lg .cengel-emoji-wrap {
  vertical-align: -0.35em;
}

/* pass emoji picker — kabuk, grid, viewport max - 16.07.2026 05:32 */

.cengel-emoji-picker {
  position: fixed;
  z-index: 12010;
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 448px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 14px;
  background: var(--background, #fff);
  overflow: visible;
  opacity: 0;
  transform: scale(0.98);
  transform-origin: top center;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  /* user popover ile ayni yukselme - 16.07.2026 05:32 */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

.dark .cengel-emoji-picker {
  box-shadow: 0 4px 18px color-mix(in srgb, black 35%, transparent);
}

.cengel-emoji-picker:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}

/* uste acilis — transform-origin alt kenar - 15.07.2026 23:42 */

.cengel-emoji-picker--above {
  transform-origin: bottom center;
}

.cengel-emoji-picker.hidden {
  display: none;
}

.cengel-emoji-picker__head {
  padding: 12px 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  border-radius: 14px 14px 0 0;
  background: var(--background, #fff);
  flex-shrink: 0;
}

.cengel-emoji-picker__search-wrap {
  position: relative;
  display: block;
}

.cengel-emoji-picker__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
  pointer-events: none;
  transition: color 140ms ease-out;
}

.cengel-emoji-picker__search-wrap:focus-within .cengel-emoji-picker__search-icon {
  color: color-mix(in srgb, var(--foreground, #000) 62%, transparent);
}

.cengel-emoji-picker__search {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 10px;
  padding: 0.625rem 0.75rem 0.625rem 2.375rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: var(--foreground, #000);
  box-sizing: border-box;
  outline: none;
  transition:
        border-color 140ms ease-out,
        background-color 140ms ease-out;
}

.cengel-emoji-picker__search::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.cengel-emoji-picker__search::placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.cengel-emoji-picker__search:hover {
  border-color: color-mix(in srgb, var(--foreground, #000) 16%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
}

.cengel-emoji-picker__search:focus {
  border-color: color-mix(in srgb, var(--foreground, #000) 24%, transparent);
  background: var(--background, #fff);
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  outline-offset: 1px;
}

.cengel-emoji-picker__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  margin-right: 2px;
  cursor: pointer;
  opacity: 0.45;
  background:
        linear-gradient(45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%);
  color: color-mix(in srgb, var(--foreground, #000) 70%, transparent);
}

.cengel-emoji-picker__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: visible;
  background: var(--background, #fff);
}

.cengel-emoji-picker__tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
  padding: 8px 10px;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  flex-shrink: 0;
  background: var(--background, #fff);
}

.cengel-emoji-picker__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  border: none;
  border-radius: 9px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: background 120ms ease-out;
}

.cengel-emoji-picker__tab:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
}

.cengel-emoji-picker__tab--active {
  background: color-mix(in srgb, var(--foreground, #000) 9%, transparent);
}

.cengel-emoji-picker__tab-icon {
  display: block;
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity 120ms ease-out;
}

.cengel-emoji-picker__tab:hover .cengel-emoji-picker__tab-icon {
  opacity: 0.72;
}

.cengel-emoji-picker__tab--active .cengel-emoji-picker__tab-icon {
  opacity: 1;
}

.cengel-emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 10px 6px 10px 10px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-emoji-picker {
    transition: none;
    transform: none;
  }

  .cengel-emoji-picker__grid {
    scroll-behavior: auto;
  }
}

/* pass emoji picker — emoji hucre, onizleme, suggest - 16.07.2026 05:36 */

.cengel-emoji-picker__loading {
  grid-column: 1 / -1;
  align-self: center;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

.cengel-emoji-picker__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: background 100ms ease-out;
}

.cengel-emoji-picker__emoji .cengel-emoji {
  width: 34px;
  height: 34px;
  margin: 0;
}

.cengel-emoji-picker__emoji:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.cengel-emoji-picker__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
  margin: 0;
  padding: 12px;
  text-align: center;
}

.cengel-emoji-picker__empty-icon {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 12px;
}

.cengel-emoji-picker__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground, #000);
}

.cengel-emoji-picker__empty-sub {
  margin: 6px 0 0;
  max-width: 220px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.cengel-emoji-picker__preview {
  flex-shrink: 0;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 0 0 14px 14px;
}

.cengel-emoji-picker__preview-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
}

.cengel-emoji-picker__preview-inner--empty {
  visibility: hidden;
}

.cengel-emoji-picker__preview-emoji {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.cengel-emoji-picker__preview-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cengel-emoji-picker__preview-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cengel-emoji-picker__preview-code {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  white-space: nowrap;
}

.cengel-emoji-suggest {
  position: fixed;
  z-index: 12005;
  max-height: min(240px, calc(100dvh - 16px));
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 8px;
  background: var(--background, #fff);
  padding: 4px;
}

.cengel-emoji-suggest.hidden {
  display: none;
}

.cengel-emoji-suggest__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  padding: 8px 10px;
  text-align: left;
}

.cengel-emoji-suggest__item--active,
.cengel-emoji-suggest__item:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.cengel-emoji-suggest__label {
  font-weight: 500;
}

/* emoji picker ve oneri — compose baglami - 01.07.2026 18:00 */

.cengel-emoji-picker {
  border-radius: 12px;
}

.cengel-emoji-picker__head {
  border-radius: 12px 12px 0 0;
}

.cengel-emoji-picker__preview {
  border-radius: 0 0 12px 12px;
}

.cengel-emoji-suggest {
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
}

.cengel-emoji-suggest__item {
  border-radius: 8px;
  padding: 9px 10px;
  gap: 10px;
}

.cengel-emoji-suggest__item .cengel-emoji {
  width: 22px;
  height: 22px;
}

.cengel-emoji-suggest__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.cengel-emoji-suggest__item--active .cengel-emoji-suggest__label,
.cengel-emoji-suggest__item:hover .cengel-emoji-suggest__label {
  color: var(--foreground, #000);
}

/* mention / unread sidebar — kategori + ile ayni sag hiza - 16.07.2026 18:35 */

.sp-sidebar__tab {
  --sp-tab-trailing-slot: calc(0.875rem + 4px);
  /* .sp-sidebar__cat-add - 16.07.2026 18:35 */
}

.sp-sidebar__tab-mention {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  height: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ed4245;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.sp-sidebar__tab-mention[hidden] {
  display: none;
}

.sp-sidebar__tab--active .sp-sidebar__tab-mention {
  display: none;
}

/* discord-tarzi okunmamis nokta — kategori + ile ayni sag hiza - 16.07.2026 18:35 */

.sp-sidebar__tab-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  height: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.sp-sidebar__tab-unread::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.dark .sp-sidebar__tab-unread::before {
  background: color-mix(in srgb, var(--foreground) 78%, transparent);
}

.sp-sidebar__tab-unread[hidden] {
  display: none;
}

.sp-sidebar__tab--active .sp-sidebar__tab-unread {
  display: none;
}

.spaces-sb-mention-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ed4245;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

.spaces-sb-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

/* pass rail sag-alt sayi rozeti — koseden hafif tasan - 22.07.2026 19:50 */

.cengel-rail-item__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  border: 2px solid var(--eco-header-bg, #ffffff);
  background: #ed4245;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  pointer-events: none;
}

html.dark .cengel-rail-item__badge {
  border-color: var(--eco-header-bg, #0f0f13);
}

.cengel-rail-item__badge[hidden] {
  display: none !important;
}

/* rail okunmamis noktasi — tema uyumlu, border = bg - 19.07.2026 03:58 */

.cengel-rail-item__unread {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 4;
  display: block;
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--eco-header-bg, #ffffff);
  background: var(--foreground, #171717);
  pointer-events: none;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

html.dark .cengel-rail-item__unread {
  border-color: var(--eco-header-bg, #09090d);
  background: #ffffff;
}

.cengel-rail-item__unread[hidden] {
  display: none !important;
}

/* mention rozeti (dolu) varken unread gizle — ayni kosede - 22.07.2026 03:55 */

.cengel-rail-item:has(> .cengel-rail-item__badge:not([hidden]):not(:empty)) > .cengel-rail-item__unread {
  display: none !important;
}

/* join-request rozeti varken mention gizle - 21.07.2026 13:40 */

.cengel-rail-item:has(> [data-space-join-request-badge]:not([hidden])) > [data-space-mention-badge] {
  display: none !important;
}

.cengel-rail-item__badge--join {
  z-index: 9;
}

/* collapse: kapali → toplam spaces unread; acik → space noktalari - 18.07.2026 05:15 */

.cengel-rail-spaces[data-rail-spaces-expanded="false"] .cengel-rail-item__unread {
  display: none !important;
}

.cengel-rail-spaces-group:has([data-rail-spaces-expanded="true"]):has([data-rail-space-id]) > .cengel-rail-item > [data-rail-unread="spaces"] {
  display: none !important;
}

.cengel-mention--all {
  cursor: default;
  background: transparent;
  color: #dc2626;
  font-weight: 400;
}

.dark .cengel-mention--all {
  background: transparent;
  color: #f87171;
}

/* space channel intro — feed basi hos geldin blogu - 24.06.2026 21:15 */

/* kanal intro aksiyon kartlari — aciklama, izinler, webhook - 22.07.2026 20:14 */

/* kanal intro karsilama onizlemesi — gercek mesaj karti gorunumu - 22.07.2026 20:20 */

/* sistem mesajlari — sola yasli, satir ici tarih damgasi, actor hover - 16.07.2026 06:24 */

/* system flagli yazar mesajlari — sadece sol serit, #02ffe1 - 22.07.2026 05:29 */

.ann-card--system-user {
  position: relative;
  background: transparent;
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.ann-card--system-user::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #02ffe1;
}

.ann-card--system-user:hover {
  background: transparent;
}

.dark .ann-card--system-user {
  background: transparent;
}

.dark .ann-card--system-user:hover {
  background: transparent;
}

/* system + mention ayni anda — cyan serit kazansin - 22.07.2026 05:29 */

.ann-card--system-user.ann-card--mentioned {
  background: transparent;
}

.ann-card--system-user.ann-card--mentioned::before {
  background: #02ffe1;
}

.ann-card--system-user.ann-card--mentioned:hover {
  background: transparent;
}

.dark .ann-card--system-user.ann-card--mentioned {
  background: transparent;
}

.dark .ann-card--system-user.ann-card--mentioned:hover {
  background: transparent;
}

/* root mesaj alti yanit kutusu — plan formu - 05.07.2026 07:30 */

.reply-starter-wrap {
  margin-top: 8px;
}

.reply-starter {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.reply-starter:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.reply-starter__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
}

.reply-starter__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reply-starter__preview {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground, #000);
  word-break: break-word;
}

.reply-starter__meta {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

/* kanal yanit split-pane — sol kanal / sag yanit - 05.07.2026 07:05 */

.ann-page--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
}

.ann-page--split > .ann-feed-pane,
.ann-page--split > .ann-reply-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ann-reply-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

.ann-reply-pane[hidden] {
  display: none !important;
}

.ann-reply-pane .ann-feed-pane {
  flex: 1;
  min-height: 0;
}

.ann-reply-pane__header {
  flex-shrink: 0;
  position: relative;
  padding-right: calc(var(--account-sidebar-inner-x, 12px) + 30px + 8px);
  overflow: visible;
}

.ann-reply-pane__header.space-members-panel__header {
  overflow: visible;
}

.ann-reply-pane__head {
  flex: 1;
  min-width: 0;
}

.ann-reply-pane__meta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-reply-pane__actions {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 6px;
  z-index: var(--z-cengel-context, 10080);
}

.ann-reply-pane__actions .cengel-menu.cengel-menu--anchored {
  z-index: var(--z-cengel-context, 10080);
}

.ann-reply-pane__close {
  position: absolute;
  right: var(--account-sidebar-inner-x, 12px);
  top: 50%;
  transform: translateY(-50%);
}

.ann-card--reply-root .ann-card__hover-bar [data-msg-reply] {
  display: none;
}

.ann-reply-pane .ann-card:not(.ann-card--reply-root) .ann-card__hover-bar [data-msg-reply] {
  display: none;
}

.ann-page--split .ann-feed-pane--dimmed,
.ann-page--split .ann-reply-pane--dimmed {
  opacity: 0.58;
  transition: opacity 140ms ease-out;
}

.ann-page--split .ann-feed-pane--focused,
.ann-page--split .ann-reply-pane--focused {
  opacity: 1;
}

/* mesaj/bookmark gorsel — dinamik boyut, loader = medya kutusu - 14.07.2026 09:27 */

/* dosya karti — slack/whatsapp tarzı pdf onizleme - 20.07.2026 20:09 */

/* cengel-video-player — kabuk, video, overlay - 16.07.2026 02:13 */

/* cengel-video-player — kontrol bari, scrubber, butonlar - 16.07.2026 00:43 */

/* mesaj sesli mesaj oynatici — soundcloud tarzi dalga - 05.08.2026 00:08 */

/* ann-channel-card.css - 24.06.2026 17:45 */

/* ann-markdown — mesaj icerik tipografi (code/pre/del/strong) - 16.07.2026 04:38 */

/* mesaj kod blogu — satir numaralari - 16.07.2026 06:49 */

/* ann-compose.css - 24.06.2026 17:45 */

/* kanal webhook modali — genis split layout + empty - 16.07.2026 13:19 */

/* kanal webhook — full-width ayar formu + token - 16.07.2026 13:28 */

/* messages dm page shell + empty + intro - 22.07.2026 04:15 */

/* messages mobile list↔detail + context drawer - 09.08.2026 08:45 */

/* yeni mesaj modal — sabit boy, liste, bos durum - 03.08.2026 08:10 */

/* messages sidebar — shell + toolbar + scroll liste - 03.08.2026 05:42 */

/* messages sidebar — dm satir / unread / sistem rozeti - 03.08.2026 04:12 */

/* messages sidebar — bos sohbet / skeleton yukleniyor - 15.08.2026 15:42 */

/* bookmarks sayfasi stilleri — pinterest tarzi masonry feed - 15.08.2026 16:10 */

/* bookmark koleksiyon sidebar, serit, modal - 18.08.2026 21:40 */

/* bookmark koleksiyon kaydetme / duzenleme modal - 16.08.2026 13:50 */

/* bookmarks giris — bleed hero icinde dikey yigin + url compose - 15.08.2026 15:45 */

/* mesaj bookmark karti — gomulu ann-card frame - 17.07.2026 01:08 */

/* link bookmark karti — ortak kart ritmine uyar, tip-ozel override yok - 12.07.2026 20:46 */

/* bookmark karti meta — kaydedilme + paylasan footer - 17.07.2026 01:08 */

/* games sidebar — messages ile ayni 320px shell + oyun listesi - 30.07.2026 11:50 */

/* games hub/play mobile — sidebar via context drawer - 09.08.2026 08:45 */

/* spaces sidebar drawer + members overlay - 09.08.2026 08:45 */

/* wall bookmarks spark social auth page surfaces - 09.08.2026 08:35 */

/* games hub — arcade / store layout - 25.07.2026 23:55 */

/* games hub — oyuncu profil gamer card - 25.07.2026 23:55 */

/* games hub — store tile kartlari - 25.07.2026 23:55 */

/* games hub — featured hero banner - 26.07.2026 00:05 */

/* games hub — basarim 2 sira grid - 25.07.2026 23:58 */

/* oyun play shell — full-bleed stage - 25.07.2026 07:55 */

/* oyun play alt toolbar — sol / orta / sag - 25.07.2026 21:20 */

/* oyun detay modal — shell + hero + cta - 26.07.2026 00:55 */

/* oyun detay modal — xp + basarim bloklari - 26.07.2026 01:30 */

/* oyun tercih kartlari — hub store dili - 26.07.2026 00:50 */

/* seviye yukselme kutlama modal - 26.07.2026 06:16 */

.game-level-up {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.game-level-up.hidden {
  display: none;
}

.game-level-up__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #0a0a0c;
  opacity: 0.78;
}

.game-level-up__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  pointer-events: none;
}

.game-level-up__panel {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(calc(26rem + 110px), calc(100vw - 2rem));
  padding: 2.25rem 0 1.75rem;
  border-radius: 20px;
  border: 1px solid #e5e5e5;
  background-color: #f0f0f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23d4d4d4'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.game-level-up--open .game-level-up__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.dark .game-level-up__panel {
  border-color: #2a2a30;
  background-color: #121216;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%232a2a30'/%3E%3C/svg%3E");
}

.game-level-up__brand,
.game-level-up__title,
.game-level-up__meta,
.game-level-up__actions {
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

.game-level-up__brand {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
}

html.dark .game-level-up__brand {
  color: #a1a1aa;
}

.game-level-up__title {
  margin: 0 0 0.85rem;
  font-family: "Climate Crisis", Arial, sans-serif;
  font-size: clamp(2.1rem, 8vw, 2.85rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #171717;
  font-variation-settings: "YEAR" 1979;
}

html.dark .game-level-up__title {
  color: #fafafa;
}

.game-level-up__actions {
  width: 100%;
  margin-top: 0.5rem;
}

/* cta chrome: cengel-btn--block — legacy dismiss removed - 02.08.2026 00:05 */

/* level badge — honk, hero slot (eski star yeri) - 26.07.2026 06:16 */

.game-level-up__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 0.5rem;
  width: 100%;
}

.game-level-up__level-badge {
  margin: 0;
  box-sizing: border-box;
  min-width: 6.5rem;
  min-height: 6.5rem;
  padding: 0.4rem 0.55rem;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Honk", Arial, sans-serif;
  font-size: clamp(2.75rem, 10vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-variation-settings: "MORF" 15;
  font-variant-numeric: tabular-nums;
  animation: game-level-up-badge-float 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html.dark .game-level-up__level-badge {
  border-color: #3f3f46;
  background: #18181b;
}

/* seviye yildiz roadmap — level up modal - 26.07.2026 06:17 */

.game-level-up__roadmap {
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 1.35rem 2rem 1.4rem;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background: rgba(247, 247, 247, 0.75);
  box-sizing: border-box;
}

html.dark .game-level-up__roadmap {
  border-top-color: #2a2a30;
  border-bottom-color: #2a2a30;
  background: rgba(22, 22, 26, 0.75);
}

.game-level-up__roadmap-title {
  margin: 0 0 0.85rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #737373;
}

html.dark .game-level-up__roadmap-title {
  color: #a1a1aa;
}

.game-level-up__roadmap-body {
  position: relative;
}

/* tek cizgi — ikon kutularinin arkasinda, kutular opak - 26.07.2026 05:00 */

.game-level-up__roadmap-line {
  position: absolute;
  top: 24px;
  left: calc(12.5% + 8px);
  right: calc(12.5% + 8px);
  height: 2px;
  background: #e5e5e5;
  z-index: 0;
  pointer-events: none;
}

html.dark .game-level-up__roadmap-line {
  background: #3f3f46;
}

.game-level-up__roadmap-track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: start;
}

.game-level-up__road-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.game-level-up__road-rail {
  display: none;
}

.game-level-up__road-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  background: #f7f7f7;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

html.dark .game-level-up__road-icon {
  border-color: #3f3f46;
  background: #16161a;
}

.game-level-up__road-icon img {
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 200ms ease, filter 200ms ease;
}

.game-level-up__road-name {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #171717;
}

html.dark .game-level-up__road-name {
  color: #f4f4f5;
}

.game-level-up__road-range {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: #737373;
}

html.dark .game-level-up__road-range {
  color: #a1a1aa;
}

.game-level-up__road-node[data-state="locked"] .game-level-up__road-icon {
  border-color: #e8e8e8;
  background: #f7f7f7;
}

html.dark .game-level-up__road-node[data-state="locked"] .game-level-up__road-icon {
  border-color: #2a2a30;
  background: #16161a;
}

.game-level-up__road-node[data-state="locked"] .game-level-up__road-icon img {
  opacity: 0.28;
  filter: grayscale(1);
}

.game-level-up__road-node[data-state="locked"] .game-level-up__road-name,
.game-level-up__road-node[data-state="locked"] .game-level-up__road-range {
  color: #c4c4c4;
}

html.dark .game-level-up__road-node[data-state="locked"] .game-level-up__road-name,
html.dark .game-level-up__road-node[data-state="locked"] .game-level-up__road-range {
  color: #52525b;
}

.game-level-up__road-node[data-state="unlocked"] .game-level-up__road-icon {
  border-color: #d4d4d4;
  background: #f7f7f7;
}

html.dark .game-level-up__road-node[data-state="unlocked"] .game-level-up__road-icon {
  border-color: #52525b;
  background: #16161a;
}

.game-level-up__road-node[data-state="current"] .game-level-up__road-icon {
  border-color: #171717;
  background: #f7f7f7;
  transform: scale(1.08);
}

html.dark .game-level-up__road-node[data-state="current"] .game-level-up__road-icon {
  border-color: #fafafa;
  background: #16161a;
}

.game-level-up--open .game-level-up__road-node {
  animation: game-level-up-road-in 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.game-level-up--open .game-level-up__road-node:nth-child(1) {
  animation-delay: 60ms;
}

.game-level-up--open .game-level-up__road-node:nth-child(2) {
  animation-delay: 110ms;
}

.game-level-up--open .game-level-up__road-node:nth-child(3) {
  animation-delay: 160ms;
}

.game-level-up--open .game-level-up__road-node:nth-child(4) {
  animation-delay: 210ms;
}

@keyframes game-level-up-road-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-level-up--open .game-level-up__road-node {
    animation: none;
  }

  .game-level-up__road-node[data-state="current"] .game-level-up__road-icon {
    transform: none;
  }
}

/* level up motion + confetti layer - 26.07.2026 06:15 */

.game-level-up__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

@keyframes game-level-up-badge-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-level-up__panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .game-level-up__level-badge {
    animation: none;
  }
}

/* wordle — full-bleed play; klavye altta - 25.07.2026 06:50 */

/* solitaire — full-bleed board; toolbar games-play.css - 25.07.2026 08:40 */

/* solitaire board — pad + yigin tasma sikistirma - 25.07.2026 08:10 */

/* solitaire ayarlar dropdown — toolbar cark - 25.07.2026 08:35 */

/* chess — board left + side panel right - 25.07.2026 21:40 */

.chess-page {
  background: #f4f2ee;
  /* header/toolbar ile board arasi ayni gutter - 25.07.2026 21:40 */
  --chess-gutter: 0.75rem;
  --chess-side-w: 18.5rem;
  --chess-stage-gap: 1rem;
}

:root.dark .chess-page,
html.dark .chess-page {
  background: #0f0f13;
}

.chess-page__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: var(--chess-gutter);
  container-type: size;
}

.chess-layout {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.chess-stage {
  display: flex;
  align-items: stretch;
  gap: var(--chess-stage-gap);
  /* cqh zaten body padding sonrasi alan; ust/alt esit - 25.07.2026 21:40 */
  height: min(
    100cqh,
    calc(100cqw - var(--chess-side-w) - var(--chess-stage-gap))
  );
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.chess-board-area {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
}

.chess-board-area > .chess-status {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}

.chess-board-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.chess-board--thinking {
  opacity: 0.94;
}

.chess-board__sq {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.chess-board__sq:disabled {
  cursor: default;
}

.chess-board__sq--target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 1;
}

.chess-board__sq--capture::after {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  inset: 6%;
  transform: none;
  border-radius: 4px;
  background: transparent;
  border: 3px solid rgba(0, 0, 0, 0.28);
}

.chess-board__coord {
  position: absolute;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  opacity: 0.72;
}

.chess-board__coord--file {
  right: 0.22rem;
  bottom: 0.18rem;
}

.chess-board__coord--rank {
  left: 0.22rem;
  top: 0.18rem;
}

.chess-board__piece {
  position: absolute;
  inset: calc(5% + 2px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.chess-board__piece[data-draggable='1'] {
  cursor: grab;
}

.chess-board__piece[data-draggable='1']:active {
  cursor: grabbing;
}

.chess-board__piece--dragging {
  opacity: 0.28;
}

.chess-board__piece-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.chess-board__piece-float {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: grabbing;
}

.chess-board__piece-float img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.chess-page .game-play__close {
  top: var(--chess-gutter);
  right: var(--chess-gutter);
}

@media (max-width: 720px) {
  .chess-stage {
    flex-direction: column;
    height: auto;
    max-height: 100%;
    width: 100%;
    flex: 1 1 0%;
    min-height: 0;
  }

  .chess-board-area {
    width: min(100%, 100cqw);
    height: auto;
    max-height: 58%;
    aspect-ratio: 1 / 1;
    align-self: center;
  }

  .chess-side {
    flex: 1 1 0%;
    width: 100%;
    min-height: 10rem;
  }
}

/* chess board renk temalari — data-theme - 25.07.2026 20:35 */

.chess-board {
  --chess-light: #e8eddf;
  --chess-dark: #769656;
  --chess-last-light: #f5f582;
  --chess-last-dark: #baca2b;
  --chess-selected: #f6f669;
  --chess-check: #e35d6a;
  --chess-coord-light: #769656;
  --chess-coord-dark: #e8eddf;
}

.chess-board[data-theme='brown'] {
  --chess-light: #f0d9b5;
  --chess-dark: #b58863;
  --chess-last-light: #f5ec8a;
  --chess-last-dark: #c9a227;
  --chess-selected: #f6e05e;
  --chess-check: #e35d6a;
  --chess-coord-light: #b58863;
  --chess-coord-dark: #f0d9b5;
}

.chess-board[data-theme='blue'] {
  --chess-light: #cdd5e0;
  --chess-dark: #6f89a0;
  --chess-last-light: #c5d4ef;
  --chess-last-dark: #7a9bc8;
  --chess-selected: #a8c4f0;
  --chess-check: #e35d6a;
  --chess-coord-light: #6f89a0;
  --chess-coord-dark: #cdd5e0;
}

.chess-board[data-theme='purple'] {
  --chess-light: #e4d9ec;
  --chess-dark: #7d6b9a;
  --chess-last-light: #e8d4f5;
  --chess-last-dark: #9b7bb8;
  --chess-selected: #d4b8f0;
  --chess-check: #e35d6a;
  --chess-coord-light: #7d6b9a;
  --chess-coord-dark: #e4d9ec;
}

.chess-board[data-theme='gray'] {
  --chess-light: #e4e4e7;
  --chess-dark: #71717a;
  --chess-last-light: #f4f4f5;
  --chess-last-dark: #a1a1aa;
  --chess-selected: #d4d4d8;
  --chess-check: #e35d6a;
  --chess-coord-light: #71717a;
  --chess-coord-dark: #e4e4e7;
}

.chess-board__sq {
  background: var(--chess-light);
}

.chess-board__sq--dark {
  background: var(--chess-dark);
}

.chess-board__sq--selected {
  background: var(--chess-selected) !important;
}

.chess-board__sq--light.chess-board__sq--last {
  background: var(--chess-last-light);
}

.chess-board__sq--dark.chess-board__sq--last {
  background: var(--chess-last-dark);
}

.chess-board__sq--check {
  background: var(--chess-check) !important;
}

.chess-board__sq--light .chess-board__coord {
  color: var(--chess-coord-light);
}

.chess-board__sq--dark .chess-board__coord {
  color: var(--chess-coord-dark);
}

/* chess status pill + thinking dots - 25.07.2026 18:33 */

.chess-status {
  margin: 0;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chess-status__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #ddd8cf;
  background: #fffefb;
  color: #3f3a34;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

:root.dark .chess-status__pill,
html.dark .chess-status__pill {
  background: #1c1c24;
  border-color: #3f3f46;
  color: #e4e4e7;
}

.chess-status--thinking .chess-status__pill {
  border-color: #c4b5a0;
  color: #5c5348;
}

:root.dark .chess-status--thinking .chess-status__pill,
html.dark .chess-status--thinking .chess-status__pill {
  border-color: #52525b;
  color: #d4d4d8;
}

.chess-status--outcome .chess-status__pill {
  border-color: #171717;
  background: #171717;
  color: #fafafa;
}

:root.dark .chess-status--outcome .chess-status__pill,
html.dark .chess-status--outcome .chess-status__pill {
  border-color: #e4e4e7;
  background: #e4e4e7;
  color: #18181b;
}

.chess-status__dots {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}

.chess-status__dots span {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: chess-dot-pulse 1.05s ease-in-out infinite;
}

.chess-status__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.chess-status__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chess-dot-pulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chess-status__dots span {
    animation: none;
    opacity: 0.7;
  }
}

/* chess sag panel — rakip + hamleler + sen - 25.07.2026 21:40 */

.chess-side {
  flex: 0 0 var(--chess-side-w, 18.5rem);
  width: var(--chess-side-w, 18.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* board ile ayni ust/alt hiza; gutter body padding - 25.07.2026 21:40 */
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  overflow: hidden;
  color: var(--foreground);
}

.chess-player {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.chess-player--you {
  border-bottom: 0;
  border-top: 1px solid var(--border);
}

.chess-player__avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
}

.chess-player__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chess-player__name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chess-player__meta {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chess-player__handle,
.chess-player__meta [data-chess-you-meta],
.chess-player__meta [data-chess-opponent-meta] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chess-player__sep {
  flex-shrink: 0;
  opacity: 0.55;
}

.chess-player__meta:empty {
  display: none;
}

.chess-moves {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);
}

.chess-moves__scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.chess-moves__empty {
  margin: 0;
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.chess-moves__row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 1fr;
  align-items: stretch;
  min-height: 1.85rem;
  gap: 0.15rem;
  padding: 0.1rem 0.25rem 0.1rem 0.35rem;
}

.chess-moves__row:nth-child(odd) {
  background: transparent;
}

.chess-moves__row:nth-child(even) {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.chess-moves__num {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.chess-moves__cell {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  margin: 0.1rem 0;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.chess-moves__cell--empty {
  pointer-events: none;
}

.chess-moves__cell:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.chess-moves__cell--active {
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
}

.chess-moves__cell--active:hover {
  background: color-mix(in srgb, var(--foreground) 18%, transparent);
}

.chess-moves__piece {
  width: 1rem;
  height: 1rem;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

.chess-moves__san {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .chess-side {
    flex: 1 1 0%;
    width: 100%;
  }
}

/* chess ayarlar dropdown — board rengi + ses - 25.07.2026 20:35 */

/* chess promote + history overlay - 25.07.2026 18:33 */

.chess-promote {
  position: absolute;
  inset: auto 0 18%;
  margin: 0 auto;
  width: min(100%, 300px);
  padding: 0.85rem 0.9rem;
  background: #fffefb;
  border: 1px solid #ddd8cf;
  border-radius: 12px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}

:root.dark .chess-promote,
html.dark .chess-promote {
  background: #1c1c24;
  border-color: #3f3f46;
}

.chess-promote__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b645c;
}

:root.dark .chess-promote__label,
html.dark .chess-promote__label {
  color: #a1a1aa;
}

.chess-promote__row {
  display: flex;
  gap: 0.4rem;
}

.chess-promote__btn {
  width: 52px;
  height: 52px;
  padding: 5px;
  border: 1px solid #ddd8cf;
  border-radius: 10px;
  background: #f4f2ee;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.chess-promote__btn:hover,
.chess-promote__btn:focus-visible {
  background: #e8eddf;
  border-color: #769656;
  outline: none;
}

:root.dark .chess-promote__btn,
html.dark .chess-promote__btn {
  background: #27272a;
  border-color: #3f3f46;
}

:root.dark .chess-promote__btn:hover,
:root.dark .chess-promote__btn:focus-visible,
html.dark .chess-promote__btn:hover,
html.dark .chess-promote__btn:focus-visible {
  background: #3f3f46;
  border-color: #769656;
}

.chess-promote__btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.chess-history-panel {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  background: #fffefb;
  border: 1px solid #ddd8cf;
  border-radius: 14px;
  overflow: hidden;
}

:root.dark .chess-history-panel,
html.dark .chess-history-panel {
  background: #18181b;
  border-color: #3f3f46;
}

.chess-history-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #ddd8cf;
}

:root.dark .chess-history-panel__head,
html.dark .chess-history-panel__head {
  border-bottom-color: #3f3f46;
}

.chess-history-panel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}

.chess-history-panel__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  padding: 0.3rem;
  border-radius: 8px;
}

.chess-history-panel__close:hover {
  background: #f4f2ee;
}

:root.dark .chess-history-panel__close:hover,
html.dark .chess-history-panel__close:hover {
  background: #27272a;
}

.chess-history-panel__list {
  list-style: none;
  margin: 0;
  padding: 0.55rem;
  overflow: auto;
  flex: 1;
}

.chess-history-panel__empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: #71717a;
  font-size: 0.875rem;
}

.chess-history-panel__btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.chess-history-panel__btn:hover {
  background: #f4f2ee;
  border-color: #ddd8cf;
}

:root.dark .chess-history-panel__btn:hover,
html.dark .chess-history-panel__btn:hover {
  background: #27272a;
  border-color: #3f3f46;
}

.chess-history-panel__outcome {
  font-weight: 650;
  font-size: 0.875rem;
}

.chess-history-panel__meta {
  font-size: 0.75rem;
  color: #71717a;
}

/* snake — grass board, viewport cells, overlays - 25.07.2026 20:03 */

/* super responsive shell + page chrome - 21.07.2026 13:55 */

/* super campaign counters - 29.09.2026 13:50 */

/* super dashboard — shell + health + icons - 22.07.2026 01:02 */

/* super dashboard — colored stats + launch - 22.07.2026 01:02 */

/* super shared filtre cubugu - 21.07.2026 02:45 */

/* super content loader — initial-loader bar dili - 21.07.2026 03:10 */

/* super users table — profile / flags / joined / badges / gear - 21.07.2026 23:46 */

/* super user detail modal — layout + list avatars - 22.07.2026 05:04 */

.super-user-detail .cengel-modal__panel {
  max-width: 36rem;
}

.super-user-detail__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-user-detail__user-avatar-fallback {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  flex-shrink: 0;
}

.super-user-detail__space-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-user-detail__space-thumb-fallback {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  flex-shrink: 0;
}

.super-user-detail__section {
  margin: 0;
}

.super-user-detail__section + .super-user-detail__section {
  margin-top: 1.25rem;
}

.super-user-detail__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-user-detail__section-title-row .super-user-detail__section-title {
  margin: 0;
}

.super-user-detail__section-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.super-user-detail__list {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 2.5rem;
}

.super-user-detail__list > * + * {
  border-top: 1px solid var(--border);
}

.super-user-detail__statline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.super-user-detail__statline strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.super-user-detail__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
}

.super-user-detail__row--flush {
  padding: 0;
}

.super-user-detail__row-main {
  min-width: 0;
  flex: 1;
}

.super-user-detail__row-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-user-detail__row-sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.super-user-detail__row-side {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.super-user-detail__history-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.super-user-detail__history-remove:hover,
.super-user-detail__history-remove:focus-visible {
  color: var(--ink);
  background: var(--surface-subtle);
}

.super-user-detail__history-remove:disabled {
  opacity: 0.6;
  cursor: wait;
}

.super-user-detail__empty {
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.super-user-detail__bar {
  margin-top: 0.5rem;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background: var(--border);
  overflow: hidden;
}

.super-user-detail__bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--ink);
}

.super-user-detail__kv {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.super-user-detail__kv-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  align-items: start;
}

.super-user-detail__kv-row + .super-user-detail__kv-row {
  border-top: 1px solid var(--border);
}

.super-user-detail__kv-key {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.125rem;
}

.super-user-detail__kv-val {
  font-size: 0.875rem;
  color: var(--ink);
  word-break: break-all;
}

/* super user detail header avatar controls - 22.07.2026 04:41 */

.super-user-detail__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: block;
}

.super-user-detail__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.super-user-detail__avatar-btn {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  overflow: hidden;
}

.super-user-detail__avatar-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.super-user-detail__avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 160ms ease;
}

.super-user-detail__avatar-btn:hover .super-user-detail__avatar-overlay,
.super-user-detail__avatar-btn:focus-visible .super-user-detail__avatar-overlay {
  opacity: 1;
}

.super-user-detail__avatar-remove {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.super-user-detail__avatar-remove:hover,
.super-user-detail__avatar-remove:focus-visible {
  color: var(--ink);
  background: var(--surface-subtle);
}

.super-user-detail__avatar-remove:disabled {
  opacity: 0.6;
  cursor: wait;
}

.super-user-detail__avatar-remove.hidden {
  display: none;
}

/* super users flags popover — flags int aciklamasi - 21.07.2026 23:46 */

/* super spaces table — space / status / members / channels / gear - 22.07.2026 00:21 */

/* super space detail modal layout - 22.07.2026 00:21 */

.super-space-detail__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-space-detail__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-space-detail__user-avatar-fallback {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  flex-shrink: 0;
}

.super-space-detail__section {
  margin: 0;
}

.super-space-detail__section + .super-space-detail__section {
  margin-top: 1.25rem;
}

.super-space-detail__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-space-detail__section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.super-space-detail__section-title-row .super-space-detail__section-title {
  margin: 0;
}

.super-space-detail__section-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.super-space-detail__list {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 2.5rem;
}

.super-space-detail__list > * + * {
  border-top: 1px solid var(--border);
}

.super-space-detail__empty {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-align: center;
}

.super-space-detail__channel {
  padding: 0.75rem;
}

.super-space-detail__channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.super-space-detail__channel-type {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-space-detail__kv {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.super-space-detail__kv-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  align-items: start;
}

.super-space-detail__kv-row + .super-space-detail__kv-row {
  border-top: 1px solid var(--border);
}

.super-space-detail__kv-key {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.125rem;
}

.super-space-detail__kv-val {
  font-size: 0.875rem;
  color: var(--ink);
  word-break: break-all;
}

.super-space-detail__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  width: 100%;
  text-align: left;
}

.super-space-detail__row-main {
  min-width: 0;
  flex: 1;
}

.super-space-detail__row-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-space-detail__row-sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* super webhooks table — webhook / space / messages / last / gear - 22.07.2026 00:31 */

/* super webhook detail modal layout - 22.07.2026 00:31 */

.super-webhook-detail__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-webhook-detail__section {
  margin: 0;
}

.super-webhook-detail__section + .super-webhook-detail__section {
  margin-top: 1.25rem;
}

.super-webhook-detail__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-webhook-detail__section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.super-webhook-detail__section-title-row .super-webhook-detail__section-title {
  margin: 0;
}

.super-webhook-detail__section-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.super-webhook-detail__list {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 2.5rem;
}

.super-webhook-detail__list > * + * {
  border-top: 1px solid var(--border);
}

.super-webhook-detail__empty {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-align: center;
}

.super-webhook-detail__kv {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.super-webhook-detail__kv-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  align-items: start;
}

.super-webhook-detail__kv-row + .super-webhook-detail__kv-row {
  border-top: 1px solid var(--border);
}

.super-webhook-detail__kv-key {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.125rem;
}

.super-webhook-detail__kv-val {
  font-size: 0.875rem;
  color: var(--ink);
  word-break: break-all;
}

.super-webhook-msg {
  padding: 0.75rem;
}

.super-webhook-msg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.super-webhook-msg__date {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.super-webhook-msg__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}

/* super oauth clients table - 22.07.2026 00:34 */

/* super oauth client detail modal - 22.07.2026 00:34 */

.super-oauth-detail__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-oauth-detail__section {
  margin: 0;
}

.super-oauth-detail__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-oauth-detail__kv {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.super-oauth-detail__kv-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  align-items: start;
}

.super-oauth-detail__kv-row + .super-oauth-detail__kv-row {
  border-top: 1px solid var(--border);
}

.super-oauth-detail__kv-key {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.125rem;
}

.super-oauth-detail__kv-val {
  font-size: 0.875rem;
  color: var(--ink);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* super products table - 22.07.2026 00:40 */

/* super reports list — target / reporter parties - 21.07.2026 22:20 */

/* super reports — in-space context row - 21.07.2026 22:50 */

/* super logs tabs + list - 21.07.2026 02:55 */

/* developers-shell-1 — hud controls + shell chrome - 16.07.2026 17:30 */

/* developers-shell-2 — doc typography + code shell - 16.07.2026 18:40 */

/* developers-shell-3 — code copy + prism tokens - 16.07.2026 18:30 */

/* developers-shell-http — http/uri prism token colors + presence swatches - 16.07.2026 19:40 */

/* developers-shell-4 — docs tables - 16.07.2026 18:32 */

/* developers-shell-5 — futuristic chrome + mobile - 16.07.2026 16:17 */

/* developers-shell-6 — sidebar nav + drawer + footer - 16.07.2026 17:40 */

/* developers-shell-7 — hud header - 15.08.2026 18:50 */

/* developers-shell-8 — interaction polish (futurist, flat) - 16.07.2026 18:16 */

/* developers-shell-9 — flat doc sections + chips - 16.07.2026 18:55 */

/* developers-shell-10 — footer pin + columns (header chrome) - 16.07.2026 20:00 */

/* developers-shell-11 — footer base + custom scrollbars - 16.07.2026 20:05 */

/* restrained aero layer — after feature css; scoped away from .dev-shell - 14.08.2026 20:05 */

/* restrained aero tokens — product/auth/super/widget scope only - 14.08.2026 23:55 */

/* :root / .dark eco tokenlarini yener — header camla ayni ritim - 14.08.2026 23:55 */

html.aero-ui {
  --eco-header-bg: var(--aero-glass-strong);
  --eco-header-border: var(--border-low);
  --eco-btn-hover-bg: rgba(90, 140, 180, 0.1);
  --eco-btn-active-bg: rgba(90, 140, 180, 0.16);
  --eco-products-bg: var(--aero-glass);
  --eco-products-border: var(--border-low);
  --eco-products-hover-bg: var(--aero-glass-strong);
  --eco-products-hover-border: var(--border-low);
  --eco-products-open-bg: var(--aero-glass-strong);
  --eco-products-open-border: var(--border-low);
  --eco-user-bg: var(--aero-glass);
  --eco-user-border: var(--border-low);
  --eco-user-hover-bg: var(--aero-glass-strong);
  --eco-user-hover-border: var(--border-low);
  --eco-user-open-bg: var(--aero-glass-strong);
  --eco-user-open-border: var(--border-low);
  --eco-search-bg: var(--aero-glass);
  --eco-search-border: var(--border-low);
  --eco-search-focus-bg: var(--aero-glass-strong);
  --eco-search-focus-border: var(--border-low);
  --eco-kbd-bg: var(--aero-glass);
  --eco-kbd-border: var(--border-low);
}

html.dark.aero-ui {
  --eco-header-bg: rgba(36, 42, 52, 0.82);
  --eco-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --eco-btn-active-bg: rgba(255, 255, 255, 0.12);
  --eco-products-hover-bg: rgba(255, 255, 255, 0.1);
  --eco-products-open-bg: rgba(255, 255, 255, 0.12);
  --eco-user-hover-bg: rgba(255, 255, 255, 0.1);
  --eco-user-open-bg: rgba(255, 255, 255, 0.12);
  --eco-search-bg: rgba(255, 255, 255, 0.1);
  --eco-search-focus-bg: rgba(255, 255, 255, 0.14);
  --eco-kbd-bg: rgba(255, 255, 255, 0.1);
}

/* restrained aero surfaces — canvas, glass panels, cards, wells - 15.08.2026 18:50 */

/* restrained aero controls — buttons, fields, toggles - 22.08.2026 23:15 */

/* restrained aero motion — press/highlight; respect reduced-motion - 14.08.2026 20:00 */

/* aero auth surface — aurora canvas + frosted card - 14.08.2026 20:05 */

/* aero chrome — rail tiles, header chips, toasts - 15.08.2026 01:55 */

/* cam tile'lar yatay rail pad ile ayni ritim — utilities gap'i yener - 14.08.2026 23:20 */

html.aero-ui #account-nav-rail,
html.aero-ui .account-nav-rail-bottom {
  gap: var(--aero-rail-gap);
}

/* header/search/sidebar: utilities bg-[var(--eco-*)] camı ezmesin - 14.08.2026 23:55 */

html.aero-ui .eco-header,
html.aero-ui .account-mobile-header {
  background-color: transparent;
  background-image: var(--gradient-glass);
  border-bottom-color: var(--border-low);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui #account-static-sidebar {
  background-color: transparent;
  background-image: var(--gradient-glass);
  border-right-color: var(--border-low);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .eco-header-search {
  background-color: transparent;
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
}

html.aero-ui .eco-header-search:focus-within {
  background-image: none;
  background-color: var(--aero-glass-strong);
  border-color: var(--border-low);
}

html.aero-ui #eco-products-button {
  background-color: transparent;
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
}

html.aero-ui #eco-products-button:hover,
html.aero-ui #eco-products-button[aria-expanded="true"] {
  background-image: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.dark.aero-ui #eco-products-button:hover,
html.dark.aero-ui #eco-products-button[aria-expanded="true"] {
  filter: brightness(1.12);
}

html.aero-ui .eco-header-action__btn,
html.aero-ui .eco-header-user__btn {
  background-color: transparent;
  background-image: var(--gradient-btn-secondary);
  border: 1px solid var(--border-low);
}

/* aero cengel-modal shell + domain panels; radii dokunma - 14.08.2026 23:10 */

/* aero modal interiors — layer utilities'ten sonra - 14.08.2026 23:15 */

@layer aero-modal-content {
  html.aero-ui .cengel-modal .border-border,
  html.aero-ui .cengel-modal .divide-border > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-low);
  }

  html.aero-ui .cengel-modal .border.bg-background:not(.rounded-full) {
    background-color: transparent;
    background-image: var(--gradient-glass);
    border-color: var(--border-low);
    box-shadow: var(--shadow-inset-bevel);
  }

  html.aero-ui .cengel-modal .bg-surface-subtle {
    background-color: color-mix(in srgb, var(--aero-aqua) 8%, transparent);
  }

  html.aero-ui .cengel-modal .hover\:bg-surface-subtle\/50:hover {
    background-color: var(--sidebar-hover-bg);
  }

  html.aero-ui .cengel-modal .theme-btn {
    background-image: var(--gradient-glass);
    border-color: var(--border-low);
    box-shadow: var(--shadow-inset-bevel);
  }

  html.aero-ui .cengel-modal .theme-btn:hover {
    border-color: var(--border-low);
    filter: brightness(1.03);
  }

  html.aero-ui .cengel-modal .theme-btn[aria-pressed="true"],
  html.aero-ui .cengel-modal .theme-btn[aria-pressed="true"]:hover {
    background-color: var(--sidebar-active-bg);
    background-image: none;
    border-color: var(--border-low);
    box-shadow: var(--shadow-elev-1), inset 0 1px 0 var(--border-highlight);
    filter: none;
  }

  html.dark.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input),
  html.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input),
  html.dark.aero-ui .cengel-modal textarea,
  html.aero-ui .cengel-modal textarea,
  html.aero-ui .cengel-modal .sp-settings-input,
  html.aero-ui .cengel-modal .rich-presence-modal__input,
  html.aero-ui .cengel-modal .rich-presence-modal__dropdown-trigger,
  html.aero-ui .cengel-modal .report-modal__reason,
  html.aero-ui .cengel-modal .space-wizard-modal__input,
  html.aero-ui .cengel-modal .space-tab-modal__input {
    background-color: var(--aero-glass);
    background-image: var(--gradient-glass);
    border-color: var(--border-low);
    box-shadow: var(--shadow-inset-bevel);
    color: var(--foreground);
    caret-color: var(--foreground);
  }

  html.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input)::-moz-placeholder, html.aero-ui .cengel-modal textarea::-moz-placeholder, html.aero-ui .cengel-modal .sp-settings-input::-moz-placeholder, html.aero-ui .cengel-modal .space-wizard-modal__input::-moz-placeholder, html.aero-ui .cengel-modal .space-tab-modal__input::-moz-placeholder {
    color: var(--ink-muted);
  }

  html.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input)::placeholder,
  html.aero-ui .cengel-modal textarea::placeholder,
  html.aero-ui .cengel-modal .sp-settings-input::placeholder,
  html.aero-ui .cengel-modal .space-wizard-modal__input::placeholder,
  html.aero-ui .cengel-modal .space-tab-modal__input::placeholder {
    color: var(--ink-muted);
  }

  html.dark.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input):focus,
  html.aero-ui .cengel-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#eco-search-input):focus,
  html.aero-ui .cengel-modal textarea:focus,
  html.aero-ui .cengel-modal .sp-settings-input:focus,
  html.aero-ui .cengel-modal .rich-presence-modal__input:focus,
  html.aero-ui .cengel-modal .rich-presence-modal__dropdown-trigger[aria-expanded="true"],
  html.aero-ui .cengel-modal .report-modal__reason:focus,
  html.aero-ui .cengel-modal .space-wizard-modal__input:focus,
  html.aero-ui .cengel-modal .space-tab-modal__input:focus {
    background-image: none;
    background-color: var(--aero-glass-strong);
    border-color: var(--border-low);
    outline: none;
  }

  html.aero-ui .cengel-modal .account-field-dropdown__option:hover,
  html.aero-ui .cengel-modal .language-picker__option:hover:not(.language-picker__option--selected) {
    background: var(--sidebar-hover-bg);
  }

  html.aero-ui .cengel-modal .sp-settings-panel,
  html.aero-ui .cengel-modal .sp-settings-list-row,
  html.aero-ui .cengel-modal .sp-settings-logo-preview,
  html.aero-ui .cengel-modal .game-start__xp-chip,
  html.aero-ui .cengel-modal .rich-presence-modal__emoji-btn {
    background: var(--gradient-glass);
    border-color: var(--border-low);
    box-shadow: var(--shadow-inset-bevel);
  }

  html.aero-ui .cengel-modal .sp-settings-panel__head,
  html.aero-ui .cengel-modal .sp-settings-subsection + .sp-settings-subsection {
    border-color: var(--border-low);
  }

  html.aero-ui .cengel-modal .sp-settings-divider {
    background-color: var(--border-low);
  }

  html.aero-ui .cengel-modal .space-wizard-logo,
  html.aero-ui .cengel-modal .space-wizard-access__option {
    background: var(--gradient-glass);
    border-color: var(--border-low);
    box-shadow: var(--shadow-inset-bevel);
  }

  html.aero-ui .cengel-modal .space-wizard-logo:hover,
  html.aero-ui .cengel-modal .space-wizard-access__option:hover {
    background: var(--gradient-glass);
    border-color: var(--border-low);
    filter: brightness(1.03);
  }

  html.aero-ui .cengel-modal .space-wizard-access__option--active,
  html.aero-ui .cengel-modal .space-wizard-access__option--active:hover {
    background: var(--sidebar-active-bg);
    border-color: var(--border-low);
    box-shadow: inset 0 1px 0 var(--border-highlight);
    filter: none;
  }

  html.aero-ui .cengel-modal .cc-checkbox:not(:has(.cc-checkbox__input:disabled)):hover .cc-checkbox__box {
    border-color: color-mix(in srgb, var(--foreground) 30%, transparent);
  }

  html.aero-ui .cengel-modal .cc-checkbox__input:checked ~ .cc-checkbox__box {
    background: var(--gradient-btn-aqua);
    border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
  }
}

/* aero spaces / boards / channel compose — radii dokunma - 14.08.2026 21:25 */

/* aero channel feed — intro / jump / reply / members; radii dokunma - 14.08.2026 21:25 */

/* aero message cards — hover bar / reacts / files / picker; radii dokunma - 14.08.2026 21:30 */

/* aero /messages — sidebar + pane + new-dm; radii dokunma - 14.08.2026 21:30 */

/* aero feed / profile / user card popover — radii dokunma - 14.08.2026 22:00 */

/* aero public profile — sidebar panel, composer, timeline - 22.08.2026 05:12 */

/* profil zemin karttan koyu; kart kenari aero token - 16.10.2026 17:40 */

html.aero-ui .social-profile-page--header .social-profile-public__panel,
html.aero-ui .social-profile-page--header .post-card,
html.aero-ui .social-profile-page--header .post-composer,
html.aero-ui .social-profile-page--header .post-timeline__empty,
html.aero-ui .social-profile-page__aside .social-profile-aside-card,
html.aero-ui .social-profile-page__aside .social-profile-showcase__section,
html.aero-ui .social-profile-page__aside .social-profile-showcase__aside {
  border-color: var(--border);
  box-shadow: var(--shadow-elev-1);
}

/* profil zemin — surface-subtle, cam yok - 16.10.2026 17:40 */

html.aero-ui.account-shell-root:has(.account-main--profile-timeline) .account-split-outer,
html.aero-ui.account-shell-root:has(.account-main--profile-timeline) .account-split__main,
html.aero-ui .account-split__scroll:has(#account-main-content.account-main--profile-timeline),
html.aero-ui #account-main-content.account-main--profile-timeline,
html.aero-ui .social-profile-page--standalone,
html.aero-ui.account-shell-root:has(.account-main--album-page) .account-split-outer,
html.aero-ui.account-shell-root:has(.account-main--album-page) .account-split__main,
html.aero-ui .account-split__scroll:has(#account-main-content.account-main--album-page),
html.aero-ui #account-main-content.account-main--album-page {
  background: var(--surface-subtle);
  background-image: none;
}

/* aero bookmarks hub — games: aero-games.css - 18.08.2026 21:40 */

/* aero /games hub + play chrome; tahta/oyun sahnesine dokunma - 15.08.2026 02:25 */

/* aero super admin shell — same tokens, restrained chrome - 14.08.2026 20:05 */

*, ::before, ::after{
  --tw-border-spacing-x:       0;
  --tw-border-spacing-y:       0;
  --tw-translate-x:       0;
  --tw-translate-y:       0;
  --tw-rotate:       0;
  --tw-skew-x:       0;
  --tw-skew-y:       0;
  --tw-scale-x:       1;
  --tw-scale-y:       1;
  --tw-pan-x:        ;
  --tw-pan-y:        ;
  --tw-pinch-zoom:        ;
  --tw-scroll-snap-strictness:       proximity;
  --tw-gradient-from-position:        ;
  --tw-gradient-via-position:        ;
  --tw-gradient-to-position:        ;
  --tw-ordinal:        ;
  --tw-slashed-zero:        ;
  --tw-numeric-figure:        ;
  --tw-numeric-spacing:        ;
  --tw-numeric-fraction:        ;
  --tw-ring-inset:        ;
  --tw-ring-offset-width:       0px;
  --tw-ring-offset-color:       #fff;
  --tw-ring-color:       rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:       0 0 #0000;
  --tw-ring-shadow:       0 0 #0000;
  --tw-shadow:       0 0 #0000;
  --tw-shadow-colored:       0 0 #0000;
  --tw-blur:        ;
  --tw-brightness:        ;
  --tw-contrast:        ;
  --tw-grayscale:        ;
  --tw-hue-rotate:        ;
  --tw-invert:        ;
  --tw-saturate:        ;
  --tw-sepia:        ;
  --tw-drop-shadow:        ;
  --tw-backdrop-blur:        ;
  --tw-backdrop-brightness:        ;
  --tw-backdrop-contrast:        ;
  --tw-backdrop-grayscale:        ;
  --tw-backdrop-hue-rotate:        ;
  --tw-backdrop-invert:        ;
  --tw-backdrop-opacity:        ;
  --tw-backdrop-saturate:        ;
  --tw-backdrop-sepia:        ;
  --tw-contain-size:        ;
  --tw-contain-layout:        ;
  --tw-contain-paint:        ;
  --tw-contain-style:        ;
}

::backdrop{
  --tw-border-spacing-x:       0;
  --tw-border-spacing-y:       0;
  --tw-translate-x:       0;
  --tw-translate-y:       0;
  --tw-rotate:       0;
  --tw-skew-x:       0;
  --tw-skew-y:       0;
  --tw-scale-x:       1;
  --tw-scale-y:       1;
  --tw-pan-x:        ;
  --tw-pan-y:        ;
  --tw-pinch-zoom:        ;
  --tw-scroll-snap-strictness:       proximity;
  --tw-gradient-from-position:        ;
  --tw-gradient-via-position:        ;
  --tw-gradient-to-position:        ;
  --tw-ordinal:        ;
  --tw-slashed-zero:        ;
  --tw-numeric-figure:        ;
  --tw-numeric-spacing:        ;
  --tw-numeric-fraction:        ;
  --tw-ring-inset:        ;
  --tw-ring-offset-width:       0px;
  --tw-ring-offset-color:       #fff;
  --tw-ring-color:       rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:       0 0 #0000;
  --tw-ring-shadow:       0 0 #0000;
  --tw-shadow:       0 0 #0000;
  --tw-shadow-colored:       0 0 #0000;
  --tw-blur:        ;
  --tw-brightness:        ;
  --tw-contrast:        ;
  --tw-grayscale:        ;
  --tw-hue-rotate:        ;
  --tw-invert:        ;
  --tw-saturate:        ;
  --tw-sepia:        ;
  --tw-drop-shadow:        ;
  --tw-backdrop-blur:        ;
  --tw-backdrop-brightness:        ;
  --tw-backdrop-contrast:        ;
  --tw-backdrop-grayscale:        ;
  --tw-backdrop-hue-rotate:        ;
  --tw-backdrop-invert:        ;
  --tw-backdrop-opacity:        ;
  --tw-backdrop-saturate:        ;
  --tw-backdrop-sepia:        ;
  --tw-contain-size:        ;
  --tw-contain-layout:        ;
  --tw-contain-paint:        ;
  --tw-contain-style:        ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  --canvas: #f6f6f7;
  --background: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f3f4f6;
  --surface-muted: #e9eaec;
  --surface-hover: #f0f1f3;
  --surface-active: #e6e8eb;
  --foreground: #18181b;
  --ink: var(--foreground);
  --ink-muted: #71717a;
  --ink-400: #a1a1aa;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-700: #3f3f46;
  --ink-900: #18181b;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --brand-50: #fafafa;
  --brand-100: #f4f4f5;
  --brand-200: #e4e4e7;
  --brand-300: #d4d4d8;
  --brand-400: #a1a1aa;
  --brand-500: #52525b;
  --brand-600: #3f3f46;
  --brand-700: #27272a;
  --brand-800: #18181b;
  --brand-900: #09090b;
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-strong: var(--brand-800);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-contrast: #ffffff;
  --link: #3859c7;
  --link-hover: #2947ad;
  --success: #18763a;
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --warning: #a85b08;
  --warning-soft: color-mix(in srgb, var(--warning) 13%, transparent);
  --danger: #c23d4b;
  --danger-hover: #a92f3d;
  --danger-soft: color-mix(in srgb, var(--danger) 11%, transparent);
  --danger-contrast: #ffffff;
  --info: #3264c8;
  --info-soft: color-mix(in srgb, var(--info) 11%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 58%, transparent);
  --backdrop: rgba(15, 23, 42, 0.46);
  --selection-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --presence-online: #22a95a;
  --presence-working: #2d7fd3;
  --presence-idle: #d28a0b;
  --presence-dnd: #df4b59;
  --presence-offline: #98a2b3;
  --cengel-scroll-size: 8px;
  --cengel-scroll-size-thin: 6px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 22%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 40%, transparent);
  --z-dropdown: 120;
  --z-board-ui: 200;
  --z-cengel-context: 10080;
  --z-popover: 10090;
  --z-user-card: 10090;
  --z-user-card-nested: 10100;
  /* emoji picker (12010) uzerinde - 16.07.2026 05:36 */
  --z-tooltip: 12020;
  /* tipografi olcegi — bir kademe yukari (13px→14px vb.) - 01.07.2026 15:00 */
  --text-3xs: 0.75rem;
  --text-2xs: 0.8125rem;
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1rem;
}

.dark {
  --canvas: #0d0d0f;
  --background: #111113;
  --surface: #161619;
  --surface-raised: #1b1b1f;
  --surface-subtle: #1d1d21;
  --surface-muted: #25252a;
  --surface-hover: #222227;
  --surface-active: #2b2b31;
  --foreground: #f4f4f5;
  --ink-muted: #a1a1aa;
  --ink-400: #71717a;
  --ink-500: #a1a1aa;
  --ink-600: #d4d4d8;
  --ink-700: #e4e4e7;
  --ink-900: #fafafa;
  --border: #2a2a2f;
  --border-strong: #3f3f46;
  --brand-50: #0f0f11;
  --brand-100: #18181b;
  --brand-200: #27272a;
  --brand-300: #3f3f46;
  --brand-400: #71717a;
  --brand-500: #a1a1aa;
  --brand-600: #e4e4e7;
  --brand-700: #f4f4f5;
  --brand-800: #fafafa;
  --brand-900: #ffffff;
  --accent-contrast: #18181b;
  --link: #8fa8ff;
  --link-hover: #b5c4ff;
  --success: #4ade80;
  --warning: #f4b942;
  --danger: #fb7185;
  --danger-hover: #fda4af;
  --danger-contrast: #2b0c13;
  --info: #7da5ff;
  --backdrop: rgba(2, 6, 15, 0.7);
  --presence-online: #4ade80;
  --presence-working: #60a5fa;
  --presence-idle: #f4b942;
  --presence-dnd: #fb7185;
  --presence-offline: #657184;
  color-scheme: dark;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--canvas);
  color: var(--foreground);
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
}

hr {
  border-color: var(--border);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--foreground);
}

::selection {
  background: var(--selection-bg);
  color: var(--foreground);
}

.dark input[type="checkbox"]:not(:checked) {
  background-color: var(--surface-subtle) !important;
  border-color: var(--border) !important;
}

.dark input[type="checkbox"]:checked {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}

.dark input[type="checkbox"]:checked::before {
  border-color: var(--accent-contrast) !important;
}

.dark .bg-brand-600 {
  color: var(--accent-contrast) !important;
}

.dark .bg-brand-600:hover {
  background-color: var(--brand-700) !important;
}

.dark .text-ink-600 {
  color: var(--ink-600) !important;
}

.dark .text-ink-500 {
  color: var(--ink-500) !important;
}

.dark .hover\:bg-ink-50:hover {
  background-color: var(--surface-subtle) !important;
}

html.cengel-theme-switch-instant,
  html.cengel-theme-switch-instant *,
  html.cengel-theme-switch-instant *::before,
  html.cengel-theme-switch-instant *::after {
  transition: none !important;
  animation: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
}

html::-webkit-scrollbar {
  width: var(--cengel-scroll-size);
  height: var(--cengel-scroll-size);
}

html::-webkit-scrollbar-track {
  background: var(--cengel-scroll-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

.cengel-logo-on-light {
  display: block;
}

.cengel-logo-on-dark {
  display: none;
}

html.dark .cengel-logo-on-light {
  display: none;
}

html.dark .cengel-logo-on-dark {
  display: block;
}

/* tek src logo-on-light (e-posta / bildirim) dark'ta acik mark - 15.08.2026 18:50 */

html.dark img[src*="logo-on-light.png"]:not(.cengel-logo-on-light) {
  filter: invert(1);
}

/* shared aero vars — applied under scope roots below - 14.08.2026 23:55 */

html.aero-ui {
  --aero-sky: #7ec8e8;
  --aero-aqua: #5bb8d4;
  --aero-aqua-deep: #3a9bb8;
  --aero-glass: rgba(255, 255, 255, 0.55);
  --aero-glass-strong: rgba(255, 255, 255, 0.78);
  --aero-specular: rgba(255, 255, 255, 0.72);
  --aero-bevel-light: rgba(255, 255, 255, 0.85);
  --aero-bevel-dark: rgba(15, 40, 60, 0.18);
  --aero-blur: 14px;
  --aero-blur-soft: 8px;
  --shadow-elev-1: 0 1px 2px rgba(20, 50, 80, 0.08), 0 4px 12px rgba(20, 50, 80, 0.06);
  --shadow-elev-2: 0 2px 4px rgba(20, 50, 80, 0.1), 0 10px 28px rgba(20, 50, 80, 0.12);
  --shadow-inset-bevel: inset 0 1px 0 var(--aero-bevel-light), inset 0 -1px 0 var(--aero-bevel-dark);
  --gradient-canvas: linear-gradient(165deg, #e8f4fb 0%, #f5f8fc 42%, #eef2f7 100%);
  --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.48) 100%);
  --gradient-btn-primary: linear-gradient(180deg, #6b2d75 0%, #4c1753 55%, #3d1250 100%);
  --gradient-btn-secondary: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  --gradient-btn-aqua: linear-gradient(180deg, #8fd4ea 0%, #5bb8d4 48%, #3a9bb8 100%);
  --surface-gloss-top: rgba(255, 255, 255, 0.55);
  --surface-gloss-bottom: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.65);
  --border-low: rgba(80, 120, 160, 0.22);
  --aero-focus-ring: color-mix(in srgb, var(--aero-aqua-deep) 55%, var(--brand-500));
  /* remap semantic tokens inside aero scopes only - 14.08.2026 23:15 */
  --background: #eef3f8;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-subtle: #e4ecf4;
  --foreground: #1a2330;
  --ink-muted: #5c6b7a;
  --ink-400: #8a9aab;
  --ink-500: #5c6b7a;
  --ink-600: #445566;
  --ink-700: #2d3a48;
  --ink-900: #0f1720;
  --border: rgba(90, 130, 170, 0.22);
  --eco-header-bg: rgba(255, 255, 255, 0.72);
  --eco-header-border: rgba(90, 130, 170, 0.18);
  --eco-btn-hover-bg: rgba(90, 140, 180, 0.1);
  --eco-btn-active-bg: rgba(90, 140, 180, 0.16);
  --eco-search-bg: rgba(255, 255, 255, 0.55);
  --eco-search-border: rgba(90, 130, 170, 0.22);
  --eco-search-focus-bg: rgba(255, 255, 255, 0.82);
  --eco-search-focus-border: rgba(60, 140, 180, 0.45);
  --account-split-main-bg: transparent;
  --sidebar-hover-bg: rgba(90, 140, 180, 0.08);
  --sidebar-active-bg: rgba(90, 140, 180, 0.14);
  --rail-hover-bg: rgba(90, 140, 180, 0.1);
  --rail-active-bg: rgba(90, 140, 180, 0.16);
  --aero-rail-gap: var(--eco-header-pad);
  --gradient-rail-fade: linear-gradient(to top, var(--aero-glass-strong), transparent);
  color-scheme: light;
}

html.dark.aero-ui {
  --aero-sky: #152030;
  --aero-aqua: #3d8fad;
  --aero-aqua-deep: #2a6a82;
  --aero-glass: rgba(12, 14, 18, 0.88);
  --aero-glass-strong: rgba(18, 20, 26, 0.94);
  --aero-specular: rgba(160, 190, 220, 0.06);
  --aero-bevel-light: rgba(180, 200, 220, 0.08);
  --aero-bevel-dark: rgba(0, 0, 0, 0.55);
  --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-elev-2: 0 2px 8px rgba(0, 0, 0, 0.55), 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-inset-bevel: inset 0 1px 0 var(--aero-bevel-light), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  --gradient-canvas: linear-gradient(165deg, #0a0b0e 0%, #0f0f13 45%, #0c0e12 100%);
  --gradient-glass: linear-gradient(180deg, rgba(28, 32, 40, 0.92) 0%, rgba(14, 16, 20, 0.96) 100%);
  --gradient-btn-primary: linear-gradient(180deg, #e8eaed 0%, #c8ccd2 55%, #a8adb6 100%);
  --gradient-btn-secondary: linear-gradient(180deg, #1c2028 0%, #12151a 100%);
  --gradient-btn-aqua: linear-gradient(180deg, #3a8aa8 0%, #2a6a82 52%, #1e5166 100%);
  --surface-gloss-top: rgba(180, 200, 220, 0.06);
  --surface-gloss-bottom: rgba(0, 0, 0, 0.28);
  --border-highlight: rgba(160, 190, 220, 0.08);
  --border-low: rgba(100, 130, 160, 0.18);
  --aero-focus-ring: color-mix(in srgb, var(--aero-aqua) 55%, #d4d4d8);
  --background: #0f0f13;
  --surface: rgba(18, 20, 26, 0.94);
  --surface-subtle: #14161c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --ink-400: #a1a1aa;
  --ink-500: #a1a1aa;
  --ink-600: #d4d4d8;
  --ink-700: #e4e4e7;
  --ink-900: #ffffff;
  --border: rgba(100, 130, 160, 0.16);
  --eco-header-bg: rgba(10, 11, 14, 0.92);
  --eco-header-border: rgba(100, 130, 160, 0.14);
  --eco-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --eco-btn-active-bg: rgba(255, 255, 255, 0.09);
  --eco-search-bg: rgba(255, 255, 255, 0.05);
  --eco-search-border: rgba(100, 130, 160, 0.16);
  --eco-search-focus-bg: rgba(255, 255, 255, 0.08);
  --eco-search-focus-border: rgba(61, 143, 173, 0.45);
  --account-split-main-bg: transparent;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --rail-hover-bg: rgba(255, 255, 255, 0.05);
  --rail-active-bg: rgba(255, 255, 255, 0.09);
  color-scheme: dark;
}

.\!container{
  width:       100% !important;
}

.container{
  width:       100%;
}

@media (min-width: 640px){
  .\!container{
    max-width:       640px !important;
  }

  .container{
    max-width:       640px;
  }
}

@media (min-width: 768px){
  .\!container{
    max-width:       768px !important;
  }

  .container{
    max-width:       768px;
  }
}

@media (min-width: 1024px){
  .\!container{
    max-width:       1024px !important;
  }

  .container{
    max-width:       1024px;
  }
}

@media (min-width: 1280px){
  .\!container{
    max-width:       1280px !important;
  }

  .container{
    max-width:       1280px;
  }
}

@media (min-width: 1536px){
  .\!container{
    max-width:       1536px !important;
  }

  .container{
    max-width:       1536px;
  }
}

.cengel-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
  overscroll-behavior: none;
}

.cengel-scroll::-webkit-scrollbar {
  width: var(--cengel-scroll-size);
  height: var(--cengel-scroll-size);
}

.cengel-scroll::-webkit-scrollbar-track {
  background: var(--cengel-scroll-track);
}

.cengel-scroll::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.cengel-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

.cengel-scroll--thin {
  --cengel-scroll-size: var(--cengel-scroll-size-thin);
}

.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.5rem 0;
}

/* scrollbar gizli — hoverda gorunur - 24.06.2026 14:00 */

.cengel-scroll-hover {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.cengel-scroll-hover:hover {
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
}

.cengel-scroll-hover::-webkit-scrollbar {
  width: var(--cengel-scroll-size-thin);
}

.cengel-scroll-hover::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}

.cengel-scroll-hover:hover::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
}

.cengel-scroll-hover:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

.ph-bold,
  .ph-fill {
  font-weight: normal !important;
  font-synthesis: none;
}

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

.ph-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: ph-spin 0.85s linear infinite;
}

.widget-ph {
  font-size: 1.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.widget-ph-sm {
  font-size: 1rem;
}

.widget-ph-lg {
  font-size: 1.25rem;
}

.dark .widget-ph-muted {
  color: var(--ink-muted);
}

.widget-ph-muted {
  color: var(--ink-muted);
}

/* account split layout, uf-badge — cengel-tooltip ile - 22.07.2026 05:35 */

.uf-badge {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  cursor: pointer;
}

.uf-badge__img {
  cursor: pointer;
}

.account-split-inner {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  align-items: stretch;
}

/* mobil ust cubuk masaustu header ile ayni katman - 01.11.2026 19:05 */

.account-mobile-header {
  background: var(--eco-header-bg);
}

#account-static-sidebar {
  width: var(--account-static-sidebar-w);
  max-width: var(--account-static-sidebar-w);
  min-width: var(--account-static-sidebar-w);
  overflow: visible;
}

#account-static-sidebar > div:first-child {
  width: var(--account-static-sidebar-w);
  height: var(--account-static-sidebar-w);
  min-height: var(--account-static-sidebar-w);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#account-nav-rail {
  width: 100%;
  max-width: var(--account-static-sidebar-w);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .account-desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--account-split-sidebar-w);
    min-width: var(--account-split-sidebar-w);
    max-width: var(--account-split-sidebar-w);
    min-height: 100%;
    align-self: stretch;
    top: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--eco-header-border);
    overflow: hidden;
  }

  .account-desktop-sidebar .sidebar-bottom {
    flex-shrink: 0;
    margin-top: auto;
  }

  .account-desktop-sidebar > nav {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* spaces-sb-inner ile ayni ust/yatay bosluk — logo baslangic hizasi - 16.07.2026 04:10 */

  .account-desktop-sidebar .sidebar-nav-inner {
    padding: var(--split-sidebar-inset-y) var(--split-sidebar-inset-x) var(--split-sidebar-inset-bottom);
  }
}

.account-nav-rail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* rail tamamı tek scroll — cubuk gizli - 17.07.2026 00:48 */

#account-nav-rail {
  gap: var(--sidebar-gap-tight);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#account-nav-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* help ustunde soft fade — spark + help alt blok - 22.07.2026 17:00 */

.account-nav-rail-bottom {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sidebar-gap-tight);
  padding: 0 var(--eco-header-pad) var(--eco-header-pad);
  background: var(--shell-rail-bg, var(--eco-header-bg, #ffffff));
}

.account-nav-rail-bottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  pointer-events: none;
  background: var(--shell-rail-bg, var(--eco-header-bg, #ffffff));
}

.cengel-rail-item {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-btn-size);
  height: var(--rail-btn-size);
  flex-shrink: 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  -webkit-font-smoothing: antialiased;
  overflow: visible;
}

/* tasan rozet altindaki rail itemin ustunde kalsin - 16.07.2026 19:55 */

.cengel-rail-item:has(> .cengel-rail-item__badge:not([hidden])),
.cengel-rail-item:has(> .cengel-rail-item__unread:not([hidden])) {
  z-index: 2;
}

.cengel-rail-item__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  transition: background-color 160ms ease, border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cengel-rail-item__icon {
  font-size: var(--rail-btn-icon-size);
  line-height: 1;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
}

.cengel-rail-item__icon--fill {
  opacity: 0;
  pointer-events: none;
}

.cengel-rail-item__icon--outline,
.cengel-rail-item__icon--solo {
  opacity: 1;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

.cengel-rail-item:hover .cengel-rail-item__icon-wrap {
  background: var(--rail-hover-bg);
}

.cengel-rail-item:not([data-rail-active="true"]):hover .cengel-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-hover);
}

.cengel-rail-item--space:not([data-rail-active="true"]):hover .cengel-rail-space-avatar {
  border-radius: var(--rail-btn-radius-hover);
}

.cengel-rail-item:hover .cengel-rail-item__icon--outline,
.cengel-rail-item:hover .cengel-rail-item__icon--solo {
  color: color-mix(in srgb, var(--foreground, #000) 86%, transparent);
}

.cengel-rail-item:focus-visible {
  outline: none;
}

.cengel-rail-item:focus-visible .cengel-rail-item__icon-wrap {
  background: var(--rail-hover-bg);
}

.cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-active);
  background: var(--rail-active-bg);
}

.cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--outline {
  opacity: 0;
}

.cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--fill {
  opacity: 1;
  color: var(--rail-active-fg, var(--accent));
}

.cengel-rail-item[data-rail-variant="outline"][data-rail-active="true"] .cengel-rail-item__icon--outline {
  opacity: 1;
  color: var(--rail-active-fg, var(--accent));
}

.cengel-rail-item[data-rail-variant="outline"][data-rail-active="true"] .cengel-rail-item__icon--fill {
  opacity: 0;
}

.cengel-rail-item[data-rail-active="true"]:hover .cengel-rail-item__icon-wrap {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.cengel-rail-spaces-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail-btn-size);
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
  transition: background-color 200ms ease, border-radius 200ms ease;
}

.cengel-rail-spaces-group:has([data-rail-spaces-expanded="true"]):has([data-rail-space-id]) {
  --cengel-rail-badge-gutter: 6px;
  --cengel-rail-spaces-gap: var(--cengel-rail-badge-gutter);
  gap: var(--cengel-rail-spaces-gap);
  width: calc(var(--rail-btn-size) + (var(--cengel-rail-badge-gutter) * 2));
  padding: var(--cengel-rail-spaces-gap) 0;
  box-sizing: border-box;
  border-radius: var(--rail-btn-radius-active);
  background: var(--surface-hover);
}

.cengel-rail-spaces {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cengel-rail-spaces[data-rail-spaces-expanded="true"]:has([data-rail-space-id]) {
  grid-template-rows: 1fr;
}

.cengel-rail-spaces__clip {
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.cengel-rail-spaces__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cengel-rail-spaces-gap, var(--sidebar-gap-tight));
  width: 100%;
  overflow: visible;
}

.cengel-rail-spaces[data-rail-spaces-expanded="true"]:has([data-rail-space-id]) .cengel-rail-spaces__inner {
  padding-bottom: 4px;
}

.cengel-rail-spaces__inner > .cengel-rail-item--space:last-child:has(> .cengel-rail-item__badge:not([hidden])),
.cengel-rail-spaces__inner > .cengel-rail-item--space:last-child:has(> .cengel-rail-item__unread:not([hidden])) {
  z-index: 4;
}

.cengel-rail-spaces[data-rail-spaces-expanded="false"] .cengel-rail-spaces__inner {
  pointer-events: none;
}

.cengel-rail-item--space .cengel-rail-item__icon-wrap {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}

.cengel-rail-spaces[data-rail-spaces-expanded="false"] .cengel-rail-item__badge {
  display: none !important;
}

.cengel-rail-spaces-group:has([data-rail-spaces-expanded="true"]):has([data-rail-space-id]) > .cengel-rail-item > [data-rail-badge="spaces"] {
  display: none !important;
}

.cengel-rail-item--space[data-rail-active="true"] .cengel-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-active);
}

.cengel-rail-space-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  font-size: var(--rail-btn-icon-size);
  line-height: 1;
  color: var(--av-fg, var(--foreground, #000));
  background: var(--av-bg, color-mix(in srgb, var(--foreground, #000) 10%, transparent));
  transition: border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cengel-rail-item--space[data-rail-active="true"] .cengel-rail-space-avatar {
  border-radius: var(--rail-btn-radius-active);
}

.cengel-rail-space-avatar--logo {
  overflow: hidden;
}

.cengel-rail-space-avatar__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

html.dark .cengel-rail-space-avatar {
  color: var(--av-fg-d, var(--av-fg, var(--foreground, #fff)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground, #fff) 16%, transparent)));
}

@media (prefers-reduced-motion: reduce) {
  .cengel-rail-item__icon-wrap,
    .cengel-rail-space-avatar,
    .cengel-rail-spaces,
    .cengel-rail-spaces-group {
    transition: none;
  }
}

.cengel-rail-item--space {
  cursor: grab;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.cengel-rail-item--space img,
.cengel-rail-item--space * {
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cengel-rail-item--space img {
  pointer-events: none;
}

.cengel-rail-spaces__inner {
  position: relative;
}

.cengel-rail-spaces__inner--dnd .cengel-rail-item--space:not(.is-drag-placeholder) {
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cengel-rail-item--space.is-drag-placeholder {
  opacity: 0.28;
  cursor: grabbing;
}

.cengel-rail-item--space.is-drag-placeholder .cengel-rail-item__icon-wrap {
  border: 1.5px dashed color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.cengel-rail-item--space.is-drag-placeholder .cengel-rail-space-avatar,
.cengel-rail-item--space.is-drag-placeholder .cengel-rail-space-avatar__img,
.cengel-rail-item--space.is-drag-placeholder .cengel-rail-item__badge,
.cengel-rail-item--space.is-drag-placeholder .cengel-rail-item__unread {
  opacity: 0;
}

.cengel-rail-item--space-ghost {
  position: fixed;
  z-index: 10050;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.96;
  transform: scale(1.08);
  transform-origin: center center;
}

.cengel-rail-item--space-ghost .cengel-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-active, 12px);
}

.cengel-rail-spaces__dnd-line {
  position: absolute;
  left: 50%;
  width: calc(var(--rail-btn-size) - 8px);
  height: 3px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.cengel-rail-spaces__dnd-line--visible {
  opacity: 1;
}

html.rail-dnd-active .cengel-tooltip--floating {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-rail-spaces__inner--dnd .cengel-rail-item--space:not(.is-drag-placeholder) {
    transition: none;
  }

  .cengel-rail-item--space-ghost {
    transform: none;
  }
}

/* account sidebar sections, footer user, mobile — collapse removed - 16.07.2026 04:10 */

aside a, aside button, aside p, aside span,
#mobileSidebar a, #mobileSidebar button, #mobileSidebar p, #mobileSidebar span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sidebar-header {
  height: var(--eco-header-h);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--eco-header-pad);
  padding-right: var(--eco-header-pad);
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-link {
  transition: opacity 120ms ease;
}

.sidebar-logo-link:hover {
  opacity: 0.75;
}

.sidebar-logo-text {
  color: var(--foreground);
}

.sidebar-logo-products-btn {
  width: var(--eco-header-control);
  height: var(--eco-header-control);
  color: var(--ink-500);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--sidebar-item-r);
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.sidebar-logo-products-btn:hover {
  color: var(--foreground);
  background: var(--background);
  border-color: color-mix(in srgb, var(--border) 60%, var(--foreground));
}

.dark .sidebar-logo-products-btn {
  background: var(--background);
}

.dark .sidebar-logo-products-btn:hover {
  background: var(--surface-subtle);
}

.sidebar-user-section {
  padding-left: var(--account-sidebar-inner-x);
  padding-right: var(--account-sidebar-inner-x);
  padding-bottom: var(--sidebar-gap);
}

.sidebar-user-card {
  border-radius: var(--sidebar-item-r);
  overflow: hidden;
  width: 100%;
}

.sidebar-bottom-user-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.6875rem;
  width: 100%;
  text-align: left;
  transition: background-color 120ms ease;
  border-radius: var(--sidebar-item-r);
}

.sidebar-bottom-user-btn:hover {
  background-color: var(--sidebar-hover-bg);
}

.sidebar-bottom-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}

.sidebar-bottom-user-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 0.0625rem;
}

.sidebar-bottom-user-chevron {
  font-size: 0.875rem;
  color: var(--ink-muted);
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.sidebar-bottom-user-btn:hover .sidebar-bottom-user-chevron {
  opacity: 0.9;
}

.sidebar-bottom-user-btn[aria-expanded="true"] .sidebar-bottom-user-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sidebar-gap-tight) * 2);
  padding: calc(var(--sidebar-gap) * 0.75) var(--account-sidebar-inner-x);
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sidebar-bottom {
  border-top-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

@media (min-width: 1024px) {
  .account-desktop-sidebar .sidebar-bottom {
    padding-left: var(--split-sidebar-inset-x);
    padding-right: var(--split-sidebar-inset-x);
    padding-top: calc(var(--split-sidebar-inset-y) * 0.75);
    padding-bottom: var(--split-sidebar-inset-bottom);
  }

  /* desktop nav olcegi — tokenlar sp-sidebar__tab ile es - 07.08.2026 05:50 */

  .account-desktop-sidebar .account-sidebar-nav-link {
    min-height: var(--account-sidebar-nav-row-h);
    height: var(--account-sidebar-nav-row-h);
    gap: var(--account-sidebar-nav-gap);
    padding-left: var(--account-sidebar-nav-px);
    padding-right: var(--account-sidebar-nav-px);
    border-radius: var(--sidebar-item-r);
  }

  .account-desktop-sidebar .account-sidebar-nav-icon,
    .account-desktop-sidebar .account-sidebar-nav-affix {
    width: var(--account-sidebar-nav-icon-size);
    height: var(--account-sidebar-nav-icon-size);
  }

  .account-desktop-sidebar .account-sidebar-nav-icon {
    font-size: var(--account-sidebar-nav-icon-size);
  }
}

#mobileSidebar {
  display: flex !important;
  flex-direction: column !important;
}

#mobileSidebarNav {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}

#mobileOverlay {
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.nav-section {
  margin-top: var(--sidebar-gap);
}

.nav-section:first-child {
  margin-top: 0;
}

.nav-section--overview {
  margin-top: 0;
  margin-bottom: var(--sidebar-gap-tight);
}

.nav-section__label {
  margin: 0;
  padding: 0.375rem var(--account-sidebar-nav-px) 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.28;
  line-height: 1;
}

.dark .nav-section__label {
  opacity: 0.36;
}

.nav-section__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* account nav icon — sp-sidebar__tab ile ayni 1rem olcek - 16.07.2026 04:10 */

.account-sidebar-nav-icon,
.account-sidebar-nav-affix {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.account-sidebar-nav-icon {
  font-size: 1rem;
}

/* nav kosesi — template rounded-lg yerine token (spaces tab ile ayni) - 07.08.2026 05:50 */

.account-sidebar-nav-link {
  border-radius: var(--sidebar-item-r);
}

#mobileOverlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: color-mix(in srgb, #0f0f13 28%, transparent);
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  transition: opacity 0.2s ease-out;
}

html.dark #mobileOverlay {
  background: color-mix(in srgb, #000 48%, transparent);
}

#mobileSidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-sidebar-panel-w);
  max-width: min(85vw, 22rem);
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  z-index: 10041;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--account-split-sidebar-bg, var(--background));
  border-right: 1px solid var(--eco-header-border, var(--border));
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
  visibility: hidden;
}

#mobileOverlay[data-open="true"] {
  opacity: 1;
}

#mobileOverlay[data-open="true"][data-context="product"] #mobileSidebar {
  transform: translateX(0);
  visibility: visible;
}

.account-mobile-header__inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  height: 100%;
}

.account-mobile-header__center {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}

.account-mobile-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.account-mobile-header__title {
  margin: 0;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-mobile-header__identity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.account-mobile-header__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.account-mobile-header__right {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.account-mobile-header__icon-btn,
.account-mobile-header__user-btn {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  border-radius: var(--radius-control, 0.5rem);
  text-decoration: none;
  cursor: pointer;
}

#mobile-menu-button,
#closeMobileSidebar {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* bottom nav — wall / chat / spaces / profile - 09.08.2026 08:55 */

.account-mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10020;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  min-height: calc(var(--mobile-bottom-nav-h) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  background: var(--eco-header-bg, var(--background));
  border-top: 1px solid var(--eco-header-border, var(--border));
}

.account-mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--touch-target-min);
  padding: 0.35rem 0.25rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  text-decoration: none;
  cursor: pointer;
}

.account-mobile-bottom-nav__item[data-nav-active="true"],
.account-mobile-bottom-nav__item[aria-current="page"] {
  color: var(--foreground);
}

.account-mobile-bottom-nav__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.account-mobile-bottom-nav__label {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* route sidebars as in-place drawers - 09.08.2026 09:20 */

@media (max-width: 1023.98px) {
  [data-account-shell-main] {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + var(--safe-area-bottom));
  }

  body.mobile-bottom-nav-hidden [data-account-shell-main] {
    padding-bottom: var(--safe-area-bottom);
  }

  body.mobile-bottom-nav-hidden .account-mobile-bottom-nav {
    display: none !important;
  }

  body.mobile-ctx-spaces-open #spaces-sidebar,
    body.mobile-ctx-games-open .games-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(85vw, 22rem) !important;
    max-width: min(85vw, 22rem) !important;
    min-width: 0 !important;
    height: 100% !important;
    z-index: 10042 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: var(--account-split-sidebar-bg, var(--background));
    border-right: 1px solid var(--eco-header-border, var(--border));
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
  }

  body.space-members-mobile-open .account-mobile-bottom-nav {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  #mobileOverlay,
    .account-mobile-header,
    .account-mobile-bottom-nav {
    display: none !important;
  }
}

.section-pad-head {
  padding: var(--section-pad-y-head) var(--section-pad-x);
}

.section-pad-body {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.section-pad-row {
  padding: var(--section-pad-y-row) var(--section-pad-x);
}

.section-pad-x {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* account: fixed unsaved-changes bar (profile, notifications, …) - 17.05.2026 01:05 */

:root {
  --app-content-bottom-pad: 5rem;
}

#account-main-content,
#super-main-content,
.app-page-content {
  padding-bottom: calc(var(--app-content-bottom-pad) + env(safe-area-inset-bottom, 0px));
}

/* anons sayfasinda padding sifirlama — compose icin tam yukseklik gerekli - 23.06.2026 21:15 */

#account-main-content.account-main--channel {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  background: var(--background, #fff);
  /* feed ve compose ayni sutun genisligini paylasir; ortak atadan tanimlanir
       cunku .ann-page ve .ann-compose kardes elemanlardir. discord/slack gibi
       tam genislik icin sinir yok, sadece yan bosluk (--ch-chat-side-pad) var - 01.07.2026 20:30 */
  --ch-chat-column-max: none;
  --ch-chat-side-pad: 20px;
}

/* channel: dis scroll kapali, feed icinde kaydir - 24.06.2026 20:30 */

.account-split__scroll:has(#account-main-content.account-main--channel) {
  overflow: hidden;
  align-items: stretch;
  background: var(--background, #fff);
}

.account-split__scroll:has(#account-main-content.account-main--channel) > .account-split__content-pad {
  max-width: none;
  width: 100%;
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#account-main-content.account-main--channel .ann-feed-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#account-main-content.account-main--channel .ann-page--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-direction: row;
}

#account-main-content.account-main--channel .ann-page--split .ann-feed-pane,
#account-main-content.account-main--channel .ann-page--split .ann-reply-pane {
  min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

#account-main-content.account-main--channel .ann-reply-pane .ann-feed,
#account-main-content.account-main--channel .ann-reply-pane .ann-compose {
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply {
  padding: 16px 0 24px;
  margin: 0 0 12px;
  width: 100%;
  max-width: var(--ch-chat-column-max);
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 10px;
  gap: 6px;
  letter-spacing: -0.02em;
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__type-icon {
  font-size: 1.25rem;
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__lead {
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-bottom: 6px;
}

#account-main-content.account-main--channel .ann-reply-pane .ann-feed__list .ann-card {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
  border-radius: 0;
}

#account-main-content.account-main--channel .ann-feed {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-compose {
  position: static;
  flex-shrink: 0;
}

/* feed + compose ayni tam genislik sutunu paylasir - 24.06.2026 22:00 */

#account-main-content.account-main--channel .ch-channel-intro,
#account-main-content.account-main--channel .ann-feed__list,
#account-main-content.account-main--channel .ann-feed__loading,
#account-main-content.account-main--channel .ann-feed__empty {
  width: 100%;
  max-width: var(--ch-chat-column-max);
}

/* intro / mesaj / compose — ayni sol kenar (--ch-chat-side-pad) - 22.07.2026 05:44 */

#account-main-content.account-main--channel .ch-channel-intro {
  padding: 15px 0 0;
}

#account-main-content.account-main--channel .ann-compose__box-wrap {
  max-width: var(--ch-chat-column-max);
  width: 100%;
  margin: 0;
}

/* hover tam genislik; icerik compose ile ayni side-pad - 22.07.2026 05:44 */

#account-main-content.account-main--channel .ann-feed__list .ann-card {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
  border-radius: 0;
}

/* tarih / yeni mesajlar boluculeri compose ile ayni hizada - 22.07.2026 05:44 */

#account-main-content.account-main--channel .ann-feed__list .msg-date-divider,
#account-main-content.account-main--channel .ann-feed__list .msg-unread-divider {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-feed__list .msg-date-divider::before,
#account-main-content.account-main--channel .ann-feed__list .msg-unread-divider::before {
  left: var(--ch-chat-side-pad);
  right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-feed__list .ann-card--mentioned::before,
#account-main-content.account-main--channel .ann-feed__list .ann-card--system-user::before {
  left: 0;
}

@media (max-width: 1023.98px) {
  #account-main-content.account-main--channel {
    --ch-chat-side-pad: 12px;
  }

  #account-main-content.account-main--channel .ann-page--split {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  #account-main-content.account-main--channel .ann-page--split .ann-feed-pane,
    #account-main-content.account-main--channel .ann-page--split .ann-reply-pane {
    border-left: none;
    min-height: 0;
    flex: 1;
  }

  #account-main-content.account-main--channel .ann-page--split[data-mobile-pane="feed"] .ann-reply-pane {
    display: none;
  }

  #account-main-content.account-main--channel .ann-page--split[data-mobile-pane="reply"] .ann-feed-pane {
    display: none;
  }

  #account-main-content.account-main--channel .ann-page--split[data-mobile-pane="reply"] .ann-reply-pane {
    display: flex;
    flex-direction: column;
  }

  .ann-compose__box-wrap,
    .ann-compose__toolbar {
    max-width: 100%;
  }

  .ann-compose__actions {
    flex-wrap: wrap;
    gap: 0.375rem;
  }
}

#account-main-content.account-main--channel .ann-feed__spacer {
  height: 12px;
}

#account-main-content.account-main--channel .ann-feed:not(.ann-feed--empty) {
  padding-bottom: 0;
}

#account-main-content.account-main--channel .ann-compose::before {
  display: none;
}

#account-main-content.account-main--channel .ann-compose {
  padding: 8px var(--ch-chat-side-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--background, #fff);
  border-top: none;
  /* feed ile ayni sutun genisligi — sol kenar kaymasin - 22.07.2026 05:44 */
  scrollbar-gutter: stable;
}

/* kanaldaki kullanicilar — compose kutusunun biraz uzerinde - 05.07.2026 04:30 */

#account-main-content.account-main--channel .ann-compose__viewers {
  transform: translateY(calc(-50% - 5px));
}

#account-main-content.account-main--channel .ann-compose__viewer-btn {
  position: relative;
}

/* kutunun disinda, sag alt kisayol ipucu - 01.07.2026 20:35 */

#account-main-content.account-main--channel .ann-compose__hint {
  margin: 4px 2px 0;
  text-align: right;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
}

#account-main-content.account-main--channel .ann-compose__box {
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  transition:
        border-color 150ms ease-out,
        background-color 150ms ease-out;
}

#account-main-content.account-main--channel .ann-compose__box:focus-within {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  background: var(--background, #fff);
}

/* tek padding katmani — arac ve metin ayni yukseklikte hizalanir - 21.07.2026 16:42 */

#account-main-content.account-main--channel .ann-compose__input-row:not([hidden]) {
  --ch-compose-tool: 36px;
  --ch-compose-line: 20px;
  --ch-compose-pad-y: calc((var(--ch-compose-tool) - var(--ch-compose-line)) / 2);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

#account-main-content.account-main--channel .ann-compose__textarea-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

#account-main-content.account-main--channel .ann-compose__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: var(--ch-compose-pad-y, 8px) 0;
  max-height: 230px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: inherit;
  font-style: inherit;
  line-height: var(--ch-compose-line, 20px);
  letter-spacing: normal;
  text-rendering: inherit;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  color: var(--foreground, #000);
}

/* pill gorunumu — ekstra margin/padding yok, imlec hizasi bozulmasin - 03.07.2026 01:45 */

#account-main-content.account-main--channel .ann-compose__preview .cengel-mention,
#account-main-content.account-main--channel .ann-compose__preview .cengel-mention--all,
#account-main-content.account-main--channel .ann-compose__preview .cengel-mention--url {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  pointer-events: none;
  cursor: text;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#account-main-content.account-main--channel .ann-compose__preview .cengel-emoji,
#account-main-content.account-main--channel .ann-compose__preview .cengel-emoji--compose {
  display: inline;
  width: 1em;
  height: 1em;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: -0.075em;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.cengel-mention,
#account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.cengel-mention:hover {
  color: #3d4ff0;
  text-decoration: none;
}

.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.cengel-mention,
.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.cengel-mention:hover {
  color: #aeb6ff;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.cengel-mention,
#account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.cengel-mention--url {
  color: #3d4ff0;
  background: transparent;
  font-weight: 400;
}

#account-main-content.account-main--channel .ann-compose__preview .cengel-mention--all {
  color: #dc2626;
  background: transparent;
  font-weight: 400;
}

.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.cengel-mention,
.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.cengel-mention--url {
  color: #aeb6ff;
  background: transparent;
}

.dark #account-main-content.account-main--channel .ann-compose__preview .cengel-mention--all {
  color: #f87171;
  background: transparent;
}

#account-main-content.account-main--channel .ann-compose__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: var(--ch-compose-tool, 36px);
  max-height: 230px;
  padding: var(--ch-compose-pad-y, 8px) 0;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: inherit;
  font-style: inherit;
  line-height: var(--ch-compose-line, 20px);
  letter-spacing: normal;
  text-rendering: inherit;
  resize: none;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
  color: var(--foreground, #000);
  -webkit-text-fill-color: var(--foreground, #000);
  caret-color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__textarea--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__textarea::-moz-placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-text-fill-color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  opacity: 1;
}

#account-main-content.account-main--channel .ann-compose__textarea::placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-text-fill-color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  opacity: 1;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder .cengel-mention,
#account-main-content.account-main--channel .ann-compose__preview--placeholder .cengel-mention--all,
#account-main-content.account-main--channel .ann-compose__preview--placeholder .cengel-mention--url,
#account-main-content.account-main--channel .ann-compose__preview--placeholder a {
  color: inherit;
  background: transparent;
  text-decoration: none;
}

#account-main-content.account-main--channel .ann-compose__preview .cengel-emoji-token {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  color: inherit;
}

#account-main-content.account-main--channel .ann-compose__charcount {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--background, #fff);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__charcount--danger {
  color: #ef4444;
}

#account-main-content.account-main--channel .ann-compose__toolbar-left,
#account-main-content.account-main--channel .ann-compose__toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#account-main-content.account-main--channel .ann-compose__tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ch-compose-tool, 36px);
  height: var(--ch-compose-tool, 36px);
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, opacity 140ms ease-out, transform 140ms ease-out;
}

/* ikon glyphi ayni kutuda kalsin — pause/mic kaymasin - 05.08.2026 02:30 */

#account-main-content.account-main--channel .ann-compose__tool-btn i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
}

#account-main-content.account-main--channel .ann-compose__tool-btn--attach {
  border-color: color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
}

#account-main-content.account-main--channel .ann-compose__tool-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  outline-offset: 1px;
}

#account-main-content.account-main--channel .ann-compose__tool-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__tool-btn[aria-expanded='true'] {
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send {
  opacity: 0.36;
  transform: scale(0.88);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready {
  opacity: 1;
  transform: scale(1);
  background: var(--foreground, #000);
  color: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:hover {
  background: color-mix(in srgb, var(--foreground, #000) 86%, var(--background, #fff));
  color: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-compose__tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:disabled {
  opacity: 0.38;
}

#account-main-content.account-main--channel .ann-compose__send-form {
  display: contents;
}

#account-main-content.account-main--channel .ann-compose__locked:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ch-compose-tool, 36px);
  padding: var(--ch-compose-pad-y, 8px) 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

#account-main-content.account-main--channel .ann-compose__locked i {
  flex-shrink: 0;
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* yalnizca kilit gorunurken disabled hali — hidden varken :has eslesmesin - 21.07.2026 16:42 */

#account-main-content.account-main--channel .ann-compose__box:has(
    .ann-compose__locked--no-permission:not([hidden])
) {
  cursor: not-allowed;
  opacity: 0.72;
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission:not([hidden]) {
  --ch-compose-tool: 36px;
  --ch-compose-line: 20px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: calc(var(--ch-compose-tool) + 16px);
  padding: 8px 10px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: var(--ch-compose-line);
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ch-compose-tool);
  height: var(--ch-compose-tool);
  margin-top: 0;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission .ann-compose__locked-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

#account-main-content.account-main--channel .ann-compose__input-row {
  container-type: inline-size;
  container-name: compose-row;
}

/* bosken tek satir + ... — yazarken normal wrap geri gelir - 16.07.2026 02:27 */

#account-main-content.account-main--channel .ann-compose__textarea:-moz-placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea::-moz-placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* scroll calisir, cubuk gorunmez - 16.07.2026 02:27 */

#account-main-content.account-main--channel .ann-compose__textarea,
#account-main-content.account-main--channel .ann-compose__preview {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#account-main-content.account-main--channel .ann-compose__textarea::-webkit-scrollbar,
#account-main-content.account-main--channel .ann-compose__preview::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@container compose-row (max-width: 420px) {
  [data-mention-trigger] {
    display: none;
  }
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown p {
  margin: 0;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown strong {
  font-weight: 700;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown em {
  font-style: italic;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown del {
  text-decoration: line-through;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  padding: 0 3px;
  border-radius: 3px;
}

#account-main-content.account-main--channel .ann-compose__preview .ann-code-block--compose {
  display: block;
  white-space: pre-wrap;
}

#account-main-content.account-main--channel .ann-compose__preview .cengel-md-mark {
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  font-weight: 400;
  font-style: normal;
}

/* :not([hidden]) sart kosulmazsa flex, [hidden] ozniteligini eziyor ve
   medya yokken de serit bos halde acik gorunuyordu - 01.07.2026 23:55 */

#account-main-content.account-main--channel .ann-compose__media-list:not([hidden]) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* preview ile compose arasindaki ayirici - 16.07.2026 03:33 */
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

#account-main-content.account-main--channel .ann-compose__media-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#account-main-content.account-main--channel .ann-media-item {
  position: relative;
  flex-shrink: 0;
  height: 96px;
  width: auto;
  min-width: 72px;
  max-width: 168px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

#account-main-content.account-main--channel .ann-media-item[data-url]:not([data-url=""]) {
  cursor: pointer;
}

#account-main-content.account-main--channel .ann-media-item__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#account-main-content.account-main--channel .ann-media-item--video-thumb video.ann-media-item__img {
  pointer-events: none;
  background: #111;
}

/* video thumbnail fallback — url yokken film ikonu + dosya adi - 15.07.2026 23:57 */

#account-main-content.account-main--channel .ann-media-item--video {
  display: flex;
  width: auto;
  min-width: 72px;
  max-width: 168px;
  aspect-ratio: unset;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
}

#account-main-content.account-main--channel .ann-media-item__video-icon {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

#account-main-content.account-main--channel .ann-media-item__name {
  max-width: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

/* dosya/zip onizleme — ikon + ad; pdf thumb - 20.07.2026 18:10 */

#account-main-content.account-main--channel .ann-media-item--file {
  display: flex;
  width: auto;
  min-width: 104px;
  max-width: 168px;
  aspect-ratio: unset;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  cursor: default;
}

#account-main-content.account-main--channel .ann-media-item--file-preview {
  min-width: 88px;
  padding: 6px;
}

#account-main-content.account-main--channel .ann-media-item__file-icon {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

#account-main-content.account-main--channel .ann-media-item__file-thumb-wrap {
  display: block;
  width: 48px;
  height: 62px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 85%, transparent);
  background: #fafafa;
}

.dark #account-main-content.account-main--channel .ann-media-item__file-thumb-wrap {
  background: #141418;
}

#account-main-content.account-main--channel .ann-media-item__file-thumb {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

/* yukleme — spinner overlay; boyut media ile ayni kalsin - 25.07.2026 00:56 */

#account-main-content.account-main--channel .ann-media-item--busy {
  background: color-mix(in srgb, var(--foreground, #000) 6%, var(--background, #fff));
  cursor: default;
}

#account-main-content.account-main--channel .ann-media-item--busy.ann-media-item--file {
  aspect-ratio: unset;
  min-width: 104px;
  max-width: 168px;
  width: auto;
}

#account-main-content.account-main--channel .ann-media-item--busy .ann-media-item__img {
  opacity: 0.45;
}

#account-main-content.account-main--channel .ann-media-item__spinner {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--foreground, #000) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  animation: ann-media-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  #account-main-content.account-main--channel .ann-media-item__spinner {
    animation-duration: 1400ms;
  }
}

#account-main-content.account-main--channel .ann-media-item__play-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-media-item__play-badge i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.875rem;
}

#account-main-content.account-main--channel .ann-media-item__gif-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  pointer-events: none;
  text-transform: uppercase;
}

#account-main-content.account-main--channel .ann-media-item__zoom-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 28%, transparent);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

#account-main-content.account-main--channel .ann-media-item:hover .ann-media-item__zoom-hint {
  opacity: 1;
}

#account-main-content.account-main--channel .ann-media-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

#account-main-content.account-main--channel .ann-media-item__remove:hover {
  background: #ef4444;
}

#account-main-content.account-main--channel .ann-media-item__remove:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

#account-main-content.account-main--channel .ann-compose__box {
  position: relative;
}

/* layout yuksekligi sabit; overlay min 132px yukari taser - 25.07.2026 00:51 */

#account-main-content.account-main--channel .ann-compose--drag .ann-compose__box {
  overflow: visible;
}

#account-main-content.account-main--channel .ann-compose__drop {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 6;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  pointer-events: none;
  border-radius: inherit;
  border: 1.5px dashed color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  background: color-mix(in srgb, var(--background, #fff) 92%, transparent);
  opacity: 0;
}

#account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) {
  display: flex;
  /* genisleyen alan da drop alabilsin - 25.07.2026 00:51 */
  pointer-events: auto;
  animation: ann-compose-drop-in 160ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#account-main-content.account-main--channel .ann-compose__drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
  font-size: 1.125rem;
  transform: translateY(4px);
  opacity: 0;
}

#account-main-content.account-main--channel .ann-compose__drop-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--foreground, #000);
  transform: translateY(4px);
  opacity: 0;
}

#account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) .ann-compose__drop-icon,
#account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) .ann-compose__drop-label {
  animation: ann-compose-drop-inner 200ms cubic-bezier(0.4, 0, 0.2, 1) 40ms forwards;
}

#account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) .ann-compose__drop-label {
  animation-delay: 70ms;
}

@keyframes ann-compose-drop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ann-compose-drop-inner {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]),
    #account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) .ann-compose__drop-icon,
    #account-main-content.account-main--channel .ann-compose--drag .ann-compose__drop:not([hidden]) .ann-compose__drop-label {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

#account-main-content.account-main--channel .ann-compose__input-row--voice:not([hidden]) {
  /* discard+send veya pause+send — her iki modda 2 arac - 05.08.2026 05:35 */
  --ch-voice-right: calc(var(--ch-compose-tool, 36px) * 2 + 6px);
  position: relative;
  min-height: calc(var(--ch-compose-tool, 36px) + 16px);
  max-height: calc(var(--ch-compose-tool, 36px) + 16px);
  align-items: center;
  gap: 0;
  overflow: hidden;
}

/* sure ile butonlar arasi — satir full height sifirdan sifira - 05.08.2026 05:38 */

#account-main-content.account-main--channel
  .ann-compose__input-row--voice:not([hidden])::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(10px + var(--ch-voice-right) + 8px);
  width: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  z-index: 2;
  pointer-events: none;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__toolbar-left {
  display: none !important;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__toolbar-right {
  margin-left: auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* kayit: nokta icin 16px; onizleme: play attach hizasinda 10px - 05.08.2026 05:35 */

#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__textarea-wrap {
  position: absolute;
  left: 16px;
  right: calc(26px + var(--ch-voice-right));
  top: 8px;
  bottom: 8px;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='preview']
  .ann-compose__textarea-wrap {
  left: 10px;
}

#account-main-content.account-main--channel .ann-compose__voice-host {
  display: none;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  max-height: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden;
}

#account-main-content.account-main--channel .ann-compose__voice-host:not([hidden]) {
  display: flex;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__textarea,
#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__preview,
#account-main-content.account-main--channel
  .ann-compose__input-row--voice
  .ann-compose__charcount {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='recording']
  [data-emoji-trigger],
#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='preview']
  [data-emoji-trigger],
#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='preview']
  [data-voice-trigger] {
  display: none !important;
}

#account-main-content.account-main--channel .ann-compose__voice-discard[hidden],
#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='preview']
  [data-voice-trigger][hidden] {
  display: none !important;
}

#account-main-content.account-main--channel
  .ann-compose__input-row--voice[data-voice-mode='preview']
  .ann-compose__voice-discard:not([hidden]) {
  display: inline-flex;
}

#account-main-content.account-main--channel .ann-compose__voice {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

#account-main-content.account-main--channel .ann-compose__voice-duration {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  min-width: 5ch;
  width: 5ch;
  color: color-mix(in srgb, var(--foreground, #000) 64%, transparent);
  font: 500 0.75rem/1 inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

#account-main-content.account-main--channel .ann-compose__voice--recording {
  justify-content: flex-start;
}

#account-main-content.account-main--channel .ann-compose__voice-play-dot {
  width: var(--ch-compose-tool, 36px);
  height: var(--ch-compose-tool, 36px);
  border-radius: 50%;
  background: #e11d48;
  color: #fff;
  flex-shrink: 0;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 140ms ease-out;
}

#account-main-content.account-main--channel .ann-compose__voice-play-dot i {
  font-size: 0.875rem;
  line-height: 1;
}

#account-main-content.account-main--channel .ann-compose__voice-play-dot:hover {
  background: #be123c;
}

#account-main-content.account-main--channel .ann-compose__voice--preview {
  gap: 8px;
}

#account-main-content.account-main--channel
  .ann-compose__voice--preview
  .cengel-audio-player.cengel-audio-player--compose {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  height: var(--ch-compose-tool, 36px);
  max-height: var(--ch-compose-tool, 36px);
}

#account-main-content.account-main--channel
  .cengel-audio-player--compose-bare
  .cengel-audio-player__play {
  display: none !important;
}

#account-main-content.account-main--channel
  .cengel-audio-player--compose
  .cengel-audio-player__time {
  display: none;
}

/* onizleme dalgasi — canli kayit ile ayni ince full-width cubuk - 05.08.2026 05:41 */

#account-main-content.account-main--channel
  .cengel-audio-player--compose
  .cengel-audio-player__wave-layer {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1px;
}

#account-main-content.account-main--channel
  .cengel-audio-player--compose
  .cengel-audio-player__bar {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 0 !important;
  border-radius: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 36%, transparent);
}

#account-main-content.account-main--channel
  .cengel-audio-player--compose
  .cengel-audio-player__wave-layer--played
  .cengel-audio-player__bar {
  background: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--recording {
  color: #e11d48;
}

@keyframes voice-rec-dot {
  50% {
    opacity: 0.15;
  }
}

#account-main-content.account-main--channel .ann-compose__voice--recording {
  gap: 8px;
}

#account-main-content.account-main--channel .ann-compose__voice-recording-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e11d48;
  animation: voice-rec-dot 1.4s ease-in-out infinite;
}

#account-main-content.account-main--channel .ann-compose__voice-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

#account-main-content.account-main--channel
  .ann-compose__voice-time
  .ann-compose__voice-duration {
  width: auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-weight: 400;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

#account-main-content.account-main--channel .ann-compose__voice-live {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 20px;
}

#account-main-content.account-main--channel .ann-compose__voice-live-bar {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: var(--bar-h, 6%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 36%, transparent);
  transition: height 70ms linear;
}

.cengel-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.cengel-media-lightbox--open {
  opacity: 1;
  pointer-events: auto;
}

.cengel-media-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
}

/* hidden attribute display: block kurali tarafindan ezilmesin - 15.07.2026 23:13 */

.cengel-media-lightbox__img[hidden],
.cengel-media-lightbox__video-stage[hidden] {
  display: none;
}

/* video player host — lightbox icinde genisler - 15.07.2026 23:13 */

.cengel-media-lightbox__video-stage {
  display: block;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
}

.cengel-media-lightbox__img {
  display: block;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* kapat butonu — soft outline x, sag ust - 14.07.2026 11:17 */

.cengel-media-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
  z-index: 1;
}

.cengel-media-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.cengel-media-lightbox__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* ok navigasyon butonlari — sol/sag kenar, dikey ortalanmis - 16.07.2026 02:47 */

.cengel-media-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
  z-index: 2;
}

.cengel-media-lightbox__nav--prev {
  left: 1rem;
}

.cengel-media-lightbox__nav--next {
  right: 1rem;
}

.cengel-media-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.cengel-media-lightbox__nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.cengel-media-lightbox__nav:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* [hidden] js tarafindan yonetilir - 16.07.2026 02:47 */

.cengel-media-lightbox__nav[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-media-lightbox {
    transition: none;
  }

  .cengel-media-lightbox__img {
    transition: none;
  }
}

/* oturum satiri alt metin (tiklama ile goreli/mutlak) - 25.05.2026 17:15 */

.session-activity-time {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Animation Utilities */

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Glass Effect Enhancement */

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* interactive chrome icin notr focus halkasi - 10.09.2026 05:43 */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.lang-trigger:focus-visible,
.language-option:focus-visible,
[data-app-version-dialog-close]:focus-visible {
  --tw-ring-color: var(--focus-ring) !important;
}

input,
textarea,
select {
  outline: none;
}

input:focus,
input:focus-visible,
input:active,
textarea:focus,
textarea:focus-visible,
textarea:active,
select:focus,
select:focus-visible,
select:active {
  outline: none !important;
  outline-offset: 0;
}

/* native alanlarda ring-offset boslugu yok - 10.09.2026 05:43 */

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  --tw-ring-offset-width: 0px !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Toast enter/leave handled in cengel-toast.css - 16.07.2026 07:17 */

/* Mobile Menu Transition */

#mobileSidebar {
  transition: transform 0.2s ease-out;
}

#mobileOverlay {
  transition: opacity 0.2s ease-out;
}

/* ── Spinner animasyon (Phosphor ph-spinner-gap icin) ─────────────────────── */

/* 21.06.2026 06:03 */

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

.animate-spin {
  animation: cengel-spin 0.75s linear infinite;
}

.cengel-alert-stack {
  position: fixed;
  top: 1.25rem;
  right: 1rem;
  left: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  /* sabit genis kolon — mobilde viewport ile sinirli - 25.07.2026 05:05 */
  width: 28rem;
  max-width: calc(100vw - 2rem);
  margin-left: auto;
  pointer-events: none;
}

@media (min-width: 640px) {
  .cengel-alert-stack {
    left: auto;
    right: 1.5rem;
    max-width: 28rem;
  }
}

.cengel-banner-host {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  pointer-events: none;
  font-family: Inter, Arial, sans-serif;
}

.cengel-banner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* host/stack ile ayni sabit genislik - 25.07.2026 05:05 */
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.8125rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  /* degisken yoksa da gorunur kalsin - 25.07.2026 04:59 */
  background: #ffffff;
  background: var(--background, #ffffff);
  color: #171717;
  color: var(--foreground, #171717);
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateX(0.85rem) scale(0.98);
  transition:
        opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cengel-banner--open {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.cengel-banner--leaving {
  opacity: 0;
  transform: translateX(0.85rem) scale(0.98);
}

.cengel-banner:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  outline-offset: 2px;
}

.cengel-banner__media {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
}

.cengel-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cengel-banner__media--square {
  border-radius: 10px;
}

.cengel-banner__media--squircle {
  border-radius: 30%;
  corner-shape: squircle;
}

.cengel-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cengel-banner__meta {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cengel-banner__origin {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

.cengel-banner__origin-logo {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.cengel-banner__origin-icon {
  font-size: 0.75rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
  flex-shrink: 0;
}

.cengel-banner__origin-space,
.cengel-banner__origin-channel,
.cengel-banner__origin-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cengel-banner__origin-space {
  max-width: 11rem;
  flex-shrink: 1;
  min-width: 0;
}

.cengel-banner__origin-channel {
  flex-shrink: 1;
  min-width: 0;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

.cengel-banner__origin-label {
  flex-shrink: 1;
  min-width: 0;
}

.cengel-banner__origin-sep {
  font-size: 0.625rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  flex-shrink: 0;
}

.cengel-banner__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cengel-banner__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.cengel-banner__close {
  flex-shrink: 0;
  width: auto;
  height: auto;
  margin: -0.125rem -0.125rem 0 0;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 999px;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.cengel-banner__close:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  color: var(--foreground, #000);
}

@media (prefers-reduced-motion: reduce) {
  .cengel-banner {
    transition: none;
    transform: none;
  }

  .cengel-banner--leaving {
    transform: none;
  }
}

.cengel-toast-host {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  width: 100%;
  pointer-events: none;
  font-family: Inter, Arial, sans-serif;
}

.cengel-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8125rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-left-width: 1px;
  background: var(--background, #fff);
  color: var(--foreground, #000);
  opacity: 0;
  transform: translateX(0.75rem) scale(0.98);
  transition:
        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cengel-toast--open {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.cengel-toast--leaving {
  opacity: 0;
  transform: translateX(0.75rem) scale(0.98);
}

.cengel-toast__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.cengel-toast--normal .cengel-toast__icon {
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
}

.cengel-toast--warn .cengel-toast__icon {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #d97706;
}

.cengel-toast--error .cengel-toast__icon {
  background: color-mix(in srgb, #e54d2e 14%, transparent);
  color: #e54d2e;
}

.cengel-toast__body {
  flex: 1;
  min-width: 0;
}

.cengel-toast__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

.cengel-toast__close {
  flex-shrink: 0;
  width: auto;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 999px;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.cengel-toast__close:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  color: var(--foreground, #000);
}

@media (prefers-reduced-motion: reduce) {
  .cengel-toast {
    transition: none;
    transform: none;
  }

  .cengel-toast--leaving {
    transform: none;
  }
}

img,
video,
svg,
canvas {
  max-inline-size: 100%;
  height: auto;
}

.account-shell-root .account-mobile-header {
  padding-top: var(--safe-area-top);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

.cengel-mobile-back {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  cursor: pointer;
  border-radius: var(--sidebar-item-r, 9px);
  flex-shrink: 0;
}

.cengel-mobile-back:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.cengel-mobile-back__icon {
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 1023.98px) {
  .cengel-mobile-back {
    display: inline-flex;
  }

  .account-split__content-pad {
    padding: var(--account-split-inner-pad);
  }

  .eco-header-search {
    --eco-search-max: min(100%, 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobileSidebar,
    #mobileOverlay {
    transition: none !important;
  }
}

/* kapsayici: label, flex, gap, cursor - 23.07.2026 01:35 */

.cc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: Arial, sans-serif;
}

/* native input gizle, erisilebilirlik icin dom'da kalsin - 23.07.2026 01:35 */

.cc-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ozel kare kutu - 23.07.2026 01:35 */

.cc-checkbox__box {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--foreground, #171717) 30%, transparent);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

/* check ikonu — checked degilken gizli - 23.07.2026 01:35 */

.cc-checkbox__check {
  display: none;
  width: 0.625rem;
  height: 0.625rem;
  color: var(--background, #ffffff);
  pointer-events: none;
}

/* checked durumu - 23.07.2026 01:35 */

.cc-checkbox__input:checked ~ .cc-checkbox__box {
  background: var(--foreground, #171717);
  border-color: var(--foreground, #171717);
}

.cc-checkbox__input:checked ~ .cc-checkbox__box .cc-checkbox__check {
  display: block;
}

/* disabled durumu - 23.07.2026 01:35 */

.cc-checkbox__input:disabled ~ .cc-checkbox__box {
  opacity: 0.45;
  cursor: not-allowed;
}

.cc-checkbox:has(.cc-checkbox__input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* focus-visible klavye odagi - 23.07.2026 01:35 */

.cc-checkbox__input:focus-visible ~ .cc-checkbox__box {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  outline-offset: 2px;
}

/* hover — sadece enabled - 23.07.2026 01:35 */

.cc-checkbox:not(:has(.cc-checkbox__input:disabled)):hover .cc-checkbox__box {
  border-color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
}

/* etiket metni - 23.07.2026 01:35 */

.cc-checkbox__label {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground, #171717);
}

/* koyu tema — border ve fill renk degisimi - 23.07.2026 01:35 */

html.dark .cc-checkbox__box {
  border-color: color-mix(in srgb, var(--foreground, #e4e4e7) 35%, transparent);
}

html.dark .cc-checkbox__input:checked ~ .cc-checkbox__box {
  background: var(--foreground, #e4e4e7);
  border-color: var(--foreground, #e4e4e7);
}

html.dark .cc-checkbox__check {
  color: var(--background, #0f0f13);
}

/* kapsayici: pozisyon referansi - 23.07.2026 01:35 */

.cs-select {
  position: relative;
  display: block;
  width: 100%;
  font-family: Arial, sans-serif;
}

/* tetikleyici buton - 23.07.2026 01:35 */

.cs-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e4e4e7);
  background: var(--background, #ffffff);
  color: var(--foreground, #171717);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: left;
  transition: border-color 120ms ease;
}

.cs-select__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 30%, transparent);
  outline-offset: 1px;
}

.cs-select__trigger:hover {
  border-color: color-mix(in srgb, var(--foreground, #171717) 35%, transparent);
}

/* acikken trigger aktif stili - 23.07.2026 01:35 */

.cs-select--open .cs-select__trigger {
  border-color: color-mix(in srgb, var(--foreground, #171717) 45%, transparent);
}

/* gosterilen deger - 23.07.2026 01:35 */

.cs-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.cs-select__value--placeholder {
  color: color-mix(in srgb, var(--foreground, #171717) 38%, transparent);
}

/* caret ikonu - 23.07.2026 01:35 */

.cs-select__caret {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #171717) 45%, transparent);
  transition: transform 160ms ease;
  pointer-events: none;
}

.cs-select--open .cs-select__caret {
  transform: rotate(180deg);
}

/* dropdown paneli - 23.07.2026 01:35 */

.cs-select__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e4e4e7);
  background: var(--background, #ffffff);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.98) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition:
        opacity 160ms ease-out,
        transform 160ms ease-out,
        visibility 0s linear 160ms;
  scrollbar-width: thin;
}

/* acik dropdown - 23.07.2026 01:35 */

.cs-select--open .cs-select__dropdown {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition:
        opacity 160ms ease-out,
        transform 160ms ease-out,
        visibility 0s;
}

/* secenek satiri - 23.07.2026 01:35 */

.cs-select__option {
  display: flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--foreground, #171717);
  transition: background 100ms ease;
}

.cs-select__option:hover,
.cs-select__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--foreground, #171717) 7%, transparent);
}

/* secili secenekte aktif gosterge - 23.07.2026 01:35 */

.cs-select__option[aria-selected="true"] {
  font-weight: 600;
}

/* placeholder satiri — secilemez - 23.07.2026 01:35 */

.cs-select__option[data-placeholder] {
  color: color-mix(in srgb, var(--foreground, #171717) 38%, transparent);
  cursor: default;
  font-style: italic;
}

.cs-select__option[data-placeholder]:hover {
  background: transparent;
}

/* koyu tema - 23.07.2026 01:35 */

html.dark .cs-select__trigger {
  background: color-mix(in srgb, var(--foreground, #e4e4e7) 5%, transparent);
}

html.dark .cs-select__dropdown {
  border-color: color-mix(in srgb, var(--foreground, #e4e4e7) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cs-select__dropdown,
    .cs-select__caret {
    transition: none;
  }
}

/* auth sayfa ortak stilleri - 24.06.2026 15:00 */

.auth-page-no-select,
.auth-page-no-select * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.auth-page-no-select input:not([type="hidden"]),
.auth-page-no-select textarea,
.auth-page-no-select select {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.profile-social-row {
  min-width: 0;
}

@media (max-width: 639px) {
  .profile-social-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .profile-social-row [data-drag-handle] {
    order: 1;
  }

  .profile-social-row [data-social-remove] {
    order: 2;
    margin-left: auto;
  }

  .profile-social-row input[data-social-label] {
    order: 3;
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }

  .profile-social-row input[data-social-url] {
    order: 4;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* surukleme hayaleti position:fixed; tek satir kalsin - 24.06.2026 16:30 */

  .profile-social-row.profile-social-row--drag-ghost {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .profile-social-row.profile-social-row--drag-ghost [data-drag-handle] {
    order: 0 !important;
  }

  .profile-social-row.profile-social-row--drag-ghost [data-social-remove] {
    order: 0 !important;
    margin-left: 0 !important;
  }

  .profile-social-row.profile-social-row--drag-ghost input[data-social-label] {
    order: 0 !important;
    flex: 0 1 180px !important;
    max-width: 240px !important;
    width: auto !important;
  }

  .profile-social-row.profile-social-row--drag-ghost input[data-social-url] {
    order: 0 !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

.account-profile-banner {
  position: relative;
  width: 100%;
  height: 9rem;
  /* h-36 */
  overflow: hidden;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

@media (min-width: 640px) {
  .account-profile-banner {
    height: 12rem;
    /* sm:h-48 */
  }
}

/* kapak yuklu: 1500x500 = 3:1 - 07.08.2026 07:30 */

.account-profile-banner[data-has-cover="true"] {
  height: auto;
  aspect-ratio: 3 / 1;
}

.account-profile-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* tak-çalıştır tarih seçici bileşeni (app/templates/components/datepicker.j2) */

.datepicker {
  padding: 0.9375rem 1rem 1rem;
}

.datepicker__header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.9375rem;
}

/* tek başlık butonu: "Mayıs 2013" veya "2013" - 25.05.2026 13:55 */

.datepicker__title-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  border: 0;
  background: transparent;
  padding: 0.3125rem 0.6875rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground, #171717);
  cursor: pointer;
  transition: background-color 0.12s ease-out;
  white-space: nowrap;
}

.datepicker__title-btn:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.datepicker__title-caret {
  font-size: 0.6875rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
  transition: transform 0.15s ease-out;
}

/* ay/yıl görünümünde caret döner - 25.05.2026 13:55 */

.datepicker__title-btn[data-view="months"] .datepicker__title-caret,
.datepicker__title-btn[data-view="years"] .datepicker__title-caret {
  transform: rotate(-90deg);
}

.datepicker__nav-btn {
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  font-size: 0.9375rem;
}

.datepicker__nav-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground, #171717) 7%, transparent);
  color: var(--foreground, #171717);
}

.datepicker__nav-btn--disabled,
.datepicker__nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* hafta başlık satırı - 25.05.2026 13:55 */

.datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.25rem;
}

.datepicker__weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
  padding: 0.1875rem 0;
}

/* gün hücreleri — daire şeklinde, sabit boyut - 25.05.2026 13:55 */

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.125rem;
}

.datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  margin: 0 auto;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  color: var(--foreground, #171717);
}

.datepicker__day--default:hover,
.datepicker__day--today:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 7%, transparent);
}

.datepicker__day--selected {
  background: var(--foreground, #171717);
  color: var(--background, #ffffff);
  font-weight: 600;
}

/* bugün indikatörü: halka çizgisi - 25.05.2026 13:55 */

.datepicker__day--today {
  outline: 1.5px solid color-mix(in srgb, var(--foreground, #171717) 35%, transparent);
  outline-offset: -1.5px;
  font-weight: 600;
}

.datepicker__day--outside,
.datepicker__day--disabled {
  cursor: default;
  opacity: 0.22;
  pointer-events: none;
}

/* ay ve yıl seçim ızgaraları - 25.05.2026 13:55 */

.datepicker__month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

.datepicker__years-scroll {
  max-height: 11rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.datepicker__year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

.datepicker__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  color: var(--foreground, #171717);
}

.datepicker__pick--selected {
  background: var(--foreground, #171717);
  color: var(--background, #ffffff);
  font-weight: 600;
}

.datepicker__pick--disabled {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

/* alt bilgi: temizle bağlantısı - 25.05.2026 13:55 */

.datepicker__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.8125rem;
  padding-top: 0.6875rem;
  border-top: 1px solid var(--border, #e5e5e5);
}

.datepicker__clear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  cursor: pointer;
  transition: color 0.12s ease-out;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
}

.datepicker__clear:hover {
  color: var(--foreground, #171717);
  text-decoration-color: color-mix(in srgb, var(--foreground, #171717) 30%, transparent);
}

.account-field-dropdown__panel {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.98) translateY(-0.25rem);
  transform-origin: top left;
  pointer-events: none;
  transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out,
        visibility 0s linear 0.18s;
}

.account-field-dropdown__panel--open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out,
        visibility 0s;
}

.account-field-dropdown__trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
}

.account-field-dropdown__option {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.account-field-dropdown__option:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.account-field-dropdown__option:focus {
  outline: none;
}

.account-field-dropdown__option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 25%, transparent);
  outline-offset: 1px;
}

/* dil seçici paneli (app/templates/components/language_picker.j2) - 25.05.2026 14:00 */

.language-picker__panel {
  right: 0;
  left: 0;
  z-index: var(--z-dropdown, 120);
  margin-top: 0.375rem;
  min-width: 100%;
  width: max(100%, 14rem);
  overflow: hidden;
}

.language-picker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
}

.language-picker__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.6875rem 0.8125rem;
  border: 0;
  border-radius: 0.6875rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.language-picker__option:hover:not(.language-picker__option--selected) {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.language-picker__option:focus {
  outline: none;
}

.language-picker__option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 25%, transparent);
  outline-offset: 1px;
}

/* seçili dil yalnızca arka plan ile belirtilir - 25.05.2026 14:10 */

.language-picker__option--selected {
  background: var(--foreground, #171717);
}

.language-picker__option--selected:hover {
  background: var(--foreground, #171717);
}

.language-picker__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
}

.language-picker__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground, #171717);
}

.language-picker__sublabel {
  font-size: 0.875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
}

.language-picker__option--selected .language-picker__label {
  color: var(--background, #ffffff);
}

.language-picker__option--selected .language-picker__sublabel {
  color: color-mix(in srgb, var(--background, #ffffff) 65%, transparent);
}

.language-picker--saving .language-picker__option {
  pointer-events: none;
  opacity: 0.6;
}

/* overflow menü açık liste satırı — alttaki satırlar paneli kapatmasın - 06.06.2026 21:15 */

.overflow-menu-row--open {
  position: relative;
  z-index: 30;
}

/* guvenlik: sosyal profil — onizleme kapaliyken sol tam genislik - 30.05.2026 07:15 */

.security-social-profile__layout {
  display: flex;
  flex-direction: column;
}

.security-social-profile__layout--single .security-social-profile__controls {
  width: 100%;
  border-right: none;
}

.security-social-profile__layout--single .security-social-profile__preview,
.security-social-profile--inactive .security-social-profile__preview {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
}

.security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__preview {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .security-social-profile__layout:not(.security-social-profile__layout--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
  }

  .security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__controls {
    border-right: 1px solid var(--border);
  }

  .security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__preview {
    border-top-width: 0;
  }
}

.cengel-user-card {
  position: fixed;
  z-index: var(--z-user-card, 10090);
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}

/* acilis yonu — data-placement konumlayicidan - 16.07.2026 04:42 */

.cengel-user-card[data-placement="above"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom left;
}

.cengel-user-card[data-placement="left"] {
  transform: scale(0.97) translateX(4px);
  transform-origin: top right;
}

.cengel-user-card[data-placement="right"] {
  transform: scale(0.97) translateX(-4px);
  transform-origin: top left;
}

.cengel-user-card[data-placement="below"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
}

.cengel-user-card--secondary {
  z-index: var(--z-user-card-nested, 10100);
}

.cengel-user-card--open,
.cengel-user-card--open[data-placement] {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translate(0, 0);
  pointer-events: auto;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
}

/* scroll kilidi: overflow degistirme — scrollbar kaybolunca flex reflow / uye listesi blink - 16.07.2026 07:09 */

html.cengel-user-card-scroll-lock .account-split__scroll,
html.cengel-user-card-scroll-lock .sp-sidebar__nav,
html.cengel-user-card-scroll-lock .space-members-panel__scroll {
  overscroll-behavior: none;
}

html.cengel-user-card-scroll-lock .ann-feed {
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-user-card,
    .cengel-user-card--open {
    transition: none;
    transform: none;
  }
}

.cengel-user-card__identity {
  margin-top: 12px;
}

.cengel-user-card__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, var(--foreground));
}

.cengel-user-card__name--link {
  text-decoration: none;
  color: var(--ink, var(--foreground));
  cursor: pointer;
}

.cengel-user-card__name--link:hover {
  text-decoration: none;
  opacity: 0.88;
}

.cengel-user-card__badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

.cengel-user-card__badge {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  cursor: default;
}

.cengel-user-card__badge-wrap {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

/* username — display name altinda; hover yalniz metin genisligi - 16.07.2026 03:05 */

.cengel-user-card__handle {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
}

.dark .cengel-user-card__handle {
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.cengel-user-card__handle--link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.cengel-user-card__handle--link:hover {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  text-decoration: none;
}

.dark .cengel-user-card__handle--link:hover {
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.cengel-user-card__about {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--ink, var(--foreground));
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* website / konum — about altinda sade inline meta - 16.07.2026 02:42 */

.cengel-user-card__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 0.35em;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
}

.cengel-user-card__meta-link {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cengel-user-card__meta-link:hover {
  color: var(--ink, var(--foreground));
}

.cengel-user-card__meta-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* orta nokta — satira orantili yan bosluk - 16.07.2026 02:42 */

.cengel-user-card__meta-sep {
  flex-shrink: 0;
  margin: 0 0.4em;
  opacity: 0.45;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cengel-user-card__meta-line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
}

.cengel-user-card__created-by {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--ink, var(--foreground));
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.cengel-user-card__created-by:hover {
  opacity: 0.88;
}

.cengel-user-card__restricted {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.cengel-user-card__panel {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: inherit;
}

.cengel-user-card__panel--state {
  /* dolu karta yakin ebat — acilista ziplama olmasin - 16.07.2026 03:59 */
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* bubble icin ekstra dikey alan; avatar 5px daha yukari - 16.07.2026 02:15 */

.cengel-user-card__banner {
  position: relative;
  height: 108px;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

/* kapak yuklu: 1500x500 = 3:1 (320px kartta ~107px) - 07.08.2026 07:30 */

.cengel-user-card__banner--cover {
  height: auto;
  aspect-ratio: 3 / 1;
}

.cengel-user-card__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.cengel-user-card__panel-body {
  margin-top: -53px;
  padding: 0 20px 20px;
}

.cengel-user-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 86px;
  height: 86px;
}

.cengel-user-card__avatar-wrap .presence-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 4px solid var(--background);
  background: var(--presence-offline);
  z-index: 1;
  cursor: default;
}

.cengel-user-card__avatar-wrap .presence-dot--online {
  background: var(--presence-online);
}

.cengel-user-card__avatar-wrap .presence-dot--working {
  background: var(--presence-working);
}

.cengel-user-card__avatar-wrap .presence-dot--idle {
  background: var(--presence-idle);
}

.cengel-user-card__avatar-wrap .presence-dot--dnd {
  background: var(--presence-dnd);
}

.cengel-user-card__avatar-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  text-decoration: none;
}

.cengel-user-card__avatar {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid var(--background);
  box-sizing: border-box;
  background: var(--surface-subtle, #f5f5f5);
  display: block;
  flex-shrink: 0;
  transition: filter 120ms ease;
}

.cengel-user-card__avatar-link:hover .cengel-user-card__avatar {
  /* opacity saydamlastirir; brightness opak kalir - 16.07.2026 16:00 */
  filter: brightness(0.88);
}

.cengel-user-card__locked {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3%, transparent));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.cengel-user-card__lock-icon {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.cengel-user-card__lock-copy {
  min-width: 0;
  flex: 1;
}

.cengel-user-card__lock-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.cengel-user-card__lock-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.cengel-user-card__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.cengel-user-card__loader-spin {
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.cengel-user-card__loader--error {
  color: var(--ink, var(--foreground));
}

[data-user-card-trigger],
[data-webhook-card-trigger] {
  cursor: pointer;
}

.ann-card__name--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.ann-card__name--trigger:not(.ann-card__name--role) {
  color: inherit;
}

.ann-card__name--trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ann-card__avatar-btn {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}

.ann-card__avatar-btn:hover .ann-card__avatar {
  opacity: 0.88;
}

.cengel-user-card__activity-card {
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3.5%, transparent));
  min-width: 0;
}

/* cover — 72px kare, badge sag alta - 15.07.2026 23:58 */

.cengel-user-card__activity-media {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  align-self: flex-start;
}

.cengel-user-card__activity-cover {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: var(--border);
}

.cengel-user-card__activity-cover--empty {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.cengel-user-card__activity-provider-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border: 1px solid var(--border);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.cengel-user-card__activity-provider-badge img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* body — cover ile ayni yukseklik, ust metin + alt player - 15.07.2026 23:58 */

.cengel-user-card__activity-body {
  flex: 1;
  min-width: 0;
  height: 72px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

.cengel-user-card__activity-label {
  margin: 0 0 4px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
  flex-shrink: 0;
}

.cengel-user-card__activity-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
}

a.cengel-user-card__activity-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cengel-user-card__activity-details,
.cengel-user-card__activity-album {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 0;
}

.cengel-user-card__activity-album {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

/* spotify'da album player ile cakisir, gizle - 15.07.2026 23:58 */

[data-activity-provider="spotify"] .cengel-user-card__activity-album {
  display: none;
}

/* spotify timeline — cover alt kenarina hizali - 15.07.2026 23:58 */

.cengel-user-card__activity-player {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

.cengel-user-card__activity-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.cengel-user-card__activity-track-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ink, var(--foreground));
  opacity: 0.65;
}

.cengel-user-card__activity-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 48%, transparent));
  font-variant-numeric: tabular-nums;
}

/* oyun elapsed — sadece sure sayaci - 25.07.2026 08:20 */

.cengel-user-card__activity-player--elapsed {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 48%, transparent));
  font-variant-numeric: tabular-nums;
}

/* banner (108px) ile body kesismi; bubble asagida, noktalar yukarida - 16.07.2026 05:22 */

.cengel-user-card__thought {
  position: absolute;
  top: 92px;
  left: 118px;
  z-index: 20;
  display: block;
  max-width: 172px;
  pointer-events: none;
}

/* popover ile ayni zemin; shadow daha belirgin - 16.07.2026 05:22 */

.cengel-user-card__thought-bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.5rem 0.8125rem;
  border-radius: 18px;
  border: none;
  background: var(--background);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, var(--foreground));
  pointer-events: auto;
}

.cengel-user-card__thought-emoji {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
  cursor: default;
}

.cengel-user-card__thought-emoji .cengel-emoji-wrap {
  pointer-events: auto;
}

/* nested tooltip gizle — floating body uzerinde - 16.07.2026 05:22 */

.cengel-user-card__thought-emoji .cengel-emoji-tooltip {
  display: none !important;
}

.cengel-user-card__thought-emoji .cengel-emoji,
.cengel-user-card__thought-emoji-img {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.cengel-user-card__thought-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* kuyruk noktalari — banner/avatar kesimine dogru sol-ust - 16.07.2026 05:22 */

.cengel-user-card__thought-tail {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border-radius: 999px;
  border: none;
  background: var(--background);
  border: 1px solid var(--border);
}

.cengel-user-card__thought-tail--1 {
  width: 12px;
  height: 12px;
  left: 6px;
  top: -6px;
}

.cengel-user-card__thought-tail--2 {
  width: 7px;
  height: 7px;
  left: -4px;
  top: -16px;
}

/* panel-body 20px gutterini asarak tam genislik border ve ic padding - 14.07.2026 18:10 */

.cengel-user-card__roles {
  margin: 0.75rem -20px 0;
  padding: 0.75rem 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* kilitli profil kutusu zaten borderli — ikinci cizgiyi kaldir - 14.07.2026 18:10 */

.cengel-user-card__locked + .cengel-user-card__roles {
  border-top: none;
  margin-top: 0.75rem;
  padding-top: 0;
}

/* restricted notunun borderi yeterli — cift cizgi olmasin - 14.07.2026 18:10 */

.cengel-user-card__restricted + .cengel-user-card__roles {
  border-top: none;
  margin-top: 0.5rem;
  padding-top: 0;
}

.cengel-user-card__roles-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  margin: 0 0 0.5rem;
}

.cengel-user-card__roles .sp-settings-role-chips {
  margin-top: 0;
  flex-wrap: wrap;
}

/* chip padding +1px — sadece user-card - 16.07.2026 06:32 */

.cengel-user-card__roles .sp-settings-role-chip {
  padding: calc(0.125rem + 1px) calc(0.375rem + 1px);
}

/* carpi ayri buton; chip tiklanmaz, yanlis kaldirma riski yok - 16.07.2026 06:51 */

.cengel-user-card__roles .sp-settings-role-chip--removable {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.cengel-user-card__roles .sp-settings-role-chip--removable:hover {
  background: color-mix(in srgb, var(--role-color, #6b7280) 15%, transparent);
}

.cengel-user-card__role-remove {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0 5px 5px 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  cursor: pointer;
  color: var(--role-color, #6b7280);
  background: color-mix(in srgb, var(--role-color, #6b7280) 32%, var(--background));
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.cengel-user-card__role-remove i {
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
}

.cengel-user-card__roles .sp-settings-role-chip--removable:hover .cengel-user-card__role-remove,
.cengel-user-card__roles .sp-settings-role-chip--removable:focus-within .cengel-user-card__role-remove {
  opacity: 1;
  pointer-events: auto;
}

.cengel-user-card__role-remove:hover,
.cengel-user-card__role-remove:focus-visible {
  background: color-mix(in srgb, var(--role-color, #6b7280) 48%, var(--background));
  color: color-mix(in srgb, var(--role-color, #6b7280) 85%, #000);
  outline: none;
}

.cengel-user-card__actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cengel-user-card__restricted + .cengel-user-card__actions {
  margin-top: 12px;
}

.cengel-user-card__friend-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cengel-user-card__friend-actions[data-status="pending_incoming"] {
  flex-direction: row;
  gap: 8px;
}

.cengel-user-card__friend-actions[data-status="pending_incoming"] .cengel-btn {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}

.cengel-user-card__friend-actions--busy {
  pointer-events: none;
}

.cengel-user-card__friend-actions .cengel-btn.hidden {
  display: none;
}

.cengel-user-card__friend-actions .cengel-btn.\!hidden {
  display: none !important;
}

.cengel-tooltip--floating {
  position: fixed;
  /* emoji picker (12010) uzerinde gorunsun - 16.07.2026 05:36 */
  z-index: var(--z-tooltip, 12020);
  max-width: 14rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-strong, var(--border));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: var(--sidebar-item-r, 9px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 160ms ease;
}

/* placement transform baslangiclari — her yerde 0.25rem kayma - 16.07.2026 03:24 */

.cengel-tooltip--floating[data-placement="top"] {
  transform: translateX(-50%) translateY(0.25rem);
  transform-origin: bottom center;
}

.cengel-tooltip--floating[data-placement="bottom"] {
  transform: translateX(-50%) translateY(-0.25rem);
  transform-origin: top center;
}

.cengel-tooltip--floating[data-placement="left"] {
  transform: translateY(-50%) translateX(0.25rem);
  transform-origin: right center;
}

.cengel-tooltip--floating[data-placement="right"] {
  transform: translateY(-50%) translateX(-0.25rem);
  transform-origin: left center;
}

.cengel-tooltip--floating.cengel-tooltip--open {
  opacity: 1;
  visibility: visible;
}

.cengel-tooltip--floating.cengel-tooltip--open[data-placement="top"],
.cengel-tooltip--floating.cengel-tooltip--open[data-placement="bottom"] {
  transform: translateX(-50%) translateY(0);
}

.cengel-tooltip--floating.cengel-tooltip--open[data-placement="left"],
.cengel-tooltip--floating.cengel-tooltip--open[data-placement="right"] {
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .cengel-tooltip--floating {
    transition: none;
  }
}

.social-profile-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.75rem 1rem 2.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 1.25rem;
  align-items: stretch;
  min-width: 0;
}

.social-profile-page__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.account-main--profile-timeline .social-profile-page {
  padding: 1.25rem 1.5rem 2.5rem;
}

.account-main--profile-timeline .social-profile-page__main {
  width: 100%;
}

.profile-sidebar-panel-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  overflow: visible;
}

.profile-sidebar-panel {
  display: flex;
  flex-direction: column;
  width: var(--account-split-sidebar-w, 320px);
  min-width: var(--account-split-sidebar-w, 320px);
  max-width: var(--account-split-sidebar-w, 320px);
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  background-color: transparent;
  overflow: visible;
  align-self: flex-start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.profile-sidebar-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  /* scrollbar gizli; kaydirma durur - 30.08.2026 18:05 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-sidebar-panel__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 1024px) {
  .social-profile-page,
    .account-main--profile-timeline .social-profile-page,
    .social-profile-page--standalone {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    padding: 0 1.25rem 2.5rem;
  }

  .social-profile-page__main {
    padding-top: 1.25rem;
  }

  .social-profile-page__main,
    .account-main--profile-timeline .social-profile-page__main,
    .social-profile-page--standalone > .social-profile-page__main {
    flex: 0 1 40rem;
    width: min(100%, 40rem);
    max-width: 40rem;
    min-width: 0;
  }

  .profile-sidebar-panel-column {
    position: relative;
    align-self: stretch;
    min-height: auto;
    max-height: none;
    height: auto;
  }

  .profile-sidebar-panel {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 auto;
    height: calc(100dvh - var(--eco-header-h, 64px));
    max-height: calc(100dvh - var(--eco-header-h, 64px));
  }

  .profile-sidebar-panel__scroll {
    box-sizing: border-box;
    height: 100%;
    max-height: calc(100dvh - var(--eco-header-h, 64px));
    padding-block: 1.25rem;
  }

  #account-main-content.account-main--profile-timeline {
    padding-bottom: 0;
  }
}

@media (max-width: 1023px) {
  .social-profile-page {
    align-items: center;
  }

  .social-profile-page__main,
    .profile-sidebar-panel-column {
    width: min(100%, 40rem);
  }

  .social-profile-page__main {
    flex: 0 1 auto;
  }

  .profile-sidebar-panel-column {
    height: auto;
    max-height: none;
  }

  .profile-sidebar-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
  }

  .profile-sidebar-panel__scroll {
    flex: none;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .account-main--profile-timeline .social-profile-page {
    padding: 0.75rem 1rem 2rem;
  }
}

@media (max-width: 639px) {
  .social-profile-page,
    .account-main--profile-timeline .social-profile-page {
    padding: 0.5rem 0.75rem 2rem;
  }
}

/* public (shell yok): kendi scrollu - 30.08.2026 18:05 */

.social-profile-page--standalone {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2.5rem;
  box-sizing: border-box;
  gap: 1.5rem;
}

/* account shell: tek scroll = account-split__scroll; 100vh nested yok - 30.08.2026 18:05 */

html.account-shell-root .account-main--profile-timeline .social-profile-page,
html.account-shell-root .account-main--profile-timeline .social-profile-page--standalone {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

@media (max-width: 1023px) {
  .social-profile-page--standalone {
    padding: 0.75rem 1rem 2rem;
  }

  .social-profile-page--standalone > .social-profile-page__main {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    min-height: 0;
  }

  html.account-shell-root .account-main--profile-timeline .social-profile-page--standalone {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

html.account-shell-root:has(.account-main--profile-timeline) .account-main-content-inner,
html.account-shell-root:has(.account-main--profile-timeline) #account-main-content {
  max-width: none;
  flex: none !important;
  min-height: auto !important;
  height: auto;
  padding-bottom: 0 !important;
  overflow: visible;
}

.account-split__scroll:has(#account-main-content.account-main--profile-timeline)
    > .account-split__content-pad {
  max-width: none;
  width: 100%;
  padding: 0;
  flex: none !important;
  min-height: auto !important;
  height: auto;
  overflow: visible;
}

.profile-sidebar-panel .social-profile-public__panel,
.profile-sidebar-panel .cengel-user-card__panel.social-profile-public__panel {
  --profile-avatar-size: 100%;
  --profile-avatar-height: auto;
  --profile-pad-x: 1.25rem;
  --profile-status-size: 30px;
  --profile-status-inset: -10px;
  --profile-avatar-radius: 12px;
  --profile-avatar-ring: 0;
  --profile-avatar-overlap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background);
  box-shadow: none;
  overflow: visible;
  max-height: none;
}

/* banner simdi gizli - 16.08.2026 20:15 */

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__banner,
.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__banner--cover {
  display: none !important;
}

/* avatar: ic padding + 4:5 - 16.08.2026 20:18 */

.profile-sidebar-panel .social-profile-public__avatar {
  position: relative;
  z-index: 2;
  width: calc(100% - (2 * var(--profile-pad-x)));
  height: auto;
  aspect-ratio: 4 / 5;
  margin: var(--profile-pad-x) var(--profile-pad-x) 0;
  overflow: visible;
}

.profile-sidebar-panel .social-profile-public__avatar > .cengel-user-card__avatar-wrap,
.profile-sidebar-panel .social-profile-public__avatar > .cengel-user-card__avatar,
.profile-sidebar-panel .social-profile-public__avatar > .cengel-user-card__avatar-wrap--status {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  margin: 0;
  width: 100%;
  height: 100%;
}

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap,
.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap--status {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: var(--profile-avatar-radius);
}

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap .cengel-user-card__avatar,
.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap--status .cengel-user-card__avatar,
.profile-sidebar-panel .social-profile-public__avatar > .cengel-user-card__avatar {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--profile-avatar-radius);
  border-width: 0;
  box-sizing: border-box;
}

/* presence: sag-alt kosede, 10px tasar - 16.08.2026 20:21 */

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap .presence-dot,
.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap--status .presence-dot {
  position: absolute;
  width: var(--profile-status-size);
  height: var(--profile-status-size);
  bottom: var(--profile-status-inset);
  right: var(--profile-status-inset);
  left: auto;
  top: auto;
  margin: 0;
  border-width: 4px;
  border-style: solid;
  border-color: var(--background);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: none;
  transform: none;
}

/* ic padding: isim/aksiyon/bio/tiles - 16.08.2026 20:15 */

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__panel-body {
  padding: 1rem var(--profile-pad-x) 1.25rem;
}

.profile-sidebar-panel .social-profile-public__hero,
.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__identity {
  align-items: flex-start;
  text-align: left;
}

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__name,
.profile-sidebar-panel .social-profile-public__name {
  font-size: 1.25rem;
  justify-content: flex-start;
}

.profile-sidebar-panel .social-profile-public__panel .cengel-user-card__identity {
  padding-top: 0;
}

.profile-sidebar-panel .social-profile-public__actions,
.profile-sidebar-panel .social-profile-public__owner-actions,
.profile-sidebar-panel .social-profile-public__friend-actions {
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}

.profile-sidebar-panel .social-profile-public__owner-actions .cengel-btn,
.profile-sidebar-panel .social-profile-public__friend-actions .cengel-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.profile-sidebar-panel .social-profile-showcase {
  margin-top: 0;
}

.profile-sidebar-panel .social-profile-showcase__body {
  grid-template-columns: minmax(0, 1fr);
}

.profile-sidebar-panel .social-profile-showcase__aside:only-child {
  max-width: none;
}

@media (max-width: 1023px) {
  .profile-sidebar-panel .social-profile-public__panel {
    --profile-avatar-size: 5.5rem;
    --profile-avatar-height: 5.5rem;
    --profile-pad-x: 1rem;
    --profile-status-size: 1.75rem;
    --profile-status-inset: -0.5rem;
  }

  .profile-sidebar-panel .social-profile-public__avatar {
    width: var(--profile-avatar-size);
    height: var(--profile-avatar-height);
    aspect-ratio: 1;
    margin: 1rem var(--profile-pad-x) 0;
  }

  .profile-sidebar-panel .social-profile-public__panel .cengel-user-card__panel-body {
    padding: 0.875rem var(--profile-pad-x) 1rem;
  }
}

@media (max-width: 639px) {
  .profile-sidebar-panel .social-profile-public__panel {
    --profile-avatar-size: 4.5rem;
    --profile-avatar-height: 4.5rem;
  }
}

.social-profile-public__panel {
  width: 100%;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  /* genislik; yukseklik 4:5 - 16.08.2026 19:37 */
  --profile-avatar-size: 147px;
  --profile-avatar-height: calc(var(--profile-avatar-size) * 5 / 4);
  --profile-avatar-radius: 14px;
  --profile-avatar-overlap: 0.7;
  --profile-pad-x: 1.25rem;
  /* halka + status; nokta sag-alt kosede - 16.08.2026 19:37 */
  --profile-avatar-ring: 6px;
  --profile-status-size: 36px;
  --profile-status-inset: 4px;
}

.cengel-user-card__panel.social-profile-public__panel {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

/* 1500x500 = 3:1 tam oran - 16.08.2026 19:37 */

.social-profile-public__panel .cengel-user-card__banner,
.social-profile-public__panel .cengel-user-card__banner--cover {
  z-index: 0;
  height: auto;
  aspect-ratio: 3 / 1;
  border-radius: 24px 24px 0 0;
  background-color: var(--surface-active);
}

.social-profile-public__panel .cengel-user-card__banner-img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* avatar hero disinda; akista yer kaplamaz - 16.08.2026 19:37 */

.social-profile-public__avatar {
  position: relative;
  z-index: 2;
  width: var(--profile-avatar-size);
  height: 0;
  margin-left: var(--profile-pad-x);
}

.social-profile-public__avatar > .cengel-user-card__avatar-wrap,
.social-profile-public__avatar > .cengel-user-card__avatar,
.social-profile-public__avatar > .cengel-user-card__avatar-wrap--status {
  position: absolute;
  left: 0;
  top: calc(var(--profile-avatar-height) * var(--profile-avatar-overlap) * -1);
  margin: 0;
  width: var(--profile-avatar-size);
  height: var(--profile-avatar-height);
}

.social-profile-public__panel .cengel-user-card__panel-body {
  position: relative;
  z-index: 1;
  margin-top: 0;
  /* avatarin altta kalan kisim — ekstra bosluk yok - 16.08.2026 19:37 */
  padding: calc(var(--profile-avatar-height) * (1 - var(--profile-avatar-overlap)))
        var(--profile-pad-x) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-profile-public__hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-right: 0;
}

.social-profile-public__panel .cengel-user-card__avatar-wrap,
.social-profile-public__panel .cengel-user-card__avatar {
  width: var(--profile-avatar-size);
  height: var(--profile-avatar-height);
  border-radius: var(--profile-avatar-radius);
}

.social-profile-public__panel .cengel-user-card__avatar {
  border-width: var(--profile-avatar-ring);
}

.social-profile-public__panel .cengel-user-card__avatar-wrap .presence-dot {
  width: var(--profile-status-size);
  height: var(--profile-status-size);
  border-width: var(--profile-avatar-ring);
  bottom: var(--profile-status-inset);
  right: var(--profile-status-inset);
}

.social-profile-public__panel .cengel-user-card__avatar-wrap--status {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--profile-avatar-radius);
}

.social-profile-public__panel .cengel-user-card__avatar-wrap--status:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

/* bubble avatar altina; dar sidebarda yatay yer yok - 16.08.2026 19:37 */

.social-profile-public__panel .cengel-user-card__thought {
  position: relative;
  top: auto;
  left: auto;
  margin: 0.35rem 0 0;
  max-width: 100%;
  z-index: 3;
}

.social-profile-public__panel .cengel-user-card__identity {
  min-width: 0;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
}

.social-profile-public__panel .cengel-user-card__name,
.social-profile-public__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  max-width: 100%;
  font-size: 1.375rem;
  line-height: 1.2;
}

.social-profile-public__display-name {
  min-width: 0;
}

.social-profile-public__panel .cengel-user-card__handle,
.social-profile-public__handle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  cursor: default;
}

.social-profile-public__handle[data-cengel-tooltip] {
  cursor: help;
}

.social-profile-public__panel .cengel-user-card__about {
  display: block;
  margin-top: 0;
  overflow: visible;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
  word-break: break-word;
  /* account shell select-none; bio kopyalanabilsin - 16.08.2026 19:42 */
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
  cursor: text;
}

.social-profile-public__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.social-profile-public__fact {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__fact i {
  flex-shrink: 0;
  font-size: 0.9375rem;
}

.social-profile-public__facts + .cengel-user-card__about {
  margin-top: 0.65rem;
}

.social-profile-public__restricted {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__mutual {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

/* normal akis: kimlik altinda tam genislik - 16.08.2026 19:37 */

.social-profile-public__actions {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.social-profile-public__owner-actions,
.social-profile-public__friend-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.social-profile-public__owner-actions .cengel-btn,
.social-profile-public__friend-actions .cengel-btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.social-profile-public__friend-actions .cengel-btn.hidden {
  display: none;
}

.social-profile-public__friend-actions .cengel-btn.\!hidden {
  display: none !important;
}

.social-profile-public__sign-in-hint {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: left;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__badges {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  line-height: 0;
  margin: 0;
}

.social-profile-public__badges .uf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
  vertical-align: middle;
}

.social-profile-public__badges .uf-badge__img {
  width: 1.5rem;
  height: 1.5rem;
  max-height: none;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 639px) {
  .social-profile-public__panel {
    --profile-avatar-size: 131px;
    --profile-pad-x: 1rem;
    --profile-status-size: 32px;
  }

  .social-profile-public__panel .cengel-user-card__panel-body {
    padding: calc(var(--profile-avatar-height) * (1 - var(--profile-avatar-overlap)))
            var(--profile-pad-x) 1.25rem;
  }

  .social-profile-public__panel .cengel-user-card__name,
    .social-profile-public__name {
    font-size: 1.25rem;
  }

  .social-profile-public__badges .uf-badge__img {
    width: 1.375rem;
    height: 1.375rem;
  }
}

.social-profile-page__header .social-profile-public__panel {
  overflow: visible;
  --profile-avatar-size: 168px;
  --profile-pad-x: 1.5rem;
  --profile-avatar-height: var(--profile-avatar-size);
  --profile-avatar-radius: 999px;
  --profile-avatar-overlap: 0.55;
  --profile-avatar-ring: 4px;
  --profile-status-size: 14px;
  --profile-status-inset: 2px;
}

.social-profile-page__header .cengel-user-card__banner,
.social-profile-page__header .cengel-user-card__banner--cover {
  max-height: 22rem;
}

.social-profile-page__header .cengel-user-card__avatar {
  -o-object-fit: cover;
     object-fit: cover;
  border-color: var(--surface);
}

/* kare kosesi dairenin disinda; nokta cevrede, halka kart zemini - 17.10.2026 22:10 */

.social-profile-page__header .cengel-user-card__avatar-wrap .presence-dot {
  width: var(--profile-status-size);
  height: var(--profile-status-size);
  border-width: 2px;
  border-color: var(--surface);
  right: calc(14.65% - var(--profile-status-size) / 2);
  bottom: calc(14.65% - var(--profile-status-size) / 2);
}

.social-profile-page__header .cengel-user-card__panel-body {
  padding-bottom: 1.5rem;
}

.social-profile-page__header .social-profile-public__panel .cengel-user-card__identity {
  padding-top: 0;
}

.social-profile-page__header .cengel-user-card__panel-body > .cengel-user-card__thought {
  max-width: 22rem;
}

.social-profile-public__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-profile-public__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__stat b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--foreground));
}

@media (min-width: 640px) {
  .social-profile-page__header .cengel-user-card__panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: end;
    padding-top: 0.85rem;
  }

  .social-profile-page__header .social-profile-public__hero {
    grid-column: 1;
    grid-row: 1;
    margin-left: calc(var(--profile-avatar-size) + 0.9rem);
    min-height: calc(var(--profile-avatar-height) * (1 - var(--profile-avatar-overlap)) - 0.85rem);
    justify-content: flex-end;
  }

  .social-profile-page__header .social-profile-public__actions {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-height: calc(var(--profile-avatar-height) * (1 - var(--profile-avatar-overlap)) - 0.85rem);
    justify-content: flex-end;
  }

  .social-profile-page__header .social-profile-public__owner-actions,
    .social-profile-page__header .social-profile-public__friend-actions {
    justify-content: flex-end;
    width: auto;
  }

  .social-profile-page__header .social-profile-public__owner-actions .cengel-btn,
    .social-profile-page__header .social-profile-public__friend-actions .cengel-btn {
    flex: 0 0 auto;
  }

  /* giris notu buton degil; ismin altinda - 16.10.2026 19:50 */

  .social-profile-page__header .cengel-user-card__panel-body:has(.social-profile-public__sign-in-hint) .social-profile-public__hero {
    grid-column: 1 / -1;
  }

  .social-profile-page__header .social-profile-public__actions:has(.social-profile-public__sign-in-hint) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    min-height: 0;
    margin-left: calc(var(--profile-avatar-size) + 0.9rem);
    justify-content: flex-start;
  }

  .social-profile-page__header .social-profile-public__stats {
    margin-left: calc(var(--profile-avatar-size) + 0.9rem);
  }

  .social-profile-page__header .social-profile-public__stats,
    .social-profile-page__header .cengel-user-card__panel-body > .cengel-user-card__thought,
    .social-profile-page__header .cengel-user-card__about,
    .social-profile-page__header .social-profile-showcase,
    .social-profile-page__header .shared-album,
    .social-profile-page__header #social-counts {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .social-profile-page__header .social-profile-public__panel {
    --profile-avatar-size: 131px;
    --profile-status-size: 12px;
    --profile-pad-x: 1rem;
  }
}

.social-profile-page.social-profile-page--header {
  --profile-page-max-w: 70rem;
  width: min(100%, var(--profile-page-max-w));
  max-width: var(--profile-page-max-w);
  margin-inline: auto;
  flex-direction: column;
  align-items: stretch;
}

.social-profile-page--header .social-profile-page__header {
  width: 100%;
  max-width: none;
}

.social-profile-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.social-profile-page__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.social-profile-aside-card {
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  background: var(--surface);
  padding: 1rem;
  box-shadow: none;
}

.social-profile-aside-card__title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.social-profile-aside-card__about {
  margin: 0;
  max-width: 60ch;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.social-profile-page__aside .social-profile-showcase__section,
.social-profile-page__aside .social-profile-showcase__aside {
  border-color: var(--border-strong);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: none;
}

.social-profile-page__aside .shared-album {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0;
}

.social-profile-page__aside .shared-album__owner-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0;
}

.social-profile-page__aside .shared-album__open,
.social-profile-page__aside .shared-album__new {
  width: auto;
}

.social-profile-page__aside .shared-album__list {
  flex: 1 0 100%;
}

.social-profile-page--header .post-timeline__item,
.social-profile-page--header .post-card,
.social-profile-page--header .post-composer,
.social-profile-page--header .post-timeline__empty,
.social-profile-page--header .social-profile-public__panel {
  max-width: none;
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: none;
}

.social-profile-page.social-profile-page--header .social-profile-page__main {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-top: 0;
}

@media (min-width: 1024px) {
  .account-main--profile-timeline .social-profile-page.social-profile-page--header,
    .social-profile-page.social-profile-page--header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .social-profile-page__body {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
  }

  .social-profile-page__aside {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}

.social-profile-showcase {
  margin-top: 0.25rem;
}

.social-profile-showcase__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-profile-showcase__section,
.social-profile-showcase__aside {
  --showcase-box: var(--surface-subtle, color-mix(in srgb, var(--foreground) 4%, var(--background)));
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--showcase-box);
}

.social-profile-showcase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.social-profile-showcase__pane {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem;
}

/* baglantilar: featured og icin tutarli ic bosluk - 16.08.2026 20:26 */

.social-profile-showcase__pane--links {
  padding: 1rem;
  gap: 0;
}

.social-profile-showcase__pane--links .social-profile-showcase__links {
  min-width: 0;
}

.social-profile-showcase__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.social-profile-showcase__title,
.social-profile-showcase__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
}

.social-profile-showcase__title {
  font-size: 0.875rem;
  color: var(--ink, var(--foreground));
}

.social-profile-showcase__label {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-showcase__title i,
.social-profile-showcase__label i {
  font-size: 0.9375rem;
}

.social-profile-showcase__count {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-showcase__aside .social-profile-public__facts {
  margin: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.social-profile-showcase__more-btn {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, var(--foreground));
  cursor: pointer;
}

.social-profile-showcase__more-btn:hover {
  filter: brightness(1.08);
}

.social-profile-showcase__more-btn:focus-visible,
.social-profile-friend-preview:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.social-profile-showcase__friends {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.social-profile-friend-preview,
.social-profile-friend-more {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
}

.social-profile-friend-preview {
  position: relative;
}

.social-profile-friend-preview:hover,
.social-profile-friend-preview:focus-visible {
  z-index: 2;
}

.social-profile-friend-preview:hover img {
  filter: brightness(0.92);
}

.social-profile-friend-preview img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-profile-friend-more {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink, var(--foreground));
}

.social-profile-showcase__mutual {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-showcase__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.social-profile-showcase .ann-link-preview,
.social-profile-showcase .social-profile-link-preview,
.social-profile-showcase .social-profile-link-preview:hover {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.social-profile-showcase .ann-link-preview:hover,
.social-profile-showcase .ann-link-preview:focus-within {
  border-color: transparent;
}

.social-profile-showcase .ann-link-preview--summary .ann-link-preview__inner {
  min-height: 0;
  gap: 0.75rem;
  align-items: flex-start;
}

.social-profile-showcase .ann-link-preview__body {
  min-width: 0;
  padding: 0.1rem 0;
}

.social-profile-showcase .ann-link-preview__description {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.social-profile-showcase .ann-link-preview--summary .ann-link-preview__thumb-btn {
  width: 4.5rem;
  min-width: 4.5rem;
  min-height: 4.5rem;
  border-left: 0;
  border-radius: 8px;
  overflow: hidden;
}

.social-profile-showcase .ann-link-preview--summary .ann-link-preview__thumb {
  min-height: 4.5rem;
}

.social-profile-showcase .social-profile-link-preview {
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  min-height: 0;
  gap: 0.55rem;
  padding: 0.15rem 0;
}

.social-profile-showcase .social-profile-link-preview__mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0;
  background: transparent;
}

.social-profile-links-modal__panel {
  width: min(24rem, calc(100vw - 2rem));
}

.social-profile-links-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.social-profile-links-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, var(--foreground));
}

.social-profile-links-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, var(--foreground));
  cursor: pointer;
}

.social-profile-links-modal__close:hover {
  filter: brightness(1.08);
}

.social-profile-links-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.social-profile-links-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: min(24rem, 60vh);
  overflow: auto;
}

.social-profile-link-preview {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 4%, transparent));
  color: inherit;
  text-decoration: none;
}

.social-profile-link-preview:hover {
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
}

.social-profile-link-preview:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.social-profile-link-preview__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 7px;
  background: var(--background);
  color: var(--ink, var(--foreground));
}

.social-profile-link-preview__mark i {
  font-size: 1.05rem;
}

.social-profile-link-preview__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.social-profile-link-preview__label,
.social-profile-link-preview__domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-profile-link-preview__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, var(--foreground));
}

.social-profile-link-preview__domain {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-link-preview__arrow {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.post-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.post-timeline__feed {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  align-items: stretch;
}

.post-timeline__item {
  min-width: 0;
  max-width: 40rem;
  width: 100%;
}

.post-timeline__empty {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 1.25rem);
  background: var(--background);
}

.post-timeline__empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.post-timeline__empty-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.post-composer {
  max-width: 40rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 1.25rem);
  background: var(--background);
  padding: 1rem 1.125rem;
  box-sizing: border-box;
}

.post-composer__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  align-items: start;
}

.post-composer__avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: var(--background);
}

.post-composer__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.post-composer__line {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.post-composer__box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 0.2rem 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 4%, transparent));
}

.post-composer__tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

.post-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.post-composer__text {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 2rem;
  max-height: 12rem;
  padding: 0.45rem 0.2rem;
  color: var(--ink, var(--foreground));
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35rem;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-composer__text:focus {
  outline: none;
}

.post-composer__text::-moz-placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.post-composer__text::placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.post-composer__text.ann-compose__textarea--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink, var(--foreground));
}

.post-composer__field .ann-compose__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0.45rem 0.2rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35rem;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--ink, var(--foreground));
}

.post-composer__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  cursor: pointer;
}

.post-composer__tool i {
  font-size: 1.125rem;
  line-height: 1;
}

.post-composer__tool:hover,
.post-composer__tool[aria-expanded='true'] {
  color: var(--ink, var(--foreground));
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 5%, transparent));
}

.post-composer__tool:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 1px;
}

.post-composer__vis {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
}

.post-composer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  cursor: pointer;
}

.post-composer__submit > i {
  font-size: 1.25rem;
  line-height: 1;
}

.post-composer__submit:hover:not(:disabled) {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6.5%, transparent);
}

.post-composer__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.post-composer__error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger, #dc2626);
}

.post-edit-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.post-edit-modal__text {
  width: 100%;
  min-height: 9rem;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle, var(--background));
  color: var(--foreground);
  padding: 0.75rem;
  font: inherit;
  line-height: 1.5;
}

.post-edit-modal__text:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.post-edit-modal__tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.post-edit-modal__error {
  margin: 0;
  color: var(--danger, #b42318);
  font-size: 0.875rem;
}

.post-card {
  --post-card-pad-x: 1rem;
  --post-card-pad-y: 1rem;
  --post-card-avatar: 46px;
  --post-card-stack-gap: 0.7rem;
  max-width: 40rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 1.25rem);
  background: var(--background);
  padding: var(--post-card-pad-y) var(--post-card-pad-x) 0;
  overflow: visible;
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.post-card--flash {
  outline: 2px solid color-mix(in srgb, var(--foreground) 25%, transparent);
}

.post-card__byline {
  display: grid;
  grid-template-columns: var(--post-card-avatar) minmax(0, 1fr);
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--post-card-stack-gap, 0.7rem);
}

.post-card__byline:has(.post-card__menu) {
  grid-template-columns: var(--post-card-avatar) minmax(0, 1fr) auto;
}

.post-card__avatar {
  width: var(--post-card-avatar);
  height: var(--post-card-avatar);
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 4%, transparent));
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.post-card__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  width: 100%;
}

.post-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 0;
}

.post-card__name {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink, var(--foreground));
  text-decoration: none;
  transition: -webkit-text-decoration 120ms ease-in-out;
  transition: text-decoration 120ms ease-in-out;
  transition: text-decoration 120ms ease-in-out, -webkit-text-decoration 120ms ease-in-out;
}

.post-card__name:hover {
  text-decoration: underline;
}

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 52%, transparent));
}

.post-card__menu {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-self: start;
}

.post-card__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  min-width: 0;
  width: 100%;
  margin-bottom: var(--post-card-stack-gap, 0.7rem);
}

.post-card__content:has(> .post-card__media:last-child) {
  margin-bottom: 0;
}

.post-card__body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink, var(--foreground));
  cursor: text;
}

.post-card__body .cengel-emoji {
  display: inline;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
}

.post-card__body a {
  color: var(--link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.post-card__body .cengel-mention,
.post-card__body .cengel-mention--all {
  color: var(--link);
  font-weight: 500;
  cursor: pointer;
}

.post-card__time {
  display: inline;
  font-size: inherit;
  color: inherit;
  cursor: default;
}

.post-card__audience {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: inherit;
  color: inherit;
}

.post-card__meta:has(.post-card__time) .post-card__audience::before {
  content: "·";
  margin-right: 0.15rem;
}

.post-card__audience > i {
  font-size: 0.95em;
  line-height: 1;
}

.post-card__footer {
  display: flex;
  align-items: center;
  width: calc(100% + (2 * var(--post-card-pad-x, 1.125rem)));
  max-width: none;
  margin: 0 calc(-1 * var(--post-card-pad-x, 1.125rem));
  padding: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.post-card.is-comments-open .post-card__footer,
.post-card:has([data-post-comments]:not([hidden])) .post-card__footer {
  border-bottom: 1px solid var(--border);
}

.post-card__stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--post-card-stack-gap, 0.7rem);
}

.post-card__content:has(> .post-card__media:last-child) + .post-card__stats:not([hidden]) {
  padding-block: var(--post-card-stack-gap, 0.7rem);
  margin-bottom: 0;
}

.post-card__stats[hidden] {
  display: none;
}

.post-card__stats-social {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.post-card__stats-social[hidden] {
  display: none;
}

.post-card__likers {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  isolation: isolate;
  flex-shrink: 0;
}

.post-card__likers[hidden] {
  display: none;
}

.post-card__liker {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin-left: -7px;
  border: 2px solid var(--background);
  background: var(--background);
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.post-card__likers > .post-card__liker:first-child {
  margin-left: 0;
}

.post-card__stats-copy {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.post-card__stats-likes,
.post-card__stats-comments,
.post-card__stats-reposts {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  white-space: nowrap;
}

.post-card__stats-likes {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-card__stats-comments,
.post-card__stats-reposts {
  flex: 0 0 auto;
}

.post-card__stats-copy > :not([hidden]) + :not([hidden])::before {
  content: '·';
  margin: 0 0.4em;
  font-weight: 400;
}

.post-card__stats-likes[hidden],
.post-card__stats-comments[hidden],
.post-card__stats-reposts[hidden] {
  display: none;
}

.post-card__stats-likes b,
.post-card__stats-comments b,
.post-card__stats-reposts b,
.post-card__stats-others {
  font-weight: 700;
  color: var(--ink, var(--foreground));
}

.post-card__stats-name,
.post-card__stats-others {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink, var(--foreground));
  cursor: pointer;
}

.post-card__stats-name:hover,
.post-card__stats-others:hover {
  text-decoration: underline;
}

.post-card__stats-name:focus-visible,
.post-card__stats-others:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.post-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  gap: 0.15rem;
  padding-block: 0.35rem;
  padding-inline: var(--post-card-pad-x, 1.125rem);
}

.post-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card__action > i {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
}

button.post-card__action:hover {
  background: color-mix(in srgb, var(--foreground) 6.5%, transparent);
  color: var(--foreground);
}

button.post-card__action:active {
  filter: brightness(0.97);
}

.post-card__action-count {
  display: inline-block;
  min-width: 1ch;
}

.post-card__action-count:empty {
  display: none;
}

.post-card__action--heart.is-active {
  color: #e11d48;
  background: transparent;
}

button.post-card__action--heart.is-active:hover {
  color: #e11d48;
  background: color-mix(in srgb, #e11d48 10%, transparent);
}

button.post-card__action:disabled,
.post-card__action--pending {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

span.post-card__action {
  cursor: default;
  pointer-events: none;
}

/* avatar sol kenariyla ayni hiza; padding dort yonde esit - 23.08.2026 05:41 */

.post-card__repost-flag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.post-card__repost-flag > i {
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.post-card__repost-flag > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-card__repost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.post-card__action--repost-on,
button.post-card__action.is-active.post-card__action--repost-on {
  color: #0d9488;
}

button.post-card__action--repost-on:hover,
button.post-card__action.is-active.post-card__action--repost-on:hover {
  color: #0d9488;
  background: color-mix(in srgb, #0d9488 10%, transparent);
}

.post-card__embed {
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: var(--radius-card, 1rem);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.post-card__embed--unavailable {
  padding: 0.9rem 1rem;
}

.post-card__embed-unavailable {
  margin: 0;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 0.875rem;
}

.post-card__embed-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.post-card__embed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.post-card__embed-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.post-card__embed-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
  line-height: 1.25;
}

a.post-card__embed-name:hover {
  text-decoration: underline;
}

.post-card__embed-meta {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.post-card__embed-body {
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* kompakt onizleme — max 3 yan yana, full-bleed yok - 23.08.2026 05:43 */

.post-card__embed-media {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
  margin-top: 0.65rem;
  overflow: hidden;
  border-radius: 0.65rem;
  box-sizing: border-box;
}

.post-card__embed-media--n1 {
  grid-template-columns: minmax(0, 1fr);
}

.post-card__embed-media--n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-card__embed-media-item {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.post-card__embed-media-item img,
.post-card__embed-media-empty {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.post-card__embed-media-empty {
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.post-card__embed-media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.1rem;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.post-card__embed-media-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #0f0f13 52%, transparent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}

/* eski full media render embed icinde tasmasin - 23.08.2026 05:43 */

.post-card__embed .post-card__media {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  max-height: 12rem;
}

.post-quote-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.post-quote-modal__toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.55rem;
}

.post-likes-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.post-likes-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: min(24rem, 60vh);
  overflow: auto;
}

.post-likes-modal__list--empty {
  padding: 1.25rem 0;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  font-size: 0.875rem;
  text-align: center;
}

.post-likes-modal__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.post-likes-modal__row:hover {
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 6%, transparent));
}

.post-likes-modal__row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.post-likes-modal__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 6%, transparent));
}

.post-likes-modal__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.post-likes-modal__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink, var(--foreground));
}

.post-likes-modal__handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 52%, transparent));
}

.post-likes-modal__body .cengel-modal__actions[hidden] {
  display: none;
}

.post-card__media--slider {
  overflow: hidden;
}

.post-card__media-track {
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card__media--slider .post-card__media-item,
.post-card__media--slider .post-card__media-status {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: none;
}

.post-card__media--slider .post-card__media-item img,
.post-card__media--slider .post-card__media-item .cengel-video-player,
.post-card__media--slider .post-card__media-item .cengel-video-player__video {
  width: 100%;
  height: 100%;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-card__media-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  color: var(--foreground);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card__media-nav > i {
  font-size: 1rem;
  line-height: 1;
}

.post-card__media-nav--prev {
  left: 0.65rem;
}

.post-card__media-nav--next {
  right: 0.65rem;
}

.post-card__media-nav:hover,
.post-card__media-nav:focus-visible {
  filter: brightness(1.06);
}

.post-card__media--slider:hover .post-card__media-nav,
.post-card__media--slider:focus-within .post-card__media-nav {
  opacity: 1;
  pointer-events: auto;
}

.post-card__media-dots {
  position: absolute;
  left: 50%;
  bottom: 0.65rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 38%, transparent);
  transform: translateX(-50%);
}

.post-card__media-dot {
  width: 0.4rem;
  height: 0.4rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 55%, transparent);
  cursor: pointer;
}

.post-card__media-dot.is-active {
  background: var(--background);
}

@media (hover: none) {
  .post-card__media-nav {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card__media-track,
  .post-card__media-nav {
    transition: none;
  }
}

.post-card__comments {
  --post-comment-avatar: 40px;
  --post-comment-col-gap: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-block: var(--post-card-pad-x, 1.125rem);
  padding-inline: 0;
  position: relative;
}

.post-card__comments:not(:has(.post-comment)):not(:has(.post-card__comments-empty)) {
  gap: 0;
}

.post-card__comments[hidden] {
  display: none;
}

.post-card__comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
}

.post-card__comments-list:empty {
  display: none;
}

.post-card__comments-empty,
.post-card__comments-status {
  margin: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.post-card__comments-more {
  display: grid;
  grid-template-columns: var(--post-comment-avatar, 40px) minmax(0, 1fr);
  -moz-column-gap: var(--post-comment-col-gap, 0.55rem);
       column-gap: var(--post-comment-col-gap, 0.55rem);
  align-items: center;
}

.post-card__comments-more[hidden] {
  display: none;
}

.post-card__comments-more-btn {
  grid-column: 2;
  justify-self: start;
}

.post-card__comments-more-btn[aria-busy='true'] .cengel-btn__icon {
  opacity: 0.45;
}

.post-comment-thread {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
}

.post-comment {
  display: grid;
  grid-template-columns: var(--post-comment-avatar, 40px) minmax(0, 1fr);
  -moz-column-gap: var(--post-comment-col-gap, 0.55rem);
       column-gap: var(--post-comment-col-gap, 0.55rem);
  align-items: start;
  position: relative;
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.post-comment__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--post-comment-avatar, 40px);
  position: relative;
}

.post-comment__avatar {
  width: var(--post-comment-avatar, 40px);
  height: var(--post-comment-avatar, 40px);
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  background: var(--background);
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.post-comment__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
}

.post-comment__row {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.post-comment__bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.6rem;
  border-radius: 0.75rem;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 5%, transparent));
}

.post-comment__row:has(.post-comment__menu) .post-comment__bubble {
  max-width: calc(100% - 1.4rem);
}

.post-comment__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 0;
}

.post-comment__who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.post-comment__name {
  display: inline-block;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--ink, var(--foreground));
  text-decoration: none;
  transition: -webkit-text-decoration 120ms ease-in-out;
  transition: text-decoration 120ms ease-in-out;
  transition: text-decoration 120ms ease-in-out, -webkit-text-decoration 120ms ease-in-out;
}

.post-comment__name:hover {
  text-decoration: underline;
}

.post-comment__menu {
  position: relative;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.post-comment__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-comment__menu-trigger:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
}

.post-comment__menu-trigger:active {
  transform: scale(0.92);
}

.post-comment__menu-trigger > i {
  font-size: 0.95rem;
}

.post-comment__body {
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink, var(--foreground));
  cursor: text;
}

.post-comment__body .cengel-emoji {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}

/* media spacing gap tarafindan kontrol ediliyor - 21.08.2026 15:58 */

.post-comment__time {
  display: inline;
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 52%, transparent));
  cursor: default;
}

.post-comment-thread {
  --post-thread-rail: color-mix(in srgb, var(--foreground) 18%, var(--background));
  --post-thread-stroke: 1.5px;
  --post-thread-radius: 10px;
  --post-thread-gap: 0.65rem;
  --post-thread-avatar-gap: 5px;
  --post-thread-rail-x: calc(var(--post-comment-avatar, 40px) / 2);
  --post-thread-indent: calc(
    var(--post-comment-avatar, 40px) + var(--post-comment-col-gap, 0.55rem)
  );
  --post-thread-reply-rail-x: calc(
    -1 * var(--post-thread-indent) + var(--post-thread-rail-x)
  );
  --post-thread-stub: calc(
    var(--post-thread-indent) - var(--post-thread-rail-x) - var(--post-thread-avatar-gap)
  );
  --post-thread-l-left: calc(
    var(--post-thread-reply-rail-x) - var(--post-thread-stroke) / 2
  );
  --post-thread-l-width: calc(
    var(--post-thread-stub) + var(--post-thread-stroke) / 2
  );
  --post-thread-l-height: calc(
    var(--post-thread-rail-x) + var(--post-thread-stroke) / 2
  );
  --post-thread-join: calc(
    var(--post-thread-l-height) - var(--post-thread-radius)
  );
}

.post-comment-thread:has(.post-comment--reply, .post-comment-composer-inline)
  > .post-comment:not(.post-comment--reply) {
  align-items: stretch;
}

.post-comment-thread:has(.post-comment--reply, .post-comment-composer-inline)
  > .post-comment:not(.post-comment--reply)
  .post-comment__rail::after {
  content: '';
  display: block;
  flex: 1 1 auto;
  width: var(--post-thread-stroke);
  min-height: 0.25rem;
  margin-top: var(--post-thread-avatar-gap);
  background: var(--post-thread-rail);
  pointer-events: none;
}

.post-comment-thread .post-comment-composer-inline {
  position: relative;
  margin-left: var(--post-thread-indent);
}

.post-comment-thread .post-comment--reply {
  margin-left: var(--post-thread-indent);
}

.post-comment-thread .post-comment--reply::after,
.post-comment-thread .post-comment-composer-inline::after {
  content: '';
  position: absolute;
  left: var(--post-thread-l-left);
  top: 0;
  width: var(--post-thread-l-width);
  height: var(--post-thread-l-height);
  box-sizing: border-box;
  border-left: var(--post-thread-stroke) solid var(--post-thread-rail);
  border-bottom: var(--post-thread-stroke) solid var(--post-thread-rail);
  border-bottom-left-radius: var(--post-thread-radius);
  pointer-events: none;
}

.post-comment-thread
  .post-comment:not(.post-comment--reply)
  + .post-comment--reply::after,
.post-comment-thread
  .post-comment:not(.post-comment--reply)
  + .post-comment-composer-inline::after {
  top: calc(-1 * var(--post-thread-gap));
  height: calc(var(--post-thread-gap) + var(--post-thread-l-height));
}

.post-comment-thread .post-comment--reply:not(:last-child)::before {
  content: '';
  position: absolute;
  left: var(--post-thread-l-left);
  top: var(--post-thread-join);
  bottom: calc(-1 * var(--post-thread-gap));
  width: var(--post-thread-stroke);
  background: var(--post-thread-rail);
  pointer-events: none;
}

.post-comment__actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0;
  padding-left: 0.15rem;
}

.post-comment__like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

button.post-comment__like:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

button.post-comment__like:active:not(:disabled) {
  transform: scale(0.94);
}

.post-comment__like > i {
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-comment__like-count,
.post-comment__reply-count {
  display: inline-flex;
  align-items: center;
  min-width: 1ch;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0.25rem 0.4rem;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

button.post-comment__like-count {
  cursor: pointer;
}

.post-comment__like-count:empty,
.post-comment__reply-count:empty {
  display: none;
}

button.post-comment__like-count:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

.post-comment__actions:has(.post-comment__like.is-active) > .post-comment__like-count {
  color: #e11d48;
}

.post-comment__actions:has(.post-comment__like.is-active) > button.post-comment__like-count:hover {
  color: #be123c;
  background: color-mix(in srgb, #e11d48 12%, transparent);
}

.post-comment__like.is-active {
  color: #e11d48;
  background: color-mix(in srgb, #e11d48 6%, transparent);
}

button.post-comment__like.is-active:hover:not(:disabled) {
  color: #be123c;
  background: color-mix(in srgb, #e11d48 12%, transparent);
}

.post-comment__like.is-active > i {
  animation: heartBeatSmall 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes heartBeatSmall {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

button.post-comment__like:disabled {
  cursor: default;
  opacity: 0.72;
}

span.post-comment__like {
  cursor: default;
  padding: 0.15rem 0.35rem;
}

.post-comment__reply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-radius: 9999px;
  font-family: inherit;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-comment__reply > i {
  font-size: 1rem;
  line-height: 1;
}

.post-comment__reply:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.post-comment__reply:active {
  transform: scale(0.94);
}

.post-card__comments-compose {
  padding: 0;
  position: relative;
}

.post-card__comments:has(.post-comment-composer-inline)
  > .post-card__comments-compose {
  margin-top: 0.85rem;
}

.post-comment-composer {
  display: block;
}

.post-comment-composer__row {
  display: grid;
  grid-template-columns: var(--post-comment-avatar, 40px) minmax(0, 1fr);
  -moz-column-gap: var(--post-comment-col-gap, 0.55rem);
       column-gap: var(--post-comment-col-gap, 0.55rem);
  align-items: start;
  position: relative;
}

.post-comment-composer__avatar {
  width: var(--post-comment-avatar, 40px);
  height: var(--post-comment-avatar, 40px);
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  background: var(--background);
}

.post-comment-composer__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.post-comment-composer__line {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.post-comment-composer__box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--post-comment-avatar, 40px);
  box-sizing: border-box;
  padding: 0 0.2rem 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 4%, transparent));
}

.post-comment-composer__tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

.post-comment-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.post-comment-composer__text {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 2rem;
  max-height: 8rem;
  padding: 0.375rem 0.15rem;
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-sizing: border-box;
}

.post-comment-composer__text:focus {
  outline: none;
}

.post-comment-composer__text.ann-compose__textarea--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink, var(--foreground));
}

.post-comment-composer__field .ann-compose__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0.375rem 0.15rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink, var(--foreground));
}

.post-comment-composer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--post-comment-avatar, 40px);
  height: var(--post-comment-avatar, 40px);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  cursor: pointer;
}

.post-comment-composer__submit > i {
  font-size: 1.25rem;
  line-height: 1;
}

.post-comment-composer__submit:hover:not(:disabled) {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6.5%, transparent);
}

.post-comment-composer__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.post-comment-composer__error {
  margin: 0;
  font-size: 0.875rem;
  color: #e11d48;
}

.post-card--skeleton,
.post-comment--skeleton {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.post-skeleton__avatar,
.post-skeleton__line,
.post-skeleton__action,
.post-skeleton__comment-action {
  display: block;
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
  animation: post-skeleton-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.post-skeleton__avatar {
  border-radius: 999px;
}

.post-skeleton__line {
  border-radius: 999px;
}

.post-skeleton__line--name {
  width: 8rem;
  height: 1.25rem;
}

.post-skeleton__line--meta {
  width: 4.5rem;
  height: 1.1375rem;
}

.post-skeleton__line--body {
  width: 100%;
  height: 1.5rem;
}

.post-skeleton__line--body-short {
  width: 62%;
}

.post-skeleton__action {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}

.post-comment--skeleton .post-comment__bubble {
  width: 100%;
}

.post-skeleton__line--comment-name {
  width: 6.5rem;
  height: 1.05rem;
}

.post-skeleton__line--comment-time {
  width: 2.75rem;
  height: 1.05rem;
}

.post-skeleton__line--comment-body {
  width: min(100%, 18rem);
  height: 1.18125rem;
}

.post-skeleton__comment-action {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
}

@keyframes post-skeleton-pulse {
  50% {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-skeleton__avatar,
  .post-skeleton__line,
  .post-skeleton__action,
  .post-skeleton__comment-action {
    animation: none;
  }
}

/* --- app/templates/login.j2 --- */

/* Passkey waiting screen — soft pulse rings */

@keyframes passkey-pulse {
  0%   {
    transform: scale(1);
    opacity: 0.18;
  }

  70%  {
    transform: scale(2);
    opacity: 0;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.passkey-pulse-ring {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  border: 1px solid rgba(76, 23, 83, 0.35);
  /* theme purple */
  opacity: 0;
  animation: passkey-pulse 2.8s ease-out infinite;
}

.passkey-pulse-ring--delay {
  animation-delay: 1.4s;
}

.dark .passkey-pulse-ring {
  border-color: rgba(192, 132, 252, 0.28);
  /* dark-mode purple accent */
}

/* Password step: instant show/hide; avoid clipping rings / uneven edges */

#loginPasswordStep {
  display: grid;
  grid-template-rows: 0fr;
  pointer-events: none;
  width: 100%;
  min-width: 0;
}

#loginPasswordStep.login-password-step--open {
  grid-template-rows: 1fr;
  pointer-events: auto;
}

#loginPasswordStep .login-password-step-inner {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#loginPasswordStep.login-password-step--open .login-password-step-inner {
  overflow: visible;
}

/* --- app/templates/register.j2 --- */

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* --- app/templates/account/profile.j2 --- */

.cropper-container {
  direction: ltr;
}

.cropper-view-box {
  outline: 2px solid var(--foreground);
  outline-offset: -2px;
}

.cropper-face {
  background-color: transparent;
}

.cropper-line {
  background-color: var(--foreground);
  opacity: 0.4;
}

.cropper-point {
  background-color: var(--foreground);
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
}

.cropper-modal {
  background-color: rgba(0,0,0,0.05) !important;
}

.cropper-bg, .cropper-drag-box {
  background-color: transparent !important;
}

.cropper-container > img {
  opacity: 1 !important;
}

#dropZone.drag-over {
  border-color: var(--foreground);
  background-color: var(--surface-subtle);
}

/* --- app/templates/account/settings.j2 --- */

#passkeysLoading[hidden],
#passkeysEmpty[hidden],
#passkeysListArea[hidden] {
  display: none !important;
}

/* Switch toggle animation fix */

.email-verification-modal__icon {
  animation: none;
}

.verification-code-digits {
  position: relative;
}

.verification-code-digits__autofill {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.switch-container input[type="checkbox"]:checked ~ div .switch-toggle {
  transform: translateX(24px);
}

.passkey-wizard-pulse {
  animation: passkeyWizardPulse 1.5s ease-in-out infinite;
}

@keyframes passkeyWizardPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.88;
    transform: scale(1.02);
  }
}

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

.account-modal-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid #e5e5e5;
  border-top-color: #171717;
  animation: accountModalSpinnerSpin 0.75s linear infinite;
}

html.dark .account-modal-spinner {
  border-color: #26262c;
  border-top-color: #e4e4e7;
}

/* --- app/templates/account/notifications.j2 --- */

/* baslik ve alt baslik tek satir, ellipsis - 16.05.2026 23:58 */

.notif-pref-row__copy {
  min-width: 0;
}

.notif-pref-row__title,
.notif-pref-row__subtitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.notif-pref-row__subtitle {
  margin-top: 0.25rem;
}

/* kanal butonu: renkler tailwind token; yalnizca olcu - 17.05.2026 01:12 */

.notif-channel-btn[aria-expanded="true"] {
  background: var(--surface-subtle);
}

.notif-channel-btn[aria-expanded="true"] .notif-caret {
  transform: rotate(180deg);
}

.notif-channel-btn--has-channels {
  max-width: min(100%, 18rem);
}

.notif-channels-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-channel-btn--has-channels .notif-channels-label {
  max-width: 14.5rem;
}

/* dropdown check: tema foreground/background - 17.05.2026 01:12 */

.notif-channel-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--foreground) 8%, var(--background));
  transition: background-color 150ms ease;
}

.notif-channel-check--checked {
  background: color-mix(in srgb, var(--foreground) 14%, var(--background));
}

.notif-channel-check__icon {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--foreground);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
}

.notif-channel-check__icon[hidden] {
  display: none !important;
}

.notif-channel-check--checked .notif-channel-check__icon {
  opacity: 1;
  transform: scale(1);
}

.notif-channel-check:not(.notif-channel-check--checked) .notif-channel-check__icon {
  opacity: 0;
  transform: scale(0.7);
}

/* --- app/templates/account/password.j2 --- */

@keyframes keyFloat {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }

  50%       {
    transform: translateY(-8px) rotate(4deg);
  }
}

/* --- app/templates/components/language_selector.j2 --- */

/*
  Alt menü satırları tam genişlikte üst üste: Arka plan ilk sırada olduğundan,
  açık panel alttaki Dil/Tema satırlarının altında kalıp tıklanamaz oluyordu.
  Açık satır (tetikleyicide aria-expanded=true) üstte yığılsın.
*/

[data-language-selector-dropdown] > div.flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
  z-index: 25;
}

@keyframes wzFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wz-step-enter {
  animation: wzFadeIn 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.space-wizard-join--in {
  animation: wzFadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .wz-step-enter,
  .space-wizard-join--in {
    animation: none;
  }
}

.space-wizard-invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.space-wizard-invite-list__item button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 45%, transparent);
  outline-offset: 1px;
}

.space-wizard-modal__panel {
  width: min(100%, 28rem);
  max-height: calc(100vh - 32px);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.125rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 12%, transparent);
  background: var(--background, #fff);
}

.space-wizard-modal__header {
  flex-shrink: 0;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #171717) 8%, transparent);
}

.space-wizard-modal__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.space-wizard-modal__title {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground, #171717);
}

.space-wizard-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.space-wizard-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 14%, transparent);
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  font-size: 0.9375rem;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.space-wizard-modal__close:hover .space-wizard-modal__close-inner {
  color: var(--foreground, #171717);
  border-color: color-mix(in srgb, var(--foreground, #171717) 28%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 5%, transparent);
}

.space-wizard-modal__dots {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.space-wizard-modal__dot {
  height: 0.25rem;
  flex: 1 1 0%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground, #171717) 10%, transparent);
  transition: flex 360ms ease, background-color 280ms ease;
}

.space-wizard-modal__dot--active {
  flex: 2.2 1 0%;
  background: var(--foreground, #171717);
}

.space-wizard-modal__dot--done {
  background: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
}

.space-wizard-modal__error {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem 0;
}

.space-wizard-modal__body {
  display: contents;
}

.space-wizard-modal__step,
.space-wizard-modal__success {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.125rem 1.25rem 0;
}

.space-wizard-modal__step.hidden,
.space-wizard-modal__success.hidden {
  display: none;
}

.space-wizard-modal__step.\!hidden,
.space-wizard-modal__success.\!hidden {
  display: none !important;
}

.space-wizard-modal__intro {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.space-wizard-modal__intro-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground, #171717);
}

.space-wizard-modal__intro-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #171717) 52%, transparent);
}

.space-wizard-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1 1 auto;
}

.space-wizard-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.space-wizard-modal__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground, #171717) 48%, transparent);
}

.space-wizard-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.6875rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 14%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 2.5%, transparent);
  color: var(--foreground, #171717);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-wizard-modal__input::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #171717) 36%, transparent);
}

.space-wizard-modal__input::placeholder {
  color: color-mix(in srgb, var(--foreground, #171717) 36%, transparent);
}

.space-wizard-modal__input:focus {
  border-color: color-mix(in srgb, var(--foreground, #171717) 34%, transparent);
  background: transparent;
}

.space-wizard-modal__email-row {
  display: flex;
  gap: 0.5rem;
}

.space-wizard-modal__email-row .space-wizard-modal__input {
  flex: 1 1 0%;
  min-width: 0;
}

.space-wizard-modal__banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.6875rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 10%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 3%, transparent);
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #171717) 58%, transparent);
}

.space-wizard-modal__banner i {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.space-wizard-modal__banner p {
  margin: 0;
}

.space-wizard-modal__banner--warn {
  border-color: color-mix(in srgb, #ca8a04 35%, transparent);
  background: color-mix(in srgb, #ca8a04 8%, transparent);
  color: #a16207;
}

html.dark .space-wizard-modal__banner--warn {
  color: #facc15;
}

.space-wizard-modal__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.875rem 0 1.125rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #171717) 8%, transparent);
}

/* deprecated — cengel-button ile degistirildi - 01.08.2026 23:59 */

/* .space-wizard-modal__btn { ... } */

.space-wizard-modal__success {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
}

.space-wizard-modal__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  margin-bottom: 0.875rem;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.space-wizard-modal__success-img {
  width: 7rem;
  height: 7rem;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.space-wizard-modal__success-title {
  margin: 0 0 0.3125rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground, #171717);
}

.space-wizard-modal__success-desc {
  margin: 0 0 1.25rem;
  max-width: 18rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #171717) 52%, transparent);
}

.space-wizard-modal__success .cengel-btn--primary {
  width: 100%;
  max-width: 16rem;
}

.space-wizard-logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  border-radius: 0.8125rem;
  border: 1px dashed color-mix(in srgb, var(--foreground, #171717) 20%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 2.5%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-wizard-logo:hover {
  border-color: color-mix(in srgb, var(--foreground, #171717) 34%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
}

.space-wizard-logo--drag {
  border-color: color-mix(in srgb, var(--foreground, #171717) 48%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.space-wizard-logo--filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--foreground, #171717) 14%, transparent);
}

.space-wizard-logo__preview {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 10%, transparent);
  background: var(--background, #fff);
}

.space-wizard-logo__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.space-wizard-logo__fallback {
  font-size: 1.25rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #171717) 42%, transparent);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.space-wizard-logo:hover .space-wizard-logo__fallback {
  color: color-mix(in srgb, var(--foreground, #171717) 62%, transparent);
}

.space-wizard-logo__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  flex: 1 1 0%;
}

.space-wizard-logo__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground, #171717);
}

.space-wizard-logo__hint {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground, #171717) 48%, transparent);
}

.space-wizard-logo__remove {
  align-self: flex-start;
  margin: 0;
  padding: 0.125rem 0 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.space-wizard-logo__remove:hover {
  color: var(--foreground, #171717);
}

.space-wizard-access {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.space-wizard-access__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  border-radius: 0.8125rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--foreground, #171717) 12%, transparent);
  background: transparent;
  color: var(--foreground, #171717);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-wizard-access__option:hover {
  border-color: color-mix(in srgb, var(--foreground, #171717) 26%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 2.5%, transparent);
}

.space-wizard-access__option--active {
  border-color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
}

.space-wizard-access__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  font-size: 1rem;
  pointer-events: none;
}

.space-wizard-access__option--active .space-wizard-access__icon {
  color: var(--foreground, #171717);
  background: color-mix(in srgb, var(--foreground, #171717) 10%, transparent);
}

.space-wizard-access__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 0%;
  pointer-events: none;
}

.space-wizard-access__title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.space-wizard-access__desc {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
}

.space-wizard-access__check {
  flex-shrink: 0;
  font-size: 1.0625rem;
  color: var(--foreground, #171717);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.space-wizard-access__option--active .space-wizard-access__check {
  opacity: 1;
  transform: scale(1);
}

.space-wizard-access--compact .space-wizard-access__option {
  padding: 0.625rem 0.75rem;
}

.space-wizard-access--compact .space-wizard-access__icon {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.875rem;
  border-radius: 0.4375rem;
}

.space-wizard-join {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding-top: 0.125rem;
}

.space-wizard-join.hidden {
  display: none;
}

.space-wizard-join.\!hidden {
  display: none !important;
}

.space-wizard-join__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground, #171717) 45%, transparent);
}

/* --- legacy admin table styles (unused template) - 21.07.2026 02:10 --- */

/* Custom table styling - dark mode compatible */

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 0.9375rem;
}

.dark .custom-table {
  background: var(--surface);
  border-color: var(--border);
}

.custom-table thead {
  background: #ffffff;
}

.dark .custom-table thead {
  background: var(--surface);
}

.custom-table thead tr {
  border-bottom: 1px solid #e5e7eb !important;
}

.dark .custom-table thead tr {
  border-bottom-color: var(--border) !important;
}

.custom-table thead th {
  padding: 0.8125rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9375rem;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb !important;
}

.dark .custom-table thead th {
  color: var(--foreground);
  background: var(--surface);
  border-right-color: var(--border);
  border-bottom-color: var(--border) !important;
}

.custom-table thead th:last-child {
  border-right: none;
}

.custom-table tbody tr {
  border-bottom: 1px solid #e5e7eb !important;
  transition: background-color 0.15s ease;
}

.dark .custom-table tbody tr {
  border-bottom-color: var(--border) !important;
}

.custom-table tbody tr:first-child {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr:first-child {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:first-child td {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr:first-child td {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Ensure all rows have horizontal borders */

.custom-table tbody tr + tr {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr + tr {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:hover {
  background: #f9fafb;
}

.dark .custom-table tbody tr:hover {
  background: var(--surface-subtle);
}

.custom-table tbody td {
  padding: 0.8125rem 1rem;
  color: #374151;
  vertical-align: top;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.dark .custom-table tbody td {
  color: var(--foreground);
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}

.custom-table tbody td:last-child {
  border-right: none;
}

.custom-table tbody tr:last-child td {
  border-bottom: none !important;
}

.custom-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

.custom-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .table-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .table-wrapper .custom-table {
    min-width: 600px;
  }
}

.space-members-panel__header {
  display: flex;
  align-items: center;
  gap: calc(var(--eco-header-pad) * 0.5);
  height: var(--eco-header-h);
  min-height: var(--eco-header-h);
  max-height: var(--eco-header-h);
  padding: 0 var(--account-sidebar-inner-x);
  padding-right: calc(var(--account-sidebar-inner-x) + 30px + 8px);
  border-bottom: 1px solid var(--eco-header-border);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.space-members-panel__header--channel {
  align-items: center;
}

.space-members-panel__channel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.space-members-panel__channel-icon {
  width: 1rem;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  text-align: center;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.dark .space-members-panel__channel-icon {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.space-members-panel__channel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.0625rem;
}

.space-members-panel__channel-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-members-panel__channel-topic {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease;
}

.dark .space-members-panel__channel-topic {
  color: color-mix(in srgb, var(--foreground) 54%, transparent);
}

.space-members-panel__channel-topic:hover {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
  text-decoration: underline;
}

.space-members-panel__channel-topic:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 45%, transparent);
  outline-offset: 1px;
  border-radius: 2px;
}

.space-members-panel__topic-modal-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.space-members-panel__icon {
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

.space-members-panel__tab-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  opacity: 0.88;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ac/kapa dugmesi — cerceveli kutu; display:flex [hidden] ustune yazar - 01.07.2026 21:25 */

.space-members-panel__toggle-btn:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 2%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}

.space-members-panel__toggle-btn:hover {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  color: var(--foreground);
}

.space-members-panel__toggle-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 30%, transparent);
  outline-offset: 1px;
}

.space-members-panel__toggle-btn i {
  font-size: 1rem;
  line-height: 1;
}

.space-members-panel {
  display: none;
  /* mobilde gizli - 21.06.2026 05:59 */
  width: var(--space-sidebar-panel-w, 320px);
  min-width: var(--space-sidebar-panel-w, 320px);
  max-width: var(--space-sidebar-panel-w, 320px);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background-color: var(--eco-header-bg);
  border-left: 1px solid var(--eco-header-border);
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
  .space-members-panel {
    display: flex;
  }
}

/* sutun sarmalayici — kapaliyken genislik sifir, panel gizli, toggle sabit - 01.07.2026 21:25 */

.space-members-panel-column {
  display: none;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

@media (min-width: 1024px) {
  .space-members-panel-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
  }

  .space-members-panel-column--collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
  }

  .space-members-panel-column--collapsed .space-members-panel {
    display: none !important;
  }
}

/* toggle — header sag ust kosesinde sabit, panel acik/kapali ayni nokta - 01.07.2026 21:25 */

.space-members-panel__toggle-anchor {
  position: absolute;
  top: calc((var(--eco-header-h) - 30px) / 2);
  right: var(--account-sidebar-inner-x);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* scroll + body — ust bosluk panel basliginden ayrilir - 30.06.2026 07:00 */

.space-members-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.space-members-panel__body {
  display: flex;
  flex-direction: column;
  /* gap — gizli gruplar flex disina dusunce bosluk kalmasin - 15.07.2026 18:07 */
  gap: calc(var(--sidebar-gap) * 1.5);
  padding-top: calc(var(--sidebar-gap) * 1.25);
  padding-bottom: calc(var(--sidebar-gap) * 0.75);
}

/* ssr stub — gercek uye satiri/grup layoutu - 25.07.2026 01:55 */

.space-members-panel__skeleton {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sidebar-gap) * 1.5);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.space-member-row--skel {
  cursor: default;
}

.space-member-row--skel:hover {
  background-color: transparent;
}

.space-members-panel__skel-bone {
  display: block;
  background: var(--border, #e5e5e5);
  opacity: 0.55;
  border-radius: 4px;
  animation: cengel-skel-pulse 1.15s ease-in-out infinite;
}

.dark .space-members-panel__skel-bone {
  background: #3f3f46;
  opacity: 0.65;
}

.space-member-row--skel:nth-child(2n) .space-members-panel__skel-bone {
  animation-delay: 0.16s;
}

.space-member-row--skel:nth-child(3n) .space-members-panel__skel-bone {
  animation-delay: 0.3s;
}

@keyframes cengel-skel-pulse {
  0%,
    100% {
    opacity: 0.38;
  }

  50% {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-members-panel__skel-bone {
    animation: none;
  }
}

.space-members-panel__skel-bone--label {
  width: 5.5rem;
  height: 0.625rem;
  margin: 0;
}

.space-members-panel__skel-bone--label-sm {
  width: 4.25rem;
}

.space-members-panel__skel-bone--avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  opacity: 0.45;
}

.dark .space-members-panel__skel-bone--avatar {
  opacity: 0.55;
}

.space-members-panel__skel-bone--name {
  width: 58%;
  max-width: 7.5rem;
  height: 0.8125rem;
  margin: 0.15rem 0;
}

.space-members-panel__skel-bone--name-sm {
  width: 44%;
  max-width: 5.25rem;
}

.space-members-panel__skel-bone--name-md {
  width: 58%;
  max-width: 7.5rem;
}

.space-members-panel__skel-bone--name-lg {
  width: 72%;
  max-width: 9.5rem;
}

.space-members-panel__skel-bone--status {
  width: 42%;
  max-width: 5.5rem;
  height: 0.625rem;
  margin: 0.1rem 0 0;
  opacity: 0.4;
}

.dark .space-members-panel__skel-bone--status {
  opacity: 0.5;
}

.space-member-row--skel .space-member-row__status:not([hidden]) {
  display: flex;
}

/* grup: sol sidebar nav-section ile ayni - 15.07.2026 18:07 */

.space-member-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

/* display:flex [hidden] ustune yazar — bos gruplari tamamen cikar - 15.07.2026 18:07 */

.space-member-group[hidden] {
  display: none !important;
}

/* basliksiz grup (rol atanmamis + sahip) - 21.06.2026 05:59 */

.space-member-group--plain {
  margin-top: 0;
}

/* grup baslik: sol sidebar nav-section__label ile ayni - 21.06.2026 05:59 */

.space-member-group__label {
  margin: 0;
  padding: 0 0 calc(var(--sidebar-gap-tight) * 2) var(--account-sidebar-inner-x);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.38;
  line-height: 1;
}

.dark .space-member-group__label {
  opacity: 0.45;
}

.space-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  margin: 0 calc(var(--account-sidebar-inner-x) - 0.5rem);
  border-radius: var(--sidebar-item-r);
  transition: background-color 0.12s;
  cursor: pointer;
  color: var(--foreground);
  text-decoration: none;
}

.space-member-row:hover {
  background-color: var(--sidebar-hover-bg);
}

.space-member-row__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.space-member-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  transition: opacity 0.12s;
}

/* presence dot — border zemin rengi (--presence-dot-border) - 06.09.2026 06:03 */

.presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--presence-dot-border, var(--sidebar-bg, var(--eco-header-bg, #ffffff)));
  background: var(--presence-offline);
  z-index: 1;
  cursor: default;
}

.presence-dot--online  {
  background: var(--presence-online);
}

.presence-dot--working {
  background: var(--presence-working);
}

.presence-dot--idle    {
  background: var(--presence-idle);
}

.presence-dot--dnd     {
  background: var(--presence-dnd);
}

.space-members-panel {
  --presence-dot-border: var(--eco-header-bg);
}

.space-members-panel .presence-dot {
  border-color: var(--presence-dot-border, var(--eco-header-bg));
}

.space-member-row__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.space-member-row__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.15;
  transition: color 0.12s, opacity 0.12s;
  letter-spacing: -0.005em;
}

/* rich presence durum satiri — offline grupta css ile gizlenir - 16.07.2026 00:05 */

.space-member-row__status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  /* koyu notr — bir tik acik - 16.07.2026 00:10 */
  color: #71717a;
  opacity: 1;
  overflow: hidden;
}

.dark .space-member-row__status {
  color: #a1a1aa;
}

.space-member-row__status[hidden] {
  display: none !important;
}

.space-member-group[data-presence-group="offline"] .space-member-row__status {
  display: none !important;
}

.space-member-row__status-emoji {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 0;
}

.space-member-row__status-emoji .cengel-emoji,
.space-member-row__status-emoji-img {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: 0;
}

.space-member-row__status-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.space-member-row__status-text--listening,
.space-member-row__status-text--playing {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.space-member-row__status-track {
  font-weight: 600;
  color: #52525b;
}

.dark .space-member-row__status-track {
  color: #d4d4d8;
}

/* ozel rol rengi — foreground ile karistir, tema uyumlu - 24.06.2026 17:00 */

.space-member-row__name--role {
  --member-role-color: #6b7280;
  opacity: 1;
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground));
}

.dark .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 58%, var(--foreground));
}

.space-member-row:hover .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 88%, var(--foreground));
}

.dark .space-member-row:hover .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground));
}

/* cevrimdisi — daha soluk gorunum (uye paneli + arkadaslar) - 16.08.2026 20:30 */

:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row {
  opacity: 0.52;
  transition: opacity 0.12s, background-color 0.12s;
}

.dark :is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row {
  opacity: 0.58;
}

:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row:hover {
  opacity: 0.78;
  background-color: var(--sidebar-hover-bg);
}

:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row__avatar {
  opacity: 0.65;
}

:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row:hover .space-member-row__avatar {
  opacity: 0.85;
}

:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row__name,
:is(.space-member-group[data-presence-group="offline"], .friend-activity[data-status="offline"]) .space-member-row__name--role {
  color: var(--foreground);
  opacity: 1;
}

.space-member-row__status--swap {
  display: block;
  position: relative;
  height: 1.2em;
  width: 100%;
  overflow: hidden;
}

.space-member-row__status-slide {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  min-width: 0;
  transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-member-row__status-slide--prev {
  transform: translateY(0);
  opacity: 1;
}

.space-member-row__status--typing .space-member-row__status-slide--prev {
  transform: translateY(-100%);
  opacity: 0;
}

.space-member-row__status-slide--typing {
  transform: translateY(100%);
  opacity: 0;
}

.space-member-row__status--typing .space-member-row__status-slide--typing {
  transform: translateY(0);
  opacity: 1;
}

.space-member-row__typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  flex-shrink: 0;
  padding: 0 1px;
}

.space-member-row__typing-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  text-transform: lowercase;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.space-member-row__typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: member-row-typing-bounce 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.space-member-row__typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.space-member-row__typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes member-row-typing-bounce {
  0%,
    60%,
    100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-member-row__status-slide {
    transition: none;
  }

  .space-member-row__typing-dot {
    animation: none;
    opacity: 0.7;
  }
}

body.rich-presence-modal-open {
  overflow: hidden;
}

/* icerik kendi scrollunu acmasin — kart boya gore uzar - 14.08.2026 22:55 */

.rich-presence-modal__panel {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  overflow: hidden;
}

.rich-presence-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 0.75rem;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.rich-presence-modal__header-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.rich-presence-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.rich-presence-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.rich-presence-modal__close:hover .rich-presence-modal__close-inner {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.rich-presence-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 18px 20px;
}

.rich-presence-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 0.5rem;
  padding: 14px 20px 18px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* ── Role Color Picker ─────────────────────────────────────────────────────── */

.role-perm-row.role-perm--checked {
  background-color: var(--surface-subtle);
  border-color: var(--ink);
}

.role-perm-row.role-perm--checked .role-perm-check {
  background-color: var(--ink);
  border-color: var(--ink);
}

.role-perm-row.role-perm--checked .role-perm-check i {
  display: block;
  color: var(--background);
}

.role-color-btn.role-color--selected {
  border-color: var(--ink) !important;
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.role-perm-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin: 0 0 0.375rem;
}

.roles-list__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.6875rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: left;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.roles-list__item:hover {
  background: var(--surface-subtle);
}

.roles-list__item--active {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.roles-list__item--dragging {
  opacity: 0.45;
}

.roles-list__handle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  cursor: grab;
}

.roles-list__handle--locked {
  cursor: not-allowed;
  opacity: 0.35;
}

.roles-list__handle-spacer {
  width: 1.25rem;
  flex: none;
}

.roles-list__dot {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.roles-list__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-list__lock {
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  flex-shrink: 0;
}

/* ─── Space sidebar tabs ─────────────────────────────────────── */

/*
 * hiyerarsi sistemi:
 *  - space satiri: yuvarlak → squircle animasyonu olan 36x36 renkli ikon
 *  - sekmeler: space ikon merkezinden (x=26px) baslayan ince dikey agac cizgisi
 *  - sekme ikonu: daima squircle 28x28, nötr (renksiz) — space ikonundan net ayrilir
 * - 21.06.2026 06:36
 */

/* liyi agac cizgisi icin referans noktasi yap - 21.06.2026 06:36 */

.spaces-sb-list > li {
  position: relative;
}

/* dikey agac cizgisi: space ikonunun merkez ekseni (x = 8+18 = 26px) - 21.06.2026 06:36 */

.spaces-sb-list > li > .spaces-sb-tabs::before {
  content: '';
  position: absolute;
  left: 26px;
  top: -4px;
  bottom: 14px;
  width: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
  pointer-events: none;
}

.dark .spaces-sb-list > li > .spaces-sb-tabs::before {
  background: color-mix(in srgb, var(--foreground) 18%, transparent);
}

.spaces-sb-tabs {
  list-style: none;
  margin: 0;
  /* ust/sag 8px esit; sol agac cizgisi icin ek bosluk - 21.06.2026 06:40 */
  padding: 8px 8px 8px 38px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
}

/* sekme satiri: ikon + label, kapsayici kutu yok - 21.06.2026 14:23 */

.spaces-sb-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--foreground);
  background-color: transparent;
  transition: background-color 120ms ease;
}

.spaces-sb-tab:hover {
  background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.dark .spaces-sb-tab:hover {
  background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.spaces-sb-tab--active {
  background-color: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.dark .spaces-sb-tab--active {
  background-color: color-mix(in srgb, var(--foreground) 13%, transparent);
}

.spaces-sb-tab__icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
  transition: color 120ms ease;
}

.dark .spaces-sb-tab__icon {
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.spaces-sb-tab:hover .spaces-sb-tab__icon {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.spaces-sb-tab--active .spaces-sb-tab__icon {
  color: var(--foreground);
}

.spaces-sb-tab__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.50;
  transition: opacity 120ms ease;
}

.dark .spaces-sb-tab__label {
  opacity: 0.60;
}

.spaces-sb-tab:hover .spaces-sb-tab__label,
.spaces-sb-tab--active .spaces-sb-tab__label {
  opacity: 1;
}

.spaces-sb-tab--active .spaces-sb-tab__label {
  font-weight: 600;
}

.space-item__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.space-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-muted);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
}

.space-item__badge i {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.88;
}

.space-item__badge--owner {
  color: var(--foreground);
  height: 1.25rem;
  padding: 0 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.space-item__badge--members,
.space-item__badge--unread,
.space-item__badge--mention {
  font-variant-numeric: tabular-nums;
}

.space-item__badge--mode {
  font-weight: 600;
}

.space-item__badge--mention[hidden],
.space-item__badge--unread[hidden] {
  display: none;
}

.space-card--profile .space-item__badge {
  height: 1.375rem;
  padding: 0 0.4375rem;
  border-radius: 0.4375rem;
}

.space-item__badge--status {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.space-item__badge--pending {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}

html.dark .space-item__badge--pending {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border-color: color-mix(in srgb, #f59e0b 32%, transparent);
}

.space-item__badge--muted {
  color: var(--ink-muted);
}

.account-split__content-pad:has(.spaces-home-page),
.account-split__content-pad:has(.spark-page) {
  max-width: none;
}

.spaces-home {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding-bottom: 2rem;
}

.spaces-home__section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.spaces-home__section--discover {
  gap: 0.75rem;
}

.spaces-home__section-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.spaces-home__section-head--row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.spaces-home__section-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.spaces-home__section-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* maks 4 kolon; daralinca auto-fill dusurur - 01.08.2026 21:29 */

.spaces-home__grid {
  display: grid;
  grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, max(17rem, calc((100% - 3rem) / 4))), 1fr)
    );
  gap: 1rem;
  align-items: stretch;
}

.spaces-home__invite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.75rem;
}

.spaces-home__panel {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.spaces-home__list {
  display: flex;
  flex-direction: column;
}

.spaces-home__list > .space-card + .space-card {
  border-top: 1px solid var(--border);
}

.spaces-home__more {
  padding-top: 0.15rem;
}

.spaces-home__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.25rem 1.5rem;
  border-radius: 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent);
  background: var(--surface-subtle);
}

.spaces-home__empty--soft {
  padding: 2.25rem 1.25rem;
  border-style: solid;
  border-color: var(--border);
  background: var(--background);
}

.spaces-home__empty-icon {
  font-size: 1.75rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.spaces-home__empty-icon--lg {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.spaces-home__empty-icon--3d {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: unset;
  font-size: unset;
}

.spaces-home__empty-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.spaces-home__empty-desc {
  margin: 0.4rem 0 0;
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .spaces-home {
    gap: 1.5rem;
  }

  .spaces-home__grid,
    .spaces-home__invite-grid {
    grid-template-columns: 1fr;
  }
}

.spaces-home__hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem 1.75rem;
  box-sizing: border-box;
  /* content-pad inset'ini iptal — soldan sagdan ustten sifir - 31.07.2026 06:42 */
  width: calc(100% + (2 * var(--account-split-inner-pad-x)));
  margin-top: calc(-1 * var(--account-split-inner-pad));
  margin-left: calc(-1 * var(--account-split-inner-pad-x));
  margin-right: calc(-1 * var(--account-split-inner-pad-x));
  padding: 2rem var(--account-split-inner-pad-x) 1.65rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  /* light: brand-50 wash; dark tokenlari ayni isimlerle uyumlu - 31.07.2026 06:42 */
  background:
        linear-gradient(
            155deg,
            var(--brand-50) 0%,
            var(--surface-subtle) 48%,
            var(--background) 100%
        );
}

.spaces-home__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* noktalar border token — light/dark otomatik - 31.07.2026 06:42 */
  background-image: radial-gradient(
        circle at 1px 1px,
        var(--border) 1.05px,
        transparent 1.2px
    );
  background-size: 16px 16px;
  opacity: 0.85;
}

html.dark .spaces-home__hero {
  background:
        linear-gradient(
            155deg,
            var(--brand-100) 0%,
            var(--surface-subtle) 40%,
            var(--background) 100%
        );
}

html.dark .spaces-home__hero::before {
  opacity: 0.7;
}

.spaces-home__hero-copy,
.spaces-home__hero-action {
  position: relative;
  z-index: 1;
}

.spaces-home__hero-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.spaces-home__title {
  margin: 0;
  font-family: "Climate Crisis", Arial, sans-serif;
  font-size: clamp(2.35rem, 7vw, 3.35rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--foreground);
  font-variation-settings: "YEAR" 1979;
}

.spaces-home__title--spark {
  font-family: "BBH Bartle", Arial, sans-serif;
  font-variation-settings: normal;
}

.spaces-home__subtitle {
  margin: 0.75rem 0 0;
  max-width: 28rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.spaces-home__hero-action {
  padding-top: 0.15rem;
  flex-shrink: 0;
}

/* hero create: cengel-btn; mobile full width - 01.08.2026 23:56 */

@media (max-width: 640px) {
  .spaces-home__hero {
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem var(--account-split-inner-pad-x) 1.35rem;
    border-radius: 0;
  }

  .spaces-home__title {
    font-size: clamp(2rem, 12vw, 2.6rem);
  }

  .spaces-home__hero-action {
    width: 100%;
  }

  .spaces-home__hero-action > .cengel-btn {
    width: 100%;
  }
}

.space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 140ms ease;
}

.spaces-home__grid > .space-card:hover,
.spaces-home__invite-grid > .space-card:hover {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.space-card--invite {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--background));
}

html.dark .space-card--invite {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--border));
  background: color-mix(in srgb, #f59e0b 10%, var(--background));
}

.space-card__hit {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  color: inherit;
}

.space-card__banner {
  height: 5rem;
  width: 100%;
  flex-shrink: 0;
  background: var(--surface-subtle);
}

.space-card__panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: -2.125rem;
  padding: 0 1rem 0.875rem;
}

.space-card__head {
  display: flex;
  align-items: flex-end;
  height: 4.25rem;
}

.space-card__identity {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
}

.space-card__title-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.space-card__title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
}

.space-card__title {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-item__title--unread {
  font-weight: 800;
}

.space-card__verified {
  flex-shrink: 0;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--foreground);
}

.space-card__domain {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-card__desc-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.space-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.space-card__desc--empty {
  color: var(--ink-muted);
  font-style: italic;
}

.space-card__desc-more {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
}

.space-card__desc-more:hover {
  text-decoration: underline;
}

.space-card__desc-more[hidden] {
  display: none;
}

.space-card__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.space-item__avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.spaces-home .space-card--profile .space-avatar--card {
  width: 4.25rem;
  height: 4.25rem;
  min-width: 4.25rem;
  border-radius: 30%;
  corner-shape: squircle;
  border: 3px solid var(--background);
  box-sizing: border-box;
  overflow: hidden;
  transition: none;
  filter: none;
}

.spaces-home .space-card--profile .space-avatar--card .space-avatar__img {
  border-radius: inherit;
  corner-shape: inherit;
}

/* invite / row layout (davet kartlari) - 01.08.2026 21:21 */

.space-card__logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-subtle);
}

.space-card__main,
.space-card__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.space-card__row {
  padding: 1rem;
}

.space-card__body {
  flex: 1;
  min-width: 0;
}

.space-card__trail {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.space-card__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .space-card {
    transition: none;
  }
}

.space-home-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.space-home-channel__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.625rem;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

.space-home-channel__link:hover {
  background: var(--surface-subtle);
}

.space-home-channel__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}

.space-home-channel--unread .space-home-channel__dot {
  background: var(--foreground);
}

.space-home-channel__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-home-channel--unread .space-home-channel__name {
  color: var(--foreground);
  font-weight: 600;
}

.space-home-channel__mention,
.space-home-channel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.space-home-channel__mention {
  background: #dc2626;
  color: #fff;
}

.space-home-channel__count {
  background: var(--surface-subtle);
  color: var(--ink-muted);
}

.space-home-channels__empty {
  margin: 0.125rem 0;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* profil karti alt aksiyonlari — cengel-btn + go flex - 01.08.2026 23:56 */

.space-card__actions {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.875rem 1rem 1rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.space-card__go {
  flex: 1 1 auto;
  min-width: 0;
  flex-shrink: 1;
}

/* menu hook only — chrome cengel-btn md - 02.08.2026 00:20 */

.space-card__menu-btn {
  flex-shrink: 0;
}

.space-discover-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.85rem;
  border-radius: 1rem;
  border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent);
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.space-discover-more:hover {
  background: var(--surface-subtle);
  border-style: solid;
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
  color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  .space-discover-more,
    .space-card__menu-btn,
    .space-home-channel__link {
    transition: none;
  }
}

/* space + account + messages + games + bookmarks + wall friends — ayni footer tokenlari - 16.08.2026 20:25 */

#spaces-sidebar,
#account-sidebar,
.messages-sidebar,
.games-sidebar,
.bm-sidebar,
.friend-activity-panel {
  --sidebar-bg: var(--account-split-sidebar-bg);
  --presence-dot-border: var(--account-split-sidebar-bg);
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --spaces-sb-user-pad-x: var(--sp-sidebar-inset-x);
  --spaces-sb-user-row-pad-x: 0.5rem;
  --spaces-sb-user-row-margin-x: calc(var(--spaces-sb-user-pad-x) - var(--spaces-sb-user-row-pad-x));
}

/* liste: spaces-sb-inner px-2 - 18.07.2026 04:00 */

#spaces-sidebar:has([data-spaces-sb-inner]) {
  --spaces-sb-user-pad-x: 0.5rem;
  --spaces-sb-user-row-margin-x: 0;
}

.spaces-sb-user {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* yatay pad satirda — hover bg clip olmasin - 18.07.2026 04:00 */
  padding: 0.5rem 0;
  overflow: visible;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: var(--account-split-sidebar-bg);
}

html.dark .spaces-sb-user {
  border-top-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* hover / menu / focus: sidebar overflow clip kaldir - 07.08.2026 06:05 */

#spaces-sidebar.account-desktop-sidebar:has(.spaces-sb-user:hover),
#spaces-sidebar.account-desktop-sidebar:has(.spaces-sb-user:focus-within),
#spaces-sidebar.account-desktop-sidebar:has(.spaces-sb-user[data-status-menu-open="1"]),
#spaces-sidebar.account-desktop-sidebar:has(.spaces-sb-user [aria-expanded="true"]),
#account-sidebar.account-desktop-sidebar:has(.spaces-sb-user:hover),
#account-sidebar.account-desktop-sidebar:has(.spaces-sb-user:focus-within),
#account-sidebar.account-desktop-sidebar:has(.spaces-sb-user[data-status-menu-open="1"]),
#account-sidebar.account-desktop-sidebar:has(.spaces-sb-user [aria-expanded="true"]) {
  overflow: visible;
  z-index: var(--z-cengel-context, 10080);
}

/* messages/games/bookmarks: hoverda overflow:visible liste scrollunu kilitler — sadece menu - 15.08.2026 16:22 */

.messages-sidebar:has(.spaces-sb-user[data-status-menu-open="1"]),
.messages-sidebar:has(.spaces-sb-user [aria-expanded="true"]),
.games-sidebar:has(.spaces-sb-user[data-status-menu-open="1"]),
.games-sidebar:has(.spaces-sb-user [aria-expanded="true"]),
.bm-sidebar:has(.spaces-sb-user[data-status-menu-open="1"]),
.bm-sidebar:has(.spaces-sb-user [aria-expanded="true"]),
.friend-activity-panel:has(.spaces-sb-user[data-status-menu-open="1"]),
.friend-activity-panel:has(.spaces-sb-user [aria-expanded="true"]) {
  overflow: visible;
  z-index: var(--z-cengel-context, 10080);
}

.spaces-sb-user[data-status-menu-open="1"],
.spaces-sb-user:hover,
.spaces-sb-user:focus-within {
  z-index: var(--z-cengel-context, 10080);
}

/* body'ye portal edilen status menu - 18.07.2026 04:00 */

#spaces-sb-status-menu.cengel-menu--fixed {
  z-index: var(--z-cengel-context, 10080);
}

.spaces-sb-user__row {
  /* header space-row ile ayni: margin + dort yonde esit pad - 20.07.2026 02:21 */
  margin: 0 var(--spaces-sb-user-row-margin-x);
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding: var(--spaces-sb-user-row-pad-x);
  gap: 0.625rem;
  min-height: 2.5rem;
  border: none;
  border-radius: var(--sidebar-item-r, 0.5rem);
  background: transparent;
  cursor: default;
  font: inherit;
  text-align: left;
  color: inherit;
  overflow: visible;
}

.spaces-sb-user__row:hover {
  background-color: var(--sidebar-hover-bg);
}

/* liste satirlari p-2 ile ayni - 16.07.2026 19:41 */

#spaces-sidebar:has([data-spaces-sb-inner]) .spaces-sb-user__row {
  padding: 0.5rem;
  gap: 0.6875rem;
  min-height: 2.625rem;
}

.spaces-sb-user .space-member-row__avatar-wrap,
.spaces-sb-user .space-member-row__avatar {
  width: 36px;
  height: 36px;
}

/* avatar: presence menu tetikleyici — ayri buton yok - 18.07.2026 03:53 */

.spaces-sb-user__avatar-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 50%;
  overflow: visible;
}

.spaces-sb-user__avatar-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.spaces-sb-user__avatar-btn[aria-expanded="true"] {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.spaces-sb-user .space-member-row__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* isim: user card popover - 18.07.2026 03:53 */

.spaces-sb-user__name {
  cursor: pointer;
  border-radius: 0.25rem;
}

.spaces-sb-user__name:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 1px;
}

.spaces-sb-user .space-member-row__status {
  font-size: 0.6875rem;
  line-height: 1.2;
}

/* bos durum — smiley ile ayni rich modal - 20.07.2026 02:24 */

.spaces-sb-user__status-add {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.spaces-sb-user__status-add:hover {
  opacity: 1;
  color: var(--foreground);
}

.spaces-sb-user .space-member-row__meta {
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.spaces-sb-user .presence-dot {
  border-color: var(--presence-dot-border, var(--account-split-sidebar-bg));
}

.spaces-sb-user .space-member-row__status[data-listening="1"] {
  display: none !important;
}

/* sag: rich presence (emoji) butonu - 18.07.2026 03:57 */

.spaces-sb-user__rich-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.spaces-sb-user__rich-btn i {
  font-size: 1.125rem;
  line-height: 1;
}

.spaces-sb-user__rich-btn:hover {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.spaces-sb-user__rich-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 1px;
}

/* status menu ogesi — renkli nokta + etiket - 06.09.2026 06:03 */

.spaces-sb-status-item {
  gap: 0.625rem;
}

.spaces-sb-status-item__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--presence-offline);
}

.spaces-sb-status-item__dot.presence-dot--online {
  background: var(--presence-online);
}

.spaces-sb-status-item__dot.presence-dot--idle {
  background: var(--presence-idle);
}

.spaces-sb-status-item__dot.presence-dot--dnd {
  background: var(--presence-dnd);
}

.spaces-sb-status-item__dot.presence-dot--offline {
  background: var(--presence-offline);
}

.spaces-sb-status-item[aria-checked="true"] {
  background: var(--accent-soft);
}

.spaces-sb-user__activity {
  min-width: 0;
  width: auto;
  margin: 0 var(--spaces-sb-user-row-margin-x);
  padding: 0 var(--spaces-sb-user-row-pad-x);
  overflow: visible;
  box-sizing: border-box;
}

.spaces-sb-user__activity[hidden] {
  display: none !important;
}

.spaces-sb-user__activity .cengel-user-card__activity-card {
  margin-top: 0;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  overflow: visible;
}

.spaces-sb-user__activity .cengel-user-card__activity-media,
.spaces-sb-user__activity .cengel-user-card__activity-cover {
  width: 48px;
  height: 48px;
}

.spaces-sb-user__activity .cengel-user-card__activity-cover {
  border-radius: 0.5rem;
}

.spaces-sb-user__activity .cengel-user-card__activity-body {
  height: 48px;
}

.spaces-sb-user__activity .cengel-user-card__activity-label {
  margin-bottom: 0.1875rem;
  font-size: 0.5625rem;
}

.spaces-sb-user__activity .cengel-user-card__activity-name {
  font-size: 0.75rem;
}

.spaces-sb-user__activity .cengel-user-card__activity-details {
  margin-top: 0.125rem;
  font-size: 0.625rem;
}

.spaces-sb-user__activity .cengel-user-card__activity-player {
  padding-top: 0.25rem;
  gap: 0.1875rem;
}

.spaces-sb-user__activity .cengel-user-card__activity-provider-badge {
  width: 16px;
  height: 16px;
  right: -4px;
  bottom: -4px;
  border-radius: 4px;
}

.spaces-sb-user__activity .cengel-user-card__activity-provider-badge img {
  width: 12px;
  height: 12px;
}

.friend-activity-panel {
  --spaces-sb-user-pad-x: var(--account-sidebar-inner-x);
  --spaces-sb-user-row-pad-x: 0.5rem;
  --spaces-sb-user-row-margin-x: calc(var(--spaces-sb-user-pad-x) - var(--spaces-sb-user-row-pad-x));
  --presence-dot-border: var(--eco-header-bg);
}

.friend-activity-panel .space-members-panel__header {
  padding-right: var(--account-sidebar-inner-x);
}

.friend-activity-panel__body {
  gap: 0;
  padding-top: calc(var(--sidebar-gap) * 0.5);
}

.friend-activity.spaces-sb-user {
  border-top: none;
  background: transparent;
  padding: 0.25rem 0;
}

.friend-activity.spaces-sb-user[hidden] {
  display: none !important;
}

.friend-activity.spaces-sb-user .space-member-row__status[data-listening="1"]:not([hidden]) {
  display: flex !important;
}

.friend-activity-panel > .spaces-sb-user {
  background: var(--eco-header-bg);
  --presence-dot-border: var(--eco-header-bg);
}

.friend-activity-panel__empty {
  padding: 1.25rem var(--account-sidebar-inner-x) 1.5rem;
}

.friend-activity-panel__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.friend-activity-panel__empty-desc {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* ── space'e ozgu sidebar (sp-sidebar) ────────────────────────── */

/* kapsayici: dividerlar kenardan kenara - 21.06.2026 15:45 */

.sp-sidebar {
  /* cengel rail logosu (36px) ile sol kenar hizasi - 01.07.2026 20:15 */
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --sp-sidebar-inset-y: var(--split-sidebar-inset-y);
  --sp-cat-title-gap: 4px;
  /* discord kanal listesi: dis kapsayici + satir icerigi - 01.07.2026 23:45 */
  --sp-channel-pad-x: var(--sp-sidebar-inset-x);
  --sp-channel-row-x: 0px;
  --sp-tab-row-pad-x: 0.5rem;
  --sp-tab-row-margin-x: calc(var(--sp-channel-pad-x) - var(--sp-tab-row-pad-x));
  --sp-add-tab-bg: var(--foreground);
  --sp-add-tab-fg: var(--background);
  --sp-add-tab-bg-hover: color-mix(in srgb, var(--foreground) 90%, var(--background));
  --sp-add-tab-bg-active: color-mix(in srgb, var(--foreground) 84%, var(--background));
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* overflow menu: ust kapsayicilarda kirpma kaldir, panel ustte kalsin - 02.07.2026 01:00 */

#spaces-sidebar.account-desktop-sidebar:has(.sp-sidebar [data-overflow-open="1"]) {
  overflow: visible;
  z-index: var(--z-cengel-context, 10080);
}

.sp-sidebar:has([data-overflow-open="1"]) {
  overflow: visible;
}

/* tam genislik ayrac: sol/saga bitisik — space + messages - 22.07.2026 06:05 */

.sp-sidebar__divider,
.messages-sidebar__divider {
  height: 1px;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sp-sidebar__divider,
html.dark .messages-sidebar__divider {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* space avatar: logo veya renkli planet — radius hover rail ile ayni - 16.07.2026 18:58 */

.space-avatar--has-logo {
  overflow: hidden;
}

.space-avatar__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

.space-avatar--card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  overflow: hidden;
  font-size: 1.125rem;
  border-radius: 50%;
  color: var(--av-fg, var(--foreground));
  background: var(--av-bg, color-mix(in srgb, var(--foreground) 10%, transparent));
}

.dark .space-avatar--card {
  color: var(--av-fg-d, var(--av-fg, var(--foreground)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground) 16%, transparent)));
}

.space-avatar--settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  overflow: hidden;
  font-size: 1.0625rem;
  border-radius: 12px;
  color: var(--av-fg, var(--foreground));
  background: var(--av-bg, color-mix(in srgb, var(--foreground) 10%, transparent));
}

.dark .space-avatar--settings {
  color: var(--av-fg-d, var(--av-fg, var(--foreground)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground) 16%, transparent)));
}

/* spaces liste chevron - 16.07.2026 18:58 */

.space-item__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 32%, transparent);
  transition: color 120ms ease, transform 120ms ease;
}

.space-item__chevron i {
  font-size: 0.9375rem;
  line-height: 1;
}

.space-item:hover .space-item__chevron {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  transform: translateX(1px);
}

/* sekmeler nav wrapper — scroll tabs, add butonu altta sabit - 30.06.2026 20:00 */

.sp-sidebar__nav {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sp-sidebar__tabs {
  --sp-tab-list-pad-x: var(--sp-channel-pad-x, var(--sp-sidebar-inset-x));
  --sp-tab-icon-col: 1rem;
  --sp-tab-icon-gap: 8px;
  --sp-section-gap: 14px;
  list-style: none;
  margin: 0;
  padding: var(--sp-sidebar-inset-y) 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-section-gap);
  box-sizing: border-box;
}

.sp-sidebar__tabs > .sp-sidebar__tab-item,
.sp-sidebar__tabs > .sp-sidebar__cat-item,
.sp-sidebar__tabs > .sp-sidebar__uncat-group {
  min-width: 0;
  max-width: 100%;
}

.sp-sidebar__uncat-list,
.sp-sidebar__cat-children {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* yeni sekme — primary cta, logo hizasi, tasima yok - 02.07.2026 01:30 */

.sp-sidebar__add-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin:
        var(--sp-sidebar-inset-y)
        var(--sp-channel-pad-x)
        var(--split-sidebar-inset-bottom, 0.375rem);
  flex-shrink: 0;
  min-height: 38px;
  min-width: 0;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--sidebar-item-r, 9px);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--sp-add-tab-bg) 88%, var(--sp-add-tab-fg));
  background: var(--sp-add-tab-bg);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--sp-add-tab-fg);
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease;
}

.sp-sidebar__add-tab:hover {
  background: var(--sp-add-tab-bg-hover);
  border-color: color-mix(in srgb, var(--sp-add-tab-bg-hover) 90%, var(--sp-add-tab-fg));
}

.sp-sidebar__add-tab:active {
  background: var(--sp-add-tab-bg-active);
  border-color: color-mix(in srgb, var(--sp-add-tab-bg-active) 90%, var(--sp-add-tab-fg));
}

.sp-sidebar__add-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.dark .sp-sidebar__add-tab:focus-visible {
  outline-color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-sidebar__add-tab i {
  font-size: 1.0625rem;
  line-height: 1;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.94;
}

.sp-sidebar__add-tab:hover i,
.sp-sidebar__add-tab:active i {
  opacity: 1;
}

/* drag state — boyut sabit - 30.06.2026 22:00 */

.sp-sidebar__tab-item {
  cursor: grab;
  list-style: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

.sp-sidebar__tab-item > .sp-sidebar__tab {
  max-width: none;
}

.sp-sidebar__tab-item--dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.sp-sidebar__tab-item--over > .sp-sidebar__tab {
  background: var(--sidebar-hover-bg);
}

.dark .sp-sidebar__tab-item--over > .sp-sidebar__tab {
  background: var(--sidebar-hover-bg);
}

/* kategori — bolum araligi ust listedeki gap ile ayni - 01.07.2026 14:00 */

.sp-sidebar__cat-item {
  list-style: none;
  margin: 0;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.sp-sidebar__cat-item + .sp-sidebar__cat-item {
  margin-top: 2px;
}

.sp-sidebar__uncat-group {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
}

.sp-sidebar__cat-item--dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.sp-sidebar__cat-header {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.sp-sidebar__cat-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.dark .sp-sidebar__cat-label {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-sidebar__cat-caret {
  flex-shrink: 0;
  width: 0.8125rem;
  font-size: 0.6875rem;
  line-height: 1;
  text-align: center;
  transition: transform 0.15s ease, color 100ms ease;
  color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.sp-sidebar__cat-item--collapsed .sp-sidebar__cat-caret {
  transform: rotate(-90deg);
}

.sp-sidebar__cat-item:not(.sp-sidebar__cat-item--collapsed) .sp-sidebar__cat-caret {
  transform: rotate(0deg);
}

.sp-sidebar__cat-children {
  list-style: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* display:flex [hidden] ustune yazar — sinif ile kapat - 30.06.2026 21:30 */

.sp-sidebar__cat-item--collapsed > .sp-sidebar__cat-children {
  display: none;
}

/* kategorisiz kume — ek yatay bosluk yok - 01.07.2026 13:45 */

.sp-sidebar__uncat-list {
  list-style: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-sizing: border-box;
}

/* dnd hedef vurgulari - 01.07.2026 13:00 */

.sp-sidebar__tabs--dragging .sp-sidebar__uncat-list--over {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-radius: 4px;
}

.dark .sp-sidebar__tabs--dragging .sp-sidebar__uncat-list--over {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--collapsed .sp-sidebar__cat-children {
  display: none;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over .sp-sidebar__cat-children {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-radius: 4px;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over > .sp-sidebar__cat-header {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-radius: 4px;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over > .sp-sidebar__cat-header .sp-sidebar__cat-label {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

/* surukleme sirasinda link tiklamasi engelle - 30.06.2026 12:00 */

.sp-sidebar__tab-item--dragging > .sp-sidebar__tab,
.sp-sidebar__tabs:has(.sp-sidebar__tab-item--dragging) .sp-sidebar__tab-item--child > .sp-sidebar__tab {
  pointer-events: none;
}

/* surukleme cizgisi — layout kaymasi yok - 01.07.2026 13:00 */

.sp-sidebar__tabs {
  position: relative;
}

.sp-sidebar__dnd-line {
  position: absolute;
  left: var(--sp-tab-row-margin-x);
  right: var(--sp-tab-row-margin-x);
  height: 2px;
  margin: 0;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--foreground) 55%, transparent);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 80ms ease;
}

.sp-sidebar__dnd-line--visible {
  opacity: 1;
}

/* yanit sekmeleri — parent kanal altinda - 06.07.2026 05:00 */

.sp-sidebar__reply-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.space-tab-modal__panel {
  width: 100%;
  max-width: 400px;
  border-radius: 18px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.space-tab-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-tab-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.space-tab-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  transition: background 120ms ease, color 120ms ease;
}

.space-tab-modal__close:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.space-tab-modal__body {
  padding: 18px 20px 20px;
}

.space-tab-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.space-tab-modal__field + .space-tab-modal__field {
  margin-top: 16px;
}

.space-tab-modal__field + .space-tab-modal__error {
  margin-top: 12px;
}

.space-tab-modal__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.space-tab-modal__label {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-family: Arial, sans-serif;
}

.space-tab-modal__body > .space-tab-modal__label {
  margin-bottom: 6px;
}

.space-tab-modal__label--section {
  margin-top: 16px;
}

.space-tab-modal__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  font-variant-numeric: tabular-nums;
}

.space-tab-modal__count--near {
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.space-tab-modal__count--full {
  color: #dc2626;
}

.space-tab-modal__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.space-tab-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  color: var(--foreground);
  font-size: 0.9375rem;
  font-family: Arial, sans-serif;
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-tab-modal__input::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground) 36%, transparent);
  opacity: 1;
}

.space-tab-modal__input::placeholder {
  color: color-mix(in srgb, var(--foreground) 36%, transparent);
  opacity: 1;
}

.space-tab-modal__input:focus {
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  background: transparent;
}

.space-tab-modal__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.space-tab-type-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.space-tab-type-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
  font-family: Arial, sans-serif;
}

.space-tab-type-card--selected {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.space-tab-type-card__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--foreground);
}

.space-tab-type-card__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.space-tab-type-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.space-tab-type-card__desc {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.space-tab-modal__error {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: #dc2626;
  font-family: Arial, sans-serif;
}

.space-tab-modal__error.hidden {
  display: none;
}

.space-tab-modal__error.\!hidden {
  display: none !important;
}

.space-tab-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.space-tab-modal__field + .space-tab-modal__actions,
.space-tab-modal__error + .space-tab-modal__actions {
  margin-top: 16px;
}

/* deprecated — cengel-button ile degistirildi - 01.08.2026 23:59 */

/* .space-tab-modal__btn { ... } */

.space-tab-type-card--disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* satir: uye paneli space-member-row ile ayni overflow bg (sol/sag simetrik) - 02.07.2026 00:30 */

.sp-sidebar__tab {
  display: flex;
  align-items: center;
  gap: var(--sp-tab-icon-gap, 8px);
  min-height: 36px;
  min-width: 0;
  width: auto;
  margin: 0 var(--sp-tab-row-margin-x, calc(var(--sp-channel-pad-x, 14px) - var(--sp-tab-row-pad-x, 0.5rem)));
  padding: 6px var(--sp-tab-row-pad-x, 0.5rem);
  border-radius: var(--sidebar-item-r, 9px);
  text-decoration: none;
  color: var(--foreground);
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 120ms ease, color 100ms ease;
}

.sp-sidebar__tab:hover {
  background-color: var(--sidebar-hover-bg);
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.dark .sp-sidebar__tab:hover {
  color: color-mix(in srgb, var(--foreground) 92%, transparent);
}

.sp-sidebar__tab--active,
.sp-sidebar__tab--active:hover {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg, var(--foreground));
}

.dark .sp-sidebar__tab--active,
.dark .sp-sidebar__tab--active:hover {
  background-color: var(--sidebar-active-bg);
}

/* ikon kolonu — kategori yazisi ile ayni sol ray (channel-row-x) - 01.07.2026 23:45 */

.sp-sidebar__tab-icon {
  width: var(--sp-tab-icon-col, 1rem);
  min-width: var(--sp-tab-icon-col, 1rem);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  text-align: left;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  transition: color 100ms ease;
}

.dark .sp-sidebar__tab-icon {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-sidebar__tab:hover .sp-sidebar__tab-icon {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
}

.sp-sidebar__tab--active .sp-sidebar__tab-icon {
  color: var(--sidebar-active-fg, var(--accent));
}

.sp-sidebar__tab-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  transition: color 100ms ease;
}

.dark .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.sp-sidebar__tab:hover .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
}

.sp-sidebar__tab--active .sp-sidebar__tab-label {
  font-weight: 500;
  color: var(--sidebar-active-fg, var(--accent));
}

/* okunmamis — parlak metin - 30.06.2026 23:15 */

.sp-sidebar__tab--unread .sp-sidebar__tab-label {
  font-weight: 500;
  color: var(--foreground);
}

.dark .sp-sidebar__tab--unread .sp-sidebar__tab-label {
  color: var(--foreground);
}

.sp-sidebar__tab--unread .sp-sidebar__tab-icon {
  color: var(--foreground);
}

.dark .sp-sidebar__tab--unread .sp-sidebar__tab-icon {
  color: var(--foreground);
}

.sp-sidebar__tab--active .sp-sidebar__tab-mention {
  display: none;
}

/* yanit thread agaci — parent kanal basligindan dallanan rail - 16.07.2026 17:25 */

.sp-sidebar__tab-item:has(> .sp-sidebar__reply-children > .sp-sidebar__tab-item--reply-child) {
  --sp-reply-thread-rail: color-mix(in srgb, var(--foreground) 16%, transparent);
  --sp-reply-thread-radius: 8px;
  --sp-reply-thread-stroke: 1.5px;
  --sp-reply-thread-stub: 0.6875rem;
  --sp-reply-thread-cap: 8px;
}

.dark .sp-sidebar__tab-item:has(> .sp-sidebar__reply-children > .sp-sidebar__tab-item--reply-child) {
  --sp-reply-thread-rail: color-mix(in srgb, var(--foreground) 24%, transparent);
}

.sp-sidebar__reply-children {
  --sp-reply-rail-x: calc(
        var(--sp-tab-row-margin-x, 0.5rem) + var(--sp-tab-row-pad-x, 0.5rem) + (var(--sp-tab-icon-col, 1rem) / 2)
    );
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

/* parent stub kaldirildi — ilk cocuk rail'i yukari uzar, cift stroke olmaz - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child {
  position: relative;
}

/* dikey govde — ara elemanlarda tam yukseklik; ilk cocuk parent'a kadar uzar - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) - var(--sp-reply-thread-stroke) / 2);
  top: 0;
  width: var(--sp-reply-thread-stroke);
  background: var(--sp-reply-thread-rail);
  pointer-events: none;
}

.sp-sidebar__tab-item--reply-child:first-child::before {
  top: calc(-1 * var(--sp-reply-thread-cap, 8px));
}

.sp-sidebar__tab-item--reply-child:not(:last-child)::before {
  bottom: 0;
}

/* son eleman: L tek parca (::after); ::before yok — kesişim kararmasi olmaz - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:last-child::before {
  content: none;
}

/* ara elemanlar — govdenin sag kenarindan cikan dal (ust uste binmez) - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) + var(--sp-reply-thread-stroke) / 2);
  top: 50%;
  width: calc(var(--sp-reply-thread-stub) - var(--sp-reply-thread-stroke) / 2);
  height: var(--sp-reply-thread-stroke);
  background: var(--sp-reply-thread-rail);
  transform: translateY(-50%);
  pointer-events: none;
}

/* son eleman — tek L: dikey + yuvarlak donus + yatay (cift stroke yok) - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:last-child::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) - var(--sp-reply-thread-stroke) / 2);
  top: 0;
  width: calc(var(--sp-reply-thread-stub) + var(--sp-reply-thread-stroke) / 2);
  height: calc(50% + var(--sp-reply-thread-stroke) / 2);
  box-sizing: border-box;
  border-left: var(--sp-reply-thread-stroke) solid var(--sp-reply-thread-rail);
  border-bottom: var(--sp-reply-thread-stroke) solid var(--sp-reply-thread-rail);
  border-bottom-left-radius: var(--sp-reply-thread-radius);
  pointer-events: none;
}

/* tek yanit: L parent stub yerine yukari uzar - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:first-child:last-child::after {
  top: calc(-1 * var(--sp-reply-thread-cap, 8px));
  height: calc(50% + var(--sp-reply-thread-cap, 8px) + var(--sp-reply-thread-stroke) / 2);
}

.sp-sidebar__tab-item--reply-child:has(.sp-sidebar__tab--active)::before,
.sp-sidebar__tab-item--reply-child:has(.sp-sidebar__tab--unread)::before {
  background: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-sidebar__tab-item--reply-child:not(:last-child):has(.sp-sidebar__tab--active)::after,
.sp-sidebar__tab-item--reply-child:not(:last-child):has(.sp-sidebar__tab--unread)::after {
  background: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-sidebar__tab-item--reply-child:last-child:has(.sp-sidebar__tab--active)::after,
.sp-sidebar__tab-item--reply-child:last-child:has(.sp-sidebar__tab--unread)::after {
  border-left-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  border-bottom-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

/* pill arka plani yalnizca etiketin oldugu alanda — agac cizgilerinin ustune binmez - 06.07.2026 05:10 */

.sp-sidebar__tab--reply-thread {
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0.375rem;
  margin-left: calc(var(--sp-reply-rail-x) + var(--sp-reply-thread-stub, 0.6875rem) + 0.25rem);
}

.sp-sidebar__tab--reply-thread .sp-sidebar__tab-icon--empty {
  display: none;
}

.sp-sidebar__tab--reply-thread .sp-sidebar__tab-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 46%, transparent);
}

.dark .sp-sidebar__tab--reply-thread .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 54%, transparent);
}

.sp-sidebar__tab--reply-thread:hover .sp-sidebar__tab-label,
.sp-sidebar__tab--reply-thread.sp-sidebar__tab--active .sp-sidebar__tab-label,
.sp-sidebar__tab--reply-thread.sp-sidebar__tab--unread .sp-sidebar__tab-label {
  color: var(--foreground);
}

.sp-sidebar__tab-icon--empty {
  display: inline-block;
  width: 1rem;
  flex-shrink: 0;
}

.sp-sidebar__header {
  /* hover dis inset: satir margin-x ile ayni (ust/alt = sol/sag) - 03.08.2026 10:15 */
  padding: var(--sp-tab-row-margin-x, calc(var(--sp-channel-pad-x, 14px) - var(--sp-tab-row-pad-x, 0.5rem))) 0;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* hover / menu: sidebar overflow clip kaldir — footer user ile ayni - 20.07.2026 02:17 */

#spaces-sidebar.account-desktop-sidebar:has(.sp-sidebar__header:hover),
#spaces-sidebar.account-desktop-sidebar:has(.sp-sidebar__header:focus-within),
#spaces-sidebar.account-desktop-sidebar:has(.sp-sidebar__header [data-overflow-open="1"]) {
  overflow: visible;
  z-index: var(--z-cengel-context, 10080);
}

.sp-sidebar__header:hover,
.sp-sidebar__header:focus-within,
.sp-sidebar__header:has([data-overflow-open="1"]) {
  z-index: var(--z-cengel-context, 10080);
}

/* kanal tab / footer user ile ayni margin; pad dort yonde esit - 03.08.2026 10:15 */

.sp-sidebar__space-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  margin: 0 var(--sp-tab-row-margin-x, calc(var(--sp-channel-pad-x, 14px) - var(--sp-tab-row-pad-x, 0.5rem)));
  padding: var(--sp-tab-row-pad-x, 0.5rem);
  min-height: 2.5rem;
  border-radius: var(--sidebar-item-r, 0.5rem);
  background: transparent;
  overflow: visible;
  transition: background-color 120ms ease;
}

.sp-sidebar__space-row:hover,
.sp-sidebar__space-row:has([data-overflow-open="1"]),
.sp-sidebar__space-row:focus-within {
  background-color: var(--sidebar-hover-bg);
}

.sp-sidebar__space-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

.sp-sidebar__space-link:hover,
.sp-sidebar__space-link--active,
.sp-sidebar__space-link--active:hover {
  background-color: transparent;
}

/* 36x36 squircle — rail active / widget product ile ayni dil - 20.07.2026 02:17 */

.sp-sidebar__space-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  font-size: var(--rail-btn-icon-size, 1.0625rem);
  line-height: 1;
  color: var(--av-fg, var(--foreground));
  background: var(--av-bg, color-mix(in srgb, var(--foreground) 10%, transparent));
  border-radius: 30%;
  corner-shape: squircle;
}

.dark .sp-sidebar__space-avatar {
  color: var(--av-fg-d, var(--av-fg, var(--foreground)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground) 16%, transparent)));
}

.sp-sidebar__space-avatar--logo {
  overflow: hidden;
}

.sp-sidebar__space-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: inherit;
  corner-shape: inherit;
}

.sp-sidebar__space-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.sp-sidebar__name-row {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  max-width: 100%;
}

.sp-sidebar__name {
  display: block;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
}

.sp-sidebar__verified {
  flex-shrink: 0;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--foreground);
}

.sp-sidebar__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-sidebar__header-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  z-index: 1;
}

/* rich-btn ile ayni kompakt ghost tetikleyici - 20.07.2026 02:17 */

.sp-sidebar__header-menu [data-overflow-dropdown-trigger] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.sp-sidebar__header-menu [data-overflow-dropdown-trigger]:hover,
.sp-sidebar__header-menu [data-overflow-dropdown-trigger][aria-expanded="true"],
.sp-sidebar__header-menu[data-overflow-open="1"] [data-overflow-dropdown-trigger] {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-sidebar__header-menu [data-overflow-dropdown-trigger]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 1px;
}

.sp-sidebar__header-menu [data-overflow-dropdown-trigger] i {
  font-size: 1.125rem;
  line-height: 1;
}

.sp-sidebar__header-menu[data-overflow-open="1"] {
  z-index: var(--z-cengel-context, 10080);
}

.sp-sidebar__header-menu .cengel-menu.cengel-menu--anchored,
.sp-sidebar__header-menu [data-overflow-dropdown-panel] {
  z-index: var(--z-cengel-context, 10080);
}

.sp-sidebar__nav-divider {
  height: 1px;
  width: 100%;
  margin: var(--sp-sidebar-inset-y) 0 0;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sp-sidebar__nav-divider {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.sp-sidebar__cat-header {
  justify-content: space-between;
  gap: 8px;
  padding: 2px var(--sp-channel-pad-x, var(--sp-sidebar-inset-x)) 6px;
  min-height: 26px;
  box-sizing: border-box;
}

.sp-sidebar__cat-title {
  display: flex;
  align-items: center;
  gap: var(--sp-cat-title-gap, 4px);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sp-sidebar__cat-title:hover .sp-sidebar__cat-label,
.sp-sidebar__cat-title:hover .sp-sidebar__cat-caret,
.sp-sidebar__cat-title:focus-visible .sp-sidebar__cat-label,
.sp-sidebar__cat-title:focus-visible .sp-sidebar__cat-caret {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.sp-sidebar__cat-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  outline-offset: 2px;
}

.sp-sidebar__cat-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-sidebar__cat-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: 2px;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
  cursor: pointer;
  transition: color 100ms ease, background-color 100ms ease;
}

.sp-sidebar__cat-add:hover {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-sidebar__cat-add:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  outline-offset: 1px;
}

.sp-sidebar__cat-add i {
  font-size: 0.875rem;
  line-height: 1;
}

/* ── space settings layout ───────────────────────────────────── */

.sp-settings {
  display: flex;
  flex-direction: column;
  gap: var(--section-stack-gap);
}

.sp-settings__content {
  display: flex;
  flex-direction: column;
  gap: var(--section-stack-gap);
}

.sp-settings__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sp-settings__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
}

.sp-settings__subtitle {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin: 0;
}

.sp-settings__layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--section-stack-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .sp-settings__layout {
    grid-template-columns: 1fr;
  }
}

.sp-settings__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-settings__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 120ms ease;
}

.sp-settings__nav-item:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings__nav-item--active {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.sp-settings__nav-icon {
  font-size: 1rem;
  opacity: 0.55;
}

.sp-settings__nav-item--active .sp-settings__nav-icon {
  opacity: 1;
}

.sp-settings-panel {
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  overflow: hidden;
}

.sp-settings-panel--danger {
  border-color: color-mix(in srgb, #dc2626 25%, transparent);
}

.sp-settings-panel__head {
  padding: var(--section-pad-y-head) var(--section-pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-panel__head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.sp-settings-panel__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-panel__desc {
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-panel__body {
  padding: var(--section-pad-y);
}

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

.sp-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.sp-settings-form--readonly .sp-settings-panel__body {
  gap: 1.125rem;
}

.sp-settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sp-settings-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  font-size: 0.9375rem;
  transition: border-color 140ms ease;
}

.sp-settings-input:focus {
  outline: 2px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  outline-offset: 1px;
}

.sp-settings-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sp-settings-input--search {
  padding-left: 2.25rem;
}

.sp-settings-readonly {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-hint {
  font-size: 0.875rem;
  margin: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* deprecated — cengel-button ile degistirildi - 01.08.2026 23:59 */

/* .sp-settings-btn { ... } */

.sp-settings-divider {
  margin: 0;
  border: none;
  height: 1px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-logo-row {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.sp-settings-logo-row--tall {
  align-items: flex-start;
  gap: 1.25rem;
}

.sp-settings-logo-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.sp-settings-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-settings-logo-preview--lg {
  width: 88px;
  height: 88px;
  border-radius: 18px;
}

.sp-settings-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sp-settings-logo-fallback {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-logo-preview--lg .sp-settings-logo-fallback {
  font-size: 2rem;
}

.sp-settings-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sp-settings-field--status {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sp-settings-field__status-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sp-settings-field--status .sp-settings-toggle {
  margin-top: 0;
  flex-shrink: 0;
}

.sp-settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-settings-subsection + .sp-settings-subsection {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-subtitle {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-settings-list-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-settings-list-avatar-btn {
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}

.sp-settings-list-avatar-btn:hover .sp-settings-list-avatar-img {
  opacity: 0.88;
}

.sp-settings-list-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-member-row__name-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sp-member-row__name-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-settings-list-avatar--mail {
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-list-main {
  flex: 1;
  min-width: 0;
}

.sp-settings-list-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.sp-settings-list-meta {
  font-size: 0.875rem;
  margin: 0.125rem 0 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-member-row__join-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-member-row__join-meta span {
  white-space: nowrap;
}

.sp-settings-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sp-settings-overflow-trigger {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.sp-settings-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-settings-search-row {
  position: relative;
}

.sp-settings-search-icon {
  position: absolute;
  left: 0.8125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.sp-settings-textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}

.sp-settings-hint--tight {
  margin-top: 0.25rem;
}

.sp-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
}

.sp-settings-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
  transition: background-color 150ms ease-out;
}

.sp-settings-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--background);
  transition: transform 150ms ease-out;
}

.sp-settings-toggle--on .sp-settings-toggle__track {
  background: var(--foreground);
}

.sp-settings-toggle--on .sp-settings-toggle__thumb {
  transform: translateX(20px);
}

.sp-settings-toggle__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.sp-settings-tab-order {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-settings-tab-row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem 0.8125rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-tab-row--draggable {
  cursor: grab;
}

.sp-settings-tab-drag {
  opacity: 0.35;
}

.sp-settings-tab-icon {
  opacity: 0.55;
}

.sp-settings-tab-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
}

.sp-settings-tab-badge {
  font-size: 0.75rem;
  opacity: 0.5;
}

.sp-settings-notice {
  display: flex;
  gap: 0.5rem;
  padding: 0.8125rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.sp-settings-dns-box {
  padding: 0.8125rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-settings-danger-block {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #dc2626 20%, transparent);
}

.sp-settings-danger-block + .sp-settings-danger-block {
  margin-top: 0.8125rem;
}

.sp-settings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.sp-settings-empty-state__icon {
  width: 5.5rem;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sp-settings-empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-empty-state__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0.375rem 0 0;
  max-width: 20rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-empty-state__action {
  margin-top: 1.25rem;
}

.sp-settings-dropdown {
  position: relative;
}

.sp-settings-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6875rem 0.9375rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  font-size: 0.9375rem;
  cursor: pointer;
}

.sp-settings-dropdown__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown, 120);
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-settings-dropdown__option {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6875rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-size: 0.875rem;
  cursor: pointer;
}

.sp-settings-dropdown__option:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sp-settings-modal.hidden {
  display: none;
}

.sp-settings-modal.\!hidden {
  display: none !important;
}

.sp-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.sp-settings-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 24rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
}

.sp-settings-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-modal__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.sp-settings-modal__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-settings-modal__body {
  padding: 1.25rem;
}

.sp-settings-modal__subtitle {
  font-size: 0.875rem;
  margin: 0 0 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-domain-feature {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.0625rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.sp-domain-feature__claim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.sp-domain-feature__claim-field {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-domain-feature__claim .sp-settings-input {
  width: 100%;
  height: 2.75rem;
  box-sizing: border-box;
  padding: 0 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.25;
}

.sp-domain-feature__claim .cengel-btn {
  flex-shrink: 0;
}

.sp-domain-feature__claim .sp-settings-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, #dc2626 55%, transparent);
}

.sp-domain-feature__claim-error {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #dc2626;
}

.dark .sp-domain-feature__claim-error {
  color: #f87171;
}

.sp-domain-feature__status {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sp-domain-feature__status--compact {
  gap: 0.75rem;
}

.sp-domain-feature__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sp-domain-feature__domain {
  /* normal font — mono degil - 22.07.2026 00:10 */
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
  word-break: break-all;
}

.sp-domain-feature__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sp-domain-feature__pill--ok {
  color: #15803d;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  border-color: color-mix(in srgb, #16a34a 22%, transparent);
}

.dark .sp-domain-feature__pill--ok {
  color: #86efac;
  background: color-mix(in srgb, #4ade80 14%, transparent);
  border-color: color-mix(in srgb, #4ade80 24%, transparent);
}

.sp-domain-feature__pill--pending {
  color: #a16207;
  background: color-mix(in srgb, #ca8a04 12%, transparent);
  border-color: color-mix(in srgb, #ca8a04 22%, transparent);
}

.dark .sp-domain-feature__pill--pending {
  color: #fde68a;
  background: color-mix(in srgb, #fbbf24 14%, transparent);
  border-color: color-mix(in srgb, #fbbf24 24%, transparent);
}

.sp-domain-feature__dns-key {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-domain-feature__dns-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
}

.sp-domain-feature__dns-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.sp-domain-feature__dns-val {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-all;
  color: var(--foreground);
}

.sp-domain-feature__copy {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  cursor: pointer;
}

.sp-domain-feature__copy:hover,
.sp-domain-feature__copy.is-copied {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-domain-feature__copy.is-copied {
  color: #15803d;
  border-color: color-mix(in srgb, #16a34a 28%, transparent);
}

.dark .sp-domain-feature__copy.is-copied {
  color: #86efac;
  border-color: color-mix(in srgb, #4ade80 28%, transparent);
}

.sp-domain-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sp-domain-feature__actions .cengel-btn i {
  font-size: 0.9375rem;
}

/* dogrulanmis domain baslik - 22.07.2026 00:45 */

.sp-domain-feature__ok-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sp-domain-feature__ok-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.sp-domain-feature__ok-sub {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

.sp-domain-feature__ok-head .cengel-btn {
  flex-shrink: 0;
}

.sp-domain-verify {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-domain-verify__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 10px;
  overflow: hidden;
}

.sp-domain-verify__step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 0.9375rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.sp-domain-verify__step:last-child {
  border-bottom: none;
}

.sp-domain-verify__step--done {
  background: color-mix(in srgb, #16a34a 5%, transparent);
}

.dark .sp-domain-verify__step--done {
  background: color-mix(in srgb, #4ade80 6%, transparent);
}

.sp-domain-verify__step--current {
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}

.sp-domain-verify__step-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sp-domain-verify__step-num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  background: transparent;
}

.sp-domain-verify__step-num i {
  font-size: 0.75rem;
  line-height: 1;
}

.sp-domain-verify__step--done .sp-domain-verify__step-num {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}

.dark .sp-domain-verify__step--done .sp-domain-verify__step-num {
  color: #052e16;
  background: #4ade80;
  border-color: #4ade80;
}

.sp-domain-verify__step--current .sp-domain-verify__step-num {
  color: #fff;
  background: var(--foreground);
  border-color: var(--foreground);
}

.dark .sp-domain-verify__step--current .sp-domain-verify__step-num {
  color: #0f0f13;
  background: #e4e4e7;
  border-color: #e4e4e7;
}

.sp-domain-verify__step-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  justify-content: center;
}

.sp-domain-verify__step-copy > strong {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
}

.sp-domain-verify__step-copy > span {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  word-break: break-word;
}

.sp-domain-verify__help {
  margin: 0.0625rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.sp-domain-verify__link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}

.sp-domain-verify__link:hover {
  color: #1e40af;
}

.dark .sp-domain-verify__link {
  color: #60a5fa;
}

.dark .sp-domain-verify__link:hover {
  color: #93c5fd;
}

.sp-domain-verify__sep {
  opacity: 0.45;
}

.sp-domain-verify__dns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: calc(1.5rem + 0.75rem);
}

.sp-domain-verify__dns-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sp-domain-verify__type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1875rem 0.4375rem;
  border-radius: 6px;
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-mail-promo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.375rem 1.375rem 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.sp-mail-promo__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sp-mail-promo__hero {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
}

.sp-mail-promo__art {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.sp-mail-promo__title {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--foreground);
  word-break: break-word;
}

.sp-mail-promo__domain {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-mail-promo__lead {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.sp-mail-promo__cta {
  display: flex;
}

.sp-mail-promo__cta-btn {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}

.sp-mail-promo__gate {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-mail-promo__gate i {
  font-size: 1rem;
}

.sp-mail-promo__section-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-mail-promo__examples {
  padding-top: 1.125rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-mail-promo__examples-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.sp-mail-promo__examples-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sp-mail-promo__examples-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

.sp-mail-promo__stack {
  display: flex;
  align-items: center;
}

.sp-mail-promo__stack-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  margin-left: -0.5rem;
  flex-shrink: 0;
  border: 2px solid var(--background);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-mail-promo__stack-avatar:first-child {
  margin-left: 0;
}

.sp-mail-promo__stack-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-mail-promo__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.sp-mail-promo__people-item {
  min-width: 0;
}

.sp-mail-promo__person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
              background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-mail-promo__person:hover {
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

.sp-mail-promo__person:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.sp-mail-promo__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-mail-promo__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-mail-promo__person-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.sp-mail-promo__person-email {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  word-break: break-all;
}

.sp-mail-promo__person-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

.sp-mail-promo__role {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

@media (max-width: 640px) {
  .sp-mail-promo__people {
    grid-template-columns: 1fr;
  }

  .sp-mail-promo__art {
    width: 3.75rem;
    height: 3.75rem;
  }

  .sp-mail-promo__title {
    font-size: 1.75rem;
  }
}

.sp-mail-setup.sp-domain-verify {
  margin-top: 0.25rem;
}

.sp-mail-dns {
  display: grid;
  grid-template-columns: 4.25rem minmax(4.5rem, 0.32fr) minmax(0, 1fr);
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-mail-dns--mx {
  grid-template-columns: 4.25rem 4.25rem 4.75rem minmax(0, 1fr);
}

.sp-mail-dns__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0.875rem 0.75rem;
  text-align: left;
  font: inherit;
  color: inherit;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: transparent;
  cursor: default;
}

.sp-mail-dns__cell:last-child {
  border-right: none;
}

button.sp-mail-dns__cell {
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

button.sp-mail-dns__cell:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

button.sp-mail-dns__cell:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: -2px;
  z-index: 1;
}

button.sp-mail-dns__cell.is-copied {
  background: color-mix(in srgb, #16a34a 8%, transparent);
}

.dark button.sp-mail-dns__cell.is-copied {
  background: color-mix(in srgb, #4ade80 10%, transparent);
}

.sp-mail-dns__cell--type {
  align-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

button.sp-mail-dns__cell--type:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-mail-dns__key {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-mail-dns__val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  word-break: break-all;
}

.sp-mail-dns__cell--type .sp-mail-dns__val,
.sp-mail-dns__cell--name .sp-mail-dns__val,
.sp-mail-dns__cell--prio .sp-mail-dns__val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

.sp-mail-dns__cell--type .sp-mail-dns__val {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .sp-mail-dns,
  .sp-mail-dns--mx {
    grid-template-columns: 1fr 1fr;
  }

  .sp-mail-dns__cell--type,
  .sp-mail-dns__cell--host {
    grid-column: 1 / -1;
  }

  .sp-mail-dns__cell--type {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  }

  .sp-mail-dns__cell--name {
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  }

  .sp-mail-dns--mx .sp-mail-dns__cell--prio {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  }
}

.sp-mailbox__head-copy {
  min-width: 0;
}

.sp-mailbox {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.sp-mailbox__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-mailbox__desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-mailbox__meter {
  flex-shrink: 0;
  width: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-mailbox__meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sp-mailbox__meter-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-mailbox__meter-count {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-mailbox__meter-count strong {
  font-weight: 700;
  color: var(--foreground);
}

.sp-mailbox__meter-pending {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-mailbox__bar {
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-mailbox__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-mailbox__bar-fill.is-full {
  background: #dc2626;
}

.dark .sp-mailbox__bar-fill.is-full {
  background: #f87171;
}

.sp-mailbox__compose {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.0625rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.sp-mailbox__compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.75rem;
}

.sp-mailbox__member {
  position: relative;
  min-width: 0;
}

.sp-mailbox__member-icon {
  position: absolute;
  left: 0.8125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  pointer-events: none;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
}

.sp-mailbox__member-input {
  padding-left: 2.25rem;
}

.sp-mailbox__addr {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  transition: border-color 150ms ease-out;
}

.sp-mailbox__addr:focus-within {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.sp-mailbox__addr-local {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sp-mailbox__addr-domain {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.75rem 0 0.5rem;
  max-width: 42%;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-mailbox__compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sp-mailbox__compose-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.sp-mailbox__compose-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

.sp-mailbox__compose-actions .cengel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.sp-mailbox__offer-warn {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
}

.dark .sp-mailbox__offer-warn {
  color: #fbbf24;
}

.sp-mailbox__suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 14rem;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-mailbox__suggest-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.sp-mailbox__suggest-item.is-active,
.sp-mailbox__suggest-item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-mailbox__suggest-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-mailbox__suggest-meta {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.sp-mailbox__suggest-name,
.sp-mailbox__suggest-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-mailbox__suggest-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.sp-mailbox__suggest-user {
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-mailbox__suggest-empty {
  margin: 0;
  padding: 0.625rem 0.5rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-mailbox__list {
  margin: 0;
  gap: 0.5rem;
}

.sp-mailbox__row {
  transition: background-color 150ms ease-out;
}

.sp-mailbox__row:hover {
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.sp-mailbox__email-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--foreground);
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-mailbox__email-btn:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-mailbox__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  font-size: 0.75rem !important;
}

.sp-mailbox__who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.sp-mailbox__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sp-mailbox__icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.sp-mailbox__icon-btn:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-mailbox__icon-btn--danger:hover {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 28%, transparent);
  background: color-mix(in srgb, #dc2626 8%, transparent);
}

.dark .sp-mailbox__icon-btn--danger:hover {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 28%, transparent);
  background: color-mix(in srgb, #f87171 10%, transparent);
}

.sp-mailbox__icon-btn--ok:hover {
  color: #15803d;
  border-color: color-mix(in srgb, #16a34a 28%, transparent);
  background: color-mix(in srgb, #16a34a 8%, transparent);
}

.dark .sp-mailbox__icon-btn--ok:hover {
  color: #86efac;
  border-color: color-mix(in srgb, #4ade80 28%, transparent);
  background: color-mix(in srgb, #4ade80 10%, transparent);
}

.sp-mailbox__icon-btn i {
  font-size: 0.9375rem;
  line-height: 1;
}

.sp-mailbox__pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sp-mailbox__pill--active {
  color: #15803d;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  border-color: color-mix(in srgb, #16a34a 22%, transparent);
}

.dark .sp-mailbox__pill--active {
  color: #86efac;
  background: color-mix(in srgb, #4ade80 14%, transparent);
  border-color: color-mix(in srgb, #4ade80 24%, transparent);
}

.sp-mailbox__pill--offered {
  color: #1d4ed8;
  background: color-mix(in srgb, #3b82f6 12%, transparent);
  border-color: color-mix(in srgb, #3b82f6 22%, transparent);
}

.dark .sp-mailbox__pill--offered {
  color: #93c5fd;
  background: color-mix(in srgb, #60a5fa 14%, transparent);
  border-color: color-mix(in srgb, #60a5fa 24%, transparent);
}

.sp-mailbox__pill--pending_user_slot {
  color: #a16207;
  background: color-mix(in srgb, #ca8a04 12%, transparent);
  border-color: color-mix(in srgb, #ca8a04 22%, transparent);
}

.dark .sp-mailbox__pill--pending_user_slot {
  color: #fde68a;
  background: color-mix(in srgb, #fbbf24 14%, transparent);
  border-color: color-mix(in srgb, #fbbf24 24%, transparent);
}

.sp-mailbox__empty,
.sp-mailbox__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.sp-mailbox__empty-icon,
.sp-mailbox__gate-icon {
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
  color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-mailbox__empty-title,
.sp-mailbox__gate-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-mailbox__empty-desc,
.sp-mailbox__gate-desc {
  margin: 0.3125rem 0 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-mailbox-leave {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

@media (max-width: 640px) {
  .sp-mailbox__compose-grid {
    grid-template-columns: 1fr;
  }

  .sp-mailbox__meter {
    width: 100%;
  }

  .sp-mailbox__addr-domain {
    max-width: 48%;
  }
}

/* tum roller cikartilinca container gizlenir - 06.07.2026 23:55 */

.sp-settings-role-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}

.sp-settings-role-chips--empty:not(:has([data-sp-role-add])) {
  display: none;
}

.sp-settings-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  border: none;
  cursor: default;
  background: color-mix(in srgb, var(--role-color, #6b7280) 15%, transparent);
  color: var(--role-color, #6b7280);
}

.sp-settings-role-chip--removable {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.sp-settings-role-chip--removable i {
  font-size: 0.625rem;
  opacity: 0.7;
}

.sp-settings-role-chip--removable:hover {
  background: color-mix(in srgb, var(--role-color, #6b7280) 26%, transparent);
}

.sp-settings-role-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  cursor: pointer;
  font-size: 0.6875rem;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.sp-settings-role-add:hover {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-role-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--role-color, #6b7280);
}

/* rol secici popover — reaksiyon secici ile ayni ankorlu davranis - 06.07.2026 18:00 */

.sp-settings-role-popover {
  position: fixed;
  z-index: 10200;
  max-height: 280px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-settings-role-popover.hidden {
  display: none;
}

.sp-settings-role-popover.\!hidden {
  display: none !important;
}

.sp-settings-role-popover__list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-settings-role-popover__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}

.sp-settings-role-popover__item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-settings-role-popover__item--pending {
  opacity: 0.5;
  pointer-events: none;
}

.sp-settings-role-popover__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-settings-role-popover__check {
  font-size: 0.875rem;
  opacity: 0;
  flex-shrink: 0;
}

.sp-settings-role-popover__item--checked .sp-settings-role-popover__check {
  opacity: 1;
}

.sp-settings-role-popover__empty {
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

/* iki secenekli erisim kontrolu — davet / kesfedilebilir - 06.07.2026 17:45 */

.sp-settings-segmented {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-settings-segmented__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.sp-settings-segmented__option:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.sp-settings-segmented__option i {
  font-size: 1.125rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  transition: color 140ms ease;
}

.sp-settings-segmented__option--active {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-segmented__option--active i {
  color: var(--foreground);
}

.sp-settings-segmented__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.sp-settings-segmented__title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.sp-settings-segmented__desc {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-segmented--horizontal {
  flex-direction: row;
  gap: 0.75rem;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__option {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  min-height: 8.5rem;
  justify-content: center;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__option i {
  margin-top: 0;
  font-size: 1.625rem;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__text {
  align-items: center;
}

@media (max-width: 640px) {
  .sp-settings-segmented--horizontal {
    flex-direction: column;
  }

  .sp-settings-segmented--horizontal .sp-settings-segmented__option {
    min-height: 0;
  }
}

/* roller accordion — tum roller (uye dahil) tek kalip - 07.07.2026 05:50 */

/* ── liste kapsayici ──────────────────────────────────────────────────── */

.sp-roles-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.sp-roles-accordion__list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  transition: border-color 200ms ease;
}

/* siralamada degisiklik oldugunda dis cerceve amber'e donus - 07.07.2026 06:36 */

.sp-roles-accordion--order-dirty .sp-roles-accordion__list {
  border-color: color-mix(in srgb, #f59e0b 60%, transparent);
  outline: 2px dashed color-mix(in srgb, #f59e0b 45%, transparent);
  outline-offset: 2px;
}

.sp-roles-accordion__park {
  width: 100%;
  margin-top: 2px;
}

/* ── satir ────────────────────────────────────────────────────────────── */

.sp-roles-accordion__entry {
  width: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
  background: var(--background);
  transition: border-color 180ms ease, background-color 180ms ease;
  overflow: hidden;
}

.sp-roles-accordion__entry.overflow-menu-row--open,
.sp-roles-accordion__entry:has([data-overflow-open="1"]) {
  position: relative;
  z-index: 50;
  overflow: visible;
}

.sp-roles-accordion__entry--active {
  border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
}

.sp-roles-accordion__entry--dirty {
  border-color: color-mix(in srgb, #f59e0b 55%, transparent);
}

.sp-roles-accordion__entry--dirty .sp-roles-accordion__title-name {
  font-style: italic;
}

/* ── satir iç düzeni ──────────────────────────────────────────────────── */

.sp-roles-accordion__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
  min-height: 3.75rem;
}

.sp-roles-accordion__hit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.375rem 0.5rem 0.25rem;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 140ms ease;
}

.sp-roles-accordion__hit:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.sp-roles-accordion__main {
  flex: 1;
  min-width: 0;
  padding-right: 0.25rem;
}

.sp-roles-accordion__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex-wrap: wrap;
}

.sp-roles-accordion__meta {
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.sp-roles-accordion__meta-part {
  line-height: 1.4;
}

.sp-roles-accordion__meta-dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 999px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 22%, transparent);
  align-self: center;
}

.sp-roles-accordion__meta-dot--inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.3rem;
}

/* ── araçlar: overflow + caret ────────────────────────────────────────── */

.sp-roles-accordion__menu {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.sp-roles-accordion__overflow-wrap {
  position: relative;
  display: flex;
}

.sp-roles-accordion__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 30%, transparent);
  transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1), color 140ms ease;
}

.sp-roles-accordion__caret i {
  font-size: 0.875rem;
  line-height: 1;
}

.sp-roles-accordion__entry--active .sp-roles-accordion__caret {
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* satir yuksekligine oranli handle boyutu - 07.07.2026 06:23 */

.sp-roles-accordion__hit .roles-list__handle {
  width: 1.5rem;
  height: 1.5rem;
}

.sp-roles-accordion--expanded .roles-list__handle {
  cursor: not-allowed;
  opacity: 0.35;
}

/* ── panel açılma ─────────────────────────────────────────────────────── */

.sp-roles-accordion__panel {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
  padding: 0;
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  animation: sp-roles-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

.sp-roles-accordion__entry .sp-roles-accordion__panel {
  border-radius: 0 0 9px 9px;
}

.sp-roles-accordion__panel.hidden {
  display: none;
}

.sp-roles-accordion__panel.\!hidden {
  display: none !important;
}

@keyframes sp-roles-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.96);
  }

  to   {
    opacity: 1;
    transform: translateY(0)   scaleY(1);
  }
}

/* ── form içi ─────────────────────────────────────────────────────────── */

.sp-roles-accordion__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* scroll kenara yapisik, icerik ic padding ile - 07.07.2026 06:40 */

.sp-roles-accordion__form-body {
  max-height: 22rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.sp-roles-accordion__form-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.125rem;
}

/* ad + renk yan yana */

.sp-roles-accordion__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.sp-roles-accordion__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-roles-accordion__color-row {
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.sp-roles-accordion__swatch {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  transition: background-color 100ms ease;
}

.sp-roles-accordion__color-input {
  flex: 1;
  min-width: 0;
  font-family: monospace !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.03em;
}

/* varsayilan uye rolu — yalnizca ad/renk kilitli, geri kalan her sey ayni kalip - 07.07.2026 05:50 */

.sp-roles-accordion__field-lock-icon {
  display: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  pointer-events: none;
}

.sp-roles-accordion__fields--locked #roleNameInput,
.sp-roles-accordion__fields--locked #roleColorInput {
  padding-right: 2.25rem;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__field-lock-icon {
  display: inline-flex;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__swatch {
  opacity: 0.55;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__preset-dot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* renk önayar noktaları */

.sp-roles-accordion__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.5rem;
}

.sp-roles-accordion__preset-dot {
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.sp-roles-accordion__preset-dot:hover {
  transform: scale(1.15);
}

.sp-roles-accordion__preset-dot.role-color--selected {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
  transform: scale(1.1);
}

/* ── yetkiler ─────────────────────────────────────────────────────────── */

.sp-roles-accordion__perm-section {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-roles-accordion__perm-groups {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-roles-accordion__perm-group {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  padding: 0.75rem 0.875rem 0.875rem;
}

.sp-roles-accordion__perm-group-label {
  margin: 0 0 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.sp-roles-accordion__perm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
}

@media (min-width: 500px) {
  .sp-roles-accordion__perm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* yetki satırı — secili olmayanlarda da border - 07.07.2026 06:40 */

.sp-roles-accordion__perm-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.sp-roles-accordion__perm-row:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.sp-roles-accordion__perm-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 30%, transparent);
  outline-offset: 1px;
}

.role-perm-row.role-perm--checked.sp-roles-accordion__perm-row {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
}

/* checkbox kutusu */

.sp-role-perm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 24%, transparent);
  background: var(--background);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.sp-role-perm-check__icon {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--background);
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.role-perm-row.role-perm--checked .sp-role-perm-check {
  background: var(--foreground);
  border-color: var(--foreground);
}

.role-perm-row.role-perm--checked .sp-role-perm-check__icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.sp-roles-accordion__perm-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--foreground);
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  .sp-roles-accordion__fields {
    grid-template-columns: 1fr;
  }

  .sp-roles-accordion__form-inner {
    padding: 1rem 0.875rem;
  }

  .sp-roles-accordion__item {
    min-height: 3.25rem;
    padding: 0.25rem 0.375rem 0.25rem 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-roles-accordion__panel {
    animation: none;
  }

  .sp-role-perm-check__icon {
    transition: none;
    transform: none !important;
  }

  .sp-roles-accordion__caret {
    transition: transform 0ms;
  }
}

.sp-members-grid-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-members-grid {
  --sp-members-cols: minmax(10.5rem, 1.6fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(9rem, 1.8fr) 2.25rem;
  min-width: 36rem;
}

.sp-members-grid__head,
.sp-members-grid__row {
  display: grid;
  grid-template-columns: var(--sp-members-cols);
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.sp-members-grid__head {
  padding: 0.625rem 0.9375rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-members-grid__head-cell {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-members-grid__body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-members-grid__row {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-members-grid__row:last-child {
  border-bottom: none;
}

.sp-members-grid__row:hover {
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.sp-members-grid__cell {
  min-width: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.sp-members-grid__cell--date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sp-members-grid__cell--empty {
  color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-members-grid__cell--actions {
  display: flex;
  justify-content: flex-end;
}

.sp-members-grid__person {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
}

.sp-members-grid__avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-members-grid__avatar-btn:hover .sp-members-grid__avatar-img {
  opacity: 0.88;
}

.sp-members-grid__avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-members-grid__person-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.sp-members-grid__cell--roles .sp-settings-role-chips {
  margin-top: 0;
}

.sp-members-grid__cell--roles .sp-settings-role-chips--empty:not(:has([data-sp-role-add])) {
  display: none;
}

body.space-settings-modal-open {
  overflow: hidden;
}

.space-settings-modal__panel {
  display: flex;
  flex-direction: column;
  width: 1320px;
  height: 860px;
  max-width: min(1320px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  overflow: hidden;
}

.space-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-settings-modal__header-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  letter-spacing: -0.01em;
}

.space-settings-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.space-settings-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.space-settings-modal__close:hover .space-settings-modal__close-inner {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.space-settings-modal__body {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .space-settings-modal__body {
    grid-template-columns: 1fr;
  }
}

/* sidebar yatay bosluk kaldirildi — nav butonlari kenara tasarak "bleed" gorunumu alir,
   ic hizalama space-block ve nav-item paddingleriyle sağlanir - 06.07.2026 17:45 */

.space-settings-modal__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
  padding: 20px 0;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  overflow-y: auto;
}

.space-settings-modal__space {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-settings-modal__space-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.space-settings-modal__space-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-settings-modal__space-meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.space-settings-modal__space-domain-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  max-width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: #2563eb;
  text-decoration: none;
  transition: color 120ms ease;
}

.space-settings-modal__space-domain-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-settings-modal__space-domain-link i {
  flex-shrink: 0;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.space-settings-modal__space-domain-link:hover {
  color: #1d4ed8;
}

.dark .space-settings-modal__space-domain-link {
  color: #60a5fa;
}

.dark .space-settings-modal__space-domain-link:hover {
  color: #93c5fd;
}

.space-settings-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 6px;
}

.space-settings-modal__nav-group-label {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.space-settings-modal__nav-group--danger .space-settings-modal__nav-group-label {
  color: color-mix(in srgb, #dc2626 70%, var(--foreground));
}

.space-settings-modal__nav-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.space-settings-modal__nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
}

.space-settings-modal__nav-item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

.space-settings-modal__nav-item--active {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
  color: var(--foreground);
}

.space-settings-modal__nav-item--danger {
  color: color-mix(in srgb, #dc2626 82%, var(--foreground));
}

.space-settings-modal__nav-item--danger.space-settings-modal__nav-item--active,
.space-settings-modal__nav-item--danger:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #dc2626;
}

.space-settings-modal__nav-icon {
  font-size: 1rem;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 160ms ease;
}

.space-settings-modal__nav-item--active .space-settings-modal__nav-icon {
  opacity: 1;
}

.space-settings-modal__nav-item--danger .space-settings-modal__nav-icon {
  opacity: 1;
  color: inherit;
}

.space-settings-modal__content-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.space-settings-modal__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 32px 32px;
  transition: opacity 140ms ease;
}

.space-settings-modal__content--pending {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.space-settings-modal__loader,
.space-settings-modal__loader-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-settings-modal__loader {
  min-height: 160px;
  padding: 2rem 0;
}

.space-settings-modal__loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--background) 72%, transparent);
}

.space-settings-modal__loader-bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.space-settings-modal__loader-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--foreground);
  animation: space-settings-loader-indeterminate 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes space-settings-loader-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.6);
  }

  50% {
    transform: translateX(60%) scaleX(1);
  }

  100% {
    transform: translateX(220%) scaleX(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-settings-modal__content {
    transition: none;
  }

  .space-settings-modal__loader-bar-fill {
    animation: none;
    width: 40%;
    transform: none;
  }
}

/* modal icinde panel basligi fragment ile gelir — statik ust baslik yok - 07.07.2026 06:15 */

.space-settings-modal .sp-settings-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.space-settings-modal .sp-settings-panel + .sp-settings-panel {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* alan adi / e-posta arasi cizgi yok - 22.07.2026 01:00 */

.space-settings-modal .sp-settings-panel + .sp-settings-panel--no-divider,
.space-settings-modal .sp-settings__content > .sp-settings-panel + .sp-settings-panel--no-divider {
  border-top: none;
  margin-top: 1.25rem;
  padding-top: 0;
}

.space-settings-modal .sp-settings-panel__head {
  border-bottom: none;
  padding: 0 0 1.375rem;
}

.space-settings-modal .sp-settings-panel__title {
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
}

.space-settings-modal .sp-settings-panel__desc {
  margin-top: 0.375rem;
}

.space-settings-modal .sp-settings-panel__head--row {
  align-items: center;
  gap: 1.25rem;
}

.space-settings-modal .sp-settings-panel__body {
  padding: 0;
}

.space-settings-modal .sp-settings__content > .sp-settings-panel + .sp-settings-panel {
  margin-top: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-settings-modal__error {
  margin: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* ayarlar modali icindeki rol modali ustte kalsin - 24.06.2026 02:50 */

.space-settings-modal #rolesModal {
  z-index: 10080;
}

.space-settings-modal__content-wrap--general-edit .space-settings-modal__content {
  padding-bottom: 5.5rem;
}

/* rol overflow menusu scroll kirpmasini onle - 07.07.2026 03:25 */

.space-settings-modal__content:has(.sp-roles-accordion [data-overflow-open="1"]) {
  overflow: visible;
}

body.account-settings-modal-open {
  overflow: hidden;
}

.account-settings-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1320px;
  height: 860px;
  max-width: min(1320px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  overflow: hidden;
}

.account-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.account-settings-modal__header-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  letter-spacing: -0.01em;
}

.account-settings-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.account-settings-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.account-settings-modal__close:hover .account-settings-modal__close-inner {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.account-settings-modal__body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .account-settings-modal__body {
    grid-template-columns: 1fr;
  }
}

.account-settings-modal__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
  padding: 20px 0;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  overflow-y: auto;
}

.account-settings-modal__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.account-settings-modal__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.account-settings-modal__user-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.account-settings-modal__user-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings-modal__user-meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 6px;
}

.account-settings-modal__nav-group-label {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.account-settings-modal__nav-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-settings-modal__nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
}

.account-settings-modal__nav-item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

.account-settings-modal__nav-item--active {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
  color: var(--foreground);
}

.account-settings-modal__nav-item--danger {
  color: color-mix(in srgb, #dc2626 82%, var(--foreground));
}

.account-settings-modal__nav-item--danger.account-settings-modal__nav-item--active,
.account-settings-modal__nav-item--danger:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #dc2626;
}

.account-settings-modal__nav-icon {
  font-size: 1rem;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 160ms ease;
}

.account-settings-modal__nav-item--active .account-settings-modal__nav-icon {
  opacity: 1;
}

.account-settings-modal__nav-item--danger .account-settings-modal__nav-icon {
  opacity: 1;
  color: inherit;
}

.account-settings-modal__content-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.account-settings-modal__extras {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.account-settings-modal__extras > * {
  pointer-events: auto;
}

/* modal-scoped unsaved bar — content-wrap icinde - 07.08.2026 09:40 */

.account-settings-modal__extras .account-changes-bar,
.account-settings-modal__extras [data-account-changes-bar],
.account-settings-modal__extras #actionBar,
.account-settings-modal__extras #notifChangesBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 5;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 760px) {
  .account-settings-modal__extras #actionBar,
    .account-settings-modal__extras #notifChangesBar {
    left: 0;
  }
}

.account-settings-modal__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 32px 32px;
  transition: opacity 140ms ease;
}

.account-settings-modal__content--pending {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.account-settings-modal__content-wrap--dirty .account-settings-modal__content {
  padding-bottom: 6.5rem;
}

.account-settings-modal__loader,
.account-settings-modal__loader-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-settings-modal__loader {
  min-height: 160px;
  padding: 2rem 0;
}

.account-settings-modal__loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--background) 72%, transparent);
}

.account-settings-modal__loader-bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.account-settings-modal__loader-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--foreground);
  animation: account-settings-loader-indeterminate 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes account-settings-loader-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.6);
  }

  50% {
    transform: translateX(60%) scaleX(1);
  }

  100% {
    transform: translateX(220%) scaleX(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-settings-modal__content {
    transition: none;
  }

  .account-settings-modal__loader-bar-fill {
    animation: none;
    width: 40%;
    transform: none;
  }
}

.account-settings-modal__error {
  margin: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* nested confirm / section modals above account settings - 16.08.2026 21:30 */

.account-settings-modal [id*="Modal"].cengel-modal,
.account-settings-modal .cengel-modal {
  z-index: 10080;
}

.account-settings-modal > #avatarModal,
.account-settings-modal > #coverModal {
  z-index: 2;
}

.account-settings-modal__mobile-back,
.space-settings-modal__mobile-back {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  margin: 0 0 0 -0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
}

.account-settings-modal__mobile-back:hover,
.space-settings-modal__mobile-back:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.account-settings-modal__header-row,
.space-settings-modal__header-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

@media (max-width: 760px) {
  .account-settings-modal__panel,
    .space-settings-modal__panel {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
  }

  .account-settings-modal__body,
    .space-settings-modal__body {
    grid-template-columns: 1fr;
  }

  .account-settings-modal__mobile-back,
    .space-settings-modal__mobile-back {
    display: inline-flex;
  }

  .account-settings-modal[data-mobile-view="index"] .account-settings-modal__content-wrap,
    .space-settings-modal[data-mobile-view="index"] .space-settings-modal__content-wrap {
    display: none;
  }

  .account-settings-modal[data-mobile-view="index"] .account-settings-modal__sidebar,
    .space-settings-modal[data-mobile-view="index"] .space-settings-modal__sidebar {
    display: flex;
    width: 100%;
    border-right: none;
  }

  .account-settings-modal[data-mobile-view="detail"] .account-settings-modal__sidebar,
    .space-settings-modal[data-mobile-view="detail"] .space-settings-modal__sidebar {
    display: none;
  }

  .account-settings-modal[data-mobile-view="detail"] .account-settings-modal__content-wrap,
    .space-settings-modal[data-mobile-view="detail"] .space-settings-modal__content-wrap {
    display: flex;
  }

  .account-settings-modal[data-mobile-view="index"] .account-settings-modal__mobile-back,
    .space-settings-modal[data-mobile-view="index"] .space-settings-modal__mobile-back {
    display: none;
  }

  .account-settings-modal__content,
    .space-settings-modal__content {
    padding: 1.25rem 1rem 2rem;
  }
}

.cengel-modal {
  position: fixed;
  inset: 0;
  isolation: isolate;
}

.cengel-modal.hidden {
  display: none;
}

.cengel-modal.\!hidden {
  display: none !important;
}

.cengel-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cengel-modal__stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.cengel-modal__panel {
  position: relative;
  pointer-events: auto;
  transform-origin: center center;
}

.cengel-modal:not(.hidden) .cengel-modal__backdrop {
  animation: cengel-modal-backdrop-in 160ms ease-out both;
}

.cengel-modal:not(.hidden) .cengel-modal__panel {
  /* both kalirsa transform containing block olur, fixed menuler kayar - 29.08.2026 07:00 */
  animation: cengel-modal-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cengel-modal.cengel-modal--closing .cengel-modal__backdrop {
  animation: cengel-modal-backdrop-out 140ms ease-in both;
}

.cengel-modal.cengel-modal--closing .cengel-modal__panel {
  animation: cengel-modal-panel-out 160ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes cengel-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cengel-modal-panel-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cengel-modal-backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes cengel-modal-panel-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cengel-modal:not(.hidden) .cengel-modal__backdrop,
  .cengel-modal:not(.hidden) .cengel-modal__panel,
  .cengel-modal.cengel-modal--closing .cengel-modal__backdrop,
  .cengel-modal.cengel-modal--closing .cengel-modal__panel {
    animation: none;
  }
}

/* ortali onay / bilgi karti - 16.07.2026 06:05 */

.cengel-modal__panel--card {
  width: 100%;
  max-width: 28rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--surface-raised);
  padding: 2rem;
  text-align: center;
}

.cengel-modal__panel--card-lg {
  max-width: 32rem;
}

.cengel-modal__panel--card-xl {
  max-width: 36rem;
}

.cengel-modal__panel--card .ann-link-preview {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
}

.cengel-modal__panel--card .ann-link-preview__title {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

/* form karti — onay kartinin ortali padding'ini geri al - 26.08.2026 15:35 */

.cengel-modal__panel--form {
  max-width: 34rem;
  padding: 1.25rem;
  text-align: initial;
}

.cengel-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cengel-modal__title {
  margin: 0;
  color: var(--foreground);
  font-size: 1.125rem;
  font-weight: 700;
}

.cengel-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}

.cengel-modal__close:hover {
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 6%, transparent));
}

.cengel-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.report-modal__panel.cengel-modal__panel--card {
  padding: 0;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.report-modal__header {
  padding: 14px 16px;
}

.report-modal__body {
  padding: 1.125rem 1.5rem 1.5rem;
}

.report-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-family: Arial, sans-serif;
}

.report-modal__target {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  min-width: 0;
}

.report-modal__target[hidden],
.report-modal__target.hidden {
  display: none;
}


.report-modal__target.\!hidden {
  display: none !important;
}

.report-modal__target-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background);
}

.report-modal__target-avatar--rounded {
  border-radius: 0.75rem;
}

.report-modal__target-avatar[hidden] {
  display: none;
}

.report-modal__target-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1.125rem;
  line-height: 1;
}

.report-modal__target-icon[hidden] {
  display: none;
}

.report-modal__target-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.report-modal__target-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-modal__target-meta {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-modal__target-meta:empty {
  display: none;
}

.report-modal__reason-label {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.report-modal__reason {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  resize: vertical;
}

.report-modal__reason::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.report-modal__reason::placeholder {
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.report-modal__reason:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.report-modal__error {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: #dc2626;
  font-family: Arial, sans-serif;
}

.dark .report-modal__error {
  color: #f87171;
}

.report-modal__error.hidden {
  display: none;
}

.report-modal__error.\!hidden {
  display: none !important;
}

.report-modal__actions {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.my-report-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background-color 120ms ease;
}

.my-report-row:hover {
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.my-report-row__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.my-report-row__media {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-size: 1.125rem;
  line-height: 1;
}

.my-report-row__media--rounded {
  border-radius: 0.75rem;
}

.my-report-row__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.my-report-row__main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.my-report-row__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.my-report-row__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.my-report-row__meta {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-report-row__date {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-family: Arial, sans-serif;
  flex-shrink: 0;
  white-space: nowrap;
  padding-top: 0.125rem;
}

.my-report-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  font-family: Arial, sans-serif;
  letter-spacing: 0.01em;
}

.my-report-status--pending {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}

.my-report-status--in_review {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

.my-report-status--resolved {
  color: #14532d;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.dark .my-report-status--pending {
  color: #fde68a;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

.dark .my-report-status--in_review {
  color: #bfdbfe;
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  border-color: color-mix(in srgb, #3b82f6 35%, transparent);
}

.dark .my-report-status--resolved {
  color: #bbf7d0;
  background: color-mix(in srgb, #22c55e 16%, transparent);
  border-color: color-mix(in srgb, #22c55e 32%, transparent);
}

.my-report-row__reason {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.my-report-row__outcome {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.my-report-row__reply {
  border-radius: 0.75rem;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  padding: 0.75rem 0.875rem;
}

.my-report-row__reply-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.my-report-row__reply-body {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.my-reports-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
  border-radius: var(--radius-card, 1rem);
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background);
}

.my-reports-empty[hidden],
.my-reports-card[hidden],
.my-reports-pager[hidden] {
  display: none;
}

.my-reports-empty__icon {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.my-reports-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.my-reports-empty__desc {
  margin: 0.25rem 0 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.my-reports-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sp-settings-storage-summary {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.sp-settings-storage-summary__value {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-settings-storage-summary__quota {
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-storage-summary__meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-storage-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-settings-storage-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
  transition: width 200ms ease;
}

.sp-settings-storage-bar__fill--warn {
  background: #dc2626;
}

.sp-settings-plan-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-settings-plan-card__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-plan-card__name {
  margin: 0.375rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-settings-plan-card__meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-plan-limits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}

.sp-settings-plan-limits__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-plan-limits__row:last-child {
  border-bottom: none;
}

.sp-settings-plan-limits__row strong {
  font-weight: 700;
  color: var(--foreground);
}

.board-viewport {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  background-color: var(--surface-subtle, #f5f5f5);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.board-viewport.board-is-dragging {
  cursor: grabbing;
}

.dark .board-viewport {
  background-color: var(--background, #0f0f13);
}

.board-canvas {
  position: absolute;
  width: 4500px;
  height: 4500px;
  transform-origin: 0 0;
  will-change: transform;
}

.board-toolbar {
  position: fixed;
  top: calc(var(--board-vp-top, 64px) + 1rem);
  right: 1rem;
  z-index: var(--z-board-ui, 200);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: var(--background);
  border: 1px solid var(--border);
}

.board-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: background 120ms ease, color 120ms ease;
}

.board-toolbar__btn:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.board-toolbar__btn:active {
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.board-toolbar__sep {
  height: 1px;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  margin: 2px 4px;
}

.board-box {
  --board-box-pad-x: 14px;
  --board-box-pad-y: 14px;
  --board-box-gap: 8px;
  --board-box-ctrl: 26px;
  position: absolute;
  z-index: 2;
  min-width: 200px;
  max-width: 600px;
  border-radius: 16px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
  display: flex;
  flex-direction: column;
  overflow: visible;
  will-change: transform;
  transition: border-color 140ms ease, background 140ms ease;
}

.dark .board-box {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.board-box:hover {
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.board-box--active {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  z-index: 5;
}

.board-box--remote-editing {
  border-color: var(--editor-role-color, #6b7280);
  z-index: 7;
}

.board-box--remote-editing:hover {
  border-color: var(--editor-role-color, #6b7280);
}

.board-box--updated {
  z-index: 6;
}

.board-box__updated-mark {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--foreground);
  pointer-events: none;
  z-index: 3;
}

.dark .board-box__updated-mark {
  background: #e4e4e7;
}

.board-box__editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--board-box-pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--editor-role-color, #6b7280) 28%, transparent);
  background: color-mix(in srgb, var(--editor-role-color, #6b7280) 12%, transparent);
  flex-shrink: 0;
  min-height: 28px;
  box-sizing: border-box;
  border-radius: 16px 16px 0 0;
}

.board-box__editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.board-box__editor-avatar {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.board-box__editor-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--member-role-color, var(--editor-role-color, #6b7280));
}

.board-box--dragging {
  opacity: 0.96;
  z-index: 6;
}

.board-box__body {
  padding: var(--board-box-pad-y) var(--board-box-pad-x);
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 16px;
}

.board-box:has(> .board-box__editor-bar) .board-box__body {
  border-radius: 0 0 16px 16px;
}

.board-box__body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.board-box--image .board-box__body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.board-box--table {
  min-width: 340px;
  max-width: 720px;
}

.board-box__resize-handle {
  position: absolute;
  z-index: 2;
}

.board-box__resize-handle--right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
}

.board-box__resize-handle--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: row-resize;
}

.board-box__resize-handle--right::after,
.board-box__resize-handle--bottom::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: transparent;
  transition: background 140ms ease;
}

.board-box__resize-handle--right::after {
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
}

.board-box__resize-handle--bottom::after {
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 18px;
}

.board-box:hover .board-box__resize-handle::after,
.board-box--active .board-box__resize-handle::after {
  background: color-mix(in srgb, var(--foreground) 20%, transparent);
}

.board-box__resize-handle:hover::after,
.board-box__resize-handle:active::after {
  background: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.board-guide {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  background: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.board-guide--v {
  width: 1px;
}

.board-guide--h {
  height: 1px;
}

.board-box__header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  top: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 6px;
  min-height: 0;
  background: transparent;
  border: none;
  pointer-events: none;
  box-sizing: border-box;
  font-size: var(--text-3xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.board-box__drag,
.board-box__title-wrap,
.board-box__header-actions {
  pointer-events: none;
}

.board-box:hover .board-box__drag,
.board-box--active .board-box__drag,
.board-box--dragging .board-box__drag,
.board-box:focus-within .board-box__drag,
.board-box:hover .board-box__title-wrap,
.board-box--active .board-box__title-wrap,
.board-box:focus-within .board-box__title-wrap,
.board-box:hover .board-box__header-actions,
.board-box--active .board-box__header-actions,
.board-box--dragging .board-box__header-actions,
.board-box:focus-within .board-box__header-actions {
  pointer-events: auto;
}

.board-box__drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--board-box-ctrl);
  height: var(--board-box-ctrl);
  border: none;
  border-radius: 8px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  color: var(--ink-muted);
  cursor: grab;
  opacity: 0;
  flex-shrink: 0;
  font-size: 0.9375rem;
  transition: opacity 140ms ease, background 120ms ease, color 120ms ease;
}

.dark .board-box__drag {
  background: var(--surface-subtle);
}

.board-box:hover .board-box__drag,
.board-box--active .board-box__drag,
.board-box--dragging .board-box__drag,
.board-box:focus-within .board-box__drag {
  opacity: 1;
}

.board-box__drag:hover {
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  color: var(--foreground);
}

.board-box__drag:active,
.board-box--dragging .board-box__drag {
  cursor: grabbing;
}

.board-box__title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 55%;
  flex: 0 1 auto;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.dark .board-box__title-wrap {
  background: var(--surface-subtle);
}

.board-box__title-wrap[hidden] {
  display: none !important;
}

.board-box__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.board-box__title-input {
  width: 100%;
  min-width: 72px;
  max-width: 160px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  line-height: 1.3;
}

.board-box__header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 10px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  opacity: 0;
  transition: opacity 140ms ease;
}

.dark .board-box__header-actions {
  background: var(--surface-subtle);
}

.board-box:hover .board-box__header-actions,
.board-box--active .board-box__header-actions,
.board-box--dragging .board-box__header-actions,
.board-box:focus-within .board-box__header-actions {
  opacity: 1;
}

.board-box__header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--board-box-ctrl);
  height: var(--board-box-ctrl);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  transition: background 120ms ease, color 120ms ease;
}

.board-box__header-action:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
}

.board-connections-layer {
  position: absolute;
  inset: 0;
  width: 4500px;
  height: 4500px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.board-connection-group {
  pointer-events: auto;
}

.board-connection__hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

.board-connection {
  fill: none;
  stroke: color-mix(in srgb, var(--foreground) 48%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  /* stroke transition color-mix+hex'te light temada takiliyor - 20.07.2026 03:56 */
  transition: stroke-width 140ms ease, opacity 140ms ease;
}

.board-connection-group:hover .board-connection {
  stroke-width: 2.75;
}

.board-connection-group:hover .board-connection:not([class*="--color-"]) {
  stroke: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.board-connection__cap {
  r: 2.75;
  fill: color-mix(in srgb, var(--foreground) 52%, transparent);
  pointer-events: none;
  transition: r 140ms ease;
}

.board-connection-group:hover .board-connection__cap:not([class*="--color-"]) {
  r: 3.25;
  fill: color-mix(in srgb, var(--foreground) 74%, transparent);
}

.board-connection-group:hover .board-connection__cap[class*="--color-"] {
  r: 3.25;
}

/* gergin: kesikli degil — hafif soluk (kopuk gibi gozukmesin) - 20.07.2026 03:55 */

.board-connection--tense {
  opacity: 0.72;
  stroke-width: 1.75;
}

.board-connection--preview {
  fill: none;
  stroke: color-mix(in srgb, var(--foreground) 34%, transparent);
  stroke-width: 1.75;
  stroke-dasharray: 5 4;
  opacity: 0.9;
  pointer-events: none;
}

/* light: daha koyu tonlar — soft pastel grid uzerinde kaybolmasin - 20.07.2026 03:45 */

.board-connection--color-muted {
  stroke: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.board-connection--color-blue {
  stroke: #3d7a96;
}

.board-connection--color-teal {
  stroke: #2f8f7e;
}

.board-connection--color-green {
  stroke: #4f8a4f;
}

.board-connection--color-yellow {
  stroke: #9a7f2e;
}

.board-connection--color-warm {
  stroke: #8a6540;
}

.board-connection--color-rose {
  stroke: #9a5560;
}

.board-connection--color-violet {
  stroke: #6f5688;
}

.board-connection__cap.board-connection--color-muted {
  fill: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.board-connection__cap.board-connection--color-blue {
  fill: #3d7a96;
}

.board-connection__cap.board-connection--color-teal {
  fill: #2f8f7e;
}

.board-connection__cap.board-connection--color-green {
  fill: #4f8a4f;
}

.board-connection__cap.board-connection--color-yellow {
  fill: #9a7f2e;
}

.board-connection__cap.board-connection--color-warm {
  fill: #8a6540;
}

.board-connection__cap.board-connection--color-rose {
  fill: #9a5560;
}

.board-connection__cap.board-connection--color-violet {
  fill: #6f5688;
}

.dark .board-connection--color-muted {
  stroke: color-mix(in srgb, var(--foreground) 34%, transparent);
}

.dark .board-connection--color-blue {
  stroke: #8fc0d4;
}

.dark .board-connection--color-teal {
  stroke: #7dcebe;
}

.dark .board-connection--color-green {
  stroke: #9dca9d;
}

.dark .board-connection--color-yellow {
  stroke: #d4c07a;
}

.dark .board-connection--color-warm {
  stroke: #c4a484;
}

.dark .board-connection--color-rose {
  stroke: #d4a0a8;
}

.dark .board-connection--color-violet {
  stroke: #b8a0c8;
}

.dark .board-connection__cap.board-connection--color-muted {
  fill: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.dark .board-connection__cap.board-connection--color-blue {
  fill: #8fc0d4;
}

.dark .board-connection__cap.board-connection--color-teal {
  fill: #7dcebe;
}

.dark .board-connection__cap.board-connection--color-green {
  fill: #9dca9d;
}

.dark .board-connection__cap.board-connection--color-yellow {
  fill: #d4c07a;
}

.dark .board-connection__cap.board-connection--color-warm {
  fill: #c4a484;
}

.dark .board-connection__cap.board-connection--color-rose {
  fill: #d4a0a8;
}

.dark .board-connection__cap.board-connection--color-violet {
  fill: #b8a0c8;
}

.board-box--connect-source {
  border-color: color-mix(in srgb, var(--foreground) 42%, transparent);
  z-index: 8;
}

body.board-connect-mode .board-viewport {
  cursor: crosshair;
}

body.board-connect-mode .board-box {
  cursor: crosshair;
}

body.board-connect-mode .board-box--connect-source {
  cursor: default;
}

.board-pointer-mark {
  --mark-role-color: #6b7280;
  position: absolute;
  z-index: 50;
  width: 0;
  height: 0;
  pointer-events: none;
}

.board-pointer-mark__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 999px;
  border: 2px solid var(--mark-role-color);
  background: color-mix(in srgb, var(--mark-role-color) 14%, transparent);
  animation: board-pointer-mark-pulse 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}

.board-pointer-mark__chip {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  padding: 0;
  border: 2px solid var(--mark-role-color);
  border-radius: 10px;
  background: var(--background, #fff);
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  color: inherit;
  overflow: hidden;
  box-sizing: border-box;
}

.dark .board-pointer-mark__chip {
  background: var(--surface-subtle, #18181b);
}

.board-pointer-mark__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.board-pointer-mark--leaving {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.board-pointer-mark--leaving .board-pointer-mark__ring {
  animation: none;
}

@keyframes board-pointer-mark-pulse {
  0% {
    transform: scale(0.72);
    opacity: 0.85;
  }

  70% {
    transform: scale(1.35);
    opacity: 0.2;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-pointer-mark__ring {
    animation: none;
    opacity: 0.55;
    transform: scale(1);
  }

  .board-pointer-mark--leaving {
    transition: none;
  }
}

.board-box--color-muted {
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 11%, transparent);
}

.board-box--color-blue {
  background: color-mix(in srgb, #7eb0c8 11%, var(--background));
  border-color: color-mix(in srgb, #7eb0c8 24%, transparent);
}

.board-box--color-teal {
  background: color-mix(in srgb, #6fbfb0 11%, var(--background));
  border-color: color-mix(in srgb, #6fbfb0 24%, transparent);
}

.board-box--color-green {
  background: color-mix(in srgb, #8fbc8f 11%, var(--background));
  border-color: color-mix(in srgb, #8fbc8f 24%, transparent);
}

.board-box--color-yellow {
  background: color-mix(in srgb, #d4c07a 12%, var(--background));
  border-color: color-mix(in srgb, #d4c07a 26%, transparent);
}

.board-box--color-warm {
  background: color-mix(in srgb, #c4a484 10%, var(--background));
  border-color: color-mix(in srgb, #c4a484 22%, transparent);
}

.board-box--color-rose {
  background: color-mix(in srgb, #d4a0a8 11%, var(--background));
  border-color: color-mix(in srgb, #d4a0a8 24%, transparent);
}

.board-box--color-violet {
  background: color-mix(in srgb, #b8a0c8 11%, var(--background));
  border-color: color-mix(in srgb, #b8a0c8 24%, transparent);
}

.dark .board-box--color-muted {
  background: color-mix(in srgb, var(--foreground) 4.5%, var(--surface-subtle));
}

.dark .board-box--color-blue {
  background: color-mix(in srgb, #7eb0c8 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, #7eb0c8 20%, transparent);
}

.dark .board-box--color-teal {
  background: color-mix(in srgb, #6fbfb0 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, #6fbfb0 20%, transparent);
}

.dark .board-box--color-green {
  background: color-mix(in srgb, #8fbc8f 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, #8fbc8f 20%, transparent);
}

.dark .board-box--color-yellow {
  background: color-mix(in srgb, #d4c07a 9%, var(--surface-subtle));
  border-color: color-mix(in srgb, #d4c07a 22%, transparent);
}

.dark .board-box--color-warm {
  background: color-mix(in srgb, #c4a484 7.5%, var(--surface-subtle));
  border-color: color-mix(in srgb, #c4a484 18%, transparent);
}

.dark .board-box--color-rose {
  background: color-mix(in srgb, #d4a0a8 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, #d4a0a8 20%, transparent);
}

.dark .board-box--color-violet {
  background: color-mix(in srgb, #b8a0c8 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, #b8a0c8 20%, transparent);
}

.board-box__md-editor {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 72px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.6;
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0;
  box-sizing: border-box;
}

.board-box--md:focus-within {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
}

.board-box__md-preview {
  min-height: 48px;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.6;
  color: var(--foreground);
  word-break: break-word;
  font-family: Inter, Arial, sans-serif;
  cursor: text;
}

.board-box__md-placeholder {
  opacity: 0.36;
  font-style: italic;
  line-height: 1.6;
}

.board-box__md-preview .md-br {
  display: block;
  height: 0.45em;
}

.board-box__md-preview p {
  margin: 0 0 0.45em;
}

.board-box__md-preview p:last-child {
  margin-bottom: 0;
}

.board-box__md-preview h1 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.4em 0 0.28em;
  line-height: 1.25;
}

.board-box__md-preview h1:first-child,
.board-box__md-preview h2:first-child,
.board-box__md-preview h3:first-child {
  margin-top: 0;
}

.board-box__md-preview h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.4em 0 0.22em;
  line-height: 1.3;
}

.board-box__md-preview h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.35em 0 0.18em;
}

.board-box__md-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: var(--text-xs, 0.875rem);
}

.board-box__md-preview pre {
  margin: 0.45em 0;
  border-radius: 10px;
  overflow: auto;
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

.board-box__md-preview pre code {
  background: none;
  padding: 10px 12px;
  display: block;
}

.board-box__md-preview strong {
  font-weight: 700;
}

.board-box__md-preview em {
  font-style: italic;
}

.board-box__md-preview a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.board-box__md-preview ul,
.board-box__md-preview ol {
  margin: 0.3em 0 0.4em;
  padding-left: 1.35em;
}

.board-box__md-preview li {
  margin: 0.2em 0;
}

.board-box__md-preview hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.55em 0;
}

.board-todo-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}

.board-todo-progress__track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  overflow: hidden;
}

.board-todo-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--foreground);
  transition: width 180ms ease;
}

.board-todo-progress--complete .board-todo-progress__label {
  color: var(--foreground);
}

.board-todo-progress__label {
  flex-shrink: 0;
  font-size: var(--text-3xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

.board-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.board-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 32px;
  padding: 6px 6px;
  border-radius: 10px;
  margin: 0 -6px;
  transition: background 120ms ease;
}

.board-todo-item:hover,
.board-todo-item:focus-within {
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

.board-todo-item--done {
  opacity: 0.72;
}

.board-todo-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 26%, transparent);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--background);
  font-size: 0.7rem;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.board-todo-check:hover {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.board-todo-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.board-todo-check--done {
  background: var(--foreground);
  border-color: transparent;
  animation: board-todo-check-pop 160ms ease;
}

.board-todo-check--done:hover {
  background: color-mix(in srgb, var(--foreground) 82%, transparent);
}

.board-todo-check i {
  display: block;
  line-height: 1;
}

@keyframes board-todo-check-pop {
  0% {
    transform: scale(0.86);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-todo-check--done {
    animation: none;
  }

  .board-todo-progress__fill {
    transition: none;
  }
}

.board-todo-label {
  font-size: var(--text-sm, 0.9375rem);
  flex: 1;
  outline: none;
  min-width: 0;
  color: var(--foreground);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.45;
  padding: 1px 0;
  word-break: break-word;
}

.board-todo-label:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-muted);
  opacity: 0.7;
  pointer-events: none;
}

.board-todo-label--done {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.board-todo-label:focus {
  color: var(--foreground);
}

.board-todo-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-muted);
  width: 24px;
  height: 24px;
  margin-top: 0;
  border-radius: 7px;
  padding: 0;
  font-size: 0.875rem;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.board-todo-item:hover .board-todo-delete,
.board-todo-item:focus-within .board-todo-delete {
  opacity: 1;
}

.board-todo-delete:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
}

.board-todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  color: var(--ink-muted);
  text-align: center;
}

.board-todo-empty > i {
  font-size: 1.35rem;
  opacity: 0.55;
  margin-bottom: 4px;
}

.board-todo-empty__title {
  font-size: var(--text-xs, 0.875rem);
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.board-todo-empty__hint {
  font-size: var(--text-3xs, 0.75rem);
  line-height: 1.35;
  opacity: 0.85;
}

.board-todo-empty[hidden],
.board-todo-progress[hidden] {
  display: none !important;
}

.board-todo-add {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 6px;
  margin: 6px -6px 0;
  border-radius: 10px;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 500;
  color: var(--ink-muted);
  width: calc(100% + 12px);
  transition: background 120ms ease, color 120ms ease;
}

.board-todo-add > i {
  font-size: 0.9375rem;
}

.board-todo-add:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

.board-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  flex: 1;
  width: 100%;
}

.board-image-wrap img {
  max-width: 100%;
  max-height: 360px;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.board-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  margin: 12px;
  padding: 20px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  color: var(--ink-muted);
  text-align: center;
  box-sizing: border-box;
}

.board-image-empty > i {
  font-size: 1.625rem;
  opacity: 0.65;
}

.board-image-empty > span {
  font-size: var(--text-xs, 0.875rem);
  line-height: 1.35;
}

.board-image-empty--error {
  border-style: solid;
  border-color: color-mix(in srgb, #e54d2e 28%, transparent);
  color: color-mix(in srgb, #e54d2e 85%, var(--foreground));
}

.board-image-empty .board-image-url-form {
  width: 100%;
  margin-top: 4px;
}

/* cta chrome: cengel-btn; layout only - 02.08.2026 00:05 */

.board-image-empty .board-image-apply-btn {
  align-self: center;
  margin-top: 2px;
}

.board-image-url-form {
  display: flex;
  flex-direction: column;
  gap: var(--board-box-gap, 8px);
  padding: 14px;
}

.board-image-url-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: var(--text-xs, 0.875rem);
  line-height: 1.35;
  background: var(--background);
  color: var(--foreground);
  outline: none;
  font-family: Inter, Arial, sans-serif;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}

.dark .board-image-url-input {
  background: var(--background);
}

.board-image-url-input:focus {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.board-image-apply-btn {
  align-self: flex-end;
}

.board-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.board-table-header,
.board-table-row {
  display: grid;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  position: relative;
}

.board-table-header {
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  border-radius: 10px 10px 0 0;
  padding-right: 28px;
}

.board-table-row {
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
  padding-right: 28px;
  transition: background 120ms ease;
}

.board-table-row:last-child {
  border-bottom: none;
}

.board-table-row:hover,
.board-table-row:focus-within {
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}

.board-table-header__cell {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  position: relative;
}

.board-table-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 7px;
  font: inherit;
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}

.board-table-sort:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

.board-table-sort__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-table-sort__icon {
  flex-shrink: 0;
  display: flex;
  opacity: 0.45;
  font-size: 0.75rem;
  line-height: 1;
}

.board-table-sort--asc .board-table-sort__icon,
.board-table-sort--desc .board-table-sort__icon {
  opacity: 1;
  color: var(--foreground);
}

.board-table-col-rename,
.board-table-col-delete,
.board-table-row-delete,
.board-table-add-col {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-muted);
  width: 22px;
  height: 22px;
  border-radius: 7px;
  padding: 0;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.board-table-header__cell:hover .board-table-col-rename,
.board-table-header__cell:hover .board-table-col-delete,
.board-table-header__cell:focus-within .board-table-col-rename,
.board-table-header__cell:focus-within .board-table-col-delete,
.board-table-row:hover .board-table-row-delete,
.board-table-row:focus-within .board-table-row-delete {
  opacity: 1;
}

.board-table-col-rename:hover,
.board-table-col-delete:hover,
.board-table-row-delete:hover,
.board-table-add-col:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
}

.board-table-row-delete {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.board-table-add-col {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
}

.board-table-header:hover .board-table-add-col {
  opacity: 1;
}

.board-table-col-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  color: var(--foreground);
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  padding: 0 0 1px;
}

.board-table-cell {
  min-width: 0;
  padding: 6px 8px;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.45;
  color: var(--foreground);
  font-family: Inter, Arial, sans-serif;
  word-break: break-word;
}

.board-table-cell__view {
  min-height: 1.45em;
  cursor: text;
}

.board-table-cell__placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
  font-style: italic;
}

.board-table-cell__editor {
  display: block;
  width: 100%;
  min-height: 1.45em;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--foreground);
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, Arial, sans-serif;
}

.board-table-cell--editing {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-radius: 6px;
}

.board-table-cell__view .cengel-mention {
  vertical-align: baseline;
}

.board-table-cell__view strong {
  font-weight: 700;
}

.board-table-cell__view em {
  font-style: italic;
}

.board-table-cell__view del {
  text-decoration: line-through;
}

.board-table-cell__view code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: var(--text-xs, 0.875rem);
}

.board-table-cell__view a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.board-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  color: var(--ink-muted);
  text-align: center;
}

.board-table-empty > i {
  font-size: 1.35rem;
  opacity: 0.55;
  margin-bottom: 4px;
}

.board-table-empty__title {
  font-size: var(--text-xs, 0.875rem);
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.board-table-empty__hint {
  font-size: var(--text-3xs, 0.75rem);
  line-height: 1.35;
  opacity: 0.85;
}

.board-table-add-row {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 6px;
  margin: 8px -6px 0;
  border-radius: 10px;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 500;
  color: var(--ink-muted);
  width: calc(100% + 12px);
  transition: background 120ms ease, color 120ms ease;
}

.board-table-add-row > i {
  font-size: 0.9375rem;
}

.board-table-add-row:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 4.5%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .board-table-row,
    .board-table-sort,
    .board-table-add-row {
    transition: none;
  }
}

.board-activity-panel {
  position: fixed;
  top: calc(var(--board-vp-top, 64px) + 1rem);
  left: calc(var(--board-vp-left, 64px) + 1rem);
  z-index: var(--z-board-ui, 200);
  width: 280px;
  border-radius: 14px;
  background: var(--background);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transform-origin: top left;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.board-activity-panel--open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.board-activity-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  flex-shrink: 0;
}

.board-activity-panel__title {
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
}

.board-activity-panel__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}

.board-activity-panel__close:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.board-activity-panel__list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board-activity-item {
  font-size: var(--text-xs, 0.875rem);
  padding: 7px 8px;
  border-radius: 9px;
  background: transparent;
  transition: background 120ms ease;
}

.board-activity-item:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.board-activity-item__action {
  font-weight: 600;
  text-transform: capitalize;
}

.board-activity-item__time {
  color: var(--ink-muted);
  margin-left: 4px;
}

.board-activity-status {
  font-size: var(--text-xs, 0.875rem);
  color: var(--ink-muted);
  padding: 6px 8px;
}

.board-activity-status--error {
  color: #e54d2e;
}

@media (prefers-reduced-motion: reduce) {
  .board-activity-panel {
    transition: none;
    transform: none;
  }
}

/* sag tik context menu — board + pass global - 16.07.2026 06:57 */

:is(.board-context-menu, .cengel-context-menu, .cengel-menu) {
  z-index: var(--z-cengel-context, 10080);
  min-width: 220px;
  border-radius: 12px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
  transition:
        opacity 180ms ease-out,
        transform 180ms ease-out,
        visibility 0s linear 180ms;
}

:is(.board-context-menu, .cengel-context-menu):not(.cengel-menu--anchored),
.cengel-menu.cengel-menu--fixed {
  position: fixed;
}

.cengel-menu.cengel-menu--anchored {
  /* js placeAnchored body portal + fixed; fallback absolute - 29.08.2026 07:00 */
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 200;
  transform-origin: top right;
}

.cengel-menu.cengel-menu--anchored.cengel-menu--fixed {
  right: auto;
  top: auto;
  z-index: var(--z-cengel-context, 10080);
}

/* acilis yonu — data-placement konumlayicidan - 16.07.2026 06:57 */

:is(.board-context-menu, .cengel-context-menu, .cengel-menu)[data-placement="below"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
}

:is(.board-context-menu, .cengel-context-menu, .cengel-menu)[data-placement="below-end"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top right;
}

:is(.board-context-menu, .cengel-context-menu, .cengel-menu)[data-placement="above"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom left;
}

:is(.board-context-menu, .cengel-context-menu, .cengel-menu)[data-placement="above-end"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom right;
}

.cengel-menu--measuring,
.cengel-menu--closing {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

:is(
    .board-context-menu.cengel-menu--open,
    .board-context-menu.board-context-menu--open,
    .cengel-context-menu.cengel-menu--open,
    .cengel-context-menu.board-context-menu--open,
    .cengel-menu.cengel-menu--open
),
:is(
    .board-context-menu.cengel-menu--open,
    .board-context-menu.board-context-menu--open,
    .cengel-context-menu.cengel-menu--open,
    .cengel-context-menu.board-context-menu--open,
    .cengel-menu.cengel-menu--open
)[data-placement] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translate(0, 0);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  :is(.board-context-menu, .cengel-context-menu, .cengel-menu),
    :is(
        .board-context-menu.cengel-menu--open,
        .board-context-menu.board-context-menu--open,
        .cengel-context-menu.cengel-menu--open,
        .cengel-context-menu.board-context-menu--open,
        .cengel-menu.cengel-menu--open
    ) {
    transition: none;
    transform: none;
  }
}

.board-context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
  width: 100%;
  transition: background 100ms ease;
}

.board-context-menu__item > i {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
}

.board-context-menu__item > i[data-vis-check] {
  margin-left: auto;
  color: var(--foreground, #000);
}

.board-context-menu__item > i[data-vis-check][hidden] {
  display: none;
}

.board-context-menu__item:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

/* display:flex [hidden] ustune yazar — gizli menu ogeleri - 16.07.2026 07:03 */

.board-context-menu__item[hidden],
.board-context-menu__divider[hidden] {
  display: none !important;
}

.board-context-menu__item--danger {
  color: #e54d2e;
}

.board-context-menu__item--danger > i {
  color: color-mix(in srgb, #e54d2e 70%, transparent);
}

.board-context-menu__item--danger:hover {
  background: rgba(229,77,46,0.08);
}

.board-context-menu__divider {
  height: 1px;
  margin: 4px -6px;
  flex-shrink: 0;
  align-self: stretch;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
}

.board-context-menu__section {
  margin: 2px 10px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  font-family: Arial, sans-serif;
}

.board-context-menu__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 8px;
  max-width: 168px;
}

.board-context-menu__color {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 100ms ease, transform 100ms ease;
}

.board-context-menu__color--active {
  border-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  transform: scale(1.06);
}

.board-context-menu__color--default {
  background: var(--background, #fff);
  border-color: color-mix(in srgb, var(--foreground, #000) 18%, transparent);
}

.board-context-menu__color--muted {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
}

.board-context-menu__color--blue {
  background: color-mix(in srgb, #7eb0c8 48%, var(--background, #fff));
}

.board-context-menu__color--teal {
  background: color-mix(in srgb, #6fbfb0 48%, var(--background, #fff));
}

.board-context-menu__color--green {
  background: color-mix(in srgb, #8fbc8f 48%, var(--background, #fff));
}

.board-context-menu__color--yellow {
  background: color-mix(in srgb, #d4c07a 50%, var(--background, #fff));
}

.board-context-menu__color--warm {
  background: color-mix(in srgb, #c4a484 48%, var(--background, #fff));
}

.board-context-menu__color--rose {
  background: color-mix(in srgb, #d4a0a8 48%, var(--background, #fff));
}

.board-context-menu__color--violet {
  background: color-mix(in srgb, #b8a0c8 48%, var(--background, #fff));
}

/* hareket gunlugu sayfasi - 30.06.2026 12:00 */

.audit-page {
  max-width: 780px;
  margin: 0 auto;
}

.audit-log-panel {
  min-height: 220px;
  position: relative;
}

.audit-log-loading[hidden],
.audit-log-empty[hidden],
.audit-log-list[hidden],
.audit-log-more-wrap[hidden] {
  display: none !important;
}

.audit-log-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8125rem;
  padding: 3.5rem 1.5rem;
}

.audit-log-loading__label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  border-top-color: var(--foreground);
  animation: ann-spin 0.7s linear infinite;
}

.audit-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.audit-log-empty i {
  font-size: 2rem;
  color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.audit-log-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

.audit-log-empty__desc {
  margin: 0;
  max-width: 24rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-list {
  display: flex;
  flex-direction: column;
}

.audit-log-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9375rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-row:last-child {
  border-bottom: none;
}

.audit-log-row__icon {
  flex-shrink: 0;
}

.audit-log-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  display: block;
}

.audit-log-avatar--bot,
.audit-log-avatar--system {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-row__body {
  flex: 1;
  min-width: 0;
}

.audit-log-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8125rem;
}

.audit-log-row__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.audit-log-row__inline-roles {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
}

.audit-log-row__actor {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.audit-log-row__actor--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.audit-log-row__actor--trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-log-avatar-btn {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

.audit-log-avatar-btn:hover .audit-log-avatar {
  opacity: 0.88;
}

.audit-log-entity--trigger {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.audit-log-entity--trigger:hover .audit-log-entity__label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-log-row__msg {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 68%, transparent);
}

.audit-log-row__time {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  white-space: nowrap;
}

.audit-log-row__meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.audit-log-row__details {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audit-log-detail-line {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  line-height: 1.45;
}

.audit-log-detail-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin-top: 0.375rem;
}

.audit-log-order-list {
  margin: 0.125rem 0 0;
  padding-left: 1.25rem;
  list-style: decimal;
}

.audit-log-order-item {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  line-height: 1.5;
}

.audit-log-meta-chip {
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
}

.audit-log-meta-preview {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  font-style: italic;
}

.audit-log-more-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-more-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--foreground);
  transition: background-color 0.15s ease;
}

.audit-log-more-btn:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.audit-log-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* zengin hareket gunlugu satirlari - 07.07.2026 00:50 */

.audit-log-list--rich .audit-log-row--rich {
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}

.audit-log-scroll-sentinel {
  width: 100%;
  height: 1px;
  flex-shrink: 0;
  pointer-events: none;
}

.audit-log-scroll-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.125rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-scroll-footer[hidden] {
  display: none !important;
}

.audit-log-scroll-footer .audit-log-spinner {
  width: 18px;
  height: 18px;
}

.audit-log-row__subjects {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.audit-log-entity {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.5625rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  max-width: 100%;
}

.audit-log-entity__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-entity__avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.audit-log-entity__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-size: 0.75rem;
}

.audit-log-entity__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--audit-role-color, #6b7280);
}

.audit-log-entity__icon {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  flex-shrink: 0;
}

.audit-log-entity--rename .audit-log-entity__arrow {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.audit-log-entity--channel {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.audit-log-entity--role {
  background: color-mix(in srgb, var(--audit-role-color, #6b7280) 12%, transparent);
  border-color: color-mix(in srgb, var(--audit-role-color, #6b7280) 22%, transparent);
}

.audit-log-entity--role .audit-log-entity__label {
  color: var(--audit-role-color, #6b7280);
}

.sp-settings-audit__body {
  padding: 0;
}

.sp-settings-audit__panel {
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  overflow: hidden;
}

.space-settings-modal .sp-settings-audit .sp-settings-panel__head {
  display: none;
}

.space-settings-modal .sp-settings-audit__body {
  padding: 0;
}

/* sekme sirasi audit gorunumu - 07.07.2026 01:20 */

.audit-tab-order {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.625rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.audit-tab-order__section-label {
  margin: 0 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.audit-tab-order__move-list {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.audit-tab-order__move {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
}

.audit-tab-order__pos-change {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  flex-shrink: 0;
}

.audit-tab-order__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.3125rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.audit-tab-order__pos--new {
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
  color: var(--foreground);
}

.audit-tab-order__pos-arrow {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.audit-tab-order__tab {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  flex: 1;
}

.audit-tab-order__tab-icon {
  font-size: 0.9375rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

.audit-tab-order__tab-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-tab-order__replaced {
  font-size: 0.75rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-tab-order__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-tab-order__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.audit-tab-order__item--moved {
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.audit-tab-order__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.audit-tab-order__item-icon {
  font-size: 0.875rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.audit-tab-order__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-tab-order__moved-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.account-split__scroll:has(#account-main-content.account-main--space-general) {
  align-items: stretch;
}

.account-split__scroll:has(#account-main-content.account-main--space-general)
  > .account-split__content-pad {
  max-width: none;
  width: 100%;
}

.space-general {
  --space-general-inline: var(--account-split-inner-pad-x);
  --sg-avatar: 5rem;
  --sg-avatar-overlap: 2.5rem;
  --sg-action: 2.25rem;
  --sg-banner-h: 6.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  min-width: 0;
}

.space-general__main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  min-width: 0;
  max-width: 56rem;
}

.space-general__profile {
  position: relative;
  margin: 0;
  width: calc(100% + (2 * var(--space-general-inline)));
  margin-inline: calc(-1 * var(--space-general-inline));
  margin-top: calc(-1 * var(--account-split-inner-pad));
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--account-split-sidebar-bg);
  overflow: visible;
}

.space-general__profile-banner {
  height: var(--sg-banner-h);
  width: 100%;
  flex-shrink: 0;
  background: var(--surface-subtle);
}

.space-general__profile-body {
  padding: 0 var(--space-general-inline) 1.5rem;
  max-width: 72rem;
}

/* avatar banner'a biner; ayarlar banner altinda saga hizali - 03.08.2026 08:50 */

.space-general__profile-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--sg-avatar);
  margin-top: calc(-1 * var(--sg-avatar-overlap));
}

.space-general__profile-avatar {
  flex-shrink: 0;
  width: var(--sg-avatar);
  height: var(--sg-avatar);
}

.space-general__profile-avatar .space-avatar--card {
  width: 100%;
  height: 100%;
  min-width: 0;
  font-size: 1.75rem;
  border: 3px solid var(--account-split-sidebar-bg);
  border-radius: 30%;
  corner-shape: squircle;
  box-sizing: border-box;
  overflow: hidden;
  transition: none;
}

.space-general__profile-avatar .space-avatar--card .space-avatar__img {
  border-radius: inherit;
  corner-shape: inherit;
}

.space-general__profile-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: calc(var(--sg-avatar) - var(--sg-avatar-overlap));
  margin: 0;
  padding: 0;
}

.space-general__profile-actions .cengel-btn {
  width: var(--sg-action);
  min-width: var(--sg-action);
  min-height: var(--sg-action);
}

.space-general__profile-grid {
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: 0.875rem;
  min-width: 0;
}

@media (min-width: 960px) {
  .space-general__profile-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
    align-items: start;
  }
}

.space-general__profile-primary {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.space-general__profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.space-general__title-row {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  max-width: 100%;
}

.space-general__title {
  margin: 0;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__verified {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--foreground);
}

.space-general__domain {
  display: block;
  margin: 0;
  max-width: 100%;
  font-size: var(--text-xs, 0.875rem);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__description {
  margin: 0.875rem 0 0;
  max-width: 40rem;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.55;
  color: var(--ink-600);
  white-space: pre-wrap;
  word-break: break-word;
}

.dark .space-general__description {
  color: var(--ink-muted);
}

.space-general__description--empty {
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.space-general__ann-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  max-width: 40rem;
}

.space-general__ann-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border-radius: var(--sidebar-item-r, 9px);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, var(--border));
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  color: var(--foreground);
  text-decoration: none;
  font-size: var(--text-2xs, 0.8125rem);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.space-general__ann-badge:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
}

.space-general__ann-badge i {
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.space-general__ann-badge:hover i {
  color: var(--foreground);
}

.space-general__ann-badge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .space-general {
    --sg-avatar: 4.25rem;
    --sg-avatar-overlap: 2.125rem;
    --sg-action: 2.125rem;
    --sg-banner-h: 5.5rem;
    gap: 1.5rem;
  }

  .space-general__profile-body {
    padding-bottom: 1.25rem;
  }

  .space-general__profile-avatar .space-avatar--card {
    font-size: 1.5rem;
  }

  .space-general__title {
    font-size: 1.3125rem;
  }

  .space-general__main {
    gap: 1.5rem;
  }
}

.space-general__details {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--sidebar-r, 14px);
  background: var(--background);
}

.space-general__details-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  text-transform: uppercase;
}

.space-general__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.space-general__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.625rem 0.5rem;
  border-radius: var(--sidebar-item-r, 9px);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  text-align: center;
}

.space-general__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.space-general__stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.space-general__meta-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--border);
}

.space-general__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.space-general__meta-row:first-child {
  padding-top: 0.75rem;
}

.space-general__meta-row dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-muted);
}

.space-general__meta-row dd {
  margin: 0;
  min-width: 0;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__owner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--sidebar-item-r, 9px);
}

.space-general__owner:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.space-general__owner-avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
}

.space-general__owner-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.space-general__owner-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.space-general__owner-name {
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__owner-user {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__owner-badge {
  flex-shrink: 0;
  padding: 0.1875rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
}

@media (max-width: 640px) {
  .space-general__details {
    padding: 0.875rem 1rem;
  }

  .space-general__meta-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

.join-requests-host[hidden] {
  display: none !important;
}

.space-general__join-host:not([hidden]) {
  display: block;
  min-width: 0;
}

.space-general__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--sidebar-r, 14px);
  border: 1px solid color-mix(in srgb, #d97706 28%, var(--border));
  background: color-mix(in srgb, #f59e0b 10%, var(--background));
  color: #92400e;
}

.dark .space-general__notice {
  border-color: color-mix(in srgb, #fbbf24 30%, var(--border));
  background: color-mix(in srgb, #b45309 16%, var(--background));
  color: #fcd34d;
}

.space-general__notice i {
  font-size: 1.0625rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.space-general__notice-body {
  min-width: 0;
  flex: 1;
}

.space-general__notice-title {
  margin: 0 0 0.25rem;
  font-size: var(--text-sm, 0.9375rem);
  font-weight: 700;
  line-height: 1.35;
}

.space-general__notice-desc {
  margin: 0;
  font-size: var(--text-xs, 0.875rem);
  line-height: 1.45;
  opacity: 0.92;
}

.space-general__notice-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--sidebar-item-r, 9px);
  border: 1px solid color-mix(in srgb, #d97706 40%, transparent);
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.space-general__notice-action:hover {
  background: color-mix(in srgb, #d97706 12%, transparent);
}

.space-general__notice-action i {
  font-size: 0.8125rem;
}

.dark .space-general__notice-action {
  border-color: color-mix(in srgb, #fbbf24 32%, transparent);
}

.dark .space-general__notice-action:hover {
  background: color-mix(in srgb, #fbbf24 14%, transparent);
}

.space-general__section {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sidebar-r, 14px);
  border: 1px solid var(--border);
  background: var(--background);
}

.space-general__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
  padding: 1.125rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}

.space-general__section-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.space-general__section-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--foreground);
}

.space-general__section-desc {
  margin: 0;
  font-size: var(--text-xs, 0.875rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.space-general__section-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  padding: 0 0.4375rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
}

.space-general__section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
}

.space-general__section-item {
  margin: 0;
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

.space-general__section-item:last-child {
  border-bottom: none;
}

.space-general__activity-row,
.space-general__person-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.875rem 1.25rem;
  text-decoration: none;
  color: var(--foreground);
  background: transparent;
  transition: background-color 120ms ease;
}

a.space-general__activity-row {
  cursor: pointer;
}

.space-general__activity-row:hover,
.space-general__person-row:hover {
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}

.space-general__person-hit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--sidebar-item-r, 9px);
}

.space-general__person-hit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.space-general__activity-icon-wrap,
.space-general__person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border-radius: var(--sidebar-item-r, 9px);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
  color: var(--ink-muted);
}

/* hoverda ikon kutusu satirdan ayri kalsin - 21.07.2026 20:38 */

.space-general__activity-row:hover .space-general__activity-icon-wrap {
  background: var(--background);
  border-color: var(--border);
  color: var(--ink-600);
}

.dark .space-general__activity-row:hover .space-general__activity-icon-wrap {
  color: var(--ink-muted);
}

.space-general__person-avatar {
  border-radius: 999px;
}

.space-general__person-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.space-general__activity-icon {
  font-size: 1rem;
  line-height: 1;
}

.space-general__activity-body,
.space-general__person-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.space-general__activity-name,
.space-general__person-name {
  margin: 0;
  font-size: var(--text-xs, 0.875rem);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__activity-meta,
.space-general__person-meta {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__activity-badges,
.space-general__person-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  max-width: 100%;
}

.space-general__person-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* join request ctas: cengel-btn--sm - 01.08.2026 23:56 */

.space-general__person-actions .cengel-btn {
  flex-shrink: 0;
}

.space-general__activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  max-width: 7.5rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-general__activity-badge--unread {
  color: var(--ink-600);
  background: var(--surface-subtle);
}

.dark .space-general__activity-badge--unread {
  color: var(--ink-muted);
}

.space-general__activity-badge--mention {
  color: #fff;
  background: #dc2626;
  min-width: 1.125rem;
}

.space-general__activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.625rem;
  padding: 2.25rem 1.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.space-general__activity-empty-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.space-general__activity-empty-text {
  margin: 0;
  max-width: 20rem;
  font-size: var(--text-xs, 0.875rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

@media (max-width: 640px) {
  .space-general__notice {
    padding: 0.875rem 1rem;
    flex-wrap: wrap;
  }

  .space-general__notice-action {
    margin-left: calc(1.0625rem + 0.75rem);
  }

  .space-general__section-head {
    padding: 1rem 1.125rem 0.875rem;
  }

  .space-general__section-title {
    font-size: 1rem;
  }

  .space-general__activity-row,
  .space-general__person-row {
    padding: 0.8125rem 1.125rem;
  }

  .space-general__person-row {
    flex-wrap: wrap;
  }

  .space-general__person-hit {
    flex: 1 1 auto;
    width: 100%;
  }

  .space-general__person-actions {
    width: 100%;
    padding-left: calc(2.375rem + 0.75rem);
    justify-content: flex-start;
  }

  .space-general__activity-empty {
    padding: 1.75rem 1.125rem;
  }
}

/* anons kanali stilleri - 23.06.2026 21:30 */

/* anons sayfa — tam genislik, dis scroll - 23.06.2026 22:30 */

.ann-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--background, #fff);
}

.ann-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 0 16px;
}

.ann-feed__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  width: 100%;
}

/* az mesaj varken icerigi compose'a yasla — yukari bosluk buyur - 24.06.2026 02:27 */

.ann-feed__grow-spacer {
  flex: 1 1 auto;
  min-height: 0;
}

.ann-feed--empty .ann-feed__grow-spacer {
  display: none;
}

.ann-feed--loading .ann-feed__inner {
  display: none;
}

.ann-feed--loading .ann-feed__loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 120px;
}

.ann-feed:not(.ann-feed--empty) {
  padding-top: 16px;
}

.ann-feed__list {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

/* son mesaj ile compose arasi bosluk - 23.06.2026 22:05 */

.ann-feed__spacer {
  height: 16px;
  flex-shrink: 0;
}

.ann-feed__loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
  max-width: 760px;
  margin: 0 auto;
}

.ann-feed__history-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
  max-width: 760px;
  margin: 0 auto;
}

.ann-feed__history-loading[hidden] {
  display: none !important;
}

.ann-feed__loading[hidden] {
  display: none !important;
}

.ann-feed__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-top-color: var(--foreground, #000);
  animation: ann-spin 0.7s linear infinite;
}

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

.ann-feed__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 80px 0;
  max-width: 760px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  text-align: center;
}

.ann-feed__empty-icon {
  font-size: 3rem;
}

.ann-feed__empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  margin: 0;
}

.ann-feed__empty-sub {
  font-size: 0.9375rem;
  margin: 0;
  max-width: 280px;
}

/* kart — discord tarzi oranti: 40px avatar, 16px gap, ortak satir ritmi - 14.07.2026 08:29 */

.ann-card {
  --ann-avatar-size: 2.5rem;
  --ann-avatar-gap: 1rem;
  --ann-msg-size: 0.9375rem;
  --ann-msg-line: 1.375;
  --ann-avatar-nudge: 0.125rem;
  display: flex;
  align-items: flex-start;
  gap: var(--ann-avatar-gap);
  padding: 0.125rem 0.5rem 0.25rem;
  border-radius: 6px;
  position: relative;
  transition: background 0.1s;
}

.ann-card:hover {
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
}

/* mention/etkilenme vurgusu — sari ton + sol kenarda discord tarzi serit - 01.07.2026 21:10 */

.ann-card--mentioned {
  position: relative;
  background: color-mix(in srgb, #f5c518 14%, transparent);
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.ann-card--mentioned::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f5c518;
}

.ann-card--mentioned:hover {
  background: color-mix(in srgb, #f5c518 20%, transparent);
}

.dark .ann-card--mentioned {
  background: color-mix(in srgb, #f5c518 11%, transparent);
}

.dark .ann-card--mentioned:hover {
  background: color-mix(in srgb, #f5c518 16%, transparent);
}

/* bookmark deep link vurgusu - 09.07.2026 15:05 */

.ann-card--jump-highlight {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  transition: background-color 400ms ease;
}

.dark .ann-card--jump-highlight {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* mesaj gruplari arasi bosluk — stack icinde yok - 14.07.2026 08:29 */

.ann-card:not(.ann-card--continued) {
  margin-top: 1.0625rem;
}

.ann-feed__list > .ann-card:first-child {
  margin-top: 0;
}

.ann-card--stack-head {
  padding-bottom: 0;
}

.ann-card--stack-head .ann-card__content {
  margin-bottom: 0;
}

.ann-card--stack-head + .ann-card--continued,
.ann-card--continued + .ann-card--continued {
  margin-top: 0;
}

.ann-card--continued {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
  align-items: flex-start;
}

.ann-card--continued .ann-card__content {
  margin-bottom: 0;
  padding: 0;
  font-size: var(--ann-msg-size);
  line-height: var(--ann-msg-line);
}

.ann-card--continued .ann-markdown p,
.ann-card--continued .ann-markdown p:first-child,
.ann-card--continued .ann-markdown p:last-child {
  margin: 0;
}

.ann-card--continued:last-child {
  padding-bottom: 0.125rem;
}

.ann-card--stack-head:last-child {
  padding-bottom: 0.125rem;
}

/* compact avatar kolonu — devam mesajlarinda satir yuksekligi kadar - 14.07.2026 08:29 */

.ann-card__avatar-col--compact {
  width: var(--ann-avatar-size);
  padding-top: 0;
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.ann-card__avatar-col--compact .ann-card__hover-time {
  position: static;
  inset: auto;
  height: auto;
  padding-right: 2px;
  line-height: var(--ann-msg-line);
  font-size: 0.625rem;
  justify-content: flex-end;
}

/* gizli avatar artik kullanilmiyor — geriye uyumluluk - 24.06.2026 02:27 */

.ann-card__avatar--hidden {
  display: none;
}

/* avatar ustu isim satiriyla hizali; ofset sabit kalir - 14.07.2026 08:29 */

.ann-card__avatar-col {
  flex-shrink: 0;
  width: var(--ann-avatar-size);
  padding-top: var(--ann-avatar-nudge);
  position: relative;
  align-self: flex-start;
}

/* continued mesajda sol kisimda hover'da saat goster - 24.06.2026 02:27 */

.ann-card__hover-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 500;
  pointer-events: none;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
}

.ann-card--continued:hover .ann-card__hover-time {
  opacity: 1;
}

/* mesaj icerigi secilelebilir olmali - 24.06.2026 02:27 */

.ann-card__content {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.ann-card__body-col {
  flex: 1;
  min-width: 0;
  position: relative;
}

.ann-card__avatar {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: block;
}

.ann-card__avatar--webhook {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* hover eylem cubugu — sag ustte, tek kapsul - 05.07.2026 05:05 */

.ann-card__hover-bar {
  position: absolute;
  top: -16px;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}

.ann-card__hover-bar-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  background: var(--background, #fff);
}

.ann-card__hover-bar .ann-card__hbtn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
}

.ann-card__hover-bar .ann-card__hbtn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.msg-date-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 6px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.msg-date-divider::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  pointer-events: none;
}

.msg-date-divider__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: var(--background, #fff);
  color: color-mix(in srgb, var(--foreground, #000) 50%, transparent);
}

.msg-date-divider + .ann-card {
  margin-top: 0;
}

.ann-card + .msg-date-divider {
  margin-top: 0.25rem;
}

.msg-unread-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 6px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.msg-unread-divider::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, #ef4444 45%, transparent);
  pointer-events: none;
}

.msg-unread-divider__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
  background: var(--background, #fff);
  color: #ef4444;
}

.dark .msg-unread-divider__label {
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
}

/* promote sonrasi full kart da; tarih bolucusu ile ayni — ekstra margin yok - 22.07.2026 19:46 */

.msg-unread-divider + .ann-card {
  margin-top: 0;
}

.ann-card + .msg-unread-divider {
  margin-top: 0.25rem;
}

.cengel-bot-tag {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  /* background ile karisik — mention/sistem tint ustunde seffaf kalmaz - 16.07.2026 16:41 */
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 16%, var(--background, #fff));
  background: color-mix(in srgb, var(--foreground, #000) 10%, var(--background, #fff));
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--foreground, #000) 68%, var(--background, #fff));
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
}

.cengel-user-card__name .cengel-bot-tag {
  margin-left: 6px;
}

/* header gap zaten 0.375rem — ekstra margin yok (tarihle ayni ara) - 16.07.2026 16:41 */

.ann-card__header-row .cengel-bot-tag {
  margin-left: 0;
}

.cengel-bot-tag--preview {
  text-transform: capitalize;
  letter-spacing: 0.02em;
  font-size: 0.5rem;
}

.ann-card--editing {
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
}

.ann-card--editing .ann-card__hover-bar {
  opacity: 0;
  pointer-events: none;
}

.ann-card__edited {
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-card__edit {
  margin-top: 2px;
}

#account-main-content.account-main--channel .ann-compose--inline-edit {
  position: static;
  padding: 0;
  background: transparent;
}

#account-main-content.account-main--channel .ann-compose--inline-edit::before {
  display: none;
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview.ann-markdown {
  line-height: var(--ch-compose-line, 20px);
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .cengel-mention,
#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .cengel-mention--all,
#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .cengel-mention--url {
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .cengel-emoji--compose {
  width: 1em;
  height: 1em;
  max-width: none;
  max-height: none;
  vertical-align: -0.075em;
  margin: 0;
}

.ann-card__edit-hints {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 2px 0;
}

.ann-card__edit-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
}

.ann-card__edit-hint--right {
  margin-left: auto;
  text-align: right;
}

@keyframes ann-react-pill-in {
  from {
    opacity: 0;
    transform: scale(0.84);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ann-react-pill-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.84);
  }
}

@keyframes ann-react-pill-pulse {
  0%, 100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.06);
  }
}

@keyframes ann-react-row-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ann-react-row-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes ann-react-count-bump {
  0%, 100% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.2);
  }
}

.ann-card__reacts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 0;
}

.ann-card__reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ann-card__react-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center center;
  transition:
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__react-pill:hover {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  color: var(--foreground, #000);
  transform: scale(1.04);
}

.ann-card__react-pill:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

.ann-card__react-pill--active {
  border-color: color-mix(in srgb, #5865f2 45%, transparent);
  background: color-mix(in srgb, #5865f2 14%, var(--background, #fff));
  color: #5865f2;
}

.ann-card__react-pill--active:hover {
  border-color: color-mix(in srgb, #5865f2 58%, transparent);
  background: color-mix(in srgb, #5865f2 20%, var(--background, #fff));
  color: #5865f2;
}

.dark .ann-card__react-pill--active {
  border-color: color-mix(in srgb, #5865f2 55%, transparent);
  background: color-mix(in srgb, #5865f2 22%, var(--background, #fff));
  color: #dee0fc;
}

.dark .ann-card__react-pill--active:hover {
  border-color: color-mix(in srgb, #5865f2 68%, transparent);
  background: color-mix(in srgb, #5865f2 28%, var(--background, #fff));
  color: #eef0ff;
}

.ann-card__react-pill--enter {
  animation: ann-react-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ann-card__react-pill--leave {
  animation: ann-react-pill-out 170ms ease-in both;
  pointer-events: none;
}

.ann-card__react-pill--pulse {
  animation: ann-react-pill-pulse 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__reacts-row--enter {
  animation: ann-react-row-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ann-card__reacts-row--leave {
  animation: ann-react-row-out 190ms ease-in both;
  pointer-events: none;
}

.ann-card__react-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ann-card__react-emoji {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}

.ann-card__react-count {
  display: inline-block;
  line-height: 1;
  min-width: 0.65em;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  transform-origin: center center;
}

.ann-card__react-count--bump {
  animation: ann-react-count-bump 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__react-add-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card:hover .ann-card__react-add-inline {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.ann-card__react-add-inline:hover {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground, #000) 20%, transparent);
  color: var(--foreground, #000);
  transform: scale(1.05);
}

.ann-card__react-add-inline:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.ann-card__react-add-inline .ph-smiley {
  font-size: 1rem;
}

.ann-card__hbtn[data-msg-react-add] .ph-smiley,
.ann-card__hbtn[data-msg-edit] .ph-pencil-simple,
.ann-card__hbtn[data-msg-delete] .ph-trash {
  font-size: 1rem;
}

.ann-card__hover-bar .ann-card__hbtn--danger:hover {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 8%, transparent);
}

.ann-card__react-pill .cengel-emoji-wrap {
  vertical-align: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ann-card__react-pill--enter,
    .ann-card__react-pill--leave,
    .ann-card__react-pill--pulse,
    .ann-card__reacts-row--enter,
    .ann-card__reacts-row--leave,
    .ann-card__react-count--bump {
    animation: none;
  }

  .ann-card__react-pill,
    .ann-card__react-add-inline {
    transition:
            background-color 120ms ease-out,
            border-color 120ms ease-out,
            color 120ms ease-out;
  }

  .ann-card__react-pill:hover,
    .ann-card__react-pill:active,
    .ann-card__react-add-inline:hover,
    .ann-card__react-add-inline:active {
    transform: none;
  }

  .ann-card:hover .ann-card__react-add-inline {
    transform: none;
  }
}

.ann-link-preview {
  position: relative;
  margin: 4px 0 0;
  max-width: min(100%, 32rem);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
  background: var(--background, #fff);
  color: inherit;
  overflow: hidden;
  transition: border-color 0.1s;
}

.ann-link-preview:hover,
.ann-link-preview:focus-within {
  border-color: color-mix(in srgb, var(--border, #e5e5e5) 100%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .ann-link-preview {
    transition: none;
  }
}

.ann-link-preview__inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ann-link-preview__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
}

.ann-link-preview__site {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ann-link-preview__favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.ann-link-preview__site-name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground, #171717);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-link-preview__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground, #171717);
  text-decoration: none;
  word-break: break-word;
}

.ann-link-preview__title:hover {
  text-decoration: underline;
}

.ann-link-preview__description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* summary: metin + sag thumb; thumb en az 1:1 - 16.08.2026 14:26 */

.ann-link-preview--summary .ann-link-preview__inner {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 88px;
}

.ann-link-preview--summary .ann-link-preview__body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}

.ann-link-preview--summary .ann-link-preview__thumb-btn {
  flex-shrink: 0;
  width: 88px;
  min-width: 88px;
  min-height: 88px;
  min-aspect-ratio: 1 / 1;
  align-self: stretch;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
  background: color-mix(in srgb, var(--surface-subtle, #f5f5f5) 92%, transparent);
  cursor: zoom-in;
  border-radius: 0;
  overflow: hidden;
}

.ann-link-preview--summary .ann-link-preview__thumb-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  outline-offset: -2px;
}

.ann-link-preview--summary .ann-link-preview__thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 88px;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

/* large: metin + gorsel ayni embed kartinda - 27.07.2026 22:40 */

.ann-link-preview--large .ann-link-preview__inner {
  gap: 0;
}

.ann-link-preview--large .ann-card__media {
  margin: 0;
  max-width: none;
  width: 100%;
  height: auto;
  max-height: 18rem;
  border: none;
  border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
  background: color-mix(in srgb, var(--surface-subtle, #f5f5f5) 92%, transparent);
}

/* msg-media-frame 12rem/30px loader'i ezmesin — og large placeholder - 27.07.2026 22:40 */

.ann-link-preview--large [data-msg-media].is-loading:not([data-msg-media-sized]),
.ann-link-preview--large [data-msg-media].ann-card__media.is-loading {
  width: 100%;
  max-width: none;
  min-height: 10rem;
  aspect-ratio: 1.91 / 1;
  height: auto;
  max-height: 18rem;
}

.ann-link-preview--large .ann-card__media-item,
.ann-link-preview--large .ann-card__media img.msg-media__img {
  width: 100%;
  height: auto;
  max-height: 18rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}

.ann-card--continued .ann-link-preview {
  margin-top: 4px;
}

/* dogrudan gorsel url — genislik medyaya gore, sagda bosluk yok - 27.07.2026 22:40 */

.ann-link-preview--photo {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.ann-link-preview--photo:hover,
.ann-link-preview--photo:focus-within {
  border-color: transparent;
}

.ann-link-preview--photo .ann-card__media {
  margin-top: 0;
}

/* photo loader da kucuk 12rem kutuya dusmesin - 27.07.2026 22:40 */

.ann-link-preview--photo [data-msg-media].ann-card__media.is-loading:not([data-msg-media-sized]),
.ann-link-preview--photo [data-msg-media].is-loading:not([data-msg-media-sized]) {
  width: min(100%, 26.25rem);
  min-height: 10rem;
}

.ann-link-preview [data-msg-media].is-error {
  display: none;
}

.ann-feed--empty .ann-feed__inner {
  min-height: 100%;
}

.ann-feed--empty {
  padding-top: 16px;
  padding-bottom: 8px;
}

.ann-feed--empty .ch-channel-intro {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 15px;
}

.ann-feed--empty .ann-feed__spacer {
  display: none;
}

.ch-channel-intro {
  width: 100%;
  margin: 0;
  padding: 15px 16px 0;
  flex-shrink: 0;
}

.ch-channel-intro__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  /* title–lead arasi dm intro gap ile ayni - 22.07.2026 20:10 */
  margin: 0 0 0.375rem;
  color: var(--foreground, #000);
}

.ch-channel-intro__type-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.dark .ch-channel-intro__type-icon {
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.ch-channel-intro__lead {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

.ch-channel-intro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.ch-channel-intro__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 46%, transparent);
}

.ch-channel-intro__meta-item i {
  font-size: 1rem;
  flex-shrink: 0;
}

.ch-channel-intro__hint {
  display: none;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
}

.ann-feed--empty .ch-channel-intro__hint {
  display: inline-flex;
}

.ch-channel-intro__lead + .ch-channel-intro__actions {
  margin-top: 4px;
}

.ch-channel-intro__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin: 0.375rem 0 0.5rem;
  align-items: stretch;
}

@media (min-width: 480px) {
  .ch-channel-intro__actions {
    /* 1–3 kart: esit genislik, bos sutun birakma - 22.07.2026 20:15 */
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }
}

.ch-channel-intro__action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 6.75rem;
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 12px;
  background: var(--background, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ch-channel-intro__action-card:hover {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
}

.ch-channel-intro__action-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  outline-offset: 2px;
}

.ch-channel-intro__action-icon {
  width: 2rem;
  height: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 0.625rem;
}

.ch-channel-intro__action-label {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground, #000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-channel-intro__action-hint {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-channel-intro__topic-input {
  min-height: 96px;
  resize: vertical;
}

.ch-channel-intro__welcome {
  margin: 4px 0 0;
}

.ch-channel-intro__welcome[hidden] {
  display: none !important;
}

.ch-channel-intro__welcome:not([hidden]) {
  display: block;
}

/* feed list .ann-card ile ayni tam genislik hover - 22.07.2026 20:20 */

.ch-channel-intro__welcome-card {
  margin-left: calc(-1 * var(--ch-chat-side-pad, 20px));
  margin-right: calc(-1 * var(--ch-chat-side-pad, 20px));
  padding-left: var(--ch-chat-side-pad, 20px);
  padding-right: var(--ch-chat-side-pad, 20px);
  border-radius: 0;
}

/* gonder butonu — icerigin altinda hafif, kutu/toolbar olmadan bir aksiyon - 22.07.2026 20:20 */

.ch-channel-intro__welcome-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 65%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
        background-color 140ms ease-out,
        color 140ms ease-out,
        border-color 140ms ease-out;
}

.ch-channel-intro__welcome-send:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
  border-color: color-mix(in srgb, var(--foreground, #000) 26%, transparent);
}

.ch-channel-intro__welcome-send:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  outline-offset: 1px;
}

.ch-channel-intro__welcome-send:disabled {
  opacity: 0.5;
  cursor: default;
}

.ann-card--system {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0.75rem 0 0.25rem;
  border: 0;
  background: transparent;
}

.ann-card--system:hover {
  background: transparent;
}

.ann-card--system + .ann-card:not(.ann-card--system):not(.ann-card--continued) {
  margin-top: 1rem;
}

.ann-card:not(.ann-card--system) + .ann-card--system {
  margin-top: 1rem;
}

.ann-card__system-text {
  margin: 0;
  max-width: 100%;
  font-size: 0.8125rem;
  line-height: 1.375;
  text-align: left;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.ann-card__system-actor {
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 62%, transparent);
}

.ann-card__system-actor--trigger,
.ann-card__system-actor.ann-card__name--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
  cursor: pointer;
  text-align: left;
}

.ann-card__system-actor--trigger:hover,
.ann-card__system-actor--trigger:focus-visible,
.ann-card__system-actor.ann-card__name--trigger:hover,
.ann-card__system-actor.ann-card__name--trigger:focus-visible {
  color: var(--foreground, #171717);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

.dark .ann-card__system-actor--trigger:hover,
.dark .ann-card__system-actor--trigger:focus-visible,
.dark .ann-card__system-actor.ann-card__name--trigger:hover,
.dark .ann-card__system-actor.ann-card__name--trigger:focus-visible {
  color: var(--foreground, #e4e4e7);
}

.ann-card__system-time {
  display: inline;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.375;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  white-space: nowrap;
  cursor: default;
}

.ann-card__system-time:hover,
.ann-card__system-time:focus-visible {
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  outline: none;
}

[data-msg-media] {
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-subtle, #f5f5f5) 88%, transparent);
}

[data-msg-media].is-loading:not([data-msg-media-sized]) {
  width: min(100%, 12rem);
  min-height: 30px;
}

[data-msg-media].is-error {
  width: min(100%, 10rem);
  min-height: 30px;
}

.msg-media__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-media__loader::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-top-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  animation: msg-media-spin 0.7s linear infinite;
}

[data-msg-media].is-loaded .msg-media__loader,
[data-msg-media].is-error .msg-media__loader {
  display: none;
}

[data-msg-media] img[data-msg-media-img],
[data-msg-media] img.msg-media__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  transition: opacity 160ms ease;
  vertical-align: top;
}

[data-msg-media].is-loaded img[data-msg-media-img],
[data-msg-media].is-loaded img.msg-media__img {
  opacity: 1;
  cursor: pointer;
}

[data-msg-media].is-error img[data-msg-media-img],
[data-msg-media].is-error img.msg-media__img {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .msg-media__loader::before {
    animation: none;
    border-top-color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  }

  [data-msg-media] img[data-msg-media-img],
    [data-msg-media] img.msg-media__img {
    transition: none;
  }
}

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

.ann-card__file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  max-width: min(100%, 280px);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
  background: var(--background, #fff);
  color: inherit;
  overflow: hidden;
}

.ann-card__content > .ann-card__file:first-child {
  margin-top: 0;
}

/* pdf dokuman karti — sayfa sahnesi + meta bar - 20.07.2026 20:09 */

.ann-card__file--preview {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: min(100%, 288px);
  padding: 0;
}

.ann-card__file-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--surface-subtle, #f5f5f5) 92%, transparent);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.ann-card__file-stage:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  outline-offset: -2px;
}

.ann-card__file-page {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  border: 0;
  border-radius: 0;
  vertical-align: top;
}

.ann-card__file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--foreground, #000) 50%, transparent);
}

.ann-card__file-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ann-card__file--preview .ann-card__file-meta {
  flex: none;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
}

.ann-card__file--preview .ann-card__file-icon {
  width: 32px;
  height: 32px;
  font-size: 1.05rem;
}

.ann-card__file-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.ann-card__file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-card__file-sub {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-card__file-dl-btn,
.ann-card__content.ann-markdown a.ann-card__file-dl-btn,
.ann-markdown a.ann-card__file-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.ann-card__file-dl-btn:hover,
.ann-card__content.ann-markdown a.ann-card__file-dl-btn:hover,
.ann-markdown a.ann-card__file-dl-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  border-color: color-mix(in srgb, var(--border, #e5e5e5) 100%, transparent);
  color: var(--foreground, #000);
  text-decoration: none !important;
}

.ann-card__file-dl-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  outline-offset: 2px;
}

.ann-card__file-dl-btn:active {
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
}

.cengel-video-player {
  position: relative;
  display: block;
  width: 100%;
  max-height: 320px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.cengel-media-lightbox .cengel-video-player {
  max-height: 88vh;
  max-width: min(88vw, 1200px);
  border-radius: 10px;
  cursor: default;
}

.cengel-video-player:fullscreen,
.cengel-video-player:-webkit-full-screen {
  max-height: 100vh;
  max-width: 100vw;
  border-radius: 0;
}

.cengel-video-player__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: top;
}

.cengel-media-lightbox .cengel-video-player__video {
  max-height: 88vh;
}

.cengel-video-player:fullscreen .cengel-video-player__video,
.cengel-video-player:-webkit-full-screen .cengel-video-player__video {
  max-height: 100vh;
  height: 100%;
  object-fit: contain;
}

/* overlay — click toggle; sadece pointer-events icin - 16.07.2026 00:37 */

.cengel-video-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: auto;
}

/* merkez ikonu — duraklatildiginda parlak, hover'da solar - 16.07.2026 00:37 */

.cengel-video-player__big-icon {
  font-size: 2.25rem;
  color: #ffffff;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  line-height: 1;
}

.cengel-video-player[data-playing="0"] .cengel-video-player__big-icon {
  opacity: 0.88;
}

/* hover'da merkez ikonu silinir — kontroller devreye girer - 16.07.2026 00:37 */

.cengel-video-player:hover .cengel-video-player__big-icon,
.cengel-video-player:focus-within .cengel-video-player__big-icon {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-video-player__big-icon {
    transition: none;
  }
}

/* bar: solid bg yok, alttan yukari gradient fade - 16.07.2026 00:43 */

.cengel-video-player__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 2rem 0.625rem 0.5rem;
  background: rgba(0, 0, 0, 0.40);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* hover/focus → bar belirginlesir - 16.07.2026 00:43 */

.cengel-video-player:hover .cengel-video-player__bar,
.cengel-video-player:focus-within .cengel-video-player__bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* touch: oynarken ve henuz idle degil → goster - 16.07.2026 00:43 */

.cengel-video-player[data-playing="1"][data-idle="0"] .cengel-video-player__bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* touch idle: hover yoksa gizle — hover varsa usteki kural kazanir - 16.07.2026 00:43 */

.cengel-video-player[data-playing="1"][data-idle="1"] .cengel-video-player__bar {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* timeline — full width, kalin cizgi - 16.07.2026 00:43 */

.cengel-video-player__scrub-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 18px;
  min-width: 0;
  cursor: pointer;
}

.cengel-video-player__track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  transition: height 140ms ease;
}

.cengel-video-player__scrub-wrap:hover .cengel-video-player__track {
  height: 6px;
}

.cengel-video-player__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 999px;
  transition: width 80ms linear;
}

/* native range — gorunmez, sadece interaction icin - 16.07.2026 00:43 */

.cengel-video-player__scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.cengel-video-player__scrub:focus-visible ~ .cengel-video-player__track {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

/* alt satir — play, sure, mute, fullscreen - 16.07.2026 00:43 */

.cengel-video-player__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 28px;
}

.cengel-video-player__spacer {
  flex: 1;
  min-width: 0;
}

.cengel-video-player__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, opacity 120ms ease;
}

.cengel-video-player__btn:hover {
  color: #ffffff;
}

.cengel-video-player__btn:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* sure — play yaninda - 16.07.2026 00:43 */

.cengel-video-player__time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-family: Arial, sans-serif;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  letter-spacing: 0.02em;
  padding: 0 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .cengel-video-player__bar {
    transition: none;
  }

  .cengel-video-player__btn {
    transition: none;
  }

  .cengel-video-player__track {
    transition: none;
  }

  .cengel-video-player__track-fill {
    transition: none;
  }
}

.cengel-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 340px);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3.5%, var(--background, #fff));
  position: relative;
}

.cengel-audio-player__audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.cengel-audio-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  color: var(--foreground, #000);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease-out;
}

.cengel-audio-player__play:hover {
  background: color-mix(in srgb, var(--foreground, #000) 16%, transparent);
}

.cengel-audio-player__play-icon {
  font-size: 1rem;
  line-height: 1;
}

.cengel-audio-player__scrub-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cengel-audio-player__wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cengel-audio-player__wave-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1px;
}

.cengel-audio-player__wave-layer--played {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.cengel-audio-player__bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 0;
  height: var(--bar-h, 6%);
  border-radius: 1px;
  align-self: center;
}

.cengel-audio-player__wave-layer--base .cengel-audio-player__bar {
  background: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
}

.cengel-audio-player__wave-layer--played .cengel-audio-player__bar {
  background: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

/* tiklama wrap'ta; range klavye + gorsel thumb icin - 05.08.2026 06:02 */

.cengel-audio-player__scrub {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  height: 36px;
  cursor: pointer;
  pointer-events: none;
}

.cengel-audio-player__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 2px;
  height: 28px;
  border-radius: 1px;
  background: var(--foreground, #000);
  border: none;
  opacity: 0.85;
}

.cengel-audio-player__scrub::-moz-range-thumb {
  width: 2px;
  height: 28px;
  border-radius: 1px;
  background: var(--foreground, #000);
  border: none;
  opacity: 0.85;
}

.cengel-audio-player__scrub::-webkit-slider-runnable-track {
  height: 36px;
  background: transparent;
}

.cengel-audio-player__scrub::-moz-range-track {
  height: 36px;
  background: transparent;
}

.cengel-audio-player__time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--foreground, #000) 62%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}

.cengel-audio-player--compose {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: 1;
  height: var(--ch-compose-tool, 36px);
  max-height: var(--ch-compose-tool, 36px);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  gap: 6px;
  overflow: hidden;
}

.cengel-audio-player--compose .cengel-audio-player__play {
  width: 28px;
  height: 28px;
}

.cengel-audio-player--compose .cengel-audio-player__scrub-wrap,
.cengel-audio-player--compose .cengel-audio-player__scrub,
.cengel-audio-player--compose .cengel-audio-player__scrub::-webkit-slider-runnable-track,
.cengel-audio-player--compose .cengel-audio-player__scrub::-moz-range-track {
  height: var(--ch-compose-line, 20px);
}

.cengel-audio-player--compose .cengel-audio-player__scrub::-webkit-slider-thumb,
.cengel-audio-player--compose .cengel-audio-player__scrub::-moz-range-thumb {
  height: 16px;
}

.cengel-audio-player--compose .cengel-audio-player__bar {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
  width: 0;
}

.cengel-audio-player--compose .cengel-audio-player__time {
  font-size: 0.6875rem;
  line-height: 1;
}

.ann-card__audio {
  margin-top: 6px;
}

.ann-card:hover .ann-card__hover-bar {
  opacity: 1;
  pointer-events: auto;
}

.ann-card__hbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  font-size: 0.95rem;
  transition: background 0.1s, color 0.1s;
}

.ann-card__hbtn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.ann-card__hbtn--like.ann-card__hbtn--active {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
}

/* dropdown - 23.06.2026 22:25 */

.ann-card__dropdown {
  position: absolute;
  top: 28px;
  right: 0;
  min-width: 168px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 10px;
  padding: 4px;
  z-index: 100;
}

.ann-card__dditem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  border-radius: 7px;
  text-align: left;
  color: color-mix(in srgb, var(--foreground, #000) 75%, transparent);
  transition: background 0.1s, color 0.1s;
}

.ann-card__dditem:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.ann-card__dditem--danger {
  color: #ef4444;
}

.ann-card__dditem--danger:hover {
  background: color-mix(in srgb, #ef4444 6%, transparent);
  color: #ef4444;
}

.ann-card__ddsep {
  height: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  margin: 3px 0;
}

/* header + icerik — ayni font/satir ritmi, ekstra ara yok - 14.07.2026 08:29 */

.ann-card__header-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin: 0;
  min-height: calc(var(--ann-msg-size, 0.9375rem) * var(--ann-msg-line, 1.375));
  line-height: var(--ann-msg-line, 1.375);
}

.ann-card__name {
  font-size: var(--ann-msg-size, 0.9375rem);
  font-weight: 700;
  line-height: var(--ann-msg-line, 1.375);
}

.ann-card__name--role {
  --member-role-color: #6b7280;
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground, #000));
}

.dark .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 58%, var(--foreground, #000));
}

.ann-card:hover .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 88%, var(--foreground, #000));
}

.dark .ann-card:hover .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground, #000));
}

.ann-card__time {
  font-size: 0.75rem;
  line-height: var(--ann-msg-line, 1.375);
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.ann-card__content {
  font-size: var(--ann-msg-size, 0.9375rem);
  line-height: var(--ann-msg-line, 1.375);
  margin: 0;
  padding: 0;
  color: var(--foreground, #000);
}

.ann-card__content.ann-markdown {
  color: var(--foreground, #000);
}

.ann-card__content.ann-markdown a.cengel-mention,
.ann-card__content.ann-markdown a.cengel-mention:hover {
  color: #3d4ff0;
  text-decoration: none;
}

.dark .ann-card__content.ann-markdown a.cengel-mention,
.dark .ann-card__content.ann-markdown a.cengel-mention:hover {
  color: #aeb6ff;
}

/* gorsel cerceve — boyut media-frame js + msg-media-frame.css - 14.07.2026 08:54 */

.ann-card__media {
  display: block;
  margin: 4px 0 0;
  max-width: min(100%, 420px);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
}

.ann-card__content > .ann-card__media:first-child {
  margin-top: 0;
}

.ann-card__media-item {
  display: block;
  border-radius: 10px;
  vertical-align: top;
}

.ann-card__media > video.ann-card__media-item {
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  width: auto;
  height: 100%;
}

/* dosya karti stilleri — ann-card-file.css - 20.07.2026 18:15 */

/* footer: sadece begenmisse liked badge gozukur - 23.06.2026 22:25 */

.ann-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  min-height: 0;
}

.ann-card__liked-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: color-mix(in srgb, #ef4444 55%, transparent);
}

.ann-card__liked-badge--active {
  display: flex;
  color: #ef4444;
}

.ann-card__comments {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  margin-top: 10px;
}

/* yorum thread alani — twitter tarz dikey cizgi + bubble - 23.06.2026 22:30 */

.ann-comments {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
}

/* her yorum: avatar sol kolonu + icerik sag kolonu - 23.06.2026 22:30 */

.ann-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 5px 0;
}

/* dikey thread cizgisi: son yorum haric gosterilir - 23.06.2026 22:30 */

.ann-comment__line-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.ann-comment__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  position: relative;
  z-index: 1;
}

.ann-comment__thread-line {
  width: 2px;
  flex: 1;
  min-height: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  margin-top: 2px;
}

.ann-comment:last-child .ann-comment__thread-line {
  display: none;
}

/* icerik kolonu - 23.06.2026 22:30 */

.ann-comment__content-col {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
}

.ann-comment__meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.ann-comment__name {
  font-size: 0.875rem;
  font-weight: 700;
}

.ann-comment__time {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-comment__delete {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  display: flex;
  transition: opacity 0.1s;
}

.ann-comment:hover .ann-comment__delete {
  opacity: 1;
}

.ann-comment__delete:hover {
  color: #ef4444;
}

/* bubble mesaj - 23.06.2026 22:30 */

.ann-comment__bubble {
  display: inline-block;
  max-width: 100%;
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  border-radius: 0 10px 10px 10px;
  padding: 7px 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  word-break: break-word;
}

/* yorum input satiri - 23.06.2026 22:30 */

.ann-comment-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 4px;
}

.ann-comment-input__avatar-col {
  flex-shrink: 0;
  width: 28px;
}

.ann-comment-input__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: block;
}

.ann-comment-input__right {
  flex: 1;
  display: flex;
  gap: 6px;
}

.ann-comment-input__field {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--foreground, #000);
  outline: none;
  transition: border-color 0.15s;
}

.ann-comment-input__field:focus {
  border-color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

.ann-comment-input__send {
  border: none;
  background: var(--foreground, #000);
  color: var(--background, #fff);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.ann-comment-input__send:hover {
  opacity: 0.82;
}

.ann-comment-input__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* kanalda aktif kullanici avatarlari — compose kutusu sag ust sinirinda - 24.06.2026 19:15 */

.ann-compose__box-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 14px auto 0;
}

.ann-compose__viewers {
  position: absolute;
  top: 0;
  right: 16px;
  z-index: 2;
  transform: translateY(-50%);
}

.ann-compose__viewers-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.ann-compose__viewer-btn {
  position: relative;
  display: block;
  flex-shrink: 0;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}

.ann-compose__viewer-btn:first-child {
  margin-left: 0;
}

.ann-compose__viewer-avatar {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  background: var(--background, #fff);
}

.ann-compose__viewer-btn:hover .ann-compose__viewer-avatar {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
}

.ann-markdown strong {
  font-weight: 700;
}

.ann-markdown em {
  font-style: italic;
}

.ann-markdown h1,.ann-markdown h2,.ann-markdown h3 {
  font-weight: 700;
  margin: 8px 0 4px;
}

.ann-markdown h1 {
  font-size: 1.2rem;
}

.ann-markdown h2 {
  font-size: 1.05rem;
}

.ann-markdown h3 {
  font-size: 0.95rem;
}

.ann-markdown p {
  margin: 0.2em 0;
}

.ann-markdown p:first-child {
  margin-top: 0;
}

.ann-markdown p:last-child {
  margin-bottom: 0;
}

.ann-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
}

.ann-markdown pre code {
  font-size: 0.8125rem;
  background: transparent;
  padding: 0;
}

.ann-markdown del {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.ann-markdown a {
  color: var(--foreground, #000);
  text-decoration: underline;
}

.ann-markdown ul {
  padding-left: 20px;
}

.ann-markdown li {
  list-style: disc;
  margin: 2px 0;
}

.ann-markdown ol {
  padding-left: 20px;
}

.ann-markdown ol li {
  list-style: decimal;
  margin: 2px 0;
}

.ann-markdown blockquote {
  margin: 4px 0;
  padding: 6px 12px;
  border-left: 3px solid color-mix(in srgb, var(--foreground, #000) 18%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.ann-markdown blockquote p {
  margin: 2px 0;
}

.ann-markdown hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  margin: 8px 0;
}

.ann-code-block {
  margin: 4px 0 2px;
  max-width: min(100%, 36rem);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
  overflow: hidden;
}

.ann-code-block__body {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ann-code-block__gutter {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 6px 6px 6px 8px;
  min-width: 1.75rem;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: pre;
  border-right: 1px solid color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.ann-code-block__pre {
  margin: 0;
  padding: 6px 8px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  white-space: pre;
}

.ann-code-block__pre code {
  display: block;
  padding: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--foreground, #000);
  white-space: inherit;
}

/* syntax token renkleri — kompakt palette - 16.07.2026 04:52 */

.ann-code-block .token.comment {
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  font-style: italic;
}

.ann-code-block .token.\!comment {
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent) !important;
  font-style: italic !important;
}

.ann-code-block .token.string,
.ann-code-block .token.char,
.ann-code-block .token.attr-value {
  color: #059669;
}

.ann-code-block .token.keyword {
  color: #4f46e5;
}

.ann-code-block .token.number,
.ann-code-block .token.boolean {
  color: #d97706;
}

.ann-code-block .token.function,
.ann-code-block .token.class-name {
  color: #2563eb;
}

.ann-code-block .token.property,
.ann-code-block .token.attr-name {
  color: #0d9488;
}

.ann-code-block .token.tag {
  color: #dc2626;
}

.ann-code-block .token.selector {
  color: #c026d3;
}

.ann-code-block .token.punctuation {
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

.dark .ann-code-block .token.string,
.dark .ann-code-block .token.char,
.dark .ann-code-block .token.attr-value {
  color: #34d399;
}

.dark .ann-code-block .token.keyword {
  color: #a5b4fc;
}

.dark .ann-code-block .token.number,
.dark .ann-code-block .token.boolean {
  color: #fbbf24;
}

.dark .ann-code-block .token.function,
.dark .ann-code-block .token.class-name {
  color: #60a5fa;
}

.dark .ann-code-block .token.property,
.dark .ann-code-block .token.attr-name {
  color: #2dd4bf;
}

.dark .ann-code-block .token.tag {
  color: #f87171;
}

.dark .ann-code-block .token.selector {
  color: #e879f9;
}

/* compose onizleme — caret hizasi icin sade - 16.07.2026 04:52 */

.ann-code-block--compose {
  margin: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ann-code-block--compose code {
  display: inline;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  padding: 0;
}

.ann-markdown > pre:not(.ann-code-block),
.ann-markdown pre:not(.ann-code-block__pre):not(.ann-code-block--compose) {
  margin: 4px 0 0;
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  border-radius: 6px;
  padding: 6px 8px;
  overflow-x: auto;
  white-space: pre;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ann-compose__viewer-avatar:first-child {
  margin-left: 0;
}

.ann-compose__box-wrap:has(.ann-compose__box:focus-within) .ann-compose__viewer-avatar {
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
}

/* compose — sayfanin altina yapisan, discord tarz - 23.06.2026 21:55 */

.ann-compose {
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* solid arka plan — altindaki icerik burayi gecemez - 23.06.2026 21:55 */
  background: var(--background, #fff);
  border-top: none;
  padding: 0 16px 16px;
}

/* ::before compose baslamadan 32px yukari cekilerek sadece gecis bolgesinde fade olusturur - 23.06.2026 21:55 */

.ann-compose::before {
  content: '';
  display: block;
  height: 32px;
  margin: -32px -16px 0;
  pointer-events: none;
  background: var(--background, #fff);
}

.ann-compose__box {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  border-radius: 16px;
  overflow: hidden;
  background: var(--background, #fff);
  transition: border-color 0.15s;
}

.ann-compose__box:focus-within {
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
}

.ann-compose__textarea-wrap {
  position: relative;
}

.ann-compose__textarea {
  width: 100%;
  min-height: 120px;
  max-height: 250px;
  resize: none;
  border: none;
  outline: none;
  padding: 16px 16px 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  background: transparent;
  color: var(--foreground, #000);
  font-family: inherit;
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
}

.ann-compose__textarea::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

.ann-compose__textarea::placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

/* devre disi textarea - yetki yokken - 23.06.2026 23:53 */

.ann-compose__textarea--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  min-height: 56px;
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

.ann-compose__textarea--disabled::-moz-placeholder {
  font-style: italic;
}

.ann-compose__textarea--disabled::placeholder {
  font-style: italic;
}

.ann-compose__preview {
  padding: 16px 16px 10px;
  min-height: 120px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* :not([hidden]) olmadan author-normal display kurali UA'nin [hidden]{display:none}
   kuralini eziyor, medya yokken serit yine de acik gozukuyordu - 01.07.2026 23:55 */

.ann-compose__media-list:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 10px;
}

.ann-compose__file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
}

.ann-compose__file-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-compose__file-type,
.ann-compose__file-size {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

.ann-compose__file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  transition: background 0.1s, color 0.1s;
}

.ann-compose__file-remove:hover {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  color: #ef4444;
}

.ann-compose__meta {
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 1.5%, var(--background, #fff));
}

.ann-compose__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ann-compose__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground, #000) 65%, transparent);
}

.ann-compose__check:hover {
  color: var(--foreground, #000);
}

.ann-compose__check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--foreground, #000);
}

.ann-compose__datetime {
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.875rem;
  background: transparent;
  color: var(--foreground, #000);
  outline: none;
}

.ann-compose__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 1.5%, var(--background, #fff));
}

.ann-compose__toolbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ann-compose__toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ann-compose__tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
  transition: background 0.1s, color 0.1s;
  font-size: 1rem;
}

.ann-compose__tool-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

.ann-compose__charcount {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ann-compose__charcount--over {
  color: #ef4444;
}

.ann-compose__submit {
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ann-compose__submit:hover {
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  color: var(--foreground, #000);
  border-color: color-mix(in srgb, var(--foreground, #000) 24%, transparent);
}

.ann-compose__submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* surukle-birak — kanalda channel-compose-drop.css genisletir - 25.07.2026 00:37 */

.ann-compose--drag .ann-compose__box {
  border-color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

.ann-load-more {
  display: block;
  margin: 4px auto 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

.ann-load-more:hover {
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  color: var(--foreground, #000);
}

/* webhook yonetim modali - 23.06.2026 22:30 */

.ann-wh-panel {
  width: min(920px, calc(100vw - 32px));
  max-width: min(920px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px));
  max-height: min(640px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
}

.ann-wh-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.ann-wh-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
}

.ann-wh-loader[hidden] {
  display: none !important;
}

.ann-wh-loader .space-settings-modal__loader {
  min-height: 0;
  padding: 0;
}

.ann-wh-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 0;
}

.ann-wh-empty-state[hidden] {
  display: none !important;
}

.ann-wh-empty-state__icon {
  width: 5.5rem;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ann-wh-empty-state__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.ann-wh-empty-state__desc {
  margin: 0.375rem 0 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-empty-state__action {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 11rem;
}

.ann-wh-empty-state__action i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
}

.ann-wh-split[hidden] {
  display: none !important;
}

.ann-wh-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.ann-wh-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.ann-wh-side__foot {
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.ann-wh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: Arial, sans-serif;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ann-wh-item:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.ann-wh-item--active {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.ann-wh-item--draft {
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.ann-wh-item--draft.ann-wh-item--active {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.ann-wh-item--draft .ann-wh-item__name {
  font-style: italic;
  font-weight: 600;
}

.ann-wh-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ann-wh-item__logo {
  width: 32px;
  height: 32px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ann-wh-item__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.ann-wh-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.ann-wh-item__name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-wh-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .ann-wh-panel {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }

  .ann-wh-split {
    grid-template-columns: 1fr;
    grid-template-rows: 180px minmax(0, 1fr);
  }

  .ann-wh-side {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  }
}

.ann-wh-detail-idle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.ann-wh-detail-idle[hidden] {
  display: none !important;
}

.ann-wh-detail-idle__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 0;
}

.ann-wh-edit-form[hidden] {
  display: none !important;
}

.ann-wh-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

.ann-wh-edit-form__grid .space-tab-modal__field {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.ann-wh-edit-form__grid .space-tab-modal__input {
  width: 100%;
}

/* notr outline — sidebar olustur + kaydet idle - 16.07.2026 13:22 */

.ann-wh-modal__add,
.ann-wh-edit-form__save--idle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ann-wh-modal__add {
  width: 100%;
  min-height: 40px;
}

.ann-wh-modal__add:hover:not(:disabled):not(.ann-wh-modal__add--locked),
.ann-wh-edit-form__save--idle:hover:not(:disabled) {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.ann-wh-modal__add:disabled,
.ann-wh-modal__add--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.ann-wh-modal__add i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-edit-form__save--idle {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent) !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--foreground) 62%, transparent) !important;
}

.ann-wh-edit-form__save--idle:disabled {
  opacity: 1;
  cursor: default;
}

.ann-wh-edit-form__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ann-wh-edit-form__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ann-wh-edit-form__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ann-wh-edit-form__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-edit-form__title {
  margin: 0.125rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.ann-wh-token {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.ann-wh-token[hidden] {
  display: none !important;
}

.ann-wh-token__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ann-wh-token__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-token__regen {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  transition: color 120ms ease;
}

.ann-wh-token__regen:hover:not(:disabled) {
  color: var(--foreground);
}

.ann-wh-token__regen:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ann-wh-token__ready {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ann-wh-token__ready[hidden],
.ann-wh-token__missing[hidden] {
  display: none !important;
}

.ann-wh-token__code {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.ann-wh-token__sublabel {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-token__row--token .ann-wh-token__code {
  font-size: 0.6875rem;
}

.ann-wh-token__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.ann-wh-copy-btn {
  flex-shrink: 0;
  width: 40px;
  min-height: 40px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.ann-wh-copy-btn:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.ann-wh-copy-btn i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-token__missing-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.ann-wh-info[hidden] {
  display: none !important;
}

.ann-wh-info__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ann-wh-info__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-info__value {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-wh-info__row--creator .ann-wh-info__value {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.ann-wh-creator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: opacity 120ms ease;
}

.ann-wh-creator:hover {
  opacity: 0.82;
}

.ann-wh-creator:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.ann-wh-creator__avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.ann-wh-creator__name {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-wh-edit-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}

.ann-wh-edit-form__save,
.ann-wh-edit-form__delete {
  min-width: 6.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ann-wh-btn-danger {
  border: none !important;
  background: #dc2626 !important;
  color: #fff !important;
}

.ann-wh-btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

@media (max-width: 720px) {
  .ann-wh-edit-form__grid,
    .ann-wh-info {
    grid-template-columns: 1fr;
  }

  .ann-wh-edit-form__actions {
    justify-content: stretch;
  }

  .ann-wh-edit-form__save,
    .ann-wh-edit-form__delete {
    flex: 1;
    min-width: 0;
  }
}

.messages-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.messages-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 2rem 1.5rem;
}

.messages-empty__icon {
  width: 7.5rem;
  height: 7.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1.25rem;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: messages-empty-float 3.2s ease-in-out infinite;
}

.messages-empty__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground, #000);
}

.messages-empty__desc {
  margin: 0.5rem 0 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 45%, transparent));
}

/* empty cta: cengel-btn secondary; sadece spacing - 02.08.2026 00:05 */

.messages-empty__cta {
  margin-top: 1.5rem;
}

@keyframes messages-empty-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .messages-empty__icon {
    animation: none;
  }
}

#account-main-content.account-main--messages .messages-shell {
  flex: 1;
  min-height: 0;
}

#account-main-content.account-main--messages .ann-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ch-channel-intro--dm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

/* isim + baslangic metni — title margin ile gap ciftlenmesin - 22.07.2026 05:39 */

.ch-channel-intro--dm .ch-channel-intro__title {
  margin-bottom: 0;
}

.ch-channel-intro--dm .ch-channel-intro__lead {
  margin-bottom: 0;
}

/* dm intro — isim yaninda rozetler - 22.07.2026 05:31 */

.ch-channel-intro--dm .ch-channel-intro__badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
}

.ch-channel-intro--dm .ch-channel-intro__badges .uf-badge {
  margin-left: 0;
}

.ch-channel-intro--dm .ch-channel-intro__badges .uf-badge__img {
  width: 26px;
  height: 26px;
  max-height: 26px;
}

.ch-channel-intro__avatar-wrap {
  margin-bottom: 0.25rem;
}

.ch-channel-intro__avatar-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: block;
}

.ch-channel-intro__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ch-channel-intro__avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  font-size: 2rem;
}

@media (max-width: 1023.98px) {
  .messages-shell {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .messages-sidebar {
    position: absolute;
    inset: 0;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-right: none;
    z-index: 2;
    background: var(--account-split-sidebar-bg, var(--background));
  }

  .messages-main {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--background, #fff);
  }

  .messages-shell[data-mobile-pane="list"] .messages-main {
    visibility: hidden;
    pointer-events: none;
  }

  .messages-shell[data-mobile-pane="list"] .messages-sidebar {
    visibility: visible;
    pointer-events: auto;
  }

  .messages-shell[data-mobile-pane="detail"] .messages-sidebar {
    visibility: hidden;
    pointer-events: none;
  }

  .messages-shell[data-mobile-pane="detail"] .messages-main {
    visibility: visible;
    pointer-events: auto;
    z-index: 3;
  }

  .messages-mobile-bar {
    display: none !important;
  }

  #account-main-content.account-main--messages .ann-compose {
    padding-bottom: max(0.5rem, var(--safe-area-bottom));
  }

  #account-main-content.account-main--messages .ann-intro,
    #account-main-content.account-main--messages .space-channel-intro {
    padding-top: 0.75rem;
  }

  #account-main-content.account-main--messages .ann-intro__title,
    #account-main-content.account-main--messages .space-channel-intro__name {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .messages-mobile-bar {
    display: none !important;
  }

  .messages-shell[data-mobile-pane] .messages-sidebar,
    .messages-shell[data-mobile-pane] .messages-main {
    visibility: visible;
    pointer-events: auto;
    position: static;
  }
}

.new-dm-modal__panel {
  --new-dm-inset-x: 1rem;
  --new-dm-row-gap: 0.25rem;
  width: min(420px, calc(100vw - 2rem));
  height: min(520px, calc(100vh - 4rem));
  max-height: min(520px, calc(100vh - 4rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-align: left;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 18px;
}

.new-dm-modal__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.875rem var(--new-dm-inset-x) 0.5rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
  flex-shrink: 0;
}

.new-dm-modal__search-wrap:focus-within {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

.new-dm-modal__search {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--foreground, #000);
}

.new-dm-modal__search::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.new-dm-modal__search::placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.new-dm-modal__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25rem calc(var(--new-dm-inset-x) - 0.375rem) 0.875rem;
  display: flex;
  flex-direction: column;
  gap: var(--new-dm-row-gap);
}

.new-dm-modal__item.space-member-row {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: 0.5rem 0.625rem;
  gap: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color 120ms ease;
}

.new-dm-modal__item.space-member-row:hover,
.new-dm-modal__item.space-member-row:focus-visible {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  outline: none;
}

.new-dm-modal__item .space-member-row__avatar-wrap,
.new-dm-modal__item .space-member-row__avatar {
  width: 40px;
  height: 40px;
}

.new-dm-modal__item .space-member-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.new-dm-modal__username {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
}

.new-dm-modal__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: 0;
  padding: 1.5rem 1.25rem;
  min-height: 100%;
  text-align: center;
  box-sizing: border-box;
}

.new-dm-modal__empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: new-dm-modal-empty-float 3.2s ease-in-out infinite;
}

.new-dm-modal__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  max-width: 15rem;
}

.new-dm-modal__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 88%, transparent);
}

.new-dm-modal__empty-desc {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.new-dm-modal__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--new-dm-row-gap);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1 1 auto;
  min-height: 0;
}

.new-dm-modal__list .space-member-row--skel {
  cursor: default;
  pointer-events: none;
}

.new-dm-modal__list .space-member-row--skel:hover {
  background: transparent;
}

.new-dm-modal__list .space-member-row--skel .space-member-row__name-line {
  width: 100%;
}

.new-dm-modal__list .space-member-row--skel .space-member-row__name-line .space-member-row__name {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 1.05rem;
}

.new-dm-modal__list .space-member-row--skel .space-members-panel__skel-bone--name {
  width: 8.5rem;
  max-width: 100%;
  margin: 0;
}

.new-dm-modal__list .space-member-row--skel .space-members-panel__skel-bone--name-sm {
  width: 5.75rem;
}

.new-dm-modal__list .space-member-row--skel .space-members-panel__skel-bone--name-md {
  width: 8.5rem;
}

.new-dm-modal__list .space-member-row--skel .space-members-panel__skel-bone--name-lg {
  width: 11rem;
}

.new-dm-modal__list .space-member-row--skel .space-members-panel__skel-bone--status {
  width: 6.5rem;
  max-width: 100%;
  margin: 0;
}

.new-dm-modal__list .space-member-row--skel .space-member-row__avatar.space-members-panel__skel-bone--avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

@keyframes new-dm-modal-empty-float {
  0%,
    100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-dm-modal__empty-icon {
    animation: none;
  }
}

.messages-sidebar {
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --sp-tab-row-pad-x: 0.5rem;
  --sp-tab-row-margin-x: calc(var(--sp-sidebar-inset-x) - var(--sp-tab-row-pad-x));
  --account-sidebar-inner-x: var(--sp-sidebar-inset-x);
  width: var(--account-split-sidebar-w);
  min-width: var(--account-split-sidebar-w);
  max-width: var(--account-split-sidebar-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--eco-header-border, var(--border));
  flex-shrink: 0;
  align-self: stretch;
  /* min-height:auto icerik kadar buyurur — scroll kilitlenir - 22.07.2026 06:00 */
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--account-split-sidebar-bg, var(--background, #fff));
}

/* ust/alt pad — divider oncesi simetri - 22.07.2026 06:05 */

.messages-sidebar__header {
  flex-shrink: 0;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}

/* yeni mesaj — squircle, sidebar grisine karsi beyaz dolgu - 01.11.2026 22:00 */

.messages-sidebar__new-action.spaces-sb-user__row {
  flex-shrink: 0;
  margin: 0 var(--spaces-sb-user-row-margin-x, var(--sp-tab-row-margin-x));
  width: calc(100% - 2 * var(--spaces-sb-user-row-margin-x, var(--sp-tab-row-margin-x)));
  max-width: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.messages-sidebar__new-action:hover {
  background-color: var(--sidebar-hover-bg);
}

.messages-sidebar__new-action[aria-expanded="true"],
.messages-sidebar__new-action[aria-expanded="true"]:hover {
  background-color: var(--sidebar-active-bg);
}

.messages-sidebar__new-action .space-member-row__name {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  transition: color 120ms ease;
}

.messages-sidebar__new-action:hover .space-member-row__name,
.messages-sidebar__new-action[aria-expanded="true"] .space-member-row__name {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.messages-sidebar__new-action .space-member-row__name-line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.messages-sidebar__new-action .space-member-row__meta {
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.messages-sidebar__new-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 30%;
  corner-shape: squircle;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 8%, var(--background, #fff));
  border: 1px solid var(--border-strong);
  color: var(--foreground);
  transition: color 120ms ease, background-color 120ms ease;
}

html.dark .messages-sidebar__new-icon {
  background: color-mix(in srgb, var(--foreground) 14%, var(--account-split-sidebar-bg, #1b1b1f));
  border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
}

.messages-sidebar__new-action:hover .messages-sidebar__new-icon,
.messages-sidebar__new-action[aria-expanded="true"] .messages-sidebar__new-icon {
  background: color-mix(in srgb, var(--foreground) 12%, var(--background, #fff));
}

html.dark .messages-sidebar__new-action:hover .messages-sidebar__new-icon,
html.dark .messages-sidebar__new-action[aria-expanded="true"] .messages-sidebar__new-icon {
  background: color-mix(in srgb, var(--foreground) 20%, var(--account-split-sidebar-bg, #1b1b1f));
}

.messages-sidebar__new-icon-glyph {
  font-size: 1rem;
  line-height: 1;
}

.dm-list {
  --dm-list-row-gap: 1px;
  /* ince + hover thumb — sidebar listesi - 22.07.2026 06:05 */
  --cengel-scroll-size: 5px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 16%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 32%, transparent);
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* divider alti = header alti / footer usti - 22.07.2026 06:10 */
  padding: 0.5rem 0 calc(var(--sidebar-gap) * 0.5);
  display: flex;
  flex-direction: column;
  gap: var(--dm-list-row-gap);
}

.dm-list.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.375rem 0;
}

.dm-list.cengel-scroll::-webkit-scrollbar-thumb {
  border-width: 1px;
}

/* yeni mesaj butonu ile ayni genislik / hover - 22.07.2026 06:00 */

.dm-list .dm-list__item.spaces-sb-user__row {
  flex-shrink: 0;
  margin: 0 var(--spaces-sb-user-row-margin-x);
  width: calc(100% - 2 * var(--spaces-sb-user-row-margin-x));
  max-width: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.dm-list .dm-list__item.space-member-row--skel {
  cursor: default;
  pointer-events: none;
}

.dm-list .dm-list__item.space-member-row--skel:hover {
  background-color: transparent;
}

/* name-line flex shrink-wrap: % bone genisligi 0 olur — sabit rem - 03.08.2026 04:12 */

.dm-list .space-member-row--skel .space-member-row__name-line {
  width: 100%;
}

.dm-list .space-member-row--skel .space-member-row__name-line .space-member-row__name {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 1.05rem;
}

.dm-list .space-member-row--skel .space-members-panel__skel-bone--name {
  width: 7.5rem;
  max-width: 100%;
  margin: 0;
}

.dm-list .space-member-row--skel .space-members-panel__skel-bone--name-sm {
  width: 5.25rem;
}

.dm-list .space-member-row--skel .space-members-panel__skel-bone--name-md {
  width: 7.5rem;
}

.dm-list .space-member-row--skel .space-members-panel__skel-bone--name-lg {
  width: 9.5rem;
}

.dm-list .space-member-row--skel .space-members-panel__skel-bone--status {
  width: 5.5rem;
  max-width: 100%;
  margin: 0;
}

.dm-list .space-member-row--skel .space-member-row__avatar.space-members-panel__skel-bone--avatar {
  display: block;
  flex-shrink: 0;
}

.dm-list .dm-list__item:hover {
  background-color: var(--sidebar-hover-bg);
}

.dm-list .dm-list__item--active,
.dm-list .dm-list__item--active:hover {
  background-color: var(--sidebar-active-bg);
}

.dm-list .dm-list__item--unread .space-member-row__name {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.dm-list .space-member-row__name {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* okunmus: cok hafif soluk — unread/active/hover tam - 22.07.2026 15:30 */
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  transition: color 120ms ease;
}

.dm-list .dm-list__item--active .space-member-row__name,
.dm-list .dm-list__item:hover .space-member-row__name {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

/* isim + sistem rozeti — hover/active satirda erimesin - 22.07.2026 06:00 */

.dm-list .space-member-row__name-line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.dm-list .space-member-row__name-line .space-member-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-list .space-member-row__name-line .cengel-bot-tag {
  flex-shrink: 0;
  --dm-bot-surface: var(--account-split-sidebar-bg, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground) 20%, var(--dm-bot-surface));
  background: color-mix(in srgb, var(--foreground) 11%, var(--dm-bot-surface));
  color: color-mix(in srgb, var(--foreground) 72%, var(--dm-bot-surface));
}

.dm-list .dm-list__item:hover .cengel-bot-tag {
  --dm-bot-surface: color-mix(
        in srgb,
        var(--foreground) 5%,
        var(--account-split-sidebar-bg, var(--background, #fff))
    );
  border-color: color-mix(in srgb, var(--foreground) 24%, var(--dm-bot-surface));
  background: color-mix(in srgb, var(--foreground) 14%, var(--dm-bot-surface));
  color: color-mix(in srgb, var(--foreground) 78%, var(--dm-bot-surface));
}

.dm-list .dm-list__item--active .cengel-bot-tag,
.dm-list .dm-list__item--active:hover .cengel-bot-tag {
  --dm-bot-surface: color-mix(
        in srgb,
        var(--foreground) 9%,
        var(--account-split-sidebar-bg, var(--background, #fff))
    );
  border-color: color-mix(in srgb, var(--foreground) 26%, var(--dm-bot-surface));
  background: color-mix(in srgb, var(--foreground) 16%, var(--dm-bot-surface));
  color: color-mix(in srgb, var(--foreground) 80%, var(--dm-bot-surface));
}

html.dark .dm-list .dm-list__item:hover .cengel-bot-tag {
  --dm-bot-surface: color-mix(
        in srgb,
        var(--foreground) 7%,
        var(--account-split-sidebar-bg, var(--background, #fff))
    );
}

html.dark .dm-list .dm-list__item--active .cengel-bot-tag,
html.dark .dm-list .dm-list__item--active:hover .cengel-bot-tag {
  --dm-bot-surface: color-mix(
        in srgb,
        var(--foreground) 12%,
        var(--account-split-sidebar-bg, var(--background, #fff))
    );
}

.dm-list .space-member-row__status {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.dm-list .space-member-row__meta {
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.dm-list .space-member-row__avatar-wrap,
.dm-list .space-member-row__avatar {
  width: 36px;
  height: 36px;
}

.dm-list__unread {
  /* notr gri sayi; mention = kirmizi - 22.07.2026 06:00 */
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 22%, transparent);
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.dm-list__unread--mention {
  background: #ed4245;
  color: #ffffff;
}

.dm-list__item--active .dm-list__unread {
  display: none;
}

.dm-list__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: 0;
  padding: 1.75rem 1.125rem;
  min-height: 11rem;
  text-align: center;
  box-sizing: border-box;
}

.dm-list__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--dm-list-row-gap, 1px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1 1 auto;
  min-height: 0;
}

.dm-list__empty-icon {
  width: 3.75rem;
  height: 3.75rem;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: dm-list-empty-float 3.2s ease-in-out infinite;
}

.dm-list__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  max-width: 11.5rem;
}

.dm-list__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.dm-list__empty-desc {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

@keyframes dm-list-empty-float {
  0%,
    100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-list__empty-icon {
    animation: none;
  }
}

/* toolbar — filtreler feed ile sola hizali - 15.08.2026 16:10 */

.bm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* url compose — giris altinda tek satir - 15.08.2026 15:45 */

.bm-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 0.375rem 0 1rem;
  border-radius: var(--sidebar-r);
  border: 1px solid var(--border);
  background: var(--background);
  transition: border-color 140ms ease;
}

.bm-add-form:focus-within {
  border-color: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.bm-add-form__icon {
  font-size: 1.0625rem;
  flex-shrink: 0;
  color: var(--ink-muted);
  pointer-events: none;
}

.bm-add-form__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  height: 100%;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--foreground);
  outline: none;
  font-family: inherit;
}

.bm-add-form__input::-moz-placeholder {
  color: var(--ink-muted);
}

.bm-add-form__input::placeholder {
  color: var(--ink-muted);
}

/* cta chrome: cengel-btn; layout hook only - 02.08.2026 00:05 */

.bm-add-form__btn {
  flex-shrink: 0;
}

/* ── filtre sekmeleri — dolu-aktif segment gorunumu - 08.07.2026 05:40 */

.bm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--surface-subtle);
  flex-shrink: 0;
}

.bm-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--sidebar-item-r);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.bm-filter-btn:hover {
  color: var(--foreground);
}

.bm-filter-btn--active {
  background: var(--background);
  color: var(--foreground);
}

/* ── masonry feed — daha genis kartlar, daha az sutun - 10.07.2026 05:15 */

.bm-feed {
  -moz-columns: 5 280px;
       columns: 5 280px;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.bm-feed:empty {
  display: none;
}

@media (max-width: 1400px) {
  .bm-feed {
    -moz-columns: 4 260px;
         columns: 4 260px;
  }
}

@media (max-width: 1024px) {
  .bm-feed {
    -moz-columns: 3 240px;
         columns: 3 240px;
  }
}

@media (max-width: 640px) {
  .bm-feed {
    -moz-columns: 2 160px;
         columns: 2 160px;
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
}

/* pin karti — ortak yuzey ve spacing - 17.07.2026 01:08 */

.bm-card {
  --bm-card-pad: 0.875rem;
  --bm-corner-inset: 0.75rem;
  --bm-chip-h: 28px;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow: visible;
  transition: border-color 160ms ease;
}

.bm-card:hover {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.bm-card:has(.bm-card__menu[data-cengel-menu-open="1"]),
.bm-card:has(.bm-card__menu-trigger[aria-expanded="true"]) {
  z-index: 1000;
}

.bm-card [data-overflow-dropdown-panel] {
  z-index: 10100;
}

/* medya — summary_large_image ustte tam genislik - 12.07.2026 22:51 */

.bm-card__media {
  position: relative;
  display: block;
  width: 100%;
  background: var(--surface-subtle);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.bm-card__img {
  width: 100%;
  height: auto;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.bm-card__media-action {
  position: absolute;
  top: var(--bm-corner-inset);
  right: var(--bm-corner-inset);
  z-index: 2;
}

.bm-card__media-action .bm-card__menu-trigger {
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  color: var(--foreground);
  opacity: 1;
}

/* kaynak rozeti — tek urun chip - 14.07.2026 07:50 */

.bm-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  box-sizing: border-box;
  height: var(--bm-chip-h);
  padding: 0 0.625rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--foreground);
  text-decoration: none;
  flex-shrink: 0;
}

.bm-card__badge i {
  font-size: 0.6875rem;
  line-height: 1;
  flex-shrink: 0;
}

.bm-card__media .bm-card__badge {
  position: absolute;
  top: var(--bm-corner-inset);
  left: var(--bm-corner-inset);
}

.bm-card__badge--inline {
  position: static;
}

/* ust satir — origin meta veya urun rozeti + menu - 16.07.2026 07:35 */

.bm-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--bm-chip-h);
}

.bm-card__top-start {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}

.bm-card__origin-row {
  min-width: 0;
}

.bm-card__origin {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  overflow: hidden;
}

.bm-card__origin-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.bm-card__origin-icon {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.bm-card__origin-space {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}

a.bm-card__origin-space:hover {
  color: var(--foreground);
}

.bm-card__origin-sep {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  opacity: 0.45;
  flex-shrink: 0;
}

.bm-card__origin-channel {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

a.bm-card__origin-channel:hover {
  color: var(--foreground);
}

/* uc nokta overflow menusu - 12.07.2026 22:51 */

.bm-card__menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.bm-card__menu-trigger {
  width: var(--bm-chip-h);
  height: var(--bm-chip-h);
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
  font-size: 1rem;
}

.bm-card:hover .bm-card__menu-trigger,
.bm-card__menu[data-cengel-menu-open="1"] .bm-card__menu-trigger {
  opacity: 1;
}

.bm-card__menu-trigger:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

/* govde — large / summary / message / link ayni padding ve gap - 17.07.2026 01:08 */

.bm-card__body {
  padding: var(--bm-card-pad);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bm-card__main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.bm-card--summary .bm-card__main {
  align-items: center;
}

.bm-card__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.bm-card__title-link {
  text-decoration: none;
}

.bm-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bm-card__title-link:hover .bm-card__title {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.bm-card__desc {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* summary thumb — tum summary kartlarda ayni olcu - 17.07.2026 01:08 */

.bm-card__thumb-wrap {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-subtle);
}

.bm-card__thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* bos durum — masonry'yi span'ler, kart kabuugu yok - 15.08.2026 15:45 */

.bm-empty {
  -moz-column-span: all;
       column-span: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}

.bm-empty__icon {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.bm-empty__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
}

.bm-empty__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
  max-width: 26rem;
}

/* ── yukleniyor noktalari ──────────────────────────────────────── */

.bm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 2rem;
}

.bm-loading[hidden] {
  display: none;
}

.bm-loading__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 30%, transparent);
  animation: bm-dot-pulse 1.2s ease-in-out infinite;
}

.bm-loading__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.bm-loading__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bm-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-loading__dot {
    animation: none;
  }
}

/* ── sentinel (infinite scroll referans noktasi) ───────────────── */

.bm-sentinel {
  height: 1px;
}

#account-main-content.account-main--bookmarks {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.account-split__scroll:has(#account-main-content.account-main--bookmarks) {
  overflow: hidden;
  align-items: stretch;
  background: var(--background, #fff);
}

.account-split__scroll:has(#account-main-content.account-main--bookmarks) > .account-split__content-pad {
  max-width: none;
  width: 100%;
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background, #fff);
}

.bm-shell {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.bm-sidebar {
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --sp-tab-row-pad-x: 0.5rem;
  --sp-tab-row-margin-x: calc(var(--sp-sidebar-inset-x) - var(--sp-tab-row-pad-x));
  --spaces-sb-user-pad-x: var(--sp-sidebar-inset-x);
  --spaces-sb-user-row-pad-x: 0.5rem;
  --spaces-sb-user-row-margin-x: calc(var(--spaces-sb-user-pad-x) - var(--spaces-sb-user-row-pad-x));
  --account-sidebar-inner-x: var(--sp-sidebar-inset-x);
  --bm-col-row-gap: 1px;
  width: var(--account-split-sidebar-w);
  min-width: var(--account-split-sidebar-w);
  max-width: var(--account-split-sidebar-w);
  display: none;
  flex-direction: column;
  border-right: 1px solid var(--eco-header-border, var(--border));
  flex-shrink: 0;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--account-split-sidebar-bg, var(--background, #fff));
}

.bm-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem var(--sp-sidebar-inset-x) 0.35rem;
}

.bm-sidebar__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: Arial, sans-serif;
}

.bm-sidebar__new {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  border-radius: 8px;
}

.bm-sidebar__body {
  --cengel-scroll-size: 5px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 16%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 32%, transparent);
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 calc(var(--sidebar-gap, 0.5rem) * 0.5);
  display: flex;
  flex-direction: column;
  gap: var(--bm-col-row-gap);
}

.bm-sidebar__body.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.375rem 0;
}

.bm-sidebar__body.cengel-scroll::-webkit-scrollbar-thumb {
  border-width: 1px;
}

.bm-col-nav {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 var(--spaces-sb-user-row-margin-x);
  width: calc(100% - 2 * var(--spaces-sb-user-row-margin-x));
  max-width: none;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  padding: 0.5rem;
  border-radius: var(--sidebar-item-r, 10px);
  cursor: pointer;
  transition: background-color 120ms ease;
  font: inherit;
}

.bm-col-nav:hover {
  background: var(--sidebar-hover-bg, var(--surface-subtle));
}

.bm-col-nav--on {
  background: var(--sidebar-active-bg, var(--surface-subtle));
}

.bm-col-nav__dot,
.bm-col-head__dot,
.bm-col-chip__dot,
.bm-col-choice__dot {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.bm-col-nav__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  transition: color 120ms ease;
  font-family: Arial, sans-serif;
}

.bm-col-nav:hover .bm-col-nav__name {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.bm-col-nav--on .bm-col-nav__name {
  color: var(--foreground);
  font-weight: 600;
}

.bm-col-nav__count {
  font-size: 0.75rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  font-variant-numeric: tabular-nums;
  font-family: Arial, sans-serif;
}

.bm-col-nav--on .bm-col-nav__count {
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.bm-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--account-split-inner-pad) var(--account-split-inner-pad-x);
  padding-bottom: 2rem;
}

.bm-col-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.bm-col-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.bm-col-chip--on {
  background: var(--surface-subtle);
}

.bm-col-chip--add {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
}

.bm-col-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bm-col-head[data-default="1"] [data-action="bm-col-rename"],
.bm-col-head[data-default="1"] [data-action="bm-col-delete"] {
  display: none;
}

.bm-col-head__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .bm-sidebar {
    display: flex;
  }

  .bm-col-strip {
    display: none;
  }
}

@media (max-width: 1023px) {
  .bm-main {
    gap: 1.25rem;
  }
}

.bm-col-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 16rem;
  overflow-y: auto;
}

.bm-col-choice {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-radius: var(--sidebar-item-r, 10px);
  cursor: pointer;
  color: var(--foreground);
}

.bm-col-choice:hover {
  background: var(--surface-subtle);
}

.bm-col-choice--on {
  background: var(--surface-subtle);
}

.bm-col-choice__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.bm-col-create-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0;
}

.bm-col-create {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bm-col-field__label {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.bm-col-field__input {
  width: 100%;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--sidebar-r, 12px);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
  font: inherit;
}

.bm-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bm-color-swatch {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.bm-color-swatch--on {
  border-color: var(--foreground);
}

.bm-ask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.bm-ask-row__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.bm-ask-row__hint {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.bm-ask-switch {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--border);
  cursor: pointer;
}

.bm-ask-switch--on {
  background: var(--foreground);
}

.bm-ask-switch__knob {
  pointer-events: none;
  display: inline-block;
  height: 18px;
  width: 18px;
  border-radius: 999px;
  background: var(--background);
  margin-left: 0.125rem;
  transition: margin-left 140ms ease;
}

.bm-ask-switch--on .bm-ask-switch__knob {
  margin-left: 22px;
}

.bm-col-modal {
  padding: 0 1.25rem 1.25rem;
}

.bm-col-modal__panel {
  width: min(26rem, calc(100vw - 2rem));
}

.bm-col-modal__actions {
  margin-top: 1.15rem;
  display: flex;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .bm-ask-switch__knob {
    transition: none;
  }
}

.bm-head {
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
}

.bm-head .spaces-home__hero-copy,
.bm-head .bm-add-form--head {
  position: relative;
  z-index: 1;
}

.bm-add-form--head {
  flex: none;
  width: 100%;
  max-width: 32rem;
  min-width: 0;
}

@media (max-width: 640px) {
  .bm-add-form--head {
    max-width: none;
  }
}

/* kart ici mesaj kabugu — cift border yok, soft yuzey - 17.07.2026 01:08 */

.bm-card__msg-frame {
  padding: 0.375rem 0.5rem;
  border-radius: 10px;
  border: 0;
  background: var(--surface-subtle);
  min-width: 0;
  overflow: visible;
}

.bm-card__msg-list.ann-feed__list {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.bm-card__msg-frame .ann-card {
  margin: 0;
  padding: 0.25rem 0.125rem;
  background: transparent;
  border: none;
}

.bm-card__msg-frame .ann-card:hover {
  background: transparent;
}

/* dar sutunda tarih alt satira dusmesin - 17.07.2026 01:08 */

.bm-card__msg-frame .ann-card__header-row {
  flex-wrap: nowrap;
  align-items: baseline;
  min-width: 0;
}

.bm-card__msg-frame .ann-card__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-card__msg-frame .ann-card__time,
.bm-card__msg-frame .ann-card__edited,
.bm-card__msg-frame .cengel-bot-tag {
  flex-shrink: 0;
  white-space: nowrap;
}

/* mesaj metni — 6 satir trim; gorsel boyutu korunur - 17.07.2026 01:08 */

.bm-card__msg-frame .ann-card__content:not(:has(.ann-card__media)) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.bm-card__msg-missing {
  margin: 0;
  padding: 0.375rem 0.125rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.bm-card--message {
  overflow: visible;
}

.bm-card--link .bm-card__desc {
  -webkit-line-clamp: 4;
}

.bm-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.bm-card__shared {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3125rem 0.4375rem;
  min-width: 0;
  flex: 1 1 auto;
}

.bm-card__shared-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.bm-card__attribution {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.bm-card__attr-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.bm-card__attr-name {
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.bm-card__attr-name:hover,
.bm-card__attr-name--trigger:hover {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.bm-card__attr-name--trigger {
  cursor: pointer;
}

.bm-card__attribution .cengel-bot-tag {
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: 0.5625rem;
}

.bm-card__saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--ink-muted);
}

.bm-card__saved > i {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.85;
}

.bm-card__saved-label {
  font-size: 0.6875rem;
  font-weight: 500;
}

.bm-card__saved-time {
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  cursor: default;
  white-space: nowrap;
}

.bm-card__saved-time:hover,
.bm-card__saved-time:focus-visible {
  color: var(--foreground);
  outline: none;
}

.games-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.games-sidebar {
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --sp-tab-row-pad-x: 0.5rem;
  --sp-tab-row-margin-x: calc(var(--sp-sidebar-inset-x) - var(--sp-tab-row-pad-x));
  --account-sidebar-inner-x: var(--sp-sidebar-inset-x);
  width: var(--account-split-sidebar-w);
  min-width: var(--account-split-sidebar-w);
  max-width: var(--account-split-sidebar-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--eco-header-border, var(--border));
  flex-shrink: 0;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--account-split-sidebar-bg, var(--background, #fff));
}

.games-sidebar__body {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* ust pad yalnizca .games-list — body ile ciftlenmesin - 30.07.2026 11:50 */
  padding-top: 0;
}

.games-list {
  --games-list-row-gap: 1px;
  --cengel-scroll-size: 5px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 16%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 32%, transparent);
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* messages .dm-list ile ayni — ekstra top/bottom yok - 30.07.2026 11:50 */
  padding: 0.5rem 0 calc(var(--sidebar-gap, 0.5rem) * 0.5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--games-list-row-gap);
}

.games-list.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.375rem 0;
}

.games-list.cengel-scroll::-webkit-scrollbar-thumb {
  border-width: 1px;
}

.games-list .games-list__item.spaces-sb-user__row {
  flex-shrink: 0;
  margin: 0 var(--spaces-sb-user-row-margin-x);
  width: calc(100% - 2 * var(--spaces-sb-user-row-margin-x));
  max-width: none;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.games-list .games-list__item:hover {
  background-color: var(--sidebar-hover-bg);
}

.games-list .space-member-row__name {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  transition: color 120ms ease;
}

.games-list .games-list__item:hover .space-member-row__name {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

/* devam eden — sadece daha parlak isim - 26.07.2026 05:15 */

.games-list .games-list__item--active .space-member-row__name {
  color: var(--foreground);
}

.games-list .games-list__item--active:hover .space-member-row__name {
  color: var(--foreground);
}

.games-list__section {
  display: flex;
  flex-direction: column;
  gap: var(--games-list-row-gap);
}

.games-list__section[hidden] {
  display: none;
}

.games-list__section-label {
  margin: 0;
  /* ilk bolum: list pad yeter; sonraki bolumlerde ust pay - 30.07.2026 11:50 */
  padding: 0.25rem var(--sp-sidebar-inset-x) 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.games-list__section:not([hidden]) + .games-list__section .games-list__section-label {
  padding-top: 0.65rem;
}

.games-list__section-items {
  display: flex;
  flex-direction: column;
  gap: var(--games-list-row-gap);
}

.games-list .space-member-row__name-line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.games-list .space-member-row__name-line .space-member-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-list .space-member-row__status {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.games-list .space-member-row__meta {
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.games-list .space-member-row__avatar-wrap,
.games-list .space-member-row__avatar {
  width: 36px;
  height: 36px;
}

/* oyun logosu — daire degil squircle - 25.07.2026 21:20 */

.games-list__avatar-wrap {
  border-radius: 30%;
  corner-shape: squircle;
  overflow: hidden;
}

.games-list__avatar {
  border-radius: 30%;
  corner-shape: squircle;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.games-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.games-main__pad {
  width: 100%;
  max-width: 58rem;
  padding: var(--account-split-inner-pad);
  box-sizing: border-box;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#account-main-content.account-main--games {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  background:
      radial-gradient(
        90% 50% at 80% -10%,
        color-mix(in srgb, var(--foreground) 5%, transparent),
        transparent 60%
      ),
      var(--background, #fff);
}

.account-split__scroll:has(#account-main-content.account-main--games) {
  overflow: hidden;
  align-items: stretch;
  background: var(--background, #fff);
}

.account-split__scroll:has(#account-main-content.account-main--games) > .account-split__content-pad {
  max-width: none;
  width: 100%;
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background, #fff);
}

#account-main-content.account-main--games .games-shell {
  flex: 1;
  min-height: 0;
}

@media (max-width: 1023.98px) {
  .games-shell {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .games-shell > .games-sidebar {
    display: none;
  }

  .games-main,
    .games-shell--play > .game-play {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    background: var(--background, #fff);
  }

  .games-mobile-bar {
    display: none !important;
  }

  .games-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--touch-target-min);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--eco-header-border, var(--border));
    flex-shrink: 0;
  }

  .games-sidebar__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--foreground);
  }

  .games-sidebar__close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--foreground);
    border-radius: var(--radius-control, 0.5rem);
    cursor: pointer;
  }
}

@media (min-width: 1024px) {
  .games-mobile-bar,
    .games-sidebar__header {
    display: none !important;
  }

  .games-shell--play > .games-sidebar {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  #spaces-sidebar.account-desktop-sidebar {
    display: none !important;
  }

  .spaces-mobile-nav,
    .space-channel-mobile-bar {
    display: none !important;
  }

  /* kolon display:none iken fixed panel de gorunmez - 09.08.2026 08:55 */

  body.space-members-mobile-open #spaceMembersPanelColumn,
    #spaceMembersPanelColumn:has(#spaceMembersPanel[data-mobile-open="true"]) {
    display: contents !important;
  }

  body.space-members-mobile-open .space-members-panel__toggle-anchor,
    #spaceMembersPanelColumn:has(#spaceMembersPanel[data-mobile-open="true"])
        .space-members-panel__toggle-anchor {
    display: none !important;
  }

  #spaceMembersPanel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    z-index: 10036;
    display: none;
    background: var(--background, #fff);
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
  }

  #spaceMembersPanel[data-mobile-open="true"],
    body.space-members-mobile-open #spaceMembersPanel {
    display: flex !important;
    flex-direction: column;
  }

  .space-members-panel__mobile-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--foreground);
    border-radius: var(--radius-control, 0.5rem);
    cursor: pointer;
    flex-shrink: 0;
  }

  .space-members-panel__header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  /* reply feed↔thread single pane - 09.08.2026 08:45 */

  #space-ch-page.ann-page--split[data-mobile-pane="feed"] #ann-reply-pane,
    #space-ch-page.ann-page--split[data-mobile-pane="feed"] .ann-reply-pane {
    display: none !important;
  }

  #space-ch-page.ann-page--split[data-mobile-pane="reply"] [data-channel-pane="space"],
    #space-ch-page.ann-page--split[data-mobile-pane="reply"] .ann-feed-pane {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .spaces-mobile-nav,
    .space-channel-mobile-bar,
    .space-members-panel__mobile-close {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .bookmarks-masonry,
    .bookmarks-grid,
    [data-bookmarks-grid] {
    -moz-column-count: 1 !important;
         column-count: 1 !important;
    grid-template-columns: 1fr !important;
  }

  .spaces-home-grid,
    .spaces-list-grid,
    .games-hub-grid {
    grid-template-columns: 1fr !important;
  }

  .account-profile-banner,
    .social-profile-card,
    .social-profile-public {
    border-radius: 0;
  }

  .account-profile-banner__cover,
    .social-profile-card__cover {
    min-height: 120px;
    max-height: 160px;
  }

  .auth-page-shell,
    .auth-card,
    .login-card,
    .register-card {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    border-radius: 0;
  }

  .auth-page-shell .auth-actions,
    .login-form-actions,
    .register-form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .auth-page-shell .auth-actions .cengel-btn,
    .login-form-actions .cengel-btn,
    .register-form-actions .cengel-btn {
    width: 100%;
  }

  .spark-feature-grid,
    .wall-feed,
    .wall-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem;
  }

  .cengel-modal__panel,
    .cengel-modal .cengel-modal-panel {
    max-width: 100vw;
    max-height: 100dvh;
  }

  .cengel-menu,
    .cengel-menu--anchored,
    .overflow-menu,
    .user-card-popover,
    .emoji-picker,
    .mention-compose-menu {
    max-width: min(100vw - 1rem, 24rem);
  }
}

@media (max-width: 639.98px) {
  .spaces-home-hero,
    .games-hub-hero {
    padding-inline: 1rem;
  }

  .account-feature-tile,
    .spark-tile {
    min-height: 0;
  }
}

.games-hub {
  --games-accent: #1a7a4c;
  --games-surface: color-mix(in srgb, var(--foreground) 3.5%, var(--background));
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  padding: 0 0 3rem;
}

.games-hub__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.25rem;
}

.games-hub__title {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--foreground);
}

.games-hub__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 40rem;
}

.games-hub__section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.games-hub__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.games-hub__section-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.games-hub__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

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

@media (min-width: 900px) {
  .games-hub__grid--live {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .games-hub__grid--live {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
}

.games-profile {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 1.5rem;
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--foreground) 6%, transparent),
      transparent 55%
    ),
    color-mix(in srgb, var(--foreground) 2.5%, var(--background));
}

.games-profile__identity {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar who"
    "xp xp";
  gap: 0.75rem 1rem;
  align-items: center;
}

.games-profile__avatar-wrap {
  grid-area: avatar;
  position: relative;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
}

.games-profile__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--foreground) 10%, var(--border));
  background: var(--surface-subtle);
  display: block;
}

.games-profile__level {
  position: absolute;
  right: -0.35rem;
  bottom: -0.25rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 2px solid var(--background);
  background: var(--foreground);
  color: var(--background);
  line-height: 1;
}

.games-profile__level-label {
  font-size: 0.5rem;
  font-weight: 800;
  opacity: 0.7;
  text-transform: uppercase;
}

.games-profile__level-value {
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.games-profile__who {
  grid-area: who;
  min-width: 0;
}

.games-profile__arena {
  margin: 0 0 0.15rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.games-profile__name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-profile__handle {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-profile__xp-block {
  grid-area: xp;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.games-profile__xp-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.games-profile__xp-now {
  color: var(--foreground);
  font-weight: 700;
}

.games-profile__xp-track,
.games-card__xp-track {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  overflow: hidden;
}

.games-profile__xp-fill,
.games-card__xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--foreground) 75%, #1a7a4c),
    var(--foreground)
  );
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.games-profile__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.games-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--background) 70%, transparent);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.games-badge i {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.games-badge--sm {
  padding: 0.25rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-muted);
}

@media (min-width: 720px) {
  .games-profile__identity {
    grid-template-columns: auto 1fr minmax(12rem, 16rem);
    grid-template-areas: "avatar who xp";
  }
}

.games-card--tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1.35rem;
  background: var(--games-surface, var(--background));
  text-decoration: none;
  color: inherit;
  transition:
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.games-card--live:hover,
.games-card--live:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
  outline: none;
}

/* active/hover: secondary → primary look on cengel-btn - 02.08.2026 00:05 */

.games-card--live:hover .games-card__cta,
.games-card--live:focus-visible .games-card__cta {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.games-card--soon {
  opacity: 0.72;
  cursor: default;
}

.games-card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  overflow: hidden;
}

.games-card__logo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.games-card--live:hover .games-card__logo {
  transform: scale(1.04);
}

.games-card__lock {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.games-card__ribbon {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--background);
  background: var(--foreground);
}

.games-card__ribbon--warn {
  background: #b45309;
  color: #fff7ed;
}

.games-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  padding: 0.8rem 0.85rem 0.9rem;
}

.games-card__topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.games-card__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.games-card__lvl {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.games-card__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.games-card__xp {
  margin-top: 0.15rem;
}

.games-card__xp-track {
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  overflow: hidden;
}

.games-card__xp-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
}

/* cta chrome: cengel-btn; stretch layout hook - 02.08.2026 00:05 */

.games-card__cta {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
}

.games-card__badge {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  align-self: stretch;
  min-height: 2.15rem;
  padding: 0 0.75rem;
  border-radius: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px dashed var(--border);
  color: var(--ink-muted);
  background: transparent;
}

/* devam eden — kutuphanede metin daha parlak - 26.07.2026 04:45 */

.games-hub__grid--live .games-card--live:not(.games-card--active) .games-card__name,
.games-hub__grid--live .games-card--live:not(.games-card--active) .games-card__desc,
.games-hub__grid--live .games-card--live:not(.games-card--active) .games-card__lvl,
.games-hub__grid--live .games-card--live:not(.games-card--active) .games-card__cta {
  opacity: 0.78;
}

.games-card--active .games-card__name {
  color: var(--foreground);
  font-weight: 800;
}

.games-card--active .games-card__desc {
  color: color-mix(in srgb, var(--foreground) 70%, var(--ink-muted));
}

.games-card--active .games-card__lvl {
  color: color-mix(in srgb, var(--foreground) 62%, var(--ink-muted));
}

.games-card--active .games-card__cta {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
  opacity: 1;
}

.games-featured {
  --games-featured-pad: 1.25rem;
  --games-featured-gap: 1.5rem;
  --games-featured-art: 11.5rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--games-featured-art) minmax(0, 1fr);
  gap: var(--games-featured-gap);
  align-items: center;
  min-height: calc(var(--games-featured-art) + (var(--games-featured-pad) * 2));
  padding: var(--games-featured-pad) 1.5rem;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--foreground) 4%, var(--background));
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.games-featured::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 55%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--games-accent, #1a7a4c) 28%, transparent),
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.games-featured:hover,
.games-featured:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.games-featured--five_harf {
  --games-accent: #2f8f5b;
}

.games-featured--chess {
  --games-accent: #3d6b8a;
}

.games-featured--solitaire {
  --games-accent: #a84545;
}

.games-featured--snake {
  --games-accent: #3f7a32;
}

.games-featured--sudoku {
  --games-accent: #5a6b8c;
}

.games-featured__glow {
  display: none;
}

.games-featured__cover {
  position: relative;
  z-index: 1;
  width: var(--games-featured-art);
  height: var(--games-featured-art);
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  flex-shrink: 0;
}

.games-featured__cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.games-featured__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  padding-block: 0.15rem;
}

.games-featured__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-muted);
}

.games-featured__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--foreground);
}

.games-featured__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 28rem;
}

.games-featured__status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
}

.games-featured__status--warn {
  background: #fff7ed;
  color: #9a3412;
}

html.dark .games-featured__status--warn,
:root.dark .games-featured__status--warn {
  background: #431407;
  color: #fdba74;
}

/* cta chrome: cengel-btn; layout only - 02.08.2026 00:05 */

.games-featured__cta {
  margin-top: 0.25rem;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .games-featured {
    --games-featured-art: 9.5rem;
    --games-featured-gap: 1rem;
    --games-featured-pad: 1.1rem;
    grid-template-columns: var(--games-featured-art) minmax(0, 1fr);
    padding: var(--games-featured-pad) 1.15rem;
  }
}

@media (max-width: 520px) {
  .games-featured {
    --games-featured-art: 8.25rem;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .games-featured__cover {
    width: var(--games-featured-art);
    height: var(--games-featured-art);
  }
}

.games-achievements {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.games-achievements__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.games-achievements[data-collapsed="1"] .games-ach--extra {
  display: none;
}

.games-ach {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
}

.games-ach__medal {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  color: var(--ink-muted);
  font-size: 1.25rem;
}

.games-ach--on .games-ach__medal {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.games-ach--off {
  opacity: 0.78;
}

.games-ach--off .games-ach__name {
  color: var(--ink-muted);
}

.games-ach__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.games-ach__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.games-ach__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
  line-height: 1.3;
}

.games-ach__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.games-ach__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
}

.games-ach__pill i {
  font-size: 0.7rem;
}

.games-ach__pill--locked {
  color: var(--ink-muted);
  background: transparent;
}

.games-ach--on .games-ach__pill:not(.games-ach__pill--locked) {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.games-achievements__more {
  align-self: flex-start;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.games-achievements__more:hover,
.games-achievements__more:focus-visible {
  background: color-mix(in srgb, var(--foreground) 7%, var(--background));
  outline: none;
}

.games-achievements__empty {
  margin: 0;
  padding: 1.25rem 1.35rem;
  border: 1px dashed var(--border);
  border-radius: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--foreground) 2%, var(--background));
}

.account-split__scroll:has(#account-main-content.account-main--game-play) {
  overflow: hidden;
  align-items: stretch;
}

.account-split__scroll:has(#account-main-content.account-main--game-play)
  > .account-split__content-pad {
  max-width: none !important;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  min-height: 0;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}

#account-main-content.account-main--game-play {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
  background: var(--background);
}

.game-play {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.game-play__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.game-play__close:hover,
.game-play__close:focus-visible {
  background: var(--surface-subtle);
  outline: none;
}

.game-play__close i {
  font-size: 1.05rem;
  line-height: 1;
}

/* o anki mac suresi — X ile simetrik sol ust - 26.07.2026 05:25 */

.game-play__clock {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.game-play__body {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin: 0;
  gap: 0;
}

.game-play__bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 0.75rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--border);
  background: var(--background);
  z-index: 5;
}

.game-play__info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  justify-self: start;
}

.game-play__logo {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
}

.game-play__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.game-play__name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-play__details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
  min-width: 0;
}

.game-play__session {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  min-width: 0;
}

.game-play__session:empty {
  display: none;
}

.game-play__mode {
  color: var(--foreground);
  font-weight: 700;
}

.game-play__dot {
  color: var(--ink-muted);
  font-weight: 600;
}

.game-play__difficulty,
.game-play__moves {
  font-variant-numeric: tabular-nums;
}

.game-play__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  justify-self: center;
}

.game-play__actions:empty {
  display: none;
}

/* cta chrome: cengel-btn; label clamp only - 02.08.2026 00:05 */

.game-play__action .cengel-btn__label {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-play__action:hover,
.game-play__action:focus-visible {
  outline: none;
}

.game-play__progress {
  justify-self: end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 7.5rem;
  width: min(10.5rem, 36vw);
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface-subtle);
}

.game-play__progress[hidden] {
  display: none !important;
}

.game-play__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1;
}

.game-play__level {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: var(--foreground);
}

.game-play__level-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--ink-muted);
}

.game-play__level-value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.game-play__xp-frac {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.game-play__xp-now {
  color: var(--foreground);
}

.game-play__xp-sep {
  opacity: 0.55;
}

.game-play__xp {
  height: 0.25rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.game-play__xp-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--foreground);
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 640px) {
  /* label hide: cengel-btn--hide-label-sm on markup - 02.08.2026 00:05 */

  .game-play__progress {
    min-width: 0;
    width: auto;
    padding: 0.35rem 0.5rem;
  }

  .game-play__xp-frac {
    display: none;
  }

  .game-play__xp {
    width: 3.25rem;
  }
}

.game-start-modal__panel.cengel-modal__panel--card {
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: min(88vh, 40rem);
  overflow: hidden;
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
}

.game-start {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  flex: 1 1 auto;
}

.game-start__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
}

.game-start__close:hover,
.game-start__close:focus-visible {
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  outline: none;
}

.game-start__body {
  --cengel-scroll-size: 5px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 16%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 32%, transparent);
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.15rem 0.75rem;
  padding-right: 1rem;
}

.game-start__body.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.5rem 0;
}

.game-start__hero {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding-right: 2rem;
  flex: 0 0 auto;
}

.game-start__logo {
  width: 5rem;
  height: 5rem;
  border-radius: 1.15rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, var(--background));
  display: block;
}

.game-start__hero-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.game-start__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--foreground);
}

.game-start__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-start__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.game-start__steps[hidden],
.game-start__actions[hidden],
.game-start__secondary[hidden] {
  display: none;
}

.game-start__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
}

/* cta chrome: cengel-btn; footer layout only - 02.08.2026 00:05 */

.game-start__actions:not(.game-start__actions--split) .game-start__primary {
  width: 100%;
}

.game-start__actions--split .game-start__secondary,
.game-start__actions--split .game-start__primary {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

@media (max-width: 520px) {
  .game-start-modal__panel.cengel-modal__panel--card {
    border-radius: 1.1rem;
    max-height: min(92vh, 40rem);
  }

  .game-start__hero {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.7rem;
  }

  .game-start__logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
  }
}

.game-start__block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.game-start__block[hidden] {
  display: none;
}

.game-start__section-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
}

.game-start__xp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.game-start__xp-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 0.95rem;
  background: var(--background);
}

.game-start__xp-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 7%, var(--background));
  color: var(--foreground);
  font-size: 0.8rem;
}

.game-start__xp-chip--minus .game-start__xp-chip-icon {
  background: color-mix(in srgb, #b91c1c 12%, var(--background));
  color: #b91c1c;
}

html.dark .game-start__xp-chip--minus .game-start__xp-chip-icon,
:root.dark .game-start__xp-chip--minus .game-start__xp-chip-icon {
  background: color-mix(in srgb, #fca5a5 16%, transparent);
  color: #fca5a5;
}

.game-start__xp-chip-value {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--foreground);
}

.game-start__xp-chip--minus .game-start__xp-chip-value {
  color: #b91c1c;
}

html.dark .game-start__xp-chip--minus .game-start__xp-chip-value,
:root.dark .game-start__xp-chip--minus .game-start__xp-chip-value {
  color: #fca5a5;
}

.game-start__xp-chip-label {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--ink-muted);
}

.game-start__ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.game-start__ach {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 0.95rem;
  background: var(--background);
}

.game-start__ach--off {
  opacity: 0.78;
}

.game-start__ach-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.game-start__ach--on .game-start__ach-icon {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.game-start__ach-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.game-start__ach-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}

.game-start__ach-name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
  line-height: 1.25;
}

.game-start__ach--off .game-start__ach-name {
  color: var(--ink-muted);
}

.game-start__ach-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
}

.game-start__ach-pill--locked {
  color: var(--ink-muted);
  background: transparent;
}

.game-start__ach--on .game-start__ach-pill:not(.game-start__ach-pill--locked) {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.game-start__ach-desc {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-pref {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.game-pref__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
}

.game-pref__grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.game-pref__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 1.15rem;
  background: var(--background);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.game-pref__card:hover,
.game-pref__card:focus-visible {
  border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  outline: none;
}

.game-pref__card--selected {
  border-color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
}

.game-pref__card--selected .game-pref__card-icon {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.game-pref__card--selected .game-pref__card-caret {
  color: var(--foreground);
}

.game-pref__card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 6%, var(--background));
  font-size: 1.05rem;
  color: var(--foreground);
}

.game-pref__card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.game-pref__card-title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--foreground);
}

.game-pref__card-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.game-pref__card-caret {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.wordle-page__body {
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0;
  background: var(--background);
}

.wordle-board {
  display: grid;
  gap: 0.4rem;
  width: min(calc(100% - 2rem), 22rem);
  margin-top: auto;
  flex: 0 0 auto;
}

.wordle-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

.wordle-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--background);
  color: var(--foreground);
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wordle-tile--filled {
  border-color: #a3a3a3;
}

.wordle-tile--correct {
  background: #538d4e;
  border-color: #538d4e;
  color: #fff;
}

.wordle-tile--present {
  background: #b59f3b;
  border-color: #b59f3b;
  color: #fff;
}

.wordle-tile--absent {
  background: #787c7e;
  border-color: #787c7e;
  color: #fff;
}

.wordle-status {
  min-height: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  flex: 0 0 auto;
  padding: 0 1rem;
}

.wordle-keyboard {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0.75rem 0.5rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--background);
  box-sizing: border-box;
}

.wordle-keyboard__row {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

.wordle-key {
  min-width: 1.7rem;
  height: 3rem;
  padding: 0 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface-subtle);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wordle-key--wide {
  min-width: 3rem;
  font-size: 0.65rem;
}

.wordle-key--correct {
  background: #538d4e;
  border-color: #538d4e;
  color: #fff;
}

.wordle-key--present {
  background: #b59f3b;
  border-color: #b59f3b;
  color: #fff;
}

.wordle-key--absent {
  background: #787c7e;
  border-color: #787c7e;
  color: #fff;
}

.wordle-key:disabled {
  cursor: default;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .wordle-tile,
  .wordle-key {
    transition: none;
  }
}

.solitaire-page__body {
  padding: 0;
  gap: 0;
  /* masa felt deseni; #1a5c38 fallback - 25.07.2026 08:40 */
  background-color: #1a5c38;
  background-image: url('/static/assets/game-assets/playing-cards/felt.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.solitaire-stage {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.solitaire-status {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e8f5e9;
  text-align: center;
}

.solitaire-status:empty {
  display: none;
  padding: 0;
}

.solitaire-board {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  overflow: auto;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ms tarzı fly: sabit katman, kart css'inden bagimsiz - 25.07.2026 10:40 */

.solitaire-fly {
  position: fixed !important;
  z-index: 80;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
  --card-radius: 8px;
  --card-pad: 2px;
  --card-border: 1px;
}

.solitaire-fly .solitaire-card {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  cursor: default;
  border-radius: var(--card-radius, 8px) !important;
  overflow: hidden;
}

.solitaire-fly .solitaire-card__img {
  border-radius: calc(
    var(--card-radius, 8px) - var(--card-pad, 2px) - var(--card-border, 1px)
  ) !important;
}

.solitaire-card--flying-src {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .solitaire-fly {
    display: none;
  }
}

.solitaire-board {
  --cols: 7;
  --board-pad: 12px;
  --gap: 8px;
  --card-w: 80px;
  --card-h: 116px;
  --stack-y: 32px;
  --stack-y-back: 10px;
  --waste-x: 22px;
  --card-radius: 8px;
  --card-border: 1px;
  --card-pad: 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--board-pad);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.solitaire-board--spider {
  --cols: 10;
}

.solitaire-board__top,
.solitaire-board__tableau {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--card-w));
  gap: var(--gap);
  justify-content: center;
  width: 100%;
  align-items: start;
  flex: 0 0 auto;
}

.solitaire-pile {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  isolation: isolate;
}

.solitaire-pile--tableau {
  --stack-scale: 1;
  --stack-y-eff: calc(var(--stack-y) * var(--stack-scale));
  --stack-y-back-eff: calc(var(--stack-y-back) * var(--stack-scale));
  height: auto;
  min-height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.solitaire-pile--waste {
  width: calc(var(--card-w) + 2 * var(--waste-x));
  min-width: calc(var(--card-w) + 2 * var(--waste-x));
  height: var(--card-h);
}

.solitaire-slot {
  width: var(--card-w);
  height: var(--card-h);
  border: 2px dashed rgba(255, 255, 255, 0.32);
  border-radius: var(--card-radius, 8px);
  background: rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.solitaire-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--card-w);
  height: var(--card-h);
  /* container: border + pad; art ortada kirpilir - 25.07.2026 08:05 */
  padding: var(--card-pad);
  border: var(--card-border) solid #000;
  border-radius: var(--card-radius, 8px);
  background: #fff;
  cursor: grab;
  overflow: hidden;
  touch-action: none;
  transition: box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  outline: none;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28);
}

.solitaire-card:active {
  cursor: grabbing;
}

.solitaire-pile--tableau .solitaire-card {
  position: relative;
  left: auto;
  top: auto;
  z-index: calc(var(--stack-i, 0) + 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
}

/* onceki kart kapaliysa sik peek; tasma olursa --stack-scale dusurur - 25.07.2026 08:10 */

.solitaire-pile--tableau .solitaire-card[data-face='down'] + .solitaire-card {
  margin-top: calc(var(--stack-y-back-eff) - var(--card-h));
}

.solitaire-pile--tableau .solitaire-card[data-face='up'] + .solitaire-card {
  margin-top: calc(var(--stack-y-eff) - var(--card-h));
}

.solitaire-pile--tableau .solitaire-card:last-child,
.solitaire-pile--foundation .solitaire-card:last-child,
.solitaire-pile--waste .solitaire-card:last-child,
.solitaire-pile--stock .solitaire-card {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
}

.solitaire-card--waste {
  position: absolute;
  left: calc(var(--waste-i, 0) * var(--waste-x));
  top: 0;
  z-index: calc(var(--waste-i, 0) + 1);
  box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.28);
}

.solitaire-card--back {
  background: #fff;
}

.solitaire-card__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* orijinal oran; ortala + kenar kirp; ust/alt 1px - 25.07.2026 08:10 */
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border-radius: calc(var(--card-radius) - var(--card-pad) - var(--card-border));
  clip-path: inset(1px 0);
}

.solitaire-card--back .solitaire-card__img {
  /* arka da ayni: pad icinde ortala + kirp - 25.07.2026 08:05 */
  -o-object-fit: cover;
     object-fit: cover;
}

.solitaire-card--selected {
  z-index: 40;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.36);
}

/* suruklerken kaynak aninda kaybolsun; unhide de aninda - 25.07.2026 08:35 */

.solitaire-card--dragging {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
  transition: none !important;
}

.solitaire-card--hint,
.solitaire-slot.solitaire-card--hint {
  outline: 2px solid #fde047;
  outline-offset: 2px;
  animation: solitaire-hint-pulse 0.7s cubic-bezier(0.4, 0, 0.2, 1) 2;
}

.solitaire-pile--hint {
  z-index: 2;
}

@keyframes solitaire-hint-pulse {
  0%,
  100% {
    outline-color: #fde047;
  }

  50% {
    outline-color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solitaire-card--hint,
  .solitaire-slot.solitaire-card--hint {
    animation: none;
  }

  .solitaire-card {
    transition: none;
  }
}

.solitaire-card--inert {
  pointer-events: none;
}

.solitaire-ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  box-sizing: border-box;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38));
}

.solitaire-ghost__card {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--card-pad, 2px);
  cursor: grabbing;
  outline: none;
  border: var(--card-border, 1px) solid #000;
  border-radius: var(--card-radius, 8px);
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.solitaire-ghost__card .solitaire-card__img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: calc(var(--card-radius, 8px) - var(--card-pad, 2px) - var(--card-border, 1px));
  clip-path: inset(1px 0);
}

.solitaire-settings {
  position: relative;
  display: inline-flex;
}

.solitaire-settings__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 11.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--background);
}

.solitaire-settings__panel[hidden] {
  display: none;
}

.solitaire-settings__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.solitaire-settings__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.solitaire-settings__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 3.1rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.solitaire-settings__swatch img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.25rem;
  pointer-events: none;
}

.solitaire-settings__swatch:hover,
.solitaire-settings__swatch:focus-visible {
  border-color: color-mix(in srgb, var(--foreground) 40%, var(--border));
  outline: none;
}

.solitaire-settings__swatch.is-selected {
  border-color: var(--foreground);
}

.solitaire-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border);
}

.solitaire-settings__row-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.solitaire-settings__toggle {
  min-width: 2.75rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.solitaire-settings__toggle:hover,
.solitaire-settings__toggle:focus-visible {
  border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
  outline: none;
}

.solitaire-settings__toggle[aria-pressed='true'] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.chess-settings {
  position: relative;
  display: inline-flex;
}

.chess-settings__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 11.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--background);
}

.chess-settings__panel[hidden] {
  display: none;
}

.chess-settings__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.chess-settings__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chess-settings__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chess-settings__swatch:hover,
.chess-settings__swatch:focus-visible {
  border-color: color-mix(in srgb, var(--foreground) 40%, var(--border));
  outline: none;
}

.chess-settings__swatch.is-selected {
  border-color: var(--foreground);
}

.chess-settings__mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
}

.chess-settings__mini i {
  display: block;
  margin: 0;
  padding: 0;
  font-style: normal;
}

.chess-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border);
}

.chess-settings__row-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.chess-settings__toggle {
  min-width: 2.75rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.chess-settings__toggle:hover,
.chess-settings__toggle:focus-visible {
  border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
  outline: none;
}

.chess-settings__toggle[aria-pressed='true'] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.snake-page__body {
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0;
  background: #1a2e1a;
}

:is(html.dark, .dark) .snake-page__body {
  background: #121f12;
}

.snake-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #e8f5e4;
  text-shadow: none;
}

.snake-hud__item {
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.28);
}

.snake-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.25rem;
}

.snake-board {
  display: grid;
  grid-template-columns: repeat(var(--snake-grid, 8), var(--snake-cell, 48px));
  grid-template-rows: repeat(var(--snake-grid, 8), var(--snake-cell, 48px));
  gap: 0;
  width: calc(var(--snake-grid, 8) * var(--snake-cell, 48px));
  height: calc(var(--snake-grid, 8) * var(--snake-cell, 48px));
  border: 3px solid #3d6b32;
  border-radius: 0.35rem;
  overflow: hidden;
  flex: 0 0 auto;
  background: #4caf50;
}

.snake-cell {
  width: var(--snake-cell, 48px);
  height: var(--snake-cell, 48px);
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* cimen dama — acik / koyu yesil - 25.07.2026 20:09 */

.snake-cell--light {
  background-color: #7cb342;
}

.snake-cell--dark {
  background-color: #689f38;
}

/* sprite + cimen: image ustte, hafif overlap subpixel boslugu kapatir - 25.07.2026 20:08 */

.snake-cell--sprite {
  background-size: 104% 104%;
  z-index: 1;
}

.snake-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(18, 40, 18, 0.78);
  z-index: 2;
  padding: 1rem;
  text-align: center;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.snake-overlay[hidden] {
  display: none;
}

.snake-overlay__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f1f8e9;
}

.snake-overlay__meta {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #c5e1a5;
}

/* cta chrome: cengel-btn — legacy overlay btn removed - 02.08.2026 00:05 */

@media (prefers-reduced-motion: reduce) {
  .snake-overlay {
    transition: none;
  }
}

/* --- super-shell responsive --- */

.super-split-outer {
  --account-split-main-content-max-w: 72rem;
}

.super-split-outer .account-split__main {
  background-color: var(--account-split-main-bg);
}

.super-split-outer .account-split__sidebar {
  background-color: var(--account-split-sidebar-bg);
}

.super-split-outer #super-main-content {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.super-split-outer .account-split__content-pad {
  box-sizing: border-box;
  max-width: 100%;
}

.super-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  max-width: 100%;
}

.super-page__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
}

.super-page__head-copy {
  min-width: 0;
}

.super-page__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw + 0.85rem, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.super-page__sub {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.super-page__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.super-results {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--background);
  overflow: hidden;
  min-width: 0;
}

.super-results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.super-results__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}

.super-results__count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.super-pager {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}

.super-pager:not(.hidden) {
  display: flex;
}

.super-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.super-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.super-pager__btn:not(:disabled):hover {
  background: var(--sidebar-hover-bg, color-mix(in srgb, var(--ink) 5%, transparent));
}

.super-pager__label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-align: center;
  flex: 1 1 100%;
  order: -1;
}

@media (min-width: 480px) {
  .super-page__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .super-page__head-actions {
    flex-shrink: 0;
  }

  .super-pager__label {
    flex: 0 1 auto;
    order: 0;
  }

  .super-pager__btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 639px) {
  .super-split-outer {
    --account-split-inner-pad: 1rem;
  }

  .super-results__bar,
    .super-pager {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

@media (min-width: 640px) {
  .super-page {
    gap: 1.25rem;
  }

  .super-results__bar,
    .super-pager {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.super-campaigns__ranges,
.super-campaigns__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.super-campaigns__range,
.super-campaigns__chip,
.super-campaigns__more {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
}

.super-campaigns__range[aria-checked="true"] {
  background: var(--surface-active);
  font-weight: 600;
}

.super-campaigns__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.super-campaigns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.super-campaigns__card,
.super-campaigns__hit {
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  min-width: 0;
}

.super-campaigns__label {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.super-campaigns__stat {
  margin-top: 0.35rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.super-campaigns__section {
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.super-campaigns__hits {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.super-campaigns__row,
.super-campaigns__line {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--background);
  color: var(--ink);
  text-align: left;
  font-size: 0.8125rem;
}

.super-campaigns__row {
  cursor: pointer;
}

.super-campaigns__row[aria-pressed="true"] {
  background: var(--surface-active);
  font-weight: 600;
}

.super-campaigns__meta {
  color: var(--ink-muted);
  font-size: 0.75rem;
  word-break: break-word;
}

.super-campaigns__headers {
  margin: 0.4rem 0 0;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow: auto;
}

.super-campaigns__empty {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .super-campaigns__grid--2,
    .super-campaigns__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .super-campaigns__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.super-dash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.super-dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.super-dash__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-dash__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
}

.super-dash__sub {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.35;
  max-width: 28rem;
}

.super-dash__live {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.super-dash__live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.875rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.super-dash__live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #d97706;
  flex-shrink: 0;
}

.super-dash__live-pill[data-status="healthy"] .super-dash__live-dot {
  background: #16a34a;
  animation: super-dash-pulse 1.8s ease-in-out infinite;
}

.super-dash__live-pill[data-status="unhealthy"] .super-dash__live-dot,
.super-dash__live-pill[data-status="error"] .super-dash__live-dot {
  background: #dc2626;
}

.super-dash__refreshed {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.super-dash__panel {
  border: 1px solid var(--border);
  border-radius: 1.125rem;
  background: var(--background);
  padding: 1rem 1.1rem 1.1rem;
}

.super-dash__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.super-dash__panel-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.super-dash__panel-title > i {
  font-size: 1rem;
  color: var(--ink-muted);
}

.super-dash__note {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.super-dash__status {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  overflow: hidden;
  margin-bottom: 0.875rem;
}

.super-dash__status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid transparent;
  min-width: 0;
}

.super-dash__status-item[data-status="healthy"] {
  border-left-color: #16a34a;
}

.super-dash__status-item[data-status="unhealthy"],
.super-dash__status-item[data-status="error"] {
  border-left-color: #dc2626;
}

.super-dash__status-item[data-status="unknown"] {
  border-left-color: #d97706;
}

.super-dash__status-item + .super-dash__status-item {
  border-top: 1px solid var(--border);
}

.super-dash__status-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  font-size: 1.15rem;
  overflow: hidden;
}

.super-dash__status-logo {
  width: 1.55rem;
  height: 1.55rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.super-dash__status-copy {
  min-width: 0;
  flex: 1;
}

.super-dash__status-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.super-dash__status-meta {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.super-dash__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.super-dash__pill-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: currentColor;
}

.super-dash__pill--ok {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-dash__pill--bad {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #b91c1c;
}

.super-dash__pill--unk {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.dark .super-dash__pill--ok {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-dash__pill--bad {
  background: color-mix(in srgb, #f87171 16%, transparent);
  color: #fca5a5;
}

.dark .super-dash__pill--unk {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  color: #fcd34d;
}

.super-dash__loads {
  display: grid;
  gap: 0.75rem;
}

.super-dash__load-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.super-dash__load-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-dash__load-label > i {
  font-size: 0.9rem;
}

.super-dash__load-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.super-dash__bar {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  overflow: hidden;
}

.super-dash__bar-fill {
  height: 100%;
  max-width: 100%;
  background: var(--ink);
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.super-dash__load--blue .super-dash__bar-fill {
  background: #2563eb;
}

.super-dash__load--violet .super-dash__bar-fill {
  background: var(--info);
}

.super-dash__load--teal .super-dash__bar-fill {
  background: #0d9488;
}

.super-dash__load--blue .super-dash__load-label > i {
  color: #2563eb;
}

.super-dash__load--violet .super-dash__load-label > i {
  color: var(--info);
}

.super-dash__load--teal .super-dash__load-label > i {
  color: #0d9488;
}

@keyframes super-dash-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.55;
    transform: scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .super-dash__live-pill[data-status="healthy"] .super-dash__live-dot {
    animation: none;
  }

  .super-dash__bar-fill {
    transition: none;
  }
}

.super-dash__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.super-dash__stat {
  --dash-tone: #52525b;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 5rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--dash-tone) 18%, var(--border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--dash-tone) 7%, var(--background));
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

a.super-dash__stat:hover {
  border-color: color-mix(in srgb, var(--dash-tone) 40%, var(--border));
  background: color-mix(in srgb, var(--dash-tone) 12%, var(--background));
}

.super-dash__stat-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.super-dash__stat-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dash-tone);
  background: color-mix(in srgb, var(--dash-tone) 14%, transparent);
  font-size: 0.95rem;
}

.super-dash__stat-icon--logo {
  background: color-mix(in srgb, var(--dash-tone) 10%, transparent);
  overflow: hidden;
}

.super-dash__stat-icon--logo img {
  width: 1.15rem;
  height: 1.15rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.super-dash__stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-dash__stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.super-dash__stat-hint {
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
}

.super-dash__stat--neutral {
  --dash-tone: #52525b;
}

.super-dash__stat--blue {
  --dash-tone: #2563eb;
}

.super-dash__stat--sky {
  --dash-tone: #0284c7;
}

.super-dash__stat--cyan {
  --dash-tone: #0891b2;
}

.super-dash__stat--teal {
  --dash-tone: #0d9488;
}

.super-dash__stat--green {
  --dash-tone: #16a34a;
}

.super-dash__stat--emerald {
  --dash-tone: #059669;
}

.super-dash__stat--violet {
  --dash-tone: var(--info);
}

.super-dash__stat--purple {
  --dash-tone: var(--ink-500);
}

.super-dash__stat--indigo {
  --dash-tone: #4f46e5;
}

.super-dash__stat--pink {
  --dash-tone: #db2777;
}

.super-dash__stat--rose {
  --dash-tone: #e11d48;
}

.super-dash__stat--orange {
  --dash-tone: #ea580c;
}

.super-dash__stat--amber {
  --dash-tone: #d97706;
}

.super-dash__stat--slate {
  --dash-tone: #475569;
}

.super-dash__stat--danger {
  --dash-tone: #dc2626;
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
  background: color-mix(in srgb, #dc2626 10%, var(--background));
}

.super-dash__stat--danger .super-dash__stat-value {
  color: #dc2626;
}

.dark .super-dash__stat--danger .super-dash__stat-value {
  color: #f87171;
}

.super-dash__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.super-dash__link {
  --dash-tone: #52525b;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--dash-tone) 16%, var(--border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--dash-tone) 6%, var(--background));
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.super-dash__link:hover {
  border-color: color-mix(in srgb, var(--dash-tone) 38%, var(--border));
  background: color-mix(in srgb, var(--dash-tone) 12%, var(--background));
}

.super-dash__link-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--dash-tone);
  background: color-mix(in srgb, var(--dash-tone) 14%, transparent);
}

.super-dash__link-label {
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-dash__link--blue {
  --dash-tone: #2563eb;
}

.super-dash__link--violet {
  --dash-tone: var(--info);
}

.super-dash__link--cyan {
  --dash-tone: #0891b2;
}

.super-dash__link--rose {
  --dash-tone: #e11d48;
}

.super-dash__link--amber {
  --dash-tone: #d97706;
}

.super-dash__link--purple {
  --dash-tone: var(--ink-500);
}

.super-dash__link--pink {
  --dash-tone: #db2777;
}

.super-dash__link--emerald {
  --dash-tone: #059669;
}

.super-dash__link--slate {
  --dash-tone: #475569;
}

@media (min-width: 640px) {
  .super-dash__loads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .super-dash__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .super-dash__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .super-dash__status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .super-dash__status-item + .super-dash__status-item {
    border-top: 0;
    border-left: 1px solid var(--border);
  }

  .super-dash__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .super-dash__link {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
    min-height: 4.85rem;
    padding: 0.85rem 0.5rem;
  }
}

@media (min-width: 1100px) {
  .super-dash__links {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

/* --- super-filters --- */

.super-filters {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--background);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
}

.super-filters__search {
  position: relative;
  width: 100%;
}

.super-filters__search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1;
  pointer-events: none;
}

.super-filters__search-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem 0 2.625rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.25;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.super-filters__search-input::-moz-placeholder {
  color: var(--ink-muted);
}

.super-filters__search-input::placeholder {
  color: var(--ink-muted);
}

.super-filters__search-input:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--border));
}

.super-filters__search-input:focus {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--border));
  background: var(--background);
}

.super-filters__search-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset: 1px;
}

.super-filters__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  align-items: stretch;
}

.super-filters__row--simple {
  grid-template-columns: minmax(0, 1fr) auto;
}

.super-filters__row--end {
  display: flex;
  justify-content: flex-end;
}

.super-filters__row > [data-account-field-dropdown] {
  min-width: 0;
}

.super-filters__row .account-field-dropdown__trigger {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  justify-content: center;
  transition: border-color 150ms ease, background-color 150ms ease;
  overflow: hidden;
}

.super-filters__row .account-field-dropdown__trigger:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--border));
}

.super-filters__row .account-field-dropdown__trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--border));
  background: var(--background);
}

.super-filters__row .account-field-dropdown__title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-filters__row .account-field-dropdown__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.super-filters__row:not(.super-filters__row--simple):not(.super-filters__row--end) .super-filters__clear {
  grid-column: 1 / -1;
}

.super-filters__row .account-field-dropdown__value-row i {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.super-filters__row .account-field-dropdown__panel {
  width: 100%;
  min-width: 10rem;
  padding: 0.25rem;
}

.super-filters__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.super-filters__clear:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--border));
  background: color-mix(in srgb, var(--border) 50%, var(--surface-subtle));
}

.super-filters__option {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink);
  transition: background-color 120ms ease;
}

.super-filters__option:hover,
.super-filters__option:focus-visible {
  background: var(--sidebar-hover-bg, color-mix(in srgb, var(--ink) 6%, transparent));
  outline: none;
}

@media (min-width: 640px) {
  .super-filters {
    padding: 1.125rem 1.25rem;
    gap: 1rem;
  }

  .super-filters__row:not(.super-filters__row--simple) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .super-filters__row--simple {
    grid-template-columns: minmax(12rem, 18rem) auto;
    justify-content: start;
  }
}

@media (min-width: 1024px) {
  .super-filters__row:not(.super-filters__row--simple) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }

  .super-filters__row:not(.super-filters__row--simple):not(.super-filters__row--end) .super-filters__clear {
    grid-column: auto;
    min-width: 7.5rem;
  }
}

/* --- super-loader --- */

.super-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.super-loader--panel {
  min-height: 12rem;
  padding: 2.5rem 1rem;
}

.super-loader--compact {
  min-height: 3.5rem;
  padding: 0.75rem 0;
}

.super-loader--block {
  min-height: 8rem;
  padding: 2rem 1rem;
}

.super-loader-host {
  position: relative;
}

.super-loader--fill {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-height: 0;
  padding: 0;
  background: var(--background, #ffffff);
  border-radius: inherit;
}

html.dark .super-loader--fill {
  background: var(--background, #0f0f13);
}

.super-loader__bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  background: #e5e5e5;
  overflow: hidden;
  flex-shrink: 0;
  animation: super-loader-in 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.super-loader--compact .super-loader__bar {
  width: 120px;
  height: 2px;
}

html.dark .super-loader__bar {
  background: #26262c;
}

.super-loader__bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #171717;
  will-change: transform;
  animation: super-loader-bar 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html.dark .super-loader__bar-fill {
  background: #e4e4e7;
}

@keyframes super-loader-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes super-loader-bar {
  0% {
    transform: translateX(-105%) scaleX(0.55);
  }

  45% {
    transform: translateX(15%) scaleX(0.85);
  }

  100% {
    transform: translateX(260%) scaleX(0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .super-loader__bar {
    animation: none;
  }

  .super-loader__bar-fill {
    animation: none;
    transform: none;
    width: 40%;
    margin-left: 30%;
  }
}

.super-users-table {
  width: 100%;
  min-width: 0;
}

.super-users-table__head,
.super-users-table__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.6fr) minmax(4.5rem, 0.7fr) minmax(5.5rem, 0.8fr) minmax(8rem, 1.4fr) 2.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.super-users-table__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 3%, transparent));
}

.super-users-table__head .super-users-table__col {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-users-table__row {
  border-bottom: 1px solid var(--border);
}

.super-users-table__row:last-child {
  border-bottom: 0;
}

.super-users-table__col {
  min-width: 0;
}

.super-users-table__col--profile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.super-users-table__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-users-table__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-users-table__username {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-users-table__joined,
.super-users-table__muted {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.super-users-table__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.super-users-table__col--actions {
  display: flex;
  justify-content: flex-end;
}

.super-users-table__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-users-table__gear:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-users-table__gear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-users-sentinel {
  height: 1px;
}

.super-user-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.super-user-badge--active {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-user-badge--suspended {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.super-user-badge--banned,
.super-user-badge--disabled {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #b91c1c;
}

.super-user-badge--admin {
  background: var(--info-soft);
  color: var(--info);
}

.super-user-badge--developer {
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #1d4ed8;
}

.super-user-badge--user {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.super-user-badge--verified {
  background: color-mix(in srgb, #0d9488 14%, transparent);
  color: #0f766e;
}

.super-user-badge--mfa {
  background: color-mix(in srgb, #4f46e5 14%, transparent);
  color: #4338ca;
}

.dark .super-user-badge--active {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-user-badge--suspended {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  color: #fcd34d;
}

.dark .super-user-badge--banned,
.dark .super-user-badge--disabled {
  background: color-mix(in srgb, #f87171 16%, transparent);
  color: #fca5a5;
}

.dark .super-user-badge--admin {
  background: var(--info-soft);
  color: var(--info);
}

.dark .super-user-badge--developer {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #93c5fd;
}

.dark .super-user-badge--user {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-user-badge--verified {
  background: color-mix(in srgb, #2dd4bf 16%, transparent);
  color: #5eead4;
}

.dark .super-user-badge--mfa {
  background: color-mix(in srgb, #818cf8 16%, transparent);
  color: #a5b4fc;
}

@media (max-width: 767px) {
  .super-users-table__head {
    display: none;
  }

  .super-users-table__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
            "profile actions"
            "flags flags"
            "joined badges";
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1rem;
  }

  .super-users-table__col--profile {
    grid-area: profile;
  }

  .super-users-table__col--flags {
    grid-area: flags;
  }

  .super-users-table__col--joined {
    grid-area: joined;
  }

  .super-users-table__col--badges {
    grid-area: badges;
  }

  .super-users-table__col--actions {
    grid-area: actions;
  }
}

.super-users-table__flags-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.super-users-table__flags-btn:hover,
.super-users-table__flags-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-users-table__flags-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-users-table__flags-value {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.super-users-flags-popover {
  position: fixed;
  z-index: var(--z-popover, 10090);
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 1rem));
  max-height: min(20rem, calc(100vh - 1rem));
  overflow: auto;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.75rem;
}

.super-users-flags-popover.hidden {
  display: none;
}

.super-users-flags-popover.\!hidden {
  display: none !important;
}

.super-users-flags-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.super-users-flags-popover__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-users-flags-popover__value {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.super-users-flags-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.super-users-flags-popover__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-users-flags-popover__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}

.super-users-flags-popover__bit {
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.super-users-flags-popover__empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.super-spaces-table {
  width: 100%;
  min-width: 0;
}

.super-spaces-table__head,
.super-spaces-table__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.8fr) minmax(6rem, 1fr) minmax(4rem, 0.6fr) minmax(4rem, 0.6fr) 2.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.super-spaces-table__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 3%, transparent));
}

.super-spaces-table__head .super-spaces-table__col {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-spaces-table__row {
  border-bottom: 1px solid var(--border);
}

.super-spaces-table__row:last-child {
  border-bottom: 0;
}

.super-spaces-table__col {
  min-width: 0;
}

.super-spaces-table__col--space {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.super-spaces-table__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-spaces-table__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-spaces-table__slug {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-spaces-table__muted {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.super-spaces-table__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.super-spaces-table__col--actions {
  display: flex;
  justify-content: flex-end;
}

.super-spaces-table__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-spaces-table__gear:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-spaces-table__gear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-spaces-sentinel {
  height: 1px;
}

.super-space-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.super-space-badge--active {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-space-badge--suspended {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.super-space-badge--pending {
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #1d4ed8;
}

.super-space-badge--expired {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #b91c1c;
}

.super-space-badge--private {
  background: var(--accent-soft);
  color: var(--accent);
}

.super-space-badge--public {
  background: color-mix(in srgb, #0d9488 14%, transparent);
  color: #0f766e;
}

.super-space-badge--neutral {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-space-badge--active {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-space-badge--suspended {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  color: #fcd34d;
}

.dark .super-space-badge--pending {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #93c5fd;
}

.dark .super-space-badge--expired {
  background: color-mix(in srgb, #f87171 16%, transparent);
  color: #fca5a5;
}

.dark .super-space-badge--private {
  background: var(--accent-soft);
  color: var(--accent);
}

.dark .super-space-badge--public {
  background: color-mix(in srgb, #2dd4bf 16%, transparent);
  color: #5eead4;
}

.dark .super-space-badge--neutral {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

@media (max-width: 639px) {
  .super-spaces-table__head {
    display: none;
  }

  .super-spaces-table__head,
  .super-spaces-table__row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .super-spaces-table__col--status,
  .super-spaces-table__col--members,
  .super-spaces-table__col--channels {
    display: none;
  }
}

.super-webhooks-table {
  width: 100%;
  min-width: 0;
}

.super-webhooks-table__head,
.super-webhooks-table__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.6fr) minmax(7rem, 1.1fr) minmax(5.5rem, 0.8fr) minmax(6rem, 0.9fr) 2.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.super-webhooks-table__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 3%, transparent));
}

.super-webhooks-table__head .super-webhooks-table__col {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-webhooks-table__row {
  border-bottom: 1px solid var(--border);
}

.super-webhooks-table__row:last-child {
  border-bottom: 0;
}

.super-webhooks-table__col {
  min-width: 0;
}

.super-webhooks-table__col--webhook {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.super-webhooks-table__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-webhooks-table__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-webhooks-table__sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-webhooks-table__muted {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.super-webhooks-table__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.super-webhooks-table__col--actions {
  display: flex;
  justify-content: flex-end;
}

.super-webhooks-table__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-webhooks-table__gear:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-webhooks-table__gear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-webhooks-sentinel {
  height: 1px;
}

.super-webhook-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.super-webhook-badge--messages {
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #1d4ed8;
}

.super-webhook-badge--live {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-webhook-badge--idle {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.super-webhook-badge--channel {
  background: var(--info-soft);
  color: var(--info);
}

.dark .super-webhook-badge--messages {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #93c5fd;
}

.dark .super-webhook-badge--live {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-webhook-badge--idle {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-webhook-badge--channel {
  background: var(--info-soft);
  color: var(--info);
}

@media (max-width: 639px) {
  .super-webhooks-table__head {
    display: none;
  }

  .super-webhooks-table__head,
  .super-webhooks-table__row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .super-webhooks-table__col--space,
  .super-webhooks-table__col--msgs,
  .super-webhooks-table__col--last {
    display: none;
  }
}

.super-oauth-table {
  width: 100%;
  min-width: 0;
}

.super-oauth-table__head,
.super-oauth-table__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.7fr) minmax(7rem, 1fr) minmax(6rem, 0.9fr) minmax(5.5rem, 0.8fr) 2.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.super-oauth-table__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 3%, transparent));
}

.super-oauth-table__head .super-oauth-table__col {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-oauth-table__row {
  border-bottom: 1px solid var(--border);
}

.super-oauth-table__row:last-child {
  border-bottom: 0;
}

.super-oauth-table__col {
  min-width: 0;
}

.super-oauth-table__col--client {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.super-oauth-table__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-oauth-table__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-oauth-table__sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.super-oauth-table__muted {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.super-oauth-table__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.super-oauth-table__col--actions {
  display: flex;
  justify-content: flex-end;
}

.super-oauth-table__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-oauth-table__gear:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-oauth-table__gear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-oauth-sentinel {
  height: 1px;
}

.super-oauth-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.super-oauth-badge--active {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-oauth-badge--inactive {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.super-oauth-badge--system {
  background: var(--info-soft);
  color: var(--info);
}

.dark .super-oauth-badge--active {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-oauth-badge--inactive {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-oauth-badge--system {
  background: var(--info-soft);
  color: var(--info);
}

@media (max-width: 639px) {
  .super-oauth-table__head {
    display: none;
  }

  .super-oauth-table__head,
  .super-oauth-table__row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .super-oauth-table__col--owner,
  .super-oauth-table__col--status,
  .super-oauth-table__col--stats {
    display: none;
  }
}

.super-products-table {
  width: 100%;
  min-width: 0;
}

.super-products-table__head,
.super-products-table__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.5fr) minmax(8rem, 1.4fr) minmax(6.5rem, 0.9fr) 2.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.super-products-table__head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 3%, transparent));
}

.super-products-table__head .super-products-table__col {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.super-products-table__row {
  border-bottom: 1px solid var(--border);
}

.super-products-table__row:last-child {
  border-bottom: 0;
}

.super-products-table__col {
  min-width: 0;
}

.super-products-table__col--product {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.super-products-table__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-products-table__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-products-table__sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.super-products-table__muted {
  font-size: 0.75rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.super-products-table__order {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.super-products-table__order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-products-table__order-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-products-table__order-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.super-products-table__order-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-products-table__col--actions {
  display: flex;
  justify-content: flex-end;
}

.super-products-table__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.super-products-table__gear:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--border));
  background: var(--surface-subtle, color-mix(in srgb, var(--ink) 4%, transparent));
}

.super-products-table__gear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: 2px;
}

.super-product-detail__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .super-products-table__head {
    display: none;
  }

  .super-products-table__head,
  .super-products-table__row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .super-products-table__col--url,
  .super-products-table__col--order {
    display: none;
  }
}

.super-reports-list {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}

.super-reports-list__empty,
.super-reports-list__error {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.super-reports-list__error {
  color: #dc2626;
}

.dark .super-reports-list__error {
  color: #f87171;
}

.super-report-row {
  position: relative;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 0;
  border-top: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms ease;
  animation: super-report-row-in 280ms ease both;
  min-width: 0;
}

.super-report-row + .super-report-row {
  border-top-color: var(--border);
}

.super-report-row:hover {
  background: var(--sidebar-hover-bg, color-mix(in srgb, var(--ink) 5%, transparent));
}

.super-report-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  outline-offset: -2px;
}

.super-report-row__top,
.super-report-row__badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.super-report-row__top {
  justify-content: space-between;
}

.super-report-row__badges {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.super-report-row__date {
  font-size: 0.75rem;
  color: var(--ink-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.super-report-row__parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .super-report-row {
    padding: 1rem 2.25rem 1rem 1.25rem;
  }

  .super-report-row__parties {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
  }

  .super-report-row__caret {
    display: block;
  }
}

.super-report-party__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.super-report-party__main {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
}

.super-report-party__media {
  width: 2.25rem;
  height: 2.25rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-subtle, #f5f5f5);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.super-report-party__media--user {
  border-radius: 999px;
}

.super-report-party__media--space {
  border-radius: 30%;
  corner-shape: squircle;
}

.super-report-party__media--provider {
  border-radius: 0.5625rem;
}

.super-report-party__media--soft {
  border-radius: 0.625rem;
}

.super-report-party__media--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 1rem;
}

.super-report-party__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.125rem;
}

.super-report-party__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

.super-report-party__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.super-report-party__preview {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: 0.5rem;
  border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.super-report-row__reason {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.super-report-row__reason-label {
  font-weight: 600;
  color: var(--ink-muted);
}

.super-report-row__caret {
  display: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.super-report-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.super-report-badge--pending {
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #1d4ed8;
}

.super-report-badge--review {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.super-report-badge--resolved {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-report-badge--type,
.super-report-badge--muted {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-report-badge--pending {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #93c5fd;
}

.dark .super-report-badge--review {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  color: #fcd34d;
}

.dark .super-report-badge--resolved {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-report-badge--type,
.dark .super-report-badge--muted {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

.super-report-detail__parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .super-report-detail__parties {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.super-report-detail__party {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.super-report-detail__block {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
}

.super-report-detail__block--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  word-break: break-all;
  max-height: 10rem;
  overflow-y: auto;
}

@keyframes super-report-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .super-report-row {
    animation: none;
  }
}

.super-report-space {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.super-report-space__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.super-report-space__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.super-report-space .super-report-party__media {
  width: 1.75rem;
  height: 1.75rem;
}

.super-report-space .super-report-party__name {
  font-size: 0.8125rem;
}

.super-report-detail__space {
  min-width: 0;
}

.super-report-detail__space.is-empty {
  display: none;
}

/* --- super-logs-tabs --- */

.super-logs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--background);
}

.super-logs-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 0;
}

.super-logs-tabs__btn i {
  font-size: 0.9375rem;
}

.super-logs-tabs__btn:hover {
  color: var(--ink);
  background: var(--surface-subtle);
}

.super-logs-tabs__btn.is-active {
  color: var(--ink);
  background: var(--surface-subtle);
  border-color: var(--border);
}

.super-logs-tabs__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset: 1px;
}

/* --- super-logs-list --- */

.super-logs-list {
  display: flex;
  flex-direction: column;
}

.super-log-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid transparent;
  animation: super-log-row-in 280ms ease both;
  min-width: 0;
}

.super-log-row + .super-log-row {
  border-top-color: var(--border);
}

.super-log-row:hover {
  background: var(--sidebar-hover-bg, color-mix(in srgb, var(--ink) 5%, transparent));
}

.super-log-row__body {
  min-width: 0;
  flex: 1;
}

.super-log-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.super-log-row__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  word-break: break-word;
}

.super-log-row__sub {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.4;
  word-break: break-word;
}

.super-log-row__meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 0.125rem;
  display: none;
}

.super-log-row__raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.super-log-row__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.super-log-row--error:hover {
  background: color-mix(in srgb, #dc2626 6%, transparent);
}

.super-log-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.super-log-badge--info {
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #1d4ed8;
}

.super-log-badge--warn {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.super-log-badge--error {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #b91c1c;
}

.super-log-badge--ok {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.super-log-badge--neutral {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-muted);
}

.super-log-badge--action {
  background: var(--info-soft);
  color: var(--info);
}

.dark .super-log-badge--info {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #93c5fd;
}

.dark .super-log-badge--warn {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  color: #fcd34d;
}

.dark .super-log-badge--error {
  background: color-mix(in srgb, #f87171 16%, transparent);
  color: #fca5a5;
}

.dark .super-log-badge--ok {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  color: #86efac;
}

.dark .super-log-badge--neutral {
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--ink-muted);
}

.dark .super-log-badge--action {
  background: var(--info-soft);
  color: var(--info);
}

.dark .super-log-row--error:hover {
  background: color-mix(in srgb, #f87171 8%, transparent);
}

@keyframes super-log-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .super-log-row {
    animation: none;
  }
}

@media (min-width: 640px) {
  .super-log-row {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }

  .super-log-row__meta {
    display: block;
  }

  .super-logs-tabs {
    padding: 0.625rem;
    gap: 0.5rem;
  }

  .super-logs-tabs__btn {
    flex: 0 1 auto;
    padding: 0.5rem 0.875rem;
  }
}

.dev-hud-user {
  position: relative;
}

.dev-hud-avatar {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 140ms ease;
}

.dev-hud-user button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dev-hud-user button[aria-expanded="true"] .dev-hud-avatar,
    .dev-hud-user:hover .dev-hud-avatar {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.dev-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.dev-menu-btn:hover {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

@media (min-width: 1024px) {
  .dev-menu-btn {
    display: none;
  }
}

.dev-auth-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 140ms ease;
}

.dev-auth-link:hover {
  color: var(--foreground);
}

/* cta chrome: cengel-btn--sm — legacy size override removed - 02.08.2026 00:05 */

.dev-shell__body {
  padding-top: 3.75rem;
}

.dev-sidebar {
  top: 3.75rem;
  height: calc(100vh - 3.75rem);
}

.dev-page-head {
  margin-bottom: 1.75rem;
}

.dev-page-head__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .dev-page-head {
    margin-bottom: 2rem;
  }

  .dev-page-head__row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.dev-page-head__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--foreground);
}

.dev-page-head__lead {
  margin: 0;
  max-width: 36rem;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 640px) {
  .dev-page-head__lead {
    font-size: 1.05rem;
  }
}

.dev-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dev-header,
    .dev-footer,
    .dev-sidebar,
    .dev-sidebar *,
    #mobileSidebar,
    #mobileSidebar * {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.dev-sidebar input,
    .dev-sidebar textarea,
    .dev-sidebar code,
    .dev-sidebar pre,
    #mobileSidebar input,
    #mobileSidebar textarea,
    #mobileSidebar code,
    #mobileSidebar pre {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
}

.dev-nav-group--auth {
  gap: 0.5rem;
}

.dev-nav-link--danger {
  color: #dc2626;
}

.dark .dev-nav-link--danger {
  color: #f87171;
}

.dev-nav-link--danger:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #b91c1c;
}

.dev-nav-account {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem 0.625rem;
}

.dev-nav-account__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.dev-nav-account__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.dev-nav-account__name,
    .dev-nav-account__handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-nav-account__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.dev-nav-account__handle {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.dev-shell .doc_content {
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dev-shell .doc_content h1,
    .dev-shell .doc_content h2,
    .dev-shell .doc_content h3,
    .dev-shell .doc_content h4,
    .dev-shell .doc_content h5 {
  font-family: Inter, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: var(--foreground);
  font-weight: 600;
  margin-top: 0;
}

.dev-shell .doc_content h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 0.75rem;
}

.dev-shell .doc_content h1 + p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 40rem;
}

.dev-shell .doc_content h2 {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: 1rem;
}

.dev-shell .doc_content h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-bottom: 0.875rem;
}

.dev-shell .doc_content h4 {
  margin: 1.25rem 0 0.7rem;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.dev-shell .doc_content h5 {
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-bottom: 0.65rem;
}

.dev-shell .doc_content p {
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
}

.dev-shell .doc_content p:last-child {
  margin-bottom: 0;
}

.dev-shell .doc_content ul,
    .dev-shell .doc_content ol {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.dev-shell .doc_content ul:last-child,
    .dev-shell .doc_content ol:last-child {
  margin-bottom: 0;
}

.dev-shell .doc_content li {
  margin: 0.35rem 0;
}

.dev-shell .doc_content strong {
  color: var(--foreground);
  font-weight: 600;
}

.dev-shell .doc_content ul li::marker,
    .dev-shell .doc_content ol li::marker {
  color: var(--ink-muted);
}

.dev-shell .doc_content a:not([class*="dev-"]):not(.copy-button) {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  transition: text-decoration-color 140ms ease;
}

.dev-shell .doc_content a:not([class*="dev-"]):not(.copy-button):hover {
  text-decoration-color: var(--foreground);
}

.dev-shell .doc_content code:not(pre code) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
  padding: 0.12rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.84em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
}

.dev-shell .doc_content .code-block-wrapper {
  margin: 0 0 1rem;
}

.dev-shell .doc_content .custom-table,
    .dev-shell .doc_content .overflow-x-auto:has(.custom-table) {
  margin-bottom: 0.25rem;
}

.dev-shell .doc_content .scroll-mt-24 {
  scroll-margin-top: 5.25rem;
}

pre {
  overflow: visible;
  max-height: none;
}

pre code {
  background: transparent;
  padding: 0 !important;
}

.code-block-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.code-block-wrapper pre {
  margin: 0;
  border-radius: 0.75rem;
  padding: 0;
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border);
  overflow: hidden;
  max-height: none;
  display: flex;
  flex-direction: column;
  min-width: 100%;
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--foreground) 3%, var(--surface-subtle));
  border-bottom: 1px solid var(--border);
  border-radius: 0.75rem 0.75rem 0 0;
}

/* step timeline - 16.07.2026 18:40 */

.dev-shell .doc_content .relative .flex.items-start .flex-shrink-0 > div {
  background: var(--foreground);
  color: var(--background);
  box-shadow: none;
}

.dev-shell .doc_content .relative:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -1.5rem;
  width: 1px;
  background: var(--border);
  z-index: 0;
}

@media (min-width: 640px) {
  .dev-shell .doc_content .relative:not(:last-child)::after {
    left: 1.5rem;
  }
}

/* prism default theme artiklari (operator bg, text-shadow) - 16.07.2026 18:30 */

.code-block-wrapper code[class*="language-"],
    .code-block-wrapper pre[class*="language-"],
    .code-block-wrapper code[class*="language-"] *,
    .code-block-wrapper pre[class*="language-"] * {
  text-shadow: none !important;
}

.code-block-wrapper .token {
  background: none !important;
  background-color: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.code-language-label {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: Inter, Arial, sans-serif;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
  font-weight: 500;
  font-family: Inter, Arial, sans-serif;
}

.copy-button:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.copy-button:active {
  background: var(--border);
}

.copy-button.copied {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.code-block-content {
  padding: 0;
  background: var(--surface-subtle);
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.code-block-content-wrapper {
  display: flex;
  align-items: stretch;
}

.code-line-numbers {
  padding: 1rem 0.875rem 1rem 0.75rem;
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: right;
  min-width: 2.75rem;
  white-space: pre;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.code-block-content code {
  display: block;
  padding: 1rem 1.25rem 1rem 1rem !important;
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: transparent !important;
  flex: 1;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

.code-block-wrapper pre code {
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.code-block-wrapper pre[class*="language-"] {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border);
}

.code-block-wrapper pre[class*="language-"] code {
  color: var(--foreground);
  background: transparent !important;
}

.code-block-wrapper .token.comment,
    .code-block-wrapper .token.prolog,
    .code-block-wrapper .token.doctype,
    .code-block-wrapper .token.cdata {
  color: var(--ink-muted);
}

.code-block-wrapper .token.\!comment {
  color: var(--ink-muted) !important;
}

.code-block-wrapper .token.punctuation,
    .code-block-wrapper .token.operator,
    .code-block-wrapper .token.entity,
    .code-block-wrapper .token.url {
  color: var(--ink-muted);
}


    .code-block-wrapper .token.\!url {
  color: var(--ink-muted) !important;
}

.code-block-wrapper .token.property,
    .code-block-wrapper .token.tag,
    .code-block-wrapper .token.boolean,
    .code-block-wrapper .token.number,
    .code-block-wrapper .token.constant,
    .code-block-wrapper .token.symbol,
    .code-block-wrapper .token.deleted {
  color: #dc2626;
}

.code-block-wrapper .token.selector,
    .code-block-wrapper .token.attr-name,
    .code-block-wrapper .token.string,
    .code-block-wrapper .token.char,
    .code-block-wrapper .token.builtin,
    .code-block-wrapper .token.inserted {
  color: #059669;
}


    .code-block-wrapper .token.\!inserted {
  color: #059669 !important;
}

.code-block-wrapper .token.atrule,
    .code-block-wrapper .token.attr-value,
    .code-block-wrapper .token.keyword,
    .code-block-wrapper .token.function,
    .code-block-wrapper .token.class-name {
  color: #2563eb;
}

.code-block-wrapper .token.regex,
    .code-block-wrapper .token.important,
    .code-block-wrapper .token.variable {
  color: #ea580c;
}


    .code-block-wrapper .token.\!important {
  color: #ea580c !important;
}

.dark .code-block-wrapper .token.property,
    .dark .code-block-wrapper .token.tag,
    .dark .code-block-wrapper .token.boolean,
    .dark .code-block-wrapper .token.number,
    .dark .code-block-wrapper .token.constant,
    .dark .code-block-wrapper .token.symbol,
    .dark .code-block-wrapper .token.deleted {
  color: #f87171;
}

.dark .code-block-wrapper .token.selector,
    .dark .code-block-wrapper .token.attr-name,
    .dark .code-block-wrapper .token.string,
    .dark .code-block-wrapper .token.char,
    .dark .code-block-wrapper .token.builtin,
    .dark .code-block-wrapper .token.inserted {
  color: #34d399;
}


    .dark .code-block-wrapper .token.\!inserted {
  color: #34d399 !important;
}

.dark .code-block-wrapper .token.atrule,
    .dark .code-block-wrapper .token.attr-value,
    .dark .code-block-wrapper .token.keyword,
    .dark .code-block-wrapper .token.function,
    .dark .code-block-wrapper .token.class-name {
  color: #93c5fd;
}

.dark .code-block-wrapper .token.regex,
    .dark .code-block-wrapper .token.important,
    .dark .code-block-wrapper .token.variable {
  color: #fb923c;
}


    .dark .code-block-wrapper .token.\!important {
  color: #fb923c !important;
}

.code-block-wrapper .token.method,
    .code-block-wrapper .token.header-name,
    .code-block-wrapper .token.scheme,
    .code-block-wrapper .token.http-version {
  color: #2563eb;
}

.code-block-wrapper .token.key,
    .code-block-wrapper .token.attr-name {
  color: #0891b2;
}

.code-block-wrapper .token.\!key {
  color: #0891b2 !important;
}

.code-block-wrapper .token.value,
    .code-block-wrapper .token.attr-value,
    .code-block-wrapper .token.status-code {
  color: #059669;
}

.code-block-wrapper .token.\!value {
  color: #059669 !important;
}

.code-block-wrapper .token.path,
    .code-block-wrapper .token.host,
    .code-block-wrapper .token.request-target,
    .code-block-wrapper .token.url {
  color: #64748b;
}


    .code-block-wrapper .token.\!host {
  color: #64748b !important;
}


    .code-block-wrapper .token.\!url {
  color: #64748b !important;
}

.code-block-wrapper .token.query-delimiter,
    .code-block-wrapper .token.pair-delimiter,
    .code-block-wrapper .token.path-separator,
    .code-block-wrapper .token.scheme-delimiter,
    .code-block-wrapper .token.authority-delimiter {
  color: var(--ink-muted);
}

.dark .code-block-wrapper .token.method,
    .dark .code-block-wrapper .token.header-name,
    .dark .code-block-wrapper .token.scheme,
    .dark .code-block-wrapper .token.http-version {
  color: #93c5fd;
}

.dark .code-block-wrapper .token.key,
    .dark .code-block-wrapper .token.attr-name {
  color: #67e8f9;
}

.dark .code-block-wrapper .token.\!key {
  color: #67e8f9 !important;
}

.dark .code-block-wrapper .token.value,
    .dark .code-block-wrapper .token.attr-value,
    .dark .code-block-wrapper .token.status-code {
  color: #6ee7b7;
}

.dark .code-block-wrapper .token.\!value {
  color: #6ee7b7 !important;
}

.dark .code-block-wrapper .token.path,
    .dark .code-block-wrapper .token.host,
    .dark .code-block-wrapper .token.request-target,
    .dark .code-block-wrapper .token.url {
  color: #94a3b8;
}


    .dark .code-block-wrapper .token.\!host {
  color: #94a3b8 !important;
}


    .dark .code-block-wrapper .token.\!url {
  color: #94a3b8 !important;
}

/* presence status dots in docs — bg via inline hex - 16.07.2026 19:40 */

.dev-shell .dev-presence-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #26262c;
  vertical-align: middle;
}

.dev-shell .bg-surface.border-border {
  border-color: var(--border) !important;
}

/* tablo shell — kod bloklariyla ayni dil - 16.07.2026 18:32 */

.dev-shell .custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 0.8125rem;
  min-width: 100%;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dev-shell .table-wrapper,
    .dev-shell div.overflow-x-auto:has(.custom-table),
    .dev-shell div.overflow-x-auto {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
}

@media (max-width: 640px) {
  .dev-shell .table-wrapper,
        .dev-shell div.overflow-x-auto:has(.custom-table),
        .dev-shell div.overflow-x-auto {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0;
  }

  .dev-shell .table-wrapper .custom-table,
        .dev-shell div.overflow-x-auto:has(.custom-table) .custom-table,
        .dev-shell div.overflow-x-auto .custom-table {
    min-width: 560px;
  }
}

.dev-shell .custom-table thead {
  background: color-mix(in srgb, var(--foreground) 4%, var(--surface-subtle));
}

.dev-shell .custom-table thead tr {
  border-bottom: none !important;
  background: transparent !important;
}

.dev-shell .custom-table thead th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}

.dev-shell .custom-table thead tr.bg-ink-50,
    .dev-shell .custom-table thead tr.dark\:bg-surface-subtle,
    .dev-shell .custom-table thead tr.border-b-2 {
  background: transparent !important;
  border-bottom: none !important;
}

.dev-shell .custom-table tbody tr {
  border: none !important;
  background: transparent;
  transition: background-color 140ms ease;
}

.dev-shell .custom-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.dev-shell .custom-table tbody tr:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.dev-shell .custom-table tbody tr.hover\:bg-ink-50\/50:hover,
    .dev-shell .custom-table tbody tr.dark\:hover\:bg-surface-subtle\/50:hover,
    .dev-shell .custom-table tbody tr.dark\:hover\:bg-surface-subtle:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent) !important;
}

.dev-shell .custom-table tbody td {
  padding: 0.8rem 1rem;
  color: var(--ink-muted);
  vertical-align: middle;
  border: none !important;
  line-height: 1.45;
  font-size: 0.8125rem;
}

.dev-shell .custom-table tbody td:first-child,
    .dev-shell .custom-table tbody td.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--foreground);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

/* tip / status chip — renkli, flat dark-safe - 16.07.2026 18:42 */

.dev-shell .custom-table td span.rounded,
    .dev-shell .custom-table td span.rounded-lg,
    .dev-shell .custom-table td span[class*="rounded"] {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1.3;
  text-transform: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* string / post — blue - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-blue-100 {
  background: color-mix(in srgb, #60a5fa 18%, var(--background)) !important;
  color: #93c5fd !important;
  border-color: color-mix(in srgb, #60a5fa 28%, transparent) !important;
}

/* yes / required / get — green - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-green-100 {
  background: color-mix(in srgb, #34d399 16%, var(--background)) !important;
  color: #6ee7b7 !important;
  border-color: color-mix(in srgb, #34d399 28%, transparent) !important;
}

/* number / boolean — violet - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-ink-100 {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

/* array / object — indigo - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-indigo-100 {
  background: color-mix(in srgb, #818cf8 16%, var(--background)) !important;
  color: #a5b4fc !important;
  border-color: color-mix(in srgb, #818cf8 28%, transparent) !important;
}

/* recommended / optional — amber - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-yellow-100,
    .dev-shell .custom-table td span.bg-amber-100 {
  background: color-mix(in srgb, #fbbf24 14%, var(--background)) !important;
  color: #fcd34d !important;
  border-color: color-mix(in srgb, #fbbf24 26%, transparent) !important;
}

/* no / muted — zinc - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-gray-100 {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .custom-table td span.bg-red-100,
    .dev-shell .custom-table td span.bg-purple-100 {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}

.dark input[type="checkbox"]:not(:checked) {
  background-color: var(--surface-subtle);
  border-color: var(--border);
}

.dark input[type="checkbox"]:checked {
  background-color: var(--foreground);
  border-color: var(--foreground);
}

/* nokta grid — svg pattern, css gradient yok - 16.07.2026 18:05 */

.dev-main {
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23171717' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.dark .dev-main {
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.06'/%3E%3C/svg%3E");
}

.dev-eyebrow {
  margin: 0 0 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-eyebrow--tight {
  margin-bottom: 0.4rem;
}

.dev-hero__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--foreground);
}

.dev-hero__lead {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.dev-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* cta chrome: cengel-btn — legacy primary/ghost removed - 02.08.2026 00:05 */

.dev-panel {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
}

.dev-panel__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-panel__hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.dev-steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dev-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.dev-steps li > i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--foreground);
  opacity: 0.55;
}

.dev-steps li > span {
  min-width: 0;
}

.dev-steps a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .dev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
  }

  .dev-panel {
    padding: 1.5rem 1.6rem;
  }
}

.dev-card {
  position: relative;
  display: block;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.3rem 1.35rem;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.dev-card:hover {
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.dev-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: 0.95rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--foreground);
  font-size: 1.05rem;
}

.dev-card__title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-card__desc {
  margin: 0;
  padding-right: 1.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.dev-card__go {
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.dev-card:hover .dev-card__go {
  opacity: 1;
  transform: translateX(0);
  color: var(--foreground);
}

/* nokta grid koyu chrome uzerine (header/sidebar her zaman dark) - 16.07.2026 18:08 */

.dev-sidebar {
  border-right: 1px solid var(--border);
  background-color: #0f0f13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

.dev-sidebar__head,
    .dev-drawer__head {
  padding: 1rem 1rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.dev-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dev-sidebar__kicker,
    .dev-drawer__kicker {
  margin: 0 0 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-sidebar__title,
    .dev-drawer__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface-subtle);
  color: var(--ink-muted);
  transition: color 140ms ease, border-color 140ms ease;
}

.dev-drawer__close:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

/* nav stack — tek spacing sistemi - 16.07.2026 17:40 */

.dev-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
}

.dev-nav-item {
  min-width: 0;
}

.dev-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.dev-nav-link > span:not(.dev-nav-caret) {
  flex: 1;
  min-width: 0;
}

.dev-nav-link i:first-child {
  width: 1rem;
  flex-shrink: 0;
  font-size: 0.9375rem;
  line-height: 1;
  text-align: center;
  color: inherit;
}

.dev-nav-link:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.dev-nav-item.active > .dev-nav-link,
    a.dev-nav-link.active {
  background: var(--surface-subtle);
  color: var(--foreground);
  font-weight: 600;
}

.dev-nav-item.\!active > .dev-nav-link,
    a.dev-nav-link.\!active {
  background: var(--surface-subtle) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.dev-nav-caret {
  flex-shrink: 0;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1;
  opacity: 0.65;
  transition: transform 160ms ease;
}

.dev-nav-soon {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-subtle);
}

.dev-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.125rem 0 0.25rem;
}

.dev-nav-sublink {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0.3125rem 0.625rem 0.3125rem 1.75rem;
  border-radius: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 140ms ease, color 140ms ease;
}

.dev-nav-sublink:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.dev-nav-sublink.section-active {
  color: var(--foreground);
  font-weight: 600;
  background: var(--surface-subtle);
}

.dev-nav-section {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0.625rem;
  margin: 0 0 0.375rem;
}

.dev-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.dev-shell {
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, Arial, sans-serif;
  color-scheme: dark;
}

.dark .dev-shell {
  background: var(--background);
}

/* koyu chrome: header + sidebar (light/dark ayni) - 16.07.2026 18:08 */

.dev-header,
    .dev-sidebar,
    #mobileSidebar {
  background-color: #0f0f13;
  color: #e4e4e7;
  --background: #0f0f13;
  --surface: #0f0f13;
  --surface-subtle: #17171c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --ink-400: #a1a1aa;
  --ink-500: #a1a1aa;
  --ink-600: #d4d4d8;
  --ink-700: #e4e4e7;
  --ink-900: #ffffff;
  --border: #26262c;
  --brand-50: #0f0f13;
  --brand-100: #17171c;
  --brand-200: #26262c;
  --brand-300: #3f3f46;
  --brand-400: #71717a;
  --brand-500: #a1a1aa;
  --brand-600: #e4e4e7;
  --brand-700: #f4f4f5;
  --brand-800: #fafafa;
  --brand-900: #ffffff;
}

.dev-header {
  height: 3.75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.dev-header__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.dev-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  padding: 0 0.85rem;
}

@media (min-width: 640px) {
  .dev-header__inner {
    padding: 0 1.25rem;
  }
}

.dev-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
}

.dev-brand__img {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.dev-brand__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.12rem;
}

.dev-brand__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.dev-brand__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--foreground);
}

.dev-brand__meta {
  margin-top: 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-header__mid {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .dev-header__mid {
    display: flex;
  }
}

.dev-header__path {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.dev-header__path em {
  font-style: normal;
  color: var(--foreground);
}

.dev-header__end {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dev-header__end {
    display: flex;
  }
}

.dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-chip__dot {
  width: 0.35rem;
  height: 0.35rem;
  background: var(--foreground);
  animation: dev-chip-pulse 1.6s ease-in-out infinite;
}

@keyframes dev-chip-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-chip__dot {
    animation: none;
  }
}

.dev-hud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  transition: background-color 140ms ease, border-color 140ms ease;
  cursor: pointer;
}

.dev-hud-btn:hover,
    .dev-hud-btn[aria-expanded="true"] {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.dev-hud-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* brand — logo, kutu yok - 15.08.2026 18:50 */

.dev-brand {
  transition: opacity 160ms ease;
}

.dev-brand:hover .dev-brand__name {
  color: #ffffff;
}

.dev-brand__img {
  transition: transform 160ms ease;
}

.dev-brand:hover .dev-brand__img {
  transform: scale(1.04);
}

/* chip live — soft zinc pulse - 16.07.2026 18:16 */

.dev-chip {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.dev-chip:hover {
  border-color: color-mix(in srgb, var(--foreground) 36%, transparent);
  color: var(--foreground);
  background: var(--surface-subtle);
}

.dev-chip__dot {
  border-radius: 1px;
}

/* hud btn active press - 16.07.2026 18:16 */

.dev-hud-btn:active,
    .dev-menu-btn:active {
  transform: translateY(1px);
}

/* cta chrome: cengel-btn — legacy primary/ghost motion removed - 02.08.2026 00:05 */

.dev-hud-btn:focus-visible,
    .dev-menu-btn:focus-visible,
    .dev-card:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

/* cards — surface lift + icon invert - 16.07.2026 18:20 */

.dev-card {
  background: color-mix(in srgb, var(--foreground) 2.2%, var(--background));
  transition:
            border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
            background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
            transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dev-card:hover {
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 38%, transparent);
}

.dev-card__icon {
  transition:
            background-color 180ms ease,
            color 180ms ease,
            border-color 180ms ease;
}

.dev-card:hover .dev-card__icon {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.dev-card__title {
  transition: letter-spacing 180ms ease;
}

.dev-card:hover .dev-card__title {
  letter-spacing: -0.01em;
}

.dev-card__go {
  transition:
            opacity 180ms ease,
            transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
            color 180ms ease;
}

.dev-card:hover .dev-card__go {
  transform: translateX(2px);
}

/* panels — quiet hover - 16.07.2026 18:20 */

.dev-panel {
  position: relative;
  background: color-mix(in srgb, var(--foreground) 1.6%, var(--background));
  transition: border-color 180ms ease, background-color 180ms ease;
}

.dev-panel:hover {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
}

@media (min-width: 1024px) {
  .dev-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* hero accent + mobile overflow - 16.07.2026 18:16 */

.dev-hero {
  position: relative;
  padding-top: 0.25rem;
}

.dev-hero::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1.1rem;
  background: var(--foreground);
}

@media (max-width: 640px) {
  main.dev-main, main .doc_content {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  .code-block-wrapper, .table-wrapper, div.overflow-x-auto:has(.custom-table) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-brand__img,
        .dev-card,
        .dev-card__icon,
        .dev-card__go {
    transition: none;
    transform: none;
  }
}

/* flat sections — nested card yok - 16.07.2026 18:55 */

.dev-shell .doc_content .dev-section,
    .dev-shell .doc_content .bg-surface.rounded-xl,
    .dev-shell .doc_content .bg-surface.rounded-2xl,
    .dev-shell .doc_content .bg-surface.border,
    .dev-shell .doc_content .bg-surface.border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.dev-shell .doc_content .dev-section:last-child,
    .dev-shell .doc_content > .space-y-5 > .bg-surface:last-child,
    .dev-shell .doc_content > .space-y-6 > .bg-surface:last-child,
    .dev-shell .doc_content > .space-y-8 > .bg-surface:last-child,
    .dev-shell .doc_content > .dev-doc-stack > .dev-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.dev-shell .doc_content .dev-doc-stack,
    .dev-shell .doc_content > .space-y-5,
    .dev-shell .doc_content > .space-y-6,
    .dev-shell .doc_content > .space-y-8,
    .dev-shell .doc_content > div.space-y-5,
    .dev-shell .doc_content > div.space-y-6,
    .dev-shell .doc_content > div.space-y-8 {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.dev-shell .doc_content > .space-y-5 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > .space-y-6 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > .space-y-8 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-5 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-6 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

/* section titles - 16.07.2026 18:55 */

.dev-shell .doc_content .dev-section > .flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}

.dev-shell .doc_content .dev-section > h2,
    .dev-shell .doc_content .bg-surface > h2,
    .dev-shell .doc_content .dev-section > h3,
    .dev-shell .doc_content .bg-surface > h3,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}

.dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

.dev-shell .doc_content .dev-section__lead {
  margin: -0.35rem 0 1.15rem;
  max-width: 40rem;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.dev-shell .doc_content .dev-callout {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.dev-shell .doc_content .dev-callout strong {
  color: var(--foreground);
}

/* method / type / status chips — renkli - 16.07.2026 18:42 */

.dev-shell .doc_content span.bg-green-100,
    .dev-shell .doc_content span.bg-blue-100,
    .dev-shell .doc_content span.bg-amber-100,
    .dev-shell .doc_content span.bg-yellow-100,
    .dev-shell .doc_content span.bg-red-100,
    .dev-shell .doc_content span.bg-purple-100,
    .dev-shell .doc_content span.bg-indigo-100,
    .dev-shell .doc_content span.bg-ink-100,
    .dev-shell .doc_content span.bg-gray-100 {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dev-shell .doc_content span.bg-blue-100 {
  background: color-mix(in srgb, #60a5fa 18%, var(--background)) !important;
  color: #93c5fd !important;
  border-color: color-mix(in srgb, #60a5fa 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-green-100 {
  background: color-mix(in srgb, #34d399 16%, var(--background)) !important;
  color: #6ee7b7 !important;
  border-color: color-mix(in srgb, #34d399 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-ink-100 {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-indigo-100 {
  background: color-mix(in srgb, #818cf8 16%, var(--background)) !important;
  color: #a5b4fc !important;
  border-color: color-mix(in srgb, #818cf8 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-yellow-100,
    .dev-shell .doc_content span.bg-amber-100 {
  background: color-mix(in srgb, #fbbf24 14%, var(--background)) !important;
  color: #fcd34d !important;
  border-color: color-mix(in srgb, #fbbf24 26%, transparent) !important;
}

.dev-shell .doc_content span.bg-gray-100 {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .doc_content span.bg-red-100,
    .dev-shell .doc_content span.bg-purple-100 {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}

/* callout boxes flatten - 16.07.2026 18:55 */

.dev-shell .doc_content .bg-amber-50,
    .dev-shell .doc_content .bg-blue-50,
    .dev-shell .doc_content .bg-green-50,
    .dev-shell .doc_content .bg-red-50 {
  background: color-mix(in srgb, var(--foreground) 3.5%, var(--background)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  color: var(--ink-muted) !important;
}

.dev-shell .doc_content .border-l-4 {
  border-left-width: 2px !important;
  border-left-color: var(--foreground) !important;
  padding-left: 1rem !important;
  margin: 0.75rem 0;
}

.dev-shell .doc_content ul.space-y-2,
    .dev-shell .doc_content ol.space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.dev-shell .doc_content ul.space-y-2 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content ol.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.dev-shell .doc_content ul.space-y-2 > li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  line-height: 1.5;
}

.dev-shell .doc_content ul.space-y-2 > li > i {
  margin: 0.15rem 0 0 !important;
  color: var(--foreground);
  opacity: 0.75;
  flex-shrink: 0;
}

.dev-shell .doc_content ol.list-decimal {
  padding-left: 1.25rem;
  list-style: decimal;
}

.dev-shell .doc_content > .dev-page-head {
  margin-bottom: 1.75rem;
}

.dev-shell .doc_content > .dev-hero {
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .dev-shell .doc_content > .dev-page-head {
    margin-bottom: 2rem;
  }

  .dev-shell .doc_content > .dev-hero {
    margin-bottom: 2.5rem;
  }
}

.dev-shell .doc_content > .dev-grid,
    .dev-shell .doc_content > .dev-panel {
  margin-bottom: 1.15rem;
}

.dev-shell .doc_content > .dev-panel:last-child,
    .dev-shell .doc_content > .dev-grid:last-child {
  margin-bottom: 0;
}

/* dis body>main flex-1 — shell parenti doldurup footer'i alta iter - 16.07.2026 19:55 */

.dev-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100vh;
}

.dev-shell__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

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

.dev-main > .doc_content {
  flex: 1 1 auto;
}

.dev-footer {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #0f0f13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  color: #e4e4e7;
  border-top: 1px solid #26262c;
  --background: #0f0f13;
  --surface-subtle: #17171c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --border: #26262c;
}

.dev-footer__inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 1.35rem;
}

@media (min-width: 640px) {
  .dev-footer__inner {
    padding: 2rem 1.5rem 1.5rem;
  }
}

.dev-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .dev-footer__grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 0.7fr));
    gap: 2rem;
    align-items: start;
  }
}

.dev-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.dev-footer__blurb {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a1a1aa;
}

.dev-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.dev-footer__label {
  margin: 0 0 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #71717a;
}

.dev-footer__link {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 140ms ease;
}

.dev-footer__link:hover {
  color: #fafafa;
}

.dev-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #26262c;
  background: #17171c;
}

@media (min-width: 768px) {
  .dev-footer__base {
    flex-direction: row;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.dev-footer__copy {
  font-size: 0.75rem;
  color: #71717a;
}

.dev-footer__social {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dev-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid #26262c;
  border-radius: 0.5rem;
  background: #0f0f13;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}

.dev-footer__social-btn i {
  font-size: 1.05rem;
  line-height: 1;
}

.dev-footer__social-btn:hover {
  color: #e4e4e7;
  border-color: #3f3f46;
}

/* custom scroll — koyu hud; sayfa + sidebar + kod/tablo - 16.07.2026 20:05 */

html:has(.dev-shell) {
  --cengel-scroll-size: 6px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: #3f3f46;
  --cengel-scroll-thumb-hover: #71717a;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

html:has(.dev-shell)::-webkit-scrollbar-track {
  background: transparent;
}

html:has(.dev-shell)::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

html:has(.dev-shell)::-webkit-scrollbar-thumb:hover {
  background-color: #71717a;
}

html:has(.dev-shell)::-webkit-scrollbar-corner {
  background: transparent;
}

.dev-sidebar,
    #mobileSidebar,
    .dev-shell .code-block-wrapper,
    .dev-shell div.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

.dev-sidebar::-webkit-scrollbar,
    #mobileSidebar::-webkit-scrollbar,
    .dev-shell .code-block-wrapper::-webkit-scrollbar,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.dev-sidebar::-webkit-scrollbar-track,
    #mobileSidebar::-webkit-scrollbar-track,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-track,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.dev-sidebar::-webkit-scrollbar-thumb,
    #mobileSidebar::-webkit-scrollbar-thumb,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-thumb,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.dev-sidebar::-webkit-scrollbar-thumb:hover,
    #mobileSidebar::-webkit-scrollbar-thumb:hover,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-thumb:hover,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background-color: #71717a;
}

.dev-sidebar::-webkit-scrollbar-corner,
    #mobileSidebar::-webkit-scrollbar-corner,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-corner,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-corner {
  background: transparent;
}

html.aero-ui,
  html.aero-ui body {
  background-image: var(--gradient-canvas);
  background-attachment: fixed;
  background-color: var(--background);
}

html.aero-ui .eco-header,
  .aero-ui .eco-header {
  background: var(--gradient-glass);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  border-bottom-color: var(--border);
}

html.aero-ui #account-static-sidebar,
  .aero-ui #account-static-sidebar {
  position: relative;
  z-index: 30;
  background: var(--gradient-glass);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  box-shadow: inset -1px 0 0 var(--border-highlight);
}

html.aero-ui .eco-header-dropdown {
  background: var(--aero-glass-strong);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-menu,
  html.aero-ui [data-overflow-dropdown-panel] {
  background: var(--aero-glass-strong);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .space-card,
  html.aero-ui .bm-card,
  html.aero-ui .post-card,
  .aero-ui .space-card,
  .aero-ui .bm-card,
  .aero-ui .post-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .space-card:hover,
  html.aero-ui .bm-card:hover,
  .aero-ui .space-card:hover,
  .aero-ui .bm-card:hover {
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .auth-page-shell .auth-surface-card {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .bm-filters,
  html.aero-ui .account-split__content-pad > .rounded-\[1\.25rem\],
  .aero-ui .aero-well {
  background: color-mix(in srgb, var(--aero-aqua) 6%, var(--surface-subtle));
  box-shadow: inset 0 1px 2px rgba(20, 50, 80, 0.08);
  border: 1px solid var(--border-low);
}

html.aero-ui .initial-loader {
  background-image: var(--gradient-canvas);
  background-color: #eef3f8;
}

html.dark.aero-ui .initial-loader {
  background: #0f0f13;
  background-image: linear-gradient(165deg, #0a0b0e 0%, #0f0f13 45%, #0c0e12 100%);
}

html.aero-ui .cengel-btn,
  .aero-ui .cengel-btn,
  html.aero-ui .auth-page-shell .auth-btn-primary,
  html.aero-ui .auth-page-shell .auth-btn-secondary {
  transition:
      background-color 120ms ease,
      border-color 120ms ease,
      color 120ms ease,
      box-shadow 120ms ease,
      filter 120ms ease,
      transform 100ms ease;
}

html.aero-ui .cengel-btn--primary,
  .aero-ui .cengel-btn--primary {
  background: var(--gradient-btn-aqua);
  color: #0b2a36;
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

html.aero-ui .cengel-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
  .aero-ui .cengel-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 1;
  filter: brightness(1.05);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
  .aero-ui .cengel-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.96);
  box-shadow: inset 0 2px 4px rgba(15, 40, 60, 0.22);
  transform: translateY(1px);
}

html.dark.aero-ui .cengel-btn--primary {
  background: var(--gradient-btn-aqua);
  color: #e8f4f8;
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #0a1820);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

html.aero-ui .cengel-btn--secondary,
  .aero-ui .cengel-btn--secondary {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.dark.aero-ui .cengel-btn--secondary {
  color: var(--foreground);
  filter: none;
}

html.aero-ui .cengel-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
  .aero-ui .cengel-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--gradient-btn-secondary);
  filter: brightness(1.03);
}

html.dark.aero-ui .cengel-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.12);
}

html.aero-ui .cengel-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
  .aero-ui .cengel-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--aero-aqua) 10%, transparent);
}

html.dark.aero-ui .cengel-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
}

html.aero-ui .cengel-btn--danger,
  .aero-ui .cengel-btn--danger {
  background: linear-gradient(180deg, #f07171 0%, #dc2626 55%, #b91c1c 100%);
  border-color: #b91c1c;
  box-shadow: var(--shadow-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.aero-ui .cengel-btn:focus-visible,
  .aero-ui .cengel-btn:focus-visible,
  html.aero-ui .auth-page-shell .auth-btn-primary:focus-visible,
  html.aero-ui .auth-page-shell .auth-btn-secondary:focus-visible {
  outline: 2px solid var(--aero-focus-ring);
  outline-offset: 2px;
}

html.aero-ui .auth-page-shell .auth-btn-primary {
  background: var(--gradient-btn-primary);
  border-color: #3d1250;
  box-shadow: var(--shadow-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html.aero-ui .auth-page-shell .auth-btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

html.aero-ui .auth-page-shell .auth-btn-secondary {
  background: var(--gradient-btn-secondary);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.dark.aero-ui .auth-page-shell .auth-btn-primary {
  background: linear-gradient(180deg, #f4f4f5 0%, #d4d4d8 100%);
  color: #18181b;
  border-color: transparent;
  box-shadow: var(--shadow-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html.aero-ui .auth-field,
  html.aero-ui .auth-page-shell .auth-field,
  html.aero-ui .bm-add-form,
  html.aero-ui input[type="text"]:not(#eco-search-input),
  html.aero-ui input[type="email"],
  html.aero-ui input[type="password"],
  html.aero-ui input[type="url"],
  html.aero-ui input[type="tel"],
  html.aero-ui input[type="number"],
  html.aero-ui input[type="search"]:not(#eco-search-input),
  html.aero-ui textarea:not(.ann-compose__textarea):not(.post-comment-composer__text):not(.post-composer__text) {
  background-color: var(--aero-glass);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
  color: var(--foreground);
  caret-color: var(--foreground);
}

html.aero-ui .auth-field::-moz-placeholder, html.aero-ui input[type="text"]:not(#eco-search-input)::-moz-placeholder, html.aero-ui input[type="email"]::-moz-placeholder, html.aero-ui input[type="password"]::-moz-placeholder, html.aero-ui input[type="url"]::-moz-placeholder, html.aero-ui input[type="tel"]::-moz-placeholder, html.aero-ui input[type="number"]::-moz-placeholder, html.aero-ui input[type="search"]:not(#eco-search-input)::-moz-placeholder, html.aero-ui textarea:not(.ann-compose__textarea):not(.post-comment-composer__text):not(.post-composer__text)::-moz-placeholder {
  color: var(--ink-muted);
}

html.aero-ui .auth-field::placeholder,
  html.aero-ui input[type="text"]:not(#eco-search-input)::placeholder,
  html.aero-ui input[type="email"]::placeholder,
  html.aero-ui input[type="password"]::placeholder,
  html.aero-ui input[type="url"]::placeholder,
  html.aero-ui input[type="tel"]::placeholder,
  html.aero-ui input[type="number"]::placeholder,
  html.aero-ui input[type="search"]:not(#eco-search-input)::placeholder,
  html.aero-ui textarea:not(.ann-compose__textarea):not(.post-comment-composer__text):not(.post-composer__text)::placeholder {
  color: var(--ink-muted);
}

html.aero-ui .auth-field:focus,
  html.aero-ui .auth-page-shell .auth-field:focus,
  html.aero-ui input[type="text"]:not(#eco-search-input):focus,
  html.aero-ui input[type="email"]:focus,
  html.aero-ui input[type="password"]:focus,
  html.aero-ui input[type="url"]:focus,
  html.aero-ui input[type="tel"]:focus,
  html.aero-ui input[type="number"]:focus,
  html.aero-ui input[type="search"]:not(#eco-search-input):focus,
  html.aero-ui textarea:not(.ann-compose__textarea):not(.post-comment-composer__text):not(.post-composer__text):focus {
  background-color: var(--aero-glass-strong);
  background-image: none;
  border-color: var(--border-low);
  color: var(--foreground);
}

html.aero-ui input:-webkit-autofill,
  html.aero-ui input:-webkit-autofill:hover,
  html.aero-ui input:-webkit-autofill:focus,
  html.aero-ui textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
  box-shadow: var(--shadow-inset-bevel), inset 0 0 0 1000px var(--aero-glass-strong);
  border-color: var(--border-low);
}

html.aero-ui .cc-checkbox,
  .aero-ui .cc-checkbox,
  html.aero-ui .auth-page-shell .cc-checkbox {
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .cs-select__trigger,
  .aero-ui .cs-select__trigger,
  html.aero-ui .auth-page-shell .cs-select__trigger {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-btn,
  .aero-ui .cengel-btn,
  html.aero-ui .auth-page-shell .auth-btn-primary,
  html.aero-ui .auth-page-shell .auth-btn-secondary,
  html.aero-ui .space-card,
  html.aero-ui .bm-card,
  .aero-ui .space-card,
  .aero-ui .bm-card {
  transition-property: background-color, border-color, color, box-shadow, filter, transform, opacity;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.aero-ui .cengel-btn,
    .aero-ui .cengel-btn,
    html.aero-ui .auth-page-shell .auth-btn-primary,
    html.aero-ui .auth-page-shell .auth-btn-secondary,
    html.aero-ui .space-card,
    html.aero-ui .bm-card,
    .aero-ui .space-card,
    .aero-ui .bm-card,
    html.aero-ui .cengel-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
    .aero-ui .cengel-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
    transition: none;
    transform: none;
    filter: none;
  }
}

html.aero-ui .auth-page-shell {
  background-image:
      radial-gradient(ellipse 80% 50% at 20% 10%, rgba(126, 200, 232, 0.45), transparent 55%),
      radial-gradient(ellipse 70% 45% at 85% 20%, rgba(180, 160, 220, 0.28), transparent 50%),
      radial-gradient(ellipse 60% 40% at 50% 90%, rgba(91, 184, 212, 0.22), transparent 55%),
      var(--gradient-canvas);
  background-attachment: fixed;
}

html.dark.aero-ui .auth-page-shell {
  background-image:
      radial-gradient(ellipse 70% 40% at 12% 0%, rgba(30, 70, 95, 0.22), transparent 55%),
      radial-gradient(ellipse 60% 35% at 90% 10%, rgba(50, 30, 70, 0.16), transparent 50%),
      var(--gradient-canvas);
}

html.aero-ui .auth-page-shell .auth-surface-card {
  background-color: transparent;
  background-image: var(--gradient-glass);
  color: var(--foreground);
}

html.dark.aero-ui .auth-page-shell .auth-surface-card {
  background-color: rgba(14, 16, 20, 0.96) !important;
  background-image: var(--gradient-glass);
  border: 1px solid var(--border-low);
}

html.aero-ui .auth-page-shell .auth-footer-bar {
  background: rgba(255, 255, 255, 0.28);
  border-top: 1px solid var(--border-highlight);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

html.dark.aero-ui .auth-page-shell .auth-footer-bar {
  background: rgba(8, 9, 12, 0.9);
  border-top-color: rgba(100, 130, 160, 0.14);
  box-shadow: inset 0 1px 0 rgba(180, 200, 220, 0.05);
}

html.aero-ui .eco-header-action__btn,
  html.aero-ui .eco-header-user__btn {
  background: var(--gradient-btn-secondary);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .eco-header-action__btn:hover,
  html.aero-ui .eco-header-user__btn:hover {
  filter: brightness(1.04);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.dark.aero-ui .eco-header-action__btn:hover,
  html.dark.aero-ui .eco-header-user__btn:hover {
  filter: brightness(1.12);
}

html.aero-ui #eco-products-button {
  width: var(--rail-btn-size);
  height: var(--rail-btn-size);
  background: var(--gradient-glass);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  color: var(--eco-icon-hover);
}

html.aero-ui #eco-products-button:hover,
  html.aero-ui #eco-products-button[aria-expanded="true"] {
  background: var(--gradient-btn-secondary);
  filter: none;
}

html.aero-ui .eco-header-search {
  background: var(--gradient-glass);
  border: 1px solid var(--border-low);
  box-shadow:
      inset 0 1px 2px rgba(20, 50, 80, 0.08),
      var(--shadow-inset-bevel);
}

html.aero-ui .eco-header-search:focus-within {
  background: var(--aero-glass-strong);
  border-color: color-mix(in srgb, var(--aero-aqua) 55%, var(--border-low));
  box-shadow:
      inset 0 1px 2px rgba(20, 50, 80, 0.06),
      0 0 0 2px color-mix(in srgb, var(--aero-aqua) 28%, transparent),
      var(--shadow-inset-bevel);
}

html.aero-ui .eco-header-search #eco-search-input {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--eco-search-text);
}

html.aero-ui .eco-header-search__kbd {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
  color: var(--eco-kbd-color);
}

html.dark.aero-ui .eco-header-search {
  background: var(--gradient-glass);
  box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.45),
      var(--shadow-inset-bevel);
}

html.dark.aero-ui .eco-header-search:focus-within {
  background: var(--aero-glass-strong);
  border-color: color-mix(in srgb, var(--aero-aqua) 50%, var(--border-low));
  box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.4),
      0 0 0 2px color-mix(in srgb, var(--aero-aqua) 22%, transparent),
      var(--shadow-inset-bevel);
}

html.aero-ui .cengel-rail-item {
  background: none;
  box-shadow: none;
}

html.aero-ui .cengel-rail-item__icon-wrap {
  background: var(--gradient-glass);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  box-sizing: border-box;
}

html.aero-ui .cengel-rail-item:hover .cengel-rail-item__icon-wrap,
  html.aero-ui .cengel-rail-item:focus-visible .cengel-rail-item__icon-wrap {
  background: var(--gradient-btn-secondary);
}

html.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon-wrap,
  html.aero-ui .cengel-rail-item[data-rail-active="true"]:hover .cengel-rail-item__icon-wrap {
  background: var(--gradient-btn-aqua);
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 55%, var(--border-low));
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-rail-spaces-group:has([data-rail-spaces-expanded="true"]):has([data-rail-space-id]),
  html.aero-ui .cengel-rail-spaces-group:has([data-rail-messages-expanded="true"]):has([data-rail-dm-id]) {
  background: color-mix(in srgb, var(--aero-aqua) 12%, transparent);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--fill,
  html.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--outline,
  html.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--solo {
  color: #0b2a36;
}

html.dark.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--fill,
  html.dark.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--outline,
  html.dark.aero-ui .cengel-rail-item[data-rail-active="true"] .cengel-rail-item__icon--solo {
  color: #e8f4f8;
}

html.aero-ui .cengel-rail-item--space .cengel-rail-item__icon-wrap,
  html.aero-ui .cengel-rail-item--dm .cengel-rail-item__icon-wrap {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.aero-ui .cengel-rail-item--space[data-rail-active="true"] .cengel-rail-space-avatar,
  html.aero-ui .cengel-rail-item--dm[data-rail-active="true"] .cengel-rail-space-avatar {
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  outline: 1px solid var(--border-low);
  outline-offset: -1px;
}

html.aero-ui .account-nav-rail-bottom {
  background: transparent;
}

html.aero-ui .account-nav-rail-bottom::before {
  height: var(--rail-btn-size);
  background: var(--gradient-rail-fade);
}

html.aero-ui .cengel-rail-item__badge,
  html.aero-ui .cengel-rail-item__unread,
  html.aero-ui .eco-header-action__badge {
  border-color: var(--background);
}

html.aero-ui .sp-sidebar__tab--active,
  html.aero-ui .account-sidebar-nav-link[data-nav-active="true"] {
  background: var(--sidebar-active-bg);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .cengel-toast,
  html.aero-ui .cengel-banner,
  html.aero-ui .cengel-alert {
  background: var(--aero-glass-strong);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-tooltip,
  .aero-ui .cengel-tooltip {
  background: var(--aero-glass-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-elev-1);
}

html.aero-ui .cengel-modal__backdrop {
  background: rgba(30, 50, 70, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.dark.aero-ui .cengel-modal__backdrop {
  background: rgba(0, 0, 0, 0.52);
}

html.aero-ui .cengel-modal__panel,
  html.aero-ui .cengel-modal__panel--card,
  html.aero-ui .account-settings-modal__panel,
  html.aero-ui .space-settings-modal__panel,
  html.aero-ui .space-wizard-modal__panel,
  html.aero-ui .rich-presence-modal__panel,
  html.aero-ui .space-tab-modal__panel,
  html.aero-ui .game-start-modal__panel.cengel-modal__panel--card {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .account-settings-modal__header,
  html.aero-ui .space-settings-modal__header,
  html.aero-ui .space-wizard-modal__header,
  html.aero-ui .rich-presence-modal__header,
  html.aero-ui .space-tab-modal__header,
  html.aero-ui .rich-presence-modal__footer {
  border-color: var(--border-low);
}

html.aero-ui .account-settings-modal__sidebar,
  html.aero-ui .space-settings-modal__sidebar {
  background: color-mix(in srgb, var(--aero-aqua) 7%, transparent);
  border-right-color: var(--border-low);
}

html.aero-ui .account-settings-modal__user,
  html.aero-ui .space-settings-modal__space {
  border-bottom-color: var(--border-low);
}

html.aero-ui .account-settings-modal__nav-item:hover,
  html.aero-ui .space-settings-modal__nav-item:hover {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .account-settings-modal__nav-item--active,
  html.aero-ui .space-settings-modal__nav-item--active {
  background: var(--sidebar-active-bg);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .account-settings-modal__close-inner,
  html.aero-ui .space-settings-modal__close-inner,
  html.aero-ui .space-wizard-modal__close-inner,
  html.aero-ui .rich-presence-modal__close-inner,
  html.aero-ui .space-tab-modal__close,
  html.aero-ui .game-start__close {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .account-settings-modal__close:hover .account-settings-modal__close-inner,
  html.aero-ui .space-settings-modal__close:hover .space-settings-modal__close-inner,
  html.aero-ui .space-wizard-modal__close:hover .space-wizard-modal__close-inner,
  html.aero-ui .rich-presence-modal__close:hover .rich-presence-modal__close-inner,
  html.aero-ui .space-tab-modal__close:hover,
  html.aero-ui .game-start__close:hover,
  html.aero-ui .game-start__close:focus-visible {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .account-settings-modal__loader-overlay,
  html.aero-ui .space-settings-modal__loader-overlay {
  background: color-mix(in srgb, var(--aero-glass-strong) 82%, transparent);
}

html.aero-ui .space-tab-type-card {
  border-color: var(--border-low);
}

html.aero-ui .space-tab-type-card--selected {
  background: var(--sidebar-active-bg);
  border-color: var(--border-low);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .report-modal__target,
  html.aero-ui .report-modal__target-icon {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .space-wizard-modal__dot--active {
  background: var(--aero-aqua-deep);
}

html.aero-ui #account-main-content.account-main--channel,
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--channel),
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--channel)
    > .account-split__content-pad {
  background: transparent;
}

html.aero-ui #spaces-sidebar {
  background: var(--gradient-glass);
  border-right-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui #spaces-sidebar .sp-sidebar {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

html.aero-ui #spaces-sidebar .spaces-sb-user {
  background: transparent;
  border-top-color: var(--border-low);
}

html.aero-ui .sp-sidebar__nav-divider,
  html.aero-ui .sp-sidebar__divider {
  background: var(--border-low);
}

html.aero-ui .spaces-home__hero,
  html.aero-ui .space-settings-panel,
  html.aero-ui .sp-settings-panel {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .board-box__chrome {
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui #account-main-content.account-main--channel .ann-compose {
  background: transparent;
  box-shadow: none;
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__box {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__box:focus-within {
  background: var(--aero-glass-strong);
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__textarea,
  html.aero-ui #account-main-content.account-main--channel .ann-compose__preview {
  background: transparent;
  box-shadow: none;
  border: 0;
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__charcount {
  background: var(--aero-glass-strong);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__tool-btn--attach {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui #account-main-content.account-main--channel .ann-compose__tool-btn:hover {
  filter: brightness(1.04);
}

html.aero-ui #account-main-content.account-main--channel
    .ann-compose__tool-btn--send.ann-compose__tool-btn--ready {
  background: var(--gradient-btn-aqua);
  color: #0b2a36;
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.dark.aero-ui #account-main-content.account-main--channel
    .ann-compose__tool-btn--send.ann-compose__tool-btn--ready {
  color: #e8f4f8;
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #0a1820);
}

html.aero-ui #account-main-content.account-main--channel
    .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:hover {
  background: var(--gradient-btn-aqua);
  color: #0b2a36;
  filter: brightness(1.05);
}

html.dark.aero-ui #account-main-content.account-main--channel
    .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:hover {
  color: #e8f4f8;
}

html.aero-ui .ch-channel-intro__action-card {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .ch-channel-intro__action-card:hover {
  background: var(--gradient-glass);
  filter: brightness(1.03);
}

html.aero-ui .ann-jump-present {
  color: var(--foreground);
}

html.aero-ui .ann-jump-present__chip {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .ann-jump-present:hover .ann-jump-present__chip,
  html.aero-ui .ann-jump-present__chip:hover {
  background: var(--aero-glass-strong);
  filter: brightness(1.04);
}

html.aero-ui .msg-date-divider__label {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .msg-unread-divider__label {
  background: var(--aero-glass-strong);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .ann-reply-pane {
  border-left-color: var(--border-low);
}

html.aero-ui .space-members-panel {
  background: var(--gradient-glass);
  border-left-color: var(--border-low);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  box-shadow: var(--shadow-elev-1);
}

html.aero-ui .space-members-panel__header {
  border-bottom-color: var(--border-low);
}

html.aero-ui .ann-card:hover {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .ann-card__hover-bar-group {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .ann-card__hover-bar .ann-card__hbtn:hover {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .ann-card__dropdown {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .ann-card__dditem:hover {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .ann-card__react-pill {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .ann-card__react-pill:hover {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .ann-card__react-pill--active,
  html.aero-ui .ann-card__react-pill--active:hover,
  html.dark.aero-ui .ann-card__react-pill--active,
  html.dark.aero-ui .ann-card__react-pill--active:hover {
  border-color: color-mix(in srgb, #5865f2 45%, transparent);
  background: color-mix(in srgb, #5865f2 16%, transparent);
  filter: none;
}

html.aero-ui .ann-card__react-pill--active:hover,
  html.dark.aero-ui .ann-card__react-pill--active:hover {
  filter: brightness(1.04);
}

html.aero-ui .ann-card__file {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .ann-card__file-dl-btn,
  html.aero-ui .ann-card__content.ann-markdown a.ann-card__file-dl-btn,
  html.aero-ui .ann-markdown a.ann-card__file-dl-btn {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .ann-card__file-dl-btn:hover,
  html.aero-ui .ann-card__content.ann-markdown a.ann-card__file-dl-btn:hover,
  html.aero-ui .ann-markdown a.ann-card__file-dl-btn:hover {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .ann-card__media {
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui [data-msg-media] {
  background: var(--gradient-glass);
}

html.aero-ui .cengel-audio-player {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-audio-player__play:hover {
  filter: brightness(1.06);
}

html.aero-ui .cengel-emoji-picker {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .cengel-emoji-picker__head {
  background: transparent;
  border-bottom-color: var(--border-low);
}

html.aero-ui .cengel-emoji-picker__search {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .ch-channel-intro__welcome-send {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .ch-channel-intro__welcome-send:hover {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .messages-sidebar {
  background: var(--gradient-glass);
  border-right-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .messages-sidebar__divider {
  background: var(--border-low);
}

html.aero-ui .messages-sidebar__new-icon {
  background: var(--aero-glass-strong);
  border: 1px solid var(--border-low);
  box-shadow: none;
  color: var(--foreground);
}

html.aero-ui .messages-sidebar__new-action:hover .messages-sidebar__new-icon,
  html.aero-ui .messages-sidebar__new-action[aria-expanded="true"] .messages-sidebar__new-icon {
  background: var(--aero-glass-strong);
  filter: brightness(1.04);
}

html.aero-ui .dm-list .dm-list__item:hover,
  html.aero-ui .messages-sidebar__new-action:hover {
  background-color: var(--sidebar-hover-bg);
}

html.aero-ui .dm-list .dm-list__item--active,
  html.aero-ui .dm-list .dm-list__item--active:hover,
  html.aero-ui .messages-sidebar__new-action[aria-expanded="true"],
  html.aero-ui .messages-sidebar__new-action[aria-expanded="true"]:hover {
  background-color: var(--sidebar-active-bg);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .messages-sidebar .spaces-sb-user {
  background: transparent;
  border-top-color: var(--border-low);
}

html.aero-ui .new-dm-modal__panel {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .new-dm-modal__search-wrap {
  background: var(--gradient-glass);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .new-dm-modal__item.space-member-row:hover,
  html.aero-ui .new-dm-modal__item.space-member-row:focus-visible {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .messages-main {
  background: transparent;
}

html.aero-ui .ch-channel-intro__avatar-fallback {
  background: var(--gradient-glass);
  border: 1px solid var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

@media (max-width: 1023.98px) {
  html.aero-ui .messages-sidebar {
    background: var(--gradient-glass);
    backdrop-filter: blur(var(--aero-blur-soft));
    -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  }

  html.aero-ui .messages-main {
    background: transparent;
  }
}

html.aero-ui .post-card {
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .eco-notif-menu {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-user-card .cengel-user-card__panel {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .cengel-user-card .cengel-user-card__avatar,
  html.aero-ui .cengel-user-card .cengel-user-card__avatar-wrap .presence-dot {
  border-color: var(--aero-glass-strong);
}

html.aero-ui .cengel-user-card .cengel-user-card__thought-bubble {
  background: var(--aero-glass-strong);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-user-card .cengel-user-card__thought-tail {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
}

html.aero-ui .cengel-user-card .cengel-user-card__locked,
  html.aero-ui .cengel-user-card .cengel-user-card__activity-card {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .cengel-user-card .cengel-user-card__activity-provider-badge {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .cengel-user-card .cengel-user-card__restricted,
  html.aero-ui .cengel-user-card .cengel-user-card__roles {
  border-top-color: var(--border-low);
}

html.aero-ui .cengel-user-card .sp-settings-role-add:hover {
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
  background: var(--sidebar-hover-bg);
  filter: brightness(1.04);
}

html.aero-ui .sp-settings-role-popover {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .sp-settings-role-popover__item:hover {
  background: var(--sidebar-hover-bg);
}

html.aero-ui .social-profile-public__panel {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur));
  -webkit-backdrop-filter: blur(var(--aero-blur));
}

html.aero-ui .social-profile-public__panel .cengel-user-card__avatar,
  html.aero-ui .social-profile-public__panel .cengel-user-card__avatar-wrap .presence-dot {
  border-color: var(--aero-glass-strong);
}

/* profil karti cam; halka kart zeminine esit - 22.08.2026 05:12 */

html.aero-ui .profile-sidebar-panel {
  --presence-dot-border: var(--aero-glass-strong);
}

html.aero-ui .profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar,
  html.aero-ui .profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap .presence-dot,
  html.aero-ui .profile-sidebar-panel .social-profile-public__panel .cengel-user-card__avatar-wrap--status .presence-dot {
  border-color: var(--presence-dot-border);
}

html.aero-ui .social-profile-public__panel .cengel-user-card__avatar-wrap--status:focus-visible {
  outline-color: var(--aero-focus-ring);
}

html.aero-ui .social-profile-public__panel .cengel-user-card__thought-bubble {
  background: var(--aero-glass-strong);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .social-profile-public__panel .cengel-user-card__thought-tail {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
}

html.aero-ui .social-profile-public__panel .cengel-user-card__activity-card {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .social-profile-public__panel .cengel-user-card__activity-provider-badge {
  background: var(--aero-glass-strong);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .social-profile-showcase__section,
  html.aero-ui .social-profile-showcase__aside {
  --showcase-box: var(--aero-glass-strong);
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .social-profile-showcase__head {
  border-bottom-color: var(--border-low);
}

html.aero-ui .social-profile-links-modal__list .social-profile-link-preview {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .social-profile-friend-preview,
  html.aero-ui .social-profile-friend-more {
  border-color: var(--aero-glass-strong);
}

html.aero-ui .social-profile-links-modal__list .social-profile-link-preview:hover,
  html.aero-ui .social-profile-friend-preview:hover img,
  html.aero-ui .social-profile-showcase__more-btn:hover {
  filter: brightness(1.03);
}

html.aero-ui .social-profile-public__restricted {
  border-top-color: var(--border-low);
}

html.aero-ui .post-composer,
  html.aero-ui .post-timeline__empty {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .post-composer__box {
  background: var(--aero-glass);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .post-composer__tool:hover,
  html.aero-ui .post-composer__tool[aria-expanded='true'] {
  background: var(--sidebar-hover-bg);
  filter: brightness(1.03);
}

html.aero-ui .post-composer__submit:hover:not(:disabled) {
  background: var(--sidebar-hover-bg);
  filter: brightness(1.03);
}

html.aero-ui .post-card__liker {
  border-color: var(--aero-glass-strong);
  background: var(--aero-glass-strong);
}

html.aero-ui .post-card__media {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

html.aero-ui .post-comment .post-card__media {
  background: transparent;
}

html.aero-ui .post-card__footer {
  border-color: var(--border-low);
}

html.aero-ui button.post-card__action:hover {
  background: var(--sidebar-hover-bg);
  filter: brightness(1.03);
}

html.aero-ui .album-page__panel {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .album-page__cover {
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1);
}

html.aero-ui .album-page__tile {
  box-shadow: var(--shadow-elev-1);
}

html.aero-ui .album-page__more {
  background: var(--aero-glass);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
}

html.aero-ui .album-page__visibility {
  background: var(--aero-glass);
  border-color: var(--border-low);
}

html.aero-ui .social-profile-aside-card {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .bm-filters {
  background: color-mix(in srgb, var(--aero-aqua) 8%, var(--surface-subtle));
  border: 1px solid var(--border-low);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .bm-filter-btn--active {
  background: var(--gradient-btn-secondary);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  color: var(--foreground);
}

html.aero-ui .bm-add-form {
  background: var(--aero-glass);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .bm-sidebar {
  background: var(--aero-canvas, var(--account-split-sidebar-bg));
}

html.aero-ui .bm-col-nav--on,
  html.aero-ui .bm-col-choice--on,
  html.aero-ui .bm-col-chip--on {
  background: var(--sidebar-active-bg, var(--gradient-btn-secondary));
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .bm-col-field__input {
  background: var(--aero-glass);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .bm-ask-switch--on {
  background: var(--foreground);
}

html.aero-ui #account-main-content.account-main--games,
  html.aero-ui #account-main-content.account-main--game-play,
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--games),
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--game-play),
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--games)
    > .account-split__content-pad,
  html.aero-ui .account-split__scroll:has(#account-main-content.account-main--game-play)
    > .account-split__content-pad {
  background: transparent;
}

html.aero-ui .games-sidebar {
  background: var(--gradient-glass);
  border-right-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
  backdrop-filter: blur(var(--aero-blur-soft));
  -webkit-backdrop-filter: blur(var(--aero-blur-soft));
}

html.aero-ui .games-list .games-list__item:hover {
  background-color: var(--sidebar-hover-bg);
}

html.aero-ui .games-featured,
  html.aero-ui .games-profile,
  html.aero-ui .games-card--tile,
  html.aero-ui .games-ach,
  html.aero-ui .games-achievements__empty {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .games-featured:hover,
  html.aero-ui .games-featured:focus-visible,
  html.aero-ui .games-card--live:hover,
  html.aero-ui .games-card--live:focus-visible {
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-2), var(--shadow-inset-bevel);
}

html.aero-ui .games-featured__cover,
  html.aero-ui .games-card__lock,
  html.aero-ui .games-profile__avatar,
  html.aero-ui .games-badge,
  html.aero-ui .games-ach__medal,
  html.aero-ui .games-ach__pill,
  html.aero-ui .games-card__badge {
  border-color: var(--border-low);
  background: var(--gradient-glass);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .games-featured__status {
  background: var(--sidebar-active-bg);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

html.aero-ui .games-profile__level {
  border-color: var(--aero-glass-strong);
  background: var(--gradient-btn-aqua);
  color: #0b2a36;
}

html.dark.aero-ui .games-profile__level {
  color: #e8f4f8;
}

html.aero-ui .games-profile__xp-fill,
  html.aero-ui .games-card__xp-fill,
  html.aero-ui .game-play__xp-fill {
  background: var(--gradient-btn-aqua);
}

html.aero-ui .games-card--live:hover .games-card__cta,
  html.aero-ui .games-card--live:focus-visible .games-card__cta,
  html.aero-ui .games-card--active .games-card__cta {
  background: var(--gradient-btn-aqua);
  color: #0b2a36;
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
}

html.dark.aero-ui .games-card--live:hover .games-card__cta,
  html.dark.aero-ui .games-card--live:focus-visible .games-card__cta,
  html.dark.aero-ui .games-card--active .games-card__cta {
  color: #e8f4f8;
}

html.aero-ui .games-ach--on .games-ach__medal,
  html.aero-ui .games-ach--on .games-ach__pill:not(.games-ach__pill--locked) {
  background: var(--gradient-btn-aqua);
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
  color: #0b2a36;
}

html.dark.aero-ui .games-ach--on .games-ach__medal,
  html.dark.aero-ui .games-ach--on .games-ach__pill:not(.games-ach__pill--locked) {
  color: #e8f4f8;
}

html.aero-ui .games-achievements__more {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .games-achievements__more:hover,
  html.aero-ui .games-achievements__more:focus-visible {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .game-pref__card {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-inset-bevel);
}

html.aero-ui .game-pref__card:hover,
  html.aero-ui .game-pref__card:focus-visible {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  filter: brightness(1.03);
}

html.aero-ui .game-pref__card--selected,
  html.aero-ui .game-pref__card--selected:hover {
  background: var(--sidebar-active-bg);
  border-color: var(--border-low);
  box-shadow: inset 0 1px 0 var(--border-highlight);
  filter: none;
}

html.aero-ui .game-pref__card-icon {
  background: var(--gradient-glass);
  border-color: var(--border-low);
}

html.aero-ui .game-pref__card--selected .game-pref__card-icon {
  background: var(--gradient-btn-aqua);
  border-color: color-mix(in srgb, var(--aero-aqua-deep) 70%, #1a4050);
  color: #0b2a36;
}

html.dark.aero-ui .game-pref__card--selected .game-pref__card-icon {
  color: #e8f4f8;
}

html.aero-ui .game-play__bar,
  html.aero-ui .game-play__close,
  html.aero-ui .game-play__clock,
  html.aero-ui .game-play__progress,
  html.aero-ui .game-play__logo {
  background: var(--aero-glass-strong);
  background-image: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

html.aero-ui .game-play__close:hover,
  html.aero-ui .game-play__close:focus-visible {
  background: var(--gradient-btn-secondary);
  border-color: var(--border-low);
  filter: brightness(1.04);
}

html.aero-ui .super-shell,
  html.aero-ui .super-dashboard,
  html.aero-ui .super-panel {
  border-color: var(--border-low);
}

html.aero-ui .super-dashboard__panel,
  html.aero-ui .super-card,
  html.aero-ui table.super-table {
  background: var(--gradient-glass);
  border-color: var(--border-low);
  box-shadow: var(--shadow-elev-1), var(--shadow-inset-bevel);
}

.sr-only{
  position:       absolute;
  width:       1px;
  height:       1px;
  padding:       0;
  margin:       -1px;
  overflow:       hidden;
  clip:       rect(0, 0, 0, 0);
  white-space:       nowrap;
  border-width:       0;
}

.pointer-events-none{
  pointer-events:       none;
}

.pointer-events-auto{
  pointer-events:       auto;
}

.\!visible{
  visibility:       visible !important;
}

.visible{
  visibility:       visible;
}

.invisible{
  visibility:       hidden;
}

.collapse{
  visibility:       collapse;
}

.static{
  position:       static;
}

.fixed{
  position:       fixed;
}

.absolute{
  position:       absolute;
}

.relative{
  position:       relative;
}

.sticky{
  position:       sticky;
}

.inset-0{
  inset:       0px;
}

.inset-x-0{
  left:       0px;
  right:       0px;
}

.inset-y-0{
  top:       0px;
  bottom:       0px;
}

.bottom-0{
  bottom:       0px;
}

.bottom-4{
  bottom:       1rem;
}

.bottom-6{
  bottom:       1.5rem;
}

.left-0{
  left:       0px;
}

.left-1\/2{
  left:       50%;
}

.left-4{
  left:       1rem;
}

.right-0{
  right:       0px;
}

.right-4{
  right:       1rem;
}

.right-\[15px\]{
  right:       15px;
}

.top-0{
  top:       0px;
}

.top-1\/2{
  top:       50%;
}

.top-24{
  top:       6rem;
}

.top-4{
  top:       1rem;
}

.top-\[15px\]{
  top:       15px;
}

.top-full{
  top:       100%;
}

.isolate{
  isolation:       isolate;
}

.z-0{
  z-index:       0;
}

.z-10{
  z-index:       10;
}

.z-20{
  z-index:       20;
}

.z-30{
  z-index:       30;
}

.z-40{
  z-index:       40;
}

.z-50{
  z-index:       50;
}

.z-\[10000\]{
  z-index:       10000;
}

.z-\[10001\]{
  z-index:       10001;
}

.z-\[10002\]{
  z-index:       10002;
}

.z-\[10003\]{
  z-index:       10003;
}

.z-\[10050\]{
  z-index:       10050;
}

.z-\[10051\]{
  z-index:       10051;
}

.z-\[10052\]{
  z-index:       10052;
}

.z-\[10055\]{
  z-index:       10055;
}

.z-\[10060\]{
  z-index:       10060;
}

.z-\[10070\]{
  z-index:       10070;
}

.z-\[10075\]{
  z-index:       10075;
}

.z-\[10080\]{
  z-index:       10080;
}

.z-\[100\]{
  z-index:       100;
}

.z-\[110\]{
  z-index:       110;
}

.z-\[12000\]{
  z-index:       12000;
}

.z-\[13000\]{
  z-index:       13000;
}

.z-\[130\]{
  z-index:       130;
}

.z-\[1\]{
  z-index:       1;
}

.z-\[200\]{
  z-index:       200;
}

.z-\[2\]{
  z-index:       2;
}

.z-\[5\]{
  z-index:       5;
}

.z-\[60\]{
  z-index:       60;
}

.z-\[70\]{
  z-index:       70;
}

.z-\[9998\]{
  z-index:       9998;
}

.z-\[9999\]{
  z-index:       9999;
}

.col-span-2{
  grid-column:       span 2 / span 2;
}

.col-start-2{
  grid-column-start:       2;
}

.row-span-2{
  grid-row:       span 2 / span 2;
}

.-m-2{
  margin:       -0.5rem;
}

.m-0{
  margin:       0px;
}

.-mx-6{
  margin-left:       -1.5rem;
  margin-right:       -1.5rem;
}

.mx-1{
  margin-left:       0.25rem;
  margin-right:       0.25rem;
}

.mx-1\.5{
  margin-left:       0.375rem;
  margin-right:       0.375rem;
}

.mx-2{
  margin-left:       0.5rem;
  margin-right:       0.5rem;
}

.mx-3{
  margin-left:       0.75rem;
  margin-right:       0.75rem;
}

.mx-auto{
  margin-left:       auto;
  margin-right:       auto;
}

.my-8{
  margin-top:       2rem;
  margin-bottom:       2rem;
}

.\!mt-0{
  margin-top:       0px !important;
}

.\!mt-2{
  margin-top:       0.5rem !important;
}

.-ml-2{
  margin-left:       -0.5rem;
}

.-mr-1\.5{
  margin-right:       -0.375rem;
}

.-mt-0\.5{
  margin-top:       -0.125rem;
}

.-mt-16{
  margin-top:       -4rem;
}

.-mt-3{
  margin-top:       -0.75rem;
}

.-mt-\[44px\]{
  margin-top:       -44px;
}

.mb-0{
  margin-bottom:       0px;
}

.mb-0\.5{
  margin-bottom:       0.125rem;
}

.mb-1{
  margin-bottom:       0.25rem;
}

.mb-1\.5{
  margin-bottom:       0.375rem;
}

.mb-10{
  margin-bottom:       2.5rem;
}

.mb-2{
  margin-bottom:       0.5rem;
}

.mb-3{
  margin-bottom:       0.75rem;
}

.mb-4{
  margin-bottom:       1rem;
}

.mb-5{
  margin-bottom:       1.25rem;
}

.mb-6{
  margin-bottom:       1.5rem;
}

.mb-8{
  margin-bottom:       2rem;
}

.ml-0{
  margin-left:       0px;
}

.ml-0\.5{
  margin-left:       0.125rem;
}

.ml-1{
  margin-left:       0.25rem;
}

.ml-2{
  margin-left:       0.5rem;
}

.ml-\[22px\]{
  margin-left:       22px;
}

.ml-auto{
  margin-left:       auto;
}

.mr-1{
  margin-right:       0.25rem;
}

.mr-2{
  margin-right:       0.5rem;
}

.mt-0{
  margin-top:       0px;
}

.mt-0\.5{
  margin-top:       0.125rem;
}

.mt-1{
  margin-top:       0.25rem;
}

.mt-1\.5{
  margin-top:       0.375rem;
}

.mt-2{
  margin-top:       0.5rem;
}

.mt-3{
  margin-top:       0.75rem;
}

.mt-4{
  margin-top:       1rem;
}

.mt-5{
  margin-top:       1.25rem;
}

.mt-6{
  margin-top:       1.5rem;
}

.mt-8{
  margin-top:       2rem;
}

.mt-px{
  margin-top:       1px;
}

.box-border{
  box-sizing:       border-box;
}

.line-clamp-2{
  overflow:       hidden;
  display:       -webkit-box;
  -webkit-box-orient:       vertical;
  -webkit-line-clamp:       2;
}

.line-clamp-3{
  overflow:       hidden;
  display:       -webkit-box;
  -webkit-box-orient:       vertical;
  -webkit-line-clamp:       3;
}

.\!block{
  display:       block !important;
}

.block{
  display:       block;
}

.inline-block{
  display:       inline-block;
}

.inline{
  display:       inline;
}

.flex{
  display:       flex;
}

.inline-flex{
  display:       inline-flex;
}

.table{
  display:       table;
}

.\!grid{
  display:       grid !important;
}

.grid{
  display:       grid;
}

.contents{
  display:       contents;
}

.\!hidden{
  display:       none !important;
}

.hidden{
  display:       none;
}

.aspect-square{
  aspect-ratio:       1 / 1;
}

.h-0\.5{
  height:       0.125rem;
}

.h-1{
  height:       0.25rem;
}

.h-1\.5{
  height:       0.375rem;
}

.h-10{
  height:       2.5rem;
}

.h-11{
  height:       2.75rem;
}

.h-12{
  height:       3rem;
}

.h-14{
  height:       3.5rem;
}

.h-16{
  height:       4rem;
}

.h-2{
  height:       0.5rem;
}

.h-2\.5{
  height:       0.625rem;
}

.h-20{
  height:       5rem;
}

.h-24{
  height:       6rem;
}

.h-28{
  height:       7rem;
}

.h-32{
  height:       8rem;
}

.h-36{
  height:       9rem;
}

.h-4{
  height:       1rem;
}

.h-48{
  height:       12rem;
}

.h-5{
  height:       1.25rem;
}

.h-6{
  height:       1.5rem;
}

.h-7{
  height:       1.75rem;
}

.h-8{
  height:       2rem;
}

.h-9{
  height:       2.25rem;
}

.h-\[1\.1875rem\]{
  height:       1.1875rem;
}

.h-\[18px\]{
  height:       18px;
}

.h-\[1px\]{
  height:       1px;
}

.h-\[260px\]{
  height:       260px;
}

.h-\[26px\]{
  height:       26px;
}

.h-\[44px\]{
  height:       44px;
}

.h-\[46px\]{
  height:       46px;
}

.h-\[48px\]{
  height:       48px;
}

.h-\[72px\]{
  height:       72px;
}

.h-\[86px\]{
  height:       86px;
}

.h-\[min\(700px\2c 85vh\)\]{
  height:       min(700px, 85vh);
}

.h-\[var\(--eco-header-h\)\]{
  height:       var(--eco-header-h);
}

.h-full{
  height:       100%;
}

.h-px{
  height:       1px;
}

.max-h-56{
  max-height:       14rem;
}

.max-h-72{
  max-height:       18rem;
}

.max-h-\[26px\]{
  max-height:       26px;
}

.max-h-\[360px\]{
  max-height:       360px;
}

.max-h-\[38rem\]{
  max-height:       38rem;
}

.max-h-\[400px\]{
  max-height:       400px;
}

.max-h-\[72vh\]{
  max-height:       72vh;
}

.max-h-\[90vh\]{
  max-height:       90vh;
}

.max-h-\[92vh\]{
  max-height:       92vh;
}

.max-h-\[min\(18rem\2c 50vh\)\]{
  max-height:       min(18rem, 50vh);
}

.max-h-\[min\(22rem\2c 70vh\)\]{
  max-height:       min(22rem, 70vh);
}

.max-h-\[min\(700px\2c 85vh\)\]{
  max-height:       min(700px, 85vh);
}

.max-h-\[min\(78vh\2c 40rem\)\]{
  max-height:       min(78vh, 40rem);
}

.max-h-\[min\(92dvh\2c 36rem\)\]{
  max-height:       min(92dvh, 36rem);
}

.max-h-\[min\(92dvh\2c 40rem\)\]{
  max-height:       min(92dvh, 40rem);
}

.max-h-\[min\(92dvh\2c 42rem\)\]{
  max-height:       min(92dvh, 42rem);
}

.max-h-\[min\(92dvh\2c 44rem\)\]{
  max-height:       min(92dvh, 44rem);
}

.min-h-0{
  min-height:       0px;
}

.min-h-9{
  min-height:       2.25rem;
}

.min-h-\[1\.25rem\]{
  min-height:       1.25rem;
}

.min-h-\[1\.75rem\]{
  min-height:       1.75rem;
}

.min-h-\[10rem\]{
  min-height:       10rem;
}

.min-h-\[12rem\]{
  min-height:       12rem;
}

.min-h-\[1rem\]{
  min-height:       1rem;
}

.min-h-\[3\.5rem\]{
  min-height:       3.5rem;
}

.min-h-\[3rem\]{
  min-height:       3rem;
}

.min-h-\[40px\]{
  min-height:       40px;
}

.min-h-\[42px\]{
  min-height:       42px;
}

.min-h-\[44px\]{
  min-height:       44px;
}

.min-h-\[460px\]{
  min-height:       460px;
}

.min-h-\[4rem\]{
  min-height:       4rem;
}

.min-h-\[6rem\]{
  min-height:       6rem;
}

.min-h-\[8rem\]{
  min-height:       8rem;
}

.min-h-\[var\(--eco-header-h\)\]{
  min-height:       var(--eco-header-h);
}

.min-h-screen{
  min-height:       100vh;
}

.w-0{
  width:       0px;
}

.w-1{
  width:       0.25rem;
}

.w-10{
  width:       2.5rem;
}

.w-11{
  width:       2.75rem;
}

.w-12{
  width:       3rem;
}

.w-14{
  width:       3.5rem;
}

.w-16{
  width:       4rem;
}

.w-2{
  width:       0.5rem;
}

.w-20{
  width:       5rem;
}

.w-24{
  width:       6rem;
}

.w-28{
  width:       7rem;
}

.w-36{
  width:       9rem;
}

.w-4{
  width:       1rem;
}

.w-48{
  width:       12rem;
}

.w-5{
  width:       1.25rem;
}

.w-52{
  width:       13rem;
}

.w-6{
  width:       1.5rem;
}

.w-7{
  width:       1.75rem;
}

.w-72{
  width:       18rem;
}

.w-8{
  width:       2rem;
}

.w-80{
  width:       20rem;
}

.w-9{
  width:       2.25rem;
}

.w-\[1\.1875rem\]{
  width:       1.1875rem;
}

.w-\[12rem\]{
  width:       12rem;
}

.w-\[13rem\]{
  width:       13rem;
}

.w-\[14rem\]{
  width:       14rem;
}

.w-\[15rem\]{
  width:       15rem;
}

.w-\[17rem\]{
  width:       17rem;
}

.w-\[18px\]{
  width:       18px;
}

.w-\[26px\]{
  width:       26px;
}

.w-\[46px\]{
  width:       46px;
}

.w-\[86px\]{
  width:       86px;
}

.w-\[calc\(100\%-45px\)\]{
  width:       calc(100% - 45px);
}

.w-\[min\(100\%\2c 340px\)\]{
  width:       min(100%, 340px);
}

.w-\[min\(20rem\2c calc\(100vw-2rem\)\)\]{
  width:       min(20rem, calc(100vw - 2rem));
}

.w-\[min\(320px\2c calc\(100vw-1\.5rem\)\)\]{
  width:       min(320px, calc(100vw - 1.5rem));
}

.w-\[min\(360px\2c calc\(100vw-1\.5rem\)\)\]{
  width:       min(360px, calc(100vw - 1.5rem));
}

.w-\[min\(380px\2c calc\(100vw-1\.5rem\)\)\]{
  width:       min(380px, calc(100vw - 1.5rem));
}

.w-\[min\(400px\2c calc\(100vw-1\.5rem\)\)\]{
  width:       min(400px, calc(100vw - 1.5rem));
}

.w-\[var\(--space-sidebar-panel-w\)\]{
  width:       var(--space-sidebar-panel-w);
}

.w-auto{
  width:       auto;
}

.w-fit{
  width:       -moz-fit-content;
  width:       fit-content;
}

.w-full{
  width:       100%;
}

.min-w-0{
  min-width:       0px;
}

.min-w-9{
  min-width:       2.25rem;
}

.min-w-\[1\.1875rem\]{
  min-width:       1.1875rem;
}

.min-w-\[10rem\]{
  min-width:       10rem;
}

.min-w-\[12rem\]{
  min-width:       12rem;
}

.min-w-\[14rem\]{
  min-width:       14rem;
}

.min-w-\[260px\]{
  min-width:       260px;
}

.min-w-\[300px\]{
  min-width:       300px;
}

.min-w-\[88px\]{
  min-width:       88px;
}

.max-w-2xl{
  max-width:       42rem;
}

.max-w-3xl{
  max-width:       48rem;
}

.max-w-5xl{
  max-width:       64rem;
}

.max-w-6xl{
  max-width:       1152px;
}

.max-w-\[120px\]{
  max-width:       120px;
}

.max-w-\[14rem\]{
  max-width:       14rem;
}

.max-w-\[85vw\]{
  max-width:       85vw;
}

.max-w-\[calc\(100vw-1\.5rem\)\]{
  max-width:       calc(100vw - 1.5rem);
}

.max-w-\[var\(--account-split-main-content-max-w\)\]{
  max-width:       var(--account-split-main-content-max-w);
}

.max-w-\[var\(--account-split-main-content-max-w\2c 64\.25rem\)\]{
  max-width:       var(--account-split-main-content-max-w,64.25rem);
}

.max-w-full{
  max-width:       100%;
}

.max-w-lg{
  max-width:       32rem;
}

.max-w-md{
  max-width:       28rem;
}

.max-w-sm{
  max-width:       24rem;
}

.max-w-xl{
  max-width:       36rem;
}

.max-w-xs{
  max-width:       20rem;
}

.flex-1{
  flex:       1 1 0%;
}

.flex-shrink{
  flex-shrink:       1;
}

.flex-shrink-0{
  flex-shrink:       0;
}

.shrink{
  flex-shrink:       1;
}

.shrink-0{
  flex-shrink:       0;
}

.flex-grow{
  flex-grow:       1;
}

.grow{
  flex-grow:       1;
}

.basis-0{
  flex-basis:       0px;
}

.border-collapse{
  border-collapse:       collapse;
}

.origin-top{
  transform-origin:       top;
}

.origin-top-right{
  transform-origin:       top right;
}

.-translate-x-1\/2{
  --tw-translate-x:       -50%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full{
  --tw-translate-x:       -100%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1{
  --tw-translate-y:       -0.25rem;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y:       -50%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x:       0px;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5{
  --tw-translate-x:       1.25rem;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full{
  --tw-translate-x:       100%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y:       0px;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate:       180deg;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100{
  --tw-scale-x:       1;
  --tw-scale-y:       1;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95{
  --tw-scale-x:       .95;
  --tw-scale-y:       .95;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.97\]{
  --tw-scale-x:       0.97;
  --tw-scale-y:       0.97;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.98\]{
  --tw-scale-x:       0.98;
  --tw-scale-y:       0.98;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse{
  50%{
    opacity:       .5;
  }
}

.animate-pulse{
  animation:       pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-spin{
  animation:       spin 1s linear infinite;
}

.cursor-default{
  cursor:       default;
}

.cursor-not-allowed{
  cursor:       not-allowed;
}

.cursor-pointer{
  cursor:       pointer;
}

.cursor-text{
  cursor:       text;
}

.select-none{
  -webkit-user-select:       none;
     -moz-user-select:       none;
          user-select:       none;
}

.select-text{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.select-all{
  -webkit-user-select:       all;
     -moz-user-select:       all;
          user-select:       all;
}

.resize-none{
  resize:       none;
}

.resize-y{
  resize:       vertical;
}

.resize{
  resize:       both;
}

.scroll-mt-24{
  scroll-margin-top:       6rem;
}

.scroll-mt-6{
  scroll-margin-top:       1.5rem;
}

.list-inside{
  list-style-position:       inside;
}

.list-decimal{
  list-style-type:       decimal;
}

.list-disc{
  list-style-type:       disc;
}

.list-none{
  list-style-type:       none;
}

.appearance-none{
  -webkit-appearance:       none;
     -moz-appearance:       none;
          appearance:       none;
}

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

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

.grid-cols-\[2rem_1fr\]{
  grid-template-columns:       2rem 1fr;
}

.flex-row{
  flex-direction:       row;
}

.flex-col{
  flex-direction:       column;
}

.flex-wrap{
  flex-wrap:       wrap;
}

.items-start{
  align-items:       flex-start;
}

.items-end{
  align-items:       flex-end;
}

.items-center{
  align-items:       center;
}

.items-baseline{
  align-items:       baseline;
}

.justify-start{
  justify-content:       flex-start;
}

.justify-end{
  justify-content:       flex-end;
}

.justify-center{
  justify-content:       center;
}

.justify-between{
  justify-content:       space-between;
}

.gap-0{
  gap:       0px;
}

.gap-0\.5{
  gap:       0.125rem;
}

.gap-1{
  gap:       0.25rem;
}

.gap-1\.5{
  gap:       0.375rem;
}

.gap-2{
  gap:       0.5rem;
}

.gap-2\.5{
  gap:       0.625rem;
}

.gap-3{
  gap:       0.75rem;
}

.gap-4{
  gap:       1rem;
}

.gap-5{
  gap:       1.25rem;
}

.gap-6{
  gap:       1.5rem;
}

.gap-8{
  gap:       2rem;
}

.gap-\[0\.4375rem\]{
  gap:       0.4375rem;
}

.gap-\[0\.875rem\]{
  gap:       0.875rem;
}

.gap-\[1\.50rem\]{
  gap:       1.50rem;
}

.gap-\[11px\]{
  gap:       11px;
}

.gap-\[var\(--cengel-btn-gap\)\]{
  gap:       var(--cengel-btn-gap);
}

.gap-px{
  gap:       1px;
}

.gap-x-1\.5{
  -moz-column-gap:       0.375rem;
       column-gap:       0.375rem;
}

.gap-x-3{
  -moz-column-gap:       0.75rem;
       column-gap:       0.75rem;
}

.gap-x-4{
  -moz-column-gap:       1rem;
       column-gap:       1rem;
}

.gap-x-6{
  -moz-column-gap:       1.5rem;
       column-gap:       1.5rem;
}

.gap-y-0{
  row-gap:       0px;
}

.gap-y-0\.5{
  row-gap:       0.125rem;
}

.gap-y-2{
  row-gap:       0.5rem;
}

.gap-y-5{
  row-gap:       1.25rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:       0;
  margin-right:       calc(0.25rem * var(--tw-space-x-reverse));
  margin-left:       calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(2rem * var(--tw-space-y-reverse));
}

.space-y-\[var\(--section-stack-gap\)\] > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:       0;
  margin-top:       calc(var(--section-stack-gap) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:       calc(var(--section-stack-gap) * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:       0;
  border-top-width:       calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:       calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]){
  border-color:       var(--border);
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:       1;
  border-color:       rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.self-start{
  align-self:       flex-start;
}

.self-center{
  align-self:       center;
}

.overflow-hidden{
  overflow:       hidden;
}

.overflow-visible{
  overflow:       visible;
}

.overflow-x-auto{
  overflow-x:       auto;
}

.overflow-y-auto{
  overflow-y:       auto;
}

.overflow-x-hidden{
  overflow-x:       hidden;
}

.truncate{
  overflow:       hidden;
  text-overflow:       ellipsis;
  white-space:       nowrap;
}

.text-ellipsis{
  text-overflow:       ellipsis;
}

.whitespace-nowrap{
  white-space:       nowrap;
}

.whitespace-pre-wrap{
  white-space:       pre-wrap;
}

.text-wrap{
  text-wrap:       wrap;
}

.break-words{
  overflow-wrap:       break-word;
}

.break-all{
  word-break:       break-all;
}

.rounded{
  border-radius:       0.25rem;
}

.rounded-2xl{
  border-radius:       16px;
}

.rounded-3xl{
  border-radius:       24px;
}

.rounded-\[1\.25rem\]{
  border-radius:       1.25rem;
}

.rounded-\[10px\]{
  border-radius:       10px;
}

.rounded-\[11px\]{
  border-radius:       11px;
}

.rounded-\[13px\]{
  border-radius:       13px;
}

.rounded-\[2rem\]{
  border-radius:       2rem;
}

.rounded-\[inherit\]{
  border-radius:       inherit;
}

.rounded-\[var\(--radius-card\)\]{
  border-radius:       var(--radius-card);
}

.rounded-\[var\(--radius-control\)\]{
  border-radius:       var(--radius-control);
}

.rounded-\[var\(--sidebar-item-r\)\]{
  border-radius:       var(--sidebar-item-r);
}

.rounded-full{
  border-radius:       9999px;
}

.rounded-lg{
  border-radius:       0.5rem;
}

.rounded-md{
  border-radius:       0.375rem;
}

.rounded-sm{
  border-radius:       0.125rem;
}

.rounded-xl{
  border-radius:       12px;
}

.rounded-t-\[2rem\]{
  border-top-left-radius:       2rem;
  border-top-right-radius:       2rem;
}

.rounded-t-\[var\(--radius-card\)\]{
  border-top-left-radius:       var(--radius-card);
  border-top-right-radius:       var(--radius-card);
}

.border{
  border-width:       1px;
}

.border-0{
  border-width:       0px;
}

.border-2{
  border-width:       2px;
}

.border-4{
  border-width:       4px;
}

.border-\[3px\]{
  border-width:       3px;
}

.border-b{
  border-bottom-width:       1px;
}

.border-b-2{
  border-bottom-width:       2px;
}

.border-l-4{
  border-left-width:       4px;
}

.border-r{
  border-right-width:       1px;
}

.border-t{
  border-top-width:       1px;
}

.border-dashed{
  border-style:       dashed;
}

.border-\[var\(--eco-header-border\)\]{
  border-color:       var(--eco-header-border);
}

.border-\[var\(--eco-products-border\)\]{
  border-color:       var(--eco-products-border);
}

.border-\[var\(--eco-search-border\)\]{
  border-color:       var(--eco-search-border);
}

.border-amber-200{
  --tw-border-opacity:       1;
  border-color:       rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-500\/20{
  border-color:       rgb(245 158 11 / 0.2);
}

.border-amber-500\/30{
  border-color:       rgb(245 158 11 / 0.3);
}

.border-background{
  border-color:       var(--background);
}

.border-border{
  border-color:       var(--border);
}

.border-brand-100{
  border-color:       var(--brand-100);
}

.border-brand-500{
  border-color:       var(--brand-500);
}

.border-brand-700{
  border-color:       var(--brand-700);
}

.border-emerald-500\/20{
  border-color:       rgb(16 185 129 / 0.2);
}

.border-gray-100{
  --tw-border-opacity:       1;
  border-color:       rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity:       1;
  border-color:       rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity:       1;
  border-color:       rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-300{
  --tw-border-opacity:       1;
  border-color:       rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500{
  --tw-border-opacity:       1;
  border-color:       rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-ink{
  border-color:       var(--foreground);
}

.border-red-100{
  --tw-border-opacity:       1;
  border-color:       rgb(254 226 226 / var(--tw-border-opacity, 1));
}

.border-red-200{
  --tw-border-opacity:       1;
  border-color:       rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300{
  --tw-border-opacity:       1;
  border-color:       rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-400{
  --tw-border-opacity:       1;
  border-color:       rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-500{
  --tw-border-opacity:       1;
  border-color:       rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-500\/20{
  border-color:       rgb(239 68 68 / 0.2);
}

.border-red-600{
  --tw-border-opacity:       1;
  border-color:       rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-transparent{
  border-color:       transparent;
}

.border-white{
  --tw-border-opacity:       1;
  border-color:       rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/30{
  border-color:       rgb(255 255 255 / 0.3);
}

.border-white\/40{
  border-color:       rgb(255 255 255 / 0.4);
}

.border-t-ink{
  border-top-color:       var(--foreground);
}

.border-t-transparent{
  border-top-color:       transparent;
}

.border-t-white{
  --tw-border-opacity:       1;
  border-top-color:       rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_12\%\2c var\(--background\)\)\]{
  background-color:       color-mix(in srgb,var(--account-changes-accent) 12%,var(--background));
}

.bg-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_45\%\2c \#121212\)\]{
  background-color:       color-mix(in srgb,var(--account-changes-accent) 45%,#121212);
}

.bg-\[color-mix\(in_srgb\2c var\(--foreground\)_8\%\2c transparent\)\]{
  background-color:       color-mix(in srgb,var(--foreground) 8%,transparent);
}

.bg-\[var\(--accent-soft\)\]{
  background-color:       var(--accent-soft);
}

.bg-\[var\(--account-split-sidebar-bg\)\]{
  background-color:       var(--account-split-sidebar-bg);
}

.bg-\[var\(--av-bg\2c color-mix\(in_srgb\2c var\(--foreground\)_10\%\2c transparent\)\)\]{
  background-color:       var(--av-bg,color-mix(in srgb,var(--foreground) 10%,transparent));
}

.bg-\[var\(--eco-\*\)\]{
  background-color:       var(--eco-*);
}

.bg-\[var\(--eco-header-bg\)\]{
  background-color:       var(--eco-header-bg);
}

.bg-\[var\(--eco-products-bg\)\]{
  background-color:       var(--eco-products-bg);
}

.bg-\[var\(--eco-search-bg\)\]{
  background-color:       var(--eco-search-bg);
}

.bg-\[var\(--surface-muted\)\]{
  background-color:       var(--surface-muted);
}

.bg-amber-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50{
  --tw-bg-opacity:       1;
  background-color:       rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10{
  background-color:       rgb(245 158 11 / 0.1);
}

.bg-background{
  background-color:       var(--background);
}

.bg-black\/25{
  background-color:       rgb(0 0 0 / 0.25);
}

.bg-black\/40{
  background-color:       rgb(0 0 0 / 0.4);
}

.bg-black\/50{
  background-color:       rgb(0 0 0 / 0.5);
}

.bg-black\/60{
  background-color:       rgb(0 0 0 / 0.6);
}

.bg-blue-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-500{
  --tw-bg-opacity:       1;
  background-color:       rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-border{
  background-color:       var(--border);
}

.bg-brand-50{
  background-color:       var(--brand-50);
}

.bg-brand-600{
  background-color:       var(--brand-600);
}

.bg-canvas{
  background-color:       var(--canvas);
}

.bg-emerald-500\/10{
  background-color:       rgb(16 185 129 / 0.1);
}

.bg-gray-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity:       1;
  background-color:       rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity:       1;
  background-color:       rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity:       1;
  background-color:       rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500{
  --tw-bg-opacity:       1;
  background-color:       rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-ink{
  background-color:       var(--foreground);
}

.bg-orange-400{
  --tw-bg-opacity:       1;
  background-color:       rgb(251 146 60 / var(--tw-bg-opacity, 1));
}

.bg-purple-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-600{
  --tw-bg-opacity:       1;
  background-color:       rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
  --tw-bg-opacity:       1;
  background-color:       rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500{
  --tw-bg-opacity:       1;
  background-color:       rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/10{
  background-color:       rgb(239 68 68 / 0.1);
}

.bg-red-600{
  --tw-bg-opacity:       1;
  background-color:       rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-surface{
  background-color:       var(--surface);
}

.bg-surface-subtle{
  background-color:       var(--surface-subtle);
}

.bg-transparent{
  background-color:       transparent;
}

.bg-white{
  --tw-bg-opacity:       1;
  background-color:       rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/50{
  background-color:       rgb(255 255 255 / 0.5);
}

.bg-white\/90{
  background-color:       rgb(255 255 255 / 0.9);
}

.bg-yellow-100{
  --tw-bg-opacity:       1;
  background-color:       rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500{
  --tw-bg-opacity:       1;
  background-color:       rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-zinc-950\/45{
  background-color:       rgb(9 9 11 / 0.45);
}

.object-contain{
  -o-object-fit:       contain;
     object-fit:       contain;
}

.object-cover{
  -o-object-fit:       cover;
     object-fit:       cover;
}

.p-0{
  padding:       0px;
}

.p-1{
  padding:       0.25rem;
}

.p-10{
  padding:       2.5rem;
}

.p-2{
  padding:       0.5rem;
}

.p-2\.5{
  padding:       0.625rem;
}

.p-3{
  padding:       0.75rem;
}

.p-3\.5{
  padding:       0.875rem;
}

.p-4{
  padding:       1rem;
}

.p-5{
  padding:       1.25rem;
}

.p-6{
  padding:       1.5rem;
}

.p-8{
  padding:       2rem;
}

.p-\[var\(--account-split-inner-pad\)\]{
  padding:       var(--account-split-inner-pad);
}

.p-\[var\(--eco-header-pad\)\]{
  padding:       var(--eco-header-pad);
}

.p-\[var\(--section-pad-y-row\)\]{
  padding:       var(--section-pad-y-row);
}

.px-0{
  padding-left:       0px;
  padding-right:       0px;
}

.px-1{
  padding-left:       0.25rem;
  padding-right:       0.25rem;
}

.px-1\.5{
  padding-left:       0.375rem;
  padding-right:       0.375rem;
}

.px-2{
  padding-left:       0.5rem;
  padding-right:       0.5rem;
}

.px-2\.5{
  padding-left:       0.625rem;
  padding-right:       0.625rem;
}

.px-3{
  padding-left:       0.75rem;
  padding-right:       0.75rem;
}

.px-3\.5{
  padding-left:       0.875rem;
  padding-right:       0.875rem;
}

.px-4{
  padding-left:       1rem;
  padding-right:       1rem;
}

.px-5{
  padding-left:       1.25rem;
  padding-right:       1.25rem;
}

.px-6{
  padding-left:       1.5rem;
  padding-right:       1.5rem;
}

.px-8{
  padding-left:       2rem;
  padding-right:       2rem;
}

.px-\[var\(--account-split-inner-pad-x\)\]{
  padding-left:       var(--account-split-inner-pad-x);
  padding-right:       var(--account-split-inner-pad-x);
}

.px-\[var\(--account-split-inner-pad-x\2c 1\.5rem\)\]{
  padding-left:       var(--account-split-inner-pad-x,1.5rem);
  padding-right:       var(--account-split-inner-pad-x,1.5rem);
}

.py-0\.5{
  padding-top:       0.125rem;
  padding-bottom:       0.125rem;
}

.py-1{
  padding-top:       0.25rem;
  padding-bottom:       0.25rem;
}

.py-1\.5{
  padding-top:       0.375rem;
  padding-bottom:       0.375rem;
}

.py-10{
  padding-top:       2.5rem;
  padding-bottom:       2.5rem;
}

.py-12{
  padding-top:       3rem;
  padding-bottom:       3rem;
}

.py-16{
  padding-top:       4rem;
  padding-bottom:       4rem;
}

.py-2{
  padding-top:       0.5rem;
  padding-bottom:       0.5rem;
}

.py-2\.5{
  padding-top:       0.625rem;
  padding-bottom:       0.625rem;
}

.py-20{
  padding-top:       5rem;
  padding-bottom:       5rem;
}

.py-3{
  padding-top:       0.75rem;
  padding-bottom:       0.75rem;
}

.py-3\.5{
  padding-top:       0.875rem;
  padding-bottom:       0.875rem;
}

.py-4{
  padding-top:       1rem;
  padding-bottom:       1rem;
}

.py-5{
  padding-top:       1.25rem;
  padding-bottom:       1.25rem;
}

.py-6{
  padding-top:       1.5rem;
  padding-bottom:       1.5rem;
}

.py-8{
  padding-top:       2rem;
  padding-bottom:       2rem;
}

.py-\[3\.25rem\]{
  padding-top:       3.25rem;
  padding-bottom:       3.25rem;
}

.pb-1{
  padding-bottom:       0.25rem;
}

.pb-1\.5{
  padding-bottom:       0.375rem;
}

.pb-10{
  padding-bottom:       2.5rem;
}

.pb-20{
  padding-bottom:       5rem;
}

.pb-4{
  padding-bottom:       1rem;
}

.pb-5{
  padding-bottom:       1.25rem;
}

.pb-8{
  padding-bottom:       2rem;
}

.pb-\[1rem\]{
  padding-bottom:       1rem;
}

.pb-\[5px\]{
  padding-bottom:       5px;
}

.pb-\[6\.5rem\]{
  padding-bottom:       6.5rem;
}

.pb-\[calc\(5rem\+env\(safe-area-inset-bottom\2c 0px\)\)\]{
  padding-bottom:       calc(5rem + env(safe-area-inset-bottom,0px));
}

.pb-\[var\(--section-pad-y-head\)\]{
  padding-bottom:       var(--section-pad-y-head);
}

.pb-\[var\(--section-pad-y-row\)\]{
  padding-bottom:       var(--section-pad-y-row);
}

.pl-0{
  padding-left:       0px;
}

.pl-11{
  padding-left:       2.75rem;
}

.pl-8{
  padding-left:       2rem;
}

.pr-0{
  padding-right:       0px;
}

.pr-12{
  padding-right:       3rem;
}

.pr-2{
  padding-right:       0.5rem;
}

.pr-3{
  padding-right:       0.75rem;
}

.pr-4{
  padding-right:       1rem;
}

.pt-0{
  padding-top:       0px;
}

.pt-0\.5{
  padding-top:       0.125rem;
}

.pt-1{
  padding-top:       0.25rem;
}

.pt-2{
  padding-top:       0.5rem;
}

.pt-3{
  padding-top:       0.75rem;
}

.pt-4{
  padding-top:       1rem;
}

.pt-5{
  padding-top:       1.25rem;
}

.pt-6{
  padding-top:       1.5rem;
}

.text-left{
  text-align:       left;
}

.text-center{
  text-align:       center;
}

.text-right{
  text-align:       right;
}

.align-middle{
  vertical-align:       middle;
}

.font-\[Arial\2c Helvetica\2c sans-serif\]{
  font-family:       Arial,Helvetica,sans-serif;
}

.font-\[inherit\]{
  font-family:       inherit;
}

.font-mono{
  font-family:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl{
  font-size:       1.5rem;
  line-height:       2rem;
}

.text-3xl{
  font-size:       1.875rem;
  line-height:       2.25rem;
}

.text-4xl{
  font-size:       2.25rem;
  line-height:       2.5rem;
}

.text-5xl{
  font-size:       3rem;
  line-height:       1;
}

.text-\[0\.625rem\]{
  font-size:       0.625rem;
}

.text-\[0\.6875rem\]{
  font-size:       0.6875rem;
}

.text-\[0\.75rem\]{
  font-size:       0.75rem;
}

.text-\[0\.875rem\]{
  font-size:       0.875rem;
}

.text-\[1\.05rem\]{
  font-size:       1.05rem;
}

.text-\[1\.0625rem\]{
  font-size:       1.0625rem;
}

.text-\[1\.125rem\]{
  font-size:       1.125rem;
}

.text-\[1\.15rem\]{
  font-size:       1.15rem;
}

.text-\[1\.25rem\]{
  font-size:       1.25rem;
}

.text-\[1\.375rem\]{
  font-size:       1.375rem;
}

.text-\[1\.3rem\]{
  font-size:       1.3rem;
}

.text-\[10px\]{
  font-size:       10px;
}

.text-\[11px\]{
  font-size:       11px;
}

.text-\[1rem\]{
  font-size:       1rem;
}

.text-\[9px\]{
  font-size:       9px;
}

.text-\[calc\(0\.875rem\+2px\)\]{
  font-size:       calc(0.875rem + 2px);
}

.text-base{
  font-size:       0.9375rem;
  line-height:       1.5rem;
}

.text-lg{
  font-size:       1.0625rem;
  line-height:       1.625rem;
}

.text-sm{
  font-size:       0.875rem;
  line-height:       1.25rem;
}

.text-xl{
  font-size:       1.1875rem;
  line-height:       1.75rem;
}

.text-xs{
  font-size:       0.8125rem;
  line-height:       1.125rem;
}

.font-bold{
  font-weight:       700;
}

.font-medium{
  font-weight:       500;
}

.font-normal{
  font-weight:       400;
}

.font-semibold{
  font-weight:       600;
}

.uppercase{
  text-transform:       uppercase;
}

.lowercase{
  text-transform:       lowercase;
}

.capitalize{
  text-transform:       capitalize;
}

.normal-case{
  text-transform:       none;
}

.italic{
  font-style:       italic;
}

.tabular-nums{
  --tw-numeric-spacing:       tabular-nums;
  font-variant-numeric:       var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[1\.2\]{
  line-height:       1.2;
}

.leading-\[1\.3\]{
  line-height:       1.3;
}

.leading-\[1\.45\]{
  line-height:       1.45;
}

.leading-none{
  line-height:       1;
}

.leading-normal{
  line-height:       1.5;
}

.leading-relaxed{
  line-height:       1.625;
}

.leading-snug{
  line-height:       1.375;
}

.leading-tight{
  line-height:       1.25;
}

.tracking-\[-0\.01em\]{
  letter-spacing:       -0.01em;
}

.tracking-\[-0\.02em\]{
  letter-spacing:       -0.02em;
}

.tracking-\[0\.01em\]{
  letter-spacing:       0.01em;
}

.tracking-\[0\.08em\]{
  letter-spacing:       0.08em;
}

.tracking-\[0\.2em\]{
  letter-spacing:       0.2em;
}

.tracking-\[0\.3em\]{
  letter-spacing:       0.3em;
}

.tracking-\[0\.4em\]{
  letter-spacing:       0.4em;
}

.tracking-\[0\.5em\]{
  letter-spacing:       0.5em;
}

.tracking-normal{
  letter-spacing:       0em;
}

.tracking-tight{
  letter-spacing:       -0.025em;
}

.tracking-wide{
  letter-spacing:       0.025em;
}

.tracking-wider{
  letter-spacing:       0.05em;
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_38\%\2c transparent\)\]{
  color:       color-mix(in srgb,var(--foreground) 38%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_45\%\2c transparent\)\]{
  color:       color-mix(in srgb,var(--foreground) 45%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_55\%\2c transparent\)\]{
  color:       color-mix(in srgb,var(--foreground) 55%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_62\%\2c transparent\)\]{
  color:       color-mix(in srgb,var(--foreground) 62%,transparent);
}

.text-\[rgb\(202\2c 138\2c 4\)\]{
  --tw-text-opacity:       1;
  color:       rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-\[rgb\(22\2c 163\2c 74\)\]{
  --tw-text-opacity:       1;
  color:       rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-\[var\(--accent\)\]{
  color:       var(--accent);
}

.text-\[var\(--av-fg\2c var\(--foreground\)\)\]{
  color:       var(--av-fg,var(--foreground));
}

.text-\[var\(--eco-icon-hover\)\]{
  color:       var(--eco-icon-hover);
}

.text-\[var\(--eco-search-icon\)\]{
  color:       var(--eco-search-icon);
}

.text-\[var\(--eco-search-text\)\]{
  color:       var(--eco-search-text);
}

.text-\[var\(--eco-text-color\)\]{
  color:       var(--eco-text-color);
}

.text-\[var\(--info\)\]{
  color:       var(--info);
}

.text-amber-500{
  --tw-text-opacity:       1;
  color:       rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600{
  --tw-text-opacity:       1;
  color:       rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700{
  --tw-text-opacity:       1;
  color:       rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800{
  --tw-text-opacity:       1;
  color:       rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-background{
  color:       var(--background);
}

.text-blue-700{
  --tw-text-opacity:       1;
  color:       rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800{
  --tw-text-opacity:       1;
  color:       rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-border{
  color:       var(--border);
}

.text-brand-600{
  color:       var(--brand-600);
}

.text-emerald-600{
  --tw-text-opacity:       1;
  color:       rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700{
  --tw-text-opacity:       1;
  color:       rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity:       1;
  color:       rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity:       1;
  color:       rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity:       1;
  color:       rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity:       1;
  color:       rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity:       1;
  color:       rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-500{
  --tw-text-opacity:       1;
  color:       rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600{
  --tw-text-opacity:       1;
  color:       rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity:       1;
  color:       rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-indigo-700{
  --tw-text-opacity:       1;
  color:       rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-inherit{
  color:       inherit;
}

.text-ink{
  color:       var(--foreground);
}

.text-ink-400{
  color:       var(--ink-400);
}

.text-ink-500{
  color:       var(--ink-500);
}

.text-ink-600{
  color:       var(--ink-600);
}

.text-ink-700{
  color:       var(--ink-700);
}

.text-ink-900{
  color:       var(--ink-900);
}

.text-ink-muted{
  color:       var(--ink-muted);
}

.text-orange-400{
  --tw-text-opacity:       1;
  color:       rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-600{
  --tw-text-opacity:       1;
  color:       rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-purple-600{
  --tw-text-opacity:       1;
  color:       rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-red-400{
  --tw-text-opacity:       1;
  color:       rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity:       1;
  color:       rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity:       1;
  color:       rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity:       1;
  color:       rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-900{
  --tw-text-opacity:       1;
  color:       rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-surface{
  color:       var(--surface);
}

.text-white{
  --tw-text-opacity:       1;
  color:       rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-500{
  --tw-text-opacity:       1;
  color:       rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600{
  --tw-text-opacity:       1;
  color:       rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700{
  --tw-text-opacity:       1;
  color:       rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-zinc-400{
  --tw-text-opacity:       1;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line:       underline;
}

.no-underline{
  text-decoration-line:       none;
}

.decoration-border{
  text-decoration-color:       var(--border);
}

.underline-offset-2{
  text-underline-offset:       2px;
}

.antialiased{
  -webkit-font-smoothing:       antialiased;
  -moz-osx-font-smoothing:       grayscale;
}

.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::-moz-placeholder{
  --tw-placeholder-opacity:       1;
  color:       rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::placeholder{
  --tw-placeholder-opacity:       1;
  color:       rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.opacity-0{
  opacity:       0;
}

.opacity-100{
  opacity:       1;
}

.opacity-35{
  opacity:       0.35;
}

.opacity-40{
  opacity:       0.4;
}

.opacity-50{
  opacity:       0.5;
}

.opacity-70{
  opacity:       0.7;
}

.opacity-80{
  opacity:       0.8;
}

.shadow{
  --tw-shadow:       0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline:       2px solid transparent;
  outline-offset:       2px;
}

.outline{
  outline-style:       solid;
}

.ring{
  --tw-ring-offset-shadow:       var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:       var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur{
  --tw-blur:       blur(8px);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow:       drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale:       grayscale(100%);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert:       invert(100%);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[2px\]{
  --tw-backdrop-blur:       blur(2px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md{
  --tw-backdrop-blur:       blur(12px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur:       blur(4px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter{
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[background-color\2c border-color\]{
  transition-property:       background-color,border-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[background-color\2c color\]{
  transition-property:       background-color,color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-color\2c background-color\]{
  transition-property:       border-color,background-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-color\]{
  transition-property:       border-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-radius\2c filter\]{
  transition-property:       border-radius,filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[color\2c background-color\]{
  transition-property:       color,background-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[filter\]{
  transition-property:       filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[margin\]{
  transition-property:       margin;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c transform\2c visibility\]{
  transition-property:       opacity,transform,visibility;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c transform\]{
  transition-property:       opacity,transform;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c visibility\]{
  transition-property:       opacity,visibility;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-all{
  transition-property:       all;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-colors{
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-opacity{
  transition-property:       opacity;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-transform{
  transition-property:       transform;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.duration-150{
  transition-duration:       150ms;
}

.duration-200{
  transition-duration:       200ms;
}

.duration-300{
  transition-duration:       300ms;
}

.duration-\[120ms\]{
  transition-duration:       120ms;
}

.duration-\[160ms\]{
  transition-duration:       160ms;
}

.duration-\[180ms\]{
  transition-duration:       180ms;
}

.ease-in{
  transition-timing-function:       cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out{
  transition-timing-function:       cubic-bezier(0, 0, 0.2, 1);
}

.dev-shell .custom-table thead .hover\:bg-ink-50:hovertr {
  background: transparent !important;
  border-bottom: none !important;
}

.dev-shell .custom-table td .hover\:bg-ink-100:hoverspan {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .custom-table td .hover\:bg-gray-100:hoverspan {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .hover\:bg-ink-100:hoverspan {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


    .dev-shell .doc_content .hover\:bg-gray-100:hoverspan {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dev-shell .doc_content .hover\:bg-ink-100:hoverspan {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .doc_content .hover\:bg-gray-100:hoverspan {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .hover\:bg-red-50:hover {
  background: color-mix(in srgb, var(--foreground) 3.5%, var(--background)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  color: var(--ink-muted) !important;
}


    .dev-shell .doc_content .group\/sb:hover .group-hover\/sb\:rounded-xl.bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content .group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:rounded-xl.bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.dev-shell .dark\:bg-surface:is(.dark *).border-border {
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).rounded-xl,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).rounded-2xl,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).border,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content > .space-y-5 > .dark\:bg-surface:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-6 > .dark\:bg-surface:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-8 > .dark\:bg-surface:is(.dark *):last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > h3,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

.dev-shell .dark\:hover\:bg-surface:hover:is(.dark *).border-border {
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).rounded-xl,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).rounded-2xl,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).border,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content > .space-y-5 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-6 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-8 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > h3,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

@media (min-width: 640px){
  [data-language-selector-dropdown] > div.sm\:flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  [data-language-selector-dropdown] > div.sm\:flex-col.flex > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  .dev-shell .doc_content .relative .sm\:flex.items-start .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .relative .sm\:items-start.flex .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .relative .flex.items-start .sm\:flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  
    .dev-shell .doc_content .sm\:rounded-2xl.bg-surface {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 2rem !important;
    margin: 0 0 2rem !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8 > .bg-surface:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8,
    .dev-shell .doc_content > div.sm\:space-y-8 {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }
}

@media (min-width: 768px){
  .cengel-user-card__friend-actions .md\:hidden.cengel-btn {
    display: none;
  }

  .social-profile-public__friend-actions .md\:hidden.cengel-btn {
    display: none;
  }

  .md\:hidden.space-wizard-modal__step,.md\:hidden
.space-wizard-modal__success {
    display: none;
  }

  .md\:hidden.space-wizard-join {
    display: none;
  }

  .md\:hidden.space-tab-modal__error {
    display: none;
  }

  .md\:hidden.sp-settings-modal {
    display: none;
  }

  .md\:hidden.sp-settings-role-popover {
    display: none;
  }

  .md\:hidden.sp-roles-accordion__panel {
    display: none;
  }

  .md\:hidden.cengel-modal {
    display: none;
  }

  .md\:hidden
.report-modal__target {
    display: none;
  }

  .md\:hidden.report-modal__error {
    display: none;
  }

  .md\:hidden.super-users-flags-popover {
    display: none;
  }
}

@media (min-width: 1024px){
  .cengel-user-card__friend-actions .lg\:hidden.cengel-btn {
    display: none;
  }

  .social-profile-public__friend-actions .lg\:hidden.cengel-btn {
    display: none;
  }

  [data-language-selector-dropdown] > div.lg\:flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  [data-language-selector-dropdown] > div.lg\:flex-col.flex > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  .lg\:hidden.space-wizard-modal__step,.lg\:hidden
.space-wizard-modal__success {
    display: none;
  }

  .lg\:hidden.space-wizard-join {
    display: none;
  }

  .lg\:hidden.space-tab-modal__error {
    display: none;
  }

  .lg\:hidden.sp-settings-modal {
    display: none;
  }

  .lg\:hidden.sp-settings-role-popover {
    display: none;
  }

  .lg\:hidden.sp-roles-accordion__panel {
    display: none;
  }

  .lg\:hidden.cengel-modal {
    display: none;
  }

  .lg\:hidden
.report-modal__target {
    display: none;
  }

  .lg\:hidden.report-modal__error {
    display: none;
  }

  .lg\:hidden.super-users-flags-popover {
    display: none;
  }

  .dev-shell .doc_content .relative .lg\:flex.items-start .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }
}

.cengel-user-card__friend-actions .\[\&\.hidden\]\:\!hidden.hidden.cengel-btn {
  display: none !important;
}

.social-profile-public__friend-actions .\[\&\.hidden\]\:\!hidden.hidden.cengel-btn {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.space-wizard-modal__step,.\[\&\.hidden\]\:\!hidden.hidden
.space-wizard-modal__success {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.space-wizard-join {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.space-tab-modal__error {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-settings-modal {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-settings-role-popover {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-roles-accordion__panel {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.cengel-modal {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden
.report-modal__target {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.report-modal__error {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.super-users-flags-popover {
  display: none !important;
}

.cengel-user-card__friend-actions .\[\&\:\:-webkit-search-cancel-button\]\:hidden.cengel-btn::-webkit-search-cancel-button {
  display: none;
}

.social-profile-public__friend-actions .\[\&\:\:-webkit-search-cancel-button\]\:hidden.cengel-btn::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.space-wizard-modal__step::-webkit-search-cancel-button,.\[\&\:\:-webkit-search-cancel-button\]\:hidden
.space-wizard-modal__success::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.space-wizard-join::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.space-tab-modal__error::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-settings-modal::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-settings-role-popover::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-roles-accordion__panel::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.cengel-modal::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden
.report-modal__target::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.report-modal__error::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.super-users-flags-popover::-webkit-search-cancel-button {
  display: none;
}

.placeholder\:text-\[var\(--eco-search-placeholder\)\]::-moz-placeholder{
  color:       var(--eco-search-placeholder);
}

.placeholder\:text-\[var\(--eco-search-placeholder\)\]::placeholder{
  color:       var(--eco-search-placeholder);
}

.placeholder\:text-ink-muted::-moz-placeholder{
  color:       var(--ink-muted);
}

.placeholder\:text-ink-muted::placeholder{
  color:       var(--ink-muted);
}

.first\:rounded-t-\[13px\]:first-child{
  border-top-left-radius:       13px;
  border-top-right-radius:       13px;
}

.last\:rounded-b-\[13px\]:last-child{
  border-bottom-right-radius:       13px;
  border-bottom-left-radius:       13px;
}

.last\:border-0:last-child{
  border-width:       0px;
}

.last\:border-b-0:last-child{
  border-bottom-width:       0px;
}

.focus-within\:border-\[var\(--eco-search-focus-border\)\]:focus-within{
  border-color:       var(--eco-search-focus-border);
}

.focus-within\:bg-\[var\(--eco-search-focus-bg\)\]:focus-within{
  background-color:       var(--eco-search-focus-bg);
}

.hover\:border-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--foreground\)\)\]:hover{
  border-color:       color-mix(in srgb,var(--border) 50%,var(--foreground));
}

.hover\:border-\[color-mix\(in_srgb\2c var\(--foreground\)_25\%\2c transparent\)\]:hover{
  border-color:       color-mix(in srgb,var(--foreground) 25%,transparent);
}

.hover\:border-\[var\(--eco-products-hover-border\)\]:hover{
  border-color:       var(--eco-products-hover-border);
}

.hover\:border-brand-300:hover{
  border-color:       var(--brand-300);
}

.hover\:border-brand-400:hover{
  border-color:       var(--brand-400);
}

.hover\:border-gray-200:hover{
  --tw-border-opacity:       1;
  border-color:       rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[color-mix\(in_srgb\2c var\(--background\)_95\%\2c var\(--foreground\)\)\]:hover{
  background-color:       color-mix(in srgb,var(--background) 95%,var(--foreground));
}

.hover\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_5\%\2c transparent\)\]:hover{
  background-color:       color-mix(in srgb,var(--foreground) 5%,transparent);
}

.hover\:bg-\[var\(--eco-products-hover-bg\)\]:hover{
  background-color:       var(--eco-products-hover-bg);
}

.hover\:bg-\[var\(--sidebar-hover-bg\)\]:hover{
  background-color:       var(--sidebar-hover-bg);
}

.hover\:bg-brand-700:hover{
  background-color:       var(--brand-700);
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity:       1;
  background-color:       rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity:       1;
  background-color:       rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover{
  --tw-bg-opacity:       1;
  background-color:       rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover{
  --tw-bg-opacity:       1;
  background-color:       rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-subtle:hover{
  background-color:       var(--surface-subtle);
}

.hover\:bg-white:hover{
  --tw-bg-opacity:       1;
  background-color:       rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-\[var\(--accent-hover\)\]:hover{
  color:       var(--accent-hover);
}

.hover\:text-brand-600:hover{
  color:       var(--brand-600);
}

.hover\:text-brand-700:hover{
  color:       var(--brand-700);
}

.hover\:text-gray-700:hover{
  --tw-text-opacity:       1;
  color:       rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover{
  --tw-text-opacity:       1;
  color:       rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover{
  color:       var(--foreground);
}

.hover\:text-ink-900:hover{
  color:       var(--ink-900);
}

.hover\:text-red-700:hover{
  --tw-text-opacity:       1;
  color:       rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line:       underline;
}

.hover\:opacity-100:hover{
  opacity:       1;
}

.focus\:border-\[var\(--accent\)\]:focus{
  border-color:       var(--accent);
}

.focus\:border-brand-500:focus{
  border-color:       var(--brand-500);
}

.focus\:border-ink:focus{
  border-color:       var(--foreground);
}

.focus\:border-neutral-500:focus{
  --tw-border-opacity:       1;
  border-color:       rgb(115 115 115 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus{
  outline:       2px solid transparent;
  outline-offset:       2px;
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow:       var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:       var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow:       var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:       var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4:focus{
  --tw-ring-offset-shadow:       var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:       var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[var\(--accent-soft\)\]:focus{
  --tw-ring-color:       var(--accent-soft);
}

.focus\:ring-\[var\(--focus-ring\)\]:focus{
  --tw-ring-color:       var(--focus-ring);
}

.focus\:ring-brand-100:focus{
  --tw-ring-color:       var(--brand-100);
}

.focus\:ring-purple-500:focus{
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width:       2px;
}

.focus\:ring-offset-white:focus{
  --tw-ring-offset-color:       #fff;
}

.focus-visible\:underline:focus-visible{
  text-decoration-line:       underline;
}

.focus-visible\:outline:focus-visible{
  outline-style:       solid;
}

.focus-visible\:outline-1:focus-visible{
  outline-width:       1px;
}

.focus-visible\:outline-2:focus-visible{
  outline-width:       2px;
}

.focus-visible\:outline-offset-0:focus-visible{
  outline-offset:       0px;
}

.focus-visible\:outline-offset-2:focus-visible{
  outline-offset:       2px;
}

.focus-visible\:outline-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_75\%\2c \#ffffff\)\]:focus-visible{
  outline-color:       color-mix(in srgb,var(--account-changes-accent) 75%,#ffffff);
}

.focus-visible\:outline-\[color-mix\(in_srgb\2c var\(--foreground\)_45\%\2c transparent\)\]:focus-visible{
  outline-color:       color-mix(in srgb,var(--foreground) 45%,transparent);
}

.focus-visible\:outline-\[var\(--focus-ring\)\]:focus-visible{
  outline-color:       var(--focus-ring);
}

.focus-visible\:outline-border:focus-visible{
  outline-color:       var(--border);
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow:       var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:       var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible{
  --tw-ring-inset:       inset;
}

.focus-visible\:ring-border:focus-visible{
  --tw-ring-color:       var(--border);
}

.focus-visible\:ring-purple-500:focus-visible{
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-red-500:focus-visible{
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width:       2px;
}

.active\:scale-95:active{
  --tw-scale-x:       .95;
  --tw-scale-y:       .95;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:enabled\:brightness-\[1\.08\]:enabled:hover{
  --tw-brightness:       brightness(1.08);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.active\:enabled\:brightness-\[0\.94\]:enabled:active{
  --tw-brightness:       brightness(0.94);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.disabled\:cursor-not-allowed:disabled{
  cursor:       not-allowed;
}

.disabled\:opacity-50:disabled{
  opacity:       0.5;
}

.disabled\:opacity-55:disabled{
  opacity:       0.55;
}

.disabled\:filter-none:disabled{
  filter:       none;
}

.group\/search:focus-within .group-focus-within\/search\:text-\[var\(--eco-search-icon-focus\)\]{
  color:       var(--eco-search-icon-focus);
}

.group\/search:focus-within .group-focus-within\/search\:opacity-0{
  opacity:       0;
}

.group:hover .group-hover\:scale-105{
  --tw-scale-x:       1.05;
  --tw-scale-y:       1.05;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/sb:hover .group-hover\/sb\:rounded-xl{
  border-radius:       12px;
}

.group\/nav:hover .group-hover\/nav\:border-transparent{
  border-color:       transparent;
}

.group\/nav:hover .group-hover\/nav\:bg-\[var\(--sidebar-hover-bg\)\]{
  background-color:       var(--sidebar-hover-bg);
}

.group:hover .group-hover\:text-brand-600{
  color:       var(--brand-600);
}

.group:hover .group-hover\:text-gray-600{
  --tw-text-opacity:       1;
  color:       rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-ink{
  color:       var(--foreground);
}

.group\/nav:hover .group-hover\/nav\:opacity-100{
  opacity:       1;
}

.group\/nav:hover .group-hover\/nav\:opacity-65{
  opacity:       0.65;
}

.group\/sb:hover .group-hover\/sb\:opacity-100{
  opacity:       1;
}

.group:hover .group-hover\:opacity-100{
  opacity:       1;
}

.has-\[\:checked\]\:border-brand-600:has(:checked){
  border-color:       var(--brand-600);
}

.has-\[\:checked\]\:bg-brand-50:has(:checked){
  background-color:       var(--brand-50);
}

.aria-expanded\:border-\[var\(--eco-products-open-border\)\][aria-expanded="true"]{
  border-color:       var(--eco-products-open-border);
}

.aria-expanded\:bg-\[var\(--eco-products-open-bg\)\][aria-expanded="true"]{
  background-color:       var(--eco-products-open-bg);
}

.group[aria-expanded="true"] .group-aria-expanded\:rotate-180{
  --tw-rotate:       180deg;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[visible\=true\]\:pointer-events-auto[data-visible="true"]{
  pointer-events:       auto;
}

.data-\[visible\=true\]\:visible[data-visible="true"]{
  visibility:       visible;
}

.data-\[nav-active\=true\]\:bg-\[var\(--sidebar-active-bg\)\][data-nav-active="true"]{
  background-color:       var(--sidebar-active-bg);
}

.data-\[space-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_9\%\2c transparent\)\][data-space-active="true"]{
  background-color:       color-mix(in srgb,var(--foreground) 9%,transparent);
}

.data-\[space-active\=true\]\:bg-\[var\(--sidebar-active-bg\)\][data-space-active="true"]{
  background-color:       var(--sidebar-active-bg);
}

.data-\[nav-active\=true\]\:text-\[var\(--sidebar-active-fg\)\][data-nav-active="true"]{
  color:       var(--sidebar-active-fg);
}

.data-\[visible\=true\]\:opacity-100[data-visible="true"]{
  opacity:       1;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:rounded-xl{
  border-radius:       12px;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:border-transparent{
  border-color:       transparent;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_10\%\2c transparent\)\]{
  background-color:       color-mix(in srgb,var(--foreground) 10%,transparent);
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_12\%\2c transparent\)\]{
  background-color:       color-mix(in srgb,var(--foreground) 12%,transparent);
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:text-\[var\(--sidebar-active-fg\)\]{
  color:       var(--sidebar-active-fg);
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:opacity-100{
  opacity:       1;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:opacity-80{
  opacity:       0.8;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:opacity-100{
  opacity:       1;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:brightness-\[1\.06\]{
  --tw-brightness:       brightness(1.06);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:saturate-\[1\.2\]{
  --tw-saturate:       saturate(1.2);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (prefers-reduced-motion: reduce){
  .motion-reduce\:transition-none{
    transition-property:       none;
  }
}

.dark\:divide-zinc-700\/60:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color:       rgb(63 63 70 / 0.6);
}

.dark\:\!border-zinc-700:is(.dark *){
  --tw-border-opacity:       1 !important;
  border-color:       rgb(63 63 70 / var(--tw-border-opacity, 1)) !important;
}

.dark\:border-amber-800\/50:is(.dark *){
  border-color:       rgb(146 64 14 / 0.5);
}

.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-green-800:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-ink-600:is(.dark *){
  border-color:       var(--ink-600);
}

.dark\:border-ink-700:is(.dark *){
  border-color:       var(--ink-700);
}

.dark\:border-red-500:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-red-900:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(127 29 29 / var(--tw-border-opacity, 1));
}

.dark\:border-red-900\/30:is(.dark *){
  border-color:       rgb(127 29 29 / 0.3);
}

.dark\:border-red-900\/40:is(.dark *){
  border-color:       rgb(127 29 29 / 0.4);
}

.dark\:border-white\/10:is(.dark *){
  border-color:       rgb(255 255 255 / 0.1);
}

.dark\:border-zinc-600:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(82 82 91 / var(--tw-border-opacity, 1));
}

.dark\:border-zinc-700:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(63 63 70 / var(--tw-border-opacity, 1));
}

.dark\:border-zinc-700\/70:is(.dark *){
  border-color:       rgb(63 63 70 / 0.7);
}

.dark\:\!bg-\[rgba\(17\2c 17\2c 22\2c 0\.95\)\]:is(.dark *){
  background-color:       rgba(17,17,22,0.95) !important;
}

.dark\:bg-\[\#111116\]:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(17 17 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_12\%\2c transparent\)\]:is(.dark *){
  background-color:       color-mix(in srgb,var(--foreground) 12%,transparent);
}

.dark\:bg-\[var\(--av-bg-d\2c var\(--av-bg\2c color-mix\(in_srgb\2c var\(--foreground\)_16\%\2c transparent\)\)\)\]:is(.dark *){
  background-color:       var(--av-bg-d,var(--av-bg,color-mix(in srgb,var(--foreground) 16%,transparent)));
}

.dark\:bg-amber-900\/30:is(.dark *){
  background-color:       rgb(120 53 15 / 0.3);
}

.dark\:bg-background:is(.dark *){
  background-color:       var(--background);
}

.dark\:bg-black\/60:is(.dark *){
  background-color:       rgb(0 0 0 / 0.6);
}

.dark\:bg-gray-800\/50:is(.dark *){
  background-color:       rgb(31 41 55 / 0.5);
}

.dark\:bg-gray-900\/80:is(.dark *){
  background-color:       rgb(17 24 39 / 0.8);
}

.dark\:bg-green-950\/30:is(.dark *){
  background-color:       rgb(5 46 22 / 0.3);
}

.dark\:bg-ink:is(.dark *){
  background-color:       var(--foreground);
}

.dark\:bg-ink-700:is(.dark *){
  background-color:       var(--ink-700);
}

.dark\:bg-red-900\/20:is(.dark *){
  background-color:       rgb(127 29 29 / 0.2);
}

.dark\:bg-red-950\/25:is(.dark *){
  background-color:       rgb(69 10 10 / 0.25);
}

.dark\:bg-red-950\/30:is(.dark *){
  background-color:       rgb(69 10 10 / 0.3);
}

.dark\:bg-surface:is(.dark *){
  background-color:       var(--surface);
}

.dark\:bg-surface-subtle:is(.dark *){
  background-color:       var(--surface-subtle);
}

.dark\:bg-transparent:is(.dark *){
  background-color:       transparent;
}

.dark\:bg-zinc-800:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-zinc-800\/40:is(.dark *){
  background-color:       rgb(39 39 42 / 0.4);
}

.dark\:bg-zinc-800\/60:is(.dark *){
  background-color:       rgb(39 39 42 / 0.6);
}

.dark\:bg-zinc-900:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.dark\:bg-zinc-900\/70:is(.dark *){
  background-color:       rgb(24 24 27 / 0.7);
}

.dark\:\!text-zinc-300:is(.dark *){
  --tw-text-opacity:       1 !important;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1)) !important;
}

.dark\:\!text-zinc-400:is(.dark *){
  --tw-text-opacity:       1 !important;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1)) !important;
}

.dark\:\!text-zinc-50:is(.dark *){
  --tw-text-opacity:       1 !important;
  color:       rgb(250 250 250 / var(--tw-text-opacity, 1)) !important;
}

.dark\:text-\[color-mix\(in_srgb\2c var\(--foreground\)_50\%\2c transparent\)\]:is(.dark *){
  color:       color-mix(in srgb,var(--foreground) 50%,transparent);
}

.dark\:text-\[color-mix\(in_srgb\2c var\(--foreground\)_72\%\2c transparent\)\]:is(.dark *){
  color:       color-mix(in srgb,var(--foreground) 72%,transparent);
}

.dark\:text-\[var\(--av-fg-d\2c var\(--av-fg\2c var\(--foreground\)\)\)\]:is(.dark *){
  color:       var(--av-fg-d,var(--av-fg,var(--foreground)));
}

.dark\:text-amber-200\/90:is(.dark *){
  color:       rgb(253 230 138 / 0.9);
}

.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-200:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-ink:is(.dark *){
  color:       var(--foreground);
}

.dark\:text-ink-400:is(.dark *){
  color:       var(--ink-400);
}

.dark\:text-ink-muted:is(.dark *){
  color:       var(--ink-muted);
}

.dark\:text-red-200:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-surface:is(.dark *){
  color:       var(--surface);
}

.dark\:text-zinc-100:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-200:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(228 228 231 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-300:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-400:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-500:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:opacity-\[0\.36\]:is(.dark *){
  opacity:       0.36;
}

.dark\:opacity-\[0\.68\]:is(.dark *){
  opacity:       0.68;
}

.dark\:ring-offset-zinc-900:is(.dark *){
  --tw-ring-offset-color:       #18181b;
}

.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder{
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder{
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-brand-500:hover:is(.dark *){
  border-color:       var(--brand-500);
}

.dark\:hover\:border-brand-700:hover:is(.dark *){
  border-color:       var(--brand-700);
}

.dark\:hover\:border-ink-600:hover:is(.dark *){
  border-color:       var(--ink-600);
}

.dark\:hover\:border-zinc-500:hover:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(113 113 122 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_8\%\2c transparent\)\]:hover:is(.dark *){
  background-color:       color-mix(in srgb,var(--foreground) 8%,transparent);
}

.dark\:hover\:bg-gray-900:hover:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-ink-700:hover:is(.dark *){
  background-color:       var(--ink-700);
}

.dark\:hover\:bg-red-900\/20:hover:is(.dark *){
  background-color:       rgb(127 29 29 / 0.2);
}

.dark\:hover\:bg-red-950\/30:hover:is(.dark *){
  background-color:       rgb(69 10 10 / 0.3);
}

.dark\:hover\:bg-surface:hover:is(.dark *){
  background-color:       var(--surface);
}

.dark\:hover\:bg-surface-subtle:hover:is(.dark *){
  background-color:       var(--surface-subtle);
}

.dark\:hover\:bg-zinc-700:hover:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(63 63 70 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-zinc-800:hover:is(.dark *){
  --tw-bg-opacity:       1;
  background-color:       rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-ink:hover:is(.dark *){
  color:       var(--foreground);
}

.dark\:hover\:text-red-300:hover:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-zinc-100:hover:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-zinc-300:hover:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark\:focus\:border-zinc-500:focus:is(.dark *){
  --tw-border-opacity:       1;
  border-color:       rgb(113 113 122 / var(--tw-border-opacity, 1));
}

.dark\:focus\:ring-\[var\(--focus-ring\)\]:focus:is(.dark *){
  --tw-ring-color:       var(--focus-ring);
}

.dark\:focus\:ring-offset-0:focus:is(.dark *){
  --tw-ring-offset-width:       0px;
}

.dark\:focus\:ring-offset-\[\#0f0f13\]:focus:is(.dark *){
  --tw-ring-offset-color:       #0f0f13;
}

.dark\:focus-visible\:ring-offset-zinc-900:focus-visible:is(.dark *){
  --tw-ring-offset-color:       #18181b;
}

.group:hover .dark\:group-hover\:text-zinc-300:is(.dark *){
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark\:data-\[space-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_13\%\2c transparent\)\][data-space-active="true"]:is(.dark *){
  background-color:       color-mix(in srgb,var(--foreground) 13%,transparent);
}

.group\/sb[data-space-active="true"] .dark\:group-data-\[space-active\=true\]\/sb\:brightness-\[1\.14\]:is(.dark *){
  --tw-brightness:       brightness(1.14);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group\/sb[data-space-active="true"] .dark\:group-data-\[space-active\=true\]\/sb\:saturate-\[1\.25\]:is(.dark *){
  --tw-saturate:       saturate(1.25);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px){
  .sm\:pointer-events-none{
    pointer-events:       none;
  }

  .sm\:col-span-2{
    grid-column:       span 2 / span 2;
  }

  .sm\:-mx-8{
    margin-left:       -2rem;
    margin-right:       -2rem;
  }

  .sm\:-mt-20{
    margin-top:       -5rem;
  }

  .sm\:mb-10{
    margin-bottom:       2.5rem;
  }

  .sm\:mb-12{
    margin-bottom:       3rem;
  }

  .sm\:mb-4{
    margin-bottom:       1rem;
  }

  .sm\:mb-6{
    margin-bottom:       1.5rem;
  }

  .sm\:flex{
    display:       flex;
  }

  .sm\:grid{
    display:       grid;
  }

  .sm\:h-10{
    height:       2.5rem;
  }

  .sm\:h-11{
    height:       2.75rem;
  }

  .sm\:h-12{
    height:       3rem;
  }

  .sm\:h-14{
    height:       3.5rem;
  }

  .sm\:h-20{
    height:       5rem;
  }

  .sm\:h-28{
    height:       7rem;
  }

  .sm\:h-48{
    height:       12rem;
  }

  .sm\:h-8{
    height:       2rem;
  }

  .sm\:w-10{
    width:       2.5rem;
  }

  .sm\:w-11{
    width:       2.75rem;
  }

  .sm\:w-12{
    width:       3rem;
  }

  .sm\:w-28{
    width:       7rem;
  }

  .sm\:w-8{
    width:       2rem;
  }

  .sm\:w-auto{
    width:       auto;
  }

  .sm\:min-w-0{
    min-width:       0px;
  }

  .sm\:max-w-2xl{
    max-width:       42rem;
  }

  .sm\:max-w-lg{
    max-width:       32rem;
  }

  .sm\:flex-1{
    flex:       1 1 0%;
  }

  .sm\:flex-shrink-0{
    flex-shrink:       0;
  }

  .sm\:translate-y-1\.5{
    --tw-translate-y:       0.375rem;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

  .sm\:grid-cols-3{
    grid-template-columns:       repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\]{
    grid-template-columns:       minmax(0,1fr) auto;
  }

  .sm\:flex-row{
    flex-direction:       row;
  }

  .sm\:flex-col{
    flex-direction:       column;
  }

  .sm\:items-start{
    align-items:       flex-start;
  }

  .sm\:items-end{
    align-items:       flex-end;
  }

  .sm\:items-center{
    align-items:       center;
  }

  .sm\:justify-end{
    justify-content:       flex-end;
  }

  .sm\:justify-center{
    justify-content:       center;
  }

  .sm\:justify-between{
    justify-content:       space-between;
  }

  .sm\:gap-2\.5{
    gap:       0.625rem;
  }

  .sm\:gap-3{
    gap:       0.75rem;
  }

  .sm\:gap-4{
    gap:       1rem;
  }

  .sm\:gap-5{
    gap:       1.25rem;
  }

  .sm\:gap-8{
    gap:       2rem;
  }

  .sm\:gap-x-5{
    -moz-column-gap:       1.25rem;
         column-gap:       1.25rem;
  }

  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse:       0;
    margin-top:       calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:       calc(2rem * var(--tw-space-y-reverse));
  }

  .sm\:self-auto{
    align-self:       auto;
  }

  .sm\:overflow-visible{
    overflow:       visible;
  }

  .sm\:rounded-2xl{
    border-radius:       16px;
  }

  .sm\:rounded-\[13px\]{
    border-radius:       13px;
  }

  .sm\:rounded-\[20px\]{
    border-radius:       20px;
  }

  .sm\:rounded-\[var\(--radius-card\)\]{
    border-radius:       var(--radius-card);
  }

  .sm\:p-4{
    padding:       1rem;
  }

  .sm\:p-5{
    padding:       1.25rem;
  }

  .sm\:p-6{
    padding:       1.5rem;
  }

  .sm\:p-8{
    padding:       2rem;
  }

  .sm\:p-\[var\(--section-pad-y-row\)\]{
    padding:       var(--section-pad-y-row);
  }

  .sm\:px-0{
    padding-left:       0px;
    padding-right:       0px;
  }

  .sm\:px-10{
    padding-left:       2.5rem;
    padding-right:       2.5rem;
  }

  .sm\:px-4{
    padding-left:       1rem;
    padding-right:       1rem;
  }

  .sm\:px-6{
    padding-left:       1.5rem;
    padding-right:       1.5rem;
  }

  .sm\:px-8{
    padding-left:       2rem;
    padding-right:       2rem;
  }

  .sm\:px-\[var\(--section-pad-x\)\]{
    padding-left:       var(--section-pad-x);
    padding-right:       var(--section-pad-x);
  }

  .sm\:py-10{
    padding-top:       2.5rem;
    padding-bottom:       2.5rem;
  }

  .sm\:py-12{
    padding-top:       3rem;
    padding-bottom:       3rem;
  }

  .sm\:py-8{
    padding-top:       2rem;
    padding-bottom:       2rem;
  }

  .sm\:py-\[var\(--section-pad-y-row\)\]{
    padding-top:       var(--section-pad-y-row);
    padding-bottom:       var(--section-pad-y-row);
  }

  .sm\:pb-12{
    padding-bottom:       3rem;
  }

  .sm\:text-2xl{
    font-size:       1.5rem;
    line-height:       2rem;
  }

  .sm\:text-3xl{
    font-size:       1.875rem;
    line-height:       2.25rem;
  }

  .sm\:text-4xl{
    font-size:       2.25rem;
    line-height:       2.5rem;
  }

  .sm\:text-6xl{
    font-size:       3.75rem;
    line-height:       1;
  }

  .sm\:text-\[0\.875rem\]{
    font-size:       0.875rem;
  }

  .sm\:text-base{
    font-size:       0.9375rem;
    line-height:       1.5rem;
  }

  .sm\:text-lg{
    font-size:       1.0625rem;
    line-height:       1.625rem;
  }

  .sm\:text-xl{
    font-size:       1.1875rem;
    line-height:       1.75rem;
  }

  .sm\:text-xs{
    font-size:       0.8125rem;
    line-height:       1.125rem;
  }

  .sm\:opacity-0{
    opacity:       0;
  }

  .sm\:transition-\[opacity\2c transform\]{
    transition-property:       opacity,transform;
    transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:       150ms;
  }

  .sm\:duration-200{
    transition-duration:       200ms;
  }

  .sm\:ease-out{
    transition-timing-function:       cubic-bezier(0, 0, 0.2, 1);
  }

  .data-\[warning-visible\=true\]\:sm\:translate-y-0[data-warning-visible="true"]{
    --tw-translate-y:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .data-\[warning-visible\=true\]\:sm\:opacity-100[data-warning-visible="true"]{
    opacity:       1;
  }

  .data-\[warning-visible\=true\]\:sm\:duration-300[data-warning-visible="true"]{
    transition-duration:       300ms;
  }
}

@media (min-width: 768px){
  .md\:left-full{
    left:       100%;
  }

  .md\:right-auto{
    right:       auto;
  }

  .md\:top-0{
    top:       0px;
  }

  .md\:ml-1{
    margin-left:       0.25rem;
  }

  .md\:mt-0{
    margin-top:       0px;
  }

  .md\:block{
    display:       block;
  }

  .md\:inline{
    display:       inline;
  }

  .md\:hidden{
    display:       none;
  }

  .md\:w-44{
    width:       11rem;
  }

  .md\:max-w-\[min\(11rem\2c calc\(100vw-2rem\)\)\]{
    max-width:       min(11rem, calc(100vw - 2rem));
  }

  .md\:origin-top-left{
    transform-origin:       top left;
  }

  .md\:-translate-x-1{
    --tw-translate-x:       -0.25rem;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-x-0{
    --tw-translate-x:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-y-0{
    --tw-translate-y:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

  .md\:grid-cols-4{
    grid-template-columns:       repeat(4, minmax(0, 1fr));
  }

  .md\:p-10{
    padding:       2.5rem;
  }

  .md\:p-8{
    padding:       2rem;
  }

  .md\:pb-20{
    padding-bottom:       5rem;
  }
}

@media (min-width: 1024px){
  .lg\:sticky{
    position:       sticky;
  }

  .lg\:left-\[var\(--account-split-sidebar-w\2c 320px\)\]{
    left:       var(--account-split-sidebar-w,320px);
  }

  .lg\:col-span-2{
    grid-column:       span 2 / span 2;
  }

  .lg\:ml-72{
    margin-left:       18rem;
  }

  .lg\:box-border{
    box-sizing:       border-box;
  }

  .lg\:block{
    display:       block;
  }

  .lg\:flex{
    display:       flex;
  }

  .lg\:hidden{
    display:       none;
  }

  .lg\:h-\[var\(--account-static-sidebar-w\)\]{
    height:       var(--account-static-sidebar-w);
  }

  .lg\:min-h-0{
    min-height:       0px;
  }

  .lg\:w-\[var\(--account-static-sidebar-w\)\]{
    width:       var(--account-static-sidebar-w);
  }

  .lg\:flex-1{
    flex:       1 1 0%;
  }

  .lg\:shrink-0{
    flex-shrink:       0;
  }

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

  .lg\:grid-cols-3{
    grid-template-columns:       repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns:       repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction:       row;
  }

  .lg\:flex-col{
    flex-direction:       column;
  }

  .lg\:items-center{
    align-items:       center;
  }

  .lg\:items-stretch{
    align-items:       stretch;
  }

  .lg\:justify-center{
    justify-content:       center;
  }

  .lg\:gap-\[var\(--sidebar-gap-tight\)\]{
    gap:       var(--sidebar-gap-tight);
  }

  .lg\:border-b{
    border-bottom-width:       1px;
  }

  .lg\:border-r{
    border-right-width:       1px;
  }

  .lg\:border-t-0{
    border-top-width:       0px;
  }

  .lg\:border-\[var\(--eco-header-border\)\]{
    border-color:       var(--eco-header-border);
  }

  .lg\:bg-\[var\(--shell-rail-bg\)\]{
    background-color:       var(--shell-rail-bg);
  }

  .lg\:px-10{
    padding-left:       2.5rem;
    padding-right:       2.5rem;
  }

  .lg\:px-8{
    padding-left:       2rem;
    padding-right:       2rem;
  }

  .lg\:px-\[var\(--eco-header-pad\)\]{
    padding-left:       var(--eco-header-pad);
    padding-right:       var(--eco-header-pad);
  }

  .lg\:pt-\[var\(--eco-header-pad\)\]{
    padding-top:       var(--eco-header-pad);
  }
}

.\[\&\.hidden\]\:\!hidden.hidden{
  display:       none !important;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button{
  display:       none;
}

.\[\&_\#profileDisplayName\]\:select-text #profileDisplayName{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_\#profileUsernameInline\]\:select-text #profileUsernameInline{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_\.select-all\]\:select-all .select-all{
  -webkit-user-select:       all;
     -moz-user-select:       all;
          user-select:       all;
}

.\[\&_\[contenteditable\=true\]\]\:select-text [contenteditable=true]{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_button\]\:font-\[inherit\] button{
  font-family:       inherit;
}

.\[\&_code\]\:select-text code{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_input\]\:select-text input{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_input\]\:font-\[inherit\] input{
  font-family:       inherit;
}

.\[\&_kbd\]\:select-text kbd{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_pre\]\:select-text pre{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_samp\]\:select-text samp{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_select\]\:select-text select{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_select\]\:font-\[inherit\] select{
  font-family:       inherit;
}

.\[\&_textarea\]\:select-text textarea{
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_textarea\]\:font-\[inherit\] textarea{
  font-family:       inherit;
}