/* ==========================================================================
   Nex Bazaar AI — vitrin ve giriş ekranları teması ("nx").
   Koyu (varsayılan) ve açık tema. <html data-nx="dark|light"> ile seçilir; panel (layouts/app.php) bu dosyayı yüklemez.
   Mevcut Tailwind sınıfları, tema değişkenleri üzerinden yeniden renklendirilir; görünüm değişince tek yerden yönetilir.
   ========================================================================== */

:root {
  --nx-accent: #3866ff;
  --nx-accent-hi: #5d8bff;
  --nx-accent-sky: #84b5ff;
  --nx-accent-press: #204de8;
  --nx-accent-soft: rgba(56, 102, 255, .16);
  --nx-radius-lg: 24px;
  --nx-radius: 18px;
  --nx-radius-sm: 12px;
  --nx-ease: cubic-bezier(.22, 1, .36, 1);
  --nx-font: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Açık tema: mevcut görünümü korur, yazı tipi ve vurgu rengini hizalar ---------- */
html[data-nx="light"] {
  color-scheme: light;
  --nx-bg: #f6f7fb;
  --nx-surface: #ffffff;
  --nx-line: #e3e6ee;
  --nx-text: #0f172a;
  --nx-text-2: #475569;
}
html[data-nx="light"] body { background: #fff; }
html[data-nx="light"] .bg-white.rounded-2xl,
html[data-nx="light"] .bg-white.rounded-3xl { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* ---------- Ortak ---------- */
html[data-nx] body, html[data-nx] button, html[data-nx] input, html[data-nx] select, html[data-nx] textarea { font-family: var(--nx-font); }
html[data-nx] h1, html[data-nx] h2, html[data-nx] h3, html[data-nx] .font-display { font-family: var(--nx-font); letter-spacing: -.022em; }
html[data-nx] { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html[data-nx] { scroll-behavior: auto; } }
html[data-nx] :focus-visible { outline: 2px solid var(--nx-accent-hi); outline-offset: 2px; }

/* Tema düğmesi */
.nx-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--nx-line, #e3e6ee); background: transparent; color: inherit; cursor: pointer; transition: background .2s, border-color .2s;
}
.nx-toggle:hover { background: rgba(127, 127, 127, .14); }
.nx-toggle svg { width: 18px; height: 18px; }
.nx-toggle .nx-i-sun { display: none; }
html[data-nx="dark"] .nx-toggle .nx-i-sun { display: block; }
html[data-nx="dark"] .nx-toggle .nx-i-moon { display: none; }

/* ==========================================================================
   KOYU TEMA
   ========================================================================== */
html[data-nx="dark"] {
  color-scheme: dark;
  --nx-bg: #0a0b0d;
  --nx-bg-2: #0e1015;
  --nx-deep: #07080b;
  --nx-surface: #15171c;
  --nx-surface-2: #1c1f26;
  --nx-surface-3: #262a33;
  --nx-line: rgba(255, 255, 255, .09);
  --nx-line-2: rgba(255, 255, 255, .16);
  --nx-text: #f4f5f7;
  --nx-text-2: #a3a9b6;
  --nx-text-3: #8a91a0;
  background: var(--nx-bg);
}
html[data-nx="dark"] body {
  color: var(--nx-text-2);
  background:
    radial-gradient(900px 480px at 85% -120px, rgba(56, 102, 255, .16), transparent 70%),
    radial-gradient(700px 420px at -5% 140px, rgba(124, 58, 237, .10), transparent 70%),
    var(--nx-bg);
  background-repeat: no-repeat;
}

/* --- Zeminler --- */
html[data-nx="dark"] .bg-white { background-color: var(--nx-surface); }
html[data-nx="dark"] .bg-white\/90, html[data-nx="dark"] .bg-white\/95 { background-color: rgba(10, 11, 13, .82); }
html[data-nx="dark"] .bg-white\/5, html[data-nx="dark"] .bg-white\/10, html[data-nx="dark"] .bg-white\/15 { background-color: rgba(255, 255, 255, .07); }
html[data-nx="dark"] .bg-slate-50, html[data-nx="dark"] .bg-slate-50\/70, html[data-nx="dark"] .bg-brand-50, html[data-nx="dark"] .bg-brand-50\/50 { background-color: var(--nx-bg-2); }
html[data-nx="dark"] .bg-slate-100, html[data-nx="dark"] .bg-slate-100\/80 { background-color: var(--nx-surface-2); }
html[data-nx="dark"] .bg-slate-200 { background-color: var(--nx-surface-3); }
html[data-nx="dark"] .bg-slate-900, html[data-nx="dark"] .bg-brand-600 { background-color: var(--nx-accent); color: #fff; }
html[data-nx="dark"] .bg-slate-950 { background-color: var(--nx-deep); }
html[data-nx="dark"] .bg-black\/50 { background-color: rgba(0, 0, 0, .55); }
html[data-nx="dark"] .bg-blue-600, html[data-nx="dark"] .bg-indigo-600 { background-color: var(--nx-accent); }
html[data-nx="dark"] .bg-blue-50, html[data-nx="dark"] .bg-blue-50\/50, html[data-nx="dark"] .bg-blue-50\/60, html[data-nx="dark"] .bg-indigo-50, html[data-nx="dark"] .bg-indigo-100 { background-color: var(--nx-accent-soft); }
html[data-nx="dark"] .bg-emerald-50, html[data-nx="dark"] .bg-emerald-50\/50 { background-color: rgba(47, 163, 95, .12); }
html[data-nx="dark"] .bg-emerald-100 { background-color: rgba(47, 163, 95, .2); }
html[data-nx="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, .10); }
html[data-nx="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, .18); }
html[data-nx="dark"] .bg-rose-50, html[data-nx="dark"] .bg-red-50 { background-color: rgba(244, 63, 94, .12); }
html[data-nx="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, .12); }

/* Düğme / etiket: koyu zemine uygun açık yazı olan beyaz düğmeler vurgu rengine döner */
html[data-nx="dark"] .bg-white.text-slate-950, html[data-nx="dark"] .bg-white.text-brand-700 { background-color: var(--nx-accent); color: #fff; box-shadow: 0 10px 30px -10px rgba(56, 102, 255, .6); }
html[data-nx="dark"] .bg-white.text-slate-950:hover, html[data-nx="dark"] .bg-white.text-brand-700:hover { background-color: var(--nx-accent-press); }
html[data-nx="dark"] .hover\:bg-black:hover, html[data-nx="dark"] .hover\:bg-slate-800:hover, html[data-nx="dark"] .hover\:bg-blue-700:hover, html[data-nx="dark"] .hover\:bg-brand-700:hover { background-color: var(--nx-accent-press); }
html[data-nx="dark"] .hover\:bg-slate-50:hover, html[data-nx="dark"] .hover\:bg-slate-100:hover, html[data-nx="dark"] .hover\:bg-brand-50:hover { background-color: rgba(255, 255, 255, .06); }
html[data-nx="dark"] .hover\:bg-indigo-50:hover { background-color: var(--nx-accent-soft); }
/* Açık renkli (amber / zümrüt) zemin üzerindeki koyu yazılar */
html[data-nx="dark"] .bg-emerald-400.text-slate-950, html[data-nx="dark"] .from-amber-300.text-slate-950, html[data-nx="dark"] .bg-amber-300.text-slate-950 { color: #0a0b0d; }

/* Gradyan başlangıçları (açık zemin kullananlar) */
html[data-nx="dark"] .from-blue-50, html[data-nx="dark"] .from-blue-50\/70, html[data-nx="dark"] .from-indigo-50, html[data-nx="dark"] .from-indigo-50\/70, html[data-nx="dark"] .from-white { --tw-gradient-from: rgba(56, 102, 255, .10) var(--tw-gradient-from-position); --tw-gradient-to: rgba(56, 102, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-nx="dark"] .via-white, html[data-nx="dark"] .via-white\/85, html[data-nx="dark"] .via-indigo-50, html[data-nx="dark"] .via-indigo-50\/60, html[data-nx="dark"] .via-fuchsia-100\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(21, 23, 28, .6) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-nx="dark"] .to-white, html[data-nx="dark"] .to-blue-50 { --tw-gradient-to: var(--nx-bg) var(--tw-gradient-to-position); }

/* --- Yazı renkleri --- */
html[data-nx="dark"] .text-slate-950, html[data-nx="dark"] .text-slate-900, html[data-nx="dark"] .text-brand-600, html[data-nx="dark"] .text-brand-700, html[data-nx="dark"] .text-brand-900 { color: var(--nx-text); }
html[data-nx="dark"] .text-slate-800, html[data-nx="dark"] .text-slate-700 { color: #d5d8df; }
html[data-nx="dark"] .text-slate-600, html[data-nx="dark"] .text-slate-500, html[data-nx="dark"] .text-brand-500 { color: var(--nx-text-2); }
html[data-nx="dark"] .text-slate-400, html[data-nx="dark"] .text-slate-300 { color: var(--nx-text-3); }
html[data-nx="dark"] .text-blue-600, html[data-nx="dark"] .text-blue-700, html[data-nx="dark"] .text-indigo-600, html[data-nx="dark"] .text-indigo-700, html[data-nx="dark"] .text-brand-400 { color: var(--nx-accent-sky); }
html[data-nx="dark"] .text-emerald-500, html[data-nx="dark"] .text-emerald-600, html[data-nx="dark"] .text-emerald-700, html[data-nx="dark"] .text-emerald-800, html[data-nx="dark"] .text-emerald-900 { color: #6ee7a8; }
html[data-nx="dark"] .text-amber-700, html[data-nx="dark"] .text-amber-800, html[data-nx="dark"] .text-amber-900, html[data-nx="dark"] .text-amber-900\/80 { color: #fbbf24; }
html[data-nx="dark"] .text-rose-500, html[data-nx="dark"] .text-rose-700, html[data-nx="dark"] .text-rose-800, html[data-nx="dark"] .text-red-800 { color: #fda4af; }
html[data-nx="dark"] .text-teal-600 { color: #5eead4; }
html[data-nx="dark"] .text-sky-800 { color: #7dd3fc; }
html[data-nx="dark"] .hover\:text-brand-700:hover, html[data-nx="dark"] .hover\:text-slate-900:hover, html[data-nx="dark"] .hover\:text-slate-950:hover, html[data-nx="dark"] .hover\:text-slate-800:hover { color: #fff; }
html[data-nx="dark"] .hover\:text-blue-700:hover, html[data-nx="dark"] .hover\:text-indigo-700:hover, html[data-nx="dark"] .hover\:text-indigo-900:hover, html[data-nx="dark"] .group:hover .group-hover\:text-blue-700, html[data-nx="dark"] .group:hover .group-hover\:text-indigo-700 { color: #bcd2ff; }
/* Koyu zemin üstündeki beyaz düğme yazısı değişmesin */
html[data-nx="dark"] .bg-slate-900.text-white, html[data-nx="dark"] .bg-blue-600.text-white, html[data-nx="dark"] .bg-brand-600.text-white { color: #fff; }

/* --- Çizgiler --- */
html[data-nx="dark"] .border-slate-100, html[data-nx="dark"] .border-slate-200, html[data-nx="dark"] .border-slate-200\/70, html[data-nx="dark"] .border-slate-800 { border-color: var(--nx-line); }
html[data-nx="dark"] .border-slate-300 { border-color: var(--nx-line-2); }
html[data-nx="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, .35); }
html[data-nx="dark"] .border-emerald-200 { border-color: rgba(47, 163, 95, .4); }
html[data-nx="dark"] .border-rose-200, html[data-nx="dark"] .border-red-200 { border-color: rgba(244, 63, 94, .4); }
html[data-nx="dark"] .border-sky-200, html[data-nx="dark"] .border-indigo-100, html[data-nx="dark"] .border-blue-100 { border-color: rgba(56, 102, 255, .35); }
html[data-nx="dark"] .ring-slate-200, html[data-nx="dark"] .ring-slate-900\/10, html[data-nx="dark"] .ring-blue-200 { --tw-ring-color: var(--nx-line-2); }
html[data-nx="dark"] .ring-slate-300, html[data-nx="dark"] .hover\:ring-slate-300:hover, html[data-nx="dark"] .hover\:ring-slate-400:hover { --tw-ring-color: rgba(255, 255, 255, .28); }
html[data-nx="dark"] .ring-slate-900 { --tw-ring-color: var(--nx-accent); }
html[data-nx="dark"] .hover\:border-slate-900:hover, html[data-nx="dark"] .hover\:border-brand-500:hover, html[data-nx="dark"] .hover\:border-indigo-200:hover { border-color: var(--nx-accent-hi); }
html[data-nx="dark"] .hover\:border-slate-300:hover, html[data-nx="dark"] .hover\:border-slate-600:hover { border-color: rgba(255, 255, 255, .28); }
html[data-nx="dark"] .border-brand-500 { border-color: var(--nx-accent-hi); }
html[data-nx="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html[data-nx="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--nx-line); }
html[data-nx="dark"] .shadow-slate-900\/5, html[data-nx="dark"] .shadow-slate-900\/10, html[data-nx="dark"] .shadow-slate-900\/15, html[data-nx="dark"] .hover\:shadow-slate-900\/5:hover, html[data-nx="dark"] .hover\:shadow-slate-900\/10:hover { --tw-shadow-color: rgba(0, 0, 0, .55); --tw-shadow: var(--tw-shadow-colored); }

/* --- Form alanları --- */
html[data-nx="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), html[data-nx="dark"] select, html[data-nx="dark"] textarea {
  background-color: var(--nx-surface-2); color: var(--nx-text); border-color: var(--nx-line-2);
}
html[data-nx="dark"] input::placeholder, html[data-nx="dark"] textarea::placeholder { color: #737a89; }
html[data-nx="dark"] input:-webkit-autofill { -webkit-text-fill-color: var(--nx-text); box-shadow: 0 0 0 100px var(--nx-surface-2) inset; }
html[data-nx="dark"] select option { background: var(--nx-surface-2); color: var(--nx-text); }
html[data-nx="dark"] .bg-white\/15 input, html[data-nx="dark"] input.bg-white\/15 { background-color: rgba(255, 255, 255, .12); }
html[data-nx="dark"] .focus\:ring-indigo-500:focus, html[data-nx="dark"] .focus\:ring-blue-500:focus { --tw-ring-color: var(--nx-accent-hi); }

/* --- Bölüm bantları ve kartlar --- */
html[data-nx="dark"] section.bg-slate-50, html[data-nx="dark"] section.bg-slate-50\/70 { background-image: linear-gradient(180deg, rgba(56, 102, 255, .035), transparent 30%); }
html[data-nx="dark"] .rounded-2xl.bg-white, html[data-nx="dark"] .rounded-3xl.bg-white, html[data-nx="dark"] .rounded-\[1\.75rem\].bg-white, html[data-nx="dark"] figure.rounded-2xl {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-nx="dark"] a.rounded-2xl.bg-white:hover, html[data-nx="dark"] a.rounded-3xl.bg-white:hover { background-color: var(--nx-surface-2); }
html[data-nx="dark"] figure.bg-white { background-color: var(--nx-surface-2); }
html[data-nx="dark"] figure img { filter: none; }
html[data-nx="dark"] table .bg-slate-50, html[data-nx="dark"] thead.bg-slate-50 { background-color: var(--nx-surface-2); }
html[data-nx="dark"] details[open] { box-shadow: 0 10px 30px -14px rgba(56, 102, 255, .4); }
html[data-nx="dark"] hr { border-color: var(--nx-line); }
html[data-nx="dark"] .prose, html[data-nx="dark"] .prose p, html[data-nx="dark"] .prose li { color: var(--nx-text-2); }
html[data-nx="dark"] .prose h1, html[data-nx="dark"] .prose h2, html[data-nx="dark"] .prose h3, html[data-nx="dark"] .prose strong, html[data-nx="dark"] .prose b { color: var(--nx-text); }
html[data-nx="dark"] .prose a { color: var(--nx-accent-sky); }
html[data-nx="dark"] pre, html[data-nx="dark"] code { background-color: rgba(255, 255, 255, .06); }

/* --- Üst çubuk, menü, alt bilgi --- */
html[data-nx="dark"] header.sticky { backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border-color: rgba(255, 255, 255, .07); }
html[data-nx="dark"] header .shadow-2xl { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); }
html[data-nx="dark"] #mnav { background: var(--nx-bg); }
html[data-nx="dark"] footer { background-color: var(--nx-deep); border-top: 1px solid var(--nx-line); }
html[data-nx="dark"] footer .text-slate-400, html[data-nx="dark"] footer .text-slate-500 { color: var(--nx-text-3); }
html[data-nx="dark"] footer .text-slate-300 { color: #c3c8d2; }
html[data-nx="dark"] .grad { background: linear-gradient(135deg, #0d1330 0%, #131a3d 55%, #0a0b0d 100%); }

/* --- Sayfa üstü başlık bandı (ayrılan sayfalar) --- */
html[data-nx="dark"] .nx-page-head { background: radial-gradient(60% 120% at 50% 0%, rgba(56, 102, 255, .16), transparent 70%), var(--nx-bg-2); }

/* ==========================================================================
   GİRİŞ / KAYIT EKRANLARI (layouts/auth.php)
   ========================================================================== */
.nx-auth-aside {
  background:
    radial-gradient(70% 55% at 15% 0%, rgba(56, 102, 255, .55), transparent 65%),
    radial-gradient(60% 50% at 100% 100%, rgba(124, 58, 237, .45), transparent 65%),
    #080a14;
  position: relative; overflow: hidden;
}
.nx-auth-aside::after { /* ince nokta ızgarası */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
}
.nx-auth-aside > * { position: relative; z-index: 1; }
html[data-nx="dark"] body.nx-auth { background: var(--nx-bg); }
html[data-nx="dark"] .nx-auth-pane { background: radial-gradient(600px 360px at 80% -80px, rgba(56, 102, 255, .14), transparent 70%), var(--nx-bg); }
html[data-nx="dark"] body.nx-auth .input, html[data-nx="dark"] body.nx-auth .input:focus { background-color: var(--nx-surface-2); color: var(--nx-text); border-color: var(--nx-line-2); }
html[data-nx="dark"] body.nx-auth .input:focus { border-color: var(--nx-accent-hi); box-shadow: 0 0 0 3px rgba(93, 139, 255, .25); }
html[data-nx="dark"] body.nx-auth .label { color: #d5d8df; }
html[data-nx="dark"] body.nx-auth .btn-primary { background: var(--nx-accent); color: #fff; border-color: transparent; border-radius: var(--nx-radius-sm); box-shadow: 0 12px 30px -12px rgba(56, 102, 255, .7); }
html[data-nx="dark"] body.nx-auth .btn-primary:hover { background: var(--nx-accent-press); }
html[data-nx="dark"] body.nx-auth .btn-secondary { background: var(--nx-surface-2); color: var(--nx-text); border: 1px solid var(--nx-line-2); border-radius: var(--nx-radius-sm); }
html[data-nx="dark"] body.nx-auth .btn-secondary:hover { background: var(--nx-surface-3); }
html[data-nx="dark"] body.nx-auth a.text-brand-600 { color: var(--nx-accent-sky); }
html[data-nx="dark"] body.nx-auth .bg-slate-200 { background-color: var(--nx-line-2); }
html[data-nx="light"] body.nx-auth .btn-primary { background: var(--nx-accent); border-radius: var(--nx-radius-sm); }
html[data-nx="light"] body.nx-auth .btn-primary:hover { background: var(--nx-accent-press); }
html[data-nx="light"] body.nx-auth a.text-brand-600 { color: var(--nx-accent); }
body.nx-auth .input { border-radius: var(--nx-radius-sm); }

/* ---------- Hafif hareket: yalnız kullanıcı izin veriyorsa ---------- */
.nx-pop { transition: transform .5s var(--nx-ease), box-shadow .5s var(--nx-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .nx-pop:hover { transform: translateY(-3px); } }

/* ---------- Sağdan sola (Arapça) ---------- */
[dir="rtl"] .nx-toggle { margin-inline-start: 0; }
[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, 'Plus Jakarta Sans', Inter, sans-serif; }
html[data-nx="dark"] .nb-credit a:hover { color: #fff; }
html[data-nx] body { letter-spacing: 0; }
html[data-nx] h1, html[data-nx] h2, html[data-nx] h3, html[data-nx] .font-display { letter-spacing: -.02em; }
html[data-nx="dark"] button.bg-slate-950, html[data-nx="dark"] a.bg-slate-950 { background-color: var(--nx-accent); } html[data-nx="dark"] button.bg-slate-950:hover { background-color: var(--nx-accent-press); }