/* Kənan Usta — Stage 2 service landing pages.
   Standalone CSS keeps the new SEO landing-page layout independent from a Vite rebuild. */

.s2-container {
   width: min(100% - 32px, 1152px);
   margin-inline: auto
}

.s2-container-narrow {
   max-width: 896px
}

.s2-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 40px;
   align-items: start
}

.s2-main-copy {
   min-width: 0
}

.s2-h1 {
   font-size: clamp(2rem, 4.6vw, 3.5rem);
   line-height: 1.08;
   letter-spacing: -.035em;
   font-weight: 800;
   color: #111827
}

.s2-lead {
   font-size: clamp(1.05rem, 1.7vw, 1.25rem);
   line-height: 1.75;
   color: #374151
}

.s2-badges,
.s2-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   list-style: none;
   padding: 0
}

.s2-badge {
   display: inline-flex;
   align-items: center;
   padding: 8px 12px;
   border: 1px solid #fde68a;
   border-radius: 999px;
   background: #fffbeb;
   color: #78350f;
   font-size: .875rem;
   font-weight: 700
}

.s2-actions {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.s2-actions-center {
   justify-content: center
}

.s2-btn {
   display: inline-flex;
   min-height: 48px;
   align-items: center;
   justify-content: center;
   padding: 12px 22px;
   border-radius: 12px;
   color: #fff !important;
   text-decoration: none !important;
   font-weight: 800;
   box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
   transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease
}

.s2-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 24px rgba(15, 23, 42, .12)
}

.s2-btn-call {
   background: #a16207
}

.s2-btn-call:hover {
   background: #854d0e
}

.s2-btn-wa {
   background: #16a34a
}

.s2-btn-wa:hover {
   background: #15803d
}

.s2-quicknav {
   margin-top: 30px;
   padding: 16px;
   border: 1px solid #e5e7eb;
   border-radius: 16px;
   background: #f9fafb
}

.s2-quicknav a {
   color: #92400e;
   text-decoration: none;
   font-weight: 700
}

.s2-quicknav a:hover {
   text-decoration: underline
}

.s2-service-box {
   margin-top: 32px;
   padding: clamp(20px, 3vw, 28px);
   border: 1px solid #e5e7eb;
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 5px 22px rgba(15, 23, 42, .05)
}

.s2-service-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px 28px;
   padding: 0;
   list-style: none
}

.s2-service-list li {
   display: flex;
   gap: 12px;
   align-items: flex-start
}

.s2-sidebar {
   min-width: 0
}

.s2-figure {
   overflow: hidden;
   border: 1px solid #f3f4f6;
   border-radius: 18px;
   background: #f3f4f6;
   box-shadow: 0 12px 32px rgba(15, 23, 42, .10)
}

.s2-hero-image {
   display: block;
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover
}

.s2-related {
   margin-top: 24px;
   padding: 24px;
   border: 1px solid #e5e7eb;
   border-radius: 18px;
   background: #f9fafb
}

.s2-related a {
   color: #92400e;
   text-decoration: none;
   font-weight: 700
}

.s2-related a:hover {
   text-decoration: underline
}

.s2-section {
   padding-block: clamp(48px, 7vw, 72px)
}

.s2-section-muted {
   background: #f8fafc;
   border-block: 1px solid #f1f5f9
}

.s2-section h2 {
   font-size: clamp(1.65rem, 3.3vw, 2.5rem);
   line-height: 1.15;
   letter-spacing: -.025em;
   font-weight: 800
}

.s2-grid {
   display: grid;
   gap: 20px
}

.s2-card {
   padding: 22px;
   border: 1px solid #e5e7eb;
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 5px 18px rgba(15, 23, 42, .045)
}

.s2-card h3 {
   font-size: 1.05rem;
   line-height: 1.35;
   font-weight: 800;
   color: #111827
}

.s2-card p {
   margin-top: 8px;
   line-height: 1.65;
   color: #4b5563
}

.s2-pill {
   display: inline-flex;
   align-items: center;
   padding: 10px 14px;
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   background: #fff;
   color: #1f2937;
   font-weight: 700;
   box-shadow: 0 3px 10px rgba(15, 23, 42, .035)
}

.s2-process {
   background: #0f172a;
   color: #fff
}

.s2-process h2 {
   color: #fff
}

.s2-process-card {
   padding: 22px;
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 18px;
   background: rgba(255, 255, 255, .055)
}

.s2-process-card h3 {
   margin-top: 10px;
   color: #fff;
   font-weight: 800
}

.s2-process-card p {
   margin-top: 8px;
   color: #cbd5e1;
   line-height: 1.65
}

.s2-areas {
   background: #fffbeb;
   border-block: 1px solid #fef3c7
}

.s2-area-pill {
   border-color: #fde68a;
   box-shadow: none
}

.s2-faq-list {
   margin-top: 30px;
   border-block: 1px solid #e5e7eb
}

.s2-faq-item {
   border-bottom: 1px solid #e5e7eb
}

.s2-faq-item:last-child {
   border-bottom: 0
}

.s2-faq-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 20px 0;
   cursor: pointer;
   list-style: none;
   font-weight: 800;
   color: #111827
}

.s2-faq-summary::-webkit-details-marker {
   display: none
}

.s2-faq-answer {
   margin: 0;
   padding: 0 40px 20px 0;
   line-height: 1.75;
   color: #4b5563
}

.s2-final-cta {
   background: #f8fafc;
   border-top: 1px solid #f1f5f9
}

.s2-final-inner {
   text-align: center
}

.s2-mobile-cta {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9999
}

@media(min-width:640px) {
   .s2-actions {
      flex-direction: row
   }

   .s2-actions-center {
      justify-content: center
   }

   .s2-service-list {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media(min-width:768px) {
   .s2-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .s2-grid-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .s2-grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .s2-mobile-cta {
      display: none !important
   }
}

@media(min-width:1024px) {
   .s2-hero-grid {
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      gap: 56px
   }

   .s2-sidebar {
      position: sticky;
      top: 96px
   }

   .s2-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .s2-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }
}

@media(max-width:639px) {
   .s2-container {
      width: min(100% - 24px, 1152px)
   }

   .s2-btn {
      width: 100%
   }

   .s2-h1 {
      font-size: 2rem
   }

   .s2-section {
      padding-block: 44px
   }

   .s2-faq-summary {
      font-size: .98rem
   }

   .s2-faq-answer {
      padding-right: 18px
   }
}

@media(prefers-reduced-motion:reduce) {
   .s2-btn {
      transition: none
   }

   .s2-btn:hover {
      transform: none
   }
}