/* ============================================================================
   panel.css — panel SPA'sının TEK stil kaynağı.

   Bölümler: 1 token'lar · 2 taban · 3 .ui-* bileşenler · 4 kabuk · 5 üçüncü parti.
   Kural: düz CSS, renk yalnız hsl(var(--token)); @apply yok (yerelde Play CDN).
   Yerel ve üretim aynı dosyayı link'ler (index.html, build bölgesi dışında).
   Spec: docs/superpowers/specs/2026-09-14-panel-ui-katmani-design.md §5
   ============================================================================ */

/* ─── 1. Token'lar ──────────────────────────────────────────────────────── */
:root {
  --background: 218 33% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --primary: 222 60% 50%;
  --primary-foreground: 210 40% 98%;
  --secondary: 214 32% 92%;
  --secondary-foreground: 222 47% 11%;
  --muted: 214 28% 94%;
  --muted-foreground: 215 16% 42%;
  --accent: 205 100% 94%;
  --accent-foreground: 222 47% 11%;
  --border: 214 31% 87%;
  --input: 214 31% 87%;
  --input-bg: 220 43% 98.6%;  /* form alanı iç rengi: #f5f7fa80'in beyaz kart üstündeki opak karşılığı (#fafbfd) */
  /* select oku: --muted-foreground (215 16% 42%) — arka plan SVG'si CSS değişkeni okuyamaz, bu yüzden tema başına token */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a687c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --ring: 222 60% 50%;
  --danger: 0 84% 60%;
  --danger-foreground: 210 40% 98%;
  /* Dolu yüzeyin yazısı: beyaz, açık temada bu zeminlerde 2.1–3.1 kontrast veriyordu; koyu ton okunur
     (warning 7.15, success 4.87, info 5.35). Koyu temada zaten koyu yazı kullanılıyor. */
  --success: 158 64% 40%;
  --success-foreground: 158 80% 10%;
  --warning: 38 92% 50%;
  --warning-foreground: 30 90% 12%;
  --info: 199 89% 48%;
  --info-foreground: 199 90% 12%;
  /* Durum renklerinin YAZI tonu: zemin tonu (yukarıdakiler) metinde açık temada 1.9–3.8 kontrast veriyordu.
     Bu tonlar kart, sayfa zemini, muted zemin ve soft rozet/uyarı zeminlerinin hepsinde >= 4.8. */
  --danger-text: 0 74% 42%;
  --success-text: 160 84% 25%;
  --warning-text: 32 85% 32%;
  --info-text: 201 90% 32%;
  /* Kart gölgesi: iki katman, ön plan renginden türetilmiş (sert siyah değil). */
  --shadow-card: 0 1px 2px hsl(222 47% 11% / .06), 0 4px 16px hsl(222 47% 11% / .05);
  --radius: 0.5rem;
}
.dark {
  --background: 224 37% 10%;
  --foreground: 210 40% 96%;
  --card: 224 32% 13%;
  --card-foreground: 210 40% 96%;
  --primary: 213 75% 72%;
  --primary-foreground: 224 37% 10%;
  --secondary: 223 25% 19%;
  --secondary-foreground: 210 40% 96%;
  --muted: 223 24% 18%;
  --muted-foreground: 215 20% 72%;
  --accent: 221 25% 20%;
  --accent-foreground: 210 40% 96%;
  --border: 223 20% 24%;
  --input: 223 20% 24%;
  --input-bg: 224 34% 11.5%;
  /* select oku: --muted-foreground (215 20% 72%) — arka plan SVG'si CSS değişkeni okuyamaz, bu yüzden tema başına token */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9b5c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --ring: 213 75% 72%;
  --danger: 0 72% 58%;
  --danger-foreground: 210 40% 98%;
  --success: 158 64% 52%;
  --success-foreground: 224 37% 10%;
  --warning: 38 92% 60%;
  --warning-foreground: 224 37% 10%;
  --info: 199 89% 60%;
  --info-foreground: 224 37% 10%;
  /* Koyu temada zemin tonları metinde zaten 6.5+ veriyor; yalnız danger düşüktü (rozette 3.65). */
  --danger-text: 0 85% 70%;
  --success-text: 158 64% 52%;
  --warning-text: 38 92% 60%;
  --info-text: 199 89% 60%;
  --shadow-card: 0 1px 2px hsl(0 0% 0% / .3), 0 4px 16px hsl(0 0% 0% / .25);
}

/* ─── 2. Taban ──────────────────────────────────────────────────────────── */
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Form alanlarının iç rengi TEK kaynak: --input-bg. :where() özgüllüğü 0 — sayfadaki bilinçli sınıf
   (bg-transparent, disabled/readonly görünümü) hâlâ kazanır; sınıfsız alan tarayıcı beyazı yerine bunu alır. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) { background-color: hsl(var(--input-bg)); }
/* Chrome otomatik doldurmada kendi mavisini !important ile basıyor (background ezilemez); aynı token'lı iç gölge
   üstünü örter, tema değişince de izler. Odakta listeye .ui-input:focus / focus:ring-2 ile aynı halka eklenir. */
