/* ═══════════════════════════════════════════════════════════════════════
   Göç Rehberim — Design System v2 (gr.css)
   Pusula · Rota · Atlas
   ───────────────────────────────────────────────────────────────────────
   Tek-dosya tasarım sistemi. Tüm sınıflar ve değişkenler `gr-` / `--gr-`
   prefix'li — mevcut `styles.css` ile çakışmaz. Yeni sayfalar sadece bu
   dosyayı ekler:
     <link rel="stylesheet" href="/web_frontend/assets/design/gr.css">
   ─────────────────────────────────────────────────────────────────────── */

/* ═══ 1. TOKENS ════════════════════════════════════════════════════════ */
:root {
  /* Color — Primary (Indigo) */
  --gr-primary-50:  #EEF2FF;
  --gr-primary-100: #E0E7FF;
  --gr-primary-200: #C7D2FE;
  --gr-primary-300: #A5B4FC;
  --gr-primary-400: #818CF8;
  --gr-primary-500: #6366F1;
  --gr-primary-600: #4F46E5;
  --gr-primary-700: #4338CA;
  --gr-primary-800: #3730A3;
  --gr-primary-900: #1E1B4B;

  /* Color — Accent (Warm Coral) */
  --gr-accent-50:   #FFF7ED;
  --gr-accent-100:  #FFEDD5;
  --gr-accent-200:  #FED7AA;
  --gr-accent-300:  #FDBA74;
  --gr-accent-400:  #FB923C;
  --gr-accent-500:  #F97316;
  --gr-accent-600:  #EA580C;
  --gr-accent-700:  #C2410C;

  /* Color — Success (Mint) */
  --gr-success-50:  #ECFDF5;
  --gr-success-100: #D1FAE5;
  --gr-success-500: #10B981;
  --gr-success-600: #059669;
  --gr-success-700: #047857;

  /* Color — Warning (Amber) */
  --gr-warning-50:  #FFFBEB;
  --gr-warning-100: #FEF3C7;
  --gr-warning-500: #F59E0B;
  --gr-warning-600: #D97706;

  /* Color — Danger (Rose) */
  --gr-danger-50:   #FEF2F2;
  --gr-danger-100:  #FEE2E2;
  --gr-danger-500:  #EF4444;
  --gr-danger-600:  #DC2626;

  /* Color — Info (Sky) */
  --gr-info-50:     #F0F9FF;
  --gr-info-100:    #E0F2FE;
  --gr-info-500:    #0EA5E9;
  --gr-info-600:    #0284C7;

  /* Neutral scale (Slate) */
  --gr-neutral-0:    #FFFFFF;
  --gr-neutral-25:   #FCFCFD;
  --gr-neutral-50:   #F8FAFC;
  --gr-neutral-100:  #F1F5F9;
  --gr-neutral-200:  #E2E8F0;
  --gr-neutral-300:  #CBD5E1;
  --gr-neutral-400:  #94A3B8;
  --gr-neutral-500:  #64748B;
  --gr-neutral-600:  #475569;
  --gr-neutral-700:  #334155;
  --gr-neutral-800:  #1E293B;
  --gr-neutral-900:  #0F172A;
  --gr-neutral-950:  #020617;

  /* Semantic — Light theme (default) */
  --gr-bg:             var(--gr-neutral-50);
  --gr-bg-elevated:    var(--gr-neutral-0);
  --gr-bg-subtle:      var(--gr-neutral-100);
  --gr-bg-muted:       var(--gr-neutral-200);
  --gr-surface:        var(--gr-neutral-0);
  --gr-surface-hover:  var(--gr-neutral-50);

  --gr-text:           var(--gr-neutral-900);
  --gr-text-secondary: var(--gr-neutral-600);
  --gr-text-muted:     var(--gr-neutral-500);
  --gr-text-disabled:  var(--gr-neutral-400);
  --gr-text-inverse:   var(--gr-neutral-0);
  --gr-text-brand:     var(--gr-primary-600);

  --gr-border:         var(--gr-neutral-200);
  --gr-border-strong:  var(--gr-neutral-300);
  --gr-border-brand:   var(--gr-primary-500);
  --gr-border-focus:   var(--gr-primary-500);

  /* Typography */
  --gr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gr-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --gr-text-xs:   0.75rem;   /* 12 */
  --gr-text-sm:   0.875rem;  /* 14 */
  --gr-text-base: 1rem;      /* 16 */
  --gr-text-lg:   1.125rem;  /* 18 */
  --gr-text-xl:   1.25rem;   /* 20 */
  --gr-text-2xl:  1.5rem;    /* 24 */
  --gr-text-3xl:  1.875rem;  /* 30 */
  --gr-text-4xl:  2.25rem;   /* 36 */
  --gr-text-5xl:  3rem;      /* 48 */
  --gr-text-6xl:  3.75rem;   /* 60 */
  --gr-text-7xl:  4.5rem;    /* 72 */

  --gr-leading-none:    1;
  --gr-leading-tight:   1.2;
  --gr-leading-snug:    1.35;
  --gr-leading-normal:  1.5;
  --gr-leading-relaxed: 1.65;

  --gr-weight-regular: 400;
  --gr-weight-medium:  500;
  --gr-weight-semibold: 600;
  --gr-weight-bold:    700;
  --gr-weight-black:   800;

  --gr-tracking-tight:  -0.02em;
  --gr-tracking-normal: 0;
  --gr-tracking-wide:   0.02em;

  /* Spacing (4px base) */
  --gr-space-0:   0;
  --gr-space-1:   0.25rem;   /* 4 */
  --gr-space-2:   0.5rem;    /* 8 */
  --gr-space-3:   0.75rem;   /* 12 */
  --gr-space-4:   1rem;      /* 16 */
  --gr-space-5:   1.25rem;   /* 20 */
  --gr-space-6:   1.5rem;    /* 24 */
  --gr-space-7:   1.75rem;   /* 28 */
  --gr-space-8:   2rem;      /* 32 */
  --gr-space-10:  2.5rem;    /* 40 */
  --gr-space-12:  3rem;      /* 48 */
  --gr-space-16:  4rem;      /* 64 */
  --gr-space-20:  5rem;      /* 80 */
  --gr-space-24:  6rem;      /* 96 */
  --gr-space-32:  8rem;      /* 128 */

  /* Radius */
  --gr-radius-xs:   4px;
  --gr-radius-sm:   6px;
  --gr-radius-md:   10px;
  --gr-radius-lg:   14px;
  --gr-radius-xl:   20px;
  --gr-radius-2xl:  28px;
  --gr-radius-full: 9999px;

  /* Shadows */
  --gr-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --gr-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --gr-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --gr-shadow-lg:  0 10px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --gr-shadow-xl:  0 24px 40px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
  --gr-shadow-2xl: 0 40px 80px -16px rgba(15, 23, 42, 0.2);
  --gr-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.2);
  --gr-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);

  /* Gradients */
  --gr-gradient-primary: linear-gradient(135deg, var(--gr-primary-600) 0%, var(--gr-primary-800) 100%);
  --gr-gradient-accent:  linear-gradient(135deg, var(--gr-accent-500) 0%, var(--gr-accent-700) 100%);
  --gr-gradient-hero:    linear-gradient(135deg, #EEF2FF 0%, #FFF7ED 50%, #ECFDF5 100%);
  --gr-gradient-dark:    linear-gradient(180deg, var(--gr-primary-900) 0%, var(--gr-neutral-950) 100%);

  /* Motion */
  --gr-duration-fast:   150ms;
  --gr-duration-base:   220ms;
  --gr-duration-slow:   350ms;
  --gr-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --gr-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --gr-container:       1200px;
  --gr-container-narrow: 720px;
  --gr-container-wide:   1440px;
  --gr-nav-h:           68px;
  --gr-sidebar-w:       264px;

  /* Z-index */
  --gr-z-base:      1;
  --gr-z-dropdown:  100;
  --gr-z-sticky:    200;
  --gr-z-overlay:   900;
  --gr-z-modal:     1000;
  --gr-z-toast:     1100;
  --gr-z-tooltip:   1200;
}

