/* Hizmetler (modules/home-v2 › ServicesSystemV2). 10.10 akşam sadeleştirme (sahibi: "sade, şık, clean"): ritim panosu kalktı;
   masaüstünde 3×2 temiz ızgara (beyaz kart, 1 px çizgi, 16 px köşe), telefonda tek sütun liste. Kartta tek renk çizgi ikon
   (Mor 40), başlık, tek kısa cümle, sağ üstte ok; üzerine gelince ok 2 px kayar (ışık yokken çerçeve de Mor 40 %30). Bölümün tek
   ana düğmesi masaüstünde başlığın sağında. Başlık ve düğme sayfa geneli .reveal ile belirir (anasayfa-v2.css).
   Kart hareketi (10.10 akşam, sahibi: "bu alan çok karışık, buraya daha cool ve clean bir animasyon yapalım, yeni teknolojiler
   ile"): düzen aynı, kütüphanesiz üç ince katman — ışık ızgarası, kendini çizen ikon, dalga girişi (aşağıda "Hareket").
   Yalnız transform / opacity / boyama (degrade konumu, stroke-dashoffset); yerleşim değişmez, CLS 0. */

.ss-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; margin-bottom: 48px; }
.ss .ss-head.section-head { margin-bottom: 0; }
.ss-help.v2-btn.v2-btn { flex: none; }

/* position: relative → kartların offsetLeft/Top'u ızgaraya göre (ışığın kart içindeki yeri, hizmet-sistemi.js) */
.ss-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* isolation: ışık katmanları (z-index −1) kartın zemini ile çerçevesinin üstünde, yazının altında kalır */
.ss-card {
  --ss-line: var(--v2-hair);
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 200px; padding: 28px 28px 26px;
  border: 1px solid var(--ss-line); border-radius: 16px; background: var(--wa-beyaz);
  transition: border-color 0.2s ease;
}
.ss-card.has-link:hover, .ss-card.has-link:focus-within { border-color: rgba(135, 62, 255, 0.3); }
.ss-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 10px; border: 1px solid var(--v2-hair); color: var(--wa-mor-40); }
.ss-t { margin: 0; padding-right: 32px; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--wa-mor-90); }
.ss-t a { color: inherit; text-decoration: none; }
/* Kartın tamamı bağlantı: başlık bağlantısı kartı kaplar; kampanya bağlantısı üstte kalır */
.ss-t a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ss-t a:focus-visible { outline: none; }
.ss-card.has-link:has(.ss-t a:focus-visible) { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; }
.ss-p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--wa-gri); }
/* Kurulum satırı (10.10 akşam, sahibi: "markaların gerçek minimal iconuyla daha şık yapılabilir"; "kurulum desteği verdiğimizi de
   belirt"): ince çizginin altında küçük etiket (mega menüdeki "Kurulum desteği:" ile aynı: 13 px / 500 gri), altında tek sıra
   gerçek logo — ikonlar 16 px, kelime logoları ~14 px (aynı optik boy; boyu img width/height verir, ServicesSystemV2 PLAT_LOGOS),
   eşit aralık. Dururken gri ve soluk (%55), kartın üzerine gelince / odakta kendi renginde (200 ms). Eşlenemeyen ad düz küçük yazı. */
/* 10.10 gece (sahibi: "kurulum alanından dolayı sağdaki iki kutucuk uzamış; yavaş ve akıcı kayabilir"): logolar tek sıra, yavaş kayan
   şerit — iki kopya yan yana, 32 sn'de bir tur (-%50), kenarlar silinir; üzerine gelince durur. Masaüstünde etiket + şerit ikonun yanındaki
   boş satırda (kart boyu artmaz), telefonda başlığın altında. Logolar dururken gri ve soluk, kartın üzerine gelince kendi renginde. */
