/**
 * GTOS Design Grammar — PROGRAM-002 / UX-002
 * Platform geneli tipografi, renk ve bileşen ölçeği (light/dark).
 * unified.css legacy hex/Montserrat katmanını kademeli olarak token'a bağlar.
 * Sidebar layout dokunulmaz (cc-ux-15). Yükleme: gtos-module-premium.css sonrası.
 */

/* —— 1. Uygulama tabanı —— */
#maytras-app {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-md);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#maytras-app .main-content {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* —— 2. Başlık ölçeği (display → section) —— */
#maytras-app .main-content h1,
#maytras-app .gtos-mp__title,
#maytras-app .workspace-title {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-color-text);
}

#maytras-app .main-content h2,
#maytras-app .module-workspace-title,
#maytras-app .module-title,
#maytras-app .detail-panel h2,
#maytras-app .a01-detail-panel-title {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-workspace-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-color-text);
}

#maytras-app .main-content h3,
#maytras-app .module-card .module-info h3,
#maytras-app .detail-panel h3,
#maytras-app .workspace-section-title {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-color-text);
}

#maytras-app .main-content h4,
#maytras-app .gtos-mp__panel-title,
#maytras-app .panel-section-label {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-color-text-muted);
}

/* —— 3. Gövde metni katmanları —— */
#maytras-app p,
#maytras-app .module-workspace-body,
#maytras-app .module-description,
#maytras-app .detail-panel p,
#maytras-app .gtos-mp__panel-body {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-md);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text);
}

#maytras-app .module-workspace-subtitle,
#maytras-app .workspace-subtitle,
#maytras-app .module-desc,
#maytras-app .gtos-mp__sub,
#maytras-app .module-id,
#maytras-app .module-features li,
#maytras-app label:not(.btn-primary):not(.gtos-cc__btn) {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-freshness,
#maytras-app .caption,
#maytras-app .meta-label,
#maytras-app .hint-text,
#maytras-app small:not(.sidebar-account-dock__hint) {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  line-height: var(--gtos-leading-tight);
  color: var(--gtos-color-text-muted);
}

#maytras-app code,
#maytras-app pre,
#maytras-app .mono,
#maytras-app .gtos-mono {
  font-family: var(--gtos-font-mono);
  font-size: 0.92em;
}

/* —— 4. Modül workspace — Montserrat köprüsü —— */
#maytras-app .module-workspace-title,
#maytras-app .module-workspace-subtitle,
#maytras-app .module-workspace-body,
#maytras-app .module-workspace-back,
#maytras-app .module-workspace-agent-chip,
#maytras-app [class*='module-workspace'] {
  font-family: var(--gtos-font-sans);
}

#maytras-app .module-workspace-title {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-workspace-title);
  color: var(--gtos-color-text);
}

#maytras-app .module-workspace-subtitle {
  font-size: var(--gtos-text-sm);
  font-weight: 500;
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-workspace-body {
  font-size: var(--gtos-text-md);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text);
}

#maytras-app .module-workspace-back {
  font-size: var(--gtos-text-sm);
  font-weight: 600;
  color: var(--gtos-color-text-muted);
}

/* —— 5. Modül kartları & grid —— */
#maytras-app .module-card {
  background: var(--gtos-color-surface);
  border-color: var(--gtos-color-border);
  color: var(--gtos-color-text);
}

#maytras-app .module-title {
  font-size: var(--gtos-text-xl);
}

#maytras-app .module-id,
#maytras-app .module-description,
#maytras-app .module-features li {
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-features li {
  font-size: var(--gtos-text-sm);
}

/* —— 6. gtos-mp premium shell hizalama —— */
#maytras-app .gtos-mp {
  font-family: var(--gtos-font-sans);
  color: var(--gtos-color-text);
}

#maytras-app .gtos-mp__title {
  font-family: var(--gtos-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  color: var(--gtos-color-text);
}