/* Dark theme */
[data-gr-theme="dark"] {
  --gr-bg:             var(--gr-neutral-950);
  --gr-bg-elevated:    var(--gr-neutral-900);
  --gr-bg-subtle:      var(--gr-neutral-800);
  --gr-bg-muted:       var(--gr-neutral-700);
  --gr-surface:        var(--gr-neutral-900);
  --gr-surface-hover:  var(--gr-neutral-800);

  --gr-text:           var(--gr-neutral-50);
  --gr-text-secondary: var(--gr-neutral-300);
  --gr-text-muted:     var(--gr-neutral-400);
  --gr-text-disabled:  var(--gr-neutral-600);
  --gr-text-inverse:   var(--gr-neutral-900);
  --gr-text-brand:     var(--gr-primary-400);

  --gr-border:         var(--gr-neutral-800);
  --gr-border-strong:  var(--gr-neutral-700);

  --gr-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --gr-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --gr-shadow-md:  0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --gr-shadow-lg:  0 16px 32px -8px rgba(0, 0, 0, 0.5);
  --gr-shadow-xl:  0 24px 48px -8px rgba(0, 0, 0, 0.6);
  --gr-shadow-2xl: 0 40px 80px -16px rgba(0, 0, 0, 0.7);

  --gr-gradient-hero: linear-gradient(135deg, var(--gr-primary-900) 0%, var(--gr-neutral-950) 100%);
}

