/* ================================================
   layout.css — Sidebar, Topbar, İskelet, Responsive
   ================================================ */

.app-layout { display: flex; min-height: 100vh; }

/* ============ SIDEBAR ============ */
/* ============ SIDEBAR (Zugo Navigation Rail / Drawer) ============ */
.sidebar {
  width: 80px; /* Zugo Navigation Rail */
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-2); /* Zugo Surface Container Low */
  border-right: 1px solid var(--color-border);
  transition: width var(--duration-slow) var(--ease-out);
  overflow: visible;
}

body.sidebar-expanded .sidebar { width: 280px; } /* Zugo Navigation Drawer width */

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  height: var(--topbar-height);
  flex-shrink: 0;
  transition: padding var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .sidebar__header,
body.sidebar-peek .sidebar__header {
  justify-content: space-between;
  padding: 0 var(--space-6);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  text-decoration: none;
}
.sidebar__logo:hover { opacity: 0.9; }
.sidebar__logo-icon {
  width: 40px; height: 40px; /* Zugo size standard */
  border-radius: var(--radius-md); /* Zugo Shape MD (20px) */
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: var(--text-md);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar__emblem-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar__logo-text {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  position: absolute;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  display: flex;
  align-items: center;
}
.sidebar__logo-full-img {
  height: 36px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
body.dark .sidebar__logo-full-img {
  filter: brightness(0) invert(1);
}
body.sidebar-expanded .sidebar__logo-text,
body.sidebar-peek .sidebar__logo-text {
  opacity: 1; transform: translateX(0);
  pointer-events: auto; position: static;
}
.sidebar__logo-text span { color: var(--color-primary); }

/* Modül şeridi aktifken sidebar kendi logosunu tekrar etmez; onun yerine
   seçili modülün adı/ikonu gösterilir — bkz. Starter.md 4.7 */
.sidebar__module-context {
  display: none;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-md);
}
.sidebar__module-context-icon {
  width: 24px; height: 24px;
  font-size: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}
.sidebar__module-context-label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  position: absolute;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
/* Sidebar Header Düzeni */
.sidebar__header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
body.has-module-rail .sidebar__logo {
  display: flex;
  align-items: center;
}
/* Modül şeridi zaten solda amblemi gösterdiği için sidebar başlığındaki ikinci amblemi gizle, sadece yatay tam logoyu göster */
body.has-module-rail .sidebar__logo-icon {
  display: none;
}
body.has-module-rail .sidebar__module-context {
  display: none;
}

/* Toggle */
.sidebar__toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background-color: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
  flex-shrink: 0;
}
body:not(.sidebar-expanded):not(.sidebar-peek) .sidebar__toggle-btn {
  display: none !important;
}
.sidebar__toggle-btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}
.sidebar__toggle-btn i, .sidebar__toggle-btn svg, .sidebar__toggle-btn .material-symbols-outlined {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Nav */
.sidebar__nav {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .sidebar__nav,
body.sidebar-peek .sidebar__nav { padding: var(--space-4) var(--space-3); }

.nav-group { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-group[hidden] { display: none; } /* [hidden]'ın display:flex tarafından ezilmesini önler — modül geçişi için gerekli */

.nav-group-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding: 0; height: 0; opacity: 0;
  overflow: hidden; pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-out), height var(--duration-fast) var(--ease-out), padding var(--duration-fast) var(--ease-out);
}
body.sidebar-expanded .nav-group-label,
body.sidebar-peek .nav-group-label {
  opacity: 1; height: auto;
  padding: var(--space-4) var(--space-3) var(--space-2);
  pointer-events: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  border-radius: var(--radius-pill); /* Zugo Navigation items are fully rounded pills */
  color: var(--color-text-body);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: padding var(--duration-slow) var(--ease-out), background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
  text-decoration: none;
  position: relative;
  height: 48px; /* Zugo Standard */
}
body.sidebar-expanded .nav-item,
body.sidebar-peek .nav-item {
  justify-content: flex-start;
  padding: 0 var(--space-4);
  margin: 0 var(--space-1);
}
.nav-item:hover { background-color: var(--color-surface-hover); color: var(--color-text); }

/* Zugo Navigation Active States */
.nav-item--active {
  color: var(--color-on-secondary-container);
  font-weight: 700;
}
body.sidebar-expanded .nav-item--active,
body.sidebar-peek .nav-item--active {
  background-color: var(--color-secondary-container);
}

.nav-icon {
  width: 24px; height: 24px;
  font-size: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-out);
}
/* Collapsed Zugo Active Indicator (Pill outline around icon) */
body:not(.sidebar-expanded):not(.sidebar-peek) .nav-item--active .nav-icon {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  width: 56px;
  height: 32px;
}

