/*
  Panel tasarım sistemi.

  shadcn/ui'nin görünümü örnek alındı — bileşenleri değil. Onlar React+Radix
  ve Tailwind sınıfları; bizde derleme adımı yok (deploy dosya yükleyerek
  yapılıyor). Alınan şey zaten iyi görünmesini sağlayan kısım: token'lar,
  8px yarıçap, nötr gri ölçeği, ince kenarlıklar, odak halkası, 14px taban
  tipografi ve sıkı satır yükseklikleri.

  Marka rengimiz "primary" olarak duruyor; gerisi nötr.
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}

:root{
  /* --- nötr ölçek (shadcn zinc'e yakın, hafif sıcak) --- */
  --bg:#FAFAFA;
  --card:#FFFFFF;
  --fg:#18181B;
  --muted:#F4F4F5;
  --muted-fg:#71717A;
  --border:#E4E4E7;
  --input:#E4E4E7;

  /* --- marka --- */
  --primary:#E8867B;
  --primary-fg:#FFFFFF;
  --primary-soft:#FDF0EE;
  --ring:#E8867B;

  /* --- durumlar --- */
  --ok:#16A34A;      --ok-soft:#F0FDF4;   --ok-border:#BBF7D0;
  --warn:#CA8A04;    --warn-soft:#FEFCE8; --warn-border:#FEF08A;
  --danger:#DC2626;  --danger-soft:#FEF2F2; --danger-border:#FECACA;

  /* --- gece (kenar çubuğu) --- */
  --sb:#18181B;
  --sb-fg:#FAFAFA;
  --sb-muted:#A1A1AA;
  --sb-border:#27272A;
  --sb-hover:#27272A;

  /* Boşluk ölçeği — 4px tabanlı. Ekranlarda elle piksel yazmak yerine
     bunlar kullanılır; "bu kadar mı olsun" tartışması bir kez burada
     yapılır, her ekranda tekrar edilmez. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  --radius:8px;
  --radius-sm:6px;
  --sidebar-w:256px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);color:var(--fg);
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

/* Odak halkası: shadcn'in ring'i — kenarlık değil, dışarıda bir halka. */
:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm);
}

/* ============ yerleşim ============ */
.layout{display:flex;min-height:100vh}

.side{
  width:var(--sidebar-w);flex:none;background:var(--sb);color:var(--sb-fg);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-brand{
  display:flex;align-items:center;gap:10px;height:60px;padding:0 18px;flex:none;
  border-bottom:1px solid var(--sb-border);
}
.side-brand img{width:28px;height:28px;flex:none}
.side-brand .txt{display:flex;flex-direction:column;line-height:1.2}
.side-brand .txt b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.side-brand .txt i{font-style:normal;font-size:11px;color:var(--sb-muted);font-weight:400}

.side-nav{flex:1;overflow-y:auto;padding:12px 10px}
.side-group{
  font-size:11px;font-weight:500;color:#71717A;
  padding:14px 10px 6px;letter-spacing:.01em;
}
.side-nav a{
  display:flex;align-items:center;gap:10px;
  height:34px;padding:0 10px;border-radius:var(--radius-sm);
  color:var(--sb-muted);font-size:13.5px;font-weight:500;
  transition:background .12s,color .12s;
}
.side-nav a:hover{background:var(--sb-hover);color:var(--sb-fg)}
.side-nav a.on{background:var(--sb-hover);color:var(--sb-fg);font-weight:600}
.side-nav a.on svg{color:var(--primary)}
.side-nav svg{width:16px;height:16px;flex:none;stroke-width:2}
.side-nav .tail{
  margin-left:auto;font-size:10.5px;color:#52525B;
  border:1px solid var(--sb-border);border-radius:4px;padding:1px 5px;
}

.side-foot{padding:12px;border-top:1px solid var(--sb-border);flex:none}
.who{display:flex;align-items:center;gap:10px}
.who-av{
  width:32px;height:32px;border-radius:var(--radius-sm);flex:none;
  background:var(--sb-hover);color:var(--sb-fg);
  display:grid;place-items:center;font-weight:600;font-size:13px;
}
.who .txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.who-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-role{font-size:11.5px;color:var(--sb-muted)}
.who form{margin-left:auto;flex:none}
.who button{
  background:none;cursor:pointer;color:var(--sb-muted);
  width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;
}
.who button:hover{background:var(--sb-hover);color:var(--sb-fg)}
.who button svg{width:16px;height:16px;stroke-width:2}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{
  height:56px;flex:none;background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:20;
}
.bar h1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bar .crumb{font-size:13px;color:var(--muted-fg)}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:8px}

.content{
  padding:var(--s6);flex:1;max-width:1200px;width:100%;
  display:flex;flex-direction:column;gap:var(--s4);
}
/*
  Dikey yığın.

  Boşluğu "sonraki kardeş" kuralıyla vermek, araya bir <form> girdiği anda
  sessizce çalışmayı bırakıyor — kartlar formun çocuğu oluyor ve kural onlara
  ulaşmıyordu. Açık bir sınıf, sarmalayıcı ne olursa olsun çalışır.
*/
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.row-end{margin-left:auto}

/* ============ sayfa başlığı ============ */
.page-head{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.page-head h2{font-size:17px;font-weight:600;letter-spacing:-.02em}
.page-head p{font-size:13.5px;color:var(--muted-fg);margin-top:4px;max-width:620px;line-height:1.55}
.page-head .right{margin-left:auto;display:flex;gap:var(--s2);align-items:center}

/* Kendi içinde kayan tam ekran araçlar (sohbet).

   Kenar boşluğu ve 1200px sınırı kalkıyor: sohbet zaten kendi kenarlıklarını
   çiziyor ve iki sütunu kendi içinde kayıyor. Dışarıdan bir boşluk daha
   eklemek, ekranın üçte birini kullanılmayan zemine ayırmak demekti.
   ------------------------------------------------------------------------ */
.content-flush{padding:0;max-width:none;gap:0}

/* ==================================================== ipucu (hover)
   Uzun bir açıklamayı sayfanın tepesinde sürekli tutmak yerine bir düğmeye
   bağlamak. Açıklama önemli ama her gün okunacak bir şey değil; ekranın
   üstünde durduğunda yalnızca yer kaplıyor.

   `title` yerine bunun sebebi: tarayıcının kendi ipucu bir saniye gecikiyor,
   biçimlenmiyor ve dokunmatikte hiç çıkmıyor.
   ------------------------------------------------------------------------ */
.tip{position:relative;display:inline-flex}
.tip>.tip-body{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:min(320px,calc(100vw - 32px));
  background:var(--card);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 24px -6px rgb(0 0 0 / .18);
  padding:10px 12px;font-size:12.5px;line-height:1.55;font-weight:400;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
  pointer-events:none;text-align:left;
}
.tip:hover>.tip-body,
.tip:focus-within>.tip-body{opacity:1;visibility:visible;transform:translateY(0)}

/* Düğmenin kendisi — üst çubuktaki diğer eylemlerle aynı ölçüde. */
.tip-btn{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:grid;place-items:center;flex:none;
  background:transparent;border:1px solid transparent;
  color:var(--muted-fg);cursor:help;
}
.tip-btn:hover,.tip:focus-within .tip-btn{background:var(--muted);color:var(--fg)}
.tip-btn svg{width:17px;height:17px}

/* ============ card ============ */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .04);
}
.card-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
}
/*
 * Başlığın altındaki açıklama kendi satırına iner.
 *
 * .card-head bir flex satırı; açıklama h2'nin yanına yapışıyor ve iki
 * cümle tek satırda eziliyordu. width:100% flex sarmasını zorluyor.
 */