.ss-plat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 16px 0 0; }
.ss-plat-l { flex: none; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--wa-gri); white-space: nowrap; }
.ss-plat-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ss-plat-track { display: flex; width: max-content; animation: ss-kay 32s linear infinite; }
.ss-plat-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; margin: 0; padding: 0 18px 0 0; list-style: none; }
.ss-plat-row > li { display: flex; flex: none; align-items: center; height: 20px; }
.ss-plat-row img { display: block; max-width: none; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s ease, opacity 0.2s ease; }
.ss-plat-row > .is-txt { font-size: 13px; font-weight: 500; color: var(--wa-gri); white-space: nowrap; }
.ss-card:is(:hover, :focus-within) .ss-plat-row img { filter: none; opacity: 1; }
.ss-plat-win:hover .ss-plat-track, .ss-ex-win:hover .ss-ex-track { animation-play-state: paused; }
@keyframes ss-kay { to { transform: translateX(-50%); } }
/* Masaüstü / ara ekran: etiket + şerit ikon satırında (ikon 40 px + 14 px boşluk), "Özel koşullar" hapı sağ üstte okun yerinde */
@media (min-width: 721px) {
  /* İkon satırında iki kat: üstte küçük etiket, altında şerit (pencere tam genişlik) */
  .ss-card.is-setup .ss-plat { position: absolute; z-index: 1; top: 27px; left: 80px; right: 138px; height: 42px; margin: 0; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
  .ss-card.is-setup .ss-plat-l { font-size: 11.5px; line-height: 1.2; }
  .ss-card.is-setup .ss-plat-win { flex: none; -webkit-mask: linear-gradient(90deg, #000 0, #000 80%, transparent); mask: linear-gradient(90deg, #000 0, #000 80%, transparent); }
  .ss-card.is-setup .ss-plat-row > li { height: 18px; }
  .ss-card.is-setup .ss-camp.v2-btn.v2-btn { position: absolute; top: 34px; right: 22px; margin: 0; padding: 0 12px; }
  .ss-card.is-setup .ss-camp.v2-btn.v2-btn > svg { display: none; }
}
/* Özel koşullar (10.10 akşam, sahibi: "daha şık ve minimal"): uzun cümle yerine küçük yumuşak hap — "Özel koşullar" + ince ok;
   zemin Mor 40 %8, yazı Mor 40, üzerine gelince zemin %14 ve ok 2 px sağa. Logolar hemen üstte bağlamı veriyor. Dokunma alanı
   görünmez ::before ile 44 px. */
.ss-camp.v2-btn.v2-btn { position: relative; z-index: 1; align-self: flex-start; gap: 6px; min-height: 28px; margin-top: 14px; padding: 0 11px 0 12px; border: 0; border-radius: 999px; background: rgba(135, 62, 255, 0.08); color: var(--wa-mor-40); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; transition: background-color 0.2s ease; }
.ss-camp.v2-btn.v2-btn::before { content: ""; position: absolute; inset: -8px -4px; }
.ss-camp.v2-btn.v2-btn > svg { width: 12px; height: 12px; }
.ss-camp.v2-btn.v2-btn:hover { background: rgba(135, 62, 255, 0.14); }
.ss-go { position: absolute; top: 30px; right: 26px; display: grid; place-items: center; color: rgba(44, 4, 93, 0.35); transition: transform 0.25s var(--v2-ease), color 0.2s ease; }
.ss-card.has-link:hover .ss-go, .ss-card.has-link:focus-within .ss-go { color: var(--wa-mor-40); transform: translateX(2px); }

/* Öne çıkan GEO kartı (10.10 akşam; ayrı yapay zekâ bölümü kalktı, rolü bu karta geçti): boy ve ızgara aynı, zemin çok açık Mor 10,
   çerçeve hafif mor; ikonun yanında küçük sessiz etiket (yerleşimden çıkmış: başlık ve açıklama sıradaki kartlarla aynı hizada),
   açıklamanın altında tek örnek satırı (ChatGPT + Gemini logoları 14 px). #geo (menü /#geo) buraya iner: kart sabit üst menünün
   altında, ekranın üstünden ~120 px'te durur (html scroll-padding-top 96 px, site.css + burada 24 px) */
.ss-card.is-featured { --ss-line: rgba(135, 62, 255, 0.14); background: rgba(209, 193, 255, 0.22); scroll-margin-top: 24px; }
.ss-badge {
  position: absolute; top: 37px; left: 81px;
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid rgba(135, 62, 255, 0.18); background: var(--wa-beyaz);
  font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: var(--wa-mor-50); white-space: nowrap;
}
.ss-ex { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--wa-gri); }
/* Kayan örnek satırı (10.10 gece, sahibi: "metin kesik gibi, hafif ve akıcı kayabilir"): iki kopya, 18 sn'de bir tur, kenarlar silinir */
.ss-ex-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); }
.ss-ex-track { display: flex; width: max-content; animation: ss-kay 18s linear infinite; }
.ss-ex-track > span { flex: none; padding-right: 40px; white-space: nowrap; }
.ss-ex-ic { display: inline-flex; flex: none; gap: 5px; }
.ss-ex-ic img { display: block; width: 14px; height: 14px; object-fit: contain; }

@media (max-width: 1100px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ss-top { flex-direction: column; align-items: flex-start; }
}

