/* 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);
}
/* #/ui-kit SPA host'una enjekte edilince (UiShowcase.js) sabit 1320px cap KALKAR ->
   içerik alanına uygun tam genişlik. Standalone ui-gallery.html'de 1320 cap korunur. */
[data-uk="host"] .oxg-wrap { max-width: none; }

.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; }

/* NOT: galeri kopyalama bildirimi merkezi OxToast kullanir (bkz. ui-gallery.html
   "Merkezi toast standardi"); eski ozel .oxg-toast pill'i olu koddu, kaldirildi. */

.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; }
}

/* ===================================================================
   PROTOTİP — Birleşik Modal Sistemi + OxViewer + OxPicker (ADR-0011)
   BAĞIMSIZ oxgm-* sınıfları: çekirdek .ox-modal ETKİLENMEZ (galeri-önce).
   Onaylanınca bu tasarım core modal.css'e --s/m/l/xl/xxl/full olarak geçer.
   =================================================================== */
.oxgm-backdrop {
  position: fixed; inset: 0; z-index: var(--ox-z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--ox-space-4); background: var(--ox-backdrop);
}
.oxgm-backdrop.is-open { display: flex; }
.oxgm-modal {
  width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--ox-surface); border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-lg); box-shadow: var(--ox-shadow-overlay);
  animation: ox-modal-in var(--ox-dur) var(--ox-ease-spring); overflow: hidden;
}
/* ---- Boyut ölçeği ---- */
.oxgm-modal--s   { max-width: 400px; }
.oxgm-modal--m   { max-width: 560px; }
.oxgm-modal--l   { max-width: 760px; }
.oxgm-modal--xl  { max-width: 960px; }
.oxgm-modal--xxl { max-width: min(1440px, 100vw - 48px); }
.oxgm-modal--full { max-width: calc(100vw - 32px); width: calc(100vw - 32px); max-height: calc(100vh - 32px); height: calc(100vh - 32px); }
.oxgm-modal--viewer { max-width: 960px; height: 86vh; max-height: calc(100vh - 48px); }
/* ---- Üst-bar (başlık + animasyonlu ikon + aksiyonlar) ---- */
.oxgm-head {
  display: flex; align-items: center; gap: var(--ox-space-3);
  padding: var(--ox-space-4) var(--ox-space-5);
  border-bottom: 1px solid var(--ox-border); flex-shrink: 0;
}
.oxgm-head__ic {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--ox-radius-md); background: var(--ox-primary-subtle, var(--ox-info-subtle)); color: var(--ox-primary, var(--ox-info));
}
.oxgm-head__tt { font-size: var(--ox-text-md); font-weight: var(--ox-weight-semibold); letter-spacing: var(--ox-tracking-tight); }
.oxgm-head__sub { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); margin-top: 1px; }
.oxgm-head__sp { flex: 1; min-width: 0; }
.oxgm-iconbtn {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border: 0; border-radius: var(--ox-radius-sm); background: transparent; color: var(--ox-fg-faint); cursor: pointer;
}
.oxgm-iconbtn:hover { background: var(--ox-surface-2); color: var(--ox-fg); }
.oxgm-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.oxgm-body { padding: var(--ox-space-5); overflow: auto; color: var(--ox-fg-muted); flex: 1 1 auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ox-primary, var(--ox-fg)) 30%, transparent) transparent; }
.oxgm-body::-webkit-scrollbar, .oxgm-pick-grid.is-h::-webkit-scrollbar { width: 11px; height: 11px; }
.oxgm-body::-webkit-scrollbar-track, .oxgm-pick-grid.is-h::-webkit-scrollbar-track { background: transparent; }
.oxgm-body::-webkit-scrollbar-thumb, .oxgm-pick-grid.is-h::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ox-primary, var(--ox-fg)) 30%, transparent); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.oxgm-body::-webkit-scrollbar-thumb:hover, .oxgm-pick-grid.is-h::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ox-primary, var(--ox-fg)) 48%, transparent); background-clip: content-box; }
.oxgm-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--ox-space-3);
  padding: var(--ox-space-4) var(--ox-space-5); border-top: 1px solid var(--ox-border);
  background: var(--ox-surface-2); flex-shrink: 0;
}
/* ---- OxViewer prototip ---- */
.oxgm-vw-body { padding: 0; display: flex; flex-direction: column; background: var(--ox-bg); }
.oxgm-vw-stage {
  position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background-color: var(--ox-surface-2);
  background-image: linear-gradient(45deg,var(--ox-border) 25%,transparent 25%),linear-gradient(-45deg,var(--ox-border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ox-border) 75%),linear-gradient(-45deg,transparent 75%,var(--ox-border) 75%);
  background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0;
}
/* display:block ŞART: inline <img> altındaki baseline boşluğu transform-origin'i
   görselin ALTINA kaydırır -> küçülünce aşağı yapışır. block bunu kaldırır (merkez zoom). */