.card-head{flex-wrap:wrap}
.card-head h2{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.card-head .sub{width:100%;margin-top:2px}
.sub{font-size:12.5px;color:var(--muted-fg);line-height:1.55}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:var(--s5)}
.card-body+.card-body{border-top:1px solid var(--border)}
/* Paragraflar birbirine yapışmasın; sonuncusu kartın altına boşluk eklemesin. */
.card-body>p{margin-bottom:var(--s3)}
.card-body>p:last-child{margin-bottom:0}

.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.stat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:0 1px 2px 0 rgb(0 0 0 / .04);
}
.stat .k{font-size:13px;font-weight:500;color:var(--muted-fg);margin-bottom:8px}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .n{font-size:12.5px;color:var(--muted-fg);margin-top:6px}

/* ============ button ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:background .12s,border-color .12s,opacity .12s;
}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:var(--card);border-color:var(--input);color:var(--fg)}
.btn-ghost:hover{background:var(--muted)}
.btn-danger{background:var(--card);border-color:var(--danger-border);color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{height:30px;padding:0 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ============ form ============ */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:500;margin-bottom:7px}
/*
  Tür tür saymak yerine "metin girişi olmayan"ları dışlıyoruz.

  Önce her tür tek tek yazılmıştı ve `number` listede yoktu: sayı alanları
  çerçevesiz, düz yazı gibi görünüyordu. Yeni bir tür eklendiğinde aynı hata
  tekrar eder — dışlama listesi bir kez yazılır.
*/
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,.field textarea,
.filters input:not([type=checkbox]),.filters select{
  width:100%;height:36px;padding:0 11px;font-size:13.5px;
  background:var(--card);border:1px solid var(--input);border-radius:var(--radius-sm);
  transition:border-color .12s,box-shadow .12s;
}
.field textarea{height:auto;padding:9px 11px;min-height:88px;resize:vertical}
.field input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,.field textarea:focus,
.filters input:focus,.filters select:focus{
  outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft);
}
.field input:disabled{background:var(--muted);color:var(--muted-fg);cursor:not-allowed}
/*
 * Yardım metni ve hata — her yerde.
 *
 * Önce `.field .hint` diye yazılmıştı; alanın dışında kullanılan her .hint
 * hiçbir stil almıyor ve normal gövde metni gibi çıkıyordu. Bir sınıfın
 * çalışıp çalışmaması, hangi kutunun içinde durduğuna bağlı olmamalı.
 */
.hint{font-size:12.5px;color:var(--muted-fg);margin-top:7px;line-height:1.5}
.err{font-size:12.5px;color:var(--danger);margin-top:6px}

/*
  Onay kutusu — tarayıcının kendisi değil.
  accent-color ile boyanan yerel kutu her işletim sisteminde başka görünüyor
  ve boyandığında ucuz duruyordu. Kendi kutumuz: 16px, ince kenarlık, işaret
  SVG maskesiyle.
*/
.chk{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex:none;cursor:pointer;
  border:1px solid var(--input);border-radius:4px;background:var(--card);
  display:inline-grid;place-content:center;transition:background .12s,border-color .12s;
}
.chk::before{
  content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s;
  background:var(--primary-fg);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
.chk:checked{background:var(--primary);border-color:var(--primary)}
.chk:checked::before{transform:scale(1)}
.chk:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:18px;cursor:pointer}

/* ============ table ============ */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:12.5px;font-weight:500;color:var(--muted-fg);
  padding:0 20px;height:40px;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td{padding:12px 20px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--muted)}
td.num,th.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted-fg);font-size:12.5px}
.mono{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted-fg)}

/* ============ badge ============ */
/*
 * Etiket — shadcn Badge ölçüleri.
 *
 * Geometri birebir shadcn'in güncel Badge'i: rounded-md (yarıçap - 2),
 * px-2 py-0.5, gap-1, text-xs/leading-4, font-medium, whitespace-nowrap,
 * w-fit, ikonlar 12px. Tam yuvarlak (rounded-full) eski sürümdü ve
 * shadcn'in kendisi de ondan vazgeçti — iyi bir sebeple: yuvarlak bir
 * kutuda sarılan metin kenarları badem şekline çeviriyor.
 *
 * Renkler soft tonda kalıyor. shadcn'in varsayılanı dolu bir arkaplan ama
 * o, sayfada tek başına duran bir rozet için; burada her tablo satırında
 * bir tane var ve dolu renkler listeyi okunmaz hâle getiriyor.
 *
 * Etiket yalnızca kısa durum kelimeleri için: "dizinde", "taslak", "pasif".
 * Bir ad etikete sığmıyorsa çözüm etiketi büyütmek değil, onu düz metin
 * yazmak.
 */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:fit-content;flex:none;gap:4px;white-space:nowrap;overflow:hidden;
  font-size:12px;line-height:16px;font-weight:500;
  padding:2px 8px;border-radius:calc(var(--radius) - 2px);
  background:var(--muted);color:var(--muted-fg);border:1px solid var(--border);
}
.tag>svg{width:12px;height:12px;flex:none;pointer-events:none}

/* Aynı hücrede birden fazla etiket varsa birbirine yapışmasın. */
.tag+.tag{margin-left:6px}

