/* =========================================
   BYALL AUTOMATION — HOME PAGE
   home.css
   ========================================= */

/* HERO */

.hero-bg{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    linear-gradient(105deg,
      rgba(2,11,26,.82) 0%,
      rgba(10,22,40,.70) 40%,
      rgba(13,27,62,.55) 70%,
      rgba(13,27,62,.45) 100%),
    url('https://byallautomation.com/wp-content/uploads/2026/04/ba-hero-1.webp') center/cover no-repeat;
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:150px 24px 60px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-mid);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  margin-bottom:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  animation:fadeSlideDown .8s var(--ease-out) both;
}

.hero-kicker i{ color:var(--gold); }

.hero-title{
  display:block;
  width:100%;
  max-width:940px;
  margin:0 auto 32px;
  font-family:var(--font-display);
  font-size:clamp(36px,7vw,92px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.5px;
  text-align:center;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  animation:fadeSlideUp .9s .1s var(--ease-out) both;
}

.hero-title .gradient{
  display:inline;
  background:linear-gradient(105deg,#ffffff 0%,#7dd4f8 40%,#1a9fe0 80%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-title .white{
  display:inline;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}

.hero-title .gold{
  display:inline;
  color:var(--gold) !important;
  -webkit-text-fill-color:var(--gold);
  text-shadow:0 4px 28px rgba(0,0,0,.5);
}

.hero-desc{
  width:100%;
  max-width:740px;
  margin:0 auto 36px;
  font-size:18px;
  line-height:1.8;
  color:rgba(255,255,255,.95);
  text-align:center;
  font-weight:400;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
  animation:fadeSlideUp .9s .2s var(--ease-out) both;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:40px;
  animation:fadeSlideUp .9s .28s var(--ease-out) both;
}

.hero-tags span{
  font-size:11.5px;
  font-weight:600;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.065);
  border:1px solid var(--border-mid);
  padding:8px 16px;
  border-radius:999px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  letter-spacing:.3px;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-mid) var(--ease-spring);
}

.hero-tags span:hover{
  background:rgba(26,159,224,.12);
  border-color:rgba(26,159,224,.30);
  transform:translateY(-2px);
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:48px;
}

/* STATS BOX */

.stats-box{
  display:inline-flex;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  margin:0 auto;
  box-shadow:0 0 0 1px rgba(26,159,224,.08) inset,var(--shadow-md);
  animation:fadeSlideUp .9s .42s var(--ease-out) both;
}

.stat-item{
  padding:24px 40px;
  min-width:185px;
  border-right:1px solid rgba(255,255,255,.09);
  text-align:center;
  transition:background var(--t-mid) var(--ease-out);
}

.stat-item:last-child{ border-right:none; }
.stat-item:hover{ background:rgba(255,255,255,.04); }

.stat-num{
  font-family:var(--font-display);
  font-size:40px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.5px;
}

.stat-item:nth-child(odd)  .stat-num{ color:var(--gold); }
.stat-item:nth-child(even) .stat-num{ color:var(--blue); }

.stat-label{
  font-size:10.5px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1.6px;
  margin-top:8px;
  font-weight:600;
}

.hero-bottom-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:26px;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--blue);
  text-transform:uppercase;
  text-align:center;
}

.hero-bottom-note::before,
.hero-bottom-note::after{
  content:"";
  width:40px;
  height:1.5px;
  display:block;
}

.hero-bottom-note::before{ background:var(--gold); }
.hero-bottom-note::after{  background:var(--blue); }

/* BOTTOM STRIP */

.bottom-strip{
  width:100%;
  background:var(--bg-surface);
  border-top:1px solid rgba(245,197,24,.22);   /* --border-gold düzeltildi */
  border-bottom:1px solid var(--border-subtle);
}

.bottom-strip-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:center;
}

.strip-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
  letter-spacing:1.4px;
  white-space:nowrap;
}

.strip-item i{ color:var(--blue); }

/* SERVICE CARDS */

.service-card{
  background:#fff;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(15,23,42,.06);
  border:1px solid rgba(26,159,224,.14);
  transition:transform var(--t-mid) var(--ease-spring),
             box-shadow var(--t-mid) var(--ease-out);
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 60px rgba(15,23,42,.14),var(--shadow-blue);
}

.service-image{
  height:235px;
  overflow:hidden;
  background:#e5e7eb;
  position:relative;
}

.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}

.service-card:hover .service-image img{ transform:scale(1.06); }

.service-content{ padding:36px; }

.service-content h3{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  margin-bottom:14px;
  color:var(--text-dark);
  letter-spacing:-.4px;
}

.service-content p{
  color:var(--text-soft);
  line-height:1.72;
  margin-bottom:22px;
  font-size:15px;
}

.text-link{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  letter-spacing:.2px;
  transition:color var(--t-fast),gap var(--t-fast);
}

.text-link:hover{ color:var(--gold); }

/* PARTNER SLIDER */

.partners-slider{
  overflow:hidden;
  position:relative;
  width:100%;
  mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}

