/* ==========================================================================
   LONK DIGITAL — Müşteri ve otomasyon paneli ekleri
   app.css + admin.css sonrasında yüklenir. Renk, gölge ve yazı tipi sitenin
   kendi değişkenlerinden gelir; burada yeni tasarım dili tanımlanmaz.
   Onaylanan önizlemedeki (docs/preview/panel) düzenin birebir karşılığıdır;
   yalnız önizlemeye ait şerit, sayfa haritası ve tasarım notu parçaları yoktur.
   ========================================================================== */

/* Hiçbir ekranda yatay kayma olmasın (320–1440) */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- Giriş ekranları: kart üstte, tam genişlik zemin ---------- */
.adm--auth { display: flex; flex-direction: column; padding: 0; }
.adm--auth > .adm-auth { margin: 0 auto; padding: clamp(1.5rem, 5vh, 3rem) 1.2rem 3rem; }

/* ---------- Menü grup başlığı (yönetim paneli) ---------- */
.pnl-grup {
  padding: 0.9rem 0.65rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--smoke);
}

/* ---------- Sol menü altındaki hesap alanı ---------- */
.pnl-hesap { padding-top: 0.9rem; }
.pnl-hesap__kisi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  transition: background var(--t-fast);
}
.pnl-hesap__kisi:hover { background: var(--brand-50); }
.pnl-hesap__bas {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 760;
}
.pnl-hesap__yazi { min-width: 0; display: grid; }
.pnl-hesap__yazi b {
  font-size: 0.86rem;
  font-weight: 680;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pnl-hesap__yazi small {
  font-size: 0.74rem;
  color: var(--smoke);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pnl-hesap__rol {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.65rem 0.5rem;
  font-size: 0.72rem;
  color: var(--smoke);
}
.pnl-hesap__rol .icon { color: var(--smoke); flex: none; }

/* Çıkış bir form gönderimidir (CSRF); düğme bağlantı gibi görünür */
.pnl-cikis { margin: 0; }
.pnl-cikis .adm__logout { width: 100%; }

/* ---------- Üst çubuk sağı: bildirim düğmesi kabuğu ---------- */
.pnl-ustsag { align-items: center; }
.pnl-zil {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.pnl-zil:hover { background: var(--brand-50); }
.pnl-zil__nokta {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-600);
  border: 2px solid #fff;
}

/* ---------- Sayfa yolu (müşteri bağlamı) ---------- */
.pnl-yol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.76rem;
  color: var(--smoke);
}
.pnl-yol a { color: var(--brand-600); font-weight: 600; }
.pnl-yol span[aria-hidden] { color: var(--line); }

/* ---------- Salt okunur müşteri önizlemesi şeridi ---------- */
.pnl-salt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--brand-200, #c7d8fb);
  background: var(--brand-50, #eef3fe);
  font-size: 0.86rem;
  color: var(--steel);
}
.pnl-salt .icon { flex: none; color: var(--brand-600); }
.pnl-salt span { min-width: 0; flex: 1 1 260px; }
.pnl-salt .btn { margin-left: auto; }

/* ---------- Şifre alanı ---------- */
.pnl-sifre { position: relative; }
.pnl-sifre .adm-input { padding-right: 3rem; }
.pnl-goz {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--smoke); cursor: pointer;
}
.pnl-baglantilar { margin-top: 1rem; text-align: center; font-size: 0.88rem; }
.pnl-baglantilar a { color: var(--brand-600); font-weight: 560; }

/* Giriş kartındaki uyarı şeridi kartın kendi boşluğuna oturur */
.adm-auth__card .adm-flash { margin-bottom: 1rem; }