input:-webkit-autofill { box-shadow: 0 0 0 1000px hsl(var(--input-bg)) inset; -webkit-text-fill-color: hsl(var(--foreground)); }
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px hsl(var(--input-bg)) inset, 0 0 0 2px hsl(var(--primary) / .2); }

/* Alpine x-show öğeleri Alpine yüklenene kadar gizli kalsın (modal FOUC önlemi) */
[x-cloak] { display: none !important; }

/* Gömülü mod — kabuğun <head>'indeki ?embed=1 işareti. Kabuk yok, yalnız içerik. */
.is-embed #sidebar,
.is-embed header { display: none; }
.is-embed #main-content { padding: 0; }

.skip-link { position: absolute; top: -999px; left: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: .75rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.skip-link:focus { top: 1rem; }

/* ─── 3. Bileşenler (.ui-*) — spec §5.3 ─────────────────────────────────
   Modifier yazımı: class="ui-btn ui-btn-outline ui-btn-sm". Durum: .is-active, .is-on, .is-invalid, .is-num.
   Varyantların hover'ı burada AÇIKÇA yazılır: .ui-btn:hover (0,2,0) tek sınıflı varyantı (0,1,0) ezer. */

/* Button */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--radius); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .875rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, opacity .15s; }
.ui-btn:hover { background: hsl(var(--primary) / .9); }
.ui-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ui-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.ui-btn-secondary:hover { background: hsl(var(--secondary) / .8); }
.ui-btn-outline { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.ui-btn-outline:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.ui-btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.ui-btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.ui-btn-danger { background: hsl(var(--danger) / .12); color: hsl(var(--danger-text)); border-color: hsl(var(--danger) / .3); }
.ui-btn-danger:hover { background: hsl(var(--danger) / .2); }
.ui-btn-link { height: auto; padding: 0; background: transparent; color: hsl(var(--primary)); }
.ui-btn-link:hover { background: transparent; text-decoration: underline; }
.ui-btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.ui-btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.ui-btn-icon { width: 2.25rem; padding: 0; }
.ui-btn-icon.ui-btn-sm { width: 2rem; }

/* Input ailesi — eski $inputCls/$labelCls/$cellCls PHP değişkenlerinin yerini alan paylaşılan sınıflar */
.ui-input { height: 2.25rem; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--input-bg)); padding: 0 .75rem; font-size: .875rem; color: hsl(var(--foreground)); outline: none; transition: border-color .15s, box-shadow .15s; }
.ui-input::placeholder { color: hsl(var(--muted-foreground)); }
.ui-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }
.ui-input:disabled { opacity: .5; cursor: not-allowed; }
.ui-input.is-invalid { border-color: hsl(var(--danger)); }
/* Select — tek seçimli select'ler yumuşak görünüm (2026-09-30; onaylı örnek). multiple / size taşıyan liste kutularına
   dokunulmaz. Kapalı hâl BÜTÜN tarayıcılarda: tarayıcının oku yerine --select-chevron (sönük ince ok). Açılan liste,
   özelleştirilebilir select'i destekleyen tarayıcıda (Chromium) kart görünümü alır — aşağıdaki @supports bloğu;
   desteklemeyen tarayıcıda standart liste açılır, hiçbir şey bozulmaz. Mobilde telefonun kendi seçim ekranı açılır. */
select:is(.ui-input, .ui-cell):not([multiple], [size]) { appearance: none; background-image: var(--select-chevron); background-repeat: no-repeat; background-size: 1rem 1rem; background-position: right .625rem center; padding-right: 2.25rem; cursor: pointer; text-overflow: ellipsis; }
select.ui-cell:not([multiple], [size]) { background-size: .875rem .875rem; background-position: right .375rem center; padding-right: 1.5rem; }
/* Hover yalnız kenarlığı hafif koyulaştırır; odaklı (mavi) ve hatalı (kırmızı) kenarlığı ezmez. */
select:is(.ui-input, .ui-cell):not([multiple], [size]):hover:not(:disabled, :focus, .is-invalid) { border-color: hsl(var(--muted-foreground) / .45); }
select:is(.ui-input, .ui-cell):not([multiple], [size]):disabled { cursor: not-allowed; background-color: hsl(var(--muted)); }
/* "… seçin" / "Tümü" gibi boş değerli seçenek seçiliyken metin sönük görünür. */
select:is(.ui-input, .ui-cell):has(option[value=""]:checked) { color: hsl(var(--muted-foreground)); }
select:is(.ui-input, .ui-cell) option { color: hsl(var(--foreground)); }
/* Birleşik alan (tutar + para birimi): grubun padding-right .5rem kuralı (0,3,0) üstteki genel kuralı (0,2,1) yendiği
   için ok metnin üstüne binerdi. */
