/* SI & Agentic Analytics hizmet sayfasi (2026-10-15).
   Kaynak: kullanicinin "Webtures SI Agentic Analytics (standalone)" tasarimi.
   - Tum seciciler .saa kapsaminda; tasarimin renk sistemi sitenin paper
     token'lariyla birebir ayni oldugu icin onlara baglandi (iki tema).
   - Alinmayanlar: global eleman kurallari, .btn (kanonik btn btn-primary /
     btn-ghost), .notice (SiKararnameNotu bileseni), .faq/.fq (ortak Faq),
     .cta/.act (site geneli SiteCtaBand), .fit (ortak ServiceFit).
   - 11px alti etiketler sitenin 11px tabanina cekildi.
   - Reveal: gizleme ve gosterme ayni ".saa-js" on ekiyle (bkz. ChatGPT Ads
     reveal hatasi); hareket azaltmada icerik hep gorunur. */

.saa {
  --bg: var(--paper-bg); --bg-2: var(--paper-bg2); --paper: var(--paper-paper);
  --ink: var(--paper-ink); --ink-2: var(--paper-ink2); --mute: var(--paper-mute); --faint: var(--paper-faint);
  --line: var(--paper-line); --line-2: var(--paper-line2);
  --acc: var(--paper-acc); --acc-deep: var(--paper-acc-deep); --acc-soft: var(--paper-acc-soft); --acc-lite: var(--paper-acc-lite);
  --mono: var(--f-mono); --ease: var(--paper-ease); --r: 18px;
  background: var(--bg); color: var(--ink);
}
.saa h1, .saa h2, .saa h3, .saa h4 { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.saa p { margin: 0; }
.saa .wrap { max-width: var(--wrap-wide, 1240px); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.saa .lede { font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); line-height: 1.65; max-width: 58ch; }
.saa .sec { padding: clamp(56px, 7vw, 104px) 0; }
.saa .sec.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.saa .sh { margin-bottom: clamp(26px, 3.2vw, 42px); }
.saa .sh h2 { font-size: clamp(28px, 3.8vw, 46px); letter-spacing: -.04em; max-width: 22ch; text-wrap: balance; }
.saa .sh p { margin-top: 16px; }
.saa a.lnk { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
.saa a.lnk:hover { color: var(--acc); }

html.saa-js .saa .rv { opacity: 0; transform: translateY(20px); transition: opacity 750ms var(--ease), transform 750ms var(--ease); }
html.saa-js .saa .rv.shown { opacity: 1; transform: none; }

/* hero */
.saa .hero { padding: clamp(44px, 5.5vw, 76px) 0 clamp(28px, 3.5vw, 44px); position: relative; overflow: hidden; }
.saa .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 44% at 86% 4%, color-mix(in oklch, var(--acc) 13%, transparent), transparent 70%); pointer-events: none; }
.saa .hero-in { position: relative; }
.saa .hero h1 { font-size: clamp(42px, 6.4vw, 86px); letter-spacing: -.05em; line-height: .96; max-width: 15ch; }
.saa .hero h1 span { display: block; color: var(--acc); }
.saa .hero .lede { margin: 22px 0 28px; max-width: 62ch; }
.saa .hcta { display: flex; gap: 12px; flex-wrap: wrap; }
.saa .hinfo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 1000px) { .saa .hinfo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .saa .hinfo { grid-template-columns: 1fr; } }
.saa .hinfo > div { background: var(--bg); padding: 20px 22px; transition: background 280ms var(--ease); }
.saa .hinfo > div:hover { background: var(--bg-2); }
.saa .hinfo .k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.saa .hinfo h3 { font-size: 16.5px; letter-spacing: -.02em; margin-top: 11px; }
.saa .hinfo p { font-size: 13.5px; color: var(--mute); line-height: 1.55; margin-top: 7px; }

