/* ==========================================================================
   marketplace.css — Pazaryeri sayfası
   Yalnız css/tokens.css'teki tokenları kullanır: yeni renk, yeni yarıçap,
   yeni boşluk değeri tanımlanmaz. Tema açık kalır (admin kararı 29.10.2026).
   Boşluk ritmi: bölüm arası --s-8/--s-9, bölüm içi --s-3/--s-5.
   ========================================================================== */

.mp { display: block; }

/* ---------- Sayfa başlığı + arama (referans kare: ortada başlık, altında arama) ---------- */
.mp__head {
  padding: var(--s-9) 0 var(--s-8);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Admin karsilastirmasi 30.10.2026: referansta hero eksende (baslik + alt
   satir + arama ortali). Baslik sola hizali birakilmadi; kategori/kart
   bolumu soldan hizali kalmaya devam eder. */
.mp__head-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.mp__head-copy {
  position: relative;
  max-width: 68ch;
  text-align: center;
}

/* Başlığın çevresindeki küçük ikon kartçıkları (referans karenin ayırt edici
   hareketi). Yalnız dekorasyon: aria-hidden, tıklamayı engellemez. */
.mp__floaties {
  /* Statik flex şeridi: kartçıklar akışta yan yana gelir, bu yüzden birbirine,
     başlığa veya alt metne YAPISAL olarak binemez. Mutlak konum denemeleri
     üç ölçüm turunda bindirme üretti (floatOverLede=2, floatOverFloat=3,
     floatOverTitle=4) → 30.10.2026 bu düzene geçildi. */
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  pointer-events: none;
}
.mp__float {
  position: static;
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  color: var(--fg-ter);
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mp__head-copy:hover .mp__float { color: var(--accent-strong); }
/* Kartçıklar yalnız başlık bandında (ust 64px) durur; alt metne binmez
   (kare incelemesi 30.10.2026: top:% degerleri lede satırına düşüyordu). */
/* Hepsi başlık satırının üst yarısında: alt kenar en fazla 40px. 768px'te
   başlık --t-2xl'ye (30px) düştüğü için alt metin ~45px'e çıkıyor; ölçüm
   floatOverLede=2 idi, bu yüzden kartçıklar 8px daha yukarı alındı. */
/* Yatayda birbirine degmeyecek yuvalar: sol kenarda 2, sağ kenarda 3 kartçık;
   aralarındaki boşluk 44px kutu genisliginden büyük (olcum floatOverFloat). */
/* Hepsi konteyner kenarlarına yaslanır: başlık ortalanmış ve geniş (880px'te
   ~430px), ortadaki yuvalar başlık metninin üstüne biniyordu (kare incelemesi
   30.10.2026: "güçlendir" son harfi örtüldü). */
/* Yuvalar head-copy'nin boş kenarlarına göre kuruldu (olcum 30.10.2026:
   880px'te kenar boslugu ~64px, kartcik 44px → kenarda TEK kartcik sigar,
   ikincisi başlık metnine biniyordu). Üç kartçık başlığın ÜST bandına alındı
   (alt kenarlari -20px'te kalır, başlık 0'dan başlar). */
/* Yalnız hafif eğim + en fazla 4px dikey kayma: yatay boşluk gap'ten gelir,
   dolayısıyla kutular çakışmaz. */
/* translateY şerit yüksekliğini değiştirmez (transform akışı etkilemez), bu
   yüzden yatay gap korunur → çakışma ölçümü floatOverFloat=0 kalmaya devam
   eder; farklı yükseklikler referans karenin dağınık duruşunu verir. */
.mp__float:nth-child(1) { transform: translateY(4px); }
.mp__float:nth-child(2) { transform: translateY(-6px); }
.mp__float:nth-child(3) { transform: translateY(1px); }
.mp__float:nth-child(4) { transform: translateY(-4px); }
.mp__float:nth-child(5) { transform: translateY(6px); }
@media (max-width: 700px) {
  /* Yalnız telefonda kartçıklar kalkar; eşik 900 idi → önizlemede (~880px)
     hiç görünmüyorlardı; ölçüm floatOverLede=0 kaldığı sürece 700'e çekildi. */
  .mp__floaties { display: none; }
}
.mp__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg);
}
.mp__lede {
  margin: var(--s-3) auto 0;
  max-width: 62ch;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--fg-sec);
}
.mp__code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
  color: var(--fg-02);
}
.mp__updated {
  flex: none;
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-sm);
  color: var(--fg-ter);
  white-space: nowrap;
}
.mp__pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Arama: başlığın altında ortalanmış geniş kutu (referans kare).
   .mp__head-row dikey flex olduğu için flex-basis YÜKSEKLİĞE uygulanır:
   ölçüm 30.10.2026 — "flex:1 1 340px" kutuyu 340px yapmıştı; burada
   büyüme/sıkışma sıfır, yükseklik height ile verilir. */