/* ═══ 2. RESET & BASE ══════════════════════════════════════════════════ */
/* Scoped reset: sadece .gr-root içinde etkili olur — mevcut sayfaları bozmaz. */
.gr-root,
.gr-root * {
  box-sizing: border-box;
}
.gr-root {
  font-family: var(--gr-font-sans);
  font-size: var(--gr-text-base);
  line-height: var(--gr-leading-normal);
  color: var(--gr-text);
  background: var(--gr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.gr-root h1, .gr-root h2, .gr-root h3, .gr-root h4, .gr-root h5, .gr-root h6 {
  font-weight: var(--gr-weight-bold);
  line-height: var(--gr-leading-tight);
  letter-spacing: var(--gr-tracking-tight);
  color: var(--gr-text);
  margin: 0;
}
.gr-root h1 { font-size: var(--gr-text-5xl); }
.gr-root h2 { font-size: var(--gr-text-4xl); }
.gr-root h3 { font-size: var(--gr-text-3xl); }
.gr-root h4 { font-size: var(--gr-text-2xl); }
.gr-root h5 { font-size: var(--gr-text-xl); }
.gr-root h6 { font-size: var(--gr-text-lg); }
.gr-root p { margin: 0; }
.gr-root a {
  color: var(--gr-text-brand);
  text-decoration: none;
  transition: color var(--gr-duration-fast) var(--gr-ease-out);
}
.gr-root a:hover { color: var(--gr-primary-700); }
.gr-root button, .gr-root input, .gr-root select, .gr-root textarea {
  font: inherit;
  color: inherit;
}
.gr-root img, .gr-root svg { display: block; max-width: 100%; }
.gr-root ul, .gr-root ol { margin: 0; padding: 0; list-style: none; }
.gr-root :focus-visible {
  outline: 2px solid var(--gr-border-focus);
  outline-offset: 2px;
  border-radius: var(--gr-radius-sm);
}
.gr-root ::selection {
  background: var(--gr-primary-200);
  color: var(--gr-primary-900);
}

/* ═══ 3. LAYOUT ════════════════════════════════════════════════════════ */
.gr-container {
  max-width: var(--gr-container);
  margin: 0 auto;
  padding: 0 var(--gr-space-6);
  width: 100%;
}
.gr-container--narrow { max-width: var(--gr-container-narrow); }
.gr-container--wide   { max-width: var(--gr-container-wide); }

.gr-stack { display: flex; flex-direction: column; gap: var(--gr-space-4); }
.gr-stack--sm { gap: var(--gr-space-2); }
.gr-stack--lg { gap: var(--gr-space-6); }
.gr-stack--xl { gap: var(--gr-space-10); }

.gr-cluster { display: flex; flex-wrap: wrap; gap: var(--gr-space-3); align-items: center; }
.gr-cluster--sm { gap: var(--gr-space-2); }
.gr-cluster--lg { gap: var(--gr-space-6); }

.gr-grid { display: grid; gap: var(--gr-space-6); }
.gr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gr-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 900px) {
  .gr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gr-grid--2, .gr-grid--3, .gr-grid--4 { grid-template-columns: 1fr; }
  .gr-container { padding: 0 var(--gr-space-4); }
  
  /* Mobil Table & Scroll Fixes */
  .gr-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--gr-space-4); border-radius: var(--gr-radius-md); border: 1px solid var(--gr-border); }
  .gr-table { width: 100%; min-width: 600px; border-collapse: collapse; }
  .gr-table th, .gr-table td { padding: var(--gr-space-3) var(--gr-space-4); border-bottom: 1px solid var(--gr-border); text-align: left; }
  .gr-table th { background: var(--gr-bg-subtle); font-weight: var(--gr-weight-semibold); font-size: var(--gr-text-sm); }
  /* Mobilde Modal (Alttan açılır Drawer hissiyatı) */
  .gr-modal { max-height: 95vh; border-radius: var(--gr-radius-lg) var(--gr-radius-lg) 0 0; align-self: flex-end; }
  .gr-modal-backdrop { padding: 0; align-items: flex-end; }
}

