/* ==========================================================================
   Yönetim paneli — form ve içerik bileşenleri
   Yenilendi: 29 Temmuz 2026

   admin.css taban tasarımı kuruyor (renkler, yerleşim, kartlar, tablolar,
   düğmeler). Bu dosya onun üzerine formları ve daha küçük parçaları
   ekliyor. İkisi birlikte panelin tamamını kaplıyor.

   Buradaki hiçbir kural bir sınıfı yeniden adlandırmıyor: şablonlar
   dünkü hâliyle duruyor, yalnızca görünüm değişti.

   YAPI
     1. Form ızgarası ve alanlar   2. Girdi denetimleri
     3. Filtre çubuğu              4. Stok düzeltme satırı
     5. İç formlar                 6. Görseller
     7. Yardımcı sınıflar          8. Sayfalama
     9. Duyarlı davranış
   ========================================================================== */

/* 1. Form ızgarası ve alanlar --------------------------------------------- */

body.admin .form {
  display: block;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 0.85rem;
}

/* Geniş form: tek sütun, uzun metin alanları için. */
.form--wide .form-grid {
  grid-template-columns: 1fr;
}

body.admin .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
}

.field--inline input[type="checkbox"],
.field--inline input[type="radio"] {
  margin-top: 0.25rem;
}

.field--tight {
  gap: 0.15rem;
}

.field--grow {
  flex: 1 1 14rem;
}

/* Alan etiketi: küçük, büyük harf, silik. Değerin kendisinden geri
   planda dursun diye. */
/*
   Alan etiketi.

   BÜYÜK HARF VE HARF ARALIĞI KALDIRILDI. Küçük büyük-harf etiketler
   yönetim panellerinin eski dili; bugünkü satıcı panelleri normal
   cümle düzeniyle yazıp ayrımı punto ve renkle yapıyor.
*/
body.admin .field__label {
  color: var(--y-metin-soluk);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.field__hint {
  color: var(--y-metin-silik);
  font-size: 0.75rem;
  line-height: 1.45;
}

.field__static {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
}

/* Yatay alan sırası (ör. ad + soyad) */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1rem;
}

/* Alan kümesi — form içindeki bölüm başlığı */
body.admin .form__group {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

body.admin .form__legend {
  margin-bottom: 0.6rem;
  padding: 0;
  color: var(--y-metin);
  font-size: 0.875rem;
  font-weight: 600;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--y-kenar);
}

/* 2. Girdi denetimleri ---------------------------------------------------- */

body.admin input[type="text"],
body.admin input[type="email"],
body.admin input[type="password"],
body.admin input[type="search"],
body.admin input[type="number"],
body.admin input[type="tel"],
body.admin input[type="url"],
body.admin input[type="date"],
body.admin input[type="datetime-local"],
body.admin select,
body.admin textarea {
  width: 100%;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--y-kenar-koyu);
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey);
  color: var(--y-metin);
  font: inherit;
  font-size: 0.8125rem;
  transition: border-color var(--y-gecis), box-shadow var(--y-gecis);
}

body.admin textarea {
  min-height: 68px;
  line-height: 1.5;
  resize: vertical;
}

body.admin select {
  appearance: none;

  /* Ok işareti satır içi SVG — ek dosya istemesin diye. */
  background-image: var(--y-ok-ikon);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 12px;
  padding-right: 1.9rem;
}

body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus {
  outline: 0;
  border-color: var(--y-vurgu);
  box-shadow: 0 0 0 2px var(--y-vurgu-acik);
}

/* Sunucu doğrulaması bir alanı işaretlediyse kenarı kırmızı olsun. */
body.admin [aria-invalid="true"] {
  border-color: var(--y-tehlike);
}

body.admin [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--y-tehlike-bg);
}

body.admin input[type="color"] {
  width: 2.75rem;
  min-height: 34px;
  padding: 3px;
  border: 1px solid var(--y-kenar-koyu);
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey);
  cursor: pointer;
}

body.admin input[type="checkbox"],
body.admin input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--y-vurgu);
  cursor: pointer;
}

