/* ═══════════════════════════════════════════════════════════
   Ana sayfa illüstrasyonları
   Hepsi satır içi SVG + CSS ile çizilir (harici görsel yok).
   Animasyonlar yalnızca kart görünür alana girdiğinde başlar:
   .seen sınıfı common.js'teki initReveal() tarafından eklenir.
   ═══════════════════════════════════════════════════════════ */

/* Kartın belirme hareketi */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].seen{opacity:1;transform:none}

/* ── Adım illüstrasyonu çerçevesi ── */
.step-art{
  height:104px;margin:-4px -4px 16px;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,rgba(14,157,118,.06),rgba(46,197,221,.05));
  box-shadow:inset 0 0 0 1px rgba(14,157,118,.10);
  display:flex;align-items:center;justify-content:center;
}
.step-art svg{width:100%;height:100%;display:block}

/* Adım 1 — adres yazılıyor */
.sk-field{fill:#fff;stroke:var(--line);stroke-width:1.4}
.sk-go{fill:var(--ink)}
.sk-typed{
  font-family:'DM Mono',monospace;font-size:11px;fill:var(--ink-2);
  /* Harf harf yazılıyor izlenimi: kırpma genişliği büyür */
  clip-path:inset(0 100% 0 0);
}
.seen .sk-typed{animation:typeIn 1.5s steps(12,end) .35s forwards}
@keyframes typeIn{to{clip-path:inset(0 0 0 0)}}
.sk-caret{fill:var(--brand);opacity:0}
.seen .sk-caret{animation:caretMove 1.5s steps(12,end) .35s forwards,caretBlink .8s steps(2,end) .35s 3}
@keyframes caretMove{from{transform:translateX(0)}to{transform:translateX(62px)}}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Adım 2 — sayfa taranıyor */
.sk-page{fill:#fff;stroke:var(--line);stroke-width:1.4}
.sk-line{fill:var(--line);opacity:.9}
.sk-line.l1{fill:var(--ink);opacity:.75}
.seen .sk-line{animation:lineRead 2.4s ease-in-out infinite}
.seen .sk-line.l1{animation-delay:.1s}
.seen .sk-line.l2{animation-delay:.28s}
.seen .sk-line.l3{animation-delay:.46s}
.seen .sk-line.l4{animation-delay:.64s}
.seen .sk-line.l5{animation-delay:.82s}
@keyframes lineRead{0%,72%,100%{fill:var(--line)}18%,54%{fill:var(--brand)}}
.sk-beam{
  fill:var(--brand);opacity:0;
  filter:blur(5px);
}
.seen .sk-beam{animation:beamSweep 2.4s ease-in-out infinite}
@keyframes beamSweep{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:.35}
  70%{opacity:.35;transform:translateY(66px)}
  85%,100%{opacity:0;transform:translateY(66px)}
}

/* Adım 3 — skor beliriyor */
.sk-track{fill:none;stroke:var(--line);stroke-width:7}
.sk-arc{
  fill:none;stroke:var(--brand);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:188;stroke-dashoffset:188;
}
.seen .sk-arc{animation:arcFill 1.4s var(--ease) .3s forwards}
@keyframes arcFill{to{stroke-dashoffset:24}}
.sk-score{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:300;
  fill:var(--brand-deep);letter-spacing:-.04em;opacity:0;
}
.seen .sk-score{animation:fadeSoft .7s ease-out .9s forwards}
@keyframes fadeSoft{to{opacity:1}}
/* width yerine transform:scaleX (bkz. barGrow) — dinlenme durumu burada
   sıfırlanır; rect'in kendi genişliği HTML'de sabit yazılıp yalnızca
   ölçeklenir, böylece animasyon her karede SVG geometrisini değil GPU
   katmanını günceller. transform-origin her rect'e satır içinde tanımlı. */
.sk-bar{fill:var(--brand);opacity:.32;transform:scaleX(0)}
.seen .sk-bar.b1{animation:barGrow 1s var(--ease) .7s forwards}
.seen .sk-bar.b2{animation:barGrow 1s var(--ease) .85s forwards}
@keyframes barGrow{to{transform:scaleX(1)}}
.sk-bar.b2{opacity:.18}

/* Adım 4 — sürekli takip */
.sk-grid{stroke:var(--line);stroke-width:1.4}
.sk-trend{
  fill:none;stroke:var(--brand);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:190;
}
.seen .sk-trend{animation:drawLine 1.5s var(--ease) .3s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.sk-dot{fill:var(--brand);opacity:0}
.sk-dot.hi{fill:var(--brand-cyan)}
.seen .sk-dot{animation:fadeSoft .4s ease-out forwards}
.seen .sk-dot.d1{animation-delay:.45s}
.seen .sk-dot.d2{animation-delay:.7s}
.seen .sk-dot.d3{animation-delay:.95s}
.seen .sk-dot.d4{animation-delay:1.2s}
.seen .sk-dot.d5{animation-delay:1.5s}
.seen .sk-dot.hi{animation:fadeSoft .4s ease-out 1.5s forwards,pulseDot 2s ease-in-out 2s infinite}
/* r yerine transform:scale — nokta sürekli (infinite) yandığı için en
   çok kazanç sağlayan dönüşümlerden biri. transform-origin işaretin
   kendi cx/cy'sine satır içinde ayarlı (bkz. index.php). */
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ── "Neden PirGEO" kart görselleri ── */
.feat-art{
  height:126px;margin:-6px -6px 20px;border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,rgba(14,157,118,.055),rgba(46,197,221,.045));
  box-shadow:inset 0 0 0 1px rgba(14,157,118,.09);
}
.feat-art svg{width:100%;height:100%;display:block}

/* Görsel 1 — botlar siteye bağlanıyor */
.fa-site{fill:#fff;stroke:var(--line);stroke-width:1.4}
.fa-site-l{fill:var(--line)}
.fa-node{fill:#fff;stroke-width:1.6}
.fa-node.ok{stroke:var(--brand)}
.fa-node.no{stroke:var(--bad)}
.fa-ring{fill:var(--brand)}
.fa-ring.no{fill:var(--bad)}
.fa-link{stroke:var(--line);stroke-width:1.6;stroke-dasharray:3 4;fill:none}
.fa-link.ok{stroke:var(--brand);opacity:.55}
.fa-link.no{stroke:var(--bad);opacity:.4}
.fa-pulse{fill:var(--brand);opacity:0}
.seen .fa-pulse{animation:travel 2.6s ease-in-out infinite}
.seen .fa-pulse.p2{animation-delay:.55s}
.seen .fa-pulse.p3{animation-delay:1.1s}
@keyframes travel{0%{opacity:0}15%{opacity:.9}75%{opacity:.9}100%{opacity:0}}
.fa-x{stroke:var(--bad);stroke-width:1.8;stroke-linecap:round}

/* Görsel 2 — şeffaf puanlama listesi */
.fa-row{fill:#fff;stroke:var(--line);stroke-width:1.2}
.fa-tick{stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:14;stroke-dashoffset:14}
.seen .fa-tick{animation:drawTick .45s var(--ease) forwards}
.seen .fa-tick.t2{animation-delay:.22s}
.seen .fa-tick.t3{animation-delay:.44s}
@keyframes drawTick{to{stroke-dashoffset:0}}
.fa-txt{fill:var(--line)}
.fa-pts{font-family:'DM Mono',monospace;font-size:7.5px;fill:var(--brand-deep);opacity:0}
.seen .fa-pts{animation:fadeSoft .5s ease-out .5s forwards}

/* Görsel 3 — kod penceresi */
.fa-win{fill:#171a20}
.fa-dot-r{fill:rgba(255,255,255,.22)}
.fa-code{fill:rgba(199,206,218,.65);opacity:0}
.fa-code.key{fill:#7fd3f0;opacity:0}
.seen .fa-code{animation:fadeSoft .35s ease-out forwards}
.seen .fa-code.c1{animation-delay:.25s}
.seen .fa-code.c2{animation-delay:.45s}
.seen .fa-code.c3{animation-delay:.65s}
.seen .fa-code.c4{animation-delay:.85s}
.fa-copy{fill:rgba(79,214,168,.22);stroke:rgba(79,214,168,.5);stroke-width:1}
.fa-copy-t{font-family:'Plus Jakarta Sans',sans-serif;font-size:7px;font-weight:600;fill:#7ff0c8}

/* ── GEO vs SEO görsel karşılaştırma ── */
.vs-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:760px){.vs-visual{grid-template-columns:1fr}}
.vs-pane{
  padding:22px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);
}
/* Bu iki panel "eski yol / yeni yol" karşıtlığını anlatıyor — o yüzden
   diğer her yerdeki tek tip yukarı-doğru-belirme yerine birbirine
   yaklaşarak giriyorlar: Google solda dışarıdan, AI cevabı sağda
   dışarıdan gelip ortada buluşuyor. */
.vs-pane[data-reveal]{transform:translateX(-26px);opacity:0}
.vs-pane.ai[data-reveal]{transform:translateX(26px)}
.vs-pane[data-reveal].seen{transform:none;opacity:1}
@media(max-width:760px){
  /* Mobilde paneller alt alta dizildiği için yatay kayma yerine tüm
     [data-reveal] öğeleriyle aynı dikey belirmeye dönülür. */
  .vs-pane[data-reveal],.vs-pane.ai[data-reveal]{transform:translateY(18px)}
}
.vs-pane.ai{border-color:var(--brand-line);background:linear-gradient(168deg,var(--brand-tint),var(--surface) 62%)}
.vs-pane h4{
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.vs-pane.ai h4{color:var(--brand-deep)}
.vs-pane svg{width:100%;height:150px;display:block}

.vg-bar{fill:var(--line-2);stroke:var(--line);stroke-width:1}
.vg-url{fill:var(--line)}
.vg-title{fill:#7a8ba8}
.vg-desc{fill:var(--line)}
.vg-rank{font-family:'DM Mono',monospace;font-size:7px;fill:var(--faint-deco)}

.va-bubble{fill:#fff;stroke:var(--brand-line);stroke-width:1.2}
.va-txt{fill:var(--line)}
.va-cite{fill:var(--brand);opacity:0}
.seen .va-cite{animation:fadeSoft .5s ease-out .8s forwards}
.va-cite-t{font-family:'DM Mono',monospace;font-size:6.5px;fill:#fff}
.va-cursor{fill:var(--brand)}
.seen .va-cursor{animation:caretBlink .9s steps(2,end) infinite}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .sk-typed{clip-path:none}
  .sk-arc{stroke-dashoffset:24}
  .sk-trend{stroke-dashoffset:0}
  .sk-dot,.sk-score,.fa-pts,.fa-code,.va-cite{opacity:1}
  .fa-tick{stroke-dashoffset:0}
  .sk-bar{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   Akış düzeni — ortada dolan omurga, iki yanda sırayla
   değişen görsel/metin. Mobilde tek sütuna iner.
   ═══════════════════════════════════════════════════════════ */
.flow{position:relative;max-width:940px;margin:0 auto}

/* Omurga */
.flow-spine{
  position:absolute;left:50%;top:10px;bottom:10px;width:2px;
  transform:translateX(-50%);background:var(--line);border-radius:2px;overflow:hidden;
}
.flow-fill{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-cyan));
  transition:height .18s linear;
}

.flow-row{
  display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;
  gap:0;padding:34px 0;
}
.flow-row .flow-art{grid-column:1;grid-row:1}
.flow-row .flow-node{grid-column:2;grid-row:1}
.flow-row .flow-text{grid-column:3;grid-row:1;padding-left:8px}
/* Çift satırlarda taraflar yer değiştirir */
.flow-row:nth-child(odd) .flow-art{grid-column:3}
.flow-row:nth-child(odd) .flow-text{grid-column:1;text-align:right;padding-left:0;padding-right:8px}
/* :nth-child hesabında omurga ilk çocuk olduğu için satırlar 2,3,4,5 sırasında;
   yani 2. çocuk = 1. adım (çift) → görsel solda. */

.flow-node{
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
}
.flow-node span{
  width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--muted);
  background:var(--bg);box-shadow:0 0 0 2px var(--line) inset, 0 0 0 6px var(--bg);
  transition:color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.flow-row.seen .flow-node span{
  color:#fff;transform:scale(1.04);
  background:linear-gradient(150deg,var(--brand),var(--brand-cyan));
  box-shadow:0 0 0 2px transparent inset,0 0 0 6px var(--bg),0 8px 20px -8px rgba(14,157,118,.55);
}

.flow-art{
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(14,157,118,.06),rgba(46,197,221,.05));
  box-shadow:inset 0 0 0 1px rgba(14,157,118,.10);
}
.flow-art svg{width:100%;height:auto;display:block}

.flow-tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand-deep);background:var(--brand-tint);
  padding:4px 11px;border-radius:99px;margin-bottom:12px;
  box-shadow:inset 0 0 0 1px var(--brand-line);
}
.flow-text h3{font-size:21px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px;line-height:1.25}
.flow-text p{font-size:15px;color:var(--muted);line-height:1.7;max-width:380px}
.flow-row:nth-child(odd) .flow-text p{margin-left:auto}

@media(max-width:820px){
  .flow-spine{left:26px;transform:none}
  .flow-row,
  .flow-row:nth-child(odd){
    grid-template-columns:66px 1fr;padding:22px 0;align-items:start;
  }
  .flow-row .flow-node,
  .flow-row:nth-child(odd) .flow-node{grid-column:1;grid-row:1;justify-content:flex-start}
  .flow-row .flow-text,
  .flow-row:nth-child(odd) .flow-text{
    grid-column:2;grid-row:1;text-align:left;padding:0 0 0 4px;
  }
  .flow-row .flow-art,
  .flow-row:nth-child(odd) .flow-art{grid-column:2;grid-row:2;margin-top:18px}
  .flow-row:nth-child(odd) .flow-text p{margin-left:0}
  .flow-text p{max-width:none}
  .flow-node span{width:38px;height:38px;border-radius:12px}
}

/* Adım 1'deki buton metni */
.sk-go-t{fill:rgba(255,255,255,.75)}
.sk-line.l6{fill:var(--line)}
.seen .sk-line.l6{animation:lineRead 2.4s ease-in-out infinite;animation-delay:1s}