/* =====================================================================
   RiverAI brand overrides — loaded AFTER styles.css
   styles.css'e DOKUNMADAN markayı river mavisine çevirir. Geri almak
   için tek yapılacak: sayfalardan bu dosyanın <link>'ini kaldırmak.
   ===================================================================== */

:root {
  --brand: #FD3A25;            /* RiverAI turuncu-kırmızı (ana vurgu) */
  --brand-2: #FF7A45;          /* Turuncu (gradient ucu) */
  --brand-rgb: 253, 58, 37;
  --river-gradient: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
}

/* Şablonun renk-seçici demo modları da river'a sabitlensin */
[data-color-primary] { --brand: #1C8FE3; }

/* --- Şablonda kırmızı hard-code edilmiş yerleri river gradient'e çevir --- */
.section-hero .content-wrap .title-icon .box {
  background: var(--river-gradient) !important;
}
.process-card .icon {
  background: var(--river-gradient) !important;
}
.features-center {
  background: var(--river-gradient),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
.tf-switch-check:checked {
  background: var(--river-gradient) !important;
}

/* Logo wordmark güvenli boyut */
.logo-site img,
.footer-logo img { height: 30px; width: auto; }

/* Marka butonlarına ince river dokunuşu (hover gölgesi) */
.tf-btn:hover { box-shadow: 0 6px 24px rgba(var(--brand-rgb), 0.28); }

/* Dil değiştirici (TR / EN) */
.lang-switch {
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}
.lang-switch a { color: var(--neutral-500); transition: color 0.2s; }
.lang-switch a:hover,
.lang-switch a.active { color: var(--brand); }
.lang-switch span { color: var(--neutral-300); }

/* =====================================================================
   GÖRSEL VARLIK İSKELETİ (inline SVG logo / görsel / lottie)
   Gerçek varlıklar gelince yalnızca dosyalar değişir; stiller hazır.
   ===================================================================== */

/* --- Inline SVG logo (currentColor + marka aksanı) --- */
.site-logo,
.footer-logo,
.logo-site { display: inline-flex; align-items: center; }
.site-logo-svg { height: 30px; width: auto; color: var(--primary); display: block; }
.site-logo-svg .logo-accent { fill: var(--brand); }
.site-logo-svg .logo-wave  { stroke: var(--brand); transition: stroke-dashoffset .6s ease; }
/* Koyu zeminde (footer / mobil menü) beyaz "River" metni */
.footer-logo .site-logo-svg,
.offcanvas-menu .site-logo-svg,
.box-black .site-logo-svg { color: #fff; }

/* Hover'da dalga "çizim" animasyonu (stroke-draw). reduced-motion'da kapalı. */
@media (prefers-reduced-motion: no-preference) {
  .logo-site:hover .site-logo-svg .logo-wave,
  .site-logo:hover .site-logo-svg .logo-wave {
    stroke-dasharray: 40;
    animation: river-wave-draw .7s ease forwards;
  }
}
@keyframes river-wave-draw {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: 0; }
}

/* --- CLS-güvenli görsel varsayılanları ---
   Tüm <img>/<picture>'a width+height ver; bu kurallar oranı korur. */
img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }         /* intrinsic ratio → CLS 0 */
picture { display: contents; }
.media-cover img { width: 100%; height: 100%; object-fit: cover; }

/* --- Lottie / animasyon konteyneri --- */
.lottie { display: block; width: 100%; height: auto; }
.lottie svg { display: block; }

/* --- Erişilebilirlik: hareketi azalt --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   NAV — ✨ AI vurgusu + "Platform" mega-menu
   ===================================================================== */

/* Üst bar biraz daha geniş + menü öğeleri arasında ince ayıraç
   Not: içerik (logo + nav + dil + CTA) 880px'te tam sığıyor, boşluk kalmıyordu
   (logo↔Anasayfa ve nav↔dil arası 0px'e düşüyordu) — bu yüzden hem genişlik
   artırıldı hem de gap ile garanti boşluk eklendi. */
.tf-header.header2 .header-inner {
  max-width: 1008px;
  gap: 20px;
}
/* Demo butonunu dil değiştiriciden biraz uzaklaştır ki aradaki ayıraç
   butonun gölgesine ezilmeden görünsün. */
.tf-header.header2 .lang-switch {
  margin-right: 12px;
}
/* Logo'yu nav'dan biraz daha ayır + araya dikey ayıraç (menü öğesi ayıraçlarıyla aynı stil) */
.tf-header.header2 .logo-site {
  position: relative;
  padding-right: 26px;
  margin-right: 6px;
}
.tf-header.header2 .logo-site::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--neutral-200);
}
.nav-menu-main {
  gap: 0;
}
/* CTA metni ("Demo Talep Et") Firefox'ta dar butonda iki satıra kırılıp
   pill'den taşıyordu — tek satıra sabitle, buton doğal boyutunda pill içinde otursun. */
