/* Hizmetler Page Styles */
.breadcrumb-section {
   background: var(--bg-light);
   padding: var(--space-4) 0;
   border-bottom: 1px solid var(--border-light);
}

.breadcrumb {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-size-sm);
   color: var(--text-medium);
}

.breadcrumb-item a {
   color: var(--primary-color);
   text-decoration: none;
   transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
   color: var(--primary-dark);
}

.breadcrumb-separator {
   color: var(--text-light);
}

.breadcrumb-item:last-child {
   color: var(--text-dark);
   font-weight: var(--font-weight-medium);
}

/* Services Overview */
.services-overview {
   padding: var(--space-20) 0;
   background: var(--bg-white);
}

.overview-grid {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: var(--space-16);
   align-items: center;
}

.overview-content h2 {
   font-size: var(--font-size-4xl);
   font-weight: var(--font-weight-black);
   color: var(--text-dark);
   margin-bottom: var(--space-6);
   position: relative;
}

.overview-content h2::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
   border-radius: var(--border-radius-full);
}

.overview-content p {
   font-size: var(--font-size-lg);
   line-height: var(--line-height-loose);
   color: var(--text-medium);
   margin-bottom: var(--space-8);
   text-align: justify;
}

.overview-features {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-4);
}

.overview-features .feature-item {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3);
   background: rgba(255, 107, 53, 0.05);
   border-radius: var(--border-radius);
   transition: all var(--transition-fast);
}

.overview-features .feature-item:hover {
   background: rgba(255, 107, 53, 0.1);
   transform: translateX(5px);
}

.overview-features .feature-item img {
   width: 32px;
   height: 32px;
   filter: hue-rotate(15deg);
}

.overview-features .feature-item span {
   font-weight: var(--font-weight-medium);
   color: var(--text-dark);
   font-size: var(--font-size-base);
}

.overview-image {
   position: relative;
   border-radius: var(--border-radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-xl);
}

.overview-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), transparent);
   z-index: 1;
}

.overview-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

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

/* Service Categories */
.service-categories {
   padding: var(--space-20) 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   position: relative;
}

.service-categories::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6b35' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   opacity: 0.5;
}

.categories-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: var(--space-10);
   position: relative;
   z-index: 1;
}

.category-card {
   background: var(--bg-white);
   padding: var(--space-8);
   border-radius: var(--border-radius-xl);
   box-shadow: var(--shadow-lg);
   text-align: center;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
}

.category-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--transition-base);
}

.category-card:hover::before {
   transform: scaleX(1);
}

.category-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-xl);
}

.category-icon {
   width: 100px;
   height: 100px;
   margin: 0 auto var(--space-6);
   background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
   border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base);
}

.category-card:hover .category-icon {
   transform: scale(1.1);
   box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
}

.category-icon img {
   width: 50px;
   height: 50px;
   filter: brightness(0) invert(1);
}

.category-card h3 {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--text-dark);
   margin-bottom: var(--space-4);
   transition: color var(--transition-fast);
}

.category-card:hover h3 {
   color: var(--primary-color);
}

.category-card p {
   font-size: var(--font-size-base);
   color: var(--text-medium);
   line-height: var(--line-height-relaxed);
   margin-bottom: var(--space-5);
}

.category-features {
   list-style: none;
   padding: 0;
   margin: 0 0 var(--space-6) 0;
}

.category-features li {
   padding: var(--space-2) 0;
   color: var(--text-medium);
   font-size: var(--font-size-sm);
   position: relative;
   padding-left: var(--space-5);
}

.category-features li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--primary-color);
   font-weight: var(--font-weight-bold);
}

.category-link {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-3) var(--space-6);
   background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
   color: var(--text-white);
   text-decoration: none;
   border-radius: var(--border-radius);
   font-weight: var(--font-weight-medium);
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
}

.category-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
   transition: left var(--transition-base);
   z-index: -1;
}

.category-link:hover::before {
   left: 0;
}

.category-link:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
   color: var(--text-white);
}

.category-link::after {
   content: '→';
   font-size: var(--font-size-lg);
   transition: transform var(--transition-fast);
}

.category-link:hover::after {
   transform: translateX(4px);
}

/* Location Services */
.location-services {
   padding: var(--space-20) 0;
   background: var(--bg-white);
}

.locations-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: var(--space-8);
}

.location-card {
   position: relative;
   height: 400px;
   border-radius: var(--border-radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   transition: all var(--transition-base);
}

.location-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
}

.location-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.location-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

.location-card:hover .location-bg img {
   transform: scale(1.1);
}

.location-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(44, 62, 80, 0.3), rgba(44, 62, 80, 0.8));
   z-index: 2;
}

