/* ★22.10 Numex Vitrin — ana sayfa galerisi (kurucu: "Kimi'deki gibi olsun; mevcut düzeni bozma, her şey yerli yerinde, sadece chat
   alanının altında"). Yalnız EKLER: .main'in sonuna #nxVitrin, AKIŞ DIŞINDA (position:absolute, ilk ekranın hemen altı) — böylece
   selamlama, yazma kutusu ve kartlar piksel piksel yerinde kalır (ölçüldü). Yalnız boş sohbet ekranında (main.nx-empty) görünür.
   Sayfanın kendi renk değişkenlerini (--nx-sf1, --nx-fg…) kullanır; tanımlı değilse yedek renk. */
#nxVitrin { display: none; }
.main.nx-empty #nxVitrin { display: block; position: absolute; z-index: 11; left: 0; right: 0; top: calc(100% - var(--nxv-peek, 60px)); padding: 0 14px 56px; }
.nxv-in { max-width: var(--input-max-w, 900px); margin: 0 auto; padding: 0 14px; }
body.vc-inline .main.nx-empty #nxVitrin { display: none; }
/* .input-area z-index:10 ve ekranın dibine kadar uzanır (alt dolgu boş) — galeri başlığı o boş dolgunun üstünde tıklanabilsin. */
/* Galeri ilk ekranın altında: boş ekran aşağı kaydırılabilir (Kimi gibi). Kaydırma çubuğu gizli — çubuk genişliği ortalamayı kaydırmasın. */
.main.nx-empty.nxv-on { overflow-y: auto; scrollbar-width: none; }
.main.nx-empty.nxv-on::-webkit-scrollbar { display: none; }

