/* ============================================================
   LX UTILITIES — Sınırlı, niyetli set
   "tailwind-lite" değil. Sadece sık + meşru utility'ler.
   ============================================================ */

/* ----- Display ----- */
.lx-block        { display: block; }
.lx-inline       { display: inline; }
.lx-inline-block { display: inline-block; }
.lx-flex         { display: flex; }
.lx-inline-flex  { display: inline-flex; }
.lx-grid         { display: grid; }
.lx-hidden       { display: none !important; }

/* ----- Flex helpers ----- */
.lx-flex-col          { flex-direction: column; }
.lx-flex-row-reverse  { flex-direction: row-reverse; }
.lx-flex-wrap         { flex-wrap: wrap; }
.lx-items-start       { align-items: flex-start; }
.lx-items-center      { align-items: center; }
.lx-items-end         { align-items: flex-end; }
.lx-items-stretch     { align-items: stretch; }
.lx-justify-start     { justify-content: flex-start; }
.lx-justify-center    { justify-content: center; }
.lx-justify-end       { justify-content: flex-end; }
.lx-justify-between   { justify-content: space-between; }
.lx-justify-around    { justify-content: space-around; }
.lx-flex-1            { flex: 1 1 0%; }
.lx-flex-none         { flex: none; }
.lx-flex-grow         { flex-grow: 1; }
.lx-flex-shrink-0     { flex-shrink: 0; }

/* ----- Gap (only the steps you actually use) ----- */
.lx-gap-1  { gap: var(--lx-space-1); }
.lx-gap-2  { gap: var(--lx-space-2); }
.lx-gap-3  { gap: var(--lx-space-3); }
.lx-gap-4  { gap: var(--lx-space-4); }
.lx-gap-5  { gap: var(--lx-space-5); }
.lx-gap-6  { gap: var(--lx-space-6); }
.lx-gap-8  { gap: var(--lx-space-8); }
.lx-gap-10 { gap: var(--lx-space-10); }
.lx-gap-12 { gap: var(--lx-space-12); }

/* ----- Text alignment ----- */
.lx-text-left   { text-align: left; }
.lx-text-center { text-align: center; }
.lx-text-right  { text-align: right; }

/* ----- Position ----- */
.lx-relative { position: relative; }
.lx-absolute { position: absolute; }
.lx-fixed    { position: fixed; }
.lx-sticky   { position: sticky; }

.lx-inset-0  { inset: 0; }
.lx-top-0    { top: 0; }
.lx-right-0  { right: 0; }
.lx-bottom-0 { bottom: 0; }
.lx-left-0   { left: 0; }

/* ----- Overflow ----- */
.lx-overflow-hidden { overflow: hidden; }
.lx-overflow-auto   { overflow: auto; }
.lx-overflow-x-auto { overflow-x: auto; }
.lx-overflow-y-auto { overflow-y: auto; }

/* ----- Z-index (named, semantic) ----- */
.lx-z-base    { z-index: var(--lx-z-base); }
.lx-z-raised  { z-index: var(--lx-z-raised); }
.lx-z-overlay { z-index: var(--lx-z-overlay); }
.lx-z-sticky  { z-index: var(--lx-z-sticky); }
.lx-z-header  { z-index: var(--lx-z-header); }

/* ----- Width helpers ----- */
.lx-w-full { width: 100%; }
.lx-w-auto { width: auto; }
.lx-h-full { height: 100%; }
.lx-h-screen { height: 100vh; height: 100svh; }
.lx-min-h-screen { min-height: 100vh; min-height: 100svh; }

/* ----- Margin auto (centering helpers) ----- */
.lx-mx-auto { margin-inline: auto; }
.lx-my-auto { margin-block: auto; }

/* ----- Margin top/bottom (vertical rhythm) ----- */
.lx-mt-2  { margin-top: var(--lx-space-2); }
.lx-mt-4  { margin-top: var(--lx-space-4); }
.lx-mt-6  { margin-top: var(--lx-space-6); }
.lx-mt-8  { margin-top: var(--lx-space-8); }
.lx-mt-12 { margin-top: var(--lx-space-12); }

.lx-mb-2  { margin-bottom: var(--lx-space-2); }
.lx-mb-4  { margin-bottom: var(--lx-space-4); }
.lx-mb-6  { margin-bottom: var(--lx-space-6); }
.lx-mb-8  { margin-bottom: var(--lx-space-8); }
.lx-mb-12 { margin-bottom: var(--lx-space-12); }