/* Dosya seçici — kenarlığı kesikli ki "buraya dosya" olduğu anlaşılsın. */
body.admin input[type="file"] {
  width: 100%;
  padding: 0.55rem;
  border: 1px dashed var(--y-kenar-koyu);
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey-alt);
  font: inherit;
  font-size: 0.8125rem;
}

body.admin input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--y-kenar-koyu);
  border-radius: 5px;
  background: var(--y-yuzey);
  color: var(--y-metin);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* Tablo satırındaki dar girdiler */
.input--tight {
  max-width: 9rem;
  min-height: 30px !important;
  padding: 0.25rem 0.45rem !important;
  font-size: 0.8125rem !important;
}

/* 3. Filtre çubuğu -------------------------------------------------------- */

/*
   Filtreler beyaz bir çubuk hâline geldi ve kartlarla aynı dili
   konuşuyor. Eskiden sayfa zemininde serbest duruyordu ve nereye ait
   olduğu belirsizdi.
*/
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--y-yuzey);
  border: 1px solid var(--y-kenar);
  border-radius: var(--y-yaricap-lg);
  box-shadow: none;
}

.filters .field {
  min-width: 9rem;
}

.filters .btn {
  min-height: 34px;
}

/* 4. Stok düzeltme satırı ------------------------------------------------- */

.adjust {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.adjust .field {
  min-width: 6.5rem;
}

.adjust .btn {
  min-height: 34px;
}

/* 5. İç formlar ----------------------------------------------------------- */

.inline-form {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--y-kenar);
}

.inline-form__title {
  margin: 0 0 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Ürün formundaki not satırı */
.note-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  color: var(--y-metin-soluk);
  font-size: 0.8125rem;
}

/* 6. Görseller ------------------------------------------------------------ */

.thumb-cell {
  width: 56px;
}

.thumb {
  display: block;
  width: 44px;
  height: 55px;
  border-radius: 5px;
  background: var(--y-notr-bg);
  object-fit: cover;
}

.thumb--bos {
  border: 1px dashed var(--y-kenar-koyu);
  background: transparent;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
}

.gallery__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.6rem;
  border: 1px solid var(--y-kenar);
  border-radius: var(--y-yaricap-lg);
  background: var(--y-yuzey-alt);
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--y-kenar);
  border-radius: 6px;
  background: var(--y-yuzey);
  object-fit: cover;
}

.gallery__item figcaption {
  margin-top: 0.45rem;
  color: var(--y-metin-soluk);
  font-size: 0.75rem;
  line-height: 1.4;
}

.gallery__form {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--y-kenar);
}

.gallery__form .input--tight {
  max-width: none;
  width: 100%;
}

.gallery__item form + form {
  margin-top: 0.4rem;
}

.gallery__item .btn {
  width: 100%;
}

/* 5b. Kart içindeki tablolar ---------------------------------------------- */

/*
   Tablo kartın kenarına yaslanır. Kartın kendi iç boşluğu yok; boşluk
   doğrudan çocuklara veriliyor (admin.css). Toplu işlem formuna sarılı
   tablolar bir kat daha içeride kalıyordu — negatif kenar boşluğu
   ikisini aynı hizaya getiriyor.
*/
.panel form > .table-wrap {
  margin-inline: -1rem;
}

/* 6b. Tema düğmesi -------------------------------------------------------- */

.admin-side__tema {
  margin-top: 0.5rem;
  padding: 0 0.6rem;
}

.admin-side__tema .btn {
  width: 100%;
}

/* 7. Yardımcı sınıflar ---------------------------------------------------- */

.empty {
  margin: 0;
  padding: 2.5rem 1rem;
  color: var(--y-metin-silik);
  font-size: 0.8125rem;
  text-align: center;
}

.muted {
  color: var(--y-metin-silik);
  font-size: 0.8125rem;
}

/* Artı ve eksi değerler — stok hareketlerinde ve kâr sütununda. */
.pos {
  color: var(--y-ok);
  font-variant-numeric: tabular-nums;
}

.neg {
  color: var(--y-tehlike);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Panel özetindeki basit sütun grafik */
.bars {
  display: flex;
  align-items: end;
  gap: 0.4rem;
  height: 150px;
  padding-top: 0.75rem;
}

.bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 0.35rem;
}

.bars__bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--y-vurgu);
  opacity: 0.85;
}