/* App shell: sidebar + main */
.gr-shell { display: grid; grid-template-columns: var(--gr-sidebar-w) 1fr; min-height: 100vh; }
.gr-shell__sidebar { background: var(--gr-surface); border-right: 1px solid var(--gr-border); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.gr-shell__main { min-width: 0; background: var(--gr-bg); }
@media (max-width: 900px) {
  .gr-shell { grid-template-columns: 1fr; }
  .gr-shell__sidebar { display: none; position: fixed; top: 0; left: 0; width: 280px; z-index: var(--gr-z-overlay); box-shadow: var(--gr-shadow-xl); }
  .gr-shell[data-gr-drawer="open"] .gr-shell__sidebar { display: block; }
}

/* ═══ 4. COMPONENTS ════════════════════════════════════════════════════ */

/* ── Button ─────────────────────────────────────────────────── */
.gr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gr-space-2);
  height: 44px;
  padding: 0 var(--gr-space-5);
  font-family: inherit;
  font-size: var(--gr-text-sm);
  font-weight: var(--gr-weight-semibold);
  line-height: 1;
  letter-spacing: var(--gr-tracking-normal);
  border: 1px solid transparent;
  border-radius: var(--gr-radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--gr-duration-fast) var(--gr-ease-out),
              border-color var(--gr-duration-fast) var(--gr-ease-out),
              box-shadow var(--gr-duration-fast) var(--gr-ease-out),
              transform var(--gr-duration-fast) var(--gr-ease-out),
              color var(--gr-duration-fast) var(--gr-ease-out);
  text-decoration: none;
}
.gr-btn:active { transform: translateY(1px); }
.gr-btn:disabled,
.gr-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.gr-btn--sm { height: 36px; padding: 0 var(--gr-space-4); font-size: var(--gr-text-xs); }
.gr-btn--lg { height: 52px; padding: 0 var(--gr-space-6); font-size: var(--gr-text-base); border-radius: var(--gr-radius-lg); }
.gr-btn--xl { height: 60px; padding: 0 var(--gr-space-8); font-size: var(--gr-text-lg); border-radius: var(--gr-radius-lg); }
.gr-btn--full { width: 100%; }
.gr-btn--icon { padding: 0; width: 44px; }
.gr-btn--icon.gr-btn--sm { width: 36px; }
.gr-btn--icon.gr-btn--lg { width: 52px; }

/* Variants */
.gr-btn--primary {
  background: var(--gr-primary-600);
  color: var(--gr-text-inverse);
  box-shadow: var(--gr-shadow-sm);
}
.gr-btn--primary:hover { background: var(--gr-primary-700); box-shadow: var(--gr-shadow-md); }
.gr-btn--primary:focus-visible { box-shadow: var(--gr-shadow-focus); }

.gr-btn--accent {
  background: var(--gr-accent-500);
  color: var(--gr-text-inverse);
  box-shadow: var(--gr-shadow-sm);
}
.gr-btn--accent:hover { background: var(--gr-accent-600); box-shadow: var(--gr-shadow-md); }

.gr-btn--secondary {
  background: var(--gr-surface);
  color: var(--gr-text);
  border-color: var(--gr-border);
  box-shadow: var(--gr-shadow-xs);
}
.gr-btn--secondary:hover { background: var(--gr-surface-hover); border-color: var(--gr-border-strong); }

.gr-btn--ghost {
  background: transparent;
  color: var(--gr-text-secondary);
}
.gr-btn--ghost:hover { background: var(--gr-bg-subtle); color: var(--gr-text); }

.gr-btn--danger {
  background: var(--gr-danger-500);
  color: var(--gr-text-inverse);
}
.gr-btn--danger:hover { background: var(--gr-danger-600); }

.gr-btn--outline {
  background: transparent;
  color: var(--gr-primary-600);
  border-color: var(--gr-primary-300);
}
.gr-btn--outline:hover { background: var(--gr-primary-50); border-color: var(--gr-primary-500); }