#maytras-app .gtos-mp__sub {
  font-size: var(--gtos-text-sm);
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-mp__panel-title {
  font-size: var(--gtos-text-micro);
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-mp__panel,
#maytras-app .gtos-mp__brief,
#maytras-app .gtos-mp__rail-block {
  background: var(--gtos-color-surface);
  border-color: var(--gtos-color-border);
  color: var(--gtos-color-text);
}

/* —— 7. Form kontrolleri —— */
#maytras-app input:not([type='checkbox']):not([type='radio']):not([type='range']),
#maytras-app select,
#maytras-app textarea,
#maytras-app .form-control,
#maytras-app .module-agent-insight-select {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading-tight);
  color: var(--maytras-shell-input-text, var(--gtos-color-text));
  background: var(--maytras-shell-input-bg, var(--gtos-color-surface));
  border-color: var(--maytras-shell-input-border, var(--gtos-color-border));
}

#maytras-app input::placeholder,
#maytras-app textarea::placeholder {
  color: var(--gtos-color-text-muted);
  opacity: 0.85;
}

#maytras-app label,
#maytras-app .detail-panel label,
#maytras-app .form-label {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  font-weight: 600;
  color: var(--gtos-color-text);
}

/* —— 8. Tablolar —— */
#maytras-app table,
#maytras-app .data-table,
#maytras-app .module-workspace-body table {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  color: var(--gtos-color-text);
}

#maytras-app th {
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gtos-color-text-muted);
}

#maytras-app td {
  font-size: var(--gtos-text-sm);
  color: var(--gtos-color-text);
}

#maytras-app tbody tr:hover td {
  color: var(--gtos-color-text);
}

/* —— 9. Butonlar —— */
#maytras-app .btn,
#maytras-app .btn-primary,
#maytras-app .btn-secondary,
#maytras-app .btn-ghost,
#maytras-app .module-agent-insight-btn,
#maytras-app [class*='-btn']:not(.sidebar-module-link):not(.gtos-cc__btn) {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  font-weight: 600;
  line-height: var(--gtos-leading-tight);
}

#maytras-app .btn-primary,
#maytras-app button.btn-primary {
  /* H5-THEME: zemin --gtos-color-primary; musteri yuzeyinde bu altin oluyor
   * ve sabit beyaz yazi 3.52:1'de kaliyor. on-primary zeminle eslesir. */
  color: var(--gtos-color-on-primary);
  background: var(--gtos-color-primary);
  border-color: color-mix(in srgb, var(--gtos-color-primary) 80%, var(--gtos-black));
}

#maytras-app .btn-primary:hover {
  background: var(--gtos-color-primary-strong);
}

/* —— 10. Detay paneli & overlay —— */
#maytras-app .detail-panel,
#maytras-app #billing-overlay .detail-panel,
#maytras-app .detail-overlay .detail-panel {
  font-family: var(--gtos-font-sans);
  background: var(--gtos-color-surface);
  border-color: var(--gtos-color-border);
  color: var(--gtos-color-text);
}

#maytras-app .detail-panel h2,
#maytras-app .detail-panel h3 {
  color: var(--gtos-color-text);
}

#maytras-app .detail-panel p,
#maytras-app .detail-panel li {
  color: var(--gtos-color-text-muted);
  font-size: var(--gtos-text-sm);
}

/* —— 11. AI agent insight —— */
#maytras-app .module-agent-insight {
  border-color: var(--gtos-color-border);
  background: color-mix(in srgb, var(--gtos-color-surface) 92%, var(--gtos-color-ai-soft));
  color: var(--gtos-color-text);
}

#maytras-app .module-agent-insight-top strong {
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  color: var(--gtos-color-text);
}

#maytras-app .module-agent-insight-top small {
  font-size: var(--gtos-text-2xs);
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-agent-insight-body {
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text);
  background: var(--gtos-color-surface);
  border-color: var(--gtos-color-border);
}

