/* =====================================================================
   SARTORFIT — BÖLMƏLƏR
   ---------------------------------------------------------------------
   Hər bölmə referans faylından (App.dc.html) SƏTİR-SƏTİR köçürülüb;
   yalnız inline stillər class/token-lərə çevrilib. Dəyər uydurulmayıb.

   Yüklənmə sırası: tokens.css → components.css → BU FAYL
   ⚠️ `!important` YOXDUR.

   ADDIM 2: Hero
   ===================================================================== */

/* ================================================== HERO (referans s.117–183) */
.sf-hero-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto 8px;
  padding: 0 var(--wrap-pad);   /* hero-nun yuxarı boşluğu YOXDUR */
}

.sf-hero {
  position: relative;
  border-radius: var(--r-hero);
  overflow: hidden;
  padding: clamp(28px, 3vw, 44px) 34px clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.15fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
}

/* fon şəkli — referans onu İŞIQLANDIRIR (brightness 2.35) */
.sf-hero-bg {
  position: absolute; inset: -4%;
  width: 108%; height: 108%;
  object-fit: cover; object-position: center;
  filter: blur(3px) brightness(2.35) saturate(1.2);
  z-index: 0;
}
/* soldan sağa qaralan örtük — mətnin oxunaqlılığı üçün */
.sf-hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(14,14,20,0.86) 0%, rgba(14,14,20,0.46) 34%,
                              rgba(14,14,20,0.04) 62%, rgba(14,14,20,0.22) 100%);
}
/* incə kənar + yuxarı işıq xətti */
.sf-hero-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: var(--r-hero);
  border: 1px solid var(--w08);
  box-shadow: var(--glass-inset);
}

/* ---------- SÜTUN 1 — mətn (SOLDA) ---------- */
.sf-hero-copy { position: relative; z-index: 5; animation: sfRise .8s ease both; }
.sf-hero-copy h1 { margin: 20px 0 0; }
.sf-hero-copy h1 em { font-style: normal; color: var(--accent); }
.sf-hero-copy > p { margin: 20px 0 0; max-width: 400px; }

/* axtarış konsolu */
.sf-console {
  margin-top: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--w10);
  background: var(--glass-fill), var(--bg-panel);
  backdrop-filter: var(--blur-console);
  -webkit-backdrop-filter: var(--blur-console);
  box-shadow: var(--sh-panel);
  padding: 14px;
}

.sf-tabs {
  display: flex; gap: 6px; padding: 4px;
  border-radius: var(--r-btn);
  background: var(--w04);
}
.sf-tab {
  flex: 1; text-align: center;
  min-height: var(--tap);
  padding: 11px 8px;
  border-radius: var(--r-tab);
  font-size: var(--fs-sm-2);
  color: var(--fg-3);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.sf-tab:hover { color: var(--fg-2); }
.sf-tab.is-on { background: rgba(139,92,246,0.22); color: var(--accent-300); }

.sf-panel { display: none; margin-top: var(--gap); }
.sf-panel.is-on { display: block; }

.sf-dropzone {
  border-radius: var(--r-xs);
  border: 1px dashed rgba(167,139,250,0.45);
  background: rgba(139,92,246,0.07);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.sf-dropzone:hover, .sf-dropzone.is-over { background: rgba(139,92,246,0.12); }
.sf-dropzone .ic {
  width: 42px; height: 42px; margin: 0 auto;
  border-radius: var(--r-fit);
  border: 1px solid rgba(139,92,246,0.35);
  background: rgba(139,92,246,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--accent-100);
}
.sf-dropzone .t { font-size: 14px; font-weight: 600; margin-top: var(--gap); }
.sf-dropzone .h { font-size: var(--fs-meta); color: var(--fg-3); margin-top: 5px; }

.sf-field-row { display: flex; gap: var(--gap-xs); flex-wrap: wrap; }
.sf-field-row .sf-input {
  flex: 1 1 200px; min-width: 0;
  min-height: var(--tap-md);
  padding: 12px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--w12);
  background: var(--w04);
  color: var(--fg);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.sf-field-row .sf-input::placeholder { color: var(--fg-meta); }
.sf-field-row .sf-input:focus { border-color: rgba(167,139,250,0.55); background: var(--w06); }
.sf-field-row .sf-btn { min-height: var(--tap-md); padding: 12px 20px; }

/* trust zolağı — konsolun İÇİNDƏ, sadə mətn (nöqtə/ikon yoxdur) */
.sf-trust {
  display: flex; flex-wrap: wrap; gap: var(--gap-xl);
  margin-top: var(--gap-md); padding-top: var(--gap);
  border-top: 1px solid var(--w06);
  font-size: var(--fs-trust); color: var(--fg-3);
}

/* ---------- SÜTUN 2 — geyim kompozisiyası (SAĞDA) ---------- */
.sf-compo {
  position: relative; z-index: 5;
  width: 100%; min-width: 0;
  align-self: center;
  min-height: 470px;
}
/* a) tünd vinyet */
.sf-compo-vignette {
  position: absolute; inset: -30%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 56% 56% at 50% 52%, rgba(9,9,11,0.55) 0%,
              rgba(9,9,11,0.34) 55%, rgba(9,9,11,0.12) 78%, rgba(9,9,11,0) 100%);
}
/* b) bənövşəyi işıq ləkəsi */
.sf-compo-glow {
  position: absolute; left: 8%; bottom: 2%; width: 84%; height: 20%;
  border-radius: 50%; z-index: 8;
  background: radial-gradient(ellipse at 50% 40%, rgba(139,92,246,0.34), rgba(139,92,246,0) 70%);
  filter: blur(18px);
}
/* c) xarici halqa */
.sf-compo-ring {
  position: absolute; left: 4%; bottom: 1%; width: 92%; height: 21%;
  border-radius: 50%; z-index: 9;
  border: 1px solid rgba(167,139,250,0.45);
  box-shadow: 0 0 40px rgba(139,92,246,0.35);
}
/* d) şüşə platforma — geyimlər bunun üstündə dayanır */
.sf-platform {
  position: absolute; left: 10%; bottom: 4%; width: 80%; height: 18%;
  border-radius: 50%; z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(196,181,253,0.55);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  box-shadow: 0 30px 70px rgba(124,58,237,0.35),
              inset 0 2px 0 rgba(255,255,255,0.20),
              0 0 60px rgba(139,92,246,0.35);
}

.sf-compo img { position: absolute; object-fit: contain; }
.sf-compo .c-suit {
  left: 1%; bottom: 16%; width: 33%; height: auto; max-height: 62%; z-index: 19;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.65));
  animation: sfFloat 9s ease-in-out infinite;
}
.sf-compo .c-blazer {
  right: 1%; bottom: 16%; width: 33%; height: auto; max-height: 62%; z-index: 19;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.65));
  animation: sfFloat 9.5s .4s ease-in-out infinite;
}
.sf-compo .c-dress {
  left: 50%; bottom: 15%; width: 22%; height: auto; max-height: 76%; z-index: 20;
  transform: translateX(-50%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.65));
}
.sf-compo .c-glasses {
  left: 10%; bottom: 8%; width: 17%; z-index: 21;
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6));
}
.sf-compo .c-bag {
  right: 10%; bottom: 6%; width: 17%; z-index: 21;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.6));
}
.sf-compo .c-belt {
  left: 50%; bottom: 8%; width: 15%; z-index: 22;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}