.tf-header .tf-btn.d-lg-flex {
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-menu-main .menu-item {
  position: relative;
  padding-right: 26px;
  margin-right: 2px;
}
.nav-menu-main .menu-item::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--neutral-200);
}
.nav-menu-main .menu-item:last-child {
  padding-right: 0;
  margin-right: 0;
}
.nav-menu-main .menu-item:last-child::after {
  display: none;
}

/* İletişim'den sonraki öğeler (dil değiştirici + Demo butonu) arasına da ayıraç —
   üst bar boyunca tutarlı olsun. gap:20px olduğu için ayıraç boşluğun ortasında. */
.tf-header.header2 .lang-switch,
.tf-header.header2 .header-inner > .tf-btn.d-lg-flex {
  position: relative;
}
.tf-header.header2 .lang-switch::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--neutral-200);
}
/* Demo butonundan önceki ayıraç: buton floating + gölgeli olduğundan çizgi
   gölgede kayboluyordu — EN'e daha yakın konumla ve biraz koyulaştır. */
.tf-header.header2 .header-inner > .tf-btn.d-lg-flex::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--neutral-300);
}

.nav-ai-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-ai-link .nav-ai-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* "⚡ AI" Firefox'ta iki satıra kırılmasın */
  background: var(--river-gradient);
  -webkit-background-clip: text;
  -webkit-text-stroke: 0px transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.nav-ai-link .nav-ai-spark {
  font-size: 0.85em;
  -webkit-text-fill-color: initial;
}
.nav-ai-text .icon {
  -webkit-text-fill-color: initial;
  color: var(--brand);
  font-size: 0.85em;
  margin-right: 2px;
}

.menu-item.dropdown { position: relative; }
.menu-item.dropdown > .item-link::after {
  content: '';
  display: inline-block;
  align-self: center;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  opacity: 0.55;
}
.river-mega-menu {
  --bs-dropdown-min-width: 260px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(9, 9, 11, 0.12);
  padding: 10px;
  margin-top: 12px !important;
}
.river-mega-menu .dropdown-item {
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--neutral-800);
  font-size: 14px;
}
.river-mega-menu .dropdown-item:hover,
.river-mega-menu .dropdown-item:focus {
  background: var(--neutral-100);
  color: var(--brand);
}

/* =====================================================================
   ANASAYFA — 8 yetenek kartı (Featured Works yerine)
   ===================================================================== */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 991px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .capability-grid { grid-template-columns: 1fr; } }