.tag-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border)}
.tag-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)}
.tag-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.tag-peach{background:var(--primary-soft);color:#B4564A;border-color:#F8D5CF}

/*
 * Raporlu içerik — listedeki tek yanıp sönen şey.
 *
 * Yanıp sönme rahatsız edici bir etkidir ve tam da o yüzden buraya konuldu:
 * şikayet edilmiş içerik, listede gözün kaçırmaması gereken tek satır.
 * İkinci bir yerde kullanılırsa ikisi de dikkat çekmez olur.
 *
 * Nefes alır gibi, 1,6 saniyede bir. Daha hızlısı okumayı zorlaştırıyor,
 * daha yavaşı fark edilmiyor. Metin hep okunur kalıyor — sönen kısım
 * yalnızca zemin ve kenar; opacity ile söndürmek yazıyı da siliyordu.
 *
 * Hareketi kapatanlar için sabit kırmızı kalıyor (aşağıdaki
 * prefers-reduced-motion kuralı animasyonu kaldırıyor, renk duruyor).
 */
/*
 * Kenar çubuğunda vurgulu satır — şu an yalnızca Mesajlar.
 *
 * Menüdeki diğer satırlar yönetilen içeriğe götürüyor; bu ise karşılık
 * bekleyen bir insana. Aynı görünmesi, bekleyen mesajın cevapsız kalması
 * demek. Vurgu marka rengiyle: dikkat çekiyor ama uyarı gibi durmuyor —
 * kırmızı olsaydı "bir şey ters gitti" diye okunurdu.
 */
.side nav a.accent{color:var(--primary)}
.side nav a.accent svg{color:var(--primary)}
.side nav a.accent:hover{background:rgba(232,134,123,.14)}
.side nav a.accent.on{background:rgba(232,134,123,.20);color:#fff}
.side nav a.accent.on svg{color:#fff}

.tag-report{
  background:var(--danger-soft);color:var(--danger);border-color:var(--danger);
  animation:raporlu 1.6s ease-in-out infinite
}
@keyframes raporlu{
  0%,100%{background:var(--danger-soft);border-color:var(--danger-border)}
  50%{background:#F8D7D3;border-color:var(--danger)}
}

/*
 * Satır içi uyarı — bir cümle, bir etiket değil.
 *
 * Önce .tag-warn ile yazılmıştı; cümle uzunluğunda bir metin çipin içine
 * girince hem sarıyor hem satırı şişiriyordu. Uyarı okunacak bir şey,
 * rozet değil.
 */
.warn-line{
  display:flex;gap:6px;margin-top:6px;
  font-size:12px;line-height:1.5;color:#854D0E;
}
.warn-line svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--warn);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.warn-line b{font-weight:600}

/* ============ boş durum / uyarı ============ */
.empty{padding:56px 20px;text-align:center;color:var(--muted-fg)}
.empty svg{width:32px;height:32px;margin-bottom:12px;opacity:.4;stroke-width:1.5}
.empty p{font-size:13.5px}

.note{
  display:flex;gap:10px;padding:13px 16px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);
  font-size:13.5px;line-height:1.55;color:var(--muted-fg);
}
.note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--fg)}
.note b{color:var(--fg);font-weight:600}