.sf-compo .c-watch {
  top: 8%; left: 2%; width: 13%; z-index: 25;
  transform: rotate(-12deg);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
  animation: sfDrift 7s ease-in-out infinite;
}
.sf-compo .c-shoes {
  top: 8%; right: 2%; width: 16%; z-index: 25;
  transform: rotate(12deg);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
  animation: sfDrift 7.5s .3s ease-in-out infinite;
}

.sf-compo-tag {
  position: absolute; top: 14px; z-index: 30;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--w10);
  border: 1px solid var(--w12);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  color: var(--fg-bright);
}
.sf-compo-tag.men   { left: 14px; }
.sf-compo-tag.women { right: 14px; }

/* ================================================== ANİMASİYA (SPEC §6) */
@keyframes sfRise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sfDrift { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
                     50%      { transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + 3deg)); } }
/* saat/ayaqqabı öz bucağını saxlasın */
.sf-compo .c-watch { --rot: -12deg; }
.sf-compo .c-shoes { --rot:  12deg; }

/* ================================================== RESPONSİV
   375 / 390 / 768 / 1024 / 1440 — dizaynda @media yoxdur (SPEC §7) */
@media (max-width: 1024px) {
  .sf-hero-sec { padding: 0 22px; }
  .sf-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 32px; gap: 28px; }
  .sf-compo { min-height: 400px; }
}
@media (max-width: 768px) {
  .sf-console { padding: 12px; }
  .sf-compo { min-height: 340px; }
  .sf-compo-tag { font-size: 10px; padding: 4px 9px; }
}
@media (max-width: 480px) {
  .sf-hero-sec { padding: 0 16px; }
  .sf-hero { border-radius: var(--r-md); padding: 22px 16px 26px; }
  .sf-hero-edge { border-radius: var(--r-md); }
  .sf-compo { min-height: 280px; }
  .sf-trust { gap: var(--gap); }
  .sf-field-row .sf-btn { width: 100%; }
}

/* ================================================== STATS (referans s.184–199)
   Rəqəmlər site-config.js-dən gəlir; dizayndakı 40+/1.8M/96%/$34 uydurmadır. */
.sf-stats-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.sf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-3xl);
}
.sf-stat { display: flex; gap: var(--gap-lg); align-items: center; }
.sf-stat .ic {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-xs);
  border: 1px solid rgba(139,92,246,0.28);
  background: rgba(139,92,246,0.11);
  display: flex; align-items: center; justify-content: center;
}
.sf-stat .ic span {
  display: block; width: 14px; height: 14px;
  border: 1.5px solid var(--accent-light);
  border-radius: 4px;
  transform: rotate(45deg);
}
.sf-stat .v {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
}
.sf-stat .l { font-size: 12.5px; color: var(--fg-3); margin-top: 4px; }