.ui-input-group > select.ui-input:last-child:not([multiple], [size]) { padding-right: 2rem; }
@supports (appearance: base-select) {
  select:is(.ui-input, .ui-cell):not([multiple], [size]),
  select:is(.ui-input, .ui-cell):not([multiple], [size])::picker(select) { appearance: base-select; }
  /* Bu kipte select düğme gibi çizilir ve içerik kendiliğinden dikey ortalanmaz → flex. Ok zeminden değil
     ::picker-icon'dan gelir ve liste açıkken yukarı döner. */
  select:is(.ui-input, .ui-cell):not([multiple], [size]) { display: flex; align-items: center; background-image: none; padding-right: .625rem; }
  select.ui-cell:not([multiple], [size]) { padding-right: .375rem; }
  .ui-input-group > select.ui-input:last-child:not([multiple], [size]) { padding-right: .5rem; }
  select:is(.ui-input, .ui-cell):not([multiple], [size])::picker-icon { content: ""; width: 1rem; height: 1rem; margin-inline-start: auto; background: var(--select-chevron) center / 1rem 1rem no-repeat; transition: rotate .15s ease; }
  select.ui-cell:not([multiple], [size])::picker-icon { width: .875rem; height: .875rem; background-size: .875rem .875rem; }
  select:is(.ui-input, .ui-cell):not([multiple], [size]):open::picker-icon { rotate: 180deg; }
  select:is(.ui-input, .ui-cell)::picker(select) { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + .25rem); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 12px 32px -12px rgb(15 23 42 / .28); padding: .25rem; margin-block: .25rem; max-height: 17rem; scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
  select:is(.ui-input, .ui-cell) option { display: flex; align-items: center; gap: .5rem; padding: .4rem .625rem; border-radius: calc(var(--radius) - .125rem); font-size: .875rem; cursor: pointer; transition: background-color .1s ease; }
  select.ui-cell option { font-size: .8125rem; padding: .3rem .5rem; }
  select:is(.ui-input, .ui-cell) option:is(:hover, :focus-visible) { background: hsl(var(--primary) / .08); outline: none; }
  select:is(.ui-input, .ui-cell) option:checked { background: hsl(var(--primary) / .12); font-weight: 500; }
  select:is(.ui-input, .ui-cell) option::checkmark { order: 1; margin-inline-start: auto; color: hsl(var(--primary)); }
  select:is(.ui-input, .ui-cell) option:disabled { opacity: .5; cursor: not-allowed; }
  select:is(.ui-input, .ui-cell) optgroup { padding-top: .25rem; font-size: .75rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
}
@media (prefers-reduced-motion: reduce) {
  select:is(.ui-input, .ui-cell)::picker-icon, select:is(.ui-input, .ui-cell) option { transition: none; }
}
textarea.ui-input { height: auto; min-height: 5rem; padding: .5rem .75rem; resize: vertical; }
.ui-field-error { margin-top: .25rem; font-size: .75rem; color: hsl(var(--danger-text)); }
.ui-label { margin-bottom: .25rem; display: block; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
input[type="checkbox"].ui-checkbox, input[type="radio"].ui-checkbox { width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); cursor: pointer; }
.ui-cell { height: 2rem; width: 100%; min-width: 7rem; border-radius: .375rem; border: 1px solid hsl(var(--border)); background: hsl(var(--input-bg)); padding: 0 .5rem; font-size: .75rem; color: hsl(var(--foreground)); outline: none; transition: border-color .15s, box-shadow .15s; }
.ui-cell:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }
/* Sağına birleşik bir seçim kutusu alan input (maliyet + para birimi gibi) */
.ui-input-group { display: flex; }
.ui-input-group > .ui-input:first-child { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-input-group > .ui-input:last-child { flex: 0 0 auto; width: auto; padding-right: .5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
/* İkonlu alan — <div class="ui-input-icon"><svg|i …></svg><input class="ui-input"></div>.
   Sınıf olmasının sebebi: utility (pl-9) .ui-input'un padding'ini ezemez — üretimde panel.css Tailwind'den SONRA yüklenir. */
.ui-input-icon { position: relative; }
.ui-input-icon > svg, .ui-input-icon > i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.ui-input-icon > .ui-input { padding-left: 2.25rem; }
/* Aç/kapa anahtarı — <button type="button" role="switch" class="ui-switch" :class="acikMi && 'is-on'" :aria-checked="acikMi">
   Kapalı KIRMIZI (pasif), açık YEŞİL (aktif). Açıkken yazı SOLDA + topuz sağda, kapalıyken tersi. */
.ui-switch { position: relative; display: inline-flex; height: 1.75rem; min-width: 5.25rem; flex-shrink: 0; cursor: pointer; align-items: center; justify-content: flex-end; gap: .5rem; border-radius: 9999px; border: 0; padding: 0 .75rem 0 2rem; background: hsl(var(--danger) / .15); color: hsl(var(--danger-text)); font-size: .75rem; font-weight: 600; line-height: 1; transition: background-color .15s, color .15s; }
.ui-switch:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.ui-switch.is-on { justify-content: flex-start; padding: 0 2rem 0 .75rem; background: hsl(var(--success) / .15); color: hsl(var(--success-text)); }
.ui-switch::after { content: ""; position: absolute; left: .25rem; height: 1.25rem; width: 1.25rem; border-radius: 9999px; background: currentColor; transition: left .15s; }
.ui-switch.is-on::after { left: calc(100% - 1.5rem); }

/* Card */
.ui-card { border-radius: calc(var(--radius) + .25rem); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: var(--shadow-card); }
.ui-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.ui-card-title { font-size: .9375rem; font-weight: 700; }
.ui-card-description { margin-top: .125rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.ui-card-content { padding: 1rem; }
.ui-card-content.is-flush { padding: 0; }
.ui-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .4); }

/* Page header */
.ui-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.ui-page-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.ui-page-description { margin-top: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.ui-page-actions { display: flex; align-items: center; gap: .5rem; }

/* Badge — yumuşak varyantlar: arka plan token/.15, yazı token */
.ui-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; border: 1px solid transparent; padding: .125rem .625rem; font-size: .75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.ui-badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.ui-badge-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.ui-badge-success { background: hsl(var(--success) / .15); color: hsl(var(--success-text)); }
.ui-badge-warning { background: hsl(var(--warning) / .15); color: hsl(var(--warning-text)); }
.ui-badge-danger  { background: hsl(var(--danger) / .15);  color: hsl(var(--danger-text)); }
.ui-badge-dot::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
.ui-badge-info    { background: hsl(var(--info) / .15);    color: hsl(var(--info-text)); }

/* Satır içi kod/kimlik çipi — sipariş no, TC gibi (<code class="ui-code">); yazı rengi kalıtımla gelir */
.ui-code { border-radius: .25rem; background: hsl(var(--muted)); padding: 0 .25rem; font-size: .75rem; }

/* Dialog — ui.js Modal ve Alpine x-show modalları aynı sınıfları giyer */
.ui-dialog-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / .5); overflow-y: auto; }
.ui-dialog-overlay[hidden], .ui-dialog-overlay.hidden { display: none; }
/* <ui-modal> (ui.js): baglaninca kendine .ui-dialog-overlay ekler; acik = open ozniteligi. Tanimlanana ve acilana
   kadar gizli (0,1,1 > .ui-dialog-overlay 0,1,0); kapanis overlay gecisiyle (allow-discrete) solar. */