.bars__label {
  color: var(--y-metin-silik);
  font-size: 0.6875rem;
}

/* Adet seçici (eski panelden devralındı) */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--y-kenar-koyu);
  border-radius: var(--y-yaricap);
  overflow: hidden;
}

.qty__btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--y-yuzey-alt);
  color: var(--y-metin);
  font-size: 1rem;
  cursor: pointer;
}

.qty__input {
  width: 46px;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* 7b. Bildirimler ---------------------------------------------------------- */

/*
   İki biçim var, ikisi de aynı veriyi gösteriyor; hangisinin
   çıkacağını panelden seçiliyor (Ayarlar › Bildirimler).

     .bildirim-yigin / .bildirim   → sağ üst köşe, işi kesmez
     .bildirim-modal               → ekranın ortası, işi keser

   Köşe bildirimi varsayılan: sipariş gelmesi güzel bir haber ama
   yaptığın işi durdurmayı hak etmiyor. Yoğun olmayan bir mağazada
   pop-up daha uygun olabilir, o yüzden seçenek bırakıldı.
*/

.bildirim-yigin {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: grid;
  gap: 0.6rem;
  width: min(22rem, calc(100vw - 2rem));
}

.bildirim {
  padding: 0.85rem 1rem;
  border: 1px solid var(--y-kenar);
  border-left: 4px solid var(--y-vurgu);
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey);
  box-shadow: var(--y-golge-lg);
  animation: bildirimGir 220ms ease;
}

@keyframes bildirimGir {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: none; }
}

.bildirim--kapaniyor {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.bildirim__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.bildirim__etiket {
  color: var(--y-vurgu);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bildirim__kapat,
.bildirim-modal__kapat {
  border: 0;
  background: transparent;
  color: var(--y-metin-silik);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.bildirim__kapat:hover,
.bildirim-modal__kapat:hover {
  color: var(--y-metin);
}

.bildirim__no {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
}

.bildirim__satir {
  margin: 0.15rem 0 0;
  color: var(--y-metin-soluk);
  font-size: 0.8125rem;
}

.bildirim__tutar {
  color: var(--y-metin);
  font-weight: 600;
}

/* Pop-up biçimi */

.bildirim-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}

.bildirim-modal__kutu {
  width: min(30rem, 100%);
  padding: 1.25rem;
  border-radius: var(--y-yaricap-lg);
  background: var(--y-yuzey);
  box-shadow: var(--y-golge-lg);
}

.bildirim-modal__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--y-kenar);
}

.bildirim-modal__ust h2 {
  font-size: 1.05rem;
}

.bildirim-modal__liste {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bildirim-modal__satir {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey-alt);
  font-size: 0.8125rem;
  color: var(--y-metin-soluk);
}

.bildirim-modal__satir strong {
  font-size: 0.9375rem;
}

.bildirim-modal__fazla {
  margin: 0.75rem 0 0;
  color: var(--y-metin-silik);
  font-size: 0.8125rem;
}

.bildirim-modal__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--y-kenar);
}

/* Dar ekranda köşe bildirimi tam genişlik alsın. */
@media (max-width: 480px) {
  .bildirim-yigin {
    top: auto;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
  }
}

/* 8. Sayfalama ------------------------------------------------------------ */

/*
   Laravel'in sayfalama görünümü `resources/views/vendor/pagination`
   altında; bağlantıları `.pagination` sarmalıyor. Kutucuklar kart
   diliyle aynı: beyaz zemin, ince kenar, seçili sayfa lacivert.
*/
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--y-kenar);
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey);
  color: var(--y-metin-soluk);
  font-weight: 600;
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--y-metin-silik);
  background: var(--y-yuzey-alt);
  color: var(--y-metin);
  text-decoration: none;
}

.pagination .pagination__aktif {
  border-color: var(--y-vurgu);
  background: var(--y-vurgu);
  color: var(--y-vurgu-metin);
}

.pagination .pagination__pasif {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination__ozet {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--y-metin-silik);
  font-weight: 400;
}

/* 9. Duyarlı davranış ----------------------------------------------------- */