.nxv-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; flex-wrap: wrap; }
.nxv-title { font-size: 15px; font-weight: 600; color: var(--nx-fg, #e8eaf0); margin-right: 6px; }
.nxv-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.nxv-tab { height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--nx-fg2, #aab1c0); font: inherit; font-size: 14px; cursor: pointer; }
.nxv-tab:hover { color: var(--nx-fg, #e8eaf0); background: rgba(var(--nx-ink, 255,255,255), .06); }
.nxv-tab[aria-pressed="true"] { background: var(--nx-sf1, #161b26); color: var(--nx-fg, #e8eaf0); font-weight: 600; }
.nxv-all { margin-left: auto; font-size: 14px; color: var(--nx-fg2, #aab1c0); text-decoration: none; white-space: nowrap; }
.nxv-all:hover { color: var(--nx-fg, #e8eaf0); }

.nxv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nxv-card { position: relative; display: block; padding: 0; border: 1px solid rgba(var(--nx-ink, 255,255,255), .08); border-radius: 14px; overflow: hidden; background: var(--nx-sf1, #161b26); cursor: pointer; aspect-ratio: 16 / 10.5; text-align: left; font: inherit; color: #fff; transition: transform .18s ease, border-color .18s ease; }
.nxv-card:hover { transform: translateY(-2px); border-color: rgba(0, 201, 167, .45); }
.nxv-card:focus-visible { outline: 2px solid #00C9A7; outline-offset: 2px; }
/* Kimi gibi: kartın üstüne gelince "Benzerini yap" (dokunmatikte her zaman görünür, üstüne gelme yok) */
.nxv-quick { position: absolute; top: 10px; right: 10px; z-index: 2; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(242, 243, 245, .94); color: #0b0f19; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; opacity: 0; transform: translateY(-3px); transition: opacity .15s ease, transform .15s ease; }
.nxv-card:hover .nxv-quick, .nxv-card:focus-within .nxv-quick { opacity: 1; transform: none; }
.nxv-quick:hover { background: #fff; }
@media (hover: none) { .nxv-quick { opacity: 1; transform: none; height: 26px; padding: 0 9px; font-size: 11.5px; } }
.nxv-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.nxv-card pre { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0c0c0c; color: #d6d9e0; font: 6.5px/1.35 ui-monospace, Consolas, monospace; padding: 10px; white-space: pre; }
.nxv-cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.nxv-cap b { font-size: 13.5px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.nxv-badge { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 8px; background: rgba(0, 201, 167, .2); color: #5ef0d4; white-space: nowrap; }

/* Ayrıntı penceresi — Kimi düzeni: solda canlı önizleme, sağda istem + düğmeler */
.nxv-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(2, 6, 14, .72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 3vh 2vw; }
.nxv-box { width: min(1360px, 96vw); height: min(820px, 92vh); display: grid; grid-template-columns: minmax(0, 1fr) 330px; border-radius: 16px; overflow: hidden; background: var(--nx-sf1, #161b26); color: var(--nx-fg, #e8eaf0); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.nxv-prev { position: relative; background: #000; overflow: auto; }
.nxv-prev iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.nxv-prev img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #0b0f19; }
.nxv-prev pre { margin: 0; min-height: 100%; padding: 18px; background: #0c0c0c; color: #d6d9e0; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }
/* ★22.10 canlı demoda üst sağ uygulamanın kendi düğmelerinin (Çıkış) üstüne biniyordu → Kimi gibi alt sağ */
.nxv-open { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; text-decoration: none; }
.nxv-side { display: flex; flex-direction: column; min-height: 0; padding: 18px 18px 16px; border-left: 1px solid rgba(var(--nx-ink, 255,255,255), .08); }
.nxv-side-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.nxv-side-head h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.nxv-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--nx-fg2, #aab1c0); font-size: 20px; cursor: pointer; flex-shrink: 0; }
.nxv-x:hover { background: rgba(var(--nx-ink, 255,255,255), .08); color: var(--nx-fg, #e8eaf0); }
.nxv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.nxv-istem { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--nx-fg2, #c4c9d4); white-space: pre-wrap; }
.nxv-sonra { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--nx-fg3, #8b93a3); }
.nxv-istem.nxv-ek { padding-left: 10px; border-left: 2px solid rgba(var(--nx-ink, 255,255,255), .12); font-size: 13px; }
.nxv-araya { margin: -4px 0 12px; padding: 7px 9px; border: 1px dashed rgba(245, 158, 11, .45); border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: var(--nx-fg2, #c4c9d4); }
.nxv-araya b { color: #f5b544; font-weight: 600; }
.nxv-olcum { margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(var(--nx-ink, 255,255,255), .08); font-size: 12.5px; color: var(--nx-fg2, #c4c9d4); }
.nxv-olcum li { margin: 3px 0 0 16px; }
.nxv-meta { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 12.5px; color: var(--nx-fg3, #8b93a3); }
.nxv-meta .nxv-dot { width: 18px; height: 18px; border-radius: 50%; background: #00C9A7; display: grid; place-items: center; color: #04121f; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.nxv-demo { margin: 0 0 8px; padding: 8px 10px; border-radius: 9px; background: rgba(245, 181, 68, .1); border: 1px solid rgba(245, 181, 68, .3); font-size: 12.5px; line-height: 1.5; color: var(--nx-fg2, #c4c9d4); }
.nxv-demo b { color: #f5b544; font-weight: 600; }
.nxv-codex { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--nx-fg3, #8b93a3); }
.nxv-codex a { color: #3fe0c0; text-decoration: none; }
/* Vitrin sayfası kipi: galeri sayfanın içinde, akışta */
#nxVitrinSayfa .nxv-in { padding: 0; }
.nxv-not { margin: 0 0 6px; padding: 9px 11px; border-radius: 10px; background: rgba(0, 201, 167, .1); border: 1px solid rgba(0, 201, 167, .3); font-size: 13px; line-height: 1.5; color: var(--nx-fg, #e8eaf0); }
.nxv-not a, .nxv-link { color: #3fe0c0; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nxv-not a:hover, .nxv-link:hover { text-decoration: underline; }
.nxv-btn:disabled { opacity: .6; cursor: progress; }
.nxv-btn { width: 100%; height: 42px; margin-top: 8px; border: 0; border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.nxv-btn-2 { background: rgba(var(--nx-ink, 255,255,255), .08); color: var(--nx-fg, #e8eaf0); }
.nxv-btn-2:hover { background: rgba(var(--nx-ink, 255,255,255), .13); }
.nxv-btn-1 { background: #f2f3f5; color: #0b0f19; }
.nxv-btn-1:hover { background: #fff; }

@media (max-width: 1024px) { .nxv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  /* Telefonda yazma kutusu ekranın en altında — galeri tam ekranın altından başlar, kaydırınca görünür (kutunun üstüne binmez). */
  .main.nx-empty #nxVitrin { --nxv-peek: 0px; padding: 22px 6px 40px; }
  .nxv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nxv-all { margin-left: 0; }
  .nxv-cap { padding: 22px 8px 8px; }
  .nxv-cap b { font-size: 12px; }
  .nxv-badge { font-size: 10px; padding: 2px 5px; }
  .nxv-box { grid-template-columns: 1fr; grid-template-rows: 46% 54%; height: 92vh; }
  .nxv-side { border-left: 0; border-top: 1px solid rgba(var(--nx-ink, 255,255,255), .08); }
}

/* ★22.10 "Uygulama oluştur" (Kimi /build): yazma kutusunda + düğmesinin yanı. Yalnız EKLER; kip açıkken mavi, yanında "Tür seçin".
   Dar ekranda yalnız simge (mevcut düğmeler sıkışmasın). Sayfanın renk değişkenleri; yoksa yedek renk. */
.nxo-wrap { display: inline-flex; align-items: center; gap: 2px; position: relative; flex: 0 0 auto; }
.nxo-btn, .nxo-tur { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--nx-fg2, #aab1c0); font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.nxo-btn svg, .nxo-tur svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nxo-btn:hover, .nxo-tur:hover { color: var(--nx-fg, #e8eaf0); background: rgba(var(--nx-ink, 255,255,255), .06); }
/* Sitenin `#inputBox .ia-toolbar button { color: var(--nx-fg2) }` kuralı (CDP ile ölçüldü) bizimkini eziyor → aynı kökten. */
#inputBox .ia-toolbar #nxoBtn[aria-pressed="true"], #inputBox .ia-toolbar #nxoBtn[aria-pressed="true"]:hover { color: #4f8dff; }
#inputBox .ia-toolbar .nxo-menu button { color: var(--nx-fg, #e8eaf0); }
.nxo-tur-wrap { position: relative; display: inline-flex; }
.nxo-tur-wrap[hidden] { display: none; }
.nxo-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; min-width: 170px; padding: 6px; border-radius: 12px; border: 1px solid rgba(var(--nx-ink, 255,255,255), .1); background: var(--nx-sf1, #161b26); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.nxo-menu[hidden] { display: none; }
.nxo-menu button { display: block; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--nx-fg, #e8eaf0); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.nxo-menu button:hover { background: rgba(var(--nx-ink, 255,255,255), .07); }
.nxo-not { margin: 2px 4px 6px; padding: 8px 10px; border-radius: 10px; background: rgba(79, 141, 255, .1); color: var(--nx-fg, #e8eaf0); font-size: 13px; line-height: 1.45; }
.nxo-not[hidden] { display: none; }
.nxo-not a { color: #3fe0c0; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .nxo-btn span, .nxo-tur span { display: none; } .nxo-btn, .nxo-tur { padding: 0 8px; } }

/* ★22.10 (kurucu: "+ aşağı açılınca 'Numex'le yapılanlar · Tümü · Esnaf' menünün üstüne biniyor"): galeri z-index 11 (tıklanabilsin diye)
   yazma alanının (10) ÜSTÜNDE → aşağı açılan + menüsü galerinin altında kalıyordu. Yazma alanında bir menü AÇIKKEN galeri alta iner;
   menü kapalıyken eskisi gibi. Menünün açılma yönüne (script.js) dokunulmaz. */
.main.nx-empty:has(.input-area .open, .input-area [aria-expanded="true"], #nxoMenu:not([hidden])) #nxVitrin { z-index: 9; }