/* ================================================== SOLUTIONS (referans s.200–240) */
.sf-sol-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-sol { display: flex; flex-wrap: nowrap; gap: 24px; align-items: center; }

.sf-sol-copy {
  flex: 0 0 auto; width: 260px; min-width: 210px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 10px 6px 0;
}
/* solutions eyebrow-u pill formadadır (hero-dakı kvadrat qutudan fərqli) */
.sf-sol-eyebrow {
  display: inline-block; align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--w06);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow2);
  color: var(--fg-3);
}
.sf-sol-copy h2 { font-size: var(--fs-h2-sol); margin: 22px 0 0; }
.sf-sol-copy p {
  margin: 18px 0 0; max-width: 300px;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-3);
}
.sf-sol-cta {
  cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--gap-md);
  min-height: var(--tap-lg);
  margin-top: 28px;
  padding: 13px 13px 13px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--w12);
  background: var(--w04);
  font-size: var(--fs-sm); color: var(--fg);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.sf-sol-cta:hover { background: var(--w08); border-color: rgba(196,181,253,0.45); }
.sf-sol-cta .arr {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--grad-cta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

/* axan lent — kənarları yumşaldılmış */
.sf-cat-rail {
  flex: 1 1 0; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.sf-cat-track {
  display: flex; gap: var(--gap-md); align-items: flex-start;
  width: max-content;
  animation: sfCatMarquee 30s linear infinite;
}
.sf-cat-rail:hover .sf-cat-track { animation-play-state: paused; }

.sf-cat {
  cursor: pointer; position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--w07);
  flex: none; width: 176px; height: 215px;
  background: rgba(14,14,19,0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) ease;
}
.sf-cat:hover { transform: translateY(-4px); border-color: rgba(196,181,253,0.45); }
.sf-cat img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.sf-cat-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,14,0.62) 0%, rgba(10,10,14,0.26) 30%,
              rgba(10,10,14,0.02) 52%, rgba(10,10,14,0.30) 100%);
}
.sf-cat-txt { position: relative; z-index: 3; padding: 18px 14px 0; min-width: 0; }
.sf-cat-txt h3 { margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.8); overflow-wrap: break-word; }
.sf-cat-txt p {
  margin: 7px 0 0; font-size: var(--fs-trust); line-height: 1.45;
  color: var(--fg-2); text-shadow: 0 1px 6px rgba(0,0,0,0.75); overflow-wrap: break-word;
}
.sf-cat-go { position: relative; z-index: 3; margin-top: auto; padding: var(--gap-md); }
.sf-cat-go span {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(12,12,17,0.55);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--fg);
}

/* kateqoriya şəkillərinin kadrlanması — referansın pos/fx dəyərləri */
.sf-cat[data-cat="men"]         img { object-position: center 16%; filter: brightness(1.22) saturate(1.05); }
.sf-cat[data-cat="women"]       img { object-position: center 20%; filter: brightness(1.22) saturate(1.05); }
.sf-cat[data-cat="kids"]        img { object-position: center 22%; filter: brightness(1.22) saturate(1.05); }
.sf-cat[data-cat="footwear"]    img { object-position: center 60%; filter: brightness(1.12) saturate(1.05); }
.sf-cat[data-cat="accessories"] img { object-position: center 52%; filter: brightness(2.15) contrast(1.10) saturate(1.05); }

@keyframes sfCatMarquee { from { transform: translateX(0); } to { transform: translateX(-950px); } }

/* ---------- responsiv ---------- */
@media (max-width: 1180px) {
  .sf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 1024px) {
  .sf-stats-sec, .sf-sol-sec { padding-left: 22px; padding-right: 22px; }
  .sf-sol { flex-wrap: wrap; }
  .sf-sol-copy { width: 100%; }
  .sf-sol-copy p { max-width: none; }
  .sf-cat-rail { width: 100%; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .sf-stats-sec, .sf-sol-sec { padding-left: 16px; padding-right: 16px; }
  .sf-stats { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
  .sf-stat .v { font-size: 23px; }
  .sf-sol-cta { width: 100%; justify-content: space-between; }
}

/* Qoruyucu: bölmə daxilindəki hər şəkil konteynerinə sığır. */
.sf-tryon-sec img, .sf-sol-sec img, .sf-stats-sec img { max-width: 100%; }

/* ================================================== TRY-ON + FIT REPORT
   Referans: App.dc.html s.241–330. */
.sf-tryon-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-tryon-card { padding: 24px 26px; }

.sf-tryon-head {
  display: flex; align-items: center; gap: var(--gap-xl);
  flex-wrap: wrap; margin-bottom: var(--gap-2xl);
}
/* try-on eyebrow-u nöqtəli pilldir (solutions-dan fərqli) */
.sf-tryon-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid rgba(167,139,250,0.32);
  background: rgba(139,92,246,0.14);
  font-size: 10px; letter-spacing: var(--ls-eyebrow); color: var(--accent-200);
}
.sf-tryon-eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent-light);
}
.sf-tryon-head h2 { font-size: var(--fs-h2-tryon); letter-spacing: var(--ls-h2-tryon); line-height: 1.14; margin: 14px 0 0; }