.capability-card {
  display: block;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--neutral-200);
  background: var(--white);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(9, 9, 11, 0.10);
  border-color: transparent;
}
.capability-card.is-featured {
  background: var(--river-gradient);
  border: none;
  color: #fff;
}
.capability-card .cap-icon { font-size: 28px; margin-bottom: 14px; display: block; }
.capability-card .cap-icon .icon { color: var(--brand); }
.capability-card.is-featured .cap-icon .icon { color: #fff; }
.capability-card .cap-title { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.capability-card.is-featured .cap-title,
.capability-card.is-featured .cap-desc { color: #fff; }
.capability-card .cap-desc { color: var(--neutral-500); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.capability-card .cap-link { font-weight: 600; font-size: 14px; }
.capability-card:not(.is-featured) .cap-link { color: var(--brand); }

/* =====================================================================
   DERİN SAYFALAR — ortak içerik blokları (AI / Güvenlik / Süreç / Form /
   Kanban / Dashboard / Ekosistem / Teknik Altyapı)
   ===================================================================== */

.river-page-hero {
  padding: 160px 0 60px;
  text-align: center;
}
.river-page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  margin-bottom: 16px;
}
.river-page-hero .eyebrow .icon { color: var(--brand); font-size: 1em; }
.river-page-hero p.lead {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--neutral-500);
  font-size: 18px;
  line-height: 1.7;
}

.river-section { padding: 60px 0; }
.river-section.alt { background: var(--neutral-50); }
.river-section h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 14px;
}
.river-section .river-eyebrow {
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.river-section p { color: var(--neutral-600); font-size: 16px; line-height: 1.75; }

.river-diff-box {
  border-radius: 16px;
  padding: 24px 28px;
  background: var(--neutral-900);
  color: #fff;
  margin-top: 12px;
}
.river-diff-box .label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 8px;
}
.river-diff-box p { color: #E4E4E7; margin: 0; }
.river-diff-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.river-diff-box ul li {
  color: #E4E4E7;
  padding-left: 26px;
  position: relative;
  line-height: 1.5;
}
.river-diff-box ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--river-gradient);
}
.river-diff-box ul li .icon {
  position: absolute;
  left: 1px;
  top: 2px;
  font-size: 10px;
  color: #fff;
}
.river-diff-box ul li strong { color: #fff; }

/* --- Ekran görüntüsü yer tutucu — gerçek görsel gelince <img> ile değişir --- */
.shot-frame {
  border-radius: 14px;
  border: 1px solid var(--neutral-200);
  background: linear-gradient(180deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(9, 9, 11, 0.08);
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-placeholder {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--neutral-400);
  padding: 20px;
  text-align: center;
}
.shot-placeholder .ph-icon { font-size: 32px; opacity: 0.5; }
.shot-placeholder .ph-icon .icon,
.shot-frame .icon { color: var(--neutral-400); }
.shot-placeholder .ph-file {
  font-family: monospace;
  font-size: 12px;
  background: var(--neutral-200);
  color: var(--neutral-600);
  padding: 3px 10px;
  border-radius: 20px;
}

/* --- Genel özellik kart grid'i (derin sayfalarda kullanılan 2-3-4 kolon kart) --- */
.river-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) { .river-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .river-feature-grid { grid-template-columns: 1fr; } }
.river-feature-card {
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
}
.river-feature-card .fc-icon { font-size: 22px; margin-bottom: 10px; display: block; }
.river-feature-card .fc-icon .icon { color: var(--brand); }
.river-feature-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.river-feature-card p { font-size: 14px; color: var(--neutral-500); margin: 0; line-height: 1.6; }

.river-cta-band {
  border-radius: 20px;
  background: var(--river-gradient);
  color: #fff;
  padding: 48px 40px;
  text-align: center;
}
.river-cta-band h3 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.river-cta-band p { color: rgba(255,255,255,0.9); margin-bottom: 22px; }
.river-cta-band .tf-btn { background: #fff; color: var(--neutral-900); }
html.reduced-motion [data-lottie] { /* JS de otomatik oynatmayı durdurur */ }

/* =====================================================================
   Teknolojiler bölümü — 4 ek yüzen rozet (MongoDB, MinIO, Redis, Kafka)
   ===================================================================== */
.section-tools .img-7 {
  top: 6%;
  left: 32%;
  width: 64px;
  transform: scale(1) rotate(-18deg);
}
@media (max-width: 1439px) { .section-tools .img-7 { left: 26%; } }
@media (max-width: 991px) { .section-tools .img-7 { width: 36px; } }
@media (max-width: 767px) { .section-tools .img-7 { display: none; } }

.section-tools .img-8 {
  top: 82%;
  left: 34%;
  width: 68px;
  transform: scale(1) rotate(16deg);
}
@media (max-width: 1439px) { .section-tools .img-8 { left: 27%; } }
@media (max-width: 991px) { .section-tools .img-8 { width: 36px; } }
@media (max-width: 767px) { .section-tools .img-8 { display: none; } }

.section-tools .img-9 {
  top: 8%;
  right: 34%;
  width: 62px;
  transform: scale(1) rotate(20deg);
}
@media (max-width: 1439px) { .section-tools .img-9 { right: 27%; } }
@media (max-width: 991px) { .section-tools .img-9 { width: 34px; } }
@media (max-width: 767px) { .section-tools .img-9 { display: none; } }

.section-tools .img-10 {
  top: 80%;
  right: 32%;
  width: 70px;
  transform: scale(1) rotate(-16deg);
}
@media (max-width: 1439px) { .section-tools .img-10 { right: 26%; } }
@media (max-width: 991px) { .section-tools .img-10 { width: 36px; } }
@media (max-width: 767px) { .section-tools .img-10 { display: none; } }

/* --- Rozet etiketleri: küçük, soluk, ikonun tam altında --- */
.section-tools .tool-label {
  position: absolute;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-400);
  white-space: nowrap;
  pointer-events: none;
}
.tool-label-1 { top: calc(22% + 110px); left: 22.22%; width: 103px; }
.tool-label-2 { top: calc(44% + 88px);  left: 15.347%; width: 80px; }
.tool-label-3 { top: calc(62% + 100px); left: 22.7%;  width: 92px; }
.tool-label-4 { top: calc(28% + 100px); right: 22.5%; width: 92px; }
.tool-label-5 { top: calc(49% + 88px);  right: 16.95%; width: 80px; }
.tool-label-6 { top: calc(63% + 110px); right: 22.92%; width: 103px; }
.tool-label-7 { top: calc(6% + 72px);   left: 32%; width: 64px; }
.tool-label-8 { top: calc(82% + 76px);  left: 34%; width: 68px; }
.tool-label-9 { top: calc(8% + 70px);   right: 34%; width: 62px; }
.tool-label-10 { top: calc(80% + 78px); right: 32%; width: 70px; }

@media (max-width: 1439px) {
  .tool-label-1 { left: 12.22%; }
  .tool-label-2 { left: 5.347%; }
  .tool-label-3 { left: 12.7%; }
  .tool-label-4 { right: 12.5%; }
  .tool-label-5 { right: 6.95%; }
  .tool-label-6 { right: 12.92%; }
  .tool-label-7 { left: 26%; }
  .tool-label-8 { left: 27%; }
  .tool-label-9 { right: 27%; }
  .tool-label-10 { right: 26%; }
}
@media (max-width: 991px) {
  .section-tools .tool-label { font-size: 10px; }
  .tool-label-1 { top: calc(22% + 54px); }
  .tool-label-2 { top: calc(44% + 44px); }
  .tool-label-3 { top: calc(62% + 44px); }
  .tool-label-4 { top: calc(28% + 44px); }
  .tool-label-5 { top: calc(49% + 44px); }
  .tool-label-6 { top: calc(63% + 54px); }
}
@media (max-width: 767px) {
  .section-tools .tool-label { display: none; }
}

/* =====================================================================
   FOOTER — Fol Yazılım rozeti ("en alta", tüm sayfalarda)
   RiverAI, Fol Yazılım'ın ürünüdür: footer-logo (sosyal medya bloğu) ve
   header marka ile ilgili yerlerde RiverAI logosu kalır; en alttaki bu
   rozet şirket/telif satırının hemen üstünde Fol Yazılım'ı gösterir.
   ===================================================================== */
.footer-fol-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-500);
}
.footer-fol-badge img {
  height: 28px;
  width: auto;
  opacity: 1;
}

