/* Omnex UI Kit — galeri iskeleti (oxg-*)
   TEK KAYNAK: hem public/ui-gallery.html (standalone) hem SPA #/ui-kit (UiShowcase)
   bu dosyayi link'ler. Global reset (*/html/body/::selection) ui-gallery.html icinde
   inline kalir (SPA kendi resetine sahiptir). */

/* --- Üst çubuk --- */
.oxg-topbar {
  position: sticky; top: 0; z-index: var(--ox-z-nav);
  display: flex; align-items: center; gap: var(--ox-space-4);
  height: var(--ox-topbar-h);
  padding: 0 var(--ox-content-pad);
  background: color-mix(in srgb, var(--ox-surface) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ox-border);
}
.oxg-mark {
  display: flex; align-items: center; gap: var(--ox-space-2);
  font-weight: var(--ox-weight-bold);
  letter-spacing: var(--ox-tracking-tight);
  font-size: var(--ox-text-md);
}
.oxg-mark-dot {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, var(--ox-primary), var(--ox-primary-active));
  box-shadow: var(--ox-shadow-sm);
}
.oxg-mark small {
  font-weight: var(--ox-weight-medium);
  color: var(--ox-fg-muted);
  font-size: var(--ox-text-sm);
}
.oxg-topbar-spacer { flex: 1; }

/* Tema anahtarı (segmented) */
.oxg-theme {
  display: flex; gap: 2px;
  background: var(--ox-surface-2);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-full);
  padding: 3px;
}
.oxg-theme button {
  display: grid; place-items: center;
  width: 32px; height: 26px;
  border: 0; border-radius: var(--ox-radius-full);
  background: transparent; color: var(--ox-fg-muted);
  cursor: pointer;
  transition: background-color var(--ox-transition-fast), color var(--ox-transition-fast);
}
.oxg-theme button:hover { color: var(--ox-fg); }
.oxg-theme button.on {
  background: var(--ox-surface); color: var(--ox-accent);
  box-shadow: var(--ox-shadow-sm);
}
.oxg-theme button:focus-visible { outline: none; box-shadow: var(--ox-focus-ring); }

/* --- İçerik --- */
.oxg-wrap {
  max-width: var(--ox-content-max);
  margin: 0 auto;
  padding: var(--ox-space-10) var(--ox-content-pad) var(--ox-space-16);
}

.oxg-hero {
  position: relative;
  padding: var(--ox-space-12) 0 var(--ox-space-10);
  overflow: hidden;
}
.oxg-hero::before {
  content: "";
  position: absolute; inset: -40% -10% auto;
  height: 340px;
  background:
    radial-gradient(420px 200px at 18% 60%, var(--ox-primary-subtle), transparent 70%),
    radial-gradient(360px 180px at 78% 30%, var(--ox-info-subtle), transparent 70%);
  pointer-events: none;
}
.oxg-hero > * { position: relative; }
.oxg-kicker {
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-semibold);
  letter-spacing: var(--ox-tracking-label);
  text-transform: uppercase;
  color: var(--ox-accent);
  margin-bottom: var(--ox-space-3);
}
.oxg-hero h1 {
  font-size: var(--ox-text-display);
  line-height: var(--ox-leading-tight);
  letter-spacing: var(--ox-tracking-tight);
  font-weight: var(--ox-weight-bold);
  max-width: 640px;
}
.oxg-hero p {
  margin-top: var(--ox-space-4);
  color: var(--ox-fg-muted);
  max-width: 560px;
  font-size: var(--ox-text-md);
}

/* --- Bölümler --- */
.oxg-section { margin-top: var(--ox-space-16); }
.oxg-section > h2 {
  font-size: var(--ox-text-xl);
  letter-spacing: var(--ox-tracking-tight);
  margin-bottom: var(--ox-space-2);
}
.oxg-section > .oxg-desc {
  color: var(--ox-fg-muted);
  margin-bottom: var(--ox-space-6);
  max-width: 640px;
}
.oxg-h3 { font-size: var(--ox-text-md, 1rem); margin: var(--ox-space-6) 0 var(--ox-space-3); color: var(--ox-fg-muted); }
.oxg-sub {
  font-size: var(--ox-text-md);
  letter-spacing: var(--ox-tracking-tight);
  margin-bottom: var(--ox-space-2);
}
.oxg-label {
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-semibold);
  letter-spacing: var(--ox-tracking-label);
  text-transform: uppercase;
  color: var(--ox-fg-faint);
}

.oxg-card {
  background: var(--ox-surface);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-lg);
  padding: var(--ox-space-6);
  box-shadow: var(--ox-shadow-sm);
}

/* Renk kartları */
.oxg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--ox-space-3);
}
.oxg-swatch {
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  overflow: hidden;
  background: var(--ox-surface);
}
.oxg-swatch-chip { height: 56px; border-bottom: 1px solid var(--ox-border); }
.oxg-swatch-meta { padding: var(--ox-space-2) var(--ox-space-3); }
.oxg-swatch-meta code {
  display: block;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg);
  word-break: break-all;
}
.oxg-swatch-meta span {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg-faint);
}

