/* css/why-rpa-page.css */

/* Google Fonts (HTML'de zaten linklendi) */

/* === AI Bot Hero Section === */
@layer properties {
  @property --elh { syntax: '<number>'; inherits: true; initial-value: 1; }
  @property --erx { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
  @property --fx { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
  @property --ealw { syntax: '<number>'; inherits: true; initial-value: 1; }
  @property --earw { syntax: '<number>'; inherits: true; initial-value: 1; }
  @property --erh { syntax: '<number>'; inherits: true; initial-value: 1; }
  @property --mh { syntax: '<number>'; inherits: true; initial-value: 1; }
  @property --mw { syntax: '<number>'; inherits: true; initial-value: 1; }
}

.rpa-ai-bot-hero-section {
  width: 100%;
  height: 100vh; 
  background-color: #080a0c; 
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative; 
  overflow: hidden; 
}

.rpa-ai-bot-hero-content {
  max-width: 900px; 
  width: 100%;
  display: flex;
  flex-direction: column; 
  align-items: center; 
  animation: fadeInBotHeroContent 1s 0.2s ease-out forwards; 
  opacity: 0; 
}

@keyframes fadeInBotHeroContent {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-bot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ai-bot-container {
  margin-bottom: 30px; 
}

.ai-bot {
  scale: 5; 
  width: 34px;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  animation: move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) infinite, 
             mouth 1.2s ease-in infinite;
  animation-delay: 0.5s, 0.7s; 
}

.ai-bot .head {
  --c: white;
  --c2: #9ae3dc;
  --c3: magenta;
  --surface: #111; 

  background: linear-gradient(var(--c) 80%,color-mix(in srgb, var(--c), black 30%), var(--c) );
  border-radius: .375rem;
  position: absolute;
  width: 28px;
  height: 20px;
}

.ai-bot .head:before, 
.ai-bot .head:after {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 2px;
  height: 8px;
  background: var(--c);
  border-radius: 2px 0 0 2px;
  scale: var(--ealw, 1) 1;
}
.ai-bot .head:after {
  right: -4px;
  left: unset;
  border-radius: 0 2px 2px 0;
  scale: var(--earw, 1) 1;
}
    
.ai-bot .head .face {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  inset: 0 3px;
  background: var(--surface);
  translate: var(--fx) 0;
  border-radius: 4px;
  padding: 4px 4px 2px 4px;
  gap: 3px;
}
      
.ai-bot .head .face:before {
  content: '';
  background: var(--c);
  position: absolute;
  height: 1px;
  width: 10px;
  top: -2px;
  border-radius: 2px 2px 0 0;
  mask: radial-gradient(circle at 50% 100%, transparent 45%, black 45%);
}
     
.ai-bot .head .face .eyes {
  display: flex;
  height: 8px;
  gap: 6px;
}
.ai-bot .head .face .eyes:before, 
.ai-bot .head .face .eyes:after {
  content: '';
  width: 5px;
  height:  8px;
  scale: 1 var(--elh, 1); 
  filter: drop-shadow( 0 0 2px var(--c2));
  background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
  border-radius: 1px;
  translate: var(--erx) 0;
}
        
.ai-bot .head .face .eyes:after {
  scale: 1 var(--erh, 1); 
  translate: var(--erx) 0;
}
      
.ai-bot .head .face .mouth  {
  width: 10px;
  height: 2px;
  background: var(--c2);
  border-radius: 0 0 1px 1px;
  filter: drop-shadow( 0 0 2px var(--c2));
  scale: var(--mw, 1) var(--mh, 1);
}

@layer animations {
  @keyframes mouth {
    from, 30%,70%, to { --mh: 1; --mw: 1; }
    20% { --mh: .5; }
    60%{  --mw: .7; }
  }
  @keyframes move-head {
    from, 20%, 40%, to{ --erx: 0%; --fx: 0%; --ealw: 1; --earw: 1; --elh:1; --erh:1;}
    10% { --erx: 20%; --fx: 10%; --ealw: 1.5; --earw: .5; --elh:0.8; --erh:1;}
    30% { --erx: -20%; --fx: -10%; --ealw: .5; --earw: 1.5; --elh:1; --erh:0.8;}
  }
}

.hero-text-content { 
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInBotTextContent 1s 0.8s ease-out forwards; 
}

@keyframes fadeInBotTextContent {
    to { opacity: 1; transform: translateY(0); }
}

.rpa-hero-headline-bot {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; 
  font-size: clamp(2.2rem, 6vw, 4rem); 
  line-height: 1.2; 
  margin-bottom: 20px; 
  text-transform: uppercase;
  letter-spacing: 1px; 
  color: #ffffff;
}

.rpa-hero-headline-bot span {
  display: block; 
}

.rpa-hero-subheadline-bot {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem); 
  line-height: 1.65; 
  color: rgba(230, 230, 240, 0.8); 
  max-width: 650px; 
  margin: 0 auto 35px auto; 
}

.ai-bot-scroll-for-more { 
  position: absolute;
  bottom: 20px; 
  left: 50%;
  transform: translateX(-50%);
  width: auto; 
  height: auto; 
  z-index: 10;
  opacity: 0; 
  animation: fadeInScrollMinimal 0.8s 2.5s ease-out forwards, 
             pulseAndMoveDown 2.5s infinite 3.3s;
  display: flex; 
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.65); 
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85rem; 
}