/* Telefon: tek sütun liste — satır = ikon + başlık + ok; cümle çizilmez (sahibin 10.10 kararı), kurulum satırında altyapı adları ve
   kampanya bağlantısı kalır. Satırlar ince çizgiyle ayrılır, kart yok; düğme listenin altında tam genişlik */
@media (max-width: 720px) {
  .ss-top { display: contents; }
  .ss .ss-head.section-head { margin-bottom: 32px; }
  .ss-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--v2-hair); }
  .ss-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; column-gap: 14px; align-items: center; min-height: 60px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--v2-hair); border-radius: 0; }
  .ss-card.has-link:hover, .ss-card.has-link:focus-within { border-color: var(--v2-hair); }
  /* Öne çıkan satır: liste ritmi bozulmasın diye zemin ve etiket yok; örnek satırı başlığın altında */
  .ss-card.is-featured { background: none; }
  .ss-badge { display: none; }
  .ss-ex { grid-column: 2 / 4; margin: 4px 0 0; font-size: 12.5px; }
  .ss-ic { grid-row: 1; width: 36px; height: 36px; margin: 0; border-radius: 9px; }
  .ss-t { grid-column: 2; grid-row: 1; padding: 0; font-size: 15.5px; }
  .ss-p { display: none; }
  .ss-plat, .ss-camp.v2-btn.v2-btn { grid-column: 2 / 4; }
  .ss-plat { margin: 8px 0 0; }
  .ss-plat-l { font-size: 12px; }
  .ss-plat-row { gap: 14px; padding-right: 14px; }
  .ss-camp.v2-btn.v2-btn { justify-self: start; min-height: 28px; margin: 10px 0 2px; }
  .ss-go { position: static; grid-column: 3; grid-row: 1; }
  .ss-help.v2-btn.v2-btn { order: 3; width: 100%; min-height: 52px; margin-top: 32px; padding: 10px 18px; white-space: normal; text-align: left; line-height: 1.3; justify-content: flex-start; }
  .ss-help.v2-btn.v2-btn > svg { margin-left: auto; }
  .ss > .container { display: flex; flex-direction: column; }
}
/* ==========================================================================================================================
   Hareket (10.10 akşam; sahibi eski karışık panoya bakarak: "bu alan çok karışık, buraya daha cool ve clean bir animasyon
   yapalım, yeni teknolojiler ile"; aynı akşam: "anasayfamız eşsiz sadelikte olmalı"). Kütüphane yok; üç katman, hepsi ölçülü,
   biri bölümü kalabalıklaştırırsa çıkar:
   (1) Işık ızgarası — yalnız masaüstü, ince işaretçi (fare): imleci izleyen, zar zor fark edilen ışık (Mor 40 → saydam) yalnız
       yakındaki kartların 1 px çerçevesini aydınlatır (maskeli ::before: içerik kutusu dışlanır, geriye çerçeve halkası kalır).
       Kart içi dolgu yok (sadelik kararı), kartların dışında ışık yok. Konum ızgarada --mx/--my (betik, karede en çok bir kez),
       kartın ızgaradaki yeri --ox/--oy; --mx/--my kayıtlı (@property) olduğundan ışık imlecin arkasından yumuşakça kayar.
       Sınıflar: .is-spot (betik açtı), .is-lit (imleç ızgarada), .is-snap (ilk girişte kaymadan yerine otur).
   (2) Kendini çizen ikon — kart göründüğünde (.is-in) çizgi parçaları (pathLength="1") kısa ve sessizce çizilir, kartla aynı kademe
       (--ss-d, betik). Biten animasyon iz bırakmaz (dasharray yalnız animasyonda): son hâl normal ikonla aynı.
   (3) Dalga girişi — kartlar 16 px alttan + saydamlıkla: CSS kaydırma zaman çizgisi (animation-timeline: view()) destekleniyorsa
       sütun başına kayan aralıkla (betiksiz), yoksa IntersectionObserver .is-in ekler (aynı son hâl).
   Kapılar: html.hv2-anim (HeroV2 earlyScript, ilk boyamadan önce; "hareketi azalt"ta yok, ?hareket=1 zorlar) ve html.ss-anim
   (hizmet-sistemi.js; bölüm daha ekrana gelmeden eklenir — betik gelmezse ikonlar ve yedek giriş hiç gizlenmez).
   ========================================================================================================================== */
@property --mx { syntax: "<length>"; inherits: true; initial-value: -1000px; }
@property --my { syntax: "<length>"; inherits: true; initial-value: -1000px; }