.nav-label {
  opacity: 0; transform: translateX(-10px);
  pointer-events: none; position: absolute;
  font-size: var(--text-sm); font-weight: 500;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .nav-label,
body.sidebar-peek .nav-label {
  opacity: 1; transform: translateX(0);
  pointer-events: auto; position: static;
  margin-left: var(--space-3);
}

/* Tooltip (collapsed) */
body:not(.sidebar-expanded):not(.sidebar-peek) .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background-color: var(--neutral-800);
  color: var(--color-inverse-on-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
  z-index: var(--z-tooltip);
}
body:not(.sidebar-expanded):not(.sidebar-peek) .nav-item:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* Sidebar Footer */
/* ============ ALTA YASLANAN NAV GRUBU (Yönetim / Tanımlamalar) ============
   Tanımlamalar, ayarlar, yetkilendirme gibi SEYREK kullanılan menüler günlük
   iş akışının arasına karışmaz; sidebar'ın altına, kullanıcı bölümünün hemen
   üstüne yaslanır. `margin-top: auto` bu grubu (ve sonrasındakileri) aşağı
   iter — .sidebar__nav bir flex kolon olduğu için ekstra sarmalayıcı gerekmez.
   Üstündeki ince çizgi, günlük menülerden görsel olarak ayırır. */
.nav-group--bottom {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sidebar__footer {
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--color-border);
  position: relative;
  flex-shrink: 0;
  transition: padding var(--duration-slow) var(--ease-out);
}
/* Not: bu genişleme kuralları yalnızca .sidebar içindeki footer'a uygulanır.
   has-module-rail projelerinde footer module-rail'e taşınır (bkz. 4.7/4.9) ve
   module-rail asla "expanded" olmadığı için orada her zaman ikon-only kalır. */
body.sidebar-expanded .sidebar .sidebar__footer { padding: var(--space-3); }

.sidebar__user-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: padding var(--duration-slow) var(--ease-out), background-color var(--duration-fast) var(--ease-in-out);
}
body.sidebar-expanded .sidebar .sidebar__user-menu-trigger {
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
}
.sidebar__user-menu-trigger:hover { background-color: var(--color-surface-2); }

.sidebar__user-avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600;
  flex-shrink: 0;
  transition: width var(--duration-slow) var(--ease-out), height var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .sidebar .sidebar__user-avatar { width: 32px; height: 32px; font-size: var(--text-sm); }

.sidebar__user-meta {
  display: none;
  flex-direction: column;
  margin-left: var(--space-3);
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .sidebar .sidebar__user-meta {
  display: flex; opacity: 1; transform: translateX(0);
}
.sidebar__user-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; }
.sidebar__user-role { font-size: var(--text-2xs); color: var(--color-text-muted); white-space: nowrap; }

/* ============ MODULE RAIL (Gmail-tarzı Ana Modül Geçişi) ============ */
/* Projede birden fazla ana modül (Satış, Servis vb.) varsa ve kullanıcı birden
   fazlasına erişebiliyorsa `body.has-module-rail` sınıfı eklenir ve bu şerit
   sidebar'ın soluna, sabit 72px genişlikte yerleşir. Kullanıcı yalnızca tek
   modüle erişiyorsa şerit hiç render edilmemeli ve body sınıfı eklenmemelidir —
   böylece sidebar/main-content varsayılan (0 offset) konumunda kalır. */
.module-rail {
  width: 72px;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-sticky) + 1); /* Sidebar'ın üzerinde */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  background-color: var(--color-surface-3); /* Sidebar'dan bir ton daha derin zemin */
  border-right: 1px solid var(--color-border);
}
/* Amblem kapsayıcısı görsele ŞEKİL DAYATMAZ — logo dosyası (PNG/SVG) ham
   haliyle gösterilir. Daha önce hem PNG'nin kendi yuvarlatılmış köşeleri hem
   de CSS'in daire maskesi üst üste binip kenarları kırık gösteriyordu.
   Gradyan zemin ve yuvarlak şekil yalnızca görsel yüklenemediğinde devreye
   giren metin yedeğine (.module-rail__emblem-fallback) taşındı. */