/* ── Input ──────────────────────────────────────────────────── */
.gr-field { display: flex; flex-direction: column; gap: var(--gr-space-2); }
.gr-label {
  font-size: var(--gr-text-sm);
  font-weight: var(--gr-weight-semibold);
  color: var(--gr-text);
}
.gr-label__hint {
  font-weight: var(--gr-weight-regular);
  color: var(--gr-text-muted);
  margin-left: var(--gr-space-2);
}
.gr-help {
  font-size: var(--gr-text-xs);
  color: var(--gr-text-muted);
}
.gr-error {
  font-size: var(--gr-text-xs);
  color: var(--gr-danger-600);
  display: flex;
  align-items: center;
  gap: var(--gr-space-1);
}

.gr-input,
.gr-select,
.gr-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--gr-space-3) var(--gr-space-4);
  font-family: inherit;
  font-size: var(--gr-text-sm);
  color: var(--gr-text);
  background: var(--gr-surface);
  border: 1.5px solid var(--gr-border);
  border-radius: var(--gr-radius-md);
  transition: border-color var(--gr-duration-fast) var(--gr-ease-out),
              box-shadow var(--gr-duration-fast) var(--gr-ease-out);
  outline: none;
}
.gr-input::placeholder,
.gr-textarea::placeholder { color: var(--gr-text-muted); }
.gr-input:hover,
.gr-select:hover,
.gr-textarea:hover { border-color: var(--gr-border-strong); }
.gr-input:focus,
.gr-select:focus,
.gr-textarea:focus {
  border-color: var(--gr-border-focus);
  box-shadow: var(--gr-shadow-focus);
}
.gr-textarea { resize: vertical; min-height: 96px; }
.gr-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--gr-space-3) center;
  padding-right: calc(var(--gr-space-3) * 2 + 20px);
}
.gr-field[data-gr-invalid="true"] .gr-input,
.gr-field[data-gr-invalid="true"] .gr-select,
.gr-field[data-gr-invalid="true"] .gr-textarea {
  border-color: var(--gr-danger-500);
}
.gr-field[data-gr-invalid="true"] .gr-input:focus {
  box-shadow: var(--gr-shadow-focus-danger);
}

.gr-input-group { position: relative; }
.gr-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--gr-space-4);
  transform: translateY(-50%);
  color: var(--gr-text-muted);
  pointer-events: none;
  width: 20px;
  height: 20px;
}
.gr-input-group .gr-input { padding-left: calc(var(--gr-space-4) + 20px + var(--gr-space-2)); }

/* Checkbox / Radio */
.gr-check {
  display: inline-flex;
  align-items: center;
  gap: var(--gr-space-2);
  cursor: pointer;
  font-size: var(--gr-text-sm);
  color: var(--gr-text);
}
.gr-check input[type="checkbox"],
.gr-check input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--gr-border-strong);
  border-radius: var(--gr-radius-xs);
  background: var(--gr-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background var(--gr-duration-fast) var(--gr-ease-out),
              border-color var(--gr-duration-fast) var(--gr-ease-out);
}
.gr-check input[type="radio"] { border-radius: var(--gr-radius-full); }
.gr-check input:hover { border-color: var(--gr-primary-500); }
.gr-check input:checked {
  background: var(--gr-primary-600);
  border-color: var(--gr-primary-600);
}
.gr-check input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.gr-check input[type="radio"]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gr-neutral-0);
  border-radius: var(--gr-radius-full);
}

/* ── Card ───────────────────────────────────────────────────── */
.gr-card {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-xl);
  box-shadow: var(--gr-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--gr-duration-base) var(--gr-ease-out),
              border-color var(--gr-duration-base) var(--gr-ease-out),
              transform var(--gr-duration-base) var(--gr-ease-out);
}
.gr-card--interactive { cursor: pointer; }
.gr-card--interactive:hover {
  box-shadow: var(--gr-shadow-lg);
  border-color: var(--gr-primary-200);
  transform: translateY(-2px);
}
.gr-card--flat { box-shadow: none; }
.gr-card--brand {
  background: var(--gr-gradient-primary);
  color: var(--gr-text-inverse);
  border-color: transparent;
}
.gr-card__header,
.gr-card__body,
.gr-card__footer { padding: var(--gr-space-6); }
.gr-card__header {
  border-bottom: 1px solid var(--gr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gr-space-4);
}
.gr-card__footer {
  border-top: 1px solid var(--gr-border);
  background: var(--gr-bg-subtle);
}
.gr-card__title {
  font-size: var(--gr-text-lg);
  font-weight: var(--gr-weight-semibold);
  margin: 0;
}
.gr-card__subtitle {
  font-size: var(--gr-text-sm);
  color: var(--gr-text-muted);
  margin-top: var(--gr-space-1);
}