.partners-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:partnerScroll 38s linear infinite;
}

.partners-track:hover{ animation-play-state:paused; }

@keyframes partnerScroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.partner-card{
  flex:0 0 190px;
  height:110px;
  background:#fff;
  border-radius:var(--r-md);
  border:1px solid rgba(26,159,224,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  transition:transform var(--t-mid) var(--ease-spring),
             box-shadow var(--t-mid) var(--ease-out);
  overflow:hidden;
}

.partner-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}

.partner-card img{
  max-height:68px;
  max-width:150px;
  width:auto;
  object-fit:contain;
}

/* PROJECT SLIDER */

.project-slider{
  overflow:hidden;
  position:relative;
  width:100%;
  mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);
}

.project-track{
  width:max-content;
  display:flex;
  gap:26px;
  animation:projectScroll 58s linear infinite;
}

.project-track:hover{ animation-play-state:paused; }

@keyframes projectScroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.project-card{
  flex:0 0 325px;
  background:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.05);
  border:1px solid rgba(15,23,42,.07);
  transition:transform var(--t-mid) var(--ease-spring),
             box-shadow var(--t-mid) var(--ease-out);
}

.project-card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 48px rgba(15,23,42,.14);
}

.project-image{
  height:185px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.project-image img{
  height:100%;
  width:auto;
  object-fit:contain;
  transition:transform .6s var(--ease-out);
}

.project-card:hover .project-image img{ transform:scale(1.05); }

.project-content{ padding:28px; }

.project-tag{
  display:inline-block;
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--blue);
  margin-bottom:10px;
}

.project-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  color:#111827;
  line-height:1.32;
  letter-spacing:-.2px;
}

.project-text{
  color:#6b7280;
  font-size:13.5px;
  line-height:1.62;
}

.center-action{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:52px;
}

.center-action .btn-primary{ display:inline-flex; }

/* LOCATION SECTION */

.location-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:900px;
  margin:0 auto;
  position:relative;
}

.location-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:34px;
  border-radius:var(--r-xl);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:background var(--t-mid),transform var(--t-mid) var(--ease-spring);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.location-card:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-5px);
}

.location-card i{
  font-size:38px;
  color:var(--gold);
  margin-bottom:16px;
  display:block;
}

.location-card h3{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
}

/* MOBILE */

@media(max-width:768px){

  .hero-bg{ min-height:100vh; }

  .hero-content{ padding:115px 18px 48px; }

  .hero-kicker{
    font-size:9px;
    letter-spacing:.8px;
    padding:7px 13px;
    margin-bottom:18px;
    gap:7px;
  }

  .hero-title{
    font-size:28px;
    line-height:1.12;
    letter-spacing:-.4px;
    max-width:360px;
    margin-bottom:18px;
  }

  .hero-desc{
    font-size:15px;
    line-height:1.7;
    max-width:100%;
    margin-bottom:22px;
    color:rgba(255,255,255,.88);
  }

  .hero-tags{ gap:7px; margin-bottom:24px; }

  .hero-tags span{ font-size:10px; padding:7px 12px; }

  .hero-buttons{
    flex-direction:column;
    gap:10px;
    margin-bottom:28px;
    width:100%;
    align-items:center;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary{
    width:100%;
    max-width:320px;
  }

  .stats-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    border-radius:16px;
  }

  .stat-item{
    min-width:auto;
    padding:16px 10px;
    border-right:1px solid rgba(255,255,255,.09);
    border-bottom:1px solid rgba(255,255,255,.09);
  }

  .stat-item:nth-child(even){ border-right:none; }
  .stat-item:nth-last-child(-n+2){ border-bottom:none; }

  .stat-num{ font-size:28px; letter-spacing:-.5px; }
  .stat-label{ font-size:9.5px; letter-spacing:.8px; }

  .hero-bottom-note{ display:none; }

  .bottom-strip-inner{ padding:10px 14px; gap:8px 12px; }

  .strip-item{
    font-size:9px;
    letter-spacing:.6px;
    white-space:normal;
    gap:6px;
  }

  .service-image{ height:200px; }
  .service-content{ padding:24px 22px; }
  .service-content h3{ font-size:20px; }

  .partner-card{ flex:0 0 110px; height:68px; padding:10px; }
  .partner-card img{ max-height:32px; max-width:84px; }

  .project-card{ flex:0 0 270px; }
  .project-content{ padding:22px; }
  .project-title{ font-size:16px; }
  .project-text{ font-size:12.5px; }

  .location-grid{ grid-template-columns:1fr; gap:16px; }
  .location-card{ padding:24px 20px; border-radius:18px; }
  .location-card i{ font-size:28px; }
  .location-card h3{ font-size:20px; }
}

@media(max-width:480px){
  .hero-title{ font-size:24px; max-width:330px; }
  .project-card{ flex:0 0 252px; }
  .partner-card{ flex:0 0 98px; height:62px; padding:8px; }
  .partner-card img{ max-height:28px; max-width:74px; }
}