.module-rail__logo {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}
.module-rail__logo:hover {
  opacity: 0.9;
}
.module-rail__emblem-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.module-rail__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
.module-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 52px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}
.module-rail__item .material-symbols-outlined { font-size: var(--icon-lg); } /* M3 navigation rail: 24dp */
.module-rail__item-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; } /* M3 Label Small (11) — 10px ölçekte yoktu */
.module-rail__item:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.module-rail__item--active {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

/* Şerit devrede olduğunda sidebar 72px sağa kayar. Gmail'in kapalı hamburger
   menüsünde olduğu gibi: varsayılan (kapalı) halde ikinci bir ikon kolonu
   GÖSTERİLMEZ — yalnızca module-rail (Satış/Servis) görünür. Detaylı menü
   (Fırsatlar, Teklifler vb.) sadece toggle ile "modal" gibi açılan genişletilmiş
   panelde ortaya çıkar; bu yüzden kapalı halde sidebar width:0'dır. */
body.has-module-rail .sidebar {
  left: 72px;
  width: 0;
  border-right: none;
  overflow: hidden;
}
body.has-module-rail .main-content { margin-left: 72px; }
/* Gmail'in gerçek davranışı İKİ AYRI durumdur, birbirine karıştırılmamalı:
   1) TIKLAMA (sidebar-expanded) → KALICI SABİTLEME. Düz, köşeleri keskin bir
      panel; içeriği gerçekten iter (main-content margin-left ile kayar).
      Tekrar tıklanana kadar açık kalır, dışarı tıklamakla kapanmaz.
   2) HOVER (sidebar-peek, sadece sabitlenmemişken) → GEÇİCİ ÖNİZLEME. Yuvarlak
      köşeli, gölgeli, yüzen bir kart; içeriği İTMEZ, üzerine biner. Fare
      çekilince (hover-intent gecikmesiyle) kendiliğinden kapanır. */

/* --- 1) Sabitlenmiş (tıklama) — düz panel, iter --- */
body.has-module-rail.sidebar-expanded .sidebar {
  width: 280px;
  border-right: 1px solid var(--color-border);
}
body.has-module-rail.sidebar-expanded .main-content { margin-left: 352px; }

/* --- 2) Geçici önizleme (hover) — yüzen kart, itmez --- */
/* ÖNEMLİ: .top-header da var(--z-sticky) kullanıyor; kart aynı katmanda kalırsa
   DOM sırası yüzünden header kartın üstüne biner. Bu yüzden peek kartı daha üst
   bir katman olan var(--z-modal) kullanmalı — sayfanın her şeyinin üzerinde durmalı. */
body.has-module-rail.sidebar-peek:not(.sidebar-expanded) .sidebar {
  top: 12px;
  left: 84px; /* module-rail (72px) + 12px boşluk */
  width: 280px;
  height: calc(100vh - 24px);
  z-index: var(--z-modal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
/* Peek sırasında main-content İTİLMEZ — kart geçici olarak üzerine biner. */

/* ============ MAIN CONTENT ============ */
.main-content {
  flex: 1;
  min-width: 0; /* .app-layout içinde bir flex item olduğu için: bu olmadan
    main-content, en geniş alt öğesinin (ör. Kendo grid, demo-grid) doğal
    genişliğinin altına asla küçülmez — bu da dar ekranlarda/sidebar sabitliyken
    yatay taşmaya yol açan asıl kaynaktı. */
  margin-left: 80px; /* Aligned with Zugo Navigation Rail */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  transition: margin-left var(--duration-slow) var(--ease-out), margin-right var(--duration-slow) var(--ease-out);
}
body.sidebar-expanded .main-content { margin-left: 280px; }

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background-color: var(--color-surface);
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
  gap: var(--space-4);
  /* Sidebar sabitlenince (pin) main-content daralır; .top-header de onun içinde
     olduğu için KENDİSİ de daralmak zorundadır. min-width:0 olmadan bir flex
     container, içeriğinin doğal genişliğinin altına asla küçülmez — bu da
     sidebar pinliyken (veya dar ekranlarda) yatay taşmaya (sayfanın responsive
     özelliğinin bozulmasına) yol açar. Bu zincirdeki HER seviye min-width:0
     almalıdır (bkz. .top-header__left, .top-header__right, .search-input). */
  min-width: 0;
}
.top-header__left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex-shrink: 1; }
.top-header__title {
  font-size: var(--text-lg); font-weight: 600; /* M3 Title Large (22) — 1.25rem/20px ölçekte yoktu ve sihirli sayıydı */
  color: var(--color-text); margin: 0;
  line-height: var(--leading-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-header__right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex-shrink: 1; }
.top-header__right > .btn--icon,
.top-header__right > .top-header__chatbot-trigger { flex-shrink: 0; }

/* ============ UTILITY RAIL (Gmail-tarzı Sağ Kısayol Şeridi) ============ */
/* Sık kullanılan araçlara (Araç Fiyatlama, Tramer vb.) tek tıkla erişim için
   sağ kenarda sabit ikon şeridi. Tıklanan kısayol, şeridin soluna kayan bir
   drawer panel açar. Şerit, sidebar ile aynı gizle/göster mantığına sahiptir —
   `body.utility-rail-collapsed` sınıfı hem şeridi hem drawer'ı kenara iter. */
.utility-rail {
  width: 64px;
  height: 100vh;
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) 0 var(--space-4); /* Üstte toggle butonuyla çakışmaması için ekstra boşluk */
  background-color: var(--color-surface-2);
  border-left: 1px solid var(--color-border);
  transition: transform var(--duration-slow) var(--ease-out);
}
body.utility-rail-collapsed .utility-rail { transform: translateX(100%); }

body.has-utility-rail .main-content { margin-right: 64px; }
body.has-utility-rail.utility-rail-collapsed .main-content { margin-right: 0; }

.utility-rail__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
}
.utility-rail__item {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}
.utility-rail__item .material-symbols-outlined { font-size: var(--icon-lg); } /* M3 navigation rail: 24dp */
.utility-rail__item:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.utility-rail__item--active {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Tooltip sola açılır (sidebar'ın koleksiyonlu tooltip'i sağa açılıyordu, burada ayna) */
.utility-rail__item::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background-color: var(--neutral-800);
  color: var(--color-inverse-on-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
  z-index: var(--z-tooltip);
}
.utility-rail__item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.utility-rail__add-wrapper { position: relative; flex-shrink: 0; }
.utility-rail__add {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}
.utility-rail__add:hover { background-color: var(--color-surface-hover); color: var(--color-accent); border-color: var(--color-accent); }

/* Kısayol Ekleme Popover'ı (.user-popover ile aynı tarif, sağ kenara göre aynalanmış) */
.shortcut-picker {
  position: absolute;
  bottom: 0;
  right: calc(100% + 8px);
  z-index: var(--z-dropdown);
  width: 220px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.shortcut-picker.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.shortcut-picker__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2) var(--space-1);
}
.shortcut-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}
.shortcut-picker__item:hover { background-color: var(--color-surface-hover); }
.shortcut-picker__item .material-symbols-outlined { width: 18px; height: 18px; font-size: 18px; color: var(--color-text-muted); }
.shortcut-picker__item[aria-pressed="true"] { color: var(--color-accent); font-weight: 600; }
.shortcut-picker__item[aria-pressed="true"] .material-symbols-outlined { color: var(--color-accent); }

