/* ═══════════════════════════════════════════════════════════════════
     HİZMET LİSTESİ · scope: .sv-index
     Ölçüler anasayfa katalogundan: kart dolgusu 28px, künye 8px,
     başlık clamp(31,3.2vw,49), not 10px. Derinlik yalnız 1px çizgiyle.
     ═══════════════════════════════════════════════════════════════════ */
  .sv-index{background:var(--bg);color:var(--fg);font-family:var(--sans);
    line-height:1.6;-webkit-font-smoothing:antialiased}

  /* ── BAŞLIK ────────────────────────────────────────────────────── */
  .sv-index .bas{padding:var(--pad-y) var(--metin-kenar) clamp(32px,4vw,56px);
    border-bottom:1px solid var(--line)}
  .sv-index .iz{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin-bottom:var(--bo-5);
    font-size:var(--yazi-s);color:var(--muted)}
  .sv-index .iz a{color:inherit;text-decoration:none;transition:color .24s ease}
  .sv-index .iz a:hover{color:var(--aksan-2)}
  .sv-index .ust{display:block;margin-bottom:var(--bo-3);   /* 24 → 12px · künye-başlık boşluğu site geneli (18.09.2026) */
    font-size:var(--altbaslik-px);line-height:1;letter-spacing:var(--kunye-ls);
    text-transform:uppercase;font-weight:600;color:var(--aksan-metin)}
  .sv-index h1{margin:0;font-size:var(--bas-xl);
    line-height:1.06;letter-spacing:-.028em;font-weight:var(--bas-w);
    color:var(--fg);text-wrap:balance}
  .sv-index .giris{margin:var(--bo-5) 0 0;max-width:52ch;
    font-size:var(--yazi-l);line-height:1.65;color:var(--muted);text-wrap:pretty}   /* giriş basamağı: --yazi-l (18.09.2026) */

  /* ── KATEGORİ ŞERİDİ ───────────────────────────────────────────── */
  .sv-index .seritler{display:flex;flex-wrap:wrap;gap:var(--bo-2);
    padding:var(--bo-5) var(--metin-kenar);
    border-bottom:1px solid var(--line)}
  .sv-index .cip{display:inline-flex;align-items:center;gap:8px;
    box-sizing:border-box;height:38px;padding:0 16px;
    border:1px solid var(--line);border-radius:999px;
    background-color:transparent;color:var(--fg);text-decoration:none;
    font-size:var(--yazi-m);font-weight:600;white-space:nowrap;
    transition:background-color .22s ease,border-color .22s ease,color .22s ease}
  .sv-index .cip:hover{background-color:var(--gold-soft);border-color:var(--line-strong)}
  .sv-index .cip:focus-visible{outline:2px solid var(--aksan-2);outline-offset:3px}
  .sv-index .cip.etkin{background-color:var(--aksan-dolu);border-color:transparent;color:var(--aksan-dolu-fg)}
  .sv-index .cip .ik{font-style:normal;font-size:13px;line-height:1;color:var(--aksan-2)}
  .sv-index .cip.etkin .ik{color:inherit}
  .sv-index .cip .adet{font-size:var(--yazi-xs);opacity:.8;
    font-variant-numeric:tabular-nums}

  /* ── GRUP BAŞLIĞI ──────────────────────────────────────────────── */
  .sv-index .grup-bas{display:flex;align-items:center;gap:12px;margin:0;
    padding:clamp(32px,3.6vw,52px) var(--metin-kenar) var(--bo-5);
    font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.022em;
    font-weight:var(--bas-w);color:var(--fg)}
  .sv-index .grup-bas i{font-style:normal;font-size:18px;line-height:1;color:var(--aksan-2)}
  .sv-index .grup-bas .adet{font-size:var(--kunye-px);letter-spacing:var(--kunye-ls);
    font-weight:600;color:var(--aksan-kucuk);font-variant-numeric:tabular-nums}

  /* ── IZGARA ────────────────────────────────────────────────────── */
  .sv-index .izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line)}
  .sv-index .hucre{position:relative;isolation:isolate;
    display:flex;flex-direction:column;min-height:330px;
    overflow:hidden;text-decoration:none;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:28px;color:var(--fg);
    transition:background-color .85s ease,color .85s ease}
  .sv-index .hucre:nth-child(3n){border-right:0}
  /* Dış sütunlar sayfa kenar payını alır → yazı başlıkla aynı hizadan başlar */
  .sv-index .hucre:nth-child(3n+1){padding-left:var(--metin-kenar)}
  .sv-index .hucre:nth-child(3n){padding-right:var(--metin-kenar)}

  /* Görsel yuvası · dosya gelene kadar boş; oranı şimdiden ayrılmış olsun diye
     mutlak konumlu ve zeminde duruyor. Görsel eklendiğinde buraya basılacak. */
  .sv-index .gorsel{position:absolute;inset:0;z-index:0;
    width:100%;height:100%;object-fit:cover;
    background:var(--panel);opacity:0;
    filter:grayscale(1) brightness(.82);transform:scale(1.035);
    transition:opacity .85s ease,filter .95s ease,transform 1.05s cubic-bezier(.22,1,.36,1)}
  .sv-index .hucre > :not(.gorsel){position:relative;z-index:2}

  .sv-index .hucre :is(h2,h3){margin:auto 0 14px;color:inherit;
    font-size:calc(clamp(26px,2.6vw,40px) * var(--olcek-baslik,1));
    line-height:1;letter-spacing:-.05em;font-weight:var(--bas-w);text-wrap:balance}
  .sv-index .not{margin:0;min-height:34px;
    font-size:var(--yazi-xs);line-height:1.55;color:var(--muted);text-wrap:pretty;
    transition:color .85s ease}

  /* HOVER ZEMİNİ · token'lı (18.09.2026). #17191d sabitti: açık temada koyu
     dolgu (istenen), koyu temada ise sayfa zemininden (#0c0d0f) ayırt
     edilemiyordu — hover görünmez oluyordu. Koyu temada bir kademe açılır. */
  .sv-index{--hucre-hover-bg:#17191d;--hucre-hover-fg:#fff;--hucre-hover-not:rgba(255,255,255,.74)}
  html.dark .sv-index{--hucre-hover-bg:var(--panel-2);--hucre-hover-fg:var(--fg);--hucre-hover-not:var(--muted)}
  @media(hover:hover){
    .sv-index .hucre:hover,
    .sv-index .hucre:focus-visible{background-color:var(--hucre-hover-bg);color:var(--hucre-hover-fg);
      transition:background-color .32s ease,color .32s ease}
    .sv-index .hucre:hover .not,
    .sv-index .hucre:focus-visible .not{color:var(--hucre-hover-not)}
    .sv-index .hucre:hover .gorsel,
    .sv-index .hucre:focus-visible .gorsel{opacity:1;
      filter:grayscale(.72) brightness(.8);transform:scale(1);
      transition:opacity .42s ease,filter .52s ease,transform .72s cubic-bezier(.22,1,.36,1)}
  }
  .sv-index .hucre:focus-visible{outline:2px solid var(--aksan-2);outline-offset:-3px}

  .sv-index .bos{padding:var(--pad-y) var(--metin-kenar);color:var(--muted)}

  /* ── KAPANIŞ ───────────────────────────────────────────────────── */
  .sv-index .kapanis{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:var(--bo-5);
    padding:var(--pad-y) var(--metin-kenar)}
  .sv-index .kapanis h2{margin:0;font-size:var(--bas-xl);
    line-height:1.06;letter-spacing:-.028em;font-weight:var(--bas-w);
    color:var(--fg);text-wrap:balance}
  .sv-index .btn{position:relative;box-sizing:border-box;
    height:var(--btn-l);padding:0 var(--bo-6);
    display:inline-flex;align-items:center;justify-content:center;gap:var(--bo-2);
    border:1px solid var(--line);border-radius:999px;
    background-color:transparent;color:var(--fg);text-decoration:none;
    font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
    transition:background-color .22s ease,border-color .22s ease}
  .sv-index .btn:hover{background-color:var(--gold-soft);border-color:var(--line-strong)}
  .sv-index .btn:focus-visible{outline:2px solid var(--aksan-2);outline-offset:2px}
  .sv-index .btn.dolu{background-color:var(--aksan-dolu);border-color:transparent;color:var(--aksan-dolu-fg)}
  .sv-index .btn.dolu:hover{background-color:var(--aksan-dolu-hover)}
  .sv-index .btn i{font-size:15px}

  /* ── DAR EKRAN ─────────────────────────────────────────────────── */
  @media(max-width:900px){
    .sv-index .izgara{grid-template-columns:1fr}
    .sv-index .hucre{min-height:270px;padding:24px;border-right:0}
    .sv-index .hucre:nth-child(3n+1){padding-left:24px}
    .sv-index .hucre:nth-child(3n){padding-right:24px}
    .sv-index .hucre :is(h2,h3){font-size:calc(38px * var(--olcek-baslik,1))}
    .sv-index .btn{flex:1 1 auto;justify-content:center}
  }
  @media(prefers-reduced-motion:reduce){
    .sv-index .hucre,.sv-index .not,.sv-index .gorsel{transition-duration:.01ms}
  }

  /* 22.10 · adet sayıları gösterilmez (kurum kararı K-XEQ54: sitede sayı dili yok) */
  .sv-index .adet{display:none}