/* Düzeltilmesi gereken bir durum — bilgi notundan ayrılsın diye sarı. */
.note-warn{background:var(--warn-soft);border-color:var(--warn-border);color:#854D0E}
.note-warn svg,.note-warn b{color:var(--warn)}

.flash{
  padding:12px 16px;border-radius:var(--radius);font-size:13.5px;
  border:1px solid transparent;
}
.flash-ok{background:var(--ok-soft);color:#15803D;border-color:var(--ok-border)}
.flash-err{background:var(--danger-soft);color:#B91C1C;border-color:var(--danger-border)}

/* ============ filtre çubuğu ============ */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.filters .f{display:grid;gap:6px}
.filters label{font-size:12.5px;font-weight:500;color:var(--muted-fg)}
/* Genişlik yalnızca gerçek giriş alanlarına. Onay kutusu bu satırda da
   16px kalmalı — açılır çoklu seçim filtre çubuğunun içinde duruyor ve
   min-width onun listesindeki kutuları da uzatıyordu. */
.filters input:not([type=checkbox]):not([type=radio]),
.filters select{min-width:160px;width:auto}
.filters .ms input[type=text]{min-width:0;width:100%}

/* ============ yetki matrisi ============ */
/*
  Kaynak solda bir kez, eylem sütun başlığında bir kez, kesişimde yalnızca
  işaret. Sütun başlığındaki "tümü" veriye benzemesin diye başlığın yanında
  küçük bir düğme olarak duruyor.
*/
.matrix thead th{background:var(--card);text-align:center}
.matrix thead th:first-child{text-align:left;width:34%}
.matrix .th-in{display:inline-flex;align-items:center;gap:7px}
.matrix tbody td{padding:0;text-align:center}
.matrix tbody td:first-child{padding:11px 20px;text-align:left}
.mx-name{font-size:13.5px;font-weight:500;line-height:1.35}
.mx-name small{display:block;font-weight:400;color:var(--muted-fg);font-size:12px}
.mx-cell{display:grid;place-items:center;height:46px;cursor:pointer}
.mx-cell:hover{background:var(--muted)}
.mx-all{
  font-size:11px;font-weight:500;color:var(--muted-fg);
  background:var(--card);border:1px solid var(--input);
  cursor:pointer;padding:1px 6px;border-radius:4px;
}
.mx-all:hover{background:var(--muted);color:var(--fg)}

.extra-list{padding:8px}
.perm{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;
}
.perm:hover{background:var(--muted)}
.perm code{
  margin-left:auto;font-size:11.5px;color:var(--muted-fg);
  background:var(--muted);border:1px solid var(--border);
  padding:1px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Alt işlem çubuğu */
.actionbar{
  position:sticky;bottom:0;z-index:15;
  display:flex;gap:8px;align-items:center;
  padding:14px 20px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 -2px 8px -4px rgb(0 0 0 / .08);
}
.actionbar .spacer{flex:1}

/* Hesap bloğu — profil sayfasına bağlantı */
.who-link{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  padding:6px;margin:-6px;border-radius:var(--radius-sm);
}
.who-link:hover{background:var(--sb-hover)}

/* ============ profil ============ */
.avatar-edit{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.avatar-lg{
  width:72px;height:72px;border-radius:999px;object-fit:cover;flex:none;
  background:var(--muted);display:grid;place-items:center;
  font-size:24px;font-weight:600;color:var(--muted-fg);
}
.file-btn{position:relative;overflow:hidden;display:inline-flex}
.file-btn input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;font-size:100px;
}

/* ============ ek bileşenler ============ */

/* Ayırıcı */
/*
 * Ayırıcı çizgi kendi boşluğunu taşır.
 *
 * Boşluksuz bir çizgi, ayırdığı iki şeyi birbirine yapıştırıyordu ve her
 * kullanan yere elle margin yazmak gerekiyordu — 26 kullanımın 22'sinde
 * yazılmamıştı. Araç çubuğundaki dikey ayırıcı (.md-bar .sep) kendi
 * boşluğunu ayrıca tanımlıyor.
 */
.sep{height:1px;background:var(--border);border:0;margin:var(--s4) 0}

/* Avatar */
.avatar{
  width:32px;height:32px;border-radius:999px;flex:none;object-fit:cover;
  background:var(--muted);display:grid;place-items:center;
  font-size:12px;font-weight:600;color:var(--muted-fg);
}
.avatar-sm{width:24px;height:24px;font-size:10px}
/* Baş harf hâli: zemin rengi kişiye göre satır içinde geliyor. */
.avatar-init{color:#fff;letter-spacing:.02em;text-transform:uppercase}
.avatar-lg.avatar-init{font-size:24px}

/* Kişi satırı — tabloda tekrar eden kalıp */
/*
  Seçiciler .txt altına kapatıldı.

  Önceden ikinci satır `.person span` ile yazılıyordu; avatar da .person
  içinde bir <span> olduğu için o kural avatarı da yakalıyor ve baş harfleri
  gri yapıp display:block'a çeviriyordu — daire renkli görünüyor ama harf
  okunmuyordu. Bir elemana göre seçmek, aynı etiketi kullanan her kardeşi
  yakalar.
*/
.person{display:flex;align-items:center;gap:var(--s3);min-width:0}
.person .txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.person .txt b{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:500;line-height:1.35;
}
.person .txt>span{
  display:block;font-size:12.5px;color:var(--muted-fg);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Açılır seçim — tablo içinde kullanılan küçük select */
.select{
  height:32px;padding:0 28px 0 10px;font-size:13px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  border:1px solid var(--input);border-radius:var(--radius-sm);
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.select:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)}

/* Tablo sarmalayıcı — dar ekranda yatay kaydırma */
.table-wrap{overflow-x:auto}

/* İşlem sütunu */
/* Tabloya bağlı değil: kart içinde de aynı hizalama gerekebiliyor. */
.actions{text-align:right;white-space:nowrap}
.actions>*+*{margin-left:var(--s1)}

/* ============ sayfalama ============ */
.pager{display:flex;gap:4px;justify-content:center;padding:16px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:32px;height:32px;padding:0 9px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;border:1px solid var(--input);background:var(--card);
}
.pager a:hover{background:var(--muted)}
.pager .active{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.pager .off{opacity:.45}

/* ============ giriş ekranı ============ */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.auth-box{
  width:100%;max-width:384px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 28px;box-shadow:0 1px 3px 0 rgb(0 0 0 / .06);
}
.auth-logo{width:44px;height:44px;display:block;margin:0 auto 16px}
.auth-box h1{font-size:18px;font-weight:600;text-align:center;letter-spacing:-.02em;margin-bottom:6px}
.auth-box .sub{text-align:center;color:var(--muted-fg);font-size:13.5px;margin-bottom:24px}
.alert{
  background:var(--danger-soft);color:#B91C1C;border:1px solid var(--danger-border);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;margin-bottom:16px;
}
.auth-foot{text-align:center;margin-top:20px;font-size:13px;color:var(--muted-fg)}

.menu-btn{display:none;background:none;cursor:pointer;padding:8px}
.menu-btn i{display:block;width:18px;height:1.5px;background:var(--fg);border-radius:2px}
.menu-btn i+i{margin-top:4px}

/* ============ duyarlı ============ */
@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .content{padding:16px}
  .bar{padding:0 16px}
  .matrix thead th:first-child{width:auto}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------- ekip ---------------- */
/* Bulunan kullanıcı satırı — kart içinde vurgulu bir şerit. */
.found{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s4);padding:var(--s3) var(--s4);
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);
}

/* Durum noktası */
.dot{width:7px;height:7px;border-radius:999px;display:inline-block;flex:none}
.dot-ok{background:var(--ok)}
.dot-off{background:var(--muted-fg)}

/* ---------------- gruplu tablo ---------------- */
/* Aşı takvimi gibi bir eksene göre gruplanan listelerde ara başlık satırı. */
.group-row td{
  background:var(--muted);padding:8px 20px;
  border-bottom:1px solid var(--border);
}
.group-row .group-label{
  font-size:12.5px;font-weight:600;color:var(--fg);margin-right:var(--s2);
}
tbody tr.group-row:hover td{background:var(--muted)}

/* Pasif satır — silinmiş gibi görünmesin, sadece geri planda dursun. */
tr.is-off td{opacity:.55}
tr.is-off:hover td{opacity:.8}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--muted);border:1px solid var(--border);
  padding:1px 6px;border-radius:4px;color:var(--muted-fg);
}

/* ---------------- switch ---------------- */
/*
  İki durumlu ayarlar için onay kutusu yerine anahtar.

  Onay kutusu "bu listeden şunları seç" demek; anahtar "bu özellik açık mı"
  demek. Aşının takvimde olup olmaması bir seçim değil, bir durum — ve
  anahtarın açık/kapalı hâli tek bakışta okunuyor.
*/
.switch{
  appearance:none;-webkit-appearance:none;
  width:38px;height:22px;flex:none;cursor:pointer;position:relative;
  background:var(--input);border-radius:999px;transition:background .16s;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:#fff;border-radius:999px;transition:transform .16s;
  box-shadow:0 1px 2px rgb(0 0 0 / .2);
}
.switch:checked{background:var(--primary)}
.switch:checked::after{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.switch-row{display:flex;align-items:center;gap:var(--s3);cursor:pointer}
.switch-row .txt{flex:1;min-width:0}
.switch-row b{display:block;font-size:13.5px;font-weight:500}
.switch-row span{display:block;font-size:12.5px;color:var(--muted-fg)}

/* ---------------- açılır çoklu seçim ---------------- */
/*
  shadcn'deki Popover + Command kalıbının Blade karşılığı.

  Önce çip sırası denendi: sekiz on grup olunca satırı dolduruyor ve süzgeç
  ekranın yarısını kaplıyordu. Açılır liste tek bir düğmeye iniyor, seçilen
  sayısını düğmenin üstünde gösteriyor.

  <details> kullanılmıyor: açık panelin dışına tıklayınca kapanması, Escape
  ile kapanması ve düğmenin durumunu göstermesi gerekiyor — bunlar zaten JS
  istiyor, yarı yolda bir yerel öğe kullanmak iki farklı davranış demek.
*/
.ms{position:relative;display:inline-flex}
.ms-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 12px;border-radius:var(--radius-sm);
  border:1px solid var(--input);background:var(--card);
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.ms-btn:hover{background:var(--muted)}
.ms-btn .caret{
  width:14px;height:14px;color:var(--muted-fg);transition:transform .14s;
}
.ms.open .ms-btn{border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)}
.ms.open .ms-btn .caret{transform:rotate(180deg)}
.ms-count{
  font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:999px;
  background:var(--primary-soft);color:#8E4A3F;
}

.ms-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  min-width:260px;max-width:340px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 24px -8px rgb(0 0 0 / .18),0 2px 6px -2px rgb(0 0 0 / .08);
  display:none;
}
.ms.open .ms-panel{display:block}

.ms-search{padding:8px;border-bottom:1px solid var(--border)}
.ms-search input{
  width:100%;height:32px;padding:0 10px;font-size:13.5px;
  border:1px solid var(--input);border-radius:var(--radius-sm);background:var(--card);
}
.ms-search input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)}

