/* BestlinkPos - kullanma kılavuzu (/help/), 2026-10-01.
   yasal-20260930.css belge düzeninin (yapışkan içindekiler + okuma sütunu) üstüne
   yalnız kılavuza özgü parçaları ekler: ekran görüntüsü çerçevesi, numaralı
   adımlar, rol çipleri ve metin içindeki arayüz etiketleri.
   ÖNBELLEK: yayına çıktıktan sonra içerik değişmez; değişiklik yeni adla yazılır. */

/* Metin içindeki düğme / menü adı: okurken ekrandaki etiketle eşleşsin */
.yasal-govde .ui {
  padding: 0.05em 0.4em;
  border-radius: 6px;
  background: var(--zemin-2);
  color: var(--metin);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Bölümü kimlerin kullandığı (varsayılan roller) */
.yasal-govde .roller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-block: calc(var(--bosluk-2) * -1) var(--bosluk-5);
  padding: 0;
  list-style: none;
}
.yasal-govde .roller > li {
  margin: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--renk-ana-yumusak);
  color: var(--renk-ana-metin);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}
.yasal-govde .roller > .roller__etiket {
  padding-inline: 0 0.15rem;
  background: none;
  color: var(--metin-ikincil);
  font-weight: 500;
}

/* Numaralı adımlar: numara daire içinde, metin hizalı */
.yasal-govde ol.adimlar {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  list-style: none;
  counter-reset: adim;
}
.yasal-govde ol.adimlar > li {
  position: relative;
  margin: 0;
  padding-left: 2.5rem;
  counter-increment: adim;
}
.yasal-govde ol.adimlar > li::before {
  content: counter(adim);
  position: absolute;
  top: 0.05em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--renk-ana-yumusak);
  color: var(--renk-ana-metin);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

/* Ekran görüntüsü: beyaz zeminli çerçeve, altta açıklama */
.yasal-govde .sekil {
  margin-block: var(--bosluk-5) var(--bosluk-6);
}
.yasal-govde .sekil img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--golge-2);
}
.yasal-govde .sekil figcaption {
  margin-top: 0.7rem;
  color: var(--metin-ikincil);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Pencere kesitleri (ödeme, taşıma, stok girişi): ekran genişliğinde büyümesin */
.yasal-govde .sekil--pencere { max-width: 30rem; }
.yasal-govde .sekil--dar { max-width: 22rem; }

/* Telefon ekranları: yan yana iki telefon */
.yasal-govde .sekil--telefon .sekil__ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
}
.yasal-govde .sekil--telefon img { border-radius: 24px; }

/* Bölüm başındaki kısa bilgi satırı (ör. hangi ekranda olduğunuz) */
.yasal-govde .yol {
  color: var(--metin-ikincil);
  font-size: 0.9375rem;
}

@media (forced-colors: active) {
  .yasal-govde .ui,
  .yasal-govde .roller > li { border: 1px solid CanvasText; }
  .yasal-govde ol.adimlar > li::before { border: 1px solid CanvasText; }
}

@media print {
  .yasal-govde .sekil img { box-shadow: none; }
  .yasal-govde .sekil { break-inside: avoid; }
}