/* Tipografi */
.oxg-type-row {
  display: flex; align-items: baseline; gap: var(--ox-space-6);
  padding: var(--ox-space-3) 0;
  border-bottom: 1px dashed var(--ox-border);
}
.oxg-type-row:last-child { border-bottom: 0; }
.oxg-type-row code {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg-faint);
  min-width: 170px;
}

/* Spacing */
.oxg-space-row { display: flex; align-items: center; gap: var(--ox-space-4); padding: 5px 0; }
.oxg-space-row code { font-family: var(--ox-font-mono); font-size: var(--ox-text-xs); color: var(--ox-fg-faint); min-width: 130px; }
.oxg-space-bar { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--ox-primary), color-mix(in srgb, var(--ox-primary) 55%, var(--ox-bg))); }

/* Radius + gölge + kontroller */
.oxg-tiles { display: flex; flex-wrap: wrap; gap: var(--ox-space-4); }
.oxg-tile {
  display: grid; place-items: center;
  width: 108px; height: 76px;
  background: var(--ox-surface);
  border: 1px solid var(--ox-border);
}
.oxg-tile code { font-family: var(--ox-font-mono); font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
.oxg-shadow-tile { border: 0; background: var(--ox-surface); border-radius: var(--ox-radius-md); }
.oxg-control-demo {
  display: inline-flex; align-items: center;
  padding: 0 var(--ox-control-pad-x);
  border-radius: var(--ox-radius-md);
  background: var(--ox-primary); color: var(--ox-primary-fg);
  font-weight: var(--ox-weight-medium);
  font-size: var(--ox-text-base);
}

/* Hareket */
.oxg-motion { display: flex; gap: var(--ox-space-4); flex-wrap: wrap; }
.oxg-motion-tile {
  width: 150px; padding: var(--ox-space-4);
  background: var(--ox-surface); border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md); cursor: pointer;
  text-align: center;
}
.oxg-motion-tile .oxg-ball {
  width: 26px; height: 26px; margin: 0 auto var(--ox-space-2);
  border-radius: var(--ox-radius-full);
  background: var(--ox-accent);
}
.oxg-motion-tile:hover .oxg-ball { transform: translateY(-8px) scale(1.12); }
.oxg-motion-tile[data-dur="fast"] .oxg-ball { transition: transform var(--ox-dur-fast) var(--ox-ease-spring); }
.oxg-motion-tile[data-dur="base"] .oxg-ball { transition: transform var(--ox-dur) var(--ox-ease-spring); }
.oxg-motion-tile[data-dur="slow"] .oxg-ball { transition: transform var(--ox-dur-slow) var(--ox-ease-spring); }
.oxg-motion-tile code { font-family: var(--ox-font-mono); font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }

/* İkonlar */
.oxg-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--ox-space-2);
}
.oxg-icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: var(--ox-space-2);
  padding: var(--ox-space-4) var(--ox-space-2);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface);
  cursor: pointer;
  transition: border-color var(--ox-transition-fast), box-shadow var(--ox-transition-fast), color var(--ox-transition-fast);
  color: var(--ox-fg);
}
.oxg-icon-cell:hover { border-color: var(--ox-accent); color: var(--ox-accent); box-shadow: var(--ox-shadow-sm); }
.oxg-icon-cell code { font-family: var(--ox-font-mono); font-size: 10px; color: var(--ox-fg-faint); }

/* Durum örnekleri */
.oxg-badges { display: flex; flex-wrap: wrap; gap: var(--ox-space-3); }
.oxg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  border-radius: var(--ox-radius-full);
  font-size: var(--ox-text-sm);
  font-weight: var(--ox-weight-medium);
}

/* Tablo (z-index, layout) */
.oxg-table { width: 100%; border-collapse: collapse; }
.oxg-table td {
  padding: var(--ox-space-2) var(--ox-space-3);
  border-bottom: 1px solid var(--ox-border);
  font-size: var(--ox-text-sm);
}
.oxg-table td:first-child { font-family: var(--ox-font-mono); font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
.oxg-table tr:last-child td { border-bottom: 0; }

/* Kopyalama bildirimi */
.oxg-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
  z-index: var(--ox-z-toast);
  background: var(--ox-fg); color: var(--ox-bg);
  padding: 8px 16px; border-radius: var(--ox-radius-full);
  font-size: var(--ox-text-sm);
  box-shadow: var(--ox-shadow-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ox-transition), transform var(--ox-transition);
}
.oxg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.oxg-footer {
  margin-top: var(--ox-space-16);
  padding-top: var(--ox-space-6);
  border-top: 1px solid var(--ox-border);
  color: var(--ox-fg-faint);
  font-size: var(--ox-text-sm);
}

@media (max-width: 600px) {
  .oxg-hero h1 { font-size: var(--ox-text-2xl); }
  .oxg-type-row { flex-direction: column; gap: 2px; }
}