#maytras-app .module-agent-insight-body.is-empty {
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-agent-insight-body.is-error {
  color: var(--gtos-color-danger);
}

#maytras-app .module-agent-insight-btn {
  font-size: var(--gtos-text-micro);
  color: var(--gtos-color-primary-strong);
  background: color-mix(in srgb, var(--gtos-color-primary) 10%, var(--gtos-color-surface));
  border-color: color-mix(in srgb, var(--gtos-color-primary) 35%, var(--gtos-color-border));
}

/* —— 12. Semantik renk yardımcıları —— */
#maytras-app .text-success,
#maytras-app .status-success {
  color: var(--gtos-color-success);
}

#maytras-app .text-warning,
#maytras-app .status-warning {
  color: var(--gtos-color-warning);
}

#maytras-app .text-danger,
#maytras-app .status-danger,
#maytras-app .status-error {
  color: var(--gtos-color-danger);
}

#maytras-app .text-info,
#maytras-app .status-info {
  color: var(--gtos-color-info);
}

#maytras-app .text-muted,
#maytras-app .gtos-text-muted {
  color: var(--gtos-color-text-muted);
}

/* —— 13. Legacy hardcoded metin renkleri (sık görülen hex) —— */
#maytras-app .module-workspace-subtitle,
#maytras-app [style*='color: #64748b'],
#maytras-app [style*='color:#64748b'] {
  color: var(--gtos-color-text-muted);
}

#maytras-app .module-workspace-back,
#maytras-app .module-workspace-title {
  color: var(--gtos-color-text);
}

/* —— 14. Metrik / KPI strip —— */
#maytras-app .gtos-metric-card,
#maytras-app .kpi-card,
#maytras-app .metric-card {
  font-family: var(--gtos-font-sans);
  background: var(--gtos-color-surface);
  border-color: var(--gtos-color-border);
  color: var(--gtos-color-text);
}

#maytras-app .gtos-metric-card .metric-label,
#maytras-app .kpi-card .kpi-label {
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-metric-card .metric-value,
#maytras-app .kpi-card .kpi-value {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-xl);
  font-weight: 700;
  color: var(--gtos-color-text);
}

/* —— 15. Toast & banner —— */
#maytras-app .maytras-toast {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  color: var(--gtos-color-text);
  background: var(--gtos-color-surface-elevated);
  border-color: var(--gtos-color-border);
}

/* —— 16. Auth overlay tipografi —— */
#maytras-app #auth-overlay,
#maytras-app #billing-overlay {
  font-family: var(--gtos-font-sans);
  color: var(--gtos-color-text);
}

#maytras-app #auth-overlay h1,
#maytras-app #auth-overlay h2,
#maytras-app #billing-overlay h2 {
  font-family: var(--gtos-font-display);
  color: var(--gtos-color-text);
}

#maytras-app #auth-overlay p,
#maytras-app #billing-overlay p {
  font-size: var(--gtos-text-sm);
  color: var(--gtos-color-text-muted);
}

/* —— 17. Montserrat kalıntıları — workspace & detail —— */
#maytras-app [class*='module-workspace'],
#maytras-app .detail-panel,
#maytras-app .dashboard-overview,
#maytras-app .modules-grid {
  font-family: var(--gtos-font-sans);
}

#maytras-app .module-workspace-title,
#maytras-app .module-workspace-subtitle,
#maytras-app .detail-panel h2,
#maytras-app .detail-panel h3 {
  font-family: var(--gtos-font-display);
}

/* —— 18. North Star hero strip —— */
#maytras-app .gtos-north-star__eyebrow {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gtos-color-primary-text);
}

#maytras-app .gtos-north-star__title {
  font-family: var(--gtos-font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gtos-color-text);
}

#maytras-app .gtos-north-star__sub {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-north-star__trust li {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-compact);
  font-weight: 600;
  color: var(--gtos-color-text);
}