/* ----- Padding helpers (rare — most components own padding) ----- */
.lx-p-0   { padding: 0; }
.lx-p-2   { padding: var(--lx-space-2); }
.lx-p-4   { padding: var(--lx-space-4); }
.lx-p-6   { padding: var(--lx-space-6); }
.lx-p-8   { padding: var(--lx-space-8); }

/* ----- Border radius shortcuts ----- */
.lx-rounded-sm   { border-radius: var(--lx-radius-sm); }
.lx-rounded-md   { border-radius: var(--lx-radius-md); }
.lx-rounded-lg   { border-radius: var(--lx-radius-lg); }
.lx-rounded-xl   { border-radius: var(--lx-radius-xl); }
.lx-rounded-2xl  { border-radius: var(--lx-radius-2xl); }
.lx-rounded-full { border-radius: var(--lx-radius-full); }

/* ----- Shadow helpers ----- */
.lx-shadow-sm  { box-shadow: var(--lx-shadow-sm); }
.lx-shadow-md  { box-shadow: var(--lx-shadow-md); }
.lx-shadow-lg  { box-shadow: var(--lx-shadow-lg); }
.lx-shadow-xl  { box-shadow: var(--lx-shadow-xl); }
.lx-shadow-2xl { box-shadow: var(--lx-shadow-2xl); }
.lx-glow-sm    { box-shadow: var(--lx-glow-sm); }
.lx-glow-md    { box-shadow: var(--lx-glow-md); }
.lx-glow-lg    { box-shadow: var(--lx-glow-lg); }

/* ----- Surface backgrounds ----- */
.lx-bg-abyss    { background: var(--lx-surface-abyss); }
.lx-bg-deep     { background: var(--lx-surface-deep); }
.lx-bg-base     { background: var(--lx-surface-base); }
.lx-bg-elevated { background: var(--lx-surface-elevated); }
.lx-bg-raised   { background: var(--lx-surface-raised); }

.lx-bg-brand    { background: var(--lx-color-primary-600); }
.lx-bg-gradient-brand { background: var(--lx-gradient-brand); }
.lx-bg-gradient-deep  { background: var(--lx-gradient-deep); }

/* ----- Borders ----- */
.lx-border         { border: 1px solid var(--lx-border-base); }
.lx-border-subtle  { border-color: var(--lx-border-subtle); }
.lx-border-strong  { border-color: var(--lx-border-strong); }
.lx-border-brand   { border-color: var(--lx-border-brand); }
.lx-border-glow    { border-color: var(--lx-border-glow); }
.lx-border-t       { border-top:    1px solid var(--lx-border-base); }
.lx-border-b       { border-bottom: 1px solid var(--lx-border-base); }

/* ----- Cursor ----- */
.lx-cursor-pointer { cursor: pointer; }
.lx-cursor-default { cursor: default; }

/* ----- Pointer events ----- */
.lx-pointer-none { pointer-events: none; }

/* ----- Object fit (images) ----- */
.lx-object-cover    { object-fit: cover; }
.lx-object-contain  { object-fit: contain; }
.lx-object-center   { object-position: center; }

/* ----- Aspect ratio ----- */
.lx-aspect-square { aspect-ratio: 1 / 1; }
.lx-aspect-video  { aspect-ratio: 16 / 9; }
.lx-aspect-photo  { aspect-ratio: 4 / 3; }

/* ----- Backdrop / blur ----- */
.lx-backdrop-blur {
  backdrop-filter: var(--lx-backdrop-glass);
  -webkit-backdrop-filter: var(--lx-backdrop-glass);
}

/* ----- Responsive helpers (ONLY md/lg breakpoints, az ama net) ----- */
@media (max-width: 1023px) {
  .lx-hidden-md { display: none !important; }
}

@media (min-width: 1024px) {
  .lx-hidden-lg-up { display: none !important; }
}

@media (max-width: 767px) {
  .lx-hidden-sm { display: none !important; }
  .lx-flex-col-sm { flex-direction: column; }
  .lx-text-center-sm { text-align: center; }
}

/* ----- Print helpers ----- */
@media print {
  .lx-no-print { display: none !important; }
}

/* ----- Visually hidden (a11y), keeps accessibility ----- */
.lx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}