/* Şeridi gizle/göster — sidebar'ın solundaki toggle ile aynı dil, sağda aynalanmış */
.utility-rail__toggle-btn {
  position: fixed;
  top: 22px; right: 64px;
  transform: translateX(50%);
  z-index: calc(var(--z-sticky) + 10);
  width: 28px; height: 28px;
  border-radius: var(--radius-circle);
  background-color: var(--color-surface-3);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right var(--duration-slow) var(--ease-out), background-color var(--duration-fast) var(--ease-in-out);
}
body.utility-rail-collapsed .utility-rail__toggle-btn { right: 0; }
.utility-rail__toggle-btn:hover { background-color: var(--color-surface-hover); border-color: var(--color-border-strong); }
.utility-rail__toggle-btn i, .utility-rail__toggle-btn .material-symbols-outlined { width: 14px; height: 14px; font-size: 14px; }

/* Kısayol Drawer'ı — şeridin soluna kayan içerik paneli */
.utility-drawer {
  position: fixed;
  top: 0; right: 64px;
  width: 400px;
  max-width: calc(100vw - 64px);
  height: 100vh;
  background-color: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out), right var(--duration-slow) var(--ease-out);
}
.utility-drawer--open { transform: translateX(0); }
body.utility-rail-collapsed .utility-drawer { right: 0; }