html[data-theme='dark'] #maytras-app .gtos-north-star__eyebrow {
  color: var(--gtos-color-primary-strong);
}

html[data-theme='dark'] #maytras-app .gtos-north-star__title {
  color: var(--gtos-color-text);
}

html[data-theme='dark'] #maytras-app .gtos-north-star__sub {
  color: var(--gtos-color-text-muted);
}

html[data-theme='dark'] #maytras-app .gtos-north-star__trust li {
  color: var(--gtos-color-text);
}

/* —— 19. Command Center —— */
#maytras-app #gtos-command-center,
#maytras-app .gtos-cc {
  font-family: var(--gtos-font-sans);
  color: var(--gtos-color-text);
}

#maytras-app .gtos-cc__section-title,
#maytras-app .gtos-cc__panel-title {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-lg);
  font-weight: 700;
  color: var(--gtos-color-text);
}

#maytras-app .gtos-cc__eyebrow,
#maytras-app .gtos-cc__label,
#maytras-app .gtos-cc__meta {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-cc__body,
#maytras-app .gtos-cc__desc,
#maytras-app .gtos-cc__list-item {
  font-size: var(--gtos-text-sm);
  line-height: var(--gtos-leading);
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-cc__kpi-value,
#maytras-app .gtos-cc__stat-value {
  font-family: var(--gtos-font-display);
  font-size: var(--gtos-text-xl);
  font-weight: 700;
  color: var(--gtos-color-text);
}

#maytras-app .gtos-cc__btn {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-sm);
  font-weight: 600;
}

/* —— 20. Context bar —— */
#maytras-app .gtos-ctx,
#maytras-app .gtos-context-bar {
  font-family: var(--gtos-font-sans);
}

#maytras-app .gtos-ctx__label {
  font-size: var(--gtos-text-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-ctx__chip span {
  font-size: var(--gtos-text-micro);
  color: var(--gtos-color-text-muted);
}

#maytras-app .gtos-ctx__chip strong {
  font-size: var(--gtos-text-sm);
  font-weight: 600;
  color: var(--gtos-color-text);
}

/* —— 21. Modül mikro etiket normalizasyonu —— */
/* ==========================================================================
   22. UX-CTA-001 — buton hiyerarsisi ve etkilesim durumlari
   ==========================================================================
   SORUN
   `.detail-btn` (indexte 102 kullanim) dolu teal degrade ile ciziliyordu;
   `.btn-primary` de oyle. Ekranda on ile arka plan eylemi ayni agirlikta
   gorunuyor, goz nereye bakacagini bilemiyordu. `.detail-btn.secondary` ise
   dolu koyu gri — ikincil degil, farkli renkte bir birincil gibi okunuyor.

   COZUM — dort kademe
     birincil   dolu vurgu     (.btn-primary)         sayfada tek/az sayida
     ikincil    tonal + kenar  (.detail-btn)          sik ama sessiz
     ucuncul    seffaf         (.detail-btn.secondary, .btn-ghost, .linklike)
     yikici     kirmizi        (.btn-danger, [data-*-delete])

   Yalnizca renk/kenar degisiyor; dolgu, yaricap ve yazi boyutu aynen kaliyor
   ki calisan ekranlarin yerlesimi kaymasin.

   KONTRAST (olculdu, scripts/ux-program/lib/color.js)
     acik  ikincil yazi #115e59 / tonal #e6f2f1  6.62:1
     acik  ikincil kenar #5f9c96 / kart          3.14:1
     acik  ucuncul yazi #475569 / kart           7.58:1
     acik  yikici yazi  #c81e1e / kart           5.74:1
     koyu  ikincil yazi #5eead4 / tonal #122a2c 10.19:1
     koyu  ikincil kenar #3d8a81 / kart          4.63:1
     koyu  ucuncul yazi #cbd5e1 / kart          12.71:1
     koyu  yikici yazi  #f87171 / kart           6.82:1
   Hepsi metin icin 4.5, kenarlik icin 3.0 esiginin uzerinde. */