.sf-tryon-tabs {
  margin-left: auto; display: flex; gap: 6px; padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--w08);
  background: var(--w04);
}
.sf-tryon-tabs button {
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-sm-2); color: var(--fg-3);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.sf-tryon-tabs button.is-on { background: rgba(139,92,246,0.24); color: var(--accent-300); }

.sf-tryon { display: flex; gap: var(--gap-lg); align-items: stretch; flex-wrap: wrap; }

/* ---------- şaquli miniatür sütunu ---------- */
.sf-thumbs { flex: none; width: 78px; display: flex; flex-direction: column; gap: var(--gap-sm); }
.sf-thumb {
  cursor: pointer; position: relative; display: block;
  height: 74px; border-radius: var(--r-btn); overflow: hidden;
  border: 1.5px solid var(--w12);
  background: var(--w05);
  transition: border-color .4s ease, transform var(--t-fast) ease;
}
.sf-thumb img { width: 100%; height: 100%; max-height: 74px; object-fit: contain; padding: 8px; display: block; }
.sf-thumb:hover { transform: translateY(-2px); }
.sf-thumb.is-on { border-color: rgba(196,181,253,0.85); }
.sf-thumb-look {
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); border-radius: var(--r-btn);
  border: 1px solid var(--w10); background: var(--w04);
  font-size: var(--fs-trust); color: var(--fg-2); cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.sf-thumb-look:hover { background: var(--w08); }
.sf-thumb-look.is-on { border-color: rgba(196,181,253,0.85); color: var(--accent-200); }

/* ---------- səhnə ---------- */
.sf-stage {
  flex: 1 1 240px; min-width: 0; position: relative;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--w08);
  background: var(--bg-elev);
  min-height: 380px;
}
/* Şəkillər səhnədən kənara çıxa bilməz: konteyner `overflow:hidden`,
   şəkillər mütləq mövqedə və `object-fit` ilə məhdudlaşdırılıb.
   CSS yüklənməsə belə `max-height` qoruyucu rolunu oynayır. */
.sf-stage .look {
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  max-width: none; max-height: none;
  object-fit: cover; object-position: center 18%;
}
.sf-stage .veil {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(12,12,17,0.80);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; transition: opacity var(--t-slow) var(--ease-soft);
}
.sf-stage .piece {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain; padding: 34px;
  opacity: 0; transform: scale(.94);
  transition: opacity var(--t-slow) var(--ease-soft), transform .7s var(--ease);
}
.sf-stage.is-piece .veil  { opacity: 1; }
.sf-stage.is-piece .piece { opacity: 1; transform: scale(1); }

.sf-stage-live {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(12,12,17,0.58);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 10px; letter-spacing: var(--ls-eyebrow); color: var(--fg);
}
.sf-stage-view {
  position: absolute; bottom: 14px; left: 14px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(12,12,17,0.62);
  border: 1px solid var(--w14);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; color: var(--fg-2);
}

/* ---------- fit report ---------- */
.sf-report {
  flex: 1 1 230px; min-width: 0; max-width: 330px;
  border-radius: var(--r-sm);
  border: 1px solid var(--w08);
  background: rgba(12,12,17,0.45);
  padding: var(--gap-2xl);
  display: flex; flex-direction: column; overflow: hidden;
}
.sf-report-head { display: flex; align-items: center; gap: 9px; }
.sf-report-head i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent-light);
  box-shadow: 0 0 10px rgba(167,139,250,0.9);
}
.sf-report-head .lbl { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--accent-light); }
.sf-report-head .mode {
  margin-left: auto; font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px; color: var(--fg-meta);
}

.sf-report-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 330px; }
.sf-report-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.015em; margin-top: var(--gap-md);
  min-height: 44px; display: flex; align-items: flex-start;
}
.sf-report-sub { font-size: var(--fs-trust); color: var(--fg-4); margin-top: 2px; min-height: 16px; }