.mp__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  width: min(680px, 100%);
  height: 52px;
  margin-top: var(--s-7);
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--fg-quiet);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mp__search:focus-within {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
  color: var(--fg-02);
}
.mp__search-icon { flex: none; margin-right: var(--s-3); }
.mp__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-base);
  color: var(--fg);
  outline: none;
}
.mp__search-input::placeholder { color: var(--fg-quiet); }
.mp__search-input::-webkit-search-cancel-button { display: none; }
.mp__search-clear[hidden] { display: none; }
.mp__search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: var(--s-2);
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--card-02);
  color: var(--fg-ter);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mp__search-clear:hover { background: var(--card-03); color: var(--fg); }
.mp__search-clear:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Kaynak çipleri 30.10.2026'da kaldırıldı (admin isteği): bu blokta artık
   yalnız katalog ve sekmeler var. */

/* ---------- Katalog: metin sekmeler + kart ızgarası ---------- */
.mp__catalog {
  padding: var(--s-7) 0 var(--s-8);
  background: var(--card);
}
.mp__catalog-inner { display: block; }

.mp__cats { padding: 0; }
.mp__cats-h {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-ter);
}
/* Sekme şeridi: referanstaki "All / Skills / Plugins / Connectors" gibi düz metin */
.mp__catlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.mp__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: -1px;
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--t-md);
  color: var(--fg-sec);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.mp__cat:hover { background: transparent; color: var(--fg); }
.mp__cat[disabled] {
  /* panel ölçümü 30.10.2026: --fg-quiet #8e8c8b boş kategoride 3.35:1 kaldı;
     erişilebilir olsun diye --fg-ter #5f5d5a (5.9:1). */
  color: var(--fg-ter);
  cursor: not-allowed;
  background: transparent;
}
.mp__cat[disabled]:hover { background: transparent; color: var(--fg-ter); }
.mp__cat:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.mp__cat.is-active {
  background: transparent;
  border-bottom-color: var(--fg);
  color: var(--fg);
  font-weight: 600;
}
.mp__cat-ico {
  display: none;  /* referans karede sekmeler yalın metin; ikon kartın içinde kalır */
}
.mp__cat.is-active .mp__cat-ico { color: var(--accent-strong); }
.mp__cat-n {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-ter);
}

/* Bölüm başlığı: "Beceriler  24" solda, durum satırı sağda (referans: Skills · View all) */
.mp__sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-4);
}
.mp__sec-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.mp__sec-n {
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
  background: var(--card-02);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg-sec);
}
.mp__cats-note {
  margin: var(--s-4) 0 var(--s-6);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--fg-ter);
}

.mp__status {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--fg-ter);
}
.mp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-4);
}

/* ---------- Kart ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  border: 0;
  background: transparent;
}
/* Kart arka planı/çerçevesi yok (admin kararı 30.10.2026): hover ve odak
   geri bildirimi ad + ikon rengiyle verilir, kutu gölgesi eklenmez. */
.card:hover .card__name,
.card:focus-within .card__name { color: var(--accent-strong); }
.card:hover .card__ico,
.card:focus-within .card__ico { color: var(--accent-strong); }
.card__name,
.card__ico { transition: color var(--dur-2) var(--ease); }
.card.is-hidden { display: none; }