ui-modal:not(:defined), ui-modal:not([open]) { display: none; opacity: 0; }
ui-modal:not([open]) > .ui-dialog { transform: translateY(8px) scale(.99); }
.ui-dialog { position: relative; width: 100%; max-width: 32rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; border-radius: calc(var(--radius) + .25rem); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 20px 55px -28px rgb(15 23 42 / .45); outline: none; }
.ui-dialog-sm { max-width: 24rem; }
.ui-dialog-lg { max-width: 42rem; }
.ui-dialog-xl { max-width: 56rem; }
.ui-dialog-2xl { max-width: 72rem; }
/* PDF/iframe gibi gövdesi kutuyu doldurması gereken diyalog: <ui-modal fill>. Yükseklik kutunun kendisinde (max-height sınırıyla),
   gövde dolgusuz esnek sütun — içerik `flex-1 min-h-0` ile kalan alanı alır. */
.ui-dialog-fill { height: 88vh; }
.ui-dialog-fill > .ui-dialog-body { padding: 0; display: flex; flex-direction: column; }
.ui-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.ui-dialog-title { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.ui-dialog-description { margin-top: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.ui-dialog-body { padding: 1.25rem; overflow: auto; flex: 1 1 auto; font-size: .875rem; }
.ui-dialog-body > .ui-dialog-description { margin: 0 0 .75rem; }
.ui-dialog-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border)); }
.ui-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border: 0; border-radius: var(--radius); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.ui-dialog-close:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

/* Table — yapışkan başlık z-index 2: hücredeki TomSelect kontrolü (tema: relative + z-index 1) kaydırılırken başlığı örtmesin */
.ui-table-wrap { overflow: auto; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + .25rem); }
/* Kart içindeki tablo kabı kartın kenarını/köşesini kullanır — çift kenarlık olmasın. */
.ui-card .ui-table-wrap { border: 0; border-radius: 0; }
.ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ui-table thead th { position: sticky; top: 0; z-index: 2; padding: .625rem .875rem; text-align: left; font-size: .71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: hsl(var(--muted-foreground)); background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.ui-table tbody td { padding: .6875rem .875rem; border-top: 1px solid hsl(var(--border)); vertical-align: middle; }
.ui-table tbody tr:hover { background: hsl(var(--muted) / .4); }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table.ui-table-compact thead th, .ui-table.ui-table-compact tbody td { padding: .375rem .5rem; font-size: .8125rem; }

/* Tabs */
.ui-tabs { display: flex; gap: .25rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1.25rem; }
.ui-tab { display: inline-flex; align-items: center; gap: .375rem; padding: .625rem 1rem; margin-bottom: -1px; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: color .15s, border-color .15s; }
.ui-tab:hover { color: hsl(var(--foreground)); }
.ui-tab.is-active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }

/* Alert */
.ui-alert { display: flex; gap: .625rem; align-items: flex-start; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .75rem 1rem; font-size: .875rem; background: hsl(var(--card)); }
.ui-alert-danger  { border-color: hsl(var(--danger) / .3);  background: hsl(var(--danger) / .1);  color: hsl(var(--danger-text)); }
.ui-alert-warning { border-color: hsl(var(--warning) / .3); background: hsl(var(--warning) / .1); color: hsl(var(--warning-text)); }
.ui-alert-info    { border-color: hsl(var(--info) / .3);    background: hsl(var(--info) / .1);    color: hsl(var(--info-text)); }
.ui-alert-success { border-color: hsl(var(--success) / .3); background: hsl(var(--success) / .1); color: hsl(var(--success-text)); }
/* .ui-alert display:flex yazar ve üretimde derlenmiş Tailwind'den SONRA yüklenir → eşit özgüllükteki
   .hidden'ı ezerdi; JS ile açılıp kapanan uyarı şeritleri için gizleme kuralı AÇIKÇA yazılır. */
.ui-alert[hidden], .ui-alert.hidden { display: none; }

/* Bilgi listesi: madde (ul) ya da numaralı adım (ol); açılır bölüm: <details class="ui-disclosure"><summary>Başlık</summary>…</details> */
.ui-list { display: flex; flex-direction: column; gap: .25rem; padding-left: 1.25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
ul.ui-list { list-style: disc; }
ol.ui-list { list-style: decimal; }
.ui-list strong { color: hsl(var(--foreground)); font-weight: 600; }
.ui-disclosure { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .5rem .875rem; }
.ui-disclosure > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); }
.ui-disclosure[open] > summary { margin-bottom: .5rem; }
/* WhatsApp şablon önizlemesi: sohbet zemini üzerinde mesaj balonu + altında düğmeler */
.ui-wa-preview { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-height: 10rem; padding: 1rem; border-radius: var(--radius); background: hsl(var(--muted)); }
.ui-wa-bubble, .ui-wa-button { width: 100%; max-width: 20rem; border-radius: .5rem; background: hsl(var(--card)); box-shadow: var(--shadow-card); font-size: .875rem; }
.ui-wa-bubble { padding: .5rem .75rem; color: hsl(var(--card-foreground)); overflow-wrap: anywhere; }
.ui-wa-bubble-header { margin-bottom: .25rem; font-weight: 700; }
.ui-wa-bubble-body { white-space: pre-wrap; }
.ui-wa-bubble-footer { margin-top: .25rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.ui-wa-button { padding: .5rem; text-align: center; font-weight: 500; color: hsl(var(--primary)); }

/* Pagination — butonlar markup'ta "ui-btn ui-btn-outline ui-btn-sm" giyer; aktif sayfa aria-current */
.ui-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem; }
.ui-pagination [aria-current="page"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.ui-pagination-info { margin-right: auto; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.ui-pagination-gap { padding: 0 .25rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/* Görsel üstü sıra rozeti — koyu örtü iki temada da beyaz yazı ister (ürün / tur formu görsel ızgarası) */
.ui-image-badge { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: rgb(0 0 0 / .7); color: hsl(0 0% 100%); font-size: .75rem; font-weight: 600; }

/* Görsel üstü silme düğmesi — resmin altındaki içerikten bağımsız daima okunur olsun diye opak kart rengi (ürün / tur formu görsel ızgarası;
   prava-uploader ızgarasının kendi ürettiği .delete-btn de aynı görünümü giyer — bkz. §5 .cdn-upload-grid) */
.ui-image-remove, .cdn-upload-grid .delete-btn { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); transition: background-color .15s, color .15s; }
.ui-image-remove:hover, .cdn-upload-grid .delete-btn:hover { background: hsl(var(--danger) / .1); color: hsl(var(--danger)); }

/* Dosya bırakma alanı — tıkla / sürükle-bırak / yapıştır (CdnUpload.mount uploadBox'ı; ürün oluşturma ve ilan formları).
   İçerik (ikon + başlık + alt metin) utility ile; renk kutudan kalıtılır. */
.ui-dropzone { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .5rem; border: 2px dashed hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted) / .3); color: hsl(var(--muted-foreground)); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ui-dropzone:hover, .ui-dropzone:focus { border-color: hsl(var(--primary)); background: hsl(var(--muted) / .5); }
/* Odak = "yapıştırma buraya gider" işareti (prava-uploader tıklayınca odaklar, outline'ı kendisi kapatır) */
.ui-dropzone:focus { outline: none; box-shadow: 0 0 0 4px hsl(var(--primary) / .1); }

/* Durumlar */
.ui-skeleton { border-radius: var(--radius); background: hsl(var(--muted)); animation: ui-pulse 1.5s ease-in-out infinite; }
@keyframes ui-pulse { 50% { opacity: .5; } }
.ui-empty { padding: 3rem 1.25rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }

/* Kısayollar (panel ana sayfası "Hızlı Erişim"): karo = ikon + etiket, .ui-tile-stack dikey; çip = alt sayfa bağlantısı */
.ui-tile { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .625rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + .25rem); background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-tile:hover, .ui-tile[aria-expanded="true"] { border-color: hsl(var(--primary)); }
.ui-tile[aria-expanded="true"] { background: hsl(var(--primary) / .06); color: hsl(var(--primary)); }
.ui-tile-stack { flex-direction: column; justify-content: center; gap: .375rem; padding: .75rem .5rem; text-align: center; font-size: .8125rem; }
.ui-tile-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: 1.25rem; }
.ui-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .75rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: .8125rem; text-decoration: none; transition: border-color .15s, color .15s; }
.ui-chip:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-input, .ui-cell, .ui-switch, .ui-switch::after, .ui-tab, .ui-dropzone, .ui-tile, .ui-chip { transition: none; }
  .ui-skeleton { animation: none; }
}