/* =====================================================================
   İLETİŞİM — ofis kartları (Merkez + TÜBİTAK MAM AR-GE), her biri harita ile
   ===================================================================== */
.wg-offices { padding: 20px 0 90px; }
.office-card {
  background: #fff;
  border: 1px solid var(--neutral-100);
  border-radius: 20px;
  padding: 26px 26px 0;
  box-shadow: 0 4px 24px rgba(9,9,11,0.05);
  height: 100%;
  overflow: hidden;
}
.office-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.office-tag {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: #fff; background: var(--river-gradient);
  padding: 7px 14px; border-radius: 999px;
}
.office-dir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand);
  white-space: nowrap; transition: gap .2s ease;
}
.office-dir:hover { gap: 10px; color: var(--brand); }
.office-dir .icon { font-size: 12px; }
.office-addr {
  font-size: 15px; line-height: 1.6; color: var(--neutral-700);
  font-weight: 500; margin: 0 0 12px;
}
.office-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--neutral-900);
  margin-bottom: 22px;
}
.office-phone .icon { color: var(--brand); font-size: 15px; }
.office-phone-muted { color: var(--neutral-400); font-weight: 600; }
.office-phone-muted .icon { color: var(--neutral-400); }
.office-map {
  margin: 0 -26px;
  height: 300px;
  border-top: 1px solid var(--neutral-100);
}
.office-map iframe { width: 100%; height: 100%; display: block; }

