/* === HİZMET · ÖNCESİ / SONRASI === scope: .sv-oncesonra */
  .sv-oncesonra{position:relative;overflow:hidden;background:var(--bg);padding:var(--pad-y) 0}
  @media(max-width:900px){ .sv-oncesonra{padding:var(--bo-7) 0} }
  /* CONTAINER · hizmet bölümleriyle aynı şerit: ortada en çok 1320px (--ds-kenar) · 07.10.2026 */
  .sv-oncesonra .wrap{position:relative;z-index:1;max-width:none;margin:0;padding:0 var(--ds-kenar, var(--metin-kenar));
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--bo-7);align-items:center}


  /* ---- SOL · metin ---- */
  .sv-oncesonra .eyebrow{display:flex;align-items:center;gap:var(--bo-4);color:var(--aksan-metin);
    font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;margin:0 0 var(--bo-5)}
  .sv-oncesonra .eyebrow i{display:block;width:48px;height:1px;background:var(--aksan-2)}
  .sv-oncesonra h2{font-family:var(--serif);font-weight:var(--baslik-w,700);margin:0;font-size:clamp(32px,4vw,64px);line-height:1.04;letter-spacing:-.03em;color:var(--fg)}
  .sv-oncesonra .akan{
    background-image:linear-gradient(100deg,
      var(--gold) 0%, var(--aksan-2) 20%, var(--aksan-2) 32%,
      var(--gold) 50%,
      var(--aksan-2) 68%, var(--aksan-2) 80%, var(--gold) 100%);
    background-size:240% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:t52-akis 9s linear infinite}
  @media(prefers-reduced-motion:reduce){.sv-oncesonra .akan{animation:none;background-position:22% 50%}}
  .sv-oncesonra .lead{margin:var(--bo-5) 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.6;
    color:var(--muted);max-width:44ch}

  /* buton — gölgesiz, yükseklik sabit, hover'da yalnız renk */
  .sv-oncesonra .os-btn{display:inline-flex;align-items:center;gap:var(--bo-4);margin:var(--bo-6) 0 0;
    height:var(--btn-l);padding:0 var(--bo-6);box-sizing:border-box;border-radius:999px;
    background-color:var(--aksan-dolu);color:var(--aksan-dolu-fg);text-decoration:none;
    font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    transition:background-color .22s ease}
  .sv-oncesonra .os-btn:hover{background-color:var(--aksan-dolu-hover)}
  .sv-oncesonra .os-btn:focus-visible{outline:2px solid var(--aksan-metin);outline-offset:3px}

  .sv-oncesonra .os-nav{display:flex;align-items:center;gap:var(--bo-5);margin:var(--bo-7) 0 0}
  .sv-oncesonra .ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:transparent;border:1px solid var(--line);color:var(--fg);font-size:18px;
    transition:background-color .22s ease,color .22s ease}
  .sv-oncesonra .ok.ileri{border-color:var(--aksan-2);color:var(--aksan-2)}
  .sv-oncesonra .ok:hover{background-color:var(--panel)}
  .sv-oncesonra .ok:focus-visible{outline:2px solid var(--aksan-metin);outline-offset:3px}

  /* ---- SAĞ · karşılaştırma ---- */
  .sv-oncesonra .kiyas{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--rail-r);
    overflow:hidden;background:var(--panel);user-select:none;touch-action:pan-y}
  .sv-oncesonra .kiyas[hidden]{display:none}
  .sv-oncesonra .katman{position:absolute;inset:0;display:grid;place-items:center}
  .sv-oncesonra .katman img{width:100%;height:100%;object-fit:cover;display:block}
  .sv-oncesonra .katman.once{background:var(--panel)}
  .sv-oncesonra .katman.sonra{background:var(--surface);clip-path:inset(0 0 0 var(--x))}
  /* yer tutucu yazısı kendi yarısının ortasına otursun (önce %25, sonra %75) */
  .sv-oncesonra .yer{position:absolute;top:50%;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:var(--bo-3);text-align:center;
    font-size:14px;color:var(--muted);letter-spacing:.02em}
  .sv-oncesonra .yer svg{opacity:.6}
  .sv-oncesonra .katman.once .yer{left:25%}
  .sv-oncesonra .katman.sonra .yer{left:75%}

  .sv-oncesonra .etiket{position:absolute;top:var(--bo-5);z-index:2;padding:9px 22px;border-radius:999px;
    font-size:12px;font-weight:700;letter-spacing:.08em;pointer-events:none}
  .sv-oncesonra .e-once{left:var(--bo-5);background:rgba(110,110,110,.55);color:#fff}
  .sv-oncesonra .e-sonra{right:var(--bo-5);background:var(--aksan-2);color:#fff}

  .sv-oncesonra .cizgi{position:absolute;top:0;bottom:0;left:var(--x);width:2px;z-index:3;
    transform:translateX(-50%);background:#fff;pointer-events:none}
  .sv-oncesonra .tutamac{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;background:#fff;color:#1b1d20;
    display:flex;align-items:center;justify-content:center;gap:2px;
    box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px -8px rgba(0,0,0,.35)}
  .sv-oncesonra .kiyas input[type=range]{position:absolute;inset:0;z-index:4;width:100%;height:100%;
    margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
  .sv-oncesonra .kiyas:has(input:focus-visible) .tutamac{outline:2px solid var(--aksan-2);outline-offset:3px}

  .sv-oncesonra figcaption{position:absolute;left:var(--bo-5);bottom:var(--bo-5);z-index:2;
    font-size:13px;font-weight:600;color:var(--fg);background:var(--surface);
    padding:6px 14px;border-radius:999px;pointer-events:none}

  @media(max-width:900px){
    .sv-oncesonra .wrap{grid-template-columns:minmax(0,1fr);gap:var(--bo-6)}
    .sv-oncesonra .os-sag{order:2}
    .sv-oncesonra .kiyas{aspect-ratio:4/3}
    .sv-oncesonra .ok{width:52px;height:52px}
    .sv-oncesonra .tutamac{width:52px;height:52px}
    .sv-oncesonra .os-nav{margin-top:var(--bo-6)}
  }