/* ─── 4. Kabuk ──────────────────────────────────────────────────────────── */
.avatar-bubble { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .75rem; font-weight: 600; line-height: 1; }

.notif-badge { position: absolute; top: .3rem; right: .3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--danger) / .2); color: hsl(var(--danger-text)); font-size: .65rem; font-weight: 700; line-height: 1; }
.notif-badge[hidden] { display: none; }

/* Bildirim öğesi ikonu + okunmadı noktası (layout.js render ediyor) */
.notif-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .6rem; font-size: 1rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.notif-item-icon.is-success { background: hsl(var(--success) / .15); color: hsl(var(--success)); }
.notif-item-icon.is-info    { background: hsl(var(--info) / .15);    color: hsl(var(--info)); }
.notif-item-icon.is-warning { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); }
.notif-item-icon.is-danger  { background: hsl(var(--danger) / .15);  color: hsl(var(--danger)); }
.notif-unread-dot { display: inline-block; width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--primary)); }

/* Sidebar alt menü (sidebar.js .open ile açar) */
.submenu-container { display: none; }
.submenu-container.open { display: block; }

/* Sidebar daraltma: metinleri gizle */
.sidebar-collapsed .sidebar-text,
.sidebar-collapsed [data-collapsible="hide"] { display: none; }
.sidebar-collapsed .submenu-container { display: none !important; }

/* Scrollbar */
body {
  --sb-track-color: hsl(var(--muted));
  --sb-thumb-color: hsl(var(--border));
  --sb-size: 6px;
}
body::-webkit-scrollbar { width: var(--sb-size); }
body::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 5px; }
body::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 5px; }
@supports not selector(::-webkit-scrollbar) {
  body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); }
}
/* Sidebar navigasyonu: scrollbar hep yerinde ama görünmez (mizanpaj kaymasını önler) */
nav#sidebar-nav { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .3s ease; overflow-y: auto; }
nav#sidebar-nav:hover { scrollbar-color: hsl(var(--foreground) / .2) transparent; }
/* Aktif menü öğesi: sidebar.js aria-current="page" basar. Pastel vurgu (zemin primary/.1, yazı primary). */
#sidebar-nav a[aria-current="page"] { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 600; }

/* ─── 5. Üçüncü parti uyarlama ──────────────────────────────────────────── */
/* TomSelect ile kurulan alanlar diğer form kontrolleriyle aynı kenarlık/odak davranışını alır */
.ts-wrapper .ts-control { min-height: 2.25rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--input-bg)); color: hsl(var(--foreground)); padding: 0 .75rem; font-size: .875rem; }
.ts-wrapper.focus .ts-control { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }
.ts-wrapper .ts-control input::placeholder { color: hsl(var(--muted-foreground)); }
.ts-dropdown { border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.ts-dropdown .active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.ts-dropdown .option.selected { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
/* Tekli (single) TomSelect arama girişi gösterirken temanın `.ts-wrapper.single.input-active .ts-control`
   kuralı (özgüllük 0,4,0) yukarıdaki `.ts-wrapper .ts-control`'ü (0,2,0) sıraya bakmaksızın ezer; aynı
   özgüllükte token'lı karşılık — yoksa arama sırasında alan zemini şeffafa döner (var(--bs-body-bg) tanımsız). */
.ts-wrapper.single.input-active .ts-control { background: hsl(var(--input-bg)); }
/* Çoklu seçim çipleri: tema sabit renk yazar (#efefef/#343a40 → koyu temada okunmaz). Aynı seçici,
   aynı özgüllük; panel.css tema linkinden SONRA yüklendiği için (index.html) token'lar kazanır. */
.ts-wrapper.multi .ts-control > div { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border: 1px solid hsl(var(--border)); border-radius: .375rem; }
.ts-wrapper.multi .ts-control > div.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { border-left: 1px solid hsl(var(--border)); }

/* Yazdırma: sayfa içi "Yazdır" düğmesi olan ekranlar — kabuk (nav/sidebar/header) ve
   .no-print işaretli alanlar çıktıdan gizlenir; .print-card kart çerçevesi/gölgesi kaldırılır. */
@media print {
  .no-print, nav, .sidebar, header, aside { display: none !important; }
  .print-card { border: none !important; box-shadow: none !important; }
}

/* Modal/overlay giriş-çıkış hareketi — PROJE GENELİ, tek yerden.
   Üç gizleme yolu da yakalanır: .hidden (Tailwind), [hidden] (DOM özniteliği; ui.js Modal),
   style="display: none" (Alpine x-show). `display` geçiş listesinde `allow-discrete` ile durur:
   display geçişin SONUNDA none'a düşer, opaklık o sırada 0'a iner. Açılışta ilk kare
   @starting-style'dan gelir. (Chrome/Edge 117+, Safari 17.4+, FF 129+; desteklemeyen tarayıcıda
   modal anında açılıp kapanır — işlev bozulmaz.) */
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay) {
  transition: opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete;
  opacity: 1;
}
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay).hidden,
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay)[hidden],
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay)[style*="display: none"] { opacity: 0; }
@starting-style {
  :where(.fixed.inset-0, .modalbg, .ui-dialog-overlay) { opacity: 0; }
}
/* Panel gövdesi hafifçe yükselerek gelir; yalnız DİKEY eksen (yandan kayan drawer'larla çakışmasın) */
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay) > :where(div, form, section) {
  transition: transform 190ms cubic-bezier(.16, 1, .3, 1), opacity 150ms ease;
}
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay).hidden > :where(div, form, section),
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay)[hidden] > :where(div, form, section),
:where(.fixed.inset-0, .modalbg, .ui-dialog-overlay)[style*="display: none"] > :where(div, form, section) {
  transform: translateY(8px) scale(.99);
}
@starting-style {
  :where(.fixed.inset-0, .modalbg, .ui-dialog-overlay) > :where(div, form, section) { transform: translateY(8px) scale(.99); }
}