/* ── Badge ──────────────────────────────────────────────────── */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gr-space-1);
  padding: var(--gr-space-1) var(--gr-space-3);
  font-size: var(--gr-text-xs);
  font-weight: var(--gr-weight-semibold);
  line-height: 1.3;
  border-radius: var(--gr-radius-full);
  background: var(--gr-bg-subtle);
  color: var(--gr-text-secondary);
  border: 1px solid var(--gr-border);
  white-space: nowrap;
}
.gr-badge--brand    { background: var(--gr-primary-50);  color: var(--gr-primary-700);  border-color: var(--gr-primary-200); }
.gr-badge--accent   { background: var(--gr-accent-50);   color: var(--gr-accent-700);   border-color: var(--gr-accent-200); }
.gr-badge--success  { background: var(--gr-success-50);  color: var(--gr-success-700);  border-color: var(--gr-success-100); }
.gr-badge--warning  { background: var(--gr-warning-50);  color: var(--gr-warning-600);  border-color: var(--gr-warning-100); }
.gr-badge--danger   { background: var(--gr-danger-50);   color: var(--gr-danger-600);   border-color: var(--gr-danger-100); }
.gr-badge--info     { background: var(--gr-info-50);     color: var(--gr-info-600);     border-color: var(--gr-info-100); }

/* Plan tier badges (Pusula / Rota / Atlas) */
.gr-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--gr-space-2);
  padding: var(--gr-space-1) var(--gr-space-3);
  font-size: var(--gr-text-xs);
  font-weight: var(--gr-weight-bold);
  letter-spacing: var(--gr-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--gr-radius-full);
}
.gr-tier--pusula { background: var(--gr-neutral-100); color: var(--gr-neutral-700); }
.gr-tier--rota   { background: var(--gr-primary-100); color: var(--gr-primary-700); }
.gr-tier--atlas  {
  background: var(--gr-gradient-primary);
  color: var(--gr-text-inverse);
  box-shadow: var(--gr-shadow-sm);
}

/* ── Alert ──────────────────────────────────────────────────── */
.gr-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gr-space-3);
  padding: var(--gr-space-4) var(--gr-space-5);
  border-radius: var(--gr-radius-lg);
  border: 1px solid var(--gr-border);
  background: var(--gr-bg-subtle);
  color: var(--gr-text);
  font-size: var(--gr-text-sm);
  line-height: var(--gr-leading-snug);
}
.gr-alert__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.gr-alert__body { flex: 1; min-width: 0; }
.gr-alert__title {
  font-weight: var(--gr-weight-semibold);
  margin-bottom: var(--gr-space-1);
  font-size: var(--gr-text-sm);
}
.gr-alert--info    { background: var(--gr-info-50);    border-color: var(--gr-info-100);    color: var(--gr-info-600); }
.gr-alert--success { background: var(--gr-success-50); border-color: var(--gr-success-100); color: var(--gr-success-700); }
.gr-alert--warning { background: var(--gr-warning-50); border-color: var(--gr-warning-100); color: var(--gr-warning-600); }
.gr-alert--danger  { background: var(--gr-danger-50);  border-color: var(--gr-danger-100);  color: var(--gr-danger-600); }

/* ── Toast ──────────────────────────────────────────────────── */
.gr-toast-host {
  position: fixed;
  top: var(--gr-space-6);
  right: var(--gr-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gr-space-3);
  z-index: var(--gr-z-toast);
  pointer-events: none;
  max-width: 400px;
}
.gr-toast {
  pointer-events: auto;
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-xl);
  padding: var(--gr-space-4) var(--gr-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--gr-space-3);
  min-width: 280px;
  animation: gr-toast-in var(--gr-duration-base) var(--gr-ease-out);
}
@keyframes gr-toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.gr-toast--success { border-left: 4px solid var(--gr-success-500); }
.gr-toast--danger  { border-left: 4px solid var(--gr-danger-500); }
.gr-toast--info    { border-left: 4px solid var(--gr-info-500); }
.gr-toast--warning { border-left: 4px solid var(--gr-warning-500); }

