/* 
 * Services 2 Section Styles 
 * CRITICAL: DO NOT REMOVE THIS FILE! Required for services section
 * This CSS file must be included on all pages that might contain services section
 */
.services-2{width:100%;position:relative}
.services-2 .section-title h4{margin-bottom:15px}
.services-2 .section-title p{opacity:.8;max-width:700px}

.services{width:100%;position:relative}
.services .section-title h4{margin-bottom:15px}
.services .section-title p{opacity:.8;max-width:700px}

/* Layout */
.services-container{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}
.services-column{margin-bottom:40px;padding:0 15px;display:flex;flex-direction:column}

/* Category headers */
.services-category{position:relative;margin-bottom:20px}
.services-category h3{color:#fff;font-weight:600;margin-bottom:10px;position:relative;display:inline-block}
.service-line{height:3px;width:100%;background:linear-gradient(90deg,var(--primary) 0%,rgba(159,90,253,.2) 100%);border-radius:2px}
.services-column:nth-child(2) .service-line{background:linear-gradient(90deg,var(--secondary) 0%,rgba(254,84,209,.2) 100%)}

/* Nav */
.slider-nav{display:flex;justify-content:flex-end;align-items:center;margin-bottom:10px}
.slider-nav button{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.3s;opacity:.7}
.slider-nav button:hover{opacity:1;transform:scale(1.1)}
.slider-nav button:first-child{margin-right:10px}

/* Slider ------------------------------------------------------------------ */
.services-slider{width:100%;position:relative;overflow:hidden;margin-bottom:20px;flex-grow:1}
.services-slider .swiper-wrapper{display:flex;transition:transform .45s ease;gap:20px}

/* ❗ padding kaldırıldı, genişlik JS'ten ayarlanıyor */
.services-slider .swiper-slide{box-sizing:border-box;flex-shrink:0}

/* Kart */
.service-card{background:#1a1a1a;border-radius:10px;overflow:hidden;width:100%;display:flex;flex-direction:column;transition:.3s;height:100%}
.service-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.3)}
.service-image{width:100%;height:200px;overflow:hidden;position:relative;flex-shrink:0}
.service-image img{width:100%;height:100%;object-fit:cover;transition:.5s}
.service-card:hover .service-image img{transform:scale(1.05)}
.service-info{padding:20px;flex-grow:1;display:flex;flex-direction:column}
.service-info h5{color:#fff;margin-bottom:10px;font-size:18px;font-weight:600}
.service-info p{color:rgba(255,255,255,.7);font-size:14px;line-height:1.5;margin-bottom:0;flex-grow:1}

/* Fix for Barba.js transitions - make sure services are visible */
[data-barba="container"] .services-2,
#main .services-2,
body .services-2 {
  display: block !important;
  visibility: visible !important;
}

/* Ensure services columns have correct height */
.services-container .services-column {
  min-height: 400px;
}

/* Responsive tweaks */
@media(max-width:1200px){
  .service-info h5{font-size:16px}
  .service-info p{font-size:13px}
}
@media(max-width:991px){
  .services-slider .swiper-wrapper{gap:0}
}
@media(max-width:767px){
  .slider-nav{justify-content:center;margin-top:15px}
}
@media(max-width:580px){
  .services-2 .section-title h4{font-size:28px}
  .service-image{height:160px}
  .service-info{padding:15px}
}