/* nedir + olcum zinciri */
.saa .whatx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
@media (max-width: 960px) { .saa .whatx { grid-template-columns: 1fr; gap: 28px; } }
.saa .prose { max-width: 76ch; }
.saa .prose p { font-size: 16.5px; line-height: 1.78; color: var(--ink-2); margin-bottom: 16px; }
.saa .prose p b { color: var(--ink); font-weight: 500; }
.saa .fig { position: sticky; top: 96px; margin: 0; background: linear-gradient(165deg, #1C1A15, #0F0E0B 62%); border: 1px solid rgba(255,255,255,.1); border-radius: calc(var(--r) + 6px); padding: 24px 24px 20px; overflow: hidden; box-shadow: 0 60px 100px -64px rgba(22,20,15,.7), inset 0 1px 0 rgba(255,255,255,.06); }
@media (max-width: 960px) { .saa .fig { position: static; } }
.saa .fig::before { content: ""; position: absolute; inset: auto -22% -58% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(226,90,43,.3), transparent 64%); pointer-events: none; }
.saa .fig .ft { position: relative; display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.saa .fig .layers { position: relative; margin-top: 18px; display: grid; gap: 8px; }
.saa .fig .ly { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); cursor: default; transition: opacity 520ms var(--ease), transform 520ms var(--ease), background 300ms, border-color 300ms; }
html.saa-js .saa .fig .ly { opacity: 0; transform: translateY(8px); }
html.saa-js .saa .fig.go .ly { opacity: 1; transform: none; }
.saa .fig .ly:hover { background: linear-gradient(120deg, rgba(226,90,43,.2), rgba(226,90,43,.06)); border-color: rgba(226,90,43,.55); transform: translateX(4px); }
html.saa-js .saa .fig.go .ly:hover { transform: translateX(4px); }
.saa .fig .ly .n { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); transition: color 260ms var(--ease); }
.saa .fig .ly .nm { font-size: 14.5px; font-weight: 500; color: #fff; letter-spacing: -.015em; }
.saa .fig .ly .nm small { display: block; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.4; }
.saa .fig .ly .bar { width: 64px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; flex: none; }
.saa .fig .ly .bar i { display: block; height: 100%; border-radius: 99px; background: #FF8A5B; width: var(--w); transition: width 900ms var(--ease), background 260ms; }
html.saa-js .saa .fig .ly .bar i { width: 0; }
html.saa-js .saa .fig.go .ly .bar i { width: var(--w); }
.saa .fig .ly:hover .n { color: #FF8A5B; }
.saa .fig .ly:hover .bar i { background: #fff; }
.saa .fig .ly.hot { background: linear-gradient(120deg, rgba(226,90,43,.22), rgba(226,90,43,.07)); border-color: rgba(226,90,43,.42); }
.saa .fig .ly.hot .n { color: #FF8A5B; }
.saa .fig .fn { position: relative; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.6); }
.saa .fig .fn b { color: #fff; font-weight: 500; }
@media (max-width: 900px) { .saa .fig { padding: 20px 18px 16px; } .saa .fig .ly { padding: 11px 12px; } }
@media (hover: none) { .saa .fig .ly:hover, html.saa-js .saa .fig.go .ly:hover { transform: none; } }

/* tablo */
.saa .tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.saa table { width: 100%; border-collapse: collapse; min-width: 680px; }
.saa th { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-weight: 500; background: var(--bg); }
.saa th.acc { color: var(--acc); }
.saa td { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; vertical-align: top; }
.saa tr:last-child td { border-bottom: 0; }
.saa td:first-child { font-weight: 500; color: var(--ink); }
.saa td.hi { color: var(--ink); background: var(--acc-soft); }
.saa tbody tr:hover td { background: var(--bg); }
.saa tbody tr:hover td.hi { background: color-mix(in oklch, var(--acc) 12%, transparent); }
.saa .tnote { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--mute); max-width: 90ch; }
.saa .tnote b { color: var(--ink); font-weight: 500; }

/* kanit kartlari */
.saa .ev { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .saa .ev { grid-template-columns: 1fr; } }
.saa .evc { background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--acc); border-radius: 0 14px 14px 0; padding: 22px 24px; transition: transform 340ms var(--ease), box-shadow 340ms var(--ease); }
.saa .evc:hover { transform: translateX(4px); box-shadow: 0 30px 56px -44px rgba(22,20,15,.3); }
.saa .evc h3 { font-size: 17.5px; letter-spacing: -.025em; }
.saa .evc p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.saa .evc .lb { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); display: block; margin-bottom: 9px; }

/* degisim kartlari */
.saa .shift { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: calc(var(--r) + 4px); overflow: hidden; }
@media (max-width: 820px) { .saa .shift { grid-template-columns: 1fr; } }
.saa .sfc { background: var(--bg); padding: 30px 30px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background 340ms var(--ease); }
.saa .sfc:hover { background: var(--paper); }
.saa .sfc .top { display: flex; align-items: baseline; gap: 12px; }
.saa .sfc .rn { font-family: var(--mono); font-size: 12px; color: var(--acc); letter-spacing: .08em; flex: none; }
.saa .sfc h3 { font-size: 19.5px; letter-spacing: -.025em; line-height: 1.25; transition: color 260ms; }
.saa .sfc:hover h3 { color: var(--acc); }
.saa .sfc p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.saa .sfc .old { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.saa .sfc .old dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; padding-top: 1px; }
.saa .sfc .old dd { margin: 0; color: var(--ink-2); }
.saa .sfc .old dt.now { color: var(--acc); }
.saa .sfc .old dd.now { color: var(--ink); font-weight: 500; }

/* paketler */
.saa .pk { border-top: 1px solid var(--line); }
.saa .pkr { display: grid; grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1.25fr) auto; gap: 24px; align-items: start; padding: 24px 4px; border-bottom: 1px solid var(--line); transition: padding 260ms var(--ease), background 260ms; }
.saa .pkr:hover { padding-left: 12px; background: var(--paper); }
@media (max-width: 900px) { .saa .pkr { grid-template-columns: 44px 1fr; gap: 14px; } .saa .pkr .tagx { display: none; } }
.saa .pkr .no { font-family: var(--mono); font-size: 20px; color: var(--acc); line-height: 1; }
.saa .pkr .no small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.saa .pkr h3 { font-size: 20px; letter-spacing: -.025em; max-width: 22ch; transition: color 240ms; }
.saa .pkr:hover h3 { color: var(--acc); }
.saa .pkr p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.saa .pkr .tagx { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; white-space: nowrap; transition: all 240ms; }
.saa .pkr .tagx:empty { visibility: hidden; }
.saa .pkr:hover .tagx { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }

/* gorev dagilimi */
.saa .split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .saa .split { grid-template-columns: 1fr; } }
.saa .sp { background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--acc); border-radius: 0 14px 14px 0; padding: 22px 24px; }
.saa .sp h3 { font-size: 17.5px; letter-spacing: -.025em; }
.saa .sp ul, .saa .prc ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.saa .sp li, .saa .prc li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.saa .sp li i, .saa .prc li i { color: var(--acc); font-style: normal; font-size: 12px; padding-top: 3px; }