:root {
  --gtos-btn-secondary-bg: #e6f2f1;
  --gtos-btn-secondary-bg-hover: #d5e9e7;
  --gtos-btn-secondary-text: #115e59;
  --gtos-btn-secondary-border: #5f9c96;
  --gtos-btn-tertiary-text: #475569;
  --gtos-btn-tertiary-hover-bg: rgba(15, 23, 42, 0.06);
  --gtos-btn-neutral-border: #858e9c;
  --gtos-btn-danger-text: #c81e1e;
  --gtos-btn-danger-border: #c96e6e;
  --gtos-btn-danger-hover-bg: #fdeaea;
  --gtos-focus-ring-color: #0d9488;
  --gtos-focus-ring-width: 2px;
  --gtos-focus-ring-offset: 2px;
}

html[data-theme='dark'] {
  --gtos-btn-secondary-bg: #122a2c;
  --gtos-btn-secondary-bg-hover: #17383a;
  --gtos-btn-secondary-text: #5eead4;
  --gtos-btn-secondary-border: #3d8a81;
  --gtos-btn-tertiary-text: #cbd5e1;
  --gtos-btn-tertiary-hover-bg: rgba(226, 232, 240, 0.1);
  --gtos-btn-neutral-border: #64748b;
  --gtos-btn-danger-text: #f87171;
  --gtos-btn-danger-border: #a04c4c;
  --gtos-btn-danger-hover-bg: rgba(248, 113, 113, 0.14);
  --gtos-focus-ring-color: #2dd4bf;
}

/* —— 22.1 Ikincil: en sik kullanilan buton, artik sessiz —— */
#maytras-app .detail-btn:not(.secondary):not(.detail-close) {
  background: var(--gtos-btn-secondary-bg);
  background-image: none;
  color: var(--gtos-btn-secondary-text);
  border: 1px solid var(--gtos-btn-secondary-border);
}

#maytras-app .detail-btn:not(.secondary):not(.detail-close):hover {
  background: var(--gtos-btn-secondary-bg-hover);
  background-image: none;
  border-color: var(--gtos-btn-secondary-text);
}

#maytras-app .detail-btn:not(.secondary):not(.detail-close):active {
  background: var(--gtos-btn-secondary-bg-hover);
  transform: translateY(0);
}

/* —— 22.2 Ucuncul: yalnizca metin; cerceve etkilesimde beliriyor —— */
#maytras-app .detail-btn.secondary,
#maytras-app .btn-ghost,
#maytras-app .btn-ghost--sm,
#maytras-app .linklike {
  background: transparent;
  background-image: none;
  color: var(--gtos-btn-tertiary-text);
  border: 1px solid transparent;
}

#maytras-app .detail-btn.secondary:hover,
#maytras-app .btn-ghost:hover,
#maytras-app .btn-ghost--sm:hover,
#maytras-app .linklike:hover {
  background: var(--gtos-btn-tertiary-hover-bg);
  border-color: var(--gtos-btn-neutral-border);
  color: var(--gtos-color-text);
}

/* —— 22.3 Yikici: geri alinamaz eylem kirmiziyla ayrisir —— */
#maytras-app button.btn-danger,
#maytras-app .detail-btn.danger,
#maytras-app button[class*='--danger'],
#maytras-app button[data-b08-row-delete] {
  background: transparent;
  background-image: none;
  color: var(--gtos-btn-danger-text);
  border: 1px solid var(--gtos-btn-danger-border);
}

#maytras-app button.btn-danger:hover,
#maytras-app .detail-btn.danger:hover,
#maytras-app button[class*='--danger']:hover,
#maytras-app button[data-b08-row-delete]:hover {
  background: var(--gtos-btn-danger-hover-bg);
  border-color: var(--gtos-btn-danger-text);
}