/* Sürükle-bırak ağaç — admin/menus. nestable eklentisinin ürettiği DOM'a utility uygulanamaz;
   sınıf adları admin-menus.js + sortable-tree-v1.js'e bağlı, DEĞİŞTİRME. */
.dd { max-width: 100%; }
.dd-list, .dd-list .dd-list { list-style: none; margin: 0; padding: 0; }
.dd-list .dd-list { padding-left: 28px; }
.dd-item { margin: 6px 0; position: relative; }
.dd-handle { position: absolute; left: 0; top: 0; width: 26px; height: 38px; cursor: move; background: transparent; border: 0; }
.dd-handle::before { content: "\f58e"; font-family: "Line Awesome Free"; font-weight: 900; color: hsl(var(--muted-foreground)); position: absolute; left: 6px; top: 10px; }
.dd3-content { display: flex; align-items: center; gap: .5rem; min-height: 38px; padding: .35rem .75rem .35rem 1.75rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--background)); font-size: .875rem; }
.dd-placeholder { min-height: 38px; border: 1px dashed hsl(var(--primary)); border-radius: .5rem; background: hsl(var(--primary) / .06); margin: 6px 0; }
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; opacity: .85; }
/* Aç/kapa düğmesi: eklenti alt öğesi olan satırlara kendi ekliyor. Konumlandırılmazsa akışta yer
   kaplayıp satır içeriğini aşağı itiyor (tutamacın altında boş satır). */
.dd-item > button { position: absolute; left: 26px; top: 8px; z-index: 2; width: 22px; height: 22px; margin: 0; padding: 0; line-height: 1; cursor: pointer; font-size: .75rem; border: 1px solid hsl(var(--border)); border-radius: .25rem; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); }
.dd-item > button::before { content: "+"; }
.dd-item > button[data-action="collapse"]::before { content: "\2212"; }
.dd-item > button:hover { color: hsl(var(--foreground)); }
.dd-item.dd-has-children > .dd3-content { padding-left: 3.25rem; }
.dd-collapsed .dd-list { display: none; }
/* Menü öğesi bağlantı önizlemesi — storefront-menus.js DOM'u className ile atıyor (JS kancası
   değil, salt görünüm), utility uygulanamaz. Eskiden storefront/menus.html'in kendi <style>'ında. */
.menu-url { font-family: ui-monospace, monospace; font-size: .75rem; color: hsl(var(--muted-foreground)); }
@media (prefers-reduced-motion: reduce) {
  :where(.fixed.inset-0, .modalbg, .ui-dialog-overlay),
  :where(.fixed.inset-0, .modalbg, .ui-dialog-overlay) > :where(div, form, section) { transition: none; }
}

/* Quill editörü ve SortableJS — üçüncü parti DOM'u (utility uygulanamaz). Ürün ve tur formları. */
.quill-editor-container { border-radius: .5rem; overflow: hidden; background: hsl(var(--card)); }
.quill-editor-container .ql-toolbar.ql-snow,
.quill-editor-container .ql-container.ql-snow { border-color: hsl(var(--border)); }
.quill-editor-container .ql-toolbar.ql-snow { background: hsl(var(--muted) / .4); }
.quill-editor-container .ql-editor { min-height: 180px; color: hsl(var(--foreground)); font-size: .875rem; }
.quill-editor-container.is-tall .ql-editor { min-height: 320px; }
.quill-editor-container .ql-editor.ql-blank::before { color: hsl(var(--muted-foreground)); font-style: normal; }
.quill-editor-container .ql-snow .ql-stroke { stroke: hsl(var(--muted-foreground)); }
.quill-editor-container .ql-snow .ql-fill   { fill: hsl(var(--muted-foreground)); }
.quill-editor-container .ql-snow .ql-picker { color: hsl(var(--muted-foreground)); }
.sortable-ghost { opacity: .4; }
.sortable-drag  { cursor: move; }