.location-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: var(--space-8);
   color: var(--text-white);
   z-index: 3;
}

.location-content h3 {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--text-white);
   margin-bottom: var(--space-3);
}

.location-content p {
   font-size: var(--font-size-base);
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: var(--space-5);
   line-height: var(--line-height-relaxed);
}

.location-services-list {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
}

.service-pill {
   display: inline-block;
   padding: var(--space-2) var(--space-4);
   background: rgba(255, 107, 53, 0.9);
   color: var(--text-white);
   text-decoration: none;
   border-radius: var(--border-radius-full);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   transition: all var(--transition-fast);
   backdrop-filter: blur(10px);
}

.service-pill:hover {
   background: var(--primary-color);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}

/* Service Process */
.service-process {
   padding: var(--space-20) 0;
   background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
   color: var(--text-white);
   position: relative;
   overflow: hidden;
}

.service-process::before {
   content: '';
   position: absolute;
   top: -20%;
   right: -15%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 70%);
   border-radius: 50%;
}

.service-process::after {
   content: '';
   position: absolute;
   bottom: -15%;
   left: -10%;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
   border-radius: 50%;
}

.service-process .section-header {
   position: relative;
   z-index: 1;
}

.service-process .section-header h2,
.service-process .section-header p {
   color: var(--text-white);
}

.process-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-10);
   position: relative;
   z-index: 1;
}

.step-item {
   text-align: center;
   position: relative;
   padding: var(--space-6);
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--border-radius-lg);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: all var(--transition-base);
}

.step-item:hover {
   transform: translateY(-8px);
   background: rgba(255, 255, 255, 0.15);
}

.step-number {
   position: absolute;
   top: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 40px;
   background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
   border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--text-white);
   box-shadow: var(--shadow-md);
}

.step-icon {
   width: 80px;
   height: 80px;
   margin: var(--space-6) auto var(--space-4);
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base);
}

.step-item:hover .step-icon {
   transform: scale(1.1);
   background: rgba(255, 255, 255, 0.2);
}

.step-icon img {
   width: 40px;
   height: 40px;
   filter: brightness(0) invert(1);
}

.step-item h3 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--text-white);
   margin-bottom: var(--space-3);
}

.step-item p {
   font-size: var(--font-size-base);
   color: rgba(255, 255, 255, 0.9);
   line-height: var(--line-height-relaxed);
}

/* Pricing Info */
.pricing-info {
   padding: var(--space-20) 0;
   background: var(--bg-white);
}

.pricing-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: var(--space-16);
   align-items: center;
}

.pricing-content h2 {
   font-size: var(--font-size-4xl);
   font-weight: var(--font-weight-black);
   color: var(--text-dark);
   margin-bottom: var(--space-6);
   position: relative;
}

.pricing-content h2::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 80px;
   height: 4px;
   background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
   border-radius: var(--border-radius-full);
}

.pricing-content p {
   font-size: var(--font-size-lg);
   line-height: var(--line-height-loose);
   color: var(--text-medium);
   margin-bottom: var(--space-8);
   text-align: justify;
}

.pricing-features {
   margin-bottom: var(--space-8);
}

.pricing-feature {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-4);
   margin-bottom: var(--space-4);
   background: rgba(255, 107, 53, 0.05);
   border-radius: var(--border-radius);
   transition: all var(--transition-fast);
}

.pricing-feature:hover {
   background: rgba(255, 107, 53, 0.1);
   transform: translateX(5px);
}

.pricing-feature img {
   width: 48px;
   height: 48px;
   filter: hue-rotate(15deg);
}

.pricing-feature h4 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--text-dark);
   margin-bottom: var(--space-1);
}

.pricing-feature p {
   font-size: var(--font-size-base);
   color: var(--text-medium);
   margin: 0;
}

.pricing-image {
   position: relative;
   border-radius: var(--border-radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-xl);
}

.pricing-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, rgba(255, 107, 53, 0.2), transparent);
   z-index: 1;
}

.pricing-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

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

/* FAQ Section */
.faq-section {
   padding: var(--space-20) 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.faq-grid {
   max-width: 800px;
   margin: 0 auto;
}

.faq-item {
   background: var(--bg-white);
   border-radius: var(--border-radius-lg);
   margin-bottom: var(--space-4);
   box-shadow: var(--shadow);
   overflow: hidden;
   transition: all var(--transition-base);
}

.faq-item:hover {
   box-shadow: var(--shadow-md);
}

.faq-question {
   padding: var(--space-6);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--bg-white);
   transition: all var(--transition-fast);
}