.utility-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.utility-drawer__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: 0; }
.utility-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }

.page-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.page-header__title {
  font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.page-header__subtitle {
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.content-area {
  flex: 1;
  min-width: 0; /* main-content'in column-flex'i içinde bir item; bu olmadan
    içindeki en geniş çocuk (ör. grafik grid'i) genişliği belirleyip taşmaya
    yol açar (bkz. Starter.md 4.13). */
  padding: 0 var(--space-6) var(--space-6);
}

/* ============ USER POPOVER ============ */
.user-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  z-index: var(--z-dropdown);
  width: 220px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.user-popover.open {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

.user-popover__header {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-3);
}
.user-popover__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-base);
  flex-shrink: 0;
}
.user-popover__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.user-popover__role { font-size: var(--text-2xs); color: var(--color-text-muted); }

.user-popover__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-body);
}
.user-popover__item-left {
  display: flex; align-items: center; gap: var(--space-2);
}
.user-popover__item-left i, .user-popover__item-left svg, .user-popover__item-left .material-symbols-outlined { width: 16px; height: 16px; font-size: 16px; }

.user-popover__divider {
  height: 1px;
  background-color: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

.user-popover__logout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  font-size: var(--text-sm);
  color: var(--color-danger);
  cursor: pointer;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  transition: var(--transition-fast);
}
.user-popover__logout:hover {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}
.user-popover__logout i, .user-popover__logout svg, .user-popover__logout .material-symbols-outlined {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* Pill Toggle (Language) */
.pill-toggle {
  display: flex;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}
.pill-toggle__option {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-fast);
}
.pill-toggle__option:hover:not(.active) {
  color: var(--color-text);
}
.pill-toggle__option.active {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch__slider {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: var(--transition-base);
}
.toggle-switch__slider::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 2px;
  top: 2px;
  background-color: var(--color-text-on-accent); /* M3: switch handle = on-primary */
  border-radius: var(--radius-circle);
  transition: transform var(--transition-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.toggle-switch input:checked + .toggle-switch__slider {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.toggle-switch input:checked + .toggle-switch__slider::before {
  transform: translateX(18px);
}
.toggle-switch input:focus-visible + .toggle-switch__slider {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .module-rail { display: none !important; }
  .utility-rail, .utility-drawer { display: none !important; }
  .main-content, body.has-utility-rail .main-content { margin-right: 0 !important; }
  .sidebar, body.has-module-rail .sidebar { width: 280px !important; left: 0 !important; transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-out) !important; }
  .sidebar.open { transform: translateX(0); }
  .main-content, body.has-module-rail .main-content { margin-left: 0 !important; }
  .sidebar__toggle-btn { display: none !important; }
  .sidebar__logo-text { opacity: 1 !important; transform: none !important; position: static !important; pointer-events: auto !important; }
  .sidebar__header { justify-content: flex-start !important; padding: var(--space-4) var(--space-5) !important; }
  .nav-group-label { opacity: 1 !important; height: auto !important; padding: var(--space-4) var(--space-3) var(--space-2) !important; }
  .nav-item { justify-content: flex-start !important; padding: var(--space-2) var(--space-3) !important; }
  .nav-label { opacity: 1 !important; transform: none !important; position: static !important; margin-left: var(--space-3) !important; }
  .sidebar__user-menu-trigger { justify-content: flex-start !important; padding: var(--space-2) var(--space-3) !important; }
  .sidebar__user-avatar { width: 32px !important; height: 32px !important; }
  .sidebar__user-meta { display: flex !important; opacity: 1 !important; transform: none !important; }
  .menu-toggle { display: flex; }
}

/* ================================================
   AUTH LAYOUT (Login)
   ================================================
   Tek panelli, ortalanmış ama dar bir kolon: split-screen +
   ortalanmış kart kalıbı (tüm AI araçlarının varsayılan login
   şablonu) yerine, arkada tema rengine bağlı sakin bir hareket
   katmanı (.auth-bg) ile desteklenir.
   ================================================ */
.auth-body {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  overflow-x: hidden;
  position: relative;
}
body.dark.auth-body,
body.dark .auth-body {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-950));
  --color-bg: #090B10;
}