/* ---------- Kurulum adımları ---------- */
.pnl-adimlar { list-style: none; display: grid; gap: 0.1rem; padding: 0.5rem; }
.pnl-adim {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid transparent;
}
.pnl-adim.is-simdi { border-color: var(--brand-200); background: var(--brand-50); }
.pnl-adim + .pnl-adim { border-top: 1px solid var(--line-soft); border-radius: 12px; }
.pnl-adim.is-simdi + .pnl-adim,
.pnl-adim:has(+ .pnl-adim.is-simdi) { border-top-color: transparent; }
.pnl-adim__no {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-600);
  padding-top: 0.12rem;
  font-variant-numeric: tabular-nums;
}
.pnl-adim__govde { min-width: 0; flex: 1 1 auto; }
.pnl-adim__govde .adm-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}
.pnl-adim__bilgi {
  margin-top: 0.3rem;
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 22rem);
  gap: 0.1rem 2rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--ash);
}
.pnl-adim__bilgi span { display: flex; gap: 0.4rem; min-width: 0; }
.pnl-adim__bilgi b {
  flex: none;
  min-width: 7.6rem;
  font-weight: 620;
  color: var(--smoke);
}
.pnl-akis {
  margin-top: 0.45rem;
  padding-left: 0.9rem;
  list-style: none;
  display: grid;
  gap: 0.1rem;
  font-size: 0.82rem;
  color: var(--ash);
}
.pnl-akis li { position: relative; }
.pnl-akis li::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-300, #9dbcf8);
}
.pnl-adim__kilit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--smoke);
}
.pnl-adim__kilit .icon { color: var(--smoke); flex: none; }
.pnl-adim .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------- Kanal kartları ---------- */
.pnl-kanallar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.pnl-kanal { padding: 1.1rem; display: flex; flex-direction: column; }
.pnl-kanal + .pnl-kanal { margin-top: 0; }
.pnl-kanal .pnl-butonlar { margin-top: auto; padding-top: 1rem; }
.pnl-kanal__ust { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.pnl-kanal__ust > div { min-width: 0; }
.pnl-kanal__ust .adm-row__meta { word-break: break-word; }
.pnl-kanal__durum { margin-top: 0.75rem; }
.pnl-kanal__bilgi { margin-top: 0.6rem; }
.pnl-kanal__bilgi > div { padding-left: 0; padding-right: 0; }

/* ---------- Buton grupları ---------- */
.pnl-butonlar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ---------- Liste kalemleri ---------- */
.pnl-liste { list-style: none; display: grid; gap: 0.5rem; }
.pnl-liste li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; color: var(--ash); }
.pnl-liste .icon { flex: none; color: var(--brand-600); margin-top: 2px; }

