/* صفحة «شكر خاص» — أنماط خاصة بـ thanks.html فقط (تُبنى فوق components.css) */

.tk-main{padding-block:44px 70px}

.tk-hero{text-align:center; max-width:620px; margin-inline:auto; margin-bottom:36px}
.tk-hero h1{margin:0 0 10px; font-size:30px}
.tk-hero p{margin:0; color:var(--muted); font-size:14.5px; line-height:2.1}

.tk-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:14px; max-width:860px; margin-inline:auto;
}
.tk-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 18px 20px; text-align:center;
}
.tk-top{border-color:color-mix(in srgb, var(--accent-ink) 45%, var(--border))}
.tk-crown{position:absolute; top:10px; inset-inline-end:12px; font-size:15px}
.tk-avatar{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--brand-ink);
}
.tk-avatar .i{width:24px; height:24px}
.tk-name{margin:0; font-size:15.5px; line-height:1.6}
.tk-contrib{margin:0; color:var(--muted); font-size:12px; font-weight:600}
.tk-linkedin{
  margin-top:2px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; color:var(--brand-ink);
  background:color-mix(in srgb, var(--interactive) 9%, transparent);
  transition:background .15s ease, transform .15s ease;
}
.tk-linkedin:hover{background:color-mix(in srgb, var(--interactive) 18%, transparent); transform:translateY(-1px)}
.tk-linkedin:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.tk-linkedin .i{width:17px; height:17px}

.tk-empty{
  grid-column:1 / -1; text-align:center; color:var(--muted);
  font-size:13.5px; padding:44px 10px; line-height:2;
  background:var(--surface); border:1px dashed var(--border); border-radius:18px;
}
.tk-join{text-align:center; margin:34px 0 0; color:var(--muted); font-size:13px}
/* رابط «تواصل معنا» صار ‎.link-cta‎ (issue #165) — كان لوناً وثقلاً بلا تسطير ولا سهم،
   فقُرئ نصاً غامقاً داخل الفقرة. لا تُعِد تنسيقه هنا. */

/* ---- بطاقات المثال التوضيحي (Issue #144) ---- */
/* مؤقتة حتى تُضاف بيانات فريق المراجعة الحقيقية، ويخفيها src/thanks.js فور ظهور أول عضو.
   الحدّ المتقطّع والوسم يفرّقانها بصرياً عن البطاقة الحقيقية فلا تُقرأ عضويةً فعلية. */
.tk-sample{margin-top:14px}
.tk-sample-note{
  text-align:center; margin:0 0 14px; color:var(--muted);
  font-size:12.5px; line-height:1.9;
}
.tk-card.is-sample{border-style:dashed; padding-top:18px}
.tk-sample-tag{
  font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent-ink);
}

@media (max-width:520px){
  .tk-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px}
  .tk-card{padding:20px 12px 16px}
  .tk-card.is-sample{padding-top:14px}
}