/* v12 (27.10.2026): kagit fis yerine 4 adimli koyu kart (Quasar "Get Started" kalibi) + surum/framework satiri;
   "Recent buyers" v13de kayan seride gecti (feron-kayan.css). Yalniz gercek veri: Tebex son odemeler modulu (isim + urun).
   Uydurma yorum, yildiz, satis/sunucu sayisi yok. Yorum yeri [data-yorumlar] kapali durur. kart.css'ten sonra yuklenir. */
p.fx-ust-etiket { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vurgu-acik, var(--vurgu)); }
p.fx-ust-etiket .lucide { width: 16px; height: 16px; }

/* ---- Adimlar ---- */
.fx-adimlar { position: relative; padding: 120px 0; }
.fx-adimlar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, var(--vurgu-sis, rgba(255, 255, 255, .04)), transparent 70%); }
.fx-adim-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none;
  counter-reset: adim; }
.fx-adim { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: var(--r-b, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .07)), var(--cam-isik, none); }
/* adimlari baglayan ince altin cizgi */
.fx-adim + .fx-adim::before { content: ""; position: absolute; top: 44px; left: -16px; width: 16px; height: 1px; background: var(--vurgu-cizgi, var(--vurgu)); }
.fx-adim > .lucide { width: 44px; height: 44px; padding: 11px; margin-bottom: 10px; border-radius: var(--r, 10px); color: var(--vurgu-acik, var(--vurgu));
  background: var(--vurgu-sis, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px var(--vurgu-cizgi, transparent); }
.fx-adim-no { position: absolute; top: 18px; right: 20px; font: 700 34px/1 var(--baslik); font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); }
.fx-adim b { font: 700 20px/1.2 var(--baslik); }
.fx-adim p { margin: 0; color: var(--soluk); font-size: 15px; line-height: 1.5; }
.fx-adim a { width: fit-content; color: var(--vurgu-acik, var(--vurgu)); font-size: 14px; font-weight: 600; text-decoration: none; }
.fx-adim a:hover { text-decoration: underline; }
.fx-adim-bag { display: flex; gap: 14px; margin-top: auto; padding-top: 4px; }

/* Surum karsilastirmasi + framework haplari */
.fx-surum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.fx-surum-kart { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-b, 16px); background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .07)); }
.fx-surum-kart > .lucide { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--baslik-vurgu, var(--vurgu)); }
.fx-surum-kart b { font: 700 17px/1.2 var(--baslik); }
.fx-surum-kart p { margin: 6px 0 0; color: var(--soluk); font-size: 14px; line-height: 1.45; }
.fx-surum-hap { display: inline-flex; align-items: center; min-height: 22px; margin-left: 10px; padding: 0 8px; border-radius: var(--r-hap, 999px);
  font-size: 12px; font-weight: 600; vertical-align: 2px; color: var(--vurgu-acik, var(--vurgu)); background: var(--vurgu-sis, transparent);
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi, transparent); }
.fx-surum-cerceve { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-surum-cerceve small { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.fx-surum-cerceve span { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-hap, 999px);
  font-size: 14px; color: var(--soluk); background: var(--cam, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px var(--kenar-ince, transparent); }
.fx-surum-cerceve span b { color: var(--metin); font-weight: 600; }

@media (max-width: 1080px) {
  .fx-adim-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-adim + .fx-adim::before { display: none; }
}
@media (max-width: 640px) {
  .fx-adimlar { padding: 72px 0; }
  .fx-adim-izgara, .fx-surum { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fx-adim { padding: 18px; }
}
.fx-surum-kart p::first-letter { text-transform: uppercase; }
.fx-adimlar { padding-bottom: 24px; }