.ms-list{max-height:260px;overflow-y:auto;padding:6px}
.ms-opt{
  display:flex;align-items:center;gap:10px;
  padding:7px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;
}
.ms-opt:hover{background:var(--muted)}
.ms-opt small{margin-left:auto;font-size:11.5px;color:var(--muted-fg);
  font-variant-numeric:tabular-nums}
.ms-empty{padding:18px 12px;text-align:center;color:var(--muted-fg);font-size:13px}

.ms-foot{
  display:flex;align-items:center;gap:6px;
  padding:8px;border-top:1px solid var(--border);
}
.ms-foot .spacer{flex:1}
.ms-link{
  background:none;border:0;cursor:pointer;font-size:12.5px;font-weight:500;
  color:var(--muted-fg);padding:4px 7px;border-radius:5px;
}
.ms-link:hover{background:var(--muted);color:var(--fg)}

/* ---------------- form yerleşimi ---------------- */
/* Alan grupları: tek sütun, iki sütun, üç sütun. Ekranlar kendi grid'ini
   yazmasın diye burada. */
.form-grid{display:grid;gap:var(--s4) var(--s5)}
.form-grid-2{grid-template-columns:repeat(2,1fr)}
.form-grid-3{grid-template-columns:repeat(3,1fr)}
.form-grid .field{margin-bottom:0}
.field-wide{grid-column:1/-1}

/* Kart içinde bölüm ayrımı */
.card-section{padding:var(--s5)}
.card-section+.card-section{border-top:1px solid var(--border)}
.card-section>h3{
  font-size:13px;font-weight:600;margin-bottom:var(--s4);
  color:var(--fg);
}
.card-section>h3 small{display:block;font-weight:400;color:var(--muted-fg);
  font-size:12.5px;margin-top:3px}

@media (max-width:900px){
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
}

/* ---------------- sayfalama çubuğu ---------------- */
/* Sayı aralığı solda, sayfa düğmeleri sağda — "kaçıncı kayıttayım"
   sorusunun cevabı düğmelere bakmadan görünsün. */
.pager-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s5);border-top:1px solid var(--border);flex-wrap:wrap;
}
.pager-bar .pager{padding:0}

/* ---------------- görsel yükleme alanı ---------------- */
.imgfield{display:flex;flex-direction:column;gap:var(--s2)}
.field-label{display:block;font-size:13.5px;font-weight:500}