.sf-report-row { display: flex; align-items: center; gap: var(--gap-lg); margin-top: var(--gap-xl); }
.sf-gauge { position: relative; flex: none; width: 84px; height: 84px; }
.sf-gauge svg { width: 84px; height: 84px; display: block; transform: rotate(-90deg); }
.sf-gauge .track { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 9; }
.sf-gauge .ring {
  fill: none; stroke: var(--accent-light); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 314;
  transition: stroke-dashoffset .9s var(--ease);
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.55));
}
.sf-gauge .val {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sf-gauge .score { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.sf-gauge .of    { font-size: 8.5px; letter-spacing: var(--ls-label); color: var(--fg-4); }

.sf-report-facts { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.sf-report-facts .k { font-size: 10px; letter-spacing: var(--ls-caps); color: var(--fg-meta); }
.sf-report-facts .size {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--good-bright); margin-top: 3px; min-height: 21px;
}
.sf-report-facts .price {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  margin-top: 3px; min-height: 20px;
}

.sf-bars { display: flex; flex-direction: column; gap: 11px; margin-top: var(--gap-2xl); }
.sf-bar-head { display: flex; align-items: baseline; gap: var(--gap-xs); min-height: 17px; }
.sf-bar-head .l { font-size: var(--fs-trust); color: var(--fg-lead); min-width: 0; white-space: nowrap; }
.sf-bar-head .v { margin-left: auto; flex: none; font-size: var(--fs-xs); white-space: nowrap; transition: color .5s ease; }
.sf-bar-track { height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,0.09); margin-top: 6px; overflow: hidden; }
.sf-bar-fill {
  position: relative; display: block; height: 100%;
  border-radius: var(--r-pill);
  box-shadow: 0 0 10px rgba(167,139,250,0.35);
  width: var(--w, 0%);
  transition: width .9s var(--ease), background .5s ease;
}
.sf-bar.is-good .sf-bar-fill { background: linear-gradient(90deg, var(--good-deep), var(--good-bright)); }
.sf-bar.is-good .sf-bar-head .v { color: var(--good-bright); }
.sf-bar.is-mid  .sf-bar-fill { background: linear-gradient(90deg, var(--accent-select), var(--accent-light)); }
.sf-bar.is-mid  .sf-bar-head .v { color: var(--accent-200); }
.sf-bar.is-low  .sf-bar-fill { background: linear-gradient(90deg, #B45309, var(--danger)); }
.sf-bar.is-low  .sf-bar-head .v { color: var(--danger); }

.sf-report-note {
  font-size: var(--fs-meta); line-height: 1.55; color: var(--fg-3);
  margin-top: var(--gap-lg); min-height: 56px;
}
.sf-report .sf-btn { min-height: var(--tap-md); margin-top: var(--gap-xl); padding: 13px 20px; border-radius: var(--r-fit); }

/* ---------- responsiv ---------- */
@media (max-width: 1024px) {
  .sf-tryon-sec { padding-left: 22px; padding-right: 22px; }
  .sf-report { max-width: none; flex: 1 1 100%; }
  .sf-report-body { min-height: 0; }
}
@media (max-width: 768px) {
  .sf-tryon-tabs { margin-left: 0; }
  .sf-thumbs { flex-direction: row; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sf-thumbs::-webkit-scrollbar { display: none; }
  .sf-thumb { width: 74px; flex: none; }
  .sf-thumb-look { margin-top: 0; flex: none; padding: 0 14px; }
  .sf-stage { min-height: 320px; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .sf-tryon-card { padding: 18px 16px; }
  .sf-tryon-sec { padding-left: 16px; padding-right: 16px; }
  .sf-tryon-tabs { width: 100%; }
  .sf-tryon-tabs button { flex: 1; justify-content: center; padding: 10px 8px; }
  .sf-stage { min-height: 280px; }
  .sf-report { padding: 16px; }
}

/* ================================================== BRENDLƏR (referans s.331–364) */
.sf-brands-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-brands-card {
  border-radius: var(--r-card);
  border: 1px solid var(--w07);
  background: linear-gradient(165deg, rgba(255,255,255,0.065), var(--w02)), rgba(16,16,22,0.50);
  backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel);
  padding: 22px 0 24px;
}
.sf-brands-lbl { font-size: 10px; letter-spacing: 0.2em; color: var(--fg-4); margin: 0 34px 16px; }
.sf-brands-rail {
  margin: 0 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--w06);
  background: var(--w03);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.sf-brands-track { display: flex; width: max-content; animation: sfMarquee 34s linear infinite; }
.sf-brands-rail:hover .sf-brands-track { animation-play-state: paused; }
.sf-brands-row {
  display: flex; align-items: center; gap: 56px;
  padding: 20px 28px; flex: none;
  font-family: var(--font-display); color: var(--fg-bright);
  font-size: 19px; white-space: nowrap;
}
/* hər brendin öz hərf xarakteri — referansdan */
.bm-zara    { letter-spacing: 0.16em; font-weight: 400; }
.bm-hm      { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; letter-spacing: 0.02em; }
.bm-nike    { font-weight: 700; font-style: italic; letter-spacing: -0.02em; }
.bm-adidas  { font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }
.bm-mango   { letter-spacing: 0.22em; font-weight: 400; font-size: 17px; }
.bm-bershka { font-family: Georgia, serif; letter-spacing: 0.01em; font-weight: 400; }
.bm-asos    { font-weight: 700; letter-spacing: -0.04em; text-transform: lowercase; font-size: 21px; }
.bm-gucci   { font-family: Georgia, serif; letter-spacing: 0.34em; font-weight: 400; font-size: 16px; }
.bm-prada   { font-family: Georgia, serif; font-weight: 700; letter-spacing: 0.14em; font-size: 16px; }
.bm-lv      { letter-spacing: 0.12em; font-weight: 500; }

@keyframes sfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================== LIVE DEMO (referans s.365–446) */
.sf-demo-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: clamp(24px, 3vw, 40px); align-items: center; }

.sf-demo-eyebrow {
  display: inline-block; padding: 6px 11px;
  border-radius: var(--r-tag);
  border: 1px solid rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.13);
  color: var(--accent-100);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow2);
}
.sf-demo-copy h2 { font-size: var(--fs-h2-demo); line-height: 1.15; margin: 18px 0 0; }
.sf-steps { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: 24px; }
.sf-step {
  cursor: pointer; display: flex; align-items: center; gap: var(--gap-md);
  padding: 13px 15px; border-radius: var(--r-xs);
  border: 1px solid var(--w06); background: var(--w03);
  text-align: left; width: 100%;
  transition: background .4s ease, border-color .4s ease;
}
.sf-step.is-on { border-color: rgba(167,139,250,0.40); background: rgba(139,92,246,0.14); }
.sf-step .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--w10); background: var(--w05); color: var(--fg-4);
}
.sf-step.is-on .n { border-color: rgba(167,139,250,0.55); background: rgba(139,92,246,0.30); color: var(--accent-300); }
.sf-step .t { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); }
.sf-step.is-on .t { color: var(--accent-300); }
.sf-step .b { display: block; font-size: var(--fs-meta); line-height: 1.45; color: var(--fg-3); margin-top: 3px; }
.sf-demo-cta {
  cursor: pointer; display: inline-flex; align-items: center;
  min-height: var(--tap-md); margin-top: 22px;
  font-size: var(--fs-sm); color: var(--fg-2);
  transition: color var(--t-fast) ease;
}
.sf-demo-cta:hover { color: var(--fg); }