@media (max-width: 991px) {
  .wg-offices { padding: 10px 0 60px; }
  .office-head { flex-wrap: wrap; }
}

/* =====================================================================
   ANA SAYFA — Sekmeli Çalışma Alanı (ortalı başlık + geniş sekme görseli)
   ===================================================================== */
.river-center-head {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}
.shot-frame-tabs {
  max-width: 1080px;
  margin: 0 auto;
}

/* =====================================================================
   ANA SAYFA HERO — kartlar pill'in içinden yukarı doğru sürekli "akar"
   title-icon-wrap'ta overflow:hidden olduğu için kartlar pill'in içinden
   belirip yukarı süzülerek çıkar. Negatif delay ile 3 kart farklı fazda →
   her an en az bir kart görünür, kesintisiz akış.
   Not: GSAP .img-transform-3'e scroll-parallax uyguluyordu; bu sürekli
   CSS animasyonu onunla çakışmasın diye !important ile önceliklendirildi.
   ===================================================================== */
/* Her kart pill'in MERKEZİNDEN kendi konumuna doğru KAYARAK çıkar (gerçek
   hareket = akış). Merkezde küçük+görünmez başlar (pill'in içi), dışarı
   süzülüp kendi yerine oturur, tam görünür kalır, sonra pill'den biraz daha
   uzaklaşıp yumuşakça solar. Reset görünmez (opacity:0) anında olur.
   3 kart eşit fazda (0 / -1.8s / -3.6s) → kesintisiz akış, her an kart var. */
.section-hero .content-wrap .title-icon .img-1 {
  animation: river-flow-1 5.4s ease-out 0s infinite !important;
}
.section-hero .content-wrap .title-icon .img-2 {
  animation: river-flow-2 5.4s ease-out -1.8s infinite !important;
}
.section-hero .content-wrap .title-icon .img-3 {
  animation: river-flow-3 5.4s ease-out -3.6s infinite !important;
}
@keyframes river-flow-1 {
  0%   { transform: translate(51px, 13px) scale(0.5);   opacity: 0; }
  30%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  68%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  100% { transform: translate(-14px, -18px) scale(1.1); opacity: 0; }
}
@keyframes river-flow-2 {
  0%   { transform: translate(-36px, -15px) scale(0.5); opacity: 0; }
  30%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  68%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  100% { transform: translate(16px, -20px) scale(1.1);  opacity: 0; }
}
@keyframes river-flow-3 {
  0%   { transform: translate(34px, -70px) scale(0.5);  opacity: 0; }
  30%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  68%  { transform: translate(0, 0) scale(1);           opacity: 1; }
  100% { transform: translate(-10px, 22px) scale(1.1);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero .content-wrap .title-icon .img-1,
  .section-hero .content-wrap .title-icon .img-2,
  .section-hero .content-wrap .title-icon .img-3 { animation: none !important; }
}

/* SEO: görsel olarak gizli ama arama motoru/okuyucu erişimli başlık */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}