/* ── Modal ──────────────────────────────────────────────────── */
.gr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gr-space-6);
  z-index: var(--gr-z-modal);
  animation: gr-fade-in var(--gr-duration-base) var(--gr-ease-out);
}
.gr-modal-backdrop[data-gr-open="true"] { display: flex; }
@keyframes gr-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gr-modal {
  background: var(--gr-surface);
  border-radius: var(--gr-radius-2xl);
  box-shadow: var(--gr-shadow-2xl);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  animation: gr-modal-in var(--gr-duration-base) var(--gr-ease-out);
}
@keyframes gr-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gr-modal__header {
  padding: var(--gr-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gr-space-4);
  border-bottom: 1px solid var(--gr-border);
}
.gr-modal__body { padding: var(--gr-space-6); }
.gr-modal__footer {
  padding: var(--gr-space-5) var(--gr-space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--gr-space-3);
  border-top: 1px solid var(--gr-border);
  background: var(--gr-bg-subtle);
}

/* ── Navigation (top bar) ───────────────────────────────────── */
.gr-nav {
  position: sticky;
  top: 0;
  z-index: var(--gr-z-sticky);
  height: var(--gr-nav-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gr-border);
}
[data-gr-theme="dark"] .gr-nav { background: rgba(15, 23, 42, 0.85); }
.gr-nav__inner {
  max-width: var(--gr-container-wide);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gr-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gr-space-6);
}
.gr-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--gr-space-2);
  font-weight: var(--gr-weight-bold);
  font-size: var(--gr-text-lg);
  color: var(--gr-text);
  text-decoration: none;
}
.gr-nav__brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--gr-radius-sm);
  background: var(--gr-gradient-primary);
  display: grid;
  place-content: center;
  color: var(--gr-text-inverse);
  font-weight: var(--gr-weight-black);
}
.gr-nav__links {
  display: flex;
  align-items: center;
  gap: var(--gr-space-1);
}
.gr-nav__link {
  padding: var(--gr-space-2) var(--gr-space-4);
  font-size: var(--gr-text-sm);
  font-weight: var(--gr-weight-medium);
  color: var(--gr-text-secondary);
  border-radius: var(--gr-radius-md);
  transition: background var(--gr-duration-fast), color var(--gr-duration-fast);
}
.gr-nav__link:hover { background: var(--gr-bg-subtle); color: var(--gr-text); }
.gr-nav__link[aria-current="page"] { color: var(--gr-primary-600); background: var(--gr-primary-50); }
.gr-nav__cta { display: flex; align-items: center; gap: var(--gr-space-3); }
@media (max-width: 900px) { .gr-nav__links { display: none; } }

/* ── Sidebar ────────────────────────────────────────────────── */
.gr-sidebar { padding: var(--gr-space-5); display: flex; flex-direction: column; gap: var(--gr-space-6); height: 100%; }
.gr-sidebar__brand { padding: 0 var(--gr-space-3); }
.gr-sidebar__section-title {
  font-size: var(--gr-text-xs);
  font-weight: var(--gr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gr-tracking-wide);
  color: var(--gr-text-muted);
  padding: 0 var(--gr-space-3);
  margin-bottom: var(--gr-space-2);
}
.gr-sidebar__nav { display: flex; flex-direction: column; gap: var(--gr-space-1); }
.gr-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--gr-space-3);
  padding: var(--gr-space-3) var(--gr-space-4);
  font-size: var(--gr-text-sm);
  font-weight: var(--gr-weight-medium);
  color: var(--gr-text-secondary);
  border-radius: var(--gr-radius-md);
  transition: background var(--gr-duration-fast), color var(--gr-duration-fast);
}
.gr-sidebar__link:hover { background: var(--gr-bg-subtle); color: var(--gr-text); }
.gr-sidebar__link[aria-current="page"] {
  background: var(--gr-primary-50);
  color: var(--gr-primary-700);
  font-weight: var(--gr-weight-semibold);
}
.gr-sidebar__link-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Progress / Steps ───────────────────────────────────────── */
.gr-progress {
  width: 100%;
  height: 8px;
  background: var(--gr-bg-muted);
  border-radius: var(--gr-radius-full);
  overflow: hidden;
}
.gr-progress__bar {
  height: 100%;
  background: var(--gr-gradient-primary);
  border-radius: inherit;
  transition: width var(--gr-duration-slow) var(--gr-ease-out);
}