/* ---------- səhnə ---------- */
.sf-demo-stage {
  position: relative; display: flex;
  border-radius: var(--r-md);
  border: 1px solid var(--w08);
  background: linear-gradient(160deg, var(--w05), rgba(255,255,255,0.01)), rgba(11,11,16,0.62);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), var(--glass-inset);
  overflow: hidden;
}
.sf-demo-prog { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--w06); z-index: 5; }
.sf-demo-prog i {
  display: block; height: 100%; width: 33%;
  background: linear-gradient(90deg, var(--accent-select), var(--accent-100));
  box-shadow: 0 0 12px rgba(167,139,250,0.7);
  transition: width .6s cubic-bezier(0.4,0,0.2,1);
}
.sf-demo-shot {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 34px 22px;
}
.sf-demo-shot .glow {
  position: absolute; left: 14%; right: 14%; bottom: 12%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(139,92,246,0.30), rgba(139,92,246,0) 72%);
  filter: blur(14px);
}
/* şəkil sərbəst böyüyə bilməz */
.sf-demo-shot img {
  position: relative; max-height: 300px; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.62));
}
.sf-demo-scan { position: absolute; left: 12%; right: 12%; top: 8%; bottom: 8%; border-radius: var(--r-xs); border: 1px solid rgba(167,139,250,0.45); overflow: hidden; display: none; }
.sf-demo-stage.is-scanning .sf-demo-scan { display: block; }
.sf-demo-scan i {
  position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(139,92,246,0) 0%, rgba(139,92,246,0.28) 70%, rgba(196,181,253,0.85) 100%);
  animation: sfScan 1.8s ease-in-out infinite;
}
.sf-demo-cap {
  position: absolute; bottom: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(12,12,17,0.75);
  border: 1px solid var(--w12);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--fg-2);
}

/* ---------- sağ panel ---------- */
.sf-demo-out {
  flex: 1 1 0; min-width: 0;
  border-left: 1px solid var(--w07);
  padding: 26px 22px;
  display: flex; flex-direction: column; justify-content: center;
}
.sf-demo-pane { display: none; }
.sf-demo-pane.is-on { display: block; }

/* addım 1 — yükləmə */
.sf-demo-up { text-align: center; }
.sf-demo-up .ic {
  width: 46px; height: 46px; margin: 0 auto;
  border-radius: var(--r-xs);
  border: 1px dashed rgba(167,139,250,0.50);
  background: rgba(139,92,246,0.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent-100);
}
.sf-demo-up .t { font-size: var(--fs-sm); font-weight: 600; margin-top: var(--gap-md); }
.sf-demo-up .m {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); color: var(--fg-3); margin-top: 7px; line-height: 1.7;
}

/* addım 2 — teqlər */
.sf-demo-head { display: flex; align-items: center; gap: 9px; }
.sf-demo-head i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent-light); box-shadow: 0 0 10px rgba(167,139,250,0.9); }
.sf-demo-head .lbl { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--accent-light); }
.sf-demo-head .conf { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--fg-meta); }
.sf-demo-list { display: flex; flex-direction: column; gap: 9px; margin-top: var(--gap-lg); }
.sf-tag-row {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: 10px 13px; border-radius: 11px;
  border: 1px solid rgba(167,139,250,0.24);
  background: linear-gradient(120deg, rgba(139,92,246,0.16), rgba(139,92,246,0.06));
  animation: sfPop .55s cubic-bezier(0.2,0.7,0.2,1) both;
}
.sf-tag-row .k { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; color: var(--fg-4); flex: none; }
.sf-tag-row .v { margin-left: auto; font-size: 12.5px; color: var(--accent-300); text-align: right; }

