/* =============================================================================
   HİZMET SAYFALARI — ORTAK ÇEKİRDEK

   Sekiz hizmet sayfası iki ayrı gramer kullanıyor ama AYNI malzemeden yapılmış.
   Bu dosya o ortak malzemeyi taşıyor; iki gramer dosyası da bunun ÜSTÜNE
   yükleniyor (sayfa <head>'inde önce bu, sonra grameri gelir):

     hizmet-sayfasi.css   salo.uk ANASAYFA grameri
                          → web-tasarim · web-yazilim · ui-ux-tasarim
     hizmet-detay.css     salo.uk SERVİS DETAY (/services/ui-ux/) grameri
                          → e-ticaret · mobil · ozel-yazilim · seo-geo · destek

   Burada duranlar: renk/çizgi belirteçleri, tipografi, açılış hareketi, kelime
   kelime açılan başlık, düğmeler, ÖLÇÜ ÇİZGİSİ, seçim çerçevesi, ortak imleci,
   görsel kart, etiket rozeti, logo şeridi ve kapanış bölümü. Yani kaynak
   sitenin her sayfasında birebir aynı görünen parçalar.

   Vurgu rengi (`--sv-ac`) sayfa başına değişiyor ve sayfanın kendi helmet
   <style> bloğunda tanımlı. Kaynak sayfa Figma'nın marka renklerini "tuval
   kromu" olarak kullanıyor (seçim çerçevesi, imleç etiketi, ölçü rozeti);
   FEELS tek renkli olduğu için o krom sayfa başına TEK renge indirildi:
     web tasarım mavi · web yazılım yeşil · ui-ux mor · e-ticaret kızıl ·
     mobil camgöbeği · özel yazılım sarı · seo-geo macenta · destek turkuaz
   Sekizi de koyu zeminde en az 5:1 kontrast veriyor — vurgu yalnız çerçevede
   değil, bağlantı ve rozet METNİ olarak da kullanılıyor.

   ÖLÇÜ: kök `container-type: inline-size`, birim cqw. Anasayfayla aynı 1920
   tuvali; kenar boşluğu 8.33333cqw (=160px) — üst menü logosu orada duruyor.
   ============================================================================= */


/* ── yazı tipleri ────────────────────────────────────────────────────────────
   Anasayfadaki bildirimlerin aynısı. Yollar aynı olduğu için tarayıcı ikinci
   indirmeyi yapmıyor; bu dosya üç sayfaya birden hizmet ettiği için bildirim
   burada tek kez duruyor. */