.oxgm-vw-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform .08s linear; }
.oxgm-vw-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;                 /* taşan/zoomlu görselin ALTINDA kalmasın (sol ok kaybolmasin) */
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: var(--ox-radius-full); background: var(--ox-surface); color: var(--ox-fg);
  box-shadow: var(--ox-shadow-lg); cursor: pointer; opacity: .85;
}
.oxgm-vw-nav:hover { opacity: 1; }
.oxgm-vw-nav--prev { left: 14px; } .oxgm-vw-nav--next { right: 14px; }
.oxgm-vw-txt { align-self: stretch; width: 100%; height: 100%; margin: 0; padding: var(--ox-space-5); overflow: auto; background: var(--ox-surface); color: var(--ox-fg); font-family: var(--ox-font-mono); font-size: var(--ox-text-sm); white-space: pre-wrap; }
.oxgm-vw-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ox-fg-muted); }
.oxgm-vw-ph svg { width: 84px; height: 84px; opacity: .5; }
.oxgm-vw-bottom {
  display: flex; align-items: center; gap: var(--ox-space-4);
  padding: var(--ox-space-3) var(--ox-space-5); border-top: 1px solid var(--ox-border); background: var(--ox-surface); flex-shrink: 0;
}
.oxgm-vw-meta { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
.oxgm-vw-meta b { color: var(--ox-fg); font-weight: var(--ox-weight-medium); }
.oxgm-vw-zoom { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.oxgm-vw-zoom input[type=range] { width: 120px; }
.oxgm-vw-zoom .pct { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); min-width: 38px; text-align: right; }
/* ---- OxPicker prototip ---- */
.oxgm-pick-bar { display: flex; align-items: center; gap: var(--ox-space-3); flex-wrap: wrap; margin-bottom: var(--ox-space-4); }
.oxgm-pick-search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ox-border); border-radius: var(--ox-radius-md); background: var(--ox-surface); }
.oxgm-pick-search input { border: 0; outline: 0; background: transparent; color: var(--ox-fg); flex: 1; font: inherit; }
.oxgm-seg { display: inline-flex; border: 1px solid var(--ox-border); border-radius: var(--ox-radius-md); overflow: hidden; }
.oxgm-seg button { border: 0; background: var(--ox-surface); color: var(--ox-fg-muted); padding: 6px 10px; cursor: pointer; display: grid; place-items: center; }
.oxgm-seg button.is-active { background: var(--ox-primary, var(--ox-info)); color: #fff; }
/* Dikey (varsayılan): masonry sütunlar -> tile'lar GERÇEK en-boy oranında akar (dikey uzun, yatay geniş).
   display:block ZORUNLU (column-* grid/flex bağlamında yok sayılır). */
.oxgm-pick-grid { display: block; column-width: 132px; column-gap: var(--ox-space-3); }
.oxgm-pick-grid .oxgm-tile { break-inside: avoid; margin: 0 0 var(--ox-space-3); width: 100%; }
/* Yatay: tek satır, sabit yükseklik + en-boy'a göre genişlik, yatay (şık) scroll. */
.oxgm-pick-grid.is-h { column-width: auto; display: flex; gap: var(--ox-space-3); overflow-x: auto; padding-bottom: 8px; }
.oxgm-pick-grid.is-h .oxgm-tile { margin: 0; flex: 0 0 auto; width: auto; }
.oxgm-pick-grid.is-h .oxgm-tile img { height: 132px; width: auto; }
.oxgm-tile { position: relative; border: 1px solid var(--ox-border); border-radius: var(--ox-radius-md); overflow: hidden; cursor: pointer; background: var(--ox-surface); }
.oxgm-tile:hover { border-color: var(--ox-primary, var(--ox-accent)); }
.oxgm-tile img { width: 100%; height: auto; object-fit: cover; display: block; background: var(--ox-surface-2); }
.oxgm-tile__nm { padding: 6px 8px; font-size: var(--ox-text-xs); color: var(--ox-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxgm-tile__badge { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 1px 6px; border-radius: var(--ox-radius-full); background: rgba(0,0,0,.6); color: #fff; }
/* Seçim: dış çerçeve + sağ-üst oval check rozeti (hover'da boş rozet ipucu, seçilince dolu primary + beyaz tik). */
.oxgm-tile.is-sel { outline: 2px solid var(--ox-primary, var(--ox-accent)); outline-offset: -2px; border-color: var(--ox-primary, var(--ox-accent)); }
.oxgm-tile__check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ox-fg-faint); border: 1.5px solid var(--ox-border); opacity: 0; transition: opacity .12s, background-color .12s; pointer-events: none; }
.oxgm-tile:hover .oxgm-tile__check { opacity: 1; }
.oxgm-tile.is-sel .oxgm-tile__check { opacity: 1; background: var(--ox-primary, var(--ox-accent)); color: #fff; border-color: var(--ox-primary, var(--ox-accent)); }
.oxgm-pick-list { display: flex; flex-direction: column; }
.oxgm-pick-list .oxgm-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--ox-border); cursor: pointer; }
.oxgm-pick-list .oxgm-row:hover { background: var(--ox-surface-2); }
.oxgm-pick-list .oxgm-row img { width: 34px; height: 34px; border-radius: var(--ox-radius-sm); object-fit: cover; background: var(--ox-surface-2); }
.oxgm-pick-list .oxgm-row.is-sel { background: var(--ox-primary-subtle, var(--ox-info-subtle)); }
.oxgm-row__check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ox-surface-2); color: var(--ox-fg-faint); border: 1.5px solid var(--ox-border); flex: none; }
.oxgm-row.is-sel .oxgm-row__check { background: var(--ox-primary, var(--ox-accent)); color: #fff; border-color: var(--ox-primary, var(--ox-accent)); }
.oxgm-drop { margin-top: var(--ox-space-4); padding: var(--ox-space-6); border: 2px dashed var(--ox-border); border-radius: var(--ox-radius-md); text-align: center; color: var(--ox-fg-muted); font-size: var(--ox-text-sm); }
.oxgm-drop.is-drag { border-color: var(--ox-primary, var(--ox-accent)); background: var(--ox-primary-subtle, var(--ox-info-subtle)); }
@media (max-width: 600px) {
  .oxgm-backdrop { align-items: flex-end; padding: 0; }
  .oxgm-modal { max-width: 100%; border-radius: var(--ox-radius-lg) var(--ox-radius-lg) 0 0; }
  .oxgm-modal--viewer, .oxgm-modal--full { max-width: 100%; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* ---------- Toast deri (skin) varyantlari ----------
   Ornekler GERCEK OxToast dugumleridir (duration:0 ile uretilip buraya tasinir) ->
   markup driftı imkansiz. Duragan vitrinde giris animasyonu kapatilir ve geri-sayim
   cubugu gorunur kilinip %62'de DONDURULUR (canlida .has-timer animasyonla tuketir). */
.oxg-toastgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ox-space-6); }
.oxg-toastdemo { display: flex; flex-direction: column; gap: var(--ox-space-2); }
.oxg-toastdemo .ox-toast { animation: none; pointer-events: none; }
.oxg-toastdemo .ox-toast__close { display: none; }
.oxg-toastdemo .ox-toast__bar { display: block; transform: scaleX(0.62); }

/* ---------- Bilgi notu vitrini — 2026-09-10 ----------
   Stiller ARTIK burada degil: kazanan A/B/C `components/note.css` icinde `ox-note`
   olarak yasar. Galeri o GERCEK bileseni gosterir -> markup drifti imkansiz.
   Burada yalniz vitrin yerlesimi var; notun kendi dis boslugu vitrinde sifirlanir. */
.oxg-ncstack { display: grid; gap: var(--ox-space-4); }
.oxg-ncstack .ox-note { margin: 0; }
.oxg-nccase { display: grid; gap: var(--ox-space-2); }