/* ---------- Sekmeler: her genişlikte alt satıra iner ---------- */
.pnl-sekmeler { max-width: 100%; margin-bottom: 1rem; }
.pnl-sekmeler__baslik { margin-bottom: 0.45rem; font-size: 0.76rem; color: var(--smoke); }
.pnl-sekmeler__baslik b { color: var(--ink); font-weight: 700; }
.pnl-sekmeler__kaydir { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pnl-sekme {
  flex: none;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ash);
  white-space: nowrap;
}
.pnl-sekme:hover { color: var(--ink); background: var(--brand-50); }
.pnl-sekme.is-acik { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Kartlar içeriği kadar yükseklikte olsun */
.adm-grid { align-items: start; }

/* ---------- Bağlantı seçici ---------- */
.pnl-secici { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-bottom: 0.6rem; }
.pnl-secici .adm-label { display: block; margin-bottom: 0.3rem; }
.pnl-secici > .pnl-secici__alan { flex: 0 1 460px; min-width: 0; max-width: 100%; }
.pnl-secici select { width: 100%; }
.pnl-secici .btn { flex: none; }

/* ---------- Bilgi notu: kırmızı yalnız gerçek hata içindir ---------- */
.pnl-notkutu {
  margin: 0 0 1rem;
  padding: 0.85rem 1.05rem;
  border-radius: 13px;
  border: 1px solid var(--brand-200, #c7d8fb);
  background: var(--brand-50, #eef3fe);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--steel);
}
.pnl-notkutu b { color: var(--ink); }
.pnl-notkutu p + p { margin-top: 0.2rem; }
.pnl-notkutu--dikkat { border-color: rgba(160, 106, 0, 0.28); background: #fffaf0; }

/* ---------- Kritik işlem onayı ---------- */
.pnl-onay {
  display: grid;
  gap: 0.7rem;
  padding: 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(160, 106, 0, 0.28);
  background: #fffaf0;
}
.pnl-onay__baslik { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.pnl-onay__baslik .icon { color: #a06a00; flex: none; }
.pnl-onay__etki { font-size: 0.88rem; color: var(--ash); }
.pnl-onay .pnl-butonlar { margin-top: 0.2rem; }
.pnl-onay--duz { border-color: var(--line); background: var(--paper); }
.pnl-onay--duz .pnl-onay__baslik .icon { color: var(--brand-600); }
.pnl-onay--duz .adm-flash { margin-bottom: 0; }

/* ---------- Kod kutusu ---------- */
.pnl-kod {
  margin-top: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow-x: auto;
}
.pnl-kod code { display: block; font-size: 0.78rem; line-height: 1.6; letter-spacing: 0; word-break: break-word; white-space: pre-wrap; color: var(--steel); }
.pnl-kod__etiket { display: block; margin-bottom: 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--smoke); }

/* ---------- Form ---------- */
.pnl-form .adm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pnl-tam { grid-column: 1 / -1; }

/* Araç çubuğu: filtreler solda, ana işlem düğmesi sağda */
.adm-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.adm-toolbar > .adm-filters { min-width: 0; }
.adm-filters > .adm-input { width: auto; min-width: 0; flex: 1 1 180px; }
.adm-filters > .adm-search { flex: 2 1 220px; }
.adm-filters > input[type="date"] { flex: 0 1 190px; }

/* ---------- Yazışma ---------- */
.pnl-yazisma { margin-top: 0.2rem; }
.pnl-yazisma .adm-row__meta { white-space: normal; }

/* ---------- Panel gövdesi: serbest öğeler kart kenarına yapışmasın ----------
   .adm-panel'in kendi iç boşluğu yoktur; gövdeye doğrudan konan öğelere
   boşluğu burada veriyoruz. Kanal kartı kendi boşluğunu taşır. */
.adm-panel:not(.pnl-kanal) > .adm-hint { margin-top: 0; padding: 0.85rem 1.1rem 1rem; }
.adm-panel:not(.pnl-kanal) > .adm-panel__head + .adm-hint { padding-top: 1rem; }
.adm-panel:not(.pnl-kanal) > .pnl-butonlar { margin-top: 0; padding: 0 1.1rem 1.1rem; }
.adm-panel:not(.pnl-kanal) > .adm-field,
.adm-panel:not(.pnl-kanal) > .adm-filters,
.adm-panel:not(.pnl-kanal) > .adm-flash,
.adm-panel:not(.pnl-kanal) > .pnl-kod,
.adm-panel:not(.pnl-kanal) > .pnl-onay,
.adm-panel:not(.pnl-kanal) > .pnl-liste,
.adm-panel:not(.pnl-kanal) > .pnl-notkutu { margin: 1.1rem; }
.adm-panel:not(.pnl-kanal) > .adm-flash { margin-bottom: 1.1rem; }
.adm-panel:not(.pnl-kanal) > .adm-hint + .pnl-butonlar { margin-top: -0.4rem; }

/* Bölümler arası aralık */
.adm-kpis + .adm-panel,
.adm-kpis + .adm-grid,
.adm-filters + .adm-panel,
.pnl-secici + .adm-panel,
.adm-panel + .adm-hint,
.adm-panel + .pnl-butonlar { margin-top: 1rem; }
.adm-grid + .adm-grid { margin-top: 1rem; }
.adm-grid + .adm-panel { margin-top: 1rem; }
.adm-flash + .adm-panel { margin-top: 1rem; }

/* ---------- Tablolar ----------
   Sütun çok olduğunda tablo kart içinde yana kayar; 900 pikselin altında
   satırlar kart gibi alt alta dizilir ve kaydırmaya gerek kalmaz. */
.pnl-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pnl-tablo { font-size: 0.88rem; width: 100%; min-width: 0; border-collapse: collapse; }
.pnl-tablo th[scope="row"] { font-weight: 620; }
.pnl-tablo th, .pnl-tablo td { padding: 0.75rem 0.85rem; text-align: left; vertical-align: top; }
.pnl-tablo thead th { font-size: 0.76rem; font-weight: 700; color: var(--smoke); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pnl-tablo tbody tr + tr th, .pnl-tablo tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.adm-panel .table-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* ---------- Yükleniyor iskeleti ---------- */
.pnl-iskelet { display: grid; gap: 0.5rem; padding: 0.4rem; }
.pnl-iskelet span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%); }
.pnl-iskelet span:nth-child(2) { width: 80%; }
.pnl-iskelet span:nth-child(3) { width: 55%; }

/* ---------- Form hata durumu ---------- */
.pnl-hatali { border-color: #ef4444 !important; }
.pnl-hata { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.8rem; color: #b91c1c; }
.pnl-hata .icon { color: #b91c1c; }

/* ---------- Kurulum anahtarı (2FA) ---------- */
.adm-qr { display: grid; place-items: center; margin: 0 auto 1rem; max-width: 220px; }
.adm-qr svg { width: 100%; height: auto; }
.adm-anahtar { margin: 0.5rem 0 1.2rem; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.adm-anahtar code { font-size: 0.95rem; letter-spacing: 0.12em; color: var(--ink); word-break: break-all; }
.adm-yedek { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.5rem; }
.adm-yedek li { padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.adm-yedek code { font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); }
.adm-kod code { display: block; font-size: 0.78rem; line-height: 1.6; letter-spacing: 0; word-break: break-all; white-space: pre-wrap; }

/* ==========================================================================
   Durum renkleri — evrensel anlam
   Yeşil: onaylı / başarılı · Amber: uyarı, bekleme · Kırmızı: hata, kritik
   ========================================================================== */
.tag-glass--tamamlandi { color: var(--ok); }
.tag-glass--aktif { color: var(--ok); }
.tag-glass--kaybetti { color: var(--danger); }
.tag-glass--beklemede { color: #a06a00; }
.tag-glass--yeni { color: var(--brand-600); }

/* ---------- Onay penceresi ---------- */
.pnl-pencere { padding: 1.1rem; }
.pnl-pencere__kart { max-width: 460px; margin: 0 auto; padding: 1.2rem; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-2); }
.pnl-pencere__baslik { margin-bottom: 0.8rem; font-size: 1.02rem; font-weight: 720; letter-spacing: -0.022em; color: var(--ink); }
.pnl-pencere__kart .adm-facts > div { padding-left: 0; padding-right: 0; }

/* ---------- Kapatılamayan güvenlik kuralı ---------- */
.pnl-kilitli { margin: 1.1rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--brand-200, #c7d8fb); background: var(--brand-50, #eef3fe); }
.pnl-kilitli__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pnl-kilitli__ust .icon { color: var(--brand-600); flex: none; }
.pnl-kilitli__baslik { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.pnl-kilitli p { font-size: 0.88rem; line-height: 1.6; color: var(--ash); }
.pnl-kilitli p + p { margin-top: 0.4rem; }

/* ==========================================================================
   Dar ekranlar — 1024 / 900 / 620 / 400
   ========================================================================== */
@media (max-width: 900px) {
  .pnl-kanallar { grid-template-columns: minmax(0, 1fr); }
  .pnl-salt .btn { margin-left: 0; }

  /* Tablolar telefon ve tablette kart olur: her hücre kendi başlığını taşır */
  .pnl-tablo, .pnl-tablo thead, .pnl-tablo tbody, .pnl-tablo tr,
  .pnl-tablo th, .pnl-tablo td { display: block; }
  .pnl-tablo thead { display: none; }
  .pnl-tablo tbody tr { padding: 0.9rem; border-bottom: 1px solid var(--line-soft); }
  .pnl-tablo tbody tr:last-child { border-bottom: 0; }
  .pnl-tablo tbody tr + tr th, .pnl-tablo tbody tr + tr td { border-top: 0; }
  .pnl-tablo th, .pnl-tablo td { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline; padding: 0.28rem 0; }
  .pnl-tablo th[data-baslik]::before,
  .pnl-tablo td[data-baslik]::before { content: attr(data-baslik); flex: none; min-width: 8.5rem; font-size: 0.74rem; font-weight: 700; color: var(--smoke); }
  .pnl-tablo th[data-baslik=""]::before,
  .pnl-tablo td[data-baslik=""]::before { content: none; }
  .pnl-tablo th[scope="row"] { font-size: 0.94rem; font-weight: 700; }
}

@media (max-width: 620px) {
  .pnl-form .adm-fields { grid-template-columns: minmax(0, 1fr); }
  .pnl-kanallar { padding: 0.9rem; }
  .pnl-sekme { font-size: 0.78rem; padding: 0.38rem 0.7rem; }
  .pnl-adim__bilgi { grid-template-columns: minmax(0, 1fr); }
  .pnl-adim { padding: 0.7rem 0.55rem; }
  .pnl-zil { width: 36px; height: 36px; }
  .adm-toolbar { grid-template-columns: minmax(0, 1fr); }
  .pnl-pencere { padding: 0.9rem; }
  .adm-yedek { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 400px) {
  .pnl-adim { gap: 0.6rem; }
  .pnl-tablo th[data-baslik]::before,
  .pnl-tablo td[data-baslik]::before { min-width: 100%; }
  .pnl-butonlar .btn { flex: 1 1 100%; justify-content: center; }
  .pnl-hesap__yazi b { font-size: 0.84rem; }
}