@keyframes fadeInScrollMinimal {
  to { opacity: 0.8; } 
}

@keyframes pulseAndMoveDown {
  0% { transform: translateY(0) translateX(-50%); opacity: 0.7; }
  50% { transform: translateY(6px) translateX(-50%); opacity: 0.35; } 
  100% { transform: translateY(0) translateX(-50%); opacity: 0.7; }
}

.ai-bot-scroll-for-more i {
  display: block;
  font-size: 1.5rem; 
  color: rgba(255, 255, 255, 0.75); 
  line-height: 1;
  margin-bottom: 3px; 
}

/* === Ana İçerik Alanı (Hero'dan sonra) === */
.why-rpa-main-content.page-content {
  padding-top: 0 !important; 
}

/* === RPA Quick Info Section === */
.rpa-quick-info-section {
  padding: 80px 40px;
  background-color: #ffffff; 
  text-align: center;
  border-bottom: 1px solid #e0e0e0; 
}

.quick-info-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: #1a1a1a;
  margin-bottom: 25px;
  font-weight: 700;
}

.quick-info-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #495057;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.cta-button-main { 
  display: inline-block;
  background-color: #00aeff; 
  color: #ffffff;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px; 
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 174, 255, 0.25);
}

.cta-button-main:hover {
  background-color: #0095cc;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 174, 255, 0.35);
  color: #ffffff;
  text-decoration: none;
}

/* === Supported RPA Platforms Section (Yaklaşım 2 Stilleri) === */
.rpa-supported-platforms-section {
  padding: 80px 20px; 
  background-color: #f8f9fa; 
  text-align: center;
}

.rpa-supported-platforms-section .page-section-title {
  margin-bottom: 60px; 
}

.platform-logo-grid {
  display: flex; 
  flex-wrap: nowrap; 
  max-width: 1100px; 
  margin: 0 auto 40px auto; 
  border: 1px solid #e0e0e0; 
  border-radius: 10px; 
  overflow: hidden; 
  background-color: #ffffff; 
}

.platform-logo-item {
  padding: 20px 15px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  min-height: 180px; 
  box-sizing: border-box; 
  transition: background-color 0.3s ease; 
  flex-grow: 1; 
  flex-basis: 0; 
  border-right: 1px solid #f0f0f0; 
  text-align: center; 
  cursor: pointer; 
}

.platform-logo-item:last-child {
  border-right: none; 
}

.platform-logo-item:hover {
  background-color: #fdfdfd; 
}

.logo-image-wrapper {
  width: 180px;  
  height: 80px; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px; 
  overflow: hidden; 
}

.platform-logo-img {
  max-width: 100%;  
  width: auto;       
  height: auto;      
  object-fit: contain; 
  filter: grayscale(100%) opacity(0.55); 
  transition: filter 0.3s ease, transform 0.3s ease;
}

.platform-logo-item:hover .platform-logo-img {
  filter: grayscale(0%) opacity(1); 
  transform: scale(1.05); 
}

.platform-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem; 
  color: #555;    
  font-weight: 600;
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  line-height: 1.2; 
  padding-top: 5px; 
}

.platform-note {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #495057;
  max-width: 700px;
  margin: 0 auto;
}
.platform-note strong {
    color: #007bff; 
}


/* === Animated Text Section === */
.rpa-animated-text-section {
  background-color: #0f0f12; 
  color: #f0f0f0; 
  padding: 100px 40px; 
  overflow: hidden; 
  text-align: center; 
}

.text-animation-container {
  max-width: 800px; 
  margin: 0 auto;
}

.text-block {
  font-family: 'Montserrat', sans-serif; 
  font-weight: 700; 
  font-size: clamp(2rem, 5.5vw, 3.2rem); 
  line-height: 1.3;
  margin-bottom: 0.5em; 
  color: #ffffff; 
  overflow: hidden; 
}

.text-block span {
  display: block; 
  transform: translateY(110%); 
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.text-block.is-visible span {
  transform: translateY(0%); 
}

/* === Benefits Timeline Section === */
#rpaBenefitsSection { 
  padding-top: 80px; 
  padding-bottom: 60px;
  background-color: #ffffff; 
  font-family: 'Open Sans', sans-serif; 
}

#rpaBenefitsSection .container {
    text-align: center; 
}

.page-section-title { 
  font-family: 'Montserrat', sans-serif; 
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #1a1a1a; 
  text-align: center; 
  margin-bottom: 25px; 
  font-weight: 700;
}

.section-intro {
  font-size: 1.1rem; 
  line-height: 1.7;
  color: #555; 
  text-align: center; 
  max-width: 750px;
  margin: 0 auto 70px auto; 
}