/* (1) Işık ızgarası */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .ss-grid.is-spot { transition: --mx 0.24s var(--v2-ease), --my 0.24s var(--v2-ease); }
  .ss-grid.is-spot.is-snap { transition: none; }
  /* Çerçeve halkası: kart kutusunun üstünde (inset −1 px = çerçeve kutusu), 1 px dolgu = çerçeve kalınlığı; içerik kutusu maskeden
     düşülür */
  .ss-grid.is-spot > .ss-card::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.4s ease;
    background: radial-gradient(240px circle at calc(var(--mx) - var(--ox, 0px)) calc(var(--my) - var(--oy, 0px)), rgba(135, 62, 255, 0.45), rgba(135, 62, 255, 0.1) 45%, rgba(135, 62, 255, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .ss-grid.is-spot.is-lit > .ss-card::before { opacity: 1; }
  /* Işık açıkken çerçeveyi ışık boyar; düz çerçeve rengi yalnız klavye odağında */
  .ss-grid.is-spot > .ss-card.has-link:hover:not(:focus-within) { border-color: var(--ss-line); }
}

/* (2) Kendini çizen ikon */
@keyframes ss-draw {
  from { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
  to { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
}
html.hv2-anim.ss-anim .ss-card:not(.is-in) .ss-ic :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
html.hv2-anim.ss-anim .ss-card.is-in .ss-ic :is(path, circle, rect, line, polyline, polygon, ellipse) {
  animation: ss-draw 0.5s cubic-bezier(0.33, 0, 0.2, 1) calc(var(--ss-d, 0ms) + 120ms) backwards;
}

/* (3) Dalga girişi */
@keyframes ss-rise { from { opacity: 0; transform: translateY(16px); } }
/* Kaydırma zaman çizgisi: kart ekranın altından girerken oynar, kart tam girince (entry %100) bitmiş olur; sütunlar kayan aralıkla
   dalga çizer. Betik gerekmez; durunca kart kaydırma konumunun hâlinde kalır (ekranda tam görünen kart her zaman son hâlde). */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%) {
  html.hv2-anim .ss-card { animation: ss-rise both var(--v2-ease); animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @media (min-width: 1101px) {
    html.hv2-anim .ss-card:nth-child(3n + 2) { animation-range: entry 10% entry 85%; }
    html.hv2-anim .ss-card:nth-child(3n) { animation-range: entry 20% entry 100%; }
  }
  @media (min-width: 721px) and (max-width: 1100px) {
    html.hv2-anim .ss-card:nth-child(2n) { animation-range: entry 15% entry 100%; }
  }
  @media (max-width: 720px) {
    html.hv2-anim .ss-card { animation-range: entry 0% entry 100%; }
  }
}
/* Yedek (Firefox vb.): IntersectionObserver .is-in ekler, birlikte girenler 70 ms kademeyle (--ss-d). Son hâl aynı. */
@supports not ((animation-timeline: view()) and (animation-range: entry 0% entry 100%)) {
  html.hv2-anim.ss-anim .ss-card {
    transition: opacity 0.6s var(--ease-out) var(--ss-d, 0ms), transform 0.6s var(--ease-out) var(--ss-d, 0ms), border-color 0.2s ease;
  }
  html.hv2-anim.ss-anim .ss-card:not(.is-in) { opacity: 0; transform: translateY(16px); }
}

/* "Hareketi azalt": her şey durağan ve tam görünür (kapılar zaten açılmaz; tercih sayfa açıkken değişirse diye) */
@media (prefers-reduced-motion: reduce) {
  html:not(.hv2-motion) :is(.ss-card, .ss-go, .ss-plat-row img) { transition: none; }
  /* Şeritler durağan: tek kopya; logolar yana kaydırılır, örnek satırı tek satır */
  html:not(.hv2-motion) :is(.ss-plat-track, .ss-ex-track) { animation: none; }
  html:not(.hv2-motion) :is(.ss-plat-track > [aria-hidden="true"], .ss-ex-track > [aria-hidden="true"]) { display: none; }
  html:not(.hv2-motion) .ss-plat-win { overflow-x: auto; scrollbar-width: none; }
  html:not(.hv2-motion) .ss .ss-grid > .ss-card { animation: none; opacity: 1; transform: none; }
  html:not(.hv2-motion) .ss .ss-grid > .ss-card .ss-ic :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: none; stroke-dasharray: none; }
  html:not(.hv2-motion) .ss .ss-grid > .ss-card::before { content: none; }
}