.gr-steps {
  display: flex;
  align-items: center;
  gap: var(--gr-space-2);
}
.gr-steps__item {
  display: flex;
  align-items: center;
  gap: var(--gr-space-2);
  font-size: var(--gr-text-sm);
  color: var(--gr-text-muted);
}
.gr-steps__dot {
  width: 28px;
  height: 28px;
  border-radius: var(--gr-radius-full);
  background: var(--gr-bg-muted);
  color: var(--gr-text-muted);
  display: grid;
  place-content: center;
  font-weight: var(--gr-weight-bold);
  font-size: var(--gr-text-xs);
  flex-shrink: 0;
  border: 2px solid var(--gr-border);
  transition: all var(--gr-duration-base) var(--gr-ease-out);
}
.gr-steps__item[data-gr-state="active"] .gr-steps__dot {
  background: var(--gr-primary-600);
  color: var(--gr-text-inverse);
  border-color: var(--gr-primary-600);
  box-shadow: var(--gr-shadow-focus);
}
.gr-steps__item[data-gr-state="done"] .gr-steps__dot {
  background: var(--gr-success-500);
  color: var(--gr-text-inverse);
  border-color: var(--gr-success-500);
}
.gr-steps__item[data-gr-state="active"],
.gr-steps__item[data-gr-state="done"] { color: var(--gr-text); }
.gr-steps__divider {
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: var(--gr-bg-muted);
  border-radius: var(--gr-radius-full);
}
.gr-steps__item[data-gr-state="done"] + .gr-steps__divider { background: var(--gr-success-500); }

/* ── Gate (Free-tier kilitli içerik overlay'i) ──────────────── */
.gr-gate {
  position: relative;
  border-radius: var(--gr-radius-xl);
  overflow: hidden;
}
.gr-gate__content {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
.gr-gate__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.92) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gr-space-8);
}
[data-gr-theme="dark"] .gr-gate__overlay {
  background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.92) 100%);
}
.gr-gate__panel {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-xl);
  box-shadow: var(--gr-shadow-xl);
  padding: var(--gr-space-6);
  max-width: 380px;
  text-align: center;
}
.gr-gate__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--gr-space-4);
  border-radius: var(--gr-radius-full);
  background: var(--gr-primary-50);
  color: var(--gr-primary-600);
  display: grid;
  place-content: center;
}
.gr-gate__title { font-size: var(--gr-text-lg); font-weight: var(--gr-weight-bold); margin-bottom: var(--gr-space-2); }
.gr-gate__desc  { font-size: var(--gr-text-sm); color: var(--gr-text-secondary); margin-bottom: var(--gr-space-5); }

/* ── Skeleton ───────────────────────────────────────────────── */
.gr-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--gr-bg-muted) 0%, var(--gr-bg-subtle) 50%, var(--gr-bg-muted) 100%);
  background-size: 200% 100%;
  border-radius: var(--gr-radius-sm);
  animation: gr-shimmer 1.4s ease-in-out infinite;
}
@keyframes gr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Divider ────────────────────────────────────────────────── */
.gr-divider { height: 1px; background: var(--gr-border); margin: var(--gr-space-6) 0; }

/* ── Icon helper ────────────────────────────────────────────── */
.gr-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gr-icon--sm { width: 16px; height: 16px; }
.gr-icon--lg { width: 24px; height: 24px; }
.gr-icon--xl { width: 32px; height: 32px; }

/* ═══ 5. UTILITIES ═════════════════════════════════════════════════════ */
.gr-u-center     { text-align: center; }
.gr-u-right      { text-align: right; }
.gr-u-muted      { color: var(--gr-text-muted); }
.gr-u-secondary  { color: var(--gr-text-secondary); }
.gr-u-brand      { color: var(--gr-text-brand); }
.gr-u-bold       { font-weight: var(--gr-weight-bold); }
.gr-u-semibold   { font-weight: var(--gr-weight-semibold); }
.gr-u-sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gr-u-hidden     { display: none !important; }
.gr-u-block      { display: block; }
.gr-u-flex       { display: flex; }
.gr-u-grow       { flex: 1; min-width: 0; }
.gr-u-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gr-u-mt-2 { margin-top: var(--gr-space-2); }
.gr-u-mt-4 { margin-top: var(--gr-space-4); }
.gr-u-mt-6 { margin-top: var(--gr-space-6); }
.gr-u-mt-8 { margin-top: var(--gr-space-8); }
.gr-u-mb-2 { margin-bottom: var(--gr-space-2); }
.gr-u-mb-4 { margin-bottom: var(--gr-space-4); }
.gr-u-mb-6 { margin-bottom: var(--gr-space-6); }
.gr-u-mb-8 { margin-bottom: var(--gr-space-8); }

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gr-root *, .gr-root *::before, .gr-root *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}