/* ============================================================================
   HOLM Digital — panel katmanı (giriş, kullanıcı paneli, yönetici paneli)
   ----------------------------------------------------------------------------
   Pazarlama sitesinden farklı bir yoğunluk sınıfı: VISUAL_DENSITY 6-7.
   Aynı token'lar, aynı tema kilidi; sadece boşluklar sıkı ve hareket düşük.
   Ürün arayüzünde hareket yalnızca geri bildirim taşır (motion-design: durum).
   ========================================================================== */

/* ============================ Kimlik sayfası =============================== */

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.auth__art {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-7);
  background: var(--ink-900);
  border-right: 1px solid var(--line);
}
.auth__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Canvas hariç: aksi halde konumlandırması bozulup flex öğesine dönüşürdü. */
.auth__art > :not(.auth__canvas) { position: relative; z-index: 2; }
.auth__art::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, var(--ink-900) 6%, rgb(10 12 17 / .55) 44%, transparent);
}
.auth__pitch { max-width: 30rem; display: grid; gap: var(--s-4); }
.auth__pitch h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.auth__pitch p { color: var(--text-2); font-size: var(--fs-sm); }

.auth__panel {
  display: grid; place-items: center;
  padding: var(--s-7) var(--gutter);
}
.auth__box { width: min(420px, 100%); display: grid; gap: var(--s-5); }
.auth__box h1 { font-size: 1.75rem; }

.auth__switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--ink-900);
}
.auth__switch button {
  padding: 0.52rem 1rem;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text-2);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.auth__switch button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }

.auth__form { display: grid; gap: var(--s-4); }
.auth__foot { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.auth__foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
}

/* ============================ Uygulama kabuğu ============================== */

.app {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.side {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-5);
  border-right: 1px solid var(--line);
  background: var(--ink-900);
  overflow-y: auto;
}
.side__brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-4); }
.side__group { display: grid; gap: 2px; }
.side__label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); padding: var(--s-3) var(--s-3) var(--s-2);
}
.side__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.58rem var(--s-3);
  border-radius: var(--r-tiny);
  color: var(--text-2); font-size: var(--fs-sm);
  cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
  font-family: inherit;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.side__link i { font-size: 1.15rem; flex: none; }
.side__link:hover { background: rgb(255 255 255 / .04); color: var(--text-1); }
.side__link[aria-current="page"], .side__link.is-active {
  background: var(--accent-dim); color: var(--accent);
}
.side__count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  padding: 1px 6px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .07); color: var(--text-2);
}
.side__foot { margin-top: auto; display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.side__user { display: grid; gap: 1px; padding: 0 var(--s-3); min-width: 0; }
.side__user strong { font-size: var(--fs-sm); font-weight: 500; }
.side__user span { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 68px;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: rgb(6 7 10 / .84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top h1 { font-size: 1.25rem; }
.top__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.top__actions { display: flex; align-items: center; gap: var(--s-3); }

.pane { padding: var(--s-6); display: grid; gap: var(--s-6); align-content: start; }
.pane[hidden] { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: var(--s-2);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .side__brand { padding: 0 var(--s-3) 0 0; }
  .side__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .side__label { display: none; }
  .side__link { width: auto; }
  .side__foot { margin: 0 0 0 auto; border: 0; padding: 0; grid-auto-flow: column; align-items: center; }
  .side__user { display: none; }
  .pane { padding: var(--s-5) var(--gutter); }
}

/* ============================ İstatistik kutuları ========================== */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); }
.stat {
  display: grid; gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--ink-800);
}
.stat__label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--text-2);
}
.stat__label i { color: var(--accent); font-size: 1rem; }
.stat__value {
  font-family: var(--font-mono);
  font-size: 1.75rem; font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__note { font-size: var(--fs-xs); color: var(--text-3); }

/* Kayıt eğrisi: dolgu izi olmayan minimal sparkline (dashboard kalabalığı yok) */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.spark span {
  flex: 1; min-width: 2px;
  background: var(--accent-line);
  border-radius: 2px 2px 0 0;
  transition: height var(--t-slow) var(--e-out);
}
.spark span[data-top="true"] { background: var(--accent); }

/* ============================ Bölüm kutusu ================================= */

.block {
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--ink-800);
  overflow: hidden;
}
.block__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.block__head h2 { font-size: 1.0625rem; }
.block__head p { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.block__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.block__body--flush { padding: 0; }

/* ============================ Tablo ========================================
   Her satıra alt+üst çizgi konmuyor; yalnızca satır arası tek ince ayırıcı.   */

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.table th {
  text-align: left; font-weight: 500;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  padding: var(--s-4) var(--s-5);
  white-space: nowrap;
  background: var(--ink-900);
}
table.table td {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
}
table.table td strong { color: var(--text-1); font-weight: 500; }
table.table tbody tr { transition: background-color var(--t-fast) var(--e-out); }
table.table tbody tr:hover { background: rgb(255 255 255 / .022); }
table.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.table .row-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }

/* ============================ Liste satırı ================================= */

.rows { display: grid; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
}
.rows > .row:first-child { border-top: 0; }
.row__icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-tiny); background: var(--accent-dim); color: var(--accent);
  font-size: 1.15rem;
}
.row__main { min-width: 0; display: grid; gap: 2px; }
.row__main strong { font-weight: 500; font-size: var(--fs-sm); }
.row__main span { font-size: var(--fs-xs); color: var(--text-3); }
.row__side { display: flex; align-items: center; gap: var(--s-3); }

/* ============================ Düzenleyici formu ============================ */

.editor { display: grid; gap: var(--s-4); }
.editor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
.editor__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }

/* Liste alanları: her satır bir madde (features / highlights / tags / stack) */
.list-field { display: grid; gap: var(--s-2); }
.list-field__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); }
.list-field__row button {
  width: 42px; border: 1px solid var(--line-2); border-radius: var(--r-box);
  background: none; color: var(--text-3); cursor: pointer;
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.list-field__row button:hover { color: #FF8A7A; border-color: rgb(255 138 122 / .5); }

/* ============================ Boş / yükleniyor ============================= */

.rows .state, .table-wrap .state { padding: var(--s-8) var(--s-5); }

.load-rows { display: grid; gap: var(--s-3); padding: var(--s-5); }
.load-rows .skeleton { height: 52px; }

/* ============================ API ve entegrasyon ==========================
   Her ayarın yanında değerin nereden geldiğini gösteren bir rozet var
   (panel / ortam değişkeni / varsayılan). Bu bilinçli: aynı ayar iki yerden
   gelebildiği için, hangisinin geçerli olduğu görünmezse yanlış anahtarla
   saatlerce uğraşılabilir.                                                  */

.setting { gap: var(--s-2); }
.setting__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.setting__top label { margin: 0; }

.setting__foot {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.setting__foot .field-help { flex: 1 1 22rem; }
.setting__foot code {
  font-family: var(--font-mono); font-size: .92em;
  color: var(--text-2); background: rgb(255 255 255 / .05);
  padding: 1px 5px; border-radius: 5px;
}

.setting__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

.setting__result { font-size: var(--fs-xs); color: var(--text-3); }
.setting__result--ok  { color: #8CE296; }
.setting__result--err { color: #FF8A7A; }

.setting__note { font-size: var(--fs-sm); color: var(--text-2); max-width: 62ch; }
.setting__note--warn { color: #FFC864; }
.setting__note a { color: var(--accent); }

/* Kurulum anahtarı: kopyalanacak tek satır, taşarsa kendi içinde kaydırılır. */
.setting__key {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-box);
  background: var(--ink-1000);
}
.setting__key code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-1);
}

.block--warn { border-color: rgb(255 200 100 / .35); }