.card__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.card__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--fg-ter);
}
.card__ico--accent { color: var(--accent-strong); }
.card__name {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__badge {
  flex: none;
  margin-left: auto;
  padding: 2px var(--s-2);
  border: 1px solid var(--accent-strong);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  color: var(--accent-hover);
  white-space: nowrap;
}

.card__desc {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg-sec);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__tags {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Referans kartı: başlıkta tek renkli rozet, altta sade soluk satır.
   Bu yüzden kategori çipi tek vurgulu rozet, diğerleri arka plansız metin. */
.card__tag {
  padding: 0;
  border-radius: 0;
  font-size: var(--t-xs);
  background: transparent;
  color: var(--fg-ter);
}
.card__tag--cat {
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.card__tag--src { font-family: var(--font-mono); }

.card__extra {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--fg-ter);
}
/* Ikili dosya uyarisi: renkli cerceve yerine noktalı cerceve + koyu metin —
   acik zeminde kontrast kaybi olmasin (--fg-02 = 10:1). */
.card__warn {
  padding: 2px var(--s-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--fg-02);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--s-1);
}
.card__btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Sonuc yok ---------- */
.mp__empty {
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--card-01);
  text-align: center;
}
.mp__empty[hidden] { display: none; }
.mp__empty-t {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--fg);
}
.mp__empty-d {
  margin: 0 0 var(--s-5);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg-sec);
}

/* ---------- Katki cagrisi ---------- */
.mp__cta {
  padding: var(--s-9) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.mp__cta-inner { text-align: center; }
.mp__cta-title {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--fg);
}
/* Vurgu tek bir sıfat öbeğinde: renk değil, ağırlık + alt çizgi izi ile
   ayrışır (palet sakin kalsın, vurgu rengi butonlara ayrılmış). */
.mp__cta-em {
  position: relative;
  font-weight: 400;
  color: var(--fg-sec);
  letter-spacing: -0.03em;
}
.mp__cta-lede {
  margin: var(--s-3) auto 0;
  max-width: 54ch;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--fg-sec);
}
.mp__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.mp__step {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.mp__step-n {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
}
.mp__step-b { display: block; }
.mp__step-t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--fg);
}
.mp__step-d {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg-sec);
}
.mp__cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .mp__cats-note { display: none; }
}
@media (max-width: 768px) {
  .mp__head { padding: var(--s-6) 0 var(--s-5); }
  .mp__head-row { flex-direction: column; gap: var(--s-3); }
  .mp__title { font-size: var(--t-2xl); }
  .mp__lede { font-size: var(--t-base); }
  .mp__head { padding: var(--s-7) 0 var(--s-6); }
  .mp__search { margin-top: var(--s-5); height: 46px; }
  /* Admin 30.10.2026: kategoriler mobilde alt alta kaymasın; tek satırda
     kalıp yana kaydırılsın. Çubuğu gizli, dokunmayla kaydırma açık. */
  .mp__catlist {
    gap: var(--s-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--s-3) * -1);
    padding-inline: var(--s-3);
  }
  .mp__catlist::-webkit-scrollbar { display: none; }
  .mp__cat { flex: none; white-space: nowrap; }
  .mp__sec-head { flex-wrap: wrap; gap: var(--s-1); }
  .mp__steps { grid-template-columns: minmax(0, 1fr); }
  .mp__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 480px) {
  .mp__catalog { padding: var(--s-5) 0 var(--s-7); }
  .mp__grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--s-4); }
  .mp__cta { padding: var(--s-8) 0; }
}

/* Sabit bilgi bandi pazaryerinde de altta: icerik bant kadar nefes alir. */
.mp { padding-bottom: var(--s-8); }

/* Hareket azaltma tercihi: tüm geçişler anında olur. */
@media (prefers-reduced-motion: reduce) {
  .card__name,
  .card__ico,
  .mp__float,
  .mp__cat,
  .mp__search,
  .mp__search-clear { transition: none; }
}