.auth-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  padding: var(--space-8) var(--space-12);
}

.auth-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  gap: var(--space-10);
}

/* Sol Hero / Proje Adı */
.auth-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  user-select: none;
  pointer-events: none;
}

.auth-secret-text {
  font-size: clamp(4.5rem, 11vw, 10rem);
  font-weight: 900;
  font-family: 'Urbanist', 'Inter', sans-serif;
  letter-spacing: -0.04em;
  color: var(--color-bg);
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
  user-select: none;
}

.auth-hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-bg);
  margin-top: var(--space-4);
  letter-spacing: 0.01em;
  user-select: none;
}

/* Sağ Giriş Kartı */
.auth-shell__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  flex-shrink: 0;
  padding: var(--space-8);
  margin: var(--space-4) 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  gap: var(--space-6);
}

body.dark .auth-shell__inner {
  background: rgba(18, 22, 31, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.auth-shell__meta {
  position: relative;
  z-index: 10;
  padding: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  width: 100%;
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .auth-shell {
    padding: var(--space-6);
  }
  .auth-container {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
  }
  .auth-hero {
    align-items: center;
    text-align: center;
  }
  .auth-secret-text {
    font-size: clamp(3.5rem, 9vw, 6rem);
  }
  .auth-hero__subtitle {
    font-size: var(--text-base);
  }
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  width: auto;
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.auth-logo__img {
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
body.dark .auth-logo__img {
  filter: brightness(0) invert(1);
}

/* ============ LOGO / AMBLEM YEDEK GÖSTERİMİ ============
   img/logo.png veya img/emblem.png yüklenemezse (yeni projede henüz
   konmamışsa) yanındaki metin yedeği gösterilir. Görünürlük `.hidden`
   yardımcı sınıfıyla yönetilir — satır içi style KULLANILMAZ.
   Devreye alma: main.js → initLogoFallback(). */
.module-rail__emblem-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  color: var(--color-on-primary);
  font-weight: 700; font-size: var(--text-xs);
}
.sidebar__emblem-fallback     { display: inline; }
.sidebar__logo-fallback-text  { display: inline; }

.auth-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  text-decoration: none;
  margin-bottom: var(--space-1);
}
.auth-wordmark__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  font-weight: 800;
  font-size: var(--text-md);
  box-shadow: 0 4px 14px rgba(0, 95, 175, 0.22);
  flex-shrink: 0;
}
.auth-wordmark__text {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.auth-form-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.auth-form-panel.hidden { display: none; }

.auth-form-panel .form-input {
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
}
body.dark .auth-form-panel .form-input {
  background-color: rgba(255, 255, 255, 0.05);
}

.auth-form-panel .captcha-box {
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
}
body.dark .auth-form-panel .captcha-box {
  background-color: rgba(255, 255, 255, 0.04);
}

.auth-form__heading { display: flex; flex-direction: column; gap: var(--space-1); }
.auth-form__title { font-size: var(--text-2xl); margin: 0; }
.auth-form__subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }
.auth-form__form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Zugo standardı: ikincil/yardımcı bağlantılar (şifremi unuttum vb.)
   markanın dinamik tema rengini taşımaz — sadece birincil eylemler
   (submit butonu, kayıt ol bağlantısı) o rengi kullanır. */
.auth-form__forgot { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.auth-form__forgot:hover { color: var(--color-text); text-decoration: underline; }
.auth-form__submit {
  width: 100%;
  height: 48px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-pill);
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 95, 175, 0.28);
  transition: var(--transition-base);
}
.auth-form__submit:hover {
  box-shadow: 0 6px 20px rgba(0, 95, 175, 0.40);
  transform: translateY(-1px);
}
.auth-form__submit:active {
  transform: translateY(0);
}
.auth-form__back { width: 100%; justify-content: center; }