/* onkosullar */
.saa .pre { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: calc(var(--r) + 4px); overflow: hidden; }
@media (max-width: 820px) { .saa .pre { grid-template-columns: 1fr; } }
.saa .prc { background: var(--bg); padding: 28px 28px 26px; transition: background 320ms var(--ease); }
.saa .prc:hover { background: var(--paper); }
.saa .prc h3 { font-size: 19px; letter-spacing: -.025em; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.saa .prc ul { margin-top: 16px; gap: 11px; }
.saa .prc li { font-size: 15px; line-height: 1.6; }
.saa .prc .fn { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; line-height: 1.6; color: var(--mute); }
@media (max-width: 900px) { .saa .prc { padding: 22px 20px; } .saa .prc li { font-size: 14.5px; } }

/* mobil */
@media (max-width: 900px) {
  .saa .sec { padding: 44px 0; }
  .saa .sh { margin-bottom: 22px; }
  .saa .sh h2 { font-size: clamp(26px, 7vw, 34px); max-width: none; letter-spacing: -.035em; }
  .saa .sh p { font-size: 16px; margin-top: 12px; }
  .saa .hero { padding: 32px 0 26px; }
  .saa .hero h1 { font-size: clamp(34px, 8.8vw, 46px); max-width: none; letter-spacing: -.04em; line-height: 1.02; }
  .saa .hero .lede { font-size: 16px; margin: 16px 0 22px; }
  .saa .hcta { gap: 10px; }
  /* Tasarimda flex:1 idi; TR metinleri iki yana sigmayip uc satira kiriliyordu.
     Tiklanabilir metin tek satir kalsin diye telefonda alt alta, tam genislik. */
  .saa .hcta .btn { flex: 1 1 100%; justify-content: center; min-height: 52px; white-space: nowrap; }
  .saa .prose p { font-size: 16px; line-height: 1.72; }
  .saa .evc { padding: 20px; }
  .saa .sfc { padding: 24px 20px 22px; }
  .saa .sfc h3 { font-size: 18px; }
  .saa .pkr { padding: 20px 2px; }
  .saa .pkr:hover { padding-left: 2px; }
  .saa .pkr h3 { font-size: 18px; max-width: none; }
  .saa .sp { padding: 20px; }
}
@media (hover: none) {
  .saa .evc:hover { transform: none; box-shadow: none; }
  .saa .pkr:hover { padding-left: 2px; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html.saa-js .saa .rv, html.saa-js .saa .fig .ly { opacity: 1; transform: none; transition: none; }
  html.saa-js .saa .fig .ly .bar i { width: var(--w); transition: none; }
}