/* —— 22.4 Birincil: tek gercek cagri, dolu vurgu —— */
#maytras-app .btn-primary:active,
#maytras-app button.btn-primary:active {
  background: var(--gtos-color-primary-strong);
  transform: translateY(0);
}

/* —— 22.5 Odak halkasi ——
   `:focus` degil `:focus-visible`: fareyle tiklayan kullanici arkasinda
   halka birakmaz, klavyeyle gezen kullanici her adimda nerede oldugunu
   gorur. `outline` kullaniliyor cunku box-shadow zemin gradyanlarinin
   altinda kaybolabiliyor ve Windows yuksek kontrast modunda cizilmiyor. */
#maytras-app :where(button, [role='button'], a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--gtos-focus-ring-width) solid var(--gtos-focus-ring-color);
  outline-offset: var(--gtos-focus-ring-offset);
}

/* Fare tiklamasindan arta kalan halka yok — yalnizca klavye. */
#maytras-app :where(button, [role='button'], a[href], summary):focus:not(:focus-visible) {
  outline: none;
}

/* —— 22.6 Devre disi ——
   Devre disi bir buton tiklanabilir gorunuyorsa kullanici tiklar ve
   hicbir sey olmaz; en sik bildirilen "bozuk" hissi budur. */
#maytras-app :where(button, input, select, textarea):disabled,
#maytras-app button[aria-disabled='true'],
#maytras-app [role='button'][aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

#maytras-app :where(button, input, select, textarea):disabled:hover,
#maytras-app button[aria-disabled='true']:hover {
  transform: none;
}

/* —— 22.7 Ikon tutarliligi ——
   Ikon kutuphanesi degistirilmiyor (demo oncesi zamani yok). Panoda hakim
   olan Font Awesome; index.html'de 292 <i class="fa*"> var, emoji yok.
   Yapilan: buton icindeki ikonlarin boyutu, hizasi ve genisligi tek elden
   sabitleniyor — asil goze batan tutarsizlik oydu. */
#maytras-app :where(button, .detail-btn, .btn-primary, .btn-ghost) > i[class*='fa-'] {
  width: 1em;
  font-size: 0.95em;
  line-height: 1;
  text-align: center;
  vertical-align: -0.05em;
}

#maytras-app :where(button, .detail-btn, .btn-primary, .btn-ghost) > svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}

/* JS ile uretilen bos-durum eylemlerinde ikon emoji olabiliyor; ortak
   iskelet ayni kalsin diye olcusu buradan sabitleniyor. */
#maytras-app .gtos-empty__icon {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

/* —— 22.8 Yogunluk ——
   `:where(#maytras-app)` ozgullugu sifirlar: bu degerler yalnizca hicbir
   modul kurali dolgu vermediginde uygulanir. Boylece calisan ekranlarin
   yerlesimi degismez, tarayici varsayilaniyla (1–2px) sikisik kalmis
   tablolar okunur hale gelir. */
:where(#maytras-app) :where(table) :where(th, td) {
  padding: 0.5rem 0.7rem;
  line-height: 1.45;
  vertical-align: middle;
}

:where(#maytras-app) :where(.module-workspace-body) :where(ul, ol) :where(li) {
  line-height: 1.55;
}

#maytras-app .module-workspace-body [class*='-label'],
#maytras-app .module-workspace-body [class*='__label'],
#maytras-app .module-workspace-body [class*='-meta'],
#maytras-app .module-workspace-body [class*='__meta'],
#maytras-app .module-workspace-body [class*='-hint'],
#maytras-app .module-workspace-body [class*='__hint'],
#maytras-app .module-workspace-body [class*='-badge'],
#maytras-app .module-workspace-body [class*='__badge'] {
  font-family: var(--gtos-font-sans);
  font-size: var(--gtos-text-micro);
  color: var(--gtos-color-text-muted);
}