/*
  Görselin tamamı görünüyor — kırpılmıyor.

  Önce kutu sabit 1.6 orana kilitliydi ve görsel `cover` ile kırpılıyordu:
  yüklenen dikey bir fotoğrafın yarısı görünmüyordu ve kullanıcı neyi
  yüklediğini anlayamıyordu. Şimdi kutu sabit yükseklikte, görsel `contain`
  ile tamamı sığacak şekilde duruyor; kendi oranı korunuyor.

  Uygulamadaki kırpma ayrı bir katmanda gösteriliyor (aşağıdaki .imgfield-crop).
*/
.imgfield-box{
  position:relative;width:100%;max-width:560px;height:280px;
  border:1.5px dashed var(--input);border-radius:var(--radius);
  background:
    linear-gradient(45deg,#F4F4F5 25%,transparent 25%,transparent 75%,#F4F4F5 75%),
    linear-gradient(45deg,#F4F4F5 25%,transparent 25%,transparent 75%,#F4F4F5 75%),
    #FBFBFC;
  background-size:16px 16px;background-position:0 0,8px 8px;
  overflow:hidden;display:grid;place-items:center;
  transition:border-color .14s,background-color .14s;
}
.imgfield-box.drag{border-color:var(--primary);background-color:var(--primary-soft)}
/*
  Kesin boyut + object-fit.

  Önce `max-width/max-height:100%` kullanılmıştı: yüzdelik max-height bir
  grid öğesinde çözülmüyor, görsel doğal oranında 558×372 çiziliyor ve 280px
  yükseklikteki kutu alttan kesiyordu — tam da "sığmıyor" denen şey.
  Elemana kesin boyut verilince object-fit devreye giriyor ve görseli
  kutunun içine harflendirerek (letterbox) yerleştiriyor.
*/
.imgfield-preview{
  width:100%;height:100%;object-fit:contain;display:block;
  /* Grid öğelerinin varsayılan min-height değeri `auto`; görselin doğal
     yüksekliği küçülmeyi engelliyor ve height:100% hiçbir işe yaramıyordu.
     Sıfırlamadan bu kutu çalışmıyor. */
  min-width:0;min-height:0;
}

/* Uygulamada görünecek alanın çerçevesi — oran farklıysa neyin kırpılacağı
   belli olsun. Sadece görsel varken çizilir. */
.imgfield-crop{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:2px dashed rgba(232,134,123,.9);border-radius:4px;
  pointer-events:none;display:none;
}
.imgfield-crop::after{
  content:"uygulamada görünen alan";
  position:absolute;left:0;bottom:-22px;
  font-size:11px;font-weight:600;color:var(--primary);
  background:var(--card);padding:1px 5px;border-radius:4px;white-space:nowrap;
}

.imgfield-empty{text-align:center;color:var(--muted-fg);padding:var(--s4);pointer-events:none}
.imgfield-empty svg{width:28px;height:28px;opacity:.5;margin-bottom:var(--s2)}
.imgfield-empty p{font-size:13.5px;font-weight:500;color:var(--fg)}
.imgfield-empty span{font-size:12.5px;display:block;margin-top:3px}

.imgfield-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.imgfield-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.imgfield-meta{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:var(--muted-fg)}
.imgfield-meta b{color:var(--fg);font-weight:500}

@media (max-width:600px){
  .imgfield-box{height:200px}
  .imgfield-crop::after{display:none}
}

/* Tabloda görsel küçük resmi */
/*
  Listedeki görsel — tamamı görünür.

  Önce `cover` ile kırpılıyordu: bir banner'ı listede tanımanın tek yolu
  görseli, kırpılmış hâli hangi banner olduğunu söylemiyor. Kutu banner
  oranında (1.6), farklı oranlı görseller kendi oranıyla ortalanıyor.
*/
.thumb{
  width:128px;height:80px;object-fit:contain;border-radius:var(--radius-sm);
  border:1px solid var(--border);display:block;
  background:
    linear-gradient(45deg,#F4F4F5 25%,transparent 25%,transparent 75%,#F4F4F5 75%),
    linear-gradient(45deg,#F4F4F5 25%,transparent 25%,transparent 75%,#F4F4F5 75%),
    #FBFBFC;
  background-size:12px 12px;background-position:0 0,6px 6px;
}

/* ============================================================ metin editörü
   Makale metni: araç çubuğu, yazma alanı ve canlı önizleme.

   Önizleme kutusunun tipografisi bilerek uygulamadakine yakın tutuldu —
   panelin kendi yazı ölçüleriyle çizilseydi, yazar burada gördüğü satır
   uzunluğunun telefonda da öyle olacağını sanardı.
   ------------------------------------------------------------------------ */
.md{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}

.md-bar{
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;
  padding:6px;background:var(--muted);border-bottom:1px solid var(--border);
}
.md-bar button{
  height:30px;min-width:30px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--fg);cursor:pointer;font-size:13px;line-height:1;
}
.md-bar button:hover{background:var(--card);border-color:var(--border)}
.md-bar button:focus-visible{outline:2px solid var(--ring);outline-offset:-1px}
.md-bar button svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.md-bar .sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.md-bar .busy{margin-left:auto;font-size:12.5px;color:var(--muted-fg);padding-right:6px}

/* İki sütun: solda kaynak, sağda önizleme. Dar ekranda alt alta. */
.md-panes{display:grid;grid-template-columns:1fr 1fr}
.md-panes>*+*{border-left:1px solid var(--border)}
@media (max-width:980px){
  .md-panes{grid-template-columns:1fr}
  .md-panes>*+*{border-left:0;border-top:1px solid var(--border)}
}

/* .field textarea kuralını ezmesi gerekiyor: burada çerçeve kutunun kendisinde. */
.md-panes textarea{
  width:100%;min-height:420px;border:0;border-radius:0;padding:var(--s4);
  resize:vertical;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:13px;line-height:1.7;background:var(--card);
}
.md-panes textarea:focus{outline:0;box-shadow:none}

.md-preview{
  padding:var(--s4);background:#FBFBFC;overflow-wrap:anywhere;
  max-height:560px;overflow-y:auto;
}
.md-empty{color:var(--muted-fg);font-size:13px}

.md-p{font-size:15px;line-height:1.6;color:var(--fg);margin:0 0 14px}
.md-center{text-align:center}
.md-h2{font-size:19px;line-height:1.35;font-weight:700;margin:10px 0 8px}
.md-h3{font-size:16px;line-height:1.4;font-weight:600;margin:8px 0 6px}
.md-li{display:flex;gap:8px;margin-bottom:8px;font-size:15px;line-height:1.6}
.md-li>span:first-child{color:var(--muted-fg);min-width:18px}
.md-link{color:var(--primary);text-decoration:underline}
.md-img{
  display:block;width:100%;height:auto;border-radius:12px;margin:12px 0;
  background:var(--muted);
}

.md-foot{
  display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  padding:8px var(--s4);border-top:1px solid var(--border);
  background:var(--muted);font-size:12.5px;color:var(--muted-fg);
}

/* ============================================================ ürün galerisi
   Sürükleyerek sıralanan görsel şeridi. Sıra kendiliğinden kaydedildiği için
   ayrı bir "kaydet" düğmesi yok; numara ve "kapak" etiketi bırakıldığı anda
   güncelleniyor.
   ------------------------------------------------------------------------ */
.gal{display:flex;flex-wrap:wrap;gap:var(--s3)}
.gal-item{
  position:relative;width:118px;height:118px;flex:none;cursor:grab;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--muted);transition:box-shadow .12s,opacity .12s;
}
.gal-item:hover{box-shadow:0 4px 12px -4px rgb(0 0 0 / .18)}
.gal-item.dragging{opacity:.45;cursor:grabbing}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* Sıra numarası — sürüklerken hangi konumda olduğu görünsün. */
.gal-no{
  position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--radius-sm);
  background:rgb(24 24 27 / .72);color:#fff;font-size:11px;font-weight:600;
}
.gal-cover{
  position:absolute;bottom:6px;left:6px;padding:2px 7px;border-radius:var(--radius-sm);
  background:var(--primary);color:var(--primary-fg);font-size:10.5px;font-weight:600;
}
.gal-del{
  position:absolute;top:5px;right:5px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:var(--radius-sm);
  background:rgb(24 24 27 / .72);color:#fff;cursor:pointer;opacity:0;
  transition:opacity .12s,background .12s;
}
.gal-item:hover .gal-del{opacity:1}
.gal-del:hover{background:var(--danger)}
.gal-del svg{width:12px;height:12px}
.gal-del:focus-visible{opacity:1;outline:2px solid var(--ring);outline-offset:1px}

/* ================================================================== sekmeler
   shadcn Tabs ölçüleri: soluk zeminli bir şerit, seçili olan kart rengine
   çıkıyor. Bölümleri gizlemek yerine yan yana koymak uzun sayfayı kısaltıyor
   — ama yalnızca her sekme kendi başına anlamlıysa. Tek bir formun alanlarını
   sekmelere bölmek, gizli sekmedeki doğrulama hatasını görünmez yapar.
   ------------------------------------------------------------------------ */
.tabs{
  display:inline-flex;gap:2px;padding:3px;flex-wrap:wrap;
  background:var(--muted);border-radius:var(--radius);
}
.tabs button,
.tabs a{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted-fg);
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s;
}
.tabs button:hover,
.tabs a:hover{color:var(--fg)}
.tabs button[aria-selected="true"],
.tabs a[aria-selected="true"]{
  background:var(--card);color:var(--fg);
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .06);
}
.tabs button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}