.timeline {
  position: relative;
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.timeline::before { 
  content: '';
  position: absolute;
  top: 0;
  left: 18px; 
  height: 100%;
  width: 3px;
  background: #e9ecef; 
  z-index: 1;
}

.timeline__event {
  position: relative;
  margin-left: 60px; 
  margin-bottom: 50px; 
  padding-left: 30px; 
  padding-bottom: 20px; 
  border-left: 3px solid transparent; 
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, border-left-color 0.3s ease;
  opacity: 0; 
  transform: translateY(20px); 
  text-align: left; 
}

.timeline__event.is-active {
  opacity: 1;
  transform: translateY(0);
  border-left-color: #00aeff; 
}

.timeline__event__icon {
  position: absolute;
  left: -21px; 
  top: 0; 
  width: 42px; 
  height: 42px;
  background: #ffffff; 
  border: 3px solid #00aeff; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #00aeff; 
  font-size: 1.2rem; 
  box-shadow: 0 0 0 4px #ffffff; 
}

.timeline__event.is-active .timeline__event__icon {
  background-color: #00aeff; 
  color: #ffffff; 
}

.timeline__event__title {
  font-family: 'Montserrat', sans-serif; 
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 8px 0;
  padding-top: 5px; 
}

.timeline__event__description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #555;
}
.timeline__event__description p {
    margin-bottom: 0; 
}

/* === Conclusion Section === */
#rpaConclusionSection {
  background-color: #f0f4f8;
  padding: 60px 40px;
}
.rpa-conclusion {
    text-align: center;
    border-radius: 8px;
}

.rpa-conclusion p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.cta-button-alt {
    display: inline-block;
    background-color: #00aeff;
    color: #ffffff;
    padding: 12px 28px;
    font-size: 1.05rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button-alt:hover {
    background-color: #0095cc;
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

/* Responsive Ayarlamalar */
@media screen and (max-width: 768px) {
  .rpa-ai-bot-hero-section {
    height: auto; 
    min-height: 90vh;
    padding-top: 100px; 
    padding-bottom: 80px;
  }
  .ai-bot {
    scale: 4; 
    margin-bottom: 25px; 
  }
  .rpa-hero-headline-bot {
    font-size: clamp(1.8rem, 5.5vw, 3rem); 
  }
  .rpa-hero-subheadline-bot {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    max-width: 90%;
  }
  .ai-bot-scroll-for-more {
    bottom: 15px; 
  }
  .ai-bot-scroll-for-more i {
    font-size: 1.3rem;
  }

  .rpa-quick-info-section { padding: 60px 20px; }
  .quick-info-title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
  .quick-info-text { font-size: 1rem; }
  .cta-button-main { padding: 12px 28px; font-size: 1rem; }

  .rpa-supported-platforms-section { padding: 60px 15px; }
  .rpa-supported-platforms-section .page-section-title { margin-bottom: 40px; }
  .platform-logo-grid { flex-direction: row; flex-wrap: wrap; border: none; background-color: transparent; }
  .platform-logo-item { flex-grow: 0; flex-basis: calc(50% - 10px); margin: 5px; border: 1px solid #e0e0e0; border-radius: 8px; min-height: 170px; padding: 20px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
  .platform-logo-item:last-child { border-right: 1px solid #e0e0e0; }
   .logo-image-wrapper { width: 140px; height: 60px; }
  .platform-name { font-size: 0.75rem; }
  
  .rpa-animated-text-section { padding: 80px 20px; }
  .text-block { font-size: clamp(1.8rem, 6.5vw, 2.5rem); margin-bottom: 0.4em; }

  #rpaBenefitsSection { padding-top: 60px; }
  .page-section-title { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: 30px; }
  .section-intro { font-size: 1.05rem; margin-bottom: 50px; }

  .timeline::before { left: 20px; }
  .timeline__event { margin-left: 45px; padding-left: 25px; margin-bottom: 40px; text-align: left; }
  .timeline__event__icon { left: -21px; width: 38px; height: 38px; font-size: 1rem; box-shadow: 0 0 0 3px #ffffff; }
  .timeline__event__title { font-size: 1.15rem; }
  .timeline__event__description { font-size: 0.9rem; }
  #rpaConclusionSection { padding: 50px 20px; }
}

@media screen and (max-width: 480px) {
    .ai-bot { scale: 3.5; }
    .rpa-hero-headline-bot { font-size: clamp(1.6rem, 6.5vw, 2.5rem); }
    .quick-info-title { font-size: 1.5rem; }
    .platform-logo-item { flex-basis: calc(100% - 10px); margin: 10px 5px; min-height: 150px; }
    .logo-image-wrapper { width: 130px; height: 55px; }
    .text-block { font-size: clamp(1.5rem, 7.5vw, 2rem); }
    .page-section-title { font-size: 1.7rem; }
    .section-intro { font-size: 1rem; }
    .ai-bot-scroll-for-more {
        bottom: 10px; 
    }
    .ai-bot-scroll-for-more i {
        font-size: 1.2rem;
    }
}