@media (max-width: 640px) {
  .filters,
  .adjust {
    flex-direction: column;
    align-items: stretch;
  }

  .filters .field,
  .adjust .field {
    min-width: 0;
  }

  .form-grid,
  .field-row {
    grid-template-columns: 1fr;
  }

  .form__actions .btn {
    flex: 1;
  }

  .pagination__ozet {
    width: 100%;
    margin: 0.4rem 0 0;
    text-align: center;
  }
}

/* ==========================================================================
   9 · CANLI EKRAN  (31 Tem'de eklendi)

   Panel özetindeki grafikler, canlı ziyaretçi kutusu ve kargo listesi.
   Bu bölüm yalnızca EKLEME yapıyor; yukarıdaki hiçbir kural
   değiştirilmedi. Renklerin tamamı admin.css'teki tema değişkenlerinden
   geliyor, dolayısıyla koyu temada da doğru çalışıyor.
   ========================================================================== */

/* --- Şerit başlıkları --- */

/*
 | Kutu şeritlerinin üstündeki küçük başlık. Önceden "bekleyen sipariş"
 | ile "bu ay ciro" yan yana duruyor ama hangisinin hangi döneme ait
 | olduğu belli olmuyordu; dört kutuya birden ne olduğunu söyleyen tek
 | satır, her kutuya ayrı ayrı yazmaktan hem kısa hem net.
 */
.serit-basligi {
  margin: 0 0 0.35rem;
  color: var(--y-metin-silik);
  font-size: 0.75rem;
  font-weight: 500;
}

.serit-basligi:not(:first-child) {
  margin-top: 1.1rem;
}

/* --- Üst şerit: canlı sayaç + bugün/dün + kargolanacak --- */

.canli-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 0.75rem;
}

/*
 | Canlı kutusu vurgulu duruyor: sayfadaki tek değişen sayı o.
 | Sol kenardaki turuncu şerit, kenar çubuğundaki seçili maddeyle
 | aynı dili konuşuyor.
 */
.stat--canli {
  box-shadow: inset 3px 0 0 var(--y-vurgu);
}

/* Kimse yokken vurgu geri çekiliyor — sıfırı öne çıkarmak yanıltıcı. */
.stat--canli-bos {
  box-shadow: inset 3px 0 0 var(--y-kenar-koyu);
}

.stat--canli-bos .canli-nokta {
  background: var(--y-metin-silik);
  animation: none;
}

.stat__label .canli-nokta {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--y-ok);
  vertical-align: middle;
  animation: canli-nabiz 2s ease-in-out infinite;
}