.auth-form__footer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.auth-form__signup { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.auth-form__signup:hover { text-decoration: underline; }

.auth-form__resend { font-size: var(--text-xs); color: var(--color-text-muted); }
.auth-form__resend a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.auth-form__resend a:hover { text-decoration: underline; }

/* ---- 2FA doğrulama kodu (OTP) ---- */
.otp-input { display: flex; gap: var(--space-2); }
.otp-input__box {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ---- Prototip rol/şifre seçici (POPUP) — GEÇİCİ ----
   Sadece geliştirme/kullanıcı testi sürecinde hızlı rol geçişi içindir. */
.auth-prototype-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-radius: var(--radius-xs);
  border: 1px dashed var(--color-warning);
  background-color: var(--color-warning-soft);
  color: var(--color-warning-fg);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.auth-prototype-trigger:hover {
  background-color: var(--color-warning);
  color: var(--color-on-warning);
  border-color: var(--color-warning);
}
.auth-prototype-trigger i {
  font-size: var(--icon-sm);
}

/* Modal içi Rol Listesi */
.proto-role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proto-role-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
  width: 100%;
}
.proto-role-item:hover {
  background-color: var(--color-surface-3);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.proto-role-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proto-role-item__icon i {
  font-size: var(--icon-lg);
}
.proto-role-item__icon--admin {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}
.proto-role-item__icon--operator {
  background-color: var(--color-primary-container);
  color: var(--color-primary);
}
.proto-role-item__icon--viewer {
  background-color: var(--color-surface-4);
  color: var(--color-text-muted);
}
.proto-role-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proto-role-item__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.proto-role-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.proto-role-item__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: 0;
}
.proto-role-item__meta {
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-weight: 600;
}
.proto-role-item__arrow {
  font-size: var(--icon-md);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.proto-role-item:hover .proto-role-item__arrow {
  transform: translateX(3px);
  color: var(--color-primary);
}

.btn.auth-theme-toggle {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-sticky);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
  .auth-shell__inner { padding: var(--space-10) var(--space-5); gap: var(--space-8); }
}

/* ============ RESOLUTION WARNING (<1024px) ============ */
/* ============ MOBİL GEZİNME (Hamburger + Off-Canvas Çekmece) ============
   1024px ÜSTÜNDE: bu buton gizlidir — gezinme modül şeridi + sidebar ile yapılır.
   1024px ALTINDA: modül şeridi/utility rail gizlenir, sidebar off-canvas bir
   çekmeceye dönüşür (aşağıdaki @media bloğu) ve bu buton onun TEK açma yoludur.
   Davranış: main.js → initMobileNav(). */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  flex-shrink: 0;
  transition: var(--transition-base);
}

.menu-toggle:hover {
  background-color: var(--color-surface-3);
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.menu-toggle i,
.menu-toggle .material-symbols-outlined {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

/* Çekmece açıkken içeriği karartan katman — sidebar'ın hemen altında durur. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background-color: var(--color-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .sidebar-backdrop { display: block; }

  /* Bu iki kural bilinçli olarak dosyanın SONUNDA tekrarlanır:
     1) Yukarıdaki (satır ~992) `.menu-toggle { display: flex }` kuralı, bu
        bloktaki `.menu-toggle { display: none }` temel tanımından ÖNCE geldiği
        için kaynak sırası nedeniyle eziliyordu — burada geri kazandırılır.
     2) `.sidebar.open` (0,2,0), `body.has-module-rail .sidebar` (0,2,1)
        seçicisinden daha düşük özgüllükte olduğu için çekmece açılmıyordu;
        aşağıdaki seçici özgüllüğü eşitler. */
  .menu-toggle { display: flex; }

  .sidebar.open,
  body.has-module-rail .sidebar.open { transform: translateX(0); }
}

.resolution-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color-bg);
  color: var(--color-text);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  gap: var(--space-4);
}
.resolution-warning__icon {
  font-size: 48px !important;
  width: 48px !important;
  height: 48px !important;
  color: var(--color-warning);
}
.resolution-warning__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
.resolution-warning__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 400px;
  line-height: 1.5;
}
@media (max-width: 1023px) {
  body:not(.bypass-res-warning):not(.auth-body) .resolution-warning {
    display: flex;
  }
}