@font-face { font-family: 'Afacad Flux'; src: url('./uploads/Afacad_Flux/static/AfacadFlux-Light.woff2') format('woff2'), url('./uploads/Afacad_Flux/static/AfacadFlux-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Afacad Flux'; src: url('./uploads/Afacad_Flux/static/AfacadFlux-Regular.woff2') format('woff2'), url('./uploads/Afacad_Flux/static/AfacadFlux-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Afacad Flux'; src: url('./uploads/Afacad_Flux/static/AfacadFlux-Medium.woff2') format('woff2'), url('./uploads/Afacad_Flux/static/AfacadFlux-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Afacad Flux'; src: url('./uploads/Afacad_Flux/static/AfacadFlux-SemiBold.woff2') format('woff2'), url('./uploads/Afacad_Flux/static/AfacadFlux-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Jost'; src: url('./uploads/Jost/static/Jost-Light.woff2') format('woff2'), url('./uploads/Jost/static/Jost-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('./uploads/Jost/static/Jost-Regular.woff2') format('woff2'), url('./uploads/Jost/static/Jost-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('./uploads/Jost/static/Jost-Medium.woff2') format('woff2'), url('./uploads/Jost/static/Jost-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }

html { background: #0c0c0c; }
body { margin: 0; background: #0c0c0c; }

.sv-root, .sv-root * { box-sizing: border-box; }
.sv-root {
  /* Vurgu rengi öntanımlısı; sayfa kendi <style>'ında ezerse o geçerli. */
  --sv-ac: #0d99ff;
  --sv-line: rgba(240,240,240,0.13);
  --sv-dim: rgba(255,255,255,0.83);

  container-type: inline-size;
  /* `clip`, `hidden` değil — hakkimizda.html ve video-produksiyon.html'deki
     aynı gerekçe: `hidden` kaydırma kabı yaratıp içerideki sticky/scroll
     hesabını bozuyor. `clip` kaydırma kabı yaratmadan yatay taşmayı kesiyor. */
  width: 100%; overflow-x: clip;
  background: #0c0c0c; color: #ffffff;
  font-family: 'Jost', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sv-root a { color: #ffffff; text-decoration: none; transition: color .3s ease; }
.sv-root a:hover { color: #ffffff; }
.sv-root a:focus-visible, .sv-root button:focus-visible {
  outline: 2px solid var(--sv-ac); outline-offset: 3px; border-radius: 2px;
}
.sv-root ::selection { background: #f0f0f0; color: #0c0c0c; }
.sv-root h1, .sv-root h2, .sv-root h3, .sv-root p, .sv-root ul { margin: 0; }
.sv-root ul { padding: 0; list-style: none; }
.sv-root img { display: block; }

.sv-inset { padding-left: 8.33333cqw; padding-right: 8.33333cqw; }

/* Yalnız ekran okuyucu için. Bölüm başlıklarının bir kısmı görsel düzende
   yok (kaynak sayfada da `sr-only`); belge yapısı yine de eksiksiz olsun. */
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ── tipografi ─────────────────────────────────────────────────────────────
   Kaynak sayfa iki aile kullanıyor: gövde/başlık için tek bir grotesk, TUVAL
   KROMU için ayrı bir "alt" aile (ölçü etiketleri, rozetler, üst başlıklar).
   FEELS'te karşılıkları: Afacad Flux (başlık), Jost (gövde), JetBrains Mono
   (krom). Mono'nun işi dekor değil — hangi metnin "arayüz", hangisinin "içerik"
   olduğunu tek bakışta ayırıyor. */
.sv-t-hero { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 4.6cqw;  line-height: 1.02; letter-spacing: -0.035em; }
.sv-t-h2   { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 3.4cqw;  line-height: 1.04; letter-spacing: -0.032em; }
.sv-t-h3   { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 1.9cqw;  line-height: 1.12; letter-spacing: -0.025em; }
.sv-t-quad { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.1cqw;  line-height: 1.08; letter-spacing: -0.028em; }
.sv-t-lead { font-family: 'Afacad Flux', sans-serif; font-weight: 400; font-size: 1.45cqw; line-height: 1.24; letter-spacing: -0.018em; color: var(--sv-dim); }
/* `max()` tabanları masaüstünün alt ucu (901–1250px) için: N = X × 12.5,
   yani tuval 1250px'e inene kadar cqw değeri büyük kalıyor ve 1280/1440/1920
   birebir aynı. Altında yazı 1250px'teki boyunda duruyor — 1024'te 7px'lik
   üst başlık ve 9px'lik gövde ölçülmüştü. */
.sv-body   { font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(0.94cqw, 11.5px); line-height: 1.62; color: var(--sv-dim); text-wrap: pretty; }
.sv-mono   { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: max(0.68cqw, 8.5px); line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.70); }
/* `.sv-root p { margin: 0 }` sıfırlamasından DAHA ÖZGÜL olmak zorunda, yoksa
   ardışık paragraflar sıfır boşlukla birbirine yapışıyor. */
.sv-root .sv-p2 { margin-top: 1.1cqw; }

/* ===========================================================================
   ORTAK PARÇALAR
   =========================================================================== */

/* ── açılış hareketi ──────────────────────────────────────────────────────── */
.sv-rise { opacity: 0; transform: translateY(1.2cqw); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.sv-rise.in { opacity: 1; transform: translateY(0); }
.sv-d1 { transition-delay: .08s; } .sv-d2 { transition-delay: .16s; } .sv-d3 { transition-delay: .24s; }

/* Kelime kelime açılan başlık. Kaynak sayfada H1 `data-word-reveal` ile
   parçalanıyor; buradaki karşılığı: sürücü her kelimeyi iki katmanlı bir
   `<span>`e sarıyor, dış katman `overflow: hidden`, iç katman aşağıdan
   yükseliyor. Gecikme sürücüde satır içi `transition-delay` olarak veriliyor. */
/* MÜREKKEP PAYI: kutu yalnız satır yüksekliği kadardı ve başlıkların satır
   aralığı 0.9–1.06; `overflow: hidden` harfin satır kutusundan taşan kısmını
   kesiyordu — "Ortaklığı"nda ğ'nin kuyruğu, "İnşaat"ta İ'nin noktası, ş/ç/y
   kancaları (ölçüldü, DPR 3). Kutuya dört yandan iç boşluk verilip AYNI
   miktarda negatif dış boşlukla geri alınıyor: kırpma alanı büyüyor, satır
   aralığı ve kelime aralığı piksel piksel aynı kalıyor.
   Başlangıç konumu da o payı hesaba katıyor: kelime kutusunun boyu + alt pay
   + İ noktasının satır kutusundan taşan kısmı kadar aşağıda, yani açılmadan
   önce hiçbir mürekkep izi görünmüyor. */
.sv-word { display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.22em 0.08em; margin: -0.22em -0.08em; }
.sv-word > i {
  display: inline-block; font-style: inherit;
  transform: translateY(calc(105% + 0.35em));
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.sv-words.in .sv-word > i { transform: translateY(0); }

/* ── düğmeler ─────────────────────────────────────────────────────────────── */
.sv-btn {
  display: inline-flex; align-items: center; gap: 0.65cqw;
  height: 3.1cqw; min-height: 46px; padding: 0 max(1.5cqw, 18.5px);
  border-radius: 999px; border: 1px solid transparent;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(1.02cqw, 12.5px);
  letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease,
              box-shadow .4s ease, transform .25s cubic-bezier(.33,0,0,1);
}
.sv-btn svg { width: 1cqw; height: 1cqw; min-width: 14px; min-height: 14px; flex: none; }
.sv-btn:active { transform: scale(0.96); }

/* Birincil. Kaynakta koyu temada mor bir radyal parıltı var; FEELS'in dolu
   açık düğmesi korunup parıltı vurgu renginden bir HALKAYA çevrildi —
   monokrom zemin bozulmuyor, tuval kromuyla akrabalık kuruluyor. */
.sv-btn-p { background: #f0f0f0; color: #0c0c0c; }
.sv-root a.sv-btn-p { color: #0c0c0c; }
.sv-btn-p:hover { background: #ffffff; box-shadow: 0 0 0 0.32cqw color-mix(in srgb, var(--sv-ac) 26%, transparent); }

/* İkincil. */
.sv-btn-s { background: transparent; color: #ffffff; border-color: rgba(240,240,240,0.3); }
.sv-btn-s:hover { border-color: var(--sv-ac); background: rgba(240,240,240,0.05); }

/* ── ölçü çizgisi (reactive divider) ──────────────────────────────────────
   Kaynak sayfanın imzası: sıradan bir ayraç değil, Figma'nın MESAFE ÖLÇÜSÜ.
   İki uçta çapa noktası, ortada çizginin gerçek genişliğini yazan bir rozet.
   Değeri sürücü ölçüyor (ResizeObserver) — sabit yazılmıyor, pencere
   daraldıkça sayı da değişiyor. Çizgi görünür alana girince uçlardan açılıyor. */
.sv-div { display: flex; align-items: center; width: 100%; position: relative; min-width: 0; }
.sv-div-dot {
  width: 0.42cqw; height: 0.42cqw; min-width: 7px; min-height: 7px; flex: none;
  border-radius: 999px; background: #0c0c0c; border: 1px solid var(--sv-ac); z-index: 1;
}
.sv-div-line {
  flex: 1; height: 1px; min-height: 1px; background: var(--sv-line);
  transform: scaleX(0); transform-origin: center;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.sv-div.in .sv-div-line { transform: scaleX(1); }
.sv-div-val {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.16cqw 0.42cqw; border-radius: 0.16cqw;
  background: #0c0c0c; color: var(--sv-ac);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.6cqw; line-height: 1.4; white-space: nowrap;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .5s ease .35s;
}
.sv-div.in .sv-div-val { opacity: 1; }
/* Dikey varyant — dörtlü ızgaranın ortasındaki artı için. */
.sv-div-v { flex-direction: column; height: 100%; width: auto; }
.sv-div-v .sv-div-line { width: 1px; height: auto; min-width: 1px; transform: scaleY(0); }
.sv-div-v.in .sv-div-line { transform: scaleY(1); }

/* ── seçim çerçevesi (FigmaFrame) ────────────────────────────────────────
   Tuvalde seçili bir nesne: üstte katman adı, sekiz tutamak, altta boyut
   rozeti. Boyut da sürücüde ölçülüyor; metin uzunluğu değişince sayı değişiyor. */
.sv-frame {
  display: inline-block; position: relative; width: fit-content;
  border: 1px solid var(--sv-ac); padding-inline: 0.22em;
}
.sv-frame-lbl {
  position: absolute; bottom: calc(100% + 0.3cqw); left: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.6cqw; line-height: 1; color: var(--sv-ac);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.sv-frame-h {
  position: absolute; width: 0.38cqw; height: 0.38cqw; min-width: 6px; min-height: 6px;
  background: #ffffff; border: 1.5px solid var(--sv-ac);
  transform: translate(-50%, -50%); pointer-events: none;
}
.sv-h-tl { top: 0;    left: 0; }    .sv-h-tc { top: 0;    left: 50%; }  .sv-h-tr { top: 0;    left: 100%; }
.sv-h-ml { top: 50%;  left: 0; }                                        .sv-h-mr { top: 50%;  left: 100%; }
.sv-h-bl { top: 100%; left: 0; }    .sv-h-bc { top: 100%; left: 50%; }  .sv-h-br { top: 100%; left: 100%; }
.sv-frame-dims {
  position: absolute; top: calc(100% + 0.42cqw); left: 50%; transform: translateX(-50%);
  padding: 0.12cqw 0.36cqw; border-radius: 0.16cqw;
  background: var(--sv-ac); color: #0c0c0c;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 0.58cqw; line-height: 1.5; white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* ── ortak imleci (Cursor) ────────────────────────────────────────────────
   Figma'da aynı dosyada duran başka birinin imleci: ok + isim etiketi.
   Kaynak sayfada açılışın iki köşesinde duruyor, vitrinde ise fareyi izliyor. */
/* `display: inline-block` ŞART: <span> öntanımlı olarak satır içi ve satır içi
   kutuya `width` uygulanmıyor. Kural düşünce içerideki SVG kendi varsayılan
   300px genişliğine kaçıyor ve imleç ekranın dörtte birini kaplıyordu (ölçüldü). */
.sv-cur { position: relative; display: inline-block; width: 1.15cqw; min-width: 18px;
  pointer-events: none; z-index: 20; color: var(--sv-ac); }
.sv-cur svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0.1cqw 0.3cqw rgba(0,0,0,0.5)); }
.sv-cur-name {
  position: absolute; top: 78%; left: 78%; width: max-content;
  padding: 0.1cqw 0.32cqw; border-radius: 0.16cqw;
  background: var(--sv-ac); color: #0c0c0c;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 0.58cqw; line-height: 1.6; white-space: nowrap;
}

/* ── görsel kart ──────────────────────────────────────────────────────────
   Kaynaktaki `anchor-card`: köşeleri yuvarlatılmış, ince çerçeveli bir kutu.
   `overflow: hidden` + `position: relative` kalıbı kartın içindeki görselin
   hover'da yaklaşmasını mümkün kılıyor. */
.sv-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 0.42cqw; background: #131318;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.sv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1); }
a.sv-card:hover img { transform: scale(1.04); }
/* Site ekran görüntüleri uzun (1440×1660): `cover` ortaya hizalayınca sayfanın
   göbeği görünüp başlığı kesiliyor. Bu kart üstten hizalıyor — bir siteden
   önce anasayfasının tepesi tanınır. */
.sv-card-top img { object-position: 50% 0; }

/* ── etiket rozeti (Tag) ──────────────────────────────────────────────────── */
.sv-tag {
  display: inline-block; padding: 0.24cqw 0.62cqw; border-radius: 999px;
  border: 1px solid rgba(240,240,240,0.2);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.58cqw; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.77); white-space: nowrap;
}

/* ── yatay şerit denetimleri ──────────────────────────────────────────────
   İleri/geri düğmeleri + ilerleme çubuğu. İki gramer de kullanıyor: anasayfada
   dar ekran karuseli, detay sayfasında "ilgili projeler" şeridi. Çubuğun genişliği
   ve konumu sürücüde hesaplanıyor (kart sayısı ve adım boyundan). */
.sv-nav-btn { width: 2.7cqw; height: 2.7cqw; min-width: 40px; min-height: 40px;
  flex: none; border-radius: 999px; padding: 0; display: grid; place-items: center;
  cursor: pointer; background: transparent; color: #ffffff;
  border: 1px solid rgba(240,240,240,0.3);
  transition: border-color .3s ease, background .3s ease, transform .25s cubic-bezier(.33,0,0,1); }
.sv-nav-btn:hover { border-color: var(--sv-ac); background: rgba(240,240,240,0.05); }
.sv-nav-btn:active { transform: scale(0.94); }
.sv-nav-btn svg { width: 1cqw; height: 1cqw; min-width: 14px; min-height: 14px; }
.sv-nav-bar { flex: 1; height: 1px; background: var(--sv-line); position: relative; }
.sv-nav-fill { position: absolute; left: 0; top: 0; height: 100%; width: 33%;
  background: var(--sv-ac); transition: width .3s ease, transform .3s ease; }

/* ── logo şeridi (marquee) ────────────────────────────────────────────────
   İki özdeş şerit yan yana; birlikte tam bir şerit boyu kayıp başa dönüyorlar,
   bu yüzden dikiş görünmüyor. Süre uzun (46s) — dikkat çekmesi değil, arka
   planda dönmesi isteniyor. */
.sv-mq { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.sv-mq-track { display: flex; width: max-content; animation: svMq 46s linear infinite; }
.sv-mq-rev .sv-mq-track { animation-direction: reverse; }
.sv-mq:hover .sv-mq-track { animation-play-state: paused; }
@keyframes svMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sv-mq-set { display: flex; align-items: center; flex: none; }
.sv-mq-item { flex: none; width: 10cqw; height: 3cqw; margin-right: 2.6cqw;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  opacity: 0.34; filter: grayscale(1); transition: opacity .4s ease; }
.sv-mq:hover .sv-mq-item { opacity: 0.55; }

/* ===========================================================================
   7) KAPANIŞ
   =========================================================================== */
.sv-cta { padding-top: 7cqw; padding-bottom: 5cqw; border-top: 1px solid var(--sv-line); }
.sv-cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5cqw; }
.sv-cta h2 { max-width: 34cqw; }
.sv-cta .sv-div { max-width: 26cqw; margin: 0.6cqw 0; }
.sv-cta p { max-width: 30cqw; }
.sv-cta-foot { margin-top: 0.8cqw; }

/* ── kapanış şeridi ──────────────────────────────────────────────────────── */
.sv-outmq { padding-top: 4cqw; padding-bottom: 5cqw; }

/* ===========================================================================
   DAR EKRAN — ortak parçalar
   Gramer dosyaları kendi bölümlerini AYNI kırılma noktasında (900px) ele alıyor.
   =========================================================================== */
@media (max-width: 900px) {
  .sv-inset { padding-left: 6.5cqw; padding-right: 6.5cqw; }

  .sv-t-hero { font-size: 9.6cqw; line-height: 1.04; }
  .sv-t-h2   { font-size: 8cqw; }
  .sv-t-h3   { font-size: 5.6cqw; }
  .sv-t-quad { font-size: 6.6cqw; }
  .sv-t-lead { font-size: 4.6cqw; line-height: 1.2; }
  /* TABAN VE TAVAN: dar ekran ölçüleri ekran genişliğinin cqw'si ve sınırsızdı.
     768px tablette ya da 844px yatay telefonda telefon düzeni iki katına
     büyüyordu (gövde 28–31px). `clamp(taban, Xcqw, tavan)`: tavan = 480px
     genişlikteki değer (X × 4.8), yani bütün telefonlar dikeyde eskisi gibi;
     üstünde büyüme duruyor. Taban okunurluk için: gövde en az 14px, küçük
     etiket en az 12px (360px'te üst başlıklar 9.7px ölçülmüştü). */
  .sv-body   { font-size: clamp(14px, 3.9cqw, 18.5px); line-height: 1.6; }
  .sv-mono   { font-size: clamp(12px, 2.7cqw, 13px); }
  .sv-root .sv-p2 { margin-top: min(4cqw, 19px); }

  .sv-btn { height: auto; padding: min(3.2cqw, 15px) min(5.4cqw, 26px); font-size: clamp(14px, 3.9cqw, 18.5px); gap: min(2.2cqw, 10.5px); }
  .sv-btn svg { width: min(3.6cqw, 17px); height: min(3.6cqw, 17px); }

  .sv-div-dot { width: 1.9cqw; height: 1.9cqw; }
  .sv-div-val { font-size: 2.4cqw; padding: 0.7cqw 1.6cqw; border-radius: 0.7cqw; }
  .sv-frame-lbl { font-size: 2.4cqw; bottom: calc(100% + 1.3cqw); }
  .sv-frame-dims { font-size: 2.3cqw; top: calc(100% + 1.8cqw); padding: 0.5cqw 1.4cqw; }
  .sv-frame-h { width: 1.7cqw; height: 1.7cqw; }
  .sv-cur { width: 5cqw; }
  .sv-cur-name { font-size: 2.4cqw; padding: 0.4cqw 1.3cqw; }
  .sv-tag { font-size: 2.5cqw; padding: 1cqw 2.6cqw; }

  /* 7) Kapanış */
  .sv-cta { padding-top: 16cqw; padding-bottom: 12cqw; }
  .sv-cta h2, .sv-cta p { max-width: none; }
  .sv-cta .sv-div { max-width: none; margin: 3cqw 0; }
  .sv-cta-in { gap: 5cqw; }
  .sv-outmq { padding-top: 10cqw; padding-bottom: 12cqw; }
}

/* ===========================================================================
   HAREKET AZALTMA — ortak parçalar
   Açılışlar anında biter, şerit durur. Ölçü rozetleri ve çerçeveler KALIR —
   onlar hareket değil, bilgi.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sv-word > i { transform: none !important; transition: none !important; }
  .sv-div-line { transform: none !important; }
  .sv-div-val { opacity: 1 !important; }
  .sv-mq-track { animation: none; }
  a.sv-card:hover img { transform: none; }
}