.faq-question:hover {
   background: rgba(255, 107, 53, 0.05);
}

.faq-question h3 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--text-dark);
   margin: 0;
   flex: 1;
}

.faq-toggle {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--primary-color);
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-full);
   background: rgba(255, 107, 53, 0.1);
   transition: all var(--transition-fast);
}

.faq-item.active .faq-toggle {
   background: var(--primary-color);
   color: var(--text-white);
   transform: rotate(45deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: all var(--transition-base);
   background: rgba(255, 107, 53, 0.02);
}

.faq-item.active .faq-answer {
   max-height: 200px;
   padding: 0 var(--space-6) var(--space-6);
}

.faq-answer p {
   font-size: var(--font-size-base);
   color: var(--text-medium);
   line-height: var(--line-height-relaxed);
   margin: 0;
   padding-top: var(--space-2);
}

/* Services CTA */
.services-cta {
   padding: var(--space-20) 0;
   background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
   color: var(--text-white);
   text-align: center;
   position: relative;
   overflow: hidden;
}

.services-cta::before {
   content: '';
   position: absolute;
   top: -30%;
   left: -15%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
   border-radius: 50%;
}

.services-cta::after {
   content: '';
   position: absolute;
   bottom: -30%;
   right: -15%;
   width: 350px;
   height: 350px;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
   border-radius: 50%;
}

.services-cta .cta-content {
   position: relative;
   z-index: 1;
   max-width: 800px;
   margin: 0 auto;
}

.services-cta h2 {
   font-size: var(--font-size-4xl);
   font-weight: var(--font-weight-black);
   color: var(--text-white);
   margin-bottom: var(--space-6);
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.services-cta p {
   font-size: var(--font-size-xl);
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: var(--space-10);
   line-height: var(--line-height-relaxed);
}

.services-cta .cta-buttons {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
}

.services-cta .btn-primary {
   background: var(--text-white);
   color: var(--primary-color);
   border-color: var(--text-white);
}

.services-cta .btn-primary:hover {
   background: transparent;
   color: var(--text-white);
   border-color: var(--text-white);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.services-cta .btn-secondary {
   background: transparent;
   color: var(--text-white);
   border-color: var(--text-white);
}

.services-cta .btn-secondary:hover {
   background: var(--text-white);
   color: var(--primary-color);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 1023px) {

   .overview-grid,
   .pricing-grid {
      grid-template-columns: 1fr;
      gap: var(--space-12);
   }

   .overview-features {
      grid-template-columns: 1fr;
   }

   .categories-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-8);
   }

   .locations-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
   }

   .process-steps {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-8);
   }

   .services-cta .cta-buttons {
      gap: var(--space-4);
   }
}

@media (max-width: 767px) {
   .page-header {
      padding: var(--space-12) 0;
   }

   .page-header h1 {
      font-size: var(--font-size-3xl);
   }

   .overview-content h2,
   .pricing-content h2 {
      font-size: var(--font-size-2xl);
      margin-bottom: var(--space-4);
   }

   .overview-content p,
   .pricing-content p {
      font-size: var(--font-size-base);
      margin-bottom: var(--space-6);
   }

   .categories-grid,
   .locations-grid,
   .process-steps {
      grid-template-columns: 1fr;
      gap: var(--space-6);
   }

   .category-card,
   .step-item {
      padding: var(--space-6);
   }

   .category-icon,
   .step-icon {
      width: 60px;
      height: 60px;
      margin-bottom: var(--space-4);
   }

   .category-icon img,
   .step-icon img {
      width: 30px;
      height: 30px;
   }

   .category-card h3,
   .step-item h3 {
      font-size: var(--font-size-lg);
      margin-bottom: var(--space-3);
   }

   .location-card {
      height: 300px;
   }

   .location-content {
      padding: var(--space-6);
   }

   .location-content h3 {
      font-size: var(--font-size-lg);
      margin-bottom: var(--space-2);
   }

   .pricing-features {
      margin-bottom: var(--space-6);
   }

   .pricing-feature {
      padding: var(--space-3);
      margin-bottom: var(--space-3);
   }

   .pricing-feature img {
      width: 32px;
      height: 32px;
   }

   .faq-question {
      padding: var(--space-4);
   }

   .faq-question h3 {
      font-size: var(--font-size-base);
   }

   .services-cta h2 {
      font-size: var(--font-size-2xl);
      margin-bottom: var(--space-4);
   }

   .services-cta p {
      font-size: var(--font-size-base);
      margin-bottom: var(--space-8);
   }

   .services-cta .cta-buttons {
      flex-direction: column;
      gap: var(--space-3);
   }

   .services-cta .btn {
      width: 100%;
   }
}