/* Üye kapısı — kilitli önizleme (components/locked.php; docs/MEMBER-GATE.md "Sözleşme").
   Yalnızca tasarım değişkenleri: klasik + orca ([data-ui="orca"]; köşe yarıçapları --orca-* yoksa --radius-*), koyu + açık tema
   tokens.css'ten. Önizleme şekilleri SABİTTİR (veri değil, sayı yok) ve ekran okuyuculardan gizlidir. */

.locked {
  --lk-radius: var(--orca-card, var(--radius-lg));
  --lk-ctl: var(--orca-ctl, var(--radius-md));
  --lk-sk: var(--border-strong);
  --lk-sk-strong: var(--muted, var(--text-muted));
  position: relative;
  color: var(--text);
}

/* ---------------------------------------------------------------- kart / sekme / sayfa */
.locked--card,
.locked--tab,
.locked--page {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--lk-radius);
  background: var(--surface);
}
.locked--card { box-shadow: var(--orca-card-shadow, var(--elev1)); }
.locked--tab { background: var(--surface2); border-style: dashed; border-color: var(--border-strong); }
.locked--page { box-shadow: var(--orca-card-shadow, var(--elev1)); background: var(--surface) var(--gradient-heroDark); }
:root[data-theme="light"] .locked--page { background: var(--surface) var(--gradient-heroLight); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .locked--page { background: var(--surface) var(--gradient-heroLight); }
}

/* Önizleme: bulanık iskelet, alta doğru maskeyle kaybolur (zemin ne olursa olsun — degrade sayfa yüzeyi dahil; gerçek içerik yok) */
.locked__preview {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) 0;
  min-height: 72px;
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
}
.locked--page .locked__preview { min-height: 112px; padding-block-start: var(--space-6); }

.locked__sk {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--lk-sk);
}
.locked__sk--line:nth-child(1) { width: 92%; }
.locked__sk--line:nth-child(2) { width: 78%; }
.locked__sk--line:nth-child(3) { width: 86%; }
.locked__sk--line:nth-child(4) { width: 54%; }
.locked__sk--ring {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: 5px solid var(--lk-sk);
}
.locked__sk--pill { width: 72px; height: 22px; }
.locked__sk--tile { flex: 1 1 0; height: 44px; border-radius: var(--radius-sm); }
.locked__sk--label { width: 34%; height: 9px; }
.locked__sk--meter { flex: 1 1 auto; height: 9px; background: var(--lk-sk-strong); opacity: 0.6; }
.locked__sk-row { display: flex; gap: var(--space-2); align-items: center; }
.locked__sk-row--table:nth-child(2) .locked__sk--meter { max-width: 70%; }
.locked__sk-row--table:nth-child(3) .locked__sk--meter { max-width: 45%; }
.locked__sk-row--table:nth-child(4) .locked__sk--meter { max-width: 25%; }
.locked__sk-bar {
  display: flex;
  gap: 3px;
  max-width: calc(100% - 56px);
  height: 12px;
  margin-block-start: var(--space-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.locked__sk-bar i { display: block; height: 100%; opacity: 0.8; }
.locked__sk-bar i:nth-child(1) { flex: 5; background: var(--home, var(--lk-sk-strong)); }
.locked__sk-bar i:nth-child(2) { flex: 3; background: var(--draw, var(--lk-sk)); }
.locked__sk-bar i:nth-child(3) { flex: 4; background: var(--away, var(--lk-sk-strong)); }

/* Gövde: kilit işareti, başlık, tek satır, özellikler, düğmeler */
.locked__body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-5);
  text-align: center;
}
.locked__badge {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text, var(--primary));
  box-shadow: 0 0 0 1px var(--border);
}
.locked__badge .icon { width: 18px; height: 18px; }
.locked__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
.locked__text {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-wrap: pretty;
}
.locked__items {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.locked__items li { display: flex; gap: var(--space-2); align-items: flex-start; }
.locked__items .icon { margin-block-start: 3px; color: var(--success-text, var(--success)); }
.locked__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}
.locked__note { margin: 0; color: var(--muted, var(--text-muted)); font-size: var(--fs-xs); }

.locked--page .locked__body { gap: var(--space-3); padding: var(--space-2) var(--space-6) var(--space-8); }
.locked--page .locked__badge { width: 52px; height: 52px; }
.locked--page .locked__badge .icon { width: 24px; height: 24px; }
.locked--page .locked__title { font-size: var(--fs-2xl); }
.locked--page .locked__text { font-size: var(--fs-md); }
.locked--page .locked__items { font-size: var(--fs-md); }
.locked--tab .locked__body { padding-block-end: var(--space-6); }

/* ---------------------------------------------------------------- tek satır */
.locked--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--lk-ctl);
  background: var(--surface2);
  font-size: var(--fs-sm);
}
.locked--inline .locked__icon { display: inline-grid; place-items: center; color: var(--primary-text, var(--primary)); }
.locked--inline .locked__msg { flex: 1 1 18rem; min-width: 0; }
.locked--inline .locked__title { font-family: inherit; font-size: inherit; font-weight: 600; }
.locked--inline .locked__text { display: inline; color: var(--text-secondary); font-size: inherit; }
.locked__links { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
.locked__links a { color: var(--link, var(--primary-text)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.locked__links a:hover { color: var(--text); }
.locked__links .locked__cta { color: var(--primary-text, var(--primary)); }

/* ---------------------------------------------------------------- hap ("Üye") */
.locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding-inline: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--surface2));
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.locked-chip .icon { width: 12px; height: 12px; color: var(--primary-text, var(--primary)); }
a.locked-chip:hover { border-color: var(--border-strong); color: var(--text); }

/* ---------------------------------------------------------------- odak, telefon, erişilebilirlik */
.locked a:focus-visible,
a.locked-chip:focus-visible {
  outline: 2px solid var(--ring, var(--primary));
  outline-offset: 2px;
}
a.locked-chip:focus-visible { border-radius: var(--radius-pill); }

@media (max-width: 480px) {
  .locked__preview { padding-inline: var(--space-4); }
  .locked__body { padding-inline: var(--space-4); }
  .locked--page .locked__body { padding: var(--space-2) var(--space-4) var(--space-6); }
  .locked--page .locked__title { font-size: var(--fs-xl); }
  .locked__actions { display: grid; width: 100%; }
  .locked__actions .btn { width: 100%; }
}

@media (forced-colors: active) {
  .locked__preview { display: none; }
  .locked--card, .locked--tab, .locked--page, .locked--inline, .locked-chip { border: 1px solid CanvasText; }
}

@media print {
  .locked__preview, .locked__actions { display: none; }
}