/* Ana sayfa "Features": UST USTE BINEN KARTLAR (sticky) + kutunun icinde buyuk acik ikon.
   TEK KAYNAK — 6 dilin ana sayfasi bunu yukler (2026-10-08, sahip secimi: "acik ikonlu olan olsun").
   Kart HTML'i: marketing/previews/apply_features_stack.py uretir. Renkler sayfanin :root degiskenlerinden. */
#features .fsStack { position: relative; margin-top: 46px; padding-bottom: 6vh; }
.fsCard { position: sticky; top: calc(92px + var(--i) * 14px); min-height: 370px; margin-bottom: 40px; border-radius: 30px;
          border: 1px solid var(--border); display: flex; align-items: center; transform-origin: 50% 0; isolation: isolate; overflow: hidden;
          background: radial-gradient(520px 320px at 88% 10%, hsla(var(--h),95%,68%,.55) 0, transparent 70%),
                      radial-gradient(420px 300px at 70% 100%, hsla(calc(var(--h) + 40),90%,70%,.45) 0, transparent 70%), #fff;
          box-shadow: 0 1px 2px rgba(36,26,16,.05), 0 30px 54px -28px rgba(36,26,16,.38); }
.fsBody { position: relative; z-index: 4; padding: 40px 48px; max-width: 56%; }
.fsNo { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--accent2); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.fsBody h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; text-wrap: balance; }
/* Baslik de Details sayfasina gider (yalniz "Details" linki degil). Link OLDUGU gorunsun diye: ince turuncu altcizgi + ok
   (2026-10-09: sahip "basliklar tiklanabilir degil" dedi; teknik olarak tikliyordu ama hicbir ipucu yoktu). */
.fsBody h3 a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
               text-decoration-color: rgba(232,89,12,.35); transition: color .2s, text-decoration-color .2s; }
.fsBody h3 a::after { content: "→"; display: inline-block; margin-left: .3em; font-size: .8em; color: var(--accent2); opacity: .6; transition: transform .2s, opacity .2s; }
.fsBody h3 a:hover, .fsBody h3 a:focus-visible { color: var(--accent2); text-decoration-color: var(--accent2); }
.fsBody h3 a:hover::after, .fsBody h3 a:focus-visible::after { transform: translateX(4px); opacity: 1; }
.fsBody p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: #4b3b2b; }
.fsLinks { display: flex; gap: 22px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.fsLinks a { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.fsLinks .det { color: var(--muted); } .fsLinks .det:hover { color: var(--accent2); }
.fsLinks .see { color: var(--accent2); }
.fsLinks .playMini { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 11px; }
.fsIcon { position: absolute; right: 30px; top: 50%; width: 300px; height: 300px; z-index: 3; pointer-events: none; transform: translateY(-50%) rotate(-8deg); }
.fsIcon svg { width: 100%; height: 100%; fill: none; stroke: hsl(var(--h),70%,40%); stroke-width: 1.1; opacity: .32; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 800px) {
  #features .fsStack { margin-top: 34px; }
  .fsCard { top: calc(76px + var(--i) * 10px); min-height: 400px; align-items: flex-end; border-radius: 24px; margin-bottom: 28px; }
  .fsBody { max-width: none; padding: 26px 22px; }
  .fsBody h3 { font-size: 24px; }
  .fsBody p { font-size: 15px; }
  /* ikon metnin ARKASINDA kalmasin: kucuk, ust-saga, daha sonuk */
  .fsIcon { width: 150px; height: 150px; right: -6px; top: 19%; }
  .fsIcon svg { opacity: .24; }
}
@media (prefers-reduced-motion: reduce) { .fsBody h3 a, .fsBody h3 a::after { transition: none; } }