@keyframes canli-nabiz {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/*
 | Hareketi kapatmış kullanıcıya nabız atmıyor. Sürekli yanıp sönen
 | bir nokta, hareket duyarlılığı olan biri için ekranda kalıcı bir
 | rahatsızlık kaynağı.
 */
@media (prefers-reduced-motion: reduce) {
  .stat__label .canli-nokta {
    animation: none;
  }
}

.artis { color: var(--y-ok); }
.dusus { color: var(--y-tehlike); }

/* --- Çizgi grafik --- */

/*
 | Sarmalayıcı, .panel'in çocuk boşluğu kuralından payını alıyor
 | (margin-inline: 1rem). Grafiğin kendisine boşluk vermek yerine
 | buraya vermek, dar ekranda kaydırma alanının kutuya tam oturmasını
 | sağlıyor.
 */
.grafik-sar {
  overflow-x: auto;
}

/* İpucu balonu buna göre konumlanıyor. */
.grafik-kutu {
  position: relative;
}

.grafik {
  display: block;
  width: 100%;
  height: auto;
}

/* Yakalayıcılar görünmez ama fareyi karşılıyor: fill yerine
   pointer-events kullanılıyor, çünkü fill:none olan bir şekil fare
   olaylarını almaz. */
/*
 | Yakalayıcılar görünmez ama fareyi karşılıyor: fill:none olan bir
 | şekil fare olaylarını almaz, o yüzden `transparent` kullanılıyor.
 |
 | İMLEÇ ARTI DEĞİL. İlk sürümde `crosshair` yazılmıştı; hedef alma
 | hissi versin diye. Ama artı imleç web'de "buraya bir şey
 | işaretleyeceksin" anlamına geliyor ve burada işaretlenecek bir şey
 | yok — grafiğin üzerinde gezinmek okuma eylemi. Varsayılan ok
 | doğrusu.
 */
.grafik__yakala {
  fill: transparent;
}

.grafik__ayirac {
  stroke: var(--y-kenar);
  stroke-width: 1;
}

.grafik__taban {
  stroke: var(--y-kenar-koyu);
  stroke-width: 1;
}

.grafik__bant-basligi {
  fill: var(--y-metin-soluk);
  font-size: 11px;
  font-weight: 500;
}

/* --- Fare imleci --- */

/*
 | SVG öğelerinde `hidden` özniteliği işlemiyor — tarayıcının
 | `[hidden] { display: none }` kuralı yalnızca HTML öğelerine bakıyor.
 | Gizleme bu yüzden sınıfla yapılıyor.
 */
.grafik__imlec--gizli {
  display: none;
}

.grafik__imlec line {
  stroke: var(--y-metin-silik);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.grafik__imlec circle {
  fill: var(--y-vurgu);
  stroke: var(--y-yuzey);
  stroke-width: 2;
}

/* --- İpucu balonu --- */

/*
 | translateX(-50%) ile kendi genişliğinin yarısı kadar sola kayıyor;
 | betik yalnızca sütunun merkezini veriyor, ortalamayı CSS yapıyor.
 | Böylece balonun genişliği değişse bile hesap doğru kalıyor.
 */
.grafik-ipucu {
  position: absolute;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  background: var(--y-yuzey);
  border: 1px solid var(--y-kenar-koyu);
  border-radius: var(--y-yaricap);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.grafik-ipucu[hidden] {
  display: none;
}

.grafik-ipucu__tarih {
  margin-bottom: 0.15rem;
  color: var(--y-metin-silik);
  font-size: 0.6875rem;
}

.grafik-ipucu__satir {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--y-metin-soluk);
}

.grafik-ipucu__satir strong {
  margin-left: auto;
  padding-left: 0.7rem;
  color: var(--y-metin);
  font-variant-numeric: tabular-nums;
}

.grafik-ipucu__benek {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.grafik-ipucu__benek--ciro { background: var(--y-vurgu); }
.grafik-ipucu__benek--adet {
  background: var(--y-metin-silik);
  opacity: 0.55;
}

.grafik__kilavuz {
  stroke: var(--y-kenar);
  stroke-width: 1;
}

.grafik__eksen {
  fill: var(--y-metin-silik);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.grafik__cizgi {
  fill: none;
  stroke: var(--y-vurgu);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/*
 | Dolgu düşük opaklıkta: çizgiyi bastırmadan eğilimi vurguluyor.
 | Tam renk kullanılsaydı grafiğin altı bir blok gibi görünür ve
 | asıl bilgi olan çizgi kaybolurdu.
 */
.grafik__alan {
  fill: var(--y-vurgu);
  opacity: 0.08;
}

.grafik__nokta {
  fill: var(--y-yuzey);
  stroke: var(--y-vurgu);
  stroke-width: 2;
}

/*
 | Adet çubukları ciroyla yarışmamalı ama görünmeli de. Önceki değer
 | (--y-kenar-koyu) kenarlık grisiydi: açık temada neredeyse arka
 | planla aynıydı ve çubuklar seçilmiyordu. Metin grisi, ikincil
 | kalmakla birlikte okunuyor.
 */
.grafik__adet {
  fill: var(--y-metin-silik);
  opacity: 0.55;
}

/* --- İkili panel düzeni --- */

.panel-ikili {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/*
 | Izgara içindeki panellerin kendi alt boşluğu olmamalı; aralık
 | zaten grid gap'ten geliyor. Olmasaydı iki panel arasında çift
 | boşluk oluşurdu.
 */
.panel-ikili > .panel {
  margin-bottom: 0;
}

.panel-ikili + .panel,
.panel-ikili + .panel-ikili {
  margin-top: 0.75rem;
}

/* --- Durum şeridi --- */

.durum-serit {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey-alt);
}

.durum-serit__parca {
  display: block;
  height: 100%;
}

/* Renkler rozetlerdeki mantıkla aynı: bekleyen sarı, biten yeşil,
   iptal kırmızı. İki yerde iki farklı renk dili olsaydı panel
   okunmaz olurdu. */
.durum-serit__parca--yeni         { background: var(--y-uyari); }
.durum-serit__parca--hazirlaniyor { background: var(--y-vurgu); }
.durum-serit__parca--kargoda      { background: #4a90d9; }
.durum-serit__parca--teslim       { background: var(--y-ok); }
.durum-serit__parca--iptal        { background: var(--y-tehlike); }

.durum-anahtar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.durum-anahtar li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--y-metin-soluk);
}

/* Bu liste .panel ul kuralından etkilenmesin: orada madde araları
   ve girinti var, burada yatay bir anahtar listesi istiyoruz. */
.panel .durum-anahtar li + li {
  margin-top: 0;
}

.durum-anahtar strong {
  color: var(--y-metin);
  font-variant-numeric: tabular-nums;
}

.durum-anahtar small {
  color: var(--y-metin-silik);
}

.durum-anahtar__benek {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* --- Yatay çubuk listesi --- */

.cubuk-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cubuk {
  display: grid;
  align-items: center;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 8rem) 1fr auto;
  padding: 0.35rem 0;
  font-size: 0.75rem;
}

.panel .cubuk + .cubuk {
  margin-top: 0;
  border-top: 1px solid var(--y-kenar);
}

/* Uzun ürün adı düzeni bozmasın; tamamı title özniteliğinde duruyor. */
.cubuk__ad {
  overflow: hidden;
  color: var(--y-metin);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cubuk__ray {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--y-yaricap);
  background: var(--y-yuzey-alt);
}

.cubuk__dolgu {
  display: block;
  height: 100%;
  background: var(--y-vurgu);
}

.cubuk__deger {
  color: var(--y-metin);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cubuk__deger small {
  display: block;
  color: var(--y-metin-silik);
}

/* --- Dar ekran --- */

@media (max-width: 640px) {
  /* Grafik dar ekranda okunmuyor ama gizlemek de bilgi kaybı.
     Yatay kaydırmaya bırakılıyor: kutu daralıyor, grafik kendi
     asgari genişliğini koruyor. Sipariş bandı ve sol eksen
     etiketleri eklendiği için asgari genişlik yükseldi. */
  .grafik-kutu {
    min-width: 620px;
  }

  .cubuk {
    grid-template-columns: 1fr auto;
  }

  .cubuk__ray {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ==========================================================================
   10 · YEREL DENETİMLERİN TEMAYA UYUMU  (2 Ağu'da eklendi)

   SORUN: koyu temada açılır listenin içi okunmuyordu.

   Sebep, CSS'in <select> kutusunu boyayabilmesi ama tıklayınca açılan
   LİSTEYİ boyayamamasıydı. O liste işletim sistemi tarafından çiziliyor
   ve varsayılan olarak beyaz zemin kullanıyor; metin rengini ise
   select'ten devralıyor. Koyu temada select'in metni açık renk olduğu
   için sonuç beyaz zemin üzerinde beyaza yakın yazı oluyordu.

   Aynı sınıf sorun tarih seçicide, kaydırma çubuğunda ve tarayıcının
   parola doldurma renginde de var.
   ========================================================================== */

/*
 | Asıl çözüm bu tek satır: color-scheme, tarayıcıya "bu bölge koyu"
 | diyor ve tarayıcı BÜTÜN yerel denetimleri buna göre çiziyor —
 | açılır liste, tarih seçici, kaydırma çubuğu, imleç rengi.
 | Tek tek boyamaya çalışmaktan hem kısa hem kapsamlı.
 */
body.admin {
  color-scheme: light;
}

body.admin[data-tema="koyu"] {
  color-scheme: dark;
}

/*
 | color-scheme'i desteklemeyen ya da kısmen uygulayan tarayıcılar için
 | ikinci savunma hattı. Firefox ve Windows'taki bazı Chrome sürümleri
 | seçenekleri hâlâ sistem zemininde çiziyor.
 */
body.admin option,
body.admin optgroup {
  background-color: var(--y-yuzey);
  color: var(--y-metin);
}

/*
 | Yer tutucu metni değerin kendisinden geri planda kalmalı ama
 | okunabilir olmalı. Tarayıcı varsayılanı koyu zeminde fazla sönük.
 */
body.admin ::placeholder {
  color: var(--y-metin-silik);
  opacity: 1;
}

/*
 | Tarayıcının otomatik doldurduğu alanlar. Chrome buraya kendi sarı
 | zeminini basıyor ve metin rengini korumuyor; koyu temada açık yazı
 | sarı zeminde kalıyordu. Gölgeyi zemin gibi kullanmak, Chrome'un
 | background'u ezmesine karşı bilinen tek yol.
 */
body.admin input:-webkit-autofill,
body.admin input:-webkit-autofill:hover,
body.admin input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--y-metin);
  -webkit-box-shadow: 0 0 0 1000px var(--y-yuzey) inset;
  caret-color: var(--y-metin);
}

/*
 | Devre dışı alanlar: tarayıcı varsayılanı grileştirirken metni
 | zemine fazla yaklaştırıyor. Okunur kalsın ama tıklanamaz olduğu
 | anlaşılsın.
 */
body.admin input:disabled,
body.admin select:disabled,
body.admin textarea:disabled {
  background: var(--y-yuzey-alt);
  color: var(--y-metin-soluk);
  cursor: not-allowed;
}

/* ==========================================================================
   11 · ÖZGÜLLÜK DÜZELTMELERİ  (2 Ağu'da eklendi)

   Panel, vitrinin style.css dosyasını da yüklüyor. Orada panelin
   markup'ıyla eşleşen birkaç kural var ve bazıları buradaki kuralları
   yeniyor. Üç görünür kusurun tamamı bundan kaynaklanıyordu:

     · Onay kutusu etiketleri koyu temada okunmuyordu
     · Onay kutusu, metninin ALTINDA duruyordu (yan yana olması gerekirken)
     · Aralıklar beklenenden geniş kalıyordu

   NEDEN style.css KALDIRILMIYOR: panel giriş ekranı ve hata sayfaları
   ondaki taban kuralları (kutu modeli, yazı tipi sıfırlaması) kullanıyor.
   Ayırmak daha temiz olurdu ama bu, görünüm düzeltmesi değil yeniden
   yapılandırma olur — teknik borca yazıldı.
   ========================================================================== */

/*
 | style.css içindeki `.field label` kuralı metni vitrinin koyu mürekkep
 | rengine boyuyor. Panelin kendi kuralı `.field__label` sınıfına
 | bakıyordu; sınıfsız bir <label> için karşılığı yoktu, o yüzden vitrin
 | kuralı yürürlükte kalıyordu.
 |
 | Sipariş detayındaki "Ürünleri stoğa geri yükle" ve "Müşteriye e-posta
 | ile bildir" başlıkları tam olarak böyle görünmez olmuştu: yardım
 | metinleri okunuyordu, çünkü onların kendi renk kuralı var.
 */
body.admin .field label,
body.admin .field label strong {
  color: var(--y-metin);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.admin .field label .field__hint {
  color: var(--y-metin-silik);
  font-size: 0.75rem;
  font-weight: 400;
}

/*
 | `body.admin .field` seçicisi `.field--inline`den daha güçlü olduğu
 | için değiştirici sınıf hiç işlemiyordu: satır içi olması gereken alan
 | sütun düzeninde kalıyor, onay kutusu metnin üstüne düşüyordu.
 | Değiştiricilere aynı öneki vermek dengeyi kuruyor.
 */
body.admin .field--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
}

body.admin .field--tight {
  gap: 0.15rem;
}

/* Onay kutusu küçülmesin: flex satırında daralmaya açık kalıyordu. */
body.admin .field--inline input[type="checkbox"],
body.admin .field--inline input[type="radio"] {
  flex: 0 0 auto;
  width: 17px;
  min-height: 0;
  margin-top: 0.1rem;
}

/*
 | Etiket kalan genişliği alsın ve yardım metni alt satıra geçsin.
 | Blok olmasaydı başlık ile açıklama tek satırda birleşiyordu —
 | ekran görüntüsündeki "Ürünleri stoğa geri yükle Ürünler elinde ve..."
 | görünümü buydu.
 */
body.admin .field--inline label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

body.admin .field--inline label strong {
  display: block;
}

body.admin .field--inline label .field__hint {
  display: block;
  margin-top: 0.15rem;
}