/* addım 3 — nəticələr */
.sf-demo-res-head { display: flex; align-items: baseline; gap: var(--gap-xs); }
.sf-demo-res-head .a { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--good); }
.sf-demo-res-head .b { margin-left: auto; font-size: var(--fs-eyebrow); color: var(--fg-meta); }
.sf-hit {
  cursor: pointer; display: flex; align-items: center; gap: var(--gap);
  padding: 13px; border-radius: 11px;
  border: 1px solid var(--w06); background: var(--w03);
  animation: sfPop .55s cubic-bezier(0.2,0.7,0.2,1) both;
}
.sf-hit.is-best { border-color: var(--good-bd); background: var(--good-bg); }
.sf-hit .store { font-family: var(--font-display); font-size: var(--fs-trust); letter-spacing: 0.1em; color: var(--fg-bright); flex: none; }
.sf-hit .match { font-size: var(--fs-eyebrow); color: var(--fg-meta); flex: none; }
.sf-hit .price { margin-left: auto; font-family: var(--font-display); font-size: 15px; font-weight: 700; flex: none; }
.sf-hit .tag   { font-size: 10px; width: 54px; text-align: right; flex: none; color: var(--fg-meta); }
.sf-hit.is-best .tag { color: var(--good-soft); }
.sf-demo-saved {
  display: flex; align-items: center; gap: 9px;
  margin-top: var(--gap-xl); padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--good-bd); background: rgba(163,230,53,0.09);
  animation: sfPop .55s .48s cubic-bezier(0.2,0.7,0.2,1) both;
}
.sf-demo-saved b { font-family: var(--font-display); font-size: 15px; color: var(--good-soft); }
.sf-demo-saved span { font-size: var(--fs-trust); color: var(--fg-3); }

@keyframes sfPop  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfScan { 0% { transform: translateY(-40%); } 50% { transform: translateY(250%); } 100% { transform: translateY(-40%); } }

/* ---------- responsiv ---------- */
@media (max-width: 1024px) {
  .sf-brands-sec, .sf-demo-sec { padding-left: 22px; padding-right: 22px; }
  .sf-demo { grid-template-columns: minmax(0, 1fr); }
  .sf-brands-row { gap: 40px; font-size: 17px; }
}
@media (max-width: 768px) {
  .sf-demo-stage { flex-direction: column; }
  .sf-demo-out { border-left: 0; border-top: 1px solid var(--w07); }
  .sf-demo-shot img { max-height: 240px; }
}
@media (max-width: 480px) {
  .sf-brands-sec, .sf-demo-sec { padding-left: 16px; padding-right: 16px; }
  .sf-brands-lbl { margin: 0 18px 12px; }
  .sf-brands-rail { margin: 0 12px; }
  .sf-brands-row { gap: 30px; font-size: 15px; padding: 16px 20px; }
  .sf-demo-shot { padding: 24px 14px; }
  .sf-demo-shot img { max-height: 200px; }
  .sf-demo-out { padding: 20px 16px; }
}

/* ================================================== PREMIUM (referans s.447–475) */
.sf-prem-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-prem {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid rgba(139,92,246,0.18);
  background: linear-gradient(120deg, rgba(139,92,246,0.14), rgba(9,9,11,0.2) 60%);
  padding: 32px 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 30px; align-items: center;
}
.sf-prem-glow {
  position: absolute; right: -140px; bottom: -200px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.20), rgba(139,92,246,0) 70%);
  filter: blur(20px);
}
.sf-prem > div { position: relative; }
.sf-prem-eyebrow {
  display: inline-block; padding: 6px 11px;
  border-radius: var(--r-tag);
  border: 1px solid rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.15);
  color: var(--accent-100);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow2);
}
.sf-prem h2 { font-size: var(--fs-h2-prem); line-height: 1.15; margin: 20px 0 0; }
/* Eyebrow gizlədilib: başlıq onsuz da böyük hərflərlədir, iki CAPS element
   alt-alta ağır görünürdü. Geri qaytarmaq üçün bu iki qaydanı silmək kifayətdir. */