/* Sekmedeki sayı — kaç görsel, kaç fiyat olduğu açılmadan görünsün. */
.tabs .n{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-grid;place-items:center;
  background:var(--border);color:var(--muted-fg);font-size:11px;font-weight:600;
}
.tabs button[aria-selected="true"] .n{background:var(--muted)}

/*
  Panel, .stack'in yaptığı dikey aralığı sürdürüyor.

  Sekme içeriği doğrudan .content'in çocuğu olmadığı için oradaki gap ona
  ulaşmıyordu; kartlar birbirine yapışıyordu.
*/
.tab-panel{display:flex;flex-direction:column;gap:var(--s4)}
.tab-panel[hidden]{display:none}

/* Hatalı sekme — kaydetmeyi engelleyen alan hangi sekmedeyse orada. */
.tabs button[data-tab-error]{color:var(--danger)}
.tabs .n-err{background:var(--danger);color:#fff}
.tabs button[aria-selected="true"] .n-err{background:var(--danger);color:#fff}

/* =========================================================== kitle seçimi
   Bildirimde kime gideceği. Kaç kişi olduğu seçenekle birlikte duruyor:
   yayınlanan duyuru geri alınabilse de herkesin kutusuna düşüyor, sayıyı
   seçtikten sonra aramak geç oluyor.
   ------------------------------------------------------------------------ */
.aud{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.aud-opt{
  display:flex;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .12s,background .12s;
}
.aud-opt:hover{background:var(--muted)}
.aud-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.aud-opt input{margin-top:3px;flex:none;accent-color:var(--primary)}
.aud-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.aud-body b{font-size:13.5px;font-weight:600}
.aud-body .muted{font-size:12px;line-height:1.45}
.aud-n{font-size:12.5px;font-weight:600;color:var(--primary)}

/* ============================================================ beden seçimi
   Dokuz kutucuk; beden numarası büyük, yaş karşılığı altında küçük.
   ------------------------------------------------------------------------ */
.sizes{display:flex;flex-wrap:wrap;gap:var(--s2)}
.size-opt{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  transition:border-color .12s,background .12s;
}
.size-opt:hover{background:var(--muted)}
.size-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.size-opt input{accent-color:var(--primary);flex:none}
.size-opt span{display:flex;flex-direction:column;line-height:1.25}
.size-opt b{font-size:13.5px;font-weight:600}
.size-opt .muted{font-size:11px}

/* Fiyat seyri — tek çizgi, kütüphanesiz. */
.spark{width:100%;height:90px;display:block;margin-top:10px;overflow:visible}
.spark-line{fill:none;stroke:var(--primary);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spark-fill{fill:var(--primary-soft);stroke:none}

/* Arkasında veri kaynağı olmayan kutu — sayı yokluğu görünür olmalı,
   yoksa "0" sanılıyor. */
.stat.is-off{background:var(--muted);border-style:dashed}
.stat.is-off .v{color:var(--muted-fg)}

/* ============================================================ onay penceresi
   Yerel <dialog>: odak tuzağı, Esc ile kapanma ve arka plan karartması
   tarayıcıdan geliyor — elle yazılan modal bunların hepsini kaçırıyor.
   ------------------------------------------------------------------------ */
.dlg{
  /* margin:auto ortalamayı sağlıyor. Tarayıcının kendi <dialog> biçimi bunu
     zaten veriyor ama sayfanın sıfırlaması (*{margin:0}) eziyordu — o yüzden
     burada geri konuluyor, yoksa pencere sol üst köşede açılıyor. */
  margin:auto;
  width:min(560px,calc(100vw - 32px));padding:0;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--card);color:var(--fg);
  box-shadow:0 24px 48px -12px rgb(0 0 0 / .18);
}
.dlg::backdrop{background:rgb(15 15 15 / .45)}

.dlg-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
}
.dlg-head h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.dlg-x{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:0;border-radius:var(--radius-sm);background:none;color:var(--muted-fg);cursor:pointer;
}
.dlg-x:hover{background:var(--muted);color:var(--fg)}
.dlg-x svg{width:16px;height:16px}

.dlg-body{
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
  max-height:min(62vh,560px);overflow-y:auto;
}

/* Ne gönderileceğinin birebir önizlemesi. */
.dlg-preview{display:flex;gap:var(--s3);align-items:flex-start}
.dlg-preview img{
  width:72px;height:36px;flex:none;object-fit:cover;
  border-radius:var(--radius-sm);border:1px solid var(--border);
}
.dlg-preview b{display:block;font-size:14.5px;line-height:1.35}
.dlg-preview p{margin:4px 0 0;font-size:13px;line-height:1.45}

.dlg-facts{margin:0;display:flex;flex-direction:column;gap:8px}
.dlg-facts > div{display:flex;gap:var(--s3);align-items:baseline}
.dlg-facts dt{
  flex:none;width:132px;font-size:12.5px;color:var(--muted-fg);
}
.dlg-facts dd{margin:0;font-size:13.5px}

/* Seçilen zamanla birlikte tek cümlelik özet — kaydet düğmesinin üstünde. */
.dlg-summary{
  margin:0;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);
  background:var(--primary-soft);font-size:13px;line-height:1.5;
}
.dlg-summary.is-err{background:var(--danger-soft);color:var(--danger)}

.dlg-foot{
  display:flex;justify-content:flex-end;gap:var(--s2);
  padding:var(--s4) var(--s5);border-top:1px solid var(--border);background:var(--muted);
  border-radius:0 0 var(--radius) var(--radius);
}
.dlg-foot .btn[disabled]{opacity:.5;pointer-events:none}
/* "Düzenle" solda, onay ve vazgeç sağda: düzenleme kipini açmak gönderimden
   ayrı bir iş, aynı öbekte durunca yanlışlıkla basılıyor. */
.dlg-foot .spacer{flex:1}

/* Pencere içindeki bölüm başlığı — hemen altındaki alan etiketine
   yapışmasın. */
.dlg-body .field-label{margin-bottom:var(--s3)}

@media (max-width:560px){
  .dlg-facts > div{flex-direction:column;gap:2px}
  .dlg-facts dt{width:auto}
}

/* Pencere içindeki kip değişimi. `hidden` yerine sınıf kullanılıyor: alanlar
   formda kalmalı ki gizliyken de gönderilsinler — yalnızca görünmesinler. */
.is-hidden{display:none}

.dlg-thumb{
  width:64px;height:32px;flex:none;object-fit:cover;
  border-radius:var(--radius-sm);border:1px solid var(--border);
}

/* Kimseye ulaşmayacak gönderim gibi, engellemediğimiz ama sessiz de
   geçmediğimiz durumlar. */
.dlg-summary.is-warn{background:var(--warn-soft);color:#854D0E;
  border:1px solid var(--warn-border)}

/* ============================================================ seçim kartları
   Birkaç seçenekten birini seçtiren radyo öbeği (yayın durumu gibi).
   Kitle seçimindeki `.aud-opt` ile aynı görsel dil; orası kendi sayısal
   düzenine bağlı olduğu için ayrı duruyor.
   ------------------------------------------------------------------------ */
.choices{display:flex;flex-direction:column;gap:var(--s2)}
.choice{
  display:flex;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .12s,background .12s;
}
.choice:hover{background:var(--muted)}
.choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.choice input{margin-top:3px;flex:none;accent-color:var(--primary)}
.choice-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice-body b{font-size:13.5px;font-weight:600}
.choice-body span{font-size:12px;line-height:1.45;color:var(--muted-fg)}

/* ======================================================= ilan görselleri
   Kullanıcının yüklediği fotoğraflar. Kırpılmıyor — inceleyen kişi ürünün
   tamamını görmeli; kırpılmış bir fotoğrafta kusur gizlenebilir.
   ------------------------------------------------------------------------ */
.shots{display:flex;flex-wrap:wrap;gap:var(--s3)}
.shot{
  display:block;width:150px;height:150px;flex:none;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);
  transition:border-color .12s;
}
.shot:hover{border-color:var(--primary)}
.shot img{width:100%;height:100%;object-fit:contain;display:block}