/* CDN yukleme kutusu/listesi — prava-uploader'in kendi urettigi DOM (utility uygulanamaz).
   Kullanan: storefront icerik formu (dogrudan mount). cdn-picker.js kendi stilini enjekte eder
   (panel.css yuklemeyen editor iframe'inde de acilir) — ona baglanmaz. */
.cdn-upload-box { transition: border-color .15s, color .15s; }
.cdn-upload-list .file-list-item { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-top: 1px solid hsl(var(--border)); font-size: .75rem; color: hsl(var(--foreground)); }
.cdn-upload-list .file-list-item:first-child { border-top: none; }
.cdn-upload-list .file-list-item.error { color: hsl(var(--danger)); }
.cdn-upload-list .file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdn-upload-list .progress-container { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; width: 6rem; }
.cdn-upload-list .progress { flex: 1; height: .35rem; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.cdn-upload-list .progress-bar { height: 100%; background: hsl(var(--primary)); }
.cdn-upload-list .percent-text { width: 2rem; text-align: right; font-size: .65rem; color: hsl(var(--muted-foreground)); }
.cdn-upload-list .delete-btn { cursor: pointer; color: hsl(var(--muted-foreground)); }
.cdn-upload-list .delete-btn:hover { color: hsl(var(--danger)); }
.cdn-upload-list .error-message { margin-left: .5rem; font-size: .7rem; color: hsl(var(--danger)); }
/* Izgara görünümü (viewMode 'grid') — <div id="fileContainer" class="cdn-upload-grid">. Kullanan: Klasdns ürün
   oluşturma ve Listing ilan formları. Silme düğmesi .ui-image-remove görünümünde (§3), üzerine gelince belirir;
   vendor <i class="las la-trash delete-btn">❌</i> ürettiği için emoji font-size:0 ile gizlenir, yalnız ikon kalır.
   .progress-bar'a yükseklik verilmez: eski sayfa stilinde de yoktu (çubuk hiç görünmüyordu), yalnız iz görünür. */
.cdn-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.cdn-upload-grid .file-grid-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: .75rem; background: hsl(var(--muted)); box-shadow: 0 2px 8px rgb(0 0 0 / .1); transition: transform .3s ease, box-shadow .3s ease; }
.cdn-upload-grid .file-grid-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgb(0 0 0 / .15); }
.cdn-upload-grid .file-grid-item.success { border: 2px solid hsl(var(--success)); }
.cdn-upload-grid .file-grid-item.error { border: 3px solid hsl(var(--danger)); }
.cdn-upload-grid .file-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.cdn-upload-grid .delete-btn { position: absolute; top: .5rem; right: .5rem; cursor: pointer; opacity: 0; font-size: 0; transition: opacity .2s, background-color .15s, color .15s; }
.cdn-upload-grid .delete-btn::before { font-size: 1rem; }
.cdn-upload-grid .file-grid-item:hover .delete-btn { opacity: 1; }
.cdn-upload-grid .progress { position: absolute; right: 0; bottom: 0; left: 0; height: 6px; background: hsl(var(--foreground) / .1); }

/* CRUD form konteyneri + formBuilder.js'in ürettiği alanlar — üçüncü parti DOM (utility uygulanamaz).
   Kullanan: crud/form/[table]/[id].html. İki sütunlu düzen (6/6): formBuilder fieldset > .row > .mb-3
   üretir; .row'u "display:contents" ile şeffaf yapıp .mb-3'leri fieldset grid'ine taşırız. */
.formContainer { padding: .75rem 1.5625rem; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; max-width: 60rem; width: 100%; margin: 0 auto; }
.crud-form input, .crud-form select, .crud-form textarea { border: 1px solid hsl(var(--border)); border-radius: .5rem; padding: .5rem .75rem; transition: all .2s; width: 100%; font-size: .875rem; background: hsl(var(--input-bg)); color: hsl(var(--foreground)); box-sizing: border-box; outline: none; }
.crud-form input:focus, .crud-form select:focus, .crud-form textarea:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }
.crud-form label { font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: .25rem; display: block; }
.crud-form > * { width: 100%; }
.crud-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; align-items: start; border: none; padding: 0; margin: 0; min-width: 0; }
.crud-form fieldset .row { display: contents; }
.crud-form fieldset > legend { grid-column: 1 / -1; }
.crud-form fieldset > *, .crud-form fieldset .row > * { min-width: 0; }
@media (max-width: 768px) {
  .crud-form fieldset { grid-template-columns: 1fr; }
}