.sf-prem-eyebrow { display: none; }
.sf-prem h2 { margin-top: 0; }
.sf-prem-lead { margin: 14px 0 0; max-width: 460px; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-3); }
.sf-price { display: flex; align-items: baseline; gap: var(--gap); margin-top: 22px; flex-wrap: wrap; }
.sf-price .now { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.sf-price .per { font-size: var(--fs-sm-2); color: var(--fg-3); }

.sf-plan-rows { display: flex; flex-direction: column; gap: var(--gap); }
.sf-plan-row {
  display: flex; align-items: center; gap: var(--gap-md);
  padding: 11px 14px; border-radius: var(--r-btn);
  background: var(--w04); border: 1px solid var(--w06);
}
.sf-plan-row .l { font-size: 12.5px; color: var(--fg-2); min-width: 0; }
.sf-plan-row .f { margin-left: auto; flex: none; font-size: var(--fs-meta); color: var(--fg-meta); }
.sf-plan-row .p { flex: none; width: 62px; text-align: right; font-size: 12.5px; color: var(--accent-light); font-weight: 600; }
/* sütun başlıqları — cədvəlin oxunması üçün */
.sf-plan-row.is-head { background: transparent; border-color: transparent; padding-top: 0; padding-bottom: 0; }
.sf-plan-row.is-head .f, .sf-plan-row.is-head .p {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--fg-meta); font-weight: 400;
}

.sf-prem-actions { display: flex; flex-direction: column; gap: var(--gap); }
.sf-prem-actions .sf-btn { min-height: var(--tap-lg); padding: 14px 22px; border-radius: var(--r-btn); font-size: 14px; box-shadow: 0 14px 34px rgba(109,40,217,0.40); }
.sf-btn-outline {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap-lg); padding: 14px 22px;
  border-radius: var(--r-btn);
  border: 1px solid var(--w10);
  background: rgba(255,255,255,0.035);
  color: var(--fg); font-family: var(--font-display);
  font-size: 14px; font-weight: var(--fw-btn); cursor: pointer;
  transition: background var(--t-fast) ease;
}
.sf-btn-outline:hover { background: var(--w08); }
.sf-prem-note { margin: 4px 0 0; font-size: var(--fs-trust); line-height: 1.5; color: var(--fg-meta); }

/* ================================================== NEWSLETTER (referans s.476–490) */
.sf-news-sec {
  position: relative; z-index: 1;
  max-width: var(--wrap-max); margin: 0 auto;
  padding: var(--pad-sec);
}
.sf-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px; align-items: center;
}
.sf-news h2 { font-size: var(--fs-h2-news); letter-spacing: var(--ls-h2-news); margin: 0; }
.sf-news p { margin: 12px 0 0; max-width: 420px; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-3); }
.sf-news form { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.sf-news input {
  flex: 1 1 200px; min-width: 0; min-height: var(--tap-lg);
  padding: 13px 16px; border-radius: var(--r-btn);
  border: 1px solid var(--w12); background: var(--w04);
  color: var(--fg); font-size: var(--fs-sm); outline: none;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.sf-news input::placeholder { color: var(--fg-meta); }
.sf-news input:focus { border-color: rgba(167,139,250,0.55); background: var(--w06); }
.sf-news .sf-btn { min-height: var(--tap-lg); padding: 13px 24px; font-size: 14px; }

/* toast — bülleten cavabı üçün */
.sf-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 500;
  transform: translate(-50%, 16px);
  padding: 13px 20px; border-radius: var(--r-pill);
  background: var(--glass-fill), var(--bg-modal);
  border: 1px solid var(--w10);
  box-shadow: var(--sh-panel);
  font-size: var(--fs-sm); color: var(--fg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.sf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsiv ---------- */
@media (max-width: 1180px) {
  .sf-prem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-prem-actions { grid-column: 1 / -1; flex-direction: row; }
  .sf-prem-actions .sf-btn, .sf-prem-actions .sf-btn-outline { flex: 1; }
  .sf-prem-note { flex-basis: 100%; }
}
@media (max-width: 1024px) {
  .sf-prem-sec, .sf-news-sec { padding-left: 22px; padding-right: 22px; }
  .sf-prem { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sf-prem-actions { flex-direction: column; }
  .sf-news { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sf-news p { max-width: none; }
}
@media (max-width: 480px) {
  .sf-prem-sec, .sf-news-sec { padding-left: 16px; padding-right: 16px; }
  .sf-prem { padding: 22px 16px; }
  .sf-price .now { font-size: 32px; }
  .sf-plan-row { flex-wrap: wrap; gap: var(--gap-xs); }
  .sf-plan-row .p { width: 52px; }
  .sf-news .sf-btn { width: 100%; }
}

/* ==================================================================
   HƏRƏKƏT AZALDILSIN (WCAG 2.3.3)
   Animasiya söndürülmür, 0.01ms-ə endirilir — `animation-fill-mode:
   both` olan elementlər son vəziyyətdə qalır, yəni yoxa çıxmır.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .sf-cat-rail:hover .sf-cat-track { transform: none; }
}

/* Nümunə xəbərdarlığı — dizaynda yoxdur, «uydurma rəqəm yazma» qaydası
   üçün əlavə edilib. Silmək üçün: bu qayda + index-new.html-dəki
   `.sf-demo-note` sətri + `sf_demo_example` açarı. */
.sf-demo-note {
  margin-top: var(--gap-sm);
  font-size: var(--fs-xs);
  color: var(--fg-meta);
}