/* Kullanıcının yazdığı serbest metin. Satır sonları korunuyor: ilan
   açıklamaları madde madde yazılıyor ve tek paragrafa sıkışınca okunmuyor. */
.userbody{
  margin:6px 0 0;padding:var(--s3) var(--s4);
  background:var(--muted);border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
}

/* Menüdeki bekleyen sayısı — "yakında" etiketiyle aynı yeri kullanıyor ama
   bu bir uyarı, o yüzden vurgulu. */
.tail-n{
  background:var(--primary);color:#fff;font-weight:600;
  min-width:20px;text-align:center;border-radius:999px;padding:1px 6px;
}

/* ==================================================== inceleme kontrol listesi
   Hangi alanın düzeltilmesi gerektiği işaretleniyor; işaretlenince o satırın
   not kutusu açılıyor.
   ------------------------------------------------------------------------ */
.checklist{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3)}
.check-row{
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  transition:border-color .12s,background .12s;
}
.check-row:hover{background:var(--muted)}
.check-row.is-on{border-color:var(--danger);background:var(--danger-soft)}
.check-head{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.check-head input{accent-color:var(--danger);flex:none}
.check-head span{font-weight:600}
.check-row input[type=text]{
  width:100%;margin-top:8px;font-size:13px;
}

/* Verilen kararın okunur özeti — panelde ve sahibinde aynı sıra. */
.checklist-out{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0}
.checklist-out li{
  padding:9px 12px;border-left:3px solid var(--danger);
  background:var(--danger-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.checklist-out b{display:block;font-size:13px;font-weight:600}
.checklist-out span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted-fg)}

/* ===================================================== sıra düğmeleri
   Listede satırı yukarı/aşağı taşımak. Numara alanı, araya bir kayıt
   eklemek isteyeni bütün listeyi yeniden numaralamaya zorluyordu.
   ------------------------------------------------------------------------ */
.ord{display:inline-flex;gap:2px}
.ord button{
  width:26px;height:26px;line-height:1;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);color:var(--muted-fg);
  font-size:13px;cursor:pointer;transition:background .12s,color .12s;
}
.ord button:hover:not(:disabled){background:var(--muted);color:var(--fg)}
.ord button:disabled{opacity:.35;cursor:default}
.ord form{display:inline}

/* ========================================================== yıldız puanı
   Salt okunur gösterim. Yıldızlar metin karakteri: tek renkli bir simge
   için SVG yüklemek gereksiz ve hizalaması daha zor.
   ------------------------------------------------------------------------ */
.stars{display:inline-flex;gap:1px;font-size:13px;line-height:1;color:var(--border)}
.stars .on{color:#E9A23B}
.stars-lg{font-size:22px;gap:2px}

/* ==================================================== yıldız dağılımı
   Kaç kişi kaç yıldız vermiş. Ortalama tek başına yanıltıcı: 3,0 puan
   herkesin "orta" demesi de olabilir, yarısının 5 yarısının 1 demesi de.
   ------------------------------------------------------------------------ */
.bars{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.bar-k{flex:none;width:34px;color:var(--muted-fg)}
.bar-t{flex:1;height:8px;border-radius:999px;background:var(--muted);overflow:hidden}
.bar-f{display:block;height:100%;background:#E9A23B;border-radius:999px}
.bar-n{flex:none;width:28px;text-align:right;color:var(--muted-fg)}

/* ---------------------------------------------- makale önizlemesi: yeni bloklar
 *
 * Önizlemenin uygulamadaki görüntüye benzemesi gerekiyor; birebir aynı
 * olamaz (font ve genişlik farklı) ama **aynı şeyi anlatmalı**: alıntı
 * solunda çizgiyle ve eğik, bilgi kutusu şeftali zeminde, ayraç ince bir
 * çizgi, altyazı görselin altında küçük ve ortalı.
 */
.md-quote{
  margin:14px 0;padding:2px 0 2px 14px;
  border-left:3px solid var(--primary);
  color:var(--muted);font-style:italic;
}
.md-note{
  margin:14px 0;padding:2px 14px;
  background:var(--primary-soft,#FDE8E8);border-radius:14px;
}
.md-rule{
  margin:22px 0;border:0;border-top:1px solid var(--border);
}
.md-fig{margin:14px 0}
.md-fig figcaption{
  margin-top:6px;text-align:center;
  font-size:12.5px;color:var(--muted);
}